/* =====================================================================
   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);

    /* =====================================================================
       EIGEN kleurpalet (bewust afwijkend van de standaard Bootstrap-tinten).
       Elke kleur: solid (vulkleur) · -text (op licht) · -bg (lichte tint).
       Gebruik deze tokens overal — nooit ruwe Bootstrap-kleuren of `secondary`.
       ===================================================================== */
    --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);
    /* Extra eigen tinten zodat elke lifecycle-status een eigen, herkenbare kleur
       heeft (geen dubbele en geen grijs-"secondary"). */
    --cs-slate:         #64748b;  --cs-slate-text:  #48566e;  --cs-slate-bg:  rgba(100,116,139,0.16);
    --cs-violet:        #7c5cff;  --cs-violet-text: #5b3fd6;  --cs-violet-bg: rgba(124,92,255,0.15);
    --cs-teal:          #0fb5ab;  --cs-teal-text:   #0a8a82;  --cs-teal-bg:   rgba(15,181,171,0.16);
}

/* --------------------------------------------------------------- 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;
}

/* --------------------------------------------------------------- App-popover (.cs-menu)
   Herbruikbaar zwevend keuzemenu (statuskeuze, rij-acties, contextmenu's) in de
   glas-stijl — gebruik dit i.p.v. ad-hoc inline-stijlen. Toon/verberg via het
   `hidden`-attribuut (JS togglet dat). Plaats in een `position: relative`-ouder;
   `.cs-menu-end` lijnt rechts uit, standaard links. Bijna dekkend zodat het ook
   boven andere glas-kaarten leesbaar blijft. */
