/* ITWS wind dashboard (issue #218, RW-4) - dark-theme panel, scoped
 * entirely under #itws-dashboard so it can't leak into (or be clobbered
 * by) the Bootstrap 5 / tracon.css styling the rest of the app uses.
 * Every class here is prefixed `iwd-` for the same reason - the mockup
 * (docs/itws_dashboard_mockup.html) this is ported from used bare names
 * like `.card`/`.panel`/`.btn` that would collide with Bootstrap's own.
 *
 * RW-6 (runway diagram) and RW-7 (history/episode panel) extend this
 * page later - keep additions grouped by section (variables, layout,
 * strip, wind panel, columns/peaks, log, popup, mobile) rather than
 * appended at the end.
 */

#itws-dashboard {
  --iwd-bg: #0b0e12;
  --iwd-surface: #141920;
  --iwd-surface-2: #1b222b;
  --iwd-line: #273040;
  --iwd-line-strong: #3a4658;
  --iwd-ink: #e8ecf1;
  --iwd-ink-2: #aab4c2;
  --iwd-muted: #6f7c8e;
  --iwd-gf: #e67e22;
  --iwd-wsa: #f1c40f;
  --iwd-mba: #e74c3c;
  --iwd-tor: #c0392b;
  --iwd-rvr: #3498db;
  --iwd-t3: #f1c40f;
  --iwd-t6: #f07a1f;
  --iwd-t9: #ff4040;

  background: var(--iwd-bg);
  color: var(--iwd-ink);
  font-family: "IBM Plex Sans Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.35;
  padding: 12px;
  border-radius: 4px;
  margin-top: 10px;
}

#itws-dashboard * {
  box-sizing: border-box;
}

#itws-dashboard .mono,
#itws-dashboard .iwd-mono {
  font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

#itws-dashboard .iwd-muted {
  color: var(--iwd-muted);
  font-size: 12.5px;
}

#itws-dashboard .iwd-hidden,
#itws-dashboard [hidden] {
  display: none !important;
}

/* --- stale banner (req 10) --------------------------------------- */

#itws-dashboard .iwd-note {
  background: var(--iwd-surface);
  border: 1px solid var(--iwd-line);
  border-left: 3px solid var(--iwd-wsa);
  padding: 8px 12px;
  margin: 0 0 10px;
  color: var(--iwd-ink-2);
  font-size: 13px;
}

/* --- status strip (req 3) - fixed 6 slots, dashes when inactive, --- */
/* --- grid never reflows regardless of which cards are active ------ */

#itws-dashboard .iwd-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
  overflow-x: auto;
}

/* #iwd-strip-rest is a plain wrapper (its cards are innerHTML-regenerated
 * every render) but must not create its own grid level - `display:
 * contents` makes its .iwd-card children lay out as direct items of
 * .iwd-strip's own grid, alongside the fixed center-field card above. */
#itws-dashboard .iwd-strip-rest {
  display: contents;
}

/* Station picker sits beside the center-field reading, not stacked above
   it (Mike, 2026-09-19: "hard to find") - sized up so it reads as the
   page's primary control. */
#itws-dashboard #iwd-card-centerfield {
  display: flex;
  align-items: center;
  gap: 10px;
}

#itws-dashboard #iwd-card-centerfield .iwd-cf-info {
  min-width: 0;
}

#itws-dashboard .iwd-station-select {
  background: var(--iwd-surface-2);
  color: var(--iwd-ink);
  border: 1px solid var(--iwd-line-strong);
  border-radius: 4px;
  font: inherit;
  font-size: 20px;
  font-weight: 700;
  padding: 6px 8px;
  cursor: pointer;
  flex: none;
  max-width: 100%;
}

#itws-dashboard .iwd-card {
  background: var(--iwd-surface);
  border: 1px solid var(--iwd-line);
  border-radius: 4px;
  padding: 8px 11px;
  border-top: 2px solid var(--iwd-fam, var(--iwd-line));
  min-width: 0;
}

#itws-dashboard .iwd-card .iwd-lab {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--iwd-muted);
}

