/* Results dashboard — appended to styles.css via @import */

/* ---------------- Results layout ---------------- */
.results {
  display: grid;
  grid-template-columns: 320px 1fr 360px;
  gap: 22px;
  align-items: start;
}

.panel {
  background: #fff;
  border-radius: 20px;
  padding: 22px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-soft);
}
.panel__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--violet-600);
  margin-bottom: 14px;
}
.panel__h { font-size: 16px; font-weight: 700; color: var(--ink-900); margin-bottom: 14px; }

/* Evidence gallery */
.evidence-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.evidence-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1;
  background: #2A1773;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all .2s var(--ease-out);
  padding: 0;
  appearance: none;
  text-align: inherit;
}
.evidence-card:hover { border-color: var(--violet-400); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.evidence-card.selected { border-color: var(--violet-500); box-shadow: var(--shadow-glow-violet); }
.evidence-card img { width: 100%; height: 100%; object-fit: cover; }
.evidence-card .bbox {
  position: absolute;
  border: 2px solid var(--accent-magenta);
  border-radius: 2px;
  pointer-events: none;
}
.evidence-card .bbox::before {
  content: attr(data-label);
  position: absolute;
  top: -22px; left: -2px;
  background: var(--accent-magenta);
  color: #fff;
  font: 600 9px var(--font-sans);
  padding: 2px 6px;
  border-radius: 4px 4px 4px 0;
  white-space: nowrap;
}

.evidence-progress {
  margin-top: 14px;
  height: 4px; border-radius: 2px;
  background: var(--violet-100);
  overflow: hidden;
}
.evidence-progress > div {
  height: 100%;
  background: linear-gradient(90deg, var(--grad-violet-start), var(--grad-violet-end));
}
.evidence-summary {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px;
  font-size: 13px;
}
.evidence-summary b { font-weight: 700; color: var(--ink-900); font-size: 18px; }
.evidence-summary span { color: var(--ink-500); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }

/* Schematic */
.schematic-wrap {
  position: relative;
  padding: 6px 8px 10px;
  min-height: 320px;
}
.schematic-wrap svg { width: 100%; height: auto; display: block; }
.vehicle-map-panel {
  overflow: hidden;
}
.schematic-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 8px;
  color: var(--ink-600);
  font-size: 12px;
  font-weight: 600;
}
.schematic-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.schematic-legend .dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}
.schematic-legend .dot--low { background: #22C55E; }
.schematic-legend .dot--medium { background: #F59E0B; }
.schematic-legend .dot--high { background: #EF4444; }
.callout {
  position: absolute;
  background: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-soft);
  font-size: 11px;
  min-width: 130px;
}
.callout__label { font-weight: 600; color: var(--ink-500); font-size: 10px; }
.callout__name  { font-weight: 700; color: var(--ink-900); font-size: 13px; margin-top: 2px; }
.callout__sev   { font-size: 10px; color: var(--ink-500); margin-top: 4px; letter-spacing: .04em; }
.callout__sev .sev-high { color: var(--danger-600); font-weight: 700; }
.callout__sev .sev-mod  { color: var(--warning-600); font-weight: 700; }
.callout__sev .sev-crit { color: var(--danger-700); font-weight: 700; }
.callout__line {
  position: absolute;
  border-top: 1.5px dashed var(--violet-300);
  pointer-events: none;
}

/* Damage table */
.damage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.damage-table thead th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  color: var(--ink-500);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
}
.damage-table tbody td {
  padding: 14px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--ink-800);
  vertical-align: middle;
}
.damage-table tbody tr:hover td { background: var(--violet-50); }
.damage-table tbody tr:last-child td { border-bottom: 0; }
.ref-pill {
  display: inline-flex;
  font: 600 11px var(--font-mono);
  background: var(--violet-50);
  color: var(--violet-700);
  padding: 3px 8px;
  border-radius: 6px;
}
.sev-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11px var(--font-sans);
  padding: 4px 10px;
  border-radius: 999px;
}
.sev-chip--mod    { background: var(--warning-50); color: var(--warning-600); }
.sev-chip--high   { background: var(--danger-50); color: var(--danger-600); }
.sev-chip--crit   { background: #FFE4E6; color: var(--danger-700); }
.sev-chip--low    { background: var(--success-50); color: var(--success-700); }
.cost {
  font-weight: 700; color: var(--ink-900); text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Right column charts */
.donut {
  display: flex; align-items: center; gap: 14px;
}
.donut svg { width: 110px; height: 110px; flex-shrink: 0; }
.donut__legend { display: flex; flex-direction: column; gap: 6px; }
.donut__legend > div { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-700); }
.donut__legend .sw { width: 10px; height: 10px; border-radius: 3px; }

.bar-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 12px;
}
.bar-row .label { color: var(--ink-700); font-weight: 500; }
.bar-row .val   { font-weight: 700; color: var(--ink-900); font-size: 12px; }
.bar-track {
  height: 8px;
  border-radius: 4px;
  background: var(--violet-100);
  overflow: hidden;
}
.bar-fill { height: 100%; border-radius: 4px; }
.bar-fill--warn { background: linear-gradient(90deg, #FFCE94, #F59E0B); }
.bar-fill--danger { background: linear-gradient(90deg, #FF8FB1, var(--accent-magenta)); }
.bar-fill--violet { background: linear-gradient(90deg, var(--grad-violet-start), var(--grad-violet-end)); }

.tick-row {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--ink-400);
  margin-top: 6px;
}

.cost-headline {
  background: linear-gradient(135deg, var(--violet-50), #F4F0FF);
  border-radius: 14px;
  padding: 16px 18px;
  text-align: center;
  margin: 14px 0;
}
.cost-headline__label { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--violet-700); font-weight: 700; }
.cost-headline__value {
  font: 800 26px var(--font-display);
  letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--grad-violet-start), var(--grad-violet-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-top: 6px;
}
.cost-report {
  margin-top: 8px;
  max-height: 180px;
  overflow-y: auto;
  white-space: pre-wrap;
  color: var(--ink-700);
  font-size: 12px;
  line-height: 1.55;
  text-align: left;
}
.image-zoom {
  width: min(980px, 90vw);
  max-height: 88vh;
  padding: 16px;
  border-radius: 20px;
  background: var(--bg-card);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.image-zoom__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.image-zoom__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.image-zoom__head strong {
  display: block;
  font-size: 16px;
  color: var(--ink-900);
}
.image-zoom__head span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-500);
  font-weight: 600;
}
.image-zoom__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  border-radius: 14px;
  background: var(--ink-900);
}
.zoom-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  width: 44px;
  height: 56px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--violet-700);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--shadow-md);
}
.zoom-nav--prev { left: 12px; }
.zoom-nav--next { right: 12px; }
.zoom-nav:hover {
  background: #fff;
  color: var(--violet-600);
}
.image-zoom__frame {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.image-zoom__frame img {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  height: auto;
  border-radius: 14px;
  background: var(--ink-900);
}
.zoom-bbox {
  position: absolute;
  border: 3px solid var(--accent-magenta);
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.55), 0 0 18px rgba(255,79,198,.45);
  pointer-events: none;
}
.zoom-bbox::before {
  content: attr(data-label);
  position: absolute;
  left: -3px;
  top: -30px;
  max-width: 240px;
  background: var(--accent-magenta);
  color: #fff;
  font: 700 12px var(--font-sans);
  line-height: 1.2;
  padding: 5px 8px;
  border-radius: 6px 6px 6px 0;
  white-space: nowrap;
}
.image-zoom__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.image-zoom__legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--violet-50);
  border: 1px solid var(--border-soft);
  color: var(--ink-600);
  font-size: 12px;
}
.image-zoom__legend b {
  color: var(--ink-900);
}
.pdf-only {
  display: none;
}
.pdf-report-cover {
  margin-bottom: 18px;
}
.pdf-brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}
.pdf-brand-row img {
  width: 42px;
  height: 42px;
}
.pdf-brand-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink-900);
}
.pdf-brand-sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-500);
  font-weight: 600;
}
.pdf-section-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink-900);
  margin-bottom: 14px;
}
.pdf-section-title--spaced {
  margin-top: 22px;
}
.pdf-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.pdf-doc-card {
  margin: 0;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 12px;
  background: #fff;
}
.pdf-doc-card figcaption {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-600);
  margin-bottom: 8px;
}
.pdf-doc-card img {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: 10px;
  background: #F8F6FF;
}
.pdf-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.pdf-info-item,
.pdf-description-card {
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
}
.pdf-info-item span,
.pdf-description-card span {
  display: block;
  color: var(--ink-500);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 4px;
}
.pdf-info-item strong {
  color: var(--ink-900);
  font-size: 13px;
}
.pdf-description-card p {
  margin: 0;
  color: var(--ink-700);
  font-size: 13px;
  line-height: 1.55;
}

