/* =============================================================================
   public/zebdev-ui-tokens.css — Design System tokens zebdev
   v1.69.15 — Extrait de la norme issue du module CRM (polish Maxime mai 2026).
   À charger AVANT tous les CSS modules dans app.html.
   Source de vérité : mémoire project_zebdev_design_system_crm_norm.md
   ============================================================================= */

:root {
  /* ============ Couleurs — dark (par défaut) ============ */
  --zd-bg-shell:        #1a1c28;   /* fond shell module */
  --zd-bg-col:          #13141f;   /* fond colonne kanban */
  --zd-bg-card:         #272a3a;   /* fond card / input / btn-ghost */
  --zd-bg-card-hover:   #23263a;   /* hover card */
  --zd-bg-panel:        #0f1019;   /* fond panel détail body */
  --zd-bg-elev:         #1a1d2e;   /* fond éléments élevés */
  --zd-bg-active:       #1a1d2e;   /* btn enfoncé / state pressed */
  --zd-bg-hover-subtle: #2d3144;   /* hover boutons segmented */

  --zd-divider:         #3a3e4f;
  --zd-divider-soft:    #272a3a;
  --zd-divider-strong:  #4a4e63;

  --zd-text-strong:     #ffffff;
  --zd-text:            #e8e9f0;
  --zd-text-muted:      #8b8ea5;
  --zd-text-dim:        #6a6d85;
  --zd-text-faint:      #4a4d65;

  --zd-accent:          #f04d12;   /* orange zebdev (focus, border active) */
  --zd-accent-soft:     rgba(240, 77, 18, 0.12);
  --zd-accent-glow:     rgba(240, 77, 18, 0.30);

  --zd-primary:         #22c55e;   /* green success/CTA */
  --zd-primary-hover:   #16a34a;
  --zd-primary-glow:    rgba(34, 197, 94, 0.25);

  --zd-info:            #4f7cff;
  --zd-info-soft:       rgba(79, 124, 255, 0.15);

  --zd-warning:         #fbbf24;
  --zd-warning-soft:    rgba(251, 191, 36, 0.15);

  --zd-danger:          #f87171;
  --zd-danger-bg:       #2e1212;
  --zd-danger-soft:     rgba(248, 113, 113, 0.15);

  /* ============ Hauteurs / sizes ============ */
  --zd-size-control:    32px;      /* boutons, chips, selects, search */
  --zd-size-control-lg: 40px;      /* boutons primaires larges */
  --zd-size-col-header: 56px;      /* hauteur header colonne Kanban */
  --zd-size-topbar:     56px;      /* hauteur topbar globale zebdev */
  --zd-size-icon-sm:    12px;
  --zd-size-icon:       16px;
  --zd-size-icon-lg:    20px;
  --zd-size-avatar:     24px;
  --zd-size-avatar-lg:  36px;

  /* ============ Radius ============ */
  --zd-radius-sm:       4px;
  --zd-radius-md:       6px;        /* boutons, chips, selects, search */
  --zd-radius-lg:       8px;        /* cards, panels, col-header */
  --zd-radius-xl:       12px;       /* modales, dropdowns */

  /* ============ Spacing ============ */
  --zd-gap-xs:          4px;
  --zd-gap-sm:          6px;
  --zd-gap-md:          8px;
  --zd-gap-lg:          12px;
  --zd-gap-xl:          16px;
  --zd-gap-2xl:         20px;

  /* ============ Padding standards ============ */
  --zd-pad-btn-x:       11px;       /* horizontal padding boutons standard */
  --zd-pad-btn-lg-x:    14px;       /* boutons larges (primary, pipeline trigger) */
  --zd-pad-chip-x:      10px;       /* horizontal padding chips */
  --zd-pad-subnav:      10px 20px;
  --zd-pad-card:        14px;
  --zd-pad-panel-header: 16px 20px;

  /* ============ Typography ============ */
  --zd-font:      'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --zd-font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', Consolas, monospace;
  --zd-fs-xs:     11px;
  --zd-fs-sm:     12px;
  --zd-fs-base:   13px;
  --zd-fs-md:     14px;
  --zd-fs-lg:     16px;
  --zd-fs-xl:     18px;
  --zd-fs-2xl:    22px;
  --zd-fw-medium: 500;
  --zd-fw-semibold: 600;
  --zd-fw-bold:    700;
  --zd-letter-tight: -0.01em;
  --zd-letter-tighter: -0.02em;

  /* ============ Z-index ============ */
  --zd-z-base:    1;
  --zd-z-elev:    2;
  --zd-z-sticky:  100;
  --zd-z-dropdown: 1000;
  --zd-z-panel:   8000;             /* slide-in détail */
  --zd-z-modal:   9000;             /* modales */
  --zd-z-toast:   9999;
  --zd-z-tooltip: 10000;

  /* ============ Shadows ============ */
  --zd-shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.4);
  --zd-shadow-md:    0 4px 8px -2px rgba(0, 0, 0, 0.45);
  --zd-shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.5);
  --zd-shadow-panel: -8px 0 24px rgba(0, 0, 0, 0.5);
  --zd-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.3);

  /* ============ Transitions ============ */
  --zd-transition-fast:   0.1s ease;
  --zd-transition:        0.15s ease;
  --zd-transition-slow:   0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============ Couleurs — light (Light Pipedrive) ============
   Marker DOM `body.theme-pd-active` posé par app-crm-theme-pd.js.
   Toutes les variables --zd-* sont redéfinies. Les composants .zd-*
   héritent automatiquement (cf zebdev-ui-components.css). */
