/* ============================================================================
   kpn.css — module KPN facturatie: de Saleslijst-dagmatrix (18-9-2026),
   naar het vertrouwde Excel-voorbeeld: kantoor → project → medewerker met
   dagkolommen (zonder zondagen, zaterdag getint), totalen en gemiddelden.
   Uitsluitend kern-tokens (R24); de projectbanden krijgen hun merkkleur
   inline uit kpn.js.
   ============================================================================ */

.sm-wrap{overflow-x:auto;background:var(--wit);border:1px solid var(--rand);
  border-radius:var(--radius-groot)}
.sm-tabel{border-collapse:collapse;width:100%;font-size:11px;color:var(--tekst)}
.sm-tabel th,.sm-tabel td{padding:4px 6px;border-bottom:1px solid var(--rand);
  white-space:nowrap;text-align:center}
.sm-tabel thead th{position:sticky;top:0;background:var(--veld-bg);z-index:3;
  font-size:10px;font-weight:700;color:var(--tekst-2);text-transform:uppercase;
  letter-spacing:.04em}
.sm-id{min-width:74px;text-align:left!important;color:var(--tekst-2)}
.sm-naam{min-width:160px;text-align:left!important;font-weight:600}
/* eerste twee kolommen blijven staan bij horizontaal scrollen */
.sm-tabel th:nth-child(1),.sm-tabel td:nth-child(1){position:sticky;left:0;
  background:var(--wit);z-index:2}
.sm-tabel th:nth-child(2),.sm-tabel td:nth-child(2){position:sticky;left:86px;
  background:var(--wit);z-index:2}
.sm-tabel thead th:nth-child(1),.sm-tabel thead th:nth-child(2){z-index:4;
  background:var(--veld-bg)}
