/* ==========================================================================
   GetToWeb administratie – stylesheet
   Kleuren staan als variabelen bovenaan: pas ze hier aan, niet verderop.
   ========================================================================== */

/* Lettertypes staan op de eigen server: er gaat niets naar Google. Welk lettertype gebruikt wordt, kies je met
   --font hieronder (bv. "DM Sans", "Figtree" of "Poppins"). Een lettertype dat niet in --font staat, wordt niet geladen.
   DM Sans (SIL Open Font License, zie assets/fonts/dm-sans/OFL.txt): het huidige lettertype. Variabel lettertype,
   één bestand voor alle diktes; de vorm past zich vanzelf aan de tekstgrootte aan (optical size). */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url(../fonts/dm-sans/dm-sans-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url(../fonts/dm-sans/dm-sans-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Figtree (SIL Open Font License, zie assets/fonts/figtree/OFL.txt): alternatief, laten staan om eenvoudig te wisselen. */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url(../fonts/figtree/figtree-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url(../fonts/figtree/figtree-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Poppins (SIL Open Font License, zie assets/fonts/poppins/OFL.txt): vorige keuze, laten staan om eenvoudig terug te kunnen. */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/poppins/poppins-latin-ext-400.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/poppins/poppins-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/poppins/poppins-latin-ext-500.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/poppins/poppins-latin-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/poppins/poppins-latin-ext-600.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/poppins/poppins-latin-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/poppins/poppins-latin-ext-700.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/poppins/poppins-latin-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --brand-1: #0E9BA5;
  --brand-2: #7B239A;
  --brand: #0d8d96;
  --brand-zacht: #e6f6f7;

  --bg: #f5f6f8;
  --paneel: #ffffff;
  --paneel-2: #fafbfc;
  --rand: #e4e7ec;
  --rand-sterk: #cfd4dc;
  --tekst: #1d2433;
  --tekst-2: #5b6474;
  --tekst-3: #8a93a3;

  --ok: #16a34a;     --ok-bg: #e9f8ef;
  --warn: #c27803;   --warn-bg: #fff6e0;
  --fout: #dc2626;   --fout-bg: #fdecec;
  --info: #2563eb;   --info-bg: #eaf1ff;

  --radius: 10px;
  --radius-sm: 7px;
  --schaduw: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --schaduw-lg: 0 12px 32px rgba(16, 24, 40, .14), 0 2px 6px rgba(16, 24, 40, .08);
  --sidebar-b: 232px;
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --brand: #2bb8c2;
  --brand-zacht: #12333a;
  --bg: #0f1218;
  --paneel: #171b23;
  --paneel-2: #1c212b;
  --rand: #2a303c;
  --rand-sterk: #3a4251;
  --tekst: #e7eaf0;
  --tekst-2: #a6aebd;
  --tekst-3: #737c8c;
  --ok-bg: #12301f;  --warn-bg: #352a10;  --fout-bg: #3a1717;  --info-bg: #142546;
  --schaduw: 0 1px 2px rgba(0,0,0,.4);
  --schaduw-lg: 0 12px 32px rgba(0,0,0,.5);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 13px/1.55 var(--font);
  background: var(--bg);
  color: var(--tekst);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.25; font-weight: 650; }
h1 { font-size: 22px; letter-spacing: -.01em; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
p { margin: 0 0 1em; }
small, .klein { font-size: 12px; }
.muted { color: var(--tekst-2); }
.zwak { color: var(--tekst-3); }
.ic { flex: none; vertical-align: middle; }
[hidden] { display: none !important; }
hr { border: 0; border-top: 1px solid var(--rand); margin: 16px 0; }
kbd { font: 11px var(--font); padding: 1px 6px; border: 1px solid var(--rand-sterk); border-bottom-width: 2px; border-radius: 5px; color: var(--tekst-3); }
code { font-size: 12.5px; background: var(--paneel-2); border: 1px solid var(--rand); padding: 1px 5px; border-radius: 5px; }

/* --- Structuur ------------------------------------------------------------ */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-b); flex: none;
  background: linear-gradient(170deg, #0b3f4a 0%, #2a1740 100%);
  color: #d6dbe4; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  padding: 14px 10px 24px;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 18px; color: #fff; text-decoration: none !important; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(-135deg, var(--brand-1), var(--brand-2)); font-weight: 800; color: #fff;
}
.brand-name { font-weight: 700; font-size: 16px; letter-spacing: .01em; }
.nav { display: flex; flex-direction: column; gap: 1px; }
.nav a {
  display: flex; align-items: center; gap: 11px; padding: 8px 11px; border-radius: 8px;
  color: #c3cad6; text-decoration: none; font-weight: 500;
}
.nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav a.actief { background: rgba(255,255,255,.13); color: #fff; box-shadow: inset 3px 0 0 var(--brand-1); }
.nav a .ic { opacity: .85; }
.nav-kop { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #8791a3; padding: 18px 11px 6px; }
.nav-badge { margin-left: auto; background: var(--brand-1); color: #fff; font-size: 11px; padding: 0 7px; border-radius: 10px; line-height: 18px; }
.nav-oud { margin-top: 18px; opacity: .7; font-size: 12.5px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30; height: 58px; display: flex; align-items: center; gap: 12px;
  padding: 0 24px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rand);
}
.zoekbalk {
  display: flex; align-items: center; gap: 8px; width: min(420px, 100%); height: 36px; padding: 0 10px;
  border: 1px solid var(--rand); background: var(--paneel); color: var(--tekst-3); border-radius: 9px; cursor: text; font: inherit;
}
.zoekbalk span { flex: 1; text-align: left; }
.topbar-acties { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.content { padding: 24px; width: 100%; }
.content.smal { max-width: 980px; }

.avatar {
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; font-weight: 700; color: #fff;
  background: linear-gradient(-135deg, var(--brand-1), var(--brand-2));
}

/* Timer in de bovenbalk */
.timer { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 4px 0 12px; border-radius: 9px; background: var(--fout-bg); border: 1px solid color-mix(in srgb, var(--fout) 25%, transparent); }
.timer-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fout); animation: puls 1.4s infinite; }
.timer-label { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tekst); font-weight: 500; }
.timer-tijd { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--fout); }
@keyframes puls { 50% { opacity: .35; } }

/* --- Paginakop ------------------------------------------------------------- */
.page-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-kop h1 { margin: 0; }
.page-kop .sub { margin: 4px 0 0; color: var(--tekst-2); }
.page-acties { display: flex; gap: 8px; flex-wrap: wrap; }
.kruimel { font-size: 12.5px; color: var(--tekst-3); margin-bottom: 6px; }
.kruimel a { color: var(--tekst-2); }

/* --- Panelen / kaarten ------------------------------------------------------ */
.paneel { background: var(--paneel); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schaduw); }
.paneel + .paneel { margin-top: 16px; }
.paneel-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--rand); }
.paneel-kop h2, .paneel-kop h3 { margin: 0; font-size: 15px; }
.paneel-body { padding: 18px; }
.paneel-voet { padding: 12px 18px; border-top: 1px solid var(--rand); background: var(--paneel-2); border-radius: 0 0 var(--radius) var(--radius); }

