/* Live Timing — RaceResults screens + WEC-style tracker map */

.panel#panel-timing.active {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-height: 0;
  overflow: visible;
  padding-top: 8px;
}

.lt-root {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-height: 0;
  gap: 4px;
  overflow: visible;
}

/* Compact chrome stays above the map; map+tables fill everything left. */
.lt-root > .lt-form,
.lt-root > .lt-link-bar,
.lt-root > .lt-official-header,
.lt-root > .lt-official-meta,
.lt-root > .lt-screen-bar,
.lt-root > .lt-gate-notice {
  flex: 0 0 auto;
}

.lt-root > .lt-main {
  flex: 0 0 auto;
  min-height: min(56vh, 640px);
  align-self: stretch;
}

.lt-form.card {
  padding: 6px 10px;
  margin-bottom: 0;
  position: relative;
  z-index: 5;
}

.lt-gate-notice {
  margin: 0 12px 6px;
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid rgba(232, 149, 42, 0.35);
  background: rgba(232, 149, 42, 0.08);
  color: var(--text-dim);
  font-size: 12px;
}

.lt-form-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.lt-form-grid .tb-field {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.lt-form-grid .tb-field span {
  white-space: nowrap;
  margin: 0;
}

.lt-form-grid .tb-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  align-self: auto;
}

.lt-link-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 4px 10px;
  font-size: 12px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 2px;
}

.lt-link-bar a {
  color: var(--cyan);
}

.lt-screen-links a {
  font-size: 11px;
  margin-right: 8px;
}

.lt-official-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 4px 10px;
  background: #000;
  border: 1px solid #222;
}

.lt-togo {
  font-size: 13px;
  color: #00e676;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lt-official-title {
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  letter-spacing: 0.02em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lt-flag-badge {
  justify-self: end;
  padding: 6px 14px;
  font-weight: 700;
  font-size: 13px;
  background: #666666;
  color: #fff;
  border-radius: 2px;
  text-align: center;
  min-width: 110px;
}

/* Mirrors _FLAG_STYLES in app/core/race_results_parser.py. CSP (style-src
   'self') blocks JS-set inline styles, so app.js sets data-flag and these
   attribute-selector rules (plain CSS2, unlike the attr() value function)
   supply the actual colors. */
.lt-flag-badge[data-flag="idle"] { background: #666666; color: #fff; }
.lt-flag-badge[data-flag="ready"] { background: #888888; color: #fff; }
.lt-flag-badge[data-flag="red"] { background: #e10600; color: #fff; }
.lt-flag-badge[data-flag="sc"] { background: #fdda24; color: #111111; }
.lt-flag-badge[data-flag="finish"] { background: #5a9fd4; color: #fff; }
.lt-flag-badge[data-flag="green"] { background: #00c853; color: #fff; }
.lt-flag-badge[data-flag="fcy"] { background: #fdda24; color: #111111; }

.lt-official-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 4px 12px 6px;
  background: #000;
  font-size: 12px;
  color: #aaa;
  border-bottom: 1px solid #222;
}

.lt-official-meta .lt-tracker-status {
  padding: 0;
  background: transparent;
  border: none;
  color: #888;
}

.lt-screen-bar {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.lt-screen-btn {
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--text);
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 2px;
}

.lt-screen-btn.active {
  background: var(--cyan);
  color: #0b1220;
  border-color: var(--cyan);
  font-weight: 700;
}

.lt-main {
  flex: 0 0 auto;
  min-height: min(56vh, 640px);
  min-width: 0;
  display: flex;
  flex-flow: row nowrap;
  gap: 8px;
  align-items: stretch;
  overflow: visible;
}

/* Overview: map | results | pit — each column must clip overflow so the
   wide results sheet cannot paint over the pit lane panel. */
.lt-main.layout-overview {
  display: grid;
  grid-template-columns: minmax(240px, 1.35fr) minmax(0, 1.15fr) minmax(168px, 200px);
  grid-template-rows: auto;
  align-items: start;
  gap: 8px;
}

.lt-main.layout-overview .lt-map-host {
  min-height: min(48vh, 520px);
  height: min(48vh, 520px);
  position: sticky;
  top: 0;
  align-self: start;
  z-index: 0;
}

.lt-main.layout-overview .lt-screen-panels {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  overflow: hidden; /* contain wide results table */
}

.lt-main.layout-overview .lt-pit-panel {
  width: 200px;
  max-width: 200px;
  min-width: 168px;
  height: auto;
  max-height: min(70vh, 720px);
  overflow: auto;
  position: sticky;
  top: 0;
  align-self: start;
  z-index: 1;
}

.lt-main.layout-overview .lt-pit-panel.is-empty {
  display: none;
}

.lt-main.layout-overview:has(.lt-pit-panel.is-empty) {
  grid-template-columns: minmax(240px, 1.35fr) minmax(0, 1fr);
}

.lt-tracker-status {
  padding: 6px 12px;
  font-size: 12px;
  background: #000;
  color: #ccc;
  border: 1px solid var(--border);
}

.panel#panel-timing.active .lt-root {
  background: #000;
}

.panel#panel-timing .lt-screen-btn {
  background: #111;
  border-color: #333;
  color: #ccc;
}

.panel#panel-timing .lt-screen-btn.active {
  background: #1e4a7a;
  border-color: #1e4a7a;
  color: #fff;
}

.panel#panel-timing .lt-table-card,
.panel#panel-timing .lt-map-host {
  background: #000;
  border-color: #222;
}

.panel#panel-timing .lt-sheet-toolbar {
  background: #000;
  border-color: #222;
}

.panel#panel-timing .lt-sheet-field {
  color: #888;
}

.panel#panel-timing .lt-sheet-field .select-ctl,
.panel#panel-timing .lt-sheet-field .input-ctl {
  background: #111;
  border-color: #333;
  color: #eee;
}

