/* Load.Live 1.6.1 (item 18) — opslagboom en rekschema. Kleuren: cyaan = werk/accent, grijs = privé, amber = nakijken (plank vol).
 * Rood enkel op "Verwijderen" (knop gevaar uit ll.css). */
.op-balk { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0; }
.op-balk input[type=search], .ob-zoek { flex: 1 1 220px; min-height: 40px; padding: 0 12px; border-radius: var(--r-veld); border: 1px solid var(--veld-rand); background: var(--rack); color: var(--tekst); }
.ob-zoek { width: 100%; margin: 8px 0 12px; }
.op-balk .segment { display: inline-flex; gap: 4px; padding: 3px; border-radius: var(--r-pil); background: var(--vak); }

.opslag-boom, .opslag-boom ul { list-style: none; margin: 0; padding: 0; }
.opslag-boom ul.ob-lijst { padding-left: 18px; border-left: 1px solid var(--lijn); margin-left: 8px; }
.opslag-boom .ob-knoop { margin: 2px 0; }
.opslag-boom summary { list-style: none; cursor: pointer; }
.opslag-boom summary::-webkit-details-marker { display: none; }
.opslag-boom summary::before { content: '▸'; color: var(--zacht); width: 14px; display: inline-block; flex: none; }
.opslag-boom details[open] > summary::before { content: '▾'; }
.ob-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-klein); }
.ob-rij:hover { background: var(--vak); }
.ob-knoop.gekozen > .ob-rij, .ob-knoop.gekozen > details > summary { background: var(--accent-zacht); }
.ob-plek { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 8px; flex: 1 1 auto; min-width: 0; }
.ob-plek.woning b, .ob-plek.vestiging b { font-size: 16px; }
.ob-acties { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.ob-code { font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em; color: var(--tekst); }
.ob-code.leeg { color: var(--zacht); }
.ob-objecten { list-style: none; margin: 2px 0 6px 22px; padding: 0; }
.ob-object { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r-klein); background: var(--rack-2); margin: 3px 0; }
.ob-naam { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.ob-pil { font-size: 12px; padding: 2px 9px; border-radius: var(--r-pil); white-space: nowrap; }
.ob-pil.werk { color: var(--ok); background: var(--ok-zacht); }
.ob-pil.prive { color: var(--st-grijs); background: var(--vak); }
.ob-vol { color: var(--let); }
.op-let { border-left: 4px solid var(--let); background: var(--let-zacht); padding: 10px 14px; margin: 10px 0; }
.op-let p { margin: 0; }
.op-kies { margin-left: 0; max-height: 40vh; overflow: auto; }
.ob-kiezer { max-height: 55vh; overflow: auto; }

/* rekschema: vooraanzicht, Plank 4 boven, vakken naast elkaar */
.op-rekken { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.op-rek .top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.op-plank { padding: 8px 0; border-bottom: 3px solid var(--lijn-sterk); }
.op-plank.vol { border-bottom-color: var(--let); }
.op-plankkop { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; font-size: 13.5px; }
.op-vakken { display: grid; grid-template-columns: repeat(var(--vakken, 4), minmax(0, 1fr)); gap: 6px; }
.op-vak { min-height: 54px; border-radius: var(--r-klein); border: 1px solid var(--lijn-sterk); background: var(--rack-2); color: var(--tekst); padding: 4px 6px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; min-width: 0; cursor: pointer; font: inherit; }
.op-vak.leeg { border-style: dashed; background: transparent; color: var(--zacht); font-size: 18px; }
.op-vak.leeg:disabled { cursor: default; opacity: .6; }
.op-vak.bezet.werk { border-color: var(--ok); background: var(--ok-zacht); }
.op-vak.bezet.prive { border-color: var(--lijn-sterk); }
.op-vaknaam { font-size: 11.5px; color: var(--zacht); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) { .opslag-boom ul.ob-lijst { padding-left: 10px; margin-left: 4px; } .ob-acties { margin-left: 0; } }