/* =====================================================
   STRATO-APP — AURA COMMAND LAYER THEME
   CSS-only overlay — loads LAST, overrides via specificity
   No Python/logic/template changes
   ===================================================== */

/* ═══════════════════════════════════════════════════════════════
   PHASE 4 — Glass Unified (calibre macOS Sequoia liquid glass)
   Tokens orbes bleus identiques light + dark.
   Anciennes valeurs glass conservees en commentaires pour rollback.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Phase 4 : 3 orbes bleus fixes, INDEPENDANTS des themes accent
     ([data-color-theme] dans style.css redefinit --orb-1/2/3 mais
     pas --glass-orb-1/2/3) */
  --glass-orb-1: #4F8FE8;  /* bleu medium */
  --glass-orb-2: #6BA3F0;  /* bleu clair */
  --glass-orb-3: #3B82F6;  /* bleu vif */
}

:root, [data-theme="dark"] {
  /* -- Fond -- */
  /* Phase 4 : --body-bg passe en gradient liquid glass (3 stops bleu nuit)
     Rollback (pre Phase 4) : --body-bg: #111317;
     v1 : linear-gradient(135deg, #0E1420 0%, #1A2030 50%, #161E2E 100%);
     v2 : linear-gradient(135deg, #0A0F1A 0%, #1B2438 50%, #0E1620 100%);
     v3 (actuel) : effet "nuit bleutee" macOS plus marque, bleu central #1F2D52
     ressort davantage. */
  --body-bg: linear-gradient(135deg, #0A1525 0%, #1F2D52 50%, #0D1830 100%);
  --card-bg: rgba(26, 29, 36, 0.85);
  --card-bg-solid: #1a1d24;
  --surface-1: rgba(255, 255, 255, 0.03);
  --surface-2: rgba(255, 255, 255, 0.06);
  --surface-hover: rgba(255, 255, 255, 0.08);

  /* -- Bordures glassmorphism — alpha bas pour contour subtil -- */
  --card-border: rgba(255, 255, 255, 0.04);
  --card-border-hover: rgba(255, 255, 255, 0.08);
  --glow-border: rgba(var(--acc-rgb), 0.15);

  /* -- Texte -- */
  --text-primary: #f0f0f0;
  --text-secondary: #9ca3af;
  --text-tertiary: #9ca3af;

  /* -- Accents (inherits from style.css --acc system) -- */
  --accent-hover: var(--accl);
  --accent-glow: rgba(var(--acc-rgb), 0.25);
  --accent-deep: var(--accd);

  --gradient-primary: linear-gradient(135deg, var(--acc), var(--info, #06B6D4));
  --gradient-warm: linear-gradient(135deg, #F59E0B, #EF4444);
  --gradient-cool: linear-gradient(135deg, #3B82F6, var(--acc));
  --gradient-success: linear-gradient(135deg, #10B981, #06B6D4);
  --gradient-card: linear-gradient(135deg, rgba(var(--acc-rgb), 0.08), rgba(6, 182, 212, 0.05));

  /* -- Couleurs semantiques -- */
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --info: #06B6D4;

  /* -- Glassmorphism — Phase 4 calibre macOS Sequoia liquid glass --
     Rollback (pre Phase 4) :
       --glass-bg: rgba(26, 29, 36, 0.85);
       --glass-blur: blur(20px);
       --glass-border: 1px solid rgba(255, 255, 255, 0.08);
     v1 : alpha 0.55 ; v2 : alpha 0.45 ; v3 : alpha 0.35 (transparence max)
     v4 : teinte bleu marine au lieu de noir pur (#1F2D52 base body central)
          pour rendu "moins noir" → cards bleutees coherentes avec le wallpaper
          gradient bleu nuit. */
  --glass-bg: rgba(35, 55, 95, 0.35);
  --glass-bg-strong: rgba(45, 65, 110, 0.75);
  --glass-bg-soft: rgba(35, 55, 95, 0.25);
  --glass-blur: blur(30px);
  --glass-border: 1px solid rgba(255, 255, 255, 0.04);
  --glass-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
  --glass-shadow-strong: 0 12px 60px rgba(0, 0, 0, 0.5);

  /* -- Ombres -- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 6px 64px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 30px rgba(var(--acc-rgb), 0.15);
  --shadow-glow-hover: 0 0 40px rgba(var(--acc-rgb), 0.25);

  /* -- Rayons -- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-pill: 100px;

  /* -- Transitions -- */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* -- Light mode — Phase 4 Glass Unified (gradient bleu pale) --
   Ancien (rollback Phase 4) :
     --body-bg: #EAE6E1;
     --glass-bg: rgba(240, 237, 234, 0.85);
*/
[data-theme="light"] {
  /* Phase 4 light --body-bg :
     v1 : #F0F4FA -> #E8EFFB -> #DCE6F5 (trop pale)
     v2 (actuel) : un peu plus sature, contraste bleu plus net */
  --body-bg: linear-gradient(135deg, #E8F0FB 0%, #DCE7F8 50%, #C9D9F0 100%);
  --card-bg: rgba(243, 240, 237, 0.85);
  --card-bg-solid: #F3F0ED;
  --surface-1: rgba(0, 0, 0, 0.02);
  --surface-2: rgba(0, 0, 0, 0.04);
  --surface-hover: rgba(0, 0, 0, 0.05);
  --card-border: rgba(15, 23, 42, 0.05);
  --card-border-hover: rgba(15, 23, 42, 0.10);
  --text-primary: #3D3427;
  --text-secondary: #7A6F60;
  --text-tertiary: #A89B8A;
  /* Phase 4 : glass tokens light
     v1 : alpha 0.55 ; v2 : alpha 0.45 ; v3 : alpha 0.35 (transparence max)
     v4 : teinte bleu pale au lieu de blanc pur (#DCE7F8 base body central)
          pour rendu "moins blanc" → cards bleutees coherentes avec le wallpaper. */
  --glass-bg: rgba(220, 232, 248, 0.45);
  --glass-bg-strong: rgba(230, 240, 252, 0.75);
  --glass-bg-soft: rgba(220, 232, 248, 0.30);
  /* Light : bord foncé subtil au lieu d'un blanc 0.6 très visible */
  --glass-border: 1px solid rgba(15, 23, 42, 0.06);
  --glass-shadow: 0 8px 40px rgba(0, 0, 0, 0.06);
  --glass-shadow-strong: 0 12px 60px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 1px 4px rgba(180, 170, 158, 0.1);
  --shadow-md: 0 4px 16px rgba(180, 170, 158, 0.12);
  --shadow-lg: 0 16px 48px rgba(180, 170, 158, 0.15);

  --bg: #EAE6E1;
  --bg2: #F0EDEA;
  --card: #F3F0ED;
  --card2: #EDEAE6;
  --inp: #E8E4DF;
  --elev: #F0EDEA;
  --bg-primary: #EAE6E1;
  --bg-secondary: #F0EDEA;
  --bg-card: #F3F0ED;
  --bg-card-hover: #EDEAE6;
  --bg-elevated: #F0EDEA;
  --bg-sidebar: #F0EDEA;

  --t1: #3D3427;
  --t2: #7A6F60;
  --t3: #A89B8A;
  --t4: #C8BFB2;

  --brd: rgba(180, 170, 158, 0.15);
  --brd2: rgba(180, 170, 158, 0.22);

  --modal-overlay-bg: rgba(30, 25, 18, 0.25);
  --tooltip-bg: rgba(61, 52, 39, 0.92);
  --tooltip-text: #F0EDEA;
}


/* =====================================================
   GLOBAL
   ===================================================== */
body {
  /* Phase 4 : --body-bg est maintenant un linear-gradient.
     Ancien : background-color: var(--body-bg) !important; (rollback Phase 4) */
  background: var(--body-bg) !important;
  background-attachment: fixed;
  color: var(--text-primary) !important;
  -webkit-font-smoothing: antialiased;
}

/* Background mesh gradient subtil — désactivé si wallpaper */
body:not(.has-bg-image)::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background:
    radial-gradient(ellipse at 20% 50%, var(--mesh-color-1, rgba(var(--acc-rgb), 0.06)) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(6, 182, 212, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(245, 158, 11, 0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}
[data-theme="light"] body:not(.has-bg-image)::before {
  background: none !important;
}

/* App shell background */
body:not(.has-bg-image):has(.app-container) {
  background-color: #111317 !important;
}
body:not(.has-bg-image):has(.app-container)::after {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(99,102,241,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(139,92,246,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 80%, rgba(246,174,45,0.03) 0%, transparent 50%);
}
[data-theme="light"] body:not(.has-bg-image):has(.app-container) {
  background-color: #EFE9DE !important;
}
[data-theme="light"] body:not(.has-bg-image):has(.app-container)::after {
  background: none !important;
}

/* App container — TRANSPARENT for glassmorphism */
.app-container {
  background: transparent !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
}
[data-theme="light"] .app-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}


/* =====================================================
   SIDEBAR
   ===================================================== */
.sidebar {
  background: rgba(13, 15, 20, 0.28) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-right: none !important;
}
[data-theme="light"] .sidebar {
  background: rgba(245, 243, 240, 0.32) !important;
  backdrop-filter: blur(14px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
  border-right: none !important;
}


/* =====================================================
   CARDS / KPIs
   ===================================================== */
[data-theme="dark"] .card, [data-theme="dark"] .kpi-card,
[data-theme="dark"] .kpi, [data-theme="dark"] .card-strato,
[data-theme="dark"] .chart-card, [data-theme="dark"] .chart-card-new,
[data-theme="dark"] .pd-kpi, [data-theme="dark"] .pd-client-infos {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}
/* Phase 4 Glass Unified : .stat-card dark
   Ancien : background var(--card-bg), blur 12px, border var(--card-border) */
[data-theme="dark"] .stat-card {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
  transition: all var(--transition-normal) !important;
}
.card, .kpi-card, .kpi, .card-strato, .chart-card, .chart-card-new,
.stat-card, .nf-card {
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius-lg) !important;
  transition: transform 0.85s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 0.85s cubic-bezier(0.33, 1, 0.68, 1), background 0.7s cubic-bezier(0.33, 1, 0.68, 1), border-color 0.7s cubic-bezier(0.33, 1, 0.68, 1) !important;
}
.card:hover, .kpi-card:hover, .kpi:hover, .card-strato:hover,
.chart-card:hover, .chart-card-new:hover,
.stat-card:hover {
  border-color: var(--card-border);
}
/* Light mode cards — Phase 4 Glass Unified
   Ancien (rollback Phase 4) :
     background: transparent; blur(0.5px); border rgba(70,60,120,0.12); shadow rgba(70,60,120,0.10) */
html[data-theme="light"] .card,
html[data-theme="light"] .kpi-card,
html[data-theme="light"] .kpi,
html[data-theme="light"] .card-strato,
html[data-theme="light"] .chart-card,
html[data-theme="light"] .chart-card-new,
html[data-theme="light"] .stat-card {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}
/* Sous-sections (pd-*) restent flat à l'intérieur des cards */
html[data-theme="light"] .pd-kpi,
html[data-theme="light"] .pd-client-infos,
html[data-theme="light"] .pd-section,
html[data-theme="light"] .pd-factures-section,
html[data-theme="light"] .pd-devis-section,
html[data-theme="light"] .pd-timeline-section,
html[data-theme="light"] .tl-ev,
html[data-theme="light"] .pd-tl-event {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: var(--card-border) !important;
  box-shadow: none !important;
}
/* Hover lift géré dans auraos.css — pas d'override transform ici */

/* Light mode — keep subtle borders on main cards */
html[data-theme="light"] .card,
html[data-theme="light"] .kpi-card,
html[data-theme="light"] .kpi,
html[data-theme="light"] .card-strato,
html[data-theme="light"] .chart-card,
html[data-theme="light"] .chart-card-new,
html[data-theme="light"] .stat-card {
  border: 1px solid rgba(0,0,0,0.10) !important;
}
/* Inner pd-kpi and pd-client-infos: flat in both modes */
html[data-theme="light"] .pd-kpi,
html[data-theme="light"] .pd-client-infos {
  border: none !important;
}
/* Remove pd-kpis grid border */
.pd-kpis {
  border: none !important;
}
.pd-kpi {
  border-right: 1px solid rgba(255,255,255,0.06) !important;
}
.pd-kpi:last-child { border-right: none !important; }
html[data-theme="light"] .pd-kpi {
  border-right: 1px solid rgba(0,0,0,0.06) !important;
}

/* fl-panel light : Phase 4 Glass Unified
   Ancien : background: var(--card, #fff) !important; (beige opaque)
   Phase 4 : pointe sur var(--glass-bg) pour transparence forte (alpha 0.55) */
html[data-theme="light"] .fl-panel {
  border: var(--glass-border) !important;
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
}

/* Remove content-frame border in light mode */
html[data-theme="light"] .content-frame {
  border: none !important;
}

/* Remove sidebar right border in light mode */
html[data-theme="light"] .sidebar {
  border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
}


/* =====================================================
   BOUTONS
   ===================================================== */

/* -- Bouton Principal (gradient violet->cyan) -- */
/* ── Primary buttons — neumorphic pill ── */
.btn-primary, .btn-save, .btn-strato, .btn-primary-strato,
.pd-btn-facture, .btn-facture, .fnp-btn-create,
.pm-btn-create, .dm-btn-apply,
[class*="btn-accent"] {
  border: none !important;
  border-radius: 50px !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Dark — gradient + deep shadows */
[data-theme="dark"] .btn-primary, [data-theme="dark"] .btn-save,
[data-theme="dark"] .btn-strato, [data-theme="dark"] .btn-primary-strato,
[data-theme="dark"] .pd-btn-facture, [data-theme="dark"] .fnp-btn-create,
[data-theme="dark"] .pm-btn-create, [data-theme="dark"] .dm-btn-apply {
  background: #1e1e2a !important;
  color: #e0ddd8 !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  box-shadow:
    4px 4px 8px rgba(0,0,0,0.5),
    -2px -2px 6px rgba(255,255,255,0.03),
    inset 0 1px 1px rgba(255,255,255,0.05),
    inset 0 -1px 2px rgba(0,0,0,0.3) !important;
}
/* Light — beige cream + soft shadows */
[data-theme="light"] .btn-primary, [data-theme="light"] .btn-save,
[data-theme="light"] .btn-strato, [data-theme="light"] .btn-primary-strato,
[data-theme="light"] .pd-btn-facture, [data-theme="light"] .fnp-btn-create,
[data-theme="light"] .pm-btn-create, [data-theme="light"] .dm-btn-apply {
  background: #F3F0ED !important;
  color: #3D3427 !important;
  box-shadow:
    4px 4px 8px rgba(180,170,158,0.2),
    -3px -3px 6px rgba(255,255,255,0.7),
    inset 0 1px 1px rgba(255,255,255,0.5) !important;
}
.btn-primary:hover, .btn-save:hover, .btn-strato:hover, .btn-primary-strato:hover,
.pd-btn-facture:hover, .fnp-btn-create:hover,
.pm-btn-create:hover, .dm-btn-apply:hover {
  transform: none !important;
  filter: brightness(1.05) !important;
}
[data-theme="dark"] .btn-primary:hover, [data-theme="dark"] .btn-strato:hover,
[data-theme="dark"] .btn-primary-strato:hover {
  box-shadow:
    2px 2px 4px rgba(0,0,0,0.4),
    -1px -1px 3px rgba(255,255,255,0.04),
    inset 0 1px 2px rgba(255,255,255,0.06),
    inset 0 -1px 3px rgba(0,0,0,0.4) !important;
}
[data-theme="light"] .btn-primary:hover, [data-theme="light"] .btn-strato:hover,
[data-theme="light"] .btn-primary-strato:hover {
  box-shadow:
    2px 2px 5px rgba(166,152,132,0.3),
    -2px -2px 4px rgba(255,255,255,0.9),
    inset 0 1px 1px rgba(255,255,255,0.7) !important;
}
.btn-primary:active, .btn-save:active, .btn-strato:active,
.pd-btn-facture:active, .fnp-btn-create:active {
  transform: none !important;
  filter: brightness(0.95) !important;
}
[data-theme="dark"] .btn-primary:active, [data-theme="dark"] .btn-strato:active {
  box-shadow:
    inset 3px 3px 6px rgba(0,0,0,0.6),
    inset -2px -2px 4px rgba(255,255,255,0.03) !important;
}
[data-theme="light"] .btn-primary:active, [data-theme="light"] .btn-strato:active {
  box-shadow:
    inset 2px 2px 5px rgba(166,152,132,0.3),
    inset -2px -2px 4px rgba(255,255,255,0.5) !important;
}

/* Shimmer au hover */
.btn-primary::before, .btn-save::before, .btn-strato::before,
.btn-primary-strato::before,
.pd-btn-facture::before, .fnp-btn-create::before,
.pm-btn-create::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: -100% !important;
  width: 100% !important; height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important;
  transition: left 0.6s ease !important;
}
.btn-primary:hover::before, .btn-save:hover::before, .btn-strato:hover::before,
.btn-primary-strato:hover::before,
.pd-btn-facture:hover::before, .fnp-btn-create:hover::before,
.pm-btn-create:hover::before {
  left: 100% !important;
}

/* -- Bouton Secondary (glass outline) -- */
/* ── Secondary buttons — neumorphic pill ── */
.btn-secondary, .btn-outline, .btn-secondary-strato,
.btn-action, .btn-pdf, .btn-excel, .btn-envoyer,
.btn-icon-text {
  border-radius: 50px !important;
  color: var(--text-primary) !important;
}
/* ──── Phase 4 Glass Unified : neumorphic boutons DESACTIVES (badge-statut pattern)
   Reactivable en virant les commentaires si rendu trop "plat".
   Ancien : pill 50px + multi-layer neumorphic shadows + bg solides.
   Nouveau : pattern .status-badge-btn (radius 3px + alpha 0.10 + couleur pleine)
   Definitions principales dans redesign.css.btn-* + style.css.btn-*-strato */ /*
[data-theme="dark"] .btn-secondary, [data-theme="dark"] .btn-outline,
[data-theme="dark"] .btn-secondary-strato,
[data-theme="dark"] .btn-action, [data-theme="dark"] .btn-pdf,
[data-theme="dark"] .btn-excel, [data-theme="dark"] .btn-envoyer {
  background: #1e1e2a !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow:
    4px 4px 8px rgba(0,0,0,0.5),
    -2px -2px 6px rgba(255,255,255,0.03),
    inset 0 1px 1px rgba(255,255,255,0.05),
    inset 0 -1px 2px rgba(0,0,0,0.3) !important;
}
[data-theme="light"] .btn-secondary, [data-theme="light"] .btn-outline,
[data-theme="light"] .btn-secondary-strato,
[data-theme="light"] .btn-action, [data-theme="light"] .btn-pdf,
[data-theme="light"] .btn-excel, [data-theme="light"] .btn-envoyer {
  background: var(--card) !important;
  border: none !important;
  box-shadow:
    4px 4px 8px rgba(166,152,132,0.25),
    -3px -3px 6px rgba(255,255,255,0.8),
    inset 0 1px 1px rgba(255,255,255,0.6) !important;
}
.btn-secondary:hover, .btn-outline:hover, .btn-secondary-strato:hover,
.btn-action:hover, .btn-pdf:hover, .btn-excel:hover, .btn-envoyer:hover {
  transform: none !important;
}
[data-theme="dark"] .btn-secondary:hover, [data-theme="dark"] .btn-secondary-strato:hover {
  box-shadow:
    2px 2px 4px rgba(0,0,0,0.4),
    -1px -1px 3px rgba(255,255,255,0.04),
    inset 0 1px 2px rgba(255,255,255,0.06),
    inset 0 -1px 3px rgba(0,0,0,0.4) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
[data-theme="light"] .btn-secondary:hover, [data-theme="light"] .btn-secondary-strato:hover {
  box-shadow:
    2px 2px 5px rgba(166,152,132,0.3),
    -2px -2px 4px rgba(255,255,255,0.9),
    inset 0 1px 1px rgba(255,255,255,0.7) !important;
  color: var(--accent) !important;
}

.btn-danger, .btn-delete, .btn-supprimer {
  background: linear-gradient(135deg, #EF4444, #B91C1C) !important;
  border: none !important;
  border-radius: 50px !important;
  color: #fff !important;
}
[data-theme="dark"] .btn-danger, [data-theme="dark"] .btn-delete, [data-theme="dark"] .btn-supprimer {
  box-shadow:
    4px 4px 8px rgba(0,0,0,0.5),
    -2px -2px 6px rgba(255,255,255,0.03),
    inset 0 1px 1px rgba(255,255,255,0.15) !important;
}
[data-theme="light"] .btn-danger, [data-theme="light"] .btn-delete, [data-theme="light"] .btn-supprimer {
  box-shadow:
    4px 4px 8px rgba(166,152,132,0.25),
    -3px -3px 6px rgba(255,255,255,0.8),
    inset 0 1px 1px rgba(255,255,255,0.2) !important;
}
.btn-danger:hover, .btn-delete:hover, .btn-supprimer:hover {
  transform: none !important;
  filter: brightness(1.05) !important;
}

.btn-success, .btn-facturer-suite {
  background: linear-gradient(135deg, #10B981, #06B6D4) !important;
  border: none !important; border-radius: 50px !important;
  color: #fff !important;
  box-shadow: 4px 4px 8px rgba(0,0,0,0.3), -2px -2px 6px rgba(255,255,255,0.03),
              inset 0 1px 1px rgba(255,255,255,0.15) !important;
}
.btn-success:hover, .btn-facturer-suite:hover {
  transform: none !important; filter: brightness(1.05) !important;
}
*/

/* ──── Phase 4 : autres boutons (.btn-action, .btn-pdf, .btn-excel, .btn-envoyer,
   .btn-success, .btn-facturer-suite, .btn-supprimer) sur pattern badge-statut */
.btn-action, .btn-pdf, .btn-excel, .btn-envoyer {
  background: rgba(148, 163, 184, 0.10) !important;
  color: var(--t2) !important;
  border: 1px solid rgba(148, 163, 184, 0.20) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}
.btn-action:hover, .btn-pdf:hover, .btn-excel:hover, .btn-envoyer:hover {
  background: rgba(148, 163, 184, 0.15) !important;
  border-color: rgba(148, 163, 184, 0.30) !important;
  color: var(--t1) !important;
  filter: brightness(0.95);
}
.btn-supprimer {
  background: rgba(239, 68, 68, 0.10) !important;
  color: #EF4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.20) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}
.btn-supprimer:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.30) !important;
  filter: brightness(0.95);
}
.btn-success, .btn-facturer-suite {
  background: rgba(16, 185, 129, 0.10) !important;
  color: #10B981 !important;
  border: 1px solid rgba(16, 185, 129, 0.20) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}
.btn-success:hover, .btn-facturer-suite:hover {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.30) !important;
  filter: brightness(0.95);
}

/* Phase 4 Glass Unified : pattern badge-statut applique aux boutons specifiques.
   Anciens (rollback Phase 4) : neumorphic pills avec gradients + multi-shadows.
   Nouveau : alpha 0.15-0.18 + couleur pleine + radius 3px + border 1px. */

/* Warning / Edit / Modifier — orange */
.btn-warning, .btn-edit, .btn-modifier {
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.30) !important;
  border-radius: 3px !important;
  color: #F59E0B !important;
  box-shadow: none !important;
}
.btn-warning:hover, .btn-edit:hover, .btn-modifier:hover {
  background: rgba(245, 158, 11, 0.22) !important;
  border-color: rgba(245, 158, 11, 0.40) !important;
  filter: brightness(0.95);
}

/* Convertir — bleu accent */
.btn-convertir {
  background: rgba(var(--acc-rgb), 0.18) !important;
  border: 1px solid rgba(var(--acc-rgb), 0.30) !important;
  border-radius: 3px !important;
  color: var(--acc) !important;
  box-shadow: none !important;
}
.btn-convertir:hover {
  background: rgba(var(--acc-rgb), 0.25) !important;
  border-color: rgba(var(--acc-rgb), 0.40) !important;
  filter: brightness(0.95);
}

/* Annuler — gris neutre */
.btn-cancel, .fnp-btn-cancel, .dm-btn-cancel, .pm-btn-cancel {
  background: rgba(148, 163, 184, 0.10) !important;
  border: 1px solid rgba(148, 163, 184, 0.20) !important;
  border-radius: 3px !important;
  color: var(--t2) !important;
}
.btn-cancel:hover, .fnp-btn-cancel:hover, .dm-btn-cancel:hover {
  background: rgba(148, 163, 184, 0.15) !important;
  border-color: rgba(148, 163, 184, 0.30) !important;
  color: var(--t1) !important;
  filter: brightness(0.95);
}

/* Modal footer Annuler — rouge transparent (pattern danger) */
.modal-footer .btn-secondary-strato {
  background: rgba(248, 113, 113, 0.15) !important;
  color: #F87171 !important;
  border: 1px solid rgba(248, 113, 113, 0.30) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}
.modal-footer .btn-secondary-strato:hover {
  background: rgba(248, 113, 113, 0.22) !important;
  border-color: rgba(248, 113, 113, 0.40) !important;
  filter: brightness(0.95);
  box-shadow: none !important;
}

/* -- Bouton icone rond -- */
.btn-icon, .hd-ic {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid var(--card-border) !important;
  background: var(--glass-bg) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: var(--text-secondary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
.btn-icon:hover, .hd-ic:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  box-shadow: 0 0 15px var(--accent-glow) !important;
  transform: scale(1.05) !important;
}
[data-theme="light"] .btn-icon, [data-theme="light"] .hd-ic {
  background: rgba(255,255,255,0.8) !important;
}

/* -- Effet press global -- */
button:active, .btn:active {
  transform: scale(0.97) !important;
  filter: brightness(0.9) !important;
}


/* =====================================================
   INPUTS
   ===================================================== */
.form-control, .input-field, .input-strato,
.fnp-input, .pm-input {
  background: var(--surface-1) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  transition: all var(--transition-fast) !important;
}
.form-control:focus, .input-field:focus, .input-strato:focus,
.fnp-input:focus, .pm-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-glow), 0 0 20px rgba(var(--acc-rgb), 0.1) !important;
  outline: none !important;
}
[data-theme="light"] .form-control, [data-theme="light"] .input-field,
[data-theme="light"] .input-strato {
  background: rgba(255, 255, 255, 0.6) !important;
}


/* =====================================================
   MODALS -- Glass + glow
   ===================================================== */
.htmx-modal-overlay, .modal-overlay,
.global-modal-overlay, .design-overlay, .project-modal-overlay {
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
[data-theme="light"] .htmx-modal-overlay, [data-theme="light"] .modal-overlay {
  background: rgba(0, 0, 0, 0.15) !important;
}

.htmx-modal-panel, .modal,
.design-modal, .project-modal, .modal-content {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-lg), 0 0 60px rgba(var(--acc-rgb), 0.08) !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Modal top glow line */
.htmx-modal-panel::before, .modal::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 10%, rgba(var(--acc-rgb), 0.4) 50%, transparent 90%) !important;
  z-index: 10 !important;
}
[data-theme="light"] .htmx-modal-panel, [data-theme="light"] .modal {
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: var(--shadow-lg) !important;
}
[data-theme="light"] .htmx-modal-panel::before, [data-theme="light"] .modal::before {
  background: linear-gradient(90deg, transparent 10%, rgba(var(--acc-rgb), 0.2) 50%, transparent 90%) !important;
}


/* =====================================================
   TABLEAUX
   ===================================================== */
.proj-list-row:hover, .pd-facture-row:hover, .pd-devis-row:hover,
tr:hover td {
  background: var(--surface-hover) !important;
}

/* Ligne selectionnee -- glow accent */
.row-sel, .row-active, .pd-facture-row.active, .pd-devis-row.active {
  background: rgba(var(--acc-rgb), 0.06) !important;
}


/* =====================================================
   SEGMENTED CONTROLS / TABS
   ===================================================== */
.segmented-control, .filter-tabs {
  background: var(--surface-1) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid var(--card-border) !important;
}
[data-theme="light"] .segmented-control, [data-theme="light"] .filter-tabs {
  background: rgba(255, 255, 255, 0.5) !important;
}

.seg-tab.active, .filter-tab.active,
.pd-doc-tab.active, .dm-tab.active {
  background: var(--gradient-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px var(--accent-glow) !important;
}


/* =====================================================
   STATUS BADGES -- glow
   ===================================================== */
.status-en-cours {
  box-shadow: 0 0 14px var(--accent-glow) !important;
}
.status-termine, .status-payee {
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.35) !important;
}
.status-impayee, .status-retard {
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.35) !important;
}
.status-brouillon {
  box-shadow: 0 0 14px rgba(var(--acc-rgb), 0.3) !important;
}


/* =====================================================
   TOPBAR -- frosted
   ===================================================== */
.topbar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
  border-bottom: none !important;
}
.topbar.scrolled {
  background: rgba(26,29,36,0.50) !important;
  backdrop-filter: blur(30px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.2) !important;
}
[data-theme="light"] .topbar {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
}
[data-theme="light"] .topbar.scrolled {
  background: rgba(245,243,240,0.50) !important;
  backdrop-filter: blur(30px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.2) !important;
}

.topbar-icon-btn:hover {
  background: transparent !important;
  box-shadow: none !important;
}

.topbar-right .user-badge {
  background: var(--surface-1) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid var(--card-border) !important;
}
.topbar-right .user-badge:hover {
  border-color: rgba(var(--acc-rgb), 0.2) !important;
}


/* =====================================================
   PROGRESS BARS
   ===================================================== */
.pd-avancement-fill, .kp-bf, .pm-progress-fill {
  background: var(--gradient-primary) !important;
}


/* =====================================================
   TIMELINE
   ===================================================== */
.pd-tl-event, .tl-ev {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius-xl) !important;
  transition: all var(--transition-normal) !important;
}
.pd-tl-event:hover, .tl-ev:hover {
  border-color: var(--card-border-hover) !important;
  box-shadow: var(--shadow-glow) !important;
  transform: translateY(-3px) !important;
}
.pd-tl-day-num.today {
  border-color: var(--accent) !important;
  box-shadow: 0 0 12px var(--accent-glow) !important;
}


/* =====================================================
   DOSSIERS -- hover slide
   ===================================================== */
.projet-folder, .dossier-item {
  transition: all var(--transition-fast) !important;
  border-radius: 0 !important;
}
.projet-folder:hover, .dossier-item:hover {
  background: var(--surface-hover) !important;
  transform: translateX(4px) !important;
}
.projet-folder.active, .dossier-item.active {
  background: rgba(var(--acc-rgb), 0.08) !important;
  border-left: 3px solid var(--acc) !important;
  border-radius: 0 !important;
}


/* =====================================================
   DROPDOWN MENUS -- glass
   ===================================================== */
.dropdown-menu, .context-menu {
  background: rgba(14, 16, 24, 0.92) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg), var(--shadow-glow) !important;
}
[data-theme="light"] .dropdown-menu, [data-theme="light"] .context-menu {
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: var(--shadow-lg) !important;
}
/* header-dropdown : paramètres liquid glass alignés sur theme-popover (dans style.css) */
.header-dropdown {
  background: rgba(10, 10, 20, 0.04) !important;
  backdrop-filter: blur(5px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(5px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 28px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important;
}
[data-theme="light"] .header-dropdown {
  background: rgba(245, 243, 240, 0.05) !important;
  border: 1px solid rgba(70,60,120,0.12) !important;
  box-shadow: 0 8px 32px rgba(70,60,120,0.12) !important;
}


/* =====================================================
   SCROLLBAR
   ===================================================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(var(--acc-rgb), 0.2);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--acc-rgb), 0.4);
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}


/* =====================================================
   ANIMATIONS
   ===================================================== */

/* Fade in up */
@keyframes auraFadeInUp {
  from { opacity: 0; transform: translateY(16px); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Content entry — disabled to allow backdrop-filter in dropdowns */

/* Stagger KPIs */
.kpi-g .kpi:nth-child(1), .kpi-g .kpi-card:nth-child(1) { animation: auraFadeInUp 0.5s ease both; animation-delay: 0.05s; }
.kpi-g .kpi:nth-child(2), .kpi-g .kpi-card:nth-child(2) { animation: auraFadeInUp 0.5s ease both; animation-delay: 0.1s; }
.kpi-g .kpi:nth-child(3), .kpi-g .kpi-card:nth-child(3) { animation: auraFadeInUp 0.5s ease both; animation-delay: 0.15s; }
.kpi-g .kpi:nth-child(4), .kpi-g .kpi-card:nth-child(4) { animation: auraFadeInUp 0.5s ease both; animation-delay: 0.2s; }
.kpi-g .kpi:nth-child(5), .kpi-g .kpi-card:nth-child(5) { animation: auraFadeInUp 0.5s ease both; animation-delay: 0.25s; }

/* Panel detail slide in */
@keyframes auraSlideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
.panel-detail {
  animation: auraSlideInRight 0.3s var(--transition-normal) both !important;
}
/* detail-sidebar a sa propre animation via .detail-sidebar.open */

/* KPI values — normal text color, NO gradient (amounts must not change with accent) */
.kpi-value, .kpi-val, .pd-kpi-val, .stat-value {
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  color: var(--t1) !important;
}
/* Colored amounts keep their own color (green, red, orange from inline styles) */
.kpi-val[style*="color"], .pd-kpi-val[style*="color"],
.kpi-trend, .kpi-sub {
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
}

/* Page title gradient */
.page-title, .welcome-title {
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-hover) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
[data-theme="light"] .page-title, [data-theme="light"] .welcome-title {
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-deep) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}


/* =====================================================
   SELECTION
   ===================================================== */
::selection {
  background: rgba(var(--acc-rgb), 0.3);
  color: #fff;
}


/* =====================================================
   SIDEBAR NAV -- active state (dark translucent)
   Le style détaillé est défini plus bas dans le fichier
   ===================================================== */

/* Sidebar divider -- gradient fade */
.sidebar-divider {
  border-top: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--card-border-hover), transparent) !important;
}


/* =====================================================
   TOAST / FLASH -- glass
   ===================================================== */
.toast, .flash-message {
  backdrop-filter: blur(16px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius-lg) !important;
}


/* =====================================================
   ACCENT PICKER (topbar)
   ===================================================== */
.accent-picker-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.accent-picker {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--card-border);
  cursor: pointer;
  padding: 0;
  background: transparent;
  transition: all var(--transition-fast);
}
.accent-picker:hover {
  border-color: var(--text-secondary);
  transform: scale(1.1);
}
.accent-presets {
  display: flex;
  gap: 4px;
  align-items: center;
}
.accent-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  padding: 0;
}
.accent-dot:hover {
  transform: scale(1.3);
  border-color: rgba(255,255,255,0.3);
}


