/* ============================================
   Sora-Inspired Dark Mode Redesign
   BASE_CO Application Stylesheet
   ============================================ */

:root {
  /* Primary Dark Theme */
  --bg-primary: #0a0a0f;
  --bg-secondary: #14141b;
  --bg-tertiary: #1c1c26;
  --bg-hover: #242430;

  /* Text Colors */
  --text-primary: #e8e8ee;
  --text-secondary: #a0a0b0;
  --text-tertiary: #707080;
  --text-inverse: #0a0a0f;

  /* Borders */
  --border-subtle: #28283a;
  --border-default: #35354a;
  --border-emphasis: #45455a;

  /* Accent Colors */
  --accent-primary: #00d9ff;
  --accent-glow: rgba(0, 217, 255, 0.15);

  /* Status Colors */
  --success: #10b981;
  --success-bg: rgba(16, 185, 129, 0.1);
  --warning: #f59e0b;
  --warning-bg: rgba(245, 158, 11, 0.1);
  --danger: #ef4444;
  --danger-bg: rgba(239, 68, 68, 0.1);
  --info: #3b82f6;
  --info-bg: rgba(59, 130, 246, 0.1);

  /* Glass/Glassmorphism */
  --glass-bg: rgba(20, 20, 27, 0.8);
  --glass-border: rgba(255, 255, 255, 0.06);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* Backward compatibility aliases */
  --primary-color: var(--accent-primary);
  --secondary-color: var(--text-secondary);
  --success-color: var(--success);
  --danger-color: var(--danger);
  --warning-color: var(--warning);
  --light-bg: var(--bg-primary);
  --border-color: var(--border-default);
  --surface-color: var(--bg-secondary);
}

/* ============================================
   Light Mode Theme Override
   ============================================ */
[data-theme="light"] {
  --bg-primary: #f5f6fa;
  --bg-secondary: #ffffff;
  --bg-tertiary: #eef0f4;
  --bg-hover: #e4e6ed;

  --text-primary: #1a1a2e;
  --text-secondary: #5a5a6e;
  --text-tertiary: #8a8a9a;
  --text-inverse: #ffffff;

  --border-subtle: #e0e2ea;
  --border-default: #d0d2da;
  --border-emphasis: #b8bac5;

  --accent-primary: #0099cc;
  --accent-glow: rgba(0, 153, 204, 0.12);

  --success: #059669;
  --success-bg: rgba(5, 150, 105, 0.1);
  --warning: #d97706;
  --warning-bg: rgba(217, 119, 6, 0.1);
  --danger: #dc2626;
  --danger-bg: rgba(220, 38, 38, 0.1);
  --info: #2563eb;
  --info-bg: rgba(37, 99, 235, 0.1);

  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(0, 0, 0, 0.08);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.12);

  --primary-color: var(--accent-primary);
  --secondary-color: var(--text-secondary);
  --success-color: var(--success);
  --danger-color: var(--danger);
  --warning-color: var(--warning);
  --light-bg: var(--bg-primary);
  --border-color: var(--border-default);
  --surface-color: var(--bg-secondary);
}

/* Light mode — stats actions group */
[data-theme="light"] .stats-actions {
  background: rgba(245, 158, 11, 0.04);
  border-color: rgba(245, 158, 11, 0.18);
}

/* Light mode specific overrides */
[data-theme="light"] body {
  background-image:
    radial-gradient(circle at 20% 50%, rgba(0, 153, 204, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(37, 99, 235, 0.04) 0%, transparent 50%);
}

[data-theme="light"] .modal,
[data-theme="light"] .modal-overlay {
  background-color: rgba(100, 116, 139, 0.35);
}

[data-theme="light"] .modal-content {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0,0,0,0.04);
}

[data-theme="light"] .modal-header {
  border-bottom-color: #e2e8f0;
}

[data-theme="light"] .modal-footer {
  border-top-color: #e2e8f0;
}

[data-theme="light"] .modal-body .form-input,
[data-theme="light"] .modal-body textarea.form-input {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #1e293b;
}

[data-theme="light"] .modal-body .form-input:focus,
[data-theme="light"] .modal-body textarea.form-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

[data-theme="light"] .close-modal:hover,
[data-theme="light"] .modal-close:hover {
  background: rgba(239, 68, 68, 0.08);
}

[data-theme="light"] .modal tbody tr:nth-child(odd) {
  background-color: #f8f9fb;
}

[data-theme="light"] .modal tbody tr:nth-child(even) {
  background-color: #ffffff;
}

[data-theme="light"] .modal thead {
  background-color: #eef0f4;
}

[data-theme="light"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%235a5a6e'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
}

[data-theme="light"] .loading-overlay {
  background: rgba(245, 246, 250, 0.8);
}

[data-theme="light"] .sidebar-overlay.active {
  background: rgba(0, 0, 0, 0.3);
}

[data-theme="light"] ::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: var(--border-default);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: var(--border-emphasis);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: var(--bg-primary);
  background-image:
    radial-gradient(circle at 20% 50%, rgba(0, 217, 255, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.05) 0%, transparent 50%);
  color: var(--text-primary);
  line-height: 1.6;
  /* padding-top: 110px supprimé — reliquat d'un ancien .navbar fixe en haut de
     page, remplacé depuis par la sidebar fixe à gauche (.navbar n'est plus
     utilisée dans aucun template). Ce padding gonflait artificiellement la
     hauteur du document au-delà de 100vh -> ascenseur vertical parasite sur
     certaines pages, en plus de l'espace perdu en haut de chaque page. */
}

/* ============================================
   Navigation & Sidebar
   ============================================ */

.navbar {
  background-color: var(--bg-secondary);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  padding: 0.75rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.navbar-brand {
  font-weight: bold;
  color: var(--accent-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 101;
}

.navbar-logo {
  height: 50px;
  width: auto;
  object-fit: contain;
  transition: height 0.3s ease;
}

.navbar-brand-text {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.navbar-title {
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--accent-primary);
}

.navbar-version {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  font-weight: 400;
}

.navbar-menu {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex: 1;
  justify-content: flex-end;
}

.navbar-nav {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.nav-link {
  position: relative;
  text-decoration: none;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.95rem;
  transition: all var(--transition-base);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 80%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-primary), #00a8cc);
  border-radius: 2px;
  transition: transform var(--transition-base);
}

.nav-link:hover {
  color: var(--accent-primary);
  transform: translateY(-2px);
}

.nav-link:hover::after {
  transform: translateX(-50%) scaleX(1);
}

.nav-link.active {
  color: var(--accent-primary);
  font-weight: 600;
}

.nav-link.active::after {
  transform: translateX(-50%) scaleX(1);
  background: var(--accent-primary);
}

.navbar-auth {
  display: flex;
  gap: 0;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-left: 1rem;
  background: var(--bg-tertiary);
}

.navbar-user-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  text-decoration: none;
  color: var(--text-primary);
  transition: all var(--transition-base);
  font-size: 0.9rem;
  white-space: nowrap;
}

.navbar-user-link:first-child {
  border-right: 1px solid var(--border-subtle);
}

.navbar-user-link:hover {
  background: var(--bg-hover);
  color: var(--accent-primary);
  transform: scale(1.02);
}

.user-icon {
  font-size: 1rem;
}

.navbar-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 102;
}

.navbar-toggle span {
  width: 100%;
  height: 3px;
  background-color: var(--text-primary);
  border-radius: 3px;
  transition: all var(--transition-base);
}

/* Sidebar for future implementation */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 221px;
  height: 100vh;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-subtle);
  z-index: 99;
  display: flex;
  flex-direction: column;
  padding-top: 1rem;
  overflow-y: auto;
}

/* Sidebar header (logo + brand) */
.sidebar-header {
  padding: 0.25rem 0.5rem 0.5rem 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 0.5rem;
  flex-shrink: 0;
  position: relative;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.sidebar-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none;
  color: var(--text-primary);
  width: 100%;
}

.sidebar-logo {
  width: 88%;
  max-height: 76px;
  height: auto;
  border-radius: 8px;
  object-fit: contain;
  margin-bottom: 0;
}

/* Logo adaptatif selon le thème */
.sidebar-logo-light { display: none; }
.sidebar-logo-dark  { display: block; }

[data-theme="light"] .sidebar-logo-light { display: block; }
[data-theme="light"] .sidebar-logo-dark  { display: none; }

.sidebar-brand-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.sidebar-subtitle {
  font-size: 0.8rem;
  color: var(--text-tertiary);
  line-height: 1.3;
  max-width: 100%;
  word-wrap: break-word;
}

.sidebar-version {
  font-size: 0.74rem;
  color: var(--text-tertiary);
  font-weight: 500;
  margin-top: 0.15rem;
}

/* Sidebar navigation links */
.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
  overflow-y: auto;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.25rem;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 450;
  border-left: 3px solid transparent;
  transition: all 0.15s;
}
.sidebar-nav-item [data-lucide] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke-width: 1.75;
}
.sidebar-badge {
  background: #ef4444;
  color: white;
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  margin-left: auto;
  line-height: 1.4;
}

/* Badge « New ! » — nouveauté fonctionnelle (durée déterminée, voir
   app/services/nouveaute_service.py), distinct du sidebar-badge rouge
   (alerte/compteur) par sa couleur d'accent. */
.sidebar-badge-new {
  background: var(--accent-primary);
  color: white;
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-left: auto;
  line-height: 1.4;
}

