/* ============================================================
   JamDash — Design Tokens (variables)
   Règles : rem/em UNIQUEMENT (jamais px). La seule valeur relative au parent
   est le token --size-full ci-dessous : jamais de % écrit ailleurs.
   Couleurs extraites pixel par pixel de references/Dashbord exemple.jpg
   Base : 1rem = 16px (via :root font-size par défaut du navigateur).
   ============================================================ */

:root {
  /* ---------- Accents / data (communs light & dark) ---------- */
  --color-accent:        #4070f0;   /* bleu principal : barres, boutons, actif, donut Subs */
  --color-accent-strong: #3070f0;
  --color-accent-soft:   #80a5fb;   /* bleu clair */
  --color-warning:       #f0b000;   /* jaune/orange : donut Users */
  --color-warning-soft:  #f0d070;
  --color-purple:        #b050e0;   /* line chart / anneaux */
  --color-success:       #2e9e2a;   /* vert delta up */
  --color-danger:        #d05a5a;   /* rouge delta down */
  --color-on-accent:     #ffffff;   /* texte/icone posé sur un fond accent */
  --color-info:          #2f7de1;   /* 2e icône d'action des tableaux */
  --hover-on-accent:     rgba(255, 255, 255, 0.18);  /* survol d'un bouton posé sur un bandeau coloré */

  /* ---------- Bandeaux des tableaux Effectifs ---------- */
  --band-green: #4a9d3f;
  --band-blue:  #3d6fd6;
  --band-red:   #cc4b4b;

  /* ---------- Statuts (fond de ligne tableau) : LIGHT ---------- */
  --status-green-bg:  #d9e9d5; --status-green-fg:  #2c6a26;
  --status-red-bg:    #f0dbda; --status-red-fg:    #9e3f45;
  --status-yellow-bg: #f3efdc; --status-yellow-fg: #8a7434;

  /* ---------- Tableaux de données (data-table) ---------- */
  --table-radius:        var(--radius-lg);   /* rayon de la carte tableau */
  --table-border:        var(--border);      /* bordure des cellules */
  --table-cell-pad-y:    0.65rem;            /* padding vertical cellule */
  --table-cell-pad-x:    0.9rem;             /* padding horizontal cellule */
  --table-head-bg:       var(--color-accent);       /* fond en-tête groupe */
  --table-head-fg:       #ffffff;                    /* texte en-tête groupe */
  --table-head-sep:      rgba(255, 255, 255, 0.35);  /* séparateur dans l'en-tête coloré */
  --table-subhead-bg:    #eaf0fd;            /* fond sous-en-tête (light) */
  --table-subhead-fg:    var(--text-secondary);
  --table-rowlabel-bg:   #f1f4fb;            /* fond colonne de libellés (light) */
  --table-cell-fg:       var(--text-primary);
  --table-row-alt:       #f7f9fd;            /* zébrage ligne paire (light) */
  --table-row-hover:     #eef3fe;            /* survol de ligne (light) */

  /* ---------- Typographie ---------- */
  --fs-display: 2rem;      /* grands chiffres KPI */
  --fs-h1:      1.5rem;    /* titre de page */
  --fs-h2:      1.125rem;  /* titre de card */
  --fs-body:    0.875rem;
  --fs-label:   0.8125rem;
  --fs-small:   0.75rem;
  --fs-base:    1rem;
  --fs-chart:   0.625rem;  /* graduations des graphiques */
  --fs-chart-center: 0.85rem; /* pourcentage au centre d'un anneau */
  --fs-stat:    1.9rem;    /* chiffre des cartes Graphiques */
  --fs-result:  1.5rem;    /* chiffres de la section Résultats agent */
  --fs-ring:    1.4rem;    /* valeur à côté d'un anneau */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --lh-tight: 1.15; --lh-normal: 1.5;

  /* ---------- Espacements (échelle rem) ---------- */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;    --space-7: 3rem;

  /* ---------- Rayons / layout ---------- */
  --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-pill: 62.4375rem;
  --sidebar-w: 15rem;
  --sidebar-w-collapsed: 4.5rem;
  --collapse-size: 1.4rem;        /* bouton de repli de la barre latérale */
  --size-full: 100%;              /* occupe toute la largeur/hauteur du parent */
  --content-max: 105rem;
  --gap-grid: 1.25rem;

  /* ---------- Listes déroulantes flottantes ---------- */
  --popover-gap:  0.375rem;   /* écart entre le bouton et sa liste */
  --popover-edge: 0.5rem;     /* marge minimale avec le bord de la fenêtre */

  /* ---------- Graphiques (lus par le JS, ECharts ne lit pas le CSS) ---------- */
  --chart-h-donut: 11rem;  --chart-h-bars: 14rem;  --chart-h-curve: 13rem;  --chart-ring: 5.5rem;
  --chart-legend-dot: 0.625rem;   /* pastille de légende */
  --chart-legend-gap: 0.75rem;    /* écart entre deux lignes de légende */
  --chart-bar-radius: 0.1875rem;  /* arrondi du haut des barres */
  --chart-line: 0.15625rem;       /* épaisseur de la courbe */
  --chart-pad-left: 2.5rem; --chart-pad-right: 0.5rem; --chart-pad-top: 1rem; --chart-pad-bottom: 1.5rem;

  /* ---------- Transitions ---------- */
  --t-fast: 0.15s ease; --t-med: 0.25s ease;

  /* ============ THEME LIGHT (par défaut) ============ */
  --bg-page:        #f6f8fb;
  --bg-content:     #f6f8fb;
  --bg-sidebar:     #ffffff;
  --bg-card:        #ffffff;
  --bg-active:      #e5e9f0;   /* item menu actif */
  --bg-ghost:      #eef2f9;    /* barres fantômes du bar chart */
  --bg-hover:       #f0f3f8;
  --text-primary:   #1e2230;
  --text-secondary: #727272;
  --text-muted:     #9aa0ab;
  --border:         #e8ecf2;
  --shadow-card:    0 0.5rem 1.5rem rgba(20, 30, 60, 0.06);
  --shadow-float:   0 0.0625rem 0.25rem rgba(0, 0, 0, 0.12);   /* petit élément flottant */
  --shadow-drag:    0 1rem 2.5rem rgba(20, 30, 60, 0.25);      /* carte en cours de déplacement */
  --shadow-modal:   0 1.5rem 3rem rgba(0, 0, 0, 0.3);          /* fenêtre de dialogue */
  --overlay-bg:     rgba(15, 20, 35, 0.45);                    /* voile derrière une fenêtre de dialogue */
}