/* =====================================================
   ICON ANIMATIONS (hover micro-interactions)
   ===================================================== */

/* Base: all icons are smoothly transitioned */
.hgi-stroke, .material-symbols-outlined {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.2s ease,
              filter 0.2s ease !important;
  display: inline-block !important;
}

/* Sidebar icons — bounce on hover */
.sidebar-item:hover .hgi-stroke,
.sidebar-item:hover .material-symbols-outlined {
  transform: scale(1.15) !important;
  filter: drop-shadow(0 0 4px var(--accent-glow)) !important;
}

/* Nav group header icons — rotate on toggle */
.nav-group-header:hover > .hgi-stroke:first-child,
.nav-group-header:hover > .material-symbols-outlined:first-child {
  transform: scale(1.1) rotate(-8deg) !important;
}

/* Topbar icons — lift + glow */
.topbar-icon-btn:hover .hgi-stroke,
.topbar-icon-btn:hover .material-symbols-outlined {
  transform: scale(1.12) translateY(-1px) !important;
  filter: drop-shadow(0 0 6px var(--accent-glow)) !important;
}

/* Delete icons — shake on hover */
@keyframes iconShake {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-8deg); }
  40% { transform: rotate(8deg); }
  60% { transform: rotate(-5deg); }
  80% { transform: rotate(5deg); }
}
.btn-danger:hover .hgi-stroke,
.btn-danger:hover .material-symbols-outlined,
.btn-delete:hover .hgi-stroke,
.btn-delete:hover .material-symbols-outlined,
.btn-danger-strato:hover .hgi-stroke,
.btn-danger-strato:hover .material-symbols-outlined,
.cht-btn-danger:hover .hgi-stroke,
.cht-btn-danger:hover .material-symbols-outlined,
.row-action-btn.delete:hover .hgi-stroke,
.task-action-btn:hover .hgi-stroke {
  animation: iconShake 0.4s ease !important;
  color: #FCA5A5 !important;
}

