/* ============================================================================
   SAIB — Responsive & Polish (Sprint 18)
   ----------------------------------------------------------------------------
   Dit bestand laadt NA saib.css en bevat uitsluitend responsive verbeteringen
   voor mobiel, tablet en alle tussenformaten (portret + landschap).

   Breakpoints (Bootstrap 5):
     < 576px  = telefoon portret
     < 768px  = telefoon landschap / kleine tablet
     < 992px  = tablet portret  (hieronder is de sidebar verborgen!)
     ≥ 992px  = tablet landschap / desktop (sidebar zichtbaar)
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. MOBIELE DASHBOARD-NAVIGATIE
   De sidebar is verborgen onder 992px (d-none d-lg-block). Deze horizontaal
   scrollende balk vervangt hem op mobiel/tablet-portret, met dezelfde links.
   Gerenderd door de sidebar-componenten (class="dashboard-mobielnav").
---------------------------------------------------------------------------- */
.dashboard-mobielnav {
    display: none;
}

@media (max-width: 991.98px) {

    /* De dashboard-wrapper (d-flex met sidebar + content) wordt een kolom,
       zodat de mobiele nav BOVEN de content staat. */
    .d-flex:has(> .dashboard-mobielnav) {
        flex-direction: column;
    }

    .dashboard-mobielnav {
        display: flex;
        width: 100%;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;              /* Firefox: geen scrollbalk */
        padding: 10px 16px;
        background: var(--navy-mid, #0F1E33);
        border-bottom: 1px solid var(--border, rgba(200, 168, 75, 0.2));
    }
    .dashboard-mobielnav::-webkit-scrollbar {
        display: none;                       /* Chrome/Safari: geen scrollbalk */
    }

    .mobielnav-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;                      /* niet samendrukken: scrollen */
        min-height: 40px;
        padding: 8px 14px;
        border-radius: 999px;
        border: 1px solid var(--border, rgba(200, 168, 75, 0.25));
        color: var(--saib-white, #F5F2EA);
        font-size: 13px;
        text-decoration: none;
        white-space: nowrap;
        background: transparent;
        transition: background 0.15s, border-color 0.15s;
    }
    .mobielnav-link i {
        color: var(--gold, #C8A84B);
        font-size: 14px;
    }
    .mobielnav-link.active {
        background: var(--gold, #C8A84B);
        border-color: var(--gold, #C8A84B);
        color: var(--navy, #0A1628);
        font-weight: 600;
    }
    .mobielnav-link.active i {
        color: var(--navy, #0A1628);
    }
    .mobielnav-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        background: var(--gold, #C8A84B);
        color: var(--navy, #0A1628);
        font-size: 11px;
        font-weight: 700;
    }
    .mobielnav-link.active .mobielnav-badge {
        background: var(--navy, #0A1628);
        color: var(--gold, #C8A84B);
    }
}

/* ----------------------------------------------------------------------------
   2. DASHBOARD-CONTENT OP KLEINE SCHERMEN
   Minder zij-padding zodat kaarten en tabellen de ruimte krijgen.
---------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .dashboard-content {
        width: 100%;
        padding: 20px 16px !important;
    }
}
@media (max-width: 575.98px) {
    .dashboard-content {
        padding: 16px 12px !important;
    }
    .dashboard-content h1 {
        font-size: 1.25rem !important;
    }
}

/* ----------------------------------------------------------------------------
   3. iOS INPUT-ZOOM FIX
   iOS Safari zoomt automatisch in op inputs met font-size < 16px.
   Sommige velden hebben inline font-size:12px — vandaar !important.
---------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    input.form-control,
    select.form-select,
    textarea.form-control,
    input.saib-input,
    select.saib-select,
    textarea.saib-input {
        font-size: 16px !important;
    }
}

/* ----------------------------------------------------------------------------
   4. TOUCH TARGETS
   Op aanraakschermen: knoppen en menu-items minimaal ~44px raakvlak.
---------------------------------------------------------------------------- */
@media (pointer: coarse) {
    .btn-sm {
        min-height: 40px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    /* Iets meer ademruimte tussen gestapelde actieknoppen */
    .d-flex.flex-column.gap-1 {
        gap: 6px !important;
    }
}

/* ----------------------------------------------------------------------------
   5. KNOPPENGROEPEN LATEN WRAPPEN
   Rijen knoppen (d-flex gap-2) breken netjes af i.p.v. buiten beeld lopen.
---------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .saib-card-solid .d-flex.gap-2:not(.flex-nowrap),
    .saib-card .d-flex.gap-2:not(.flex-nowrap),
    .dashboard-content .d-flex.gap-1:not(.flex-nowrap):not(.flex-column) {
        flex-wrap: wrap;
    }
}

/* ----------------------------------------------------------------------------
   6. TABELLEN
   Wrappers scrollen al horizontaal; dit voorkomt dat cellen verticaal
   samengeperst worden en maakt scrollen soepel op touch.
---------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .saib-table-wrapper,
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
    .saib-table-wrapper .saib-table th,
    .saib-table-wrapper .saib-table td {
        white-space: nowrap;
    }
    /* Lange e-mails en bestandsnamen in kaarten netjes afbreken */
    .saib-card-solid .text-dim.small,
    .saib-card .text-dim.small {
        overflow-wrap: anywhere;
    }
}

/* ----------------------------------------------------------------------------
   7. PASFOTO-MODAL & IPHONE SAFE-AREA
   Popup respecteert de notch/home-indicator op iPhones.
---------------------------------------------------------------------------- */
#pasfotoModal {
    padding: max(16px, env(safe-area-inset-top))
             max(16px, env(safe-area-inset-right))
             max(16px, env(safe-area-inset-bottom))
             max(16px, env(safe-area-inset-left));
}

/* ----------------------------------------------------------------------------
   8. LANDSCHAP OP TELEFOONS (lage viewport-hoogte)
   Compactere koppen zodat er content zichtbaar blijft onder de navbar.
---------------------------------------------------------------------------- */
@media (max-height: 500px) and (orientation: landscape) {
    .dashboard-content {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
    .dashboard-mobielnav {
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .dashboard-mobielnav .mobielnav-link {
        min-height: 34px;
        padding: 4px 12px;
    }
}

/* ----------------------------------------------------------------------------
   9. PUBLIEKE PAGINA'S (juridisch, overeenkomst, betaling)
   Grote paddings terugschroeven op kleine schermen.
---------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .saib-section,
    div[style*="padding:80px 0"],
    div[style*="padding:60px 20px"] {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }
    h1[style*="font-size:2.5rem"],
    h1[style*="font-size:2.2rem"] {
        font-size: 1.6rem !important;
    }
}

/* ----------------------------------------------------------------------------
   10. STAT-CARDS
   Op telefoons twee naast elkaar i.p.v. vier gestapeld (minder scrollen).
---------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .stat-card {
        padding: 14px !important;
    }
    .stat-card .stat-value {
        font-size: 1.3rem !important;
    }
}