.panel#panel-timing table.timing-results-sheet tr.stripe-a td { background: #0a0a0a; }
.panel#panel-timing table.timing-results-sheet tr.stripe-b td { background: #111; }
.panel#panel-timing table.timing-results-sheet tr.follow td { background: #1a3050; color: #7dd3fc; }
.panel#panel-timing table.timing-results-sheet tr.pit td { background: #2a1520; }

.lt-main.layout-tracker .lt-screen-panels { display: none; }

.lt-main.layout-overview .lt-map-host {
  flex: 1.4 1 0;
  min-width: 0;
  min-height: 280px;
}

.lt-main.layout-tracker .lt-map-host {
  flex: 1 1 0;
  min-width: 0;
  min-height: 280px;
}

.lt-main.layout-overview .lt-screen-panels {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden; /* keep results sheet inside this column */
}

.lt-main.layout-overview #lt-screen-overview { display: none; }

.lt-main.layout-overview #lt-screen-results {
  flex: 2.4 1 auto;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  overflow: hidden;
}

.lt-main.layout-overview #lt-screen-messages {
  flex: 0 0 auto;
  min-height: 72px;
  max-height: 160px;
  overflow: hidden;
}

.lt-main.layout-results .lt-map-host,
.lt-main.layout-results .lt-pit-panel { display: none; }
.lt-main.layout-results .lt-screen-panels { flex: 1 1 0; min-height: 0; }
.lt-main.layout-results #lt-screen-results { display: flex; flex: 1 1 0; min-height: 0; }

.lt-main.layout-panel-only .lt-map-host,
.lt-main.layout-panel-only .lt-pit-panel { display: none; }
.lt-main.layout-panel-only .lt-screen-panels { flex: 1 1 0; min-height: 0; }

.lt-map-host {
  position: relative;
  display: block;
  flex: 1 1 0;
  min-width: 0;
  min-height: 280px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border);
  border-radius: 2px;
}

