/* ============================================================================
   Parsha Studio — global theme layer
   ----------------------------------------------------------------------------
   This sheet is loaded AFTER static/admin.css and reskins the whole app to the
   premium "Parsha Studio" dark surface (the docs/studio-redesign-mockup.html
   look). It deliberately reuses the EXISTING admin.css class names so the rules
   cascade over them — no markup churn required for a page to look premium.

   Design rules followed here:
     - Flat surfaces only. No gradients, glow, neon, or drop shadows.
       (Functional focus rings are allowed.)
     - Sentence-case labels.
     - Teal = deck A / "enabled"; blue = deck B; amber = warn; red = live/record.

   Section agents: rely on the variables + reusable components below so every
   page stays consistent. Add page-specific rules in your own section work, but
   prefer these tokens over hard-coded colors.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. Design tokens — single source of truth.
   We redefine the variables that admin.css already consumes (so its built-in
   rules pick up the new palette automatically) AND add the new Studio tokens.
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --bg: #0b0d12;          /* app background */
  --panel: #13161d;       /* primary panel / card surface */
  --panel-2: #1a1e27;     /* raised / nested surface */
  --ink: #0b0d12;         /* deepest wells (monitors, code, inputs) */

  /* Hairlines */
  --line: rgba(255, 255, 255, 0.10);
  --line-2: rgba(255, 255, 255, 0.16);

  /* Text */
  --t1: #e7e9ef;          /* primary text */
  --t2: #9aa0ad;          /* muted text */
  --t3: #6b7280;          /* hint text */

  /* Accents */
  --accent-a: #1d9e75;        /* teal — deck A / enabled / "on" */
  --accent-a-soft: #9fe1cb;
  --accent-b: #378add;        /* blue — deck B */
  --accent-b-soft: #85b7eb;
  --warn: #ef9f27;            /* amber — caution */
  --live: #e24b4a;            /* red — on-air / record */
  --live-soft: #f0997b;

  /* Radii */
  --radius-sm: 7px;
  --radius: 10px;
  --radius-lg: 12px;

  /* ---- Compatibility aliases ----------------------------------------------
     admin.css references these older variable names throughout. We remap them
     onto the new palette so its rules render in the new theme without edits. */
  --bg-2: var(--ink);
  --line-soft: var(--line);
  --text: var(--t1);
  --muted: var(--t2);
  --muted-2: var(--t3);
  --primary: var(--accent-b);
  --primary-2: var(--accent-b);
  --accent: var(--accent-b);
  --green: var(--accent-a);
  --amber: var(--warn);
  --red: var(--live);

  /* Kill the legacy drop shadow (admin.css uses var(--shadow) widely). */
  --shadow: none;
}

/* ----------------------------------------------------------------------------
   2. Base — body & background (flat, no radial gradient).
   -------------------------------------------------------------------------- */
body {
  background: var(--bg);
  color: var(--t1);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
}

a { color: inherit; }
.link { color: var(--accent-b-soft); }
.muted { color: var(--t2); }

/* ----------------------------------------------------------------------------
   3. App shell — layout, sidebar (premium left rail), content.
   -------------------------------------------------------------------------- */
.layout { min-height: 100vh; }

.sidebar {
  width: 244px;
  flex: 0 0 244px;
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 16px 12px;
  gap: 16px;
}

/* Brand wordmark — sits with a small teal mark (see base.html .brand-mark). */
.brand {
  gap: 10px;
  padding: 4px 8px 14px;
  border-bottom: 1px solid var(--line);
}
.brand-mark {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--accent-a);
  flex: 0 0 11px;
}
.brand-logo {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  box-shadow: none;
}
.brand-name {
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--t1);
}

/* Navigation rail */
.nav { gap: 2px; }
.nav a {
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--t2);
  font-weight: 500;
  border: 1px solid transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.nav a:hover {
  background: var(--panel-2);
  color: var(--t1);
}
.nav a.active {
  background: var(--panel-2);
  color: var(--t1);
  border-color: var(--line-2);
  box-shadow: inset 2px 0 0 var(--accent-a); /* flat accent strip, not a glow */
}

/* AI status dot in the nav (kept; glow removed) */
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot-on { background: var(--accent-a); box-shadow: none; }
.dot-off { background: var(--t3); box-shadow: none; }

.sidebar-foot { padding-top: 12px; border-top: 1px solid var(--line); }
.ghost-link { color: var(--t2); font-size: 13px; }
.ghost-link:hover { color: var(--accent-a-soft); }
.auth-foot .muted { color: var(--t2); }

.content { background: var(--bg); }

/* ----------------------------------------------------------------------------
   4. Topbar — flat bar, no blur, no gradient.
   -------------------------------------------------------------------------- */
.topbar {
  padding: 16px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  backdrop-filter: none;
}
.topbar h1 { font-size: 18px; font-weight: 600; letter-spacing: 0.01em; }
.topbar .crumb { color: var(--t2); }
.topbar .crumb:hover { color: var(--accent-b-soft); }

