/* ==========================================================================
   Alarmes Premium — styles complémentaires (filet de sécurité si le CDN
   Tailwind ne charge pas, et quelques ajustements fins non couverts par
   les classes utilitaires).
   ========================================================================== */

:root {
  --brand-400: #818cf8;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;
}

html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #f1f5f9;
  color: #0f172a;
  margin: 0;
}

/* Filet de secours minimal si Tailwind (CDN) n'a pas pu se charger hors ligne */
.no-tailwind-fallback {
  display: block;
}

#chat-panel { transition: transform .25s ease; }
#chat-panel.closed { transform: translateX(100%); }

.chat-bubble-user { background:var(--brand-600); color:#fff; border-radius: 14px 14px 4px 14px; }
.chat-bubble-assistant { background:#f1f5f9; color:#0f172a; border-radius: 14px 14px 14px 4px; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

/* Sidebar (navigation principale back-office) */
#sidebar { transition: transform .2s ease; }
#sidebar.closed { transform: translateX(-100%); }
.nav-item { position: relative; }
.nav-item.active::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  background: var(--brand-400); border-radius: 0 3px 3px 0;
}

/* Animations : modales, tiroirs latéraux, apparitions douces */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.97) translateY(4px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fade-in .15s ease-out; }
.animate-pop-in { animation: pop-in .18s cubic-bezier(.2,.8,.3,1); }
.animate-drawer-in { animation: drawer-in .22s cubic-bezier(.2,.8,.3,1); }
.animate-rise-in { animation: rise-in .25s ease-out both; }

/* Cartes et lignes interactives */
.card-hover { transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease; }
.card-hover:hover { box-shadow: 0 4px 14px -4px rgba(15,23,42,.12); border-color: #c7d2fe; transform: translateY(-1px); }

/* Stepper de suivi d'intervention (portail client) */
.stepper { display: flex; align-items: center; }
.stepper-step { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; }
.stepper-dot { width: 1.75rem; height: 1.75rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 600; background: #e2e8f0; color: #94a3b8; z-index: 1; }
.stepper-step.done .stepper-dot { background: var(--brand-600); color: #fff; }
.stepper-step.current .stepper-dot { background: #fff; color: var(--brand-600); border: 2px solid var(--brand-600); }
.stepper-line { position: absolute; top: .875rem; left: -50%; width: 100%; height: 2px; background: #e2e8f0; z-index: 0; }
.stepper-step.done .stepper-line, .stepper-step.current .stepper-line { background: var(--brand-600); }
.stepper-step:first-child .stepper-line { display: none; }
.stepper-label { font-size: .65rem; color: #64748b; margin-top: .35rem; text-align: center; }

/* Graphiques Chart.js : empêche le canvas de forcer la largeur de sa grille
   parente au-delà du viewport lors d'un changement de largeur sans rechargement. */
canvas { max-width: 100%; }

/* Carte Leaflet */
.leaflet-marker-pin { width: 1.75rem; height: 1.75rem; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.leaflet-marker-pin.chantier { background: #f97316; border-radius: 4px; transform: rotate(45deg); width: 1.1rem; height: 1.1rem; }
.leaflet-popup-content { font-size: .8rem; }

/* Recherche globale (header) */
#global-search-results { max-height: 70vh; overflow-y: auto; }