/* Extra stijl voor de module sales. Alleen deze module schrijft hier.
   Gebruik eerst de klassen uit base.css; voeg hier alleen toe wat echt mist.
   Sales draait op volleBreedte:true — de pagina heeft dus geen padding en
   de module regelt zijn eigen marges. */

/* (De tijdelijke .scrim-reparatie is weg: css/base.css zet nu zelf
   `pointer-events:none` op een gesloten scrim. Zie ook de VERZOEK AAN
   CORE-notitie onderaan js/sales.js, punt 0 — die is daarmee afgehandeld.) */

/* Blok met eigen padding (het bord brengt zijn eigen padding mee). */
.s-wrap{padding:20px 26px 0}
.s-wrap:last-child{padding-bottom:50px}

/* Tabbalk met knoppen ernaast, op één onderlijn. */
.s-top{
  display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);margin-bottom:18px;
}
.s-top .tabs{border-bottom:none;margin-bottom:0;flex:1}
.s-top .s-acts{padding-bottom:9px}

/* Vier KPI-tegels op één rij — een aantal dat op elke breedte heel opgaat,
   zodat er nooit één losse tegel onder de rij bungelt. */
.grid.c3.s-kpi{margin-bottom:2px;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:12px}
.s-kpi .kpi{padding:14px 15px}
.s-kpi .kpi .big{font-size:24px}

/* Fase met kleurstip — één rustige manier om de fase te tonen. */
.s-fase{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--txt-2);white-space:nowrap}
.s-fase i{width:8px;height:8px;border-radius:50%;flex:0 0 8px}

/* Hint onder een lege bordkolom: legt uit wat er in die fase hoort. */
.s-kolomleeg{
  font-size:11.5px;color:var(--muted);line-height:1.45;text-align:center;
  padding:14px 10px;border:1px dashed var(--line-2);border-radius:8px;background:rgba(255,255,255,.4);
}

/* ─── "Waarom staat dit stil" op een bordkaart ────────────────────
   Twee regels onder de chips: wanneer je deze klant voor het laatst sprak en
   wat de afgesproken volgende stap is. Label links, waarde rechts, zodat je
   een kolom kaarten verticaal kunt aflopen zonder te lezen — de labels staan
   dan onder elkaar en alleen de waarden verschillen.
   Klein en gedempt: dit is context bij de naam, geen tweede kop. */
.bcard .s-waarom{
  margin-top:8px;padding-top:7px;border-top:1px dashed var(--line);
  display:flex;flex-direction:column;gap:3px;
}
.bcard .s-w-r{display:flex;align-items:baseline;gap:8px;font-size:11.5px;min-width:0}
.bcard .s-w-l{
  flex:0 0 auto;color:var(--muted);font-size:10px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;
}
.bcard .s-w-v{color:var(--txt-2);min-width:0;margin-left:auto;text-align:right}
/* Te lang niet gesproken: amber, dezelfde drempel en dezelfde kleur als de
   dagenteller op deze kaart en als "Blijft liggen" op het tabblad
   Activiteit. Geen rood — er is niets kapot, er is iets blijven liggen. */
.bcard .s-w-r.let .s-w-v{color:var(--amber);font-weight:600}
/* Géén vervolgstap is het signaal waar dit blok voor gemaakt is; het staat
   er cursief zodat je ziet dat er iets ontbreekt in plaats van dat er iets
   staat. */
.bcard .s-w-r.geen .s-w-v{font-style:italic;color:var(--muted)}

/* Rij in het detailpaneel (contactpersoon, document, kans, vacature). */
.s-ct{
  display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line);
}
.s-ct:last-child{border-bottom:none}
.s-ct b{font-size:13.5px;font-weight:600;display:block}

/* Knoppenbalk boven een tabblad in het detailpaneel. */
.s-actbar{margin-bottom:12px}

/* Takenlijst in het detailpaneel. */
.s-taakrij{
  display:flex;align-items:center;gap:10px;padding:9px 2px;
  border-bottom:1px solid var(--line);font-size:13.5px;cursor:pointer;
}
.s-taakrij:last-child{border-bottom:none}
.s-taakrij.af{color:var(--muted);text-decoration:line-through}
.s-taakrij.af .chip{text-decoration:none}

/* Afgesloten kans in de kansentabel: aanwezig, maar niet luid.
   (Dezelfde klasse dempt beoordeelde rijen in de Leadradar-tabel.) */
table.tbl tbody tr.s-dicht td{color:var(--muted)}
table.tbl tbody tr.s-dicht td:first-child{font-weight:500}

