/* Navstar Werkplek — demo v3.0 (07-11-2026)
   Opbouw als Exact Online: menu bovenin met uitklapbare schermen, open tabs, paginatitel met knoppen rechts,
   witte panelen met tabellen. Kleuren als de Navstar Portal: blauwe balk, wit en lichtgrijs, blauw als enige actiekleur.
   Vaste hoogtes en vaste kolommen overal; status als kleurstip + woord. */
* { box-sizing: border-box; margin: 0; }
:root {
  --blauw: #0088ca; --blauw-donker: #006a9a; --blauw-licht: #e6f3fa; --blauw-zacht: #f3f8fb;
  --oranje: #ff9421; --inkt: #1b2733; --inkt-zacht: #526273; --inkt-mist: #8a97a5;
  --rand: #d6dde5; --rand-zacht: #e7ebf0; --wit: #fff; --canvas: #f2f4f7; --kopgrijs: #f5f7f9;
  --goed: #15803d; --fout: #b91c1c; --let-op: #b45309;
  --kop: "Outfit", "Segoe UI", sans-serif; --tekst: "Inter", "Segoe UI", sans-serif;
  --balk: 56px; --tabbalk: 44px; --knop: 36px; --knopvast: 132px; --rij: 46px;
}
html { font-size: 15px; }
body { font-family: var(--tekst); color: var(--inkt); background: var(--canvas); line-height: 1.4; -webkit-font-smoothing: antialiased; overflow: hidden; height: 100vh; }
h1, h2 { font-family: var(--kop); font-weight: 700; letter-spacing: -.01em; }
a { color: var(--blauw-donker); text-decoration: none; }
button { font-family: var(--tekst); cursor: pointer; border: 0; background: none; color: inherit; font-size: inherit; }
[hidden] { display: none !important; }
.stip { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--inkt-mist); flex-shrink: 0; vertical-align: 0; }
.stip.groen { background: var(--goed); } .stip.rood { background: var(--fout); } .stip.oranje { background: var(--oranje); } .stip.blauw { background: var(--blauw); }
.goed { color: var(--goed); } .fout { color: var(--fout); } .let-op { color: var(--let-op); } .zacht { color: var(--inkt-zacht); } .mist { color: var(--inkt-mist); }
.rechts { text-align: right; }
.num { font-variant-numeric: tabular-nums; }

