/* ============================================
   DEMY - Thème personnalisé Filament
   Dengbè Mutuelle Yako
   v2.0 — Design premium institutionnel
   ============================================ */

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

/* =============================================
   SECTIONS DE FORMULAIRE
   ============================================= */
.fi-section {
    border: 1px solid rgba(30, 58, 138, 0.07) !important;
    border-left: 3px solid rgba(30, 58, 138, 0.15) !important;
    transition: all 0.3s ease;
    border-radius: 12px !important;
}
.fi-section:hover {
    border-left-color: var(--demy-gold) !important;
    box-shadow: 0 4px 20px rgba(30, 58, 138, 0.05) !important;
}
.dark .fi-section {
    border-color: rgba(245, 158, 11, 0.06) !important;
    border-left-color: rgba(245, 158, 11, 0.15) !important;
}
.dark .fi-section:hover {
    border-left-color: var(--demy-gold) !important;
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.04) !important;
}

/* Section header */
.fi-section-header {
    border-bottom: 1px solid rgba(30, 58, 138, 0.05);
    padding-bottom: 10px !important;
}
.fi-section-header-heading {
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    font-size: 0.95rem !important;
}
.fi-section-header-description {
    font-size: 0.78rem !important;
    opacity: 0.6;
}

/* Icon de section en doré */
.fi-section-header .fi-icon-btn,
.fi-section-header svg:first-child {
    color: var(--demy-gold) !important;
}

/* =============================================
   INPUTS & SELECTS
   ============================================= */
.fi-input-wrp {
    transition: all 0.25s ease;
    border-radius: 10px !important;
}
.fi-input-wrp:focus-within {
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.08), 0 4px 12px rgba(30, 58, 138, 0.04) !important;
    border-color: var(--demy-blue) !important;
}
.dark .fi-input-wrp:focus-within {
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12), 0 4px 12px rgba(245, 158, 11, 0.04) !important;
}
.fi-select-wrp:focus-within {
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.08) !important;
}

/* Prefix icons dorés */
.fi-input-wrp-prefix {
    color: var(--demy-gold) !important;
    opacity: 0.7;
}

/* =============================================
   LABELS & HELPERS
   ============================================= */
.fi-fo-field-wrp-label label {
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    color: #1E293B !important;
    letter-spacing: 0.01em;
}
.dark .fi-fo-field-wrp-label label {
    color: #E2E8F0 !important;
}
.fi-fo-field-wrp-helper-text p {
    font-size: 0.72rem !important;
    font-style: italic;
    opacity: 0.6;
    line-height: 1.4;
}

/* Asterisques required en doré */
.fi-fo-field-wrp-label .text-danger-600 {
    color: var(--demy-gold) !important;
}
.dark .fi-fo-field-wrp-label .text-danger-400 {
    color: var(--demy-gold) !important;
}

/* =============================================
   TOGGLE SWITCH
   ============================================= */
.fi-toggle-wrp {
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.02), rgba(245, 158, 11, 0.02));
    border-radius: 12px;
    border: 1px solid rgba(30, 58, 138, 0.06);
    transition: all 0.2s ease;
}
.fi-toggle-wrp:hover {
    border-color: rgba(245, 158, 11, 0.2);
}
.dark .fi-toggle-wrp {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.02), rgba(30, 58, 138, 0.02));
    border-color: rgba(245, 158, 11, 0.08);
}

/* =============================================
   FILE UPLOAD ZONE PREMIUM
   ============================================= */
.fi-fo-file-upload .filepond--root {
    border: 2px dashed rgba(30, 58, 138, 0.15) !important;
    border-radius: 14px !important;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.01), rgba(245, 158, 11, 0.01)) !important;
}
.fi-fo-file-upload .filepond--root:hover {
    border-color: var(--demy-gold) !important;
    background: rgba(245, 158, 11, 0.03) !important;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.08);
}

/* =============================================
   TABLEAUX
   ============================================= */
.fi-badge {
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.62rem !important;
    border-radius: 6px !important;
}
.fi-ta-row {
    transition: all 0.15s ease;
}
.fi-ta-row:hover {
    background: linear-gradient(90deg, rgba(30, 58, 138, 0.02), rgba(245, 158, 11, 0.02)) !important;
}
.dark .fi-ta-row:hover {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.03), rgba(30, 58, 138, 0.03)) !important;
}
/* En-tête de tableau avec accent */
.fi-ta-header-cell {
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.05em !important;
    color: #64748B !important;
    border-bottom: 2px solid rgba(30, 58, 138, 0.08) !important;
}
.dark .fi-ta-header-cell {
    color: #94A3B8 !important;
    border-bottom-color: rgba(245, 158, 11, 0.08) !important;
}

