/*
  Acurat WASM-app globale stijlen.
  Huisstijl: vers groen (#2E7D32), font Selawik -> Segoe UI -> system-ui.
  Structuur spiegelt de React-app (AppShell / Sidebar / Topbar / CrudResource).
  Versie: gepolijst conform React-referentie design-spec.
*/

/* ===== Selawik webfonts (lokaal gebundeld, SIL OFL) ===== */
@font-face {
    font-family: "Selawik";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("/fonts/selawik-light.woff2") format("woff2");
}
@font-face {
    font-family: "Selawik";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/selawik-regular.woff2") format("woff2");
}
@font-face {
    font-family: "Selawik";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/selawik-semibold.woff2") format("woff2");
}
@font-face {
    font-family: "Selawik";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/selawik-bold.woff2") format("woff2");
}

/* ===== Fraunces (SIL OFL) — display-serif voor publieke landing ===== */
@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/fraunces-latin.woff2") format("woff2");
}

/* ===== IBM Plex Mono (SIL OFL) — mono-labels/lotnummers ===== */
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2");
}

/* ===== Design-token laag (exact uit acuratTheme.ts + Fluent-light-neutralen) ===== */
:root {
    /* Lettertype */
    --font-ui: "Selawik", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont,
               Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Merkramp — tint 80 is de primaire accentkleur (acuratBrand[80]) */
    --brand:        #2E7D32;   /* acuratBrand[80] */
    --brand-hover:  #187527;   /* acuratBrand[70] */
    --brand-fg2:    #187527;   /* actieve-nav-tekst */
    --brand-bg2:    #EFF7EF;   /* acuratBrand[160] — actieve-nav-achtergrond / light-bg */

    /* Neutrale achtergronden (Fluent-light, neutraal grijs — geen blauwige cast) */
    --neutral-bg1:       #ffffff;  /* panelen / kaarten / wit */
    --neutral-bg2:       #fafafa;  /* zijbalk / subtiel-grijs */
    --neutral-bg3:       #f5f5f5;  /* app-achtergrond */
    --neutral-bg2-hover: #f0f0f0;  /* hover op subtiel-grijs vlak */

    /* Strokes */
    --stroke1: #d1d1d1;  /* primaire rand */
    --stroke2: #e0e0e0;  /* subtiele scheider */

    /* Foregrounds */
    --fg1: #242424;  /* primaire tekst */
    --fg2: #424242;  /* secundaire tekst */
    --fg3: #616161;  /* tertiaire tekst */
    --fg4: #9e9e9e;  /* placeholder / uitgedempt */

    /* Radius */
    --radius-sm:  3px;
    --radius-md:  5px;
    --radius-lg:  7px;
    --radius-xl: 10px;

    /* Schaduw */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);

    /* ===== Dichtheidsschaal (Dense Pro / data-first) =====
       Compact = standaard (power-user, BC-achtig).
       Comfortable = ruimer (touch / voorkeur).
       Op smal scherm (<=768px) wordt comfortable afgedwongen via responsive override. */

    /* Typografie */
    --d-font-size:        13px;     /* basisfont compact (comfortable: 14px) */
    --d-font-size-sm:     11.5px;   /* klein labels, tooltips */
    --d-line-height:      1.35;     /* compacte regelafstand */

    /* Spacing-schaal (4px-grid) */
    --d-space-1:  4px;
    --d-space-2:  8px;
    --d-space-3: 12px;
    --d-space-4: 16px;
    --d-space-5: 20px;
    --d-space-6: 24px;

    /* Controls (knoppen, inputs, select) */
    --d-control-height:     28px;   /* compact (comfortable: 36px) */
    --d-control-padding-x:   8px;
    --d-control-padding-y:   4px;   /* compact */

    /* Tabel-rijen */
    --d-row-height:         30px;   /* compact (comfortable: 40px) */
    --d-row-padding-v:       5px;   /* verticale cel-padding */
    --d-row-padding-h:       8px;   /* horizontale cel-padding */

    /* Koptekst (th) */
    --d-th-padding-v:        5px;   /* compact (comfortable: 8px) */
    --d-th-padding-h:        8px;

    /* Shell */
    --d-topbar-height:      44px;   /* compact (comfortable: 56px) */
    --d-sidebar-width:     240px;   /* compact (comfortable: 260px) */
    --d-content-padding-x:  16px;   /* compact (comfortable: 24px) */
    --d-content-padding-y:  10px;   /* compact (comfortable: 16px) */

    /* Ribbon */
    --d-ribbon-padding-v:    4px;   /* compact (comfortable: 6px) */
    --d-ribbon-padding-h:    3px;

    /* Kaart-body */
    --d-card-padding:       12px;   /* compact (comfortable: 20px) */
    --d-fasttab-padding-v:   7px;   /* kop verticaal (comfortable: 10px) */
    --d-fasttab-body-pad:   10px;   /* body van fasttab (comfortable: 16px) */
    --d-field-gap:          10px;   /* veld-grid row-gap (comfortable: 14px) */
    --d-field-col-gap:      14px;   /* veld-grid column-gap (comfortable: 20px) */

    /* FactBox */
    --d-factbox-width:     280px;   /* compact (comfortable: 300px) */
}

/* ===== Comfortable-dichtheid override ===== */
[data-density="comfortable"] {
    --d-font-size:        14px;
    --d-font-size-sm:     12px;
    --d-line-height:      1.5;
    --d-control-height:   36px;
    --d-control-padding-x: 10px;
    --d-control-padding-y:  6px;
    --d-row-height:       40px;
    --d-row-padding-v:     8px;
    --d-row-padding-h:    10px;
    --d-th-padding-v:      8px;
    --d-th-padding-h:     10px;
    --d-topbar-height:    56px;
    --d-sidebar-width:   260px;
    --d-content-padding-x: 24px;
    --d-content-padding-y: 16px;
    --d-ribbon-padding-v:   6px;
    --d-ribbon-padding-h:   4px;
    --d-card-padding:      20px;
    --d-fasttab-padding-v: 10px;
    --d-fasttab-body-pad:  16px;
    --d-field-gap:         14px;
    --d-field-col-gap:     20px;
    --d-factbox-width:    300px;
}

/* ===== Reset & base ===== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: var(--font-ui);
    font-size: var(--d-font-size);
    line-height: var(--d-line-height);
    background-color: var(--neutral-bg3);
    color: var(--fg1);
}

/* ===== Shell (AppShell) ===== */
.acurat-shell {
    display: flex;
    height: 100dvh;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    background-color: var(--neutral-bg3);
}

/* ===== Zijbalk (breedte via dichtheidstoken) ===== */
.acurat-sidebar {
    width: var(--d-sidebar-width);
    flex-shrink: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--neutral-bg2);
    border-right: 1px solid var(--stroke2);
    overflow: hidden;
    transition: width 0.18s ease;
    z-index: 10;
}

/* Ingeklapt: 60px compact */
.acurat-sidebar.sidebar--ingeklapt {
    width: 60px;
}

/* ===== Navigatie-kop ===== */
.nav-header {
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--d-topbar-height);
    padding: 0 12px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--stroke2);
    overflow: hidden;
}

.nav-header--ingeklapt {
    padding: 0;
    justify-content: center;
}

.nav-logo {
    /* SVG-beeldmerk: color = currentColor voor de <rect fill="currentColor"> */
    color: var(--brand);
    flex-shrink: 0;
}

