/* Weerwolven spelleider — licht, hoog-contrast, rustig thema.
   Doel: overzichtelijk + makkelijk te gebruiken. Alle tekst mikt op >=10:1
   contrast op witte/lichte vlakken. */

:root {
  color-scheme: light;
  --bg: #eceef1;
  --surface: #ffffff;
  --surface-2: #f4f5f7;
  --line: #c7ccd3;         /* duidelijk zichtbare rand */
  --line-strong: #aeb4bd;
  --ink: #15171c;          /* primaire tekst  ~15:1 op wit */
  --ink-2: #34383f;        /* secundaire tekst ~10.7:1 op wit */
  --ink-3: #4b4f57;        /* zwakste toegestane tekst ~8:1 (spaarzaam) */
  --accent: #b91c1c;       /* merk-rood */
  --night: #3730a3;        /* indigo accent = nacht */
  --day: #b45309;          /* amber accent = dag */
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.08);
}

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
}

/* Fases: vlak + licht, alleen een subtiele tint zodat je nacht/dag herkent. */
.page-setup { background: var(--bg); }
.page-night { background: var(--bg); }
.page-day   { background: var(--bg); }

.safe-bottom { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }

/* ---------- Kaarten / panelen ---------- */
.panel,
.setup-shell,
.night-shell,
.stage-card,
.day-shell .panel,
.day-top-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  color: var(--ink);
  backdrop-filter: none;
}

.day-shell {
  position: relative;
  background: transparent;
  margin: 0;
  padding: 0;
}

/* Fase-accent: dunne gekleurde koprand zonder de rust te verstoren. */
.night-shell { border-top: 4px solid var(--night); }
.stage-card-day { border-top: 4px solid var(--day); }
.stage-card-opening { border-top: 4px solid var(--line-strong); }
.stage-card-night { border-top: 4px solid var(--night); }

.night-shell-header {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: -1rem -1rem 0;
  padding: 1rem 1rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  border-top-left-radius: 1.4rem;
  border-top-right-radius: 1.4rem;
}

