/* =====================================================
   tt-races.css  (5/10)
   Loppvy: #races-container, lopp-grid/kolumner, hästrader, spik/lås, dold vinnare, resultat. Hör till tt-render-races.js.
   Laddas i fast ordning, se kommentaren i början av Default.aspx.
   ===================================================== */

/* =====================================================
   RACES CONTAINER
   ===================================================== */
#races-container
{
    flex: 1;
    overflow: auto;
    padding: 22px 24px 32px;
}

    #races-container::-webkit-scrollbar
    {
        width: 6px;
    }

    #races-container::-webkit-scrollbar-thumb
    {
        border-radius: 3px;
    }

/* Laddningsindikator */
.main-loading
{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 16px;
    color: var(--text-muted);
    padding: 60px;
    position: relative;
    width: 100%;
    height: 100%;
    top: -1600px;
}

/* =====================================================
   RESULTAT – placering och taggar
   ===================================================== */

/* Finalplacering / resultat */
.finish-pos
{
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
}

    .finish-pos.pos-1
    {
        color: var(--gold);
    }

    .finish-pos.pos-2
    {
        color: var(--finish-pos-2);
    }

    .finish-pos.pos-3
    {
        color: var(--finish-pos-3);
    }

/* Tomt innehåll */
.race-empty
{
    padding: 20px 18px;
    color: var(--text-dim);
    font-size: 0.8125rem;
    font-style: italic;
}

/* =====================================================
   Lopp-kolumner (startsida)
   ===================================================== */

.lopp-grid
{
    display: flex;
    gap: 8px;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 8px;
}

    .lopp-grid::-webkit-scrollbar
    {
        height: 8px;
    }

.lopp-col
{
    flex: 1 1 0;
    /* Prognosvärdena ligger i fasta 37 px-fack (se .prognos-rad .prognos-streck),
       vilket kräver 212 px här. Varje px i det facket kostar 2 px kolumnbredd. */
    min-width: 164px;
    background: var(--bg-card);
    border: 1px solid var(--border-color); 
    border-radius: 10px;
    overflow: hidden;
    border-top-width: 4px;
}

.lopp-col-header
{
    position: relative;
    background: var(--lopp-head-bg);
    /*border-bottom: 2px solid var(--gold-dim);*/
    border-bottom: 2px solid var(--border-brighter);
    padding: 8px 10px 22px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 4px;
    justify-content: space-between;
    height: var(--col-head-height);
}

/* Kört lopp: statusarna results/winner/place (se effectiveRaceStatus
   i tt-utils.js). Samma trio i alla tre reglerna nedan. */
.lopp-col-header[data-status="results"],
.lopp-col-header[data-status="winner"],
.lopp-col-header[data-status="place"]
{
    background: var(--lopp-head-klar-bg);
}

/* Visa resultat (#chk-dold-vinnare checkad): kört lopp utan vinnande
   häst i kupongen – alltså fel i loppet. */
body.visa-resultat .lopp-col-header[data-status="results"],
body.visa-resultat .lopp-col-header[data-status="winner"],
body.visa-resultat .lopp-col-header[data-status="place"]
{
    background: var(--lopp-head-fel-bg);
}

/* Visa resultat: rätt i loppet (.kupong-ratt sätts av updateLoppNrStyling
   i tt-kupong.js). Vinner över fel-regeln på specificitet. */
body.visa-resultat .lopp-col-header.kupong-ratt[data-status="results"],
body.visa-resultat .lopp-col-header.kupong-ratt[data-status="winner"],
body.visa-resultat .lopp-col-header.kupong-ratt[data-status="place"]
{
    background: var(--lopp-head-ratt-bg);
}

.lopp-col.spik-locked .hast-row:not(.hast-locked):not(.scratched)
{
    opacity: 0.45;
}

.lopp-col.spik-locked .hast-row:not(.hast-locked) .hast-lock-cb
{
    cursor: not-allowed;
}

.lopp-col.spik-locked .hast-locked
{
    pointer-events: none;
}

.lopp-col.lopp-spikat
{
    border-top: 4px solid var(--gold-dim);
}

.lopp-col-checked-count
{
    color: var(--locked-text);
    font-size: 120%;
    margin-top: 1px;
}

.lopp-nr-wrap
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 56px;
    margin-left: -9%;
}

