/* ═══════════════════════════════════════════════════════════
   DASHBOARD — sidebar, panels, junction stage
   ═══════════════════════════════════════════════════════════ */

.dash {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 18px;
  padding: 18px;
  min-height: calc(100vh - 96px);
}
@media (max-width: 980px) {
  .dash { grid-template-columns: 1fr; }
  .dash__sidebar { order: 2; }
}

/* ─── Sidebar ─── */
.dash__sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sidebar-card {
  padding: 18px;
  background: var(--panel);
  backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.sidebar-card h3 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-card {
  text-align: center;
}
.profile-card__avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), var(--cyan), var(--pink));
  margin: 0 auto 12px;
  display: grid; place-items: center;
  color: white;
  font-size: 24px;
  font-weight: 600;
  box-shadow: 0 0 30px rgba(124,58,237,0.4);
}
.profile-card__name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 4px;
}
.profile-card__email {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute);
  letter-spacing: 0.05em;
  word-break: break-all;
}

.nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-list li {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  color: var(--ink-dim);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-list li:hover {
  background: rgba(167,139,250,0.08);
  color: var(--ink);
  padding-left: 18px;
}
.nav-list li.active {
  background: linear-gradient(135deg, rgba(167,139,250,0.18), rgba(34,211,238,0.10));
  color: var(--ink);
}

/* Saved locations + recent searches */
.compact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
}
.compact-list li {
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink-dim);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(167,139,250,0.03);
}
.compact-list li:hover {
  background: rgba(167,139,250,0.10);
  color: var(--ink);
}
.compact-list .empty {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute);
  text-align: center;
  padding: 12px;
  background: transparent;
  cursor: default;
  letter-spacing: 0.1em;
}
.compact-list .empty:hover {
  background: transparent;
  color: var(--mute);
}

/* ─── Main grid ─── */
.dash__main {
  display: grid;
  grid-template-columns: 240px 1fr 320px;
  grid-template-rows: minmax(560px, auto) 320px;
  gap: 18px;
  align-content: start;
}
@media (max-width: 1300px) {
  .dash__main { grid-template-columns: 200px 1fr 280px; }
}
@media (max-width: 1100px) {
  .dash__main { grid-template-columns: 1fr; grid-template-rows: auto; }
}

.panel--center { grid-column: 2 / 3; grid-row: 1 / 2; }
.panel--map    { grid-column: 1 / 4; grid-row: 2 / 3; }
.panel-stack {
  display: flex; flex-direction: column; gap: 18px;
}

@media (max-width: 1100px) {
  .panel--center, .panel--map { grid-column: auto; grid-row: auto; }
}

.panel {
  padding: 20px;
  display: flex; flex-direction: column;
  background: linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%);
  backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.5);
  position: relative;
  overflow: hidden;
  animation: fadeUp 0.8s cubic-bezier(0.2,0.8,0.2,1) backwards;
}
.panel::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(167,139,250,0.5), transparent);
}
.panel:nth-child(1) { animation-delay: 0.1s; }
.panel:nth-child(2) { animation-delay: 0.2s; }
.panel:nth-child(3) { animation-delay: 0.3s; }
.panel:nth-child(4) { animation-delay: 0.4s; }

.panel__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.panel__head--row { justify-content: space-between; }
.panel__head h2 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.panel__head h2.serif {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}

/* ─── KPI strip ─── */
.kpi-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 22px;
  margin: 0 18px 18px;
  background: var(--panel);
  backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  border-radius: 100px;
  align-items: center;
  justify-content: center;
}
.kpi {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 100px;
  background: rgba(167,139,250,0.05);
  border: 1px solid var(--line);
}
.kpi__icon { font-size: 12px; color: var(--violet); }
.kpi__icon--cyan { color: var(--cyan); }
.kpi__icon--pink { color: var(--pink); }
.kpi__icon--gold { color: var(--gold); }
.kpi b {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 14px;
}
.kpi i {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--mute);
  text-transform: uppercase;
}

