/* ===========================================================
   NOVA — Charte graphique "Omnia" (relookage, session du 2026-08-03)
   Inspirée des plateformes SaaS premium type Omnia (Deloitte) : coins
   arrondis généreux, ombres douces et profondes, respiration accrue,
   badges/puces en pilule, typographie plus affirmée sur les chiffres clés.
   Couleur de marque ECA (bleu du logo) conservée — seule l'esthétique
   change, aucune classe renommée (JS inchangé). Remplace la précédente
   charte "Corporate Premium" façon rapport imprimé (coins nets, badges
   rectangulaires, boutons en capitales) — décision explicite de
   l'utilisateur de basculer vers une esthétique plus moderne.

   Retouche « inspiration LinkedIn » (session du 2026-09-14, esthétique
   uniquement — aucune structure de page touchée) : cartes aplaties
   (ombre au repos très légère, appuyées sur leur bordure plutôt qu'une
   ombre flottante), boutons en pilule pleinement arrondie sans ombre
   colorée ni soulèvement au survol, icônes de la topbar transparentes au
   repos. Couleur de marque ECA (#22537E, issue du logo) conservée à
   l'identique — décision explicite de l'utilisateur de ne pas basculer
   vers le bleu LinkedIn.

   Refonte sidebar claire + fond crème (session du 2026-09-14, référence
   visuelle fournie par l'utilisateur — capture d'écran d'une autre
   application). Sidebar marine dégradée remplacée par un fond blanc avec
   bordure droite fine, item actif en pastille pleine largeur (fond violet
   clair, texte violet) au lieu d'une barre d'accent latérale, icônes de
   navigation repassées en pastel clair (même principe que les icônes
   KPI). Fond de page passé au crème chaud (--page-bg, nouvelle variable
   dédiée — les autres usages de --eca-gray-50 ne sont pas touchés).
   Liseré de couleur en tête des cartes KPI retiré (cartes uniformément
   blanches). En test local uniquement tant que non validé par
   l'utilisateur.
   =========================================================== */
:root{
  /* Couleurs institutionnelles — bleu du logo ECA conservé tel quel */
  --eca-violet:#22537E;        /* couleur primaire — boutons, liens, actifs (bleu du logo) */
  --eca-violet-dark:#173D5C;   /* hover primaire */
  --eca-violet-light:#E8EFF6;  /* fond clair primaire (hover secondaire, icônes, badges) */
  --eca-violet-2:#3D7FB3;      /* ton clair du bleu — dégradés, accents secondaires */
  --eca-white:#ffffff;
  --eca-gray-50:#F6F8FB;       /* fond secondaire (dashboards) */
  --eca-gray-100:#EEF1F7;
  --eca-gray-200:#E1E6F0;      /* bordures */
  --eca-gray-400:#98A2BC;      /* icônes/texte discret */
  --eca-gray-600:#647089;      /* texte secondaire */
  --eca-gray-800:#1B2A45;      /* texte principal / titres */
  --eca-dark:#152238;          /* bleu marine profond — titres, logo (plus utilisé sur la sidebar) */
  --eca-dark-2:#1D3151;        /* ton associé (dégradés ponctuels) */
  --page-bg:#F8F6F1;           /* fond crème chaud du contenu (inspiration dira/LinkedIn, 2026-09-14) — distinct de --eca-gray-50 qui reste utilisé pour les surfaces internes (hover, tables, kanban) */
  --eca-blue:#2F6FE4;          /* information */
  --eca-green:#12A66E;         /* succès */
  --eca-orange:#F5A524;        /* avertissement */
  --eca-red:#E5484D;           /* erreur */
  --radius-xs:0;                /* essai coins carrés (2026-09-14) — était 8px */
  --radius-sm:0;                /* était 10px */
  --radius-md:0;                /* était 12px */
  --radius-lg:0;                /* était 20px */
  --radius-pill:0;              /* était 999px (pilule) */
  --shadow-sm:0 1px 3px rgba(21,34,56,.05);
  --shadow-md:0 8px 24px rgba(21,34,56,.09);
  --shadow-lg:0 24px 64px rgba(21,34,56,.20);
  --shadow-focus:0 0 0 4px var(--eca-violet-light);
  --sidebar-w:236px;
  --sidebar-w-collapsed:72px;
  --header-h:64px;
  --transition:all .2s ease;
}

