/* ============================================================
   De pagina Ontwerpen: van een gecentreerde catalogus naar een
   werkomgeving met een vaste kolom links.

   Dit bestand staat NA planner/stijl.css in index.html en overschrijft
   daar alleen wat het overzicht aangaat. In stijl.css zelf verandert
   niets: dat bestand is gedeeld en er zitten anderen dagelijks in.

   Twee dingen bepalen het beeld:

   1. De ondergrond van de werkruimte is de blauwdruk van de planner,
      letterlijk dezelfde ruit als #stage in stijl.css (26 px, lijnen van
      rgba(30,41,59,.05) op var(--ov-grond)). Zo stap je van het overzicht de
      tekening in zonder dat de vloer onder je verandert.
   2. De kolom links is donker. Hij draagt het merk, de knop Nieuw
      ontwerp, de filters en de klanten, en blijft staan terwijl de lijst
      scrolt. De rest van het scherm is licht en van het werk.

   De HTML in index.html blijft ongemoeid op een regel na (deze stylesheet);
   de kolom wordt door planner/overzicht.js uit de bestaande elementen
   opgebouwd. Vandaar dat hieronder zowel nieuwe namen (#ovnav, #ovwerk)
   als bestaande (#ovtop, #ovbar) voorkomen.
   ============================================================ */

/* ---------- de kleuren ----------
   Op :root en niet op #overzicht, want het menu met drie puntjes (#ovpop) en
   de formuliervensters (#ovform) hangen aan document.body en staan dus BUITEN
   #overzicht. Alle namen beginnen met --ov, zodat ze niet in de weg zitten bij
   de variabelen van de planner (--ink, --line, --wk).

   De donkere stand geldt alleen voor deze schermen. De planner blijft licht:
   dat is een tekentafel met echte materialen en wandkleuren, en die donker
   maken is een heel ander project dan een knop omzetten. */
:root{
  --ov-grond:#F7F9F8;             /* de blauwdruk onder de werkruimte */
  --ov-ruit:rgba(30,41,59,.05);   /* de lijnen van die ruit */
  --ov-vlak:#FFFFFF;              /* kaarten, rijen, invoervelden */
  --ov-vlak2:#EEF0F2;             /* beeldvakje, hover, lege pil */
  --ov-vlak3:#FBFCFC;             /* een rij die geen aandacht meer vraagt */
  --ov-aan:#EAECEF;               /* de ingedrukte weergaveknop */
  --ov-inkt:#15171B;              /* gewone tekst */
  --ov-zacht:#666C75;             /* bijschrift */
  --ov-stil:#A0A5AD;             /* icoon in rust */
  --ov-stiller:#8A9099;           /* plaatshouder */
  --ov-lijn:#E3E5E9;
  --ov-lijn2:#C8CCD3;             /* rand bij hover */
  --ov-accent:#EC633D;            /* het oranje van het merk */
  --ov-accent2:#E05428;
  --ov-rood:#B42318;
  --ov-knop:#15171B;              /* de knop die de hoofdhandeling draagt */
  --ov-knop2:#2A2E35;
  --ov-knoptekst:#FFFFFF;
  --ov-nav:#1B1E23;               /* de kolom links */
  --ov-navtekst:#C9CDD3;
  --ov-navinkt:#E7E9EC;
  --ov-navzacht:#8D939C;
  --ov-navvlak:#33383F;
  --ov-pilblauwv:#E6EFF0;  --ov-pilblauwt:#35676A;    /* gedeeld */
  --ov-pilgroenv:#E6F0E2;  --ov-pilgroent:#3B6C2A;    /* goedgekeurd */
  --ov-piloranjev:#FAE5DB; --ov-piloranjet:#B4551F;   /* besteld */
}
html.ovdonker{
  --ov-grond:#14161A;
  --ov-ruit:rgba(255,255,255,.05);
  --ov-vlak:#1C1F24;
  --ov-vlak2:#252931;
  --ov-vlak3:#191B20;
  --ov-aan:#2B3038;
  --ov-inkt:#E8EAED;
  --ov-zacht:#9AA1AB;
  --ov-stil:#79808B;
  --ov-stiller:#6B727C;
  --ov-lijn:#2C313A;
  --ov-lijn2:#3C424C;
  --ov-accent:#F07A55;            /* iets lichter, anders leest oranje niet op donker */
  --ov-accent2:#F28A68;
  --ov-rood:#F26B5E;
  --ov-knop:#E8EAED;              /* op donker is de hoofdknop licht met donkere tekst */
  --ov-knop2:#FFFFFF;
  --ov-knoptekst:#14161A;
  --ov-nav:#0F1114;               /* de kolom is donkerder dan de werkruimte, net als in het licht */
  --ov-navtekst:#A8AFB9;
  --ov-navinkt:#E8EAED;
  --ov-navzacht:#767D87;
  --ov-navvlak:#2A2F37;
  --ov-pilblauwv:#17313A;  --ov-pilblauwt:#86C8D2;
  --ov-pilgroenv:#1C3421;  --ov-pilgroent:#93CE93;
  --ov-piloranjev:#3A2318; --ov-piloranjet:#F0A579;
}

/* ---------- de schil ---------- */
#overzicht{
  background:var(--ov-grond);
  padding:0;
  align-items:stretch;
  overflow:hidden;            /* alleen de werkruimte scrolt, de kolom blijft staan */
  color:var(--ov-inkt);
}
html.overzicht #overzicht{ align-items:stretch; }

#ovwrap{
  max-width:none; margin:0; gap:0;
  display:grid; grid-template-columns:242px minmax(0,1fr);
  width:100%; height:100%;
}

/* het merkblok en de accountknop verhuizen naar de kolom; de oude balk
   erboven heeft daarmee niets meer te dragen */
#overzicht #ovtop{ display:none; }

/* ---------- de kolom links ---------- */
#ovnav{
  display:flex; flex-direction:column; gap:16px;
  padding:17px 13px; overflow-y:auto;
  background:var(--ov-nav); color:var(--ov-navinkt);
}
#ovnav .ovmerk{
  display:flex; align-items:center; gap:10px; padding:2px 6px 0;
  color:#fff;
}
/* het gekloonde logo uit de poort: klein, wit, en alleen het huismerk.
   De viewBox knipt het woordmerk eronder weg, zodat er geen tweede regel
   tekst naast de merknaam staat die we er zelf al bij zetten. */
#ovnav .ovmerk .wk-merk{
  height:30px; width:auto; display:block; color:#fff; flex:none;
}
#ovnav .ovmerk .nm{
  font-size:var(--tekst-xl); font-weight:600; letter-spacing:-.01em; white-space:nowrap;
}

/* Nieuw ontwerp: dezelfde oranje als in de rest van de app, maar hier als
   hele knop in plaats van als los pijlblokje, want in een donkere kolom is
   een papieren knop met een harde schaduw niet te lezen. */
#overzicht #ovnav .ovnieuw{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; height:38px; padding:0 14px;
  background:var(--ov-accent); color:#fff; border:0; border-radius:var(--rond-m); box-shadow:none;
  font:inherit; font-size:var(--tekst-l); font-weight:600; cursor:pointer;
}
#overzicht #ovnav .ovnieuw:hover{ background:var(--ov-accent2); box-shadow:none; }
#overzicht #ovnav .ovnieuw .pijl{
  width:auto; background:none; color:#fff; display:flex; align-items:center;
}
#overzicht #ovnav .ovnieuw .lbl{ padding:0; }

#ovnav .ovgroep{ display:flex; flex-direction:column; gap:1px; }
#ovnav .ovgkop{
  margin:0 0 7px; padding:0 8px;
  font:500 10.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ov-navzacht);
}
#ovnav .ovnavknop{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:7px 8px; border:0; border-radius:var(--rond-m); background:none;
  font:inherit; font-size:var(--tekst-l); color:var(--ov-navtekst); cursor:pointer;
}
#ovnav .ovnavknop:hover{ background:rgba(255,255,255,.06); color:#fff; }
#ovnav .ovnavknop:focus-visible{ outline:2px solid var(--ov-accent); outline-offset:-2px; }
#ovnav .ovnavknop.aan{ background:rgba(255,255,255,.1); color:#fff; font-weight:600; }
/* de knop met de drie strepen hoort bij het smalle scherm en staat op een
   brede kolom in de weg */
