/* ronde 2, pakket C: kioskbediening in de demo-lade, de kioskbalk en Kijk als. Alleen pakket C schrijft hier. Kleur alleen als betekenis: goud voor actief, paars voor de primaire knop. */

/* ---------- de lade als kioskbediening ---------- */
.lade.kb{width:372px;max-height:calc(100vh - var(--barH) - 16px);overflow:auto;gap:7px}
.lade.kb .rijtje{grid-template-columns:76px 1fr}
.lade.kb .rijtje.top{align-items:start}
.lade.kb .rijtje.top>label{padding-top:5px}
.lade.kb .kb-dag{display:flex;flex-direction:column;gap:1px;max-height:168px;overflow:auto;border:1px solid var(--n200);border-radius:var(--r);padding:3px 6px 4px;background:var(--n50)}
.lade.kb .kb-dag .groep{font:600 12px var(--font-tekst);letter-spacing:.06em;text-transform:uppercase;color:var(--n500);padding:5px 0 1px}
.lade.kb .kb-dag .groep:first-child{padding-top:1px}
.lade.kb .kb-vink{display:flex;align-items:center;gap:7px;padding:2px 0;cursor:pointer;color:var(--n900)}
.lade.kb .kb-vink input{margin:0;accent-color:var(--plum);width:14px;height:14px;flex:none}
.lade.kb .kb-vink span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lade.kb .kb-vink small{font-family:var(--font-mono);color:var(--n500);font-size:13px}
.lade.kb .kb-dagvoet{display:flex;align-items:center;justify-content:space-between;gap:6px;padding-top:4px;margin-top:3px;border-top:1px solid var(--n200);color:var(--n700)}
.lade.kb .kb-dagvoet .btn.sm{height:22px;padding:0 7px;font-size:13px}
.lade.kb .kb-schakels{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.lade.kb .kb-speelt{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:var(--r);background:var(--gold-100);color:var(--n900)}
.lade.kb .kb-speelt .ic{color:var(--gold);flex:none}
.lade.kb .kb-acties{display:flex;gap:6px}
.lade.kb .kb-acties .btn{flex:1;justify-content:center;height:34px}
.lade.kb .kb-link{display:flex;gap:4px;min-width:0}
.lade.kb .kb-link input{flex:1;min-width:0;height:26px;border:1px solid var(--n300);border-radius:var(--r);background:var(--n50);padding:0 6px;font:13px var(--font-mono);color:var(--n700)}
.lade.kb .kb-link .btn.sm{height:26px;padding:0 6px}
.lade.kb .kb-kop{display:flex;align-items:center;gap:6px;font:600 14px var(--font-kop);padding-top:7px;border-top:1px solid var(--n200);margin-top:2px}
.lade.kb .kb-kop .note{font-weight:400;color:var(--n500)}
.lade.kb .kb-rollen{display:flex;flex-direction:column;gap:3px}
.lade.kb .kb-rol{display:flex;align-items:flex-start;gap:8px;width:100%;text-align:left;border:1px solid var(--n200);background:var(--n0);border-radius:var(--r);padding:6px 8px;color:var(--n900)}
.lade.kb .kb-rol:hover{background:var(--n100)}
.lade.kb .kb-rol.actief{border-color:var(--gold);background:var(--gold-100)}
.lade.kb .kb-rol .ic{margin-top:2px;color:var(--n500);flex:none}
.lade.kb .kb-rol.actief .ic{color:var(--gold)}
.lade.kb .kb-rol span{display:flex;flex-direction:column;gap:1px;min-width:0}
.lade.kb .kb-rol b{font-size:14px}
.lade.kb .kb-rol small{color:var(--n500);font-size:13px}
.lade.kb .kb-rol em{font-style:normal;color:var(--n700);font-size:13px;line-height:1.35}
.lade.kb details.kb-proto{border-top:1px solid var(--n200);padding-top:6px;margin-top:2px}
.lade.kb details.kb-proto summary{display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--n500);font-size:13px;list-style:none}
.lade.kb details.kb-proto summary::-webkit-details-marker{display:none}
.lade.kb details.kb-proto[open] summary{color:var(--n700);margin-bottom:6px}
.lade.kb details.kb-proto .rijtje{margin-bottom:6px}
.lade.kb details.kb-proto .knoppen{border-top:0;padding-top:0}

/* ---------- modus: twee knoppen, goud is actief ---------- */
.kb-seg{display:inline-flex;border:1px solid var(--n300);border-radius:var(--r);overflow:hidden;background:var(--n0)}
.kb-seg button{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border:0;background:none;font-size:14px;color:var(--n700)}
.kb-seg button+button{border-left:1px solid var(--n300)}
.kb-seg button.actief{background:var(--gold-100);color:var(--n900);font-weight:600}
.kb-seg button .ic{width:20px;height:20px}

/* ---------- de kioskbalk met dezelfde bediening, compact ---------- */
.kioskbar.kb{height:auto;min-height:40px;flex-wrap:wrap;row-gap:4px;padding:4px 12px}
.kioskbar.kb .kb-veld{display:inline-flex;align-items:center;gap:5px}
.kioskbar.kb .kb-veld span{font:600 12px var(--font-tekst);letter-spacing:.06em;text-transform:uppercase;color:#b9a9d4}
.kioskbar.kb select{height:26px;max-width:190px;border:1px solid #4a3a6a;border-radius:4px;background:#2a1d3f;color:#f1edf7;padding:0 4px;font-size:14px}
.kioskbar.kb .kb-seg{border-color:#4a3a6a;background:#2a1d3f}
.kioskbar.kb .kb-seg button{color:#d9cfe9}
.kioskbar.kb .kb-seg button+button{border-left-color:#4a3a6a}
.kioskbar.kb .kb-seg button.actief{background:var(--gold);color:#1b1229}
.kioskbar.kb .btn.kb-geluid.aan{border-color:var(--gold);color:var(--gold)}
.kioskbar.kb .btn .ic{width:20px;height:20px;margin-right:4px}
@media (max-width:1100px){ .kioskbar.kb .note{display:none} }