/* ============================================================
   PDM ADMIN THEME — AOTV 2.0 (see production2.html, the reference)
   Load AFTER /sources/Assets/colors_and_type.css.

   CANONICAL HEADER MARKUP (keep pages lockstep — see Task 2):
   <header><div class="shell"><div class="bar">
     <div class="brand-group">
       <div class="brand"><img src="/static/images/AlbionTVlogosquare.png" alt="AOTV"><span>PDM</span></div>
       <nav>
         <a href="/stream-manager">Stream Manager</a>
         <a id="production-link" href="/production" class="hidden">Production</a>
         <a href="/schedule">Schedule</a>
         <a href="/show-history">Show History</a>
         <a href="/invoices">Invoices</a>
         <a id="budget-link" href="/budget" class="hidden">Budget</a>
         <a href="/logs">Logs</a>
         <a href="/server-status">Server Status</a>
         <a id="admin-link" href="/admin" class="hidden">Admin</a>
       </nav>
     </div>
     <div class="navr"><a href="/my-info">My Info</a><a href="/logout" data-logout>Logout</a></div>
   </div></div></header>
   Set class="active" on the current page's link. Keep each page's EXISTING
   logout mechanism (button vs link) exactly as-is — only restyle it.
   ============================================================ */

/* ---- LAYER 1: semantic vocabulary ---------------------------------- */
:root { --bg:#141210; --card:#1D1A16; --card2:#17140F; --line:#33291C;
        --gold:#E8B244; --gold-dim:#A66818; --red:#C13520;
        --text:#EFE6D6; --dim:#9C8E76; --live:#7FD89C; }
* { box-sizing: border-box; }
html, body { margin:0; background:var(--bg); color:var(--text);
             font-family:var(--aotv-font-ui, system-ui), sans-serif; }

header { background:#100E0B; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50;
         box-shadow: 0 2px 0 0 var(--gold-dim); /* the ONE flourish: gold band edge */ }
/* .shell .bar .brand .brand-group nav a (+ .active red pill) .navr — production2.html:20-34 verbatim
   (.brand-group is production2's inline-styled wrapper, promoted to a class) */
.shell { max-width: 85rem; margin: 0 auto; padding: 0 16px; }
.bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; gap: 16px; }
.brand-group { display: flex; align-items: center; gap: 22px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 40px; height: 40px; object-fit: contain; }
.brand span { font-family: var(--aotv-font-display); font-weight: 800; font-size: 20px; letter-spacing: 0.04em; }
nav { display: flex; gap: 2px; flex-wrap: wrap; }
nav a, .navr a, .navr button {
    padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
    color: var(--dim); text-decoration: none; border: 0; background: transparent;
    white-space: nowrap;
    font-family: inherit; cursor: pointer; transition: color .15s, background .15s; }
nav a:hover, .navr a:hover, .navr button:hover { color: var(--text); background: #241F18; }
nav a.active, .navr a.active { background: var(--red); color: #fff; }
.navr { display: flex; align-items: center; gap: 6px; }
.hidden { display: none !important; }

/* .pagehead h1 .lede — production2.html:36-41 verbatim */
main { max-width: 85rem; margin: 0 auto; padding: 28px 16px 60px; }
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
h1 { font-family: var(--aotv-font-display); font-size: 30px; letter-spacing: 0.05em; margin: 0; }
h1 b { color: var(--gold); }
.lede { color: var(--dim); font-size: 13px; margin: 6px 0 26px; max-width: 68ch; }

/* .pkg .pkg-head .pkg-actions — production2.html:50-57 verbatim */
.pkg { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
       padding: 22px 24px; margin-bottom: 22px; }
.pkg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pkg-head h2 { font-family: var(--aotv-font-display); font-size: 22px; letter-spacing: 0.06em; margin: 0; }
.pkg-head h2 b { color: var(--red); }
.pkg-desc { color: var(--dim); font-size: 13px; margin: 6px 0 0; max-width: 70ch; }
.pkg-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* .btn + variants — production2.html:58-65 verbatim */
.btn { display: inline-block; padding: 9px 16px; border-radius: 8px; font-size: 13px; font-weight: 700;
       text-decoration: none; border: 1px solid var(--line); color: var(--text); background: #2A241C;
       white-space: nowrap; font-family: inherit; cursor: pointer; }
.btn:hover { border-color: var(--gold); }
.btn.primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #241505; }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.btn.ghost { background: transparent; }

/* .stack-title — production2.html:68-69 verbatim */
.stack-title { font-family: var(--aotv-font-mono); font-size: 11px; letter-spacing: 0.22em;
               color: var(--gold); margin: 20px 0 10px; text-transform: uppercase; }

/* .res .res-head .res-body collapsibles — production2.html:87-99 verbatim */
.res { margin-bottom: 26px; }
.res-head { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
            background: var(--card); border: 1px solid var(--line); border-radius: 12px;
            padding: 14px 20px; color: var(--text); cursor: pointer; white-space: nowrap;
            font-family: var(--aotv-font-display); font-size: 18px; letter-spacing: 0.08em; font-weight: 800; }
.res-head:hover { border-color: var(--gold); }
.res-head .chev { display: inline-block; transition: transform .15s; color: var(--gold); }
.res.open .res-head .chev { transform: rotate(90deg); }
.res-head .res-sub { margin-left: auto; font-family: var(--aotv-font-mono); font-size: 11px;
                     letter-spacing: 0.18em; color: var(--dim); font-weight: 400; }
.res-body { display: none; margin-top: 14px; margin-left: 14px; padding-left: 18px; border-left: 2px solid var(--line); }
.res.open .res-body { display: block; }

/* data tables */
.tbl { width:100%; border-collapse:collapse; font-size:13px; }
.tbl th { text-align:left; font-family:var(--aotv-font-mono); font-size:11px;
          letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
          padding:8px 10px; border-bottom:1px solid var(--line); }
.tbl td { padding:9px 10px; border-bottom:1px solid var(--line); }
.tbl td.money, .tbl th.money { text-align:right; font-family:var(--aotv-font-mono); }

/* status chips */
.chip { display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px;
        font-weight:700; letter-spacing:.04em; border:1px solid transparent; }
.chip-ok      { background:rgba(127,216,156,.12); color:var(--live); border-color:rgba(127,216,156,.35); }
.chip-neutral { background:rgba(156,142,118,.12); color:var(--dim);  border-color:rgba(156,142,118,.35); }
.chip-warn    { background:rgba(232,178,68,.12);  color:var(--gold); border-color:rgba(232,178,68,.35); }
.chip-danger  { background:rgba(193,53,32,.15);   color:#E37B66;     border-color:rgba(193,53,32,.45); }

/* forms */
.field, input.field, select.field, textarea.field {
  background:var(--card2); border:1px solid var(--line); border-radius:8px;
  color:var(--text); padding:8px 10px; font:inherit; }
.field:focus { outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold-dim); }

/* modal + toast (match the class names schedule.html already uses where practical) */
.modal-backdrop { background:rgba(10,8,5,.72); }
.modal-panel { background:var(--card); border:1px solid var(--line); border-radius:12px; }
.toast { background:var(--card); border:1px solid var(--gold-dim); color:var(--text); }

:focus-visible { outline:2px solid var(--gold); outline-offset:1px; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }

/* login (bespoke, Task 2) */
.login-card { max-width:380px; margin:14vh auto; background:var(--card);
              border:1px solid var(--line); border-radius:12px; padding:34px 32px; }
.login-card h1 { font-family:var(--aotv-font-display); font-size:26px; letter-spacing:.06em; }

/* ---- LAYER 2: TRANSITIONAL Tailwind remap (pass-1 skin; TEMPORARY) --
   Every selector below overrides a Tailwind CDN utility the OLD pages emit so
   the untouched markup reads in AOTV browns/gold/red without editing any page.
   Pass 2 migrates core pages onto Layer 1 and these can be trimmed; utility
   pages may keep leaning on this block. Scoped !important is deliberate — it
   must beat Tailwind's own (non-!important) utilities regardless of source order.

   HAZARD (pass-2 migrations): because every rule here is scoped-!important it
   OUT-SPECIFIES Layer-1 components. When you migrate an element onto a Layer-1
   class you MUST also STRIP its Tailwind color utilities from the markup — e.g.
   `<div class="pkg bg-gray-900">` renders --bg (the remap), NOT --card (.pkg).
   Leftover utilities silently win; delete them as you migrate.

   Enumeration is over the WHOLE file of each page (class= attrs AND <script>
   bodies / JS-built className strings), color-name filter removed, across
   dashboard/schedule/show-history/invoices/budget/logs/server-status/admin/
   my-info/login/production2. 126 distinct color utilities in real use, every
   one mapped (verified by an enumerate-and-diff: 0 unmapped). [Correction: the
   first pass claimed "90/90 exhaustive"; that grep filtered out cyan/emerald/
   orange/rose/pink and could not see JS-string classes, so 36 in-use utilities
   were actually unmapped — now fixed.] Roles:
     gray   bg/border → brown surfaces / --line;  gray text → --text/--dim tiers
     purple accent    → --red (solid/active) + --gold (text/focus/highlight/border)
     blue   (info)    → --gold family (per brief: blue → gold or red per role)
     green  (ok)      → --live text/dots; SOLID bg → dark #2E5E3F (readable labels)
     red    (danger)  → --red / #E37B66 (aotv-red-100); rose/pink share this
     amber+yellow     → --gold family
     cyan   (preparing)→ gold family (distinct bright-gold accent)
     orange (delayed) → burnt-orange #D8541A (--aotv-faction-orange), a brand token,
                        kept distinct from preparing(gold) AND danger(red)          */

/* --- GRAY: surfaces → warm browns --- */
.bg-gray-900 { background-color:var(--bg) !important; }
.bg-gray-800, .bg-gray-800\/60 { background-color:var(--card) !important; }
.bg-gray-800\/80 { background-color:rgba(29,26,22,.85) !important; }
.bg-gray-750, .hover\:bg-gray-700:hover { background-color:#241F18 !important; }
.bg-gray-700, .disabled\:bg-gray-700:disabled { background-color:var(--card2) !important; }
.bg-gray-700\/30, .hover\:bg-gray-700\/30:hover { background-color:rgba(36,31,24,.3) !important; }
.bg-gray-700\/50, .hover\:bg-gray-700\/50:hover { background-color:rgba(36,31,24,.5) !important; }
.bg-gray-600, .disabled\:bg-gray-600:disabled, .hover\:bg-gray-600:hover { background-color:#2A241C !important; }
.bg-gray-500, .hover\:bg-gray-500:hover { background-color:#3A322A !important; }
.border-gray-700, .border-gray-600, .border-gray-700\/50 { border-color:var(--line) !important; }
/* --- GRAY: text tiers --- */
.text-white, .text-gray-100, .text-gray-200, .text-gray-300 { color:var(--text) !important; }
.text-gray-400 { color:var(--dim) !important; }
.placeholder-gray-400::placeholder { color:var(--dim) !important; }
.text-gray-500, .placeholder-gray-500::placeholder { color:#7d6f58 !important; }
.text-gray-600 { color:#6b5f4a !important; }
/* login page full-bleed gradient backdrop → brown with a warm dark-red middle (Tailwind gradient custom props) */
.from-gray-900 { --tw-gradient-from:var(--bg) !important; }
.to-gray-900 { --tw-gradient-to:var(--bg) !important; }

/* --- PURPLE: accent → red (solid/active) + gold (text/focus/highlight border) --- */
.bg-purple-600 { background-color:var(--red) !important; }
.bg-purple-600\/30 { background-color:rgba(193,53,32,.3) !important; }
.bg-purple-800\/30 { background-color:rgba(193,53,32,.28) !important; }
.hover\:bg-purple-700:hover { background-color:#A82C1A !important; }
.disabled\:bg-purple-800:disabled { background-color:#5A140C !important; } /* muted dark scroll-red for disabled state */
.text-purple-300, .text-purple-400, .text-purple-500, .text-purple-600, .hover\:text-purple-300:hover { color:var(--gold) !important; }
.accent-purple-600 { accent-color:var(--red) !important; }
.border-purple-500 { border-color:var(--gold) !important; } /* active indicator / login logo ring */
.focus\:border-purple-500:focus { border-color:var(--gold) !important; }
.focus\:ring-purple-500:focus { --tw-ring-color:var(--gold) !important; }
.via-purple-900 { --tw-gradient-stops:var(--tw-gradient-from), #2A0A06, var(--tw-gradient-to) !important; }

/* --- BLUE: informational → gold family --- */
.bg-blue-500, .bg-blue-600 { background-color:var(--gold-dim) !important; }
.bg-blue-500\/10 { background-color:rgba(232,178,68,.10) !important; }
.bg-blue-500\/20 { background-color:rgba(232,178,68,.15) !important; }
.hover\:bg-blue-500\/20:hover { background-color:rgba(232,178,68,.22) !important; }
.hover\:bg-blue-700:hover { background-color:#8A5614 !important; }
.border-blue-500 { border-color:var(--gold) !important; }
.border-blue-500\/50 { border-color:rgba(232,178,68,.4) !important; }
.focus\:border-blue-500:focus { border-color:var(--gold) !important; }
.focus\:ring-blue-500:focus { --tw-ring-color:var(--gold) !important; }
.text-blue-300, .text-blue-400, .text-blue-500, .hover\:text-blue-300:hover { color:var(--gold) !important; }
.text-blue-400\/70 { color:rgba(232,178,68,.7) !important; }

/* --- GREEN/EMERALD: dots/indicators/text → --live (light mint, legible on brown);
   SOLID labeled backgrounds (buttons/badges/toasts) → dark #2E5E3F so --text labels stay
   readable (M3 — light mint solids were unreadable under white/cream text) --- */
.bg-green-500 { background-color:var(--live) !important; }                 /* status dots / audio dots only */
.bg-green-600, .bg-emerald-700 { background-color:#2E5E3F !important; }    /* solid buttons / LIVE badges / ok toast — keep --text label */
.bg-green-500\/10 { background-color:rgba(127,216,156,.10) !important; }
.bg-green-500\/20, .bg-green-600\/20 { background-color:rgba(127,216,156,.15) !important; }
.bg-green-600\/30 { background-color:rgba(127,216,156,.22) !important; }
.bg-green-900\/20 { background-color:rgba(127,216,156,.10) !important; }
.hover\:bg-green-700:hover { background-color:#37714C !important; }        /* dark-green hover, not mint */
.border-green-500 { border-color:var(--live) !important; }
.border-green-500\/50 { border-color:rgba(127,216,156,.4) !important; }
.ring-green-500, .focus\:ring-green-500:focus { --tw-ring-color:var(--live) !important; }
.text-green-400, .text-green-500, .text-emerald-400 { color:var(--live) !important; }

/* --- RED: danger → --red / #E37B66 (aotv-red-100) --- */
.bg-red-500, .bg-red-600 { background-color:var(--red) !important; }
.bg-red-500\/20, .bg-red-600\/20 { background-color:rgba(193,53,32,.18) !important; }
.hover\:bg-red-500\/20:hover { background-color:rgba(193,53,32,.28) !important; }
.hover\:bg-red-600\/40:hover { background-color:rgba(193,53,32,.4) !important; }
.hover\:bg-red-700:hover { background-color:#A82C1A !important; }
.border-red-500\/50, .border-red-600\/50 { border-color:rgba(193,53,32,.45) !important; }
.border-red-700 { border-color:var(--red) !important; }
.text-red-300\/80 { color:rgba(227,123,102,.85) !important; }
.text-red-400, .text-red-500, .text-rose-400, .text-pink-400 { color:#E37B66 !important; }
.bg-rose-700 { background-color:#8C1D12 !important; } /* rose/pink → dark scroll-red solid (error toast), keep --text label */

/* --- AMBER + YELLOW: warning/highlight → gold family --- */
.accent-amber-500 { accent-color:var(--gold) !important; }
.bg-yellow-500 { background-color:var(--gold) !important; } /* solid mid-warn dot / gauge fill */
.bg-amber-600, .bg-yellow-600 { background-color:var(--gold-dim) !important; }
.border-amber-500 { border-color:var(--gold) !important; }
.hover\:bg-amber-700:hover, .hover\:bg-yellow-700:hover { background-color:#8A5614 !important; }
.bg-amber-950\/30 { background-color:rgba(232,178,68,.10) !important; }
.bg-amber-950\/40 { background-color:rgba(232,178,68,.14) !important; }
.bg-yellow-500\/20 { background-color:rgba(232,178,68,.15) !important; }
.hover\:bg-yellow-500\/20:hover { background-color:rgba(232,178,68,.22) !important; }
.border-amber-900\/50 { border-color:rgba(166,104,24,.5) !important; }
.border-yellow-500\/50 { border-color:rgba(232,178,68,.4) !important; }
.focus\:border-yellow-500:focus { border-color:var(--gold) !important; }
.focus\:ring-yellow-500:focus { --tw-ring-color:var(--gold) !important; }
.text-amber-200 { color:#F5DFA0 !important; }
.text-amber-300, .text-amber-400 { color:var(--gold) !important; }
.text-amber-500\/70 { color:rgba(232,178,68,.7) !important; }
.text-yellow-300\/80 { color:rgba(232,178,68,.85) !important; }
.text-yellow-400, .text-yellow-500 { color:var(--gold) !important; }

/* --- CYAN: producer "preparing" / info accents → gold family.
   Kept distinct from delayed(orange): preparing = bright gold, delayed = burnt orange. --- */
.text-cyan-400, .text-cyan-500 { color:var(--gold) !important; }
.border-cyan-500 { border-color:var(--gold-dim) !important; }
.border-cyan-500\/50 { border-color:rgba(166,104,24,.5) !important; }
.bg-cyan-500\/20, .bg-cyan-600\/20 { background-color:rgba(232,178,68,.15) !important; }
.bg-cyan-600 { background-color:#8A6A1F !important; } /* solid "preparing" badge — dark gold under --text label */

/* --- ORANGE: producer "delayed" / warning → burnt-orange brand token #D8541A
   (--aotv-faction-orange, inlined so it resolves even before colors_and_type loads).
   Distinct from preparing(gold) AND danger(red) so the three states stay separable. --- */
.text-orange-400 { color:#D8541A !important; }
.border-orange-500 { border-color:#D8541A !important; }
.border-orange-500\/50 { border-color:rgba(216,84,26,.5) !important; }
.bg-orange-500\/20, .bg-orange-600\/20 { background-color:rgba(216,84,26,.18) !important; }
.bg-orange-600 { background-color:#D8541A !important; } /* solid "delayed" badge — keep --text label */