/* ═══════════════════════════════════════════════════════════
   AGORAH — Sidebar détail (Trafic / Alerte / Bus)
   ═══════════════════════════════════════════════════════════ */

/* ── SIDEBAR TABS ─────────────────────────────────────────── */
.sb-tabs {
  display: flex;
  gap: 2px;
  background: var(--gray-100);
  border-radius: var(--radius-md);
  padding: 3px;
  flex-shrink: 0;
}

.sb-tab {
  flex: 1;
  padding: 6px 4px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}

.sb-tab.active {
  background: white;
  color: var(--agorah-teal);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.sb-tab:hover:not(.active) {
  color: var(--gray-700);
  background: rgba(255,255,255,0.5);
}

.sb-tab-badge {
  background: var(--alert-accident);
  color: white;
  font-size: 8px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 8px;
  line-height: 1.4;
}

.sb-pane {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sb-pane[hidden] { display: none; }

/* ── EMPTY STATE ──────────────────────────────────────────── */
.sb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  color: var(--gray-400);
  text-align: center;
}

.sb-empty-icon { font-size: 24px; }

.sb-empty-txt {
  font-size: 12px;
  line-height: 1.5;
  color: var(--gray-500);
}

/* ── CORR INTERPRETATION ──────────────────────────────────── */
.corr-interpretation {
  font-size: 12px;
  color: var(--gray-700);
  margin-bottom: 10px;
  line-height: 1.5;
}

.corr-alert-fiab {
  font-size: 9px;
  color: var(--gray-400);
  margin-top: 1px;
}

/* ── SIDEBAR HEADER ───────────────────────────────────────── */
.sidebar-head {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.sidebar-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  width: fit-content;
}

.sidebar-type-badge.traffic  { background: rgba(21,73,90,0.1);   color: var(--agorah-teal); }
.sidebar-type-badge.alert    { background: rgba(217,119,6,0.1);  color: var(--alert-hazard); }
.sidebar-type-badge.bus      { background: rgba(245,166,35,0.15); color: var(--carjaune-dark); }

.sidebar-title {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-800);
  line-height: 1.2;
}

.sidebar-subtitle {
  font-size: 11px;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  gap: 6px;
}

.sidebar-subtitle .sep { opacity: 0.4; }

.sidebar-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--gray-100);
  color: var(--gray-500);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all var(--dur-fast) var(--ease);
  z-index: 1;
}

.sidebar-close:hover {
  background: var(--gray-200);
  color: var(--gray-800);
}

/* ── SIDEBAR BODY ─────────────────────────────────────────── */
.sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sidebar-body::-webkit-scrollbar { width: 3px; }
.sidebar-body::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 2px; }

/* ── METRICS GRID ─────────────────────────────────────────── */
.metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.metric-card {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.metric-card.accent {
  background: var(--agorah-teal-pale);
  border-color: rgba(21,73,90,0.2);
}

.metric-card.wide {
  grid-column: span 2;
}

.metric-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--gray-400);
}

.metric-value {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-800);
  line-height: 1;
}

.metric-value.large { font-size: 26px; }
.metric-value.fluide     { color: var(--fluide-color); }
.metric-value.dense      { color: var(--dense-color); }
.metric-value.congestion { color: var(--congestion-color); }
.metric-value.sature     { color: var(--sature-color); }

.metric-unit {
  font-size: 11px;
  font-weight: 400;
  color: var(--gray-400);
}

.metric-sub {
  font-size: 10px;
  color: var(--gray-500);
}

/* ── STATUS CHIP ──────────────────────────────────────────── */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  width: fit-content;
}

.status-chip.fluide     { background: var(--fluide-bg);     color: var(--green-eco); }
.status-chip.dense      { background: var(--dense-bg);      color: #92400e; }
.status-chip.congestion { background: var(--congestion-bg); color: #991b1b; }
.status-chip.sature     { background: var(--sature-bg);     color: var(--gray-700); }
/* Bus ponctualité */
.status-chip.on-time    { background: var(--fluide-bg);     color: var(--green-eco); }
.status-chip.late       { background: var(--dense-bg);      color: #92400e; }
.status-chip.very-late  { background: var(--congestion-bg); color: #991b1b; }

/* ── BLOCK SECTIONS ───────────────────────────────────────── */
.sidebar-block {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.sidebar-block-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

.sidebar-block-body {
  padding: 10px 12px;
}

/* CO2 block */
.block-co2 .sidebar-block-header { background: rgba(22,101,52,0.08); color: var(--green-eco); }
.block-co2 .sidebar-block-body   { background: var(--green-eco-pale); }

/* Social impact block */
.block-social .sidebar-block-header { background: rgba(21,73,90,0.08); color: var(--agorah-teal); }
.block-social .sidebar-block-body   { background: var(--agorah-teal-pale); }

/* Alternatives block */
.block-alt .sidebar-block-header { background: rgba(22,101,52,0.12); color: var(--green-eco); }
.block-alt .sidebar-block-body   { background: white; border: 1px solid var(--green-eco-light); }

/* Correlation block */
.block-corr .sidebar-block-header { background: rgba(220,38,38,0.06); color: var(--alert-accident); }
.block-corr .sidebar-block-body   { background: rgba(220,38,38,0.03); border: 1px solid rgba(220,38,38,0.1); }

/* Alert detail block */
.block-alert-detail .sidebar-block-header { background: rgba(217,119,6,0.1); color: var(--alert-hazard); }
.block-alert-detail .sidebar-block-body   { background: var(--gray-50); }

/* Bus detail block */
.block-bus-detail .sidebar-block-header { background: rgba(245,166,35,0.12); color: var(--carjaune-dark); }
.block-bus-detail .sidebar-block-body   { background: var(--carjaune-bg); }

/* ── CO2 DISPLAY ──────────────────────────────────────────── */
.co2-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
}

.co2-val {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--green-eco);
}

.co2-unit { font-size: 12px; color: var(--green-eco-mid); }

.co2-desc {
  font-size: 11px;
  color: var(--green-eco-mid);
  opacity: 0.8;
}

/* ── ALTERNATIVES ─────────────────────────────────────────── */
.alt-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.alt-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--green-eco-pale);
  border-radius: var(--radius-sm);
  border: 1px solid var(--green-eco-light);
}

.alt-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.alt-info { flex: 1; }

.alt-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--green-eco);
}

