/*
 * ═══════════════════════════════════════════════════════════════════
 *  PLANNING PRO — DESIGN SYSTEM v2.0
 *  Lead Product Design · Juillet 2026
 *  Référence : Stripe · Linear · Notion · Vercel · Attio · Raycast
 * ═══════════════════════════════════════════════════════════════════
 *
 *  RÈGLE D'OR
 *  Chaque token a un rôle unique. Ne jamais utiliser une couleur
 *  en dehors de son contexte sémantique défini ici.
 *
 *  TABLE DES MATIÈRES
 *  01. Tokens — Couleurs primitives
 *  02. Tokens — Sémantique couleurs
 *  03. Tokens — Typographie
 *  04. Tokens — Espacement (grille 8px)
 *  05. Tokens — Radius
 *  06. Tokens — Ombres
 *  07. Tokens — Bordures
 *  08. Tokens — Transitions
 *  09. Composants — Boutons
 *  10. Composants — Champs
 *  11. Composants — Cartes
 *  12. Composants — Badges / Statuts
 *  13. Composants — KPI
 *  14. Composants — Navigation (sidebar)
 *  15. Composants — Topbar
 *  16. Composants — Tableaux
 *  17. Composants — Modales
 *  18. Composants — États vides
 *  19. Composants — Notifications / Toasts
 *  20. Composants — Segmented control / Onglets
 *  21. Composants — Avatars
 *  22. Utilitaires
 *  23. Nouvelles sections — Page structure, Filter bar, Stat bar, etc.
 * ═══════════════════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────────────────────────────────
   01. TOKENS — COULEURS PRIMITIVES
   Palette atomique. Ne jamais utiliser directement dans les vues.
   Toujours passer par les tokens sémantiques.
   ───────────────────────────────────────────────────────────────── */
:root {
  /* Blue scale — couleur principale de marque */
  --p-blue-50:  #f0f7ff;
  --p-blue-100: #dbeeff;
  --p-blue-200: #b0d9fe;
  --p-blue-300: #74bbfc;
  --p-blue-400: #3a9ef7;
  --p-blue-500: #1689e8;   /* ← Brand Blue — NE PAS CHANGER */
  --p-blue-600: #0b6bc9;
  --p-blue-700: #0854a3;
  --p-blue-800: #073f7a;
  --p-blue-900: #052d56;

  /* Green scale — couleur de marque secondaire (logo) */
  --p-green-50:  #f3fcda;
  --p-green-100: #e8f9b6;
  --p-green-200: #ceef70;
  --p-green-300: #a8d827;
  --p-green-400: #83bc00;
  --p-green-500: #62b800;  /* ← Brand Green — NE PAS CHANGER */
  --p-green-600: #4f9800;
  --p-green-700: #3c7400;
  --p-green-800: #2c5500;
  --p-green-900: #1d3800;

  /* Semantic green (succès, actif) — distinct du vert marque */
  --p-emerald-50:  #f0fdf4;
  --p-emerald-100: #dcfce7;
  --p-emerald-500: #22c55e;
  --p-emerald-600: #16a34a;
  --p-emerald-700: #15803d;

  /* Amber (attention, en attente) */
  --p-amber-50:  #fffbeb;
  --p-amber-100: #fef3c7;
  --p-amber-400: #fbbf24;
  --p-amber-500: #f59e0b;
  --p-amber-600: #d97706;
  --p-amber-700: #b45309;

  /* Red (erreur, danger, retard) */
  --p-red-50:  #fef2f2;
  --p-red-100: #fee2e2;
  --p-red-400: #f87171;
  --p-red-500: #ef4444;
  --p-red-600: #dc2626;
  --p-red-700: #b91c1c;

  /* Purple (secondaire, séries, analytics) */
  --p-purple-50:  #faf5ff;
  --p-purple-100: #f3e8ff;
  --p-purple-500: #a855f7;
  --p-purple-600: #9333ea;

  /* Teal (MRR, récurrent) */
  --p-teal-50:  #f0fdfa;
  --p-teal-500: #14b8a6;
  --p-teal-600: #0d9488;

  /* Gray scale — neutre principal */
  --p-gray-0:   #ffffff;
  --p-gray-25:  #fafbfc;
  --p-gray-50:  #f6f7f9;
  --p-gray-100: #eef0f3;
  --p-gray-150: #e4e7ec;
  --p-gray-200: #d8dce4;
  --p-gray-300: #bcc2ce;
  --p-gray-400: #9aa1b0;
  --p-gray-500: #6b7280;
  --p-gray-600: #4b5563;
  --p-gray-700: #374151;
  --p-gray-800: #1f2937;
  --p-gray-900: #0f1117;
}

