/* VLR Fast 10's Component Styles */
.fast10s { max-width: 1100px; margin: 0 auto; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #2C1810; }

/* ── HEADER ─────────────────────────────────── */
.fast10s-header {
    background: #5C1A0B;
    padding: 14px 18px;
    border-bottom: 3px solid #C4973B;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    border-radius: 4px 4px 0 0;
}
.fast10s-header h1 {
    color: #FAF6F0;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    padding: 0;
    letter-spacing: 0.5px;
}
.fast10s-header h1 .accent { color: #C4973B; }
.fast10s-nav { display: flex; gap: 4px; }
.fast10s-nav a {
    color: #FAF6F0;
    text-decoration: none;
    padding: 5px 12px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s;
}
.fast10s-nav a:hover, .fast10s-nav a.active { background: #7A2E1A; }
.fast10s-nav a.active { background: #C4973B; color: #3D0F05; }

/* ── CLASS FILTER ───────────────────────────── */
.class-filter { display: flex; gap: 4px; margin: 12px 0; flex-wrap: wrap; }
.class-filter a {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid #D4C4B0;
    border-radius: 3px;
    text-decoration: none;
    color: #2C1810;
    font-size: 13px;
    font-weight: 500;
    background: #fff;
    transition: all 0.15s;
}
.class-filter a:hover { border-color: #5C1A0B; color: #5C1A0B; }
.class-filter a.active { background: #5C1A0B; color: #FAF6F0; border-color: #5C1A0B; }

/* ── PAGE ELEMENTS ──────────────────────────── */
.page-title {
    font-size: 24px;
    font-weight: 700;
    color: #3D0F05;
    margin: 16px 0 4px;
    padding-bottom: 6px;
    border-bottom: 2px solid #C4973B;
    display: inline-block;
}
.page-subtitle { color: #6B5B4E; font-size: 13px; margin-bottom: 12px; }
.back-link {
    display: inline-block;
    margin: 12px 0 4px;
    color: #8B3A1E;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}
.back-link:hover { text-decoration: underline; }

/* ── TRACK SECTIONS ─────────────────────────── */
.track-section {
    margin-bottom: 30px;
    padding-top: 10px;
}

/* ── LEADERBOARD LAYOUT ─────────────────────── */
.leaderboard-wrap {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 16px;
    margin-bottom: 20px;
}
@media (max-width: 900px) { .leaderboard-wrap { grid-template-columns: 1fr; } }

.leaderboard {
    background: #fff;
    border-radius: 5px;
    overflow-x: auto;
    border: 1px solid #D4C4B0;
}
.leaderboard h3 {
    font-size: 16px;
    font-weight: 600;
    padding: 9px 12px;
    color: #3D0F05;
    margin: 0;
    border-bottom: 1px solid #D4C4B0;
}

/* ── TABLES ─────────────────────────────────── */
.fast10s table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fast10s thead th {
    background: #5C1A0B;
    color: #FAF6F0;
    padding: 7px 9px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.fast10s tbody tr { border-bottom: 1px solid #f0ebe4; transition: background 0.1s; }
.fast10s tbody tr:nth-child(even) { background: #FDF9F4; }
.fast10s tbody tr:hover { background: #F0E8DA; }
.fast10s tbody td { padding: 6px 9px; white-space: nowrap; }

.col-pos { width: 60px; }
.pos-cell { font-weight: 600; color: #6B5B4E; text-align: center; }

.driver-link, .track-link {
    color: #8B3A1E;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s;
}
.driver-link:hover, .track-link:hover { color: #5C1A0B; text-decoration: underline; }

.time-cell { font-family: 'Consolas', 'Monaco', monospace; font-size: 12px; }
.avg-lap { color: #6B5B4E; }

.table-footer {
    padding: 7px 12px;
    font-size: 12px;
    color: #6B5B4E;
    border-top: 1px solid #D4C4B0;
}

/* ── TOP TABLE ──────────────────────────────── */
.top-table { background: #fff; border: 1px solid #D4C4B0; border-radius: 5px; overflow: hidden; }

/* ── STAT BOXES ─────────────────────────────── */
.stat-row { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.stat-box {
    background: #fff;
    border: 1px solid #D4C4B0;
    border-radius: 5px;
    padding: 10px 16px;
    min-width: 110px;
}
.stat-box .stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6B5B4E;
    margin-bottom: 2px;
}
.stat-box .stat-value { font-size: 20px; font-weight: 700; color: #5C1A0B; }

/* ── NO RESULTS ─────────────────────────────── */
.no-results { text-align: center; padding: 30px 20px; color: #6B5B4E; font-size: 14px; }