/*
 * Revinum — Agency Panel Theme
 * Thème visuel cohérent pour tout le panel agence (sauf éditeur 3D)
 * Teintes indigo/slate/violet
 */

/* ═══════════════════════════════════════════════════════
   TOPBAR
   ═══════════════════════════════════════════════════════ */

:root:not(.dark) .fi-topbar nav {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* ═══════════════════════════════════════════════════════
   FOND DE PAGE — léger gris bleuté
   ═══════════════════════════════════════════════════════ */

:root:not(.dark) .fi-main {
    background-color: #f8fafc !important;
}

/* ═══════════════════════════════════════════════════════
   PAGE HEADER — Titre + Actions
   ═══════════════════════════════════════════════════════ */

:root:not(.dark) .fi-header {
    padding-bottom: 1rem !important;
}

:root:not(.dark) .fi-header-heading {
    color: #1e293b !important;
    font-weight: 800 !important;
}

:root:not(.dark) .fi-header-subheading {
    color: #64748b !important;
}

/* Header actions — boutons arrondis, plus compacts */
:root:not(.dark) .fi-header-actions .fi-btn {
    border-radius: 0.75rem !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.15s ease !important;
}

:root:not(.dark) .fi-header-actions .fi-btn:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-1px) !important;
}

/* ═══════════════════════════════════════════════════════
   BREADCRUMBS
   ═══════════════════════════════════════════════════════ */

:root:not(.dark) .fi-breadcrumbs {
    color: #64748b !important;
}

:root:not(.dark) .fi-breadcrumbs a {
    color: #6366f1 !important;
    font-weight: 500 !important;
}

:root:not(.dark) .fi-breadcrumbs a:hover {
    color: #4338ca !important;
}

/* ═══════════════════════════════════════════════════════
   TABS — Navigation par onglets (dégradé bannière)
   ═══════════════════════════════════════════════════════ */

:root:not(.dark) .fi-tabs {
    background: linear-gradient(to right, #1e293b, #312e81, #1e293b) !important;
    border: none !important;
    border-radius: 1rem !important;
    padding: 0.35rem 0.35rem !important;
    box-shadow: 0 4px 15px rgba(30, 41, 59, 0.3) !important;
    position: relative;
    overflow: hidden;
}

:root:not(.dark) .fi-tabs-item {
    border-radius: 0.65rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.65) !important;
    transition: all 0.2s ease !important;
    border: none !important;
    padding: 0.5rem 0.85rem !important;
}

:root:not(.dark) .fi-tabs-item .fi-tabs-item-label {
    color: rgba(255, 255, 255, 0.65) !important;
}

:root:not(.dark) .fi-tabs-item .fi-tabs-item-icon {
    color: rgba(255, 255, 255, 0.45) !important;
}

:root:not(.dark) .fi-tabs-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

:root:not(.dark) .fi-tabs-item:hover .fi-tabs-item-label {
    color: rgba(255, 255, 255, 0.9) !important;
}

