/* ==========================================================================
   The Channel — Super-admin console stylesheet
   --------------------------------------------------------------------------
   One hand-written file. No preprocessor, no CSS framework, no imported font,
   no remote asset of any kind (D-01). Every colour, space, size and font in
   the console resolves to a custom property declared once in :root below.

   Palette provenance: the exact hex values already used by the Flutter app's
   lib/theme/colors.dart neutral ramp plus infoDark / errorDark / warning
   washes. The app's gold brand primary is deliberately absent: it fails
   4.5:1 as text on white and this is an internal operator tool.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* type stacks — system only, nothing is downloaded */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* spacing — the ONLY legal padding / margin / gap values (or 0) */
  --sp-1:  4px;   /* badge padding, label-to-help gap */
  --sp-2:  8px;   /* table cell vertical padding, inline button gaps */
  --sp-3:  12px;  /* table cell horizontal padding, input padding, nav item y */
  --sp-4:  16px;  /* default gap between stacked controls */
  --sp-6:  24px;  /* card / panel / dialog padding */
  --sp-8:  32px;  /* main content padding, gap between page sections */
  --sp-12: 48px;  /* empty-state vertical padding */
  --sp-16: 64px;  /* auth screen vertical block */

  /* fixed dimensions — sizes, not spacing, and therefore off the scale */
  --nav-w:       220px;
  --topbar-h:    56px;
  --content-max: 1440px;
  --row-h:       40px;
  --control-h:   32px;
  --control-h-lg: 36px;
  --radius-sm:   4px;
  --radius-md:   8px;

  /* type sizes — exactly four, at exactly two weights (400 / 600) */
  --fs-body:    14px;
  --fs-label:   12px;
  --fs-heading: 20px;
  --fs-display: 28px;

  /* surfaces */
  --c-canvas:        #F3F4F6;  /* page background */
  --c-surface:       #FFFFFF;  /* nav, top bar, cards, tables, dialog */
  --c-surface-muted: #F9FAFB;  /* thead, stat tiles, chart plot background */
  --c-hover:         #F3F4F6;  /* table row hover, ghost button hover */
  --c-border:        #E5E7EB;  /* every border and divider */
  --c-border-strong: #D1D5DB;  /* input border, chart axis lines */

  /* text */
  --c-text:          #1F2937;  /* body + headings           14.7:1 on white */
  --c-text-muted:    #6B7280;  /* secondary on white / #F9FAFB      4.83:1 */
  --c-text-on-grey:  #4B5563;  /* secondary on #F3F4F6              6.87:1 */
  --c-text-invert:   #FFFFFF;  /* labels on accent / destructive fills */

  /* accent + semantics */
  --c-accent:        #2563EB;  /* 5.17:1 on white */
  --c-accent-hover:  #1D4ED8;
  --c-accent-wash:   #EFF6FF;  /* active nav item background only */
  --c-danger:        #DC2626;  /* 4.83:1 on white */
  --c-danger-hover:  #B91C1C;
  --c-danger-wash:   #FEF2F2;  /* error banner background */
  --c-success:       #047857;  /* 5.48:1 on white */
  --c-success-wash:  #ECFDF5;  /* success banner background */
  --c-warn-wash:     #FEF3C7;  /* "Acting as" badge background */
  --c-warn-text:     #92400E;  /* "Acting as" badge text */

  /* charts */
  --c-series-signups: #2563EB;  /* signups line */
  --c-series-edits:   #0D9488;  /* edit bars — 3.74:1, graphics only */
  --c-grid:           #E5E7EB;
}

/* ==========================================================================
   2. RESET AND BASE
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-canvas);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
}

/* Sections toggled with the `hidden` attribute must stay hidden even when a
   later rule gives them display:grid / display:flex. */
[hidden] {
  display: none !important;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: var(--fs-heading);
  font-weight: 600;
  line-height: 1.2;
}

h2 {
  font-size: var(--fs-heading);
  font-weight: 600;
  line-height: 1.2;
}

a {
  color: var(--c-accent);
}

button {
  font: inherit;
}

/* ==========================================================================
   3. UTILITIES
   ========================================================================== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-surface);
  color: var(--c-accent);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  left: var(--sp-2);
  top: var(--sp-2);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 400;
}

.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Footnotes appear both inside white cards and directly on the page canvas.
   --c-text-muted is only 4.39:1 on --c-canvas, so the canvas-safe
   --c-text-on-grey (6.87:1) is used instead — it also passes on white. */
.footnote {
  font-size: var(--fs-label);
  font-weight: 400;
  color: var(--c-text-on-grey);
}

