/* ================================================================
   CAMALARM CRM — Design Tokens v2
   Direction : Sobre · Technique · Belge B2B
   Référence : Linear / Stripe / Apple Business
   ================================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600;700&display=swap');

:root {
  /* ──────────────────────────────────────────
     ESPACEMENT — base 4px
  ────────────────────────────────────────── */
  --s1:  4px;   --s2:  8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px;   --s6: 32px;   --s7: 48px;  --s8: 64px;

  /* ──────────────────────────────────────────
     COULEURS — Neutrales
  ────────────────────────────────────────── */
  --n0:   #ffffff;   --n50:  #f8fafc;   --n100: #f1f5f9;
  --n200: #e2e8f0;   --n300: #cbd5e1;   --n400: #94a3b8;
  --n500: #64748b;   --n600: #475569;   --n700: #334155;
  --n800: #1e293b;   --n900: #0f172a;

  /* ──────────────────────────────────────────
     COULEURS — Brand (Bleu sécurité)
  ────────────────────────────────────────── */
  --b50:  #eff6ff;   --b100: #dbeafe;   --b200: #bfdbfe;
  --b500: #3b82f6;   --b600: #2563eb;   --b700: #1d4ed8;
  --b800: #1e3a8a;   --b900: #172554;

  /* ──────────────────────────────────────────
     COULEURS — Accent Orange CAMALARM
     Usage : seulement pour les CTA clés et accents PDF
  ────────────────────────────────────────── */
  --o50:  #fff7ed;   --o100: #ffedd5;   --o400: #fb923c;
  --o500: #f97316;   --o600: #ea580c;

  /* ──────────────────────────────────────────
     COULEURS — Sémantiques
  ────────────────────────────────────────── */
  --g50:  #f0fdf4;   --g500: #22c55e;   --g700: #15803d;
  --r50:  #fef2f2;   --r500: #ef4444;   --r700: #b91c1c;
  --y50:  #fefce8;   --y500: #eab308;

  /* ──────────────────────────────────────────
     TOKENS SÉMANTIQUES
  ────────────────────────────────────────── */
  --bg:          var(--n50);
  --surface:     var(--n0);
  --border:      var(--n200);
  --border-strong: var(--n300);

  --text-primary:   var(--n900);
  --text-secondary: var(--n500);
  --text-tertiary:  var(--n400);
  --text-inverse:   var(--n0);

  --brand:       var(--b700);
  --brand-hover: var(--b800);
  --brand-light: var(--b50);
  --brand-mid:   var(--b100);
  --brand-dark:  var(--b900);

  --accent:      var(--o600);
  --accent-light:var(--o50);

  --success:     var(--g500);
  --success-bg:  var(--g50);
  --danger:      var(--r500);
  --danger-bg:   var(--r50);
  --warning:     var(--y500);
  --warning-bg:  var(--y50);

  /* ──────────────────────────────────────────
     TYPOGRAPHIE
  ────────────────────────────────────────── */
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --text-xs:   11px;   --text-sm:   12px;   --text-base: 14px;
  --text-md:   15px;   --text-lg:   18px;   --text-xl:   22px;
  --text-2xl:  28px;   --text-3xl:  36px;

  --fw-normal:   400;  --fw-medium:  500;
  --fw-semibold: 600;  --fw-bold:    700;  --fw-black: 800;

  --lh-tight:   1.25;  --lh-normal:  1.5;  --lh-relaxed: 1.7;

  /* ──────────────────────────────────────────
     RAYONS
  ────────────────────────────────────────── */
  --radius-sm:  5px;   --radius-md:  8px;
  --radius-lg:  12px;  --radius-xl:  16px;  --radius-full: 9999px;

  /* ──────────────────────────────────────────
     OMBRES — subtiles, pas lourdes
  ────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 8px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);
  --shadow-lg:  0 8px 24px -4px rgba(0,0,0,.08), 0 4px 8px -4px rgba(0,0,0,.04);
  --shadow-focus:       0 0 0 3px rgba(29,78,216,.15);
  --shadow-focus-danger:0 0 0 3px rgba(239,68,68,.15);

  /* ──────────────────────────────────────────
     TRANSITIONS
  ────────────────────────────────────────── */
  --ease:      cubic-bezier(.4,0,.2,1);
  --tr-fast:   .12s var(--ease);
  --tr-base:   .18s var(--ease);
  --tr-slow:   .28s var(--ease);

  /* ──────────────────────────────────────────
     GRADIENTS — conservés pour header et PDF
  ────────────────────────────────────────── */
  --gradient-brand:   linear-gradient(135deg, #172554 0%, #1e3a8a 45%, #1d4ed8 100%);
  --gradient-accent:  linear-gradient(135deg, #ea580c 0%, #f97316 100%);
  --gradient-surface: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);

  /* ──────────────────────────────────────────
     ALIAS LEGACY (compatibilité code existant)
  ────────────────────────────────────────── */
  --bl: var(--brand);     --bld: var(--brand-hover);  --bll: var(--brand-light);
  --nv: #172554;          --nvl: #1e3a8a;
  --or: var(--accent);    --orl: var(--accent-light);  --ord: var(--o600);
  --rd: var(--danger);    --rdl: var(--danger-bg);
  --ok: var(--success);   --okl: var(--success-bg);
  --wn: var(--warning);   --wnl: var(--warning-bg);
  --bg: var(--n50);       --cd: var(--surface);
  --tx: var(--text-primary);   --ts: var(--text-secondary);
  --bd: var(--border);
  --r: var(--radius-lg);  --rs: var(--radius-md);
  --tr: var(--tr-base);
  --shadow:    var(--shadow-sm);
  --shadow-md: 0 4px 8px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);
  --shadow-lg: 0 8px 24px -4px rgba(0,0,0,.08), 0 4px 8px -4px rgba(0,0,0,.04);
  /* legacy glass tokens — éliminés fonctionnellement, gardés pour compat */
  --glass-bg:     rgba(255,255,255,.9);
  --glass-border: rgba(255,255,255,.95);
  --glass-shadow: var(--shadow-sm);
  --glass-blur:   none;
}

