/* UI-standaard voor elke beheerpagina op gsm en tablet (26/09/2026).

   Eén opbouw voor alle schermen, in de gedeelde onderdelen en niet per pagina:
   - Kop (NaPageHeader): titel en knoppen op één rij; passen de knoppen er niet naast, dan schuiven ze
     rechts onder de titel. De ondertitel staat daaronder over de volle breedte.
   - Werkbalk (NaToolbar): zoekveld en de kleine knoppen (vernieuwen, ⋯, filter) op één rij.
   - Tabs (NaTabs): één rij die opzij schuift, zonder zichtbare schuifbalk.
   - Kaart (NaTableCard): de acties rechts onderaan, zoals de kolom Acties rechts in de tabel.

   Dit bestand laadt als laatste: de oudere gsm-regels in site.css en na-components.css (die kop en
   werkbalk onder elkaar stapelden en de titel 30px maakten) gelden hier niet meer. */

/* Schuifbalken minimaal (11/10/2026): dun, zonder pijltjes en zonder eigen baan, in de kleur van de randen, zodat
   ze in de nachtweergave niet als grijze balken naast het menu en de pagina staan. Een balk die bewust verborgen
   is (scrollbar-width: none op een klasse) blijft verborgen: die regel weegt zwaarder dan deze. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
}

/* Herverbinden met de server (11/10/2026, js/na-verbinding.js): verborgen, en pas na twee seconden een klein label
   bovenaan. Een kort herverbinden na de achtergrond merkt de gebruiker zo niet. */
.na-herverbinden {
    display: none;
}

.na-herverbinden.na-herverbinden-bezig {
    display: block;
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 9500;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    animation: na-herverbinden-in 0.2s ease 2s forwards;
}

@keyframes na-herverbinden-in {
    to { opacity: 1; }
}

/* De bel (11/10/2026, Components/Layout/MeldingenKnop.razor). Op de computer in de bovenbalk naast de taal; op de gsm
   vast bovenaan tussen "?" en ☰, in dezelfde vorm als de menuknop. */
.na-bel-knop {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 8px;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
}

.na-bel-knop:hover,
.na-bel-knop:focus-visible {
    background: var(--color-surface-secondary);
}

.na-bel-aantal {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    border: 2px solid var(--color-page-bg);
    background: var(--color-danger);
    color: var(--color-text-on-primary);
    font-size: 11px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}

@media (max-width: 900px) {
    .na-bel-knop {
        position: fixed;
        top: 14px;
        right: 72px;
        width: 46px;
        height: 46px;
        margin: 0;
        border-radius: 12px;
        z-index: calc(var(--z-appnav) + 1);
        background: var(--color-bg-071426);
        color: var(--color-text-on-primary);
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    }
}

.na-bel-blad .na-modal-body {
    padding-left: 0;
    padding-right: 0;
}

.na-bel-blad .na-filterbar-titel {
    display: block;
    padding: 10px 20px 4px;
}

.na-bel-leeg {
    padding: 8px 20px;
    color: var(--color-text-muted);
}

.na-bel-rij {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 20px;
    color: var(--color-text);
    text-decoration: none;
}

.na-bel-rij:hover {
    background: var(--color-surface-secondary);
}

.na-bel-rij.na-bel-nieuw {
    background: var(--color-primary-soft);
}

.na-bel-icoon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--color-surface-secondary);
    color: var(--color-text-muted);
}

.na-bel-afspraak { background: var(--color-success-bg); color: var(--color-success); }
.na-bel-geannuleerd { background: var(--color-danger-bg); color: var(--color-danger); }
.na-bel-goedkeuring,
.na-bel-review { background: var(--color-warning-bg); color: var(--color-warning); }
.na-bel-inbox { background: var(--color-info-bg); color: var(--color-info); }
.na-bel-taak { background: var(--color-ai-bg); color: var(--color-ai); }
/* Terugbellen en berichten zoals de tegels op het dashboard (12/10/2026). */
.na-bel-terugbellen { background: var(--color-danger-bg); color: var(--color-danger); }
.na-bel-bericht { background: var(--color-info-bg); color: var(--color-info); }

