:root{
  color-scheme: light;
  /* Huisstijl Verbeek Export (identiek aan Transportplanner / Infoscreen) */
  --brand-dark:#0F6B5A; --brand-mid:#2E8B57; --brand-light:#8DC63F; --brand-soft:#A8D5BA;
  --bg:#f4f7f6; --panel:#ffffff; --border:#e3ece8; --text:#0f172a; --muted:#5f7d75;
  --shadow:0 14px 28px rgba(15,107,90,.10);
  --radius:16px;
  /* data-kleuren */
  --series-open:#2a78d6;      /* instroom / openstaand */
  --series-done:#2E8B57;      /* opgelost */
  --grid:#e8efec; --axis:#cfdcd6; --ink-muted:#7c918b;
  /* status */
  --st-nieuw-bg:#e0f2fe;      --st-nieuw-ink:#075985;
  --st-behandeling-bg:#fef3c7;--st-behandeling-ink:#92400e;
  --st-wacht-bg:#ede9fe;      --st-wacht-ink:#5b21b6;
  --st-opgelost-bg:#dcfce7;   --st-opgelost-ink:#166534;
  --st-gesloten-bg:#f1f5f9;   --st-gesloten-ink:#475569;
  --pr-kritiek:#b91c1c; --pr-hoog:#c2410c; --pr-normaal:#0f6b5a; --pr-laag:#64748b;
}
*{box-sizing:border-box}
body{
  margin:0; min-height:100vh; color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 520px at 10% -10%, rgba(141,198,63,.16), transparent 60%),
    radial-gradient(1000px 420px at 90% -5%, rgba(46,139,87,.12), transparent 60%),
    var(--bg);
}
button,input,select,textarea{font-family:inherit}
:focus-visible{outline:3px solid rgba(46,139,87,.45); outline-offset:2px}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:10px 20px; background:#fff; border-bottom:2px solid var(--brand-soft);
}
.brand{display:flex; align-items:center; gap:14px}
.brand-logo{height:44px; width:auto; display:block}
.brand .title{font-size:20px; font-weight:900; color:var(--brand-dark); letter-spacing:.2px; line-height:1.1}
.brand .subtitle{font-size:12px; color:var(--muted); margin-top:2px}
.topbar-right{display:flex; align-items:center; gap:10px}
.whoami{font-size:12px; color:var(--muted); padding:6px 12px; border:1px solid rgba(46,139,87,.18);
  border-radius:999px; background:rgba(168,213,186,.12); font-weight:700}
.mock-flag{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#92400e; background:#fef3c7; border:1px solid rgba(217,119,6,.35); padding:5px 10px; border-radius:999px}

/* ---------- Shell ---------- */
.shell{display:grid; grid-template-columns:224px minmax(0,1fr); gap:0; align-items:start}
.sidenav{
  position:sticky; top:66px; align-self:start; padding:18px 12px; display:flex; flex-direction:column; gap:4px;
  border-right:1px solid var(--border); min-height:calc(100vh - 66px);
}
.navbtn{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; height:40px; padding:0 12px;
  border:none; background:transparent; border-radius:12px; cursor:pointer;
  font-size:14px; font-weight:800; color:var(--brand-dark);
}
.navbtn:hover{background:rgba(168,213,186,.20)}
.navbtn[aria-current="page"]{background:linear-gradient(135deg,var(--brand-light),var(--brand-mid)); color:#fff}
.navbtn .ic{width:18px; display:grid; place-items:center; opacity:.9}
.navbtn .count{margin-left:auto; font-size:11px; font-weight:900; background:rgba(15,107,90,.10);
  color:var(--brand-dark); border-radius:999px; padding:2px 8px; font-variant-numeric:tabular-nums}
.navbtn[aria-current="page"] .count{background:rgba(255,255,255,.25); color:#fff}
.nav-sep{height:1px; background:var(--border); margin:12px 4px}
.nav-label{font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-muted); padding:0 12px; margin:6px 0 2px}

main{padding:22px 26px 60px; max-width:1360px; min-width:0}
.view[hidden]{display:none}
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap}
h1{font-size:24px; font-weight:900; color:var(--brand-dark); margin:0; letter-spacing:.2px}
.page-head p{margin:4px 0 0; font-size:13px; color:var(--muted)}
h2{font-size:15px; font-weight:900; color:var(--brand-dark); margin:0}
.sub{font-size:12px; color:var(--muted); margin:2px 0 0}

/* ---------- Knoppen ---------- */
.btn{height:38px; padding:0 16px; border-radius:12px; border:1px solid rgba(46,139,87,.30); background:#fff;
  cursor:pointer; font-weight:900; font-size:13px; color:var(--brand-dark);
  transition:background .12s ease, transform .06s ease, border-color .12s ease}
.btn:hover{background:rgba(168,213,186,.18); border-color:rgba(46,139,87,.45)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(135deg,var(--brand-light),var(--brand-mid)); border:none; color:#fff}
.btn.primary:hover{background:linear-gradient(135deg,var(--brand-mid),var(--brand-dark))}
.btn.small{height:32px; padding:0 12px; font-size:12px}
.btn.ghost{border-color:var(--border); color:var(--muted)}

/* ---------- Panels ---------- */
.panel{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow)}
.panel-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px 18px 0}
.panel-body{padding:14px 18px 18px}
/* Een kop zonder inhoud eronder (ingeklapt toegangslog) heeft ook onderaan ruimte nodig, en de knop staat in het midden. */
.transport-log-kop{align-items:center; padding-bottom:16px}
.transport-log-kop .sub{margin:4px 0 0}

