/* =====================================================================
   Liquid Glass — iOS-achtige glaslaag bovenop het Metronic-thema.
   Geladen ná style.bundle.css zodat het de basis-stijlen verfijnt.
   Kernidee: doorschijnende oppervlakken met backdrop-blur + saturate,
   hairline-randen, een specular highlight (inset top) en zachte diepte.
   ===================================================================== */

:root {
    --lg-radius:        22px;
    --lg-radius-sm:     14px;
    --lg-blur:          22px;
    /* Hogere dekking dan v1: doorschijnend blijft, maar tekst blijft goed leesbaar. */
    --lg-fill:          rgba(255, 255, 255, 0.78);
    --lg-fill-strong:   rgba(255, 255, 255, 0.88);
    --lg-stroke:        rgba(255, 255, 255, 0.65);
    --lg-stroke-soft:   rgba(255, 255, 255, 0.40);
    --lg-shadow:        0 10px 36px rgba(28, 39, 89, 0.14), 0 2px 8px rgba(28, 39, 89, 0.06);
    --lg-shadow-lg:     0 24px 64px rgba(20, 30, 70, 0.28);
    --lg-highlight:     inset 0 1px 0 rgba(255, 255, 255, 0.7);

    /* Moderne, samenhangende statuskleuren (vervangen de wat vlakke Bootstrap-tinten). */
    --cs-success:       #1fb866;  --cs-success-text:#0f8a47;  --cs-success-bg:rgba(31,184,102,0.16);
    --cs-danger:        #f5365c;  --cs-danger-text: #d61f48;  --cs-danger-bg: rgba(245,54,92,0.14);
    --cs-warning:       #f9a01e;  --cs-warning-text:#a86400;  --cs-warning-bg:rgba(249,160,30,0.18);
    --cs-info:          #11a9e6;  --cs-info-text:   #0784c2;  --cs-info-bg:   rgba(17,169,230,0.15);
    --cs-primary:       #009ef7;  --cs-primary-text:#0784c2;  --cs-primary-bg:rgba(0,158,247,0.14);
}

/* --------------------------------------------------------------- Achtergrond
   Zachte "aurora" onder de content zodat het glas kleur opvangt. Alleen in de
   contentzone (de donkere header/toolbar houden hun eigen achtergrond).
   De footer krijgt exact dezelfde fixed-attachment gradient: omdat die aan de
   viewport hangt, loopt hij naadloos door — footer blendt met de body, geen
   aparte balk. */
#kt_content.content,
#kt_footer.footer {
    background:
        radial-gradient(900px 620px at 12% 6%,  rgba(120, 160, 255, 0.22), transparent 60%),
        radial-gradient(820px 600px at 88% 12%, rgba(255, 150, 210, 0.16), transparent 60%),
        radial-gradient(900px 700px at 72% 92%, rgba(130, 225, 255, 0.20), transparent 60%),
        linear-gradient(170deg, #eef1fb 0%, #f6f4fb 48%, #eaf4fb 100%);
    background-attachment: fixed;
}
/* Desktop: ademruimte tussen de donkere toolbar en de content — de Metronic-bundle
   zet .content op padding 0 vanaf 992px (mobiel heeft al 15px van de bundle). */
@media (min-width: 992px) {
    #kt_content.content { padding-top: 30px; }
}

/* ------------------------------------------------------------------- Kaarten */
.card {
    background: var(--lg-fill) !important;
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(180%);
    backdrop-filter: blur(var(--lg-blur)) saturate(180%);
    border: 1px solid var(--lg-stroke) !important;
    border-radius: var(--lg-radius) !important;
    box-shadow: var(--lg-shadow), var(--lg-highlight) !important;
}

/* --------------------------------------------------------------- Dropdownmenu's
   (gebruikersmenu, Systeem-menu, mobiele nav-drawer)
   Bijna dekkend: deze menu's zweven boven de donkere header — bij lagere dekking
   schemert die erdoorheen en worden rol/afmelden/wachtwoord slecht leesbaar. */