#ovnav .ovmenuknop{ display:none; }
#ovnav .ovnavknop .tel{
  margin-left:auto; font:400 11.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--ov-navzacht); font-variant-numeric:tabular-nums;
}
#ovnav .ovnavknop.aan .tel{ color:#fff; opacity:.75; }
#ovnav .ovnavknop .stip{ width:7px; height:7px; border-radius:50%; flex:none; background:var(--ov-navzacht); }

/* De oude chipsstrook is uit beeld: de klanten zijn een blad geworden en het
   filter staat in de balk. Het element blijft bestaan omdat index.html
   ongemoeid blijft. */
#overzicht #ovmappen{ display:none; }

/* het accountblok zakt naar de onderkant van de kolom */
#overzicht #ovnav #ovacct{ margin-top:auto; }
#overzicht #ovnav .ovchip{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:9px 8px; border:0; border-radius:var(--rond-m); box-shadow:none;
  background:rgba(255,255,255,.07); color:var(--ov-navinkt); font-size:var(--tekst-l);
}
#overzicht #ovnav .ovchip:hover{ background:rgba(255,255,255,.12); box-shadow:none; }
#overzicht #ovnav .ovchip .rond{ background:var(--ov-navvlak); color:#fff; }
#overzicht #ovnav .ovchip .nm{ max-width:none; }

/* ---------- de werkruimte: de blauwdruk van de planner ---------- */
#ovwerk{
  min-width:0; overflow-y:auto;
  padding:20px 22px 28px;
  display:flex; flex-direction:column; gap:15px;
  background-color:var(--ov-grond);
  background-image:
    linear-gradient(var(--ov-ruit) 1px,transparent 1px),
    linear-gradient(90deg,var(--ov-ruit) 1px,transparent 1px);
  background-size:26px 26px; background-position:center;
}

/* ---------- de bladen met blokken in plaats van een lijst ----------
   Instellingen, Team, Facturen en de pagina van een klant zijn een kolom met
   blokken. Die kolom had wel een max-width maar geen marge, en stond daarmee
   tegen de linkerrand: op 1920 px 820 px inhoud met 814 px leeg ernaast, wat
   leest als een pagina die half is ingeladen. De marge valt nu links en
   rechts gelijk uit.

   De hele stapel schuift mee en niet alleen #ovlijst: staat de titel tegen de
   rand en de inhoud in het midden, dan hoort er zichtbaar niets bij elkaar.

   760 px is gemeten en niet gekozen. De breedste rij op Instellingen heeft er
   601 nodig (het label plus zijn bediening), op Team 597, en de uitleg onder
   een blokkop loopt tot 68ch, gemeten 557. Breder wordt alleen lucht tussen
   een label en zijn knop, en dat maakt een bijna leeg blad als Facturen juist
   slordiger in plaats van voller. Dezelfde maat voor alle vier, anders
   springt de inhoud als je van blad wisselt.

   Ontwerpen, Klanten, Verkoop en Deellinks zijn lijsten die de breedte vullen
   en dragen deze klasse niet. Onder de 1000 px is de werkruimte zelf smaller
   dan 760, dus daar verandert deze regel niets. */
#ovwerk.smal > #ovhead,
#ovwerk.smal > #ovtabelkop,
#ovwerk.smal > #ovlijst,
#ovwerk.smal > #ovpag,
#ovwerk.smal > #ovvoet{
  width:100%; max-width:760px; margin-left:auto; margin-right:auto;
}

/* de kop: titel links, telling eronder, knoppen rechts */
#overzicht #ovhead{ align-items:flex-start; gap:14px; margin:0; }
#overzicht #ovkop{ font-size:24px; font-weight:600; letter-spacing:-.02em; color:var(--ov-inkt); }
#overzicht #ovhead .ovtel{
  margin:5px 0 0; font-size:var(--tekst-l); color:var(--ov-zacht);
}
#overzicht #ovhead .ovtel:empty{ display:none; }

/* de balk met zoeken, sorteren en de weergaveknoppen */
#overzicht #ovbar{ gap:8px; margin:0; }
#overzicht .ovzoekwrap{
  background:var(--ov-vlak); border:1px solid var(--ov-lijn); border-radius:var(--rond-m); height:36px;
  flex:1 1 220px; max-width:300px;
}
#overzicht .ovzoekwrap .ovzoekic{ color:var(--ov-zacht); }
#overzicht #ovzoek{ color:var(--ov-inkt); font-size:var(--tekst-l); }
#overzicht #ovzoek::placeholder{ color:var(--ov-stiller); }
#overzicht #ovweergave{
  background:var(--ov-vlak); border:1px solid var(--ov-lijn); border-radius:var(--rond-m);
}
#overzicht #ovweergave button{ width:34px; height:34px; color:var(--ov-zacht); }
#overzicht #ovweergave button+button{ border-left:1px solid var(--ov-lijn); }
#overzicht #ovweergave button.aan{ background:var(--ov-aan); color:var(--ov-inkt); }

/* de keuzeknoppen (sorteren, status) horen bij de balk en zien er hetzelfde
   uit als het zoekveld: wit vlak, dunne rand, zelfde hoogte */
#overzicht .ovkies{
  height:36px; display:inline-flex; align-items:center; gap:7px; padding:0 12px;
  background:var(--ov-vlak); border:1px solid var(--ov-lijn); border-radius:var(--rond-m);
  font:inherit; font-size:var(--tekst-l); color:var(--ov-inkt); cursor:pointer;
}
#overzicht .ovkies:hover{ border-color:var(--ov-lijn2); }
/* Een element met een eigen display-regel trekt zich niets aan van het
   hidden-attribuut: de regel van de auteur wint van die van de browser.
   Deze twee worden met hidden weggezet op het blad Deellinks, dus hier
   staat het er met zoveel woorden bij. */
#overzicht .ovkies[hidden],
#overzicht #ovbar[hidden],
#overzicht #ovweergave[hidden]{ display:none; }
#overzicht .ovkies:focus-visible{ outline:2px solid var(--ov-accent); outline-offset:1px; }
#overzicht .ovkies .ovchev{ color:var(--ov-stiller); flex:none; }
#overzicht .ovkies.aan{ border-color:var(--ov-inkt); }

/* de oude tekstknop Archief zit nu als rij in de kolom links */
#overzicht #ovarchknop{ display:none; }

/* De oude klantbalk boven de lijst is vervallen: de klant heeft een eigen
   pagina. Het element blijft in de DOM omdat index.html ongemoeid blijft. */
#overzicht #ovmapdetail{ display:none; }

/* ---------- restanten van de oude klantenbalk ---------- */
#overzicht #ovmapdetail{
  background:var(--ov-vlak); border:1px solid var(--ov-lijn); border-radius:var(--rond-m);
  box-shadow:none; padding:15px 17px;
}
#overzicht #ovmapdetail h2{ font-size:var(--tekst-3xl); font-weight:600; letter-spacing:-.01em; }
#overzicht #ovmapdetail .klantregel{ color:var(--ov-zacht); }
#overzicht #ovmapdetail .mini,
#overzicht #ovmapdetail .fotoadd{
  border-radius:var(--rond-m); border-color:var(--ov-lijn); background:var(--ov-vlak); color:var(--ov-inkt);
}
#overzicht #ovmapdetail .mini.rood{ color:var(--ov-rood); border-color:rgba(180,35,24,.35); }
#overzicht #ovmapdetail .huidig{ border-top-color:var(--ov-lijn); }
#overzicht #ovmapdetail .huidig .oog{ color:var(--ov-zacht); }
#overzicht #ovmapdetail .foto{ border-radius:var(--rond-m); border-color:var(--ov-lijn); }

/* ---------- de lijst ---------- */
#overzicht .ovladen{ margin:0; color:var(--ov-zacht); }

