/* =============================================================
   NIGER URGENCE — app/assets/css/app.css
   Placement : /app/assets/css/app.css
   Design : Tactique / Command Center — dark, haute lisibilité
   Police : Barlow Condensed (titres) + IBM Plex Mono (données)
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=IBM+Plex+Mono:wght@400;500&family=Barlow:wght@400;500;600&display=swap');

/* --- Variables -------------------------------------------- */
:root {
  --bg-deep    : #070a0e;
  --bg-surface : #0f1419;
  --bg-card    : #151c25;
  --bg-raised  : #1c2635;

  --red        : #e63946;
  --red-glow   : rgba(230,57,70,.35);
  --red-dark   : #991b27;
  --amber      : #f59e0b;
  --amber-glow : rgba(245,158,11,.3);
  --green      : #22c55e;
  --green-glow : rgba(34,197,94,.25);
  --blue       : #38bdf8;
  --blue-glow  : rgba(56,189,248,.25);

  --text-primary  : #e8edf3;
  --text-secondary: #7a8fa6;
  --text-muted    : #3d5166;
  --border        : rgba(255,255,255,.07);
  --border-bright : rgba(255,255,255,.15);

  --font-display : 'Barlow Condensed', sans-serif;
  --font-body    : 'Barlow', sans-serif;
  --font-mono    : 'IBM Plex Mono', monospace;

  --r-sm : 6px;
  --r-md : 12px;
  --r-lg : 20px;
  --r-xl : 32px;
}

/* --- Reset ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  background : var(--bg-deep);
  color      : var(--text-primary);
  font-family: var(--font-body);
  min-height : 100dvh;
  overflow-x : hidden;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--blue); text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select {
  font-family: inherit;
  background : var(--bg-raised);
  border     : 1px solid var(--border);
  color      : var(--text-primary);
  border-radius: var(--r-sm);
  padding    : 12px 16px;
  width      : 100%;
  font-size  : 16px;
  outline    : none;
  transition : border-color .2s;
}
input:focus, textarea:focus {
  border-color: var(--blue);
  box-shadow  : 0 0 0 3px var(--blue-glow);
}

/* --- Typographie ------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.mono { font-family: var(--font-mono); }

/* --- Layout commun ----------------------------------------- */
.page {
  max-width : 500px;
  margin    : 0 auto;
  padding   : 0 16px 100px;
  min-height: 100dvh;
}
.page--full {
  max-width: 100%;
  padding  : 0;
}

/* --- Header ------------------------------------------------ */
.nu-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 16px 20px;
  border-bottom  : 1px solid var(--border);
  background     : var(--bg-surface);
  position       : sticky;
  top            : 0;
  z-index        : 100;
}
.nu-logo {
  font-family: var(--font-display);
  font-size  : 22px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color      : var(--text-primary);
}
.nu-logo span { color: var(--red); }