.menu-sub-dropdown,
.menu-sub.menu-sub-dropdown {
    background: rgba(255, 255, 255, 0.96) !important;
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    backdrop-filter: blur(26px) saturate(180%);
    border: 1px solid var(--lg-stroke) !important;
    border-radius: 18px !important;
    box-shadow: var(--lg-shadow), var(--lg-highlight) !important;
}
.menu-state-bg .menu-link.active,
.menu-state-bg .menu-link:hover:not(.disabled):not(.active) {
    border-radius: 11px;
}

/* ------------------------------------------------------------------- Header
   Donkere glasbalk in ÁLLE staten (ook 'sticky'), zodat het witte logo en de
   witte navigatie altijd leesbaar blijven. */
#kt_header.header {
    background: rgba(16, 24, 52, 0.55) !important;
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    backdrop-filter: blur(22px) saturate(170%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
}
/* Altijd het witte logo (de kleurrijke 'sticky'-variant is slecht zichtbaar). */
#kt_header .logo-default { display: inline-block !important; }
#kt_header .logo-sticky  { display: none !important; }

/* Desktop: header boven de content-laag. De header heeft hier computed
   z-index:auto, en omdat header én .card allebei een stacking context vormen
   (backdrop-filter) wint anders de kaart op DOM-volgorde — dropdowns uit het
   menu verdwenen dan onder de content. Alleen ≥992px: op mobiel zit het menu
   in de drawer en moet de header juist niet boven drawer/overlay gaan. */
@media (min-width: 992px) {
    #kt_header.header { z-index: 100; }
}

/* Desktop-navigatie: witte tekst op de donkere balk (alleen top-level links;
   submenu's blijven donker op hun lichte glas-dropdown). */
@media (min-width: 992px) {
    #kt_header_menu > .menu-item > .menu-link .menu-title,
    #kt_header_menu > .menu-item > .menu-link .menu-arrow { color: rgba(255, 255, 255, 0.82) !important; }
    #kt_header_menu > .menu-item > .menu-link:hover .menu-title { color: #fff !important; }
    #kt_header_menu > .menu-item > .menu-link:hover { background: rgba(255, 255, 255, 0.12) !important; border-radius: 10px; }
    /* Actieve pagina duidelijker: sterkere pill + vette tekst. */
    #kt_header_menu > .menu-item > .menu-link.active,
    #kt_header_menu > .menu-item.here > .menu-link {
        background: rgba(255, 255, 255, 0.24) !important;
        border-radius: 10px;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    }
    #kt_header_menu > .menu-item > .menu-link.active .menu-title,
    #kt_header_menu > .menu-item.here > .menu-link .menu-title { color: #fff !important; font-weight: 800 !important; }
}

/* Actieve subpagina (Systeem-dropdown én mobiele drawer) duidelijk highlighten. */
.menu-sub .menu-link.active { background: var(--cs-primary-bg) !important; border-radius: 9px; }
.menu-sub .menu-link.active .menu-title { color: var(--cs-primary) !important; font-weight: 700 !important; }

@media (max-width: 991.98px) {
    /* Mobiel: het actieve accordion ("Systeem") uitgeklapt forceren. */
    #kt_header_menu .menu-item.menu-lg-down-accordion.show > .menu-sub-lg-down-accordion {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }
    /* Mobiel: actieve top-level link + actief "Systeem"-kopje duidelijk markeren. */
    #kt_header_menu > .menu-item > .menu-link.active,
    #kt_header_menu > .menu-item.here > .menu-link {
        background: var(--cs-primary-bg) !important;
        border-radius: 10px;
    }
    #kt_header_menu > .menu-item > .menu-link.active .menu-title,
    #kt_header_menu > .menu-item.here > .menu-link .menu-title {
        color: var(--cs-primary) !important;
        font-weight: 700 !important;
    }
}

/* Mobiel menu (drawer): zichtbaar gefroste glaslaag (lagere dekking dan kaarten,
   de blur houdt de tekst leesbaar) in dezelfde stijl als de rest van het thema. */
