/* Facteo — thème « dense & pro, bleu profond » (v3, aligné mockup) */

/* 1) Palette : bleu profond (couleurs COMPLÈTES, format Filament v5.8) */
:root, .fi, .fi-body {
  --primary-50: rgb(239 246 255);
  --primary-100: rgb(219 234 254);
  --primary-200: rgb(191 219 254);
  --primary-300: rgb(147 197 253);
  --primary-400: rgb(96 165 250);
  --primary-500: rgb(59 130 246);
  --primary-600: rgb(37 99 235);
  --primary-700: rgb(29 78 216);
  --primary-800: rgb(30 64 175);
  --primary-900: rgb(30 58 138);
  --primary-950: rgb(23 37 84);
  --facteo-navy: #0f1c38;
  --facteo-ink: #0f172a;
  --facteo-line: #eceff4;
}

/* 2) Fond de page (mockup #F5F7FA) */
:not(.dark) .fi-body, :not(.dark) .fi-main { background-color: #f5f7fa; }
.fi-main { padding-top: 1.5rem; padding-bottom: 2rem; }
/* Largeur bornée à ~1920px (Full HD), alignée À GAUCHE (le blanc va à droite).
   Le contenu démarre APRÈS la sidebar (15rem) → borne 1920px.
   La barre du haut démarre au bord (0, au-dessus de la sidebar) → borne 15rem+1920px
   pour que son bord droit (Recherche/menu) tombe pile sur le bord droit du contenu
   (bouton « Enregistrer et générer »). La marque « Facteo » reste au bord gauche. */
.fi-main { max-width: 1920px; margin-inline: 0 auto; }
/* La barre du haut couvre toute la largeur (marque à gauche). On la « rentre » à
   droite d'un padding = espace blanc de droite, pour que le groupe Recherche/menu
   s'arrête au bord droit du contenu (bouton « Enregistrer et générer »).
   Ne s'active que quand l'écran dépasse 15rem (sidebar) + 1920px. */
@media (min-width: 2161px) {
  .fi-topbar { padding-right: calc(100vw - 15rem - 1920px + 1.5rem) !important; }
}

/* 3) Barre latérale bleu nuit (~230 px pilotée par sidebarWidth) */
:not(.dark) .fi-sidebar { background: var(--facteo-navy); border-right: 1px solid #0b1730; }
:not(.dark) .fi-sidebar .fi-sidebar-header, :not(.dark) .fi-sidebar .fi-sidebar-nav { background: transparent; }
:not(.dark) .fi-sidebar-item-label { color: #cbd5e1; font-weight: 500; font-size: 13px; }
:not(.dark) .fi-sidebar-item .fi-sidebar-item-icon, :not(.dark) .fi-sidebar-item svg { color: #7e93b8 !important; }
:not(.dark) .fi-sidebar-item:not(.fi-active):hover { background: rgba(255,255,255,.06); border-radius: 8px; }
:not(.dark) .fi-sidebar-item:not(.fi-active):hover .fi-sidebar-item-label { color: #fff; }
:not(.dark) .fi-sidebar-item.fi-active > * { background: var(--primary-600) !important; border-radius: 8px; }
:not(.dark) .fi-sidebar-item.fi-active .fi-sidebar-item-label { color: #fff; font-weight: 600; }
:not(.dark) .fi-sidebar-item.fi-active svg { color: #fff !important; }
:not(.dark) .fi-sidebar-group-label { text-transform: uppercase; font-size: 10px; letter-spacing: .07em; color: #62789f !important; font-weight: 700; }
:not(.dark) .fi-sidebar-group-collapse-btn svg { color: #62789f !important; }
:not(.dark) .fi-sidebar .fi-dropdown-trigger, :not(.dark) .fi-sidebar [class*="tenant"] { color: #e2e8f0 !important; }

/* 4) Topbar blanche épurée */
:not(.dark) .fi-topbar > * { background: #fff; box-shadow: 0 1px 0 rgb(15 23 42 / .05); }

/* 5) Titre de page compact */
.fi-header { margin-bottom: 1.1rem; }
.fi-header-heading { font-size: 1.4rem; letter-spacing: -.01em; color: var(--facteo-ink); }

/* 6) Cartes / sections : blanc, radius 10, bordure & ombre très discrètes */
.fi-section, .fi-wi, .fi-ta-ctn, .fi-fieldset {
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgb(15 23 42 / .04) !important;
}
:not(.dark) .fi-section, :not(.dark) .fi-ta-ctn, :not(.dark) .fi-fieldset { border: 1px solid var(--facteo-line) !important; }
.fi-section-content { padding: 1.1rem 1.25rem 1.25rem; }
.fi-section-header { padding: 1rem 1.25rem; gap: .7rem; }
.fi-section-header-heading { font-size: 15px; font-weight: 700; color: var(--facteo-ink); }
.fi-section-header-description { font-size: 12px; color: #7c899c; }

/* 7) Icône de section → pastille bleu très clair (mockup) */
.fi-section-header .fi-icon,
.fi-section-header > svg,
.fi-section-header-icon {
  color: var(--primary-600) !important;
  background: #eaf1ff; border-radius: 9px;
  width: 34px; height: 34px; padding: 7px; box-sizing: border-box; flex: 0 0 auto;
}

/* 8) KPI (dashboard) : accent bleu + valeur encre */
.fi-wi-stats-overview-stat { border-radius: 10px !important; border: 1px solid var(--facteo-line); box-shadow: 0 1px 2px rgb(15 23 42 / .04) !important; position: relative; overflow: hidden; }
.fi-wi-stats-overview-stat::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: var(--primary-600); }
.fi-wi-stats-overview-stat-value { color: var(--facteo-ink); font-weight: 800; letter-spacing: -.02em; }
.fi-wi-stats-overview-stat-label { color: #64748b; font-weight: 600; }

/* 9) Tables : en-têtes discrets, lignes denses, survol bleuté */
:not(.dark) .fi-ta-header-cell { background: #f8fafc; text-transform: uppercase; font-size: 10.5px; letter-spacing: .04em; color: #64748b; }
.fi-ta-cell, .fi-ta-header-cell { padding-top: .55rem; padding-bottom: .55rem; }
:not(.dark) .fi-ta-row:hover { background: var(--primary-50); }

/* 10) Répéteur de lignes → tableau dense (une ligne par article) */
.facteo-lines .fi-fo-repeater { gap: .3rem; counter-reset: fline; }
.facteo-lines .fi-fo-repeater-item {
  border-radius: 8px !important; border: 1px solid var(--facteo-line) !important;
  box-shadow: none !important; background: #fff;
  display: flex !important; align-items: stretch; position: relative; counter-increment: fline;
}
/* éclate l'en-tête (poignée / corbeille) en colonnes flex de la ligne */
.facteo-lines .fi-fo-repeater-item-header { display: contents !important; }
.facteo-lines .fi-fo-repeater-item-header-heading { display: none; }
/* Rail gauche « # » : poignée 6 points + numéro de ligne */
.facteo-lines .fi-fo-repeater-item-header-start-actions {
  order: -2; flex: 0 0 auto; align-self: center;
  display: flex; flex-direction: row; align-items: center; gap: .3rem;
  padding: 0 .5rem 0 .65rem; min-height: 0;
}
.facteo-lines .fi-fo-repeater-item-header-start-actions::after {
  content: counter(fline); font-size: 12px; font-weight: 700; color: #64748b; min-width: 1ch; text-align: center;
}
/* poignée = grille de 6 points (2×3) au lieu des flèches */
.facteo-lines button[x-sortable-handle] { color: #9aa6b6; }
.facteo-lines button[x-sortable-handle] svg { display: none; }
.facteo-lines button[x-sortable-handle]::before {
  content: ""; display: block; width: 9px; height: 15px;
  background-image: radial-gradient(currentColor 1.15px, transparent 1.35px);
  background-size: 4.5px 5px; background-position: 0 1px;
}
/* corbeille : à droite de la ligne */
.facteo-lines .fi-fo-repeater-item-header-end-actions { order: 2; flex: 0 0 auto; align-self: flex-start; padding: .5rem .5rem 0 0; }
.facteo-lines .fi-fo-repeater-item-content { order: 0; flex: 1 1 auto; padding: .4rem .55rem !important; }
.facteo-lines .fi-input-wrp, .facteo-lines .fi-input { min-height: 34px; }
.facteo-lines .fi-input { font-size: 13px; }
/* colonnes serrées : pas de label */
.facteo-lines .fi-fo-field-wrp-label { display: none; }
.facteo-lines .fi-fo-field-wrp { gap: 0; }
.facteo-line-total { display: flex; align-items: center; justify-content: flex-end; height: 100%; font-weight: 700; color: var(--facteo-ink); font-variant-numeric: tabular-nums; }

/* 10b) Rangée d'en-têtes du tableau (une seule fois) */
.facteo-lines-head { padding: 0 3.1rem 0 4.05rem; margin-bottom: -.1rem; position: relative; }
.facteo-lines-head::before {
  content: "#"; position: absolute; left: 1.35rem; top: 0;
  font-size: 10.5px; font-weight: 700; color: #8a97a8;
}
.facteo-lines-head .fi-fo-placeholder { padding: 0; }
.facteo-th { display: block; width: 100%; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #8a97a8; }

/* 11) Champs & boutons : arrondis, focus bleu, compacts */
.fi-input-wrp { border-radius: 8px !important; }
.fi-input-wrp:focus-within { box-shadow: 0 0 0 3px rgb(37 99 235 / .16) !important; border-color: var(--primary-500) !important; }
.fi-btn { border-radius: 8px !important; font-weight: 600; }
.fi-dropdown-panel { border-radius: 11px !important; box-shadow: 0 12px 34px -14px rgb(15 23 42 / .3) !important; }
.fi-badge { border-radius: 7px !important; font-weight: 600; }

/* 12) Total TTC mis en évidence dans la carte Totaux */
.facteo-ttc { margin-top: .35rem; padding-top: .6rem; border-top: 1px solid var(--facteo-line); }
.facteo-ttc .fi-fo-field-wrp-label, .facteo-ttc label { font-weight: 700; color: var(--facteo-ink); }

/* 13) MODE SOMBRE — rendre le thème maison lisible sur fond sombre.
   On bascule les variables d'encre et de bordure : toutes les règles qui
   utilisent var(--facteo-ink)/var(--facteo-line) (titres, en-têtes de section,
   valeurs KPI, total de ligne, Total TTC, bordures) s'adaptent d'un coup. */
.dark, .dark .fi, .dark .fi-body {
  --facteo-ink: #e6e9ef;                 /* texte clair au lieu du quasi-noir */
  --facteo-line: rgb(255 255 255 / .09); /* bordures discrètes sur fond sombre */
}
/* Pastille d'icône de section : bleu translucide (au lieu du bleu très clair) */
.dark .fi-section-header .fi-icon,
.dark .fi-section-header > svg,
.dark .fi-section-header-icon { background: rgb(59 130 246 / .16); }
/* Lignes d'articles : surface sombre translucide au lieu du blanc plein */
.dark .facteo-lines .fi-fo-repeater-item { background: rgb(255 255 255 / .02); }
/* Tables : en-tête et survol de ligne, variantes sombres */
.dark .fi-ta-header-cell { background: rgb(255 255 255 / .03); color: #94a3b8; }
.dark .fi-ta-row:hover { background: rgb(59 130 246 / .12); }
/* Descriptions/labels gris : légèrement éclaircis pour le contraste */
.dark .fi-section-header-description,
.dark .fi-wi-stats-overview-stat-label { color: #9aa6b6; }