/* =========================================================
   Base
========================================================= */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

/* =========================================================
   Position-Change Animations
========================================================= */
.row-shell {
    position: relative;
}

.rowAnim {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 80px;
    height: 5px;
    background: rgba(0,120,255,.35);
    pointer-events: none;
    border-radius: 2px;
    z-index: 3;
    opacity: 0;
    will-change: transform;
}

.ag-row.pos-up {
    animation: posUp 10s linear;
}

.ag-row.pos-down {
    animation: posDown 10s linear;
}

@keyframes posUp {
    0% {
        background: rgba(0,180,0,.12)
    }

    100% {
        background: transparent
    }
}

@keyframes posDown {
    0% {
        background: rgba(200,0,0,.12)
    }

    100% {
        background: transparent
    }
}

/* =========================================================
   Table: selection outline + layout
========================================================= */
:root {
    /* Moved out of #ltt-table so the championship/event-classification panel
       tables (siblings, not descendants of #ltt-table) can also see these
       custom properties – they reuse the same .selected box-shadow rules. */
    --sel-color: #e11d48; /* Rotton für Auswahlrahmen */
    --sel-bg: rgba(255,0,0,.08);
    --sel-radius: 6px;
}

#ltt-table {
    border-collapse: collapse;
    border-spacing: 0;
    --grid-hairline: rgba(0,0,0,.22);
    font-variant-numeric: tabular-nums;
}

/* Alle Zellen: kein Umbruch, Breite am Inhalt */
#ltt-table th,
#ltt-table td {
    white-space: nowrap;
}

    /* Pos- und Snr-Zellen: explizite Mindestbreite für die Nummernschilder */
        #ltt-table td.pos-cell,
        #ltt-table td.snr-cell {
            width: 1%;
        }

/* Name-Spalte: nimmt den verbleibenden Platz, umbricht nicht */
#ltt-table td.name-cell {
    white-space: nowrap;
    width: auto;
}

    #ltt-table td.pos-cell, #ltt-table td.snr-cell {
        width: 1%;
    }

    /* Row selection – robust bei border-collapse + hidden columns.
       Same rules also apply to the championship/event-classification panel tables, so
       selecting a rider in the main timing table highlights them there too. */
    #ltt-table tbody tr.selected::after {
        display: none !important;
    }

    /* Alle selektierten Zellen: oben + unten */
    #ltt-table tbody tr.selected > td,
    #championship-table tbody tr.selected > td,
    #eventclass-table tbody tr.selected > td {
        position: relative;
        box-shadow: inset 0 4px 0 var(--sel-color), inset 0 -4px 0 var(--sel-color) !important;
    }

    /* Erste sichtbare Zelle: zusätzlich links */
    #ltt-table tbody tr.selected > td.sel-edge-l,
    #championship-table tbody tr.selected > td.sel-edge-l,
    #eventclass-table tbody tr.selected > td.sel-edge-l {
        box-shadow: inset 4px 0 0 var(--sel-color),
                    inset 0 4px 0 var(--sel-color),
                    inset 0 -4px 0 var(--sel-color) !important;
    }

    /* Letzte sichtbare Zelle: zusätzlich rechts */
    #ltt-table tbody tr.selected > td.sel-edge-r,
    #championship-table tbody tr.selected > td.sel-edge-r,
    #eventclass-table tbody tr.selected > td.sel-edge-r {
        box-shadow: inset -4px 0 0 var(--sel-color),
                    inset 0 4px 0 var(--sel-color),
                    inset 0 -4px 0 var(--sel-color) !important;
    }

    /* Kleine Spalten / Pfeile */
.movement-col, .movement-col td {
    width: 30px;
    text-align: center;
    white-space: nowrap;
}

.pos-delta {
    width: 30px;
    text-align: center;
    white-space: nowrap;
}

    .pos-delta.none .arrow::after {
        content: "-";
        color: gray;
    }

    .pos-delta.up .arrow::after {
        content: "▲";
        color: #16a34a;
    }

    .pos-delta.down .arrow::after {
        content: "▼";
        color: #e11d48;
    }

    /* Comments + Blink */
.comment-col {
    width: 150px;
    text-align: center;
    white-space: nowrap;
}

@keyframes blink {
    0%,100% {
        opacity: 1
    }

    50% {
        opacity: .5
    }
}

.comment-col.gaining {
    background: #16a34a;
    color: #fff;
    animation: blink 1s infinite;
}

.comment-col.losing {
    background: #e11d48;
    color: #fff;
    animation: blink 1s infinite;
}

/* Responsive container (keine interne Scroll-Tabelle) */
.table-responsive {
    overflow-x: hidden !important;
}

#tableContainer {
    display: block;
    width: fit-content;
    margin-inline: auto;
    overflow-x: auto;
}