/* =============================================
   DASHBOARD STATS CARDS
   ============================================= */
.fi-wi-stats-overview-stat {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
    border-left: 3px solid rgba(30, 58, 138, 0.2) !important;
    border-radius: 12px !important;
}
.fi-wi-stats-overview-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(30, 58, 138, 0.08) !important;
    border-left-color: var(--demy-gold) !important;
}
.dark .fi-wi-stats-overview-stat {
    border-left-color: rgba(245, 158, 11, 0.2) !important;
}
.dark .fi-wi-stats-overview-stat:hover {
    box-shadow: 0 12px 30px rgba(245, 158, 11, 0.06) !important;
    border-left-color: var(--demy-gold) !important;
}

/* =============================================
   BARRE DE RECHERCHE TABLE - SELECT2 STYLE
   ============================================= */
.fi-ta-search-field input {
    border-radius: 12px !important;
    padding: 10px 16px 10px 40px !important;
    font-size: 0.88rem !important;
    border: 2px solid rgba(30, 58, 138, 0.1) !important;
    transition: all 0.3s ease !important;
    background: white !important;
}
.fi-ta-search-field input:focus {
    border-color: var(--demy-gold) !important;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.1), 0 4px 12px rgba(245, 158, 11, 0.08) !important;
}
.dark .fi-ta-search-field input {
    background: #1F2937 !important;
    border-color: rgba(245, 158, 11, 0.1) !important;
}
.dark .fi-ta-search-field input:focus {
    border-color: var(--demy-gold) !important;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.08) !important;
}

/* Select Filament (Select2-like) amélioré */
.fi-select-wrp {
    border-radius: 10px !important;
}
.choices__inner {
    border-radius: 10px !important;
    min-height: 42px !important;
    padding: 4px 8px !important;
}
.choices__list--dropdown {
    border-radius: 10px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important;
    border: 1px solid rgba(30, 58, 138, 0.1) !important;
    margin-top: 4px !important;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background: rgba(30, 58, 138, 0.06) !important;
    color: var(--demy-blue) !important;
}
.dark .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background: rgba(245, 158, 11, 0.08) !important;
    color: var(--demy-gold) !important;
}
.choices__input {
    font-size: 0.88rem !important;
    padding: 4px 0 !important;
}

/* =============================================
   BOUTONS
   ============================================= */
.fi-btn {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 10px !important;
}
.fi-btn:hover { transform: translateY(-1px); }
.fi-btn:active { transform: translateY(0); }

/* Bouton principal avec ombre premium */
.fi-ta-header-ctn .fi-btn-primary,
.fi-header-actions .fi-btn-primary {
    box-shadow: 0 4px 14px rgba(30, 58, 138, 0.25) !important;
}
.fi-ta-header-ctn .fi-btn-primary:hover,
.fi-header-actions .fi-btn-primary:hover {
    box-shadow: 0 8px 25px rgba(30, 58, 138, 0.35) !important;
}

/* Bouton supprimer DISCRET (pas en rouge criard) */
.fi-header-actions .fi-color-danger {
    opacity: 0.6;
    font-size: 0.85rem;
}
.fi-header-actions .fi-color-danger:hover {
    opacity: 1;
}

/* =============================================
   MODALS DE CONFIRMATION
   ============================================= */