#overzicht #ovlijst.lijst{
  background:none; border:0; border-radius:0; overflow:visible;
  display:flex; flex-direction:column; gap:7px;
}
/* Zeven kolommen voor zeven kinderen: beeld, naam, status, prijs, wanneer, en
   de twee knoppen. Ze staan in de HTML in een andere volgorde (de datum komt
   daar voor de prijs en de status); `order` hieronder zet ze op hun plek
   zonder dat de JS de rij anders hoeft op te bouwen. Alles zonder eigen order
   valt achteraan in plaats van vooraan. */
#overzicht .ovrow.ontwerp{
  display:grid; align-items:center; gap:14px;
  grid-template-columns:104px minmax(0,1fr) 116px 96px 124px 28px 28px;
  padding:9px 13px; border:1px solid var(--ov-lijn); border-bottom:1px solid var(--ov-lijn);
  border-radius:var(--rond-m); background:var(--ov-vlak);
  transition:border-color .14s ease, box-shadow .14s ease;
}
#overzicht .ovrow.ontwerp > *{ order:8; }
#overzicht .ovrow.ontwerp > .ovthumb{ order:1; }
#overzicht .ovrow.ontwerp > .ovwie{ order:2; }
#overzicht .ovrow.ontwerp > .ovnaam{ order:2; }
#overzicht .ovrow.ontwerp > .ovstatus{ order:3; }
#overzicht .ovrow.ontwerp > .ovprijs{ order:4; }
#overzicht .ovrow.ontwerp > .ovdt{ order:5; }
#overzicht .ovrow.ontwerp > .ovster{ order:6; }
#overzicht .ovrow.ontwerp > .ovkebab{ order:7; }
#overzicht .ovrow.ontwerp:last-child{ border-bottom:1px solid var(--ov-lijn); }
#overzicht .ovrow.ontwerp:hover{
  background:var(--ov-vlak); border-color:var(--ov-lijn2); box-shadow:var(--schaduw-2);
}
#overzicht .ovrow.ontwerp .ovthumb{
  width:104px; height:78px; border-radius:var(--rond-s); background:var(--ov-vlak2);
}
/* De naamkolom draagt twee regels: het ontwerp met zijn potlood, en van wie
   het is. De klantregel krijgt de volle breedte en valt daarmee vanzelf op
   een tweede regel. */
#overzicht .ovrow .ovwie{
  min-width:0; display:flex; flex-wrap:wrap; align-items:center; column-gap:6px;
}
#overzicht .ovrow .ovnaam{
  flex:0 1 auto; min-width:0; width:auto; display:block;
  /* De naam is een knop. Zijn reset stond in stijl.css onder #ovlijst.lijst en
     gold niet meer zodra dezelfde rij ook op de klantpagina en het blad
     Verkoop kwam te staan: daar kreeg hij ineens de rand van een gewone knop. */
  background:none; border:0; padding:0; text-align:left; cursor:pointer; font:inherit;
  font-size:var(--tekst-xl); font-weight:600; letter-spacing:-.01em; color:var(--ov-inkt);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#overzicht .ovrow .ovnaam:focus-visible{ outline:2px solid var(--ov-accent); outline-offset:2px; border-radius:var(--rond-s); }
/* een naam die de app zelf heeft bedacht hoort er anders uit te zien dan een
   naam die iemand heeft getypt */
#overzicht .ovnaam.naamloos{ font-weight:500; color:var(--ov-zacht); }
#overzicht .ovpen{
  flex:none; padding:3px; line-height:0; border:0; background:none; border-radius:var(--rond-s);
  color:var(--ov-stil); cursor:pointer; opacity:0; transition:opacity .12s ease;
}
#overzicht .ovrow:hover .ovpen,
#overzicht .ovpen:focus-visible{ opacity:1; }
#overzicht .ovpen:hover{ background:var(--ov-vlak2); color:var(--ov-inkt); }
#overzicht .ovrow .ovklant{
  flex:0 0 100%; margin:3px 0 0; font-size:var(--tekst-m); color:var(--ov-zacht);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#overzicht .ovcard .ovklant{
  font-size:var(--tekst-m); color:var(--ov-zacht); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* de kolomkop: zelfde raster als een rij, zodat de labels boven hun kolom
   staan en niet ernaast */
#ovtabelkop{
  display:grid; align-items:center; gap:14px;
  grid-template-columns:104px minmax(0,1fr) 116px 96px 124px 28px 28px;
  padding:0 13px 2px;
  font:500 10.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ov-zacht);
}
#ovtabelkop[hidden]{ display:none; }
#ovtabelkop .rechts{ text-align:right; }
#overzicht .ovrow .ovdt{
  width:auto; font:400 12px/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--ov-zacht); font-variant-numeric:tabular-nums;
}
#overzicht .ovrow .ovprijs{
  width:auto; text-align:right;
  font:600 14px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--ov-inkt); font-variant-numeric:tabular-nums;
}
#overzicht .ovrow .ovstatus{ width:auto; }
#overzicht .ovster{ color:var(--ov-stil); }
#overzicht .ovster.aan{ color:var(--ov-accent); }
#overzicht .ovkebab{ color:var(--ov-stil); }
#overzicht .ovkebab:hover{ background:var(--ov-vlak2); color:var(--ov-inkt); }

/* De twee acties horen bij elkaar, dus de gap van veertien tussen hun kolommen
   wordt hier weer ingehaald: anders lezen ze als twee losse dingen. */
#overzicht .ovrow.ontwerp > .ovster{ justify-self:center; margin-right:-7px; }
#overzicht .ovrow.ontwerp > .ovkebab{ justify-self:center; margin-left:-7px; }

/* de statuspillen: vierkanter en koeler dan de papieren versie */
#overzicht .ovpil{
  border-radius:var(--rond-s); font:600 11.5px/1.5 system-ui,-apple-system,sans-serif;
  padding:3px 9px;
}
#overzicht .ovpil.concept{ background:var(--ov-vlak2); color:var(--ov-zacht); }
#overzicht .ovpil.gedeeld{ background:var(--ov-pilblauwv); color:var(--ov-pilblauwt); }
#overzicht .ovpil.goedgekeurd{ background:var(--ov-pilgroenv); color:var(--ov-pilgroent); }
#overzicht .ovpil.besteld{ background:var(--ov-piloranjev); color:var(--ov-piloranjet); }

/* ---------- de tegels ---------- */
#overzicht #ovlijst.raster{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
#overzicht .ovcard{
  background:var(--ov-vlak); border:1px solid var(--ov-lijn); border-radius:var(--rond-l); box-shadow:var(--schaduw-1);
  transition:box-shadow .16s ease, transform .16s ease;
}
#overzicht .ovcard:hover{
  box-shadow:var(--schaduw-1);
  transform:translateY(-2px);
}
#overzicht .ovcard .ovthumb{ background:var(--ov-vlak2); }
#overzicht .ovcard .ovcardft{ border-top:0; padding:12px 14px 14px; gap:3px; }
#overzicht .ovcard .ovnaam{ font-size:var(--tekst-xl); color:var(--ov-inkt); }
#overzicht .ovcard .ovsub{
  font:400 12.5px/1.4 system-ui,-apple-system,sans-serif; color:var(--ov-zacht);
}
#overzicht .ovcard .ovhoek{
  background:rgba(255,255,255,.92); border-radius:var(--rond-m);
  box-shadow:var(--schaduw-1); top:8px; right:8px;
}
#overzicht .ovcard .ovster{ color:var(--ov-stil); }
#overzicht .ovcard .ovster.aan{ color:var(--ov-accent); }