#ltt-table {
    width: 1px !important;   /* Override Bootstrap's width:100% – Tabelle zieht sich auf Inhalt zusammen */
    margin: 0;
    table-layout: auto;
}

#ltt-table td {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

/* =========================================================
   Feine Grid-Lines (nur innen) + kompaktere Zeilen
========================================================= */
    #ltt-table th, #ltt-table td {
        padding: 7px 10px;
        line-height: 1.12;
    }

    #ltt-table thead th, #ltt-table tbody td, #ltt-table tfoot td {
        border-right: 3px solid var(--grid-hairline);
        border-bottom: 3px solid var(--grid-hairline);
    }
    /* Außen frei – Card-Container übernimmt Außenrahmen + Radius */
    #ltt-table tr > :first-child {
        border-left: 0;
    }

    #ltt-table thead tr:first-child th {
        border-top: 0;
    }

    #ltt-table tbody tr:first-child td {
        border-top: 0;
    }

    #ltt-table tr > :last-child {
        border-right: 0;
    }

    #ltt-table tbody tr:last-child td {
        border-bottom: 0;
    }

    /* =========================================================
   Interaktions-Hilfen (Hover/Focus) – ohne Highlights zu stören
========================================================= */
    #ltt-table tbody tr:hover:not(.selected) > td:not(.lt-overall):not(.lt-rider):not(.lt-slower):not(.lt-gap1):not(.lt-gap05):not(.lt-new) {
        background-color: rgba(2,122,255,.04) !important;
    }

    #ltt-table tbody tr:focus-within > td:not(.lt-overall):not(.lt-rider):not(.lt-slower):not(.lt-gap1):not(.lt-gap05):not(.lt-new) {
        background-color: rgba(2,122,255,.06) !important;
        outline: none;
    }

    /* =========================================================
   Sticky Header (leichter Blur)
========================================================= */
    #ltt-table thead th {
        position: sticky;
        top: 0;
        z-index: 3; /* über Body-Zellen */
        background: rgba(246,248,251,.95);
        backdrop-filter: blur(2px);
        border-bottom: 1px solid #e5eaf0;
    }

    /* =========================================================
   Laptimes & Sektoren – Highlights (immer dominant)
========================================================= */
    #ltt-table td.lt-overall {
        background: #7c3aed !important;
        color: #fff !important;
    }

    #ltt-table td.lt-rider {
        background: #16a34a !important;
        color: #fff !important;
    }

    #ltt-table td.lt-new {
        background: #FFFF19 !important;
        color: #111 !important;
    }

    #ltt-table td.lt-gap1 {
        background: rgba(211,55,0,1) !important;
        color: #fff !important;
    }

    #ltt-table td.lt-gap05 {
        background: rgba(119,18,18,.80) !important;
        color: #fff !important;
    }

    #ltt-table td.lt-slower {
        background: #e11d48 !important;
        color: #fff !important;
    }

    /* Linien unter Highlights konsistent */
    #ltt-table td.lt-overall,
    #ltt-table td.lt-rider,
    #ltt-table td.lt-slower,
    #ltt-table td.lt-gap1,
    #ltt-table td.lt-gap05,
    #ltt-table td.lt-new {
        border-color: var(--grid-hairline) !important;
    }

    /* Section-Zellen nur transparent, wenn kein Highlight greift */
    .section0-cell:not(.lt-overall):not(.lt-rider):not(.lt-slower):not(.lt-gap1):not(.lt-gap05):not(.lt-new),
    .section1-cell:not(.lt-overall):not(.lt-rider):not(.lt-slower):not(.lt-gap1):not(.lt-gap05):not(.lt-new),
    .section2-cell:not(.lt-overall):not(.lt-rider):not(.lt-slower):not(.lt-gap1):not(.lt-gap05):not(.lt-new),
    .section3-cell:not(.lt-overall):not(.lt-rider):not(.lt-slower):not(.lt-gap1):not(.lt-gap05):not(.lt-new) {
        background: none;
    }

    /* =========================================================
   Finish-Flag in Tabelle
========================================================= */
th.th-flag, td.flag-cell {
    width: 36px;
    min-width: 36px;
    text-align: center;
    white-space: nowrap;
}

    td.flag-cell img.finish-flag {
        width: 24px;
        height: 24px;
        display: inline-block;
    }

    /* =========================================================
   Wide Checkered Banner (legacy) – controlled via [hidden]
========================================================= */
.finish-banner {
    position: relative;
    height: 120px;
    margin-bottom: 12px;
    width: auto;
    box-sizing: border-box;
}

.finish-banner--img > #finish-banner-img {
    position: absolute;
    top: 8px;
    left: 12px;
    width: 200px;
    height: auto;
    display: block;
    margin-bottom: 50px;
}

.finish-banner-overlay {
    display: none;
}

