/* Dendron college – ICT Helpdesk
   Kleuren en typografie volgens het huisstijlhandboek v1.0.
   Museo Sans is licentie-gebonden: installeer het op de pc, anders valt het terug op Nunito Sans. */

/* Nunito Sans zit in de app zelf (assets/fonts, licentie OFL.txt ernaast), zodat het er ook is zonder internet of
   terwijl het netwerk bij het opstarten nog niet klaar is. Alleen Latijnse tekens; regular en cursief, alle gewichten. */
@font-face {
  font-family: "Nunito Sans"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url(../assets/fonts/nunito-sans-latin-opsz-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito Sans"; font-style: italic; font-weight: 200 1000; font-display: swap;
  src: url(../assets/fonts/nunito-sans-latin-opsz-italic.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito Sans"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url(../assets/fonts/nunito-sans-latin-ext-opsz-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito Sans"; font-style: italic; font-weight: 200 1000; font-display: swap;
  src: url(../assets/fonts/nunito-sans-latin-ext-opsz-italic.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --geel: #ffcc00;
  --geel-d: #e6b800;
  --zwart: #1d1d1b;
  --grijs: #f6f6f6;
  --oranje: #e74310;
  --paars: #af1280;
  --blauw: #0074ae;
  --lichtblauw: #5bc5f2;
  --groen: #009987;
  --limoen: #dada00;

  --lijn: #e5e5e1;
  --tekst2: #6b6b66;
  --tekst: var(--zwart);
  --oppervlak: #fff;
  --menu-bg: rgba(255, 255, 255, .94);
  /* Zachte tinten die in donker anders moeten (zie hieronder), in plaats van losse kleuren in de regels */
  --open: #fff4c2;            /* roostervak met iemand erin */
  --open-hover: #ffeea0;
  --cel-hover: #ececea;
  --gekozen: #fff8d6;         /* gekozen tegel (Quick Ticket) */
  --zwak: rgba(29, 29, 27, .25);
  --streep: rgba(29, 29, 27, .18);
  --zacht-bg: rgba(29, 29, 27, .06);
  --zacht-fg: rgba(29, 29, 27, .45);
  --label: rgba(29, 29, 27, .82);
  --fout: var(--oranje);
  --font: "Museo Sans", "museo-sans", "Nunito Sans", system-ui, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --menubar-h: 32px;
  --radius: 12px;
}

/* Donker uiterlijk (Snelle instellingen): de menubalk blijft zoals hij is, de rest (bureaublad, vensters, menu's en
   formulieren) volgt dit. --zwart blijft het echte merk-zwart (badges, knoppen) en flipt niet mee. */
:root[data-theme="dark"] {
  --grijs: #292926;
  --lijn: #3d3d3a;
  --tekst2: #9a9a93;
  --tekst: #f2f2ef;
  --oppervlak: #232320;
  --menu-bg: rgba(35, 35, 32, .92);
  --open: #453b1c;
  --open-hover: #544817;
  --cel-hover: #34342f;
  --gekozen: #40371c;
  --zwak: rgba(255, 255, 255, .25);
  --streep: rgba(255, 255, 255, .2);
  --zacht-bg: rgba(255, 255, 255, .08);
  --zacht-fg: rgba(255, 255, 255, .5);
  --label: rgba(255, 255, 255, .88);
  --fout: #ff7a4d;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--grijs);
  color: var(--tekst);
  font-family: var(--font);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

body { user-select: none; }

/* Bureaublad: lichte, warme gloed; in donker uiterlijk (Snelle instellingen) hieronder een donkere variant */
body {
  background:
    radial-gradient(120% 90% at 100% 100%, rgba(255, 204, 0, .16), rgba(231, 110, 16, .06) 40%, transparent 65%),
    radial-gradient(70% 60% at 0% 0%, rgba(255, 204, 0, .10), transparent 60%),
    linear-gradient(160deg, #f7f6f3 0%, #efeee9 45%, #e8e6e0 100%);
}
:root[data-theme="dark"] body {
  background:
    radial-gradient(120% 90% at 100% 100%, rgba(255, 166, 0, .30), rgba(231, 110, 16, .10) 40%, transparent 65%),
    radial-gradient(70% 60% at 0% 0%, rgba(255, 190, 60, .06), transparent 60%),
    linear-gradient(160deg, #272624 0%, #1d1d1b 45%, #1a1614 100%);
}
input, textarea, select, dd { user-select: text; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .35; }
:focus-visible { outline: 3px solid rgba(0, 116, 174, .45); outline-offset: 1px; }
.hidden { display: none !important; }
.grow { flex: 1; }
h2 { font-weight: 800; font-size: 20px; margin: 0 0 12px; }
h3 { font-weight: 800; font-size: 16px; margin: 0 0 14px; }

.ico {
  width: 1em; height: 1em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -.14em;
}

/* ---------- Menubalk ---------- */

#menubar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--menubar-h);
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  font-size: 13px;
  color: #fff;
  /* Geen backdrop-filter: dat moet elk beeldje opnieuw vervaagd worden en hapert op oudere pc's. Eronder ligt
     alleen het effen bureaublad, dus vervagen voegt toch niets toe. */
  background: rgba(29, 29, 27, .86);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.mb-btn {
  display: flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 8px;
  background: none; border: 0; border-radius: 6px;
}
.mb-btn:hover, .mb-btn.open { background: rgba(255, 255, 255, .12); }
#brand-btn { padding: 0 10px; }
#brand-btn img { height: 18px; display: block; }
#active-app { padding: 0 4px; font-size: 14px; font-weight: 800; }
.mb-spacer { flex: 1; }

/* Rechts: blokjes met een klein grijs label en een waarde, gescheiden door een streepje */
.mb-seg { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mb-seg small { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.mb-sep { flex: none; width: 1px; height: 16px; background: rgba(255, 255, 255, .15); }
.mb-groep[hidden] { display: none; }
#presence-pill { gap: 0; padding: 0; }
#presence-pill em { font-style: normal; color: rgba(255, 255, 255, .45); }
#presence-pill .badge { padding: 1px 8px; font-size: 12px; }
#sessie-pill { gap: 6px; padding: 0 10px 0 0; }
#sessie-pill .mb-seg { padding-right: 0; }
#sessie-pill .badge { padding: 1px 8px; font-size: 12px; }
#sessie-pill .ico { opacity: .55; }
.mb-label { padding: 1px 9px; font-size: 12px; font-weight: 800; color: var(--zwart); background: var(--geel); border-radius: 99px; }
.mb-label.pauze { background: var(--lichtblauw); }
.mb-ingevuld, .mb-rooster { display: flex; gap: 4px; }
.mb-mist { opacity: .4; }
.mb-tijd { font-weight: 700; }

#beheer-pill { gap: 5px; height: 22px; padding: 0 9px; font-size: 12px; font-weight: 800; color: var(--zwart); background: var(--geel); border-radius: 99px; }
#beheer-pill:hover { background: var(--geel-d); }
#beheer-pill[hidden] { display: none; }

/* ---------- Inlogscherm ---------- */
/* Vergrendeld (data-vergrendeld op <html>, zie Sessie in store.js): de rest van de app blijft bestaan maar is verborgen tot iemand inlogt */
html[data-vergrendeld] #menubar, html[data-vergrendeld] #stage-strip, html[data-vergrendeld] #windows, html[data-vergrendeld] .menu, html[data-vergrendeld] .widget { display: none; }

/* Zelfde warme verloop als het bureaublad (body hieronder): het inlogscherm ligt er als een doorzichtige laag overheen */
#login-scherm {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 9vh 24px 11vh;
  color: var(--tekst);
  text-align: center;
}
html[data-vergrendeld] #login-scherm { display: flex; }

.login-klok { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.login-tijd { font-size: 72px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.login-datum { font-size: 15px; font-weight: 700; color: var(--tekst2); }
.mb-sessie .badge { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

/* Beide stappen liggen in dezelfde grid-cel over elkaar: kruisvervagen zonder sprongetje in hoogte */
.login-stappen { position: relative; display: grid; justify-items: center; width: 100%; }
.login-stap {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  transition: opacity .3s ease, transform .35s cubic-bezier(.22, .9, .25, 1);
}
#login-scherm[data-stap="kiezen"] .login-stap-wachtwoord,
#login-scherm[data-stap="wachtwoord"] .login-stap-kiezen { opacity: 0; pointer-events: none; }
#login-scherm[data-stap="kiezen"] .login-stap-kiezen { transform: none; }
#login-scherm[data-stap="wachtwoord"] .login-stap-kiezen { transform: scale(.96); }
#login-scherm[data-stap="wachtwoord"] .login-stap-wachtwoord { transform: none; }
#login-scherm[data-stap="kiezen"] .login-stap-wachtwoord { transform: scale(1.04) translateY(6px); }

.login-titel { margin: 0 0 4px; font-size: 15px; font-weight: 800; letter-spacing: .02em; color: var(--tekst2); }

/* De namen zweven als een "dock", zoals de menubalk en de menu's */
.login-namen {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  max-width: 920px;
  padding: 14px;
  background: var(--menu-bg);
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .16), 0 0 0 1px rgba(255, 255, 255, .3) inset;
}
:root[data-theme="dark"] .login-namen { box-shadow: 0 20px 50px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .06) inset; }
.login-tegel {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 100px; padding: 16px 8px;
  color: var(--tekst);
  background: none;
  border: 2px solid transparent; border-radius: 16px;
  transition: background .15s, border-color .15s, transform .1s;
}
.login-tegel:hover { background: rgba(120, 120, 110, .12); }
.login-tegel:active { transform: scale(.96); }
.login-avatar, .login-avatar-groot {
  display: grid; place-items: center;
  border-radius: 99px;
  background: var(--kleur);
  font-weight: 800; color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
.login-avatar { width: 56px; height: 56px; font-size: 19px; }
.login-gedeeld .login-avatar { background: var(--tekst2); }
.login-gedeeld .login-avatar .ico { width: 26px; height: 26px; }
.login-avatar-groot { width: 76px; height: 76px; font-size: 25px; transition: transform .4s cubic-bezier(.22, .9, .25, 1); }
.login-naam { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; }
.login-naam-groot { font-size: 17px; font-weight: 800; }

.login-terug {
  display: flex; align-items: center; gap: 4px;
  margin-bottom: -4px;
  padding: 6px 10px 6px 6px;
  font-size: 13px; font-weight: 700; color: var(--tekst2);
  background: none; border: 0; border-radius: 8px;
}
.login-terug:hover { background: rgba(120, 120, 110, .12); color: var(--tekst); }
.login-terug .ico { width: 16px; height: 16px; }

.login-ww-kaart {
  position: relative;
  width: min(320px, 84vw);
  padding: 20px 22px 18px;
  background: var(--oppervlak);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .22), 0 0 0 1px rgba(255, 255, 255, .3) inset;
}
:root[data-theme="dark"] .login-ww-kaart { box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .06) inset; }
.login-ww-form .field { margin-bottom: 10px; }
.login-ww-form .btn { width: 100%; justify-content: center; margin-top: 4px; }

/* Op de lichte gradient (light) hoeft er niks bij; op de donkere (dark) net als de strook wat schaduw voor leesbaarheid */
:root[data-theme="dark"] .login-tijd,
:root[data-theme="dark"] .login-titel,
:root[data-theme="dark"] .login-naam,
:root[data-theme="dark"] .login-naam-groot { text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }

.menu {
  position: fixed;
  top: calc(var(--menubar-h) + 4px);
  left: 8px;
  z-index: 10001;
  min-width: 240px;
  padding: 5px;
  background: var(--menu-bg);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .2), 0 0 0 1px rgba(0, 0, 0, .06);
  color: var(--tekst);
}
.menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 5px 10px 5px 6px;
  text-align: left; background: none; border: 0; border-radius: 6px;
}
.menu button:hover, .menu button:focus-visible { color: var(--zwart); background: var(--geel); outline: none; }

/* Wachtwoordveld met een oogje (wwVeld in util.js) en de melding als Caps Lock aan staat */
.ww-veld { position: relative; }
.ww-veld input { padding-right: 38px; }
.ww-toon {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 30px; height: 30px; padding: 0;
  color: var(--tekst2); background: none; border: 0; border-radius: 6px;
}
.ww-toon:hover { color: var(--tekst); background: rgba(120, 120, 110, .12); }
.ww-toon .ico { width: 18px; height: 18px; }
.ww-caps { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--oranje); text-align: left; }
.ww-caps[hidden] { display: none; }
.menu-ico {
  flex: none;
  display: grid; place-items: center;
  width: 22px; height: 22px;
  font-size: 13px;
  color: #fff;
  border-radius: 6px;
}
/* App met een eigen logo (Teams, Zoho, Easy4u): het plaatje vult het icoontje */
.met-logo { background-size: cover; background-position: center; }
.menu-beheer[hidden] { display: none; }
.menu hr { border: 0; border-top: 1px solid var(--lijn); margin: 4px 6px; }

/* ---------- Stage Manager ---------- */

#windows {
  position: fixed;
  inset: var(--menubar-h) 0 0 0;
  z-index: 100;
  pointer-events: none;
}
#windows.geen-animatie .window { transition: none; }
/* Apps uit het menu die niet vooraan staan (wm.js, opbergen) */
.window[hidden] { display: none; }
/* Uit of in het driehoekje vliegen (wm.js, uitMenu/opbergen): boven de andere vensters, schalen vanaf linksboven */
.window.naar-menu, .window.uit-menu { z-index: 30 !important; transform-origin: 0 0; transition: none; }
.window.naar-menu { pointer-events: none; }
.window {
  position: absolute;
  overflow: hidden;
  pointer-events: auto;
  background: var(--oppervlak);
  color: var(--tekst);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
  transform-origin: 0 0;
  /* Alleen transform en opacity: die doet de videokaart. Schaduw en hoeken mee laten bewegen betekent elk beeldje het
     hele venster opnieuw tekenen, en dat hapert op oudere pc's. */
  transition: transform .4s cubic-bezier(.22, .9, .25, 1), opacity .3s;
}
/* Wat in een miniatuur beweegt (zoals het pulsje bij de scanner) staat stil: anders wordt die steeds opnieuw getekend */
.window.thumb * { animation-play-state: paused !important; }
/* Beginstand van het maximaliseren vastleggen, zonder animatie */
.window.schaalt { transition: none; }
.window.thumb {
  pointer-events: none;
  border-radius: 22px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .1);
}
.win-body { position: absolute; inset: 30px 0 0 0; overflow: auto; }

/* Balkje bovenaan met minimaliseren en maximaliseren; slepen of vergroten kan niet */
.win-balk {
  position: absolute; inset: 0 0 auto 0;
  z-index: 60;
  display: flex; align-items: center; gap: 6px;
  height: 30px;
  padding: 0 10px;
}
.win-knop {
  display: grid; place-items: center;
  width: 34px; height: 20px; padding: 0;
  font-size: 13px;
  color: var(--zacht-fg);
  background: var(--zacht-bg);
  border: 0; border-radius: 99px;
  transition: background .15s, color .15s, width .15s;
}
.win-knop .ico { stroke-width: 2.5; }
.win-knop:hover { width: 40px; color: var(--zwart); background: var(--geel); }
.win-knop:active { transform: scale(.92); }

/* Gemaximaliseerd: strook en miniaturen schuiven weg */
#stage-strip { transition: transform .4s cubic-bezier(.22, .9, .25, 1), opacity .3s; }
body.win-vol #stage-strip { transform: translateX(-100%); opacity: 0; pointer-events: none; }
body.win-vol .window.thumb { opacity: 0; }

/* Zoho Desk / Easy4u: de website ligt als eigen webview precies over .win-body */
.window.extern .win-body { overflow: hidden; background: var(--grijs); }
.ext-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0; }
.met-shot .ext-shot { opacity: 1; }
.met-shot .ext-leeg { display: none; }
.ext-leeg {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px;
  text-align: center;
  color: var(--tekst2);
  font-weight: 700;
}
.ext-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; color: #fff; font-size: 32px; }

#stage-strip {
  position: fixed;
  top: var(--menubar-h); bottom: 0; left: 0;
  z-index: 150;
  width: 210px;
}
.stage-slot {
  position: absolute; top: 0; left: 12px;
  /* Label bovenaan, direct boven de miniatuur: de plek zet wm.js met transform (soepeler dan top en hoogte animeren) */
  display: flex; align-items: flex-start;
  width: 186px;
  padding: 0;
  background: none; border: 0; border-radius: 14px;
  transition: transform .4s cubic-bezier(.22, .9, .25, 1), opacity .25s .15s, background .15s;
}
/* Nieuw in de strook: verschijnt als de miniatuur er (bijna) is; weg: meteen vervagen */
.stage-slot.nieuw, .stage-slot.weg { opacity: 0; pointer-events: none; }
.stage-slot.weg { transition: opacity .2s; }
.stage-slot:hover { background: var(--zacht-bg); }
/* De app vooraan houdt zijn plek: label blijft, op de plek van de miniatuur een lege omlijning (maat via wm.js) */
.stage-slot::after {
  content: '';
  position: absolute; top: 34px; left: 14px;
  width: var(--plek-b, 0); height: var(--plek-h, 0);
  border: 2px dashed var(--streep); border-radius: 22px;
  opacity: 0; transition: opacity .25s;
  pointer-events: none;
}
.stage-slot.actief { pointer-events: none; }
.stage-slot.actief:hover { background: none; }
.stage-slot.actief::after { opacity: 1; transition-delay: .2s; }
.stage-slot.actief .stage-label { opacity: .55; }
.stage-label { display: flex; align-items: center; gap: 7px; height: 34px; padding-left: 14px; font-size: 12px; font-weight: 700; color: var(--label); }
.stage-ico {
  flex: none;
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 7px;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

/* Sheet (paneel, in het midden van het scherm of van het venster) */
.sheet-backdrop {
  position: fixed; inset: 0;
  z-index: 500;
  display: flex; justify-content: center; align-items: center;
  background: rgba(29, 29, 27, .16);
}
.window .sheet-backdrop { position: absolute; }
.sheet {
  width: min(480px, 92%);
  max-height: 92%;
  overflow: auto;
  padding: 22px 24px 18px;
  background: var(--oppervlak);
  color: var(--tekst);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .25);
  animation: sheetIn .2s ease-out;
}
@keyframes sheetIn { from { transform: translateY(-16px) scale(.98); opacity: 0; } }
.sheet-actions { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.confirm-msg { margin: 4px 0 0; font-size: 15px; line-height: 1.45; }

/* ---------- Formulieren & knoppen ---------- */

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; min-width: 0; }
.field > label, .field > .label {
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--tekst2);
}
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea {
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  color: inherit;
  background: var(--oppervlak);
  border: 1px solid var(--lijn);
  border-radius: 8px;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
textarea { resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { border-color: var(--geel-d); box-shadow: 0 0 0 3px rgba(255, 204, 0, .4); }
input[type=checkbox], input[type=radio] { accent-color: var(--tekst); width: 16px; height: 16px; margin: 0; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row3 { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; }
.hint { margin: 0 0 12px; font-size: 13px; color: var(--tekst2); line-height: 1.45; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 4px; }
.form-actions.left { justify-content: flex-start; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px;
  font-weight: 700;
  color: inherit;
  background: var(--oppervlak);
  border: 0;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--lijn);
  white-space: nowrap;
}
.btn:hover { background: var(--grijs); }
.btn.primary { color: var(--zwart); background: var(--geel); box-shadow: none; }
.btn.primary:hover { background: var(--geel-d); }
.btn.dark { background: var(--zwart); color: #fff; box-shadow: none; }
.btn.dark:hover { background: #3a3a37; }
.btn.danger { color: var(--oranje); }
.btn.danger-fill { background: var(--oranje); color: #fff; box-shadow: none; }
.btn.small { padding: 5px 10px; font-size: 13px; }
.link { padding: 0; background: none; border: 0; font-weight: 700; color: var(--blauw); }
.link:hover { text-decoration: underline; }
.link.danger { color: var(--oranje); }
.icon-btn {
  display: grid; place-items: center;
  width: 30px; height: 30px; padding: 0;
  background: none; border: 0; border-radius: 8px;
  font-size: 18px;
}
.icon-btn:hover:not(:disabled) { background: var(--grijs); }

.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--grijs); border-radius: 9px; box-shadow: inset 0 0 0 1px var(--lijn); }
.seg button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  font-size: 13px; font-weight: 600;
  background: none; border: 0; border-radius: 7px;
}
.seg button.on { background: var(--oppervlak); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
.seg button i { width: 8px; height: 8px; border-radius: 50%; }
.seg small { color: var(--tekst2); font-weight: 700; }

.pill {
  padding: 5px 12px;
  font-size: 13px; font-weight: 600;
  background: var(--grijs);
  border: 1px solid var(--lijn);
  border-radius: 99px;
}
.pill:hover { border-color: var(--geel-d); }
.pill.on { color: var(--zwart); background: var(--geel); border-color: var(--geel); }


.avatar {
  flex: none;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
}
.avatar.small { width: 28px; height: 28px; font-size: 11px; }

.badge-status {
  padding: 2px 8px;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
  border-radius: 99px;
}
.badge-status.in { background: rgba(0, 153, 135, .12); color: var(--groen); }

.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 20px; text-align: center; color: var(--tekst2); }
.empty > .ico { width: 30px; height: 30px; opacity: .55; }

.table { width: 100%; border-collapse: collapse; }
.table th {
  padding: 8px 10px;
  text-align: left;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tekst2);
  border-bottom: 1px solid var(--lijn);
}
.table td { padding: 8px 10px; border-bottom: 1px solid var(--lijn); }
.table tr:hover td { background: var(--grijs); }
.row-actions { text-align: right; white-space: nowrap; }
.row-actions .link { margin-left: 12px; }

/* ---------- Quick Ticket ---------- */

.qt { padding: 26px 28px; }
.qt h2 { margin-bottom: 14px; }
.qt-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; }
.qt-type {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 24px 10px 20px;
  font-weight: 700; font-size: 15px; line-height: 1.25; text-align: center;
  background: var(--oppervlak);
  border: 2px solid var(--lijn);
  border-radius: 12px;
  transition: border-color .12s, background .12s;
}
.qt-type:hover { border-color: var(--geel-d); }
.qt-type.on { border-color: var(--tekst); background: var(--gekozen); }
.qt-type-ico {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 14px;
  color: #fff;
  font-size: 26px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.qt-form { padding-top: 18px; border-top: 1px solid var(--lijn); }
.qt-empty { margin: 0; }
/* Geheugensteuntje bij MFA en wachtwoord reset (notitie in TICKET_SOORTEN) */
.qt-notitie {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 14px; padding: 10px 14px;
  font-size: 13px; font-weight: 600; line-height: 1.45;
  background: rgba(255, 204, 0, .18); border-left: 4px solid var(--geel); border-radius: 8px;
}
.qt-notitie .ico { flex: none; margin-top: 1px; font-size: 16px; }
.suffix-input { display: flex; align-items: stretch; }
.suffix-input input { border-radius: 8px 0 0 8px !important; min-width: 0; }
.suffix-input span {
  display: flex; align-items: center;
  padding: 0 10px;
  font-size: 13px; color: var(--tekst2);
  background: var(--grijs);
  border: 1px solid var(--lijn); border-left: 0;
  border-radius: 0 8px 8px 0;
  white-space: nowrap;
}
.qt-summary {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin: 4px 0 16px; padding: 12px 14px;
  font-size: 13px;
  background: var(--grijs);
  border-radius: 10px;
}
.qt-summary dt { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--tekst2); }
.qt-summary dd { margin: 2px 0 0; font-weight: 600; }

