/* ============================================================
   editorial.css — global admin/manager retheme.

   Scoped to body.app-admin, so driver / client / observer logins
   are completely untouched. It (1) redefines the cool-slate design
   tokens to the warm-paper + indigo "editorial" system used on
   /rounds, and (2) overrides the shared components that hardcode
   colours (buttons, tables, badges, the page chrome). Because almost
   everything in styles.css is token-driven, the token swap alone
   retints the whole admin app; the rest is targeted cleanup.

   Page-specific stylesheets (rounds.css, round-builder.css, …) load
   AFTER this and layer page-level polish on top. Custom user themes
   (Hilda = burgundy) get the same system with their own accent.
   ============================================================ */

/* ── Design tokens: warm paper + indigo (admin/manager only) ───── */
body.app-admin {
  --bg:            #FBFAF7;   /* warm paper canvas */
  --bg-gradient:   #FBFAF7;
  --bg-hover:      #F4F2EE;   /* paper sink */
  --surface:       #FFFFFF;
  --card-bg:       #FFFFFF;
  --ink:           #1A1714;   /* warm near-black */
  --ink-secondary: #4A453E;
  --ink-muted:     #8B847A;
  --border:        #E7E2D8;   /* warm hairline */
  --accent:        #4F46E5;   /* indigo */
  --accent-hover:  #4038C9;
  --accent-light:  #EEF0FE;
  --accent-gradient: #4F46E5; /* flat — no gradient */
  --accent-soft:   rgba(79, 70, 229, 0.10);
  /* semantic colours kept (success / partial / failure) */
  --green: #2F7A55; --green-light: #E8F2EC; --green-dark: #2F7A55; --green-gradient: #2F7A55;
  --amber: #B07A1E; --amber-light: #F7EEDD;
  --red:   #B23A2E; --red-light: #F7E8E6;
  /* fold the old "purple" into the indigo accent for consistency */
  --purple: #4F46E5; --purple-light: #EEF0FE;
  /* softer, warm-tinted elevation */
  --card-shadow:    0 1px 2px rgba(26, 23, 20, 0.04);
  --card-shadow-lg: 0 12px 32px rgba(26, 23, 20, 0.10);
  --radius: 10px; --radius-sm: 8px; --radius-lg: 14px;
  /* sidebar stays dark navy; only its accent moves sky-blue → indigo
     (a brighter indigo so it reads on the dark surface) */
  --sidebar-active:    #818CF8;
  --sidebar-hover-bg:  rgba(129, 140, 248, 0.10);
  --sidebar-active-bg: rgba(129, 140, 248, 0.14);

  --ed-display: "Manrope", "Inter", system-ui, sans-serif;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ── Type: Manrope display on headings ────────────────────────── */
body.app-admin .page-title,
body.app-admin h1, body.app-admin h2, body.app-admin h3,
body.app-admin .section-header h2,
body.app-admin .modal-header h2 { font-family: var(--ed-display); letter-spacing: -0.02em; }

/* ── Page chrome ──────────────────────────────────────────────── */
body.app-admin .main-content { background: var(--bg); }
body.app-admin .content-header { border-bottom: 1px solid var(--border); padding-bottom: 16px; }
body.app-admin .page-title { color: var(--ink); }

/* ── Buttons: flat indigo primary, hairline secondary, no lift ── */
body.app-admin .btn { border-radius: 10px; box-shadow: none; }
body.app-admin .btn:hover { transform: none; }
body.app-admin .btn-primary { background: var(--accent); color: #fff; box-shadow: none; }
body.app-admin .btn-primary:hover { background: var(--accent-hover); box-shadow: none; transform: none; }
body.app-admin .btn-secondary { background: var(--surface); color: var(--ink-secondary); border: 1px solid var(--border); box-shadow: none; }
body.app-admin .btn-secondary:hover { background: var(--surface); border-color: var(--accent); color: var(--accent); transform: none; }
body.app-admin .btn-danger,
body.app-admin .btn-danger-sm { background: var(--red); border-color: transparent; color: #fff; }

/* ── Cards: hairline, soft shadow, no hover-lift ──────────────── */
body.app-admin .section-card { border: 1px solid var(--border); box-shadow: var(--card-shadow); border-radius: var(--radius-lg); }
body.app-admin .stat-card { border: 1px solid var(--border); box-shadow: var(--card-shadow); }
body.app-admin .stat-card:hover { transform: none; box-shadow: var(--card-shadow); }

/* ── Record-count chip: quiet hairline, not a filled pill ─────── */
body.app-admin .record-count {
  background: none; border: 1px solid var(--border); color: var(--ink-muted);
  text-transform: uppercase; font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* ── Data tables: warm hairlines, calm zebra → hover only ─────── */
body.app-admin .data-table th {
  background: var(--bg); color: var(--ink-muted); border-bottom: 1px solid var(--border);
  font-size: 10.5px; letter-spacing: 0.05em;
}
body.app-admin .data-table td { border-bottom: 1px solid var(--border); color: var(--ink-secondary); }
body.app-admin .data-table tbody tr:nth-child(even) td { background: transparent; }
body.app-admin .data-table tbody tr:hover td { background: var(--bg-hover); }
body.app-admin .cell-primary { color: var(--ink); }

/* ── Inputs / selects / labels ────────────────────────────────── */
body.app-admin .field-input {
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink);
}
body.app-admin .field-input::placeholder { color: var(--ink-muted); }
body.app-admin .field-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
body.app-admin .field-label { color: var(--ink-muted); }
body.app-admin select.field-input option { background: var(--surface); color: var(--ink); }

/* ── Badges: quiet semantic soft-tint pills ───────────────────── */
body.app-admin .badge { border-radius: 999px; font-weight: 600; }
body.app-admin .badge-green { background: var(--green-light); color: var(--green-dark); }
body.app-admin .badge-amber { background: var(--amber-light); color: var(--amber); }
body.app-admin .badge-blue  { background: var(--accent-light); color: var(--accent); }
body.app-admin .badge-red   { background: var(--red-light); color: var(--red); }

/* ── Modals ───────────────────────────────────────────────────── */
body.app-admin .modal-card { border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow-lg); }

/* ── Empty states ─────────────────────────────────────────────── */
body.app-admin .empty-state { color: var(--ink-muted); }
body.app-admin .empty-state svg { color: var(--border); }

/* ── The SAINT nav wave: sky-blue → accent ────────────────────── */
body.app-admin .saint-wave span { background: var(--sidebar-active); }

/* ════════════════════════════════════════════════════════════════
   Hilda's burgundy — same editorial system, red accent.
   Higher specificity than the styles.css theme-burgundy block so it
   wins; keeps her dark-red sidebar, warm-paper content, red accent.
   ════════════════════════════════════════════════════════════════ */
body.theme-burgundy.app-admin {
  --accent:        #7A1F2B;
  --accent-hover:  #5E1822;
  --accent-light:  #FBEFF1;
  --accent-gradient: #7A1F2B;
  --accent-soft:   rgba(122, 31, 43, 0.12);
  --purple: #7A1F2B; --purple-light: #FBEFF1;
  /* her dark-red sidebar stays (from the styles.css theme-burgundy block) */
  --sidebar-active:    #E7A8B2;
  --sidebar-hover-bg:  rgba(231, 168, 178, 0.10);
  --sidebar-active-bg: rgba(231, 168, 178, 0.16);
}