/* Redondance explicite pour le toggle */
:root[data-theme="light"] {
  --bg-page: #f6f8fb; --bg-content: #f6f8fb; --bg-sidebar: #ffffff;
  --bg-card: #ffffff; --bg-active: #e5e9f0; --bg-ghost: #eef2f9; --bg-hover: #f0f3f8;
  --text-primary: #1e2230; --text-secondary: #727272; --text-muted: #9aa0ab;
  --border: #e8ecf2; --shadow-card: 0 0.5rem 1.5rem rgba(20,30,60,0.06);
  --status-green-bg: #d9e9d5; --status-green-fg: #2c6a26;
  --status-red-bg: #f0dbda; --status-red-fg: #9e3f45;
  --status-yellow-bg: #f3efdc; --status-yellow-fg: #8a7434;
}

/* ============ THEME DARK ============ */
:root[data-theme="dark"] {
  --bg-page:        #12121e;
  --bg-content:     #12121e;
  --bg-sidebar:     #1d1d29;
  --bg-card:        #1d1d29;
  --bg-active:      #2a2a3a;
  --bg-ghost:       #23233150;
  --bg-hover:       #24243440;
  --text-primary:   #f1f4fb;
  --text-secondary: #a6a8b3;
  --text-muted:     #6e7180;
  --border:         #262636;
  --shadow-card:    0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
  /* statuts : bandes pleines saturées */
  --status-green-bg:  #307020; --status-green-fg:  #eafae6;
  --status-red-bg:    #a04040; --status-red-fg:    #fbeaea;
  --status-yellow-bg: #c0a060; --status-yellow-fg: #2b2410;
  /* tableaux de données — dark */
  --table-subhead-bg:  #202a3f;
  --table-rowlabel-bg: #1a2130;
  --table-row-alt:     #191922;
  --table-row-hover:   #23283a;
}