/* Icônes Material Symbols (Rounded) — remplace Font Awesome (session du
   2026-09-14, inspiration app dira, rendu trait fin). Fonctionne sur la
   même balise <i> qu'avant (juste une police à ligatures : le nom de
   l'icône est le contenu textuel, ex. <i class="material-symbols-rounded">
   search</i>) — aucun sélecteur CSS existant ciblant "i" n'a dû changer.
   Font Awesome reste chargé uniquement pour l'utilitaire .fa-spin
   (animation du spinner de connexion). */
.material-symbols-rounded{
  font-family:'Material Symbols Rounded';
  font-weight:normal;
  font-style:normal;
  line-height:1;
  letter-spacing:normal;
  text-transform:none;
  display:inline-block;
  white-space:nowrap;
  word-wrap:normal;
  direction:ltr;
  -webkit-font-smoothing:antialiased;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  vertical-align:middle;
}
/* Item de navigation actif : icône "remplie" plutôt que juste teintée
   (même principe que dira) — seul repère supplémentaire, la pastille de
   fond porte déjà la couleur active. */
.nav-item--active .material-symbols-rounded,
.nav-item.active .material-symbols-rounded{ font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24; }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Inter","Poppins",-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--page-bg);
  color:var(--eca-gray-800);
  -webkit-font-smoothing:antialiased;
  font-size:12px;
  line-height:1.6;
}
h1,h2,h3,h4,h5,h6,p{margin:0}
button{font-family:inherit}
input,select,textarea{font-family:inherit;color:inherit}

/* ---------- Hiérarchie typographique ---------- */
h1{font-size:2.1rem;font-weight:700;color:var(--eca-gray-800);line-height:1.2;letter-spacing:-.01em}
h2{font-size:1.6rem;font-weight:700;color:var(--eca-gray-800);line-height:1.25;letter-spacing:-.01em}
h3{font-size:1.3rem;font-weight:600;color:var(--eca-gray-800);line-height:1.3}
h4{font-size:1.1rem;font-weight:600;color:var(--eca-gray-800)}
h5{font-size:1rem;font-weight:600;color:var(--eca-gray-800)}
.text-body-lg{font-size:.95rem;font-weight:400;line-height:1.6;color:var(--eca-gray-600)}

/* ===========================================================
   Grille & utilitaires (système autonome, sans dépendance CDN)
   Grille d'espacement : 8 / 16 / 24 / 32 / 48 / 64 / 96 px
   =========================================================== */
.row{display:grid;grid-template-columns:repeat(12,1fr);column-gap:1.5rem;row-gap:1.5rem;width:100%;margin:0}
.row.g-2{column-gap:1rem;row-gap:1rem}
.row.g-3{column-gap:1.5rem;row-gap:1.5rem}
[class*="col-"]{grid-column:span 12 / span 12;min-width:0}
.col-12{grid-column:span 12 / span 12}
@media(min-width:576px){ .col-sm-6{grid-column:span 6 / span 6} }
@media(min-width:768px){ .col-md-3{grid-column:span 3 / span 3} .col-md-4{grid-column:span 4 / span 4} .col-md-6{grid-column:span 6 / span 6} .col-md-12{grid-column:span 12 / span 12} }
@media(min-width:992px){ .col-lg-4{grid-column:span 4 / span 4} .col-lg-6{grid-column:span 6 / span 6} .col-lg-8{grid-column:span 8 / span 8} }
@media(min-width:1200px){ .col-xl-3{grid-column:span 3 / span 3} }

.d-flex{display:flex}
.d-block{display:block}
.d-none{display:none}
@media(min-width:768px){ .d-md-block{display:block} .d-md-none{display:none} }
@media(min-width:992px){ .d-lg-none{display:none} .d-lg-block{display:block} }
.flex-wrap{flex-wrap:wrap}
.flex-column{flex-direction:column}
.flex-fill{flex:1 1 auto}
.align-items-center{align-items:center}
.align-items-start{align-items:flex-start}
.justify-content-between{justify-content:space-between}
.justify-content-center{justify-content:center}
.justify-content-end{justify-content:flex-end}
.gap-1{gap:.4rem} .gap-2{gap:.85rem} .gap-3{gap:1.25rem} .gap-4{gap:1.7rem}