.fi-modal-heading {
    font-weight: 800 !important;
    font-size: 1.2rem !important;
    letter-spacing: -0.01em;
}
.fi-modal-description {
    font-size: 0.88rem !important;
    line-height: 1.7 !important;
    color: #4B5563 !important;
}
.dark .fi-modal-description { color: #9CA3AF !important; }
.fi-modal-icon-wrp { transform: scale(1.15); }

/* =============================================
   SIDEBAR NAVIGATION — DESIGN PREMIUM
   ============================================= */

/* Fond sidebar CLAIR — FORCE */
.fi-sidebar,
.fi-sidebar-nav,
aside.fi-sidebar,
div[class*="fi-sidebar"] {
    background: linear-gradient(180deg, #F7F9FF 0%, #EEF1FC 55%, #E8ECFB 100%) !important;
    border-right: 1px solid #E1E7F5 !important;
}
.fi-sidebar .bg-white,
.fi-sidebar .dark\:bg-gray-900 {
    background: transparent !important;
}

/* Texte sidebar en foncé (lisible sur clair) */
.fi-sidebar-nav-item-label {
    color: #334155 !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
}
.fi-sidebar-nav-item-icon {
    color: #64748B !important;
}

/* Items du menu */
.fi-sidebar-nav-item-button {
    transition: all 0.25s ease !important;
    border-radius: 10px !important;
    margin: 2px 8px !important;
    padding: 8px 12px !important;
}

/* Hover */
.fi-sidebar-nav-item-button:hover {
    background: rgba(245, 158, 11, 0.10) !important;
}
.fi-sidebar-nav-item-button:hover .fi-sidebar-nav-item-label {
    color: #0F172A !important;
}
/* (couleur d icone au survol gérée par les règles multicolores du provider) */

/* Item actif — accent doré + libellé bleu marque */
.fi-sidebar-nav-item-active .fi-sidebar-nav-item-button {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.16), rgba(245, 158, 11, 0.04)) !important;
    border-left: 3px solid #F59E0B !important;
}
.fi-sidebar-nav-item-active .fi-sidebar-nav-item-label {
    color: #3730A3 !important;
    font-weight: 700 !important;
}
/* (couleur d icone actif gérée par les règles multicolores du provider) */

/* Labels de groupe (MEMBRES, FINANCES, ADMINISTRATION) */
.fi-sidebar-group-label {
    text-transform: uppercase !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.14em !important;
    font-weight: 800 !important;
    color: #94A3B8 !important;
    padding: 16px 10px 6px 18px !important;
    border-top: 1px solid #EEF1F6;
    margin-top: 4px;
}

/* Séparateur du groupe */
.fi-sidebar-group:first-child .fi-sidebar-group-label {
    border-top: none;
    margin-top: 0;
}

/* Badge de notification dans sidebar */
.fi-sidebar-nav-item-badge {
    background: #F59E0B !important;
    color: #0F172A !important;
    font-weight: 700 !important;
}

/* Logo zone dans sidebar */
.fi-sidebar-header {
    border-bottom: 1px solid #E5E9F0 !important;
    padding-bottom: 12px !important;
}

/* Bouton toggle sidebar */
.fi-sidebar-close-btn,
.fi-sidebar-open-btn {
    color: #64748B !important;
}
.fi-sidebar-close-btn:hover,
.fi-sidebar-open-btn:hover {
    color: #D97706 !important;
}

/* Icône chevron collapse group */
.fi-sidebar-group-collapse-button {
    color: #94A3B8 !important;
}
.fi-sidebar-group-collapse-button:hover {
    color: #D97706 !important;
}