.sidebar-nav-item:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
  border-left-color: var(--border-default);
}

.sidebar-nav-item.active {
  color: var(--accent-primary);
  background: var(--accent-glow);
  border-left-color: var(--accent-primary);
  font-weight: 600;
}

.sidebar-nav-subitem {
  display: block;
  padding: 0.4rem 1.25rem 0.4rem 2.25rem;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.85rem;
  border-left: 2px solid transparent;
  transition: all 0.2s ease;
}

.sidebar-nav-subitem:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
  border-left-color: var(--border-default);
}

.sidebar-nav-subitem.active {
  color: var(--accent-primary);
  background: var(--accent-glow);
  border-left-color: var(--accent-primary);
  font-weight: 600;
}

/* Sidebar footer */
.sidebar-footer {
  border-top: 1px solid var(--border-subtle);
  padding: 0.5rem 0;
  flex-shrink: 0;
}

.sidebar-logout {
  color: var(--danger) !important;
}

.sidebar-logout:hover {
  background: rgba(239, 68, 68, 0.1) !important;
}

/* Mobile sidebar toggle (hamburger) */
.sidebar-toggle {
  display: none;
  position: fixed;
  top: 0.5rem;
  left: 0.75rem;
  z-index: 101;
  width: 40px;
  height: 40px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
}

.sidebar-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: all 0.2s;
}

.sidebar-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.sidebar-toggle.active span:nth-child(2) {
  opacity: 0;
}
.sidebar-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Sidebar overlay (mobile) */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 98;
}

.sidebar-overlay.active {
  display: block;
}

/* Main content */
.main-content {
  margin-left: 221px;
  min-height: 100vh;
  padding: 0.4rem 0.75rem;
  background: var(--bg-primary);
}

/* Mobile: hide sidebar, show toggle, full-width content */
@media (max-width: 768px) {
  .sidebar {
    display: none;
    width: 238px;
  }
  .sidebar.active {
    display: flex;
    height: 100vh;        /* fallback navigateurs anciens */
    height: 100dvh;       /* zone RÉELLEMENT visible (iOS : exclut la barre du navigateur) */
    max-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* La nav ne capture plus le scroll : toute la sidebar défile -> footer
     (Mon Profil, Brochure, Déconnexion) atteignable en bas. */
  .sidebar.active .sidebar-nav {
    flex: 0 0 auto !important;
    overflow-y: visible !important;
  }
  .sidebar.active .sidebar-footer {
    flex-shrink: 0;
  }
  .sidebar-toggle {
    display: flex;
  }
  .main-content {
    margin-left: 0;
    padding: 0.5rem;
    /* Dégage le bouton hamburger fixe (top 0.5rem + 40px = 3rem). 3.1rem =
       juste ce qu'il faut, sans bande vide superflue en haut de CHAQUE page. */
    padding-top: 3.1rem;
  }

  /* ──────────────────────────────────────────────────────────────────────
     GARDE-FOU GLOBAL ANTI-DEBORDEMENT — barres flex sans flex-wrap
     ──────────────────────────────────────────────────────────────────────
     Audit 31/07/2026 (2 captures d'ecran reelles : liste Clients, chiffrage) :
     des conteneurs `style="display:flex; ...">` (barres de filtres/outils)
     oublient `flex-wrap`, donc leurs enfants (select, checkbox+label, boutons)
     debordent hors ecran sur mobile au lieu de passer a la ligne — invisible
     en revue de code statique (aucun test ne peut voir un debordement visuel),
     et il existe surement d'autres cas non repertories qu'une revue manuelle
     ecran par ecran ne rattraperait pas de maniere fiable.
     Plutot que traquer chaque cas un par un, regle DEFENSIVE globale : tout
     conteneur flex INLINE en mode ligne (pas flex-direction:column, qui gere
     deja son propre empilement vertical) sans flex-wrap explicite passe en
     wrap par defaut. Sans risque : au pire un conteneur qui tenait deja sur
     une ligne le reste (rien a wrapper) ; au mieux ca evite un debordement
     jamais remarque. Les conteneurs qui ont deliberement besoin de rester sur
     une seule ligne (ex. onglets a defilement horizontal) utilisent deja
     `overflow-x` ou une classe CSS dediee (pas ce style inline generique),
     donc non concernes. */
  div[style*="display:flex"]:not([style*="flex-wrap"]):not([style*="flex-direction: column"]):not([style*="flex-direction:column"]),
  div[style*="display: flex"]:not([style*="flex-wrap"]):not([style*="flex-direction: column"]):not([style*="flex-direction:column"]) {
    flex-wrap: wrap !important;
  }

  /* ──────────────────────────────────────────────────────────────────────
     GARDE-FOU « grands telephones » (iPhone Pro Max ~430px et +)
     ──────────────────────────────────────────────────────────────────────
     Probleme recurrent : les barres de filtres / formulaires utilisent soit
     un flex-wrap avec un min-width faible (~120px), soit une grille
     auto-fit/auto-fill. Sur un ecran etroit ca tient en 2 colonnes, mais la
     largeur supplementaire d'un Pro Max laisse rentrer une 3e colonne -> les
     champs deviennent trop etroits et le texte des <select> est tronque
     ("Tous Fournisseurs"...). Plutot que corriger chaque ecran au cas par
     cas, on plafonne globalement a 2 colonnes sur mobile.

     Portee volontairement limitee aux CHAMPS de saisie (select / input) :
     un bouton peut rester groupe a 3+, mais un champ texte ne doit jamais
     descendre sous une demi-largeur, sinon son contenu est illisible. */

  /* 1) Conteneurs en flex-wrap (style inline) : chaque champ occupe au moins
        ~45% -> au plus 2 par ligne, quelle que soit la largeur du telephone.
        flex-grow remplit la ligne proprement (un champ seul prend toute la
        largeur). */
  div[style*="flex-wrap"] > select,
  div[style*="flex-wrap"] > input:not([type="checkbox"]):not([type="radio"]) {
    flex: 1 1 45% !important;
    min-width: 45% !important;
  }

  /* 2) Grilles responsives auto-fit / auto-fill (style inline) : on impose
        exactement 2 colonnes au lieu de laisser le navigateur en caser 3. */
  [style*="auto-fit"],
  [style*="auto-fill"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* ── Modales : plein écran et compactes sur mobile (toutes les modales) ── */
  .modal,
  .modal-overlay {
    align-items: flex-start !important;
    padding: 0 !important;
  }
  .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    padding: 0.9rem !important;
    margin: 0 !important;
  }
  .modal-header {
    margin-bottom: 0.9rem;
    padding-bottom: 0.6rem;
  }
  .modal-header h3,
  .modal-title { font-size: 1.05rem; }
  /* Grilles de formulaire -> 1 colonne lisible (évite champs qui se chevauchent) */
  .modal-content .form-grid,
  .modal-content [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Réduire l'espace perdu dans les cartes */
  .card { padding: 1rem; }

  /* Barres d'onglets horizontales -> scrollables (products, chantier, etc.) */
  .section-tabs,
  .tabs-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .section-tabs .tab-button,
  .tabs-container .tab-btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Tableaux larges -> scroll horizontal au lieu de deborder l'ecran */
  .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ============================================
   Main Content & Containers
   ============================================ */

.container {
  max-width: 100%;
  margin: 0.4rem auto 1rem;   /* marge haute réduite : le padding-top de .main-content fait déjà le dégagement */
  padding: 0 0.5rem;
}

.card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  transition: all var(--transition-base);
}

.card:hover {
  border-color: var(--border-default);
  box-shadow: 0 12px 48px rgba(0, 217, 255, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-subtle);
}

/* ── Primitive réutilisable : en-tête d'onglet/section (titre + actions).
   Desktop = ligne ; mobile = colonne empilée (cf. mobile-chiffrage.css).
   .planning-assign-header = alias historique (chantier). ── */
.tab-toolbar,
.planning-assign-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.tab-toolbar-actions,
.planning-assign-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.card-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
}

.quote-logo {
  height: 60px;
  width: auto;
  object-fit: contain;
}

/* ============================================
   Buttons
   ============================================ */

.btn {
  padding: 0.5rem 1.25rem;
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-base);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-primary {
  background-color: var(--accent-primary);
  color: var(--text-inverse);
  box-shadow: 0 0 20px var(--accent-glow);
}

.btn-primary:hover {
  background-color: #00a8cc;
  transform: translateY(-1px);
  box-shadow: 0 0 32px var(--accent-glow);
}

.btn-success {
  background-color: var(--success);
  color: white;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
}

.btn-success:hover {
  background-color: #059669;
  transform: translateY(-1px);
  box-shadow: 0 0 32px rgba(16, 185, 129, 0.3);
}

.btn-danger {
  background-color: var(--danger);
  color: white;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
}

.btn-danger:hover {
  background-color: #dc2626;
  transform: translateY(-1px);
  box-shadow: 0 0 32px rgba(239, 68, 68, 0.3);
}

.btn-secondary {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
}

.btn-secondary:hover {
  background-color: var(--bg-hover);
  border-color: var(--border-emphasis);
  transform: translateY(-1px);
}

.btn-icon-dl {
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

.btn-icon-dl:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-emphasis);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
}

.btn-outline:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.btn-icon {
  padding: 0.5rem;
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 1rem;
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
}