.lopp-col-nr
{
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--nr-bg);
    border: 1px solid var(--nr-bg);
    font-size: 1.3rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding-top: 2px;
}

    .lopp-col-nr:hover
    {
        opacity: 0.85;
    }

/* Loppnumret färgläggs inte längre efter loppstatus eller kupongträff;
   samma neutrala färger gäller kört och okört lopp (2026-10-09). */

.lopp-col-time
{
    font-size: 0.75rem;
    color: var(--text-bright);
    white-space: nowrap;
}

.lopp-col-distans
{
    position: absolute;
    bottom: 6px;
    left: 8px;
    font-size: 0.75rem;
    color: var(--text-bright);
}

.lopp-col-startmetod
{
    position: absolute;
    bottom: 6px;
    right: 8px;
    font-size: 0.75rem;
    color: var(--text-bright);
}

/* Statusoberoende utseende: badgen i lopphuvudet ser likadan ut oavsett
   status. Överstyr .status-<status> i tt-components.css, som sätter
   --tag-tint/--tag-color – samma specificitet (0,1,0), men den här filen
   laddas senare (5/10 mot 3/10) och vinner därför på ordning.
   #game-status-badge och utdelningsmenyn behåller sina statusfärger. */
.lopp-race-status-badge
{
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.5625rem;
    padding: 2px 6px;
    letter-spacing: 0.5px;
    background: transparent;
    color: var(--text-bright);
    border: 1px solid var(--border-color);
}

/* Pågående lopp: samma hårdblinkande on/off som statusraden, keyframes
   tt-status-flash i tt-base.css. Infinite – den blinkar så länge loppet
   pågår, till skillnad från statusradens engångssignal (3 cykler). */
.lopp-race-status-badge.status-ongoing
{
    animation: tt-status-flash 600ms linear infinite;
}

/* Runda ikonknappar i lopphuvudet – gemensam bas */
.lopp-resultat-btn,
.lopp-play-btn,
.lopp-utveckling-btn
{
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

    .lopp-resultat-btn:hover,
    .lopp-play-btn:hover,
    .lopp-utveckling-btn:hover
    {
        background: var(--gold-dim);
        color: var(--bg-darkest);
        border-color: var(--gold);
    }

.lopp-resultat-btn
{
    position: absolute;
    top: 42px;
    right: 10px;
    font-size: 1rem;
}

.lopp-play-btn
{
    position: absolute;
    top: 42px;
    left: 10px;
    font-size: 0.75rem;
    text-decoration: none;
}

.lopp-utveckling-btn
{
    font-size: 1rem;
}

.hast-row
{
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 0;
    padding: 6px 8px 5px;
    border-bottom: 1px solid var(--border-brighter);
    transition: background 0.12s;
    cursor: pointer;
}

    .hast-row:last-child
    {
        border-bottom: none;
    }

    .hast-row:hover
    {
        background: var(--hover-overlay-3);
    }

    .hast-row.scratched
    {
        opacity: 0.35;
        text-decoration: line-through;
    }

    .hast-row.hast-empty
    {
        color: var(--text-dim);
        font-style: italic;
        grid-template-columns: 1fr;
        justify-items: center;
        padding: 12px;
        cursor: default;
    }

/*body:not(.mobil-landscape) #races-container .hast-row
{
    min-height: 108px;
}

body:not(.mobil-landscape) #races-container.details-hidden .hast-row
{
    min-height: 108px;
}*/


/* Huvudraden måste förbli hästradens FÖRSTA barn – tt-mobil.css fäller ihop
   landskapsläget med .hast-row > :first-child / > :not(:first-child). */
.hast-head
{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

/* Startnumret med distanstillägget under – reserverar plats utan att växa raden */
.hast-nr-wrap
{
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 28px;
    gap: 0;
}

.hast-nr
{
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--hast-nr-bg);
    border: 2px solid var(--hast-nr-ring);
    color: var(--hast-nr-text);
    font-size: 0.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-tal);
    font-stretch: var(--font-tal-bredd);
}

.hast-namn-block
{
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-top: 1px;
}

.hast-namn
{
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-bright);
    display: flex;
    align-items: center;
    min-width: 0;
    justify-content: space-between;
    width: 100%;
    gap: 6px;
    line-height: 1.25;
}

