/* ═══════════════════════════════════════════════════════════════════════
   SAIB — Sprint 20.1
   Responsive navigatie & layout

   Additief bestand: laden ná saib.css, saib-responsive.css, saib-sprint19.css
   en saib-sprint20.css. Er wordt níéts in de bestaande bestanden gewijzigd.

   DE KERNFOUT DIE DIT BESTAND REPAREERT
   -------------------------------------
   saib.css zet `.saib-navbar { height: 72px }` — een váste hoogte. De
   navbar is een flex-container met flex-wrap (Bootstrap-standaard); het
   geopende mobiele menu (.navbar-collapse.show) wraapt naar een tweede
   flexregel. Die tweede regel valt buiten de 72px-doos en rendert daardoor
   ZONDER achtergrond over de pagina heen. Dat verklaart in één keer alle
   gemelde symptomen: menulinks en CTA-knoppen die over de hero zweven,
   "desktopnavigatie en hamburger tegelijk zichtbaar" (de losse links naast
   het hamburgericoon), en content die visueel met het menu concurreert.

   De oplossing hieronder laat de balk zelf op 72px staan en maakt het
   geopende menu een écht overlay-paneel: absoluut gepositioneerd onder de
   balk, met eigen achtergrond, schaduw, scrollgedrag en een verduisterende
   backdrop over de rest van de pagina.

   ÉÉN BREAKPOINT: 992px (Bootstrap "lg")
   ---------------------------------------
   Alles in dit project schakelt al op 992: navbar-expand-lg, de
   dashboard-sidebar (d-none d-lg-block) en de mobiele dashboardbalk
   (d-lg-none). Dit bestand voegt géén nieuw breakpoint toe — onder 992
   bestaat alleen het hamburgermenu, vanaf 992 alleen de desktopnavigatie.
   ═══════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────
   1. MOBIEL MENU ALS OVERLAY-PANEEL  (< 992px)
   ─────────────────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {

    /* Het paneel. position:absolute werkt hier omdat de navbar sticky is
       (sticky gedraagt zich als positioned ancestor). top:100% = strak
       onder de 72px-balk, ongeacht eventuele toekomstige balkhoogte.
       De selector dekt óók .collapsing, zodat de openanimatie van
       Bootstrap niet alsnog even in de paginaflow springt. */
    .saib-navbar .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--navy-mid);
        border-bottom: 1px solid var(--border);
        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
        padding: 10px 20px 20px;
        max-height: calc(100vh - 72px);
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 1030;
    }

    /* Backdrop: dempt de pagina achter het geopende menu, zodat hero en
       menu niet visueel concurreren.

       BEWUST op body::after en niet als pseudo-element ín het paneel: de
       navbar heeft backdrop-filter, en dat maakt de nav het referentiekader
       voor position:fixed-nakomelingen — een fixed backdrop bínnen de nav
       zou samenvallen tot niets. body:has() staat daarbuiten en werkt in
       alle gangbare browsers; op een verouderde browser zonder :has()
       vervalt alleen de demping, de rest blijft volledig werken.

       z-index 1019: boven alle paginacontent, maar nét onder de sticky
       navbar (1020) waar het paneel in leeft — zo kan de backdrop nooit
       óver het menu zelf vallen. Tikken op de backdrop sluit het menu niet
       (dat zou JS vragen); de toggler en de bestaande sluit-bij-klik in
       saib.js doen dat al betrouwbaar. */
    body:has(.saib-navbar .navbar-collapse.show)::after {
        content: "";
        position: fixed;
        top: 72px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(5, 10, 20, 0.6);
        z-index: 1019;
        pointer-events: none;
    }

    /* Menu-items: volle breedte, onder elkaar, ruim raakvlak.
       De markup heeft align-items-center en ms-1/ms-2 utilities (met
       !important in Bootstrap) — vandaar dat hier ook !important nodig is. */
    .saib-navbar .navbar-nav {
        align-items: stretch !important;
        gap: 2px;
        width: 100%;
    }

    .saib-navbar .navbar-nav .nav-item {
        margin-left: 0 !important;
        width: 100%;
    }

    .saib-navbar .nav-link-saib {
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 10px 12px !important;
        font-size: 15px;
    }

    /* De twee CTA-knoppen (Beveiliger / Opdrachtgever) horen ín het paneel
       thuis, volle breedte, met wat lucht boven de eerste. */
    .saib-navbar .navbar-nav .nav-item .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 48px;
        margin-top: 6px;
    }

    /* Ingelogd: het accountmenu opent ín het paneel, niet als zwevende
       dropdown. Bootstrap doet dit binnen een navbar grotendeels zelf
       (position: static onder het expand-breakpoint); dit maakt het
       visueel onderdeel van het paneel. */
    .saib-navbar .navbar-nav .dropdown-menu {
        position: static !important;
        width: 100%;
        margin-top: 4px;
        box-shadow: none;
        border-radius: 6px;
    }
}


