/* DJ Illusion Events Portal — styles (implements design-spec v1 verbatim).
   Dark control-room UI, mobile-first from 375px. Plain CSS, no framework. */

:root{
  /* Surfaces */
  --bg:#0e1116; --panel:#171c24; --row:#1b212b; --row2:#1e2530;
  --line:#2a323e; --line-strong:#3a4658;
  --overlay:rgba(8,10,14,.94);

  /* Text */
  --text:#e6edf3; --muted:#8b97a7; --on-accent:#10240a;

  /* Brand / accents */
  --accent:#7ee787; --lime:#b5e853; --warn:#f0c674;
  --btn:#2563eb; --danger:#ff6b6b;
  --link:#6ea8fe;                     /* AA-safe blue for TEXT/links */

  /* Semantic chips/badges */
  --ok-bg:#173a23; --ok-fg:#7ee787;
  --warn-bg:#4a2f18; --warn-fg:#ffe9c2;
  --danger-bg:#4a1414; --danger-fg:#ffd7d7;
  --must-fg:#f0c674;

  /* Radius */
  --r-sm:6px; --r:7px; --r-lg:12px; --r-pill:999px;

  /* Spacing (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;

  /* Type */
  --font:14px/1.4 -apple-system, system-ui, sans-serif;
  --fs-xs:11px; --fs-sm:12.5px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:24px;

  /* Elevation */
  --shadow-card:0 1px 0 rgba(0,0,0,.3);
  --shadow-pop:0 8px 24px rgba(0,0,0,.5);
  --tap:44px;
}
*{ box-sizing:border-box; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
html,body{ margin:0; }
body{ background:var(--bg); color:var(--text); font:var(--font);
  -webkit-text-size-adjust:100%; }

.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---- Layout containers ---- */
.wrap{ max-width:640px; margin:0 auto; padding:0 var(--s4); }
.wrap-admin{ max-width:1100px; margin:0 auto; padding:0 var(--s4); }

/* ---- Header / brand bar ---- */
.app-header{
  position:sticky; top:0; z-index:20;
  background:var(--panel); border-bottom:1px solid var(--line);
  padding:14px var(--s5);
  display:flex; gap:var(--s4); align-items:center; flex-wrap:wrap;
}
.app-header .logo{ height:22px; width:auto; display:block; }
.app-header .kicker{ color:var(--muted); font-size:var(--fs-sm); font-weight:600;
  letter-spacing:.02em; }
.app-header .spacer{ flex:1; }

/* ---- Cards / panels ---- */
.card, .panel{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s5); margin:var(--s4) 0;
}
.hero{ padding:var(--s4); }
.hero h1{ font-size:var(--fs-xl); font-weight:650; margin:0 0 var(--s1); }
.hero .date{ color:var(--muted); font-size:var(--fs-sm); margin:0 0 var(--s3); }
.hero .instruction{ font-size:var(--fs-sm); color:var(--text); margin:0; }

/* Flat typographic page header (replaces the boxed hero card) */
.page-head{ margin:var(--s6) 0 var(--s5); }
.page-head h1{ font-size:var(--fs-2xl); font-weight:700; margin:0 0 var(--s1); letter-spacing:.01em; }
.page-head .date{ color:var(--muted); font-size:var(--fs-md); margin:0 0 var(--s2); }
.page-head .instruction{ font-size:var(--fs-md); color:var(--text); margin:0; }

/* ---- Section heading (larger: section boundaries must be obvious) ---- */
.section-head{ font-size:var(--fs-xl); font-weight:650; margin:var(--s8) 0 var(--s3);
  padding-top:var(--s4); border-top:1px solid var(--line);
  display:flex; align-items:baseline; gap:var(--s2); }
.section-head .count{ color:var(--muted); font-weight:600; font-size:var(--fs-md); }

/* Column header row above the client request list */
.list-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px var(--s3); border-bottom:1px solid var(--line);
  font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); font-weight:700;
}
.list-header .lh-actions{ display:flex; gap:var(--s3); }

