/* ============================================================================
 * FlowYa — Cockpit sidebar refonte 2026-05-20
 * Objectifs (feedback Hubert) :
 *  - Sticky (le menu ne scrolle plus avec la page)
 *  - Plus structuré : espacements, hiérarchie visuelle des groupes
 *  - Accents de couleur par groupe (utilise le hash des emoji du nav label)
 *  - Hover + transitions douces, opérateur-friendly
 * ========================================================================= */

/* ── STICKY : le sidebar reste visible quand on scrolle la page ─────────── */
@media (min-width: 1024px) {
    aside.fi-sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden;
        z-index: 30;
    }
    /* Le contenu principal doit laisser la place au sidebar fixe */
    .fi-main-ctn,
    .fi-layout > main {
        margin-left: 15rem !important; /* matche sidebarWidth */
    }
    /* Sidebar repliée (rail) → 4.5rem environ */
    .fi-sidebar.fi-sidebar-collapsed ~ .fi-main-ctn,
    .fi-sidebar.fi-sidebar-collapsed + .fi-main-ctn,
    body:has(aside.fi-sidebar.fi-sidebar-collapsed) .fi-main-ctn {
        margin-left: 4.5rem !important;
    }
}

/* Scrollbar discrète du sidebar */
aside.fi-sidebar::-webkit-scrollbar { width: 6px; }
aside.fi-sidebar::-webkit-scrollbar-thumb { background: rgba(15, 76, 58, 0.18); border-radius: 4px; }
aside.fi-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(15, 76, 58, 0.32); }

/* ── GROUPES : espacements, labels lisibles ─────────────────────────────── */
.fi-sidebar-nav-groups-ctn,
.fi-sidebar-nav {
    padding: 0.5rem 0.4rem;
    gap: 0.4rem;
}

.fi-sidebar-group {
    margin-bottom: 0.5rem;
    padding: 0.35rem 0.25rem 0.5rem;
    border-radius: 12px;
    transition: background-color 0.18s ease;
}

.fi-sidebar-group:hover {
    background: rgba(15, 76, 58, 0.025);
}

.fi-sidebar-group-label,
.fi-sidebar-group .fi-sidebar-group-label {
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0F4C3A !important;
    padding: 0.45rem 0.75rem 0.35rem !important;
    margin-bottom: 0.15rem;
    opacity: 0.95;
}

/* ── ITEMS : padding plus généreux, hover discret ───────────────────────── */
.fi-sidebar-item {
    border-radius: 9px !important;
    margin: 0 0.15rem;
    transition: background-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.fi-sidebar-item-button {
    padding: 0.5rem 0.75rem !important;
    gap: 0.6rem !important;
    border-radius: 9px !important;
    transition: all 0.15s ease;
}

.fi-sidebar-item-button:hover {
    background: rgba(15, 76, 58, 0.06) !important;
    transform: translateX(2px);
}

.fi-sidebar-item-button.fi-active,
.fi-sidebar-item-active .fi-sidebar-item-button {
    background: linear-gradient(135deg, #0F4C3A 0%, #147a5b 100%) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(15, 76, 58, 0.22);
}

.fi-sidebar-item-button.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item-button.fi-active .fi-sidebar-item-label,
.fi-sidebar-item-active .fi-sidebar-item-icon,
.fi-sidebar-item-active .fi-sidebar-item-label {
    color: #fff !important;
}

.fi-sidebar-item-icon {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    color: #0F4C3A;
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

.fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    opacity: 1;
}

.fi-sidebar-item-label {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #1a1a1a;
}

/* ── LOGO / BRAND : un peu d'air en haut ────────────────────────────────── */
.fi-sidebar-header {
    border-bottom: 1px solid rgba(15, 76, 58, 0.08);
    padding-bottom: 0.75rem;
    margin-bottom: 0.25rem;
}

/* ── ACCENTS par groupe (basé sur l'ordre d'apparition) ──────────────────
 * Filament rend les groupes dans l'ordre déclaré dans navigationGroups().
 * On colore une fine bordure gauche par position pour aider à se repérer.
 * 1: Démarrage  | 2: Agenda (vert)  | 3: Clients (bleu)
 * 4: Max (violet) | 5: Finance (or) | 6+: gris doux
 * ========================================================================= */
.fi-sidebar-nav-groups-ctn > .fi-sidebar-group:nth-child(1) { border-left: 3px solid #F78F3F33; }
.fi-sidebar-nav-groups-ctn > .fi-sidebar-group:nth-child(2) { border-left: 3px solid #0F4C3A33; }
.fi-sidebar-nav-groups-ctn > .fi-sidebar-group:nth-child(3) { border-left: 3px solid #2563EB33; }
.fi-sidebar-nav-groups-ctn > .fi-sidebar-group:nth-child(4) { border-left: 3px solid #7C3AED33; }
.fi-sidebar-nav-groups-ctn > .fi-sidebar-group:nth-child(5) { border-left: 3px solid #D97706 33; }
.fi-sidebar-nav-groups-ctn > .fi-sidebar-group:nth-child(n+6) { border-left: 3px solid rgba(107, 114, 128, 0.18); }

/* ── COLLAPSE button (rail) : un peu plus visible ───────────────────────── */
.fi-sidebar-close-overlay-btn,
.fi-sidebar-collapse-button {
    color: #0F4C3A !important;
}

/* ── LARGEUR RÉDUITE ─────────────────────────────────────────────────────── */
:root {
    --sidebar-width: 15rem;
}
@media (min-width: 1024px) {
    aside.fi-sidebar {
        width: 15rem !important;
    }
}

/* ── AUJOURD'HUI toujours en position 0 dans le menu ────────────────────── */
.fi-sidebar-nav-groups {
    display: flex !important;
    flex-direction: column;
}
.fi-sidebar-nav-groups > li[data-group-label=""] {
    order: -1 !important;
}