.alt-desc {
  font-size: 10px;
  color: var(--green-eco-mid);
  opacity: 0.8;
}

.alt-saving {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--green-eco);
  flex-shrink: 0;
}

/* ── CORRELATION ALERTS LIST ──────────────────────────────── */
.corr-alert-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(220,38,38,0.08);
}

.corr-alert-item:last-child { border-bottom: none; }

.corr-alert-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.corr-alert-info { flex: 1; }

.corr-alert-type {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-700);
}

.corr-alert-desc {
  font-size: 10px;
  color: var(--gray-500);
}

.corr-alert-dist {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--gray-400);
  flex-shrink: 0;
}

/* ── CORR BUS LIST ────────────────────────────────────────── */
.corr-bus-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(245,166,35,0.1);
}

.corr-bus-item:last-child { border-bottom: none; }

.corr-bus-badge {
  background: var(--carjaune-color);
  color: white;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.corr-bus-info { flex: 1; }

.corr-bus-name { font-size: 11px; font-weight: 600; color: var(--gray-700); }

.corr-bus-delay {
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}

.corr-bus-delay.on-time    { background: var(--fluide-bg);     color: var(--green-eco); }
.corr-bus-delay.late       { background: var(--dense-bg);      color: #92400e; }
.corr-bus-delay.very-late  { background: var(--congestion-bg); color: #991b1b; }

/* ── SOCIAL IMPACT ────────────────────────────────────────── */
.social-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.social-item {
  flex: 1;
  text-align: center;
}

.social-val {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--agorah-teal);
}

.social-lbl {
  font-size: 9px;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── AI SYNTHESIS ─────────────────────────────────────────── */
.ai-block {
  background: linear-gradient(135deg, var(--agorah-teal-dark) 0%, var(--agorah-teal) 100%);
  border-radius: var(--radius-md);
  padding: 12px;
  color: white;
}

.ai-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  opacity: 0.6;
  margin-bottom: 8px;
}

.ai-text {
  font-size: 12px;
  line-height: 1.6;
  opacity: 0.9;
}

.ai-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  opacity: 0.6;
}

/* ── CHART ────────────────────────────────────────────────── */
.chart-block {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 12px;
}

.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.chart-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-700);
}

.chart-legend {
  font-size: 9px;
  color: var(--gray-400);
}

/* ── ALERT DETAIL SPECIFICS ───────────────────────────────── */
.alert-type-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.alert-type-icon-lg {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.alert-reliability-bar {
  height: 4px;
  background: var(--gray-200);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}

.alert-reliability-fill {
  height: 100%;
  background: var(--agorah-teal-mid);
  border-radius: 2px;
  transition: width 0.5s var(--ease);
}

/* ── BUS DETAIL SPECIFICS ─────────────────────────────────── */
.bus-progress-track {
  position: relative;
  padding: 8px 0;
}

.bus-route-line {
  position: absolute;
  top: 50%; left: 20px; right: 20px;
  height: 3px;
  background: var(--gray-200);
  transform: translateY(-50%);
}

.bus-route-progress {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: var(--carjaune-color);
  border-radius: 2px;
  transition: width 0.5s var(--ease);
}

.bus-stops {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.bus-stop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.bus-stop-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--gray-300);
  border: 2px solid white;
  box-shadow: 0 0 0 1.5px var(--gray-300);
}

.bus-stop-dot.current {
  background: var(--carjaune-color);
  box-shadow: 0 0 0 1.5px var(--carjaune-color);
}

.bus-stop-dot.passed {
  background: var(--carjaune-dark);
  box-shadow: 0 0 0 1.5px var(--carjaune-dark);
}

.bus-stop-name {
  font-size: 8px;
  color: var(--gray-400);
  text-align: center;
  max-width: 50px;
  word-break: break-word;
}