/* De schil van operlivo.ai rond het Kantoor: alleen een bovenbalk. Het kantoor zelf staat in css/kantoor.css (uit de demo). */
html { -webkit-text-size-adjust: 100%; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
.app { min-height: 100dvh; display: flex; flex-direction: column; }
.topbalk { position: sticky; top: 0; z-index: 20; height: var(--topbalk); display: flex; align-items: center; gap: 12px; padding: 0 24px;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--lijn); }
.merk { display: flex; align-items: center; flex: none; min-height: 44px; margin-right: 8px; border-radius: 8px; }
.merk img { height: 24px; width: auto; display: block; }
.samenvatting { margin: 0 auto 0 0; font-size: 14px; color: var(--grijs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.samenvatting b { color: var(--inkt); font-weight: 600; font-variant-numeric: tabular-nums; }
.status-chip { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: var(--r-pill); background: var(--kaart);
  box-shadow: var(--schaduw-chip); font-size: 14px; font-weight: 500; white-space: nowrap; flex: none; }
.status-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.open-los { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--kaart); box-shadow: var(--schaduw-chip); color: var(--inkt); }
.open-los:hover { box-shadow: var(--schaduw-hover); }
.open-los[hidden] { display: none; }
#kantoor { flex: 1; min-width: 0; }
.kd-laden { margin: 0; padding: 80px 24px; text-align: center; color: var(--grijs); font-size: 14px; }

@media (max-width: 1440px) { .samenvatting .ext { display: none; } }
@media (max-width: 1080px) { .samenvatting { display: none; } .merk { margin-right: auto; } }
@media (max-width: 760px) { .topbalk { padding: 0 16px; gap: 8px; } .merk img { height: 22px; } }

html[data-maat="compact"] body.kd { --topbalk: 56px; }
html[data-maat="compact"] .topbalk { padding: 0 16px; gap: 10px; }
html[data-maat="compact"] .status-chip { height: 36px; padding: 0 12px; font-size: 13px; }
html[data-maat="compact"] .open-los { width: 36px; height: 36px; }

/* Het kantoor in een eigen venster (?scherm=tv): geen bovenbalk, het kantoor neemt het hele venster. */
html[data-scherm="tv"] .topbalk { display: none !important; }

/* Ingebed op de homepage (?embed=1): het kantoor vult het kader precies, zonder dat de pagina in het kader scrolt.
   Eén vinger opzij draait het kantoor, op en neer scrolt de homepage gewoon verder. */
html[data-embed], html[data-embed] body { height: 100%; overflow: hidden; }
html[data-embed] .app { height: 100dvh; min-height: 0; }
html[data-embed] #kantoor { min-height: 0; overflow: hidden; }
html[data-embed] .kd .pagina { height: 100%; display: flex; flex-direction: column; padding-bottom: 12px; }
html[data-embed] .kd .werkvlak { flex: 1; min-height: 0; height: auto; }
html[data-embed] .kd .podium { height: auto; min-height: 0; }
html[data-embed] .kd .vandaag { display: none; }
/* Ook de houder van de scène: touch-action telt alleen wat elke ouder ook toestaat, en css/kantoor.css zet die op none. Zonder
   deze regel scrolde een vinger over het kantoor de pagina niet, maar schoof hij het kantoor uit beeld. Bewust zonder
   (pointer: coarse): een laptop met aanraakscherm meldt een fijne aanwijzer, en ook daar moet een vinger de pagina scrollen.
   Een muis merkt niets van touch-action. */
html[data-embed]:not([data-groot]) .kd .scene-host, html[data-embed]:not([data-groot]) .kd .scene-host canvas { touch-action: pan-y !important; }
/* In het kader geen hoeklogo in de scène: de bovenbalk toont het merk al, en zo valt er nooit een kaart over het logo. */
html[data-embed] .kd .podium-merk { display: none !important; }
/* Tot 1080 breed zet het kantoor zijn paneel onder de scène; in het kader zou dat half wegvallen. Daar dus alleen de scène,
   de lijsten en Wacht op jou staan op de volledige pagina. */
@media (max-width: 1080px) {
  html[data-embed] .topbalk [data-actie="naar-wacht"] { display: none; }
  html[data-embed] .kd .werkvlak { display: flex; flex-direction: column; }
  html[data-embed] .kd .podium { flex: 1; height: auto; min-height: 260px; }
  html[data-embed] .kd .wacht-strook { display: none !important; }
  /* Van het paneel blijft alleen de lade van een assistent over; die schuift als vel van onderen in (css/kantoor.css). */
  html[data-embed] .kd .paneel { display: contents !important; }
  html[data-embed] .kd .paneel > :not(.lade) { display: none !important; }
}
@media (max-width: 760px) {
  html[data-embed] .status-chip { display: none; }
  html[data-embed] .kd .pagina { padding: 10px 12px 10px; }
  /* In het smalle kader krijgt het kantoor zelf de ruimte: de cijfers staan in de afdelingskaarten eronder, en de
     camera-knoppen passen zonder de keuze Kantoor/Lijst (die staat op de volledige pagina). */
  html[data-embed] .kd .widgets, html[data-embed] .kd .podium-onder .segment { display: none !important; }
  html[data-embed] .kd .podium-onder { justify-content: flex-end; }
  html[data-embed] .kd .afd-rij { flex: none; margin-top: 10px; padding-bottom: 2px; }
  /* Meldingen bovenin het kantoor, waar in het smalle kader niets staat; onderin vielen ze over de beeldknoppen. */
  html[data-embed] .kd .melding { top: calc(var(--topbalk) + 16px); bottom: auto; }
}

/* Op een telefoon zoomt de browser niet in bij het typen: velden van minstens 16 px. */
@media (hover: none) and (pointer: coarse) { .kd :is(input, textarea) { font-size: 16px !important; } }