/* ============================================
   PC Service IDF - Backoffice Stylesheet
   Mobile-first responsive design
   ============================================ */

:root {
  /* Pile de polices de l'interface.
     'Outfit' ne contient aucun pictogramme : ni ✓, ni ⚠, ni ⚙. Quand la pile
     s'arrêtait à `sans-serif`, Windows résolvait ces caractères sur Arial —
     qui ne les a pas davantage — puis partait en repli de dernier recours,
     d'où les carrés vides signalés par les utilisateurs Windows. macOS ne
     montrait rien parce que ses polices système couvrent ces plages.
     On nomme donc explicitement les polices à symboles : Windows y trouve le
     glyphe, macOS ignore les noms qu'il ne connaît pas, et le texte latin
     continue de venir d'Outfit puisqu'il l'a en premier. */
  --police: 'Outfit', 'Segoe UI Symbol', 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif;
  --teal: #2BA886;
  --teal-light: #3DC29B;
  --teal-pale: #E6F5F0;
  --blue: #4A90C4;
  --blue-light: #5DA3D4;
  --blue-pale: #EAF2F9;
  --navy: #1A3248;
  --gradient: linear-gradient(135deg, var(--teal), var(--blue));
  --bg: #F3F6F8;
  --bg-white: #FFFFFF;
  --text: #5A6E7D;
  --text-dark: #1A3248;
  --text-light: #8A9BAA;
  --border: #E2E8ED;
  --border-light: #F0F3F5;
  /* ── Design system onboarding (Bento) : alias mappés sur le thème existant.
     Comme ils référencent les variables de base, ils suivent automatiquement
     le mode clair/sombre (redéfinis via [data-theme="dark"]). ── */
  --bg-app:        var(--bg);
  --bg-bento:      var(--bg-white);
  --border-bento:  var(--border);
  --text-main:     var(--text-dark);
  --text-muted:    var(--text-light);
  --color-primary: var(--teal);
  --radius-bento:  20px;
  --danger: #dc3545;
  --warning: #fd7e14;
  --success: #198754;
  --info: #4A90C4;
  --sidebar-width: 260px;
  --topbar-height: 60px;
  /* Hauteur de la barre de navigation mobile, encoche comprise. Le tiroir s'y
     appuie avec la MÊME expression : impossible qu'un écart apparaisse entre
     les deux, quel que soit l'iPhone. */
  --mnav-h: calc(62px + env(safe-area-inset-bottom, 0px));
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.1);
}

.text-success   { color: var(--success); }
.text-danger    { color: var(--danger); }
.text-warning   { color: var(--warning); }
.text-info      { color: var(--info); }
.text-primary   { color: var(--teal); }
.text-secondary { color: var(--text-light); }

/* --- Spacing utilities (icon/text alignment) --- */
.me-1 { margin-right: 4px; }
.me-2 { margin-right: 8px; }
.ms-1 { margin-left: 4px; }
.ms-2 { margin-left: 8px; }

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

html { scroll-behavior: smooth; overflow-x: hidden; touch-action: pan-y; }
body {
  font-family: var(--police);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  touch-action: pan-y;
  -ms-touch-action: pan-y;
}

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-light); }

/* ─── APP LAYOUT ─── */
.app {
  display: block;        /* layout simple — main-content prend toute la largeur */
  min-height: 100vh;
}

/* ─── SIDEBAR — Position fixe, glisse depuis la gauche ────────────────────
  Fermé  : left: -260px  (hors écran à gauche)
  Ouvert : left: 0       (visible, le contenu principal se décale via margin-left)
  ─────────────────────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-width);   /* 260 px */
  position: fixed;
  top: 0; left: calc(-1 * var(--sidebar-width));
  height: 100vh;
  z-index: 1000;

  background: var(--navy);
  color: white;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  transition: left 0.3s ease;
}
.sidebar.open { left: 0; }

/* Backdrop supprimé */
.sidebar-backdrop { display: none !important; }

.sidebar-header {
  position: relative;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  min-height: 78px;
}

.sidebar-logo {
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  color: inherit;
}
/* Logo agrandi + centré. Logo large → on privilégie la largeur (max-width) ;
   le ratio est préservé (object-fit) et la hauteur est plafonnée. */
.sidebar-logo img { display: block; height: auto; width: auto; max-width: 200px; max-height: 50px; object-fit: contain; }

/* Repli quand l'atelier n'a pas de logo, ou que son fichier ne répond plus :
   son NOM. Deux lignes au plus — au-delà, un nom à rallonge pousserait la
   navigation vers le bas sur toutes les pages. */
.sidebar-logo-nom {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
  max-width: 200px;
  font-size: 17px; font-weight: 800; line-height: 1.2;
  text-align: center; color: inherit; letter-spacing: -0.2px;
  overflow-wrap: anywhere;
}
.sidebar-logo-nom[hidden] { display: none; }

/* × visible uniquement quand la sidebar est ouverte */
.sidebar-close {
  display: none;
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  align-items: center; justify-content: center;
  flex-shrink: 0;
  background: none; border: none; color: rgba(255,255,255,0.5);
  font-size: 22px; cursor: pointer;
  width: 34px; height: 34px; border-radius: 6px;
  transition: color .2s, background .2s;
}
.sidebar.open .sidebar-close { display: flex; }
.sidebar-close:hover { color: white; background: rgba(255,255,255,.08); }

.sidebar-nav {
  flex: 1;
  padding: 12px 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* Masquer la scrollbar tout en conservant le défilement */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE / Edge legacy */
}
.sidebar-nav::-webkit-scrollbar {
  display: none;                /* Chrome / Safari / Opera */
}

.nav-section {
  padding: 20px 20px 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.3);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
  border-left: 4px solid transparent;
}

.nav-item:hover {
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.06);
  border-left-color: rgba(255,255,255,0.18);
}

.nav-item.active {
  color: var(--teal);
  background: rgba(43,168,134,0.2);
  border-left-color: var(--teal);
  font-weight: 600;
}

.nav-item.active .nav-icon {
  color: var(--teal);
}

.nav-icon { font-size: 16px; width: 20px; text-align: center; margin-right: 10px; display: inline-block; }

.sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.user-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.user-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--gradient);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: white; flex-shrink: 0;
}
.user-details { min-width: 0; }
.user-name { font-size: 13px; font-weight: 600; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 11px; color: rgba(255,255,255,0.4); }

.btn-logout {
  color: rgba(255,255,255,0.4); font-size: 18px; padding: 4px;
  transition: color 0.2s;
}
.btn-logout:hover { color: var(--danger); }

/* ─── SIDEBAR : MODE FOCUS (wizard création ticket) ─── */

/* 1. Transparence : sidebar s'efface visuellement en faveur du wizard */
.sidebar--focus {
  opacity: 0.82;
  transition: opacity 0.35s ease, transform 0.3s ease;
}
.sidebar--focus:hover {
  opacity: 1;
  transition: opacity 0.18s ease, transform 0.3s ease;
}

/* 2. Masquage + animation fluide lors du toggle ──────────────────────── */
.sidebar--focus .nav-section,
.sidebar--focus .sidebar-footer,
.sidebar--focus .nav-item:not(.focus-keep) {
  max-height: 0 !important;
  height: 0 !important;      /* belt-and-suspenders : force collapse sur flex */
  overflow: hidden !important;
  opacity: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
  pointer-events: none !important;
  transition: max-height 0.35s ease, opacity 0.25s ease,
              height 0.35s ease, padding 0.3s ease, margin 0.3s ease;
}

.sidebar--focus .sidebar-nav {
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}

/* Item "Nouveau Ticket" hors focus mode : cliquable normalement */
.focus-keep {
  pointer-events: auto;
}

/* Item "Nouveau Ticket" en mode focus : mis en valeur, non-cliquable
   (l'utilisateur est déjà sur la page du wizard) */
.sidebar--focus .focus-keep {
  max-height: 60px !important;
  overflow: visible !important;
  opacity: 1 !important;
  color: white !important;
  background: rgba(43,168,134,0.18) !important;
  border-left-color: var(--teal) !important;
  font-size: 14px;
  font-weight: 700;
  padding: 14px 20px !important;
  border-radius: 0 8px 8px 0;
  margin-right: 12px;
  pointer-events: none !important;
  transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.3s ease;
}
.sidebar--focus .focus-keep .nav-icon {
  font-size: 18px;
  color: var(--teal);
}

/* Étiquette discrète "Mode focus" sous le logo */
.sidebar--focus .sidebar-header::after {
  content: 'Mode focus';
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.20);
  margin-top: 6px;
}

/* Bouton "Afficher menu entier" */
.focus-toggle-btn { display: none; }

.sidebar--focus .focus-toggle-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 24px);
  margin: 12px 12px 0;
  padding: 10px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  color: rgba(255,255,255,0.45);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}
.sidebar--focus .focus-toggle-btn:hover {
  color: white;
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.22);
}
.focus-toggle-icon {
  font-size: 14px;
  transition: transform 0.25s ease;
  display: inline-block;
}

/* ─── ÉTAT ÉTENDU : animation de réapparition du menu complet ─── */
.sidebar--focus.focus-expanded {
  opacity: 1; /* opacité pleine quand menu ouvert */
}

.sidebar--focus.focus-expanded .nav-section {
  max-height: 60px !important;
  height: auto !important;
  opacity: 1 !important;
  padding-top: 20px !important;
  padding-bottom: 6px !important;
  margin: 0 !important;
  pointer-events: auto !important;
}
.sidebar--focus.focus-expanded .nav-item:not(.focus-keep) {
  max-height: 60px !important;
  height: auto !important;
  opacity: 1 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  margin: 0 !important;
  pointer-events: auto !important;
}
.sidebar--focus.focus-expanded .sidebar-footer {
  max-height: 100px !important;
  height: auto !important;
  opacity: 1 !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  margin: 0 !important;
  pointer-events: auto !important;
}
.sidebar--focus.focus-expanded .focus-keep {
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 10px 20px !important;
  border-radius: 0 !important;
  margin-right: 0 !important;
  pointer-events: auto !important;
}
.sidebar--focus.focus-expanded .sidebar-header::after { display: none; }
.sidebar--focus.focus-expanded .focus-toggle-btn {
  color: var(--teal);
  border-color: rgba(43,168,134,0.40);
  background: rgba(43,168,134,0.08);
}
.sidebar--focus.focus-expanded .focus-toggle-icon {
  transform: rotate(90deg);
}

/* ─── MAIN CONTENT — décalage via margin-left quand sidebar ouverte ─── */
.main-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
  margin-left: 0;
  transition: margin-left 0.3s ease, width 0.3s ease;
}
/* Quand sidebar ouverte : pousse le contenu vers la droite */
.main-content.sidebar-open {
  margin-left: var(--sidebar-width);          /* 260 px */
  width: calc(100% - var(--sidebar-width));
}

/* ─── TOPBAR ─── */
.topbar {
  height: var(--topbar-height);
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Groupe gauche : burger + logo */
.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* Logo dans le topbar : transition pour le masquage quand la sidebar est ouverte */
.topbar-logo {
  display: flex; align-items: center; text-decoration: none;
  transition: opacity 0.25s ease;
  flex-shrink: 0;
}
.topbar-logo img { display: block; max-height: 32px; width: auto; }

/* Push mode : le logo reste toujours visible, pas de masquage nécessaire */

/* ─── Burger menu — 48×48 px, overlay mode ────────────────────────────── */
.burger-menu {
  display: block;
  width:  48px;
  height: 48px;
  padding: 0;
  margin: 0;

  background: transparent;
  border: none;
  outline: none;
  border-radius: 10px;
  cursor: pointer;

  position: relative;
  z-index: 20;    /* push mode : le burger est dans le flux, pas de conflit de calques */
  flex-shrink: 0;

  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;

  transition: background 0.2s ease, transform 0.12s ease;
}
.burger-menu:hover  { background: rgba(0,0,0,.08); }
.burger-menu:active { transform: scale(0.95); }

.burger-menu span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  pointer-events: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: background 0.2s ease;
}
.burger-menu span:nth-child(1) { top: 16px; }
.burger-menu span:nth-child(2) { top: 23px; }
.burger-menu span:nth-child(3) { top: 30px; }

.page-title {
  justify-self: center;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #475569;
  background: #f1f5f9;
  border-radius: 9999px;
  padding: 6px 22px;
  white-space: nowrap;
}

.topbar-actions { display: flex; gap: 8px; align-items: center; justify-self: end; }

