/**
 * JTrucks Monitor — Composants réutilisables
 * KPI, panels, badges, tables, chips, listes, etc.
 */

/* ═══════════════════════════════════════
   PAGE HEADER
═══════════════════════════════════════ */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.page-header__title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.page-header h1 {
  font-size: 1.45rem;
}

.page-header__sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-secondary);
}

/* Facturation : montant dominant, effectif, séparateur puis libellé. */
.kpi-card--facturation .kpi-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.kpi-card--facturation .kpi-card__detail {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
}
.kpi-card--facturation .kpi-card__separator {
  height: 1px;
  margin: 10px 0 8px;
  background: var(--border);
}
.kpi-card--facturation .kpi-card__label { margin-top: auto; }
html.dark-mode .kpi-card--facturation .kpi-card__detail { color: var(--text-muted); }

.period-context {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.period-context i { color: var(--primary); }
.period-context--modal {
  margin-left: auto;
  margin-right: 10px;
  min-height: 28px;
  font-size: 11px;
  font-weight: 500;
}

/* Seconde modale PDF : au-dessus du détail KPI et de son backdrop. */
#modal-pdf-fields.modal--stacked { z-index: 1080; }
.modal-backdrop.modal-backdrop--stacked { z-index: 1070; }

.page-header__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  font-size: 20px;
  flex-shrink: 0;
}

.page-header__icon.facturation { background: var(--primary-light); color: var(--app-facturation); }
.page-header__icon.guerite { background: var(--info-light); color: var(--app-guerite); }
.page-header__icon.caisse { background: var(--success-light); color: var(--app-caisse); }
.page-header__icon.voyage { background: var(--warning-light); color: var(--app-voyage); }
.page-header__icon.commande { background: #F3E8FF; color: var(--app-commande); }
.page-header__icon.admin { background: var(--neutral-light); color: var(--app-admin); }
.page-header__icon.carburation { background: var(--danger-light); color: var(--app-carburation); }
.page-header__icon.exploitation { background: var(--info-light); color: var(--app-exploitation); }

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: var(--success-light);
  color: var(--success);
  font-size: 12px;
  font-weight: 600;
}

.live-badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  animation: pulse-live 1.8s ease-in-out infinite;
}

.btn-refresh {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--duration), border-color var(--duration), color var(--duration);
}

.btn-refresh:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}

.btn-refresh.spinning i {
  animation: spin 0.7s linear infinite;
}

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

/* ═══════════════════════════════════════
   APP CHIPS
═══════════════════════════════════════ */
.app-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.app-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  user-select: none;
}

.app-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

.app-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(21, 94, 239, 0.28);
}

/* ═══════════════════════════════════════
   KPI CARDS
═══════════════════════════════════════ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.kpi-grid--8 {
  grid-template-columns: repeat(4, 1fr);
}

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

.kpi-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--duration), transform var(--duration), border-color var(--duration);
}

.kpi-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--border-hover);
  transform: translateY(-1px);
}

.kpi-card.clickable {
  cursor: pointer;
}

.kpi-card__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  font-size: 18px;
  flex-shrink: 0;
}

.kpi-card__icon.primary { background: var(--primary-light); color: var(--primary); }
.kpi-card__icon.success { background: var(--success-light); color: var(--success); }
.kpi-card__icon.warning { background: var(--warning-light); color: var(--warning); }
.kpi-card__icon.danger { background: var(--danger-light); color: var(--danger); }
.kpi-card__icon.info { background: var(--info-light); color: var(--info); }
.kpi-card__icon.neutral { background: var(--neutral-light); color: var(--neutral); }
.kpi-card__icon.purple { background: #F3E8FF; color: #8B5CF6; }

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

.kpi-card__value {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-card__label {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--text-secondary);
  font-weight: 500;
}

.kpi-card__hint {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--text-muted);
}

/* Donnée manquante (≠ zéro) */
.kpi-na,
.is-na .kpi-card__value,
.is-na .big-card__value,
.is-na .mini-kpi__value {
  color: var(--text-muted) !important;
  font-weight: 500;
}

.kpi-card.is-na,
.big-card.is-na,
.mini-kpi.is-na {
  opacity: 0.72;
}

/* Exploitation — KPI hiérarchique (en-tête → dispo/total → barre → méta → détail) */
.kpi-card--exploit {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.kpi-card--exploit.kpi-card--clickable,
.exploit-detail__line[data-kpi-drilldown] {
  cursor: pointer;
}

.kpi-card--exploit.kpi-card--clickable:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

/* ── En-tête : icône + titre + pill "Temps réel" ── */
.exploit-resource__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.exploit-resource__head .kpi-card__icon {
  flex: none;
}

.exploit-resource__head-main {
  min-width: 0;
}

.kpi-card--exploit .kpi-card__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 4px;
}

.exploit-resource__pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--neutral-light);
  border: 1px solid var(--border);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.exploit-resource__pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