.w-100{width:100%}
.fw-bold{font-weight:600}
.fw-normal{font-weight:400}
.text-center{text-align:center}
.text-trunc-block{overflow:hidden}
.small{font-size:.75rem}

.m-0{margin:0}
.mb-1{margin-bottom:.4rem} .mb-2{margin-bottom:.85rem} .mb-3{margin-bottom:1.25rem} .mb-4{margin-bottom:1.7rem}
.mt-1{margin-top:.4rem} .mt-2{margin-top:.85rem} .mt-3{margin-top:1.25rem} .mt-4{margin-top:1.7rem}
.my-3{margin-top:1.25rem;margin-bottom:1.25rem}
.me-1{margin-right:.4rem} .me-2{margin-right:.85rem}
.ms-2{margin-left:.85rem} .ms-auto{margin-left:auto}
.mx-auto{margin-left:auto;margin-right:auto}
.p-2{padding:.85rem} .p-3{padding:1.25rem} .p-4{padding:1.7rem}
.px-2{padding-left:.85rem;padding-right:.85rem} .px-3{padding-left:1.25rem;padding-right:1.25rem}
.py-1{padding-top:.4rem;padding-bottom:.4rem} .py-2{padding-top:.85rem;padding-bottom:.85rem} .py-3{padding-top:1.25rem;padding-bottom:1.25rem}
.pt-2{padding-top:.85rem}
a{text-decoration:none;color:inherit}
::selection{background:var(--eca-violet-light)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--eca-gray-200);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--eca-gray-400)}

.text-violet{color:var(--eca-violet)!important}
.bg-violet{background:var(--eca-violet)!important}

/* ---------- Boutons ---------- */
/* Pilule pleinement arrondie + à plat (inspiration LinkedIn, session du
   2026-09-14) : plus d'ombre colorée ni de soulèvement au survol sur le
   bouton primaire, juste un assombrissement — cohérent avec les cartes
   aussi aplaties ci-dessous. Couleur de marque ECA inchangée. */