#finish-banner[hidden] {
    display: none !important;
}

    /* =========================================================
   Session Header (left) + compact flag (right)
========================================================= */
.session-header {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;   /* war: flex-start */
    gap: 8px;
    margin: 8px auto 12px;
    max-width: 1200px;
    padding: 0 8px;
}

.session-meta {
    flex: 0 1 auto;            /* war: 1 1 auto – jetzt nicht mehr voll strecken */
    min-width: 0;
    text-align: center;        /* Titel und Pills zentriert */
}

.session-title {
    margin: 0 0 6px 0;
    line-height: 1.15;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;   /* Pills zentriert */
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f6f8fb;
    border: 1px solid #e5eaf0;
    font-weight: 600;
    line-height: 1.2;
}

    .chip .chip-label {
        opacity: .75;
        font-weight: 500;
    }

.chip-status {
    background: #eaf7ee;
    border-color: #d7eedf;
}

.session-flag {
    flex: 0 0 auto;
    margin-left: auto;
}

    .session-flag img {
        display: block;
        width: 140px;
        height: auto;
    }

@media (max-width:768px) {
    .session-header {
        flex-wrap: nowrap;       /* Flag bleibt auf gleicher Zeile wie Meta */
        align-items: flex-start;
        gap: 8px;
    }

    .session-meta {
        flex: 1 1 0;
        min-width: 0;
    }

    .session-flag {
        margin-left: 0;
        flex: 0 0 auto;
        align-self: flex-start;  /* oben ausrichten, nicht flex-end */
    }

    .session-flag img {
        width: 80px;             /* etwas kleiner in mobile */
        height: auto;
    }
}

/* =========================================================
   Table as a bubble/card (runde Ecken + Außenrahmen)
========================================================= */
#tableContainer.table-card {
    border: 1px solid #e5eaf0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(16,24,40,.06);
    padding: 8px 10px;
    overflow: hidden; /* clippt runde Ecken */
    width: max-content;
    margin-inline: auto;
}

/* Kopfzeilen ruhiger – (Sticky-Hintergrund ist oben bereits gesetzt) */
#ltt-table thead th {
    background: rgba(246,248,251,.95);
}

/* Zebra nur für NICHT-Highlight-Zellen */
#ltt-table.table-striped > tbody > tr:nth-of-type(odd) > td:not(.lt-overall):not(.lt-rider):not(.lt-slower):not(.lt-gap1):not(.lt-gap05):not(.lt-new) {
    background-color: rgba(2,122,255,.02);
}

/* Footer (Overall Sectors) */
#ltt-table tfoot {
    background: #fafbfd;
}
    /* Standard: Hairlines wie im Grid */
    #ltt-table tfoot td {
        border-right: 1px solid var(--grid-hairline);
        border-bottom: 1px solid var(--grid-hairline);
    }
        /* Leere Footer-Zellen komplett ohne sichtbare Linien */
        #ltt-table tfoot td:empty {
            border-color: transparent !important;
            background: transparent !important;
        }
    /* auch links/oben unsichtbar, falls leer */
    #ltt-table tfoot tr > td:first-child:empty {
        border-left-color: transparent !important;
    }

    #ltt-table tfoot tr:first-child td:empty {
        border-top-color: transparent !important;
    }

    /* =========================================================
   Print Styles – klare Linien, keine Schatten/Chips
========================================================= */
@media print {
    #tableContainer.table-card {
        box-shadow: none;
        border: 1px solid #000;
    }

    .session-header, .finish-banner {
        display: none !important;
    }

    #ltt-table thead th {
        background: #fff;
        backdrop-filter: none;
        border-bottom: 1px solid #000;
    }

    #ltt-table thead th, #ltt-table tbody td, #ltt-table tfoot td {
        border-color: #000 !important;
    }

    #ltt-table td.lt-overall,
    #ltt-table td.lt-rider,
    #ltt-table td.lt-slower,
    #ltt-table td.lt-gap1,
    #ltt-table td.lt-gap05,
    #ltt-table td.lt-new {
        /* in s/w druckfreundlicher */
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* =========================================================
   Timetable Cards (NextEvent, NextSession, WarmUp, SeasonEnd)
========================================================= */
.timetable-card {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 48px 16px;
}

.timetable-card__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 36px 48px;
    border: 1px solid #e5eaf0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(16,24,40,.07);
    min-width: 320px;
    max-width: 560px;
    width: 100%;
}

.timetable-card__label {
    font-size: .85rem;
    font-weight: 500;
    color: #8492a6;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 0 0 4px 0;
}

.timetable-card__event {
    font-size: 1.6rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
    line-height: 1.2;
}

.timetable-card__location {
    font-size: 1rem;
    font-weight: 500;
    color: #374151;
    margin: 0;
}

.timetable-card__date {
    font-size: .95rem;
    font-weight: 600;
    color: #6b7280;
    margin: 4px 0 0 0;
    letter-spacing: .02em;
}

