/* ============================================================
   STRATO — Orbit Design System
   HTMX + Alpine.js — Dark Glow + Configurable Accent
   Satoshi (self-hosted) — police principale (body + titres + data)
   ============================================================ */

/* ─── SATOSHI FONT FACES — fichiers locaux ─── */
@font-face {
  font-family: 'Satoshi';
  src: url('/static/fonts/satoshi/Satoshi-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/static/fonts/satoshi/Satoshi-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/static/fonts/satoshi/Satoshi-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/static/fonts/satoshi/Satoshi-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/static/fonts/satoshi/Satoshi-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/static/fonts/satoshi/Satoshi-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ─── SHARED DIMENSIONS ─── */
:root {
  --sidebar-width: 190px;
  --sidebar-collapsed-width: 64px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 10px;
  --r: 6px;
  /* Police principale du projet : Satoshi (self-hosted, /static/fonts/satoshi/).
     Space Grotesk reste en fallback display, Space Mono en fallback mono. */
  --f: 'Satoshi', 'Space Grotesk', -apple-system, sans-serif;
  --fm: 'Satoshi', 'Space Grotesk', -apple-system, sans-serif;
  --fd: 'Satoshi', 'Space Grotesk', sans-serif;
  --fs: 'Satoshi', 'Space Grotesk', -apple-system, sans-serif;
  /* Legacy aliases */
  --font-body: var(--f);
  --font-heading: var(--fd);
  --font-mono: var(--fm);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-xl: var(--r-xl);
  --radius-full: 999px;
}

/* ─── DARK THEME (default) — Orbit-inspired ─── */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111317;
  --bg2: #14161c;
  --card: #1a1d24;
  --card2: #22252e;
  --inp: #14161c;
  --elev: #1a1d24;
  --bg-primary: var(--bg);
  --bg-secondary: var(--bg2);
  --bg-card: var(--card);
  --bg-card-hover: var(--card2);
  --bg-elevated: var(--elev);
  --bg-sidebar: #0d0f14;

  /* Dark mode : tous les textes gris harmonises sur #f6f6f6 (demande user).
     --t1 reste blanc pur pour conserver la hierarchie titres vs corps. */
  --t1: #ffffff;   /* blanc pur — titres, KPI, valeurs importantes */
  --t2: #f6f6f6;   /* off-white unifie — corps de texte, labels */
  --t3: #f6f6f6;   /* off-white unifie — hints, legendes */
  --t4: #f6f6f6;   /* off-white unifie — disabled */
  --text-primary: var(--t1);
  --text-secondary: var(--t2);
  --text-muted: var(--t3);

  --acc: #F97316;
  --accl: #FB923C;
  --accd: #EA580C;
  --acc-rgb: 249, 115, 22;
  --accbg: rgba(var(--acc-rgb), 0.08);
  --accbg2: rgba(var(--acc-rgb), 0.12);
  --accent: var(--acc);
  --accent-light: var(--accl);
  --accent-dim: var(--accd);
  --accent-glow: var(--accbg);
  --accent-glow-strong: var(--accbg2);

  --ok: #2ECC71;
  --err: #E74C3C;
  --warn: #F39C12;
  --info: #3B82F6;
  --green: #2ECC71;
  --green-dim: rgba(46, 204, 113, 0.12);
  --red: #E74C3C;
  --red-dim: rgba(231, 76, 60, 0.12);
  --orange: #F97316;
  --orange-dim: rgba(249, 115, 22, 0.12);
  --yellow: #facc15;
  --yellow-dim: rgba(250, 204, 21, 0.12);
  --violet: #A78BFA;
  --violet-dim: rgba(167, 139, 250, 0.12);
  --cyan: #06B6D4;
  --cyan-dim: rgba(6, 182, 212, 0.12);
  --pink: #f472b6;
  --pink-dim: rgba(244, 114, 182, 0.12);
  --emerald: #34d399;
  --emerald-dim: rgba(52, 211, 153, 0.12);

  --brd: rgba(255, 255, 255, 0.06);
  --brd2: rgba(255, 255, 255, 0.10);
  --border: var(--brd);
  --border-subtle: var(--brd);
  --border-medium: var(--brd2);

  --chart-expense-bg: rgba(255, 255, 255, 0.08);
  --modal-overlay-bg: rgba(0, 0, 0, 0.6);
  --status-gray: #9CA3AF;
  --status-gray-dim: rgba(156, 163, 175, 0.12);
  --status-gray-border: rgba(156, 163, 175, 0.2);
  --status-archive: #64748b;
  --status-archive-dim: rgba(100, 116, 139, 0.12);
  --status-archive-border: rgba(100, 116, 139, 0.2);
  --section-dashboard: var(--acc);
  --section-compta: var(--ok);
  --section-settings: #94A3B8;
  --text-on-accent: #ffffff;
  --tooltip-bg: #0A0C14;
  --tooltip-text: #ffffff;
}

/* ─── LIGHT THEME ─── */
[data-theme="light"] {
  color-scheme: light;
  --bg: #EAE6E1;
  --bg2: #F0EDEA;
  --card: #F3F0ED;
  --card2: #EDEAE6;
  --inp: #E8E4DF;
  --elev: #F0EDEA;
  --bg-primary: var(--bg);
  --bg-secondary: var(--bg2);
  --bg-card: var(--card);
  --bg-card-hover: var(--card2);
  --bg-elevated: var(--elev);
  --bg-sidebar: var(--bg2);

  --t1: #1A1714;
  --t2: #5C554D;
  --t3: #9A9189;
  --t4: #C8C1B9;
  --text-primary: var(--t1);
  --text-secondary: var(--t2);
  --text-muted: var(--t3);

  --acc: #F97316;
  --accl: #FB923C;
  --accd: #EA580C;
  --acc-rgb: 249, 115, 22;
  --accbg: rgba(var(--acc-rgb), 0.08);
  --accbg2: rgba(var(--acc-rgb), 0.12);
  --accent: var(--acc);
  --accent-light: var(--accl);
  --accent-dim: var(--accd);
  --accent-glow: var(--accbg);
  --accent-glow-strong: var(--accbg2);

  --ok: #22C55E;
  --err: #EF4444;
  --warn: #F59E0B;
  --info: #3B82F6;
  --green: #10B981;
  --green-dim: rgba(16, 185, 129, 0.08);
  --red: #EF4444;
  --red-dim: rgba(239, 68, 68, 0.08);
  --orange: #F59E0B;
  --orange-dim: rgba(245, 158, 11, 0.08);
  --yellow: #ca8a04;
  --yellow-dim: rgba(202, 138, 4, 0.08);
  --violet: #8B5CF6;
  --violet-dim: rgba(139, 92, 246, 0.08);
  --cyan: #06B6D4;
  --cyan-dim: rgba(6, 182, 212, 0.08);
  --pink: #db2777;
  --pink-dim: rgba(219, 39, 119, 0.08);
  --emerald: #059669;
  --emerald-dim: rgba(5, 150, 105, 0.08);

  --brd: rgba(160, 140, 110, 0.12);
  --brd2: rgba(160, 140, 110, 0.18);
  --border: var(--brd);
  --border-subtle: var(--brd);
  --border-medium: var(--brd2);

  --chart-expense-bg: rgba(160, 140, 110, 0.06);
  --modal-overlay-bg: rgba(30, 25, 18, 0.25);
  --status-gray: #7B7568;
  --status-gray-dim: rgba(123, 117, 104, 0.08);
  --status-gray-border: rgba(123, 117, 104, 0.15);
  --status-archive: #7B7568;
  --status-archive-dim: rgba(123, 117, 104, 0.08);
  --status-archive-border: rgba(123, 117, 104, 0.15);
  --section-dashboard: var(--acc);
  --section-compta: #059669;
  --section-settings: #7B7568;
  --text-on-accent: #ffffff;
  --tooltip-bg: #2C2620;
  --tooltip-text: #FFF8F0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
.hidden { display: none !important; }

body {
  font-family: var(--f);
  background-color: var(--bg);
  color: var(--t1);
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}

body, input, select, textarea, button {
  font-family: var(--f);
}

h1, h2, h3, h4, h5, h6,
.page-title, .welcome-title, .kpi-value, .kpi-val, .card-title, .modal-title {
  font-family: var(--fd);
}

/* Monospace for numeric data: KPI values, amounts, table data, progress % */
.kpi-val, .kpi-value,
.recap-amt-val, .recap-stat-count, .recap-progress-pct,
.folder-total, .folder-count,
.montant, [class*="amount"], [class*="money"],
.tpl-hex-input, .tpl-num-input, .typo-size-input,
td[class*="amount"], td[class*="montant"] {
  font-family: var(--fm);
  letter-spacing: -0.025em;
}

/* ═══ AMBIENT GLOWS — disabled ═══ */

/* App shell background */
body:has(.app-container) {
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #080809;
}
[data-theme="light"] body:has(.app-container) { background-color: #EFE9DE; }

/* ── Background image support (wallpaper with blur) ── */
body.has-bg-image {
  background: none;
}
body.has-bg-image::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: var(--wallpaper-url);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}
body.has-bg-image .app-container {
  background: transparent;
}
body.has-bg-image::after {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
}
[data-theme="dark"] body.has-bg-image::after { background:rgba(13,15,26,0.18); }
[data-theme="light"] body.has-bg-image::after { background:rgba(234,230,225,0.08); }
body.has-bg-image .app-container { position:relative; z-index:1; }

/* ─── APP CONTAINER ─── */
.app-container {
  width: calc(100vw - 64px);
  height: calc(100vh - 64px);
  margin: 6px;
  border-radius: 6px;
  overflow: clip;
  display: flex;
  gap: 10px;
  position: relative;
  z-index: 1;
  background: transparent;
}

[data-theme="light"] .app-container {
  background: transparent;
}

a { color: inherit; text-decoration: none; }

/* ── Glass Icons ── */
.icon-glass {
  width: 20px; height: 20px;
  object-fit: contain;
  vertical-align: middle;
  display: inline-block;
  flex-shrink: 0;
}
.sidebar .icon-glass,
.sidebar-item .icon-glass { width: 22px; height: 22px; }
.nav-group-header .icon-glass { width: 20px; height: 20px; }
.btn .icon-glass, button .icon-glass { width: 18px; height: 18px; }
.kpi .icon-glass, .kpi-card .icon-glass,
h2 .icon-glass, h3 .icon-glass { width: 6px; height: 6px; }
.topbar .icon-glass { width: 20px; height: 20px; }
/* Uniform 18px for card/page title glass icons */
.kpi-label .icon-glass,
.card-t .icon-glass,
.topbar-breadcrumb .icon-glass { width: 18px !important; height: 18px !important; }
/* 28px for page-header h1 glass icons */
.page-header h1 .icon-glass,
.cht-page-header h1 .icon-glass,
h1 .icon-glass { width: 28px !important; height: 28px !important; }
/* Flex alignment for page/card titles with icons — perfect vertical centering */
.page-header h1,
.cht-page-header h1 { display: inline-flex; align-items: center; gap: 8px; }
.kpi-label:has(.icon-glass),
.card-t:has(.icon-glass),
.card-title:has(.icon-glass),
.strato-card-title:has(.icon-glass),
.topbar-breadcrumb span:has(.icon-glass) { display: inline-flex; align-items: center; gap: 4px; }

/* Grain overlay */
.grain-overlay {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="light"] .grain-overlay { opacity: 0.01; }

/* Early sidebar collapse hint (prevents flash) */
html.sidebar-is-collapsed .sidebar { width: var(--sidebar-collapsed-width); min-width: var(--sidebar-collapsed-width); }
html.sidebar-is-collapsed .main { margin-left: 0; }

/* ─── NAV GROUP (Alpine.js collapsible) ─── */
.nav-group {
  padding: 0;
  box-sizing: border-box;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}

.nav-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 16px;
  color: var(--t2);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
  transition: all 0.12s;
  user-select: none;
  flex-shrink: 0;
}

.nav-group-header:hover {
  color: var(--t1);
  background: rgba(255, 255, 255, 0.04);
}
[data-theme="light"] .nav-group-header:hover {
  background: rgba(0, 0, 0, 0.04);
}

.nav-group-header i:first-child {
  font-size: 17px;
  flex-shrink: 0;
  opacity: 0.7;
  color: inherit;
}

.nav-group-header .nav-group-label {
  flex: 1;
}

.nav-group-header .chevron.material-symbols-outlined {
  margin-left: auto;
  font-size: 16px;
  width: auto;
  color: var(--t4);
  transition: transform 0.2s ease;
}

.nav-group-header .chevron.rotate-90,
.nav-group.open .nav-group-header .chevron.material-symbols-outlined {
  transform: rotate(90deg);
}

.nav-group-items {
  padding-left: 0;
  margin-left: 0;
  border-left: none;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}
.nav-group-items .sidebar-item {
  font-size: 10.5px;
  padding: 8px 14px;
}
.nav-group-items .sidebar-item .icon-glass {
  width: 17px; height: 17px;
}

/* ─── HTMX MODAL (global overlay) ─── */
.htmx-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none; /* hidden by default, shown via JS */
  align-items: flex-start;
  justify-content: center;
  padding: 60px 20px;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.htmx-modal-overlay.active {
  opacity: 1;
}

.htmx-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
}

/* Modale htmx — Phase 4 Glass Unified
   Ancien (rollback Phase 4) :
     background: var(--elev); backdrop-filter: none; border: 1px solid var(--brd2);
     light : background: #ffffff; border: .5px solid #E5E7EB
   Phase 4 : pointe sur var(--glass-bg-strong) (alpha 0.75) — modale doit
   garder presence visuelle distinctive vs cards (alpha 0.35). */
.htmx-modal-panel {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 720px;
  box-shadow: var(--glass-shadow-strong);
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.htmx-modal-panel.modal-large { max-width: 900px; }
.htmx-modal-panel.modal-small { max-width: 560px; }

[data-theme="light"] .htmx-modal-panel {
  /* light : herite du var(--glass-bg-strong) light = rgba(255,255,255,0.75)
     box-shadow herite de var(--glass-shadow-strong) light = soft */
  border: var(--glass-border);
}

.htmx-modal-panel .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 28px 16px;
  border-bottom: .5px solid var(--border-subtle);
}

.htmx-modal-panel .modal-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.htmx-modal-panel .modal-body {
  padding: 6px 28px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.htmx-modal-panel .modal-footer {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 28px 6px !important;
  border-top: .5px solid var(--border-subtle);
  flex-wrap: nowrap !important;
}

/* Global modal-footer (fragments) */
.modal-footer {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 6px !important;
  flex-wrap: nowrap !important;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(24px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 768px) {
  .htmx-modal-panel {
    max-width: 100%;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    max-height: 95vh;
    margin-top: auto;
    animation: slideUpMobile 0.3s ease;
  }

  @keyframes slideUpMobile {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  .htmx-modal-overlay {
    padding: 0;
    align-items: flex-end;
  }
}

/* ─── STATUS BADGES WITH GLOW ─── */
.status-en-cours {
  background: rgba(var(--acc-rgb), 0.12);
  color: var(--acc);
  box-shadow: 0 0 14px rgba(var(--acc-rgb), 0.3);
  border: .5px solid rgba(var(--acc-rgb), 0.2);
}

.status-en-attente {
  background: rgba(245, 158, 11, 0.12);
  color: #F59E0B;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.35);
  border: .5px solid rgba(245, 158, 11, 0.2);
}

.status-termine, .status-payee {
  background: rgba(16, 185, 129, 0.12);
  color: #10B981;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.35);
  border: .5px solid rgba(16, 185, 129, 0.2);
}

.status-impayee, .status-retard {
  background: rgba(239, 68, 68, 0.12);
  color: #EF4444;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.35);
  border: .5px solid rgba(239, 68, 68, 0.2);
}

.status-brouillon {
  background: rgba(139, 92, 247, 0.12);
  color: #A855F7;
  box-shadow: 0 0 14px rgba(139, 92, 247, 0.3);
  border: .5px solid rgba(139, 92, 247, 0.2);
}

.status-a-faire {
  background: rgba(156, 163, 175, 0.12);
  color: #f6f6f6;
  box-shadow: 0 0 14px rgba(156, 163, 175, 0.25);
  border: .5px solid rgba(156, 163, 175, 0.2);
}

[data-theme="light"] .status-en-cours,
[data-theme="light"] .status-en-attente,
[data-theme="light"] .status-termine,
[data-theme="light"] .status-payee,
[data-theme="light"] .status-impayee,
[data-theme="light"] .status-retard,
[data-theme="light"] .status-brouillon,
[data-theme="light"] .status-a-faire {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* ─── SKELETON LOADING ─── */
.kpi-skeleton {
  background: linear-gradient(90deg, var(--bg-elevated) 25%, rgba(255,255,255,0.05) 50%, var(--bg-elevated) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── FAB BUTTON (mobile) ─── */
@media (max-width: 768px) {
  .fab-button {
    position: fixed;
    bottom: calc(24px + env(safe-area-inset-bottom));
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 6px;
    background: var(--accent);
    color: white;
    border: none;
    font-size: 6px;
    box-shadow: 0 8px 6px rgba(var(--acc-rgb), 0.4);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}

/* ─── SIDEBAR — Orbit + Phase 4 Glass Unified ─── */
.sidebar {
  position: relative;
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  height: 100%;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  /* Double bordure glass refined : reflet haut + trait extérieur très subtil.
     Drop-shadow allégée pour éviter l'artefact "coupé" en bas-droite causé
     par la propagation latérale du blur. */
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.20),
    0 4px 16px rgba(0, 0, 0, 0.12);
  /* Coins droits côté contenu : pas de courbe à droite — les panneaux
     paraissent continus quand le gap est minimal. */
  border-radius: 6px 0 0 6px;
  display: flex;
  flex-direction: column;
  z-index: 100;
  padding: 0;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  will-change: width;
  contain: layout style;
}
[data-theme="light"] .sidebar {
  background: rgba(255, 255, 255, 0.50);
  border-color: rgba(255, 255, 255, 0.95);
  /* Drop shadow allégée — évite l'artefact "coupé" en bas-droit
     causé par la propagation latérale du blur de 24/48px. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 0 0 1px rgba(15, 23, 42, 0.04),
    0 4px 12px rgba(15, 23, 42, 0.04);
}

.sidebar-logo {
  padding: 10px 16px 0;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  margin-bottom: 16px;
  position: relative;
}

.sidebar-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Account logo image — centré, pas de texte */
.logo-img {
  max-width: 140px;
  max-height: 40px;
  object-fit: contain;
  transition: filter 0.2s;
}
/* Single logo — auto-invert for dark */
[data-theme="dark"] .logo-img:not(.logo-dark-only):not(.logo-light-only) {
  filter: brightness(0) invert(1);
}
[data-theme="light"] .logo-img:not(.logo-dark-only):not(.logo-light-only) {
  filter: none;
}
/* Dual logo — show/hide by theme */
.logo-dark-only { display: none; }
.logo-light-only { display: block; }
[data-theme="dark"] .logo-dark-only { display: block; }
[data-theme="dark"] .logo-light-only { display: none; }
[data-theme="light"] .logo-dark-only { display: none; }
[data-theme="light"] .logo-light-only { display: block; filter: brightness(0); }
/* Si un seul logo fourni : inversion auto selon thème */
[data-theme="dark"] .logo-img:not(.logo-dark-only):not(.logo-light-only) { filter: brightness(0) invert(1); }
[data-theme="light"] .logo-img:not(.logo-dark-only):not(.logo-light-only) { filter: brightness(0); }

/* Sidebar collapsed — logo smaller */
.sidebar.collapsed .logo-img {
  max-width: 6px;
  max-height: 6px;
}

/* Initials fallback when no logo uploaded */
.logo-initials {
  width: 40px; height: 40px;
  border-radius: 6px;
  background: var(--acc);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  font-family: var(--fd);
  flex-shrink: 0;
}

/* Legacy logo-icon support */
.sidebar-logo .logo-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--acc);
  flex-shrink: 0;
}

/* Logo text hidden — logo only */
.sidebar-logo .logo-text,
.logo-text {
  display: none;
  font-family: var(--fd);
  font-size: 16px;
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity 0.2s ease, width 0.2s ease;
}

/* Hide logo text when sidebar collapsed */
.sidebar.collapsed .logo-text {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

.sidebar-logo-link {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

/* Custom logo in sidebar (legacy) */
.sidebar-custom-logo {
  height: 36px;
  width: 36px;
  border-radius: 6px;
  object-fit: contain;
  flex-shrink: 0;
  transition: height 0.3s ease;
}
.sidebar.collapsed .sidebar-custom-logo {
  height: 6px;
  width: 6px;
}

/* Collapse toggle button — at bottom of sidebar */
.sidebar-collapse-btn {
  width: 100%;
  height: 40px;
  border-radius: 0;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--t2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-family: var(--font-body);
  transition: background 0.15s, color 0.15s;
  padding: 0 16px;
  margin: 0;
}
.sidebar-collapse-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--t1);
}
[data-theme="light"] .sidebar-collapse-btn {
  border-top-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .sidebar-collapse-btn:hover {
  background: rgba(0, 0, 0, 0.04);
}
.sidebar-collapse-btn i {
  transition: transform 0.3s ease;
  font-size: 14px;
  flex-shrink: 0;
}

.sidebar-nav {
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sidebar-section {
  padding: 20px 0 8px;
}

.sidebar-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  padding: 0 16px;
  margin-bottom: 8px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.2s ease;
}
.sidebar-section-title::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--section-color, var(--text-muted));
  flex-shrink: 0;
}
.sidebar-section[data-section="dashboard"] { --section-color: var(--section-dashboard); }
.sidebar-section[data-section="gestion"] { --section-color: var(--accent-light); }
.sidebar-section[data-section="compta"] { --section-color: var(--section-compta); }
.sidebar-section[data-section="settings"] { --section-color: var(--section-settings); }

.sidebar-item {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  font-size: 10px;
  color: var(--t2);
  font-weight: 400;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  margin: 1px 8px;
  width: auto;
  border-left: none;
  flex-shrink: 1;
  min-height: 0;
}
.nav-group-items .sidebar-item .material-symbols-outlined {
  font-size: 13px;
  width: 13px; height: 13px;
}

/* Sidebar item text label (for collapse hide) */
.sidebar-item-text {
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.sidebar-item:not(.active):hover {
  background: linear-gradient(90deg, rgba(var(--acc-rgb), 0.10) 0%, transparent 100%);
  color: var(--acc);
}
[data-theme="light"] .sidebar-item:not(.active):hover {
  background: linear-gradient(90deg, rgba(var(--acc-rgb), 0.08) 0%, transparent 100%);
  color: var(--acc);
}

/* Sidebar item actif — Phase 4 Glass Unified
   Ancien (rollback Phase 4) :
     background: rgba(0,0,0,0.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
   Phase 4 : transparence semi forte sur la sidebar glass (color-relative).
   Dark : noir 0.35 conserve, lisible sur sidebar bleu nuit 0.75.
   Light : blanc 0.5 (au lieu de noir 0.35 qui faisait tache foncee). */
.sidebar-item.active {
  position: relative;
  color: #f0f0f0;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.10);
  border-left: none;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.15s ease;
}
[data-theme="dark"] .sidebar-item.active {
  background: rgba(255, 255, 255, 0.08);
  color: #f0f0f0;
}
[data-theme="light"] .sidebar-item.active {
  background: rgba(0, 0, 0, 0.06);
  color: var(--t1);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.sidebar-item.active::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--acc-rgb), 0.55) 0%, rgba(var(--acc-rgb), 0.22) 40%, transparent 75%);
  filter: blur(4px);
  pointer-events: none;
  z-index: 0;
  display: block;
}

.sidebar-item.active::after {
  display: none;
}

.sidebar-item.active .icon-medium,
.sidebar-item.active .material-symbols-outlined,
.sidebar-item.active svg,
.sidebar-item.active .sidebar-item-text {
  position: relative;
  z-index: 1;
}

.sidebar-item.active .material-symbols-outlined {
  color: var(--acc);
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

[data-theme="light"] .sidebar-item.active {
  background: rgba(0, 0, 0, 0.55);
  color: #f0f0f0;
  border-left: none;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.sidebar-item svg,
.sidebar-item .material-symbols-outlined {
  width: 18px; height: 18px;
  font-size: 18px;
  color: var(--t2);
  opacity: 0.8;
  flex-shrink: 0;
  transition: color 0.3s ease, opacity 0.3s ease;
}
.sidebar-item:not(.active):hover svg,
.sidebar-item:not(.active):hover .material-symbols-outlined { opacity: 0.8; color: var(--t1); }
.sidebar-item.active svg,
.sidebar-item.active .material-symbols-outlined,
.sidebar-item.active .icon-medium {
  opacity: 1;
  color: var(--acc);
  filter: drop-shadow(0 0 6px rgba(var(--acc-rgb), 0.65)) drop-shadow(0 0 2px rgba(var(--acc-rgb), 0.4));
}

.sidebar-item .badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  font-family: var(--font-mono);
  overflow: hidden;
  transition: opacity 0.2s ease;
}
.sidebar-item .badge.badge-danger {
  background: var(--red-dim);
  color: var(--red);
}
.sidebar-item .badge:not(.badge-danger) {
  background: var(--accent-dim);
  color: var(--accent-light);
}

.sidebar-divider {
  margin: 8px 12px;
  border-top: .5px solid var(--border);
}

.sidebar-bottom {
  margin-top: auto;
  padding: 0;
  border-top: none;
  flex-shrink: 0;
}

.sync-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border: .5px solid var(--border);
  border-radius: 5px;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.2s;
  overflow: hidden;
  white-space: nowrap;
}
.sync-btn:hover {
  border-color: var(--accent);
  color: var(--accent-light);
  background: var(--accent-glow);
}
.sync-btn svg, .sync-btn .material-symbols-outlined { width: 18px; height: 18px; font-size: 18px; flex-shrink: 0; overflow: hidden; }
.sync-btn > span:last-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sync-btn.syncing svg, .sync-btn.syncing .material-symbols-outlined { animation: spin 1s linear infinite; display: inline-block; }
.sync-time {
  font-size: 10px; color: var(--text-muted);
  padding: 6px 12px 0;
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* ─── SIDEBAR PLAN INDICATOR — minimal, calme, pas de gradient ─── */
.sidebar-plan-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 12px 0;
  padding: 6px 10px;
  border-radius: 8px;
  font-family: var(--f);
  font-size: 10.5px;
  color: var(--t3);
  text-decoration: none;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar-plan-indicator:hover {
  color: var(--t1);
  background: rgba(255, 255, 255, 0.04);
}
[data-theme="light"] .sidebar-plan-indicator:hover {
  background: rgba(15, 23, 42, 0.04);
}
.sidebar-plan-indicator .plan-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sidebar-plan-indicator .plan-dot.active {
  background: var(--ok, #22c55e);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}
.sidebar-plan-indicator .plan-dot.inactive {
  background: var(--t4, #64748b);
}
.sidebar-plan-indicator .plan-text {
  flex: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-plan-indicator .plan-link {
  color: var(--t3);
  font-weight: 500;
  font-size: 10px;
  flex-shrink: 0;
  border-left: 1px solid var(--brd);
  padding-left: 8px;
  transition: color 0.15s;
}
.sidebar-plan-indicator:hover .plan-link {
  color: var(--acc);
}

/* Legacy plan card (au cas où une page l'utilise encore) — masqué */
.sidebar-plan-card {
  display: none !important;
}
.plan-card-inner {
  position: relative;
  padding: 5px 12px 5px 6px;
  border-radius: 100px;
  overflow: hidden;
  background: linear-gradient(135deg, #6366f1 0%, #a78bfa 50%, #fb923c 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
}
.plan-card-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 50%, rgba(251, 146, 60, 0.35) 0%, transparent 60%);
  pointer-events: none;
}
.plan-card-inner > * { position: relative; z-index: 1; }

/* Version compacte : on masque le label "Votre forfait", le nom du plan
   et la date. On garde uniquement le badge "Actif/Aucun" + le bouton. */
.plan-card-name,
.plan-card-date,
.plan-card-label {
  display: none;
}
.plan-card-header {
  display: contents; /* le badge devient enfant direct de .plan-card-inner */
}

/* Badge "Actif/Aucun" : conservé en version mini */
.plan-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-body);
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  flex-shrink: 0;
}
.plan-card-badge.active { color: #fff; }
.plan-card-badge.inactive { color: rgba(255,255,255,0.85); }
.plan-badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.plan-card-badge.active .plan-badge-dot { background: #34d399; }
.plan-card-badge.inactive .plan-badge-dot { background: rgba(255,255,255,0.4); }

/* Bouton "Abonnement" : texte simple, pas de fond, juste une étiquette
   à droite du badge. On affiche le mot court "Abonnement" peu importe le
   contenu HTML grâce à font-size:0 sur le texte original puis ::after. */
.plan-card-btn {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: none;
  background: transparent;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0;            /* masque "Gestion abonnement" */
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  transition: opacity 0.2s ease;
  position: relative;
}
.plan-card-btn::after {
  content: 'Abonnement';
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #fff;
  /* Légère ombre pour la lisibilité sur le gradient */
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.20);
}
.plan-card-btn:hover,
.plan-card-btn:focus,
.plan-card-btn:active {
  opacity: 1;
  background: transparent !important;
  text-decoration: none;
}
.plan-card-btn:hover::after,
.plan-card-btn:focus::after,
.plan-card-btn:active::after {
  text-decoration: none !important;
}
/* Override de l'ancien hover (legacy) — on garde le texte simple sans effet */
.plan-card-btn:hover {
  background: transparent !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ─── SIDEBAR COLLAPSED STATE (desktop) ─── */
.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
  min-width: var(--sidebar-collapsed-width);
}
.sidebar.collapsed .sidebar-logo {
  justify-content: center;
  padding: 6px 8px;
  overflow: hidden;
}
.sidebar.collapsed .sidebar-logo-link {
  justify-content: center;
  overflow: hidden;
}
.sidebar.collapsed .sidebar-logo .logo-text {
  display: none;
}
.sidebar.collapsed .sidebar-logo .logo-icon {
  margin: 0;
}
.sidebar.collapsed .sidebar-section {
  padding: 12px 8px 4px;
}
.sidebar.collapsed .sidebar-section-title {
  display: none;
}
/* Nav groups in collapsed sidebar */
.sidebar.collapsed .nav-group {
  padding: 2px 0;
}
.sidebar.collapsed .nav-group-header {
  display: none;
}
.sidebar.collapsed .nav-group-items {
  padding-left: 0;
  margin-left: 0;
  border-left: none;
}
.sidebar.collapsed .nav-group-items .sidebar-item {
  justify-content: center;
  padding: 10px;
  gap: 0;
}
.sidebar.collapsed .nav-group-items .sidebar-item-text {
  display: none;
}
.sidebar.collapsed .nav-group-items .sidebar-item .badge {
  display: none;
}
.sidebar.collapsed .sidebar-item {
  justify-content: center;
  padding: 8px 0;
  margin: 2px 0;
  gap: 0;
  overflow: visible;
}
.sidebar.collapsed .sidebar-item-text,
.sidebar.collapsed .sidebar-item .badge {
  display: none;
}
.sidebar.collapsed .sidebar-item svg,
.sidebar.collapsed .sidebar-item .material-symbols-outlined {
  width: 28px; height: 28px;
  font-size: 26px;
  flex-shrink: 0;
  min-width: 28px;
}
.sidebar.collapsed .sidebar-item .icon-glass,
.sidebar.collapsed .nav-group-items .sidebar-item .icon-glass {
  width: 28px !important; height: 28px !important;
  min-width: 28px !important; flex-shrink: 0 !important;
}
.sidebar.collapsed .sidebar-item.active::before {
  display: none;
}
.sidebar.collapsed .sidebar-item:hover {
  transform: none;
}
.sidebar.collapsed .sidebar-divider {
  margin: 4px 8px;
}
.sidebar.collapsed .sidebar-bottom {
  padding: 0;
}
.sidebar.collapsed .sync-btn {
  justify-content: center;
  padding: 10px;
  gap: 0;
}
.sidebar.collapsed .sync-btn span {
  display: none;
}
.sidebar.collapsed .sync-time {
  display: none;
}
.sidebar.collapsed .sidebar-logout {
  justify-content: center;
}
.sidebar.collapsed .sidebar-collapse-btn {
  width: 100%;
  height: 40px;
  padding: 0;
  border-radius: 0;
  margin: 0;
}
.sidebar.collapsed .sidebar-collapse-btn i {
  transform: rotate(180deg);
}

/* ─── SIDEBAR TOOLTIP (collapsed) ─── */
.sidebar-tooltip {
  position: fixed;
  left: calc(var(--sidebar-collapsed-width) + 8px);
  padding: 6px 12px;
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.sidebar-tooltip.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ─── MAIN CONTENT ─── */
.main {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background: transparent;
  transition: none;
}
.main.sidebar-collapsed { margin-left: 0; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 6px;
  border-bottom: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  height: 44px;
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 200;
  overflow: visible;
  border-radius: 5px 16px 0 0;
  transition: background 0.25s ease, backdrop-filter 0.25s ease;
}
.topbar.scrolled {
  background: rgba(26,29,36,0.50);
  backdrop-filter: blur(30px) saturate(1.2);
  -webkit-backdrop-filter: blur(30px) saturate(1.2);
}
[data-theme="light"] .topbar.scrolled {
  background: rgba(245,243,240,0.50);
}
[data-theme="light"] .topbar {
  background: transparent;
}

.topbar-left {
  display: flex; align-items: center; gap: 12px;
}

.topbar-nav-btns {
  display: flex;
  align-items: center;
  gap: 4px;
}
.topbar-nav-btn {
  display: flex; align-items: center; justify-content: center;
  min-width: 28px; min-height: 28px;
  width: 28px; height: 28px;
  border-radius: 3px;
  background: transparent;
  border: none;
  color: var(--t3);
  cursor: pointer;
  transition: all 0.12s;
  text-decoration: none;
  font-family: var(--f);
}
.topbar-nav-btn .material-symbols-outlined { font-size: 16px; }
.topbar-nav-btn:hover, .topbar-nav-btn:active {
  border-color: transparent;
  color: var(--acc);
  background: transparent;
}
.topbar-nav-btn svg {
  width: 18px; height: 18px;
}

.topbar-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-muted);
}
.topbar-breadcrumb span:last-child { color: var(--text-primary); font-weight: 500; }

.topbar-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--r-xl);
}
.topbar-status.online {
  background: var(--green-dim);
  color: var(--green);
}
.topbar-status.offline {
  background: var(--orange-dim);
  color: var(--orange);
}
.topbar-status .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  animation: pulse 2s infinite;
}
.topbar-status.online .dot { background: var(--green); }
.topbar-status.offline .dot { background: var(--orange); }

.topbar-timer {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px;
  background: var(--accent-glow);
  border: .5px solid rgba(59,130,246,0.2);
  border-radius: var(--r-xl);
  font-size: 12px;
  color: var(--accent-light);
  font-family: var(--font-mono);
  font-weight: 500;
  animation: pulseGlow 2s ease-in-out infinite;
}
.topbar-timer .timer-stop {
  background: var(--red);
  color: var(--text-on-accent);
  border: none;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 10px;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
}

.topbar-right {
  display: flex; align-items: center; gap: 10px;
  margin-right: 14px;
  font-size: 12px; color: var(--text-muted);
  font-family: var(--font-mono);
}

.topbar-right .user-badge {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 6px;
  background: rgba(255, 255, 255, 0.05);
  border: .5px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-secondary);
}
.user-badge .avatar {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dim));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--text-on-accent);
}

/* SVG inline icons */
.ms-icon { display: inline-block; vertical-align: middle; fill: currentColor; flex-shrink: 0; }

/* Header icon buttons (settings, PDF, users) */
.topbar-icon-btn {
  width: 6px; height: 6px;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.topbar-icon-btn .material-symbols-outlined,
.topbar-icon-btn .ms-icon {
  font-size: 20px;
  transition: transform 0.25s cubic-bezier(.16,1,.3,1);
}
.topbar-icon-btn:hover { background: transparent; color: var(--acc); }
.topbar-icon-btn:hover .material-symbols-outlined,
.topbar-icon-btn:hover .ms-icon { transform: scale(1.12); }
.topbar-icon-btn:hover .icon-glass { transform: scale(1.12); filter: brightness(0) saturate(100%) opacity(0.8); filter: var(--icon-glass-hover-filter, brightness(1.3)); }
.topbar-icon-btn .icon-glass { transition: transform 0.2s ease, filter 0.2s ease; }
.topbar-nav-btn .icon-glass { transition: transform 0.2s ease, filter 0.2s ease; }
.topbar-nav-btn:hover .icon-glass { transform: scale(1.12); }
.topbar-icon-btn.active { color: var(--accent); }

/* Bare icon buttons (no border/background) */
.topbar-icon-bare {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  width: 6px; height: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--t3);
  cursor: pointer;
  transition: color 0.15s;
  padding: 0;
}
.topbar-icon-bare:hover { color: var(--t1); }
.topbar-icon-bare .material-symbols-outlined { font-size: 20px; }

/* Settings icon — spin on hover */
.topbar-settings:hover .ms-icon { transform: rotate(90deg) scale(1.15); }
/* PDF icon — tilt on hover */
.topbar-pdf:hover .ms-icon { transform: scale(1.15) rotate(-8deg); }
/* Users icon — bounce on hover */
.topbar-users:hover .ms-icon { transform: scale(1.2) translateY(-2px); }
/* Sync icon — half-spin on hover */
.topbar-sync:hover .ms-icon { transform: rotate(180deg) scale(1.15); }
/* Logout icon — red + slide right */
.topbar-logout { color: #EF4444; }
.topbar-logout:hover { background: rgba(239,68,68,0.1); color: #F87171; }
.topbar-logout:hover .ms-icon { transform: scale(1.15) translateX(3px); }

.topbar-sep { width: 1px; height: 20px; background: var(--border-subtle, rgba(255,255,255,0.08)); flex-shrink: 0; }
.topbar-icon-btn.syncing .material-symbols-outlined,
.topbar-icon-btn.syncing .ms-icon { animation: spin-sync 1s linear infinite; }
@keyframes spin-sync { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ─── HEADER DROPDOWN MENU ─── */
.header-more-btn.active {
  background: rgba(var(--acc-rgb), 0.15);
  border-color: rgba(var(--acc-rgb), 0.3);
}
/* Header dropdown — Phase 4 Glass Unified
   Ancien (rollback Phase 4) :
     background: rgba(10,10,20,0.04); blur 5px; border rgba(255,255,255,0.10)
     light : background: rgba(245,243,240,0.05); border rgba(70,60,120,0.12)
   Phase 4 : var(--glass-bg-strong) (modale-like) + var(--glass-blur). */
.header-dropdown {
  position: fixed;
  top: auto;
  right: auto;
  width: 200px;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur) saturate(180%);
  -webkit-backdrop-filter: var(--glass-blur) saturate(180%);
  border: var(--glass-border);
  border-radius: 28px;
  box-shadow: var(--glass-shadow-strong);
  padding: 16px;
  z-index: 99999;
  animation: hdDropIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes hdDropIn {
  from { opacity: 0; transform: scale(0.95) translateY(-4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
/* light : herite des tokens light, plus besoin de surcharge dediee */
.header-dropdown-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--t2);
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
  opacity: 0;
  transform: translateX(-6px);
  animation: hdItemIn 0.25s ease forwards;
}
@keyframes hdItemIn {
  to { opacity: 1; transform: translateX(0); }
}
.header-dropdown-item:hover {
  background: linear-gradient(
    to right,
    rgba(var(--acc-rgb), 0.15) 0%,
    rgba(var(--acc-rgb), 0.05) 60%,
    transparent 100%
  );
  color: var(--t1);
}
.header-dropdown-item:hover .hd-icon-box {
  background: rgba(var(--acc-rgb), 0.15);
}
.header-dropdown-item:hover .hd-icon-box .material-symbols-outlined {
  color: var(--accl);
}
.hd-icon-box {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
[data-theme="light"] .hd-icon-box {
  background: rgba(0, 0, 0, 0.04);
}
.hd-icon-box .material-symbols-outlined,
.hd-icon-box .hgi-stroke {
  font-size: 14px;
  color: var(--t3);
  transition: color 0.15s;
}
.hd-item-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hd-item-label {
  font-size: 11px;
  font-weight: 500;
  font-family: var(--fd);
  color: var(--t2);
  transition: color 0.15s;
}
.header-dropdown-item:hover .hd-item-label { color: var(--t1); }
.hd-item-desc {
  font-size: 9.5px;
  color: var(--t3);
  font-family: var(--f);
}
.hd-item-arrow {
  font-size: 12px;
  color: var(--t4);
  opacity: 0;
  transition: opacity 0.15s;
}
.header-dropdown-item:hover .hd-item-arrow {
  opacity: 1;
}

/* ─── CONTENT AREA ─── */
.content {
  padding: 28px 36px;
  background: transparent;
}

.page-header {
  margin-bottom: 12px;
}
.page-header h1, h1.page-title {
  font-size: 6px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text-primary);
}
h2.section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.page-header .subtitle {
  font-size: 14px;
  color: var(--t2, #b0b6c3);
  margin-top: 4px;
}
.page-header .update-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding: 3px 10px;
  background: var(--accent-glow);
  border: .5px solid rgba(59,130,246,0.2);
  color: var(--accent-light);
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ─── TIMER BANNER ─── */
.timer-banner {
  background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(59,130,246,0.05));
  border: .5px solid rgba(59,130,246,0.2);
  border-radius: 5px;
  padding: 16px 6px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  animation: pulseGlow 2s ease-in-out infinite;
}
.timer-banner-left {
  display: flex; align-items: center; gap: 16px;
}
.timer-banner-icon {
  font-size: 6px;
}
.timer-banner-info .timer-project {
  font-size: 15px; font-weight: 600; color: var(--text-primary);
}
.timer-banner-info .timer-pln {
  font-size: 11px; color: var(--text-muted); margin-top: 2px;
}
.timer-banner-time {
  font-size: 28px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--accent-light);
  letter-spacing: -1px;
}
.timer-banner .btn-stop {
  background: var(--red);
  color: var(--text-on-accent);
  border: none;
  padding: 8px 20px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.15s;
}
.timer-banner .btn-stop:hover {
  background: color-mix(in srgb, var(--red) 80%, black);
}

/* ─── KPI CARDS ROW ─── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 6px;
}

/* ─── KPI CARDS — Orbit Glow ─── */
.kpi-card {
  background: var(--card);
  border: 1px solid var(--brd);
  border-radius: var(--r-xl);
  padding: 22px 24px;
  height: 130px;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  background-clip: padding-box;
  transition: all 0.2s ease;
}

/* KPI card glow effects — disabled for clean Orbit look */
.kpi-card::before,
.kpi::before,
.kpi-card::after { display: none; }
.kpi-card > * { position: relative; z-index: 1; }
.kpi-inner-shine { display: none; }

/* Show icon circles — Orbit style */
.kpi-card .kpi-icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 5px;
  font-size: 1.25rem;
  flex-shrink: 0;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.7;
}


.kpi-card-inner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.kpi-card-content {
  flex: 1;
  min-width: 0;
}

.kpi-card .kpi-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: none;
  color: var(--t2);
  margin-bottom: 8px;
}

.kpi-card .kpi-value, .kpi-val {
  /* Fluide : ~22px sur petits laptops → 36px sur grands écrans.
     Évite la troncature "82 00..." quand on a 5 cards en ligne. */
  font-size: clamp(20px, 2.1vw, 36px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--t1);
  font-family: var(--fd);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  /* Pas d'ellipsis : le clamp() suffit à garder la valeur lisible en entier */
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
/* Override : neutralise la troncature ellipsis du legacy `.kpi-value`
   (ligne ~4722) qui s'applique aussi aux .kpi-card .kpi-value et masque les
   chiffres dès que la card est étroite. */
.kpi-card .kpi-value {
  overflow: visible !important;
  text-overflow: clip !important;
}

.kpi-card .kpi-sub {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--t3);
}

.kpi-trend {
  display: inline-flex; align-items: center; gap: 3px;
  font-weight: 600;
  font-family: var(--font-mono);
  font-size: 12px;
}
.kpi-trend.up { color: var(--green); }
.kpi-trend.down { color: var(--red); }

.kpi-card .kpi-detail {
  font-size: 12px;
  color: var(--text-muted);
}

/* KPI accent bar — hidden */
.kpi-card .kpi-accent-bar {
  display: none;
  background: var(--accent);
}
.kpi-card[data-kpi="ca"] .kpi-accent-bar { background: var(--accent); }
.kpi-card[data-kpi="devis"] .kpi-accent-bar { background: var(--violet); }
.kpi-card[data-kpi="factures"] .kpi-accent-bar { background: var(--orange); }
.kpi-card[data-kpi="heures"] .kpi-accent-bar { background: var(--cyan); }
.kpi-card[data-kpi="resultat"] .kpi-accent-bar { background: var(--emerald); }
.kpi-card[data-kpi="depenses"] .kpi-accent-bar { background: var(--red); }
.kpi-card[data-kpi="benefice"] .kpi-accent-bar { background: var(--emerald); }

/* Compta card-strato — no left border */
.card-strato[data-accent="blue"],
.card-strato[data-accent="green"],
.card-strato[data-accent="red"],
.card-strato[data-accent="orange"],
.card-strato[data-accent="violet"],
.card-strato[data-accent="emerald"],
.card-strato[data-accent="cyan"] { border-left: none; }

/* ─── TWO COLUMN LAYOUT ─── */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 6px;
}

.card {
  background: var(--card);
  border-radius: var(--r-lg);
  overflow: visible;
  transition: all 0.2s ease;
  position: relative;
  border: 1px solid transparent;
  background-clip: padding-box;
}
/* ═══ ORBIT CARD — subtle inner glow, motion hover ═══ */
.card {
  background: var(--card);
  border: 1px solid var(--brd);
  border-radius: var(--r-xl);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
/* hover lift géré par auraos.css */
/* Card glow effects — disabled for clean Orbit look */
.card::before,
.card::after { display: none; }
.card > * { position: relative; z-index: 1; }
[data-theme="light"] .card {
  background: linear-gradient(135deg, rgba(0,0,0,0.01) 0%, rgba(0,0,0,0.005) 40%, rgba(0,0,0,0.02) 100%);
  border: 1px solid rgba(0,0,0,0.06);
}
[data-theme="light"] .card::before {
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.5) 0%, transparent 70%);
}
[data-theme="light"] .card::after {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.8) 30%, rgba(255,255,255,0.3) 70%, transparent 100%);
}

.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 6px 16px;
  border-bottom: 1px solid var(--brd);
}

.card-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--t1);
  font-family: var(--fd);
}
.card-title::before { display: none; }

.card-action {
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  transition: all 0.15s;
  border: .5px solid transparent;
  background: none;
  font-family: var(--font-body);
}
.card-action:hover {
  color: var(--accent-light);
  background: var(--accent-glow);
  border-color: rgba(59,130,246,0.15);
}

.card-body {
  padding: 20px;
}

/* ─── INDICATORS ─── */
.indicators-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.indicator {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  border: .5px solid rgba(255, 255, 255, 0.06);
}
.indicator .ind-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 2px;
}
.indicator .ind-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-family: var(--font-mono);
}
.indicator .ind-value {
  font-size: 6px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}
.indicator .ind-value.blue { color: var(--accent-light); }
.indicator .ind-value.green { color: var(--green); }

.indicator-wide {
  grid-column: 1 / -1;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  border: .5px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.indicator-wide .ind-left .ind-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  font-weight: 500;
}
.indicator-wide .ind-left .ind-val {
  font-size: 18px; font-weight: 700;
  color: var(--accent-light);
  margin-top: 4px;
}
.indicator-wide .ind-right {
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
  font-family: var(--font-mono);
}

/* ─── PROJECTS TABLE ─── */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.projects-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
  table-layout: fixed;
}
.projects-table th,
.projects-table td { overflow: hidden; text-overflow: ellipsis; }
/* Col widths: Projet | Client | Phase | Statut | Avancement | Rendu | Temps | Taux | Montant */
.projects-table th:nth-child(1),
.projects-table td:nth-child(1) { width: 18%; }
.projects-table th:nth-child(2),
.projects-table td:nth-child(2) { width: 11%; }
.projects-table th:nth-child(3),
.projects-table td:nth-child(3) { width: 7%; }
.projects-table th:nth-child(4),
.projects-table td:nth-child(4) { width: 11%; }
.projects-table th:nth-child(5),
.projects-table td:nth-child(5) { width: 13%; }
.projects-table th:nth-child(6),
.projects-table td:nth-child(6) { width: 10%; }
.projects-table th:nth-child(7),
.projects-table td:nth-child(7) { width: 11%; }
.projects-table th:nth-child(8),
.projects-table td:nth-child(8) { width: 10%; }
.projects-table th:nth-child(9),
.projects-table td:nth-child(9) { width: 9%; }
.projects-table th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  font-weight: 500;
  text-align: left;
  padding: 0 12px 8px;
  border-bottom: .5px solid var(--border);
  white-space: nowrap;
}
.projects-table td {
  padding: 6px 12px;
  font-size: 13px;
  color: var(--t1);
  border-bottom: .5px solid var(--border-subtle);
  vertical-align: middle;
  line-height: 1.3;
}
.projects-table tr:last-child td { border-bottom: none; }
.projects-table tr:hover td { background: var(--bg-secondary); }

/* ─── PROJECT LIST GRID (replaces table for drag & drop) ─── */
.proj-list-grid { width: 100%; }

.proj-list-header {
  display: grid;
  grid-template-columns: 2fr 1fr 0.7fr 0.7fr 0.8fr 1.5fr 1fr 1fr 0.8fr 1fr;
  gap: 8px;
  padding: 5px 14px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--t2, #b0b6c3);
  border-bottom: none;
}
/* Show header separator only when rows follow */
.proj-list-header:not(:last-child) {
  border-bottom: 1px solid var(--brd);
}

.proj-list-row {
  display: grid;
  grid-template-columns: 2fr 1fr 0.7fr 0.7fr 0.8fr 1.5fr 1fr 1fr 0.8fr 1fr;
  gap: 8px;
  padding: 8px 14px;
  align-items: center;
  font-size: 12.5px;
  color: var(--t1);
  border-bottom: 1px solid var(--brd);
  transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.proj-list-row:hover {
  background: rgba(255,255,255,0.03);
}
[data-theme="light"] .proj-list-row:hover {
  background: rgba(0,0,0,0.025);
}

.proj-list-row:last-child {
  border-bottom: none;
}

/* Drag styles work perfectly on grid divs */
.proj-list-row.sortable-chosen {
  background: var(--card) !important;
  border: 1.5px solid var(--acc) !important;
  border-radius: 6px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
  z-index: 9999;
}

/* ─── Priority badge ─── */
.priorite-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
  font-family: var(--f);
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter 0.15s;
  white-space: nowrap;
}
.priorite-badge:hover {
  filter: brightness(1.15);
}

.project-name {
  color: var(--text-primary);
  font-weight: 500;
}
.project-name a {
  color: var(--text-primary);
  transition: color 0.15s;
}
.project-name a:hover {
  color: var(--accent-light);
}

/* ─── STATUS BADGES WITH GLOW ─── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  transition: box-shadow 0.3s ease, background 0.3s ease;
  white-space: nowrap;
}
.status-badge:hover {
  filter: brightness(1.1);
}

/* Dashboard project statuses — glow pills */
.status-badge.s-a_faire {
  background: rgba(156, 163, 175, 0.12);
  color: #f6f6f6;
  border: .5px solid rgba(156, 163, 175, 0.2);
  box-shadow: 0 0 14px rgba(156, 163, 175, 0.25);
}
.status-badge.s-en_cours {
  background: rgba(59, 130, 246, 0.12);
  color: #3B82F6;
  border: .5px solid rgba(59, 130, 246, 0.2);
  box-shadow: 0 0 14px rgba(59, 130, 246, 0.35);
}
.status-badge.s-a_envoyer {
  background: rgba(245, 158, 11, 0.12);
  color: #F59E0B;
  border: .5px solid rgba(245, 158, 11, 0.2);
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.30);
}
.status-badge.s-en_attente {
  background: rgba(245, 158, 11, 0.12);
  color: #F59E0B;
  border: .5px solid rgba(245, 158, 11, 0.2);
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.30);
}
.status-badge.s-a_facturer {
  background: rgba(168, 85, 247, 0.12);
  color: #A855F7;
  border: .5px solid rgba(168, 85, 247, 0.2);
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.30);
}
.status-badge.s-termine {
  background: rgba(34, 197, 94, 0.12);
  color: #22C55E;
  border: .5px solid rgba(34, 197, 94, 0.2);
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.35);
}
.status-badge.s-archive {
  background: rgba(100, 116, 139, 0.12);
  color: #f6f6f6;
  border: .5px solid rgba(100, 116, 139, 0.2);
  box-shadow: 0 0 14px rgba(100, 116, 139, 0.20);
}

/* Compta status badges — glow pills */
.status-badge.s-brouillon {
  background: rgba(168, 85, 247, 0.12);
  color: #A855F7;
  border: .5px solid rgba(168, 85, 247, 0.2);
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.30);
}
.status-badge.s-envoye, .status-badge.s-envoyee {
  background: rgba(59, 130, 246, 0.12);
  color: #3B82F6;
  border: .5px solid rgba(59, 130, 246, 0.2);
  box-shadow: 0 0 14px rgba(59, 130, 246, 0.35);
}
.status-badge.s-accepte {
  background: rgba(34, 197, 94, 0.12);
  color: #22C55E;
  border: .5px solid rgba(34, 197, 94, 0.2);
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.35);
}
.status-badge.s-modifie {
  background: rgba(245, 158, 11, 0.12);
  color: #F59E0B;
  border: .5px solid rgba(245, 158, 11, 0.2);
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.35);
}
.status-badge.s-refuse {
  background: rgba(239, 68, 68, 0.12);
  color: #EF4444;
  border: .5px solid rgba(239, 68, 68, 0.2);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.35);
}
.status-badge.s-expire {
  background: rgba(156, 163, 175, 0.12);
  color: #f6f6f6;
  border: .5px solid rgba(156, 163, 175, 0.2);
  box-shadow: 0 0 14px rgba(156, 163, 175, 0.25);
}
.status-badge.s-payee {
  background: rgba(34, 197, 94, 0.12);
  color: #22C55E;
  border: .5px solid rgba(34, 197, 94, 0.2);
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.35);
}
.status-badge.s-impayee, .status-badge.s-en_retard {
  background: rgba(239, 68, 68, 0.12);
  color: #EF4444;
  border: .5px solid rgba(239, 68, 68, 0.2);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.35);
}
.status-badge.s-relancee {
  background: rgba(245, 158, 11, 0.12);
  color: #F59E0B;
  border: .5px solid rgba(245, 158, 11, 0.2);
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.30);
}

/* ─── CLIENT COLOR BADGES ─── */
.client-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  position: relative;
}

/* ─── CLIENT COLOR PICKER POPOVER ─── */
.client-color-picker {
  position: absolute;
  z-index: 1000;
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  background: var(--bg-card);
  border: .5px solid var(--border);
  border-radius: 5px;
  box-shadow: 0 8px 6px rgba(0,0,0,0.3);
  white-space: nowrap;
}
.client-color-picker .cc-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s, border-color 0.15s;
}
.client-color-picker .cc-dot:hover {
  transform: scale(1.25);
}
.client-color-picker .cc-dot.active {
  border-color: var(--text-primary);
}
.client-color-picker .cc-dot[data-c="0"] { background: var(--accent); }
.client-color-picker .cc-dot[data-c="1"] { background: var(--green); }
.client-color-picker .cc-dot[data-c="2"] { background: var(--orange); }
.client-color-picker .cc-dot[data-c="3"] { background: var(--violet); }
.client-color-picker .cc-dot[data-c="4"] { background: var(--pink); }
.client-color-picker .cc-dot[data-c="5"] { background: var(--cyan); }
.client-color-picker .cc-dot[data-c="6"] { background: var(--red); }
.client-color-picker .cc-dot[data-c="7"] { background: var(--emerald); }

.client-color-picker .cc-custom {
  width: 20px; height: 20px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--border);
  padding: 0;
  position: relative;
  overflow: hidden;
  background: conic-gradient(var(--red), var(--orange), var(--green), var(--accent), var(--violet), var(--pink), var(--red));
  transition: transform 0.15s;
  flex-shrink: 0;
}
.client-color-picker .cc-custom:hover { transform: scale(1.25); }
.client-color-picker .cc-custom input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
  border: none; padding: 0;
}
.client-c0 { background: var(--accent-glow); color: var(--accent-light); }
.client-c1 { background: var(--green-dim); color: var(--green); }
.client-c2 { background: var(--orange-dim); color: var(--orange); }
.client-c3 { background: var(--violet-dim); color: var(--violet); }
.client-c4 { background: var(--pink-dim); color: var(--pink); }
.client-c5 { background: var(--cyan-dim); color: var(--cyan); }
.client-c6 { background: var(--red-dim); color: var(--red); }
.client-c7 { background: var(--emerald-dim); color: var(--emerald); }

.progress-bar {
  width: 80px; height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.progress-bar .fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563EB, #60A5FA);
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-bar .fill.done,
.progress-range.done + .progress-bar .fill {
  background: linear-gradient(90deg, #10B981, #34D399);
}

/* ─── PROGRESS RANGE SLIDER ─── */
.progress-range {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 6px;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  background: linear-gradient(to right, var(--accd) var(--progress, 0%), rgba(255,255,255,0.1) var(--progress, 0%));
}
[data-theme="light"] .progress-range {
  background: linear-gradient(to right, var(--accd) var(--progress, 0%), #E5E7EB var(--progress, 0%));
}
.progress-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accd);
  border: 2.5px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  cursor: pointer;
  margin-top: -5px;
}
.progress-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accd);
  border: 2.5px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  cursor: pointer;
}
.progress-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 4px;
}
.progress-range::-moz-range-track {
  height: 6px;
  border-radius: 4px;
  background: transparent;
}
.progress-range.done {
  background: linear-gradient(to right, #22C55E var(--progress, 0%), rgba(255,255,255,0.1) var(--progress, 0%));
}
[data-theme="light"] .progress-range.done {
  background: linear-gradient(to right, #22C55E var(--progress, 0%), #E5E7EB var(--progress, 0%));
}
.progress-range.done::-webkit-slider-thumb { background: var(--green); }
.progress-range.done::-moz-range-thumb { background: var(--green); }

.amount {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  color: var(--text-primary);
}

.pln-col {
  font-size: 12px;
  color: var(--text-secondary);
}
.pln-col .pln-link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  background: var(--bg-secondary);
  border: .5px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.pln-col .pln-link:hover {
  border-color: var(--accent);
  color: var(--accent-light);
  background: var(--accent-glow);
}

.time-cumul {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  color: var(--accent-light);
}
.time-cumul.running {
  color: var(--red);
  animation: pulseGlow 2s ease-in-out infinite;
}

/* ─── PROJECT SECTIONS ─── */
.project-section {
  margin-bottom: 16px;
}
.project-section:last-child {
  margin-bottom: 0;
}

.project-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  margin-bottom: 4px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--section-color) 15%, transparent);
  cursor: pointer;
  user-select: none;
  position: relative;
}
.project-section-header::before {
  content: '';
  position: absolute;
  top: 6px; left: 0; bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--section-color);
}

.project-section-header .section-toggle {
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.project-section.collapsed .section-toggle {
  transform: rotate(-90deg);
}
.project-section.collapsed .projects-table,
.project-section.collapsed .proj-list-grid {
  display: none;
}

.project-section-header .section-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.project-section-header .section-label {
  font-size: 13.2px;
  font-weight: 600;
  color: var(--section-color, var(--text-primary));
  letter-spacing: 0.3px;
}

.project-section-header .section-count {
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-muted);
  background: var(--bg-secondary);
  border: .5px solid var(--border);
  padding: 1px 7px;
  border-radius: 6px;
}

/* ─── PLAY BUTTON ─── */
.btn-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  background: var(--green-dim);
  color: var(--green);
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
  flex-shrink: 0;
}
.btn-play svg {
  width: 10px;
  height: 10px;
  margin-left: 1px;
}
.btn-play:hover {
  background: var(--green);
  color: var(--text-on-accent);
  transform: scale(1.1);
}

/* ─── ADD TIME BUTTON + POPOVER ─── */
.btn-add-time {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--t2, #b0b6c3);
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0;
}
.projects-table tr:hover .btn-add-time,
.proj-list-row:hover .btn-add-time {
  opacity: 1;
}
.btn-add-time:hover {
  background: var(--accent-glow);
  color: var(--accent-light);
}

.btn-sub-time {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--t2, #b0b6c3);
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0;
}
.projects-table tr:hover .btn-sub-time,
.proj-list-row:hover .btn-sub-time {
  opacity: 1;
}
.btn-sub-time:hover {
  background: var(--red-dim);
  color: var(--red);
}

.add-time-popover {
  position: fixed;
  z-index: 9999;
  background: var(--bg-card);
  border: .5px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  box-shadow: 0 8px 6px rgba(0,0,0,0.3);
  min-width: 200px;
  animation: fadeInUp 0.15s ease;
}
.add-time-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.add-time-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
}
.add-time-input {
  width: 48px;
  padding: 6px 8px;
  background: var(--bg-secondary);
  border: .5px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-family: var(--font-mono);
  color: var(--text-primary);
  text-align: center;
}
.add-time-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}
.add-time-sep {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}
.add-time-actions {
  display: flex;
  gap: 6px;
}
.add-time-cancel {
  flex: 1;
  padding: 6px;
  background: transparent;
  border: .5px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  font-family: var(--font-body);
  cursor: pointer;
}
.add-time-cancel:hover {
  border-color: var(--text-muted);
}
.add-time-confirm {
  flex: 1;
  padding: 6px;
  background: var(--accent);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
}
.add-time-confirm:hover {
  background: var(--accent-dim);
}
.add-time-confirm.danger {
  background: var(--red);
}
.add-time-confirm.danger:hover {
  background: #dc2626;
}
.add-time-popover.sub-mode {
  border-color: rgba(239,68,68,0.2);
}
.add-time-popover.sub-mode .add-time-title {
  color: var(--red);
}

/* Inline time adjust (project detail) */
.time-adjust-inline {
  padding: 14px 16px;
  margin-bottom: 16px;
  background: var(--bg-secondary);
  border: .5px solid var(--border);
  border-radius: 6px;
  animation: fadeInUp 0.15s ease;
}
.time-adjust-inline.sub-mode {
  border-color: rgba(239,68,68,0.2);
}
.time-adjust-inline.sub-mode .add-time-title {
  color: var(--red);
}

/* ─── STATUS SELECT (inline dropdown) ─── */
.status-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: .5px solid var(--border);
  border-radius: var(--r-xl);
  padding: 3px 6px 3px 10px;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.15s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='%2355556a'%3E%3Cpath d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 8px;
}
.status-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}
.status-select.s-a_faire { color: #f6f6f6; background-color: rgba(156,163,175,0.15); border-color: rgba(156,163,175,0.25); }
.status-select.s-en_cours { color: #3B82F6; background-color: rgba(59,130,246,0.15); border-color: rgba(59,130,246,0.25); }
.status-select.s-a_envoyer { color: #F59E0B; background-color: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.25); }
.status-select.s-en_attente { color: #F59E0B; background-color: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.25); }
.status-select.s-a_facturer { color: #A855F7; background-color: rgba(168,85,247,0.15); border-color: rgba(168,85,247,0.25); }
.status-select.s-termine { color: #22C55E; background-color: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.25); }
.status-select.s-archive { color: #f6f6f6; background-color: rgba(100,116,139,0.12); border-color: rgba(100,116,139,0.20); }

/* Compta status-select */
.status-select.s-brouillon { color: #A855F7; background-color: rgba(168,85,247,0.15); border-color: rgba(168,85,247,0.25); }
.status-select.s-envoye, .status-select.s-envoyee { color: #3B82F6; background-color: rgba(59,130,246,0.15); border-color: rgba(59,130,246,0.25); }
.status-select.s-modifie { color: #F59E0B; background-color: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.25); }
.status-select.s-accepte { color: #22C55E; background-color: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.25); }
.status-select.s-refuse { color: #EF4444; background-color: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.25); }
.status-select.s-payee { color: #22C55E; background-color: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.25); }
.status-select.s-en_retard { color: #EF4444; background-color: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.25); }
.status-select.s-impayee { color: #EF4444; background-color: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.25); }
.status-select.s-relancee { color: #F59E0B; background-color: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.25); }

/* ─── VEILLE / NEWS SECTION ─── */

/* ─── CALENDAR MINI ─── */
.calendar-mini-weeks {
  display: grid;
  grid-template-columns: 28px repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 12px;
}
.cal-week-header {
  text-align: center;
  font-size: 9px;
  color: var(--text-muted);
  padding: 6px 0;
  font-weight: 500;
  opacity: 0.6;
}
.cal-day-header {
  text-align: center;
  font-size: 10px;
  color: var(--text-muted);
  padding: 6px 0;
  font-weight: 500;
}
.cal-week-num {
  text-align: center;
  font-size: 9px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  padding: 8px 0;
  opacity: 0.5;
  align-self: center;
}
.cal-day {
  text-align: center;
  padding: 8px 0;
  font-size: 12px;
  color: var(--text-secondary);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.1s;
  position: relative;
}
.cal-day:hover { background: var(--bg-card-hover); }
.cal-day.today {
  background: var(--accent);
  color: var(--text-on-accent);
  font-weight: 600;
}
.cal-day.selected {
  background: var(--accent-glow);
  border: .5px solid var(--accent);
  color: var(--accent-light);
  font-weight: 600;
}
.cal-day.today.selected {
  background: var(--accent);
  border: .5px solid var(--accent-light);
  color: var(--text-on-accent);
}
.cal-day.has-event::after {
  content: '';
  position: absolute;
  bottom: 3px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  background: var(--accent-light);
  border-radius: 50%;
}
.cal-day.other-month { color: var(--text-muted); opacity: 0.4; }

.cal-day-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 8px;
  padding: 0 4px;
}

.cal-empty {
  text-align: center;
  padding: 16px;
  color: var(--text-muted);
  font-size: 12px;
}

.cal-events {
  display: flex; flex-direction: column; gap: 8px;
}
.cal-event {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-radius: 5px;
  position: relative;
}
.cal-event::before {
  content: '';
  position: absolute;
  top: 10px; left: 0;
  width: 3px; height: 6px;
  border-radius: 0 3px 3px 0;
  background: var(--acc);
}
.cal-event .event-time {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--accent-light);
  font-weight: 500;
  min-width: 45px;
}
.cal-event .event-name {
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 500;
}
.cal-event .event-content {
  flex: 1; min-width: 0;
}
.cal-event .event-loc {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 1px;
}
.cal-event .event-delete {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 18px; line-height: 1;
  padding: 2px 6px; border-radius: 4px;
  opacity: 0; transition: opacity 0.15s, color 0.15s, background 0.15s;
  margin-left: auto; flex-shrink: 0;
}
.cal-event:hover .event-delete { opacity: 1; }
.cal-event .event-delete:hover {
  color: var(--red); background: rgba(239,68,68,0.1);
}

/* ─── HOURS CHART ─── */
.hours-bars {
  display: flex; flex-direction: column; gap: 12px;
}
.hours-row {
  display: flex; align-items: center; gap: 12px;
}
.hours-label {
  font-size: 12px;
  color: var(--text-secondary);
  min-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hours-bar-bg {
  flex: 1; height: 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  overflow: hidden;
}
.hours-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.8s ease;
}
.hours-value {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text-primary);
  font-weight: 500;
  min-width: 40px;
  text-align: right;
}

/* ─── FULL WIDTH SECTION ─── */
.grid-1 {
  margin-bottom: 6px;
}

/* ─── CHART PLACEHOLDER ─── */
.chart-container {
  position: relative;
  height: 200px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 0 4px 6px;
}

.chart-bar-group {
  flex: 1;
  display: flex;
  gap: 3px;
  align-items: flex-end;
  position: relative;
}
.chart-bar {
  flex: 1;
  border-radius: 4px 4px 0 0;
  min-width: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
}
.chart-bar.revenue {
  background: linear-gradient(180deg, var(--accent-light), var(--accent));
}
.chart-bar.expense {
  background: var(--chart-expense-bg);
}
/* chart-bar:hover scale removed — no zoom on chart bars */

.chart-label {
  position: absolute;
  bottom: -20px;
  left: 50%; transform: translateX(-50%);
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  white-space: nowrap;
}

.chart-legend {
  display: flex; gap: 20px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: .5px solid var(--border);
}
.chart-legend-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-secondary);
}
.chart-legend-dot {
  width: 8px; height: 8px; border-radius: 2px;
}

/* ─── CHART.JS CONTAINER ─── */
.chartjs-container {
  position: relative;
  height: 250px;
}

/* ─── FORMS — Orbit ─── */
.form-group {
  margin-bottom: 16px;
}
.form-group label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--t3);
  font-weight: 600;
  margin-bottom: 6px;
}
.form-control, .input-field {
  width: 100%;
  padding: 9px 14px;
  background: var(--inp);
  border: 1px solid var(--brd);
  border-radius: var(--r-sm);
  color: var(--t1);
  font-size: 13px;
  font-family: var(--f);
  transition: all 0.12s ease;
}
.form-control:focus, .input-field:focus {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 3px rgba(var(--acc-rgb), 0.08);
}
.form-control::placeholder, .input-field::placeholder { color: var(--t2); opacity: 0.8; }
[data-theme="light"] .form-control, [data-theme="light"] .input-field {
  background: var(--inp);
  border-color: var(--brd);
  color: var(--t1);
}
[data-theme="light"] .form-control::placeholder, [data-theme="light"] .input-field::placeholder {
  color: var(--t3);
}
select option {
  background: var(--elev);
  color: var(--t1);
}
[data-theme="light"] select option {
  background: #fff;
  color: #111;
}
select.form-control { cursor: pointer; }
textarea.form-control { resize: vertical; min-height: 80px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ─── BUTTONS — Orbit ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 5px 12px;
  min-height: 28px;
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
  border: none;
  font-family: var(--f);
  line-height: 1.2;
}
/* Small buttons (badges, inline actions) */
.btn-sm, .btn.btn-sm {
  min-height: 6px; padding: 6px 14px; font-size: 12px; border-radius: 100px;
}
/* Icon-only buttons */
.btn-icon {
  min-width: 36px; min-height: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer;
}
/* Global clickable touch target */
button, [role="button"], .clickable { cursor: pointer; }
.btn-primary, .btn-save, [class*="btn-accent"] {
  background: var(--acc);
  color: #fff;
  border: none;
}
.btn-primary:hover, .btn-save:hover {
  background: var(--accd);
  /* glow accent au hover retiré */
}
.btn-secondary, .btn-outline {
  background: transparent;
  color: var(--t2);
  border: 1px solid var(--brd);
}
.btn-secondary:hover, .btn-outline:hover {
  border-color: var(--brd2);
  color: var(--t1);
  background: rgba(255, 255, 255, 0.03);
}
[data-theme="light"] .btn-secondary:hover, [data-theme="light"] .btn-outline:hover {
  background: rgba(0, 0, 0, 0.03);
}
.btn-danger {
  background: var(--err);
  color: #fff;
  border: none;
}
.btn-danger:hover {
  background: #DC2626;
}
.btn-success {
  background: var(--green);
  color: var(--text-on-accent);
  border-color: var(--green);
}
.btn-success:hover {
  background: color-mix(in srgb, var(--green) 85%, black);
}
.btn-warning {
  background: var(--orange-dim);
  color: var(--orange);
  border-color: rgba(245, 158, 11, 0.2);
}
.btn-warning:hover {
  background: var(--orange);
  color: var(--text-on-accent);
}
.btn-sm {
  padding: 5px 10px;
  font-size: 11px;
}
.btn-group {
  display: flex; gap: 8px; flex-wrap: wrap;
}

/* ─── MODALS — Glassmorphism ─── */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
[data-theme="light"] .modal-overlay {
  background: rgba(255, 255, 255, 0.45);
}
.modal-overlay.active {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}
.modal {
  background: rgba(26, 29, 36, 0.50);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--r-xl);
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 6px;
  box-shadow: 0 6px 80px rgba(0, 0, 0, 0.4);
  transform: translateY(12px) scale(0.95);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  font-family: var(--font-body);
}
[data-theme="light"] .modal {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 6px 80px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255,255,255,0.4) inset;
}
.modal-overlay.active .modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px;
}
.modal-header h3 {
  font-size: 16px; font-weight: 600;
}
.modal-close {
  background: none; border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
}
.modal-close:hover { color: var(--text-primary); }

/* ─── SEGMENTED CONTROL (replaces filter-tabs) ─── */
.segmented-control {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 5px;
  padding: 4px;
  border: .5px solid rgba(255, 255, 255, 0.1);
  position: relative;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 2px;
}
.segmented-control .seg-tab {
  padding: 8px 20px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  text-decoration: none;
  white-space: nowrap;
}
.segmented-control .seg-tab:hover {
  color: var(--text-primary);
}
.segmented-control .seg-tab.active {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Legacy filter-tabs (kept for backward compat, restyled as segmented) */
.filter-tabs {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  padding: 4px;
  border: .5px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 2px;
}
.filter-tab {
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  background: transparent;
  color: var(--text-muted);
  text-decoration: none;
}
.filter-tab:hover {
  color: var(--text-primary);
}
.filter-tab.active {
  color: #FFFFFF;
  background: var(--accent, var(--accd));
  box-shadow: 0 2px 6px rgba(var(--acc-rgb), 0.25);
}

/* ─── ALERT BANNERS ─── */
.alert {
  padding: 12px 18px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 20px;
  display: flex; align-items: center; gap: 10px;
}
.alert-info {
  background: var(--accent-glow);
  border: .5px solid rgba(59,130,246,0.2);
  color: var(--accent-light);
}
.alert-warning {
  background: var(--orange-dim);
  border: .5px solid rgba(245,158,11,0.2);
  color: var(--orange);
}
.alert-danger {
  background: var(--red-dim);
  border: .5px solid rgba(239,68,68,0.2);
  color: var(--red);
}
.alert-success {
  background: var(--green-dim);
  border: .5px solid rgba(34,197,94,0.2);
  color: var(--green);
}

/* ─── FLASH MESSAGES (Dashboard) ─── */
.flash-messages {
  position: fixed;
  top: 80px;
  right: 6px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.flash-message {
  padding: 10px 18px;
  border-radius: 5px;
  font-size: 13px;
  animation: fadeInUp 0.3s ease;
}

/* ─── ROW ACTION BUTTONS ─── */
.row-actions {
  white-space: nowrap;
  text-align: right;
}
.row-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  opacity: 0;
  padding: 0;
}
.projects-table tr:hover .row-action-btn,
.proj-list-row:hover .row-action-btn {
  opacity: 1;
}
.row-action-btn.edit:hover {
  background: var(--accent-glow);
  color: var(--accent-light);
}
.row-action-btn.delete:hover {
  background: var(--red-dim);
  color: var(--red);
}

/* ─── HOURS DASHBOARD FILTERS & SUMMARY ─── */
.hours-filters {
  display: flex;
  align-items: center;
  gap: 8px;
}
.filter-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 5px 28px 5px 10px;
  background: var(--bg-secondary);
  border: .5px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color 0.15s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='%236b7280'%3E%3Cpath d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.filter-select:hover { border-color: var(--accent); }
.filter-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.hours-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: .5px solid var(--border);
}
.hours-summary-item {
  text-align: center;
  padding: 10px 6px;
  background: var(--bg-secondary);
  border: .5px solid var(--border);
  border-radius: 5px;
}
.hours-summary-value {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-primary);
  line-height: 1.2;
}
.hours-summary-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hours-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,10,15,0.5);
  border-radius: 5px;
  z-index: 5;
}
.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

[data-theme="light"] .hours-spinner {
  background: rgba(255,255,255,0.6);
}

/* ─── HOURS PAGE SPECIFICS ─── */
.source-icon {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px;
}
.source-pln { border-left: 3px solid var(--accent); padding-left: 8px; }
.source-manual { border-left: 3px solid var(--status-gray); padding-left: 8px; }

/* ─── HOURS TABLE COMPACT COLS ─── */
.col-date { white-space: nowrap; }
.col-source { width: 50px !important; white-space: nowrap; }

/* ─── PROJECT DETAIL ─── */
.project-hero {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 6px;
  margin-bottom: 6px;
}
.project-time-big {
  text-align: center;
  padding: 6px;
}
.project-time-big .big-time {
  font-size: 42px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--accent-light);
  letter-spacing: -2px;
}
.project-time-big .time-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
}

/* ─── COMPTA NOT CONNECTED ─── */
.compta-notice {
  padding: 6px;
  text-align: center;
  color: var(--text-muted);
}
.compta-notice .notice-icon {
  font-size: 40px;
  margin-bottom: 12px;
}
.compta-notice p {
  font-size: 14px;
  margin-bottom: 16px;
}

/* ─── DONUT CHART PLACEHOLDER ─── */
.donut-placeholder {
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

/* ─── DASHBOARD LAYOUT CUSTOMIZATION ─── */
.btn-personnaliser-dash {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: transparent;
  border: .5px solid var(--border);
  border-radius: 5px;
  color: var(--text-muted);
  font-size: 12px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.2s;
}
.btn-personnaliser-dash:hover {
  border-color: var(--accent);
  color: var(--accent-light);
  background: var(--accent-glow);
}
.btn-personnaliser-dash i { font-size: 14px; }

.dashboard-sections-container {
  display: flex;
  flex-direction: column;
}

.dashboard-section-wrapper {
  transition: opacity 0.25s;
}
.dashboard-section-wrapper.section-hidden {
  display: none;
}

/* Edit mode: show hidden sections faded, add dashed borders */
.layout-edit-mode .dashboard-section-wrapper {
  border: 2px dashed transparent;
  border-radius: 5px;
  padding: 4px;
  margin: 4px 0;
  cursor: grab;
  transition: border-color 0.2s, opacity 0.2s;
}
.layout-edit-mode .dashboard-section-wrapper:hover {
  border-color: var(--accent);
}
.layout-edit-mode .dashboard-section-wrapper {
  border-color: rgba(var(--acc-rgb),0.25);
}
.layout-edit-mode .dashboard-section-wrapper.section-hidden {
  display: block;
  opacity: 0.35;
  border-color: rgba(var(--acc-rgb),0.15);
}

/* SortableJS classes */
.sortable-ghost {
  opacity: 0.3;
}
.sortable-chosen {
  box-shadow: 0 0 0 2px var(--accent), 0 8px 6px rgba(var(--acc-rgb),0.15);
  border-radius: 5px;
}

/* Layout panel (slide-in from right) */
.layout-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 299;
}
.layout-overlay.active { display: block; }

.layout-panel {
  position: fixed;
  top: 0;
  right: -360px;
  width: 340px;
  height: 100vh;
  background: var(--bg-card);
  border-left: .5px solid var(--border);
  z-index: 300;
  display: flex;
  flex-direction: column;
  transition: right 0.3s ease;
  box-shadow: -4px 0 20px rgba(0,0,0,0.2);
}
.layout-panel.open { right: 0; }

.layout-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 12px;
  border-bottom: .5px solid var(--border);
}
.layout-panel-header h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.layout-panel-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.layout-panel-close:hover { color: var(--text-primary); }

.layout-panel-hint {
  padding: 10px 20px;
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

.layout-panel-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 12px;
}

.layout-panel-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  margin: 4px 0;
  background: var(--bg-secondary);
  border: .5px solid var(--border);
  border-radius: 5px;
  transition: border-color 0.15s;
}
.layout-panel-item:hover { border-color: var(--accent); }

.layout-panel-handle {
  cursor: grab;
  color: var(--text-muted);
  font-size: 16px;
  display: flex;
  align-items: center;
}
.layout-panel-handle:active { cursor: grabbing; }

.layout-panel-label {
  flex: 1;
  font-size: 13px;
  color: var(--text-primary);
  user-select: none;
}

/* Toggle switch */
.layout-panel-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
.layout-panel-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.layout-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--border);
  border-radius: var(--r-xl);
  transition: background 0.2s;
}
.layout-toggle-slider::before {
  content: '';
  position: absolute;
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
.layout-panel-toggle input:checked + .layout-toggle-slider {
  background: var(--accent);
}
.layout-panel-toggle input:checked + .layout-toggle-slider::before {
  transform: translateX(16px);
  background: #fff;
}

.layout-panel-actions {
  display: flex;
  gap: 10px;
  padding: 16px 20px;
  border-top: .5px solid var(--border);
}
.btn-layout-cancel {
  flex: 1;
  padding: 10px;
  background: transparent;
  border: .5px solid var(--border);
  border-radius: 5px;
  color: var(--text-secondary);
  font-size: 13px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.15s;
}
.btn-layout-cancel:hover {
  border-color: var(--text-muted);
  color: var(--text-primary);
}
.btn-layout-save {
  flex: 1;
  padding: 10px;
  background: var(--accent);
  border: none;
  border-radius: 5px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.15s;
}
.btn-layout-save:hover {
  background: var(--accent-dim);
}

/* ─── RESPONSIVE ─── */
@media (max-width: 1200px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
  .project-hero { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .app-container {
    width: 100vw;
    height: 100vh;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: var(--sidebar-width) !important;
    min-width: var(--sidebar-width) !important;
    border-radius: 0;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  .sidebar.open {
    display: flex;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    width: var(--sidebar-width) !important;
  }
  .sidebar-collapse-btn {
    display: none;
  }
  /* Reset collapsed styles on mobile */
  .sidebar.collapsed .sidebar-logo .logo-text { display: flex; }
  .sidebar.collapsed .sidebar-section-title { display: block; margin-bottom: 8px; padding: 0 8px; }
  .sidebar.collapsed .sidebar-item { justify-content: flex-start; padding: 9px 12px; gap: 10px; }
  .sidebar.collapsed .sidebar-item-text,
  .sidebar.collapsed .sidebar-item .badge { display: inline; width: auto; }
  .sidebar.collapsed .sync-btn { justify-content: flex-start; padding: 10px 12px; gap: 8px; }
  .sidebar.collapsed .sync-btn span { display: inline; width: auto; }
  .sidebar.collapsed .sync-time { display: block; padding: 6px 12px 0; }
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 99;
  }
  .sidebar-overlay.active {
    display: block;
  }
  .main { margin-left: 0 !important; }
  .topbar { padding: 12px 16px; }
  .topbar-nav-btns { display: flex; }
  .topbar-breadcrumb {
    display: flex !important;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    padding-left: 8px;
    height: 34px;
    line-height: 34px;
  }
  .topbar-breadcrumb span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: 600;
    display: inline-block;
    max-width: 100%;
  }
  .topbar-right #current-datetime { display: none; }
  .kpi-grid { grid-template-columns: 1fr; }
  .content { padding: 20px 16px; }
  .form-row { grid-template-columns: 1fr; }
  .card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ─── PROJECTS TABLE — MOBILE ─── */
  .projects-table { min-width: unset; table-layout: auto; }
  /* Hide: Phase (3), Rendu (6), Taux (8), Montant (9) */
  .projects-table th:nth-child(3),
  .projects-table td:nth-child(3),
  .projects-table th:nth-child(6),
  .projects-table td:nth-child(6),
  .projects-table th:nth-child(8),
  .projects-table td:nth-child(8),
  .projects-table th:nth-child(9),
  .projects-table td:nth-child(9) { display: none; }
  /* Reset fixed widths */
  .projects-table th,
  .projects-table td { width: auto !important; white-space: nowrap; }
  .projects-table td.project-name { white-space: normal; min-width: 100px; }
  .projects-table td { padding: 10px 8px; font-size: 12px; }
  .projects-table th { padding: 0 8px 10px; font-size: 9px; }
  /* Grid list responsive: hide Priorite(3), Phase(4), Rendu(7), Taux(9), Montant(10) */
  .proj-list-header,
  .proj-list-row {
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    font-size: 12px;
    padding: 10px 8px;
  }
  .proj-list-header > span:nth-child(3),
  .proj-list-row > span:nth-child(3),
  .proj-list-header > span:nth-child(4),
  .proj-list-row > span:nth-child(4),
  .proj-list-header > span:nth-child(7),
  .proj-list-row > span:nth-child(7),
  .proj-list-header > span:nth-child(9),
  .proj-list-row > span:nth-child(9),
  .proj-list-header > span:nth-child(10),
  .proj-list-row > span:nth-child(10) { display: none; }
  .proj-list-header { font-size: 9px; padding: 0 8px 10px; }
  .status-select { font-size: 11px; padding: 3px 6px; }
  .progress-bar { min-width: 40px; }
  .client-badge { font-size: 10px; padding: 2px 6px; }
  .btn-add-time, .btn-sub-time { width: 20px; height: 20px; font-size: 11px; }
  /* Glow badges: reduce glow + padding on mobile */
  .status-badge { padding: 4px 12px; font-size: 11px; box-shadow: none !important; }
  /* Segmented controls: stack on small screens */
  .segmented-control, .filter-tabs { flex-wrap: wrap; }
  .segmented-control .seg-tab, .filter-tab { padding: 6px 14px; font-size: 12px; }
  /* Settings tabs: horizontal scroll on mobile */
  .tab-btn-group {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 4px;
    padding-bottom: 2px;
    flex-wrap: nowrap !important;
  }
  .tab-btn-group::-webkit-scrollbar { display: none; }
  .tab-btn-group > * { flex-shrink: 0; white-space: nowrap; }
}

/* ─── ANIMATIONS ─── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 20px 2px rgba(var(--acc-rgb), 0.06); }
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes borderGlow {
  0%, 100% { border-color: rgba(var(--acc-rgb), 0.15); }
  50% { border-color: rgba(var(--acc-rgb), 0.4); }
}

/* ═══ ORBIT MOTION DESIGN ═══ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px) scale(0.93); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes valPop {
  0% { opacity: 0; transform: scale(0.85); }
  60% { transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes barGrow {
  from { height: 0 !important; }
}
@keyframes fillBar {
  from { width: 0 !important; }
}

/* KPI cards arrive staggered — 1 by 1 with zoom */
.kpi-card:nth-child(1),
.kpi-grid > :nth-child(1) { animation: fadeUp .5s cubic-bezier(.16,1,.3,1) both; animation-delay: .15s; }
.kpi-card:nth-child(2),
.kpi-grid > :nth-child(2) { animation: fadeUp .5s cubic-bezier(.16,1,.3,1) both; animation-delay: .30s; }
.kpi-card:nth-child(3),
.kpi-grid > :nth-child(3) { animation: fadeUp .5s cubic-bezier(.16,1,.3,1) both; animation-delay: .45s; }
.kpi-card:nth-child(4),
.kpi-grid > :nth-child(4) { animation: fadeUp .5s cubic-bezier(.16,1,.3,1) both; animation-delay: .60s; }
.kpi-card:nth-child(5),
.kpi-grid > :nth-child(5) { animation: fadeUp .5s cubic-bezier(.16,1,.3,1) both; animation-delay: .75s; }

/* KPI values pop in */
.kpi-card .kpi-value,
.kpi-val { animation: valPop .4s ease both; }

/* Chart bars grow up */
.chart-bar { animation: barGrow .6s cubic-bezier(.22,1,.36,1) both; }

/* Status bars fill */
.stat-bar-fill { animation: fillBar .8s cubic-bezier(.22,1,.36,1) both; animation-delay: .6s; }

/* Nav items hover slide */
.sidebar-item:hover { transform: none; }

/* Row hover slide */
.table-strato tbody tr,
.proj-row { transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding-left 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.table-strato tbody tr:hover,
.proj-row:hover { padding-left: 8px; }

.animate {
  animation: fadeInUp 0.6s cubic-bezier(.16,1,.3,1) both;
}

/* Page transition — disabled to allow backdrop-filter in children */

/* Progress bar animation */
.progress-fill { transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.delay-1 { animation-delay: 0.10s; }
.delay-2 { animation-delay: 0.25s; }
.delay-3 { animation-delay: 0.40s; }
.delay-4 { animation-delay: 0.55s; }
.delay-5 { animation-delay: 0.70s; }
.delay-6 { animation-delay: 0.85s; }
.delay-7 { animation-delay: 1.00s; }
.delay-8 { animation-delay: 1.15s; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes pulseGlow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ─── GRADIENT TEXT (Silicon Valley 2026) ─── */
.gradient-text {
  background: linear-gradient(135deg, var(--acc), var(--accl), #F472B6, var(--acc));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 6s ease infinite;
}
.gradient-text-subtle {
  background: linear-gradient(135deg, var(--text-primary), var(--accent-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── FULLCALENDAR OVERRIDES ─── */
.fc {
  --fc-bg-event-opacity: 0.15;
  --fc-border-color: var(--border);
  --fc-button-bg-color: var(--bg-card);
  --fc-button-border-color: var(--border);
  --fc-button-text-color: var(--text-secondary);
  --fc-button-hover-bg-color: var(--accent-glow);
  --fc-button-hover-border-color: var(--accent);
  --fc-button-active-bg-color: var(--accent);
  --fc-button-active-border-color: var(--accent);
  --fc-event-bg-color: var(--accent);
  --fc-event-border-color: var(--accent);
  --fc-today-bg-color: var(--accent-glow);
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: var(--bg-secondary);
  --fc-list-event-hover-bg-color: var(--bg-card-hover);
}
.fc .fc-toolbar-title {
  font-size: 16px !important;
  font-weight: 600;
  color: var(--text-primary);
}
.fc th {
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.fc td {
  border-color: var(--border) !important;
}
.fc .fc-daygrid-day-number {
  color: var(--text-secondary);
  font-size: 12px;
}
.fc .fc-day-today .fc-daygrid-day-number {
  color: var(--accent-light);
  font-weight: 600;
}
.fc .fc-event {
  border-radius: 4px;
  font-size: 11px;
  padding: 2px 4px;
}

/* ─── SETTINGS PAGE ─── */
.settings-section {
  margin-bottom: 6px;
}
.settings-section h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
.settings-section h3::before {
  content: '';
  width: 3px; height: 14px;
  background: var(--accent);
  border-radius: 2px;
}
.settings-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px;
  background: var(--bg-secondary);
  border: .5px solid var(--border);
  border-radius: 6px;
  margin-bottom: 8px;
}
.settings-item-label {
  font-size: 13px;
  color: var(--text-primary);
}
.settings-item-value {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.settings-item-status {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px;
}
.settings-item-status.connected { color: var(--green); }
.settings-item-status.disconnected { color: var(--red); }

/* ─── DUE DATE INLINE INPUT ─── */
.due-date-input {
  background: transparent;
  border: .5px solid transparent;
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  width: 130px;
}
.due-date-input:hover {
  border-color: var(--border);
  background: var(--bg-secondary);
}
.due-date-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-card);
  box-shadow: 0 0 0 2px var(--accent-glow);
}
.due-date-input.overdue {
  color: var(--red);
  font-weight: 600;
}
.due-date-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
}
[data-theme="dark"] .due-date-input::-webkit-calendar-picker-indicator {
  filter: invert(0.6);
}

/* ─── HOURLY RATE INPUT ─── */
.hourly-rate-input,
[data-theme="dark"] .hourly-rate-input,
[data-theme="light"] .hourly-rate-input {
  background: transparent !important;
  border: .5px solid transparent;
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--t2, #b0b6c3);
  cursor: pointer;
  transition: all 0.15s;
}
.hourly-rate-input:hover {
  border-color: var(--brd);
  background: transparent;
}
.hourly-rate-input:focus {
  outline: none;
  border-color: var(--acc);
  background: transparent;
  box-shadow: 0 0 0 2px rgba(var(--acc-rgb), 0.15);
}
.hourly-rate-input.saving {
  opacity: 0.5;
}
.hourly-rate-input::-webkit-inner-spin-button,
.hourly-rate-input::-webkit-outer-spin-button {
  opacity: 0;
}
.hourly-rate-input:hover::-webkit-inner-spin-button,
.hourly-rate-input:hover::-webkit-outer-spin-button {
  opacity: 1;
}

/* ─── CATEGORY BADGES ─── */
.cat-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  background: var(--bg-secondary);
  border: .5px solid var(--border);
  color: var(--text-secondary);
}

/* ─── OVERDUE INVOICE ─── */
tr.overdue td {
  border-left: 3px solid var(--red);
}

/* ─── THEME TOGGLE ─── */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6px;
  height: 6px;
  border: .5px solid var(--border);
  border-radius: 5px;
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 16px;
}
.theme-toggle .material-symbols-outlined,
.theme-toggle .ms-icon { transition: transform 0.25s cubic-bezier(.16,1,.3,1); }
.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent-light);
  background: var(--accent-glow);
}
.theme-toggle:hover .material-symbols-outlined,
.theme-toggle:hover .ms-icon { transform: scale(1.2) rotate(15deg); }

/* ─── CONTEXT MENU (3-dot) ─── */
.ctx-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: #f6f6f6;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s ease;
  position: relative;
  letter-spacing: 2px;
  line-height: 1;
}
.ctx-menu-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}
/* Context menu dropdown — Phase 4 Glass Unified
   Ancien (rollback Phase 4) :
     background: rgba(26,29,36,0.75); blur 20px; border rgba(255,255,255,0.06)
   Phase 4 : pointe sur var(--glass-bg-strong) (light + dark unifies). */
.ctx-menu-dropdown {
  position: fixed;
  min-width: 160px;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow-strong);
  z-index: 9999;
  padding: 4px;
  display: none;
  animation: ctxMenuIn 0.15s ease;
}
.ctx-menu-dropdown.show {
  display: block;
}
.ctx-menu-dropdown a,
.ctx-menu-dropdown button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s ease;
  text-decoration: none;
  text-align: left;
}
.ctx-menu-dropdown a:hover,
.ctx-menu-dropdown button:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}
.ctx-menu-dropdown .ctx-danger {
  color: var(--red);
}
.ctx-menu-dropdown .ctx-danger:hover {
  background: var(--red-dim);
  color: var(--red);
}
.ctx-menu-dropdown .ctx-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
@keyframes ctxMenuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── TAB-BTN SEGMENTED STYLE ─── */
.tab-btn-group {
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 20px;
  max-width: 100%;
}
#settings-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
#settings-tabs::-webkit-scrollbar { height: 4px; }
#settings-tabs::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.25); border-radius: 2px; }
#settings-tabs > * { flex-shrink: 0; scroll-snap-align: start; }
[data-theme="light"] #settings-tabs { border-color: rgba(70,60,120,0.12); background: rgba(255,255,255,0.35); }

/* ─── LIGHT THEME OVERRIDES ─── */
[data-theme="light"] .status-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='%239CA3AF'%3E%3Cpath d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

/* Light mode: no glow on badges */
[data-theme="light"] .status-badge {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .status-badge:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Light mode: segmented controls */
[data-theme="light"] .segmented-control,
[data-theme="light"] .filter-tabs,
[data-theme="light"] .tab-btn-group {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .segmented-control .seg-tab.active,
[data-theme="light"] .filter-tab.active {
  background: var(--accent, var(--accd));
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(var(--acc-rgb), 0.25);
}
[data-theme="light"] .tab-active {
  background: var(--card);
  color: var(--text-primary) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Light mode: context menu */
[data-theme="light"] .ctx-menu-btn:hover {
  background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .ctx-menu-dropdown a:hover,
[data-theme="light"] .ctx-menu-dropdown button:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* ─── LOGIN PAGE ─── */
.login-page {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg, #121212);
  position: relative;
}
/* Ambient glow behind auth login card */
.login-page::before {
  content: '';
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(var(--acc-rgb, 249,115,22), .08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
[data-theme="light"] .login-page::before { display: none; }
.login-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 20px;
  z-index: 1;
}
.login-card {
  background: rgba(26, 26, 26, 0.6);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid var(--brd, rgba(255,255,255,0.06));
  border-radius: 6px;
  padding: 40px 6px;
  text-align: center;
  box-shadow: 0 6px 80px rgba(0, 0, 0, 0.4);
  position: relative;
}
/* Gradient border on auth login card */
.login-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 17px;
  padding: 1px;
  background: linear-gradient(160deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.05) 30%, transparent 60%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
[data-theme="dark"] .login-card {
  background: rgba(26, 26, 26, 0.6);
  border-color: var(--brd, rgba(255, 255, 255, 0.06));
  box-shadow: 0 6px 80px rgba(0, 0, 0, 0.4);
}
[data-theme="light"] .login-card {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--brd);
  box-shadow: 0 6px 80px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .login-card::before { display: none; }
.login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}
.login-logo-icon {
  width: 44px;
  height: 44px;
  background: var(--acc, #F97316);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
}
.login-logo-text {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--t1, #F5F5F5);
  font-family: var(--fd, 'Space Grotesk');
}
.login-subtitle {
  font-size: 13px;
  color: var(--t3, #666);
  margin-bottom: 28px;
  font-family: var(--f);
}
.login-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  margin-bottom: 20px;
  background: var(--red-dim);
  border: .5px solid rgba(239, 68, 68, 0.2);
  border-radius: 5px;
  font-size: 13px;
  color: var(--red);
}
.login-field {
  text-align: left;
  margin-bottom: 20px;
}
.login-field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--t3, #666);
  margin-bottom: 6px;
  font-family: var(--f);
}
.login-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.login-input-wrap i,
.login-input-wrap > .material-symbols-outlined {
  position: absolute;
  left: 12px;
  font-size: 16px;
  color: var(--t4, #444);
  pointer-events: none;
}
.login-input-wrap input {
  width: 100%;
  padding: 12px 14px 12px 40px;
  background: var(--inp, #1E1E1E);
  border: 1px solid var(--brd, rgba(255,255,255,0.06));
  border-radius: 6px;
  font-size: 14px;
  font-family: var(--f);
  color: var(--t1, #F5F5F5);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.login-input-wrap input:focus {
  outline: none;
  border-color: var(--acc, #F97316);
  box-shadow: 0 0 0 3px rgba(var(--acc-rgb, 249,115,22), 0.08);
}
.login-input-wrap input::placeholder {
  color: var(--t3, #666);
}
.login-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px;
  background: var(--acc, #F97316);
  color: #fff; border: none; border-radius: 5px;
  font-size: 14px; font-weight: 600; font-family: var(--f);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(var(--acc-rgb, 249,115,22),.2);
  transition: all .2s ease;
}
.login-btn:hover {
  background: var(--accd, #EA580C);
  box-shadow: 0 4px 16px rgba(var(--acc-rgb, 249,115,22),.3);
  transform: translateY(-1px);
}
.login-btn:active {
  transform: scale(0.98);
}
.login-theme-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--brd, rgba(255,255,255,0.06));
  border-radius: 6px;
  background: rgba(26, 26, 26, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--t2, #A0A0A0);
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  z-index: 10;
}
.login-theme-toggle:hover {
  border-color: var(--acc, #F97316);
  color: var(--acc, #F97316);
}

/* ─── HOUR INPUT HINT ─── */
.h-qty-hint {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
  min-height: 16px;
  line-height: 16px;
}

.login-success {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  margin-bottom: 20px;
  background: var(--green-dim);
  border: .5px solid rgba(34, 197, 94, 0.2);
  border-radius: 5px;
  font-size: 13px;
  color: var(--green);
}
.login-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  margin-bottom: 20px;
  background: rgba(var(--acc-rgb, 249,115,22), 0.08);
  border: .5px solid rgba(var(--acc-rgb, 249,115,22), 0.2);
  border-radius: 5px;
  font-size: 13px;
  color: var(--acc, #F97316);
}
.login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  margin-bottom: 20px;
}
.login-remember input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--acc, #F97316);
  cursor: pointer;
}
.login-remember label {
  font-size: 13px;
  color: var(--t2, #A0A0A0);
  cursor: pointer;
  font-family: var(--f);
}
.login-footer {
  margin-top: 6px;
  font-size: 12px;
  color: var(--t3, #666);
  line-height: 1.6;
  font-family: var(--f);
}
.login-link {
  color: var(--acc, #F97316);
  font-weight: 500;
  transition: color 0.15s;
}
.login-link:hover {
  color: var(--accd, #EA580C);
  text-decoration: underline;
}
.login-branding {
  margin-top: 16px;
  font-size: 11px;
  color: var(--t3, #666);
}
.login-branding img {
  height: 28px;
  object-fit: contain;
  opacity: 0.5;
  margin-top: 4px;
}
.login-card--wide {
  max-width: 520px;
}
.login-card--wide .login-card {
  padding: 36px 6px;
}
.login-card--wide .login-field {
  margin-bottom: 16px;
}
.login-card--wide .form-row {
  gap: 0 16px;
}
.login-input-wrap select {
  width: 100%;
  padding: 12px 14px;
  background: var(--inp, #1E1E1E);
  border: 1px solid var(--brd, rgba(255,255,255,0.06));
  border-radius: 6px;
  font-size: 14px;
  font-family: var(--f);
  color: var(--t1, #F5F5F5);
  transition: border-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.login-input-wrap select:focus {
  outline: none;
  border-color: var(--acc, #F97316);
  box-shadow: 0 0 0 3px rgba(var(--acc-rgb, 249,115,22), 0.08);
}

/* ─── SIDEBAR LOGOUT ─── */
.sidebar-logout {
  color: var(--text-muted) !important;
  font-size: 13px;
  margin-bottom: 8px;
  transition: color 0.2s;
}
.sidebar-logout:hover {
  color: var(--red) !important;
}

/* ============================================================
   COMPTA-SPECIFIC COMPONENTS
   (Adapted to use CSS variables for dark mode support)
   ============================================================ */

/* ─── COMPTA ANIMATIONS ─── */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes smoothWizz {
  0%   { transform: scale(1.01) rotate(0deg); }
  30%  { transform: scale(1.01) rotate(0.3deg); }
  60%  { transform: scale(1.01) rotate(-0.2deg); }
  100% { transform: scale(1.01) rotate(0deg); }
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn {
  animation: fadeSlideIn 0.45s cubic-bezier(.4,0,.2,1) both;
}
.animate-slideIn {
  animation: fadeSlideIn 0.45s cubic-bezier(.4,0,.2,1) both;
}
.animate-slideInRight {
  animation: slideInRight 0.3s cubic-bezier(.4,0,.2,1) both;
}

/* Stagger delays */
.stagger-1 { animation-delay: 0.10s; }
.stagger-2 { animation-delay: 0.25s; }
.stagger-3 { animation-delay: 0.40s; }
.stagger-4 { animation-delay: 0.55s; }
.stagger-5 { animation-delay: 0.70s; }
.stagger-6 { animation-delay: 0.85s; }
.stagger-7 { animation-delay: 1.00s; }
.stagger-8 { animation-delay: 1.15s; }

/* ─── CARD-STRATO (Compta) — Orbit Glow ─── */
.card-strato {
  background: var(--card);
  border-radius: var(--r-xl);
  box-shadow: none;
  border: 1px solid var(--brd);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease;
  position: relative;
  overflow: visible;
}
/* Card containing open dropdown rises above siblings */
.card-strato:has(.status-dropdown-wrapper.open),
.card-strato:has(#payment-flyout-menu:not(.hidden)) {
  z-index: 100;
}
/* Gradient border & rotating glow — disabled for clean Orbit look */
.card-strato::before,
.card-strato::after { display: none; }

/* ─── KPI CARDS (Compta style) ─── */
.kpi-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.kpi-card-value {
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  font-family: var(--font-mono);
  animation: countUp 0.5s cubic-bezier(.4,0,.2,1) both;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-card-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}
.kpi-trend.positive {
  color: var(--green);
  background: var(--green-dim);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}
.kpi-trend.negative {
  color: var(--red);
  background: var(--red-dim);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}
.kpi-trend.neutral {
  color: var(--text-muted);
  background: var(--status-gray-dim);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

/* Legacy KPI (for other Compta pages) */
.kpi-value {
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  animation: countUp 0.5s cubic-bezier(.4,0,.2,1) both;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

/* ─── CHART CARDS (Compta) ─── */
.chart-card-new {
  background: var(--bg-card);
  border-radius: var(--r-xl);
  padding: 22px 24px;
  box-shadow: none;
  border: 1px solid var(--brd);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease;
}
.chart-card-new:hover {
  border-color: var(--brd2);
  box-shadow: 0 8px 6px rgba(0, 0, 0, 0.25);
  transform: translateY(-2px);
}
.chart-card-new .chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.chart-card-new .chart-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}
.chart-card-new .chart-header .chart-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
}

/* Legacy chart card */
.chart-card {
  background: var(--bg-card);
  border-radius: var(--r-xl);
  padding: 6px;
  box-shadow: none;
  border: 1px solid var(--brd);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease;
}
.chart-card:hover {
  border-color: var(--brd2);
  box-shadow: 0 8px 6px rgba(0, 0, 0, 0.25);
  transform: translateY(-2px);
}
.chart-card .chart-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 20px;
}

/* Donut center text */
.donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.donut-center .donut-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.donut-center .donut-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* ─── TABLE-STRATO (Compta) ─── */
.table-strato-wrap {
  overflow-x: auto;
}
.table-strato {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 4px;
}
.table-strato thead th {
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--t3);
  background: transparent;
  border-bottom: 1px solid var(--brd);
  border-radius: 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
}
.table-strato thead th:first-child {
  border-radius: 4px 0 0 12px;
}
.table-strato thead th:last-child {
  border-radius: 0 12px 12px 0;
}
.table-strato tbody td {
  padding: 12px 14px;
  font-size: 13px;
  color: var(--t2);
  border-bottom: 1px solid var(--brd);
  vertical-align: middle;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}
.table-strato tbody tr {
  transition: background 0.12s ease;
  cursor: default;
}
.table-strato tbody tr:hover td {
  background: rgba(255, 255, 255, 0.03);
  transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-theme="light"] .table-strato tbody tr:hover td {
  background: rgba(0, 0, 0, 0.025);
}
.table-strato tbody td {
  transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.table-strato tbody tr:last-child td {
  border-bottom: none;
}

/* Resize handle on th */
.table-strato thead th .col-resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  cursor: col-resize;
  user-select: none;
  z-index: 2;
}
.table-strato thead th .col-resize-handle:hover,
.table-strato thead th .col-resize-handle.active {
  background: var(--accent);
  opacity: 0.4;
  border-radius: 2px;
}

/* ─── FORMS (Compta -strato suffix) ─── */
.input-strato {
  width: 100%;
  padding: 0.55rem 0.85rem;
  border: .5px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  font-size: 0.875rem;
  transition: all 0.2s cubic-bezier(.4,0,.2,1);
  outline: none;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}
.input-strato:focus {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px rgba(var(--acc-rgb),.15);
  background: rgba(255, 255, 255, 0.07);
}
.input-strato::placeholder {
  color: var(--t3);
  opacity: 0.8;
}
.select-strato {
  width: 100%;
  padding: 0.55rem 0.85rem;
  border: .5px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  font-size: 0.875rem;
  outline: none;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(.4,0,.2,1);
}
.select-strato:focus {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px rgba(var(--acc-rgb),.15);
}
.textarea-strato {
  width: 100%;
  padding: 0.55rem 0.85rem;
  border: .5px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  font-size: 0.875rem;
  transition: all 0.2s cubic-bezier(.4,0,.2,1);
  outline: none;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  resize: vertical;
  min-height: 80px;
}
.textarea-strato:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.textarea-strato::placeholder {
  color: var(--text-muted);
}

/* ─── BUTTONS — Phase 4 Glass Unified (pattern badge-statut macOS Sequoia)
   Inspire de .status-badge-btn (dashboard_style.css:1017) :
   bg rgba(couleur, 0.10) + border rgba(couleur, 0.20) + color pleine.
   Forme uniforme : padding 5px 12px, radius 3px, font 12px / 500.
   Hover : filter brightness 0.95 (subtil, pas de translateY).

   Anciennes valeurs (rollback Phase 4 buttons) :
     .btn-primary-strato : bg var(--acc), color #fff, padding 6px 14px,
                           radius var(--r-sm), hover bg var(--accd)
                           + box-shadow 0 4px 12px rgba(acc,0.2)
     .btn-secondary-strato : bg var(--bg-secondary), color var(--t2),
                             border .5px solid var(--border-medium),
                             padding 8px 20px !important, radius 5px
     .btn-danger-strato : bg linear-gradient EF4444, color #fff,
                          padding 8px 16px, hover translateY -1px + box-shadow
*/
.btn-primary-strato, .btn-strato {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px;
  background: rgba(var(--acc-rgb), 0.18);
  color: var(--acc);
  border: 1px solid rgba(var(--acc-rgb), 0.30);
  border-radius: 3px;
  font-size: 12px; font-weight: 500; font-family: var(--f);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  line-height: 1.4;
}
.btn-primary-strato:hover, .btn-strato:hover {
  filter: brightness(0.95);
  background: rgba(var(--acc-rgb), 0.25);
  color: var(--acc);
  border-color: rgba(var(--acc-rgb), 0.40);
}

.btn-secondary-strato {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px !important;
  background: rgba(148, 163, 184, 0.10);
  color: var(--t2);
  border: 1px solid rgba(148, 163, 184, 0.20);
  border-radius: 3px;
  font-size: 12px; font-weight: 500; font-family: var(--f);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  line-height: 1.4;
  white-space: nowrap !important;
  min-width: fit-content !important;
  flex-shrink: 0 !important;
}
.btn-secondary-strato:hover {
  filter: brightness(0.95);
  background: rgba(148, 163, 184, 0.15);
  color: var(--t1);
  border-color: rgba(148, 163, 184, 0.30);
}

.btn-danger-strato, .btn-delete {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px;
  background: rgba(239, 68, 68, 0.10);
  color: #EF4444;
  border: 1px solid rgba(239, 68, 68, 0.20);
  border-radius: 3px;
  font-family: var(--f);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  line-height: 1.4;
}
.btn-danger-strato:hover, .btn-delete:hover {
  filter: brightness(0.95);
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.30);
  color: #EF4444;
}
.btn-danger-strato:focus-visible, .btn-delete:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}
.btn-danger-strato:active, .btn-delete:active { filter: brightness(0.90); }
.btn-personnaliser {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 18px;
  border-radius: 5px;
  border: none;
  background: linear-gradient(135deg, var(--acc), var(--acc2, var(--accl)));
  color: #fff;
  font-family: var(--fd);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s, box-shadow 0.3s;
  box-shadow: 0 2px 8px rgba(var(--acc-rgb), 0.25);
}
.btn-personnaliser:hover {
  box-shadow: 0 0 20px rgba(var(--acc-rgb), 0.5), 0 0 40px rgba(var(--acc2-rgb, var(--acc-rgb)), 0.3);
  transform: translateY(-1px);
}
.btn-personnaliser:active { transform: scale(0.97); }

.btn-success-strato {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  background: var(--green);
  color: var(--text-on-accent);
  border: none;
  border-radius: 5px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(.4,0,.2,1);
  text-decoration: none;
}
.btn-success-strato:hover {
  background: #059669;
  color: var(--text-on-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16,185,129,.25);
}

/* ─── EMPTY STATE ─── */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
  background: radial-gradient(ellipse at center, rgba(var(--acc-rgb),.04) 0%, transparent 70%);
  border-radius: 6px;
}
.empty-state > i {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.35;
  background: linear-gradient(135deg, var(--acc) 0%, var(--accl) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── BADGES (Compta pill) ─── */
.badge-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--r-xl);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ─── COMPTA TOAST (override) ─── */
.toast-notification {
  animation: slideInRight 0.3s cubic-bezier(.4,0,.2,1) both;
  min-width: 300px;
  max-width: 450px;
  border-radius: 5px;
}

/* ─── TABS (Compta — segmented style) ─── */
.tab-active {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  font-weight: 600;
  border-radius: 5px;
  border-bottom: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
.tab-inactive {
  color: var(--text-muted);
  border-bottom: none;
  border-radius: 5px;
  transition: all 0.3s ease;
}
.tab-inactive:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

/* ─── TRESORERIE (Compta) ─── */
#treso-table th,
#treso-table td {
  white-space: nowrap;
}
#treso-table tbody tr:hover .group-hover\:opacity-100 {
  opacity: 1;
}
#detail-drawer {
  transition: transform 0.3s ease;
}
#settings-drawer.hidden {
  transform: translateX(100%);
}
#compte-drawer {
  transition: transform 0.3s ease;
}
#compte-drawer.hidden {
  transform: translateX(100%);
}

/* Compte cards — même style que .card-strato (glass transparent) */
.compte-chip {
  flex: 0 0 220px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--brd);
  background: var(--card);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  user-select: none;
}
/* Pas d'effet hover (comme demandé) */
.compte-chip:hover {
  transform: none !important;
  background: var(--card) !important;
  box-shadow: none !important;
}
/* État actif : bordure accent + halo fin, PAS de drop-shadow */
html[data-theme="dark"] .compte-chip.compte-chip-active,
html[data-theme="light"] .compte-chip.compte-chip-active,
.compte-chip.compte-chip-active {
  border: 1px solid var(--acc) !important;
  box-shadow: 0 0 0 2px rgba(var(--acc-rgb), 0.18) !important;
}

/* Neutralise le drop-shadow 0 8px 32px hérité d'auraos.css sur toutes
   les chips (actives ou non) — le fond doit rester plat */
html[data-theme="dark"] .compte-chip,
html[data-theme="light"] .compte-chip {
  box-shadow: none !important;
}
html[data-theme="dark"] .compte-chip.compte-chip-active,
html[data-theme="light"] .compte-chip.compte-chip-active {
  box-shadow: 0 0 0 2px rgba(var(--acc-rgb), 0.18) !important;
}
#comptes-cards {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
#comptes-cards::-webkit-scrollbar {
  height: 4px;
}
#comptes-cards::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

/* Dark mode compte cards — glass avec même palette que card-strato */
[data-theme="dark"] .compte-chip {
  background: var(--card);
  border-color: var(--brd);
}
[data-theme="dark"] .compte-chip:hover {
  background: var(--card) !important;
  border-color: var(--brd) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ─── SCROLLBAR (global) — Orbit thin ─── */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.1);
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.08);
}

/* ─── PRINT ─── */
@media print {
  aside, header, .no-print { display: none !important; }
  main { margin-left: 0 !important; padding: 0 !important; }
  .card-strato, .kpi-card, .chart-card-new { box-shadow: none; border: .5px solid #ddd; border-radius: 4px; }
}

/* ─── COMPTA RESPONSIVE ─── */
@media (max-width: 640px) {
  .table-strato thead th,
  .table-strato tbody td {
    padding: 8px 8px;
    font-size: 0.8rem;
  }
  .kpi-card-value {
    font-size: 22px;
  }
  .kpi-card {
    padding: 16px;
    border-radius: 6px;
  }
  .chart-card-new {
    padding: 16px;
    border-radius: 6px;
  }
  .card-strato {
    border-radius: 6px;
  }
  .kpi-value {
    font-size: 1.25rem;
  }
}


/* ============================================================
   UNIFIED APP — ADDITIONAL STYLES
   ============================================================ */

/* ─── VIEWER BADGE ─── */
.viewer-badge {
  font-size: 11px;
  padding: 3px 10px;
  background: var(--orange-dim);
  color: var(--orange);
  border-radius: var(--r-xl);
  font-weight: 600;
}
.viewer-badge.comptable-badge {
  background: var(--emerald-dim);
  color: var(--emerald);
}

/* ─── TOAST CONTAINER ─── */
.toast-container {
  position: fixed;
  top: 80px;
  right: 16px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast-notification {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-on-accent);
  animation: slideInRight 0.3s ease both;
  min-width: 280px;
  transition: opacity 0.3s, transform 0.3s;
}
.toast-success { background: var(--green); }
.toast-error { background: var(--red); }
.toast-warning { background: var(--orange); }
.toast-info { background: var(--accent); }
.toast-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-on-accent);
  opacity: 0.7;
  cursor: pointer;
}
.toast-close:hover { opacity: 1; }

/* ─── BADGE (sidebar) ─── */
.sidebar-item .badge-danger {
  margin-left: auto;
  background: var(--red-dim);
  color: var(--red);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  font-family: var(--font-mono);
}

/* ─── SIDEBAR NAV scroll ─── */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 8px;
}
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ─── FLASH MESSAGES (Compta style) ─── */
.flash-messages {
  padding: 0 6px;
}
.flash-message {
  padding: 12px 16px;
  border-radius: 5px;
  font-size: 13px;
  margin-bottom: 12px;
  transition: opacity 0.3s, transform 0.3s;
}
.alert-success {
  background: var(--green-dim);
  color: var(--green);
  border: .5px solid rgba(34, 197, 94, 0.2);
}
.alert-error {
  background: var(--red-dim);
  color: var(--red);
  border: .5px solid rgba(239, 68, 68, 0.2);
}
.alert-warning {
  background: var(--orange-dim);
  color: var(--orange);
  border: .5px solid rgba(245, 158, 11, 0.2);
}
.alert-info {
  background: var(--accent-glow);
  color: var(--accent-light);
  border: .5px solid rgba(59, 130, 246, 0.2);
}

/* ─── TAILWIND DARK MODE OVERRIDES ─── */
[data-theme="dark"] .bg-white { background: var(--bg-card) !important; }
[data-theme="dark"] .bg-gray-50 { background: var(--bg-secondary) !important; }
[data-theme="dark"] .bg-gray-100 { background: var(--bg-card) !important; }
[data-theme="dark"] .bg-page { background: var(--bg-primary) !important; }

/* TEXTES en dark mode : nuances de BLANC, jamais de gris moyen illisible.
   Hiérarchie 3 niveaux : pur blanc (titres) > off-white (corps) > light-gray (hints).
   Les classes text-{red,green,blue,…} de couleur RESTENT inchangées. */
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-800 { color: #ffffff !important; }
[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .text-gray-600 { color: #f6f6f6 !important; }
[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-gray-400 { color: #f6f6f6 !important; }
[data-theme="dark"] .text-gray-300 { color: #f6f6f6 !important; }
[data-theme="dark"] .text-black { color: #ffffff !important; }
[data-theme="dark"] .text-slate-900,
[data-theme="dark"] .text-slate-800 { color: #ffffff !important; }
[data-theme="dark"] .text-slate-700,
[data-theme="dark"] .text-slate-600 { color: #f6f6f6 !important; }
[data-theme="dark"] .text-slate-500,
[data-theme="dark"] .text-slate-400 { color: #f6f6f6 !important; }

[data-theme="dark"] .border-gray-200, [data-theme="dark"] .border-gray-100 { border-color: var(--border) !important; }
[data-theme="dark"] .bg-white\/80 { background: rgba(45,55,69,0.85) !important; }

/* Pas de changement de couleur de texte selon hover/background.
   Les transitions de couleur sur les éléments génériques sont neutralisées
   en dark mode (sauf classes de couleur explicites). */
[data-theme="dark"] :is(p, span, div, label, h1, h2, h3, h4, h5, h6, li, td, th):not([class*="text-"]):not([class*="acc"]):not([class*="bg-clip"]) {
  /* Si l'élément n'a aucune classe text-{color}, il hérite de la couleur du parent (pas de surprise) */
  /* Pas d'override couleur ici — on laisse le contexte décider, juste on s'assure que les variables sont blanches */
}
[data-theme="dark"] .shadow-lg, [data-theme="dark"] .shadow-md, [data-theme="dark"] .shadow-sm { box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important; }
[data-theme="dark"] .hover\:bg-gray-50:hover { background: var(--bg-card-hover) !important; }
[data-theme="dark"] .hover\:bg-gray-100:hover { background: var(--bg-card) !important; }
/* Tailwind opacity modifiers — trésorerie table */
[data-theme="dark"] .bg-gray-50\/80 { background: rgba(255,255,255,0.06) !important; }
[data-theme="dark"] .bg-strato-50\/30 { background: rgba(var(--acc-rgb),0.1) !important; }
[data-theme="dark"] .hover\:bg-gray-50\/50:hover { background: rgba(255,255,255,0.04) !important; }
[data-theme="dark"] .border-gray-50 { border-color: var(--brd) !important; }
[data-theme="dark"] td.bg-white { background: var(--bg-card) !important; }
[data-theme="dark"] .sticky.bg-white { background: var(--bg-card) !important; }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea {
  background: var(--bg-secondary) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .bg-emerald-50 { background: var(--green-dim) !important; }
[data-theme="dark"] .bg-red-50 { background: var(--red-dim) !important; }
[data-theme="dark"] .bg-amber-50 { background: var(--orange-dim) !important; }
[data-theme="dark"] .bg-blue-50 { background: var(--accent-glow) !important; }
/* Badge text colors — lighten for readability on dark bg */
[data-theme="dark"] .text-emerald-700, [data-theme="dark"] .text-emerald-600 { color: #6ee7b7 !important; }
[data-theme="dark"] .text-blue-700, [data-theme="dark"] .text-blue-600 { color: #93c5fd !important; }
[data-theme="dark"] .text-red-700, [data-theme="dark"] .text-red-600, [data-theme="dark"] .text-red-500 { color: #fca5a5 !important; }
[data-theme="dark"] .text-amber-700, [data-theme="dark"] .text-amber-600 { color: #fcd34d !important; }
[data-theme="dark"] .text-indigo-700, [data-theme="dark"] .text-indigo-600 { color: #a5b4fc !important; }
[data-theme="dark"] .text-purple-700, [data-theme="dark"] .text-purple-600 { color: #c4b5fd !important; }
[data-theme="dark"] .text-orange-700, [data-theme="dark"] .text-orange-600 { color: #fdba74 !important; }
/* Ensure table headers and labels are readable */
[data-theme="dark"] th { color: var(--text-secondary) !important; }
[data-theme="dark"] .font-semibold, [data-theme="dark"] .font-bold { color: var(--text-primary); }
[data-theme="dark"] label { color: var(--text-secondary) !important; }
[data-theme="dark"] .tab-btn, [data-theme="dark"] .tab-inactive { color: var(--text-secondary) !important; }
[data-theme="dark"] .tab-active, [data-theme="dark"] .tab-btn.tab-active { color: var(--accent-light) !important; border-color: var(--accent) !important; }
[data-theme="dark"] ::placeholder { color: var(--text-muted) !important; opacity: 1; }

/* ============================================================
   MOBILE RESPONSIVE — 768px
   All rules scoped in @media: desktop layout unaffected.
   ============================================================ */
@media (max-width: 768px) {

  /* 1. TABLE SCROLL — override Tailwind overflow-hidden on card wrappers */
  .card-strato.overflow-hidden {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .card-strato .table-strato {
    min-width: 560px;
  }

  /* 2. TOPBAR — prevent overflow on narrow screens */
  .topbar-left {
    gap: 6px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
  .topbar-right {
    gap: 6px;
    flex-shrink: 0;
  }
  .topbar-status {
    display: none;
  }
  .topbar-right .user-badge {
    padding: 3px 8px 3px 4px;
    font-size: 11px;
    white-space: nowrap;
  }
  .viewer-badge {
    font-size: 9px;
    padding: 2px 6px;
  }

  /* 3. FLASH MESSAGES & TOASTS — full width on mobile */
  .flash-messages {
    right: 12px;
    left: 12px;
    top: 68px;
  }
  .flash-message {
    width: 100%;
    box-sizing: border-box;
  }
  .toast-container {
    right: 12px;
    left: 12px;
  }
  .toast-notification {
    min-width: unset;
    width: 100%;
    box-sizing: border-box;
  }


  /* 5. TOUCH TARGETS — 44px minimum (Apple/Google HIG) */
  .topbar-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 6px;
  }
  .theme-toggle {
    width: 44px;
    height: 44px;
  }
  .sidebar-item {
    min-height: 44px;
  }

  /* 6. MODALS */
  .modal {
    width: 96%;
    max-height: 90vh;
    padding: 16px;
    border-radius: 5px;
  }

  /* ─── 7. TRESORERIE MOBILE ─── */

  /* Filter bar: right-side buttons wrap and fill width */
  .treso-filter-actions {
    margin-left: 0 !important;
    width: 100%;
  }
  .treso-filter-actions .btn-secondary-strato,
  .treso-filter-actions a.btn-secondary-strato {
    flex: 1 1 auto;
    text-align: center;
    justify-content: center;
    min-width: 0;
  }

  /* Chart header: stack title and legend */
  #tresoChart {
    height: 240px !important;
  }

  /* Settings drawer: full width on mobile (instead of w-80 = 320px) */
  #settings-drawer {
    width: 100% !important;
  }

  /* Detail drawer title: truncate long category names */
  #detail-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
  }

  /* Detail drawer inner tables: scroll if needed */
  #detail-tab-transactions,
  #detail-tab-factures-clients {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Category action buttons: always visible on touch (no hover) */
  #treso-table .opacity-0.group-hover\:opacity-100 {
    opacity: 0.5 !important;
  }

  /* Account cards: slightly wider on mobile for readability */
  .compte-chip {
    flex: 0 0 200px;
  }
  .compte-chip .text-\[10px\] {
    font-size: 11px;
  }

  /* ─── 8. TOUCH: hover-only buttons always visible ─── */
  .btn-add-time,
  .btn-sub-time,
  .btn-play {
    opacity: 1 !important;
  }
  .row-action-btn {
    opacity: 1 !important;
  }

  /* ─── 9. Dashboard projects: table scroll + filter tabs horizontal scroll ─── */
  .project-section {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .filter-tabs {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filter-tabs::-webkit-scrollbar { display: none; }
  .filter-tab {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ─── 10. Settings tabs: horizontal scroll ─── */
  #settings-tabs {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    padding-bottom: 1px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #settings-tabs::-webkit-scrollbar { display: none; }
  #settings-tabs .tab-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ─── 11. Invoice/devis line rows: stack on mobile ─── */
  .ligne-h,
  .ligne-f {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  .ligne-h > div,
  .ligne-f > div {
    grid-column: span 1 !important;
  }
  /* Phase grid (factures pourcentage mode) */
  .phase-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
  }
  .phase-row > div:first-child {
    grid-column: span 2;
  }
  /* Hide column headers on mobile for line items */
  #lignes-horaire > .grid-cols-12:first-child,
  #lignes-forfait > .grid-cols-12:first-child,
  #lignes-phases > .phase-grid:first-child {
    display: none;
  }

  /* ─── 12. Timer banner: wrap on narrow screens ─── */
  .timer-banner {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
  }
  .timer-banner-time {
    font-size: 22px;
  }

  /* ─── 13. Hours page navigation: stack ─── */
  .hours-nav-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .hours-nav-row > div {
    display: flex;
    justify-content: center;
  }
  .hours-nav-row .btn {
    flex: 1;
    text-align: center;
    justify-content: center;
  }

  /* ─── 14. Settings invités form: stack ─── */
  #tab-invites form.flex {
    flex-wrap: wrap;
  }
  #tab-invites form.flex > .flex-1 {
    min-width: 100%;
  }
  #tab-invites form.flex > button {
    width: 100%;
    justify-content: center;
  }

  /* ─── 15. E-facturation submit row: wrap ─── */
  #tab-einvoicing .flex.items-center.gap-3 {
    flex-wrap: wrap;
    gap: 8px !important;
  }

  /* ─── 16. Honoraires mode tabs: shrink to fit ─── */
  #tab-pourcentage,
  #tab-horaire,
  #tab-forfait {
    padding: 10px 12px;
    font-size: 12px;
    flex: 1;
    text-align: center;
  }

  /* ─── 17. Facture/devis form mode tabs: shrink ─── */
  .card-strato > .flex.border-b > button[onclick^="switchMode"],
  .card-strato .flex.border-b button[onclick^="setMode"] {
    padding: 10px 10px;
    font-size: 12px;
    flex: 1;
    text-align: center;
  }
}

/* ============================================================
   MOBILE RESPONSIVE — 480px (narrow phones)
   ============================================================ */
@media (max-width: 480px) {

  /* Tighter topbar */
  .topbar {
    padding: 8px 12px;
  }
  .topbar-nav-btns {
    gap: 2px;
  }

  /* Timer compact: hide project name, show only clock + stop */
  .topbar-timer {
    padding: 4px 8px;
    font-size: 0;    /* hide bare text nodes (em-dash) */
  }
  .topbar-timer .timer-project-name {
    display: none;
  }
  .topbar-timer .timer-display,
  .topbar-timer .timer-stop {
    font-size: 11px;  /* restore text on actual elements */
  }

  /* Indicators grid: single column on very narrow screens */
  .indicators-grid {
    grid-template-columns: 1fr;
  }

  /* Tighter content padding */
  .content {
    padding: 16px 12px;
  }

  /* Flash/toast tighter margins */
  .flash-messages,
  .toast-container {
    right: 8px;
    left: 8px;
  }

  /* ─── TRESORERIE 480px ─── */

  /* Chart: reduce height on narrow phones */
  #tresoChart {
    height: 200px !important;
  }

  /* Treso table: smaller sticky col for more scroll room */
  #treso-table .sticky {
    min-width: 140px !important;
    max-width: 160px;
    font-size: 11px;
  }

  /* Icon grid in add-category modal: 6 cols instead of 8 */
  #icon-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  /* ─── Project detail info grid: single column ─── */
  .info-grid-2col {
    grid-template-columns: 1fr !important;
  }

  /* ─── Widget modal grid: single column ─── */
  #widgetModal .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  /* ─── Analytics charts: reduce height ─── */
  .chart-card-new canvas {
    max-height: 200px;
  }
}

/* ============================================================
   DETAIL SIDEBAR — Global collapsible right panel
   ============================================================ */

/* ─── Base (hidden by default until JS activates) ─── */
.detail-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100vh;
  z-index: 40;
  background: rgba(26, 29, 36, 0.50);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
}

.detail-sidebar.open {
  transform: translateX(0);
}

/* Push main content on desktop */
.main {
  transition: margin-right 0.25s ease;
}
.main.detail-sidebar-push {
  margin-right: 300px;
}

/* ─── Close button ─── */
.detail-sidebar-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 6px;
  height: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  z-index: 2;
}
.detail-sidebar-close:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

/* ─── Toggle button (desktop, on left edge of sidebar) ─── */
.detail-sidebar-toggle {
  position: fixed;
  right: 300px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-card);
  border: .5px solid var(--border);
  box-shadow: 0 1px 6px rgba(0,0,0,0.12);
  color: var(--text-muted);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  z-index: 41;
  transition: right 0.25s ease, background 0.15s, color 0.15s;
}
.detail-sidebar-toggle:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}
.detail-sidebar-toggle.active {
  display: flex;
}
.detail-sidebar-toggle.collapsed {
  right: 0;
}
.detail-sidebar-toggle.collapsed i {
  transform: rotate(180deg);
}

/* ─── Mobile FAB ─── */
.detail-sidebar-mobile-btn {
  position: fixed;
  bottom: 6px;
  right: 16px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  z-index: 41;
  transition: background 0.15s, transform 0.15s;
}
.detail-sidebar-mobile-btn:hover {
  background: var(--accent-dim);
}
.detail-sidebar-mobile-btn:active {
  transform: scale(0.95);
}
.detail-sidebar-mobile-btn.active {
  display: flex;
}

/* ─── Backdrop (mobile only) ─── */
.detail-sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.detail-sidebar-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ─── Inner content area ─── */
.detail-sidebar-inner {
  padding: 20px 16px;
  padding-top: 48px;
  flex: 1;
}

/* ─── Section styles ─── */
.detail-sidebar-section {
  padding: 12px 0;
  border-bottom: .5px solid var(--border);
}
.detail-sidebar-section:last-child {
  border-bottom: none;
}

.detail-sidebar-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.detail-sidebar-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.detail-sidebar-edit-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.detail-sidebar-section:hover .detail-sidebar-edit-btn {
  opacity: 1;
}
.detail-sidebar-edit-btn:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

/* ─── Field rows ─── */
.detail-sidebar-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0;
  min-height: 36px;
  justify-content: center;
}
.detail-sidebar-field-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}
.detail-sidebar-field-value {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
}

/* ─── Tags / pills ─── */
.detail-sidebar-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.detail-sidebar-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: .5px solid var(--border);
}

/* ─── Scrollbar ─── */
.detail-sidebar::-webkit-scrollbar {
  width: 4px;
}
.detail-sidebar::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.detail-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

/* ─── Mobile overrides (<768px) ─── */
@media (max-width: 768px) {
  .detail-sidebar {
    width: 85vw;
    max-width: 320px;
    z-index: 200;
  }

  .main.detail-sidebar-push {
    margin-right: 0;
  }

  .detail-sidebar-toggle {
    display: none !important;
  }

  .detail-sidebar-field {
    min-height: 44px;
  }
}

/* ─── CUSTOM SCROLLBAR ─── */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

/* ─── LIGHT THEME — fond blanc cassé uni, pas de gradient ni d'orbes ─── */
[data-theme="light"] body {
  background-color: #F6F2EB;
  background-image: none;
}
[data-theme="light"] body:has(.app-container) {
  background-color: #EFE9DE;
  background-image: none;
}
/* Light sidebar/topbar overrides — mostly handled by CSS vars now */
[data-theme="light"] .card,
[data-theme="light"] .card-strato,
[data-theme="light"] .kpi-card {
  background-clip: border-box;
  box-shadow: none;
}
/* light kpi-card::before already hidden globally */
[data-theme="light"] .kpi-card .kpi-label {
  color: rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .kpi-card .kpi-value {
  color: var(--text-primary);
}
[data-theme="light"] .project-card {
  background: rgba(255, 255, 255, 0.5) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .split-view > div {
  background: rgba(255, 255, 255, 0.6) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .split-list-item {
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .progress-bar {
  background: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .htmx-modal-panel,
[data-theme="light"] .modal {
  background: #ffffff;
  border-color: #f6f6f6;
  box-shadow: 0 6px 80px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .input-strato,
[data-theme="light"] .select-strato,
[data-theme="light"] .textarea-strato {
  background: rgba(255, 255, 255, 0.80);
  border-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .input-strato::placeholder {
  color: rgba(0, 0, 0, 0.55);
}
[data-theme="light"] .input-strato:focus,
[data-theme="light"] .select-strato:focus,
[data-theme="light"] .textarea-strato:focus {
  background: rgba(255, 255, 255, 0.95);
}
/* btn-strato light overrides — already using CSS vars, minimal overrides needed */
[data-theme="light"] .ctx-menu-dropdown {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .table-strato thead th {
  background: rgba(0, 0, 0, 0.02);
  color: rgba(0, 0, 0, 0.45);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .table-strato tbody td {
  border-bottom-color: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .table-strato tbody tr:hover {
  background: rgba(0, 0, 0, 0.02);
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}
[data-theme="light"] {
  scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}
[data-theme="light"] .sidebar-logo {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

/* ─── BACKDROP-FILTER FALLBACK ─── */
@supports not (backdrop-filter: blur(1px)) {
  .sidebar { background: #0d0f14; }
  .topbar { background: #1a1d24; }
  .modal { background: #1a1d24; }
  .content-frame { background: #111317; }
  .card, .card-strato, .kpi-card { background: #1a1d24; }
  .ctx-menu-dropdown { background: #1a1d24; }
  [data-theme="light"] .sidebar { background: var(--bg2); }
  [data-theme="light"] .topbar { background: var(--bg2); }
  [data-theme="light"] .modal { background: var(--card); }
  [data-theme="light"] .content-frame { background: var(--bg); }
  [data-theme="light"] .card, [data-theme="light"] .card-strato, [data-theme="light"] .kpi-card { background: var(--card); }
}

/* ─── ACCESSIBILITY ─── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── PWA SAFE AREA (iPhone notch) ─── */
@supports (padding-top: env(safe-area-inset-top)) {
  .topbar {
    padding-top: calc(env(safe-area-inset-top) + 8px);
  }
  .sidebar {
    padding-top: env(safe-area-inset-top);
  }
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* ═══════════════════════════════════════════
   ENHANCED MOBILE — iPhone 14 (390px)
   ═══════════════════════════════════════════ */

/* Mobile hamburger: show only on mobile */
@media (min-width: 769px) {
  .hamburger-btn { display: none !important; }
}

/* KPI grid: 2 columns on tablet, 1 on phone */
@media (max-width: 768px) {
  .kpi-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px;
  }
  .kpi-card .kpi-value {
    font-size: 22px;
  }
  .kpi-card .kpi-icon-circle {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  /* Welcome banner compact */
  .welcome-banner {
    padding: 16px;
    margin-bottom: 16px;
  }
  .welcome-banner h1 {
    font-size: 18px;
  }

  /* Nav groups padding */
  .nav-group {
    padding: 2px 0;
  }
  .nav-group-items .sidebar-item {
    padding-left: 36px;
  }
}

@media (max-width: 480px) {
  .kpi-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Desktop only helper */
@media (max-width: 768px) {
  .desktop-only { display: none !important; }
}

/* ═══════════════════════════════════════════
   STRATO MODAL — Spacing & Typography
   ═══════════════════════════════════════════ */

/* Header */
#strato-modal-content > div:first-child {
    padding: 28px 6px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
#strato-modal-content h2:first-of-type {
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px !important;
    margin: 0 !important;
}

/* Body */
#strato-modal-content form > div:first-of-type,
#strato-modal-content .modal-body {
    padding: 28px 6px !important;
}

/* Section titles */
#strato-modal-content h3,
#strato-modal-content h4 {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 16px !important;
    margin-top: 8px !important;
}
[data-theme="light"] #strato-modal-content h3,
[data-theme="light"] #strato-modal-content h4 { color: var(--t1) !important; }
[data-theme="dark"] #strato-modal-content h3,
[data-theme="dark"] #strato-modal-content h4 { color: #f6f6f6 !important; }

/* Labels */
#strato-modal-content label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
}
[data-theme="light"] #strato-modal-content label { color: var(--t2) !important; }
[data-theme="dark"] #strato-modal-content label { color: #f6f6f6 !important; }

/* Inputs */
#strato-modal-content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
#strato-modal-content select,
#strato-modal-content textarea {
    width: 100% !important;
    padding: 12px 16px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-family: var(--f) !important; /* Space Mono — Orbit DS */
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}
[data-theme="light"] #strato-modal-content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
[data-theme="light"] #strato-modal-content select,
[data-theme="light"] #strato-modal-content textarea {
    background: rgba(0,0,0,0.03) !important;
    border: .5px solid rgba(0,0,0,0.1) !important;
    color: #111827 !important;
}
[data-theme="light"] #strato-modal-content input:focus,
[data-theme="light"] #strato-modal-content select:focus,
[data-theme="light"] #strato-modal-content textarea:focus {
    border-color: #2563EB !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1) !important;
    outline: none !important;
}
[data-theme="dark"] #strato-modal-content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
[data-theme="dark"] #strato-modal-content select,
[data-theme="dark"] #strato-modal-content textarea {
    background: rgba(255,255,255,0.05) !important;
    border: .5px solid rgba(255,255,255,0.1) !important;
    color: #fff !important;
}
[data-theme="dark"] #strato-modal-content input:focus,
[data-theme="dark"] #strato-modal-content select:focus {
    border-color: #2563EB !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15) !important;
}
#strato-modal-content textarea { min-height: 80px !important; resize: vertical !important; }

/* Table headers in modal */
#strato-modal-content table th {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 8px 12px !important;
}
[data-theme="light"] #strato-modal-content table th { color: var(--t2) !important; }
[data-theme="dark"] #strato-modal-content table th { color: #f6f6f6 !important; }

/* Footer */
#strato-modal-content form > div:last-child {
    padding: 20px 6px 28px !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
}
[data-theme="light"] #strato-modal-content form > div:last-child { border-top: .5px solid rgba(0,0,0,0.06) !important; }
[data-theme="dark"] #strato-modal-content form > div:last-child { border-top: .5px solid rgba(255,255,255,0.06) !important; }

/* Close button */
#strato-modal-content button[onclick*="stratoClose"] {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 4px !important;
    border: none !important;
    font-size: 18px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}
[data-theme="light"] #strato-modal-content button[onclick*="stratoClose"] {
    background: rgba(0,0,0,0.04) !important;
    color: rgba(0,0,0,0.3) !important;
}
[data-theme="dark"] #strato-modal-content button[onclick*="stratoClose"] {
    background: rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.5) !important;
}

/* Submit button in modal */
#strato-modal-content button[type="submit"] {
    padding: 10px 28px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: #2563EB !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(37,99,235,0.3) !important;
    cursor: pointer !important;
}
#strato-modal-content button[type="submit"]:hover {
    background: #3B82F6 !important;
    transform: translateY(-1px) !important;
}

/* Cancel button in modal — red outlined */
#strato-modal-content .modal-footer .btn-secondary,
#strato-modal-content .modal-footer .btn-secondary-strato {
    padding: 6px 14px !important;
    min-height: 34px !important;
    border-radius: 4px !important;
    font-size: 0.875rem !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    background: transparent !important;
    color: #EF4444 !important;
    border: 1px solid #EF4444 !important;
    transition: all 0.2s !important;
}
#strato-modal-content .modal-footer .btn-secondary:hover,
#strato-modal-content .modal-footer .btn-secondary-strato:hover {
    background: rgba(239, 68, 68, 0.1) !important;
}

/* ─── Global nav tabs ─── */
.global-nav-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}
.global-tab {
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    background: var(--bg-card);
    color: var(--text-muted);
    transition: all 0.25s cubic-bezier(.16,1,.3,1);
    border: .5px solid transparent;
}
.global-tab:hover {
    color: var(--text-primary);
    background: var(--bg-card-hover);
    transform: translateY(-1px);
}
.global-tab.active {
    background: rgba(var(--acc-rgb), 0.12);
    color: var(--acc);
    font-weight: 600;
    border-color: rgba(var(--acc-rgb), 0.15);
    box-shadow: 0 0 16px rgba(var(--acc-rgb), 0.1);
}
[data-theme="light"] .global-tab.active {
    background: rgba(var(--acc-rgb), 0.08);
    color: var(--accd);
    border-color: rgba(var(--acc-rgb), 0.12);
}

/* ─── Receipt dropzone ─── */
.receipt-dropzone {
    border: 2px dashed var(--border-medium);
    border-radius: 6px;
    padding: 36px;
    text-align: center;
    cursor: pointer;
    margin-bottom: 6px;
    background: transparent;
    transition: all 0.2s;
}
.receipt-dropzone:hover,
.receipt-dropzone.drag-over {
    border-color: #2563EB;
    background: rgba(37, 99, 235, 0.03);
}

/* ─── CUSTOM SCROLLBAR (app-container) ─── */
.main::-webkit-scrollbar { width: 6px; }
.main::-webkit-scrollbar-track { background: transparent; }
.main::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 3px; }
.main::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }
[data-theme="light"] .main::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.12); }
[data-theme="light"] .main::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.2); }
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 2px; }

/* ─── GLOBAL ROUNDED CORNERS UPGRADE ─── */
.card, .card-strato { border-radius: 6px; }
.btn, .btn-primary, .btn-secondary, .btn-strato, .btn-danger, .btn-secondary-strato { border-radius: 100px; }
/* Force ALL button-like elements to pill shape */
button:not(.faq-q):not(.toggle):not(.theme-toggle):not(.theme-switch-btn):not(.wp-thumb):not([class*="chart"]):not([class*="tab"]):not([class*="dropdown"]),
[type="submit"],
[type="button"],
a.btn, a[class*="btn-"] {
  border-radius: 100px !important;
}
.form-control { border-radius: 5px; }
.modal, .modal-overlay .modal { border-radius: var(--r-xl); }
.topbar { border-radius: 5px 16px 0 0; }
.global-tab { border-radius: 5px; }
.sidebar-item { border-radius: 8px; }

/* ─── ICON SIZING: sidebar hierarchy + topbar uniform ─── */
/* Group headers (parent onglets) = 20px */
.nav-group-header .hgi-stroke,
.nav-group-header .ms-icon { font-size: 20px; }
/* Sub-items (children) = 17px */
.nav-group-items .sidebar-item .hgi-stroke,
.nav-group-items .sidebar-item .ms-icon { font-size: 17px !important; }
/* Bottom sidebar items = 17px */
.sidebar-section .sidebar-item .hgi-stroke,
.sidebar-section .sidebar-item .ms-icon { font-size: 17px !important; }
/* Topbar icons = uniform 20px */
.topbar-icon-btn .hgi-stroke,
.topbar-icon-bare .hgi-stroke,
.topbar-nav-btn .hgi-stroke { font-size: 20px; transition: transform 0.25s cubic-bezier(.16,1,.3,1); }
.topbar-icon-btn:hover .hgi-stroke,
.topbar-icon-bare:hover .hgi-stroke { transform: scale(1.15); }

/* ─── PHASE BADGE & DROPDOWN ─── */
.phase-badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 10px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 42px;
  text-align: center;
}
.phase-badge:hover { opacity: 0.8; transform: scale(1.03); }

.phase-badge-wrapper { position: relative; }
.phase-badge-wrapper.dropdown-open { z-index: 100; }

.phase-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 999;
  background: #1C1D26;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 5px;
  padding: 4px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  border: .5px solid rgba(255,255,255,0.08);
  min-width: 80px;
  animation: dropIn 0.15s ease-out;
}
[data-theme="light"] .phase-dropdown { background: var(--card); border-color: var(--brd2); box-shadow: 0 8px 6px rgba(0,0,0,0.1); }

.phase-dropdown-item {
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease;
  color: var(--text-primary);
}
.phase-dropdown-item:hover { background: rgba(255,255,255,0.06); }
[data-theme="light"] .phase-dropdown-item:hover { background: #F9FAFB; }
.phase-dropdown-item.current { font-weight: 700; }
.phase-dropdown-item::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--dot-color);
  flex-shrink: 0;
}

@keyframes dropIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── TRACKING BUTTON ─── */
.tracking-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--t2, #b0b6c3);
  font-size: 11px;
  font-weight: 400;
  transition: all 0.3s ease;
  white-space: nowrap;
}
[data-theme="light"] .tracking-btn { background: rgba(0,0,0,0.04); }
[data-theme="light"] .tracking-btn { background: #F3F4F6; color: var(--t2); }
.tracking-btn:hover { background: rgba(var(--acc-rgb),0.1); color: var(--accent-light); transform: translateY(-1px); }
[data-theme="light"] .tracking-btn:hover { background: #E5E7EB; }

.tracking-btn.tracking-active {
  background: rgba(239, 68, 68, 0.08);
  color: #EF4444;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 3px 10px 3px 5px;
}

.tracking-pulse {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #EF4444;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: trkPulse 1.5s infinite;
  flex-shrink: 0;
}
.tracking-pulse::after {
  content: "";
  width: 5px; height: 5px;
  border-radius: 1px;
  background: white;
}

@keyframes trkPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ─── TRACKING BANNER ─── */
.tracking-banner {
  background: linear-gradient(135deg, rgba(254,226,226,0.15), rgba(255,237,213,0.15));
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: .5px solid rgba(254,202,202,0.3);
  animation: fadeIn 0.3s ease;
  font-size: 13px;
  color: var(--text-primary);
}
[data-theme="light"] .tracking-banner {
  background: linear-gradient(135deg, #FEF2F2, #FFF7ED);
  border-color: #FECACA;
}
.tracking-banner .tracking-pulse { width: 18px; height: 18px; }
.tracking-banner .tracking-pulse::after { width: 6px; height: 6px; }
.tracking-banner-stop {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 5px;
  border: none;
  background: #EF4444;
  color: white;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}
.tracking-banner-stop:hover { background: #DC2626; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── GRADIENT TEXT & PILLS (Pricing page style) ─── */
.gradient-text {
  background: linear-gradient(135deg, var(--acc) 0%, var(--accl) 50%, var(--acc2, var(--accd)) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pill-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(var(--acc-rgb),.1); border: .5px solid rgba(var(--acc-rgb),.2);
  border-radius: 100px; padding: 6px 18px;
  font-size: 12px; font-weight: 600; color: var(--accl);
}
.pill-badge--sm { padding: 5px 14px; font-size: 11px; }
[data-theme="light"] .pill-badge {
  background: rgba(var(--acc-rgb),.08);
  border-color: rgba(var(--acc-rgb),.15);
  color: var(--accd);
}
/* Card highlight glow border (like pricing popular card) */
.card-highlight {
  border-color: rgba(var(--acc-rgb),.25) !important;
}
.card-highlight::after {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit; z-index: -1;
  background: linear-gradient(135deg, rgba(var(--acc-rgb),.2), rgba(var(--acc2-rgb, var(--acc-rgb)),.18), rgba(var(--acc-rgb),.2));
  background-size: 200% 200%;
  animation: gradientShift 6s ease infinite;
}
@keyframes gradientShift {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
/* Fade-in on scroll (pricing page style) */
.fi {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.fi--v { opacity: 1; transform: translateY(0); }

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .fi { opacity: 1; transform: none; transition: none; }
  .animate { opacity: 1; transform: none; animation: none; }
}


/* ═══════════════════════════════════════════════════════════════
   SIDEBAR + TOPBAR — HiveRep Continuity Design
   .content-frame = FIXED grey rounded rectangle (never moves)
   .content       = SCROLLS inside the frame, clipped by radius
   ═══════════════════════════════════════════════════════════════ */

/* ── SIDEBAR: nav scrolls, bottom stays sticky ── */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.sidebar-nav:hover {
  scrollbar-color: rgba(128,128,128,0.2) transparent;
}

.sidebar-bottom {
  flex-shrink: 0;
  margin-top: 0;
}

/* ── CONTENT FRAME (the rounded rectangle — droits côté sidebar) ── */
.content-frame {
  position: absolute;
  inset: 0;
  /* Coins droits côté gauche (face à la sidebar) — visuel continu */
  border-radius: 0 6px 6px 0;
  overflow: hidden;
  background: rgba(26,29,36,0.35);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.20),
    0 4px 16px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .content-frame {
  background: rgba(255, 255, 255, 0.50);
  border-color: rgba(255, 255, 255, 0.95);
  /* Drop shadow allégée — match avec sidebar pour ne pas créer
     d'artefact à la jonction des deux panneaux. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 0 0 1px rgba(15, 23, 42, 0.04),
    0 4px 12px rgba(15, 23, 42, 0.04);
}

/* ── DOUBLE-BORDER GLASS pour les cartes internes (GitHub-style) ──
   .card / .card-strato / .strato-card / .glass-card / .kpi-card
   héritent du même pattern : reflet haut, trait extérieur très fin, halo doux. */
[data-theme="light"] .card,
[data-theme="light"] .card-strato,
[data-theme="light"] .strato-card,
[data-theme="light"] .glass-card,
[data-theme="light"] .kpi-card,
[data-theme="light"] .chart-card-new {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.35),
    0 0 0 1px rgba(15, 23, 42, 0.04),
    0 1px 1px rgba(15, 23, 42, 0.025),
    0 4px 12px rgba(15, 23, 42, 0.04),
    0 12px 28px rgba(15, 23, 42, 0.03) !important;
}
[data-theme="dark"] .card,
[data-theme="dark"] .card-strato,
[data-theme="dark"] .strato-card,
[data-theme="dark"] .glass-card,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .chart-card-new {
  background: rgba(26, 29, 36, 0.55);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 0 0 1px rgba(0, 0, 0, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.10),
    0 4px 12px rgba(0, 0, 0, 0.16),
    0 12px 28px rgba(0, 0, 0, 0.10) !important;
}

/* ── CONTENT (scrolls INSIDE the frame) ── */
.content-frame > .content {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* 40px top : topbar (44px) - 4px overlap. Le topbar étant transparent
     sans scroll, le très haut du contenu peut passer dessous sans gêner. */
  padding: 40px 28px 28px !important;
  background: transparent;
  border-radius: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.08) transparent;
}
/* Premier élément après la topbar : pas de margin-top supplémentaire */
.content-frame > .content > *:first-child,
.content-frame > .content > .page-header:first-child,
.content-frame > .content > .animate:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.content-frame > .content > .page-header {
  margin-bottom: 6px !important;
  line-height: 1 !important;
}
.content-frame > .content > .page-header h1 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.content-frame > .content > .page-header h1 .icon-glass,
.content-frame > .content > .page-header h1 img {
  width: 22px !important;
  height: 22px !important;
  vertical-align: -3px !important;
}
.content-frame > .content > .page-header .subtitle {
  margin-top: 2px !important;
  line-height: 1.3 !important;
}

.content-frame > .content::-webkit-scrollbar { width: 6px; }
.content-frame > .content::-webkit-scrollbar-track {
  background: transparent;
  margin: 20px 0;           /* respect the radius */
}
.content-frame > .content::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.08);
  border-radius: 3px;
}
.content-frame > .content::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.15);
}

/* .main becomes flex column — .content-frame > .content handles scroll */
.main {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: relative;
}

/* ── LIGHT MODE ── */

[data-theme="light"] .sidebar {
  background: var(--bg2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-right: none;
  border-radius: 6px;
}

[data-theme="light"] .sidebar-bottom {
  border-top: none;
}

[data-theme="light"] .topbar {
  background: transparent;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: none;
}

[data-theme="light"] .app-container {
  background: transparent;
}

[data-theme="light"] .content-frame {
  background: var(--bg);
}

[data-theme="light"] .glass-card,
[data-theme="light"] .stat-card {
  border-color: rgba(0, 0, 0, 0.05);
  background: rgba(255, 255, 255, 0.92);
}

/* ── DARK MODE (same frame structure as light) ── */

[data-theme="dark"] .app-container {
  background: transparent;
}

[data-theme="dark"] .sidebar {
  background: rgba(13,15,20,0.65);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-right: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
}

[data-theme="dark"] .sidebar-bottom {
  border-top: none;
}

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

[data-theme="dark"] .content-frame {
  background: rgba(26,29,36,0.60);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
}

[data-theme="dark"] .content-frame > .content::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
}

/* ── Tabular nums for stats ── */
.stat-card .stat-value,
.kpi-value {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   SILICON VALLEY 2026 — PREMIUM ENHANCEMENTS
   ============================================================ */

/* ─── GRAIN TEXTURE OVERLAY ─── */
.app-container::before,
.app-container::after {
  /* Keep aurora blobs — grain is a separate layer */
}
.app-container {
  position: relative;
}
.grain-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  border-radius: 6px;
  mix-blend-mode: overlay;
}
[data-theme="light"] .grain-overlay {
  opacity: 0.03;
}

/* ─── MODERN SCROLLBAR ─── */
.content-frame > .content::-webkit-scrollbar {
  width: 6px;
}
.content-frame > .content::-webkit-scrollbar-track {
  background: transparent;
  margin: 8px 0;
}
.content-frame > .content::-webkit-scrollbar-thumb {
  background: rgba(var(--acc-rgb), 0.2);
  border-radius: 6px;
  transition: background 0.3s;
}
.content-frame > .content::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--acc-rgb), 0.4);
}
[data-theme="light"] .content-frame > .content::-webkit-scrollbar-thumb {
  background: rgba(var(--acc-rgb), 0.15);
}
[data-theme="light"] .content-frame > .content::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--acc-rgb), 0.3);
}

/* ─── SIDEBAR ACTIVE ICONS ─── */
.sidebar-item.active .material-symbols-outlined {
  color: var(--acc);
  filter: none;
}
[data-theme="light"] .sidebar-item.active .material-symbols-outlined {
  color: var(--accd);
}

.sidebar-item:not(.active):hover .material-symbols-outlined {
  color: var(--t1);
  opacity: 0.8;
  transition: color 0.15s ease;
}

/* ─── ORBIT CARDS — no hover lift ─── */
.card, .card-strato, .kpi-card { transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease; }
.card:hover, .card-strato:hover, .kpi-card:hover {
  border-color: var(--brd2);
}

/* ─── BUTTON PREMIUM HOVER ─── */
.btn-primary, .btn-accent, button[type="submit"],
a[style*="background: var(--accent)"] {
  transition: all 0.25s cubic-bezier(.16,1,.3,1);
}
.btn-primary:active, .btn-accent:active {
  transform: translateY(0) scale(0.98);
}

/* ─── TOPBAR GLASS UPGRADE ─── */
/* Solid backgrounds — glass removed for consistency */

/* ─── AVATAR GRADIENT RING ─── */
.user-badge .avatar {
  background: linear-gradient(135deg, var(--acc), var(--accl));
  box-shadow: 0 0 0 2px rgba(var(--acc-rgb), 0.2);
}
.user-badge .avatar-img {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: none;
}
.user-badge:hover { opacity: 0.85; }

/* ─── STATUS BADGE MICRO-ANIMATION ─── */
.status-badge, .status-badge-btn {
  transition: all 0.2s cubic-bezier(.16,1,.3,1);
}
.status-badge:hover, .status-badge-btn:hover {
  transform: translateY(-1px);
}

/* ─── SIDEBAR LOGO GRADIENT ─── */
.sidebar-logo .logo-icon i {
  background: linear-gradient(135deg, var(--acc), var(--accl));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(var(--acc-rgb), 0.3));
}

/* ─── NAV GROUP HEADER ACCENT ─── */
.nav-group-header i:first-child {
  transition: all 0.25s ease;
}
.nav-group.open > .nav-group-header i:first-child {
  opacity: 0.7;
}

/* ─── TABLE ROW HOVER ─── */
.projects-table tr {
  transition: background 0.2s ease;
}
.projects-table tr:hover td {
  background: rgba(var(--acc-rgb), 0.04);
}

/* ─── TOAST GLASS EFFECT ─── */
.toast-notification {
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}

/* ─── SYNC BUTTON ANIMATION ─── */
.sync-btn:hover .material-symbols-outlined {
  animation: spin 2s linear infinite;
}

/* ─── MODAL PREMIUM BACKDROP ─── */
.htmx-modal-overlay {
  backdrop-filter: blur(8px) saturate(0.8);
  -webkit-backdrop-filter: blur(8px) saturate(0.8);
}

/* ─── FOCUS RING (accessibility + style) ─── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─── SMOOTH SELECTION ─── */
::selection {
  background: rgba(var(--acc-rgb), 0.3);
  color: var(--text-primary);
}

/* ─── prefers-reduced-motion ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .grain-overlay { display: none; }
}

/* ============================================================
   GLOBAL: Command Palette + Notifications + Topbar Search
   (must be in style.css so they work on ALL pages)
   ============================================================ */

/* ─── COMMAND PALETTE (Ctrl+K) ─── */
.cmd-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  z-index: 10000;
}
.cmd-overlay.open { display: flex; }
.cmd-box {
  background: var(--bg-card, #1a1a2e);
  border-radius: 6px;
  width: 540px;
  max-width: 95vw;
  max-height: 460px;
  overflow: hidden;
  box-shadow: 0 6px 80px rgba(0,0,0,0.25);
  border: .5px solid var(--border, rgba(255,255,255,0.08));
  animation: cmdIn 0.2s ease;
}
[data-theme="light"] .cmd-box { background: #fff; border-color: rgba(0,0,0,0.08); }
@keyframes cmdIn { from { opacity:0; transform:translateY(-10px) scale(0.98); } to { opacity:1; transform:translateY(0) scale(1); } }
.cmd-input {
  width: 100%;
  padding: 18px 22px;
  border: none;
  font-size: 16px;
  outline: none;
  border-bottom: .5px solid var(--border);
  font-family: inherit;
  background: transparent;
  color: var(--text-primary);
}
.cmd-input::placeholder { color: var(--text-muted); }
.cmd-results { padding: 10px; max-height: 360px; overflow-y: auto; }
.cmd-cat { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); padding: 10px 12px 4px; }
.cmd-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: 6px; font-size: 14px; color: var(--text-secondary, #94A3B8);
  cursor: pointer; text-decoration: none; transition: background 0.15s;
}
.cmd-item:hover { background: var(--bg-secondary, rgba(255,255,255,0.04)); }
[data-theme="light"] .cmd-item:hover { background: #F5F6FA; }
[data-theme="light"] .cmd-item { color: #4A5064; }
.cmd-ico {
  width: 6px; height: 6px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.cmd-meta { font-size: 12px; color: var(--text-muted); margin-left: auto; white-space: nowrap; }

/* ─── TOPBAR SEARCH BUTTON ─── */
.topbar-search-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 6px;
  border: .5px solid var(--border);
  background: var(--bg-secondary, rgba(255,255,255,0.04));
  color: var(--text-muted); font-size: 13px;
  cursor: pointer; transition: all 0.2s; font-family: inherit;
}
.topbar-search-btn:hover { border-color: var(--accent); color: var(--text-secondary); }
.topbar-search-label { white-space: nowrap; }
.topbar-search-kbd {
  font-size: 10px; font-weight: 600; padding: 2px 6px;
  border-radius: 4px; background: rgba(255,255,255,0.08);
  color: var(--text-muted); font-family: var(--font-mono);
}
[data-theme="light"] .topbar-search-kbd { background: rgba(0,0,0,0.06); }
@media (max-width: 768px) {
  .topbar-search-label, .topbar-search-kbd { display: none; }
}

/* ─── NOTIFICATION BELL & PANEL ─── */
.topbar-notif-btn {
  position: relative; display: inline-flex; align-items: center;
  justify-content: center; width: 36px; height: 36px;
  border-radius: 6px; border: .5px solid var(--border);
  background: transparent; color: var(--text-muted);
  cursor: pointer; transition: all 0.2s; font-size: 16px;
}
.topbar-notif-btn .material-symbols-outlined,
.topbar-notif-btn .ms-icon { transition: transform 0.25s cubic-bezier(.16,1,.3,1); }
.topbar-notif-btn:hover { color: var(--text-primary); background: var(--bg-secondary); }
.topbar-notif-btn:hover .material-symbols-outlined,
.topbar-notif-btn:hover .ms-icon { transform: scale(1.2) rotate(-12deg); }
.notif-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 99px; background: #EF4444;
  color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.notif-panel {
  position: fixed; top: 56px; right: 16px;
  width: 380px; max-height: 500px;
  background: var(--bg-card, #1a1a2e); border: .5px solid var(--border);
  border-radius: 6px; box-shadow: 0 16px 48px rgba(0,0,0,0.18);
  z-index: 9998; overflow: hidden;
  animation: cmdIn 0.2s ease;
}
[data-theme="light"] .notif-panel { background: #fff; }
.notif-panel-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: .5px solid var(--border);
}
.notif-panel-title { font-weight: 600; font-size: 14px; color: var(--text-primary); }
.notif-mark-read {
  font-size: 12px; color: var(--accent); background: none;
  border: none; cursor: pointer; font-family: inherit; font-weight: 500;
}
.notif-panel-body { max-height: 400px; overflow-y: auto; padding: 8px; }
.notif-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px; border-radius: 6px;
  text-decoration: none; color: var(--text-secondary);
  transition: background 0.15s;
}
.notif-item:hover { background: var(--bg-secondary); }
.notif-item.read { opacity: 0.5; }
.notif-dot-color { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.notif-content { flex: 1; min-width: 0; }
.notif-content strong { font-size: 13px; font-weight: 600; color: var(--text-primary); display: block; }
.notif-msg { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.notif-time { font-size: 11px; color: var(--text-muted); white-space: nowrap; margin-top: 2px; }
.notif-empty { text-align: center; padding: 6px; color: var(--text-muted); font-size: 13px; }

/* ─── Select option readability fix ─── */
select option { background: var(--card, #FFFDFB); color: var(--t1, #1A1714); }
[data-theme="dark"] select option { background: #1a1d24; color: #f0f0f0; }

/* ─── Hugeicons sizing ─── */
/* Material Symbols sizing for sidebar & buttons */
.sidebar-item .material-symbols-outlined,
.nav-group-header .material-symbols-outlined { font-size: 20px; width: 20px; text-align: center; }
button .material-symbols-outlined, .btn .material-symbols-outlined { font-size: 18px; }

/* ─── Material Symbols ─── */
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; vertical-align: middle; }
.ms-sm { font-size: 18px; }
.ms-lg { font-size: 28px; }

/* ─── COLLAPSIBLE SECTIONS ─── */
.collapsible-header {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; cursor: pointer; user-select: none;
  transition: background 0.15s; border-radius: 6px;
}
.collapsible-header:hover { background: rgba(0, 0, 0, 0.02); }
[data-theme="dark"] .collapsible-header:hover { background: rgba(255, 255, 255, 0.04); }
.collapsible-chevron {
  font-size: 12px; color: var(--text-muted);
  transition: transform 0.2s ease; display: inline-block;
}
.collapsible-section[data-collapsed="true"] .collapsible-chevron { transform: rotate(-90deg); }
.collapsible-body {
  overflow: hidden; max-height: 5000px;
  transition: max-height 0.3s ease, opacity 0.2s ease; opacity: 1;
}
.collapsible-section[data-collapsed="true"] .collapsible-body { max-height: 0; opacity: 0; padding: 0; }
.collapsible-count {
  font-size: 12px; color: var(--text-muted);
  background: rgba(0, 0, 0, 0.05); padding: 1px 8px;
  border-radius: 6px; margin-left: auto;
}

/* ============================================================
   CROSS-PAGE: Executive Glass Design System
   Factures, Devis, Dépenses, Clients — unified styling
   ============================================================ */

/* ─── TABLES — Glass containers + alternating rows ─── */
.card table,
.data-table,
table.projects-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.card table thead th,
.data-table thead th {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  padding: 10px 14px;
  border-bottom: .5px solid var(--border);
  text-align: left;
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 2;
}
.card table tbody td,
.data-table tbody td {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-secondary);
  border-bottom: .5px solid rgba(255,255,255,0.03);
  vertical-align: middle;
  transition: background 0.2s ease;
}
[data-theme="light"] .card table tbody td,
[data-theme="light"] .data-table tbody td {
  border-bottom-color: rgba(0,0,0,0.03);
}
/* Alternating rows — very subtle */
.card table tbody tr:nth-child(even) td,
.data-table tbody tr:nth-child(even) td {
  background: rgba(255,255,255,0.015);
}
[data-theme="light"] .card table tbody tr:nth-child(even) td,
[data-theme="light"] .data-table tbody tr:nth-child(even) td {
  background: rgba(0,0,0,0.012);
}
/* Row hover */
.card table tbody tr:hover td,
.data-table tbody tr:hover td {
  background: rgba(var(--acc-rgb),0.04);
}

/* ─── MONETARY VALUES — Space Mono ─── */
.amount, .montant, .total, .prix,
td:last-child, td[class*="montant"], td[class*="total"],
.kpi-value, .stat-value, .big-number,
[data-money], .money {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums;
}
/* KPI montants = blanc vif en dark mode */
[data-theme="dark"] .kpi-value,
[data-theme="dark"] .kpi-val,
[data-theme="dark"] .stat-value,
[data-theme="dark"] .big-number,
[data-theme="dark"] .pd-kpi-value {
  color: #ffffff;
}
/* Number columns — right-aligned */
td[style*="text-align:right"], th[style*="text-align:right"],
.text-right, .amount {
  font-family: var(--font-mono);
}

/* ─── STATUS BADGES — Unified glass pills ─── */
.status-badge,
.badge,
.tag,
select.status-select {
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .01em;
}

/* ─── FILTER TABS — Unified across pages ─── */
.filter-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-card);
  border-radius: 6px;
  border: .5px solid var(--border);
  margin-bottom: 16px;
  overflow-x: auto;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.filter-tab {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-body);
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.filter-tab:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
}
.filter-tab.active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(var(--acc-rgb),0.25);
}

/* ─── PAGE HEADERS — Quicksand ─── */
.page-header h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.page-header .subtitle {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--t2, #b0b6c3);
}

/* ─── STAGGERED ROW ANIMATION ─── */
@keyframes rowFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.card table tbody tr,
.data-table tbody tr {
  animation: rowFadeIn 0.3s ease-out both;
}
.card table tbody tr:nth-child(1) { animation-delay: 0ms; }
.card table tbody tr:nth-child(2) { animation-delay: 30ms; }
.card table tbody tr:nth-child(3) { animation-delay: 60ms; }
.card table tbody tr:nth-child(4) { animation-delay: 90ms; }
.card table tbody tr:nth-child(5) { animation-delay: 120ms; }
.card table tbody tr:nth-child(6) { animation-delay: 150ms; }
.card table tbody tr:nth-child(7) { animation-delay: 180ms; }
.card table tbody tr:nth-child(8) { animation-delay: 210ms; }
.card table tbody tr:nth-child(9) { animation-delay: 240ms; }
.card table tbody tr:nth-child(10) { animation-delay: 270ms; }
.card table tbody tr:nth-child(n+11) { animation-delay: 300ms; }

/* ═══ TAB TRANSITION — smooth content switch ═══ */
@keyframes tabFadeSlide {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.tab-content,
.tab-pane,
[x-show][x-transition],
.animate-tab {
  animation: tabFadeSlide 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Content frame page transition — disabled for backdrop-filter compatibility */

/* View panels (projects list/kanban/calendar) — show/hide */
.view-panel {
  display: none;
}
.view-panel.view-active {
  display: block;
  animation: viewFadeIn 0.3s ease;
}
@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Filter tabs active indicator transition */
.filter-tab, .seg-tab, .tab-btn {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── CARD CONTAINERS — Glass for lists pages ─── */
.card {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ─── INPUTS & SELECTS — Quicksand + glass ─── */
input, select, textarea {
  font-family: var(--font-body);
}
input[type="number"], input[type="date"],
input.hourly-rate-input, input.due-date-input {
  font-family: var(--font-mono);
}
select {
  cursor: pointer;
}

/* ─── FORM LABELS ─── */
label, .form-label, .field-label {
  font-family: var(--font-body);
  font-weight: 500;
}

/* ─── KPI / STAT CARDS (cross-page) ─── */
.stat-card, .summary-card {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: .5px solid var(--border);
  border-radius: 6px;
  padding: 20px;
}

/* ─── EMPTY STATES ─── */
.empty-state, [class*="empty"], [class*="no-data"] {
  font-family: var(--font-body);
  color: var(--text-muted);
}

/* ─── RESPONSIVE — tables scroll on mobile ─── */
@media (max-width: 768px) {
  .card table { display: block; overflow-x: auto; }
  .filter-tabs { flex-wrap: nowrap; }
  .page-header h1 { font-size: 18px; }
}

/* ============================================================
   MOBILE ADAPTATION — Comprehensive fixes
   ============================================================ */
@media (max-width: 768px) {
  /* ─── Typography — minimum 14px body, 12px labels ─── */
  body { font-size: 14px; }
  .kpi-label, .card-title, h3 { font-size: 13px; }
  .kpi-value { font-size: 22px; }

  /* ─── Touch targets — 44px minimum ─── */
  button, .btn, a.btn, select, .filter-tab,
  .nav-tab, .view-btn, .sidebar-item {
    min-height: 44px;
  }
  input, select, textarea {
    min-height: 44px;
    font-size: 16px; /* prevents iOS zoom on focus */
  }

  /* ─── KPI grid — 2 cols on tablet, 1 on phone ─── */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }

  /* ─── Charts — stack vertically ─── */
  .charts-row {
    grid-template-columns: 1fr !important;
  }

  /* ─── Filter tabs — horizontal scroll ─── */
  .filter-tabs {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 3px;
    gap: 3px;
  }
  .filter-tabs::-webkit-scrollbar { display: none; }
  .filter-tab {
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: 12px;
  }

  /* ─── View toggle ─── */
  .view-toggle { width: 100%; }
  .view-btn { flex: 1; justify-content: center; }

  /* ─── Kanban — single column scroll ─── */
  .kanban-container {
    flex-direction: column;
    gap: 12px;
  }
  .kcol, .kanban-col {
    min-width: unset;
    max-width: unset;
    width: 100%;
  }

  /* ─── Card headers — stack on mobile ─── */
  .card-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px;
  }

  /* ─── Project cards — 1 col ─── */
  .projets-grid {
    grid-template-columns: 1fr !important;
  }

  /* ─── Progress bar — wider on mobile ─── */
  .adv-bar { min-width: unset; }
  .adv-btn { opacity: 1; } /* always visible on touch */

  /* ─── Topbar search — icon only ─── */
  .topbar-search-btn {
    padding: 8px;
    min-width: 44px;
  }
  .topbar-search-label, .topbar-search-kbd { display: none; }

  /* ─── Notification panel — full width ─── */
  .notif-panel {
    right: 8px; left: 8px; width: auto;
    max-height: 70vh;
  }

  /* ─── Command palette — full width ─── */
  .cmd-box {
    width: 95vw;
    max-height: 80vh;
  }

  /* ─── Modals — nearly full screen ─── */
  .modal, #strato-modal-content {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 90vh !important;
    border-radius: 5px !important;
  }
  #statusModal {
    width: 95vw !important;
    max-width: 95vw !important;
    top: 5vh !important;
    transform: translateX(-50%) !important;
  }

  /* ─── Welcome banner — compact ─── */
  .welcome-banner {
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .welcome-banner h1 { font-size: 18px; }
  .welcome-subtitle { font-size: 12px; }
  .btn-personnaliser { align-self: flex-start; }

  /* ─── Sidebar — slide from left ─── */
  .hamburger-btn { display: flex !important; }

  /* ─── Goals section ─── */
  .goals-grid { gap: 12px; }

  /* ─── Tables — horizontal scroll with shadow hint ─── */
  .card-body {
    position: relative;
  }
  .card table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 480px) {
  .kpi-grid {
    grid-template-columns: 1fr !important;
  }
  .kpi-card { padding: 16px; }
  .kpi-value { font-size: 20px; }
  .page-header h1 { font-size: 16px; }
  .topbar { padding: 10px 12px; }
  .content { padding: 16px 12px; }
  .card { border-radius: 6px; }
}

/* ============================================================
   TRÉSORERIE + FINANCES — Dark mode fixes
   ============================================================ */

/* Montants dans les tableaux — meilleur contraste */
[data-theme="dark"] td .amount,
[data-theme="dark"] td .montant,
[data-theme="dark"] .treso-amount,
[data-theme="dark"] .treso-val {
  color: #E8EAF0;
}
/* Cellules vides — gris moyen lisible */
[data-theme="dark"] td:empty::after,
[data-theme="dark"] .no-data {
  color: #f6f6f6;
}

/* Barres ENTRÉES / SORTIES — glass doux */
[data-theme="dark"] .row-entrees, [data-theme="dark"] .row-income,
[data-theme="dark"] tr.income-row td {
  background: rgba(34,197,94,0.08);
}
[data-theme="dark"] .row-entrees .label, [data-theme="dark"] .income-label {
  color: #4ADE80;
}
[data-theme="dark"] .row-sorties, [data-theme="dark"] .row-expense,
[data-theme="dark"] tr.expense-row td {
  background: rgba(239,68,68,0.08);
}
[data-theme="dark"] .row-sorties .label, [data-theme="dark"] .expense-label {
  color: #F87171;
}

/* Colonne EN COURS highlight — glass subtil */
[data-theme="dark"] .col-current, [data-theme="dark"] td.current-month,
[data-theme="dark"] th.current-month {
  background: rgba(var(--acc-rgb),0.08);
  border-top: .5px solid rgba(var(--acc-rgb),0.15);
  border-bottom: .5px solid rgba(var(--acc-rgb),0.15);
}

/* En-têtes de colonnes mois — blanc lisible */
[data-theme="dark"] .treso-table th,
[data-theme="dark"] .month-header {
  color: #E2E8F0;
}

/* ============================================================
   TRESO TABLE — mois sélectionné (colonne active)
   Couleur accent visible en light ET dark mode.
   ============================================================ */
/* Period picker dropdown — mêmes paramètres que .header-dropdown (glass +
   radius 28px + shadow + blur), z-index maxi pour passer au 1er plan */
#period-picker {
  background: rgba(10, 10, 20, 0.04) !important;
  backdrop-filter: blur(12px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) 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.35) !important;
  padding: 16px !important;
  z-index: 99999 !important;
  animation: hdDropIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
[data-theme="light"] #period-picker {
  background: rgba(245, 243, 240, 0.08) !important;
  border: 1px solid rgba(70,60,120,0.15) !important;
  box-shadow: 0 8px 32px rgba(70,60,120,0.18) !important;
}
/* Textes internes : lisibilité sur fond glass (pas de text-gray- figé) */
#period-picker #period-year { color: var(--t1) !important; }
#period-picker button i.hgi-stroke { color: var(--t2) !important; }
#period-picker #period-months-grid button {
  color: var(--t2) !important;
  background: transparent !important;
  transition: all 0.15s;
}
#period-picker #period-months-grid button:hover {
  background: rgba(var(--acc-rgb), 0.10) !important;
  color: var(--t1) !important;
}
/* État "en cours" (mois courant) + plage sélectionnée en accent */
#period-picker #period-months-grid button.bg-strato-500 {
  background: var(--acc) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
#period-picker #period-months-grid button.bg-strato-100 {
  background: rgba(var(--acc-rgb), 0.18) !important;
  color: var(--acc) !important;
}

#treso-table th.bg-strato-50,
#treso-table thead th.bg-strato-50 {
  background: rgba(var(--acc-rgb), 0.12) !important;
  color: var(--acc) !important;
  font-weight: 700 !important;
  position: relative;
}
#treso-table th.bg-strato-50::after,
#treso-table thead th.bg-strato-50::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 2px;
  background: var(--acc);
  border-radius: 2px 2px 0 0;
}
[data-theme="dark"] #treso-table th.bg-strato-50,
[data-theme="dark"] #treso-table thead th.bg-strato-50 {
  background: rgba(var(--acc-rgb), 0.18) !important;
  color: var(--accl) !important;
}

/* Hover sur les colonnes mois (hors active) — halo accent léger */
#treso-table th.hover\:bg-strato-100:hover,
#treso-table thead th.hover\:bg-strato-100:hover {
  background: rgba(var(--acc-rgb), 0.08) !important;
}
[data-theme="dark"] #treso-table th.hover\:bg-strato-100:hover,
[data-theme="dark"] #treso-table thead th.hover\:bg-strato-100:hover {
  background: rgba(var(--acc-rgb), 0.14) !important;
}

/* Cellules du body : surligne légèrement la colonne du mois actif
   si le <th> correspondant a bg-strato-50 (via nth-child serait
   idéal, mais ici on cible tbody tr td avec la classe appliquée par JS) */
#treso-table td.month-selected,
#treso-table td.bg-strato-50\/30 {
  background: rgba(var(--acc-rgb), 0.06) !important;
}
[data-theme="dark"] #treso-table td.month-selected,
[data-theme="dark"] #treso-table td.bg-strato-50\/30 {
  background: rgba(var(--acc-rgb), 0.10) !important;
}

/* ============================================================
   CONSOLIDATED MOBILE RESPONSIVE + CLICKUP DRAG & DROP
   Added 2026-03-28
   ============================================================ */

/* ═══ DRAG & DROP — Smooth Slide + Lift Effect ═══ */

/* Drag handle */
/* .drag-handle removed — list drag & drop disabled */

.kanban-card,
.project-row,
.task-row,
tr[data-project-id],
tr[data-task-id] {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.25s ease;
  will-change: transform, box-shadow;
}

/* Chosen = element being picked up */
.sortable-chosen {
  z-index: 9999 !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(var(--acc-rgb), 0.1);
  border-radius: 6px;
  background: var(--card) !important;
}

/* Drag = the ORIGINAL element left in place (make it semi-visible) */
.sortable-drag {
  opacity: 0.4 !important;
}

/* Fallback = the element following the cursor (must be FULLY VISIBLE) */
.sortable-fallback {
  opacity: 0.95 !important;
  transform: scale(1.02) rotate(0.5deg) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
  border: 1.5px solid var(--acc) !important;
  border-radius: 4px !important;
  background: var(--card) !important;
  z-index: 99999 !important;
  pointer-events: none;
}

/* Ghost = placeholder showing where item will land */
.sortable-ghost {
  opacity: 1 !important;
  background: transparent !important;
  border: 2px dashed rgba(var(--acc-rgb), 0.25) !important;
  box-shadow: none !important;
  position: relative;
  border-radius: 3px !important;
  padding: 0 !important;
  margin: 2px 0 !important;
}

.sortable-ghost * {
  opacity: 0 !important;
}

.sortable-ghost::after {
  content: '+';
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  font-size: 18px;
  font-weight: 600;
  color: rgba(var(--acc-rgb), 0.3);
  border-radius: 5px;
}

/* Section highlight during drag */
body.is-sorting .project-list-body {
  border-radius: 5px;
  transition: background 0.2s ease, outline 0.2s ease;
  outline: 2px dashed transparent;
  outline-offset: -2px;
}

body.is-sorting .project-list-body:hover {
  background: rgba(var(--acc-rgb), 0.03);
  outline-color: rgba(var(--acc-rgb), 0.12);
}

/* Neighbors slide smoothly */
body.is-sorting .kanban-card,
body.is-sorting .project-row,
body.is-sorting .task-row,
body.is-sorting tr[data-project-id] {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body.is-sorting {
  cursor: grabbing !important;
  user-select: none;
  -webkit-user-select: none;
}

body.is-sorting * {
  cursor: grabbing !important;
}

/* Kanban drop zones */
.kanban-col-body {
  min-height: 60px;
  border-radius: 5px;
  transition: background 0.25s ease, outline 0.25s ease;
}

body.is-sorting .kanban-col-body {
  outline: 2px dashed transparent;
  outline-offset: -2px;
}

body.is-sorting .kanban-col-body:hover {
  background: rgba(var(--acc-rgb), 0.03);
  outline-color: rgba(var(--acc-rgb), 0.12);
}

/* ═══ CONSOLIDATED MOBILE — 768px and below ═══ */
@media (max-width: 768px) {

  /* ── Sidebar overlay z-index fix ── */
  .sidebar {
    z-index: 200;
  }
  .sidebar-overlay {
    z-index: 199;
  }

  /* ── Content frame ── */
  .content-frame {
    margin: 0 !important;
    border-radius: 0 !important;
  }
  .content {
    padding: 16px 12px 6px !important;
    border-radius: 0 !important;
  }

  /* ── Topbar compact ── */
  .topbar {
    padding: 8px 12px !important;
    height: 50px !important;
    gap: 8px;
  }
  .topbar-breadcrumb span:first-child {
    display: none;
  }
  .topbar-breadcrumb span:nth-child(2) {
    display: none;
  }
  .user-badge {
    font-size: 0;
    gap: 0;
    padding: 0;
  }
  .user-badge .avatar {
    font-size: 11px;
  }
  .topbar-timer {
    font-size: 11px;
  }
  .timer-project-name {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── Grids 2 et 3 colonnes ── */
  .grid-2, .grid-3, .g2, .g3, .grid2, .grid3 {
    grid-template-columns: 1fr !important;
  }

  /* ── Projets en cours (cards) ── */
  .projects-grid, .projets-grid {
    grid-template-columns: 1fr !important;
  }
  .project-cards-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* ── Tableaux — scroll horizontal ── */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 12px !important;
  }
  .hide-mobile {
    display: none !important;
  }

  /* ── Kanban vertical ── */
  .kanban, .kanban-board, .kanban-container {
    flex-direction: column !important;
    overflow-x: visible !important;
  }
  .kanban-col, .kcol {
    min-width: 100% !important;
    max-width: 100% !important;
  }

  /* ── Welcome compact ── */
  .welcome, .welcome-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 16px !important;
  }
  .welcome-title, .welcome-banner h1 {
    font-size: 18px !important;
  }

  /* ── Tabs scrollables ── */
  .tabs, .filter-tabs, .tab-btn-group {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    width: 100% !important;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar,
  .filter-tabs::-webkit-scrollbar,
  .tab-btn-group::-webkit-scrollbar {
    display: none;
  }
  .tab, .filter-tab {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 11px !important;
    padding: 5px 12px !important;
  }

  /* ── Modales ── */
  .modal, .modal-content, .cmd-box, .status-modal, #statusModal {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: 0 auto;
    max-height: 85vh !important;
  }
  .cmd-overlay {
    padding-top: 5vh !important;
  }
  #strato-modal-overlay {
    padding: 12px !important;
  }
  #strato-modal-content {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    border-radius: 5px !important;
  }

  /* ── Boutons ── */
  .btn-primary, .btn-save, .btn-getstarted, .btn {
    padding: 7px 14px !important;
    font-size: 12.5px !important;
    min-height: 34px !important;
  }

  /* ── Page Login / Pricing ── */
  .public-nav {
    padding: 10px 14px !important;
    flex-wrap: wrap;
    gap: 8px;
  }
  .public-links {
    display: none !important;
  }
  .public-actions {
    margin-left: auto;
  }
  .signin-dropdown {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    border-radius: 5px 16px 0 0 !important;
    max-height: 70vh;
  }

  /* ── Pricing Cards ── */
  .pricing-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Filtres ── */
  .filters-row, .filter-bar {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .filter-bar select {
    font-size: 11px !important;
    padding: 5px 8px !important;
  }

  /* ── Sections Projet ── */
  .project-section-header, .project-group-header {
    padding: 8px 10px !important;
    font-size: 13px;
  }

  /* ── Détail Projet ── */
  .project-detail-grid, .project-hero {
    grid-template-columns: 1fr !important;
  }

  /* ── CR Chantier ── */
  .cr-attendance-table {
    font-size: 11px !important;
  }
  .cr-attendance-table select {
    min-width: 100px !important;
    font-size: 11px !important;
  }

  /* ── CCTP ── */
  .cctp-three-columns {
    flex-direction: column !important;
  }
  .cctp-sidebar, .cctp-panel-right {
    width: 100% !important;
    max-height: 300px;
    overflow-y: auto;
  }

  /* ── Barre d'avancement ── */
  .adv-bar {
    min-width: 80px !important;
  }

  /* ── Drag & Drop tactile ── */
  .sortable-fallback {
    transform: scale(1.05) rotate(1.5deg) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18) !important;
  }
  body.is-sorting {
    overflow: hidden !important;
    touch-action: none !important;
  }
  .sortable-chosen {
    transform: scale(1.03);
  }

  /* ── Prevent body scroll when sidebar open ── */
  body.sidebar-open {
    overflow: hidden !important;
  }

  /* ── Fix project filter row stacking ── */
  .filter-tabs + div[style*="display:flex"] {
    flex-wrap: wrap !important;
  }
  .view-toggle {
    width: 100%;
    margin-top: 8px;
  }
  #client-filter {
    min-width: 120px !important;
    font-size: 12px !important;
  }
}

/* Auto-collapse sidebar supprimé — labels toujours visibles.
   Le collapse reste disponible via le bouton toggle (localStorage). */

/* ═══ TABLET (768px - 1024px) ═══ */
@media (min-width: 769px) and (max-width: 1024px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .grid-3, .grid3, .g3 {
    grid-template-columns: 1fr 1fr !important;
  }
  .cctp-three-columns {
    flex-direction: column !important;
  }
  /* Tablet: shrink project list — hide Rendu, Taux, Montant, Priorité */
  .proj-list-header,
  .proj-list-row {
    font-size: 10px;
    gap: 4px;
    padding: 5px 8px;
  }
  .proj-list-header { font-size: 8.5px; }
  .proj-list-row > span:nth-child(3),
  .proj-list-row > span:nth-child(7),
  .proj-list-row > span:nth-child(9),
  .proj-list-row > span:nth-child(10),
  .proj-list-header > span:nth-child(3),
  .proj-list-header > span:nth-child(7),
  .proj-list-header > span:nth-child(9),
  .proj-list-header > span:nth-child(10) { display: none; }
  .proj-list-header,
  .proj-list-row {
    grid-template-columns: 2fr 0.8fr 0.7fr 0.8fr 1.2fr 1fr;
  }
  .project-section-header { font-size: 11px; padding: 5px 10px; }
  .section-label { font-size: 11px !important; }
  .btn, .btn-filter-cascade, .view-btn, .add-section-global { font-size: 10px; }
  .page-header h1 { font-size: 20px; }
  .page-header .subtitle { font-size: 11px; }
  .hourly-rate-input { width: 50px !important; font-size: 10px; }
  .tracking-btn { font-size: 9px; padding: 2px 6px; }
  .client-badge { font-size: 9px; padding: 1px 5px; }
  .priorite-badge, .phase-badge, .status-badge-btn { font-size: 9px !important; padding: 2px 6px !important; }
}

/* ═══ Small tablet / large mobile (480-768px) ═══ */
@media (max-width: 768px) {
  .proj-list-header,
  .proj-list-row {
    font-size: 10px;
    gap: 4px;
    padding: 6px 8px;
  }
  .proj-list-header { font-size: 8.5px; }
  .project-section-header { padding: 6px 10px; }
  .section-label { font-size: 11px !important; }
  .section-count { font-size: 10px !important; padding: 1px 5px !important; }
}

/* ═══ Small mobile (<480px) — card layout ═══ */
@media (max-width: 480px) {
  .proj-list-header { display: none; }
  .proj-list-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
    font-size: 11px;
  }
  .proj-list-row > span { display: inline-flex; }
  .proj-list-row > span:nth-child(7),
  .proj-list-row > span:nth-child(8),
  .proj-list-row > span:nth-child(9),
  .proj-list-row > span:nth-child(10) { display: none; }
  .proj-list-row > span:first-child { width: 100%; font-weight: 600; }
  .project-section-header { padding: 5px 8px; }
  .section-label { font-size: 10.5px !important; }
}

/* ═══ PAGE TRANSITION — STAGGERED ENTRY ═══ */
@keyframes pageIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes childIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pageOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes rowIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes colIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Content area — animation disabled for backdrop-filter compatibility */

/* Children stagger — disabled, handled by animations.js */

/* Page exit */
.page-exiting .content {
  animation: pageOut 0.2s ease both;
}

/* Sidebar and topbar don't animate */
.topbar, .sidebar, .sidebar > * {
  animation: none !important;
}

/* Table rows cascade — one by one */
.proj-list-row, .project-section {
  animation: rowIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.proj-list-row:nth-child(1), .project-section:nth-child(1) { animation-delay: 0.06s; }
.proj-list-row:nth-child(2), .project-section:nth-child(2) { animation-delay: 0.14s; }
.proj-list-row:nth-child(3), .project-section:nth-child(3) { animation-delay: 0.22s; }
.proj-list-row:nth-child(4), .project-section:nth-child(4) { animation-delay: 0.30s; }
.proj-list-row:nth-child(5), .project-section:nth-child(5) { animation-delay: 0.38s; }
.proj-list-row:nth-child(6), .project-section:nth-child(6) { animation-delay: 0.46s; }
.proj-list-row:nth-child(7), .project-section:nth-child(7) { animation-delay: 0.54s; }
.proj-list-row:nth-child(8), .project-section:nth-child(8) { animation-delay: 0.62s; }
.proj-list-row:nth-child(9), .project-section:nth-child(9) { animation-delay: 0.70s; }
.proj-list-row:nth-child(10), .project-section:nth-child(10) { animation-delay: 0.78s; }
.proj-list-row:nth-child(n+11), .project-section:nth-child(n+11) { animation-delay: 0.34s; }

/* KPI cards cascade */
.kpi-g .kpi:nth-child(1) { animation-delay: 0.08s; }
.kpi-g .kpi:nth-child(2) { animation-delay: 0.14s; }
.kpi-g .kpi:nth-child(3) { animation-delay: 0.20s; }
.kpi-g .kpi:nth-child(4) { animation-delay: 0.26s; }
.kpi-g .kpi:nth-child(5) { animation-delay: 0.32s; }

/* Kanban columns cascade horizontally */
.kanban-col:nth-child(1) { animation: colIn 0.3s ease both; animation-delay: 0.05s; }
.kanban-col:nth-child(2) { animation: colIn 0.3s ease both; animation-delay: 0.1s; }
.kanban-col:nth-child(3) { animation: colIn 0.3s ease both; animation-delay: 0.15s; }
.kanban-col:nth-child(4) { animation: colIn 0.3s ease both; animation-delay: 0.2s; }
.kanban-col:nth-child(5) { animation: colIn 0.3s ease both; animation-delay: 0.25s; }
.kanban-col:nth-child(6) { animation: colIn 0.3s ease both; animation-delay: 0.3s; }
.kanban-col:nth-child(7) { animation: colIn 0.3s ease both; animation-delay: 0.35s; }

/* ─── STATUS DROPDOWN ─── */
.status-dropdown-wrapper {
    position: relative;
    display: inline-block;
    z-index: 1;
}
.status-dropdown-wrapper.open {
    z-index: 9999;
}
.status-badge-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid;
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--f), monospace;
    font-weight: 600;
    transition: filter 0.15s ease, transform 0.1s ease;
    line-height: 1;
    background: none;
}
.status-badge-btn:hover { filter: brightness(1.15); }
.status-badge-btn:active { transform: scale(0.97); }
.status-badge-sm { padding: 4px 14px; font-size: 12px; }
.status-badge-md { padding: 6px 18px; font-size: 13px; }
.status-badge-btn .status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.status-chevron { transition: transform 0.2s ease; }
.status-dropdown-wrapper.open .status-chevron { transform: rotate(180deg); }
.status-dropdown-menu {
    display: none;
    position: fixed;
    background: rgba(26,34,55,0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 4px;
    min-width: 170px;
    z-index: 10000;
    box-shadow: 0 8px 6px rgba(0,0,0,0.4);
    animation: statusDropdownIn 0.15s ease-out;
}
.status-dropdown-wrapper.open .status-dropdown-menu { display: block; }
[data-theme="light"] .status-dropdown-menu {
    background: rgba(255,255,255,0.88);
    border-color: rgba(0,0,0,0.08);
}
@keyframes statusDropdownIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.status-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.status-dropdown-item:hover { background: rgba(255,255,255,0.05); }
[data-theme="light"] .status-dropdown-item:hover { background: rgba(0,0,0,0.04); }
.status-dropdown-item .status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-name { font-size: 13px; color: var(--t2); font-family: var(--f), monospace; }
.status-check { margin-left: auto; }

/* ─── GLOW SPIN (rotating border trail) ─── */
@property --glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes glowSpin {
  from { --glow-angle: 0deg; }
  to { --glow-angle: 360deg; }
}

/* ═══ STAGGERED FADE-IN ANIMATION ═══ */
.animate-in {
  opacity: 0;
  transform: scale(0.95) translateY(10px);
}
.animate-in.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ═══════════════════════════════════════════════════════════
   MOBILE PERFECTION — Final polish pass
   ═══════════════════════════════════════════════════════════ */

/* ── Safe area insets (iPhone notch + home indicator) ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .content {
    padding-bottom: calc(32px + env(safe-area-inset-bottom)) !important;
  }
  .sidebar {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .modal, .modal-content, #strato-modal-content {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .flash-messages {
    top: calc(68px + env(safe-area-inset-top));
  }
  .km-toast {
    bottom: calc(18px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 768px) {
  /* ── Notification panel: full width on mobile ── */
  .notif-panel {
    width: calc(100vw - 6px) !important;
    max-width: 380px;
    right: 12px !important;
    left: 12px !important;
  }

  /* ── Command palette: full width ── */
  .cmd-box {
    width: calc(100vw - 6px) !important;
    max-width: 95vw !important;
  }

  /* ── Search btn: icon only ── */
  .topbar-search-btn {
    padding: 7px 10px;
    min-width: 36px;
    justify-content: center;
  }

  /* ── Status dropdown: bottom sheet on mobile ── */
  .status-dropdown-menu {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    border-radius: 5px 16px 0 0 !important;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: 50vh;
    overflow-y: auto;
    z-index: 9999;
  }

  /* ── Action buttons: always visible (no hover on touch) ── */
  .proj-list-row .row-actions,
  .table-strato tr .row-actions,
  [class*="action-btn"],
  .context-menu-btn {
    opacity: 1 !important;
  }

  /* ── Cards: reduce padding for more content space ── */
  .card-strato, .strato-card {
    padding: 14px !important;
  }

  /* ── Page header: compact ── */
  .page-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .page-header h1, .page-title {
    font-size: 18px !important;
  }
  .page-header .btn, .page-header a.btn {
    font-size: 11px !important;
    padding: 6px 12px !important;
  }

  /* ── Bottom safe spacing for fixed elements ── */
  .detail-sidebar-mobile-btn {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .cal-mobile-fab {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }

  /* ── Donut chart legend: prevent truncation ── */
  .donut-legend-label {
    white-space: normal;
    font-size: 12px;
  }

  /* ── Form fields: prevent iOS zoom (16px min) ── */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px !important;
  }

  /* ── Pricing page: fix horizontal overflow ── */
  .pricing-section {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* ── Subscription card: full width ── */
  .subscription-card, .plan-card {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 480px) {
  /* ── Extra tight layout for small phones ── */
  .notif-panel {
    width: calc(100vw - 16px) !important;
    right: 8px !important;
    left: 8px !important;
  }

  /* ── Welcome banner: even more compact ── */
  .welcome-banner h1 {
    font-size: 16px !important;
  }
  .welcome-subtitle {
    font-size: 12px !important;
  }

  /* ── Buttons: full width stacking ── */
  .page-header .btn, .page-header a.btn {
    width: 100%;
    justify-content: center;
  }

  /* ── Sidebar item text: truncate long names ── */
  .sidebar-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 170px;
  }

  /* ── Charts: reduce min-height ── */
  canvas {
    max-height: 220px !important;
  }

  /* ── Badge sizes: min readable ── */
  .badge, .status-badge {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }
}

/* ── Landscape phone: tighter layout ── */
@media (max-width: 768px) and (orientation: landscape) {
  .topbar {
    height: 42px !important;
    padding: 4px 12px !important;
  }
  .content {
    padding: 12px 16px !important;
  }
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .welcome-banner {
    padding: 12px 16px !important;
  }
  .modal, #strato-modal-content {
    max-height: 80vh !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
  .animate-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   MOBILE FINAL — Remaining gaps (added 2026-04-03)
   ============================================================ */

@media (max-width: 768px) {

  /* ─── 1. KPI GRIDS: override inline style repeat(4/5, 1fr) ─── */
  .kpi-grid[style*="repeat(5"],
  .kpi-grid[style*="repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* ─── 2. FILTER BAR: stack form + search + button ─── */
  div[style*="display:flex"][style*="gap:0"][style*="margin-bottom"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  div[style*="display:flex"][style*="gap:0"] > form[style*="display:flex"] {
    width: 100% !important;
    flex-shrink: 1 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  div[style*="display:flex"][style*="gap:0"] > .search-live {
    margin-left: 0 !important;
    width: 100% !important;
    flex: unset !important;
  }
  div[style*="display:flex"][style*="gap:0"] > .btn-primary-strato,
  div[style*="display:flex"][style*="gap:0"] > button.btn-primary-strato {
    margin-left: 0 !important;
    width: 100% !important;
    justify-content: center;
  }
  div[style*="display:flex"][style*="gap:0"] > div[style*="display:flex"][style*="gap:8px"] {
    width: 100% !important;
    margin-left: 0 !important;
    flex-wrap: wrap;
  }
  div[style*="display:flex"][style*="gap:0"] > div[style*="display:flex"][style*="gap:8px"] > * {
    flex: 1;
    justify-content: center;
    text-align: center;
  }

  /* ─── 3. MODAL FORM ROWS: stack horizontally laid-out fields ─── */
  #strato-modal-content .flex.gap-3,
  #strato-modal-content .flex.gap-4,
  #strato-modal-content div[style*="display:flex"][style*="gap"] {
    flex-wrap: wrap !important;
  }
  #strato-modal-content .flex.gap-3 > *,
  #strato-modal-content .flex.gap-4 > * {
    min-width: 100% !important;
  }

  /* ─── 4. MODAL FOOTER: stack buttons vertically ─── */
  #strato-modal-content form > div:last-child {
    flex-direction: column-reverse !important;
    gap: 8px !important;
  }
  #strato-modal-content form > div:last-child > button,
  #strato-modal-content form > div:last-child > a {
    width: 100% !important;
    justify-content: center !important;
    text-align: center;
  }

  /* ─── 5. HOVER EFFECTS: disable on touch ─── */
  .card:hover, .card-strato:hover, .kpi-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  .status-badge:hover, .status-badge-btn:hover {
    transform: none !important;
  }
  .sidebar-item:not(.active):hover .material-symbols-outlined {
    filter: none !important;
  }
  .topbar-icon-btn:hover .hgi-stroke,
  .topbar-icon-bare:hover .hgi-stroke {
    transform: none !important;
  }

  /* ─── 6. TOPBAR RIGHT: hide less important items ─── */
  .topbar-icon-btn[onclick*="toggleAccentDD"] {
    display: none;
  }
  .topbar-right {
    gap: 4px !important;
  }

  /* ─── 7. SEARCH-LIVE: ensure full width when flex child ─── */
  .search-live {
    min-width: 0 !important;
    margin-left: 0 !important;
  }

  /* ─── 8. INLINE GRID OVERRIDES (factures recap, etc.) ─── */
  div[style*="grid-template-columns: 360px"] {
    grid-template-columns: 1fr !important;
  }
  div[class*="grid-cols-3"],
  div[class*="grid-cols-4"],
  div[class*="grid-cols-5"] {
    grid-template-columns: 1fr !important;
  }
  .sm\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }

  /* ─── 9. GLOBAL NAV TABS: horizontal scroll ─── */
  .global-nav-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 4px;
  }
  .global-nav-tabs::-webkit-scrollbar { display: none; }
  .global-tab {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: 12px;
  }

  /* ─── 10. RECEIPT DROPZONE: compact ─── */
  .receipt-dropzone {
    padding: 20px 16px;
  }

  /* ─── 11. TABLES: horizontal scroll wrapper ─── */
  .table-strato {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-strato thead,
  .table-strato tbody,
  .table-strato tr {
    display: table;
    width: 100%;
    table-layout: auto;
  }
  .table-strato thead {
    display: table-header-group;
  }
  .table-strato tbody {
    display: table-row-group;
  }

  /* ─── 12. SAFE AREA: bottom padding for notched devices ─── */
  .sidebar-bottom {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
  .fab-button {
    bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  }

  /* ─── 13. TEXT OVERFLOW: prevent horizontal scroll ─── */
  .topbar-breadcrumb span {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ─── 14. FORM ROWS: stack on mobile ─── */
  .form-row,
  .form-row-2,
  .flex.gap-3:not(.items-center),
  .flex.gap-4:not(.items-center) {
    flex-wrap: wrap;
  }

  /* ─── 15. SPLIT VIEW: already hidden via template inline ─── */

  /* ─── 16. STATUS DROPDOWN: touch-friendly ─── */
  .status-dropdown-menu {
    min-width: 160px;
  }
  .status-dropdown-item {
    min-height: 40px;
    display: flex;
    align-items: center;
  }

  /* ─── 17. TRESORERIE filter actions: wrap ─── */
  .treso-filter-actions {
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* ─── 18. CONTEXT MENUS: touch-friendly ─── */
  .ctx-menu-dropdown a,
  .ctx-menu-dropdown button {
    min-height: 44px !important;
    padding: 10px 12px !important;
  }
}

@media (max-width: 480px) {
  /* ─── KPI: single column on very small screens ─── */
  .kpi-grid[style*="repeat(5"],
  .kpi-grid[style*="repeat(4"] {
    grid-template-columns: 1fr !important;
  }
  .kpi-grid {
    grid-template-columns: 1fr !important;
  }

  /* ─── KPI CARD: compact on small screens ─── */
  .kpi-card {
    height: auto !important;
    min-height: 68px !important;
    padding: 14px 16px !important;
  }
  .kpi-card-inner {
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px;
  }
  .kpi-value {
    font-size: 18px !important;
  }

  /* ─── Filter form selects: shrink text ─── */
  div[style*="display:flex"][style*="gap:0"] form select {
    padding: 6px 6px 6px 8px !important;
    font-size: 11px !important;
  }

  /* ─── Tables: force overflow scroll ─── */
  .table-strato {
    min-width: 600px;
  }
  .card-strato {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ─── Touch targets: minimum 44px ─── */
  .ctx-menu-btn,
  .topbar-nav-btn,
  .topbar-icon-btn,
  .topbar-icon-bare {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* ─── Modal: tighter padding on small screens ─── */
  .htmx-modal-panel .modal-header {
    padding: 16px 16px 12px !important;
  }
  .htmx-modal-panel .modal-body {
    padding: 16px !important;
  }
  .htmx-modal-panel .modal-footer,
  .modal-footer {
    padding: 12px 16px 16px !important;
  }
  .htmx-modal-panel .modal-header h2 {
    font-size: 16px !important;
  }

  /* ─── Content: even tighter padding ─── */
  .content {
    padding: 12px 8px !important;
  }

  /* ─── Safe area bottom for notched devices ─── */
  .fab-button {
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }

  /* ─── Notification panel: full width ─── */
  .notif-panel {
    width: calc(100vw - 16px) !important;
    right: 8px !important;
    left: 8px !important;
  }

  /* ─── Search live: smaller min-width ─── */
  .search-live {
    min-width: 0 !important;
  }
  .search-kbd {
    display: none !important;
  }

  /* ─── Buttons: ensure readable on small screens ─── */
  .btn-primary-strato,
  .btn-secondary-strato {
    font-size: 12px !important;
    padding: 8px 12px !important;
    min-height: 40px;
  }
}

/* ═══════════════════════════════════════════
   FILTER CASCADE — shared component (global)
   ═══════════════════════════════════════════ */
.fc-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  position: relative;
  z-index: 201;
}
.filter-cascade-wrapper {
  position: relative;
  display: inline-flex;
}
.btn-filter-cascade {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 100px;
  border: .5px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: var(--t1, #e8e9ed);
  font-family: var(--f);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
[data-theme="light"] .btn-filter-cascade {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.08);
}
.btn-filter-cascade:hover { border-color: var(--t3, #7a7f94); background: rgba(255,255,255,0.04); }
[data-theme="light"] .btn-filter-cascade:hover { background: rgba(0,0,0,0.03); }
.btn-filter-cascade i { font-size: 14px; }
.btn-filter-cascade .filter-chevron { transition: transform 0.2s; }
.filter-cascade-wrapper.open .btn-filter-cascade .filter-chevron { transform: rotate(180deg); }
.filter-cascade-wrapper.open .btn-filter-cascade { border-color: var(--acc, #F97316); background: var(--accbg, rgba(249,115,22,0.08)); }
.filter-count { background: var(--acc, #F97316); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 6px; min-width: 18px; text-align: center; }

/* Menu cascade — ancré SOUS le bouton (position: absolute relative au wrapper) */
.filter-cascade-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 150px;
  background: rgba(13, 15, 20, 0.65); border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-radius: 6px; padding: 4px; box-shadow: 0 8px 6px rgba(0,0,0,0.4);
  z-index: 99999; display: none; transform-origin: top left; overflow: visible;
}
[data-theme="light"] .filter-cascade-menu { background: rgba(255,255,255,0.88); border-color: rgba(0,0,0,0.08); box-shadow: 0 8px 6px rgba(0,0,0,0.12); }
.filter-cascade-wrapper.open .filter-cascade-menu { display: block; animation: cascadeOpen 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes cascadeOpen { from { opacity: 0; transform: scale(0.96) translateY(-8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.filter-cascade-wrapper.open .filter-cascade-menu > * { opacity: 0; animation: cascadeItem 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.filter-cascade-wrapper.open .filter-cascade-menu > *:nth-child(1) { animation-delay: 0.05s; }
.filter-cascade-wrapper.open .filter-cascade-menu > *:nth-child(2) { animation-delay: 0.1s; }
.filter-cascade-wrapper.open .filter-cascade-menu > *:nth-child(3) { animation-delay: 0.15s; }
.filter-cascade-wrapper.open .filter-cascade-menu > *:nth-child(4) { animation-delay: 0.2s; }
.filter-cascade-wrapper.open .filter-cascade-menu > *:nth-child(5) { animation-delay: 0.25s; }
.filter-cascade-wrapper.open .filter-cascade-menu > *:nth-child(6) { animation-delay: 0.3s; }
@keyframes cascadeItem { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.filter-cascade-wrapper.open .filter-cascade-menu > .filter-flyout:not(.open) { opacity: 0; animation: none; }
.filter-cascade-wrapper.open .filter-cascade-menu > .filter-flyout.open { opacity: 1; animation: flyoutIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); }

/* Sections & dividers */
.filter-section { padding: 4px 0; }
.filter-section-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--t3, #7a7f94); padding: 8px 12px 6px; font-family: var(--f); }
.filter-divider { height: 1px; background: var(--brd, rgba(255,255,255,0.08)); margin: 4px 8px; }

/* Options */
.filter-option { display: flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 500; font-family: var(--f); color: var(--t2, #a1a5b8); cursor: pointer; transition: all 0.15s; }
.filter-option:hover { background: rgba(255,255,255,0.06); color: var(--t1, #e8e9ed); }
[data-theme="light"] .filter-option:hover { background: rgba(0,0,0,0.04); }
.filter-option.active { color: var(--t1, #e8e9ed); font-weight: 600; }
.filter-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.filter-check { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--acc, #F97316); flex-shrink: 0; display: none; font-size: 0; overflow: hidden; }
.filter-option.active .filter-check { display: block; }
.filter-badge { margin-left: auto; font-size: 10px; font-family: var(--f); color: var(--t3, #7a7f94); }
.filter-option.active .filter-badge { display: none; }

/* Submenu triggers */
.filter-submenu-trigger { display: flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 600; font-family: var(--f); color: var(--t1, #e8e9ed); cursor: pointer; transition: all 0.15s; border-left: none; }
.filter-submenu-trigger i { font-size: 12px !important; }
.filter-submenu-trigger::before, .filter-option::before, .filter-reset::before { display: none; }
.filter-submenu-trigger:hover { background: rgba(255,255,255,0.06); }
[data-theme="light"] .filter-submenu-trigger:hover { background: rgba(0,0,0,0.04); }
.filter-submenu-trigger span { flex: 1; }
.filter-submenu-chevron { margin-left: auto; transition: transform 0.2s; opacity: 0.4; }
.filter-submenu-trigger.open .filter-submenu-chevron { transform: rotate(90deg); opacity: 0.7; }
.filter-active-dot { width: 6px; height: 6px; min-width: 6px; min-height: 6px; border-radius: 50%; background: var(--acc, #F97316); flex-shrink: 0; display: inline-block; }

/* Flyout panel */
.filter-flyout { display: none; position: absolute; left: calc(100% + 4px); top: 0; min-width: 140px; max-height: 50vh; overflow-y: auto; background: rgba(13, 15, 20, 0.65); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 4px; box-shadow: 0 8px 6px rgba(0,0,0,0.4); z-index: 100000; }
[data-theme="light"] .filter-flyout { background: rgba(255,255,255,0.88); border-color: rgba(0,0,0,0.08); box-shadow: 0 8px 6px rgba(0,0,0,0.12); }
.filter-flyout.open { display: block; animation: flyoutIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes flyoutIn { from { opacity: 0; transform: translateX(-10px) scale(0.97); } to { opacity: 1; transform: translateX(0) scale(1); } }
.filter-flyout.open > * { opacity: 0; animation: flyoutItem 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.filter-flyout.open > *:nth-child(1)  { animation-delay: 0.04s; }
.filter-flyout.open > *:nth-child(2)  { animation-delay: 0.07s; }
.filter-flyout.open > *:nth-child(3)  { animation-delay: 0.10s; }
.filter-flyout.open > *:nth-child(4)  { animation-delay: 0.13s; }
.filter-flyout.open > *:nth-child(5)  { animation-delay: 0.16s; }
.filter-flyout.open > *:nth-child(6)  { animation-delay: 0.19s; }
.filter-flyout.open > *:nth-child(7)  { animation-delay: 0.22s; }
.filter-flyout.open > *:nth-child(8)  { animation-delay: 0.25s; }
.filter-flyout.open > *:nth-child(9)  { animation-delay: 0.28s; }
.filter-flyout.open > *:nth-child(10) { animation-delay: 0.31s; }
.filter-flyout.open > *:nth-child(11) { animation-delay: 0.34s; }
.filter-flyout.open > *:nth-child(12) { animation-delay: 0.37s; }
.filter-flyout.open > *:nth-child(n+13) { animation-delay: 0.40s; }
@keyframes flyoutItem { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } }
.filter-flyout-title { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--t3, #7a7f94); padding: 4px 10px 3px; font-family: var(--f); }
.filter-flyout::-webkit-scrollbar { width: 3px; }
.filter-flyout::-webkit-scrollbar-thumb { background: var(--t3, #7a7f94); border-radius: 3px; }

/* Reset */
.filter-reset { display: flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 6px; font-size: 10px; font-weight: 500; font-family: var(--f); color: var(--t3, #7a7f94); cursor: pointer; transition: all 0.15s; }
.filter-reset:hover { background: rgba(239, 68, 68, 0.08); color: #F87171; }
.filter-reset i { font-size: 11px; }

/* Scrollbar */
.filter-cascade-menu::-webkit-scrollbar { width: 4px; }
.filter-cascade-menu::-webkit-scrollbar-thumb { background: var(--t3, #7a7f94); border-radius: 4px; }

/* Mobile */
@media (max-width: 768px) {
  .filter-cascade-menu { position: fixed; top: auto; bottom: 0; left: 0; right: 0; max-height: 60vh; border-radius: 5px 16px 0 0; min-width: 100%; animation-name: cascadeOpenMobile; }
  @keyframes cascadeOpenMobile { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
  .btn-filter-cascade { font-size: 12px; padding: 8px 14px; }
  .filter-flyout { position: static; left: auto; min-width: 100%; border: none; box-shadow: none; border-top: 1px solid var(--brd, rgba(255,255,255,0.08)); border-radius: 0; margin-top: 4px; padding: 4px 0; }
}

/* Search pill */
/* ── Sort button (ABC) — same glass style as filter ── */
.pd-sort-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 16px !important;
  border-radius: 100px !important;
  border: .5px solid rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.06) !important;
  color: var(--t1) !important;
  font-family: var(--f) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: all 0.2s;
  height: auto !important;
}
.pd-sort-btn:hover { border-color: var(--t3) !important; background: rgba(255,255,255,0.10) !important; }
[data-theme="light"] .pd-sort-btn { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .pd-sort-btn:hover { background: rgba(0,0,0,0.07) !important; }

.search-pill {
  position: relative; display: flex; align-items: center; flex: 1; min-width: 180px; max-width: 340px;
}
.search-pill > i { position: absolute; left: 14px; font-size: 15px; color: var(--t3); pointer-events: none; }
.search-pill-input {
  width: 100%; padding: 6px 55px 6px 38px; border-radius: 100px !important;
  border: .5px solid rgba(255,255,255,0.10) !important; background: rgba(255,255,255,0.06) !important; color: var(--t1) !important;
  font-family: var(--f); font-size: 12.5px !important; font-weight: 500; outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
  height: auto !important;
}
[data-theme="light"] .search-pill-input {
  background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.08) !important;
}
.search-pill-input::placeholder { color: var(--t3); }
.search-pill-input:focus { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(var(--acc-rgb), 0.12); }
.search-pill-kbd { position: absolute; right: 12px; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--brd); color: var(--t3); font-size: 10px; font-family: var(--f); pointer-events: none; background: transparent; }
@media (max-width: 768px) {
  .search-pill { max-width: 100%; min-width: 0; }
  .search-pill-kbd { display: none; }
  /* Match .btn-filter-cascade size — higher specificity to override 44px touch rule */
  .fc-toolbar .pd-sort-btn,
  body .pd-sort-btn {
    padding: 5px 12px !important; font-size: 11.5px !important; gap: 5px !important;
    min-height: 0 !important; height: auto !important;
  }
  .fc-toolbar .pd-sort-btn i { font-size: 12px !important; }
  .fc-toolbar .search-pill-input,
  body .search-pill-input {
    padding: 5px 12px 5px 30px !important; font-size: 11.5px !important;
    min-height: 0 !important; height: auto !important;
  }
  .fc-toolbar .search-pill > i { left: 10px; font-size: 13px !important; }
  body .fl-mobile-back {
    padding: 5px 12px !important; font-size: 11.5px !important;
    min-height: 0 !important; height: auto !important;
  }
}

/* ============================================================
   TEMPLATE PICKER — Invoice / Devis creation form
   ============================================================ */
.tpl-section {
  border: 1px solid var(--brd);
  border-radius: var(--r-lg);
  margin-top: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  background: var(--card);
}
.tpl-section-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; cursor: pointer;
  font-family: var(--fd); font-size: 14px; font-weight: 600;
  color: var(--t1); transition: background 0.2s;
}
.tpl-section-header:hover { background: rgba(255,255,255,0.03); }
.tpl-section-badge {
  margin-left: auto; font-size: 11px; color: var(--acc);
  font-weight: 600; font-family: var(--f);
}
.tpl-chevron { transition: transform 0.25s; color: var(--t3); margin-left: 6px; }
.tpl-chevron.open { transform: rotate(180deg); }
.tpl-section-body {
  padding: 20px; border-top: 1px solid var(--brd);
}

/* Tabs */
.tpl-tabs {
  display: flex; gap: 4px; padding: 4px; border-radius: 6px;
  background: var(--inp); margin-bottom: 16px; width: fit-content;
}
.tpl-tab {
  padding: 8px 16px; border-radius: 5px; border: none;
  background: transparent; color: var(--t2);
  font-family: var(--f); font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all 0.2s;
}
.tpl-tab.active {
  background: var(--card2); color: var(--t1); box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Template grid */
.tpl-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin-bottom: 16px;
}
.tpl-card {
  position: relative; border: 2px solid var(--brd); border-radius: 6px;
  padding: 8px; cursor: pointer; text-align: center;
  font-size: 11px; font-weight: 600; font-family: var(--f);
  color: var(--t2); transition: all 0.2s;
}
.tpl-card:hover { border-color: var(--t3); }
.tpl-card.active { border-color: var(--acc); background: var(--accbg); color: var(--t1); }

/* Mini preview thumbnails */
.tpl-preview-mini {
  width: 100%; height: 80px; border-radius: 6px;
  background: #fff; margin-bottom: 6px; padding: 6px;
  display: flex; flex-direction: column; gap: 4px; overflow: hidden;
}
.tpl-mini-header {
  display: flex; align-items: center; gap: 4px;
  padding-bottom: 3px; border-bottom: 1px solid #e5e7eb;
}
.tpl-mini-logo {
  width: 12px; height: 12px; border-radius: 2px; background: #3B5998; flex-shrink: 0;
}
.tpl-mini-title {
  height: 4px; flex: 1; background: #d1d5db; border-radius: 2px;
}
.tpl-mini-table { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.tpl-mini-row {
  height: 3px; background: #e5e7eb; border-radius: 1px;
}
.tpl-mini-total {
  height: 5px; width: 40%; margin-left: auto; background: #3B5998;
  border-radius: 2px;
}

/* Customization row */
.tpl-customize {
  display: flex; gap: 16px; flex-wrap: wrap; padding: 12px 0;
}
.tpl-cust-row { display: flex; flex-direction: column; gap: 4px; }
.tpl-cust-row label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--t3); font-weight: 600; font-family: var(--f);
}
.tpl-cust-row input[type="color"] {
  width: 36px; height: 28px; border: 1px solid var(--brd);
  border-radius: 6px; cursor: pointer; padding: 2px; background: var(--inp);
}
.tpl-cust-row select {
  padding: 6px 10px; border: 1px solid var(--brd); border-radius: 5px;
  font-family: var(--f); font-size: 12px; background: var(--inp);
  color: var(--t1); cursor: pointer;
}

/* Import zone */
.tpl-import-zone {
  border: 2px dashed var(--brd); border-radius: var(--r-lg);
  padding: 6px 20px; text-align: center; transition: all 0.25s;
}
.tpl-import-zone.drag-over {
  border-color: var(--acc); background: var(--accbg);
}
.tpl-import-zone p { margin: 6px 0; font-size: 13px; color: var(--t2); font-family: var(--f); }
.tpl-import-hint { font-size: 11px !important; color: var(--t3) !important; }
.tpl-btn-browse {
  margin-top: 10px; padding: 8px 18px; border-radius: 5px;
  border: 1px solid var(--brd); background: var(--inp);
  color: var(--t1); font-family: var(--f); font-size: 12px;
  font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.tpl-btn-browse:hover { border-color: var(--acc); color: var(--acc); }
.tpl-btn-use {
  padding: 8px 18px; border-radius: 5px; border: none;
  background: var(--acc); color: #fff; font-family: var(--f);
  font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.tpl-btn-use:hover { filter: brightness(1.1); }

/* Import status */
.tpl-import-status-box { text-align: center; padding: 6px 20px; }
.tpl-import-success {
  display: flex; align-items: center; gap: 8px;
  justify-content: center; margin-bottom: 12px;
  font-family: var(--f); font-size: 13px; color: var(--t1); font-weight: 600;
}
.tpl-import-extracted {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-bottom: 16px;
}
.tpl-import-extracted .tpl-extr-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 6px; font-size: 11px;
  font-family: var(--f); background: var(--inp); color: var(--t2);
  border: 1px solid var(--brd);
}
.tpl-import-extracted .tpl-extr-swatch {
  width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.1);
}
.tpl-import-actions {
  display: flex; gap: 10px; justify-content: center;
}

/* Spinner */
.tpl-spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--brd); border-top-color: var(--acc);
  border-radius: 50%; margin: 0 auto 12px;
  animation: tplSpin 0.8s linear infinite;
}
@keyframes tplSpin { to { transform: rotate(360deg); } }

/* Live preview */
.tpl-live-preview {
  margin-top: 16px; border-top: 1px solid var(--brd); padding-top: 16px;
}
.tpl-preview-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--t3); font-weight: 600; margin-bottom: 8px; font-family: var(--f);
}
.tpl-live-frame {
  background: #fff; border-radius: 5px; padding: 0;
  overflow: hidden; width: 100%;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08); border: 1px solid #e5e7eb;
  position: relative;
}

/* Mini invoice preview */
.tpl-pv {
  padding: 6px; font-family: var(--f); /* Space Mono — Orbit DS */
  font-size: 10px; color: #1a1a2e; line-height: 1.4;
}
.tpl-pv-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid #3B5998;
}
.tpl-pv-company-name {
  font-size: 16px; font-weight: 800; color: #3B5998;
  letter-spacing: 0.5px;
}
.tpl-pv-company-addr { font-size: 9px; color: #f6f6f6; margin-top: 2px; }
.tpl-pv-doc { text-align: right; }
.tpl-pv-doc-type { font-size: 11px; font-weight: 700; color: #3B5998; text-transform: uppercase; letter-spacing: 1px; }
.tpl-pv-doc-num { font-size: 10px; font-weight: 600; color: #1a1a2e; }
.tpl-pv-doc-date { font-size: 9px; color: #f6f6f6; }
.tpl-pv-client { margin-bottom: 16px; }
.tpl-pv-client-label { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #f6f6f6; margin-bottom: 2px; }
.tpl-pv-client-name { font-size: 11px; font-weight: 700; color: #1a1a2e; }
.tpl-pv-client-addr { font-size: 9px; color: #f6f6f6; }
.tpl-pv-table {
  width: 100%; border-collapse: collapse; margin-bottom: 16px;
}
.tpl-pv-table thead tr {
  background: #3B5998; color: #fff;
}
.tpl-pv-table th {
  padding: 6px 8px; font-size: 8px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px; text-align: left;
}
.tpl-pv-table td {
  padding: 5px 8px; font-size: 9px; border-bottom: 1px solid #e5e7eb;
  color: #1a1a2e;
}
.tpl-pv-table tbody tr:nth-child(even) { background: #f8f9fa; }
.tpl-pv-totals { display: flex; flex-direction: column; align-items: flex-end; }
.tpl-pv-total-row {
  display: flex; gap: 6px; padding: 3px 0; font-size: 9px;
}
.tpl-pv-total-row span:first-child { color: #f6f6f6; }
.tpl-pv-total-row span:last-child { font-weight: 600; min-width: 80px; text-align: right; }
.tpl-pv-total-ttc {
  border-top: 2px solid #3B5998; margin-top: 4px; padding-top: 6px;
  font-size: 11px !important;
}
.tpl-pv-total-ttc span:last-child { font-weight: 800; color: #3B5998; }

/* Preview footer */
.tpl-pv-footer { margin-top: 14px; }
.tpl-pv-footer-text {
  font-size: 7px; color: #f6f6f6; line-height: 1.4;
  padding: 4px 0; border-top: 1px solid #e5e7eb;
}
.tpl-pv-footer-bar {
  background: #3B5998; color: #fff; padding: 3px 6px;
  font-size: 6px; text-align: center; line-height: 1.3;
  border-radius: 0 0 4px 4px;
}

/* Responsive */
@media (max-width: 768px) {
  .tpl-grid { grid-template-columns: repeat(2, 1fr); }
  .tpl-customize { flex-direction: column; }
  .tpl-pv { padding: 16px; }
}

/* ============================================================
   BADGE RETARD — Factures en retard
   ============================================================ */
.badge-retard {
  background: rgba(248, 113, 113, 0.10);
  color: #F87171;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--f);
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
[data-theme="light"] .badge-retard {
  background: rgba(239, 68, 68, 0.08);
  color: #DC2626;
}

/* ============================================================
   CARD TRESORERIE — Dashboard
   ============================================================ */
.card-tresorerie {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 28px;
  padding: 20px;
  backdrop-filter: blur(0.5px) saturate(180%);
  -webkit-backdrop-filter: blur(0.5px) saturate(180%);
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  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 ease, border-color 0.7s ease;
  animation: cascadeZoom 0.5s ease both;
  animation-delay: 0.4s;
}
[data-theme="light"] .card-tresorerie {
  border: 1px solid rgba(70,60,120,0.12);
  box-shadow: 0 8px 32px rgba(70,60,120,0.10);
}
.card-treso-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.card-treso-icon {
  width: 42px; height: 42px; border-radius: 5px;
  background: var(--accbg);
  display: grid; place-items: center; flex-shrink: 0;
}
.card-treso-icon .material-symbols-outlined {
  font-size: 22px; color: var(--acc);
}
.card-treso-title {
  font-family: var(--fd); font-size: 15px; font-weight: 600; color: var(--t1);
}
.card-treso-subtitle {
  font-size: 11px; color: var(--t3); margin-top: 1px;
}
.card-treso-solde {
  font-family: var(--f);
  font-size: 36px; font-weight: 700; color: var(--t1);
  margin-bottom: 20px; line-height: 1;
}
.card-treso-solde .decimals {
  font-size: 18px; color: var(--t3); font-weight: 600;
}
.card-treso-cols {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.card-treso-col-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--t3); font-weight: 600; font-family: var(--f); margin-bottom: 4px;
}
.card-treso-col-value {
  font-family: var(--f);
  font-size: 16px; font-weight: 700;
}
.card-treso-col-value.encaisse { color: var(--ok); }
.card-treso-col-value.decaisse { color: var(--err); }
.card-treso-col-value.attente { color: var(--acc); }
.card-treso-variation {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; font-family: var(--f);
  padding: 3px 10px; border-radius: 6px; margin-top: 16px;
}
.card-treso-variation.up {
  background: rgba(34, 197, 94, 0.10); color: var(--ok);
}
.card-treso-variation.down {
  background: rgba(248, 113, 113, 0.10); color: var(--err);
}
@media (max-width: 768px) {
  .card-treso-cols { grid-template-columns: 1fr; gap: 12px; }
  .card-treso-solde { font-size: 6px; }
}

/* ============================================================
   DOSSIERS PROJETS — Factures navigation
   ============================================================ */
#folder-view {
  padding: 12px; display: flex; flex-direction: column; gap: 8px;
}
.projet-folder {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 0;
  border: none; border-bottom: 1px solid var(--brd);
  background: transparent;
  cursor: pointer; transition: all 0.2s ease;
  margin: 0;
}
.projet-folder:hover {
  background: rgba(255,255,255,0.03);
}
[data-theme="light"] .projet-folder:hover { background: rgba(0,0,0,0.03); }
.projet-folder.active {
  background: var(--accbg);
}
.folder-icon {
  width: 35px; height: 35px; border-radius: 0;
  background: transparent;
  display: grid; place-items: center; flex-shrink: 0;
}
.folder-icon .material-symbols-outlined {
  font-size: 6px; color: var(--acc);
}
.folder-icon-img {
  width: 35px; height: 35px; object-fit: contain; flex-shrink: 0;
}
[data-theme="light"] .folder-icon-img {
  filter: invert(0.6) brightness(1.2);
}
.folder-body { flex: 1; min-width: 0; }
.folder-name {
  font-family: var(--fd); font-size: 13px; font-weight: 600;
  color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.folder-client {
  font-size: 11px; color: var(--t2); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.folder-meta { text-align: right; flex-shrink: 0; }
.folder-count {
  font-family: var(--f); font-size: 11px; font-weight: 700;
  background: var(--accbg); color: var(--acc);
  padding: 2px 8px; border-radius: 6px;
}
.folder-total {
  font-family: var(--f); font-size: 11px;
  color: var(--t2); display: block; margin-top: 4px;
}
.folder-back {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin-bottom: 10px;
  cursor: pointer; color: var(--acc);
  font-family: var(--fd); font-size: 13px; font-weight: 600;
  border-bottom: 1px solid var(--brd); transition: opacity 0.2s;
}
.folder-back:hover { opacity: 0.7; }
.folder-tabs { display:flex; gap:0; border-bottom:1px solid var(--brd); padding:0 12px; }
.folder-tab {
  font-family:var(--f); font-size:12px; font-weight:600; padding:8px 14px;
  border:none; background:none; color:var(--t3); cursor:pointer;
  border-bottom:2px solid transparent; display:flex; align-items:center; gap:5px; transition:all 0.15s;
}
.folder-tab.active { color:var(--acc); border-bottom-color:var(--acc); }
.folder-tab:hover:not(.active) { color:var(--t2); }
.folder-list-enter { animation: slideRight 0.3s ease both; }
@keyframes slideRight {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   DOSSIER RECAP — Right panel when folder selected
   ============================================================ */
.dossier-recap {
  padding: 6px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 28px;
  animation: fadeUp 0.35s ease both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.recap-header {
  display: flex;
  align-items: center;
  gap: 16px;
}
.recap-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--accbg);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.recap-icon .material-symbols-outlined {
  font-size: 6px;
  color: var(--acc);
}
.recap-projet-name {
  font-family: var(--fd);
  font-size: 20px;
  font-weight: 700;
  color: var(--t1);
  margin: 0;
  line-height: 1.2;
}
.recap-client {
  font-family: var(--f);
  font-size: 13px;
  color: var(--t3);
  margin: 2px 0 0;
}
.recap-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 0;
  border-top: 1px solid var(--brd);
  border-bottom: 1px solid var(--brd);
}
.recap-stat-line {
  display: flex;
  align-items: center;
  gap: 10px;
}
.recap-stat-count {
  font-family: var(--f);
  font-size: 22px;
  font-weight: 700;
  color: var(--t1);
}
.recap-stat-label {
  font-family: var(--f);
  font-size: 14px;
  color: var(--t3);
}
.recap-stat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot-payee { background: var(--ok); }
.dot-envoyee { background: var(--info); }
.dot-brouillon { background: #A78BFA; }
.dot-retard { background: var(--err); }
.dot-relancee { background: var(--warn); }
.recap-stat-detail {
  font-family: var(--f);
  font-size: 13px;
  color: var(--t2);
}
.recap-progress-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.recap-amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.recap-amt-label {
  font-family: var(--f);
  font-size: 11px;
  color: var(--t4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.recap-amt-val {
  font-family: var(--f);
  font-size: 17px;
  font-weight: 700;
  color: var(--t1);
}
.recap-amt-val.green { color: var(--ok); }
.recap-amt-val.orange { color: var(--acc); }
.recap-progress {
  margin-top: 4px;
}
.recap-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.recap-progress-label {
  font-family: var(--f);
  font-size: 13px;
  font-weight: 600;
  color: var(--t3);
}
.recap-progress-pct {
  font-family: var(--f);
  font-size: 13px;
  font-weight: 700;
  color: var(--acc);
  background: var(--accbg);
  padding: 2px 8px;
  border-radius: 5px;
}
.recap-progress-track {
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
  position: relative;
}
[data-theme="light"] .recap-progress-track { background: rgba(0,0,0,0.08); }
.recap-progress-fill {
  height: 100%;
  border-radius: 5px;
  background: var(--acc);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  position: absolute; top: 0; left: 0;
  z-index: 1;
}
.recap-progress-stripes {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  border-radius: 5px;
  background: repeating-linear-gradient(-45deg, transparent, transparent 2.5px, rgba(255,255,255,0.15) 2.5px, rgba(255,255,255,0.15) 5px);
  pointer-events: none; z-index: 2;
}
[data-theme="light"] .recap-progress-stripes { background: repeating-linear-gradient(-45deg, transparent, transparent 2.5px, rgba(255,255,255,0.3) 2.5px, rgba(255,255,255,0.3) 5px); }
.recap-progress-fill::after { display: none;
  border-radius: 5px 5px 0 0;
}
@media (max-width: 768px) {
  .dossier-recap { padding: 20px; gap: 20px; }
  .recap-amounts { grid-template-columns: 1fr; gap: 10px; }
  .recap-stat-count { font-size: 18px; }
}

/* ============================================================
   TEMPLATE PICKER — Subsections & extended fields
   ============================================================ */
.tpl-subsection {
  border-top: 1px solid var(--brd); padding-top: 12px; margin-top: 12px;
}
.tpl-subsection-title {
  font-family: var(--fd); font-size: 13px; font-weight: 700;
  color: var(--t1); cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px; user-select: none;
}
.tpl-subsection-title:hover { color: var(--acc); }
.tpl-sub-chev { transition: transform 0.2s; color: var(--t3); }
.tpl-subsection-body { padding-bottom: 4px; }

/* Color grid */
.tpl-color-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
@media (max-width: 640px) { .tpl-color-grid { grid-template-columns: repeat(2, 1fr); } }

.tpl-hex-input {
  width: 68px; padding: 4px 6px; border-radius: 6px;
  border: 1px solid var(--brd); font-size: 11px;
  font-family: var(--f); background: var(--inp); color: var(--t1);
}
.tpl-num-input {
  width: 72px; padding: 6px 10px; border-radius: 5px;
  border: 1px solid var(--brd); font-size: 12px;
  font-family: var(--f); background: var(--inp); color: var(--t1);
}
.tpl-text-input {
  width: 100%; padding: 8px 12px; border-radius: 5px;
  border: 1px solid var(--brd); font-size: 12px;
  font-family: var(--f); background: var(--inp); color: var(--t1);
}
.tpl-textarea {
  width: 100%; padding: 8px 12px; border-radius: 5px;
  border: 1px solid var(--brd); font-size: 12px;
  font-family: var(--f); background: var(--inp); color: var(--t1);
  resize: vertical;
}
.tpl-file-input {
  font-size: 11px; font-family: var(--f); color: var(--t2);
}
.tpl-field-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--t3); font-weight: 600; font-family: var(--f);
  display: block; margin-bottom: 4px;
}
.tpl-field-hint {
  font-size: 11px; color: var(--t3); font-family: var(--f);
}
.tpl-radio-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-family: var(--f); color: var(--t1); cursor: pointer;
}
.tpl-checkbox-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px;
}
.tpl-check-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-family: var(--f); color: var(--t1); cursor: pointer;
}

/* ============================================================
   BREADCRUMB PILL
   ============================================================ */
.bc-pill { display:inline-flex; align-items:center; gap:4px; padding:5px 14px; border-radius:6px; border:1px solid var(--brd); background:var(--card); font-family:var(--f); font-size:13px; margin-bottom:16px; }
.bc-link { color:var(--t3); text-decoration:none; font-weight:500; padding:2px 6px; border-radius:6px; transition:all 0.15s; }
.bc-link:hover { color:var(--t1); background:rgba(255,255,255,0.04); }
[data-theme="light"] .bc-link:hover { background:rgba(0,0,0,0.04); }
.bc-sep { color:var(--t4); font-size:11px; user-select:none; }
.bc-current { color:var(--t1); font-weight:600; padding:2px 6px; }
@media(max-width:640px){.bc-pill{font-size:12px;padding:6px 10px;}}

/* ============================================================
   THEME SWITCH — Day/Night toggle with sliding knob
   ============================================================ */
/* ── Theme Toggle Pill — neumorphic 3-way ── */
.theme-toggle-pill {
  display:inline-flex; align-items:center; gap:4px;
  padding:5px 7px; border-radius:50px; flex-shrink:0;
  background:#1a1a2e;
  box-shadow: 6px 6px 12px rgba(0,0,0,0.6), -4px -4px 8px rgba(255,255,255,0.04), inset 0 1px 1px rgba(255,255,255,0.05);
}
[data-theme="light"] .theme-toggle-pill {
  background:#E8E0D4;
  box-shadow: 4px 4px 10px rgba(166,152,132,0.3), -3px -3px 6px rgba(255,255,255,0.8), inset 0 1px 1px rgba(255,255,255,0.5);
}
.theme-toggle-btn {
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%; border:none;
  background:transparent; color:var(--t2);
  cursor:pointer; transition:all 0.25s ease; padding:0;
}
.theme-toggle-btn .material-symbols-outlined { font-size:16px; }
[data-theme="light"] .theme-toggle-btn { color:rgba(61,52,39,0.35); }
.theme-toggle-btn:not(.active):hover { color:rgba(255,255,255,0.7); }
[data-theme="light"] .theme-toggle-btn:not(.active):hover { color:rgba(61,52,39,0.7); }
/* Active — pressed circle */
.theme-toggle-btn.active {
  width:36px; height:36px; color:rgba(255,255,255,0.85); background:#141420;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.06),
    inset 4px 4px 8px rgba(0,0,0,0.7), inset -3px -3px 6px rgba(255,255,255,0.03),
    2px 2px 4px rgba(0,0,0,0.4);
}
[data-theme="light"] .theme-toggle-btn.active {
  color:#3D3427; background:#F5F0EA;
  box-shadow: 0 0 0 1.5px rgba(196,169,125,0.3),
    inset 3px 3px 6px rgba(166,152,132,0.25), inset -2px -2px 4px rgba(255,255,255,0.7),
    2px 2px 4px rgba(166,152,132,0.15);
}

/* Compact toggle variant */
.theme-toggle-sm {
  padding:3px 4px; gap:2px;
}
.theme-toggle-sm .theme-toggle-btn {
  width:26px; height:26px;
}
.theme-toggle-sm .theme-toggle-btn .material-symbols-outlined { font-size:14px; }
.theme-toggle-sm .theme-toggle-btn.active {
  width:28px; height:28px;
}

/* ── Theme Switch (glass icon buttons) ── */
.theme-switch {
  display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0;
}
.theme-switch-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 0.4;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.theme-switch-btn:hover {
  opacity: 0.7;
}
.theme-switch-btn.active {
  opacity: 1;
  background: transparent !important;
}
/* Soleil actif → teinte jaune-orange */
.theme-switch-btn[data-theme-value="light"].active .icon-glass {
  filter: brightness(1.2) sepia(1) saturate(3) hue-rotate(-10deg);
}
/* Lune active → teinte violette */
.theme-switch-btn[data-theme-value="dark"].active .icon-glass {
  filter: brightness(1.3) sepia(1) saturate(2.5) hue-rotate(220deg);
}

/* ── Theme Popover ── */
.theme-popover {
  position:fixed; top:auto; right:auto;
  padding:16px; border-radius:28px; z-index:99999; min-width:240px; max-width:280px;
  animation: hdDropIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
[data-theme="dark"] .theme-popover {
  background: rgba(10, 10, 20, 0.04);
  backdrop-filter: blur(5px) saturate(180%);
  -webkit-backdrop-filter: blur(5px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
[data-theme="light"] .theme-popover {
  background: rgba(245, 243, 240, 0.05);
  backdrop-filter: blur(5px) saturate(180%);
  -webkit-backdrop-filter: blur(5px) saturate(180%);
  border: 1px solid rgba(70,60,120,0.12);
  box-shadow: 0 8px 32px rgba(70,60,120,0.12);
}

/* Cascade d'apparition des enfants à l'ouverture du popover */
@keyframes popoverChildIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.theme-popover[style*="display: block"] .theme-popover-section,
.theme-popover[style*="display:block"] .theme-popover-section {
  opacity: 0;
  animation: popoverChildIn 0.45s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.theme-popover[style*="display: block"] .theme-popover-section:nth-child(1),
.theme-popover[style*="display:block"] .theme-popover-section:nth-child(1) {
  animation-delay: 120ms;
}
.theme-popover[style*="display: block"] .theme-popover-section:nth-child(2),
.theme-popover[style*="display:block"] .theme-popover-section:nth-child(2) {
  animation-delay: 260ms;
}
.theme-popover[style*="display: block"] #popoverAccentColors button {
  opacity: 0;
  animation: popoverChildIn 0.4s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.theme-popover[style*="display: block"] #popoverAccentColors button:nth-child(1) { animation-delay: 220ms; }
.theme-popover[style*="display: block"] #popoverAccentColors button:nth-child(2) { animation-delay: 270ms; }
.theme-popover[style*="display: block"] #popoverAccentColors button:nth-child(3) { animation-delay: 320ms; }
.theme-popover[style*="display: block"] #popoverAccentColors button:nth-child(4) { animation-delay: 370ms; }
.theme-popover[style*="display: block"] #popoverAccentColors button:nth-child(5) { animation-delay: 420ms; }
.theme-popover[style*="display: block"] #popoverAccentColors button:nth-child(6) { animation-delay: 470ms; }
.theme-popover[style*="display: block"] #popoverAccentColors button:nth-child(7) { animation-delay: 520ms; }
.theme-popover[style*="display: block"] #popoverAccentColors button:nth-child(8) { animation-delay: 570ms; }
.theme-popover[style*="display: block"] .wallpaper-grid .wp-thumb {
  opacity: 0;
  animation: popoverChildIn 0.4s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.theme-popover[style*="display: block"] .wallpaper-grid .wp-thumb:nth-child(1) { animation-delay: 360ms; }
.theme-popover[style*="display: block"] .wallpaper-grid .wp-thumb:nth-child(2) { animation-delay: 420ms; }
.theme-popover[style*="display: block"] .wallpaper-grid .wp-thumb:nth-child(3) { animation-delay: 480ms; }
.theme-popover[style*="display: block"] .wallpaper-grid .wp-thumb:nth-child(4) { animation-delay: 540ms; }
.theme-popover[style*="display: block"] .wallpaper-grid .wp-thumb:nth-child(5) { animation-delay: 600ms; }
.theme-popover[style*="display: block"] .wallpaper-grid .wp-thumb:nth-child(6) { animation-delay: 660ms; }
.theme-popover[style*="display: block"] .wallpaper-grid .wp-thumb:nth-child(7) { animation-delay: 720ms; }
.theme-popover[style*="display: block"] .wallpaper-grid .wp-thumb:nth-child(8) { animation-delay: 780ms; }
.theme-popover[style*="display: block"] .wallpaper-grid .wp-thumb:nth-child(9) { animation-delay: 840ms; }
.theme-popover[style*="display: block"] .wallpaper-grid .wp-thumb:nth-child(10) { animation-delay: 900ms; }
.theme-popover[style*="display: block"] .wp-upload-section {
  opacity: 0;
  animation: popoverChildIn 0.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation-delay: 980ms;
}
.theme-popover-section { margin-bottom:10px; }
.theme-popover-section:last-child { margin-bottom:0; }
.theme-popover-label {
  display:block; font-family:var(--fd); font-size:9px; text-transform:uppercase;
  letter-spacing:1px; margin-bottom:6px; opacity:0.5; font-weight:600;
}
.theme-bg-btn {
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:4px; border:none; cursor:pointer; transition:all 0.2s;
}
[data-theme="dark"] .theme-bg-btn { background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.6); }
[data-theme="dark"] .theme-bg-btn:hover { background:rgba(255,255,255,0.12); color:#fff; }
[data-theme="light"] .theme-bg-btn { background:rgba(0,0,0,0.04); color:rgba(61,52,39,0.6); }
[data-theme="light"] .theme-bg-btn:hover { background:rgba(0,0,0,0.08); color:var(--t1); }

/* ── Wallpaper Grid (in popover) ── */
.wallpaper-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 8px;
}
.wp-thumb {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  background: none;
  transition: border-color 0.2s, transform 0.15s;
}
.wp-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.wp-thumb:hover {
  transform: none;
  border-color: rgba(255,255,255,0.2);
}
[data-theme="light"] .wp-thumb:hover {
  border-color: rgba(0,0,0,0.15);
}
.wp-thumb.active {
  border-color: var(--acc);
  box-shadow: 0 0 0 1px var(--acc);
}
.wp-check {
  display: none;
  position: absolute;
  top: 3px; right: 3px;
  width: 16px; height: 16px;
  background: var(--acc);
  color: #000;
  border-radius: 50%;
  font-size: 9px;
  line-height: 16px;
  text-align: center;
}
.wp-thumb.active .wp-check { display: flex; align-items: center; justify-content: center; }
.wp-none {
  background: rgba(255,255,255,0.04);
  display: grid;
  place-items: center;
}
[data-theme="light"] .wp-none {
  background: rgba(0,0,0,0.04);
}
.wp-none-icon {
  font-size: 16px;
  color: var(--t2);
}
.wp-upload-section { margin-top: 10px; }
.wp-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 5px;
  color: #f6f6f6;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.2s;
  font-family: var(--f);
}
[data-theme="light"] .wp-upload-btn {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.12);
  color: #7a6f60;
}
.wp-upload-btn:hover {
  border-color: var(--acc);
  color: var(--t1);
}

/* Legacy switch — hide if still in DOM */
.switch-mode { display:none !important; }

/* ============================================================
   SCHEDULE DATE PICKER — Range picker with presets
   ============================================================ */
.sd-overlay { position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.3); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.sd-top { padding:16px 20px 0; display:flex; gap:12px; align-items:flex-end; }
.sd-input { width:100%; padding:8px 14px; border-radius:4px; border:1.5px solid var(--brd); background:var(--inp); font-family:var(--f); font-size:14px; font-weight:600; color:var(--t1); outline:none !important; transition:border-color 0.2s; box-shadow:none; }
.sd-input:focus { border-color:var(--acc); box-shadow:0 0 0 3px rgba(var(--acc-rgb),0.15); outline:none !important; }
.sd-input::placeholder { color:var(--t4); font-weight:400; }
.sd-cal-select { position:relative; }
.sd-cal-trigger { display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:4px; border:1px solid var(--brd); background:var(--inp); cursor:pointer; font-family:var(--f); font-size:13px; font-weight:500; color:var(--t1); transition:border-color 0.2s; }
.sd-cal-trigger:hover { border-color:var(--t3); }
.sd-cal-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.sd-cal-dd { position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--card); border:1px solid var(--brd); border-radius:4px; padding:4px; z-index:100; display:none; box-shadow:0 8px 6px rgba(0,0,0,0.2); }
.sd-cal-dd.open { display:block; }
.sd-cal-opt { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:3px; cursor:pointer; font-size:13px; color:var(--t2); transition:all 0.12s; }
.sd-cal-opt:hover { background:rgba(255,255,255,0.04); color:var(--t1); }
[data-theme="light"] .sd-cal-opt:hover { background:rgba(0,0,0,0.04); }
.sd-cal-opt.active { color:var(--t1); font-weight:600; }
.schedule-date { display:flex; flex-direction:column; border-radius:5px; border:1px solid var(--brd); background:var(--card); overflow:hidden; max-width:780px; width:95vw; box-shadow:0 12px 48px rgba(0,0,0,0.25); animation:tutoSlideUp 0.3s cubic-bezier(0.16,1,0.3,1); }
.sd-inner { display:flex; min-height:360px; }
.sd-side { width:170px; flex-shrink:0; border-right:1px solid var(--brd); background:var(--bg2); padding:10px 0; display:flex; flex-direction:column; gap:1px; }
.sd-sep { height:1px; background:var(--brd); margin:4px 12px; }
.sd-preset { display:flex; align-items:center; margin:0 6px; padding:6px 10px; border-radius:3px; font-size:12px; font-family:var(--f); color:var(--t3); cursor:pointer; border:none; background:none; transition:all 0.15s; text-align:left; }
.sd-preset:hover { background:rgba(255,255,255,0.04); color:var(--t1); }
[data-theme="light"] .sd-preset:hover { background:rgba(0,0,0,0.04); }
.sd-preset.active { background:rgba(255,255,255,0.06); color:var(--t1); font-weight:600; }
.sd-main { flex:1; padding:16px 20px; display:flex; flex-direction:column; gap:16px; }
.sd-inputs { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sd-inp-label { font-size:11px; color:var(--t4); margin-bottom:3px; text-transform:uppercase; letter-spacing:0.5px; }
.sd-inp { padding:7px 12px; border-radius:4px; border:1px solid var(--brd); background:var(--inp); font-size:13px; font-family:var(--f); font-weight:600; color:var(--t1); }
.sd-cals { display:flex; gap:24px; flex:1; align-items:flex-start; }
.sd-cal { flex:1; min-width:200px; }
.sd-cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.sd-cal-title { font-size:13px; font-weight:600; color:var(--t1); font-family:var(--fd); }
.sd-nav { width:28px; height:28px; display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:3px; color:var(--t3); border:none; background:none; transition:color 0.15s; }
.sd-nav:hover { color:var(--t1); }
.sd-grid { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; gap:1px 0; }
.sd-dow { font-size:10px; color:var(--t4); padding:3px 0 6px; font-family:var(--fm); }
.sd-day { height:30px; display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; font-size:12px; color:var(--t2); transition:color 0.1s; border-radius:0; }
.sd-day:hover { color:var(--t1); }
.sd-day.empty { cursor:default; }
.sd-day.in-range { background:rgba(var(--acc-rgb),0.06); }
.sd-day.range-start { border-radius:3px 0 0 8px; background:rgba(var(--acc-rgb),0.06); }
.sd-day.range-end { border-radius:0 8px 8px 0; background:rgba(var(--acc-rgb),0.06); }
.sd-day.range-start.range-end { border-radius:3px; }
.sd-sel { position:absolute; inset:0; margin:auto; width:30px; height:30px; border-radius:3px; background:var(--t1); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:2; }
.sd-sel span { font-size:11px; font-weight:600; color:var(--card); }
.sd-dot { width:8px; height:1.5px; border-radius:1px; background:var(--acc); margin-top:1px; }
.sd-divider { width:1px; align-self:center; height:120px; background:var(--brd); flex-shrink:0; }
.sd-time-section { border-top:1px solid var(--brd); padding:12px 20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.sd-toggle { display:flex; align-items:center; gap:8px; cursor:pointer; }
.sd-toggle-label { font-size:12px; font-weight:600; color:var(--t1); }
.sd-switch { width:36px; height:20px; border-radius:4px; background:var(--brd); position:relative; transition:background 0.25s; cursor:pointer; flex-shrink:0; }
.sd-switch.on { background:var(--acc); }
.sd-switch-thumb { position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform 0.25s cubic-bezier(0.4,0,0.2,1); box-shadow:0 1px 3px rgba(0,0,0,0.15); }
.sd-switch.on .sd-switch-thumb { transform:translateX(16px); }
.sd-time-inputs { display:flex; align-items:center; gap:6px; }
.sd-time-inputs.hidden { opacity:0.3; pointer-events:none; }
.sd-time-label { font-size:11px; color:var(--t4); }
.sd-time-input { width:72px; padding:6px 8px; border-radius:3px; border:1px solid var(--brd); background:var(--inp); font-family:var(--fm); font-size:12px; color:var(--t1); text-align:center; outline:none; }
.sd-time-input:focus { border-color:var(--acc); }
.sd-time-sep { font-size:13px; color:var(--t4); }
.sd-time-hint { font-size:11px; color:var(--t4); margin-left:auto; }
.sd-footer { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:10px 20px; border-top:1px solid var(--brd); background:var(--bg2); }
.sd-btn-cancel { padding:6px 16px; border-radius:5px; border:1px solid var(--brd); background:transparent; font-family:var(--f); font-size:12px; font-weight:500; color:var(--t2); cursor:pointer; }
.sd-btn-cancel:hover { color:var(--t1); }
.sd-btn-apply { padding:6px 18px; border-radius:5px; border:none; background:linear-gradient(135deg,var(--acc),var(--accd)); font-family:var(--f); font-size:12px; font-weight:600; color:#fff; cursor:pointer; box-shadow:0 2px 8px rgba(var(--acc-rgb),0.2); }
.sd-btn-apply:hover { opacity:0.9; }
@media(max-width:768px){.sd-inner{flex-direction:column;}.sd-side{width:100%;flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--brd);padding:6px;}.sd-preset{white-space:nowrap;font-size:11px;}.sd-sep{display:none;}.sd-cals{flex-direction:column;gap:16px;}.sd-divider{display:none;}}

/* ============================================================
   SYNC BUTTON — 4 states: idle, syncing, success, error
   ============================================================ */
.sync-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:4px; border:1.5px solid var(--brd); background:var(--card); color:var(--t1); font-family:var(--f); font-size:12px; font-weight:600; cursor:pointer; transition:all 0.3s cubic-bezier(0.4,0,0.2,1); position:relative; overflow:hidden; }
.sync-btn:hover { border-color:var(--t3); }
.sync-btn .sync-icon { font-size:17px; transition:transform 0.3s; }
.sync-btn:hover .sync-icon { transform:rotate(45deg); }
.sync-progress { position:absolute; bottom:0; left:0; height:2px; background:linear-gradient(90deg,#3B82F6,#60A5FA); border-radius:0 0 3px 3px; width:0; }
.sync-btn.syncing { border-color:#3B82F6; color:#3B82F6; pointer-events:none; }
.sync-btn.syncing .sync-icon { animation:spinSync 1s linear infinite; }
.sync-btn.syncing .sync-progress { animation:syncProgress 2s ease-in-out; }
@keyframes spinSync { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes syncProgress { 0%{width:0} 50%{width:70%} 90%{width:95%} 100%{width:100%} }
.sync-btn.success { border-color:var(--ok); color:var(--ok); background:rgba(52,211,153,0.06); }
.sync-btn.success .sync-icon { animation:syncPop 0.3s ease; }
@keyframes syncPop { 0%{transform:scale(0)} 50%{transform:scale(1.2)} 100%{transform:scale(1)} }
.sync-btn.error { border-color:var(--err); color:var(--err); background:rgba(239,68,68,0.04); cursor:pointer; pointer-events:auto; }
.sync-btn.error:hover { background:rgba(239,68,68,0.08); }
@keyframes syncShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
.sync-btn.shake { animation:syncShake 0.4s ease; }

/* ============================================================
   PROFILE MODAL — Avatar click edit modal
   ============================================================ */
.profil-overlay { position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:16px; background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; opacity:0; pointer-events:none; transition:opacity 0.3s; }
.profil-overlay.open { opacity:1; pointer-events:auto; }
/* Profil modal : glass transparent avec blur prononcé */
.profil-modal {
  background: transparent;
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  width: 100%;
  max-width: 720px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  transform: scale(0.92) translateY(16px);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.3s;
  opacity: 0;
  overflow: hidden;
}
[data-theme="light"] .profil-modal {
  background: transparent;
  border: 1px solid rgba(70,60,120,0.12);
  box-shadow: 0 8px 32px rgba(70,60,120,0.10);
}
.profil-overlay.open .profil-modal { transform:scale(1) translateY(0); opacity:1; }
.profil-header { display:flex; align-items:center; justify-content:space-between; padding:20px 6px 14px; }
.profil-title { font-family:var(--fd); font-size:18px; font-weight:700; color:var(--t1); margin:0; }
.profil-close { background:none; border:none; color:var(--t3); cursor:pointer; padding:4px; transition:color 0.2s; }
.profil-close:hover { color:var(--t1); }
.profil-body {
  display: flex;
  border-top: 1px solid var(--brd);
  border-bottom: 1px solid var(--brd);
  background: transparent;
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  margin: 0 8px;
  border-radius: 5px;
}
.profil-form { flex:1; padding:24px; display:flex; flex-direction:column; gap:14px; }
.profil-divider { width:0; border-left:1.5px dashed var(--brd); }
.profil-preview { width:240px; flex-shrink:0; padding:28px 6px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.profil-group { display:flex; flex-direction:column; }
.profil-label { font-family:var(--f); font-size:12px; font-weight:600; color:var(--t3); margin-bottom:5px; text-transform:uppercase; letter-spacing:0.5px; }
.profil-input { width:100%; padding:10px 14px; border-radius:4px; border:1.5px solid var(--brd); background:var(--inp); color:var(--t1); font-family:var(--f); font-size:14px; font-weight:500; outline:none; transition:border-color 0.2s; }
.profil-input:focus { border-color:var(--acc); }
.profil-row { display:flex; gap:14px; }
.profil-preview-label { font-size:11px; font-weight:600; color:var(--t4); text-transform:uppercase; letter-spacing:1px; margin-bottom:16px; }
.profil-avatar-wrap { position:relative; margin-bottom:14px; }
.profil-avatar-img { width:100px; height:100px; border-radius:50%; object-fit:cover; border:3px solid var(--brd); transition:border-color 0.2s; }
.profil-avatar-wrap:hover .profil-avatar-img { border-color:var(--acc); }
.profil-avatar-initials { display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--acc),var(--accd)); color:#fff; font-family:var(--fd); font-size:32px; font-weight:700; }
.profil-avatar-edit { position:absolute; bottom:2px; right:2px; width:32px; height:32px; border-radius:50%; background:var(--card); border:1px solid var(--brd); display:grid; place-items:center; cursor:pointer; color:var(--t3); box-shadow:0 2px 8px rgba(0,0,0,0.15); transition:all 0.2s; }
.profil-avatar-edit:hover { border-color:var(--acc); color:var(--acc); }
.profil-avatar-delete { position:absolute; top:2px; right:2px; width:28px; height:28px; border-radius:50%; background:var(--err); border:2px solid var(--card); display:grid; place-items:center; cursor:pointer; color:#fff; box-shadow:0 2px 8px rgba(0,0,0,0.2); transition:all 0.2s; padding:0; }
.profil-avatar-delete:hover { transform:scale(1.1); }
.profil-preview-name { font-family:var(--fd); font-size:16px; font-weight:700; color:var(--t1); text-align:center; margin:0; }
.profil-preview-titre { font-size:13px; color:var(--t3); margin:3px 0 10px; text-align:center; }
.profil-preview-badge { display:flex; align-items:center; gap:5px; padding:4px 12px; border-radius:5px; background:rgba(255,255,255,0.04); border:1px solid var(--brd); font-size:11px; font-weight:500; color:var(--t3); }
[data-theme="light"] .profil-preview-badge { background:rgba(0,0,0,0.03); }
.profil-footer { padding:14px 6px; display:flex; align-items:center; justify-content:space-between; }
.profil-actions { display:flex; gap:10px; }
.profil-btn-cancel { padding:8px 20px; border-radius:5px; border:1.5px solid var(--brd); background:transparent; color:var(--t1); font-family:var(--f); font-size:13px; font-weight:600; cursor:pointer; transition:all 0.2s; }
.profil-btn-cancel:hover { border-color:var(--t3); }
.profil-btn-save { padding:8px 20px; border-radius:5px; border:none; background:linear-gradient(135deg,var(--acc),var(--accd)); color:#fff; font-family:var(--f); font-size:13px; font-weight:700; cursor:pointer; box-shadow:0 4px 16px rgba(var(--acc-rgb),0.25); transition:all 0.2s; }
.profil-btn-save:hover { transform:translateY(-1px); box-shadow:0 6px 6px rgba(var(--acc-rgb),0.35); }
@media(max-width:640px){.profil-body{flex-direction:column;}.profil-divider{width:100%;height:0;border-left:none;border-top:1.5px dashed var(--brd);}.profil-preview{width:100%;}.profil-row{flex-direction:column;}.profil-footer{flex-direction:column;gap:12px;text-align:center;}.profil-actions{width:100%;}.profil-btn-cancel,.profil-btn-save{flex:1;}}

/* ============================================================
   DESIGN BANNER — Gradient banner on facture/devis form
   ============================================================ */
.design-banner {
  position: relative; overflow: hidden;
  border-radius: 6px; margin-bottom: 6px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.design-banner:hover { transform: translateY(-2px); box-shadow: 0 8px 6px rgba(var(--acc-rgb),0.25); }
.design-banner-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--accd) 0%, var(--acc) 30%, var(--accl) 55%, var(--acc2, var(--accl)) 100%);
  opacity: 0.9;
}
.design-banner-bg::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(255,255,255,0.15) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 20%, rgba(255,255,255,0.1) 0%, transparent 50%);
}
.design-banner-content {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 28px;
}
.design-banner-title {
  font-family: var(--fd); font-size: 16px; font-weight: 700;
  color: #fff; display: flex; align-items: center;
}
.design-banner-title .hgi-stroke { font-size: 20px; }
.design-banner-sub {
  font-size: 12px; color: rgba(255,255,255,0.7); margin-top: 3px;
}
.design-banner-sub span { color: #fff; font-weight: 700; }
.design-banner-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 20px; border-radius: 50px; border: none;
  background: rgba(255,255,255,0.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #fff; font-family: var(--f); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
  border: 1px solid rgba(255,255,255,0.25);
}
.design-banner-btn:hover { background: rgba(255,255,255,0.35); }

/* ============================================================
   DESIGN DOCUMENT MODAL — Full-screen split layout
   ============================================================ */
.app-container.modal-blur {
  filter: blur(4px);
  pointer-events: none;
  transition: filter 0.2s ease;
}
.design-modal-overlay {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  padding: 6px;
}
.design-modal-backdrop {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
[data-theme="light"] .design-modal-backdrop {
  background: rgba(255,255,255,0.4);
}
.design-modal {
  position: relative; z-index: 1;
  background: rgba(26,29,36,0.88); border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 5px; width: 100%; max-width: 1100px; max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 6px 80px rgba(0,0,0,0.25);
}
[data-theme="light"] .design-modal {
  background: rgba(255,255,255,0.88); border-color: rgba(0,0,0,0.08);
  box-shadow: 0 6px 80px rgba(0,0,0,0.1);
}
.design-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 6px; border-bottom: 1px solid var(--brd, #e5e7eb); flex-shrink: 0;
}
.design-modal-title { font-family: var(--fd); font-size: 18px; font-weight: 700; margin: 0; color: var(--t1, #1a1a2e); }
.design-modal-subtitle { font-size: 12px; color: var(--t3, #999); margin-top: 3px; }
.design-modal-close {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--brd, #e5e7eb);
  background: transparent; color: var(--t3, #999); cursor: pointer; font-size: 18px;
  display: flex; align-items: center; justify-content: center; transition: all 0.15s;
}
.design-modal-close:hover { border-color: var(--t2); color: var(--t1); }
.design-modal-body { flex: 1; overflow: hidden; min-height: 0; }
.design-split {
  display: flex; height: 100%;
}
.design-options {
  flex: 0 0 400px; min-width: 0; overflow-y: auto; padding: 28px 6px;
  border-right: 1px solid var(--brd, #e5e7eb);
}
.design-modal-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  padding: 18px 6px; border-top: 1px solid var(--brd, #e5e7eb); flex-shrink: 0;
}
@media (max-width: 900px) {
  .design-modal-overlay { padding: 16px; }
  .design-modal { max-height: 95vh; }
  .design-split { flex-direction: column; }
  .design-options { flex: none; width: 100%; border-right: none; border-bottom: 1px solid var(--brd); max-height: 50vh; }
}
@media (max-width: 768px) {
  .design-modal-overlay { padding: 0; }
  .design-modal { width: 100%; max-height: 100vh; border-radius: 0; max-width: none; }
}

/* ============================================================
   TUTORIAL MODAL — Interactive onboarding
   ============================================================ */
.tuto-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.70);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  animation: tutoFadeIn 0.3s ease;
}
@keyframes tutoFadeIn { from { opacity: 0; } to { opacity: 1; } }
.tuto-modal {
  background: var(--card); border: 1px solid var(--brd);
  border-radius: 5px; width: 90%; max-width: 480px; padding: 6px;
  box-shadow: 0 6px 80px rgba(0,0,0,0.5);
  animation: tutoSlideUp 0.4s cubic-bezier(0.16,1,0.3,1);
}
@keyframes tutoSlideUp {
  from { opacity: 0; transform: translateY(30px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.tuto-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 28px; }
.tuto-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--inp); transition: all 0.3s ease; }
.tuto-dot.active { background: var(--acc); width: 6px; border-radius: 4px; }
.tuto-dot.done { background: var(--ok); }
.tuto-step { text-align: center; animation: tutoStepIn 0.35s ease; }
@keyframes tutoStepIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.tuto-step-icon {
  width: 64px; height: 64px; border-radius: 6px;
  background: var(--accbg); display: grid; place-items: center; margin: 0 auto 20px;
}
.tuto-step-icon .material-symbols-outlined { font-size: 6px; color: var(--acc); }
.tuto-step-title {
  font-family: var(--fd); font-size: 20px; font-weight: 700; margin-bottom: 10px; color: var(--t1);
}
.tuto-step-desc {
  font-family: var(--f); font-size: 14px; line-height: 1.6; color: var(--t3); max-width: 380px; margin: 0 auto;
}
.tuto-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.tuto-skip {
  font-family: var(--f); font-size: 13px; font-weight: 500; color: var(--t4);
  background: none; border: none; cursor: pointer; padding: 8px 0; transition: color 0.2s;
}
.tuto-skip:hover { color: var(--t2); }
.tuto-nav { display: flex; gap: 8px; }
.tuto-prev {
  width: 40px; height: 40px; border-radius: 6px; border: 1px solid var(--brd);
  background: transparent; color: var(--t3); cursor: pointer; display: grid; place-items: center; transition: all 0.2s;
}
.tuto-prev:hover { border-color: var(--acc); color: var(--acc); }
.tuto-next {
  font-family: var(--f); font-size: 14px; font-weight: 600; padding: 10px 20px;
  border-radius: 6px; border: none;
  background: linear-gradient(135deg, var(--acc), var(--accd));
  color: #fff; cursor: pointer; display: flex; align-items: center; gap: 6px;
  transition: all 0.2s; box-shadow: 0 4px 16px rgba(var(--acc-rgb),0.25);
}
.tuto-next:hover { transform: translateY(-1px); box-shadow: 0 6px 6px rgba(var(--acc-rgb),0.35); }
/* Highlight sidebar items */
.sidebar-item.tuto-hl {
  position: relative; z-index: 2001;
  box-shadow: 0 0 0 3px var(--acc), 0 0 20px rgba(var(--acc-rgb),0.3);
  border-radius: var(--r-md);
}
.kpi.tuto-hl {
  position: relative; z-index: 2001;
  box-shadow: 0 0 0 3px var(--acc), 0 0 20px rgba(var(--acc-rgb),0.3);
  border-radius: var(--r-lg);
}
@media (max-width: 768px) {
  .tuto-modal { width: 95%; padding: 6px; border-radius: 6px; }
  .tuto-step-title { font-size: 18px; }
  .tuto-step-desc { font-size: 13px; }
  .sidebar-item.tuto-hl { box-shadow: none; }
}

/* ═══════════════════════════════════════════════
   Projet Detail Complet — Runey pixel-perfect
   ═══════════════════════════════════════════════ */
.pd { animation: fadeUp 0.3s ease; }

/* ── Header (Runey exact) ── */
.pd-head { display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.pd-avatar {
  width:56px; height:56px; border-radius:50%; flex-shrink:0;
  background:var(--bg2); border:1px solid var(--brd);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fd); font-size:22px; font-weight:700; color:var(--t2);
  cursor:pointer; position:relative; overflow:hidden; transition:border-color 0.2s;
}
.pd-avatar img { width:100%; height:100%; object-fit:cover; }
.pd-avatar:hover { border-color:var(--acc); }
.pd-avatar-hover {
  position:absolute; inset:0; background:rgba(0,0,0,0.4);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity 0.2s;
}
.pd-avatar-hover .material-symbols-outlined { font-size:18px; color:#fff; }
.pd-avatar:hover .pd-avatar-hover { opacity:1; }

.pd-head-info { flex:1; min-width:0; }
.pd-head-name {
  font-family:var(--fd); font-size:22px; font-weight:700; color:var(--t1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pd-head-client { font-family:var(--f); font-size:13px; color:var(--t2); margin-top:2px; display:flex; align-items:center; gap:6px; }
.pd-client-pill {
  font-size:9px; padding:2px 6px; border-radius:4px; font-weight:700;
  background:rgba(var(--acc-rgb),0.12); color:var(--acc);
}

.pd-head-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
/* .pd-status-pill moved to factures/liste.html inline styles */

.pd-dots-btn {
  width:38px; height:38px; border-radius:50%; border:1px solid var(--brd);
  background:transparent; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--t2); transition:all 0.15s;
}
.pd-dots-btn .material-symbols-outlined { font-size:20px; }
.pd-dots-btn:hover { border-color:var(--acc); color:var(--t1); }

/* Phase 4 Glass Unified : .pd-btn-facture / .pd-btn-devis sur pattern badge-accent
   Ancien : background var(--t1), color var(--bg), padding 8px 18px, radius 5px */
.pd-btn-facture, .pd-btn-devis {
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px; border-radius:3px;
  background: rgba(var(--acc-rgb), 0.18);
  color: var(--acc);
  border: 1px solid rgba(var(--acc-rgb), 0.30);
  font-family: var(--f); font-size:12px; font-weight:500;
  cursor:pointer; text-decoration:none; transition: all 0.2s ease;
  line-height: 1.4;
}
.pd-btn-facture .material-symbols-outlined,
.pd-btn-devis .material-symbols-outlined { font-size:14px; }
.pd-btn-facture:hover, .pd-btn-devis:hover {
  background: rgba(var(--acc-rgb), 0.25);
  border-color: rgba(var(--acc-rgb), 0.40);
  filter: brightness(0.95);
}

/* Phase 4 Glass Unified : boutons icone ronds avec pattern badge couleur
   Ancien : background transparent + border var(--brd), hover accent fade
   Nouveau : alpha 0.10-0.15 + couleur pleine + border alpha — tout en gardant le rond */
.pd-btn-icon {
  width:34px; height:34px; border-radius:50%;
  background: rgba(148, 163, 184, 0.10);
  border: 1px solid rgba(148, 163, 184, 0.20);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color: var(--t2);
  transition: all 0.2s ease;
}
.pd-btn-icon:hover {
  background: rgba(var(--acc-rgb), 0.15);
  border-color: rgba(var(--acc-rgb), 0.30);
  color: var(--acc);
  filter: brightness(0.95);
}
/* Variante danger (poubelle supprimer) : rouge des le repos */
.pd-btn-icon-danger {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.30) !important;
  color: #EF4444 !important;
}
.pd-btn-icon-danger:hover {
  background: rgba(239, 68, 68, 0.22) !important;
  border-color: rgba(239, 68, 68, 0.40) !important;
  color: #EF4444 !important;
  filter: brightness(0.95);
}

/* Year selector */
.pd-tl-year-select { position:relative; }
.pd-tl-year-btn { display:flex; align-items:center; gap:4px; font-weight:600; color:var(--t1); }
.pd-tl-year-dropdown {
  position:absolute; top:calc(100% + 4px); left:0;
  background:var(--elev, var(--card)); border:1px solid var(--brd);
  border-radius:4px; padding:4px; z-index:50; display:none;
  box-shadow:0 4px 16px rgba(0,0,0,0.2);
}
.pd-tl-year-dropdown.open { display:block; }
.pd-tl-year-option {
  padding:6px 16px; border-radius:6px; cursor:pointer;
  font-family:var(--fd); font-size:13px; font-weight:500; color:var(--t2);
  text-align:center; transition:background 0.1s;
}
.pd-tl-year-option:hover { background:rgba(255,255,255,0.04); color:var(--t1); }
[data-theme="light"] .pd-tl-year-option:hover { background:rgba(0,0,0,0.04); }
.pd-tl-year-option.active { color:var(--acc); font-weight:700; }

/* ── KPIs (Runey exact: thin border row) ── */
.pd-kpis-label {
  font-family:var(--fd); font-size:13px; font-weight:600; color:var(--t2);
  text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px;
}
.pd-kpis {
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  border:none; border-radius:4px;
  overflow:hidden; margin-bottom:12px;
}
[data-theme="light"] .pd-kpis {
  border:1px solid rgba(0,0,0,0.06);
}
.pd-kpi {
  padding: clamp(6px, 0.8vw, 10px) clamp(8px, 1vw, 14px);
  border-right:1px solid rgba(255,255,255,0.06);
  min-width:0;
}
[data-theme="light"] .pd-kpi {
  border-right:1px solid rgba(0,0,0,0.06);
}
.pd-kpi:last-child { border-right:none; }
.pd-kpi-label {
  font-family:var(--fd); font-size:10px; color:var(--t2);
  margin-bottom:4px;
}
.pd-kpi-value {
  font-family:var(--fd);
  font-size: clamp(12px, 1.25vw, 18px);
  font-weight:700; color:var(--t1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pd-kpi-value.val-red { color:var(--err); }
.pd-kpi-sub { font-family:var(--f); font-size:11px; color:var(--t3); margin-top:1px; }
.pd-kpi-bar { margin-top:8px; height:6px; border-radius:3px; background:rgba(255,255,255,0.06); overflow:hidden; }
[data-theme="light"] .pd-kpi-bar { background:rgba(0,0,0,0.06); }
.pd-kpi-bar-fill { height:100%; border-radius:3px; background:linear-gradient(90deg, var(--acc), var(--accd, #E8872A)); }

/* ── Client infos (Runey exact) ── */
.pd-client-infos {
  background:var(--bg2); border:1px solid var(--brd);
  border-radius:4px; padding:10px 16px; margin-bottom:12px;
}
.pd-ci-row { display:flex; gap:24px; margin-bottom:6px; }
.pd-ci-row:last-child { margin-bottom:0; }
.pd-ci-field { flex:1; }
.pd-ci-label { display:block; font-family:var(--fd); font-size:10px; color:var(--t2); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:2px; }
.pd-ci-value { font-family:var(--f); font-size:13px; font-weight:500; color:var(--t1); }

/* ── Factures table (Runey exact) ── */
.pd-factures-section { margin-top:24px; }
.pd-factures-title { font-family:var(--fd); font-size:15px; font-weight:700; color:var(--t1); margin-bottom:12px; }
.pd-factures-table {
  width:100%; border-collapse:separate; border-spacing:0; font-size:13px;
  border:1px solid var(--brd); border-radius:4px;
}
.pd-factures-table thead th {
  text-align:left; padding:10px 12px; font-family:var(--fd); font-size:11px; font-weight:600;
  color:var(--t2); text-transform:uppercase; letter-spacing:0.5px;
  border-bottom:1px solid var(--brd); background:var(--bg2);
}
.pd-factures-table thead th:first-child { border-radius:4px 0 0 0; }
.pd-factures-table thead th:last-child { border-radius:0 12px 0 0; }
.pd-factures-table tbody tr:last-child td:first-child { border-radius:0 0 0 12px; }
.pd-factures-table tbody tr:last-child td:last-child { border-radius:0 0 12px 0; }
.pd-facture-row { cursor:pointer; transition:background 0.1s; }
.pd-facture-row:hover { background:rgba(255,255,255,0.02); }
[data-theme="light"] .pd-facture-row:hover { background:rgba(0,0,0,0.02); }
.pd-facture-row td { padding:12px; border-bottom:1px solid rgba(255,255,255,0.04); }
[data-theme="light"] .pd-facture-row td { border-bottom:1px solid rgba(0,0,0,0.04); }
.pd-facture-row:last-child td { border-bottom:none; }
.pd-facture-row.active { background:rgba(var(--acc-rgb),0.06); }
.pd-facture-row.active td:first-child {
  position:relative;
}
.pd-facture-row.active td:first-child::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:24px; border-radius:0 3px 3px 0; background:var(--acc);
}
.pd-f-num { font-family:var(--f); font-weight:700; color:var(--t1); }
.pd-f-date { font-family:var(--f); color:var(--t2); font-size:12px; }

/* Badges statut — pills arrondis */
.pd-f-badge {
  font-family:var(--fd); font-size:11px; font-weight:600; padding:3px 12px; border-radius:5px;
  display:inline-block; white-space:nowrap;
}
.pd-f-badge.brouillon { background:rgba(139,92,246,0.12); color:#A78BFA; }
.pd-f-badge.envoyee { background:rgba(59,130,246,0.12); color:#60A5FA; }
.pd-f-badge.payee { background:rgba(52,211,153,0.12); color:#34D399; }
.pd-f-badge.en_retard { background:rgba(248,113,113,0.12); color:#F87171; }
.pd-f-badge.relancee { background:rgba(246,174,45,0.12); color:#F6AE2D; }
.pd-f-badge.refuse { background:rgba(248,113,113,0.12); color:#F87171; }

/* Inline dropdowns in facture table */
.pd-f-status-sel { position:relative; display:inline-block; }
.pd-f-badge { cursor:pointer; transition:opacity 0.15s; }
.pd-f-badge:hover { opacity:0.75; }
.pd-f-dd {
  position:fixed; z-index:9999; display:none;
  background:var(--elev, var(--card)); border:1px solid var(--brd);
  border-radius:4px; padding:4px; min-width:130px;
  box-shadow:0 8px 6px rgba(0,0,0,0.35);
}
.pd-f-dd.open { display:block; }
.pd-f-dd-opt { padding:4px 6px; border-radius:6px; cursor:pointer; transition:background 0.1s; }
.pd-f-dd-opt:hover { background:rgba(255,255,255,0.04); }
[data-theme="light"] .pd-f-dd-opt:hover { background:rgba(0,0,0,0.04); }
.pd-f-dd-opt-text { padding:6px 12px; font-family:var(--f); font-size:13px; color:var(--t2); }
.pd-f-dd-opt-text:hover { color:var(--t1); }

/* Inline date picker */
.pd-f-date-click {
  cursor:pointer; padding:2px 6px; border-radius:6px; transition:background 0.15s;
}
.pd-f-date-click:hover { background:rgba(var(--acc-rgb),0.08); color:var(--t1); }
.pd-f-date-inp {
  width:130px; padding:4px 8px; border-radius:6px; border:1px solid var(--acc);
  background:var(--bg2); color:var(--t1); font-family:var(--f); font-size:12px;
}

/* Inline payment selector */
.pd-f-pay-click {
  cursor:pointer; padding:2px 6px; border-radius:6px; transition:background 0.15s;
  font-family:var(--f); font-size:12px; color:var(--t2);
}
.pd-f-pay-click:hover { background:rgba(var(--acc-rgb),0.08); color:var(--t1); }

/* Empty state */
.pd-empty-card {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:40px; color:var(--t3);
}
.pd-empty-icon { font-size:40px; opacity:0.3; margin-bottom:8px; }
.pd-empty-title { font-family:var(--fd); font-size:14px; }

/* ── New facture panel ── */
.fnp { padding:24px 28px; }
.fnp-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.fnp-title { font-family:var(--fd); font-size:18px; font-weight:700; color:var(--t1); margin:0; }
.fnp-field { margin-bottom:14px; }
.fnp-label {
  display:block; font-family:var(--fd); font-size:11px; font-weight:600; color:var(--t3);
  text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px;
}
.fnp-input {
  width:100%; padding:9px 12px; border-radius:4px; border:1px solid var(--brd);
  background:var(--bg2); font-family:var(--f); font-size:13px; color:var(--t1); outline:none;
}
.fnp-input:focus { border-color:var(--acc); }
.fnp-input::placeholder { color:var(--t3); }
.fnp-input[readonly] { opacity:0.7; cursor:default; }
.fnp-section-title {
  font-family:var(--fd); font-size:13px; font-weight:700; color:var(--t1);
  margin:16px 0 8px; text-transform:uppercase; letter-spacing:0.5px;
}
.fnp-ligne { display:flex; gap:8px; margin-bottom:8px; align-items:center; }
.fnp-ligne-desc { flex:3; }
.fnp-ligne-qte { flex:0.7; text-align:center; }
.fnp-ligne-pu { flex:1; text-align:right; }
.fnp-ligne-total {
  flex:1; text-align:right; font-family:var(--f); font-size:13px; font-weight:700;
  color:var(--t1); min-width:80px;
}
.fnp-add-ligne {
  display:flex; align-items:center; gap:4px; padding:6px 12px; border-radius:3px;
  border:1px dashed var(--brd); background:transparent; color:var(--t3);
  cursor:pointer; font-family:var(--fd); font-size:12px; margin-bottom:16px;
}
.fnp-add-ligne:hover { border-color:var(--acc); color:var(--acc); }
.fnp-totaux { border-top:1px solid var(--brd); padding-top:12px; margin-top:12px; }
.fnp-total-row {
  display:flex; justify-content:space-between; padding:4px 0;
  font-family:var(--fd); font-size:13px; color:var(--t2);
}
.fnp-total-ttc {
  border-top:1px solid var(--brd); padding-top:8px; margin-top:4px;
  font-size:15px; color:var(--t1);
}
/* Phase 4 Glass Unified : .fnp-btn-create sur pattern badge-accent (CTA principal panneau facture)
   Ancien : gradient var(--acc) -> var(--accd), color #fff, box-shadow 0 2px 10px */
.fnp-btn-create {
  width:100%; padding: 8px 12px;
  border-radius: 3px;
  background: rgba(var(--acc-rgb), 0.18);
  color: var(--acc);
  border: 1px solid rgba(var(--acc-rgb), 0.30);
  font-family: var(--f); font-size:13px; font-weight:600;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-top:16px;
  transition: all 0.2s ease;
}
.fnp-btn-create:hover {
  background: rgba(var(--acc-rgb), 0.25);
  border-color: rgba(var(--acc-rgb), 0.40);
  filter: brightness(0.95);
}

/* Edit form loaded in right panel */
#detailContent .modal-header { padding:20px 28px 16px; }
#detailContent .modal-body { padding:0 28px 20px; }
#detailContent .modal-footer { padding:16px 28px; }
.fnp-phase-row {
  display:flex; gap:6px; align-items:center; margin-bottom:6px;
}
.fnp-phase-row .fnp-input { padding:6px 8px; font-size:12px; }
.fnp-design-banner {
  position:relative; border-radius:4px; overflow:hidden;
  transition:transform 0.2s, box-shadow 0.2s;
}
.fnp-design-banner:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(99,102,241,0.15); }

/* ── Responsive ── */
@media (max-width:768px) {
  .pd-kpis { grid-template-columns:repeat(2,1fr); }
  /* Compact head actions (status pill, edit/delete icons, Devis/Facture buttons) */
  .pd-head { gap:8px !important; padding:10px 12px !important; align-items:flex-start; }
  .pd-head-avatar, .pd-avatar { width:38px !important; height:38px !important; font-size:14px !important; }
  .pd-head-name { font-size:13px !important; }
  .pd-head-client { font-size:11px !important; }
  .pd-head-actions { gap:4px !important; flex-wrap:wrap; justify-content:flex-end; }
  .pd-status-pill { font-size:10px !important; padding:1px 8px !important; line-height:1.4 !important; min-height:0 !important; }
  .pd-status-pill .hgi-stroke { font-size:11px !important; }
  .pd-btn-icon { width:22px !important; height:22px !important; min-height:0 !important; }
  .pd-btn-icon .hgi-stroke { font-size:12px !important; }
  .pd-btn-devis, .pd-btn-facture {
    font-size:10px !important; padding:2px 9px !important; border-radius:12px !important;
    line-height:1.4 !important; min-height:0 !important;
  }
  .pd-btn-devis .hgi-stroke, .pd-btn-facture .hgi-stroke { font-size:12px !important; }
  /* Compact client info: 2-col grid, label + value inline */
  .pd-client-infos {
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:6px 12px;
    padding:10px 12px !important;
  }
  .pd-ci-row {
    display:contents !important;
  }
  .pd-ci-row > .pd-ci-field[style*="flex:2"] {
    grid-column:1 / -1;
    display:grid !important;
    grid-template-columns:1fr 60px 1fr;
    gap:6px 10px;
  }
  .pd-ci-field {
    display:flex !important;
    align-items:baseline;
    gap:6px;
    flex:none !important;
    min-width:0;
  }
  .pd-ci-field:empty { display:none !important; }
  .pd-ci-label {
    display:inline !important;
    font-size:9px !important;
    margin-bottom:0 !important;
    white-space:nowrap;
    opacity:0.7;
  }
  .pd-ci-value {
    font-size:11px !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    flex:1;
    min-width:0;
  }
  .pd-factures-table th:nth-child(4),
  .pd-factures-table td:nth-child(4),
  .pd-factures-table th:nth-child(5),
  .pd-factures-table td:nth-child(5) { display:none; }
}

/* ── Timeline (Runey exact) ── */
.pd-timeline { margin-bottom:16px; }
.pd-tl-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.pd-tl-title { font-family:var(--fd); font-size:15px; font-weight:700; color:var(--t1); }
.pd-tl-right { display:flex; align-items:center; gap:6px; }
.pd-tl-count { font-family:var(--f); font-size:12px; color:var(--t3); margin-right:4px; }
.pd-tl-pill {
  padding:4px 12px; border-radius:3px; border:1px solid var(--brd);
  background:transparent; font-family:var(--fd); font-size:12px; font-weight:500;
  color:var(--t2); cursor:pointer; transition:all 0.15s;
}
.pd-tl-pill:hover { border-color:var(--acc); color:var(--t1); }
.pd-tl-arrow {
  width:30px; height:30px; border-radius:3px; border:1px solid var(--brd);
  background:transparent; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--t2); transition:all 0.15s;
}
.pd-tl-arrow .material-symbols-outlined { font-size:18px; }
.pd-tl-arrow:hover { border-color:var(--acc); color:var(--t1); }

/* pd-tl-viewport removed — now using .pd-tl-scroll */

/* Timeline internals — Jinja2 flex layout */
.pd-tl-scroll {
  overflow-x:auto; padding-bottom:12px;
  scrollbar-width:thin; scrollbar-color:var(--brd) transparent;
  min-height:280px;
}
.pd-tl-scroll::-webkit-scrollbar { height:4px; }
.pd-tl-scroll::-webkit-scrollbar-thumb { background:var(--brd); border-radius:4px; }
.pd-tl-track {
  display:flex; position:relative; padding-top:20px; padding-bottom:20px;
  min-width:max-content; min-height:280px;
}
.tl-line { position:absolute; top:36px; left:0; right:0; height:2px; background:var(--brd); }
.tl-day-col {
  width:80px; flex-shrink:0; text-align:center; position:relative;
}
.tl-mo {
  font-family:var(--fd); font-size:10px; font-weight:600; color:var(--t2);
  position:absolute; top:-14px; text-transform:uppercase; letter-spacing:0.3px;
}
.tl-num {
  font-family:var(--fm); font-size:11px; color:var(--t2); margin-bottom:8px;
  display:inline-block;
}
.tl-num.tl-has { color:var(--t1); font-weight:700; }
.tl-num.tl-today {
  color:#fff; font-weight:700;
  background:var(--acc); border:none; border-radius:50%;
  width:26px; height:26px; line-height:26px; text-align:center;
}
.tl-dot {
  width:14px; height:14px; border-radius:50%;
  position:absolute; top:31px; left:50%; transform:translateX(-50%);
  z-index:3; border:2px solid var(--card, var(--bg));
}
.tl-evt {
  position:absolute; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:20px;
  background:var(--card); border:1px solid var(--brd);
  white-space:nowrap; z-index:2;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
  transition:transform 0.15s, box-shadow 0.15s;
}
.tl-evt:hover { transform:translateX(-50%) translateY(-2px); box-shadow:0 4px 14px rgba(0,0,0,0.14); }
.tl-evt-ico {
  width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.tl-evt-ico .material-symbols-outlined { font-size:12px; }
.tl-evt-ico .hgi-stroke { font-size:11px; }
.tl-dot-pulse { animation: dotPulse 0.6s ease 2; }
@keyframes dotPulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(2.2); box-shadow: 0 0 10px currentColor; }
}
.tl-evt-label { font-family:var(--fd); font-size:12px; font-weight:600; color:var(--t1); }
.tl-evt-amt  { font-family:var(--fm); font-size:11px; color:var(--t2); }

/* ── Tabs (Runey pill style) ── */
.pd-tabs { display:flex; gap:4px; margin-bottom:16px; }
.pd-tab {
  padding:7px 16px; border-radius:3px; border:none; background:transparent;
  font-family:var(--fd); font-size:13px; font-weight:500; color:var(--t2);
  cursor:pointer; display:flex; align-items:center; gap:6px; transition:all 0.15s;
}
.pd-tab:hover { color:var(--t1); background:rgba(255,255,255,0.04); }
.pd-tab.active {
  background:var(--t1); color:var(--bg); font-weight:600;
}
.pd-tab-n {
  font-family:var(--fm); font-size:11px;
}
.pd-tab.active .pd-tab-n { color:var(--bg); opacity:0.7; }

/* ── Tab panes ── */
.pd-pane { display:none; }
.pd-pane.active { display:block; }

/* ── Tab toolbar (Runey exact) ── */
.pd-pane-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:14px; flex-wrap:wrap;
}
.pd-toolbar-left { display:flex; align-items:center; gap:8px; }
.pd-toolbar-right { display:flex; align-items:center; gap:8px; }
.pd-filter-btn {
  padding:5px 10px; border-radius:3px; border:1px solid var(--brd);
  background:transparent; font-family:var(--fd); font-size:12px;
  color:var(--t2); cursor:pointer; display:flex; align-items:center; gap:3px;
  transition:all 0.15s;
}
.pd-filter-btn .material-symbols-outlined { font-size:16px; }
.pd-filter-btn:hover { border-color:var(--acc); color:var(--t1); }
.pd-done-count { font-family:var(--f); font-size:12px; color:var(--t3); }
.pd-view-btn {
  width:32px; height:32px; border-radius:3px; border:1px solid var(--brd);
  background:transparent; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--t3); transition:all 0.15s;
}
.pd-view-btn .material-symbols-outlined { font-size:18px; }
.pd-view-btn.active { color:var(--t1); border-color:var(--t2); }
.pd-view-btn:hover { color:var(--t1); }
.pd-search-box {
  display:flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:3px; border:1px solid var(--brd);
  background:transparent; min-width:160px;
}
.pd-search-box .material-symbols-outlined { font-size:16px; color:var(--t3); }
.pd-search-box input {
  border:none; background:transparent; outline:none;
  font-family:var(--f); font-size:12px; color:var(--t1); width:100%;
}
.pd-search-box input::placeholder { color:var(--t3); }
.pd-search-box:focus-within { border-color:var(--acc); }

.pd-add-btn {
  display:inline-flex; align-items:center; gap:4px;
  padding:7px 16px; border-radius:4px; border:none;
  background:var(--t1); color:var(--bg);
  font-family:var(--fd); font-size:12px; font-weight:600;
  cursor:pointer; transition:opacity 0.15s;
}
.pd-add-btn .material-symbols-outlined { font-size:16px; }
.pd-add-btn:hover { opacity:0.85; }
.pd-cancel-btn {
  padding:7px 16px; border-radius:4px; border:1px solid var(--brd);
  background:transparent; color:var(--t2);
  font-family:var(--fd); font-size:12px; font-weight:500;
  cursor:pointer; transition:all 0.15s;
}
.pd-cancel-btn:hover { border-color:var(--acc); color:var(--t1); }

/* ── Empty state card (Runey exact) ── */
.pd-empty-card {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:40px 6px; border-radius:4px;
  background:var(--bg2); text-align:center;
}
.pd-empty-icon { font-size:36px; color:var(--t3); margin-bottom:12px; }
.pd-empty-title { font-family:var(--fd); font-size:15px; font-weight:700; color:var(--t1); margin-bottom:4px; }
.pd-empty-desc { font-family:var(--f); font-size:13px; color:var(--t3); margin-bottom:16px; max-width:280px; }

/* ── Task rows ── */
.pd-task-row {
  display:flex; align-items:center; gap:10px;
  padding:10px 0; border-bottom:1px solid var(--brd);
}
.pd-task-row:last-of-type { border-bottom:none; }
.pd-task-row input[type="checkbox"] { accent-color:var(--acc); width:16px; height:16px; cursor:pointer; flex-shrink:0; }
.pd-task-title { flex:1; font-family:var(--f); font-size:13px; color:var(--t1); }
.pd-task-title.done { text-decoration:line-through; color:var(--t3); }
.pd-task-date { font-family:var(--f); font-size:12px; color:var(--t3); }

/* ── Document rows ── */
.pd-doc-row {
  display:flex; align-items:center; padding:12px 0;
  border-bottom:1px solid var(--brd); cursor:pointer; transition:background 0.1s;
}
.pd-doc-row:hover { background:rgba(255,255,255,0.02); }
.pd-doc-row:last-of-type { border-bottom:none; }
.pd-doc-name { flex:1; font-family:var(--fd); font-size:13px; font-weight:600; color:var(--t1); }
.pd-doc-tags { display:flex; gap:4px; margin:0 12px; }
.pd-tag {
  font-family:var(--f); font-size:10px; padding:2px 8px; border-radius:4px; font-weight:600;
}
.pd-tag.type { background:rgba(255,255,255,0.06); color:var(--t2); }
.pd-tag.st-payee { background:rgba(46,204,113,0.12); color:var(--ok); }
.pd-tag.st-brouillon { background:rgba(167,139,250,0.12); color:#A78BFA; }
.pd-tag.st-envoyee { background:rgba(59,130,246,0.12); color:#60A5FA; }
.pd-tag.st-en_retard { background:rgba(231,76,60,0.12); color:var(--err); }
.pd-tag.st-relancee { background:rgba(var(--acc-rgb),0.12); color:var(--acc); }
.pd-doc-date { font-family:var(--f); font-size:12px; color:var(--t3); width:70px; text-align:right; }
.pd-doc-amount { font-family:var(--fm); font-size:13px; font-weight:700; color:var(--t1); width:100px; text-align:right; }

/* ── File rows ── */
.pd-file-row {
  display:flex; align-items:center; gap:10px;
  padding:10px 0; border-bottom:1px solid var(--brd);
}
.pd-file-row:last-of-type { border-bottom:none; }
.pd-file-name { flex:1; font-family:var(--f); font-size:13px; color:var(--t1); }
.pd-file-size { font-family:var(--fm); font-size:12px; color:var(--t3); }
.pd-file-action {
  background:none; border:none; color:var(--t3); cursor:pointer;
  display:flex; padding:4px; border-radius:6px; transition:all 0.15s;
}
.pd-file-action .material-symbols-outlined { font-size:16px; }
.pd-file-action:hover { color:var(--acc); background:rgba(var(--acc-rgb),0.08); }
.pd-file-action.del:hover { color:var(--err); background:rgba(231,76,60,0.08); }

/* ── Notes ── */
.pd-note-form {
  flex-direction:column; gap:10px; margin-bottom:14px;
  padding:14px; border-radius:4px; background:var(--bg2);
}
.pd-note-form textarea {
  width:100%; padding:10px 14px; border-radius:4px;
  border:1px solid var(--brd); background:var(--card);
  color:var(--t1); font-family:var(--f); font-size:13px;
  resize:none; outline:none;
}
.pd-note-form textarea:focus { border-color:var(--acc); }
.pd-note-form-actions { display:flex; gap:8px; }
.pd-note-card {
  padding:12px 0; border-bottom:1px solid var(--brd);
}
.pd-note-card:last-of-type { border-bottom:none; }
.pd-note-card p { font-family:var(--f); font-size:13px; color:var(--t1); margin:0 0 4px; }
.pd-note-date { font-family:var(--f); font-size:11px; color:var(--t3); }

/* ── Mobile ── */
@media (max-width: 768px) {
  .pd-kpis { grid-template-columns:repeat(2,1fr); }
  .pd-kpi:nth-child(5) { grid-column:span 2; }
  .pd-head { flex-wrap:wrap; }
  .pd-head-actions { width:100%; justify-content:flex-end; margin-top:8px; }
  .pd-pane-toolbar { flex-direction:column; align-items:stretch; }
  .pd-toolbar-right { justify-content:flex-end; }
}

/* ── KPI progress bar ── */
.pd-kpi-bar {
  width:100%; height:4px; border-radius:2px;
  background:rgba(255,255,255,0.06); margin-top:8px; overflow:hidden;
}
.pd-kpi-bar-fill {
  height:100%; border-radius:2px;
  background:linear-gradient(90deg, var(--acc), var(--accd));
  transition:width 1s cubic-bezier(0.16,1,0.3,1);
}

/* ── Factures list section (below timeline) ── */
.pd-invoices { margin-bottom:24px; }
.pd-invoices-bar {
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
}
.pd-invoices-title { font-family:var(--fd); font-size:15px; font-weight:700; color:var(--t1); }
.pd-invoices-count {
  font-family:var(--fm); font-size:11px; font-weight:700;
  background:var(--acc); color:#fff; padding:1px 8px; border-radius:4px;
}
.pd-invoice-row {
  display:flex; align-items:center; padding:12px 0;
  border-bottom:1px solid var(--brd); cursor:pointer; transition:background 0.1s;
}
.pd-invoice-row:hover { background:rgba(var(--acc-rgb),0.03); }
.pd-invoice-row.active { background:rgba(var(--acc-rgb),0.08); }
.pd-invoice-row:last-child { border-bottom:none; }
.pd-invoice-num { flex:1; font-family:var(--fd); font-size:13px; font-weight:600; color:var(--t1); }
.pd-invoice-date { font-family:var(--f); font-size:12px; color:var(--t3); width:80px; text-align:right; }
.pd-invoice-amount { font-family:var(--fm); font-size:13px; font-weight:700; color:var(--t1); width:100px; text-align:right; }

/* ── Back button (in detail panel) ── */
.pd-back-btn {
  display:flex; align-items:center; gap:8px;
  padding:12px 16px; margin-bottom:12px;
  cursor:pointer; color:var(--acc);
  font-family:var(--fd); font-size:13px; font-weight:600;
  transition:opacity 0.2s; border-bottom:1px solid var(--brd);
}
.pd-back-btn:hover { opacity:0.7; }
.pd-back-btn .material-symbols-outlined { font-size:18px; }

/* ── Inline editable facture rows ── */
.pd-frow {
  padding:14px 16px; border:1px solid var(--brd); border-radius:4px;
  margin-bottom:10px; transition:border-color 0.2s;
}
.pd-frow:hover { border-color:var(--acc); }
.pd-frow-main {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;
}
.pd-frow-link {
  font-family:var(--fd); font-size:14px; font-weight:700;
  color:var(--acc); cursor:pointer; text-decoration:none; transition:opacity 0.2s;
}
.pd-frow-link:hover { opacity:0.7; }
.pd-frow-amount {
  font-family:var(--fm); font-size:15px; font-weight:700; color:var(--t1);
}
.pd-frow-controls {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px;
}
.pd-inline-sel {
  padding:4px 6px 4px 10px; border-radius:3px; border:1px solid var(--brd);
  background:var(--bg2); color:var(--t1);
  font-family:var(--fd); font-size:12px; font-weight:600;
  outline:none; cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center;
  transition:border-color 0.2s;
}
.pd-inline-sel:focus { border-color:var(--acc); }
.pd-inline-date {
  padding:4px 8px; border-radius:3px; border:1px solid var(--brd);
  background:var(--bg2); color:var(--t1);
  font-family:var(--fm); font-size:11px; outline:none;
  transition:border-color 0.2s;
}
.pd-inline-date:focus { border-color:var(--acc); }
.pd-frow-info { font-family:var(--f); font-size:12px; font-weight:500; }
.pd-info-green { color:var(--ok); }
.pd-info-blue { color:#3B82F6; }
.pd-info-orange { color:var(--acc); }
.pd-info-red { color:var(--err); }

/* ── Light mode ── */
[data-theme="light"] .tl-evt { box-shadow:0 2px 8px rgba(0,0,0,0.06); }
[data-theme="light"] .pd-empty-card { background:#F3F4F6; }
[data-theme="light"] .pd-kpi-bar { background:rgba(0,0,0,0.06); }
[data-theme="light"] .pd-inline-sel { background:var(--card); }
[data-theme="light"] .pd-inline-date { background:var(--card); }

/* ============================================================
   COLOR THEMES — 6 bi-ton presets
   Appliqués via data-color-theme="<key>" sur <html>
   ============================================================ */
[data-color-theme="sunset"] {
  --acc: #F97316; --accl: #FB923C; --accd: #EA580C;
  --acc-rgb: 249, 115, 22;
  --acc2: #EC4899; --acc2-rgb: 236, 72, 153;
  --accbg: rgba(249, 115, 22, 0.08);
  --accbg2: rgba(249, 115, 22, 0.14);
}
[data-color-theme="ocean"] {
  --acc: #3B82F6; --accl: #60A5FA; --accd: #2563EB;
  --acc-rgb: 59, 130, 246;
  --acc2: #06B6D4; --acc2-rgb: 6, 182, 212;
  --accbg: rgba(59, 130, 246, 0.08);
  --accbg2: rgba(59, 130, 246, 0.14);
}
[data-color-theme="forest"] {
  --acc: #10B981; --accl: #34D399; --accd: #059669;
  --acc-rgb: 16, 185, 129;
  --acc2: #14B8A6; --acc2-rgb: 20, 184, 166;
  --accbg: rgba(16, 185, 129, 0.08);
  --accbg2: rgba(16, 185, 129, 0.14);
}
[data-color-theme="twilight"] {
  --acc: #8B5CF6; --accl: #A78BFA; --accd: #7C3AED;
  --acc-rgb: 139, 92, 246;
  --acc2: #6366F1; --acc2-rgb: 99, 102, 241;
  --accbg: rgba(139, 92, 246, 0.08);
  --accbg2: rgba(139, 92, 246, 0.14);
}
[data-color-theme="ember"] {
  --acc: #EF4444; --accl: #F87171; --accd: #DC2626;
  --acc-rgb: 239, 68, 68;
  --acc2: #F59E0B; --acc2-rgb: 245, 158, 11;
  --accbg: rgba(239, 68, 68, 0.08);
  --accbg2: rgba(239, 68, 68, 0.14);
}
[data-color-theme="graphite"] {
  --acc: #64748B; --accl: #94A3B8; --accd: #475569;
  --acc-rgb: 100, 116, 139;
  --acc2: #94A3B8; --acc2-rgb: 148, 163, 184;
  --accbg: rgba(100, 116, 139, 0.08);
  --accbg2: rgba(100, 116, 139, 0.14);
}
[data-color-theme="steel"] {
  /* Or métallique en primary, bleu gris acier en secondary */
  --acc: #D4AF37; --accl: #E5C55E; --accd: #B3941F;
  --acc-rgb: 212, 175, 55;
  --acc2: #475569; --acc2-rgb: 71, 85, 105;
  --accbg: rgba(212, 175, 55, 0.10);
  --accbg2: rgba(212, 175, 55, 0.16);
}

/* Teinte wallpaper via --wp-tint selon le thème choisi */
body.has-bg-image::after { background: var(--wp-tint, rgba(13,15,26,0.18)) !important; }
[data-theme="light"] body.has-bg-image::after {
  background: var(--wp-tint, rgba(234,230,225,0.08)) !important;
  mix-blend-mode: multiply;
}

/* ─── Picker thèmes bi-ton (popover Personnaliser, non-admin) ─── */
.color-theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 4px;
}
.ct-thumb {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent !important;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
  font-family: var(--f);
}
.ct-thumb:hover {
  border-color: var(--brd);
  background: transparent !important;
}
.ct-thumb.active {
  border-color: transparent !important;
  background:
    linear-gradient(transparent, transparent) padding-box,
    linear-gradient(90deg, var(--ct-c1), var(--ct-c2)) border-box !important;
  box-shadow: none;
}
.ct-swatches { display: flex; gap: 2px; align-items: center; justify-content: center; }
.ct-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.ct-name {
  font-size: 8px;
  font-weight: 700;
  color: var(--t2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ct-thumb.active .ct-name { color: var(--t1); }
.ct-check {
  position: absolute;
  top: 2px; right: 2px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ct-c1), var(--ct-c2));
  display: none;
}
.ct-thumb.active .ct-check { display: block; }

/* Popover Personnaliser : aucun effet de retournement/scale/rotate
   sur ses boutons enfants — style cohérent avec le reste de l'app */
.theme-popover button:hover,
.theme-popover button:focus,
.theme-popover label:hover,
.theme-popover .wp-thumb:hover,
.theme-popover .ct-thumb:hover,
.theme-popover .wp-upload-btn:hover {
  transform: none !important;
  animation: none !important;
}
.theme-popover button:hover i,
.theme-popover button:hover .hgi-stroke,
.theme-popover label:hover i,
.theme-popover .wp-upload-btn:hover i {
  transform: none !important;
  animation: none !important;
}

/* ============================================================
   THEME SWITCH — Soleil/Lune design
   ============================================================ */
.theme-switch {
  position: relative;
  width: 48px;
  height: 26px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  border: 1px solid transparent;
  flex-shrink: 0;
}

[data-theme="light"] .theme-switch {
  background:
    linear-gradient(to bottom, #E2F8FC 0%, #FFE4D0 100%) padding-box,
    linear-gradient(90deg, var(--accl) 0%, var(--acc) 100%) border-box;
  box-shadow:
    0 0 0 2px rgba(var(--acc-rgb), 0.08),
    0 1px 6px rgba(0,0,0,0.08),
    inset 0 1px 1px rgba(255,255,255,0.5);
}

[data-theme="dark"] .theme-switch {
  background:
    linear-gradient(to bottom, #0F1228 0%, #1E1B3A 100%) padding-box,
    linear-gradient(90deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05)) border-box;
  box-shadow:
    0 0 0 2px rgba(100,90,200,0.08),
    0 1px 6px rgba(0,0,0,0.3),
    inset 0 1px 1px rgba(255,255,255,0.05);
}

.theme-switch .stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease 0.15s;
}
[data-theme="dark"] .theme-switch .stars { opacity: 1; }
.theme-switch .stars::before,
.theme-switch .stars::after {
  content: '';
  position: absolute;
  width: 2px; height: 2px;
  background: #fff;
  border-radius: 50%;
  box-shadow:
    8px 6px 0 rgba(255,255,255,0.6),
    16px -4px 0 rgba(255,255,255,0.4),
    24px 8px 0 rgba(255,255,255,0.7),
    32px 2px 0 rgba(255,255,255,0.5);
}
.theme-switch .stars::before { top: 5px; left: 7px; width: 2px; height: 2px; box-shadow: 6px 5px 0 rgba(255,255,255,0.6), 13px -2px 0 rgba(255,255,255,0.5); }
.theme-switch .stars::after {
  top: 14px; left: 10px; width: 2px; height: 2px;
  box-shadow: 5px -2px 0 rgba(255,255,255,0.5), 10px 3px 0 rgba(255,255,255,0.6);
}

.theme-switch .knob {
  position: absolute;
  top: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

[data-theme="light"] .theme-switch .knob {
  left: 3px;
  background: radial-gradient(circle at 30% 30%, #FFF8DC 0%, #FFD47A 50%, #FFA347 100%);
  box-shadow:
    0 0 8px rgba(255,178,110,0.6),
    0 0 16px rgba(255,178,110,0.3),
    inset 0 -1px 2px rgba(255,100,50,0.3);
}
[data-theme="light"] .theme-switch .knob::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(255,180,100,0.5) 0deg, transparent 20deg,
    rgba(255,180,100,0.5) 45deg, transparent 65deg,
    rgba(255,180,100,0.5) 90deg, transparent 110deg,
    rgba(255,180,100,0.5) 135deg, transparent 155deg,
    rgba(255,180,100,0.5) 180deg, transparent 200deg,
    rgba(255,180,100,0.5) 225deg, transparent 245deg,
    rgba(255,180,100,0.5) 270deg, transparent 290deg,
    rgba(255,180,100,0.5) 315deg, transparent 335deg);
  mask: radial-gradient(circle, transparent 55%, black 60%);
  -webkit-mask: radial-gradient(circle, transparent 55%, black 60%);
  animation: sunRays 12s linear infinite;
}
@keyframes sunRays { to { transform: rotate(360deg); } }

[data-theme="dark"] .theme-switch .knob {
  left: 25px;
  background: radial-gradient(circle at 35% 35%, #F0F2FA 0%, #C8CCE0 60%, #9BA0B8 100%);
  box-shadow:
    0 0 10px rgba(200,200,230,0.4),
    0 1px 3px rgba(0,0,0,0.3),
    inset -1px -1px 3px rgba(100,100,130,0.3);
}
[data-theme="dark"] .theme-switch .knob::after {
  content: '';
  position: absolute;
  top: 4px; left: 9px;
  width: 2.5px; height: 2.5px;
  background: rgba(140,140,165,0.6);
  border-radius: 50%;
  box-shadow:
    -5px 4px 0 -0.5px rgba(140,140,165,0.5),
    -3px -2px 0 -0.5px rgba(140,140,165,0.4);
}

/* ============================================================
   TOPBAR ICON BUTTONS — même style ET taille que le theme-switch
   (fond gradient jour/nuit + bordure prism + glow accent, 22×22)
   ============================================================ */
.topbar-right .topbar-icon-btn,
.topbar-right .header-more-btn,
.topbar-right #themePopoverBtn {
  border: 1px solid transparent !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.3s ease;
  position: relative;
}
.topbar-right .topbar-icon-btn .icon-glass,
.topbar-right .header-more-btn .icon-glass,
.topbar-right #themePopoverBtn .icon-glass {
  width: 16px !important;
  height: 16px !important;
}
/* HugeIcons dans les boutons topbar : taille + couleur + centrage flex
   (pas d'absolute positioning, sinon le hover scale du redesign.css
   écrase le translate et fait "sauter" l'icône hors du cercle) */
.topbar-right .topbar-icon-btn .hgi-stroke,
.topbar-right .header-more-btn .hgi-stroke,
.topbar-right #themePopoverBtn .hgi-stroke {
  font-size: 16px !important;
  line-height: 1 !important;
  display: block !important;
  vertical-align: middle !important;
  margin: 0 !important;
  text-align: center !important;
  width: 100% !important;
}
.topbar-right .topbar-icon-btn .hgi-stroke::before,
.topbar-right .header-more-btn .hgi-stroke::before,
.topbar-right #themePopoverBtn .hgi-stroke::before {
  display: inline-block !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* Annule le scale 1.15 hover de redesign.css → trop agressif et
   incompatible avec le lift translateY(-1px) du bouton */
.topbar-right .topbar-icon-btn:hover .hgi-stroke,
.topbar-right .header-more-btn:hover .hgi-stroke,
.topbar-right #themePopoverBtn:hover .hgi-stroke,
.topbar-right .topbar-icon-btn:active .hgi-stroke,
.topbar-right .header-more-btn:active .hgi-stroke,
.topbar-right #themePopoverBtn:active .hgi-stroke {
  transform: none !important;
}

/* Wrapper div autour du themePopoverBtn : hauteur alignée sur les
   autres boutons pour que le trio toggle + gear + more soit à la
   même ligne de base flex */
.topbar-right > div:has(#themePopoverBtn) {
  display: inline-flex !important;
  align-items: center !important;
  height: 22px !important;
}

/* Style aligné sur .user-badge (theme.css:709) : transparent glass,
   backdrop-filter blur, border subtile */
[data-theme="light"] .topbar-right .topbar-icon-btn,
[data-theme="light"] .topbar-right .header-more-btn,
[data-theme="light"] .topbar-right #themePopoverBtn {
  background: rgba(0,0,0,0.02) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .topbar-right .topbar-icon-btn,
[data-theme="dark"] .topbar-right .header-more-btn,
[data-theme="dark"] .topbar-right #themePopoverBtn {
  background: rgba(255,255,255,0.02) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid var(--brd) !important;
  box-shadow: none !important;
}

/* Hover discret : bordure accent légère (comme user-badge:hover) */
.topbar-right .topbar-icon-btn:hover,
.topbar-right .header-more-btn:hover,
.topbar-right #themePopoverBtn:hover {
  transform: none !important;
  border-color: rgba(var(--acc-rgb), 0.25) !important;
}

/* Icônes internes : bleu nuit en light, blanc 85% en dark pour lisibilité
   (couvre à la fois les anciens .icon-glass SVG et les nouveaux .hgi-stroke) */
[data-theme="light"] .topbar-right .topbar-icon-btn .icon-glass,
[data-theme="light"] .topbar-right .header-more-btn .icon-glass,
[data-theme="light"] .topbar-right #themePopoverBtn .icon-glass {
  filter: brightness(0) saturate(100%) invert(22%) sepia(30%) saturate(900%) hue-rotate(180deg);
}
[data-theme="dark"] .topbar-right .topbar-icon-btn .icon-glass,
[data-theme="dark"] .topbar-right .header-more-btn .icon-glass,
[data-theme="dark"] .topbar-right #themePopoverBtn .icon-glass {
  filter: brightness(0) invert(1) opacity(0.85);
}
[data-theme="light"] .topbar-right .topbar-icon-btn .hgi-stroke,
[data-theme="light"] .topbar-right .header-more-btn .hgi-stroke,
[data-theme="light"] .topbar-right #themePopoverBtn .hgi-stroke {
  color: #1E2A47 !important;
}
[data-theme="dark"] .topbar-right .topbar-icon-btn .hgi-stroke,
[data-theme="dark"] .topbar-right .header-more-btn .hgi-stroke,
[data-theme="dark"] .topbar-right #themePopoverBtn .hgi-stroke {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ============================================================
   TRESO FILTER BAR — boutons au style theme-switch
   ============================================================ */
/* Marge verticale + horizontale sur la barre + son container actions
   pour laisser respirer le lift au hover (translateY -1px + shadow
   spread 10px) et éviter que les boutons touchent les bords */
.treso-filter-bar {
  padding: 14px 20px !important;
}
.treso-filter-bar,
.treso-filter-bar .treso-filter-actions {
  overflow: visible !important;
}
.treso-filter-bar .treso-filter-actions {
  padding-right: 6px !important;
}
.treso-filter-bar .btn-secondary-strato,
.treso-filter-bar a.btn-secondary-strato,
.treso-filter-bar button.btn-secondary-strato {
  border: 1px solid transparent !important;
  transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.3s ease !important;
  position: relative;
  /* Hauteur et padding légèrement plus aérés */
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 18px !important;
  margin: 4px 0 !important; /* room pour le lift au hover sans clip */
  font-size: 12px !important;
  line-height: 1 !important;
  border-radius: 100px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}
.treso-filter-bar .btn-secondary-strato i,
.treso-filter-bar .btn-secondary-strato .hgi-stroke {
  font-size: 13px !important;
  margin: 0 !important;
}

[data-theme="light"] .treso-filter-bar .btn-secondary-strato {
  background:
    linear-gradient(to bottom, #E2F8FC 0%, #FFE4D0 100%) padding-box,
    linear-gradient(135deg, var(--accl) 0%, var(--acc) 100%) border-box !important;
  color: #1E2A47 !important;
  box-shadow:
    0 0 0 2px rgba(var(--acc-rgb), 0.08),
    0 1px 6px rgba(0,0,0,0.08),
    inset 0 1px 1px rgba(255,255,255,0.5) !important;
}

[data-theme="dark"] .treso-filter-bar .btn-secondary-strato {
  background:
    linear-gradient(to bottom, #0F1228 0%, #1E1B3A 100%) padding-box,
    linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05)) border-box !important;
  color: rgba(255,255,255,0.92) !important;
  box-shadow:
    0 0 0 2px rgba(100,90,200,0.08),
    0 1px 6px rgba(0,0,0,0.3),
    inset 0 1px 1px rgba(255,255,255,0.05) !important;
}

/* Hover : lift -1px + halo renforcé */
.treso-filter-bar .btn-secondary-strato:hover {
  transform: translateY(-1px) !important;
}
[data-theme="light"] .treso-filter-bar .btn-secondary-strato:hover {
  background:
    linear-gradient(to bottom, #D5F1F8 0%, #FFD6B8 100%) padding-box,
    linear-gradient(135deg, var(--accl) 0%, var(--acc) 100%) border-box !important;
  box-shadow:
    0 0 0 3px rgba(var(--acc-rgb), 0.14),
    0 3px 10px rgba(var(--acc-rgb), 0.18),
    inset 0 1px 1px rgba(255,255,255,0.55) !important;
}
[data-theme="dark"] .treso-filter-bar .btn-secondary-strato:hover {
  background:
    linear-gradient(to bottom, #151833 0%, #2A2448 100%) padding-box,
    linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0.08)) border-box !important;
  box-shadow:
    0 0 0 3px rgba(var(--acc-rgb), 0.18),
    0 3px 10px rgba(var(--acc-rgb), 0.22),
    inset 0 1px 1px rgba(255,255,255,0.08) !important;
}

/* Icônes à l'intérieur : teintées comme dans la topbar */
[data-theme="light"] .treso-filter-bar .btn-secondary-strato .hgi-stroke,
[data-theme="light"] .treso-filter-bar .btn-secondary-strato i {
  color: #1E2A47 !important;
}
[data-theme="dark"] .treso-filter-bar .btn-secondary-strato .hgi-stroke,
[data-theme="dark"] .treso-filter-bar .btn-secondary-strato i {
  color: rgba(255,255,255,0.9) !important;
}

/* ============================================================
   SIDEBAR ACTIVE — dot pulsant + pas de fond glow
   ============================================================ */
.sidebar-item.active {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.sidebar-item.active::before,
.sidebar-item.active::after {
  display: none !important;
}

.sidebar-item .active-dot {
  margin-left: auto;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--acc);
  position: relative;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.sidebar-item.active .active-dot {
  opacity: 1;
  box-shadow: 0 0 6px var(--acc), 0 0 3px var(--acc);
}

.sidebar-item.active .badge { display: none; }

.sidebar-item.active .active-dot::before,
.sidebar-item.active .active-dot::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--acc);
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  animation: pulseRing 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
  will-change: transform, opacity;
}
.sidebar-item.active .active-dot::after {
  animation-delay: 1.2s;
}
@keyframes pulseRing {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
  15% {
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) scale(4);
    opacity: 0;
  }
}

.sidebar.collapsed .active-dot {
  display: none;
}

/* ============================================================
   SATOSHI TYPOGRAPHY — Ajustements de poids globaux
   ============================================================ */
body {
  font-weight: 400;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Titres principaux : Satoshi 500 (pas 700, trop lourd) */
h1, h2, h3, h4,
.page-header h1,
h1.page-title,
.pd-head-name,
.welcome-banner h1,
.welcome-title,
.main-title,
.card-title,
.card-head .card-title,
.modal-header h2,
.htmx-modal-panel .modal-header h2,
.pd-invoices-title,
.pd-factures-title {
  font-family: var(--fd) !important;
  font-weight: 500;
  letter-spacing: -0.015em;
}

/* Sidebar : Satoshi 500 pour labels */
.sidebar-item,
.sidebar-item-text,
.nav-group-header,
.sidebar-section-title,
.logo-text {
  font-family: var(--f) !important;
}
.sidebar-item {
  font-weight: 500;
}
.sidebar-section-title,
.nav-group-header {
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* Boutons : Satoshi 500 */
.btn,
.btn-primary,
.btn-secondary,
.btn-primary-strato,
.btn-secondary-strato,
.btn-strato,
.pd-btn-facture,
.profil-btn-save,
.sd-btn-apply,
button[type="submit"] {
  font-family: var(--f) !important;
  font-weight: 500;
  letter-spacing: 0;
}

/* Inputs : Satoshi 400 */
input, select, textarea,
.input, .form-control, .input-strato, .select-strato, .textarea-strato,
.fnp-input {
  font-family: var(--f) !important;
  font-weight: 400;
}

/* Labels de formulaire : Satoshi 500 */
label,
.form-label,
.field-label,
.profil-label {
  font-family: var(--f) !important;
  font-weight: 500;
}

/* Body paragraphs : Satoshi 400, line-height généreux */
p, .text, .body-text {
  font-family: var(--f) !important;
  font-weight: 400;
  line-height: 1.6;
}

/* Tables : Satoshi 400 / 500 headers */
table th,
.table-strato thead th,
.projects-table th,
.pd-factures-table thead th {
  font-family: var(--f) !important;
  font-weight: 600;
  letter-spacing: 0.06em;
}
table td,
.table-strato tbody td,
.projects-table td,
.pd-factures-table tbody td {
  font-family: var(--f) !important;
  font-weight: 400;
}

/* Status badges / pills : Satoshi 500 */
.status-badge,
.badge,
.badge-pill,
.pd-f-badge,
.phase-badge,
.priorite-badge,
.client-badge,
.status-dropdown-item .status-name {
  font-family: var(--f) !important;
  font-weight: 500;
  letter-spacing: 0;
}

/* Tabs : Satoshi 500 */
.tab,
.tab-btn,
.filter-tab,
.seg-tab,
.global-tab,
.tpl-tab,
.folder-tab,
.pd-tab {
  font-family: var(--f) !important;
  font-weight: 500;
}

/* Toasts & notifications : Satoshi 500 */
.toast-notification,
.flash-message,
.alert {
  font-family: var(--f) !important;
  font-weight: 500;
}

/* Topbar : Satoshi 500 */
.topbar-breadcrumb,
.user-badge,
.user-name,
.breadcrumb,
.bc-link,
.bc-current {
  font-family: var(--f) !important;
  font-weight: 500;
}

/* KPI labels (petits uppercase) : Satoshi 600, tracking large */
.kpi-label,
.kpi-card-label,
.pd-kpi-label,
.pd-kpis-label,
.section-label {
  font-family: var(--f) !important;
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* Espace Mono PRÉSERVÉ pour les données numériques */
.kpi-value,
.kpi-card-value,
.kpi-val,
.pd-kpi-value,
.amount,
.montant,
.total,
.prix,
.donut-val,
.recap-amt-val,
.recap-stat-count,
.recap-progress-pct,
.folder-total,
.folder-count,
.hex,
.tpl-hex-input,
.tpl-num-input,
.typo-size-input,
td[class*="amount"],
td[class*="montant"],
.time-cumul,
.pd-f-date,
.topbar-timer .timer-display {
  font-family: var(--fm) !important;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   MOBILE REFINEMENT — Edge-to-edge + no blur + cards compactes
   ============================================================ */
@media (max-width: 768px) {

  /* APP CONTAINER : edge-to-edge */
  .app-container {
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    gap: 0 !important;
  }

  /* CONTENT FRAME : coins droits */
  .content-frame {
    border-radius: 0 !important;
    border: none !important;
  }
  .content-frame > .content {
    padding: 68px 16px 32px !important;
  }

  /* TOPBAR : edge-to-edge */
  .topbar {
    border-radius: 0 !important;
    padding: 14px 16px !important;
    height: 56px !important;
    border-bottom: 1px solid var(--brd) !important;
  }

  /* SIDEBAR : coins droits */
  .sidebar {
    border-radius: 0 !important;
    border: none !important;
    border-right: 1px solid var(--brd) !important;
  }

  /* ZERO BACKDROP-FILTER */
  .content-frame,
  .sidebar,
  .topbar,
  .topbar.scrolled,
  .card-strato,
  .card,
  .kpi-card,
  .htmx-modal-panel,
  .modal,
  .header-dropdown,
  .notif-panel,
  .theme-popover,
  .cmd-box,
  .ctx-menu-dropdown,
  .filter-cascade-menu,
  .status-dropdown-menu,
  .detail-sidebar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Fonds opaques */
  [data-theme="dark"] .content-frame {
    background: #111317 !important;
  }
  [data-theme="dark"] .topbar,
  [data-theme="dark"] .topbar.scrolled {
    background: rgba(17, 19, 23, 0.98) !important;
  }
  [data-theme="dark"] .sidebar {
    background: #0d0f14 !important;
  }
  [data-theme="light"] .content-frame {
    background: #F3F0ED !important;
  }
  [data-theme="light"] .topbar,
  [data-theme="light"] .topbar.scrolled {
    background: rgba(243, 240, 237, 0.98) !important;
  }
  [data-theme="light"] .sidebar {
    background: #F0EDEA !important;
  }

  /* Titres mobile */
  .page-header h1,
  h1.page-title,
  .main-title {
    font-size: 24px !important;
    margin-bottom: 4px !important;
    line-height: 1.2 !important;
  }

  /* KPI CARDS */
  .kpi-grid,
  .kpi-g,
  .pd-kpis {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
    border: none !important;
  }

  .pd-kpis .pd-kpi {
    border: 1px solid var(--brd) !important;
    border-radius: 14px !important;
    background: var(--card) !important;
    padding: 16px 18px !important;
  }

  .kpi-card {
    padding: 16px 20px !important;
    min-height: auto !important;
    height: auto !important;
    border-radius: 14px !important;
    position: relative;
    overflow: hidden;
  }

  /* Masque icônes décoratives */
  .kpi-card .kpi-icon-circle,
  .kpi-card .kpi-bg-icon,
  .kpi-card > .material-symbols-outlined:not(.kpi-inline-icon),
  .kpi-card img.kpi-decorative {
    display: none !important;
  }

  .kpi-card .kpi-card-inner,
  .kpi-card .kpi-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    align-items: flex-start !important;
  }

  .kpi-card .kpi-value,
  .kpi-card .kpi-card-value,
  .kpi-card .kpi-val,
  .pd-kpi-value {
    font-size: 28px !important;
    font-weight: 500 !important;
    letter-spacing: -0.03em !important;
    color: var(--t1) !important;
    line-height: 1.1 !important;
  }

  .kpi-card .kpi-label,
  .kpi-card .kpi-card-label,
  .pd-kpi-label {
    font-size: 10px !important;
    color: var(--t3) !important;
    line-height: 1.4 !important;
  }

  .kpi-card .kpi-sub,
  .kpi-card .kpi-detail,
  .kpi-card .kpi-context,
  .pd-kpi-sub {
    font-size: 11px !important;
    color: var(--t2) !important;
    margin-top: 2px !important;
    line-height: 1.5 !important;
  }

  /* CARDS générales */
  .card-strato,
  .card {
    border-radius: 14px !important;
    padding: 16px 18px !important;
    margin-bottom: 12px !important;
  }

  /* Scrollbar invisible */
  .content-frame > .content::-webkit-scrollbar {
    display: none !important;
  }
  .content-frame > .content {
    scrollbar-width: none !important;
  }

  /* Boutons : touch 44px */
  .btn,
  .btn-primary,
  .btn-primary-strato,
  .btn-secondary,
  .btn-secondary-strato,
  button[type="submit"] {
    min-height: 44px !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
  }

  /* Inputs : 16px min (anti-zoom iOS) */
  input, select, textarea,
  .input, .form-control, .input-strato {
    font-size: 16px !important;
    min-height: 44px !important;
    border-radius: 8px !important;
  }
}

@media (max-width: 380px) {
  .content-frame > .content {
    padding: 60px 14px 28px !important;
  }
  .kpi-card .kpi-value,
  .kpi-card .kpi-val,
  .pd-kpi-value {
    font-size: 26px !important;
  }
  .page-header h1,
  h1.page-title,
  .main-title {
    font-size: 22px !important;
  }
  .card-strato,
  .card {
    padding: 14px 16px !important;
  }
}

/* ============================================================
   GLASS DIAGONAL LIGHTING — Effet contour diagonal premium
   Highlight haut-gauche net + bas-droit subtil
   ============================================================ */

.card-strato,
.strato-card,
.card,
.kpi-card,
.kpi,
.glass-card,
.cht-card,
.nf-card,
.tpl-card,
.sub-card,
.user-card,
.htmx-modal-panel {
  position: relative;
  isolation: isolate;
}

/* Bordure dégradée diagonale via mask composite */
.card-strato::before,
.strato-card::before,
.card:not(.card-no-glass)::before,
.kpi-card::before,
.kpi::before,
.glass-card::before,
.cht-card::before,
.nf-card::before,
.tpl-card::before,
.sub-card::before,
.user-card::before,
.htmx-modal-panel::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;

  padding: 1.5px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.08) 30%,
    transparent 50%,
    rgba(255, 255, 255, 0.04) 75%,
    rgba(255, 255, 255, 0.18) 100%
  );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

/* Glows radiaux internes : haut-gauche fort + bas-droit subtil */
.card-strato::after,
.strato-card::after,
.card:not(.card-no-glass)::after,
.kpi-card::after,
.kpi::after,
.glass-card::after,
.cht-card::after,
.nf-card::after,
.tpl-card::after,
.sub-card::after,
.user-card::after,
.htmx-modal-panel::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;

  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(255, 255, 255, 0.10) 0%,
      transparent 35%
    ),
    radial-gradient(
      circle at 100% 100%,
      rgba(255, 255, 255, 0.05) 0%,
      transparent 35%
    );
}

/* Contenu interne au-dessus des pseudos */
.card-strato > *,
.strato-card > *,
.card > *,
.kpi-card > *,
.kpi > *,
.glass-card > *,
.cht-card > *,
.nf-card > *,
.tpl-card > *,
.sub-card > *,
.user-card > *,
.htmx-modal-panel > * {
  position: relative;
  z-index: 2;
}

/* DARK MODE : highlights blancs francs */
[data-theme="dark"] .card-strato::before,
[data-theme="dark"] .strato-card::before,
[data-theme="dark"] .card:not(.card-no-glass)::before,
[data-theme="dark"] .kpi-card::before,
[data-theme="dark"] .kpi::before,
[data-theme="dark"] .glass-card::before,
[data-theme="dark"] .cht-card::before,
[data-theme="dark"] .nf-card::before,
[data-theme="dark"] .tpl-card::before,
[data-theme="dark"] .sub-card::before,
[data-theme="dark"] .user-card::before,
[data-theme="dark"] .htmx-modal-panel::before {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.40) 0%,
    rgba(255, 255, 255, 0.10) 30%,
    transparent 50%,
    rgba(255, 255, 255, 0.05) 75%,
    rgba(255, 255, 255, 0.22) 100%
  );
}

[data-theme="dark"] .card-strato::after,
[data-theme="dark"] .strato-card::after,
[data-theme="dark"] .card:not(.card-no-glass)::after,
[data-theme="dark"] .kpi-card::after,
[data-theme="dark"] .kpi::after,
[data-theme="dark"] .glass-card::after,
[data-theme="dark"] .cht-card::after,
[data-theme="dark"] .nf-card::after,
[data-theme="dark"] .tpl-card::after,
[data-theme="dark"] .sub-card::after,
[data-theme="dark"] .user-card::after,
[data-theme="dark"] .htmx-modal-panel::after {
  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(255, 255, 255, 0.12) 0%,
      transparent 38%
    ),
    radial-gradient(
      circle at 100% 100%,
      rgba(255, 255, 255, 0.06) 0%,
      transparent 38%
    );
}

/* LIGHT MODE : highlights plus subtils, pas de saturation excessive */
[data-theme="light"] .card-strato::before,
[data-theme="light"] .strato-card::before,
[data-theme="light"] .card:not(.card-no-glass)::before,
[data-theme="light"] .kpi-card::before,
[data-theme="light"] .kpi::before,
[data-theme="light"] .glass-card::before,
[data-theme="light"] .cht-card::before,
[data-theme="light"] .nf-card::before,
[data-theme="light"] .tpl-card::before,
[data-theme="light"] .sub-card::before,
[data-theme="light"] .user-card::before,
[data-theme="light"] .htmx-modal-panel::before {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.30) 25%,
    rgba(0, 0, 0, 0.04) 50%,
    rgba(0, 0, 0, 0.02) 75%,
    rgba(255, 255, 255, 0.50) 100%
  );
}

[data-theme="light"] .card-strato::after,
[data-theme="light"] .strato-card::after,
[data-theme="light"] .card:not(.card-no-glass)::after,
[data-theme="light"] .kpi-card::after,
[data-theme="light"] .kpi::after,
[data-theme="light"] .glass-card::after,
[data-theme="light"] .cht-card::after,
[data-theme="light"] .nf-card::after,
[data-theme="light"] .tpl-card::after,
[data-theme="light"] .sub-card::after,
[data-theme="light"] .user-card::after,
[data-theme="light"] .htmx-modal-panel::after {
  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(255, 255, 255, 0.30) 0%,
      transparent 32%
    ),
    radial-gradient(
      circle at 100% 100%,
      rgba(255, 255, 255, 0.18) 0%,
      transparent 32%
    );
}

/* Hover : intensification légère */
.card-strato:hover::before,
.strato-card:hover::before,
.card:not(.card-no-glass):hover::before,
.kpi-card:hover::before,
.kpi:hover::before,
.glass-card:hover::before,
.cht-card:hover::before,
.nf-card:hover::before,
.tpl-card:hover::before,
.sub-card:hover::before,
.user-card:hover::before {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.50) 0%,
    rgba(255, 255, 255, 0.12) 30%,
    transparent 50%,
    rgba(255, 255, 255, 0.06) 75%,
    rgba(255, 255, 255, 0.28) 100%
  );
  transition: background 0.4s ease;
}

[data-theme="light"] .card-strato:hover::before,
[data-theme="light"] .strato-card:hover::before,
[data-theme="light"] .card:not(.card-no-glass):hover::before,
[data-theme="light"] .kpi-card:hover::before,
[data-theme="light"] .kpi:hover::before,
[data-theme="light"] .glass-card:hover::before,
[data-theme="light"] .cht-card:hover::before,
[data-theme="light"] .nf-card:hover::before,
[data-theme="light"] .tpl-card:hover::before,
[data-theme="light"] .sub-card:hover::before,
[data-theme="light"] .user-card:hover::before {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.40) 25%,
    rgba(0, 0, 0, 0.04) 50%,
    rgba(0, 0, 0, 0.02) 75%,
    rgba(255, 255, 255, 0.65) 100%
  );
}

/* MOBILE : désactivé pour performance + sensation native */
@media (max-width: 768px) {
  .card-strato::before,
  .strato-card::before,
  .card:not(.card-no-glass)::before,
  .kpi-card::before,
  .kpi::before,
  .glass-card::before,
  .cht-card::before,
  .nf-card::before,
  .tpl-card::before,
  .sub-card::before,
  .user-card::before,
  .htmx-modal-panel::before,
  .card-strato::after,
  .strato-card::after,
  .card:not(.card-no-glass)::after,
  .kpi-card::after,
  .kpi::after,
  .glass-card::after,
  .cht-card::after,
  .nf-card::after,
  .tpl-card::after,
  .sub-card::after,
  .user-card::after,
  .htmx-modal-panel::after {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FORCE TEXT/ICON GRAYS UNIFIES — #f6f6f6 (demande user)
   Tous les textes et icones gris en dark mode = exactement #f6f6f6.
   --t1 reste #ffffff pour preserver la hierarchie titres vs corps.
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-secondary,
[data-theme="dark"] .text-tertiary,
[data-theme="dark"] [class*="text-gray-"],
[data-theme="dark"] [class*="text-slate-"],
[data-theme="dark"] [class*="text-neutral-"],
[data-theme="dark"] .hint,
[data-theme="dark"] .help-text,
[data-theme="dark"] .help,
[data-theme="dark"] .subtitle,
[data-theme="dark"] .sub-label,
[data-theme="dark"] .field-hint,
[data-theme="dark"] .form-hint,
[data-theme="dark"] .field-label,
[data-theme="dark"] .form-label,
[data-theme="dark"] .menu-desc,
[data-theme="dark"] .dropdown-desc,
[data-theme="dark"] .hd-item-desc,
[data-theme="dark"] .nav-item-desc,
[data-theme="dark"] .timestamp,
[data-theme="dark"] .date,
[data-theme="dark"] .muted,
[data-theme="dark"] [data-muted],
[data-theme="dark"] small,
[data-theme="dark"] .small,
[data-theme="dark"] .text-xs,
[data-theme="dark"] .placeholder,
[data-theme="dark"] ::placeholder,
[data-theme="dark"] .pdfd-zone-subtitle,
[data-theme="dark"] .pdfd-sub-label,
[data-theme="dark"] .pdfd-tb-label,
[data-theme="dark"] .pdfd-drop-hint,
[data-theme="dark"] .pdfd-radio,
[data-theme="dark"] .pdfd-check,
[data-theme="dark"] .pdfd-tpl-card,
[data-theme="dark"] .pdfd-back,
[data-theme="dark"] .pdfd-drawer-intro,
[data-theme="dark"] .pdfd-preview-label,
[data-theme="dark"] .pdfd-slider-row label,
[data-theme="dark"] .pdfd-slider-val,
[data-theme="dark"] .nav-group-label,
[data-theme="dark"] .sidebar-item-desc,
[data-theme="dark"] .header-meta-label,
[data-theme="dark"] .modal-subtitle,
[data-theme="dark"] .design-modal-subtitle,
[data-theme="dark"] .pdfd-title-block .pdfd-subtitle,
[data-theme="dark"] .table-empty,
[data-theme="dark"] .empty-state,
[data-theme="dark"] .empty-text,
[data-theme="dark"] .pd-meta-label,
[data-theme="dark"] .breadcrumb,
[data-theme="dark"] .breadcrumb a,
[data-theme="dark"] .table-hint,
[data-theme="dark"] .stat-label,
[data-theme="dark"] .kpi-label {
  color: #f6f6f6 !important;
}

/* Icones gris : currentColor herite du parent (deja #f6f6f6) mais on
   force aussi les icones avec couleur gris explicite */
[data-theme="dark"] i[class*="hgi-"],
[data-theme="dark"] .icon-muted,
[data-theme="dark"] .icon-secondary {
  /* heritage parent par defaut, mais si une regle plus specifique a
     une couleur grise explicite, on la neutralise via les selecteurs
     ci-dessus. Les icones colorees (status, accent) restent inchangees
     car elles utilisent var(--ok), var(--err), var(--acc), etc. */
}

/* Override variables --text-secondary et --text-muted en dark
   pour les composants legacy qui les utilisent */
[data-theme="dark"] {
  --text-secondary: #f6f6f6;
  --text-muted: #f6f6f6;
}