/* dronedash-home.css — VERBATIM PORT of drone-dashboard's CSS files.
   Source files (combined):
     frontend/src/App.css
     frontend/src/race/LapsView.css
     frontend/src/race/LapsCardView.css
     frontend/src/race/RaceHistory.css
     frontend/src/leaderboard/Leaderboard.css
     frontend/src/pilot/PilotPage.css
     frontend/src/common/Legend.css
     frontend/src/common/patterns.css
     frontend/src/common/ChannelSquare.css
     frontend/src/common/ViewSelector.css
   Layout, class names, colors, and CSS-grid sticky-column setup match the
   original 1:1 so the Go-template recreations look identical to the React app.
*/

/* ── Color palette (matches original :root) ─────────────────────────────── */
:root {
    --fastest-lap-color: #1a472a;
    --personal-best-color: #2a2a4a;
    --overall-fastest-color: #4a1a1a;
    --overall-personal-best-color: #1a1a4a;
}

/* Scoped to #root so the dashboard's dark theme stays inside the content panel
   and doesn't restyle the surrounding club site (it renders inline via base.html,
   not in an iframe). */
#root {
    margin: 0; padding: 0;
    width: 100%;
    background-color: #242424;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── App shell + header (App.css) ───────────────────────────────────────── */
.app-shell {
    display: flex; flex-direction: column;
    background-color: #242424;
    position: relative;
}
.app-header {
    display: flex; align-items: center; gap: 12px;
    border-bottom: 1px solid #333;
    background-color: #1a1a1a;
    padding: 4px 12px;
}
.app-header-time { flex: 1; display: flex; justify-content: center; font-family: monospace; font-size: 1.1rem; color: #e0e0e0; }

.app-mobile-header {
    display: flex; align-items: center; gap: 12px;
    background-color: #1a1a1a; border-bottom: 1px solid #333;
    padding: 8px 12px;
}
.app-mobile-header .view-selector {
    flex: 1; display: flex; justify-content: space-around;
    background-color: transparent; border-bottom: none; min-width: 0;
}
.app-mobile-header .view-selector button { border-bottom: 2px solid transparent; }
.app-mobile-header .view-selector button.active { border-bottom: 2px solid #fff; }

.app-settings-button, .app-refresh-button {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 6px; border-radius: 8px;
    border: 1px solid #444; background: rgba(32,32,32,0.9);
    color: #e0e0e0; text-decoration: none;
    cursor: pointer; font-size: 1.1rem; line-height: 1;
}
.app-settings-button:hover, .app-refresh-button:hover {
    background: rgba(56,56,56,0.95); border-color: #7bc4ff; color: #fff;
}

.app-main-content {
    display: flex; justify-content: space-between; width: 100%;
    box-sizing: border-box; gap: 4px; margin-top: 12px;
    align-items: flex-start;
    padding: 0 16px;
}
.app-main-content.mobile {
    flex-direction: column; margin-top: 0; overflow-y: auto; padding: 0;
}

.app-main-left, .app-main-right {
    display: flex; flex-direction: column; min-height: 0;
}
/* Give the races/laps pane the room (it grows to fill) and cap the leaderboard,
   mirroring the local dd-pits layout (1fr + ~720px). Without this the leaderboard
   takes the larger share and the laps column is squeezed into stacking. */
.app-main-left  { flex: 1 1 auto; gap: 12px; min-width: 0; }
/* The leaderboard needs ~520px to show all 9 columns without clipping "Staging".
   A firm min-width stops the greedy races pane from starving it (it was shrinking
   to ~496px and squishing the right column off the side). */
.app-main-right { flex: 0 1 660px; min-width: 560px; max-width: 720px; }

.app-main-content.mobile .app-main-left,
.app-main-content.mobile .app-main-right {
    flex: none; width: 100%; min-width: 0;
}

.app-main-right .leaderboard-container { flex: 1; }

.app-legend {
    display: flex; justify-content: center; padding: 8px; flex-shrink: 0;
}
.app-legend-inline {
    flex-shrink: 0;
    padding: 8px 12px 12px;
    border-radius: 8px;
    background-color: #1a1a1a;
    border: 1px solid #333;
}
.app-main-content.mobile .app-legend-inline { display: none; }

.race-history-link-container {
    display: flex; justify-content: center; margin-bottom: 12px;
}
.race-history-link {
    color: #7bc4ff; text-decoration: none;
    font-size: 0.9rem; padding: 6px 16px;
    border-radius: 6px; border: 1px solid #444;
    background: rgba(32,32,32,0.9);
}
.race-history-link:hover { background: rgba(56,56,56,0.95); border-color: #7bc4ff; }

.app-right-pane-toggle {
    display: flex; gap: 8px; padding: 8px 12px; justify-content: center;
    border-bottom: 1px solid #333; background-color: #1a1a1a;
}
.app-right-pane-toggle button {
    padding: 6px 16px; border-radius: 6px;
    border: 1px solid #444; background: rgba(32,32,32,0.9);
    color: #e0e0e0; cursor: pointer; font-size: 0.95rem;
}
.app-right-pane-toggle button.active {
    background: rgba(123,196,255,0.2); border-color: #7bc4ff; color: #fff;
}

/* ── Race box (App.css + LapsView.css) ──────────────────────────────────── */
.races-container {
    flex: 1; min-width: 300px;
    display: flex; flex-direction: column;
    padding-right: 4px;
}
.race-box {
    margin-bottom: 12px; padding: 8px;
    border-radius: 8px;
    background-color: #1a1a1a;
    border: 1px solid #333;
    /* clear the sticky 64px navbar when deep-linked via #race-<id> */
    scroll-margin-top: 80px;
}
.race-box h3 { margin: 0 0 6px 0; color: #888; }
.current-race { border-color: #00ff00; background-color: #2a2a2a; }
.current-race h3 { color: #fff; margin: 0; }

.race-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 6px;
}
.race-timer {
    font-family: monospace; font-size: 24px;
    color: #00ff00; background-color: #1e2a1e;
    padding: 4px 12px; border-radius: 4px;
    min-width: 80px; text-align: right;
}

.race-info {
    display: flex; flex-direction: column; gap: 4px;
    width: 100%; overflow-x: hidden;
}
.race-number {
    font-size: 16px; font-weight: bold;
    color: #888; padding: 4px 8px; border-radius: 4px;
}
.race-bracket-link {
    font-size: 13px; font-weight: 600; white-space: nowrap;
    color: var(--color-primary, #4ea1ff); text-decoration: none;
    padding: 3px 9px; border: 1px solid currentColor; border-radius: 999px;
}
.race-bracket-link:hover { text-decoration: underline; }

/* ── Generic Table (.gt) — used by both LapsView and Leaderboard ────────── */
.gt {
    width: 100%;
    --table-bg-odd:  #1a1a1a;
    --table-bg-even: #222;
    --table-bg-hover:#2a2a2a;
}
.gt-header {
    background-color: #333; font-weight: bold;
    display: grid;
    position: sticky; top: 0; z-index: 3;
}
.gt-header > * {
    padding: 4px 8px; border: 1px solid black;
    font-size: 0.9rem;
}
.gt-body { position: relative; }
.gt-row {
    background-color: var(--row-bg, var(--table-bg-odd));
    display: grid;
    transition: transform 0.3s ease-out;
}
.gt-row.row-odd  { --row-bg: var(--table-bg-odd); }
.gt-row.row-even { --row-bg: var(--table-bg-even); }
.gt-row:hover    { background-color: var(--table-bg-hover); }
.gt-cell {
    border: 1px solid black; padding: 4px 8px;
    overflow: hidden; position: relative;
    font-family: monospace; font-size: 0.85rem;
    display: flex; align-items: center;
}

/* Sticky first columns — Leaderboard: position(32px), pilot(left:32px) */
.leaderboard-table .gt-cell[data-col='position'] {
    position: sticky; left: 0; z-index: 2;
    background: var(--row-bg, var(--table-bg-odd));
}
.leaderboard-table .gt-cell[data-col='pilot'] {
    position: sticky; left: 32px; z-index: 2;
    background: var(--row-bg, var(--table-bg-odd));
    white-space: nowrap;
}
.leaderboard-table .gt-header [data-col='position'] {
    position: sticky; left: 0; z-index: 4; background: #333;
}
.leaderboard-table .gt-header [data-col='pilot'] {
    position: sticky; left: 32px; z-index: 4; background: #333;
}

/* Horizontal scroll for the laps grid: as a race runs past the columns that
   fit, the table scrolls sideways instead of clipping. The laps table sizes to
   its content (max-content) so the extra lap columns create scrollable width;
   JS keeps the latest lap in view, and the pos/name columns stay pinned via the
   sticky rules below. Scoped to .laps-table so the leaderboard is unaffected. */
.laps-view-desktop { overflow-x: auto; overflow-y: hidden; }
.gt.laps-table { width: max-content; min-width: 100%; }

/* Sticky first columns — Laps table: pos(56px), name(left:56px) */
.laps-table .gt-cell[data-col='pos'] {
    position: sticky; left: 0; z-index: 2;
    background: var(--row-bg, var(--table-bg-odd));
}
.laps-table .gt-cell[data-col='name'] {
    position: sticky; left: 56px; z-index: 2;
    background: var(--row-bg, var(--table-bg-odd));
    white-space: nowrap;
}
.laps-table .gt-header [data-col='pos']  { position: sticky; left: 0;   z-index: 4; background: #333; }
.laps-table .gt-header [data-col='name'] { position: sticky; left: 56px; z-index: 4; background: #333; }

/* Lap-cell highlight overlays. Class names must match highlightFor() output:
   overall-best / overall-pb / race-best / race-pb. */
.laps-table .gt-cell > .lap-overall-best,
.laps-table .gt-cell > .lap-overall-pb,
.laps-table .gt-cell > .lap-race-best,
.laps-table .gt-cell > .lap-race-pb,
.laps-table .gt-cell > .pattern-hatched {
    position: absolute; inset: 0;
    display: flex; align-items: center; padding: 4px 8px;
    box-sizing: border-box;
}

.lap-overall-best { background-color: var(--overall-fastest-color); }          /* dark red */
.lap-overall-pb   { background-color: var(--overall-personal-best-color); }    /* purple */
.lap-race-best    { background-color: var(--fastest-lap-color); }              /* green */
.lap-race-pb      { background-color: var(--personal-best-color); }            /* blue */

/* ── Leaderboard container (Leaderboard.css) ────────────────────────────── */
.leaderboard-container {
    flex: 1; min-width: 300px;
    margin-left: 0; margin-bottom: 12px;
    padding: 8px; border-radius: 8px;
    background-color: #1a1a1a; border: 1px solid #333;
    display: flex; flex-direction: column;
    gap: 6px;
}
.leaderboard-table-viewport {
    position: relative; display: flex; flex-direction: column;
    overflow-x: auto; /* wide columns (Next In) scroll; page handles vertical */
}
.leaderboard-table-viewport .leaderboard-table {
    flex: 1; display: flex; flex-direction: column; min-height: 0;
}
/* Size the grid to its content so the fixed-width columns create horizontal
   scroll width instead of being clipped; the position/pilot columns stay pinned
   via the sticky rules above. */
.leaderboard-table-viewport .gt { width: max-content; min-width: 100%; }
.leaderboard-table-viewport .leaderboard-table .gt-scroll {
    flex: 1; min-height: 0; overflow: auto;
    scrollbar-gutter: stable;
}
.leaderboard-pilot-link {
    color: inherit; text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
}
.leaderboard-pilot-link:hover { text-decoration: underline; }

/* Status text */
.racing-text { color: #00ff00; font-weight: bold; }
.next-text   { color: #ffa500; font-weight: bold; }
.done-text   { color: #888;    font-style: italic; }

.position-container { display: flex; flex-direction: column; align-items: center; }
.position-change { animation: fadeIn 0.5s ease-in; font-size: 0.8em; margin-top: 2px; color: #00ff00; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Channel square (ChannelSquare.css) ─────────────────────────────────── */
.channel-square {
    width: 16px; height: 16px;
    border: 1px solid #666;
    margin-left: 4px;
    display: inline-block; vertical-align: middle;
}
.channel-display { display: flex; align-items: center; gap: 4px; }

/* ── Mobile lap cards (LapsCardView.css) ────────────────────────────────── */
.laps-cards {
    display: flex; flex-direction: column; gap: 6px; padding: 4px;
}
.pilot-card {
    background: var(--table-bg-odd, #1a1a1a);
    border: 1px solid #333; border-radius: 8px;
    padding: 8px 10px;
    display: flex; flex-direction: column; gap: 6px;
}
.pilot-card-header {
    display: flex; align-items: center; gap: 8px; min-height: 28px;
}
.pilot-card-pos { font-weight: 700; font-size: 1rem; color: #ddd; min-width: 32px; }
.pilot-card-name {
    flex: 1; font-weight: 600; font-size: 0.95rem; color: #e2e8f0;
    text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.pilot-card-name:hover { color: #fff; text-decoration: underline; }
.pilot-card-channel {
    display: flex; align-items: center; gap: 4px;
    font-size: 0.85rem; color: #888; flex-shrink: 0;
}
.pilot-card-laps { display: flex; flex-wrap: wrap; gap: 4px; }
.lap-badge {
    display: flex; flex-direction: column; align-items: center;
    min-width: 52px; padding: 3px 6px;
    border-radius: 6px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
}
.lap-badge-label {
    font-size: 0.65rem; text-transform: uppercase;
    color: #888; letter-spacing: 0.5px;
    line-height: 1; margin-bottom: 1px;
}
.lap-badge-value {
    font-size: 0.85rem; font-weight: 500;
    font-variant-numeric: tabular-nums; color: #e2e8f0;
}
.total-badge { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.15); }
.total-badge .lap-badge-value { font-weight: 700; }

/* Time-trial best-X-consecutive + PB columns (desktop) and badges (mobile). */
.laps-table .gt-header [data-col='consec'],
.laps-table .gt-cell[data-col='consec'] { color: #b6e925; font-weight: 600; }
.laps-table .gt-header [data-col='pb'],
.laps-table .gt-cell[data-col='pb'] { color: #b388ff; font-weight: 600; }
.consec-badge { background: rgba(182,233,37,0.12); border-color: rgba(182,233,37,0.3); }
.consec-badge .lap-badge-value { color: #b6e925; font-weight: 700; }
.pb-badge { background: rgba(179,136,255,0.12); border-color: rgba(179,136,255,0.3); }
.pb-badge .lap-badge-value { color: #b388ff; font-weight: 700; }

.lap-badge.lap-race-best     { background-color: var(--fastest-lap-color); border-color: rgba(26,71,42,0.6); }
.lap-badge.lap-race-pb       { background-color: var(--personal-best-color); border-color: rgba(42,42,74,0.6); }
.lap-badge.lap-overall-best  { background-color: var(--overall-fastest-color); border-color: rgba(74,26,26,0.6); }
.lap-badge.lap-overall-pb    { background-color: var(--overall-personal-best-color); border-color: rgba(26,26,74,0.6); }
.lap-badge.pattern-hatched {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 3px,
        rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.04) 6px);
}

/* ── Pattern (patterns.css) ─────────────────────────────────────────────── */
.pattern-hatched {
    background-image: repeating-linear-gradient(45deg,
        rgba(0,0,0,0.2), rgba(0,0,0,0.2) 2px,
        transparent 2px, transparent 4px);
}

/* ── Legend (Legend.css) ────────────────────────────────────────────────── */
.legend-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px; width: 100%;
}
.legend-item {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.85rem; color: #ccc;
}
.legend-square { width: 16px; height: 16px; }
.legend-square-fastest-overall       { background-color: var(--fastest-lap-color); }
.legend-square-personal-best         { background-color: var(--personal-best-color); }
.legend-square-overall-fastest       { background-color: var(--overall-fastest-color); }
.legend-square-overall-personal-best { background-color: var(--overall-personal-best-color); }

/* ── ViewSelector (ViewSelector.css) ────────────────────────────────────── */
.view-selector {
    display: flex; justify-content: space-around;
    background-color: #1a1a1a; border-bottom: 1px solid #333;
}
.view-selector button {
    flex: 1; padding: 8px; min-height: 44px;
    background: none; color: #fff;
    border: none; border-bottom: 2px solid transparent;
    cursor: pointer; font-family: inherit; font-size: 1rem;
}
.view-selector button.active { border-bottom: 2px solid #fff; }

/* ── Race history (RaceHistory.css) ─────────────────────────────────────── */
.race-history-page {
    display: flex; flex-direction: column;
    height: 100vh; background-color: #242424;
    overflow-y: auto; padding: 12px 16px; gap: 12px;
}
.race-history-header {
    display: flex; align-items: center; gap: 16px; flex-shrink: 0;
}
.race-history-header h2 { margin: 0; color: #e0e0e0; font-size: 1.25rem; }
.race-history-back {
    color: #7bc4ff; text-decoration: none;
    font-size: 0.95rem; padding: 6px 12px;
    border-radius: 6px; border: 1px solid #444;
    background: rgba(32,32,32,0.9);
}
.race-history-back:hover { background: rgba(56,56,56,0.95); border-color: #7bc4ff; }
.race-history-filter {
    flex-shrink: 0; padding: 10px 12px;
    border-radius: 8px; background-color: #1a1a1a; border: 1px solid #333;
}
.race-history-filter-label { font-size: 0.85rem; color: #888; margin-bottom: 8px; }
.race-history-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.race-history-chip {
    padding: 4px 12px; border-radius: 16px;
    border: 1px solid #444; background: rgba(32,32,32,0.9);
    color: #e0e0e0; cursor: pointer; font-size: 0.85rem;
    font-family: inherit;
}
.race-history-chip:hover { background: rgba(56,56,56,0.95); border-color: #666; }
.race-history-chip.active {
    background: rgba(123,196,255,0.2); border-color: #7bc4ff; color: #fff;
}
.race-history-chip.clear { border-color: rgba(239,68,68,0.5); color: #fca5a5; }
.race-history-list { display: flex; flex-direction: column; gap: 12px; }

/* ── Pilot page (PilotPage.css) ─────────────────────────────────────────── */
.pilot-page {
    display: flex; flex-direction: column; gap: 16px; padding: 16px;
    max-width: 1200px; margin: 0 auto;
}
.pilot-header { display: flex; flex-direction: column; gap: 12px; }
.pilot-header-main { display: flex; flex-direction: column; gap: 4px; }
.pilot-back-link { color: #9ba3ff; text-decoration: none; font-size: 0.9rem; }
.pilot-header-main h1 { margin: 0; font-size: 2rem; line-height: 1.2; }
.pilot-given-name { font-size: 1rem; color: #bbb; }
.pilot-header-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.pilot-meta-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 10px; background-color: rgba(255,255,255,0.06);
    border-radius: 999px; font-size: 0.9rem;
}
.pilot-stat-grid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.pilot-stat-card {
    background-color: rgba(255,255,255,0.04);
    border-radius: 12px; padding: 12px;
    display: flex; flex-direction: column; gap: 4px;
}
.pilot-stat-label { font-size: 0.85rem; color: #9ba3ff; text-transform: uppercase; letter-spacing: 0.04em; }
.pilot-stat-value { font-size: 1.3rem; font-weight: 600; }
.pilot-stat-subtitle { font-size: 0.85rem; color: #bbb; }
.pilot-tabs {
    display: flex; gap: 4px;
    background-color: rgba(255,255,255,0.04);
    border-radius: 999px; padding: 4px;
    align-self: flex-start;
}
.pilot-tabs button {
    border: none; background: none; color: #fff;
    padding: 8px 16px; border-radius: 999px;
    cursor: pointer; font-size: 0.95rem; font-family: inherit;
}
.pilot-tabs button.active { background-color: #9ba3ff; color: #0d0d0d; font-weight: 600; }
.pilot-tab-panel {
    background-color: rgba(0,0,0,0.35);
    border-radius: 16px; padding: 16px; min-height: 240px;
}
.pilot-tab-panel[hidden] { display: none; }

.pilot-analytics-tab { display: flex; flex-direction: column; gap: 16px; }
.pilot-analytics-controls {
    display: flex; flex-wrap: wrap; gap: 16px;
    justify-content: space-between; align-items: center;
}
.pilot-overlay-toggles { display: flex; flex-wrap: wrap; gap: 12px; }
.pilot-overlay-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.9rem; color: #ddd;
}
.pilot-overlay-toggle input { accent-color: #9ba3ff; }
.pilot-analytics-chart-area {
    position: relative; height: clamp(280px, 50vh, 420px);
}
.pilot-analytics-chart-wrapper {
    position: relative; width: 100%; height: 100%;
    background: rgba(12,12,18,0.65);
    border-radius: 16px; overflow: hidden;
}

@media (min-width: 768px) {
    .pilot-header { flex-direction: row; justify-content: space-between; align-items: flex-end; }
    .pilot-header-main { max-width: 60%; }
}

/* ── Mobile bottom nav (custom — no equivalent in original; small helper) ─ */
.mobile-bottom-nav {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    background: #050505; border-top: 1px solid #333;
    padding: 6px 0 8px 0; justify-content: space-around;
    z-index: 10;
}
.mobile-bottom-nav a {
    color: #888; text-align: center; text-decoration: none;
    font-size: 0.7rem; display: flex; flex-direction: column;
    align-items: center; gap: 3px; padding: 4px 12px;
}
.mobile-bottom-nav a.active { color: #ff5757; }
.mobile-bottom-nav-icon { font-size: 1.2rem; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .app-settings-button, .app-refresh-button { padding: 5px; }
}

/* Hide desktop layout on mobile, show mobile layout. */
@media (max-width: 960px) {
    .app-main-content { flex-direction: column; padding: 0; padding-bottom: 80px; overflow-y: auto; }
    .app-main-left, .app-main-right { flex: none; width: 100%; max-width: none; min-width: 0; }
    .app-main-content > .app-legend-inline { display: none; }
    .laps-view-desktop { display: none; }
    .laps-view-mobile  { display: block; }
    .mobile-bottom-nav { display: flex; }
    .desktop-only      { display: none !important; }
}
@media (min-width: 961px) {
    .laps-view-mobile  { display: none; }
    .mobile-only       { display: none !important; }
}

.dd-pane[hidden] { display: none !important; }

/* Brief highlight when a row receives a live lap update via SSE. */
@keyframes ddFlash { from { background: rgba(0, 200, 120, 0.28); } to { background: transparent; } }
.dd-flash { animation: ddFlash 0.5s ease-out; }

/* ── Event switcher (cog dropdown in the dashboard header) ───────────────── */
.dd-event-picker { position: relative; display: inline-block; }
.dd-event-picker > summary { list-style: none; cursor: pointer; }
.dd-event-picker > summary::-webkit-details-marker { display: none; }
.dd-event-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
    min-width: 240px; max-height: 60vh; overflow-y: auto;
    background: #1e1e1e; border: 1px solid #333; border-radius: 8px;
    padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.dd-event-menu-title { color: #888; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; padding: 4px 8px; }
.dd-event-item {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 10px; border-radius: 6px; color: #ddd; text-decoration: none; font-size: .9rem;
}
.dd-event-item:hover { background: #2a2a2a; }
.dd-event-item.selected { background: #243524; color: #fff; font-weight: 600; }
.dd-event-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-event-live { color: #00ff00; font-size: .72rem; white-space: nowrap; }

/* ── Inline lap pills (Laps column) — mirrors the local dd-pits dashboard ──── */
/* Laps now render inline in one flexible Laps column instead of fixed L1..Ln
   columns, so the table fits the container (no horizontal scroll) and every lap
   is shown (no target cap). */
.gt.laps-table { width: 100%; min-width: 0; }
.laps-view-desktop { overflow-x: hidden; }
/* Tighter cells in the laps table so columns claim less width and the Laps
   column gets more room for pills to sit side-by-side. */
.laps-table .gt-cell { padding: 3px 5px; }
.laps-table .gt-header > * { padding: 3px 5px; }
.laps-table .gt-cell[data-col='name'] { font-size: 0.82rem; }
.laps-table .gt-cell.laps-cell { overflow: visible; padding: 3px 4px; }
.laps-cell .laps { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; width: 100%; }
.laps-cell .lap {
    display: inline-block; background: #0f1115; border: 1px solid #3a4049;
    border-radius: 5px; padding: 1px 4px; min-width: 2.6rem; text-align: center;
    font-variant-numeric: tabular-nums; color: #e8eaed; line-height: 1.45; font-size: 0.8rem;
}
/* Highlighted laps (race/overall best/pb) keep their accent background on the
   pill; the absolute-overlay rule above only targets direct .gt-cell children,
   so nested pills are unaffected by it. */
.laps-cell .lap.lap-race-best   { border-color: rgba(52,211,153,0.5); }
.laps-cell .lap.lap-race-pb     { border-color: rgba(96,125,255,0.5); }
.laps-cell .lap.lap-overall-best{ border-color: rgba(220,80,80,0.6); }
.laps-cell .lap.lap-overall-pb  { border-color: rgba(150,120,255,0.6); }
/* Rows grow to fit wrapped laps. */
.laps-table .gt-row { align-items: stretch; }
.laps-table .gt-cell { align-items: center; }
/* The laps table no longer scrolls horizontally (laps wrap), so the pos/name
   sticky columns from the old column-scroll layout are unneeded — and their
   fixed left offsets (left:56px) overlap the Chan column now that Pos is
   narrower. Pin them back to normal flow. */
.laps-table .gt-cell[data-col='pos'],
.laps-table .gt-cell[data-col='name'],
.laps-table .gt-header [data-col='pos'],
.laps-table .gt-header [data-col='name'] { position: static; }
.laps-table .gt-cell[data-col='name'] { overflow: hidden; text-overflow: ellipsis; }

/* ════════════════════════════════════════════════════════════════════════════
   Local dd-pits visual parity. The integrated cloud home should look identical
   to the offline dd-pits dashboard (cmd/dd-pits/localserver.go) and to the
   surrounding dronedash-base.html chrome: rounded panels on #0f1115, transparent
   table headers with muted uppercase labels, bottom-border row separators (no
   boxed grid), numbered position badges with gold/silver/bronze top-3, tight
   inline lap pills, and green/purple consec+PB chips. The base template already
   exposes --dd-bg/--dd-panel/--dd-line/--dd-txt/--dd-muted/--accent; these rules
   consume them so the content panel stops reverting to the old React palette.
   Appended last so they override the verbatim React port above.
   ════════════════════════════════════════════════════════════════════════════ */
#root {
    --dd-panel2: #23272f;
    --accent: var(--color-primary, #ff4d4d);
    background-color: var(--dd-bg, #0f1115);
    color: var(--dd-txt, #e8eaed);
    font: 15px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
}
.app-shell { background-color: var(--dd-bg, #0f1115); }
.app-header, .app-mobile-header { background-color: #13151a; border-bottom-color: var(--dd-line, #313742); }
.app-header-time { color: var(--dd-muted, #9aa3af); font-size: 1rem; }

/* Cards / panels → local .card (14px radius, subtle shadow). */
.race-box, .leaderboard-container, .app-legend-inline {
    background-color: var(--dd-panel, #1b1e24);
    border: 1px solid var(--dd-line, #313742);
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.race-box { padding: 1rem 1.1rem; margin-bottom: 1rem; }
.race-box h3 { color: var(--dd-muted, #9aa3af); font-size: 1.15rem; font-weight: 800; }
.current-race { border-color: var(--accent); background-color: var(--dd-panel, #1b1e24); }
.current-race h3 { color: var(--dd-txt, #e8eaed); }
.race-number { color: var(--dd-muted, #9aa3af); font-weight: 700; padding: 0; }
.race-timer { color: var(--accent); background: transparent; padding: 0; font-size: 1.3rem; font-weight: 800; }

/* Tables (.gt grids for laps + leaderboard) → local look: transparent header
   with muted uppercase labels, bottom-border rows, no boxed cell borders. */
.gt { --table-bg-odd: var(--dd-panel, #1b1e24); --table-bg-even: var(--dd-panel, #1b1e24); --table-bg-hover: var(--dd-panel2, #23272f); }
.gt-header { background-color: transparent; }
.gt-header > * {
    border: none; border-bottom: 1px solid var(--dd-line, #313742);
    background-color: var(--dd-panel, #1b1e24);
    color: var(--dd-muted, #9aa3af); font-weight: 700;
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: .04em;
    padding: .4rem .5rem;
}
.gt-cell {
    border: none; border-bottom: 1px solid #262b33;
    color: var(--dd-txt, #e8eaed); font-size: 0.85rem; padding: .4rem .5rem;
}
.gt-row:hover { background-color: var(--table-bg-hover, #23272f); }
/* Sticky-column masks now use the panel colour. */
.leaderboard-table .gt-header [data-col='position'],
.leaderboard-table .gt-header [data-col='pilot'],
.laps-table .gt-header [data-col='pos'],
.laps-table .gt-header [data-col='name'] { background: var(--dd-panel, #1b1e24); }

/* Position badges → local .pos (gold / silver / bronze top-3). */
.dd-pos {
    display: inline-block; min-width: 1.5rem; text-align: center;
    font-weight: 800; border-radius: 7px; padding: .1rem .25rem;
    background: #3a4049; color: var(--dd-txt, #e8eaed);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
}
.dd-pos.p1 { background: linear-gradient(180deg,#ffd95e,#e0a800); color:#2a2000; }
.dd-pos.p2 { background: linear-gradient(180deg,#dbe1ea,#9aa6b6); color:#1b1f25; }
.dd-pos.p3 { background: linear-gradient(180deg,#e8a064,#c06a2c); color:#241200; }
/* Leaderboard reorders rows in the DOM (JS keeps them rank-sorted), so colour
   the top-3 badges by DOM position rather than a server-rendered class. */
.leaderboard-table .gt-body .gt-row:nth-child(1) .dd-pos { background: linear-gradient(180deg,#ffd95e,#e0a800); color:#2a2000; }
.leaderboard-table .gt-body .gt-row:nth-child(2) .dd-pos { background: linear-gradient(180deg,#dbe1ea,#9aa6b6); color:#1b1f25; }
.leaderboard-table .gt-body .gt-row:nth-child(3) .dd-pos { background: linear-gradient(180deg,#e8a064,#c06a2c); color:#241200; }
/* The leaderboard position track is narrow (~30px) — shrink the badge + cell
   padding so it fits without clipping. */
.leaderboard-table .dd-pos { min-width: 0; padding: .05rem .22rem; font-size: .8rem; }
.leaderboard-table .gt-cell[data-col='position'],
.leaderboard-table .gt-header [data-col='position'] { padding-left: 3px; padding-right: 3px; justify-content: center; }

/* Channel marker → round dot like local. */
.channel-square {
    border-radius: 50%; width: .8rem; height: .8rem;
    border: 1px solid rgba(255,255,255,.35);
}

/* Lap pills → local sizing/colours. */
.laps-cell .laps { gap: .3rem; }
.laps-cell .lap {
    background: #0f1115; border: 1px solid #3a4049; border-radius: 6px;
    padding: .1rem .4rem; min-width: 3.4rem; font-size: .82rem; line-height: 1.45;
}
.laps-cell .lap.lap-race-best,
.laps-cell .lap.lap-overall-best { border-color: #34c759; color: #9be7ad; }

/* Consec + PB → local green/purple chips. */
.dd-chip {
    display: inline-block; font-size: .74rem; font-weight: 700;
    padding: .12rem .5rem; border-radius: 999px;
    background: #343b45; color: #cfd5dd; font-variant-numeric: tabular-nums;
}
.dd-chip.consec { background: #16432a; color: #76e29a; }
.dd-chip.pb { background: #2d2440; color: #b9a3ff; }

/* Next-races pilot chips → local panel2 pill. */
.races-container .pilot-meta-chip {
    background: var(--dd-panel2, #23272f);
    border: 1px solid var(--dd-line, #313742);
}

/* Leaderboard status text → local accent / green. */
.racing-text { color: #76e29a; }
.next-text   { color: var(--accent); }

/* Leaderboard heading → local "Leaderboard best lap" card title. */
.leaderboard-title { margin: .1rem 0 .5rem; font-size: 1.15rem; font-weight: 800; color: var(--dd-txt, #e8eaed); }
.leaderboard-sub { color: var(--dd-muted, #9aa3af); font-size: .85rem; font-weight: 400; }

/* Keep ALL the cloud functionality — clock, refresh, event switcher, and the
   lap-colour legend — just restyle the bar to the local dark theme instead of
   the old React chrome. The header is slim, transparent and right-aligned; the
   clock sits small + muted beside the controls rather than as a big centre
   monospace block. */
.app-header {
    background: transparent; border-bottom: none;
    padding: .5rem 1.4rem .1rem; gap: .6rem;
    justify-content: flex-end; align-items: center;
}
.app-header-time {
    flex: none; font-size: .9rem;
    color: var(--dd-muted, #9aa3af);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.app-main-content { margin-top: 4px; }
/* Control buttons (refresh / event-switcher cog) → dark theme. */
.app-refresh-button, .app-settings-button {
    background: var(--dd-panel2, #23272f); border-color: var(--dd-line, #313742);
    color: var(--dd-txt, #e8eaed);
}
.app-refresh-button:hover, .app-settings-button:hover {
    background: var(--dd-panel2, #23272f); border-color: var(--accent); color: var(--accent);
}
.dd-event-menu { background: var(--dd-panel, #1b1e24); border-color: var(--dd-line, #313742); }
.dd-event-item:hover { background: var(--dd-panel2, #23272f); }
.dd-event-item.selected { background: #1d2a20; }

/* Leaderboard now uses fluid fr columns (template), so it should fill the pane
   exactly rather than size to max-content (which forced horizontal scroll and
   clipped the "Next Race In" column). border-box keeps cell padding inside the
   track so it can't re-expand the grid. */
.gt-cell, .gt-header > * { box-sizing: border-box; }
.leaderboard-table-viewport { overflow-x: hidden; }
.leaderboard-table-viewport .gt { width: 100%; min-width: 0; }

/* Live badge → local green pill on the running current race. */
.dd-live {
    display: inline-block; margin-left: .4rem; vertical-align: middle;
    font-size: .7rem; font-weight: 700; letter-spacing: .03em;
    padding: .12rem .5rem; border-radius: 999px;
    background: #16432a; color: #76e29a;
}

/* Race header: the Edit button's margin-left:auto collapses flex free space, so
   add an explicit gap so the title and round label don't jam together (local
   keeps a clear space between "Current Race" and "Round 6 — Race 1"). */
.race-header { gap: .55rem; flex-wrap: wrap; }
.race-number { font-weight: 500; font-size: .92rem; }

/* Leaderboard has 9 fixed-ish columns in a ~560px pane — tighten horizontal cell
   padding so every value (esp. "Staging" in Next Race In) fits without clipping. */
.leaderboard-table .gt-cell,
.leaderboard-table .gt-header > * { padding-left: 5px; padding-right: 5px; }