:root {
  --bg: #0f1216;
  --panel: #171b21;
  --line: #262c35;
  --text: #e8ecf3;
  --muted: #93a0b1;
  --accent: #2f6fed;
  --reverse: #f2a541;
  --down: #22b06a;
  --up: #e0604f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 24px;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

header h1 { margin: 0 0 4px; font-size: 20px; }
header .sub { margin: 0 0 16px; color: var(--muted); font-size: 13px; }
header code { background: var(--panel); padding: 2px 6px; border-radius: 6px; }

.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 20px; }
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
input, select {
  min-width: 150px;
  padding: 8px 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
}
.filters select { min-width: 150px; }
.filters input[type="date"] { min-width: 140px; }
.filters button {
  padding: 8px 14px;
  background: var(--accent);
  border: 0;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
}
.status { color: var(--muted); font-size: 13px; }

/* "There is new data — refresh" indicator. The page does not redraw on its own;
   the 30s poll only sets this button visible when the stored data changed. */
.filters .new-data {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(47, 111, 237, 0.14);
  border: 1px solid var(--accent);
  color: var(--text);
}
.filters .new-data.hidden { display: none; }
.new-data .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: blink 1.6s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; }
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.card span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.card strong { font-size: 18px; }
.card small { color: var(--muted); font-size: 12px; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}
.panel h2 { margin: 0 0 12px; font-size: 15px; }
/* Fixed height for the chart — keeps Chart.js from resizing the canvas to the whole page
   (the "full screen" effect happens when the canvas drives its own container height).
   Resize this one value to make the graph taller/shorter.
   Width is the whole page when that is enough: it used to be capped at 1100px, which left
   half of a widescreen blank while the rest of the dashboard ran edge to edge. What it cannot
   do is squeeze the points, so the box is at least as wide as the dates on the chart need —
   app.js sets that per render (chartWidth()) and .chart-scroll scrolls horizontally when it is
   wider than the screen. 640px is the floor for a short window on a narrow screen. */
.chart-scroll { overflow-x: auto; }
.chart-box { position: relative; height: 200px; min-width: 640px; }
.chart-box canvas { width: 100% !important; height: 100% !important; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
tbody tr:hover { background: rgba(255, 255, 255, 0.04); }
td.up { color: var(--up); }
td.down { color: var(--down); }

.empty { color: var(--muted); }
.hidden { display: none; }

.hint { color: var(--muted); font-size: 13px; margin: 0 0 10px; }

/* Chart line colours — keep these in step with COLORS in public/app.js. */
.legend-key { color: var(--muted); }
.legend-key.key-a { color: var(--accent); }
.legend-key.key-b { color: var(--reverse); }

/* ---- checkbox lists in the filter bar ----
   One row per checkbox. The airline list carries the colour its chart line uses and defaults
   to every registered airline (see loadAirlines in public/app.js); the marker list is the same
   shape with no swatch and defaults to nothing ticked (see renderMarkers). Both sit inline in
   the filter bar instead of behind a dropdown, so the ticked set is visible without opening
   anything. */
.airlines, .markers { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.airlines-list, .markers-list { display: flex; flex-wrap: wrap; gap: 4px; }
.airline-item, .marker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}
.airline-item:hover, .marker-item:hover { background: rgba(255, 255, 255, 0.05); }
.airline-item input, .marker-item input { min-width: 0; width: 15px; accent-color: var(--accent); }
/* The swatch is set inline from /api/airlines, so it always matches the chart line. */
.swatch { width: 12px; height: 12px; border-radius: 3px; }

.detail-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline; margin-bottom: 12px; }
.detail-head strong { font-size: 16px; }
.detail-head span { color: var(--accent); font-size: 15px; }
/* Book button — links to the same search URL the fetcher builds (see public/app.js).
   It sits just after the price note on that line, and wraps below it when the row is
   too narrow for both. */
.book {
  display: inline-block;
  align-self: center;
  padding: 7px 14px;
  background: var(--accent);
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}
.book:hover { filter: brightness(1.12); }
/* One section per airline for the selected date, so one carrier's flight list is not
   mixed into another's. The heading colour and the Book button come from the airline's
   own colour, set inline from /api/airlines. */
.airline-block { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.airline-block h3 { margin: 0 0 6px; font-size: 14px; }
.airline-block > p { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.airline-links { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.flight { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.flight h3, .flight h4 { margin: 0 0 6px; font-size: 14px; }
.flight p { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.flight ul { margin: 0; padding: 0; list-style: none; }
.flight li { padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.flight li:last-child { border-bottom: 0; }