/* Werkdashboard Onlinemeersucces.nl, in de huisstijl: Inter, petrolblauw (#0e7490), oranje accent (#ea580c),
   afgeronde kaarten met zachte blauwe schaduw, ronde knoppen en chips. Licht en donker via prefers-color-scheme. */
:root {
  --blauw: #0e7490; --blauw-donker: #0c5f78; --blauw-mid: #0891b2; --blauw-licht: #e0f2f7; --oranje-cta: #ea580c; --teal: #0d9488;
  --bg: #f4f7fa; --vlak: #ffffff; --vlak2: #f1f5f9; --tekst: #0f172a; --tekst2: #334155; --zacht: #64748b; --lijn: #e2e8f0; --lijn2: #cbd5e1;
  --accent: var(--blauw); --accent-bg: var(--blauw-licht); --groen: #16a34a; --groen-bg: #dcfce7; --oranje: #c2410c; --oranje-bg: #ffedd5; --rood: #dc2626; --rood-bg: #fee2e2;
  --web: #7c3aed; --web-bg: #ede9fe; --seo: #0d9488; --seo-bg: #ccfbf1; --ads: #0e7490; --ads-bg: #e0f2f7; --meta: #db2777; --meta-bg: #fce7f3; --auto: #c2410c; --auto-bg: #ffedd5;
  --r: 10px; --r-groot: 14px; --pil: 50px;
  --schaduw: 0 1px 2px rgba(15,23,42,.04), 0 4px 18px rgba(14,116,144,.07); --schaduw-groot: 0 8px 32px rgba(14,116,144,.14);
  --zijbalk: 232px; color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1220; --vlak: #111a2b; --vlak2: #17233a; --tekst: #e2e8f0; --tekst2: #cbd5e1; --zacht: #94a3b8; --lijn: #1e2c44; --lijn2: #2b3b58;
    --blauw: #38bdf8; --blauw-donker: #0ea5e9; --blauw-licht: #0c2a3c; --accent: #38bdf8; --accent-bg: #0c2a3c;
    --groen: #4ade80; --groen-bg: #0f2e1d; --oranje: #fb923c; --oranje-bg: #34200f; --rood: #f87171; --rood-bg: #3a1414;
    --web: #c4b5fd; --web-bg: #2a2150; --seo: #5eead4; --seo-bg: #0d2f2c; --ads: #7dd3fc; --ads-bg: #0c2a3c; --meta: #f9a8d4; --meta-bg: #3a1530; --auto: #fdba74; --auto-bg: #34200f;
    --schaduw: 0 1px 2px rgba(0,0,0,.3), 0 4px 18px rgba(0,0,0,.25); --schaduw-groot: 0 8px 32px rgba(0,0,0,.4);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--tekst); font: 14.5px/1.55 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-feature-settings: "cv11", "ss01"; }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