body.theme-pd-active {
  --zd-bg-shell:        #f5f7fa;
  --zd-bg-col:          #eef2f6;
  --zd-bg-card:         #ffffff;
  --zd-bg-card-hover:   #f0f3f7;
  --zd-bg-panel:        #ffffff;
  --zd-bg-elev:         #ffffff;
  --zd-bg-active:       #e7eef9;
  --zd-bg-hover-subtle: #f0f3f7;

  --zd-divider:         #e6e9ef;
  --zd-divider-soft:    #f0f3f7;
  --zd-divider-strong:  #d2d6dc;

  --zd-text-strong:     #1f2733;
  --zd-text:            #1f2733;
  --zd-text-muted:      #6b7785;
  --zd-text-dim:        #9aa3b0;
  --zd-text-faint:      #d2d6dc;

  /* En light on bascule l'accent zebdev orange vers navy PD pour cohérence
     visuelle avec Pipedrive natif (cf demande Maxime mai 2026 "Light PD officiel"). */
  --zd-accent:          #1c1c4d;
  --zd-accent-soft:     rgba(28, 28, 77, 0.10);
  --zd-accent-glow:     rgba(28, 28, 77, 0.25);

  --zd-primary:         #00b388;
  --zd-primary-hover:   #009a75;
  --zd-primary-glow:    rgba(0, 179, 136, 0.20);

  --zd-info:            #2c6dff;
  --zd-info-soft:       #e7eef9;

  --zd-warning:         #f5b500;
  --zd-warning-soft:    #fdf4dd;

  --zd-danger:          #e74545;
  --zd-danger-bg:       #fbeaea;
  --zd-danger-soft:     rgba(231, 69, 69, 0.10);

  --zd-shadow-sm:       0 1px 2px rgba(15, 23, 42, 0.06);
  --zd-shadow-md:       0 4px 8px -2px rgba(15, 23, 42, 0.12);
  --zd-shadow-lg:       0 16px 40px rgba(15, 23, 42, 0.16);
  --zd-shadow-panel:    -16px 0 40px rgba(15, 23, 42, 0.12);
  --zd-shadow-card-hover: 0 4px 12px rgba(15, 23, 42, 0.08);
}