.btn-icon:hover {
  background-color: var(--bg-hover);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.btn-icon.btn-action {
  font-size: 1.25rem;
  min-width: 48px;
  height: 48px;
  padding: 0.5rem;
  border-radius: var(--radius-md);
}

.btn-action {
  padding: 0.5rem 1rem;
  background-color: var(--accent-primary);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all var(--transition-base);
  white-space: nowrap;
  box-shadow: 0 0 20px var(--accent-glow);
}

.btn-action:hover {
  background-color: #00a8cc;
  box-shadow: 0 0 32px var(--accent-glow);
  transform: translateY(-1px);
}

.btn-action:disabled,
.btn-action[style*="opacity: 0.6"],
.btn-action[style*="cursor: default"] {
  background-color: var(--text-tertiary);
  cursor: default;
  opacity: 0.5;
  box-shadow: none;
}

.btn-action[style*="opacity: 0.6"]:hover,
.btn-action[style*="cursor: default"]:hover {
  transform: none;
  box-shadow: none;
  background-color: var(--text-tertiary);
}

.btn-settings {
  padding: 0.4rem;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
}

.btn-settings:hover {
  background-color: var(--bg-hover);
  color: var(--accent-primary);
}

.btn-action-hightech {
  background-color: var(--bg-tertiary) !important;
  color: var(--accent-primary) !important;
  border: 1px solid var(--accent-primary) !important;
  border-radius: var(--radius-sm);
  padding: 0.6rem 1.2rem;
  font-weight: 600;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 20px var(--accent-glow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

.btn-action-hightech:hover {
  background-color: var(--accent-primary) !important;
  color: var(--text-inverse) !important;
  transform: translateY(-2px);
  box-shadow: 0 0 32px var(--accent-glow) !important;
}

.btn-action-hightech:active {
  transform: translateY(0);
}

/* Variante destructive (ex: supprimer un bloc metier) : meme forme/contour
   que les boutons d'ajout, mais en rouge pour signaler l'action destructive. */
.btn-action-hightech.btn-hightech-danger {
  color: var(--danger, #ef4444) !important;
  border-color: var(--danger, #ef4444) !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.22);
}
.btn-action-hightech.btn-hightech-danger:hover {
  background-color: var(--danger, #ef4444) !important;
  color: #fff !important;
  box-shadow: 0 0 26px rgba(239, 68, 68, 0.42) !important;
}

/* ============================================
   Forms
   ============================================ */

.form-group {
  margin-bottom: 0.85rem;
}

.form-label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 500;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.form-control {
  width: 100%;
  padding: 0.4rem 0.7rem;
  line-height: 1.4;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  transition: all var(--transition-base);
}

.form-control:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-glow);
  background-color: var(--bg-tertiary);
}

.form-control::placeholder {
  color: var(--text-tertiary);
}

.form-control.filter-active,
.form-select.filter-active {
  border-color: #f39c12 !important;
  background-color: rgba(243, 156, 18, 0.08) !important;
  box-shadow: 0 0 0 2px rgba(243, 156, 18, 0.2);
}

textarea.form-control {
  resize: vertical;
  min-height: 100px;
}

.form-select {
  appearance: none;
  background-color: var(--bg-tertiary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a0a0b0'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

/* ============================================
   Tables
   ============================================ */

.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background-color: var(--bg-tertiary);
}

th,
td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}

th {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

th[onclick],
th[data-sortable] {
  cursor: pointer;
}

th[onclick]:hover,
th[data-sortable]:hover {
  color: var(--accent-primary);
}

td {
  color: var(--text-primary);
}

tbody tr:nth-child(odd) {
  background-color: var(--bg-secondary);
}

tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.03);
}

tbody tr:hover {
  background-color: var(--bg-hover) !important;
}

/* Data Table Specific */
/* Tri colonnes */
.sortable-th {
  user-select: none;
  transition: background var(--transition-fast);
}
.sortable-th:hover {
  background: var(--bg-hover);
}
.sort-arrow {
  font-size: 0.55rem;
  color: var(--accent-primary);
}

.data-table {
  table-layout: fixed;
  width: 100%;
}

.data-table th:nth-child(1),
.data-table td:nth-child(1) {
  width: 10%;
  min-width: 100px;
}

.data-table th:nth-child(2),
.data-table td:nth-child(2) {
  width: 18%;
  min-width: 150px;
}

.data-table th:nth-child(3),
.data-table td:nth-child(3) {
  width: 10%;
  min-width: 100px;
}

.data-table th:nth-child(4),
.data-table td:nth-child(4) {
  width: 14%;
  min-width: 120px;
}

.data-table th:nth-child(5),
.data-table td:nth-child(5) {
  width: 10%;
  min-width: 100px;
}

.data-table th:nth-child(6),
.data-table td:nth-child(6) {
  width: 10%;
  min-width: 100px;
}

.data-table th:nth-child(7),
.data-table td:nth-child(7) {
  width: 10%;
  min-width: 90px;
  text-align: right;
}

.data-table th:nth-child(8),
.data-table td:nth-child(8) {
  width: 8%;
  min-width: 70px;
  text-align: center;
}

.data-table th:nth-child(9),
.data-table td:nth-child(9) {
  width: 10%;
  min-width: 100px;
}

.data-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-table td[data-label="Client"],
.data-table td[data-label="Statut"] {
  white-space: normal;
  overflow: visible;
}

#devisTable th,
#loadQuoteModal table th,
#productSelectionTable th {
  font-size: 0.75rem;
  padding: 0.3rem 0.4rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#devisTable td,
#loadQuoteModal table td,
#productSelectionTable td {
  font-size: 0.75rem;
  padding: 0.25rem 0.4rem;
  line-height: 1.3;
}

/* ── Sélecteur de produits (modale devis) : grille de cartes structurées.
   Répartition des champs inspirée de la modale Produit : désignation en avant,
   identifiants groupés (clé/valeur compacts), prix + ajout à droite. ── */
.psel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 0.6rem;
}
/* Bascule ordinateur/smartphone : la table reste sur desktop, les cartes
   n'apparaissent QUE sur smartphone (cf. @media max-width:768px plus bas). */
.psel-mobile { display: none; }
.psel-card {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: var(--bg-secondary);
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.psel-card:hover {
  border-color: var(--accent-primary);
  background: var(--bg-hover);
  box-shadow: 0 2px 12px rgba(0, 217, 255, 0.08);
}
.psel-fav {
  background: none;
  border: none;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin-top: 1px;
  flex-shrink: 0;
}
.psel-main { flex: 1; min-width: 0; overflow: hidden; }
.psel-desig {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
  line-height: 1.25;
  margin-bottom: 0.4rem;
  overflow-wrap: anywhere;   /* coupe les mots interminables au lieu d'élargir la carte */
}
.psel-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
  align-items: center;
}
.psel-code {
  font-weight: 700;
  font-size: 0.72rem;
  background: var(--bg-tertiary);
  color: var(--accent-primary);
  padding: 1px 7px;
  border-radius: 5px;
  white-space: nowrap;
}
.psel-chip { font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; }
.psel-chip-k {
  color: var(--text-tertiary);
  margin-right: 3px;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.psel-link { color: var(--accent-primary); vertical-align: middle; margin-left: 3px; display: inline-flex; }
.psel-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.45rem;
  flex-shrink: 0;
}
.psel-price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.psel-price-k {
  font-size: 0.6rem;
  text-transform: uppercase;
  color: var(--text-tertiary);
  letter-spacing: 0.03em;
}
.psel-price strong { font-size: 0.95rem; color: var(--text-primary); white-space: nowrap; }
.psel-add {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(0, 217, 255, 0.3);
  background: var(--bg-tertiary);
  color: var(--accent-primary);
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
.psel-add:hover { background: var(--accent-primary); color: var(--bg-primary); }
.psel-sentinel,
.psel-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 1rem;
  color: var(--text-tertiary);
  font-size: 0.85rem;
}
@media (max-width: 768px) {
  .psel-desktop { display: none; }        /* table masquée sur smartphone */
  .psel-mobile { display: grid; }         /* cartes affichées sur smartphone */
  /* minmax(0,1fr) au lieu de 1fr : la piste ne peut pas dépasser le conteneur
     (sinon un mot/réf insécable élargit la carte au-delà de l'écran). */
  .psel-grid { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .psel-card { padding: 0.6rem 0.7rem; }
}

#quoteTable {
  table-layout: fixed;
  width: 100%;
}

#quoteTable th {
  font-size: 0.8rem;
  padding: 0.3rem 0.4rem;
}

#quoteTable td {
  font-size: 0.78rem;
  padding: 0.18rem 0.35rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Inputs condensés dans le tableau devis */
#quoteTable .form-control {
  padding: 0.12rem 0.3rem;
  font-size: 0.78rem;
  min-height: unset;
}

/* Boutons action condensés dans le tableau devis */
#quoteTable .action-round-btn {
  width: 22px;
  height: 22px;
  font-size: 0.75rem;
}

/* Colonnes numeriques alignees a droite */
#quoteTable th:nth-child(n+4),
#quoteTable td:nth-child(n+4) {
  text-align: right;
}

/* Actions centrees */
#quoteTable th:last-child,
#quoteTable td:last-child {
  text-align: center;
  overflow: visible;
}

/* Resserre l'espacement entre boutons d'action (5 icones depuis l'ajout
   des boutons "i" et "PDF") pour eviter le chevauchement avec Designation */
#quoteTable td:last-child .d-flex.gap-1 {
  gap: 3px;
}