.setup-counter {
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.setup-quick {
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.setup-role-row {
  background: var(--surface);
  border: 1px solid var(--line);
}

.setup-kicker {
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.setup-title {
  font-family: "Playfair Display", Georgia, serif;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.setup-role-count { min-width: 2rem; }

/* ---------- Fase-label ---------- */
.stage-label {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 0.4rem 0.8rem;
  color: var(--ink-2);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.stage-label-night {
  background: #eef0ff;
  border-color: #c7ccf5;
  color: var(--night);
}

/* ---------- Rol-chips ---------- */
.role-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
}

/* ---------- Info-knopje + popover ---------- */
.info-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  transition: background-color 120ms ease, border-color 120ms ease;
}
.info-trigger:hover,
.info-trigger:focus-visible {
  background: #e7eaf0;
  border-color: var(--accent);
  outline: none;
}
.info-icon { color: var(--ink); font-size: 0.8rem; font-style: italic; font-weight: 800; }

.role-popover {
  border-radius: 0.9rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  padding: 0.85rem 0.95rem;
  box-shadow: var(--shadow);
  color: var(--ink);
}
.role-popover-floating {
  position: absolute;
  top: 3.3rem;
  left: 1rem;
  right: 1rem;
  z-index: 20;
}

/* ---------- Knoppen ---------- */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.8rem;
  border: 1px solid transparent;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.1;
  transition: filter 120ms ease, background-color 120ms ease;
}
.ui-btn:hover { filter: brightness(0.96); }
.ui-btn:disabled { cursor: not-allowed; opacity: 0.4; }

.ui-btn-primary   { background: var(--accent); color: #fff; }
.ui-btn-secondary { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.ui-btn-dark      { background: #24272e; color: #fff; }
.ui-btn-success   { background: #15803d; color: #fff; }
.ui-btn-danger    { background: #b91c1c; color: #fff; }
.ui-btn-danger-soft { background: #fbeaea; border-color: #e6b9b9; color: #991b1b; }
.ui-btn-warning   { background: #c2410c; color: #fff; }
.ui-btn-night     { background: #3730a3; color: #fff; }
.ui-btn-day       { background: #b45309; color: #fff; }
.ui-btn-violet    { background: #5b21b6; color: #fff; }
.ui-btn-rose      { background: #be123c; color: #fff; }

/* ---------- Stap-pills (volgorde-overzicht) ---------- */
.step-pill,
.night-history-pill {
  border-radius: 999px;
  padding: 0.5rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 800;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
}
.step-pill-muted { background: var(--surface); color: var(--ink-3); }
.step-pill-day   { background: #fdecd2; border-color: #e6c48a; color: #92400e; }
.step-pill-night { background: #eef0ff; border-color: #c7ccf5; color: var(--night); }
.night-history-pill-active {
  background: #eef0ff;
  border-color: var(--night);
  color: var(--night);
}

/* ---------- Nacht-scriptkaarten ---------- */
.script-step-card {
  border-radius: 1rem;
  border: 1px solid var(--line);
  border-left: 5px solid var(--line-strong);
  background: var(--surface);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow);
}
.script-step-card-active {
  border-left-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.18), var(--shadow);
}
.script-step-card-intro { border-left-color: var(--night); background: var(--surface-2); }

.script-step-title {
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* Leesbare instructie: geen reuze-cursief meer, gewoon donker + duidelijk. */
.script-step-text {
  margin-top: 0.5rem;
  color: var(--ink);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.5;
}
.script-step-index {
  min-width: 2.1rem;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 0.4rem 0.65rem;
  color: var(--ink-2);
  font-size: 0.8rem;
  font-weight: 900;
  text-align: center;
}

/* ---------- "Let op" / notitieblok ---------- */
.night-status-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 0.7rem;
  background: #fff7ed;
  border: 1px solid #f0c48a;
  padding: 0.6rem 0.9rem;
  color: #92400e;
  font-size: 0.88rem;
  font-weight: 700;
}

.night-note {
  border-radius: 0.9rem;
  border: 1px solid #f0c48a;
  background: #fff7ed;
  padding: 0.9rem 1rem 0.9rem 1.1rem;
}
.night-note-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: 999px;
  background: #fdecd2;
  padding: 0.32rem 0.75rem;
  color: #92400e;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.night-note-label::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--accent);
}
.night-note-list { display: grid; gap: 0.55rem; margin: 0.8rem 0 0; padding: 0; list-style: none; }
.night-note-item {
  position: relative;
  padding-left: 1.15rem;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.5;
}
.night-note-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: #d97706;
}

/* ---------- Fase-overgang (kort, licht) ---------- */
.phase-transition {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: phaseFade 700ms ease forwards;
}
.phase-transition-night { background: rgba(55, 48, 163, 0.10); }
.phase-transition-day   { background: rgba(180, 83, 9, 0.10); }
.phase-transition-label {
  border-radius: 999px;
  padding: 0.85rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 800;
  font-size: clamp(1.2rem, 3.5vw, 2rem);
  box-shadow: var(--shadow);
}
@keyframes phaseFade {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  100% { opacity: 0; }
}

.scrollbar-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }

/* =====================================================================
   Overrides voor Tailwind-utilities die in de template op een DONKERE
   achtergrond mikten. Alles is nu licht → dwing leesbaar dark-on-light af.
   (!important omdat Tailwind-CDN zijn stijlen later injecteert.)
   ===================================================================== */

/* Was lichte tekst op donker → nu donkere tekst op licht */
.text-slate-100, .text-slate-200, .text-slate-300 { color: var(--ink) !important; }
.text-slate-400 { color: var(--ink-3) !important; }
.text-slate-500, .text-slate-600 { color: var(--ink-2) !important; }  /* opgetild naar ~10.7:1 */
.text-amber-200 { color: var(--day) !important; }     /* tellers/koppen accent */

/* Donkere vlakken/knop-oppervlakken → licht */
.bg-slate-950\/40, .bg-slate-950\/80, .bg-slate-950\/90, .bg-slate-950\/92 {
  background-color: var(--surface) !important;
}
.bg-slate-950\/80 { background-color: var(--surface-2) !important; } /* -knop iets grijzer */

/* Donkere randen → zichtbare lichte rand */
.border-slate-700, .border-slate-700\/70, .border-slate-700\/80 {
  border-color: var(--line) !important;
}

/* De "Wis alles"-knop stond op bg-slate-700/text-white: hou 'm donker+leesbaar */
.bg-slate-700 { background-color: #24272e !important; }