/* ─────────────────────────────────────────────────────────────────
   02. TOKENS — SÉMANTIQUE COULEURS
   Ces variables remplacent intégralement l'ancien système.
   Le code ne référence QUE ces variables.
   ───────────────────────────────────────────────────────────────── */
:root {
  /* === FONDS === */
  --bg:          #f7f8fa;                   /* fond de page principal — Stripe-like cool */
  --bg-subtle:   var(--p-gray-100);         /* fond secondaire (sections) */

  /* === SURFACES (cartes, panels) === */
  --sur:         var(--p-gray-0);           /* surface principale = blanc pur */
  --sur2:        var(--p-gray-25);          /* surface secondaire (table header, input bg nested) */
  --sur3:        var(--p-gray-50);          /* surface tertiaire (hover, selected) */

  /* === BORDURES === */
  --bd:          rgba(0,0,0,0.07);          /* bordure légère (cartes, dividers) */
  --bd2:         rgba(0,0,0,0.13);          /* bordure medium (inputs, boutons secondaires) */
  --bd3:         rgba(0,0,0,0.22);          /* bordure forte (focus visible, drag) */

  /* === TEXTES === */
  --tx:          #0f1117;                   /* texte principal (titres, valeurs importantes) */
  --tx2:         #374151;                   /* texte secondaire (labels, métadonnées) */
  --tx3:         #6b7280;                   /* texte tertiaire (placeholders, descriptions) */
  --tx4:         #9aa1b0;                   /* texte désactivé / très subtil */

  /* === MARQUE PRINCIPALE === */
  --brand-blue:       #1689e8;
  --brand-blue-dark:  #0b6bc9;
  --brand-blue-soft:  #f0f7ff;
  --brand-blue-mid:   rgba(22,137,232,0.12); /* focus ring, soft highlight */

  /* === MARQUE SECONDAIRE === */
  --brand-green:      #62b800;
  --brand-green-dark: #4f9800;
  --brand-green-soft: #f3fcda;

  /* === STATUTS SÉMANTIQUES === */
  /* Succès / Actif */
  --gn:   #16a34a;
  --gnl:  #f0fdf4;
  --gn-border: rgba(22,163,74,0.2);

  /* Attention / En attente */
  --am:   #d97706;
  --aml:  #fffbeb;
  --am-border: rgba(217,119,6,0.2);

  /* Erreur / Danger */
  --rd:   #dc2626;
  --rdl:  #fef2f2;
  --rd-border: rgba(220,38,38,0.2);

  /* Info (alias bleu) */
  --ac:   var(--brand-blue);
  --acl:  var(--brand-blue-soft);
  --acd:  var(--brand-blue-dark);

  /* Purple (analytics, séries) */
  --pu:   #9333ea;
  --pul:  #faf5ff;

  /* === INTERACTIONS === */
  --hover-bg:   rgba(0,0,0,0.025);    /* hover générique sur row/item */
  --active-bg:  rgba(0,0,0,0.05);     /* pressed/active */
  --focus-ring: rgba(22,137,232,0.18);/* outline focus */

  /* === SIDEBAR === */
  --sb-bg:        rgba(255,255,255,0.97);
  --sb-border:    rgba(0,0,0,0.06);
  --sb-item-active-bg:  rgba(22,137,232,0.09);
  --sb-item-active-tx:  #0b5fb5;
  --sb-item-indicator:  #1689e8;
}

/* ─────────────────────────────────────────────────────────────────
   03. TOKENS — TYPOGRAPHIE
   Police : Inter (déjà chargée).
   Échelle basée sur une progression Minor Third (×1.2).
   ───────────────────────────────────────────────────────────────── */