.grid { display: grid; gap: 16px; }
/* panelen naast elkaar: geen extra marge bovenaan (de tussenruimte komt van 'gap'), anders is het eerste hoger dan de rest */
.grid > .paneel + .paneel { margin-top: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-main { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.stack > * + * { margin-top: 16px; }

.kpi { padding: 16px 18px; }
.kpi-label { color: var(--tekst-2); font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.kpi-waarde { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 12.5px; color: var(--tekst-3); }
a.kpi { display: block; color: inherit; text-decoration: none; }
a.kpi:hover { border-color: var(--rand-sterk); }
.kpi.alarm .kpi-waarde { color: var(--fout); }

/* --- Knoppen --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px;
  font: 500 13px var(--font); color: var(--tekst); background: var(--paneel); border: 1px solid var(--rand-sterk);
  border-radius: 8px; cursor: pointer; text-decoration: none !important; white-space: nowrap;
}
.btn:hover { background: var(--paneel-2); }
.btn:disabled { opacity: .55; cursor: default; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: color-mix(in srgb, var(--brand) 88%, #000); }
.btn-gevaar { color: var(--fout); }
.btn-gevaar:hover { background: var(--fout-bg); }
.btn-ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-sm { height: 30px; padding: 0 10px; font-size: 12.5px; }
.btn-link { background: none; border: 0; color: var(--brand); padding: 0; height: auto; }
.icon-btn {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; background: none; color: var(--tekst-2);
  border-radius: 8px; cursor: pointer;
}
.icon-btn:hover { background: var(--rand); color: var(--tekst); }
.knoppen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* --- Formulieren ----------------------------------------------------------- */
.veld { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 500; color: var(--tekst-2); margin-bottom: 14px; }
.veld > span.hint { font-weight: 400; color: var(--tekst-3); font-size: 12px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search],
input[type=url], input[type=tel], input[type=datetime-local], input[type=week], input[type=month], input[type=time], select, textarea {
  font: 13px var(--font); color: var(--tekst); background: var(--paneel); width: 100%;
  border: 1px solid var(--rand-sterk); border-radius: 8px; padding: 8px 10px; min-height: 36px;
}
textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus, .btn:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tekst); margin-bottom: 10px; cursor: pointer; }
.team-keuze { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 14px; margin-top: 4px; font-weight: 400; }
.team-keuze .check { margin-bottom: 6px; }
.team-namen { font-size: 12.5px; color: var(--tekst-2); white-space: nowrap; }
.check input { width: 16px; height: 16px; accent-color: var(--brand); }
.rij-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.rij-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }
.rij-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 14px; }
.form-sectie { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--tekst-3); margin: 8px 0 12px; font-weight: 600; }

