/* =====================================================
   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;
    min-width: 190px;
    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(--bg-card-alt);
    /*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);
}

.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(--nr-bg);
    color: var(--nr-color);
    font-size: 0.8125rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px var(--nr-shadow);
    cursor: pointer;
}

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

.lopp-col-header[data-status="results"] .lopp-col-nr,
.lopp-col-header[data-status="winner"] .lopp-col-nr,
.lopp-col-header[data-status="place"] .lopp-col-nr
{
    background: var(--nr-klar-bg);
    color: var(--nr-klar-color);
    box-shadow: 0 2px 8px var(--nr-klar-shadow);
}

/* Visa resultat, fel i kupongen: tillbaka till neutralt loppnummer */
body.visa-resultat .lopp-col-header[data-status="results"] .lopp-col-nr,
body.visa-resultat .lopp-col-header[data-status="winner"] .lopp-col-nr,
body.visa-resultat .lopp-col-header[data-status="place"] .lopp-col-nr
{
    background: var(--nr-bg);
    color: var(--nr-color);
    box-shadow: 0 2px 8px var(--nr-shadow);
}

/* Visa resultat, rätt i kupongen: guldmarkerat loppnummer */
body.visa-resultat .lopp-col-header.kupong-ratt[data-status="results"] .lopp-col-nr,
body.visa-resultat .lopp-col-header.kupong-ratt[data-status="winner"] .lopp-col-nr,
body.visa-resultat .lopp-col-header.kupong-ratt[data-status="place"] .lopp-col-nr
{
    background: linear-gradient(135deg, var(--gold-dim), var(--gold));
    color: var(--bg-darkest);
    box-shadow: 0 2px 8px var(--gold-shadow);
}

.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);
}

.lopp-race-status-badge
{
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.5625rem;
    padding: 2px 6px;
    letter-spacing: 0.5px;
}

/* 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 6px;
    padding: 7px 10px;
    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;
    }

.hast-nr
{
    width: 39px;
    height: 26px;
    padding-bottom: 3px;
    border-radius: 50%;
    background: var(--bg-mid);
    border: 1px solid var(--border-brighter);
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.hast-namn
{
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    min-width: 0;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}

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

.prognos-rad
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0px 8px 2px;
}

.prognos-row-lbl
{
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--text-dim);
    line-height: 1;
}

.hast-prognos-val,
.hast-prognos-trend,
.hast-idx-val
{
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-bright);
    line-height: 1;
}

.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 */
#races-container.trends-hidden .hast-prognos
{
    display: none;
}

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

.hast-tillagg
{
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-bright);
    text-align: center;
    white-space: nowrap;
    position: absolute;
    left: 14px;
    top: 40px;
}

.hast-kusk
{
    display: flex;
    align-items: baseline;
    font-size: 0.8125rem;
    color: var(--gold-light);
    margin-top: 5px;
    margin-left: 31%;
}

/* Reservera samma höjd/padding som .hast-spik på alla rader */
    .hast-kusk::after
    {
        content: '\00a0'; /* icke-brytande mellanslag — ger texthöjd */
        font-size: 0.875rem;
        font-weight: 700;
        font-family: var(--font-mono);
        padding: 2px 6px 1px;
        border: 1px solid transparent;
        line-height: 1.5;
        white-space: nowrap;
        visibility: hidden;
        display: inline-block;
    }

/* Dölj pseudo-elementet när en riktig badge redan finns */
    .hast-kusk:has(.hast-spik)::after
    {
        display: none;
    }

.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;
}

.hast-kusk .hast-spik
{
    margin-left: auto;
    flex-shrink: 0;
}

.hast-stats-head
{
    grid-row: 3;
    grid-column: 1/-1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 8px;
    margin-top: 3px;
    padding: 3px 8px 2px;
}

.hast-stats-head > span
    {
        font-size: 0.8rem;
        color: var(--text-white);
        font-family: var(--font-mono);
        white-space: nowrap;
    }

.hast-stats
{
    grid-row: 4;
    grid-column: 1/-1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0px 8px 2px;
}

.hast-stats > span
    {
        font-weight: 700;
    }

.hast-streck
{
    font-size: 0.8125rem;
    color: var(--text-bright);
    font-family: var(--font-mono);
}

.hast-odds, .hast-dummy
{
    font-size: 0.8125rem;
    color: var(--text-bright);
    font-family: var(--font-mono);
    align-items: baseline;
    gap: 2px;
}

.stat-left, .stat-mid, .stat-right
{
    text-align: right;
}

.stat-left
{
    width: 22%;
}

.stat-mid
{
    width: 35%;
}

.stat-right
{
    width: 40%;
}

.hast-tf
{
    font-size: 0.8125rem;
    font-weight: 700;
    font-family: var(--font-mono);
}

.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.875rem;
    font-weight: 700;
    font-family: var(--font-mono);
    padding: 2px 6px 1px;
    border-radius: 4px;
    border: 1px solid transparent;
    line-height: 1.5;
    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
{
    grid-row: 5;
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 3px 8px 2px;
    border-top: 1px solid var(--border-soft);
    margin-top: 3px;
}

.hast-idx-item
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

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

.hast-idx-sep
{
    color: var(--border-color);
    font-size: 0.75rem;
    align-self: center;
    padding: 0 2px;
}

.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
{
    grid-row: 1 / 1;
    grid-column: 1;
    align-self: center;
    justify-self: center;
    cursor: pointer;
    font-size: 20px;
    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);
}