/* ═══════════════════════════════════════════════════════════════════════════
   AMS Engineering Platform - Live Telemetry Dashboard
   Dark theme, mobile-first, F1-inspired design
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Reset & Base ───────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg-primary: #0a0a0f;
    --bg-card: #12121a;
    --bg-input: #1a1a24;
    --bg-hover: #1e1e2a;
    --border: #2a2a3a;
    --border-light: #333348;
    --text-primary: #e0e0e0;
    --text-secondary: #888899;
    --text-muted: #555566;

    --red: #ff1801;
    --red-dark: #cc1400;
    --green: #00d45a;
    --yellow: #ffc800;
    --blue: #0090ff;
    --orange: #ff8c00;
    --purple: #a855f7;
    --cyan: #06b6d4;

    /* Tyre colours */
    --tyre-soft: #ff1801;
    --tyre-medium: #ffc800;
    --tyre-hard: #e0e0e0;
    --tyre-inter: #00d45a;
    --tyre-wet: #0090ff;

    --radius: 8px;
    --radius-sm: 4px;
    --topbar-height: 48px;

    /* Semantic aliases */
    --bg-body: #0e0e14;
    --warning: #ffc800;
    --success: #00d45a;
    --danger: var(--red);
    --accent: var(--red);
    --text: var(--text-primary);
    --bg: var(--bg-primary);
    --surface: var(--bg-card);
}

html {
    font-size: 14px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: clip;
}

/* ─── Typography ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4 { font-weight: 600; }
h2 { font-size: 16px; margin-bottom: 12px; }
h3 { font-size: 14px; margin-bottom: 8px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }

.text-muted { color: var(--text-muted); font-size: 13px; }

/* ─── Top Bar ────────────────────────────────────────────────────────────── */
#topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--topbar-height);
    padding: 0 16px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}

.topbar-left, .topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.topbar-center { flex: 1; text-align: center; min-width: 0; overflow: hidden; }

.brand-link {
    text-decoration: none;
    color: inherit;
}
.brand-link:hover { opacity: 0.85; }
.brand {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}
.brand span { color: var(--red); }

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(255, 24, 1, 0.15);
    color: var(--red);
}
.user-info { display: flex; align-items: center; gap: 6px; }
.user-avatar { width: 24px; height: 24px; border-radius: 50%; }
.user-name { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }

/* ── View-Only Banner ──────────────────────────────────────────── */
.view-only-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 12px 16px;
    padding: 14px 20px;
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.08) 0%, rgba(255, 24, 1, 0.06) 100%);
    border: 1px solid rgba(88, 101, 242, 0.2);
    border-radius: var(--radius);
}
.vo-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(88, 101, 242, 0.15);
    color: #7983f5;
}
.vo-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.vo-text strong {
    font-size: 14px;
    color: var(--text-primary);
}
.vo-text span {
    font-size: 12px;
    color: var(--text-secondary);
}
.vo-cta {
    flex-shrink: 0;
    padding: 8px 20px;
    background: var(--red);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background 0.15s, transform 0.1s;
}
.vo-cta:hover {
    background: #e01600;
    transform: translateY(-1px);
}
@media (max-width: 600px) {
    .view-only-banner {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 14px;
    }
    .vo-cta {
        width: 100%;
        text-align: center;
    }
}

.session-status {
    font-size: 13px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.session-status.offline { background: rgba(85, 85, 102, 0.2); color: var(--text-muted); }
.session-status.live { background: rgba(0, 212, 90, 0.15); color: var(--green); }
.session-status.spectating { background: rgba(90, 120, 255, 0.15); color: #7983f5; }

/* Join Session Card */
#join-session-card .form-row { margin-bottom: 0; }
#join-session-card .input { max-width: 200px; letter-spacing: 4px; font-size: 18px; text-align: center; font-weight: 600; }

.data-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: rgba(6, 182, 212, 0.1);
    color: var(--cyan);
    font-variant-numeric: tabular-nums;
}

.ws-badge {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
}
.ws-badge.disconnected { background: rgba(255, 24, 1, 0.2); color: var(--red); }
.ws-badge.connected { background: rgba(0, 212, 90, 0.2); color: var(--green); }

/* ─── Buttons ──────────────────────────────────────────────────────────────
   Single button system. Variant (primary / secondary / ghost / accent /
   danger) sets colour; size (default / .btn-sm) sets padding+font. Every
   button inherits:
     - keyboard focus ring (WCAG + feels polished)
     - :active press state (button responds to your tap)
     - :disabled state (greyed out, ignores pointer)
     - single 150ms transition timing (no "all 0.15s" shotgun)
   Icon-only variant: add .btn-icon for a square target.
   ────────────────────────────────────────────────────────────────────── */
.btn, .btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    border-radius: var(--radius);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    transition:
        background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color    150ms cubic-bezier(0.4, 0, 0.2, 1),
        color           150ms cubic-bezier(0.4, 0, 0.2, 1),
        transform       100ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow      150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.btn { padding: 10px 20px; font-size: 14px; }
.btn-sm { padding: 4px 12px; font-size: 12px; border-radius: var(--radius-sm); }

/* Square icon-only buttons (e.g. refresh ↻, close ×). Use with .btn-sm. */
.btn-icon { padding: 4px; width: 24px; height: 24px; }
.btn .btn-icon,
.btn-sm .btn-icon { flex: none; }

/* Keyboard focus ring — visible only for keyboard users (focus-visible),
   never on mouse clicks. 2px cyan at 2px offset, bright against the
   dark background. */
.btn:focus-visible, .btn-sm:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--bg, #0a0a14), 0 0 0 4px var(--cyan);
}

/* Tactile press — subtle, not a bounce */
.btn:active, .btn-sm:active { transform: translateY(1px); }

/* Disabled — applies to both :disabled and aria-disabled="true" */
.btn:disabled, .btn-sm:disabled,
.btn[aria-disabled="true"], .btn-sm[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-primary   { background: var(--red); color: white; }
.btn-primary:hover   { background: var(--red-dark); }

.btn-secondary { background: var(--bg-hover); color: var(--text-primary); border: 1px solid var(--border-light); }
.btn-secondary:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); }

.btn-ghost     { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover     { color: var(--text-primary); background: var(--bg-hover); }

.btn-accent    { background: var(--cyan); color: #0a0a14; font-weight: 700; }
.btn-accent:hover    { background: #22d3ee; }

.btn-danger    { background: rgba(255, 24, 1, 0.15); color: var(--red); }
.btn-danger:hover    { background: rgba(255, 24, 1, 0.25); }

/* ─── Badges / chips ───────────────────────────────────────────────────────
   Small coloured pills for counts, session tags, tyre compounds, status.
   Base = muted; variants colour-code by meaning (success / warning /
   danger / info) or by domain (tyre compound). Use .badge + variant.
   Sizing lives on the base; variants only set colour. Heights match
   .btn-sm so they align inline in table rows.
   ────────────────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 999px;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    border: 1px solid transparent;
}
.badge-dot::before {
    content: '';
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

.badge-primary { background: rgba(230, 51, 34, 0.14); color: var(--red); }
.badge-success { background: rgba(0, 212, 85, 0.14);  color: var(--green); }
.badge-warning { background: rgba(255, 200, 0, 0.14); color: var(--yellow, #ffc800); }
.badge-danger  { background: rgba(255, 24, 1, 0.14);  color: var(--red); }
.badge-info    { background: rgba(59, 130, 246, 0.14); color: #3b82f6; }
.badge-quali   { background: rgba(168, 85, 247, 0.14); color: #a855f7; }
.badge-accent  { background: rgba(6, 182, 212, 0.14); color: var(--cyan); }
.badge-muted   { background: rgba(255, 255, 255, 0.04); color: var(--text-muted); }

/* Tyre compound badges — subtle coloured fills, not the nuclear
   saturated ones some F1 apps use. Readable against dark bg. */
.badge-tyre-soft   { background: rgba(239, 68, 68, 0.18);  color: #fca5a5; }
.badge-tyre-medium { background: rgba(234, 179, 8, 0.18);  color: #fde68a; }
.badge-tyre-hard   { background: rgba(203, 213, 225, 0.14); color: #e2e8f0; }
.badge-tyre-inter  { background: rgba(34, 197, 94, 0.16);  color: #86efac; }
.badge-tyre-wet    { background: rgba(59, 130, 246, 0.16); color: #93c5fd; }

/* Outline variant — less fill, more stroke. Useful for dense tables. */
.badge-outline { background: transparent; border-color: var(--border-light); }

/* ─── Section / track headings ────────────────────────────────────────────
   Lap Leaderboard, Best Laps, ERS Maps, Wear Maps — each groups rows by
   track. The old treatment was a cyan 14px bold heading which looked
   like a link (it isn't). New treatment: strong white label with a
   small cyan left accent bar — the cyan communicates "this is
   navigational chrome" without pretending to be clickable. Matches the
   sidebar active-item accent pattern for visual consistency. */
.section-track-heading {
    margin: 0 0 10px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    border-left: 3px solid var(--cyan);
    padding-left: 10px;
    letter-spacing: 0.01em;
}
.section-track-heading .section-track-heading__sub {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
}

/* ─── Inputs ───────────────────────────────────────────────────────────────
   Focus uses cyan (interactive colour), not brand red. Brand red is for
   errors and destructive actions; using it on every search bar focus
   trained the eye to ignore it. Cyan matches the button focus-ring +
   links + selection highlight — a consistent "this is interactive" cue.
   ────────────────────────────────────────────────────────────────────── */
.input, .input-sm {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition:
        border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow   150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.input { padding: 10px 14px; }
.input-sm { padding: 4px 10px; font-size: 12px; border-radius: var(--radius-sm); }
.input:focus, .input-sm:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.15);
}
.input::placeholder, .input-sm::placeholder { color: var(--text-muted); }
.input:disabled, .input-sm:disabled {
    opacity: 0.5; cursor: not-allowed; background: rgba(255, 255, 255, 0.02);
}
.input-file {
    font-size: 13px;
    padding: 8px;
    flex: 1;
    min-width: 0;
    color: var(--text-secondary);
}
.input-file::file-selector-button {
    background: var(--bg-hover);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    margin-right: 8px;
}

.form-row {
    display: flex;
    gap: 10px;
    align-items: center;
}
.form-row .input { flex: 1 1 0; min-width: 80px; }
.form-row .input-port { flex: 0 0 100px; min-width: 100px; }
.form-row .btn { flex-shrink: 0; white-space: nowrap; }

/* ─── Cards & Panels ────────────────────────────────────────────────────── */
.panel { display: none; padding: 16px; overflow-x: clip; }
.panel.active { display: block; }

.panel-content { max-width: 1000px; margin: 0 auto; }

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 16px;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ─── Session Management ─────────────────────────────────────────────────── */
.session-controls {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    gap: 16px;
    margin-bottom: 16px;
}

/* Telemetry Instructions */
.telem-instructions {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 16px;
}
.telem-instructions h3 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.telem-instructions p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 10px;
}
.telem-instructions-details {
    display: flex;
    gap: 24px;
    margin-bottom: 10px;
}
.ti-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ti-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}
.ti-value {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--cyan);
    background: var(--bg-input);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    user-select: all;
}
.ti-hint {
    font-size: 12px !important;
    color: var(--text-muted) !important;
    margin-bottom: 0 !important;
}

/* Quick Drivers Strip */
.quick-drivers {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 16px;
}
.qd-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.qd-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.qd-search {
    width: 110px;
    padding: 3px 8px;
    font-size: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.15s, width 0.2s;
}
.qd-search:focus {
    border-color: var(--border-light);
    width: 140px;
}
.qd-search::placeholder { color: var(--text-muted); }
.qd-header h3 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin: 0;
}
.qd-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    min-width: 0;
}
.qd-list::-webkit-scrollbar { height: 4px; }
.qd-list::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 2px; }
.qd-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px 10px;
    flex-shrink: 0;
    cursor: default;
    transition: border-color 0.15s;
    min-width: 0;
}
.qd-chip:hover { border-color: var(--border-light); }
.qd-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-hover);
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.qd-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.qd-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.qd-port {
    font-size: 11px;
    color: var(--text-muted);
    font-family: 'Consolas', 'Courier New', monospace;
}
.qd-live {
    color: var(--green);
    font-size: 10px;
    flex-shrink: 0;
    animation: qd-pulse 2s ease-in-out infinite;
}
@keyframes qd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.qd-start {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: var(--green);
    color: #000;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.15s;
    line-height: 1;
    padding: 0;
}
.qd-start:hover { opacity: 0.85; }
.qd-start:disabled {
    background: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.5;
}
.qd-empty {
    font-size: 12px;
    color: var(--text-muted);
    padding: 4px 0;
}

.sessions-list { display: flex; flex-direction: column; gap: 8px; }
.sessions-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 8px 0 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}
.sessions-section-header:not(:first-child) { margin-top: 12px; }

.sessions-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 0;
    flex-wrap: wrap;
}
.sessions-pagination .sp-info {
    font-size: 12px;
    color: var(--text-muted);
}
.sessions-pagination .sp-num {
    min-width: 28px;
    text-align: center;
    padding: 2px 6px;
    font-size: 11px;
    border-radius: 4px;
}
.sessions-pagination .sp-num.sp-active {
    background: var(--accent);
    color: #fff;
    font-weight: 700;
}
.sessions-pagination .sp-ellipsis {
    color: var(--text-muted);
    padding: 0 4px;
    font-size: 12px;
}
.sessions-pagination button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.session-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-input);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    gap: 12px;
}