.btn{border-radius:var(--radius-pill);font-weight:600;font-size:.83rem;padding:.6rem 1.3rem;transition:var(--transition);border:none;letter-spacing:0;cursor:pointer}
.btn-eca{background:var(--eca-violet);color:#fff}
.btn-eca:hover{background:var(--eca-violet-dark);color:#fff}
.btn-eca-outline{background:#fff;color:var(--eca-violet);border:1.5px solid var(--eca-violet)}
.btn-eca-outline:hover{background:var(--eca-violet-light)}
.btn-light-soft{background:#fff;color:var(--eca-gray-800);border:1px solid var(--eca-gray-200);font-weight:500}
.btn-light-soft:hover{background:var(--eca-gray-50);border-color:var(--eca-gray-400)}
.btn-sm{padding:.4rem .9rem;font-size:.74rem;border-radius:var(--radius-pill)}
.btn:active{transform:scale(.98)}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh;display:flex}
.login-panel{width:46%;min-width:380px;display:flex;align-items:center;justify-content:center;background:#fff;position:relative}
.login-illustration{flex:1;background-color:#152238;background-size:cover;background-position:center;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.login-card{width:100%;max-width:360px;padding:1.5rem}
.login-logo{width:auto;height:56px;display:flex;align-items:center;justify-content:flex-start}
.login-logo img{height:100%;width:auto;object-fit:contain}
.form-control-eca{border-radius:var(--radius-xs);border:1px solid var(--eca-gray-200);padding:.6rem .9rem;font-size:.85rem;transition:var(--transition)}
.form-control-eca:focus{border-color:var(--eca-violet);box-shadow:var(--shadow-focus);outline:none}
.input-icon{position:relative}
.input-icon i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--eca-gray-400)}
.input-icon .form-control-eca{padding-left:2.4rem}
.floaty{position:absolute;color:#fff;opacity:.9;animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}

/* ---------- Layout SPA ---------- */
.app-shell{display:flex;min-height:100vh}
/* Sidebar claire (inspiration dira/LinkedIn, session du 2026-09-14) —
   remplace le fond marine dégradé d'origine. Item actif = pastille pleine
   largeur teintée (fond violet clair, texte/icône violet), plus de barre
   d'accent latérale. Couleur de marque ECA inchangée, uniquement le
   support (clair au lieu de sombre). */
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  background:#fff;color:var(--eca-gray-600);
  border-right:1px solid var(--eca-gray-200);
  position:fixed;top:0;left:0;bottom:0;z-index:1000;transition:var(--transition);
  display:flex;flex-direction:column;
}
.sidebar.collapsed{width:var(--sidebar-w-collapsed)}
.sidebar-brand{height:var(--header-h);display:flex;align-items:center;gap:.75rem;padding:0 1.5rem;flex-shrink:0;border-bottom:1px solid var(--eca-gray-200)}
.sidebar-brand .logo-box{width:38px;height:38px;border-radius:var(--radius-sm);background:var(--eca-gray-50);border:1px solid var(--eca-gray-200);display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:5px}
.sidebar-brand .logo-box img{width:100%;height:100%;object-fit:contain}
.sidebar-brand span{font-weight:700;color:var(--eca-gray-800);white-space:nowrap;overflow:hidden;transition:var(--transition);letter-spacing:.02em}
.sidebar-brand .brand-logo{height:30px;width:auto;object-fit:contain;transition:var(--transition)}
.sidebar.collapsed .sidebar-brand span,.sidebar.collapsed .sidebar-brand .brand-logo,.sidebar.collapsed .nav-label,.sidebar.collapsed .nav-section-title{opacity:0;width:0}
.sidebar-nav{flex:1;overflow-y:auto;padding:1rem .7rem}
.nav-section-title{font-size:.64rem;text-transform:uppercase;letter-spacing:.1em;color:var(--eca-gray-400);padding:.9rem .85rem .35rem;white-space:nowrap;font-weight:700}
.nav-item{display:flex;align-items:center;gap:.7rem;padding:.45rem .6rem;border-radius:var(--radius-xs);cursor:pointer;color:var(--eca-gray-600);font-size:.82rem;font-weight:400;transition:var(--transition);margin-bottom:3px;white-space:nowrap;position:relative}
.nav-item:hover{background:var(--eca-gray-50);color:var(--eca-gray-800)}
.nav-item.active{background:var(--eca-violet-light);color:var(--eca-violet);font-weight:600}
.nav-item .badge-mini{margin-left:auto;background:var(--eca-red);color:#fff;font-size:.65rem;padding:.15rem .45rem;border-radius:var(--radius-pill)}
/* Icônes de navigation monochromes (inspiration dira/LinkedIn, session du
   2026-09-14 — remplace les pastilles pastel par catégorie d'une demande
   précédente : la référence fournie utilise des icônes simples qui suivent
   juste la couleur du texte de la ligne, pas de fond coloré par thème). Les
   classes nav-icon-* restent posées par le JS (NAV dans js/app.js) pour ne
   rien casser, mais n'ont plus d'effet visuel propre — tout est neutralisé
   ici en un seul endroit. */
.nav-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.85rem;color:inherit;transition:var(--transition)}
.sidebar.collapsed .nav-icon{margin:0 auto}
.nav-icon-blue,.nav-icon-green,.nav-icon-orange,.nav-icon-red,.nav-icon-violet,.nav-icon-teal,.nav-icon-pink,.nav-icon-gray{background:transparent;color:inherit}
.nav-sub{padding-left:2.1rem}
.sidebar-footer{padding:1rem;border-top:1px solid var(--eca-gray-200)}
.collapse-btn{width:100%;background:var(--eca-gray-50);border:1px solid var(--eca-gray-200);color:var(--eca-gray-600);border-radius:var(--radius-xs);padding:.6rem;cursor:pointer;transition:var(--transition)}
.collapse-btn:hover{background:var(--eca-gray-100);color:var(--eca-gray-800)}

.main-area{margin-left:var(--sidebar-w);flex:1;min-width:0;transition:var(--transition);display:flex;flex-direction:column}
.sidebar.collapsed ~ .main-area{margin-left:var(--sidebar-w-collapsed)}

.topbar{height:var(--header-h);background:#fff;border-bottom:1px solid var(--eca-gray-200);display:flex;align-items:center;gap:1rem;padding:0 1.75rem;position:sticky;top:0;z-index:900}
.global-search{flex:1;max-width:440px;position:relative}
.global-search input{width:100%;border:1px solid var(--eca-gray-200);border-radius:var(--radius-pill);padding:.55rem .9rem .55rem 2.3rem;font-size:.8rem;background:var(--eca-gray-50);transition:var(--transition)}
.global-search input:focus{background:#fff;border-color:var(--eca-violet);box-shadow:var(--shadow-focus);outline:none}
.global-search i{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--eca-gray-400)}
.search-results{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-height:380px;overflow-y:auto;display:none;z-index:1200;border:1px solid var(--eca-gray-200)}
.search-results.show{display:block;animation:fadeSlide .2s ease}
.search-results .sr-group-title{font-size:.7rem;text-transform:uppercase;color:var(--eca-gray-400);padding:.6rem .9rem .2rem;font-weight:600}
.search-results .sr-item{display:flex;align-items:center;gap:.6rem;padding:.55rem .9rem;cursor:pointer;font-size:.85rem}
.search-results .sr-item:hover{background:var(--eca-gray-50)}
/* Transparent au repos, cercle clair au survol (inspiration LinkedIn) —
   au lieu d'un cercle bordé visible en permanence. */
.topbar-icon-btn{width:36px;height:36px;border-radius:50%;background:transparent;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--eca-gray-600);transition:var(--transition);position:relative;flex-shrink:0}
.topbar-icon-btn:hover{background:var(--eca-gray-100);color:var(--eca-violet)}
.topbar-icon-btn .dot{position:absolute;top:6px;right:7px;width:8px;height:8px;background:var(--eca-red);border-radius:50%;border:2px solid #fff}
.user-chip{display:flex;align-items:center;gap:.5rem;cursor:pointer;padding:.3rem .5rem;border-radius:var(--radius-pill);transition:var(--transition)}
.user-chip:hover{background:var(--eca-gray-50)}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--eca-violet),var(--eca-violet-2));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;flex-shrink:0}
.avatar-sm{width:26px;height:26px;font-size:.68rem}
.dropdown-menu-eca{position:absolute;top:calc(100% + 10px);right:0;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);min-width:240px;padding:.5rem;display:none;border:1px solid var(--eca-gray-200);z-index:1200}
.dropdown-menu-eca.show{display:block;animation:fadeSlide .2s ease}
.dropdown-menu-eca .dm-item{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:var(--radius-xs);cursor:pointer;font-size:.8rem}
.dropdown-menu-eca .dm-item:hover{background:var(--eca-gray-50)}
@keyframes fadeSlide{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

.content-area{padding:1.75rem;flex:1}
/* "justify-content:between" n'est pas une valeur CSS valide (silencieusement
   ignorée) — corrigé en "space-between" : les boutons d'action d'une page
   (à droite) se retrouvent enfin plaqués à droite au lieu de coller au titre. */
.page-title-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.85rem;margin-bottom:1.5rem;border-left:4px solid var(--eca-violet);border-radius:2px;padding-left:.9rem}
.dash-welcome{font-size:.9rem;color:var(--eca-gray-600);text-align:right}
.dash-welcome b{color:var(--eca-gray-800);font-weight:700}
.page-title{font-size:1.35rem;font-weight:700;color:var(--eca-gray-800);letter-spacing:-.01em}
.page-sub{color:var(--eca-gray-600);font-size:.82rem;margin-top:.2rem}