h1 { font-size: 24px; font-weight: 800; letter-spacing: -.4px; margin: 0; }
h2 { font-size: 15px; font-weight: 700; margin: 28px 0 10px; display: flex; align-items: center; gap: 8px; }
h2 small { font-weight: 500; }
h3 { font-size: 13px; font-weight: 700; margin: 0 0 8px; }
small, .zacht { color: var(--zacht); font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.oranje { color: var(--oranje) !important; } .rood { color: var(--rood) !important; } .groen { color: var(--groen) !important; }

/* ---------- opbouw: zijbalk + inhoud ---------- */
.app { display: grid; grid-template-columns: var(--zijbalk) minmax(0, 1fr); min-height: 100vh; }
.zijbalk { position: sticky; top: 0; height: 100vh; background: var(--vlak); border-right: 1px solid var(--lijn); display: flex; flex-direction: column; padding: 18px 14px; gap: 18px; }
.merk { display: flex; align-items: center; gap: 10px; color: var(--tekst); font-weight: 800; letter-spacing: -.3px; font-size: 15px; line-height: 1.15; text-decoration: none !important; padding: 0 6px; }
.merk-icoon { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--blauw-mid), var(--blauw-donker)); color: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 4px 12px rgba(8,145,178,.35); }
.merk-icoon svg { width: 18px; height: 18px; }
.merk small { display: block; font-weight: 600; color: var(--zacht); font-size: 11px; letter-spacing: .6px; text-transform: uppercase; }
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r); color: var(--tekst2); font-weight: 500; text-decoration: none; }
.menu a svg { width: 18px; height: 18px; color: var(--zacht); flex: none; }
.menu a:hover { background: var(--vlak2); }
.menu a[aria-current] { background: var(--accent-bg); color: var(--accent); } .menu a[aria-current] svg { color: var(--accent); }
.menu .teller { margin-left: auto; background: var(--oranje-cta); color: #fff; font-size: 11px; font-weight: 700; border-radius: var(--pil); padding: 1px 7px; }
.menu .teller.rustig { background: var(--vlak2); color: var(--zacht); }
.menu-kop { font-size: 11px; font-weight: 700; color: var(--zacht); text-transform: uppercase; letter-spacing: .8px; padding: 10px 10px 4px; }
.zijbalk .ik-blok { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px 6px 0; border-top: 1px solid var(--lijn); }
.ik { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); display: grid; place-items: center; font-size: 13px; font-weight: 700; flex: none; }
.ik-blok div { line-height: 1.25; min-width: 0; } .ik-blok strong { display: block; font-size: 13px; } .ik-blok small { font-size: 11.5px; }
.bovenbalk { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 12px 28px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--lijn); }
.menu-knop { display: none; }
.zoek { flex: 1; max-width: 520px; position: relative; }
.zoek svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--zacht); }
.zoek input { padding-left: 36px; border-radius: var(--pil); background: var(--vlak); }
.inhoud { max-width: 1240px; width: 100%; margin: 0 auto; padding: 24px 28px 60px; }
.paginakop { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.paginakop p { margin: 4px 0 0; color: var(--zacht); }
.paginakop .acties { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- formulieren en knoppen ---------- */
input, select, textarea, button { font: inherit; color: var(--tekst); }
input, select, textarea { background: var(--vlak); border: 1px solid var(--lijn2); border-radius: var(--r); padding: 8px 12px; width: 100%; transition: border-color .2s, box-shadow .2s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blauw-mid); box-shadow: 0 0 0 3px rgba(8,145,178,.18); }
button, .knop, a.knop { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--vlak); border: 1px solid var(--lijn2); border-radius: var(--pil); padding: 8px 16px; cursor: pointer; white-space: nowrap; color: var(--tekst); font-weight: 600; font-size: 13.5px; text-decoration: none !important; transition: background .2s, border-color .2s, transform .1s; }
button:hover, .knop:hover { background: var(--vlak2); border-color: var(--lijn2); }
button:active { transform: translateY(1px); }
button.primair, .knop.primair { background: var(--oranje-cta); border-color: var(--oranje-cta); color: #fff; box-shadow: 0 4px 14px rgba(234,88,12,.25); }
button.primair:hover, .knop.primair:hover { background: #c2410c; border-color: #c2410c; }
button.klein, .knop.klein, a.knop.klein { padding: 5px 12px; font-size: 12.5px; }
label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--zacht); }
.kaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r-groot); padding: 18px 20px; box-shadow: var(--schaduw); }
.kaart.smal { max-width: 400px; margin: 12vh auto; display: flex; flex-direction: column; gap: 14px; }
.melding { background: var(--accent-bg); color: var(--accent); padding: 10px 14px; border-radius: var(--r); font-weight: 500; }
.fout { background: var(--oranje-bg); color: var(--oranje); padding: 10px 14px; border-radius: var(--r); }
.leeg { color: var(--zacht); background: var(--vlak); border: 1px dashed var(--lijn2); border-radius: var(--r); padding: 14px 16px; margin: 0; }
.notitie { background: var(--vlak); border: 1px solid var(--lijn); border-left: 3px solid var(--blauw-mid); border-radius: var(--r); padding: 10px 14px; }
.raster { display: grid; gap: 16px; } .raster.twee { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-items: start; }
.formulier { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 14px; align-items: end; }
.formulier .breed { grid-column: 1 / -1; }
.regel { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .regel input { flex: 1; min-width: 140px; } .regel select, .regel input[type=date] { width: auto; }
.bewerk { margin: 10px 0; } .bewerk > summary { cursor: pointer; color: var(--accent); font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }
.knoppen { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
form.inline { display: inline; }

/* ---------- filters ---------- */
.filterbalk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r-groot); padding: 10px 12px; margin-bottom: 16px; box-shadow: var(--schaduw); }
.filterbalk select, .filterbalk input { width: auto; min-width: 130px; padding: 6px 12px; border-radius: var(--pil); font-size: 13px; }
.filterbalk input[type=search] { min-width: 200px; flex: 1; }
.filterbalk select.gekozen { border-color: var(--blauw-mid); background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.filterbalk .aantal { margin-left: auto; color: var(--zacht); font-size: 12.5px; white-space: nowrap; }
.filterbalk .wis { font-size: 12.5px; font-weight: 600; }
.filters, .subfilters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.chip { padding: 5px 13px; border-radius: var(--pil); border: 1px solid var(--lijn2); color: var(--tekst2); font-size: 12.5px; font-weight: 600; background: var(--vlak); text-decoration: none !important; }
.chip:hover { border-color: var(--blauw-mid); }
.chip.actief { background: var(--accent); color: #fff; border-color: transparent; }
.chip small { color: inherit; opacity: .75; }

/* ---------- cijfers en samenvattingen ---------- */
.cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 8px; }
.cijfers > div, .cijfers .cijfer-link { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r-groot); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--schaduw); color: var(--tekst); text-decoration: none !important; }
.cijfers .cijfer-link:hover { border-color: var(--blauw-mid); box-shadow: var(--schaduw-groot); }
.cijfers span { font-size: 12px; color: var(--zacht); font-weight: 600; } .cijfers strong { font-size: 24px; font-weight: 800; letter-spacing: -.5px; } .cijfers small { font-weight: 500; letter-spacing: 0; }
.samenvatting { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 10px 0 14px; }
.samenvatting div { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r); padding: 10px 14px; display: flex; flex-direction: column; gap: 3px; box-shadow: var(--schaduw); }
.samenvatting span { font-size: 11.5px; color: var(--zacht); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; } .samenvatting strong { font-weight: 700; font-size: 15px; }

