/* ===== CSS VARIABLES ===== */
:root {
  --primary:       #1565c0;
  --primary-dark:  #0d47a1;
  --primary-light: #e3f2fd;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 14px; background: #f0f2f5; color: #2d3748; display: flex; min-height: 100vh; }

/* ===== SIDEBAR ===== */
#sidebar { width: 240px; min-height: 100vh; background: #1a2035; color: #fff; display: flex; flex-direction: column; transition: width 0.25s; flex-shrink: 0; }
#sidebar.collapsed { width: 60px; }
.sidebar-header { padding: 18px 16px; border-bottom: 1px solid #2d3a55; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo-icon { font-size: 22px; color: #4fc3f7; }
.logo-title { font-weight: 700; font-size: 13px; color: #fff; }
.logo-sub { font-size: 11px; color: #90caf9; }
.nav-menu { list-style: none; padding: 12px 0; flex: 1; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 11px 18px; cursor: pointer; color: #b0bec5; transition: all 0.2s; white-space: nowrap; overflow: hidden; font-size: 14px; }
.nav-item:hover { background: #2d3a55; color: #fff; }
.nav-item.active { background: var(--primary); color: #fff; border-right: 3px solid #4fc3f7; }
/* Lot Pricing 5 — module non inclus dans le pack actif : grisé, jamais masqué. */
.nav-item.pack-locked { opacity: 0.5; }
.nav-item.pack-locked:hover { background: #2d3a55; opacity: 0.7; }
.pack-lock-badge { margin-left: auto; font-size: 10px; white-space: nowrap; opacity: 0.9; }
.nav-icon { font-style: normal; width: 20px; text-align: center; flex-shrink: 0; }
.nav-icon svg { width: 17px; height: 17px; vertical-align: middle; stroke-width: 2; }
.nav-text { flex: 1; }
.nav-group { list-style: none; }
.nav-group-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px 4px; cursor: pointer; user-select: none; }
.nav-group-header:hover .nav-group-label-txt { color: #90a4ae; }
.nav-group-label-txt { font-size: 9px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #546e7a; white-space: nowrap; overflow: hidden; transition: color 0.2s; }
.nav-group-arrow { color: #546e7a; display: flex; align-items: center; transition: transform 0.22s ease; flex-shrink: 0; }
.nav-group-arrow svg { width: 12px; height: 12px; stroke-width: 2.5; }
.nav-group:not(.open) .nav-group-arrow { transform: rotate(-90deg); }
.nav-group-items { list-style: none; padding: 0; overflow: hidden; max-height: 600px; transition: max-height 0.28s ease; }
.nav-group:not(.open) .nav-group-items { max-height: 0; }
.nav-group-label { padding: 14px 18px 4px; font-size: 9px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #546e7a; cursor: default; white-space: nowrap; overflow: hidden; }
.sidebar-footer { padding: 12px 18px; border-top: 1px solid #2d3a55; color: #78909c; font-size: 11px; }
#sidebar.collapsed .logo-title, #sidebar.collapsed .logo-sub, #sidebar.collapsed .nav-text, #sidebar.collapsed .nav-group-label, #sidebar.collapsed .nav-group-label-txt, #sidebar.collapsed .nav-group-arrow, #sidebar.collapsed .sidebar-footer { display: none; }
#sidebar.collapsed .nav-group-items { max-height: 600px; }
#sidebar.collapsed .nav-group-header { padding: 6px 0; justify-content: center; }
#sidebar.collapsed .nav-item { justify-content: center; padding: 11px 0; }
#sidebar.collapsed .nav-badge { display: none !important; }

/* ===== MAIN ===== */
#main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
#topbar { background: #fff; padding: 12px 24px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid #e2e8f0; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
#topbar h1 { font-size: 17px; font-weight: 600; flex: 1; }
#sidebar-toggle { background: none; border: none; font-size: 20px; cursor: pointer; color: #64748b; padding: 4px 8px; }
/* Topbar Société.1 : nom d'entreprise, jamais vide (repli "TUUMSEBA" géré en JS) —
   rétrécit et tronque avant de pousser le titre de page ou le hamburger. */
#topbar-company-name { flex-shrink: 0; font-size: 13px; font-weight: 600; color: #546e7a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
#topbar-period { font-size: 13px; color: #64748b; font-weight: 500; }
/* Repère d'entreprise active (mode Portfolio) — ne doit jamais être écrasé par les autres
   éléments de la topbar, y compris sur petits écrans. */
#portfolio-company-selector { flex-shrink: 0; max-width: 100%; }
#portfolio-company-select { max-width: 45vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== PAGES ===== */
#pages { flex: 1; overflow-y: auto; padding: 24px; }
.page { display: none; }
.page.active { display: block; }

/* Bannière de rappel compacte (sauvegarde, DSF...) : ne doit jamais s'étirer
   en pleine hauteur, même insérée au mauvais endroit ou dans un conteneur flex. */
.app-alert-banner { flex: 0 0 auto; width: 100%; max-height: none; box-sizing: border-box; align-self: flex-start; }
@media (max-width: 768px) {
  .app-alert-banner { padding: 8px 12px !important; font-size: 12px !important; }
  .app-alert-banner button { padding: 5px 10px !important; font-size: 11px !important; }
}

/* ===== BUTTONS ===== */
.btn { padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; transition: all 0.2s; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { background: #546e7a; color: #fff; }
.btn-secondary:hover { background: #37474f; }
.btn-outline { background: #fff; color: var(--primary); border: 1.5px solid var(--primary); }
.btn-outline:hover { background: var(--primary-light); }
.btn-danger { background: #c62828; color: #fff; }
.btn-danger:hover { background: #b71c1c; }
.btn-success { background: #2e7d32; color: #fff; }
.btn-success:hover { background: #1b5e20; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-lg { padding: 11px 28px; font-size: 15px; }
/* UI Pro.1a — bouton compact icône seule (tableaux à forte densité) : toujours
   accompagné d'un attribut title="" pour rester accessible sans texte visible. */
.btn-icon { display: inline-flex; align-items: center; justify-content: center; padding: 5px 8px; }
.btn-icon svg { width: 14px; height: 14px; }

/* ===== KPI GRID ===== */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 10px; }
.kpi-card { background: #fff; border-radius: 10px; padding: 11px 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-left: 4px solid #b0bec5; }
.kpi-card.kpi-blue { border-left-color: var(--primary); }
.kpi-card.kpi-green { border-left-color: #2e7d32; }
.kpi-card.kpi-orange { border-left-color: #e65100; }
.kpi-card.kpi-purple { border-left-color: #6a1b9a; }
.kpi-card.kpi-red { border-left-color: #c62828; }
.kpi-label { font-size: 11px; color: #78909c; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.kpi-value { font-size: 22px; font-weight: 700; color: #1a2035; }

/* ===== DASHBOARD — LARGEUR GLOBALE (Lot UI.3.g) =====
   Sur très grand écran, le contenu du dashboard ne doit plus s'étirer
   indéfiniment : conteneur centré à largeur raisonnable. Le responsive
   mobile n'est pas concerné (max-width ne s'applique qu'au-delà de sa
   propre valeur, aucun impact sous 1600px). */
.dashboard-container { max-width: 1600px; margin: 0 auto; }

/* Largeurs maîtrisées par bloc (Lot UI.3.g) : un conteneur large ne doit pas
   forcer chaque graphique/carte à s'étirer jusqu'à son bord. Chaque bloc
   garde une largeur cohérente avec son contenu réel, le reste de la ligne
   devient une marge normale plutôt qu'un étirement. */
.dashboard-charts-crm { max-width: 960px; }
.stock-chart-card { max-width: 960px; }

/* ===== DASHBOARD CHARTS ===== */
/* Lot UI.3.d — échelle commune de hauteur pour TOUS les graphiques Chart.js du
   dashboard. Chaque graphique reçoit un conteneur .dash-chart-h-* (position:
   relative + hauteur fixe) et sa config JS passe à maintainAspectRatio:false.
   Sans conteneur borné, maintainAspectRatio:true (par défaut) recalcule la
   hauteur depuis un ratio largeur/hauteur générique à chaque resize — ce qui
   produit des tailles incohérentes d'un graphique à l'autre. Trois niveaux :
   - sm  (compact)  : histogrammes à 2-3 catégories, sans grande légende
   - md  (standard) : courbes/barres d'évolution sur plusieurs mois
   - lg  (élargi)   : graphiques à légende fournie ou à plusieurs séries (N employés) */
:root {
  /* sm relevé de 120→130px (Lot UI.3.e, +8%) : seuls chart-invoice-status et
     chart-stock-status utilisent ce niveau, tous deux concernés par cet
     ajustement — aucun autre graphique n'est affecté. */
  --dash-chart-h-sm: 130px;
  --dash-chart-h-md: 160px;
  --dash-chart-h-lg: 200px;
  /* Niveau dédié à Répartition des charges uniquement (Lot UI.3.e, +7,5% par
     rapport à lg) : chart-leaves (seul autre consommateur de lg) n'y touche
     pas, il garde sa hauteur dynamique propre au nombre d'employés. */
  --dash-chart-h-lg-boost: 215px;
  /* Lot Dashboard cockpit (correctif) : graphiques des onglets Finance/RH/Stock agrandis
     d'environ +50% par rapport à leur ancienne hauteur (md=160px) pour mieux occuper l'espace
     désormais qu'ils ne sont plus dupliqués sur Synthèse. */
  --dash-chart-h-xl: 240px;
}
.dashboard-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.chart-card { background: #fff; border-radius: 10px; padding: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.chart-card h3 { font-size: 14px; margin-bottom: 10px; color: #37474f; }
.dash-chart-wrap { position: relative; }
.dash-chart-h-sm { height: var(--dash-chart-h-sm); }
.dash-chart-h-md { height: var(--dash-chart-h-md); }
.dash-chart-h-lg { height: var(--dash-chart-h-lg); }
.dash-chart-h-lg-boost { height: var(--dash-chart-h-lg-boost); }
.dash-chart-h-xl { height: var(--dash-chart-h-xl); }
/* Solde congés (Lot UI.3.f) : la hauteur interne du graphique reste calculée par
   employé (Lot UI.3.d, jamais de barres écrasées), mais la carte visible sur le
   dashboard ne dépasse jamais cette limite — défilement interne au-delà. */
.leaves-scroll { max-height: 260px; overflow-y: auto; }
.bulletin-list-mini { max-height: 260px; overflow-y: auto; }
.bulletin-mini-item { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid #f1f5f9; font-size: 13px; }

/* Cartes Finance/CRM à graphique unique : padding et titre resserrés, cohérents
   entre eux (Évolution CA, Trésorerie, Statut des factures). */
.fin-chart-card, .invoice-chart-card { padding: 10px 14px; display: flex; flex-direction: column; }
.fin-chart-card h3, .invoice-chart-card h3 { font-size: 12.5px; margin-bottom: 4px; }

/* Statut des factures (Lot UI.3.c) : histogramme horizontal compact — 3 catégories
   seulement, il n'a besoin ni de la moitié de la ligne ni d'une grande hauteur.
   Colonne étroite réservée au desktop uniquement (au-delà de 768px) pour ne pas
   perturber l'empilement mobile déjà en place sur .dashboard-charts. */
@media (min-width: 769px) {
  .dashboard-charts-crm { grid-template-columns: 260px 1fr; }
  /* Finance (Lot UI.3.g) : CA évolution + Trésorerie restent côte à côte mais à
     une largeur maîtrisée, même sur très grand écran — l'espace restant devient
     une marge normale plutôt qu'un étirement des graphiques. */
  .dashboard-charts-finance { grid-template-columns: repeat(2, minmax(240px, 480px)); justify-content: start; }
}

/* ===== DASHBOARD — STOCK (Lot UI.2.d, ajusté UI.3.c/d, agrandi Lot Dashboard cockpit) :
   graphique + alertes côte à côte ===== */
.stock-dash-grid { display: grid; grid-template-columns: 160px 1fr; gap: 12px; align-items: start; margin-bottom: 6px; }
/* Donut centré dans sa carte : ni 160px (trop étroit, légende illisible) ni 300px
   (Dashboard Pro.1b — trop large pour la quantité d'information réelle, laissait
   trop de vide autour dans la carte à côté des Alertes stock). */
.stock-dash-chart { max-width: 240px; margin: 0 auto; }
.stock-dash-alerts { display: flex; flex-direction: column; gap: 5px; max-height: 140px; overflow-y: auto; }

/* Suivi devis/proformas/BC (Lot UI.3.c) : liste bornée comme toutes les autres
   listes du dashboard — évite le défilement de page incontrôlé en bas du
   tableau de bord quand la liste des documents en attente s'allonge. */
#dashboard-suivi-docs { max-height: 320px; overflow-y: auto; }
.bulletin-mini-item:last-child { border-bottom: none; }

/* Correction UX.4 (retour client) : "Mes reçus récents" (dashboard commercial)
   — mini-tableau à colonnes alignées, dédié plutôt que .bulletin-mini-item
   (partagé avec d'autres listes ; son display:flex/justify-content:space-between
   sur 3 enfants étirait le montant au milieu et le badge loin à droite sur
   grand écran). Colonnes à largeur stable : Client (flexible) / N° reçu /
   Montant (aligné à droite) / Statut / bouton PDF — jamais de décalage d'une
   ligne à l'autre. Bascule en carte 2 lignes sur mobile, voir @600px plus bas. */
.recu-mini-table { display: flex; flex-direction: column; }
.recu-mini-head, .recu-mini-row {
  display: grid;
  grid-template-columns: 1fr 88px 96px 100px 22px;
  gap: 8px;
  align-items: center;
}
.recu-mini-head {
  font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: #90a4ae;
  padding: 0 4px 5px; border-bottom: 1px solid #eceff1;
}
.recu-mini-row {
  padding: 6px 4px; border-bottom: 1px solid #f1f5f9; font-size: 12.5px; cursor: pointer; transition: background .12s;
}
.recu-mini-row:last-child { border-bottom: none; }
.recu-mini-row:hover { background: #f8fafc; }
.recu-mini-client { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #1a2035; }
.recu-mini-num { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #78909c; font-size: 11.5px; }
.recu-mini-montant { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.recu-mini-statut { display: flex; justify-content: flex-end; overflow: hidden; }
.recu-mini-statut .badge { font-size: 10px; padding: 2px 6px; white-space: nowrap; }
.recu-mini-pdf { display: flex; justify-content: center; align-items: center; color: #b0bec5; }
.recu-mini-pdf:hover { color: var(--primary, #1565c0); }

.badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.badge-success { background: #e8f5e9; color: #2e7d32; }
.badge-warning { background: #fff8e1; color: #e65100; }
.badge-info { background: var(--primary-light); color: var(--primary); }

/* ===== TABLES ===== */
.table-wrapper { overflow-x: auto; background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { background: #1a2035; color: #fff; padding: 10px 12px; text-align: left; font-size: 12px; white-space: nowrap; }
.data-table th.text-right { text-align: right; }
.data-table th.text-center { text-align: center; }
.data-table td { padding: 9px 12px; border-bottom: 1px solid #f1f5f9; font-size: 13px; white-space: nowrap; }
.data-table tbody tr:hover { background: #f8fafc; }
.data-table tfoot td { background: #e3f2fd; font-weight: 600; }
.total-row td { background: #cfd8dc !important; font-weight: 700; font-size: 13px; }

/* ===== PAGE ACTIONS ===== */
.page-actions { display: flex; gap: 10px; margin-bottom: 16px; align-items: center; flex-wrap: wrap; }
.search-input { padding: 8px 12px; border: 1.5px solid #cbd5e0; border-radius: 6px; font-size: 13px; width: 220px; }
.search-input:focus { outline: none; border-color: var(--primary); }

/* ===== FORMS ===== */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: #546e7a; margin-bottom: 4px; }
.form-control { width: 100%; padding: 8px 11px; border: 1.5px solid #cbd5e0; border-radius: 6px; font-size: 13px; background: #fff; }
.form-control:focus { outline: none; border-color: var(--primary); }
select.form-control { cursor: pointer; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

/* ===== MODAL ===== */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: flex-start; justify-content: center; z-index: 1000; overflow-y: auto; padding: 30px 16px; }
.modal-overlay.hidden { display: none; }
.modal-container { background: #fff; border-radius: 12px; width: 100%; max-width: 800px; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
.modal-header { padding: 18px 24px; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; }
.modal-header h2 { font-size: 16px; font-weight: 700; }
.modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: #78909c; line-height: 1; }
.modal-body { padding: 20px 24px; max-height: 72vh; overflow-y: auto; }
.modal-footer { padding: 14px 24px; border-top: 1px solid #e2e8f0; display: flex; justify-content: flex-end; gap: 10px; }

/* ===== DECLARATION HEADERS ===== */
.declaration-header { background: #fff; border-radius: 10px; padding: 14px 18px; margin-bottom: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.declaration-header > div:first-child { font-size: 14px; margin-bottom: 8px; color: #1a2035; }
.decl-meta { display: flex; gap: 24px; flex-wrap: wrap; font-size: 13px; color: #546e7a; }

/* ===== DASHBOARD SECTIONS ===== */
.dash-section-label { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; color: #546e7a; text-transform: uppercase; margin: 8px 0 4px; padding-bottom: 4px; border-bottom: 2px solid #e8ecf0; display: flex; align-items: center; gap: 6px; }

/* ── Lot Dashboard cockpit : onglets Synthèse/Finance/RH/Stock + sections "Analyse détaillée" ── */
.dash-tabs { display: flex; gap: 4px; margin: 16px 0 14px; border-bottom: 2px solid #e8ecf0; overflow-x: auto; }
.dash-tab-btn { background: none; border: none; padding: 9px 18px; font-size: 13px; font-weight: 700; color: #607d8b; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; border-radius: 6px 6px 0 0; transition: color .15s, background .15s; }
.dash-tab-btn:hover { background: #f1f5f9; color: var(--primary); }
.dash-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); background: #f8fbff; }
.dash-tab-panel { display: none; }
.dash-tab-panel.active { display: block; }
.dash-panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 16px; }
/* Dashboard Pro.1b — variante "alignée en haut" : les cartes ne s'étirent plus à la
   hauteur de leur voisine la plus grande (comportement par défaut stretch de CSS
   Grid). Utilisée uniquement où une carte à contenu court (ex. peu d'alertes) serait
   sinon artificiellement agrandie à côté d'un graphique plus haut. */
.dash-panel-grid-top { align-items: start; }
/* Correctif : 26px provoquait la coupure disgracieuse "chiffre / FCFA" sur les cartes KPI
   Finance (~200-230px de large) ; 22px + nowrap garde un "gros chiffre" lisible sans
   jamais retourner le suffixe FCFA à la ligne. */
#page-dashboard .dash-tab-panel .kpi-value { font-size: 22px; white-space: nowrap; }

.dash-detail > summary { cursor: pointer; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; color: #546e7a; text-transform: uppercase; padding-bottom: 6px; border-bottom: 2px solid #e8ecf0; margin-bottom: 10px; list-style: none; display: flex; align-items: center; gap: 6px; }
.dash-detail > summary::-webkit-details-marker { display: none; }
.dash-detail > summary::before { content: '\25B6'; font-size: 9px; transition: transform .15s; }
.dash-detail[open] > summary::before { transform: rotate(90deg); }

/* Correctif : le montant ("268 351 FCFA") ne doit jamais se couper entre le chiffre et
   l'unité — libellé et valeur sont désormais empilés (au lieu d'une ligne label|valeur
   trop étroite) et la valeur reste sur une seule ligne (nowrap). */
.kpi-group-rows { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.kpi-group-row { display: flex; flex-direction: column; gap: 1px; }
.kpi-group-row > span:first-child { font-size: 10.5px; color: #78909c; text-transform: uppercase; letter-spacing: 0.3px; }
.kpi-group-value { font-weight: 800; font-size: 14px; white-space: nowrap; }

@media (max-width: 600px) {
  .dash-tab-btn { padding: 8px 12px; font-size: 12px; }
  .dash-panel-grid { grid-template-columns: 1fr; }
  /* Correction UX.4 (retour client) : "Mes reçus récents" bascule en carte
     2 lignes sur mobile — plus de colonnes fixes trop étroites pour un
     écran de téléphone. Bouton PDF masqué ici (le clic sur la ligne suffit,
     jamais deux façons de faire la même chose sur un si petit écran). */
  .recu-mini-head { display: none; }
  .recu-mini-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "client statut" "num montant";
    row-gap: 3px;
  }
  .recu-mini-client { grid-area: client; }
  .recu-mini-statut { grid-area: statut; }
  .recu-mini-num { grid-area: num; }
  .recu-mini-montant { grid-area: montant; }
  .recu-mini-pdf { display: none; }
}

/* ===== SETTINGS ===== */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-bottom: 24px; }
.settings-section { background: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.07); border: 1px solid #f0f4f8; }
.settings-section h3 { font-size: 14px; font-weight: 700; color: #1a2035; margin-bottom: 14px; border-bottom: 2px solid #e3f2fd; padding-bottom: 8px; display:flex; align-items:center; gap:6px; }
.settings-section-full { grid-column: 1 / -1; }
.settings-note { font-size: 12px; color: #78909c; margin-bottom: 12px; }
.settings-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.settings-actions { display: flex; gap: 12px; padding: 16px 0; flex-wrap:wrap; }
.stab-btn { transition: color .2s, border-color .2s; }
.stab-btn:hover { color: var(--primary, #1565c0) !important; }
.stab-content { animation: fadeTabIn .2s ease; }

/* ===== TABS ===== */
.tabs { display: flex; gap: 4px; margin-bottom: 14px; background: #fff; padding: 6px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); width: fit-content; }
.tab-btn { padding: 7px 16px; border: none; border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 500; background: transparent; color: #64748b; }
.tab-btn.active { background: var(--primary); color: #fff; }

/* Onglets page Commerciaux (RevendeurUI.switchTab) : l'état actif était figé en style
   inline sur les boutons, donc la couleur ne suivait jamais l'onglet réellement
   sélectionné — piloté ici par la seule classe .active que le JS bascule déjà. */
.rev-tab { color: #78909c; border-bottom: 3px solid transparent; }
.rev-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ===== REPORTS ===== */
.reports-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.report-card { background: #fff; border-radius: 10px; padding: 22px 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); cursor: pointer; transition: all 0.2s; text-align: center; }
.report-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.1); }
.report-icon { margin-bottom: 10px; }
/* UI Pro.2b — dimensionne/colore le SVG Feather qui remplace l'ancienne grosse
   icône émoji (font-size ne s'applique pas à un SVG) : sobre, gris ardoise. */
.report-icon svg { width: 28px; height: 28px; color: #546e7a; }
.report-title { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.report-desc { font-size: 12px; color: #78909c; }
.report-output { background: #fff; border-radius: 10px; padding: 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); min-height: 100px; }

/* ===== BULLETIN PREVIEW ===== */
.bulletin-preview { font-family: Arial, sans-serif; font-size: 12px; max-width: 700px; margin: 0 auto; }
.bp-header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #1a2035; padding-bottom: 10px; margin-bottom: 10px; }
.bp-company { font-size: 16px; font-weight: 900; color: #1a2035; }
.bp-title { text-align: center; font-size: 14px; font-weight: 700; border: 2px solid #1a2035; padding: 4px 16px; margin: 8px 0; }
.bp-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; font-size: 11px; }
.bp-meta-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 4px; margin-bottom: 6px; }
.bp-cell { border: 1px solid #aaa; padding: 3px 6px; }
.bp-cell-label { font-weight: 600; background: #f5f5f5; }
.bp-table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 11px; }
.bp-table th { background: #1a2035; color: #fff; padding: 4px 6px; text-align: center; }
.bp-table td { border: 1px solid #ddd; padding: 3px 6px; }
.bp-table .total-row { background: #f5f5f5; font-weight: 700; }
.bp-footer { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: 8px; }
.bp-footer-cell { border: 1px solid #aaa; padding: 3px 5px; font-size: 10px; text-align: center; }
.bp-footer-label { font-weight: 600; background: #f5f5f5; }

/* ===== PERIOD MODAL ===== */
.period-selector { display: flex; gap: 12px; align-items: center; justify-content: center; padding: 12px 0; }
.period-selector select { padding: 8px 12px; border: 1.5px solid #cbd5e0; border-radius: 6px; font-size: 14px; }

/* ===== MISC ===== */
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-muted { color: #78909c; }
.text-success { color: #2e7d32; }
.text-danger { color: #c62828; }
.fw-bold { font-weight: 700; }
.mt-16 { margin-top: 16px; }
.section-title { font-size: 15px; font-weight: 700; color: #1a2035; margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 2px solid #e3f2fd; }
.alert { padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; font-size: 13px; }
.alert-info { background: #e3f2fd; color: #1565c0; border: 1px solid #90caf9; }
.alert-success { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.alert-warning { background: #fff8e1; color: #e65100; border: 1px solid #ffcc80; }
.divider { border: none; border-top: 1px solid #e2e8f0; margin: 16px 0; }

/* ===== INDEMNITES SECTION ===== */
.indemnite-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; }
.ind-label { font-size: 11px; font-weight: 600; color: #78909c; padding: 4px 0; }

/* ===== LIVE PREVIEW BOX (employee form) ===== */
.live-preview-box { background: linear-gradient(135deg,#e3f2fd,#f8fafc); border: 1.5px solid #90caf9; border-radius: 10px; padding: 14px 18px; margin-top: 14px; }
.lp-title { font-size: 12px; font-weight: 700; color: #1565c0; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
.lp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lp-row { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 6px; border-radius: 4px; }
.lp-row:nth-child(odd) { background: rgba(255,255,255,0.6); }
.lp-ret { color: #c62828; font-weight: 600; }
.lp-net { font-size: 15px; font-weight: 800; color: var(--primary); padding: 8px 6px; background: #fff; border-radius: 6px; border: 2px solid var(--primary); grid-column: 1 / -1; text-align: center; margin-top: 4px; }

/* ===== INVOICES ===== */
.inv-total-box { background: #1a2035; color: #fff; text-align: right; padding: 12px 18px; border-radius: 8px; margin-top: 14px; font-size: 16px; }

/* ===== LEAVES ===== */
.leaves-summary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 4px; }
.leave-summary-card { background: #fff; border-radius: 10px; padding: 14px 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: all 0.2s; }
.leave-summary-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.1); }
.ls-name { font-weight: 700; font-size: 13px; color: #1a2035; }
.ls-mat { font-size: 11px; color: #78909c; margin-bottom: 8px; }
.ls-row { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
.ls-bar { height: 6px; background: #e2e8f0; border-radius: 3px; margin: 4px 0 8px; overflow: hidden; }
.ls-bar-fill { height: 100%; background: linear-gradient(90deg, #2e7d32, #66bb6a); border-radius: 3px; transition: width 0.4s; }

/* ===== CONTRACT & ALERT BADGES ===== */
.badge-danger { background: #ffebee; color: #c62828; }

/* ===== PLANNING CALENDAR ===== */
.planning-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; align-items: center; }
.planning-scroll { overflow-x: auto; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); background: #fff; }
.planning-table { border-collapse: collapse; min-width: 100%; font-size: 12px; }
.planning-table th { background: #1a2035; color: #fff; padding: 6px 4px; text-align: center; min-width: 24px; font-size: 11px; white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.planning-table td { border: 1px solid #e2e8f0; padding: 4px; min-width: 24px; height: 32px; }
.planning-table tbody tr:hover { background: #f8fafc; }
.planning-emp-col { min-width: 140px !important; max-width: 160px; position: sticky; left: 0; background: #fff; z-index: 2; border-right: 2px solid #e2e8f0 !important; padding: 6px 8px !important; }
th.planning-emp-col { background: #1a2035 !important; z-index: 3; }
.planning-weekend { background: #f5f5f5 !important; }
th.planning-weekend { background: #37474f !important; }

/* ===== PORTAIL EMPLOYÉ ===== */
.portal-login { background: #fff; border-radius: 16px; padding: 40px 36px; max-width: 400px; margin: 0 auto; text-align: center; box-shadow: 0 8px 40px rgba(0,0,0,0.3); }
.portal-logo { font-size: 48px; margin-bottom: 12px; }
.portal-title { font-size: 22px; font-weight: 700; color: #1a2035; margin-bottom: 6px; }
.portal-sub { font-size: 13px; color: #78909c; margin-bottom: 24px; }
.portal-form { text-align: left; }
.portal-form .form-group { margin-bottom: 14px; }
.portal-form .form-group label { display: block; font-size: 12px; font-weight: 600; color: #546e7a; margin-bottom: 4px; }
.portal-tasks { background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 4px 24px rgba(0,0,0,0.2); }
.portal-tasks-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #e2e8f0; }
.portal-emp-name { font-size: 20px; font-weight: 700; color: #1a2035; }
.portal-emp-info { font-size: 13px; color: #78909c; margin-top: 2px; }
.portal-period { font-size: 13px; color: var(--primary); font-weight: 600; margin-top: 6px; }
.portal-tasks-grid { display: grid; gap: 14px; }
.portal-task-card { border-radius: 10px; padding: 16px; border-left-width: 4px; border-left-style: solid; }
.portal-task-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.portal-task-title { font-size: 15px; color: #1a2035; }
.portal-task-status { font-size: 12px; font-weight: 700; }
.portal-task-desc { font-size: 13px; color: #546e7a; margin-bottom: 6px; line-height: 1.5; }
.portal-task-deadline { font-size: 12px; color: #78909c; margin-bottom: 10px; }
.portal-task-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.portal-status-btn { border: none; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.portal-status-btn:hover { opacity: 0.85; transform: scale(1.04); }
.portal-empty { text-align: center; padding: 40px; color: #78909c; font-size: 15px; }

/* Portail — écran d'accueil modules */
.portal-home { background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 4px 24px rgba(0,0,0,0.2); max-width: 700px; width: 100%; }
.portal-home-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid #e2e8f0; }
.portal-modules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.portal-module-card { border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px 16px; text-align: center; cursor: pointer; transition: all 0.2s; background: #f8fafc; }
.portal-module-card:hover { background: #1a2035; color: #fff; border-color: #1a2035; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(26,32,53,0.2); }
.portal-module-card:hover .portal-module-desc { color: #90caf9; }
.portal-module-icon { font-size: 32px; margin-bottom: 10px; }
.portal-module-label { font-size: 14px; font-weight: 700; color: #1a2035; margin-bottom: 4px; }
.portal-module-card:hover .portal-module-label { color: #fff; }
.portal-module-desc { font-size: 11px; color: #78909c; }

/* ===== FORMULAIRE EMPLOYÉ EN ONGLETS ===== */
.emp-form-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 2px solid #e2e8f0; padding-bottom: 0; }
.emp-form-tab { background: none; border: none; border-bottom: 3px solid transparent; padding: 8px 14px; font-size: 13px; font-weight: 600; color: #78909c; cursor: pointer; transition: all 0.2s; border-radius: 6px 6px 0 0; }
.emp-form-tab:hover { background: #f1f5f9; color: #1a2035; }
.emp-form-tab.active { color: var(--primary); border-bottom-color: var(--primary); background: #f8fafc; }
.emp-tab-panel { animation: fadeTabIn 0.15s ease; }
@keyframes fadeTabIn { from { opacity:0; transform: translateY(4px); } to { opacity:1; transform: translateY(0); } }

/* ===== LOT UI.1 — DASHBOARD "AUJOURD'HUI" (lecture seule), resserré en UI.3.f ===== */
.today-strip { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#fff; border:1px solid #e8ecf0; border-radius:10px; padding:9px 14px; margin-bottom:10px; box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.today-chips { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.today-chip { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:20px; white-space:nowrap; }
.today-chip-ok { background:#e8f5e9; color:#2e7d32; }
.today-chip-warn { background:#fff8e1; color:#e65100; }
.today-chip-critical { background:#ffebee; color:#c62828; }
.today-chip-info { background:var(--primary-light); color:var(--primary); }
.today-actions { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }

.dash-alert-list { display:flex; flex-direction:column; gap:5px; margin-bottom:8px; }
/* Dashboard Pro.1a — sobriété institutionnelle : fond neutre (blanc), seule la
   bordure gauche signale la gravité. Remplace l'ancien fond teinté plein
   (rouge/orange), jugé trop appuyé pour un logiciel de direction PME. */
.dash-alert-row { display:flex; align-items:center; gap:10px; justify-content:space-between; background:#fff; border:1px solid #e8ecf0; border-left:4px solid #b0bec5; border-radius:8px; padding:9px 12px; font-size:13px; color:#37474f; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,0.06); transition:filter .15s; }
.dash-alert-row:hover { filter:brightness(0.98); }
.dash-alert-row.dash-alert-critical { border-left-color:#c62828; }
.dash-alert-row.dash-alert-warn { border-left-color:#e65100; }
.dash-alert-go { font-size:11px; color:#fff; background:var(--primary); font-weight:700; white-space:nowrap; padding:4px 10px; border-radius:12px; }
.dash-empty { padding:10px; text-align:center; font-size:13px; color:#78909c; background:#fff; border-radius:8px; border:1px solid #e8ecf0; }
/* Audit interface Manager (retour client) : indicateur de dépassement du plafond
   d'alertes affichées — jamais masquer un dépassement en silence. */
.dash-alert-more { padding:6px; text-align:center; font-size:11px; color:#78909c; }

.dash-kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:8px; }
.dash-kpi-card { background:#fff; border-radius:10px; padding:10px 12px; box-shadow:0 2px 8px rgba(0,0,0,0.06); border-left:4px solid var(--primary); }
/* Dashboard Pro.1a — signal de gravité sobre sur les cartes KPI (trésorerie
   négative, créances impayées) : uniquement la bordure gauche et la couleur
   de la valeur changent, jamais de fond coloré. */
.dash-kpi-card.dash-kpi-alert-critical { border-left-color:#c62828; }
.dash-kpi-card.dash-kpi-alert-warn { border-left-color:#e65100; }
.dash-kpi-label { font-size:11px; color:#78909c; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:5px; }
.dash-kpi-value { font-size:19px; font-weight:700; color:#1a2035; white-space:nowrap; }
.dash-kpi-value.dash-kpi-value-critical { color:#c62828; }
.dash-kpi-value.dash-kpi-value-warn { color:#e65100; }
.dash-trend { font-size:11px; font-weight:600; margin-top:3px; min-height:14px; }
/* Sémantique (Audit App.2) : la couleur dépend du sens "bon/mauvais" pour
   l'indicateur, pas du seul signe de la variation — voir App._renderTrend(). */
.dash-trend-good { color:#2e7d32; }
.dash-trend-bad { color:#c62828; }
.dash-trend-neutral { color:#78909c; }

.dash-module-row { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:8px; }
.dash-module-card { background:#fff; border-radius:10px; padding:9px 11px; box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.dash-mod-title { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color:#78909c; margin-bottom:5px; }
.dash-mod-value { font-size:15px; font-weight:700; color:#1a2035; }
.dash-mod-sub { font-size:11px; color:#90a4ae; margin-top:2px; }

/* Activité récente : plafonnée + défilement interne, comme les autres listes du
   dashboard (max. 5 entrées déjà en JS, mais la carte ne doit jamais dépasser
   une hauteur raisonnable même avec des libellés multi-lignes). */
.dash-activity-feed { background:#fff; border-radius:10px; padding:4px 14px; box-shadow:0 2px 8px rgba(0,0,0,0.06); margin-bottom:4px; max-height:180px; overflow-y:auto; }
.dash-activity-feed .feed-item { display:flex; align-items:baseline; gap:8px; padding:6px 0; border-bottom:1px solid #f1f5f9; font-size:12.5px; color:#37474f; }
.dash-activity-feed .feed-item:last-child { border-bottom:none; }
.dash-activity-feed .feed-dot { width:6px; height:6px; border-radius:50%; background:var(--primary); flex-shrink:0; }
.dash-activity-feed .feed-tm { color:#90a4ae; font-size:11px; white-space:nowrap; }

/* ===== PRINT ===== */
@media print {
  #sidebar, #topbar, .page-actions, .modal-overlay { display: none !important; }
  #main-content { margin: 0; }
  .page.active { display: block !important; }
  body { background: #fff; }
}

/* ===== SIDEBAR OVERLAY (mobile) ===== */
#sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:199; }
#sidebar-overlay.visible { display:block; }
@media (max-width: 768px) {
  #sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; z-index: 200;
    width: 240px; transform: translateX(-100%); transition: transform 0.26s ease;
  }
  #sidebar.mobile-open { transform: translateX(0); }
  /* collapsed class on desktop doesn't apply on mobile */
  #sidebar.collapsed { width: 240px; transform: translateX(-100%); }
  #sidebar.collapsed .logo-title, #sidebar.collapsed .logo-sub,
  #sidebar.collapsed .nav-text, #sidebar.collapsed .nav-group-label,
  #sidebar.collapsed .nav-group-label-txt, #sidebar.collapsed .nav-group-arrow,
  #sidebar.collapsed .sidebar-footer { display: block; }
  #sidebar.collapsed .nav-group-header { padding: 12px 18px 4px; justify-content: space-between; }
  #sidebar.collapsed .nav-item { justify-content: flex-start; padding: 11px 18px; }
  #main-content { margin-left: 0 !important; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .kpi-grid.kpi-grid-extended { grid-template-columns: 1fr 1fr 1fr; }
  .dashboard-charts { grid-template-columns: 1fr; }
  /* Dashboard Stock (Lot UI.2.d) : graphique au-dessus des alertes, pas de colonne fixe étroite */
  .stock-dash-grid { grid-template-columns: 1fr; }
  .stock-dash-chart { max-width: 200px; margin: 0 auto; }
  /* Graphiques dashboard (Lot UI.3.d, relevé UI.3.e) : un peu plus haut sur mobile
     pour garder les libellés/légendes lisibles — un seul endroit à ajuster grâce
     aux variables communes. */
  :root {
    --dash-chart-h-sm: 140px;
    --dash-chart-h-md: 190px;
    --dash-chart-h-lg: 220px;
    --dash-chart-h-lg-boost: 235px;
    --dash-chart-h-xl: 260px;
  }
  /* Bande "Aujourd'hui" (Lot UI.1) : cartes empilées, pas de débordement horizontal */
  .today-strip { flex-direction: column; align-items: stretch; }
  .today-actions { margin-left: 0; }
  .today-actions .btn { flex: 1; min-width: 100px; }
  .dash-kpi-row { grid-template-columns: 1fr 1fr; }
  .dash-module-row { grid-template-columns: 1fr 1fr; }
  .form-row, .form-row-3 { grid-template-columns: 1fr; }
  .rapprochement-summary { grid-template-columns: 1fr; }
  .budget-cards-grid { grid-template-columns: 1fr; }
  #topbar { padding: 10px 12px; }
  /* Topbar Société.1 : rétrécit sur mobile plutôt que de pousser le hamburger ou le titre. */
  #topbar-company-name { max-width: 32vw; font-size: 12px; }
  #pages { padding: 14px; }
  /* Tables : scroll horizontal sur mobile */
  .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 560px; }
  /* Boutons touch-friendly */
  .btn { min-height: 40px; }
  .btn-sm { min-height: 34px; font-size: 12px; }
  /* Modal plein écran sur mobile */
  .modal-content { max-height: 92vh; width: 95vw !important; max-width: 95vw !important; overflow-y: auto; border-radius: 12px; }
  .modal-footer { flex-wrap: wrap; gap: 8px; }
  .modal-footer .btn { flex: 1; min-width: 100px; }
  /* Page actions en colonne */
  .page-actions { flex-wrap: wrap; gap: 8px; }
  .page-actions .btn { flex: 1; min-width: 140px; }
  /* Topbar compact */
  .topbar-search { display: none; }
  #server-user-chip { display: none !important; }
  /* Entreprise active (Portfolio) : toujours visible, quitte à passer sur sa propre ligne
     plutôt que d'être écrasée ou masquée faute de place. */
  .topbar-right { flex-wrap: wrap; row-gap: 6px; justify-content: flex-end; }
  #portfolio-company-selector { flex: 1 1 100%; order: 99; justify-content: center; }
  #portfolio-company-select { max-width: 70vw; }
  /* Texte taille lisible */
  .data-table td, .data-table th { font-size: 12px; padding: 7px 8px; }
  /* Caisse KPIs en 2 colonnes sur mobile */
  .caisse-kpi-grid { grid-template-columns: 1fr 1fr; }
}

/* ===== TABLETTE (768px – 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
  .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .form-row-3 { grid-template-columns: 1fr 1fr; }
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .modal-content { width: 85vw !important; max-width: 85vw !important; }
  .nav-item { font-size: 13px; }
}

/* ===== ACCOUNTING / CAISSE ===== */
.caisse-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 14px; margin-bottom: 20px; }
.caisse-kpi { background: #fff; border-radius: 10px; padding: 14px 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.caisse-kpi-entrees { background: #e8f5e9; border-left: 4px solid #2e7d32; }
.caisse-kpi-sorties { background: #ffebee; border-left: 4px solid #c62828; }
.caisse-kpi-solde-pos { background: #e3f2fd; border-left: 4px solid #1565c0; }
.caisse-kpi-solde-neg { background: #ffebee; border-left: 4px solid #c62828; }
.caisse-kpi-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #546e7a; margin-bottom: 4px; }
.caisse-kpi-value { font-size: 17px; font-weight: 800; color: #1a2035; }
.caisse-table tfoot td { font-weight: 700; background: #f0f4f8; }

/* ===== RAPPROCHEMENT ===== */
.rapprochement-summary { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; margin-bottom: 20px; }
.rappr-card { background: #fff; border-radius: 10px; padding: 16px 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.rappr-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #1a2035; margin-bottom: 8px; border-bottom: 2px solid #e2e8f0; padding-bottom: 6px; }
.rappr-row { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px; }
.rappr-solde { font-size: 15px; font-weight: 700; margin-top: 8px; border-top: 1px solid #e2e8f0; padding-top: 6px; }
.rappr-ecart { text-align: center; padding: 20px 24px; border-radius: 12px; }
.rappr-ok { background: #e8f5e9; color: #2e7d32; border: 2px solid #a5d6a7; }
.rappr-nok { background: #ffebee; color: #c62828; border: 2px solid #ef9a9a; }

/* ===== BUDGET ===== */
.budget-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px,1fr)); gap: 20px; }
.budget-card { background: #fff; border-radius: 12px; padding: 18px 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.07); cursor: pointer; transition: box-shadow 0.2s, transform 0.2s; border: 1.5px solid transparent; }
.budget-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.12); transform: translateY(-2px); border-color: #90caf9; }
.budget-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.budget-title { font-size: 15px; font-weight: 700; color: #1a2035; line-height: 1.3; }
.budget-detail-header { display: flex; flex-wrap: wrap; gap: 18px; background: #f8fafc; border-radius: 10px; padding: 14px 18px; margin-bottom: 18px; border: 1px solid #e2e8f0; }
.budget-detail-label { font-size: 11px; font-weight: 700; color: #78909c; text-transform: uppercase; letter-spacing: 0.5px; display: block; }
.budget-detail-val { font-size: 13px; font-weight: 600; color: #1a2035; }

/* ===== TOAST NOTIFICATIONS ===== */
#toast-container { position:fixed; top:16px; right:16px; z-index:9999; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast { padding:11px 16px; border-radius:8px; color:#fff; font-size:13px; font-weight:600; box-shadow:0 4px 20px rgba(0,0,0,0.22); min-width:210px; max-width:340px; display:flex; align-items:center; gap:9px; animation:toastIn 0.28s ease; pointer-events:auto; }
.toast-success { background:#2e7d32; }
.toast-error   { background:#c62828; }
.toast-info    { background:var(--primary); }
.toast-warning { background:#e65100; }
.toast-icon    { font-size:15px; flex-shrink:0; }
@keyframes toastIn { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }

/* ===== NAV BADGE ===== */
.nav-badge { display:inline-flex; align-items:center; justify-content:center; background:#e53935; color:#fff; font-size:10px; font-weight:700; border-radius:10px; min-width:18px; height:18px; padding:0 5px; margin-left:auto; }

/* ===== STOCK MOVEMENTS ===== */
.mvt-tabs { display:flex; gap:6px; margin-bottom:14px; }
.mvt-tab  { padding:7px 18px; border:1px solid #90caf9; border-radius:6px; cursor:pointer; font-size:13px; font-weight:600; background:#fff; color:#1565c0; transition:all 0.2s; }
.mvt-tab.active { background:#1565c0; color:#fff; border-color:#1565c0; }
.mvt-entree { color:#2e7d32; font-weight:700; }
.mvt-sortie { color:#c62828; font-weight:700; }

/* ===== BUDGET VERSEMENTS ===== */
.vers-form { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; background:#f0f7ff; border-radius:8px; padding:12px 14px; margin-bottom:14px; border:1px solid #90caf9; }
.vers-form .form-group { margin:0; }
.vers-badge-total { background:#e3f2fd; color:#1565c0; font-weight:700; border-radius:6px; padding:6px 14px; font-size:13px; }

/* ===== RECONCILIATION ===== */
.tr-reconciled td { background:#f1f8e9 !important; }
.badge-reconciled { background:#c8e6c9; color:#2e7d32; font-size:11px; font-weight:700; padding:2px 8px; border-radius:10px; }
.badge-pending    { background:#fff9c4; color:#f57f17; font-size:11px; font-weight:700; padding:2px 8px; border-radius:10px; }

/* ===== SIGNATURE ZONE ===== */
.signature-zone { display:flex; gap:30px; margin-top:10px; }
.signature-block { flex:1; border-top:1.5px solid #ccc; padding-top:6px; text-align:center; font-size:11px; color:#546e7a; }

/* ===== MISSIONS ===== */
.mission-card { background:#fff; border-radius:10px; padding:14px 18px; box-shadow:0 2px 8px rgba(0,0,0,.07); border-left:4px solid var(--primary); margin-bottom:10px; }
.mission-en-cours { border-left-color:#e65100; background:#fff8f5; }
#dashboard-missions > div { transition:opacity .15s; }
#dashboard-missions > div:hover { opacity:.85; }

/* ===== PAYSLIP PAID STATUS ===== */
.badge-paid { background:#e8f5e9; color:#2e7d32; }
.badge-unpaid { background:#fff8e1; color:#e65100; }

/* ===== RELANCE ALERTS ===== */
.relance-item { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid #f1f5f9; font-size:13px; }
.relance-item:last-child { border-bottom:none; }
.relance-days { font-size:11px; font-weight:700; padding:2px 8px; border-radius:10px; }
.relance-urgente  { background:#ffebee; color:#c62828; }
.relance-normale  { background:#fff8e1; color:#e65100; }

/* ===== COLOR PICKER SWATCHES ===== */
.color-swatches { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.color-swatch { width:28px; height:28px; border-radius:50%; cursor:pointer; border:3px solid transparent; transition:border-color 0.15s, transform 0.15s; }
.color-swatch:hover { transform:scale(1.15); }
.color-swatch.active { border-color:#fff; box-shadow:0 0 0 2px #333; }