/* ── Valeur dominante : dispo / total ── */
.exploit-resource__value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
}

.exploit-resource__count {
  font-family: var(--font-mono);
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.exploit-resource__total {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted);
}

.exploit-resource__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 12px;
}

/* ── Barre de disponibilité + méta "en mission" ── */
.exploit-resource__bar {
  margin-bottom: 8px;
}

.exploit-resource__meta {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 2px;
}

/* ── Séparateur + détail catégories / fonctions ── */
.kpi-card--exploit .kpi-card__separator {
  height: 1px;
  margin: 10px 0 6px;
  background: var(--border);
}

.exploit-resource__lines {
  list-style: none;
  margin: 0;
  padding: 0;
}

.exploit-detail__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  margin: 0 -8px;
  border-radius: var(--radius-sm);
  transition: background var(--duration);
}

.exploit-detail__line:hover {
  background: var(--neutral-light);
}

.exploit-detail__line:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
}

.exploit-detail__label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
}

.exploit-detail__value {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.exploit-detail__value b {
  font-weight: 700;
}

.exploit-detail__value i {
  font-size: 11px;
  color: var(--text-muted);
  transition: transform var(--duration);
}

.exploit-detail__line:hover .exploit-detail__value i {
  transform: translateX(2px);
}

/* Mini KPI (flotte / chauffeurs / assistants) */
.mini-kpi {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.mini-kpi__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 18px;
}

.mini-kpi__icon.primary { background: var(--primary-light); color: var(--primary); }
.mini-kpi__icon.success { background: var(--success-light); color: var(--success); }
.mini-kpi__icon.warning { background: var(--warning-light); color: var(--warning); }

.mini-kpi__label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.mini-kpi__value {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 600;
}

.mini-kpi__value span {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.9em;
}

/* ═══════════════════════════════════════
   PANEL
═══════════════════════════════════════ */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  margin-bottom: 18px;
  overflow: hidden;
}

.panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 0;
  flex-wrap: wrap;
}

.panel__title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.panel__subtitle {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.panel__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel__body {
  padding: 16px 18px 18px;
}

/* Point 3 — Saisie du prix du litre (KPI Coût estimé, Carburation) */
.carbu-prix-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--surface-2, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13px;
}

.carbu-prix-row label {
  font-weight: 600;
}

.carbu-prix-row input[type="number"] {
  width: 120px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  padding: 5px 10px;
  font-family: var(--font-mono, monospace);
}

.carbu-prix-hint {
  color: var(--text-muted);
  font-size: 12px;
}

/* Point 6 — Bloc HSE (Alertes + Incidents regroupés) */
.hse-panel .panel__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hse-block + .hse-block {
  padding-top: 16px;
  border-top: 1px solid var(--border, #e2e8f0);
}

.hse-block__title {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.panel__body--flush {
  padding: 0;
}

.panel--clickable {
  cursor: pointer;
  transition: box-shadow var(--duration), border-color var(--duration), transform var(--duration);
}

.panel--clickable:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
  transform: translateY(-2px);
}

/* Search dans panel */
.list-search,
.panel__search {
  position: relative;
  margin-bottom: 14px;
}

.list-search i,
.panel__search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 14px;
  pointer-events: none;
}

.panel__search-input,
.list-search input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--background);
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--duration), background var(--duration);
}

.panel__search-input:focus,
.list-search input:focus {
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.12);
}

/* Point 6 — Compteur "XX résultats" sous les barres de recherche */
.search-result-count {
  margin: -8px 0 12px;
  font-size: 12px;
  color: var(--text-muted);
}

.table-toolbar .search-result-count {
  margin: 0;
  white-space: nowrap;
}

/* ═══════════════════════════════════════
   BIG CARDS (CA / Exploitation)
═══════════════════════════════════════ */
.big-card {
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: box-shadow var(--duration), border-color var(--duration), transform var(--duration);
  height: 100%;
}

.big-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
  transform: translateY(-2px);
}

/* Cartes de synthèse Finance / Exploitation : non cliquables, pas d'effet hover */
.big-card--summary {
  cursor: default;
}

.big-card--summary:hover {
  box-shadow: var(--shadow-xs);
  border-color: var(--border);
  transform: none;
}

/* Exception carte Exploitation : cliquable (initDashboard → switchTab
   "exploitation") → curseur pointeur au survol, comme toute carte
   interactive. Contenu, statistiques et style inchangés. */
.big-card--summary#big-card-exploit {
  cursor: pointer;
}

.big-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.big-card__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 17px;
  flex-shrink: 0;
}

.big-card__icon.primary { background: var(--primary-light); color: var(--primary); }
.big-card__icon.info { background: var(--info-light); color: var(--info); }

.big-card__title {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.big-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}

.big-card__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.period-pill {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--primary-light);
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
}