/* Dark mode — conserve un rail sombre si l'utilisateur bascule */
.dark .fi-sidebar {
    background: linear-gradient(180deg, #0A0F1A 0%, #111827 100%) !important;
}

/* =============================================
   TOPBAR & HEADER — CLAIR
   ============================================= */
.fi-topbar,
nav.fi-topbar,
div[class*="fi-topbar"] {
    background: #FFFFFF !important;
    border-bottom: 1px solid #EBEEF3 !important;
}
.fi-topbar .bg-white,
.fi-topbar .dark\:bg-gray-900 {
    background: transparent !important;
}
.fi-topbar * {
    color: #334155;
}
/* Barre de recherche globale dans topbar */
.fi-global-search-field input {
    background: #F1F5F9 !important;
    border: 1px solid #E2E8F0 !important;
    color: #334155 !important;
    border-radius: 10px !important;
}
.fi-global-search-field input::placeholder {
    color: #94A3B8 !important;
}
.fi-global-search-field input:focus {
    background: #FFFFFF !important;
    border-color: rgba(245, 158, 11, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12) !important;
}
/* Icône recherche */
.fi-global-search-field svg {
    color: #94A3B8 !important;
}
/* Avatar utilisateur */
.fi-avatar {
    border: 2px solid rgba(245, 158, 11, 0.4) !important;
}
/* Notification bell */
.fi-topbar .fi-icon-btn {
    color: #64748B !important;
}
.fi-topbar .fi-icon-btn:hover {
    color: #D97706 !important;
    background: rgba(245, 158, 11, 0.10) !important;
}
/* Chevron toggle sidebar dans topbar */
.fi-topbar button[x-on] {
    color: #64748B !important;
}
.fi-topbar button[x-on]:hover {
    color: #D97706 !important;
}

.dark .fi-topbar {
    background: #0A0F1A !important;
}
.fi-header-heading {
    font-weight: 800 !important;
    letter-spacing: -0.02em;
}
.fi-header-subheading {
    font-style: italic;
    opacity: 0.65;
    font-size: 0.85rem;
}

/* Breadcrumb discret */
.fi-breadcrumbs {
    opacity: 0.7;
    font-size: 0.8rem;
}

/* =============================================
   NOTIFICATIONS
   ============================================= */
.fi-notification {
    border-left: 4px solid var(--demy-gold) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
}

/* =============================================
   INFOLIST (VUE PROFIL)
   ============================================= */
.fi-in-entry-wrp-label {
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 0.65rem !important;
    letter-spacing: 0.06em;
    opacity: 0.5;
    color: var(--demy-blue) !important;
}
.dark .fi-in-entry-wrp-label {
    color: var(--demy-gold) !important;
}

/* =============================================
   COLONNES ÉGALES - TOUTE L'APPLICATION
   ============================================= */

/* ---- Grilles Filament : alignement des colonnes ---- */
.fi-wi-stats-overview .grid,
.fi-page .grid:not(.fi-ta-table) {
    align-items: stretch !important;
}

/* ---- Groupes (colonnes gauche/droite) ---- */
.fi-fo-group,
.fi-in-group {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* ---- Sections à l'intérieur des groupes s'étirent ---- */
.fi-fo-group > *,
.fi-in-group > * {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ---- Body des sections s'étire pour remplir ---- */
.fi-section {
    display: flex !important;
    flex-direction: column !important;
}
.fi-section-content-ctn {
    flex: 1 !important;
}

/* ---- Composants dans les grilles ---- */
.fi-fo-component-ctn > .grid > div,
.fi-in-component-ctn > .grid > div {
    display: flex !important;
    flex-direction: column !important;
}
.fi-fo-component-ctn > .grid > div > .fi-section,
.fi-in-component-ctn > .grid > div > .fi-section,
.fi-fo-component-ctn > .grid > div > .fi-fo-group,
.fi-in-component-ctn > .grid > div > .fi-in-group {
    flex: 1 !important;
}

/* ---- Dashboard widgets même hauteur ---- */
.fi-wi-stats-overview-stat {
    height: 100% !important;
}

/* ============================================
   LIGNES SPÉCIALES DANS LES TABLEAUX
   ============================================ */

/* ---- DÉCÉDÉ : Rouge sombre avec barre gauche ---- */
.demy-row-decede {
    background: linear-gradient(90deg, rgba(220, 38, 38, 0.12), rgba(220, 38, 38, 0.04)) !important;
    border-left: 4px solid #DC2626 !important;
}
.demy-row-decede td {
    text-decoration: line-through !important;
    text-decoration-color: rgba(220, 38, 38, 0.6) !important;
    text-decoration-thickness: 1.5px !important;
    color: #7F1D1D !important;
}
.demy-row-decede .fi-badge,
.demy-row-decede .fi-ta-image {
    text-decoration: none !important;
}
.demy-row-decede .fi-ta-image {
    filter: grayscale(80%) opacity(0.7) !important;
}
.demy-row-decede:hover {
    background: linear-gradient(90deg, rgba(220, 38, 38, 0.18), rgba(220, 38, 38, 0.06)) !important;
}
.dark .demy-row-decede {
    background: linear-gradient(90deg, rgba(220, 38, 38, 0.15), rgba(220, 38, 38, 0.05)) !important;
}
.dark .demy-row-decede td {
    color: #FCA5A5 !important;
}

/* ---- EN CARENCE : Or/ambre avec barre gauche ---- */
.demy-row-carence {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.055), rgba(245, 158, 11, 0.012)) !important;
    box-shadow: inset 3px 0 0 #F59E0B !important;
}
.demy-row-carence:hover {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.10), rgba(245, 158, 11, 0.03)) !important;
}
.dark .demy-row-carence {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.06), rgba(245, 158, 11, 0.02)) !important;
}