.timetable-card__divider {
    width: 40px;
    height: 3px;
    background: #e5eaf0;
    border-radius: 2px;
    margin: 8px 0;
}

.timetable-card__championship {
    font-size: .9rem;
    font-weight: 600;
    color: #6b7280;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.timetable-card__session {
    font-size: 1.4rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
    line-height: 1.2;
}

.timetable-card__class {
    font-size: .9rem;
    font-weight: 500;
    color: #374151;
    margin: 0;
}

.timetable-card__countdown-label {
    font-size: .8rem;
    font-weight: 500;
    color: #8492a6;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 8px 0 0 0;
}

.timetable-card__countdown {
    font-size: 2.4rem;
    font-weight: 800;
    color: #111827;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    margin: 0;
    line-height: 1;
}

.timetable-card__season-end {
    font-size: 1.8rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.timetable-card__results-link {
    font-size: .85rem;
    color: #6b7280;
    text-align: center;
    margin: 0;
    line-height: 1.6;
}

.timetable-card__results-link a {
    color: #027aff;
    font-weight: 600;
    text-decoration: none;
}

.timetable-card__results-link a:hover {
    text-decoration: underline;
}

@media (max-width: 576px) {
    .timetable-card__inner {
        padding: 28px 24px;
        min-width: 0;
    }
    .timetable-card__event  { font-size: 1.3rem; }
    .timetable-card__countdown { font-size: 1.8rem; }
}

/* =========================================================
   Session-Title Row (Title + Toggle nebeneinander)
========================================================= */
.session-title-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
}

/* Flag-GIF neben dem Toggle, links-ausgerichtet nach dem Toggle */
.session-title-row .session-flag {
    flex: 0 0 auto;
    margin-left: auto;   /* schiebt es ans rechte Ende der Titelzeile */
}

.session-title-row .session-flag img {
    display: block;
    width: 80px;
    height: auto;
}

/* Desktop: etwas größer */
@media (min-width: 769px) {
    .session-title-row .session-flag img {
        width: 110px;
    }
}

/* =========================================================
   Mobile-View Toggle Switch (iOS-Style)
========================================================= */
.mobile-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}

    .mobile-toggle input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

.mobile-toggle__track {
    position: relative;
    width: 42px;
    height: 24px;
    background: #cbd5e1;
    border-radius: 12px;
    transition: background .25s;
    flex-shrink: 0;
}

.mobile-toggle__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
    transition: transform .25s;
}

.mobile-toggle input:checked ~ .mobile-toggle__track {
    background: #e11d48;
}

.mobile-toggle input:checked ~ .mobile-toggle__track .mobile-toggle__thumb {
    transform: translateX(18px);
}

.mobile-toggle__label {
    font-size: .8rem;
    color: #64748b;
    white-space: nowrap;
}

/* =========================================================
   Mobile-View: Spalten ausblenden
   Sichtbar: pos-delta(2), pos(3), nr(4), name(5), nat(6),
             bike(7), bestlaptime(9), laps(10),
             diff-first(11), diff-prev(12)
   Ausgeblendet: flag(1), totaltime(8), in-lap(13), lastlap+(14+)
========================================================= */
body.mobile-view #ltt-table th:nth-child(6),
body.mobile-view #ltt-table td:nth-child(6),
body.mobile-view #ltt-table th:nth-child(8),
body.mobile-view #ltt-table td:nth-child(8),
body.mobile-view #ltt-table th:nth-child(13),
body.mobile-view #ltt-table td:nth-child(13),
body.mobile-view #ltt-table th:nth-child(n+14),
body.mobile-view #ltt-table td:nth-child(n+14) {
    display: none !important;
}

/* =========================================================
   Mobile-View: Chips untereinander stapeln
========================================================= */
body.mobile-view .chips {
    flex-direction: row;      /* war: column → zurück auf row */
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

body.mobile-view .chip {
    font-size: .82rem;
}

/* =========================================================
   Mobile-View: Flag-GIF ÜBER den Titel schieben
   session-header wird zur Column, flag bekommt order: -1
========================================================= */
body.mobile-view .session-header {
    flex-direction: column;
    align-items: flex-start;
}

body.mobile-view .session-flag {
    order: -1;           /* vor session-meta rendern */
    margin-bottom: 6px;
}

body.mobile-view .session-flag img {
    height: 48px;
    width: auto;
}

/* =========================================================
   Mobile-View: Flag-GIF rechts neben die Pills
   session-header bleibt ROW (flex-direction: row)
   session-meta wächst, session-flag klebt rechts oben
========================================================= */
body.mobile-view .session-header {
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: nowrap;
}

body.mobile-view .session-meta {
    flex: 1 1 0;
    min-width: 0;
}

body.mobile-view .session-flag {
    order: 0;               /* normaler Reihenfolge – rechts neben meta */
    flex: 0 0 auto;
    align-self: flex-start;
    margin-left: 8px;
    margin-bottom: 0;
}

body.mobile-view .session-flag img {
    width: 72px;
    height: auto;
}

/* Chips + Flag nebeneinander */
.chips-flag-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 8px;
}