/* ---------- paginering, voet, uitweg ---------- */
#overzicht #ovpag button{
  background:var(--ov-vlak); border:1px solid var(--ov-lijn); border-radius:var(--rond-m); color:var(--ov-inkt); height:34px;
}
#overzicht #ovpag button.aan{ background:var(--ov-knop); border-color:var(--ov-knop); color:var(--ov-knoptekst); }
#overzicht .ovvoet{ margin:0; color:var(--ov-zacht); }
#overzicht .ovuitweg{ margin:0; color:var(--ov-inkt); align-self:flex-start; }
#overzicht .ovleeg{ color:var(--ov-zacht); }
/* Een leeg blad dat de breedte vult (Ontwerpen zonder ontwerpen, Klanten
   zonder klanten, Verkoop met een leeg tabblad) had alleen deze zin staan.
   Hij stond al gecentreerd (stijl.css), maar liep over de volle 1634 px, en
   een regel van 180 tekens leest niet. Een leesbare regellengte, midden in
   het vlak dat hij leeg meldt. De lege meldingen BINNEN de pagina van een
   klant staan in hun eigen sectie en blijven zoals ze zijn. */
#overzicht #ovlijst > .ovleeg,
#overzicht .ovtabinhoud > .ovleeg{ max-width:60ch; margin-left:auto; margin-right:auto; }
/* Draagt de lege melding zelf de knop die de volgende stap is, dan staat hij
   eronder in plaats van in een eigen rij bovenaan. Zie renderKlanten. */
#overzicht .ovleeg .ovleegdoe{ margin:14px 0 0; }

/* het meldingenscherm als de ontwerpen niet opgehaald konden worden */
#overzicht .ovmis h2{ color:var(--ov-inkt); }
#overzicht .ovmis p{ color:var(--ov-zacht); }
#overzicht .ovmisknop{
  background:var(--ov-knop); color:var(--ov-knoptekst); border-radius:var(--rond-m); box-shadow:none; padding:10px 18px;
}
#overzicht .ovmisknop:hover{ background:var(--ov-knop2); box-shadow:none; }

/* ---------- het menu met drie puntjes en de vensters ---------- */
#ovpop{
  background:var(--ov-vlak); border:1px solid var(--ov-lijn); border-radius:var(--rond-m);
  box-shadow:var(--schaduw-2);
}
#ovpop button{ border-radius:var(--rond-s); color:var(--ov-inkt); }
#ovpop button:hover{ background:var(--ov-vlak2); }
/* het keuzemenu van sorteren en filteren: de gekozen regel draagt een vinkje
   in de vorm van een gevulde stip, zodat je zonder te lezen ziet waar je staat */
#ovpop.kies{ min-width:168px; }
#ovpop.kies button{ padding-left:28px; position:relative; }
#ovpop.kies button.aan{ font-weight:600; }
#ovpop.kies button.aan::before{
  content:""; position:absolute; left:11px; top:50%; margin-top:-3px;
  width:6px; height:6px; border-radius:50%; background:var(--ov-accent);
}
#ovpop .streep{ background:var(--ov-lijn); }

#ovform .box{ background:var(--ov-vlak); border-radius:var(--rond-l); box-shadow:var(--schaduw-4); color:var(--ov-inkt); }
#ovform .box h2{ border-bottom-color:var(--ov-lijn); font-weight:600; }
#ovform input,#ovform textarea,#ovform select{
  background:var(--ov-vlak); border:1px solid var(--ov-lijn); border-radius:var(--rond-m); color:var(--ov-inkt);
}
#ovform input:focus,#ovform textarea:focus,#ovform select:focus{ outline:2px solid var(--ov-accent); outline-offset:-1px; }
#ovform label{ color:var(--ov-zacht); }
#ovform .foot button{ border:1px solid var(--ov-lijn); border-radius:var(--rond-m); background:var(--ov-vlak); color:var(--ov-inkt); }
#ovform .foot button.dark{ background:var(--ov-knop); border-color:var(--ov-knop); color:var(--ov-knoptekst); }
#ovform .mini{ border:1px solid var(--ov-lijn); border-radius:var(--rond-m); background:var(--ov-vlak); color:var(--ov-inkt); }
#ovform .deellink{ border-bottom-color:var(--ov-lijn); }
#ovform .deelkop{ color:var(--ov-zacht); }

/* ---------- smal scherm ----------
   Onder de 1000 px past een vaste kolom naast een lijst niet meer. De kolom
   wordt dan een horizontale balk bovenaan met alleen het merk, de knop en
   het account; de groepen eronder zouden er als een tweede menubalk bij
   hangen en dat leest niet. De filters blijven bereikbaar via de balk in de
   werkruimte zelf. */
@media (max-width:1000px){
  #overzicht{ overflow:auto; }
  #ovwrap{ grid-template-columns:minmax(0,1fr); height:auto; min-height:100%; }
  /* De kolom wordt een balk met het merk, de knop met drie strepen en Nieuw
     ontwerp. Een balk die zijwaarts schuift zou de helft van de bladen buiten
     beeld zetten; hier klapt het hele menu uit, met zijn koppen erbij, zodat
     je in een oogopslag ziet waar je heen kunt. */
  #ovnav{
    flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px; padding:10px 13px;
    position:sticky; top:0; z-index:3; overflow:visible;
  }
  #ovnav .ovmerk{ flex:none; padding:0; }
  #ovnav .ovmenuknop{
    display:grid; place-items:center; order:-1; flex:none;
    width:38px; height:38px; padding:0; border:0; border-radius:var(--rond-m);
    background:rgba(255,255,255,.08); color:#fff; cursor:pointer;
  }
  #ovnav .ovmenuknop:hover{ background:rgba(255,255,255,.16); }
  #ovnav .ovmenuknop:focus-visible{ outline:2px solid var(--ov-accent); outline-offset:2px; }
  #overzicht #ovnav .ovnieuw{ width:auto; flex:none; margin-left:auto; padding:0 16px; }
  #ovnav .ovgroep{ display:none; flex-basis:100%; }
  #ovnav.open{ padding-bottom:14px; }
  #ovnav.open .ovgroep{ display:flex; }
  #overzicht #ovnav #ovacct{ margin:0; flex-basis:100%; display:none; }
  #ovnav.open #ovacct{ display:block; }
  #ovwerk{ overflow:visible; padding:16px 14px 24px; }
  #overzicht .ovrow.ontwerp{ grid-template-columns:78px minmax(0,1fr) auto 28px 28px; }
  #overzicht .ovrow.ontwerp .ovthumb{ width:78px; height:59px; }
  #overzicht .ovrow .ovdt,
  #overzicht .ovrow .ovprijs{ display:none; }
  #ovtabelkop{ display:none; }
  #overzicht #ovlijst.raster{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px){
  #overzicht #ovlijst.raster{ grid-template-columns:minmax(0,1fr); }
  #overzicht .ovrow .ovstatus{ display:none; }
  /* De balk liep op een telefoon buiten beeld.
     #ovbar wikkelt al, maar de rechterhelft (klant, status, sorteren en de
     twee weergaveknoppen) stond als EEN rij zonder wikkeling: op 390 px begon
     de weergaveknop op 391 en was hij dus niet aan te tikken, en de rij
     "Alle klanten / Alle statussen" liep aan dezelfde kant door tot buiten
     beeld. Nu wikkelt die helft mee en staat alles binnen het scherm.
     De knoppen zelf blijven allemaal staan: op een smal scherm is een raster
     net zo bruikbaar als een lijst, dus er valt hier iets te kiezen. */
  #overzicht .ovbarrrecht{ flex-wrap:wrap; row-gap:8px; }
  #overzicht #ovbar{ align-items:flex-start; row-gap:8px; }
}

/* ============================================================
   Het blad Deellinks

   Dezelfde rij-opbouw als de ontwerpenlijst, maar met eigen kolommen:
   beeld, ontwerp en klant, soort, wanneer gemaakt, hoe lang nog geldig,
   en de twee acties. Wat er bewust NIET staat is een kolom "geopend door
   de klant": dat wordt nergens geteld. Zodra de server dat bijhoudt hoort
   hij hier, tussen Geldig en de acties.
   ============================================================ */
#overzicht #ovlijst.links,
#overzicht .ovtabinhoud.links{ display:flex; flex-direction:column; gap:7px; }
/* De linkrij draagt zijn eigen kolommen, los van het blad waar hij in hangt:
   hij staat op het blad Verkoop, op de pagina van een klant, en stond eerst
   in een eigen lijst. Een selector die aan die plek hing brak zodra hij
   verhuisde. */