/* ---------- Rooster (zelfde opmaak als de helpdesk-website) ---------- */

.rooster { padding: 20px 24px; }
.r-head { margin-bottom: 12px; }
.r-head .btn[hidden] { display: none; }
.r-datum { margin-left: 4px; font-size: 12px; font-weight: 600; color: var(--tekst2); }
.r-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; }
.r-legenda .badge { padding: 1px 8px; font-size: 11px; }
/* Alleen deze week erbij (bijv. een tussenuur): gestippelde rand; deze week niet: doorgestreept en vaag */
.badge.r-tijdelijk { outline: 2px dashed var(--tekst); outline-offset: 1px; }
.badge.r-weg { text-decoration: line-through; opacity: .4; }

.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
  color: #fff;
  white-space: nowrap;
}
.badge-blue { background: var(--blauw); }
.badge-orange { background: var(--oranje); }
.badge-magenta { background: var(--paars); }
.badge-teal { background: var(--groen); }
.badge-dark { background: var(--zwart); }
.badge-lime { background: var(--limoen); color: var(--zwart); }
.badge-lightblue { background: var(--lichtblauw); color: var(--zwart); }
.badge-red { background: #c8102e; }
.badge-yellow { background: var(--geel); color: var(--zwart); box-shadow: inset 0 0 0 1px rgba(29, 29, 27, .25); }

.schedule-table {
  width: calc(100% + 8px);
  margin: 0 -4px;
  border-collapse: separate;
  border-spacing: 4px;
  table-layout: fixed;
}
.schedule-table th,
.schedule-table td {
  padding: 10px;
  text-align: left;
  vertical-align: middle;
  border-radius: 4px;
}
.schedule-table thead th {
  font-weight: 800;
  font-size: 15px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--tekst);
  border-radius: 0;
}
.schedule-table thead th:first-child { width: 110px; }
.schedule-table thead th.is-today { border-bottom-color: var(--geel); }
.today-tag {
  display: inline-block;
  margin-left: 2px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 800;
  color: var(--zwart);
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: 2px;
  background: var(--geel);
  border-radius: 999px;
}
.schedule-table tbody th { font-weight: 700; background: var(--grijs); }
.row-period { display: block; }
.row-time { display: block; font-size: 12px; font-weight: 400; color: var(--tekst2); font-variant-numeric: tabular-nums; }
.schedule-table td {
  height: 72px;
  background: var(--grijs);
  cursor: pointer;
  transition: background .1s;
}
.schedule-table td:hover { background: var(--cel-hover); }
.schedule-table td.is-open { background: var(--open); box-shadow: inset 4px 0 0 var(--geel); }
.schedule-table td.is-open:hover { background: var(--open-hover); }
.schedule-table td.is-now { box-shadow: inset 0 0 0 2px var(--tekst); }
.schedule-table td.is-open.is-now { box-shadow: inset 4px 0 0 var(--geel), inset 0 0 0 2px var(--tekst); }
.cell-empty { color: var(--zwak); }
/* Uur van de andere bouw op een andere tijd: als los kaartje op de echte tijd over de tabel heen (plaatsLos in
   rooster.js), net als op het roosterscherm en de print. Overlapt het een vak met namen, dan één kaartje met iedereen. */
