/* ═══════════════════════════════════════════════════════
   PLENIVO — app.css  (overhaul B, oktober 2026)
   Laatste stylesheet: tokens + componenten in de huisstijl van plenivo.nl.
   Papier (licht) is standaard, nacht (donker) blijft als tweede thema.
   Afronding: 3px (knop, label, veld, chip), 6px (paneel), rond alleen voor avatars.
═══════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────── */
html[data-theme="light"], html:not([data-theme]) {
  --bg:#f4f3f0; --bg2:#ffffff; --bg3:#faf9f7; --bg4:#eeece8; --bg5:#d6d3cd;
  --border:#d6d3cd; --border2:#c4c0b8; --line:#e6e3dd;
  --text:#16181a; --text2:#4f555c; --muted:#5f656b; --muted2:#8a9096;
  --surface:#ffffff; --surface2:#faf9f7; --card-bg:#ffffff; --header-bg:#ffffff; --sidebar-bg:#0e0f11;
  --input-bg:#ffffff; --chip-bg:#ffffff; --today:#fbf1f0; --on-bg:#16181a; --on-fg:#ffffff;
  --shadow:0 8px 24px rgba(22,24,26,.12); --shadow-sm:none; --overlay:rgba(22,24,26,.32);
  --brand:#c3302a; --brand2:#a52620; --brand-hover:#a52620; --brand-bg:rgba(195,48,42,.08); --brand-ink:#a52620;
  --accent:#16181a; --accent2:#3d6db0;
  --w:#3d6db0; --w-bg:rgba(61,109,176,.08); --e:#c27c0e; --e-bg:rgba(194,124,14,.09);
  --i:#2d8a83; --i-bg:rgba(45,138,131,.09); --f:#7b5ea7; --f-bg:rgba(123,94,167,.09);
  --ok:#2e7d4f; --ok-bg:#e3f1e8; --ok-ink:#1f5e3a; --warn:#c27c0e; --warn-bg:#fbf0dc; --warn-ink:#7a4f00;
  --info-bg:#e8eef7; --info-ink:#24497d; --err-bg:#f8e4e2; --err-ink:#8f221d;
  --table-hdr:#faf9f7; --table-row-hover:rgba(22,24,26,.025); --table-border:#ece9e4;
  /* oude namen uit style.css */
  --red:#c3302a; --red2:#a52620; --navy:#16181a; --navy2:#2a2e33; --dark:#f4f3f0;
  --g1:#ffffff; --g2:#ffffff; --g3:#faf9f7; --g4:#d6d3cd; --radius:3px; --radius-lg:6px;
}
html[data-theme="dark"] {
  --bg:#0e0f11; --bg2:#16181b; --bg3:#1b1d20; --bg4:#24282c; --bg5:#2e3237;
  --border:#2e3237; --border2:#3a3f45; --line:#22262a;
  --text:#eceeef; --text2:#c4c8cc; --muted:#a3a8ad; --muted2:#7d8389;
  --surface:#16181b; --surface2:#1b1d20; --card-bg:#16181b; --header-bg:#16181b; --sidebar-bg:#0a0b0c;
  --input-bg:#0e0f11; --chip-bg:#1e2124; --today:rgba(224,82,70,.07); --on-bg:#eceeef; --on-fg:#0e0f11;
  --shadow:0 8px 24px rgba(0,0,0,.45); --shadow-sm:none; --overlay:rgba(0,0,0,.5);
  --brand:#c3302a; --brand2:#e05246; --brand-hover:#d63a33; --brand-bg:rgba(224,82,70,.12); --brand-ink:#f0705f;
  --accent:#eceeef; --accent2:#7fa6dd;
  --w:#5a8ad0; --w-bg:rgba(90,138,208,.12); --e:#d99a2b; --e-bg:rgba(217,154,43,.12);
  --i:#3fa99f; --i-bg:rgba(63,169,159,.12); --f:#9a7dc6; --f-bg:rgba(154,125,198,.12);
  --ok:#5cb67f; --ok-bg:rgba(92,182,127,.14); --ok-ink:#8fd3a8; --warn:#d99a2b; --warn-bg:rgba(217,154,43,.14); --warn-ink:#f0c46e;
  --info-bg:rgba(90,138,208,.16); --info-ink:#a9c4ec; --err-bg:rgba(224,82,70,.16); --err-ink:#f39a8f;
  --table-hdr:#1b1d20; --table-row-hover:rgba(255,255,255,.025); --table-border:#22262a;
  --red:#c3302a; --red2:#e05246; --navy:#eceeef; --navy2:#c4c8cc; --dark:#0e0f11;
  --g1:#16181b; --g2:#16181b; --g3:#1b1d20; --g4:#3a3f45; --radius:3px; --radius-lg:6px;
}

/* ── BASIS ──────────────────────────────────────────── */
html body { font-family:'Archivo',system-ui,sans-serif; font-stretch:100%; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums; }
button, input, select, textarea { font-family:'Archivo',system-ui,sans-serif; }
::selection { background:rgba(195,48,42,.18); }
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
::-webkit-scrollbar-thumb { background:var(--border2); }
::-webkit-scrollbar-track { background:transparent; }
.page-title, .section-hdr h3, .card-title { font-family:'Archivo',sans-serif; letter-spacing:-.005em; }
.page-title { font-weight:800; font-stretch:112%; text-transform:uppercase; }
.section-hdr h3 { font-weight:700; text-transform:none; letter-spacing:0; }

