/* ═══════════════════════════════════════════════════════════════════════════
   GMIA — Réseau National Senelec
   Thème dark navy + orange signature
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --navy:        #0D1F3C;
  --navy-mid:    #1A2E4A;
  --navy-light:  #1E3A5F;
  --navy-hover:  #243751;
  --orange:      #FF8800;
  --orange-dark: #E07A00;
  --blue:        #2A5298;
  --text-main:   #E8EEF6;
  --text-muted:  #8BA4C8;
  --border:      #2A3F5F;
  --card-bg:     #152338;
  --red:         #DC3545;
  --green:       #28A745;
  --yellow:      #FFC107;
  --sidebar-w:   260px;
}

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

html, body {
  height: 100%;
  background: var(--navy);
  color: var(--text-main);
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 13px;
  overflow: hidden;
}

/* ─── App root ──────────────────────────────────────────────────────────────── */
.app-root  { height: 100vh; width: 100vw; overflow: hidden; background: var(--navy); }
.app-wrapper { display: flex; height: 100vh; overflow: hidden; }

/* ─── SIDEBAR ───────────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  height: 100vh;
  background: var(--navy-mid);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* Logo */
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--border);
}
.logo-icon { font-size: 26px; line-height: 1; }
.logo-title { font-size: 18px; font-weight: 700; color: var(--orange); letter-spacing: 1px; }
.logo-sub { font-size: 10px; color: var(--text-muted); margin-top: 1px; }

/* Nav */
.sidebar-nav { padding: 10px 8px; flex-shrink: 0; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
  transition: all 0.15s ease;
  margin-bottom: 2px;
  cursor: pointer;
}
.nav-item:hover { background: var(--navy-hover); color: var(--text-main); text-decoration: none; }
.nav-item.active { background: var(--blue); color: #fff; }
.nav-icon { font-size: 14px; width: 20px; text-align: center; flex-shrink: 0; }

.sidebar-hr { border-color: var(--border); margin: 4px 12px; }

/* Filters */
.filters-panel { padding: 0 12px 16px; flex: 1; }
.filter-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  padding: 8px 0 4px;
  text-transform: uppercase;
}
.filter-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 4px;
}
.filter-label.mt-2 { margin-top: 10px; }
.filter-hr { border-color: var(--border); margin: 10px 0; }

/* (checkboxes remplacés par dropdowns) */

/* ─── DROPDOWNS (tous les filtres) ──────────────────────────────────────────── */
.filter-dropdown .Select-control,
.filter-dropdown .VirtualizedSelectFocusedOption {
  background: var(--navy) !important;
  border-color: var(--border) !important;
  color: var(--text-main) !important;
  border-radius: 6px !important;
  min-height: 30px !important;
  font-size: 12px !important;
}
.filter-dropdown .Select-menu-outer {
  background: var(--navy-mid) !important;
  border: 1px solid var(--border) !important;
  z-index: 9999 !important;
  max-height: 200px !important;
}
.filter-dropdown .Select-option {
  color: var(--text-muted) !important;
  font-size: 12px !important;
  background: transparent !important;
  padding: 6px 10px !important;
}
.filter-dropdown .Select-option.is-selected {
  background: var(--blue) !important;
  color: #fff !important;
}
.filter-dropdown .Select-option.is-focused {
  background: var(--navy-hover) !important;
  color: var(--text-main) !important;
}
.filter-dropdown .Select-value-label { color: var(--text-main) !important; font-size: 11px !important; }
.filter-dropdown .Select-placeholder { color: var(--text-muted) !important; font-size: 11px !important; }
.filter-dropdown .Select-arrow { border-top-color: var(--text-muted) !important; }
.filter-dropdown .Select-clear { color: var(--text-muted) !important; }