.chips-flag-row .chips {
    flex: 1 1 auto;
}

.chips-flag-row .session-flag {
    flex: 0 0 auto;
    align-self: center;
}

.chips-flag-row .session-flag img {
    display: block;
    width: 110px;
    height: auto;
}

/* Mobile: gleiche Zeile, Flag kleiner */
body.mobile-view .chips-flag-row {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
}

body.mobile-view .chips-flag-row .session-flag img {
    width: 72px;
}

.session-header > .session-flag {
    display: none;
}

body.mobile-view .chips-flag-row .session-flag {
    display: none !important;
}

/* =========================================================
   Selection Toast (oben, gelb)
========================================================= */
#selection-toast {
    position: fixed;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(234, 179, 8, 0.85);
    color: #1a1a1a;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 999px;
    border: 1px solid rgba(180, 130, 0, 0.4);
    z-index: 9999;
    transition: top 0.35s cubic-bezier(.22,.68,0,1.2);
    white-space: nowrap;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
}

#selection-toast.toast-visible {
    top: 16px;
}

/* =========================================================
   Fight Panel (unten schwebend)
========================================================= */
#fight-panel {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9000;
    width: min(480px, 96vw);
}

#fight-panel-full {
    background: rgba(255,255,255,0.97);
    border: 1px solid #e5eaf0;
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(16,24,40,.18);
    overflow: hidden;
    backdrop-filter: blur(6px);
}

.fight-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 8px;
    border-bottom: 1px solid #e5eaf0;
    background: #f6f8fb;
}

.fight-title {
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .03em;
}

#fight-hide-btn {
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: .8rem;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 6px;
    transition: background .15s;
}

#fight-hide-btn:hover { background: #e5eaf0; }

/* Sections */
.fight-section {
    border-bottom: 1px solid #e5eaf0;
}

.fight-section:last-child { border-bottom: none; }

.fight-section-toggle {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 8px 16px;
    font-weight: 600;
    font-size: .85rem;
    cursor: pointer;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background .15s;
}

.fight-section-toggle:hover { background: #f6f8fb; }

.fight-toggle-icon {
    font-size: .7rem;
    width: 12px;
}

.fight-section-body {
    padding: 8px 16px 12px;
    overflow: hidden;
    transition: max-height .25s ease, padding .25s ease, opacity .2s;
    max-height: 400px;
    opacity: 1;
}

.fight-section-body.fight-collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}

/* Gap section */
.fight-driver-names {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .82rem;
    color: #6b7280;
    margin-bottom: 4px;
}

.fight-vs {
    font-weight: 700;
    color: #e11d48;
}

.fight-gap-value {
    font-size: 1.6rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #111827;
    text-align: center;
    margin: 4px 0;
}

/* Live championship points gap between the two selected riders (race sessions only) */
.fight-points-gap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: .85rem;
    color: #6b7280;
    margin-top: 2px;
}

#fg-points-gap-value {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #e11d48;
}

.fight-gap-trend {
    text-align: center;
    font-size: 1.1rem;
    min-height: 24px;
    margin-top: 4px;
}

/* Trend animations */
@keyframes trendRight {
    0%   { transform: translateX(-12px); opacity: 0; }
    30%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { transform: translateX(12px);  opacity: 0; }
}

@keyframes trendLeft {
    0%   { transform: translateX(12px);  opacity: 0; }
    30%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { transform: translateX(-12px); opacity: 0; }
}

.fight-trend-closing span {
    display: inline-block;
    color: #16a34a;
    animation: trendRight 3s ease-in-out;
}

.fight-trend-losing span {
    display: inline-block;
    color: #ca8a04;
    animation: trendLeft 3s ease-in-out;
}