/* ==========================================================================
   4. FOCUS
   One global ring. `outline` is never removed anywhere in this file.
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* ==========================================================================
   5. APP SHELL
   Grid: [nav 220px][main 1fr], top bar spanning both columns.
   ========================================================================== */

#shell {
  display: grid;
  grid-template-columns: var(--nav-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  min-height: 100vh;
}

#topbar {
  grid-column: 1 / -1;
}

#nav {
  grid-column: 1;
  grid-row: 2;
}

#main {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  max-width: var(--content-max);
  padding: var(--sp-8);
  margin: 0 auto;
}

/* Auth screens (splash / Not authorized) — centred block, no shell chrome. */
.auth-screen {
  max-width: 480px;
  padding: var(--sp-16) var(--sp-6);
  margin: 0 auto;
  text-align: center;
}

.auth-screen p {
  padding: var(--sp-4) 0;
  color: var(--c-text-on-grey);
}

/* ==========================================================================
   6. TOP BAR AND LEFT NAV
   ========================================================================== */

#topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topbar-h);
  padding: 0 var(--sp-6);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}

.topbar-brand {
  font-size: var(--fs-body);
  font-weight: 600;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

#user-email {
  font-size: var(--fs-label);
  font-weight: 400;
  color: var(--c-text-muted);
}

#nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-3);
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
}

.nav-item {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  color: var(--c-text);
  font-size: var(--fs-body);
  font-weight: 400;
  text-decoration: none;
  transition: background-color 120ms linear, color 120ms linear;
}

.nav-item:hover {
  background: var(--c-hover);
}

.nav-item.is-active {
  background: var(--c-accent-wash);
  color: var(--c-accent);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--c-accent);
}

/* ==========================================================================
   7. PAGE HEADER, CARD / PANEL, STAT TILES, TABLES, TOOLBAR
   ========================================================================== */

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-6);
}

.page-title {
  font-size: var(--fs-heading);
  font-weight: 600;
  line-height: 1.2;
}

.page-subtitle {
  padding: var(--sp-1) 0 0;
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--c-text-on-grey);
}

.back-link {
  display: inline-block;
  padding: 0 0 var(--sp-2);
  color: var(--c-accent);
  font-size: var(--fs-body);
  text-decoration: none;
}

.back-link:hover {
  text-decoration: underline;
}

.card,
.panel {
  padding: var(--sp-6);
  margin: 0 0 var(--sp-8);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
}

.card h2,
.panel h2 {
  margin: 0 0 var(--sp-4);
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  padding: 0 0 var(--sp-6);
}

.meta-label {
  display: block;
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--c-text-muted);
}

.meta-value {
  display: block;
  padding: var(--sp-1) 0 0;
  font-size: var(--fs-body);
  font-weight: 400;
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sp-4);
}

.tile {
  padding: var(--sp-4);
  background: var(--c-surface-muted);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
}

.tile-caption {
  display: block;
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--c-text-muted);
}

.tile-value {
  display: block;
  padding: var(--sp-1) 0 0;
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-4);
}

.table-scroll {
  overflow-x: auto;
}

.data {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.data thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-surface-muted);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text-on-grey);
  font-size: var(--fs-label);
  font-weight: 600;
  text-align: left;
}

.data thead th.num {
  text-align: right;
}

.data tbody tr {
  min-height: var(--row-h);
  height: var(--row-h);
  transition: background-color 120ms linear;
}

.data tbody tr:hover {
  background: var(--c-hover);
}

.data td,
.data tbody th {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-body);
  font-weight: 400;
  text-align: left;
  vertical-align: middle;
}

.data tbody th[scope="row"] {
  font-weight: 600;
}

/* ==========================================================================
   8. CONTROLS
   ========================================================================== */

.field {
  display: block;
  padding: 0 0 var(--sp-4);
}

.field-label {
  display: block;
  padding: 0 0 var(--sp-1);
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--c-text);
}

.field-error {
  display: block;
  padding: var(--sp-1) 0 0;
  font-size: var(--fs-label);
  font-weight: 400;
  color: var(--c-danger);
}

.input,
.select {
  width: 100%;
  height: var(--control-h);
  padding: 0 var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-sm);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
}

.input::placeholder {
  color: #9CA3AF;
}

.input[aria-invalid="true"],
.select[aria-invalid="true"] {
  border-color: var(--c-danger);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-h-lg);
  padding: 0 var(--sp-4);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms linear, border-color 120ms linear, color 120ms linear;
}

