/* ========================================================
   WAMII SUPERVISION & ADMINISTRATION — CHARTE OFFICIELLE
   DA OFFICIELLE DE LA MARQUE WAMII (BÉNIN 🇧🇯) : 
   - Bleu Nuit Officiel : #0C0159
   - Bleu Nuit Profond :  #08003D
   - Jaune Solaire WAMII: #FCCA00 (Boutons, Accents, Focus)
   - Jaune Hover :        #E5B300
   - Vert Succès :        #10B981
   - Rouge Alerte / SOS : #F43F5E
   - Violet KYC :         #6366F1
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --wamii-navy: #0C0159;
  --wamii-navy-deep: #08003D;
  --wamii-yellow: #FCCA00;
  --wamii-yellow-hover: #E5B300;
  --wamii-green: #10B981;
  --wamii-red: #F43F5E;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* ========================================================
   1. THÈME SOMBRE (DARK MODE - FONDATION BLEU NUIT WAMII)
   ======================================================== */
html.dark body {
  background-color: #08003D;
  color: #FFFFFF;
}

html.dark .bg-app-wamii {
  background-color: #08003D;
}

html.dark .bg-card-wamii {
  background-color: #0C0159;
  border-color: rgba(255, 255, 255, 0.12);
}

html.dark .bg-input-wamii {
  background-color: #08003D;
  border-color: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
}

html.dark .header-wamii {
  background-color: #0C0159;
  border-color: rgba(255, 255, 255, 0.1);
}

/* ========================================================
   2. THÈME CLAIR (LIGHT MODE - LISIBILITÉ PARFAITE WCAG)
   Tous les textes, cartes, inputs et tableaux sont nets et contrastés.
   Aucun élément n'est invisible.
   ======================================================== */
html.light body {
  background-color: #F4F6FB !important;
  color: #0C0159 !important;
}