.hast-namn-text,
.hast-kusk-text
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

/* Rutnätet för .prognos-rad ligger tillsammans med .hast-stats ovan.
   Etiketten står efter värdet i varje kolumn. */
.prognos-rad > span
{
    display: flex;
    align-items: baseline;
    gap: 3px;
    white-space: nowrap;
    line-height: 1.45;
}

.prognos-row-lbl
{
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--text-dim);
    line-height: 1.3;
    white-space: nowrap;
}

.hast-prognos-val,
.hast-prognos-trend,
.hast-idx-val
{
    font-size: 0.75rem; 
    font-weight: 700;
    color: var(--text-bright);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.prognos-rad .prognos-streck,
.prognos-rad .prognos-odds
{
    flex: 0 0 70%;
    text-align: right;
}

/*.prognos-rad .stat-odds .prognos-odds
{
    flex: 0 0 34px;
}*/

.hast-plac
{
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-dim);
    min-width: 14px;
    text-align: right;
}

    .hast-plac.plac-1
    {
        color: var(--gold);
    }

    .hast-plac.plac-2
    {
        color: var(--finish-pos-2);
    }

    .hast-plac.plac-3
    {
        color: var(--finish-pos-3);
    }

.hast-row.hast-locked
{
    background: var(--locked-bg);
    border-left: 3px solid var(--locked-border);
}

    .hast-row.hast-locked .hast-nr
    {
        border-color: var(--locked-border);
        color: var(--locked-text);
    }

.hast-row.hast-locked-separator
{
    border-bottom: 2px solid var(--locked-border);
    padding-bottom: 6px;
}

.hast-row.hast-sparrad
{
    background: var(--danger-tint);
    border-left: 3px solid var(--danger) !important;
    opacity: 0.75;
}

    .hast-row.hast-sparrad .hast-nr
    {
        border-color: var(--danger);
        color: var(--danger);
    }

.hast-row.hast-vinnare
{
    background: var(--gold-tint-1);
    border-left: 3px solid var(--gold-dim);
}

    .hast-row.hast-vinnare .hast-nr
    {
        background: linear-gradient(135deg, var(--gold-dim), var(--gold));
        color: var(--bg-darkest);
        border-color: var(--gold);
    }

    .hast-row.hast-vinnare .hast-namn-text
    {
        color: var(--gold-light);
    }

/* Dold-vinnare: nolla vinnarstyling så man inte ser vem som vann */
#races-container.dold-vinnare .hast-plac
{
    display: none;
}

#races-container.dold-vinnare .hast-row.hast-vinnare
{
    background: unset;
    border-left: unset;
}

    #races-container.dold-vinnare .hast-row.hast-vinnare .hast-nr
    {
        background: var(--bg-mid);
        color: var(--text-primary);
        border-color: var(--border-color);
    }

    #races-container.dold-vinnare .hast-row.hast-vinnare .hast-namn-text
    {
        color: unset;
    }

#races-container.dold-vinnare .hast-row.hast-locked
{
    background: var(--locked-bg);
    border-left: 3px solid var(--locked-border);
}

#races-container.dold-vinnare .trad-hast.trad-hast-vinnare
{
    background: unset;
    border-color: var(--border-color);
    border-width: 1px;
    color: unset;
}

#races-container.dold-vinnare .trad-hast.trad-hast-locked.trad-hast-vinnare
{
    background: unset;
    border-color: var(--locked-border);
    border-width: 3px;
    color: unset;
}

/* Trender/detaljer: dolj via containerklass istallet for inline-style */
/* Spikprio-facket ligger i priokolumnen i höjd med prognosraderna och bär
   dessutom radetiketterna Trend/Progn. Döljs trenderna måste facket följa med,
   annars blir det kvar som ett tomt block med skiljelinje mitt i kortet. */
#races-container.trends-hidden .hast-prognos,
#races-container.trends-hidden .hast-spikprio
{
    display: none;
}

#races-container.details-hidden .hast-index
{
    display: none;
}

.hast-tillagg
{
    font-size: 0.5rem;
    font-weight: 700;
    color: var(--text-muted);
    text-align: center;
    white-space: nowrap;
    line-height: 1.15;
    margin-top: 1px;
}