/* ─── Activiteit: stuurcijfers over wat er gedaan is ────────── */
/* Kaarten onder elkaar met dezelfde tussenruimte, zodat de HTML geen
   losse style-attributen hoeft te dragen. */
.s-meting .s-kaart{margin-top:18px}
.s-perbar{margin-bottom:16px}
.s-tegeluitleg{margin-top:10px;max-width:680px}
.s-noot{margin-top:14px}
.s-noot div + div{margin-top:4px}

/* Zes tegels: drie naast elkaar op een laptop, zes op een breed scherm,
   twee op een telefoon. Altijd een deler van zes, zodat er nooit één
   losse tegel onder de rij bungelt. */
.grid.c3.s-kpi.s-kpi6{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:1500px){ .grid.c3.s-kpi.s-kpi6{grid-template-columns:repeat(6,minmax(0,1fr))} }

/* Weekgrafiek — staafjes van HTML, geen bibliotheek. Boven elke staaf
   staat het getal; een balk zonder getal is een plaatje. */
.s-strook{overflow-x:auto;overflow-y:hidden;padding-bottom:2px}
.s-kolommen{display:flex;gap:8px;align-items:flex-end;min-width:100%}
.s-gkol{flex:1 1 0;min-width:34px;display:flex;flex-direction:column;align-items:center;gap:5px}
.s-gtop{font-size:11.5px;color:var(--txt-2);height:16px;line-height:16px}
.s-gtop.nul{color:var(--muted);opacity:.45}
.s-gbar{width:100%;height:96px;background:var(--card-2);border-radius:5px;display:flex;align-items:flex-end;overflow:hidden}
.s-gbar > i{display:block;width:100%;background:var(--olive-l);border-radius:5px 5px 0 0}
/* De lopende week is nog niet vol — gestreept, zodat je hem niet als
   een dip leest. */
.s-gkol.loopt .s-gbar > i{
  background:repeating-linear-gradient(135deg,var(--olive-l) 0 5px,var(--card-2) 5px 10px);
}
.s-glbl{font-size:10.5px;color:var(--muted);text-align:center;line-height:1.25}
.s-glbl b{display:block;font-weight:600;color:var(--txt-2)}
/* Vijf maten passen op een telefoon niet naast elkaar. De pil zelf mag niet
   omvallen (dan verspringt de actieve knop), dus schuift hij binnen een
   eigen strookje in plaats van de kaart breder te maken. */
.s-maatwrap{max-width:100%;min-width:0;overflow-x:auto;padding-bottom:2px}
.s-maat{flex-wrap:nowrap}
.s-maat button{white-space:nowrap}

/* Balkkolom in een tabel: krijgt de rek, de getallen blijven smal. */
table.tbl th.s-balkkop{width:34%}
table.tbl td.s-balk{padding-left:10px;padding-right:16px}
table.tbl td.s-balk .bar{height:6px;min-width:40px}

/* Trechter en "blijft liggen" naast elkaar (.grid.c2 vouwt zelf om). */
.s-onder{margin-top:18px}
.s-onder .s-kaart{margin-top:0}

/* Blijft liggen: drie groepen met elk hooguit zes regels. Een regel is
   een knop, want klikken opent de kaart — dan moet je er ook met Tab bij. */
.s-lig{display:flex;flex-direction:column;gap:16px}
.s-liglok + .s-liglok{border-top:1px solid var(--line);padding-top:14px}
.s-ligrij{
  display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;
  background:none;border:none;border-bottom:1px solid var(--line);
  padding:8px 2px;cursor:pointer;font-family:var(--body);font-size:13.5px;color:var(--txt);
}
.s-ligrij:last-of-type{border-bottom:none}
.s-ligrij:hover{background:var(--card-2)}
.s-ligrij b{font-weight:600;flex:0 1 auto;min-width:0}
.s-ligrij .meta{flex:1 1 auto;min-width:0;text-align:right}

@media (max-width:900px){
  .grid.c3.s-kpi.s-kpi6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s-glbl span{display:none}
  .s-kolommen{gap:5px}
  .s-ligrij{flex-direction:column;gap:2px}
  .s-ligrij .meta{text-align:left}
}

/* ─── Leadradar ─────────────────────────────────────────────── */
/* Filterbalk: statuschips links, bron en zoekveld rechts. */
.r-bar{margin:18px 0 12px}
.r-bar .searchbox{min-width:220px}

/* Functie-chips in de beoordeeltabel: klein en rustig. */
.r-func{display:flex;gap:4px;flex-wrap:wrap;max-width:260px}
.r-func .chip{font-size:11px;padding:1px 8px}