.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filters input[type=search], .filters input[type=text] { width: 260px; }
.filters select { width: auto; min-width: 150px; max-width: 260px; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rand); margin-bottom: 16px; overflow-x: auto; }
.tabs a { padding: 9px 14px; color: var(--tekst-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none; font-weight: 500; }
.tabs a.actief { color: var(--tekst); border-color: var(--brand); }
.tabs a .tel { font-size: 12px; color: var(--tekst-3); margin-left: 4px; }
.segment { display: inline-flex; border: 1px solid var(--rand-sterk); border-radius: 8px; overflow: hidden; }
.segment a { padding: 6px 12px; color: var(--tekst-2); text-decoration: none; font-size: 12.5px; }
.segment a + a { border-left: 1px solid var(--rand-sterk); }
.segment a.actief { background: var(--brand-zacht); color: var(--brand); font-weight: 600; }

/* --- Tabellen -------------------------------------------------------------- */
.tabel-wrap { overflow-x: auto; }
table.tabel { width: 100%; border-collapse: collapse; }
.tabel th { text-align: left; font-size: 12px; font-weight: 600; color: var(--tekst-3); text-transform: uppercase; letter-spacing: .04em; padding: 10px 14px; border-bottom: 1px solid var(--rand); white-space: nowrap; background: var(--paneel-2); }
.tabel td { padding: 10px 14px; border-bottom: 1px solid var(--rand); vertical-align: middle; }
.tabel tr:last-child td { border-bottom: 0; }
.tabel tbody tr:hover td { background: var(--paneel-2); }
.tabel tr.klik { cursor: pointer; }
.tabel .r, .r { text-align: right; }
.tabel .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabel .nowrap { white-space: nowrap; }
.tabel .acties { text-align: right; white-space: nowrap; width: 1%; }
.tabel tfoot td { font-weight: 650; background: var(--paneel-2); border-top: 1px solid var(--rand); }
.tabel .titel-cel { font-weight: 500; color: var(--tekst); }
.tabel .titel-cel small { display: block; font-weight: 400; color: var(--tekst-3); }
.leeg { padding: 40px 20px; text-align: center; color: var(--tekst-3); }
.leeg-klein { padding: 14px; color: var(--tekst-3); font-size: 12.5px; }

/* --- Labels / badges ------------------------------------------------------- */
.badge {
  --badge: #8a93a3;
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 20px; font-size: 12px; font-weight: 600; white-space: nowrap;
  color: color-mix(in srgb, var(--badge) 85%, var(--tekst)); background: color-mix(in srgb, var(--badge) 14%, transparent);
}
.badge-success, .badge-ok { --badge: #16a34a; }
.badge-danger, .badge-fout { --badge: #dc2626; }
.badge-warning, .badge-warn { --badge: #d97706; }
.badge-info { --badge: #0891b2; }
.badge-primary { --badge: #2563eb; }
.badge-default, .badge-grijs { --badge: #8a93a3; }
.badge-paars { --badge: #7B239A; }
.pill { display: inline-block; font-size: 11.5px; padding: 1px 7px; border-radius: 5px; background: var(--paneel-2); border: 1px solid var(--rand); color: var(--tekst-2); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tekst-3); }
.dot-ok { background: var(--ok); } .dot-fout { background: var(--fout); } .dot-warn { background: var(--warn); }
.te-laat { color: var(--fout); font-weight: 600; }
.bijna { color: var(--warn); font-weight: 600; }

/* --- Meldingen ------------------------------------------------------------- */
.flash { padding: 11px 14px; border-radius: 8px; margin-bottom: 16px; border: 1px solid; }
.flash-ok { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.flash-fout { background: var(--fout-bg); border-color: color-mix(in srgb, var(--fout) 30%, transparent); }
.flash-warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.flash-info { background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.toast { background: var(--tekst); color: var(--paneel); padding: 10px 14px; border-radius: 8px; box-shadow: var(--schaduw-lg); animation: in .18s ease-out; max-width: 360px; }
.toast.fout { background: var(--fout); color: #fff; }
@keyframes in { from { transform: translateY(8px); opacity: 0; } }

/* --- Dropdown -------------------------------------------------------------- */
.dropdown { position: relative; }
.dropdown-menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 200px; z-index: 50;
  background: var(--paneel); border: 1px solid var(--rand); border-radius: 10px; box-shadow: var(--schaduw-lg); padding: 6px;
}
.dropdown.open .dropdown-menu { display: block; }
.dropdown-rechts { left: auto; right: 0; }
.dropdown-menu a, .dropdown-menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: 6px; color: var(--tekst); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; text-align: left; }
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--paneel-2); }
.dropdown-info { padding: 8px 10px 10px; border-bottom: 1px solid var(--rand); margin-bottom: 4px; font-weight: 600; }
.dropdown-info small { display: block; font-weight: 400; color: var(--tekst-3); }
.topbar-acties .dropdown:first-of-type .dropdown-menu { left: auto; right: 0; }

/* --- Modal ----------------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(15, 18, 24, .45); display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px 16px; overflow-y: auto; }
.modal-box { background: var(--paneel); border-radius: 12px; box-shadow: var(--schaduw-lg); width: min(540px, 100%); animation: in .15s ease-out; }
.modal-breed { width: min(820px, 100%); }
.modal-kop { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--rand); }
.modal-kop h3 { margin: 0; }
.modal-body { padding: 18px; }
.modal-voet { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--rand); }
.modal-voet .links { margin-right: auto; }
/* Snel bewerken in lijsten */
@keyframes flits { from { background: var(--brand-zacht); } }
tr.flits > td { animation: flits 1.6s ease-out; }
.cel-email { font-size: 12.5px; color: var(--tekst-2); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.snel-knop { opacity: .35; vertical-align: middle; margin-left: 2px; }
tr:hover .snel-knop, .snel-knop:focus-visible { opacity: 1; }
button.badge { border: 0; cursor: pointer; font-family: inherit; }
.modal-zoek { width: min(640px, 100%); overflow: hidden; }
.zoek-input { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--rand); color: var(--tekst-3); }
.zoek-input input { border: 0; box-shadow: none !important; font-size: 16px; height: 54px; padding: 0; background: none; }
.zoek-resultaten { max-height: 60vh; overflow-y: auto; padding: 6px; }
.zoek-groep { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--tekst-3); padding: 10px 10px 4px; }
.zoek-item { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 8px; color: var(--tekst); text-decoration: none !important; }
.zoek-item small { color: var(--tekst-3); margin-left: auto; white-space: nowrap; }
.zoek-item.actief, .zoek-item:hover { background: var(--brand-zacht); }

/* --- Lijsten / detail ------------------------------------------------------ */
.def { display: grid; grid-template-columns: 130px 1fr; gap: 7px 12px; margin: 0; }
.def dt { color: var(--tekst-3); font-size: 12.5px; }
.def dd { margin: 0; word-break: break-word; }
.lijst { list-style: none; margin: 0; padding: 0; }
.lijst > li { padding: 10px 18px; border-bottom: 1px solid var(--rand); display: flex; gap: 10px; align-items: center; }
.lijst > li:last-child { border-bottom: 0; }
.lijst .grow { flex: 1; min-width: 0; }
.lijst .titel { font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tekst); }
.lijst .meta { font-size: 12.5px; color: var(--tekst-3); }

/* Ticket-tijdlijn */
.tijdlijn { display: flex; flex-direction: column; gap: 14px; }
.bericht { border: 1px solid var(--rand); border-radius: var(--radius); background: var(--paneel); overflow: hidden; }
.bericht-kop { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--paneel-2); border-bottom: 1px solid var(--rand); font-size: 12.5px; }
.bericht-kop .wie { font-weight: 600; }
.bericht-kop .wanneer { margin-left: auto; color: var(--tekst-3); }
.bericht-body { padding: 14px; overflow-x: auto; word-break: break-word; }
.bericht-body img { max-width: 100%; height: auto; }
.bericht-body blockquote { margin: 8px 0; padding-left: 12px; border-left: 3px solid var(--rand-sterk); color: var(--tekst-2); }
.bericht.uit { border-color: color-mix(in srgb, var(--brand) 35%, var(--rand)); }
.bericht.uit .bericht-kop { background: var(--brand-zacht); }
.bericht.notitie { border-style: dashed; }
.bericht.notitie .bericht-kop { background: var(--warn-bg); }
.bijlagen { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; }
.bijlage { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--rand); border-radius: 6px; font-size: 12.5px; color: var(--tekst); }
.citaat-toggle { font-size: 12px; color: var(--tekst-3); cursor: pointer; }
.mail-frame { width: 100%; border: 0; min-height: 120px; background: #fff; border-radius: 6px; }

/* Kanban */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.kolom { background: var(--paneel-2); border: 1px solid var(--rand); border-radius: var(--radius); padding: 10px; min-height: 120px; }
.kolom-kop { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 10px; font-weight: 600; font-size: 12.5px; }
.kolom.drop { outline: 2px dashed var(--brand); outline-offset: -4px; }
.kaart { background: var(--paneel); border: 1px solid var(--rand); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; box-shadow: var(--schaduw); cursor: grab; display: block; color: var(--tekst); text-decoration: none !important; }
.kaart:hover { border-color: var(--rand-sterk); }
.kaart-titel { font-weight: 500; margin-bottom: 4px; }
.kaart-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--tekst-3); align-items: center; }
.kaart.sleep { opacity: .4; }

/* Factuurregels */
.regels td { vertical-align: top; }
.regels input, .regels select, .regels textarea { min-height: 34px; padding: 6px 8px; }
.regels textarea { min-height: 34px; height: 34px; }
.regels .col-aantal { width: 90px; }
.regels .col-prijs { width: 120px; }
.regels .col-btw { width: 90px; }
.regels .col-totaal { width: 110px; }
/* Rubriek op een offerte: tussentitel met het subtotaal van de lijnen eronder */
.regels .lijn-rubriek td { background: var(--paneel-2); border-top: 2px solid var(--rand-sterk); }
.regels .lijn-rubriek textarea { font-weight: 700; }
.regels .rubriek-totaal { color: var(--tekst-2); font-weight: 600; vertical-align: middle; }
/* Knoppen onder de lijnen (zelfde als bovenaan): bij lange offertes niet terug naar boven scrollen */
.lijnen-voet { padding: 10px 16px; border-top: 1px solid var(--rand); align-items: center; flex-wrap: wrap; }
.lijnen-voet > .klein:last-child { margin-left: auto; }
.regels .lijn-label { width: auto; min-width: 200px; max-width: 260px; min-height: 28px; padding: 2px 8px; font-size: 12px; }
.totalen { margin-left: auto; width: min(320px, 100%); }
.totalen div { display: flex; justify-content: space-between; padding: 5px 0; font-variant-numeric: tabular-nums; }
.totalen .groot { font-size: 18px; font-weight: 700; border-top: 1px solid var(--rand); margin-top: 6px; padding-top: 10px; }

/* Grafiekje (staven) */
.staven { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding-top: 10px; }
.staaf { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; min-width: 0; }
.staaf i { display: block; width: 100%; max-width: 34px; background: linear-gradient(180deg, var(--brand-1), color-mix(in srgb, var(--brand-1) 60%, var(--brand-2))); border-radius: 4px 4px 0 0; min-height: 2px; }
.staaf span { font-size: 11px; color: var(--tekst-3); }
.staaf b { font-size: 11px; font-weight: 600; color: var(--tekst-2); }

/* Budget (lib/ProjectBudget.php): streep = budget, gearceerd rood voorbij de streep = over budget */
.budgetbalk { position: relative; height: 10px; background: var(--paneel-2); border: 1px solid var(--rand); border-radius: 6px; }
.budgetbalk.klein { height: 6px; margin: 8px 0 6px; }
.budgetbalk > i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 5px 0 0 5px; }
.budgetbalk > i.ok { background: var(--ok); }
.budgetbalk > i.warn { background: var(--warn); }
.budgetbalk > i.vol { background: color-mix(in srgb, var(--fout) 55%, var(--paneel)); }
.budgetbalk > i.over { border-radius: 0 5px 5px 0; background: repeating-linear-gradient(135deg, var(--fout) 0 5px, color-mix(in srgb, var(--fout) 65%, var(--paneel)) 5px 8px); }
.budgetbalk > b { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--tekst); border-radius: 1px; }
.budget-tabel .budget-cel { width: 38%; min-width: 160px; }
.budget-tabel .budget-cel .zwak { display: block; margin-top: 4px; }
.ticket-aandeel { width: 70px; }
.ticket-aandeel i { display: block; height: 6px; min-width: 2px; border-radius: 3px; background: var(--rand-sterk); }
.budget-grafiek-wrap { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rand); }
.budget-grafiek { display: block; width: 100%; height: auto; overflow: visible; }
.budget-grafiek text { font: 10px var(--font); fill: var(--tekst-3); }
.budget-grafiek .as { stroke: var(--rand-sterk); stroke-width: 1; }
.budget-grafiek .budgetlijn { stroke: var(--tekst-2); stroke-width: 1.5; stroke-dasharray: 4 3; }
.budget-grafiek .lijn { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; }
.budget-grafiek .lijn.over { stroke: var(--fout); }
.budget-grafiek .vlak { fill: color-mix(in srgb, var(--brand) 14%, transparent); }
.budget-grafiek .vlak.over { fill: color-mix(in srgb, var(--fout) 18%, transparent); }
.budget-grafiek .punt { fill: var(--brand); stroke: var(--paneel); stroke-width: 2; }
.budget-grafiek .punt.over { fill: var(--fout); }
.budget-grafiek .doel { fill: transparent; cursor: default; }
.budget-grafiek .doel:hover { fill: color-mix(in srgb, var(--tekst) 12%, transparent); }
.voortgang { height: 6px; background: var(--rand); border-radius: 4px; overflow: hidden; }
.voortgang i { display: block; height: 100%; background: var(--brand); }

