/* QleardataOS — Klanten: lijst met kolommen en het klantpaneel (docs/STIJL.md v3). Alleen tokens uit style.css.
   De lijst is vlak (geen kaart); een achtergrond alleen voor het vastlegformulier. */

/* ---------- pagina ---------- */
.kl-toets{margin:-6px 0 0;font-size:13px;color:var(--muted)}
.kl-toets b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.kl-toets:empty{display:none}
.kl-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.kl-filters .search{flex:1 1 220px}
.kl-bron{width:auto;padding-block:6px;background:var(--panel);border-color:var(--line)}
@media (max-width:640px){.kl-zoek{order:-1;flex-basis:100%}.kl-filters .seg{flex-wrap:nowrap}}

/* status als filter: tekst met aantal, de gekozen krijgt een streep eronder */
.kl-fases{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none;margin-bottom:-10px}
.kl-fases::-webkit-scrollbar{display:none}
.kl-fase{flex:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent;padding:8px 10px 9px;cursor:pointer;
  color:var(--ink);font-size:13px;white-space:nowrap;display:inline-flex;gap:6px;align-items:baseline}
.kl-fase .n{font-weight:600;color:var(--head);font-variant-numeric:tabular-nums}
.kl-fase.nul,.kl-fase.nul .n{color:var(--muted);font-weight:400}
.kl-fase:hover{color:var(--head)}
.kl-fase[aria-pressed="true"]{color:var(--head);border-bottom-color:var(--head)}