.na-bel-tekst {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.na-bel-tekst strong {
    font-size: 14px;
}

.na-bel-tekst span {
    font-size: 13px;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.na-bel-tijd {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.na-bel-punt {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
}

.na-bel-instellingen {
    color: var(--color-primary);
    font-size: 13px;
    text-decoration: none;
}

/* Enkel op gsm/tablet: bv. een actie in het ⋯-menu die op de computer als eigen knop in de werkbalk staat. */
.na-alleen-mobiel {
    display: none !important;
}

@media (max-width: 900px) {
    .na-dropdown-item.na-alleen-mobiel {
        display: flex !important;
    }

    .na-dropdown.na-alleen-mobiel {
        display: inline-flex !important;
    }

    span.na-alleen-mobiel {
        display: contents !important;
    }

    div.na-alleen-mobiel,
    details.na-alleen-mobiel {
        display: block !important;
    }

    /* Tekst onder de titel van elke kaart maximaal twee regels (sinds 08/10/2026 overal, eerst enkel de Inbox);
       labels op één rij naast de acties. */
    .na-tablecard-subtitle {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .na-inbox-labels {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    /* ── Kop ─────────────────────────────────────────────────────────────────────────────────── */
    .na-page-header {
        margin-bottom: 12px;
    }

    .na-page-header .na-page-header-row {
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: center !important;
        gap: 8px 10px;
    }

    /* Titel, knoppen en ondertitel worden rechtstreeks geplaatst: titel en knoppen op de eerste rij,
       de ondertitel eronder. */
    .na-page-header .na-page-header-text {
        display: contents;
    }

    .list-page-shell .na-page-header .na-page-header-title,
    .na-page-header .na-page-header-title {
        order: 1;
        flex: 0 1 auto;
        margin: 0 !important;
        font-size: 24px !important;
        line-height: 1.2 !important;
        overflow-wrap: normal;
    }

    .na-page-header .na-page-header-actions,
    .na-services-page .na-page-header .na-page-header-actions {
        order: 2;
        display: flex !important;
        flex-wrap: wrap;
        justify-content: flex-end !important;
        align-items: center;
        gap: 6px;
        width: auto !important;
        margin-left: auto;
    }

    /* Agenda: de afgesproken actierij (Afspraak toevoegen op natuurlijke breedte, Uren blokkeren, vernieuwen)
       blijft één volle rij onder de titel. */
    .na-page-header .na-page-header-actions:has(.agenda-add-appointment-action) {
        display: grid !important;
        grid-template-columns: max-content minmax(0, 1fr) 40px;
        flex: 1 0 100%;
        width: 100% !important;
        margin-left: 0;
    }

    .na-page-header .na-page-header-actions:has(.agenda-add-appointment-action) .agenda-mobile-header-action:not(.agenda-mobile-refresh-action) {
        width: 100%;
    }

    .na-page-header .na-page-header-actions:has(.agenda-add-appointment-action) .na-btn:not(.na-btn-icononly) {
        padding: 0 10px;
        font-size: 13px;
        gap: 5px;
    }

    /* "Uren blokkeren" zonder slotje: anders past de tekst niet naast "Afspraak toevoegen". */
    .na-page-header .na-page-header-actions:has(.agenda-add-appointment-action) .agenda-mobile-header-action:not(.agenda-mobile-refresh-action) svg {
        display: none;
    }

    /* Marketing: + Campagne naast de titel; het saldo en "Tegoed bijkopen" samen op de rij eronder.
       Anders wrapten saldo en twee knoppen in drie stukken over de kop. */
    .na-page-header .na-page-header-actions:has(.mkt-tegoedchip) {
        display: contents !important;
    }

    .na-page-header .na-page-header-actions .mkt-kop-campagne {
        order: 2;
        margin-left: auto;
    }

    .na-page-header .na-page-header-actions .mkt-tegoedmelding,
    .na-page-header .na-page-header-actions .mkt-tegoedchip,
    .na-page-header .na-page-header-actions .mkt-kop-bijkopen {
        order: 3;
    }

    .na-page-header .na-page-header-actions .mkt-kop-bijkopen {
        margin-left: auto;
    }

    /* Zonder kaarticoon passen saldo en "Tegoed bijkopen" samen op één rij (zoals het slotje bij "Uren blokkeren"). */
    .na-page-header .na-page-header-actions .mkt-kop-bijkopen svg {
        display: none;
    }

    /* Knoppen in de kop iets compacter, zodat titel en knop vaker naast elkaar passen. */
    .na-page-header-actions .na-btn-md:not(.na-btn-icononly) {
        height: 38px;
        padding: 0 12px;
        gap: 6px;
    }

    .na-page-header .na-page-header-subtitle {
        order: 3;
        flex: 1 0 100%;
        margin: 0;
        font-size: 13px;
    }

    /* ── Werkbalk ────────────────────────────────────────────────────────────────────────────── */
    .na-toolbar {
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: center !important;
        gap: 8px;
    }

    .na-toolbar .na-toolbar-start {
        flex: 1 1 200px;
        width: auto !important;
        min-width: 0;
    }

    .na-toolbar .na-toolbar-center {
        flex: 1 1 100%;
        width: auto !important;
    }

    .na-toolbar .na-toolbar-end {
        flex: 0 0 auto;
        flex-wrap: wrap;
        justify-content: flex-end !important;
        width: auto !important;
        margin-left: auto !important;
    }

    /* ── Tabs ────────────────────────────────────────────────────────────────────────────────── */
    .na-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .na-tabs::-webkit-scrollbar {
        display: none;
    }

    .na-tabs .na-tab,
    .na-tabs > .na-btn {
        flex: 0 0 auto;
    }

    /* Een knop met tekst die op de gsm enkel zijn icoon toont (08/10/2026), zodat de kopknoppen op één rij
       passen. Geef de knop een AriaLabel: dat blijft de naam voor schermlezers. */
    .na-knop-gsm-icoon .na-btn-label { display: none; }
    .na-btn.na-knop-gsm-icoon:not(.na-btn-icononly) { padding-left: 0; padding-right: 0; width: 40px; justify-content: center; }

    /* Wat op de computer naast iets anders staat en op de gsm verdwijnt (bv. "Alle" in de Inbox, dat op
       de gsm in het kanaalpaneel staat). Eerdere regels met een hogere specificiteit wonnen hiervan. */
    .na-hide-mobile {
        display: none !important;
    }

    /* ── Kaart ───────────────────────────────────────────────────────────────────────────────── */
    .na-tablecard-actions {
        margin-left: auto;
    }

    .na-tablecard-actions .na-btn {
        min-width: 38px;
        min-height: 36px;
    }

    /* Betalingshistoriek: geen Lijst/Kalender zoals in de Agenda, dus vorige/vandaag/volgende en Filter
       samen op de eerste rij; het filterpaneel (Van/Tot) klapt eronder open. */
    .payment-history-filter-row.agenda-control-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .payment-history-filter-row .agenda-mobile-date-nav.na-inbox-filters {
        grid-column: 1;
        grid-row: 1;
    }

    .payment-history-filter-row .agenda-advanced-filterbar .na-filterbar-toggle {
        grid-column: 2;
        grid-row: 1;
    }

    .payment-history-filter-row .agenda-advanced-filterbar .na-filterbar-body {
        grid-row: 2;
    }
}

/* Venster: een knop die links onderaan hoort (bv. "Wissen" naast Annuleren/Toepassen). Op de gsm lopen de
   knoppen van het venster al over de volle breedte (na-components.css). */
.na-modal-footer .na-modal-footer-start {
    margin-right: auto;
}

/* ── Opvolgen onderaan op de gsm (12/10/2026): klein menu net boven de knop met Berichten, Terugbelverzoeken en
   Taken. Geen donkere achtergrond: de pagina blijft zichtbaar; een tik ernaast sluit het menu (de laag erachter). ── */
.na-appnav-menu,
.na-appnav-menu-achter { display: none; }

@media (max-width: 900px) {
    .na-appnav .na-appnav-opvolgen.active { color: var(--color-primary); }
    .na-appnav-pijl { font-size: 9px; margin-left: 1px; }

    .na-appnav-menu-achter {
        display: block;
        position: fixed;
        inset: 0;
        z-index: calc(var(--z-appnav) + 1);
    }

    .na-appnav-menu {
        display: block;
        position: fixed;
        right: 8px;
        bottom: calc(68px + env(safe-area-inset-bottom));
        z-index: calc(var(--z-appnav) + 2);
        width: 256px;
        padding: 4px;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: 12px;
        box-shadow: var(--shadow-lg);
    }

    .na-appnav-menu::after {
        content: "";
        position: absolute;
        right: 30px;
        bottom: -6px;
        width: 10px;
        height: 10px;
        background: var(--color-surface);
        border-right: 1px solid var(--color-border);
        border-bottom: 1px solid var(--color-border);
        transform: rotate(45deg);
    }

    .na-appnav-menu-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px;
        border-radius: 8px;
        color: var(--color-text);
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
        white-space: nowrap;
    }

    .na-appnav-menu-item:hover,
    .na-appnav-menu-item:focus-visible { background: var(--color-surface-secondary); }

    .na-appnav-menu-item b {
        margin-left: auto;
        min-width: 22px;
        padding: 1px 7px;
        border-radius: 999px;
        font-size: 11.5px;
        text-align: center;
    }

    .na-appnav-menu-bericht .na-icon,
    .na-appnav-menu-bericht b { color: var(--color-info); }
    .na-appnav-menu-bericht b { background: var(--color-info-bg); }
    .na-appnav-menu-terugbellen .na-icon,
    .na-appnav-menu-terugbellen b { color: var(--color-danger); }
    .na-appnav-menu-terugbellen b { background: var(--color-danger-bg); }
    .na-appnav-menu-taak .na-icon,
    .na-appnav-menu-taak b { color: var(--color-ai); }
    .na-appnav-menu-taak b { background: var(--color-ai-bg); }
}

/* Wachten op goedkeuring in Opvolgen (12/10/2026): amber zoals de tegel op het dashboard. */
@media (max-width: 900px) {
    .na-appnav-menu-aanvraag .na-icon,
    .na-appnav-menu-aanvraag b { color: var(--color-warning); }
    .na-appnav-menu-aanvraag b { background: var(--color-warning-bg); }
}

/* ── Menu ☰ (12/10/2026, mockup B): kopjes per groep, aantallen als bolletje rechts, Opvolgen als groep.
   Op de gsm een breder menu en zonder wat al in de balk onderaan staat (menu-dubbel-gsm). ── */
.menu-kop {
    padding: 14px 14px 4px;
    color: var(--color-text-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.menu nav .menu-label { flex: 1 1 auto; }

.menu-teller {
    flex: none;
    min-width: 22px;
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.menu-teller-totaal { background: var(--color-danger); color: var(--color-text-on-primary); }
.menu-teller-aanvraag { background: var(--color-warning-bg); color: var(--color-warning); }
.menu-teller-bericht { background: var(--color-info-bg); color: var(--color-info); }
.menu-teller-terugbellen { background: var(--color-danger-bg); color: var(--color-danger); }
.menu-teller-taak { background: var(--color-ai-bg); color: var(--color-ai); }

.menu-submenu a.menu-opvolg-item { display: flex; align-items: center; gap: 8px; }
.menu-submenu a.menu-opvolg-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.desktop-menu-collapsed .menu-kop,
.desktop-menu-collapsed .menu-teller { display: none; }

@media (max-width: 900px) {
    body .app > aside.menu,
    body .app > aside.menu.mobile-open { width: min(86vw, 320px) !important; }
    .menu nav .menu-dubbel-gsm { display: none !important; }
}