#itws-dashboard .iwd-card .iwd-val {
  font-size: 19px;
  font-weight: 600;
  margin: 2px 0 0;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#itws-dashboard .iwd-card .iwd-val small {
  font-size: 12px;
  color: var(--iwd-ink-2);
  font-weight: 400;
  margin-left: 4px;
}

#itws-dashboard .iwd-card .iwd-sub {
  color: var(--iwd-ink-2);
  font-size: 11.5px;
  margin-top: 2px;
}

#itws-dashboard .iwd-card.iwd-off .iwd-val {
  color: var(--iwd-muted);
  font-weight: 400;
}

/* --- main three-column layout: diagram (RW-6) | wind panel | log --- */

#itws-dashboard .iwd-main {
  display: grid;
  grid-template-columns: minmax(280px, 3fr) minmax(320px, 3fr) minmax(280px, 2fr);
  gap: 10px;
  align-items: start;
}

@media (max-width: 1200px) {
  #itws-dashboard .iwd-main {
    grid-template-columns: minmax(320px, 3fr) minmax(280px, 2fr);
  }

  #itws-dashboard .iwd-diagram-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  #itws-dashboard .iwd-main {
    grid-template-columns: 1fr;
  }

  #itws-dashboard .iwd-diagram-panel {
    grid-column: auto;
  }
}

#itws-dashboard .iwd-diagram-panel svg {
  background: #0f1319;
  border-radius: 4px;
}

#itws-dashboard .iwd-panel {
  background: var(--iwd-surface);
  border: 1px solid var(--iwd-line);
  border-radius: 4px;
  padding: 10px 12px;
  position: relative;
}

#itws-dashboard .iwd-panel h4 {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--iwd-ink-2);
}

/* --- header (req 2) ------------------------------------------------ */

#itws-dashboard .iwd-hdr {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  align-items: baseline;
  justify-content: space-between;
}

#itws-dashboard .iwd-hdr .iwd-flow {
  font-size: 16px;
  font-weight: 600;
}

#itws-dashboard .iwd-hdr .iwd-nx {
  color: var(--iwd-muted);
  font-size: 12px;
}

/* issue #263: last-update age past 90s (yellow) / 5min (red) - a
   data-freshness signal distinct from the 10-minute iwd-stale grey-out
   below, so a slow-but-not-yet-stale station still escalates well before
   the full stale treatment kicks in. */
#itws-dashboard .iwd-hdr .iwd-nx.iwd-late {
  color: var(--iwd-t3);
  font-weight: 600;
}

#itws-dashboard .iwd-hdr .iwd-nx.iwd-verylate {
  color: var(--iwd-t9);
  font-weight: 600;
}

#itws-dashboard #iwd-turn,
#itws-dashboard #iwd-spread {
  margin-top: 4px;
}

/* --- 30min rose / 15min speed box row (issue #263: the 5min avg box
   that used to sit here moved to live only on the runway diagram) ----*/

#itws-dashboard .iwd-charts-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  align-items: flex-start;
}

#itws-dashboard .iwd-inset {
  background: var(--iwd-surface-2);
  border: 1px solid var(--iwd-line);
  border-radius: 4px;
  padding: 6px 8px;
  width: 200px;
  max-width: 100%;
}

#itws-dashboard .iwd-inset h5 {
  margin: 0 0 2px;
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  color: var(--iwd-ink);
}

#itws-dashboard .iwd-inset .iwd-subtext {
  font-size: 10px;
  color: var(--iwd-muted);
  text-align: center;
  margin-top: -2px;
}

#itws-dashboard svg text {
  font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
  fill: var(--iwd-ink-2);
}

/* RW-6 diagram text: a class selector (#itws-dashboard .foo, specificity
   1,1,0) beats the generic element selector above (#itws-dashboard svg
   text, specificity 1,0,2) without needing !important - deliberately
   giving each text purpose its own intended color/contrast instead of
   letting every <text> in the diagram flatten to the one grey the rule
   above was written for (static/itws_diagram.js relies on this; it never
   sets `fill=` inline for exactly this reason). */
#itws-dashboard .iwd-diagram-label {
  fill: var(--iwd-ink-2);
}

