/* ============================================================
   Lineup Lab — "Black Panther" theme
   SINGLE source of truth for colour / type / shape tokens.
   Linked AFTER each page's inline <style> so these win, which
   means the entire look is controlled by this one file.

   REVERT: remove the <link rel="stylesheet" href="/theme.css">
   tags (or just don't merge the theme-black-panther branch).
   ============================================================ */

/* ---------- DARK (opt-in via toggle) ---------- */
html[data-theme="dark"] {
  --bg:#17151A; --surface:#201D24; --surface-2:#2A2630;
  --line:#2E2A33; --line-soft:#2A2630;
  --ink:#EDE7DB; --ink-soft:#A39A8C; --ink-faint:#6E665C;
  --brass:#C9A86A; --brass-deep:#8A6E3C; --lipstick:#7E2230;
  --ok:#6FBF8E; --ok-bg:#16291F; --warn:#E0B25A; --warn-bg:#2A2415;
  --danger:#E2727F; --danger-bg:#2A171B;

  /* legacy variable names used throughout the app, remapped to the new palette */
  --paper:var(--bg); --card:var(--surface); --text:var(--ink); --muted:var(--ink-soft);
  --brass-dark:var(--brass-deep); --brass-tint:#2A2415;
  --green:var(--ok); --amber:var(--warn); --red:var(--danger); --red-dark:#C85A66; --blue:#8A98EC;
  --radius:12px;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 34px -18px rgba(0,0,0,.75);

  /* the app uses these as DARK ui surfaces (top bar, tabs, logo mark bg) — keep them dark */
  --headbar:#1B1920;
  /* secondary (ghost) button: subtly distinct from cards so it doesn't disappear */
  --btn-2-bg:#2C2832; --btn-2-border:#48424F;
  /* primary accent = graphite/ink. In DARK mode it inverts to a warm-cream button with dark text. */
  --accent:#EDE7DB; --accent-ink:#1A1712; --accent-deep:#FFFFFF; --accent-soft:rgba(237,231,219,.12);
  --danger-btn:#B23A45;
}

/* ---------- LIGHT (default / hero) ---------- */
:root {
  --bg:#F4F1EC; --surface:#FFFFFF; --surface-2:#FBF9F5;
  --line:#E2DDD3; --line-soft:#EDE8DE;
  --ink:#2A2620; --ink-soft:#7A7264; --ink-faint:#A8A091;
  --brass:#9C7B3D; --brass-deep:#7A5E2C; --lipstick:#8E2434;
  --ok:#2E6B47; --ok-bg:#E4F0E8; --warn:#8A6A1E; --warn-bg:#F3EAD2;
  --danger:#A32D2D; --danger-bg:#F7E3E3;

  --paper:var(--bg); --card:var(--surface); --text:var(--ink); --muted:var(--ink-soft);
  --brass-dark:var(--brass-deep); --brass-tint:#F2E7C9;
  --green:var(--ok); --amber:var(--warn); --red:var(--danger); --red-dark:#7E2020; --blue:#5B6FE0;
  --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 (boutique-hotel look) */
  --btn-2-bg:#EEE9DF; --btn-2-border:#D5CDBC;
  /* primary accent = graphite/ink: near-black button with white text */
  --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);}

/* top bar / tabs stay dark + warm in both modes */
.topbar,.tabs{background:var(--headbar);}
.tabs{border-bottom-color:rgba(255,255,255,.06);}

/* surfaces */
.card,.panel,.detail-section,.strip,.note,.table-wrap,
#lineup-modal>div,#pl-modal>div{background:var(--surface)!important;border-color:var(--line);}
.note{background:var(--surface-2);}
tbody tr:hover{background:var(--surface-2)!important;}
thead th{background:var(--surface-2);color:var(--ink-soft);border-bottom-color:var(--line);}
tbody td{border-bottom-color:var(--line-soft);}
.lineup-row,.pl-row{background:var(--surface-2)!important;border-color:var(--line)!important;}

/* inputs / selects / textareas — force onto theme regardless of inline white bgs */
input[type=text],input[type=date],input[type=email],input[type=password],select,textarea,
.lr-tribute,.lr-real,.lr-notes,.pl-trib,.pl-real,.pl-notes,
#lineup-modal input,#pl-modal input{
  background:var(--surface)!important;color:var(--ink)!important;border-color:var(--line)!important;
}
::placeholder{color:var(--ink-faint)!important;}