/* ---- SUSPENDU : Violet avec barre gauche ---- */
.demy-row-suspendu {
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.05), rgba(124, 58, 237, 0.012)) !important;
    box-shadow: inset 3px 0 0 #7C3AED !important;
}
.demy-row-suspendu:hover {
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.09), rgba(124, 58, 237, 0.03)) !important;
}

/* ---- Charts uniformes ---- */

/* ---- Widgets tables même hauteur ---- */
.fi-widgets > .grid {
    align-items: stretch !important;
}
.fi-widgets > .grid > div {
    display: flex !important;
    flex-direction: column !important;
}
.fi-widgets > .grid > div > * {
    flex: 1 !important;
}

/* ---- Page Rapports : cards stats même hauteur ---- */
.fi-page > div > .grid {
    align-items: stretch !important;
}
.fi-page > div > .grid > div {
    height: 100%;
}

/* ---- Tables : colonnes actions alignées à droite ---- */
.fi-ta-actions {
    white-space: nowrap;
}
@media (max-width: 480px) {
    .fi-ta-actions {
        white-space: normal !important;
    }
}

/* ---- Empêcher l'écrasement sur mobile ---- */
@media (max-width: 1024px) {
    .fi-fo-group,
    .fi-in-group {
        height: auto !important;
    }
}

/* =============================================
   PAGINATION PROFESSIONNELLE
   ============================================= */

/* Container pagination */
.fi-ta-pagination {
    border-top: 1px solid rgba(30, 58, 138, 0.06) !important;
    padding: 16px 20px !important;
    background: linear-gradient(to right, rgba(30, 58, 138, 0.01), rgba(245, 158, 11, 0.01)) !important;
    border-radius: 0 0 12px 12px !important;
}
.dark .fi-ta-pagination {
    border-top-color: rgba(245, 158, 11, 0.06) !important;
    background: linear-gradient(to right, rgba(30, 58, 138, 0.03), rgba(245, 158, 11, 0.02)) !important;
}

/* Boutons de pagination */
.fi-pagination-item button,
.fi-pagination-item a,
.fi-pagination-item span {
    min-width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    transition: all 0.2s ease !important;
    border: 1px solid transparent !important;
}

/* Page courante (active) */
.fi-pagination-item-active button,
.fi-pagination-item-active a,
.fi-pagination-item-active span {
    background: var(--demy-blue) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.25) !important;
    border-color: var(--demy-blue) !important;
    font-weight: 700 !important;
}
.dark .fi-pagination-item-active button,
.dark .fi-pagination-item-active a,
.dark .fi-pagination-item-active span {
    background: var(--demy-gold) !important;
    color: #0F172A !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25) !important;
    border-color: var(--demy-gold) !important;
}

/* Pages non actives : hover */
.fi-pagination-item:not(.fi-pagination-item-active) button:hover,
.fi-pagination-item:not(.fi-pagination-item-active) a:hover {
    background: rgba(30, 58, 138, 0.06) !important;
    border-color: rgba(30, 58, 138, 0.15) !important;
    color: var(--demy-blue) !important;
}
.dark .fi-pagination-item:not(.fi-pagination-item-active) button:hover,
.dark .fi-pagination-item:not(.fi-pagination-item-active) a:hover {
    background: rgba(245, 158, 11, 0.06) !important;
    border-color: rgba(245, 158, 11, 0.15) !important;
    color: var(--demy-gold) !important;
}

/* Boutons Précédent/Suivant */
.fi-pagination-previous-btn,
.fi-pagination-next-btn {
    border-radius: 10px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    padding: 6px 14px !important;
}
.fi-pagination-previous-btn:hover,
.fi-pagination-next-btn:hover {
    background: rgba(30, 58, 138, 0.06) !important;
    color: var(--demy-blue) !important;
}
.dark .fi-pagination-previous-btn:hover,
.dark .fi-pagination-next-btn:hover {
    background: rgba(245, 158, 11, 0.06) !important;
    color: var(--demy-gold) !important;
}

/* Sélecteur "par page" */
.fi-ta-page-option-select,
.fi-ta-pagination select {
    border-radius: 10px !important;
    border: 1px solid rgba(30, 58, 138, 0.15) !important;
    padding: 6px 12px !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    transition: all 0.2s ease !important;
    background: white !important;
}
.fi-ta-page-option-select:focus,
.fi-ta-pagination select:focus {
    border-color: var(--demy-gold) !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1) !important;
}
.dark .fi-ta-page-option-select,
.dark .fi-ta-pagination select {
    background: #1F2937 !important;
    border-color: rgba(245, 158, 11, 0.15) !important;
}

