/* EasyFlex branding */
:root {
    --md-primary-fg-color: #4FBEBE;
    --md-primary-fg-color--light: #7ED2D2;
    --md-primary-fg-color--dark: #3A9999;
    --md-accent-fg-color: #4FBEBE;
    --md-text-font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --md-code-font-family: "Roboto Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
}

/* Forceer Poppins voor body-tekst en headings, met fallback-stack
   indien Google Fonts niet geladen kan worden (bijv. offline / geblokkeerd) */
body,
.md-typeset,
.md-header,
.md-tabs,
.md-nav {
    font-family: var(--md-text-font-family) !important;
}

/* Code blocks behouden monospace */
code, pre, kbd, samp, .md-typeset code, .md-typeset pre {
    font-family: var(--md-code-font-family) !important;
}

/* Body-tekst iets compacter (Material default = 0.8rem) */
.md-typeset {
    font-size: 0.7rem;
}

/* Op korte pagina's (bv. ds_bi_declaratieregels, ds_rf_controlelijst,
   ds_rf_decl_bijlagen) kan de laatste H2 niet ver genoeg naar boven
   scrollen, waardoor Material's IntersectionObserver de heading
   erboven als actief blijft markeren in de TOC. Met extra bodemruimte
   kan ook de laatste sectie de top bereiken zodat de observer 'm pakt.
   We gebruiken hier expliciet GEEN scroll-padding-top — Material's
   eigen --md-scroll-margin is op de observatie-band gekalibreerd; een
   extra padding zou ankers buiten die band laten landen. */
.md-content__inner {
    padding-bottom: 50vh;
}

/* Easyflex logo links boven groter en geheel zwart */
.md-header__button.md-logo {
    padding: 0 0.4rem;
    margin: 0;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
    height: 2.5rem !important;
    width: auto !important;
    /* filter: brightness(0) maakt elke opaque pixel zwart, ongeacht de
       originele SVG fill-kleuren */
    filter: brightness(0) !important;
}

/* Verticale afstand tussen header (met logo) en de onderliggende
   tabs-row tot een minimum reduceren */
.md-header,
.md-header__inner {
    padding-top: 0;
    padding-bottom: 0;
}

.md-tabs {
    margin-top: 0;
    padding-top: 0;
}

.md-grid {
    max-width: 100%;
}

/* Sidebar-aanpassingen alleen voor desktop; op mobiel is .md-sidebar--primary
   de drawer die door de hamburger wordt geopend en die Material standaard
   met een vaste breedte + translateX positioneert. fit-content breekt dat. */
@media screen and (min-width: 76.25em) {
    .md-sidebar--primary {
        width: fit-content;
    }

    .md-sidebar--primary .md-sidebar__scrollwrap {
        overflow-x: hidden !important;
        width: fit-content !important;
    }

    .md-sidebar--primary .md-sidebar__inner {
        width: fit-content !important;
    }

    .md-sidebar--primary .md-nav__link {
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: unset !important;
        max-width: none !important;
        width: auto !important;
    }

    .md-sidebar--primary .md-nav__item {
        overflow: visible !important;
    }

    .md-sidebar--primary .md-nav__list {
        overflow: visible !important;
    }

    .md-sidebar--primary .md-nav {
        overflow: visible !important;
    }
}

.md-content {
    max-width: none;
}

/* Verplicht kolom: hele cel kleuren */
td:has(.verplicht-v),
td:has(.verplicht-f),
td:has(.verplicht-c),
td:has(.verplicht-o) {
    text-align: center;
    font-weight: bold;
}

td:has(.verplicht-v) {
    background-color: #ffebe5;
}

td:has(.verplicht-f) {
    background-color: #fffae5;
}

td:has(.verplicht-c) {
    background-color: #e3fcef;
}

td:has(.verplicht-o) {
    background-color: #deebff;
}

/* Zoekresultaten: beperkte preview */
.md-search-result__teaser {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Datumkolom (eerste kolom) niet laten wrappen */
.md-typeset table:not([class]) td:first-child,
.md-typeset table:not([class]) th:first-child {
    white-space: nowrap;
}

/* Inklapbare toelichtingen (<details>) binnen tabel-cellen moeten wel wrappen,
   anders blijven ze door de white-space:nowrap van de eerste kolom op één
   regel staan en lopen ze ver buiten het scherm. */
.md-typeset table:not([class]) td details {
    white-space: normal;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
}

.md-typeset table:not([class]) td details summary {
    white-space: nowrap;
}

/* Tabellen Parameters / Fields / Exceptions allemaal dezelfde breedte
   (100% van de content-area). Met display:table (i.p.v. Material's
   default inline-block) en width:100% loopt de laatste kolom door tot
   het rechtereinde van de tabel; achtergrondkleur en borders ook.
   De extra selector .md-typeset__table table dekt ook de post-wrap
   staat (Material wraps tables na page-load voor responsive scroll),
   waardoor de "flicker" bij navigatie verdwijnt. */
.md-typeset table:not([class]),
.md-typeset__table table:not([class]) {
    display: table !important;
    width: 100% !important;
    table-layout: auto;
}

/* Material wrapt tables na page-load voor responsive horizontaal scrollen.
   Met display:contents wordt de wrapper "transparant" in de layout — de
   table blijft een directe child van .md-typeset, dus geen breedte-shift
   meer bij wrap. Dit elimineert de flicker bij paginawissel. */
.md-typeset__scrollwrap,
.md-typeset__table {
    display: contents !important;
}

/* Verticale kolom-scheidingen tussen cellen toevoegen
   (Material toont standaard alleen horizontale borders) */
.md-typeset table:not([class]) td,
.md-typeset table:not([class]) th {
    border-right: 0.05rem solid var(--md-typeset-table-color, rgba(0, 0, 0, 0.07));
}

.md-typeset table:not([class]) td:last-child,
.md-typeset table:not([class]) th:last-child {
    border-right: 0;
}

/* Header-rij achtergrondkleur conform Confluence (Atlassian Design System N20) */
.md-typeset table:not([class]) th {
    background-color: #f4f5f7;
}