/* ============================================================
   DEMY — Couche « Élégance premium »
   Verre dépoli · ombres douces · micro-animations
   Se charge APRÈS demy-theme.css : ne fait que raffiner.
   Tout est neutralisé si prefers-reduced-motion.
   ============================================================ */

:root {
    --demy-blue: #1E3A8A;
    --demy-blue-dark: #0F172A;
    --demy-gold: #F59E0B;
    --demy-gold-light: #FDE68A;

    /* Ombres douces multi-couches (élévation) */
    --demy-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.05);
    --demy-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 12px 28px rgba(15, 23, 42, 0.08);
    --demy-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.10), 0 24px 56px rgba(15, 23, 42, 0.14);
    --demy-glow-gold: 0 0 0 1px rgba(245, 158, 11, 0.25), 0 8px 28px rgba(245, 158, 11, 0.18);

    /* Verre dépoli */
    --demy-glass-light: rgba(255, 255, 255, 0.72);
    --demy-glass-dark: rgba(17, 25, 45, 0.60);
    --demy-glass-border-light: rgba(255, 255, 255, 0.55);
    --demy-glass-border-dark: rgba(245, 158, 11, 0.10);

    --demy-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   1. MENU (topbar + sidebar)
   Le « rail bleu nuit » et le contraste du texte sont gérés dans le
   bloc <style> du provider (source unique, charge en dernier). On ne
   met rien ici pour ne pas entrer en conflit avec ce design.
   ============================================================ */

/* ============================================================
   2. SECTIONS & CARTES — verre dépoli + élévation au survol
   ============================================================ */
.fi-section {
    border-radius: 16px !important;
    box-shadow: var(--demy-shadow-sm);
    transition: transform 0.35s var(--demy-ease), box-shadow 0.35s var(--demy-ease), border-color 0.35s var(--demy-ease);
    will-change: transform;
}
.fi-section:hover {
    transform: translateY(-1px);
    box-shadow: var(--demy-shadow-md) !important;
}
.dark .fi-section {
    background: var(--demy-glass-dark) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-color: var(--demy-glass-border-dark) !important;
}

/* ============================================================
   3. WIDGETS DE STATISTIQUES — cartes verre + halo doré
   ============================================================ */
.fi-wi-stats-overview-stat {
    border-radius: 16px !important;
    box-shadow: var(--demy-shadow-sm);
    transition: transform 0.35s var(--demy-ease), box-shadow 0.35s var(--demy-ease);
    overflow: hidden;
    position: relative;
}
.fi-wi-stats-overview-stat::after {
    /* reflet diagonal très discret */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
    pointer-events: none;
}
.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--demy-shadow-md) !important;
}
.dark .fi-wi-stats-overview-stat {
    background: var(--demy-glass-dark) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--demy-glass-border-dark) !important;
}
.fi-wi-stats-overview-stat-value {
    letter-spacing: -0.02em;
    font-weight: 800 !important;
}

/* ============================================================
   4. TABLES — conteneur en carte douce
   ============================================================ */
.fi-ta-ctn {
    border-radius: 16px !important;
    box-shadow: var(--demy-shadow-sm);
    overflow: hidden;
}
.fi-ta-row {
    transition: background 0.18s var(--demy-ease);
}
.fi-ta-row:hover {
    background: rgba(30, 58, 138, 0.035) !important;
}

/* ============================================================
   4bis. WIDGETS TABLEAUX CÔTE À CÔTE — même hauteur
   La grille étire déjà les items ; on fait remplir la carte du
   tableau pour que deux widgets sur la même ligne aient une
   hauteur identique (ex. « Derniers adhérents » / « par concession »).
   ============================================================ */
.fi-wi-table {
    height: 100%;
    display: flex;
    flex-direction: column;
}
/* traverse un éventuel conteneur Livewire intermédiaire */
.fi-wi-table > * {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.fi-wi-table .fi-ta {
    flex: 1 1 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.fi-wi-table .fi-ta-ctn {
    flex: 1 1 auto;
}

/* ============================================================
   5. BOUTONS — dégradé + effet « sheen » au survol
   ============================================================ */
.fi-btn-color-primary,
.fi-btn.fi-color-primary {
    background-image: linear-gradient(135deg, #1E3A8A 0%, #1E40AF 100%) !important;
    box-shadow: 0 4px 14px rgba(30, 58, 138, 0.28);
    transition: transform 0.2s var(--demy-ease), box-shadow 0.2s var(--demy-ease);
    position: relative;
    overflow: hidden;
}
.fi-btn-color-primary:hover,
.fi-btn.fi-color-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(30, 58, 138, 0.38);
}
.fi-btn-color-primary::before,
.fi-btn.fi-color-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s var(--demy-ease);
}
.fi-btn-color-primary:hover::before,
.fi-btn.fi-color-primary:hover::before {
    left: 140%;
}

/* ============================================================
   6. DROPDOWNS & MODALES — verre dépoli + ombre profonde
   ============================================================ */
.fi-dropdown-panel,
.fi-modal-window {
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    box-shadow: var(--demy-shadow-lg) !important;
    border-radius: 18px !important;
}
.dark .fi-dropdown-panel,
.dark .fi-modal-window {
    background: rgba(17, 25, 45, 0.82) !important;
    border: 1px solid var(--demy-glass-border-dark) !important;
}

/* ============================================================
   7. ÉCRAN DE CONNEXION
   Le style du login (carte, champs, bouton, dégradé, orbes) est
   défini dans le bloc <style> inline de AdminPanelProvider, qui se
   charge APRÈS cette feuille et fait autorité. On ne le duplique pas
   ici pour éviter tout conflit (texte illisible). Les seules touches
   « premium » ajoutées au login (animations) le sont directement dans
   ce bloc, en réutilisant les @keyframes ci-dessous.
   ============================================================ */

/* ============================================================
   8. ANIMATIONS
   ============================================================ */
@keyframes demy-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(24px, -30px) scale(1.06); }
}
@keyframes demy-rise {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes demy-logo-pulse {
    0%, 100% { filter: drop-shadow(0 6px 18px rgba(245, 158, 11, 0.25)); }
    50%      { filter: drop-shadow(0 8px 30px rgba(245, 158, 11, 0.5)); }
}
@keyframes demy-count-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   9. ACCESSIBILITÉ — coupe tout mouvement si demandé
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    .fi-simple-layout::before,
    .fi-simple-layout::after,
    .fi-simple-page .fi-logo,
    .fi-simple-page img[alt] {
        animation: none !important;
        transition: none !important;
    }
    .fi-section:hover,
    .fi-wi-stats-overview-stat:hover,
    .fi-btn-color-primary:hover {
        transform: none !important;
    }
}