/* ============================================
   Modals
   ============================================ */

/* ── Modal système (overlay + contenu centré) ── */
.modal,
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modal.active,
.modal-overlay[style*="display: flex"],
.modal-overlay[style*="display:flex"] {
  display: flex;
}

.modal-content {
  background: var(--bg-secondary, #0a0a0f);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 2rem;
  max-width: 700px;
  width: 94%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.05);
  animation: modalSlideIn 0.25s ease-out;
}

@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(-20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-subtle);
}

.modal-header h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}

.close-modal,
.modal-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.close-modal:hover,
.modal-close:hover {
  color: var(--danger, #ef4444);
  background: rgba(239, 68, 68, 0.1);
  transform: rotate(90deg);
}

.modal-body {
  color: var(--text-primary);
}

.modal-body .form-group {
  margin-bottom: 1rem;
}

.modal-body .form-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}

.modal-body .form-input,
.modal-body textarea.form-input {
  width: 100%;
  background: var(--bg-tertiary, #111);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 8px);
  padding: 0.65rem 0.85rem;
  font-size: 0.9rem;
  color: var(--text-primary);
  transition: border-color 0.2s;
}

.modal-body .form-input:focus,
.modal-body textarea.form-input:focus {
  outline: none;
  border-color: var(--accent-primary, #6366f1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-subtle);
}

/* ============================================
   Modal Tables - Spécificités (scroll + sticky)
   ============================================ */

.modal .table-container {
  max-height: calc(90vh - 250px);
  overflow-y: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.modal tbody tr:nth-child(odd) {
  background-color: #0f0f17;
}

.modal tbody tr:nth-child(even) {
  background-color: #0a0a0f;
}

.modal thead {
  background-color: #16161f;
}

/* Entête de tableau style btn-primary (accent + texte inversé) */
.thead-primary {
  background-color: var(--accent-primary);
}
.thead-primary th {
  color: var(--text-inverse) !important;
  background-color: var(--accent-primary);
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.modal th {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Status badges (réutilisable partout) */
.status-badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.status-badge.brouillon {
  background: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
  border: 1px solid rgba(107, 114, 128, 0.3);
}
.status-badge.envoye {
  background: rgba(37, 99, 235, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(37, 99, 235, 0.3);
}
.status-badge.accepte,
.status-badge.valide {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.status-badge.refuse {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.status-badge.expire {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.status-badge.nouveau {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.status-badge.maj {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Signature badges */
.sig-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}
.sig-badge.non-envoye { color: var(--text-tertiary); }
.sig-badge.sig-envoye { color: #60a5fa; background: rgba(37,99,235,0.1); }
.sig-badge.sig-accepte { color: #34d399; background: rgba(16,185,129,0.1); }
.sig-badge.sig-refuse { color: #f87171; background: rgba(239,68,68,0.1); }
.sig-badge.sig-expire { color: #fbbf24; background: rgba(245,158,11,0.1); }

/* Action buttons in modal tables */
.modal .action-btn {
  padding: 0.3rem 0.7rem;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 500;
  border: 1px solid var(--border-default);
  background: transparent;
  cursor: pointer;
  transition: all 0.15s;
}
.modal .action-btn.load-btn {
  color: var(--accent-primary);
  border-color: rgba(0, 217, 255, 0.3);
}
.modal .action-btn.load-btn:hover {
  background: var(--accent-glow);
}
.modal .action-btn.delete-btn {
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.3);
}
.modal .action-btn.delete-btn:hover {
  background: rgba(239, 68, 68, 0.1);
}

/* Marge colorée */
.marge-val { font-weight: 500; }
.marge-val.good { color: #34d399; }
.marge-val.warn { color: #fbbf24; }
.marge-val.bad { color: #f87171; }

/* Preview table row colors (import) */
.modal tbody tr.row-existing {
  background-color: rgba(245, 158, 11, 0.08) !important;
}
.modal tbody tr.row-new {
  background-color: rgba(16, 185, 129, 0.06) !important;
}

/* ============================================
   Action Round Buttons (Dashboard table)
   ============================================ */

.action-round-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border-default);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  padding: 0;
  font-size: 0.85rem;
  font-weight: 600;
  flex-shrink: 0;
}

.action-round-btn:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: var(--accent-glow);
}

.action-round-btn.at-btn {
  font-size: 0.8rem;
  font-weight: 700;
}

.action-round-btn.chantier-btn {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--success);
  border-color: rgba(16, 185, 129, 0.3);
}

.action-round-btn.chantier-btn:hover {
  background: rgba(16, 185, 129, 0.15);
  border-color: var(--success);
}

.action-round-btn.delete-btn {
  border-color: rgba(239, 68, 68, 0.3);
}

.action-round-btn.delete-btn img {
  filter: brightness(0) saturate(100%) invert(36%) sepia(95%) saturate(5000%) hue-rotate(350deg) brightness(97%) contrast(95%);
}

.action-round-btn.delete-btn:hover {
  border-color: var(--danger);
  background: rgba(239, 68, 68, 0.1);
}

.action-round-btn img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.action-round-btn svg {
  width: 14px;
  height: 14px;
}

.action-round-btn.edit-btn {
  border-color: rgba(0, 217, 255, 0.3);
}

.action-round-btn.edit-btn svg {
  stroke: var(--accent-primary);
}

.action-round-btn.edit-btn:hover {
  border-color: var(--accent-primary);
  background: var(--accent-glow);
}

.action-round-btn.crm-btn {
  border-color: rgba(59, 130, 246, 0.3);
}

.action-round-btn.crm-btn svg {
  stroke: var(--info);
}

.action-round-btn.crm-btn:hover {
  border-color: var(--info);
  background: rgba(59, 130, 246, 0.1);
}

.action-round-btn.devis-btn {
  border-color: rgba(245, 158, 11, 0.3);
}

.action-round-btn.devis-btn svg {
  stroke: var(--warning);
  fill: none;
}

.action-round-btn.devis-btn:hover {
  border-color: var(--warning);
  background: rgba(245, 158, 11, 0.1);
}

/* Action dropdown (from @ button) */
.action-dropdown-wrap {
  position: relative;
  display: inline-flex;
}

.action-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 50;
  min-width: 200px;
  overflow: hidden;
}

.action-dropdown.open {
  display: block;
}

.action-dropdown-item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s;
}

.action-dropdown-item:hover {
  background: var(--bg-hover);
  color: var(--accent-primary);
}

.action-dropdown-item + .action-dropdown-item {
  border-top: 1px solid var(--border-subtle);
}

/* ============================================
   Grids & Layouts
   ============================================ */

.grid {
  display: grid;
  gap: 1rem;
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* ============================================
   Alerts
   ============================================ */

.alert {
  padding: 1rem;
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
  border-left: 4px solid;
  background: var(--glass-bg);
}

.alert-success {
  background-color: var(--success-bg);
  color: var(--success);
  border-left-color: var(--success);
}

.alert-error {
  background-color: var(--danger-bg);
  color: var(--danger);
  border-left-color: var(--danger);
}

.alert-warning {
  background-color: var(--warning-bg);
  color: var(--warning);
  border-left-color: var(--warning);
}

.alert-info {
  background-color: var(--info-bg);
  color: var(--info);
  border-left-color: var(--info);
}

/* ============================================
   Utilities
   ============================================ */

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

.d-flex {
  display: flex;
}

.justify-between {
  justify-content: space-between;
}

.align-center {
  align-items: center;
}

.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }

.w-100 { width: 100%; }

/* ============================================
   Drag & Drop
   ============================================ */

.draggable {
  cursor: move;
}

.dragging {
  opacity: 0.5;
}

.drag-over {
  background-color: var(--bg-hover);
}

/* ============================================
   Loading & Spinners
   ============================================ */

.loader {
  border: 3px solid var(--border-subtle);
  border-top: 3px solid var(--accent-primary);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
  margin: 2rem auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.loading-overlay.active {
  display: flex;
}

.loading-spinner {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 2rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
}

.loading-spinner .loader {
  margin: 0;
  width: 40px;
  height: 40px;
  border-width: 4px;
}

.loading-text {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
}

.btn.loading {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}

.btn-spinner,
.spinner-inline {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-right: 0.5rem;
  vertical-align: middle;
}

/* ============================================
   Sticky Banner
   ============================================ */






/* ============================================
   Dashboard Stats
   ============================================ */

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.dashboard-stats-6 {
  grid-template-columns: repeat(6, 1fr);
}

.dashboard-stats-7 {
  grid-template-columns: repeat(5, 1fr);
}

/* Labels de groupe */
.stats-group-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: 0.4rem;
  padding-left: 0.25rem;
}
.stats-group-label-actions {
  margin-top: 0.5rem;
  color: var(--warning);
}

/* Groupes séparés : info (6 cols) + actions (5 cols) */
.stats-info {
  grid-template-columns: repeat(6, 1fr);
  margin-bottom: 0;
}
.stats-actions {
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 1.5rem;
  background: rgba(245, 158, 11, 0.03);
  border: 1px dashed rgba(245, 158, 11, 0.15);
  border-radius: var(--radius-md);
  padding: 0.75rem;
}

.stat-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 0.85rem 1rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all var(--transition-base);
}
.stat-card .stat-value {
  font-size: 1.4rem;
}
.stat-card .stat-label {
  font-size: 0.78rem;
}

.stat-card:hover {
  border-color: var(--border-default);
  box-shadow: 0 12px 48px rgba(0, 217, 255, 0.1);
  transform: translateY(-2px);
}

/* Pulsation pour les retours clients en attente */
.stat-card.has-pending-feedback {
  animation: feedbackPulse 2s ease-in-out infinite;
}
@keyframes feedbackPulse {
  0%, 100% { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); }
  50% { box-shadow: 0 8px 32px rgba(99, 102, 241, 0.4), 0 0 0 3px rgba(99, 102, 241, 0.15); }
}

/* Pastilles d'action — badge d'alerte */
.stat-card.action-required {
  position: relative;
}
.stat-card.action-required .action-badge {
  display: none;
}
.stat-card.action-required.has-items .action-badge {
  display: flex;
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f59e0b;
  color: #000;
  font-size: 0.75rem;
  font-weight: 800;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.5);
  animation: actionPulse 2s ease-in-out infinite;
  z-index: 2;
}
@keyframes actionPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 2px 8px rgba(245, 158, 11, 0.5); }
  50% { transform: scale(1.15); box-shadow: 0 2px 12px rgba(245, 158, 11, 0.8); }
}

.stat-icon {
  font-size: 2rem;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-glow);
  border-radius: var(--radius-md);
}

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

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.stat-label {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

/* ============================================
   Badges & Status
   ============================================ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.status-badge[data-status="nouveau"] {
  background-color: var(--info-bg);
  color: var(--info);
}

.status-badge[data-status="brouillon"] {
  background-color: rgba(160, 160, 176, 0.1);
  color: var(--text-secondary);
}

.status-badge[data-status="envoyé"] {
  background-color: var(--info-bg);
  color: var(--info);
}

.status-badge[data-status="accepté"] {
  background-color: var(--success-bg);
  color: var(--success);
}

.status-badge[data-status="refusé"] {
  background-color: var(--danger-bg);
  color: var(--danger);
}

.status-badge[data-status="expiré"] {
  background-color: var(--warning-bg);
  color: var(--warning);
}

/* Dashboard: badges sans fond */
#devisTableBody .status-badge[data-status] {
  background-color: transparent;
  padding: 0.1rem 0.25rem;
  font-size: 0.7rem;
  letter-spacing: 0;
}

/* ============================================
   Toast Notifications
   ============================================ */

.toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 400px;
}

.toast {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-left: 4px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  animation: slideInRight var(--transition-base);
  position: relative;
  overflow: hidden;
}

.toast.removing {
  animation: slideOutRight var(--transition-base) forwards;
}

.toast-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

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

.toast-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  color: var(--text-primary);
}

.toast-message {
  color: var(--text-secondary);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.toast-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 1.25rem;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}

.toast-close:hover {
  opacity: 1;
  color: var(--text-primary);
}

.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: currentColor;
  opacity: 0.5;
  animation: progressBar 5s linear;
}

.toast.success {
  border-left-color: var(--success);
}

.toast.success .toast-icon {
  color: var(--success);
}

.toast.success .toast-title {
  color: var(--text-primary);
}

.toast.success .toast-progress {
  color: var(--success);
}

.toast.error {
  border-left-color: var(--danger);
}

.toast.error .toast-icon {
  color: var(--danger);
}

.toast.error .toast-title {
  color: var(--text-primary);
}

.toast.error .toast-progress {
  color: var(--danger);
}

.toast.warning {
  border-left-color: var(--warning);
}

.toast.warning .toast-icon {
  color: var(--warning);
}

.toast.warning .toast-title {
  color: var(--text-primary);
}

.toast.warning .toast-progress {
  color: var(--warning);
}

.toast.info {
  border-left-color: var(--accent-primary);
}

.toast.info .toast-icon {
  color: var(--accent-primary);
}

.toast.info .toast-title {
  color: var(--text-primary);
}

.toast.info .toast-progress {
  color: var(--accent-primary);
}

@keyframes slideInRight {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(400px);
    opacity: 0;
  }
}