.page { padding: 24px 28px 60px; max-width: 1280px; }

.section-title { color: var(--t2); letter-spacing: 0.08em; }
.hint, .notice { color: var(--t2); }
.empty { color: var(--t2); }

/* ----------------------------------------------------------------------------
   5. Banners — inline-banner / err / ok (flat fills).
   -------------------------------------------------------------------------- */
.inline-banner {
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--line-2);
}
.inline-banner.ok {
  border-left-color: var(--accent-a);
  color: var(--accent-a-soft);
  background: rgba(29, 158, 117, 0.10);
}
.inline-banner.err {
  border-left-color: var(--live);
  color: var(--live-soft);
  background: rgba(226, 75, 74, 0.10);
}

/* ----------------------------------------------------------------------------
   6. Cards & panels — flat surfaces, hairline borders, no shadow.
   -------------------------------------------------------------------------- */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
.card-head h2 { font-weight: 600; }

/* Stat cards: keep the lift affordance subtle and shadow-free. */
.stat { box-shadow: none; }
.stat:hover { transform: translateY(-1px); border-color: var(--line-2); }
.stat-label { color: var(--t2); }
.stat-value.muted { color: var(--t1); }
.stat-sub { color: var(--t2); }

/* ----------------------------------------------------------------------------
   7. Buttons — flat, with functional focus rings.
   -------------------------------------------------------------------------- */
.btn {
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  color: var(--t1);
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.btn:hover { background: #222734; border-color: var(--line-2); }
.btn:focus-visible {
  outline: none;
  border-color: var(--accent-b);
  box-shadow: 0 0 0 3px rgba(55, 138, 221, 0.30);
}
.btn-primary {
  background: var(--accent-b);
  border-color: var(--accent-b);
  color: #021326;
}
.btn-primary:hover { background: var(--accent-b-soft); border-color: var(--accent-b-soft); }
.btn-ghost { background: transparent; border-color: var(--line); }
.btn-ghost:hover { background: var(--panel-2); }
.btn-danger {
  background: transparent;
  border-color: rgba(226, 75, 74, 0.45);
  color: var(--live-soft);
}
.btn-danger:hover { background: rgba(226, 75, 74, 0.12); border-color: var(--live); color: #fff; }

.iconbtn {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--t2);
}
.iconbtn:hover:not(:disabled) { color: var(--t1); border-color: var(--line-2); }

/* ----------------------------------------------------------------------------
   8. Inputs / select / textarea — deep wells, teal-free focus ring.
   -------------------------------------------------------------------------- */
.input {
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--t1);
}
.input::placeholder { color: var(--t3); }
.input:focus {
  outline: none;
  border-color: var(--accent-b);
  box-shadow: 0 0 0 3px rgba(55, 138, 221, 0.22);
}
.input-flush:focus { background: var(--ink); border-color: var(--accent-b); }
label { color: var(--t2); }
.check { color: var(--t1); }

/* ----------------------------------------------------------------------------
   9. Badges / pills — flat, semantic colors.
   -------------------------------------------------------------------------- */
.badge { border-radius: 999px; font-weight: 700; }
.badge-on {
  background: rgba(29, 158, 117, 0.15);
  color: var(--accent-a-soft);
  border-color: rgba(29, 158, 117, 0.32);
}
.badge-off {
  background: var(--panel-2);
  color: var(--t2);
  border-color: var(--line);
}
.badge-warn {
  background: rgba(239, 159, 39, 0.15);
  color: #f6c97a;
  border-color: rgba(239, 159, 39, 0.32);
}
.badge-muted {
  background: var(--panel-2);
  color: var(--t2);
  border-color: var(--line);
}

/* Chips (AI suggestions, scene templates) */
.chip {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--t2);
  border-radius: var(--radius-sm);
}
.chip:hover { color: var(--t1); border-color: var(--line-2); }

/* ----------------------------------------------------------------------------
   10. Tables — hairline rows, muted header caps.
   -------------------------------------------------------------------------- */
.table th { color: var(--t2); border-bottom: 1px solid var(--line); }
.table td { border-bottom: 1px solid var(--line); }
.table tr:hover td { background: rgba(255, 255, 255, 0.02); }
.cell-sub { color: var(--t3); }

/* ----------------------------------------------------------------------------
   11. Misc shared surfaces used across pages.
   -------------------------------------------------------------------------- */
.pair-chip { background: var(--panel-2); border: 1px dashed var(--line); }
.screen-check,
.stream-row,
.cr-rundown-item,
.platform-notes span,
.mobile-device-meta div,
.mobile-push-panel {
  background: var(--ink);
  border-color: var(--line);
}

/* Code / command preview wells */
.stream-row code,
.command-preview {
  background: var(--ink);
  border: 1px solid var(--line);
  color: var(--accent-b-soft);
}

/* Toast */
.toast { background: var(--panel); border: 1px solid var(--line-2); box-shadow: none; }

/* Settings page surfaces */
.settings-field .field-label { color: var(--t1); }