/* buttons — quiet by default, ONE brass primary per screen */
.btn-primary{background:var(--accent)!important;color:var(--accent-ink)!important;border-color:var(--accent)!important;box-shadow:none!important;}
.btn-primary:hover{background:var(--accent-deep)!important;border-color:var(--accent-deep)!important;}
/* secondary = clean outline (surface fill + clear border), not a grey block */
.btn-ghost{background:var(--surface)!important;color:var(--ink)!important;border-color:var(--btn-2-border)!important;box-shadow:none!important;}
.btn-ghost:hover{background:var(--accent-soft)!important;border-color:var(--accent)!important;color:var(--accent)!important;}
.btn-danger,.row-del{background:var(--danger-btn)!important;color:#FFFFFF!important;border-color:var(--danger-btn)!important;box-shadow:none!important;}

/* status pills — dark-mode tinted backgrounds */
.pill.confirmed,.pill.done{background:var(--ok-bg)!important;color:var(--ok)!important;border-color:transparent!important;}
.pill.tbc,.pill.attention{background:var(--warn-bg)!important;color:var(--warn)!important;border-color:transparent!important;}
/* "TBC - Likely To Confirm": still in the amber/yellow family, but a brighter,
   more positive gold than plain TBC — NOT green (green is reserved for Confirmed). */
.pill.tbc-likely{background:#F6E1A0!important;color:#6E4E12!important;border-color:transparent!important;}
/* "Confirmed by agent" = the FINAL sign-off. A deep, solid green so it clearly
   outranks the pale "confirmed" pill used for an admin lock. */
.pill.agent-confirmed{background:#146c43!important;color:#EAFBF1!important;border-color:transparent!important;}
.pill.cancelled,.pill.action{background:var(--danger-bg)!important;color:var(--danger)!important;border-color:transparent!important;}
.pill.book,.pill.blue{background:rgba(138,152,236,.16)!important;color:var(--blue)!important;border-color:transparent!important;}

/* misc accents */
.card .accent{background:var(--brass);}
.brand .mark,.mark{background:var(--brass);color:#17151A;}

/* ---------- pills: a touch bigger / more legible everywhere ---------- */
.pill{font-size:12px!important;padding:4px 11px!important;gap:4px!important;}
.pill svg{width:13px;height:13px;}

/* ---------- brand identity bits (colour comes from JS inline) ---------- */
.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;}

/* sentence-case-ish: soften the shouty uppercase labels a touch (kept, just lighter) */
.view-head h1{font-weight:500;}

/* ---------- From→To date range: one clearly-labelled control (app-wide) ----------
   Two native date inputs joined into a single bordered pill with explicit
   FROM / TO labels, so it's obvious which is which and they sit 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(--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(--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 4px 0 9px;gap:4px;} .daterange input[type=date]{min-width:0!important;width:100%;flex:1;font-size:13px!important;} }

/* ============================================================
   MOBILE — shared across every page (loaded after each inline
   <style>, so these win). Fixes touch targets, field/table
   overflow and column stacking that were poor on phones.
   ============================================================ */
@media (max-width: 640px) {
  /* Every button gets a comfortable tap height (incl. small inline
     Edit / Delete buttons like the R&B DJ row). min-height only grows,
     so it can't break existing layouts. */
  .btn, .row-del, button { min-height: 42px !important; }
  .btn, .row-del { display: inline-flex; align-items: center; justify-content: center; }
  /* Form controls never spill outside their container. min-width:0 lets inputs
     inside a flex row (e.g. the R&B email/phone pair) shrink to fit instead of
     overflowing to the right. */
  input, select, textarea {
    max-width: 100% !important; box-sizing: border-box !important; min-width: 0 !important;
  }
  /* Wide tables scroll inside their own box instead of pushing the page sideways. */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap table { min-width: 520px; }
  /* Two/three-column form grids stack to one column. */
  .grid-2, .grid-3 { grid-template-columns: 1fr !important; }
  /* Button/filter rows wrap rather than overflow. */
  .actions, .row-actions, .filterbar, .em-row, .packline { flex-wrap: wrap; }
  .actions .btn, .row-actions .btn { flex: 1 1 auto; }
  /* Guard against stray horizontal overflow from wide inline content. */
  body { overflow-x: hidden; }
}