/* ── SCHIL: zijbalk met merk bovenin en account onderin; bovenbalk alleen op mobiel ── */
.site-header { display:none; }
.layout { min-height:100vh; }
.sidebar { width:232px; position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:0; background:var(--sidebar-bg); border-right:1px solid #1d2023; overflow-y:auto; transition:width .15s ease; }
.sb-top { display:flex; align-items:center; gap:10px; padding:16px 14px 14px 18px; border-bottom:1px solid #1d2023; margin-bottom:4px; }
.sb-top img { width:30px; height:30px; flex:none; }
.sb-top-txt { display:flex; flex-direction:column; gap:3px; min-width:0; }
.sb-merk { font:700 15px/1 'Archivo',sans-serif; color:#eceeef; }
.sb-tenant { font:500 12px/1.2 'Archivo',sans-serif; color:#a3a8ad; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.desk-collapse-btn { display:inline-grid; place-items:center; margin-left:auto; width:30px; height:30px; padding:0; border:1px solid #2a2e33; border-radius:3px; background:transparent; color:#a3a8ad; font-size:15px; cursor:pointer; flex:none; }
.desk-collapse-btn:hover { color:#fff; border-color:#4a4f55; }
.sidebar-section { color:#7d8389; text-transform:none; letter-spacing:0; font-size:12px; font-weight:500; padding:14px 22px 6px; margin-top:2px; }
.nav-item { display:flex; align-items:center; gap:10px; width:calc(100% - 20px); height:36px; padding:0 12px; margin:1px 10px; border:0; border-radius:3px; background:transparent; color:#a3a8ad; font:500 13.5px/1 'Archivo',sans-serif; text-align:left; cursor:pointer; transition:background .12s,color .12s; }
.nav-item:hover { transform:none; background:#1b1d20; color:#eceeef; }
.nav-item:focus-visible { outline:2px solid #e05246; outline-offset:-2px; }
.nav-item.active { background:#24282c; color:#fff !important; box-shadow:inset 2px 0 0 #e05246; }
.nav-item .ni-icon { font-size:17px; width:20px; flex:none; display:inline-flex; justify-content:center; opacity:.9; }
.nav-item .ni-icon svg { stroke-width:1.75; }
.nav-item .ni-badge { border-radius:3px; background:#2a2e33; color:#eceeef; font-weight:600; }
.sb-account { margin-top:auto; position:sticky; bottom:0; display:flex; flex-direction:column; gap:10px; padding:12px 14px 14px; border-top:1px solid #1d2023; background:var(--sidebar-bg); }
.sb-user { display:flex; align-items:center; gap:10px; min-width:0; }
.sb-avatar { width:32px; height:32px; flex:none; border-radius:50%; background:#2a2e33; color:#eceeef; display:grid; place-items:center; font:700 11px/1 'Archivo',sans-serif; }
.sb-user-txt { display:flex; flex-direction:column; gap:3px; min-width:0; }
#hdr-username { font:600 13px/1.2 'Archivo',sans-serif; color:#eceeef; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-role { font:500 12px/1.2 'Archivo',sans-serif; color:#a3a8ad; }
.sb-acties { display:flex; gap:8px; }
.sb-acties .theme-toggle { flex:1; width:auto; height:34px; justify-content:flex-start; gap:8px; padding:0 10px; border:1px solid #2a2e33; border-radius:3px; background:transparent; color:#a3a8ad; font:500 12.5px/1 'Archivo',sans-serif; }
.sb-acties .theme-toggle:hover, .sb-uit:hover { color:#fff; border-color:#4a4f55; }
.sb-acties .theme-toggle .th-icon { font-size:15px; display:inline-flex; }
.sb-uit { width:34px; height:34px; flex:none; display:grid; place-items:center; padding:0; border:1px solid #2a2e33; border-radius:3px; background:transparent; color:#a3a8ad; cursor:pointer; }

/* ingeklapt: smalle rail met alleen iconen (label als tooltip) */
@media (min-width:901px) {
  body.sidebar-collapsed .sidebar { width:76px; }
  body.sidebar-collapsed .sb-top { flex-direction:column; padding:14px 0 12px; gap:10px; }
  body.sidebar-collapsed .sb-top-txt { display:none; }
  body.sidebar-collapsed .desk-collapse-btn { margin:0; transform:scaleX(-1); }
  body.sidebar-collapsed .sidebar-section { font-size:0; height:1px; padding:0; margin:10px 18px; background:#1d2023; }
  body.sidebar-collapsed .nav-item { width:56px; margin:1px 10px; padding:0; justify-content:center; font-size:0; position:relative; }
  body.sidebar-collapsed .nav-item .ni-icon { font-size:19px; }
  body.sidebar-collapsed .nav-item > span:not(.ni-icon) { position:absolute; top:4px; right:6px; font-size:0 !important; width:7px; height:7px; padding:0 !important; border-radius:2px; }
  body.sidebar-collapsed .sb-account { padding:12px 0; align-items:center; }
  body.sidebar-collapsed .sb-user-txt { display:none; }
  body.sidebar-collapsed .sb-acties { flex-direction:column; }
  body.sidebar-collapsed .sb-acties .theme-toggle { width:34px; flex:none; padding:0; justify-content:center; font-size:0; }
}

/* mobiel: slanke bovenbalk met menuknop, zijbalk schuift in */
@media (max-width:900px) {
  .site-header { display:flex; height:56px; padding:0 14px; background:var(--header-bg); border-bottom:1px solid var(--border); box-shadow:none; position:sticky; top:0; z-index:500; }
  .site-header .sb-merk { color:var(--text); }
  .mob-menu-btn { display:inline-grid; place-items:center; width:40px; height:40px; border:1px solid var(--border); border-radius:3px; background:transparent; color:var(--text); font-size:18px; cursor:pointer; }
  .layout { min-height:calc(100vh - 56px); }
  .sidebar { display:flex; position:fixed; left:-250px; top:56px; height:calc(100vh - 56px); z-index:400; transition:left .25s; box-shadow:var(--shadow); }
  .sidebar.open { left:0; }
  .desk-collapse-btn { display:none; }
}
.mob-menu-btn, .desk-collapse-btn { border-radius:3px; }

/* ── KNOPPEN: 3px, geen schaduw, geen sprong ───────── */
.btn { height:36px; padding:0 14px; border-radius:3px; font-size:13px; font-weight:600; box-shadow:none !important; transform:none; letter-spacing:0; }
.btn-sm { height:32px; padding:0 12px; font-size:12.5px; }
.btn-primary { background:var(--brand); color:#fff; }
.btn-primary:hover { background:var(--brand-hover); }
.btn-secondary, .btn-outline { background:var(--surface); border:1px solid var(--border2); color:var(--text); }
.btn-secondary:hover, .btn-outline:hover { border-color:var(--text); color:var(--text); }
.btn-success { background:var(--on-bg); color:var(--on-fg); }
.btn-success:hover { background:var(--text2); }
.btn-danger { background:transparent; border:1px solid var(--border2); color:var(--brand-ink); }
.btn-danger:hover { border-color:var(--brand); color:var(--brand); }
.btn-icon { width:36px; height:36px; padding:0; }
button:hover, .btn:hover { transform:none; }

/* ── LABELS ─────────────────────────────────────────── */
.badge { border-radius:3px; height:22px; padding:0 8px; font-size:12px; font-weight:600; letter-spacing:0; }
.badge-admin { background:var(--on-bg); color:var(--on-fg); }
.badge-planner { background:var(--info-bg); color:var(--info-ink); }
.badge-mgmt, .badge-inspecteur { background:var(--bg4); color:var(--text); }
.badge-viewer, .badge-inactive, .badge-normaal { background:var(--bg4); color:var(--text2); }
.badge-open { background:var(--ok-bg); color:var(--ok-ink); }
.badge-active { background:var(--info-bg); color:var(--info-ink); }
.badge-spoed { background:var(--brand); color:#fff; }
.badge-hoog { background:transparent; border:1px solid var(--brand); color:var(--brand-ink); }
.badge-w, .badge-e, .badge-i, .badge-f { background:var(--surface); border:1px solid var(--border); color:var(--text); box-shadow:inset 3px 0 0 var(--w); }
.badge-e { box-shadow:inset 3px 0 0 var(--e); } .badge-i { box-shadow:inset 3px 0 0 var(--i); } .badge-f { box-shadow:inset 3px 0 0 var(--f); }
.tenant-badge { border-radius:3px; background:transparent; border:1px solid var(--border); color:var(--text2); }

/* ── FORMULIEREN ───────────────────────────────────── */
.form-label { font-size:12px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--text2); }
.form-label .req { color:var(--brand); }
.form-input, .form-select, .form-textarea, .ie { min-height:38px; border-radius:3px; border:1px solid var(--border2); background:var(--input-bg); color:var(--text); font-size:14px; padding:8px 11px; }
.form-input::placeholder, .form-textarea::placeholder, input::placeholder, textarea::placeholder { color:var(--muted2); opacity:1; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color:var(--text); outline:2px solid rgba(195,48,42,.25); outline-offset:0; }

/* ── KAARTEN EN TABELLEN ───────────────────────────── */
.card, .kpi-card, .month-card, .table-wrap, .tenant-card { border-radius:6px; box-shadow:none; }
.card:hover, .tenant-card:hover { transform:none; }
.kpi-value { font-weight:800; font-stretch:108%; }
.kpi-label { font-size:12px; letter-spacing:0; text-transform:none; font-weight:600; }
.data-table th { font-size:12px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--text2); background:var(--table-hdr); }
.data-table td { font-size:13.5px; }

/* ── PLANNING: één knoppenregel ────────────────────── */
.plan-controls { background:var(--surface); border-bottom:1px solid var(--border); padding:14px 20px; gap:10px; row-gap:10px; flex-wrap:wrap; align-items:center; }
.plan-controls > div[style*="flex-basis:100%"] { display:none; }
.period-display { order:-2; flex:1 0 100%; font:800 26px/1 'Archivo',sans-serif; font-stretch:112%; text-transform:uppercase; letter-spacing:-.01em; color:var(--text); margin-bottom:4px; }
.view-tab-group, .week-mode-group, .dept-tab-group { display:inline-flex; border:1px solid var(--border2); border-radius:3px; overflow:hidden; background:var(--surface); }
.view-tab, .wm-tab { height:34px; padding:0 13px; border:0; border-right:1px solid var(--border2); background:transparent; color:var(--text2); font-size:13px; font-weight:600; }
.view-tab:last-child, .wm-tab:last-child { border-right:0; }
.view-tab.active, .wm-tab.active { background:var(--on-bg) !important; color:var(--on-fg); }
.nav-arrow { width:34px; height:34px; border-radius:3px; border:1px solid var(--border2); background:var(--surface); color:var(--text); }
.search-field input { height:34px; border-radius:3px; border:1px solid var(--border2); background:var(--surface); font-size:13px; }

/* afdelingen als uitklapmenu (buildDeptTabs → .dept-dd) */
.dept-dd { position:relative; }
.dept-dd-btn { display:inline-flex; align-items:center; gap:8px; height:34px; min-width:210px; padding:0 10px; border:1px solid var(--border2); border-radius:3px; background:var(--surface); color:var(--text); font:600 13px/1 'Archivo',sans-serif; cursor:pointer; }
.dept-dd-btn .dd-lbl { color:var(--muted); font-weight:500; }
.dept-dd-btn .dd-bar, .dept-dd-menu .dd-bar { width:3px; height:16px; background:var(--muted2); flex:none; }
.dept-dd-btn .dd-chev { margin-left:auto; }
.dept-dd-menu { position:absolute; top:40px; left:0; z-index:60; min-width:240px; padding:6px; background:var(--surface); border:1px solid var(--border); border-radius:6px; box-shadow:var(--shadow); display:none; }
.dept-dd.open .dept-dd-menu { display:block; }
.dept-dd-menu .dept-tab { display:flex; align-items:center; gap:10px; width:100%; height:36px; padding:0 10px; border:0; border-radius:3px; background:transparent; color:var(--text); font:500 13.5px/1 'Archivo',sans-serif; text-align:left; cursor:pointer; }
.dept-dd-menu .dept-tab:hover { background:var(--bg4); }
.dept-dd-menu .dept-tab[class*="act-"] { background:var(--bg4) !important; font-weight:700; }
.dd-w { background:var(--w) !important; } .dd-e { background:var(--e) !important; } .dd-i { background:var(--i) !important; } .dd-f { background:var(--f); }

/* weekraster */
.week-grid { border-radius:3px; background:var(--surface); border-color:var(--border); }
.wg-hdr { background:var(--table-hdr); color:var(--text2); font-size:12px; font-weight:600; letter-spacing:0; text-transform:none; text-align:left; padding:10px; border-bottom:1px solid var(--border); }
.wg-hdr.today { color:var(--brand-ink); background:var(--today); box-shadow:inset 0 3px 0 var(--brand); border-bottom-color:var(--border); }
.wg-name { background:var(--surface); color:var(--text); font-size:13.5px; font-weight:600; text-align:left; align-items:flex-start; padding:10px 12px; border-bottom-color:var(--line); }
.wg-cell { border-color:var(--line); padding:6px; }
.wg-cell.editable:hover { background:var(--table-row-hover); }
.wg-cell.overload { border-left:0; box-shadow:inset 3px 0 0 var(--brand); }
.day-sub-tot { color:var(--muted); font-size:11.5px; font-weight:600; }
.day-sub-tot.ov { color:var(--brand-ink); }

/* opdrachtblokjes */
.chip { background:var(--chip-bg) !important; border:1px solid var(--border); border-left-width:3px; border-radius:3px; color:var(--text) !important; font-size:12.5px; font-weight:600; padding:5px 7px; gap:6px; margin-bottom:4px; }
.chip.clickable:hover { filter:none; transform:none; border-color:var(--border2); box-shadow:0 1px 0 rgba(0,0,0,.04); }
.chip-w { border-left-color:var(--w); } .chip-e { border-left-color:var(--e); } .chip-i { border-left-color:var(--i); } .chip-f { border-left-color:var(--f); }
.chip-proj { font-family:'Archivo',sans-serif; font-size:12.5px; font-weight:600; color:var(--text); }
.chip-pname, .chip-desc, .chip-time { color:var(--muted); font-style:normal; font-size:11.5px; }
.chip-hrs { background:transparent; color:var(--text2) !important; border-radius:0; padding:0; font-size:12px; font-weight:600; }
.chip-del { color:var(--muted2); border-radius:3px; }
.chip-del:hover { color:var(--brand); background:var(--brand-bg); }
.chip-ot { box-shadow:inset 0 -2px 0 var(--brand); }
.wb-st { display:inline-flex; align-items:center; justify-content:center; width:12px; height:12px; border-radius:2px; flex:none; box-sizing:border-box; }
.wb-st svg { width:8px; height:8px; stroke:#fff; fill:none; stroke-width:4; }
.wb-st.st-gepland { border:1.5px dashed var(--muted2); }
.wb-st.st-onderweg { background:var(--w); } .wb-st.st-bezig { background:var(--warn); }
.wb-st.st-deels { border:1.5px solid var(--warn); background:linear-gradient(90deg,var(--warn) 50%,transparent 50%); }
.wb-st.st-afgerond { background:var(--ok); } .wb-st.st-niet { background:var(--brand); }

/* jaarkalender */
.mc-d.today-dot { background:var(--brand); border-radius:3px; }
.mc-d:hover { background:var(--bg4); color:var(--text); }

/* ── VENSTERS ───────────────────────────────────────── */
.overlay { background:var(--overlay); backdrop-filter:none; }
.modal { border-radius:6px; border:1px solid var(--border); border-top:1px solid var(--border); box-shadow:var(--shadow); background:var(--card-bg); }
.mhdr { padding:18px 24px 14px; }
.mhdr-title { font:700 19px/1.2 'Archivo',sans-serif; letter-spacing:0; text-transform:none; color:var(--text); }
.mclose { width:32px; height:32px; border:1px solid var(--border); border-radius:3px; display:grid; place-items:center; color:var(--text); }
.mclose:hover { color:var(--brand); border-color:var(--brand); }
.mfooter { padding:14px 24px; }

/* zijpaneel (.overlay.zijpaneel en #offerte-modal.zijpaneel-los): rechts, de pagina blijft zichtbaar */
.overlay.zijpaneel { justify-content:flex-end; align-items:stretch; background:rgba(22,24,26,.08); }
.overlay.zijpaneel > .modal { width:520px !important; max-width:100vw !important; height:100vh; max-height:100vh; border-radius:0; border:0; border-left:1px solid var(--border); box-shadow:-8px 0 24px rgba(0,0,0,.10); transform:translateX(24px); transition:transform .2s ease; background:var(--bg); overflow-y:auto; }
.overlay.zijpaneel.open > .modal { transform:none; }
.overlay.zijpaneel .mhdr, .overlay.zijpaneel .mfooter { background:var(--bg); }
#offerte-modal.zijpaneel-los { position:fixed; inset:0; z-index:500; background:rgba(22,24,26,.08); justify-content:flex-end; align-items:stretch; }
#offerte-modal .zp-in { width:680px; max-width:100vw; height:100vh; overflow-y:auto; background:var(--bg); border-left:1px solid var(--border); box-shadow:-8px 0 24px rgba(0,0,0,.10); padding:0 28px 28px; box-sizing:border-box; }
#offerte-modal .zp-kop { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 -28px 20px; padding:18px 28px 14px; background:var(--bg); border-bottom:1px solid var(--border); }
#tab-opdracht-btn, #tab-verlof-btn { background:transparent !important; color:var(--text2) !important; border-bottom:2px solid transparent !important; font-weight:600 !important; }
#tab-opdracht-btn[style*="var(--brand)"], #tab-verlof-btn[style*="var(--brand)"] { color:var(--text) !important; border-bottom-color:var(--text) !important; }

/* ── MELDINGEN ──────────────────────────────────────── */
.plv-toast { border-radius:3px; box-shadow:var(--shadow); }
.info-box { border-radius:3px; }

/* ── MOBIEL ─────────────────────────────────────────── */
@media (max-width:900px) {
  .sidebar { background:var(--sidebar-bg); }
  .plan-controls { padding:12px; }
  .period-display { font-size:22px; }
  .dept-dd-btn { min-width:0; }
  .overlay.zijpaneel > .modal, #offerte-modal .zp-in { width:100vw; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none; animation:none; } }

/* index.html heeft eigen <style>-regels na deze stylesheet: hier met extra gewicht */
.period-display { text-align:left; }
.plan-controls .flex-space { flex:1 1 0; min-width:0; }
.nav-arrow { display:inline-grid; place-items:center; padding:0; }
/* zijpaneel open: zwevende Plenni-knop opzij */
body:has(.overlay.zijpaneel.open) #plenni-fab, body:has(#offerte-modal[style*="flex"]) #plenni-fab { display:none !important; }
#plenni-fab { border-radius:3px !important; }
/* "kies dagen" naast datum: geen rode knop */
button[onclick="kiesPlanDagen()"] { background:var(--surface) !important; color:var(--text) !important; border:1px solid var(--border2) !important; border-radius:3px !important; }
.plan-controls .search-field { max-width:220px; }
/* rij-acties: één knop + menu */
.row-menu { display:inline-block; position:relative; margin-left:6px; vertical-align:middle; }
.row-menu > summary { list-style:none; width:32px; padding:0; justify-content:center; cursor:pointer; }
.row-menu > summary::-webkit-details-marker { display:none; }
.row-menu-list { position:absolute; right:0; top:36px; z-index:40; min-width:190px; padding:6px; background:var(--surface); border:1px solid var(--border); border-radius:6px; box-shadow:var(--shadow); display:grid; text-align:left; }
.row-menu-list button { height:34px; padding:0 10px; border:0; border-radius:3px; background:transparent; color:var(--text); font:500 13.5px/1 'Archivo',sans-serif; text-align:left; cursor:pointer; }
.row-menu-list button:hover { background:var(--bg4); }
.wpk-bpill { border-radius:3px; }
.badge { white-space:nowrap; }
html .btn-outline, html .btn-secondary { background:var(--surface); color:var(--text); border-color:var(--border2); }

/* statuslabels (wpk-bpill): vlak label met tekst, 3px, geen gekleurde rand */
.wpk-bpill { display:inline-flex; align-items:center; height:22px; padding:0 8px !important; border-radius:3px; border:0 !important; font:600 12px/1 'Archivo',sans-serif !important; letter-spacing:0; text-transform:none !important; white-space:nowrap; background:color-mix(in srgb, currentColor 11%, transparent) !important; }
.wpk-bpill { box-shadow:none !important; gap:6px; }

/* projectkaarten */
.proj-kaart { all:unset; box-sizing:border-box; display:flex; flex-direction:column; gap:6px; padding:16px; background:var(--surface); border:1px solid var(--border); border-radius:6px; cursor:pointer; font-family:'Archivo',sans-serif; color:var(--text); }
.proj-kaart:hover { border-color:var(--text); }
.proj-kaart:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.pk-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pk-nr { font:500 12px/1 ui-monospace,Menlo,monospace; color:var(--text2); }
.pk-naam { font:700 15.5px/1.3 'Archivo',sans-serif; }
.pk-klant { font-size:13px; color:var(--muted); }
.pk-uren { display:flex; justify-content:space-between; font-size:12px; color:var(--text2); margin-top:6px; }
.pk-uren b { font-weight:600; } .pk-uren b.over { color:var(--brand-ink); }
.pk-bar { display:block; height:4px; background:var(--bg4); border-radius:2px; overflow:hidden; }
.pk-bar span { display:block; height:4px; background:var(--text); } .pk-bar span.over { background:var(--brand); }

/* dashboard: rustige kpi-kaarten, getallen in inkt */
.kpi-card { border:1px solid var(--border) !important; border-top:1px solid var(--border) !important; box-shadow:none !important; border-radius:6px !important; }
.kpi-card::before { display:none; }
.kpi-value { color:var(--text); font-size:clamp(22px,1.9vw,30px); white-space:nowrap; letter-spacing:-.01em; }

/* paginakoppen: Archivo breed, hoofdletters, zonder icoon */
.page-h, .page-title { font:800 28px/1 'Archivo',sans-serif !important; font-stretch:112% !important; text-transform:uppercase; letter-spacing:-.01em; color:var(--text); }
.page-h svg { display:none; }
.page-h + div { margin-top:8px !important; font-size:14px !important; color:var(--text2) !important; }
.page-title span { color:inherit; font:inherit; }

/* alle tabellen: koppen in gewone zinsletters, lijnen zichtbaar op papier */
.page table th { text-transform:none !important; letter-spacing:0 !important; font-size:12px !important; font-weight:600 !important; color:var(--text2) !important; background:var(--table-hdr); }
.page table tbody tr { border-bottom:1px solid var(--table-border) !important; }
.page table tbody tr:hover { background:var(--table-row-hover); }
.page table td { color:var(--text); }
/* filters en zoekvelden naast tabellen */
.page select, .page input[type="text"], .page input[type="search"], .page input:not([type]), .page input[type="date"] { border-radius:3px; min-height:36px; }
.card-hdr { background:var(--surface) !important; border-bottom:1px solid var(--line) !important; }
.card-title { font:700 15px/1.2 'Archivo',sans-serif; letter-spacing:0; text-transform:none; color:var(--text); }
.row-menu-list button.danger { color:var(--brand-ink); }

/* weekraster: capaciteit per medewerker, weekend, feestdag, overuren */
.wg-naam { font:600 13.5px/1.25 'Archivo',sans-serif; color:var(--text); }
.wg-cap { display:flex; align-items:center; gap:8px; width:100%; margin-top:7px; }
.wg-cap-bar { flex:1; height:4px; border-radius:2px; background:var(--bg4); overflow:hidden; }
.wg-cap-bar > span { display:block; height:4px; background:var(--text); }
.wg-cap-txt { font:600 11.5px/1 'Archivo',sans-serif; color:var(--text2); white-space:nowrap; }
.wg-cap.over .wg-cap-bar > span { background:var(--brand); }
.wg-cap.over .wg-cap-txt { color:var(--brand-ink); }
.wg-hdr.weekend { background:var(--bg3); color:var(--muted2); }
.wg-hdr.holiday { background:var(--ok-bg); }
.wg-feestdag { display:block; margin-top:3px; font:600 11px/1.2 'Archivo',sans-serif; color:var(--ok-ink); }
.ot-tag { display:inline-block; margin-left:4px; padding:1px 5px; border-radius:3px; background:var(--brand); color:#fff; font:600 10.5px/1.4 'Archivo',sans-serif; }
.wg-cell.overload { background:color-mix(in srgb, var(--brand) 4%, transparent); }

/* detailpaneel opdracht */
.td-body { padding:20px 24px; }

/* ── Klantplanning: tegels per klant (nov 2026) ── */
.kp-tegels { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.kp-tegel { display:flex; flex-direction:column; gap:8px; text-align:left; padding:16px 16px 14px; background:var(--surface); border:1px solid var(--line); border-radius:3px; cursor:pointer; color:var(--text); transition:border-color .15s, box-shadow .15s; }
.kp-tegel:hover { border-color:var(--brand); box-shadow:0 6px 20px rgba(0,0,0,.07); }
.kp-tegel:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.kp-tegel.stil { opacity:.7; }
.kp-tegel-kop { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.kp-tegel-naam { font:700 15px/1.25 'Archivo',sans-serif; }
.kp-tegel-uren { font:700 15px/1 'Archivo',sans-serif; color:var(--brand); white-space:nowrap; }
.kp-tegel-sub { font:500 12px/1.3 'Archivo',sans-serif; color:var(--text2); }
.kp-balk { display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr)); gap:4px; height:54px; margin-top:2px; }
.kp-dag { position:relative; display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; padding-bottom:14px; }
.kp-dag > span { display:block; min-height:2px; background:var(--brand); border-radius:2px 2px 0 0; opacity:.85; }
.kp-dag.wknd > span { opacity:.55; }
.kp-dag em { position:absolute; bottom:0; left:0; right:0; text-align:center; font:600 9.5px/1 'Archivo',sans-serif; font-style:normal; color:var(--text2); }
.kp-vandaag { font:500 12px/1.3 'Archivo',sans-serif; color:var(--text); border-top:1px solid var(--line); padding-top:8px; }
.kp-leeg { padding:40px 16px; text-align:center; color:var(--text2); font-size:13px; }
.kp-kop { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:16px; }
.kp-kop-naam { font:700 20px/1.2 'Archivo',sans-serif; color:var(--text); }
.kp-kop-sub { font:500 12.5px/1.3 'Archivo',sans-serif; color:var(--text2); margin-top:3px; }
/* Meerdere monteurs in het opdrachtformulier */
.f-extra { margin-top:8px; }
.f-extra-knop { border:0; background:none; padding:2px 0; color:var(--brand); font:600 12.5px 'Archivo',sans-serif; cursor:pointer; }
.f-extra-lijst { display:none; margin-top:6px; max-height:220px; overflow:auto; border:1px solid var(--line); border-radius:3px; padding:4px; background:var(--surface); }
.f-extra.open .f-extra-lijst { display:block; }
.f-extra-alle { display:block; width:100%; text-align:left; border:0; background:none; padding:6px 8px; color:var(--brand); font:600 12px 'Archivo',sans-serif; cursor:pointer; border-bottom:1px solid var(--line); margin-bottom:2px; }
.f-extra-rij { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:3px; cursor:pointer; font:500 13px 'Archivo',sans-serif; color:var(--text); }
.f-extra-rij:hover { background:var(--table-row-hover); }
.f-extra-rij.afw { opacity:.5; cursor:default; }
.f-extra-rij input { accent-color:var(--brand); }
.f-extra-naam { flex:1; }
.f-extra-info { font-size:11.5px; color:var(--text2); white-space:nowrap; }
.f-extra-info.vrij { color:#2e7d4f; font-weight:600; }
/* Veiligheidsdocumenten (klantplanning) */
.kp-vd { display:flex; align-items:center; gap:6px; font:600 12px/1.3 'Archivo',sans-serif; color:var(--text2); }
.kp-vd.let-op { color:#b45309; }
.kp-vd .ic, .kp-vd-knop .ic, .kp-vd-warn .ic { width:14px; height:14px; }
.kp-vd-knop { display:inline-flex; align-items:center; gap:6px; }
.kp-vd-warn { display:flex; align-items:center; gap:5px; margin-top:6px; padding:3px 6px; border:1px solid #f0c27a; background:#fff7e8; color:#8a4b06; border-radius:3px; font:600 11px/1.25 'Archivo',sans-serif; cursor:pointer; text-align:left; }
.vd-klant { font:700 16px 'Archivo',sans-serif; color:var(--text); margin-bottom:14px; }
.vd-doc { border:1px solid var(--line); border-radius:3px; padding:12px; margin-bottom:12px; background:var(--surface); }
.vd-doc-kop { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; }
.vd-doc-titel { font:700 14px/1.3 'Archivo',sans-serif; color:var(--text); }
.vd-doc-sub { font:500 12px/1.3 'Archivo',sans-serif; color:var(--text2); margin-top:2px; }
.vd-doc-knoppen { display:flex; flex-wrap:wrap; gap:6px; align-items:flex-start; }
.vd-doc-knoppen .vd-weg { color:#a52620; }
.vd-status { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.vd-st { padding:3px 7px; border-radius:3px; font:600 11.5px 'Archivo',sans-serif; border:1px solid var(--line); }
.vd-st.ok { color:#2e7d4f; background:#2e7d4f12; border-color:#2e7d4f40; }
.vd-st.open { color:#8a4b06; background:#fff7e8; border-color:#f0c27a; }
.vd-leeg { font-size:12.5px; color:var(--text2); }
.vd-bewerk { display:none; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.vd-doc.bewerk .vd-bewerk { display:block; }
.vd-keuze { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.vd-radio { display:flex; align-items:center; gap:8px; font:500 13px 'Archivo',sans-serif; color:var(--text); cursor:pointer; }
.vd-radio input, .vd-mensen input { accent-color:var(--brand); }
.vd-mensen { display:none; max-height:220px; overflow:auto; border:1px solid var(--line); border-radius:3px; padding:4px; }
.vd-keuze.kies .vd-mensen { display:block; }
.vd-nieuw { border-top:2px solid var(--line); padding-top:16px; margin-top:6px; }
.vd-nieuw-titel { font:700 14px 'Archivo',sans-serif; color:var(--text); margin-bottom:10px; }
/* Veiligheidsdocumenten (monteursapp) */
.vd-blok { border:1px solid var(--line); border-radius:6px; padding:14px; margin-bottom:16px; background:var(--surface); }
.vd-blok.let-op { border-color:#f0c27a; background:#fff7e8; }
.vd-blok-kop { display:flex; align-items:center; gap:8px; font:700 14.5px/1.3 'Archivo',sans-serif; color:var(--text); }
.vd-blok.let-op .vd-blok-kop { color:#8a4b06; }
.vd-blok-kop .ic { width:18px; height:18px; }
.vd-blok-uitleg { font:500 12.5px/1.4 'Archivo',sans-serif; color:var(--text2); margin:4px 0 6px; }
.vd-kaart { background:var(--surface); border:1px solid var(--line); border-radius:3px; padding:10px 12px; margin-top:8px; }
.vd-kaart.gelezen { opacity:.75; }
.vd-kaart-klant { font:600 11.5px/1.3 'Archivo',sans-serif; color:var(--text2); text-transform:uppercase; letter-spacing:.04em; }
.vd-kaart-titel { font:700 14px/1.3 'Archivo',sans-serif; color:var(--text); margin:3px 0 8px; }
.vd-kaart-knoppen { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.vd-kaart-knoppen .btn { min-height:40px; }
.vd-kaart-knoppen .btn:disabled { opacity:.45; cursor:not-allowed; }
.vd-kaart-ok { display:inline-flex; align-items:center; gap:4px; font:600 12.5px 'Archivo',sans-serif; color:#2e7d4f; }
.vd-blok-toggle { border:0; background:none; padding:10px 0 0; color:var(--brand); font:600 12.5px 'Archivo',sans-serif; cursor:pointer; }
.vd-badge { display:flex; align-items:center; gap:6px; margin:6px 0 4px; padding:6px 8px; width:100%; border:1px solid #f0c27a; background:#fff7e8; color:#8a4b06; border-radius:3px; font:700 12px/1.25 'Archivo',sans-serif; text-align:left; cursor:pointer; }
.vd-badge .ic { width:14px; height:14px; flex:none; }
/* Urenlijsten (uren.js): monteursapp en webapp. Week = lijst van dagen, dag = uren + afwezigheid + reis */
.ur { max-width:980px; }
.ur .ta-r { text-align:right; } .ur .ta-c { text-align:center; }
.ur-laden, .ur-leeg { padding:12px 2px; color:var(--muted); font:500 13px 'Archivo',sans-serif; }
.ur-fout { padding:12px; background:var(--err-bg); color:var(--err-ink); border-radius:3px; font:600 13px 'Archivo',sans-serif; }
.ur-terug { margin-bottom:12px; }
.ur-kop { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.ur-kop-acties { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ur-nav { display:flex; align-items:center; gap:8px; flex:1 1 280px; }
.ur-nav .btn { min-width:40px; justify-content:center; }
.ur-titel { flex:1; text-align:center; display:flex; flex-direction:column; gap:2px; }
.ur-titel b { font:800 17px/1.2 'Archivo',sans-serif; font-stretch:112%; color:var(--text); }
.ur-titel span { font:500 12.5px/1.3 'Archivo',sans-serif; color:var(--text2); }
.ur-statusrij { text-align:center; margin-bottom:10px; }
.ur-status { display:inline-flex; align-items:center; height:24px; padding:0 8px; border-radius:3px; font:700 12px/1 'Archivo',sans-serif; background:var(--bg4); color:var(--text2); white-space:nowrap; }
.ur-status.ingediend { background:var(--info-bg); color:var(--info-ink); }
.ur-status.ok { background:var(--ok-bg); color:var(--ok-ink); }
.ur-status.leeg { background:transparent; border:1px dashed var(--border2); color:var(--muted); }
.ur-melding { display:flex; align-items:center; gap:6px; padding:10px 12px; margin-bottom:12px; border-radius:3px; background:var(--info-bg); color:var(--info-ink); font:600 13px/1.4 'Archivo',sans-serif; }
.ur-melding.ok { background:var(--ok-bg); color:var(--ok-ink); }
.ur-melding.let-op { background:var(--warn-bg); color:var(--warn-ink); }
.ur-melding .ic { width:16px; height:16px; flex:none; }
.ur-samen { display:grid; grid-template-columns:repeat(auto-fit, minmax(78px, 1fr)); gap:6px; margin-bottom:12px; }
.ur-samen > div { background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:9px 11px; display:flex; flex-direction:column; gap:1px; }
.ur-samen span { font:600 11.5px 'Archivo',sans-serif; color:var(--text2); }
.ur-samen b { font:800 17px/1.2 'Archivo',sans-serif; color:var(--text); white-space:nowrap; }
.ur-samen small { font:500 12px 'Archivo',sans-serif; color:var(--muted); }
/* weekoverzicht: één rij per dag */
.ur-dagen-lijst { background:var(--surface); border:1px solid var(--line); border-radius:6px; overflow:hidden; margin-bottom:14px; }
.ur-dag { display:flex; align-items:center; gap:10px; width:100%; min-height:60px; padding:10px 12px; border:0; border-top:1px solid var(--line); background:none; text-align:left; color:var(--text); cursor:pointer; font-family:'Archivo',sans-serif; }
.ur-dag:first-child { border-top:0; }
.ur-dag:hover, .ur-dag:focus-visible { background:var(--bg3); }
.ur-dag.wk { background:var(--surface2); }
.ur-dag-naam { width:56px; flex:none; font:700 14px/1.2 'Archivo',sans-serif; }
.ur-dag-naam small { display:block; font:500 12px 'Archivo',sans-serif; color:var(--muted); }
.ur-dag-uren { width:44px; flex:none; text-align:right; font:800 17px 'Archivo',sans-serif; }
.ur-dag-tekst { flex:1; min-width:0; font:500 13px/1.3 'Archivo',sans-serif; color:var(--text2); }
.ur-dag-tekst > span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ur-dag-reis { font:500 12px 'Archivo',sans-serif; color:var(--muted); margin-top:2px; }
.ur-dag.leeg .ur-dag-uren, .ur-dag.leeg .ur-dag-tekst { color:var(--muted); }
.ur-dag-pijl { color:var(--muted); display:inline-flex; } .ur-dag-pijl .ic { width:16px; height:16px; }
/* dagscherm */
.ur-terug-link { display:inline-flex; align-items:center; gap:4px; border:0; background:none; padding:4px 0; margin-bottom:6px; font:600 14px 'Archivo',sans-serif; color:var(--text2); cursor:pointer; }
.ur-terug-link .ic { width:16px; height:16px; }
.ur-dagtitel { font:800 24px/1.1 'Archivo',sans-serif; font-stretch:112%; text-transform:uppercase; color:var(--text); }
.ur-dagsub { font:500 13px 'Archivo',sans-serif; color:var(--text2); margin:4px 0 14px; }
.ur-blok { background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:12px; margin-bottom:12px; }
.ur-blok-kop { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:6px; font:700 15px/1.2 'Archivo',sans-serif; color:var(--text); }
.ur-blok-kop > span { display:inline-flex; align-items:center; gap:6px; }
.ur-blok-kop .ic { width:17px; height:17px; }
.ur-uitleg { font:500 12.5px/1.45 'Archivo',sans-serif; color:var(--text2); margin-top:8px; }
.ur-item { border-top:1px solid var(--line); padding:9px 0; }
.ur-item:first-child { border-top:0; }
.ur-item-rij { display:flex; align-items:center; gap:8px; }
.ur-item-naam { flex:1; min-width:0; }
.ur-item-naam b { display:block; font:600 14px/1.3 'Archivo',sans-serif; color:var(--text); }
.ur-item-naam small { display:block; font:500 12px/1.3 'Archivo',sans-serif; color:var(--muted); }
.ur-item-naam select { width:100%; font-size:16px; }
.ur-uren { width:68px; height:44px; flex:none; text-align:center; border:1px solid var(--border2); border-radius:3px; background:var(--input-bg); color:var(--text); font:700 17px 'Archivo',sans-serif; }
.ur-uren:focus { border-color:var(--text); outline:2px solid rgba(195,48,42,.25); outline-offset:0; }
.ur-uren:disabled { background:transparent; border-color:var(--line); opacity:1; -webkit-text-fill-color:var(--text); }
.ur-weg { width:36px; height:44px; flex:none; display:inline-flex; align-items:center; justify-content:center; border:0; background:none; color:var(--muted); cursor:pointer; }
.ur-weg .ic { width:16px; height:16px; }
.ur-meer { border:0; background:none; padding:4px 0 0; font:600 12.5px 'Archivo',sans-serif; color:var(--brand); cursor:pointer; }
.ur-extra { display:flex; flex-direction:column; gap:6px; margin-top:8px; padding:8px; background:var(--bg3); border:1px solid var(--line); border-radius:3px; }
.ur-extra .form-input { width:100%; font-size:16px; }
.ur-item.afw .ur-item-naam select { font-weight:600; }
.ur-toevoegen { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.ur-toevoegen .btn { min-height:40px; }
.ur-zoek { margin-top:8px; }
.ur-zoek-veld { position:relative; }
.ur-zoek-veld .ic { position:absolute; left:11px; top:50%; width:16px; height:16px; transform:translateY(-50%); color:var(--muted); }
.ur-zoek-veld .form-input { width:100%; padding-left:34px; font-size:16px; }
.ur-zoek-lijst { max-height:280px; overflow:auto; border:1px solid var(--line); border-top:0; border-radius:0 0 3px 3px; }
.ur-zoek-item { display:block; width:100%; text-align:left; padding:11px 12px; border:0; border-bottom:1px solid var(--line); background:var(--surface); color:var(--text); font:500 14px/1.3 'Archivo',sans-serif; cursor:pointer; }
.ur-zoek-item:hover, .ur-zoek-item:focus { background:var(--bg3); }
.ur-zoek-geen { padding:10px 12px; }
.ur-reis { display:flex; gap:10px; }
.ur-reis label { flex:1; display:flex; flex-direction:column; gap:4px; font:600 12px 'Archivo',sans-serif; color:var(--text2); }
.ur-reis .ur-uren { width:100%; }
.ur-dagknoppen { display:flex; gap:8px; margin-bottom:20px; }
.ur-dagknoppen .btn { min-height:46px; flex:1; justify-content:center; }
.ur-dagknoppen .btn-primary { flex:1.4; }
.ur-dagknoppen .ic { width:16px; height:16px; }
.ur-knoppen { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.ur-knoppen .btn { min-height:46px; padding:0 20px; justify-content:center; }
/* administratie */
.ur-tabel-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:6px; margin-bottom:14px; background:var(--surface); }
.ur-tabel { width:100%; border-collapse:collapse; }
.ur-tabel th, .ur-tabel td { padding:10px 12px; border-bottom:1px solid var(--table-border); font-size:13.5px; vertical-align:middle; }
.ur-tabel tr:last-child td { border-bottom:0; }
.ur-week-tabel td { text-align:center; } .ur-week-tabel td:first-child { text-align:left; }
.ur-week-tabel td.p b { font-weight:700; } .ur-week-tabel td.p small { display:block; color:var(--muted); font-size:12px; }
.ur-week-tabel .wk { background:var(--surface2); }
.ur-week-tabel tr.afw td.p b { color:var(--warn-ink); }
.ur-week-tabel tr.som td { font-weight:800; border-top:2px solid var(--line); }
.ur-week-tabel tr.reisrij td { color:var(--text2); font-size:12.5px; }
.ur-acties { white-space:nowrap; }
.ur-acties .btn + .btn { margin-left:6px; }
.ur-onder { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ur-export { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
.ur-export label { display:flex; flex-direction:column; gap:4px; font:600 12px 'Archivo',sans-serif; color:var(--text2); }
.ur-export .form-input { min-width:140px; }
@media (max-width:700px) {
  .ur-onder { grid-template-columns:1fr; }
  .ur-knoppen .btn { flex:1; }
}
/* Monteursapp: Meer-menu boven de onderbalk (Team, Profiel) */
.abn-meer-menu { position:fixed; right:8px; bottom:calc(64px + env(safe-area-inset-bottom)); z-index:10000; min-width:200px; background:var(--surface); border:1px solid var(--border); border-radius:6px; box-shadow:var(--shadow); padding:4px; display:flex; flex-direction:column; }
.abn-meer-menu[hidden] { display:none; }
.abn-meer-item { display:flex; align-items:center; gap:12px; min-height:48px; padding:0 14px; border:0; border-radius:3px; background:none; color:var(--text); font:600 15px 'Archivo',sans-serif; text-align:left; cursor:pointer; }
.abn-meer-item:hover, .abn-meer-item:focus-visible { background:var(--bg3); }
.abn-meer-item.active { color:var(--brand); }
.abn-meer-item .abni { display:inline-flex; color:inherit; }
/* Offline wachtrij (wachtrij.js): melding op opdrachtkaart en in de werkbon */
.wacht-badge { display:flex; align-items:center; gap:6px; margin:6px 0 4px; padding:6px 8px; border:1px solid var(--border2); background:var(--bg4); color:var(--text2); border-radius:3px; font:700 12px/1.25 'Archivo',sans-serif; }
.wacht-badge .ic, .wacht-melding .ic { width:14px; height:14px; flex:none; }
.wacht-melding { display:flex; align-items:center; gap:8px; padding:10px 12px; margin-bottom:16px; border-radius:3px; background:var(--warn-bg); color:var(--warn-ink); font:600 13px/1.4 'Archivo',sans-serif; }
.wacht-foto-lbl { position:absolute; left:2px; bottom:2px; padding:1px 4px; border-radius:3px; background:rgba(0,0,0,.65); color:#fff; font:700 10px 'Archivo',sans-serif; }
/* Uitlegvideo's (uitleg.js): tegels, snelkoppelingen, speler met hoofdstukken */
.ul-snelrij { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.ul-snel { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--border2); border-radius:3px; background:var(--surface); color:var(--text); font:600 13px 'Archivo',sans-serif; cursor:pointer; }
.ul-snel:hover { border-color:var(--text); }
.ul-snel svg { width:14px; height:14px; fill:var(--brand); flex:none; }
.ul-snel small { font-weight:500; color:var(--muted); }
.ul-raster { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; }
.ul-tegel { display:flex; flex-direction:column; text-align:left; padding:0; border:1px solid var(--line); border-radius:6px; background:var(--surface); overflow:hidden; cursor:pointer; color:var(--text); font-family:'Archivo',sans-serif; transition:border-color .15s, box-shadow .15s; }
.ul-tegel:hover, .ul-tegel:focus-visible { border-color:var(--border2); box-shadow:var(--shadow); }
.ul-beeld { position:relative; display:block; aspect-ratio:16/9; background:#16181a; overflow:hidden; }
.ul-beeld img { width:100%; height:100%; object-fit:cover; display:block; }
.ul-beeld.staand img { object-fit:contain; background:#efece7; }
.ul-play { position:absolute; left:50%; top:50%; width:52px; height:52px; margin:-26px 0 0 -26px; border-radius:50%; background:rgba(195,48,42,.92); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.25); transition:transform .15s; }
.ul-play svg { width:22px; height:22px; fill:#fff; margin-left:3px; }
.ul-tegel:hover .ul-play { transform:scale(1.08); }
.ul-duur { position:absolute; right:8px; bottom:8px; padding:2px 6px; border-radius:3px; background:rgba(22,24,26,.85); color:#fff; font:700 12px 'Archivo',sans-serif; }
.ul-tekst { display:flex; flex-direction:column; gap:3px; padding:12px 14px 14px; }
.ul-tekst b { font:700 15px/1.25 'Archivo',sans-serif; }
.ul-tekst small { font:500 12.5px/1.4 'Archivo',sans-serif; color:var(--text2); }
.ul-fout { padding:12px; background:var(--err-bg); color:var(--err-ink); border-radius:3px; font:600 13px 'Archivo',sans-serif; }
.ul-overlay { position:fixed; inset:0; z-index:9000; background:rgba(14,15,17,.78); display:none; align-items:center; justify-content:center; padding:20px; }
.ul-overlay.open { display:flex; }
.ul-speler { width:min(1180px, 100%); max-height:100%; display:flex; flex-direction:column; background:var(--surface); border-radius:6px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.4); }
.ul-speler.staand { width:min(760px, 100%); }
.ul-speler-kop { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--line); font:700 16px 'Archivo',sans-serif; color:var(--text); }
.ul-sluit { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border2); border-radius:3px; background:none; cursor:pointer; color:var(--text); }
.ul-sluit svg { width:16px; height:16px; stroke:currentColor; stroke-width:2; fill:none; }
.ul-speler-in { display:grid; grid-template-columns:1fr 240px; min-height:0; }
.ul-speler.staand .ul-speler-in { grid-template-columns:minmax(0, 360px) 1fr; }
.ul-video { width:100%; display:block; background:#000; max-height:calc(100vh - 120px); }
.ul-video.staand { aspect-ratio:9/16; object-fit:contain; }
.ul-hfd { display:flex; flex-direction:column; overflow:auto; border-left:1px solid var(--line); }
.ul-hfd button { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 14px; border:0; border-bottom:1px solid var(--line); background:none; text-align:left; cursor:pointer; color:var(--text); font:600 13.5px 'Archivo',sans-serif; }
.ul-hfd button:hover { background:var(--bg3); }
.ul-hfd small { color:var(--muted); font-weight:500; }
.ul-app { display:flex; flex-direction:column; gap:12px; }
.ul-app-kop b { display:block; font:800 20px 'Archivo',sans-serif; font-stretch:112%; text-transform:uppercase; color:var(--text); }
.ul-app-kop small { font:500 13px 'Archivo',sans-serif; color:var(--text2); }
.ul-app .ul-video { max-height:70vh; border-radius:6px; }
.ul-app .ul-hfd { border:1px solid var(--line); border-radius:6px; background:var(--surface); }
@media (max-width:760px) {
  .ul-speler-in, .ul-speler.staand .ul-speler-in { grid-template-columns:1fr; }
  .ul-hfd { border-left:0; border-top:1px solid var(--line); max-height:30vh; }
}

/* Plenivo AI-paneel (nov 2026): zelfde taal als plenivo.nl. Donkere kop zoals de film (rood label, schuine serif),
   daaronder de lichte papierlaag; hoekige knoppen in kapitalen. Classes .pai-* worden gezet door openPlenni() in index.html. */
#plenni-paneel { position:fixed; bottom:18px; right:18px; width:min(410px,calc(100vw - 24px)); height:min(560px,calc(100vh - 40px)); z-index:9500;
  display:flex; flex-direction:column; overflow:hidden; background:var(--bg); border:1px solid var(--border); border-radius:6px; box-shadow:var(--shadow); }
.pai-kop { display:flex; align-items:flex-start; gap:12px; padding:16px 16px 15px 18px; background:#0e0f11; color:#eceeef; }
.pai-kop-tekst { flex:1; min-width:0; }
.pai-label { font:700 10.5px/1 'Archivo',sans-serif; letter-spacing:.2em; text-transform:uppercase; color:#e05246; }
.pai-regel { margin-top:7px; font:italic 21px/1.15 'Instrument Serif',serif; color:#eceeef; }
.pai-sluit { width:30px; height:30px; display:grid; place-items:center; background:none; border:1px solid rgba(236,238,239,.25); border-radius:3px; color:#eceeef; cursor:pointer; }
.pai-sluit:hover { border-color:#eceeef; }
.pai-sluit svg { width:14px; height:14px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; }
.pai-berichten { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:16px 16px 12px; }
.pai-bericht { max-width:88%; padding:10px 13px; border-radius:3px; font-size:13.5px; line-height:1.55; white-space:pre-wrap; }
.pai-bericht.ai { align-self:flex-start; background:var(--surface); border:1px solid var(--border); color:var(--text); }
.pai-bericht.ik { align-self:flex-end; background:var(--on-bg); color:var(--on-fg); }
.pai-snel { padding:12px 16px 12px; border-top:1px solid var(--border); }
.pai-snel-label { margin-bottom:8px; font:700 10px/1.3 'Archivo',sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.pai-knoppen { display:flex; flex-wrap:wrap; gap:6px; }
.pai-knop { padding:7px 10px; background:transparent; border:1px solid var(--border2); border-radius:3px; color:var(--text); font:600 12px/1.2 'Archivo',sans-serif; cursor:pointer; text-align:left; }
.pai-knop:hover { border-color:var(--brand); color:var(--brand-ink); }
.pai-keuzes { display:flex; flex-wrap:wrap; gap:6px; margin:2px 0; }
.pai-invoer { display:flex; gap:8px; padding:12px 16px 14px; border-top:1px solid var(--border); background:var(--surface2); }
.pai-invoer input { flex:1; min-width:0; min-height:44px; padding:10px 12px; background:var(--input-bg); border:1px solid var(--border2); border-radius:3px; color:var(--text); font:15px 'Archivo',sans-serif; outline:0; }
.pai-invoer input:focus { border-color:var(--text); }
.pai-vraag { min-height:44px; padding:0 18px; background:var(--brand); border:0; border-radius:3px; color:#fff; font:700 12px/1 'Archivo',sans-serif; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; }
.pai-vraag:hover { background:var(--brand-hover); }
.pai-actie { align-self:stretch; padding:12px 14px; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--brand); border-radius:3px; font-size:13px; }
.pai-actie-kop { margin-bottom:8px; font:700 10.5px/1 'Archivo',sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--brand-ink); }
.pai-actie dl { display:grid; grid-template-columns:auto 1fr; gap:3px 12px; margin:0; }
.pai-actie dt { color:var(--muted); }
.pai-actie dd { margin:0; color:var(--text); }
.pai-actie .pai-knoppen { margin-top:12px; }
.pai-actie .pai-vraag { min-height:36px; padding:0 14px; font-size:11px; }

/* Klantplanning per dag (planning.js renderKlantDag): tijdbalk per monteur, bezetting en overlap */
.kd-samenvatting { display:flex; flex-wrap:wrap; gap:6px 18px; margin:0 0 14px; font-size:13px; color:var(--text2); }
.kd-samenvatting b { color:var(--text); }
.kd-overlap { color:var(--brand-ink); font-weight:600; }
.kd-tijdlijn { background:var(--surface); border:1px solid var(--border); border-radius:6px; overflow:hidden; }
.kd-rij { display:flex; min-height:46px; border-bottom:1px solid var(--line); }
.kd-rij:last-child { border-bottom:0; }
.kd-naam { width:180px; flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; padding:8px 12px; font:600 13px/1.25 'Archivo',sans-serif; color:var(--text); border-right:1px solid var(--line); }
.kd-naam small { width:100%; padding-left:16px; font-weight:500; font-size:11px; color:var(--muted); }
.kd-dot { width:8px; height:8px; border-radius:50%; background:var(--brand); }
.kd-baan { position:relative; flex:1; min-width:0; }
.kd-uur { position:absolute; top:0; bottom:0; border-left:1px solid var(--line); }
.kd-uur em { display:none; }
.kd-kop { min-height:28px; background:var(--table-hdr); }
.kd-kop .kd-uur em { display:block; position:absolute; top:7px; transform:translateX(-50%); font:600 10.5px 'Archivo',sans-serif; font-style:normal; color:var(--muted); white-space:nowrap; }
.kd-kop .kd-uur:first-child em { transform:none; padding-left:3px; }
.kd-balk { position:absolute; top:6px; bottom:6px; display:flex; flex-direction:column; justify-content:center; gap:1px; min-width:6px; padding:0 8px; overflow:hidden; white-space:nowrap; text-align:left;
  background:var(--brand-bg); border:0; border-left:3px solid var(--brand); border-radius:3px; color:var(--text); font:12px/1.2 'Archivo',sans-serif; cursor:pointer; }
.kd-balk b { font-weight:700; font-variant-numeric:tabular-nums; }
.kd-balk span { color:var(--text2); overflow:hidden; text-overflow:ellipsis; }
.kd-balk:hover { filter:brightness(.97); }
.kd-balk.doorloop { border-top-right-radius:0; border-bottom-right-radius:0; }
.kd-balk.vervolg { border-left-style:dashed; }
.kd-balk.dept-w, .kd-dot.dept-w { --kd:var(--w); } .kd-balk.dept-e, .kd-dot.dept-e { --kd:var(--e); }
.kd-balk.dept-i, .kd-dot.dept-i { --kd:var(--i); } .kd-balk.dept-f, .kd-dot.dept-f { --kd:var(--f); }
.kd-balk[class*="dept-"] { border-left-color:var(--kd, var(--brand)); background:color-mix(in srgb, var(--kd, var(--brand)) 11%, var(--surface)); }
.kd-dot[class*="dept-"] { background:var(--kd, var(--brand)); }
.kd-bezetrij { min-height:30px; background:var(--surface2); }
.kd-bezetrij .kd-naam { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.kd-bezet { position:absolute; top:8px; bottom:8px; display:grid; place-items:center; font:700 10.5px 'Archivo',sans-serif; color:#fff; }
.kd-bezet.n1 { background:var(--border2); }
.kd-bezet.n2 { background:var(--brand); }
.kd-bezet.n3 { background:var(--brand2); }
.kd-zonder { margin-top:14px; }
.kd-zonder-kop { margin-bottom:6px; font:700 10.5px 'Archivo',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.kd-zonder-item { display:block; width:100%; margin-bottom:4px; padding:8px 12px; text-align:left; background:var(--surface); border:1px solid var(--border); border-radius:3px; color:var(--text2); font:13px 'Archivo',sans-serif; cursor:pointer; }
.kd-zonder-item b { color:var(--text); }
@media (max-width:700px) { .kd-naam { width:110px; } .kd-balk span { display:none; } }
.kd-kop .kd-uur:last-child em { transform:translateX(-100%); padding-right:3px; }
#page-klantplanning.kp-dagmodus .plan-controls .week-mode-group { display:none; }
/* Slepen in de dagweergave: verschuiven, en aan begin/eind trekken voor de duur */
.kd-balk.kd-sleep { cursor:grab; touch-action:pan-y; user-select:none; }
.kd-balk.kd-sleep::after { content:''; position:absolute; top:5px; bottom:5px; right:2px; width:3px; border-radius:2px; background:var(--kd, var(--brand)); opacity:0; transition:opacity .15s; }
.kd-balk.kd-sleep:hover::after, .kd-balk.sleept::after { opacity:.55; }
.kd-balk.sleept { z-index:5; cursor:grabbing; box-shadow:0 6px 18px rgba(0,0,0,.18); filter:none; }
.kd-rij.kd-doel .kd-baan { background:color-mix(in srgb, var(--brand) 7%, transparent); }
/* Datumkiezer naast Vandaag: knop opent de native kalender van het verborgen datumveld */
.kies-datum { display:inline-flex; align-items:center; gap:6px; }
.kies-datum .ic { width:14px; height:14px; }
.kies-datum-input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; border:0; padding:0; }
#plenni-fab[hidden], #nav-plenni[hidden] { display:none !important; } /* Plenivo AI alleen voor planners en beheer (index.html zet hidden uit) */
.ul-installeren { margin-top:28px; } .ul-installeren .ul-raster { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }