/* TurboBatch Dashboard charts — racing visual treatment.
 * SVG charts, hand-rolled, no library dependency. Colors and motion
 * lean on the existing motorsport theme (red primary, orange accent,
 * checker patterns, glow on focus). */

/* === Layout grid for chart panels ============================== */
.dash-grid{display:grid;gap:18px;margin-top:18px}
.dash-grid.three-up{grid-template-columns:1fr 1fr 1fr}
.dash-grid.two-up{grid-template-columns:1fr 1fr}
@media(max-width:1100px){
  .dash-grid.three-up,.dash-grid.two-up{grid-template-columns:1fr}
}

.dash-panel{position:relative;overflow:hidden}
/* Subtle racing-stripe accent across the top edge of every chart
   panel — alternating red and orange like a track marker. */
.dash-panel::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,
    var(--tb-primary) 0 12.5%,
    var(--tb-accent) 12.5% 25%,
    var(--tb-primary) 25% 37.5%,
    var(--tb-accent) 37.5% 50%,
    var(--tb-primary) 50% 62.5%,
    var(--tb-accent) 62.5% 75%,
    var(--tb-primary) 75% 87.5%,
    var(--tb-accent) 87.5% 100%);
  opacity:.85
}
.dash-panel h2,.dash-panel h3{
  font-size:14px;text-transform:uppercase;letter-spacing:.18em;
  font-weight:1000;margin:0 0 12px;color:var(--tb-muted)
}
.dash-panel h2 .accent{color:var(--tb-primary)}

/* Shared tooltip — single element, repositioned on hover. */
.dash-tooltip{
  position:fixed;top:0;left:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,34,62,.97),rgba(11,21,35,.97));
  border:1px solid var(--tb-accent);border-radius:10px;
  padding:8px 12px;font-size:13px;font-weight:800;color:var(--tb-text);
  box-shadow:0 12px 30px rgba(0,0,0,.55),0 0 0 1px rgba(255,111,59,.25);
  z-index:1000;opacity:0;transform:translate(-50%,calc(-100% - 10px));
  transition:opacity .12s ease;white-space:nowrap;
  font-variant-numeric:tabular-nums
}
.dash-tooltip.visible{opacity:1}
.dash-tooltip strong{color:var(--tb-accent)}
.dash-tooltip .muted{display:block;font-size:11px;font-weight:600;color:var(--tb-muted);margin-top:2px}

/* === Lifecycle Pipeline (race track) =========================== */
.pipeline-track{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px}
.pipeline-stage{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(255,255,255,.04));
  border:1px solid var(--tb-border);border-radius:14px;padding:14px;
  cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
  min-height:130px;overflow:hidden
}
.pipeline-stage::before{
  content:'';position:absolute;inset:0;border-radius:14px;
  background:radial-gradient(circle at 90% 0%,var(--stage-glow,transparent) 0%,transparent 60%);
  opacity:.8;pointer-events:none
}
.pipeline-stage:hover{transform:translateY(-2px);border-color:var(--stage-color,var(--tb-accent));box-shadow:0 12px 30px rgba(0,0,0,.45),0 0 0 1px var(--stage-color,var(--tb-accent))}
.pipeline-stage .stage-label{font-size:10px;font-weight:1000;letter-spacing:.16em;text-transform:uppercase;color:var(--tb-muted)}
.pipeline-stage .stage-count{font-size:42px;font-weight:1000;font-style:italic;line-height:1;color:var(--tb-text);font-variant-numeric:tabular-nums}
.pipeline-stage .stage-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;margin-top:8px;position:relative}
.pipeline-stage .stage-bar-fill{height:100%;background:linear-gradient(90deg,var(--stage-color,var(--tb-primary)),var(--tb-accent));width:0;transition:width 1s cubic-bezier(.2,.7,.2,1)}
/* Racing-direction arrow between stages (drawn via ::after on each
   non-last stage). */
.pipeline-stage:not(:last-child)::after{
  content:'▶';position:absolute;right:-14px;top:50%;transform:translateY(-50%);
  color:var(--tb-accent);font-size:14px;text-shadow:0 0 8px rgba(255,111,59,.6);z-index:2
}
.pipeline-stage.is-empty .stage-count{color:var(--tb-muted);opacity:.4}