/* --- Login ----------------------------------------------------------------- */
.login-bg { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: linear-gradient(-135deg, var(--brand-1) 0%, var(--brand-2) 100%); }
.login-box { width: min(380px, 100%); background: var(--paneel); border-radius: 14px; box-shadow: var(--schaduw-lg); padding: 30px; }
.login-box .brand { color: var(--tekst); padding: 0 0 20px; }

/* --- Zoekbare keuzelijsten (assets/js/zoekselect.js) ------------------------ */
.zs { position: relative; display: block; width: 100%; min-width: 0; }
.filters .zs, .regels .zs, .knoppen .zs { display: inline-block; width: auto; min-width: 150px; max-width: 100%; vertical-align: middle; }
.zs-native { position: absolute !important; left: 0; bottom: 0; width: 100% !important; height: 1px !important; min-height: 0 !important; opacity: 0; pointer-events: none; padding: 0 !important; border: 0 !important; }
.zs-knop {
  display: block; width: 100%; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 13px var(--font); color: var(--tekst); background: var(--paneel); border: 1px solid var(--rand-sterk); border-radius: 8px;
  padding: 8px 30px 8px 10px; min-height: 36px; position: relative;
  background-image: linear-gradient(45deg, transparent 50%, var(--tekst-3) 50%), linear-gradient(135deg, var(--tekst-3) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
.zs-knop.zs-leeg { color: var(--tekst-3); }
.zs-knop:disabled { opacity: .6; cursor: not-allowed; }
.zs-knop:focus-visible, .zs-open .zs-knop { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.zs-ongeldig .zs-knop { border-color: var(--fout); }
.zs-paneel {
  position: fixed; z-index: 300; display: flex; flex-direction: column; background: var(--paneel);
  border: 1px solid var(--rand-sterk); border-radius: 9px; box-shadow: var(--schaduw-lg); overflow: hidden;
}
.zs-paneel[hidden] { display: none; }
.zs-paneel.zs-boven { flex-direction: column-reverse; }
.zs-paneel .zs-zoek { border: 0; border-bottom: 1px solid var(--rand); border-radius: 0; box-shadow: none; min-height: 38px; flex: none; }
.zs-paneel.zs-boven .zs-zoek { border-bottom: 0; border-top: 1px solid var(--rand); }
.zs-lijst { list-style: none; margin: 0; padding: 4px; overflow-y: auto; flex: 1 1 auto; }
.zs-lijst li { padding: 7px 10px; border-radius: 6px; font-size: 13px; cursor: pointer; color: var(--tekst); overflow-wrap: anywhere; }
.zs-lijst li b { font-weight: 700; color: var(--brand); }
.zs-lijst li.zs-in-groep { padding-left: 18px; }
.zs-lijst li.zs-actief { background: var(--brand-zacht); }
.zs-lijst li.zs-gekozen { font-weight: 600; }
.zs-lijst li.zs-leeg { color: var(--tekst-3); }
.zs-lijst li.zs-uit { color: var(--tekst-3); cursor: default; }
.zs-lijst li.zs-groep { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--tekst-3); padding: 9px 10px 3px; cursor: default; }
.zs-lijst li.zs-niets { color: var(--tekst-3); cursor: default; font-size: 12.5px; }
@media (max-width: 860px) { .zs-paneel .zs-zoek { font-size: 16px; } } /* geen inzoomen op iPhone */

/* --- Responsief ------------------------------------------------------------ */
.only-mobile { display: none; }
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-main { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .only-mobile { display: inline-grid; }
  .hide-mobile { display: none; }
  .sidebar { position: fixed; left: 0; top: 0; z-index: 90; transform: translateX(-100%); transition: transform .2s; }
  body.sidebar-open .sidebar { transform: none; }
  body.sidebar-open .sidebar-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 80; }
  .topbar { padding: 0 12px; }
  .content { padding: 16px; }
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }   /* minmax: een lange titel mag het paneel niet breder maken dan het scherm */
  .rij-3, .rij-4 { grid-template-columns: 1fr 1fr; }
  .zoekbalk kbd { display: none; }
  .timer-label { display: none; }
  .filters input[type=search], .filters input[type=text] { width: 100%; }
}
@media (max-width: 520px) {
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .rij-2, .rij-3, .rij-4 { grid-template-columns: 1fr; }
  .def { grid-template-columns: 1fr; gap: 2px; }
  .def dd { margin-bottom: 8px; }
}