.session-item .si-info { flex: 1; min-width: 0; }
.session-item .si-name { font-weight: 600; font-size: 14px; }
.session-item .si-detail { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.session-item .si-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.session-item .si-status {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
}
.session-item .si-status.active { background: rgba(0, 212, 90, 0.15); color: var(--green); }
.session-item .si-status.closed { background: rgba(85, 85, 102, 0.15); color: var(--text-muted); }
.session-item .si-activity { display: flex; align-items: center; gap: 10px; margin-top: 3px; font-size: 11px; }
.si-telem-live { color: var(--green); }
.si-telem-idle { color: var(--yellow, #f5a623); }
.si-telem-stale { color: var(--red); }
.si-autoclose { color: var(--text-muted); font-style: italic; }
.session-item .si-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
/* E-Sports session toggle in the sessions-list item. The admin-toggle
 * base class gives us the sliding switch; we add a small caps label
 * so the control self-identifies at a glance amid the other action
 * buttons. Clicking anywhere on the label toggles the switch. */
.session-item .si-esports {
    display: inline-flex; align-items: center; gap: 6px; margin-right: 4px;
    cursor: pointer;
}
.session-item .si-esports-label {
    font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--text-muted);
    line-height: 1; user-select: none;
}
.session-item .si-esports input:checked ~ .si-esports-label { color: var(--accent, #e63322); }
.si-star { background: none; border: none; cursor: pointer; font-size: 18px; color: var(--text-muted); padding: 2px 4px; line-height: 1; transition: color 0.15s; }
.si-star.active { color: #f5a623; }
.si-star:hover { color: #f5a623; }
.si-star-filter {
    font-size: 11px; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; gap: 5px;
    user-select: none; padding: 3px 10px; border-radius: 4px; border: 1px solid var(--border);
    background: transparent; transition: all 0.15s;
}
.si-star-filter:hover { border-color: #f5a623; color: #f5a623; }
.si-star-filter.active { border-color: #f5a623; color: #f5a623; background: rgba(245,166,35,0.08); }
.si-star-filter input { display: none; }

/* ─── Dashboard Header ──────────────────────────────────────────────────── */
.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
    flex-wrap: wrap;
}

.dash-tabs { display: flex; gap: 4px; }
.tab {
    padding: 6px 16px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.tab:hover { color: var(--text-primary); background: var(--bg-hover); }
.tab.active { background: var(--red); color: white; border-color: var(--red); }

.dash-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.tab-content { display: none; }
.tab-content.active { display: block; }

/* ─── Weather Bar ────────────────────────────────────────────────────────── */
.weather-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.weather-current {
    display: flex;
    align-items: center;
    gap: 8px;
}
.weather-icon { font-size: 20px; }
.weather-label { font-weight: 600; font-size: 14px; }

.weather-temps { display: flex; gap: 12px; font-size: 13px; color: var(--text-secondary); }
.weather-temps span { white-space: nowrap; }

.weather-forecast {
    display: flex;
    gap: 6px;
    flex: 1;
    overflow-x: auto;
    padding: 4px 0;
}
.weather-forecast::-webkit-scrollbar { height: 4px; }
.weather-forecast::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.forecast-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 8px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    font-size: 11px;
    min-width: 56px;
    white-space: nowrap;
}
.forecast-item .fi-time { color: var(--text-muted); font-weight: 600; }
.forecast-item .fi-icon { font-size: 14px; margin: 2px 0; }
.forecast-item .fi-rain { color: var(--blue); font-weight: 700; }
.forecast-item.rain-warning { border: 1px solid rgba(0, 144, 255, 0.4); background: rgba(0, 144, 255, 0.08); }

.session-meta { display: flex; gap: 12px; font-size: 12px; color: var(--text-muted); font-weight: 600; }
.session-meta span { white-space: nowrap; }
.session-meta .hidden { display: none; }

#meta-safety-car {
    background: rgba(255, 200, 0, 0.2);
    color: var(--yellow);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

/* ─── Weather Radar ──────────────────────────────────────────────────────── */
.weather-radar { overflow: hidden; }

.radar-timeline {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    margin-bottom: 10px;
}
.radar-session-group {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.radar-session-group.rain-incoming .radar-session-label {
    color: var(--red);
    font-weight: 700;
}
.radar-session-label {
    font-size: 10px;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.radar-session-bars {
    display: flex;
    gap: 2px;
    height: 40px;
    align-items: flex-end;
}

.radar-bar {
    flex: 1;
    min-width: 8px;
    border-radius: 2px 2px 0 0;
    transition: height 0.3s;
    position: relative;
}
.radar-bar.dry { background: var(--text-muted); opacity: 0.3; }
.radar-bar.light-rain { background: var(--blue); opacity: 0.6; }
.radar-bar.heavy-rain { background: var(--blue); }
.radar-bar.storm { background: var(--purple); }

.tyre-recommendation {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
.rec-label { color: var(--text-muted); }
.rec-value { font-weight: 700; font-size: 15px; }

/* ─── Data Tables ────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.data-table.compact { font-size: 12px; }

.data-table th {
    padding: 6px 8px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: var(--bg-card);
}

.data-table td {
    padding: 5px 8px;
    border-bottom: 1px solid rgba(42, 42, 58, 0.5);
    white-space: nowrap;
}
.data-table tr:hover td { background: var(--bg-hover); }

/* Position column */
.pos-cell {
    font-weight: 800;
    font-size: 14px;
    min-width: 28px;
    text-align: center;
}
.pos-1 { color: var(--yellow); }
.pos-2 { color: #c0c0c0; }
.pos-3 { color: #cd7f32; }

/* Damage column */
.dmg-ok   { color: var(--text-muted); }
.dmg-warn { color: var(--orange); font-weight: 600; }
.dmg-critical { color: var(--red); font-weight: 700; }

/* Team color dot */
.team-dot {
    display: inline-block;
    width: 4px;
    height: 16px;
    border-radius: 2px;
    margin-right: 6px;
    vertical-align: middle;
}

/* Freeze Position (col 1) and Driver (col 2) in standings */
#standings-table th:nth-child(1),
#standings-table td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bg-card);
}
#standings-table th:nth-child(2),
#standings-table td:nth-child(2) {
    position: sticky;
    left: 28px;
    z-index: 2;
    background: var(--bg-card);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.3);
}
#standings-table th:nth-child(1),
#standings-table th:nth-child(2) {
    z-index: 3;
}
#standings-table tr:hover td:nth-child(1),
#standings-table tr:hover td:nth-child(2) {
    background: var(--bg-hover);
}

/* Tyre compound badge */
.tyre-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
}
.tyre-soft { background: rgba(255, 24, 1, 0.2); color: var(--tyre-soft); }
.tyre-medium { background: rgba(255, 200, 0, 0.2); color: var(--tyre-medium); }
.tyre-hard { background: rgba(224, 224, 224, 0.15); color: var(--tyre-hard); }
.tyre-inter { background: rgba(0, 212, 90, 0.2); color: var(--tyre-inter); }
.tyre-wet { background: rgba(0, 144, 255, 0.2); color: var(--tyre-wet); }

/* ERS session cards in admin panel */
.ers-session-card { border: 1px solid var(--border); }
.ers-session-card select { background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border); }
.ers-info-overlay { line-height: 1.5; }

/* Wear indicator colours */
.wear-good { color: var(--green); }
.wear-ok { color: var(--yellow); }
.wear-bad { color: var(--orange); }

/* Lap History */
.lap-history-card h3 {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.lap-best td { color: var(--purple); font-weight: 700; }
.lap-invalid td { color: var(--text-muted); text-decoration: line-through; opacity: 0.6; }

/* ERS bar */
.ers-inline {
    display: inline-block;
    width: 40px;
    height: 10px;
    background: var(--bg-input);
    border-radius: 2px;
    overflow: hidden;
    vertical-align: middle;
}
.ers-inline-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s;
}

/* Pit status */
.pit-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
}
.pit-none { color: var(--text-muted); }
.pit-pitting { background: rgba(255, 140, 0, 0.2); color: var(--orange); }
.pit-in-pit { background: rgba(0, 144, 255, 0.2); color: var(--blue); }

/* Race Standings — whole-row highlight when a car is pitting / in the pit
 * box. Yellow fill + left accent strip so it's impossible to miss at a
 * glance during a chaotic stint window. Cells keep their own text colours
 * so numbers stay legible against the wash. */
.standings-table tbody tr.wb-row-pitting td {
    background: rgba(255, 200, 0, 0.18);
}
.standings-table tbody tr.wb-row-pitting td:first-child {
    box-shadow: inset 3px 0 0 var(--yellow, #ffc800);
}

/* Penalty indicator */
.pen-badge {
    font-weight: 700;
    color: var(--yellow);
}
.pen-badge.has-penalty { color: var(--red); }

/* Track limits */
.limits-warn { color: var(--yellow); font-weight: 700; }
.limits-danger { color: var(--red); font-weight: 700; }

/* Status indicators */
.status-active { color: var(--green); }
.status-finished { color: var(--text-muted); }
.status-dnf { color: var(--red); }
.status-dsq { color: var(--red); font-weight: 700; }
.status-retired { color: var(--orange); }

/* Clickable name for anonymous online players */
.clickable-name {
    cursor: pointer;
    border-bottom: 1px dashed var(--text-muted);
    transition: color 0.15s;
}
.clickable-name:hover {
    color: var(--cyan);
    border-bottom-color: var(--cyan);
}

/* Fastest lap / personal best highlights */
.fastest-lap { color: var(--purple); font-weight: 700; }
.personal-best { color: var(--green); }
.sector-pb { color: var(--green); }
.sector-fastest { color: var(--purple); }

/* ─── Fuel Table ─────────────────────────────────────────────────────────── */
.fuel-low { color: var(--red); font-weight: 700; }
.fuel-ok { color: var(--green); }
.fuel-warning { color: var(--orange); }

/* ─── Events List ────────────────────────────────────────────────────────── */
.events-list {
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.event-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 12px;
}
.event-item:nth-child(odd) { background: rgba(26, 26, 36, 0.5); }
.event-time { color: var(--text-muted); font-size: 11px; min-width: 65px; }
.event-code {
    font-weight: 800;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 3px;
    min-width: 44px;
    text-align: center;
}
.event-code.penalty { background: rgba(255, 24, 1, 0.2); color: var(--red); }
.event-code.safety-car { background: rgba(255, 200, 0, 0.2); color: var(--yellow); }
.event-code.fastest { background: rgba(168, 85, 247, 0.2); color: var(--purple); }
.event-code.collision { background: rgba(255, 140, 0, 0.2); color: var(--orange); }
.event-code.session { background: rgba(0, 144, 255, 0.2); color: var(--blue); }
.event-desc { flex: 1; }

/* ─── Qualifying ─────────────────────────────────────────────────────────── */
.quali-header-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}
.quali-session-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 0;
}
.quali-tab {
    padding: 6px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
}
.quali-tab:hover { border-color: var(--red); color: var(--text-primary); }
.quali-tab.active { background: var(--red); color: #fff; border-color: var(--red); }

.quali-timer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.quali-timer #quali-session-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

.grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

/* Sector time colours */
.sector-purple { color: #a855f7 !important; font-weight: 700; }
.eliminated-row { opacity: 0.5; }
.eliminated-status { color: var(--red); font-weight: 600; }
.sector-green { color: #00d45a !important; font-weight: 700; }
.sector-yellow { color: #ffc800 !important; }

.tyre-temps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.tyre-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 8px;
    background: var(--bg-input);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}
.tyre-box .label { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
.tyre-box .val { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tyre-box .val-inner { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.tyre-box.cold .val { color: var(--blue); }
.tyre-box.optimal .val { color: var(--green); }
.tyre-box.hot .val { color: var(--orange); }
.tyre-box.overheat .val { color: var(--red); }

/* Temps grid for brake/engine */
.temps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.temps-grid .temp-item:first-child {
    grid-column: 1 / -1;
    text-align: center;
    padding: 10px;
    background: var(--bg-input);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}
.temp-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px;
    background: var(--bg-input);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}
.temp-label { font-size: 11px; color: var(--text-muted); }
.temp-value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ERS Mode Banner */
.ers-mode-banner {
    margin-bottom: 12px;
}
.ers-banner-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}
.ers-banner-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.ers-banner-mode {
    font-size: 22px;
    font-weight: 900;
    min-width: 90px;
    text-transform: uppercase;
}
.ers-banner-mode.mode-none { color: var(--text-muted); }
.ers-banner-mode.mode-medium { color: var(--blue); }
.ers-banner-mode.mode-hotlap { color: var(--orange); }
.ers-banner-mode.mode-overtake { color: var(--red); }
.ers-banner-bar {
    flex: 1;
    height: 18px;
    background: var(--bg-input);
    border-radius: var(--radius);
    overflow: hidden;
}
.ers-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--red), var(--yellow), var(--green));
    border-radius: var(--radius);
    transition: width 0.5s;
}
.ers-banner-pct {
    font-size: 18px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    min-width: 50px;
    text-align: right;
}
.ers-banner-deployed {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ─── Tyre Condition Grid ────────────────────────────────────────────────── */
.tyre-condition-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tc-header, .tc-row {
    display: grid;
    grid-template-columns: 32px 1fr 1fr 1fr;
    gap: 6px;
    align-items: center;
    font-size: 12px;
}
.tc-header {
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.tc-row {
    padding: 6px 0;
}
.tc-row span:first-child {
    font-weight: 700;
    color: var(--text-muted);
}
.tc-wear, .tc-dmg, .tc-blist {
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ─── Setup Grid ────────────────────────────────────────────────────────── */
.setup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}
.setup-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 8px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    font-size: 12px;
}
.setup-label {
    color: var(--text-muted);
    font-weight: 600;
}
.setup-value {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

/* ─── Lap Progress Bar ──────────────────────────────────────────────────── */
.lap-progress-bar {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lap-sectors {
    display: flex;
    gap: 4px;
}
.lap-sector {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 6px;
    background: var(--bg-input);
    border-radius: var(--radius);
    border: 2px solid var(--border);
    transition: border-color 0.3s, background 0.3s;
}
.lap-sector.active {
    border-color: var(--yellow);
    background: rgba(255, 200, 0, 0.08);
}
.lap-sector.completed-purple {
    border-color: var(--purple);
    background: rgba(168, 85, 247, 0.08);
}
.lap-sector.completed-green {
    border-color: var(--green);
    background: rgba(0, 212, 90, 0.08);
}
.lap-sector.completed-yellow {
    border-color: var(--yellow);
    background: rgba(255, 200, 0, 0.08);
}
.sector-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
}
.sector-time {
    font-size: 18px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.lap-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--text-secondary);
    padding: 0 4px;
}
.lap-valid-badge {
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: rgba(0, 212, 90, 0.15);
    color: var(--green);
}
.lap-valid-badge.invalid {
    background: rgba(255, 24, 1, 0.15);
    color: var(--red);
}

/* ─── Pre-Race Weather Briefing ──────────────────────────────────────────── */
.pre-race-briefing {
    border: 1px solid rgba(0, 144, 255, 0.25);
    background: linear-gradient(135deg, var(--bg-card), rgba(0, 144, 255, 0.03));
}
.prb-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.prb-status {
    font-size: 11px;
    font-weight: 800;
    padding: 3px 12px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: rgba(0, 144, 255, 0.15);
    color: var(--blue);
}
.prb-status.formation-lap {
    background: rgba(255, 200, 0, 0.15);
    color: var(--yellow);
}

.prb-grid {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: start;
}

/* Current Conditions */
.prb-current {
    text-align: center;
    min-width: 140px;
}
.prb-weather-icon {
    font-size: 48px;
    line-height: 1;
    margin-bottom: 4px;
}
.prb-weather-name {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}
.prb-temps {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.prb-temp-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-input);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}
.prb-temp-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.prb-temp-value {
    font-size: 20px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.prb-accuracy {
    margin-top: 8px;
    font-size: 10px;
    color: var(--text-muted);
}

/* Forecast Timeline */
.prb-forecast h4 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.prb-forecast-grid {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    min-width: 0;
}
.prb-fc-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 64px;
    flex-shrink: 0;
    padding: 8px 6px;
    background: var(--bg-input);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    font-size: 11px;
    gap: 2px;
}
.prb-fc-item.rain-risk {
    border-color: rgba(0, 144, 255, 0.4);
    background: rgba(0, 144, 255, 0.06);
}
.prb-fc-item.heavy-rain {
    border-color: rgba(0, 144, 255, 0.6);
    background: rgba(0, 144, 255, 0.12);
}
.prb-fc-time {
    font-weight: 700;
    color: var(--text-muted);
}
.prb-fc-icon {
    font-size: 18px;
    line-height: 1;
}
.prb-fc-temp {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.prb-fc-temp-change {
    font-size: 9px;
}
.prb-fc-temp-change.temp-up { color: var(--orange); }
.prb-fc-temp-change.temp-down { color: var(--blue); }
.prb-fc-temp-change.temp-same { color: var(--text-muted); }
.prb-fc-rain {
    font-weight: 800;
    color: var(--blue);
    font-variant-numeric: tabular-nums;
}

/* Strategy Notes */
.prb-strategy {
    min-width: 180px;
}
.prb-strategy h4 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.prb-strategy-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.prb-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    padding: 6px 8px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--border);
}
.prb-note.note-warn { border-left-color: var(--orange); }
.prb-note.note-danger { border-left-color: var(--red); }
.prb-note.note-info { border-left-color: var(--blue); }
.prb-note.note-ok { border-left-color: var(--green); }
.prb-note-icon { flex-shrink: 0; }

/* Starting grid */
#prb-grid-list {
    margin-top: 12px;
}

/* ─── Grip & Surface Conditions ──────────────────────────────────────────── */
.grip-card {
    overflow: hidden;
}
.grip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.grip-status-badge {
    font-size: 11px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(85, 85, 102, 0.2);
    color: var(--text-muted);
}
.grip-status-badge.grip-optimal {
    background: rgba(0, 212, 90, 0.15);
    color: var(--green);
}
.grip-status-badge.grip-good {
    background: rgba(0, 212, 90, 0.1);
    color: #6be88c;
}
.grip-status-badge.grip-marginal {
    background: rgba(255, 200, 0, 0.15);
    color: var(--yellow);
}
.grip-status-badge.grip-poor {
    background: rgba(255, 140, 0, 0.15);
    color: var(--orange);
}
.grip-status-badge.grip-critical {
    background: rgba(255, 24, 1, 0.15);
    color: var(--red);
    animation: pulse 1.5s infinite;
}

.grip-layout {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    align-items: start;
}

/* Grip Gauge */
.grip-gauge-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.grip-gauge {
    position: relative;
    width: 180px;
    text-align: center;
}
.grip-arc {
    width: 100%;
    height: auto;
}
.grip-gauge-value {
    font-size: 28px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    margin-top: -20px;
}
.grip-gauge-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2px;
}

.grip-swap-rec {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--bg-input);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    width: 100%;
}
.grip-swap-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}
.grip-swap-value {
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
}
.grip-swap-value.swap-now {
    color: var(--red);
    animation: pulse 1.5s infinite;
}
.grip-swap-value.swap-soon {
    color: var(--orange);
}
.grip-swap-value.swap-monitor {
    color: var(--yellow);
}
.grip-swap-value.swap-ok {
    color: var(--green);
}