:root {
  --font-family:  'Inter', -apple-system, 'Helvetica Neue', sans-serif;

  /* Taille */
  --text-2xs:  10px;   /* micro: badges, timestamps */
  --text-xs:   11px;   /* xsmall: labels uppercase, metadata */
  --text-sm:   12px;   /* small: captions, secondary */
  --text-base: 13px;   /* base: corps du texte, cellules */
  --text-md:   14px;   /* medium: texte accentué */
  --text-lg:   15px;   /* large: titres de carte */
  --text-xl:   17px;   /* xlarge: valeurs KPI monétaires */
  --text-2xl:  20px;   /* 2x: valeurs KPI compteurs */
  --text-3xl:  24px;   /* 3x: titre de section */
  --text-page: 18px;   /* titre de page (topbar) */

  /* Graisse */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;

  /* Interligne */
  --leading-tight:  1.2;
  --leading-normal: 1.4;
  --leading-relaxed:1.65;

  /* Espacement lettres */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.03em;
  --tracking-wider:   0.06em;
  --tracking-widest:  0.09em;
}

/* ─────────────────────────────────────────────────────────────────
   04. TOKENS — ESPACEMENT (grille 8 px)
   ───────────────────────────────────────────────────────────────── */
:root {
  --space-1:   2px;
  --space-2:   4px;
  --space-3:   6px;
  --space-4:   8px;
  --space-5:  10px;
  --space-6:  12px;
  --space-7:  14px;
  --space-8:  16px;
  --space-10: 20px;
  --space-12: 24px;
  --space-16: 32px;
  --space-20: 40px;
  --space-24: 48px;
  --space-32: 64px;

  /* Padding composants */
  --pad-card:      20px 24px;   /* cartes grandes */
  --pad-card-sm:   14px 16px;   /* cartes compactes */
  --pad-row:       13px 16px;   /* ligne de liste */
  --pad-cell:      11px 14px;   /* cellule tableau — plus généreux */
  --pad-btn-sm:    4px 10px;    /* bouton petit */
  --pad-btn:       7px 14px;    /* bouton standard */
  --pad-btn-lg:    10px 20px;   /* bouton large */
  --pad-input:     9px 12px;    /* champ de saisie — plus généreux */
  --pad-badge:     2px 8px;     /* badge/pill */
  --pad-topbar:    14px 24px;   /* topbar (desktop) */
  --pad-modal:     28px;        /* modale */
  --pad-kpi:       16px 16px 14px; /* carte KPI — plus généreux */
}

/* ─────────────────────────────────────────────────────────────────
   05. TOKENS — RADIUS
   ───────────────────────────────────────────────────────────────── */
:root {
  --r-xs:  4px;   /* micro éléments : indicateurs, dots */
  --r-sm:  6px;   /* badges, chips, petits tags */
  --r-md:  8px;   /* boutons, inputs, petites cartes */
  --r:    10px;   /* cartes standard — valeur commune */
  --r-lg: 12px;   /* modales, panels, drawers */
  --r-xl: 16px;   /* grandes cartes, états vides */
  --r-full: 9999px; /* pills, avatars ronds */
}

/* ─────────────────────────────────────────────────────────────────
   06. TOKENS — OMBRES
   Principe : la lumière vient de dessus. Multi-couches Stripe-like.
   ───────────────────────────────────────────────────────────────── */
:root {
  --shadow-none: none;

  /* Ombre 1 — légère élévation (cards de base) */
  --shadow-sm:
    0 1px 3px rgba(0,0,0,0.06),
    0 1px 2px rgba(0,0,0,0.04);

  /* Ombre 2 — cartes actives, hover */
  --shadow-md:
    0 4px 12px rgba(0,0,0,0.08),
    0 2px 4px  rgba(0,0,0,0.04);

  /* Ombre 3 — dropdowns, popovers */
  --shadow-lg:
    0 8px 24px rgba(0,0,0,0.10),
    0 3px 8px  rgba(0,0,0,0.05),
    0 0   0 1px rgba(0,0,0,0.03);

  /* Ombre 4 — modales, overlays */
  --shadow-xl:
    0 20px 48px rgba(0,0,0,0.14),
    0 6px 16px  rgba(0,0,0,0.07),
    0 0   0 1px rgba(0,0,0,0.04);

  /* Alias */
  --sh:  var(--shadow-sm);
  --shm: var(--shadow-xl);
}

/* ─────────────────────────────────────────────────────────────────
   07. TOKENS — BORDURES
   ───────────────────────────────────────────────────────────────── */
:root {
  --border-subtle: 1px solid var(--bd);    /* cartes, dividers */
  --border-base:   1px solid var(--bd2);   /* inputs, boutons secondaires */
  --border-strong: 1px solid var(--bd3);   /* emphase, focus visible */
  --border-brand:  1px solid var(--brand-blue); /* accent bleu */
}