.cs-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 1050;
    min-width: 220px; padding: 8px;
    border-radius: var(--lg-radius-sm);
    /* SOLIDE (geen backdrop-filter): dit menu zweeft vaak boven andere glas-kaarten
       (die zelf backdrop-filter hebben), en geneste backdrop-filter-lagen renderen
       in sommige browsers transparant. Solide wit gegarandeerd dekkend. */
    background: #ffffff !important;
    border: 1px solid rgba(120, 130, 160, 0.18) !important;
    box-shadow: var(--lg-shadow-lg);
}
.cs-menu.cs-menu-end { left: auto; right: 0; }
.cs-menu[hidden] { display: none !important; }
.cs-menu-head { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #a1a5b7; padding: 4px 8px 8px; }
.cs-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; text-align: left; padding: 8px 10px; border-radius: 9px; cursor: pointer; color: #3f4254; font-weight: 500; }
.cs-menu-item:hover { background: rgba(100, 116, 139, .12); color: #181c32; }

/* --------------------------------------------------------------- Actionbar (.cs-actionbar)
   Plakkende, lichte balk bovenaan detail-/bewerkschermen: links titel (+ subtitel),
   rechts de acties (`.cs-actionbar-actions`). Gebruikt op het artikelformulier én de
   orderdetail — dé standaard kop voor zulke pagina's. Solide (geen glas) zodat hij
   leesbaar blijft terwijl content eronderdoor scrolt. */
.cs-actionbar {
    background: #fff; padding: 12px 16px;
    border: 1px solid #eff2f5; border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
}
/* Plakt pas wanneer de header óók sticky wordt — niet eerder. Een globale
   scroll-listener (partials/ui.php) zet `.cs-stuck` op dezelfde scroll-drempel
   als #kt_header (data-kt-sticky-offset: 200px / lg 300px). `top` = sticky
   header-hoogte. Alleen desktop; op mobiel scrollt de balk gewoon mee weg. */
@media (min-width: 768px) {
    .cs-actionbar.cs-stuck { position: sticky; top: 70px; z-index: 90; }
}
/* Klik-om-te-kopiëren-knopje (zie data-cs-copy). Subtiel getint blauw — geen grijs
   (zou disabled lezen); volle kleur + lichte tint-achtergrond op hover. */
.cs-copy {
    border: 0; background: transparent; padding: 2px 6px; border-radius: 7px;
    line-height: 1; cursor: pointer; flex-shrink: 0;
    color: var(--cs-primary); opacity: .55;
    transition: opacity .12s, background .12s;
}
.cs-copy:hover, .cs-copy:focus { opacity: 1; background: rgba(0, 158, 247, .10); outline: none; }

.cs-actionbar-actions { width: 100%; }
@media (min-width: 768px) { .cs-actionbar-actions { width: auto; } }
@media (max-width: 767px) { .cs-actionbar { padding: 10px 12px; } }

.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; }
/* Eigen extra tinten + `secondary`-vangnet (nooit grijs/transparant). */
.badge.badge-light-slate,
.badge.badge-light-secondary { background: var(--cs-slate-bg)  !important; color: var(--cs-slate-text)  !important; }
.badge.badge-light-violet    { background: var(--cs-violet-bg) !important; color: var(--cs-violet-text) !important; }
.badge.badge-light-teal      { background: var(--cs-teal-bg)   !important; color: var(--cs-teal-text)   !important; }
.badge.badge-slate, .badge.badge-secondary { background: var(--cs-slate)  !important; color: #fff !important; }
.badge.badge-violet          { background: var(--cs-violet) !important; color: #fff !important; }
.badge.badge-teal            { background: var(--cs-teal)   !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; }
/* Hover én :active/:focus samen: Metronic zet op die states wél een vaste
   achtergrond (!important) maar de witte tekst zónder !important, terwijl de
   liquid-glass basisregel de tint-tekstkleur mét !important forceert → zonder
   deze override zou ingedrukt/gefocust (vooral op touch, waar :hover ontbreekt)
   donkere tekst op een volle vulkleur geven. */
.btn.btn-light-success:hover, .btn.btn-light-success:active, .btn.btn-light-success:focus { background: var(--cs-success) !important; color: #fff !important; }
.btn.btn-light-danger:hover,  .btn.btn-light-danger:active,  .btn.btn-light-danger:focus  { background: var(--cs-danger)  !important; color: #fff !important; }
.btn.btn-light-warning:hover, .btn.btn-light-warning:active, .btn.btn-light-warning:focus { background: var(--cs-warning) !important; color: #5a3d00 !important; }
.btn.btn-light-info:hover,    .btn.btn-light-info:active,    .btn.btn-light-info:focus    { background: var(--cs-info)    !important; color: #fff !important; }
.btn.btn-light-primary:hover, .btn.btn-light-primary:active, .btn.btn-light-primary:focus { background: var(--cs-primary) !important; color: #fff !important; }
/* Iconen erven de tekstkleur; expliciet wit/donker afdwingen voor de zekerheid. */
.btn.btn-light-success:hover i, .btn.btn-light-success:active i, .btn.btn-light-success:focus i,
.btn.btn-light-danger:hover i,  .btn.btn-light-danger:active i,  .btn.btn-light-danger:focus i,
.btn.btn-light-info:hover i,    .btn.btn-light-info:active i,    .btn.btn-light-info:focus i,
.btn.btn-light-primary:hover i, .btn.btn-light-primary:active i, .btn.btn-light-primary:focus i { color: #fff !important; }
.btn.btn-light-warning:hover i, .btn.btn-light-warning:active i, .btn.btn-light-warning:focus i { color: #5a3d00 !important; }

/* Eigen extra knop-tinten (slate/violet/teal) + `secondary`-vangnet → nooit grijs.
   Rust = lichte tint + gekleurde tekst; hover/active/focus = vol + witte tekst
   (zelfde verplichte state-dekking als de andere light-knoppen, ook op touch). */
.btn.btn-light-slate,
.btn.btn-light-secondary { background: var(--cs-slate-bg)  !important; color: var(--cs-slate-text)  !important; border-color: transparent; }
.btn.btn-light-violet    { background: var(--cs-violet-bg) !important; color: var(--cs-violet-text) !important; border-color: transparent; }
.btn.btn-light-teal      { background: var(--cs-teal-bg)   !important; color: var(--cs-teal-text)   !important; border-color: transparent; }
.btn.btn-light-slate:hover,  .btn.btn-light-slate:active,  .btn.btn-light-slate:focus,
.btn.btn-light-secondary:hover, .btn.btn-light-secondary:active, .btn.btn-light-secondary:focus { background: var(--cs-slate)  !important; color: #fff !important; }
.btn.btn-light-violet:hover, .btn.btn-light-violet:active, .btn.btn-light-violet:focus { background: var(--cs-violet) !important; color: #fff !important; }
.btn.btn-light-teal:hover,   .btn.btn-light-teal:active,   .btn.btn-light-teal:focus   { background: var(--cs-teal)   !important; color: #fff !important; }
.btn.btn-light-slate:hover i,  .btn.btn-light-slate:active i,  .btn.btn-light-slate:focus i,
.btn.btn-light-secondary:hover i, .btn.btn-light-secondary:active i, .btn.btn-light-secondary:focus i,
.btn.btn-light-violet:hover i, .btn.btn-light-violet:active i, .btn.btn-light-violet:focus i,
.btn.btn-light-teal:hover i,   .btn.btn-light-teal:active i,   .btn.btn-light-teal:focus i { 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; }
    .cs-menu                    { 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; }
}