/* Exception carte Exploitation : jamais filtrée, toujours temps réel */
.realtime-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--success-light);
  color: var(--success);
  font-size: 11px;
  font-weight: 600;
}

.realtime-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  animation: pulse-dot 2s ease-in-out infinite;
}

.big-card__value {
  font-family: var(--font-mono);
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.15;
  margin-bottom: 6px;
}

.trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--font-mono);
}

.trend.up { color: var(--success); }
.trend.down { color: var(--danger); }

.big-card__sparkline {
  height: 56px;
  margin-top: 12px;
}

/* Exploitation progress bars */
.exploit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 13px;
}

.exploit-row strong {
  font-family: var(--font-mono);
  font-weight: 600;
}

.progress-slim {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--background-alt);
  overflow: hidden;
  margin-bottom: 14px;
}

.progress-slim > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  transition: width 0.6s var(--ease);
}

.progress-slim > span.success { background: var(--success); }
.progress-slim > span.warning { background: var(--warning); }
.progress-slim > span.info { background: var(--info); }

/* ═══════════════════════════════════════
   APP SUMMARY CARDS (Commandes / Caisse / Voyages /
   Carburation / Facturation / Guérite) — cliquables
═══════════════════════════════════════ */
.app-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.app-summary-card {
  display: flex;
  flex-direction: column;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: box-shadow var(--duration), border-color var(--duration), transform var(--duration);
  height: 100%;
}

.app-summary-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

.app-summary-card:active {
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

.app-summary-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.app-summary-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.app-summary-card__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 16px;
  flex-shrink: 0;
}