/* Externe link achter de bedrijfsnaam. */
.r-link{font-size:12px;margin-left:2px}

/* Actieknoppen rechts uitlijnen, niet laten omvallen. */
.r-acties{flex-wrap:nowrap;justify-content:flex-end}

/* ─── Belteksten (concepten uit de ochtendroutine) ───────────── */
/* Uitgeklapte rij onder het bedrijf: de vier teksten waarmee je belt,
   mailt en connect. Leesbreedte begrensd — je moet ze kunnen lézen,
   niet scannen over de volle tabelbreedte. */
.r-cel{background:var(--paper-2, #faf9f6);padding:0}
.r-con{padding:14px 16px 16px;max-width:820px}
.r-con h4{margin:0 0 10px;font-size:13px;letter-spacing:.02em}
.r-blok{border-top:1px solid var(--line);padding:10px 0 2px}
.r-blok:first-of-type{border-top:0}
.r-blok .r-kop{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.r-blok .r-lbl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.r-blok .r-tel{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.r-blok .r-tel.rood{color:var(--red);font-weight:700}
.r-blok p{margin:0;font-size:13px;line-height:1.55;white-space:pre-wrap}
.r-blok .btn{margin-left:auto}
.r-con .r-alles{margin-top:12px}

@media (max-width:900px){
  .r-bar .searchbox{min-width:0;flex:1}
  .r-func{max-width:none}
  .r-con{padding:12px}
}

@media (max-width:900px){
  .s-wrap{padding:16px 14px 0}
  .s-top{align-items:stretch}
  .s-top .s-acts{padding-bottom:10px}
  .s-top .s-acts .btn{flex:1;justify-content:center}
  /* Twee KPI's naast elkaar — anders scroll je op mobiel eindeloos
     langs de tegels voordat je het bord ziet. */
  .grid.c3.s-kpi{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .grid.c3.s-kpi .kpi{padding:12px 13px}
  .grid.c3.s-kpi .kpi .big{font-size:21px}
  .grid.c3.s-kpi .kpi .kd{font-size:11.5px}
}

/* ─── Kaartkop in de fasekleur (Tjeerd, 4 aug 2026) ──────────────
   Sinds ontwerp 3A zet dit blok alleen nog --ph per fase (dezelfde kleuren
   als CRM.SALES_FASES in js/data.js — wijzigt daar iets, hier meebewegen);
   base.css maakt daar zelf de koptint en de kiel van. Klanttrajecten en
   Recruitment zetten --ph al op de kolom, dus die doen automatisch mee. */
.bcol[data-fase="Lead"]{--ph:#9aa3b2}
.bcol[data-fase="Suspect"]{--ph:#7f93b8}
.bcol[data-fase="Prospect"]{--ph:#5b8bbf}
.bcol[data-fase="In afwachting kennismaking"]{--ph:#4a9d9d}
.bcol[data-fase="Gesprek ingepland"]{--ph:#5a9bd4}
.bcol[data-fase="Voorstel gedaan"]{--ph:#d9a441}
.bcol[data-fase="SWO gestuurd"]{--ph:#d97941}
.bcol[data-fase="Onderhandeling"]{--ph:#c98a2e}
.bcol[data-fase="Afgerond"]{--ph:#3d9968}
.bcol[data-fase="Project uitgesteld"]{--ph:#8a8f7a}

/* De kolom "Gesprek ingepland" draait om één ding: wanneer. Die regel
   krijgt daarom een accent in plaats van dezelfde grijstint als de rest
   (7 aug 2026). Staat er geen datum, dan valt dat juist op. */
.s-w-gesprek .s-w-l{color:var(--olive);font-weight:700}
.s-w-gesprek .s-w-v{color:var(--ink);font-weight:600}
.s-w-gesprek .num{color:var(--olive)}
.s-w-r.geen.s-w-gesprek .s-w-l{color:var(--oranje)}
.s-w-r.geen.s-w-gesprek .s-w-v{color:var(--oranje);font-weight:600}
/* "datum vastleggen →" is een knop, geen tekst: het is de enige plek op
   het bord waar je iets kunt afspreken. */
.s-w-plan{background:none;border:0;padding:0;font:inherit;color:var(--oranje);
  font-weight:600;cursor:pointer;text-align:right}
.s-w-plan:hover{text-decoration:underline}

/* Slepen binnen een kolom: een streep boven de kaart waar hij landt.
   Zo zie je waar je hem neerzet in plaats van te moeten gokken. */
.bcard.doel{box-shadow:inset 0 3px 0 var(--olive)}
.bcard{cursor:grab}
.bcard.drag{cursor:grabbing;opacity:.45}