/* === Donut / wheel ============================================ */
.donut-wrap{display:flex;align-items:center;gap:18px;margin-top:8px}
.donut-svg{flex-shrink:0;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}
.donut-svg .donut-segment{transition:transform .25s ease,opacity .15s ease;cursor:pointer;transform-origin:center;transform-box:fill-box}
.donut-svg .donut-segment:hover{transform:scale(1.05)}
.donut-svg .donut-center-num{font-size:28px;font-weight:1000;font-style:italic;fill:var(--tb-text);font-variant-numeric:tabular-nums}
.donut-svg .donut-center-label{font-size:9px;font-weight:1000;letter-spacing:.18em;fill:var(--tb-muted)}
.donut-legend{flex:1;display:grid;gap:6px;font-size:13px;font-weight:800;min-width:0}
.donut-legend-row{display:grid;grid-template-columns:14px 1fr auto;gap:8px;align-items:center}
.donut-legend-row.zero{opacity:.4}
.donut-swatch{width:12px;height:12px;border-radius:3px}
.donut-legend-row .pct{color:var(--tb-muted);font-variant-numeric:tabular-nums}

/* === Speedometer gauges (semicircular) ======================== */
.gauge-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.speedo{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.speedo svg{display:block}
.speedo-label{font-size:11px;font-weight:1000;letter-spacing:.16em;text-transform:uppercase;color:var(--tb-muted);margin-top:6px}
.speedo-sub{font-size:11px;color:var(--tb-muted);font-weight:800;margin-top:2px}
.speedo .needle{transform-origin:50% 100%;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.speedo .speedo-value{font-size:30px;font-weight:1000;font-style:italic;fill:var(--tb-text);font-variant-numeric:tabular-nums}
.speedo .speedo-suffix{font-size:13px;font-weight:800;fill:var(--tb-muted)}

/* === Activity timeline (scrollable) =========================== */
.spark-scroll{
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  margin-top:4px;
  padding-bottom:4px;
  scrollbar-color:var(--tb-accent) rgba(255,255,255,.05);
  scrollbar-width:thin;
}
.spark-scroll::-webkit-scrollbar{height:8px}
.spark-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:99px}
.spark-scroll::-webkit-scrollbar-thumb{background:linear-gradient(90deg,var(--tb-primary),var(--tb-accent));border-radius:99px}
.spark-scroll::-webkit-scrollbar-thumb:hover{background:var(--tb-accent)}
.spark-svg{display:block}
.spark-svg .spark-area{transition:opacity .2s ease}
.spark-svg .spark-line{filter:drop-shadow(0 0 6px rgba(255,111,59,.45))}
.spark-svg .spark-dot{cursor:pointer;transition:r .15s ease,filter .15s ease}
.spark-svg .spark-dot:hover{r:6;filter:drop-shadow(0 0 8px rgba(255,111,59,.9))}
.spark-svg .spark-axis{stroke:var(--tb-border);stroke-width:1}
.spark-svg .spark-grid{stroke:var(--tb-border);stroke-dasharray:2 4;opacity:.35}
.spark-svg .spark-label{font-size:10px;font-weight:800;fill:var(--tb-muted);text-transform:uppercase;letter-spacing:.08em}
.spark-svg .spark-peak-label{font-size:11px;font-weight:1000;fill:var(--tb-accent);font-variant-numeric:tabular-nums}

/* === Horizontal bar charts (strain + location) ================ */
.hbar-list{display:grid;gap:8px;margin-top:6px}
.hbar-row{display:grid;grid-template-columns:1fr auto;gap:6px 12px;cursor:pointer;padding:6px 8px;border-radius:10px;transition:background .15s ease,transform .15s ease}
.hbar-row:hover{background:rgba(255,255,255,.04);transform:translateX(2px)}
.hbar-name{font-weight:800;font-size:13px;color:var(--tb-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar-value{font-weight:1000;font-size:13px;font-variant-numeric:tabular-nums;color:var(--tb-accent);text-align:right}
.hbar-track{grid-column:1/-1;height:8px;background:rgba(255,255,255,.06);border-radius:99px;position:relative;overflow:hidden}
.hbar-fill{height:100%;border-radius:99px;width:0;transition:width 1.2s cubic-bezier(.2,.7,.2,1);background:linear-gradient(90deg,var(--tb-primary),var(--tb-accent))}
/* Pole-position indicator: leader strain has a checkered marker. */
.hbar-row.is-leader .hbar-name::before{
  content:'';display:inline-block;width:14px;height:10px;
  background:repeating-linear-gradient(45deg,#fff 0 2px,#111 2px 4px);
  margin-right:8px;vertical-align:middle;border-radius:2px
}
.hbar-row.is-leader .hbar-fill{background:linear-gradient(90deg,#fcd34d,var(--tb-accent),var(--tb-primary))}
/* Stage-tinted bars on the location chart (location color varies). */
.hbar-row[data-stage-tint="colonizing"] .hbar-fill{background:linear-gradient(90deg,#3b82f6,#22d3ee)}
.hbar-row[data-stage-tint="fruiting"] .hbar-fill{background:linear-gradient(90deg,var(--tb-warning),var(--tb-accent))}

/* === Pit Stop Alerts — racing flair on the existing list ====== */
.alert-list{display:grid;gap:8px;margin-top:4px}
.alert-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:10px;
  padding:10px 12px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid var(--tb-border);
  border-left:5px solid var(--tb-warning);align-items:center
}
.alert-row.overdue{border-left-color:var(--tb-danger);animation:alert-pulse 2.4s ease-in-out infinite}
@keyframes alert-pulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,0)}50%{box-shadow:0 0 0 6px rgba(220,38,38,.15)}}
.alert-light{
  width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#fff,var(--tb-warning) 60%,#5b3500);
  box-shadow:0 0 14px rgba(249,115,22,.6),inset 0 0 4px rgba(0,0,0,.5)
}
.alert-row.overdue .alert-light{background:radial-gradient(circle at 30% 30%,#fff,var(--tb-danger) 60%,#3a0000);box-shadow:0 0 16px rgba(220,38,38,.85),inset 0 0 4px rgba(0,0,0,.5);animation:alert-blink 1.2s ease-in-out infinite}
@keyframes alert-blink{0%,100%{opacity:1}50%{opacity:.55}}
.alert-text{min-width:0;overflow:hidden}
.alert-batch{font-weight:1000;color:var(--tb-text)}
.alert-meta{font-size:12px;color:var(--tb-muted);font-weight:800}
.alert-when{font-size:11px;font-weight:1000;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:99px;background:var(--tb-warning);color:#000;white-space:nowrap}
.alert-row.overdue .alert-when{background:var(--tb-danger);color:#fff}

/* === Empty state ============================================== */
.dash-empty{padding:18px;text-align:center;color:var(--tb-muted);font-weight:800}

/* === Batch Progress (brought back from previous version) === */
.batch-progress-list{display:grid;gap:14px;margin-top:6px}
.bp-row{position:relative}
.bp-header{display:flex;justify-content:space-between;align-items:baseline;font-weight:800;margin-bottom:6px;font-size:13px;gap:12px;flex-wrap:wrap}
.bp-name{color:var(--tb-text);font-weight:1000}
.bp-meta{color:var(--tb-muted);font-variant-numeric:tabular-nums}
.bp-meta strong{color:var(--tb-accent);font-weight:1000}
.bp-track{height:10px;background:rgba(255,255,255,.06);border-radius:99px;overflow:hidden;position:relative}
.bp-fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--tb-success),var(--tb-accent),var(--tb-primary));transition:width 1.2s cubic-bezier(.2,.7,.2,1);box-shadow:0 0 12px rgba(255,111,59,.35) inset}

/* === Pipeline: passive (no tooltip / no fake interactivity) === */
.pipeline-stage{cursor:default}
.pipeline-stage:hover{transform:none;box-shadow:none;border-color:var(--tb-border)}
.pipeline-stage:hover::before{opacity:.8}

/* === Alerts/Activity above-the-fold row: keep both columns the
       same height so the spark chart doesn't drift to a ribbon. === */
.alerts-activity-row{align-items:stretch}
.alerts-activity-row .panel{display:flex;flex-direction:column}
.alerts-activity-row .alert-list{flex:1;overflow:auto;max-height:360px}
.alerts-activity-row #chartActivity{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0}
.alerts-activity-row #chartActivity .spark-scroll{width:100%}