/* ══════════════════════════════════════════════════════════════
   RESET
   ══════════════════════════════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-primary);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  font-weight: var(--fw-normal);
  letter-spacing: -.01em;
  overflow-x: hidden;
}
input, select, textarea, button { font-family: var(--font); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* T8 point 4 : garantir l'affichage LTR partout (pas d'effet RTL hérité
   du locale système ou d'un parent mal configuré). Les champs numériques
   et les cellules "montant" gardent leur text-align:right explicite. */
html, body { direction: ltr; }
input[type="text"],
input:not([type]),
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea { direction: ltr; text-align: left; unicode-bidi: plaintext; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--n300); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--n400); }

/* ── Selection ── */
::selection { background: var(--brand-mid); color: var(--brand); }

/* ── Material Icons ── */
.material-symbols-rounded {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  vertical-align: middle; line-height: 1;
}

/* ══════════════════════════════════════════════════════════════
   BADGES STATUT
   ══════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: var(--s1);
  padding: 3px var(--s2); border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  letter-spacing: .2px; line-height: 1; white-space: nowrap;
}
.badge::before { content:''; width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.badge-draft   { background:var(--n100); color:var(--n600); }
.badge-draft::before   { background:var(--n400); }
.badge-sent    { background:var(--brand-mid); color:var(--brand); }
.badge-sent::before    { background:var(--brand); }
.badge-signed  { background:var(--success-bg); color:var(--g700); }
.badge-signed::before  { background:var(--success); }
.badge-paid    { background:var(--success-bg); color:var(--g700); }
.badge-paid::before    { background:var(--success); }
.badge-refused { background:var(--danger-bg); color:var(--r700); }
.badge-refused::before { background:var(--danger); }
.badge-pending { background:var(--warning-bg); color:#92400e; }
.badge-pending::before { background:var(--warning); }
.badge-expired { background:var(--n100); color:var(--n500); }
.badge-expired::before { background:var(--n400); }

/* ── Séparateur ── */
.divider { height:1px; background:var(--border); margin:var(--s5) 0; }

/* ── Empty state ── */
.empty { display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:var(--s7) var(--s4); text-align:center; }
.empty-icon { font-size:36px; margin-bottom:var(--s3); opacity:.35; }
.empty-t { font-size:var(--text-md); font-weight:var(--fw-semibold); color:var(--text-secondary); }
.empty-s { font-size:var(--text-sm); margin-top:var(--s2); color:var(--text-tertiary); }