/* ---------- lijst ---------- */
.kl-lijst{min-width:0}
.kl-aantal{margin:0 0 2px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.kl-rij{display:grid;grid-template-columns:minmax(170px,1.2fr) minmax(0,2.2fr) 96px 104px 116px;gap:18px;align-items:start;
  padding:11px 10px;border-bottom:1px solid var(--line-soft);color:var(--ink);text-decoration:none;min-width:0}
.kl-rij:hover{background:var(--panel);text-decoration:none}
.kl-kop{font-size:12.5px;color:var(--muted);padding-block:8px;border-bottom-color:var(--line)}
.kl-kop:hover{background:transparent}
.kl-c-naam{min-width:0}
.kl-naam{color:var(--head);font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kl-plaats{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kl-c-actie{min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kl-c-actie.zacht{color:var(--muted)}
.kl-c-datum{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--head)}
.kl-c-datum.laat{color:var(--warn)}
.kl-c-eig{display:flex;gap:7px;align-items:center;white-space:nowrap;align-self:start;min-height:21.7px}
.kl-c-status{white-space:nowrap}
.kl-c-status.zacht{color:var(--muted)}
.kl-c-status.klant{color:var(--good)}
.kl-rij.archief .kl-naam{color:var(--ink)}
@media (max-width:760px){
  .kl-kop{display:none}
  .kl-rij{grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"naam naam naam" "actie actie actie" "datum eig status";
    gap:3px 14px;padding:12px 2px;align-items:center}
  .kl-c-naam{grid-area:naam}.kl-c-actie{grid-area:actie;font-size:13.5px}
  .kl-c-datum{grid-area:datum;font-size:13px}.kl-c-eig{grid-area:eig;font-size:13px}
  .kl-c-status{grid-area:status;justify-self:end;font-size:13px}
  .kl-c-datum:empty,.kl-c-eig:empty{display:none}
  .kl-plaats{display:none}
  .kl-naam{font-size:15px}
}

/* ---------- paneel ---------- */
.kl-d-naam{font-size:18px;line-height:1.35}
.kl-d-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.kl-d{gap:0}
.kl-sec{display:grid;gap:10px;min-width:0;padding:18px 0;border-top:1px solid var(--line-soft);scroll-margin-top:8px}
.kl-h{font-size:16px;line-height:1.35;font-weight:600;color:var(--head);margin:0}
.kl-h4{font-size:13px;font-weight:600;color:var(--head);margin:6px 0 0}
.kl-veld{display:grid;gap:5px;font-size:12.5px;color:var(--muted);min-width:0}
.kl-veld .in{width:100%;color:var(--ink)}
.kl-veld>span{line-height:1.3}

/* 1. bellen */
.kl-bel{display:grid;gap:8px;padding:2px 0 18px}
.kl-bel-rij{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.kl-bel-knop{font-size:15px;padding:9px 16px;min-height:42px}
.kl-bel-nr{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.kl-bel-rij .btn.ghost{min-height:42px}
@media (max-width:560px){.kl-bel-rij{display:grid;grid-template-columns:minmax(0,1fr) auto}.kl-bel-knop{justify-content:center;min-height:48px;font-size:16px}
  .kl-bel-rij .btn.ghost{grid-column:1/-1;justify-content:center;min-height:44px}}
.kl-geen-nr{color:var(--muted);font-size:13.5px;margin-right:4px}
.kl-bel-info{margin:0;font-size:13px;color:var(--ink);max-width:68ch}
.kl-bel-info b{color:var(--head);font-weight:600}
.kl-k{color:var(--muted)}

/* 2. volgende stap */
.kl-volg{gap:8px}
.kl-volg>label.kl-veld{display:block}
.kl-volg textarea.in{width:100%;min-height:0;resize:vertical}
.kl-d textarea.in{field-sizing:content;min-height:2lh;max-height:10lh}
.kl-d .in{min-height:34px}
.kl-volg-velden{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:8px 10px;align-items:end}
.kl-telt-chk{color:var(--ink);padding-bottom:7px}
.kl-volg .saved{min-height:0}
.kl-volg .saved:empty{display:none}
@media (max-width:560px){.kl-volg-velden{grid-template-columns:1fr 1fr}.kl-telt-chk{padding-bottom:12px}}

/* 3. contact vastleggen: het enige vlak met achtergrond */
.kl-form{display:grid;gap:12px;background:var(--raise);border-radius:var(--r-kaart);padding:14px}
.kl-form .in{background:var(--panel)}
.kl-kies{display:flex;flex-wrap:wrap;gap:6px}
.kl-kies button{border:1px solid var(--input-line);background:var(--panel);color:var(--ink);border-radius:var(--r-veld);padding:6px 11px;font-size:13px;cursor:pointer;white-space:nowrap}
.kl-kies button:hover{border-color:var(--muted);color:var(--head)}
.kl-kies button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg);font-weight:600}
@media (max-width:640px){.kl-kies{display:grid;grid-template-columns:1fr 1fr}.kl-kies button{min-height:44px;padding:6px 10px;font-size:14px;white-space:normal;line-height:1.25}}
.kl-form textarea.in{min-height:0}
.kl-gesprek{display:grid;gap:12px}
.kl-prijs{color:var(--ink)}
.kl-twee{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:10px}
.kl-acties{display:flex;gap:8px;flex-wrap:wrap;align-items:end}
.kl-acties .kl-veld{width:170px}
.kl-telt{margin:0;font-size:12.5px;color:var(--muted)}
.kl-telt.ja{color:var(--good)}
.kl-telt:empty,.kl-fout:empty{display:none}
.kl-fout{margin:0;font-size:13px;color:var(--bad)}
.kl-melding{border:1px solid var(--warn);background:var(--warn-soft);border-radius:var(--r-veld);padding:10px 12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px}
.kl-melding p{margin:0;flex:1 1 200px;color:var(--head)}
#kl-vl-melding:empty{display:none}
@media (max-width:560px){.kl-twee{grid-template-columns:1fr}.kl-acties .kl-veld{width:100%}.kl-acties .grow{display:none}.kl-acties .btn{flex:1 1 auto;justify-content:center;min-height:44px}}

/* 4. belscript */
.kl-script summary{display:flex;gap:8px;align-items:center;cursor:pointer;list-style:none;min-height:32px}
.kl-script summary::-webkit-details-marker{display:none}
.kl-script summary .ic{color:var(--muted);transition:transform .15s}
.kl-script[open] summary .ic{transform:rotate(90deg)}
.kl-script-in{display:grid;gap:12px}
.kl-citaat{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:start}
.kl-citaat p{margin:0;font-size:15px;line-height:1.6;color:var(--head);white-space:pre-wrap;overflow-wrap:anywhere;max-width:68ch}

/* 5. eerdere contacten */
.kl-hist{display:grid}
.kl-g{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;padding:10px 0;border-top:1px solid var(--line-soft);font-size:13px}
.kl-g:first-child{border-top:0;padding-top:0}
.kl-g-kop{display:flex;gap:4px 10px;flex-wrap:wrap;align-items:baseline;color:var(--ink)}
.kl-g-d{font-variant-numeric:tabular-nums;color:var(--head);font-weight:500}
.kl-g .kv{margin-top:4px}
.icbtn.kl-zeker{color:var(--bad);font-size:12.5px;padding:0 8px;width:auto}

/* 6. onderzoek en achtergrond */
.kl-fix{font-size:13px;display:grid;gap:2px}
.kl-fix b{color:var(--head)}
.kl-pros{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kl-pros ul{margin:4px 0 0;padding-left:18px;font-size:13px;display:grid;gap:3px}
@media (max-width:520px){.kl-pros{grid-template-columns:1fr}}
.kl-ctc{display:grid;gap:3px;font-size:13px;padding:8px 0;border-top:1px solid var(--line-soft)}
.kl-ctc b{color:var(--head)}
.kl-tel{display:inline-flex;gap:4px;align-items:center;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.kl-d .kv b{color:var(--head)}

/* 05-10 (Codex-review 2): weergaven, vervolgkeuze, afspraak, prijsuitspraak */
.kl-weergaven{margin-top:-2px}
@media (max-width:640px){.kl-weergaven{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.kl-weergaven button{min-height:44px}}
.kl-afspraak,.kl-stap{display:grid;gap:10px}
.kl-vervolg{display:grid;gap:8px}
.kl-oud{margin:0;font-size:12.5px;color:var(--muted)}
.kl-oud span{color:var(--ink)}
.kl-meer>summary{cursor:pointer;font-size:13px;color:var(--muted);width:max-content}
.kl-meer[open]>summary{margin-bottom:6px}
.kl-meer textarea.in{width:100%}
.kl-volg-acties{display:flex;gap:8px;align-items:center}
/* de opslagknop blijft bereikbaar in een lang formulier */
.kl-form .kl-acties{position:sticky;bottom:0;background:var(--raise);padding:8px 0 2px;z-index:1}