/* Huisstijl van het LOZ-klantenportaal (Stream TV): de twee blauwen uit het LOZ-logo, Inter, witte kaarten met een dunne
   rand, volledig afgeronde primaire knoppen. Licht standaard; donker volgt het toestel (handig 's avonds op locatie). */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(vendor/fonts/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(vendor/fonts/inter-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(vendor/fonts/inter-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(vendor/fonts/inter-latin-700-normal.woff2) format('woff2'); }

:root {
  /* LOZ-blauw (#0b76b9) als 600; schaal berekend met tools/make_assets.py --palette */
  --primary-50: #f1f8fe; --primary-100: #e0effc; --primary-200: #c1e1fd; --primary-300: #96caf7; --primary-400: #63ace7;
  --primary-500: #3a90d1; --primary-600: #0b76b9; --primary-700: #005f98; --primary-800: #004e7e; --primary-900: #024069;
  --primary-950: #002946;
  --accent: #24a9e1;                         /* LOZ-lichtblauw: signaalmeter */

  --bg: #f9fafb; --card: #ffffff; --text: #030712; --text-soft: #374151; --muted: #6b7280;
  --ring: rgba(3, 7, 18, .06); --ring-strong: rgba(3, 7, 18, .12);
  --shadow: 0 1px 2px rgba(3, 7, 18, .06);
  --brand-text: var(--primary-700); --link: var(--primary-700);
  --meter-off: #e5e7eb; --speaking: #22c55e;
  --idle: #4b5563; --ok: #15803d; --warn: #f59e0b; --warn-text: #1c1100; --error: #dc2626;
  --banner-bg: var(--primary-50); --banner-border: var(--primary-200);
  --hint-bg: #fffbeb; --hint-text: #78350f;
  --ptt-ring: var(--primary-200); --ptt-glow: rgba(11, 118, 185, .16);
  --toast-bg: #111827; --toast-text: #f9fafb;
  --radius: 12px; --radius-sm: 10px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #030712; --card: #111827; --text: #f9fafb; --text-soft: #d1d5db; --muted: #9ca3af;
    --ring: rgba(255, 255, 255, .08); --ring-strong: rgba(255, 255, 255, .14);
    --shadow: none;
    --brand-text: var(--primary-300); --link: var(--primary-400);
    --meter-off: #1f2937;
    --idle: #374151;
    --banner-bg: rgba(11, 118, 185, .14); --banner-border: rgba(58, 144, 209, .35);
    --hint-bg: rgba(245, 158, 11, .10); --hint-text: #fcd34d;
    --ptt-ring: var(--primary-800); --ptt-glow: rgba(11, 118, 185, .3);
    --toast-bg: #1f2937;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #030712; --card: #111827; --text: #f9fafb; --text-soft: #d1d5db; --muted: #9ca3af;
  --ring: rgba(255, 255, 255, .08); --ring-strong: rgba(255, 255, 255, .14);
  --shadow: none;
  --brand-text: var(--primary-300); --link: var(--primary-400);
  --meter-off: #1f2937;
  --idle: #374151;
  --banner-bg: rgba(11, 118, 185, .14); --banner-border: rgba(58, 144, 209, .35);
  --hint-bg: rgba(245, 158, 11, .10); --hint-text: #fcd34d;
  --ptt-ring: var(--primary-800); --ptt-glow: rgba(11, 118, 185, .3);
  --toast-bg: #1f2937;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom);
  overscroll-behavior: none;
}

[hidden] { display: none !important; }

/* Merkbalk: zoals de bovenbalk van het portaal */
.brandbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(env(safe-area-inset-top) + 9px) 16px 9px;
  background: var(--card);
  box-shadow: 0 1px 0 var(--ring-strong);
}
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-name { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; color: var(--brand-text); white-space: nowrap; }
#who { margin-left: auto; color: var(--muted); font-size: .88rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Statusbalk: groen = in orde, oranje = microfoon weg, rood = geen verbinding, grijs = nog niet verbonden */
#statusbar {
  padding: 9px 16px;
  font-weight: 600;
  font-size: .95rem;
  background: var(--idle);
  color: #fff;
  transition: background .2s;
}
#statusbar[data-level="ok"] { background: var(--ok); }
#statusbar[data-level="warn"] { background: var(--warn); color: var(--warn-text); }
#statusbar[data-level="error"] { background: var(--error); }
#statusbar[data-level="idle"] { background: var(--idle); }

main { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.screen { flex: 1; display: flex; flex-direction: column; padding: 14px 16px; gap: 12px; min-height: 0; overflow-y: auto; }
/* Vaste onderdelen krimpen niet; de deelnemerslijst neemt de rest. Past het niet, dan scrolt het scherm. */
.banner, #channels, #meter, #controls, #ptt-wrap, #btn-leave { flex: none; }
#screen-start { justify-content: center; align-items: center; text-align: center; gap: 14px; }
#screen-start h1 { margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; }
#screen-start p { margin: 0; color: var(--muted); max-width: 28em; }
.start-logo { width: 84px; height: 84px; }
#start-error { color: var(--error) !important; min-height: 1.4em; font-weight: 500; }

/* Knoppen: secundair = witte kaart met rand; primair = volledig afgerond in LOZ-blauw */
button {
  font: inherit;
  font-weight: 600;
  color: var(--text);
  background: var(--card);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  min-height: 48px;
  cursor: pointer;
  box-shadow: var(--shadow), 0 0 0 1px var(--ring-strong);
}
button:active { background: var(--bg); }
button:focus-visible { outline: 3px solid var(--primary-500); outline-offset: 2px; }
button:disabled { opacity: .45; cursor: default; }
button.primary {
  background: var(--primary-600);
  color: #fff;
  border-radius: 9999px;
  font-weight: 700;
  min-width: 12em;
  box-shadow: var(--shadow);
}
button.primary:active { background: var(--primary-700); }
button.link { background: none; box-shadow: none; color: var(--link); text-decoration: underline; min-height: 44px; font-weight: 600; }
button[aria-pressed="true"] { background: var(--hint-bg); color: var(--hint-text); box-shadow: 0 0 0 1px var(--warn); }

/* Installatiebanner: lichtblauw zoals in het portaal */
.banner { background: var(--banner-bg); border: 1px solid var(--banner-border); border-radius: var(--radius); padding: 10px 14px; font-size: .88rem; color: var(--text-soft); }
.banner p { margin: 0 0 4px; }
.banner-title { font-weight: 600; color: var(--text); }
.banner button.primary { width: 100%; min-height: 44px; margin: 6px 0; }
.banner-actions { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.banner button.link { min-height: 32px; padding: 2px 0; font-size: .85rem; }
#how-text { margin-top: 4px; font-size: .84rem; }
.banner-hint { background: var(--hint-bg); color: var(--hint-text); border-radius: var(--radius-sm); padding: 10px 12px; margin: 8px 0; font-size: .82rem; }
.banner-hint p { color: inherit; }
.banner-hint ol { margin: 6px 0 0; padding-left: 20px; }

/* Link of code plakken */
#code-form { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 24em; text-align: left; align-items: stretch; }
#code-form label { color: var(--muted); font-size: .88rem; font-weight: 500; }
#code-input {
  font: inherit; color: var(--text); background: var(--card); border: 0; border-radius: var(--radius-sm);
  padding: 13px 16px; min-height: 48px; width: 100%; box-shadow: var(--shadow), 0 0 0 1px var(--ring-strong);
}
#code-input::placeholder { color: var(--muted); }
#code-input:focus-visible { outline: 3px solid var(--primary-500); outline-offset: 2px; }
#code-form button.primary { width: 100%; }

/* Kanalen */
#channels { display: flex; gap: 8px; overflow-x: auto; }
#channels button { flex: 1 0 auto; }
#channels button[aria-current="true"] { background: var(--primary-600); color: #fff; box-shadow: var(--shadow); }
#channels:empty { display: none; }

/* Deelnemers: een kaart */
#participants {
  list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1 1 auto; min-height: 7em;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow), 0 0 0 1px var(--ring);
}
#participants li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--ring); font-weight: 500; }
#participants li:last-child { border-bottom: 0; }
#participants .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--meter-off); flex: none; }
#participants li[data-speaking="true"] .dot { background: var(--speaking); box-shadow: 0 0 0 4px rgba(34, 197, 94, .25); }
#participants .role { margin-left: auto; color: var(--muted); font-size: .8rem; font-weight: 500; }
#participants .empty { color: var(--muted); border: none; }

/* Niveaumeter */
#meter { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; height: 10px; }
#meter i { background: var(--meter-off); border-radius: 3px; }
#meter i.on { background: var(--accent); }
#meter i.on.hot { background: var(--warn); }

#controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#btn-call[data-armed="true"] { background: var(--error); color: #fff; box-shadow: none; font-weight: 700; }

/* Praatknop */
#ptt-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 2px; }
#btn-ptt {
  width: min(68vw, 36dvh);
  height: min(68vw, 36dvh);
  border-radius: 50%;
  border: 8px solid var(--ptt-ring);
  background: var(--card);
  color: var(--brand-text);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  box-shadow: 0 8px 24px var(--ptt-glow);
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  transition: background .08s, border-color .08s, transform .08s;
}
#btn-ptt[data-talking="true"] { background: var(--primary-600); border-color: var(--primary-300); color: #fff; transform: scale(.97); }
#btn-ptt[data-locked="true"] { background: var(--primary-700); border-color: var(--warn); color: #fff; }
#btn-ptt:disabled { opacity: .45; box-shadow: none; }
#btn-lock { width: 100%; max-width: 22em; }

#btn-leave { margin-top: 6px; }
#btn-leave[data-armed="true"] { color: var(--error); font-weight: 700; }

#toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 16px);
  background: var(--toast-bg); color: var(--toast-text); border-radius: var(--radius);
  padding: 12px 16px; text-align: center; z-index: 10; font-weight: 500;
  box-shadow: 0 10px 25px rgba(3, 7, 18, .25);
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media (max-height: 700px) {
  #participants { flex: 0 1 auto; min-height: 0; max-height: 14dvh; }
  #btn-ptt { width: min(60vw, 30dvh); height: min(60vw, 30dvh); }
  .screen { gap: 8px; padding-top: 8px; padding-bottom: 8px; }
  button { min-height: 44px; padding-top: 9px; padding-bottom: 9px; }
}