/* --- Station history ----------------------------------------------------- */
/* Historical AIR ALFA charts: banner, toolbar, summary strip, synchronized
   chart grid, and the accessible data table. Light surface, recessive grid,
   thin marks; series colors are CVD-validated teal/amber/violet. */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.history-shell {
  display: grid;
  gap: 14px;
  transition: opacity 0.2s ease;
}

/* Grid items default to min-width:auto and refuse to shrink below their
   content, which would let the wide data table drag the whole page wide
   instead of scrolling inside its own container. */
.history-shell > * {
  min-width: 0;
}

.history-table-wrap {
  max-width: 100%;
  overflow: hidden;
}

.history-shell.is-refreshing {
  opacity: 0.55;
  pointer-events: none;
}

.history-outage {
  display: block;
  margin-bottom: 10px;
  padding: 12px 16px;
}

.history-outage strong {
  display: block;
  margin-bottom: 2px;
}

.history-outage p {
  margin: 0;
  color: var(--muted-foreground);
  max-width: 78ch;
}

.history-banner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 12px 16px;
}

.history-banner-id {
  display: flex;
  align-items: center;
  gap: 12px;
}

.history-banner-id strong {
  display: block;
  font-size: 16px;
}

.history-banner-id small,
.history-banner-meta {
  color: var(--muted);
}

.history-banner-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 12.5px;
}

.history-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.history-ranges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  background: var(--card-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px;
}

.history-range {
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
}

.history-range:hover {
  color: var(--foreground);
}

.history-range.active {
  background: var(--primary);
  color: var(--primary-foreground);
}

.history-custom {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted-foreground);
}

.history-custom input[type="date"],
.history-custom label {
  min-width: 0;
}

.history-custom label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.history-custom input[type="date"] {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--foreground);
  padding: 5px 8px;
  font-size: 13px;
}

.history-actions {
  display: inline-flex;
  gap: 8px;
  margin-left: auto;
}

.history-actions .ghost-btn {
  text-decoration: none;
}

.history-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.history-stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 10px 14px;
  display: grid;
  gap: 2px;
}

.history-stat span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.history-stat strong {
  font-size: 19px;
  font-weight: 700;
}

.history-stat small {
  color: var(--muted-foreground);
  font-size: 12px;
}

/* Column count is set by JS (class two-col) from the container's own width,
   so the CSS grid and the rendered SVG widths always agree. */
.history-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px 20px;
}

.history-grid.two-col {
  grid-template-columns: 1fr 1fr;
}

.history-chart {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 12px 16px 8px;
}

.history-chart:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.history-chart figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 4px;
}

.hg-title strong {
  font-size: 14.5px;
}

.hg-unit {
  color: var(--muted);
  font-size: 12px;
  margin-left: 8px;
}

.hg-legend {
  display: inline-flex;
  gap: 14px;
  font-size: 12.5px;
  color: var(--muted-foreground);
}

.hg-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hg-legend i {
  display: inline-block;
  width: 14px;
  height: 2px;
  border-radius: 2px;
}

.hg-legend i.dashed {
  background-image: repeating-linear-gradient(90deg, transparent 0 1px, rgba(255, 255, 255, 0.85) 1px 4px);
}

.hg-plot {
  position: relative;
}

.hg-plot svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.hg-line {
  stroke: #e4ece8;
  stroke-width: 1;
}

.hg-axis {
  stroke: var(--border-strong);
  stroke-width: 1;
}

.hg-ylabel,
.hg-xlabel {
  fill: var(--muted);
  font-size: 11px;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.hg-endlabel {
  fill: var(--muted-foreground);
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--font-sans);
}

.hg-leader {
  stroke: var(--border-strong);
  stroke-width: 1;
}

.hg-series {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.hg-band {
  opacity: 0.12;
  stroke: none;
}

.hg-dot {
  stroke: var(--card);
  stroke-width: 2;
}

.hg-cursor {
  stroke: var(--border-strong);
  stroke-width: 1;
}

.hg-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 2px;
  color: var(--muted-foreground);
  font-size: 13px;
}

.hg-tip[hidden] {
  display: none;
}

.hg-tip {
  position: absolute;
  z-index: 4;
  min-width: 130px;
  max-width: 210px;
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  line-height: 1.45;
  box-shadow: var(--shadow-hover);
  pointer-events: none;
  display: grid;
  gap: 2px;
}

.hg-tip > strong {
  font-size: 12px;
  opacity: 0.85;
  font-weight: 600;
}

.hg-tip-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.hg-tip-row i {
  width: 12px;
  height: 2px;
  border-radius: 2px;
  flex: 0 0 auto;
}

.hg-tip-row strong {
  font-variant-numeric: tabular-nums;
}

.hg-tip-row span {
  opacity: 0.8;
}

.history-empty-card {
  grid-column: 1 / -1;
}

.history-table-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.history-table-wrap summary {
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 14px;
}

.history-table-scroll {
  overflow-x: auto;
  border-top: 1px solid var(--border);
  max-height: 420px;
  overflow-y: auto;
}

.history-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.history-table th,
.history-table td {
  text-align: right;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.history-table thead th {
  position: sticky;
  top: 0;
  background: var(--card-muted);
  color: var(--muted-foreground);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.history-table tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--muted-foreground);
}

.history-footnote {
  max-width: 900px;
}

@media (max-width: 700px) {
  .history-actions {
    margin-left: 0;
  }

  .history-banner-meta {
    flex-direction: column;
  }
}

@media print {
  body.print-history header.app-top,
  body.print-history footer.app-footer,
  body.print-history main > section:not(#stationHistory) {
    display: none !important;
  }

  body.print-history #stationHistory {
    padding: 0;
  }

  body.print-history .history-toolbar {
    display: none;
  }

  body.print-history .history-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  body.print-history .history-chart,
  body.print-history .history-stat,
  body.print-history .history-banner {
    box-shadow: none;
    break-inside: avoid;
  }

  body.print-history .history-table-wrap[open] summary {
    display: none;
  }
}