/* Simulation results dashboard (simDashboard.js).
   Colour roles follow the dataviz reference palette: two validated categorical slots
   (blue = this/inside, orange = outside/harvest), status colours only with an icon +
   label, hairline solid grid, 2px lines, 14% bands. The app is light-only, so the
   dashboard is too. */

.sd {
  --dv-surface: #fcfcfb;
  --dv-page: #f3f4f0;
  --dv-ink: #0b0b0b;
  --dv-ink-2: #52514e;
  --dv-muted: #898781;
  --dv-grid: #e1e0d9;
  --dv-axis: #c3c2b7;
  --dv-border: rgba(11, 11, 11, 0.1);
  --dv-s1: #2a78d6;
  --dv-s2: #eb6834;
  --dv-good: #0ca30c;
  --dv-good-text: #006300;
  --dv-serious: #ec835a;
  --dv-crit: #d03b3b;
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  justify-content: center;
  padding: 14px;
  background: rgba(24, 32, 28, 0.55);
  color: var(--dv-ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.sd[hidden] { display: none; }
body.sd-open { overflow: hidden; }

.sd-sheet {
  width: min(1320px, 100%);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--dv-page);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(20, 30, 24, 0.4);
}
.sd-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px 18px;
  background: var(--dv-surface);
  border-bottom: 1px solid var(--dv-border);
}
.sd-logo { height: 22px; width: auto; flex: none; margin-right: 4px; }
.sd-titles { flex: 1; min-width: 0; }
.sd-titles h2 { margin: 0; font-size: 1.05rem; font-weight: 650; }
.sd-sub { margin: 3px 0 0; font-size: 0.8rem; color: var(--dv-ink-2); }
.sd-btn {
  /* beat the global button { width: 100%; min-width: 108px; min-height: 38px } */
  width: auto;
  min-width: 0;
  min-height: 0;
  flex: none;
  font-weight: 500;
  border: 1px solid var(--dv-border);
  background: var(--dv-surface);
  color: var(--dv-ink);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.8rem;
  cursor: pointer;
}
.sd-btn:hover { background: #f1f2ee; }
.sd-close { font-size: 1.15rem; line-height: 1; padding: 4px 10px; }

.sd-nav {
  display: flex;
  gap: 2px;
  padding: 4px 12px;
  background: var(--dv-surface);
  border-bottom: 1px solid var(--dv-border);
  overflow-x: auto;
}
.sd-nav a {
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 0.8rem;
  color: var(--dv-ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.sd-nav a:hover { background: #f1f2ee; color: var(--dv-ink); }
.sd-status {
  padding: 6px 18px;
  font-size: 0.75rem;
  color: var(--dv-ink-2);
  border-bottom: 1px solid var(--dv-border);
  background: #f8f9f5;
}

.sd-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px 28px;
  display: grid;
  gap: 22px;
  align-content: start;
}
.sd-section { display: grid; gap: 12px; scroll-margin-top: 8px; }
.sd-section > h3 { margin: 0; font-size: 0.95rem; font-weight: 650; }
.sd-note { margin: 0; font-size: 0.8rem; line-height: 1.5; color: var(--dv-ink-2); }
/* advice the reader can act on, as opposed to a note about what they are looking at */
.sd-fix {
  margin: 8px 0 0;
  padding: 8px 11px;
  font-size: 0.8rem;
  line-height: 1.5;
  border-left: 3px solid var(--dv-s2, #c96);
  border-radius: 0 6px 6px 0;
  background: rgba(200, 150, 90, 0.12);
}
.sd-wait { color: var(--dv-muted); font-style: italic; }
/* a storm brought the house down: the season ended early */
.sd-collapse {
  margin: 0;
  padding: 10px 12px;
  border-left: 4px solid #c0392b;
  border-radius: 8px;
  background: rgba(192, 57, 43, 0.1);
  font-size: 0.84rem;
  line-height: 1.5;
}

/* KPI row */
.sd-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.sd-tile {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 12px 14px;
  background: var(--dv-surface);
  border: 1px solid var(--dv-border);
  border-radius: 10px;
}
.sd-tile-label { font-size: 0.75rem; color: var(--dv-ink-2); }
.sd-tile-value { font-size: 1.4rem; font-weight: 600; line-height: 1.15; }
.sd-tile small { font-size: 0.74rem; line-height: 1.4; color: var(--dv-ink-2); }
.sd-tile .sd-chip { justify-self: start; }

.sd-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.sd-chip b { font-weight: 700; }
.sd-chip.is-good { color: var(--dv-good-text); border-color: var(--dv-good); background: rgba(12, 163, 12, 0.08); }
.sd-chip.is-serious { color: #8a3a12; border-color: var(--dv-serious); background: rgba(236, 131, 90, 0.12); }
.sd-chip.is-crit { color: #8f1f1f; border-color: var(--dv-crit); background: rgba(208, 59, 59, 0.08); }

/* cards */
.sd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 12px; }
.sd-card {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
  padding: 12px 14px 12px;
  background: var(--dv-surface);
  border: 1px solid var(--dv-border);
  border-radius: 10px;
}
.sd-card.is-wide { grid-column: 1 / -1; }
.sd-card header h4 { margin: 0; font-size: 0.86rem; font-weight: 650; }
.sd-card header p { margin: 3px 0 0; font-size: 0.76rem; line-height: 1.45; color: var(--dv-ink-2); }

.sd-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.74rem; color: var(--dv-ink-2); }
.sd-legend span { display: inline-flex; align-items: center; gap: 6px; }
[class^="sd-key-"] { display: inline-block; flex: 0 0 auto; }
.sd-key-line { width: 16px; height: 2px; border-radius: 1px; background: var(--k); }
.sd-key-band { width: 16px; height: 10px; border-radius: 2px; background: var(--k); opacity: 0.2; }
.sd-key-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--k); }
.sd-key-rect { width: 10px; height: 10px; border-radius: 2px; background: var(--k); }
.sd-key-none { width: 16px; height: 2px; }

/* charts: the host includes the x-axis band, so it never needs its own scrollbar */
.sd-chart { position: relative; min-width: 0; }
.sd-plot { overflow-x: auto; }
.sd-svg { display: block; overflow: visible; }
.sd-svg:focus { outline: 2px solid var(--dv-s1); outline-offset: 2px; border-radius: 4px; }
.sd-svg text { font: 10px system-ui, -apple-system, "Segoe UI", sans-serif; fill: var(--dv-muted); }
.sd-ytick { text-anchor: end; dominant-baseline: middle; font-variant-numeric: tabular-nums; }
.sd-xtick { text-anchor: middle; }
.sd-grid line, line.sd-grid { stroke: var(--dv-grid); stroke-width: 1; }
.sd-axis { stroke: var(--dv-axis); stroke-width: 1; }
.sd-band { fill-opacity: 0.14; stroke: none; }
.sd-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sd-ref { stroke: var(--dv-ink-2); stroke-width: 1; opacity: 0.55; }
/* a surface-coloured halo keeps a reference label legible where data runs under it */
.sd-svg .sd-reflabel { text-anchor: end; fill: var(--dv-ink-2); paint-order: stroke; stroke: var(--dv-surface); stroke-width: 3px; stroke-linejoin: round; }
.sd-svg .sd-barlabel { paint-order: stroke; stroke: var(--dv-surface); stroke-width: 3px; stroke-linejoin: round; }
.sd-marker { stroke: var(--dv-surface); stroke-width: 2; }
.sd-xh-line { stroke: var(--dv-ink-2); stroke-width: 1; opacity: 0.45; }
.sd-xh-dot { stroke: var(--dv-surface); stroke-width: 2; }
.sd-hit { fill: transparent; cursor: crosshair; }
.sd-hit.sd-cat { cursor: default; outline: none; }
.sd-bar { transition: filter 0.1s; }
.sd-bar.is-hover { filter: brightness(1.15); }
.sd-whisker { stroke: var(--dv-ink-2); stroke-width: 1.2; fill: none; }
.sd-svg .sd-barlabel { text-anchor: middle; fill: var(--dv-ink-2); font-weight: 600; }

.sd-tip {
  position: absolute;
  z-index: 2;
  min-width: 170px;
  max-width: 280px;
  padding: 8px 10px;
  pointer-events: none;
  background: var(--dv-surface);
  border: 1px solid var(--dv-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(20, 30, 24, 0.14);
  font-size: 0.75rem;
}
.sd-tip[hidden] { display: none; }
.sd-tip-x { margin-bottom: 4px; color: var(--dv-ink-2); }
.sd-tip-row { display: flex; align-items: center; gap: 7px; line-height: 1.55; }
.sd-tip-row b { font-weight: 650; color: var(--dv-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sd-tip-row span { color: var(--dv-ink-2); }

/* tables */
.sd-data summary { cursor: pointer; font-size: 0.76rem; color: var(--dv-ink-2); }
.sd-data[open] summary { margin-bottom: 6px; }
.sd-data .sd-table-wrap { max-height: 280px; }
.sd-table-wrap { overflow: auto; }
.sd-table { width: 100%; border-collapse: collapse; font-size: 0.77rem; }
.sd-table th, .sd-table td { padding: 5px 8px; border-bottom: 1px solid var(--dv-grid); text-align: left; vertical-align: middle; }
.sd-table th { position: sticky; top: 0; background: var(--dv-surface); color: var(--dv-ink-2); font-weight: 600; }
.sd-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sd-table tfoot td { font-weight: 600; color: var(--dv-ink-2); border-bottom: 0; }
.sd-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 0.8rem; line-height: 1.5; color: var(--dv-ink-2); }

/* ---- the house, day by day (houseTimeline.js) ------------------------------------ */
.hx { display: grid; gap: 12px; }
.hx-svg { display: block; width: 100%; height: auto; overflow: visible; }
.hx-svg text { font: 11px system-ui, -apple-system, "Segoe UI", sans-serif; fill: var(--dv-ink-2); }
.hx-tick { text-anchor: middle; fill: var(--dv-muted); font-size: 10px; }
.hx-ytick { text-anchor: end; dominant-baseline: middle; fill: var(--dv-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.hx-axislabel, .hx-planlabel { fill: var(--dv-muted); font-size: 10px; }
.hx-axislabel { text-anchor: middle; }
.hx-grid { stroke: var(--dv-grid); stroke-width: 1; }
.hx-daymark { stroke: var(--dv-ink); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: 0.55; }

/* the range brush */
.hx-range {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  background: var(--dv-surface);
  border: 1px solid var(--dv-border);
  border-radius: 10px;
}
.hx-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.hx-chip {
  width: auto;
  min-width: 0;
  padding: 3px 10px;
  border: 1px solid var(--dv-border);
  border-radius: 999px;
  background: var(--dv-surface);
  color: var(--dv-ink-2);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
}
.hx-chip:hover { border-color: var(--dv-axis); color: var(--dv-ink); }
.hx-chip.is-on { background: var(--dv-ink); border-color: var(--dv-ink); color: #fff; }
.hx-chip.is-ghost { font-weight: 500; }
.hx-readout { margin: 0; font-size: 0.76rem; color: var(--dv-ink-2); }
.hx-btrack { fill: #f5f5f0; }
.hx-bbar { fill: #7cb342; }
.hx-bplant { fill: var(--dv-s1); }
.hx-bmask { fill: var(--dv-page); opacity: 0.72; pointer-events: none; }
.hx-bsel { fill: rgba(42, 120, 214, 0.08); stroke: var(--dv-s1); stroke-width: 1; pointer-events: none; }
.hx-bhit { fill: transparent; cursor: crosshair; }
.hx-handle rect { fill: var(--dv-s1); opacity: 0.85; cursor: ew-resize; }
.hx-handle line { stroke: #fff; stroke-width: 1.5; pointer-events: none; }
.hx-handle:hover rect { opacity: 1; }

/* the plan of the house on one day */
.hx-bedfill { stroke: rgba(11, 11, 11, 0.14); stroke-width: 1; }
.hx-bed.is-waiting .hx-bedfill { stroke-dasharray: 3 3; }
.hx-bed:focus { outline: none; }
.hx-bed:focus .hx-bedfill { stroke: var(--dv-ink); stroke-width: 2; }
.hx-bedno { text-anchor: middle; font-size: 10px; fill: var(--dv-muted); }
.hx-bedstage { text-anchor: middle; font-size: 12px; font-weight: 650; fill: #1b1b17; }
.hx-bedage { text-anchor: middle; font-size: 10.5px; fill: #2c2c26; }
.hx-bedpick { text-anchor: middle; font-size: 11px; font-weight: 700; fill: #1b1b17; }
.hx-bedrisk { stroke: #fff; stroke-width: 1.5; }

.hx-scrubber { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hx-step {
  width: 28px;
  min-width: 0;
  height: 26px;
  padding: 0;
  border: 1px solid var(--dv-border);
  border-radius: 7px;
  background: var(--dv-surface);
  color: var(--dv-ink);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.hx-step:hover { border-color: var(--dv-axis); }
.hx-slider { flex: 1 1 200px; min-width: 140px; accent-color: var(--dv-s1); }
.hx-jumps { display: flex; flex-wrap: wrap; gap: 6px; }

.hx-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.74rem; color: var(--dv-ink-2); }
.hx-legend span { display: inline-flex; align-items: center; gap: 6px; }
.hx-legend i { width: 11px; height: 11px; border-radius: 3px; background: var(--c); border: 1px solid rgba(11, 11, 11, 0.12); }

.hx-events { display: flex; flex-wrap: wrap; gap: 6px; }
.hx-ev {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.hx-ev.is-in { background: rgba(124, 179, 66, 0.16); color: #3f6014; }
.hx-ev.is-out { background: rgba(168, 131, 107, 0.18); color: #5d4433; }
.hx-ev.is-pick { background: rgba(235, 104, 52, 0.15); color: #8a3410; }
.hx-ev.is-water { background: rgba(42, 120, 214, 0.12); color: #1c4e8a; }
.hx-ev.is-quiet { background: #f1f1ec; color: var(--dv-muted); }
.hx-ev.is-bad { background: rgba(208, 59, 59, 0.14); color: #8f1f1f; }
.hx-riskline {
  margin: 0;
  padding-left: 10px;
  border-left: 3px solid var(--c);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--dv-ink-2);
}
.hx-riskline b { color: var(--dv-ink); }

.hx-beds { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.hx-bedrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 7px;
  background: #faf9f5;
  font-size: 0.78rem;
  color: var(--dv-ink-2);
}
.hx-bedrow i { width: 10px; height: 18px; border-radius: 3px; background: var(--c); flex: none; }
.hx-bedrow b { color: var(--dv-ink); font-weight: 650; min-width: 52px; }
.hx-bedrow.is-waiting { opacity: 0.62; }
.hx-risk {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  color: var(--c);
  border: 1px solid var(--c);
  white-space: nowrap;
}

.hx-defs { position: absolute; width: 0; height: 0; }
.hx-legend i.is-hatched { background: repeating-linear-gradient(45deg, #f2f1e9 0 3px, #d6d4c7 3px 5px); }
.hx-layer { stroke: rgba(255, 255, 255, 0.55); stroke-width: 0.5; }
.hx-band { stroke: rgba(255, 255, 255, 0.6); stroke-width: 0.5; }
.hx-band.is-waiting { opacity: 0.55; }
/* a hairline per bed: no white gap between them, or the bands vanish into it */
.hx-band.is-hairline { stroke: none; }
.hx-bed.is-slim .hx-bedfill { stroke: none; }
.hx-flowin { fill: #4d8b2b; }
.hx-flowout { fill: #8d6a50; }
.hx-rowlabel { text-anchor: end; dominant-baseline: middle; font-size: 10px; fill: var(--dv-ink-2); }
.hx-in { fill: #2f7d32; }
.hx-out { fill: #7a5c46; }
.hx-stack { stroke: rgba(255, 255, 255, 0.4); stroke-width: 0.4; }
.hx-striplabel { text-anchor: end; font-size: 9px; fill: var(--dv-muted); }
.hx-hit { fill: transparent; cursor: pointer; }

@media (max-width: 720px) {
  .sd { padding: 0; }
  .sd-sheet { border-radius: 0; }
  .sd-grid { grid-template-columns: 1fr; }
}

/* the entry point in the Summary panel's polysim result */
.polysim-dash-btn {
  margin-top: 8px;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #2a78d6;
  border-radius: 8px;
  background: #2a78d6;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.polysim-dash-btn:hover { background: #256abf; }

/* Print the dashboard alone, every table open. */
@media print {
  body.sd-print > *:not(.sd) { display: none !important; }
  body.sd-print .sd { position: static; padding: 0; background: none; display: block; }
  body.sd-print .sd-sheet { box-shadow: none; border-radius: 0; width: auto; }
  body.sd-print .sd-nav, body.sd-print .sd-btn, body.sd-print .sd-status { display: none; }
  body.sd-print .sd-body { overflow: visible; }
  body.sd-print .sd-card { break-inside: avoid; }
  body.sd-print .sd-data .sd-table-wrap { max-height: none; }
  body.sd-print .hx-presets, body.sd-print .hx-scrubber, body.sd-print .hx-handle { display: none; }
  body.sd-print .hx-bedrow { background: none; border-bottom: 1px solid var(--dv-grid); }
}