.nav-logo-klein {
    /* Iets groter in ingeklapte staat */
}

.nav-wordmark {
    font-size: 16px;
    font-weight: 700;
    color: var(--fg1);
    letter-spacing: -0.3px;
    white-space: nowrap;
}

.nav-wordmark-dot {
    color: var(--brand);
}

.nav-subtitle {
    font-size: 10.5px;
    color: var(--fg4);
    letter-spacing: 0.4px;
    white-space: nowrap;
    margin-left: 2px;
}

/* ===== Nav-scroll (body van de zijbalk) ===== */
.nav-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    /* Dunne scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--stroke1) transparent;
}

.nav-scroll::-webkit-scrollbar { width: 4px; }
.nav-scroll::-webkit-scrollbar-track { background: transparent; }
.nav-scroll::-webkit-scrollbar-thumb { background: var(--stroke1); border-radius: 4px; }

/* Sectie-margin conform spec: 8px boven */
.nav-sectie { margin-top: 8px; }

/* Sectie-titel: 11px, uppercase, letter-spacing 0.5px, #999, weight 700 */
.nav-sectie-titel {
    color: var(--fg4);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 5px 10px 3px;
    white-space: nowrap;
    overflow: hidden;
}

.nav-sectie-scheider {
    height: 8px;
    margin: 4px 0 2px;
    border-top: 1px solid var(--stroke2);
}

/* Nav-links — compact hoogte via dichtheid, 5px radius, strakke gap */
.nav-link {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 30px;
    padding: 0 8px;
    border-radius: var(--radius-md);
    color: var(--fg2);
    text-decoration: none;
    font-size: var(--d-font-size);
    font-weight: 400;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    transition: background-color 0.12s, color 0.12s;
}

.nav-link:hover {
    background-color: var(--neutral-bg2-hover);
    color: var(--fg1);
}

/* Actieve staat: bg brand-bg2 (#EFF7EF), tekst brand-fg2 (#187527), weight 600 */
.nav-link--actief {
    background-color: var(--brand-bg2);
    color: var(--brand-fg2);
    font-weight: 600;
}

/* Linker accent-balk: 3px, brand-kleur, afgerond */
.nav-link--actief::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background-color: var(--brand);
}

.nav-link--actief:hover {
    background-color: #D8EAD9;
}

/* Icoon-slot: 18-20px conform spec */
.nav-link-icoon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    /* Kleur overerft van nav-link */
}

/* Zorg dat FluentIcon SVG de kleur overneemt van de parent */
.nav-link-icoon svg,
.nav-link-icoon fluent-icon {
    fill: currentColor;
    color: inherit;
}

.nav-link-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-badge-todo {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--fg4);
    background: var(--neutral-bg2-hover);
    border-radius: var(--radius-sm);
    padding: 1px 5px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Ingeklapt: centreer het icoon */
.sidebar--ingeklapt .nav-link {
    padding: 0;
    justify-content: center;
    gap: 0;
}

/* ===== Nav-voet ===== */
.nav-voet {
    flex-shrink: 0;
    padding: 10px 16px;
    border-top: 1px solid var(--stroke2);
    font-size: 11px;
    color: var(--fg4);
    white-space: nowrap;
    overflow: hidden;
}

/* ===== Scrim (mobiel overlay) ===== */
.acurat-scrim {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.42);
    z-index: 9;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

/* ===== Hoofdgebied ===== */
.acurat-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.main--vergrendeld {
    overflow: hidden;
}

/* ===== Topbar (hoogte via dichtheidstoken) ===== */
.acurat-topbar {
    flex-shrink: 0;
    height: var(--d-topbar-height);
    background: var(--neutral-bg1);
    border-bottom: 1px solid var(--stroke2);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 var(--d-content-padding-x);
    z-index: 8;
}

/* Hamburger: compact 30px icoon-stijl */
.topbar-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: var(--radius-md);
    background: none;
    cursor: pointer;
    color: var(--fg2);
    flex-shrink: 0;
    transition: background-color 0.12s;
    padding: 0;
}

.topbar-hamburger:hover { background-color: var(--neutral-bg2-hover); }
.topbar-hamburger:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.topbar-zoek { flex: 1; max-width: 380px; }

.topbar-rechts {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.topbar-tenant {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fg3);
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-scheider {
    color: var(--stroke2);
    margin: 0 4px;
    font-size: 14px;
    user-select: none;
}

.topbar-gebruiker-knop {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 4px 4px;
    min-width: 0;
    border: none;
    border-radius: var(--radius-md);
    background: none;
    cursor: pointer;
    font: inherit;
    transition: background-color 0.12s;
}

.topbar-gebruiker-knop:hover { background-color: var(--neutral-bg2-hover); }
.topbar-gebruiker-knop:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.topbar-gebruiker-naam {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.topbar-gebruiker-label {
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
    color: var(--fg1);
}

.topbar-gebruiker-rol {
    font-size: 10.5px;
    color: var(--fg4);
    white-space: nowrap;
}

.topbar-avatar-caret {
    display: grid;
    place-items: center;
    color: var(--fg4);
    flex-shrink: 0;
}

/* Gebruiker-wrap (relatief voor dropdown) */
.topbar-gebruiker-wrap {
    position: relative;
}

/* Avatar cirkel */
.topbar-avatar {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--brand);
    color: white;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.3px;
}

/* Gebruiker dropdown-menu */
.topbar-gebruiker-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: var(--neutral-bg1);
    border: 1px solid var(--stroke2);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    min-width: 160px;
    z-index: 100;
    padding: 4px 0;
}

.topbar-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: none;
    font: inherit;
    font-size: 13px;
    color: var(--fg1);
    cursor: pointer;
    text-align: left;
    transition: background-color 0.1s;
}

.topbar-menu-item:hover { background-color: var(--neutral-bg3); }

.topbar-menu-icoon {
    display: grid;
    place-items: center;
    color: var(--fg3);
}

.topbar-login-link {
    font-size: 12.5px;
    color: var(--brand);
    text-decoration: none;
    font-weight: 600;
}

/* ===== Paginainhoud ===== */
.acurat-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--d-content-padding-y) var(--d-content-padding-x);
    outline: none;
}

/* ===== Pagina-kopteksten ===== */
.acurat-page-header { margin-bottom: 0.85rem; }

.acurat-page-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--fg1);
    margin: 0 0 2px;
}

/* De paginatitel krijgt bij navigatie programmatische focus (schermlezer-a11y);
   onderdruk de UA-focusring zodat er geen zwart kader rond de titel verschijnt. */
.acurat-page-title:focus {
    outline: none;
}

.acurat-page-subtitle {
    font-size: 0.875rem;
    color: var(--fg3);
    margin: 0;
}

/* ===== Kaartcontainer ===== */
.acurat-card {
    background: var(--neutral-bg1);
    border: 1px solid var(--stroke2);
    border-radius: var(--radius-lg);
    padding: var(--d-card-padding);
    margin-bottom: 0.625rem;
    box-shadow: var(--shadow-sm);
}

/* ===== Toolbar-rij ===== */
.acurat-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

/* Toolbar-labels verbergen op kleine schermen */
@media (max-width: 640px) {
    .toolbar-label { display: none; }
}

/* ===== Status-badges (spiegelt StatusBadge.tsx) ===== */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px 3px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
    border: 1px solid transparent;
}

/* Gekleurde dot — 6×6px cirkel, kleur via currentColor */
.status-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
}

/* Klein-variant: minder padding, kleinere tekst */
.status-badge--klein {
    padding: 1px 7px 1px 6px;
    font-size: 11px;
    gap: 5px;
}

/* Status-kleuren conform spec (brand = merkgroen op EFF7EF, success = systeem-groen op #E8F5E9) */
.status-badge--neutral  { background: var(--neutral-bg2-hover); color: var(--fg3);    }
.status-badge--brand    { background: var(--brand-bg2);          color: var(--brand-fg2); }
.status-badge--info     { background: #E3F2FD;                   color: #1565C0;      }
.status-badge--warning  { background: #FFF8E1;                   color: #B7791F;      }
.status-badge--success  { background: #E8F5E9;                   color: #2E7D32;      }
.status-badge--danger   { background: #FFEBEE;                   color: #B71C1C;      }

/* ===== CrudLijst ===== */
.crud-indeling {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.crud-indeling > .acurat-card,
.crud-indeling > div:first-child {
    flex: 1;
    min-width: 0;
}

/* ===== FactBox (detailpaneel) ===== */
.crud-factbox {
    width: var(--d-factbox-width);
    flex-shrink: 0;
    position: sticky;
    top: 8px;
    max-height: calc(100dvh - 100px);
    display: flex;
    flex-direction: column;
    background: var(--neutral-bg1);
    border: 1px solid var(--stroke2);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.factbox-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--stroke2);
    background: var(--neutral-bg2);
    flex-shrink: 0;
}

.factbox-titel {
    font-weight: 600;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.factbox-body {
    padding: 12px 14px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.factbox-veld {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.factbox-label {
    color: var(--fg4);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 700;
}

.factbox-waarde {
    font-size: 13px;
    color: var(--fg1);
}

/* FactBox verbergen op smal scherm */
@media (max-width: 1100px) {
    .crud-factbox { display: none; }
}

/* ===== Detail-link ===== */
.acurat-detail-link {
    color: var(--brand);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

.acurat-detail-link:hover { text-decoration: underline; }

/* ===== Login-scherm ===== */
.login-scherm {
    display: flex;
    min-height: 100vh;
    background-color: var(--neutral-bg3);
}

.login-merkpaneel {
    flex: 1;
    background: radial-gradient(120% 80% at 15% 0%, #1A6B27 0%, rgba(26,107,39,0) 55%),
                linear-gradient(155deg, #0A3411 0%, #0E4417 45%, #166024 100%);
    color: #EFF7EF;
    padding: 48px 52px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.login-merk-top {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.login-merk-naam {
    font-size: 19px;
    font-weight: 700;
    color: #EFF7EF;
}

.login-merk-midden {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 440px;
    position: relative;
    z-index: 1;
}

.login-pitch {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.18;
    color: #EFF7EF;
}

.login-pitch-sub {
    font-size: 14.5px;
    opacity: 0.84;
    line-height: 1.6;
}

.login-punten {
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.login-punten li::before {
    content: '✓  ';
    color: #A5D6A7;
    font-weight: 700;
}

.login-merk-voet {
    font-size: 11.5px;
    opacity: 0.65;
    position: relative;
    z-index: 1;
}

.login-formpaneel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: white;
}

.login-formdoos {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.login-kop {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--fg1);
}

.login-ondertitel {
    font-size: 13.5px;
    color: var(--fg3);
    margin: 0 0 16px;
}

.login-demo-info {
    margin-top: 16px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--neutral-bg3);
    border: 1px solid var(--stroke2);
    color: var(--fg3);
    font-size: 11.5px;
    line-height: 1.5;
}

/* Mobiele login-hero (verborgen op breed scherm) */
.login-mobiel-hero {
    display: none;
    background: radial-gradient(120% 90% at 12% 0%, #1A6B27 0%, rgba(26,107,39,0) 58%),
                linear-gradient(150deg, #0A3411 0%, #0E4417 48%, #166024 100%);
    border-radius: var(--radius-xl);
    padding: 20px;
    gap: 12px;
    flex-direction: column;
    margin-bottom: 20px;
    box-shadow: 0 6px 20px rgba(10, 52, 17, 0.25);
}

/* ===== Responsief ===== */
@media (max-width: 880px) {
    .login-merkpaneel { display: none; }
    .login-formpaneel { background: var(--neutral-bg3); }
    .login-mobiel-hero { display: flex; }
}

@media (max-width: 768px) {
    /* Op mobiel altijd comfortable-dichtheid (tap-targets >= 40px), ongeacht voorkeur */
    :root {
        --d-font-size:          14px;
        --d-font-size-sm:       12px;
        --d-line-height:        1.5;
        --d-control-height:     40px;
        --d-control-padding-x:  12px;
        --d-control-padding-y:   8px;
        --d-row-height:         44px;
        --d-row-padding-v:      10px;
        --d-row-padding-h:      12px;
        --d-th-padding-v:        8px;
        --d-th-padding-h:       10px;
        --d-topbar-height:      52px;
        --d-sidebar-width:     260px;
        --d-content-padding-x:  16px;
        --d-content-padding-y:  12px;
        --d-ribbon-padding-v:    6px;
        --d-ribbon-padding-h:    4px;
        --d-card-padding:       16px;
        --d-fasttab-padding-v:   9px;
        --d-fasttab-body-pad:   14px;
        --d-field-gap:          12px;
        --d-field-col-gap:      16px;
        --d-factbox-width:     100%;
    }

    /* Zijbalk als overlay op mobiel */
    .acurat-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 260px !important;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        z-index: 1000;
        box-shadow: 4px 0 16px rgba(0,0,0,0.12);
    }

    .shell--mobiel-open .acurat-sidebar {
        transform: translateX(0);
    }

    /* Hamburger en topbar-knoppen ook groter op mobiel */
    .topbar-hamburger,
    .topbar-thema-knop,
    .topbar-dichtheid-knop { width: 40px; height: 40px; }

    .acurat-content { padding: var(--d-content-padding-y) var(--d-content-padding-x); }
    .topbar-tenant { display: none; }
    .topbar-gebruiker-naam { display: none; }
    .topbar-scheider { display: none; }
    .topbar-avatar-caret { display: none; }
    /* Dichtheids-toggle verbergen op mobiel (altijd comfortable) */
    .topbar-dichtheid-knop { display: none; }

    /* Paginakop (titel + rechter-acties) mag wrappen i.p.v. de acties af te kappen */
    .acurat-page-head { flex-wrap: wrap; }
    .acurat-page-head-right { flex-wrap: wrap; }
}

/* ============================================================================
   ENTERPRISE DESIGN-SYSTEM (Business-Central-dichtheid)
   AcuratPage · AcuratRibbon · AcuratListView · AcuratFactBox
   Naast de CrudLijst-componenten; metadata-gedreven render-motor (ook voor Studio).
   ============================================================================ */

/* ----- Pagina-scaffold (compact) ----- */
.acurat-page { display: flex; flex-direction: column; }
.acurat-page-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-bottom: 0.5rem; gap: 10px;
}
.acurat-page-head-right { display: flex; align-items: center; gap: 6px; }
.acurat-page-body { display: flex; gap: 0.75rem; align-items: flex-start; }
.acurat-page-main { flex: 1; min-width: 0; }
.acurat-page-aside { width: var(--d-factbox-width); flex-shrink: 0; position: sticky; top: 6px; }

@media (max-width: 1100px) {
    .acurat-page-body { flex-direction: column; align-items: stretch; }
    /* List/main moet de volle breedte vullen wanneer de FactBox eronder stapelt
       (anders bleef main op content-breedte hangen → witruimte rechts). */
    .acurat-page-main { width: 100%; }
    .acurat-page-aside { width: 100%; position: static; }
}

/* ----- Read-only record-detail (gedeeld door detailkaarten: Klacht, Werkorder, …) ----- */
.acurat-detail-card {
    background: var(--neutral-bg1); border: 1px solid var(--stroke2);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 3px 12px 10px;
}
.acurat-detail-sectie-titel {
    font-size: 10.5px; font-weight: 700; color: var(--fg4);
    text-transform: uppercase; letter-spacing: 0.4px; padding: 10px 0 3px;
}
.acurat-detail-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 24px;
}
.acurat-detail-rij {
    display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
    padding: 5px 0; border-bottom: 1px solid var(--neutral-bg3); font-size: var(--d-font-size);
}
.acurat-detail-label { color: var(--fg3); }
.acurat-detail-waarde { color: var(--fg1); font-weight: 500; text-align: right; }
.acurat-detail-blok { padding: 10px 0 4px; }
.acurat-detail-tekst { font-size: 13px; color: var(--fg1); white-space: pre-wrap; line-height: 1.5; }

/* ----- Command-ribbon (compact) ----- */
.acurat-ribbon {
    display: flex; align-items: stretch; gap: 0;
    background: var(--neutral-bg2); border: 1px solid var(--stroke2); border-radius: var(--radius-md);
    padding: var(--d-ribbon-padding-v) var(--d-ribbon-padding-h); margin-bottom: 0.6rem; overflow-x: auto;
    box-shadow: var(--shadow-sm);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.ribbon-group {
    display: flex; flex-direction: column; align-items: center;
    padding: 0 7px; border-right: 1px solid var(--stroke2);
}
.ribbon-group:last-child { border-right: none; }
.ribbon-group-actions { display: flex; align-items: center; gap: 1px; min-height: 26px; }
.ribbon-group-title {
    font-size: 9.5px; color: var(--fg4); margin-top: 2px;
    text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap;
}
.ribbon-btn-wrap { position: relative; }
.ribbon-btn-label { font-size: var(--d-font-size); }
/* Caret-icoon naast label */
.ribbon-btn-caret {
    display: inline-flex;
    align-items: center;
    margin-left: 3px;
    opacity: 0.7;
    vertical-align: middle;
}
.ribbon-menu {
    position: absolute; top: 100%; left: 0; z-index: 50; margin-top: 2px;
    background: var(--neutral-bg1); border: 1px solid var(--stroke1); border-radius: var(--radius-md);
    box-shadow: 0 4px 14px rgba(0,0,0,0.12); min-width: 180px; padding: 4px;
}
.ribbon-menu-item {
    display: block; width: 100%; text-align: left; border: none; background: none;
    padding: 6px 10px; font-size: 13px; color: var(--fg1); cursor: pointer; border-radius: var(--radius-sm);
    transition: background-color 0.1s;
}
.ribbon-menu-item:hover:not(:disabled) { background: var(--brand-bg2); color: var(--brand-fg2); }
.ribbon-menu-item:disabled { color: var(--fg4); cursor: default; }

/* ----- ListView (compact / dense) ----- */
.acurat-listview {
    background: var(--neutral-bg1); border: 1px solid var(--stroke2); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); overflow: hidden;
    display: flex; flex-direction: column;
}
.alv-toolbar {
    display: flex; align-items: center; gap: 6px;
    padding: 5px var(--d-row-padding-h); border-bottom: 1px solid var(--stroke2);
}
.alv-toolbar-spacer { flex: 1; }
/* Fluid zoekbalk: vult mee maar binnen grenzen */
.alv-search { flex: 1 1 200px; min-width: 120px; max-width: 320px; }
.alv-count { font-size: var(--d-font-size-sm); color: var(--fg3); white-space: nowrap; }
.alv-colchooser { position: relative; }
.alv-colchooser-panel {
    position: absolute; right: 0; top: 100%; z-index: 50; margin-top: 2px;
    background: var(--neutral-bg1); border: 1px solid var(--stroke1); border-radius: var(--radius-md);
    box-shadow: 0 4px 14px rgba(0,0,0,0.12); min-width: 200px; padding: 4px;
    max-height: 320px; overflow-y: auto;
}
.alv-colchooser-head { font-size: 10.5px; font-weight: 600; color: var(--fg4); padding: 3px 6px; text-transform: uppercase; }
.alv-colchooser-row { display: flex; align-items: center; gap: 7px; padding: 3px 6px; font-size: var(--d-font-size); cursor: pointer; }
.alv-colchooser-row:hover { background: var(--neutral-bg3); border-radius: var(--radius-sm); }
.alv-scroll { overflow-x: auto; }

/* Dense grid — sticky header, duidelijke focus-ring, tabular-nums voor getal/geld */
.acurat-grid { width: 100%; border-collapse: collapse; font-size: var(--d-font-size); }
.acurat-grid:focus { outline: none; }
/* Crisp focus-ring: zichtbaar op de hele tabel (toetsenbord-first) */
.acurat-grid:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; box-shadow: 0 0 0 4px rgba(46,125,50,0.12); }
.acurat-grid thead th {
    text-align: left; font-weight: 600; color: var(--fg2); background: var(--neutral-bg3);
    padding: var(--d-th-padding-v) var(--d-th-padding-h); border-bottom: 2px solid var(--stroke1); white-space: nowrap;
    position: sticky; top: 0; z-index: 1; user-select: none; font-size: var(--d-font-size-sm);
    text-transform: uppercase; letter-spacing: 0.25px;
}
.acurat-grid thead th.sortable { cursor: pointer; }
.acurat-grid thead th.sortable:hover { background: var(--neutral-bg2-hover); }
.alv-sort-arrow { margin-left: 4px; color: var(--brand); font-size: 10px; }
.acurat-grid tbody td {
    padding: var(--d-row-padding-v) var(--d-row-padding-h); border-bottom: 1px solid var(--neutral-bg3); color: var(--fg1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px;
    height: var(--d-row-height);
}
/* Tabular-nums op getal- en geld-kolommen */
.acurat-grid .align-right {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.acurat-grid tbody tr { cursor: pointer; transition: background-color 0.10s; }
.acurat-grid tbody tr:hover { background: #f3f8f3; }
/* Focus per rij (toetsenbord-first): wanneer geselecteerd, duidelijke border */
.acurat-grid tbody tr.selected { background: var(--brand-bg2); outline: none; }
.acurat-grid tbody tr.selected td {
    border-bottom-color: #C8E6C9;
    border-top-color: transparent;
}
/* Eerste cel van geselecteerde rij: linker accent-balk (BC-stijl) */
.acurat-grid tbody tr.selected td:first-child {
    border-left: 2px solid var(--brand);
    padding-left: calc(var(--d-row-padding-h) - 2px);
}
.acurat-grid .align-center { text-align: center; }
.acurat-grid .align-left { text-align: left; }
.alv-link { color: var(--brand); text-decoration: none; font-weight: 500; }
.alv-link:hover { text-decoration: underline; }
.alv-empty { padding: 20px 12px; text-align: center; color: var(--fg4); font-size: var(--d-font-size); }
.alv-empty-row td { border-bottom: none; }
.alv-pager {
    display: flex; align-items: center; gap: 6px;
    padding: 5px var(--d-row-padding-h); border-top: 1px solid var(--stroke2);
}
.alv-pager-spacer { flex: 1; }
.alv-pager-info { font-size: var(--d-font-size-sm); color: var(--fg3); }

/* ----- Enterprise-FactBox (efactbox-, compact, op brede schermen naast inhoud) ----- */
.acurat-factbox {
    background: var(--neutral-bg1); border: 1px solid var(--stroke2); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); overflow: hidden;
}
.efactbox-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px; background: var(--neutral-bg3); border-bottom: 1px solid var(--stroke2);
}
.efactbox-title { font-size: var(--d-font-size); font-weight: 600; color: var(--brand); }
.efactbox-body { padding: 2px 0; }
.efactbox-empty { padding: 16px 12px; color: var(--fg4); font-size: var(--d-font-size); text-align: center; }
.efactbox-group { padding: 7px 10px; border-bottom: 1px solid var(--neutral-bg3); }
.efactbox-group:last-child { border-bottom: none; }
.efactbox-group-title {
    font-size: 10px; font-weight: 700; color: var(--fg4);
    text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px;
}
.efactbox-fact { display: flex; justify-content: space-between; gap: 10px; padding: 1px 0; font-size: var(--d-font-size); }
.efactbox-fact-label { color: var(--fg3); }
.efactbox-fact-value {
    font-weight: 600; text-align: right;
    font-variant-numeric: tabular-nums;
}
.efactbox-fact-value.intent-neutral { color: var(--fg1); }
.efactbox-fact-value.intent-brand   { color: var(--brand); }
.efactbox-fact-value.intent-info    { color: #1565C0; }
.efactbox-fact-value.intent-warning { color: #B7791F; }
.efactbox-fact-value.intent-success { color: #2E7D32; }
.efactbox-fact-value.intent-danger  { color: #B71C1C; }
.efactbox-links { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.efactbox-link { font-size: 12px; color: var(--brand); text-decoration: none; }
.efactbox-link:hover { text-decoration: underline; }

/* ===== Blazor error UI ===== */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: #333;
    font-size: 13px;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ===== Laad-voortgang ===== */
.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--brand);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text::after {
    content: var(--blazor-load-percentage-text, "Laden...");
}

/* ===== FluentUI aanpassingen ===== */
fluent-search,
fluent-text-field,
fluent-text-input {
    --accent-fill-rest: var(--brand);
    --accent-fill-hover: var(--brand-hover);
    --accent-fill-active: #1b4d1f;
}

/* FluentUI data-grid lettertype */
fluent-data-grid {
    font-size: 13px;
}

/* ============================================================================
   STUDIO DRAG-DROP KOLOMMENEDITOR
   Twee-panelen indeling: beschikbare velden links, gekozen kolommen rechts.
   Groen (#2E7D32) accent conform Acurat huisstijl.
   ============================================================================ */

/* Twee-kolommen grid voor de panelen */
.studio-dragdrop-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
}

@media (max-width: 900px) {
    .studio-dragdrop-layout {
        grid-template-columns: 1fr;
    }
}

/* Paneel-kopregel */
.studio-paneel-titel {
    font-size: 12px;
    font-weight: 700;
    color: var(--fg3);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.studio-kolom-teller {
    font-size: 11px;
    font-weight: 600;
    color: #2E7D32;
    background: #E8F5E9;
    border-radius: 10px;
    padding: 0 6px;
}

/* Drop-zone: gedeeld basisuiterlijk */
.studio-dropzone {
    min-height: 80px;
    border-radius: 8px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color 0.15s, background-color 0.15s;
}

/* Beschikbare-velden-zone: licht grijs, gestippeld kader */
.studio-dropzone--beschikbaar {
    background: var(--neutral-bg3);
    border: 2px dashed var(--stroke1);
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px;
    padding: 8px;
}

.studio-dropzone--beschikbaar:hover {
    border-color: var(--fg4);
}

/* Gekozen-kolommen-zone: wit, gestippeld groen kader */
.studio-dropzone--gekozen {
    background: var(--neutral-bg1);
    border: 2px dashed #a5d6a7;
    padding: 6px;
}

.studio-dropzone--gekozen:focus-within {
    border-color: #2E7D32;
}

/* Lege gekozen-zone: grotere hint-ruimte */
.studio-dropzone--leeg {
    min-height: 120px;
    justify-content: center;
    align-items: center;
    border-color: #c8e6c9;
    background: #f1f8f1;
}

/* Lege-hint tekst */
.studio-leeg-hint {
    font-size: 12px;
    color: var(--fg4);
    text-align: center;
    padding: 8px;
    pointer-events: none;
    user-select: none;
}

/* Chip (beschikbaar veld) */
.studio-veld-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 14px;
    background: #e8f5e9;
    border: 1px solid #c8e6c9;
    cursor: grab;
    font-size: 12.5px;
    color: #1a3a1e;
    transition: background-color 0.12s, border-color 0.12s, box-shadow 0.12s;
    user-select: none;
    white-space: nowrap;
}

.studio-veld-chip:hover {
    background: #c8e6c9;
    border-color: #2E7D32;
    box-shadow: 0 1px 4px rgba(46, 125, 50, 0.18);
}

.studio-veld-chip:active {
    cursor: grabbing;
    background: #a5d6a7;
}

.studio-chip-label {
    font-weight: 600;
}

.studio-chip-kind {
    font-size: 10.5px;
    color: #4a7f4e;
    font-style: italic;
}

/* Kolom-rij in het gekozen-paneel */
.studio-kolom-rij {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: var(--radius-md);
    background: var(--neutral-bg1);
    border: 1px solid var(--stroke2);
    cursor: grab;
    transition: border-color 0.12s, box-shadow 0.12s, background-color 0.12s;
}

.studio-kolom-rij:hover {
    border-color: #a5d6a7;
    background: #f6fbf6;
    box-shadow: 0 1px 4px rgba(46, 125, 50, 0.10);
}

.studio-kolom-rij:active {
    cursor: grabbing;
}

/* Drag-greep icoon */
.studio-kolom-greep {
    display: flex;
    align-items: center;
    color: #b0b7bf;
    flex-shrink: 0;
    cursor: grab;
}

.studio-kolom-rij:hover .studio-kolom-greep {
    color: #2E7D32;
}

/* Prop-naam hint */
.studio-kolom-prop {
    font-size: 10.5px;
    color: var(--fg4);
    white-space: nowrap;
    flex-shrink: 0;
    font-style: italic;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Drop-target: dunne indicator-balk tussen rijen */
.studio-drop-target {
    height: 4px;
    border-radius: 2px;
    margin: 1px 0;
    background: transparent;
    transition: background-color 0.12s, height 0.12s;
}

.studio-drop-target--actief {
    height: 6px;
    background: #2E7D32;
    box-shadow: 0 0 6px rgba(46, 125, 50, 0.40);
}

/* ============================================================================
   DARK MODE
   Donkere token-waarden via [data-theme="dark"] op <html>.
   ============================================================================ */
[data-theme="dark"] :root,
[data-theme="dark"] {
    --neutral-bg1:       #1e1e1e;
    --neutral-bg2:       #252525;
    --neutral-bg3:       #181818;
    --neutral-bg2-hover: #2e2e2e;
    --stroke1:           #3a3a3a;
    --stroke2:           #2f2f2f;
    --fg1:               #f0f0f0;
    --fg2:               #d0d0d0;
    --fg3:               #a0a0a0;
    --fg4:               #6a6a6a;
    --brand-bg2:         #1a2e1a;
    --brand-fg2:         #66bb6a;
    --shadow-sm:         0 1px 2px rgba(0, 0, 0, 0.30);
}

[data-theme="dark"] .acurat-topbar {
    background: var(--neutral-bg2);
    border-bottom-color: var(--stroke1);
}

[data-theme="dark"] .acurat-sidebar {
    background: var(--neutral-bg2);
    border-right-color: var(--stroke1);
}

[data-theme="dark"] .nav-header,
[data-theme="dark"] .nav-voet {
    border-color: var(--stroke1);
}

[data-theme="dark"] .acurat-card {
    background: var(--neutral-bg1);
    border-color: var(--stroke1);
}

[data-theme="dark"] .acurat-grid thead th {
    background: var(--neutral-bg2);
    border-bottom-color: var(--stroke1);
}

[data-theme="dark"] .acurat-grid tbody tr:hover {
    background: #1f2e1f;
}

[data-theme="dark"] .acurat-grid tbody tr.selected {
    background: #1a2e1a;
}

[data-theme="dark"] .topbar-gebruiker-menu {
    background: var(--neutral-bg2);
    border-color: var(--stroke1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.40);
}

[data-theme="dark"] .topbar-zoek-dropdown {
    background: var(--neutral-bg2);
    border-color: var(--stroke1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.40);
}

[data-theme="dark"] .acurat-listview {
    background: var(--neutral-bg1);
    border-color: var(--stroke1);
}

[data-theme="dark"] .acurat-ribbon {
    background: var(--neutral-bg2);
    border-color: var(--stroke1);
}

/* ============================================================================
   TOPBAR — ZOEKBALK DROPDOWN + THEMA-KNOP
   ============================================================================ */

/* Wrapper zodat dropdown relatief is aan de zoekbalk */
.topbar-zoek-wrap {
    position: relative;
    flex: 1;
    max-width: 380px;
    display: flex;
    align-items: center;
}

.topbar-zoek {
    width: 100%;
}

/* Resultaten dropdown */
.topbar-zoek-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--neutral-bg1);
    border: 1px solid var(--stroke2);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    z-index: 200;
    padding: 4px 0;
    overflow: hidden;
}

.topbar-zoek-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: none;
    font: inherit;
    font-size: 13px;
    color: var(--fg1);
    cursor: pointer;
    text-align: left;
    transition: background-color 0.1s;
}

.topbar-zoek-item:hover,
.topbar-zoek-item--actief {
    background: var(--brand-bg2);
    color: var(--brand-fg2);
}

/* Thema-toggle knop */
.topbar-thema-knop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: var(--radius-md);
    background: none;
    cursor: pointer;
    color: var(--fg2);
    flex-shrink: 0;
    transition: background-color 0.12s;
    padding: 0;
}

.topbar-thema-knop:hover { background-color: var(--neutral-bg2-hover); }
.topbar-thema-knop:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Dichtheids-toggle knop (compact/comfortable) */
.topbar-dichtheid-knop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: var(--radius-md);
    background: none;
    cursor: pointer;
    color: var(--fg2);
    flex-shrink: 0;
    transition: background-color 0.12s;
    padding: 0;
}

.topbar-dichtheid-knop:hover { background-color: var(--neutral-bg2-hover); }
.topbar-dichtheid-knop:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Actieve dichtheidsstand: subtiele indicator */
.topbar-dichtheid-knop--actief {
    background-color: var(--brand-bg2);
    color: var(--brand-fg2);
}

/* Divider in gebruikersmenu */
.topbar-menu-scheider {
    height: 1px;
    background: var(--stroke2);
    margin: 4px 0;
}

/* Gevaarlijk menu-item (uitloggen) */
.topbar-menu-item--danger {
    color: #c62828;
}

.topbar-menu-item--danger:hover {
    background: #ffebee;
    color: #b71c1c;
}

[data-theme="dark"] .topbar-menu-item--danger {
    color: #ef9a9a;
}

[data-theme="dark"] .topbar-menu-item--danger:hover {
    background: #2a1010;
    color: #ef9a9a;
}

/* ============================================================================
   LISTVIEW — MOBIELE KAARTWEERGAVE
   Op schermen <= 640px worden tabelrijen gestapeld als kaarten.
   De tabelheader is verborgen; elke <td> toont zijn kolomlabel via ::before.
   ============================================================================ */

/* Knop "Openen" in de actiecel (desktop: compact, mobiel: groot) */
.alv-th-open-mobiel {
    width: 34px;
}

.alv-td-open-mobiel {
    padding: 3px 6px;
    text-align: center;
}

.alv-open-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--stroke2);
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
    color: var(--brand);
    transition: background-color 0.12s;
    padding: 0;
}

.alv-open-knop:hover { background: var(--brand-bg2); }
.alv-open-knop:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

@media (max-width: 640px) {
    /* Verberg de tabelheader op mobiel */
    .acurat-grid thead { display: none; }

    /* Verberg de alv-scroll overflow — rijen worden blok */
    .alv-scroll { overflow-x: visible; }

    /* De tabel zelf naar blok-flow: anders behoudt hij zijn desktop-kolombreedte
       (~440px) en wordt hij rechts afgekapt — waarden + statusdot vielen buiten beeld. */
    .acurat-grid,
    .acurat-grid tbody { display: block; width: 100%; min-width: 0; }
    .acurat-grid tbody td { width: auto; box-sizing: border-box; }

    /* Toolbar (zoek + teller + kolomkiezer) mag wrappen i.p.v. afkappen */
    .alv-toolbar { flex-wrap: wrap; row-gap: 8px; }
    .alv-toolbar .alv-search,
    .alv-toolbar fluent-search { flex: 1 1 100%; min-width: 0; max-width: none; }

    /* Elke rij wordt een kaart — hoogte vrij (geen row-height token) */
    .acurat-grid tbody tr {
        display: block;
        background: var(--neutral-bg1);
        border: 1px solid var(--stroke2);
        border-radius: var(--radius-lg);
        margin: 6px 8px;
        padding: 10px 12px;
        box-shadow: var(--shadow-sm);
        cursor: pointer;
        transition: box-shadow 0.12s, border-color 0.12s;
        height: auto;  /* overschrijf row-height token */
    }

    .acurat-grid tbody tr:hover {
        border-color: var(--brand);
        box-shadow: 0 2px 8px rgba(46,125,50,0.12);
    }

    .acurat-grid tbody tr.selected {
        background: var(--brand-bg2);
        border-color: var(--brand);
    }
    /* Kaart-modus: geen linker-accent-balk */
    .acurat-grid tbody tr.selected td:first-child {
        border-left: none;
        padding-left: 0;
    }

    /* Elke cel: flex rij met label links en waarde rechts */
    .acurat-grid tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        padding: 4px 0;
        border-bottom: none;
        white-space: normal;
        max-width: none;
        overflow: visible;
        text-overflow: unset;
        font-size: 14px;
        height: auto;  /* overschrijf row-height token */
    }

    /* Verberg lege actiecel op mobiel — toon de open-knop volledig */
    .acurat-grid tbody td.alv-td-open-mobiel {
        justify-content: flex-end;
        padding-top: 8px;
    }

    /* Tap-target >= 40px op mobiel */
    .alv-open-knop {
        width: 40px;
        height: 40px;
    }

    /* Label via data-label (grijs, uppercase, klein) */
    .acurat-grid tbody td::before {
        content: attr(data-label);
        font-size: 10.5px;
        font-weight: 700;
        color: var(--fg4);
        text-transform: uppercase;
        letter-spacing: 0.4px;
        flex-shrink: 0;
        min-width: 80px;
    }

    /* Eerste cel: de "titel" van de kaart — groter, semibold */
    .acurat-grid tbody td:first-child {
        padding-bottom: 6px;
        margin-bottom: 4px;
        border-bottom: 1px solid var(--stroke2);
    }

    .acurat-grid tbody td:first-child::before {
        display: none; /* verberg label voor titelrij */
    }

    .acurat-grid tbody td:first-child {
        font-size: 14px;
        font-weight: 600;
        color: var(--fg1);
        justify-content: flex-start;
    }

    /* Verberg lege data-label (actiecel-header) */
    .acurat-grid tbody td[data-label=""]::before {
        display: none;
    }

    /* Lege-rij: gewone stijl herstellen */
    .acurat-grid tbody .alv-empty-row {
        border: none;
        box-shadow: none;
        background: transparent;
        margin: 0;
        padding: 0;
    }

    .acurat-grid tbody .alv-empty-row td {
        display: block;
        padding: 0;
        height: auto;
    }

    .acurat-grid tbody .alv-empty-row td::before {
        display: none;
    }

    /* Paginering compacter op mobiel */
    .alv-pager-info { font-size: 11px; }
}

/* ============================================================================
   STIJL-PRESETS  (data-style op <html>)
   Drie cohesieve presets — elke preset overschrijft uitsluitend de token-laag
   en voegt optionele component-styling toe. GEEN markup-contract-wijzigingen.

   Preset 1 · dense   (DEFAULT) — Dense pro / data-first. Minimal chrome,
                                   compacte rijen, kleine font, veel data per scherm.
                                   = de :root-defaults hierboven; geen extra CSS nodig.
   Preset 2 · saas    — Modern SaaS. Meer witruimte, grotere radius, zachte
                         kaartschaduw, vriendelijke/rustiger sfeer.
   Preset 3 · fluent  — Verfijnd Fluent / BC-klassiek. Omkaderde kaarten,
                         vertrouwde Fluent-look, nettere hiërarchie.

   Dichtheid is ORTHOGONAAL: data-density="comfortable" werkt bovenop elke preset.
   (Standaard erven saas/fluent een ruimere dichtheid via hun token-override hieronder.)
   ============================================================================ */

/* ----- Preset: saas ----- */
[data-style="saas"] {
    /* Grotere radius voor zachte look */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:  12px;
    --radius-xl:  16px;

    /* Subtielere schaduw, meer diepte */
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);

    /* Iets warmere neutrale achtergronden */
    --neutral-bg3: #f7f7f8;
    --neutral-bg2: #f0f0f2;
    --neutral-bg2-hover: #e8e8ea;
    --stroke2: #e4e4e6;
    --stroke1: #d0d0d4;

    /* Ruimere dichtheids-defaults (comfortable = 14px font, grotere controls) */
    --d-font-size:          14px;
    --d-font-size-sm:       12px;
    --d-line-height:        1.5;
    --d-control-height:     34px;
    --d-control-padding-x:  10px;
    --d-control-padding-y:   6px;
    --d-row-height:         38px;
    --d-row-padding-v:       8px;
    --d-row-padding-h:      12px;
    --d-th-padding-v:        7px;
    --d-th-padding-h:       12px;
    --d-topbar-height:      52px;
    --d-sidebar-width:     252px;
    --d-content-padding-x:  20px;
    --d-content-padding-y:  14px;
    --d-ribbon-padding-v:    6px;
    --d-ribbon-padding-h:    4px;
    --d-card-padding:       18px;
    --d-fasttab-padding-v:   9px;
    --d-fasttab-body-pad:   14px;
    --d-field-gap:          13px;
    --d-field-col-gap:      18px;
    --d-factbox-width:     288px;
}

/* SaaS: kaartcontainer met prominentere schaduw */
[data-style="saas"] .acurat-card,
[data-style="saas"] .acurat-listview,
[data-style="saas"] .acurat-factbox {
    border-color: var(--stroke2);
    box-shadow: var(--shadow-sm);
}

/* SaaS: pagina-koptekst iets groter */
[data-style="saas"] .acurat-page-title { font-size: 1.3rem; }

/* SaaS: rijen iets vriendelijker hover */
[data-style="saas"] .acurat-grid tbody tr:hover { background: #f0f5f0; }

/* SaaS: ribbon minder chroom */
[data-style="saas"] .acurat-ribbon {
    background: var(--neutral-bg1);
    border: 1px solid var(--stroke2);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* SaaS: nav-link iets ruimer */
[data-style="saas"] .nav-link { height: 34px; border-radius: var(--radius-md); }

/* SaaS: topbar iets lijner */
[data-style="saas"] .acurat-topbar { border-bottom: none; box-shadow: 0 1px 4px rgba(0,0,0,0.07); }

/* SaaS: th zonder uppercase */
[data-style="saas"] .acurat-grid thead th { text-transform: none; letter-spacing: 0; font-size: var(--d-font-size); }


/* ----- Preset: fluent ----- */
[data-style="fluent"] {
    /* Fluent-stijl: lichte blauwige tint in de neutrale ramp */
    --neutral-bg1:       #ffffff;
    --neutral-bg2:       #f8f9fa;
    --neutral-bg3:       #f3f4f6;
    --neutral-bg2-hover: #eef0f3;
    --stroke1:           #c8cdd4;
    --stroke2:           #dde1e7;

    /* Fluent-stijl: iets kleinere radius (Fluent v2 gebruikt kleine radius) */
    --radius-sm:  2px;
    --radius-md:  4px;
    --radius-lg:  6px;
    --radius-xl:  8px;

    /* Fluent: subtiele schaduw */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04);

    /* Dichtheid: tussen compact en comfortable (BC-klassiek) */
    --d-font-size:          13px;
    --d-font-size-sm:       11.5px;
    --d-line-height:        1.4;
    --d-control-height:     30px;
    --d-control-padding-x:   9px;
    --d-control-padding-y:   5px;
    --d-row-height:         34px;
    --d-row-padding-v:       6px;
    --d-row-padding-h:      10px;
    --d-th-padding-v:        6px;
    --d-th-padding-h:       10px;
    --d-topbar-height:      48px;
    --d-sidebar-width:     244px;
    --d-content-padding-x:  18px;
    --d-content-padding-y:  12px;
    --d-ribbon-padding-v:    5px;
    --d-ribbon-padding-h:    4px;
    --d-card-padding:       15px;
    --d-fasttab-padding-v:   8px;
    --d-fasttab-body-pad:   13px;
    --d-field-gap:          12px;
    --d-field-col-gap:      16px;
    --d-factbox-width:     284px;
}

/* Fluent: sidebar met lichte rand */
[data-style="fluent"] .acurat-sidebar { border-right: 1px solid var(--stroke1); }

/* Fluent: topbar met duidelijke onder-rand (BC-stijl) */
[data-style="fluent"] .acurat-topbar {
    border-bottom: 1px solid var(--stroke1);
    box-shadow: none;
}

/* Fluent: ribbon met duidelijke rand om de commandobalk */
[data-style="fluent"] .acurat-ribbon {
    background: var(--neutral-bg2);
    border: 1px solid var(--stroke1);
    border-radius: var(--radius-md);
}

/* Fluent: th met lichte achtergrond en duidelijke onder-rand (BC-stijl) */
[data-style="fluent"] .acurat-grid thead th {
    background: var(--neutral-bg2);
    border-bottom: 2px solid var(--stroke1);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--d-font-size);
}

/* Fluent: rijen afgewisseld licht (zebra) */
[data-style="fluent"] .acurat-grid tbody tr:nth-child(even) td {
    background-color: #fafbfc;
}
[data-style="fluent"] .acurat-grid tbody tr:hover { background: #eef3f8; }
[data-style="fluent"] .acurat-grid tbody tr.selected { background: #dde8f5; }
[data-style="fluent"] .acurat-grid tbody tr.selected td { border-bottom-color: #b8d0ec; }
[data-style="fluent"] .acurat-grid tbody tr.selected td:first-child { border-left-color: #0078d4; }

/* Fluent: factbox met duidelijke rand */
[data-style="fluent"] .acurat-factbox { border: 1px solid var(--stroke1); }
[data-style="fluent"] .efactbox-header { background: var(--neutral-bg2); }

/* Fluent: kaarten met lichte rand-kleur */
[data-style="fluent"] .acurat-card { border-color: var(--stroke1); }

/* Fluent: detail-kaart compact (BC-stijl) */
[data-style="fluent"] .acurat-detail-card { border-color: var(--stroke1); }

/* Fluent: nav-link iets strakker */
[data-style="fluent"] .nav-link { height: 28px; border-radius: var(--radius-sm); }
[data-style="fluent"] .nav-link--actief::before { top: 5px; bottom: 5px; }

/* ============================================================================
   STIJL-SWITCHER DROPDOWN in de topbar
   ============================================================================ */

.topbar-stijl-wrap {
    position: relative;
    flex-shrink: 0;
}

.topbar-stijl-knop {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--stroke2);
    border-radius: var(--radius-md);
    background: var(--neutral-bg1);
    cursor: pointer;
    color: var(--fg2);
    font: inherit;
    font-size: var(--d-font-size-sm);
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.12s, border-color 0.12s;
}

.topbar-stijl-knop:hover { background-color: var(--neutral-bg2-hover); border-color: var(--stroke1); }
.topbar-stijl-knop:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.topbar-stijl-label {
    display: none; /* verborgen op smal; toon op breed */
}

@media (min-width: 900px) {
    .topbar-stijl-label { display: inline; }
}

.topbar-stijl-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: var(--neutral-bg1);
    border: 1px solid var(--stroke2);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    min-width: 200px;
    z-index: 200;
    padding: 4px;
    overflow: hidden;
}

.topbar-stijl-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color 0.1s;
}

.topbar-stijl-item:hover { background: var(--neutral-bg3); }
.topbar-stijl-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.topbar-stijl-item--actief { background: var(--brand-bg2); }
.topbar-stijl-item--actief:hover { background: var(--brand-bg2); }

.topbar-stijl-item-naam {
    font-size: var(--d-font-size);
    font-weight: 600;
    color: var(--fg1);
}

.topbar-stijl-item--actief .topbar-stijl-item-naam { color: var(--brand-fg2); }

.topbar-stijl-item-sub {
    font-size: 11px;
    color: var(--fg4);
}

[data-theme="dark"] .topbar-stijl-menu {
    background: var(--neutral-bg2);
    border-color: var(--stroke1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.40);
}

/* Stijl-preset-indicatoren in dark mode: houd grid-kleuren consistent */
[data-theme="dark"][data-style="fluent"] .acurat-grid tbody tr:nth-child(even) td {
    background-color: #232830;
}
[data-theme="dark"][data-style="fluent"] .acurat-grid tbody tr:hover { background: #1e2c3d; }
[data-theme="dark"][data-style="fluent"] .acurat-grid tbody tr.selected { background: #1a2a3d; }

/* ============================================================================
   AcuratKaart veld-layout — Business-Central-kaart: LABEL LINKS + stippellijn-leader.
   Velden worden in AcuratKaart.RenderVeld via de RenderTreeBuilder gebouwd; zulke
   elementen krijgen GEEN Blazor CSS-isolatie-scope-attribuut → stijl GLOBAAL hier
   (niet in de scoped AcuratKaart.razor.css). Geijkt op de echte BC Item Card.
   ============================================================================ */

/* Kaart-dichtheid: dwing BC-strakke spacing af binnen elke kaart, ongeacht stijl-preset. */
.acurat-card {
    --d-field-gap: 2px;
    --d-field-col-gap: 30px;
    --d-fasttab-body-pad: 8px;
}

.ac-veld-wrap {
    display: grid;
    grid-template-columns: var(--d-veld-label-breedte, 150px) minmax(0, 1fr);
    align-items: center;
    column-gap: 6px;
    row-gap: 0;
    min-height: 26px;
    padding: 1px 0;
}

.ac-veld-waarde {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* Label links + gestippelde leader die naar de waarde "loopt" (dé BC-signatuur). */
.ac-veld-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 400;
    color: var(--colorNeutralForeground2, #424242);
    line-height: 1.3;
    min-width: 0;
}
.ac-veld-label::after {
    content: "";
    flex: 1 1 auto;
    min-width: 6px;
    margin-top: 3px;
    border-bottom: 1px dotted var(--colorNeutralStroke2, #c4c4c4);
}
.ac-veld-vereist::before {
    content: "*";
    color: var(--colorPaletteRedForeground1, #c50f1f);
    font-weight: 700;
}

.ac-veld-hint { font-size: 11px; color: var(--colorNeutralForeground3, #707070); }
.ac-veld-suffix { font-size: 11px; color: var(--colorNeutralForeground3, #707070); }
.ac-veld-fout { font-size: 11px; color: var(--colorPaletteRedForeground1, #c50f1f); }

/* Vlakke, dichte velden binnen de kaart (BC: lichte vulling, dunne rand, ~26px, weinig afronding). */
.acurat-card fluent-text-field,
.acurat-card fluent-number-field,
.acurat-card fluent-select,
.acurat-card fluent-text-area,
.acurat-card fluent-search {
    width: 100%;
    --control-corner-radius: 2;
    --base-height-multiplier: 6.5;
}

.ac-datum-input {
    width: 100%;
    height: 26px;
    padding: 0 8px;
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    border-radius: 2px;
    font: inherit;
    font-size: 12px;
    background: var(--colorNeutralBackground1, #fff);
    color: var(--colorNeutralForeground1, #242424);
}
.ac-datum-input.ac-input-fout { border-color: var(--colorPaletteRedBorderActive, #c50f1f); }

/* Smal scherm: terug naar label-boven (touch-vriendelijk), leader weg. */
@media (max-width: 700px) {
    .ac-veld-wrap { grid-template-columns: 1fr; row-gap: 2px; align-items: start; }
    .ac-veld-label::after { display: none; }
}