.r-tabel { position: relative; }
.r-los {
  position: absolute; z-index: 2;
  box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  min-height: 0; padding: 6px 10px; overflow: hidden;
  background: var(--open); border-left: 4px solid var(--geel); border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18), 0 0 0 1px rgba(29, 29, 27, .08);
  cursor: pointer; transition: background .1s;
}
.r-los:hover { background: var(--open-hover); }
.r-los.samen { box-shadow: 0 0 0 1px rgba(29, 29, 27, .08); }
.r-los .badges { gap: 4px; }
.r-ander-tijd { font-size: 11px; font-weight: 700; color: var(--tekst2); font-variant-numeric: tabular-nums; }
.break-row th,
.break-row td {
  height: auto;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tekst2);
  background: transparent !important;
  border: 1px dashed var(--lijn);
  cursor: default;
}

/* Afdrukblad van het rooster (Printen in de Rooster-app): alleen zichtbaar in de PDF. Altijd licht, dus vaste kleuren
   in plaats van de thema-variabelen; maten in mm zodat het precies op A4 liggend past. */
#afdruk { display: none; }
@media print {
  @page { size: A4 landscape; margin: 0; }
  html, body { height: auto !important; overflow: visible !important; background: #fff !important; }
  body > :not(#afdruk) { display: none !important; }
  #afdruk { display: block; }
}
.afd-blad {
  position: relative;
  display: flex; flex-direction: column; gap: 4mm;
  width: 297mm; height: 209mm; overflow: hidden;
  padding: 9mm 14mm 7mm;
  font-family: var(--font); color: #1d1d1b;
  background: #fff;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.afd-kop { display: flex; align-items: center; justify-content: space-between; }
.afd-logo { height: 10mm; }

.afd-rooster {
  position: relative;
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 28mm repeat(5, 1fr); gap: 1.5mm;
}
.afd-dag { padding: 0 3mm 1.8mm; font-size: 12pt; font-weight: 800; border-bottom: .8mm solid #1d1d1b; }
.afd-uur {
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 3mm;
  background: #f6f6f6; border-radius: 1.2mm;
}
.afd-uur b { font-size: 11pt; font-weight: 800; }
.afd-uur span, .afd-los small, .afd-pauze span { font-size: 8.5pt; color: #6b6b66; font-variant-numeric: tabular-nums; }
.afd-vak {
  display: flex; flex-direction: column; justify-content: center; gap: 1.2mm;
  padding: 1.2mm 3mm;
  background: #fff4c2; border-left: 1.2mm solid #ffcc00; border-radius: 1.2mm;
}
.afd-vak.leeg { background: #f6f6f6; border-left-color: #f6f6f6; }
.afd-vak .badges { gap: 1.2mm; }
.afd-vak .badge { padding: .3mm 2.6mm; font-size: 9.5pt; }
/* Uur van de onderbouw: los kaartje op de echte tijd (plaatsLos in rooster.js), ook over een pauze heen */
.afd-los {
  position: absolute; z-index: 1;
  box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; gap: .8mm;
  padding: 1mm 3mm;
  background: #fff4c2; border-left: 1.2mm solid #ffcc00; border-radius: 1.2mm;
  box-shadow: 0 .5mm 2mm rgba(0, 0, 0, .15), 0 0 0 .25mm rgba(29, 29, 27, .08);
}
.afd-los.samen { box-shadow: none; }
.afd-los .badges { gap: 1.2mm; }
.afd-los .badge { padding: .3mm 2.6mm; font-size: 9.5pt; }
.afd-los small { font-weight: 700; }
.afd-pauze {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 3mm;
  padding: .7mm 3mm;
  font-size: 8.5pt; color: #6b6b66;
  border: .25mm dashed #c9c9c4; border-radius: 1.2mm;
}

.afd-info { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; }
.afd-tip {
  display: flex; align-items: center; gap: 3.5mm;
  padding: 2mm 4mm;
  font-size: 9pt; line-height: 1.35; color: #6b6b66;
  border: .25mm solid #e3e3df; border-radius: 2mm;
}
.afd-tip .ico { flex: none; width: 5.5mm; height: 5.5mm; stroke-width: 2; }
.afd-tip b { display: block; font-size: 10pt; font-weight: 800; color: #1d1d1b; }
.afd-voet { display: flex; justify-content: space-between; font-size: 8pt; color: #6b6b66; }

.r-mensen { list-style: none; margin: 0; padding: 0; }
.r-mens { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--lijn); }
.r-mens .hint { margin: 0; }
.sheet h3 .sub { margin-left: 6px; font-weight: 400; color: var(--tekst2); font-size: 14px; }
.pick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pick-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 8px;
  border: 1px solid var(--lijn);
  border-radius: 99px;
  cursor: pointer;
}
.pick-item:has(input:checked) { border-color: var(--tekst); background: var(--grijs); }
.pick-item:not(:has(input:checked)) .badge { opacity: .45; }
.color-select { width: auto !important; padding: 4px 8px !important; font-size: 13px; }
.pas-input { width: 120px !important; padding: 4px 8px !important; font-size: 13px; font-variant-numeric: tabular-nums; }

/* ---------- Urenregistratie (beheer) ---------- */

.uren { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px; }
.u-tabel th .link { font: inherit; text-transform: inherit; letter-spacing: inherit; color: var(--tekst); }
.u-tabel .num { text-align: center; font-variant-numeric: tabular-nums; }
.u-tabel th:not(:first-child) { text-align: center; }
.u-tabel tfoot td { font-weight: 800; border-bottom: none; border-top: 2px solid var(--lijn); }
.u-tabel tr.u-nul td:not(:first-child) { color: var(--tekst2); }
.u-balk { width: 140px; }
.bar { display: block; height: 8px; background: var(--grijs); border-radius: 99px; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 99px; }

/* ---------- Urenlijst ---------- */

.ul { display: flex; flex-direction: column; gap: 18px; padding: 22px 26px; }
.ul-kop { display: flex; align-items: center; gap: 10px; }
.ul-kop .icon-btn .ico { width: 18px; height: 18px; }
.ul-titel { display: flex; flex-direction: column; min-width: 0; }
.ul-titel h2 { margin: 0; }
.ul-titel .hint { margin: 0; }
.ul-blokken { display: flex; flex-direction: column; gap: 6px; }
.ul-blok {
  display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 14px;
  width: 100%;
  padding: 10px 14px;
  text-align: left; font: inherit; color: inherit;
  background: var(--oppervlak);
  border: 1px solid var(--lijn);
  border-radius: 12px;
  cursor: pointer;
}
.ul-blok:hover:not(:disabled) { border-color: var(--tekst); }
.ul-blok:disabled { cursor: default; }
.ul-blok.pauze { padding-block: 6px; background: var(--grijs); border-style: dashed; }
.ul-blok.nu { border: 2px solid var(--geel-d); box-shadow: 0 0 0 4px rgba(255, 204, 0, .25); }
.ul-blok.voorbij:not(.nu) .ul-tijd { opacity: .6; }
.ul-tijd { display: flex; flex-direction: column; }
.ul-tijd small { color: var(--tekst2); font-variant-numeric: tabular-nums; }
.ul-namen { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ul-leeg { color: var(--tekst2); font-style: italic; }
.ul-rooster { color: var(--tekst2); }
.ul-waarde { display: flex; align-items: center; gap: 8px; color: var(--tekst2); font-weight: 700; white-space: nowrap; }
.ul-totaal h3 { margin-bottom: 8px; }
.ul-telling { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; }

/* Bloklabels, ook gebruikt in de Inklokken-widget */
.klok-blok-label {
  padding: 3px 12px;
  font-weight: 800;
  color: var(--zwart);
  background: var(--geel);
  border-radius: 99px;
}
.klok-blok-label.pauze { background: var(--lichtblauw); }
.klok-blok-tijd { font-weight: 700; font-variant-numeric: tabular-nums; }
.klok-scan {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px;
  border: 2px dashed var(--streep);
  border-radius: 16px;
}
.klok-scan[hidden] { display: none; }
.klok-scan b { display: block; font-size: 17px; }
.klok-scan span:not(.klok-scan-ico) { color: var(--tekst2); }
.klok-scan-ico {
  display: grid; place-items: center;
  flex: none;
  width: 46px; height: 46px;
  font-size: 26px;
  color: var(--zwart);
  background: var(--geel);
  border-radius: 14px;
  position: relative;
}
/* Pulsje als los laagje dat met transform en opacity beweegt: geen schaduw die elk beeldje opnieuw getekend wordt */
.klok-scan-ico::after {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: rgba(255, 204, 0, .45);
  border-radius: inherit;
  animation: scanPuls 2s ease-in-out infinite;
}
@keyframes scanPuls { 0%, 100% { transform: scale(1); opacity: 0; } 50% { transform: scale(1.35); opacity: 1; } }
.klok-team { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.klok-naam { padding: 4px; background: none; border: 2px solid transparent; border-radius: 99px; }
.klok-naam:hover { border-color: var(--lijn); }
.klok-naam:not(.in) .badge { opacity: .5; }
.sheet .klok-naam.in { border-color: var(--groen); }
.pick .klok-naam .badge { opacity: 1; }
.empty.small { flex-direction: row; align-items: flex-start; gap: 8px; padding: 10px 0; text-align: left; font-size: 13px; }
.empty.small > .ico { flex: none; width: 16px; height: 16px; margin-top: 1px; }

/* ---------- Instellingen ---------- */

.settings { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px; background: var(--grijs); min-height: 100%; }
.card { padding: 18px 20px; background: var(--oppervlak); border-radius: 12px; box-shadow: 0 0 0 1px var(--lijn); }
.card h2 { font-size: 17px; margin-bottom: 6px; }
.config-pad { margin: 0 0 12px; padding: 8px 12px; font-family: Consolas, monospace; font-size: 13px; background: var(--grijs); border-radius: 8px; user-select: text; overflow-wrap: anywhere; }
.team-list { list-style: none; margin: 0 0 12px; padding: 0; }
.team-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--lijn); }
.team-list li .icon-btn { width: 26px; height: 26px; font-size: 14px; }
.inline-form { display: flex; gap: 8px; }
.form-actions label.btn { cursor: pointer; }

.about { display: flex; flex-direction: column; align-items: center; padding: 12px 8px 4px; text-align: center; }
.about img { height: 42px; margin-bottom: 22px; }
.about h2 { margin: 0; }
.about .serif { margin: 4px 0 16px; font-family: var(--serif); font-style: italic; font-size: 17px; }

/* ---------- Meldingen ---------- */

#toasts {
  position: fixed;
  right: 16px; bottom: 16px;
  /* Boven alles, ook boven menu's en panelen (ingebouwde websites liggen er altijd over: zie toonExtern in wm.js) */
  z-index: 2147483647;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 420px; max-height: 200px; overflow: hidden;
  padding: 10px 16px 10px 14px;
  background: rgba(29, 29, 27, .92); color: #fff;
  border-left: 4px solid var(--geel);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  animation: toastIn .2s ease-out;
  transition: opacity .3s, transform .3s, max-height .3s .1s, padding .3s .1s, margin .3s .1s;
}
.toast > .ico { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--geel); }
.toast-ok > .ico { color: #3ccfb9; }
.toast-error > .ico { color: #ff8a5c; }
.toast-ok { border-left-color: var(--groen); }
.toast-error { border-left-color: var(--oranje); }
.toast.out { opacity: 0; transform: translateX(12px); max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: -8px; }
@keyframes toastIn { from { opacity: 0; transform: translateX(24px); } }

/* ---------- Kleinere schermen ---------- */

@media (max-width: 760px) {
  .row2 { grid-template-columns: 1fr; gap: 0; }
}

/* Windows' "animaties uit" wordt genegeerd als data-forceer-animaties staat (Beheer > Instellingen, zie store.js) */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-forceer-animaties]) *,
  :root:not([data-forceer-animaties]) *::before,
  :root:not([data-forceer-animaties]) *::after { animation: none !important; transition: none !important; }
}

/* ---------- Inklokken (widget op het bureaublad) ---------- */

/* Rechtsboven op het bureaublad, onder de vensters. Alleen te zien als niets vooraan staat (body.op-bureaublad, wm.js);
   in- en uitfaden met alleen opacity en transform, zodat het licht blijft op oudere pc's. */
.widget {
  position: fixed;
  top: calc(var(--menubar-h) + 24px); right: 24px;
  z-index: 50;
  display: flex; flex-direction: column;
  width: 460px; max-height: calc(100vh - var(--menubar-h) - 48px);
  overflow: hidden;
  color: var(--tekst);
  background: var(--menu-bg);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .16), 0 0 0 1px rgba(255, 255, 255, .3) inset;
  opacity: 0; transform: scale(.96) translateY(-8px); transform-origin: top right;
  pointer-events: none; visibility: hidden;
  transition: opacity .2s, transform .25s cubic-bezier(.22, .9, .25, 1), visibility 0s .25s;
}
:root[data-theme="dark"] .widget { box-shadow: 0 20px 50px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .06) inset; }
body.op-bureaublad .widget {
  opacity: 1; transform: none;
  pointer-events: auto; visibility: visible;
  transition: opacity .25s .1s, transform .35s .1s cubic-bezier(.22, .9, .25, 1), visibility 0s;
}

.ik { display: flex; flex-direction: column; gap: 14px; min-height: 0; padding: 20px 20px 16px; overflow-y: auto; }
.ik h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; }
.ik h2 .ico { color: var(--geel-d); }
.ik-blok { display: flex; align-items: baseline; gap: 10px; }
.ik-blok .hint { margin: 0; }
.ik .klok-team { margin: 0; }
.ik .klok-naam.in { border-color: var(--groen); }
.ik-voet { display: flex; justify-content: flex-end; }

