/* =====================================================
   tt-base.css  (2/10)
   Bas: reset, html/body, applayout (#app-wrapper/#app-top/#app-body), laddare, responsiv sidobredd, hjälpklasser.
   Laddas i fast ordning, se kommentaren i början av Default.aspx.
   ===================================================== */

/* --- Reset / global --------------------------------- */
*,
*::before,
*::after
{
    box-sizing: border-box;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

html, body
{
    height: 100%;
    margin: 0;
    padding: 0;
    background: var(--bg-darkest);
    color: var(--text-primary);
    font-family: var(--font-sans);
    overscroll-behavior: none;
    font-family: var(--font-tal);
}

/* --- App-wrapper ------------------------------------ */
#app-wrapper
{
    display: flex;
    flex-direction: column;
}

/* Toprad */
#app-top
{
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-color);
    height: var(--top-bar-height);
}

/* Botten */
#app-body
{
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow: clip;
    min-height: 3470px;
}

/* =====================================================
   STATUSRAD (#races-status)
   Ligger sist i #app-wrapper, utanför #app-body, och är position: fixed mot
   fönstrets nederkant. Den låg tidigare inuti #main-content med position: sticky,
   men det krävde overflow: clip där, vilket tog bort den horisontella scrollen i
   #races-container (se kommentaren vid #main-content i tt-topbar.css). Fixed gör
   raden oberoende av app-layouten: den tar ingen plats i flödet och behöver inget
   undantag på något överliggande element. Ingen transform/filter finns på
   app-nivå, så den räknar mot fönstret.
   z-index under toppradens 200–9999, så dess paneler och dropdowns ligger över.
   Texterna sätts av tt-statusrad.js.
   ===================================================== */
#races-status
{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: var(--statusrad-hojd);
    padding: 0 24px;
    background: var(--bg-dark);
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
}

/* Blinkning när ett fält uppdateras: fem cykler à 600 ms = 3 s, synlig halva tiden och
   dold halva.
   Stoppen ligger kant i kant (49,99 / 50 %) så att opacity växlar i ett steg – annars
   tonar den in och ut i stället för att blinka. Timing-funktionen är linear av samma skäl.
   opacity, inte visibility: visibility interpoleras som "synlig om något ändläge är
   synligt" och skulle aldrig släckas. opacity behåller dessutom textens plats, så raden
   inte hoppar när den blinkar.
   Animationen återställer sig själv: opacity återgår till basvärdet när den slutar, och
   sista stoppet är synligt, så fältet slutar aldrig i dolt läge. Därför behöver klassen
   inte städas bort. Den sätts av startaOm() i tt-statusrad.js. */
@keyframes tt-status-flash
{
    0%,  49.99% { opacity: 1; }
    50%, 99.99% { opacity: 0; }
    100%        { opacity: 1; }
}

#races-status .status-flash
{
    animation: tt-status-flash 600ms linear 3;
}

/* Svep: en gul gradient (transparent–gul–transparent) går tvärs över hela raden från
   vänster till höger på 0,7 s när något av värdena ändras.
   Bandet är 40 % av radens bredd och flyttas med transform (komponeras på GPU:n, till
   skillnad från animerad background-position). I viloläge står det på translateX(-100 %),
   alltså helt utanför till vänster, och behöver därför ingen opacity-växling. Slutläget
   250 % är 250 % av bandets EGEN bredd = 100 % av radens, så det hamnar precis utanför
   till höger. overflow: hidden på #races-status klipper det på båda sidor.
   z-index: -1 lägger bandet över radens bakgrund men under texten: #races-status är
   position: fixed med z-index, alltså en egen stackningskontext, och i den målas
   elementets bakgrund först, därefter barn med negativt z-index, sedan innehållet.
   Klassen sätts av startaOm() i tt-statusrad.js. */
#races-status::after
{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    z-index: -1;
    pointer-events: none;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, var(--gold-tint-5), transparent);
}

@keyframes tt-status-svep
{
    from { transform: translateX(-100%); }
    to   { transform: translateX(250%); }
}

#races-status.status-svep::after
{
    animation: tt-status-svep 700ms linear;
}

div.tippertrav-loader
{
    width: 100%;
    height: calc(100vh - var(--top-bar-height));
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

/* =====================================================
   RESPONSIVT
   ===================================================== */

#spelansvar
{
    display: none !important;
    width: calc(200px / var(--safari-zoom));
}

@media (min-width: 985px)
{
    #spelansvar
    {
        display: flex !important;
    }
}

@media (max-width: 984.98px)
{
    :root
    {
        --sidebar-w: 140px;
    }
}

#site-name
{
    display: none !important;
}

@media (min-width: 820px)
{
    #site-name
    {
        display: flex !important;
    }
}

@media (max-width: 819.98px)
{
    :root
    {
        --sidebar-w: 60px;
    }

    .sidebar-title
    {
        display: none;
    }

    #sidebar-header
    {
        justify-content: center;
        padding: 16px 0;
    }

    .sidebar-logo
    {
        font-size: 1.25rem;
    }

    #top-bar
    {
        padding: 0 14px;
    }

    #races-container
    {
        padding: 22px 14px 24px;
    }

}

@media (max-width: 480px)
{
    #omgang-btn-wrap
    {
        max-width: 238px;
    }
}

@media (max-width: 654px)
{
    #payout-ham-wrap
    {
        margin-left: 0px;
        margin-right: 0px;
        border-left: none;
        padding: 0;
    }
}

.inplace-invisible
{
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}