/* =============================================================================
   Utilities DS — issues de l'audit F-AUDIT-19 (2026-05-20)
   Objectif : remplacer progressivement ~2811 attributs style="…" répétés
   dans 40 fichiers (audit AUDIT_CODE_2026-05-20.md).

   Conventions :
   - Toutes ces classes utilisent les tokens --zd-* existants → bascule
     automatique dark / light (.theme-pd-active) sans surcharge.
   - Pas de !important : ces utilities ne doivent jamais lutter contre
     un composant spécifique (zd-btn, zd-card existant, etc.).
   - Suffixes numériques = pixels (zd-gap-12 = gap:12px) pour faciliter
     le grep et éviter la confusion avec les tokens --zd-gap-* (xs/sm/md…).

   ⚠️ .zd-card, .zd-empty / .zd-empty-icon / .zd-empty-title / .zd-empty-hint
   sont définis dans zebdev-ui-components.css → NE PAS redéfinir ici.
   ============================================================================= */

/* ─── Layout flex ─── */
.zd-flex-row      { display: flex; align-items: center; gap: var(--zd-gap-md); }
.zd-flex-row-12   { display: flex; align-items: center; gap: var(--zd-gap-lg); }
.zd-flex-row-16   { display: flex; align-items: center; gap: var(--zd-gap-xl); }
.zd-flex-col      { display: flex; flex-direction: column; gap: var(--zd-gap-md); }
.zd-flex-col-12   { display: flex; flex-direction: column; gap: var(--zd-gap-lg); }
.zd-flex-between  { display: flex; align-items: center; justify-content: space-between; gap: var(--zd-gap-md); }
.zd-flex-wrap     { display: flex; flex-wrap: wrap; gap: var(--zd-gap-md); }
.zd-flex-center   { display: flex; align-items: center; justify-content: center; }
.zd-flex-end      { display: flex; align-items: center; justify-content: flex-end; gap: var(--zd-gap-md); }
.zd-flex-grow     { flex: 1 1 auto; min-width: 0; }
.zd-flex-shrink-0 { flex-shrink: 0; }

/* ─── Surfaces complémentaires de .zd-card (déjà défini dans components.css) ─── */
/* .zd-card-sm et .zd-card-lg = variantes padding/radius par-dessus .zd-card */
.zd-card-sm       { padding: 10px; border-radius: var(--zd-radius-md); }
.zd-card-lg       { padding: var(--zd-gap-2xl); border-radius: var(--zd-radius-xl); }

/* .zd-surface = surface plate (pas de hover), pour panneaux/sections internes */
.zd-surface {
  background: var(--zd-bg-elev);
  border: 1px solid var(--zd-divider);
  border-radius: var(--zd-radius-lg);
  padding: var(--zd-pad-card);
}
.zd-surface-flat {
  background: var(--zd-bg-elev);
  border-radius: var(--zd-radius-lg);
  padding: var(--zd-pad-card);
}

/* ─── Empty state plein écran type 403 / Aucun résultat (complément à .zd-empty) ─── */
/* .zd-empty existe déjà — variante centrée carte pour 403/erreurs */
.zd-empty-card {
  max-width: 520px;
  margin: 80px auto;
  padding: 32px;
  background: var(--zd-bg-card);
  border: 1px solid var(--zd-divider);
  border-radius: var(--zd-radius-xl);
  text-align: center;
  color: var(--zd-text-dim);
}
.zd-empty-card .zd-empty-card-icon  { font-size: 48px; margin-bottom: var(--zd-gap-xl); opacity: 0.7; }
.zd-empty-card .zd-empty-card-title { font-size: var(--zd-fs-lg); font-weight: var(--zd-fw-semibold); margin-bottom: var(--zd-gap-md); color: var(--zd-text-strong); }
.zd-empty-card .zd-empty-card-msg   { font-size: var(--zd-fs-md); line-height: 1.5; color: var(--zd-text-muted); }