/* Texte "Affichage de X à Y sur Z résultats" */
.fi-ta-pagination-records-count,
.fi-ta-pagination p {
    font-size: 0.8rem !important;
    color: #64748B !important;
    font-weight: 500 !important;
}
.fi-ta-pagination-records-count strong,
.fi-ta-pagination p strong {
    color: var(--demy-blue) !important;
    font-weight: 700 !important;
}
.dark .fi-ta-pagination-records-count strong,
.dark .fi-ta-pagination p strong {
    color: var(--demy-gold) !important;
}

/* Points de suspension (...) */
.fi-pagination-item-ellipsis span {
    color: #94A3B8 !important;
    font-weight: 700 !important;
    letter-spacing: 2px;
}

/* Label "par page" */
.fi-ta-pagination label {
    font-size: 0.78rem !important;
    color: #94A3B8 !important;
    font-weight: 500 !important;
}

/* =============================================
   TABS (RELATION MANAGER)
   ============================================= */
.fi-tabs-tab {
    transition: all 0.2s ease;
    border-radius: 8px !important;
}
.fi-tabs-tab:hover {
    background: rgba(30, 58, 138, 0.04);
}

/* =============================================
   ANIMATIONS
   ============================================= */
.fi-section {
    animation: sectionFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes sectionFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
    from { opacity: 0; transform: translateX(-50%) translateY(30px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* =============================================
   BOUTONS DE FORMULAIRE CENTRÉS
   ============================================= */
.fi-form-actions {
    justify-content: center !important;
    gap: 12px !important;
    padding: 20px 0 10px 0 !important;
    border-top: 1px solid rgba(30, 58, 138, 0.06);
    margin-top: 16px;
}
.dark .fi-form-actions {
    border-top-color: rgba(245, 158, 11, 0.06);
}
/* Bouton principal (Enregistrer) plus imposant */
.fi-form-actions .fi-btn-primary {
    min-width: 220px !important;
    padding: 10px 32px !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(30, 58, 138, 0.2) !important;
}
.fi-form-actions .fi-btn-primary:hover {
    box-shadow: 0 8px 25px rgba(30, 58, 138, 0.3) !important;
    transform: translateY(-2px);
}
/* Bouton secondaire (Annuler) discret */
.fi-form-actions .fi-btn:not(.fi-btn-primary) {
    min-width: 160px !important;
    border-radius: 12px !important;
    opacity: 0.7;
}
.fi-form-actions .fi-btn:not(.fi-btn-primary):hover {
    opacity: 1;
}

/* =============================================
   LOADER OVERLAY PROFESSIONNEL
   ============================================= */
.demy-loader-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(6px);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.demy-loader-overlay.active {
    opacity: 1;
    pointer-events: all;
}
.demy-loader-spinner {
    width: 50px; height: 50px;
    border: 4px solid rgba(245, 158, 11, 0.2);
    border-top: 4px solid #F59E0B;
    border-radius: 50%;
    animation: demySpin 0.8s linear infinite;
    margin-bottom: 16px;
}
.demy-loader-text {
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    opacity: 0.9;
}
.demy-loader-sub {
    color: #94A3B8;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    margin-top: 6px;
}
@keyframes demySpin {
    to { transform: rotate(360deg); }
}

/* =============================================
   SWEETALERT2 THÈME DEMY
   ============================================= */
.swal2-popup {
    border-radius: 20px !important;
    padding: 32px !important;
    font-family: 'Inter', sans-serif !important;
}
.swal2-title {
    font-weight: 800 !important;
    font-size: 1.3rem !important;
    color: #0F172A !important;
}
.swal2-html-container {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    color: #475569 !important;
}
.swal2-confirm {
    border-radius: 12px !important;
    font-weight: 700 !important;
    padding: 10px 28px !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.02em;
    background: var(--demy-blue) !important;
    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.3) !important;
}
.swal2-confirm:hover {
    box-shadow: 0 6px 20px rgba(30, 58, 138, 0.4) !important;
}
.swal2-cancel {
    border-radius: 12px !important;
    font-weight: 600 !important;
    padding: 10px 24px !important;
    font-size: 0.9rem !important;
}
.swal2-icon {
    border-color: var(--demy-gold) !important;
    color: var(--demy-gold) !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(5, 150, 105, 0.3) !important;
}
.swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: #059669 !important;
}
.swal2-icon.swal2-warning {
    border-color: var(--demy-gold) !important;
    color: var(--demy-gold) !important;
}

/* =============================================
   PAGES SPÉCIALES
   ============================================= */

/* Login page améliorations */
.fi-simple-main {
    border-radius: 20px !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
}

/* Empty state */
.fi-ta-empty-state-heading { font-weight: 700 !important; }
.fi-ta-empty-state-icon { opacity: 0.3; }

/* =============================================
   SCROLLBAR CUSTOM
   ============================================= */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(30, 58, 138, 0.12); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(30, 58, 138, 0.25); }