/* ---------- KPI-tegels ---------- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:18px}
.kpi{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:2px; min-width:0}
.kpi .k-label{font-size:12px; font-weight:800; color:var(--muted)}
.kpi .k-value{font-size:32px; font-weight:900; color:var(--text); line-height:1.15; letter-spacing:-.5px}
.kpi.lead{border-color:rgba(46,139,87,.45); box-shadow:0 16px 34px rgba(15,107,90,.16)}
.kpi.lead .k-value{font-size:46px; color:var(--brand-dark)}
.kpi .k-foot{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:6px; font-size:12px; color:var(--muted); font-weight:700}
/* Reactietermijn: alleen rood als er echt iets over tijd is. */
.kpi.alarm{border-color:rgba(185,28,28,.35)}
.kpi.alarm .k-value{color:#b91c1c}
.termijn-tag{display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; font-size:10.5px; font-weight:900;
  color:#991b1b; background:#fee2e2; border:1px solid rgba(185,28,28,.25); white-space:nowrap; vertical-align:middle}
.termijnen{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:4px}
.termijnen label{font-size:11px}
.termijnen .met-eenheid{gap:6px}
.termijnen .met-eenheid input{width:100%; min-width:0}
.setform .field:has(.termijnen){max-width:560px}
@media (max-width:640px){ .termijnen{grid-template-columns:repeat(2,minmax(0,1fr))} }
.delta{font-weight:900; font-variant-numeric:tabular-nums; white-space:nowrap}
.delta.good{color:#166534}
.delta.bad{color:#b91c1c}
.spark{display:block}

/* ---------- Grid voor grafieken ---------- */
.grid-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(400px,1fr)); gap:16px; margin-bottom:16px}
.legend{display:flex; gap:14px; flex-wrap:wrap; align-items:center; font-size:12px; font-weight:800; color:var(--muted)}
.legend .key{display:inline-flex; align-items:center; gap:6px}
.legend .swatch{width:11px; height:11px; border-radius:3px; display:inline-block}
.chart-wrap{position:relative; margin-top:12px}
.chart-wrap svg{display:block; width:100%; height:auto}
.tip{position:absolute; pointer-events:none; z-index:10; background:#fff; border:1px solid var(--border);
  border-radius:12px; box-shadow:0 10px 24px rgba(15,23,42,.14); padding:8px 10px; font-size:12px;
  min-width:130px; transform:translate(-50%,-118%); opacity:0; transition:opacity .1s ease}
.tip[data-on="1"]{opacity:1}
.tip .t-head{font-weight:900; color:var(--brand-dark); margin-bottom:4px}
.tip .t-row{display:flex; align-items:center; gap:7px; justify-content:space-between; color:var(--muted); font-weight:700}
.tip .t-row b{color:var(--text); font-variant-numeric:tabular-nums}
.tip .dotk{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:5px}

/* ---------- Tabellen ---------- */
.table-scroll{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:13px}
table.tick{min-width:880px}
table.tick th:nth-child(1),table.tick td:nth-child(1){width:132px}
table.tick th:nth-child(2),table.tick td:nth-child(2){width:auto; min-width:290px}
table.tick th:nth-child(3),table.tick td:nth-child(3){width:186px}
table.tick th:nth-child(4),table.tick td:nth-child(4){width:104px}
table.tick th:nth-child(5),table.tick td:nth-child(5){width:154px}
table.tick th:nth-child(6),table.tick td:nth-child(6){width:104px}
/* ---------- Samenvoegen ---------- */
table.tick.met-kies th:nth-child(1),table.tick.met-kies td:nth-child(1){width:164px}
.kies{display:inline-flex; align-items:center; padding:6px 10px 6px 0; margin:-6px 0; cursor:pointer; vertical-align:middle}
.kies input{width:16px; height:16px; margin:0; accent-color:var(--brand-mid); cursor:pointer}
tr.gekozen td{background:rgba(168,213,186,.18)}
.samen-balk{position:sticky; top:74px; z-index:5; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:12px; padding:10px 14px; background:#fff; border:1px solid rgba(46,139,87,.35);
  border-radius:12px; box-shadow:var(--shadow); font-size:13px; color:var(--text)}
.samen-balk .spacer{flex:1}
.samen-tag{font-weight:800; color:var(--brand-dark)}
.samen-banner{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px;
  background:rgba(168,213,186,.20); border:1px solid rgba(46,139,87,.35); color:var(--brand-dark)}
.samen-banner .btn{margin-left:auto}
.samen-lijst{display:flex; flex-direction:column; gap:8px; max-height:52vh; overflow:auto; margin:4px 0 12px}
.samen-optie{display:flex; gap:12px; align-items:flex-start; padding:10px 12px; border:1px solid var(--border);
  border-radius:12px; cursor:pointer}
.samen-optie:has(input:checked){border-color:var(--brand-mid); background:rgba(168,213,186,.16)}
.samen-optie input{margin-top:3px; accent-color:var(--brand-mid)}
.so-body{display:flex; flex-direction:column; gap:3px; min-width:0}
.so-kop{display:flex; align-items:center; gap:8px}
.so-titel{font-weight:800; color:var(--text)}
thead th{
  text-align:left; font-size:11px; font-weight:900; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-muted); padding:10px 12px; border-bottom:1px solid var(--border); white-space:nowrap;
}
tbody td{padding:11px 12px; border-bottom:1px solid #f1f5f4; vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
/* Tabelvorm voor de cijferschermen (saldi, transportkosten, fustsaldo, toegangslog): lijntjes tussen de kolommen, een zwaardere lijn onder de kop,
   zodat de cijfers niet in elkaar overlopen. Niet voor de ticketlijst, het CMDB en het dashboard. */
table.saldi th,table.saldi td{border-left:1px solid rgba(15,107,90,.14)}
table.saldi th:first-child,table.saldi td:first-child{border-left:0}
table.saldi thead th{border-bottom:2px solid rgba(15,107,90,.35)}
table.saldi tbody td{border-bottom:0}
table.saldi tbody tr:last-child td{border-bottom:none}
tbody tr.clickable{cursor:pointer}
tbody tr.clickable:hover{background:rgba(168,213,186,.13)}
.tid{font-family:ui-monospace,Menlo,monospace; font-size:12px; font-weight:800; color:var(--brand-mid); white-space:nowrap}
.t-title{font-weight:800; color:var(--text)}
.t-sub{font-size:11.5px; color:var(--muted); margin-top:2px}
.num{text-align:right; font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}
#userRows td:nth-child(3),#userRows td:nth-child(4){white-space:nowrap}

/* ---------- Chips ---------- */
.chip{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:900; padding:4px 9px;
  border-radius:999px; white-space:nowrap; letter-spacing:.02em}
.chip .cd{width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}
.chip.nieuw{background:var(--st-nieuw-bg); color:var(--st-nieuw-ink)}
.chip.behandeling{background:var(--st-behandeling-bg); color:var(--st-behandeling-ink)}
.chip.wacht{background:var(--st-wacht-bg); color:var(--st-wacht-ink)}
.chip.opgelost{background:var(--st-opgelost-bg); color:var(--st-opgelost-ink)}
.chip.gesloten{background:var(--st-gesloten-bg); color:var(--st-gesloten-ink)}
.prio{font-size:12px; font-weight:900; white-space:nowrap; display:inline-flex; align-items:center; gap:6px}
.prio::before{content:""; width:3px; height:14px; border-radius:2px; background:currentColor}
.prio.kritiek{color:var(--pr-kritiek)} .prio.hoog{color:var(--pr-hoog)}
.prio.normaal{color:var(--pr-normaal)} .prio.laag{color:var(--pr-laag)}

/* ---------- Avatar ---------- */
.who{display:flex; align-items:center; gap:8px; min-width:0}
.av{width:26px; height:26px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-size:10.5px; font-weight:900; color:#fff; letter-spacing:.02em}
.av.lg{width:38px; height:38px; font-size:13px}
.who .nm{font-weight:800; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.unassigned{color:var(--pr-hoog); font-weight:900; font-size:12px}

/* ---------- Filterbalk ---------- */
.fust-groepknop{display:block; margin:-4px 0 14px auto}
.fust-samen{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:var(--brand-dark); cursor:pointer; white-space:nowrap}
.fust-samen input{width:16px; height:16px; accent-color:var(--brand-mid)}
tr.locatie td:nth-child(2) .sub{font-weight:600}
.filters{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px}
.filters select, .filters input[type="search"], .filters input[type="date"], .filters input.datum-nl-tekst{
  height:38px; padding:0 12px; border-radius:12px; border:1px solid rgba(46,139,87,.28); background:#fff;
  color:var(--brand-dark); font-weight:800; font-size:13px; outline:none}
.filters input[type="search"]{min-width:250px; flex:1}
.filters.compact input[type="search"]{min-width:0; flex:0 1 205px}
.filters.compact input.kort{flex:0 1 110px}
.panel-body > .filters:last-child{margin-bottom:0}
/* Het downloadvenster van het fustsaldo: dezelfde keuzelijsten als de filters */
#ovFustDl .field select{height:38px; padding:0 12px; border:1px solid rgba(46,139,87,.28); background-color:#fff; color:var(--brand-dark); font-weight:800; font-size:13px}
.filters select:focus, .filters input:focus{border-color:rgba(46,139,87,.6); box-shadow:0 0 0 4px rgba(46,139,87,.12)}
.seg{display:inline-flex; background:#fff; border:1px solid var(--border); border-radius:12px; padding:3px; gap:2px}
.seg button{height:32px; padding:0 14px; border:none; background:transparent; border-radius:9px; cursor:pointer;
  font-size:12.5px; font-weight:900; color:var(--muted)}
.seg button[aria-pressed="true"]{background:rgba(168,213,186,.30); color:var(--brand-dark)}
.result-count{font-size:12px; color:var(--muted); font-weight:700; margin-left:auto}

/* ---------- Groepskop (per medewerker) ---------- */
.grouphead{display:flex; align-items:center; gap:10px; padding:14px 18px 8px}
.grouphead .gtitle{font-weight:900; font-size:14px; color:var(--brand-dark)}
.grouphead .gmeta{font-size:12px; color:var(--muted); font-weight:700; margin-left:auto; display:flex; gap:8px}
.gpill{background:rgba(15,107,90,.08); border-radius:999px; padding:3px 10px; font-variant-numeric:tabular-nums}

/* ---------- Ticketdetail ---------- */
.detail{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start}
.crumb{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; color:var(--muted); margin-bottom:10px}
.crumb button{border:none; background:none; cursor:pointer; color:var(--brand-mid); font-weight:900; font-size:12px; padding:0}
.d-title{font-size:21px; font-weight:900; color:var(--text); margin:0 0 6px; line-height:1.25}
.d-meta{display:flex; gap:10px; flex-wrap:wrap; align-items:center; font-size:12px; color:var(--muted); font-weight:700}
.desc{font-size:14px; line-height:1.65; color:#20303a; white-space:pre-wrap; margin:14px 0 0}
.props{display:flex; flex-direction:column}
.prop{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid #f1f5f4}
.prop:last-child{border-bottom:none}
.prop .pk{font-size:11px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-muted)}
.prop .pv{font-size:13px; font-weight:800; text-align:right}
.timeline{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:14px}
.tl{display:grid; grid-template-columns:34px minmax(0,1fr); gap:10px}
.tl .rail{display:flex; flex-direction:column; align-items:center; gap:4px}
.tl .rail .line{flex:1; width:2px; background:var(--border); border-radius:2px}
.tl .body{min-width:0}
.tl .thead{font-size:12.5px; color:var(--muted); font-weight:700}
.tl .thead b{color:var(--text); font-weight:900}
.tl .msg{margin-top:5px; background:#f8faf9; border:1px solid var(--border); border-radius:12px;
  padding:10px 12px; font-size:13.5px; line-height:1.55; color:#20303a; white-space:pre-wrap}
.tl.system .msg{background:transparent; border:none; padding:4px 0 0; color:var(--muted); font-size:12.5px}
.reply{margin-top:16px; border-top:1px solid var(--border); padding-top:14px}
.reply textarea{width:100%; min-height:84px; resize:vertical; padding:10px 12px; border-radius:12px;
  border:1px solid rgba(46,139,87,.28); font-size:13.5px; color:var(--text); outline:none}
.reply textarea:focus{border-color:rgba(46,139,87,.6); box-shadow:0 0 0 4px rgba(46,139,87,.12)}
.reply-actions{display:flex; gap:8px; justify-content:flex-end; margin-top:10px}

/* ---------- Modal ---------- */
.overlay{position:fixed; inset:0; background:rgba(15,23,42,.45); display:grid; place-items:center; z-index:60; padding:16px}
.overlay[hidden]{display:none}
.modal{background:#fff; border:1px solid var(--border); border-radius:18px; padding:22px; width:min(600px,96vw);
  max-height:90vh; overflow:auto; box-shadow:var(--shadow)}
.modal h3{margin:0 0 4px; color:var(--brand-dark); font-weight:900; font-size:18px}
.modal .mh-sub{margin:0 0 16px; font-size:12.5px; color:var(--muted)}

/* Kop van een dialoogvenster: titel links, kenmerk rechts, met een scheiding. */
.modal-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--border)}
.modal-head h3{margin:0 0 3px}
.modal-head .mh-sub{margin:0}
.nummer{display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex:none}
.nummer .k{font-size:10px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted)}
.nummer .idbox{margin:0; font-size:13px; padding:6px 10px}

/* Bij elkaar horende velden onder een kopje. */
.veldgroep{margin-bottom:14px}
.veldgroep .groepkop{display:block; font-size:10px; font-weight:900; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-muted); margin-bottom:7px;
  padding-bottom:6px; border-bottom:1px solid #f1f5f4}
.veldgroep .field{margin-bottom:0}
.veldgroep .field-row{gap:12px}
.field{margin-bottom:12px}
.field label{display:block; font-size:11px; font-weight:900; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-muted); margin-bottom:5px}
.field input, .field select, .field textarea{width:100%; padding:9px 12px; border-radius:12px;
  border:1px solid rgba(46,139,87,.28); background:#fff; color:var(--text); font-weight:700; font-size:13.5px; outline:none}
.field input:not([type="checkbox"]), .field select{height:42px}
.field textarea{min-height:110px; resize:vertical; line-height:1.55}
.field input:focus, .field select:focus, .field textarea:focus{border-color:rgba(46,139,87,.6); box-shadow:0 0 0 4px rgba(46,139,87,.12)}
.field-row{display:flex; gap:12px} .field-row .field{flex:1 1 0; min-width:0}
.field-hint{font-size:11.5px; color:var(--muted); margin-top:5px; font-weight:600}
.modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:18px}
.idbox{font-family:ui-monospace,Menlo,monospace; font-weight:800; color:var(--brand-dark);
  background:rgba(168,213,186,.18); border-radius:10px; padding:9px 12px; font-size:13.5px; display:inline-block}

/* ---------- Toast ---------- */
.toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); z-index:80;
  background:var(--brand-dark); color:#fff; font-weight:800; font-size:13px; padding:11px 18px; border-radius:999px;
  box-shadow:0 12px 28px rgba(15,107,90,.35); opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease}
.toast[data-on="1"]{opacity:1; transform:translate(-50%,0)}

@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .sidenav{position:sticky; top:0; z-index:19; background:#fff; min-height:0; flex-direction:row;
    overflow-x:auto; border-right:none; border-bottom:1px solid var(--border); padding:8px 10px;
    scrollbar-width:none}
  .sidenav::-webkit-scrollbar{display:none}
  .nav-sep,.nav-label{display:none}
  .navbtn{width:auto; white-space:nowrap; height:36px; padding:0 12px; font-size:13px}
  .navbtn .ic{display:none}
  .detail{grid-template-columns:1fr}
  main{padding:18px 16px 50px}
}