/* Per-wheel grip display */
.grip-wheels {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.grip-wheel-row {
    display: flex;
    gap: 8px;
}
.grip-wheel {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 6px;
    background: var(--bg-input);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    min-width: 0;
}
.gw-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.gw-bar-wrap {
    width: 100%;
    height: 8px;
    background: var(--bg-primary);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px;
}
.gw-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 4px;
    background: var(--green);
    transition: width 0.3s, background 0.3s;
}
.gw-slip {
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.gw-surface {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 1px;
}
.gw-surface.surface-wet {
    color: var(--blue);
}
.gw-surface.surface-off {
    color: var(--orange);
}

/* Grip Trend mini chart */
.grip-trend {
    display: flex;
    flex-direction: column;
}
.grip-trend-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    margin-bottom: 6px;
}
.grip-trend-delta {
    font-weight: 800;
    font-size: 12px;
}
.grip-trend-delta.rising { color: var(--green); }
.grip-trend-delta.falling { color: var(--red); }
.grip-trend-delta.stable { color: var(--text-muted); }

.grip-trend-chart {
    background: var(--bg-input);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 6px;
    height: 72px;
    position: relative;
    overflow: hidden;
}
.grip-trend-chart canvas {
    width: 100%;
    height: 100%;
}

/* Track condition legend */
.track-cond-legend {
    display: flex;
    gap: 12px;
    margin-top: 6px;
    font-size: 10px;
    color: var(--text-muted);
}
.tcl-item {
    display: flex;
    align-items: center;
    gap: 4px;
}
.tcl-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* Track Drying/Wetting Timeline */
.track-timeline {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--bg-input);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}
.track-timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.track-timeline-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}
.track-timeline-status {
    font-size: 12px;
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 10px;
}
.track-timeline-status.drying {
    background: rgba(255, 200, 0, 0.15);
    color: var(--yellow);
}
.track-timeline-status.wetting {
    background: rgba(0, 144, 255, 0.15);
    color: var(--blue);
}
.track-timeline-status.dry {
    background: rgba(0, 212, 90, 0.1);
    color: var(--green);
}
.track-timeline-status.wet {
    background: rgba(0, 144, 255, 0.2);
    color: var(--blue);
}
.track-timeline-status.stable {
    background: rgba(85, 85, 102, 0.15);
    color: var(--text-muted);
}

.track-timeline-bars {
    display: flex;
    gap: 2px;
    height: 32px;
    align-items: flex-end;
    margin-bottom: 8px;
}
.track-timeline-bars .tt-bar {
    flex: 1;
    min-width: 3px;
    border-radius: 2px 2px 0 0;
    transition: height 0.3s, background 0.3s;
    position: relative;
    cursor: default;
}
.track-timeline-bars .tt-bar.tt-dry {
    background: var(--green);
    opacity: 0.5;
}
.track-timeline-bars .tt-bar.tt-light-rain {
    background: var(--blue);
    opacity: 0.6;
}
.track-timeline-bars .tt-bar.tt-heavy-rain {
    background: var(--blue);
}
.track-timeline-bars .tt-bar.tt-storm {
    background: var(--purple);
}
.track-timeline-bars .tt-bar.tt-overcast {
    background: var(--text-muted);
    opacity: 0.4;
}

.track-timeline-info {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-secondary);
}
.track-evo-prediction {
    font-weight: 700;
}
.track-evo-prediction.pred-swap {
    color: var(--orange);
}
.track-evo-prediction.pred-ok {
    color: var(--green);
}

/* Driver View Compact Grip */
.dv-grip-card {
    margin-bottom: 16px;
}
.dv-grip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.dv-grip-content {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.dv-grip-bar-wrap {
    flex: 1;
    height: 20px;
    background: var(--bg-input);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.dv-grip-bar {
    height: 100%;
    width: 0%;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--red), var(--orange), var(--yellow), var(--green));
    transition: width 0.5s;
}
.dv-grip-value {
    font-size: 22px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    min-width: 60px;
    text-align: right;
}
.dv-grip-detail {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-secondary);
}
.dv-grip-rec {
    font-weight: 700;
}

/* ─── Track Map ─────────────────────────────────────────────────────────── */
.track-map-card { overflow: hidden; }
.track-map-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
.track-map-image-wrap {
    position: relative;
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
}
.track-map-img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    display: block;
}
.track-map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Track map driver filter bar */
.track-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 0;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
    align-items: center;
}
.tmf-all {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    margin-right: 4px;
}
.tmf-all.active {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}
.tmf-all:hover { border-color: var(--red); }
.tmf-chip {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    font-family: inherit;
    touch-action: manipulation;
}
.tmf-chip.visible {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--border-light);
    color: var(--text-primary);
}
.tmf-chip.hidden {
    opacity: 0.35;
    background: transparent;
    border-color: var(--border);
    color: var(--text-muted);
}
.tmf-chip.monitored.visible {
    border-color: var(--red);
    background: rgba(255, 24, 1, 0.15);
    color: #fff;
}
.tmf-chip:hover { border-color: var(--red); opacity: 1; }
.tmf-pos {
    font-weight: 800;
    font-size: 9px;
    color: var(--yellow);
    margin-right: 2px;
}
.tmf-chip.hidden .tmf-pos { color: var(--text-muted); }

/* Driver position list inside track map */
.track-driver-list {
    max-height: 400px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.track-driver-row {
    display: grid;
    grid-template-columns: 30px 1fr 28px 60px 32px auto 70px;
    gap: 4px;
    align-items: center;
    padding: 3px 6px;
    font-size: 11px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.02);
}
.track-driver-row.monitored {
    background: rgba(255, 24, 1, 0.1);
    border-left: 2px solid var(--red);
}
.track-driver-row.in-pit {
    opacity: 0.5;
}
.tdr-pos {
    font-weight: 800;
    font-size: 11px;
    color: var(--yellow);
    text-align: center;
}
.tdr-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tdr-sector {
    font-weight: 800;
    font-size: 10px;
    text-align: center;
    padding: 1px 4px;
    border-radius: 3px;
}
.tdr-sector.sector-1 { color: var(--red); }
.tdr-sector.sector-2 { color: var(--blue); }
.tdr-sector.sector-3 { color: var(--yellow); }
.tdr-progress {
    height: 4px;
    background: var(--bg-input);
    border-radius: 2px;
    overflow: hidden;
}
.tdr-progress-fill {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--red), var(--yellow));
    transition: width 0.3s;
}
.tdr-pct {
    font-size: 10px;
    color: var(--text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.tdr-status {
    font-size: 10px;
    color: var(--text-muted);
    text-align: right;
    white-space: nowrap;
}

/* ─── Throttle/Brake Trace ───────────────────────────────────────────────── */
.trace-card { padding: 12px; }
.trace-canvas {
    width: 100%;
    height: 120px;
    display: block;
    border-radius: var(--radius);
    background: rgba(0, 0, 0, 0.3);
}
.md-trace-card { padding: 10px !important; }
.md-trace-card .trace-canvas { height: 100px; }
.md-trace-card h4 {
    margin: 0 0 6px 0;
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ─── Driver Multi-Select Bar ────────────────────────────────────────────── */
.driver-select-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
    flex-wrap: wrap;
    max-width: 100%;
    box-sizing: border-box;
}
.ds-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.driver-select-chips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    flex: 1 1 0;
}
.driver-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255, 24, 1, 0.2);
}
.driver-chip:hover {
    border-color: var(--text-muted);
    background: var(--bg-hover);
    color: var(--text-primary);
}
.driver-chip.selected {
    border-color: var(--red);
    background: rgba(255, 24, 1, 0.15);
    color: #fff;
}
.dc-pos {
    font-weight: 800;
    font-size: 10px;
    color: var(--yellow);
}
.driver-chip.selected .dc-pos { color: var(--yellow); }

/* ─── Monitored Driver Panels (Race Tab) ─────────────────────────────────── */
.monitored-drivers {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
}

/* Ahead/Behind Panels */
#ahead-behind-panels { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.ab-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
.ab-panel-header { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.ab-panel-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ab-card { background: var(--bg-body); border-radius: var(--radius-sm); padding: 10px; min-height: 108px; }
.ab-card.ab-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0.4; }
.ab-card-label { font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px; }
.ab-card-driver { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Fixed 3-column grid so the card height doesn't jump as values change
   width during a lap (tyre name length, wear %, etc). */
.ab-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: start; }
.ab-stat { display: flex; flex-direction: column; min-width: 0; }
.ab-stat-label { font-size: 10px; color: var(--text-muted); }
.ab-stat-value { font-size: 1.3rem; font-weight: 800; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.md-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 16px;
    border-left: 3px solid var(--red);
}

.md-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.md-driver-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.md-driver-name {
    font-size: 18px;
    font-weight: 800;
    margin: 0;
}
.md-position {
    font-size: 24px;
    font-weight: 900;
    color: var(--yellow);
}
.md-status {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.md-remove-btn {
    font-size: 14px;
    padding: 2px 8px;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.md-remove-btn:hover { opacity: 1; color: var(--red); }

.md-ers-banner { margin-bottom: 10px; }

.md-grid { gap: 8px; margin-bottom: 8px; }
.md-card {
    padding: 10px !important;
}
.md-card h4 {
    margin: 0 0 6px 0;
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.md-lap-progress { margin-bottom: 0; }

/* ─── Driver View ────────────────────────────────────────────────────────── */
.driver-view { max-width: 600px; margin: 0 auto; }

.dv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.dv-header h2 { font-size: 24px; }
.dv-position {
    font-size: 36px;
    font-weight: 900;
    color: var(--yellow);
}

/* Driver View - Track Conditions */
.dv-track-cond {
    padding: 10px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 16px;
}
.dv-tc-status {
    display: flex;
    align-items: center;
    gap: 12px;
}
.dv-tc-badge {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-secondary);
}
.dv-tc-badge.dry      { background: rgba(0, 212, 90, 0.15); color: var(--green); }
.dv-tc-badge.stable   { background: var(--bg-input); color: var(--text-secondary); }
.dv-tc-badge.wetting  { background: rgba(0, 144, 255, 0.15); color: var(--blue); }
.dv-tc-badge.drying   { background: rgba(255, 200, 0, 0.15); color: var(--yellow); }
.dv-tc-badge.wet      { background: rgba(0, 144, 255, 0.25); color: #5cb8ff; }
.dv-tc-rec { font-size: 13px; }
.dv-tc-action {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
}
.dv-tc-warn {
    color: var(--yellow);
    background: rgba(255, 200, 0, 0.1);
    border: 1px solid rgba(255, 200, 0, 0.25);
}
.dv-tc-urgent {
    color: var(--red);
    background: rgba(255, 24, 1, 0.1);
    border: 1px solid rgba(255, 24, 1, 0.3);
}

.dv-damage {
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 16px;
}

.dv-damage-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.dv-dmg-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    font-size: 11px;
}
.dv-dmg-item span:first-child { color: var(--text-muted); margin-bottom: 2px; }
.dv-dmg-val { font-weight: 800; font-size: 14px; }
.dv-dmg-item.ok .dv-dmg-val { color: var(--green); }
.dv-dmg-item.minor .dv-dmg-val { color: var(--yellow); }
.dv-dmg-item.major .dv-dmg-val { color: var(--orange); }
.dv-dmg-item.critical .dv-dmg-val { color: var(--red); }
.dv-dmg-item.critical { border: 1px solid rgba(255, 24, 1, 0.4); background: rgba(255, 24, 1, 0.08); }

.dv-faults {
    margin-top: 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--red);
    text-align: center;
}

.dv-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.dv-metric {
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
}

.dv-metric-label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.dv-metric-value {
    display: block;
    font-size: 28px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.dv-metric-sub {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* Tyre wear in driver view */
.dv-tyre-wear {
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 16px;
}

.tyre-wear-grid { display: flex; flex-direction: column; gap: 8px; }

.tyre-wear-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
}
.tyre-wear-item span:first-child { min-width: 24px; color: var(--text-muted); }

.wear-bar {
    flex: 1;
    height: 12px;
    background: var(--bg-input);
    border-radius: 6px;
    overflow: hidden;
}
.wear-fill {
    height: 100%;
    border-radius: 6px;
    background: var(--green);
    transition: width 0.3s, background 0.3s;
}
.wear-pct { min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }

/* Driver View - Tyre Prediction (quick glance) */
.dv-tyre-pred {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}
.dv-tp-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
}
.dv-tp-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.dv-tp-value {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.dv-tp-sub {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Driver View - Ahead/Behind */
.dv-ahead-behind { margin-bottom: 16px; }
.dv-ahead-behind .ab-panel-header { display: none; }

.dv-penalties {
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* ─── Mobile Responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    html { font-size: 13px; }
    .panel { padding: 8px; }

    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .grip-layout { grid-template-columns: 1fr; }
    .prb-grid { grid-template-columns: 1fr; }
    .ers-banner-content { flex-wrap: wrap; }
    .ers-banner-bar { min-width: 100%; order: 5; }
    .ers-map-body { flex-direction: column; }
    .ers-legend { flex-direction: row; gap: 12px; border-left: none; border-top: 1px solid var(--border); }

    .dashboard-header { flex-direction: column; align-items: stretch; }
    .dash-tabs { overflow-x: auto; padding-bottom: 4px; }
    .dash-actions { justify-content: space-between; }

    .session-controls { grid-template-columns: 1fr; }
    .telem-instructions-details { flex-direction: column; gap: 10px; }
    .form-row { flex-direction: column; }
    .form-row .input { width: 100%; }
    .form-row .input-port { flex: 1 1 auto; width: 100%; min-width: unset; }

    .weather-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        overflow: hidden;           /* contain the forecast scroll within the bar */
    }
    .weather-forecast {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex: none;                 /* remove flex:1 from desktop — not useful in column */
        min-width: 0;              /* allow shrinking below content width */
        width: 100%;
        padding-bottom: 6px;       /* space for scroll indicator / touch affordance */
    }
    .forecast-item { flex-shrink: 0; }
    .session-meta { flex-wrap: wrap; }

    .dv-damage-grid { grid-template-columns: repeat(2, 1fr); }
    .dv-metrics { grid-template-columns: 1fr 1fr; }

    .track-map-layout { grid-template-columns: 1fr; }
    .track-map-img { max-height: 250px; }
    .track-driver-list { max-height: 300px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .track-driver-row { grid-template-columns: 25px 1fr 24px 50px 28px 50px; }
    .tdr-status { display: none; }
    .track-filter-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding-bottom: 6px; }

    .setup-grid { grid-template-columns: 1fr; }
    .tyre-condition-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tc-header, .tc-row { min-width: 220px; }

    .driver-select-bar {
        padding: 4px 8px;
        flex-wrap: nowrap;
        overflow: hidden;
        max-width: 100%;
    }
    .driver-select-chips {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        padding-bottom: 4px;
        min-width: 0;
    }
    .driver-chip { font-size: 10px; padding: 2px 6px; flex-shrink: 0; }
    .md-grid.grid-3 { grid-template-columns: 1fr; }
    .md-driver-name { font-size: 15px; }
    .md-position { font-size: 20px; }

    .dv-metric-value { font-size: 22px; }
    .dv-position { font-size: 28px; }

    #topbar { padding: 0 8px; }
    .brand { font-size: 15px; }

    .data-table { font-size: 11px; }
    .data-table th, .data-table td { padding: 4px 5px; }

    /* Hide less important columns on mobile */
    .data-table .hide-mobile { display: none; }
}

@media (max-width: 480px) {
    .dv-metrics { grid-template-columns: 1fr; }
    .topbar-center { display: none; }
    .user-name { display: none; }
    .standings-card .table-wrap { max-height: 60vh; overflow-y: auto; }

    /* Ensure all grids stack on small phones */
    .tyre-temps-grid { grid-template-columns: 1fr; }
    .temps-grid { grid-template-columns: 1fr; }
    .temps-grid .temp-item:first-child { grid-column: auto; }

    /* Track driver list: simplify columns for narrow screens */
    .track-driver-row {
        grid-template-columns: 22px 1fr 24px 1fr;
        font-size: 10px;
    }
    .tdr-pct, .tdr-tyre { display: none; }
    .track-driver-list { max-height: 250px; }

    /* Monitored driver panels: stack all cards */
    .md-grid.grid-2 { grid-template-columns: 1fr; }
    .md-panel { padding: 10px 12px; }
    .md-header { flex-wrap: wrap; gap: 6px; }
    .md-driver-name { font-size: 14px; }
    .md-position { font-size: 18px; }

    /* Trace canvases: reduce height on phones */
    .trace-canvas { height: 90px; }
    .md-trace-card .trace-canvas { height: 80px; }

    /* Scrollable containers for any overflow content */
    .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .card.track-map-card { overflow: hidden; } /* preserve canvas overlay clipping */
    .tab-content { overflow-x: clip; }

    /* Driver select bar: already handled at 768px breakpoint */

    /* Weather bar compact */
    .weather-bar { gap: 8px; padding: 8px 10px; font-size: 12px; }
    .weather-temps { gap: 6px; font-size: 11px; }

    /* ERS banner wrap */
    .ers-banner-content { gap: 4px; font-size: 11px; }

    /* Qualifying grid stack */
    .grid-3 { grid-template-columns: 1fr; }

    /* Track map filter scrollable on small phones */
    .tmf-chip { font-size: 9px; padding: 2px 5px; }
    .tmf-all { font-size: 10px; padding: 2px 8px; }
}

/* Phone landscape: hide session indicator to prevent topbar overflow */
@media (max-height: 500px) and (orientation: landscape) {
    .topbar-center { display: none; }
    .topbar-right .user-name { display: none; }
    .topbar-right .btn-sm { padding: 2px 6px; font-size: 11px; }
}

/* ─── Telemetry Settings Dropdown ─────────────────────────────────────────── */
.telem-settings-wrap {
    position: relative;
    display: inline-block;
}
.telem-settings-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 100;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 0;
    min-width: 200px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    max-height: 70vh;
    overflow-y: auto;
}
.tsd-header {
    padding: 6px 14px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}
.tsd-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.1s;
}
.tsd-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.tsd-item input[type="checkbox"] {
    accent-color: var(--red);
    width: 15px;
    height: 15px;
    cursor: pointer;
}
.tsd-footer {
    border-top: 1px solid var(--border);
    padding: 6px 14px 2px;
    margin-top: 4px;
    text-align: center;
}