.dark ::-webkit-scrollbar-thumb { background: rgba(245, 158, 11, 0.12); }
.dark ::-webkit-scrollbar-thumb:hover { background: rgba(245, 158, 11, 0.25); }

/* =============================================
   RESPONSIVE MOBILE — TOUTE L'APPLICATION
   ============================================= */

/* ---- TABLETTES (max 1024px) ---- */
@media (max-width: 1024px) {
    .fi-fo-group,
    .fi-in-group {
        height: auto !important;
    }
}

/* ---- MOBILE (max 768px) ---- */
@media (max-width: 768px) {

    /* --- Sections --- */
    .fi-section {
        border-left-width: 2px !important;
        border-radius: 10px !important;
        margin-bottom: 8px !important;
    }
    .fi-section-header {
        padding: 12px 14px 8px !important;
    }
    .fi-section-header-heading {
        font-size: 0.88rem !important;
    }
    .fi-section-header-description {
        font-size: 0.7rem !important;
    }
    .fi-section-content-ctn {
        padding: 12px 14px !important;
    }

    /* --- Header de page --- */
    .fi-header-heading {
        font-size: 1.2rem !important;
        line-height: 1.3 !important;
    }
    .fi-header-subheading {
        font-size: 0.75rem !important;
    }
    .fi-header-actions {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .fi-header-actions .fi-btn {
        font-size: 0.75rem !important;
        padding: 6px 12px !important;
    }

    /* --- Dashboard stats cards --- */
    .fi-wi-stats-overview-stat {
        border-left-width: 2px !important;
    }
    .fi-wi-stats-overview-stat-value {
        font-size: 1.3rem !important;
    }

    /* --- Tableaux --- */
    .fi-ta-header-cell {
        font-size: 0.6rem !important;
        padding: 6px 8px !important;
    }
    .fi-ta-cell {
        font-size: 0.78rem !important;
        padding: 8px !important;
    }
    .fi-badge {
        font-size: 0.58rem !important;
        padding: 2px 6px !important;
    }

    /* --- (Colonnes 6+) : plus masquees. Sur telephone (<= 640px) les listes
           passent en CARTES (voir AdminPanelProvider) : toutes les infos sont
           visibles, empilees, sans defilement horizontal. --- */

    /* --- Pagination mobile --- */
    .fi-ta-pagination {
        padding: 10px 12px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .fi-pagination-item button,
    .fi-pagination-item a,
    .fi-pagination-item span {
        min-width: 32px !important;
        height: 32px !important;
        font-size: 0.75rem !important;
    }
    .fi-ta-pagination-records-count,
    .fi-ta-pagination p {
        font-size: 0.7rem !important;
        text-align: center;
        width: 100%;
    }

    /* --- Formulaires --- */
    .fi-fo-component-ctn > .grid {
        grid-template-columns: 1fr !important;
    }
    .fi-form-actions {
        flex-direction: column !important;
        padding: 16px 12px !important;
    }
    .fi-form-actions .fi-btn-primary {
        width: 100% !important;
        min-width: unset !important;
    }
    .fi-form-actions .fi-btn:not(.fi-btn-primary) {
        width: 100% !important;
        min-width: unset !important;
    }
    .fi-fo-field-wrp {
        margin-bottom: 4px !important;
    }

    /* --- Inputs mobile --- */
    .fi-input-wrp input,
    .fi-input-wrp textarea {
        font-size: 16px !important; /* Empêche le zoom auto iOS */
    }

    /* --- Recherche table mobile --- */
    .fi-ta-search-field input {
        font-size: 16px !important;
        padding: 8px 12px 8px 36px !important;
    }

    /* --- Sidebar mobile --- */
    .fi-sidebar-nav-item-button {
        padding: 10px 12px !important;
        margin: 1px 2px !important;
    }
    .fi-sidebar-group-label {
        font-size: 0.58rem !important;
        padding-left: 6px !important;
    }

    /* --- Modals mobile --- */
    .fi-modal-heading {
        font-size: 1rem !important;
    }
    .fi-modal-description {
        font-size: 0.82rem !important;
    }

    /* --- Topbar mobile --- */
    .fi-topbar {
        padding: 8px 12px !important;
    }

    /* --- Breadcrumb mobile --- */
    .fi-breadcrumbs {
        font-size: 0.7rem !important;
    }

    /* --- Infolist (profil) mobile --- */
    .fi-in-component-ctn > .grid {
        grid-template-columns: 1fr !important;
    }

    /* --- Widgets mobile --- */
    .fi-widgets > .grid {
        grid-template-columns: 1fr !important;
    }

    /* --- File upload mobile --- */
    .fi-fo-file-upload .filepond--root {
        min-height: 120px !important;
    }

    /* --- Bouton supprimer discret sur mobile --- */
    .fi-header-actions .fi-color-danger {
        font-size: 0.75rem !important;
        opacity: 0.5;
    }
}

/* ---- CARTES PROFIL MOBILE ---- */
@media (max-width: 768px) {
    /* Forcer le wrap et centrage des cartes profil inline */
    [style*="display:flex"][style*="gap:28px"] {
        gap: 16px !important;
    }
    /* Photo plus petite */
    [style*="width:110px"][style*="height:110px"] {
        width: 70px !important;
        height: 70px !important;
    }
    [style*="width:90px"][style*="height:90px"] {
        width: 60px !important;
        height: 60px !important;
    }
    /* Nom plus petit */
    [style*="font-size:1.6rem"] {
        font-size: 1.1rem !important;
    }
    [style*="font-size:1.5rem"][style*="font-weight:800"] {
        font-size: 1.1rem !important;
    }
    [style*="font-size:1.4rem"] {
        font-size: 1rem !important;
    }
    /* Stats cards dans profil */
    [style*="min-width:80px"][style*="background:rgba(255,255,255,0.08)"],
    [style*="min-width:90px"][style*="background:rgba(255,255,255,0.08)"] {
        min-width: 65px !important;
        padding: 8px 10px !important;
    }
    [style*="min-width:80px"] [style*="font-size:1.5rem"],
    [style*="min-width:90px"] [style*="font-size:1.5rem"],
    [style*="min-width:90px"] [style*="font-size:1.2rem"] {
        font-size: 1rem !important;
    }
    /* Padding de la carte */
    [style*="padding:28px 32px"] {
        padding: 16px !important;
    }
    /* Infos secondaires en wrap */
    [style*="gap:24px"][style*="flex-wrap:wrap"] {
        gap: 8px !important;
    }
    [style*="gap:24px"] [style*="font-size:0.8rem"] {
        font-size: 0.7rem !important;
    }
}

/* ---- TRÈS PETIT ÉCRAN (max 480px) ---- */
@media (max-width: 480px) {
    .fi-header-heading {
        font-size: 1.05rem !important;
    }
    .fi-header-actions .fi-btn {
        font-size: 0.7rem !important;
        padding: 5px 10px !important;
    }
    .fi-wi-stats-overview-stat-value {
        font-size: 1.1rem !important;
    }
    .fi-wi-stats-overview-stat-description {
        font-size: 0.65rem !important;
    }
    .fi-ta-header-cell {
        font-size: 0.55rem !important;
        padding: 4px 6px !important;
    }
    .fi-ta-cell {
        font-size: 0.72rem !important;
        padding: 6px !important;
    }
    /* (Colonnes 5+) : plus masquees — voir cartes mobiles (AdminPanelProvider). */
    .fi-pagination-item button,
    .fi-pagination-item a,
    .fi-pagination-item span {
        min-width: 28px !important;
        height: 28px !important;
        font-size: 0.68rem !important;
    }
    .fi-section-header-heading {
        font-size: 0.82rem !important;
    }
}