/* ─────────────────────────────────────────────────────────────────
   08. TOKENS — TRANSITIONS
   Uniformité sur toute l'interface.
   ───────────────────────────────────────────────────────────────── */
:root {
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   80ms;
  --duration-base:  150ms;
  --duration-slow:  250ms;
  --duration-enter: 200ms;

  --transition-colors:  color var(--duration-base) var(--ease-in-out),
                        background-color var(--duration-base) var(--ease-in-out),
                        border-color var(--duration-base) var(--ease-in-out);
  --transition-shadow:  box-shadow var(--duration-base) var(--ease-in-out);
  --transition-transform: transform var(--duration-base) var(--ease-out);
  --transition-all:     all var(--duration-base) var(--ease-in-out);
}

/* ═══════════════════════════════════════════════════════════════
   COMPOSANTS
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   09. BOUTONS
   3 variantes : primaire, secondaire, danger.
   2 tailles : base, sm.
   ───────────────────────────────────────────────────────────────── */

/* Reset bouton */
button {
  font-family: var(--font-family);
  cursor: pointer;
  border: none;
  background: none;
  outline: none;
}

/* Bouton primaire */
.btn.acc,
button.btn.acc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--pad-btn);
  background: var(--brand-blue);
  color: #ffffff;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  box-shadow: 0 1px 3px rgba(22,137,232,0.25), 0 1px 2px rgba(22,137,232,0.15);
  transition: var(--transition-colors), var(--transition-shadow), transform var(--duration-fast) var(--ease-out);
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.btn.acc:hover {
  background: var(--brand-blue-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(22,137,232,0.30), 0 2px 4px rgba(22,137,232,0.15);
}
.btn.acc:active { background: #0a5ea5; transform: none; }
.btn.acc:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Bouton secondaire */
.btn:not(.acc):not(.red) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--pad-btn);
  background: var(--sur);
  color: var(--tx2);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 1;
  border-radius: var(--r-md);
  border: var(--border-base);
  transition: var(--transition-colors), var(--transition-shadow);
  white-space: nowrap;
}
.btn:not(.acc):not(.red):hover {
  background: var(--sur2);
  color: var(--tx);
  border-color: var(--bd3);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.btn:not(.acc):not(.red):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Bouton danger */
.btn.red {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--pad-btn);
  background: var(--rdl);
  color: var(--rd);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1;
  border-radius: var(--r-md);
  border: 1px solid var(--rd-border);
  transition: var(--transition-colors);
  white-space: nowrap;
}
.btn.red:hover { background: #fee2e2; border-color: rgba(220,38,38,0.3); }

/* Bouton petit */
.btn-sm {
  padding: 4px 10px;
  font-size: 11.5px;
}

/* Bouton icône (carré) */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  border: var(--border-base);
  background: var(--sur);
  color: var(--tx3);
  transition: var(--transition-colors);
}
.btn-icon:hover { background: var(--sur3); color: var(--tx); }

/* Bouton semaine (navigation planning) */
.wb {
  width: 30px;
  height: 30px;
  border-radius: var(--r-md);
  border: var(--border-base);
  background: var(--sur);
  color: var(--tx3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-colors);
  font-size: 15px;
}
.wb:hover { background: var(--sur3); color: var(--tx); }

/* ─────────────────────────────────────────────────────────────────
   10. CHAMPS / INPUTS
   ───────────────────────────────────────────────────────────────── */

/* Champ de base */
.fi {
  width: 100%;
  padding: var(--pad-input);
  background: var(--sur);
  border: var(--border-base);
  border-radius: var(--r-md);
  font-family: var(--font-family);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  color: var(--tx);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-in-out),
              box-shadow var(--duration-fast) var(--ease-in-out);
  -webkit-appearance: none;
  appearance: none;
}
.fi::placeholder { color: var(--tx4); }
.fi:hover { border-color: var(--bd3); background: var(--sur); }
.fi:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Labels de formulaire */
.fg label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: 6px;
}

/* Groupe de champ */
.fg {
  margin-bottom: 14px;
}

/* Select */
select.fi {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239aa1b0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}

/* ─────────────────────────────────────────────────────────────────
   11. CARTES
   ───────────────────────────────────────────────────────────────── */

.card {
  background: var(--sur);
  border-radius: var(--r);
  border: var(--border-subtle);
  box-shadow: var(--shadow-sm);
}

