/* ============================================================
   DEMY — Couche « Pages » : finition pro & structure
   Se charge APRÈS demy-theme.css et demy-premium.css.
   Additive et sobre (institutionnel) : n'altère pas la logique,
   ne fait que structurer et aérer les pages du back-office.
   ============================================================ */

:root {
    --demy-blue: #1E3A8A;
    --demy-gold: #F59E0B;
    --demy-line: #E9EDF3;
}

/* ============================================================
   1. EN-TÊTE DE PAGE — séparation nette + respiration
   ============================================================ */
.fi-header {
    padding-bottom: 1rem !important;
    margin-bottom: 1.25rem !important;
    border-bottom: 1px solid var(--demy-line) !important;
}
.fi-header-heading {
    font-size: 1.5rem !important;
    color: #0F172A !important;
    letter-spacing: -0.02em !important;
}
.dark .fi-header-heading { color: #F1F5F9 !important; }
/* Boutons d'action de l'en-tête : alignés et homogènes */
.fi-header-actions {
    gap: 0.5rem !important;
    align-items: center !important;
}

/* ============================================================
   2. CARTES DE SECTION — hiérarchie claire (accent doré)
   ============================================================ */
/* Filet doré vertical devant le titre de section = repère visuel */
.fi-section-header-heading {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.fi-section-header-heading::before {
    content: '';
    width: 3px;
    height: 15px;
    border-radius: 2px;
    background: linear-gradient(180deg, #F59E0B, #D97706);
    flex-shrink: 0;
}
/* Contenu de section : padding constant */
.fi-section-content { padding: 1.25rem !important; }

/* ============================================================
   3. TABLEAUX — lignes aérées, en-têtes calmes, séparateurs fins
   ============================================================ */
.fi-ta-cell {
    padding-top: 0.72rem !important;
    padding-bottom: 0.72rem !important;
}
.fi-ta-header-cell {
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
    background: #F8FAFC !important;
}
.dark .fi-ta-header-cell { background: #0B1120 !important; }
/* Séparateurs de lignes discrets */
.fi-ta-row:not(:last-child) { border-bottom: 1px solid #F1F4F9 !important; }
.dark .fi-ta-row:not(:last-child) { border-bottom-color: rgba(255,255,255,0.04) !important; }

/* ============================================================
   4. ÉTAT VIDE — centré et sobre
   ============================================================ */
.fi-ta-empty-state { padding: 3rem 1.5rem !important; text-align: center; }
.fi-ta-empty-state-icon-ctn svg { color: #CBD5E1 !important; }
.dark .fi-ta-empty-state-icon-ctn svg { color: #475569 !important; }
.fi-ta-empty-state-heading { color: #475569 !important; font-weight: 700 !important; }
.dark .fi-ta-empty-state-heading { color: #CBD5E1 !important; }
.fi-ta-empty-state-description { color: #94A3B8 !important; }

/* ============================================================
   5. BARRE D'OUTILS / FILTRES / RECHERCHE — soignés
   ============================================================ */
.fi-ta-header-toolbar { gap: 0.6rem !important; padding: 0.9rem 1rem !important; }
.fi-ta-search-field .fi-input {
    border-radius: 10px !important;
}
/* Boutons de la table : coins et tailles homogènes */
.fi-ta-actions .fi-btn,
.fi-ta-header-toolbar .fi-btn { border-radius: 9px !important; }

/* ============================================================
   6. FORMULAIRES — libellés lisibles, champs alignés
   ============================================================ */
.fi-fo-field-wrp-label {
    font-weight: 600 !important;
    color: #334155 !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.005em !important;
}
.dark .fi-fo-field-wrp-label { color: #CBD5E1 !important; }
.fi-fo-field-wrp-hint { color: #94A3B8 !important; font-size: 0.75rem !important; }

/* ============================================================
   7. FICHES (infolists) — lignes claires
   ============================================================ */
.fi-in-entry-wrp-label { color: #64748B !important; font-weight: 600 !important; font-size: 0.78rem !important; }
.fi-in-text-item-label { color: #64748B !important; }

/* ============================================================
   8. PAGINATION — carte propre
   ============================================================ */
.fi-pagination { padding-top: 0.5rem !important; }

/* ============================================================
   9. BADGES — pastilles homogènes et lisibles (tables & fiches)
   ============================================================ */
.fi-badge {
    border-radius: 7px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    padding-top: 0.18rem !important;
    padding-bottom: 0.18rem !important;
}

/* ============================================================
   10. ONGLETS (Filament tabs) — indicateur net + confort
   ============================================================ */
.fi-tabs {
    gap: 0.25rem !important;
    padding: 0.3rem !important;
    background: #F4F6FB !important;
    border-radius: 12px !important;
}
.dark .fi-tabs { background: rgba(255,255,255,0.03) !important; }
.fi-tabs-item {
    border-radius: 9px !important;
    font-weight: 600 !important;
    transition: background 0.18s ease, color 0.18s ease !important;
}
.fi-tabs-item-active {
    background: #fff !important;
    color: #1E3A8A !important;
    box-shadow: 0 1px 2px rgba(15,23,42,0.06), 0 2px 6px rgba(15,23,42,0.05) !important;
}
.dark .fi-tabs-item-active { background: #1F2937 !important; color: #93C5FD !important; }

/* ============================================================
   11. BOUTONS PRINCIPAUX — présence institutionnelle
   ============================================================ */
.fi-btn.fi-color-primary,
.fi-ac-btn-action.fi-color-primary {
    box-shadow: 0 1px 2px rgba(30,58,138,0.18), 0 4px 12px rgba(30,58,138,0.16) !important;
}

/* ============================================================
   12. FICHES (view) — sections & valeurs plus lisibles
   ============================================================ */
.fi-in-entry-wrp-label { text-transform: uppercase !important; letter-spacing: 0.03em !important; font-size: 0.7rem !important; }
.fi-in-text-item { color: #0F172A !important; font-weight: 500 !important; }
.dark .fi-in-text-item { color: #E2E8F0 !important; }
/* Séparateurs subtils entre entrées de fiche */
.fi-in-component-ctn .fi-in-entry-wrp:not(:last-child) { border-bottom: 1px solid #F3F5F9 !important; padding-bottom: 0.6rem !important; }
.dark .fi-in-component-ctn .fi-in-entry-wrp:not(:last-child) { border-bottom-color: rgba(255,255,255,0.04) !important; }

/* ============================================================
   13. PAGES « SIMPLES » (Profil & Connexion) — carte premium
   Layout partagé : bandeau d'accent DEMY + ombre flottante.
   ============================================================ */
.fi-simple-main {
    position: relative;
    overflow: hidden;
    box-shadow: 0 24px 60px -14px rgba(15,23,42,0.38), 0 8px 22px rgba(15,23,42,0.12) !important;
}
/* Bandeau d'accent dégradé (bleu institutionnel → or DEMY) en tête de carte */
.fi-simple-main::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, #1E3A8A 0%, #F59E0B 58%, #D97706 100%);
    z-index: 5;
}
/* Titre de la carte (« Profil ») : plus présent */
.fi-simple-main .fi-simple-header-heading {
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    color: #0F172A !important;
}
.dark .fi-simple-main .fi-simple-header-heading { color: #F1F5F9 !important; }