/* Tags multi-select */
.filter-dropdown .Select--multi .Select-value {
  background: var(--blue) !important;
  border: none !important;
  color: #fff !important;
  font-size: 10px !important;
  border-radius: 4px !important;
  margin: 2px !important;
  padding: 0 6px !important;
}
.filter-dropdown .Select--multi .Select-value-icon {
  border-right: 1px solid rgba(255,255,255,0.3) !important;
  color: rgba(255,255,255,0.8) !important;
}
.filter-dropdown .Select--multi .Select-value-icon:hover { color: #fff !important; }

/* Reset button */
.btn-reset {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-reset:hover { background: var(--navy-hover); color: var(--text-main); border-color: var(--text-muted); }

/* ─── MAIN AREA ─────────────────────────────────────────────────────────────── */
.main-area {
  flex: 1;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--navy);
}

/* Header */
.page-header {
  background: var(--navy-mid);
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  height: 42px;
  flex-shrink: 0;
}
.header-inner {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-title { font-size: 14px; font-weight: 700; color: var(--text-main); margin: 0; }
.header-sub { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.header-meta { display: flex; align-items: center; gap: 12px; }
.header-time { font-size: 11px; color: var(--text-muted); }
.header-status { font-size: 11px; color: var(--green); }

/* Page body */
.page-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.page-body { padding: 2px 8px 0 8px; }

/* ─── KPI CARDS ─────────────────────────────────────────────────────────────── */
.kpi-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  height: 80px;
  overflow: hidden;
}
.kpi-card .card-body { padding: 10px 14px; height: 100%; }
.kpi-inner { display: flex; align-items: center; gap: 10px; height: 100%; }
.kpi-icon { font-size: 22px; flex-shrink: 0; line-height: 1; }
.kpi-text { min-width: 0; }
.kpi-value { font-size: 14px; font-weight: 700; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-label { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.2; }
.kpi-sub { font-size: 10px; color: var(--text-muted); margin-top: 1px; font-style: italic; }

/* ─── DATE PICKER TOP10 ─────────────────────────────────────────────────────── */
.date-picker-t10 .DateInput_input {
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  padding: 4px 8px !important;
}
.date-picker-t10 .DateRangePickerInput {
  background: transparent !important;
  border: none !important;
}
.date-picker-t10 .DateRangePickerInput_arrow { color: var(--text-muted); }

/* ─── BOUTONS SD RECAP ───────────────────────────────────────────────────────── */
.btn-sd-recap {
  background: var(--card-bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-sd-recap:hover { border-color: #FF8800; color: #FF8800; }
.btn-sd-recap.active {
  background: #FF8800;
  color: #fff;
  border-color: #FF8800;
  font-weight: 700;
}

/* ─── BOUTONS TOP10 ─────────────────────────────────────────────────────────── */
.btn-t10 {
  background: var(--card-bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-t10:hover { border-color: #FF8800; color: #FF8800; }
.btn-t10.active {
  background: #FF8800;
  color: #fff;
  border-color: #FF8800;
  font-weight: 600;
}

/* ─── CHART CARDS ───────────────────────────────────────────────────────────── */
.chart-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.chart-card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--border);
  padding: 4px 10px;
}
.chart-header-inner { display: flex; align-items: center; justify-content: space-between; }
.chart-title { font-size: 14px; font-weight: 700; color: var(--text-main); line-height: 1.2; }
.chart-sub { font-size: 10px; color: var(--text-muted); line-height: 1.2; }
.chart-card .card-body { padding: 2px; background: transparent; }

/* Bouton IA — caché jusqu'à l'implémentation de l'assistant */
.btn-ia {
  display: none !important;
  background: transparent;
  border: 1px solid var(--orange);
  color: var(--orange);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
  flex-shrink: 0;
}
.btn-ia:hover { background: var(--orange); color: #fff; }

/* Bouton orange générique */
.btn-orange {
  background: var(--orange);
  border: none;
  color: #fff;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
}
.btn-orange:hover { background: var(--orange-dark); }

/* ─── MODAL IA ──────────────────────────────────────────────────────────────── */
.modal-content { background: var(--navy-mid); border: 1px solid var(--border); border-radius: 12px; }
.modal-header { background: var(--navy-mid); border-bottom: 1px solid var(--border); color: var(--text-main); }
.modal-title { color: var(--text-main); font-size: 15px; font-weight: 700; }
.modal-body { background: var(--navy); color: var(--text-main); padding: 20px; }
.modal-footer { background: var(--navy-mid); border-top: 1px solid var(--border); }
.btn-close { filter: invert(1); }

.ia-response {
  color: var(--text-main);
  font-size: 13px;
  line-height: 1.7;
}
.ia-response h1, .ia-response h2, .ia-response h3 { color: var(--orange); margin: 12px 0 6px; }
.ia-response strong { color: var(--yellow); }
.ia-response p { margin-bottom: 8px; }
.ia-response ul, .ia-response ol { padding-left: 20px; margin-bottom: 8px; }
.ia-response code { background: var(--navy-light); padding: 1px 5px; border-radius: 4px; font-size: 12px; }

/* ─── GRAPHS ────────────────────────────────────────────────────────────────── */
.js-plotly-plot .plotly, .js-plotly-plot .plotly .main-svg { background: transparent !important; }
.modebar-container { display: none !important; }

/* ─── BADGES & TAGS ─────────────────────────────────────────────────────────── */
.badge-orange { background: var(--orange); color: #fff; border-radius: 4px; padding: 2px 6px; font-size: 10px; font-weight: 600; }
.badge-red    { background: var(--red);    color: #fff; border-radius: 4px; padding: 2px 6px; font-size: 10px; font-weight: 600; }
.badge-green  { background: var(--green);  color: #fff; border-radius: 4px; padding: 2px 6px; font-size: 10px; font-weight: 600; }
.badge-blue   { background: var(--blue);   color: #fff; border-radius: 4px; padding: 2px 6px; font-size: 10px; font-weight: 600; }

/* ─── TABLE (base) ──────────────────────────────────────────────────────────── */
.gmia-table { width: 100%; border-collapse: collapse; }

/* (radio trimestre remplacé par dropdown) */

/* ─── SCROLLBAR ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ─── INDICATEUR GRAPHES CLIQUABLES ─────────────────────────────────────────── */
.click-tip {
  font-size: 9.5px;
  color: var(--orange);
  opacity: 0.75;
  font-style: italic;
  letter-spacing: 0.3px;
}
.chart-card:has(.click-tip) { cursor: pointer; }

/* Dropdown Dash dans les cards — ne pas clipper le menu */
.chart-card-filters { overflow: visible !important; }
.chart-card-filters .card-body { overflow: visible !important; }
.Select-menu-outer { z-index: 9999 !important; }

/* ─── BANDEAU TITRE TB ──────────────────────────────────────────────────────── */
.tb-banner {
  background: linear-gradient(90deg, var(--blue) 0%, var(--navy-light) 100%);
  border: 1px solid var(--orange);
  color: var(--orange);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 2px 18px;
  border-radius: 6px;
  margin-bottom: 3px;
  text-align: center;
}

/* (dept-toggle remplacé par dropdown) */

/* ─── TABLE NATURE × ANNÉE ───────────────────────────────────────────────────── */
.gmia-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.gmia-table th {
  background: var(--navy-light);
  color: var(--text-muted);
  padding: 2px 6px;
  font-weight: 600;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
}
.gmia-table th:first-child { text-align: left; }
.gmia-table td {
  padding: 1px 6px;
  border-bottom: 0.5px solid var(--border);
  color: var(--text-main);
  text-align: center;
  font-size: 10.5px;
  white-space: nowrap;
  line-height: 1.2;
}
.gmia-table td:first-child { text-align: left; }
.gmia-table tr:hover td { background: var(--navy-hover); }
.gmia-table tr:last-child td { border-bottom: none; }

/* ─── BOUTONS SD (Suivi KPIs) ───────────────────────────────────────────────── */
.btn-sd-kpi {
  background: #152338;
  border: 1px solid #2A3F5F;
  color: var(--text-muted);
  font-size: 9.5px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  line-height: 1.4;
}
.btn-sd-kpi:hover {
  background: var(--navy-hover);
  border-color: var(--orange);
  color: var(--orange);
}
.btn-sd-kpi.active,
.btn-sd-kpi:active {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff !important;
}

/* ─── RESPONSIVE ────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  :root { --sidebar-w: 220px; }
  .kpi-value { font-size: 12px; }
}

/* ─── HAMBURGER (masqué sur desktop) ────────────────────────────────────────── */
.hamburger-btn {
  display: none;
  position: fixed;
  top: 6px;
  left: 10px;
  z-index: 1100;
  background: var(--navy-mid);
  border: 1px solid var(--border);
  color: var(--text-main);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  padding: 0;
}
.hamburger-btn:hover { background: var(--navy-hover); }

/* ─── OVERLAY (masqué par défaut) ───────────────────────────────────────────── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.sidebar-overlay.visible { display: block; }

/* ─── BOUTON FERMER DANS LE SIDEBAR (masqué sur desktop) ──────────────────── */
.sidebar-close-btn {
  display: none;
  position: absolute;
  top: 14px;
  right: 12px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  padding: 0;
}
.sidebar-close-btn:hover { background: var(--navy-hover); color: var(--text-main); }

/* ─── MOBILE (≤768px) ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  html, body {
    overflow: auto;
    height: auto;
  }

  .app-root {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .app-wrapper {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  /* Sidebar : fixe, caché hors-écran par défaut */
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: var(--sidebar-w);
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    box-shadow: 6px 0 28px rgba(0, 0, 0, 0.65);
    overflow-y: auto;
  }

  /* Sidebar ouverte */
  .sidebar.open {
    transform: translateX(0);
  }

  /* Logo : position relative pour le bouton ✕ */
  .sidebar-logo {
    position: relative;
    padding-right: 44px;
  }

  /* Bouton ✕ visible sur mobile */
  .sidebar-close-btn {
    display: flex;
  }

  /* Main area prend toute la largeur */
  .main-area {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: visible;
  }

  /* Header : padding gauche pour le hamburger */
  .page-header {
    padding-left: 54px;
  }

  /* Contenu : scroll horizontal si tableau trop large */
  .page-content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 24px;
    height: auto;
    max-height: none;
  }

  /* Hamburger visible */
  .hamburger-btn {
    display: flex;
  }

  /* ══════════════════════════════════════════════════════
     COLONNES BOOTSTRAP → empiler verticalement sur mobile
     ══════════════════════════════════════════════════════ */
  .row > [class*="col"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Exception : KPI cards 2 par ligne (elles ont la classe .kpi-col ou col-6) */
  .kpi-row > [class*="col"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  /* ══════════════════════════════════════════════════════
     TABLEAUX → scroll horizontal
     ══════════════════════════════════════════════════════ */
  .dash-spreadsheet-container,
  .dash-table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Tous les tableaux HTML → scroll horizontal sur mobile */
  table, table.table, .gmia-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }

  /* Wrapper scrollable */
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ══════════════════════════════════════════════════════
     PLOTLY GRAPHS → laisser Plotly gérer sa taille,
     on utilise JS resize pour forcer le recalcul
     ══════════════════════════════════════════════════════ */
  .dash-graph {
    min-width: 0;
    max-width: 100%;
  }

  /* ══════════════════════════════════════════════════════
     CARTES DBC → espacement
     ══════════════════════════════════════════════════════ */
  .card {
    margin-bottom: 12px !important;
  }

  .card-body {
    padding: 10px !important;
  }

  /* ══════════════════════════════════════════════════════
     JAUGES / INDICATEURS → 1 par ligne
     ══════════════════════════════════════════════════════ */
  .gauge-col, [class*="gauge"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* ══════════════════════════════════════════════════════
     TEXTES
     ══════════════════════════════════════════════════════ */
  .header-title { font-size: 12px; }
  .header-time, .header-status { font-size: 10px; }

  /* Réduire les polices des titres de section */
  h4, .h4 { font-size: 14px !important; }
  h5, .h5 { font-size: 13px !important; }
  h6, .h6 { font-size: 12px !important; }

  /* ══════════════════════════════════════════════════════
     DASH DROPDOWNS → pleine largeur, pas de clavier mobile
     ══════════════════════════════════════════════════════ */
  .Select, .Select-control, .VirtualizedSelectFocusedOption {
    width: 100% !important;
  }

  select, .form-select, .form-control {
    width: 100% !important;
  }

  /* ══════════════════════════════════════════════════════
     ANTI-CLAVIER MOBILE : masquer le champ de recherche
     des dcc.Dropdown (Dash React-Select interne)
     ══════════════════════════════════════════════════════ */
  .Select-input input,
  .dash-dropdown .Select-input input,
  .filter-dropdown .Select-input input {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* ══════════════════════════════════════════════════════
     ANTI-ZOOM IOS : font-size ≥ 16px sur tous les inputs
     (iOS Safari zoome automatiquement si < 16px)
     ══════════════════════════════════════════════════════ */
  input, select, textarea,
  .Select-control, .Select-value-label,
  .Select-placeholder {
    font-size: 16px !important;
  }

  /* ══════════════════════════════════════════════════════
     ANTI-ZOOM GRAPHIQUES : bloquer le zoom tactile Plotly
     Le doigt qui scrolle la page ne doit pas zoomer les graphes.
     touch-action: pan-y = seul le scroll vertical passe au browser,
     le pinch-to-zoom et le drag horizontal restent bloqués.
     ══════════════════════════════════════════════════════ */
  .js-plotly-plot .plotly .drag,
  .js-plotly-plot .plotly .nsewdrag,
  .js-plotly-plot .plotly .nsdrag,
  .js-plotly-plot .plotly .ewdrag,
  .js-plotly-plot .plotly svg,
  .js-plotly-plot .svg-container {
    touch-action: pan-y !important;
  }

  /* Désactiver aussi le zoom sur le conteneur Dash Graph */
  .dash-graph {
    touch-action: pan-y !important;
  }

  /* ══════════════════════════════════════════════════════
     DÉSACTIVER LE CLIC SUR LES LÉGENDES PLOTLY (mobile)
     Sur PC, cliquer sur une légende filtre les séries.
     Sur téléphone c'est gênant (mauvais tap accidentel).
     On bloque les événements pointer sur tous les éléments
     interactifs de la légende Plotly.
     ══════════════════════════════════════════════════════ */
  .js-plotly-plot .legendtoggle {
    pointer-events: none !important;
  }
  .js-plotly-plot .legend text {
    pointer-events: none !important;
  }
  .js-plotly-plot .legend .legendtext {
    pointer-events: none !important;
  }
  /* Curseur non-cliquable sur toute la zone légende */
  .js-plotly-plot .legend {
    cursor: default !important;
  }

  /* ══════════════════════════════════════════════════════
     DÉSACTIVER LE CROSS-FILTER AU TAP (mobile uniquement)
     Sur PC, cliquer sur une barre/courbe filtre le tableau
     de bord via clickData. Sur mobile, ce comportement est
     involontaire (mauvais tap). On bloque la couche de drag
     Plotly → plus de clickData → plus de cross-filter.
     ══════════════════════════════════════════════════════ */
  .js-plotly-plot .nsewdrag,
  .js-plotly-plot .nsdrag,
  .js-plotly-plot .ewdrag,
  .js-plotly-plot .drag {
    pointer-events: none !important;
  }
}

/* ─── DatePickerRange — thème sombre (page /prediction) ─────────────────────── */
/* react-dates injecte du texte noir sur fond blanc par défaut.                   */
/* On force les couleurs du thème GMIA sur tous ses éléments internes.            */

/* Conteneur principal */
.date-picker-t10 .DateRangePickerInput,
.date-picker-t10 .DateRangePickerInput__withBorder {
  background-color: var(--navy-mid) !important;
  border: 1px solid var(--blue) !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
}

/* Fond de chaque champ de saisie */
.date-picker-t10 .DateInput {
  background: var(--navy-mid) !important;
  border-radius: 4px !important;
}

/* Texte dans les champs (la date saisie / affichée) */
.date-picker-t10 .DateInput_input {
  color: var(--text-main) !important;
  background-color: var(--navy-mid) !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 13px !important;
  font-family: 'Segoe UI', sans-serif !important;
  caret-color: var(--orange) !important;
}

/* Placeholder */
.date-picker-t10 .DateInput_input::placeholder {
  color: var(--text-muted) !important;
}

/* Soulignement orange quand actif */
.date-picker-t10 .DateInput_input__focused {
  border-bottom: 2px solid var(--orange) !important;
  outline: none !important;
}

/* Flèche séparatrice entre les deux dates */
.date-picker-t10 .DateRangePickerInput_arrow {
  color: var(--text-muted) !important;
}
.date-picker-t10 .DateRangePickerInput_arrow svg {
  fill: var(--text-muted) !important;
}

/* Bouton "×" pour effacer les dates */
.date-picker-t10 .DateRangePickerInput_clearDates {
  background-color: transparent !important;
}
.date-picker-t10 .DateRangePickerInput_clearDates svg {
  fill: var(--text-muted) !important;
}
.date-picker-t10 .DateRangePickerInput_clearDates:hover svg {
  fill: var(--text-main) !important;
}

/* Calendrier déroulant */
.date-picker-t10 .DateRangePicker_picker {
  background-color: var(--navy-mid) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  z-index: 1050 !important;
}
.date-picker-t10 .DayPicker,
.date-picker-t10 .CalendarMonth,
.date-picker-t10 .CalendarMonthGrid {
  background: var(--navy-mid) !important;
}

/* En-tête du calendrier (nom du mois + flèches) */
.date-picker-t10 .DayPickerNavigation_button {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
}
.date-picker-t10 .DayPickerNavigation_button svg {
  fill: var(--text-muted) !important;
}
.date-picker-t10 .DayPickerNavigation_button:hover {
  background: var(--navy-hover) !important;
}

.date-picker-t10 .CalendarMonth_caption {
  color: var(--text-main) !important;
}

/* Jours de la semaine (Lun, Mar…) */
.date-picker-t10 .DayPicker_weekHeader_li small {
  color: var(--text-muted) !important;
}

/* Jours du mois */
.date-picker-t10 .CalendarDay__default {
  background: var(--navy-mid) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border) !important;
}
.date-picker-t10 .CalendarDay__default:hover {
  background: var(--navy-hover) !important;
  color: var(--text-main) !important;
}

/* Jours sélectionnés */
.date-picker-t10 .CalendarDay__selected,
.date-picker-t10 .CalendarDay__selected:hover {
  background: var(--orange) !important;
  color: #fff !important;
  border: 1px solid var(--orange-dark) !important;
}

/* Plage entre les deux dates */
.date-picker-t10 .CalendarDay__selected_span {
  background: rgba(255, 136, 0, 0.25) !important;
  color: var(--text-main) !important;
  border: 1px solid rgba(255, 136, 0, 0.4) !important;
}
.date-picker-t10 .CalendarDay__selected_span:hover {
  background: rgba(255, 136, 0, 0.4) !important;
}

/* Jours hors plage autorisée */
.date-picker-t10 .CalendarDay__blocked_out_of_range,
.date-picker-t10 .CalendarDay__blocked_out_of_range:hover {
  color: var(--text-muted) !important;
  background: var(--navy) !important;
  opacity: 0.4;
}

/* ─── Fin DatePickerRange ─────────────────────────────────────────────────────── */