/* ---- Buttons ---- */
.btn{
  min-height:var(--tap); padding:10px 14px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--row2); color:var(--text);
  font:inherit; cursor:pointer; display:inline-flex; align-items:center;
  justify-content:center; gap:6px; line-height:1;
}
.btn:hover{ border-color:var(--line-strong); }
a.btn{ text-decoration:none; } /* anchors styled as buttons: no link underline */
.btn.primary{ background:var(--btn); border-color:var(--btn); color:#fff; }
.btn.cta{ background:var(--lime); border-color:var(--lime); color:var(--on-accent); font-weight:650; }
.btn.cta:hover{ filter:brightness(1.07); }
.btn.ghost{ background:transparent; border-color:var(--line); color:var(--muted); font-weight:600; }
.btn.ghost:hover{ color:var(--text); }
.btn.danger{ border-color:#6f2a2a; color:#e8a3a3; background:transparent; }
.btn.danger:hover{ background:#3a1c1c; }
.btn.block{ width:100%; }
.btn:disabled{ opacity:.55; cursor:default; }
.btn.icon{ min-width:var(--tap); min-height:var(--tap); padding:0; }

/* ---- Badges / pills ---- */
.badge{
  font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:var(--r-pill);
  text-transform:uppercase; letter-spacing:.03em; display:inline-block; white-space:nowrap;
}
.badge-ok{ background:var(--ok-bg); color:var(--ok-fg); }
.badge-warn{ background:var(--warn-bg); color:var(--warn-fg); }
.badge-danger{ background:var(--danger-bg); color:var(--danger-fg); }
.badge-neutral{ border:1px solid var(--line); color:var(--muted); background:transparent; }
.badge-link{ border:1px solid var(--link); color:var(--link); background:transparent; }
.badge-explicit{
  border:1px solid var(--muted); color:var(--muted); background:transparent;
  border-radius:var(--r-sm); padding:0 5px; font-size:10px; font-weight:700;
  text-transform:none; letter-spacing:0; line-height:1.4;
}
/* Compact lime "Add" chip on search-result rows (spec §3.6 — mirrors .cta).
   Rendered inside a <button class="row">, so it's a styled span. */
.add-chip{
  background:var(--lime); color:var(--on-accent); border:1px solid var(--lime);
  border-radius:var(--r); padding:8px 12px; font-weight:650; font-size:var(--fs-sm);
  display:inline-block; white-space:nowrap;
}

/* ---- Inputs / forms ---- */
label.field-label, .field-label{
  font-size:var(--fs-sm); color:var(--muted); font-weight:600;
  display:block; margin-bottom:6px;
}
input[type=text],input[type=search],input[type=password],input[type=date],textarea,select{
  background:var(--row); border:1px solid var(--line); border-radius:var(--r);
  color:var(--text); padding:11px 12px; min-height:var(--tap); width:100%; font:inherit;
}
textarea{ min-height:96px; resize:vertical; line-height:1.4; }
input::placeholder,textarea::placeholder{ color:var(--muted); }
input:focus-visible,textarea:focus-visible,select:focus-visible{ border-color:var(--accent); }
.field-error{ color:var(--danger-fg); font-size:var(--fs-sm); margin:6px 0 0; }
.field-input.error input,.field-input.error textarea{ border-color:var(--danger); }
.helper{ color:var(--muted); font-size:var(--fs-sm); margin:4px 0 0; }
.counter{ color:var(--muted); font-size:var(--fs-xs); text-align:right; margin-top:2px; }
.field{ margin-bottom:var(--s4); }

/* ---- Toast ---- */
.toast{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%);
  background:#222b38; border:1px solid var(--line); color:var(--text);
  padding:10px 16px; border-radius:9px; z-index:60; box-shadow:var(--shadow-pop);
  opacity:0; pointer-events:none; transition:opacity .18s ease; font-size:var(--fs-md);
  max-width:calc(100% - 32px);
}
.toast.show{ opacity:1; }
.toast.err{ border-color:#7a2e2e; }

/* ---- Result / request row ---- */
ul.list{ list-style:none; margin:0; padding:0; }
.row{
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s2) var(--s3); border-bottom:1px solid var(--line);
  min-height:64px;
}
.row:nth-child(even){ background:var(--row); }
.row .art{
  width:48px; height:48px; border-radius:var(--r-sm); flex:0 0 48px;
  object-fit:cover; background:var(--row2);
}
.row .meta{ flex:1 1 auto; min-width:0; }
.row .song{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .by{ color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .must-star{ color:var(--must-fg); margin-right:4px; }
.row .actions{ display:flex; align-items:center; gap:var(--s2); flex:0 0 auto; }

/* full-row add button (search results) */
button.row{ width:100%; text-align:left; background:transparent; border:none;
  border-bottom:1px solid var(--line); color:var(--text); font:inherit; cursor:pointer; }
button.row:hover{ background:var(--row2); }

/* ---- Vote pill ---- */
.vote{
  min-height:var(--tap); min-width:56px; padding:6px 12px; border-radius:var(--r-pill);
  display:inline-flex; gap:6px; align-items:center; justify-content:center;
  font-variant-numeric:tabular-nums; background:var(--row2);
  border:1px solid var(--line); color:var(--text); cursor:pointer; font:inherit;
}
.vote .arrow{ color:var(--muted); }
.vote .n{ font-weight:700; }
.vote.voted{ background:var(--ok-bg); border-color:var(--accent); color:var(--accent); }
.vote.voted .arrow{ color:var(--accent); }
.vote.readonly{ cursor:default; opacity:.9; }

/* ---- Empty / loading / banner ---- */
.empty{ color:var(--muted); padding:40px; text-align:center; }
.banner{
  border-radius:var(--r); padding:12px 14px; margin:var(--s4) 0; font-size:var(--fs-sm);
}
.banner.warn{ background:var(--warn-bg); color:var(--warn-fg); border:1px solid #6a4a1e; }
.banner.danger{ background:var(--danger-bg); color:var(--danger-fg); border:1px solid #6f2a2a;
  display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.banner .b-spacer{ flex:1; }

/* Fixture-mode indicator */
.fixture-note{ background:var(--warn-bg); color:var(--warn-fg); border:1px solid #6a4a1e;
  border-radius:var(--r); padding:8px 12px; font-size:var(--fs-sm); margin:var(--s3) 0; }

/* ---- Search block ---- */
.search-block{ margin:var(--s4) 0; }
.search-status{ color:var(--muted); font-size:var(--fs-sm); min-height:1.2em; margin-top:6px; }

/* ---- Client: module cards ---- */
.module-grid{ display:grid; grid-template-columns:1fr; gap:var(--s4); margin:var(--s4) 0; }
.module-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s5); display:flex; flex-direction:column; gap:var(--s3);
}
.module-card:hover{ border-color:var(--line-strong); }
.module-card h3{ font-size:var(--fs-lg); font-weight:650; margin:0; }
.module-card p{ color:var(--muted); font-size:var(--fs-sm); margin:0; flex:1; }
.module-card.coming{ opacity:.7; }

/* ---- Fieldsets / questionnaire ---- */
fieldset{ border:none; margin:0; padding:0; }
legend{ font-size:18px; font-weight:650; padding:0; margin-bottom:var(--s3); }

/* toggle switch */
.switch-row{ display:flex; align-items:center; gap:var(--s3); min-height:var(--tap); cursor:pointer; }
.switch-row .switch-label{ flex:1; }
.switch{ position:relative; width:52px; height:30px; flex:0 0 52px; }
.switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.switch .track{ position:absolute; inset:0; background:var(--row2); border:1px solid var(--line);
  border-radius:var(--r-pill); transition:background .15s,border-color .15s; }
.switch .knob{ position:absolute; top:2px; left:2px; width:24px; height:24px; border-radius:50%;
  background:var(--muted); transition:transform .15s,background .15s; }
.switch input:checked ~ .track{ background:var(--ok-bg); border-color:var(--accent); }
.switch input:checked ~ .knob{ transform:translateX(22px); background:var(--accent); }
.switch input:focus-visible ~ .track{ outline:2px solid var(--accent); outline-offset:2px; }
.switch-state{ color:var(--muted); font-size:var(--fs-sm); min-width:26px; }

/* genre chips */
.chips{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.chip{
  display:inline-flex; align-items:center; gap:6px; background:var(--row2);
  border:1px solid var(--line); color:var(--text); border-radius:var(--r-pill);
  padding:9px 14px; min-height:var(--tap); cursor:pointer; user-select:none;
}
.chip input{ position:absolute; opacity:0; width:1px; height:1px; }
.chip .tick{ display:none; }
.chip.on{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:650; }
.chip.on .tick{ display:inline; }
.chip input:focus-visible + .tick, .chip:focus-within{ outline:2px solid var(--accent); outline-offset:2px; }

/* group-dance grid */
.dance-grid{ display:grid; grid-template-columns:1fr; gap:var(--s2); margin-top:var(--s3); }
.dance-item{
  display:flex; align-items:center; gap:var(--s3); padding:0 var(--s3); min-height:var(--tap);
  border:1px solid var(--line); border-radius:var(--r); background:var(--row); cursor:pointer;
}
.dance-item input{ width:20px; height:20px; flex:0 0 20px; accent-color:var(--accent); }
.dance-item.on{ border-color:var(--accent); background:var(--ok-bg); }
.dance-toolbar{ display:flex; gap:var(--s2); margin-bottom:var(--s2); }

/* ---- Do-not-play rows ---- */
.dnp-row{ box-shadow:inset 3px 0 0 var(--danger); }

/* ---- Admin table ---- */
.toolbar{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; margin:var(--s4) 0; }
.toolbar h1{ font-size:var(--fs-xl); margin:0; }
.toolbar .spacer{ flex:1; }
table.events{ width:100%; border-collapse:collapse; }
table.events th{
  position:sticky; top:52px; background:var(--panel); text-align:left;
  font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.04em; color:var(--muted);
  padding:9px 12px; border-bottom:1px solid var(--line); font-weight:700;
}
table.events td{ padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.events tr:nth-child(even) td{ background:var(--row); }
.event-actions{ display:flex; gap:8px; flex-wrap:nowrap; }
.event-actions .btn{ min-height:var(--tap); min-width:var(--tap); padding:6px 10px; font-size:var(--fs-sm); }

/* admin event cards (mobile) */
.event-cards{ display:flex; flex-direction:column; gap:var(--s3); }
.event-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s4); display:flex; flex-direction:column; gap:var(--s2); }
.event-card .ec-head{ display:flex; align-items:center; gap:var(--s2); }
.event-card .ec-name{ font-weight:650; font-size:var(--fs-lg); flex:1; }
.event-card .ec-actions{ display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s2); }
/* Event name → local Serato dashboard. --link (not --btn) so blue text clears
   AA contrast; underline on hover/focus keeps the table calm at rest. */
a.dash-link{ color:var(--link); text-decoration:none; font-weight:650;
  display:inline-block; min-height:var(--tap); line-height:var(--tap); }
a.dash-link:hover, a.dash-link:focus-visible{ text-decoration:underline; }
.event-card a.dash-link{ flex:1; }
.event-card .ec-actions .btn{ flex:1 1 auto; min-width:calc(50% - var(--s2)); }

/* popover menu */
.popover{ position:absolute; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow-pop); padding:6px; z-index:50; min-width:160px; }
.popover button{ display:block; width:100%; text-align:left; background:transparent; border:none;
  color:var(--text); font:inherit; padding:10px 12px; border-radius:var(--r-sm); cursor:pointer;
  min-height:var(--tap); }
.popover button:hover{ background:var(--row2); }

/* password gate */
.gate{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:var(--s4); }
.gate .card{ max-width:380px; width:100%; text-align:center; }
.gate .logo{ height:26px; margin-bottom:var(--s4); }
.gate h1{ font-size:var(--fs-xl); margin:0 0 var(--s4); }

/* footer note */
.footer-note{ color:var(--muted); font-size:var(--fs-sm); padding:var(--s6) var(--s4);
  text-align:center; line-height:1.5; }
.footer-note a{ color:var(--link); }

.confirm-line{ color:var(--muted); font-size:var(--fs-sm); text-align:center; margin:var(--s4) 0; }

/* segmented sort control */
.segmented{ display:inline-flex; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.segmented button{ background:transparent; border:none; color:var(--muted); font:inherit;
  padding:8px 12px; min-height:var(--tap); cursor:pointer; }
.segmented button[aria-pressed=true]{ background:var(--row2); color:var(--text); }

/* inline remove confirm */
.confirm-inline{ display:inline-flex; gap:8px; align-items:center; }
.confirm-inline .btn{ min-height:var(--tap); padding:8px 14px; }

/* ---- Responsive ---- */
@media (min-width:768px){
  .hero{ padding:var(--s5); }
  .row .art{ width:56px; height:56px; flex-basis:56px; }
  .module-grid{ grid-template-columns:repeat(2,1fr); }
  .dance-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1024px){
  .hero h1{ font-size:var(--fs-2xl); }
  .questionnaire-wrap{ max-width:820px; margin:0 auto; }
  .dance-grid{ grid-template-columns:repeat(3,1fr); }
}