/* VDS Portaal — Custom Huisstijl */

/* ── Logo altijd op donkere achtergrond ── */
.fi-sidebar-header {
    background: #0a0f1e !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    padding: 12px 16px !important;
}

/* ── Donkere sidebar in light mode ── */
:root {
    --fi-sidebar-width: 260px;
}

[data-theme="light"] .fi-sidebar,
.fi-sidebar {
    background-color: #0d1117 !important;
    border-right: 1px solid rgba(0, 73, 176, 0.3) !important;
}

/* Sidebar navigatie tekst */
[data-theme="light"] .fi-sidebar .fi-sidebar-nav,
.fi-sidebar .fi-sidebar-nav {
    background-color: #0d1117 !important;
}

/* Nav item tekst */
[data-theme="light"] .fi-sidebar-item-label,
.fi-sidebar-item-label {
    color: #c9d4e8 !important;
}

[data-theme="light"] .fi-sidebar-item-label:hover,
.fi-sidebar-item .fi-sidebar-item-button:hover .fi-sidebar-item-label {
    color: #ffffff !important;
}

/* Actief nav item */
[data-theme="light"] .fi-sidebar-item-button.fi-active .fi-sidebar-item-label,
.fi-sidebar-item-button.fi-active .fi-sidebar-item-label {
    color: #60a5fa !important;
}

[data-theme="light"] .fi-sidebar-item-button.fi-active,
.fi-sidebar-item-button.fi-active {
    background: rgba(0, 73, 176, 0.25) !important;
}

/* Navigatie groep labels */
[data-theme="light"] .fi-sidebar-group-label,
.fi-sidebar-group-label {
    color: #4b6483 !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

/* Nav icons */
[data-theme="light"] .fi-sidebar-item-icon,
.fi-sidebar-item-icon {
    color: #4b6483 !important;
}

[data-theme="light"] .fi-sidebar-item-button.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item-button.fi-active .fi-sidebar-item-icon {
    color: #60a5fa !important;
}

/* ── Topbar user info in light mode ── */
[data-theme="light"] .fi-topbar {
    background: white;
    border-bottom: 2px solid #0049b0;
}

/* ── VDS blauwe accentlijn bovenaan ── */
.fi-main-ctn::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, #0049b0, #60a5fa, #0049b0);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}

/* ── Stats cards ── */
.fi-wi-stats-overview-stat {
    border-top: 3px solid #0049b0 !important;
}

/* ── Badges ── */
.fi-badge {
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* ── Table striped ── */
[data-theme="dark"] .fi-ta-row:nth-child(even) {
    background: rgba(255,255,255,0.02);
}

/* ── Logo in sidebar ── */
.fi-logo img {
    object-fit: contain;
    border-radius: 4px;
}

/* ── Mobile responsive fixes ── */
@media (max-width: 768px) {
    /* Sidebar overlay op mobile - donkere background */
    .fi-sidebar {
        background-color: #0d1117 !important;
    }

    /* Formulieren - max 2 kolommen op tablet */
    .fi-fo-fieldset .fi-fo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 480px) {
    /* Telefoon - alles 1 kolom */
    .fi-fo-fieldset .fi-fo-grid {
        grid-template-columns: 1fr !important;
    }

    /* Stats cards 2x2 grid op mobiel */
    .fi-wi-stats-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Tabel acties kleiner op mobiel */
    .fi-ta-actions {
        flex-wrap: wrap;
        gap: 4px;
    }
}