.cost-bars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  text-align: center;
  margin-top: 10px;
}
.cost-bars .cb {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.cost-bars .cb__bar {
  width: 36px; height: 80px;
  background: var(--violet-100);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.cost-bars .cb__fill {
  position: absolute; left: 0; right: 0; bottom: 0;
  border-radius: 8px;
}
.cost-bars .cb__label { font-size: 11px; color: var(--ink-600); font-weight: 600; }
.cost-bars .cb__sub { font-size: 9px; color: var(--ink-400); text-transform: uppercase; letter-spacing: .04em; }

/* Top status pill on results */
.status-row { display: flex; align-items: center; gap: 10px; }
.status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--success-50); color: var(--success-700);
  font-size: 13px; font-weight: 600;
  border: 1px solid #B7EBC5;
}

/* Results bottom strip */
.results-bottom {
  margin-top: 22px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--ink-500);
}
.results-bottom .links { display: flex; gap: 22px; }
.results-bottom .links a { color: var(--ink-600); font-weight: 500; }
.results-bottom .restart-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--grad-violet-start), var(--grad-violet-end));
  color: #fff; padding: 10px 22px; border-radius: 999px;
  font: 600 13px var(--font-sans);
  text-transform: uppercase; letter-spacing: .06em;
  box-shadow: var(--shadow-glow-violet);
  border: 0; cursor: pointer;
}

