/* Werkdashboard: rustige, platte opmaak. Licht en donker via prefers-color-scheme. */
:root {
  --bg: #f6f5f1; --vlak: #ffffff; --vlak2: #efede7; --tekst: #1f1e1b; --zacht: #6b6963; --lijn: rgba(0,0,0,.1); --lijn2: rgba(0,0,0,.2);
  --accent: #2563c9; --accent-bg: #e6f0fb; --groen: #2e7d32; --oranje: #b26a00; --oranje-bg: #fbf0dc; --rood: #c62828;
  --web: #6d4fc2; --web-bg: #efecfb; --seo: #2e7d32; --seo-bg: #e7f3e2; --ads: #1e63b8; --ads-bg: #e5f0fb; --meta: #b33a6b; --meta-bg: #fbe9f0; --auto: #b0590f; --auto-bg: #fcefe3;
  --r: 8px; color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171716; --vlak: #21211f; --vlak2: #2b2b28; --tekst: #ecebe6; --zacht: #a3a19a; --lijn: rgba(255,255,255,.1); --lijn2: rgba(255,255,255,.22);
    --accent: #7fb0f0; --accent-bg: #1d2f48; --groen: #8bcf8f; --oranje: #f0b45a; --oranje-bg: #3a2c12; --rood: #f08a8a;
    --web: #b9a8f2; --web-bg: #2e2650; --seo: #9ad59a; --seo-bg: #1f3a1f; --ads: #8ebdf2; --ads-bg: #1b324f; --meta: #f0a3c2; --meta-bg: #45202f; --auto: #f2b37a; --auto-bg: #45301b;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--tekst); font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); text-decoration: none; }
h1 { font-size: 22px; font-weight: 500; margin: 0 0 4px; }
h2 { font-size: 15px; font-weight: 500; margin: 26px 0 8px; }
small, .zacht { color: var(--zacht); font-size: 12.5px; }
.oranje { color: var(--oranje) !important; } .rood { color: var(--rood) !important; } .groen { color: var(--groen) !important; }
.kop { display: flex; align-items: center; gap: 18px; padding: 10px 20px; background: var(--vlak); border-bottom: .5px solid var(--lijn); position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
.merk { font-weight: 500; color: var(--tekst); } .merk span { color: var(--zacht); font-weight: 400; }
.kop nav { display: flex; gap: 4px; }
.kop nav a { color: var(--zacht); padding: 6px 10px; border-radius: var(--r); } .kop nav a[aria-current] { color: var(--tekst); background: var(--vlak2); }
.zoek { margin-left: auto; } .zoek input { width: 230px; }
.ik { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); display: grid; place-items: center; font-size: 13px; font-weight: 500; }
.inhoud { max-width: 1100px; margin: 0 auto; padding: 20px; }
input, select, textarea, button { font: inherit; color: var(--tekst); }
input, select, textarea { background: var(--vlak); border: .5px solid var(--lijn2); border-radius: var(--r); padding: 7px 10px; width: 100%; }
button { background: transparent; border: .5px solid var(--lijn2); border-radius: var(--r); padding: 7px 14px; cursor: pointer; white-space: nowrap; }
button:hover { background: var(--vlak2); } button.primair { background: var(--tekst); color: var(--bg); border-color: var(--tekst); } button.klein { padding: 4px 10px; font-size: 13px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--zacht); }
.kaart { background: var(--vlak); border: .5px solid var(--lijn); border-radius: 12px; padding: 16px 18px; }
.kaart.smal { max-width: 380px; margin: 12vh auto; display: flex; flex-direction: column; gap: 12px; }
.melding { background: var(--accent-bg); color: var(--accent); padding: 8px 12px; border-radius: var(--r); }
.fout { background: var(--oranje-bg); color: var(--oranje); padding: 8px 12px; border-radius: var(--r); }
.leeg { color: var(--zacht); }
.notitie { background: var(--vlak); border: .5px solid var(--lijn); border-radius: var(--r); padding: 10px 12px; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.chip { padding: 4px 11px; border-radius: var(--r); border: .5px solid var(--lijn); color: var(--tekst); font-size: 13px; }
.chip.actief { background: var(--accent-bg); color: var(--accent); border-color: transparent; }
.cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.cijfers div { background: var(--vlak2); border-radius: var(--r); padding: 12px 14px; display: flex; flex-direction: column; }
.cijfers .cijfer-link { background: var(--vlak2); border-radius: var(--r); padding: 12px 14px; display: flex; flex-direction: column; color: var(--tekst); }
.cijfers .cijfer-link:hover { background: var(--accent-bg); }
.cijfers span { font-size: 12.5px; color: var(--zacht); } .cijfers strong { font-size: 22px; font-weight: 500; } .cijfers small { font-weight: 400; }
.tabel { background: var(--vlak); border: .5px solid var(--lijn); border-radius: 12px; overflow: hidden; }
.rij { display: grid; grid-template-columns: minmax(0,1.6fr) 120px 50px minmax(0,1.4fr); gap: 10px; padding: 9px 14px; align-items: center; border-bottom: .5px solid var(--lijn); color: var(--tekst); }
.tabel > .rij:last-child, .tabel > details:last-child .rij { border-bottom: 0; }
a.rij:hover { background: var(--vlak2); }
.rij.kop4 { color: var(--zacht); font-size: 12.5px; padding-top: 7px; padding-bottom: 7px; }
.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) 70px minmax(0,1fr) auto; }
.rij-details[open] > .rij { background: var(--vlak2); }
.vink { width: 18px; height: 18px; padding: 0; border-radius: 5px; }
.vink:hover { background: var(--accent-bg); border-color: var(--accent); }
.label { display: inline-block; font-size: 11.5px; padding: 2px 8px; border-radius: var(--r); 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; padding: 1px 7px; border-radius: var(--r); border: .5px solid currentColor; white-space: nowrap; }
.status-accent { color: var(--accent); } .status-oranje { color: var(--oranje); } .status-grijs { color: var(--zacht); }
.balk { display: block; height: 6px; border-radius: 3px; background: var(--vlak2); margin: 3px 0; overflow: hidden; }
.balk span { display: block; height: 6px; border-radius: 3px; background: var(--accent); } .balk span.over { background: var(--oranje); }
.raster { display: grid; gap: 14px; } .raster.twee { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.formulier { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 12px; align-items: end; }
.formulier .breed { grid-column: 1 / -1; }
.regel { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .regel input { flex: 1; min-width: 140px; } .regel select, .regel input[type=date] { width: auto; }
.bewerk { margin: 8px 0; } .bewerk > summary { cursor: pointer; color: var(--accent); font-size: 13.5px; margin-bottom: 8px; }
.klantkop { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 10px; }
.compleet { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--zacht); } .compleet .balk { width: 110px; }
.afspraken { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }
.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; } .afspraak .stand { margin-top: 8px; font-size: 13px; } .afspraak form { margin-top: 14px; }
.knoppen { display: flex; gap: 6px; justify-content: flex-end; }
.sleutel-nieuw { background: var(--accent-bg); border-radius: var(--r); padding: 10px 12px; 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: 6px 0; border-bottom: .5px solid var(--lijn); } .rechts { text-align: right; }
.onder { margin-top: 24px; }
.oproep { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 20px; background: var(--accent-bg); color: var(--tekst); border-bottom: .5px solid var(--lijn); }
.oproep[hidden] { display: none; }
.weken { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; align-items: start; }
.week h3 { font-size: 13px; font-weight: 500; margin: 0 0 6px; color: var(--zacht); } .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; }
.subfilters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 4px 0 10px; }
.subfilters .chip small { color: inherit; opacity: .7; }
.gesprek { grid-template-columns: 70px minmax(0,1fr) auto; }
@media print {
  .kop, .oproep, button, .bewerk, .filters { display: none !important; }
  body { background: #fff; color: #000; } .tabel, .kaart, .cijfers div { border-color: #ccc; background: #fff; }
}
@media (max-width: 700px) {
  .kop { gap: 10px; padding: 10px 14px; } .zoek { margin-left: 0; width: 100%; order: 3; } .zoek input { width: 100%; }
  .inhoud { padding: 14px; }
  .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 { grid-template-columns: 1fr; } .rij.contact > *, .rij.meerwerk > * { display: block !important; grid-column: auto !important; }
}