/* Sorteerbare kolommen */
.tabel th.sorteerbaar { cursor: pointer; user-select: none; }
.tabel th.sorteerbaar:hover { color: var(--tekst); }
.tabel th.sorteerbaar::after { content: '↕'; margin-left: 5px; opacity: .3; font-size: 11px; }
.tabel th.sort-op::after { content: '▲'; opacity: .9; color: var(--brand); }
.tabel th.sort-af::after { content: '▼'; opacity: .9; color: var(--brand); }

/* Brede schermen: zijkolom wat breder */
@media (min-width: 1800px) {
  .grid-main { grid-template-columns: minmax(0, 1fr) 420px; }
  .content { padding: 28px 36px; }
}

/* Bulk-selectie in lijsten */
.bulkbalk { position: sticky; top: calc(58px + env(safe-area-inset-top, 0px)); z-index: 20; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 10px; border-radius: var(--radius); background: var(--fout-bg); border: 1px solid color-mix(in srgb, var(--fout) 30%, transparent); }
.bulkbalk .bulk-tel { margin-right: auto; }
.tabel tr.gekozen td { background: color-mix(in srgb, var(--fout) 7%, transparent); }
.tabel .col-sel { width: 34px; padding-right: 0; }
.tabel .col-sel input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
/* heel de cel aanklikbaar, zodat je bij het aanvinken niet per ongeluk de rij opent */
.tabel .col-sel label { display: block; margin: -10px 0; padding: 10px 0; cursor: pointer; }