@keyframes progressBar {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

/* ============================================
   Tooltips
   ============================================ */

.custom-tooltip {
  position: fixed;
  z-index: 9999;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  padding: 10px 12px;
  font-size: 12px;
  min-width: 500px;
  max-width: 600px;
  pointer-events: none;
  animation: tooltipFadeIn var(--transition-fast);
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.custom-tooltip table {
  width: 100%;
  border-collapse: collapse;
}

.custom-tooltip th {
  background: linear-gradient(135deg, var(--accent-primary), #00a8cc);
  color: var(--text-inverse);
  padding: 8px 10px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  border: none;
}

.custom-tooltip th:nth-child(1) {
  width: 80px;
}

.custom-tooltip th:nth-child(2) {
  flex: 1;
}

.custom-tooltip th:nth-child(3) {
  width: 60px;
  text-align: right;
}

.custom-tooltip td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: 12px;
}

.custom-tooltip td:nth-child(1) {
  width: 80px;
  font-weight: 500;
}

.custom-tooltip td:nth-child(3) {
  width: 60px;
  text-align: right;
  font-weight: 500;
}

.custom-tooltip tr:last-child td {
  border-bottom: none;
}

/* ============================================
   Calendar
   ============================================ */

.calendar-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2rem 0;
  padding: 1rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
}

.calendar-navigation h2 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--text-primary);
}