.btn-primary {
  background: var(--c-accent);
  color: var(--c-text-invert);
}

.btn-primary:hover:not(:disabled) {
  background: var(--c-accent-hover);
}

.btn-secondary {
  background: var(--c-surface);
  border-color: var(--c-border-strong);
  color: var(--c-text);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--c-hover);
}

.btn-danger {
  background: var(--c-danger);
  color: var(--c-text-invert);
}

.btn-danger:hover:not(:disabled) {
  background: var(--c-danger-hover);
}

/* Row-level destroy TRIGGERS only. The saturated fill lives on the dialog
   confirm, so a mis-click can never land on a filled destructive button. */
.btn-ghost-danger {
  height: var(--control-h);
  background: transparent;
  color: var(--c-danger);
}

.btn-ghost-danger:hover:not(:disabled) {
  background: var(--c-danger-wash);
}

.btn:disabled {
  background: var(--c-border);
  border-color: transparent;
  color: #9CA3AF;
  cursor: not-allowed;
}

/* ==========================================================================
   9. BADGE, BANNER, EMPTY STATE, SKELETON, SPINNER, CHART BOX
   ========================================================================== */

.badge {
  display: inline-block;
  padding: var(--sp-1) var(--sp-2);
  background: var(--c-canvas);
  border-radius: var(--radius-sm);
  color: var(--c-text-on-grey);
  font-size: var(--fs-label);
  font-weight: 600;
}

.badge-warn {
  background: var(--c-warn-wash);
  color: var(--c-warn-text);
}

.banner {
  display: block;
  padding: var(--sp-4);
  margin: 0 0 var(--sp-4);
  border-radius: var(--radius-md);
  border-left: 3px solid transparent;
  color: var(--c-text);
  font-size: var(--fs-body);
  font-weight: 400;
}

.banner-error {
  background: var(--c-danger-wash);
  border-left-color: var(--c-danger);
}

.banner-success {
  background: var(--c-success-wash);
  border-left-color: var(--c-success);
}

.empty {
  padding: var(--sp-12) var(--sp-6);
  text-align: center;
}

.empty-title {
  display: block;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--c-text);
}

.empty-body {
  display: block;
  padding: var(--sp-2) 0 0;
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--c-text-muted);
}

.skeleton {
  display: block;
}

.skeleton-row {
  display: block;
  height: 12px;
  background: var(--c-canvas);
  border-radius: var(--radius-sm);
}

.spinner {
  width: 24px;
  height: 24px;
  margin: 0 auto;
  border: 2px solid var(--c-border);
  border-top-color: var(--c-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.chart-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

.chart-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
  background: var(--c-surface-muted);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
}

.chart-box svg {
  width: 100%;
  height: 180px;
}

.chart-empty {
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--c-text-muted);
  text-align: center;
}

/* ==========================================================================
   10. DIALOG
   ========================================================================== */

#dialog {
  width: 100%;
  max-width: 480px;
  padding: var(--sp-6);
  background: var(--c-surface);
  border: none;
  border-radius: var(--radius-md);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.15);
}

#dialog.dialog-wide {
  max-width: 560px;
}

#dialog::backdrop {
  background: rgba(17, 24, 39, 0.45);
}

#dlg-body {
  padding: var(--sp-4) 0 0;
}

#dlg-form:not(:empty) {
  padding: var(--sp-4) 0 0;
}

#dialog .input,
#dialog .select {
  height: var(--control-h-lg);
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-4) 0 0;
}

/* ==========================================================================
   11. RESPONSIVE
   960px is the supported floor; below it the left nav degrades gracefully
   into a horizontally scrollable bar.
   ========================================================================== */

@media (max-width: 959px) {
  #shell {
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-h) auto 1fr;
  }

  #topbar,
  #nav,
  #main {
    grid-column: 1;
  }

  #nav {
    grid-row: 2;
    flex-direction: row;
    gap: var(--sp-2);
    overflow-x: auto;
    padding: var(--sp-2) var(--sp-3);
    border-right: 0;
    border-bottom: 1px solid var(--c-border);
  }

  .nav-item {
    white-space: nowrap;
  }

  .nav-item.is-active {
    box-shadow: inset 0 -3px 0 var(--c-accent);
  }

  #main {
    grid-row: 3;
    padding: var(--sp-4);
  }
}

@media (min-width: 1200px) {
  .chart-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   12. MOTION
   The spinner rotation and the 120ms colour transitions above are the only
   animations in the console. Both are switched off here.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }

  .nav-item,
  .btn,
  .data tbody tr {
    transition: none;
  }
}