#overzicht .ovrow.link{
  display:grid; align-items:center; gap:14px;
  grid-template-columns:62px minmax(0,1fr) 104px 122px 130px 70px;
  padding:8px 13px; border:1px solid var(--ov-lijn); border-radius:var(--rond-m); background:var(--ov-vlak);
}
#overzicht .ovrow.link > *{ order:8; }
#overzicht .ovrow.link > .ovthumb{ order:1; width:62px; height:47px; border-radius:var(--rond-s); overflow:hidden; background:var(--ov-vlak2); }
#overzicht .ovrow.link > .ovwie{ order:2; }
#overzicht .ovrow.link > .ovsoort{ order:3; }
#overzicht .ovrow.link > .ovdt{ order:4; }
#overzicht .ovrow.link > .ovlinkacties{ order:6; }
#overzicht .ovrow.link .ovnaam[disabled]{ cursor:default; }
#overzicht .ovklant.mono{
  font:400 11.5px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--ov-stiller);
}
/* een verlopen link blijft leesbaar maar vraagt geen aandacht meer */
#overzicht .ovrow.link.verlopen{ background:var(--ov-vlak3); }
#overzicht .ovrow.link.verlopen .ovthumb{ opacity:.55; }
#overzicht .ovthumb.leegvak{
  display:grid; place-items:center; background:var(--ov-vlak2); color:var(--ov-stil);
  border-radius:var(--rond-s); width:62px; height:47px;
}
#overzicht .ovlinkacties{ display:flex; align-items:center; gap:2px; justify-content:flex-end; }
#overzicht .ovikn{
  background:none; border:0; padding:5px; line-height:0; border-radius:var(--rond-s);
  color:var(--ov-stil); cursor:pointer;
}
#overzicht .ovikn:hover{ background:var(--ov-vlak2); color:var(--ov-inkt); }
#overzicht .ovikn:focus-visible{ outline:2px solid var(--ov-accent); outline-offset:1px; }
#overzicht .ovdeelkop{
  margin:16px 0 2px; padding:0 13px;
  font:500 10.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ov-zacht);
}
#ovtabelkop.links{ grid-template-columns:62px minmax(0,1fr) 104px 122px 130px 70px; }

@media (max-width:1000px){
  #overzicht .ovrow.link{ grid-template-columns:62px minmax(0,1fr) auto; }
  #overzicht .ovrow.link > .ovsoort,
  #overzicht .ovrow.link > .ovdt{ display:none; }
}

/* ============================================================
   Het blad Instellingen

   Een pagina met blokken in dezelfde taal als de rest: witte rijen op de
   blauwdruk, label links, bediening rechts. Een instelling die nog niet
   bewaard kan worden staat er gedimd bij met de reden eronder, en niet
   als invulveld: een veld dat je kunt invullen maar dat niets bewaart is
   erger dan een veld dat er nog niet is.
   ============================================================ */
/* De breedte van dit blad staat bij `#ovwerk.smal` hierboven: Instellingen,
   Team en Facturen delen die maat met de pagina van een klant, en hij geldt
   voor de titel erboven net zo goed als voor de blokken. */
#overzicht #ovlijst.inst{
  display:flex; flex-direction:column; gap:22px;
  background:none; border:0;
}
.ovinstblok .kop{ margin:0 0 9px; padding:0 2px; }
.ovinstblok .kop h2{
  margin:0; font-size:var(--tekst-2xl); font-weight:600; letter-spacing:-.01em; color:var(--ov-inkt);
}
.ovinstblok .kop p{
  margin:4px 0 0; font-size:var(--tekst-l); line-height:1.5; color:var(--ov-zacht); max-width:68ch;
}
.ovinstblok .rijen{
  background:var(--ov-vlak); border:1px solid var(--ov-lijn); border-radius:var(--rond-m); overflow:hidden;
}
.ovinstrij{
  display:flex; align-items:center; gap:18px; justify-content:space-between;
  padding:13px 16px; border-bottom:1px solid var(--ov-lijn);
}
.ovinstrij:last-child{ border-bottom:0; }
.ovinstrij .tk{ min-width:0; display:block; }
.ovinstrij .nm{
  display:block; font-size:var(--tekst-xl); font-weight:500; color:var(--ov-inkt);
}
.ovinstrij .ui{
  display:block; margin:3px 0 0; font-size:var(--tekst-m); line-height:1.45; color:var(--ov-zacht); max-width:56ch;
}
.ovinstrij .nogmerk{
  display:inline-block; margin:6px 0 0; padding:2px 8px; border-radius:var(--rond-vol);
  background:var(--ov-vlak2); color:var(--ov-stiller);
  font:500 11px/1.5 system-ui,-apple-system,sans-serif;
}
.ovinstrij .bd{ flex:none; display:flex; align-items:center; gap:8px; }
.ovinstrij .waarde{
  font:400 13px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--ov-zacht); text-align:right;
}
/* een regel die nog niets bewaart vraagt geen aandacht, maar blijft leesbaar */
.ovinstrij.nog .nm{ color:var(--ov-zacht); }
.ovinstrij.nog .waarde{ color:var(--ov-stiller); }

.ovinstknop{
  height:34px; padding:0 14px; border-radius:var(--rond-m); border:1px solid var(--ov-lijn);
  background:var(--ov-vlak); font:inherit; font-size:var(--tekst-l); font-weight:500;
  color:var(--ov-inkt); cursor:pointer; white-space:nowrap;
}
.ovinstknop:hover{ border-color:var(--ov-lijn2); }
.ovinstknop:focus-visible{ outline:2px solid var(--ov-accent); outline-offset:1px; }
.ovinstknop.aan{ background:var(--ov-aan); border-color:var(--ov-lijn2); font-weight:600; }
.ovinstknop.rood{ color:var(--ov-rood); border-color:var(--ov-rood); }
/* wrap, want de taalrij draagt een knop PER taal en die knoppen dragen hun
   eigen naam: Nederlands, English, Français, en daar komt er een keer Deutsch
   bij. Op 390 px past die rij niet meer op een regel, en zonder wrap duwt hij
   de rij open in plaats van af te breken. */
.ovinstgroep{ display:inline-flex; flex-wrap:wrap; gap:6px; }
.logovak{ display:inline-flex; align-items:center; gap:10px; }
.logovak img{
  height:30px; width:auto; max-width:120px; object-fit:contain; display:block;
  border-radius:var(--rond-s); background:var(--ov-vlak2);
}

/* de schakelaar */
.ovschakel{
  position:relative; width:42px; height:24px; flex:none; padding:0;
  border:1px solid var(--ov-lijn); border-radius:var(--rond-vol); background:var(--ov-vlak2);
  cursor:pointer; transition:background .16s ease, border-color .16s ease;
}
/* Het bolletje heette .knop, en dat is in stijl.css al de papieren knop van
   het oude overzicht (#overzicht .knop). Die regel won op specificiteit en
   maakte er een hoog wit staafje van dat buiten de schakelaar stak. Alle
   nieuwe namen hier beginnen daarom met ov. */