/* ─── Junction list (left in main) ─── */
#junctionUl {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#junctionUl li {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.01);
}
#junctionUl li:hover {
  background: rgba(167,139,250,0.08);
  border-color: var(--line);
  transform: translateX(2px);
}
#junctionUl li.active {
  background: linear-gradient(135deg, rgba(167,139,250,0.18), rgba(34,211,238,0.10));
  border-color: rgba(167,139,250,0.4);
  box-shadow: 0 0 30px rgba(167,139,250,0.2);
}
#junctionUl li .j-status {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 10px currentColor;
}
.j-status--FLOWING  { background: var(--emerald); color: var(--emerald); }
.j-status--MODERATE { background: var(--gold);    color: var(--gold); }
.j-status--HEAVY    { background: #fb923c;        color: #fb923c; }
.j-status--CRITICAL { background: var(--rose);    color: var(--rose); animation: pulse 1.2s infinite; }
.j-status--FLOWING.j-status, .j-status--MODERATE.j-status,
.j-status--HEAVY.j-status, .j-status--CRITICAL.j-status { } /* selectivity */
#junctionUl li .j-name {
  flex: 1;
  font-size: 13px;
  font-weight: 400;
}
#junctionUl li .j-density {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute);
}

/* Smooth city-switch fade */
.fade-swap { animation: fadeIn 0.4s ease; }

/* ─── Status pill ─── */
.status-pill {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  padding: 6px 12px;
  border-radius: 100px;
  background: rgba(52,211,153,0.15);
  color: var(--emerald);
  border: 1px solid rgba(52,211,153,0.3);
}
.status-pill[data-status="MODERATE"] { background: rgba(251,191,36,0.15); color: var(--gold); border-color: rgba(251,191,36,0.3); }
.status-pill[data-status="HEAVY"]    { background: rgba(251,146,60,0.15); color: #fb923c; border-color: rgba(251,146,60,0.3); }
.status-pill[data-status="CRITICAL"] { background: rgba(251,113,133,0.18); color: var(--rose); border-color: rgba(251,113,133,0.4); animation: pulse 1.5s infinite; }

/* ─── Junction stage ─── */
.junction-stage {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 280px;
  padding: 8px;
  position: relative;
}
.junction-stage::before {
  content: '';
  position: absolute;
  width: 80%; height: 80%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167,139,250,0.10), transparent 70%);
  filter: blur(40px);
  z-index: 0;
}
#junctionSvg {
  width: 100%; max-width: 360px;
  aspect-ratio: 1;
  position: relative; z-index: 1;
}

/* ─── Meters ─── */
.meters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 12px 0;
}
.meter { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.meter__label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute);
  letter-spacing: 0.2em;
}
.meter__bar {
  width: 100%;
  height: 4px;
  background: rgba(167,139,250,0.1);
  border-radius: 2px;
  overflow: hidden;
}
.meter__fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--emerald), var(--gold), var(--rose));
  background-size: 300px 100%;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 10px currentColor;
}
.meter__val {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
}