.hast-kusk
{
    display: flex;
    align-items: baseline;
    font-size: 0.75rem;
    color: var(--hast-kusk-color);
    line-height: 1.3;
    min-width: 0;
    margin: 0;
}

.hast-spel-index-debug
{
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--text-pale);
    opacity: 0.55;
    font-weight: 400;
    white-space: nowrap;
}

/* Kortets kropp: två lika breda talkolumner (Streck% / Odds%) och en smal
   priokolumn. De tre staplade raderna delar rutnät, så de lodräta avdelarna
   ligger i linje och ser ut som en obruten linje. */
.hast-kropp
{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    margin-top: 4px;
    min-width: 0;
    font-family: var(--font-tal);
    font-stretch: var(--font-tal-bredd);
}

.hast-kol-data
{
    flex: 1 1 auto;
    min-width: 0;
}

.hast-kol-prio
{
    flex: 0 0 auto;
    width: 20%;
    margin-left: 4px;
    padding-left: 5px;
    border-left: 1px solid var(--hast-divider);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hast-stats-head,
.hast-stats,
.prognos-rad
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: baseline;
}

    .hast-stats-head > span,
    .hast-stats > span,
    .prognos-rad > span
    {
        min-width: 0;
        padding-right: 4px;
    }

        .hast-stats-head > span + span,
        .hast-stats > span + span,
        .prognos-rad > span + span
        {
            border-left: 1px solid var(--hast-divider);
            padding-left: 5px;
            padding-right: 0;
        }

/* Rubrikraden och de stora procenttalen centreras i sin kolumn. Paddingen måste
   vara lika stor på båda sidor i båda cellerna, annars hamnar mitten snett i
   förhållande till den lodräta avdelaren. Prognosraderna berörs inte. */
.hast-stats-head > span,
.hast-stats > span
{
    justify-content: center;
    text-align: center;
    padding-left: 4px;
    padding-right: 4px;
}

    .hast-stats-head > span + span,
    .hast-stats > span + span
    {
        padding-right: 4px;
    }

    .hast-stats-head > span
    {
        font-size: 0.5625rem;
        font-weight: 700;
        letter-spacing: 0.6px;
        color: var(--text-dim);
        white-space: nowrap;
        line-height: 1.4;
    }

.hast-stats
{
    padding-bottom: 1px;
}

.hast-streck,
.hast-odds-pct
{
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-bright);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.3px;
    line-height: 1.15;
}

/* Decimaloddset som sekundärvärde, placerat efter rubriken Odds. Parenteserna
   sätts här, så att både renderRaces och tt-history.js kan skriva enbart talet –
   och inga tomma parenteser syns när oddset saknas. Nollställd teckenspärr, så
   att talet inte ärver rubrikradens spärr. */
.hast-odds
{
    font-size: 0.5625rem;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    margin-left: 3px;
    white-space: nowrap;
}

    .hast-odds:not(:empty)::before
    {
        content: '(';
    }

    .hast-odds:not(:empty)::after
    {
        content: ')';
    }

.stat-odds
{
    display: flex;
    align-items: baseline;
    min-width: 0;
    white-space: nowrap;
}

.hast-prio-lbl
{
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: var(--text-dim);
    white-space: nowrap;
    line-height: 1.4;
}

.hast-tf
{
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-bright);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.3px;
    line-height: 1.15;
}

/* Saknas Spelprio (tt-spel-index.js skriver tom text) faller radhöjden bort och
   priokolumnen glider upp i förhållande till prognosraderna. Reservera raden. */
.hast-tf:empty::before
{
    content: '\00a0';
}

/* Spikprio: badgen sätts in av tt-spel-index.js på loppets bästa häst – alltså
   på en enda häst per lopp. Övriga hästar använder samma fack till radetiketterna
   Trend och Progn, som därmed bara står en gång per kort i stället för fyra. */
.hast-spikprio
{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 38px;
    margin-top: 2px;
    padding-top: 2px;
    border-top: 1px solid transparent;
    border-top-color: var(--hast-divider);
}

.hast-spik-row .hast-spikprio
{
    border-top-color: var(--hast-divider);
}

.hast-spikprio .hast-prio-lbl
{
    display: none;
}

.hast-spik-row .hast-spikprio .hast-prio-lbl
{
    display: block;
}