/* ─── CONTENT ─── */
/* Centré avec une largeur max : évite que tableaux/formulaires s'étirent
   sur toute la largeur des grands écrans (lisibilité). Sans effet sur les
   écrans ≤1600px, où le contenu occupe déjà tout l'espace disponible. */
.content { padding: 24px; flex: 1; overflow-x: hidden; max-width: 1600px; width: 100%; margin: 0 auto; }

/* ─── ALERTS ─── */
.alert {
  padding: 14px 20px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 500;
}
.alert-info { background: var(--blue-pale); color: var(--blue); border: 1px solid rgba(74,144,196,0.2); }
.alert-success { background: var(--teal-pale); color: var(--teal); border: 1px solid rgba(43,168,134,0.2); }
.alert-danger { background: #fde8ea; color: var(--danger); border: 1px solid rgba(220,53,69,0.2); }
.alert-warning { background: #fff3e0; color: var(--warning); border: 1px solid rgba(253,126,20,0.2); }
.alert-close { background: none; border: none; font-size: 18px; cursor: pointer; color: inherit; opacity: 0.6; }
.alert-close:hover { opacity: 1; }

/* ── Toast de confirmation ───────────────────────────────────────────────
   Réservé aux messages de SUCCÈS. Il ne pousse rien : une bonne nouvelle ne
   doit pas déplacer l'écran sous les doigts de celui qui vient de cliquer.
   Les erreurs gardent le bandeau, justement parce qu'il pousse. */
.lz-toast {
  position: fixed; z-index: 4000;
  top: 18px; right: 18px; max-width: min(380px, calc(100vw - 36px));
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 14px;
  background: var(--bg-white, #fff);
  border: 1px solid var(--teal, #2BA886);
  border-left: 4px solid var(--teal, #2BA886);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.16);
  font-size: 13px; font-weight: 600; line-height: 1.5;
  color: var(--text-dark, #1f2937);
  animation: lzToastIn .28s cubic-bezier(.2,.9,.3,1.2);
}
.lz-toast > i { color: var(--teal, #2BA886); font-size: 15px; margin-top: 1px; flex-shrink: 0; }
.lz-toast > span { min-width: 0; overflow-wrap: anywhere; }
.lz-toast-close {
  background: none; border: none; cursor: pointer; padding: 0 0 0 4px;
  font-size: 17px; line-height: 1; color: var(--text-light); opacity: .55; flex-shrink: 0;
}
.lz-toast-close:hover { opacity: 1; }
.lz-toast--out { animation: lzToastOut .38s ease forwards; }

@keyframes lzToastIn  { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes lzToastOut { to   { opacity: 0; transform: translateY(-10px); } }

/* Sur mobile, la barre du haut est déjà chargée : le toast passe en bas. */
@media (max-width: 640px) {
  .lz-toast { top: auto; bottom: 18px; left: 18px; right: 18px; max-width: none; }
  @keyframes lzToastIn  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes lzToastOut { to   { opacity: 0; transform: translateY(10px); } }
}

@media (prefers-reduced-motion: reduce) {
  .lz-toast, .lz-toast--out { animation: none; }
  .lz-toast--out { opacity: 0; }
}

/* ─── CARDS ─── */
.card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

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

.card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
}

/* ─── STAT CARDS ─── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

.stat-label { font-size: 12px; font-weight: 600; color: var(--text-light); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.stat-value { font-size: 28px; font-weight: 800; color: var(--text-dark); line-height: 1; }
.stat-sub { font-size: 12px; color: var(--text-light); margin-top: 4px; }
.stat-value.teal { color: var(--teal); }
.stat-value.blue { color: var(--blue); }
.stat-value.navy { color: var(--navy); }

/* ─── TABLES ─── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
th {
  text-align: left;
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-light);
  background: var(--bg);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text);
  vertical-align: middle;
}
tr:hover td { background: rgba(43,168,134,0.02); }

.table-actions { display: flex; gap: 6px; }

/* ─── BADGES ─── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.badge-statut { color: white; }

/* ── Fonds clairs : texte sombre pour le contraste WCAG AA ── */
/* Amber #f59e0b → diagnostic_terminé, en_attente_client (ratio 6.3:1) */
.badge-statut[style*="#f59e0b"] { color: #78350f !important; }
/* Orange #fd7e14 → diagnostic (ratio 4.8:1) */
.badge-statut[style*="#fd7e14"] { color: #7c2d12 !important; }
/* Orange #f97316 → pièces arrivées (ratio 4.5:1) */
.badge-statut[style*="#f97316"] { color: #7c2d12 !important; }
/* Orange #e67e22 → pièces à commander (ratio 4.4:1) */
.badge-statut[style*="#e67e22"] { color: #7c2d12 !important; }

/* ── Variante grande taille pour les en-têtes de fiches ── */
.badge-lg {
  padding: 6px 14px !important;
  font-size: 13px !important;
}

.badge-priorite-basse { background: #e9ecef; color: #4b5563; font-weight: 700; }
.badge-priorite-normale { background: #dbeafe; color: #1d4ed8; font-weight: 700; }
.badge-priorite-haute { background: #ffedd5; color: #c2410c; font-weight: 700; }
.badge-priorite-urgente { background: #dc2626; color: #fff; font-weight: 700; box-shadow: 0 0 0 2px #fca5a5; }

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-family: var(--police);
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary { background: var(--teal); color: white; box-shadow: 0 2px 8px rgba(43,168,134,0.25); }
.btn-primary:hover { background: var(--teal-light); box-shadow: 0 4px 16px rgba(43,168,134,0.35); transform: translateY(-1px); color: white; }

.btn-secondary { background: var(--bg); color: var(--text-dark); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--teal); color: var(--teal); }

.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { background: #c82333; color: white; }

.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-icon { padding: 10px; min-width: 44px; min-height: 44px; justify-content: center; }

/* ─── FORMS ─── */
.form-group { margin-bottom: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.field-hint { font-size: 11px; color: var(--text-light); margin-top: 4px; }

label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], input[type="date"],
input[type="url"], input[type="search"], select, textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--police);
  font-size: 14px;
  color: var(--text-dark);
  background: var(--bg-white);
  transition: border-color 0.2s, box-shadow 0.2s;
}

input::placeholder, textarea::placeholder { color: var(--text-light); opacity: .65; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(43,168,134,0.1);
}

textarea { resize: vertical; min-height: 80px; }
select { cursor: pointer; }

.form-help { font-size: 11px; color: var(--text-light); margin-top: 4px; }

.statut-select-wrap { position: relative; }
.statut-select-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 10px 14px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg-white);
  font-family: var(--police); font-size: 13px; color: var(--text-dark);
  cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s;
}
.statut-select-trigger:hover { border-color: var(--teal); }
.statut-select-trigger.open { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(43,168,134,0.1); }
.statut-select-trigger-content { display: flex; align-items: center; gap: 8px; }
.statut-select-chevron { color: var(--text-light); transition: transform 0.15s; font-size: 12px; }
.statut-select-trigger.open .statut-select-chevron { transform: rotate(180deg); }
.statut-select-menu {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 100;
  background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); max-height: none; overflow-y: visible; padding: 4px;
}
.statut-select-menu.open { display: block; }
.statut-select-option {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-dark); cursor: pointer; transition: background 0.15s;
}
.statut-select-option:hover { background: var(--teal-pale); }
.statut-select-option.active { background: var(--teal-pale); font-weight: 600; }

/* ─── SEARCH BAR ─── */
.search-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.search-bar input {
  flex: 1;
  padding: 10px 16px;
  padding-left: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%238A9BAA' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 14px center;
}

/* ─── PAGINATION ─── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 24px;
}

.pagination a, .pagination span {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border);
  color: var(--text);
  transition: all 0.2s;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pagination a:hover { border-color: var(--teal); color: var(--teal); }
.pagination .active { background: var(--teal); color: white; border-color: var(--teal); }

/* ─── TIMELINE ─── */
.timeline { position: relative; padding-left: 28px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 8px; top: 0; bottom: 0;
  width: 2px;
  background: var(--border);
}

.timeline-item {
  position: relative;
  padding-bottom: 20px;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -24px; top: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--teal);
  background: var(--bg-white);
}

.timeline-date { font-size: 11px; color: var(--text-light); margin-bottom: 4px; }
.timeline-content { font-size: 13px; }
.timeline-user { font-weight: 600; color: var(--text-dark); }

/* ─── EMPTY STATE ─── */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-light);
}
.empty-state-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.3; }
.empty-state h3 { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.empty-state p { font-size: 13px; margin-bottom: 20px; }

/* ─── MODAL ─── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.show { display: flex; }

.modal {
  background: var(--bg-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-header h3 { font-size: 16px; font-weight: 700; color: var(--text-dark); }
.modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-light); }
.modal-body { padding: 24px; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }

/* ─── TABS ─── */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 24px;
}
.tab {
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: all 0.2s;
}
.tab:hover { color: var(--text-dark); }
.tab.active { color: var(--teal); border-bottom-color: var(--teal); }

/* ─── LOGIN PAGE ─── */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 20px;
}

.login-card {
  background: var(--bg-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 48px 40px;
  width: 100%;
  max-width: 420px;
}

.login-logo {
  text-align: center;
  margin-bottom: 32px;
}
.login-logo img { height: 40px; }
.login-subtitle {
  text-align: center;
  font-size: 14px;
  color: var(--text-light);
  margin-bottom: 32px;
}

.login-card .btn-primary {
  width: 100%;
  justify-content: center;
  padding: 12px;
  font-size: 14px;
}

/* ─── FILTERS ─── */
.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.filter-chip {
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--bg-white);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.filter-chip:hover, .filter-chip.active { border-color: var(--teal); color: var(--teal); background: var(--teal-pale); }

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row-3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    z-index: 9000;
  }
  .sidebar.open { transform: translateX(0); }
  /* .sidebar-close géré par .sidebar.open .sidebar-close (voir règle globale ci-dessus) */
  .burger-menu { display: block; } /* conserve display: block sur mobile */

  .main-content { margin-left: 0; max-width: 100vw; }

  .content { padding: 12px; overflow-x: hidden; }

  .card, .card-xl { max-width: 100% !important; width: 100%; overflow-x: auto; }

  .modal { max-width: calc(100vw - 24px); margin: 0 12px; }

  /* Grilles 2 colonnes → 1 colonne mobile */
  .grid-2col { grid-template-columns: 1fr !important; }

  /* Chat bulles plus larges */
  .chat-bubble { max-width: 85% !important; }

  /* Search bar pleine largeur */
  .search-bar { max-width: 100% !important; width: 100%; }

  /* Masquer colonnes secondaires dans les tableaux de saisie */
  .hide-mobile { display: none !important; }

  .stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }

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

  .page-title { font-size: 14px; padding: 5px 18px; }

  table { font-size: 12px; }
  th, td { padding: 10px 12px; }

  /* Tables responsives : mode carte */
  .table-responsive thead { display: none; }
  .table-responsive tbody tr {
    display: block;
    padding: 16px;
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-white);
  }
  .table-responsive tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-light);
  }
  .table-responsive tbody td:last-child { border-bottom: none; }
  .table-responsive tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-light);
    letter-spacing: 0.5px;
  }

  /* ── Mode focus mobile : sidebar complètement cachée, burger masqué ── */
  .sidebar--focus {
    transform: translateX(-100%) !important;
    pointer-events: none !important;
    opacity: 1 !important; /* pas de transparence inutile quand cachée */
  }
  .sidebar--focus.open,
  .sidebar--focus.focus-expanded {
    transform: translateX(-100%) !important; /* bloque l'ouverture mobile */
  }
  .sidebar--focus ~ .main-content .burger-menu {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .login-card { padding: 32px 24px; }
  .search-bar { flex-direction: column; }
}