/* ─── Modal overlay générique ─── */
/* Utilise --zd-z-modal (9000) et non z-index:9999 brut — cohérence avec l'échelle DS. */
.zd-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: var(--zd-z-modal);
  display: flex; align-items: center; justify-content: center;
  padding: var(--zd-gap-2xl);
}
.zd-modal-content {
  background: var(--zd-bg-card);
  border: 1px solid var(--zd-divider);
  border-radius: var(--zd-radius-xl);
  padding: 24px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  color: var(--zd-text);
  box-shadow: var(--zd-shadow-lg);
}
.zd-modal-content-sm { max-width: 420px; }
.zd-modal-content-lg { max-width: 860px; }

/* En light, l'overlay est moins opaque (cohérent avec PD) */
body.theme-pd-active .zd-modal-overlay { background: rgba(15, 23, 42, 0.45); }

/* ─── Typographie ─── */
.zd-text-sys      { font-family: var(--zd-font); }
.zd-text-mono     { font-family: var(--zd-font-mono); }
.zd-text-strong   { font-weight: var(--zd-fw-semibold); color: var(--zd-text-strong); }
.zd-text-muted    { color: var(--zd-text-muted); }
.zd-text-dim      { color: var(--zd-text-dim); }
.zd-text-faint    { color: var(--zd-text-faint); }
.zd-text-accent   { color: var(--zd-accent); }
.zd-text-primary  { color: var(--zd-primary); }
.zd-text-danger   { color: var(--zd-danger); }
.zd-text-info     { color: var(--zd-info); }
.zd-text-warning  { color: var(--zd-warning); }
.zd-text-xs       { font-size: var(--zd-fs-xs); }
.zd-text-sm       { font-size: var(--zd-fs-sm); }
.zd-text-base     { font-size: var(--zd-fs-base); }
.zd-text-md       { font-size: var(--zd-fs-md); }
.zd-text-lg       { font-size: var(--zd-fs-lg); }
.zd-text-xl       { font-size: var(--zd-fs-xl); }
.zd-text-center   { text-align: center; }
.zd-text-right    { text-align: right; }
.zd-text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ─── Spacing — margin top/bottom + padding rapides ─── */
.zd-mb-4  { margin-bottom: var(--zd-gap-xs); }
.zd-mb-6  { margin-bottom: var(--zd-gap-sm); }
.zd-mb-8  { margin-bottom: var(--zd-gap-md); }
.zd-mb-12 { margin-bottom: var(--zd-gap-lg); }
.zd-mb-16 { margin-bottom: var(--zd-gap-xl); }
.zd-mb-20 { margin-bottom: var(--zd-gap-2xl); }
.zd-mb-24 { margin-bottom: 24px; }
.zd-mt-4  { margin-top: var(--zd-gap-xs); }
.zd-mt-6  { margin-top: var(--zd-gap-sm); }
.zd-mt-8  { margin-top: var(--zd-gap-md); }
.zd-mt-12 { margin-top: var(--zd-gap-lg); }
.zd-mt-16 { margin-top: var(--zd-gap-xl); }
.zd-mt-20 { margin-top: var(--zd-gap-2xl); }
.zd-mt-24 { margin-top: 24px; }
.zd-p-8   { padding: var(--zd-gap-md); }
.zd-p-12  { padding: var(--zd-gap-lg); }
.zd-p-16  { padding: var(--zd-gap-xl); }
.zd-p-20  { padding: var(--zd-gap-2xl); }

/* ─── Display / visibility ─── */
.zd-hidden       { display: none !important; }
.zd-invisible    { visibility: hidden; }
.zd-inline-block { display: inline-block; }
.zd-block        { display: block; }

/* ─── Dividers visuels ─── */
.zd-divider-h {
  border: 0;
  border-top: 1px solid var(--zd-divider);
  margin: var(--zd-gap-lg) 0;
}
.zd-divider-v {
  width: 1px;
  align-self: stretch;
  background: var(--zd-divider);
  margin: 0 var(--zd-gap-md);
}