/* ─────────────────────────────────────────────────────────────────────
   Zijbalk in de OcApi-skin (N61) · lade op mobiel (N59) · icoonstrook (N63)
   Tokens = portal-nieuwe-schil/schermen/zijbalk_ocapi.html (tabel onderaan).
   Eén component, twee containers: vast links op desktop, lade op ≤ 768 px.
   Merk ≠ signaalkleur: de oranje streep is het merk-accent van de actieve
   tab (N26), niet een waarschuwing.
   ───────────────────────────────────────────────────────────────────── */
.ocapi-zb {
  --zb-brand: #2f45c5; --zb-brand-soft: #eef0fc; --zb-accent: #f08a24; --zb-navy: #16213e;
  --zb-line: #e6eaef; --zb-line2: #f1f3f7; --zb-ink: #1f2937; --zb-muted: #8a97a6; --zb-soft: #475467;
  --zb-mono: ui-monospace, "SF Mono", Consolas, monospace;
  --zb-breed: 248px; --zb-smal: 48px;
  font-family: Inter, system-ui, sans-serif;
  color: var(--zb-ink);
}

/* ── desktop: vaste zijbalk links ─────────────────────────────────── */
.klant-shell > .klant-sidebar.ocapi-zb {
  flex: 0 0 var(--zb-breed); width: var(--zb-breed);
  position: sticky; top: 0; align-self: flex-start;
  max-height: 100vh; overflow: hidden;            /* N63: de strook duwt de inhoud, geen overlay */
  padding: 0; background: transparent; border: 0; min-height: 0;
}
.ocapi-zb .ozb-paneel {
  position: relative; width: 100%; max-height: 100vh; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: transparent transparent;
  background: #fff; border-right: 1px solid var(--zb-line);
  padding: 8px 10px 24px; display: flex; flex-direction: column; box-sizing: border-box;
}
.ocapi-zb .ozb-paneel:hover { scrollbar-color: var(--zb-line) transparent; }
.ocapi-zb .ozb-paneel::-webkit-scrollbar { width: 6px; }
.ocapi-zb .ozb-paneel::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.ocapi-zb .ozb-paneel:hover::-webkit-scrollbar-thumb { background: var(--zb-line); }
/* De inhoud staat altijd NAAST de zijbalk (flex-rij); nooit eronder, in geen enkel zicht. */
.klant-shell > .klant-main { position: relative; min-width: 0; }
.ocapi-zb .ozb-lkop { display: none; }
.ozb-menuknop { display: none; }
.ozb-doek { display: none; }

.ocapi-zb .ozb-top { display: flex; justify-content: flex-end; padding: 0 2px; }
.ocapi-zb .ozb-pin {
  width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent;
  color: var(--zb-muted); cursor: pointer; display: grid; place-items: center; font-size: 16px;
}
.ocapi-zb .ozb-pin:hover, .ocapi-zb .ozb-pin:focus-visible { background: var(--zb-brand-soft); color: var(--zb-brand); outline: 0; }
.ocapi-zb .ozb-pin[aria-pressed="true"] { color: var(--zb-brand); }

.ocapi-zb .ozb-zoek {
  position: relative; display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--zb-line); border-radius: 9px; padding: 0 10px; margin: 2px 4px 10px; background: #fff;
}
.ocapi-zb .ozb-zoek i { color: var(--zb-muted); font-size: 15px; }
.ocapi-zb .ozb-zoek input {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: 8px 0; font: inherit; font-size: 13px; color: var(--zb-ink);
}
.ocapi-zb .ozb-zoek input::placeholder { color: var(--zb-muted); }
.ocapi-zb .ozb-zoek:focus-within { border-color: var(--zb-brand); box-shadow: 0 0 0 3px rgba(47,69,197,.12); }
.ocapi-zb .ozb-zoek input:focus { outline: 0; }

