/* ==========================================================================
   Delivery Solution — Polynésie Expansion
   Shared design system
   ========================================================================== */

:root{
  --bg: #0B1120;
  --card: #0F172A;
  --border: #1E293B;
  --accent: #0052FF;
  --accent-light: #4C84FF;
  --text: #F8FAFC;
  --muted: #94A3B8;
  --green: #22C55E;
  --amber: #F59E0B;
  --red: #EF4444;
}

html{ scroll-behavior: smooth; }

body{
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 15% 0%, rgba(0,82,255,0.10), transparent 40%),
    radial-gradient(circle at 85% 20%, rgba(0,82,255,0.06), transparent 35%);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4, .font-display{
  font-family: 'Space Grotesk', 'Inter', sans-serif;
}

.font-mono-num{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

::selection{ background: var(--accent); color: white; }

/* Scrollbar */
::-webkit-scrollbar{ width: 8px; height: 8px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 4px; }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
}

/* ---------------- Nav ---------------- */
.nav-link{
  position: relative;
  color: var(--muted);
  transition: color .2s ease;
}
.nav-link:hover{ color: var(--text); }
.nav-link.active{ color: var(--text); }
.nav-link.active::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-6px;
  height:2px; background: var(--accent);
  border-radius: 2px;
}

/* ---------------- Cards ---------------- */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.card-hover{ transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.card-hover:hover{
  transform: translateY(-4px);
  border-color: rgba(0,82,255,0.5);
  box-shadow: 0 20px 40px -20px rgba(0,82,255,0.35);
}

.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding: 4px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  border: 1px solid var(--border);
  background: rgba(15,23,42,0.6);
}

/* ---------------- Buttons ---------------- */
.btn-primary{
  background: var(--accent);
  color: white;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
  box-shadow: 0 8px 24px -8px rgba(0,82,255,0.6);
}
.btn-primary:hover{ background: #0047E0; transform: translateY(-1px); }
.btn-primary:active{ transform: translateY(0); }
.btn-primary:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

.btn-ghost{
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  transition: border-color .2s ease, background .2s ease;
}
.btn-ghost:hover{ border-color: var(--accent-light); background: rgba(0,82,255,0.08); }

/* ---------------- Signature: dispatch pulse / radar ---------------- */
/* The recurring visual thread across all four pages: a radar sweep with
   pulsing courier / asset nodes, representing the always-on allocation engine. */

.radar-wrap{
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, rgba(148,163,184,0.10) 0 1px, transparent 1px 25%),
    radial-gradient(circle at 50% 50%, rgba(0,82,255,0.10), transparent 70%);
  border: 1px solid var(--border);
  overflow: hidden;
}
.radar-sweep{
  position:absolute; inset:0;
  background: conic-gradient(from 0deg, rgba(0,82,255,0.55), transparent 28%, transparent 100%);
  animation: sweep 3.2s linear infinite;
  border-radius: 50%;
  mix-blend-mode: screen;
}
@keyframes sweep{ to{ transform: rotate(360deg); } }

.radar-center{
  position:absolute; left:50%; top:50%; width:10px; height:10px;
  transform: translate(-50%,-50%);
  background: var(--text); border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(248,250,252,0.08);
}

.node{
  position:absolute; width:10px; height:10px; border-radius:50%;
  background: var(--green);
  box-shadow: 0 0 12px 2px rgba(34,197,94,0.7);
  transform: translate(-50%,-50%);
}
.node.busy{ background: var(--amber); box-shadow: 0 0 12px 2px rgba(245,158,11,0.7); }
.node.assigned{ background: var(--accent-light); box-shadow: 0 0 16px 4px rgba(76,132,255,0.9); }
.node::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border: 1px solid currentColor; opacity:.5;
  animation: pulse-ring 1.8s ease-out infinite;
}
@keyframes pulse-ring{
  0%{ transform: scale(0.6); opacity:.6; }
  100%{ transform: scale(2.2); opacity:0; }
}

.dispatch-line{
  position:absolute; height:2px; background: linear-gradient(90deg, var(--accent-light), transparent);
  transform-origin: left center;
  animation: dash-in .6s ease forwards;
}
@keyframes dash-in{ from{ opacity:0; } to{ opacity:1; } }

/* ---------------- Gauges ---------------- */
.gauge{ --pct: 0; }
.gauge svg circle.gauge-fg{
  stroke-dasharray: 314; /* 2*pi*r for r=50 */
  stroke-dashoffset: calc(314 - (314 * var(--pct) / 100));
  transition: stroke-dashoffset 1.1s cubic-bezier(.16,1,.3,1);
}

/* ---------------- Progress bar (comparison / ETA) ---------------- */
.bar-fill{
  transition: width 1.2s cubic-bezier(.16,1,.3,1);
}

/* ---------------- Modal ---------------- */
.modal-backdrop{
  position: fixed; inset:0; background: rgba(2,6,23,0.75);
  backdrop-filter: blur(4px);
  display:flex; align-items:center; justify-content:center;
  z-index: 60; opacity:0; pointer-events:none; transition: opacity .2s ease;
  padding: 16px;
}
.modal-backdrop.open{ opacity:1; pointer-events:auto; }
.modal-panel{
  transform: translateY(12px) scale(.98); transition: transform .25s ease;
}
.modal-backdrop.open .modal-panel{ transform: translateY(0) scale(1); }

/* ---------------- Toast ---------------- */
#toast-region{
  position: fixed; bottom: 20px; right: 20px; z-index: 70;
  display:flex; flex-direction:column; gap:10px; align-items:flex-end;
}
.toast{
  background: var(--card); border:1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 12px 16px; border-radius: 10px; font-size: 13px; max-width: 320px;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.6);
  animation: toast-in .25s ease;
}
@keyframes toast-in{ from{ opacity:0; transform: translateY(8px);} to{ opacity:1; transform:translateY(0);} }

/* ---------------- Fleet map / zone map ---------------- */
.zone-pin{ animation: drop-in .4s ease backwards; }
@keyframes drop-in{ from{ opacity:0; transform: translateY(-6px) scale(.6);} to{ opacity:1; transform: translateY(0) scale(1);} }

.taxi-chip{ transition: all .5s cubic-bezier(.16,1,.3,1); }

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce){
  .radar-sweep, .node::after{ animation: none; }
  html{ scroll-behavior: auto; }
}

/* Slider */
input[type=range].fdz-slider{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:999px;
  background: var(--border);
}
input[type=range].fdz-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; border-radius:50%;
  background: var(--accent);
  border: 3px solid var(--text);
  cursor:pointer;
  box-shadow: 0 0 0 4px rgba(0,82,255,0.25);
}
input[type=range].fdz-slider::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%;
  background: var(--accent); border: 3px solid var(--text); cursor:pointer;
}