.fight-trend-static-green { color: #16a34a; }
.fight-trend-static-yellow { color: #ca8a04; }

/* Fight Tables */
.fight-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}

.fight-table th, .fight-table td {
    padding: 4px 8px;
    text-align: center;
    border: 1px solid #e5eaf0;
}

.fight-table th {
    background: #f6f8fb;
    font-weight: 600;
    color: #6b7280;
}

.fight-label {
    text-align: left !important;
    font-weight: 600;
    white-space: nowrap;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fight-gap-row td { background: #f6f8fb; font-weight: 600; }
.fight-total-row td { background: #f0f4ff; font-weight: 700; }

.fight-cell-better { background: #16a34a !important; color: #fff !important; }
.fight-cell-worse  { background: #e11d48 !important; color: #fff !important; }
.fight-gap-gained  { background: #dcfce7 !important; color: #166534 !important; font-weight: 700; }
.fight-gap-lost    { background: #fee2e2 !important; color: #991b1b !important; font-weight: 700; }

/* Show Fight Button */
#fight-show-btn {
    position: fixed;
    bottom: 16px;
    right: 16px;
    background: #111827;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 18px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
    z-index: 9000;
    transition: background .15s;
}

#fight-show-btn:hover { background: #1f2937; }

.fight-best-divider {
    background: #f0f4ff;
    color: #374151;
    font-weight: 700;
    font-size: .75rem;
    text-align: center;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 5px 8px !important;
    border-top: 2px solid #c7d7fb;
}

@keyframes gapBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.15; }
}

.gap-blink-closing {
    animation: gapBlink 0.4s ease 3;
    color: #16a34a;
}

.gap-blink-losing {
    animation: gapBlink 0.4s ease 3;
    color: #ca8a04;
}

.gap-static-green  { color: #16a34a; }
.gap-static-yellow { color: #ca8a04; }

/* Delta in Klammern unter dem Gap */
.fight-gap-delta {
    text-align: center;
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    min-height: 20px;
    margin-top: 2px;
}

.gap-delta-green  { color: #16a34a; }
.gap-delta-yellow { color: #ca8a04; }

.fight-best-subheader th {
    background: #e8eeff;
    color: #374151;
    font-weight: 700;
    font-size: .75rem;
    text-align: center;
    padding: 3px 8px;
    border: 1px solid #c7d7fb;
}

/* =============================================================
   Numberplate
   bnr → CSS-Klasse numberplate--{bnr} steuert die Umrandung
   Championship Leader: zusätzlich .numberplate--leader
============================================================= */
.numberplate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4ch; /* exakt 3 Ziffern-Breite (tabular-nums) */
    min-width: unset;
    height: 2.5ch;
    padding: 2px 9px;
    border-radius: 5px;
    border: 3px solid #888;
    background: #fff;
    font-weight: 900;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    color: #111;
    line-height: 1.5;
    user-select: none;
}

/* Championship Leader: roter Hintergrund */
.numberplate--leader {
    background: #e11d48 !important;
    color: #fff !important;
}

/* Hersteller-Umrandungen (per bnr) */
.numberplate--1 {
    border-color: #0af554;
}
/* Kawasaki  */
.numberplate--2 {
    border-color: #aa0000;
}
/* Honda     */
.numberplate--3 {
    border-color: #F7E600;
}
/* Suzuki    */
.numberplate--4 {
    border-color: #0000ff;
}
/* Yamaha    */
.numberplate--5 {
    border-color: #ffaa00;
}
/* KTM       */
.numberplate--6 {
    border-color: #aaaaaa;
}
/* Husqvarna – #ffffff wäre unsichtbar, daher hellgrau */
.numberplate--9 {
    border-color: #0a70f5;
}
/* TM        */
.numberplate--39 {
    border-color: #ff3300;
}
/* GASGAS    */
.numberplate--47 {
    border-color: #222222;
}
/* Triumph   */
.numberplate--48 {
    border-color: #ff557f;
}
/* BETA      */
.numberplate--50 {
    border-color: #ff0000;
}
/* Ducati    */
.numberplate--62 {
    border-color: #ff007f;
}
/* Fantic    */

.timetable-card__delay-msg {
    font-size: .85rem;
    font-weight: 600;
    color: #dc2626;
    text-align: center;
    margin: 8px 0 0 0;
    max-width: 380px;
    line-height: 1.5;
    animation: delay-blink 2s ease-in-out infinite;
}

@keyframes delay-blink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.25;
    }
}

/* =========================================================
   Red Flag Overlay (hovering pill, mittig, über allem)
========================================================= */
.redflag-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;      /* Klicks durch den Hintergrund erlauben */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9500;             /* Über Tabelle und Fight-Panel, unter Selection-Toast */
}

.redflag-overlay__pill {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(20, 20, 20, 0.92);
    border: 2px solid rgba(220, 40, 40, 0.7);
    border-radius: 24px;
    padding: 20px 28px;
    box-shadow: 0 8px 40px rgba(220, 40, 40, 0.25), 0 2px 16px rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
    max-width: min(600px, 92vw);
    width: 100%;
}

.redflag-overlay__gif {
    width: 90px;
    height: auto;
    flex-shrink: 0;
    border-radius: 8px;
}

.redflag-overlay__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.redflag-overlay__title {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.4;
}

.redflag-overlay__subtitle {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.875rem;
    font-weight: 400;
    margin: 0;
    line-height: 1.5;
}

.redflag-overlay__countdown {
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    margin: 4px 0 0 0;
    line-height: 1.2;
}

/* Mobile: untereinander statt nebeneinander */
@media (max-width: 480px) {
    .redflag-overlay__pill {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 16px 18px;
    }
    .redflag-overlay__gif {
        width: 64px;
    }
}

/* ── Global Alert Bar ─────────────────────────────────────────────────────── */
.global-alert-bar {
    width: 100%;
    padding: 0.6rem 1rem;
    box-sizing: border-box;
    font-size: 0.92rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: background 0.3s, border-color 0.3s;
}

.global-alert-bar__inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    position: relative; 
}

.global-alert-bar__icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.global-alert-bar__msg {
    text-align: center;
}

.global-alert-bar__restart {
    font-size: 0.85rem;
    opacity: 0.85;
    white-space: nowrap;
    font-weight: 600;
    padding-left: 0.4rem;
    border-left: 1px solid currentColor;
}

.global-alert-bar__dismiss {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.25rem;
    opacity: 0.7;
    flex-shrink: 0;
    color: inherit;
    position: absolute;
    right: 0;
}

    .global-alert-bar__dismiss:hover {
        opacity: 1;
    }

/* Themes */
.global-alert-bar.alert--delay {
    background: #7c5c00;
    border-color: #f0a500;
    color: #ffd97a;
}

.global-alert-bar.alert--info {
    background: #0d3a5c;
    border-color: #2196f3;
    color: #90caf9;
}

.global-alert-bar.alert--warning {
    background: #5c3a00;
    border-color: #ff9800;
    color: #ffcc80;
}

.global-alert-bar.alert--critical {
    background: #5c0d0d;
    border-color: #f44336;
    color: #ef9a9a;
}

.global-alert-bar.alert--red-flag {
    background: #5c0000;
    border-color: #d32f2f;
    color: #ffcdd2;
}

.global-alert-bar.alert--restart {
    background: #1a3a1a;
    border-color: #4caf50;
    color: #a5d6a7;
}

.global-alert-bar.alert--medical {
    background: #1a1a3a;
    border-color: #7e57c2;
    color: #ce93d8;
}

.global-alert-bar.alert--technical {
    background: #2a2a2a;
    border-color: #9e9e9e;
    color: #e0e0e0;
}

#ltt-table td.section0-cell,
#ltt-table td.section1-cell,
#ltt-table td.section2-cell,
#ltt-table td.section3-cell,
#ltt-table th.th-sector {
    text-align: center !important;
    padding-left: 1px !important;
    padding-right: 1px !important;
}

/* =========================================================
   Penalty Toast (red – new penalties)
========================================================= */
#penalty-toast {
    position: fixed;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(185, 28, 28, 0.92);
    color: #fff;
    font-weight: 600;
    padding: 12px 20px 12px 16px;
    border-radius: 8px;
    z-index: 9998;
    transition: top 0.35s ease;
    min-width: 220px;
    max-width: 480px;
}

    #penalty-toast.toast-visible {
        top: 16px;
    }

    #penalty-toast .penalty-toast-title {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        opacity: 0.8;
        margin-bottom: 6px;
    }

    #penalty-toast .penalty-toast-list {
        list-style: none;
        margin: 0;
        padding: 0;
        font-size: 0.9rem;
        line-height: 1.5;
    }

    #penalty-toast .penalty-toast-dismiss {
        position: absolute;
        top: 8px;
        right: 10px;
        background: none;
        border: none;
        color: #fff;
        font-size: 1rem;
        cursor: pointer;
        opacity: 0.7;
        line-height: 1;
        padding: 0;
    }

        #penalty-toast .penalty-toast-dismiss:hover {
            opacity: 1;
        }