.lt-map-host canvas,
.lt-map-host canvas.map-abs {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.lt-map-host canvas.is-pointer {
  cursor: pointer;
}

.lt-screen-panels {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.lt-screen-panel {
  display: none;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  flex-direction: column;
}

.lt-map-controls {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  max-width: min(280px, calc(100% - 16px));
}

/* Class/state legend — bottom-left of the map, built live from the cars
   actually on track (see app.js renderMapLegend), not a static guess. */
.lt-map-legend {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  max-width: calc(100% - 16px);
  padding: 5px 9px;
  background: rgba(10, 14, 20, 0.72);
  border: 1px solid var(--border-bright, #32465c);
  font-size: 10px;
  pointer-events: none;
}

.lt-map-legend:empty {
  display: none;
}

.lt-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-dim, #8a9bb0);
  white-space: nowrap;
}

.lt-legend-swatch {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.4);
  background: #2d6fad; /* default/unknown class — matches track-map.js CLASS_COLORS fallback */
}

/* Mirrors CLASS_COLORS in track-map.js. The CSP (style-src 'self') blocks
   JS-set inline styles, so the legend picks a class per car_class instead
   of writing style="background:...". Keep in sync with CLASS_COLORS. */
.lt-legend-swatch--f1 { background: #5a9fd4; }
.lt-legend-swatch--hypercar { background: #e10600; }
.lt-legend-swatch--lmgt3 { background: #3b82f6; }
.lt-legend-swatch--lmp2 { background: #22c55e; }
.lt-legend-swatch--lmp3 { background: #6b9e4e; }
.lt-legend-swatch--lmp2-am { background: #1a7f4e; }
.lt-legend-swatch--gt { background: #2d6fad; }
.lt-legend-swatch--gt4 { background: #60a5fa; }
.lt-legend-swatch--fun-cup { background: #a78bfa; }
.lt-legend-swatch--exhibition { background: #00d2be; }
.lt-legend-swatch--ours { background: #00d2be; }
.lt-legend-swatch--pit { background: #ffb300; }

.lt-map-ctrl-toggle {
  width: 32px;
  height: 32px;
  border: 1px solid #333;
  border-radius: 4px;
  background: rgba(10, 12, 16, 0.92);
  color: #ccc;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}

.lt-map-ctrl-toggle:hover {
  border-color: #0a9e8e;
  color: #fff;
}

.lt-map-ctrl-body {
  width: 260px;
  padding: 10px 12px;
  background: rgba(10, 12, 16, 0.94);
  border: 1px solid #333;
  border-radius: 4px;
  font-size: 11px;
  color: #ccc;
}

.lt-map-ctrl-title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  color: #9aa0a8;
}

.lt-map-ctrl-row {
  display: grid;
  grid-template-columns: 52px 1fr 40px;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.lt-map-ctrl-row span {
  color: #9aa0a8;
}

.lt-map-ctrl-row input[type="range"] {
  width: 100%;
}

.lt-map-ctrl-row .input-ctl {
  grid-column: 2 / 4;
  font-size: 12px;
  padding: 4px 6px;
}

.lt-map-ctrl-info {
  margin: 4px 0 8px;
  line-height: 1.45;
  color: #7dd3fc;
  font-size: 10px;
  word-break: break-word;
}

.lt-map-ctrl-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.lt-map-ctrl-actions button {
  font-size: 11px;
  padding: 4px 10px;
}

.lt-pit-panel {
  width: 200px;
  max-width: 200px;
  flex: 0 0 200px;
  align-self: stretch;
  background: #0a0c10;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 6px 6px 4px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.lt-pit-panel.is-empty {
  display: none;
}

.lt-pit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.lt-pit-count {
  font-size: 11px;
  color: #ffb300;
  font-weight: 600;
}

.lt-missing-head {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

#timing-missing-panel.is-empty {
  display: none;
}

#timing-missing-panel.is-empty + .lt-pit-wrap {
  display: none;
}

.lt-pit-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.lt-pit-table td,
.lt-pit-table th {
  padding: 3px 5px;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 72px;
}

.lt-pit-table tr td:first-child {
  font-weight: 700;
  color: #ffb300;
  width: 28px;
  max-width: 28px;
}

.lt-screen-panel.active {
  display: flex;
}

.lt-sheet-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 18px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: #0a0f14;
}

.lt-sheet-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: var(--text-dim);
}

.lt-sheet-field .select-ctl,
.lt-sheet-field .input-ctl {
  min-width: 120px;
  font-size: 12px;
}

table.timing-results-sheet {
  font-size: 11px;
  white-space: nowrap;
}

table.timing-results-sheet thead th {
  background: #1e4a7a;
  color: #fff;
  font-size: 10px;
  padding: 4px 6px;
  position: sticky;
  top: 0;
  z-index: 2;
}

table.timing-results-sheet td {
  padding: 3px 6px;
}

table.timing-results-sheet td.sector-cell {
  font-family: var(--mono);
  text-align: center;
  min-width: 52px;
}

table.timing-results-sheet td.sector-fast { color: #00e676; font-weight: 700; }
table.timing-results-sheet td.sector-slow { color: #ffb300; font-weight: 700; }
table.timing-results-sheet td.sector-empty { color: var(--text-dim); }

table.timing-results-sheet td.best-lap {
  color: #00e676;
  font-weight: 700;
}

table.timing-results-sheet .eta-countdown {
  color: #00e676;
  font-weight: 700;
}

table.timing-results-sheet .m-cell {
  text-align: center;
  width: 28px;
}

.m-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
}

.m-icon.m-track {
  color: #00e676;
  background: transparent;
  font-size: 12px;
}

.m-icon.m-pit {
  color: #fff;
  background: #3b82f6;
}

.m-icon.m-out {
  color: #111;
  background: #00e676;
}

.cls-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 700;
  color: #111;
}

.cls-tag.cls-lmp2 { background: #5a9fd4; color: #fff; }
.cls-tag.cls-lmp3 { background: #a855f7; color: #fff; }
.cls-tag.cls-lmp2am { background: #fff; color: #111; }
.cls-tag.cls-gt { background: #f97316; color: #111; }
.cls-tag.cls-hyper { background: #e10600; color: #fff; }
.cls-tag.cls-other { background: #4b5563; color: #fff; }

table.timing-results-sheet .team-cell,
table.timing-results-sheet .driver-cell,
table.timing-results-sheet .car-cell {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lt-laps-pit-title {
  margin-top: 10px;
  border-top: 1px solid var(--border);
}

.lt-laps-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.lt-laps-target-select {
  max-width: 220px;
  font-size: 12px;
}

.lt-msg-card,
.lt-results-card,
.lt-stats-official,
.lt-limits-card {
  flex: 1;
  min-height: 0;
  margin-bottom: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #000;
}

.lt-results-wrap {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
  max-height: 100%;
}

/* Overview: results grow vertically with the page, but never spill sideways
   over the pit lane column (that overlap is what broke Overview). */
.lt-main.layout-overview .lt-results-card {
  flex: 0 0 auto;
  min-width: 0;
  min-height: auto;
  overflow: hidden;
  max-width: 100%;
}

.lt-main.layout-overview .lt-results-wrap {
  flex: 0 0 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  max-height: none;
  max-width: 100%;
}

.lt-main.layout-overview #lt-screen-results {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.lt-stats-official {
  overflow-y: auto;
  padding: 8px 12px 16px;
}

.lt-stats-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 12px 0 16px;
  border-bottom: 1px solid #333;
  margin-bottom: 12px;
}

.lt-stats-col {
  font-size: 12px;
  line-height: 1.7;
  color: #ddd;
}

.lt-stats-col .stat-row { padding: 1px 0; }

.lt-stats-section {
  margin-bottom: 16px;
}

.lt-stats-section h3 {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
  padding: 4px 0;
}

.lt-stats-tbl {
  font-size: 11px;
  width: 100%;
}

.lt-stats-tbl thead th {
  background: #2a2a2a;
  color: #ccc;
  font-weight: 600;
  padding: 4px 8px;
  text-align: left;
  border-bottom: 1px solid #444;
}

.lt-stats-tbl tbody td {
  padding: 3px 8px;
  border-bottom: 1px solid #1a1a1a;
  color: #eee;
}

.lt-stats-tbl tbody tr:nth-child(even) td { background: #0d0d0d; }
.lt-stats-tbl tbody tr:nth-child(odd) td { background: #111; }

.lt-conditions {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
}

.lt-msg-card .log-feed,
.lt-messages-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.lt-messages-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.lt-messages-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #1a1a1a;
  color: #ccc;
  font-weight: 600;
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid #333;
}

.lt-messages-table tbody td {
  padding: 5px 8px;
  vertical-align: top;
  border-bottom: 1px solid #1a1a1a;
  color: #eee;
}

.lt-messages-table tbody tr:nth-child(odd) td { background: #0a0a0a; }
.lt-messages-table tbody tr:nth-child(even) td { background: #111; }
.lt-messages-table tbody tr.penalty td { background: #1a1410; }
.lt-messages-table tbody tr.flag td .lt-msg-text { color: #7dd3fc; }

.lt-msg-time {
  white-space: nowrap;
  color: #aaa;
  width: 155px;
}

.lt-msg-badge {
  width: 72px;
  text-align: center;
}

.lt-msg-penalty {
  display: inline-block;
  background: #fff;
  color: #111;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 1px;
}

.lt-msg-text {
  text-transform: uppercase;
  line-height: 1.35;
}

.lt-msg-act-col,
.lt-msg-act {
  width: 88px;
  text-align: right;
  white-space: nowrap;
}

.lt-msg-pit-btn {
  font-size: 10px;
  padding: 3px 8px;
}

.lt-msg-card .wk-lf-title,
.lt-screen-panel .wk-lf-title {
  padding: 6px 12px 4px;
  font-size: 11px;
}

table.timing-data tr.follow td { background: #1a3a52; color: var(--cyan); }
table.timing-data tr.team td { background: var(--panel-hi); }
table.timing-data tr.pit td { background: #4a1518; color: #ffdddd; }
table.timing-data tr.stripe-a td { background: var(--row-a); }
table.timing-data tr.stripe-b td { background: var(--row-b); }

table.timing-data td.sector-slow { color: var(--warning); font-weight: 700; }
table.timing-data td.sector-fast { color: var(--success); }
table.timing-data td.sector-empty { color: var(--text-dim); }

.lt-geo-badge {
  font-size: 11px;
  color: var(--success);
  padding: 0 4px;
}