.calendar-legend {
  display: flex;
  gap: 2rem;
  margin: 1rem 0;
  padding: 1rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.status-badge {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
}

.status-preparation { background: #FFA500; }
.status-encours { background: var(--success); }
.status-termine { background: var(--text-tertiary); }
.status-suspendu { background: var(--danger); }

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 600px;
}

.calendar-header {
  background: var(--accent-primary);
  color: var(--text-inverse);
  padding: 1rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
}

.calendar-day {
  background: var(--bg-secondary);
  min-height: 120px;
  padding: 0.5rem;
  position: relative;
  overflow-y: auto;
}

.calendar-day.other-month {
  background: var(--bg-tertiary);
  opacity: 0.5;
}

.calendar-day.today {
  background: rgba(0, 217, 255, 0.05);
  border: 1px solid var(--accent-primary);
}

.day-number {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.chantier-card {
  background: var(--bg-tertiary);
  border-left: 4px solid;
  padding: 0.5rem;
  margin: 0.25rem 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.8rem;
  transition: all var(--transition-fast);
}

.chantier-card:hover {
  transform: translateX(2px);
  box-shadow: 0 2px 8px rgba(0, 217, 255, 0.2);
}

.chantier-card.status-preparation { border-left-color: #FFA500; }
.chantier-card.status-encours { border-left-color: var(--success); }
.chantier-card.status-enpreparation { border-left-color: #FFA500; }
.chantier-card.status-termine { border-left-color: var(--text-tertiary); }
.chantier-card.status-suspendu { border-left-color: var(--danger); }

.chantier-card-numero {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.chantier-card-client {
  color: var(--text-secondary);
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chantier-card-techniciens {
  color: var(--accent-primary);
  font-size: 0.7rem;
  margin-bottom: 0.25rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chantier-card-indicators {
  display: flex;
  gap: 0.25rem;
  font-size: 0.7rem;
}

.detail-section {
  margin: 1.5rem 0;
  padding: 1rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.detail-section h3 {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  color: var(--accent-primary);
}

.info-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

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

.indicators-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.indicator input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--accent-primary);
}

.header-actions {
  display: flex;
  gap: 1rem;
}

/* ============================================
   AI Assistant
   ============================================ */

.ai-assistant-layout {
  display: flex;
  height: calc(100vh - 70px);
  overflow: hidden;
}

.ai-sidebar {
  width: 300px;
  min-width: 300px;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-subtle);
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ai-sidebar-section {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1rem;
}

.ai-sidebar-section h3 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.ai-context-info .context-item {
  font-size: 0.85rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

.ai-context-info .context-item:last-child {
  border-bottom: none;
}

.context-products {
  list-style: none;
  padding-left: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.context-products li {
  padding: 0.15rem 0;
}

.ai-existing {
  color: var(--success);
}

.ai-provider-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ai-provider-selector select {
  flex: 1;
  padding: 0.4rem;
  border: 1px solid var(--border-subtle);
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.ai-provider-status {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.ai-provider-status.active {
  color: var(--success);
}

.ai-search-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ai-search-form .form-control {
  font-size: 0.85rem;
  padding: 0.4rem 0.6rem;
}

.ai-search-results {
  margin-top: 0.75rem;
  font-size: 0.8rem;
}

.search-summary {
  background: var(--info-bg);
  border-left: 3px solid var(--accent-primary);
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  max-height: 200px;
  overflow-y: auto;
  color: var(--text-primary);
}

.search-links {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.search-link {
  font-size: 0.75rem;
  color: var(--accent-primary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-docs-upload {
  margin-bottom: 0.75rem;
}

.ai-docs-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ai-doc-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem;
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
}

.ai-doc-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
}

.ai-doc-chunks {
  font-size: 0.7rem;
  color: var(--text-tertiary);
}

.ai-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ai-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
}

.ai-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ai-header-left h2 {
  font-size: 1.1rem;
  margin: 0;
  color: var(--text-primary);
}

.ai-header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ai-message-count {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.ai-chat-container {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  background: var(--bg-primary);
}

.ai-chat-messages {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ai-message {
  display: flex;
  gap: 0.75rem;
  max-width: 85%;
}

.ai-message-user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.ai-message-assistant {
  align-self: flex-start;
}

.ai-message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

.ai-message-assistant .ai-message-avatar {
  background: var(--accent-primary);
  color: var(--text-inverse);
}

.ai-message-user .ai-message-avatar {
  background: var(--text-secondary);
  color: var(--text-inverse);
}

.ai-message-content {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  line-height: 1.5;
}

.ai-message-assistant .ai-message-content {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 12px 12px 12px 4px;
  color: var(--text-primary);
}

.ai-message-user .ai-message-content {
  background: var(--accent-primary);
  color: var(--text-inverse);
  border-radius: 12px 12px 4px 12px;
}

.ai-message-content p {
  margin: 0 0 0.5rem 0;
}

.ai-message-content p:last-child {
  margin-bottom: 0;
}

.ai-message-content ul {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

.ai-block-tag {
  display: inline-block;
  background: var(--info-bg);
  color: var(--accent-primary);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  margin: 0.25rem 0;
}

.ai-typing-indicator {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1.5rem;
}

.ai-typing-dots {
  display: flex;
  gap: 4px;
  padding: 0.75rem 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.ai-typing-dots span {
  width: 8px;
  height: 8px;
  background: var(--text-secondary);
  border-radius: 50%;
  animation: typingBounce 1.4s infinite ease-in-out;
}

.ai-typing-dots span:nth-child(1) { animation-delay: 0s; }
.ai-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

.ai-input-area {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
}

.ai-input-row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.ai-input-row textarea {
  flex: 1;
  padding: 0.75rem;
  border: 1px solid var(--border-subtle);
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-family: inherit;
  resize: none;
  line-height: 1.4;
}

.ai-input-row textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.ai-action-bar {
  display: flex;
  gap: 0.75rem;
}

.ai-blocks-result {
  display: flex;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: var(--success-bg);
  border-top: 2px solid var(--success);
}

.ai-block {
  flex: 1;
}

.ai-block h4 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.ai-block textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border-subtle);
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
}

/* ============================================
   Mobile Styles
   ============================================ */

@media (max-width: 992px) {
  /* padding-top:80px retiré — reliquat de l'ancienne .navbar fixe (supprimée,
     remplacée par la sidebar). À 769-992px rien n'est fixe en haut ; c'était
     ~80px de vide en haut de chaque page. Le dégagement du hamburger (≤768px)
     est assuré par .main-content{padding-top:3.1rem}. */

  .navbar {
    padding: 0.5rem 1rem;
    height: 60px;
    flex-wrap: nowrap;
    gap: 0.5rem;
  }

  .navbar-brand {
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    margin-right: 0.5rem;
  }

  .navbar-logo {
    height: 25px;
  }

  .navbar-title {
    font-size: 1rem;
    line-height: 1.2;
  }

  .navbar-version {
    font-size: 0.65rem;
  }

  .navbar-toggle {
    display: flex;
    width: 24px;
    height: 16px;
  }

  .navbar-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 300px;
    height: 100vh;
    background-color: var(--bg-secondary);
    border-left: 1px solid var(--border-subtle);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 5rem 1.5rem 2rem;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
    transition: right 0.3s ease-in-out;
    z-index: 100;
    overflow-y: auto;
  }

  .navbar-menu.active {
    right: 0;
  }

  .navbar-nav {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  .nav-link {
    display: block;
    padding: 0.75rem 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--border-subtle);
  }

  .nav-link:hover {
    transform: none;
    padding-left: 0.5rem;
  }

  .nav-link::after {
    display: none;
  }

  .navbar-auth {
    margin-top: 2rem;
    margin-left: 0;
    width: 100%;
    flex-direction: column;
    border: 1px solid var(--border-subtle);
  }

  .navbar-user-link {
    width: 100%;
    justify-content: center;
    padding: 0.75rem;
  }

  .navbar-user-link:first-child {
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
  }

  .navbar-toggle.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }

  .navbar-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .navbar-toggle.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }

  .card {
    padding: 1rem;
    margin-bottom: 1rem;
  }

  .btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
  }

  .container {
    padding: 0 1rem;
    margin: 0.15rem auto 1rem;   /* marge haute réduite : le padding-top de
                                    .main-content fait déjà le dégagement */
  }

  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }

  .dashboard-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-stats-6 {
    grid-template-columns: repeat(3, 1fr);
  }

  .dashboard-stats-7 {
    grid-template-columns: repeat(4, 1fr);
  }

  .stats-info {
    grid-template-columns: repeat(3, 1fr);
  }
  .stats-actions {
    grid-template-columns: repeat(3, 1fr);
  }

  table {
    font-size: 0.85rem;
  }

  td,
  th {
    padding: 0.5rem;
  }

  .modal-content {
    padding: 1rem;
    width: 95%;
    max-width: 95vw;
  }

  .modal-header {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }

  .modal-footer {
    flex-direction: column;
    gap: 0.5rem;
  }

  .modal-footer .btn {
    width: 100%;
  }

  /* Formulaire produit (modale) : les rangées de champs COURTS se mettent à
     2 par ligne au lieu de s'empiler (1 par ligne = place gaspillée). Les
     champs LONGS (flex:2 : descriptions, désignation technique) restent en
     pleine largeur. Principe « largeur = contenu » appliqué globalement. */
  #productModal .modal-body div[style*="display:flex"],
  #productModal .modal-body div[style*="display: flex"] {
    flex-wrap: wrap !important;
  }
  #productModal .modal-body div[style*="display:flex"] > .form-group,
  #productModal .modal-body div[style*="display: flex"] > .form-group {
    flex: 1 1 calc(50% - 0.5rem) !important;
    min-width: calc(50% - 0.5rem) !important;
    margin-bottom: 0.4rem !important;
  }
  /* Champs longs (flex:2) -> pleine largeur. */
  #productModal .modal-body div[style*="display:flex"] > .form-group[style*="flex:2"],
  #productModal .modal-body div[style*="display:flex"] > .form-group[style*="flex: 2"] {
    flex-basis: 100% !important;
    min-width: 100% !important;
  }

  .toast-container {
    left: 1rem;
    right: 1rem;
    max-width: calc(100vw - 2rem);
  }

  .toast {
    max-width: 100%;
  }



  .ai-assistant-layout {
    flex-direction: column;
    height: auto;
    min-height: calc(100vh - 70px);
  }

  .ai-sidebar {
    width: 100%;
    min-width: auto;
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
    max-height: 200px;
    overflow-y: auto;
  }

  .ai-sidebar-section {
    flex: 1;
    min-width: 200px;
  }

  .ai-chat-container {
    min-height: 400px;
  }

  .ai-message {
    max-width: 95%;
  }

  .ai-blocks-result {
    flex-direction: column;
  }

  .mobile-actions-submenu {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-left: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--border-subtle);
  }

  .mobile-action-link {
    background: none;
    border: none;
    text-align: left;
    padding: 0.5rem 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .mobile-action-link:hover {
    color: var(--accent-primary);
  }

  .hide-desktop {
    display: none;
  }

  .totals-notes-container {
    flex-direction: column-reverse !important;
    gap: 1rem !important;
  }

  .notes-section,
  .totals-section {
    width: 100% !important;
  }

  .mobile-actions-bar {
    display: block !important;
    margin-top: 1rem !important;
  }

  .w-100 {
    width: 100% !important;
  }

  .btn.w-100 {
    width: 100% !important;
    margin-bottom: 0.5rem;
  }
}

@media (max-width: 768px) {
  body {
    /* padding-top:60px retiré — reliquat de l'ancienne .navbar fixe. Le
       hamburger fixe est dégagé par .main-content{padding-top:3.1rem}. */
    font-size: 14px;
  }

  .container {
    padding: 0 0.5rem;
    margin: 0.15rem auto 0.6rem;   /* marge haute réduite (cf. padding-top main) */
  }

  h1,
  .card-title {
    font-size: 1.15rem;
  }

  .card {
    padding: 0.85rem;
    margin-bottom: 0.7rem;
  }

  /* Une carte qui contient des cartes mobiles : on supprime son padding
     horizontal pour que les .m-card occupent toute la largeur utile.
     Seul l'en-tete (titre + recherche) garde un padding lateral. */
  .has-mobile-cards {
    padding: 0 !important;
  }
  .has-mobile-cards > .card-header {
    padding: 0.7rem 0.6rem;
  }

  .btn {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    min-height: 44px;
    width: 100%;
  }

  /* Boutons de filtre / onglets : compacts et wrappables sur une ou deux
     lignes, surtout PAS pleine largeur (sinon ils s'empilent un par ligne). */
  .btn.status-filter,
  .btn.period-filter,
  .btn.type-filter,
  .btn.urgence-filter,
  .btn.user-filter,
  .btn.cial-filter,
  .btn.section-tab,
  .section-tabs .btn,
  .filter-bar .btn {
    width: auto;
    min-height: 36px;
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
    flex: 0 0 auto;
  }

  /* Les conteneurs de filtres wrappent leurs boutons en lignes compactes */
  .btn.status-filter,
  .btn.period-filter,
  .btn.type-filter,
  .btn.urgence-filter,
  .btn.user-filter {
    display: inline-flex;
    align-items: center;
  }

  .btn-icon {
    min-width: 44px;
    min-height: 44px;
    padding: 0.75rem;
    width: auto;
  }

  .btn-settings {
    min-width: 44px;
    min-height: 44px;
    padding: 0.75rem;
  }

  .card-header {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .card-header .d-flex {
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
  }

  .card-header .btn {
    width: 100%;
  }

  .table-container table {
    display: block;
    width: 100%;
  }

  .table-container thead {
    display: none;
  }

  .table-container tbody {
    display: block;
  }

  .table-container tr {
    display: block;
    margin-bottom: 0.6rem;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 0.7rem 0.8rem;
    background: var(--bg-secondary);
  }

  .table-container td {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    padding: 0.28rem 0;
    border: none;
    font-size: 0.82rem;
    /* Neutralise .data-table td:nth-child(N) { width/min-width/overflow/white-space }
       (règles desktop non scopées, écrivent 70-150px + ellipsis sur N'IMPORTE
       QUELLE table .data-table selon la position de colonne — provoque des
       valeurs tronquées/invisibles en mode carte). */
    width: auto !important;
    min-width: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
  }

  /* Label affiché UNIQUEMENT si data-label présent (sinon pas de bloc fantôme à gauche) */
  .table-container td[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-tertiary);
    min-width: 90px;
    flex-shrink: 0;
  }

  /* Cellules SANS data-label : contenu aligné à gauche, plus d'espace perdu */
  .table-container td:not([data-label]):not(:last-child) {
    justify-content: flex-start;
    text-align: left;
  }

  /* Produits (smartphone) : empiler Désignation + Désignation technique au lieu
     de les laisser côte à côte. Le flex de .table-container traite la désignation
     et le <span> technique comme 2 items → ici on passe la cellule en colonne. */
  .table-container td.prod-desig-cell {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    white-space: normal !important;
  }
  .table-container td.prod-desig-cell br { display: none; }
  .table-container td:not([data-label]):not(:last-child)::before {
    content: none;
    display: none;
  }

  .table-container td:last-child:not([data-label]) {
    justify-content: flex-start;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .table-container td:last-child:not([data-label])::before {
    content: 'Actions';
  }

  .dashboard-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  .stats-info, .stats-actions {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Stat cards compactes sur mobile : 2 par ligne, valeurs lisibles */
  .stat-card { padding: 0.7rem 0.75rem; }
  .stat-card .stat-value { font-size: 1.05rem; line-height: 1.15; word-break: break-word; }
  .stat-card .stat-label { font-size: 0.7rem; }


  .status-badge {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }

  .d-flex {
    flex-direction: column;
  }

  .justify-between {
    justify-content: flex-start;
    flex-direction: column;
    gap: 1rem;
  }

  .form-group .d-flex:has(#clientSelect) {
    flex-direction: column;
  }

  .form-group .d-flex:has(#clientSelect) button {
    width: 100%;
  }

  .form-group .d-flex:has(#productSelect) {
    flex-wrap: wrap;
  }

  .form-group .d-flex:has(#productSelect) #productSelect {
    width: 100%;
    flex: 1 1 100%;
  }

  .form-group .d-flex:has(#productSelect) button,
  .form-group .d-flex:has(#productSelect) #productQuantity {
    flex: 1;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  .calendar-grid {
    grid-template-columns: 1fr;
  }

  .calendar-header:nth-child(n+6) {
    display: none;
  }

  .calendar-day:nth-child(7n+6),
  .calendar-day:nth-child(7n) {
    display: none;
  }

  .calendar-navigation {
    flex-direction: column;
    gap: 1rem;
  }

  .calendar-legend {
    flex-wrap: wrap;
    gap: 1rem;
  }
}

@media (max-width: 375px) {
  .btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }

  .card {
    padding: 0.75rem;
  }

  .container {
    padding: 0 0.5rem;
    margin: 0.15rem auto 0.5rem;   /* marge haute réduite (cf. padding-top main) */
  }



  .card-title {
    font-size: 1.25rem;
  }

  .modal-content {
    width: 98%;
    max-width: 98vw;
  }

  .table-container td::before {
    min-width: 80px;
    font-size: 0.8rem;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .dashboard-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-stats-6 {
    grid-template-columns: repeat(3, 1fr);
  }

  .dashboard-stats-7 {
    grid-template-columns: repeat(4, 1fr);
  }

  .stats-info {
    grid-template-columns: repeat(3, 1fr);
  }
  .stats-actions {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .card-header {
    flex-wrap: wrap;
  }

  .card-header .d-flex {
    flex-wrap: wrap;
  }
}

@media (min-width: 992px) {
  .pc-header-line {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    background: var(--bg-secondary);
    padding: 20px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    margin-bottom: 25px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
  }

  .client-group {
    flex: 2;
    min-width: 350px;
    margin-bottom: 0 !important;
  }

  .quote-info-group {
    flex: 3;
    display: flex;
    gap: 20px;
    align-items: flex-end;
  }

  .quote-info-group .form-group {
    flex: 1;
    margin-bottom: 0 !important;
  }

  .pc-header-line .form-label {
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
    display: block;
  }

  #clientSelect {
    border: 1px solid var(--accent-primary) !important;
    background-color: var(--bg-tertiary);
    box-shadow: 0 0 0 4px var(--accent-glow);
    transition: all var(--transition-base);
  }

  #clientSelect:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 4px var(--accent-glow);
  }

  .mobile-actions-only {
    display: none !important;
  }

  .desktop-actions-only {
    display: block !important;
  }
}

@media (max-width: 991px) {
  .pc-header-line {
    display: block;
  }

  .quote-info-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
  }
}

/* ============================================
   Compact Totals
   ============================================ */

.totals-section table {
  border-collapse: collapse;
}

.totals-section table tr {
  background: transparent !important;
}

.totals-section table td {
  padding: 4px 8px !important;
  line-height: 1.2;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* Libellés à gauche, montants alignés sur la décimale */
.totals-section .totals-label {
  text-align: left !important;
  width: auto;
}
.totals-section .totals-amount {
  text-align: right !important;
  font-family: 'Cascadia Mono', 'Consolas', 'SF Mono', 'Monaco', monospace;
  white-space: nowrap;
  width: 140px;
  min-width: 140px;
}

.totals-section table tr:last-child td {
  padding-top: 10px !important;
  padding-bottom: 4px !important;
  border-bottom: none;
  border-top: 2px solid var(--accent-primary);
  color: var(--accent-primary);
  font-size: 1.1rem;
}

/* ============================================
   Alignement montants sur virgule (monospace)
   ============================================ */

.totals-section table td:last-child,
#quoteLines td[data-label="Mat. HT /u"],
#quoteLines td[data-label="MO HT / u"],
#quoteLines td[data-label="Total HT"] {
  font-family: 'Cascadia Mono', 'Consolas', 'SF Mono', 'Monaco', monospace;
  text-align: right;
  white-space: nowrap;
}

/* ===== Confidence Badges (Ref Fabricant IA) ===== */
.confidence-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
}
.confidence-high {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.confidence-medium {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.confidence-low {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* ===== Option cards (Chiffrage) ===== */
.option-card {
  border-left: 3px solid var(--accent-primary);
  margin-bottom: 1rem;
  padding: 1rem;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}
.option-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
.option-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent-primary);
  margin: 0;
}
.option-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.option-table th {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  padding: 0.4rem 0.6rem;
  text-align: left;
  font-weight: 500;
  font-size: 0.8rem;
  border-bottom: 1px solid var(--border-default);
}
.option-table td {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
}
.option-table tr:hover {
  background: var(--bg-hover);
}
.option-totals {
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-default);
  text-align: right;
  margin-top: 0.5rem;
  display: flex;
  gap: 2rem;
  justify-content: flex-end;
  font-size: 0.9rem;
}
.option-empty {
  text-align: center;
  padding: 1.5rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ===== Margin badges (Tableau de bord Devis) ===== */
.margin-badge {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.75rem;
  text-align: center;
  min-width: 50px;
  line-height: 1.2;
}
.margin-badge-red {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.margin-badge-orange {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.margin-badge-green {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.margin-badge-gray {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
}

/* ===== Planning Gantt 70 jours ===== */
.gantt-wrapper {
  overflow-x: auto;
  margin-top: 1rem;
}

.gantt-container {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr;
  min-width: 1200px;
  border: 1px solid var(--border-default, #2a2a3a);
  border-radius: 8px;
  overflow: hidden;
}

.gantt-sidebar-header {
  background: var(--bg-tertiary, #1a1a2e);
  padding: 0.5rem 1rem;
  font-weight: 600;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border-default, #2a2a3a);
  border-right: 1px solid var(--border-default, #2a2a3a);
  display: flex;
  align-items: flex-end;
}

.gantt-timeline-header {
  background: var(--bg-tertiary, #1a1a2e);
  border-bottom: 1px solid var(--border-default, #2a2a3a);
  overflow: hidden;
}

.gantt-months-row {
  display: grid;
  grid-auto-flow: column;
  border-bottom: 1px solid var(--border-default, #2a2a3a);
}

.gantt-month-header {
  padding: 0.3rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  color: var(--accent-primary, #00d9ff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gantt-days-row {
  display: grid;
  grid-template-columns: repeat(70, 1fr);
}

.gantt-day-cell {
  padding: 2px 0;
  text-align: center;
  font-size: 0.65rem;
  border-right: 1px solid rgba(255,255,255,0.03);
  line-height: 1.2;
}
.gantt-day-cell .day-name {
  display: block;
  color: var(--text-tertiary, #666);
  font-size: 0.6rem;
}
.gantt-day-cell .day-num {
  display: block;
  color: var(--text-secondary, #999);
}
.gantt-day-cell.weekend {
  background: rgba(255,255,255,0.02);
}
.gantt-day-cell.today {
  background: rgba(0, 217, 255, 0.1);
  border-bottom: 2px solid var(--accent-primary, #00d9ff);
}

.gantt-body {
  display: contents;
}

.gantt-sidebar-cell {
  background: var(--bg-secondary, #111128);
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid var(--border-default, #2a2a3a);
  border-right: 1px solid var(--border-default, #2a2a3a);
  display: flex;
  align-items: center;
}

.gantt-chantier-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  font-size: 0.85rem;
}
.gantt-chantier-info:hover {
  color: var(--accent-primary, #00d9ff);
}
.gantt-client {
  font-size: 0.78rem;
  color: var(--text-secondary, #999);
}
.gantt-meta {
  font-size: 0.7rem;
  color: var(--text-tertiary, #666);
}

.gantt-timeline-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(70, 1fr);
  border-bottom: 1px solid var(--border-default, #2a2a3a);
  min-height: 48px;
}

.gantt-grid-cell {
  border-right: 1px solid rgba(255,255,255,0.03);
}
.gantt-grid-cell.weekend {
  background: rgba(255,255,255,0.02);
}
.gantt-grid-cell.today {
  background: rgba(0, 217, 255, 0.05);
}

.gantt-bar {
  position: absolute;
  top: 8px;
  height: 32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  transition: opacity 0.2s, transform 0.2s;
}
.gantt-bar:hover {
  opacity: 0.85;
  transform: scaleY(1.05);
}

.gantt-bar-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.gantt-tooltip {
  position: fixed;
  background: var(--bg-tertiary, #1a1a2e);
  border: 1px solid var(--border-default, #2a2a3a);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  font-size: 0.82rem;
  line-height: 1.5;
  max-width: 320px;
  z-index: 1000;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  pointer-events: none;
}

/* Calendar navigation (shared) */
.calendar-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.calendar-legend {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.legend-color {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

/* ============================================
   Theme Toggle
   ============================================ */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1.25rem;
  color: var(--text-secondary);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  font-size: 0.88rem;
  font-weight: 450;
  border-left: 3px solid transparent;
  transition: all var(--transition-fast);
  font-family: inherit;
}

.theme-toggle:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
  border-left-color: var(--border-default);
}

.theme-toggle-icon {
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 0.3s ease;
}

.theme-toggle:hover .theme-toggle-icon {
  transform: rotate(15deg);
}

/* Tableau Chantiers - réduction min-width colonnes */
.chantiers-table th:nth-child(1),
.chantiers-table td:nth-child(1) {
  min-width: 70px;
}

.chantiers-table th:nth-child(2),
.chantiers-table td:nth-child(2) {
  min-width: 100px;
}

.chantiers-table th:nth-child(3),
.chantiers-table td:nth-child(3) {
  min-width: 70px;
}

.chantiers-table th:nth-child(4),
.chantiers-table td:nth-child(4) {
  min-width: 55px;
}

.chantiers-table th:nth-child(5),
.chantiers-table td:nth-child(5) {
  min-width: 55px;
}

.chantiers-table th:nth-child(6),
.chantiers-table td:nth-child(6) {
  min-width: 70px;
}

.chantiers-table th:nth-child(7),
.chantiers-table td:nth-child(7) {
  min-width: 48px;
}

/* Réduction espace entre colonnes */
.chantiers-table th:nth-child(6),
.chantiers-table td:nth-child(6) {
  padding: 0.2rem 0.1rem 0.2rem 0.25rem;
}

.chantiers-table th:nth-child(7),
.chantiers-table td:nth-child(7) {
  padding: 0.2rem 0.1rem 0.2rem 0.1rem;
}

.chantiers-table th:nth-child(8),
.chantiers-table td:nth-child(8) {
  padding: 0.2rem 0.1rem 0.2rem 0.25rem;
  min-width: 48px;
}

.chantiers-table th:nth-child(9),
.chantiers-table td:nth-child(9) {
  padding: 0.2rem 0.25rem 0.2rem 0.1rem;
}

.chantiers-table th:nth-child(12),
.chantiers-table td:nth-child(12) {
  min-width: 65px;
}

/* ============================================
   VUE MOBILE DEDIEE — Cartes de tableau
   Presentation alternative pour smartphones :
   les tableaux denses (13 colonnes) sont remplaces
   par des cartes lisibles. Le conteneur .mobile-cards
   est rempli par le JS en parallele du <table>.
   ============================================ */

/* Caches par defaut sur desktop */
.mobile-cards { display: none; }

@media (max-width: 768px) {
  /* --- Garde-fou global : zero debordement horizontal de page --- */
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Sur une page qui propose des cartes mobiles, on masque le tableau
     dense et on affiche les cartes a la place. */
  .has-mobile-cards .desktop-table-wrap { display: none !important; }
  .has-mobile-cards .mobile-cards {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0.4rem;
  }

  .m-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 0.6rem 0.7rem 0.55rem 0.85rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
    position: relative;
  }
  .m-card::before {
    content: '';
    position: absolute;
    left: 0; top: 10px; bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--accent-primary);
    opacity: 0.7;
  }

  /* En-tete : identifiant a gauche, montant a droite */
  .m-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
  }
  .m-card-id { font-size: 0.9rem; font-weight: 800; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.2; }
  .m-card-client { font-size: 0.78rem; color: var(--text-secondary); margin-top: 1px; }
  .m-card-amount { font-size: 1rem; font-weight: 800; color: var(--accent-primary); white-space: nowrap; text-align: right; line-height: 1.15; }
  .m-card-amount small { display: block; font-size: 0.62rem; font-weight: 600; color: var(--text-tertiary); }

  /* Badge statut — compact */
  .m-card-status {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.14rem 0.5rem;
    border-radius: 100px;
    margin-bottom: 0.35rem;
  }

  /* Lignes label/valeur alignees — denses */
  .m-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.22rem 0;
    font-size: 0.8rem;
    border-top: 1px solid var(--border-subtle);
    line-height: 1.3;
  }
  .m-card-row .label { color: var(--text-tertiary); white-space: nowrap; }
  .m-card-row .value { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; overflow: hidden; text-overflow: ellipsis; }

  /* Grille 2 colonnes pour regrouper des champs courts cote a cote
     (evite l'empilement vertical inutile) */
  .m-card-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 0.8rem;
    border-top: 1px solid var(--border-subtle);
  }
  .m-card-duo .m-card-row { border-top: none; }

  /* Puces d'etat (acompte / materiel) — compactes */
  .m-card-chips { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: 0.4rem 0 0.15rem; }
  .m-chip {
    font-size: 0.68rem;
    padding: 0.16rem 0.5rem;
    border-radius: 100px;
    background: var(--bg-tertiary);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-secondary);
    white-space: nowrap;
  }
  .m-chip.ok { background: rgba(16,185,129,0.14); color: #10b981; }
  .m-chip.ko { background: rgba(239,68,68,0.12); color: #ef4444; }

  /* Barre d'actions — boutons tactiles compacts, alignes a droite */
  .m-card-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding-top: 0.45rem;
    border-top: 1px solid var(--border-subtle);
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .m-card-actions .action-round-btn {
    min-height: 38px;
    min-width: 38px;
    width: 38px;
    height: 38px;
  }
  .m-card-actions button,
  .m-card-actions a {
    min-height: 38px;
  }
  /* Boutons texte (factures, recouvrement) plus compacts */
  .m-card-actions .btn-sm {
    padding: 0.35rem 0.6rem;
    font-size: 0.75rem;
    min-height: 38px;
  }

  /* Barre de filtres : compacte et scrollable horizontalement
     dans son propre conteneur (pas de debordement de page) */
  .filter-bar-mobile-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Utilitaire : grilles de formulaire a colonnes fixes (Particule|Prenom|
     Nom, Type|Mode|Saisie, etc.) repliees en 1 colonne sur mobile pour
     eviter tout debordement. Le !important bat le style inline. */
  .mobile-stack-grid {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }

  /* Devis dashboard — filtres compacts */
  .filters-inner {
    padding: 1rem !important;
    margin-bottom: 1rem !important;
  }
  #creatorFilterContainer {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem 0.5rem;
  }
  #creatorFilterContainer .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Cartes devis : HT + TTC empiles en en-tete */
  .m-card-amounts {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.05rem;
  }
  .m-card-amount-ht {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    text-align: right;
    line-height: 1.2;
  }
  .m-card-amount-ht small {
    display: inline;
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-tertiary);
    margin-left: 2px;
  }
}

/* ── Modale de saisie : clic à côté volontairement ignoré ───────────────────
 *
 * Une modale contenant un champ de texte ne se ferme plus sur un clic sur le
 * fond ni sur Échap (cf. js/modales_protegees.js) : un clic mal placé effaçait
 * une saisie en cours sans un mot. Cette secousse très brève signale que le
 * clic a bien été reçu, mais ignoré — sans elle, l'application semble figée.
 *
 * Uniquement des `transform` : aucune couleur, donc rien à décliner en thème
 * clair, et l'animation reste peu coûteuse (pas de reflow).
 */
@keyframes modaleSecousse {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(2px); }
}

.modale-refuse-fermeture {
  animation: modaleSecousse 0.35s ease-in-out;
}

/* Respect du réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
  .modale-refuse-fermeture {
    animation: none;
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
  }
}