/* =====================================================
   tt-trad-vy.css  (7/10)
   Trådvy (parallellkoordinater). Hör till tt-trad-vy.js.
   Laddas i fast ordning, se kommentaren i början av Default.aspx.
   ===================================================== */

/* Container i trådvy-läge */
#races-container.trad-vy-container
{
    padding: 8px;
}

/* Grid i trådvy-läge */
.lopp-grid.trad-vy-mode
{
    height: 100%;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    gap: 6px;
}

.lopp-grid.trad-vy-mode .lopp-col
    {
        min-width: 150px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

/* Dölj vanliga hästrader i trådvy */
    .lopp-grid.trad-vy-mode .hast-row
    {
        display: none !important;
    }

/* Trådvy-wrapper */
.trad-view
{
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    max-height: calc(100vh - 155px);
}

/* De fem stripsen sida vid sida */
.trad-body
{
    display: flex;
    flex: 1;
    min-height: 0;
}

/* En strip = ett kriterium */
.trad-strip
{
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-soft);
    min-width: 0;
    overflow: hidden;
}

.trad-strip:last-child
    {
        border-right: none;
    }

/* Kriterium-etikett */
.trad-strip-label
{
    flex-shrink: 0;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-dim);
    text-align: center;
    padding: 4px 2px;
    background: var(--bg-darkest);
    border-bottom: 1px solid var(--border-soft);
}

/* Axelyta med vertikal centrumlinje */
.trad-strip-axis
{
    flex: 1;
    position: relative;
    overflow: hidden;
}

.trad-strip-axis::before
    {
        content: '';
        position: absolute;
        left: 50%;
        top: 4%;
        height: 92%;
        width: 1px;
        background: var(--border-soft-strong);
        transform: translateX(-50%);
    }

/* Hästmarkör */
.trad-hast
{
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: var(--bg-mid);
    border: 1px solid var(--accent-border);
    color: var(--text-primary);
    font-size: 1.125rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    z-index: 1;
    line-height: 1;
    transition: all 0.12s;
}

.trad-hast:hover
    {
        background: var(--bg-card-alt);
        border-color: var(--gold-dim);
        color: var(--gold-light);
        z-index: 10;
        width: 40px;
        height: 40px;
        font-size: 1.375rem;
    }

/* Häst som delar (nästan) samma vertikala position som en annan – sprids
   horisontellt i sidled och görs något mindre för att rymmas */
.trad-hast-collision
{
    width: 28px;
    height: 28px;
    font-size: 0.875rem;
}

.trad-hast-collision:hover
    {
        width: 34px;
        height: 34px;
        font-size: 1.125rem;
    }

/* Häst utan data – dimmad längst ner */
.trad-hast-nodata
{
    opacity: 0.25;
    border-style: dashed;
}

/* Checkad häst – blå ring + blå siffra */
.trad-hast.trad-hast-locked
{
    border-color: var(--locked-border);
    border-width: 2px;
    color: var(--locked-text);
}

/* Vinnarhäst – gul bakgrund + gul siffra */
.trad-hast.trad-hast-vinnare
{
    background: var(--gold-tint-5);
    border-color: var(--gold-dim);
    border-width: 2px;
    color: var(--gold-light);
}

/* Checkad OCH vinnare – gul bakgrund, blå ring */
.trad-hast.trad-hast-locked.trad-hast-vinnare
{
    background: var(--gold-tint-5);
    border-color: var(--locked-border);
    border-width: 3px;
    color: var(--gold-light);
}

/* Spik-index – TF-toppkandidaten markeras med en stjärna i övre högra hörnet */
.trad-hast-spik-icon
{
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 0.5625rem;
    line-height: 1;
}

.trad-hast-spik-icon.trad-hast-spik-hog
    {
        color: var(--status-results);
    }

.trad-hast-spik-icon.trad-hast-spik-mid
    {
        color: var(--status-ongoing);
    }

.trad-hast-spik-icon.trad-hast-spik-lag
    {
        color: var(--danger);
    }