/*
 * De zijbalk in baecx-blauw (besluit Erik 3-11-2026, docs/opmaak.md, sectie Zijbalk).
 *
 * Een van de twee eigen stylesheets naast Filament (het andere is contrast.css). Alleen de zijbalk (.fi-sidebar en wat erin staat), op de vaste
 * fi-klassen van Filament. Geen kleurcode: de kleuren zijn CSS-variabelen die AdminPanelProvider uit
 * App\Support\BrandColors in de pagina zet (--baecx-sidebar-*), en primary 600 van Filament voor het actieve
 * item. tests/Architecture/OpmaakTest.php bewaakt dat; tests/Unit/Opmaak/ContrastTest.php het contrast.
 *
 * Filament zet zijn eigen stijl in CSS-lagen (@layer); deze regels staan buiten een laag en gaan daarom voor.
 * De topbalk blijft wit; de kop met het logo in de zijbalk ook (hieronder).
 */

.fi-sidebar {
    background-color: var(--baecx-sidebar-background);
}

/*
 * De kop met het logo (alleen op telefoon en tablet, als de zijbalk open is). Filament maakt hem doorzichtig en rekent
 * op een witte zijbalk; op blauw zou het donkere logo wegvallen. Daarom de kleur van de topbalk, ook in donkere modus.
 */
.fi-sidebar .fi-sidebar-header {
    background-color: var(--baecx-sidebar-header);
}

/* Menutekst licht, iconen en groeplabels iets gedempt. */
.fi-sidebar .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-database-notifications-btn-label {
    color: var(--baecx-sidebar-text);
}

.fi-sidebar .fi-sidebar-item-btn > .fi-icon,
.fi-sidebar .fi-sidebar-group-btn .fi-icon,
.fi-sidebar .fi-sidebar-group-dropdown-trigger-btn .fi-icon,
.fi-sidebar .fi-sidebar-database-notifications-btn > .fi-icon,
.fi-sidebar .fi-sidebar-group-label,
.fi-sidebar .fi-sidebar-group-collapse-btn {
    color: var(--baecx-sidebar-muted);
}

/* Onder de muis en met de focus: iets lichter blauw in plaats van het lichtgrijs van Filament. */
.fi-sidebar .fi-sidebar-item-has-url:not(.fi-active) > .fi-sidebar-item-btn:hover,
.fi-sidebar .fi-sidebar-item-has-url:not(.fi-active) > .fi-sidebar-item-btn:focus-visible,
.fi-sidebar .fi-sidebar-group-dropdown-trigger-btn:hover,
.fi-sidebar .fi-sidebar-group-dropdown-trigger-btn:focus-visible,
.fi-sidebar .fi-sidebar-database-notifications-btn:hover,
.fi-sidebar .fi-sidebar-database-notifications-btn:focus-visible {
    background-color: var(--baecx-sidebar-hover);
}

/*
 * Het actieve item: de vulling van een primaire knop met witte tekst en icoon. Rood staat maar 2,5:1 op het blauw;
 * daarom ook een lichte balk links, binnen het item (een schaduw, zodat er niets verschuift).
 */
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--primary-600);
    box-shadow: inset 3px 0 0 var(--baecx-sidebar-text);
}

.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon,
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: var(--baecx-sidebar-active-text);
}

/*
 * Donkere modus (HS-04): het gewone blauw zou lichter zijn dan de kaarten en de blik van de inhoud wegtrekken. Daarom
 * een donkerder blauw, tussen pagina en kaart in; onder de muis en met de focus het gewone blauw.
 */
.dark .fi-sidebar {
    background-color: var(--baecx-sidebar-dark-background);
}

.dark .fi-sidebar .fi-sidebar-header {
    background-color: var(--gray-900);
}

.dark .fi-sidebar .fi-sidebar-item-has-url:not(.fi-active) > .fi-sidebar-item-btn:hover,
.dark .fi-sidebar .fi-sidebar-item-has-url:not(.fi-active) > .fi-sidebar-item-btn:focus-visible,
.dark .fi-sidebar .fi-sidebar-group-dropdown-trigger-btn:hover,
.dark .fi-sidebar .fi-sidebar-group-dropdown-trigger-btn:focus-visible,
.dark .fi-sidebar .fi-sidebar-database-notifications-btn:hover,
.dark .fi-sidebar .fi-sidebar-database-notifications-btn:focus-visible {
    background-color: var(--baecx-sidebar-dark-hover);
}

/* Focusrand: Filament toont de focus in de zijbalk alleen met een lichtere achtergrond; op blauw komt er een rand bij. */
.fi-sidebar .fi-sidebar-item-btn:focus-visible,
.fi-sidebar .fi-sidebar-group-dropdown-trigger-btn:focus-visible,
.fi-sidebar .fi-sidebar-database-notifications-btn:focus-visible,
.fi-sidebar .fi-sidebar-group-collapse-btn:focus-visible {
    outline: 2px solid var(--baecx-sidebar-text);
    outline-offset: -2px;
}