/* ===== Design tokens ===== */
:root{
  --brand-500:#0ea5a4; --brand-600:#00796b;
  --text:#1f2937; --muted:#6b7280;
  --bg:#f3f4f6; --card:#ffffff;
  --radius:.75rem; --shadow:0 10px 20px rgba(0,0,0,.08);

  /* Afgeleid van het actieve thema */
  --topbar-bg: var(--brand-600);
  --sidebar-bg: color-mix(in oklab, var(--brand-600) 70%, transparent);
}

/* Thema’s (wisselbaar door body class, later voor players handig) */
.theme--teal  {
  --brand-500:#0ea5a4; --brand-600:#00796b;
  --topbar-bg:#00796b; --sidebar-bg: rgba(0,121,107,.70);
}
.theme--amber {
  --brand-500:#f59e0b; --brand-600:#d97706;
  --topbar-bg:#d97706; --sidebar-bg: rgba(217,119,6,.70);
}
.theme--violet{
  --brand-500:#8b5cf6; --brand-600:#7c3aed;
  --topbar-bg:#7c3aed; --sidebar-bg: rgba(124,58,237,.70);
}
.theme--ocean {
  --brand-500:#0ea5e9; --brand-600:#0284c7;
  --topbar-bg:#0284c7; --sidebar-bg: rgba(2,132,199,.70);
}

/* Dark-mode (optioneel, automatisch) */
@media (prefers-color-scheme: dark){
  :root{ --bg:#0b1220; --card:#0f172a; --text:#e5e7eb; --muted:#94a3b8; }
}

/* ===== Base ===== */
html,body{ background:var(--bg); color:var(--text); }

/* Layout helpers */
.card{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); }
.container-fixed{ max-width:1100px; margin-inline:auto; padding:1rem; }
.hero{ background-image:var(--hero-image, none); background-repeat:no-repeat; background-position:center; background-size:cover; }
.sidebar{ background:var(--sidebar-bg); color:#fff; }

/* Bars (top & bottom delen dezelfde styles) */
.topbar,
.bottombar{
  background: var(--topbar-bg);
  color:#fff;
  padding:.9rem 0;
}
.topbar a,
.bottombar a{ color:#fff; opacity:.9; }
.topbar a:hover,
.bottombar a:hover{ opacity:1; }

/* Optioneel: footer “vast” aan onderkant binnen de flow */
.bottombar--sticky{ position: sticky; bottom: 0; }

/* Optioneel: iets subtielere variant van de bottombar */
.bottombar--subtle{
  background: color-mix(in oklab, var(--topbar-bg) 60%, black 0%);
}

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1rem; font-weight:600; border-radius:var(--radius); border:1px solid transparent; transition:.2s ease; }
.btn--primary{ background:var(--brand-500); color:#fff; }
.btn--primary:hover{ background:var(--brand-600); }
.btn--danger{ background:#ef4444; color:#fff; }
.btn--danger:hover{ background:#dc2626; }
.btn--ghost{ background:transparent; color:var(--brand-600); border-color:var(--brand-600); }
.btn--ghost:hover{ background:rgba(2,132,199,.08); }

/* Alerts */
.alert{ padding:.75rem 1rem; border-radius:var(--radius); }
.alert--success{ background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; }
.alert--error{ background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }

/* Forms */
.input,.select,.textarea{
  width:100%; padding:.6rem .75rem; border:1px solid #e5e7eb; border-radius:var(--radius);
  background:#fff; color:var(--text); outline:none; transition:.15s;
}
.input:focus,.select:focus,.textarea:focus{
  border-color:var(--brand-500); box-shadow:0 0 0 3px color-mix(in oklab, var(--brand-500) 20%, transparent);
}

/* Tables */
.table{ width:100%; border-collapse:collapse; }
.table th,.table td{ padding:.6rem .75rem; border-top:1px solid #e5e7eb; }
.table th{ text-align:left; color:var(--muted); font-weight:600; }

/* Inlogcode (vier vakjes) */
.code-input{ width:3rem; height:3rem; text-align:center; font-size:1.5rem; margin:0 .5rem; }
#nocode{ text-align:center; font-size:1rem; margin:.5rem; cursor:pointer; }