@media (max-width: 991.98px) {
    [data-kt-drawer-name="header-menu"],
    [data-kt-drawer-name="header-menu"].drawer {
        background: rgba(255, 255, 255, 0.78) !important;
        -webkit-backdrop-filter: blur(28px) saturate(180%);
        backdrop-filter: blur(28px) saturate(180%);
        border-right: 1px solid var(--lg-stroke);
        box-shadow: var(--lg-shadow-lg);
    }
    /* Menu-items inspringen zodat de actieve/hover-achtergrond een afgeronde
       pill is in plaats van een rand-tot-rand balk over de hele drawerbreedte. */
    #kt_header_menu > .menu-item > .menu-link { margin: 1px 12px; border-radius: 10px; }
    #kt_header_menu .menu-sub .menu-link { margin: 1px 12px; border-radius: 9px; }
}

/* --------------------------------------------------------------- Invoervelden */
.form-control-solid,
.form-select-solid {
    background: rgba(255, 255, 255, 0.72) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(180, 195, 225, 0.45) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 2px rgba(20, 30, 60, 0.04);
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.form-control-solid:focus,
.form-select-solid:focus,
.form-control-solid:active,
.form-select-solid:active {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(120, 135, 165, 0.55) !important;
    box-shadow: inset 0 1px 2px rgba(20, 30, 60, 0.05) !important;
    outline: none !important;
}
/* iOS-stijl: geen blauwe focus-ring op welk invoerveld dan ook */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
input.form-control:focus,
textarea.form-control:focus {
    box-shadow: inset 0 1px 2px rgba(20, 30, 60, 0.05);
    border-color: rgba(120, 135, 165, 0.55);
    outline: none;
}

/* ------------------------------------------------------------------- Knoppen */
.btn { border-radius: 12px; }

/* ---- GUARDRAIL: icoonknoppen nooit grijs ----------------------------------
   Metronic geeft .btn-icon + .btn-active-light-*/.btn-active-color-* in rust een
   grijze tint (ziet er uitgeschakeld uit). Forceer een leesbare donkere kleur in
   rust; de accent-hoverkleur van Metronic (hogere specificiteit, met :hover) blijft
   werken. Geldt NIET voor gevulde gekleurde knoppen (die zetten hun eigen kleur). */
.btn.btn-icon.btn-active-light-primary,
.btn.btn-icon.btn-active-light-secondary,
.btn.btn-icon.btn-active-light-danger,
.btn.btn-icon.btn-active-light-success,
.btn.btn-icon.btn-active-color-primary,
.btn.btn-icon.btn-active-color-gray-700,
.btn.btn-icon.btn-active-color-gray-800 { color: #2b2f42; }
.btn.btn-icon.btn-active-light-primary i,
.btn.btn-icon.btn-active-light-secondary i,
.btn.btn-icon.btn-active-light-danger i,
.btn.btn-icon.btn-active-light-success i,
.btn.btn-icon.btn-active-color-primary i,
.btn.btn-icon.btn-active-color-gray-700 i,
.btn.btn-icon.btn-active-color-gray-800 i { color: inherit; }

.btn-primary {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0));
    box-shadow: 0 6px 16px rgba(0, 158, 247, 0.28), var(--lg-highlight);
}
/* Lichte/neutrale knoppen krijgen glas; gekleurde "light-*" varianten houden hun tint. */
.btn.btn-light {
    background: rgba(255, 255, 255, 0.55) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
}
.btn.btn-light:hover { background: rgba(255, 255, 255, 0.78) !important; }

/* ------------------------------------------------------------------- Alerts */
.alert {
    border-radius: 16px;
    border: 1px solid var(--lg-stroke-soft);
    box-shadow: var(--lg-highlight);
}

/* ===================================================================
   Moderne statuskleuren — vervangen de vlakke Bootstrap/Metronic-tinten
   en sluiten aan op het glasthema. Geldt app-breed (badges/knoppen/alerts/tekst).
   =================================================================== */