/* Carte interactive (hover) */
.card-interactive {
  cursor: pointer;
  transition: var(--transition-shadow), border-color var(--duration-base) var(--ease-in-out), transform var(--duration-base) var(--ease-out);
}
.card-interactive:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--bd2);
  transform: translateY(-1px);
}

/* Carte employé / client (emp-card) */
.emp-card {
  transition: box-shadow var(--duration-base) var(--ease-in-out),
              transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-in-out);
}
.emp-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--bd2);
  transform: translateY(-1px);
}

/* Carte interne (sc = stat card / KPI) */
.sc {
  background: var(--sur);
  border-radius: var(--r);
  border: var(--border-subtle);
  box-shadow: var(--shadow-sm);
}

/* ─────────────────────────────────────────────────────────────────
   12. BADGES / STATUTS
   ───────────────────────────────────────────────────────────────── */

/* Classe utilitaire badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  padding: 2px 8px;
  border-radius: var(--r-full);
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.4;
}

.badge-success { background: var(--gnl);  color: var(--gn); }
.badge-warning { background: var(--aml);  color: var(--am); }
.badge-error   { background: var(--rdl);  color: var(--rd); }
.badge-blue    { background: var(--brand-blue-soft); color: var(--brand-blue-dark); }
.badge-neutral { background: var(--sur3); color: var(--tx3); }

/* ─────────────────────────────────────────────────────────────────
   13. KPI CARDS
   Structure :
   [icône] → [valeur] → [label] → [sous-label?]
   ───────────────────────────────────────────────────────────────── */

.kpi-card {
  padding: var(--pad-kpi);
  border-top: 2px solid;       /* couleur définie inline */
  background: var(--sur);
  border-radius: var(--r);
  border-left: var(--border-subtle);
  border-right: var(--border-subtle);
  border-bottom: var(--border-subtle);
  box-shadow: var(--shadow-sm);
}
.kpi-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.kpi-value {
  font-size: 22px;
  font-weight: var(--weight-extrabold);
  color: var(--tx);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.kpi-value.monetary {
  font-size: var(--text-xl);   /* les montants sont plus longs */
}
.kpi-label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  color: var(--tx2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 3px;
}
.kpi-sub {
  font-size: 10.5px;
  color: var(--tx3);
  margin-top: 3px;
}

/* Classes JS dynamiques pour les KPI */
.kpi-c {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 16px 16px 14px;
  border-top: 2px solid transparent;
}
.kpi-ic {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  flex-shrink: 0;
}
.kpi-ic svg { width: 13px; height: 13px; }
.kpi-v {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: var(--tx);
  letter-spacing: -0.03em;
}
.kpi-v.na {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tx3);
  letter-spacing: 0.04em;
}
.kpi-l {
  font-size: 10px;
  font-weight: 700;
  color: var(--tx2);
  margin-top: 4px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.kpi-s {
  font-size: 10.5px;
  color: var(--tx3);
  margin-top: 3px;
  line-height: 1.3;
}

/* ─────────────────────────────────────────────────────────────────
   14. NAVIGATION SIDEBAR
   ───────────────────────────────────────────────────────────────── */

.sidebar {
  width: 240px;
  background: var(--sb-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid var(--sb-border);
  box-shadow: 1px 0 0 rgba(0,0,0,0.04), 4px 0 16px rgba(0,0,0,0.025);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.sb-top {
  padding: 14px 14px 14px;
  border-bottom: 1px solid var(--bd);
  margin-bottom: 4px;
}
.sb-top .name { font-size: 15px; font-weight: var(--weight-semibold); color: var(--tx); }
.sb-top .sub  { font-size: 11px; color: var(--tx3); margin-top: 2px; }

.sb-nav { padding: 2px 6px; flex: 1; overflow-y: auto; }
.sb-foot {
  padding: 10px 14px;
  border-top: 1px solid var(--bd);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Section label */
.nav-sec {
  font-size: 9px;
  font-weight: var(--weight-bold);
  color: var(--tx4);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 10px 10px 3px;
}

/* Item de navigation */
.ni {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--r-md);
  cursor: pointer;
  color: var(--tx2);
  font-size: 12.5px;
  font-weight: var(--weight-medium);
  margin-bottom: 1px;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: background var(--duration-fast) var(--ease-in-out),
              color var(--duration-fast) var(--ease-in-out);
  position: relative;
}
.ni svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.5; transition: opacity var(--duration-fast); }
.ni:hover { background: rgba(0,0,0,0.04); color: var(--tx); }
.ni:hover svg { opacity: 0.7; }
.ni.on {
  background: var(--sb-item-active-bg);
  color: var(--sb-item-active-tx);
  font-weight: var(--weight-semibold);
}
.ni.on svg { opacity: 1; }
.ni.on::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  height: 64%;
  width: 3px;
  background: var(--sb-item-indicator);
  border-radius: 0 3px 3px 0;
}

/* ─────────────────────────────────────────────────────────────────
   15. TOPBAR
   ───────────────────────────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px 12px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--bd);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin-bottom: 0;
}

/* Titre de page */
.tb-t {
  font-size: var(--text-page);
  font-weight: var(--weight-bold);
  color: var(--tx);
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
}

/* Sous-titre de page */
.tb-context {
  font-size: var(--text-xs);
  color: var(--tx3);
  margin-top: 2px;
  font-weight: var(--weight-regular);
  letter-spacing: 0;
}

/* Sous-titre dynamique (ex: compteur, semaine) */
.tb-s {
  font-size: var(--text-xs);
  color: var(--tx3);
  margin-top: 1px;
}

/* Zone actions topbar */
.tb-a {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Barre de filtres sous KPI */
.filter-row {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.filter-row .fi {
  width: auto;
  padding: 5px 10px;
  font-size: var(--text-xs);
}

/* Content area */
.content {
  padding: 16px 24px 24px;
  flex: 1;
  overflow-y: auto;
}

/* ─────────────────────────────────────────────────────────────────
   16. TABLEAUX
   ───────────────────────────────────────────────────────────────── */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}

/* En-tête */
thead th {
  padding: 10px 14px;
  text-align: left;
  font-size: 10.5px;
  font-weight: var(--weight-bold);
  color: var(--tx4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--bd2);
  background: var(--sur2);
  white-space: nowrap;
}
thead th:first-child { border-radius: 0; }

/* Cellules */
td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--bd);
  font-size: var(--text-base);
  color: var(--tx2);
  vertical-align: middle;
}
td:first-child { color: var(--tx); }

