/* De opmaak van ScreenWatch.
 *
 * Het merk is paars. Het logo in statisch/ is daarvoor omgekleurd vanuit het
 * blauw-groene origineel in merk/, zodat logo en paneel bij elkaar horen.
 *
 * Indeling zoals de grote pakketten in dit vak: een donkere zijbalk met de
 * klantkiezer bovenin, een lichte werkvloer, een balk met zoekveld en één
 * duidelijke knop rechtsboven. De maatvoering komt van shadcn/ui: hsl-waarden
 * als losse getallen, radius van 0.5rem, randen in plaats van schaduwen.
 * Met de hand geschreven, zodat er geen npm en geen bouwstap in de uitrol komt.
 *
 * Eén kleur bepaalt het merk: --accent hieronder. Verander die regel en het
 * hele paneel gaat mee.
 */

:root {
  --accent: 258 89% 66%;
  --accent-tekst: 0 0% 100%;

  --achtergrond: 240 20% 98%;
  --voorgrond: 240 10% 3.9%;
  --kaart: 0 0% 100%;
  --gedempt: 240 5% 96%;
  --gedempte-tekst: 240 4% 46%;
  --rand: 240 6% 90%;
  --ring: var(--accent);
  --gevaar: 0 72% 51%;
  --goed: 142 71% 45%;
  --radius: 0.5rem;

  /* De zijbalk is altijd donker, ook in de lichte stand: dat geeft het paneel
     zijn vorm en houdt de aandacht op de werkvloer. */
  --zij: 258 30% 11%;
  --zij-tekst: 260 20% 96%;
  --zij-gedempt: 258 12% 65%;
  --zij-rand: 258 20% 20%;
}

