/* Airco Holland huisstijl-thema (richtbeeld: docs/mockup-dashboard-airco-holland.html).
   Geregistreerd als Filament-asset in AppServiceProvider en door `php artisan filament:assets`
   gepubliceerd naar public/css/app/airco-thema.css. Op Railway gebeurt dat vanzelf:
   composer post-autoload-dump -> filament:upgrade -> filament:assets. Geen node/vite nodig.
   Selectors komen uit de fi-*-klassen van Filament v5 (vendor/filament/.../resources/css). */

:root {
    --ah-marine: #212650;
    --ah-oranje: #f99300;
    --ah-oranje-d: #e07f00;
    --ah-bg: #eef0f5;
    --ah-lijn: #e7e9f1;
    --ah-zijbalk-tekst: #c7cbe6;
    --ah-zijbalk-dim: #8e93c4;
    --ah-zijbalk-kop: #7176aa;
}

/* ===== Zijbalk: donker marineblauw, in licht én donker thema ===== */

.fi-sidebar {
    background-color: var(--ah-marine) !important; /* wint van lg:bg-transparent */
}

/* Desktop: zijbalk over de volle hoogte (mockup-indeling); topbalk en hoofdvlak
   beginnen rechts ervan. Standaard hangt Filament de zijbalk ónder de topbalk.
   LET OP (bekend fragiel): dit blok herschikt Filaments eigen layout en leunt op
   de interne markup (.fi-body-has-topbar, .fi-topbar-ctn, .fi-main-ctn) en de
   inline --sidebar-width. De breakpoint MOET 64rem zijn, gelijk aan Filaments
   eigen lg-grens (dist/theme.css schakelt overal op 64rem, niet op 1024px);
   px hier zou bij een afwijkende browser-basislettergrootte een lege strook geven.
   Na een Filament-update de desktopweergave opnieuw visueel nalopen. */
@media (min-width: 64rem) {
    .fi-body-has-topbar .fi-sidebar {
        position: fixed !important;
        top: 0 !important;
        height: 100dvh !important;
    }

    .fi-body-has-topbar .fi-topbar-ctn,
    .fi-body-has-topbar .fi-main-ctn {
        margin-inline-start: var(--sidebar-width);
    }
}

/* Mobiel: de zijbalk-kop (met logo) gaat mee in het marineblauw; het donkere
   woordmerk wordt via een filter wit gemaakt. */
.fi-body-has-topbar .fi-sidebar-header {
    background-color: var(--ah-marine) !important;
    --tw-ring-color: rgba(255, 255, 255, 0.08);
}

/* Mobiele zijbalk-kop: wit maken én proportioneel houden. Het wordmerk is ~12:1 breed;
   Filament zet een vaste inline hoogte (brandLogoHeight), waardoor de breedte in de smalle
   zijbalk wordt afgekapt en het logo in elkaar drukt. height:auto laat het meeschalen. */
.fi-sidebar-header img.fi-logo {
    height: auto !important;
    max-height: 1.75rem;
    max-width: 100%;
    filter: brightness(0) invert(1);
}

.fi-sidebar-nav {
    padding-top: 1.25rem;
}

/* Merkblok bovenin de zijbalk (render hook SIDEBAR_NAV_START, alleen desktop:
   op mobiel toont de zijbalk-kop het logo al). */
.ah-zijbalk-merk {
    display: none;
}

@media (min-width: 64rem) {
    .ah-zijbalk-merk {
        display: block;
        padding: 0.25rem 0.25rem 1.1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .ah-zijbalk-merk img {
        display: block;
        width: 100%;
        height: auto;
        filter: brightness(0) invert(1);
    }

    .ah-zijbalk-merk-sub {
        margin-top: 0.55rem;
        color: var(--ah-zijbalk-dim);
        font-size: 0.65rem;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
    }

    /* Het logo staat nu in de zijbalk; niet nogmaals in de topbalk. */
    .fi-topbar .fi-logo {
        display: none;
    }
}

/* Navigatie-items: lichte tekst, subtiele hover, wit + oranje streepje bij actief. */
.fi-sidebar-item-btn > .fi-icon {
    color: var(--ah-zijbalk-dim);
}

.fi-sidebar-item-label {
    color: var(--ah-zijbalk-tekst);
}

.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible {
    background-color: rgba(255, 255, 255, 0.06);
}

.fi-sidebar-item > .fi-sidebar-item-btn:hover > .fi-icon,
.fi-sidebar-item > .fi-sidebar-item-btn:focus-visible > .fi-icon {
    color: #fff;
}

.fi-sidebar-item > .fi-sidebar-item-btn:hover > .fi-sidebar-item-label,
.fi-sidebar-item > .fi-sidebar-item-btn:focus-visible > .fi-sidebar-item-label {
    color: #fff;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: rgba(255, 255, 255, 0.1);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: #fff;
}

/* Het oranje streepje: tegen de rand van de zijbalk (nav px-6 minus groups -mx-2 = 1rem). */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    content: "";
    position: absolute;
    inset-inline-start: -1rem;
    top: 0.375rem;
    bottom: 0.375rem;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background-color: var(--ah-oranje);
}

/* Groepskopjes in mockup-stijl: klein, uppercase, gespreid. */
.fi-sidebar-group-label {
    color: var(--ah-zijbalk-kop);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Tellers in de zijbalk: witte pil; op het actieve item oranje. */
.fi-sidebar-item-badge-ctn .fi-badge {
    background-color: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    --tw-ring-color: transparent;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-badge-ctn .fi-badge {
    background-color: var(--ah-oranje) !important;
}

.fi-sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 0.75rem;
}

/* ===== Knoppen ===== */

/* Iets steviger label dan Filaments standaard (font-medium), dichter bij de mockup.
   Kleur bewust NIET overschreven: primaire knoppen blijven marineblauw (merk) en
   de oranje 'warning'-knop (Direct verzenden) blijft daarvan onderscheiden. */
.fi-btn {
    font-weight: 600;
}

/* ===== Hoofdvlak (alleen licht thema; donker thema volgt Filament) ===== */

html:not(.dark) .fi-body {
    background-color: var(--ah-bg);
}

html:not(.dark) .fi-main-ctn {
    background-color: var(--ah-bg);
}

/* Tegels en panelen: iets rondere hoeken en een zachte lijn, zoals de mockup. */
.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn {
    border-radius: 1rem;
}

html:not(.dark) .fi-section,
html:not(.dark) .fi-wi-stats-overview-stat,
html:not(.dark) .fi-ta-ctn {
    --tw-ring-color: var(--ah-lijn);
}

/* Koppen in marineblauw met het zware Montserrat-gewicht van de mockup. */
.fi-header-heading {
    font-weight: 800;
}

html:not(.dark) .fi-header-heading,
html:not(.dark) .fi-section-header-heading,
html:not(.dark) .fi-ta-header-heading {
    color: var(--ah-marine);
}

html:not(.dark) .fi-wi-stats-overview-stat-value {
    color: var(--ah-marine);
}

.fi-wi-stats-overview-stat-value {
    font-weight: 800;
}