/* ---------- Cards / KPI ---------- */
.card-eca{background:#fff;border-radius:var(--radius-md);border:1px solid var(--eca-gray-200);box-shadow:var(--shadow-sm);transition:var(--transition)}
.card-eca:hover{box-shadow:var(--shadow-md)}
.kpi-card{padding:1rem;display:flex;flex-direction:column;gap:.75rem;position:relative;overflow:hidden}
/* Cartes uniformément blanches, sans liseré coloré en tête (inspiration
   dira/LinkedIn, 2026-09-14 — remplace l'accent de couleur en haut de
   tuile de la charte "Omnia" précédente). Le code couleur reste porté par
   l'icône elle-même (.icon-blue/green/orange/red/violet). Valeurs exactes
   reprises du CSS source de l'app dira (public/assets/css/{tokens,app}.css,
   C:\xampp\htdocs\RH) sur demande explicite de l'utilisateur — icône
   42×42px/8px, chiffre 22px en 600 (pas 700), libellé 13px atténué. */
.kpi-icon{width:42px;height:42px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.375rem}
.kpi-value{font-size:1.375rem;font-weight:600;line-height:1.3;color:var(--eca-gray-800);letter-spacing:-.011em}
.kpi-label{font-size:.8125rem;color:var(--eca-gray-600);font-weight:400}
.kpi-trend{font-size:.68rem;font-weight:600;display:flex;align-items:center;gap:.25rem;background:var(--eca-gray-50);width:fit-content;padding:.1rem .45rem;border-radius:var(--radius-pill)}
.kpi-trend.up{color:var(--eca-green)}

/* Hauteur fixe pour les graphiques Chart.js (page Rapports) : sans conteneur
   de hauteur définie + maintainAspectRatio:false (cf. js/admin.js), Chart.js
   déduit la hauteur de la largeur du parent (ratio 1:1 par défaut pour
   doughnut/pie/polarArea) et rend des graphiques bien trop grands sur une
   carte large. */
.rep-chart-wrap{position:relative;height:210px;width:100%}
@media(max-width:576px){ .rep-chart-wrap{height:180px} }
.kpi-trend.down{color:var(--eca-red)}

.icon-blue{background:#E9EFFD;color:var(--eca-blue)}
.icon-green{background:#E4F7EF;color:var(--eca-green)}
.icon-orange{background:#FEF3E2;color:var(--eca-orange)}
.icon-red{background:#FCEAEA;color:var(--eca-red)}
.icon-violet{background:var(--eca-violet-light);color:var(--eca-violet)}

/* ---------- Badges statut ---------- */
/* Pilules arrondies (au lieu des étiquettes rectangulaires "façon rapport
   imprimé" de la précédente charte) — convention SaaS moderne, plus lisible
   en un coup d'œil dans une liste dense. */
.badge-eca{font-size:.7rem;font-weight:600;padding:.28rem .65rem;border-radius:var(--radius-pill);display:inline-flex;align-items:center;gap:.3rem}
.badge-blue{background:#E9EFFD;color:var(--eca-blue)}
.badge-green{background:#E4F7EF;color:var(--eca-green)}
.badge-orange{background:#FEF3E2;color:#B8710B}
.badge-red{background:#FCEAEA;color:var(--eca-red)}
.badge-gray{background:var(--eca-gray-100);color:var(--eca-gray-600)}
.badge-violet{background:var(--eca-violet-light);color:var(--eca-violet)}

/* ---------- Tables ---------- */
/* Compacité + en-tête blanc (au lieu d'une bande grise) — valeurs reprises
   du CSS source de l'app dira (2026-09-14, retour utilisateur : les
   tableaux NOVA "trop grossiers" comparés à ça). Padding resserré (8px/16px
   au lieu de 11px/14px), séparateurs de lignes très fins, survol léger. */
.table-eca{width:100%;border-collapse:separate;border-spacing:0}
.table-eca thead th{font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;color:var(--eca-gray-600);font-weight:600;padding:.5rem 1rem;background:#fff;border-bottom:1px solid var(--eca-gray-200);text-align:left;cursor:pointer;user-select:none;white-space:nowrap}
.table-eca thead th:hover{color:var(--eca-violet)}
.table-eca thead tr:first-child th:first-child{border-top-left-radius:var(--radius-md)}
.table-eca thead tr:first-child th:last-child{border-top-right-radius:var(--radius-md)}
.table-eca tbody td{padding:.5rem 1rem;font-size:.6875rem;border-top:1px solid var(--eca-gray-100);vertical-align:middle;color:var(--eca-gray-800)}
.table-eca tbody tr:first-child td{border-top:none}
.table-eca tbody tr{transition:var(--transition)}
.table-eca tbody tr:hover td{background:var(--eca-gray-50)}
.table-toolbar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:1rem}
.filter-chip{padding:.35rem .85rem;border-radius:var(--radius-pill);background:var(--eca-gray-50);color:var(--eca-gray-600);font-size:.74rem;font-weight:600;cursor:pointer;border:1px solid var(--eca-gray-200);transition:var(--transition)}
.filter-chip.active{background:var(--eca-violet);color:#fff;border-color:var(--eca-violet)}

/* ---------- Kanban ---------- */
.kanban-board{display:flex;gap:1rem;overflow-x:auto;padding-bottom:.85rem}
.kanban-col{background:var(--eca-gray-50);border-radius:var(--radius-md);min-width:255px;max-width:255px;flex-shrink:0;display:flex;flex-direction:column;max-height:calc(100vh - 200px);border:1px solid var(--eca-gray-200)}
.kanban-col-head{padding:.75rem 1rem;font-weight:700;font-size:.8rem;color:var(--eca-gray-800);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--eca-gray-200)}
.kanban-col-body{padding:.65rem;overflow-y:auto;flex:1;min-height:80px}
.kanban-card{background:#fff;border-radius:var(--radius-sm);padding:.85rem;margin-bottom:.6rem;box-shadow:var(--shadow-sm);cursor:grab;border-left:3px solid var(--eca-violet);transition:var(--transition)}
.kanban-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.kanban-card.sortable-ghost{opacity:.35}
.kanban-card-title{font-weight:600;font-size:.82rem;margin-bottom:.3rem;color:var(--eca-gray-800)}
.kanban-card-meta{font-size:.72rem;color:var(--eca-gray-600);display:flex;align-items:center;gap:.3rem;margin-top:.4rem}
.kanban-card-amount{font-weight:700;color:var(--eca-violet);font-size:.8rem}

/* ---------- Progress ---------- */
.progress-eca{height:8px;border-radius:var(--radius-pill);background:var(--eca-gray-100);overflow:hidden}
.progress-eca .bar{height:100%;background:linear-gradient(90deg,var(--eca-violet),var(--eca-violet-2));border-radius:var(--radius-pill);transition:width .6s ease}

/* ---------- Modal ---------- */
.modal-backdrop-eca{position:fixed;inset:0;background:rgba(21,34,56,.45);z-index:2000;display:none;align-items:flex-start;justify-content:center;padding:3vh 1rem;overflow-y:auto;backdrop-filter:blur(3px)}
.modal-backdrop-eca.show{display:flex;animation:fadeIn .2s ease}
/* SweetAlert2 sort par défaut en z-index 1060, soit DERRIÈRE le modal NOVA
   (2000) : toute confirmation ouverte depuis une fiche — motif de rejet d'une
   dépense mission ou administrative, suppression d'un projet/document/
   opportunité, réinitialisation d'un mot de passe — s'affichait hors écran et
   le bouton semblait ne rien faire (constaté en cliquant réellement le
   parcours de rejet, 2026-08-05 ; invisible pour les tests API). */
.swal2-container{z-index:3000}
.modal-eca{background:#fff;border-radius:var(--radius-lg);width:100%;max-width:760px;box-shadow:var(--shadow-lg);animation:popIn .25s cubic-bezier(.34,1.2,.64,1)}
.modal-eca.modal-lg{max-width:1040px}
.modal-eca-head{padding:1.1rem 1.4rem;border-bottom:1px solid var(--eca-gray-200);display:flex;align-items:center;justify-content:space-between}
.modal-eca-title{font-weight:700;font-size:1.05rem;color:var(--eca-gray-800)}
.modal-eca-body{padding:1.4rem;max-height:calc(100vh - 200px);overflow-y:auto}
.modal-eca-foot{padding:1rem 1.4rem;border-top:1px solid var(--eca-gray-200);display:flex;justify-content:flex-end;gap:.6rem;flex-wrap:wrap}
.modal-close-btn{width:30px;height:30px;border-radius:50%;border:1px solid var(--eca-gray-200);background:#fff;cursor:pointer;color:var(--eca-gray-600);flex-shrink:0;transition:var(--transition)}
.modal-close-btn:hover{background:var(--eca-gray-50);color:var(--eca-gray-800)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:scale(.97) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* ---------- Formulaires ---------- */
.form-label-eca{font-size:.76rem;font-weight:600;color:var(--eca-gray-800);margin-bottom:.4rem;display:block}
.form-control-eca,select.form-control-eca,textarea.form-control-eca{
  height:42px;font-size:.85rem;color:var(--eca-gray-800);background:#fff;
}
textarea.form-control-eca{height:auto;min-height:76px;resize:vertical;line-height:1.5}
.form-control-eca::placeholder{color:var(--eca-gray-400);font-weight:400}
.form-control-eca:disabled{background:var(--eca-gray-50);color:var(--eca-gray-600)}
.modal-eca-body hr{border:none;border-top:1px solid var(--eca-gray-200)}
.modal-eca-body h1,.modal-eca-body h2,.modal-eca-body h3{font-size:.95rem;font-weight:600;color:var(--eca-gray-800)}

/* ---------- Timeline ---------- */
.timeline{position:relative;padding-left:1.6rem}
.timeline::before{content:'';position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--eca-gray-200)}
.timeline-item{position:relative;padding-bottom:1.25rem}
.timeline-item::before{content:'';position:absolute;left:-1.6rem;top:3px;width:12px;height:12px;border-radius:50%;background:var(--eca-violet);border:3px solid var(--eca-violet-light)}
.timeline-date{font-size:.68rem;font-weight:600;color:var(--eca-violet)}
.timeline-text{font-size:.8rem;color:var(--eca-gray-800)}

/* ---------- Skeleton ---------- */
.skeleton{background:linear-gradient(90deg,var(--eca-gray-100) 25%,var(--eca-gray-200) 37%,var(--eca-gray-100) 63%);background-size:400% 100%;animation:skeleton-loading 1.4s ease infinite;border-radius:var(--radius-xs)}
@keyframes skeleton-loading{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ---------- Toggle switch ---------- */
.switch{position:relative;display:inline-block;width:42px;height:24px}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;cursor:pointer;inset:0;background:var(--eca-gray-200);border-radius:24px;transition:var(--transition)}
.switch .slider::before{content:'';position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:var(--transition)}
.switch input:checked + .slider{background:var(--eca-violet)}
.switch input:checked + .slider::before{transform:translateX(18px)}

/* ---------- Timesheet grid ---------- */
.ts-week-nav{display:flex;align-items:center;gap:.75rem;background:#fff;border-radius:var(--radius-md);padding:.75rem 1.1rem;border:1px solid var(--eca-gray-200);margin-bottom:1rem}
.ts-table th,.ts-table td{white-space:nowrap}
.ts-total-badge{font-weight:600;color:var(--eca-violet)}
.day-block{background:#fff;border:1px solid var(--eca-gray-200);border-radius:var(--radius-md);margin-bottom:.9rem;overflow:hidden}
.day-block-head{background:var(--eca-gray-50);padding:.6rem 1rem;font-weight:700;font-size:.8rem;color:var(--eca-gray-800);display:flex;justify-content:space-between;align-items:center}
.day-row{display:grid;grid-template-columns:1.6fr 1.6fr 1fr 1fr 2fr 40px;gap:.5rem;padding:.55rem 1rem;border-top:1px solid var(--eca-gray-100);align-items:center}
.day-row input,.day-row select{border:1px solid var(--eca-gray-200);border-radius:var(--radius-xs);padding:.4rem .6rem;font-size:.76rem;width:100%}
.day-row input:focus,.day-row select:focus{border-color:var(--eca-violet);outline:none}
.day-row-header{background:transparent;border-top:none;padding:.15rem 1rem .4rem}
.day-row-header span{font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--eca-gray-600)}

/* ---------- Utility ---------- */
.hover-lift{transition:var(--transition)}
.hover-lift:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.fade-in{animation:fadeIn .3s ease}
.empty-state{text-align:center;padding:2.4rem 1rem;color:var(--eca-gray-600)}
.empty-state i{font-size:2.1rem;color:var(--eca-gray-400);margin-bottom:.7rem}
.cursor-pointer{cursor:pointer}
.text-trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Mobile */
@media(max-width:991px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.mobile-open{transform:translateX(0)}
  .main-area{margin-left:0!important}
  .day-row{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .login-illustration{display:none}
  .login-panel{width:100%}
}