:root:not(.dark) .fi-tabs-item:hover .fi-tabs-item-icon {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Onglet actif */
:root:not(.dark) .fi-tabs-item.fi-active,
:root:not(.dark) .fi-tabs-item[aria-selected="true"] {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

:root:not(.dark) .fi-tabs-item.fi-active .fi-tabs-item-label,
:root:not(.dark) .fi-tabs-item[aria-selected="true"] .fi-tabs-item-label {
    color: #ffffff !important;
    font-weight: 600 !important;
}

:root:not(.dark) .fi-tabs-item.fi-active .fi-tabs-item-icon,
:root:not(.dark) .fi-tabs-item[aria-selected="true"] .fi-tabs-item-icon {
    color: #c7d2fe !important;
}

:root:not(.dark) .fi-tabs-item.fi-active:hover,
:root:not(.dark) .fi-tabs-item[aria-selected="true"]:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Badges dans les tabs (compteurs) */
:root:not(.dark) .fi-tabs-item .fi-badge {
    background: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

:root:not(.dark) .fi-tabs-item.fi-active .fi-badge {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════
   SECTIONS FILAMENT (Infolists, détails projet)
   ═══════════════════════════════════════════════════════ */

:root:not(.dark) .fi-section {
    border-radius: 1rem !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    background: #ffffff !important;
}

/* Empêcher tout conteneur de formulaire de couper les dropdowns Select */
.fi-section,
.fi-section-content,
.fi-section-content-ctn,
.fi-fo-wrp,
.fi-fo-field-wrp,
.fi-page-content {
    overflow: visible !important;
}

:root:not(.dark) .fi-section-header {
    border-bottom: none !important;
    background: linear-gradient(135deg, #4338ca, #312e81) !important;
    padding: 1rem 1.5rem !important;
    border-radius: 1rem 1rem 0 0 !important;
}

:root:not(.dark) .fi-section-header-heading {
    font-weight: 700 !important;
    color: #ffffff !important;
    font-size: 0.95rem !important;
}

:root:not(.dark) .fi-section-header-description {
    color: #c7d2fe !important;
}

/* Icônes des sections */
:root:not(.dark) .fi-section-header .fi-section-header-icon {
    color: #c7d2fe !important;
}

/* Boutons dans les headers de section (collapse toggle etc.) */
:root:not(.dark) .fi-section-header button {
    color: #c7d2fe !important;
}

:root:not(.dark) .fi-section-header button:hover {
    color: #ffffff !important;
}

:root:not(.dark) .fi-section-content {
    padding: 1.25rem 1.5rem !important;
}

/* ═══════════════════════════════════════════════════════
   INFOLISTS — Labels + Valeurs
   ═══════════════════════════════════════════════════════ */

:root:not(.dark) .fi-in-entry-wrp {
    margin-bottom: 0.25rem !important;
}

:root:not(.dark) .fi-in-entry-wrp label,
:root:not(.dark) .fi-in-text .fi-in-entry-wrp-label {
    color: #64748b !important;
    font-weight: 600 !important;
    font-size: 0.78rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

:root:not(.dark) .fi-in-text-item {
    color: #1e293b !important;
    font-weight: 500 !important;
}

/* Placeholders / valeurs vides */
:root:not(.dark) .fi-in-placeholder {
    color: #cbd5e1 !important;
    font-style: normal !important;
}

/* ═══════════════════════════════════════════════════════
   BADGES — Couleurs plus vives
   ═══════════════════════════════════════════════════════ */

:root:not(.dark) .fi-badge {
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
}

/* ═══════════════════════════════════════════════════════
   TABLES — Style propre
   ═══════════════════════════════════════════════════════ */

:root:not(.dark) .fi-ta-ctn {
    border-radius: 1rem !important;
    overflow: hidden;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* Barre d'outils de la table (recherche, filtres) — sobre */
:root:not(.dark) .fi-ta-header-toolbar {
    background: #fafbfc !important;
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

:root:not(.dark) .fi-ta-header-cell {
    background-color: #f8fafc !important;
    color: #475569 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.05em !important;
}

/* Header de table (quand dans une section avec heading) */
:root:not(.dark) .fi-ta-ctn > .fi-section-header {
    background: linear-gradient(135deg, #4338ca, #312e81) !important;
    border-radius: 1rem 1rem 0 0 !important;
}

:root:not(.dark) .fi-ta-ctn > .fi-section-header .fi-section-header-heading {
    color: #ffffff !important;
}

:root:not(.dark) .fi-ta-ctn > .fi-section-header .fi-section-header-description {
    color: #c7d2fe !important;
}

/* Header de TableWidget (heading défini via $heading) — gradient seulement quand il y a un titre */
:root:not(.dark) .fi-ta-header-ctn:has(.fi-ta-header) {
    background: linear-gradient(135deg, #4338ca, #312e81) !important;
    border-radius: 1rem 1rem 0 0 !important;
}

:root:not(.dark) .fi-ta-header-ctn .fi-ta-header {
    padding: 1rem 1.5rem !important;
}

:root:not(.dark) .fi-ta-header-ctn .fi-ta-header-heading {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
}

:root:not(.dark) .fi-ta-header-ctn .fi-ta-header-description {
    color: #c7d2fe !important;
}

:root:not(.dark) .fi-ta-row {
    transition: background-color 0.1s ease !important;
}

:root:not(.dark) .fi-ta-row:hover {
    background-color: #f1f5f9 !important;
}

:root:not(.dark) .fi-ta-row td {
    border-bottom-color: #f1f5f9 !important;
}

/* ═══════════════════════════════════════════════════════
   CARDS / WIDGETS — Arrondis uniformes
   ═══════════════════════════════════════════════════════ */

:root:not(.dark) .fi-wi-stats-overview-stat {
    border-radius: 1rem !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: box-shadow 0.15s ease !important;
}

:root:not(.dark) .fi-wi-stats-overview-stat:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

:root:not(.dark) .fi-wi-chart {
    border-radius: 1rem !important;
    border: 1px solid #e2e8f0 !important;
}

/* ═══════════════════════════════════════════════════════
   FORMULAIRES
   ═══════════════════════════════════════════════════════ */

:root:not(.dark) .fi-fo-field-wrp .fi-input,
:root:not(.dark) .fi-input-wrp {
    border-radius: 0.75rem !important;
    border-color: #e2e8f0 !important;
    transition: all 0.15s ease !important;
}

:root:not(.dark) .fi-fo-field-wrp .fi-input:focus-within,
:root:not(.dark) .fi-input-wrp:focus-within {
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.12) !important;
}

:root:not(.dark) .fi-fo-field-wrp label {
    font-weight: 600 !important;
    color: #374151 !important;
}

/* Select, DatePicker */
:root:not(.dark) .fi-select-wrp,
:root:not(.dark) .fi-date-time-picker-wrp {
    border-radius: 0.75rem !important;
}

/* ═══════════════════════════════════════════════════════
   BOUTONS
   ═══════════════════════════════════════════════════════ */

:root:not(.dark) .fi-btn {
    border-radius: 0.75rem !important;
    font-weight: 600 !important;
    transition: all 0.15s ease !important;
}

/* ═══════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════ */

:root:not(.dark) .fi-pagination-item {
    border-radius: 0.5rem !important;
}

/* ═══════════════════════════════════════════════════════
   MODALS — Arrondis
   ═══════════════════════════════════════════════════════ */

:root:not(.dark) .fi-modal-content {
    border-radius: 1.25rem !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15) !important;
}

:root:not(.dark) .fi-modal-header {
    border-bottom: none !important;
    background: linear-gradient(135deg, #4338ca, #312e81) !important;
}

:root:not(.dark) .fi-modal-header .fi-modal-heading {
    color: #ffffff !important;
}

:root:not(.dark) .fi-modal-header .fi-modal-description {
    color: #c7d2fe !important;
}

/* Slide-over (notifications) : fond neutre au lieu du gradient violet */
:root:not(.dark) .fi-modal-slide-over .fi-modal-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

:root:not(.dark) .fi-modal-slide-over .fi-modal-header .fi-modal-heading {
    color: #1e293b !important;
}

:root:not(.dark) .fi-modal-slide-over .fi-modal-header .fi-modal-description {
    color: #64748b !important;
}

:root:not(.dark) .fi-modal-close-btn {
    color: #c7d2fe !important;
}

:root:not(.dark) .fi-modal-close-btn:hover {
    color: #ffffff !important;
}

:root:not(.dark) .fi-modal-footer {
    border-top: 1px solid #f1f5f9 !important;
}

/* ═══════════════════════════════════════════════════════
   NOTIFICATIONS
   ═══════════════════════════════════════════════════════ */

:root:not(.dark) .fi-no-notification {
    border-radius: 1rem !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Panel notifications slide-over : pas de border-radius */
.fi-modal-slide-over-window {
    border-radius: 0 !important;
}

.fi-modal-slide-over .fi-modal-window {
    border-radius: 0 !important;
}

.fi-modal-slide-over .fi-modal-header {
    border-radius: 0 !important;
}

/* Les liens dans le header du slide-over gardent leurs couleurs Filament par défaut
   car le fond est maintenant clair (pas de gradient violet) */

/* ═══════════════════════════════════════════════════════
   REPEATABLE ENTRIES (Activité récente, etc.)
   ═══════════════════════════════════════════════════════ */

:root:not(.dark) .fi-in-repeatable-item {
    border: 1px solid #f1f5f9 !important;
    border-radius: 0.75rem !important;
    background: #fafbfc !important;
    transition: background 0.1s ease !important;
}

:root:not(.dark) .fi-in-repeatable-item:hover {
    background: #f1f5f9 !important;
}

/* ═══════════════════════════════════════════════════════
   TOGGLE / SWITCH
   ═══════════════════════════════════════════════════════ */

:root:not(.dark) .fi-toggle-on {
    background-color: #6366f1 !important;
}

/* ═══════════════════════════════════════════════════════
   DROPDOWN / ACTIONS MENU
   ═══════════════════════════════════════════════════════ */

:root:not(.dark) .fi-dropdown-panel {
    border-radius: 0.75rem !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

/* ═══════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════ */

:root:not(.dark) .fi-ta-empty-state-icon {
    color: #c7d2fe !important;
}

:root:not(.dark) .fi-ta-empty-state-heading {
    color: #475569 !important;
}

/* ═══════════════════════════════════════════════════════
   SCROLLBAR FINE (zone contenu)
   ═══════════════════════════════════════════════════════ */

:root:not(.dark) .fi-main-ctn ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

:root:not(.dark) .fi-main-ctn ::-webkit-scrollbar-track {
    background: transparent;
}

:root:not(.dark) .fi-main-ctn ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

:root:not(.dark) .fi-main-ctn ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ═══════════════════════════════════════════════════════
   BILLING — Responsive : grille métriques en 2 colonnes sur petit écran
   ═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .billing-usage-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}