/* Plus/add icons — rotate on hover */
.hgi-plus-sign {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
*:hover > .hgi-plus-sign,
*:hover > * > .hgi-plus-sign {
  transform: rotate(90deg) scale(1.1) !important;
}

/* Settings/gear icon — spin on hover */
.hgi-paint-board, .hgi-settings-02, .hgi-configuration-01 {
  transition: transform 0.4s ease !important;
}
*:hover > .hgi-paint-board,
*:hover > .hgi-settings-02,
*:hover > .hgi-configuration-01 {
  transform: rotate(60deg) !important;
}

/* Arrow/chevron icons — slide */
.hd-item-arrow, .hgi-arrow-right-01 {
  transition: transform 0.2s ease !important;
}
*:hover > .hd-item-arrow {
  transform: translateX(3px) !important;
}

/* Close/cancel icons — rotate on hover */
.hgi-cancel-01 {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
*:hover > .hgi-cancel-01 {
  transform: rotate(90deg) !important;
}

/* Folder/document icons — bounce */
.hgi-folder-open, .hgi-file-02, .hgi-folder-01 {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
*:hover > .hgi-folder-open,
*:hover > .hgi-file-02,
*:hover > .hgi-folder-01 {
  transform: translateY(-2px) scale(1.08) !important;
}

/* Calendar icon — pulse */
.hgi-calendar-add-01, .hgi-calendar-01, .hgi-calendar-03 {
  transition: transform 0.2s ease !important;
}
*:hover > .hgi-calendar-add-01,
*:hover > .hgi-calendar-01,
*:hover > .hgi-calendar-03 {
  transform: scale(1.12) !important;
}

/* Edit icon — tilt */
.hgi-edit-02, .hgi-pencil-edit-02 {
  transition: transform 0.2s ease !important;
}
*:hover > .hgi-edit-02,
*:hover > .hgi-pencil-edit-02 {
  transform: rotate(-12deg) scale(1.08) !important;
}


/* =====================================================
   DETAIL SIDEBAR — Cascade stagger on open
   ===================================================== */

/* Enhanced slide-in with spring */
@keyframes detailSlideIn {
  from {
    opacity: 0;
    transform: translateX(40px);
    filter: blur(6px);
  }
  60% {
    opacity: 1;
    transform: translateX(-4px);
    filter: blur(0);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

.detail-sidebar.open {
  animation: detailSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

/* Children cascade inside detail sidebar */
@keyframes detailChildIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.detail-sidebar.open > * {
  animation: detailChildIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
.detail-sidebar.open > *:nth-child(1) { animation-delay: 0.05s !important; }
.detail-sidebar.open > *:nth-child(2) { animation-delay: 0.10s !important; }
.detail-sidebar.open > *:nth-child(3) { animation-delay: 0.15s !important; }
.detail-sidebar.open > *:nth-child(4) { animation-delay: 0.20s !important; }
.detail-sidebar.open > *:nth-child(5) { animation-delay: 0.25s !important; }
.detail-sidebar.open > *:nth-child(6) { animation-delay: 0.30s !important; }
.detail-sidebar.open > *:nth-child(7) { animation-delay: 0.35s !important; }
.detail-sidebar.open > *:nth-child(8) { animation-delay: 0.40s !important; }
.detail-sidebar.open > *:nth-child(n+9) { animation-delay: 0.45s !important; }

/* Facture/devis detail sections cascade */
.pd-section, .pd-kpi, .pd-client-infos,
.pd-factures-section, .pd-devis-section,
.pd-timeline-section {
  animation: detailChildIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
.pd-section:nth-child(1), .pd-kpi:nth-child(1) { animation-delay: 0.06s !important; }
.pd-section:nth-child(2), .pd-kpi:nth-child(2) { animation-delay: 0.12s !important; }
.pd-section:nth-child(3), .pd-kpi:nth-child(3) { animation-delay: 0.18s !important; }
.pd-section:nth-child(4), .pd-kpi:nth-child(4) { animation-delay: 0.24s !important; }
.pd-section:nth-child(5), .pd-kpi:nth-child(5) { animation-delay: 0.30s !important; }

/* Table rows stagger inside detail */
.pd-facture-row, .pd-devis-row {
  animation: detailChildIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
.pd-facture-row:nth-child(1), .pd-devis-row:nth-child(1) { animation-delay: 0.08s !important; }
.pd-facture-row:nth-child(2), .pd-devis-row:nth-child(2) { animation-delay: 0.13s !important; }
.pd-facture-row:nth-child(3), .pd-devis-row:nth-child(3) { animation-delay: 0.18s !important; }
.pd-facture-row:nth-child(4), .pd-devis-row:nth-child(4) { animation-delay: 0.23s !important; }
.pd-facture-row:nth-child(5), .pd-devis-row:nth-child(5) { animation-delay: 0.28s !important; }
.pd-facture-row:nth-child(n+6), .pd-devis-row:nth-child(n+6) { animation-delay: 0.33s !important; }


/* =====================================================
   UNIFORM DELETE BUTTON — everywhere
   ===================================================== */

/* All delete/danger variants get the same gradient red style */
.btn-danger, .btn-delete, .btn-supprimer,
.btn-danger-strato, .cht-btn-danger,
[class*="btn"][class*="danger"],
.row-action-btn.delete,
#confirm-delete-btn {
  background: linear-gradient(135deg, #EF4444, #B91C1C) !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.25),
              inset 0 1px 0 rgba(255,255,255,0.1) !important;
  transition: all var(--transition-normal) !important;
  position: relative !important;
  overflow: hidden !important;
}
.btn-danger:hover, .btn-delete:hover, .btn-supprimer:hover,
.btn-danger-strato:hover, .cht-btn-danger:hover,
.row-action-btn.delete:hover,
#confirm-delete-btn:hover {
  box-shadow: 0 8px 30px rgba(239, 68, 68, 0.4),
              0 0 30px rgba(185, 28, 28, 0.2),
              inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transform: translateY(-2px) !important;
  filter: brightness(1.1) !important;
}
.btn-danger:active, .btn-delete:active, .btn-supprimer:active,
.btn-danger-strato:active, .cht-btn-danger:active,
#confirm-delete-btn:active {
  transform: translateY(0) scale(0.97) !important;
  filter: brightness(0.95) !important;
}

/* Delete button shimmer */
.btn-danger::before, .btn-delete::before, .btn-danger-strato::before,
#confirm-delete-btn::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: -100% !important;
  width: 100% !important; height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent) !important;
  transition: left 0.6s ease !important;
}
.btn-danger:hover::before, .btn-delete:hover::before,
.btn-danger-strato:hover::before,
#confirm-delete-btn:hover::before {
  left: 100% !important;
}

/* Small delete buttons (in table rows, tasks) */
.btn-danger.btn-sm, .btn.btn-sm.btn-danger,
.row-action-btn.delete, .task-action-btn[onclick*="delete"] {
  padding: 6px 14px !important;
  font-size: 12px !important;
  min-height: 6px !important;
}

/* Modal footer delete — same style */
.modal-footer .btn-danger, .modal-footer .btn-delete,
.modal-footer #confirm-delete-btn {
  padding: 10px 6px !important;
  font-size: 13px !important;
}


/* =====================================================
   DASHBOARD CARDS — subtle border + gradient bg (dashboard only)
   ===================================================== */
/* Dashboard cards — styling unifié via auraos.css, plus de hover spécifique ici */


/* =====================================================
   REDUCED MOTION
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ==========================================================
   GLASSMORPHISM — transparence + blur unifié
   ========================================================== */

/* Wrappers transparents */
.app-container, .main { background: transparent !important; }

/* Content-frame */
[data-theme="dark"] .content-frame {
  background: rgba(13,15,20,0.28) !important;
  backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important;
  border-color: rgba(255,255,255,0.06) !important;
}
[data-theme="light"] .content-frame {
  background: rgba(245,243,240,0.32) !important;
  backdrop-filter: blur(14px) saturate(1.2) !important; -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
  border-color: rgba(0,0,0,0.04) !important;
}

/* Sidebar */
[data-theme="dark"] .sidebar {
  background: rgba(13,15,20,0.28) !important;
  backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important;
  border-right: none !important;
}
[data-theme="light"] .sidebar {
  background: rgba(245,243,240,0.32) !important;
  backdrop-filter: blur(14px) saturate(1.2) !important; -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
  border-right: none !important;
}

/* Topbar */
[data-theme="dark"] .topbar {
  background: transparent !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
}
[data-theme="dark"] .topbar.scrolled {
  background: rgba(26,29,36,0.50) !important;
  backdrop-filter: blur(30px) saturate(1.2) !important; -webkit-backdrop-filter: blur(30px) saturate(1.2) !important;
}
[data-theme="light"] .topbar {
  background: transparent !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
}
[data-theme="light"] .topbar.scrolled {
  background: rgba(245,243,240,0.50) !important;
  backdrop-filter: blur(30px) saturate(1.2) !important; -webkit-backdrop-filter: blur(30px) saturate(1.2) !important;
}

/* Cards */
[data-theme="dark"] .card, [data-theme="dark"] .card-strato,
[data-theme="dark"] .kpi-card, [data-theme="dark"] .kpi,
/* Phase 4 Glass Unified : alignement sur var(--glass-*) tokens.
   Ancien (rollback Phase 4) :
     dark : background rgba(26,29,36,0.15), blur 20px, border rgba(255,255,255,0.06), shadow none
     light : background transparent, blur 0.5px, border rgba(70,60,120,0.12), shadow 0 8px 32px rgba(70,60,120,0.10)
*/
[data-theme="dark"] .chart-card, [data-theme="dark"] .chart-card-new,
[data-theme="dark"] .fl-panel,
[data-theme="dark"] .card-tresorerie,
[data-theme="dark"] .card-revenue {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}
[data-theme="light"] .card, [data-theme="light"] .card-strato,
[data-theme="light"] .kpi-card, [data-theme="light"] .kpi,
[data-theme="light"] .chart-card, [data-theme="light"] .chart-card-new,
[data-theme="light"] .fl-panel {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* Tables */
table, thead, tbody, tr, td, th { background: transparent !important; }
[data-theme="dark"] tr:hover td { background: rgba(255,255,255,0.03) !important; }
[data-theme="light"] tr:hover td { background: rgba(0,0,0,0.03) !important; }
[data-theme="light"] thead th { color: #555 !important; border-bottom: 1px solid rgba(0,0,0,0.1) !important; }
[data-theme="dark"] thead th { color: #f6f6f6 !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; }

/* Inputs */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="color"]),
[data-theme="dark"] textarea, [data-theme="dark"] select {
  background: #14161c !important; color: #f0f0f0 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="color"]),
[data-theme="light"] textarea, [data-theme="light"] select {
  background: rgba(255,255,255,0.5) !important; color: #1a1a2a !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
}
[data-theme="dark"] input.hourly-rate-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="color"]),
[data-theme="light"] input.hourly-rate-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="color"]) {
  background: transparent !important;
  border: .5px solid transparent !important;
}

/* Modales */
[data-theme="dark"] .modal, [data-theme="dark"] .design-modal {
  background: rgba(26,29,36,0.50) !important;
  backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
[data-theme="light"] .modal, [data-theme="light"] .design-modal {
  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important;
}

/* Couleurs preservees */
canvas, svg { background: transparent !important; }

/* ==========================================================
   FIX JONCTIONS + THEME SIDEBAR/TOPBAR
   ========================================================== */
/* Sidebar : coins arrondis uniquement à GAUCHE (les bords face à la
   content-frame restent flat → silhouette continue, plus d'artefact "coupé"). */
.sidebar, #sidebar { border-radius: 6px 0 0 6px !important; }
.topbar, header { border-radius: 6px 6px 0 0 !important; }

[data-theme="light"] .sidebar a, [data-theme="light"] .sidebar span,
[data-theme="light"] .sidebar div, [data-theme="light"] .sidebar p,
[data-theme="light"] .sidebar i { color: #3d3427 !important; }
[data-theme="light"] .sidebar .sidebar-item.active {
  color: #000000 !important;
  border-radius: 8px !important;
  border: none !important;
}
[data-theme="light"] .sidebar .sidebar-item.active *:not(.icon-medium) {
  background: transparent !important; color: #000000 !important;
}
[data-theme="light"] .sidebar .nav-group-label,
[data-theme="light"] .sidebar .nav-group-header i { color: #5A513F !important; }

[data-theme="dark"] .sidebar a, [data-theme="dark"] .sidebar span,
[data-theme="dark"] .sidebar div, [data-theme="dark"] .sidebar p,
[data-theme="dark"] .sidebar i { color: #f6f6f6 !important; }
[data-theme="dark"] .sidebar .sidebar-item.active {
  color: #FFFFFF !important;
  border-radius: 8px !important;
  border: none !important;
}
[data-theme="dark"] .sidebar .sidebar-item.active *:not(.icon-medium) {
  background: transparent !important; color: #FFFFFF !important;
}

[data-theme="light"] .topbar *, [data-theme="light"] .topbar a,
[data-theme="light"] .topbar span, [data-theme="light"] .topbar button { color: #1a1a2a !important; }
[data-theme="dark"] .topbar *, [data-theme="dark"] .topbar a,
[data-theme="dark"] .topbar span, [data-theme="dark"] .topbar button { color: #f0f0f0 !important; }

[data-theme="light"] .sidebar-logo img { filter: brightness(0.3) !important; }
[data-theme="dark"] .sidebar-logo img { filter: brightness(1) !important; }

/* ==========================================================
   LAYOUT JONCTIONS — coins arrondis sur le wrapper, enfants droits
   ========================================================== */
.app-container { border-radius: 6px !important; overflow: clip !important; }
/* Sidebar : coins arrondis uniquement à GAUCHE (les bords face à la
   content-frame restent flat → silhouette continue, plus d'artefact "coupé"). */
.sidebar, #sidebar { border-radius: 6px 0 0 6px !important; }
.topbar, header { border-radius: 6px 6px 0 0 !important; }
.grain-overlay { border-radius: 6px !important; }
/* Content-frame : coins arrondis uniquement à DROITE (miroir de la sidebar). */
.content-frame { border-radius: 0 6px 6px 0 !important; }
.sidebar-collapse-btn { border-radius: 0 !important; border: none !important; margin: 0 !important; }

/* Breadcrumb pill — transparent */
.bc-pill { background: transparent !important; border-color: transparent !important; }

/* ==========================================================
   SIDEBAR — item actif full-width (IDE-style)
   ========================================================== */

/* Item actif — texte/icône en NOIR (light) ou BLANC (dark), pas de teinte thème */
[data-theme="dark"] .sidebar-item.active {
  background: rgba(255, 255, 255, 0.08) !important;
  border-left: none !important;
  border-radius: 8px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10) !important;
  color: #FFFFFF !important;
  position: relative;
  overflow: hidden !important;
}
[data-theme="dark"] .sidebar-item.active::after { display: none !important; }

[data-theme="light"] .sidebar-item.active {
  background: rgba(0, 0, 0, 0.06) !important;
  border-left: none !important;
  border-radius: 8px !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10) !important;
  color: #000000 !important;
  position: relative;
  overflow: hidden !important;
}
[data-theme="light"] .sidebar-item.active::after { display: none !important; }

/* Icônes non-actives */
.sidebar-item:not(.active) .icon-glass {
  filter: grayscale(60%) brightness(0.7) !important;
  transition: filter 0.15s ease;
}
.sidebar-item:not(.active):hover .icon-glass {
  filter: grayscale(20%) brightness(0.9) !important;
}
.sidebar-item.active .icon-glass {
  filter: brightness(0) invert(1) !important;
  transition: filter 0.15s ease;
}

/* Texte actif : noir en light, blanc en dark */
[data-theme="dark"] .sidebar-item.active .sidebar-item-text { color: #FFFFFF !important; font-weight: 600 !important; }
[data-theme="light"] .sidebar-item.active .sidebar-item-text { color: #000000 !important; font-weight: 600 !important; }

/* Texte non-actif */
[data-theme="dark"] .sidebar-item:not(.active) .sidebar-item-text { color: rgba(255,255,255,0.85) !important; }
[data-theme="light"] .sidebar-item:not(.active) .sidebar-item-text { color: rgba(61,52,39,0.6) !important; }
[data-theme="dark"] .sidebar-item:not(.active):hover .sidebar-item-text { color: var(--acc) !important; }
[data-theme="light"] .sidebar-item:not(.active):hover .sidebar-item-text { color: var(--acc) !important; }
.sidebar-item:not(.active):hover .icon-glass {
  filter: none !important;
}

/* ── Icones Medium (Material Symbols masked) — follow currentColor ── */
/* Forte specificite pour battre .sidebar .sidebar-item.active * { background: transparent } */
/* Les anciennes règles background:currentColor + mask ont été retirées
   car .icon-medium rend désormais un glyphe HugeIcons via <i.hgi-stroke>
   — pas un span avec mask SVG. background transparent sinon le glyphe
   est masqué par un carré de couleur. */
html .sidebar .sidebar-item .icon-medium,
html .sidebar .nav-group-header .icon-medium,
html [data-theme="dark"] .sidebar .sidebar-item.active .icon-medium,
html [data-theme="light"] .sidebar .sidebar-item.active .icon-medium {
  background: transparent !important;
  transition: color 0.15s ease;
  -webkit-mask: none !important;
  mask: none !important;
}
/* Taille via font-size au lieu de width/height (HugeIcons est une font) */
.nav-group-items .sidebar-item .icon-medium {
  font-size: 17px !important;
  width: auto !important;
  height: auto !important;
}
.nav-group-header .icon-medium {
  font-size: 20px !important;
  width: auto !important;
  height: auto !important;
}
/* Dark mode : inactif gris clair, actif dans la COULEUR DU THÈME, hover accent */
[data-theme="dark"] .sidebar-item:not(.active) .icon-medium { color: #f6f6f6 !important; }
[data-theme="dark"] .sidebar-item.active .icon-medium,
[data-theme="dark"] .sidebar .sidebar-item.active .icon-medium {
  color: var(--acc) !important;
  filter: drop-shadow(0 0 6px rgba(var(--acc-rgb), 0.6)) drop-shadow(0 0 2px rgba(var(--acc-rgb), 0.4)) !important;
}
[data-theme="light"] .sidebar-item.active .icon-medium,
[data-theme="light"] .sidebar .sidebar-item.active .icon-medium {
  color: var(--acc) !important;
  filter: drop-shadow(0 0 6px rgba(var(--acc-rgb), 0.55)) drop-shadow(0 0 2px rgba(var(--acc-rgb), 0.35)) !important;
}
[data-theme="dark"] .sidebar-item:not(.active):hover .icon-medium { color: var(--acc) !important; }
[data-theme="dark"] .nav-group-header .icon-medium { color: #b0b6c0 !important; }
[data-theme="dark"] .nav-group-header:hover .icon-medium { color: var(--acc) !important; }
/* Light mode — inactif grisé, hover accent */
[data-theme="light"] .sidebar-item:not(.active) .icon-medium { color: rgba(61,52,39,0.6) !important; }
[data-theme="light"] .sidebar-item:not(.active):hover .icon-medium { color: var(--acc) !important; }
[data-theme="light"] .nav-group-header .icon-medium { color: #5A513F !important; }
[data-theme="light"] .nav-group-header:hover .icon-medium { color: var(--acc) !important; }

/* ==========================================================
   DARK MODE — Fix lisibilité texte global
   Tailwind gray classes + labels + muted text
   ========================================================== */

/* text-gray-500 (#6b7280) → clair en dark */
[data-theme="dark"] .text-gray-500 { color: #c9cdd4 !important; }

/* text-gray-600 (#4b5563) → clair en dark */
[data-theme="dark"] .text-gray-600 { color: #c9cdd4 !important; }

/* text-gray-400 → clair en dark */
[data-theme="dark"] .text-gray-400 { color: #b0b6c0 !important; }

/* text-gray-700/800 → blanc en dark */
[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .text-gray-800 { color: #e8eaed !important; }

/* ──────── LIGHT MODE : lisibilité des text-gray-* (Tailwind) ──────── */
/* text-gray-300/400 par défaut #D1D5DB/#9CA3AF → illisibles sur fond beige (2.04:1) */
[data-theme="light"] .text-gray-300 { color: var(--t3) !important; }
[data-theme="light"] .text-gray-400 { color: var(--t3) !important; }
/* text-gray-500 #6b7280 → limite (3.85:1) */
[data-theme="light"] .text-gray-500 { color: var(--t2) !important; }
/* text-gray-600 #4B5563 → OK (5.3:1) mais on uniformise */
[data-theme="light"] .text-gray-600 { color: var(--t2) !important; }
/* text-gray-700/800/900 → OK natif mais harmoniser sur --t1 */
[data-theme="light"] .text-gray-700,
[data-theme="light"] .text-gray-800,
[data-theme="light"] .text-gray-900 { color: var(--t1) !important; }
/* text-white sur fond clair → illisible ; conserver si sur bg accent */
[data-theme="light"] .text-white:not(.bg-\[var\(--acc\)\]):not([class*="bg-strato"]):not([class*="bg-blue"]):not([class*="bg-red"]):not([class*="bg-green"]):not([class*="bg-orange"]):not([class*="bg-indigo"]):not([class*="bg-violet"]):not([class*="bg-purple"]):not([class*="bg-emerald"]) {
  color: var(--t1) !important;
}
/* Slate classes (Tailwind) */
[data-theme="light"] .text-slate-300,
[data-theme="light"] .text-slate-400 { color: var(--t3) !important; }
[data-theme="light"] .text-slate-500,
[data-theme="light"] .text-slate-600 { color: var(--t2) !important; }
[data-theme="light"] .text-slate-700,
[data-theme="light"] .text-slate-800,
[data-theme="light"] .text-slate-900 { color: var(--t1) !important; }
/* Couleurs sémantiques Tailwind sur fond clair — texte plus foncé pour contraste */
[data-theme="light"] .text-red-500 { color: #B91C1C !important; }
[data-theme="light"] .text-red-600 { color: #991B1B !important; }
[data-theme="light"] .text-green-500 { color: #047857 !important; }
[data-theme="light"] .text-green-600,
[data-theme="light"] .text-emerald-500,
[data-theme="light"] .text-emerald-600 { color: #065F46 !important; }
[data-theme="light"] .text-blue-500 { color: #1D4ED8 !important; }
[data-theme="light"] .text-blue-600 { color: #1E40AF !important; }
[data-theme="light"] .text-indigo-500 { color: #4338CA !important; }
[data-theme="light"] .text-indigo-600 { color: #3730A3 !important; }
[data-theme="light"] .text-orange-500,
[data-theme="light"] .text-yellow-500 { color: #B45309 !important; }
[data-theme="light"] .text-amber-500,
[data-theme="light"] .text-amber-600 { color: #B45309 !important; }
[data-theme="light"] .text-violet-500,
[data-theme="light"] .text-purple-500 { color: #6D28D9 !important; }
[data-theme="light"] .text-pink-500 { color: #BE185D !important; }
/* Backgrounds blanc/gris clair sur dark → aligner sur les vars */
[data-theme="dark"] .bg-white { background-color: var(--card) !important; color: var(--t1) !important; }
[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-gray-100 { background-color: var(--bg2) !important; }
[data-theme="dark"] .bg-gray-200 { background-color: var(--card2) !important; }
[data-theme="dark"] .bg-slate-50,
[data-theme="dark"] .bg-slate-100 { background-color: var(--bg2) !important; }
[data-theme="dark"] .hover\:bg-gray-50:hover,
[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: var(--card2) !important; }
[data-theme="dark"] .border-gray-100,
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-slate-100,
[data-theme="dark"] .border-slate-200 { border-color: var(--brd) !important; }

/* Labels de section, sous-labels */
[data-theme="dark"] .kpi-label,
[data-theme="dark"] .kpi-sub,
[data-theme="dark"] .section-label,
[data-theme="dark"] .section-title,
[data-theme="dark"] .detail-label,
[data-theme="dark"] .field-label,
[data-theme="dark"] .form-label,
[data-theme="dark"] label {
  color: #f6f6f6 !important;
}

/* Texte courant : adresses, emails, téléphones, descriptions */
[data-theme="dark"] .text-body,
[data-theme="dark"] p,
[data-theme="dark"] address,
[data-theme="dark"] .detail-value,
[data-theme="dark"] .field-value {
  color: #f6f6f6;
}

/* Small, caption, hints */
[data-theme="dark"] small,
[data-theme="dark"] .text-sm,
[data-theme="dark"] .hint,
[data-theme="dark"] .help-text,
[data-theme="dark"] caption {
  color: #f6f6f6;
}

/* Table headers */
[data-theme="dark"] th,
[data-theme="dark"] thead th {
  color: #f6f6f6 !important;
}

/* Table cells — texte lisible */
[data-theme="dark"] td {
  color: #f6f6f6;
}

/* ==========================================================
   DARK MODE — Tailwind color classes (complément)
   ========================================================== */

/* text-gray-300/900 + text-white : éviter blanc / noir purs */
[data-theme="dark"] .text-gray-300 { color: #f6f6f6 !important; }
[data-theme="dark"] .text-gray-900 { color: #f0f0f0 !important; }
[data-theme="dark"] .text-white { color: #f0f0f0 !important; }
[data-theme="dark"] .text-black { color: #f0f0f0 !important; }
[data-theme="dark"] .text-slate-400 { color: #b0b6c0 !important; }
[data-theme="dark"] .text-slate-500 { color: #c9cdd4 !important; }
[data-theme="dark"] .text-slate-600 { color: #c9cdd4 !important; }
[data-theme="dark"] .text-slate-700,
[data-theme="dark"] .text-slate-800,
[data-theme="dark"] .text-slate-900 { color: #e8eaed !important; }

/* Backgrounds blancs/gris clairs Tailwind — s'adapter au dark */
[data-theme="dark"] .bg-white { background-color: var(--card) !important; }
[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-gray-100 { background-color: var(--bg2) !important; }
[data-theme="dark"] .bg-gray-200 { background-color: var(--card2) !important; }
[data-theme="dark"] .bg-slate-50,
[data-theme="dark"] .bg-slate-100 { background-color: var(--bg2) !important; }
[data-theme="dark"] .hover\:bg-gray-50:hover,
[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: var(--card2) !important; }

/* Bordures Tailwind claires */
[data-theme="dark"] .border-gray-100,
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-slate-100,
[data-theme="dark"] .border-slate-200 { border-color: var(--brd) !important; }

/* ==========================================================
   LIGHT MODE — Fix lisibilité Tailwind
   ========================================================== */

/* text-gray-300/400 : trop clairs sur fond beige */
[data-theme="light"] .text-gray-300 { color: var(--t3) !important; }
[data-theme="light"] .text-gray-400 { color: var(--t3) !important; }
[data-theme="light"] .text-gray-500 { color: var(--t2) !important; }
[data-theme="light"] .text-slate-300 { color: var(--t3) !important; }
[data-theme="light"] .text-slate-400 { color: var(--t3) !important; }

/* text-white : invisible sur fond clair — remapper vers t1 sauf sur bg accent */
[data-theme="light"] .text-white:not(.bg-\[var\(--acc\)\]):not([class*="bg-strato"]):not([class*="bg-blue"]):not([class*="bg-red"]):not([class*="bg-green"]):not([class*="bg-orange"]) {
  color: var(--t1) !important;
}

/* ==========================================================
   LIGHT MODE — Couleurs status lisibles sur fond beige
   (override quand utilisées comme texte sur fond clair)
   ========================================================== */
[data-theme="light"] .status-badge-btn.s-draft,
[data-theme="light"] .status-badge-btn.s-archived,
[data-theme="light"] .status-badge-btn.s-gray { color: #4B5563 !important; }
[data-theme="light"] .status-badge-btn.s-info,
[data-theme="light"] .status-badge-btn.s-blue { color: #1D4ED8 !important; }
[data-theme="light"] .status-badge-btn.s-warning,
[data-theme="light"] .status-badge-btn.s-orange { color: #B45309 !important; }
[data-theme="light"] .status-badge-btn.s-success,
[data-theme="light"] .status-badge-btn.s-green { color: #15803D !important; }

/* ==========================================================
   LIGHT MODE — Sidebar (fix sub-items et icônes)
   ========================================================== */
[data-theme="light"] .sidebar-item,
[data-theme="light"] .nav-group-header {
  color: var(--t2);
}
[data-theme="light"] .sidebar-item svg,
[data-theme="light"] .sidebar-item .material-symbols-outlined {
  color: var(--t2);
}
[data-theme="light"] .sidebar-item:not(.active):hover svg,
[data-theme="light"] .sidebar-item:not(.active):hover .material-symbols-outlined {
  color: var(--acc);
}

/* ==========================================================
   WALLPAPER TONE ADAPTATION
   Quand un wallpaper est actif et que sa luminance est
   détectée (data-wp-tone="light|dark" sur <html>), on force
   les textes à contraster — indépendamment du thème.
   Les cards étant quasi-transparentes, c'est le wallpaper
   qui définit le fond effectif sous le texte.
   ========================================================== */

/* Wallpaper clair → forcer textes sombres dans les cards */
html[data-wp-tone="light"] .kpi-label,
html[data-wp-tone="light"] .kpi-val,
html[data-wp-tone="light"] .kpi-value,
html[data-wp-tone="light"] .kpi-card-value,
html[data-wp-tone="light"] .kpi-trend .vs,
html[data-wp-tone="light"] .kpi-sub,
html[data-wp-tone="light"] .card-t,
html[data-wp-tone="light"] .card-h .card-t,
html[data-wp-tone="light"] .nf-card-name,
html[data-wp-tone="light"] .nf-card-client,
html[data-wp-tone="light"] .chart-lbl,
html[data-wp-tone="light"] .chart-y span,
html[data-wp-tone="light"] .stat-label,
html[data-wp-tone="light"] .stat-title,
html[data-wp-tone="light"] .pd-kpi-label,
html[data-wp-tone="light"] main h1,
html[data-wp-tone="light"] main h2,
html[data-wp-tone="light"] main h3,
html[data-wp-tone="light"] main p,
html[data-wp-tone="light"] .wel,
html[data-wp-tone="light"] .page-header h1,
html[data-wp-tone="light"] .page-header h2,
html[data-wp-tone="light"] .page-title {
  color: #1a1a2a !important;
  text-shadow: 0 1px 2px rgba(255,255,255,0.4);
}
html[data-wp-tone="light"] .kpi-label,
html[data-wp-tone="light"] .nf-card-client,
html[data-wp-tone="light"] .stat-label,
html[data-wp-tone="light"] .pd-kpi-label,
html[data-wp-tone="light"] .chart-lbl,
html[data-wp-tone="light"] .chart-y span {
  color: #4a4a5a !important;
}

/* ════════════════════════════════════════════════════════════════
   DARK MODE PRIORITAIRE : en dark, le texte reste blanc/clair peu
   importe le wallpaper. On annule les overrides "data-wp-tone=light"
   qui forceraient du texte sombre. La sidebar est aussi sécurisée.
   ════════════════════════════════════════════════════════════════ */
html[data-theme="dark"][data-wp-tone="light"] .kpi-label,
html[data-theme="dark"][data-wp-tone="light"] .kpi-val,
html[data-theme="dark"][data-wp-tone="light"] .kpi-value,
html[data-theme="dark"][data-wp-tone="light"] .kpi-card-value,
html[data-theme="dark"][data-wp-tone="light"] .kpi-trend .vs,
html[data-theme="dark"][data-wp-tone="light"] .kpi-sub,
html[data-theme="dark"][data-wp-tone="light"] .card-t,
html[data-theme="dark"][data-wp-tone="light"] .card-h .card-t,
html[data-theme="dark"][data-wp-tone="light"] .nf-card-name,
html[data-theme="dark"][data-wp-tone="light"] .nf-card-client,
html[data-theme="dark"][data-wp-tone="light"] .chart-lbl,
html[data-theme="dark"][data-wp-tone="light"] .chart-y span,
html[data-theme="dark"][data-wp-tone="light"] .stat-label,
html[data-theme="dark"][data-wp-tone="light"] .stat-title,
html[data-theme="dark"][data-wp-tone="light"] .pd-kpi-label,
html[data-theme="dark"][data-wp-tone="light"] main h1,
html[data-theme="dark"][data-wp-tone="light"] main h2,
html[data-theme="dark"][data-wp-tone="light"] main h3,
html[data-theme="dark"][data-wp-tone="light"] main p,
html[data-theme="dark"][data-wp-tone="light"] .wel,
html[data-theme="dark"][data-wp-tone="light"] .page-header h1,
html[data-theme="dark"][data-wp-tone="light"] .page-header h2,
html[data-theme="dark"][data-wp-tone="light"] .page-title {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}
html[data-theme="dark"][data-wp-tone="light"] .kpi-label,
html[data-theme="dark"][data-wp-tone="light"] .nf-card-client,
html[data-theme="dark"][data-wp-tone="light"] .stat-label,
html[data-theme="dark"][data-wp-tone="light"] .pd-kpi-label,
html[data-theme="dark"][data-wp-tone="light"] .chart-lbl,
html[data-theme="dark"][data-wp-tone="light"] .chart-y span {
  color: #f6f6f6 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}

/* Sidebar : textes + icônes toujours en blanc/clair en dark, peu importe le wallpaper */
html[data-theme="dark"] .sidebar-item,
html[data-theme="dark"] .sidebar-item-text,
html[data-theme="dark"] .sidebar-nav .nav-group-title,
html[data-theme="dark"] .nav-group-title {
  color: #f6f6f6 !important;
}
html[data-theme="dark"] .sidebar-item.active,
html[data-theme="dark"] .sidebar-item.active .sidebar-item-text {
  color: #ffffff !important;
}
html[data-theme="dark"] .sidebar-item svg,
html[data-theme="dark"] .sidebar-item .material-symbols-outlined,
html[data-theme="dark"] .sidebar-item .icon-medium,
html[data-theme="dark"] .sidebar-item i.hgi-stroke {
  color: #f6f6f6 !important;
  fill: #f6f6f6;
}
html[data-theme="dark"] .sidebar-item.active svg,
html[data-theme="dark"] .sidebar-item.active .material-symbols-outlined,
html[data-theme="dark"] .sidebar-item.active .icon-medium,
html[data-theme="dark"] .sidebar-item.active i.hgi-stroke {
  color: #ffffff !important;
  fill: #ffffff;
}
/* Le hover garde la couleur d'accent (intentionnel — feedback visuel) */

/* Wallpaper sombre → forcer textes clairs dans les cards */
html[data-wp-tone="dark"] .kpi-label,
html[data-wp-tone="dark"] .kpi-val,
html[data-wp-tone="dark"] .kpi-value,
html[data-wp-tone="dark"] .kpi-card-value,
html[data-wp-tone="dark"] .kpi-trend .vs,
html[data-wp-tone="dark"] .kpi-sub,
html[data-wp-tone="dark"] .card-t,
html[data-wp-tone="dark"] .card-h .card-t,
html[data-wp-tone="dark"] .nf-card-name,
html[data-wp-tone="dark"] .nf-card-client,
html[data-wp-tone="dark"] .chart-lbl,
html[data-wp-tone="dark"] .chart-y span,
html[data-wp-tone="dark"] .stat-label,
html[data-wp-tone="dark"] .stat-title,
html[data-wp-tone="dark"] .pd-kpi-label,
html[data-wp-tone="dark"] main h1,
html[data-wp-tone="dark"] main h2,
html[data-wp-tone="dark"] main h3,
html[data-wp-tone="dark"] main p,
html[data-wp-tone="dark"] .wel,
html[data-wp-tone="dark"] .page-header h1,
html[data-wp-tone="dark"] .page-header h2,
html[data-wp-tone="dark"] .page-title {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
html[data-wp-tone="dark"] .kpi-label,
html[data-wp-tone="dark"] .nf-card-client,
html[data-wp-tone="dark"] .stat-label,
html[data-wp-tone="dark"] .pd-kpi-label,
html[data-wp-tone="dark"] .chart-lbl,
html[data-wp-tone="dark"] .chart-y span {
  color: #f6f6f6 !important;
}

/* ==========================================================
   ICONS — suppression des fonds sur les containers d'icônes
   Icônes à même le texte / card, pas de pastille colorée
   ========================================================== */
.card-treso-icon,
.cht-card-icon,
.kpi-icon-circle,
.kpi-icon-wrap,
.hd-icon-box,
.cmd-ico,
.timer-banner-icon,
.source-icon,
.folder-icon,
.recap-icon,
.tuto-step-icon,
.kpi-icon,
.kpi-icon-3d,
.pd-btn-icon,
.stat-icon,
.nf-progress-icon {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Garder les couleurs accent sur les icônes (pas le fond, juste le trait) */
.card-treso-icon,
.cht-card-icon,
.kpi-icon-circle,
.kpi-icon-wrap,
.hd-icon-box {
  color: var(--t2);
}
[data-theme="dark"] .card-treso-icon,
[data-theme="dark"] .cht-card-icon,
[data-theme="dark"] .kpi-icon-circle,
[data-theme="dark"] .kpi-icon-wrap,
[data-theme="dark"] .hd-icon-box {
  color: var(--t2);
}