/* ---------- Printen: downloads naast uniFLOW ---------- */

.window.extern .win-body:has(.ext-paneel) { display: flex; }
.ext-paneel {
  position: relative;
  flex: none; width: 420px;
  overflow: hidden auto;
  background: var(--oppervlak);
  border-right: 1px solid var(--lijn);
  transition: width .4s cubic-bezier(.22, .9, .25, 1);
}
.dl-inhoud { width: 420px; transition: opacity .25s, transform .4s cubic-bezier(.22, .9, .25, 1); }
/* Niet op de printpagina van uniFLOW: geen paneel */
.paneel-dicht .ext-paneel { width: 0; border-right-width: 0; }
.paneel-dicht .dl-inhoud { opacity: 0; transform: translateX(-60px); pointer-events: none; }
.ext-web { position: relative; flex: 1; min-width: 0; }
.dl-kop { padding: 20px 20px 8px; }
.dl-kop h3 { margin-bottom: 6px; }
.dl-kop .hint { margin: 0; }
.dl-lijst { list-style: none; margin: 0; padding: 0 12px 16px; }
.dl-lijst .empty.small { padding: 10px 8px; }
.dl-item { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 10px 8px; border-bottom: 1px solid var(--lijn); }
.dl-soort {
  display: grid; place-items: center;
  width: 38px; height: 44px;
  font-size: 10px; font-weight: 800;
  color: var(--tekst);
  background: var(--grijs);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--lijn);
}
.dl-tekst { display: flex; flex-direction: column; min-width: 0; }
.dl-tekst b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.dl-tekst small { color: var(--tekst2); }
.dl-item .btn .ico { width: 14px; height: 14px; }
.dl-weg { color: var(--tekst2); opacity: .5; font-size: 16px; }
.dl-weg:hover { opacity: 1; }