.ovschakel .ovbol{
  position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:var(--ov-vlak); box-shadow:var(--schaduw-1);
  transition:transform .16s ease;
}
.ovschakel.aan{ background:var(--ov-accent); border-color:var(--ov-accent); }
.ovschakel.aan .ovbol{ transform:translateX(18px); background:#fff; }
.ovschakel:focus-visible{ outline:2px solid var(--ov-accent); outline-offset:2px; }

/* ---------- een persoon op het account (blad Team) ----------
   Dezelfde rij als hierboven, maar met een vakje links en twee regels tekst:
   wie het is, en eronder zijn adres als dat iets toevoegt. De rol en of hij nu
   werkt staan rechts, tegen de andere kant van de kaart, zodat de breedte
   gebruikt wordt in plaats van dat alles linksboven op elkaar staat. Iets meer
   lucht dan een gewone rij: hier staan twee regels onder elkaar. */
.ovinstrij.ovteamrij{ padding:15px 16px; }
.ovteamrij .tk{ display:flex; align-items:center; gap:12px; min-width:0; }
.ovteamrij .wie{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.ovteamrij .wie .nm{ font-size:var(--tekst-xl); font-weight:600; letter-spacing:-.01em; }
/* Een lang adres breekt af op de tekst zelf in plaats van dat er een stuk
   onder de rand verdwijnt; op 390 px is dat het verschil tussen leesbaar en
   half afgekapt. */
.ovteamrij .wie .ui{ margin:0; max-width:none; overflow-wrap:anywhere; }
.ovteamrij .bd{ gap:10px; }
/* "Nu actief" stond in de monospace van een datumkolom. Status wordt in deze
   omgeving in de gewone letter gezet (de pil ernaast net zo goed), dus dat is
   het hier ook. */
#overzicht .ovteamrij .ovstaat{ font-size:var(--tekst-m); color:var(--ov-zacht); white-space:nowrap; }

/* De rolpil. Drie standen, en ze lenen de pilkleuren die er al zijn zodat de
   donkere stand meteen klopt: eigenaar het oranje van het merk, beheerder het
   groen, en een lid het neutrale vlak dat ook onder `concept` ligt. */
#overzicht .ovpil.roleigenaar{ background:var(--ov-piloranjev); color:var(--ov-piloranjet); }
#overzicht .ovpil.rolbeheerder{ background:var(--ov-pilgroenv); color:var(--ov-pilgroent); }
#overzicht .ovpil.rollid{ background:var(--ov-vlak2); color:var(--ov-zacht); }

@media (max-width:620px){
  .ovinstrij{ flex-direction:column; align-items:flex-start; gap:10px; }
  .ovinstrij .bd{ width:100%; justify-content:flex-start; }
  .ovinstrij .waarde{ text-align:left; }
  /* gestapeld blijft het vakje naast de naam staan, en de rol zakt eronder */
  .ovinstrij.ovteamrij .bd{ padding-left:50px; }
}

/* ============================================================
   De bladen Klanten, Verkoop, Team en Facturen
   ============================================================ */

/* ---- de klantenlijst ---- */
#overzicht #ovlijst.klanten{ display:flex; flex-direction:column; gap:7px; background:none; border:0; }
#overzicht #ovlijst.klanten .ovrow.klant,
#ovtabelkop.klanten{
  grid-template-columns:44px minmax(0,1fr) 116px 112px 116px 104px;
}
#overzicht #ovlijst.klanten .ovrow.klant{ padding:11px 13px; }
#overzicht .ovklantvak{
  width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--ov-vlak2); color:var(--ov-zacht);
  font:600 15px/1 system-ui,-apple-system,sans-serif;
}
#overzicht .ovklantvak.leeg{ color:var(--ov-stiller); }
#overzicht #ovlijst.klanten .ovnaam{ font-size:var(--tekst-xl); font-weight:600; }

/* ---- de pagina van een klant ---- */
/* Ook hier komt de breedte van `#ovwerk.smal`. Stond op 900, en dat was een
   eigen maat: bij het wisselen tussen een klant en Instellingen sprong de
   kolom dan 140 px breder. */
#overzicht #ovlijst.klantpagina{
  display:flex; flex-direction:column; gap:20px; background:none; border:0;
}
.ovksectie .kop{ display:flex; align-items:center; gap:9px; margin:0 0 9px; padding:0 2px; }
.ovksectie .kop h2{ margin:0; font-size:var(--tekst-2xl); font-weight:600; letter-spacing:-.01em; color:var(--ov-inkt); }
.ovksectie .kop .tel{
  font:500 11.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--ov-zacht); background:var(--ov-vlak2); padding:3px 8px; border-radius:var(--rond-vol);
}
.ovksectie .kop .som{
  margin-left:auto; font:600 13.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--ov-inkt); font-variant-numeric:tabular-nums;
}
.ovksectie > .ui{ margin:0 0 9px; padding:0 2px; font-size:var(--tekst-m); color:var(--ov-zacht); }
.ovksectie .inhoud{ display:flex; flex-direction:column; gap:7px; }
.ovksectie .inhoud.gegevens{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0;
  background:var(--ov-vlak); border:1px solid var(--ov-lijn); border-radius:var(--rond-m); overflow:hidden;
}
.ovksectie .gegevens .veld{ padding:12px 15px; border-right:1px solid var(--ov-lijn); }
.ovksectie .gegevens .veld .lb{
  display:block; font:500 10.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ov-zacht);
}
.ovksectie .gegevens .veld .wd{ display:block; margin:6px 0 0; font-size:var(--tekst-xl); color:var(--ov-inkt); }
.ovksectie .gegevens .veld.leeg .wd{ color:var(--ov-stiller); }
.ovkacties{ display:flex; gap:8px; margin:10px 0 0; flex-wrap:wrap; }
.ovkacties.boven{ margin:0 0 4px; }
.ovksectie .inhoud.fotos{ display:flex; flex-direction:row; flex-wrap:wrap; gap:10px; }
.ovksectie .fotos .foto{
  position:relative; width:132px; height:99px; border-radius:var(--rond-m); overflow:hidden;
  border:1px solid var(--ov-lijn); background:var(--ov-vlak2);
}
.ovksectie .fotos .foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.ovksectie .fotos .foto .weg{
  position:absolute; top:5px; right:5px; width:22px; height:22px; border-radius:50%; border:0;
  background:rgba(20,22,26,.65); color:#fff; font-size:var(--tekst-xl); line-height:1; cursor:pointer;
  display:grid; place-items:center;
}
.ovksectie .fotos .fotoadd{
  width:132px; height:99px; border:1px dashed var(--ov-lijn2); border-radius:var(--rond-m);
  background:none; color:var(--ov-zacht); font:inherit; font-size:var(--tekst-m); cursor:pointer;
}
.ovksectie .fotos .fotoadd:hover{ border-color:var(--ov-accent); color:var(--ov-inkt); }
  display:grid; align-items:center; gap:14px; padding:9px 13px;
  grid-template-columns:104px minmax(0,1fr) 116px 96px 124px 28px 28px;
  border:1px solid var(--ov-lijn); border-radius:var(--rond-m); background:var(--ov-vlak);
}
.ovksectie .inhoud > .ovrow > *{ order:8; }
.ovksectie .inhoud > .ovrow > .ovthumb{ order:1; width:104px; height:78px; border-radius:var(--rond-s); overflow:hidden; background:var(--ov-vlak2); }
.ovksectie .inhoud > .ovrow > .ovwie{ order:2; }
.ovksectie .inhoud > .ovrow > .ovstatus,
.ovksectie .inhoud > .ovrow > .ovsoort{ order:3; }
.ovksectie .inhoud > .ovrow > .ovprijs{ order:4; }
.ovksectie .inhoud > .ovrow > .ovdt{ order:5; }
.ovksectie .inhoud > .ovrow > .ovster{ order:6; justify-self:center; margin-right:-7px; }
.ovksectie .inhoud > .ovrow > .ovkebab{ order:7; justify-self:center; margin-left:-7px; }
.ovksectie .inhoud > .ovrow > .ovlinkacties{ order:6; }