/* ─── Signal plan ─── */
.signal-plan { display: flex; flex-direction: column; gap: 10px; }
.signal-plan__row {
  display: flex; align-items: center; gap: 12px;
}
.signal-plan__chip {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--ink-dim);
  display: flex; align-items: center; gap: 6px;
  width: 50px;
}
.signal-plan__chip i {
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.ns-dot { background: var(--violet); box-shadow: 0 0 8px var(--violet); }
.ew-dot { background: var(--cyan);   box-shadow: 0 0 8px var(--cyan); }

.signal-plan__bar {
  flex: 1;
  height: 6px;
  background: rgba(167,139,250,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.signal-plan__bar > div {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
#nsBar { background: linear-gradient(90deg, var(--violet-deep), var(--violet)); box-shadow: 0 0 12px rgba(167,139,250,0.5); }
#ewBar { background: linear-gradient(90deg, var(--cyan-deep), var(--cyan));     box-shadow: 0 0 12px rgba(34,211,238,0.5); }

.signal-plan__row b {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  width: 36px; text-align: right;
}
.signal-plan__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding-top: 6px;
}
.signal-plan__meta b { color: var(--ink); margin-left: 4px; }
.signal-plan__meta i { font-style: normal; }
.reason {
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(167,139,250,0.15);
  color: var(--violet);
}

/* ─── Forecast ─── */
.forecast-vals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.forecast-vals__item {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 4px;
  background: rgba(167,139,250,0.04);
  border-radius: 10px;
  border: 1px solid var(--line);
}
.forecast-vals__item span {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--mute);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.forecast-vals__item b {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  margin-top: 2px;
}
#forecastChart { width: 100%; height: 110px; display: block; }

.trend {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(34,211,238,0.12);
  color: var(--cyan);
  text-transform: uppercase;
}
.trend[data-trend="rising"]  { background: rgba(251,113,133,0.15); color: var(--rose); }
.trend[data-trend="falling"] { background: rgba(52,211,153,0.15);  color: var(--emerald); }

/* ─── Emergency ─── */
.panel--emergency.active {
  animation: emergencyGlow 1.2s infinite;
  border-color: rgba(251,113,133,0.5);
}
@keyframes emergencyGlow {
  0%,100% { box-shadow: 0 0 30px rgba(251,113,133,0.2); }
  50%     { box-shadow: 0 0 60px rgba(251,113,133,0.5); }
}
.emergency-dirs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.dir-btn {
  padding: 10px;
  background: rgba(167,139,250,0.05);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 13px;
  transition: all 0.2s ease;
}
.dir-btn:hover { background: rgba(251,113,133,0.10); border-color: rgba(251,113,133,0.3); color: var(--rose); }
.dir-btn.active {
  background: rgba(251,113,133,0.20);
  border-color: var(--rose);
  color: var(--rose);
  box-shadow: 0 0 16px rgba(251,113,133,0.4);
}

.emergency-btn {
  position: relative;
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #be123c 0%, #f43f5e 100%);
  color: white;
  border: none;
  border-radius: 14px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(244,63,94,0.3);
  transition: transform 0.2s ease;
}
.emergency-btn:hover { transform: translateY(-2px); }
.emergency-btn.active {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  box-shadow: 0 8px 24px rgba(52,211,153,0.4);
}
.emergency-btn__pulse {
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.3), transparent 70%);
  opacity: 0;
}
.emergency-btn.active .emergency-btn__pulse {
  animation: btnPulse 1.5s infinite;
}
@keyframes btnPulse {
  0%,100% { opacity: 0; }
  50%     { opacity: 1; }
}

/* ─── Map ─── */
.panel--map {
  padding: 14px 18px 18px;
  min-height: 360px;
}
#mapCanvas {
  flex: 1 1 auto;
  width: 100%;
  height: 280px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  position: relative;
  min-height: 280px;
  background:
    radial-gradient(circle at 30% 20%, rgba(167,139,250,0.10), transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(34,211,238,0.08), transparent 50%),
    linear-gradient(180deg, rgba(13,8,36,0.6), rgba(20,12,44,0.4));
}
@media (min-width: 1100px) {
  #mapCanvas { height: 280px; }
}
#mapCanvas .mapboxgl-canvas,
#mapCanvas canvas {
  width: 100% !important;
  height: 100% !important;
}
/* TomTom SDK injects mapbox classes — make sure controls don't get clipped */
#mapCanvas .mapboxgl-ctrl-attrib,
#mapCanvas .mapboxgl-ctrl-bottom-right,
#mapCanvas .mapboxgl-ctrl-bottom-left {
  font-family: var(--mono);
  font-size: 10px;
  opacity: 0.75;
}

.map-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.legend {
  display: flex;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(167,139,250,0.06);
  border: 1px solid var(--line);
}
.legend-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px currentColor;
}
.legend-dot--ok    { background: var(--emerald); color: var(--emerald); }
.legend-dot--mod   { background: var(--gold);    color: var(--gold); }
.legend-dot--heavy { background: #fb923c;        color: #fb923c; }
.legend-dot--crit  { background: var(--rose);    color: var(--rose); }

.map-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(167,139,250,0.05);
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}
.map-ctrl:hover {
  background: rgba(167,139,250,0.12);
  color: var(--ink);
  border-color: rgba(167,139,250,0.3);
}
.map-ctrl.active {
  background: linear-gradient(135deg, rgba(167,139,250,0.18), rgba(34,211,238,0.12));
  color: var(--violet);
  border-color: rgba(167,139,250,0.4);
  box-shadow: 0 0 12px rgba(167,139,250,0.2);
}

/* Map status overlay (loading / error / config) */
.map-status {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  background: rgba(13,8,36,0.78);
  backdrop-filter: blur(10px);
  border-radius: inherit;
  z-index: 4;
  text-align: center;
  animation: fadeIn 0.3s ease;
}
.map-status__icon {
  font-family: var(--mono);
  font-size: 20px;
  color: var(--violet);
  margin-bottom: 4px;
}
.map-status__msg {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
}
.map-status__hint {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--mute);
  max-width: 360px;
  line-height: 1.6;
}
.map-status--error .map-status__icon { color: var(--rose); }
.map-status__retry {
  margin-top: 10px;
  padding: 7px 18px;
  background: linear-gradient(135deg, var(--violet), var(--cyan));
  color: white;
  border: none;
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.map-status__retry:hover { transform: translateY(-1px); }

/* Loading overlays */
.loading-overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(13,8,36,0.6);
  backdrop-filter: blur(8px);
  z-index: 5;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.panel.loading .loading-overlay { opacity: 1; pointer-events: auto; }