/* ═══════════════════════════════════════════════════════════
   Next Step — Theme + Mobile (chargé dans toutes les pages)
   ═══════════════════════════════════════════════════════════
   Stratégie : surcharger les CSS variables des pages standalone
   pour permettre le mode sombre / clair via [data-theme].
   ═══════════════════════════════════════════════════════════ */

/* Empêcher le flash blanc avant init JS : appliquer le fond immédiatement */
html { background: #05050a; }
html[data-theme="light"] { background: #f5f5f8; }

/* ───────────────── MODE CLAIR ───────────────── */
html[data-theme="light"] {
  --void:        #f0f0f4;
  --night:       #fafafc;
  --night2:      #ffffff;
  --night3:      #f5f5f8;
  --night4:      #ebebf0;
  --deep:        #ffffff;
  --surface:     #ffffff;
  --card:        #ffffff;
  --card2:       #f8f8fb;
  --rim:         rgba(0,0,0,.08);

  --text:        #1a1a2a;
  --text2:       #555570;
  --text3:       #888899;
  --text4:       #aaaabb;
  --t1:          #1a1a2a;
  --t2:          #555570;
  --t3:          #888899;
  --t4:          #aaaabb;

  --border:      rgba(0,0,0,.08);
  --border2:     rgba(0,0,0,.06);
  --b1:          rgba(0,180,200,.25);
  --b2:          rgba(0,0,0,.08);
  --b3:          rgba(0,0,0,.05);

  --gold:        #9a7520;
  --gold-l:      #b88e2c;
  --gold-d:      #6e5418;
  --gold2:       #b88e2c;

  --cyan:        #008ba0;
  --cyan2:       #006d80;
  --pink:        #c41e5d;
  --pink2:       #962048;
  --violet:      #6638cc;
  --green:       #15805f;
  --green-neon:  #15805f;
  --red:         #c8332c;

  --glow-cyan:   0 2px 8px rgba(0,139,160,.15);
  --glow-pink:   0 2px 8px rgba(196,30,93,.15);
  --glow-gold:   0 2px 8px rgba(154,117,32,.15);
  --glow-green:  0 2px 8px rgba(21,128,95,.15);
  --neon-gold:   0 2px 8px rgba(154,117,32,.15);
}

/* Inputs : forcer le contraste en mode clair (les pages standalone utilisent !important) */
html[data-theme="light"] body,
html[data-theme="light"] html { color: #1a1a2a; }
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.12) !important;
  color: #1a1a2a !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: #999 !important; }
html[data-theme="light"] select option { background: #fff !important; color: #1a1a2a !important; }

/* Scrollbar adaptée mode clair */
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.35); }

/* Cartes / surfaces — gradient invisible en mode clair */
html[data-theme="light"] .card,
html[data-theme="light"] .kpi-card,
html[data-theme="light"] .stat-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

/* Tables : alternance plus douce */
html[data-theme="light"] tbody tr:hover td { background: rgba(0,139,160,.04) !important; }
html[data-theme="light"] thead th { color: #555570 !important; border-color: rgba(0,0,0,.1) !important; }
html[data-theme="light"] td { color: #555570 !important; border-color: rgba(0,0,0,.05) !important; }

/* Modales — fond plus clair en mode clair */
html[data-theme="light"] .modal-bg { background: rgba(0,0,0,.45) !important; }
html[data-theme="light"] .modal {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.1) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.15) !important;
}

/* Sidebar mode clair */
html[data-theme="light"] #sidebar,
html[data-theme="light"] .sidebar,
html[data-theme="light"] aside {
  background: #ffffff !important;
  border-right: 1px solid rgba(0,0,0,.08) !important;
}
html[data-theme="light"] .sb-link {
  color: #555570 !important;
}
html[data-theme="light"] .sb-link:hover,
html[data-theme="light"] .sb-link.active,
html[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .nav-link.active {
  color: var(--gold) !important;
  background: rgba(154,117,32,.08) !important;
}
html[data-theme="light"] .sb-section { color: #888 !important; }

/* Topbar mode clair */
html[data-theme="light"] header,
html[data-theme="light"] .topbar {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
}

/* Tailwind utility overrides quand utilisé */
html[data-theme="light"] body.h-screen,
html[data-theme="light"] body[style*="background:var(--night)"] { background: #f5f5f8 !important; }

/* Flash messages : adapter */
html[data-theme="light"] .flash-ok {
  background: #f0fdf4 !important;
  border-color: #15805f !important;
  color: #15805f !important;
}
html[data-theme="light"] .flash-err {
  background: #fef2f2 !important;
  border-color: #c8332c !important;
  color: #c8332c !important;
}

/* Login : préserver le fond noir distinctif (la page est intentionnellement sombre) */
html[data-theme="light"] body.login-bg,
body.login-bg { background: #05050a !important; }

/* ───────────────── BOUTONS GLOBAUX (hamburger + thème) ───────────────── */
.app-fab-bar {
  position: fixed;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
  z-index: 1000;
  pointer-events: none;
}
.app-fab-bar > * { pointer-events: auto; }

.app-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--card, #14142a);
  border: 1px solid var(--border, rgba(212,168,67,.2));
  color: var(--text, #e2e2ee);
  cursor: pointer;
  transition: all .2s;
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}
.app-fab:hover {
  border-color: var(--gold, #d4a843);
  color: var(--gold, #d4a843);
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
}
html[data-theme="light"] .app-fab {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.12) !important;
  color: #555570 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
html[data-theme="light"] .app-fab:hover {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
}

/* L'icône SVG dans le bouton */
.app-fab svg { width: 18px; height: 18px; }

/* Le hamburger ne s'affiche que sur mobile */
#app-menu-btn { display: none; }

/* ───────────────── MENU MOBILE ───────────────── */
#app-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  z-index: 998;
  animation: fade-in .2s;
}
#app-mobile-overlay.open { display: block; }

@keyframes fade-in {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes slide-in-left {
  from { transform: translateX(-100%); } to { transform: translateX(0); }
}

/* ───────────────── RESPONSIVE (≤ 900px) ───────────────── */
@media (max-width: 900px) {
  #app-menu-btn { display: inline-flex !important; }

  /* Cacher le sidebar par défaut + le positionner en overlay quand ouvert */
  #sidebar,
  .sidebar,
  body > aside,
  body[class*="flex"] > aside {
    display: none !important;
  }
  #sidebar.mobile-open,
  .sidebar.mobile-open,
  body > aside.mobile-open,
  body[class*="flex"] > aside.mobile-open {
    display: flex !important;
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: 260px !important;
    min-width: 260px !important;
    z-index: 999 !important;
    animation: slide-in-left .25s cubic-bezier(.4,0,.2,1);
    box-shadow: 4px 0 24px rgba(0,0,0,.4);
    overflow-y: auto;
  }

  /* Le contenu principal prend toute la largeur */
  body > .flex-1, body main, .main-area {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Padding réduit sur mobile */
  main { padding: 16px !important; }

  /* Grids → 1 colonne */
  .grid2, .grid3 {
    grid-template-columns: 1fr !important;
  }

  /* KPI grid → 2 colonnes max */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Headers de page : empilage */
  .page-header, [style*="justify-content:space-between"][style*="flex-wrap:wrap"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Tables : permettre le scroll horizontal */
  table { font-size: 12px !important; }
  .card, .stat-card { overflow-x: auto; }

  /* Modales : prennent presque tout l'écran */
  .modal {
    width: 96vw !important;
    max-width: 96vw !important;
    padding: 18px !important;
  }
  .modal-actions {
    flex-direction: column-reverse !important;
  }
  .modal-actions .btn, .modal-actions button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Topbar : éléments empilables */
  .topbar, header[style*="height:50px"] {
    padding: 0 12px !important;
  }
  .topbar-right, header > div:last-child {
    gap: 8px !important;
  }

  /* Décaler les FAB sur mobile pour ne pas masquer la topbar */
  .app-fab-bar { top: 8px; right: 8px; }
  .app-fab { width: 36px; height: 36px; }
}

@media (max-width: 600px) {
  .kpi-grid { grid-template-columns: 1fr !important; }
  .page-title { font-size: 22px !important; }
  /* Cacher la date dans la topbar quand peu de place */
  #tb-date { display: none !important; }
}

/* ───────────────── DÉTAILS UX ───────────────── */
/* Boutons et liens : feedback tactile */
@media (hover: none) {
  .btn:active, button:active, a:active { opacity: .7; }
}

/* Sécurité : empêcher le scroll horizontal accidentel */
body { overflow-x: hidden; }