/* ---------- tabellen ---------- */
.tabel { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r-groot); overflow: hidden; box-shadow: var(--schaduw); }
.rij { display: grid; grid-template-columns: minmax(0,1.6fr) 130px 54px minmax(0,1.4fr); gap: 12px; padding: 11px 16px; align-items: center; border-bottom: 1px solid var(--lijn); color: var(--tekst); text-decoration: none !important; }
.tabel > .rij:last-child, .tabel > details:last-child .rij { border-bottom: 0; }
a.rij:hover { background: var(--vlak2); }
.rij.kop4, .rij.kop-r, .rij.kop { background: var(--vlak2); color: var(--zacht); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding-top: 9px; padding-bottom: 9px; }
.rij.kop a, .rij.kop4 a { color: var(--zacht); } .rij.kop a.gesorteerd, .rij.kop4 a.gesorteerd { color: var(--accent); }
.rij.taak { grid-template-columns: 26px minmax(0,1fr) auto; }
.rij.log { grid-template-columns: 1fr; gap: 2px; }
.rij.contact { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr); cursor: pointer; list-style: none; }
.rij.contact::-webkit-details-marker { display: none; }
.rij.meerwerk { grid-template-columns: minmax(0,1.8fr) 80px minmax(0,1fr) auto; }
.rij.gesprek { grid-template-columns: 80px minmax(0,1fr) auto; }
.rij.signaal { grid-template-columns: minmax(0,1fr) auto; }
.rij.klant { grid-template-columns: minmax(0,1.6fr) minmax(0,1.3fr) minmax(0,.8fr) minmax(0,.8fr) 110px; padding-top: 9px; padding-bottom: 9px; }
.rij.uren { grid-template-columns: 110px minmax(0,1fr) 120px 90px 80px; }
.rij.gesprekken { grid-template-columns: 120px 60px minmax(0,1.4fr) minmax(0,1fr) 90px; }
.rij-details[open] > .rij { background: var(--vlak2); }
.vink { width: 20px; height: 20px; padding: 0; border-radius: 6px; border: 1.5px solid var(--lijn2); background: var(--vlak); }
.vink:hover { background: var(--groen-bg); border-color: var(--groen); }
.label { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: var(--pil); white-space: nowrap; }
.label-web { background: var(--web-bg); color: var(--web); } .label-seo { background: var(--seo-bg); color: var(--seo); } .label-ads { background: var(--ads-bg); color: var(--ads); }
.label-meta { background: var(--meta-bg); color: var(--meta); } .label-automatisering { background: var(--auto-bg); color: var(--auto); }
.label-hosting { background: var(--vlak2); color: var(--zacht); }
.status { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: var(--pil); white-space: nowrap; }
.status-accent { color: var(--accent); background: var(--accent-bg); } .status-oranje { color: var(--oranje); background: var(--oranje-bg); } .status-grijs { color: var(--zacht); background: var(--vlak2); }
.balk { display: block; height: 7px; border-radius: var(--pil); background: var(--vlak2); margin: 4px 0; overflow: hidden; }
.balk span { display: block; height: 7px; border-radius: var(--pil); background: linear-gradient(90deg, var(--blauw-mid), var(--blauw)); } .balk span.over { background: linear-gradient(90deg, #fb923c, var(--oranje-cta)); }
a.bel { font-size: 12px; font-weight: 600; border: 1px solid var(--accent); border-radius: var(--pil); padding: 1px 9px; margin-left: 6px; white-space: nowrap; }

/* ---------- klantkaart ---------- */
.klantkop { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 12px; }
.klantkop h1 + p { margin: 4px 0 0; }
.snel { display: flex; gap: 8px; flex-wrap: wrap; }
.compleet { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--zacht); } .compleet .balk { width: 110px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--lijn2); margin: 22px 0 6px; overflow-x: auto; }
.tabs a { padding: 9px 14px; color: var(--zacht); border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 600; text-decoration: none !important; }
.tabs a:hover { color: var(--tekst); } .tabs a.actief { color: var(--accent); border-bottom-color: var(--accent); }
.js .tab { display: none; } .js .tab.actief { display: block; }
.afspraken { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; }
.afspraak > summary { list-style: none; cursor: pointer; } .afspraak > summary::-webkit-details-marker { display: none; }
.afspraak[open] { grid-column: 1 / -1; } .afspraak .groot { margin-top: 8px; font-weight: 700; } .afspraak .stand { margin-top: 8px; font-size: 13px; } .afspraak form { margin-top: 14px; }
.afspraak:hover { border-color: var(--blauw-mid); }