#itws-dashboard .iwd-diagram-boxtext {
  fill: var(--iwd-ink);
}

/* Issue #271: touchdown RVR readout (thousands of ft). Blue by default,
   yellow/red below the thresholds in static/itws_diagram.js. The dark halo
   keeps it legible over the pavement stroke. */
#itws-dashboard .iwd-diagram-rvr {
  fill: var(--iwd-rvr);
  stroke: var(--iwd-bg);
  stroke-width: 2.5px;
  paint-order: stroke;
  stroke-linejoin: round;
}

#itws-dashboard .iwd-diagram-rvr.iwd-rvr-yellow {
  fill: var(--iwd-wsa);
}

#itws-dashboard .iwd-diagram-rvr.iwd-rvr-red {
  fill: var(--iwd-mba);
}

/* Issue #273: FICON triple above the runway midpoint. Light fill with the
   same dark halo as the RVR readout, so it stays legible over a yellow/
   orange/red pavement stroke. */
#itws-dashboard .iwd-diagram-ficon {
  fill: #e6ebf2;
  stroke: var(--iwd-bg);
  stroke-width: 2.5px;
  paint-order: stroke;
  stroke-linejoin: round;
}

#itws-dashboard .iwd-diagram-badgetext {
  /* Near-black on the yellow/red WSA/MBA badge fill - this one matters
     for contrast, not just hierarchy (req 4). */
  fill: var(--iwd-bg);
}

#itws-dashboard .iwd-diagram-inset-label {
  fill: var(--iwd-ink-2);
}

#itws-dashboard .iwd-diagram-inset-value {
  fill: var(--iwd-ink);
}

#itws-dashboard .iwd-diagram-inset-sub {
  fill: var(--iwd-muted);
}

#itws-dashboard .iwd-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* --- West/Neutral/East columns (req 4/5) --------------------------- */

#itws-dashboard .iwd-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
  font-size: 12.5px;
}

#itws-dashboard .iwd-cols h5 {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--iwd-ink-2);
  border-bottom: 1px solid var(--iwd-line);
  padding-bottom: 3px;
}

#itws-dashboard .iwd-cols .iwd-row {
  display: flex;
  gap: 6px;
  align-items: center;
  line-height: 1.6;
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  padding: 0;
  text-align: left;
  width: 100%;
}

#itws-dashboard .iwd-cols .iwd-row:hover,
#itws-dashboard .iwd-cols .iwd-row.iwd-row-hl {
  color: var(--iwd-ink);
  background: var(--iwd-surface-2);
}

/* RW-6: a box in the runway diagram is hovered/focused - same visual
   treatment as the column row above, since it drives the SAME
   highlight (req 6), never a second one. */
#itws-dashboard .iwd-diagram-box {
  cursor: pointer;
}

#itws-dashboard .iwd-diagram-box:hover rect,
#itws-dashboard .iwd-diagram-box:focus rect {
  filter: brightness(1.35);
}

#itws-dashboard .iwd-diagram-box:focus {
  outline: none;
}

#itws-dashboard .iwd-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

#itws-dashboard .iwd-pill {
  display: inline-block;
  padding: 0 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  color: #0b0e12;
  background: var(--iwd-pc, var(--iwd-line-strong));
}

/* --- peaks (req 6) --------------------------------------------------*/

#itws-dashboard .iwd-peaks {
  background: #1a1a12;
  border: 1px solid #5d5122;
  border-radius: 4px;
  padding: 8px 10px;
  margin-top: 10px;
}

#itws-dashboard .iwd-peaks h4 {
  margin: 0 0 5px;
  color: #e6a23c;
  font-size: 13.5px;
  font-weight: 700;
}

#itws-dashboard .iwd-peaks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1px 14px;
  font-size: 12px;
}

#itws-dashboard .iwd-peaks-grid button {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0;
}

#itws-dashboard .iwd-peaks-grid button:hover {
  color: var(--iwd-ink);
  text-decoration: underline;
}

#itws-dashboard .iwd-peaks b {
  color: var(--iwd-ink);
}