/* ─── Layouts Dropdown ──────────────────────────────────────────────────── */
.layouts-wrap { position: relative; display: inline-block; }
.layouts-dropdown {
    position: absolute; top: 100%; right: 0; z-index: 100;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 8px 0; min-width: 240px; max-height: 70vh; overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.layouts-list { max-height: 200px; overflow-y: auto; }
.layout-item {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 14px; font-size: 13px; color: var(--text-secondary);
    cursor: pointer; transition: background 0.1s;
}
.layout-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.layout-item .layout-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layout-item .layout-delete {
    background: none; border: none; color: var(--text-muted); cursor: pointer;
    font-size: 14px; padding: 0 2px; line-height: 1;
}
.layout-item .layout-delete:hover { color: var(--red); }
.layouts-save-row {
    display: flex; gap: 6px; padding: 8px 14px;
    border-top: 1px solid var(--border); margin-top: 4px;
}
.layouts-save-row .input { flex: 1; }

/* ─── Drag & Drop Panels ───────────────────────────────────────────────── */
.drag-panel { position: relative; transition: transform 0.15s ease, opacity 0.15s ease; }
.drag-panel.dragging { opacity: 0.4; }
.drag-panel.drag-over { border-top: 2px solid var(--red); margin-top: -2px; }
.drag-handle {
    position: absolute; top: 6px; left: 6px; z-index: 5;
    width: 20px; height: 20px; cursor: grab;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); font-size: 14px;
    opacity: 0; transition: opacity 0.2s;
    border-radius: var(--radius-sm);
}
.drag-panel:hover .drag-handle { opacity: 0.6; }
.drag-handle:hover { opacity: 1 !important; color: var(--text-primary); background: var(--bg-hover); }
.drag-handle:active { cursor: grabbing; }

/* Driver Rename Dropdown */
.rename-wrap { position: relative; display: inline-block; }
.rename-dropdown {
    position: absolute; top: 100%; right: 0; z-index: 100;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 8px 0; min-width: 380px; max-height: 70vh; overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.rename-header {
    padding: 6px 14px 8px; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--text-muted); border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.rename-list { padding: 4px 14px; }
.rename-row {
    display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px;
}
.rename-driver-info { flex: 0 0 auto; min-width: 120px; display: flex; flex-direction: column; gap: 1px; }
.rename-team { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; line-height: 1; }
.rename-current { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rename-arrow { color: var(--text-muted); flex-shrink: 0; }
.rename-input {
    flex: 1; background: var(--bg-body); border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text-primary); padding: 4px 8px; font-size: 13px; min-width: 0;
}
.rename-input::placeholder { color: var(--text-muted); }
.rename-scan-section {
    padding: 8px 14px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.rename-scan-row {
    display: flex; align-items: center; gap: 8px;
}
.rename-scan-btn {
    cursor: pointer; display: inline-block; text-align: center;
}
.rename-scan-status {
    font-size: 11px; color: var(--text-muted); flex: 1;
}
.rename-scan-status.scanning {
    color: var(--accent);
}
.rename-scan-status.error {
    color: var(--red);
}
.rename-scan-status.success {
    color: var(--green, #4caf50);
}
.rename-scan-preview {
    position: relative; margin-top: 8px; border-radius: var(--radius-sm);
    overflow: hidden; border: 1px solid var(--border); max-height: 200px;
}
.rename-scan-preview canvas {
    display: block; width: 100%; height: auto; max-height: 200px; object-fit: contain;
}
.rename-scan-clear {
    position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.6);
    color: #fff; border: none; border-radius: 50%; width: 20px; height: 20px;
    font-size: 14px; line-height: 1; cursor: pointer; display: flex;
    align-items: center; justify-content: center;
}
.rename-scan-clear:hover { background: var(--red); }
.rename-footer {
    border-top: 1px solid var(--border); padding: 8px 14px; margin-top: 4px;
    display: flex; gap: 8px; justify-content: center;
}

/* Hidden telem section */
[data-telem-section].telem-hidden {
    display: none !important;
}

/* ─── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }

/* ─── Animations ─────────────────────────────────────────────────────────── */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.pulse { animation: pulse 2s ease-in-out infinite; }

@keyframes flash-row {
    0% { background: rgba(255, 24, 1, 0.2); }
    100% { background: transparent; }
}
.flash { animation: flash-row 1s ease-out; }


/* ═══════════════════════════════════════════════════════════════════════════
   Driver Profiles
   ═══════════════════════════════════════════════════════════════════════════ */

.profiles-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.profiles-header h2 { margin: 0; }
.profiles-header div { display: flex; gap: 8px; }

/* Profile Grid (cards list) */
.profiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.profile-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
    overflow: hidden;
}
.profile-card:hover {
    border-color: var(--red);
    background: var(--bg-hover);
}
.profile-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--red);
    opacity: 0.6;
}

.pc-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.pc-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-hover);
    border: 2px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.pc-name {
    font-weight: 700;
    font-size: 15px;
}
.pc-team {
    font-size: 12px;
    color: var(--text-secondary);
}
.pc-meta {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}
.pc-meta span { display: flex; align-items: center; gap: 3px; }
.pc-port {
    background: rgba(0, 144, 255, 0.1);
    color: var(--blue);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-weight: 600;
}
.pc-sessions {
    background: rgba(0, 212, 90, 0.1);
    color: var(--green);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-weight: 600;
}

/* Profile Detail View */
.profile-detail { margin-top: 8px; }

.pd-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}
.pd-identity { display: flex; align-items: center; gap: 14px; }
.pd-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bg-hover);
    border: 3px solid var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 20px;
    color: var(--text-primary);
}
.pd-header h2 { margin: 0; font-size: 20px; }
.pd-meta {
    display: flex;
    gap: 10px;
    margin-top: 4px;
    font-size: 13px;
}
.pd-team { color: var(--text-secondary); }
.pd-number {
    background: rgba(255, 24, 1, 0.15);
    color: var(--red);
    padding: 1px 8px;
    border-radius: var(--radius-sm);
    font-weight: 700;
}
.pd-port {
    background: rgba(0, 144, 255, 0.1);
    color: var(--blue);
    padding: 1px 8px;
    border-radius: var(--radius-sm);
    font-weight: 600;
}
.pd-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.pd-overlay-url { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.pd-overlay-url input { flex: 1; background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 4px 8px; border-radius: 4px; font-size: 11px; }

/* Stats Row */
.pd-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.pd-stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    text-align: center;
}
.pd-stat-value {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.pd-stat-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Notes */
.pd-notes-section { margin-bottom: 16px; }
.pd-notes-text {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: pre-wrap;
}

/* Sessions List */
.pd-sessions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.pd-sessions-list { display: flex; flex-direction: column; gap: 6px; }

.pd-session-item {
    padding: 10px 14px;
    background: var(--bg-input);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    transition: all 0.15s;
}
.pd-session-item:hover { border-color: var(--border-light); }
.pd-si-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pd-si-track {
    font-weight: 600;
    font-size: 14px;
    min-width: 120px;
}
.pd-si-type {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted);
    min-width: 70px;
}
.pd-si-result {
    font-weight: 700;
    font-size: 14px;
    min-width: 36px;
    text-align: center;
}
.pd-si-result.p1 { color: var(--yellow); }
.pd-si-result.podium { color: var(--green); }

.pd-si-lap {
    font-size: 12px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.pd-si-date {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: auto;
}
.pd-si-actions { display: flex; gap: 4px; }

/* Lobby Results (per-lobby qualifying/race results) */
.pd-lobby-results {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.pd-lobby-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    padding: 3px 0 3px 36px;
}
.pd-lr-type {
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 3px;
    min-width: 28px;
    text-align: center;
}
.pd-lr-type.lr-race { background: rgba(255, 24, 1, 0.15); color: #ff4444; }
.pd-lr-type.lr-quali { background: rgba(0, 212, 90, 0.15); color: #00d45a; }
.pd-lr-type.lr-other { background: rgba(255, 200, 0, 0.15); color: #ffc800; }
.pd-lr-track { color: var(--text-secondary); min-width: 80px; }
.pd-lr-pos { font-weight: 600; min-width: 70px; }
.pd-lr-pos.p1 { color: var(--yellow); }
.pd-lr-pos.podium { color: var(--green); }
.pd-lr-lap { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.pd-lr-laps { color: var(--text-muted); min-width: 30px; }
.pd-lr-pits { color: var(--text-muted); font-size: 11px; }
.pd-lr-pen { color: #ff4444; font-size: 11px; }
.pd-lr-tyres { display: flex; gap: 2px; margin-left: auto; }

/* Profile Form */
.profile-form { margin-top: 8px; }
.profile-form h2 { margin-bottom: 16px; }

.pf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.pf-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.pf-field .input,
.pf-field textarea.input {
    width: 100%;
}
.pf-field textarea.input { resize: vertical; min-height: 60px; }
.pf-field-full { grid-column: 1 / -1; }
.pf-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bg-hover);
    color: var(--text-muted);
    font-size: 10px;
    cursor: help;
    border: 1px solid var(--border);
}
.required { color: var(--red); }
.pf-actions { display: flex; gap: 8px; }

/* Playback */
.playback-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.playback-header h2 { margin: 0; }

/* Playback reuses the dashboard rendering styles */
#playback-content .card { margin-bottom: 12px; }

/* ─── Link Session Modal ──────────────────────────────────────────────── */
.link-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
}
.link-modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    width: 90%;
    max-width: 480px;
    max-height: 70vh;
    overflow-y: auto;
}
.link-modal h3 { margin-bottom: 12px; }
.link-modal-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.link-modal-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    font-size: 13px;
}
.link-modal-item .lm-info { flex: 1; }
.link-modal-item .lm-info span { color: var(--text-muted); font-size: 11px; }

/* ─── Responsive: Profiles ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .profiles-grid { grid-template-columns: 1fr; }
    .pd-stats { grid-template-columns: repeat(3, 1fr); }
    .pf-grid { grid-template-columns: 1fr; }
    .pd-header { flex-direction: column; }
    .pd-si-header { flex-wrap: wrap; }
    .pd-si-date { margin-left: 0; }
    .pd-lobby-row { padding-left: 0; flex-wrap: wrap; }
}
@media (max-width: 480px) {
    .pd-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Tyre Prediction ──────────────────────────────────────────────────────── */
.wear-low    { color: var(--green); }
.wear-med    { color: var(--orange); }
.wear-high   { color: #ff6b35; }
.wear-critical { color: var(--red); font-weight: 600; }


/* ─── Monitored Tyre Wear Panel ─────────────────────────────────────────── */
.mtw-content { padding: 12px 0 0; }
.mtw-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.mtw-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
}
.mtw-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.mtw-value {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.mtw-sub {
    font-size: 10px;
    color: var(--text-secondary);
    margin-top: 3px;
}
.mtw-corners {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    width: 100%;
    margin-top: 2px;
}
.mtw-corner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px;
    background: var(--bg-card);
    border-radius: 4px;
}
.mtw-corner-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}
.mtw-corner-val {
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ─── Track Map Panel ────────────────────────────────────────────────────── */
.track-map-container {
    position: relative;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 300px;
}
.track-map-container canvas {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 300px;
    cursor: grab;
}
.track-map-container canvas:active {
    cursor: grabbing;
}
.track-map-status {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
}
.track-map-status.building {
    background: var(--warning);
    color: #000;
}
.track-map-status.ready {
    background: var(--success);
    color: #000;
}
.track-map-status.gen {
    background: #3b82f6;
    color: #fff;
}

/* ─── Tyre Wear Heatmap ──────────────────────────────────────────────────── */
.wear-heatmap-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-size: 11px;
    color: var(--text-secondary);
}
.whl-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.whl-bar {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, #2563eb, #06b6d4, #22c55e, #eab308, #f97316, #ef4444);
}

/* ─── Tyre Wear Heatmap Card Layout ─────────────────────────────────────── */
#wear-heatmap-card {
    display: flex;
    flex-direction: column;
    max-height: 500px;
}
#wear-heatmap-card .track-map-container {
    flex: 1;
    min-height: 0;
    max-height: 350px;
}

/* ─── Tyre Wear Heatmap Controls ─────────────────────────────────────────── */
.wear-hm-compound {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-left: 4px;
}
.wear-hm-corners {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 10px;
}
.whm-corner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.whm-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}
.whm-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.whm-avg {
    border-left: 1px solid var(--border);
    padding-left: 12px;
}

/* ─── Telemetry Recording ────────────────────────────────────────────────── */
.rec-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #666;
    margin-right: 4px;
    vertical-align: middle;
}
.rec-dot.recording {
    background: #ff1801;
    animation: rec-pulse 1s ease-in-out infinite;
}
@keyframes rec-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.rec-size {
    font-size: 10px;
    color: var(--text-muted);
    margin-left: 4px;
}
.btn-record.active {
    color: #ff1801 !important;
    border-color: #ff1801 !important;
}

/* ─── Playback Controls ──────────────────────────────────────────────────── */
.playback-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--bg-card);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    margin-bottom: 12px;
}
.playback-bar .pb-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.playback-timeline {
    flex: 1;
    position: relative;
    height: 28px;
    background: var(--bg-input);
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
}
.playback-timeline .pt-fill {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    background: var(--accent);
    opacity: 0.3;
    transition: width 0.1s linear;
}
.playback-timeline .pt-sections {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    display: flex;
}
.playback-timeline .pt-section {
    height: 100%;
    border-right: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}