@media (prefers-color-scheme: dark) {
  :root {
    --achtergrond: 258 18% 7%;
    --voorgrond: 0 0% 98%;
    --kaart: 258 18% 10%;
    --gedempt: 258 14% 16%;
    --gedempte-tekst: 258 10% 65%;
    --rand: 258 14% 18%;
    --zij: 258 22% 8%;
    --zij-rand: 258 16% 16%;
    --goed: 142 60% 45%;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: hsl(var(--achtergrond));
  color: hsl(var(--voorgrond));
  /* Een paneel dat op een groot beeldscherm wordt gebruikt mag ruimer staan
     dan een webpagina. Vandaar 16 in plaats van de gebruikelijke 14, en overal
     wat meer lucht. */
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
svg { flex: none; }

/* ------------------------------------------------------------------ opbouw */

.schil { display: flex; min-height: 100vh; }

.zijkant {
  width: 16.5rem; flex: none; position: sticky; top: 0; height: 100vh;
  background: hsl(var(--zij)); color: hsl(var(--zij-tekst));
  padding: .875rem .75rem; display: flex; flex-direction: column; gap: .125rem;
}

.merk {
  display: flex; align-items: center; gap: .625rem;
  font-weight: 600; font-size: 17px; padding: .5rem .5rem 1.25rem;
  letter-spacing: -.015em; text-decoration: none;
}
.merk .beeldmerk { width: 2.4rem; height: 2.4rem; flex: none; margin: -.2rem 0; }
.merk .woordmerk { height: 1.3rem; width: auto; }
.poortlogo { display: block; width: 18rem; max-width: 80vw; margin: 0 auto 1.75rem; }

/* De klantkiezer: bovenin, als vak, zodat altijd zichtbaar is bij wie je werkt. */
.kiezer {
  background: hsl(0 0% 100% / .06); border: 1px solid hsl(var(--zij-rand));
  border-radius: calc(var(--radius) - 2px); padding: .4rem .55rem;
  margin-bottom: .875rem;
}
.kiezer span { display: block; font-size: 12px; color: hsl(var(--zij-gedempt)); }
.kiezer select {
  width: 100%; height: auto; padding: 0; margin: 0; border: 0; background: transparent;
  color: hsl(var(--zij-tekst)); font: inherit; font-weight: 500; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, hsl(var(--zij-gedempt)) 50%),
                    linear-gradient(135deg, hsl(var(--zij-gedempt)) 50%, transparent 50%);
  background-position: right .3rem center, right 0 center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 1rem;
}
.kiezer select option { color: #111; }
.kiezer .vast { font-weight: 500; }

.zijkant a.punt {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .7rem; border-radius: calc(var(--radius) - 2px);
  color: hsl(var(--zij-gedempt)); text-decoration: none; font-weight: 500;
  font-size: 15.5px;
}
.zijkant a.punt:hover { background: hsl(0 0% 100% / .07); color: hsl(var(--zij-tekst)); }
.zijkant a.punt.hier {
  background: hsl(var(--accent)); color: hsl(var(--accent-tekst));
}
.zijkant .duw { margin-top: auto; }

.wie {
  display: flex; align-items: center; gap: .625rem; padding: .5rem;
  border-top: 1px solid hsl(var(--zij-rand)); margin-top: .5rem;
  color: hsl(var(--zij-tekst)); text-decoration: none;
}
.wie .bol {
  width: 2rem; height: 2rem; border-radius: 999px; flex: none; display: grid;
  place-items: center; background: hsl(var(--accent)); color: hsl(var(--accent-tekst));
  font-weight: 600; text-transform: uppercase;
}
.wie div { min-width: 0; }
.wie b { display: block; font-weight: 500; }
.wie small { color: hsl(var(--zij-gedempt)); font-size: 12px;
             display: block; overflow: hidden; text-overflow: ellipsis; }

.blad { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.kop {
  display: flex; align-items: center; gap: 1.25rem;
  padding: 1.05rem 2rem; border-bottom: 1px solid hsl(var(--rand));
  background: hsl(var(--kaart)); position: sticky; top: 0; z-index: 5;
}
.kop h1 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em;
          white-space: nowrap; }

/* Bij welke klant je kijkt, naast de titel. Zonder dat staat er een lijst op
   je scherm waarvan je niet ziet van wie hij is, en dat is precies het soort
   twijfel dat je bij klantgegevens niet wilt. */
.bijklant {
  flex: none; padding: .2rem .7rem; border-radius: 999px; font-size: 13px;
  font-weight: 500; color: hsl(var(--gedempte-tekst));
  border: 1px solid hsl(var(--rand)); background: hsl(var(--gedempt) / .6);
  white-space: nowrap; margin-left: -.5rem;
}

.zoek { flex: 1; position: relative; max-width: 52rem; }
.zoek svg { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
            color: hsl(var(--gedempte-tekst)); }
/* staat verderop nog eens, want de algemene invoerregel komt later */

.inhoud { padding: 1.75rem 2rem; display: flex; flex-direction: column; gap: 1.5rem; }
.inhoud > p.duiding { margin: -.5rem 0 0; color: hsl(var(--gedempte-tekst)); }

.rooster { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }

/* --------------------------------------------------------------- onderdelen */

.kaart {
  background: hsl(var(--kaart)); border: 1px solid hsl(var(--rand));
  border-radius: var(--radius); overflow: hidden;
}
/* Kop, romp en voet mogen ook in een formulier in de kaart zitten. Dat is
   bijna altijd zo, en zonder die tweede regel plakken de velden tegen de rand. */
.kaart > header, .kaart > form > header { padding: 1.25rem 1.5rem .875rem; }
.kaart > header h2, .kaart > form > header h2 { margin: 0; font-size: 17px; font-weight: 600; }
.kaart > header p, .kaart > form > header p { margin: .3rem 0 0; font-size: 14.5px; color: hsl(var(--gedempte-tekst)); }
.kaart > .romp, .kaart > form > .romp { padding: 0 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .875rem; }
.kaart > footer, .kaart > form > footer {
  padding: .875rem 1.5rem; border-top: 1px solid hsl(var(--rand));
  background: hsl(var(--gedempt) / .5);
  display: flex; gap: .5rem; align-items: center; justify-content: flex-end;
}

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  height: 2.6rem; padding: 0 1.1rem; border-radius: calc(var(--radius) - 2px);
  border: 1px solid transparent; background: hsl(var(--accent));
  color: hsl(var(--accent-tekst)); font: inherit; font-weight: 500;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.knop:hover { filter: brightness(1.08); }
.knop.stil { background: hsl(var(--kaart)); border-color: hsl(var(--rand)); color: hsl(var(--voorgrond)); }
.knop.stil:hover { background: hsl(var(--gedempt)); filter: none; }
.knop.weg { background: transparent; border-color: transparent; color: hsl(var(--gevaar)); }
.knop.weg:hover { background: hsl(var(--gevaar) / .1); filter: none; }
.knop.klein { height: 2.1rem; padding: 0 .75rem; font-size: 14px; }
.knop.groot { height: 3rem; padding: 0 1.5rem; font-size: 17px; }

label.veld { display: flex; flex-direction: column; gap: .375rem; font-weight: 500; }
label.veld span { font-size: 14px; }
label.veld em { font-style: normal; font-weight: 400; color: hsl(var(--gedempte-tekst)); font-size: 12px; }

/* Alles behalve de vinkjes en de bestandskiezer. Bewust niet opsommen welke
   soorten wel: een veld zonder type-attribuut is gewoon een tekstveld, maar
   valt buiten input[type=text] en houdt dan de maat van de browser. */
input:where(:not([type=checkbox], [type=radio], [type=file], [type=submit])),
select, textarea {
  height: 2.6rem; padding: 0 .75rem; font: inherit;
  background: hsl(var(--kaart)); color: hsl(var(--voorgrond));
  border: 1px solid hsl(var(--rand)); border-radius: calc(var(--radius) - 2px);
  width: 100%;
}
input:where(:not([type=checkbox], [type=radio])):focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid hsl(var(--ring) / .5); outline-offset: 1px;
  border-color: hsl(var(--accent));
}
input[type=file] { font: inherit; }
/* Na de algemene invoerregel, anders wint die en loopt het vergrootglas
   dwars door de tekst. */
.zoek input[type=search] { padding-left: 2.2rem; }
select {
  appearance: none; padding-right: 1.75rem;
  background-image: linear-gradient(45deg, transparent 50%, hsl(var(--gedempte-tekst)) 50%),
                    linear-gradient(135deg, hsl(var(--gedempte-tekst)) 50%, transparent 50%);
  background-position: right 1rem center, right .7rem center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}

.rij { display: flex; gap: .625rem; align-items: flex-end; flex-wrap: wrap; }
.rij > * { flex: 1; min-width: 8rem; }
.rij > .vast { flex: none; min-width: 0; }

table { width: 100%; border-collapse: collapse; font-size: 15px; }
th {
  text-align: left; font-weight: 500; font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; color: hsl(var(--gedempte-tekst));
  padding: .8rem 1.5rem; border-bottom: 1px solid hsl(var(--rand));
}
td { padding: .95rem 1.5rem; border-bottom: 1px solid hsl(var(--rand)); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: hsl(var(--gedempt) / .6); }

.merkje {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .125rem .5rem; border-radius: 999px; font-size: 12px; font-weight: 500;
  border: 1px solid hsl(var(--rand)); color: hsl(var(--gedempte-tekst));
}
.merkje.leeft { color: hsl(var(--goed)); border-color: hsl(var(--goed) / .35); background: hsl(var(--goed) / .1); }
.merkje.stil { color: hsl(var(--gevaar)); border-color: hsl(var(--gevaar) / .35); background: hsl(var(--gevaar) / .08); }
.stip { width: .5rem; height: .5rem; border-radius: 999px; background: currentColor; }

.gedempt { color: hsl(var(--gedempte-tekst)); }
.klein { font-size: 14px; }
.getal { font-variant-numeric: tabular-nums; }

.gelukt {
  padding: .75rem 1rem; border-radius: calc(var(--radius) - 2px); font-size: 14px;
  border: 1px solid hsl(var(--goed) / .4); background: hsl(var(--goed) / .1);
  color: hsl(var(--goed));
}
.kaart > form > header.scheiding, .kaart > header.scheiding {
  border-top: 1px solid hsl(var(--rand)); margin-top: .25rem;
}

.melding {
  padding: .75rem 1rem; border-radius: calc(var(--radius) - 2px);
  border: 1px solid hsl(var(--gevaar) / .4); background: hsl(var(--gevaar) / .08);
  color: hsl(var(--gevaar)); font-size: 13px;
}
.leeg { padding: 3rem 1.25rem; text-align: center; color: hsl(var(--gedempte-tekst)); }

/* --------------------------------------------------------- de lege begintoon */

.welkom { padding: 3.5rem 1rem; text-align: center; }
.welkom > h2 { margin: 0 0 2.25rem; font-size: 24px; font-weight: 400; }
.welkom > h2 b { font-weight: 600; }
.keuzes { display: flex; gap: 1.25rem; justify-content: center; flex-wrap: wrap; }
.keuze {
  width: 26rem; max-width: 100%; text-align: left; border-radius: 14px;
  padding: 2rem; display: flex; flex-direction: column; gap: .75rem;
}
.keuze h3 { margin: 0; font-size: 22px; font-weight: 600; }
.keuze p { margin: 0; font-size: 15px; opacity: .85; line-height: 1.6; }
.keuze .duw { margin-top: auto; padding-top: .5rem; }
.keuze.donker { background: hsl(258 25% 14%); color: #fff; }
.keuze.donker .knop { background: hsl(var(--accent)); }
.keuze.kleur { background: linear-gradient(135deg, hsl(var(--accent)), hsl(275 80% 58%)); color: #fff; }
.keuze.kleur .knop { background: #fff; color: hsl(258 30% 15%); }

/* ------------------------------------------------------ media en afspeellijst */

.tegel { display: flex; flex-direction: column; }
.tegel .beeld {
  aspect-ratio: 16/9; background: hsl(var(--gedempt));
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.tegel .beeld img { width: 100%; height: 100%; object-fit: cover; }
.tegel .onder { padding: .75rem .875rem; display: flex; flex-direction: column; gap: .25rem; }
.tegel .naam { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dia { display: flex; gap: .875rem; align-items: center; padding: .75rem 1.25rem;
       border-bottom: 1px solid hsl(var(--rand)); }
.dia:last-of-type { border-bottom: 0; }
.dia .grijp { cursor: grab; color: hsl(var(--gedempte-tekst)); user-select: none; }
.dia .voor { width: 5rem; aspect-ratio: 16/9; border-radius: 4px; background: hsl(var(--gedempt));
             object-fit: cover; flex: none; }
.dia .midden { flex: 1; min-width: 0; }
.dia input[type=number] { width: 5rem; }
.dia select { width: 9.5rem; }

/* ------------------------------------------------------------------- inloggen */

.poort { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
         background: hsl(var(--zij)); }
.poort .kaart { width: 23rem; max-width: 100%; }
.poort .merk { justify-content: center; color: hsl(var(--zij-tekst)); }

/* ------------------------------------------------------------------ vensters
 *
 * Met het <dialog> van de browser zelf: die regelt de laag erboven, het
 * sluiten met escape en de aandacht in het venster. Scheelt een bibliotheek.
 */

dialog {
  border: 0; padding: 0; border-radius: 14px; max-width: 46rem; width: calc(100% - 2rem);
  background: hsl(var(--kaart)); color: hsl(var(--voorgrond));
  box-shadow: 0 24px 60px hsl(240 10% 4% / .35);
}
dialog::backdrop { background: hsl(240 10% 4% / .55); }
dialog header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem; border-bottom: 1px solid hsl(var(--rand));
}
dialog header h2 { margin: 0; font-size: 19px; font-weight: 600; }
dialog .sluit {
  background: none; border: 0; cursor: pointer; color: hsl(var(--gedempte-tekst));
  font-size: 24px; line-height: 1; padding: .25rem .5rem; border-radius: 6px;
}
dialog .sluit:hover { background: hsl(var(--gedempt)); }
dialog .romp { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
dialog footer {
  padding: 1rem 1.5rem; border-top: 1px solid hsl(var(--rand));
  display: flex; gap: .75rem; justify-content: flex-end; align-items: center;
}

/* Het koppelvenster: een donker vlak met één groot veld, zoals het scherm
   waar de code op staat. Zo hoort het bij elkaar. */
.koppelvlak {
  background: hsl(258 25% 12%); color: #fff; border-radius: 12px;
  padding: 2.5rem 2rem; text-align: center;
}
.koppelvlak h3 { margin: 0 0 1.75rem; font-size: 21px; font-weight: 500; }
.koppelvlak input {
  background: transparent; border: 0; border-bottom: 3px solid hsl(var(--accent));
  border-radius: 0; color: #fff; text-align: center; height: 4rem;
  font-size: 44px; font-weight: 600; letter-spacing: .3em; text-indent: .3em;
  font-variant-numeric: tabular-nums; max-width: 22rem; margin: 0 auto;
}
.koppelvlak input:focus-visible { outline: 0; border-bottom-color: #fff; }
.koppelvlak p { margin: 1.75rem 0 0; font-size: 14px; opacity: .6; }

/* ---------------------------------------------------------- media als lijst */

.balkje { display: flex; align-items: center; gap: .5rem; justify-content: space-between;
          padding: 0 .25rem; }
.balkje .standen { display: flex; gap: .25rem; }
.standen a {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
  border-radius: calc(var(--radius) - 2px); color: hsl(var(--gedempte-tekst));
  text-decoration: none; border: 1px solid transparent;
}
.standen a.hier { background: hsl(var(--gedempt)); color: hsl(var(--voorgrond));
                  border-color: hsl(var(--rand)); }
.mini { width: 3.5rem; height: 2.2rem; object-fit: cover; border-radius: 5px;
        background: hsl(var(--gedempt)); flex: none; }
td .met-beeld { display: flex; align-items: center; gap: .875rem; }

/* --------------------------------------------------------------- de kiezer */

.kiesrij {
  display: flex; align-items: center; gap: .875rem; padding: .7rem 1rem;
  border-bottom: 1px solid hsl(var(--rand)); cursor: pointer;
}
.kiesrij:hover { background: hsl(var(--gedempt) / .6); }
.kiesrij input { width: 1.1rem; height: 1.1rem; flex: none; accent-color: hsl(var(--accent)); }
.kieslijst { max-height: 24rem; overflow: auto; border: 1px solid hsl(var(--rand));
             border-radius: var(--radius); }

/* ------------------------------------------------------------ binnenkort */

.binnenkort { display: flex; flex-direction: column; align-items: center; gap: 1rem;
              padding: 4rem 1rem; text-align: center; color: hsl(var(--gedempte-tekst)); }
.binnenkort h2 { margin: 0; font-size: 22px; color: hsl(var(--voorgrond)); }
.binnenkort p { margin: 0; max-width: 32rem; }

/* ----------------------------------------------------------- twee kolommen */

.werkblad { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: 1.5rem;
            align-items: start; }
@media (max-width: 62rem) { .werkblad { grid-template-columns: 1fr; } }

/* Tabbladen, voor apparaat naast instellingen. */
.tabs { display: flex; border-bottom: 1px solid hsl(var(--rand)); }
.tabs a {
  flex: 1; text-align: center; padding: .875rem .5rem; text-decoration: none;
  font-weight: 500; font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  color: hsl(var(--gedempte-tekst)); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a.hier { color: hsl(var(--voorgrond)); border-bottom-color: hsl(var(--accent)); }

/* Kleine feitjes over het apparaat, twee op een rij. */
.feiten { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.feit {
  border: 1px solid hsl(var(--rand)); border-radius: calc(var(--radius) - 2px);
  padding: .75rem .875rem; min-width: 0;
}
.feit span { display: block; font-size: 12px; color: hsl(var(--gedempte-tekst));
             display: flex; gap: .375rem; align-items: center; }
.feit b { display: block; font-size: 17px; font-weight: 600; margin-top: .25rem;
          overflow-wrap: anywhere; }
.feit.breed { grid-column: 1 / -1; }

dl.regels { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .5rem .875rem;
            font-size: 14px; align-items: baseline; }
dl.regels dt { color: hsl(var(--gedempte-tekst)); white-space: nowrap; }
dl.regels dd { margin: 0; text-align: right; overflow-wrap: anywhere;
               font-variant-numeric: tabular-nums; }

/* Wat er nu speelt: het beeld met een randje eromheen. */
.nuspeelt { background: #0b0a10; border-radius: calc(var(--radius) - 2px);
            aspect-ratio: 16/9; display: grid; place-items: center; overflow: hidden; }
.nuspeelt img { width: 100%; height: 100%; object-fit: contain; }
.nuspeelt .niets { color: hsl(var(--gedempte-tekst)); font-size: 13px; }

/* Het voorbeeld: een echte speler in een lijstje. */
.voorbeeldvlak {
  background: #000; border-radius: var(--radius); overflow: hidden;
  border: 1px solid hsl(var(--rand)); aspect-ratio: 16/9; position: relative;
}
.voorbeeldvlak iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* De keuze 0/90/180/270 als een rij knoppen. */
.keuzerij { display: flex; gap: .375rem; }
.keuzerij label { flex: 1; }
.keuzerij input { position: absolute; opacity: 0; pointer-events: none; }
.keuzerij span {
  display: block; text-align: center; padding: .55rem .25rem; cursor: pointer;
  border: 1px solid hsl(var(--rand)); border-radius: calc(var(--radius) - 2px);
  font-weight: 500; font-size: 14px;
}
.keuzerij input:checked + span {
  background: hsl(var(--accent)); color: hsl(var(--accent-tekst));
  border-color: hsl(var(--accent));
}
.keuzerij input:focus-visible + span { outline: 2px solid hsl(var(--ring) / .5); }

/* --------------------------------------------------------------- uploaden */

.sleepvlak {
  border: 2px dashed hsl(var(--rand)); border-radius: var(--radius);
  padding: 2.5rem 1.5rem; text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: .75rem; background: hsl(var(--gedempt) / .4);
  transition: border-color .15s, background .15s;
}
.sleepvlak.erboven { border-color: hsl(var(--accent)); background: hsl(var(--accent) / .07); }
.sleepvlak h3 { margin: 0; font-size: 17px; font-weight: 600; }
.sleepvlak p { margin: 0; font-size: 14px; color: hsl(var(--gedempte-tekst)); }
.sleepvlak .plaatjes { display: flex; gap: .5rem; opacity: .5; }
.sleepvlak input[type=file] { display: none; }
.gekozen { display: flex; flex-direction: column; gap: .375rem; width: 100%;
           max-height: 12rem; overflow: auto; text-align: left; }
.gekozen div { display: flex; justify-content: space-between; gap: 1rem;
               font-size: 14px; padding: .375rem .625rem; border-radius: 6px;
               background: hsl(var(--kaart)); border: 1px solid hsl(var(--rand)); }

/* --------------------------------------------------------------- mappen */

.mapbalk { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.mapbalk a {
  display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .8rem;
  border: 1px solid hsl(var(--rand)); border-radius: 999px; text-decoration: none;
  font-size: 14px; font-weight: 500; background: hsl(var(--kaart));
}
.mapbalk a.hier { background: hsl(var(--accent)); color: hsl(var(--accent-tekst));
                  border-color: hsl(var(--accent)); }
.mapbalk a small { opacity: .6; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ agenda
 *
 * Een week in zeven kolommen. De uren staan links; een blok wordt met de muis
 * versleept en aan de onderrand langer gemaakt. Alles in gewone css-raster,
 * geen kalenderbibliotheek: dit is een tabel met blokjes erin.
 */

.agenda { border: 1px solid hsl(var(--rand)); border-radius: var(--radius);
          overflow: hidden; background: hsl(var(--kaart)); }
.agendakop, .agendalijf { display: grid; grid-template-columns: 3.5rem repeat(7, 1fr); }
.agendakop {
  border-bottom: 1px solid hsl(var(--rand)); position: sticky; top: 0; z-index: 3;
  background: hsl(var(--kaart));
}
.agendakop div { padding: .7rem .5rem; text-align: center; font-weight: 600; font-size: 14px; }
.agendakop div + div { border-left: 1px solid hsl(var(--rand)); }
.agendakop div.vandaag { color: hsl(var(--accent)); }

.agendarol { max-height: 34rem; overflow: auto; position: relative; }
.uren { border-right: 1px solid hsl(var(--rand)); }
.uren span {
  display: block; height: 3rem; font-size: 12px; color: hsl(var(--gedempte-tekst));
  text-align: right; padding-right: .5rem; transform: translateY(-.55em);
}
.dagkolom { position: relative; border-left: 1px solid hsl(var(--rand)); }
.dagkolom .uurlijn { height: 3rem; border-bottom: 1px solid hsl(var(--rand) / .6); }
.dagkolom .uurlijn:nth-child(2n) { background: hsl(var(--gedempt) / .35); }

.blok {
  position: absolute; left: 3px; right: 3px; border-radius: 6px; overflow: hidden;
  background: hsl(var(--accent)); color: hsl(var(--accent-tekst));
  border: 1px solid hsl(var(--accent)); cursor: grab; user-select: none;
  padding: .25rem .45rem; font-size: 12.5px; line-height: 1.25; z-index: 2;
  box-shadow: 0 1px 3px hsl(240 10% 4% / .25);
}
.blok.sleept { cursor: grabbing; opacity: .85; z-index: 4; }
.blok b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis;
          white-space: nowrap; }
.blok small { opacity: .85; font-variant-numeric: tabular-nums; }
.blok .rekker {
  position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize;
}
.blok .rekker::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 1.5rem; height: 2px;
  transform: translateX(-50%); background: currentColor; opacity: .5; border-radius: 2px;
}
.blok.kort { padding-top: .1rem; font-size: 11.5px; }
.blok.kort small { display: none; }

.agendauitleg { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
                font-size: 14px; color: hsl(var(--gedempte-tekst)); }


/* Tussen twee blokken in één kaart: een lijn en weer lucht. */
.kaart .scheiding { border-top: 1px solid hsl(var(--rand)); padding-top: 1.25rem; }

/* Wat er nu speelt, in de verhouding van het kanaal zelf. */
.nuspeelt.opmaat { max-height: 30rem; margin: 0 auto; width: 100%; position: relative; }
/* Het beeld over het hele vak leggen, anders neemt het zijn eigen verhouding
   mee, snijdt de rand het af, en lijkt 'passend' ineens 'vullend'. Dan liegt
   het voorbeeld over wat er op het scherm staat. */
.nuspeelt.opmaat img, .nuspeelt.opmaat video {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.nuspeelt .passend { object-fit: contain; }
.nuspeelt .vullend { object-fit: cover; }
.nuspeelt .uitgerekt { object-fit: fill; }
.nuspeelt img, .nuspeelt video { object-position: left top; }

/* Keuze tussen twee dingen, als twee grote knoppen naast elkaar. */
.tweekeus { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.tweekeus label { position: relative; }
.tweekeus input { position: absolute; opacity: 0; pointer-events: none; }
.tweekeus span {
  display: flex; flex-direction: column; gap: .15rem; padding: .75rem .875rem;
  border: 1px solid hsl(var(--rand)); border-radius: calc(var(--radius) - 2px);
  cursor: pointer; font-weight: 500;
}
.tweekeus span small { font-weight: 400; color: hsl(var(--gedempte-tekst)); font-size: 13px; }
.tweekeus input:checked + span { border-color: hsl(var(--accent));
  box-shadow: 0 0 0 1px hsl(var(--accent)); background: hsl(var(--accent) / .06); }
.tweekeus input:focus-visible + span { outline: 2px solid hsl(var(--ring) / .5); }

/* Schermen aan een kanaal hangen: een lijst met vinkjes. */
.vinklijst { display: flex; flex-direction: column; border: 1px solid hsl(var(--rand));
             border-radius: calc(var(--radius) - 2px); }
.vinklijst label { display: flex; align-items: center; gap: .75rem; padding: .7rem .875rem;
                   cursor: pointer; }
.vinklijst label + label { border-top: 1px solid hsl(var(--rand)); }
.vinklijst input { width: 1.1rem; height: 1.1rem; accent-color: hsl(var(--accent)); flex: none; }
.vinklijst .rechts { margin-left: auto; font-size: 13px; color: hsl(var(--gedempte-tekst)); }

.opdrachtlog { display: flex; flex-direction: column; gap: .2rem; margin-top: .75rem;
               padding-top: .75rem; border-top: 1px solid hsl(var(--rand)); }