/* ---------- planning, signalen, controle ---------- */
.weken { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; align-items: start; }
.week h3 { color: var(--zacht); text-transform: uppercase; font-size: 11.5px; letter-spacing: .6px; } .week.laat h3 { color: var(--rood); }
.week .rij.taak { grid-template-columns: 26px minmax(0,1fr); } .week .rij.taak > small:last-child { grid-column: 2; }
.controle { margin-bottom: 14px; } .controle h2 { margin: 0; }
.regel-c { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--lijn); flex-wrap: wrap; }
.rendement .rij { grid-template-columns: minmax(0,1.6fr) repeat(6, minmax(62px, .5fr)); }
.oproep { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 28px; background: linear-gradient(90deg, var(--blauw-donker), var(--blauw-mid)); color: #fff; font-weight: 600; }
.oproep a { color: #fff; text-decoration: underline; } .oproep small { color: rgba(255,255,255,.8); } .oproep button { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.4); }
.oproep[hidden] { display: none; }
.sleutel-nieuw { background: var(--accent-bg); border-radius: var(--r); padding: 12px 14px; margin: 10px 0; }
.sleutel-nieuw pre { white-space: pre-wrap; word-break: break-all; font-size: 12px; margin: 6px 0 0; }
.lijst { width: 100%; border-collapse: collapse; margin: 10px 0; } .lijst td { padding: 7px 0; border-bottom: 1px solid var(--lijn); } .rechts { text-align: right; }
.onder { margin-top: 26px; }
.login-merk { display: flex; justify-content: center; margin-bottom: 4px; }

/* ---------- smal en telefoon ---------- */
@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; }
  .zijbalk { position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 20; transform: translateX(-105%); transition: transform .25s ease; box-shadow: var(--schaduw-groot); }
  .menu-open .zijbalk { transform: none; }
  .menu-knop { display: inline-flex; padding: 7px 10px; }
  .bovenbalk { padding: 10px 14px; }
  .inhoud { padding: 16px 14px 50px; }
}
@media (max-width: 700px) {
  .rij { grid-template-columns: 1fr auto; } .rij > :nth-child(3) { display: none; } .rij > :nth-child(4) { grid-column: 1 / -1; }
  .rij.taak { grid-template-columns: 26px 1fr auto; } .rij.taak > :nth-child(3) { display: block; grid-column: auto; }
  .rij.contact, .rij.meerwerk, .rij.signaal, .rij.klant, .rij.uren, .rij.gesprekken { grid-template-columns: 1fr; } .rij.contact > *, .rij.meerwerk > *, .rij.klant > *, .rij.uren > *, .rij.gesprekken > * { display: block !important; grid-column: auto !important; }
  .rij.kop4, .rij.kop { display: none; }
  .rij.signaal .knoppen { justify-content: flex-start; }
  .samenvatting { grid-template-columns: 1fr 1fr; }
  .snel .knop { flex: 1; padding: 10px; }
  .filterbalk select, .filterbalk input { flex: 1 1 45%; min-width: 0; }
  .rendement { overflow-x: auto; } .rendement .rij { min-width: 660px; }
  a.bel { display: inline-flex; padding: 4px 12px; margin: 4px 0 0; }
}
@media print {
  .zijbalk, .bovenbalk, .oproep, button, .bewerk, .filters, .filterbalk { display: none !important; }
  .app { display: block; } body { background: #fff; color: #000; } .tabel, .kaart, .cijfers div, .samenvatting div { box-shadow: none; }
}

/* ---------- versie 1.6: uitlijning en nieuwe onderdelen ---------- */
input, select, button, .knop { min-height: 36px; }
button.klein, .knop.klein, .filterbalk select, .filterbalk input, .rij select, .rij input[type=date] { min-height: 32px; }
textarea { min-height: 0; }
.filterbalk { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(auto-fill, minmax(165px, 1fr)); align-items: center; }
.filterbalk select, .filterbalk input { width: 100%; min-width: 0; }
.filterbalk .filtervoet { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin: -2px 2px 0; }
.filterbalk .wis, .filterbalk .aantal { margin: 0; }
.paginakop { min-height: 56px; }
.cijfers > div, .cijfers .cijfer-link { min-height: 84px; justify-content: center; }
.rij > span, .rij > small { min-width: 0; }
.tabel .rij small { line-height: 1.45; }
h2 small a { font-weight: 600; }
.dagkop { margin: 22px 0 8px; color: var(--zacht); text-transform: uppercase; font-size: 11.5px; letter-spacing: .6px; }
.rij.wijziging { grid-template-columns: 46px 96px minmax(0, 1fr) minmax(0, auto); cursor: pointer; list-style: none; }
.rij.wijziging::-webkit-details-marker { display: none; }
.w-tijd { color: var(--zacht); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.w-soort { justify-self: start; } .w-nieuw { background: var(--groen-bg); color: var(--groen); } .w-reparatie { background: var(--oranje-bg); color: var(--oranje); }
.w-live { background: var(--accent-bg); color: var(--accent); } .w-manus { background: var(--paars-bg, var(--vlak2)); color: var(--paars, var(--accent)); } .w-onderhoud, .w-documentatie, .w-wijziging, .w-opgeschoond { background: var(--vlak2); color: var(--zacht); }
.w-meta { text-align: right; white-space: nowrap; }
.w-details { padding: 10px 16px 14px 158px; border-bottom: 1px solid var(--lijn); background: var(--vlak2); font-size: 13px; }
.w-details p { margin: 0 0 8px; }
.bestanden { list-style: none; margin: 0 0 8px; padding: 0; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.bestanden li { padding: 2px 0; } .bestanden span { display: inline-block; width: 78px; font-family: Inter, system-ui, sans-serif; font-size: 11px; font-weight: 600; color: var(--zacht); }
.bestanden .b-a { color: var(--groen); } .bestanden .b-d { color: var(--rood); }
.rij.item { grid-template-columns: 26px minmax(0, 1fr) 120px 150px 36px; }
.rij.item.klaar > span:nth-child(2) { color: var(--zacht); text-decoration: line-through; text-decoration-color: var(--lijn2); }
.rij.item select, .rij.item input[type=date] { padding: 4px 10px; font-size: 12.5px; border-radius: var(--pil); width: 100%; }
.rij.item input.laat { border-color: var(--rood); color: var(--rood); }
.vink.aan { background: var(--groen); border-color: var(--groen); position: relative; }
.vink.aan::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.vink, button.vink { min-height: 0; width: 20px; height: 20px; flex: none; }
.rij.item form, .rij form.inline { display: flex; align-items: center; margin: 0; }
.menu-knop svg { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; }
small.rust { display: block; margin-top: 3px; color: var(--zacht); font-size: 12px; line-height: 1.45; }
.rij.urenrij { grid-template-columns: minmax(0, 1fr) 110px 110px 130px 190px; align-items: center; cursor: pointer; list-style: none; }
.rij.urenrij::-webkit-details-marker { display: none; }
.rij.urenrij > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.rij.urenrij .getal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rij.urenrij.kop span:not(:first-child) { text-align: right; }
.rij.urenrij.kop span:last-child { text-align: left; padding-left: 18px; }
.verbruik { display: grid; grid-template-columns: minmax(0, 1fr) 42px; align-items: center; gap: 8px; padding-left: 18px; }
.verbruik .balk { margin: 0; } .verbruik small { text-align: right; font-variant-numeric: tabular-nums; }
.verbruik small.zacht { grid-column: 1 / -1; text-align: left; white-space: nowrap; }
.urendetail { padding: 10px 16px 14px; border-bottom: 1px solid var(--lijn); background: var(--vlak2); font-size: 13px; }
.urendetail > p { margin: 0 0 8px; }
.urendag { display: grid; grid-template-columns: 70px 230px minmax(0, 1fr); gap: 12px; padding: 6px 0; border-top: 1px solid var(--lijn); align-items: baseline; }
.uitleg { margin-top: 22px; } .uitleg summary { cursor: pointer; } .uitleg ul { margin: 10px 0 0; padding-left: 18px; line-height: 1.6; }
details.optioneel { margin-top: 18px; }
details.optioneel > summary { cursor: pointer; list-style: none; } details.optioneel > summary::-webkit-details-marker { display: none; }
details.optioneel > summary h2 { display: inline; } details.optioneel > summary h2::before { content: "\25B8  "; color: var(--zacht); }
details.optioneel[open] > summary h2::before { content: "\25BE  "; }
button.kaal { border-color: transparent; background: transparent; color: var(--zacht); padding: 2px 8px; }
a.hl { font-size: 11.5px; font-weight: 600; color: var(--teal); white-space: nowrap; margin-left: 6px; }
.fase { margin-bottom: 14px; } .fase h3 { display: flex; gap: 8px; align-items: baseline; color: var(--tekst2); }
.rij.routine { grid-template-columns: minmax(0, 1fr) 130px 90px 90px 90px; }
.rij.routine select { padding: 4px 10px; font-size: 12.5px; border-radius: var(--pil); }
.werkplan { margin-top: 10px; }
.kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.hl-kaart { display: flex; flex-direction: column; gap: 6px; color: var(--tekst); text-decoration: none !important; transition: border-color .2s, box-shadow .2s; }
.hl-kaart:hover { border-color: var(--blauw-mid); box-shadow: var(--schaduw-groot); }
.handleiding { max-width: 780px; font-size: 15px; line-height: 1.7; }
.handleiding h1 { font-size: 26px; margin-bottom: 8px; } .handleiding h2 { font-size: 17px; margin-top: 26px; }
.handleiding li { margin: 4px 0; } .handleiding code { background: var(--vlak2); padding: 1px 6px; border-radius: 6px; font-size: 13px; }
@media (max-width: 700px) {
  .rij.urenrij { grid-template-columns: 1fr 1fr; } .rij.urenrij > span:first-child { grid-column: 1 / -1; } .rij.urenrij .verbruik { grid-column: 1 / -1; padding-left: 0; }
  .rij.urenrij.kop { display: none; } .urendag { grid-template-columns: 1fr; gap: 2px; }
  .filterbalk { grid-template-columns: 1fr 1fr; } .filterbalk input[type=search] { grid-column: 1 / -1; }
  .rij.wijziging { grid-template-columns: 46px 1fr; } .rij.wijziging .w-soort { display: none; } .rij.wijziging .w-meta { grid-column: 2; text-align: left; white-space: normal; }
  .w-details { padding-left: 16px; }
  .rij.item { grid-template-columns: 26px 1fr; } .rij.item > span:nth-child(n+3) { grid-column: 2; }
  .rij.routine { grid-template-columns: 1fr 1fr; } .rij.routine > span:first-child { grid-column: 1 / -1; }
}

/* Weekfocus (24-10-2026): bovenaan Vandaag de projecten van deze week met hun eerstvolgende stappen. */
.weekfocus { border-left: 4px solid var(--accent); }
.weekfocus .focusproject { margin-top: 14px; }
.weekfocus .focusproject h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; font-size: 15px; }
.weekfocus .focusproject h3 small { font-weight: 500; }
.weekfocus .focusproject form.rechts { margin-left: auto; }
.weekfocus .rij:not(.taak) { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.weekfocus-regel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 14px; color: var(--zacht); font-size: 13px; }
.weekfocus-regel form.inline { display: inline; }
.weekfocus-regel button.aan { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }

/* ---------- team (1.9): werktijd, waaraan, voortgang ---------- */
.melding.waarschuwing { background: var(--oranje-bg); color: var(--oranje); margin-bottom: 16px; line-height: 1.5; }
.teamkaart { margin-bottom: 18px; }
.teamkaart h2 { margin-top: 0; }
.teamkaart .cijfers small { color: var(--zacht); font-size: 11.5px; }
.teamkaart h3 { font-size: 14px; margin: 16px 0 8px; }
.teamgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.rij.dagrij { grid-template-columns: 70px minmax(0, 1fr) 64px minmax(0, 1.3fr); }
.rij.klantrij { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 64px; }
.rij.focusrij { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 60px 60px; }
.rij .getal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dagrij .balk, .klantrij .balk { margin: 0; }
.rij.voortgangrij { grid-template-columns: minmax(0, 1fr) 210px 210px 110px; }
.rij.voortgangrij > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.voortgangrij .verbruik { grid-template-columns: 1fr; gap: 3px; padding-left: 0; }
.voortgangrij .verbruik small { text-align: left; }
@media (max-width: 960px) { .teamgrid { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .rij.voortgangrij { grid-template-columns: 1fr 1fr; } .rij.voortgangrij > span:first-child { grid-column: 1 / -1; } .rij.voortgangrij.kop { display: none; }
  .rij.dagrij { grid-template-columns: 56px minmax(0, 1fr) 56px; } .rij.dagrij > small { grid-column: 1 / -1; }
}
/* ---------- factuurvanger (30-10-2026): stukken, leveranciers, portalen, rondes, administratiekeuze ---------- */
.adm-keuze select { width: auto; min-width: 220px; border-radius: var(--pil); font-weight: 600; background: var(--accent-bg); color: var(--accent); border-color: transparent; }
.adm-naam { font-weight: 700; color: var(--accent); background: var(--accent-bg); border-radius: var(--pil); padding: 6px 14px; white-space: nowrap; }
.rij.stuk { grid-template-columns: 82px minmax(0, 1fr) 170px minmax(0, 220px); align-items: start; }
.rij.stuk > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.s-datum small, .s-status small { font-size: 11.5px; }
.s-wat small { overflow-wrap: anywhere; }
.s-bestand { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px !important; }
.s-reden { color: var(--oranje) !important; }
.s-status .status { align-self: flex-start; }
.s-acties { align-items: flex-end; }
.s-acties .knoppen { margin: 0; }
.rij.lev { grid-template-columns: minmax(0, 1.3fr) 70px 70px 90px minmax(0, 1.6fr); }
.rij.portaal { grid-template-columns: minmax(0, 1fr) 70px 90px minmax(0, 2fr); }
.portaal-keuze { margin: 0; flex-wrap: nowrap; } .portaal-keuze select { width: 190px; flex: none; } .portaal-keuze input { min-width: 100px; }
.rij.ronde { grid-template-columns: 130px 100px 110px 70px 90px minmax(0, 1fr); }
.btw-tegel { border-left: 4px solid var(--oranje-cta) !important; }
.acties-lijst { margin: 6px 0 0; padding-left: 18px; }
.beheer-adm { margin-bottom: 14px; } .beheer-adm h2 { margin-top: 0; }
@media (max-width: 700px) {
  .rij.stuk { grid-template-columns: 70px minmax(0, 1fr); } .rij.stuk > .s-status, .rij.stuk > .s-acties { grid-column: 2; display: flex !important; align-items: flex-start; }
  .rij.lev, .rij.portaal, .rij.ronde { grid-template-columns: 1fr 1fr; } .rij.lev > :first-child, .rij.portaal > :first-child, .rij.lev > small, .rij.portaal > .portaal-keuze, .rij.ronde > small { grid-column: 1 / -1; display: flex !important; }
  .rij.lev > :nth-child(3), .rij.portaal > :nth-child(3), .rij.ronde > :nth-child(3) { display: block; }
  .portaal-keuze { flex-wrap: wrap; } .portaal-keuze select { width: 100%; }
  .adm-keuze select { min-width: 0; max-width: 46vw; } .adm-naam { display: none; }
}
.rij.portaal > span:first-child { display: flex; flex-direction: column; gap: 2px; }