/* =====================================================
   tt-components.css  (3/10)
   Delade komponenter: statusbadges/taggar, sekundärknappar (hover), inmatningsfält/selects, modalbas, små etiketter.
   Laddas i fast ordning, se kommentaren i början av Default.aspx.
   ===================================================== */

/* Statusbadge */
.status-badge
{
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
}

/* Statusfärger: varje variant anger --tag-color/--tag-tint, basen ritar */
.status-results,
.status-ongoing,
.status-upcoming,
.status-bettable,
.status-scheduled,
.status-winner,
.status-place,
.tag-gal,
.tag-disk
{
    background: var(--tag-tint);
    color: var(--tag-color);
    border: 1px solid var(--tag-color);
}

.status-results
{
    --tag-color: var(--status-results);
    --tag-tint: var(--status-results-tint);
}

.status-ongoing
{
    --tag-color: var(--status-ongoing);
    --tag-tint: var(--status-ongoing-tint);
}

.status-upcoming
{
    --tag-color: var(--status-upcoming);
    --tag-tint: var(--status-upcoming-tint);
}

.status-bettable
{
    --tag-color: var(--status-bettable);
    --tag-tint: var(--status-bettable-tint);
}

.status-scheduled
{
    --tag-color: var(--status-scheduled);
    --tag-tint: var(--status-scheduled-tint);
}

.status-winner
{
    --tag-color: var(--status-winner);
    --tag-tint: var(--status-winner-tint);
}

.status-place
{
    --tag-color: var(--status-place);
    --tag-tint: var(--status-place-tint);
}

/* Gallop / diskvalf-taggar */
.result-tag
{
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 1px 5px;
    border-radius: 3px;
    vertical-align: middle;
}

.tag-gal
{
    --tag-color: var(--status-ongoing);
    --tag-tint: var(--status-ongoing-tint);
}

.tag-disk
{
    --tag-color: var(--danger);
    --tag-tint: var(--danger-tint);
}

/* Gemensam hover för sekundära knappar i sidebaren, trådvy, utveckling och historik */
    #btn-las-alla-lopp:hover,
    #btn-add-kupong:hover,
    #btn-rename-kupong:hover,
    #btn-radera-kupong:hover,
    #btn-dela-kupong:hover,
    #btn-add-settings:hover,
    #btn-rename-settings:hover,
    #btn-radera-settings:hover,
    .trad-vy-btn:hover,
    .utveckling-quick-btn:hover,
    .historik-nav .historik-nav-btn:hover,
    .omg-nav-wrap .btn-omg-nav:hover,
    #btn-nollstall-acc:hover,
    #btn-backtest:hover
    {
        background: var(--bg-card);
        color: var(--text-primary);
        border-color: var(--text-dim);
    }

/* Små gråa etiketter (utveckling, upplopp, spel-sidebar) */
.utveckling-slider-label,
.utveckling-quick-label,
.upplopps-zoom-label,
.spel-maxbelopp-row label
{
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Gemensam bas för egna modalboxar (settings, bana, lopp) */
.settings-modal-box,
.bana-modal-box,
.lopp-modal-box
{
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    max-width: 95vw;
    box-shadow: 0 8px 32px var(--popup-shadow);
    overflow: hidden;
}

/* Gemensam bas för små inmatningsfält och selects i spel-/analys-sidebaren */
#spel-max-belopp,
#risk-bredd,
#sort-extra-select,
#spel-antal-spikar,
.spikmetod-select
{
    background: var(--bg-mid);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.875rem;
    padding: 2px 6px;
}

/* Hover som #settings-select-btn (ligger före :focus så att fokusramen vinner) */
    .kupong-select:hover,
    #spel-max-belopp:hover,
    #risk-bredd:hover,
    #spel-antal-spikar:hover,
    #sort-extra-select:hover,
    .spikmetod-select:hover
    {
        background-color: var(--bg-mid);
        border-color: var(--text-dim);
        color: var(--text-primary);
    }

#spel-max-belopp:focus,
    #risk-bredd:focus,
    #sort-extra-select:focus,
    #spel-antal-spikar:focus,
    .spikmetod-select:focus
    {
        outline: none;
        border-color: var(--gold);
    }

/* Egen dropdown-pil för selects i sidebaren */
#sort-extra-select,
#spel-antal-spikar,
.spikmetod-select
{
    appearance: none;
    -webkit-appearance: none;
    background-image: var(--select-arrow);
    background-repeat: no-repeat;
    background-position: right 8px center;
}

#sort-extra-select option,
    #spel-antal-spikar option
    {
        background: var(--bg-mid);
        color: var(--text-primary);
    }

.historik-nav .historik-nav-btn > i,
        .omg-nav-wrap .btn-omg-nav > i,
        #btn-nollstall-acc > i,
        #btn-backtest > i
        {
            font-size: 0.9rem;
        }

.omg-nav-wrap .btn-omg-nav,
    #btn-nollstall-acc,
    #btn-backtest
    {
        height: 24px;
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        background: var(--bg-mid);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        color: var(--text-pale);
        cursor: pointer;
        transition: background 0.15s, color 0.15s, border-color 0.15s;
        line-height: 1;
    }