#itws-dashboard .iwd-peaks-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  border-top: 1px solid #5d5122;
  margin-top: 8px;
  padding-top: 6px;
  font-size: 12px;
}

#itws-dashboard .iwd-peaks-two h4 {
  font-size: 12.5px;
  margin: 0 0 2px;
  color: #e6a23c;
}

/* --- log (req 7) ----------------------------------------------------*/

/* issue #263: "Data for the past 15 mins" moves to its own full-width
   row 2, below row 1's now-3 boxes (diagram | wind panel | columns +
   peaks) - spanning every column of whatever grid-template-columns
   .iwd-main currently has (3 by default, 2/1 at the narrower
   breakpoints below) rather than occupying just one of them. */
#itws-dashboard .iwd-log {
  grid-column: 1 / -1;
}

#itws-dashboard .iwd-log h4 {
  margin: 0 0 4px;
}

#itws-dashboard .iwd-logwrap {
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--iwd-line);
  border-radius: 3px;
}

#itws-dashboard table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

#itws-dashboard th {
  font-weight: 500;
  color: var(--iwd-muted);
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 6px;
  border-bottom: 1px solid var(--iwd-line);
  position: sticky;
  top: 0;
  background: var(--iwd-surface);
}

#itws-dashboard th button {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-transform: inherit;
  letter-spacing: inherit;
}

#itws-dashboard td {
  padding: 3px 6px;
  border-bottom: 1px solid var(--iwd-line);
  white-space: nowrap;
}

#itws-dashboard td.iwd-region-cell {
  cursor: pointer;
  text-decoration: underline dotted;
}

#itws-dashboard .iwd-btns {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

#itws-dashboard .iwd-btn {
  background: #1f2a3a;
  border: 1px solid var(--iwd-line-strong);
  color: var(--iwd-ink);
  font: inherit;
  font-size: 12.5px;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
}

#itws-dashboard .iwd-btn:hover {
  border-color: var(--iwd-ink-2);
}

/* --- 30-minute history panel (RW-7, ITWS_DASHBOARD_DESIGN.md §7) ---- */

/* Sits in the .iwd-main grid, full-width, directly above the 15-minute
   log table (Mike, 2026-09-30) - the grid gap spaces it, no margin. */
#itws-dashboard .iwd-history-panel {
  grid-column: 1 / -1;
}

#itws-dashboard .iwd-history-panel h5 {
  margin: 10px 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--iwd-ink-2);
}

#itws-dashboard .iwd-history-lanes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#itws-dashboard .iwd-history-lane {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px;
  align-items: center;
}

#itws-dashboard .iwd-history-lane-label {
  font-size: 11.5px;
  color: var(--iwd-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#itws-dashboard .iwd-history-track {
  position: relative;
  height: 18px;
  background: var(--iwd-surface-2);
  border: 1px solid var(--iwd-line);
  border-radius: 3px;
}

#itws-dashboard .iwd-history-bar {
  position: absolute;
  top: 2px;
  bottom: 2px;
  background: var(--iwd-bar-color, var(--iwd-line-strong));
  border-radius: 2px;
  min-width: 3px;
  cursor: default;
}

/* Open-ended episode (no CLEARED row yet, ITWS_DASHBOARD_DESIGN.md
   §7.2) - a "▶" cap just past the bar's own right edge, same color as
   the bar, rather than a hard stop, so an ongoing episode reads as
   "still going" instead of looking identical to a closed one. */
#itws-dashboard .iwd-history-bar-open::after {
  content: "\25B6";
  position: absolute;
  right: -9px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  line-height: 1;
  color: var(--iwd-bar-color, var(--iwd-ink));
}

/* Time axis row: same grid as a lane; the track is just a positioning box
   for the tick labels (no border/fill). */
#itws-dashboard .iwd-history-axis-track {
  position: relative;
  height: 14px;
}

#itws-dashboard .iwd-history-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  padding-top: 4px;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
  color: var(--iwd-ink-2);
}

#itws-dashboard .iwd-history-tick::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  height: 5px;
  border-left: 1px solid var(--iwd-line-strong, var(--iwd-line));
}

