/* ================================================================
   VISIOQR — Panel Theme  (chargé via FilamentAsset — TOUTES les pages)
   Ne contient PAS les styles auth (gérés par login-premium-style.blade.php).
   ================================================================ */

/* ── 1. COULEURS PRIMAIRES FORCÉES ────────────────────────────────
   Override Filament default violet → cyan VisioQR #00c3ff
   Valeurs RGB Tailwind pour la scale sky/cyan customisée.           */
:root {
    --primary-50:  240 253 255;
    --primary-100: 224 242 254;
    --primary-200: 186 230 253;
    --primary-300: 125 211 252;
    --primary-400:  56 189 248;
    --primary-500:  14 165 233;
    --primary-600:   2 132 199;
    --primary-700:   3 105 161;
    --primary-800:   7  89 133;
    --primary-900:  12  74 110;
    --primary-950:   8  47  73;
}

/* ── 2. FOND APP (layout normal) ──────────────────────────────── */
.fi-layout {
    background:
        radial-gradient(50rem 26rem at 0% 0%,   rgba(14,165,233,.12), transparent 55%),
        radial-gradient(42rem 24rem at 100% 0%,  rgba(15,23,42,.10),   transparent 45%),
        linear-gradient(180deg, #f8fbff 0%, #f4f8fc 100%);
}
.fi-main-ctn { background: transparent; }

/* ── 3. TOPBAR ────────────────────────────────────────────────── */
.fi-topbar {
    backdrop-filter: blur(18px);
    background: rgba(248,251,255,.84) !important;
    border-bottom: 1px solid rgba(148,163,184,.16);
}

/* ── 4. SIDEBAR — structure ───────────────────────────────────── */
.fi-sidebar {
    background: linear-gradient(180deg, rgba(2,6,23,.97), rgba(15,23,42,.95)) !important;
    border-inline-end: 1px solid rgba(148,163,184,.10) !important;
}
.fi-sidebar-header {
    background: transparent !important;
    backdrop-filter: blur(18px);
    padding: 1rem !important;
}
.fi-sidebar-nav { padding-top: 1rem !important; }

/* ── 5. SIDEBAR — items ───────────────────────────────────────── */
.fi-sidebar-item-button {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: .65rem !important;
    width: 100% !important;
    padding: .55rem .85rem !important;
    border-radius: .85rem !important;
    text-decoration: none !important;
    transition: background .15s, color .15s !important;
}

/* icône sidebar */
.fi-sidebar-item-icon {
    flex-shrink: 0 !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    color: rgba(148,163,184,.75) !important;
}
.fi-sidebar-item-icon svg { width: 1.25rem !important; height: 1.25rem !important; }

/* label sidebar */
.fi-sidebar-item-label {
    flex: 1 1 auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: rgba(203,213,225,.85) !important;
    font-weight: 500 !important;
    font-size: .875rem !important;
}

/* groupe sidebar */
.fi-sidebar-group-label {
    color: rgba(100,116,139,.9) !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
}

/* hover */
.fi-sidebar-item-button:hover .fi-sidebar-item-label,
.fi-sidebar-item-button:hover .fi-sidebar-item-icon { color: #e2f8ff !important; }
.fi-sidebar-item-button:hover { background: rgba(0,195,255,.08) !important; }

/* actif */
.fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background: linear-gradient(90deg, rgba(0,195,255,.18), rgba(15,23,42,.92)) !important;
    box-shadow: inset 0 0 0 1px rgba(0,195,255,.22), 0 8px 24px rgba(2,6,23,.18) !important;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-icon { color: #00c3ff !important; }
.fi-sidebar-item.fi-active .fi-sidebar-item-label { color: #e0f2fe !important; font-weight: 600 !important; }

/* ── 6. TENANT SWITCHER (company avatar) ──────────────────────── */
.fi-tenant-menu-trigger-label { color: rgba(226,232,240,.90) !important; }
.fi-tenant-menu-trigger-icon  { color: rgba(148,163,184,.75) !important; }
.fi-tenant-menu-trigger:hover .fi-tenant-menu-trigger-label { color: #ffffff !important; }

/* ── 7. BOUTONS PRIMAIRES (global) ───────────────────────────── */
.fi-btn-color-primary {
    background: linear-gradient(90deg, #00c3ff 0%, #0891b2 100%) !important;
    border-color: rgba(0,195,255,.4) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    transition: filter .2s, transform .15s !important;
}
.fi-btn-color-primary:hover  { filter: brightness(1.1) !important; transform: translateY(-1px) !important; }
.fi-btn-color-primary:active { transform: translateY(0) !important; }

/* ── 8. LIENS ─────────────────────────────────────────────────── */
.fi-link { color: #0891b2 !important; }
.dark .fi-link { color: #22d3ee !important; }

/* ── 9. SECTIONS / WIDGETS ────────────────────────────────────── */
.fi-section,
.fi-widget,
.fi-account-widget,
.fi-ta-ctn,
.fi-fo-repeater-item {
    border-radius: 1.25rem !important;
    border: 1px solid rgba(148,163,184,.14) !important;
    background: rgba(255,255,255,.86) !important;
    box-shadow: 0 16px 40px rgba(15,23,42,.07) !important;
    backdrop-filter: blur(12px);
    /* overflow: visible est critique : les popups ColorPicker (et Select)
       sont rendus en position:absolute à l'intérieur de la section.
       overflow:hidden les couperait — on laisse les coins arrondis
       via background-clip, pas via overflow. */
    overflow: visible !important;
}
/* Le contenu de section doit aussi laisser passer les popups */
.fi-section-content,
.fi-section-content-ctn {
    overflow: visible !important;
}
.fi-section-header { border-bottom: 1px solid rgba(148,163,184,.1) !important; }

/* ── 9b. COLOR PICKER popup (Filament / vanilla-colorful) ──────────
   Architecture : le panel est position:absolute z-10 via x-float.
   Problème : backdrop-filter sur .fi-section crée un stacking context
   qui "capture" le panel — les sections suivantes le couvrent.
   Solution :
     1. Monter le z-index du panel très haut.
     2. Avec :has(), booster la section courante quand le picker est ouvert
        afin qu'elle soit au-dessus de ses sœurs.
   ─────────────────────────────────────────────────────────────────── */

/* Panel du picker — z-index très élevé à l'intérieur de son contexte */
.fi-fo-color-picker-panel {
    z-index: 9999 !important;
}

/* Quand un picker est ouvert dans une section, on remonte cette section
   au-dessus de toutes les autres (les sections n'ont pas de z-index
   explicite par défaut — on en donne un faible globalement, et un élevé
   quand le picker est visible). */
.fi-section {
    z-index: 1;
    position: relative; /* nécessaire pour que z-index fonctionne */
}
.fi-section:has(.fi-fo-color-picker-panel:not(.hidden)) {
    z-index: 200 !important;
}

/* Wrapper du color picker */
.fi-fo-color-picker {
    position: relative;
}

/* ── 10. USER MENU DROPDOWN ──────────────────────────────────── */
.fi-dropdown-panel {
    border-radius: 1rem !important;
    border: 1px solid rgba(0,195,255,.15) !important;
    box-shadow: 0 24px 60px rgba(2,6,23,.45) !important;
    background: rgba(10,22,40,.94) !important;
    backdrop-filter: blur(20px) saturate(1.4) !important;
    overflow: hidden !important;
}
.fi-dropdown-list-item {
    border-radius: .65rem !important;
    color: rgba(203,213,225,.9) !important;
    font-size: .875rem !important;
    font-weight: 500 !important;
    gap: .65rem !important;
    padding: .55rem .75rem !important;
    transition: background .12s, color .12s !important;
}
.fi-dropdown-list-item:hover {
    background: rgba(0,195,255,.1) !important;
    color: #e2f8ff !important;
}
.fi-dropdown-list-item-icon {
    width: 1.1rem !important;
    height: 1.1rem !important;
    flex-shrink: 0 !important;
    color: rgba(100,195,255,.7) !important;
}
.fi-dropdown-list-item-icon svg { width: 1.1rem !important; height: 1.1rem !important; }
.fi-dropdown-header {
    padding: .55rem .75rem !important;
    color: rgba(148,163,184,.7) !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
}

/* ── 11. TABLE / FILTRE ─────────────────────────────────────── */
.fi-ta-filter-indicators,
.fi-ta-group-header,
.fi-ta-selection-indicator,
.fi-ta-header-ctn {
    background: rgba(248,250,252,.72) !important;
}

/* ── 12. LOGO ──────────────────────────────────────────────── */
.fi-logo { height: 2.9rem !important; width: auto !important; }
.fi-sidebar-header .fi-logo { height: 2.4rem !important; }
.fi-topbar .fi-logo { height: 2rem !important; }

/* ── 13. BADGE ─────────────────────────────────────────────── */
.fi-badge { border-radius: 999px !important; }

/* ── 14. DARK MODE — app ────────────────────────────────────── */
.dark .fi-layout {
    background:
        radial-gradient(50rem 26rem at 0% 0%,   rgba(14,165,233,.18), transparent 55%),
        radial-gradient(42rem 24rem at 100% 0%,  rgba(255,255,255,.06), transparent 45%),
        linear-gradient(180deg, #08111f 0%, #0f172a 100%);
}
.dark .fi-topbar {
    background: rgba(8,17,31,.80) !important;
    border-bottom-color: rgba(255,255,255,.07) !important;
}
.dark .fi-section,
.dark .fi-widget,
.dark .fi-account-widget,
.dark .fi-ta-ctn,
.dark .fi-fo-repeater-item {
    background: rgba(15,23,42,.84) !important;
    border-color: rgba(148,163,184,.12) !important;
    box-shadow: 0 16px 40px rgba(2,6,23,.28) !important;
    overflow: visible !important;
}