/* ---------- Bestanden: Instructies, Downloads en USB-sticks ---------- */

.bv { display: flex; height: 100%; min-height: 0; }
.bv-plekken {
  display: flex; flex-direction: column; gap: 2px;
  flex: none; width: 210px; padding: 16px 10px;
  overflow-y: auto;
  background: var(--grijs);
  border-right: 1px solid var(--lijn);
}
.bv-plekken h4 { margin: 18px 10px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--tekst2); }
.bv-plekken .hint { margin: 0 10px; font-size: 12px; }
.bv-plek {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  font-weight: 700; text-align: left; color: var(--tekst);
  background: none; border: 0; border-radius: 8px;
}
.bv-plek span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bv-plek .ico { flex: none; width: 18px; height: 18px; color: var(--tekst2); }
.bv-plek:hover { background: var(--oppervlak); }
.bv-plek.on { background: var(--oppervlak); box-shadow: 0 0 0 1px var(--lijn); }
.bv-plek.on .ico { color: #c98a1b; }
/* Instructies is de hoofdzaak: groter en altijd bovenaan */
.bv-plek[data-plek="instructies"] { padding: 12px 10px; font-size: 15px; }
.bv-lijstkant {
  display: flex; flex-direction: column;
  flex: none; width: 400px; min-height: 0;
  background: var(--oppervlak);
  border-right: 1px solid var(--lijn);
}
.bv-kop { display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 8px; }
.bv-titel { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bv-titel h2 { margin: 0; font-size: 20px; }
.bv-titel .btn .ico { width: 14px; height: 14px; }
.bv-zoek { width: 100%; }
.bv-zoek-groot { padding: 12px 14px; font-size: 16px; }
.bv-groepen { align-self: flex-start; }
.bv-pad { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; }
.bv-pad .ico { width: 12px; height: 12px; color: var(--tekst2); }
.bv-lijst { flex: 1; overflow: hidden auto; }
.bv-mapico .ico, .bv-instructie .ico { width: 18px; height: 18px; }
.bv-mapico { color: #c98a1b; }
.bv-instructie { color: var(--blauw); }
.bv-knoppen { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-left: auto; }
.bv-print { padding: 10px 18px; font-size: 15px; }
.bv-print .ico { width: 16px !important; height: 16px !important; }
.bv-bewerk-rij { display: flex; gap: 12px; }
.bv-bewerk-rij .grow { flex: 1; }
.bv-bewerk textarea { width: 100%; min-height: 300px; font: 14px/1.5 ui-monospace, Consolas, monospace; resize: vertical; }

/* ---------- Instructieblad ----------
   Op het scherm een vel papier (A4-verhouding) op een grijze ondergrond, in de PDF een A4 staand. Altijd licht en met
   vaste kleuren (huisstijl: teal voor leerlingen, donkerblauw voor het team), net als het afdrukblad van het rooster. */
.bv-inhoud:has(.ib-vel) { background: #e9e8e4; }
:root[data-theme="dark"] .bv-inhoud:has(.ib-vel) { background: #2a2a28; }
.ib-vel { padding: 28px 24px 48px; }
.ib-vel .ib {
  max-width: 794px; min-height: 1123px; /* A4 bij 96 dpi */
  margin: 0 auto; padding: 56px 64px 40px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 12px 32px rgba(0, 0, 0, .12);
}
.ib {
  --ib-kleur: #009987;
  display: flex; flex-direction: column;
  color: #1d1d1b;
  font-size: 15px; line-height: 1.6;
}
.ib-team { --ib-kleur: #0074ae; }
.ib-kop { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 2px solid #1d1d1b; }
.ib-logo { height: 40px; }
.ib-kop-tekst { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.ib-kop-tekst b { font-size: 15px; }
.ib-kop-tekst span { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #6b6b66; }
.ib-band {
  align-self: flex-start;
  margin-top: 26px; padding: 4px 12px;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: var(--ib-kleur);
  border-radius: 3px;
}
.ib-titel { margin: 12px 0 22px; font-size: 32px; line-height: 1.15; letter-spacing: -.01em; color: #1d1d1b; }
.ib-tekst { flex: 1; }
.ib-tekst h2 {
  margin: 28px 0 12px; padding-bottom: 6px;
  font-size: 18px; color: var(--ib-kleur);
  border-bottom: 1px solid #dcdcd8;
}
.ib-tekst h3 { margin: 20px 0 8px; font-size: 15px; }
.ib-tekst p { margin: 0 0 12px; }
.ib-tekst ul { margin: 0 0 14px; padding-left: 22px; }
.ib-tekst ul li { margin-bottom: 5px; }
.ib-tekst ul li::marker { color: var(--ib-kleur); }
.ib-tekst code { padding: 1px 6px; font-size: .9em; background: #f0efeb; border: 1px solid #dcdcd8; border-radius: 4px; }
/* Genummerde stappen: een gekleurd rondje met het nummer, de tekst ernaast */
.ib-stappen { margin: 4px 0 18px; padding: 0; list-style: none; counter-reset: stap; }
.ib-stappen li {
  position: relative;
  display: flex; gap: 14px;
  margin-bottom: 12px; min-height: 30px;
  counter-increment: stap;
  break-inside: avoid;
}
.ib-stappen li::before {
  content: counter(stap);
  flex: none;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  font-weight: 800; font-size: 14px;
  color: #fff; background: var(--ib-kleur);
  border-radius: 50%;
}
.ib-stappen li > span { padding-top: 3px; }
.ib-kader {
  margin: 4px 0 16px; padding: 12px 16px;
  background: #f4f4f1;
  border-left: 4px solid #9a9a94;
  border-radius: 0 6px 6px 0;
  break-inside: avoid;
}
.ib-kader p { margin: 0; }
.ib-kader-label { display: block; margin-bottom: 2px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.ib-kader.letop { background: #fdf0e9; border-left-color: #e74310; }
.ib-kader.letop .ib-kader-label { color: #c33a0d; }
.ib-kader.tip { background: #e8f3f9; border-left-color: #0074ae; }
.ib-kader.tip .ib-kader-label { color: #0074ae; }
/* Afbeelding (schermafbeelding, foto) met bijschrift */
.ib-fig { margin: 8px 0 18px; text-align: left; break-inside: avoid; }
.ib-fig img { display: block; }
/* Afbeelding bij een stap: onder de tekst van die stap, niet onder het rondje */
.ib-fig-stap { margin: -4px 0 14px 44px; }
.ib-fig img { max-width: 100%; max-height: 520px; border: 1px solid #dcdcd8; border-radius: 4px; }
.ib-fig figcaption { margin-top: 6px; font-size: 13px; font-style: italic; color: #6b6b66; }
.ib-fig-mist { display: inline-block; padding: 10px 14px; font-size: 13px; color: #c33a0d; background: #fdf0e9; border-radius: 4px; }
.bv-tekst-label { display: flex; align-items: center; justify-content: space-between; }
.bv-tekst-label .btn .ico { width: 14px; height: 14px; }
.bv-vink { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; font-size: 14px; }
.ib-tabel { width: 100%; margin: 4px 0 16px; border-collapse: collapse; font-size: 14px; }
.ib-tabel td { padding: 6px 10px; vertical-align: top; border: 1px solid #dcdcd8; }
.ib-voet {
  display: flex; justify-content: space-between; gap: 20px;
  margin-top: 36px; padding-top: 12px;
  font-size: 12px; color: #6b6b66;
  border-top: 1px solid #dcdcd8;
}
/* Word-voorbeeld: alleen de tekst, zonder kop en voet */
.ib-docx .ib { min-height: 0; }
.bv-docx-hint { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 24px 0; font-size: 13px; color: var(--tekst2); }
.bv-docx-hint .ico { width: 16px; height: 16px; flex: none; }
.bv-titel-knoppen { display: flex; gap: 6px; }

/* Pdf/Word toevoegen */
.bv-toe { display: flex; flex-direction: column; gap: 10px; }
.bv-toe-rij { display: flex; align-items: center; gap: 12px; }
.bv-toe-rij .qm-label { width: 40px; }
.bv-toe-rij .seg .ico { width: 14px; height: 14px; }
.bv-toe-lijst { max-height: 46vh; overflow-y: auto; padding: 0; border-top: 1px solid var(--lijn); }
.bv-toe-item { grid-template-columns: auto 1fr auto; }

@media print {
  /* A4 staand; de marges zitten in de pagina, het blad zelf heeft er geen */
  @page staand { size: A4 portrait; margin: 16mm 18mm 14mm; }
  #afdruk.staand { page: staand; }
  #afdruk .ib { min-height: calc(297mm - 30mm); font-size: 11pt; }
  #afdruk .ib, #afdruk .ib * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.bv-item { grid-template-columns: auto 1fr; cursor: pointer; border-radius: 8px; }
.bv-item:hover { background: var(--grijs); }
.bv-item.on { background: var(--grijs); box-shadow: inset 3px 0 0 var(--blauw); }
.bv-voet { margin: 0; padding: 10px 20px 16px; border-top: 1px solid var(--lijn); }
.bv-voorbeeld { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.bv-info { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-bottom: 1px solid var(--lijn); }
.bv-info .dl-tekst { min-width: 0; }
.bv-info .btn .ico { width: 14px; height: 14px; }
.bv-inhoud { position: relative; flex: 1; min-height: 0; overflow: auto; }
.bv-pdf { display: block; width: 100%; height: 100%; border: 0; }
.bv-beeld { display: block; max-width: calc(100% - 48px); max-height: calc(100% - 48px); margin: 24px auto; object-fit: contain; }
.bv-tekst { margin: 0; padding: 20px; font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.bv-leeg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100%; min-height: 200px; color: var(--tekst2); }
.bv-leeg .ico { width: 40px; height: 40px; opacity: .5; }

/* ---------- Snelle instellingen ---------- */

.quick-menu { left: auto; right: 8px; width: 270px; }
.qm-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; }
.qm-label { font-size: 13px; font-weight: 700; }
.qm-net { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--groen); }
.qm-net .ico { width: 16px; height: 16px; }
.qm-net.uit { color: var(--oranje); }
.quick-menu .seg { flex: none; }
.quick-menu .seg button { width: auto; flex: 1; justify-content: center; }

/* ---------- Donker uiterlijk: kleuraccenten die geen simpele variabele-omwisseling zijn ----------
   Let op: dit zijn steeds dekkende (niet-doorzichtige) kleuren. De vakken liggen naast elkaar
   (.schedule-table td); een doorzichtige achtergrond laat dan zien wat eronder ligt en oogt kapot. */

:root[data-theme="dark"] .stage-label { text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }

/* ---------- Afwerking: focus, indrukken, schuifbalken, panelen, velden, laden ---------- */

/* Focusrand alleen met het toetsenbord (niet na een klik), overal dezelfde */
:focus:not(:focus-visible) { outline: none; }
.btn:focus-visible, .icon-btn:focus-visible, .qt-type:focus-visible, .login-tegel:focus-visible, .login-terug:focus-visible,
.klok-naam:focus-visible, .ul-blok:focus-visible, .stage-slot:focus-visible, .mb-btn:focus-visible, .win-knop:focus-visible,
.schedule-table td:focus-visible, .seg button:focus-visible, .link:focus-visible {
  outline: 3px solid rgba(0, 116, 174, .55); outline-offset: 2px;
}
.mb-btn:focus-visible { outline-color: var(--geel); outline-offset: -1px; }

/* Indrukken: alles wat je aantikt geeft even mee */
.btn, .icon-btn, .qt-type, .klok-naam, .ul-blok, .mb-btn, .seg button, .login-terug, .ww-toon { transition-property: background, border-color, color, box-shadow, transform; transition-duration: .15s, .15s, .15s, .15s, .08s; }
.btn:active:not(:disabled), .icon-btn:active:not(:disabled), .qt-type:active, .klok-naam:active, .ul-blok:active:not(:disabled),
.mb-btn:active, .seg button:active, .login-terug:active, .ww-toon:active { transform: scale(.97); }

/* Schuifbalken: smal en in de huisstijl, ook in donker */
* { scrollbar-width: thin; scrollbar-color: var(--streep) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--streep); border: 3px solid transparent; border-radius: 99px; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--zacht-fg); }

/* Panelen: net zo rustig weg als ze binnenkomen (wm.js, paneel) */
.sheet-backdrop { animation: vervaagIn .16s ease-out; }
.sheet-backdrop.sluit { animation: vervaagUit .16s ease-in forwards; }
.sheet-backdrop.sluit .sheet { animation: sheetUit .16s ease-in forwards; }
@keyframes vervaagIn { from { opacity: 0; } }
@keyframes vervaagUit { to { opacity: 0; } }
@keyframes sheetUit { to { transform: translateY(-10px) scale(.98); opacity: 0; } }

/* Fout bij een veld (veldFout in util.js): rode rand en de uitleg eronder */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--fout) !important; box-shadow: 0 0 0 3px rgba(231, 67, 16, .18) !important;
}
.veld-fout { display: block; font-size: 12px; font-weight: 700; color: var(--fout); }
/* Naam toevoegen (Instellingen): de uitleg komt onder het veld, de knop blijft ernaast */
.inline-form:has(.veld-fout) { flex-wrap: wrap; }
.inline-form:has(.veld-fout) > input { flex: 1 1 0; min-width: 0; }
.inline-form .veld-fout { flex-basis: 100%; order: 3; }

/* Laadrondje (inloggen, lijsten die laden) */
.laad-rondje {
  display: inline-block; flex: none; width: 14px; height: 14px; vertical-align: -2px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: draai .7s linear infinite;
}
@keyframes draai { to { transform: rotate(360deg); } }

/* Een website laadt (embed.rs → wm.js): het vernieuwen-icoon draait en er loopt een streepje onder de balk */
.window.laadt [data-win="vernieuwen"] .ico { animation: draai .9s linear infinite; }
.window.extern .win-balk::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--geel), transparent); background-size: 40% 100%; background-repeat: no-repeat;
  opacity: 0; transition: opacity .2s;
}
.window.extern.laadt .win-balk::after { opacity: 1; animation: laadStreep 1.1s ease-in-out infinite; }
@keyframes laadStreep { from { background-position: -40% 0; } to { background-position: 140% 0; } }
/* Openen mislukt: een kaartje met de reden en Opnieuw proberen */
.ext-leeg.fout .ext-tekst { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ext-leeg.fout .ext-tekst small { font-weight: 600; color: var(--tekst2); }
.ext-leeg.fout .ext-tekst .btn { margin-top: 8px; }
.ext-leeg.fout .ext-ico { filter: grayscale(.6); opacity: .7; }

/* ---------- Inlogscherm: fout, bezig en de overgang naar het bureaublad ---------- */
.login-ww-kaart.schud { animation: schud .4s cubic-bezier(.36, .07, .19, .97); }
@keyframes schud { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.login-ww-form input[aria-invalid="true"] { border-color: var(--fout); }
#login-scherm.bezig .login-namen, #login-scherm.bezig .login-terug { pointer-events: none; opacity: .6; transition: opacity .2s; }
#login-scherm.vervaagt { display: flex; transition: opacity .3s ease; }
#login-scherm.vervaagt.weg { opacity: 0; pointer-events: none; }
.login-tegel:focus-visible { background: rgba(120, 120, 110, .12); }

/* ---------- Quick Ticket: niet over de hele breedte, en de lege stand ---------- */
.qt { max-width: 1120px; margin: 0 auto; }
.qt-form > .empty { padding: 48px 20px; }
.qt-optioneel { margin: -4px 0 12px; }
/* In donker valt een donker icoon (Quick overig) anders weg tegen de tegel */
:root[data-theme="dark"] .qt-type-ico { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
:root[data-theme="dark"] .badge-dark { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }

/* ---------- Menubalk ---------- */
/* De urenlijst-knop: laat zien dat je erop kunt klikken */
#presence-pill .mb-pijl { width: 14px; height: 14px; margin: 0 6px 0 -2px; opacity: .35; transition: opacity .15s, transform .15s; }
#presence-pill:hover .mb-pijl { opacity: .9; transform: translateX(2px); }
/* Donker: de menubalk loopt zacht over in het bureaublad in plaats van een harde rand */
:root[data-theme="dark"] #menubar { background: rgba(22, 22, 20, .9); border-bottom-color: rgba(255, 255, 255, .05); box-shadow: 0 6px 24px rgba(0, 0, 0, .28); }

/* Foutmelding onder het wachtwoord: in de foutkleur, niet als gewone tekst */
.login-ww-fout { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--fout); }

/* ---------- Koppelen met de server (eenmalig het adres en het token, zie server.js) ---------- */

.koppel-scherm {
  position: fixed; inset: 0; z-index: 20000;
  display: grid; place-items: center;
  padding: 24px;
  overflow: auto;
}
.koppel-kaart {
  display: flex; flex-direction: column;
  width: min(420px, 100%);
  padding: 28px 26px 24px;
  background: var(--oppervlak);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .18), 0 0 0 1px var(--lijn);
}
/* Zolang er gekoppeld moet worden: niets anders (het inlogscherm zou er anders half doorheen schijnen) */
body:has(> .koppel-scherm) > :not(.koppel-scherm):not(script):not(#toasts) { visibility: hidden; }
.koppel-logo { align-self: flex-start; height: 34px; margin-bottom: 18px; }
.koppel-kaart h1 { margin: 0 0 8px; font-size: 22px; }
.koppel-kaart .btn { margin-top: 6px; padding: 11px 16px; }
.koppel-fout { margin: 0 0 10px; color: var(--fout); }