/* ─── BARRE NAVIGATION MOBILE (bas) ─── */
/* ─── BOTTOM NAVIGATION BAR (Glassmorphism, mobile uniquement) ─── */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 8000;
  /* Glassmorphism */
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 -1px 0 rgba(0,0,0,0.06), 0 -4px 20px rgba(0,0,0,0.08);
  justify-content: space-evenly;  /* 4 items : répartition parfaite */
  align-items: stretch;
  height: var(--mnav-h);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 768px) {
  /* ── Bottom nav visible ──────────────────────────────────────── */
  .mobile-bottom-nav { display: flex; }
  .content {
    padding: 16px;              /* padding réduit sur mobile */
    padding-bottom: calc(var(--mnav-h) + 24px);  /* dégage la barre du bas */
    max-width: 100%;            /* assure 100% de largeur */
  }

  /* ── Sidebar : complètement désactivé sur mobile ────────────────
     Le sidebar classique (gauche) n'existe plus sur mobile.
     La navigation se fait uniquement via la Bottom Nav + App Drawer. */
  .sidebar {
    display: none !important;       /* supprime le sidebar du flux et de l'affichage */
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* ── Main content : 100% de la largeur, aucune marge résiduelle ─ */
  .main-content,
  .main-content.sidebar-open {
    margin-left: 0 !important;
    width: 100% !important;
    overflow-x: hidden;  /* évite overflow horizontal */
  }

  /* ── Burger : desktop uniquement, masqué sur mobile ─────────────
     Le tiroir est déclenché depuis la bottom bar (#drawerTrigger). */
  .burger-menu { display: none !important; }

  /* ── Header mobile équilibré ─────────────────────────────────── */
  .topbar { padding: 0 16px; }
  .topbar-left { gap: 6px; }
  .topbar-logo img { max-height: 28px; }
  .page-title { font-size: 13px; padding: 4px 14px; white-space: normal; text-align: center; }
}

/* Items de navigation (4 boutons optimisés pour thumb mobile) */
.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--text-light);
  font-size: 11px;
  font-weight: 700;
  flex: 1;
  padding: 4px 6px;
  border-radius: 14px;
  transition: color .2s, background .15s, transform .12s;
  position: relative;
  cursor: pointer;
  background: none; border: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.mobile-nav-item:active { transform: scale(0.93); }
.mobile-nav-item.active {
  color: var(--teal);
  background: var(--teal-pale);
}

.mobile-nav-icon {
  font-size: 19px;
  line-height: 1;
  height: 21px;
  display: flex; align-items: center; justify-content: center;
}
.mobile-nav-label {
  font-size: 10.5px;
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: .1px;
}

/* Bouton tiroir : couleur teal quand ouvert */
.mobile-nav-menu.active {
  color: var(--teal);
}
.mobile-nav-menu.active .mobile-nav-grid-icon span {
  background: var(--teal);
}

/* Icône grille 2×2 pour le bouton tiroir */
.mobile-nav-grid-icon {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.5px;
  width: 19px;
  height: 19px;
  font-size: 0;
  line-height: 0;
}
.mobile-nav-grid-icon span {
  display: block;
  background: currentColor;
  border-radius: 3px;
  width: 100%;
  height: 100%;
  transition: background 0.2s;
}

/* Badge pour messages non lus dans le chat */
.mobile-chat-badge {
  position: absolute;
  top: 2px;
  right: calc(50% - 18px);
  width: 10px;
  height: 10px;
  background: var(--danger);
  border-radius: 50%;
  font-size: 0;
  color: transparent;
  box-shadow: 0 0 0 2px var(--bg-white);
  animation: mobileBadgePulse 1.5s ease-in-out infinite;
}
@keyframes mobileBadgePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.15); }
}

/* ─── APP DRAWER (bottom sheet, style iOS — mobile uniquement) ─── */
.mobile-drawer-overlay {
  display: none !important;  /* caché par défaut (desktop) */
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 8500;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: drawerFadeIn .2s ease;
}
.mobile-drawer-overlay.visible { display: block !important; }
@keyframes drawerFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── La feuille ───────────────────────────────────────────────────────
   Elle s'arrête PILE sur la barre du bas : même expression de hauteur des
   deux côtés (--mnav-h), donc aucun filet de page visible entre les deux.
   Toutes les couleurs passent par les variables du thème — le mode sombre
   suit tout seul, sans une seule règle en double. */
.mobile-app-drawer {
  display: none !important;  /* caché par défaut (desktop) */
  position: fixed;
  bottom: var(--mnav-h); left: 0; right: 0;
  z-index: 8600;
  background: var(--bg-white);
  border-radius: 24px 24px 0 0;
  max-height: 78vh;
  transform: translateY(110%);
  transition: transform .34s cubic-bezier(.32,.72,0,1);
  box-shadow: 0 -1px 0 var(--border), 0 -12px 44px rgba(0,0,0,.22);
}
/* Mobile uniquement : affiche le drawer (l'overlay reste géré par .visible) */
@media (max-width: 768px) {
  .mobile-app-drawer { display: flex !important; flex-direction: column; }
}
.mobile-app-drawer.open { transform: translateY(0); }

/* Poignée drag */
.drawer-handle {
  flex: none;
  padding: 10px 0 6px;
  cursor: grab;
  touch-action: none;
}
.drawer-handle::before {
  content: '';
  display: block;
  width: 38px; height: 5px;
  background: var(--border);
  border-radius: 3px;
  margin: 0 auto;
}

/* Zone défilante : c'est ELLE qui scrolle, pas la feuille — le geste de
   fermeture peut ainsi se distinguer d'un simple défilement. */
.drawer-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 2px 14px calc(14px + env(safe-area-inset-bottom, 0px));
}

/* Sections : plus de cartes blanches sur fond gris. Une légende discrète
   suffit à séparer, comme sur l'écran d'accueil d'un téléphone. */
.drawer-section { margin: 0 0 4px; }
.drawer-section-title {
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.1px;
  color: var(--text-light);
  margin: 14px 0 8px; padding: 0 4px;
}
.drawer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px 2px;
  margin: 0;
}

/* Une tuile = plaque d'icône arrondie + libellé dessous. */
.drawer-app-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-decoration: none; padding: 8px 2px 10px; border-radius: 16px;
  background: transparent;
  color: var(--text-dark);
  text-align: center;
  transition: transform .12s ease;
  border: none;
  -webkit-tap-highlight-color: transparent;
}
.drawer-app-item:active { transform: scale(0.94); }

.drawer-app-icon {
  position: relative;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 15px;
  background: var(--border-light);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--teal);
  font-size: 18px;
  transition: background .18s, color .18s, box-shadow .18s;
}
.drawer-app-label {
  font-size: 10.5px; font-weight: 600; line-height: 1.25;
  letter-spacing: .1px;
  /* Deux lignes maximum : les libellés longs (« Nouveau Ticket ») ne
     décalent plus la rangée entière. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;
}

/* Page courante : plaque pleine, comme l'app ouverte sur un téléphone. */
.drawer-app-item.active .drawer-app-icon {
  background: var(--teal);
  color: #fff;
  box-shadow: 0 4px 12px var(--teal-pale);
}
.drawer-app-item.active .drawer-app-label {
  color: var(--teal); font-weight: 800;
}

/* Compteur (tickets en alerte, messages non lus) posé sur la plaque. */
.drawer-app-count {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--danger);
  color: #fff;
  font-size: 10px; font-weight: 800; line-height: 19px;
  box-shadow: 0 0 0 2px var(--bg-white);
}