.sm-dag{min-width:26px}
/* weekendkolommen (za + zo) geel, zoals in het Excel-origineel */
.sm-za{background:color-mix(in srgb,#f2c200 30%,var(--wit))}
.sm-som{min-width:46px;font-weight:700}
/* somkolommen in dezelfde tinten als hun totaalrij: Sales ↔ Totaal sales,
   WD ↔ Medewerkers, Gem. ↔ Gemiddelde */
.sm-kol-sales{background:color-mix(in srgb,var(--color-accent) 14%,var(--wit))}
.sm-kol-wd{background:color-mix(in srgb,var(--color-primary) 10%,var(--wit))}
.sm-kol-gem{background:color-mix(in srgb,var(--color-accent) 7%,var(--wit))}
.sm-tabel thead th.sm-kol-sales{background:color-mix(in srgb,var(--color-accent) 14%,var(--veld-bg))}
.sm-tabel thead th.sm-kol-wd{background:color-mix(in srgb,var(--color-primary) 10%,var(--veld-bg))}
.sm-tabel thead th.sm-kol-gem{background:color-mix(in srgb,var(--color-accent) 7%,var(--veld-bg))}
/* bloktotalen: sales-som, mandagen en gemiddelde groot en onder elkaar in
   één samengevoegde totaalkolom, in de kleur van hun rij/kolom */
.sm-blok-tot{font-size:14px;font-weight:800;text-align:center}

/* organisatietotaal-band (bovenaan de matrix + eigen PDF-pagina) */
.sm-orgband{background:var(--color-primary)}
.sm-orgband td{background:inherit;color:#fff;font-weight:800;
  font-size:12px;text-align:left;letter-spacing:.02em}
.sm-orgband td:nth-child(1),.sm-orgband td:nth-child(2){background:inherit}

/* witruimte tussen de kantoorblokken en (kleiner) tussen de projectblokken
   (alleen op het scherm) */
.sm-tabel tr.sm-spacer td{background:var(--wit);border-bottom:0;height:18px;padding:0}
.sm-tabel tr.sm-spacer.klein td{height:10px}

/* herhaalde kopregel boven elk kantoorblok (de thead blijft bovenaan sticky) */
.sm-koprij th{background:var(--veld-bg);font-size:10px;font-weight:700;
  color:var(--tekst-2);text-transform:uppercase;letter-spacing:.04em}
.sm-koprij th:nth-child(1),.sm-koprij th:nth-child(2){background:var(--veld-bg)}
.sm-koprij th.sm-kol-sales{background:color-mix(in srgb,var(--color-accent) 14%,var(--veld-bg))}
.sm-koprij th.sm-kol-wd{background:color-mix(in srgb,var(--color-primary) 10%,var(--veld-bg))}
.sm-koprij th.sm-kol-gem{background:color-mix(in srgb,var(--color-accent) 7%,var(--veld-bg))}

/* onderverdelingsregels in het organisatietotaal (per kantoor/project) */
.sm-onder{background:var(--veld-bg)}
.sm-onder td{background:inherit}
.sm-onder td:nth-child(1),.sm-onder td:nth-child(2){background:inherit;font-weight:600;text-align:left}

/* uit dienst: rode naam en UD-cellen na de laatste werkdag */
.sm-naam-ud{color:var(--color-danger)!important}
.sm-ud{color:var(--color-danger);font-weight:700;font-size:9px;letter-spacing:.03em}

/* banden en totaalrijen: achtergrond op de TR (projectband inline vanuit
   kpn.js), zodat ook de vaste eerste kolommen hem via inherit meenemen */
.sm-kantoor{background:var(--color-accent)}
.sm-kantoor td{background:inherit;color:#fff;font-weight:800;
  font-size:12px;text-align:left;letter-spacing:.02em}
.sm-projectband td{background:inherit;color:#fff;font-weight:800;
  font-size:11.5px;text-align:left}
.sm-band-sub{font-weight:500;font-size:10px;opacity:.85;margin-left:8px}
.sm-rij-tot{background:color-mix(in srgb,var(--color-accent) 14%,var(--wit))}
.sm-rij-tot td{background:inherit;font-weight:700}
.sm-rij-mw{background:color-mix(in srgb,var(--color-primary) 10%,var(--wit))}
.sm-rij-mw td{background:inherit}
.sm-rij-gem{background:color-mix(in srgb,var(--color-accent) 7%,var(--wit))}
.sm-rij-gem td{background:inherit;font-style:italic}
/* weekendtint wint ook in de totaal- en onderverdelingsrijen (anders
   overschrijft de rij-achtergrond het geel) */
.sm-rij-tot td.sm-za,.sm-rij-mw td.sm-za,.sm-rij-gem td.sm-za,
.sm-onder td.sm-za{background:color-mix(in srgb,#f2c200 30%,var(--wit))}

/* de sticky-kolomregels hierboven winnen op specificiteit; hier terug naar
   de rij-achtergrond voor band- en totaalrijen */
.sm-kantoor td:nth-child(1),.sm-kantoor td:nth-child(2),
.sm-projectband td:nth-child(1),.sm-projectband td:nth-child(2),
.sm-rij-tot td:nth-child(1),.sm-rij-tot td:nth-child(2),
.sm-rij-mw td:nth-child(1),.sm-rij-mw td:nth-child(2),
.sm-rij-gem td:nth-child(1),.sm-rij-gem td:nth-child(2){background:inherit}

/* ME-correctie: PO → ME-check (migratie 146) — vinkkolom + 7 kolommen */
.rij.kmec{grid-template-columns:32px 1.4fr 1.3fr 1fr 1.2fr 1.1fr .9fr 1.6fr;align-items:center}
.rij.kmec .klein{font-size:11px;opacity:.7}
.tabel-kop:has(#me-doorschuif-knop){display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
@media(max-width:820px){.rij.kmec{grid-template-columns:1fr}}

/* Orders (migratie 147): brede tabel met 18 kolommen — eigen horizontale
   scroll, kop blijft staan bij verticaal scrollen */
.ord-scroll{overflow:auto;max-height:70vh}
.ord-tabel{border-collapse:collapse;width:max-content;min-width:100%;font-size:12.5px}
.ord-tabel th{position:sticky;top:0;z-index:1;background:var(--color-surface,#fff);text-align:left;
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.85;padding:9px 12px;
  border-bottom:1px solid var(--color-border,rgba(127,127,127,.25));white-space:nowrap}
.ord-tabel td{padding:7px 12px;border-bottom:1px solid var(--color-border,rgba(127,127,127,.15));white-space:nowrap;
  font-variant-numeric:tabular-nums}
.ord-tabel tbody tr:hover td{background:color-mix(in srgb,var(--color-primary,#3b82f6) 6%,transparent)}
.ord-leeg{opacity:.45}
.ord-tellers .bdg{margin-left:4px}

/* Orders › Accounts koppelen (migratie 149): account ↔ KPN-medewerker.
   Bredere dialoog, eigen scrollende lijst, filter via [hidden] */
.dialoog:has(.ak-lijst){max-width:780px}
.ak-balk{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:8px}
.ak-balk .veld{flex:1 1 240px}
.ak-teller{margin-bottom:8px}
.ak-melding .melding{margin-bottom:10px}
.ak-lijst{max-height:44vh;overflow-y:auto;border:1px solid var(--rand);border-radius:var(--radius)}
.ak-rij{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.7fr);gap:10px;
  align-items:center;padding:7px 12px;border-bottom:1px solid var(--rand);font-size:12.5px;color:var(--tekst)}
.ak-rij:last-child{border-bottom:0}
.ak-rij[hidden]{display:none}
.ak-rij.hoofd{position:sticky;top:0;z-index:1;background:var(--veld-bg);font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--tekst-2)}
.ak-mw b{display:block;font-weight:600}
.ak-afd{color:var(--tekst-2)}
.ak-acc{display:flex;gap:8px;align-items:center;min-width:0}
.ak-acc .mini-select{flex:1 1 auto;min-width:0;max-width:100%}
.ak-ok{white-space:nowrap;margin-top:0}
@media(max-width:620px){
  .ak-rij{grid-template-columns:1fr;gap:4px}
  .ak-rij.hoofd{display:none}
}

/* Kantoorfacturatie-uitklapboom (28-9): leverancier → project → product met
   9 kolommen (Aantal … CPO (Kantoor)); info-regel over wat niet meetelt */
.rij.kkb{grid-template-columns:2.2fr repeat(8,minmax(0,.85fr));align-items:center}
.rij.kkb.kkb-info{grid-template-columns:1fr}
.kkb-info-t{font-size:12px;opacity:.75;font-style:italic}
@media(max-width:820px){.rij.kkb{grid-template-columns:1fr}}

/* ME-correctie: orderdetail op klik (28-9) — 18 velden in een raster */
.ord-detail-link{font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.ord-detail-link[aria-expanded="true"]{text-decoration-style:double}
.ord-detail-wrap{padding:4px 12px 12px 44px;border-bottom:1px solid var(--color-border)}
.ord-detail{background:color-mix(in srgb,var(--color-primary,#3b82f6) 5%,transparent);
  border:1px solid var(--color-border);border-radius:10px;padding:12px 14px;margin-top:8px}
.ord-detail-kop{font-weight:700;font-size:12.5px;margin-bottom:8px}
.ord-detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px 18px;margin:0}
.ord-detail-grid dt{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.7;margin:0 0 2px}
.ord-detail-grid dd{margin:0;font-size:13px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ord-detail-leeg{font-size:12.5px;opacity:.75}
@media(max-width:820px){.ord-detail-wrap{padding-left:12px}}

/* ME-correctie: onterecht uitgekeerd (migratie 153) — 8 kolommen */
.rij.kon{grid-template-columns:1.4fr 1fr .8fr .9fr .9fr 1.1fr 1.2fr 1.5fr;align-items:center}
.rij.kon .klein{font-size:11px;opacity:.7}
@media(max-width:820px){.rij.kon{grid-template-columns:1fr}}