/* Ligne totaux (tfoot) */
tfoot tr {
  background: var(--sur2);
  font-weight: var(--weight-semibold);
}
tfoot td { border-bottom: none; color: var(--tx); }

/* Hover row */
tbody tr:hover td { background: #f7f8fa; }
tbody tr:last-child td { border-bottom: none; }

/* ─────────────────────────────────────────────────────────────────
   17. MODALES
   ───────────────────────────────────────────────────────────────── */

@keyframes modal-slide-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.ov {
  position: fixed;
  inset: 0;
  background: rgba(15,17,23,0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.ov.on { display: flex; }

.modal {
  background: var(--sur);
  border-radius: var(--r-lg);
  padding: var(--pad-modal);
  width: 440px;
  max-width: 96vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  border: var(--border-subtle);
  animation: modal-slide-in 0.2s var(--ease-out);
}

.modal h3 {
  font-size: 17px;
  font-weight: var(--weight-bold);
  color: var(--tx);
  margin-bottom: 20px;
  letter-spacing: var(--tracking-tight);
}

/* Actions modale */
.ma {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: var(--border-subtle);
}

/* ─────────────────────────────────────────────────────────────────
   18. ÉTATS VIDES
   ───────────────────────────────────────────────────────────────── */

.empty-state {
  max-width: 780px;
  margin: 16px auto 0;
  background: var(--sur);
  border: 1px solid var(--bd);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  padding: 48px 32px;
  text-align: center;
}
.empty-state-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--brand-blue-soft);
  color: var(--brand-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 4px 12px rgba(22,137,232,0.10);
}
.empty-state-title {
  font-size: 16px;
  font-weight: var(--weight-bold);
  color: var(--tx);
  margin-bottom: 8px;
}
.empty-state-body {
  font-size: var(--text-base);
  color: var(--tx3);
  max-width: 420px;
  margin: 0 auto 24px;
  line-height: var(--leading-relaxed);
}

/* ─────────────────────────────────────────────────────────────────
   19. NOTIFICATIONS / TOASTS
   ───────────────────────────────────────────────────────────────── */

#toast-container,
.tip {
  position: fixed;
  z-index: 9999;
}

/* Variantes toast white-card Linear/Vercel */
.toast-success {
  background: var(--sur);
  border-left: 3px solid var(--gn);
  box-shadow: var(--shadow-lg);
  border-radius: var(--r-md);
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--tx2);
}
.toast-error {
  background: var(--sur);
  border-left: 3px solid var(--rd);
  box-shadow: var(--shadow-lg);
  border-radius: var(--r-md);
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--tx2);
}
.toast-info {
  background: var(--sur);
  border-left: 3px solid var(--brand-blue);
  box-shadow: var(--shadow-lg);
  border-radius: var(--r-md);
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--tx2);
}

