/* ============================================================================
   Charte graphique Coste Capital — surcouche du thème Filament (HEAD_END, sans build).
   Polices : Bodoni Moda (titres), Plus Jakarta Sans (UI), IBM Plex Mono (chiffres).
   Thèmes clair (champagne) et sombre (bordeaux profond) gérés séparément.
   ============================================================================ */
@import url('https://fonts.bunny.net/css?family=bodoni-moda:700,900|plus-jakarta-sans:400,500,600,700|ibm-plex-mono:400,500,600');

:root {
    --cc-bordeaux: #3A1428;
    --cc-bordeaux-2: #54243D;
    --cc-champagne: #F5EDE4;
    --cc-sable: #C8B08C;
    --cc-cream: #FFFCF8;
    --cc-bg: #FBF6EF;
    --cc-line: #EADFCF;
    --cc-ink: #2E0F20;
    --cc-ink-muted: #6E5A50;
}

/* ---- Typographie de base ---- */
.fi-body { font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif !important; }

/* Titres en Bodoni Moda (titres uniquement) */
.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading,
.fi-ta-header-heading {
    font-family: 'Bodoni Moda', Georgia, serif !important;
    font-weight: 700 !important;
    letter-spacing: .004em;
}

/* Chiffres : tabulaires partout, IBM Plex Mono sur les valeurs des écrans sur mesure */
table, .fi-ta, .fi-ta-cell, td, th, .tabular-nums,
.fi-wi-stats-overview-stat-value, .fi-in-numeric input {
    font-variant-numeric: tabular-nums lining-nums !important;
}
[class*="cc-"][class*="__val"],
[class*="cc-"][class*="__num"],
[class*="cc-"][class*="__cur"],
[class*="cc-"][class*="__mur"],
[class*="cc-"][class*="__sum"],
[class*="cc-"][class*="__days"],
.cc-row__num, .cc-pill--pct, .cc-pill--cur, .cc-chip b {
    font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
    font-variant-numeric: tabular-nums lining-nums !important;
}

