/* ── base reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body { background: #000; color: #eee; font-family: sans-serif; font-size: 13px; }

/* ── header ──────────────────────────────────────────────────────────────── */
#header {
  background: #505559;
  padding: 8px 155px 5px 8px;
  white-space: nowrap;
  position: relative;
}
#header nav { display: inline-block; }
#header nav a {
  margin: 0 8px 0 0; padding: .5em 1.2em;
  font-size: 1.1em; font-weight: bold;
  font-family: "Segoe UI", Helvetica, Verdana;
  margin-bottom: 5px;
  background: #3a3d40; color: #eee; text-decoration: none;
  border-radius: 3px; display: inline-block;
}
#header nav a.active { background: #1a6aaf; color: #fff; }
#header .rightAlign { position: absolute; right: 10px; top: 8px; }
#header #pageInfo { color: #b0b0b0; font-size: 11px; display: inline-block; vertical-align: top; }

/* ── heat state bar (matches original .heatState CSS) ────────────────────── */
.heatState { background: #eee; white-space: nowrap; padding: 2px 5px; }
.theme-dark .heatState { background: #1e1e1e; }
.heatState > div { line-height: 24px; }
.heatState .flag { display: inline-block; margin-right: 15px; }
.heatState .flag > div { height: 24px; line-height: 24px; padding: 0 5px;
  text-align: center; min-width: 96px; width: auto !important; }
.heatState .clock { display: inline-block; padding: 0 5px; margin-right: 10px; }
.heatState .heatName { display: inline-block; padding: 0 5px; }

/* ── notification banner (matches original #screenMessages) ─────────────── */
#screenMessages > div > div { padding: 7px 10px; }
/* msgBlink/msgTicker have no working visual treatment in the original either —
   text-decoration:blink is inert in every modern browser, and the original's
   CSS never defines a scroll/marquee rule for msgTicker — so both render as a
   plain static bar, same as msgFixed. Matching that (not "fixing" it) is
   intentional: verbatim copy, not an improvement on the original. */
#screenMessages div.msgBlink { text-decoration: blink; }

/* flag color classes — match original exactly */
.flagNone    { background: #fff; color: black; }
.flagWarmup  { background: #fff; color: black; }
.flagRed     { background: #FF2B2B; }
.flagYellow  { background: #F7F700; color: black; }
.flagCode60  { background: #C34DFF; }
.flagFinish  { background: black; color: white; }
.flagGreen   { background: #56DD27; color: black; }
/* dark-theme overrides */
.theme-dark .flagNone   { background: white; color: black; }
.theme-dark .flagWarmup { background: white; color: black; }
.theme-dark .flagRed    { background: red; }
.theme-dark .flagYellow { background: #f2f604; color: black; }
.theme-dark .flagCode60 { background: #e203e2; }
.theme-dark .flagGreen  { background: #04f604; color: black; }

/* ── connection / notification bar ──────────────────────────────────────── */
#connectionBar {
  display: none; padding: 6px 10px;
  background: #fffbcc; color: #333; border-bottom: 1px solid #ccc;
}

/* ── results container ───────────────────────────────────────────────────── */
#screen-results { overflow-x: auto; }

div.raceResults { font-size: 13px; font-family: sans-serif; }
div.raceResults .optionsContainer { padding-bottom: 6px; }
div.raceResults .optionsContainer:empty { padding-bottom: 0; }
div.raceResults .optionsContainer > div { display: inline-block; }

div.raceResults table.resultsGrid {
  border-spacing: 0; border-collapse: collapse;
  table-layout: fixed; empty-cells: show; font-size: 13px;
}
div.raceResults table.resultsGrid td,
div.raceResults table.resultsGrid th {
  margin: 0; border: 1px solid #323232;
  height: auto !important; padding: 1px 3px;
  text-align: left; vertical-align: middle;
}
div.raceResults table.resultsGrid td { white-space: nowrap; }
div.raceResults table.resultsGrid th { white-space: normal; }

div.raceResults table.resultsGrid td > div,
div.raceResults table.resultsGrid th > div {
  height: inherit; line-height: 17px !important;
  overflow: hidden; font-size: 12px !important;
  font-family: inherit !important; color: inherit !important;
}
div.raceResults table.resultsGrid td > div::after,
div.raceResults table.resultsGrid th > div::after { content: "\00a0"; }

/* line-height reductions for many rows */
div.raceResults table.resultsGrid tbody.rowsAbove10 td > div,
div.raceResults table.resultsGrid tbody.rowsAbove10 th > div { line-height: 16px !important; }
div.raceResults table.resultsGrid tbody.rowsAbove20 td > div,
div.raceResults table.resultsGrid tbody.rowsAbove20 th > div { line-height: 15px !important; }
div.raceResults table.resultsGrid tbody.rowsAbove30 td > div,
div.raceResults table.resultsGrid tbody.rowsAbove30 th > div { line-height: 14px !important; }
div.raceResults table.resultsGrid tbody.rowsAbove40 td > div,
div.raceResults table.resultsGrid tbody.rowsAbove50 td > div,
div.raceResults table.resultsGrid tbody.rowsAbove60 td > div,
div.raceResults table.resultsGrid tbody.rowsAbove70 td > div,
div.raceResults table.resultsGrid tbody.rowsAbove80 td > div,
div.raceResults table.resultsGrid tbody.rowsAbove90 td > div,
div.raceResults table.resultsGrid tbody.rowsAbove100 td > div,
div.raceResults table.resultsGrid tbody.rowsAbove40 th > div,
div.raceResults table.resultsGrid tbody.rowsAbove50 th > div,
div.raceResults table.resultsGrid tbody.rowsAbove60 th > div { line-height: 12px !important; font-size: 11px !important; }

/* dark theme thead */
.theme-dark div.raceResults table.resultsGrid thead { background-color: #00007f; color: white !important; }
.theme-dark div.raceResults table.resultsGrid th  { border-color: #00007f !important; }
.theme-dark div.raceResults table.resultsGrid th > div { color: white !important; }

/* dark theme rows */
.theme-dark div.raceResults table.resultsGrid tbody tr:nth-child(even) { background-color: #232323; }
.theme-dark div.raceResults table.resultsGrid tr.highlight { background-color: blue !important; }

/* sortable column header cursor + icon */
div.raceResults table.resultsGrid th[data-sortable] { cursor: pointer; }
div.raceResults table.resultsGrid th[data-sortable] > div { padding-right: 14px; background: url(/img/sort.png) no-repeat right center; }
div.raceResults table.resultsGrid th[data-sortable].asc > div  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpolygon points='4.5,1 9,8 0,8' fill='%23fff'/%3E%3C/svg%3E"); }
div.raceResults table.resultsGrid th[data-sortable].desc > div { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpolygon points='4.5,8 9,1 0,1' fill='%23fff'/%3E%3C/svg%3E"); }

/* timing color classes */
.theme-dark div.raceResults table.resultsGrid div.personalbest { color: #00da00 !important; }
.theme-dark div.raceResults table.resultsGrid div.absolutebest { color: #fe60fe !important; }
.theme-dark div.raceResults table.resultsGrid div.zero         { color: red    !important; }
.theme-dark div.raceResults table.resultsGrid div.lower        { color: #00da00 !important; }
.theme-dark div.raceResults table.resultsGrid div.timeRed      { color: red    !important; }
.theme-dark div.raceResults table.resultsGrid div.bgRed        { color: white; background-color: red; }
.theme-dark div.raceResults table.resultsGrid div.bgGreen      { color: white; background-color: green; }

/* tracking-panel avg-speed vs previous lap/sector */
.theme-dark #trackingPanel div.speedUp   { color: #00da00 !important; }
.theme-dark #trackingPanel div.speedDown { color: red    !important; }

/* tracking-panel sector time vs the same sector on the previous lap. Colours
   are inverted against the speed ones on purpose: a faster sector is a LOWER
   number. Scoped to a span inside the cell so the feed's own personal-best
   colouring on the cell itself still shows. */
.theme-dark #trackingPanel div .sectorFaster { color: #00da00 !important; }
.theme-dark #trackingPanel div .sectorSlower { color: red    !important; }

/* marker glyphs */
div.raceResults table.resultsGrid td > div.marker-0,
div.raceResults table.resultsGrid td > div.marker-1,
div.raceResults table.resultsGrid td > div.marker-2,
div.raceResults table.resultsGrid td > div.marker-3,
div.raceResults table.resultsGrid td > div.marker-4,
div.raceResults table.resultsGrid td > div.marker-5,
div.raceResults table.resultsGrid td > div.marker-6,
div.raceResults table.resultsGrid td > div.marker-7,
div.raceResults table.resultsGrid td > div.marker-8,
div.raceResults table.resultsGrid td > div.marker-9,
div.raceResults table.resultsGrid td > div.marker-10,
div.raceResults table.resultsGrid td > div.marker-11,
div.raceResults table.resultsGrid td > div.marker-12,
div.raceResults table.resultsGrid td > div.marker-13 {
  background-size: auto 70%; background-position: center; background-repeat: no-repeat;
}
div.raceResults table.resultsGrid td div.marker-0  { background-image: url(/img/glyphs/0.png); }
div.raceResults table.resultsGrid td div.marker-1  { background-image: url(/img/glyphs/1.png); }
div.raceResults table.resultsGrid td div.marker-2  { background-image: url(/img/glyphs/2.png); }
div.raceResults table.resultsGrid td div.marker-3  { background-image: url(/img/glyphs/3.png); }
div.raceResults table.resultsGrid td div.marker-4  { background-image: url(/img/glyphs/4.png); }
div.raceResults table.resultsGrid td div.marker-5  { background-image: url(/img/glyphs/5.png); }
div.raceResults table.resultsGrid td div.marker-6  { background-image: url(/img/glyphs/6.png); }
div.raceResults table.resultsGrid td div.marker-7  { background-image: url(/img/glyphs/7.png); }
div.raceResults table.resultsGrid td div.marker-8  { background-image: url(/img/glyphs/8.png); }
div.raceResults table.resultsGrid td div.marker-9  { background-image: url(/img/glyphs/9.png); }
div.raceResults table.resultsGrid td div.marker-10 { background-image: url(/img/glyphs/10.png); }
div.raceResults table.resultsGrid td div.marker-11 { background-image: url(/img/glyphs/11.png); }
div.raceResults table.resultsGrid td div.marker-12 { background-image: url(/img/glyphs/12.png); }
div.raceResults table.resultsGrid td div.marker-13 { background-image: url(/img/glyphs/13.png); }
.theme-dark div.raceResults table.resultsGrid td div.marker-6  { background-image: url(/img/glyphs/6-d.png); }
.theme-dark div.raceResults table.resultsGrid td div.marker-9  { background-image: url(/img/glyphs/9-d.png); }
.theme-dark div.raceResults table.resultsGrid td div.marker-10 { background-image: url(/img/glyphs/10-d.png); }

/* section marker glyphs */
div.raceResults table.resultsGrid td > div.smarker-1,
div.raceResults table.resultsGrid td > div.smarker-2,
div.raceResults table.resultsGrid td > div.smarker-3,
div.raceResults table.resultsGrid td > div.smarker-4,
div.raceResults table.resultsGrid td > div.smarker-5,
div.raceResults table.resultsGrid td > div.smarker-6,
div.raceResults table.resultsGrid td > div.smarker-7,
div.raceResults table.resultsGrid td > div.smarker-8,
div.raceResults table.resultsGrid td > div.smarker-9 {
  background-size: auto 70%; background-position: center; background-repeat: no-repeat;
}
/* default (dark): SectionGlyphsDark overridden by .theme-dark to SectionGlyphs */
div.raceResults table.resultsGrid td div.smarker-1 { background-image: url(/img/sectionglyphs/1.png); }
div.raceResults table.resultsGrid td div.smarker-2 { background-image: url(/img/sectionglyphs/2.png); }
div.raceResults table.resultsGrid td div.smarker-3 { background-image: url(/img/sectionglyphs/3.png); }
div.raceResults table.resultsGrid td div.smarker-4 { background-image: url(/img/sectionglyphs/4.png); }
div.raceResults table.resultsGrid td div.smarker-5 { background-image: url(/img/sectionglyphs/5.png); }
div.raceResults table.resultsGrid td div.smarker-6 { background-image: url(/img/sectionglyphs/6.png); }
div.raceResults table.resultsGrid td div.smarker-7 { background-image: url(/img/sectionglyphs/7.png); }
div.raceResults table.resultsGrid td div.smarker-8 { background-image: url(/img/sectionglyphs/8.png); }
div.raceResults table.resultsGrid td div.smarker-9 { background-image: url(/img/sectionglyphs/9.png); }

/* flag images */
div.raceResults table.resultsGrid td.rrc-nationality > div {
  background-size: auto 90%; background-position: center; background-repeat: no-repeat;
}
div.raceResults table.resultsGrid .flagAUT { background-image: url(/img/flags/AUT.png); }
div.raceResults table.resultsGrid .flagBEL { background-image: url(/img/flags/BEL.png); }
div.raceResults table.resultsGrid .flagDEU { background-image: url(/img/flags/DEU.png); }
div.raceResults table.resultsGrid .flagFIN { background-image: url(/img/flags/FIN.png); }
div.raceResults table.resultsGrid .flagFRA { background-image: url(/img/flags/FRA.png); }
div.raceResults table.resultsGrid .flagGBR { background-image: url(/img/flags/GBR.png); }
div.raceResults table.resultsGrid .flagGEO { background-image: url(/img/flags/GEO.png); }
div.raceResults table.resultsGrid .flagHUN { background-image: url(/img/flags/HUN.png); }
div.raceResults table.resultsGrid .flagITA { background-image: url(/img/flags/ITA.png); }
div.raceResults table.resultsGrid .flagMKD { background-image: url(/img/flags/MKD.png); }
div.raceResults table.resultsGrid .flagNLD { background-image: url(/img/flags/NLD.png); }
div.raceResults table.resultsGrid .flagQAT { background-image: url(/img/flags/QAT.png); }
div.raceResults table.resultsGrid .flagSVK { background-image: url(/img/flags/SVK.png); }
div.raceResults table.resultsGrid .flagSWE { background-image: url(/img/flags/SWE.png); }
div.raceResults table.resultsGrid .flagURY { background-image: url(/img/flags/URY.png); }

/* highlight input */
.optionsContainer label { color: #b0b0b0; font-size: 11px; margin-right: 4px; }
.optionsContainer input[type=text] {
  width: 80px; background: #111; color: #eee; border: 1px solid #555;
  padding: 2px 4px; font-size: 11px;
}

/* class/vehicle filter dropdowns */
.filterSelect {
  background: #1a1a2e; color: #ccc; border: 1px solid #444; padding: 2px 4px;
}

/* header page-info / last-data-stream text */
.pageInfoLabel   { color: #b0b0b0; font-size: 11px; }
.streamInfoLabel { color: #666;    font-size: 10px; }

/* CSV downloads tab table */
#csvTabTable th {
  text-align: left; padding: 6px 10px;
  background: #00007f; color: #fff; border: 1px solid #00007f;
}
#csvTabTable td { padding: 7px 10px; border: 1px solid #2a2a2a; }

/* no cell flash — original does not flash on update */