/* ============================================================
   C·ERP — zwevende-knoppen.css (WP24, DESIGNSYSTEEM-15/26, beslisvraag 22)
   Eén stapel rechtsonder in plaats van overlappende losse knoppen:
   1. Review-knop (.cerp-rv-knop, app/review-modus.js)      onderste
   2. Portaalknop (.portal-fab, platform/app.jsx)           midden
   3. Verbinding/aanmelding-chip (#cerp-devwissel, zz-routing.js) boven
   De chip en de review-knop injecteren hun eigen <style> op het moment
   dat ze laden; !important zorgt dat deze stapelvolgorde altijd wint,
   ongeacht laadvolgorde. Geen van de drie knoppen zelf is aangepast in
   vorm of kleur, alleen de positie. .main__scroll krijgt ruimte onderin
   zodat schermcontent (bv. de Crediteuren-rij) nooit achter de stapel
   verdwijnt. Bij 1024×768 blijft de stapel binnen de rechterkolom en
   raakt geen ander vast element.
   --text-3 blijft ongewijzigd (beslisvraag 22 nog niet beantwoord door
   Max); zie platform/tokens.css voor de klaarstaande, uitgeschakelde
   doelwaarde.

   HERZIEN C3e (bouwronde 2): de verticale stapel lag bij 1280x900 over
   schermcontent (Afvinken in "Rond de inrichting af", "Dashboard
   aanpassen"); de 160px onderruimte hielp alleen aan het eind van de
   scroll. Nu: een vaste voetband onder het werkvlak (--zk-band) waar
   alle zwevende knoppen naast elkaar in staan. Het werkvlak eindigt
   boven de band, dus content kan er nooit meer onder schuiven.
   Rechts van rechts naar links: review, portaal, verbinding. Links:
   assistent, nieuws, feedback. zwevende-knoppen.js meet de breedtes en
   zet de rechterafstanden; botsen de groepen (smal scherm), dan gaat
   de linkergroep een rij omhoog en wordt de band hoger.
   ============================================================ */

:root { --zk-band: 52px; --zk-links-bodem: 7px; }

/* werkvlak eindigt boven de voetband */
.plat .main { padding-bottom: calc(var(--zk-band) + env(safe-area-inset-bottom, 0px)); }
.plat .main__scroll { padding-bottom: 24px; border-bottom: 1px solid var(--line); }

/* rechtergroep: verticaal gecentreerd in de band; rechterafstand
   volgt uit zwevende-knoppen.js (deze waarden zijn de terugval) */
.cerp-rv-knop { bottom: 10px !important; }
.portal-fab { bottom: 7px !important; right: 110px !important; padding-top: 9px !important; padding-bottom: 9px !important; }
.portal-fab:hover { transform: none; }
#cerp-devwissel { bottom: 11px !important; right: 216px !important; }

/* linkergroep naast elkaar in plaats van gestapeld */
.adoptie-fab { flex-direction: row !important; bottom: var(--zk-links-bodem) !important; }

/* h62: met viewport-fit=cover ligt de onderrand van de telefoon (thuisbalk) en liggend de
   inkeping binnen het beeld. De voetband groeit met de veilige zone mee (hierboven) en de
   knoppen schuiven erboven en ernaast; op de desktop is env() 0 en verandert er niets. */
.cerp-rv-knop { bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; margin-right: env(safe-area-inset-right, 0px); }
.portal-fab { bottom: calc(7px + env(safe-area-inset-bottom, 0px)) !important; margin-right: env(safe-area-inset-right, 0px); }
#cerp-devwissel { bottom: calc(11px + env(safe-area-inset-bottom, 0px)) !important; margin-right: env(safe-area-inset-right, 0px); }
.adoptie-fab { bottom: calc(var(--zk-links-bodem) + env(safe-area-inset-bottom, 0px)) !important; margin-left: env(safe-area-inset-left, 0px); }

/* h26 (A1): op de telefoon beslaat het meldingenpaneel bijna het hele scherm en lagen de
   knoppen van de voetband erbovenop (Alle meldingen was niet te tikken). Zolang het paneel
   open is, staan ze uit; sluiten brengt ze terug. Zelfde aanpak als bij het zoekpalet. */
@media (max-width: 600px) {
  body:has(.meld-panel) .cerp-rv-knop, body:has(.meld-panel) .portal-fab,
  body:has(.meld-panel) #cerp-devwissel, body:has(.meld-panel) .adoptie-fab { display: none !important; }
  /* h26 (A2): de verbindingschip was 30 px hoog; tikdoel minstens 32 px */
  #cerp-devwissel .devw-pill { min-height: 32px; }
}

@media print {
  .plat .main { padding-bottom: 0; }
  .plat .main__scroll { border-bottom: 0; }
}

/* h40: op de telefoon lagen de zwevende knoppen over de voet van een venster of lade
   (Opslaan, Aanmaken) en over velden onderin. Zolang een venster of lade open is, staan ze
   uit; sluiten brengt ze terug. Op de desktop blijven ze staan. */
@media (max-width: 600px) {
  body:has(.cmd__overlay, .cpop__overlay, .cds-overlay, .crr-overlay, .cpick__overlay, .cde__overlay, .fsv__overlay, .cdev, .ikn-paneel__overlay, .opl-overlay, .ml-reader, .zp, .asst-eigen, .pt-modal__overlay, [aria-modal="true"]) :is(.cerp-rv-knop, .portal-fab, #cerp-devwissel, .adoptie-fab) { display: none !important; }
}

/* h43 (overdracht h39 D9): zwevende-knoppen.js zet de rechterafstand van de reviewknop inline
   met !important, daardoor won de regel in patronen.css (right 556px) niet en lag de knop op
   de desktop over Opslaan in een zijpaneel (Relatie bewerken). Verschuiven gaat wel: de knop
   schuift de breedte van het zijpaneel (540 px) naar links, naast het paneel. */
@media (min-width: 721px) {
  body:has(.zp) .cerp-rv-knop { translate: -540px 0; }
}

/* h68 (bijvangst h67): een melding onderin (toast) lag op de telefoon deels achter de
   linkergroep van de voetband (assistent, nieuws, feedback, z-index 900), omdat de band daar
   twee rijen hoog is en de melding op 24 px van de onderrand stond. Meldingen staan nu altijd
   boven de voetband en erboven in de stapelvolgorde; de ongedaan-maken-stapel schuift mee.
   pb-toast heeft een inline z-index, daarom daar !important. In de CDE-viewer blijft de eigen,
   hogere z-index van cde-meten.css gelden (specifieker). */
.cerp-toast, .tk-toast, .uv-toast { bottom: calc(var(--zk-band) + 10px + env(safe-area-inset-bottom, 0px)); z-index: 950; }
.pb-toast { bottom: calc(var(--zk-band) + 10px + env(safe-area-inset-bottom, 0px)); z-index: 950 !important; }
.ond-stapel { bottom: calc(var(--zk-band) + 10px + env(safe-area-inset-bottom, 0px)); z-index: 950; }
body:has(.cerp-toast.is-show) .ond-stapel { bottom: calc(var(--zk-band) + 64px + env(safe-area-inset-bottom, 0px)); }