/* ───────────────────────────────────────────────────────────────────────
   2. ACTIEVE PAGINA IN DE PUBLIEKE NAVIGATIE
   De links krijgen in layouts/nav.blade.php een .active-klasse; hier de
   bijbehorende stijl (desktop én in het mobiele paneel).
   ─────────────────────────────────────────────────────────────────────── */

.nav-link-saib.active {
    color: var(--gold) !important;
    background: var(--gold-dim);
}


/* ───────────────────────────────────────────────────────────────────────
   3. SMALLE DESKTOPS (992–1199px)
   Vangnet tegen horizontaal afgesneden navigatie rond 1024px: iets
   compactere links en knoppen zodat alles altijd op één regel past.
   ─────────────────────────────────────────────────────────────────────── */

@media (min-width: 992px) and (max-width: 1199.98px) {

    .saib-navbar .nav-link-saib {
        padding: 6px 9px !important;
        font-size: 13px;
    }

    .saib-navbar .navbar-nav .btn {
        padding-left: 12px !important;
        padding-right: 12px !important;
        font-size: 13px;
    }
}


/* ───────────────────────────────────────────────────────────────────────
   4. ACCOUNT-DROPDOWN OP DESKTOP
   Rechts uitgelijnd (dropdown-menu-end staat al in de markup); dit borgt
   dat hij nooit onder kaarten of sticky elementen verdwijnt en binnen de
   viewport blijft op lage schermen.
   ─────────────────────────────────────────────────────────────────────── */

@media (min-width: 992px) {

    .saib-navbar .dropdown-menu {
        z-index: 1035;
        max-height: calc(100vh - 88px);
        overflow-y: auto;
    }
}


/* ───────────────────────────────────────────────────────────────────────
   5. DASHBOARD-SIDEBAR BINNEN DE VIEWPORT  (≥ 992px)

   saib.css zet de sidebar op position:fixed met alleen een min-height.
   Op lage schermen (laptop 768px hoog, tablet-landschap) groeit het menu
   voorbij de viewport en zijn de onderste items ONBEREIKBAAR: een fixed
   element scrolt niet mee met de pagina. Vaste hoogte + eigen scroll lost
   dat definitief op. De smalle scrollbar-styling houdt het rustig.
   ─────────────────────────────────────────────────────────────────────── */

@media (min-width: 992px) {

    .dashboard-sidebar {
        height: calc(100vh - 72px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--border) transparent;
    }

    .dashboard-sidebar::-webkit-scrollbar {
        width: 6px;
    }

    .dashboard-sidebar::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 3px;
    }
}


/* ───────────────────────────────────────────────────────────────────────
   6. TABELLEN: GECONTROLEERDE HORIZONTALE SCROLL

   Alle datatabellen staan al in een Bootstrap .table-responsive-wrapper.
   Zonder minimumbreedte verkruimelen de kolommen echter eerst tot
   onleesbare slierten vóórdat de wrapper gaat scrollen. Deze min-width
   laat de tabel zijn vorm houden en de wrapper het scrollen doen — dat is
   de "gecontroleerde horizontale scroll" uit de acceptatiecriteria.
   Geldt bewust alleen bínnen een responsive wrapper, zodat kleine
   tabellen elders onaangetast blijven.
   ─────────────────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {

    .table-responsive > .saib-table {
        min-width: 820px;
    }

    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    /* Visuele hint dat er meer is: zachte vervaging aan de randen zolang
       er te scrollen valt, zonder JavaScript. Subtiel genoeg om te negeren. */
    .table-responsive {
        background:
            linear-gradient(to right, var(--navy) 30%, transparent),
            linear-gradient(to left,  var(--navy) 30%, transparent) 100% 0;
        background-repeat: no-repeat;
        background-size: 24px 100%;
        background-attachment: local, local;
    }
}


/* ───────────────────────────────────────────────────────────────────────
   7. MOBIELE DASHBOARDBALK NAAST HET OVERLAY-MENU
   De horizontale dashboardnavigatie (Sprint 18) blijft ónder het geopende
   sitemenu-paneel; het paneel (z-index 1030 binnen de sticky navbar met
   z-index 1020) wint van alles in de paginaflow. Deze regel borgt alleen
   dat de balk zelf nooit boven paginacontent uitkomt waar hij niet hoort.
   ─────────────────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {

    .dashboard-mobielnav {
        position: relative;
        z-index: 10;
    }
}