/* ---- Barre latérale bordeaux (thèmes clair ET sombre) ---- */
.fi-sidebar, .fi-sidebar-nav, .fi-sidebar-header, .fi-sidebar-footer {
    background-color: var(--cc-bordeaux) !important;
    border-color: rgba(255, 255, 255, .06) !important;
}
.fi-sidebar .fi-sidebar-item-label, .fi-sidebar-group-label { color: #EDE0D3 !important; }
.fi-sidebar .fi-sidebar-item-icon { color: var(--cc-sable) !important; }
/* Survol : bordeaux plus clair, libellé champagne, icône sable (jamais le fond champagne/or par défaut de Filament) */
.fi-sidebar .fi-sidebar-item-btn:hover { background-color: #54243D !important; }
.fi-sidebar .fi-sidebar-item-btn:hover .fi-sidebar-item-label { color: #FBEFDF !important; }
.fi-sidebar .fi-sidebar-item-btn:hover .fi-sidebar-item-icon { color: #E4C89A !important; }

/* Item actif */
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-btn,
.fi-sidebar .fi-sidebar-item.fi-active a,
.fi-sidebar a[aria-current="page"] { background-color: var(--cc-bordeaux-2) !important; }
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar a[aria-current="page"] .fi-sidebar-item-label { color: #FBEFDF !important; font-weight: 600 !important; }
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar a[aria-current="page"] .fi-sidebar-item-icon { color: #E4C89A !important; }

/* ---- Menu horizontal (topNavigation) ----
   Le bandeau est déjà bordeaux : on transpose ici la logique de la barre
   latérale, qui reste servie sur mobile derrière le bouton d'ouverture. */
.fi-topbar-nav-groups { gap: .15rem !important; }
.fi-topbar-item-btn {
    border-radius: .6rem !important;
    padding: .45rem .75rem !important;
    transition: background-color .15s ease !important;
}
.fi-topbar-item-label { color: #EDE0D3 !important; font-weight: 500 !important; white-space: nowrap !important; }
/* `.fi-topbar svg` est plus spécifique : sans le préfixe, cette règle ne
   s'appliquerait jamais et l'icône resterait champagne pâle. */
.fi-topbar .fi-topbar-item-icon,
.fi-topbar .fi-topbar-group-toggle-icon { color: var(--cc-sable) !important; }

/* Survol : bordeaux plus clair, libellé champagne, icône or. */
.fi-topbar-item-btn:hover { background-color: var(--cc-bordeaux-2) !important; }
.fi-topbar-item-btn:hover .fi-topbar-item-label { color: #FBEFDF !important; }
.fi-topbar-item-btn:hover .fi-topbar-item-icon,
.fi-topbar-item-btn:hover .fi-topbar-group-toggle-icon { color: #E4C89A !important; }

/* Module courant : le fond suffit à le désigner, sans souligné. */
.fi-topbar-item.fi-active .fi-topbar-item-btn { background-color: var(--cc-bordeaux-2) !important; }
.fi-topbar-item.fi-active .fi-topbar-item-label { color: #FBEFDF !important; font-weight: 600 !important; }
.fi-topbar-item.fi-active .fi-topbar-item-icon { color: #E4C89A !important; }

/* Écrans étroits : Filament n'affiche la barre horizontale qu'au-delà de 1024 px
   et la fait passer à la ligne si elle déborde. On resserre les items entre 1024
   et 1200 px pour qu'elle tienne sur une seule ligne dès qu'elle est visible. */
@media (min-width: 64rem) and (max-width: 75rem) {
    .fi-topbar-item-btn { padding: .4rem .45rem !important; gap: .35rem !important; }
    .fi-topbar-item-label { font-size: .8125rem !important; }
    .fi-topbar .fi-topbar-item-icon { width: 1.1rem !important; height: 1.1rem !important; }
}

/* Logo : jamais coupé, cadré.
   L'avatar est exclu : c'est aussi un <img> du bandeau, et « width: auto » le
   rendait ovale (largeur libre + border-radius 50% = ellipse). */
.fi-topbar img:not(.fi-avatar),
.fi-sidebar-header img:not(.fi-avatar),
img.fi-logo { width: auto !important; object-fit: contain !important; }
.fi-topbar { min-height: 4rem !important; }

/* Avatar : cercle strict, quelle que soit la source de l'image. */
.fi-avatar {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 9999px !important;
    flex: none !important;
}

/* ============================================================================
   THÈME CLAIR — fond et surfaces en champagne
   ============================================================================ */
/* Le FOND DE PAGE porte le champagne lui aussi (Matthieu, 2026-08-06) : une seule surface continue.
   Il etait a --cc-bg (#FBF6EF), six points plus clair que les blocs, ce qui dessinait une rainure
   claire dans chaque espace entre eux - visible surtout entre le compte de resultat et le bilan.
   Les sections ne se distinguent donc plus que par leurs intitules : c'est assume, le mode dense
   ayant deja supprime les cadres. La variable --cc-bg reste definie, sans emploi, pour revenir en
   arriere d'un seul mot. */
html:not(.dark) .fi-main-ctn,
html:not(.dark) .fi-main { background-color: var(--cc-champagne) !important; }
/* le bandeau supérieur est traité en bordeaux plus bas (les 2 thèmes) */
/* Les surfaces portent le CHAMPAGNE, et non plus le creme (#FFFCF8) qui, si pale, se lisait comme
   du blanc et cassait la chaleur de la charte (demande de Matthieu, 2026-08-06).
   La variable --cc-champagne n'est PAS modifiee : elle sert aussi au TEXTE pose sur le bandeau
   bordeaux et sur l'ecran de connexion, ou la toucher rendrait les libelles illisibles. Seule la
   regle qui peint les surfaces change. */
html:not(.dark) .fi-section,
html:not(.dark) .fi-wi-stats-overview-stat,
html:not(.dark) .fi-ta-ctn,
html:not(.dark) .fi-dropdown-panel { background-color: var(--cc-champagne) !important; border-color: var(--cc-line) !important; }

/* ============================================================================
   BANDEAU SUPÉRIEUR — bordeaux, contenu champagne
   ============================================================================ */
/* Bandeau supérieur bordeaux (les deux thèmes), contenu clair — cohérent avec la barre latérale */
.fi-topbar, .fi-topbar > nav { background-color: var(--cc-bordeaux) !important; border-bottom: 1px solid rgba(245, 237, 228, .1) !important; }
/* ⚠️ Les menus déroulants ouverts depuis la barre (roue des paramètres,
   avatar) sont des ENFANTS de `.fi-topbar` dans le DOM, mais s'affichent
   sur un panneau crème. Sans l'exclusion ci-dessous, leur texte et leurs
   icônes héritaient du champagne de la barre et devenaient illisibles.
   `:where()` porte l'exclusion sans en modifier la spécificité. */
.fi-topbar :is(a, button, .fi-link, .fi-btn):not(:where(.fi-dropdown-panel, .fi-dropdown-panel *)) { color: var(--cc-champagne) !important; }
.fi-topbar svg:not(:where(.fi-dropdown-panel, .fi-dropdown-panel *)) { color: rgba(245, 237, 228, .72) !important; }
.fi-topbar :is(input, .fi-input):not(:where(.fi-dropdown-panel *)) { color: var(--cc-champagne) !important; background: transparent !important; }
.fi-topbar .fi-input-wrp { background-color: rgba(245, 237, 228, .08) !important; border-color: rgba(245, 237, 228, .2) !important; box-shadow: none !important; }
.fi-topbar .fi-input-wrp * { background-color: transparent !important; }
.fi-topbar ::placeholder { color: rgba(245, 237, 228, .55) !important; }
/* Disque champagne sur bandeau bordeaux : le contraste suffit, pas de cerclage. */
.fi-topbar .fi-avatar { border: 0 !important; }

/* SÉLECTEUR DE DOSSIER du panneau comptable (`/compta`).
   Filament pose `color: var(--gray-950)` DIRECTEMENT sur le libellé du dossier.
   Une déclaration directe l'emporte toujours sur une valeur HÉRITÉE, fût-elle
   `!important` : le champagne posé plus haut sur le bouton ne descendait donc
   pas jusqu'au texte. Sur la barre bordeaux, cela donnait un contraste mesuré
   de 1,21 pour 1 - illisible. Il faut viser le texte lui-même.
   ⚠️ Même exclusion que les autres règles de la barre : dans le PANNEAU
   déroulant, qui s'affiche sur crème, les noms doivent rester sombres. */
.fi-topbar :is(.fi-tenant-menu-trigger-text, .fi-tenant-menu-trigger-tenant-name):not(:where(.fi-dropdown-panel, .fi-dropdown-panel *)) { color: var(--cc-champagne) !important; }

/* ⚠️ Et le survol avec : Filament l'éclaire en `--gray-100`, qui vaut le
   champagne dans notre palette. Texte champagne sur fond champagne aurait
   simplement déplacé le défaut au survol. */
.fi-topbar .fi-tenant-menu-trigger:hover,
.fi-topbar .fi-tenant-menu-trigger:focus-visible { background-color: var(--cc-bordeaux-2) !important; }

/* ============================================================================
   ÉCRANS SIMPLES (connexion, double authentification, mot de passe)
   Fond bordeaux + carte sombre translucide, lion et titres en champagne.
   ============================================================================ */
/* Écran bordeaux dans les deux thèmes ; le conteneur plein écran laisse passer le dégradé. */
.fi-simple-layout { background: radial-gradient(130% 130% at 50% 0%, #54243D 0%, #3A1428 52%, #1C0913 100%) !important; }
.fi-simple-main-ctn { background: transparent !important; }

/* Carte sombre translucide (verre bordeaux) */
.fi-simple-main {
    background: rgba(20, 8, 14, .5) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(245, 237, 228, .14) !important;
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7) !important;
}

/* Texte et champs en champagne SUR LA CARTE SOMBRE uniquement.
   Portée limitée à .fi-simple-page-content : la modale Filament est un FRÈRE de ce
   conteneur (cf. vendor components/page/simple.blade.php), elle garde donc ses
   couleurs claires natives. Sans cette limite, le texte de la modale d'enrôlement
   2FA devenait champagne sur fond blanc — illisible. */
.fi-simple-page-content :is(h1, h2, h3, label, p, a, span) { color: var(--cc-champagne) !important; }
.fi-simple-page-content .fi-input-wrp {
    background-color: rgba(245, 237, 228, .06) !important;
    border-color: rgba(245, 237, 228, .22) !important;
    box-shadow: none !important;
}
.fi-simple-page-content .fi-input,
.fi-simple-page-content input:not([type="checkbox"]) {
    background-color: transparent !important;
    color: var(--cc-champagne) !important;
}

/* Une carte CLAIRE imbriquée dans un écran simple (carte de section de l'enrôlement
   2FA) doit garder un texte sombre lisible : on annule l'héritage champagne. */
.fi-simple-page-content .fi-section :is(h1, h2, h3, h4, p, label, span, div, li, dt, dd) {
    color: var(--cc-ink) !important;
}
.fi-simple-page-content .fi-section :is(.fi-section-header-description, .fi-fo-field-wrp-helper-text) {
    color: var(--cc-ink-muted) !important;
}
/* Liens en bordeaux, mais jamais un bouton (son libellé suit sa propre couleur). */
.fi-simple-page-content .fi-section a:not(.fi-btn),
.fi-simple-page-content .fi-section .fi-link:not(.fi-btn) { color: var(--cc-bordeaux) !important; }
/* Boutons et badges : le contenu hérite de la couleur portée par le composant. */
.fi-simple-page-content .fi-section :is(.fi-btn, .fi-badge) * { color: inherit !important; }
/* Champs de saisie dans une carte claire : fond blanc, texte sombre. */
.fi-simple-page-content .fi-section .fi-input-wrp {
    background-color: #FFFFFF !important;
    border-color: var(--cc-line) !important;
}
.fi-simple-page-content .fi-section :is(.fi-input, input:not([type="checkbox"])) {
    background-color: transparent !important;
    color: var(--cc-ink) !important;
}

/* Emblème de marque agrandi sur les écrans simples.
   Ciblé sur .fi-logo UNIQUEMENT : la règle visait toutes les <img> et écrasait
   le QR code d'enrôlement 2FA (12rem -> 3.2rem, soit ~51px : inscannable). */
.fi-simple-page .fi-logo,
.fi-simple-layout .fi-logo { height: 3.2rem !important; }

/* ------------------------------------------------------------------ */
/* Roue crantée des paramètres, dans la barre du haut.                 */
/* Mêmes teintes que les entrées de menu : icône sable, or au survol.  */
/* ------------------------------------------------------------------ */
.fi-topbar .cc-roue {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .625rem;
    border: 0;
    background: transparent;
    color: var(--cc-sable, #D9C9B4);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.fi-topbar .cc-roue svg { width: 1.15rem; height: 1.15rem; }
.fi-topbar .cc-roue:hover { background: var(--cc-bordeaux-2, #54243D); color: var(--cc-or, #E4C89A); }
.fi-topbar .cc-roue:focus-visible { outline: 2px solid var(--cc-or, #E4C89A); outline-offset: 2px; }

/* ------------------------------------------------------------------ */
/* Icônes des menus déroulants.                                        */
/*                                                                     */
/* La palette `gray` du panneau est un SABLE, pas un gris : le         */
/* `gray-400` dont Filament colore ses icônes vaut ici #B79A6A, soit   */
/* un contraste de 2,3 pour 1 sur le fond crème. Les icônes des menus  */
/* paraissaient effacées. On les ramène à l'encre douce de la marque   */
/* (#6E5A50, environ 6,5 pour 1) et au bordeaux au survol.             */
/*                                                                     */
/* Sélecteur à trois classes pour passer devant celui de Filament      */
/* (`.fi-dropdown-list-item .fi-icon`, deux classes) sans `!important`. */
/* ------------------------------------------------------------------ */
.fi-dropdown-list .fi-dropdown-list-item .fi-icon { color: var(--cc-ink-muted); }
.fi-dropdown-list .fi-dropdown-list-item:hover .fi-icon,
.fi-dropdown-list .fi-dropdown-list-item:focus-visible .fi-icon { color: var(--cc-bordeaux); }