/* Remplacement des conteneurs sombres par du blanc pur et bordures douces */
html.light .bg-\[\#10162B\],
html.light .bg-\[\#141A33\],
html.light .bg-\[\#0E142A\],
html.light .bg-\[\#131932\],
html.light .bg-\[\#0A0F26\],
html.light .bg-\[\#0C0F22\],
html.light .bg-\[\#0C0F22\]\/70,
html.light .bg-\[\#08003D\],
html.light .bg-\[\#08003d\]\/80,
html.light .bg-\[\#060919\],
html.light .bg-card-wamii {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 4px 18px rgba(12, 1, 89, 0.05) !important;
}

/* Header en mode clair */
html.light header,
html.light .header-wamii,
html.light .bg-\[\#0B0F24\] {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 2px 10px rgba(12, 1, 89, 0.04) !important;
}

/* Bordures douces en mode clair */
html.light .border-\[\#1E2746\],
html.light .border-\[\#232D52\],
html.light .border-\[\#1A223E\],
html.light .border-slate-700\/60,
html.light .border-indigo-900\/60,
html.light .border-indigo-950\/80 {
  border-color: #E2E8F0 !important;
}

/* Inputs en mode clair : texte foncé sur fond clair bien contrasté */
html.light input:not([type="checkbox"]):not([type="radio"]),
html.light select,
html.light textarea,
html.light .bg-input-wamii {
  background-color: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}
html.light input::placeholder {
  color: #94A3B8 !important;
}

/* ========================================================
   GESTION DU TEXTE EN MODE CLAIR (AUCUN TEXTE INVISIBLE)
   ======================================================== */
/* Titres principaux et gros chiffres */
html.light h1:not(aside *),
html.light h2:not(aside *),
html.light h3:not(aside *),
html.light .topbar-title,
html.light .text-white:not(aside *):not(button.bg-indigo-600 *):not(button.bg-emerald-600 *):not(button.bg-rose-600 *):not(.badge-protected *):not(button.bg-\[\#FCCA00\] *) {
  color: #0C0159 !important;
}

/* Chiffres KPI et valeurs clés */
html.light .text-3xl:not(aside *),
html.light .text-2xl:not(aside *),
html.light .text-xl:not(aside *) {
  color: #0C0159 !important;
  font-weight: 900 !important;
}

/* Texte secondaire et labels en mode clair */
html.light .text-slate-200:not(aside *):not(button.bg-indigo-600 *):not(button.bg-emerald-600 *):not(button.bg-rose-600 *),
html.light .text-slate-300:not(aside *):not(button.bg-indigo-600 *):not(button.bg-emerald-600 *):not(button.bg-rose-600 *) {
  color: #1E293B !important;
}

html.light .text-slate-400:not(aside *):not(button.bg-indigo-600 *):not(button.bg-emerald-600 *):not(button.bg-rose-600 *),
html.light .text-slate-500:not(aside *):not(button.bg-indigo-600 *):not(button.bg-emerald-600 *):not(button.bg-rose-600 *) {
  color: #475569 !important;
}

/* Tableaux en mode clair */
html.light table th {
  background-color: #F8FAFC !important;
  color: #475569 !important;
  border-bottom: 2px solid #E2E8F0 !important;
}
html.light table td {
  color: #1E293B !important;
  border-bottom: 1px solid #F1F5F9 !important;
}
html.light table tr:hover td {
  background-color: #F8FAFC !important;
}

/* ========================================================
   ÉLÉMENTS SPÉCIFIQUEMENT PROTÉGÉS EN MODE CLAIR
   (La sidebar, les boutons colorés, les badges d'action)
   ======================================================== */
/* 1. La Sidebar RESTE Bleu Nuit Officiel #0C0159 avec texte blanc */
html.light aside {
  background-color: #0C0159 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
html.light aside .text-white {
  color: #FFFFFF !important;
}
html.light aside .text-slate-200 {
  color: #E2E8F0 !important;
}
html.light aside .text-slate-300 {
  color: #CBD5E1 !important;
}
html.light aside .text-slate-400 {
  color: #94A3B8 !important;
}
html.light aside .nav-item-btn {
  color: #CBD5E1 !important;
}
html.light aside .nav-item-btn:hover {
  color: #FFFFFF !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}
html.light aside .nav-item-btn.active {
  background-color: #FCCA00 !important;
  color: #0C0159 !important;
}

/* 2. Les Boutons d'Action & Badges Colorés restent toujours lisibles */
html.light button.bg-indigo-600,
html.light button.bg-emerald-600,
html.light button.bg-rose-600,
html.light button.bg-rose-500,
html.light .bg-indigo-600,
html.light .bg-emerald-600,
html.light .bg-rose-600 {
  color: #FFFFFF !important;
}

/* 3. Boutons Jaune Solaire WAMII : Texte TOUJOURS Bleu Nuit #0C0159 */
.bg-\[\#FCCA00\],
button.bg-\[\#FCCA00\],
.btn-wamii-yellow {
  background-color: #FCCA00 !important;
  color: #0C0159 !important;
  font-weight: 800 !important;
}
.bg-\[\#FCCA00\]:hover,
button.bg-\[\#FCCA00\]:hover {
  background-color: #E5B300 !important;
}

/* ========================================================
   NAVIGATION SIDEBAR STYLES & RÈGLE UNIVERSELLE 1 LIGNE
   ======================================================== */
#sidebar-role-badge,
.role-badge,
.wamii-badge,
button, 
.btn, 
.wamii-btn, 
input[type="button"], 
input[type="submit"] {
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: row !important;
  flex-shrink: 0 !important;
  line-height: normal !important;
  text-overflow: ellipsis;
  transition: transform 0.15s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
}

button:active {
  transform: scale(0.97) !important;
}

/* Protection pour les badges et cellules de tableaux d'administration */
.wamii-table th,
.wamii-table td {
  white-space: nowrap !important;
  vertical-align: middle !important;
}

.wamii-table td button {
  white-space: nowrap !important;
}

/* Modales d'administration toujours au premier plan absolu (au-dessus de Leaflet maps z-1000) */
#modal-reassign-ride,
#modal-finance-confirm,
#modal-dispatcher-contact,
.wamii-admin-modal {
  z-index: 99999 !important;
  position: fixed !important;
}

header, header *, .topbar-wrapper, .wamii-badge, .wamii-action-pill {
  white-space: nowrap !important;
}

.nav-item-btn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #94A3B8;
  transition: all 0.2s ease;
  position: relative;
  white-space: nowrap !important;
}
.nav-item-btn:hover {
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.06);
}
.nav-item-btn.active {
  background-color: #FCCA00 !important;
  color: #0C0159 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(252, 202, 0, 0.35);
}
.nav-item-btn.active .nav-icon {
  color: #0C0159 !important;
}
.nav-item-btn.active .active-dot {
  display: block;
}

/* Style RBAC : Onglets verrouillés / grisés pour les rôles restreints (ex: Directeur des Opérations) */
.nav-item-btn.locked {
  opacity: 0.38 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.85);
  background-color: transparent !important;
  color: #64748B !important;
  pointer-events: auto;
}
.nav-item-btn.locked:hover {
  background-color: rgba(239, 68, 68, 0.08) !important;
  color: #F87171 !important;
  border-color: rgba(239, 68, 68, 0.25);
}
.nav-item-btn.locked .nav-icon {
  color: #64748B !important;
}
.nav-item-btn.locked:hover .nav-icon {
  color: #F87171 !important;
}
.nav-item-btn .lock-badge {
  display: none;
}
.nav-item-btn.locked .lock-badge {
  display: inline-flex !important;
}

/* ========================================================
   SOS & ALARMES ANIMÉES
   ======================================================== */
.sos-alarm {
  animation: sosAlarm 1s infinite alternate;
}
@keyframes sosAlarm {
  0% {
    background-color: rgba(225, 29, 72, 0.95);
    box-shadow: 0 0 25px rgba(225, 29, 72, 0.8);
    transform: scale(1);
  }
  100% {
    background-color: rgba(159, 18, 57, 0.85);
    box-shadow: 0 0 45px rgba(225, 29, 72, 1);
    transform: scale(1.01);
  }
}

/* Scrollbar WAMII */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(12, 1, 89, 0.08);
}
::-webkit-scrollbar-thumb {
  background: rgba(252, 202, 0, 0.4);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(252, 202, 0, 0.8);
}

/* Leaflet Container */
.leaflet-container {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  background-color: #080D1A !important;
}

/* ========================================================
   MOBILE DEVICE BLOCKER (RÉSERVÉ ORDINATEUR / GRAND ÉCRAN)
   ======================================================== */
#mobile-device-blocker {
  display: flex;
}
@media (min-width: 800px) and (min-height: 520px) {
  #mobile-device-blocker {
    display: none !important;
  }
}

/* ========================================================
   PWA INSTALL BANNER STYLES
   ======================================================== */
#pwa-install-banner.show {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}