/* Servizio Cristiano: original logo colours, with darker tones for readable text. */
:root {
  --brand-red: #e33d17;
  --brand-orange: #ef790d;
  --brand-green: #87b62a;
  --brand-mint: #8fc8a8;
  --ink: #28332a;
  --muted: #657063;
  --accent: #537719;
  --accent-dark: #3e5b12;
  --surface: #fff;
  --canvas: #fcfcf9;
  --line: #e4e9dd;
  --soft: #eff5e4;
  --amber: #a94f08;
  --red: #b52e12;
  --mint-soft: #edf6f0;
  --mint-ink: #326b4b;
  --orange-soft: #fff3e6;
  --red-soft: #fff0eb;
}

body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(to right,
    var(--brand-red) 0 25%, var(--brand-orange) 25% 50%,
    var(--brand-mint) 50% 75%, var(--brand-green) 75% 100%);
  z-index: 40;
  pointer-events: none;
}

.brand-logo {
  display: block;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
}

.brand { color: var(--ink); gap: 10px; }
.mobile-brand { display: none; flex-shrink: 0; }
.brand small, .nav-label, .eyebrow { color: var(--muted); }
.sidebar { background: #f3f7ee; }
.sidebar nav a { color: #58644f; }
.sidebar nav a:hover { background: #e7efdb; color: var(--accent-dark); }
.sidebar nav a.active { box-shadow: none; }
.user-info { border-color: var(--line); }
.user-avatar { background: #e3eed5; color: var(--accent-dark); }
.environment, .environment small { color: var(--muted); }
.status-dot { background: var(--brand-green); }
.topbar strong, .icon-button { color: var(--muted); }
.breadcrumb-separator { color: #9ba597; }

.button { color: var(--accent); border-color: #dbe4cf; }
.button:hover { background: var(--soft); border-color: #b8ce98; }
.button.small { border-color: #dbe4cf; }
.button.danger { color: var(--red); border-color: #edc8bb; }
.button.danger:hover { background: var(--red-soft); }
.text-link, .back-link, .download-link, .balance-inline strong { color: var(--accent); }
.title-count { color: var(--muted); }
.demo-banner { background: var(--orange-soft); border-color: #f1dcc3; color: #87521b; }
.demo-banner svg { color: var(--amber); }
.metric-warning strong { color: var(--amber); }
.metric small, .metric a { color: var(--muted); }
.count { color: var(--amber); background: var(--orange-soft); }

th { background: #f5f8ee; color: var(--muted); border-color: var(--line); }
td { border-color: #edf0e7; }
tbody tr:hover { background: #f8fbf3; }
td small, .upcoming-row small { color: var(--muted); }
td small.text-warning { color: var(--amber); }
.person-cell .avatar, .avatar { background: var(--mint-soft); color: var(--mint-ink); }
.person-cell .avatar.user-avatar, .avatar.user-avatar { background: #e3eed5; color: var(--accent-dark); }
.row-link { color: var(--accent); }
.badge { color: var(--muted); background: #eef1e9; }
.badge.paid, .badge.sent { color: var(--mint-ink); background: #e6f3eb; }
.badge.overdue, .badge.failed { color: var(--red); background: var(--red-soft); }
.badge.open, .badge.queued, .badge.sending, .badge.unknown { color: var(--amber); background: var(--orange-soft); }
.badge.cancelled { color: var(--muted); background: #eef1e9; }
.date-tile { color: var(--accent); background: var(--soft); }
.activity-dot { border-color: var(--brand-green); }
.activity-row:not(:last-child)::before { background: var(--line); }
.activity-row p, .activity-row small { color: var(--muted); }
.quick-link { color: #58644f; border-color: var(--line); }
.quick-link svg, .quick-link > span { color: var(--accent); }
.backup-summary { background: var(--mint-soft); }
.backup-summary svg, .backup-summary strong { color: var(--mint-ink); }
.backup-summary p, .workspace-footer { color: var(--muted); }

.empty-state h3, .preview-empty h2 { color: var(--ink); }
.detail-inspector > h3, dt { color: var(--muted); }
.field > label, .recipient-fieldset legend { color: #4e5d45; }
.required { color: var(--amber); }
input:not([type=checkbox]):not([type=hidden]), select, textarea {
  color: var(--ink);
  border-color: #dce4d2;
}
input::placeholder, textarea::placeholder { color: #74806c; }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px #e5efd7;
}
:focus-visible { outline-color: var(--accent); }
input[type=file]::file-selector-button { background: var(--soft); color: var(--accent-dark); }
.help-text, .variable-inspector p, .variable-button span,
.template-row p, .template-row small, .template-number, .template-info,
.recipient-option small, .send-actions > span, .tabs a,
.settings-help p, .settings-help small { color: var(--muted); }
.variable-button:hover, .template-row:hover { background: var(--soft); }
.variable-button code, .step-indicator .current { color: var(--accent); }
.preview-label { background: var(--soft); color: var(--accent-dark); }
.email-body { color: var(--ink); }
.email-document { display: block; width: 100%; min-height: 380px; border: 0; background: #f4f6ef; }
.preview-empty { color: var(--muted); border-color: #cbdab9; }
.preview-envelope { color: var(--brand-mint); }
.step-indicator { color: var(--muted); }
.connection-info { background: var(--mint-soft); }
.connection-info > strong { color: var(--mint-ink); }
.notice { color: #4c6231; border-color: #d9e6c7; background: #f2f7eb; }
.notice.error { color: var(--red); border-color: #f0cbbd; background: var(--red-soft); }
.notice.warning { color: #87521b; border-color: #f1dcc3; background: var(--orange-soft); }
.notice.success { color: var(--mint-ink); border-color: #cee5d7; background: var(--mint-soft); }

.login-intro { background: #f0f5e7; }
.login-intro .brand-logo { width: 64px; height: 64px; }
.login-caption h1 { color: var(--accent-dark); }
.login-caption p, .login-version, .login-note { color: var(--muted); }
.login-intro::after { content: none; }
.login-caption { padding-bottom: 150px; }
.login-intro::before {
  content: "";
  position: absolute;
  width: clamp(160px, 18vw, 224px);
  aspect-ratio: 1;
  right: 50px;
  bottom: 70px;
  background: #fff url("images/servizio-cristiano-logo.23fa095e6d63.jpg") center / contain no-repeat;
  border-radius: 50%;
  pointer-events: none;
}

@media (max-width: 1250px) {
  .sidebar .brand-logo { width: 42px; height: 42px; }
}

@media (max-width: 1050px) {
  .login-intro::before { right: 32px; bottom: 60px; }
}

@media (max-width: 760px) {
  .login-page { grid-template-rows: auto 1fr; }
  .mobile-brand { display: flex; }
  .mobile-brand .brand-logo { width: 30px; height: 30px; }
  .sidebar .brand-logo { width: 46px; height: 46px; }
  .login-intro .brand-logo { width: 48px; height: 48px; }
  .login-intro::before { content: none; }
  .login-caption { padding-bottom: 0; }
}

@media (min-width: 761px) and (max-height: 740px) {
  .login-caption { padding-bottom: 0; }
  .login-intro::before { content: none; }
}