/* Dashboard: kopje boven een rij blokjes, en het tijdsoverzicht van de week */
.rij-kop { margin: 4px 0 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--tekst-2); }
.rij-kop span { margin-left: 6px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--tekst-3); }
/* Uren deze week: één kolom per dag, per klant de uren × het tarief en het bedrag, onderaan het dagtotaal */
.weekuren { display: grid; grid-template-columns: repeat(var(--dagen, 5), minmax(0, 1fr)); }
.dagkolom { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--rand); }
.dagkolom:last-child { border-right: 0; }
.dag-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 9px 14px; border-bottom: 1px solid var(--rand); background: var(--paneel-2); }
.dag-kop b { text-transform: capitalize; }
.dag-kop span { font-size: 12px; color: var(--tekst-3); }
.dagkolom.vandaag .dag-kop { background: var(--brand-zacht); }
.dagkolom.vandaag .dag-kop b { color: var(--brand); }
.dag-klanten { flex: 1; padding: 4px 14px; }
.dag-klant { padding: 7px 0; border-bottom: 1px dashed var(--rand); }
.dag-klant:last-child { border-bottom: 0; }
.dag-regel { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dag-regel .naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--tekst); }
.dag-regel a.naam:hover { color: var(--brand); }
.dag-regel b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dag-klant .meta { font-size: 12.5px; color: var(--tekst-3); font-variant-numeric: tabular-nums; }
.dag-leeg { padding: 12px 0; font-size: 12.5px; color: var(--tekst-3); }
.dag-leeg.bijna { color: var(--warn); }
.dag-totaal { padding: 10px 14px; border-top: 1px solid var(--rand); }
.dag-totaal b { display: block; font-size: 19px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.dag-totaal span { font-size: 12px; color: var(--tekst-3); }
.dag-totaal.nul b { font-weight: 400; color: var(--tekst-3); }
@media (max-width: 860px) {
  .weekuren { grid-template-columns: minmax(0, 1fr); }
  .dagkolom { border-right: 0; border-bottom: 1px solid var(--rand); }
  .dagkolom:last-child { border-bottom: 0; }
}
/* lange lijst in twee kolommen op een breed scherm (dashboard: "Vraagt aandacht") */
@media (min-width: 861px) {
  .lijst.twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lijst.twee > li:nth-child(odd) { border-right: 1px solid var(--rand); }
  .lijst.twee > li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}

/* --- Weekplanning (planning.php, assets/js/planning.js) en "Mijn dag" op het dashboard ---------------------------
   Rooster: één rij per persoon, één kolom per dag, rechts het weektotaal. Het rooster scrolt zelf horizontaal
   (de pagina niet); de namenkolom blijft daarbij staan. Belasting: groen < 80%, oranje 80–100%, rood > 100%. */
.pl-balk .pl-weeklabel { font-weight: 650; white-space: nowrap; }
.pl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
.pl-grid-wrap { overflow-x: auto; }
.pl-grid { display: grid; grid-template-columns: 124px repeat(var(--pl-dagen, 5), minmax(118px, 1fr)) 96px; }
.pl-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 9px 10px; background: var(--paneel-2); border-left: 1px solid var(--rand); font-size: 12.5px; }
.pl-kop b { text-transform: capitalize; }
.pl-kop span { font-size: 12px; color: var(--tekst-3); }
.pl-kop.pl-vandaag { background: var(--brand-zacht); }
.pl-kop.pl-vandaag b { color: var(--brand); }
.pl-hoek, .pl-naam { position: sticky; left: 0; z-index: 2; border-left: 0; }
.pl-hoek { color: var(--tekst-3); font-size: 12px; }
.pl-naam { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; background: var(--paneel); border-top: 1px solid var(--rand); box-shadow: 1px 0 0 var(--rand); min-width: 0; }
.pl-naam b { overflow-wrap: anywhere; line-height: 1.3; }
.pl-naam small { color: var(--tekst-3); font-variant-numeric: tabular-nums; }
.pl-naam.pl-ik b { color: var(--brand); }
.pl-cel { min-width: 0; min-height: 96px; padding: 6px; border-top: 1px solid var(--rand); border-left: 1px solid var(--rand); transition: background .12s; }
.pl-cel.pl-vandaag { background: color-mix(in srgb, var(--brand) 4%, var(--paneel)); }
.pl-cel.pl-weekend { background: var(--paneel-2); }
.pl-slepen .pl-cel[data-mag] { background: color-mix(in srgb, var(--brand) 3%, var(--paneel)); }
.pl-cel.pl-drop { outline: 2px dashed var(--brand); outline-offset: -3px; background: var(--brand-zacht); }
.pl-cel-kop { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0 6px; font-size: 12px; }
.pl-last { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-last .zwak { font-weight: 400; }
.pl-ok { color: var(--ok); }
.pl-warn { color: var(--warn); }
.pl-fout { color: var(--fout); }
.pl-leeg { color: var(--tekst-3); font-weight: 400; }
.pl-neutraal { color: var(--tekst-2); }
.pl-reg { color: var(--tekst-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-bar { height: 4px; margin: 4px 0 6px; background: var(--rand); border-radius: 3px; overflow: hidden; }
.pl-bar i { display: block; height: 100%; background: var(--tekst-3); }
.pl-bar i.pl-ok { background: var(--ok); }
.pl-bar i.pl-warn { background: var(--warn); }
.pl-bar i.pl-fout { background: var(--fout); }
.pl-kaarten { display: flex; flex-direction: column; gap: 6px; min-height: 28px; }
.pl-totaal { padding: 9px 10px; border-top: 1px solid var(--rand); border-left: 1px solid var(--rand); background: var(--paneel-2); font-size: 12px; }
.pl-totaal .pl-last { font-size: 13.5px; }
.pl-totaal small { color: var(--tekst-3); font-variant-numeric: tabular-nums; }
/* kaartjes in het rooster en tickets in "Te plannen": links een streep in de kleur van de status */
.pl-kaart, .pl-ticket {
  display: block; padding: 6px 8px; font-size: 12.5px; color: var(--tekst); text-decoration: none !important;
  background: var(--paneel); border: 1px solid var(--rand); border-left: 3px solid var(--streep, var(--rand-sterk)); border-radius: 7px; box-shadow: var(--schaduw);
}
.pl-kaart.pl-mag, .pl-ticket { cursor: grab; }
.pl-kaart:hover, .pl-ticket:hover { border-color: var(--rand-sterk); border-left-color: var(--streep, var(--rand-sterk)); }
.pl-kaart:focus-visible, .pl-ticket:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.pl-kaart.sleep, .pl-ticket.sleep { opacity: .4; }
.pl-kaart-titel { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.pl-kaart-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1px 8px; margin-top: 2px; font-size: 11.5px; color: var(--tekst-3); }
.pl-kaart-meta .ic { vertical-align: -2px; }
.pl-klant { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-duur { margin-left: auto; color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.pl-notitie { display: block; margin-top: 2px; font-size: 11.5px; color: var(--tekst-2); font-style: italic; overflow-wrap: anywhere; }
.pl-kaart.pl-af { background: var(--paneel-2); box-shadow: none; }
.pl-kaart.pl-af .pl-kaart-titel { color: var(--tekst-3); }
.pl-af .ic { color: var(--ok); }
.pl-kaart.pl-na-deadline { border-top-color: color-mix(in srgb, var(--fout) 45%, var(--rand)); border-right-color: color-mix(in srgb, var(--fout) 45%, var(--rand)); border-bottom-color: color-mix(in srgb, var(--fout) 45%, var(--rand)); }
/* Afgewerkt: ingeklapt tot één regel, zodat de dag zichtbaar leegloopt */
.pl-kaart.pl-af { padding: 3px 8px; opacity: .75; }
.pl-kaart.pl-af .pl-kaart-meta, .pl-kaart.pl-af .pl-notitie { display: none; }
.pl-kaart.pl-af .pl-kaart-titel { -webkit-line-clamp: 1; font-weight: 400; font-size: 12px; }
/* Knoppen op een kaartje: afronden en timer (bij hover of focus; op een touchscherm altijd) */
.pl-kaart { position: relative; }
.pl-acties { position: absolute; top: 3px; right: 3px; display: flex; gap: 2px; padding: 1px; background: var(--paneel); border-radius: 6px; opacity: 0; transition: opacity .12s; }
.pl-kaart:hover .pl-acties, .pl-kaart:focus-within .pl-acties, .pl-kaart:focus .pl-acties { opacity: 1; }
.pl-actie { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid var(--rand); border-radius: 6px; background: var(--paneel); color: var(--tekst-2); cursor: pointer; }
.pl-actie:hover { color: var(--ok); border-color: var(--ok); background: var(--ok-bg); }
.pl-actie[data-timer-start]:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-zacht); }
.pl-actie.btn-gevaar { color: var(--fout); border-color: var(--fout); opacity: 1; }
.pl-kaart:has(.pl-actie.btn-gevaar) .pl-acties { opacity: 1; } /* timer loopt: altijd zichtbaar */
/* Voortgang van vandaag en "rest → morgen" */
.pl-voortgang { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px; margin: -2px 0 6px; font-size: 11.5px; color: var(--tekst-3); font-variant-numeric: tabular-nums; }
.pl-alles-af { color: var(--ok); font-weight: 600; }
.pl-rest { padding: 1px 7px; border: 1px solid var(--rand-sterk); border-radius: 20px; background: var(--paneel); font: 500 11.5px var(--font); color: var(--tekst-2); cursor: pointer; white-space: nowrap; margin-left: auto; }
.pl-rest:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-zacht); }
.pl-rest-achter { margin: 4px 0 0; align-self: flex-start; white-space: normal; text-align: left; color: color-mix(in srgb, var(--warn) 85%, var(--tekst)); background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.pl-vandaag-knop { margin-left: auto; padding: 0 6px; border: 1px solid var(--rand-sterk); border-radius: 20px; background: var(--paneel); font: 500 11px var(--font); color: var(--brand); cursor: pointer; opacity: 0; }
.pl-ticket:hover .pl-vandaag-knop, .pl-ticket:focus-within .pl-vandaag-knop, .pl-ticket:focus .pl-vandaag-knop { opacity: 1; }
.pl-vandaag-knop:hover { background: var(--brand-zacht); border-color: var(--brand); }
@media (hover: none) { .pl-acties, .pl-vandaag-knop { opacity: 1; } }
.pl-sneltoetsen { padding: 8px 12px; border-top: 1px solid var(--rand); }
.pl-uitkomsten { display: grid; gap: 6px; }
.pl-uitkomsten .pl-sub { margin-left: 24px; }
.pl-uitkomsten .rij-2.pl-sub .veld { margin-bottom: 0; }
.pl-bezig { cursor: progress; }
@keyframes pl-flits { from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 45%, transparent); } }
.pl-kaart.pl-flits { animation: pl-flits 1.4s ease-out; }
/* paneel "Te plannen" */
.pl-paneel { position: sticky; top: 74px; display: flex; flex-direction: column; max-height: calc(100vh - 92px); }
.paneel + .pl-paneel { margin-top: 0; }
.pl-paneel-filters { display: grid; gap: 6px; padding: 10px; border-bottom: 1px solid var(--rand); }
.pl-lijst { flex: 1 1 auto; min-height: 80px; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.pl-modal-voet { flex-wrap: wrap; }
/* "Mijn dag" op het dashboard */
.pl-mijndag .paneel-kop h3 { display: flex; align-items: center; gap: 6px; }
.pl-mijndag .lijst > li[style] { box-shadow: inset 3px 0 0 var(--streep); }
.pl-mijndag .lijst > li.pl-af .titel { color: var(--tekst-3); }
.pl-mijndag .pl-lijst-kop { padding: 7px 18px; background: var(--paneel-2); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--tekst-3); }
.pl-gepland a { font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) {
  .pl-layout { grid-template-columns: minmax(0, 1fr); }
  .pl-paneel { position: static; max-height: 70vh; }
}
@media (max-width: 520px) {
  .pl-grid { grid-template-columns: 96px repeat(var(--pl-dagen, 5), minmax(140px, 1fr)) 96px; }
  .pl-naam, .pl-kop, .pl-totaal { padding: 8px 7px; }
}