/* ---------- telefoon ---------- */
@media (max-width:640px){
  /* Kop compact houden: alleen naam, versie en uitloggen. */
  .topbar{padding:10px 14px; gap:10px}
  .brand-logo{height:34px}
  .brand .title{font-size:17px; white-space:nowrap}
  .brand .subtitle{display:none}
  .whoami{display:none}
  .topbar-right{gap:8px; flex:none}
  .verchip{height:28px; padding:0 10px}

  h1{font-size:20px}
  .page-head{gap:10px}
  /* Twee tegels naast elkaar: anders is het dashboard één lange rol. */
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .kpi{padding:12px 14px}
  .kpi .k-label{font-size:11.5px}
  .kpi .k-value{font-size:26px}
  .kpi.lead .k-value{font-size:32px}
  .kpi .k-foot{font-size:11px; gap:6px}
  .page-head .btn{width:100%}
  .filters input[type="search"]{min-width:0; flex:1 1 100%}
  .filters select{flex:1 1 140px}
  .result-count{margin-left:0}

  /* Ticketrijen worden kaarten in plaats van een tabel met zijwaarts schuiven. */
  table.tick, table.groep{min-width:0}
  table.tick thead, table.groep thead{display:none}
  table.tick, table.tick tbody, table.tick tr, table.tick td,
  table.groep, table.groep tbody, table.groep tr, table.groep td{display:block; width:auto}
  table.tick tr, table.groep tr{
    display:grid; grid-template-columns:1fr auto auto; column-gap:10px; row-gap:7px;
    padding:13px 2px; border-bottom:1px solid #f1f5f4; align-items:center}
  table.tick td, table.groep td{padding:0; border:none}
  /* De vaste kolombreedtes van de brede tabel uitschakelen; die duwen de kaart anders te breed. */
  table.tick td:nth-child(n), table.groep td:nth-child(n){width:auto; min-width:0}
  table.tick th, table.groep th{width:auto}

  table.tick td:nth-child(1){grid-row:1; grid-column:1}
  table.tick td:nth-child(4){grid-row:1; grid-column:2}
  table.tick td:nth-child(6){grid-row:1; grid-column:3; text-align:right}
  table.tick td:nth-child(2){grid-row:2; grid-column:1 / -1}
  table.tick td:nth-child(3){grid-row:3; grid-column:1 / 3}
  table.tick td:nth-child(5){grid-row:3; grid-column:3; justify-self:end}

  table.groep td:nth-child(1){grid-row:1; grid-column:1}
  table.groep td:nth-child(3){grid-row:1; grid-column:2}
  table.groep td:nth-child(5){grid-row:1; grid-column:3; text-align:right}
  table.groep td:nth-child(2){grid-row:2; grid-column:1 / -1}
  table.groep td:nth-child(4){grid-row:3; grid-column:1 / -1; justify-self:start}

  .grouphead{flex-wrap:wrap; padding:14px 16px 6px}
  .grouphead .gmeta{margin-left:0; width:100%}
  .panel-body{padding:12px 16px 16px}
  .panel-head{padding:14px 16px 0}

  /* Projectkaarten en dialoogvensters */
  .proj-grid{grid-template-columns:1fr}
  .modal{padding:18px; border-radius:16px; width:100%}
  .field-row{flex-direction:column; gap:0}
  .veldgroep .field-row .field{margin-bottom:12px}
  .veldgroep .field-row .field:last-child{margin-bottom:0}
  .modal-head{flex-direction:column; gap:10px}
  .nummer{flex-direction:row; align-items:center; gap:8px}
  .modal-actions .btn{flex:1}
  .task-add{grid-template-columns:1fr}
  .reply-actions{flex-wrap:wrap}
  .reply-actions .btn, .reply-actions select{flex:1}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}

/* ---------- toevoegingen voor de echte applicatie ---------- */
.banner{margin:0 0 16px; padding:11px 14px; border-radius:12px; font-size:13px; font-weight:800}
.banner.error{background:#fee2e2; color:#991b1b; border:1px solid rgba(185,28,28,.25)}
.empty{padding:26px 4px; text-align:center; color:var(--muted); font-size:13.5px; font-weight:700}
.loading{padding:26px 4px; text-align:center; color:var(--muted); font-size:13px; font-weight:700}
.prop .pv select{
  height:32px; padding:0 8px; border-radius:10px; border:1px solid rgba(46,139,87,.28); background:#fff;
  color:var(--brand-dark); font-weight:800; font-size:12.5px; font-family:inherit; outline:none; max-width:170px}
.prop .pv select:focus{border-color:rgba(46,139,87,.6); box-shadow:0 0 0 3px rgba(46,139,87,.12)}
.tl.notitie .msg{background:#fffbeb; border-color:rgba(217,119,6,.30)}
.tag-note{font-size:10px; font-weight:900; letter-spacing:.05em; text-transform:uppercase;
  color:#92400e; background:#fef3c7; border-radius:999px; padding:2px 7px; margin-left:6px}
.reply-kind{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; color:var(--muted)}
button[disabled], .btn[disabled]{opacity:.55; cursor:not-allowed}

/* ---------- inlogpagina ---------- */
.login-wrap{min-height:100vh; display:grid; place-items:center; padding:24px}
.login-card{
  background:#fff; border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow);
  padding:30px 30px 26px; width:min(400px,100%)}
.login-card .logo{display:block; height:62px; width:auto; margin:0 auto 18px}
.login-card h1{font-size:21px; text-align:center; margin:0 0 4px}
.login-card .lead{font-size:13px; color:var(--muted); text-align:center; margin:0 0 22px; font-weight:700}
.login-card .btn{width:100%; height:44px; margin-top:6px}
.login-chk{display:flex; align-items:flex-start; gap:9px; margin:4px 0 14px; font-size:13px; font-weight:700;
  cursor:pointer}
.login-chk input{width:auto; margin:2px 0 0; accent-color:var(--brand-mid)}
.login-chk small{display:block; font-size:11.5px; color:var(--muted); font-weight:600; margin-top:2px}
.login-err{background:#fee2e2; color:#991b1b; border:1px solid rgba(185,28,28,.25); border-radius:12px;
  padding:9px 12px; font-size:12.5px; font-weight:800; margin-bottom:14px}

/* ---------- projecten ---------- */
.chip.actief{background:var(--st-opgelost-bg); color:var(--st-opgelost-ink)}
.chip.gepauzeerd{background:var(--st-behandeling-bg); color:var(--st-behandeling-ink)}
.chip.afgerond{background:var(--st-gesloten-bg); color:var(--st-gesloten-ink)}
.chip.open{background:var(--st-nieuw-bg); color:var(--st-nieuw-ink)}
.chip.bezig{background:var(--st-behandeling-bg); color:var(--st-behandeling-ink)}
.chip.klaar{background:var(--st-opgelost-bg); color:var(--st-opgelost-ink)}

.proj-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px}
.proj-card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:16px 18px; cursor:pointer; display:flex; flex-direction:column; gap:10px;
  transition:border-color .12s ease, transform .06s ease}
.proj-card:hover{border-color:rgba(46,139,87,.45)}
.proj-card:active{transform:translateY(1px)}
.proj-card .pc-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.proj-card h3{margin:0; font-size:16px; font-weight:900; color:var(--text); line-height:1.3}
.proj-card .pc-desc{font-size:12.5px; color:var(--muted); line-height:1.5; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.proj-card .pc-foot{display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:12px; color:var(--muted); font-weight:700; margin-top:2px}

.progress{display:flex; align-items:center; gap:10px}
.progress .track{flex:1; height:8px; background:#eef4f1; border-radius:999px; overflow:hidden}
.progress .bar{height:100%; background:var(--brand-mid); border-radius:999px; transition:width .2s ease}
.progress .pct{font-size:11.5px; font-weight:800; color:var(--muted); font-variant-numeric:tabular-nums;
  width:64px; text-align:right; white-space:nowrap}

.due{font-weight:800; white-space:nowrap}
.due.late{color:var(--pr-kritiek)}

/* takenlijst */
.tasks{display:flex; flex-direction:column}
.task{display:grid; grid-template-columns:minmax(0,1fr) 150px 132px 108px 34px; gap:12px; align-items:center;
  padding:11px 0; border-bottom:1px solid #f1f5f4}
.task:last-of-type{border-bottom:none}
.task .t-name{font-weight:800; font-size:13.5px; min-width:0}
.task .t-name .t-note{display:block; font-weight:600; font-size:12px; color:var(--muted); margin-top:2px}
.task.done .t-name{color:var(--muted); text-decoration:line-through}
.task .t-name .t-group{display:block; margin-top:4px}
.task .t-name .t-group input{
  height:22px; max-width:100%; padding:0 8px; border-radius:8px; border:1px dashed rgba(46,139,87,.35);
  background:transparent; color:var(--muted); font-weight:700; font-size:11px; font-family:inherit; outline:none}
.task .t-name .t-group input:not(:placeholder-shown){border-style:solid; color:var(--brand-dark); background:#fff}
.task .t-name .t-group input:focus{border-color:rgba(46,139,87,.6); box-shadow:0 0 0 3px rgba(46,139,87,.12)}

/* hoofdcategorie boven een groep taken */
.task-group{display:flex; align-items:baseline; gap:10px; padding:16px 0 6px; border-bottom:1px solid #f1f5f4}
.task-group:first-child{padding-top:0}
.task-group .tg-naam{font-weight:900; font-size:13px; color:var(--brand-dark)}
.task-group .tg-progress{font-weight:700; font-size:11px; color:var(--muted)}
.task-group .tg-rename{margin-left:auto; border:none; background:none; color:var(--muted); cursor:pointer;
  font-size:13px; padding:2px 4px; line-height:1}
.task-group .tg-rename:hover{color:var(--brand-dark)}
.task select, .task input[type="date"], .task input.datum-nl-tekst{
  height:34px; width:100%; padding:0 8px; border-radius:10px; border:1px solid rgba(46,139,87,.28);
  background:#fff; color:var(--brand-dark); font-weight:800; font-size:12.5px; font-family:inherit; outline:none}
.task select:focus, .task input:focus{border-color:rgba(46,139,87,.6); box-shadow:0 0 0 3px rgba(46,139,87,.12)}
.task .del{height:34px; width:34px; padding:0; border-radius:10px; border:1px solid var(--border);
  background:#fff; color:var(--muted); cursor:pointer; font-weight:900; font-size:15px; line-height:1}
.task .del:hover{border-color:rgba(239,68,68,.55); color:#b91c1c; background:#fff1f2}
.task-head{display:grid; grid-template-columns:minmax(0,1fr) 150px 132px 108px 34px; gap:12px;
  padding-bottom:8px; border-bottom:1px solid var(--border);
  font-size:11px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted)}
.task-add{display:grid; grid-template-columns:minmax(0,1fr) 150px 132px 142px; gap:12px; align-items:center;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--border)}
.task-add input[type="text"]{height:38px; padding:0 12px; border-radius:12px;
  border:1px solid rgba(46,139,87,.28); background:#fff; color:var(--text); font-weight:700; font-size:13.5px; outline:none}
.task-add select, .task-add input[type="date"], .task-add input.datum-nl-tekst{height:38px; padding:0 10px; border-radius:12px;
  border:1px solid rgba(46,139,87,.28); background:#fff; color:var(--brand-dark); font-weight:800;
  font-size:12.5px; font-family:inherit; outline:none}
.task-add input:focus, .task-add select:focus{border-color:rgba(46,139,87,.6); box-shadow:0 0 0 4px rgba(46,139,87,.12)}
.task-add .btn{height:38px}
.task-add .ta-titel{display:flex; flex-direction:column; gap:4px; min-width:0}
.task-add .ta-titel input.ta-groep{height:24px; padding:0 10px; font-size:11px; font-weight:600; color:var(--muted)}

/* meerdere taken tegelijk, ook een heel takenbestand met ## hoofdcategorieën (taken.md) */
.task-bulk{margin-top:10px}
.task-bulk form{display:flex; flex-direction:column; gap:8px; margin-top:10px}
.task-bulk .tb-uitleg{margin:0; font-size:11.5px; color:var(--muted); line-height:1.5}
.task-bulk .tb-uitleg code{background:#f1f5f4; border-radius:4px; padding:1px 4px; font-size:11px}
.task-bulk .tb-groep-rij{display:flex; gap:8px; align-items:center}
.task-bulk .tb-groep-rij input[type="text"]{flex:1; min-width:0}
.task-bulk .tb-bestand-btn{white-space:nowrap; cursor:pointer}
.task-bulk input[type="text"]{height:36px; padding:0 12px; border-radius:12px;
  border:1px solid rgba(46,139,87,.28); background:#fff; color:var(--text); font-weight:700; font-size:13px; outline:none}
.task-bulk textarea{padding:10px 12px; border-radius:12px; border:1px solid rgba(46,139,87,.28);
  background:#fff; color:var(--text); font-weight:600; font-size:13px; font-family:inherit; resize:vertical; outline:none}
.task-bulk input:focus, .task-bulk textarea:focus{border-color:rgba(46,139,87,.6); box-shadow:0 0 0 4px rgba(46,139,87,.12)}
.task-bulk button.btn{align-self:flex-start; height:36px}

@media (max-width:820px){
  .task, .task-head{grid-template-columns:minmax(0,1fr) 110px 34px}
  .task .t-when, .task-head .h-when, .task .t-who, .task-head .h-who{display:none}
  .task-add{grid-template-columns:minmax(0,1fr) 142px}
}

/* ---------- versie en wijzigingen ---------- */
.verchip{
  position:relative; display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px;
  border-radius:999px; border:1px solid var(--border); background:#fff; cursor:pointer;
  font-size:11.5px; font-weight:900; color:var(--muted); font-variant-numeric:tabular-nums}
.verchip:hover{border-color:rgba(46,139,87,.45); color:var(--brand-dark); background:rgba(168,213,186,.14)}
.dot-new{width:8px; height:8px; border-radius:50%; background:var(--brand-light);
  box-shadow:0 0 0 3px rgba(141,198,63,.25)}
.navbtn .count[hidden]{display:none}

.releases{display:flex; flex-direction:column; gap:16px; max-width:820px}
.release{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px 20px}
.release.latest{border-color:rgba(46,139,87,.45)}
.release-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:4px}
.release-head h2{font-size:17px; font-variant-numeric:tabular-nums}
.release-head .when{font-size:12px; color:var(--muted); font-weight:700}
.release-head .tag{font-size:10px; font-weight:900; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(168,213,186,.30); color:var(--brand-dark); border-radius:999px; padding:3px 9px}
.rel-group{margin-top:14px}
.rel-group h3{margin:0 0 6px; font-size:11px; font-weight:900; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-muted)}
.rel-group ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px}
.rel-group li{font-size:13.5px; line-height:1.6; color:#20303a}

/* ---------- mailoptie bij een reactie ---------- */
.reply-mail{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:800; color:var(--muted);
  margin-top:10px; cursor:pointer}
.reply-mail input{width:auto; margin:0; accent-color:var(--brand-mid)}
.reply-mail.off{opacity:.6; cursor:default}
.reply-extra{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:10px}
.reply-extra .reply-mail{margin-top:0}
.reply-extra-knoppen{display:flex; gap:6px; flex-wrap:wrap}
.kz-lijst .btn{flex:none; text-decoration:none}
.reply-actions{align-items:center}

/* ---------- @-noemen ---------- */
.noem{color:var(--brand-dark); background:rgba(141,198,63,.20); border-radius:6px; padding:0 3px; font-weight:800}
/* Kleurlaag achter een tekstvak: zelfde tekst, onzichtbaar, alleen de tags krijgen een achtergrond. */
.noem-veld{position:relative}
.noem-veld textarea{position:relative; display:block; background:transparent !important}
.noem-achter{position:absolute; inset:0; overflow:hidden; white-space:pre-wrap; overflow-wrap:break-word;
  color:transparent; pointer-events:none; border-style:solid; border-color:transparent}
.noem-achter mark{color:transparent; background:rgba(141,198,63,.42); border-radius:4px;
  box-shadow:0 0 0 2px rgba(141,198,63,.42)}
.noem-lijst{position:fixed; z-index:80; width:280px; max-width:calc(100vw - 16px); max-height:300px; overflow:auto;
  background:#fff; border:1px solid var(--border); border-radius:12px; padding:5px;
  box-shadow:0 14px 34px rgba(15,23,42,.18)}
.noem-optie{display:flex; align-items:center; gap:10px; width:100%; border:0; background:none; padding:7px 9px;
  border-radius:9px; text-align:left; cursor:pointer; font:inherit; color:var(--text)}
.noem-optie[aria-selected="true"]{background:#e8f4ed}
.noem-optie:hover{background:#f1f7f4}
.noem-optie b{display:block; font-size:13px; font-weight:800}
.noem-optie small{display:block; font-size:11.5px; color:var(--muted); font-weight:700}
.reply-actions .spacer{flex:1}
.reply-actions select{height:38px; padding:0 12px; border-radius:12px; border:1px solid rgba(46,139,87,.28);
  background:#fff; color:var(--brand-dark); font-weight:800; font-size:13px; outline:none; cursor:pointer}
.reply-actions select:focus{border-color:rgba(46,139,87,.6); box-shadow:0 0 0 4px rgba(46,139,87,.12)}
.modal .chk{margin:2px 0 0}
.modal .chk input{accent-color:var(--brand-mid)}

/* ---------- uitkomst van de mailtest ---------- */
#mailResult, #mbResult, #setResult, #samenResult{margin-top:14px; padding:12px 14px; border-radius:12px; font-size:13px; line-height:1.6}
#mailResult[hidden], #mbResult[hidden], #setResult[hidden]{display:none}
#mailResult.goed, #mbResult.goed, #setResult.goed{background:#dcfce7; color:#166534; border:1px solid rgba(22,101,52,.2)}
#mailResult.fout, #mbResult.fout, #setResult.fout, #samenResult.fout{background:#fee2e2; color:#991b1b; border:1px solid rgba(185,28,28,.25)}
#mailResult b, #mbResult b, #setResult b, #samenResult b{display:block; margin-bottom:4px; font-weight:900}
#mailResult .tech, #mbResult .tech{display:block; margin-top:8px; font-family:ui-monospace,Menlo,monospace;
  font-size:11.5px; opacity:.75; word-break:break-word}

/* ---------- instellingen ---------- */
.setform{margin-bottom:10px}
.setform .field{margin-bottom:0; max-width:460px}
.setform .field + .field{margin-top:16px}
.setform .btn{margin-top:14px}
.met-eenheid{display:flex; align-items:center; gap:9px}
.met-eenheid input{width:110px}
.met-eenheid .eenheid{font-size:13px; font-weight:800; color:var(--muted)}
.setform .field-hint{max-width:420px}
#setResult{margin-top:14px}
code{background:rgba(168,213,186,.22); padding:.1rem .35rem; border-radius:6px;
  font-family:ui-monospace,Menlo,monospace; font-size:.9em}

/* ---------- Bijlagen ---------- */
.clip{margin-left:6px; font-size:11px; font-weight:900; color:var(--muted); white-space:nowrap}
.bijlagen{margin-top:12px; display:flex; flex-direction:column; gap:8px}
.tl .bijlagen{margin-top:8px}
.bij-kop{font-size:11px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-muted)}
.bij-beelden{display:flex; flex-wrap:wrap; gap:10px}
.bij-foto{display:block; width:150px; text-decoration:none; color:var(--muted)}
.bij-foto img{
  display:block; width:150px; height:112px; object-fit:cover; background:#f8faf9;
  border:1px solid var(--border); border-radius:12px;
}
.bij-foto:hover img{border-color:var(--brand-soft); box-shadow:0 6px 16px rgba(15,107,90,.14)}
.bij-foto .bij-naam{
  display:block; margin-top:4px; font-size:11px; font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bij-file{
  display:flex; align-items:center; gap:9px; padding:8px 11px; text-decoration:none;
  background:#f8faf9; border:1px solid var(--border); border-radius:12px; color:var(--text);
}
.bij-file:hover{border-color:var(--brand-soft); background:#fff}
.bij-file .bij-ic{font-size:14px; line-height:1}
.bij-file .bij-naam{flex:1; min-width:0; font-size:13px; font-weight:800;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bij-file .bij-size{font-size:11.5px; font-weight:800; color:var(--muted); white-space:nowrap}
/* Bijlagen beheren in de zijkolom van een ticket (IT): naam, grootte, weghalen. */
.bij-beheer{list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:6px}
.bij-beheer li{display:flex; align-items:center; gap:8px; min-width:0}
.bij-beheer a{flex:1; min-width:0; font-size:12.5px; font-weight:800; color:var(--brand-dark);
  text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bij-beheer a:hover{text-decoration:underline}
.bij-beheer .bij-size{font-size:11px; font-weight:800; color:var(--muted); white-space:nowrap}
.bij-beheer .bij-knop{display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
  height:26px; width:26px; flex:none; padding:0; border-radius:8px; border:1px solid var(--border);
  background:#fff; color:var(--muted); cursor:pointer; font-weight:900; font-size:14px; line-height:1}
.bij-beheer .bij-knop:hover{border-color:var(--brand-soft); color:var(--brand-dark); background:#f4f9f6}
.bij-beheer .bij-knop.weg:hover{border-color:rgba(239,68,68,.55); color:#b91c1c; background:#fff1f2}
/* Standaardantwoorden: kiezen en beheren in één venster. */
.aw-zoek{width:100%; height:40px; padding:0 12px; border-radius:11px; border:1px solid rgba(46,139,87,.28);
  font:inherit; font-size:13px; outline:none; margin-bottom:10px}
.aw-zoek:focus{border-color:rgba(46,139,87,.6); box-shadow:0 0 0 3px rgba(46,139,87,.12)}
.aw-lijst{display:flex; flex-direction:column; gap:6px; max-height:300px; overflow:auto; margin-bottom:16px}
.aw-lijst .empty{padding:14px 0}
.aw-rij{display:flex; align-items:center; gap:8px}
.aw-kies{flex:1; min-width:0; text-align:left; display:flex; flex-direction:column; gap:2px; padding:9px 12px;
  border:1px solid var(--border); border-radius:12px; background:#f8faf9; cursor:pointer; font:inherit; color:var(--text)}
.aw-kies:hover, .aw-kies:focus-visible{border-color:var(--brand-soft); background:#fff; outline:none}
.aw-kies b{font-size:13px; font-weight:900; color:var(--brand-dark)}
.aw-kies span{font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.aw-rij .del{height:32px; width:32px; flex:none; padding:0; border-radius:10px; border:1px solid var(--border);
  background:#fff; color:var(--muted); cursor:pointer; font-weight:900; font-size:15px; line-height:1}
.aw-rij .del:hover{border-color:rgba(239,68,68,.55); color:#b91c1c; background:#fff1f2}
.aw-form{border-top:1px solid var(--border); padding-top:14px}
.aw-form-kop{font-size:11px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:10px}
.aw-form-acties{display:flex; justify-content:flex-end; gap:8px}
#ovAntwoord code{font-size:11.5px; background:rgba(168,213,186,.25); padding:1px 5px; border-radius:6px}

/* Tickets die bij een project horen, in het projectscherm. */
.proj-tickets{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.proj-tickets li{padding:9px 0; border-top:1px solid var(--border); cursor:pointer; min-width:0}
.proj-tickets li:first-child{border-top:none}
.proj-tickets li:hover .t-title{color:var(--brand-dark); text-decoration:underline}
.proj-tickets .pt-kop{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:3px}
.proj-tickets .t-title{font-size:13px; font-weight:800; line-height:1.35; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
@media (max-width:560px){
  .bij-foto, .bij-foto img{width:calc(50vw - 34px)}
  .bij-foto img{height:96px}
}

/* ---------- Bijlagen kiezen ---------- */
.kiezer{
  border:1px dashed rgba(46,139,87,.35); border-radius:12px; padding:10px 12px;
  background:#f8faf9; transition:border-color .12s ease, background .12s ease;
}
.kiezer[data-over="1"]{border-color:var(--brand-mid); background:rgba(168,213,186,.22)}
.kiezer-balk{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.kiezer-hint{font-size:11.5px; font-weight:700; color:var(--muted)}
.kiezer-lijst{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.kiezer-lijst:not(:empty){margin-top:10px}
.kiezer-lijst li{
  display:flex; align-items:center; gap:9px; padding:7px 8px 7px 11px;
  background:#fff; border:1px solid var(--border); border-radius:10px;
}
.kiezer-lijst .k-ic{font-size:13px; line-height:1}
.kiezer-lijst .k-beeld{width:34px; height:26px; object-fit:cover; border-radius:5px; border:1px solid var(--border); flex:none}
.kiezer-lijst .k-naam{flex:1; min-width:0; font-size:12.5px; font-weight:800; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kiezer-lijst .k-size{font-size:11.5px; font-weight:800; color:var(--muted); white-space:nowrap}
.kiezer-lijst .k-weg{
  border:none; background:none; cursor:pointer; padding:0 2px; line-height:1;
  font-size:17px; font-weight:900; color:var(--muted);
}
.kiezer-lijst .k-weg:hover{color:#991b1b}
.reply .kiezer{margin-top:10px}

/* ---------- Foto's in de tekst ---------- */
.in-tekst{display:inline-block; vertical-align:top; margin:6px 0; max-width:100%}
.in-tekst img{
  display:block; max-width:min(460px,100%); max-height:340px; height:auto;   /* geen width:auto: dat wint van het width-attribuut */
  border:1px solid var(--border); border-radius:12px; background:#f8faf9; cursor:zoom-in;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.in-tekst:hover img{border-color:var(--brand-soft); box-shadow:0 6px 16px rgba(15,107,90,.14)}
/* Met de maat uit de mail: die breedte aanhouden (het width-attribuut), alleen nooit breder dan het vak. */
.in-tekst.met-maat img{max-width:100%; max-height:none; border-radius:4px; border-color:transparent; background:none}
.bij-foto img{cursor:zoom-in}

/* ---------- Lichtbak ---------- */
.lichtbak{
  grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px;
  background:rgba(12,25,22,.88); padding:24px 16px;
}
.lichtbak .lb-kader{margin:0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:10px}
.lichtbak #lbBeeld{
  max-width:100%; max-height:80vh; width:auto; height:auto; display:block;
  border-radius:12px; background:#0c1916; box-shadow:0 18px 44px rgba(0,0,0,.45);
}
.lichtbak figcaption{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center;
  color:#fff; font-size:12.5px; font-weight:800;
}
.lichtbak .lb-teller{color:rgba(255,255,255,.6)}
.lichtbak figcaption a{color:var(--brand-light); text-decoration:none; font-weight:900}
.lichtbak figcaption a:hover{text-decoration:underline}
.lb-nav, .lb-sluit{
  border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.10); color:#fff;
  border-radius:999px; cursor:pointer; line-height:1; font-weight:900;
  align-items:center; justify-content:center;
}
.lb-nav{display:flex; width:46px; height:46px; font-size:26px; padding-bottom:3px}
.lb-nav[hidden]{display:none}
.lb-nav:hover, .lb-sluit:hover{background:rgba(255,255,255,.22)}
.lb-sluit{position:absolute; top:16px; right:18px; display:flex; width:38px; height:38px; font-size:22px; padding-bottom:2px}
@media (max-width:640px){
  .lichtbak{padding:16px 6px; gap:4px}
  .lb-nav{width:38px; height:38px; font-size:22px}
  .lichtbak #lbBeeld{max-height:72vh}
  .in-tekst img{max-height:260px}
}

/* ---------- Wat er gebeurt ---------- */
.activiteit{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.act{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:11px;
  padding:11px 8px; border-radius:12px; cursor:pointer; border-bottom:1px solid #f1f5f4;
  transition:background .12s ease;
}
.act:last-child{border-bottom:none}
.act:hover, .act:focus-visible{background:#f8faf9; outline:none}
.act:focus-visible{box-shadow:0 0 0 3px rgba(46,139,87,.18)}
.act-body{min-width:0}
.act-zin{font-size:13px; color:var(--muted); font-weight:700; line-height:1.5}
.act-zin b{color:var(--text); font-weight:900}
.act-ticket{
  margin-top:2px; font-size:12px; font-weight:800; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.act-ticket .tid{margin-right:6px}
.act-citaat{
  margin-top:5px; padding-left:10px; border-left:2px solid var(--brand-soft);
  font-size:12.5px; color:#20303a; line-height:1.5;
}
.act-tijd{font-size:11.5px; font-weight:800; color:var(--muted); white-space:nowrap; padding-top:2px}
.act-leeg{padding:22px 4px; text-align:center; color:var(--muted); font-size:13px; font-weight:700; list-style:none}
#actMeer[hidden]{display:none}
@media (max-width:640px){
  .act{grid-template-columns:auto minmax(0,1fr); row-gap:4px}
  .act-tijd{grid-column:2; padding-top:0}
}

/* ---------- Melding in een dialoogvenster ---------- */
.banner.let-op{
  background:#fef9c3; color:#713f12; border:1px solid rgba(161,98,7,.25);
  font-weight:700; line-height:1.55; margin-bottom:16px;
}
/* Boven de saldi: van wanneer de stand is en wanneer de volgende komt. Rustig, in de huisstijl:
   het is uitleg, geen waarschuwing (die is geel, .let-op). */
.banner.saldi-planning{
  display:flex; flex-direction:column; gap:2px;
  background:#eef7f1; color:var(--brand-dark); border:1px solid var(--brand-soft);
  font-weight:600; line-height:1.55;
}
.banner.saldi-planning strong{font-weight:800}
#pwAnnuleer[hidden]{display:none}

/* ---------- Mijn account en tweestapsverificatie ---------- */
.acc-regel{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px}
/* Een eigen display-regel wint het van het hidden-attribuut; dit zet dat recht
   voor alles wat we met `hidden` aan- en uitzetten. */
[hidden]{display:none !important}
.acc-regel input{width:auto; flex:0 1 190px}
.acc-uitleg{font-size:12.5px; color:var(--muted); font-weight:600; line-height:1.6; margin:0; flex:1 1 220px}
.acc-stand{font-size:11.5px; font-weight:900; padding:5px 11px; border-radius:999px; white-space:nowrap}
.acc-stand.uit{background:var(--st-gesloten-bg); color:var(--st-gesloten-ink)}
.acc-stand.aan{background:var(--st-opgelost-bg); color:var(--st-opgelost-ink)}
.tfa-qr{margin:12px 0; padding:12px; background:#fff; border:1px solid var(--border); border-radius:14px;
  width:max-content; max-width:100%}
.tfa-qr svg{display:block; width:190px; height:190px}
.tfa-codes{list-style:none; margin:12px 0 0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px}
.tfa-codes li{background:#f8faf9; border:1px solid var(--border); border-radius:10px; padding:9px 12px;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13.5px; font-weight:800; text-align:center;
  letter-spacing:.04em}
.tfa-merk{margin-left:7px; font-size:9.5px; font-weight:900; letter-spacing:.06em; padding:2px 6px;
  border-radius:6px; background:rgba(46,139,87,.12); color:var(--brand-dark)}
#tfaSleutel{font-size:12.5px; letter-spacing:.08em}

/* ---------- Kennisbank ---------- */
.kb-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px}
.kb-card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px 18px; display:flex; flex-direction:column; gap:10px;
  cursor:pointer; transition:border-color .15s, transform .06s;
}
.kb-card:hover{border-color:rgba(46,139,87,.45)}
.kb-card:active{transform:translateY(1px)}
.kb-card .kc-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.kb-card h3{margin:0; font-size:16px; font-weight:900; color:var(--text); line-height:1.3}
.kb-card .kc-tekst{font-size:12.5px; color:var(--muted); line-height:1.55; margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.kb-card .kc-foot{display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:11.5px; color:var(--muted); font-weight:700; margin-top:auto; padding-top:4px}
.kb-cat{display:inline-flex; align-items:center; font-size:11px; font-weight:900; white-space:nowrap;
  padding:4px 9px; border-radius:999px; background:rgba(168,213,186,.24); color:var(--brand-dark)}

/* De tekst van een artikel: ook de opmaak die de editor maakt. */
.kb-body{font-size:14.5px; line-height:1.7; color:#20303a; margin:16px 0 0}
.kb-body > *:first-child{margin-top:0}
.kb-body p{margin:0 0 12px}
.kb-body h2{font-size:18px; font-weight:900; color:var(--brand-dark); margin:26px 0 10px; line-height:1.3}
.kb-body h3{font-size:15px; font-weight:900; color:var(--text); margin:20px 0 8px}
.kb-body ul, .kb-body ol{margin:0 0 12px; padding-left:22px}
.kb-body li{margin:0 0 6px}
.kb-body a{color:var(--brand-dark); font-weight:700}
.kb-body blockquote{margin:14px 0; padding:10px 14px; border-left:4px solid var(--brand-soft);
  background:rgba(168,213,186,.14); border-radius:0 10px 10px 0; color:#20303a}
.kb-body pre{margin:14px 0; padding:12px 14px; background:#0f172a; color:#e2e8f0; border-radius:12px;
  overflow-x:auto; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; line-height:1.6}
.kb-body code{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px;
  background:rgba(15,107,90,.08); padding:1px 5px; border-radius:6px}
.kb-body pre code{background:none; padding:0; color:inherit}
.kb-body hr{border:none; border-top:1px solid var(--border); margin:20px 0}
.kb-body img{display:block; max-width:100%; height:auto; margin:14px 0; border-radius:12px;
  border:1px solid var(--border); cursor:zoom-in}

/* De editor */
.kb-kop{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px}
.kb-titel{flex:1 1 320px; height:46px; padding:0 14px; font-size:19px; font-weight:900; color:var(--text);
  border:1px solid var(--border); border-radius:12px; background:#fff}
.kb-kop select{height:46px; padding:0 12px; border:1px solid var(--border); border-radius:12px;
  background:#fff; font-size:13px; font-weight:700; color:var(--text)}
/* De werkbalk blijft in beeld: in een lange handleiding werk je halverwege aan
   een alinea of een afbeelding, en dan moeten de knoppen bereikbaar blijven.
   66px is de hoogte van de balk bovenaan de pagina. */
.kb-balken{position:sticky; top:66px; z-index:6}
.kb-bar{display:flex; flex-wrap:wrap; align-items:center; gap:4px; padding:8px;
  border:1px solid var(--border); border-bottom:none; border-radius:12px 12px 0 0; background:#f8faf9}
.kbb{height:32px; min-width:32px; padding:0 10px; border:1px solid transparent; border-radius:9px;
  background:transparent; cursor:pointer; font-size:12.5px; font-weight:800; color:var(--brand-dark)}
.kbb:hover{background:#fff; border-color:var(--border)}
.kbb:active{transform:translateY(1px)}
.kb-sep{width:1px; height:20px; background:var(--border); margin:0 4px}
.kb-editor{
  min-height:340px; max-height:none; margin:0; padding:16px 18px; background:#fff;
  border:1px solid var(--border); border-radius:0 0 12px 12px; overflow-wrap:break-word;
}
.kb-editor:focus{outline:none; border-color:rgba(46,139,87,.45); box-shadow:0 0 0 3px rgba(46,139,87,.12)}
.kb-editor[data-over="1"]{border-color:var(--brand-mid); background:rgba(168,213,186,.12)}
.kb-editor img{cursor:default}
.kb-hint{font-size:12px; color:var(--muted); font-weight:600; margin:8px 2px 0}

/* Afbeelding schalen: balk met vaste maten en een greep in de hoek. */
.kb-beeldbalk{display:flex; flex-wrap:wrap; align-items:center; gap:4px; padding:8px;
  border:1px solid var(--border); border-top:none; border-bottom:none; background:#eaf3ed}
.kb-bb-kop{font-size:11px; font-weight:900; letter-spacing:.06em; text-transform:uppercase;
  color:var(--brand-dark); padding:0 6px}
.kb-bb-maat{font-size:11.5px; font-weight:800; color:var(--muted); margin-left:auto; padding-right:6px;
  font-variant-numeric:tabular-nums}
.kb-veld{position:relative}
.kb-editor img.kb-gekozen{outline:3px solid var(--brand-mid); outline-offset:2px}
.kb-greep{position:absolute; width:18px; height:18px; padding:0; border-radius:5px; z-index:2;
  border:2px solid #fff; background:var(--brand-mid); cursor:nwse-resize; box-shadow:0 2px 6px rgba(15,107,90,.35)}
.kb-greep:hover{background:var(--brand-dark)}
.kb-acties{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:20px;
  padding-top:16px; border-top:1px solid var(--border)}
.kb-status{font-size:12px; color:var(--muted); font-weight:700; margin-left:auto}

@media (max-width:640px){
  .kb-grid{grid-template-columns:1fr}
  .kb-status{margin-left:0}
}

/* ---------- Afdrukken (en "Opslaan als PDF") ----------
   Alleen voor een kennisbankartikel: een handleiding wil je kunnen uitdraaien of
   als pdf naar iemand sturen. De kopregel met logo staat alleen op papier. */
.print-kop{display:none}

@media print{
  @page{margin:16mm 14mm}
  html,body{background:#fff !important}
  body{font-size:11pt}
  .topbar, .sidenav, .crumb, .kb-acties, .toast, .overlay, .page-head button{display:none !important}
  .shell{display:block}
  main{padding:0; max-width:none}
  .panel{border:none !important; box-shadow:none !important; background:#fff !important}
  .panel-body{padding:0}
  .detail{display:block}

  .print-kop{display:flex; align-items:center; gap:12px; padding-bottom:10px; margin-bottom:16px;
    border-bottom:2px solid var(--brand-soft)}
  .print-kop img{height:34px; width:auto}
  .print-kop .pk-titel{font-size:12pt; font-weight:900; color:var(--brand-dark)}
  .print-kop .pk-sub{font-size:9pt; color:#555; margin-top:2px}
  .d-meta{display:none}

  .kb-body{font-size:11pt; line-height:1.55; color:#000}
  .d-title{font-size:18pt; margin:0 0 12px}
  /* Een kop hoort niet onderaan een bladzijde te blijven staan zonder zijn tekst,
     en een schermafdruk mag niet doormidden worden gesneden. */
  .kb-body h2, .kb-body h3, .d-title{break-after:avoid; page-break-after:avoid}
  .kb-body img, .kb-body pre, .kb-body blockquote, .kb-body li{break-inside:avoid; page-break-inside:avoid}
  .kb-body p, .kb-body li{orphans:2; widows:2}
  /* Achtergronden drukt een browser standaard niet af; donkere blokken worden
     daarom licht met een rand, zodat ze op papier leesbaar blijven. */
  .kb-body pre{background:#f4f4f4 !important; color:#000 !important; border:1px solid #ccc}
  .kb-body blockquote{background:none !important; border-left:3px solid #999}
  .kb-body a{color:#000; text-decoration:underline}
  .kb-body img{border:1px solid #ddd}
}

/* ============ CMDB ============ */
/* type-overzicht: tegelijk samenvatting en filter */
.typebar{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.typebar button{display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 12px 0 6px; border-radius:11px;
  border:1px solid var(--border); background:#fff; cursor:pointer; font:inherit; font-size:12.5px; font-weight:800; color:var(--text)}
.typebar button:hover{border-color:rgba(46,139,87,.45)}
.typebar button[aria-pressed="true"]{background:rgba(168,213,186,.30); border-color:rgba(46,139,87,.45); color:var(--brand-dark)}
.typebar .n{font-variant-numeric:tabular-nums; color:var(--muted); font-weight:900}
.typebar button[aria-pressed="true"] .n{color:var(--brand-dark)}
.typebar .alle{padding-left:12px}
/* typecode: twee letters, vaste breedte, zodat een lijst scanbaar is */
.ty{display:inline-grid; place-items:center; width:26px; height:22px; border-radius:6px; flex:none;
  font:800 10px/1 ui-monospace,Menlo,monospace; letter-spacing:.02em; color:var(--brand-dark); background:rgba(168,213,186,.38)}
.ty.handscanner,.ty.labelprinter,.ty.printer{background:#e6eefb; color:#1d4f91}
.ty.telefoon,.ty.tablet{background:#f1ecfb; color:#5b21b6}
/* status van een CI, in de bestaande statuskleuren */
.chip.gebruik{background:var(--st-opgelost-bg); color:var(--st-opgelost-ink)}
.chip.voorraad{background:var(--st-nieuw-bg); color:var(--st-nieuw-ink)}
.chip.reparatie{background:var(--st-behandeling-bg); color:var(--st-behandeling-ink)}
.chip.afgevoerd{background:var(--st-gesloten-bg); color:var(--st-gesloten-ink)}

table.cis{min-width:900px}
table.cis .ci-kies{width:34px; padding-right:0}
table.cis .nm{font-weight:800}
table.cis .sub{font-size:11.5px; color:var(--muted); font-weight:700; margin-top:2px}
table.cis .num{text-align:right; font-variant-numeric:tabular-nums}
.ci-kies input{width:16px; height:16px; margin:0; accent-color:var(--brand-mid); cursor:pointer}
.naamcel{display:flex; gap:10px; align-items:center; min-width:0}
.gar{font-variant-numeric:tabular-nums; font-weight:800; font-size:12.5px; white-space:nowrap}
.gar.let{color:#b45309}
.gar.over{color:#b91c1c}
.gar small{display:block; font-size:10.5px; font-weight:800; letter-spacing:.03em}
.tk-open{display:inline-grid; place-items:center; min-width:22px; height:20px; padding:0 6px; border-radius:999px;
  background:rgba(42,120,214,.12); color:#1d4f91; font-weight:900; font-size:11px}
.tk-none{color:var(--ink-muted)}
.groep-kop td{background:#f6faf8; font-weight:900; color:var(--brand-dark); font-size:12px}
.groep-kop .sub{display:inline; margin-left:6px}
.selbar{position:sticky; bottom:14px; margin-top:12px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--brand-dark); color:#fff; border-radius:14px; padding:10px 14px; box-shadow:0 14px 28px rgba(15,107,90,.28)}
.selbar b{font-size:13px}
.selbar .spacer{flex:1}
.selbar .btn{height:34px}
.selbar .btn.ghost{background:transparent; color:#d9efe3; border-color:rgba(255,255,255,.3)}

/* CI-detail */
.sectie{margin-top:20px}
.sectie h3{margin:0 0 10px; font-size:11px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-muted);
  display:flex; align-items:center; justify-content:space-between; gap:10px}
.sectie h3 .btn{text-transform:none; letter-spacing:0}
.sectie .leeg{font-size:12.5px; color:var(--muted); margin:0}
/* CI-detail: titel met knoppen, feitenblok en kenmerken (label boven de waarde) */
.ci-kop{display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap}
.ci-kop > .ty{width:40px; height:34px; font-size:13px; border-radius:9px}
.ci-kop .titel{flex:1 1 260px; min-width:0}
.ci-kop .acties{display:flex; gap:8px; flex-wrap:wrap}
.mono{font-family:ui-monospace,Menlo,monospace}
.feiten{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:14px 22px}
.feiten.kern{margin-top:16px; background:#f6faf8; border:1px solid var(--border); border-radius:12px; padding:14px 16px}
.feit{min-width:0}
.feit .fl{font-size:10.5px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:4px}
.feit .fw{font-size:13.5px; font-weight:800; overflow-wrap:anywhere}
.feit .fw .mono{font-size:12.5px}
.feit .leeg{color:var(--ink-muted); font-weight:700}
.sectie h3 .aantal{display:inline-grid; place-items:center; min-width:20px; height:18px; padding:0 6px; margin-left:4px; border-radius:999px;
  background:rgba(15,107,90,.10); color:var(--brand-dark); font-size:10.5px; letter-spacing:0}
.ci-notities{white-space:pre-wrap; font-size:13px; line-height:1.55; background:#f8faf9; border:1px solid var(--border);
  border-radius:12px; padding:10px 12px; margin:0}
.rels{display:flex; flex-direction:column; gap:8px}
.rel{display:grid; grid-template-columns:118px minmax(0,1fr) auto auto; gap:12px; align-items:center; padding:9px 12px;
  border:1px solid var(--border); border-radius:12px; background:#fbfdfc}
.rel .soort{font-size:11.5px; font-weight:900; color:var(--brand-dark)}
.rel .doel{display:flex; align-items:center; gap:10px; min-width:0; border:none; background:none; padding:0; cursor:pointer;
  font:inherit; text-align:left; color:inherit}
.rel .doel .nm{display:block; font-weight:800; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rel .doel .sub{display:block; font-size:11px; color:var(--muted); font-weight:700}
.rel .doel:hover .nm{color:var(--brand-mid); text-decoration:underline}
.relform{display:grid; grid-template-columns:150px minmax(0,1fr); gap:8px; margin-top:10px}
.relform select{height:36px; border:1px solid rgba(46,139,87,.28); border-radius:10px; padding:0 10px; font:inherit; font-size:12.5px;
  background:#fff}
.x-knop{border:none; background:none; cursor:pointer; color:var(--ink-muted); font-size:17px; line-height:1; padding:3px 6px; border-radius:7px}
.x-knop:hover{background:#f1f5f4; color:var(--text)}
.tklist{display:flex; flex-direction:column}
.tkrow{display:grid; grid-template-columns:132px minmax(0,1fr) auto 86px; gap:12px; align-items:center; padding:9px 4px;
  border:none; border-bottom:1px solid #f1f5f4; background:none; font:inherit; font-size:13px; text-align:left; cursor:pointer;
  color:inherit; width:100%}
.tkrow:last-child{border-bottom:none}
.tkrow:hover{background:rgba(168,213,186,.13)}
.tkrow .t{font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tkrow .d{color:var(--muted); font-size:12px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.signaal{display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:12px; margin-bottom:10px;
  background:#fff7e6; border:1px solid rgba(217,119,6,.28); color:#7c4a03; font-size:12.5px; font-weight:700}
.signaal b{color:#5c3502}
/* sticker op ware verhouding: 62 × 29 mm */
.sticker{container-type:inline-size; aspect-ratio:62/29; max-width:100%; width:100%; overflow:hidden; background:#fff;
  border:1px dashed #b8cdc4; border-radius:6px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px;
  align-items:center; padding:8px 10px}
.sticker .qr{width:calc(100cqw * 29 / 62 - 22px); aspect-ratio:1}
.sticker .qr svg{width:100%; height:100%; display:block}
.sticker .st-nr{font:900 clamp(15px, 8.5cqw, 22px)/1 ui-monospace,Menlo,monospace; letter-spacing:.02em; color:#0f172a}
.sticker .st-nm{font-size:10.5px; font-weight:800; color:#0f172a; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sticker .st-voet{font-size:clamp(7px, 3.4cqw, 8.5px); font-weight:700; color:#475569; margin-top:5px; line-height:1.3; overflow-wrap:anywhere}
.maat{font-size:11px; color:var(--muted); font-weight:700; margin-top:8px; display:flex; justify-content:space-between; gap:8px}

/* zoeken naar een CI (koppelen aan ticket, relatie leggen) */
.zoekci{position:relative}
.zoekci input{width:100%; height:36px; border:1px solid rgba(46,139,87,.28); border-radius:10px; padding:0 10px; font:inherit;
  font-size:12.5px; outline:none; background:#fff}
.zoekci input:focus{border-color:rgba(46,139,87,.6); box-shadow:0 0 0 4px rgba(46,139,87,.12)}
.voorstel{position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:30; max-height:320px; overflow:auto;
  border:1px solid var(--border); border-radius:12px; background:#fff; padding:5px; box-shadow:0 12px 26px rgba(15,23,42,.12)}
.voorstel .gk{font-size:10.5px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); padding:7px 8px 4px}
.voorstel button{display:flex; align-items:center; gap:9px; width:100%; border:0; background:none; padding:7px 8px; border-radius:9px;
  text-align:left; cursor:pointer; font:inherit; color:var(--text)}
.voorstel button:hover,.voorstel button:focus-visible{background:#eef6f1}
.voorstel .nm{display:block; font-size:12.5px; font-weight:800}
.voorstel .sub{display:block; font-size:11px; color:var(--muted); font-weight:700}
.voorstel .leeg{font-size:12px; color:var(--muted); padding:8px}
/* ticket: "Betreft" */
.betreft{display:flex; flex-direction:column; gap:8px}
.cichip{display:flex; align-items:center; gap:9px; padding:8px 10px; border:1px solid var(--border); border-radius:12px; background:#fbfdfc}
.cichip .info{min-width:0; flex:1; border:none; background:none; padding:0; text-align:left; cursor:pointer; font:inherit; color:inherit}
.cichip .nm{display:block; font-size:12.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cichip .sub{display:block; font-size:11px; color:var(--muted); font-weight:700}
.cichip .info:hover .nm{color:var(--brand-mid); text-decoration:underline}
/* nieuwe CI: type kiezen, velden per type */
.modal.breed{width:min(720px,96vw)}
/* Klant en debiteurgroep van het fustsaldo: een breed venster dat zelf scrolt (de bewegingentabel heeft veel kolommen). */
.modal.fust-groot{width:min(1180px,96vw); max-height:92vh; overflow:auto; padding:18px 20px}
.modal.fust-groot .panel-head{padding-top:0}
.modal.fust-groot .fust-voet{margin-top:8px}
.typekeuze{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; margin-bottom:14px}
.typekeuze button{display:flex; align-items:center; gap:8px; height:40px; padding:0 10px; border:1px solid var(--border); border-radius:11px;
  background:#fff; cursor:pointer; font:inherit; font-size:12.5px; font-weight:800; color:var(--text); white-space:nowrap}
.typekeuze button[aria-pressed="true"]{border-color:var(--brand-mid); background:rgba(168,213,186,.25); color:var(--brand-dark)}
.velden{display:grid; grid-template-columns:1fr 1fr; gap:0 12px}
.velden .breed{grid-column:1/-1}
.typevelden{border-top:1px dashed var(--border); margin-top:4px; padding-top:12px}
.typevelden .kop{grid-column:1/-1; font-size:11px; font-weight:900; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-muted); margin-bottom:8px}
#ciForm .modal-actions{align-items:center; flex-wrap:wrap}
@media (max-width:640px){
  .velden{grid-template-columns:1fr}
  .rel{grid-template-columns:1fr auto; gap:6px}
  .rel .soort{grid-column:1/-1}
  .relform{grid-template-columns:1fr}
  .tkrow{grid-template-columns:1fr auto}
  .tkrow .tid{grid-column:1/-1}
  .tkrow .d{display:none}
}

/* ---------- Vakantieplanning: tijdlijn (wallchart, rij per medewerker) ---------- */
.kal-nav{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.kal-nav h2{margin-left:6px; min-width:150px; font-variant-numeric:tabular-nums}
/* Eigen kalender-popover om een maand te kiezen (i.p.v. de niet-stijlbare native datumkiezer) */
.datumkiezer{position:relative}
.datumkiezer-pop{
  position:absolute; top:calc(100% + 6px); left:0; z-index:40; width:264px;
  background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); padding:12px;
}
.dk-kop{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; font-size:13px; color:var(--brand-dark)}
.dk-nav{border:none; background:none; cursor:pointer; font-size:15px; font-weight:900; color:var(--brand-mid);
  padding:2px 8px; border-radius:8px; line-height:1.6}
.dk-nav:hover{background:rgba(168,213,186,.25)}
.dk-weekdagen{display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:4px;
  font-size:10px; font-weight:900; text-transform:uppercase; color:var(--ink-muted); text-align:center}
.dk-dagen{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.dk-dag{
  height:30px; border:none; background:none; border-radius:8px; cursor:pointer;
  font-size:12.5px; font-weight:700; color:var(--text); font-family:inherit;
}
.dk-dag:hover{background:rgba(168,213,186,.30)}
.dk-dag--buiten{color:var(--ink-muted); opacity:.5}
.dk-dag--vandaag{box-shadow:inset 0 0 0 1.5px var(--brand-mid)}
.dk-dag--gekozen{background:rgba(46,139,87,.14); color:var(--brand-dark); font-weight:900}

/* Zonder menubalk (alleen op de vakantieplanning, zie show() in app.js): de hele breedte, en
   weinig ruimte onderaan, zodat de tijdlijn in één scherm past. */
body.zonder-menu .shell{grid-template-columns:minmax(0,1fr)}
body.zonder-menu .sidenav{display:none}
body.zonder-menu main{max-width:none; padding-bottom:18px}
#view-verlof .page-head{margin-bottom:12px}

.wall-scroll{overflow-x:auto; overflow-y:hidden; border-radius:12px}
/* Geen min-width:max-content: dat dwingt elke dagkolom altijd op zijn minimumbreedte (34px),
   ook als het paneel breed genoeg is om alles zonder scrollen te tonen. Zonder die regel vult
   de grid (via minmax(34px,1fr) op de dagkolommen) gewoon de beschikbare breedte, en scrolt
   'ie alleen nog als een maand écht niet past (smal scherm / veel dagen). */
.wall{display:grid; row-gap:0; width:100%; font-size:12.5px}
.wall-hoek{grid-column:1; position:sticky; left:0; z-index:3; background:var(--panel)}
.wall-hoek-week{border-bottom:1px solid #f1f5f4}
.wall-week{
  grid-row:1; display:flex; align-items:center; justify-content:center; height:24px;
  font-size:10px; font-weight:900; letter-spacing:.03em; color:var(--ink-muted);
  background:var(--panel); border-bottom:1px solid #f1f5f4; border-right:1px solid rgba(15,23,42,.14);
}
.wall-daynum{
  grid-row:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; height:40px;
  color:var(--ink-muted); background:var(--panel); border-bottom:2px solid var(--border);
  border-right:1px solid rgba(15,23,42,.14); cursor:default;
}
.wall-wd{font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase}
.wall-dnum{font-size:13px; font-weight:900; font-variant-numeric:tabular-nums}
.wall-daynum.is-weekend{background:rgba(15,23,42,.045)}
.wall-daynum.is-weekend .wall-wd{color:var(--pr-hoog)}
.wall-daynum.is-vandaag{border-right-color:rgba(46,139,87,.30); border-left:1px solid rgba(46,139,87,.30)}
.wall-daynum.is-vandaag .wall-dnum{
  display:flex; align-items:center; justify-content:center; width:22px; height:22px;
  border-radius:50%; background:var(--brand-mid); color:#fff;
}
.wall-daynum.is-vandaag .wall-wd{color:var(--brand-dark)}
/* Achtergrondkolom per dag, over de volle hoogte (incl. beide kopregels): laat de daglijn
   doorlopen van bovenaan tot de laatste rij, in plaats van te stoppen bij de koppen. */
.wall-col{border-right:1px solid rgba(15,23,42,.14)}
.wall-weekend{background:rgba(15,23,42,.045)}
.wall-today{background:rgba(46,139,87,.09); border-right-color:rgba(46,139,87,.30); border-left:1px solid rgba(46,139,87,.30)}
/* Transparant: alleen de scheidingslijn tussen rijen. Een ondoorzichtige achtergrond zou de
   daglijnen (.wall-col) juist verbergen, want die liggen er als eerste onder. */
.wall-rowbg{background:transparent; border-bottom:1px solid #f1f5f4}
.wall-naam{
  grid-column:1; position:sticky; left:0; z-index:2; background:var(--panel);
  display:flex; align-items:center; gap:8px; padding:0 12px 0 2px; min-width:0;
  border-right:1px solid var(--border); box-shadow:2px 0 4px -2px rgba(15,23,42,.08);
}
.wall-naam .av{flex:none}
.wall-naam .nm{font-size:12.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* Eén rustige kleur voor elke verlofbalk, ongeacht afdeling of medewerker — bewust geen
   kleurcodering meer, dat oogde te druk. Zelfde lichtgroene badge-stijl als elders in de app
   (rgba(168,213,186,…) + brand-dark tekst, zie bv. .samen-optie). */
.wall-bar{
  align-self:center; height:20px; margin:0 2px; border-radius:999px; z-index:1;
  background:rgba(168,213,186,.55); border:1px solid rgba(46,139,87,.35);
  box-shadow:0 1px 2px rgba(15,23,42,.08); cursor:default; overflow:hidden;
}
.wall-bar:hover{outline:2px solid rgba(46,139,87,.35); outline-offset:1px}
/* Verjaardag: valt hij op een dag met verlof, dan komt alleen het rondje op de bestaande balk
   te staan (hogere z-index, geen eigen achtergrond). Anders krijgt hij een eigen, lichte balk
   (geen rand of stippellijn: dat oogde druk) zodat de rij niet kaal blijft. */
.wall-verjaardag-balk{
  align-self:center; height:20px; margin:0 2px; border-radius:999px; z-index:1;
  background:rgba(15,23,42,.06);
}
.wall.is-compact .wall-verjaardag-balk{height:14px}
.wall-verjaardag{
  align-self:center; justify-self:center; z-index:2; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%; background:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.3); font-size:12px; line-height:1;
}
.wall.is-compact .wall-verjaardag{width:15px; height:15px; font-size:9px}
.wall-bar-tekst{
  display:block; padding:0 10px; font-size:10.5px; font-weight:800; color:var(--brand-dark);
  line-height:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Veel medewerkers → lage rijen (zie pasTijdlijnIn): avatar weg, dunnere balk. */
.wall.is-compact .wall-naam .av{display:none}
.wall.is-compact .wall-naam .nm{font-size:11.5px}
.wall.is-compact .wall-bar{height:14px}
.wall.is-compact .wall-bar-tekst{line-height:14px; font-size:9.5px; padding:0 7px}
.wall-empty{grid-column:1/-1; padding:26px 4px; text-align:center; color:var(--muted); font-size:13.5px; font-weight:700}
@media (max-width:640px){
  .wall-naam{padding-right:8px}
  .wall-naam .nm{max-width:96px}
}
/* ---- saldi (TimeTell): vakantiedagen en tijd voor tijd per medewerker ---- */
table.saldi{min-width:560px}
table.saldi th:nth-child(1),table.saldi td:nth-child(1){width:auto; min-width:210px}
table.saldi th:nth-child(2),table.saldi td:nth-child(2){width:170px}
table.saldi .num{width:170px}
table.saldi .nm{font-weight:800}
/* Het vinkjesfilter: wie er in de lijst staat. Uitgevinkte namen worden grijs, zodat je in één
   oogopslag ziet wie er verborgen is. */
.saldi-filter{margin-bottom:16px}
.saldi-filter-knoppen{display:flex; gap:8px; flex-wrap:wrap}
.saldi-vinkjes{columns:3 230px; column-gap:28px}
.saldi-vink{display:flex; align-items:baseline; gap:8px; padding:5px 0; cursor:pointer; break-inside:avoid}
.saldi-vink input{flex:none; margin:0; accent-color:var(--brand-mid)}
.saldi-vink .nm{font-weight:700}
.saldi-vink .afd{margin-left:auto; padding-left:8px; font-size:12px; color:var(--muted)}
.saldi-vink:has(input:not(:checked)) .nm{color:var(--muted); font-weight:600; text-decoration:line-through}
/* Waar je naar moet kijken: te weinig vakantiedagen of een tegoed aan tijd voor tijd. Eén
   lichtrood vak met vette donkerrode tekst (zoals een foutmelding); welke kolom dat is, staat
   in app.js. */
table.saldi td.saldo-let-op{background:#fee2e2; color:#991b1b; font-weight:800}
table.saldi td.leeg{text-align:center; color:var(--muted); font-weight:700; padding:22px 12px}
/* De kopjes zijn knoppen om op te sorteren, maar moeten er als kopjes uitzien. */
table.saldi thead button[data-sort]{
  background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer;
  letter-spacing:inherit; text-transform:inherit;
}
table.saldi thead .num button[data-sort]{float:right}
table.saldi thead button[data-sort]:hover{color:var(--brand-dark); text-decoration:underline}
table.saldi thead button[data-sort].op{color:var(--brand-dark)}
table.saldi thead button[data-sort].op::after{content:"\2193"; margin-left:4px}
table.saldi thead th[aria-sort="ascending"] button[data-sort].op::after{content:"\2191"}

/* ===== Bestanden (de kluis) ===== */
.head-acties { display: flex; gap: 8px; flex-wrap: wrap; }
.best-map { margin-bottom: 16px; padding: 0; overflow: hidden; }
.best-map-kop { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.best-map-kop h2 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.best-aantal { font-size: .8rem; font-weight: 600; color: var(--brand-dark);
  background: var(--brand-soft); border-radius: 999px; padding: 1px 9px; }
.best-map-acties { display: flex; gap: 6px; flex-wrap: wrap; }
.best-tabel { width: 100%; border-collapse: collapse; }
.best-tabel th, .best-tabel td { padding: 9px 16px; text-align: left; border-top: 1px solid var(--border); vertical-align: middle; }
.best-tabel thead th { border-top: none; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .03em; color: var(--muted); font-weight: 600; }
.best-tabel .num { text-align: right; white-space: nowrap; }
.best-naam { font-weight: 600; }
.best-oms { color: var(--ink-muted); }
.best-wie { color: var(--muted); white-space: nowrap; }
.best-acties { text-align: right; white-space: nowrap; }
.best-acties .btn { margin-left: 4px; }
@media (max-width: 720px) {
  .best-tabel .best-oms, .best-tabel .best-wie,
  .best-tabel thead th:nth-child(2), .best-tabel thead th:nth-child(4) { display: none; }
}

/* ---- transportkosten: facturen uit Florisoft tegenover wat de transporteur echt rekent ---- */
table.transport{min-width:640px}
table.transport th:nth-child(1),table.transport td:nth-child(1){width:auto; min-width:150px}
table.transport .num,table.transport-klanten .num,table.transport-kosten .num{text-align:right; width:130px}
table.transport tbody tr[data-maand]{cursor:pointer}
table.transport tbody tr[data-maand]:hover{background:rgba(168,213,186,.18)}
table.transport tbody tr[aria-selected="true"]{background:rgba(168,213,186,.28)}
table.transport td.plus{color:#166534; font-weight:800}
table.transport td.min{color:#991b1b; font-weight:800}
table.transport-klanten th:nth-child(2),table.transport-klanten td:nth-child(2){width:auto; padding-left:10px}
.klant-code{display:inline-block; padding:2px 7px; border-radius:6px; background:rgba(168,213,186,.28); color:var(--brand-dark); font-weight:800; letter-spacing:.01em}
table.transport-klanten .num{white-space:nowrap}
table.transport-klanten td{vertical-align:middle}
/* compact, zodat alle 13 kolommen zonder zijwaarts scrollen in beeld passen */
table.transport-klanten{min-width:0; width:100%; font-size:13px}
table.transport-klanten th,table.transport-klanten td{padding:8px 4px}
table.transport-klanten th,table.transport-klanten th.num{font-size:10.5px; letter-spacing:.02em; white-space:nowrap; line-height:1.25; vertical-align:bottom}
table.transport-klanten .num{width:auto}
table.transport-klanten td:nth-child(2){min-width:110px; max-width:170px}
table.transport-klanten th,table.transport-klanten td{padding-left:6px; padding-right:6px}
/* de klantcode is kort: geen vaste 210px uit table.saldi, zodat de rest van de kolommen ruimte krijgt */
table.transport-klanten th:nth-child(1),table.transport-klanten td:nth-child(1){width:1%; min-width:0; white-space:nowrap}
table.transport-klanten th:nth-child(2),table.transport-klanten td:nth-child(2){width:auto}
input.transport-bedrag{width:76px}
table.transport-klanten td.code{white-space:nowrap; font-weight:700; color:var(--brand-dark)}
table.transport-klanten td:nth-child(4),table.transport-klanten td:nth-child(5),table.transport-klanten td:nth-child(6){white-space:nowrap}   /* ordernummer, datum en factuurnummer op één regel */
table.transport-klanten td.verschil.plus{color:#166534; font-weight:800}
table.transport-klanten td.verschil.min{color:#991b1b; font-weight:800}
input.transport-bedrag{width:110px; text-align:right; padding:6px 8px; font:inherit; border:1px solid var(--border); border-radius:8px; background:#fff}
input.transport-bedrag:focus{outline:3px solid rgba(46,139,87,.45); outline-offset:1px}
.transport-uitleg{margin:10px 2px 18px}
table.transport-log th:nth-child(1),table.transport-log td:nth-child(1){width:165px; white-space:nowrap}
table.transport-log th:nth-child(5),table.transport-log td:nth-child(5){width:120px}
table.transport-log td{font-size:13px}

.transport-log-knoppen{display:flex; gap:8px; flex-wrap:nowrap; flex-shrink:0; justify-content:flex-end}

table.transport td .transport-ingevuld{margin-left:6px; font-size:11px; font-weight:400; color:var(--ink-muted)}
table.transport tbody td{white-space:nowrap}

/* de klantcode is kort: geen vaste 210px uit table.saldi */
table.fust th:nth-child(1),table.fust td:nth-child(1){width:1%; min-width:0; white-space:nowrap}
#fustFilters{margin-top:16px}
table.fust thead th[data-sort]{cursor:pointer; user-select:none}
table.fust thead th[data-sort]:hover{color:var(--brand-dark)}
table.fust thead th[aria-sort="ascending"]::after{content:" \25B2"; font-size:9px}
table.fust thead th[aria-sort="descending"]::after{content:" \25BC"; font-size:9px}
.fust-mail{margin:16px 0 0; padding:14px 16px; border:1px solid rgba(46,139,87,.35); border-radius:12px; background:rgba(168,213,186,.20)}
.fust-mail h3{margin:0 0 6px; font-size:15px; font-weight:900; color:var(--brand-dark)}
.fust-mail textarea{width:100%; box-sizing:border-box; font:inherit; font-size:14px; padding:8px 10px; border:1px solid var(--border); border-radius:12px}
.fust-adres{display:flex; align-items:center; gap:8px; margin:6px 0; font-size:14px; font-weight:600; cursor:pointer}
.fust-adres input{margin:0; flex:none}
.fust-label{display:block; margin:12px 0 4px; font-size:11px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
table.fust td.negatief{color:var(--st-behandeling-ink); font-weight:800}
table.fust tfoot th{border-top:2px solid var(--border); text-align:left; padding:10px 12px}
#fustSoortenPanel{margin-bottom:16px}
table.fust tfoot th.num{text-align:right}

.transport-acties{display:flex; align-items:center; gap:12px; flex-wrap:wrap}

.transport-layout{display:block}
.transport-layout.met-tabs{display:grid; grid-template-columns:172px minmax(0, 1fr); gap:20px; align-items:start}
/* Het groepenmenu staat naast het hoofdmenu en neemt ruimte in: de pagina wordt er even breed voor, zodat de inhoud even breed blijft als op de andere schermen */
main:has(.transport-layout.met-tabs:not([hidden])){max-width:calc(1360px + 192px)}
.transport-inhoud{min-width:0}
.transport-tabs{display:flex; flex-direction:column; gap:6px; position:sticky; top:16px}
.transport-tab{font:inherit; font-size:14px; font-weight:700; text-align:left; padding:12px 14px; line-height:1.3; overflow-wrap:anywhere; border:1px solid var(--border); border-left:4px solid transparent; border-radius:10px; background:#fff; color:var(--text); cursor:pointer}
.transport-tab:hover{background:rgba(168,213,186,.18)}
.transport-tab[aria-selected="true"]{background:rgba(168,213,186,.30); border-left-color:var(--brand-dark); color:var(--brand-dark)}
.transport-tab:focus-visible{outline:3px solid rgba(46,139,87,.45); outline-offset:2px}
@media (max-width:820px){
  .transport-layout.met-tabs{grid-template-columns:minmax(0, 1fr)}
  .transport-tabs{flex-direction:row; flex-wrap:wrap; position:static}
}

/* Klantpaneel van het fustsaldo: een eigen kolombreedte voor de bewegingen */
#fustKlantPanel table.saldi{min-width:0}
#fustKlantPanel table.saldi .num{width:90px}
.fust-bew-kop{align-items:center; margin-top:8px; padding-bottom:6px}
.fust-periode{display:flex; flex-wrap:wrap; align-items:end; gap:8px}
.fust-periode label{display:flex; flex-direction:column; gap:2px; font-size:12px; font-weight:700; color:var(--muted)}
.datum-nl{position:relative; display:inline-flex; align-items:center; gap:4px}
.datum-nl input.datum-nl-tekst{flex:1; min-width:0}
.field .datum-nl, .task .datum-nl{display:flex; width:100%}
.fust-periode .datum-nl input.datum-nl-tekst{flex:none; width:112px; font:inherit; padding:6px 8px; border:1px solid var(--border); border-radius:8px; background:#fff}
.datum-nl input[type=date]{position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; pointer-events:none}
.dk-pop{position:fixed; z-index:90; width:264px; background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); padding:12px}
.dk-kop{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; font-size:13px; color:var(--brand-dark)}
.dk-nav{border:none; background:none; cursor:pointer; font-size:15px; font-weight:900; color:var(--brand-mid); padding:2px 8px; border-radius:8px; line-height:1.6}
.dk-nav:hover{background:rgba(168,213,186,.25)}
.dk-weekdagen{display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:4px; font-size:12px; font-weight:700; color:var(--muted); text-align:center}
.dk-dagen{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.dk-dag{height:32px; border:none; background:none; border-radius:8px; cursor:pointer; font:inherit; font-size:13px; font-weight:700; color:var(--text)}
.dk-dag:hover{background:rgba(168,213,186,.3)}
.dk-dag--buiten{color:var(--muted); opacity:.55}
.dk-dag--vandaag{box-shadow:inset 0 0 0 1.5px var(--brand-mid)}
.dk-dag--gekozen{background:rgba(46,139,87,.14); color:var(--brand-dark); font-weight:900}
.dk-voet{display:flex; justify-content:space-between; margin-top:8px; padding-top:8px; border-top:1px solid var(--border)}
.dk-link{border:none; background:none; cursor:pointer; font:inherit; font-size:13px; font-weight:800; color:var(--brand-dark); padding:4px 6px; border-radius:8px}
.dk-link:hover{background:rgba(168,213,186,.25)}
.fust-periode input[type=date]{font:inherit; padding:6px 8px; border:1px solid var(--border); border-radius:8px; background:#fff}
.fust-bew td,.fust-bew th{white-space:nowrap}
table.saldi.fust-bew td:nth-child(n),table.saldi.fust-bew th:nth-child(n){width:auto; min-width:0}
table.saldi.fust-bew .num{width:90px}
.fust-bew th .fust-oms{display:block; font-size:10px; font-weight:400; letter-spacing:0; text-transform:none; white-space:normal; max-width:110px; margin-left:auto}
.fust-bew tr.fust-start td,.fust-bew tfoot td{font-weight:700; background:rgba(168,213,186,.18)}
.fust-bew tfoot td{padding:11px 12px; border-top:2px solid var(--border)}
.fust-legenda{margin:8px 0 0}
a.btn{display:inline-flex; align-items:center; text-decoration:none}
.fust-voet{display:flex; justify-content:flex-end; padding:12px 18px 16px}