.badge { border-radius: 8px; font-weight: 600; }
.badge.badge-light-success { background: var(--cs-success-bg) !important; color: var(--cs-success-text) !important; }
.badge.badge-light-danger  { background: var(--cs-danger-bg)  !important; color: var(--cs-danger-text)  !important; }
.badge.badge-light-warning { background: var(--cs-warning-bg) !important; color: var(--cs-warning-text) !important; }
.badge.badge-light-info    { background: var(--cs-info-bg)    !important; color: var(--cs-info-text)    !important; }
.badge.badge-light-primary { background: var(--cs-primary-bg) !important; color: var(--cs-primary-text) !important; }
.badge.badge-success { background: var(--cs-success) !important; color: #fff !important; }
.badge.badge-danger  { background: var(--cs-danger)  !important; color: #fff !important; }
.badge.badge-warning { background: var(--cs-warning) !important; color: #5a3d00 !important; }
.badge.badge-info    { background: var(--cs-info)    !important; color: #fff !important; }

.btn.btn-light-success { background: var(--cs-success-bg) !important; color: var(--cs-success-text) !important; border-color: transparent; }
.btn.btn-light-danger  { background: var(--cs-danger-bg)  !important; color: var(--cs-danger-text)  !important; border-color: transparent; }
.btn.btn-light-warning { background: var(--cs-warning-bg) !important; color: var(--cs-warning-text) !important; border-color: transparent; }
.btn.btn-light-info    { background: var(--cs-info-bg)    !important; color: var(--cs-info-text)    !important; border-color: transparent; }
.btn.btn-light-primary { background: var(--cs-primary-bg) !important; color: var(--cs-primary-text) !important; border-color: transparent; }
.btn.btn-light-success:hover { background: var(--cs-success) !important; color: #fff !important; }
.btn.btn-light-danger:hover  { background: var(--cs-danger)  !important; color: #fff !important; }
.btn.btn-light-warning:hover { background: var(--cs-warning) !important; color: #5a3d00 !important; }
.btn.btn-light-info:hover    { background: var(--cs-info)    !important; color: #fff !important; }
.btn.btn-light-primary:hover { background: var(--cs-primary) !important; color: #fff !important; }

.btn.btn-success { background: var(--cs-success) !important; border-color: var(--cs-success) !important; box-shadow: 0 6px 16px rgba(31,184,102,.30); }
.btn.btn-danger  { background: var(--cs-danger)  !important; border-color: var(--cs-danger)  !important; box-shadow: 0 6px 16px rgba(245,54,92,.28); }
.btn.btn-warning { background: var(--cs-warning) !important; border-color: var(--cs-warning) !important; color: #5a3d00 !important; }

.text-success { color: var(--cs-success-text) !important; }
.text-danger  { color: var(--cs-danger-text)  !important; }
.text-warning { color: var(--cs-warning-text) !important; }
.text-info    { color: var(--cs-info-text)    !important; }

.alert-success { background: var(--cs-success-bg) !important; color: var(--cs-success-text) !important; }
.alert-danger  { background: var(--cs-danger-bg)  !important; color: var(--cs-danger-text)  !important; }
.alert-warning { background: var(--cs-warning-bg) !important; color: var(--cs-warning-text) !important; }
.alert-info    { background: var(--cs-info-bg)    !important; color: var(--cs-info-text)    !important; }

/* --------------------------------------------------- Agenda: maandcellen subtiel glas */
.cs-cell {
    background: rgba(255, 255, 255, 0.62) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 12px !important;
}
.cs-cell.cs-other  { background: rgba(255, 255, 255, 0.32) !important; }
.cs-cell.cs-weekend{ background: rgba(255, 238, 240, 0.5) !important; }
.cs-day-row {
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-color: rgba(255, 255, 255, 0.7) !important;
    border-radius: 14px !important;
}

/* ===================================================================
   iOS-componenten — capsule-knoppen, segmented controls, schakelaars,
   ronde gefroste icoonknoppen en tactiele "press"-feedback.
   =================================================================== */

/* Knoppen: afgeronde rechthoek; kleine acties als iOS-capsule. Druk = lichte krimp.
   Flex-centrering: icoonfonts staan met baseline-uitlijning (-.125em) bij Poppins
   ~1px naast de tekstregel; align-items:center zet het glyph exact in het midden. */
.btn { border-radius: 13px; font-weight: 600; transition: transform .08s ease, background .15s, box-shadow .15s, color .15s, filter .15s; display: inline-flex; align-items: center; justify-content: center; }
.btn-sm { border-radius: 999px; }
.btn:active { transform: scale(.97); }
.btn-icon { border-radius: 50% !important; }

/* Segmented control (o.a. agenda Maand/Dag/Lijst): lichte track + witte actieve pill. */
.btn-group {
    background: rgba(120, 130, 160, 0.14);
    border-radius: 13px;
    padding: 3px;
    gap: 2px;
    box-shadow: inset 0 1px 2px rgba(20, 30, 60, 0.05);
}
.btn-group > .btn {
    border-radius: 10px !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #5e6278 !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.btn-group > .btn:hover { color: #181c32 !important; }
/* Ook de :hover/:focus/:active varianten afdekken: Metronic zet daar
   background-color !important op .btn.btn-primary (specificiteit 0,4,0), wat
   anders blauwe tekst op blauwe achtergrond geeft zodra de knop focus houdt. */
.btn-group > .btn.btn-primary,
.btn-group > .btn.active,
.btn-group > .btn.btn-primary:hover:not(.btn-active),
.btn-group > .btn.btn-primary:focus:not(.btn-active),
.btn-group > .btn.btn-primary:active:not(.btn-active) {
    background: #fff !important;
    background-color: #fff !important;
    color: var(--cs-primary) !important;
    background-image: none !important;
    box-shadow: 0 2px 6px rgba(20, 30, 60, 0.14) !important;
}
.btn-group > .btn:active { transform: none; }

/* iOS-schakelaars (groen = aan, grijs = uit, ronde knop). */
.form-switch .form-check-input {
    height: 1.85rem; width: 3rem; margin-top: 0;
    background-color: #d9dde6; border: 0; box-shadow: none; cursor: pointer;
    transition: background-color .2s, background-position .15s;
}
.form-switch .form-check-input:checked { background-color: var(--cs-success); }
.form-switch .form-check-input:focus { box-shadow: 0 0 0 3px rgba(0, 158, 247, 0.14); border: 0; }

/* Ronde, gefroste icoonknoppen in modal-/dialoogkoppen (iOS sluit/terug/vernieuw). */
.cs-modal-header .btn-icon,
.cs-dialog .btn-icon {
    background: rgba(120, 130, 160, 0.16) !important;
    color: #3f4254 !important;
}
.cs-modal-header .btn-icon:hover { background: rgba(120, 130, 160, 0.30) !important; }

/* Lijsten/tabellen in kaarten: dunne hairline-scheiding + zachte rij-hover (iOS-lijst). */
.table.table-row-dashed > :not(caption) > * > * { border-bottom-color: rgba(120, 130, 160, 0.18); }
.table tbody tr { transition: background-color .12s; }
.table.table-hover tbody tr:hover { background-color: rgba(120, 130, 160, 0.07); }

/* Inputs iets ronder zodat ze bij de capsule-knoppen passen. */
.form-control-solid, .form-select-solid { border-radius: 13px !important; }

/* Input-groups (bv. "150 | km") als één samenhangend, afgerond glasveld. */
.input-group > .form-control,
.input-group > .form-select { box-shadow: none !important; }
.input-group > :first-child { border-top-left-radius: 13px !important; border-bottom-left-radius: 13px !important; }
.input-group > :last-child  { border-top-right-radius: 13px !important; border-bottom-right-radius: 13px !important; }
.input-group > :not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; margin-left: -1px; }
.input-group > :not(:last-child)  { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group-text {
    background: rgba(120, 130, 160, 0.14) !important;
    border: 1px solid rgba(180, 195, 225, 0.45) !important;
    color: #5e6278 !important;
    font-weight: 600;
}

/* -------------------------------------------------- Slanke, glasachtige scrollbars */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 130, 160, 0.45) transparent;
}
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb {
    background: rgba(120, 130, 160, 0.4);
    border-radius: 20px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(120, 130, 160, 0.6); background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ------------- Op apparaten zonder backdrop-filter: nette, dekkende fallback ------------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .card                       { background: #ffffff !important; }
    .menu-sub-dropdown          { background: #ffffff !important; }
    [data-kt-drawer-name="header-menu"],
    [data-kt-drawer-name="header-menu"].drawer { background: #ffffff !important; }
    .form-control-solid,
    .form-select-solid          { background: #f4f6fa !important; }
}