.playback-timeline .pt-section.quali { background: rgba(52,152,219,0.15); }
.playback-timeline .pt-section.race { background: rgba(255,255,255,0.05); }
.pb-time {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    white-space: nowrap;
}
.pb-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}
.pb-controls button {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 12px;
    cursor: pointer;
}
.pb-controls button:hover { border-color: var(--accent); color: var(--accent); }
.pb-controls button.active { background: var(--accent); color: #000; border-color: var(--accent); }
.pb-speed {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 30px;
    text-align: center;
}

/* ─── Telemetry File Browser ─────────────────────────────────────────────── */
.telem-files-list {
    max-height: 300px;
    overflow-y: auto;
}
.telem-file-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}
.telem-file-row:hover { background: var(--bg-hover); }
.telem-file-info { flex: 1; }
.telem-file-name { font-weight: 600; color: var(--text-primary); }
.telem-file-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.telem-file-actions { display: flex; gap: 6px; align-items: center; }
.telem-file-keep {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}
.telem-file-keep.kept { border-color: var(--accent); color: var(--accent); }

/* ─── Driver Comparison Panel ────────────────────────────────────────────── */

/* ─── Undercut/Overcut Panel ─────────────────────────────────────────────── */
.undercut-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.undercut-table th {
    text-align: left;
    padding: 6px 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.undercut-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}
.undercut-risk {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}
.undercut-risk.safe { background: rgba(0,212,90,0.15); color: #00d45a; }
.undercut-risk.marginal { background: rgba(255,200,0,0.15); color: #ffc800; }
.undercut-risk.danger { background: rgba(255,24,1,0.15); color: #ff1801; }
.pit-event-card {
    padding: 10px;
    margin-bottom: 8px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.pit-event-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.pit-event-driver {
    font-weight: 700;
    font-size: 13px;
}
.pit-event-timing {
    font-size: 11px;
    color: var(--text-secondary);
}
.pit-event-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    font-size: 11px;
}
.pit-event-stat-label {
    font-size: 9px;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
}
.pit-event-stat-value {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ─── ERS Track Map Panel ────────────────────────────────────────────────── */
.ers-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.ers-controls select {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 5px 8px;
    border-radius: var(--radius-sm);
    font-size: 12px;
}
.ers-summary {
    padding: 4px 10px 6px;
    font-size: 11px;
    color: var(--text-muted);
}
.ers-mode-history {
    padding: 0 10px 8px;
}
.ers-mode-changes-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.ers-mode-change-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 11px;
}
.ers-mc-mode { font-size: 11px; min-width: 55px; }
.ers-mc-track { font-size: 10px; }
.ers-mc-battery { font-size: 10px; color: var(--green); }
.quali-results-view { padding: 0 4px; }
.ers-map-body {
    display: flex;
    gap: 0;
}
.ers-map-body .track-map-container {
    flex: 1;
    min-width: 0;
    height: 350px;
    min-height: 250px;
    max-height: 450px;
}
.ers-legend {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-input);
    border-left: 1px solid var(--border);
    white-space: nowrap;
}
.ers-legend-item { display: flex; align-items: center; gap: 6px; }
.ers-legend-swatch {
    width: 20px;
    height: 5px;
    border-radius: 3px;
    flex-shrink: 0;
}
.ers-mode-none { background: #666; }
.ers-mode-medium { background: #3498db; }
.ers-mode-hotlap { background: #f1c40f; }
.ers-mode-overtake { background: #ff6b35; }

/* ─── Small Utility Buttons ──────────────────────────────────────────────── */
.btn-xs { font-size: 14px; padding: 2px 6px; cursor: pointer; opacity: 0.5; background: none; border: none; color: var(--text-muted); vertical-align: middle; }
.btn-xs:hover { opacity: 1; color: var(--text); }

/* ─── How to Use ─────────────────────────────────────────────────────────── */
.howto-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.howto-content { max-width: 760px; margin: 0 auto; padding: 0 20px 40px; display: flex; flex-direction: column; gap: 16px; }
.howto-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
}
.howto-card h3 {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.howto-content p { color: var(--text-muted); line-height: 1.7; margin: 8px 0; font-size: 13px; }
.howto-content strong { color: var(--text); }
.howto-content code { background: var(--bg-input); padding: 2px 6px; border-radius: 3px; font-size: 12px; }
.howto-content a { color: var(--red); }
.howto-content ol, .howto-content ul {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.8;
    padding-left: 20px;
    margin: 8px 0;
}
.howto-content li { margin: 4px 0; }
.howto-content li strong { color: var(--text); }
.howto-tiers { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.howto-tier {
    display: flex;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg);
    border-radius: var(--radius);
    font-size: 13px;
    line-height: 1.6;
}
.howto-tier strong { color: var(--text); min-width: 70px; flex-shrink: 0; }
.howto-tier span { color: var(--text-muted); }
.howto-settings {
    width: 100%;
    margin: 10px 0;
    font-size: 13px;
    border-collapse: collapse;
}
.howto-settings td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
}
.howto-settings td:first-child { font-weight: 600; color: var(--text); white-space: nowrap; width: 140px; }
.howto-settings tr:last-child td { border-bottom: none; }
.howto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}
.howto-grid-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    background: var(--bg);
    border-radius: var(--radius);
    font-size: 13px;
}
.howto-grid-item strong { color: var(--text); font-size: 12px; }
.howto-grid-item span { color: var(--text-muted); line-height: 1.5; }
.howto-help { text-align: center; }
.howto-help h3 { margin-bottom: 8px; }

/* ─── Lap Counter ────────────────────────────────────────────────────────── */
.lap-counter-card { padding: 8px 16px; text-align: center; }
.lap-counter-content { display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.lap-counter-value { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.lap-counter-label { font-size: 12px; text-transform: uppercase; color: var(--text-muted); margin-right: 4px; }
.lap-counter-sep { font-size: 20px; color: var(--text-muted); }
.lap-counter-remaining { font-size: 13px; color: var(--text-muted); margin-left: 8px; }

/* ─── Admin Panel ────────────────────────────────────────────────────────── */

.btn-admin { color: var(--orange) !important; }
.btn-admin:hover { background: rgba(255, 140, 0, 0.1) !important; }

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.admin-stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
}
.admin-stat-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.admin-stat-label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
}
.admin-tab {
    background: none;
    border: none;
    color: var(--text-muted);
    padding: 8px 16px;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
}
.admin-tab:hover { color: var(--text); }
.admin-tab.active {
    color: var(--orange);
    border-bottom-color: var(--orange);
}

.admin-tab-content { display: none; }
.admin-tab-content.active { display: block; }

/* Sub-tabs inside a single admin tab (used by Race ERS Maps:
   Deployment vs Recovery Heat Maps). Visually lighter than the
   main .admin-tabs row so it reads as nested. */
.ers-subtabs {
    display: flex;
    gap: 2px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ers-subtab {
    background: none;
    border: none;
    color: var(--text-muted, #888);
    padding: 7px 14px;
    font-size: 12px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.ers-subtab:hover { color: var(--text, #eee); }
.ers-subtab.active {
    color: var(--orange, #ff1801);
    border-bottom-color: var(--orange, #ff1801);
}

/* Recovery heat-map legend: a gradient strip showing cool → hot */
.ers-recovery-legend {
    display: flex;
    gap: 12px;
    margin-top: 6px;
    font-size: 0.75rem;
    align-items: center;
}
.ers-recovery-legend-grad {
    width: 160px;
    height: 10px;
    border-radius: 2px;
    background: linear-gradient(to right, #1e3a8a, #06b6d4, #22c55e, #eab308, #ff1801);
    border: 1px solid rgba(255,255,255,0.1);
}

/* In the recovery heat-map view, hide controls that are ERS-mode
   specific — they'd be noise in heat mode. Track Name / Date / Legend
   / Info stay visible; they control generic on-canvas pills that the
   recovery renderer also paints (info shows driver + lap / driver +
   "Aggregate across N laps"; legend shows the recovery gradient). */
.ers-session-card[data-map-type="recovery-heat"] label:has(> .ers-toggle-battery),
.ers-session-card[data-map-type="recovery-heat"] label:has(> .ers-label-size),
.ers-session-card[data-map-type="recovery-heat"] label:has(> .ers-toggle-detailed),
.ers-session-card[data-map-type="recovery-heat"] label:has(> .ers-color-scheme),
.ers-session-card[data-map-type="recovery-heat"] .ers-custom-colors {
    display: none !important;
}

/* Feature Flags */
.admin-flag-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(42, 42, 58, 0.5);
}
.admin-flag-info { flex: 1; }
.admin-flag-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
}
.admin-flag-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}
.admin-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    cursor: pointer;
    display: inline-block;
}
.admin-toggle input { opacity: 0; width: 0; height: 0; }
.admin-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--bg-input);
    border-radius: 12px;
    border: 1px solid var(--border);
    transition: 0.2s;
}
.admin-toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 2px;
    top: 2px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: 0.2s;
}
.admin-toggle input:checked + .admin-toggle-slider {
    background: rgba(0, 212, 90, 0.2);
    border-color: var(--green);
}
.admin-toggle input:checked + .admin-toggle-slider::before {
    transform: translateX(20px);
    background: var(--green);
}

/* Track Maps List */
.admin-track-group { margin-bottom: 16px; }
.admin-track-group-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.admin-map-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 4px;
    border-bottom: 1px solid rgba(42, 42, 58, 0.3);
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.admin-map-item:hover { background: var(--bg-hover); }
.admin-map-item.active-map {
    border-left: 3px solid var(--green);
    padding-left: 8px;
}
.map-active-badge {
    font-size: 10px;
    background: rgba(0, 212, 90, 0.15);
    color: var(--green);
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 700;
    white-space: nowrap;
}
.admin-map-meta {
    font-size: 12px;
    color: var(--text-muted);
}

.btn-danger {
    background: rgba(255, 24, 1, 0.15);
    color: #ff4444;
    border: 1px solid rgba(255, 24, 1, 0.3);
}
.btn-danger:hover {
    background: rgba(255, 24, 1, 0.25);
}

/* Log tables */
.admin-log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.admin-log-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.admin-detail-cell {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-hex {
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

/* ── Capacity Tab ── */
.capacity-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 768px) {
    .capacity-grid { grid-template-columns: 1fr; }
}
.capacity-metric { margin-bottom: 10px; }
.capacity-metric-header {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 4px;
}
.capacity-bar {
    height: 6px;
    background: var(--bg-input);
    border-radius: 3px;
    overflow: hidden;
}
.capacity-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--green);
    transition: width 0.4s ease, background 0.4s ease;
    width: 0%;
}
.capacity-stat-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.capacity-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 80px;
}
.capacity-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.capacity-stat-label {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
}
.capacity-estimate {
    font-size: 13px;
    padding: 8px 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.input-sm {
    font-size: 12px;
    padding: 4px 8px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
}


/* ─── Team Admin Panel ──────────────────────────────────────────────────── */

.btn-team-admin { color: #10b981 !important; }
.btn-team-admin:hover { background: rgba(16, 185, 129, 0.1) !important; }

.team-admin-tab {
    background: none;
    border: none;
    color: var(--text-muted);
    padding: 8px 16px;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
}
.team-admin-tab:hover { color: var(--text); }
.team-admin-tab.active {
    color: #10b981;
    border-bottom-color: #10b981;
}

.team-admin-tab-content { display: none; }
.team-admin-tab-content.active { display: block; }


/* ─── Team Setup Wizard ─────────────────────────────────────────────────── */

.wizard-steps {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}
.wizard-step {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12px;
    color: var(--text-muted);
    transition: all 0.2s;
}
.wizard-step.active {
    border-color: #10b981;
    color: #10b981;
    background: rgba(16, 185, 129, 0.05);
}
.wizard-step.completed {
    border-color: rgba(16, 185, 129, 0.3);
    color: rgba(16, 185, 129, 0.7);
}
.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--border);
    font-weight: 700;
    font-size: 11px;
    flex-shrink: 0;
}
.wizard-step.active .step-num {
    background: #10b981;
    color: #fff;
}
.wizard-step.completed .step-num {
    background: rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}

/* ─── Role Chips ────────────────────────────────────────────────────── */

.role-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    margin: 3px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
    user-select: none;
}

.role-chip:hover {
    background: rgba(255, 255, 255, 0.08);
}

.role-chip input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--role-color, #10b981);
}

.role-chip input[type="checkbox"]:disabled {
    opacity: 0.5;
}