/* --- Bouton SOS -------------------------------------------- */
.sos-btn {
  position       : relative;
  width          : 220px;
  height         : 220px;
  border-radius  : 50%;
  background     : radial-gradient(circle at 35% 35%, #ff4757, var(--red-dark));
  border         : none;
  cursor         : pointer;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  box-shadow     : 0 0 60px var(--red-glow), 0 0 120px rgba(230,57,70,.15), inset 0 1px 0 rgba(255,255,255,.15);
  transition     : transform .12s, box-shadow .12s;
  -webkit-tap-highlight-color: transparent;
}
.sos-btn:active {
  transform : scale(.94);
  box-shadow: 0 0 30px var(--red-glow);
}
.sos-btn__text {
  font-family : var(--font-display);
  font-size   : 52px;
  font-weight : 800;
  color       : #fff;
  letter-spacing: .1em;
  line-height : 1;
}
.sos-btn__sub {
  font-family: var(--font-body);
  font-size  : 12px;
  color      : rgba(255,255,255,.7);
  margin-top : 4px;
  letter-spacing: .08em;
}
/* Pulse rings */
.sos-btn::before, .sos-btn::after {
  content      : '';
  position     : absolute;
  border-radius: 50%;
  border       : 2px solid var(--red);
  animation    : pulse-ring 2.5s ease-out infinite;
}
.sos-btn::before { width: 260px; height: 260px; animation-delay: 0s; }
.sos-btn::after  { width: 310px; height: 310px; animation-delay: .6s; }

@keyframes pulse-ring {
  0%   { opacity: .8; transform: scale(.85); }
  100% { opacity: 0;  transform: scale(1.1); }
}

.sos-btn--active {
  animation: sos-active-pulse 1s ease-in-out infinite;
}
@keyframes sos-active-pulse {
  0%, 100% { box-shadow: 0 0 60px var(--red-glow), 0 0 120px rgba(230,57,70,.15); }
  50%       { box-shadow: 0 0 90px rgba(230,57,70,.6), 0 0 180px rgba(230,57,70,.3); }
}

/* --- Boutons généraux -------------------------------------- */
.btn {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 8px;
  padding        : 14px 24px;
  border-radius  : var(--r-md);
  font-family    : var(--font-display);
  font-size      : 18px;
  font-weight    : 700;
  letter-spacing : .05em;
  text-transform : uppercase;
  transition     : opacity .15s, transform .1s, box-shadow .15s;
  width          : 100%;
}
.btn:active { transform: scale(.97); }
.btn--primary {
  background : var(--blue);
  color      : var(--bg-deep);
  box-shadow : 0 4px 20px var(--blue-glow);
}
.btn--primary:hover { opacity: .9; }
.btn--danger {
  background: var(--red);
  color     : #fff;
  box-shadow: 0 4px 20px var(--red-glow);
}
.btn--success {
  background: var(--green);
  color     : var(--bg-deep);
  box-shadow: 0 4px 20px var(--green-glow);
}
.btn--ghost {
  background  : transparent;
  color       : var(--text-secondary);
  border      : 1px solid var(--border);
}
.btn--ghost:hover { border-color: var(--border-bright); color: var(--text-primary); }
.btn--sm { padding: 10px 18px; font-size: 15px; }
.btn:disabled { opacity: .4; pointer-events: none; }

/* --- Cards ------------------------------------------------- */
.card {
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: var(--r-md);
  padding      : 16px;
}
.card--red   { border-color: rgba(230,57,70,.4); }
.card--amber { border-color: rgba(245,158,11,.4); }
.card--green { border-color: rgba(34,197,94,.3); }

/* --- Badges gravité --------------------------------------- */
.badge {
  display       : inline-block;
  padding       : 2px 8px;
  border-radius : 4px;
  font-family   : var(--font-mono);
  font-size     : 11px;
  font-weight   : 500;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.badge--critique { background: var(--red);   color: #fff; }
.badge--grave    { background: var(--amber); color: var(--bg-deep); }
.badge--modere   { background: #7c3aed;      color: #fff; }
.badge--faible   { background: var(--bg-raised); color: var(--text-secondary); }

/* --- Statut ambulance ------------------------------------- */
.status-dot {
  width : 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.status-dot--disponible    { background: var(--green); box-shadow: 0 0 6px var(--green-glow); }
.status-dot--en_route,
.status-dot--en_intervention { background: var(--amber); box-shadow: 0 0 6px var(--amber-glow); animation: blink 1s infinite; }
.status-dot--hors_service  { background: var(--text-muted); }

@keyframes blink {
  50% { opacity: .4; }
}

/* --- Formulaires ------------------------------------------ */
.form-group { margin-bottom: 16px; }
.form-label {
  display     : block;
  font-family : var(--font-mono);
  font-size   : 11px;
  color       : var(--text-secondary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.otp-input {
  letter-spacing: .4em;
  font-family   : var(--font-mono);
  font-size     : 28px;
  text-align    : center;
}

/* --- PIN input -------------------------------------------- */
.pin-display {
  display        : flex;
  justify-content: center;
  gap            : 12px;
  margin         : 24px 0;
}
.pin-dot {
  width        : 18px;
  height       : 18px;
  border-radius: 50%;
  border       : 2px solid var(--border-bright);
  transition   : background .15s, border-color .15s;
}
.pin-dot--filled {
  background  : var(--blue);
  border-color: var(--blue);
}
.pin-keypad {
  display              : grid;
  grid-template-columns: repeat(3, 1fr);
  gap                  : 12px;
  max-width            : 280px;
  margin               : 0 auto;
}
.pin-key {
  aspect-ratio   : 1;
  background     : var(--bg-raised);
  border         : 1px solid var(--border);
  border-radius  : var(--r-md);
  font-family    : var(--font-display);
  font-size      : 28px;
  font-weight    : 600;
  color          : var(--text-primary);
  display        : flex;
  align-items    : center;
  justify-content: center;
  transition     : background .1s, transform .08s;
}
.pin-key:active { background: var(--bg-deep); transform: scale(.93); }
.pin-key--clear { font-size: 14px; color: var(--text-secondary); }

/* --- Carte Leaflet ----------------------------------------- */
.map-container {
  width : 100%;
  height: 100%;
}
.leaflet-container { background: var(--bg-deep) !important; }

/* Map pins */
.map-pin {
  width          : 36px;
  height         : 36px;
  border-radius  : 50% 50% 50% 4px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  transform      : rotate(-45deg);
  box-shadow     : 0 3px 10px rgba(0,0,0,.5);
}
.map-pin svg { transform: rotate(45deg); width: 18px; height: 18px; }
.map-pin--sos  { background: var(--red);   color: #fff; position: relative; }
.map-pin--amb-ok   { background: var(--green); color: var(--bg-deep); border-radius: var(--r-sm); transform: none; }
.map-pin--amb-busy { background: var(--amber); color: var(--bg-deep); border-radius: var(--r-sm); transform: none; }
.map-pin--user { background: var(--blue); border-radius: 50%; transform: none; width: 14px; height: 14px; box-shadow: 0 0 0 4px var(--blue-glow); }
.map-pin__pulse {
  position     : absolute;
  width        : 60px;
  height       : 60px;
  border-radius: 50%;
  border       : 2px solid var(--red);
  animation    : pulse-ring 1.8s ease-out infinite;
  top          : 50%; left: 50%;
  margin       : -30px 0 0 -30px;
  transform    : rotate(45deg);
}
.map-popup {
  font-family: var(--font-body);
  min-width  : 160px;
}
.map-popup__code {
  font-family: var(--font-mono);
  font-size  : 13px;
  font-weight: 600;
  color      : var(--text-primary);
  margin-bottom: 4px;
}
.map-popup__type  { font-size: 12px; color: var(--text-secondary); text-transform: capitalize; }
.map-popup__addr  { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.map-popup__age   { font-family: var(--font-mono); font-size: 11px; color: var(--amber); margin-top: 4px; }
.map-popup__btn {
  margin-top  : 8px;
  background  : var(--blue);
  color       : var(--bg-deep);
  border      : none;
  padding     : 6px 12px;
  border-radius: 4px;
  font-size   : 12px;
  font-weight : 600;
  cursor      : pointer;
  width       : 100%;
}
/* Leaflet dark popup */
.leaflet-popup-content-wrapper { background: var(--bg-card) !important; border: 1px solid var(--border) !important; color: var(--text-primary) !important; box-shadow: 0 8px 32px rgba(0,0,0,.5) !important; }
.leaflet-popup-tip { background: var(--bg-card) !important; }

/* --- Timeline mission -------------------------------------- */
.timeline { position: relative; padding-left: 28px; }
.timeline::before {
  content   : '';
  position  : absolute;
  left      : 9px;
  top       : 0; bottom: 0;
  width     : 2px;
  background: var(--border);
}
.timeline-step {
  position    : relative;
  padding     : 0 0 20px 16px;
  font-size   : 14px;
  color       : var(--text-secondary);
}
.timeline-step::before {
  content      : '';
  position     : absolute;
  left         : -19px;
  top          : 3px;
  width        : 10px;
  height       : 10px;
  border-radius: 50%;
  background   : var(--bg-raised);
  border       : 2px solid var(--border);
  transition   : background .3s, border-color .3s;
}
.timeline-step--done::before { background: var(--green); border-color: var(--green); }
.timeline-step--active::before { background: var(--amber); border-color: var(--amber); animation: blink 1s infinite; }
.timeline-step--done  { color: var(--text-primary); }
.timeline-step__time { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* --- Offline banner ---------------------------------------- */
#offline-banner {
  display        : none;
  align-items    : center;
  justify-content: center;
  gap            : 8px;
  background     : var(--amber);
  color          : var(--bg-deep);
  padding        : 10px 20px;
  font-family    : var(--font-display);
  font-weight    : 700;
  font-size      : 14px;
  letter-spacing : .05em;
  position       : fixed;
  top            : 0; left: 0; right: 0;
  z-index        : 9999;
}

/* --- Toasts ------------------------------------------------ */
.nu-toast {
  position     : fixed;
  bottom       : 100px;
  left         : 50%;
  transform    : translateX(-50%) translateY(20px);
  background   : var(--bg-raised);
  border       : 1px solid var(--border-bright);
  border-radius: var(--r-md);
  padding      : 12px 20px;
  display      : flex;
  flex-direction: column;
  gap          : 2px;
  opacity      : 0;
  transition   : opacity .3s, transform .3s;
  min-width    : 220px;
  max-width    : 340px;
  z-index      : 9998;
  box-shadow   : 0 8px 32px rgba(0,0,0,.5);
}
.nu-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.nu-toast strong { font-family: var(--font-display); font-size: 15px; }
.nu-toast span   { font-size: 13px; color: var(--text-secondary); }
.nu-toast--success { border-color: var(--green); }
.nu-toast--error   { border-color: var(--red); }
.nu-toast--warning { border-color: var(--amber); }

/* --- Nav bottom ------------------------------------------- */
.bottom-nav {
  position  : fixed;
  bottom    : 0; left: 0; right: 0;
  height    : 72px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  display   : flex;
  align-items: center;
  z-index   : 200;
}
.bottom-nav__item {
  flex           : 1;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  gap            : 4px;
  color          : var(--text-muted);
  font-family    : var(--font-mono);
  font-size      : 10px;
  text-transform : uppercase;
  letter-spacing : .06em;
  padding        : 8px;
  text-decoration: none;
  transition     : color .15s;
}
.bottom-nav__item.active, .bottom-nav__item:hover { color: var(--blue); }
.bottom-nav__item svg { width: 22px; height: 22px; }

/* --- Loader ----------------------------------------------- */
.spinner {
  width        : 32px;
  height       : 32px;
  border       : 3px solid var(--border);
  border-top   : 3px solid var(--blue);
  border-radius: 50%;
  animation    : spin .8s linear infinite;
  margin       : 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Responsive desktop (centrale) ------------------------ */
@media (min-width: 768px) {
  .page { max-width: 640px; }
}
@media (min-width: 1024px) {
  .page--split {
    display              : grid;
    grid-template-columns: 380px 1fr;
    height               : 100dvh;
    overflow             : hidden;
  }
  .split-sidebar {
    height    : 100dvh;
    overflow-y: auto;
    border-right: 1px solid var(--border);
  }
  .split-main { height: 100dvh; }
}