/* ─────────────────────────────────────────────────────────────────
   20. SEGMENTED CONTROL / ONGLETS
   ───────────────────────────────────────────────────────────────── */

.seg-ctrl {
  display: flex;
  gap: 2px;
  background: var(--bg-subtle);
  border: var(--border-subtle);
  border-radius: 9px;
  padding: 2px;
}
.seg-ctrl button {
  padding: 5px 14px;
  border: none;
  border-radius: 7px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-in-out),
              color var(--duration-fast) var(--ease-in-out);
  white-space: nowrap;
}
.seg-ctrl button.on,
.seg-ctrl button[style*="var(--brand-blue)"] {
  background: var(--brand-blue);
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(22,137,232,0.25);
}
.seg-ctrl button:not(.on) {
  background: transparent;
  color: var(--tx3);
}
.seg-ctrl button:not(.on):hover {
  background: rgba(0,0,0,0.04);
  color: var(--tx2);
}

/* ─────────────────────────────────────────────────────────────────
   21. AVATARS
   ───────────────────────────────────────────────────────────────── */

.av {
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-bold);
  flex-shrink: 0;
  background: var(--brand-blue);
  color: #ffffff;
}

/* Tailles avatar */
.av-sm { width: 28px; height: 28px; font-size: 10px; }
.av-md { width: 36px; height: 36px; font-size: 13px; }
.av-lg { width: 44px; height: 44px; font-size: 16px; }

/* ─────────────────────────────────────────────────────────────────
   22. UTILITAIRES
   ───────────────────────────────────────────────────────────────── */

/* Grille */
.pg {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  gap: 12px;
}
.sg {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px,1fr));
  gap: 10px;
}

/* Loading / placeholder */
.loading {
  padding: 32px;
  text-align: center;
  color: var(--tx3);
  font-size: var(--text-base);
}

/* Responsive */
@media (max-width: 768px) {
  .content { padding: 12px 14px 20px; }
  .topbar  { padding: 12px 14px 10px; }
  .filter-row .fi { font-size: var(--text-sm); }
}
@media (max-width: 520px) {
  .modal { width: calc(100vw - 24px) !important; border-radius: var(--r-lg) !important; }
  .fr    { flex-direction: column; gap: 0; }
}

/* Texte ellipsis */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Wrappers de navigation semaine */
.wn { display: flex; gap: 4px; }

/* Highlight */
.tbl-wrap { overflow-x: auto; }

/* Code inline */
code {
  font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace;
  font-size: 11px;
  background: var(--sur3);
  border: var(--border-subtle);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--tx2);
}

/* Mobile nav item */
.mn { transition: color var(--duration-fast) var(--ease-in-out); }

/* ─────────────────────────────────────────────────────────────────
   23. NOUVELLES SECTIONS — Composants additionnels v2.0
   ───────────────────────────────────────────────────────────────── */

/* === PAGE HEADER (wrapper topbar sticky glassmorphism) === */
.page-header {
  flex-shrink: 0;
  border-bottom: 1px solid var(--bd);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* === FILTER BAR (barre de filtres compacte) === */
.filter-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.filter-bar .fi {
  width: auto;
  padding: 5px 10px;
  font-size: 12px;
  height: 32px;
}

/* === SECTION LABEL (header de section) === */
.section-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--tx4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

/* === STAT BAR (barre de progression) === */
.stat-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--bg-subtle);
  overflow: hidden;
}
.stat-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--brand-blue);
  transition: width 0.4s var(--ease-out);
}

/* === PLANNING CELL (pills dans le planning) === */
.shift-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: 11.5px;
  font-weight: 700;
  color: white;
  line-height: 1.4;
}

/* === KPI ROW (grille de KPI avec gap homogène) === */
.kpi-row {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

/* === SCROLLBAR PREMIUM === */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }