/* Media Lab theme — the shared suite "black panther" system (Design Spec v2.1 §2).
   One file of custom properties, linked AFTER each page's inline <style> so the
   tokens always win. Identical across Lineup Lab, ShowFlow, HostFlow, Media Lab —
   with a violet --brand accent that gives Media Lab its own identity. */

/* ---------- DARK (opt-in via toggle) ---------- */
html[data-theme="dark"] {
  --brand:#E2673F; --brand-deep:#EC7A52; --brand-bg:rgba(214,82,46,.18); --brand-ink:#F0A98C;
  --bg:#17151A; --surface:#201D24; --surface-2:#2A2630;
  --line:#2E2A33; --line-soft:#2A2630;
  --ink:#EDE7DB; --ink-soft:#A39A8C; --ink-faint:#6E665C;
  --ok:#6FBF8E; --ok-bg:#16291F; --warn:#E0B25A; --warn-bg:#2A2415;
  --danger:#E2727F; --danger-bg:#2A171B; --blue:#8A98EC;
  --radius:12px;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 34px -18px rgba(0,0,0,.75);
  --headbar:#1B1920;                 /* top bar / tabs / logo mark — stays dark */
  --btn-2-bg:#2C2832; --btn-2-border:#48424F;
  /* primary accent inverts to a warm-cream button with dark text in dark mode */
  --accent:#EDE7DB; --accent-ink:#1A1712; --accent-deep:#FFFFFF; --accent-soft:rgba(237,231,219,.12);
  --danger-btn:#B23A45;              /* solid delete button; white text reads on it */
}

/* ---------- LIGHT (default / hero) ---------- */
:root {
  --brand:#D6522E; --brand-deep:#B23A1E; --brand-bg:#FBE7DF; --brand-ink:#9E3316;
  --bg:#F4F1EC; --surface:#FFFFFF; --surface-2:#FBF9F5;
  --line:#E2DDD3; --line-soft:#EDE8DE;
  --ink:#2A2620; --ink-soft:#7A7264; --ink-faint:#A8A091;
  --ok:#2E6B47; --ok-bg:#E4F0E8; --warn:#8A6A1E; --warn-bg:#F3EAD2;
  --danger:#A32D2D; --danger-bg:#F7E3E3; --blue:#5B6FE0;
  --radius:12px;
  --shadow:0 1px 2px rgba(21,22,26,.05),0 8px 24px -16px rgba(21,22,26,.25);
  --headbar:#221F1A;                 /* dark warm header even in light mode */
  --btn-2-bg:#EEE9DF; --btn-2-border:#D5CDBC;
  --accent:#2C2820; --accent-ink:#FFFFFF; --accent-deep:#161310; --accent-soft:rgba(44,40,32,.07);
  --danger-btn:#A32D2D;
}

/* ---------- base ---------- */
html,body{background:var(--bg);color:var(--ink);}
.topbar,.tabs{background:var(--headbar);}
.tabs{border-bottom-color:rgba(255,255,255,.06);}

/* surfaces */
.card,.panel,.table-wrap{background:var(--surface);border-color:var(--line);}
tbody tr:hover{background:var(--surface-2);}
thead th{background:var(--surface-2);color:var(--ink-soft);border-bottom-color:var(--line);}
tbody td{border-bottom-color:var(--line-soft);}

/* inputs */
input[type=text],input[type=date],input[type=email],input[type=tel],select,textarea{
  background:var(--surface);color:var(--ink);border-color:var(--line);
}
::placeholder{color:var(--ink-faint);}

/* buttons — flat, one primary per screen */
.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);box-shadow:none;}
.btn-primary:hover{background:var(--accent-deep);border-color:var(--accent-deep);}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--btn-2-border);box-shadow:none;}      /* secondary = outline, NOT a grey block */
.btn-ghost:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);}
.btn-danger,.row-del{background:var(--danger-btn);color:#FFFFFF;border-color:var(--danger-btn);box-shadow:none;}

/* status pills — tinted bg + saturated text, flat */
.pill{font-size:12px;padding:4px 11px;gap:4px;border-radius:999px;display:inline-flex;align-items:center;}
.pill svg{width:13px;height:13px;}
.pill.confirmed,.pill.done   {background:var(--ok-bg);     color:var(--ok);}
.pill.tbc,.pill.attention    {background:var(--warn-bg);   color:var(--warn);}
.pill.cancelled,.pill.action {background:var(--danger-bg); color:var(--danger);}
.pill.blue                   {background:rgba(138,152,236,.16); color:var(--blue);}
.pill.brand                  {background:var(--brand-bg); color:var(--brand-ink);}
/* Media Lab: violet logo mark + active-tab underline give the app its identity */
.logo-mark{box-shadow:0 0 0 0 transparent;}
.tab.active{border-bottom-color:var(--brand-deep);}

/* brand chips/dots — colour injected inline from JS (see design spec §5) */
.brand-dot{display:inline-block;width:11px;height:11px;border-radius:50%;flex:none;vertical-align:middle;margin-right:8px;}
.brand-chip{display:inline-flex;align-items:center;font-size:12px;font-weight:700;padding:4px 11px;border-radius:999px;white-space:nowrap;letter-spacing:.2px;}

/* ---------- From→To date range: one clearly-labelled control (suite-shared) ----------
   Two native date inputs joined into a single bordered pill with explicit
   FROM / TO labels on one line. Higher specificity + !important beats the
   generic input[type=date] rule above. */
.daterange{display:inline-flex;align-items:stretch;border:1px solid var(--line,#d9d3c7)!important;border-radius:10px;background:var(--surface,var(--card,#fff))!important;overflow:hidden;vertical-align:middle;flex:0 0 auto;}
.daterange .dr-seg{display:inline-flex;align-items:center;gap:7px;padding:0 9px 0 11px;}
.daterange .dr-seg + .dr-seg{border-left:1px solid var(--line,#d9d3c7);}
.daterange .dr-lab{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft,var(--muted,#8A8272));white-space:nowrap;}
.daterange input[type=date]{border:none!important;background:transparent!important;color:var(--ink,var(--text,#2A2620))!important;padding:9px 6px 9px 0!important;margin:0!important;font:inherit;min-width:112px;border-radius:0!important;box-shadow:none!important;}
.daterange input[type=date]:focus{outline:none!important;box-shadow:none!important;}
.daterange:focus-within{border-color:var(--ink-soft,var(--muted,#8A8272))!important;}
@media (max-width:640px){ .daterange{display:flex;width:100%;box-sizing:border-box;} .daterange .dr-seg{flex:1;min-width:0;padding:0 6px 0 9px;} .daterange input[type=date]{min-width:0!important;width:100%;flex:1;} }

/* ---------- Curated phone cards for the admin show-lists ----------
   On phones the sideways-scrolling show tables (All Shows, Needs Host, etc.)
   are swapped for compact cards: brand + event on the left, status pills on
   the right, whole card taps through to detail. Only .sf-showtable swaps;
   every other admin table keeps its normal horizontal scroll. */
.mrows{display:none;}
.mrow{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:13px 12px;border-bottom:1px solid var(--line-soft,var(--line));cursor:pointer;}
.mrow:first-child{border-top:1px solid var(--line-soft,var(--line));}
.mrow:active{background:var(--surface-2,var(--surface));}
.mrow-main{min-width:0;flex:1;}
.mrow-top{margin-bottom:6px;}
.mrow-name{font-weight:600;font-size:15px;line-height:1.25;word-break:break-word;}
.mrow-sub{font-size:12px;color:var(--ink-soft,var(--muted));margin-top:3px;line-height:1.45;}
.mrow-host{font-size:12.5px;margin-top:6px;}
.mrow-status{display:flex;flex-direction:column;gap:5px;align-items:flex-end;flex:none;}
@media(max-width:640px){
  .sf-showtable{display:none !important;}
  .mrows{display:block;}
  /* body is a centered flex column, so main sizes to its CONTENT width and
     overflowed the viewport on phones. Stretch it to the screen width. */
  main.wrap{align-self:stretch;width:100%;box-sizing:border-box;}
  /* Admin filter bar: stack its groups full-width instead of overflowing the
     screen sideways (its .filters class wasn't covered by the shared wrap rule). */
  .filters{flex-direction:column;align-items:stretch;gap:12px;}
  .filters>.fg{width:100%;min-width:0;flex:0 0 auto;}
}

/* ============================================================
   MOBILE — shared tidy-up (ported from Lineup Lab suite).
   ============================================================ */
@media (max-width: 640px) {
  .btn, .row-del, button { min-height: 42px !important; }
  .btn, .row-del { display: inline-flex; align-items: center; justify-content: center; }
  input, select, textarea { max-width: 100% !important; box-sizing: border-box !important; min-width: 0 !important; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap table { min-width: 520px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr !important; }
  .actions, .row-actions, .filterbar, .em-row, .packline { flex-wrap: wrap; }
  .actions .btn, .row-actions .btn { flex: 1 1 auto; }
  body { overflow-x: hidden; }
}