.app-summary-card__icon.facturation { background: var(--primary-light); color: var(--app-facturation); }
.app-summary-card__icon.guerite { background: var(--info-light); color: var(--app-guerite); }
.app-summary-card__icon.caisse { background: var(--success-light); color: var(--app-caisse); }
.app-summary-card__icon.voyage { background: var(--warning-light); color: var(--app-voyage); }
.app-summary-card__icon.commande { background: #F3E8FF; color: var(--app-commande); }
.app-summary-card__icon.carburation { background: var(--danger-light); color: var(--app-carburation); }

.app-summary-card__title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.app-summary-card__chevron {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 13px;
  transition: transform var(--duration);
}

.app-summary-card:hover .app-summary-card__chevron {
  transform: translateX(2px);
  color: var(--primary);
}

.app-summary-card__metrics {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.app-summary-card__metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.app-summary-card__metric-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

.app-summary-card__metric-value {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════════════════════════════════
   STATUS BADGES
═══════════════════════════════════════ */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.status-badge.success {
  background: var(--success-light);
  color: var(--success);
}

.status-badge.primary {
  background: var(--primary-light);
  color: var(--primary);
}

.status-badge.warning {
  background: var(--warning-light);
  color: #B45309;
}

.status-badge.danger {
  background: var(--danger-light);
  color: var(--danger);
}

.status-badge.dark {
  background: var(--dark-light);
  color: var(--dark);
}

.status-badge.neutral {
  background: var(--neutral-light);
  color: var(--neutral);
}

/* Severity for incidents */
.severity-badge {
  display: inline-flex;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.severity-badge.critique {
  background: var(--danger-light);
  color: var(--danger);
}

.severity-badge.modere {
  background: var(--warning-light);
  color: #B45309;
}

/* ═══════════════════════════════════════
   DATA TABLES
═══════════════════════════════════════ */
.data-table-wrap {
  overflow-x: auto;
}

.data-table-wrap--scroll {
  max-height: 450px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

.data-table th {
  padding: 11px 14px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--background-alt);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  vertical-align: middle;
  white-space: nowrap;
}

.data-table tbody tr {
  transition: background var(--duration);
}

/* Zébrage subtil — appliqué à TOUS les tableaux (.data-table) via la classe
   .row-alt posée par applyZebraStriping() (tables.js). Spécificité volontairement
   basse : le survol (:hover) et l'état ligne ouverte (.is-open) gardent la priorité. */
.data-table .row-alt {
  background-color: var(--zebra-bg);
}

.data-table tbody tr:hover {
  background: var(--primary-light);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table .mono {
  font-family: var(--font-mono);
  font-size: 12.5px;
}

.data-table .ref {
  font-weight: 600;
  color: var(--primary);
}

/* ═══════════════════════════════════════
   CONVENTION GLOBALE — CELLULES NUMÉRIQUES
   Toute donnée numérique (montant, quantité, poids, volume, nombre de
   voyages/tours, délai…) est automatiquement alignée à droite. La classe
   .cell-num est posée AU RENDU par les moteurs de tableaux (renderTable,
   renderDynamicTable, buildDetailTableHtml et les builders imbriqués)
   via isNumericData() — détection par le type réel de la donnée, jamais
   par le nom de colonne, jamais manuellement : toute nouvelle colonne
   numérique hérite automatiquement de la convention. Les badges/statuts,
   dates, références/identifiants (.ref) et cellules d'action gardent leur
   comportement actuel.
═══════════════════════════════════════ */

.data-table .cell-num {
  font-family: var(--font-mono);
  font-size: 12.5px;
  text-align: right;
}

.data-table th.cell-num {
  text-align: right;
}

/* ═══════════════════════════════════════
   RECHERCHE + TRI PAR COLONNE — TABLEAUX PRINCIPAUX
   Chaque colonne recherchable porte une petite LOUPE (icônes Bootstrap
   déjà utilisées dans le projet). Aucun champ visible au chargement :
   le clic sur la loupe affiche UN champ compact sous la colonne
   concernée uniquement. Un point discret signale les colonnes filtrées.
   Uniquement les tableaux rendus par le moteur initPaginatedDynamicTable
   / renderDynamicTable : les tableaux IMBRIQUÉS (Événements, Actions,
   Motifs, lignes de facture…) ne reçoivent ni loupe, ni tri, ni champs —
   leur présentation reste strictement identique.
═══════════════════════════════════════ */
/* Loupe : petite, discrète, alignée au libellé ; état actif surligné. */
.pdt-lens {
  border: none;
  background: none;
  padding: 0;
  margin-left: 5px;
  font-size: 11px;
  line-height: 1;
  vertical-align: middle;
  color: var(--text-muted);
  opacity: 0.55;
  cursor: pointer;
}
.pdt-lens:hover,
.pdt-lens:focus-visible {
  opacity: 1;
  color: var(--primary);
}
.pdt-lens-open {
  opacity: 1;
}
/* Colonne filtrée : la loupe reste allumée + petit point indicateur. */
.pdt-lens-active {
  color: var(--primary);
  opacity: 1;
}
.pdt-lens-active::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 3px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  vertical-align: middle;
}

/* En-têtes triables : indicateur discret, surligné sur la colonne active. */
th[data-pdt-sort] {
  cursor: pointer;
  user-select: none;
}
.pdt-sort-ind {
  display: inline-block;
  margin-left: 5px;
  font-size: 10px;
  line-height: 1;
  color: var(--text-muted);
  opacity: 0.45;
}
th.pdt-sorted-asc,
th.pdt-sorted-desc {
  color: var(--primary);
}
th.pdt-sorted-asc .pdt-sort-ind,
th.pdt-sorted-desc .pdt-sort-ind {
  color: var(--primary);
  opacity: 1;
}

/* Ligne de champs — présente UNIQUEMENT quand une colonne est ouverte.
   Le champ occupe la largeur de SA colonne sans jamais l'élargir. */
tr.pdt-filter-row th {
  padding: 2px 10px 7px;
  background: transparent;
  border-bottom: 1px solid var(--border);
}
input.pdt-col-filter {
  width: 100%;
  min-width: 72px;
  max-width: 140px;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 11px;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--background-alt);
  color: var(--text-primary);
}
input.pdt-col-filter:focus {
  outline: none;
  border-color: var(--primary);
}
input.pdt-col-filter::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}

/* ═══════════════════════════════════════
   MASTER / DETAIL (lignes de facture)
═══════════════════════════════════════ */
/* Toute la ligne facture est cliquable (aucun bouton/icône ajouté). */
tr.row-clickable {
  cursor: pointer;
}

tr.row-clickable.is-open {
  background: var(--primary-light);
}

/* Indicateur d'expansion ▶/▼ des lignes extensibles Master/Detail
   (Liste des voyages → charges, Facturation → lignes de facture…) :
   petite icône à gauche de la première cellule, pivote à 90° à l'ouverture
   (▶ devient ▾). N'altère pas le style général du tableau. */
.row-expand-icon {
  display: inline-block;
  width: 1em;
  margin-right: 6px;
  color: var(--primary);
  font-size: 0.8em;
  line-height: 1;
  transition: transform 0.15s ease;
}

.row-expand-icon::before {
  content: "▶";
}

tr.row-clickable.is-open .row-expand-icon {
  transform: rotate(90deg);
}

/* Repliée par défaut ; ".is-open" (posé au clic) la rend visible. La
   recherche du tableau principal (bindTableSearch) peut forcer un
   display:none supplémentaire quand la facture-parent est filtrée. */
tr.row-detail {
  display: none;
}

tr.row-detail.is-open {
  display: table-row;
}

tr.row-detail > td {
  padding: 0;
  background: var(--background-alt);
  border-bottom: 1px solid var(--border);
}

/* Légère indentation + fond distinct pour bien identifier le détail de la
   facture sélectionnée, tout en réutilisant .data-table (mêmes couleurs,
   polices, badges, espacements que le reste du dashboard). */
.detail-table-wrap {
  padding: 10px 16px 14px 34px;
  overflow-x: auto;
}

/* Correction "Ajustement de l'espacement des colonnes dans les tableaux
   Master/Detail" : contrairement au tableau PRINCIPAL (.data-table
   width:100%, colonnes réparties sur toute la largeur), un sous-tableau
   imbriqué (Actions DECARG, Motifs, lignes de facture…) ne doit occuper
   que la largeur réellement nécessaire à son contenu — sans quoi le
   navigateur répartit l'espace restant entre les colonnes existantes et
   crée de grands vides entre elles (ex. "CODE" et "NOM" très éloignés).
   width:auto + table-layout:auto (par défaut) laisse chaque colonne se
   dimensionner sur son contenu ; le défilement horizontal (overflow-x
   déjà présent sur .detail-table-wrap ci-dessus) prend le relais
   uniquement si le nombre de colonnes dépasse la largeur disponible.
   S'applique à TOUS les sous-tableaux Master/Detail actuels et futurs
   utilisant ce composant (portée demandée), sans toucher au tableau
   PRINCIPAL d'aucun module. */
.detail-table-wrap .data-table {
  width: auto;
  min-width: 0;
  font-size: 12.5px;
}

.detail-table-wrap .data-table th {
  background: transparent;
}

/* Actions dynamiques du module Voyage : chaque Action possède son propre
   sous-tableau (colonnes adaptées à ses champs réels). Quand un Événement
   contient plusieurs Actions, leurs tableaux sont empilés — règle
   d'espacement entre eux (les Motifs, imbriqués DANS le tableau de leur
   action, ne sont pas concernés par cette règle d'adjacence). */
tr.row-detail .detail-table-wrap + .detail-table-wrap {
  margin-top: 8px;
}

/* Titre simple d'un sous-tableau Master/Detail (ex. "MOTIFS" dans le détail
   d'une opération de caisse) : seule information additionnelle affichée au
   clic, alignée avec .detail-table-wrap (padding-gauche 34px). */
.detail-title {
  padding: 10px 16px 2px 34px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Flèche "→" de la colonne fusionnée EMETTEUR/BENEFICIAIRE (tableau principal
   des opérations de caisse) : sépare les deux noms sur la 2e ligne, discrète. */
.eb-sep {
  color: var(--text-muted);
  margin-right: 5px;
}

.empty-state--inline {
  padding: 10px 0;
}

/* Affichage lisible du Bénéficiaire (objet Nature/Matricule/Nom/Fonction)
   dans le tableau ACTIONS imbriqué du module Voyage (niveau 3) — jamais
   "[object Object]". Nom en évidence, fonction + matricule en sous-ligne
   discrète, cohérent avec le reste du design Premium (.detail-table-wrap). */
.beneficiaire-cell__nom {
  font-weight: 600;
  color: var(--text-primary);
}

.beneficiaire-cell__meta {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ═══════════════════════════════════════
   CHARTS
═══════════════════════════════════════ */
.chart-box {
  position: relative;
  width: 100%;
  height: 260px;
}

.chart-box--sm {
  height: 200px;
}

.chart-box--lg {
  height: 300px;
}

.chart-note {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--background-alt);
  font-size: 12.5px;
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════
   ALERTES / TIMELINE / INCIDENTS
═══════════════════════════════════════ */
.alert-list {
  max-height: 280px;
  overflow-y: auto;
}

.alert-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.alert-item:last-child { border-bottom: none; }

.alert-item__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  font-size: 15px;
  flex-shrink: 0;
}

.alert-item__icon.danger { background: var(--danger-light); color: var(--danger); }
.alert-item__icon.warning { background: var(--warning-light); color: var(--warning); }
.alert-item__icon.info { background: var(--info-light); color: var(--info); }
.alert-item__icon.success { background: var(--success-light); color: var(--success); }

.alert-item__title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
}

.alert-item__meta {
  font-size: 12px;
  color: var(--text-muted);
}

/* Timeline */
.timeline {
  max-height: 320px;
  overflow-y: auto;
  padding-left: 4px;
}

.timeline__item {
  position: relative;
  padding: 0 0 18px 22px;
  border-left: 2px solid var(--border);
}

.timeline__item:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.timeline__dot {
  position: absolute;
  left: -6px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 2px var(--primary-light);
}

.timeline__dot.success { background: var(--success); box-shadow: 0 0 0 2px var(--success-light); }
.timeline__dot.warning { background: var(--warning); box-shadow: 0 0 0 2px var(--warning-light); }
.timeline__dot.danger { background: var(--danger); box-shadow: 0 0 0 2px var(--danger-light); }
.timeline__dot.info { background: var(--info); box-shadow: 0 0 0 2px var(--info-light); }

.timeline__time {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.timeline__text {
  font-size: 13px;
  color: var(--text-primary);
}

/* Incidents */
.incident-filters {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.incident-filters button {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
}

.incident-filters button.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.incident-card {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  background: var(--surface);
  transition: border-color var(--duration);
}

.incident-card:hover {
  border-color: var(--border-hover);
}

.incident-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.incident-card__title {
  font-size: 13.5px;
  font-weight: 600;
}

.incident-card__desc {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.incident-card__meta {
  font-size: 11.5px;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════
   TOP LISTS
═══════════════════════════════════════ */
.top-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}

.top-list__row:last-child { border-bottom: none; }

.top-list__rank {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--background-alt);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
}

.top-list__rank.gold { background: #FEF3C7; color: #B45309; }
.top-list__rank.silver { background: #F1F5F9; color: #475569; }
.top-list__rank.bronze { background: #FFEDD5; color: #C2410C; }

.top-list__name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-list__value {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.top-list__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

/* ═══════════════════════════════════════
   MAP
═══════════════════════════════════════ */
.map-panel {
  position: relative;
  overflow: hidden;
}

#fleet-map {
  height: 360px;
  width: 100%;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--background-alt);
  z-index: 1;
}

.map-empty-overlay {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  font-size: 12.5px;
  color: var(--text-secondary);
  pointer-events: none;
  white-space: nowrap;
}

.map-empty-overlay.hidden {
  display: none;
}

.truck-marker {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  font-size: 15px;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
}

.truck-marker.en-mission { background: var(--primary); }
.truck-marker.disponible { background: var(--success); }
.truck-marker.entretien { background: var(--warning); }
.truck-marker.hors-service { background: var(--danger); }

/* ═══════════════════════════════════════
   TOOLBAR / FILTERS (Rapports)
═══════════════════════════════════════ */
.table-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.table-toolbar .list-search {
  flex: 1;
  min-width: 180px;
  margin-bottom: 0;
}

.table-toolbar .form-select {
  width: auto;
  min-width: 160px;
  font-size: 13px;
  border-radius: var(--radius-sm);
  border-color: var(--border);
  height: 38px;
}

.form-check-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.form-check-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.notif-panel {
  position: fixed;
  top: calc(var(--navbar-height, 64px) + 8px);
  right: 16px;
  width: 360px;
  max-height: 480px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.notif-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  font-weight: 600;
}

.notif-panel__header button {
  border: none;
  background: transparent;
  color: var(--text-secondary);
}

.notif-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.notif-panel__footer {
  padding: 10px 16px;
  border-top: 1px solid var(--border, #e5e7eb);
  font-size: 0.85rem;
  text-align: center;
}

.notif-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border, #f3f4f6);
}

.notif-item__badge {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
}

.notif-item__badge--critique { background: var(--danger-light); color: var(--danger); }
.notif-item__badge--modere { background: var(--warning-light); color: var(--warning); }
.notif-item__badge--info { background: var(--info-light); color: var(--info); }

.notif-item__title { font-size: 0.85rem; font-weight: 600; }
.notif-item__meta  { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }

.notif-panel[hidden] { display: none !important; }

.settings-panel {
  position: fixed;
  top: calc(var(--navbar-height, 64px) + 8px);
  right: 16px;
  width: 240px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14);
  z-index: 9999;
  overflow: hidden;
}

.settings-panel__user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
}

.settings-panel__user-meta {
  min-width: 0;
}

.settings-panel__fullname {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-panel__username {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-panel__divider {
  height: 1px;
  background: var(--border, #e5e7eb);
  margin: 0 0 6px;
}

.settings-panel__title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 12px 16px 8px;
}

.settings-panel__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  background: none;
  border: none;
  text-align: left;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background .15s;
}

.settings-panel__btn:hover { background: var(--background-alt, #f9fafb); }
.settings-panel__btn--danger { color: var(--danger, #E11D48); }
.settings-panel[hidden] { display: none !important; }

/* ═══════════════════════════════════════
   MODE SOMBRE — couverture complète
═══════════════════════════════════════ */
html.dark-mode {
  /* Couleurs de base — reprises par var(--surface)/var(--background)/etc.
     dans tout le reste du CSS (cartes, sidebar, topbar, tableaux, KPI…),
     donc cette redéfinition suffit à propager le thème partout où le
     design system est respecté. */
  --background: #0f172a;
  --background-alt: #1e293b;
  --surface: #1e293b;
  --card-bg: #1e293b;
  --border: #334155;
  --border-hover: #475569;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  /* Teintes sémantiques légèrement atténuées sur fond sombre */
  --primary-light: rgba(21, 94, 239, 0.18);
  --success-light: rgba(22, 163, 74, 0.18);
  --warning-light: rgba(245, 158, 11, 0.18);
  --danger-light: rgba(225, 29, 72, 0.18);
  --info-light: rgba(14, 165, 233, 0.18);
  --neutral-light: rgba(100, 116, 139, 0.22);
  --dark-light: rgba(159, 18, 57, 0.22);

  /* Zébrage des tableaux : voile clair très subtil sur la surface sombre */
  --zebra-bg: rgba(148, 163, 184, 0.1);

  color-scheme: dark;
}

html.dark-mode body {
  background-color: var(--background);
  color: var(--text-primary);
}

/* ── Topbar : fond translucide en dur, non couvert par les variables ── */
html.dark-mode .topbar {
  background: rgba(15, 23, 42, 0.88);
}

/* ── Formulaires Bootstrap (fond blanc par défaut) ── */
html.dark-mode .form-control,
html.dark-mode .form-select,
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--text-primary);
}
html.dark-mode .form-control::placeholder {
  color: var(--text-muted);
}
html.dark-mode .form-control:focus,
html.dark-mode .form-select:focus {
  background-color: var(--surface);
  color: var(--text-primary);
}

/* ── Modales Bootstrap ── */
html.dark-mode .modal-content {
  background-color: var(--surface);
  color: var(--text-primary);
  border-color: var(--border);
}
html.dark-mode .modal-header,
html.dark-mode .modal-footer {
  border-color: var(--border);
}
html.dark-mode .btn-close {
  filter: invert(1) grayscale(1);
}

/* ── Dropdowns Bootstrap ── */
html.dark-mode .dropdown-menu {
  background-color: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-lg);
}
html.dark-mode .dropdown-item {
  color: var(--text-primary);
}
html.dark-mode .dropdown-item:hover,
html.dark-mode .dropdown-item:focus {
  background-color: var(--background-alt);
  color: var(--text-primary);
}
html.dark-mode .dropdown-divider {
  border-color: var(--border);
}

/* ── Badges de statut : garder le texte lisible sur fond clair sémantique ── */
html.dark-mode .badge-status,
html.dark-mode .status-badge {
  filter: none;
}

/* ── Carte Leaflet ── */
html.dark-mode .leaflet-container {
  background-color: var(--background-alt);
  filter: brightness(0.85) saturate(0.9);
}
html.dark-mode .map-empty-overlay {
  background: rgba(30, 41, 59, 0.94);
  color: var(--text-secondary);
}

/* ── Icônes & badges à fond pastel clair (sinon zones blanches résiduelles) ── */
html.dark-mode .page-header__icon.commande {
  background: rgba(139, 92, 246, 0.18);
}
html.dark-mode .kpi-card__icon.purple {
  background: rgba(139, 92, 246, 0.18);
}
html.dark-mode .top-list__rank.gold {
  background: rgba(245, 158, 11, 0.22);
  color: #fbbf24;
}
html.dark-mode .top-list__rank.silver {
  background: rgba(148, 163, 184, 0.22);
  color: #cbd5e1;
}
html.dark-mode .top-list__rank.bronze {
  background: rgba(194, 65, 12, 0.22);
  color: #fb923c;
}

/* ── Scrollbar ── */
html.dark-mode ::-webkit-scrollbar-track {
  background: var(--background);
}
html.dark-mode ::-webkit-scrollbar-thumb {
  background: var(--border);
}
html.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ═══════════════════════════════════════
   RESPONSIVE KPI
═══════════════════════════════════════ */
@media (max-width: 1199.98px) {
  .kpi-grid,
  .kpi-grid--8,
  .kpi-grid--3,
  .app-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575.98px) {
  .kpi-grid,
  .kpi-grid--8,
  .kpi-grid--3,
  .app-summary-grid {
    grid-template-columns: 1fr;
  }

  .big-card__value {
    font-size: 1.45rem;
  }

  .page-header h1 {
    font-size: 1.2rem;
  }

  #fleet-map {
    height: 280px;
  }

  .map-empty-overlay {
    font-size: 11.5px;
    padding: 6px 10px;
  }
}

/**
 * Modale "Choisir les champs à exporter" (export PDF, 5 max, ordre libre)
 * — commune à tous les boutons "Exporter en PDF" de l'application.
 */
.pdf-fields-hint {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.pdf-fields-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 4px 12px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}

.pdf-field-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 6px 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.pdf-field-check:hover {
  background: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pdf-field-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  flex-shrink: 0;
}

.pdf-field-check--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.pdf-fields-selected-label {
  font-size: 13px;
  font-weight: 600;
  margin: 12px 0 6px;
}

.pdf-fields-selected {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pdf-field-selected-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.pdf-field-selected-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.pdf-field-selected-name {
  flex: 1;
}

.pdf-field-selected-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.pdf-field-selected-actions button {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.pdf-field-selected-actions button:hover:not(:disabled) {
  background: var(--hover-bg, rgba(37, 99, 235, 0.08));
  color: var(--primary);
}

.pdf-field-selected-actions button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.pdf-field-selected-empty {
  list-style: none;
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
}

/* ═══════════════════════════════════════
   PAGE À PROPOS (documentation intégrée)
═══════════════════════════════════════ */
.about-page {
  max-width: 980px;
  margin: 0 auto;
  padding-bottom: 24px;
}

.about-card { margin-bottom: 20px; }

.about-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 26px 28px;
  margin-bottom: 22px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--primary-light), var(--surface));
  border: 1px solid var(--border);
  flex-wrap: wrap;
}

.about-hero__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: #fff;
  font-size: 24px;
  flex-shrink: 0;
}

.about-hero__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0;
  color: var(--text-primary);
}

.about-hero__subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

.about-back-btn {
  margin-left: auto;
  white-space: nowrap;
}

.about-text {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 14px;
}

.about-subtitle {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 12px;
}

.about-divider {
  border: none;
  height: 1px;
  margin: 20px 0;
  background: linear-gradient(90deg, var(--border), transparent);
}

/* Encadré d'information (remarques importantes) */
.about-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--info-light);
  border-left: 3px solid var(--info);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.about-callout__icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--info);
  font-size: 14px;
  flex-shrink: 0;
}