/* =========================================================
   Penalty badge in flag cell  (! per penalty)
========================================================= */
td.flag-cell .penalty-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    background: rgba(220, 38, 38, 0.18);
    color: #dc2626;
    font-weight: 700;
    font-size: 0.7rem;
    line-height: 1;
    margin: 1px;
    cursor: default;
    position: relative;
}

/* =========================================================
   Lost Fastest Time – strike through the lastlap cell
   that carried the penalized rider's overall best
========================================================= */
#ltt-table td.lastlap-cell.penalty-lft,
#ltt-table td.lastlap2-cell.penalty-lft,
#ltt-table td.lastlap3-cell.penalty-lft {
    text-decoration: line-through;
    color: #dc2626;
    background: rgba(220, 38, 38, 0.18) !important;
}

/* =========================================================
   Help Overlay (scrollable pill, mittig, über allem)
========================================================= */
.help-button {
    flex: 0 0 auto;
    margin-left: auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.15);
    background: #fff;
    color: #111827;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(16,24,40,.12);
}

    .help-button:hover {
        background: #f3f4f6;
    }

.help-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9600;
    padding: 24px;
    box-sizing: border-box;
}

    .help-overlay[hidden] {
        display: none;
    }

.help-overlay__pill {
    background-color: rgba(255, 255, 255, 1);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
    width: 100%;
    max-width: 640px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.help-overlay__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}