.ocapi-zb .ozb-sec-kop {
  display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: transparent;
  font: inherit; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--zb-muted); font-weight: 700; padding: 12px 12px 5px; cursor: pointer; text-align: left;
  list-style: none; box-sizing: border-box;
}
.ocapi-zb .ozb-sec-kop-vast { cursor: default; }
.ocapi-zb .ozb-sec-kop::-webkit-details-marker { display: none; }
.ocapi-zb .ozb-sec-kop::marker { content: ""; }
.ocapi-zb .ozb-sec-kop:hover { color: var(--zb-ink); }
.ocapi-zb .ozb-sec-kop:focus-visible { outline: 2px solid var(--zb-brand); outline-offset: 1px; border-radius: 4px; }
.ocapi-zb .ozb-sec-actief > .ozb-sec-kop { color: var(--zb-ink); }
/* N62/N4: klanttaal groot, vaktaal klein eronder */
.ocapi-zb .ozb-vak { display: block; font-size: 9.5px; letter-spacing: .05em; text-transform: lowercase; color: var(--zb-muted); font-weight: 600; margin-top: 1px; }
.ocapi-zb .ozb-chev { margin-left: auto; font-size: 14px; color: var(--zb-muted); transition: transform .15s ease; }
.ocapi-zb details[open] > .ozb-sec-kop .ozb-chev { transform: rotate(90deg); }
.ocapi-zb .ozb-scheiding { border: 0; border-top: 1px solid var(--zb-line2); margin: 4px 12px; }

