/* ====================================================================
   THEME.CSS — single source of truth for the retro ticket UI.
   Loaded on all pages BEFORE page-specific CSS.
   Design tokens + shared chrome (topnav, buttons, tabs, ticket parts).
   No rounded corners. No side-stripe accents.
   ==================================================================== */
:root{
  --paper:#EDE7D8;
  --card:#FBF7EC;
  --ink:#2A2620;
  --stub:#1D3557;       /* navy */
  --red:#7A2620;
  --gold:#C98A2C;
  --green:#4C7A52;
  --line:#D8CFB8;
  --muted:#8A8270;
  --accent-2:#C98A2C;
  --accent-5:#8A8270;
  --accent-6:#5B7B9A;
  --accent-7:#A65A3C;
  --star-empty:#D8CFB8;
  --font-display:'Rokkitt',serif;
  --font-cond:'Oswald',sans-serif;
  --font-body:'Inter',sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{height:100%}
/* body styling scoped to ticket-UI pages only (not the seat map) */
body.ticket-ui{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
button svg,a svg{vertical-align:middle}

/* ── Top nav (shared header) ── */
#topnav{
  background:var(--card);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  padding:0 14px;
  height:52px;
  position:sticky;
  top:0;
  z-index:50;
}
#nav-back,.nav-back{
  background:none;border:none;color:var(--stub);font-size:18px;cursor:pointer;padding:8px 10px 8px 0;
}
.nav-title-wrap{flex:1;text-align:center;min-width:0}
.nav-title-wrap .field{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--stub);text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-title-wrap .sub{display:none}
.nav-icon-btn{background:none;border:none;color:var(--stub);font-size:17px;cursor:pointer;padding:8px}

/* ── Buttons (squared, retro) ── */
.btn,
button.btn{
  border:1.5px solid var(--line);
  background:var(--card);
  color:var(--stub);
  font-family:var(--font-cond);
  font-weight:600;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:9px 13px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border-radius:0;
  text-decoration:none;
}
.btn-primary{background:var(--stub);color:#fff;border-color:var(--stub)}
.btn-danger{background:var(--card);color:var(--red);border-color:var(--red)}
.btn:disabled,.btn.disabled{opacity:.45;cursor:not-allowed;pointer-events:none}

/* ── Pills / tabs (squared-ish, retro) ── */
.pill{
  border:1.5px solid var(--line);
  background:#fff;
  color:var(--stub);
  font-family:var(--font-display);
  font-weight:800;
  font-size:14px;
  padding:7px 15px;
  border-radius:0;
  cursor:pointer;
  white-space:nowrap;
}
.pill.active{background:var(--stub);color:#fff;border-color:var(--stub)}

/* ── Ticket primitives (shared by list + detail) ──
   notch = paper-colored half-circles straddling the perforation.
   Wrapper carries the shadow via a filter that follows the cutout. */
.ticket{
  background:var(--card);
  display:grid;
  grid-template-columns:66px 1fr;
  position:relative;
  border-radius:0;
}
.ticket-shadow{
  filter:drop-shadow(0 1px 2px rgba(42,38,32,.22));
}
.ticket .stub{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:9px 0;
}
.ticket .stub::after{
  content:"";position:absolute;top:8px;bottom:8px;right:0;
  border-right:2px dashed var(--line);
}
.ticket .stub .f{text-align:center;padding:3px 4px}
.ticket .stub .f + .f{border-top:1px solid var(--line)}
.ticket .stub .lbl{font-family:var(--font-cond);font-size:7px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);line-height:1}
.ticket .stub .val{font-family:var(--font-display);font-weight:800;font-size:13px;line-height:1.05;color:var(--red);margin-top:2px}
/* notch cutouts — must be exactly --paper; placed on the perforation line.
   left:58px centers the 16px circle on the 66px stub edge. */
.ticket .notch{position:absolute;width:16px;height:16px;background:var(--paper);border-radius:50%;left:58px;z-index:3}
.ticket .notch.top{top:-8px}
.ticket .notch.bottom{bottom:-8px}

/* colorblind-friendly mode (site-wide): swap the red accent to orange.
   Toggled via .colorblind-toggle-btn buttons; persisted in localStorage cws_colorblind. */
/* colorblind-friendly mode (site-wide): swap the red accent to orange,
   and give every other categorical color (used in cost-log charts) its
   own distinct colorblind-safe alternate too — otherwise only Room/red
   changed and the rest of a 5-7 category chart stayed hard to tell apart.
   Toggled via .colorblind-toggle-btn buttons; persisted in localStorage cws_colorblind. */
html.colorblind{
  --red:#D9730D;
  --green:#009E73;
  --accent-2:#F0E442;
  --accent-5:#A8A8A8;
  --accent-6:#CC79A7;
  --accent-7:#D55E00;
}
.colorblind-toggle-btn.active{color:var(--gold)}