#itws-dashboard .iwd-history-transitions-wrap {
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--iwd-line);
  border-radius: 3px;
}

/* --- design credit --------------------------------------------------*/

#itws-dashboard .iwd-credit {
  margin: 10px 2px 0;
  text-align: left;
}

#itws-dashboard .iwd-credit a {
  color: var(--iwd-ink-2);
}

#itws-dashboard .iwd-credit a:hover {
  color: var(--iwd-ink);
  text-decoration: underline;
}

/* --- popup (req 8) --------------------------------------------------*/

/* issue #263: "50% smaller and a modal" - a dimmed, fixed full-page
   backdrop centers the (now much narrower) popup panel; z-index is
   comfortably above every other panel/inset on this page (none of them
   set one). */
#itws-dashboard .iwd-pop-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1000;
}

#itws-dashboard .iwd-pop {
  background: var(--iwd-surface-2);
  border: 1px solid var(--iwd-line-strong);
  border-radius: 5px;
  padding: 10px 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  /* Started at ~half the ~750-800px this panel used to span inline in a
     wide wind panel column; Mike then asked for the charts themselves
     25% bigger twice over (380px -> 475px -> 594px) - the SVGs inside
     all scale via width:100%, so growing the modal is what grows them. */
  width: min(594px, 100%);
  max-height: 90vh;
  overflow-y: auto;
}

#itws-dashboard .iwd-pop h4 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  color: var(--iwd-ink);
}

#itws-dashboard .iwd-pop h4 button {
  background: none;
  border: 0;
  color: var(--iwd-ink-2);
  font: inherit;
  cursor: pointer;
}

#itws-dashboard .iwd-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 6px;
  background: var(--iwd-surface);
  border: 1px solid var(--iwd-line);
  border-radius: 3px;
  padding: 6px 8px;
  font-size: 11px;
  color: var(--iwd-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
}

#itws-dashboard .iwd-stats b {
  display: block;
  color: var(--iwd-ink);
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
}

#itws-dashboard .iwd-stats .iwd-alert-stat {
  grid-column: 1 / -1;
  text-align: left;
}

#itws-dashboard .iwd-pop2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

#itws-dashboard .iwd-pop2 h5 {
  margin: 0;
  font-size: 11.5px;
  text-align: center;
  font-weight: 600;
  color: var(--iwd-ink);
}

/* --- mobile (req 9) -------------------------------------------------*/

@media (max-width: 768px) {
  #itws-dashboard .iwd-main {
    grid-template-columns: 1fr;
  }

  #itws-dashboard .iwd-strip {
    grid-auto-flow: column;
    grid-auto-columns: minmax(150px, 220px);
    grid-template-columns: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  #itws-dashboard .iwd-cols {
    grid-template-columns: 1fr;
  }

  #itws-dashboard .iwd-charts-row {
    flex-direction: column;
  }

  #itws-dashboard .iwd-inset {
    width: 100%;
  }

  #itws-dashboard .iwd-pop2 {
    grid-template-columns: 1fr;
  }

  #itws-dashboard .iwd-history-lane {
    grid-template-columns: 76px 1fr;
  }

  #itws-dashboard .iwd-history-lane-label {
    font-size: 10.5px;
  }
}

/* --- greyed wind panel while stale (req 10); strip stays live ------ */
/* RW-6's runway diagram panel is covered by the same rule (final review
   finding I4) - a stale blob must not leave the diagram's readings,
   tailwind tier outlines, and WSA/MBA alert bars at full contrast next
   to a greyed-out wind panel. */

#itws-dashboard .iwd-wind-panel.iwd-stale,
#itws-dashboard .iwd-diagram-panel.iwd-stale {
  opacity: 0.5;
  filter: grayscale(60%);
}

/* issue #263: the runway-direction columns + peaks used to be inside
   .iwd-wind-panel (covered above) - now their own panel, kept as a
   separate rule (not folded into the combined selector above) so that
   selector's exact text - and the test asserting it - stay untouched. */
#itws-dashboard .iwd-cols-panel.iwd-stale {
  opacity: 0.5;
  filter: grayscale(60%);
}