.help-overlay__title {
    color: black;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}

.help-overlay__close {
    background: none;
    border: none;
    color: black;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

    .help-overlay__close:hover {
        color: gray;
    }

.help-overlay__content {
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.help-overlay__section h3 {
    color: black;
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 8px 0;
}

.help-overlay__section p {
    color: rgba(0,0,0,0.8);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0 0 10px 0;
}

.help-overlay__image {
    max-width: 100%;
    border-radius: 8px;
    display: block;
    margin-top: 6px;
}

@media (max-width: 480px) {
    .help-overlay__pill {
        max-height: 88vh;
    }

    .help-overlay__header,
    .help-overlay__content {
        padding: 14px 16px;
    }
}

/* =========================================================
   Live Championship panel
========================================================= */
.ltt-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
    max-width: 100%;
}

/* tableContainer normally auto-centers itself via margin-inline:auto, which
   inside this flex row pushes the championship panel far away. Inside the
   layout row we want it flush against the panel with just the 5px gap, so
   centering of the whole row is handled by .ltt-layout's justify-content. */
.ltt-layout > #tableContainer.table-card {
    margin-inline: 0;
}

.championship-panel {
    flex: 0 0 auto;
    width: 300px;
    max-width: 100%;
    border: 1px solid #e5eaf0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(16,24,40,.06);
    overflow: hidden;
}

.championship-panel.collapsed {
    width: auto;
}

.championship-panel.collapsed .championship-panel__table {
    display: none;
}

.championship-panel.detached {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 60;
    box-shadow: 0 12px 32px rgba(16,24,40,.18);
}

.championship-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    font-weight: 600;
    font-size: .9rem;
    background: #f5f7fa;
    border-bottom: 1px solid #e5eaf0;
    white-space: nowrap;
}

.championship-panel.detached .championship-panel__header {
    cursor: move;
}

.championship-panel__actions {
    display: flex;
    gap: 2px;
}

.championship-panel__btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: .95rem;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 6px;
}

.championship-panel__btn:hover {
    background: rgba(0,0,0,.06);
}

.championship-panel__table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    font-size: .85rem;
}

.championship-panel__table th,
.championship-panel__table td {
    padding: 4px 6px;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,.08);
    white-space: nowrap;
    overflow: hidden;
}

#championship-table th:nth-child(1),
#championship-table td:nth-child(1) {
    width: 32px;
}

#championship-table th:nth-child(2),
#championship-table td:nth-child(2) {
    width: 36px;
}

#championship-table th:nth-child(4),
#championship-table td:nth-child(4) {
    width: 70px;
}

/* Event classification table has 2 extra columns (R1/R2) before the total,
   so the per-column widths differ from the championship table above even
   though both share the .championship-panel__table base styling. */
#eventclass-table th:nth-child(1),
#eventclass-table td:nth-child(1) {
    width: 36px;
}

#eventclass-table th:nth-child(2),
#eventclass-table td:nth-child(2) {
    width: 30px;
}

#eventclass-table th:nth-child(4),
#eventclass-table td:nth-child(4),
#eventclass-table th:nth-child(5),
#eventclass-table td:nth-child(5) {
    width: 34px;
}

#eventclass-table th:nth-child(6),
#eventclass-table td:nth-child(6) {
    width: 48px;
}

.champ-pts-added {
    font-size: .75em;
    color: #16a34a;
    font-weight: 600;
}

.champ-cell-pending {
    color: #94a3b8;
}

.championship-panel__table td.champ-name-cell,
.championship-panel__table th:nth-child(3) {
    text-align: left;
    text-overflow: ellipsis;
}

/* ── View toggle (Championship vs Event Classification) ──────────────── */
.championship-view-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin-right: 4px;
}

.championship-view-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.championship-view-toggle__track {
    width: 28px;
    height: 16px;
    background: #cbd5e1;
    border-radius: 999px;
    position: relative;
    transition: background .15s ease;
    flex: 0 0 auto;
}

.championship-view-toggle__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    transition: left .15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
}

.championship-view-toggle input:checked + .championship-view-toggle__track {
    background: #2563eb;
}

.championship-view-toggle input:checked + .championship-view-toggle__track .championship-view-toggle__thumb {
    left: 14px;
}

/* Rider has no live position in the currently running session (e.g. injured /
   not on track) – dim the row with a dark overlay instead of removing it. */
.champ-row--inactive {
    position: relative;
}

.champ-row--inactive > td {
    position: relative;
}

.champ-row--inactive > td::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .15);
    pointer-events: none;
}

/* Reuses .pos-delta / .arrow rules already defined above for the main table,
   and the posUp/posDown keyframes for the row-flash animation. */
.champ-row.pos-up {
    animation: posUp 10s linear;
}

.champ-row.pos-down {
    animation: posDown 10s linear;
}