/* ---- de tabbladen van Verkoop ---- */
#overzicht #ovlijst.verkoop{ display:flex; flex-direction:column; gap:16px; background:none; border:0; }
.ovtabs{ display:flex; gap:4px; border-bottom:1px solid var(--ov-lijn); padding:0 2px; }
.ovtab{
  display:inline-flex; align-items:center; gap:7px; padding:9px 13px;
  background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px;
  font:inherit; font-size:var(--tekst-l); font-weight:500; color:var(--ov-zacht); cursor:pointer;
}
.ovtab:hover{ color:var(--ov-inkt); }
.ovtab.aan{ color:var(--ov-inkt); font-weight:600; border-bottom-color:var(--ov-accent); }
.ovtab .tel{
  font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--ov-vlak2); color:var(--ov-zacht); padding:3px 7px; border-radius:var(--rond-vol);
}
.ovtab.aan .tel{ background:var(--ov-accent); color:#fff; }
.ovtabinhoud{ display:flex; flex-direction:column; gap:18px; }

@media (max-width:1000px){
  #overzicht #ovlijst.klanten .ovrow.klant{ grid-template-columns:44px minmax(0,1fr) auto; }
  #overzicht #ovlijst.klanten .ovrow.klant > .ovdt:nth-of-type(n+2),
  #overzicht #ovlijst.klanten .ovrow.klant > .ovprijs{ display:none; }
}

/* ---------- raakdoelen op een telefoon ----------
   Dezelfde ondergrens als in planner/stijl.css: onder 600 px is elke knop
   minstens 44 bij 44, de maat die Apple en Google allebei aanhouden. Gemeten
   met review/schermen4/meet-raakdoelen.mjs op 390 px: op deze pagina waren
   12 van de 14 knoppen te klein, van de weergaveknoppen (34) tot het sterretje
   en de kebab op een kaart (26) en het zoekveld (21 hoog).
   Boven 600 px verandert er niets: daar stuur je met een muis. */
@media (max-width:600px){
  #overzicht #ovnav .ovnieuw{ min-height:44px; }
  #ovnav .ovmenuknop{ min-width:44px; min-height:44px; }
  #overzicht #ovzoek{ min-height:44px; }
  #overzicht .ovkies{ min-height:44px; }
  #overzicht #ovweergave button{ width:44px; height:44px; }
  /* het sterretje en de kebab: op een kaart in de hoek van het beeldje, in de
     lijst als twee kolommen van 28 px. Allebei krijgen ze het raakvlak; het
     pictogram erin blijft even groot. */
  #overzicht .ovster,#overzicht .ovkebab{ min-width:44px; min-height:44px; }
  #overzicht .ovrow.ontwerp{ grid-template-columns:78px minmax(0,1fr) auto 44px 44px; }
}

/* ============================================================
   Het blad Producten

   De catalogus van de planner als overzicht (planner/overzicht.js,
   renderProducten). Links dezelfde categorieboom als de catalogus in de
   planner, rechts de producten als tegels of als lijst, met de knoppen
   van het derde niveau erboven. Alles op de kleuren van dit scherm, dus
   de donkere stand klopt vanzelf. De productfoto's staan op wit, net als
   in de planner: het zijn winkelfoto's met een witte achtergrond.
   ============================================================ */
:root{ --ov-pilroodv:#FBE4E1; --ov-pilroodt:#B42318; }
html.ovdonker{ --ov-pilroodv:#3A1C1A; --ov-pilroodt:#F29488; }

#overzicht #ovlijst.producten{ display:block; background:none; border:0; }
.ovpwrap{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:18px; align-items:start; }
.ovpinhoud{ min-width:0; }
.ovpinhoud > .ovleeg{ max-width:60ch; margin:0 auto; color:var(--ov-zacht); }

/* ---- de boom ---- */
.ovpboom{
  position:sticky; top:0; display:flex; flex-direction:column; gap:1px;
  padding:8px; max-height:calc(100vh - 150px); overflow-y:auto;
  background:var(--ov-vlak); border:1px solid var(--ov-lijn); border-radius:var(--rond-m);
}
.ovpcat{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  padding:6px 8px; border:0; border-radius:var(--rond-s); background:none;
  font:inherit; font-size:var(--tekst-l); color:var(--ov-inkt); cursor:pointer;
}
.ovpcat .lbl{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:6px; }
.ovpcat .n{
  flex:none; margin-left:auto; font:400 11.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--ov-zacht); font-variant-numeric:tabular-nums;
}
.ovpcat:hover{ background:var(--ov-vlak2); }
.ovpcat:focus-visible{ outline:2px solid var(--ov-accent); outline-offset:-2px; }
.ovpcat.aan{ background:var(--ov-aan); font-weight:600; }
.ovpcat.aan .n{ color:var(--ov-inkt); }
.ovpcat .pijl{ flex:none; color:var(--ov-stil); transition:transform .15s ease; }
.ovpcat[aria-expanded="true"] .pijl{ transform:rotate(90deg); }
.ovpcat.alle{ margin-bottom:6px; }
.ovpcat.sub{ padding:5px 8px 5px 26px; font-size:var(--tekst-m); color:var(--ov-zacht); }
.ovpcat.sub.aan{ color:var(--ov-inkt); }
.ovpcat.los{ font-size:var(--tekst-m); }

/* ---- het derde niveau, alles tegelijk, meer tonen ---- */
.ovpchips{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; }
.ovpchip{
  height:30px; display:inline-flex; align-items:center; gap:6px; padding:0 11px;
  border:1px solid var(--ov-lijn); border-radius:var(--rond-vol); background:var(--ov-vlak);
  font:inherit; font-size:var(--tekst-m); color:var(--ov-inkt); cursor:pointer;
}
.ovpchip .n{ font:400 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--ov-zacht); }
.ovpchip:hover{ border-color:var(--ov-lijn2); }
.ovpchip.aan{ background:var(--ov-knop); border-color:var(--ov-knop); color:var(--ov-knoptekst); }
.ovpchip.aan .n{ color:inherit; opacity:.7; }
.ovpbulk{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 14px; padding:9px 12px;
  background:var(--ov-vlak); border:1px solid var(--ov-lijn); border-radius:var(--rond-m);
}
.ovpbulk .tk{ margin-right:auto; font-size:var(--tekst-m); color:var(--ov-zacht); }
.ovpmeer{ display:flex; align-items:center; justify-content:center; gap:12px; margin:18px 0 4px; font-size:var(--tekst-m); color:var(--ov-zacht); }

/* ---- het label "Wordt herbouwd" ----
   Live is de standaard en draagt geen label; dit is de enige uitzondering
   die toch zichtbaar blijft (zie prodHerbouw in planner/overzicht.js). */
.ovpstaat{
  display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:var(--rond-s);
  font:600 11px/1.4 system-ui,-apple-system,sans-serif; white-space:nowrap;
}
.ovpstaat::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.ovpstaat.herbouw{ background:var(--ov-piloranjev); color:var(--ov-piloranjet); }
.ovpfamin{ font-size:var(--tekst-m); font-weight:600; color:var(--ov-pilgroent); }
.ovpfamuit{ font-size:var(--tekst-m); color:var(--ov-zacht); }

/* ---- Verborgen (bug 4, 30 september) ----
   Onder de lijst, apart: wat in de catalogus staat maar niet te kiezen is,
   met de reden als grijs label (de herbouw houdt zijn oranje label). Zie
   prodVerbHtml en prodReden in planner/overzicht.js. */
.ovpstaat.verborgen{ background:var(--ov-vlak2); color:var(--ov-zacht); border:1px solid var(--ov-lijn); }
.ovpverb{ margin:34px 0 0; padding:18px 0 0; border-top:1px solid var(--ov-lijn); }
.ovpverbkop{ margin:0 0 14px; }
.ovpverbkop h3{ display:flex; align-items:baseline; gap:8px; margin:0; font-size:var(--tekst-l); font-weight:600; color:var(--ov-inkt); }
.ovpverbkop h3 .n{ font:400 11.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--ov-zacht); }
.ovpverbkop p{ margin:4px 0 0; max-width:70ch; font-size:var(--tekst-m); color:var(--ov-zacht); }
.ovpverb .ovpkaart .pimg{ opacity:.72; }