/* Planningslabel in de ticketlijst en op het bord (inc/planning_weergave.php → planning_chip_html) */
.pl-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 20px; font-size: 12px; font-weight: 600; white-space: nowrap; text-decoration: none !important; font-variant-numeric: tabular-nums; }
.pl-chip-gepland { color: var(--brand); background: var(--brand-zacht); }
.pl-chip-vandaag { color: #fff; background: var(--brand); }
.pl-chip-verlopen { color: color-mix(in srgb, var(--warn) 85%, var(--tekst)); background: var(--warn-bg); }
.pl-chip-niet { color: var(--tekst-3); font-weight: 500; border: 1px dashed var(--rand-sterk); padding: 0 7px; }
.kaart-meta .pl-chip { font-size: 11px; padding: 0 6px; }

/* Dashboard: agenda vandaag en melding van de eerstvolgende afspraak (assets/js/dashboard-agenda.js) */
.agenda-melding { align-items: center; }
.agenda-melding .ag-tekst { flex: 1; line-height: 1.6; }
.agenda-melding .ag-over { font-variant-numeric: tabular-nums; }
.agenda-vandaag .paneel-kop h3 { display: flex; align-items: center; gap: 6px; }
.agenda-vandaag .ag-tijd { width: 92px; flex: none; color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.agenda-vandaag .meta { display: block; font-size: 12.5px; color: var(--tekst-3); }
.agenda-vandaag li.ag-voorbij { opacity: .5; }
.agenda-vandaag li.ag-bezig { box-shadow: inset 3px 0 0 var(--ok); background: var(--ok-bg); }

/* --- Flexbureaus (flex.php, assets/js/flex.js) -----------------------------------------------------------------
   Rooster: één rij per ruimte, één kolom per dag. Een vrij vakje is aanklikbaar; een naam = een reservatie
   (voormiddag/namiddag als halve breedte-label). Vast bureau: grijs met een vinkje. Gefactureerd: factuuricoon. */
.fx-balk b { white-space: nowrap; }
.fx-snel { display: grid; grid-template-columns: minmax(200px, 280px) 150px minmax(0, 1fr); gap: 12px; align-items: end; padding: 12px 14px; margin-bottom: 12px; }
.fx-grid-wrap { overflow-x: auto; }
.fx-grid { display: grid; grid-template-columns: 140px repeat(var(--fx-dagen, 5), minmax(120px, 1fr)); }
.fx-hoek, .fx-ruimte { position: sticky; left: 0; z-index: 2; background: var(--paneel); box-shadow: 1px 0 0 var(--rand); }
.fx-kop { padding: 9px 10px; background: var(--paneel-2); border-left: 1px solid var(--rand); font-size: 12.5px; font-weight: 600; text-transform: capitalize; }
.fx-kop.fx-vandaag { background: var(--brand-zacht); color: var(--brand); }
.fx-hoek { background: var(--paneel-2); }
.fx-ruimte { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-top: 1px solid var(--rand); min-width: 0; }
.fx-ruimte b { overflow-wrap: anywhere; line-height: 1.3; }
.fx-cel { display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 64px; padding: 6px; border-top: 1px solid var(--rand); border-left: 1px solid var(--rand); transition: background .12s; }
.fx-cel.fx-vandaag { background: color-mix(in srgb, var(--brand) 4%, var(--paneel)); }
.fx-cel.fx-vrij { cursor: pointer; }
.fx-cel.fx-vrij:hover, .fx-cel.fx-vrij:focus-visible { background: var(--brand-zacht); outline: none; }
.fx-cel.fx-vrij:not(:has(.fx-res, .fx-vast))::after { content: "+"; margin: auto; color: var(--tekst-3); font-size: 18px; opacity: 0; transition: opacity .12s; }
.fx-cel.fx-vrij:hover::after, .fx-cel.fx-vrij:focus-visible::after { opacity: 1; }
.fx-cel.fx-bezig { cursor: progress; opacity: .6; }
.fx-res { display: flex; align-items: center; gap: 5px; width: 100%; padding: 4px 7px; font: inherit; font-size: 12.5px; text-align: left; color: var(--tekst);
  background: var(--paneel); border: 1px solid var(--rand); border-left: 3px solid var(--brand); border-radius: 7px; box-shadow: var(--schaduw); cursor: pointer; }
.fx-res:hover { border-color: var(--rand-sterk); border-left-color: var(--brand); }
.fx-res:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.fx-res.fx-vm, .fx-res.fx-nm { border-left-color: var(--brand-2); }
.fx-res.fx-gef { background: var(--paneel-2); box-shadow: none; }
.fx-res .ic { flex: none; color: var(--ok); }
.fx-naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.fx-deel { margin-left: auto; padding: 0 5px; border-radius: 10px; font-size: 11px; font-weight: 600; color: var(--brand-2); background: color-mix(in srgb, var(--brand-2) 12%, var(--paneel)); }
.fx-vast { display: flex; align-items: center; gap: 4px; padding: 4px 7px; font-size: 12px; color: var(--tekst-2); background: var(--paneel-2); border: 1px dashed var(--rand-sterk); border-radius: 7px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fx-plus { font-size: 11.5px; color: var(--tekst-3); }
.fx-lijn { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 12.5px; line-height: 1.4; }
.fx-lijn + .fx-lijn { border-top: 1px dashed var(--rand); }
.fx-ruimtes input[type=text], .fx-ruimtes select { min-width: 90px; }
@media (max-width: 860px) {
  .fx-snel { grid-template-columns: minmax(0, 1fr) 130px; }
  .fx-snel p { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .fx-grid { grid-template-columns: 96px repeat(var(--fx-dagen, 5), minmax(120px, 1fr)); }
  .fx-ruimte, .fx-kop { padding: 8px 7px; }
}

/* Flexbureau in het klantenportaal (klant/flex.php) */
.fxk-dag { padding: 10px 14px; border-top: 1px solid var(--rand); }
.fxk-dag:first-child { border-top: 0; }
.fxk-dag h4 { margin: 0 0 6px; font-size: 13.5px; }
.fxk-dag h4::first-letter { text-transform: uppercase; }
.fxk-dag.fx-vandaag h4 { color: var(--brand); }
.fxk-ruimtes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 8px; }
.fxk-ruimte { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid var(--rand); border-radius: 8px; background: var(--paneel); }
.fxk-ruimte b { flex: 1 1 100%; font-size: 12.5px; }
.fxk-ruimte form { display: inline; margin: 0; }
.fxk-ruimte.fxk-mijn { border-color: var(--brand); background: var(--brand-zacht); }
.fxk-bezet { font-size: 12px; color: var(--tekst-3); }
/* Lokveld tegen spam op klant/flex-aanvraag.php: buiten beeld, niet voor mensen */
.fxk-lok { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.fx-aanvraag { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; padding: 14px 16px; border-top: 1px solid var(--rand); }
.fx-aanvraag:first-child { border-top: 0; }
.fx-aanvraag dl { margin: 0; display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 3px 10px; font-size: 12.5px; }
.fx-aanvraag dt { color: var(--tekst-3); }
.fx-aanvraag dd { margin: 0; overflow-wrap: anywhere; }
.fx-aanvraag form { margin: 0; }
@media (max-width: 860px) { .fx-aanvraag { grid-template-columns: minmax(0, 1fr); } }

/* Checklist per ticket (inc/checklist_weergave.php, assets/js/checklist.js) */
.cl-chip { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--tekst-2); background: var(--paneel-2); border: 1px solid var(--rand); vertical-align: 1px; }
.cl-chip .ic { color: var(--tekst-3); }
.cl-chip-klaar { color: var(--ok); background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.cl-chip-klaar .ic { color: var(--ok); }
.cl-paneel .paneel-kop h3 { display: flex; align-items: center; gap: 6px; }
.cl-voortgang { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12px; color: var(--tekst-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-balk { flex: 1; height: 6px; background: var(--rand); border-radius: 4px; overflow: hidden; }
.cl-balk i { display: block; height: 100%; background: var(--ok); transition: width .2s; }
.cl-lijst { list-style: none; margin: 0 0 10px; padding: 0; }
.cl-punt { display: flex; align-items: flex-start; gap: 6px; padding: 5px 4px; border-radius: 7px; }
.cl-punt:hover { background: var(--paneel-2); }
.cl-punt.cl-sleep { opacity: .4; }
.cl-greep { cursor: grab; color: var(--tekst-3); font-size: 12px; line-height: 22px; letter-spacing: -2px; opacity: 0; user-select: none; }
.cl-punt:hover .cl-greep { opacity: 1; }
.cl-vink { display: flex; align-items: center; height: 22px; margin: 0; cursor: pointer; }
.cl-vink input { width: 16px; height: 16px; margin: 0; accent-color: var(--ok); cursor: pointer; }
.cl-tekst { flex: 1; min-width: 0; line-height: 22px; overflow-wrap: anywhere; cursor: text; border-radius: 4px; }
.cl-tekst:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.cl-af .cl-tekst { color: var(--tekst-3); text-decoration: line-through; }
.cl-wie { font-size: 11.5px; color: var(--tekst-3); line-height: 22px; white-space: nowrap; }
.cl-weg { width: 22px; height: 22px; opacity: 0; }
.cl-punt:hover .cl-weg, .cl-weg:focus-visible { opacity: 1; }
.cl-weg:hover { color: var(--fout); }
.cl-bewerk { flex: 1; min-width: 0; height: 24px; padding: 0 6px; font-size: inherit; }
.cl-nieuw { display: flex; gap: 6px; align-items: flex-start; }
.cl-nieuw textarea { flex: 1; min-height: 34px; resize: none; overflow: hidden; line-height: 1.4; }
.cl-alles { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: var(--ok-bg); color: var(--ok); font-weight: 600; font-size: 13px; }
@media (hover: none) { .cl-greep, .cl-weg { opacity: 1; } }