.role-chip-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.role-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEAM TELEM TAB — Replicates Team Telemetry software aesthetic
   All classes prefixed .tt- to avoid collisions
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Sub-tab bar ─────────────────────────────────────────────────────────── */
.tt-subtab-bar {
    display: flex; gap: 2px; background: #050508; padding: 4px 4px 0;
    border-bottom: 1px solid #1a1a2a; overflow-x: auto;
}
.tt-subtab {
    padding: 6px 14px; background: transparent; border: none;
    border-bottom: 2px solid transparent;
    color: #6a6a8a; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s;
}
.tt-subtab:hover { color: #06b6d4; }
.tt-subtab.active { color: #06b6d4; border-bottom-color: #06b6d4; background: rgba(6,182,212,.05); }

/* ── Panel visibility ────────────────────────────────────────────────────── */
.tt-panel { display: none; padding: 8px; position: relative; }
.tt-panel.active { display: block; }

/* ── Card ────────────────────────────────────────────────────────────────── */
.tt-card {
    background: #08080e; border: 1px solid #1a1a2a; border-radius: 4px;
    padding: 8px; margin-bottom: 8px;
}
.tt-card-header {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
    color: #06b6d4; margin-bottom: 6px; padding-bottom: 4px;
    border-bottom: 1px solid #1a1a2a; display: flex; align-items: center; gap: 12px;
}

/* ── Font size toggle button group ───────────────────────────────────────── */
.tt-font-group {
    display: inline-flex; margin-left: auto; gap: 0;
}
.tt-font-btn {
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--bg-hover);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.15s;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.4;
}
.tt-font-btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.tt-font-btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-left: none; }
.tt-font-btn:hover { color: var(--text-primary); background: #282840; border-color: var(--border-light); }

/* ── Data table ──────────────────────────────────────────────────────────── */
.tt-data-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.tt-data-table th {
    padding: 4px 6px; font-size: 10px; font-weight: 700; color: #06b6d4;
    text-transform: uppercase; letter-spacing: .3px; border-bottom: 1px solid #1a1a2a;
    white-space: nowrap; text-align: left; position: sticky; top: 0; background: #08080e; z-index: 1;
}
.tt-data-table td { padding: 3px 6px; border-bottom: 1px solid rgba(26,26,42,.4); white-space: nowrap; color: #ccc; }
.tt-data-table tr:hover td { background: rgba(6,182,212,.03); }
.tt-data-table.tt-compact { font-size: 10px; }
.tt-data-table.tt-compact td, .tt-data-table.tt-compact th { padding: 2px 4px; }
.tt-data-table tr.tt-player-row td { background: rgba(6,182,212,.08); }
.tt-data-table tr.tt-player-row td:first-child { border-left: 2px solid #06b6d4; }
.tt-sector-purple { color: #a855f7 !important; font-weight: 700; }
.tt-sector-green { color: #00d45a !important; font-weight: 700; }
.tt-time-yellow { color: #ffc800; }
.tt-team-dot { display: inline-block; width: 4px; height: 14px; border-radius: 1px; vertical-align: middle; }
.tt-tyre-badge {
    display: inline-block; padding: 1px 5px; border-radius: 3px; font-size: 10px;
    font-weight: 700; line-height: 1.3; text-align: center;
}
.tt-tyre-s { background: #ff1801; color: #fff; }
.tt-tyre-m { background: #ffc800; color: #000; }
.tt-tyre-h { background: #e0e0e0; color: #000; }
.tt-tyre-i { background: #00d45a; color: #000; }
.tt-tyre-w { background: #0090ff; color: #fff; }
.tt-table-wrap { overflow-x: auto; max-height: 75vh; overflow-y: auto; }

/* ── Timing header bar ───────────────────────────────────────────────────── */
.tt-timing-header {
    display: flex; gap: 16px; align-items: center; padding: 6px 10px;
    background: #050508; border-bottom: 1px solid #1a1a2a;
    font-size: 13px; font-weight: 600; color: #ccc; flex-wrap: wrap;
}
.tt-th-item { white-space: nowrap; }
.tt-th-cyan { color: #06b6d4; }
.tt-th-green { color: #00d45a; }
.tt-th-red { color: #ff1801; }
.tt-th-yellow { color: #ffc800; }

/* ── Strategy grid ───────────────────────────────────────────────────────── */
.tt-strategy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tt-weather-info { grid-column: 1; }
.tt-rain-graph { grid-column: 2; }
.tt-tyre-sets-card { grid-column: 1 / -1; }
.tt-radio { grid-column: 1; }
.tt-session-info { grid-column: 2; }

/* Weather columns */
.tt-weather-columns { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 8px; }
.tt-wx-col {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 8px; background: #0c0c14; border: 1px solid #1a1a2a;
    border-radius: 3px; min-width: 68px; flex-shrink: 0;
}
.tt-wx-label { color: #aaa; font-size: 10px; font-weight: 700; }
.tt-wx-icon { font-size: 22px; line-height: 1.2; }
.tt-wx-rain { color: #0090ff; font-weight: 700; font-size: 13px; }
.tt-wx-temp { color: #ff1801; font-size: 10px; }
.tt-forecast-row { display: flex; gap: 4px; align-items: center; padding: 4px 0; overflow-x: auto; }
.tt-forecast-row .tt-wx-label { margin-right: 4px; }

/* Rain chart */
#tt-rain-canvas { width: 100%; height: 180px; display: block; background: #0c0c14; border-radius: 3px; }
.tt-rain-legend { display: flex; gap: 12px; font-size: 10px; color: #888; margin-left: auto; }
.tt-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.tt-legend-swatch { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* Tyre sets row */
.tt-tyre-sets { display: flex; gap: 4px; overflow-x: auto; padding: 4px 0; }
.tt-tyre-set {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 4px 5px; background: #0c0c14; border: 1px solid #1a1a2a;
    border-radius: 3px; min-width: 56px; flex-shrink: 0; font-size: 9px; color: #aaa;
}
.tt-tyre-set.tt-fitted { border-color: #06b6d4; background: rgba(6,182,212,.06); }
.tt-tyre-set.tt-unavail { opacity: .35; }
.tt-ts-num { font-weight: 700; color: #ccc; font-size: 10px; }
.tt-ts-session { color: #666; font-size: 8px; text-transform: uppercase; font-weight: 700; }
.tt-ts-compound {
    width: 24px; height: 24px; border-radius: 50%; border: 2px solid #333;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 11px; color: #000; margin: 2px 0;
}
.tt-ts-actual { color: #888; font-size: 8px; }
.tt-ts-wear { font-size: 9px; }
.tt-ts-life { color: #666; font-size: 8px; }
.tt-ts-delta { font-weight: 700; font-size: 9px; }
.tt-delta-faster { color: #00d45a; }
.tt-delta-slower { color: #ff1801; }
.tt-delta-neutral { color: #888; }

/* Radio log */
.tt-radio-log { max-height: 200px; overflow-y: auto; font-size: 11px; color: #aaa; line-height: 1.5; }
.tt-radio-log .tt-radio-time { color: #00d45a; margin-right: 6px; }
.tt-radio-log .tt-radio-penalty { color: #ff1801; }
.tt-radio-filter { font-size: 10px; color: #666; margin-left: auto; display: flex; align-items: center; gap: 4px; font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Session info grid */
#tt-session-grid { display: flex; flex-direction: column; gap: 2px; }
.tt-si-row { display: flex; justify-content: space-between; padding: 3px 4px; font-size: 12px; }
.tt-si-row:nth-child(odd) { background: rgba(12,12,20,.5); border-radius: 2px; }
.tt-si-label { color: #888; }
.tt-si-value { color: #eee; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Vehicle Status ──────────────────────────────────────────────────────── */
.tt-vehicle-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tt-car-diagram-card { min-height: 380px; }
.tt-vehicle-right { display: flex; flex-direction: column; gap: 8px; }
.tt-sectors-row { display: flex; gap: 8px; }
.tt-sector-box {
    flex: 1; background: #0c0c14; border: 1px solid #1a1a2a; border-radius: 3px;
    padding: 8px; text-align: center;
}
.tt-sector-box-label { font-size: 10px; color: #06b6d4; font-weight: 700; display: block; margin-bottom: 2px; }
.tt-sector-box-value { font-size: 16px; font-weight: 700; color: #eee; font-variant-numeric: tabular-nums; }
.tt-vs-row {
    display: flex; justify-content: space-between; padding: 4px 6px; font-size: 12px;
    border-bottom: 1px solid rgba(26,26,42,.3);
}
.tt-vs-label { color: #888; }
.tt-vs-value { color: #eee; font-weight: 600; font-variant-numeric: tabular-nums; }

/* SVG car diagram */
.tt-car-svg { width: 100%; max-width: 280px; margin: 0 auto; display: block; }
.tt-car-svg text { font-family: inherit; }

/* ── Rival ───────────────────────────────────────────────────────────────── */
.tt-rival-top { display: flex; align-items: center; justify-content: space-between; padding: 8px; border-bottom: 1px solid #1a1a2a; }
.tt-select { background: #0c0c14; border: 1px solid #1a1a2a; color: #ccc; padding: 4px 8px; border-radius: 3px; font-size: 12px; }
.tt-rival-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; }
.tt-rival-badge { grid-column: 1; }
.tt-rival-car-wrap { grid-column: 2; min-height: 300px; }
.tt-lap-chart-card { grid-column: 1 / -1; }
.tt-rival-comp-table { grid-column: 1 / -1; }
.tt-lap-comparison { grid-column: 1; }
.tt-misc-card { grid-column: 2; }
#tt-rival-lap-canvas { width: 100%; background: #0c0c14; border-radius: 3px; }
.tt-lap-chart-legend { display: flex; gap: 12px; font-size: 10px; color: #888; padding: 4px 0; }

/* Rival badge content */
.tt-rb-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tt-rb-number {
    width: 40px; height: 40px; border-radius: 4px; display: flex; align-items: center;
    justify-content: center; font-weight: 900; font-size: 16px; color: #fff;
}
.tt-rb-name { font-size: 16px; font-weight: 700; color: #eee; }
.tt-rb-team { font-size: 11px; color: #888; }
.tt-rb-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tt-rb-stat { background: #0c0c14; border-radius: 3px; padding: 6px; text-align: center; }
.tt-rb-stat-label { font-size: 9px; color: #06b6d4; font-weight: 700; text-transform: uppercase; display: block; }
.tt-rb-stat-value { font-size: 14px; font-weight: 700; color: #eee; font-variant-numeric: tabular-nums; }

/* Lap comparison grid */
#tt-lap-comparison-grid { font-size: 11px; }
.tt-lc-header-row, .tt-lc-row {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; padding: 3px 4px;
}
.tt-lc-header-row { border-bottom: 1px solid #1a1a2a; margin-bottom: 2px; }
.tt-lc-col-head { color: #06b6d4; font-weight: 700; text-align: center; font-size: 10px; text-transform: uppercase; }
.tt-lc-label { color: #888; }
.tt-lc-value { text-align: center; font-weight: 600; color: #ccc; font-variant-numeric: tabular-nums; }
.tt-lc-faster { color: #00d45a !important; }
.tt-lc-slower { color: #ff1801 !important; }

/* Misc grid */
#tt-rival-misc-grid { font-size: 11px; }
.tt-misc-row {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; padding: 3px 4px;
    border-bottom: 1px solid rgba(26,26,42,.3);
}
.tt-misc-label { color: #888; }
.tt-misc-val { text-align: center; font-weight: 600; color: #ccc; font-variant-numeric: tabular-nums; }

/* ── Setup ───────────────────────────────────────────────────────────────── */
.tt-setup-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px; }
.tt-setup-table-head {
    display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 8px;
    padding: 4px 6px; font-size: 10px; color: #06b6d4; font-weight: 700;
    border-bottom: 1px solid #1a1a2a; margin-bottom: 4px; text-transform: uppercase;
}
.tt-setup-label-head { }
.tt-setup-val-head { text-align: center; }
.tt-setup-row {
    display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 8px;
    padding: 3px 6px; font-size: 12px; border-bottom: 1px solid rgba(26,26,42,.3);
}
.tt-setup-label { color: #888; }
.tt-setup-val { text-align: center; color: #eee; font-weight: 600; font-variant-numeric: tabular-nums; }
.tt-setup-val.tt-diff-pos { color: #00d45a; }
.tt-setup-val.tt-diff-neg { color: #ff1801; }
.tt-telem-charts { }
#tt-setup-telem-info { font-size: 11px; color: #888; margin-bottom: 8px; }
.tt-setup-charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tt-setup-charts-grid canvas { width: 100%; background: #0c0c14; border-radius: 3px; }

/* ── Inputs Comparison ───────────────────────────────────────────────────── */
.tt-inputs-controls {
    display: flex; gap: 16px; flex-wrap: wrap; padding: 10px 0 6px;
    border-bottom: 1px solid #1a1a2e;
}
.tt-input-driver-block {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.tt-input-driver-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    min-width: 60px;
}
.tt-inp-sel {
    min-width: 120px; max-width: 200px; font-size: 11px; padding: 4px 6px;
    background: #0c0c14; border: 1px solid #1a1a2e; color: #e0e0e0; border-radius: 3px;
}
.tt-inp-sel:focus { border-color: #06b6d4; outline: none; }
.tt-btn-sm {
    background: #1a1a2e; border: 1px solid #2a2a3e; color: #e0e0e0;
    padding: 3px 8px; border-radius: 3px; cursor: pointer; font-size: 11px;
}
.tt-btn-sm:hover { background: #2a2a3e; border-color: #06b6d4; }
.tt-inputs-badges {
    display: flex; gap: 12px; padding: 6px 0; font-size: 11px; color: #888;
}
.tt-inputs-badges .tt-inp-badge {
    display: flex; align-items: center; gap: 6px; padding: 4px 10px;
    background: #0c0c14; border: 1px solid #1a1a2e; border-radius: 4px;
}
.tt-inputs-badges .tt-inp-badge-dot {
    width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
/* ── Playback bar (above charts) ──────────────────────────────────── */
.tt-inp-playback-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 0; border-bottom: 1px solid #1a1a2e; margin-bottom: 4px;
}
.tt-inp-slider {
    flex: 1; -webkit-appearance: none; appearance: none;
    height: 4px; background: #1a1a2e; border-radius: 2px; outline: none;
}
.tt-inp-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 12px; height: 12px; border-radius: 50%;
    background: #06b6d4; cursor: pointer; border: 2px solid #08080e;
}
.tt-inp-slider::-moz-range-thumb {
    width: 12px; height: 12px; border-radius: 50%;
    background: #06b6d4; cursor: pointer; border: 2px solid #08080e;
}
.tt-inp-dist-label {
    font-size: 10px; color: #888; min-width: 44px; text-align: right; font-variant-numeric: tabular-nums;
}
.tt-inp-playback-vals {
    font-size: 10px; color: #777; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; font-variant-numeric: tabular-nums;
}
/* ── Two-column layout: map left, charts right ───────────────────── */
.tt-inp-main-layout {
    display: grid; grid-template-columns: minmax(250px, 2fr) 3fr;
    gap: 8px; margin-top: 6px; align-items: start;
}
.tt-inp-map-col {
    display: flex; flex-direction: column;
    position: sticky; top: calc(var(--topbar-height, 48px) + 8px);
    align-self: start; max-height: calc(100vh - var(--topbar-height, 48px) - 16px);
}
.tt-inp-map-card { min-height: auto; max-width: none; flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.tt-inp-map-card canvas { width: 100%; flex: 1; min-height: 300px; }
/* ── 3D Racing Line Map ────────────────────────────────────────── */
.tt-inp-zoom-card { min-height: auto; max-width: none; flex: 1; overflow: hidden; display: flex; flex-direction: column; margin-top: 8px; }
.tt-inp-zoom-card .tt-card-header { display: flex; justify-content: space-between; align-items: center; }
.tt-inp-3d-container { width: 100%; min-height: 400px; flex: 1; background: #06060c; position: relative; overflow: hidden; }
.tt-inp-3d-container canvas { display: block; width: 100% !important; height: 100% !important; }
.tt-inp-3d-hud { position: absolute; top: 8px; left: 8px; pointer-events: none; z-index: 10; font-family: 'JetBrains Mono', monospace; }
.tt-inp-3d-controls { display: flex; gap: 4px; align-items: center; }
.tt-inp-3d-controls .tt-btn-sm { font-size: 9px; padding: 2px 8px; }
/* Boundary-data indicator on the Racing Lines card header. Tells the
   engineer at a glance whether THIS lap's track has gen-track-maps
   boundary edges driving the per-vertex road width. Empty = either
   no lap loaded or the track has nothing (so we hide rather than
   show a default state). When populated:
     "✓ Boundary data"   — green, edges are driving width per vertex.
     "Centerline only"   — amber, the fixed ±12m fallback is in use;
                           drive boundary laps on gen-track-maps.php
                           to populate. */
.tt-inp-3d-boundary-badge {
    font-size: 9px; font-weight: 700; padding: 1px 6px;
    border-radius: 3px; margin-left: 8px;
    border: 1px solid transparent;
    font-family: 'JetBrains Mono', monospace;
}
.tt-inp-3d-boundary-badge:empty { display: none; }
.tt-inp-3d-boundary-badge.has-boundary {
    background: rgba(0,212,90,0.18); color: #6ee7b7;
    border-color: rgba(0,212,90,0.5);
}
.tt-inp-3d-boundary-badge.fallback {
    background: rgba(251,191,36,0.15); color: #fbbf24;
    border-color: rgba(251,191,36,0.45);
}
.tt-inp-3d-playback {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 8px; border-top: 1px solid #1a1a2e;
    background: #08080e;
}
.tt-inp-3d-playback .tt-inp-slider { flex: 1; }
#tt-inp-3d-speed { font-size: 9px; min-width: 24px; text-align: center; }
.tt-inp-charts-col { display: flex; flex-direction: column; min-width: 0; }
/* ── Input charts ─────────────────────────────────────────────────── */
.tt-inputs-charts {
    display: flex; flex-direction: column; gap: 0; flex: 1;
}
.tt-chart-row {
    background: #08080e; border-radius: 3px;
    border: 1px solid #111122; transition: none;
}
.tt-chart-label {
    display: flex; align-items: center; gap: 6px; padding: 6px 6px 2px; font-size: 9px; font-weight: 600;
    color: #06b6d4; text-transform: uppercase; letter-spacing: 0.5px;
    /* pointer-events MUST stay auto here — the label is the drag handle
       for chart-row reordering (see .tt-chart-drag-handle below). A
       previous "pointer-events: none" silently broke drag entirely
       because the browser couldn't deliver dragstart to the label. */
}
.tt-chart-legend { display: inline-flex; align-items: center; gap: 10px; margin-left: 8px; font-size: 10px; font-weight: 700; text-transform: none; }
.tt-chart-legend .lg-item { display: inline-flex; align-items: center; gap: 5px; }
.tt-chart-legend .lg-swatch { display: inline-block; width: 22px; height: 4px; }
/* Solid swatch — driver 1's solid line. Plain background bar. */
.tt-chart-legend .lg-swatch-solid { border-radius: 1px; }
/* Dashed swatch — driver 2's dashed line. CSS gradient draws three
   dashes the same shape the canvas chart's setLineDash([8,5]) does, so
   the legend visually matches the actual line treatment. The colour
   comes via the --swcol custom property set inline by the renderer. */
.tt-chart-legend .lg-swatch-dashed {
    background: repeating-linear-gradient(
        to right,
        var(--swcol) 0,
        var(--swcol) 5px,
        transparent 5px,
        transparent 8px
    );
}
.tt-chart-row canvas { width: 100%; display: block; cursor: crosshair; height: 180px; }
.tt-chart-row.tt-dragging canvas { cursor: grabbing; }

/* Wheel-selection toggle buttons (TL05 charts: tyre temps, tyre wear,
   brake temps). Sit inline within the chart label area. Active wheels
   get a coloured pill matching the chart trace; inactive wheels go
   muted grey so the user can see which wheels they've turned off
   without losing the layout. */
.tt-wheel-toggles {
    display: inline-flex;
    gap: 3px;
    margin-left: 10px;
    vertical-align: middle;
}
.tt-wheel-btn {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.45);
    padding: 1px 7px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.tt-wheel-btn:hover { background: rgba(255,255,255,0.10); color: #fff; }
.tt-wheel-btn.active { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.30); }
/* Per-wheel accent: each button gets its own active-state colour so
   the toggle visually maps to the trace it controls (RL=red, RR=orange,
   FL=blue, FR=cyan). data-wheel="0..3" matches the canvas array order. */
.tt-wheel-btn[data-wheel="0"].active { border-color: #ef4444; box-shadow: inset 0 0 0 1px #ef4444; }
.tt-wheel-btn[data-wheel="1"].active { border-color: #f97316; box-shadow: inset 0 0 0 1px #f97316; }
.tt-wheel-btn[data-wheel="2"].active { border-color: #3b82f6; box-shadow: inset 0 0 0 1px #3b82f6; }
.tt-wheel-btn[data-wheel="3"].active { border-color: #06b6d4; box-shadow: inset 0 0 0 1px #06b6d4; }

/* Drag-and-drop reordering — chart label area becomes the drag handle.
   Cursor cues + visual affordance so users know the rows are
   draggable. The grip glyph (⋮⋮) appears on hover at the left edge of
   the label, matching common drag-handle conventions. */
.tt-chart-drag-handle {
    cursor: grab;
    user-select: none;
    position: relative;
    padding-left: 18px; /* room for the hover-only grip glyph */
}
.tt-chart-drag-handle::before {
    content: '⋮⋮';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.25);
    font-size: 12px;
    letter-spacing: -1px;
    line-height: 1;
    transition: color 0.12s;
    pointer-events: none;
}
.tt-chart-drag-handle:hover::before {
    color: rgba(255, 255, 255, 0.65);
}
.tt-chart-drag-handle:active { cursor: grabbing; }
.tt-chart-drag-handle:active::before {
    color: var(--v2-accent, #e63322);
}
.tt-chart-row-dragging {
    opacity: 0.4;
    outline: 1px dashed rgba(230, 51, 34, 0.6);
}
/* Drop-before / drop-after indicate where the dragged row will land
   relative to the row currently under the cursor. The brand red edge
   reads cleanly against the dark chart bg. */
.tt-chart-row-drop-before {
    box-shadow: inset 0 3px 0 var(--v2-accent, #e63322);
}
.tt-chart-row-drop-after {
    box-shadow: inset 0 -3px 0 var(--v2-accent, #e63322);
}
/* ── Sector labels below charts ──────────────────────────────────── */
.tt-inp-sector-labels {
    display: flex; gap: 0; height: 18px; position: relative; margin-top: 1px;
}
.tt-inp-sector-label {
    font-size: 9px; color: #666; text-align: center;
    border-left: 1px dashed #333; padding-top: 2px; letter-spacing: 0.5px;
}
.tt-inp-sector-label:first-child { border-left: none; }
/* ── Floating tooltip ────────────────────────────────────────────── */
.tt-inp-tooltip {
    position: absolute; background: #111118ee; border: 1px solid #2a2a3e;
    border-radius: 4px; padding: 6px 10px; font-size: 10px; color: #ccc;
    pointer-events: none; z-index: 50; white-space: nowrap;
    font-variant-numeric: tabular-nums; box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* ── Sharing popover ─────────────────────────────────────────────────────── */
.sharing-popover {
    position: absolute; top: 100%; right: 0; margin-top: 4px; z-index: 200;
    background: #111118; border: 1px solid #2a2a3e; border-radius: 6px;
    padding: 10px 14px; min-width: 200px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.6);
}
.sharing-row {
    display: flex; align-items: center; gap: 8px; padding: 4px 0;
}
.sharing-label {
    font-size: 11px; color: #888; min-width: 36px;
}
.sharing-value {
    font-size: 13px; color: #eee; font-family: monospace; font-weight: 600; flex: 1;
}
.sharing-copy {
    background: #1a1a2e; border: 1px solid #2a2a3e; border-radius: 3px;
    color: #888; font-size: 10px; padding: 2px 8px; cursor: pointer;
    transition: all 0.15s;
}
.sharing-copy:hover { background: #2a2a3e; color: #fff; }

/* ── Admin / data tables ───────────────────────────────────────────────────
   The default styling for the Lap Leaderboard, Best Laps, Sessions,
   Input Telemetry lists, and Admin tabs. Three changes from the
   minimal-starter version that was here before:

   1. Row padding bumped from 5/6px to 8/10px. "Dense" was really
      "crammed" — rows were touching, which made it feel like a
      spreadsheet rather than a curated view.
   2. Tabular-nums on tbody td by default, so every numeric column
      (lap times, sectors, gaps, deltas) lines up on the decimal
      regardless of whether the JS remembered to ask for it inline.
   3. Hover row lights up at 4% alpha (was 3%) and adds a left-border
      cyan accent on the first cell of the hovered row — same
      interactive-cue colour used by focus rings / links / section
      headings, so hover reads as "this row is the one I'm about to
      interact with".
   ──────────────────────────────────────────────────────────────────── */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.admin-table th {
    padding: 8px 10px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #888);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.admin-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}
.admin-table tbody tr {
    transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.admin-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
}
.admin-table tbody tr:last-child td {
    border-bottom: 0;
}
/* Numeric column helpers — use on th/td where you want mono + right-align
   without writing inline styles each time. */
.admin-table .col-num,
.admin-table .col-time {
    text-align: right;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-variant-numeric: tabular-nums;
}
.admin-table .col-center { text-align: center; }
.admin-table .col-muted  { color: var(--text-muted); font-size: 11px; }

/* ── Rank pills ────────────────────────────────────────────────────────────
   The "#" column on leaderboard-style tables. Replaces emoji medals
   (🥇🥈🥉) which rendered wildly differently across OSes (Windows
   served a wrinkled-paper-brown P1 icon that looked like a bug
   report). Numeric rank in a coloured pill — clean, consistent,
   scannable. Keep the gold/silver/bronze metaphor only for podium;
   everything else is neutral. */
.rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    border: 1px solid transparent;
}
.rank-1 { background: rgba(255, 215, 0, 0.14); color: #ffd700; border-color: rgba(255, 215, 0, 0.2); }
.rank-2 { background: rgba(192, 192, 192, 0.12); color: #d4d4d4; border-color: rgba(192, 192, 192, 0.18); }
.rank-3 { background: rgba(205, 127, 50, 0.14); color: #e0a66f; border-color: rgba(205, 127, 50, 0.22); }

/* ── Loading skeletons ─────────────────────────────────────────────────────
   "Loading..." in muted grey text is the signature of a prototype. Real
   apps show the shape of the coming content as shimmering placeholder
   rectangles — it looks finished AND gives a perceived performance
   bump because the layout doesn't jump when data arrives.

   Usage:
     <span class="skeleton skeleton-text"></span>
     <div  class="skeleton skeleton-row"></div>
     <div  class="skeleton" style="width:200px;height:40px;"></div>

   Shimmer uses a sliding gradient, capped at 1.2s to stay polite.
   ──────────────────────────────────────────────────────────────────── */
@keyframes skeleton-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
.skeleton {
    display: inline-block;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.04) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    border-radius: var(--radius-sm);
    color: transparent;
    user-select: none;
    pointer-events: none;
}
.skeleton-text    { width: 80%; height: 12px; margin: 4px 0; }
.skeleton-title   { width: 40%; height: 18px; margin: 6px 0 12px; }
.skeleton-row     { width: 100%; height: 36px; margin-bottom: 6px; }
.skeleton-chip    { width: 60px; height: 20px; border-radius: 999px; }
.skeleton-table {
    display: flex; flex-direction: column; gap: 4px;
    padding: 8px 0;
}

/* Respect reduced-motion — collapse shimmer to a static muted block */
@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; }
}

/* ── Empty states ──────────────────────────────────────────────────────────
   "No X found" in muted grey text gives up too early. A proper empty
   state explains WHY you're seeing nothing and gives the user a path
   to fix it — even if that's just "come back after a session".

   Usage:
     <div class="empty-state">
       <div class="empty-state__icon">...</div>
       <h3 class="empty-state__title">No laps recorded yet</h3>
       <p  class="empty-state__hint">Complete a qualifying lap with
          input telemetry recording enabled.</p>
       <button class="btn btn-sm btn-secondary">...optional...</button>
     </div>
   ──────────────────────────────────────────────────────────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px;
    min-height: 160px;
    color: var(--text-muted);
    gap: 8px;
}
.empty-state__icon {
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    color: var(--text-subtle);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 50%;
    margin-bottom: 8px;
}
.empty-state__icon svg { width: 24px; height: 24px; fill: currentColor; }
.empty-state__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.empty-state__hint {
    font-size: 13px;
    color: var(--text-muted);
    max-width: 420px;
    line-height: 1.5;
    margin: 0;
}
.empty-state .btn,
.empty-state .btn-sm {
    margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WEATHER TAB — Comprehensive weather & strategy view
   All classes prefixed .wt- to avoid collisions
   ═══════════════════════════════════════════════════════════════════════════ */

.wt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    padding: 8px;
}
.wt-full { grid-column: 1 / -1; }

.wt-card {
    background: #08080e;
    border: 1px solid #1a1a2a;
    border-radius: 4px;
    padding: 8px;
    min-height: 80px;
}
.wt-card-header {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #00e5ff;
    letter-spacing: .5px;
    border-bottom: 1px solid #1a1a2a;
    padding-bottom: 6px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ── Weather Summary ─── */
.wt-summary-content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.wt-sum-icon { font-size: 42px; line-height: 1; }
.wt-sum-condition { font-size: 18px; font-weight: 700; color: #fff; }
.wt-sum-detail { font-size: 11px; color: #888; }
.wt-sum-detail span { color: #ccc; font-weight: 600; }
.wt-sum-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 12px;
    border-left: 1px solid #1a1a2a;
}
.wt-sum-rain-bar {
    height: 6px;
    border-radius: 3px;
    background: #1a1a2a;
    margin-top: 4px;
    overflow: hidden;
}
.wt-sum-rain-fill { height: 100%; border-radius: 3px; background: #0090ff; transition: width .3s; }
.wt-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}
.wt-badge-perfect { background: #0a3d0a; color: #00ff88; }
.wt-badge-approx { background: #3d3a0a; color: #ffe066; }
.wt-badge-dry { background: #0a3d0a; color: #00ff88; }
.wt-badge-drying { background: #1a3d2a; color: #88ffbb; }
.wt-badge-wetting { background: #3d2a0a; color: #ffbb44; }
.wt-badge-wet { background: #0a1a3d; color: #44aaff; }

/* ── Weather Radar ─── */
.wt-radar-timeline { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-end; min-height: 60px; }
.wt-radar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 30px;
}
.wt-radar-bar {
    width: 100%;
    max-width: 28px;
    border-radius: 2px 2px 0 0;
    min-height: 2px;
    transition: height .3s;
}
.wt-radar-pct { font-size: 9px; color: #aaa; }
.wt-radar-time { font-size: 9px; color: #555; }
.wt-radar-icon { font-size: 14px; }
.wt-radar-session-label {
    font-size: 9px;
    color: #00e5ff;
    text-transform: uppercase;
    letter-spacing: .5px;
    width: 100%;
    text-align: center;
    border-top: 1px solid #1a1a2a;
    padding-top: 4px;
    margin-top: 4px;
}
.wt-rec-tyre {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
}
.wt-rain-incoming { border-color: #ff6600 !important; }

/* ── Rain Report ─── */
.wt-rr-metrics { display: flex; gap: 12px; margin-bottom: 8px; }
.wt-rr-metric { display: flex; flex-direction: column; align-items: center; flex: 1; }
.wt-rr-label { font-size: 9px; color: #666; text-transform: uppercase; }
.wt-rr-value { font-size: 16px; font-weight: 700; color: #fff; }
.wt-rain-report canvas { width: 100%; height: 100px; display: block; }

/* ── Rain Chart ─── */
.wt-rain-chart-card { max-height: 180px; }
.wt-rain-chart-card canvas { width: 100%; height: 140px; display: block; }
.wt-rain-legend { display: flex; gap: 12px; font-size: 10px; color: #888; font-weight: 400; text-transform: none; }
.wt-legend-item { display: flex; align-items: center; gap: 4px; }
.wt-legend-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* ── Forecast Timeline ─── */
.wt-weather-columns { display: flex; gap: 4px; overflow-x: auto; }
.wt-wx-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 60px;
    padding: 6px 4px;
    background: #0c0c14;
    border-radius: 4px;
    flex: 1;
}
.wt-wx-label { font-size: 9px; color: #666; text-transform: uppercase; }
.wt-wx-icon { font-size: 22px; }
.wt-wx-rain { font-size: 13px; font-weight: 700; color: #0090ff; }
.wt-wx-temp { font-size: 10px; color: #888; }
.wt-forecast-row {
    display: flex;
    gap: 2px;
    margin-top: 6px;
    flex-wrap: wrap;
    font-size: 14px;
}

/* ── Grip Degradation Trend ─── */
.wt-grip-trend canvas { width: 100%; display: block; }
.wt-grip-current {
    font-size: 12px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 3px;
    text-transform: none;
}
.wt-grip-optimal { background: #0a3d0a; color: #00ff88; }
.wt-grip-good { background: #1a3d1a; color: #66ff99; }
.wt-grip-marginal { background: #3d3a0a; color: #ffe066; }
.wt-grip-poor { background: #3d1a0a; color: #ff8844; }
.wt-grip-critical { background: #3d0a0a; color: #ff4444; }

/* ── Tyre Temperature Map ─── */
.wt-tyre-temps-content {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto auto;
    gap: 6px;
    align-items: center;
}
.wt-wheel {
    background: #0c0c14;
    border-radius: 4px;
    padding: 8px;
    text-align: center;
    border: 1px solid #1a1a2a;
}
.wt-wheel-label { font-size: 9px; color: #666; text-transform: uppercase; margin-bottom: 4px; }
.wt-wheel-surface-temp { font-size: 22px; font-weight: 700; line-height: 1.1; }
.wt-wheel-inner { font-size: 10px; color: #888; }
.wt-wheel-pressure { font-size: 10px; color: #aaa; }
.wt-wheel-wear-bar {
    height: 4px;
    background: #1a1a2a;
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;
}
.wt-wheel-wear-fill { height: 100%; border-radius: 2px; transition: width .3s; }
.wt-wheel-blister { color: #ff4444; font-size: 9px; font-weight: 700; }
.wt-tyre-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px;
}
.wt-tyre-compound-badge {
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
}
.wt-tyre-age { font-size: 10px; color: #888; }
.wt-temp-balance { font-size: 10px; color: #888; grid-column: 1 / -1; text-align: center; }
.wt-temp-balance span { font-weight: 600; }

/* ── temp color classes ─── */
.wt-temp-cold { color: #44aaff; }
.wt-temp-optimal { color: #00ff88; }
.wt-temp-hot { color: #ffaa00; }
.wt-temp-critical { color: #ff4444; }

/* ── Weather Strategy Report ─── */
.wt-strategy-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wt-strat-verdict {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.wt-strat-action { font-size: 18px; font-weight: 700; color: #fff; }
.wt-strat-reason { font-size: 11px; color: #aaa; line-height: 1.4; }
.wt-strat-pit-window {
    font-size: 12px;
    color: #00e5ff;
    padding: 4px 8px;
    background: #0a1a2a;
    border-radius: 4px;
    display: inline-block;
}
.wt-strat-forecast {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wt-strat-fc-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: #888;
}
.wt-strat-fc-row .wt-strat-fc-rain { font-weight: 700; min-width: 32px; text-align: right; }
.wt-strat-fc-bar {
    flex: 1;
    height: 6px;
    background: #1a1a2a;
    border-radius: 3px;
    overflow: hidden;
}
.wt-strat-fc-fill { height: 100%; border-radius: 3px; transition: width .3s; }
.wt-strat-inventory { display: flex; flex-direction: column; gap: 4px; }
.wt-strat-inv-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 3px;
}
.wt-strat-inv-row.wt-recommended { background: rgba(0,229,255,.1); border: 1px solid #00e5ff; }
.wt-strat-inv-badge {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
}
.wt-strat-inv-count { color: #ccc; }
.wt-strat-inv-label { color: #888; font-size: 10px; }
.wt-strategy-urgency {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 3px;
    text-transform: none;
}
.wt-urgency-high { background: #3d0a0a; color: #ff4444; }
.wt-urgency-medium { background: #3d3a0a; color: #ffe066; }
.wt-urgency-low { background: #0a3d0a; color: #00ff88; }

/* ── Surface & Conditions Intelligence ─── */
.wt-surface-content {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
.wt-intel-card {
    background: #0c0c14;
    border-radius: 4px;
    padding: 8px;
    border: 1px solid #1a1a2a;
    text-align: center;
}
.wt-intel-label { font-size: 9px; color: #666; text-transform: uppercase; letter-spacing: .3px; }
.wt-intel-value { font-size: 20px; font-weight: 700; line-height: 1.2; margin: 4px 0; }
.wt-intel-sub { font-size: 10px; color: #888; }
.wt-intel-bar {
    height: 4px;
    background: #1a1a2a;
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
}
.wt-intel-bar-fill { height: 100%; border-radius: 2px; transition: width .3s; }
.wt-intel-alert {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    margin-top: 4px;
    display: inline-block;
}

/* ── Tyre Sets ─── */
.wt-tyre-sets { display: flex; flex-wrap: wrap; gap: 4px; }
.wt-tyre-set {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: #0c0c14;
    border-radius: 4px;
    font-size: 11px;
    border: 1px solid #1a1a2a;
}
.wt-tyre-set.wt-fitted { border-color: #00e5ff; }
.wt-tyre-set.wt-unavail { opacity: .4; }
.wt-ts-num { color: #666; font-size: 9px; min-width: 36px; }
.wt-ts-session { color: #555; font-size: 9px; min-width: 24px; }
.wt-ts-compound {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    text-align: center;
    line-height: 18px;
    font-size: 10px;
    font-weight: 700;
}
.wt-ts-actual { color: #888; min-width: 30px; }
.wt-ts-wear { color: #ccc; min-width: 28px; }
.wt-ts-life { color: #888; min-width: 44px; }
.wt-ts-delta { min-width: 50px; text-align: right; }
.wt-delta-faster { color: #00ff88; }
.wt-delta-slower { color: #ff4444; }
.wt-delta-neutral { color: #888; }

/* ── Responsive ─── */
@media (max-width: 1200px) {
    .wt-grid { grid-template-columns: 1fr 1fr; }
    .wt-strategy-content { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .wt-grid { grid-template-columns: 1fr; }
    .wt-full { grid-column: 1; }
    .wt-strategy-content { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   WORKBENCH — Drag-and-drop dashboard builder
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Toolbar ────────────────────────────────────────────────────────────── */
.wb-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    gap: 8px;
    flex-wrap: wrap;
}
.wb-views-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.wb-select {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 5px 10px;
    font-size: 12px;
    min-width: 180px;
}
.wb-select:focus {
    outline: none;
    border-color: var(--red);
}
.wb-session-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 3px;
    background: rgba(255, 24, 1, 0.15);
    color: var(--red);
    text-transform: uppercase;
}
.wb-toolbar-spacer {
    flex: 1;
}

/* ── Layout: sidebar + canvas ───────────────────────────────────────────── */
.wb-layout {
    display: flex;
    height: calc(100vh - var(--topbar-height) - 88px); /* topbar + tabs + toolbar */
    overflow: hidden;
}
.wb-canvas {
    flex: 1;
    overflow: auto;
    padding: 8px;
}

/* ── Catalog sidebar ────────────────────────────────────────────────────── */
.wb-catalog {
    width: 260px;
    min-width: 260px;
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    flex-shrink: 0;
}
.wb-catalog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg-card);
    z-index: 2;
}
.wb-catalog-header h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.wb-catalog-list {
    padding: 8px;
}
.wb-catalog-group {
    margin-bottom: 12px;
}
.wb-catalog-group-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    padding: 4px 4px 6px;
    margin: 0;
}
.wb-catalog-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ── Catalog item (draggable) ───────────────────────────────────────────── */
.wb-catalog-item {
    cursor: grab;
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    border: 1px solid var(--border);
    transition: background 0.15s, border-color 0.15s;
}
.wb-catalog-item:hover {
    background: var(--bg-hover);
    border-color: var(--border-light);
}
.wb-catalog-item:active {
    cursor: grabbing;
}
.wb-catalog-item-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    flex-wrap: wrap;
}
.wb-catalog-icon {
    color: var(--text-muted);
    font-size: 12px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.wb-catalog-label {
    font-size: 12px;
    color: var(--text-primary);
    flex: 1;
    white-space: nowrap;
}
.wb-catalog-tags {
    display: flex;
    gap: 3px;
}
.wb-session-tag {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.wb-session-race { background: rgba(255, 24, 1, 0.15); color: var(--red); }
.wb-session-qualifying { background: rgba(168, 85, 247, 0.15); color: var(--purple); }

/* ── GridStack dark-theme overrides ─────────────────────────────────────── */
.grid-stack {
    min-height: 100%;
}
.grid-stack-item-content.wb-widget {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.grid-stack-item-content.wb-widget.wb-widget-no-border {
    background: transparent;
    border: none;
}
.grid-stack > .grid-stack-item > .grid-stack-item-content {
    inset: 2px;
}
.grid-stack-placeholder > .placeholder-content {
    border: 2px dashed var(--red) !important;
    background: rgba(255, 24, 1, 0.05) !important;
    border-radius: var(--radius);
}
/* Resize handle — always visible, bigger grab target */
.ui-resizable-se {
    background: none !important;
    width: 20px !important;
    height: 20px !important;
    right: 0 !important;
    bottom: 0 !important;
    cursor: se-resize !important;
    z-index: 10;
}
.ui-resizable-se::after {
    content: '';
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--red);
    border-bottom: 2px solid var(--red);
    opacity: 0.6;
    transition: opacity 0.15s;
}
.grid-stack-item:hover .ui-resizable-se::after {
    opacity: 1;
    width: 12px;
    height: 12px;
    border-width: 3px;
}
/* Edge resize handles */
.ui-resizable-e, .ui-resizable-s {
    z-index: 10;
}
.ui-resizable-e {
    width: 6px !important;
    right: 0 !important;
    cursor: e-resize !important;
}
.ui-resizable-s {
    height: 6px !important;
    bottom: 0 !important;
    cursor: s-resize !important;
}
.grid-stack-item:hover .ui-resizable-e,
.grid-stack-item:hover .ui-resizable-s {
    background: rgba(255, 24, 1, 0.15) !important;
}

/* ── Drag-resize grip (bottom-right corner of every panel) ─────────────── */
.wb-drag-resize-grip {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 28px;
    height: 28px;
    cursor: se-resize;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 3px;
    user-select: none;
    z-index: 20;
    border-radius: 0 0 4px 0;
    transition: background 0.15s;
}
/* Three diagonal lines — hidden by default, shown on panel hover */
.wb-drag-resize-grip::after {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border-right: 2px solid transparent;
    border-bottom: 2px solid transparent;
    background: none;
    transition: border-color 0.15s, background 0.15s;
}
.grid-stack-item:hover .wb-drag-resize-grip::after {
    border-right: 2px solid rgba(255, 24, 1, 0.5);
    border-bottom: 2px solid rgba(255, 24, 1, 0.5);
    background: linear-gradient(
        135deg,
        transparent 30%,
        rgba(255, 24, 1, 0.25) 30%,
        rgba(255, 24, 1, 0.25) 35%,
        transparent 35%,
        transparent 50%,
        rgba(255, 24, 1, 0.25) 50%,
        rgba(255, 24, 1, 0.25) 55%,
        transparent 55%,
        transparent 70%,
        rgba(255, 24, 1, 0.25) 70%,
        rgba(255, 24, 1, 0.25) 75%,
        transparent 75%
    );
}
.wb-drag-resize-grip:hover {
    background: rgba(255, 24, 1, 0.1);
}
.wb-drag-resize-grip:hover::after {
    border-color: var(--red);
    background: linear-gradient(
        135deg,
        transparent 30%,
        rgba(255, 24, 1, 0.5) 30%,
        rgba(255, 24, 1, 0.5) 35%,
        transparent 35%,
        transparent 50%,
        rgba(255, 24, 1, 0.5) 50%,
        rgba(255, 24, 1, 0.5) 55%,
        transparent 55%,
        transparent 70%,
        rgba(255, 24, 1, 0.5) 70%,
        rgba(255, 24, 1, 0.5) 75%,
        transparent 75%
    );
}
.wb-resizing {
    opacity: 0.85;
    outline: 2px solid var(--red) !important;
}

/* ── Widget: header + body ──────────────────────────────────────────────── */
.wb-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--border);
    cursor: move;
    flex-shrink: 0;
    min-height: 22px;
    transition: opacity 0.2s, max-height 0.2s;
}
/* Hidden header: collapsed by default, revealed on hover */
.wb-header-hidden .wb-widget-header {
    opacity: 0;
    max-height: 0;
    min-height: 0;
    padding: 0 6px;
    border-bottom: none;
    overflow: hidden;
    pointer-events: none;
}
.wb-header-hidden:hover .wb-widget-header {
    opacity: 1;
    max-height: 22px;
    min-height: 22px;
    padding: 2px 6px;
    border-bottom: 1px solid var(--border);
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.85);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}
.wb-header-hidden .wb-widget-body {
    height: 100% !important;
}
/* Reclaim header space when hidden — shrink the widget's inner padding */
.wb-header-hidden .grid-stack-item-content {
    padding-top: 0 !important;
}
.wb-header-hidden.grid-stack-item {
    margin-top: -2px;
}
.wb-widget-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wb-widget-title i {
    font-size: 10px;
    color: var(--text-muted);
}
.wb-widget-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 4px;
    border-radius: 3px;
    transition: background 0.15s, color 0.15s;
}
.wb-widget-close:hover {
    background: rgba(255, 24, 1, 0.15);
    color: var(--red);
}

.wb-widget-controls {
    display: flex;
    align-items: center;
    gap: 3px;
}

.wb-widget-shrink,
.wb-widget-grow {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 0 5px;
    border-radius: 3px;
    font-weight: 700;
}

.wb-widget-shrink:hover,
.wb-widget-grow:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.2);
}

.wb-widget-body {
    flex: 1;
    min-height: 0;          /* prevent flex overflow — allows body to shrink to fit cell */
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}
/* Hide driver dropdowns in workbench panels — monitored driver from top bar is used */
.wb-panel-inner select.tt-inp,
.wb-panel-inner select.wb-tc-driver {
    display: none;
}
.wb-panel-inner {
    padding: 3px 4px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.wb-panel-inner.wb-scroll {
    overflow-y: auto;
}

/* Workbench wide-table scroll container — used by Race Standings,
   Qualifying Timing, and other panels whose natural table width can
   exceed the visible panel width on narrow / iPad layouts.
   overflow:auto means the scrollbar ONLY appears when there's real
   overflow — at 1080p desktop with a half-width standings panel the
   table fits naturally via CSS auto-layout and no scrollbar is
   visible. On mobile / iPad portrait where the cell content's natural
   minimum (e.g. "1:26.199" lap times that can't wrap) exceeds the
   panel, the horizontal scrollbar appears to let the user reach the
   clipped columns.

   The webkit-scrollbar block tunes the scrollbar APPEARANCE when one
   IS shown (thin, themed track + thumb) — it doesn't force one to
   show. scrollbar-width: thin + scrollbar-color does the same on
   Firefox. -webkit-overflow-scrolling: touch gives inertial momentum
   on iOS for nicer touch panning. */
.wb-table-scroll {
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.wb-table-scroll::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}
.wb-table-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
}
.wb-table-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 4px;
}
.wb-table-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* ── Panel table styling ────────────────────────────────────────────────── */
.wb-table {
    width: 100%;
    font-size: 11px;
}
.wb-table th {
    font-size: 10px;
    padding: 2px 4px;
    white-space: nowrap;
}
.wb-table td {
    padding: 1px 4px;
    white-space: nowrap;
}

/* ── TT header row (time remaining, etc.) ───────────────────────────────── */
.wb-tt-header {
    display: flex;
    gap: 12px;
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.02);
}

/* ── Session mismatch overlay ───────────────────────────────────────────── */
.wb-panel-disabled .wb-widget-body {
    position: relative;
}
.wb-panel-disabled .wb-widget-body::after {
    content: 'Not available in this session';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 15, 0.8);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    z-index: 5;
    pointer-events: none;
}

/* ── Workbench Fullscreen Mode (CSS-based, works on all platforms) ─────── */
body.wb-fullscreen-mode {
    overflow: hidden;
}
/* Hide everything except the workbench grid */
body.wb-fullscreen-mode .nav-header,
body.wb-fullscreen-mode .tab-bar,
body.wb-fullscreen-mode .monitored-drivers,
body.wb-fullscreen-mode .wb-toolbar,
body.wb-fullscreen-mode #session-indicator,
body.wb-fullscreen-mode .session-actions {
    display: none !important;
}
/* Make workbench fill the entire viewport */
body.wb-fullscreen-mode #tab-workbench {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: block !important;
    background: var(--bg-primary, #0a0a0f);
}
body.wb-fullscreen-mode #tab-workbench .wb-layout {
    height: 100vh;
    overflow: auto;
}
body.wb-fullscreen-mode #tab-workbench .wb-catalog {
    max-height: 100vh;
}
/* Floating exit button in top-right corner */
body.wb-fullscreen-mode::after {
    content: 'ESC to exit';
    position: fixed;
    top: 6px;
    right: 6px;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.7);
    color: rgba(255, 255, 255, 0.4);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}
body.wb-fullscreen-mode:hover::after {
    opacity: 1;
}

/* ── Event items in workbench ───────────────────────────────────────────── */
.wb-events-list .event-item,
.wb-penalties-list .event-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 0;
    font-size: 11px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .tt-strategy-grid, .tt-vehicle-layout, .tt-rival-grid, .tt-setup-layout { grid-template-columns: 1fr; }
    .tt-weather-info, .tt-rain-graph, .tt-tyre-sets-card, .tt-radio, .tt-session-info,
    .tt-rival-badge, .tt-rival-car-wrap, .tt-lap-chart-card, .tt-rival-comp-table,
    .tt-lap-comparison, .tt-misc-card { grid-column: 1; }
    .tt-subtab-bar { flex-wrap: nowrap; }
    .tt-setup-charts-grid { grid-template-columns: 1fr; }
    .tt-inputs-controls { flex-direction: column; }
    .tt-inp-playback-bar { flex-wrap: wrap; }
    .tt-inp-playback-vals { display: none; }
    .tt-inp-main-layout { grid-template-columns: 1fr; }
    .tt-inp-map-col { position: static; max-height: none; }
    .tt-inp-map-card canvas { height: 250px; }
}

/* ─── Lobby History Selector ─────────────────────────────────────────────── */
.lobby-selector { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; }
.lobby-selector select {
    background: var(--bg-input, #1a1a2e);
    color: var(--text-primary, #e0e0e0);
    border: 1px solid var(--border, #333);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 12px;
    cursor: pointer;
}
.lobby-selector select:focus { outline: 1px solid var(--blue, #0090ff); border-color: var(--blue, #0090ff); }
.lobby-history-banner {
    background: rgba(168, 85, 247, 0.12);
    color: #c0a0ff;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    text-align: center;
    margin-bottom: 6px;
    border: 1px solid rgba(168, 85, 247, 0.25);
}