.ocapi-zb .ozb-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 11px 8px 9px; margin: 1px 0;
  border-radius: 8px; border-left: 3px solid transparent;
  color: var(--zb-ink); text-decoration: none; font-size: 13.5px; font-weight: 560; line-height: 1.3;
}
.ocapi-zb .ozb-item i { font-size: 17px; flex: none; color: var(--zb-soft); width: 18px; text-align: center; }
.ocapi-zb .ozb-item:hover { background: #fafbff; color: var(--zb-ink); }
.ocapi-zb .ozb-item:focus-visible { outline: 2px solid var(--zb-brand); outline-offset: 1px; }
.ocapi-zb .ozb-item.on { background: var(--zb-brand-soft); color: var(--zb-brand); border-left-color: var(--zb-accent); font-weight: 700; }
.ocapi-zb .ozb-item.on i { color: var(--zb-brand); }
.ocapi-zb .ozb-item .ozb-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ocapi-zb .ozb-soon { color: var(--zb-muted); cursor: default; user-select: none; }
.ocapi-zb .ozb-chip {
  margin-left: auto; border-radius: 20px; padding: 2px 7px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; background: var(--zb-line2); color: var(--zb-soft); flex: none;
}

.ocapi-zb .ozb-kantoor { margin: 12px 4px 0; padding-top: 12px; border-top: 1px solid var(--zb-line2); display: grid; gap: 6px; }
.ocapi-zb .ozb-knop-navy {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--zb-navy); color: #fff; border-radius: 8px; padding: 9px 12px;
  font-size: 12.5px; font-weight: 650; text-decoration: none;
}
.ocapi-zb .ozb-knop-navy:hover { background: #0f172a; color: #fff; }
.ocapi-zb .ozb-knop-licht {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  background: #fff; color: var(--zb-soft); border: 1px solid var(--zb-line); border-radius: 8px; padding: 7px 12px;
  font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer;
}
.ocapi-zb .ozb-knop-licht:hover { background: #fafbff; }
.ocapi-zb .ozb-voet { font-size: 11px; color: var(--zb-muted); padding: 6px 4px 0; line-height: 1.5; }

/* ── N63: los = icoonstrook, DUWT de inhoud bij hover/focus naar rechts ──
   David 24/09 (bindend): "de zijbalk zou de inhoud naar rechts moeten duwen,
   zodanig dat alles opschuift." Dus geen overlay: de aside zelf wisselt van
   breedte (48 → 248 px, 180 ms) en de flex-rij schuift de inhoud mee. Het
   paneel blijft in de flow — geen position:absolute, geen z-index-gevecht met
   sticky koppen op de pagina (dat gaf de "inhoud over de zijbalk"-bug). */
@media (min-width: 769px) {
  .klant-shell > .klant-sidebar.ocapi-zb {
    transition: flex-basis .18s ease, width .18s ease;
  }
  .klant-shell > .klant-sidebar.ocapi-zb.ozb-los { flex-basis: var(--zb-smal); width: var(--zb-smal); }
  .klant-shell > .klant-sidebar.ocapi-zb.ozb-los.ozb-uit { flex-basis: var(--zb-breed); width: var(--zb-breed); }
  .ocapi-zb .ozb-paneel { width: 100%; transition: padding .18s ease; }
  .ocapi-zb.ozb-los .ozb-paneel { overflow-x: hidden; padding-left: 6px; padding-right: 6px; }
  .ocapi-zb.ozb-los.ozb-uit .ozb-paneel { padding-left: 10px; padding-right: 10px; }
  .ocapi-zb.ozb-los:not(.ozb-uit) .ozb-lbl,
  .ocapi-zb.ozb-los:not(.ozb-uit) .ozb-chip,
  .ocapi-zb.ozb-los:not(.ozb-uit) .ozb-chev,
  .ocapi-zb.ozb-los:not(.ozb-uit) .ozb-vak,
  .ocapi-zb.ozb-los:not(.ozb-uit) .ozb-zoek input,
  .ocapi-zb.ozb-los:not(.ozb-uit) .ozb-voet { display: none; }
  .ocapi-zb.ozb-los:not(.ozb-uit) .ozb-zoek { justify-content: center; padding: 8px 0; }
  .ocapi-zb.ozb-los:not(.ozb-uit) .ozb-sec-kop {
    height: 1px; padding: 0; margin: 10px 8px; background: var(--zb-line); overflow: hidden; font-size: 0;
  }
  .ocapi-zb.ozb-los:not(.ozb-uit) .ozb-item { justify-content: center; padding: 8px 0; gap: 0; }
  .ocapi-zb.ozb-los:not(.ozb-uit) .ozb-knop-navy,
  .ocapi-zb.ozb-los:not(.ozb-uit) .ozb-knop-licht { padding: 8px 0; }
  .ocapi-zb.ozb-los .ozb-pin { transform: rotate(45deg); }
  .ocapi-zb.ozb-los.ozb-uit .ozb-pin { transform: none; }
}

/* ── mobiel ≤ 768 px: lade (N59) ─────────────────────────────────── */
@media (max-width: 768px) {
  .klant-shell > .klant-sidebar.ocapi-zb {
    position: fixed; top: 0; bottom: 0; left: 0; height: 100%;
    width: min(84vw, 320px) !important; max-height: none; min-height: 0 !important;
    overflow: hidden; z-index: 1090; background: #fff;
    transform: translateX(-102%); transition: transform .22s ease;
    box-shadow: 12px 0 40px rgba(0,0,0,.25); display: block;
  }
  .klant-shell > .klant-sidebar.ocapi-zb.ozb-open { transform: none; }
  .ocapi-zb .ozb-paneel { width: 100%; height: 100%; max-height: none; border-right: 0; padding-top: 0; }
  .ocapi-zb .ozb-lkop {
    display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 4px 0 6px;
    border-bottom: 1px solid var(--zb-line); margin: 0 -10px 6px; padding-left: 14px; flex: none;
  }
  .ocapi-zb .ozb-lkop-tekst { min-width: 0; }
  .ocapi-zb .ozb-lkop b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ocapi-zb .ozb-lkop small { display: block; font-size: 11px; color: var(--zb-muted); }
  .ocapi-zb .ozb-ikn {
    margin-left: auto; width: 40px; height: 40px; border: 0; background: transparent; border-radius: 10px;
    display: grid; place-items: center; color: var(--zb-ink); cursor: pointer; font-size: 20px; flex: none;
  }
  .ocapi-zb .ozb-ikn:hover, .ocapi-zb .ozb-ikn:focus-visible { background: var(--zb-brand-soft); outline: 0; }
  .ocapi-zb .ozb-top { display: none; }          /* geen speldje op gsm */
  .ozb-doek { display: block; position: fixed; inset: 0; background: rgba(17,24,39,.55); z-index: 1085; }
  .ozb-doek[hidden] { display: none; }
  body.ozb-lade-open { overflow: hidden; }
  /* Kantoorzicht: sticky menuknop bovenaan de inhoud (de kantoorhoofding is van N55). */
  .ozb-menuknop {
    display: inline-flex; align-items: center; gap: 6px; position: sticky; top: 0; z-index: 1020;
    margin: 8px 0 4px 8px; border: 1px solid var(--zb-line, #e6eaef); background: #fff; border-radius: 8px;
    padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 650; color: #1f2937; cursor: pointer;
  }
  body.klant-mode .ozb-menuknop { display: none; }   /* klant: ☰ zit in de OcApi-bovenbalk */
  body.klant-mode .klant-shell > .klant-main { padding: 12px 12px 90px; }
}

/* N68: klantzicht met OcApi-zijbalk — de oude dossierbalk (btw-nummer, Oci-knop,
   Sync) verdwijnt op elke breedte: naam en btw staan in de kop van het scherm,
   Oci in de bovenbalk/rechtsonder, en Sync is kantoormachinerie. */
body.klant-mode.ocapi-zb-aan .klant-topbar { display: none; }

/* N68: kantoorzicht op gsm — Oci zit al in de kantoorhoofding; de zwevende
   knop bedekt anders bedragen (zelfde reden als N64 aan klantzijde). */
@media (max-width: 768px) {
  body:has(.okh-top) #claude-fab,
  body:has(.okh-top) .claude-fab { display: none !important; }
}