/* ── Pied de tiroir : le compte ────────────────────────────────────── */
.drawer-account {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.drawer-account-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 4px; border-radius: 14px;
  text-decoration: none; color: var(--text-dark);
  -webkit-tap-highlight-color: transparent;
}
.drawer-account-item:active { background: var(--border-light); }
.drawer-account-avatar {
  flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient); color: #fff;
  font-size: 15px; font-weight: 800;
}
.drawer-account-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.drawer-account-name {
  font-size: 13.5px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drawer-account-sub { font-size: 11px; color: var(--text-light); }
.drawer-account-links { display: flex; gap: 8px; margin-top: 8px; }
.drawer-account-logout { flex: 1; display: flex; }
.drawer-account-link {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 8px; border-radius: 13px;
  background: var(--border-light);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-dark);
  font-size: 12.5px; font-weight: 700;
  font-family: inherit;
  text-decoration: none; border: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.drawer-account-link:active { transform: scale(0.97); }
.drawer-account-danger { color: var(--danger); }

/* iPhone SE (375px) : plaques un peu plus compactes */
@media (max-width: 375px) {
  .drawer-scroll        { padding-left: 10px; padding-right: 10px; }
  .drawer-app-icon      { width: 42px; height: 42px; font-size: 16px; border-radius: 14px; }
  .drawer-app-label     { font-size: 10px; }
  .drawer-app-item      { padding: 6px 2px 8px; }
}
/* Divider : la légende de section suffit désormais à séparer. */
.drawer-divider { display: none; }

/* Mouvement réduit : la feuille apparaît sans glisser. */
@media (prefers-reduced-motion: reduce) {
  .mobile-app-drawer { transition: none; }
  .mobile-chat-badge { animation: none; }
}

/* Dark mode : seule la barre du bas a besoin d'un ajustement (le verre
   translucide ne peut pas se déduire d'une variable). */
[data-theme="dark"] .mobile-bottom-nav {
  background: rgba(18,18,18,.9);
  border-color: rgba(255,255,255,.08);
}

/* ─── DARK MODE ─────────────────────────────────────────────────────────── */
/*
  Palette :
  Fonds     : #121212 (principal), #1a1a1a (légèrement relevé), #242424 (cartes)
  Texte     : #e2e8f0 (principal), #94a3b8 (secondaire)
  Bordures  : #2d2d2d (subtil), #3a3a3a (visible)
  Accents   : teal → #34d399, blue → #60a5fa (plus vibrants sur fond sombre)
*/

/* Transition douce sur tous les éléments clés */
body, .card, .topbar, .sidebar, input, select, textarea, th, td,
.btn, .alert, .badge, .modal-overlay, .wz-card {
  transition: background-color 0.25s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ──────────────────────────────────────────────────────────────────────────
   DARK MODE — sélecteur à spécificité 0,1,0 (attribute)
   Le <style> inline de header.php a la même spécificité sur :root.
   Pour les variables de couleur tenant (--teal, --blue), on les surcharge
   directement sur html[data-theme="dark"] (spécificité 0,1,1 > :root 0,0,1).
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] {
  --teal:      #34d399 !important;
  --teal-light:#4ade80 !important;
  --teal-pale: rgba(52,211,153,.12) !important;
  --blue:      #60a5fa !important;
  --blue-light:#93c5fd !important;
  --blue-pale: rgba(96,165,250,.12) !important;
  --navy:      #e2e8f0 !important;
  --gradient:  linear-gradient(135deg,#34d399,#60a5fa) !important;
}

[data-theme="dark"] {
  /* ── Variables globales ── */
  --bg:           #121212;
  --bg-white:     #1a1a1a;
  --text:         #94a3b8;
  --text-dark:    #e2e8f0;
  --text-light:   #64748b;
  --border:       #2d2d2d;
  --border-light: #232323;
  --shadow:       0 2px 12px rgba(0,0,0,.5);
  --shadow-lg:    0 8px 32px rgba(0,0,0,.6);
  --teal:         #34d399;
  --teal-light:   #4ade80;
  --teal-pale:    rgba(52,211,153,.12);
  --blue:         #60a5fa;
  --blue-light:   #93c5fd;
  --blue-pale:    rgba(96,165,250,.12);
  --navy:         #e2e8f0;           /* texte clair sur fonds sombres */
  --gradient:     linear-gradient(135deg, #34d399, #60a5fa);
  --danger:       #f87171;
  --warning:      #fb923c;
  --success:      #4ade80;
  --info:         #60a5fa;
}

/* ── Base ── */
[data-theme="dark"] body       { background: var(--bg); color: var(--text-dark); }
[data-theme="dark"] a          { color: var(--teal); }

/* ── Topbar ── */
[data-theme="dark"] .topbar {
  background: #181818;
  border-color: var(--border);
}
[data-theme="dark"] .page-title { color: #cbd5e1; background: rgba(255,255,255,.08); }
[data-theme="dark"] .burger-menu span   { background: #e2e8f0 !important; }
[data-theme="dark"] .burger-menu:hover  { background: rgba(255,255,255,.08) !important; }

/* ── Sidebar (déjà sombre — ajustements fins) ── */
[data-theme="dark"] .sidebar { background: #0f1923; }
[data-theme="dark"] .sidebar-header { border-color: rgba(255,255,255,.05); }
[data-theme="dark"] .nav-section { color: rgba(255,255,255,.25); }
[data-theme="dark"] .nav-item { border-left-color: transparent; }
[data-theme="dark"] .nav-item.active { background: rgba(52,211,153,.18); border-left-color: #34d399; color: #34d399; font-weight: 600; }
[data-theme="dark"] .nav-item.active .nav-icon { color: #34d399; }
[data-theme="dark"] .sidebar-footer { border-color: rgba(255,255,255,.05); }

/* ── Cards ── */
[data-theme="dark"] .card,
[data-theme="dark"] .wz-card {
  background: #242424;
  border-color: var(--border);
  box-shadow: var(--shadow);
}
[data-theme="dark"] .card-header { border-color: var(--border); }
[data-theme="dark"] .card-title  { color: var(--text-dark); }

/* ── Formulaires ── */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: #1e1e1e;
  border-color: #3a3a3a;
  color: var(--text-dark);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #4a5568; }
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  background: #242424;
  border-color: var(--teal);
}
[data-theme="dark"] label { color: var(--text-dark); }

/* ── Tableaux ── */
[data-theme="dark"] table          { border-color: var(--border); }
[data-theme="dark"] th             { background: #1e1e1e; color: var(--text); border-color: var(--border); }
[data-theme="dark"] td             { border-color: var(--border-light); color: var(--text-dark); }
[data-theme="dark"] tr:hover td    { background: rgba(255,255,255,.03); }
[data-theme="dark"] .table-wrap    { border-color: var(--border); }

/* ── Boutons ── */
[data-theme="dark"] .btn-secondary {
  background: #2d2d2d; color: var(--text-dark); border-color: #3a3a3a;
}
[data-theme="dark"] .btn-secondary:hover { background: #383838; }
[data-theme="dark"] .btn-primary   { background: var(--teal); color: #0a1f0f; }
[data-theme="dark"] .btn-primary:hover { background: var(--teal-light); }
[data-theme="dark"] .btn-danger    { background: var(--danger); }

/* ── Alertes ── */
[data-theme="dark"] .alert-success { background: rgba(74,222,128,.1); color: #4ade80; border-color: rgba(74,222,128,.2); }
/* Le toast prend son fond de la carte, pas du blanc : sur fond sombre, un
   rectangle blanc éblouit et sort du thème. */
[data-theme="dark"] .lz-toast { background: var(--bg-card, #1b1f26); color: var(--text-dark); border-color: #2BA886; }
[data-theme="dark"] .lz-toast > i { color: #4ade80; }
[data-theme="dark"] .alert-danger  { background: rgba(248,113,113,.1); color: #f87171; border-color: rgba(248,113,113,.2); }
[data-theme="dark"] .alert-info    { background: rgba(96,165,250,.1); color: #60a5fa; border-color: rgba(96,165,250,.2); }
[data-theme="dark"] .alert-warning { background: rgba(251,146,60,.1);  color: #fb923c; border-color: rgba(251,146,60,.2); }

/* ── Badges de statut ── */
[data-theme="dark"] .badge { filter: brightness(1.2) saturate(1.1); }

/* ── Statistiques (stat cards) ── */
[data-theme="dark"] .stat-card  { background: #242424; border-color: var(--border); }
[data-theme="dark"] .stat-value { color: var(--text-dark); }
[data-theme="dark"] .stat-label { color: var(--text-light); }

/* ── Kanban ── */
[data-theme="dark"] .kb-col    { background: #1a1a1a; border-color: var(--border); }
[data-theme="dark"] .kb-header { background: #1e1e1e; border-color: var(--border); }
[data-theme="dark"] .kb-title  { color: #cbd5e1; }
[data-theme="dark"] .kb-card   { background: #242424; border-color: #3a3a3a; color: var(--text-dark); }
[data-theme="dark"] .kb-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.4); }
[data-theme="dark"] .kb-name   { color: #e2e8f0; }
[data-theme="dark"] .kb-dev    { color: #64748b; }
[data-theme="dark"] .kb-date   { color: #64748b; }
[data-theme="dark"] .kb-cards  { scrollbar-color: #3a3a3a transparent; }
[data-theme="dark"] .kb-empty  { border-color: #2d2d2d; color: #4a5568; }

/* ── Wizard (form.php) ── */
[data-theme="dark"] .wz-card  { background: #1e1e1e; }
[data-theme="dark"] .wz-title { color: var(--text-dark); }
[data-theme="dark"] .wz-recap-block { background: #242424; border-color: var(--border); }
[data-theme="dark"] .wz-recap-block:hover { box-shadow: 0 3px 12px rgba(0,0,0,.4); }
[data-theme="dark"] .rb-title  { color: #e2e8f0; }
[data-theme="dark"] .rb-sub    { color: #94a3b8; }
[data-theme="dark"] .wz-tarif-panel { background: #1e1e1e; border-color: var(--border); }
[data-theme="dark"] .wz-tarif-line  { border-color: #2d2d2d; }
[data-theme="dark"] .wz-tarif-line .tl-label  { color: #94a3b8; }
[data-theme="dark"] .wz-tarif-line .tl-amount { color: #e2e8f0; }

/* ── Modales ── */
[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,.7); }
[data-theme="dark"] .modal {
  background: #242424; border: 1px solid var(--border);
  box-shadow: 0 20px 50px rgba(0,0,0,.6);
}
[data-theme="dark"] .cs-modal     { background: #242424; }
[data-theme="dark"] .ch-modal     { background: #242424; }

/* ── Chat sidebar show ── */
[data-theme="dark"] .cs-conv-list  { background: #1a1a1a; border-color: var(--border); }
[data-theme="dark"] .cs-conv-item  { border-color: #1e1e1e; }
[data-theme="dark"] .cs-conv-item:hover { background: #242424; }
[data-theme="dark"] .cs-conv-item.active { background: rgba(52,211,153,.1); }
[data-theme="dark"] .cs-conv-num   { color: var(--teal); }
[data-theme="dark"] .cs-conv-name  { color: #94a3b8; }
[data-theme="dark"] .cs-main-panel { background: #1a1a1a; }
[data-theme="dark"] .cs-header     { background: linear-gradient(135deg, #0f1923, #1a3a2a); }
[data-theme="dark"] .cs-messages   { background: #161616; }
[data-theme="dark"] .cs-bubble.other {
  background: #2d2d2d; border-color: #3a3a3a; color: #e2e8f0;
}
[data-theme="dark"] .cs-input-bar  { background: #1a1a1a; border-color: var(--border); }
[data-theme="dark"] .cs-date-chip  { background: #2d2d2d; color: #64748b; }
[data-theme="dark"] .cs-pinned-bar { background: #1e1812; border-color: #5c4a1a; color: #fbbf24; }
[data-theme="dark"] .cs-pinned-panel { background: #1e1812; border-color: #5c4a1a; }
[data-theme="dark"] .cs-pp-header  { background: #261e0d; border-color: #5c4a1a; }
[data-theme="dark"] .cs-pi-item    { background: #242424; border-color: #5c4a1a; }

/* ── Login ── */
[data-theme="dark"] .login-page { background: #0f1923; }
[data-theme="dark"] .login-card {
  background: #1e1e1e; border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}

/* ── Bouton Dark Mode Toggle dans le topbar ── */
.theme-toggle {
  width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid var(--border);
  background: transparent; cursor: pointer; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s;
  flex-shrink: 0;
}
.theme-toggle:hover { background: rgba(0,0,0,.06); border-color: var(--teal); }
[data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,.06); }
[data-theme="dark"] .theme-toggle { border-color: #3a3a3a; }

/* ── Surcharges fond hardcodé (#fff / white) ── */
/* Ces règles couvrent les éléments qui n'utilisent pas var(--bg-white) */
[data-theme="dark"] html,
[data-theme="dark"] body             { background: #121212 !important; color: #e2e8f0; }
[data-theme="dark"] .app             { background: #121212; }
[data-theme="dark"] .main-content    { background: #121212; }
[data-theme="dark"] .content         { background: #121212; }
[data-theme="dark"] .card,
[data-theme="dark"] .wz-card         { background: #1e1e1e !important; border-color: #2d2d2d !important; }
[data-theme="dark"] .card-header     { background: #1e1e1e; border-color: #2d2d2d; }
[data-theme="dark"] .topbar          { background: #181818 !important; border-color: #2d2d2d !important; }
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea         { background: #1e1e1e !important; border-color: #3a3a3a !important; color: #e2e8f0 !important; }
[data-theme="dark"] table            { background: transparent; }
[data-theme="dark"] thead tr         { background: #1e1e1e !important; }
[data-theme="dark"] tbody tr         { background: #1a1a1a; }
[data-theme="dark"] tbody tr:nth-child(even) { background: #1e1e1e; }
[data-theme="dark"] tbody tr:hover   { background: #242424 !important; }
[data-theme="dark"] th, [data-theme="dark"] td { border-color: #2d2d2d !important; color: #e2e8f0; }
[data-theme="dark"] .table-wrap      { background: #1a1a1a; border-color: #2d2d2d !important; }

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE — AUDIT GLOBAL LISIBILITÉ
   Cibles : textes hardcodés, placeholders, dropdowns, wizard, clients, tables
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Héritage de couleur global (base sûre) ─────────────────────────── */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6,
[data-theme="dark"] p, [data-theme="dark"] span:not([class*="badge"]):not([class*="wz-badge"]),
[data-theme="dark"] li, [data-theme="dark"] dt, [data-theme="dark"] dd,
[data-theme="dark"] strong, [data-theme="dark"] b, [data-theme="dark"] small {
  color: #e2e8f0;
}
[data-theme="dark"] .page-title { color: #cbd5e1 !important; background: rgba(255,255,255,.08) !important; }

/* ── 2. Labels & textes secondaires ────────────────────────────────────── */
[data-theme="dark"] label                     { color: #cbd5e1 !important; }
[data-theme="dark"] .form-group label         { color: #cbd5e1 !important; }
[data-theme="dark"] .text-muted,
[data-theme="dark"] small,
[data-theme="dark"] .help-text                { color: #64748b !important; }

/* ── 3. Placeholder lisible ─────────────────────────────────────────────── */
[data-theme="dark"] ::placeholder             { color: #4a5568 !important; opacity: 1; }
[data-theme="dark"] ::-webkit-input-placeholder { color: #4a5568 !important; }
[data-theme="dark"] :-ms-input-placeholder    { color: #4a5568 !important; }

/* ── 4. Dropdowns & autocomplete (wizard, recherche client) ─────────────── */
[data-theme="dark"] .wz-search-results,
[data-theme="dark"] .ch-ac-results            { background: #1e1e1e !important; border-color: #3a3a3a !important; }
[data-theme="dark"] .wz-search-results .sr-item,
[data-theme="dark"] .ch-ac-item               { color: #e2e8f0 !important; border-color: #2d2d2d !important; }
[data-theme="dark"] .wz-search-results .sr-item:hover,
[data-theme="dark"] .ch-ac-item:hover         { background: #2d2d2d !important; }
[data-theme="dark"] .sr-phone,
[data-theme="dark"] .ch-ac-device             { color: #64748b !important; }

/* ── 5. Wizard — tous les steps ─────────────────────────────────────────── */
[data-theme="dark"] .wz-step             { color: #e2e8f0; }
[data-theme="dark"] .wz-title            { color: #e2e8f0 !important; }
[data-theme="dark"] .wz-section-title    { color: #e2e8f0 !important; }
[data-theme="dark"] .wz-client-box       { background: #1e2a1e !important; border-color: #34d399 !important; }
[data-theme="dark"] .cb-name             { color: #e2e8f0 !important; }
[data-theme="dark"] .cb-phone            { color: #94a3b8 !important; }
[data-theme="dark"] .wz-toggle-link      { color: #34d399 !important; }
[data-theme="dark"] .wz-type-card        { background: #1e1e1e !important; border-color: #3a3a3a !important; color: #e2e8f0 !important; }
[data-theme="dark"] .wz-type-card:hover  { background: #1e2a1e !important; border-color: #34d399 !important; }
[data-theme="dark"] .wz-type-card.selected { background: #1e2a1e !important; border-color: #34d399 !important; }
[data-theme="dark"] .tc-icon            { filter: brightness(1.1); }
[data-theme="dark"] .tc-label           { color: #e2e8f0 !important; }
[data-theme="dark"] .wz-prio-card       { border-color: #3a3a3a !important; }
[data-theme="dark"] .wz-chip            { background: #1e1e1e !important; border-color: #3a3a3a !important; color: #e2e8f0 !important; }
[data-theme="dark"] .wz-chip:hover      { border-color: #34d399 !important; }
[data-theme="dark"] .wz-chip.selected   { background: #34d399 !important; color: #0a1f0f !important; }
[data-theme="dark"] .wz-device-sidebar  { background: #1a2a20 !important; border-color: #34d399 !important; }
[data-theme="dark"] .ds-label           { color: #64748b !important; }
[data-theme="dark"] .ds-value           { color: #e2e8f0 !important; }
[data-theme="dark"] .ds-title           { color: #34d399 !important; }
[data-theme="dark"] .wz-panne-item      { background: #1e1e1e !important; border-color: #3a3a3a !important; }
[data-theme="dark"] .pi-label           { color: #e2e8f0 !important; }
[data-theme="dark"] .pi-prix            { color: #94a3b8 !important; background: rgba(0,0,0,.3) !important; }
[data-theme="dark"] .wz-panne-item.selected { background: #34d399 !important; }
[data-theme="dark"] .wz-panne-item.selected .pi-label { color: #0a1f0f !important; }
[data-theme="dark"] .wz-textarea-auto   { background: #1e1e1e !important; color: #64748b !important; }
[data-theme="dark"] .wz-error-msg       { color: #f87171 !important; }
[data-theme="dark"] .wz-form-grid label { color: #cbd5e1 !important; }
/* Recap Step 4 */
[data-theme="dark"] .rb-content .rb-title      { color: #e2e8f0 !important; }
[data-theme="dark"] .rb-content .rb-sub        { color: #94a3b8 !important; }
[data-theme="dark"] .rb-content .rb-sub2       { color: #64748b !important; }
[data-theme="dark"] .wz-recap-accordion        { background: #1a1a1a !important; border-color: #2d2d2d !important; }
[data-theme="dark"] .wz-tarif-panel            { color: #e2e8f0; }
[data-theme="dark"] #tarifBreakdown            { color: #e2e8f0; }
[data-theme="dark"] #tarifSummary .tl-label    { color: #94a3b8 !important; }
[data-theme="dark"] #tarifSummary .tl-amount   { color: #e2e8f0 !important; }

/* ── 6. Tableau — Suivi des interventions ──────────────────────────────── */
[data-theme="dark"] .card-title,
[data-theme="dark"] .card-header .card-title   { color: #e2e8f0 !important; }
[data-theme="dark"] th                         { color: #94a3b8 !important; }
[data-theme="dark"] td                         { color: #e2e8f0 !important; }
[data-theme="dark"] td a                       { color: #34d399 !important; }
[data-theme="dark"] td a:hover                 { color: #4ade80 !important; }
[data-theme="dark"] .badge                     { filter: brightness(1.15) saturate(1.1); }
[data-theme="dark"] .empty-state h3,
[data-theme="dark"] .empty-state p             { color: #94a3b8 !important; }
/* Liens stats sur le tableau de bord */
[data-theme="dark"] .stats-grid .stat-card     { background: #1e1e1e !important; }
[data-theme="dark"] .stats-grid .stat-value    { color: #e2e8f0 !important; }
[data-theme="dark"] .stats-grid .stat-label    { color: #94a3b8 !important; }

/* ── 7. Page Clients ────────────────────────────────────────────────────── */
[data-theme="dark"] .client-name,
[data-theme="dark"] .client-phone              { color: #e2e8f0 !important; }
[data-theme="dark"] .search-bar input          { background: #1e1e1e !important; color: #e2e8f0 !important; border-color: #3a3a3a !important; }
[data-theme="dark"] .filters-bar select        { background: #1e1e1e !important; color: #e2e8f0 !important; }

/* ── 8. Boutons (texte) ────────────────────────────────────────────────── */
[data-theme="dark"] .btn                       { color: #e2e8f0; }
[data-theme="dark"] .btn-secondary             { color: #e2e8f0 !important; }
[data-theme="dark"] .btn-sm                    { color: #e2e8f0; }

/* ── 9. Alertes — texte lisible ─────────────────────────────────────────── */
[data-theme="dark"] .alert                     { color: inherit; }

/* ── 10. Scrollbars dans les zones sombres ──────────────────────────────── */
[data-theme="dark"] ::-webkit-scrollbar        { width: 6px; height: 6px; }
[data-theme="dark"] ::-webkit-scrollbar-track  { background: #1a1a1a; }
[data-theme="dark"] ::-webkit-scrollbar-thumb  { background: #3a3a3a; border-radius: 3px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4a4a4a; }

/* ── 11. Divers — éléments inline hardcodés ─────────────────────────────── */
/* Surchage les couleurs inline fréquentes dans les vues PHP */
[data-theme="dark"] [style*="color: #1A3248"],
[data-theme="dark"] [style*="color:#1A3248"],
[data-theme="dark"] [style*="color: #374151"],
[data-theme="dark"] [style*="color:#374151"],
[data-theme="dark"] [style*="color: #1e293b"],
[data-theme="dark"] [style*="color:#1e293b"],
[data-theme="dark"] [style*="color: #1f2937"],
[data-theme="dark"] [style*="color:#1f2937"]   { color: #e2e8f0 !important; }

[data-theme="dark"] [style*="color: #4b5563"],
[data-theme="dark"] [style*="color:#4b5563"],
[data-theme="dark"] [style*="color: #475569"],
[data-theme="dark"] [style*="color:#475569"],
[data-theme="dark"] [style*="color: #64748b"],
[data-theme="dark"] [style*="color:#64748b"]   { color: #94a3b8 !important; }

[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background-color:#fff"] { background: #1e1e1e !important; }

[data-theme="dark"] [style*="background: #f5f6fa"],
[data-theme="dark"] [style*="background:#f5f6fa"],
[data-theme="dark"] [style*="background: #f8fafc"],
[data-theme="dark"] [style*="background:#f8fafc"],
[data-theme="dark"] [style*="background: #f3f4f6"],
[data-theme="dark"] [style*="background:#f3f4f6"] { background: #1a1a1a !important; }

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE — SUIVI DES INTERVENTIONS (tableau tickets)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Carte principale ───────────────────────────────────────────────────── */
[data-theme="dark"] .card { background: #0f172a !important; }

/* ── En-tête du tableau ─────────────────────────────────────────────────── */
[data-theme="dark"] table thead tr { background: #1e293b !important; }
[data-theme="dark"] table thead th {
  background: #1e293b !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  /* letter-spacing volontairement omis : doit rester identique au mode clair (1px, règle de base `th`)
     pour ne pas faire recalculer la largeur des colonnes (table-layout: auto) au changement de thème. */
  border-color: #273548 !important;
  border-bottom: 2px solid #273548 !important;
}

/* ── Lignes du tableau (zebra striping subtil) ──────────────────────────── */
[data-theme="dark"] table tbody tr:nth-child(odd)  { background: #0f172a !important; }
[data-theme="dark"] table tbody tr:nth-child(even) { background: #111827 !important; }
[data-theme="dark"] table tbody tr:hover           { background: #1e293b !important; cursor: pointer; }
[data-theme="dark"] table tbody td                 { border-color: #1e293b !important; }

/* ── Texte des colonnes ─────────────────────────────────────────────────── */
[data-theme="dark"] table tbody td              { color: #e2e8f0 !important; }
[data-theme="dark"] table tbody td strong       { color: #f1f5f9 !important; }
/* N° de ticket : accent coloré */
[data-theme="dark"] table tbody td a[href*="tickets/show"],
[data-theme="dark"] .ticket-num                 { color: #34d399 !important; font-weight: 700; }
/* Modèle appareil : gris moyen */
[data-theme="dark"] table tbody td .text-muted,
[data-theme="dark"] table tbody td small        { color: #64748b !important; }

/* ── Badges de statut (désaturés, non-néon) ─────────────────────────────── */
[data-theme="dark"] .badge                      { border: none !important; }
/* Réceptionné → bleu ardoise */
[data-theme="dark"] .badge[style*="3b82f6"],
[data-theme="dark"] [style*="background:#3b82f6"],
[data-theme="dark"] [style*="background: #3b82f6"] {
  background: rgba(59,130,246,.2) !important; color: #93c5fd !important;
}
/* En cours → vert sombre */
[data-theme="dark"] [style*="background:#2BA886"],
[data-theme="dark"] [style*="background: #2BA886"],
[data-theme="dark"] [style*="background:#34d399"],
[data-theme="dark"] [style*="background: #34d399"] {
  background: rgba(52,211,153,.15) !important; color: #6ee7b7 !important;
}
/* Prêt à rendre → cyan sombre */
[data-theme="dark"] [style*="background:#20c997"],
[data-theme="dark"] [style*="background: #20c997"] {
  background: rgba(32,201,151,.18) !important; color: #67e8f9 !important;
}
/* Urgente / Annulé → rouge sombre */
[data-theme="dark"] [style*="background:#dc2626"],
[data-theme="dark"] [style*="background: #dc2626"],
[data-theme="dark"] [style*="background:#dc3545"],
[data-theme="dark"] [style*="background: #dc3545"],
[data-theme="dark"] [style*="background:#b91c1c"],
[data-theme="dark"] [style*="background: #b91c1c"] {
  background: rgba(220,38,38,.2) !important; color: #fca5a5 !important;
}
/* Orange / En attente */
[data-theme="dark"] [style*="background:#fd7e14"],
[data-theme="dark"] [style*="background: #fd7e14"],
[data-theme="dark"] [style*="background:#f97316"],
[data-theme="dark"] [style*="background: #f97316"] {
  background: rgba(249,115,22,.18) !important; color: #fdba74 !important;
}
/* Jaune / Attente client */
[data-theme="dark"] [style*="background:#f59e0b"],
[data-theme="dark"] [style*="background: #f59e0b"] {
  background: rgba(245,158,11,.18) !important; color: #fcd34d !important;
}
/* Violet / Rendu */
[data-theme="dark"] [style*="background:#6f42c1"],
[data-theme="dark"] [style*="background: #6f42c1"] {
  background: rgba(111,66,193,.2) !important; color: #c4b5fd !important;
}
/* Gris / Diagnostic */
[data-theme="dark"] [style*="background:#6c757d"],
[data-theme="dark"] [style*="background: #6c757d"] {
  background: rgba(100,116,139,.2) !important; color: #94a3b8 !important;
}

/* ── Badges de priorité ─────────────────────────────────────────────────── */
[data-theme="dark"] .badge-priorite-urgente { background: rgba(153,27,27,.4) !important; color: #fca5a5 !important; }
[data-theme="dark"] .badge-priorite-haute   { background: rgba(154,52,18,.35) !important; color: #fdba74 !important; }
[data-theme="dark"] .badge-priorite-normale { background: rgba(6,78,59,.3) !important;   color: #6ee7b7 !important; }
[data-theme="dark"] .badge-priorite-basse   { background: rgba(30,41,59,.5) !important;  color: #64748b !important; }

/* ── Filtres (barre du haut) ────────────────────────────────────────────── */
/* Boutons de filtre de statut */
[data-theme="dark"] .filters-bar .btn,
[data-theme="dark"] .filter-btn,
[data-theme="dark"] [data-filter-btn] {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}
[data-theme="dark"] .filters-bar .btn:hover,
[data-theme="dark"] .filter-btn:hover {
  background: #273548 !important;
  border-color: #64748b !important;
  color: #e2e8f0 !important;
}
[data-theme="dark"] .filters-bar .btn.active,
[data-theme="dark"] .filter-btn.active {
  background: #34d399 !important;
  border-color: #34d399 !important;
  color: #052e16 !important;
}

/* Select de filtre (technicien, statut) */
[data-theme="dark"] .filters-bar select,
[data-theme="dark"] .search-bar select,
[data-theme="dark"] .filter-select    { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; }
[data-theme="dark"] .search-bar input { background: #1e293b !important; border-color: #334155 !important; color: #f8fafc !important; }
[data-theme="dark"] .search-bar input:focus { border-color: #34d399 !important; box-shadow: 0 0 0 2px rgba(52,211,153,.18) !important; }

/* ── Boutons d'actions (œil / chat) ─────────────────────────────────────── */
/* Supprime le fond blanc des boutons dans les cellules */
[data-theme="dark"] td .btn,
[data-theme="dark"] td .btn-sm {
  background: transparent !important;
  border: none !important;
  color: #475569 !important;
  padding: 4px 6px !important;
  border-radius: 6px !important;
  transition: color .15s, background .15s !important;
}
[data-theme="dark"] td .btn:hover,
[data-theme="dark"] td .btn-sm:hover { background: #1e293b !important; }
/* Œil → bleu au survol */
[data-theme="dark"] td .btn-secondary:hover { color: #60a5fa !important; }
/* Chat → vert au survol */
[data-theme="dark"] td a[href*="chat"]:hover { color: #34d399 !important; }
/* Danger → rouge atténué */
[data-theme="dark"] td .btn-danger { color: #7f1d1d !important; }
[data-theme="dark"] td .btn-danger:hover { color: #f87171 !important; background: rgba(127,29,29,.2) !important; }

/* ── Colonne RANGÉ (.td-localisation) ──────────────────────────────────── */
[data-theme="dark"] .td-localisation {
  background: #0d2038 !important;          /* bleu marine très sombre */
  color: #93c5fd !important;               /* bleu clair lisible */
  border: 1px solid #1e3a5f !important;    /* délimitation discrète */
}
/* Tiret (emplacement vide) */
[data-theme="dark"] td[data-label="Rangé"] {
  color: #334155 !important;              /* gris très discret */
}

/* ── Colonne ACTIONS (.btn-action) — style "Ghost" ──────────────────────── */
[data-theme="dark"] .btn-action {
  background: transparent !important;     /* exit le fond blanc */
  border-color: transparent !important;
  color: #475569 !important;              /* icônes gris ardoise par défaut */
  transition: color .15s, background .15s !important;
}
/* Œil (Voir) → bleu au survol */
[data-theme="dark"] .btn-action[title*="Voir"]:hover,
[data-theme="dark"] .btn-action[title*="fiche"]:hover {
  background: rgba(96,165,250,.12) !important;
  border-color: rgba(96,165,250,.25) !important;
  color: #60a5fa !important;
}
/* Chat → violet doux au survol */
[data-theme="dark"] .btn-action[title*="Chat"]:hover,
[data-theme="dark"] .btn-action[title*="message"]:hover,
[data-theme="dark"] .btn-action[title*="interne"]:hover {
  background: rgba(167,139,250,.12) !important;
  border-color: rgba(167,139,250,.25) !important;
  color: #a78bfa !important;
}
/* Chat avec messages non lus → rouge désaturé */
[data-theme="dark"] .btn-action.chat-unread {
  background: rgba(153,27,27,.4) !important;
  border-color: rgba(248,113,113,.35) !important;
  color: #fca5a5 !important;
  animation: pulse-chat 1.5s infinite !important;
}

/* ── Alignement vertical des cellules ───────────────────────────────────── */
[data-theme="dark"] table tbody td {
  vertical-align: middle !important;
}

/* ── Vide / empty state ─────────────────────────────────────────────────── */
[data-theme="dark"] .empty-state        { background: transparent !important; }
[data-theme="dark"] .empty-state-icon   { color: #1e293b !important; }
[data-theme="dark"] .empty-state h3     { color: #94a3b8 !important; }
[data-theme="dark"] .empty-state p      { color: #475569 !important; }

/* ── Pagination ─────────────────────────────────────────────────────────── */
[data-theme="dark"] .pagination .btn    { background: #1e293b !important; border-color: #334155 !important; color: #94a3b8 !important; }
[data-theme="dark"] .pagination .btn:hover { background: #273548 !important; color: #e2e8f0 !important; }
[data-theme="dark"] .pagination .btn.active { background: #34d399 !important; color: #052e16 !important; border-color: #34d399 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE — CHAT INTERNE (harmonisation complète)
   Palette : fond #0f172a, surfaces #1e293b, primaire #f8fafc, secondaire #94a3b8
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Page index : conteneur global ─────────────────────────────────────── */
[data-theme="dark"] .ch-wrap { color: #f8fafc; }

/* ── Pills de filtrage (compteurs) ─────────────────────────────────────── */
/* Inactif : fond sombre + texte clair */
[data-theme="dark"] .ch-pill {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}
[data-theme="dark"] .ch-pill:hover {
  background: #273548 !important;
  border-color: #34d399 !important;
  color: #e2e8f0 !important;
}
/* Actif : vert émeraude + texte très foncé (lisible) */
[data-theme="dark"] .ch-pill.active {
  background: #34d399 !important;
  border-color: #34d399 !important;
  color: #052e16 !important;           /* vert très sombre — contraste WCAG AA */
}
/* Compteur inactif */
[data-theme="dark"] .ch-pill-cnt {
  background: #0f172a !important;
  color: #94a3b8 !important;
}
/* Compteur actif */
[data-theme="dark"] .ch-pill.active .ch-pill-cnt {
  background: rgba(0,0,0,.25) !important;
  color: #052e16 !important;
}

/* ── Tableau des conversations (index) ──────────────────────────────────── */
[data-theme="dark"] .ch-table-wrap   { background: #0f172a !important; border-color: #1e293b !important; }
[data-theme="dark"] .ch-table th     { background: #1e293b !important; color: #64748b !important; border-color: #273548 !important; }
[data-theme="dark"] .ch-table tbody tr { background: #0f172a !important; border-color: #1e293b !important; }
[data-theme="dark"] .ch-table tbody tr:hover { background: #1e293b !important; }
[data-theme="dark"] .ch-table td     { color: #e2e8f0 !important; border-color: #1e293b !important; }
[data-theme="dark"] .ch-ticket-num   { color: #34d399 !important; }
[data-theme="dark"] .ch-status-badge { filter: brightness(.9) saturate(.8); }
[data-theme="dark"] .ch-client-name  { color: #f1f5f9 !important; }
[data-theme="dark"] .ch-last-date    { color: #e2e8f0 !important; }
[data-theme="dark"] .ch-last-snippet { color: #64748b !important; }
[data-theme="dark"] .ch-last-sender  { color: #94a3b8 !important; }
[data-theme="dark"] .ch-total-msg    { color: #64748b !important; }
[data-theme="dark"] .ch-avatar       { box-shadow: 0 0 0 2px #1e293b; }
[data-theme="dark"] .ch-actions .ch-action-btn {
  background: #1e293b !important; border-color: #334155 !important; color: #94a3b8 !important;
}
[data-theme="dark"] .ch-actions .ch-action-btn:hover {
  background: #273548 !important; border-color: #64748b !important; color: #e2e8f0 !important;
}
/* Étoile */
[data-theme="dark"] .ch-star-btn       { color: #334155 !important; }
[data-theme="dark"] .ch-star-btn:hover { color: #fbbf24 !important; }
[data-theme="dark"] .ch-star-btn.faved { color: #f59e0b !important; }
/* Vide */
[data-theme="dark"] .ch-filter-empty  { color: #334155 !important; }
[data-theme="dark"] .ch-empty         { color: #334155 !important; }

/* ── Layout show.php : fond global ──────────────────────────────────────── */
[data-theme="dark"] .cs-layout { box-shadow: 0 2px 24px rgba(0,0,0,.5) !important; }

/* ── Sidebar liste conversations (show) ─────────────────────────────────── */
[data-theme="dark"] .cs-conv-list  { background: #0f172a !important; border-color: #1e293b !important; }
[data-theme="dark"] .cs-conv-search-wrap { border-color: #1e293b !important; background: #0f172a !important; }
[data-theme="dark"] .cs-conv-search { background: #1e293b !important; border-color: #334155 !important; color: #f8fafc !important; }
[data-theme="dark"] .cs-conv-search:focus { border-color: #34d399 !important; box-shadow: 0 0 0 2px rgba(52,211,153,.18) !important; }
[data-theme="dark"] .cs-conv-item  { background: transparent; border-color: #1e293b !important; }
[data-theme="dark"] .cs-conv-item:hover { background: #1e293b !important; }
/* Conversation active : fond bleu-ardoise doux */
[data-theme="dark"] .cs-conv-item.active {
  background: #1e2a3a !important;       /* gris bleuté foncé — non éblouissant */
  border-left-color: #34d399 !important;
}
[data-theme="dark"] .cs-conv-num  { color: #34d399 !important; }
[data-theme="dark"] .cs-conv-name { color: #94a3b8 !important; }
/* Pills sidebar */
[data-theme="dark"] .cs-spill {
  background: #1e293b !important; border-color: #334155 !important; color: #64748b !important;
}
/* Vide */
[data-theme="dark"] #csSidebarEmpty { color: #334155 !important; }

/* ── Header du chat ─────────────────────────────────────────────────────── */
[data-theme="dark"] .cs-header { background: linear-gradient(135deg, #0f1923 0%, #0d2318 100%) !important; }
[data-theme="dark"] .cs-ticket-num { color: #fff !important; }
[data-theme="dark"] .cs-ticket-sub { color: rgba(255,255,255,.65) !important; }
[data-theme="dark"] .cs-menu-btn   { border-color: rgba(255,255,255,.2) !important; }
[data-theme="dark"] .cs-menu-dd    { background: #1e293b !important; border-color: #334155 !important; box-shadow: 0 8px 28px rgba(0,0,0,.5) !important; }
[data-theme="dark"] .cs-menu-item  { color: #e2e8f0 !important; border-color: #1e293b !important; }
[data-theme="dark"] .cs-menu-item:hover { background: #273548 !important; }

/* ── Barre messages épinglés — bandeau discret ──────────────────────────── */
[data-theme="dark"] .cs-pinned-bar {
  background: #1e293b !important;       /* gris bleu nuit — moins agressif */
  border-color: #334155 !important;
  color: #94a3b8 !important;
}
[data-theme="dark"] .cs-pinned-bar:hover { background: #273548 !important; color: #e2e8f0 !important; }

/* ── Barre de recherche dans le chat ────────────────────────────────────── */
[data-theme="dark"] .cs-search-bar { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .cs-search-input { background: #0f172a !important; border-color: #334155 !important; color: #f8fafc !important; }
[data-theme="dark"] .cs-search-btn  { background: #0f172a !important; border-color: #334155 !important; color: #94a3b8 !important; }
[data-theme="dark"] .cs-search-count { color: #64748b !important; }
[data-theme="dark"] .cs-search-close { background: #334155 !important; color: #94a3b8 !important; }
[data-theme="dark"] mark.cs-hl        { background: #713f12 !important; color: #fde68a !important; }

/* ── Zone messages ──────────────────────────────────────────────────────── */
[data-theme="dark"] .cs-messages  { background: #090f1a !important; }  /* le plus sombre */
[data-theme="dark"] .cs-date-chip { background: #1e293b !important; color: #475569 !important; }

/* Bulles envoyées (moi) : dégradé vert-bleu foncé */
[data-theme="dark"] .cs-bubble.me {
  background: linear-gradient(135deg, #065f46, #1e3a5f) !important;
  color: #ecfdf5 !important;
  box-shadow: 0 2px 8px rgba(6,95,70,.4) !important;
}
/* Bulles reçues : gris ardoise — pas blanc pur */
[data-theme="dark"] .cs-bubble.other {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}
[data-theme="dark"] .cs-bubble-sender { color: #94a3b8 !important; }
[data-theme="dark"] .cs-bubble-time   { color: #334155 !important; }

/* Bloc de citation (reply) */
[data-theme="dark"] .cs-bubble.me .cs-quote-block    { background: rgba(0,0,0,.2) !important; border-left-color: rgba(255,255,255,.3) !important; }
[data-theme="dark"] .cs-bubble.other .cs-quote-block { background: #0f172a !important; border-left-color: #34d399 !important; }
[data-theme="dark"] .cs-quote-sender { color: #34d399 !important; }
[data-theme="dark"] .cs-quote-text   { color: #94a3b8 !important; }

/* ── Zone de saisie ─────────────────────────────────────────────────────── */
[data-theme="dark"] .cs-input-bar   { background: #0f172a !important; border-color: #1e293b !important; }
[data-theme="dark"] .cs-textarea    { background: #1e293b !important; border-color: #334155 !important; color: #f8fafc !important; }
[data-theme="dark"] .cs-textarea:focus { border-color: #34d399 !important; box-shadow: 0 0 0 2px rgba(52,211,153,.18) !important; }
[data-theme="dark"] .cs-file-btn    { background: #1e293b !important; border-color: #334155 !important; color: #64748b !important; }
[data-theme="dark"] .cs-file-btn:hover { background: #273548 !important; border-color: #34d399 !important; }

/* ── Menu actions sur messages ──────────────────────────────────────────── */
[data-theme="dark"] .cs-msg-actions { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .cs-act-btn     { color: #64748b !important; }
[data-theme="dark"] .cs-act-btn:hover { background: #273548 !important; color: #e2e8f0 !important; }
[data-theme="dark"] .cs-act-btn.pinned-active { color: #fbbf24 !important; }

/* ── Panneau Contact Info (drawer droit) ────────────────────────────────── */
[data-theme="dark"] .cs-drawer      { background: #0f172a !important; border-color: #1e293b !important; box-shadow: -8px 0 30px rgba(0,0,0,.5) !important; }
[data-theme="dark"] .cs-drawer-header { border-color: #1e293b !important; background: #0f172a !important; }
[data-theme="dark"] .cs-drawer-title { color: #f1f5f9 !important; }
[data-theme="dark"] .cs-drawer-close { background: #1e293b !important; color: #94a3b8 !important; }
[data-theme="dark"] .cs-drawer-close:hover { background: #273548 !important; color: #e2e8f0 !important; }
[data-theme="dark"] .cs-contact-avatar { box-shadow: 0 0 0 3px #1e293b; }
[data-theme="dark"] .cs-contact-name  { color: #f1f5f9 !important; }
[data-theme="dark"] .cs-contact-section { color: #334155 !important; }
[data-theme="dark"] .cs-contact-row   { border-color: #1e293b !important; }
[data-theme="dark"] .cs-contact-label { color: #475569 !important; }
[data-theme="dark"] .cs-contact-value { color: #e2e8f0 !important; }
[data-theme="dark"] .cs-contact-value a { color: #34d399 !important; }
[data-theme="dark"] .cs-contact-value.missing { color: #334155 !important; }
[data-theme="dark"] .cs-copy-btn     { background: #1e293b !important; border-color: #334155 !important; color: #64748b !important; }
[data-theme="dark"] .cs-copy-btn:hover:not(:disabled) { background: #1e2a20 !important; border-color: #34d399 !important; color: #34d399 !important; }

/* ── Panneau messages épinglés ──────────────────────────────────────────── */
[data-theme="dark"] .cs-pinned-panel { background: #0f172a !important; border-color: #1e293b !important; }
[data-theme="dark"] .cs-pp-header    { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .cs-pp-title     { color: #94a3b8 !important; }
[data-theme="dark"] .cs-pp-close     { background: #334155 !important; color: #94a3b8 !important; }
[data-theme="dark"] .cs-pi-item      { background: #1e293b !important; border-color: #273548 !important; }
[data-theme="dark"] .cs-pi-item:hover { box-shadow: 0 2px 8px rgba(52,211,153,.12) !important; border-color: #34d399 !important; }
[data-theme="dark"] .cs-pi-author    { color: #e2e8f0 !important; }
[data-theme="dark"] .cs-pi-time      { color: #475569 !important; }
[data-theme="dark"] .cs-pi-text      { color: #94a3b8 !important; }
[data-theme="dark"] .cs-pi-unpin     { background: #334155 !important; color: #64748b !important; }

/* ── Modales chat ───────────────────────────────────────────────────────── */
[data-theme="dark"] .cs-modal-overlay { background: rgba(0,0,0,.7) !important; }
[data-theme="dark"] .cs-modal         { background: #1e293b !important; border: 1px solid #334155; box-shadow: 0 20px 50px rgba(0,0,0,.7) !important; }
[data-theme="dark"] .cs-modal-title   { color: #f1f5f9 !important; }
[data-theme="dark"] .cs-modal-body    { color: #94a3b8 !important; }

/* ── Autocomplete (Nouveau Chat) ────────────────────────────────────────── */
[data-theme="dark"] .cs-ac-results    { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .cs-ac-item       { color: #e2e8f0 !important; border-color: #273548 !important; }
[data-theme="dark"] .cs-ac-item:hover { background: #273548 !important; }
[data-theme="dark"] .cs-ac-num        { color: #34d399 !important; }
[data-theme="dark"] .cs-ac-device     { color: #475569 !important; }

/* ── Bannière archivée ──────────────────────────────────────────────────── */
[data-theme="dark"] .cs-archived-banner { background: #1e293b !important; border-color: #334155 !important; color: #94a3b8 !important; }

/* ── Barre de réponse (reply bar) ───────────────────────────────────────── */
[data-theme="dark"] .cs-reply-bar     { background: #0d2318 !important; border-color: #166534 !important; color: #86efac !important; }
[data-theme="dark"] .cs-reply-bar-text { color: #94a3b8 !important; }
[data-theme="dark"] .cs-reply-cancel  { background: #14532d !important; color: #86efac !important; }
[data-theme="dark"] .cs-reply-cancel:hover { background: #166534 !important; }

/* ── Menu contextuel (clic droit) ───────────────────────────────────────── */
[data-theme="dark"] .cs-ctx-menu      { background: #1e293b !important; border-color: #334155 !important; box-shadow: 0 8px 28px rgba(0,0,0,.5) !important; }
[data-theme="dark"] .cs-ctx-item      { color: #e2e8f0 !important; }
[data-theme="dark"] .cs-ctx-item:hover { background: #273548 !important; }
[data-theme="dark"] .cs-ctx-sep       { background: #273548 !important; }

/* ── Lightbox ───────────────────────────────────────────────────────────── */
[data-theme="dark"] .cs-lightbox         { background: rgba(0,0,0,.95) !important; }
[data-theme="dark"] .cs-lightbox-close   { background: rgba(255,255,255,.1) !important; color: #fff !important; }

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE — KANBAN DES RÉPARATIONS (refonte visuelle)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Layout global ──────────────────────────────────────────────────────── */
[data-theme="dark"] .kb-board        { background: transparent; }

/* ── Colonnes : fond profond, séparé du fond de page ───────────────────── */
[data-theme="dark"] .kb-col {
  background: #1a1a1a !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 10px;
}
[data-theme="dark"] .kb-col.drag-over {
  background: #1a2640 !important;
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 2px rgba(96,165,250,.25) !important;
}

/* ── En-têtes de colonnes ───────────────────────────────────────────────── */
[data-theme="dark"] .kb-header {
  background: #1e1e1e !important;
  border-color: #2a2a2a !important;
}
[data-theme="dark"] .kb-title { color: #e2e8f0 !important; letter-spacing: .5px; }
[data-theme="dark"] .kb-cnt   {
  background: #2a2a2a !important;
  color: #94a3b8 !important;
}
[data-theme="dark"] .kb-dot   { opacity: .9; }

/* ── Zone de cartes ─────────────────────────────────────────────────────── */
[data-theme="dark"] .kb-cards { scrollbar-color: #2d2d2d transparent; }
[data-theme="dark"] .kb-empty {
  border-color: #2a2a2a !important;
  color: #3a3a3a !important;
}

/* ── Cartes tickets ──────────────────────────────────────────────────────  */
[data-theme="dark"] .kb-card {
  background: #252525 !important;
  border: 1px solid #323232 !important;
  border-radius: 8px;
}
[data-theme="dark"] .kb-card:hover {
  background: #2d2d2d !important;
  border-color: #60a5fa !important;         /* bordure bleue au survol */
  box-shadow: 0 4px 16px rgba(96,165,250,.15) !important;
  transform: translateY(-1px);
}
[data-theme="dark"] .kb-card.urgent {
  background: #1e1212 !important;           /* fond rouge très sombre */
}
[data-theme="dark"] .kb-card.urgent:hover {
  border-color: #f87171 !important;
  box-shadow: 0 4px 16px rgba(248,113,113,.15) !important;
}

/* Textes à l'intérieur des cartes */
[data-theme="dark"] .kb-num  { color: #34d399 !important; }  /* n° de ticket : vert */
[data-theme="dark"] .kb-name { color: #f1f5f9 !important; }  /* nom client : blanc cassé */
[data-theme="dark"] .kb-dev  { color: #64748b !important; }  /* appareil : gris moyen */
[data-theme="dark"] .kb-date { color: #475569 !important; }  /* date : gris discret */

/* ── Badge priorité ─────────────────────────────────────────────────────── */
[data-theme="dark"] .kb-prio { filter: none !important; }    /* désactive le filtre global */
/* Urgent : rouge désaturé pastel */
[data-theme="dark"] .kb-card.urgent .kb-prio {
  background: rgba(153,27,27,.5) !important;
  color: #fca5a5 !important;
}
/* Normale : bleu sombre discret */
[data-theme="dark"] .kb-card:not(.urgent) .kb-prio {
  background: rgba(30,64,175,.35) !important;
  color: #93c5fd !important;
}

/* ── Alerte temporelle (> 30 min) ───────────────────────────────────────── */
[data-theme="dark"] .kb-card.kb-late {
  border-color: #7f1d1d !important;         /* bordure rouge foncée */
  animation: kbLateGlowDark 1.6s ease-in-out infinite alternate !important;
}
@keyframes kbLateGlowDark {
  from { box-shadow: 0 0 0 0 rgba(248,113,113,0); }
  to   { box-shadow: 0 0 0 4px rgba(248,113,113,.2); }   /* halo doux, pas agressif */
}
[data-theme="dark"] .kb-late-badge {
  background: rgba(127,29,29,.5) !important;
  border-color: rgba(248,113,113,.3) !important;
  color: #fca5a5 !important;
}

/* ── Bouton de changement de statut rapide (sq-btn) ────────────────────── */
[data-theme="dark"] .kb-sq-row { border-top-color: #2a2a2a !important; }
[data-theme="dark"] .kb-sq-btn {
  background: #1e1e1e !important;
  border-color: #3a3a3a !important;
  color: #94a3b8 !important;
}
[data-theme="dark"] .kb-sq-btn:hover {
  background: #2a2a2a !important;
  border-color: #60a5fa !important;
  color: #e2e8f0 !important;
}
[data-theme="dark"] .kb-sq-dot   { opacity: .8; }
[data-theme="dark"] .kb-sq-lbl   { color: #94a3b8 !important; }
[data-theme="dark"] .kb-sq-chv   { color: #4a5568 !important; }

/* ── Menu contextuel statuts ────────────────────────────────────────────── */
[data-theme="dark"] .kb-smenu {
  background: #1e1e1e !important;
  border-color: #3a3a3a !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.5) !important;
}
[data-theme="dark"] .kb-smenu-item {
  color: #e2e8f0 !important;
  border-color: #2a2a2a !important;
}
[data-theme="dark"] .kb-smenu-item:hover:not(:disabled) {
  background: #2a2a2a !important;
  color: #60a5fa !important;
}
[data-theme="dark"] .kb-smenu-item.kb-smenu-current {
  background: #1a2a20 !important;
  color: #34d399 !important;
}
[data-theme="dark"] .kb-smenu-dot { opacity: .85; }

/* ── Bouton toggle (repli colonne) ──────────────────────────────────────── */
[data-theme="dark"] .kb-toggle       { color: #3a3a3a !important; }
[data-theme="dark"] .kb-toggle:hover { background: #2a2a2a !important; color: #94a3b8 !important; }

/* ── Toast erreur ───────────────────────────────────────────────────────── */
[data-theme="dark"] .kb-toast { background: #7f1d1d !important; }

/* ── Bouton "Afficher menu entier" (focus mode) ─────────────────────────── */
[data-theme="dark"] .focus-toggle-btn         { border-color: #2a2a2a !important; color: #4a5568 !important; background: rgba(255,255,255,.03) !important; }
[data-theme="dark"] .focus-toggle-btn:hover   { color: #94a3b8 !important; background: rgba(255,255,255,.06) !important; border-color: #3a3a3a !important; }

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE — WIZARD NOUVEAU TICKET (corrections prioritaires)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Carte principale du wizard ─────────────────────────────────────────── */
[data-theme="dark"] .wz-card {
  background: #1a1a1a !important;
  border: 1px solid #2d2d2d !important;
}

/* ── Progress bar ────────────────────────────────────────────────────────── */
[data-theme="dark"] .wp-circle { border-color: #3a3a3a !important; color: #94a3b8 !important; background: #1a1a1a !important; }
[data-theme="dark"] .wp-label  { color: #64748b !important; }
[data-theme="dark"] .wp-line   { background: #2d2d2d !important; }
[data-theme="dark"] .wp-line.done { background: #34d399 !important; }
[data-theme="dark"] .wp-step.active .wp-circle,
[data-theme="dark"] .wp-step.done  .wp-circle { background: #34d399 !important; border-color: #34d399 !important; color: #0a1f0f !important; }
[data-theme="dark"] .wp-step.active .wp-label,
[data-theme="dark"] .wp-step.done  .wp-label  { color: #34d399 !important; }

/* ── ÉTAPE 1 : Sélection client ─────────────────────────────────────────── */
[data-theme="dark"] .wz-step { background: transparent; color: #e2e8f0 !important; }

/* Champ de recherche client */
[data-theme="dark"] #clientSearch { background: #2d2d2d !important; border-color: #4a4a4a !important; color: #e2e8f0 !important; }
[data-theme="dark"] #clientSearch:focus { border-color: #34d399 !important; box-shadow: 0 0 0 3px rgba(52,211,153,.2) !important; }

/* Résultats de recherche */
[data-theme="dark"] .wz-search-results { background: #1e1e1e !important; border-color: #3a3a3a !important; box-shadow: 0 8px 24px rgba(0,0,0,.5) !important; }
[data-theme="dark"] .wz-search-results .sr-item { color: #e2e8f0 !important; border-color: #2d2d2d !important; }
[data-theme="dark"] .wz-search-results .sr-item:hover { background: #2d2d2d !important; }
[data-theme="dark"] .wz-search-results .sr-phone { color: #64748b !important; }

/* Bloc client sélectionné */
[data-theme="dark"] .wz-client-box { background: #1a2a20 !important; border-color: #34d399 !important; }
[data-theme="dark"] .wz-client-box .cb-name  { color: #e2e8f0 !important; }
[data-theme="dark"] .wz-client-box .cb-phone { color: #94a3b8 !important; }

/* Formulaire création rapide */
[data-theme="dark"] #newClientForm { background: #1e1e1e !important; border-color: #2d2d2d !important; }
[data-theme="dark"] #newClientForm label { color: #cbd5e1 !important; }

/* Bloc partenaire (SIRET) */
[data-theme="dark"] #partenaireSection { background: #1a2a1a !important; border-color: #166534 !important; }
[data-theme="dark"] #partenaireSection label { color: #86efac !important; }
[data-theme="dark"] #partenaireSection input,
[data-theme="dark"] #siretInput { background: #1e2a1e !important; border-color: #166534 !important; color: #e2e8f0 !important; font-family: monospace; }
[data-theme="dark"] #siretResult { background: #1a1a1a !important; border-color: #166534 !important; }
[data-theme="dark"] #siretResult label { color: #86efac !important; }
[data-theme="dark"] #siretFoundBadge { background: #14532d !important; border-color: #166534 !important; color: #86efac !important; }
[data-theme="dark"] .wz-btn-change-client { background: #2d1515 !important; color: #f87171 !important; border-color: #7f1d1d !important; }

/* ── ÉTAPE 2 : Appareil & Modèle ────────────────────────────────────────── */

/* Grille des types d'appareils */
[data-theme="dark"] .wz-type-grid .wz-type-card { background: #1e1e1e !important; border-color: #3a3a3a !important; }
[data-theme="dark"] .wz-type-grid .wz-type-card:hover { background: #1e2a1e !important; border-color: #34d399 !important; }
[data-theme="dark"] .wz-type-grid .wz-type-card.selected { background: #1e2a1e !important; border-color: #34d399 !important; }
[data-theme="dark"] .wz-type-grid .tc-label { color: #e2e8f0 !important; }
[data-theme="dark"] .wz-type-grid .tc-icon  { filter: brightness(1.1); }

/* Panneau inline marque + modèle */
[data-theme="dark"] #inlineBrandPanel { background: #1a1a1a !important; border-color: #2d2d2d !important; }
[data-theme="dark"] #inlineBrandPanel label { color: #94a3b8 !important; }

/* Chips de marques */
[data-theme="dark"] .wz-chip-grid .wz-chip { background: #1e1e1e !important; border-color: #3a3a3a !important; color: #e2e8f0 !important; }
[data-theme="dark"] .wz-chip-grid .wz-chip:hover { border-color: #34d399 !important; }
[data-theme="dark"] .wz-chip-grid .wz-chip.selected { background: #34d399 !important; color: #0a1f0f !important; border-color: #34d399 !important; }

/* Champs S/N, IMEI, Modèle, Code PIN */
[data-theme="dark"] #inlineModelInput,
[data-theme="dark"] #inlineBrandInput,
[data-theme="dark"] #inlineSerieInput,
[data-theme="dark"] #inlineImeiInput,
[data-theme="dark"] #inlineMdpInput  { background: #2d2d2d !important; border-color: #4a4a4a !important; color: #e2e8f0 !important; }
[data-theme="dark"] #inlineModelInput:focus,
[data-theme="dark"] #inlineBrandInput:focus,
[data-theme="dark"] #inlineSerieInput:focus { border-color: #34d399 !important; box-shadow: 0 0 0 3px rgba(52,211,153,.2) !important; }

/* Bannière type sélectionné */
[data-theme="dark"] #selectedTypeBanner { background: #1e2a1e !important; border-color: #34d399 !important; }
[data-theme="dark"] #selectedTypeBanner .cb-name { color: #e2e8f0 !important; }

/* ── ÉTAPE 3 : Problème ─────────────────────────────────────────────────── */

/* Bouton Forfait Diagnostic — texte bleu marine sur fond bleu ciel → FIX */
[data-theme="dark"] #btnDiagnostic {
  background: #1e3a5f !important;      /* bleu foncé profond */
  border-color: #1d4ed8 !important;
  color: #93c5fd !important;           /* bleu clair lisible */
}
[data-theme="dark"] #btnDiagnostic:hover { background: #1e40af !important; color: #bfdbfe !important; }
[data-theme="dark"] #btnDiagnosticBadge {
  background: #1d4ed8 !important;
  color: #dbeafe !important;
}

/* Panier Résumé du devis (col droite Step 3) */
[data-theme="dark"] .wz-devis-cart        { background: #1a1a2e !important; border-color: #2d2d3e !important; }
[data-theme="dark"] .dc-header            { background: #0f172a !important; color: #e2e8f0 !important; }
[data-theme="dark"] .dc-device-info       { background: #0f172a !important; border-color: #2d2d3e !important; }
[data-theme="dark"] .dc-device-type       { color: #e2e8f0 !important; }
[data-theme="dark"] .dc-device-model      { color: #64748b !important; }
[data-theme="dark"] .dc-body              { background: #1a1a2e !important; }
[data-theme="dark"] .dc-section-title     { color: #64748b !important; }
[data-theme="dark"] .dc-line              { border-color: #2d2d3e !important; }
[data-theme="dark"] .dc-line-label        { color: #94a3b8 !important; }
[data-theme="dark"] .dc-line-amount       { color: #e2e8f0 !important; }
[data-theme="dark"] .dc-sep               { border-color: #2d2d3e !important; }
[data-theme="dark"] .dc-total-label       { color: #e2e8f0 !important; }
[data-theme="dark"] .dc-total-amount      { color: #34d399 !important; }

/* Zone saisie pannes */
[data-theme="dark"] .wz-step3-main     { color: #e2e8f0; }
[data-theme="dark"] #panneTypeSoft     { background: #172554 !important; color: #93c5fd !important; border-color: #1e40af !important; }
[data-theme="dark"] #panneTypeHard     { background: #450a0a !important; color: #fca5a5 !important; border-color: #7f1d1d !important; }
[data-theme="dark"] #panneTypeSoft.selected { background: #1e40af !important; color: #dbeafe !important; }
[data-theme="dark"] #panneTypeHard.selected { background: #b91c1c !important; color: #fee2e2 !important; }

/* Textarea description (readonly) */
[data-theme="dark"] .wz-textarea-auto  { background: #1e1e1e !important; border-color: #2d2d2d !important; color: #64748b !important; }
[data-theme="dark"] #panneTextarea     { background: #1e1e1e !important; color: #64748b !important; border-color: #2d2d2d !important; }

/* Chips pannes (sans prix) */
[data-theme="dark"] .wz-panne-item          { background: #1e1e1e !important; border-color: #3a3a3a !important; color: #e2e8f0 !important; }
[data-theme="dark"] .wz-panne-item:hover    { border-color: #34d399 !important; color: #34d399 !important; background: #0d2a1e !important; }
[data-theme="dark"] .wz-panne-item.selected { background: #34d399 !important; border-color: #34d399 !important; color: #0a1f0f !important; }

/* Supplément urgence */
[data-theme="dark"] #urgenceSurchargeInfo { background: #450a0a !important; border-color: #7f1d1d !important; color: #fca5a5 !important; }

/* Priorité (Urgente badge en rouge) */
[data-theme="dark"] .wz-prio-card { border-color: #3a3a3a !important; }

/* Champ Tarif Total */
[data-theme="dark"] #tarifTotalDisplay { background: #1e1e1e !important; border-color: #2d2d2d !important; color: #34d399 !important; }

/* ── ÉTAPE 4 : Récapitulatif ────────────────────────────────────────────── */
[data-theme="dark"] .wz-recap-block-header  { background: #1e1e1e; }
[data-theme="dark"] .wz-recap-accordion     { background: #161616 !important; }
[data-theme="dark"] .wz-tarif-panel         { color: #e2e8f0 !important; }
[data-theme="dark"] #tarifBreakdown         { color: #e2e8f0 !important; }
[data-theme="dark"] #tarifSummary           { color: #e2e8f0 !important; }
[data-theme="dark"] .wz-tarif-line .tl-label { color: #94a3b8 !important; }
[data-theme="dark"] .wz-tarif-line .tl-amount { color: #e2e8f0 !important; }

/* Code promo */
[data-theme="dark"] #promoCodeInput { background: #1e1e1e !important; border-color: #3a3a3a !important; color: #e2e8f0 !important; }

/* Sélecteurs Emplacement/Technicien */
[data-theme="dark"] #techSelect,
[data-theme="dark"] #localisationInput { background: #2d2d2d !important; border-color: #4a4a4a !important; color: #e2e8f0 !important; }
[data-theme="dark"] #techSelect option,
[data-theme="dark"] #localisationInput option { background: #1e1e1e; color: #e2e8f0; }

/* ── Focus "glow" global — champs actifs ────────────────────────────────── */
[data-theme="dark"] input:focus:not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: #34d399 !important;
  box-shadow: 0 0 0 3px rgba(52,211,153,.18) !important;
  outline: none;
}

/* ─── PRINT ─── */
@media print {
  .sidebar, .topbar, .burger-menu, .btn, .alert { display: none !important; }
  .main-content { margin-left: 0; }
  .content { padding: 0; }
}

/* ── Case « taxable » d'une ligne de devis ou de facture ─────────────────
   Rendue par ligne_taxable_control() (core/Helpers.php), et uniquement dans
   les ateliers où la taxe s'ajoute au prix affiché. Discrète : c'est une
   exception qu'on coche, pas une décision à prendre sur chaque ligne. */
.lg-taxable {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: var(--text-light);
  white-space: nowrap; cursor: pointer; user-select: none;
}
.lg-taxable input[type="checkbox"] { width: 14px; height: 14px; cursor: pointer; margin: 0; }
.lg-taxable:hover { color: var(--text-dark); }

/* ── Motif d'exonération (devis et facture) ──────────────────────────────
   Visible seulement quand l'atelier coupe la taxe sur un document. */
.tax-exo-lb {
  display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: var(--text-light); margin-bottom: 4px;
}
.tax-exo-help { font-size: 11px; color: var(--text-light); margin: 6px 0 0; line-height: 1.5; }

/* Explication visible quand l'exonération est proposée d'office. L'atelier doit
   comprendre POURQUOI la taxe est coupée, sinon il la réactive au hasard. */
.tax-exo-note {
  font-size: 12px; line-height: 1.5; margin: 0 0 10px;
  padding: 8px 10px; border-radius: 8px;
  color: #92400E; background: #FEF3C7; border: 1px solid #FDE68A;
}

/* ── Compte à rebours d'échéance (priorité Express) ─────────────────────────
   Défini ICI et nulle part ailleurs : la fiche, la liste, le Kanban et le
   tableau de bord affichaient le même badge, chacun avec sa propre copie des
   couleurs. Quatre copies identiques, donc trois oublis garantis au prochain
   changement. Les pages ne gardent que la TAILLE, qui, elle, diffère
   légitimement d'un écran à l'autre.

   La forme distingue deux choses que la couleur seule confondait. Sur une carte
   Kanban, un ticket urgent ET en retard portait deux pastilles rouges côte à
   côte : l'une pour la priorité, l'autre pour l'échéance dépassée. Rien ne
   disait laquelle était laquelle (rapport QA #159).

   Règle : la pastille PLEINE dit ce que le ticket EST (sa priorité, un
   attribut qu'on lui a donné), la pastille CONTOURÉE dit où il en est dans le
   temps (une échéance, qui change toute seule). Deux objets différents, donc
   deux formes différentes — et plus besoin d'une teinte de libre dans une
   palette de priorités qui les a toutes prises. */
.prio-countdown {
  display: inline-block; font-weight: 700; white-space: nowrap;
  font-size: 10.5px; padding: 2px 7px; border-radius: 9999px;
  background: transparent; border: 1.5px solid #fcd34d; color: #92400e;
}
.prio-countdown.prio-countdown-overdue {
  border-color: #f87171; color: #b91c1c;
}