/*
 * Revinum — Dark Sidebar Theme
 * Override Filament v3 sidebar to dark style (light mode only)
 */

/* ═══════════════════════════════════════════════════════
   SIDEBAR — Fond sombre + textes clairs
   ═══════════════════════════════════════════════════════ */

:root:not(.dark) .fi-sidebar {
    background-color: #1e293b !important;
    border-right-color: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
}

/* ── Logo / Brand ─────────────────────────────────── */

:root:not(.dark) .fi-sidebar-header {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

:root:not(.dark) .fi-sidebar-header a,
:root:not(.dark) .fi-sidebar-header span,
:root:not(.dark) .fi-sidebar-header p {
    color: #ffffff !important;
    font-weight: 700;
}

/* ── Navigation items — textes ────────────────────── */

/* Lien / bouton principal du nav item */
:root:not(.dark) .fi-sidebar-item a,
:root:not(.dark) .fi-sidebar-item button {
    color: #cbd5e1 !important;
    transition: all 0.15s ease;
}

/* Labels et spans à l'intérieur — couleur uniquement, PAS de background/radius */
:root:not(.dark) .fi-sidebar-item a span,
:root:not(.dark) .fi-sidebar-item button span,
:root:not(.dark) .fi-sidebar-item-label {
    color: #cbd5e1 !important;
    background-color: transparent !important;
}

/* ── Hover — uniquement sur le <a>/<button>, pas les enfants ── */

:root:not(.dark) .fi-sidebar-item a:hover,
:root:not(.dark) .fi-sidebar-item button:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

:root:not(.dark) .fi-sidebar-item a:hover span,
:root:not(.dark) .fi-sidebar-item button:hover span {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* ── Item actif — background UNIQUEMENT sur le <a>/<button> ── */

:root:not(.dark) .fi-sidebar-item.fi-active a,
:root:not(.dark) .fi-sidebar-item.fi-active button {
    background-color: rgba(99, 102, 241, 0.18) !important;
    color: #ffffff !important;
}

/* Enfants de l'item actif : couleur seulement, PAS de background */
:root:not(.dark) .fi-sidebar-item.fi-active a span,
:root:not(.dark) .fi-sidebar-item.fi-active button span,
:root:not(.dark) .fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* ── Icônes ───────────────────────────────────────── */

:root:not(.dark) .fi-sidebar-item svg,
:root:not(.dark) .fi-sidebar-item .fi-sidebar-item-icon {
    color: #94a3b8 !important;
}

:root:not(.dark) .fi-sidebar-item a:hover svg,
:root:not(.dark) .fi-sidebar-item button:hover svg {
    color: #a5b4fc !important;
}

:root:not(.dark) .fi-sidebar-item.fi-active svg,
:root:not(.dark) .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: #818cf8 !important;
}

/* ── Group labels ─────────────────────────────────── */

:root:not(.dark) .fi-sidebar-group-label,
:root:not(.dark) .fi-sidebar-group > button span,
:root:not(.dark) .fi-sidebar-group-button span {
    color: #64748b !important;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    background-color: transparent !important;
}

/* ── Sidebar collapse button ──────────────────────── */

:root:not(.dark) .fi-sidebar-close-btn,
:root:not(.dark) .fi-sidebar [x-on\:click*="collapseSidebar"],
:root:not(.dark) .fi-sidebar-close-btn svg {
    color: #cbd5e1 !important;
}

:root:not(.dark) .fi-sidebar-close-btn:hover,
:root:not(.dark) .fi-sidebar-close-btn:hover svg {
    color: #ffffff !important;
}

/* ── Badges dans la sidebar ───────────────────────── */

:root:not(.dark) .fi-sidebar-item .fi-badge {
    --tw-bg-opacity: 0.15;
}

/* ── Tenant switcher ──────────────────────────────── */

:root:not(.dark) .fi-tenant-menu-trigger {
    color: #e2e8f0 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

:root:not(.dark) .fi-tenant-menu-trigger span,
:root:not(.dark) .fi-tenant-menu-trigger svg {
    color: #e2e8f0 !important;
}

:root:not(.dark) .fi-tenant-menu-trigger:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

:root:not(.dark) .fi-tenant-menu-trigger:hover span,
:root:not(.dark) .fi-tenant-menu-trigger:hover svg {
    color: #ffffff !important;
}

/* ── Footer sidebar ───────────────────────────────── */

:root:not(.dark) .fi-sidebar-footer {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* ═══════════════════════════════════════════════════════
   TOPBAR — Légère ombre pour contraste
   ═══════════════════════════════════════════════════════ */

:root:not(.dark) .fi-topbar {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

/* ═══════════════════════════════════════════════════════
   USER AVATAR dans la sidebar
   ═══════════════════════════════════════════════════════ */

:root:not(.dark) .fi-sidebar .fi-avatar {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ── Scrollbar sidebar ────────────────────────────── */

:root:not(.dark) .fi-sidebar ::-webkit-scrollbar {
    width: 4px;
}

:root:not(.dark) .fi-sidebar ::-webkit-scrollbar-track {
    background: transparent;
}

:root:not(.dark) .fi-sidebar ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}