/* Listes à puces avec icône */
.about-icon-list {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
}

.about-icon-list__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-secondary);
}

.about-icon-list__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 14px;
  flex-shrink: 0;
}

/* Tableau "Modules" */
.about-module-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--text-primary);
}

.about-module-cell__icon {
  width: 30px;
  height: 30px;
  font-size: 15px;
  border-radius: 9px;
}

/* Étapes "Comment l'utiliser" */
.about-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: about-step;
}

.about-steps__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}

.about-steps__item:last-child { border-bottom: none; }

.about-steps__index {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.about-steps__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--neutral-light);
  color: var(--neutral);
  font-size: 15px;
  flex-shrink: 0;
}

.about-steps__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.about-steps__title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.about-steps__desc {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

/* Cartes "Bon à savoir" */
.about-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.about-mini-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--background-alt);
}

.about-mini-card__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--success-light);
  color: var(--success);
  font-size: 16px;
  flex-shrink: 0;
}

.about-mini-card__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.about-mini-card__text {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.about-footer {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  padding: 24px 0 4px;
}

@media (max-width: 767px) {
  .about-hero { padding: 20px; }
  .about-back-btn { margin-left: 0; width: 100%; justify-content: center; }
  .about-icon-list { grid-template-columns: 1fr; }
  .about-cards-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════
   STATISTIQUES — Direction Générale
   (Performance logisticiens/commerciaux/gestionnaires, Chauffeurs
   rentables, Utilisation chauffeurs/véhicules)
═══════════════════════════════════════ */

/* En-têtes de colonnes triables */
.data-table th[data-sort-key] {
  cursor: pointer;
  user-select: none;
}

.data-table th[data-sort-key]:hover {
  color: var(--text-secondary);
}

.data-table th[data-sort-key].is-sorted {
  color: var(--primary);
}

.stat-th-icon {
  margin-left: 4px;
  font-size: 10px;
  opacity: 0.6;
}

.data-table th[data-sort-key].is-sorted .stat-th-icon {
  opacity: 1;
}

/* Pagination */
.stat-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 2px 4px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.stat-pagination__nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stat-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--duration), border-color var(--duration);
}