/* ======================= Bovenbalk met menu ======================= */
.balk { height: var(--balk); background: var(--blauw); color: var(--wit); display: flex; align-items: center; padding: 0 1.6rem 0 1.4rem; position: relative; z-index: 40; }
.balk-logo { height: 26px; width: auto; display: block; margin-right: 2rem; }
.menu { display: flex; align-items: stretch; height: 100%; }
.menu-item { position: relative; height: 100%; display: flex; align-items: center; }
.menu-item > button { height: 100%; padding: 0 1rem; font-size: 1rem; font-weight: 600; color: rgba(255,255,255,.92); border-bottom: 3px solid transparent; border-top: 3px solid transparent; }
.menu-item > button:hover, .menu-item.open > button { background: rgba(255,255,255,.12); color: var(--wit); }
.menu-item.actief > button { border-bottom-color: var(--wit); color: var(--wit); }
.balk-rechts { margin-left: auto; display: flex; align-items: center; gap: 1.2rem; }
.kijkals { display: flex; align-items: center; height: 36px; border-radius: 4px; background: rgba(255,255,255,.14); color: var(--wit); padding: 0 .3rem 0 .9rem; font-size: .9rem; font-weight: 600; gap: .4rem; white-space: nowrap; }
.kijkals select { height: 30px; border: 0; border-radius: 4px; background: transparent; color: var(--wit); font: 600 .9rem var(--tekst); padding: 0 .4rem; cursor: pointer; }
.kijkals select option { color: var(--inkt); }
.kijkals.actief { background: var(--let-op); color: var(--wit); }
:root[data-kleur="wit"] .kijkals { background: var(--canvas); color: var(--inkt); border: 1px solid var(--rand); }
:root[data-kleur="wit"] .kijkals select { color: var(--inkt); }
:root[data-kleur="wit"] .kijkals.actief { background: var(--let-op); color: var(--wit); border-color: var(--let-op); }
:root[data-kleur="wit"] .kijkals.actief select { color: var(--wit); }
:root[data-stijl="modern"] .kijkals, :root[data-stijl="modern"] .kijkals select { border-radius: 999px; }
.kijkband { display: flex; align-items: center; gap: 1rem; height: 44px; padding: 0 1.6rem; background: #fff4e5; color: var(--inkt); border-bottom: 1px solid var(--rand); font-size: .95rem; }
.kijkband b { color: var(--let-op); }
.kijkband form { margin-left: auto; }
.zoekknop { width: 340px; height: 36px; border-radius: 4px; background: var(--wit); color: var(--inkt-mist); display: flex; align-items: center; gap: .6rem; padding: 0 .8rem; font-size: .95rem; }
.zoekknop svg { width: 16px; height: 16px; color: var(--inkt-zacht); }
.zoekknop kbd { margin-left: auto; font-family: var(--tekst); font-size: .7rem; border: 1px solid var(--rand); border-radius: 3px; padding: 0 .4rem; color: var(--inkt-mist); }
.balk-gebruiker { display: flex; align-items: center; gap: .7rem; font-weight: 600; font-size: .97rem; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; color: var(--wit); background: var(--oranje); }

/* ======================= Tabs ======================= */
.tabs { height: var(--tabbalk); display: flex; align-items: flex-end; gap: 3px; padding: 0 1.6rem; background: #e3e8ed; border-bottom: 1px solid var(--rand); overflow-x: auto; overflow-y: hidden; }
.tabs::-webkit-scrollbar { height: 0; }
.tab { height: 36px; display: flex; align-items: center; gap: .55rem; padding: 0 .5rem 0 .95rem; border-radius: 4px 4px 0 0; font-size: .95rem; font-weight: 600; color: var(--inkt-zacht); background: #d2d9e0; white-space: nowrap; }
.tab:hover { background: #eef1f4; color: var(--inkt); }
.tab.actief { background: var(--wit); color: var(--inkt); box-shadow: inset 0 3px 0 var(--blauw); }
.tab .tab-soort { font-size: .72rem; font-weight: 700; color: var(--inkt-mist); text-transform: uppercase; letter-spacing: .05em; }
.tab.actief .tab-soort { color: var(--blauw-donker); }
.tab .pin, .tab .sluit { width: 22px; height: 22px; border-radius: 3px; display: flex; align-items: center; justify-content: center; color: var(--inkt-mist); }
.tab .pin:hover, .tab .sluit:hover { background: var(--rand-zacht); color: var(--inkt); }
.tab .pin { display: none; }
.tab:hover .pin, .tab.actief .pin, .tab.gepind .pin { display: flex; }
.tab.gepind .pin { color: var(--blauw); }
.tab.gepind .pin svg { fill: var(--blauw-licht); }
.tab.gepind .sluit { display: none; }
.tab .pin svg { width: 14px; height: 14px; }
.tab .sluit svg { width: 12px; height: 12px; }
.tab.vast .sluit, .tab.vast .pin { display: none; }
.tab.vast { padding-right: .95rem; }

/* ======================= Zijmenu + werkvlak ======================= */
.schil { height: calc(100vh - var(--balk) - var(--tabbalk)); display: flex; }
.zijmenu { width: 250px; flex-shrink: 0; background: var(--wit); border-right: 1px solid var(--rand); overflow-y: auto; padding: .4rem 0 1rem; }
.zijmenu::-webkit-scrollbar { width: 0; }
.zij-titel { font-family: var(--kop); font-weight: 700; font-size: 1.15rem; height: 52px; display: flex; align-items: center; padding: 0 1.2rem; border-bottom: 1px solid var(--rand-zacht); margin-bottom: .3rem; }
.zij-blok { border-bottom: 1px solid var(--rand-zacht); }
.zij-sub { width: 100%; text-align: left; height: 42px; padding: 0 1.2rem; font-size: .97rem; font-weight: 600; color: var(--inkt); display: flex; align-items: center; white-space: nowrap; }
.zij-sub:hover { background: var(--blauw-zacht); color: var(--blauw-donker); }
.zij-sub.actief { color: var(--blauw-donker); box-shadow: inset 3px 0 0 var(--blauw); }
.zij-sub.heeft-meer::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 2px solid var(--inkt-mist); border-bottom: 2px solid var(--inkt-mist); transform: rotate(45deg) translateY(-2px); }
.zij-blok.open .zij-sub.heeft-meer::after { transform: rotate(-135deg) translateY(-2px); }
.zij-groepen { padding: .2rem 0 .6rem; background: var(--kopgrijs); border-top: 1px solid var(--rand-zacht); }
.zij-kop { height: 30px; display: flex; align-items: center; padding: .3rem 1.2rem 0 1.2rem; font-size: .8rem; font-weight: 700; color: var(--inkt-mist); text-transform: uppercase; letter-spacing: .05em; }
.zij-groep { height: 30px; display: flex; align-items: flex-end; padding: 0 1.2rem .3rem; margin-top: .9rem; font-size: .76rem; font-weight: 700; color: var(--inkt-mist); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zij-titel + .zij-groep { margin-top: .2rem; }
.zij-item { width: 100%; text-align: left; height: 34px; padding: 0 1.2rem 0 1.6rem; font-size: .95rem; color: var(--inkt); display: flex; align-items: center; white-space: nowrap; }
.zij-item:hover { color: var(--blauw-donker); background: var(--blauw-licht); }
.zij-item .aantal { margin-left: auto; font-weight: 700; color: var(--let-op); font-size: .88rem; }
.werkvlak { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.scherm { flex: 1; min-height: 0; overflow-y: auto; padding: 1.4rem 1.6rem 3rem; transform: translateZ(0); }

.paginakop { display: flex; align-items: center; height: 44px; margin-bottom: 1.2rem; gap: 1rem; }
.paginakop h1 { font-size: 1.7rem; }
.paginakop .sub { color: var(--inkt-zacht); font-size: 1rem; }
.paginakop .sub b { color: var(--let-op); font-weight: 600; }
.paginakop .acties { margin-left: auto; display: flex; gap: .5rem; }

.knop { height: var(--knop); padding: 0 1rem; border-radius: 4px; font-weight: 600; font-size: .93rem; border: 1px solid var(--rand); background: var(--wit); color: var(--blauw-donker); display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.knop:hover { border-color: var(--blauw); background: var(--blauw-zacht); }
.knop.primair { background: var(--blauw); border-color: var(--blauw); color: var(--wit); }
.knop.primair:hover { background: var(--blauw-donker); border-color: var(--blauw-donker); }
.knop.vast { width: var(--knopvast); height: 32px; padding: 0; font-size: .9rem; }

.paneel { background: var(--wit); border: 1px solid var(--rand); border-radius: 6px; overflow: hidden; }
.paneel > table.t:last-child, .paneel > form > table.t:last-child, .paneel > .team:last-child { margin-bottom: .9rem; }
.paneel > table.t:last-child tbody tr:last-child td, .paneel > form > table.t:last-child tbody tr:last-child td { border-bottom: 0; }
.paneel-kop { display: flex; align-items: center; height: 48px; padding: 0 1.1rem; border-bottom: 1px solid var(--rand); gap: 1rem; }
.paneel-kop h2 { font-size: 1.08rem; }
.paneel-kop .meer { margin-left: auto; font-size: .92rem; font-weight: 600; }
.paneel-kop .meer:hover { text-decoration: underline; }
.paneel-kop .stand { margin-left: auto; display: flex; gap: 1.6rem; font-size: .93rem; color: var(--inkt-zacht); }
.paneel-kop .stand b { color: var(--inkt); font-weight: 600; }

.kolommen { display: grid; gap: 1.2rem; align-items: start; }
.kolommen.breed-smal { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kolommen.breed-smal > :first-child { grid-column: span 3; }
.kolommen.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kolommen.drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stapel { display: grid; gap: 1.2rem; }

/* Tabellen: dé bouwsteen. Vaste rijhoogte, kop in lichtgrijs, cijfers rechts. */
table.t { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .97rem; }
table.t th { text-align: left; font-size: .88rem; font-weight: 600; color: var(--inkt-zacht); height: 40px; padding: 0 1.1rem; background: var(--kopgrijs); border-bottom: 1px solid var(--rand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.t td { height: var(--rij); padding: 0 1.1rem; border-bottom: 1px solid var(--rand-zacht); vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.t tr:last-child td { border-bottom: 0; }
table.t tbody tr.klik { cursor: pointer; }
table.t tbody tr.klik:hover td { background: var(--blauw-zacht); }
table.t th.rechts, table.t td.rechts { text-align: right; }
table.t td a, table.t td button.link { font-weight: 600; color: var(--blauw-donker); }
table.t td.stipcel { padding-right: 0; }
table.t td .stip { margin-right: .6rem; }
table.t td.knopcel { text-align: right; text-overflow: clip; }
table.t tr.groep td { height: 36px; background: var(--kopgrijs); font-weight: 700; font-size: .88rem; color: var(--inkt-zacht); border-bottom: 1px solid var(--rand); }
table.t tr.totaal td { color: var(--inkt-zacht); }
table.t td b { font-weight: 600; }

/* Cijferblok: vier gelijke vakken */
.cijfer { background: var(--wit); border: 1px solid var(--rand); border-radius: 6px; padding: .9rem 1.1rem; height: 92px; }
.cijfer .label { font-size: .9rem; color: var(--inkt-zacht); font-weight: 600; white-space: nowrap; }
.cijfer .waarde { font-family: var(--kop); font-size: 1.7rem; font-weight: 700; line-height: 1.2; margin-top: .15rem; }
.cijfer .noot { font-size: .86rem; color: var(--inkt-zacht); white-space: nowrap; }

/* Recordkop (relatie, order): als een Exact-kaart */
.recordkop { background: var(--wit); border: 1px solid var(--rand); border-radius: 6px; margin-bottom: 1.2rem; position: sticky; top: -1.4rem; z-index: 5; }
.recordkop .regel1 { display: flex; align-items: center; height: 64px; padding: 0 1.3rem; gap: .8rem; border-bottom: 1px solid var(--rand-zacht); }
.recordkop .soort { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blauw-donker); width: 80px; }
.recordkop h1 { font-size: 1.5rem; }
.recordkop .code { font-size: 1rem; color: var(--inkt-zacht); margin-left: .4rem; }
.recordkop .knoppen { margin-left: auto; display: flex; gap: .5rem; }
.recordkop .feiten { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.recordkop .feit { height: 64px; padding: .7rem 1.3rem 0; border-right: 1px solid var(--rand-zacht); min-width: 0; }
.recordkop .feit:last-child { border-right: 0; }
.recordkop .feit span { display: block; color: var(--inkt-zacht); font-size: .84rem; font-weight: 600; white-space: nowrap; }
.recordkop .feit b { display: block; font-weight: 700; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .1rem; }
.subtabs { display: flex; border-top: 1px solid var(--rand-zacht); padding: 0 .6rem; overflow-x: auto; }
.subtabs button { height: 46px; padding: 0 .9rem; font-size: .97rem; font-weight: 600; color: var(--inkt-zacht); border-bottom: 3px solid transparent; white-space: nowrap; }
.subtabs button:hover { color: var(--inkt); }
.subtabs button.actief { color: var(--blauw-donker); border-bottom-color: var(--blauw); }
.subtabs button .aantal { color: var(--inkt-mist); font-weight: 500; margin-left: .35rem; }

/* Tijdlijn als tabel met bolletjes */
table.t td .bol { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--blauw); background: var(--wit); vertical-align: -3px; margin-right: .7rem; }
table.t td .bol.vol { background: var(--blauw); }
table.t td .bol.open { border-color: var(--rand); }

/* Notities */
.notitie { padding: .8rem 1.1rem; border-bottom: 1px solid var(--rand-zacht); font-size: .95rem; }
.notitie .van { font-size: .84rem; color: var(--inkt-zacht); font-weight: 600; margin-bottom: .1rem; }
.notitie-invoer { display: flex; gap: .5rem; padding: .8rem 1.1rem; }
.notitie-invoer input { flex: 1; height: var(--knop); border: 1px solid var(--rand); border-radius: 4px; padding: 0 .8rem; font-family: var(--tekst); font-size: .95rem; }
.notitie-invoer input:focus { outline: none; border-color: var(--blauw); }

/* Zoekvenster */
.sluier { position: fixed; inset: 0; background: rgba(27,39,51,.4); z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding-top: 10vh; }
.zoekvenster { width: 680px; max-width: calc(100% - 2rem); background: var(--wit); border-radius: 6px; border: 1px solid var(--rand); overflow: hidden; }
.zoekvenster input { width: 100%; height: 56px; border: 0; border-bottom: 1px solid var(--rand); padding: 0 1.2rem; font-size: 1.1rem; font-family: var(--tekst); outline: none; }
.zoekresultaten { max-height: 60vh; overflow-y: auto; }
.zoekgroep { height: 32px; display: flex; align-items: center; padding: 0 1.2rem; font-size: .84rem; font-weight: 700; color: var(--inkt-zacht); background: var(--kopgrijs); border-bottom: 1px solid var(--rand-zacht); }
.zoekres { width: 100%; text-align: left; display: grid; grid-template-columns: minmax(0,1fr) 220px; gap: 1rem; height: 44px; padding: 0 1.2rem; font-size: .97rem; align-items: center; border-bottom: 1px solid var(--rand-zacht); }
.zoekres:hover, .zoekres.actief { background: var(--blauw-licht); }
.zoekres b { font-weight: 600; }
.zoekres small { color: var(--inkt-zacht); font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zoek-voet { height: 36px; display: flex; align-items: center; padding: 0 1.2rem; font-size: .82rem; color: var(--inkt-zacht); gap: 1.4rem; background: var(--kopgrijs); }
.zoek-voet kbd { font-family: var(--tekst); border: 1px solid var(--rand); border-radius: 3px; padding: 0 .35rem; margin-right: .3rem; background: var(--wit); }

/* Modulepagina: schermen als nette tegels in Navstar Portal-stijl */
.tegel { background: var(--wit); border: 1px solid var(--rand); border-radius: 6px; padding: 1rem 1.1rem; text-align: left; height: 112px; display: grid; grid-template-rows: auto 1fr auto; }
.tegel:hover { border-color: var(--blauw); background: var(--blauw-zacht); }
.tegel b { font-family: var(--kop); font-size: 1.1rem; font-weight: 700; color: var(--blauw-donker); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tegel span { font-size: .92rem; color: var(--inkt-zacht); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: .2rem; }
.tegel .open { font-size: .88rem; font-weight: 700; color: var(--let-op); }

.melding { font-size: .95rem; color: var(--inkt-zacht); margin: -.4rem 0 1.2rem; }

/* ======================= Kleurvarianten (demo) ======================= */
.profiel { position: relative; }
.balk-gebruiker { height: 40px; padding: 0 .3rem 0 .8rem; border-radius: 4px; }
.balk-gebruiker:hover { background: rgba(255,255,255,.12); }
.profiel-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 300px; background: var(--wit); color: var(--inkt); border: 1px solid var(--rand); border-radius: 8px; box-shadow: 0 16px 32px -16px rgba(27,39,51,.4); padding: .4rem 0; z-index: 50; }
.profiel-kop { display: flex; align-items: center; gap: .8rem; padding: .7rem 1.1rem .9rem; border-bottom: 1px solid var(--rand-zacht); margin-bottom: .3rem; }
.profiel-kop b { display: block; font-weight: 600; }
.profiel-kop small { color: var(--inkt-zacht); font-size: .85rem; }
.avatar.groot { width: 40px; height: 40px; font-size: .95rem; }
.profiel-item { width: 100%; text-align: left; height: 40px; padding: 0 1.1rem; font-size: .97rem; color: var(--inkt); display: flex; align-items: center; }
.profiel-item:hover { background: var(--blauw-zacht); color: var(--blauw-donker); }
.profiel-item:last-child { border-top: 1px solid var(--rand-zacht); margin-top: .3rem; }
.profiel-weergave { padding: .6rem 1.1rem .8rem; display: flex; align-items: center; gap: 1rem; }
.profiel-weergave > span { font-size: .97rem; color: var(--inkt); flex: 1; }
.keuze { display: inline-flex; background: var(--canvas); border: 1px solid var(--rand); border-radius: 6px; padding: 2px; }
.keuze button { height: 28px; padding: 0 .7rem; border-radius: 4px; font-size: .86rem; font-weight: 600; color: var(--inkt-zacht); }
.keuze button.actief { background: var(--wit); color: var(--blauw-donker); box-shadow: 0 1px 2px rgba(27,39,51,.15); }
.logo-kleur { display: none; }

/* Kleur van de balk: blauw (standaard), donker of wit; los van de stijl */
:root[data-kleur="donker"] .balk { background: linear-gradient(90deg, #072c42 0%, #0b3a55 45%, #0f5a84 100%); }
:root[data-kleur="donker"] .menu-item.actief > button { border-bottom-color: var(--oranje); }
:root[data-kleur="donker"] .tabs { background: #dfe5eb; }

/* Wit: als Exact, witte balk met kleurenlogo en blauwe onderstreping */
:root[data-kleur="wit"] .balk { background: var(--wit); color: var(--inkt); border-bottom: 1px solid var(--rand); }
:root[data-kleur="wit"] .logo-wit { display: none; }
:root[data-kleur="wit"] .logo-kleur { display: block; height: 30px; }
:root[data-kleur="wit"] .menu-item > button { color: var(--inkt-zacht); }
:root[data-kleur="wit"] .menu-item > button:hover { background: var(--blauw-zacht); color: var(--blauw-donker); }
:root[data-kleur="wit"] .menu-item.actief > button { color: var(--blauw-donker); border-bottom-color: var(--blauw); }
:root[data-kleur="wit"] .zoekknop { background: var(--canvas); border: 1px solid var(--rand); }
:root[data-kleur="wit"] .balk-gebruiker:hover { background: var(--blauw-zacht); }
:root[data-kleur="wit"] .tabs { background: #e9edf1; }

/* ======================= Team: de huid van team.navstar360.nl over dezelfde structuur ======================= */
:root[data-stijl="modern"] { --canvas: #eff6f9; --kopgrijs: #edf3f7; --rand: #dbe6ee; --rand-zacht: #e6eef4; --inkt: #1b2a38; --inkt-zacht: #52677a; --inkt-mist: #92a4b4;
  --blauw-licht: #e3f2fb; --blauw-zacht: #f3f9fd; --goed: #17a36b; --fout: #e5484d; --let-op: #c47d0e;
  --navy: #0b2740; --verloop: linear-gradient(135deg, #006697 0%, #0088ca 55%, #33a9e0 100%);
  --schaduw: 0 12px 34px rgba(0,102,151,.07); --schaduw-zwaar: 0 18px 44px rgba(0,102,151,.14); }
:root[data-stijl="modern"] h1, :root[data-stijl="modern"] h2 { color: var(--navy); }
:root[data-stijl="modern"][data-kleur="blauw"] .balk { background: var(--verloop); }
:root[data-stijl="modern"] .menu-item > button { border-radius: 10px 10px 0 0; }
:root[data-stijl="modern"] .menu-item.actief > button { border-bottom-color: var(--wit); }
:root[data-stijl="modern"] .zoekknop { border-radius: 999px; }
:root[data-stijl="modern"] .avatar { background: linear-gradient(135deg, #e07f12, #ff9421); }
:root[data-stijl="modern"] .balk-gebruiker { border-radius: 999px; }
:root[data-stijl="modern"] .tabs { background: #e3eef5; border-bottom-color: var(--rand); }
:root[data-stijl="modern"] .tab { border-radius: 10px 10px 0 0; background: #d3e2ec; }
:root[data-stijl="modern"] .tab.actief { background: var(--wit); box-shadow: inset 0 3px 0 var(--blauw); }
:root[data-stijl="modern"] .schil { padding: 0; }
:root[data-stijl="modern"] .zijmenu { border-right: 1px solid var(--rand); background: var(--wit); border-radius: 0; box-shadow: none; padding: .4rem 0 .8rem; width: 256px; height: 100%; }
:root[data-stijl="modern"] .zij-titel { color: var(--navy); font-size: 1.15rem; height: 54px; padding: 0 1.4rem; border-bottom: 1px solid var(--rand-zacht); margin: 0 .8rem .4rem; }
:root[data-stijl="modern"] .zij-blok { border-bottom: 0; margin: 0 .8rem; }
:root[data-stijl="modern"] .zij-sub { border-radius: 8px; padding: 0 .7rem; height: 42px; }
:root[data-stijl="modern"] .zij-sub:hover { background: var(--blauw-zacht); color: var(--blauw-donker); }
:root[data-stijl="modern"] .zij-sub.actief { background: var(--blauw-licht); color: var(--blauw-donker); box-shadow: none; }
:root[data-stijl="modern"] .zij-sub.actief.heeft-meer::after { border-color: var(--blauw-donker); }
:root[data-stijl="modern"] .zij-groepen { background: transparent; border: 0; border-left: 2px solid var(--rand); margin: .3rem 0 .6rem .9rem; padding: 0 0 0 .2rem; }
:root[data-stijl="modern"] .zij-kop { padding: .5rem .8rem 0; height: 28px; }
:root[data-stijl="modern"] .zij-groep { margin: .9rem .8rem 0; padding: 0 .7rem .3rem; }
:root[data-stijl="modern"] .zij-titel + .zij-groep { margin-top: .2rem; }
:root[data-stijl="modern"] .zij-item { border-radius: 8px; padding: 0 .8rem; height: 34px; }
:root[data-stijl="modern"] .zij-item:hover { background: var(--blauw-zacht); color: var(--blauw-donker); }
:root[data-stijl="modern"] .werkvlak, :root[data-stijl="modern"] .scherm { background: #f6f9fb; }
:root[data-stijl="modern"] .scherm { padding-left: 1.6rem; }
:root[data-stijl="modern"] .paneel, :root[data-stijl="modern"] .cijfer, :root[data-stijl="modern"] .recordkop, :root[data-stijl="modern"] .tegel { border: 1px solid var(--rand); border-radius: 16px; box-shadow: var(--schaduw); }
:root[data-stijl="modern"] .paneel-kop { border-bottom-color: var(--rand-zacht); height: 54px; padding: 0 1.3rem; }
:root[data-stijl="modern"] .cijfer { position: relative; overflow: hidden; padding: 1rem 1.3rem; height: 98px; }
:root[data-stijl="modern"] .cijfer::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--verloop); }
:root[data-stijl="modern"] .cijfer .waarde { color: var(--navy); }
:root[data-stijl="modern"] table.t th { background: var(--kopgrijs); border-bottom-color: var(--rand); }
:root[data-stijl="modern"] table.t tbody tr.klik:hover td { background: var(--blauw-zacht); }
:root[data-stijl="modern"] .knop { border-radius: 999px; border: 0; box-shadow: inset 0 0 0 2px var(--rand); color: var(--blauw-donker); font-weight: 700; padding: 0 1.2rem; }
:root[data-stijl="modern"] .knop:hover { box-shadow: inset 0 0 0 2px var(--blauw); background: var(--wit); }
:root[data-stijl="modern"] .knop.primair { background: var(--verloop); color: var(--wit); box-shadow: 0 8px 20px rgba(0,136,202,.25); }
:root[data-stijl="modern"] .knop.primair:hover { box-shadow: 0 12px 26px rgba(0,136,202,.33); }
:root[data-stijl="modern"] .knop.vast { padding: 0; }
:root[data-stijl="modern"] .recordkop .regel1 { padding: 0 1.5rem; }
:root[data-stijl="modern"] .recordkop .soort { color: var(--blauw); }
:root[data-stijl="modern"] .subtabs button.actief { color: var(--blauw-donker); }
:root[data-stijl="modern"] .profiel-menu, :root[data-stijl="modern"] .zoekvenster { border: 0; border-radius: 14px; box-shadow: 0 14px 38px rgba(11,39,64,.22); }
:root[data-stijl="modern"] .keuze { border-radius: 999px; }
:root[data-stijl="modern"] .keuze button { border-radius: 999px; }
:root[data-stijl="modern"] .notitie-invoer input { border-radius: 999px; padding: 0 1rem; }
:root[data-stijl="modern"] table.t tr.groep td { background: var(--wit); color: var(--navy); font-family: var(--kop); font-size: .95rem; font-weight: 700; height: 48px; padding-top: 10px; border-bottom: 1px solid var(--rand); }
:root[data-stijl="modern"] table.t tr.groep:first-child td { padding-top: 2px; height: 40px; }

/* ======================= Werkplek v1.0: aanvullingen op de demo-opmaak ======================= */
.menu-item > a { height: 100%; display: flex; align-items: center; padding: 0 1rem; font-size: 1rem; font-weight: 600; color: rgba(255,255,255,.92); border-bottom: 3px solid transparent; border-top: 3px solid transparent; text-decoration: none; }
.menu-item > a:hover { background: rgba(255,255,255,.12); color: var(--wit); }
.menu-item.actief > a { border-bottom-color: var(--wit); color: var(--wit); }
:root[data-stijl="modern"] .menu-item > a { border-radius: 10px 10px 0 0; }
:root[data-kleur="donker"] .menu-item.actief > a { border-bottom-color: var(--oranje); }
:root[data-kleur="wit"] .menu-item > a { color: var(--inkt-zacht); }
:root[data-kleur="wit"] .menu-item > a:hover { background: var(--blauw-zacht); color: var(--blauw-donker); }
:root[data-kleur="wit"] .menu-item.actief > a { color: var(--blauw-donker); border-bottom-color: var(--blauw); }
.balk-logo-link { display: flex; align-items: center; }
a.tab { text-decoration: none; }
.tabs { flex-shrink: 0; }
a.zij-sub, a.zij-item { text-decoration: none; }
.zij-item.actief { color: var(--blauw-donker); font-weight: 600; background: var(--blauw-licht); }
.profiel-item { text-decoration: none; }
.profiel-menu form { margin: 0; }
.profiel-item.uitloggen { border-top: 1px solid var(--rand-zacht); margin-top: .3rem; }
.paneel-tekst { padding: 1rem 1.1rem 1.2rem; font-size: .97rem; line-height: 1.55; color: var(--inkt-zacht); }
.paneel-binnen { padding: 1rem 1.1rem .4rem; }
.paneel-voet { padding: .8rem 1.1rem 1rem; border-top: 1px solid var(--rand-zacht); display: flex; gap: .5rem; }
.tegels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
a.tegel { text-decoration: none; color: inherit; }
.subscherm { display: block; }

/* Kolombreedtes als klassen (CSP: geen inline stijlen) */
col.k-auto { width: auto; } col.k-40 { width: 40px; } col.k-80 { width: 80px; } col.k-110 { width: 110px; } col.k-120 { width: 120px; }
col.k-130 { width: 130px; } col.k-150 { width: 150px; } col.k-160 { width: 160px; } col.k-170 { width: 170px; } col.k-190 { width: 190px; }
col.k-200 { width: 200px; } col.k-220 { width: 220px; } col.k-260 { width: 260px; } col.k-320 { width: 320px; }
table.t tr.uit td { color: var(--inkt-mist); }
table.t tr.let-op-rij td:nth-child(3) { color: var(--let-op); font-weight: 600; }
table.t td.rechtcel { white-space: nowrap; }
table.t td.rechtcel .stip { margin-right: .6rem; }

/* Formulieren: vaste hoogtes, strakke kolommen */
.formulier { padding: 1rem 1.1rem 1.2rem; }
.formulier label, .paneel-binnen label { display: block; font-size: .88rem; font-weight: 600; color: var(--inkt-zacht); margin-bottom: .9rem; }
.formulier input, .formulier select, .paneel-binnen input, .paneel-binnen select, .filterbalk input, .filterbalk select, .loginkaart input {
  display: block; width: 100%; height: var(--knop); margin-top: .3rem; border: 1px solid var(--rand); border-radius: 4px; padding: 0 .8rem; font-family: var(--tekst); font-size: .97rem; color: var(--inkt); background: var(--wit); }
.formulier input:focus, .formulier select:focus, .paneel-binnen input:focus, .paneel-binnen select:focus, .loginkaart input:focus { outline: none; border-color: var(--blauw); box-shadow: 0 0 0 3px var(--blauw-licht); }
.formulier input:disabled, .formulier select:disabled { background: var(--kopgrijs); color: var(--inkt-zacht); }
.veldrij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.formvoet { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .4rem; }
.formvoet .knop { text-decoration: none; }
.formvoet.vast-onder { position: sticky; bottom: 0; background: var(--canvas); padding: .8rem 0; margin: 0; border-top: 1px solid var(--rand); }
:root[data-stijl="modern"] .formvoet.vast-onder { background: #f6f9fb; }
.formfout { background: #fdecec; color: var(--fout); border-radius: 4px; padding: .6rem .9rem; font-size: .93rem; margin-bottom: 1rem; font-weight: 600; }
.filterbalk { display: grid; grid-template-columns: minmax(0, 1fr) 200px 120px; gap: .6rem; margin-bottom: 1.2rem; }
.filterbalk input, .filterbalk select { margin-top: 0; }
.knop.gevaar { color: var(--fout); }
.knop.gevaar:hover { border-color: var(--fout); background: #fdecec; }
.knop.breed { width: 100%; height: 44px; font-size: 1rem; margin-top: .6rem; text-decoration: none; }
a.knop { text-decoration: none; }
:root[data-stijl="modern"] .formulier input, :root[data-stijl="modern"] .formulier select, :root[data-stijl="modern"] .paneel-binnen input, :root[data-stijl="modern"] .paneel-binnen select, :root[data-stijl="modern"] .filterbalk input, :root[data-stijl="modern"] .filterbalk select, :root[data-stijl="modern"] .loginkaart input { border-radius: 10px; }

/* Rechten */
.recht { display: inline-block; height: 24px; line-height: 24px; padding: 0 .55rem; border-radius: 4px; background: var(--blauw-licht); color: var(--blauw-donker); font-size: .82rem; font-weight: 600; margin-right: .3rem; }
.recht.leeg { background: transparent; color: var(--rand); }
:root[data-stijl="modern"] .recht { border-radius: 999px; }
.rechtenblok { margin-bottom: 1.2rem; }
.keuze.klein { padding: 1px; vertical-align: middle; position: relative; }
.keuze.klein label { height: 24px; line-height: 24px; padding: 0 .55rem; border-radius: 3px; font-size: .8rem; font-weight: 600; color: var(--inkt-zacht); cursor: pointer; }
.keuze.klein label.actief { background: var(--wit); color: var(--blauw-donker); box-shadow: 0 1px 2px rgba(27,39,51,.15); }
.keuze.klein input { position: absolute; opacity: 0; width: 0; height: 0; }
:root[data-stijl="modern"] .keuze.klein label { border-radius: 999px; }
.vinkje { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; font-size: .97rem; color: var(--inkt); font-weight: 500; position: relative; }
.vinkje input { position: absolute; opacity: 0; width: 0; height: 0; }
.vinkje span { width: 20px; height: 20px; border: 2px solid var(--rand); border-radius: 4px; display: inline-block; position: relative; background: var(--wit); flex-shrink: 0; }
.vinkje input:checked + span { background: var(--blauw); border-color: var(--blauw); }
.vinkje input:checked + span::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--wit); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.vinkje.regel { margin: .4rem 0 1rem; }
.stappen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1.2rem; }
.stapje { height: 44px; display: flex; align-items: center; gap: .7rem; padding: 0 1rem; background: var(--wit); border: 1px solid var(--rand); border-radius: 6px; font-weight: 600; color: var(--inkt-mist); }
.stapje .nr { width: 24px; height: 24px; border-radius: 50%; background: var(--kopgrijs); color: var(--inkt-mist); display: flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 700; }
.stapje.actief { color: var(--inkt); border-color: var(--blauw); }
.stapje.actief .nr { background: var(--blauw); color: var(--wit); }
.stapje.klaar { color: var(--inkt-zacht); }
.stapje.klaar .nr { background: var(--goed); color: var(--wit); }
:root[data-stijl="modern"] .stapje { border-radius: 12px; }

/* Inlogpagina */
body.loginpagina { overflow: auto; background: var(--canvas); }
:root[data-stijl="modern"] body.loginpagina { background: linear-gradient(160deg, #eff6f9 0%, #e3f2fb 100%); }
.loginvlak { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; }
.loginkaart { width: 420px; max-width: 100%; background: var(--wit); border: 1px solid var(--rand); border-radius: 16px; padding: 2.2rem 2.2rem 2rem; box-shadow: var(--schaduw, none); }
.loginlogo { height: 34px; display: block; margin-bottom: 1.4rem; }
.loginkaart h1 { font-size: 1.6rem; color: var(--navy, var(--inkt)); margin-bottom: 1.2rem; }
.loginkaart label { display: block; font-size: .88rem; font-weight: 600; color: var(--inkt-zacht); margin-top: .4rem; }
.loginkaart p { margin-bottom: 1rem; font-size: .95rem; line-height: 1.5; }
.loginfout { background: #fdecec; color: var(--fout); border-radius: 8px; padding: .7rem .9rem; font-size: .93rem; font-weight: 600; margin-bottom: 1rem; }
.of { display: flex; align-items: center; gap: .8rem; margin: 1.2rem 0 .6rem; color: var(--inkt-mist); font-size: .86rem; }
.of::before, .of::after { content: ""; flex: 1; height: 1px; background: var(--rand); }
.codeveld { font-size: 1.6rem !important; letter-spacing: .3em; text-align: center; height: 52px !important; font-family: var(--kop) !important; }
.terug { display: block; margin-top: 1rem; font-size: .9rem; text-align: center; }
.loginvoet { margin-top: 1.2rem; font-size: .86rem; color: var(--inkt-mist); }

.formnoot { margin-right: auto; align-self: center; font-size: .9rem; }

img.avatar { object-fit: cover; background: var(--kopgrijs); }
.avatar.klein { width: 30px; height: 30px; font-size: .72rem; }
.avatar.kaart { width: 40px; height: 40px; font-size: .9rem; margin-right: .2rem; }
table.t td.fotocel { padding-right: 0; }
col.k-60 { width: 60px; }

/* ======================= Inlogpagina als team.navstar360.nl: zachte kleurvlekken, glazen kaart, het team eromheen ======================= */
body.loginpagina, :root[data-stijl="modern"] body.loginpagina { display: flex; align-items: center; justify-content: center; padding: 24px; min-height: 100vh; overflow: hidden; background: #eff6f9;
  background-image: radial-gradient(900px 600px at 10% 0%, rgba(0,136,202,.16), transparent 65%), radial-gradient(800px 560px at 92% 100%, rgba(242,101,34,.14), transparent 65%), radial-gradient(600px 400px at 85% 10%, rgba(51,169,224,.12), transparent 65%); }
.inlog { position: relative; z-index: 2; width: 420px; max-width: 100%; background: rgba(255,255,255,.88); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: 22px; padding: 40px 36px 32px; box-shadow: 0 30px 70px rgba(0,102,151,.18); border: 1px solid rgba(255,255,255,.9); overflow: hidden; }
.inlog::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, #006697, #0088ca 60%, #33a9e0); }
.inlog-logo { display: block; width: 190px; margin: 0 auto 8px; }
.inlog-onder { font-family: var(--kop); font-weight: 700; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--inkt-zacht); text-align: center; margin-bottom: 28px; }
.inlog h1 { font-size: 21px; color: var(--navy); margin-bottom: 6px; }
.inlog p { color: var(--inkt-zacht); margin-bottom: 18px; font-size: 13.5px; line-height: 1.5; }
.inlog label { display: block; font-size: .86rem; font-weight: 600; color: var(--inkt-zacht); margin-top: .2rem; }
.inlog input { display: block; width: 100%; height: 44px; margin-top: .3rem; border: 1px solid var(--rand); border-radius: 10px; padding: 0 14px; font-family: var(--tekst); font-size: .97rem; color: var(--inkt); background: var(--wit); }
.inlog input:focus { outline: none; border-color: var(--blauw); box-shadow: 0 0 0 3px var(--blauw-licht); }
.inlog .knop.breed { margin-top: .8rem; }
.inlog .knop.google { background: var(--wit); color: var(--inkt); box-shadow: inset 0 0 0 2px var(--rand); gap: 8px; font-weight: 600; margin-top: 0; }
.inlog .knop.google:hover { box-shadow: inset 0 0 0 2px var(--blauw); color: var(--inkt); background: var(--wit); }
.inlog .knop.google svg { width: 18px; height: 18px; }
.inlog .of { margin: 18px 0; font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; }
.inlog .codeveld { letter-spacing: .4em; font-family: var(--kop) !important; font-size: 24px !important; font-weight: 700; text-align: center; height: 56px !important; }
.inlog-voet { margin-top: 22px; text-align: center; font-size: 12px; color: var(--inkt-mist); }
.inlog-voet a { color: var(--inkt-zacht); }
.inlog .loginfout { margin-bottom: 18px; }
/* Het team rond het kaartje: stilstaande portretten in een boog, groot dichtbij en kleiner verder weg, met voornaam. */
.ster { position: fixed; left: var(--x); top: var(--y); width: var(--m); margin: calc(var(--m) / -2) 0 0 calc(var(--m) / -2); display: flex; flex-direction: column; align-items: center; gap: 9px; pointer-events: none; z-index: 1; animation: opkomst .9s ease-out var(--o) both; }
.ster img { width: var(--m); height: var(--m); border-radius: 50%; object-fit: cover; background: #fff; border: 4px solid #fff; box-shadow: 0 16px 36px rgba(0,102,151,.20), 0 0 0 7px rgba(255,255,255,.55); }
.ster figcaption { font-family: var(--kop); font-weight: 700; font-size: 12.5px; color: var(--navy); letter-spacing: .02em; background: rgba(255,255,255,.72); padding: 3px 11px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,102,151,.10); }
@keyframes opkomst { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 1000px) { .ster { display: none; } }
@media (prefers-reduced-motion: reduce) { .ster { animation: none; } }
.inlog h1 { text-align: center; margin-bottom: 16px; }

/* Installatiebalk: alleen in de browser, niet in het appvenster */
.installeer { display: flex; align-items: center; gap: 1rem; height: 72px; padding: 0 1.1rem 0 .9rem; margin-bottom: 1.2rem; background: var(--wit); border: 1px solid var(--rand); border-radius: 6px; }
.installeer img { width: 44px; height: 44px; }
.installeer > div { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.installeer b { font-weight: 600; }
.installeer span { font-size: .9rem; color: var(--inkt-zacht); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.installeer.uitleg span { white-space: normal; }
:root[data-stijl="modern"] .installeer { border-radius: 16px; box-shadow: var(--schaduw); }

/* ======================= Team-module binnen de schil ======================= */
.team .omlijning { width: 100%; max-width: none; margin: 0; padding-left: 0; padding-right: 0; }
.team .band { background: transparent; border: 0; padding: 0; margin-bottom: 1.2rem; }
.team .band .omlijning { padding-top: 0; align-items: center; min-height: 44px; }
.team .band h1 { font-family: var(--kop); font-size: 1.7rem; color: var(--navy, var(--inkt)); }
.team .hoofd { padding: 0 0 3rem; }
.team .kijkbalk { margin-bottom: 1rem; }
.team.team.team { display: block !important; min-height: 0; background: transparent; flex-direction: column; }
.team .omlijning, .team .hoofd > .omlijning, .team .band .omlijning { width: 100% !important; max-width: none !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }

/* Werkplek-opmaak voor overgezette Team-schermen */
a.cijfer { text-decoration: none; color: inherit; display: block; }
a.cijfer:hover { border-color: var(--blauw); }
.cijfer .waarde .van { font-size: 1rem; font-weight: 600; color: var(--inkt-zacht); font-family: var(--tekst); }
.cijfer .waarde.let-op { color: var(--let-op); }
.tussenkop { font-size: 1.15rem; margin: 1.6rem 0 .9rem; color: var(--navy, var(--inkt)); }
.paneel + .paneel, .kolommen + .kolommen, .kolommen + .paneel, .paneel + .kolommen, .melding + .kolommen { margin-top: 1.2rem; }
.kolommen > .paneel + .paneel, .stapel > .paneel + .paneel, .stapel > .kolommen + .kolommen, .stapel > .paneel + .kolommen, .stapel > .kolommen + .paneel { margin-top: 0; }
.paginakop .sub a { color: var(--let-op); font-weight: 600; }
.paginakop .acties form.keuze { margin-right: .6rem; }
.paginakop .acties form.keuze button { height: 32px; }
.melding { background: var(--wit); border: 1px solid var(--rand); border-radius: 6px; padding: .8rem 1.1rem; margin: 0 0 1.2rem; color: var(--inkt); }
.melding a { font-weight: 600; margin-left: .4rem; }
:root[data-stijl="modern"] .melding { border-radius: 16px; box-shadow: var(--schaduw); }
.melding-paneel { margin-bottom: 1.2rem; }
.regelform { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.regelform label { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--inkt-zacht); font-weight: 600; }
.regelform input { height: var(--knop); border: 1px solid var(--rand); border-radius: 4px; padding: 0 .6rem; font-family: var(--tekst); }
table.t tr.vandaag td { background: var(--blauw-zacht); }
table.t td br + .zacht { font-size: .88rem; }
table.t td .zacht { font-size: .9rem; }

/* ======================= Werkplek-bouwstenen voor de herbouwde Team-schermen ======================= */
.keuze a { height: 28px; padding: 0 .7rem; border-radius: 4px; font-size: .86rem; font-weight: 600; color: var(--inkt-zacht); display: inline-flex; align-items: center; text-decoration: none; }
.keuze a.actief { background: var(--wit); color: var(--blauw-donker); box-shadow: 0 1px 2px rgba(27,39,51,.15); }
:root[data-stijl="modern"] .keuze a { border-radius: 999px; }
.paginakop .acties .keuze { height: var(--knop); align-items: center; }
.paginakop .acties .keuze a, .paginakop .acties .keuze button { height: 30px; }
.paginakop .acties input.zoek, .paginakop .acties select.zoek { height: var(--knop); width: 260px; background: var(--wit); color: var(--inkt); border: 1px solid var(--rand); border-radius: 4px; padding: 0 .8rem; font-family: var(--tekst); font-size: .95rem; }
.paginakop .acties input.zoek:focus { outline: none; border-color: var(--blauw); }
:root[data-stijl="modern"] .paginakop .acties input.zoek, :root[data-stijl="modern"] .paginakop .acties select.zoek { border-radius: 999px; padding: 0 1rem; }
.paginakop .acties select.zoek { width: 200px; }
.paginakop .acties form { display: flex; gap: .5rem; align-items: center; }
.knop.klein { height: 32px; padding: 0 .8rem; font-size: .9rem; }
.knop.rond { width: 32px; height: 32px; padding: 0; border-radius: 50%; font-size: 1rem; line-height: 1; }
.knop.rond.weg { color: var(--fout); }
.knop.rond.weg:hover { border-color: var(--fout); background: #fdecec; box-shadow: inset 0 0 0 2px var(--fout); }
.knop.goed { color: var(--goed); }
.knop.goed:hover { border-color: var(--goed); box-shadow: inset 0 0 0 2px var(--goed); background: var(--wit); }
.veldrij.drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.veldrij.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.formulier textarea { display: block; width: 100%; min-height: 84px; margin-top: .3rem; border: 1px solid var(--rand); border-radius: 4px; padding: .6rem .8rem; font-family: var(--tekst); font-size: .97rem; color: var(--inkt); resize: vertical; }
:root[data-stijl="modern"] .formulier textarea { border-radius: 10px; }
.formulier .vinkje { margin-bottom: .9rem; }
.formulier .vinkjes { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin: .4rem 0 .9rem; }
.formulier .veldnoot { font-size: .86rem; color: var(--inkt-mist); font-weight: 400; margin: .2rem 0 .9rem; }
.formulier label + .veldnoot, .formulier .veldrij + .veldnoot { margin-top: -.6rem; }
.paneel-kop form { display: flex; align-items: center; gap: .5rem; }
.paneel-kop form.kop-naam { flex: 1; min-width: 0; }
.paneel-kop form.kop-naam input { height: 32px; width: 220px; border: 1px solid var(--rand); border-radius: 4px; padding: 0 .6rem; font-family: var(--kop); font-weight: 700; font-size: 1.05rem; color: var(--navy, var(--inkt)); }
.paneel-kop .kopknoppen { margin-left: auto; display: flex; align-items: center; gap: .4rem; }
.paneel-kop .kopknoppen .vinkje { font-size: .88rem; color: var(--inkt-zacht); margin-right: .4rem; }
.paneel-voet form { display: flex; gap: .5rem; align-items: center; width: 100%; }
.paneel-voet select, .paneel-voet input { height: var(--knop); border: 1px solid var(--rand); border-radius: 4px; padding: 0 .6rem; font-family: var(--tekst); font-size: .95rem; background: var(--wit); flex: 1; min-width: 0; }
:root[data-stijl="modern"] .paneel-voet select, :root[data-stijl="modern"] .paneel-voet input, :root[data-stijl="modern"] .paneel-kop form.kop-naam input { border-radius: 10px; }
.paneel-voet.tekst { color: var(--inkt-zacht); font-size: .9rem; justify-content: space-between; }
.kolommen.twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Groot getal bovenin een paneel (saldo) */
.paneel-cijfer { display: flex; align-items: baseline; gap: .6rem; padding: 1rem 1.1rem .4rem; }
.paneel-cijfer b { font-family: var(--kop); font-size: 2rem; font-weight: 700; color: var(--navy, var(--inkt)); line-height: 1.1; }
.paneel-cijfer b.fout { color: var(--fout); }
.paneel-cijfer span { color: var(--inkt-zacht); font-size: .95rem; }
table.t td.rechts b { font-weight: 600; }
table.t tr.lijn td { border-bottom: 1px solid var(--rand); }
table.t td form { display: flex; gap: .4rem; align-items: center; justify-content: flex-end; }
table.t td form input[type="date"], table.t td form input[type="text"] { height: 32px; border: 1px solid var(--rand); border-radius: 4px; padding: 0 .5rem; font-family: var(--tekst); font-size: .9rem; }
table.t td.wrap { white-space: normal; }
.knopgroep { display: flex; flex-wrap: wrap; gap: .5rem; padding: 1rem 1.1rem 1.2rem; }
/* Team-widgets (kalender, planning, weekrooster) binnen een paneel: eigen Team-opmaak blijft gelden via .team */
.paneel .team .tabelhouder { border: 0; border-radius: 0; }

col.k-50 { width: 50px; } col.k-70 { width: 70px; } col.k-90 { width: 90px; } col.k-100 { width: 100px; } col.k-140 { width: 140px; } col.k-180 { width: 180px; } col.k-240 { width: 240px; } col.k-280 { width: 280px; } col.k-300 { width: 300px; } col.k-360 { width: 360px; } col.k-400 { width: 400px; }
.formulier input[type=file] { height: auto; padding: .45rem .6rem; }

/* Invoerveld in de knoppenrij van de paginakop (bijv. Geldig vanaf) */
.paginakop .acties .actie-veld { display: inline-flex; align-items: center; gap: .5rem; height: var(--knop); font-size: .9rem; font-weight: 600; color: var(--inkt-zacht); }
.paginakop .acties .actie-veld input { height: var(--knop); border: 1px solid var(--rand); border-radius: 4px; padding: 0 .6rem; font-family: var(--tekst); font-size: .95rem; color: var(--inkt); background: var(--wit); }
:root[data-stijl="modern"] .paginakop .acties .actie-veld input { border-radius: 999px; padding: 0 .9rem; }

/* rijen met uitleg bij aanwijzen (title) */
table.t tr.tip { cursor: default; }
table.t tr.tip:hover td, table.t tr.tip.open td { background: var(--blauw-zacht); }

/* paneel met formulier: de laatste toelichting sluit strak af; roosterrijen tonen zich als lichte regels in plaats van witte blokken */
.formulier > .veldnoot:last-child { margin-bottom: 0; }
.paneel .team .roosterdag { background: var(--kopgrijs); border-color: var(--rand-zacht); }
.paneel .team .roosterdag--uit { background: var(--wit); }

/* Beoordelen: één aanvraag = één blok */
.paneel.aanvraag + .paneel.aanvraag { margin-top: 1.2rem; }
.paneel.aanvraag .paneel-kop { gap: .8rem; }
.paneel.aanvraag .paneel-kop .zacht { font-size: .95rem; }
.paneel.aanvraag .feiten { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--rand-zacht); }
.paneel.aanvraag .feit { height: 64px; padding: .7rem 1.1rem 0; border-right: 1px solid var(--rand-zacht); min-width: 0; }
.paneel.aanvraag .feit:last-child { border-right: 0; }
.paneel.aanvraag .feit span { display: block; color: var(--inkt-zacht); font-size: .84rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paneel.aanvraag .feit b { display: block; font-weight: 700; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .1rem; }
.paneel.aanvraag .deel-kop { display: flex; align-items: baseline; gap: 1rem; padding: 1rem 1.1rem .5rem; font-weight: 700; font-size: .95rem; }
.paneel.aanvraag .deel-kop span { margin-left: auto; font-weight: 400; color: var(--inkt-zacht); font-size: .9rem; }
.paneel.aanvraag .team.periode { padding: 0 1.1rem .4rem; }
.paneel.aanvraag .team.periode .kaart__voet { padding-left: 0; padding-right: 0; }
.paneel.aanvraag .paneel-tekst.boven-strak { padding-top: 0; }
.paneel.aanvraag .beslis { display: flex; align-items: flex-end; gap: 1.2rem; padding: 1rem 1.1rem 1.2rem; border-top: 1px solid var(--rand-zacht); }
.paneel.aanvraag .beslis label { flex: 1; display: block; font-weight: 600; font-size: .95rem; min-width: 0; }
.paneel.aanvraag .beslis label .zacht { font-weight: 400; }
.paneel.aanvraag .beslis textarea { display: block; width: 100%; margin-top: .4rem; height: 64px; border: 1px solid var(--rand); border-radius: 6px; padding: .5rem .7rem; font: inherit; resize: vertical; }
.paneel.aanvraag .beslis .formvoet { margin: 0 0 1px; flex-shrink: 0; }
:root[data-stijl="modern"] .paneel.aanvraag .beslis textarea { border-radius: 10px; }

/* i-icoon: uitleg op de plek waar het over gaat (title bij aanwijzen); nergens losse uitlegzinnen */
.info { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--inkt-mist); color: var(--inkt-mist); font: 700 10px/1 var(--tekst); vertical-align: middle; margin: -8px 0 -8px .4rem; position: relative; top: -1px; cursor: pointer; text-transform: none; letter-spacing: 0; flex-shrink: 0; }
.info::before { content: "i"; }
.info:hover, .info.open { border-color: var(--blauw); color: var(--blauw); }
.info.open { background: var(--blauw); color: var(--wit); }
.info:focus-visible { outline: 2px solid var(--blauw); outline-offset: 2px; }
table.t th .info { margin-left: .3rem; }
.paneel-kop h2 { display: inline-flex; align-items: center; }

/* uitlegvak bij het i-icoon */
.info-pop { position: fixed; z-index: 80; max-width: 340px; background: var(--wit); color: var(--inkt); border: 1px solid var(--rand); border-radius: 8px; box-shadow: 0 8px 24px rgba(16, 36, 58, .14); padding: .7rem .9rem; font-size: .9rem; line-height: 1.45; font-weight: 400; text-transform: none; letter-spacing: 0; white-space: normal; }
.info-pop.boven::before { top: auto; bottom: -6px; transform: rotate(225deg); }
.info-pop::before { content: ""; position: absolute; top: -6px; left: calc(var(--pijl, 16px) - 6px); width: 10px; height: 10px; background: var(--wit); border-left: 1px solid var(--rand); border-top: 1px solid var(--rand); transform: rotate(45deg); }
:root[data-stijl="modern"] .info-pop { border-radius: 12px; }

/* ---------- Google: Agenda, Drive, Chat ---------- */
.agenda-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.agenda-dag { border-right: 1px solid var(--rand-zacht); min-height: 460px; padding-bottom: .8rem; min-width: 0; }
.agenda-dag:last-child { border-right: 0; }
.agenda-dag.weekend { background: var(--kopgrijs); }
.agenda-dag .dagkop { display: flex; align-items: center; gap: .35rem; height: 40px; padding: 0 .8rem; font-size: .88rem; font-weight: 600; color: var(--inkt-zacht); background: var(--kopgrijs); border-bottom: 1px solid var(--rand-zacht); text-decoration: none; }
.agenda-dag .dagkop b { font-size: 1.05rem; color: var(--inkt); }
.agenda-dag .dagkop:hover { color: var(--blauw-donker); }
.agenda-dag.vandaag .dagkop { color: var(--blauw-donker); box-shadow: inset 0 3px 0 var(--blauw); }
.agenda-dag.vandaag .dagkop b { color: var(--blauw-donker); }
.agenda-dag .afspraak { display: block; margin: .5rem .55rem 0; padding: .4rem .55rem .45rem .6rem; border: 1px solid var(--rand-zacht); border-left: 4px solid var(--kleur, var(--blauw)); border-radius: 6px; background: var(--wit); color: inherit; text-decoration: none; font-size: .86rem; line-height: 1.3; min-width: 0; }
.agenda-dag .afspraak:hover { border-color: var(--blauw); border-left-color: var(--kleur, var(--blauw)); background: var(--blauw-zacht); }
.agenda-dag .afspraak .tijd { display: block; font-size: .78rem; color: var(--inkt-zacht); font-variant-numeric: tabular-nums; }
.agenda-dag .afspraak .naam { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-dag .afspraak .plek { display: block; font-size: .78rem; color: var(--inkt-mist); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-dag .afspraak.heledag { background: var(--kleur, var(--blauw)); color: var(--wit); border-color: transparent; }
.agenda-dag .afspraak.heledag .naam, .agenda-dag .afspraak.heledag .plek { color: var(--wit); }
.agenda-dag .afspraak.afgewezen { opacity: .5; text-decoration: line-through; }
.agenda-legenda { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .9rem; font-size: .86rem; color: var(--inkt-zacht); }
.agenda-legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--kleur, var(--blauw)); vertical-align: -1px; margin-right: .4rem; }
table.t td .stip[data-kleur] { background: var(--kleur); }
.paneel-tekst.voorgevormd { white-space: pre-wrap; }
.actie-veld.zoekveld input[type="search"] { width: 280px; height: var(--knop); border: 1px solid var(--rand); border-radius: 4px; padding: 0 .8rem; font-family: var(--tekst); font-size: .95rem; background: var(--wit); }
:root[data-stijl="modern"] .actie-veld.zoekveld input[type="search"] { border-radius: 999px; }
.bestandsoort { display: inline-block; width: 22px; height: 22px; border-radius: 5px; background: var(--kopgrijs); border: 1px solid var(--rand); vertical-align: middle; position: relative; }
.bestandsoort::after { content: ""; position: absolute; inset: 6px 5px; border-radius: 2px; background: currentColor; opacity: .85; }
.bestandsoort.map { color: #f0b429; } .bestandsoort.drive { color: #5f6368; } .bestandsoort.doc { color: #4285f4; } .bestandsoort.sheet { color: #0f9d58; }
.bestandsoort.slides { color: #f4b400; } .bestandsoort.pdf { color: #ea4335; } .bestandsoort.beeld { color: #d93025; } .bestandsoort.video { color: #a142f4; }
.bestandsoort.form { color: #7248b9; } .bestandsoort.zip { color: #80868b; } .bestandsoort.link { color: #1a73e8; } .bestandsoort.bestand { color: #9aa0a6; }
.bestandsoort.map::after { inset: 7px 4px 5px; border-radius: 2px 2px 2px 2px; }
.kolommen.smal-breed { grid-template-columns: 320px minmax(0, 1fr); }
table.t tr.klik.actief td { background: var(--blauw-licht); }
.chatpaneel .berichten { max-height: 560px; overflow-y: auto; padding: .6rem 1.1rem .4rem; display: flex; flex-direction: column; gap: .6rem; }
.chatpaneel .bericht { display: flex; gap: .7rem; align-items: flex-start; max-width: 78%; }
.chatpaneel .bericht.eigen { align-self: flex-end; flex-direction: row-reverse; }
.chatpaneel .ballon { background: var(--kopgrijs); border: 1px solid var(--rand-zacht); border-radius: 10px; padding: .45rem .75rem .5rem; min-width: 0; }
.chatpaneel .bericht.eigen .ballon { background: var(--blauw-licht); border-color: transparent; }
.chatpaneel .ballon .kop { display: flex; gap: .7rem; align-items: baseline; font-size: .82rem; margin-bottom: .15rem; }
.chatpaneel .ballon .tekst { white-space: pre-wrap; word-break: break-word; font-size: .93rem; line-height: 1.4; }
.chatpaneel .beslis label { font-weight: 600; }
:root[data-stijl="modern"] .chatpaneel .ballon { border-radius: 14px; }

/* Drive in de indeling van Google Drive */
.gdrive { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.gdrive-nav { display: flex; flex-direction: column; gap: 2px; padding-top: .2rem; }
.gdrive-item { display: flex; align-items: center; gap: .9rem; height: 40px; padding: 0 1rem 0 1.1rem; border-radius: 0 999px 999px 0; color: var(--inkt); font-size: .95rem; font-weight: 500; text-decoration: none; }
.gdrive-item svg { width: 20px; height: 20px; fill: var(--inkt-zacht); flex-shrink: 0; }
.gdrive-item:hover { background: var(--blauw-zacht); }
.gdrive-item.actief { background: var(--blauw-licht); color: var(--blauw-donker); font-weight: 600; }
.gdrive-item.actief svg { fill: var(--blauw-donker); }
.gdrive-sub { display: flex; flex-direction: column; margin: 2px 0 4px; }
.gdrive-sub a { display: block; height: 34px; line-height: 34px; padding: 0 1rem 0 3.4rem; border-radius: 0 999px 999px 0; font-size: .9rem; color: var(--inkt-zacht); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gdrive-sub a:hover { background: var(--blauw-zacht); color: var(--inkt); }
.gdrive-sub a.actief { background: var(--blauw-licht); color: var(--blauw-donker); font-weight: 600; }
.gdrive-kop { display: flex; align-items: center; gap: .5rem; min-height: 56px; padding: 0 1.1rem; font-size: 1.25rem; border-bottom: 1px solid var(--rand-zacht); }
.gdrive-kop a { color: var(--inkt-zacht); text-decoration: none; padding: .2rem .5rem; border-radius: 999px; }
.gdrive-kop a:hover { background: var(--blauw-zacht); color: var(--inkt); }
.gdrive-kop b { font-weight: 500; color: var(--inkt); padding: .2rem .5rem; }
.gdrive-kop .pijl { color: var(--inkt-mist); }
.gdrive-kop .zacht { font-size: .95rem; }
.gdrive-kop .aantal { margin-left: auto; font-size: .88rem; }
.gdrive-tabel td { height: 48px; }
.gdrive-tabel td.gnaam { display: flex; align-items: center; gap: .9rem; height: 48px; }
.gdrive-tabel td.gnaam img { width: 20px; height: 20px; flex-shrink: 0; }
.gdrive-tabel td.gnaam a { font-weight: 500; color: var(--inkt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gdrive-tabel tr:hover td.gnaam a { color: var(--blauw-donker); }
.gdrive-tabel .gster { color: #f4b400; font-size: .9rem; }
.gdrive-tabel .ggedeeld { width: 16px; height: 16px; fill: var(--inkt-mist); flex-shrink: 0; }
.gdrive-tabel td.geigenaar { display: flex; align-items: center; gap: .6rem; height: 48px; color: var(--inkt-zacht); }
.gdrive-tabel td.geigenaar img { width: 24px; height: 24px; border-radius: 50%; }
.gdrive-tabel td.geigenaar .avatar.klein { width: 24px; height: 24px; font-size: .7rem; }
.gzoek { position: relative; }
.gzoek svg { position: absolute; left: .8rem; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--inkt-mist); pointer-events: none; }
.gzoek input[type="search"] { padding-left: 2.4rem; width: 360px; background: var(--kopgrijs); border-color: transparent; }
.gzoek input[type="search"]:focus { background: var(--wit); border-color: var(--rand); outline: none; }

/* Agendakeuze rechts naast de week */
.agenda-indeling { grid-template-columns: minmax(0, 1fr) 280px; }
.agenda-indeling > :first-child { grid-column: auto; }
.agendakeuze { display: flex; flex-direction: column; padding: .4rem 0 .6rem; }
.agendakeuze label { display: flex; align-items: center; gap: .7rem; min-height: 40px; padding: 0 1.1rem; cursor: pointer; font-size: .93rem; color: var(--inkt-zacht); }
.agendakeuze label:hover { background: var(--blauw-zacht); color: var(--inkt); }
.agendakeuze label.aan { color: var(--inkt); font-weight: 600; }
.agendakeuze label.eigen { cursor: default; }
.agendakeuze input { position: absolute; opacity: 0; width: 0; height: 0; }
.agendakeuze i { width: 18px; height: 18px; border-radius: 4px; border: 2px solid var(--kleur, var(--blauw)); background: var(--wit); flex-shrink: 0; position: relative; }
.agendakeuze label.aan i { background: var(--kleur, var(--blauw)); }
.agendakeuze label.aan i::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid var(--wit); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.agendakeuze span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agendakeuze small { font-size: .78rem; color: var(--inkt-mist); font-weight: 400; }
.agenda-indeling .agenda-dag { min-height: 420px; }

/* ---------- Agenda: tijdraster zoals Google Agenda ---------- */
.agenda-indeling { grid-template-columns: minmax(0, 1fr) 280px; }
.raster { --goot: 56px; }
.raster .goot { width: var(--goot); flex-shrink: 0; }
.raster-kop, .raster-heledag, .raster-body { display: flex; }
.raster-kop { border-bottom: 1px solid var(--rand-zacht); }
.raster-kop .dagkop { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: .4rem; height: 56px; font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--inkt-zacht); border-left: 1px solid var(--rand-zacht); }
.raster-kop .dagkop b { font-size: 1.35rem; font-weight: 500; color: var(--inkt); width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0; }
.raster-kop .dagkop.vandaag { color: var(--blauw-donker); }
.raster-kop .dagkop.vandaag b { background: var(--blauw); color: var(--wit); font-weight: 600; }
.raster-heledag { border-bottom: 1px solid var(--rand); min-height: 10px; }
.raster-heledag .heledag-cel { flex: 1; min-width: 0; border-left: 1px solid var(--rand-zacht); padding: 3px 3px 2px; display: flex; flex-direction: column; gap: 2px; }
.raster-heledag .heledag { display: block; font-size: .78rem; font-weight: 600; color: var(--wit); background: var(--kleur, var(--blauw)); border-radius: 4px; padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.raster-heledag .heledag:hover { filter: brightness(.92); }
.raster-body { max-height: 640px; overflow-y: auto; position: relative; }
.raster-body .goot .uur { height: 48px; position: relative; }
.raster-body .goot .uur span { position: absolute; right: 8px; top: -7px; font-size: .72rem; color: var(--inkt-mist); font-variant-numeric: tabular-nums; }
.raster-body .goot .uur:first-child span { display: none; }
.dagkolom { flex: 1; min-width: 0; position: relative; border-left: 1px solid var(--rand-zacht); background-image: linear-gradient(to bottom, var(--rand-zacht) 1px, transparent 1px); background-size: 100% 48px; }
.dagkolom.weekend { background-color: var(--kopgrijs); }
.dagkolom .uurvak { display: block; height: 48px; }
.dagkolom .uurvak:hover { background: var(--blauw-zacht); }
.dagkolom .blok { position: absolute; box-sizing: border-box; padding: 3px 6px; border-radius: 5px; background: var(--kleur, var(--blauw)); color: var(--wit); font-size: .78rem; line-height: 1.25; overflow: hidden; text-decoration: none; border: 1px solid rgba(255,255,255,.7); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.dagkolom .blok:hover { filter: brightness(.94); z-index: 3; }
.dagkolom .blok .naam { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dagkolom .blok .tijd { display: block; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dagkolom .blok.kort { padding-top: 1px; padding-bottom: 1px; }
.dagkolom .blok.kort .tijd { display: none; }
.dagkolom .blok.voorlopig { background: var(--wit); color: var(--kleur, var(--blauw)); border: 1px dashed var(--kleur, var(--blauw)); }
.dagkolom .blok.afgewezen { opacity: .45; text-decoration: line-through; }
.dagkolom .nu { position: absolute; left: 0; right: 0; height: 2px; background: #ea4335; z-index: 4; pointer-events: none; }
.dagkolom .nu::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #ea4335; }
.agendakeuze label.eigen i { border-color: var(--kleur, var(--blauw)); }

/* ---------- Drive: rijen ---------- */
.gcel { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.gdrive-tabel td.gnaam, .gdrive-tabel td.geigenaar { display: table-cell; }
.gdrive-tabel td.geigenaar .gcel { gap: .6rem; color: var(--inkt-zacht); }
.gdrive-tabel td.gnaam a { min-width: 0; }
.actie-veld.gzoek input[type="search"] { padding-left: 2.4rem; width: 360px; background: var(--kopgrijs); border-color: transparent; }
.actie-veld.gzoek input[type="search"]:focus { background: var(--wit); border-color: var(--rand); outline: none; }

/* ---------- Chat: vullend, ververst vanzelf ---------- */
.chatindeling { align-items: stretch; }
.chatlijst-binnen { max-height: calc(100vh - 330px); min-height: 360px; overflow-y: auto; }
.chatpaneel { display: flex; flex-direction: column; }
.chatpaneel .berichten { flex: 1; max-height: none; height: calc(100vh - 430px); min-height: 300px; }
.chatpaneel .dagscheiding { display: flex; align-items: center; gap: .8rem; color: var(--inkt-mist); font-size: .78rem; margin: .4rem 0 .1rem; }
.chatpaneel .dagscheiding::before, .chatpaneel .dagscheiding::after { content: ""; flex: 1; border-top: 1px solid var(--rand-zacht); }
.chatpaneel img.avatar.klein { object-fit: cover; }
.chatpaneel .ballon .tekst a { color: var(--blauw-donker); word-break: break-all; }
.chatpaneel .ballon .bijlage { font-size: .8rem; margin-top: .2rem; }
.beslis { display: flex; align-items: flex-end; gap: 1.2rem; padding: 1rem 1.1rem 1.2rem; border-top: 1px solid var(--rand-zacht); }
.beslis label { flex: 1; display: block; font-weight: 600; font-size: .95rem; min-width: 0; }
.beslis textarea { display: block; width: 100%; margin-top: .4rem; height: 64px; border: 1px solid var(--rand); border-radius: 6px; padding: .5rem .7rem; font: inherit; resize: vertical; }
.beslis .formvoet { margin: 0 0 1px; flex-shrink: 0; }
.chatvorm textarea { margin-top: 0; height: 56px; }
:root[data-stijl="modern"] .beslis textarea { border-radius: 10px; }

/* lichte agendakleuren: donkere tekst erop */
.dagkolom .blok.licht, .raster-heledag .heledag.licht { color: var(--inkt); border-color: rgba(0,0,0,.08); }
.dagkolom .blok.licht .tijd { opacity: .75; }
.dagkolom .blok.voorlopig.licht { color: var(--inkt); }
.paginakop .acties form.gzoek input[type="search"] { padding-left: 2.4rem; }
.chatpaneel .berichten { height: calc(100vh - 470px); }

/* los vinkje in een formulierrij, op dezelfde hoogte als de invoervelden */
.formulier label.vinkje { display: flex; align-items: center; gap: .6rem; height: var(--knop); margin-top: 1.55rem; font-weight: 600; font-size: .95rem; cursor: pointer; }
.formulier label.vinkje input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--blauw); }

:root[data-stijl="modern"] .paginakop .acties form.gzoek input[type="search"], .paginakop .acties form.gzoek input[type="search"] { padding-left: 2.4rem; padding-right: .9rem; }

.formulier label.vinkje { white-space: nowrap; }
.formulier label.vinkje input[type="checkbox"] { flex: 0 0 18px; width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; border: 0; display: inline-block; }
.formulier label.vinkje span { display: inline; margin: 0; }

.paneel.aanvraag .feiten.acht { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.paneel.aanvraag .feit.breed { grid-column: span 2; }
.formulier label.vinkje input[type="checkbox"] { appearance: auto; -webkit-appearance: checkbox; transform: scale(1.2); transform-origin: left center; margin-right: .2rem; }

/* vinkje: eigen weergave (native checkbox botst met de formulier-invoerregels) */
.formulier label.vinkje { position: relative; }
.formulier label.vinkje input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; transform: none; }
.formulier label.vinkje i { width: 18px; height: 18px; border-radius: 4px; border: 2px solid var(--inkt-mist); background: var(--wit); flex-shrink: 0; position: relative; }
.formulier label.vinkje input:checked + i { background: var(--blauw); border-color: var(--blauw); }
.formulier label.vinkje input:checked + i::after { content: ""; position: absolute; left: 4px; top: 0; width: 5px; height: 9px; border: solid var(--wit); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.formulier label.vinkje input:focus-visible + i { outline: 2px solid var(--blauw); outline-offset: 2px; }

/* Drive-menu: eigen mappen onder Mijn Drive, gedeelde drives ingeklapt */
.gdrive-sub a svg { width: 16px; height: 16px; fill: var(--inkt-mist); vertical-align: -3px; margin-right: .6rem; }
.gdrive-sub a.actief svg { fill: var(--blauw-donker); }
.gdrive-groep > .gdrive-sub { display: none; }
.gdrive-groep.open > .gdrive-sub { display: flex; }
.gdrive-item .klap { margin-left: auto; width: 24px; height: 24px; border: 0; background: transparent; cursor: pointer; position: relative; border-radius: 50%; }
.gdrive-item .klap::after { content: ""; position: absolute; left: 8px; top: 7px; width: 7px; height: 7px; border-right: 2px solid var(--inkt-mist); border-bottom: 2px solid var(--inkt-mist); transform: rotate(45deg); }
.gdrive-groep.open .gdrive-item .klap::after { transform: rotate(-135deg); top: 10px; }
.gdrive-item .klap:hover { background: var(--blauw-licht); }
.gdrive-sub { max-height: 420px; overflow-y: auto; }

/* ---------- Drive: viewer en download ---------- */
.paneel.viewer { height: calc(100vh - 230px); min-height: 420px; }
.paneel.viewer iframe { display: block; width: 100%; height: 100%; border: 0; }
.gdownload { display: inline-flex; width: 32px; height: 32px; border-radius: 50%; align-items: center; justify-content: center; color: var(--inkt-zacht); }
.gdownload svg { width: 20px; height: 20px; fill: currentColor; }
.gdownload:hover { background: var(--blauw-licht); color: var(--blauw-donker); }
.gdrive-tabel td.knopcel { padding-right: .6rem; }

/* ---------- Chat: zoals Google Chat ---------- */
.chatindeling { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.2rem; align-items: stretch; }
.chatindeling > .paneel { display: flex; flex-direction: column; min-height: 0; }
.chatzoek { position: relative; padding: .7rem .8rem; border-bottom: 1px solid var(--rand-zacht); }
.chatzoek svg { position: absolute; left: 1.5rem; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--inkt-mist); pointer-events: none; }
.chatzoek input { width: 100%; height: 36px; border: 1px solid transparent; border-radius: 999px; background: var(--kopgrijs); padding: 0 .8rem 0 2.3rem; font: inherit; font-size: .92rem; }
.chatzoek input:focus { outline: none; background: var(--wit); border-color: var(--rand); }
.chatlijst-binnen { flex: 1; min-height: 0; max-height: none; overflow-y: auto; padding: .3rem 0 .6rem; }
.chatlijst-binnen .groepkop { padding: .9rem 1rem .3rem; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--inkt-mist); }
.chatlijst-binnen .gesprek { display: flex; align-items: center; gap: .7rem; height: 40px; margin: 0 .5rem; padding: 0 .6rem; border-radius: 8px; color: var(--inkt); text-decoration: none; font-size: .93rem; }
.chatlijst-binnen .gesprek .titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chatlijst-binnen .gesprek:hover { background: var(--blauw-zacht); }
.chatlijst-binnen .gesprek.actief { background: var(--blauw-licht); color: var(--blauw-donker); font-weight: 600; }
.chatlijst-binnen .gesprek .avatar.klein { width: 28px; height: 28px; font-size: .72rem; flex-shrink: 0; }
.chatlijst-binnen .gesprek .avatar.ruimte { background: var(--kopgrijs); color: var(--inkt-zacht); border: 1px solid var(--rand); font-weight: 700; }
.chatpaneel .paneel-kop .hekje { color: var(--inkt-mist); margin-right: .3rem; font-weight: 500; }
.chatpaneel .berichten { flex: 1; min-height: 0; height: auto; max-height: none; overflow-y: auto; padding: .4rem 1.1rem .6rem; display: block; }
.chatpaneel .bericht { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 0 .7rem; max-width: none; margin-top: .9rem; }
.chatpaneel .bericht.vervolg { margin-top: .15rem; }
.chatpaneel .bericht .wie { width: 36px; }
.chatpaneel .bericht .wie .avatar.klein { width: 32px; height: 32px; }
.chatpaneel .bericht .inhoud { min-width: 0; }
.chatpaneel .bericht .kop { display: flex; gap: .6rem; align-items: baseline; font-size: .88rem; margin-bottom: .1rem; }
.chatpaneel .bericht .kop .zacht { font-size: .78rem; }
.chatpaneel .bericht .tekst { font-size: .94rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; color: var(--inkt); }
.chatpaneel .bericht.vervolg .tekst:hover { background: var(--kopgrijs); border-radius: 4px; margin-left: -.3rem; padding-left: .3rem; }
.chatpaneel .bericht.eigen .kop b { color: var(--blauw-donker); }
.chatpaneel .dagscheiding { margin: 1.1rem 0 .2rem; }
.chatvorm { display: flex; align-items: flex-end; gap: .6rem; padding: .7rem 1.1rem .9rem; border-top: 1px solid var(--rand-zacht); }
.chatvorm textarea { flex: 1; min-height: 42px; max-height: 160px; height: 42px; border: 1px solid var(--rand); border-radius: 21px; padding: .6rem 1rem; font: inherit; font-size: .94rem; line-height: 1.4; resize: none; background: var(--kopgrijs); overflow-y: auto; }
.chatvorm textarea:focus { outline: none; background: var(--wit); border-color: var(--blauw); }
.chatvorm .knop.rond { width: 42px; height: 42px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chatvorm .knop.rond svg { width: 20px; height: 20px; fill: currentColor; }

/* Chat-lijst met voorbeeldregel en tijd */
.chatlijst-binnen .gesprek { height: auto; min-height: 40px; padding: .4rem .6rem; align-items: center; }
.chatlijst-binnen .gesprek .avatar.klein { width: 32px; height: 32px; font-size: .74rem; }
.chatlijst-binnen .gesprek img.avatar.klein { object-fit: cover; }
.chatlijst-binnen .gesprek .kolom { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.chatlijst-binnen .gesprek .rij1 { display: flex; align-items: baseline; gap: .5rem; }
.chatlijst-binnen .gesprek .rij1 .titel { flex: 1; }
.chatlijst-binnen .gesprek .tijd { font-size: .74rem; color: var(--inkt-mist); font-weight: 400; white-space: nowrap; }
.chatlijst-binnen .gesprek .voorbeeld { font-size: .8rem; color: var(--inkt-zacht); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chatlijst-binnen .gesprek.actief .voorbeeld { color: var(--inkt-zacht); }
.chatpaneel .paneel-kop .avatar.klein { width: 28px; height: 28px; font-size: .72rem; }
.chatpaneel .paneel-kop img.avatar.klein { object-fit: cover; }

.paneel.viewer { display: flex; flex-direction: column; }
.paneel.viewer iframe { flex: 1; }
.paneel.viewer .beeldvak { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--kopgrijs); overflow: auto; padding: 1rem; }
.paneel.viewer .beeldvak img, .paneel.viewer .beeldvak video { max-width: 100%; max-height: 100%; box-shadow: 0 2px 12px rgba(0,0,0,.12); }
.paneel.viewer .paneel-voet { flex-shrink: 0; }

/* Exact: logboek en gegevens */
.filterbalk { display: flex; gap: .6rem; align-items: center; padding: .8rem 1.1rem; border-bottom: 1px solid var(--rand-zacht); flex-wrap: wrap; }
.filterbalk input, .filterbalk select { height: var(--knop); border: 1px solid var(--rand); border-radius: 4px; padding: 0 .7rem; font-family: var(--tekst); font-size: .93rem; background: var(--wit); }
.filterbalk input[type="search"] { flex: 1; min-width: 220px; }
:root[data-stijl="modern"] .filterbalk input, :root[data-stijl="modern"] .filterbalk select { border-radius: 999px; }
.codeblok { margin: 0 1.1rem 1rem; padding: .8rem 1rem; background: var(--kopgrijs); border: 1px solid var(--rand-zacht); border-radius: 8px; font-family: ui-monospace, Consolas, monospace; font-size: .82rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; max-height: 520px; overflow: auto; }
.paneel-tekst.code { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; word-break: break-all; }
.tabelrol { overflow-x: auto; }
table.t.breed { min-width: 100%; table-layout: auto; }
table.t.breed td, table.t.breed th { max-width: 260px; }

.paneel > .filterbalk input, .paneel > .filterbalk select { display: inline-block; width: auto; margin-top: 0; }
.paneel > .filterbalk input[type="search"] { flex: 1; min-width: 220px; }
.paneel > .filterbalk select { max-width: 280px; }
table.t td.code { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; word-break: break-all; white-space: normal; }

/* Exact: schakelaars, gebruiksoverzicht */
.wissel-rij { display: flex; align-items: center; gap: .8rem; padding: .7rem 1.1rem; border-bottom: 1px solid var(--rand-zacht); }
.wissel-rij:last-child { border-bottom: 0; }
.wissel-rij .tekst { flex: 1; min-width: 0; }
.wissel-rij .tekst small { display: block; color: var(--inkt-zacht); font-size: .84rem; }
.gebruik-tabel td.num, .gebruik-tabel th.num { text-align: right; font-variant-numeric: tabular-nums; }
.gebruik-tabel td.nul { color: var(--inkt-mist); }
.gebruik-tabel td.warm { background: var(--blauw-licht); font-weight: 600; }
.stip.grijs { background: var(--rand); }

table.t td span.code { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; }
table.t td br + span.zacht.code { font-size: .8rem; }

/* Kredietbewaking */
.paneel-voet form input { flex: 1; }
.paneel-voet form input + input { flex: 1.4; }

/* invoer in een tabelrij (toevoegen onderaan een lijst) */
table.t tfoot td { height: 52px; background: var(--kopgrijs); border-top: 1px solid var(--rand); }
table.t tfoot .celvorm { display: block; }
table.t tfoot input, table.t tfoot .celinvoer { width: 100%; height: 32px; border: 1px solid var(--rand); border-radius: 4px; padding: 0 .6rem; font-family: var(--tekst); font-size: .92rem; background: var(--wit); }
:root[data-stijl="modern"] table.t tfoot input { border-radius: 8px; }
table.t td.knopcel .knop.klein { min-width: 110px; }

/* voortgang van een achtergrondtaak */
.voortgang .stappen { padding: .4rem 1.1rem .9rem; }
.voortgang .stap { display: flex; align-items: center; gap: .8rem; min-height: 38px; }
.voortgang .stap b { min-width: 260px; font-weight: 600; }
.voortgang .stap .zacht { font-size: .92rem; }
.stip.draait { animation: stip-knipper 1s ease-in-out infinite; }
@keyframes stip-knipper { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.voortgang .stappen { display: flex; flex-direction: column; }
.voortgang .stap { width: 100%; }
.voortgang .stap .zacht { white-space: normal; }
td.dagkeuze, td.ontvangerkeuze { white-space: normal; }
td.dagkeuze label, td.ontvangerkeuze label { display: inline-flex; align-items: center; gap: .25rem; margin: 0 .55rem .2rem 0; font-size: .85rem; cursor: pointer; }
td.dagkeuze input, td.ontvangerkeuze input { width: 15px; height: 15px; margin: 0; accent-color: var(--blauw); }
td.ontvangerkeuze small { display: block; font-size: .76rem; }
table.t tfoot select.celinvoer { width: 100%; height: 32px; border: 1px solid var(--rand); border-radius: 4px; padding: 0 .5rem; font-family: var(--tekst); font-size: .92rem; background: var(--wit); }
table.t tfoot td.dagkeuze input, table.t tfoot td.ontvangerkeuze input { width: 15px; height: 15px; border: 0; padding: 0; }
table.t td.stipcel input.wissel { width: 16px; height: 16px; margin: 0; accent-color: var(--blauw); }

td.dagkeuze label { margin-right: .4rem; }
table.t tfoot td.dagkeuze, table.t tfoot td.ontvangerkeuze { padding-top: .3rem; padding-bottom: .3rem; }
/* regel toevoegen onder het mailschema */
.regelvorm { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.4rem; padding: .9rem 1.1rem 1rem; border-top: 1px solid var(--rand); background: var(--kopgrijs); }
.regelvorm > label { display: flex; flex-direction: column; gap: .35rem; font-size: .84rem; font-weight: 600; color: var(--inkt-zacht); }
.regelvorm select, .regelvorm input[type="time"] { height: 36px; border: 1px solid var(--rand); border-radius: 4px; padding: 0 .6rem; font-family: var(--tekst); font-size: .93rem; background: var(--wit); min-width: 150px; }
.regelvorm .vinkjes { display: flex; align-items: center; gap: .7rem; height: 36px; }
.regelvorm .vinkjes label { display: inline-flex; align-items: center; gap: .3rem; font-weight: 500; color: var(--inkt); font-size: .9rem; cursor: pointer; }
.regelvorm .vinkjes input { width: 15px; height: 15px; margin: 0; accent-color: var(--blauw); }
.regelvorm .knop { margin-left: auto; }
:root[data-stijl="modern"] .regelvorm select, :root[data-stijl="modern"] .regelvorm input[type="time"] { border-radius: 10px; }

/* ---------- schakelaar (aan/uit) ---------- */
input.schakel { appearance: none; -webkit-appearance: none; width: 44px; height: 24px; border-radius: 999px; background: var(--rand); position: relative; cursor: pointer; flex-shrink: 0; margin: 0; transition: background .15s; vertical-align: middle; }
input.schakel::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--wit); box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .15s; }
input.schakel:checked { background: var(--blauw); }
input.schakel:checked::after { left: 23px; }
input.schakel:focus-visible { outline: 2px solid var(--blauw); outline-offset: 2px; }
input.schakel.klein { width: 36px; height: 20px; }
input.schakel.klein::after { width: 14px; height: 14px; }
input.schakel.klein:checked::after { left: 19px; }
.wissel-rij { justify-content: space-between; }
.wissel-rij .tekst { flex: 1; }
table.t td.schakelcel { padding-right: 0; }
table.t td.schakelcel form { display: flex; align-items: center; height: 100%; }
/* ---------- pillen (meerkeuze) ---------- */
.pillen { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; min-height: 36px; }
.pillen label { position: relative; cursor: pointer; }
.pillen input { position: absolute; opacity: 0; width: 0; height: 0; }
.pillen span { display: inline-flex; align-items: center; height: 30px; padding: 0 .8rem; border-radius: 999px; border: 1px solid var(--rand); background: var(--wit); color: var(--inkt-zacht); font-size: .88rem; font-weight: 500; transition: all .12s; }
.pillen label:hover span { border-color: var(--blauw); color: var(--blauw-donker); }
.pillen input:checked + span { background: var(--blauw); border-color: var(--blauw); color: var(--wit); font-weight: 600; }
.pillen input:focus-visible + span { outline: 2px solid var(--blauw); outline-offset: 2px; }
.regelvorm { background: var(--wit); border-top: 1px solid var(--rand-zacht); }
.regelvorm > label > span:first-child { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.regelvorm select, .regelvorm input[type="time"] { height: 36px; }

/* ---------- Beheer: uitgaande mails ---------- */
.filterbalk.vier { display: grid; grid-template-columns: minmax(0, 1fr) 200px 200px 120px; margin: 1.2rem 0; padding: .8rem 1.1rem; background: var(--wit); border: 1px solid var(--rand); border-radius: 6px; }
:root[data-stijl="modern"] .filterbalk.vier { border-radius: 16px; box-shadow: var(--schaduw); }
.paginakop .schakelvorm { display: flex; align-items: center; margin-right: .3rem; }
.paginakop .schakelvorm label { display: flex; align-items: center; gap: .55rem; cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--inkt-zacht); height: var(--knop); }
table.t tr.klik { cursor: pointer; }

/* ---------- laden en voortgang: draaiend icoon ---------- */
@keyframes draai { to { transform: rotate(360deg); } }
.draaier { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--rand); border-top-color: var(--blauw); animation: draai .8s linear infinite; flex-shrink: 0; box-sizing: border-box; }
.draaier.klein { width: 18px; height: 18px; border-width: 2px; }
.draaier.klaar, .draaier.fout { animation: none; border: 0; position: relative; }
.draaier.klaar { background: var(--goed); } .draaier.fout { background: var(--fout); }
.draaier.klaar::after { content: ""; position: absolute; left: 9px; top: 5px; width: 6px; height: 11px; border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(45deg); }
.draaier.fout::after { content: "!"; position: absolute; inset: 0; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.voortgang-regel { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; min-height: 64px; }
.voortgang-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.voortgang-tekst b { font-size: 1.02rem; font-weight: 600; }
.voortgang-tekst .zacht { font-size: .9rem; }
.voortgang-tekst .zacht:empty { display: none; }
.voortgang-tekst { justify-content: center; }
.laadregel { display: flex; align-items: center; gap: .8rem; padding: .9rem 1.1rem; color: var(--inkt-zacht); font-size: .93rem; }

/* ---------- sorteren op kolomkop ---------- */
table.t th.sorteerbaar { cursor: pointer; user-select: none; }
table.t th.sorteerbaar:hover { color: var(--blauw-donker); }
table.t th.sort-op, table.t th.sort-neer { color: var(--blauw-donker); }
table.t th.sort-op::after, table.t th.sort-neer::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: .45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-3px); }
table.t th.sort-op::after { transform: rotate(-135deg) translateY(-1px); }

/* ---------- Aflettering ---------- */
.melding.fout { border-left: 3px solid var(--fout); }
.melding.goed { border-left: 3px solid var(--goed); }
table.t td.wrap { white-space: normal; overflow-wrap: anywhere; }
table.t tr.groepkop td { background: var(--kopgrijs); color: var(--inkt-zacht); font-size: .84rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; height: 34px; }
.sleepzone { margin: 1rem 1.1rem 0; border: 2px dashed var(--rand); border-radius: 10px; padding: 2.2rem 1rem 2rem; text-align: center; cursor: pointer; background: var(--wit); transition: border-color .15s, background .15s; }
.sleepzone:hover, .sleepzone:focus, .sleepzone.sleep-actief { border-color: var(--blauw); background: var(--blauw-licht); outline: none; }
.sleep-cirkel { width: 72px; height: 72px; border-radius: 50%; background: var(--kopgrijs); color: var(--inkt-mist); display: flex; align-items: center; justify-content: center; margin: 0 auto .9rem; }
.sleepzone:hover .sleep-cirkel, .sleepzone.sleep-actief .sleep-cirkel { color: var(--blauw); background: var(--blauw-zacht); }
.sleep-cirkel svg { width: 36px; height: 36px; }
.sleep-tekst { font-weight: 600; font-size: .98rem; color: var(--inkt); }
.sleep-sub { font-size: .88rem; color: var(--inkt-zacht); margin-top: .25rem; }
.sleep-sub.goed { color: var(--goed); font-weight: 600; } .sleep-sub.fout { color: var(--fout); font-weight: 600; }
.paneel-voet .zacht { align-self: center; font-size: .9rem; }
.paneel-voet form { display: inline-flex; }
.afl-stappen .stapje { text-decoration: none; }
.afl-stappen .stapje.gekozen { box-shadow: 0 0 0 2px var(--blauw-zacht); border-color: var(--blauw); }
.afl-stappen .stapje.fout .nr { background: var(--fout); color: var(--wit); }
.afl-stappen .stapje.geblokkeerd { opacity: .55; cursor: not-allowed; }
.afl-tabel .vk-cel { padding-top: .35rem; padding-bottom: .35rem; }
.afl-tabel .vk-select, .afl-tabel .vk-tekst { height: 32px; border: 1px solid var(--rand); border-radius: 4px; padding: 0 .5rem; font: inherit; font-size: .9rem; background: var(--wit); width: 100%; margin-top: 0; }
.afl-tabel .vk-tekst { margin-top: .3rem; }
:root[data-stijl="modern"] .afl-tabel .vk-select, :root[data-stijl="modern"] .afl-tabel .vk-tekst { border-radius: 8px; }
.afl-vink { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; border: 2px solid var(--rand); color: var(--inkt-mist); background: var(--wit); cursor: pointer; }
.afl-vink.aan { background: var(--goed); border-color: var(--goed); color: var(--wit); }
.afl-vink.open:hover { border-color: var(--goed); color: var(--goed); }
.kopieer { cursor: copy; }
.kopieer.gekopieerd { background: var(--blauw-licht); }
.afl-laadregel { position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 60; display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem; background: var(--wit); border: 1px solid var(--rand); border-radius: 10px; box-shadow: var(--schaduw); font-weight: 600; font-size: .93rem; }

/* knop met alleen een icoon (prullenbak in lijsten) */
.knop.icoon { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--inkt-zacht); }
.knop.icoon svg { width: 18px; height: 18px; }
.knop.icoon:hover { color: var(--fout); border-color: var(--fout); }

.regelvorm.klein { display: inline-flex; gap: .4rem; padding: 0; border: 0; background: transparent; align-items: center; }
.regelvorm.klein select, .regelvorm.klein input { height: 30px; font-size: .88rem; margin: 0; }
.regelvorm.klein select { max-width: 220px; }
.regelvorm.klein { flex-wrap: nowrap; }
.regelvorm.klein input { width: 180px; }
.knop.icoon svg { stroke-width: 2.2; }
.feit small { display: block; font-size: .8rem; }

/* ---------- AH-weekpagina: kopcijfers en stappenbalk ---------- */
.ah-feiten .feiten { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ah-feiten .feit { height: 84px; padding-top: .9rem; }
.ah-feiten .feit span { font-size: .82rem; }
.ah-feiten .feit b { font-size: 1.3rem; margin-top: .2rem; }
.paneel + .afl-stappen { margin-top: 1.2rem; }
.afl-stappen .stapje { height: 52px; font-size: 1rem; }
.afl-stappen .stapje .nr { width: 28px; height: 28px; font-size: .9rem; }
.afl-stappen .stapje.actief, .afl-stappen .stapje.gekozen { background: var(--blauw-licht); color: var(--blauw-donker); border-color: var(--blauw); }
.afl-stappen .stapje.gekozen { box-shadow: inset 0 -3px 0 var(--blauw); }
.afl-stappen .stapje.klaar { color: var(--inkt); }

/* ---------- openstaande posten: brief ---------- */
.opl-keuzes { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .8rem 1.1rem; border-bottom: 1px solid var(--rand-zacht); }
.opl-keuzes .pillen { margin: 0; }
table.t tr.vervallen-rij td.num.fout { font-weight: 600; }
.melding.goed { border-left: 3px solid var(--goed); }

/* ---------- kolombreedtes zelf instellen ---------- */
table.t th.heeft-greep { position: relative; }
table.t th .kolomgreep { position: absolute; top: 0; right: -4px; width: 9px; height: 100%; cursor: col-resize; z-index: 2; }
table.t th .kolomgreep::after { content: ""; position: absolute; top: 10px; bottom: 10px; left: 4px; width: 1px; background: var(--rand); opacity: 0; transition: opacity .12s; }
table.t th:hover .kolomgreep::after, body.kolom-sleep .kolomgreep::after { opacity: 1; }
body.kolom-sleep { cursor: col-resize; user-select: none; }
table.t td { overflow: hidden; text-overflow: ellipsis; }

.opl-groep-rechts { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.opl-groep-rechts select { height: 34px; margin: 0 0 0 .4rem; max-width: 320px; }
table.t td input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--blauw); vertical-align: middle; }

table.t tr.roosterregel td { background: var(--kopgrijs); }

/* Afspraak (agenda-detail): opbouw zoals Google, label links en inhoud rechts */
.paneel.afspraak .afspraak-rij { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 1rem; padding: .95rem 1.1rem; border-bottom: 1px solid var(--rand-zacht); font-size: .97rem; line-height: 1.5; }
.paneel.afspraak .afspraak-rij:last-child { border-bottom: 0; }
.paneel.afspraak .afspraak-rij > span:first-child { color: var(--inkt-zacht); font-weight: 600; }
.afspraak-wanneer b { font-size: 1.05rem; }
.afspraak-tekst ul, .afspraak-tekst ol { margin: .25rem 0 .25rem 1.3rem; padding: 0; }
.afspraak-tekst li { margin: .15rem 0; }
.afspraak-tekst p { margin: 0 0 .55rem; } .afspraak-tekst p:last-child { margin-bottom: 0; }
.afspraak-tekst a { color: var(--blauw); text-decoration: underline; word-break: break-all; }
.afspraak-tekst b { font-weight: 600; }
.gastenlijst { list-style: none; margin: .55rem 0 0; padding: 0; display: grid; gap: .5rem; }
.gastenlijst li { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.gastenlijst .gast-naam { font-weight: 600; }
.gastenlijst .zacht, .gastenlijst .mist { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Finance-startpagina: dashboard met grote cijfers en dunne verhoudingsbalkjes (breedte via data-breedte in werkplek.js, CSP) */
.dash-noot { font-size: .86rem; color: var(--inkt-zacht); white-space: nowrap; }
.paneel-kop .dash-noot { margin-left: auto; } .paneel-kop .dash-noot + .meer { margin-left: 1.2rem; }
.dash-tegels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; margin-bottom: 1.2rem; }
.dash-tegel { display: block; background: var(--wit); border: 1px solid var(--rand); border-radius: 6px; padding: 1rem 1.2rem .95rem; text-decoration: none; color: inherit; min-width: 0; }
.dash-tegel:hover { border-color: var(--blauw); }
.dash-tegel .label { font-size: .88rem; font-weight: 600; color: var(--inkt-zacht); white-space: nowrap; }
.dash-tegel .waarde { font-family: var(--kop); font-size: 2.1rem; font-weight: 700; line-height: 1.15; margin-top: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-tegel .waarde.let-op { color: var(--let-op); } .dash-tegel .waarde.fout { color: var(--fout); }
.dash-tegel .sub { font-size: .88rem; color: var(--inkt-zacht); margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.maatbalk { height: 6px; background: var(--rand-zacht); border-radius: 3px; overflow: hidden; margin-top: .75rem; }
.maatbalk-vul { height: 100%; width: 0; background: var(--blauw); border-radius: 3px; position: relative; transition: width .6s ease; }
.maatbalk-vul.oranje { background: var(--oranje); } .maatbalk-vul.rood { background: var(--fout); } .maatbalk-vul.groen { background: var(--goed); }
.maatbalk-verv { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--oranje); transition: width .6s ease; }
.dash-saldi .maatbalk { height: 5px; margin-top: .4rem; max-width: 420px; }
.dash-aandacht td, .dash-saldi td, .dash-lijst td { padding-top: .65rem; padding-bottom: .65rem; }
.dash-lijst .getal { font-family: var(--kop); font-size: 1.35rem; font-weight: 700; text-align: right; white-space: nowrap; }
.dash-lijst .getal small { font-family: var(--tekst); font-size: .84rem; font-weight: 500; color: var(--inkt-zacht); margin-left: .4rem; }

/* Opmaakveld (afspraak-omschrijving): balkje met vet/cursief/lijst/link, nooit ruwe HTML in beeld */
.veld-opmaak { margin-bottom: .9rem; }
.veld-opmaak .veldnaam { display: block; font-size: .88rem; font-weight: 600; color: var(--inkt-zacht); margin-bottom: .3rem; }
.opmaakbalk { display: flex; gap: .2rem; align-items: center; border: 1px solid var(--rand); border-bottom: 0; border-radius: 4px 4px 0 0; background: var(--kopgrijs); padding: .3rem .4rem; }
.opmaakbalk button { height: 28px; min-width: 28px; padding: 0 .55rem; border: 1px solid transparent; border-radius: 4px; background: transparent; font-family: var(--tekst); font-size: .88rem; color: var(--inkt); cursor: pointer; }
.opmaakbalk button:hover { background: var(--wit); border-color: var(--rand); }
.opmaakbalk .scheiding { width: 1px; height: 18px; background: var(--rand); margin: 0 .35rem; }
.opmaakveld { min-height: 130px; border: 1px solid var(--rand); border-radius: 0 0 4px 4px; padding: .6rem .8rem; font-size: .97rem; line-height: 1.5; color: var(--inkt); background: var(--wit); outline: none; font-weight: 400; }
.opmaakveld:focus { border-color: var(--blauw); box-shadow: 0 0 0 3px var(--blauw-licht); }
.opmaakveld ul, .opmaakveld ol { margin: .25rem 0 .25rem 1.3rem; padding: 0; }
.opmaakveld p { margin: 0 0 .4rem; }
.opmaakveld a { color: var(--blauw); text-decoration: underline; }
.formulier textarea.opmaak-bron { display: none; }

/* Cellen met een tweede regel (naam + toelichting): lucht boven en onder, zodat de naam niet tegen de bovenkant plakt */
table.t td:has(> br) { height: auto; padding-top: .6rem; padding-bottom: .6rem; line-height: 1.35; }

/* AH openstaand: statusvorm (keuze, reden, Opslaan) past in zijn kolom */
col.k-480 { width: 480px; }
.afl-tabel td .regelvorm.klein { display: flex; flex-wrap: nowrap; align-items: center; gap: .4rem; padding: 0; border: 0; background: transparent; min-width: 0; }
.afl-tabel td .regelvorm.klein select { width: 180px; flex: none; min-width: 0; height: 32px; font-size: .9rem; }
.afl-tabel td .regelvorm.klein input { flex: 1 1 100px; min-width: 80px; width: auto; height: 32px; border: 1px solid var(--rand); border-radius: 4px; padding: 0 .5rem; font-family: var(--tekst); font-size: .9rem; }
.afl-tabel td .regelvorm.klein .knop { flex: none; }
/* Documenten: zoekveld in de paneelkop */
.paneel-kop .kopzoek { margin-left: auto; }
.paneel-kop .kopzoek input { height: 32px; width: 260px; border: 1px solid var(--rand); border-radius: 4px; padding: 0 .6rem; font-family: var(--tekst); font-size: .92rem; }
.paneel-kop .kopzoek + .keuze { margin-left: .8rem; }
.paneel-kop .keuze + .meer { margin-left: 1rem; }

/* Schil als kolom: bovenbalk, tabs en eventuele kijkband nemen hun hoogte, de schil vult de rest. Zo is de pagina nooit hoger dan het
   venster en kan de browser hem niet verschuiven als een veld buiten beeld focus krijgt (bovenbalk half weg). */
body:not(.loginpagina) { display: flex; flex-direction: column; }
body:not(.loginpagina) > header.balk, body:not(.loginpagina) > .kijkband, body:not(.loginpagina) > .tabs { flex-shrink: 0; }
body:not(.loginpagina) > .schil { flex: 1 1 auto; min-height: 0; height: auto; }

/* Documentregels (AH facturen en specificaties): naam | datum en grootte | oog en pijl, overal op dezelfde plek */
.doc-weken td { height: auto; padding-top: .5rem; padding-bottom: .5rem; }
.doc { display: grid; grid-template-columns: minmax(0, 1fr) 170px 64px; align-items: center; gap: .7rem; min-height: 30px; }
.doc + .doc { margin-top: .35rem; }
.doc .doc-naam { font-weight: 600; color: var(--blauw-donker); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc .doc-meta { font-size: .88rem; color: var(--inkt-zacht); white-space: nowrap; }
.doc .doc-acties { display: inline-flex; gap: .3rem; justify-content: flex-end; }
.doc-leeg { color: var(--inkt-mist); }
.ikoonknop { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid var(--rand); color: var(--inkt-zacht); background: var(--wit); }
.ikoonknop:hover { border-color: var(--blauw); color: var(--blauw); background: var(--blauw-zacht); }
.ikoonknop svg { width: 15px; height: 15px; }
table.t td a.ikoonknop { font-weight: 400; color: var(--inkt-zacht); }
table.t td a.ikoonknop:hover { color: var(--blauw); }

/* Knop met ikoon (Verversen: twee pijltjes in een rondje) */
.knop.met-ikoon { display: inline-flex; align-items: center; gap: .45rem; }
.knop .ikoon { width: 15px; height: 15px; flex: none; }
.ververs-vorm { display: inline-flex; }

/* Uitgaande mail: kop zoals in een mailprogramma, daaronder de mail zelf */
.mailkaart .mail-kop { padding: 1.1rem 1.4rem 1rem; border-bottom: 1px solid var(--rand); flex: none; }
.mail-onderwerp { font-family: var(--kop); font-size: 1.25rem; font-weight: 700; color: var(--inkt); margin-bottom: .7rem; }
.mail-regel { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: .6rem; font-size: .95rem; line-height: 1.75; }
.mail-regel > span:first-child { color: var(--inkt-zacht); }
.mail-regel b { font-weight: 600; }
.paneel.viewer.mailkaart { height: calc(100vh - 190px); }
.paneel.viewer.mailkaart iframe { background: var(--wit); }

.doc-weken.perweek { table-layout: fixed; width: 100%; }
.doc-weken col.k-helft { width: calc(50% - 70px); }
.doc-weken th { white-space: nowrap; }
.doc-weken td { vertical-align: top; }
.doc-weken.perweek td:nth-child(3), .doc-weken.perweek th:nth-child(3) { border-right: 1px solid var(--rand-zacht); }
.doc-weken.perweek td:nth-child(4), .doc-weken.perweek th:nth-child(4) { padding-left: 1.4rem; }
.doc-weken td .doc, .doc-weken td .doc-leeg { min-height: 30px; }
.doc-weken td .doc-leeg { display: flex; align-items: center; }
/* Rapport als tabel (csv/xlsx uit de Drive) */
.tabelrol { overflow: auto; max-height: calc(100vh - 260px); }
.rapport-tabel th, .rapport-tabel td { white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; font-size: .88rem; padding: 0 .7rem; height: 32px; }
.rapport-tabel thead th { position: sticky; top: 0; background: var(--kopgrijs); z-index: 1; }

/* Kruisje (uit het archief halen): altijd zichtbaar, rood bij aanwijzen */
.knop.icoon svg.kruis { display: block; flex: 0 0 16px; width: 16px; min-width: 16px; height: 16px; stroke: currentColor; fill: none; }
.knop.icoon { color: var(--inkt-zacht); }
/* Rapporttabel: kolommen op inhoud, horizontaal scrollen in plaats van afkappen */

/* Rapportweergave: leesbaar = kolommen op inhoud, alles = ruw met horizontaal scrollen */
table.t.rapport-tabel { table-layout: auto; width: max-content; min-width: 100%; }
table.t.rapport-tabel th, table.t.rapport-tabel td { white-space: nowrap; font-size: .9rem; padding: 0 .9rem; height: 36px; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
table.t.rapport-tabel.net th, table.t.rapport-tabel.net td { font-size: .93rem; max-width: 520px; }
table.t.rapport-tabel thead th { position: sticky; top: 0; background: var(--kopgrijs); z-index: 1; }
table.t.rapport-tabel tfoot td { border-top: 2px solid var(--rand); border-bottom: 0; background: var(--kopgrijs); position: sticky; bottom: 0; }

/* Prijslijsten: selectievak en tabel met vinkjes */
.pl-selectie .pl-velden { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: flex-start; padding: 1rem 1.1rem 1.1rem; }
.pl-selectie label, .pl-selectie .pl-merken { display: flex; flex-direction: column; gap: .35rem; font-size: .84rem; font-weight: 600; color: var(--inkt-zacht); min-width: 0; }
.pl-selectie select { height: 36px; min-width: 320px; border: 1px solid var(--rand); border-radius: 4px; padding: 0 .6rem; font-family: var(--tekst); font-size: .95rem; background: var(--wit); color: var(--inkt); }
.pl-selectie .pl-merkkeuze { flex-wrap: wrap; height: auto; min-height: 36px; }
.pl-tabel td:first-child, .pl-tabel th:first-child { text-align: center; padding-right: 0; }
.pl-tabel input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--blauw); margin: 0; vertical-align: middle; }
.pl-tabel tbody tr { cursor: pointer; }
.pl-tel { font-weight: 600; opacity: .85; }

/* AH Voordeelshop */
.ahv-selectie .ahv-velden { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: flex-start; padding: 1rem 1.1rem 1.1rem; }
.ahv-veld { display: flex; flex-direction: column; gap: .35rem; font-size: .84rem; font-weight: 600; color: var(--inkt-zacht); min-width: 0; }
.ahv-veld > div:not(.keuze), .ahv-periodetekst > div { font-weight: 500; font-size: .95rem; color: var(--inkt); line-height: 36px; }
.ahv-veld select, .ahv-veld input[type="date"] { height: 36px; min-width: 200px; border: 1px solid var(--rand); border-radius: 4px; padding: 0 .6rem; font-family: var(--tekst); font-size: .95rem; background: var(--wit); color: var(--inkt); }
.ahv-veld .keuze { flex-wrap: wrap; height: auto; min-height: 36px; }
.ahv-veld .keuze .stip.klein { width: 8px; height: 8px; margin-right: .4rem; }
.ahv-grafiek-wrap { padding: .6rem 1.1rem 1rem; }
.ahv-grafiek-wrap svg { width: 100%; height: auto; display: block; }
.paneel-kop .ahv-grafiek-schakel { margin-left: 1rem; }
.paneel-kop .ahv-grafiek-schakel + .meer { margin-left: auto; }
table.t tr.ahv-onderdeel td { height: 32px; font-size: .88rem; }
table.t tr.ahv-annulering td { color: var(--fout); } table.t tr.ahv-annulering td.zacht { color: var(--fout); opacity: .75; }
table.t tr.ahv-retour td { color: var(--let-op); } table.t tr.ahv-retour td.zacht { color: var(--let-op); opacity: .75; }
.ahv-merkkaarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-bottom: 1.2rem; }
.ahv-merkkaarten .paneel.ahv-verborgen { opacity: .65; }
.ahv-merkkaarten .paneel-kop h2 a { color: var(--blauw-donker); }
table.t tr.ahv-uit td { color: var(--inkt-mist); }
.ahv-contactnieuw input, .ahv-contactnieuw select { height: 34px; border: 1px solid var(--rand); border-radius: 4px; padding: 0 .6rem; font-family: var(--tekst); font-size: .92rem; background: var(--wit); flex: 1; min-width: 0; }
.ahv-contactnieuw select { flex: 0 0 120px; }
table.t td select.klein { height: 30px; border: 1px solid var(--rand); border-radius: 4px; padding: 0 .4rem; font-family: var(--tekst); font-size: .88rem; background: var(--wit); }
.formulier .veldnaam { font-size: .88rem; font-weight: 600; color: var(--inkt-zacht); margin: 0 0 .4rem; }
.formulier .veldnaam a { font-weight: 500; margin-left: .5rem; }
.formulier textarea { font-size: .95rem; }
.ahv-contactlijst .vinkje { display: flex; align-items: center; gap: .5rem; font-weight: 500; color: var(--inkt); margin-bottom: .4rem; }
.ahv-contactlijst .vinkje b { font-weight: 600; }
.ahv-artikeltabel { max-height: 520px; overflow: auto; }
.ahv-artikeltabel thead th { position: sticky; top: 0; background: var(--kopgrijs); z-index: 1; }
.ahv-artikeltabel tbody tr { cursor: pointer; }
.ahv-artikeltabel input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--blauw); margin: 0; vertical-align: middle; }
.kolommen.twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Vinkjes ook buiten een formulier (filterbalk, paneelvoet) */
.filterbalk label.vinkje, .paneel-voet label.vinkje { position: relative; display: inline-flex; align-items: center; gap: .5rem; font-size: .92rem; font-weight: 500; color: var(--inkt); cursor: pointer; }
.filterbalk label.vinkje input[type="checkbox"], .paneel-voet label.vinkje input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.filterbalk label.vinkje i, .paneel-voet label.vinkje i { width: 18px; height: 18px; border-radius: 4px; border: 2px solid var(--inkt-mist); background: var(--wit); flex-shrink: 0; position: relative; }
.filterbalk label.vinkje input:checked + i, .paneel-voet label.vinkje input:checked + i { background: var(--blauw); border-color: var(--blauw); }
.filterbalk label.vinkje input:checked + i::after, .paneel-voet label.vinkje input:checked + i::after { content: ""; position: absolute; left: 4px; top: 0; width: 5px; height: 9px; border: solid var(--wit); border-width: 0 2px 2px 0; transform: rotate(45deg); }

.ahv-contactlijst { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.ahv-merkkaarten td.knopcel { white-space: nowrap; }
.ahv-merkkaarten td.knopcel form { display: inline-flex; vertical-align: middle; margin-left: .3rem; }

/* Sales-inzichten */
.kolommen.vijf { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sv-delta { font-weight: 600; white-space: nowrap; } .sv-delta.plus { color: var(--goed); } .sv-delta.min { color: var(--fout); } .sv-delta.nul, .sv-delta.nieuw { color: var(--inkt-zacht); }
.sv-plus { color: var(--goed); font-weight: 600; } .sv-min { color: var(--fout); font-weight: 600; }
.sv-impact { font-family: var(--kop); font-weight: 700; white-space: nowrap; } .sv-impact.plus { color: var(--goed); } .sv-impact.min { color: var(--fout); }
.sv-grafiek { padding: .4rem .8rem .4rem; } .sv-grafiek svg { display: block; width: 100%; height: auto; }
.sv-legenda { display: flex; gap: 1.1rem; padding: 0 1.1rem .9rem; font-size: .82rem; color: var(--inkt-zacht); flex-wrap: wrap; }
.sv-legenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .4rem; vertical-align: -1px; background: var(--blauw); }
.sv-legenda .vorig::before { background: #bfe0f2; } .sv-legenda .oranje::before { background: var(--oranje); }
.sv-pad { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: -.4rem 0 1rem; font-size: .9rem; color: var(--inkt-zacht); }
.sv-pad a { color: var(--blauw-donker); font-weight: 600; } .sv-pad .dim { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--inkt-mist); font-weight: 600; }
.sv-pad .huidig { color: var(--inkt); font-weight: 600; } .sv-pad .weg { margin-left: .2rem; color: var(--inkt-mist); }
.sv-stappen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; padding: .2rem 1.1rem 1.1rem; }
.sv-stap { border: 1px solid var(--rand-zacht); border-radius: 6px; padding: .6rem .75rem; background: var(--canvas); }
.sv-stap-label { font-size: .78rem; font-weight: 600; color: var(--inkt-zacht); } .sv-stap-waarde { font-family: var(--kop); font-weight: 700; font-size: 1.1rem; margin-top: .1rem; }
.sv-stap-top { margin-top: .35rem; font-size: .78rem; color: var(--inkt-mist); line-height: 1.4; } .sv-stap-top b { color: var(--inkt-zacht); font-weight: 600; }
svg.sv-balk { display: block; width: 90px; height: 6px; border-radius: 3px; background: var(--rand-zacht); } svg.sv-balk rect { fill: var(--blauw); }
table.t td.sv-spark { padding-top: .25rem; padding-bottom: .25rem; } table.t td.sv-spark svg { display: block; }
.sv-voetnoot { color: var(--inkt-mist); font-size: .84rem; margin-top: .6rem; }
table.t.sv-matrix { font-size: .86rem; table-layout: auto; width: max-content; min-width: 100%; }
table.t.sv-matrix th.kol { height: 130px; vertical-align: bottom; white-space: nowrap; padding: .4rem .3rem; }
table.t.sv-matrix th.kol span { writing-mode: vertical-rl; transform: rotate(180deg); display: inline-block; }
table.t.sv-matrix td.cel { text-align: right; padding: .3rem .4rem; border-left: 1px solid var(--rand-zacht); height: auto; }
table.t.sv-matrix td.cel a { display: block; color: var(--inkt); font-weight: 500; border-radius: 4px; padding: .2rem .4rem; text-decoration: none; }
table.t.sv-matrix td.cel a:hover { outline: 2px solid var(--blauw); } table.t.sv-matrix td.cel small { display: block; font-size: .72rem; }
table.t.sv-matrix td.cel.kans a { background: #fff4e5; color: var(--let-op); font-weight: 700; } table.t.sv-matrix td.cel.leeg a { color: var(--inkt-mist); }
table.t.sv-matrix .w1 a { background: #eef7fc; } table.t.sv-matrix .w2 a { background: #d6ecf8; } table.t.sv-matrix .w3 a { background: #b8def3; }
table.t.sv-matrix .w4 a { background: #8fcbea; } table.t.sv-matrix .w5 a { background: #5fb4e0; color: var(--wit); } table.t.sv-matrix .w5 a small { color: var(--wit); }

/* Beeldbeheer (Relatielogo's, Productbeelden): kaarten in een raster, opties als miniaturen, voortgang van een taak */
.bb-filter { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.bb-filter select { width: auto; min-width: 160px; }
.bb-filter input[type=search] { flex: 1 1 260px; min-width: 200px; }
.bb-filter .vinkje { font-size: .9rem; }
.bb-filter .bb-peil { margin-left: auto; font-size: .86rem; display: inline-flex; align-items: center; gap: .3rem; }
.bb-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: .9rem; padding: .9rem 1.1rem 1.1rem; }
.bb-leeg { color: var(--inkt-zacht); font-size: .95rem; grid-column: 1 / -1; margin: 0; }
.bb-kaart { display: flex; gap: .9rem; background: var(--wit); border: 1px solid var(--rand); border-radius: 6px; padding: .8rem; min-width: 0; transition: opacity .18s, transform .18s; }
.bb-kaart.akkoord { border-color: var(--goed); }
.bb-kaart.geupload { border-color: #bfe3cc; }
.bb-kaart.overgeslagen { opacity: .6; }
.bb-kaart.keten { border-left: 4px solid var(--blauw); }
.bb-kaart.wacht { opacity: .55; }
.bb-kaart.weg { opacity: 0; transform: scale(.97); }
.bb-beeld { flex: 0 0 104px; width: 104px; height: 104px; border-radius: 6px; border: 1px solid var(--rand-zacht); background: var(--wit); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.bb-kaart.product .bb-beeld { flex-basis: 124px; width: 124px; height: 124px; }
.bb-beeld img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bb-leegbeeld { font-family: var(--kop); font-size: 2rem; font-weight: 700; color: var(--inkt-mist); }
.bb-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.bb-naam { font-weight: 700; font-size: .97rem; line-height: 1.3; }
.bb-regel { font-size: .84rem; line-height: 1.4; }
.bb-zoekrij { display: flex; gap: .4rem; margin-top: .25rem; }
.bb-zoekrij input[type=text] { flex: 1; min-width: 0; height: 30px; margin: 0; padding: 0 .6rem; font-size: .84rem; }
.bb-kaart .knop { height: 28px; padding: 0 .65rem; font-size: .82rem; cursor: pointer; }
.bb-acties { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .2rem; }
.bb-acties form { margin: 0; }
.bb-opties { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.bb-opties form { margin: 0; }
.bb-optie { width: 48px; height: 48px; padding: 2px; border-radius: 6px; border: 2px solid var(--rand); background: var(--wit); cursor: pointer; }
.bb-optie img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 3px; }
.bb-optie:hover { border-color: var(--blauw); }
.bb-optie.gekozen { border-color: var(--blauw); box-shadow: 0 0 0 2px var(--blauw-licht); }
.bb-leden { font-size: .84rem; color: var(--inkt-zacht); margin-top: .25rem; }
.bb-leden summary { cursor: pointer; font-weight: 600; color: var(--blauw-donker); }
.bb-leden ul { margin: .4rem 0 0; padding: 0; list-style: none; max-height: 14rem; overflow-y: auto; }
.bb-leden li { display: flex; align-items: center; gap: .6rem; line-height: 1.5; }
.bb-leden li > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-leden .bb-los { margin: 0; }
.bb-leden .bb-los .knop { height: 22px; padding: 0 .5rem; font-size: .76rem; }
.bb-taak { padding: .8rem 1.1rem .9rem; margin-bottom: 1.2rem; }
.bb-balk { height: 8px; background: var(--blauw-licht); border-radius: 4px; overflow: hidden; margin: .6rem 0 .5rem; }
.bb-vulling { height: 100%; width: 0; background: var(--blauw); border-radius: 4px; transition: width .4s; }
.bb-regels { list-style: none; margin: 0; padding: 0; font-size: .84rem; color: var(--inkt-zacht); }
.bb-regels li { line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-regels li:last-child { color: var(--inkt); font-weight: 600; }
.bb-groep + .bb-groep { margin-top: 1.2rem; }

/* Bevestigingsvenster (window.wpBevestig): sluier over de hele schil, venster in paneelstijl */
.dialoog-achtergrond { position: fixed; inset: 0; z-index: 200; background: rgba(27,39,51,.35); display: flex; align-items: center; justify-content: center; padding: 1.5rem; opacity: 0; transition: opacity .15s; }
.dialoog-achtergrond.open { opacity: 1; }
.dialoog { width: 100%; max-width: 440px; background: var(--wit); border: 1px solid var(--rand); border-radius: 8px; box-shadow: 0 24px 48px -16px rgba(27,39,51,.45); transform: translateY(6px); transition: transform .15s; }
.dialoog-achtergrond.open .dialoog { transform: none; }
.dialoog-kop { font-family: var(--kop); font-size: 1.08rem; font-weight: 700; padding: 1rem 1.2rem .2rem; }
.dialoog-tekst { padding: .4rem 1.2rem 1.1rem; font-size: .97rem; line-height: 1.5; color: var(--inkt-zacht); }
.dialoog-knoppen { display: flex; justify-content: flex-end; gap: .5rem; padding: .8rem 1.2rem 1rem; border-top: 1px solid var(--rand-zacht); }
.dialoog .knop.gevaar { background: var(--fout); border-color: var(--fout); color: var(--wit); }
.dialoog .knop.gevaar:hover { background: #991b1b; border-color: #991b1b; }

/* Automatiseringen: verloop met dagkoppen, schema met uitklapbare wijzigvorm, ruwe log */
table.t tr.auto-dagkop td { background: var(--kopgrijs); color: var(--inkt-zacht); font-weight: 600; font-size: .84rem; padding-top: .35rem; padding-bottom: .35rem; }
table.t td.auto-tekst, table.t td.auto-uitkomst { white-space: normal; line-height: 1.4; }
table.t td.auto-knopjes, table.t.auto-schema td.rechts { white-space: nowrap; overflow: visible; } table.t td.auto-knopjes .ikoonknop + .ikoonknop { margin-left: .3rem; }
table.t tr.auto-schemavorm td { background: var(--blauw-zacht); }
.auto-vorm { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; align-items: flex-start; padding: .4rem 0 .6rem; }
.auto-blok { display: flex; flex-direction: column; gap: .4rem; min-width: 220px; }
.auto-bloktitel { font-size: .82rem; font-weight: 600; color: var(--inkt-zacht); }
.auto-dagen label { text-transform: capitalize; }
.auto-modus { display: flex; align-items: center; gap: .4rem; font-size: .9rem; margin-top: .2rem; }
.auto-tijden { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-left: 1.4rem; }
.auto-tijden input[type=time] { width: 110px; height: 30px; margin: 0; padding: 0 .5rem; }
.auto-tijden.uit { opacity: .45; pointer-events: none; }
.auto-tijden .knop { height: 28px; padding: 0 .6rem; font-size: .82rem; }
.auto-vorm input[type=text] { width: 420px; max-width: 100%; height: 32px; margin: 0; padding: 0 .6rem; }
.auto-knoppen { display: flex; gap: .5rem; align-self: flex-end; }
.auto-log summary { cursor: pointer; list-style: none; } .auto-log summary::-webkit-details-marker { display: none; }
.auto-logtekst { margin: 0; padding: .9rem 1.1rem; font: .8rem/1.5 ui-monospace, Consolas, monospace; color: var(--inkt-zacht); white-space: pre-wrap; max-height: 24rem; overflow: auto; }
.auto-voet { margin: 1rem 0 0; font-size: .86rem; }