/* ---------------- Running / loader ---------------- */
.running-wrap {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 60vh; gap: 24px;
}
.running-spinner {
  width: 140px; height: 140px; position: relative;
}
.running-spinner svg { width: 100%; height: 100%; animation: spin 2.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.running-spinner__inner {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--violet-600);
}
.running-text { text-align: center; }
.running-text h3 { font-size: 22px; font-weight: 700; color: var(--ink-900); }
.running-text p  { font-size: 14px; color: var(--ink-500); margin-top: 6px; }
.running-stages { display: flex; gap: 12px; margin-top: 8px; }
.running-stage {
  background: #fff; border-radius: 12px; padding: 8px 14px;
  font-size: 12px; color: var(--ink-600); font-weight: 600;
  border: 1px solid var(--border-soft);
  display: flex; align-items: center; gap: 8px;
}
.running-stage.done { color: var(--success-700); border-color: #B7EBC5; background: var(--success-50); }
.running-stage.active { color: var(--violet-700); border-color: var(--violet-300); background: var(--violet-50); }

/* Sidebar variant on results page — compact */
.evidence-side .panel { padding: 18px; }
/* Dark callouts for 3D schematic */
.callout--dark {
  background: rgba(13, 11, 31, 0.9);
  border: 1px solid rgba(79, 196, 255, 0.3);
  backdrop-filter: blur(10px);
}
.callout--dark .callout__label { color: #4FC4FF; }
.callout--dark .callout__name { color: #fff; }
.callout--dark .callout__sev { color: rgba(255,255,255,0.6); }
/* 3D Hotspots */
.hotspot-3d {
  position: absolute;
  width: 40px; height: 40px;
  transform: translate(-50%, -50%);
}
.hotspot-3d__dot {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 12px; height: 12px;
  background: #FF4FC6;
  border-radius: 50%;
  box-shadow: 0 0 12px #FF4FC6, 0 0 24px rgba(255,79,198,0.4);
}
.hotspot-3d__pulse {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid #FF4FC6;
  animation: hotpulse 2s ease-out infinite;
}
@keyframes hotpulse {
  0% { transform: translate(-50%,-50%) scale(0.5); opacity: 0.8; }
  100% { transform: translate(-50%,-50%) scale(1.5); opacity: 0; }
}
/* Dark mode for results */
html.dark .panel {
  background: #171432;
  border-color: #2A2548;
  color: #EEEAF8;
}
html.dark .panel__title { color: #9F83FF; }
html.dark .panel__h { color: #FAFAFD; }
html.dark .schematic-wrap rect[fill="#FAFAFD"] { fill: #1A1640; }
html.dark .evidence-card { border-color: #2A2548; }
html.dark .evidence-card:hover { border-color: #6B50B8; }
html.dark .damage-table thead th { color: #9C97B2; border-color: #2A2548; }
html.dark .damage-table tbody td { color: #EEEAF8; border-color: #2A2548; }
html.dark .damage-table tbody tr:hover td { background: #221A3D; }
html.dark .cost-headline { background: linear-gradient(135deg, #221A3D, #2E2252); }
html.dark .callout { background: #171432; border-color: #2A2548; }
html.dark .callout__label { color: #9C97B2; }
html.dark .callout__name { color: #FAFAFD; }
html.dark .ref-pill { background: #221A3D; color: #B39DFF; }
html.dark .bar-track { background: #2E2252; }
html.dark .status-pill { background: #0D2818; border-color: #22C55E; }

@media print {
  body {
    background: #fff !important;
  }
  .results-bottom,
  .scrim,
  .topbar,
  .sidebar {
    display: none !important;
  }
  .app,
  .app__main,
  .app__content {
    height: auto !important;
    overflow: visible !important;
    display: block !important;
  }
  .results {
    display: flex !important;
    flex-direction: column !important;
  }
  .pdf-only {
    display: block !important;
  }
  .pdf-legacy-card {
    display: none !important;
  }
  .evidence-side {
    order: 99;
    break-before: page;
  }
  .evidence-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .evidence-card {
    max-height: 160px;
  }
  .evidence-summary,
  .evidence-progress {
    display: none !important;
  }
  .cost-report {
    max-height: none !important;
    overflow: visible !important;
  }
  .panel,
  .pdf-doc-card {
    box-shadow: none !important;
  }
}