/* Gladiolen Partners — branding (kleuren + fonts van www.gladiolen.be),
hergebruikt uit de booking-tool zodat beide tools identiek aanvoelen. */
@font-face {
font-family: "Rand";
src: url("fonts/Rand-Medium.woff2") format("woff2");
font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Rand";
src: url("fonts/Rand-Heavy.woff2") format("woff2");
font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Flexa";
src: url("fonts/GT-Flexa-Compressed-Black.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
}
:root {
/* ---- merkkleuren (gladiolen.be / festival-styleguide 2024, TOYKYO) ----
Kleurenhiërarchie (Gladiolen UI v2.0) — wie wat mag dragen:
paars primaire actie, max. één per scherm (altijd witte tekst erop)
groen topbar, titels, actieve keuzes, vinkjes, sleepdoelen
geel accent óp groen (niet in de navigatiebalk)
oranje focus, bedragen en wat nog open staat — nooit een knopvlak
marine data-accent: initialen, aantallen, kolomkoppen in tegels
koraal gevaar en te laat · crème het werkvlak
blauw selectietint, tekst op groen én de actieve tab in de topbar
Felle kleuren zijn accenten, geen achtergronden. */
--blauw: #B1E4FF;
--inkt: #18120C;
--groen: #1C5E48;
--oranje: #FF460D;
--creme: #F3F2F1;
--geel: #FFCF5D;
--paars: #D280FF;
--roze: #FFBCE5;
--koraal: #FF5D5D;
--blauw-fel: #227FFF;
--marine: #0C225D;
--wit: #fff;
/* festival-accenten: enkel voor campagnevlakken, niet in de UI zelf */
--donkerblauw: #154CA7;
--warm-oranje: #FFAE50;
--donkerpaars: #950E66;
--felgeel: #FFEF3B;
--lichtgroen: #C1F12F;
/* ---- hover-varianten van de vlakke kleuren ---- */
--groen-hover: #174E3C;
--paars-hover: #C566F7;
/* ---- inkt-alpha's: secundair .55 · hints .45 · hairline .08 · hover .03–.05 ---- */
--inkt-70: rgba(24,18,12,.7);
--inkt-55: rgba(24,18,12,.55);
--inkt-45: rgba(24,18,12,.45);
--inkt-30: rgba(24,18,12,.3);
--hairline: rgba(24,18,12,.08);
--hairline-veld: rgba(24,18,12,.16);
--hover-rij: rgba(24,18,12,.03);
--hover-vlak: rgba(24,18,12,.05);
/* ---- radius: kaart 18 · tegel 16 · veld 12 · pill 999 ---- */
--radius: 18px;
--radius-tegel: 16px;
--radius-veld: 12px;
--radius-pill: 999px;
/* ---- elevatie: de hairline draagt, schaduw enkel voor drawer/modal/toast ---- */
--shadow: 0 1px 2px rgba(12,34,93,.04);
--shadow-hoog: 0 18px 50px rgba(12,34,93,.18);
/* ---- focus & motie: 120–160ms, nooit schaal-op-hover ---- */
--focus-ring: 0 0 0 3px rgba(255,70,13,.12);
--motie: 140ms ease;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Crème is het werkvlak. Felle merkkleuren zijn accenten, geen achtergronden. */
body {
margin: 0;
background: var(--creme);
color: var(--inkt);
font-family: "Rand", "Circular", system-ui, sans-serif;
font-weight: 500;
font-size: 15px;
line-height: 1.45;
-webkit-font-smoothing: antialiased;
}
a { color: var(--groen); }
a:hover { color: var(--oranje); }
/* ---------- typografie ----------
Flexa spaarzaam: enkel paginatitels, sectiekoppen en grote cijfers.
Altijd font-weight:normal (anders synthetische bold) en letter-spacing -2%. */
.t-display, .t-titel, .t-sectie {
font-family: "Flexa"; font-weight: normal; text-transform: uppercase;
line-height: 1; letter-spacing: -.02em; margin: 0;
}
.t-titel { font-size: clamp(34px, 4.5vw, 44px); color: var(--groen); }
.t-sectie { font-size: 26px; color: var(--inkt); }
.t-label {
font-size: 11px; font-weight: 800; text-transform: uppercase;
letter-spacing: .06em; color: var(--inkt-55);
}
.t-secundair { font-size: 13px; color: var(--inkt-55); }
.num { font-variant-numeric: tabular-nums; }
/* ---------- vormen uit de festival-styleguide ---------- */
/* Ticket: vlak met halfronde inkepingen links en rechts — één per scherm. */
.ticket {
--tk-inkeping: 6px;
border-radius: 12px;
mask:
radial-gradient(circle var(--tk-inkeping) at 0 50%, transparent 97%, black) left / 51% 100% no-repeat,
radial-gradient(circle var(--tk-inkeping) at 100% 50%, transparent 97%, black) right / 51% 100% no-repeat;
-webkit-mask:
radial-gradient(circle var(--tk-inkeping) at 0 50%, transparent 97%, black) left / 51% 100% no-repeat,
radial-gradient(circle var(--tk-inkeping) at 100% 50%, transparent 97%, black) right / 51% 100% no-repeat;
}
/* Stippellijn (dotted, niet dashed) voor optionele en lege elementen. */
.stippel { border: 2px dotted var(--inkt-30); background: none; }
/* ---------- header ---------- */
.topbar {
position: sticky; top: 0; z-index: 30;
background: var(--groen);
color: var(--wit);
}
.topbar-inner {
padding: 9px 24px;
display: flex; align-items: center; gap: 20px;
}
.brand-logo { display: flex; align-items: center; flex-shrink: 0; }
.brand-logo img { height: 46px; display: block; }
.topbar-actions {
display: flex; gap: 8px; margin-left: auto; flex-shrink: 0; align-items: center;
}
/* in de balk staan de knoppen een maatje kleiner dan op de pagina */
.topbar-actions .btn { height: 38px; padding: 0 18px; font-size: 14px; }
/* navigatietabs — actieve tab in lichtblauw, hover wit 12% */
.nav-tabs { display: flex; gap: 4px; margin-right: auto; flex-wrap: wrap; }
.nav-tab {
font: inherit; font-weight: 800; font-size: 14px; text-decoration: none;
color: var(--blauw); padding: 8px 16px; border-radius: var(--radius-pill);
white-space: nowrap; transition: background var(--motie), color var(--motie);
}
.nav-tab:hover { background: rgba(255,255,255,.12); color: var(--blauw); }
.nav-tab.active { background: var(--blauw); color: var(--groen); }
/* ---------- knoppen ----------
Vaste hoogtes 44/36, rustige tint-verschuiving, nooit schalen op hover. */
.btn {
font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; text-decoration: none;
border: 1px solid transparent; border-radius: var(--radius-pill);
height: 44px; padding: 0 22px;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
white-space: nowrap;
transition: background var(--motie), border-color var(--motie), color var(--motie);
}
.btn:focus-visible { outline: none; border-color: var(--oranje); box-shadow: var(--focus-ring); }
/* Paars is gereserveerd voor de primaire actie — maximaal één per view.
Oranje is géén knopkleur (meer): dat blijft voor focus, bedragen en nadruk. */
.btn-primary { background: var(--paars); color: var(--wit); }
.btn-primary:hover { background: var(--paars-hover); }
/* Een link die als knop rendert, houdt de knopkleur: de globale a:hover
(oranje) is specifieker dan de knopklasse en zou er anders doorheen komen. */
a.btn:hover { color: var(--inkt); }
a.btn-primary:hover, a.btn-groen:hover, a.btn-koraal:hover, a.btn-ghost:hover { color: var(--wit); }
.btn-secundair { background: var(--wit); color: var(--inkt); border-color: var(--hairline-veld); }
.btn-secundair:hover { background: rgba(24,18,12,.04); }
.btn-neutraal { background: rgba(24,18,12,.06); color: var(--inkt); }
.btn-neutraal:hover { background: rgba(24,18,12,.1); }
.btn-groen { background: var(--groen); color: var(--wit); }
.btn-groen:hover { background: var(--groen-hover); }
.btn-koraal { background: var(--koraal); color: var(--wit); }
.btn-koraal:hover { background: #e94a4a; }
/* ghost = op de groene balk */
.btn-ghost { background: rgba(255,255,255,.14); color: var(--wit); }
.btn-ghost:hover { background: rgba(255,255,255,.22); color: var(--wit); }
.btn-danger {
background: none; color: var(--koraal); font-weight: 500; font-size: 14px;
height: auto; padding: 0; border: none;
}
.btn-danger:hover { text-decoration: underline; background: none; }
.btn-small { height: 36px; padding: 0 16px; font-size: 13px; }
.btn-icon { display: inline-flex; align-items: center; gap: 7px; }
.btn-icon svg { display: block; flex: none; }
/* ---------- segmented control (lijst/matrix, dagkeuze) ---------- */
.segment {
display: inline-flex; gap: 2px; background: rgba(24,18,12,.06);
border-radius: var(--radius-pill); padding: 3px; align-self: flex-start;
}
.segment button {
font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; border: none;
background: none; color: var(--inkt-55); border-radius: var(--radius-pill);
padding: 7px 16px; transition: background var(--motie), color var(--motie);
}
.segment button:hover { color: var(--inkt); }
.segment button.active { background: var(--wit); color: var(--inkt); box-shadow: 0 1px 3px rgba(24,18,12,.12); }
/* ---------- statuspill met stip ----------
De kleur zit in de stip en de tekst, de achtergrond blijft zacht. */
.pill {
display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
font-weight: 800; font-size: 12px; padding: 5px 12px 5px 10px;
border-radius: var(--radius-pill);
background: rgba(24,18,12,.06); color: var(--inkt-55);
}
.pill::before {
content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
background: var(--dot, currentColor);
}
/* ---------- layout ---------- */
main { max-width: 1280px; margin: 0 auto; padding: 22px 24px 80px; }
.page-intro { margin: 0 0 18px; }
.terug-link {
display: inline-block; margin: 0 0 8px; font-size: 13px; font-weight: 800;
color: var(--inkt-55); text-decoration: none;
}
.terug-link:hover { color: var(--oranje); }
.page-intro h1 {
font-family: "Flexa"; font-weight: normal; text-transform: uppercase;
font-size: clamp(28px, 4vw, 44px); color: var(--groen); margin: 0 0 4px; letter-spacing: -.02em;
line-height: .95;
}
.page-intro p { margin: 0; color: var(--inkt-55); font-size: 14px; }
/* ---------- stats / totalen ---------- */
.stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
/* Statsrij met een actieknop erlangs: "+ Partner" en "Toon afgevinkte" horen
bij het overzicht dat ze bedienen, niet bij de hoofdnavigatie. De knop
houdt rechts stand; op smalle schermen zakt hij onder de tegels. */
.stats-rij { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.stats-rij .stats { flex: 1 1 auto; margin-bottom: 0; }
.stats-rij > .btn { flex: 0 0 auto; margin-left: auto; }
.stats-toggle { cursor: pointer; font-weight: 800; }
.stats-toggle input { accent-color: var(--groen); width: 16px; height: 16px; margin: 0; cursor: pointer; }
.stat {
background: var(--wit); border-radius: var(--radius-tegel); padding: 12px 20px;
display: flex; align-items: baseline; gap: 8px;
border: 1px solid var(--hairline);
}
.stat.clickable { cursor: pointer; transition: border-color var(--motie); }
.stat.clickable:not(.active):hover { border-color: rgba(24,18,12,.25); }
.stat.active { border-color: var(--inkt); }
.stat b {
font-family: "Flexa"; font-weight: normal; font-size: 28px; color: var(--groen);
letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.stat.euro b { color: var(--oranje); }
.stat span { font-size: 13px; color: var(--inkt-55); }
/* ---------- filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 22px; }
.filters input[type=search], .filters select {
font: inherit; border: 1px solid var(--hairline-veld); border-radius: var(--radius-pill);
padding: 10px 18px; background: var(--wit); color: var(--inkt);
transition: border-color var(--motie), box-shadow var(--motie);
}
.filters input[type=search]:focus, .filters select:focus {
outline: none; border-color: var(--oranje); box-shadow: var(--focus-ring);
}
.filters input[type=search] { flex: 1 1 240px; min-width: 200px; }
.filters select, .field select {
appearance: none; -webkit-appearance: none;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; padding-right: 40px;
}
/* ---------- partner-tabel ---------- */
.table-wrap { background: var(--wit); border: 1px solid var(--hairline); border-radius: var(--radius); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 100%; }
.sp-table { width: 100%; border-collapse: collapse; }
.sp-table thead th {
text-align: left; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
color: var(--inkt-55); padding: 13px 16px; background: var(--wit); white-space: nowrap;
border-bottom: 1px solid rgba(24,18,12,.1); cursor: pointer; user-select: none;
}
.sp-table thead th:hover { color: var(--inkt); }
.sp-table thead th.num { text-align: right; }
.sp-table thead th .sortarrow { opacity: .5; font-size: 10px; }
.sp-table tbody td { padding: 13px 16px; border-top: 1px solid rgba(24,18,12,.06); vertical-align: middle; }
.sp-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-row { cursor: pointer; transition: background var(--motie); }
.sp-row:hover { background: var(--hover-rij); }
.sp-name { font-weight: 800; font-size: 15px; }
.sp-name .sp-contact { display: block; font-weight: 500; font-size: 12px; color: var(--inkt-55); }
.sp-amount { font-weight: 800; }
.sp-open { color: var(--oranje); font-weight: 800; }
.sp-open.zero { color: var(--inkt-30); font-weight: 500; }
tfoot .sp-total td { padding: 14px 16px; border-top: 1px solid rgba(24,18,12,.1); font-weight: 800; color: var(--inkt-55); }
tfoot .sp-total td.num {
text-align: right; font-family: "Flexa"; font-weight: normal; font-size: 22px;
color: var(--oranje); letter-spacing: -.02em;
}
/* ---------- formule-badge & status-pill ---------- */
.tier-badge {
display: inline-flex; align-items: center; font-weight: 800; font-size: 12px;
padding: 4px 11px; border-radius: var(--radius-pill); white-space: nowrap;
}
/* statuspills: zachte achtergrond, donkere tekst, kleur in de stip (zie .pill) */
.pill.st-prospect { --dot: rgba(24,18,12,.35); background: rgba(24,18,12,.06); color: var(--inkt-55); }
.pill.st-benaderd { --dot: #227FFF; background: #E3EEFC; color: var(--marine); }
.pill.st-onderhandeling { --dot: #E09600; background: #FFF1E0; color: #8A5A00; }
.pill.st-akkoord { --dot: #A855F7; background: #F2E4FD; color: #6B1F9E; }
.pill.st-bevestigd { --dot: #1C5E48; background: #E5F3EC; color: var(--groen); }
.pill.st-betaald { --dot: #FFCF5D; background: var(--groen); color: var(--wit); }
.pill.st-afgehaakt { --dot: #FF5D5D; background: #FDE7E7; color: #C22F2F; }
.empty { text-align: center; color: var(--inkt-45); padding: 44px; }
/* ---------- drawer / fiche ---------- */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(12,34,93,.35); z-index: 40; }
.drawer {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 50;
width: min(560px, 100vw); background: var(--creme);
overflow-y: auto; box-shadow: var(--shadow-hoog); border-radius: 24px 0 0 24px;
}
.fiche-head {
position: relative; background: var(--groen); color: var(--wit);
padding: 22px 26px 18px; display: flex; gap: 18px; align-items: center; border-radius: 24px 0 0 0;
}
.fiche-logo, .fiche-logo-placeholder {
width: 84px; height: 84px; border-radius: 16px; object-fit: contain;
background: var(--wit); flex-shrink: 0;
}
.fiche-logo-placeholder {
display: flex; align-items: center; justify-content: center;
font-family: "Flexa"; font-weight: normal; font-size: 34px; color: var(--marine);
}
.fiche-title { flex: 1; min-width: 0; }
.fiche-title h2 {
font-family: "Flexa"; font-weight: normal; font-size: 30px; line-height: .95; margin: 0 0 6px;
text-transform: uppercase; color: var(--wit); word-break: break-word; letter-spacing: -.02em;
}
.fiche-close {
position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,.12); border: none;
color: var(--wit); cursor: pointer; line-height: 1; width: 36px; height: 36px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
}
.fiche-close { transition: background var(--motie); }
.fiche-close:hover { background: rgba(255,255,255,.22); }
.fiche-close .ico { width: 20px; height: 20px; stroke-width: 2.5; }
.fiche-body { padding: 16px 18px 40px; display: flex; flex-direction: column; gap: 14px; }
.sec-hint { font-size: 12px; color: var(--inkt-55); margin: 0 0 12px; line-height: 1.45; }
/* ---------- kaartjes (designsysteem voor de fiche) ----------
Elke rubriek = witte kaart met vaste kop (icoon + titel). Mobile first:
één kolom; op een breder scherm gaan velden in twee kolommen (zie onder). */
.kaart {
background: var(--wit); border: 1px solid var(--hairline);
border-radius: var(--radius); padding: 18px;
}
.kaart-kop {
display: flex; align-items: center; gap: 10px;
font-family: "Flexa"; font-weight: normal; text-transform: uppercase; font-size: 20px;
color: var(--oranje); margin: 0 0 12px; letter-spacing: -.02em; line-height: 1;
}
/* icoonchip: icoon op een zachte tint van dezelfde kleur */
.kaart-ico {
width: 36px; height: 36px; border-radius: 11px; background: #FFF0E8; color: var(--oranje);
display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.kaart-ico .ico { width: 19px; height: 19px; stroke-width: 2.5; }
.kaart-zacht { background: none; border: 2px dotted var(--inkt-30); }
.kaart-zacht .kaart-kop { color: rgba(24,18,12,.5); }
.kaart-zacht .kaart-ico { background: rgba(24,18,12,.06); color: var(--inkt); }
.kaart-zacht .kaart-ico .ico { opacity: .5; }
.fiche-foot { display: flex; flex-direction: column; gap: 6px; padding: 6px 4px 0; }
/* form-velden */
.field-grid { display: grid; grid-template-columns: 1fr; gap: 10px 12px; }
@media (min-width: 520px) { .field-grid { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 4px; }
.field.wide { grid-column: 1 / -1; }
.field input[disabled] { background: rgba(24,18,12,.04); color: var(--inkt-55); }
.field label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--groen); }
.field input, .field select, .field textarea {
font: inherit; border: 1px solid var(--hairline-veld); border-radius: var(--radius-veld);
padding: 10px 14px; background: var(--wit); color: var(--inkt); width: 100%;
transition: border-color var(--motie), box-shadow var(--motie);
}
.field textarea { min-height: 74px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
outline: none; border-color: var(--oranje); box-shadow: var(--focus-ring);
}
.field select { padding-right: 40px; }
.field-hint { font-size: 11px; color: var(--inkt-45); }
.field-hint.hint-fout { color: #C22F2F; }
/* twee velden die bij elkaar horen (straat + nr., postcode + gemeente):
over de volle breedte, maar intern smal/breed verdeeld. */
.field-paar { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 110px; gap: 10px 12px; }
.field-paar.paar-pc { grid-template-columns: 110px 1fr; }
/* ---------- checklists (opvolg-to-do's + voordelen) ---------- */
.checklist { display: flex; flex-direction: column; }
.check-row {
display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 10px; padding: 10px 0;
border-top: 1px solid var(--hairline);
}
.check-row .c-ico { color: var(--groen); display: inline-flex; }
.check-row .c-ico .ico { width: 18px; height: 18px; stroke-width: 2.5; }
.check-row.done .c-ico { color: var(--inkt); opacity: .35; }
.check-row:first-child { border-top: none; }
.check-row > input[type=checkbox] {
width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--groen); cursor: pointer; margin: 0;
}
.check-row .c-label { flex: 1; min-width: 0; cursor: pointer; }
.check-row.done .c-label { color: var(--inkt-45); text-decoration: line-through; }
/* voordeel-rij: aan/uit + label + evt. aantal/tekst + "geregeld" */
.benefit {
display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 8px 10px; padding: 10px 0;
border-top: 1px solid var(--hairline);
}
.benefit:first-child { border-top: none; }
.benefit .b-on { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--groen); cursor: pointer; margin: 0; }
.benefit .b-ico { color: var(--groen); display: inline-flex; }
.benefit .b-ico .ico { width: 18px; height: 18px; stroke-width: 2.5; }
.benefit.off .b-ico { color: var(--inkt); opacity: .3; }
.benefit .b-label { min-width: 0; font-weight: 800; }
/* tweede rij: extra instellingen (aantal, variant, tekst) + "door wie" */
.benefit .b-sub {
grid-column: 3 / -1; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end;
}
.benefit .b-ctl { display: flex; flex-direction: column; gap: 3px; }
.benefit .b-ctl-wide { flex: 1 1 180px; }
.benefit .b-ctl-lbl { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--inkt-55); }
.benefit .b-ctl .b-count, .benefit .b-ctl .b-unit, .benefit .b-ctl .b-variant-std { display: inline-block; }
.benefit .b-ctl .b-unit { margin-left: 6px; }
.benefit .b-sub .door { align-self: center; }
.benefit.off .b-label { font-weight: 500; color: var(--inkt-45); }
.benefit .b-extra-tag {
font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
color: #6B1F9E; background: #F2E4FD; padding: 2px 8px; border-radius: var(--radius-pill); margin-left: 6px;
}
.benefit .b-count { width: 72px; text-align: right; padding: 8px 10px; border: 1px solid var(--hairline-veld); border-radius: 10px; font: inherit; font-variant-numeric: tabular-nums; }
.benefit .b-count:focus, .benefit .b-text:focus { outline: none; border-color: var(--oranje); box-shadow: var(--focus-ring); }
.benefit .b-unit { font-size: 12px; color: var(--inkt-55); }
.benefit .b-text { width: 100%; padding: 8px 11px; border: 1px solid var(--hairline-veld); border-radius: 10px; font: inherit; }
.b-done {
display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800;
color: var(--inkt-45); cursor: pointer; user-select: none; white-space: nowrap;
padding: 5px 11px 5px 9px; border-radius: var(--radius-pill); border: 1px solid var(--hairline-veld); background: var(--wit);
justify-self: end; transition: background var(--motie), border-color var(--motie), color var(--motie);
}
.b-done input { position: absolute; opacity: 0; width: 0; height: 0; }
.b-done .ico-sm { width: 14px; height: 14px; stroke-width: 2.75; opacity: .5; }
.b-done.on { color: var(--groen); border-color: rgba(28,94,72,.35); background: #E5F3EC; }
.b-done.on .ico-sm { opacity: 1; }
.b-done:has(input:focus-visible) { outline: 2px solid var(--oranje); outline-offset: 2px; }
.benefit.off .b-done, .benefit.off .b-sub { display: none; }
/* vrije taken-lijst in de fiche */
/* ---------- notities ----------
Losse notities met een auteur (avatar + naam). Vastgeprikte notities staan
bovenaan de fiche als post-it: geel is hier het accent van dienst, met
inkt-tekst erop (geel draagt nooit witte tekst). De lichte draaiing en de
lage schaduw geven het briefje-gevoel; hover schaalt niets. */
.postits {
display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 14px; margin: 4px 2px 6px;
}
/* Een post-it heeft scherpe hoeken — géén radius, dat is het hele idee van een
afgescheurd briefje. Enige uitzondering op de radius-regels van het
designsysteem, en bewust zo. */
.postit-note {
background: var(--geel); color: var(--inkt); border-radius: 0;
padding: 14px 14px 11px; transform: rotate(var(--rot, 0deg));
box-shadow: 0 2px 6px rgba(12,34,93,.1);
display: flex; flex-direction: column; gap: 10px;
}
/* Partnernaam op de post-it (enkel op het takenscherm, waar de briefjes van
alle partners door elkaar hangen). */
.postit-note .pn-partner {
font: inherit; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
color: rgba(24,18,12,.6); background: none; border: none; padding: 0; cursor: pointer;
text-align: left; align-self: flex-start; max-width: 100%;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.postit-note .pn-partner:hover { color: var(--oranje); }
.postit-note .pn-tekst {
margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; font-weight: 800;
display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden;
}
.postit-note .pn-voet {
display: flex; align-items: center; gap: 8px;
border-top: 1px solid rgba(24,18,12,.14); padding-top: 9px;
}
.postit-note .pn-avatar { width: 26px; height: 26px; font-size: 13px; background: var(--wit); color: var(--groen); }
/* Naam en tijdstip onder elkaar: zo past een volledige naam er altijd op
(naast elkaar werd "Lode Bellens" tot "L…" geknepen). */
.postit-note .pn-wie { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.postit-note .pn-naam { font-size: 12px; font-weight: 800; overflow-wrap: anywhere; }
.postit-note .pn-wanneer { font-size: 10px; font-weight: 500; color: rgba(24,18,12,.55); white-space: nowrap; }
.postit-note .pn-acties { margin-left: auto; display: flex; gap: 2px; flex: 0 0 auto; }
.postit-note .pn-act {
background: none; border: none; cursor: pointer; color: var(--inkt); opacity: .45;
display: inline-flex; padding: 4px; border-radius: 8px; transition: opacity var(--motie), background var(--motie);
}
.postit-note .pn-act:hover { opacity: 1; background: rgba(24,18,12,.1); }
.postit-note .pn-act .ico-sm { width: 15px; height: 15px; stroke-width: 2.75; }
/* Post-it-bord bovenaan het takenscherm (alle partners samen). */
.postit-bord { margin-bottom: 22px; }
.bord-kop {
font-family: "Flexa"; font-weight: normal; text-transform: uppercase; letter-spacing: -.02em;
font-size: 22px; color: var(--groen); margin: 0 0 12px;
display: flex; align-items: center; gap: 8px;
}
.bord-kop .ico { width: 20px; height: 20px; }
.bord-aantal {
font-family: "Rand"; font-size: 12px; font-weight: 800; letter-spacing: 0;
background: var(--geel); color: var(--groen); border-radius: var(--radius-pill); padding: 2px 10px;
}
.notelist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.note-item {
background: var(--wit); border: 1px solid var(--hairline); border-radius: var(--radius-veld);
padding: 11px 13px 9px; display: flex; flex-direction: column; gap: 8px;
}
/* Vastgeprikt: een gele rand-accent links, zodat je in de lijst meteen ziet
welke notitie ook op het post-it-bord hangt. */
.note-item.vast { border-left: 3px solid var(--geel); }
.note-item.done { background: var(--hover-rij); }
.note-kop { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; }
.note-avatar { width: 26px; height: 26px; font-size: 13px; }
.note-kop .note-wie { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-kop .note-wanneer { color: var(--inkt-45); font-weight: 500; white-space: nowrap; }
.note-acties { margin-left: auto; display: flex; gap: 2px; flex: 0 0 auto; }
.note-act {
background: none; border: none; cursor: pointer; color: var(--inkt); opacity: .35;
display: inline-flex; padding: 5px; border-radius: 8px; transition: opacity var(--motie), color var(--motie), background var(--motie);
}
.note-act:hover { opacity: 1; background: var(--hover-vlak); }
.note-act .ico-sm { width: 15px; height: 15px; stroke-width: 2.75; }
.note-act.aan { opacity: 1; color: var(--groen); background: #E5F3EC; }
.note-act-weg:hover { color: var(--koraal); }
.note-tekst { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.note-item.done .note-tekst { color: var(--inkt-55); }
.note-edit { display: flex; flex-direction: column; gap: 8px; }
.note-edit textarea, .note-add textarea {
width: 100%; font: inherit; padding: 10px 12px; background: var(--wit);
border: 1px solid var(--hairline-veld); border-radius: var(--radius-veld); resize: vertical;
}
.note-edit textarea:focus, .note-add textarea:focus {
outline: none; border-color: var(--oranje); box-shadow: var(--focus-ring);
}
.note-edit-knoppen { display: flex; gap: 8px; }
.note-voet { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.note-voldaan {
display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800;
color: var(--inkt-55); cursor: pointer; user-select: none;
}
.note-voldaan input { width: 16px; height: 16px; accent-color: var(--groen); margin: 0; }
.note-item.done .note-voldaan { color: var(--groen); }
.note-vast-tag {
display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 800;
text-transform: uppercase; letter-spacing: .06em; color: #7A5300; background: #FFF4D6;
border-radius: var(--radius-pill); padding: 3px 9px;
}
.note-vast-tag .ico-sm { width: 12px; height: 12px; stroke-width: 2.75; }
/* Deadline van een notitie: rustig grijs, koraal zodra ze over datum is. */
.note-due {
display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800;
color: var(--inkt-55); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.note-due.overdue { color: var(--koraal); }
.note-due .ico-sm { width: 13px; height: 13px; stroke-width: 2.5; }
.pn-due { margin-top: -2px; }
.note-edit-due, .note-add-due {
display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800;
text-transform: uppercase; letter-spacing: .06em; color: var(--inkt-55);
}
.note-edit-due input, .note-add-due input {
font: inherit; font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0;
color: var(--inkt); border: 1px solid var(--hairline-veld); border-radius: var(--radius-veld);
padding: 7px 11px; background: var(--wit); min-width: 0;
}
.note-edit-due input:focus, .note-add-due input:focus {
outline: none; border-color: var(--oranje); box-shadow: var(--focus-ring);
}
.note-add { display: flex; flex-direction: column; gap: 8px; }
.note-add-voet { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.note-add-pin {
display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800;
color: var(--inkt-55); cursor: pointer; user-select: none;
}
.note-add-pin input { width: 16px; height: 16px; accent-color: var(--groen); margin: 0; }
.note-add-voet .btn { margin-left: auto; }
.fiche-meta { font-size: 11px; color: var(--inkt-45); margin: 0; }
/* ---------- nieuwe-partner mini-form ---------- */
.newform {
background: var(--wit); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 22px;
margin-bottom: 22px; display: flex; gap: 10px; flex-wrap: wrap; align-items: end;
}
.newform .field { flex: 1 1 180px; }
/* modeschakelaar (blanco partner / uit een vorige editie) + de bijhorende rij */
.newform .nf-modes { width: 100%; margin-bottom: 4px; }
.nf-body { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; width: 100%; }
.nf-body .field { flex: 1 1 180px; }
.nf-body .nf-pick { flex: 2 1 280px; }
.nf-opts { display: flex; flex-direction: column; gap: 6px; padding-bottom: 4px; }
.nf-check { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; cursor: pointer; }
.nf-check input { width: 18px; height: 18px; accent-color: var(--groen); margin: 0; cursor: pointer; }
.nf-hint { width: 100%; margin: 2px 0 0; }
/* ---------- leverlijsten ---------- */
.kanaal-card { background: var(--wit); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 22px 26px; margin-bottom: 18px; }
.kanaal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; flex-wrap: wrap; }
.kanaal-head h2 { font-family: "Flexa"; font-weight: normal; font-size: 26px; text-transform: uppercase; color: var(--groen); margin: 0; display: flex; align-items: center; gap: 10px; letter-spacing: -.02em; }
.kanaal-ico { display: inline-flex; color: var(--groen); }
.kanaal-ico .ico { width: 26px; height: 26px; stroke-width: 2.25; }
.kanaal-head .k-count { font-weight: 800; color: var(--groen); }
.kanaal-hint { font-size: 12px; color: var(--inkt-55); margin: 0 0 12px; }
.kanaal-list { display: flex; flex-direction: column; }
.kanaal-item {
display: flex; align-items: center; gap: 11px; padding: 10px 0; border-top: 1px solid var(--hairline);
}
.kanaal-item:first-child { border-top: none; }
.kanaal-item input[type=checkbox] { width: 19px; height: 19px; accent-color: var(--groen); margin: 0; flex: 0 0 auto; }
.kanaal-item .ki-name { flex: 1; font-weight: 800; cursor: pointer; }
.kanaal-item.done .ki-name { color: var(--inkt-45); }
.kanaal-item .ki-sub { font-size: 12px; }
.kanaal-item .ki-count { font-weight: 800; color: var(--marine); font-variant-numeric: tabular-nums; }
/* Tickets: de verdeling per dag ("4 vrij, 4 zat") en nog te versturen bijbestellingen. */
.kanaal-item .ki-dagen { font-size: 12px; color: var(--inkt-55); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kanaal-item .ki-extra {
font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
color: #8A5A00; background: #FFF1E0; border-radius: var(--radius-pill);
padding: 3px 9px; white-space: nowrap;
}
.kanaal-empty { color: var(--inkt-45); font-size: 13px; padding: 6px 0; }
/* ---------- takenoverzicht ---------- */
.taak-groep { background: var(--wit); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 18px 24px; margin-bottom: 16px; }
.taak-groep > h2 {
font-family: "Flexa"; font-weight: normal; font-size: 22px; text-transform: uppercase;
color: var(--groen); margin: 0 0 4px; display: flex; align-items: baseline; gap: 10px; letter-spacing: -.02em;
}
.taak-groep > h2 a { color: var(--groen); text-decoration: none; }
.taak-groep > h2 a:hover { color: var(--oranje); text-decoration: underline; }
.taak-list { display: flex; flex-direction: column; }
.taak-line { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--hairline); flex-wrap: wrap; }
.taak-line:first-child { border-top: none; }
.taak-line input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--groen); margin: 0; flex: 0 0 auto; }
.taak-line .tl-label { flex: 1; cursor: pointer; min-width: 140px; }
.taak-line .tl-ico { color: var(--groen); display: inline-flex; flex: 0 0 auto; }
.taak-line .tl-ico .ico { width: 17px; height: 17px; stroke-width: 2.5; }
.taak-line.done .tl-ico { color: var(--inkt); opacity: .35; }
.taak-line .tl-kind {
font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
padding: 3px 9px; border-radius: var(--radius-pill);
}
.tl-kind.opvolg { background: #E3EEFC; color: var(--marine); }
.tl-kind.belofte { background: #FFF1E0; color: #8A5A00; }
.tl-kind.notitie { background: #FFF4D6; color: #7A5300; }
.taak-line .tl-due { font-size: 12px; color: var(--inkt-55); font-weight: 800; }
.taak-line .tl-due.overdue { color: var(--koraal); }
.alles-klaar { text-align: center; padding: 50px; color: var(--groen); }
.alles-klaar .big { font-family: "Flexa"; font-weight: normal; font-size: 40px; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 12px; letter-spacing: -.02em; }
.alles-klaar .big .ico-xl { width: 40px; height: 40px; stroke-width: 2; color: var(--groen); }
/* ---------- settings ---------- */
.settings-main { max-width: 720px; }
.settings-card {
background: var(--wit); border: 1px solid var(--hairline); border-radius: var(--radius);
padding: 22px 26px; margin-bottom: 18px;
/* Meetpunt voor de container-query van het gebruikersblok: de kaart is
smaller dan het venster, dus een gewone media-query klopt hier niet. */
container: kaart / inline-size;
}
.settings-card h3 { font-family: "Flexa"; font-weight: normal; text-transform: uppercase; font-size: 20px; color: var(--groen); margin: 0 0 10px; letter-spacing: -.02em; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 0; border-top: 1px solid var(--hairline); }
.setting-row:first-child { border-top: none; }
.setting-row b { display: block; }
.setting-row p { margin: 2px 0 0; font-size: 13px; color: var(--inkt-55); }
/* ---------- toast ---------- */
.toast {
position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
background: var(--inkt); color: var(--geel); font-weight: 800;
border-radius: var(--radius-pill); padding: 11px 24px; z-index: 90; box-shadow: var(--shadow-hoog);
}
/* ---------- login-overlay ----------
Gedeelde stijl met de Booking-login: wit logo op groen, daaronder het
formuliertje op een crème kaart. Zie ook web/public/style.css. */
#gld-login {
position: fixed; inset: 0; z-index: 9999;
background: var(--groen, #1C5E48);
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 22px; padding: 24px;
}
#gld-login-logo-link { display: block; }
#gld-login-logo { width: min(300px, 72vw); height: auto; display: block; }
#gld-login-form {
background: var(--wit, #fff); border-radius: 24px; padding: 34px 32px;
display: flex; flex-direction: column; gap: 14px;
width: min(360px, 88vw); text-align: center;
box-shadow: var(--shadow-hoog, 0 18px 50px rgba(12,34,93,.18));
}
#gld-login-form h1 {
font-family: "Flexa"; font-weight: normal; text-transform: uppercase;
color: var(--groen, #1C5E48); font-size: 30px; line-height: 1; margin: 0 0 6px;
letter-spacing: -.02em;
}
#gld-login-form input {
width: 100%; padding: 13px 16px; border: 1px solid rgba(24,18,12,.16);
border-radius: 12px; font-size: 17px; font-family: "Rand", system-ui, sans-serif;
text-align: center; background: var(--wit, #fff);
}
#gld-login-form input:focus {
outline: none; border-color: var(--oranje, #FF460D);
box-shadow: var(--focus-ring, 0 0 0 3px rgba(255,70,13,.12));
}
#gld-login-form button {
width: 100%; padding: 13px; border: none; border-radius: 999px;
background: var(--paars, #D280FF); color: var(--wit, #fff);
font-family: "Rand", system-ui, sans-serif; font-weight: 800;
font-size: 18px; cursor: pointer; transition: background 140ms ease;
}
#gld-login-form button:hover { background: var(--paars-hover, #C566F7); }
#gld-login-err { color: var(--koraal, #FF5D5D); font-weight: 800; font-size: 13px; margin: 0; }
#gld-login-disclaimer {
color: var(--blauw, #B1E4FF); opacity: .7; font-size: 12px; font-weight: 500;
line-height: 1.5; text-align: center; margin: 0;
}
#gld-login-disclaimer a { color: inherit; text-decoration: underline; }
/* ---------- splash ----------
Groen scherm, wit logo, blauwe tegels. Gedeeld door de booking tool, het
partner dashboard en de tools-hub, zodat de drie ingangen identiek aanvoelen. */
body.splash {
background: var(--groen); color: var(--wit); min-height: 100vh;
display: flex; align-items: center; justify-content: center;
}
.splash-inner {
display: flex; flex-direction: column; align-items: center;
padding: 48px 24px 70px; text-align: center;
}
.splash-logo { width: min(320px, 76vw); display: block; }
.splash-titel {
font-family: "Flexa"; font-weight: normal; text-transform: uppercase; color: var(--blauw);
font-size: clamp(30px, 5vw, 48px); line-height: 1; letter-spacing: -.02em;
margin: 14px 0 8px;
}
.splash-tegels {
display: flex; flex-direction: column; gap: 14px; align-items: stretch;
width: min(420px, 88vw); margin-top: 32px;
}
/* De tegels zetten hun eigen kleuren; nooit erven van een link-regel, anders
valt de titel weg tegen het blauw. */
.splash-tegel {
display: flex; align-items: center; gap: 16px; padding: 18px 24px;
background: var(--blauw); text-decoration: none;
border-radius: 28px; box-shadow: 0 6px 20px rgba(12,34,93,.22);
transition: transform var(--motie), box-shadow var(--motie), background var(--motie);
}
.splash-tegel,
.splash-tegel:hover,
.splash-tegel:focus-visible { color: var(--groen); }
.splash-tegel:hover {
transform: translateY(-2px); background: #C6EBFF;
box-shadow: 0 14px 34px rgba(12,34,93,.28);
}
.splash-tegel:focus-visible { outline: 3px solid var(--geel); outline-offset: 3px; }
.splash-tegel .st-tekst { flex: 1; min-width: 0; text-align: left; }
.splash-tegel .st-titel {
display: block; font-family: "Flexa"; font-weight: normal; text-transform: uppercase;
font-size: 27px; line-height: 1; letter-spacing: -.02em; color: var(--groen);
}
.splash-tegel .st-sub {
display: block; font-size: 13px; color: rgba(12,34,93,.7); margin-top: 4px;
}
.splash-tegel .pijl {
font-family: "Flexa"; font-weight: normal; font-size: 28px; line-height: 1;
letter-spacing: -.02em; color: var(--groen); opacity: .55;
transition: opacity var(--motie), transform var(--motie);
}
.splash-tegel:hover .pijl { opacity: 1; transform: translateX(3px); }
/* Aftelkaartje op de splash: een sfeerfoto van het festival als ticket, met een
donkere verloopsluier eroverheen zodat de tekst altijd leesbaar blijft. Geel
voor de cijfers (het accent), wit voor de rest. Ontbreekt de foto, dan valt
de kaart terug op een donker vlak — nooit een gebroken kaart. Zie aftellen.js.
Foto: Julie Rommelaere, Gladiolen 2026 (vrijdagavond aan de grote tent),
verkleind naar 900px breed zodat de splash licht blijft. */
.splash-teller {
position: relative; isolation: isolate; overflow: hidden;
display: flex; flex-direction: column; justify-content: flex-end;
width: min(420px, 88vw); min-height: 172px; margin-top: 24px; padding: 26px 26px 22px;
border-radius: 18px; --tk-inkeping: 11px;
/* Marine als achtergrondkleur: laadt de foto (nog) niet, dan staat de witte
tekst nog steeds op een donker vlak i.p.v. onleesbaar op een lichte kaart. */
background: var(--marine) url("sfeer-tent.jpg") center 34% / cover no-repeat;
color: var(--wit); text-align: left;
box-shadow: 0 14px 34px rgba(12,34,93,.3);
}
/* Sluier: bovenaan bijna open (de zonsondergang mag door), onderaan diep genoeg
voor witte tekst op het publiek. */
.splash-teller::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(180deg,
rgba(12,34,93,.14) 0%, rgba(24,18,12,.42) 42%, rgba(24,18,12,.84) 100%);
}
.tl-dagen {
margin: 0; font-family: "Flexa"; font-weight: normal; text-transform: uppercase;
font-size: clamp(26px, 5vw, 38px); line-height: 1; letter-spacing: -.02em;
font-variant-numeric: tabular-nums; text-shadow: 0 2px 14px rgba(24,18,12,.45);
}
.tl-dagen b { font-weight: normal; color: var(--geel); }
.tl-sub {
margin: 8px 0 0; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.82);
text-shadow: 0 1px 10px rgba(24,18,12,.5);
}
.tl-extra {
margin: 16px 0 0; padding-top: 14px; font-size: 15px; font-weight: 500;
border-top: 2px dotted rgba(255,255,255,.35);
text-shadow: 0 1px 10px rgba(24,18,12,.5);
}
.tl-extra b { font-weight: 800; color: var(--geel); font-variant-numeric: tabular-nums; }
.splash-acties { margin-top: 40px; display: flex; gap: 24px; align-items: center; }
.splash-instellingen {
color: rgba(177,228,255,.75); text-decoration: none; font-size: 13px; font-weight: 800;
}
.splash-instellingen:hover { color: var(--blauw); text-decoration: underline; }
.splash-disclaimer {
position: fixed; left: 0; right: 0; bottom: 16px; text-align: center;
color: rgba(177,228,255,.5); font-size: 11px; font-weight: 500; line-height: 1.5;
margin: 0; padding: 0 24px;
}
.splash-disclaimer a { color: inherit; text-decoration: underline; }
/* ---------- partner-logo (tabel-thumbnail) ---------- */
.sp-cell { display: flex; align-items: center; gap: 14px; }
.sp-logo {
width: 76px; height: 48px; border-radius: 12px; object-fit: contain;
padding: 5px; background: var(--wit); flex: 0 0 auto; border: 1px solid var(--hairline);
}
.sp-logo-ph {
display: inline-flex; align-items: center; justify-content: center;
font-family: "Flexa"; font-weight: normal; font-size: 18px; color: var(--marine);
padding: 0;
}
@media (max-width: 640px) {
.sp-logo { width: 58px; height: 38px; border-radius: 10px; }
.sp-logo-ph { font-size: 15px; }
}
/* ---------- logo-control in de fiche ---------- */
.lbl-soft { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--inkt-45); }
.logo-control { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.logo-pick { cursor: pointer; }
.logo-hint { font-size: 12px; color: var(--inkt-55); }
/* ---------- tickets per dag (daycount) ---------- */
.benefit .b-days { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.benefit .b-day { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.benefit .b-day span {
font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--inkt-55);
}
.benefit .b-day input {
width: 50px; text-align: right; padding: 7px 9px; border: 1px solid var(--hairline-veld);
border-radius: 10px; font: inherit; font-variant-numeric: tabular-nums;
}
.benefit .b-day input:focus { outline: none; border-color: var(--oranje); box-shadow: var(--focus-ring); }
.benefit .b-daytotal { font-size: 12px; color: var(--inkt-55); align-self: center; white-space: nowrap; }
.benefit.off .b-days { display: none; }
/* ---------- overgenomen uit vorige editie (carry) ---------- */
.carry-hint {
margin: 10px 0 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
font-size: 13px; color: var(--inkt-70); background: #E5F3EC; border-radius: var(--radius-veld); padding: 11px 13px;
}
/* ---------- zachte "later"-sectie (partnerportaal) ---------- */
.soft-placeholder {
border: 2px dotted var(--inkt-30); border-radius: var(--radius-tegel); padding: 16px;
text-align: center; color: var(--inkt-45); font-weight: 800; font-size: 13px;
background: none;
}
/* ---------- editie-schakelaar (topbar) ---------- */
.editie-switch { position: relative; }
.editie-btn {
font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; border: none;
background: rgba(255,255,255,.16); color: var(--wit); border-radius: 10px;
padding: 7px 19px; display: inline-flex; align-items: center; gap: 7px;
--tk-inkeping: 5px; transition: background var(--motie);
}
.editie-btn:hover { background: rgba(255,255,255,.24); }
.editie-btn .editie-label { font-weight: 500; opacity: .75; font-size: 12px; }
.editie-btn b { font-family: "Flexa"; font-weight: normal; font-size: 17px; letter-spacing: -.02em; }
.editie-caret { display: inline-flex; opacity: .8; }
.editie-caret .ico-sm { width: 14px; height: 14px; stroke-width: 2.75; }
.editie-menu {
position: absolute; top: calc(100% + 6px); right: 0; min-width: 210px;
background: var(--wit); color: var(--inkt); border: 1px solid var(--hairline);
border-radius: var(--radius); box-shadow: var(--shadow-hoog);
padding: 6px; z-index: 60;
}
.editie-item {
display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
font: inherit; font-weight: 800; font-size: 14px; text-align: left; cursor: pointer;
background: none; border: none; color: var(--inkt); padding: 9px 12px; border-radius: 12px;
}
.editie-item:hover { background: var(--hover-vlak); }
.editie-item.current { color: var(--groen); }
.editie-tag {
font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
background: var(--geel); color: var(--groen); padding: 3px 9px; border-radius: var(--radius-pill);
}
.editie-new {
color: var(--groen); border-top: 1px solid var(--hairline);
border-radius: 0 0 12px 12px; margin-top: 4px; justify-content: flex-start; gap: 6px;
}
.editie-new:hover { background: rgba(28,94,72,.08); }
/* ---------- archief-banner ---------- */
.editie-banner {
background: var(--marine); color: var(--wit);
padding: 10px 24px; display: flex; align-items: center; justify-content: center;
gap: 14px; flex-wrap: wrap; font-size: 14px; font-weight: 500;
}
.editie-banner b { font-weight: 800; }
/* ---------- nieuwe-editie-modal ---------- */
.editie-modal-back {
position: fixed; inset: 0; background: rgba(12,34,93,.4); z-index: 80;
display: flex; align-items: center; justify-content: center; padding: 20px;
}
.editie-modal {
background: var(--creme); border-radius: 20px; box-shadow: var(--shadow-hoog);
width: min(560px, 100%); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
}
.em-head {
background: var(--groen); color: var(--wit); padding: 16px 24px;
display: flex; align-items: center; justify-content: space-between;
}
.em-head h2 {
font-family: "Flexa"; font-weight: normal; text-transform: uppercase; font-size: 26px; margin: 0; color: var(--geel); letter-spacing: -.02em;
}
.em-close { background: none; border: none; color: var(--wit); cursor: pointer; line-height: 1; display: inline-flex; }
.em-close .ico { width: 22px; height: 22px; stroke-width: 2.25; }
.em-body { padding: 20px 24px; overflow-y: auto; }
.em-info {
font-size: 13px; color: var(--inkt-70); background: #FFF1E0;
border-radius: var(--radius-veld); padding: 12px 14px; margin: 16px 0;
}
.em-partners {
display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow-y: auto;
border: 1px solid var(--hairline); border-radius: var(--radius-tegel); padding: 8px; background: var(--wit);
}
.em-all { display: flex; align-items: center; gap: 10px; padding: 8px; border-bottom: 1px solid var(--hairline); margin-bottom: 4px; cursor: pointer; }
.em-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; cursor: pointer; }
.em-row:hover { background: var(--hover-vlak); }
.em-row input, .em-all input { width: 18px; height: 18px; accent-color: var(--groen); margin: 0; flex: 0 0 auto; }
.em-name { flex: 1; font-weight: 800; }
.em-foot {
padding: 16px 24px; display: flex; justify-content: flex-end; gap: 10px;
border-top: 1px solid var(--hairline); background: rgba(255,255,255,.6);
}
/* ---------- responsive ---------- */
/* ---------- avatars ---------- */
/* Elke medewerker heeft een tekenfiguurtje in public/avatars/.jpg —
de server koppelt dat op bestandsnaam (zie avatar_for in app/api.php). Staat
er geen bestand met die naam, dan valt het rondje terug op de eerste letter.
Formaat komt van de plek waar de avatar staat (.uc-avatar, .gebr-avatar, ...). */
.avatar {
flex: 0 0 auto; border-radius: 50%; overflow: hidden; object-fit: cover;
background: var(--blauw); color: var(--marine);
display: inline-flex; align-items: center; justify-content: center;
font-family: "Flexa"; font-weight: normal;
}
img.avatar { display: block; }
/* ---------- gebruikerschip in de topbar ---------- */
.user-chip {
display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,.14);
color: var(--wit); border-radius: 999px; padding: 5px 6px 5px 5px; font-size: 13px; font-weight: 800;
}
/* Je eigen naam is de ingang naar de instellingen — die staat niet meer als
tab in de navigatiebalk. Sta je er al, dan licht het chipje op zoals een
actieve tab dat doet. */
.user-chip .uc-link {
display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none;
border-radius: 999px; padding: 0 8px 0 0; margin-right: 4px;
transition: background var(--motie), color var(--motie);
}
.user-chip .uc-link:hover { background: rgba(255,255,255,.22); color: var(--wit); }
.user-chip .uc-link.actief { background: var(--blauw); color: var(--groen); }
.user-chip .uc-link.actief:hover { background: var(--blauw); color: var(--groen); }
.user-chip .uc-link.actief .uc-avatar { box-shadow: 0 0 0 2px rgba(28,94,72,.25); }
.user-chip .uc-link.actief .uc-rol { background: var(--groen); color: var(--blauw); }
.user-chip .uc-avatar {
width: 30px; height: 30px; border-radius: 50%; background: var(--blauw); color: var(--groen);
display: inline-flex; align-items: center; justify-content: center;
font-family: "Flexa"; font-weight: normal; font-size: 16px; flex: 0 0 auto;
box-shadow: 0 0 0 2px rgba(255,255,255,.35);
}
.user-chip .uc-rol {
font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
background: var(--blauw); color: var(--groen); padding: 3px 9px; border-radius: var(--radius-pill);
}
.user-chip .uc-uit {
font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; border: none;
background: rgba(0,0,0,.18); color: var(--wit); border-radius: 999px; padding: 5px 11px;
}
.user-chip .uc-uit:hover { background: var(--koraal); }
/* "Afgevinkt door" — klein en terughoudend, overal waar een vinkje staat. */
.door {
font-size: 11px; font-weight: 800; color: var(--groen); background: #eaf6f0;
border-radius: 999px; padding: 2px 9px; white-space: nowrap; flex: 0 0 auto;
}
.check-row { justify-content: flex-start; }
.check-row .c-label { flex: 1; }
/* Variant-keuze (T-shirt: voor- of achterkant) in de fiche */
.benefit .b-variant {
font: inherit; font-size: 12px; font-weight: 800; padding: 6px 10px; border-radius: 10px;
border: 1px solid var(--hairline-veld); background: var(--wit); color: var(--inkt); cursor: pointer;
}
.benefit .b-variant:focus { outline: none; border-color: var(--oranje); box-shadow: var(--focus-ring); }
.benefit .b-variant-std {
font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--inkt-45);
}
/* ---------- leverlijsten: keuzescherm ---------- */
.kanaal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.kanaal-tegel {
display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--inkt);
background: var(--wit); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 20px 22px;
transition: transform var(--motie), box-shadow var(--motie), border-color var(--motie);
}
.kanaal-tegel:hover {
transform: translateY(-2px); border-color: rgba(24,18,12,.14);
box-shadow: 0 8px 22px rgba(12,34,93,.09);
}
.kanaal-tegel .kt-ico { width: 52px; height: 52px; border-radius: 16px; background: #E5F3EC; color: var(--groen); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.kanaal-tegel .kt-ico .ico { width: 26px; height: 26px; stroke-width: 2.25; }
.kanaal-tegel .kt-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.kanaal-tegel .kt-body > b {
font-family: "Flexa"; font-weight: normal; text-transform: uppercase; font-size: 22px;
color: var(--groen); line-height: 1.05; letter-spacing: -.02em;
}
.kanaal-tegel .kt-hint { font-size: 12px; color: var(--inkt-55); }
.kanaal-tegel .kt-stand { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; font-size: 12px; font-weight: 800; }
.kanaal-tegel .kt-aantal { color: var(--inkt-55); }
.kanaal-tegel .kt-open { color: var(--oranje); }
.kanaal-tegel .kt-klaar { color: var(--groen); }
.kanaal-tegel .kt-leeg { color: var(--inkt-30); }
.kanaal-tegel .kt-pijl { color: var(--groen); flex: 0 0 auto; display: inline-flex; }
.kanaal-tegel .kt-pijl .ico { width: 24px; height: 24px; stroke-width: 2.25; }
.terug-link {
display: inline-flex; align-items: center; gap: 4px; margin-bottom: 14px; color: var(--groen); font-weight: 800;
font-size: 14px; text-decoration: none;
}
.terug-link:hover { color: var(--oranje); text-decoration: underline; }
/* onderverdeling binnen een kanaal (voorkant / achterkant) */
.kanaal-sub {
display: flex; align-items: baseline; gap: 10px; margin: 18px 0 2px;
padding-top: 14px; border-top: 1px solid var(--hairline);
}
.kanaal-sub:first-of-type { border-top: none; padding-top: 4px; margin-top: 8px; }
.kanaal-sub h3 {
font-family: "Flexa"; font-weight: normal; text-transform: uppercase; font-size: 19px;
color: var(--marine); margin: 0; letter-spacing: -.02em;
}
.kanaal-sub span { font-size: 12px; font-weight: 800; color: var(--inkt-45); }
.kanaal-totaal { font-size: 12px; font-weight: 800; color: var(--marine); margin: 8px 0 0; text-align: right; }
.kanaal-item .ki-variant {
font: inherit; font-size: 12px; font-weight: 800; padding: 5px 9px; border-radius: 10px;
border: 1px solid var(--hairline-veld); background: var(--wit); color: var(--inkt); cursor: pointer; flex: 0 0 auto;
}
/* ---------- taken: weergaveschakelaar ---------- */
.view-switch {
display: inline-flex; gap: 2px; background: rgba(24,18,12,.06); border-radius: var(--radius-pill);
padding: 3px; margin-bottom: 16px;
}
.vs-btn {
font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; border: none;
background: none; color: var(--inkt-55); border-radius: var(--radius-pill); padding: 7px 16px;
transition: background var(--motie), color var(--motie);
}
.vs-btn:hover { color: var(--inkt); }
.vs-btn.active { background: var(--wit); color: var(--inkt); box-shadow: 0 1px 3px rgba(24,18,12,.12); }
.klap-balk { display: flex; justify-content: flex-end; margin-bottom: 10px; }
/* ---------- taken: inklapbare partnergroepen ---------- */
.taak-groep { padding: 0; overflow: hidden; }
.tg-kop {
display: flex; align-items: center; gap: 16px; width: 100%; text-align: left;
font: inherit; background: none; border: none; cursor: pointer; padding: 12px 22px 12px 12px;
}
.tg-kop { transition: background var(--motie); }
.tg-kop:hover { background: var(--hover-rij); }
/* het partnerlogo (SVG) geeft de tegel zijn gezicht: groot, links, op crème */
.tg-logo {
width: 76px; height: 76px; border-radius: 16px; background: var(--creme); flex: 0 0 auto;
display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.tg-logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; display: block; }
.tg-logo-ph {
width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
font-family: "Flexa"; font-weight: normal; font-size: 30px; color: var(--marine);
}
.tg-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tg-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tg-caret { color: var(--groen); display: inline-flex; flex: 0 0 auto; }
.tg-caret .ico { width: 22px; height: 22px; stroke-width: 2.25; }
.tg-naam {
font-family: "Flexa"; font-weight: normal; text-transform: uppercase; font-size: 26px;
color: var(--groen); line-height: 1; min-width: 0; letter-spacing: -.02em;
}
/* de tier-pill deelt overal dezelfde .tier-badge-stijl (12px, weight 800) */
.taak-groep .tg-tier { flex: 0 0 auto; }
.tg-stand { font-size: 13px; font-weight: 500; color: var(--inkt-55); white-space: nowrap; }
.tg-stand b { color: var(--oranje); font-size: 16px; }
.tg-van { color: var(--inkt-30); }
.taak-groep .taak-list { padding: 4px 22px 16px; border-top: 1px solid var(--hairline); }
.tg-voet { padding-top: 10px; }
.tg-voet a { color: var(--groen); font-weight: 800; font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.tg-voet a:hover { color: var(--oranje); text-decoration: underline; }
/* ---------- taken: matrix ---------- */
.mx-hint { font-size: 12px; color: var(--inkt-55); margin: 0 0 10px; }
.mx-wrap {
background: var(--wit); border: 1px solid var(--hairline); border-radius: var(--radius);
overflow: auto; max-height: 78vh;
}
.mx-table { border-collapse: separate; border-spacing: 0; width: 100%; }
.mx-table th, .mx-table td { border-bottom: 1px solid rgba(24,18,12,.06); }
.mx-table thead th {
position: sticky; top: 0; z-index: 2; background: var(--wit);
border-bottom: 1px solid rgba(24,18,12,.1);
padding: 12px 4px; text-align: center; font-size: 11px; font-weight: 800;
text-transform: uppercase; letter-spacing: .06em; color: var(--inkt-55);
}
.mx-table .mx-ico { display: inline-flex; color: var(--groen); }
.mx-table .mx-ico .ico { width: 19px; height: 19px; stroke-width: 2.5; }
.mx-table .mx-kol { width: 42px; cursor: help; }
.mx-table .mx-hoek {
position: sticky; left: 0; z-index: 3; text-align: left; padding-left: 16px;
min-width: 190px; text-transform: uppercase; letter-spacing: .06em;
}
.mx-table .mx-partner {
position: sticky; left: 0; z-index: 1; background: var(--wit); text-align: left;
padding: 9px 14px 9px 16px; font-weight: 500; white-space: nowrap; min-width: 190px;
border-right: 1px solid rgba(24,18,12,.07);
}
.mx-table .mx-partner .tier-badge { margin-left: 8px; vertical-align: middle; }
.mx-table tbody tr:hover .mx-partner { background: #FAFAF9; }
.mx-table tbody tr:hover td { background: var(--hover-rij); }
.mx-naam { color: var(--inkt); font-weight: 800; text-decoration: none; }
.mx-naam:hover { color: var(--oranje); text-decoration: underline; }
.mx-cel { text-align: center; padding: 6px 4px; }
.mx-cel.nvt { color: rgba(24,18,12,.18); cursor: default; }
.mx-eigen, .mx-totaal {
text-align: center; padding: 6px 10px; font-size: 12px; font-weight: 800;
color: var(--inkt-55); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mx-totaal { color: var(--groen); }
/* Vakje: leeg = nog te doen, groen vinkje = klaar. */
.mx-vink { display: inline-flex; cursor: pointer; }
.mx-vink input { position: absolute; opacity: 0; width: 0; height: 0; }
.mx-vink span {
width: 22px; height: 22px; border-radius: 7px; border: 1px solid var(--hairline-veld);
background: var(--wit); display: inline-block; position: relative;
transition: background var(--motie), border-color var(--motie);
}
.mx-vink:hover span { border-color: var(--groen); }
.mx-vink input:checked + span { background: var(--groen); border-color: var(--groen); }
.mx-vink input:checked + span::after {
content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
border: solid var(--wit); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.mx-vink input:focus-visible + span { outline: 2px solid var(--oranje); outline-offset: 2px; }
/* ---------- logboek ---------- */
.lb-tijd { color: var(--inkt-55); font-size: 13px; white-space: nowrap; }
.lb-wie { font-weight: 800; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.lb-avatar { width: 24px; height: 24px; font-size: 13px; }
.lb-actie { font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.lb-actie .ico-sm { width: 15px; height: 15px; stroke-width: 2.75; color: var(--groen); }
.lb-detail { color: var(--inkt-55); font-size: 13px; }
/* ---------- gebruikersbeheer (instellingen) ---------- */
.kaart-hint { font-size: 13px; color: var(--inkt-55); margin: -4px 0 14px; }
/* Eigen avatar bovenaan "Mijn account" — groter dan het chipje in de topbar. */
.mijn-avatar { display: flex; justify-content: center; margin: 2px 0 14px; }
.mijn-avatar .ma-avatar { width: 180px; height: 180px; font-size: 86px; }
#wie-ben-ik { text-align: center; }
.kaart-hint a { color: var(--groen); }
.wachtwoord-rij { align-items: flex-start; }
.pw-form { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* Eén maat voor alle bedieningselementen in de instellingen: 36px hoog, net als
.btn-small — zo staan velden, keuzelijsten en knoppen op dezelfde lijn
(designsysteem: vaste knophoogtes, radius veld 12, oranje focusring). */
.pw-form input, .gebr-nieuw input, .gebr-nieuw select, .gebr-rol {
font: inherit; font-size: 13px; height: 36px; padding: 0 12px; box-sizing: border-box;
border: 1px solid var(--hairline-veld); border-radius: var(--radius-veld);
background: var(--wit); color: var(--inkt);
transition: border-color var(--motie), box-shadow var(--motie);
}
.pw-form input, .gebr-nieuw input { min-width: 150px; }
/* Eigen chevron i.p.v. de systeemknop: alleen zo houdt een keuzelijst exact
dezelfde hoogte en radius als de knoppen ernaast. */
.gebr-nieuw select, .gebr-rol {
font-weight: 800; cursor: pointer; appearance: none; -webkit-appearance: none;
padding-right: 30px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318120C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' opacity='.55'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 9px center; background-size: 14px 14px;
}
.pw-form input:focus, .gebr-nieuw input:focus, .gebr-nieuw select:focus, .gebr-rol:focus {
outline: none; border-color: var(--oranje); box-shadow: var(--focus-ring);
}
/* Kop en rijen zitten in ÉÉN raster (de rijen zijn display:contents), zodat de
kolommen echt uitlijnen. Elke cel mag afbreken, dus de rij kan nooit breder
worden dan de kaart. */
#gebruikers-lijst {
display: grid; column-gap: 14px; align-items: center;
grid-template-columns: 32px minmax(110px, 1fr) auto auto auto;
}
.gebr-kop, .gebr-rij { display: contents; }
.gebr-cel { display: flex; align-items: center; min-width: 0; }
.gebr-kop .gebr-cel {
font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
color: var(--inkt-45); padding-bottom: 8px;
}
.gebr-rij .gebr-cel { min-height: 56px; border-top: 1px solid var(--hairline); padding: 7px 0; }
.gebr-rij.uit .gebr-cel > * { opacity: .55; }
.gebr-avatar {
width: 32px; height: 32px; border-radius: 50%; background: var(--blauw); color: var(--marine);
display: inline-flex; align-items: center; justify-content: center;
font-family: "Flexa"; font-weight: normal; font-size: 17px; flex: 0 0 auto;
}
.gebr-naam { flex-direction: column; align-items: flex-start; justify-content: center; }
.gebr-naam b, .gebr-naam > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gebr-naam > span { font-size: 12px; color: var(--inkt-55); }
.gebr-uit-tag {
font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
color: var(--inkt-55); background: rgba(24,18,12,.06); border-radius: var(--radius-pill);
padding: 2px 7px; vertical-align: 1px;
}
.gebr-login { font-size: 12px; color: var(--inkt-55); font-variant-numeric: tabular-nums; }
.gebr-login i { font-style: normal; color: var(--inkt-45); }
.gebr-rol { max-width: 100%; }
/* De knoppen breken liever af naar een volgende regel dan uit de kaart te lopen. */
.gebr-acties { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
/* Verwijderen is een klein prullenbakje: de gevaarlijke actie mag niet het
zwaarste element van de rij zijn. */
.gebr-del {
background: none; border: none; color: var(--inkt); opacity: .35; cursor: pointer;
width: 36px; height: 36px; padding: 0; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
transition: background var(--motie), color var(--motie), opacity var(--motie);
}
.gebr-del:hover:not(:disabled) { color: #C22F2F; opacity: 1; background: #FDE7E7; }
.gebr-del:focus-visible { outline: none; opacity: 1; box-shadow: var(--focus-ring); }
.gebr-del:disabled { opacity: .15; cursor: default; }
.gebr-del .ico-sm { width: 15px; height: 15px; stroke-width: 2.75; }
/* Smalle kaart: naam + login op regel 1, rol + knoppen op regel 2. Meet de
kaart zelf (container-query), want de kaart is smaller dan het venster. */
@container kaart (max-width: 820px) {
#gebruikers-lijst { display: block; }
.gebr-kop { display: none; }
.gebr-rij {
display: grid; grid-template-columns: 32px minmax(0, 1fr) auto;
column-gap: 12px; row-gap: 8px; align-items: center;
padding: 12px 0; border-top: 1px solid var(--hairline);
}
.gebr-rij .gebr-cel { min-height: 0; border-top: none; padding: 0; }
.gebr-login { grid-column: 3; justify-content: flex-end; white-space: nowrap; }
.gebr-cel-rol { grid-column: 2; }
.gebr-acties { grid-column: 3; }
}
@container kaart (max-width: 520px) {
.gebr-rij { grid-template-columns: 32px minmax(0, 1fr); }
.gebr-login, .gebr-cel-rol, .gebr-acties { grid-column: 2; }
.gebr-login, .gebr-acties { justify-content: flex-start; }
}
.gebr-nieuw {
display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
margin-top: 16px; padding-top: 16px; border-top: 2px dotted var(--inkt-30);
}
/* ====================================================================
ICONEN (Lucide, inline SVG — zie icons.js)
==================================================================== */
/* Lijndikte schaalt mee: hoe kleiner het icoon, hoe dikker de lijn (anders
verdwijnen de Lucide-lijnen op 14–18px). Groot (≥ 24px) = Lucide-standaard 2. */
.ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.22em; display: inline-block; stroke-width: 2.5; }
.ico-sm { width: 1em; height: 1em; stroke-width: 2.75; }
.btn-icon .ico { width: 16px; height: 16px; stroke-width: 2.5; }
.sp-open .ico-sm { color: var(--groen); vertical-align: -0.15em; }
/* ====================================================================
TICKETS — kaartje per ticketsoort met verloop (afspraak + bijbestellingen)
==================================================================== */
.tickets { display: flex; flex-direction: column; gap: 12px; }
.tk { border: 1px solid var(--hairline); border-radius: var(--radius-tegel); overflow: hidden; background: var(--wit); }
.tk.off { border: 2px dotted var(--inkt-30); }
.tk-kop { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px; padding: 12px 14px; }
.tk-kop .b-on { width: 20px; height: 20px; accent-color: var(--groen); cursor: pointer; margin: 0; }
.tk-ico { display: inline-flex; color: var(--groen); }
.tk-ico .ico { width: 20px; height: 20px; stroke-width: 2.5; }
.tk.off .tk-ico { color: var(--inkt); opacity: .3; }
.tk-titel { display: flex; flex-direction: column; min-width: 0; }
.tk-titel b { font-weight: 800; }
.tk.off .tk-titel b { font-weight: 500; color: var(--inkt-45); }
.tk-som { font-size: 12px; color: var(--inkt-55); }
.tk-som em { font-style: normal; color: var(--oranje); font-weight: 800; }
.tk-status {
grid-column: 3; justify-self: start; display: inline-flex; align-items: center; gap: 5px;
font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
color: #8A5A00; background: #FFF1E0; border-radius: var(--radius-pill); padding: 3px 10px;
}
.tk-status .ico { width: 13px; height: 13px; stroke-width: 2.75; }
.tk-status.klaar { color: var(--groen); background: #E5F3EC; }
.tk-body { border-top: 1px solid var(--hairline); background: rgba(243,242,241,.6); padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.tk-ronde { padding: 10px 0; border-top: 1px solid var(--hairline); }
.tk-ronde:first-child { border-top: none; }
.tk-ronde-kop { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.tk-ronde-naam {
font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
color: var(--marine); background: #E3EEFC; border-radius: var(--radius-pill); padding: 3px 10px; flex: none;
}
.tk-extra .tk-ronde-naam { color: #6B1F9E; background: #F2E4FD; }
.tk-ronde-info { font-size: 13px; color: var(--inkt-55); flex: 1 1 120px; }
.tk-ronde-aantal { font-weight: 800; font-size: 14px; flex: 1 1 80px; }
.tk-ronde.verstuurd .tk-ronde-aantal { color: var(--inkt-55); }
.tk-ronde-kop .b-done { margin-left: auto; }
.tk-ronde-meta { font-size: 12px; color: var(--inkt-55); margin-top: 5px; padding-left: 2px; }
.tk-del { background: none; border: none; color: var(--inkt); opacity: .35; cursor: pointer; display: inline-flex; padding: 4px; border-radius: 50%; }
.tk-del:hover { color: #C22F2F; opacity: 1; background: #FDE7E7; }
.tk-del .ico-sm { width: 14px; height: 14px; stroke-width: 2.75; }
.tk-dagen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; max-width: 330px; }
.tk-dag { display: flex; flex-direction: column; gap: 3px; }
.tk-dag span { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--inkt-55); }
.tk-dag input {
width: 100%; text-align: right; padding: 9px 11px; border: 1px solid var(--hairline-veld);
border-radius: 10px; font: inherit; font-weight: 800; background: var(--wit);
font-variant-numeric: tabular-nums;
}
.tk-dag input:focus { outline: none; border-color: var(--oranje); box-shadow: var(--focus-ring); }
.tk-dag input[disabled] { background: rgba(24,18,12,.04); color: var(--inkt-55); }
.tk-slot { font-size: 12px; color: var(--inkt-55); margin: 8px 0 0; }
.tk-add { align-self: flex-start; margin-top: 8px; }
.tk-form { background: var(--wit); border: 1px solid rgba(28,94,72,.35); border-radius: var(--radius-tegel); padding: 14px; margin-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.tk-form .tk-dagen { margin-top: 0; }
.tk-form .tk-note { font: inherit; border: 1px solid var(--hairline-veld); border-radius: 10px; padding: 9px 11px; width: 100%; }
.tk-form .tk-note:focus { outline: none; border-color: var(--oranje); box-shadow: var(--focus-ring); }
.tk-form-acties { display: flex; gap: 8px; flex-wrap: wrap; }
/* ====================================================================
MOBILE FIRST — kleine schermen (smartphone)
==================================================================== */
@media (max-width: 760px) {
/* topbar: logo + acties op rij 1, tabs als scrollende rij eronder */
.topbar-inner { flex-wrap: wrap; gap: 8px 12px; padding: 8px 12px; }
.brand-logo img { height: 40px; }
.nav-tabs {
order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: none; margin: 0 -12px; padding: 0 12px 4px;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tab { padding: 7px 14px; font-size: 13px; }
.topbar-actions { margin-left: auto; gap: 6px; }
.topbar-actions .btn { height: 38px; padding: 0 15px; font-size: 14px; }
.editie-btn .editie-label { display: none; }
.editie-banner { padding: 10px 14px; font-size: 13px; }
.user-chip .uc-name, .user-chip .uc-rol { display: none; }
.user-chip .uc-link { padding: 0; margin-right: 2px; }
main { padding: 14px 12px 70px; }
.page-intro h1 { font-size: 28px; }
/* totalen als 2-koloms tegels */
.stats-rij { flex-direction: column; align-items: stretch; gap: 10px; }
.stats-rij > .btn { width: 100%; margin-left: 0; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat { padding: 10px 14px; flex-wrap: wrap; gap: 2px 8px; }
.stat b { font-size: 22px; }
/* filters onder elkaar, volle breedte */
.filters { flex-direction: column; align-items: stretch; gap: 8px; }
.filters input[type=search], .filters select { width: 100%; min-width: 0; flex: 0 0 auto; }
/* partner-tabel → kaartjes */
.sp-wrap { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
#sp-table { display: block; }
#sp-table thead { display: none; }
#sp-table tbody, #sp-table tfoot, #sp-table tr { display: block; }
#sp-table tbody tr {
display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center;
background: var(--wit); border: 1px solid var(--hairline); border-radius: var(--radius-tegel); padding: 13px 14px; margin-bottom: 10px;
}
#sp-table tbody td { display: block; padding: 0; border: none; }
#sp-table tbody td:nth-child(1) { grid-column: 1 / -1; }
#sp-table tbody td:nth-child(2) { grid-column: 1; }
#sp-table tbody td:nth-child(3) { display: inline-block; grid-column: 1; }
#sp-table tbody td:nth-child(4) { grid-column: 2; grid-row: 2; text-align: right; font-size: 16px; }
#sp-table tbody td:nth-child(5) { grid-column: 2; grid-row: 3; text-align: right; }
#sp-table tbody td:nth-child(5) .sp-open::after { content: " open"; font-size: 12px; font-weight: 500; }
#sp-table tbody td:nth-child(5) .sp-open.zero::after { content: ""; }
#sp-table tfoot tr { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 14px; }
#sp-table tfoot td { border: none; padding: 0; }
.sp-table .hide-sm { display: block; }
/* drawer: volledig scherm */
.drawer { width: 100vw; border-radius: 0; }
.fiche-head { border-radius: 0; padding: 16px 56px 14px 16px; gap: 12px; }
.fiche-logo, .fiche-logo-placeholder { width: 60px; height: 60px; border-radius: 14px; font-size: 24px; }
.fiche-title h2 { font-size: 26px; }
.fiche-body { padding: 12px 12px 40px; gap: 12px; }
.kaart { padding: 15px; border-radius: var(--radius-tegel); }
/* leverlijsten: rijen mogen doorlopen op een tweede regel */
.kanaal-grid { grid-template-columns: 1fr; }
.kanaal-card { padding: 16px 14px; }
.kanaal-item { flex-wrap: wrap; }
.kanaal-item .ki-name { flex: 1 1 140px; }
/* taken */
.tg-kop { padding: 10px 14px 10px 10px; gap: 12px; }
.tg-logo { width: 56px; height: 56px; border-radius: 14px; }
.tg-logo img { padding: 6px; }
.tg-logo-ph { font-size: 22px; }
.tg-naam { font-size: 20px; }
.taak-groep .taak-list { padding: 4px 14px 14px; }
.mx-wrap { max-height: none; border-radius: var(--radius); }
.mx-table .mx-hoek, .mx-table .mx-partner { min-width: 140px; }
.mx-table .mx-partner .tier-badge { display: none; }
/* instellingen */
.settings-card { padding: 16px 14px; }
.setting-row { flex-direction: column; align-items: flex-start; gap: 10px; }
.pw-form { justify-content: flex-start; width: 100%; }
.pw-form input { flex: 1 1 140px; }
.gebr-nieuw input, .gebr-nieuw select { flex: 1 1 140px; min-width: 0; }
/* logboek: tabel scrolt horizontaal, volledige tekst */
#lb-table { min-width: 640px; }
#lb-table .hide-sm { display: table-cell; }
.toast { left: 12px; right: 12px; transform: none; text-align: center; bottom: 14px; }
}
/* Scrollbare tabellen: duidelijke rand zodat je ziet dat je kunt schuiven. */
.table-wrap, .mx-wrap { scrollbar-width: thin; }
/* ====================================================================
Crew-tool — eigen onderdelen (bovenop het gedeelde designsysteem)
==================================================================== */
.splash-groet { margin: -6px 0 14px; color: var(--inkt-55); font-size: 15px; }
.sp-sub { font-weight: 500; font-size: 12px; color: var(--inkt-55); }
.task-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.task-chip {
font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: var(--radius-pill);
background: #E5F3EC; color: var(--groen); white-space: nowrap;
}
.staff-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; }
.staff-chip .avatar { width: 24px; height: 24px; font-size: 11px; }
.staff-chip.leeg { color: var(--inkt-30); font-weight: 500; }
/* fiche-kop */
.fiche-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fiche-type { font-size: 12px; font-weight: 800; color: var(--blauw); }
.sub-kop { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--inkt-55); margin: 16px 0 8px; }
.kop-teller {
margin-left: auto; font-family: "Rand"; font-size: 13px; font-weight: 800; color: var(--marine);
background: #E3EEFC; padding: 3px 10px; border-radius: var(--radius-pill); letter-spacing: 0; text-transform: none;
}
.kaart-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.kaart-tools .p-toon { margin-left: auto; font-size: 13px; }
.waarschuwing {
display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: #8A5A00; background: #FFF1E0;
border-radius: var(--radius-veld); padding: 10px 12px; margin: 0 0 12px;
}
.waarschuwing .ico-sm { flex: none; margin-top: 2px; }
/* verantwoordelijken */
.contacts { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.contact-rij { display: grid; grid-template-columns: 32px 1.2fr 1.4fr 1fr 32px; gap: 6px; align-items: center; width: 100%; }
.contact-rij input {
font: inherit; font-size: 14px; border: 1px solid var(--hairline-veld); border-radius: 10px; padding: 8px 10px; min-width: 0; width: 100%;
}
.contact-rij input:focus { outline: none; border-color: var(--oranje); box-shadow: var(--focus-ring); }
.c-main, .c-del {
background: none; border: none; cursor: pointer; width: 32px; height: 32px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center; color: var(--inkt-30); transition: background var(--motie), color var(--motie);
}
.c-main:hover, .c-del:hover { background: var(--hover-vlak); color: var(--inkt); }
.c-main.on { color: var(--geel); }
.c-main.on .ico-sm { fill: var(--geel); }
.c-del:hover { color: var(--koraal); }
/* personen-tabel in de fiche */
.p-wrap { border-radius: var(--radius-veld); }
.p-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.p-table th { text-align: left; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--inkt-55); padding: 8px 6px; border-bottom: 1px solid rgba(24,18,12,.1); white-space: nowrap; }
.p-table td { padding: 3px 4px; border-top: 1px solid rgba(24,18,12,.06); vertical-align: middle; }
.p-table td.num, .p-table th.num { text-align: right; }
.p-table input:not([type=checkbox]), .p-table select {
font: inherit; font-size: 13px; border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; background: transparent; width: 100%; min-width: 60px;
}
.p-table select { appearance: none; -webkit-appearance: none; padding-right: 8px; }
.p-table input:hover, .p-table select:hover { border-color: var(--hairline-veld); background: var(--wit); }
.p-table input:focus, .p-table select:focus { outline: none; border-color: var(--oranje); box-shadow: var(--focus-ring); background: var(--wit); }
.p-table .p-check { text-align: center; }
.p-table input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--groen); margin: 0; cursor: pointer; }
.p-table td.ok { color: var(--groen); font-weight: 800; }
.p-table td.fout { color: #C22F2F; font-weight: 800; }
.p-preview td { padding: 6px; }
.u-table input { text-align: right; width: 80px; }
.nrn-wrap { display: inline-flex; align-items: center; gap: 2px; width: 100%; }
.nrn-wrap::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; margin-left: 4px; background: var(--inkt-30); }
.nrn-wrap.nrn-ok::before { background: var(--groen); }
.nrn-wrap.nrn-fout::before { background: var(--koraal); }
.nrn-inp { font-variant-numeric: tabular-nums; letter-spacing: .02em; min-width: 118px !important; }
.nrn-inp.nrn-open { background: #FFF1E0 !important; color: #8A5A00; font-weight: 800; }
.nrn-eye { background: none; border: none; cursor: pointer; color: var(--inkt-45); padding: 4px; border-radius: 50%; display: inline-flex; }
.nrn-eye:hover { color: var(--inkt); background: var(--hover-vlak); }
.p-uitleg { margin: 10px 0 0; }
/* taken/uren in de fiche */
.ass-lijst, .uren-lijst { display: flex; flex-direction: column; }
.ass-rij, .uren-rij { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--hairline); font-size: 14px; }
.ass-rij:first-child, .uren-rij:first-child { border-top: none; }
.ass-dag { font-size: 12px; font-weight: 800; color: var(--marine); min-width: 74px; }
.ass-uur, .ass-n { font-size: 12px; color: var(--inkt-55); }
.ass-n { margin-left: auto; }
.uren-rij .btn { margin-left: auto; }
.ass-nrn { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: var(--radius-pill); background: #FFF1E0; color: #8A5A00; }
.pref-rij { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--hairline); font-size: 14px; }
.pref-rij:first-child { border-top: none; }
.pref-main { flex: 1; min-width: 0; }
.pref-note { display: block; font-size: 12px; color: var(--inkt-55); }
#prefs > .btn, #contacts > .btn { margin-top: 8px; }
.dag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dag-chip { position: relative; cursor: pointer; }
.dag-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.dag-chip span {
display: inline-block; font-size: 12px; font-weight: 800; padding: 6px 11px; border-radius: var(--radius-pill);
border: 1px solid var(--hairline-veld); background: var(--wit); color: var(--inkt-55); transition: background var(--motie), color var(--motie), border-color var(--motie);
}
.dag-chip input:checked + span { background: var(--groen); color: var(--wit); border-color: var(--groen); }
.dag-chip input:focus-visible + span { border-color: var(--oranje); box-shadow: var(--focus-ring); }
.u-modes { margin: 14px 0 12px; }
/* modals (transfer, personen, uren) */
.editie-modal.modal-wide { width: min(860px, calc(100vw - 32px)); }
.em-foot .field-hint { margin-right: auto; align-self: center; }
.tr-tools { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 12px 0; font-size: 13px; }
.tr-tools input[type=search] { font: inherit; border: 1px solid var(--hairline-veld); border-radius: var(--radius-pill); padding: 8px 14px; flex: 1 1 200px; }
.tr-bulk { display: inline-flex; gap: 10px; align-items: center; color: var(--inkt-55); flex-wrap: wrap; }
.tr-list { max-height: 50vh; overflow: auto; }
.tr-row { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 8px 4px; border-top: 1px solid var(--hairline); }
.tr-pick { display: flex; gap: 8px; align-items: center; flex: 1 1 260px; cursor: pointer; }
.tr-pick input { width: 18px; height: 18px; accent-color: var(--groen); margin: 0; }
.tr-meta { display: block; font-size: 12px; color: var(--inkt-55); }
.tr-opts { display: inline-flex; gap: 10px; font-size: 13px; }
.nf-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.nf-check input { accent-color: var(--groen); width: 16px; height: 16px; margin: 0; }
/* ---------- tooltips (data-tip) ----------
Klein, donker, boven het element. Enkel voor elementen buiten scroll-vakken;
in tabellen blijft `title` het vangnet. */
[data-tip] { position: relative; }
[data-tip]:hover::after {
content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
background: var(--inkt); color: var(--wit); font-size: 12px; font-weight: 500; line-height: 1.35; letter-spacing: 0; text-transform: none;
padding: 6px 10px; border-radius: 8px; white-space: pre-line; width: max-content; max-width: 260px; text-align: left;
z-index: 80; pointer-events: none; box-shadow: 0 6px 20px rgba(12,34,93,.2);
}
[data-tip]:hover::before {
content: ""; position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%);
border: 5px solid transparent; border-top-color: var(--inkt); z-index: 80; pointer-events: none;
}
.ico-xs { width: 12px; height: 12px; }
.ico.omhoog { transform: rotate(180deg); }
/* ---------- planning ----------
Drie lagen: taken → behoefte (rooster taken × dagen) → bezetting. */
.planning-main { max-width: 1600px; }
.pl-intro { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.pl-intro h1 span { color: var(--oranje); }
.pl-intro .pl-acties { margin-left: auto; display: flex; gap: 8px; }
.stat.goed b { color: var(--groen); }
.stat.goed { border-color: rgba(28,94,72,.35); }
/* de drie stappen als tabs */
.pl-tabs { display: flex; gap: 4px; margin: 4px 0 18px; border-bottom: 1px solid var(--hairline); }
.pl-tab {
font: inherit; font-weight: 800; font-size: 15px; background: none; border: none; cursor: pointer; color: var(--inkt-55);
padding: 10px 16px 12px; border-bottom: 3px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 10px;
transition: color var(--motie), border-color var(--motie);
}
.pl-tab:hover { color: var(--inkt); }
.pl-tab.active { color: var(--groen); border-bottom-color: var(--groen); }
.pl-tab-nr {
width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; background: rgba(24,18,12,.08); color: var(--inkt-55);
}
.pl-tab.active .pl-tab-nr { background: var(--groen); color: var(--wit); }
.pl-sectie-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.pl-sectie-kop .t-sectie { color: var(--groen); margin-bottom: 4px; }
.pl-sectie-kop p { margin: 0; max-width: 720px; }
.pl-sectie-kop p .ico-xs { vertical-align: -2px; }
.pl-sectie-acties { display: flex; gap: 8px; flex-wrap: wrap; }
.pl-leeg { background: var(--wit); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 26px 28px; color: var(--inkt-55); max-width: 620px; }
.pl-leeg p { margin: 0 0 12px; }
.pl-hint { margin-top: 10px; }
/* begeleide start */
.pl-start { background: var(--wit); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 28px 32px; max-width: 860px; }
.pl-start-kop h2 { color: var(--groen); margin-bottom: 8px; }
.pl-start-kop p { margin: 0 0 22px; color: var(--inkt-55); max-width: 640px; }
.pl-stappen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pl-stap { display: flex; gap: 18px; padding: 16px 0; border-top: 1px solid var(--hairline); }
.pl-stap h3 { font-family: "Flexa"; font-weight: normal; text-transform: uppercase; font-size: 22px; letter-spacing: -.02em; margin: 2px 0 4px; line-height: 1; }
.pl-stap p { margin: 0 0 10px; color: var(--inkt-55); font-size: 14px; max-width: 600px; }
.pl-stap-nr { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--groen); color: var(--wit); font-family: "Flexa"; font-size: 20px; display: inline-flex; align-items: center; justify-content: center; }
.pl-stap:nth-child(n+2) .pl-stap-nr { background: rgba(24,18,12,.1); color: var(--inkt-55); }
.pl-stap-knoppen { display: flex; gap: 8px; flex-wrap: wrap; }
/* taakkaarten */
.tk-kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.tk-kaart { background: var(--wit); border: 1px solid var(--hairline); border-left: 5px solid var(--tk); border-radius: var(--radius-tegel); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.tk-kaart-kop { display: flex; align-items: center; gap: 8px; }
.tk-kaart-kop h3 { font-family: "Flexa"; font-weight: normal; text-transform: uppercase; font-size: 22px; letter-spacing: -.02em; margin: 0; line-height: 1; flex: 1; min-width: 0; }
.tk-kleur { width: 12px; height: 12px; border-radius: 4px; background: var(--tk); flex: none; }
.tk-badges { display: inline-flex; gap: 4px; }
.tk-badge { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: var(--radius-pill); background: rgba(24,18,12,.06); color: var(--inkt-55); }
.tk-knoppen { display: inline-flex; gap: 0; }
.tk-knoppen .c-main { width: 28px; height: 28px; }
.tk-omschr { margin: 0; font-size: 14px; color: var(--inkt-70); }
.tk-omschr i, .tk-feiten i { color: var(--inkt-45); }
.tk-feiten { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--inkt-55); margin-top: auto; padding-top: 6px; border-top: 1px solid var(--hairline); }
.tk-feiten > span { display: inline-flex; align-items: center; gap: 5px; }
.tk-uren { flex-wrap: wrap; }
.tk-uur { display: inline-flex; gap: 4px; }
.tk-uur i { font-style: normal; font-weight: 800; color: var(--inkt-45); text-transform: uppercase; font-size: 10px; letter-spacing: .04em; }
.tk-swatches { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0; }
.tk-swatch { width: 26px; height: 26px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; transition: border-color var(--motie); }
.tk-swatch.on { border-color: var(--inkt); box-shadow: 0 0 0 2px var(--wit) inset; }
.tk-tijden { display: flex; flex-direction: column; gap: 6px; }
.tk-tijd-rij { display: grid; grid-template-columns: 90px 1fr 1fr; gap: 8px; align-items: center; font-size: 13px; font-weight: 800; color: var(--inkt-55); }
.tk-tijd { font: inherit; border: 1px solid var(--hairline-veld); border-radius: 10px; padding: 8px 10px; }
.tk-tijd:focus { outline: none; border-color: var(--oranje); box-shadow: var(--focus-ring); }
.tk-vinkjes { gap: 8px; }
.tk-vinkjes .nf-check { font-size: 14px; }
/* filterbalk bezetting */
.pl-filterbalk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.pl-filterbalk input[type=search] { flex: 1 1 220px; min-width: 180px; font: inherit; border: 1px solid var(--hairline-veld); border-radius: var(--radius-pill); padding: 9px 16px; background: var(--wit); }
.pl-filterbalk select { font: inherit; font-size: 13px; border: 1px solid var(--hairline-veld); border-radius: var(--radius-pill); padding: 8px 34px 8px 14px; background: var(--wit); appearance: none; -webkit-appearance: none;
background-image: url('data:image/svg+xml,'); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; }
.pl-filterbalk input:focus, .pl-filterbalk select:focus { outline: none; border-color: var(--oranje); box-shadow: var(--focus-ring); }
.pl-filterbalk .nf-check { font-size: 13px; }
.pl-filterbalk .btn-danger { margin-left: auto; }
/* dag- en taakchips */
.pl-dagkeuze, .pl-taakkeuze { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.pl-dagchip {
display: inline-flex; flex-direction: column; align-items: center; gap: 1px; cursor: pointer; font: inherit;
padding: 5px 10px; border-radius: 10px; background: var(--wit); border: 1px solid var(--hairline-veld); color: var(--inkt); min-width: 64px;
transition: border-color var(--motie), background var(--motie);
}
.pl-dagchip span { font-size: 11px; font-weight: 800; color: var(--inkt-55); text-transform: uppercase; letter-spacing: .04em; }
.pl-dagchip b { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--marine); }
.pl-dagchip.vrijdag, .pl-dagchip.zaterdag { border-color: rgba(28,94,72,.45); background: #E5F3EC; }
.pl-dagchip.vrijdag span, .pl-dagchip.zaterdag span { color: var(--groen); }
.pl-dagchip.open b { color: var(--oranje); }
.pl-dagchip:hover { border-color: var(--inkt); }
.pl-dagchip.current { background: var(--groen); border-color: var(--groen); }
.pl-dagchip.current span, .pl-dagchip.current b { color: var(--wit); }
.pl-taakchip {
display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 800;
padding: 7px 12px 7px 10px; border-radius: var(--radius-pill); background: var(--wit); border: 1px solid var(--hairline-veld); color: var(--inkt);
transition: border-color var(--motie), background var(--motie);
}
.pl-taakchip i { width: 10px; height: 10px; border-radius: 3px; background: var(--tk); }
.pl-taakchip b { font-size: 11px; color: var(--marine); font-variant-numeric: tabular-nums; }
.pl-taakchip b.open { color: var(--oranje); }
.pl-taakchip:hover { border-color: var(--inkt); }
.pl-taakchip.current { border-color: var(--tk); background: color-mix(in srgb, var(--tk) 12%, white); }
.pl-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: var(--radius-pill); background: rgba(24,18,12,.06); color: var(--inkt-55); }
.pl-tag-festival { background: var(--geel); color: var(--groen); }
.pl-dag-tel { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--marine); font-variant-numeric: tabular-nums; }
.pl-dag-tel em { font-style: normal; color: var(--oranje); }
.pl-dag-tel em.goed { color: var(--groen); }
.pl-mini { display: inline-block; width: 90px; height: 6px; background: rgba(24,18,12,.08); border-radius: 3px; overflow: hidden; }
.pl-mini b { display: block; height: 100%; background: var(--groen); }
.pl-dagkop-groot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 2px 0 12px; }
.pl-dagkop-groot .t-sectie { font-size: 28px; }
.pl-dagkop-groot .btn { margin-left: auto; }
/* roosters (behoefte, overzicht, per dag, per taak) */
.pl-matrix-wrap { max-height: calc(100vh - 250px); overflow: auto; }
.pl-matrix { width: 100%; border-collapse: separate; border-spacing: 0; }
.pl-matrix th, .pl-matrix td { border-bottom: 1px solid rgba(24,18,12,.06); border-right: 1px solid rgba(24,18,12,.05); vertical-align: middle; }
.pl-matrix thead th { position: sticky; top: 0; z-index: 3; background: var(--wit); padding: 8px 10px; text-align: left; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--inkt-55); border-bottom: 1px solid rgba(24,18,12,.12); }
.pl-matrix .pl-mx-naam { position: sticky; left: 0; z-index: 2; background: var(--wit); min-width: 230px; max-width: 320px; padding: 8px 14px; }
.pl-matrix thead .pl-mx-naam { z-index: 4; }
.pl-matrix tfoot td { position: sticky; bottom: 0; z-index: 3; background: var(--wit); border-top: 1px solid rgba(24,18,12,.12); font-weight: 800; font-size: 12px; color: var(--inkt-55); padding: 8px 10px; }
.pl-matrix tfoot .pl-mx-naam { z-index: 4; }
.pl-matrix .num { text-align: right; font-variant-numeric: tabular-nums; }
.pl-matrix .open { color: var(--oranje); }
.pl-matrix .over { color: #C22F2F; }
.pl-matrix .vol { color: var(--groen); }
.pl-matrix td em { font-style: normal; font-size: 11px; margin-left: 4px; }
.pl-mx-tot { min-width: 90px; }
.pl-mx-tot b { font-size: 14px; }
.mx-groep { display: block; font-size: 15px; font-weight: 800; color: var(--inkt); text-decoration: none; line-height: 1.2; }
.mx-groep:hover { color: var(--oranje); }
.mx-sub { display: block; font-size: 11px; color: var(--inkt-55); margin-top: 2px; }
.mx-sub i { color: var(--oranje); font-style: normal; }
.mx-rest { font-style: normal; color: var(--oranje); font-weight: 800; }
.mx-over { font-style: normal; color: #C22F2F; font-weight: 800; }
.pl-mx-wens { min-width: 130px; max-width: 220px; padding: 6px 8px; }
.mx-wens { display: inline-block; font-size: 11px; font-weight: 800; background: #FFF1E0; color: #8A5A00; padding: 2px 7px; border-radius: var(--radius-pill); margin: 1px 2px 1px 0; white-space: nowrap; }
.mx-wens-tekst { background: rgba(24,18,12,.05); color: var(--inkt-55); font-weight: 500; white-space: normal; }
.pl-mx-dag { min-width: 104px; position: relative; }
.pl-mx-dag.klikbaar { cursor: pointer; }
.pl-mx-dag.klikbaar:hover { background: var(--creme); }
.pl-mx-dag.vrijdag, .pl-mx-dag.zaterdag { background: #E5F3EC; }
.pl-mx-dag .mx-dag { display: block; font-size: 12px; color: var(--inkt); }
.pl-mx-dag.vrijdag .mx-dag, .pl-mx-dag.zaterdag .mx-dag { color: var(--groen); }
.pl-mx-dag .mx-soort { display: block; font-size: 9px; letter-spacing: .08em; color: var(--inkt-45); }
.pl-mx-dag .mx-tel { display: inline-block; font-size: 11px; color: var(--marine); text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; margin-top: 2px; }
.pl-mx-dag .mx-tel.open { color: var(--oranje); }
.pl-mx-dag .mx-tel.vol { color: var(--groen); }
.mx-dag-x { position: absolute; top: 4px; right: 4px; background: none; border: none; cursor: pointer; color: var(--inkt-30); padding: 2px; border-radius: 50%; display: inline-flex; }
.mx-dag-x:hover { color: var(--koraal); background: var(--hover-vlak); }
.pl-mx-cel { padding: 4px 6px; cursor: pointer; min-width: 122px; transition: background var(--motie); position: relative; }
.pl-mx-cel:hover { background: var(--creme); }
.pl-mx-cel .mx-plus { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--inkt-30); opacity: 0; transition: opacity var(--motie); pointer-events: none; }
.pl-mx-cel:not(.gevuld):hover .mx-plus { opacity: 1; }
.mx-blok { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; font-weight: 800; padding: 4px 8px; border-radius: 8px; background: color-mix(in srgb, var(--tk) 14%, white); color: color-mix(in srgb, var(--tk) 70%, black); border-left: 3px solid var(--tk); margin: 2px 0; }
.mx-blok span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mx-blok b { font-variant-numeric: tabular-nums; flex: none; }
/* behoefte-rooster */
.pl-behoefte .bh-taak { display: flex; align-items: center; gap: 10px; }
.pl-behoefte .bh-taak b { font-size: 15px; }
.bh-cel { padding: 4px 6px; min-width: 112px; vertical-align: top; }
.bh-cel-in { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 4px 4px 6px; border-radius: 10px; border-left: 3px solid transparent; }
.bh-cel:not(.leeg) .bh-cel-in { border-left-color: var(--tk); background: color-mix(in srgb, var(--tk) 7%, white); }
.bh-cel.vol .bh-cel-in { background: #E5F3EC; }
.bh-cel.over .bh-cel-in { background: #FDE7E7; }
.bh-inp { width: 100%; font: inherit; font-size: 18px; font-weight: 800; border: 1px solid transparent; border-radius: 8px; padding: 4px 6px; background: transparent; font-variant-numeric: tabular-nums; color: var(--inkt); }
.bh-inp::placeholder { color: var(--inkt-30); font-weight: 500; }
.bh-inp:hover { border-color: var(--hairline-veld); background: var(--wit); }
.bh-inp:focus { outline: none; border-color: var(--oranje); box-shadow: var(--focus-ring); background: var(--wit); }
.bh-meta { display: flex; justify-content: space-between; gap: 6px; font-size: 10px; color: var(--inkt-55); padding: 0 6px; }
.bh-bemand { font-weight: 800; }
.bh-bemand.open { color: var(--oranje); }
.bh-bemand.vol { color: var(--groen); }
.bh-bemand.over { color: #C22F2F; }
.bh-tijd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bh-bar { display: block; height: 3px; background: rgba(24,18,12,.08); border-radius: 2px; overflow: hidden; margin: 2px 6px 0; }
.bh-bar b { display: block; height: 100%; background: var(--tk); }
.bh-cel.over .bh-bar b { background: var(--koraal); }
.bh-edit { position: absolute; top: 4px; right: 4px; background: none; border: none; cursor: pointer; color: var(--inkt-30); padding: 3px; border-radius: 50%; display: inline-flex; opacity: 0; transition: opacity var(--motie); }
.bh-cel:hover .bh-edit { opacity: 1; }
.bh-edit:hover { color: var(--inkt); background: var(--hover-vlak); }
.bh-toe { display: block; font-size: 10px; font-weight: 500; color: var(--inkt-45); }
/* dag- en taaktabel (inputs) */
.pl-dagtabel .pl-mx-post, .pl-taaktabel .pl-mx-post { min-width: 120px; border-top: 3px solid var(--tk); cursor: pointer; }
.pl-dagtabel .pl-mx-post:hover, .pl-taaktabel .pl-mx-post:hover { background: var(--creme); }
.pl-taaktabel .pl-mx-post.vrijdag, .pl-taaktabel .pl-mx-post.zaterdag { background: #E5F3EC; }
.mx-post-naam { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--inkt); text-transform: none; letter-spacing: 0; }
.mx-post-tijd { display: block; font-size: 10px; color: var(--inkt-55); text-transform: none; letter-spacing: 0; margin-top: 2px; font-variant-numeric: tabular-nums; }
.mx-post-coord { display: block; font-size: 10px; color: var(--inkt-45); text-transform: none; letter-spacing: 0; }
.pl-dg-cel { padding: 3px 6px; text-align: center; }
.pl-dg-cel.gevuld { background: #E5F3EC; }
.dg-inp { width: 64px; font: inherit; font-size: 15px; font-weight: 800; text-align: center; border: 1px solid transparent; border-radius: 8px; padding: 6px 4px; background: transparent; font-variant-numeric: tabular-nums; }
.dg-inp:hover { border-color: var(--hairline-veld); background: var(--wit); }
.dg-inp:focus { outline: none; border-color: var(--oranje); box-shadow: var(--focus-ring); background: var(--wit); }
.pl-dagtabel tbody tr:not(.ingepland) .mx-groep, .pl-taaktabel tbody tr:not(.ingepland) .mx-groep { color: var(--inkt-55); font-weight: 500; }
/* cel- en postdialoog */
.cel-posten, .ps-groepen { display: flex; flex-direction: column; gap: 6px; }
.cel-post { display: grid; grid-template-columns: 1fr auto 80px; gap: 12px; align-items: center; padding: 8px 10px 8px 12px; border: 1px solid var(--hairline); border-left: 4px solid var(--tk); border-radius: var(--radius-veld); background: var(--creme); }
.cel-taak b { display: block; font-size: 15px; }
.cel-taak span { font-size: 12px; color: var(--inkt-55); }
.cel-cap { font-size: 12px; font-weight: 800; color: var(--marine); font-variant-numeric: tabular-nums; }
.cel-cap.vol { color: var(--oranje); }
.cel-inp, .ps-n { font: inherit; font-size: 16px; font-weight: 800; text-align: center; border: 1px solid var(--hairline-veld); border-radius: 10px; padding: 8px 6px; width: 80px; }
.cel-inp:focus, .ps-n:focus { outline: none; border-color: var(--oranje); box-shadow: var(--focus-ring); }
.ps-groep { display: grid; grid-template-columns: 1fr 80px 32px; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--hairline); }
.ps-groep:first-child { border-top: none; }
.ps-groep a { font-weight: 800; color: var(--inkt); text-decoration: none; }
.ps-groep a:hover { color: var(--oranje); }
.ps-n { width: 72px; font-size: 14px; padding: 6px; }
.pill.st-kandidaat { --dot: #227FFF; background: #E3EEFC; color: var(--marine); }
.pill.st-bevestigd { --dot: #1C5E48; background: #E5F3EC; color: var(--groen); }
.pill.st-geenplaats { --dot: #E09600; background: #FFF1E0; color: #8A5A00; }
.pill.st-afgezegd { --dot: #FF5D5D; background: #FDE7E7; color: #C22F2F; }
@media (max-width: 900px) {
.pl-matrix-wrap { max-height: none; }
.pl-intro .pl-acties { margin-left: 0; }
.pl-tab { padding: 8px 10px 10px; font-size: 14px; }
}
/* ---------- T-shirts ---------- */
.ts-table td.num { position: relative; }
.ts-table .ts-sub { display: block; font-size: 10px; color: var(--inkt-45); font-weight: 500; line-height: 1; }
.ts-table td.tekort { color: var(--oranje); font-weight: 800; }
.ts-rondes { display: flex; flex-direction: column; gap: 14px; }
.ts-ronde-kop { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.ts-ronde-kop input { font: inherit; border: 1px solid var(--hairline-veld); border-radius: 10px; padding: 8px 10px; }
.ts-label { flex: 1; font-weight: 800; }
.ts-inv input { text-align: right; width: 64px; }
.ts-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.ts-tools .btn-primary { margin-left: auto; }
/* ---------- uren ---------- */
.ur-tarief { margin-left: auto; }
.ur-tarief-lbl { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--inkt-55); }
.ur-tarief-lbl input { font: inherit; width: 90px; text-align: right; border: 1px solid var(--hairline-veld); border-radius: var(--radius-pill); padding: 8px 12px; }
.sp-table td.tekort { color: var(--oranje); font-weight: 800; }
/* ---------- groepsfiche als eigen pagina ----------
Hiërarchie: groene kop (wie) → kerncijfers (hoe staat het) → links het werk
(personen, taken, uren), rechts een smalle kolom met opvolging en gegevens. */
.fiche-main { max-width: 1320px; }
.fiche-page { display: block; }
.fiche-page .fiche-head { border-radius: var(--radius); align-items: flex-start; }
.fiche-page .fiche-title h2 { font-size: clamp(30px, 4vw, 44px); }
.fiche-feiten { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 13px; color: var(--blauw); }
.fiche-feiten span { display: inline-flex; align-items: center; gap: 6px; }
.fiche-feiten a { color: var(--wit); }
.fiche-feiten .feit-leeg { color: rgba(255,255,255,.55); }
.fiche-stats { margin: 14px 0 0; }
.fiche-stats .stat { text-decoration: none; color: inherit; }
.fiche-stats .stat b { font-size: 24px; }
.fiche-page .fiche-body { padding: 14px 0 40px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.fiche-kolom { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fiche-zij { position: sticky; top: 76px; }
.fiche-zij .kaart { padding: 14px 16px; }
.fiche-zij .kaart-kop { font-size: 17px; }
.fiche-zij .kaart-ico { width: 30px; height: 30px; border-radius: 9px; }
.fiche-zij .kaart-ico .ico { width: 16px; height: 16px; }
.fiche-zij .sec-hint { margin-top: -4px; }
.zij-grid { grid-template-columns: 1fr 1fr; }
.zij-grid .field input, .zij-grid .field select, .zij-grid .field textarea { padding: 8px 11px; font-size: 14px; }
.fiche-werk .kaart-kop { font-size: 22px; }
.fiche-werk #k-personen { scroll-margin-top: 80px; }
.fiche-werk #k-taken, .fiche-werk #k-uren, .fiche-zij .kaart { scroll-margin-top: 80px; }
.fiche-page .fiche-close { position: static; margin-left: auto; align-self: flex-start; text-decoration: none; }
.fiche-page .fiche-close:hover { color: var(--wit); }
.fiche-page .fiche-foot { padding: 4px 4px 0; }
/* verantwoordelijken: naam boven e-mail en gsm, past in de smalle kolom */
.contact-rij { grid-template-columns: 28px 1fr 28px; align-items: start; padding: 4px 0; }
.contact-rij + .contact-rij { border-top: 1px solid var(--hairline); padding-top: 8px; }
.contact-velden { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; min-width: 0; }
.contact-velden .contact-naam { grid-column: 1 / -1; font-weight: 800; }
.contact-rij .c-main, .contact-rij .c-del { width: 28px; height: 28px; margin-top: 2px; }
.contact-rij.hoofd .contact-naam { color: var(--groen); }
@media (max-width: 1000px) {
.fiche-page .fiche-body { grid-template-columns: 1fr; }
.fiche-zij { position: static; }
}