/* ---- de tegels ---- */
.ovpgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(205px,1fr)); gap:14px; }
.ovpkaart{
  position:relative; display:flex; flex-direction:column; min-width:0; cursor:pointer;
  background:var(--ov-vlak); border:1px solid var(--ov-lijn); border-radius:var(--rond-l); overflow:hidden;
  transition:box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.ovpkaart:hover{ border-color:var(--ov-lijn2); box-shadow:var(--schaduw-1); transform:translateY(-2px); }
.ovpkaart:focus-visible{ outline:2px solid var(--ov-accent); outline-offset:2px; }
.ovpfoto{ position:relative; display:block; aspect-ratio:4/3; background:#fff; }
.ovpfoto .ovpstaat{ position:absolute; top:8px; left:8px; box-shadow:0 1px 2px rgba(0,0,0,.12); }
.ovpbeeld{ display:block; width:100%; height:100%; }
.ovpbeeld .pimg{ display:block; width:100%; height:100%; object-fit:contain; box-sizing:border-box; padding:10px; background:#fff; }
.ovpbeeld svg.pimg{ padding:22px; }
.ovpinfo{ flex:1 1 auto; display:flex; flex-direction:column; gap:3px; padding:11px 13px 13px; }
.ovpmerk{
  font:500 10.5px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ov-zacht);
}
.ovpnaam{ font-size:var(--tekst-m); font-weight:500; line-height:1.4; color:var(--ov-inkt); overflow-wrap:anywhere; }
.ovpprijs{
  margin-top:auto; padding-top:6px; font:600 14px/1.1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--ov-inkt); font-variant-numeric:tabular-nums;
}
.ovpzet{
  height:32px; padding:0 12px; border:1px solid var(--ov-lijn); border-radius:var(--rond-m); background:var(--ov-vlak);
  font:inherit; font-size:var(--tekst-m); font-weight:500; color:var(--ov-inkt); cursor:pointer; white-space:nowrap;
}
.ovpzet:hover{ border-color:var(--ov-lijn2); }
.ovpzet.in{ background:var(--ov-accent); border-color:var(--ov-accent); color:#fff; }
.ovpzet.in:hover{ background:var(--ov-accent2); border-color:var(--ov-accent2); }
.ovpzet:focus-visible{ outline:2px solid var(--ov-accent); outline-offset:1px; }
.ovpzet[disabled]{ opacity:.5; cursor:default; }
.ovpkaart > .ovpzet{ margin:0 13px 13px; }

/* ---- de lijst ---- */
.ovpkop,.ovprij{ display:grid; align-items:center; gap:14px; grid-template-columns:64px minmax(0,1fr) 200px 104px; }
.ovpkop.eigen,.ovprij.eigen{ grid-template-columns:64px minmax(0,1fr) 200px 104px 146px; }
.ovpkop{
  padding:0 13px 7px; font:500 10.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ov-zacht);
}
.ovpkop .rechts{ text-align:right; }
.ovplijst{ display:flex; flex-direction:column; gap:7px; }
.ovprij{
  padding:8px 13px; cursor:pointer; background:var(--ov-vlak); border:1px solid var(--ov-lijn); border-radius:var(--rond-m);
  transition:border-color .14s ease, box-shadow .14s ease;
}
.ovprij:hover{ border-color:var(--ov-lijn2); box-shadow:var(--schaduw-2); }
.ovprij:focus-visible{ outline:2px solid var(--ov-accent); outline-offset:1px; }
.ovpbeeld.klein{ width:64px; height:48px; border-radius:var(--rond-s); overflow:hidden; background:#fff; }
.ovpbeeld.klein .pimg{ padding:4px; }
.ovpbeeld.klein svg.pimg{ padding:8px; }
.ovpwie{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.ovprij .ovpnaam{ font-size:var(--tekst-l); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ovpcrumb{ min-width:0; font-size:var(--tekst-m); color:var(--ov-zacht); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ovprij .ovpprijs{ margin:0; padding:0; text-align:right; }
.ovpzetcel{ text-align:right; }

/* ---- het detailvenster (in #ovform, breder dan een formulier) ---- */
#ovform.ovpdetail .box{ max-width:940px; }
.ovpdet{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:22px; }
.ovpmedia{ min-width:0; display:flex; flex-direction:column; gap:10px; }
.ovpgroot{
  position:relative; aspect-ratio:4/3; display:grid; place-items:center; overflow:hidden;
  background:#fff; border:1px solid var(--ov-lijn); border-radius:var(--rond-m);
}
.ovpgroot img{ width:100%; height:100%; object-fit:contain; box-sizing:border-box; padding:12px; }
.ovpgroot .leeg,.ovp3d .leeg{ color:var(--ov-zacht); font-size:var(--tekst-m); padding:14px; text-align:center; }
.ovppijl{
  position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px; border:0; border-radius:50%;
  background:rgba(20,22,26,.55); color:#fff; font-size:20px; line-height:1; cursor:pointer;
}
.ovppijl.l{ left:8px; }
.ovppijl.r{ right:8px; }
.ovpteller{
  position:absolute; right:8px; bottom:8px; padding:2px 8px; border-radius:var(--rond-vol);
  background:rgba(20,22,26,.55); color:#fff; font:500 11px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.ovp3d .vak{
  width:100%; aspect-ratio:3/2; display:grid; place-items:center; overflow:hidden;
  background:var(--ov-vlak2); border:1px solid var(--ov-lijn); border-radius:var(--rond-m);
}
.ovp3d canvas{ display:block; cursor:grab; }
.ovpmodel{ margin:0; font-size:var(--tekst-m); line-height:1.45; color:var(--ov-zacht); }
.ovpmodel.voorlopig{ color:var(--ov-piloranjet); }
.ovpgeg{ min-width:0; display:flex; flex-direction:column; gap:8px; }
.ovpgeg .ovpmerk{ margin:0; }
.ovpnaamgroot{ margin:0; font-size:var(--tekst-2xl); font-weight:600; line-height:1.4; color:var(--ov-inkt); overflow-wrap:anywhere; }
.ovpprijsgroot{ margin:0; font:600 18px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--ov-inkt); }
.ovpvelden{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 16px; margin:6px 0 0; padding:12px 0 0;
  border-top:1px solid var(--ov-lijn); font-size:var(--tekst-m); color:var(--ov-inkt); align-items:center;
}
.ovpvelden .lb{ color:var(--ov-zacht); }
.ovpvelden .mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-variant-numeric:tabular-nums; }
.ovpacties{ margin-top:8px; }
.ovpacties .ovpzet{ height:38px; padding:0 16px; font-size:var(--tekst-l); }
.ovpfam{ margin-top:10px; padding-top:12px; border-top:1px solid var(--ov-lijn); }
.ovpfam .kop{
  margin:0 0 7px; font:500 10.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ov-zacht);
}
.ovpfam ul{ list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:5px; font-size:var(--tekst-m); color:var(--ov-inkt); }
.ovpfam li{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ovpfam li > span:first-child{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ovpfam li.meer{ color:var(--ov-zacht); }
.ovpfam .rij{ display:flex; flex-wrap:wrap; gap:8px; }
.ovinstknop[disabled]{ opacity:.45; cursor:default; }
.ovpvraag{ margin:0; font-size:var(--tekst-l); line-height:1.5; color:var(--ov-inkt); }

/* ---- smal scherm: de boom wordt een rij die zijwaarts schuift, net als de
   categorieen in de catalogus van de planner op een telefoon ---- */
@media (max-width:1000px){
  .ovpwrap{ grid-template-columns:minmax(0,1fr); gap:12px; }
  .ovpboom{ position:static; flex-direction:row; gap:4px; padding:6px; max-height:none; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; }
  .ovpcat{ width:auto; flex:none; white-space:nowrap; }
  .ovpcat .pijl{ display:none; }
  .ovpcat.alle{ margin:0; }
  .ovpcat.sub{ padding:6px 8px; }
  .ovpkop{ display:none; }
  .ovprij,.ovprij.eigen{ grid-template-columns:56px minmax(0,1fr) auto; }
  .ovpbeeld.klein{ width:56px; height:42px; }
  .ovprij .ovpcrumb,.ovprij .ovpprijs{ display:none; }
  .ovprij .ovpzetcel{ grid-column:2 / -1; text-align:left; }
  .ovpdet{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:620px){
  .ovpgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .ovpinfo{ padding:9px 10px 11px; }
  .ovpkaart > .ovpzet{ margin:0 10px 10px; white-space:normal; height:auto; min-height:32px; padding:6px 8px; }
}
@media (max-width:600px){
  .ovpcat,.ovpchip,.ovpzet,.ovppijl{ min-height:44px; }
  .ovppijl{ min-width:44px; }
}