/* Radetiketterna till prognosblockets två rader. Står på alla hästar utom den
   med spik-badge, och försvinner med trenderna (kryssrutan Visa trender). */
.hast-prognos-legend
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    margin-top: 1px;
    padding-top: 1px;
}

.hast-spik-row .hast-prognos-legend,
#races-container.trends-hidden .hast-prognos-legend
{
    display: none;
}

.hast-tf-high
{
    color: var(--status-results);
}

.hast-tf-mid
{
    color: var(--status-ongoing);
}

.hast-tf-low
{
    color: var(--danger);
}

/* Spik-index – badge för TF-toppkandidaten (se spik_index_briefing.md) */
.hast-spik
{
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid transparent;
    line-height: 1.35;
    white-space: nowrap;
}

.hast-spik-hog
{
    background: var(--status-results);
    color: var(--badge-text);
}

.hast-spik-mid
{
    background: var(--status-ongoing);
    color: var(--badge-text);
}

.hast-spik-lag
{
    background: var(--danger);
    color: var(--badge-text);
}

.hast-index
{
    display: grid;
    font-family: var(--font-tal);
    font-stretch: var(--font-tal-bredd);
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch;
    padding-top: 3px;
    border-top: 1px solid var(--hast-divider);
    margin-top: 4px;
}

.hast-idx-item
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-width: 0;
}

    .hast-idx-item + .hast-idx-item
    {
        border-left: 1px solid var(--hast-divider);
    }

.hast-idx-lbl
{
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-dim);
    line-height: 1.3;
}

.hast-idx-val
{
    white-space: nowrap;
}

.hast-index-high
{
    color: var(--status-results);
}

.hast-index-mid
{
    color: var(--status-ongoing);
}

.hast-index-low
{
    color: var(--danger);
}

.hast-trends
{
    grid-row: 6;
    grid-column: 1 / -1;
    border-top: 1px solid var(--border-soft-weak);
    padding: 4px 8px 6px;
}

.hast-trends-title
{
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 4px;
}

.hast-trends-table
{
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

    .hast-trends-table th
    {
        color: var(--text-dim);
        font-weight: 600;
        text-align: right;
        padding: 0 4px 2px;
        font-size: 0.75rem;
        letter-spacing: 0.5px;
    }

        .hast-trends-table th:first-child
        {
            text-align: left;
        }

.hast-trends-lbl
{
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    padding: 1px 2px 1px 0;
    white-space: nowrap;
}

.hast-trends-val
{
    text-align: right;
    padding: 1px 2px;
    color: var(--text-dim);
    white-space: nowrap;
}

.hast-trend-up
{
    color: var(--status-results);
}

.hast-trend-down
{
    color: var(--danger);
}

.hast-trends-idx
{
    font-weight: 700;
    border-left: 1px solid var(--border-soft);
    padding-left: 6px;
}

/* --- Häst-lås ----------------------------------------- */

/* Dold native checkbox – behålls för :checked-selektorer i JS */
.hast-lock-cb,
.lopp-lock-cb
{
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

/* Synlig ikon-kontroll */
.hast-lock-icon
{
    align-self: flex-start;
    margin-top: 4px;
    cursor: pointer;
    font-size: 17px;
    color: var(--locked-checkbox-border);
    flex-shrink: 0;
    transition: color 0.15s;
    line-height: 1;
}

.hast-locked .hast-lock-icon
{
    color: var(--locked-checkbox-border-checked);
}

.hast-sparrad .hast-lock-icon
{
    color: var(--danger);
}

.lopp-col.spik-locked .hast-row:not(.hast-locked) .hast-lock-icon
{
    opacity: 0.35;
    cursor: not-allowed;
}

/* --- Lopp-lås ----------------------------------------- */

.lopp-lock-icon
{
    cursor: pointer;
    font-size: 18px;
    color: var(--locked-checkbox-border);
    flex-shrink: 0;
    transition: color 0.15s;
    line-height: 1;
    margin-top: 5px;
}

.lopp-col-header .lopp-lock-icon.is-locked
{
    color: var(--locked-checkbox-border-checked);
}

/* Lopp utan streck går inte att låsa (se lasLopp i tt-kupong.js) */
.lopp-lock-icon.lopp-lock-ej-mojlig
{
    opacity: 0.35;
    cursor: not-allowed;
}