.stat-pagination__btn:hover:not(:disabled) {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}

.stat-pagination__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.stat-pagination__label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
}

/* Graphiques dont la hauteur s'adapte au nombre de barres (histogrammes
   horizontaux de classement) plutôt qu'une hauteur fixe (chart-box). */
.chart-box--auto {
  position: relative;
  width: 100%;
  min-height: 220px;
}

/* Sous-blocs "Top 10 / Flop 10 / Jamais utilisés" (sections Utilisation
   chauffeurs & véhicules) */
.stat-subgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 16px;
}

@media (max-width: 900px) {
  .stat-subgrid {
    grid-template-columns: 1fr;
  }
}

.stat-subblock {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: var(--background-alt);
}

.stat-subblock__title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.stat-subblock__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
}

.stat-subblock__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--border);
}

.stat-subblock__item:last-child {
  border-bottom: none;
}

.stat-subblock__value {
  font-family: var(--font-mono);
  color: var(--text-secondary);
  white-space: nowrap;
}

.stat-subblock__empty {
  font-size: 12.5px;
  color: var(--text-muted);
  font-style: italic;
}

/* ═══════════════════════════════════════
   STATISTIQUES — disposition responsive (grand écran)
   Colonnes CSS natives (column-count) : l'algorithme du navigateur
   équilibre automatiquement la hauteur des colonnes, sans dupliquer
   ni réorganiser le HTML des sections. Mobile (<768px) : inchangé,
   une seule colonne (comportement actuel préservé à l'identique).
═══════════════════════════════════════ */
.stats-columns {
  column-count: 1;
}

.stats-columns > .panel {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

@media (min-width: 768px) {
  .stats-columns {
    column-count: 2;
    column-gap: 20px;
  }
}