/* =====================================================
   V85 Tipper – Racing theme
   ===================================================== */

/* --- CSS-variabler ---------------------------------- */
:root
{
    --screen-min: 1920px;
    --screen-max: 1920px;
    --font-min: calc(var(--screen-min) * 0.006667);
    --font-max: calc(var(--screen-max) * 0.006667);
    --safari-zoom: 1;
    font-size: max(var(--font-min), 0.6667vw);
    --top-bar-height: 73px;
    --bg-darkest: #0d0f14;
    --bg-darkest-alt: #1a1e2e;
    --bg-dark: #141720;
    --bg-mid: #1c2030;
    --bg-card: #1f2438;
    --bg-card-alt: #242840;
    --bg-input-alt: #3c4263;
    --border-color: #2e3350;
    --border-brighter: #575d7e;
    --gold: #c9a227;
    --gold-light: #e8c55a;
    --gold-dim: #7a6218;
    --text-white: #ffffff;
    --text-bright: #f2f3f8;
    --text-pale: #cfd0d4;
    --text-primary: #e8eaf2;
    --text-muted: #949dc2;
    --text-dim: #a2acd5;
    --dark-gold: #69663d;
    --text-vinst: rgb(181, 174, 155);
    --sidebar-w: 300px;
    --topbar-h: 72px;
    --col-head-height: 100px;
    --status-results: #22c55e;
    --status-ongoing: #f59e0b;
    --status-upcoming: #60a5fa;
    --status-bettable: #a78bfa;
    --status-scheduled: #6b7280;
    --status-winner: #f97316;
    --status-place: #84cc16;
    --font-mono: 'Courier New', Courier, monospace;
    /* --- Övriga färger (tema-beroende) ---------------- */
    --hover-overlay-1: rgba(255,255,255,0.02);
    --hover-overlay-2: rgba(255,255,255,0.03);
    --hover-overlay-3: rgba(255,255,255,0.05);
    --border-soft: rgba(46,51,80,0.5);
    --border-soft-weak: rgba(46,51,80,0.3);
    --border-soft-strong: rgba(46,51,80,0.7);
    --modal-overlay: rgba(0,0,0,0.6);
    --modal-shadow: rgba(0,0,0,0.6);
    --gold-tint-1: rgba(201,162,39,0.06);
    --gold-tint-2: rgba(201,162,39,0.08);
    --gold-tint-3: rgba(201,162,39,0.1);
    --gold-tint-4: rgba(201,162,39,0.15);
    --gold-tint-5: rgba(201,162,39,0.25);
    --jackpot-color: #4ade80;
    --jackpot-tint: rgba(74,222,128,0.1);
    --jackpot-border-tint: rgba(74,222,128,0.4);
    --gold-shadow: rgba(201,162,39,0.3);
    --danger: #f87171;
    --danger-tint: rgba(239,68,68,0.15);
    --finish-pos-2: #9ca3af;
    --finish-pos-3: #a0714c;
    --excel-green: #2b7a2b;
    --excel-green-hover: #41b241;
    --locked-text: #7ec8f5;
    --locked-border: #2a6a9e;
    --locked-bg: rgba(74,158,221,0.07);
    --locked-checkbox-border: #6c77a3;
    --locked-checkbox-bg-checked: #1a3a5c;
    --locked-checkbox-border-checked: #4a9edd;
    --accent-border: #3d4470;
    --accent-bg: #252a40;
    --status-results-tint: rgba(34,197,94,0.15);
    --status-results-tint-2: rgba(34,197,94,0.1);
    --status-ongoing-tint: rgba(245,158,11,0.15);
    --status-upcoming-tint: rgba(96,165,250,0.15);
    --status-bettable-tint: rgba(167,139,250,0.15);
    --status-scheduled-tint: rgba(107,114,128,0.15);
    --status-winner-tint: rgba(249,115,22,0.15);
    --status-place-tint: rgba(132,204,22,0.15);
    --badge-text: #0a0a0a;
    --momentum-color: #34d399;
    --upplopps-hast: #a58260;
    --upplopps-gold: #e8c55a;
    --upplopps-bana: linear-gradient(90deg,rgba(95, 104, 139, 1) 0%, rgba(95, 104, 139, 0.3) 10%, rgba(31, 36, 56, 1) 10%, rgba(31, 36, 56, 1) 100%);
    --upplopps-bana-border: #2e3350;
}

body.ipad-zoom
{
    --sidebar-w: 375px;
}

/* --- Ljust tema --------------------------------------- */
[data-theme="light"]
{
    --bg-darkest: #f4f5f9;
    --bg-darkest-alt: #e7eaf3;
    --bg-dark: #ffffff;
    --bg-mid: #eef0f6;
    --bg-card: #ffffff;
    --bg-card-alt: #e3e6eb;
    --bg-input-alt: #d6dbf6;
    --border-color: #a6aabb;
    --border-brighter: #a4a9bc;
    --gold: #b8860b;
    --gold-light: #8c6402;
    --gold-dim: #c9a227;
    --text-white: #000000;
    --text-bright: #1a1d2e;
    --text-pale: #787a80;
    --text-primary: #2c3050;
    --text-muted: #6b7280;
    --text-dim: #555c80;
    --dark-gold: #8a7a3a;
    --text-vinst: rgb(83, 75, 53);
    --status-results: #16a34a;
    --status-ongoing: #d97706;
    --status-upcoming: #2563eb;
    --status-bettable: #7c3aed;
    --status-scheduled: #6b7280;
    --status-winner: #ea580c;
    --status-place: #65a30d;
    --hover-overlay-1: rgba(0,0,0,0.025);
    --hover-overlay-2: rgba(0,0,0,0.035);
    --hover-overlay-3: rgba(0,0,0,0.05);
    --border-soft: rgba(0,0,0,0.10);
    --border-soft-weak: rgba(0,0,0,0.06);
    --border-soft-strong: rgba(0,0,0,0.16);
    --modal-overlay: rgba(0,0,0,0.35);
    --modal-shadow: rgba(0,0,0,0.2);
    --gold-tint-1: rgba(184,134,11,0.08);
    --gold-tint-2: rgba(184,134,11,0.10);
    --gold-tint-3: rgba(184,134,11,0.12);
    --gold-tint-4: rgba(184,134,11,0.16);
    --gold-tint-5: rgba(184,134,11,0.25);
    --jackpot-color: #15803d;
    --jackpot-tint: rgba(21,128,61,0.12);
    --jackpot-border-tint: rgba(21,128,61,0.4);
    --gold-shadow: rgba(184,134,11,0.3);
    --danger: #dc2626;
    --danger-tint: rgba(220,38,38,0.12);
    --finish-pos-2: #6b7280;
    --finish-pos-3: #8a5a2b;
    --excel-green: #1f7a1f;
    --excel-green-hover: #2e9e2e;
    --locked-text: #1e6fa8;
    --locked-border: #4a9edd;
    --locked-bg: rgba(74,158,221,0.12);
    --locked-checkbox-border: #8d96ba;
    --locked-checkbox-bg-checked: #dceefb;
    --locked-checkbox-border-checked: #2a6a9e;
    --accent-border: #c7cce0;
    --accent-bg: #e7eaf3;
    --status-results-tint: rgba(22,163,74,0.14);
    --status-results-tint-2: rgba(22,163,74,0.10);
    --status-ongoing-tint: rgba(217,119,6,0.14);
    --status-upcoming-tint: rgba(37,99,235,0.13);
    --status-bettable-tint: rgba(124,58,237,0.13);
    --status-scheduled-tint: rgba(107,114,128,0.15);
    --status-winner-tint: rgba(234,88,12,0.14);
    --status-place-tint: rgba(101,163,13,0.14);
    --badge-text: #f1eeee;
    --momentum-color: #059669;
    --upplopps-hast: #a58260;
    --upplopps-gold: #e8af00;
    --upplopps-bana: linear-gradient(90deg, rgb(143 151 184) 0%, rgba(143, 151, 184, 0.3) 10%, rgb(222 223 231) 10%, rgb(222 223 231) 100%);
    --upplopps-bana-border: #9296a5;
}

article
{
    --bg-darkest: #0d0f14;
    --bg-dark: #141720;
    --bg-card: #1f2438;
    --bg-card2: #252a42;
    --border-color: #2e3350;
    --gold: #c9a227;
    --text-gold: #c9a227;
    --gold-light: #e8c55a;
    --text-primary: #e8eaf2;
    --text-dim: #a2acd5;
    --text-muted: #6b74a2;
    --text-pale: #cfd0d4;
    --green: #3dba7a;
    --red: #e05c5c;
    --topbar-h: 56px;
    --screen-min: 1920px;
    --screen-max: 1920px;
    --locked-border: #2a6a9e;
    --font-min: calc(var(--screen-min) * 0.008);
    --font-max: calc(var(--screen-max) * 0.008);
    font-size: max(var(--font-min), 0.8vw);
}

[data-theme="light"] article
{
    --bg-darkest: #f4f5f9;
    --bg-dark: #eef0f6;
    --bg-card: #ffffff;
    --bg-card2: #f8f9fc;
    --border-color: #d0d5e8;
    --gold: #b8860b;
    --text-gold: #b8860b;
    --gold-light: #c9970e;
    --text-primary: #2c3050;
    --text-dim: #4a5480;
    --text-muted: #6b74a2;
    --text-pale: #787a80;
    --locked-border: #4a9edd;
}

/* --- 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: 'Segoe UI', system-ui, -apple-system, sans-serif;
    overscroll-behavior: none;
}

/* --- 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;
}

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

/* =====================================================
   SIDEBAR
   ===================================================== */

/* Sidebar-header: alltid synlig i #app-top */
#sidebar-header
{
    width: var(--sidebar-w);
    flex-shrink: 0;
    padding: 0 12px 0 18px;
    background: linear-gradient(135deg, var(--bg-darkest) 0%, var(--bg-darkest-alt) 100%);
    border-right: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: width 0.25s ease;
}

/* Sidebar-content: kollapsbar i bredd, i #app-body */
#sidebar-content
{
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--bg-dark);
    border-right: 1px solid var(--border-color);
    overflow: hidden;
    transition: width 0.25s ease;
}

#sidebar-toggle
{
    margin-left: auto;
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--text-dim);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.6875rem;
    transition: color 0.15s, border-color 0.15s;
}

    #sidebar-toggle:hover
    {
        color: var(--text-muted);
        border-color: var(--text-dim);
    }

    #sidebar-toggle i
    {
        transition: transform 0.2s ease;
    }

#app-wrapper.sidebar-collapsed #sidebar-toggle i
{
    transform: rotate(180deg);
}

.sidebar-logo
{
    font-size: 1.375rem;
    color: var(--gold);
    letter-spacing: 5px;
    font-weight: 700;
}

.sidebar-logo-text
{
    margin-top: -8px;
    margin-left: 8px;
}

.spelansvar
{
    font-size: 0.6875rem;
    color: var(--text-pale);
}

.sidebar-title
{
    font-size: 1.125rem;
    font-weight: 300;
    color: var(--text-muted);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-left: 7px;
    margin-top: 2px;
}

#app-wrapper.sidebar-collapsed #sidebar-content
{
    width: 0;
    border-right: none;
}

#sidebar-content-inner
{
    width: var(--sidebar-w);
    height: 100%;
    overflow-y: auto;
    padding: 8px 0;
}

    #sidebar-content-inner::-webkit-scrollbar
    {
        width: 4px;
    }

    #sidebar-content-inner::-webkit-scrollbar-track
    {
        background: transparent;
    }

    #sidebar-content-inner::-webkit-scrollbar-thumb
    {
        background: var(--border-brighter);
        border-radius: 2px;
    }

.sidebar-placeholder
{
    padding: 24px 18px;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

/* Datumseparator i sidebaren */
.sidebar-date-group
{
    margin-bottom: 4px;
}

.sidebar-date-label
{
    padding: 10px 18px 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* Omgångskort i sidebar */
.omgang-item
{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.15s, border-color 0.15s;
    margin-bottom: 2px;
}

    .omgang-item:hover
    {
        background: var(--bg-mid);
        border-left-color: var(--gold-dim);
    }

    .omgang-item.active
    {
        background: var(--bg-mid);
        border-left-color: var(--gold);
    }

.omgang-icon
{
    font-size: 1.125rem;
    color: var(--text-dim);
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}

.omgang-item.active .omgang-icon
{
    color: var(--gold);
}

.omgang-info
{
    flex: 1;
    min-width: 0;
}

.omgang-track
{
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.omgang-time
{
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 1px;
}

.omgang-country
{
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-dim);
    background: var(--bg-card);
    padding: 1px 5px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* =====================================================
   TOPBAR
   ===================================================== */
#top-bar
{
    flex: 1;
    height: var(--topbar-h);
    background: var(--bg-dark);
    display: flex;
    align-items: center;
    padding: 0 15px;
}

#main-content
{
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-darkest);
}

#top-bar-placeholder
{
    color: var(--text-dim);
    font-size: 0.9375rem;
    letter-spacing: 0.5px;
}

#game-header
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
    gap: 10px;
}

#game-title-wrap
{
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    gap: 2px;
}

/* H1-wrapper för knapp + dold select */
#omgang-btn-wrap
{
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    position: relative;
    display: inline-flex;
    align-items: center;
    width: calc(400px / var(--safari-zoom));
}

/* Knapp som visar vald omgång */
.omgang-btn
{
    background: var(--bg-mid);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: calc(1rem / (1 + (var(--safari-zoom, 1) - 1) * 0.5));
    font-weight: 700;
    font-family: inherit;
    padding: 2px 28px 2px 10px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    outline: none;
    transition: border-color 0.15s;
    text-align: center;
}

    .omgang-btn:hover,
    .omgang-btn:focus
    {
        border-color: var(--gold-dim);
    }

.omgang-chevron
{
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-83%);
    font-size: 1.4rem;
    line-height: 1;
    color: var(--text-muted);
    pointer-events: none;
    font-style: normal;
}

/* Native select – osynlig men klickbar ovanpå knappen */
/* Hidden select – bara för värdelagring */
.omgang-select-native
{
    display: none;
}

/* Custom dropdown-lista */
.omgang-dropdown
{
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    max-height: calc(10 * 2.25rem);
    overflow-y: auto;
    background: var(--bg-mid);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
    z-index: 9999;
    list-style: none;
    margin: 0;
    padding: 4px 0;
    overflow-x: hidden;
}

    .omgang-dropdown.omgang-dropdown--open
    {
        display: block;
    }

    .omgang-dropdown li
    {
        padding: 0.4rem 0.75rem;
        cursor: pointer;
        font-size: 0.875rem;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: background 0.1s;
    }

        .omgang-dropdown li:hover
        {
            background: var(--bg-input-alt);
        }

        .omgang-dropdown li.omgang-dropdown--selected
        {
            background: var(--bg-darkest);
            color: var(--gold-light);
            font-weight: 600;
        }

        .omgang-dropdown li[data-has-data="false"]
        {
            color: var(--text-muted);
        }

    .omgang-dropdown::-webkit-scrollbar
    {
        width: 4px;
    }

    .omgang-dropdown::-webkit-scrollbar-track
    {
        background: transparent;
    }

    .omgang-dropdown::-webkit-scrollbar-thumb
    {
        background: var(--border-brighter);
        border-radius: 2px;
    }



#game-title
{
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#game-subtitle
{
    font-size: 0.8125rem;
    color: var(--text-muted);
    white-space: nowrap;
}

#game-meta
{
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.game-money
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* --- Temaväxlare (längst till höger i top-bar) ------- */
#theme-toggle-wrap
{
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 10px;
}

/* --- Payout-hamburger (utdelning vid smal skärm) ------- */
#payout-ham-wrap
{
    display: none;
    align-items: center;
    flex-shrink: 0;
    margin-left: 10px;
    position: relative;
}

#payout-ham-panel
{
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    flex-direction: column;
    gap: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px;
    z-index: 300;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    min-width: 120px;
}

    #payout-ham-panel.open
    {
        display: flex;
    }

#payout-ham-btn.active
{
    color: var(--gold-light);
    border-color: var(--gold-dim);
}

/* Utan jackpot: hamburger under 1350px */
@media (max-width: 1349px)
{
    #top-bar[data-jackpot="0"] #game-payouts
    {
        display: none !important;
    }

    #top-bar[data-jackpot="0"] #payout-ham-wrap
    {
        display: flex;
    }
}

/* Med jackpot: hamburger under 1500px */
@media (max-width: 1525px)
{
    #top-bar[data-jackpot="1"] #game-payouts
    {
        display: none !important;
    }

    #top-bar[data-jackpot="1"] #payout-ham-wrap
    {
        display: flex;
    }
}

/* Jackpot-rad i hamburgerpanelen */
.payout-ham-jackpot-item
{
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--jackpot-color);
    font-size: 0.8125rem;
    padding: 4px 6px 8px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 2px;
    white-space: nowrap;
}

/* Pågående omgång med jackpot: hamburger + dölj #game-jackpot under 1500px */
@media (max-width: 1175px)
{
    #top-bar[data-has-jackpot]:not([data-jackpot]) #payout-ham-wrap
    {
        display: flex;
    }

    #top-bar[data-has-jackpot]:not([data-jackpot]) #game-jackpot
    {
        display: none;
    }
}

/* Avgjord omgång med jackpot: dölj #game-jackpot i topbar under 1350px */
@media (max-width: 1175px)
{
    #top-bar[data-jackpot="1"] #game-jackpot
    {
        display: none;
    }
}

/* Turnover-rad i hamburgerpanelen */
.payout-ham-turnover-item
{
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-dim);
    font-size: 0.8125rem;
    padding: 4px 6px;
    white-space: nowrap;
}

    .payout-ham-turnover-item i
    {
        color: var(--text-muted);
        font-size: 0.75rem;
    }

/* Omsättning: hamburger + dölj #game-turnover under 1200px */
@media (max-width: 1175px)
{
    #top-bar[data-has-turnover] #payout-ham-wrap
    {
        display: flex;
    }

    #top-bar[data-has-turnover] #game-turnover
    {
        display: none;
    }
}

/* Status-badge i hamburgerpanelen */
.payout-ham-status-item
{
    align-self: flex-start;
}

/* Status: hamburger + dölj #game-status-badge under 1105px */
@media (max-width: 1075px)
{
    #top-bar[data-has-status] #payout-ham-wrap
    {
        display: flex;
    }

    #top-bar[data-has-status] #game-status-badge
    {
        display: none;
    }
}

/* Kontroll-rad i hamburgerpanelen (info / settings / tema) */
#ham-controls-wrap
{
    display: none;
    gap: 8px;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid var(--border-color);
    justify-content: center;
}

/* Under 640px: dölj topbar-kontroller, visa alltid hamburger */
@media (max-width: 745px)
{
    #info-wrap,
    #settings-wrap,
    #theme-toggle-wrap
    {
        display: none !important;
    }

    #payout-ham-wrap
    {
        display: flex;
    }

    #ham-controls-wrap
    {
        display: flex;
    }
}

.theme-toggle-btn
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-dim);
    font-size: 0.875rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

    .theme-toggle-btn:hover
    {
        color: var(--gold-light);
        border-color: var(--gold-dim);
    }

.meta-chip
{
    font-size: 0.8125rem;
    color: var(--gold-light);
    background: var(--gold-tint-3);
    border: 1px solid var(--gold-dim);
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.meta-chip-jackpot
{
    color: var(--jackpot-color);
    background: var(--jackpot-tint);
    border-color: var(--jackpot-border-tint);
}

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

.status-results
{
    background: var(--status-results-tint);
    color: var(--status-results);
    border: 1px solid var(--status-results);
}

.status-ongoing
{
    background: var(--status-ongoing-tint);
    color: var(--status-ongoing);
    border: 1px solid var(--status-ongoing);
}

.status-upcoming
{
    background: var(--status-upcoming-tint);
    color: var(--status-upcoming);
    border: 1px solid var(--status-upcoming);
}

.status-bettable
{
    background: var(--status-bettable-tint);
    color: var(--status-bettable);
    border: 1px solid var(--status-bettable);
}

.status-scheduled
{
    background: var(--status-scheduled-tint);
    color: var(--status-scheduled);
    border: 1px solid var(--status-scheduled);
}

.status-winner
{
    background: var(--status-winner-tint);
    color: var(--status-winner);
    border: 1px solid var(--status-winner);
}

.status-place
{
    background: var(--status-place-tint);
    color: var(--status-place);
    border: 1px solid var(--status-place);
}


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

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

    #races-container::-webkit-scrollbar-track
    {
        background: transparent;
    }

    #races-container::-webkit-scrollbar-thumb
    {
        background: var(--border-brighter);
        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;
}

/* =====================================================
   LOPPKORT
   ===================================================== */
.race-card
{
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: border-color 0.2s;
}

    .race-card:hover
    {
        border-color: var(--accent-border);
    }

/* Kortets header */
.race-card-header
{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    background: var(--bg-card-alt);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    user-select: none;
}

.race-number-badge
{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-dim), var(--gold));
    color: var(--bg-darkest);
    font-size: 0.875rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px var(--gold-shadow);
}

.race-card-title
{
    flex: 1;
    min-width: 0;
}

.race-name
{
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.race-details
{
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
    display: flex;
    gap: 12px;
}

.race-detail-item
{
    display: flex;
    align-items: center;
    gap: 4px;
}

    .race-detail-item i
    {
        font-size: 0.6875rem;
        opacity: 0.7;
    }

.race-card-meta
{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.race-toggle-icon
{
    color: var(--text-dim);
    font-size: 0.8125rem;
    transition: transform 0.2s;
}

.race-card.collapsed .race-toggle-icon
{
    transform: rotate(-90deg);
}

/* Hästtabell */
.race-card-body
{
    overflow: hidden;
}

.race-card.collapsed .race-card-body
{
    display: none;
}

.table-scroll-wrap
{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

    .table-scroll-wrap::-webkit-scrollbar
    {
        height: 4px;
    }

    .table-scroll-wrap::-webkit-scrollbar-track
    {
        background: transparent;
    }

    .table-scroll-wrap::-webkit-scrollbar-thumb
    {
        background: var(--border-brighter);
        border-radius: 2px;
    }

.horses-table
{
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
}

    .horses-table thead tr
    {
        background: var(--bg-darkest);
    }

    .horses-table th
    {
        padding: 8px 14px;
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--text-dim);
        border-bottom: 1px solid var(--border-color);
        white-space: nowrap;
    }

        .horses-table th:first-child
        {
            width: 42px;
            text-align: center;
        }

    .horses-table td
    {
        padding: 10px 14px;
        border-bottom: 1px solid var(--border-soft);
        vertical-align: middle;
        font-size: 0.8125rem;
    }

    .horses-table tr:last-child td
    {
        border-bottom: none;
    }

    .horses-table tbody tr:hover
    {
        background: var(--hover-overlay-1);
    }

    /* Scratched (struken) häst */
    .horses-table tr.scratched td
    {
        opacity: 0.35;
        text-decoration: line-through;
    }

/* Startnummer */
.start-number
{
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-mid);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

/* Häst-info kolumn */
.horse-name
{
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.driver-name
{
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gold-light);
    display: flex;
    align-items: center;
    gap: 5px;
}

.horse-meta
{
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Rekord */
.horse-record
{
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--gold-light);
    white-space: nowrap;
}

/* V85-vinnare (resultat) */
.v85-winner-badge
{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--gold-tint-4);
    color: var(--gold-light);
    border: 1px solid var(--gold-dim);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.6875rem;
    font-weight: 700;
}

/* 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);
    }

/* Trend-färger */
.trend-up
{
    color: var(--status-results);
}

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

/* 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
{
    background: var(--status-ongoing-tint);
    color: var(--status-ongoing);
    border: 1px solid var(--status-ongoing);
}

.tag-disk
{
    background: var(--danger-tint);
    color: var(--danger);
    border: 1px solid var(--danger);
}

/* V85-andel-indikator */
.v85-pct-bar
{
    display: flex;
    align-items: center;
    gap: 6px;
}

.v85-pct-track
{
    width: 60px;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
}

.v85-pct-fill
{
    height: 100%;
    background: linear-gradient(90deg, var(--gold-dim), var(--gold));
    border-radius: 2px;
}

.v85-pct-label
{
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* =====================================================
   HÄST-EXPAND
   ===================================================== */

/* Startnummer-cell med chevron */
.start-number-wrap
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.horse-expand-icon
{
    font-size: 0.5625rem;
    color: var(--text-dim);
    transition: transform 0.2s, color 0.2s;
}

.horse-row
{
    cursor: pointer;
}

    .horse-row:hover .horse-expand-icon
    {
        color: var(--text-muted);
    }

    .horse-row.expanded .horse-expand-icon
    {
        transform: rotate(90deg);
        color: var(--gold);
    }

    .horse-row.expanded
    {
        background: var(--hover-overlay-2);
    }

/* Detaljrad */
.horse-detail-row
{
    background: var(--bg-darkest);
}

.horse-detail-td
{
    padding: 0;
    border-bottom: 2px solid var(--border-color);
}

.horse-detail-inner
{
    padding: 14px 18px 16px 52px;
}

/* Statisk info */
.horse-detail-content
{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.horse-detail-info
{
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
}

.detail-info-row
{
    display: flex;
    gap: 6px;
    font-size: 0.75rem;
}

.detail-label
{
    color: var(--text-dim);
    white-space: nowrap;
}

.detail-value
{
    color: var(--text-muted);
}

.detail-horse-comment
{
    font-style: italic;
    color: var(--text-primary);
}

/* TR Media-kommentarer i race-card-title */
.race-comments
{
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.race-comment-row
{
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.75rem;
}

.race-comment-nr
{
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg-mid);
    border: 1px solid var(--border-color);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.race-comment-text
{
    font-style: italic;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Startshistorik */
.detail-history-placeholder
{
    font-size: 0.75rem;
    color: var(--text-dim);
    padding: 4px 0;
}

.detail-starts-section
{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-section-title
{
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 6px;
}

.detail-starts-table
{
    width: 100%;
    min-width: 500px;
    border-collapse: collapse;
    font-size: 0.75rem;
}

    .detail-starts-table th
    {
        padding: 5px 10px;
        font-size: 0.625rem;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--text-dim);
        border-bottom: 1px solid var(--border-color);
        white-space: nowrap;
        text-align: left;
    }

        .detail-starts-table th:first-child,
        .detail-starts-table td:first-child
        {
            white-space: nowrap;
            min-width: 90px;
        }

    .detail-starts-table td
    {
        padding: 6px 10px;
        color: var(--text-muted);
        border-bottom: 1px solid var(--border-soft-weak);
        vertical-align: middle;
    }

    .detail-starts-table tbody tr:last-child td
    {
        border-bottom: none;
    }

    .detail-starts-table tbody tr:hover td
    {
        background: var(--hover-overlay-1);
    }

.detail-comment-row td
{
    padding: 2px 10px 8px;
}

.detail-comment
{
    font-size: 0.6875rem;
    color: var(--text-dim);
    font-style: italic;
}

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

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

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

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

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

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

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

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

    .sidebar-title,
    .omgang-info,
    .omgang-country,
    .sidebar-date-label
    {
        display: none;
    }

    .omgang-item
    {
        justify-content: center;
        padding: 12px 0;
    }

    .omgang-icon
    {
        width: auto;
        font-size: 1.25rem;
    }

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

    .race-details
    {
        flex-wrap: wrap;
        gap: 6px;
    }

    .horses-table th.col-trainer,
    .horses-table td.col-trainer
    {
        display: none;
    }
}


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

/*@media (max-width: 692px)
{
    #omgang-btn-wrap
    {
        max-width: 194px;
    }
}
*/


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


.omgang-excel-btn
{
    font-size: 200%;
    color: var(--excel-green);
}


    .omgang-excel-btn:hover
    {
        color: var(--excel-green-hover);
    }
/* =====================================================
   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-grid::-webkit-scrollbar-track
    {
        background: transparent;
    }

    .lopp-grid::-webkit-scrollbar-thumb
    {
        background: var(--border-brighter);
        border-radius: 2px;
    }

.lopp-col
{
    flex: 1 1 0;
    min-width: 190px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}

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

.lopp-spik-cb
{
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--gold);
    background: var(--dark-gold);
    border: 1px solid var(--text-primary);
    border-radius: 3px;
}

    .lopp-spik-cb:checked
    {
        background: var(--gold);
        border-color: var(--gold);
    }

    .lopp-spik-cb:not(:checked)
    {
        appearance: none;
        -webkit-appearance: none;
    }


    .lopp-spik-cb:disabled
    {
        cursor: not-allowed;
        opacity: 0.35;
    }

.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.lopp-spikat
{
    border-top: 2px solid var(--gold-dim);
}

    .lopp-col.lopp-spikat .lopp-col-header
    {
        background: var(--gold-tint-2);
    }

.lopp-col-checked-count
{
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--locked-text);
    min-height: 14px;
    border: 1px solid var(--locked-text);
    padding: 1px 5px;
    width: 25px;
    text-align: center;
}

.lopp-nr-wrap
{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: calc(40% - 25px);
    gap: 5px;
}

.lopp-col-nr
{
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-dim), var(--gold));
    color: var(--bg-darkest);
    font-size: 0.8125rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px var(--gold-shadow);
    cursor: pointer;
}

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

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

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

.lopp-resultat-btn
{
    position: absolute;
    top: 37px;
    left: 6px;
    font-size: 0.75rem;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 1rem;
    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
    {
        background: var(--gold-dim);
        color: var(--bg-darkest);
        border-color: var(--gold);
    }

.lopp-play-btn
{
    position: absolute;
    top: 37px;
    left: 40px;
    font-size: 0.75rem;
    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;
    text-decoration: none;
}

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



.lopp-utveckling-btn
{
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

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

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

.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
{
    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-column-lbl
{
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-dim);
    line-height: 1;
    width: 100%;
}

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

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

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

.hast-kusk-text
{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 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;
}

.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;
    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-val
{
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-bright);
    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: 'Segoe UI', system-ui, sans-serif;
    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öger sidebar (startsida)
   ===================================================== */

/* =====================================================
   Höger sidopanel-grupp (startsida)
   ===================================================== */

#right-panels-wrap
{
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    border-left: 1px solid var(--border-color);
    height: calc(100vh - var(--top-bar-height));
    position: sticky;
    top: 0px;
    align-self: flex-start;
}

#panel-toggle-row
{
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-color);
    position: absolute;
    right: 0;
}

.panel-toggle-btn
{
    flex: 1;
    background: var(--bg-darkest);
    border: none;
    border-right: 1px solid var(--border-color);
    color: var(--text-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

    .panel-toggle-btn:last-child
    {
        border-right: none;
    }

    .panel-toggle-btn:hover
    {
        background: var(--bg-darkest-alt);
        color: var(--text-primary);
    }

    .panel-toggle-btn.is-active
    {
        color: var(--gold);
        background: var(--bg-dark);
        border-bottom: 2px solid var(--gold);
    }

    .panel-toggle-btn i
    {
        font-size: 0.75rem;
    }

#btn-toggle-spel
{
    transition: margin-right 0.3s linear;
}


#panel-toggle-row.analys-is-active #btn-toggle-spel.is-active
{
    margin-right: 86px;
}


#right-panels-body
{
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow: hidden;
    margin-top: 20px;
    border-top: 1px solid var(--border-color);
    height: 100%;
}

/* Sidopaneler */
#spel-sidebar,
#right-sidebar
{
    flex-shrink: 0;
    background: var(--bg-dark);
    overflow: hidden auto;
    transition: width 0.25s ease;
}

#spel-sidebar
{
    width: 300px;
}

    #spel-sidebar.is-collapsed
    {
        width: 0;
    }

#right-sidebar
{
    width: 165px;
    border-left: 1px solid var(--border-color);
}

    #right-sidebar.is-collapsed
    {
        width: 0;
    }

/* Sidopanelinnehåll */
#spel-sidebar-inner,
#right-sidebar-inner
{
    overflow-y: auto;
    padding: 14px 14px;
}

#spel-sidebar-inner
{
    width: 100%;
    overflow-x: hidden;
}

#right-sidebar-inner
{
    width: 100%;
}

#spel-sidebar::-webkit-scrollbar,
#right-sidebar::-webkit-scrollbar
{
    width: 4px;
}

#spel-sidebar::-webkit-scrollbar-track,
#right-sidebar::-webkit-scrollbar-track
{
    background: transparent;
}

#spel-sidebar::-webkit-scrollbar-thumb,
#right-sidebar::-webkit-scrollbar-thumb
{
    background: var(--border-brighter);
    border-radius: 2px;
}

.right-sidebar-heading
{
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.5px;
    padding-bottom: 10px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .right-sidebar-heading i
    {
        color: var(--gold);
    }

.right-sidebar-visa
{
    border-bottom: 1px solid var(--border-brighter);
}

.btn-spel, #btn-slumptal
{
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    transition: color 0.15s, border-color 0.15s;
    flex-shrink: 0;
    padding: 3px 8px;
}

    .btn-spel:hover, #btn-slumptal:hover
    {
        color: var(--gold);
        border-color: var(--gold-dim);
    }

.btn-atg
{
    width: auto;
    padding: 0 6px;
}

.atg-logo
{
    height: 12px;
    width: auto;
    display: block;
}

#atg-import-cancel-row
{
    border-top: 1px solid var(--border-brighter);
    justify-content: end;
}

/* =====================================================
   KONFIGURATIONSPOPUP
   ===================================================== */
#cfg-overlay
{
    position: fixed;
    inset: 0;
    background: var(--modal-overlay);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#cfg-popup
{
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    width: 560px;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 48px var(--modal-shadow);
}

.cfg-hdr
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    flex-shrink: 0;
}

    .cfg-hdr i
    {
        color: var(--gold);
        margin-right: 6px;
    }

#cfg-x
{
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 1.25rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    transition: color 0.15s;
}

    #cfg-x:hover
    {
        color: var(--text-primary);
    }

.cfg-body
{
    overflow-y: auto;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

    .cfg-body::-webkit-scrollbar
    {
        width: 4px;
    }

    .cfg-body::-webkit-scrollbar-track
    {
        background: transparent;
    }

    .cfg-body::-webkit-scrollbar-thumb
    {
        background: var(--border-brighter);
        border-radius: 2px;
    }

.cfg-grp
{
    background: var(--bg-mid);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 14px;
}

.cfg-grp-title
{
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-bottom: 8px;
}

.cfg-grp-title-sub
{
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 12px;
    margin-bottom: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.cfg-formula
{
    font-size: 0.6875rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
    background: var(--bg-darkest);
    padding: 5px 8px;
    border-radius: 4px;
    margin-bottom: 4px;
    line-height: 1.5;
}

.cfg-formula-sub
{
    font-size: 0.625rem;
    color: var(--text-dim);
    margin-bottom: 10px;
}

.cfg-fields
{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.cfg-field
{
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-dim);
    min-width: 80px;
}

.cfg-input
{
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-family: var(--font-mono);
    padding: 4px 6px;
    width: 100%;
    transition: border-color 0.15s;
}

    .cfg-input:focus
    {
        outline: none;
        border-color: var(--gold-dim);
    }

.cfg-ftr
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

    .cfg-ftr button
    {
        padding: 7px 16px;
        border-radius: 6px;
        font-size: 0.8125rem;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.15s, color 0.15s;
    }

#cfg-reset
{
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-dim);
}

    #cfg-reset:hover
    {
        color: var(--text-primary);
        border-color: var(--text-dim);
    }

.cfg-save-btn
{
    background: linear-gradient(135deg, var(--gold-dim), var(--gold));
    border: none;
    color: var(--bg-darkest);
}

    .cfg-save-btn:hover
    {
        filter: brightness(1.1);
    }

.cfg-grp-load
{
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 14px;
    margin-bottom: 4px;
}

.cfg-load-row
{
    display: flex;
    gap: 8px;
    align-items: center;
}

.cfg-file-select
{
    flex: 1;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.75rem;
    padding: 5px 8px;
    cursor: pointer;
}

.cfg-load-btn
{
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--bg-mid);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    transition: background 0.15s;
    white-space: nowrap;
}

    .cfg-load-btn:not(:disabled):hover
    {
        background: var(--bg-light);
    }

    .cfg-load-btn:disabled
    {
        opacity: 0.4;
        cursor: default;
    }

.cfg-loaded-from
{
    margin-top: 6px;
    font-size: 0.6875rem;
    color: var(--gold-light);
    min-height: 16px;
}

.right-sidebar-section
{
    margin-bottom: 20px;
}

.sort-historik-group
{
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 20px;
}

.sort-historik-left
{
    flex: 1;
    min-width: 0;
}

    .sort-historik-left .right-sidebar-section
    {
        margin-bottom: 12px;
    }

.sort-historik-right
{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2px;
}

.right-sidebar-label
{
    display: block;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 8px;
}

.right-sidebar-info
{
    font-size: 0.8125rem;
    letter-spacing: 0.6px;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.spel-senaste-label
{
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-dim);
}

#spel-senaste-gard
{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.label-headline
{
    color: var(--text-primary);
    font-size: 0.9rem;
    letter-spacing: 3px;
}

.sort-option
{
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.8125rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0px;
    border-radius: 6px;
    transition: background 0.12s, color 0.12s;
    user-select: none;
}

    .sort-option:hover
    {
        background: var(--bg-mid);
        color: var(--text-primary);
    }

    .sort-option input[type="radio"]
    {
        accent-color: var(--gold);
        width: 14px;
        height: 14px;
        cursor: pointer;
        flex-shrink: 0;
    }

    .sort-option:has(input:checked)
    {
        color: var(--gold-light);
        background: var(--gold-tint-2);
    }

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

/* Dold native checkbox – behålls för :checked-selektorer i JS */
.hast-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-cb
{
    grid-row: 1 / 1;
    grid-column: 1;
    appearance: none;
    -webkit-appearance: none;
    width: 21px;
    height: 21px;
    border: 2px solid var(--locked-checkbox-border);
    border-radius: 4px;
    background: var(--accent-bg);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s, border-color 0.12s;
    position: relative;
}

    .lopp-lock-cb:checked
    {
        background: var(--locked-checkbox-bg-checked);
        border-color: var(--locked-checkbox-border-checked);
    }

        .lopp-lock-cb:checked::after
        {
            content: '';
            display: block;
            position: absolute;
            top: 3px;
            left: 7px;
            width: 5px;
            height: 9px;
            border: 2px solid var(--locked-text);
            border-top: none;
            border-left: none;
            transform: rotate(45deg);
        }


/* --- Utdelning (#game-payouts) ---------------------- */

#game-payouts
{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    position: relative;
}

@media (orientation: portrait)
{
    body.ipad-zoom #game-payouts
    {
        display: none;
    }
}

.payout-chip
{
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 4px 10px;
    min-width: 80px;
    gap: 1px;
}

.payout-chip-label
{
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-dim);
}

.payout-chip-systems
{
    font-size: 0.625rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.payout-chip-amount
{
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--gold-light);
    font-family: var(--font-mono);
}

/* Toggle-knapp (synlig bara i kompakt-läge) */
.payout-toggle
{
    display: none;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    width: 22px;
    height: 22px;
    padding: 0;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.6875rem;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.2s, border-color 0.2s;
}

    .payout-toggle:hover
    {
        color: var(--gold);
        border-color: var(--gold-dim);
    }

    .payout-toggle i
    {
        transition: transform 0.25s ease;
        pointer-events: none;
    }

#game-payouts.open .payout-toggle i
{
    transform: rotate(180deg);
}

/* Wrap för 7, 6, 5 rätt */
.payout-extra
{
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Jackpot-omgång: kompakt under 1525px */
@media (max-width: 1525px)
{
    #game-payouts[data-jackpot="1"] .payout-toggle
    {
        display: flex;
    }

    #game-payouts[data-jackpot="1"] .payout-extra
    {
        display: none;
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        flex-direction: column;
        gap: 4px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 6px;
        z-index: 200;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    }

    #game-payouts[data-jackpot="1"].open .payout-extra
    {
        display: flex;
    }
}

/* Icke-jackpot-omgång: kompakt under 1600px */
@media (max-width: 1599px)
{
    #game-payouts[data-jackpot="0"] .payout-toggle
    {
        display: flex;
    }

    #game-payouts[data-jackpot="0"] .payout-extra
    {
        display: none;
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        flex-direction: column;
        gap: 4px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 6px;
        z-index: 200;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    }

    #game-payouts[data-jackpot="0"].open .payout-extra
    {
        display: flex;
    }
}

/* =====================================================
   HISTORIK-NAVIGERING
   ===================================================== */

.historik-ts
{
    font-size: 1rem;
    font-family: var(--font-mono);
    color: var(--gold-light);
    font-weight: 600;
    margin-bottom: 8px;
    white-space: nowrap;
    min-height: 16px;
    text-align: center;
}

.historik-slider-wrap
{
    display: flex;
    justify-content: center;
    padding: 6px 0 2px;
}

.historik-slider
{
    writing-mode: vertical-lr;
    direction: rtl;
    width: 28px;
    height: calc(100vh - 670px);
    min-height: 210px;
    cursor: pointer;
    accent-color: var(--gold);
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
}

    .historik-slider:disabled
    {
        opacity: 0.3;
        cursor: default;
    }

body.har-resultat .historik-slider
{
    height: calc(100vh - 690px);
}

/* =====================================================
   RADER-VISNING & SYSTEMSPARANDE
   ===================================================== */

.rader-och-ratt
{
}

.rader-display
{
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 10px;
}

.rader-antal
{
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gold-light);
    font-family: var(--font-mono);
    line-height: 1;
}

#spel-hastar-display
{
    text-align: center;
}

.rader-belopp
{
    font-size: 0.75rem;
    color: var(--text-muted);
}

.antal-siffra
{
    width: 100%;
}

.rader-wrap
{
    text-align: left;
}


.antal-ratt-display
{
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.antal-ratt-label
{
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 8px;
}

.antal-ratt
{
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gold-light);
    font-family: var(--font-mono);
    line-height: 1;
}

.kupong-bar
{
    width: 100%;
}

.kupong-select
{
    flex: 1;
    background: var(--bg-mid);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-family: inherit;
    padding: 5px 8px;
    cursor: pointer;
}

    .kupong-select:focus
    {
        outline: none;
        border-color: var(--text-dim);
        color: var(--text-primary);
    }

#btn-add-kupong,
#btn-rename-kupong,
#btn-radera-kupong,
#btn-dela-kupong
{
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    background: var(--bg-mid);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1;
}

    #btn-add-kupong:hover,
    #btn-rename-kupong:hover,
    #btn-radera-kupong:hover,
    #btn-dela-kupong:hover
    {
        background: var(--bg-card);
        color: var(--text-primary);
        border-color: var(--text-dim);
    }

#btn-rename-kupong
{
    font-size: 0.8rem;
}

#rename-kupong-modal button.namn-btn
{
    flex-shrink: 0;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1;
}


/* --- Utdelningsprognos -------------------------------- */
.utdelning-prognos
{
    margin-bottom: 14px;
}

#rename-kupong-input
{
    width: 100%;
    background: var(--bg-input-alt);
    border: 1px solid var(--border-brighter);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.875rem;
    padding: 2px 6px;
}

    #rename-kupong-input:focus
    {
        outline: none;
        border-color: var(--gold);
    }


.prognos-table
{
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

    .prognos-table th
    {
        padding: 4px 6px;
        font-size: 0.625rem;
        font-weight: 600;
        text-transform: uppercase;
        color: var(--text-dim);
        border-bottom: 1px solid var(--border-color);
        text-align: right;
    }

        .prognos-table th:first-child
        {
            text-align: left;
            padding: 4px 0px 4px 6px;
        }

    .prognos-table td
    {
        padding: 4px 6px;
        font-family: var(--font-mono);
        color: var(--gold-light);
        text-align: right;
        border-bottom: 1px solid var(--border-soft);
    }

        .prognos-table td:first-child
        {
            padding: 4px 6px;
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            color: var(--text-dim);
            text-align: left;
            border-bottom: 1px solid var(--border-soft);
        }

    .prognos-table tr:last-child td
    {
        border-bottom: none;
    }

/* =====================================================
   TRÅDVY – parallellkoordinater
   ===================================================== */

/* Toggle-knapp */
.trad-vy-btn
{
    width: 100%;
    padding: 7px 10px;
    background: var(--bg-mid);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

    .trad-vy-btn:hover
    {
        background: var(--bg-card);
        color: var(--text-primary);
        border-color: var(--text-dim);
    }

    .trad-vy-btn.trad-vy-active
    {
        background: var(--gold-tint-3);
        border-color: var(--gold-dim);
        color: var(--gold-light);
    }

/* Absolut-skala-toggle under Trådvy-knappen */
.trad-skala-wrap
{
    display: none;
    margin-top: 6px;
}

    .trad-skala-wrap.trad-skala-visible
    {
        display: block;
    }

.trad-skala-label
{
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6875rem;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}

.lock-selected-label
{
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--text-brighter);
    cursor: pointer;
    user-select: none;
}

    .lock-selected-label input[type="checkbox"]
    {
        accent-color: var(--gold-dim);
        width: 13px;
        height: 13px;
        cursor: pointer;
    }

.dold-vinnare-row
{
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-dold-vinnare-lock
{
    background: none;
    border: none;
    padding: 0 2px;
    cursor: pointer;
    color: var(--text-pale);
    font-size: 0.75rem;
    line-height: 1;
    opacity: 0.35;
    transition: opacity 0.15s, color 0.15s;
}

    .btn-dold-vinnare-lock:not(:disabled)
    {
        opacity: 0.7;
    }

        .btn-dold-vinnare-lock:not(:disabled):hover
        {
            opacity: 1;
            color: var(--gold-light);
        }

    .btn-dold-vinnare-lock.locked
    {
        opacity: 1;
        color: var(--gold-light);
    }

.visa-group
{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.visa-option
{
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--text-brighter);
    cursor: pointer;
    user-select: none;
}

    .visa-option input[type="checkbox"]
    {
        accent-color: var(--gold-dim);
        width: 13px;
        height: 13px;
        cursor: pointer;
    }

.trad-skala-label input[type="checkbox"]
{
    accent-color: var(--gold-dim);
    width: 13px;
    height: 13px;
    cursor: pointer;
}

/* 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);
    }


/* -------------------------------------------------------
   Odds- och streckutveckling – modal
   ------------------------------------------------------- */

#utveckling-modal .modal-content
{
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

#utveckling-modal .modal-header
{
    border-bottom: 1px solid var(--border-color);
    justify-content: space-between;
}

#utveckling-modal .modal-title
{
    color: var(--gold-light);
    font-size: 1rem;
}

#utveckling-modal .btn-close
{
    color: var(--text-bright);
}

.utveckling-controls
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 10px;
}

.utveckling-legend
{
    display: flex;
    gap: 16px;
    font-size: 0.75rem;
    color: var(--text-dim);
}

.utveckling-legend-item
{
    display: flex;
    align-items: center;
    gap: 6px;
}

.utveckling-swatch
{
    display: inline-block;
    width: 14px;
    height: 3px;
    border-radius: 2px;
}

.utveckling-swatch-odds
{
    background: var(--status-upcoming);
}

.utveckling-swatch-streck
{
    background: var(--gold);
}

.utveckling-swatch-momentum
{
    background: var(--momentum-color);
}

.utveckling-slider-wrap
{
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 280px;
    min-width: 220px;
}

.utveckling-slider-label
{
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.utveckling-slider
{
    flex: 1 1 auto;
}

.utveckling-quick-wrap
{
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 100%;
}

.utveckling-quick-label
{
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.utveckling-quick-buttons
{
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.utveckling-quick-btn
{
    padding: 3px 8px;
    background: var(--bg-mid);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}

    .utveckling-quick-btn:hover
    {
        background: var(--bg-card);
        color: var(--text-primary);
        border-color: var(--text-dim);
    }

    .utveckling-quick-btn.utveckling-quick-active
    {
        background: var(--gold-tint-3);
        border-color: var(--gold-dim);
        color: var(--gold-light);
    }

.utveckling-hastar
{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.utveckling-hast-row
{
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    background: var(--bg-card-alt);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.utveckling-hast-info
{
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.utveckling-hast-nr
{
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-dim), var(--gold));
    color: var(--bg-darkest);
    font-size: 0.6875rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.utveckling-hast-namn
{
    font-size: 0.75rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.utveckling-chart-wrap
{
    position: relative;
    height: 140px;
    width: 100%;
}


/* -------------------------------------------------------
   Resultat-upploppsvy
------------------------------------------------------- */

#resultat-modal .modal-content
{
    background: var(--bg-darkest);
}

.resultat-modal-body
{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 0;
}

.upplopps-zoom-wrap
{
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.upplopps-zoom-label
{
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.upplopps-zoom-btns
{
    display: flex;
    gap: 5px;
}

.upplopps-zoom-btn
{
    padding: 3px 10px;
    font-size: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

    .upplopps-zoom-btn:hover
    {
        background: var(--bg-mid);
        color: var(--text-primary);
    }

    .upplopps-zoom-btn.upplopps-zoom-active
    {
        background: var(--gold-dim);
        color: var(--text-bright);
        border-color: var(--gold);
        font-weight: 600;
    }

.upplopps-repris-btn
{
    margin-left: 40px;
    padding: 3px 10px;
    font-size: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

    .upplopps-repris-btn:hover
    {
        background: var(--bg-mid);
        color: var(--text-primary);
    }

/* Vinstmarginal-label, positionerad ovanför mållinjen (right: 10%) */
.upplopps-vinstmarginal
{
    position: absolute;
    right: 10%;
    transform: translateX(50%) translateY(5px);
    bottom: 0;
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-bright);
    white-space: nowrap;
    line-height: 1.3;
    pointer-events: none;
}

#upplopps-banor
{
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.upplopps-bana
{
    flex: 1;
    position: relative;
    overflow: hidden;
    background: var(--bg-card);
    background: var(--upplopps-bana);
    border-top: 1px solid var(--upplopps-bana-border);
}

    .upplopps-bana:last-child
    {
        border-bottom: 1px solid var(--upplopps-bana-border);
    }

    /* Mållinje 10% från högerkanten */
    .upplopps-bana::after
    {
        content: '';
        position: absolute;
        right: 10%;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--gold);
        pointer-events: none;
        z-index: 1;
    }

/* Häst: right-positionerad, flex-rad så info+ikon delar utrymme */
.upplopps-hast
{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 88%;
    transition: right 0.35s ease;
    display: flex;
    align-items: center;
    z-index: 2;
    transition: right 2.5s linear;
}

/* Textinfo till vänster om hästikonen, högerfluktat */
.upplopps-hast-info
{
    text-align: right;
    padding-right: 8px;
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.upplopp-namn-o-kusk
{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.upplopps-rad1
{
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 4px;
    line-height: 1.25;
}

.upplopps-nr
{
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-muted);
    flex-shrink: 0;
}

.upplopps-ikon
{
    font-size: 3.3vh;
    color: var(--upplopps-hast);
    line-height: 1;
}

.upplopps-vinnare-ikon
{
    color: var(--upplopps-gold);
}


.upplopps-namn
{
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.upplopps-rad2,
.upplopps-rad3
{
    line-height: 1.3;
}

.upplopps-kusk
{
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.upplopps-kmtid
{
    font-size: 0.875rem;
    color: var(--text-muted);
    font-family: monospace;
}

#resultat-modal .modal-header
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.modal-header .btn-close
{
    margin-left: unset;
}

/* --- Info-knapp (användarguide) ------------------------- */
#info-wrap
{
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 15px;
}

/* --- Inställningsknapp (cog) ---------------------------- */
#settings-wrap
{
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 10px;
}

/* --- Inställningar modal --------------------------------- */
.settings-modal-overlay
{
    position: fixed;
    inset: 0;
    background: rgb(89 89 89 / 55%);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-modal-box
{
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    width: 460px;
    max-width: 95vw;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.settings-modal-box--narrow
{
    width: 360px;
}

.settings-modal-header
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-main);
}

.settings-modal-close
{
    background: none;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--text-primary);
    cursor: pointer;
    padding: 0 4px;
}

    .settings-modal-close:hover
    {
        color: var(--text-main);
    }

.settings-modal-body
{
    padding: 18px;
}

.settings-section
{
    margin-bottom: 4px;
}

.settings-section-title
{
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 6px;
}

.settings-section-desc
{
    font-size: 0.9rem;
    color: var(--text-dim);
    margin-bottom: 10px;
}

.settings-divider
{
    border-color: var(--border-color);
    margin: 14px 0;
}

.settings-file-input
{
    display: none;
}

.import-feedback
{
    margin-top: 10px;
    font-size: 0.75rem;
    min-height: 18px;
}

    .import-feedback.ok
    {
        color: #4caf7d;
    }

    .import-feedback.err
    {
        color: #e05c5c;
    }

.settings-confirm-actions
{
    display: flex;
    gap: 10px;
    margin-top: 14px;
    justify-content: end;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid var(--border-brighter);
}

/* Knappar i settings-modaler – gemensam kontrast */
.settings-modal-box .btn-outline-secondary
{
    background: var(--bg-mid);
    border-color: var(--border-brighter);
    color: var(--text-dim);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

    .settings-modal-box .btn-outline-secondary:hover
    {
        background: var(--bg-card-alt);
        border-color: var(--text-dim);
        color: var(--text-primary);
    }

/* -------------------------------------------------------
   Spel-sidebar
   ------------------------------------------------------- */

.guide-row
{
    display: grid;
    grid-template-columns: 80px 1fr 22px;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

    .guide-row label
    {
        font-size: 0.75rem;
        color: var(--text-pale);
        margin: 0;
        white-space: nowrap;
    }

    .guide-row .guide-slider
    {
        width: 100%;
        accent-color: var(--gold);
    }

    .guide-row .guide-val
    {
        font-size: 0.6875rem;
        color: var(--text-muted);
        text-align: right;
    }

    .guide-row.trend-disabled
    {
        opacity: 0.4;
        pointer-events: none;
    }

.risk-row
{
    display: grid;
    grid-template-columns: 1fr 26px;
    align-items: center;
    gap: 6px;
}

.risk-label
{
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.risk-hint-row
{
    width: 88%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.risk-hint-lo,
.risk-hint-mid,
.risk-hint-hi
{
    font-size: 0.75rem;
    color: var(--text-muted);
    width: 100%;
}

.risk-hint-lo
{
    text-align: left;
}

.risk-hint-mid
{
    text-align: center;
}

.risk-hint-hi
{
    text-align: right;
}

#risk-profil,
#risk-kostnad
{
    width: 100%;
    accent-color: var(--gold);
}

.risk-val
{
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-align: right;
}

#spel-las-lopp
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.spel-las-row
{
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
    flex-direction: column;
}

    .spel-las-row label
    {
        font-size: 0.75rem;
        color: var(--text-muted);
        margin: 0;
        cursor: pointer;
        border: 1px solid var(--text-muted);
        padding-left: 5px;
        padding-right: 5px;
        border-radius: 50%;
    }

.spel-no-data
{
    font-size: 0.75rem;
}

.spel-sektion
{
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-brighter);
}

.spel-gard-row
{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

#spel-nasta-gard
{
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: var(--bg-card);
    padding: 3px 10px;
}

.spel-maxbelopp-row
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

    .spel-maxbelopp-row label
    {
        font-size: 0.75rem;
        color: var(--text-muted);
        white-space: nowrap;
    }

#spel-max-belopp, #risk-bredd
{
    width: 100px;
    background: var(--bg-input, var(--bg-card));
    border: 1px solid var(--border-dim);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.875rem;
    padding: 2px 6px;
    text-align: center;
}

    #spel-max-belopp:focus, #risk-bredd:focus
    {
        outline: none;
        border-color: var(--gold);
    }

.spel-hastar-row
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.spel-gard-row-actions
{
    margin-top: 6px;
    justify-content: space-between;
}

body.ipad-zoom .spel-gard-row-actions > button
{
    font-size: 0.65rem;
}

.btn-spel-danger:hover
{
    color: var(--danger, #e05c5c);
    border-color: var(--danger, #e05c5c);
}


/* Ljust tema: sliders och checkboxar/radioknappar använder default accent-color */
[data-theme="light"] #risk-bredd,
[data-theme="light"] #risk-profil,
[data-theme="light"] .guide-row .guide-slider,
[data-theme="light"] .historik-slider,
[data-theme="light"] .sort-option > input,
[data-theme="light"] #chk-visa-trender,
[data-theme="light"] #chk-visa-detaljer,
[data-theme="light"] #chk-lock-selected,
[data-theme="light"] #chk-dold-vinnare
{
    accent-color: auto;
}

/* =====================================================================
   SEO-sektion: #v85-article-wrap / article#v85-article
   Synlig, fullt läsbar sektion längst ner på sidan.
   ===================================================================== */

#v85-article-wrap
{
    position: absolute;
    max-width: 100vw;
    left: -100vw;
    margin: 2.5rem auto 0 auto;
    padding: 0 1rem 3rem 1rem;
    min-height: 6700px;
}

article#v85-article
{
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.75rem 2rem;
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.65;
}

    article#v85-article .v85-article-header
    {
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--border);
    }

    article#v85-article h2
    {
        font-size: 1.3rem;
        font-weight: 600;
        color: var(--text);
        margin: 0 0 0.25rem 0;
    }

    article#v85-article .v85-article-status
    {
        font-size: 0.8rem;
        color: var(--text-muted);
        margin: 0;
    }

    article#v85-article > p
    {
        color: var(--text-muted);
        margin: 0 0 0.75rem 0;
    }

    article#v85-article .v85-article-avd
    {
        margin-top: 1.25rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border);
    }

        article#v85-article .v85-article-avd:first-of-type
        {
            border-top: none;
            padding-top: 0;
        }

    article#v85-article h3
    {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text);
        margin: 0 0 0.25rem 0;
    }

    article#v85-article .v85-article-loppinfo
    {
        font-size: 0.8rem;
        color: var(--text-muted);
        margin: 0 0 0.4rem 0;
    }

    article#v85-article .v85-article-avd > p:not(.v85-article-loppinfo)
    {
        margin: 0 0 0.4rem 0;
        color: var(--text-muted);
        font-size: 0.85rem;
    }

    article#v85-article .v85-article-list
    {
        margin: 0;
        padding-left: 1.4rem;
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
    }

        article#v85-article .v85-article-list li
        {
            color: var(--text);
            font-size: 0.9rem;
        }

            article#v85-article .v85-article-list li strong
            {
                color: var(--gold);
            }

    article#v85-article .v85-article-footer
    {
        margin-top: 1.5rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--border);
    }

        article#v85-article .v85-article-footer p
        {
            font-size: 1rem;
            color: var(--text-muted);
            margin: 0;
        }

        article#v85-article .v85-article-footer a
        {
            color: var(--gold);
            text-decoration: none;
        }

            article#v85-article .v85-article-footer a:hover
            {
                text-decoration: underline;
            }

    /* Häst-tabell per avdelning */
    article#v85-article .v85-article-table-wrap
    {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0.75rem 0 0;
    }

    article#v85-article .v85-article-table
    {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.82rem;
        min-width: 560px;
    }

        article#v85-article .v85-article-table thead tr
        {
            background: var(--bg-darkest);
        }

        article#v85-article .v85-article-table th
        {
            padding: 0.35rem 0.5rem;
            text-align: left;
            font-weight: 600;
            color: var(--text-muted);
            border-bottom: 1px solid var(--border);
            white-space: nowrap;
        }

        article#v85-article .v85-article-table td
        {
            padding: 0.28rem 0.5rem;
            color: var(--text);
            border-bottom: 1px solid var(--border);
            white-space: nowrap;
        }

        article#v85-article .v85-article-table tbody tr:nth-child(odd)
        {
            background: rgba(255,255,255,0.02);
        }

        article#v85-article .v85-article-table tbody tr:hover
        {
            background: rgba(255,255,255,0.05);
        }

        /* Häst-namn (kolumn 2) i guld */
        article#v85-article .v85-article-table td:nth-child(2)
        {
            color: var(--gold);
            font-weight: 500;
        }

        /* Strukna hästar */
        article#v85-article .v85-article-table tr.v85-scratched td
        {
            text-decoration: line-through;
            color: var(--text-muted);
            opacity: 0.6;
        }

            article#v85-article .v85-article-table tr.v85-scratched td:nth-child(2)
            {
                color: var(--text-muted);
            }

        /* Spik-rad (ingår i systemet, spikad avdelning) */
        article#v85-article .v85-article-table tr.v85-row-spik td
        {
            background-color: var(--spik-bg, rgba(40, 167, 69, 0.10));
            font-weight: 600;
        }

        /* Garderingsrad (ingår i systemet, garderad avdelning) */
        article#v85-article .v85-article-table tr.v85-row-gard td
        {
            background-color: var(--gard-bg, rgba(0, 123, 255, 0.08));
        }

    /* Spelförslag-sektion */
    article#v85-article .v85-article-spel
    {
        margin-top: 2rem;
        padding-top: 1.25rem;
        border-top: 2px solid var(--border);
    }

        article#v85-article .v85-article-spel h3
        {
            font-size: 2.5rem;
            margin: 0 0 0.5rem;
            color: var(--text);
        }

        article#v85-article .v85-article-spel > p
        {
            font-size: 1.5rem;
            color: var(--text-muted);
            margin: 0 0 1rem;
        }

    /* 8-kolumnslayout */
    article#v85-article .v85-article-spel-cols
    {
        display: flex;
        gap: 2.5rem;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.25rem;
        flex-direction: column;
    }

    article#v85-article .v85-article-spel-col
    {
        flex: 0 0 auto;
        background: var(--bg-darkest);
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: 0.5rem 0.6rem;
    }

    article#v85-article .v85-article-spel-col--spik
    {
        border-color: var(--gold);
    }

    article#v85-article .v85-article-spel-col-hdr
    {
        font-size: 2rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted);
        margin-bottom: 0.4rem;
        white-space: nowrap;
    }

    article#v85-article .v85-article-spel-col--spik .v85-article-spel-col-hdr
    {
        color: var(--gold);
    }

    article#v85-article .v85-spik-badge
    {
        display: inline-block;
        background: var(--gold);
        color: #000;
        font-size: 1rem;
        font-weight: 700;
        border-radius: 3px;
        padding: 0 3px;
        vertical-align: middle;
        letter-spacing: 0.03em;
    }

    article#v85-article .v85-article-spel-list
    {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
    }

        article#v85-article .v85-article-spel-list li
        {
            font-size: 1.5rem;
            color: var(--text);
            line-height: 2;
            display: flex;
            align-items: baseline;
            gap: 20px;
        }

    article#v85-article .v85-spel-tf
    {
        display: block;
        font-size: 1.2rem;
        color: var(--text-muted);
    }

    article#v85-article .v85-article-spel-rader
    {
        font-size: 0.9rem;
        color: var(--text-muted);
        margin: 0.75rem 0 0;
    }

        article#v85-article .v85-article-spel-rader strong
        {
            color: var(--text);
        }


/* -- Site footer (legal/ansvarsfull speltext) -- */
.site-footer
{
    border-top: 1px solid var(--border-color);
    background: var(--bg-card);
    padding: 14px 24px;
    text-align: center;
}

.site-footer-legal
{
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-pale);
}

    .site-footer-legal a
    {
        color: var(--text-dim);
        text-decoration: underline;
    }

        .site-footer-legal a:hover
        {
            color: var(--text);
        }

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


/* -------------------------------------------------------
   Beräknad vinst – spel-sidebar
   ------------------------------------------------------- */
.vinst-table
{
    width: 100%;
    font-size: 0.82rem;
    border-collapse: collapse;
}

    .vinst-table td
    {
        padding: 1px 3px;
        white-space: nowrap;
    }

.vinst-td-n
{
    color: var(--text-muted, #999);
}

.vinst-td-rows,
.vinst-td-per,
.vinst-td-sum
{
    text-align: right;
}

.vinst-td-x,
.vinst-td-eq
{
    text-align: center;
    color: var(--text-muted, #999);
    padding-left: 4px;
    padding-right: 4px;
}

.vinst-summa-row td
{
    border-top: 1px solid var(--border-color, #444);
    padding-top: 3px;
    font-weight: 600;
}

.vinst-summa-row .vinst-td-n
{
    color: inherit;
}


#advanced-toggler
{
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--border-brighter);
    padding: 6px 10px;
    border-radius: 6px;
}

    #advanced-toggler .toggler-chevron
    {
        font-size: 0.65rem;
        color: var(--text-dim);
        transition: transform 0.2s;
    }

    #advanced-toggler:not(.is-collapsed)
    {
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    #advanced-toggler.is-collapsed .toggler-chevron
    {
        transform: rotate(-90deg);
    }

.right-sidebar-block
{
    padding: 0px 9px;
    border-left: 1px solid var(--border-brighter);
    border-right: 1px solid var(--border-brighter);
    border-bottom: 1px solid var(--border-brighter);
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.right-sidebar-block
{
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.25s ease;
    max-height: 1000px;
    opacity: 1;
}

    .right-sidebar-block.is-collapsed
    {
        max-height: 0;
        opacity: 0;
        pointer-events: none;
    }


#sort-extra-select
{
    background: var(--bg-input, var(--bg-card));
    border: 1px solid var(--border-dim);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.875rem;
    padding: 2px 6px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23888' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px;
}

    #sort-extra-select:focus
    {
        outline: none;
        border-color: var(--gold);
    }

    #sort-extra-select option
    {
        background: var(--bg-card);
        color: var(--text-primary);
    }


#spel-antal-spikar
{
    width: 100px;
    background: var(--bg-input, var(--bg-card));
    border: 1px solid var(--border-dim);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.875rem;
    padding: 2px 6px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23888' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px;
    text-align: center;
    text-align-last: center;
}

    #spel-antal-spikar:focus
    {
        outline: none;
        border-color: var(--gold);
    }

    #spel-antal-spikar option
    {
        background: var(--bg-card);
        color: var(--text-primary);
    }

.spel-cb
{
    cursor: pointer;
    opacity: 0.85;
}

    .spel-cb:hover
    {
        opacity: 1;
    }

.btn-generera
{
    width: 100%;
    padding: 6px 8px;
    color: var(--gold-light);
    border-color: var(--gold-dim);
    height: auto;
    font-size: 0.9rem;
    font-weight: bold;
    margin-bottom: 8px;
}

    .btn-generera:hover
    {
        color: var(--text-bright);
        border-color: var(--gold-light);
        background-color: var(--gold-dim);
    }

    .btn-generera:disabled
    {
        opacity: 0.35;
        cursor: not-allowed;
        color: var(--text-dim);
        border-color: var(--border-dim);
    }

#btn-strecka
{
    width: auto;
}

.strecka-label
{
    font-size: 0.9rem;
}

/* -------------------------------------------------------
   Dela kupong – modal och display
   ------------------------------------------------------- */
.settings-modal-box--dela
{
    width: 480px;
}

.dela-display
{
    background-color: rgb(255, 246, 207);
    border: 1px solid rgb(215, 209, 186);
    border-radius: 8px;
    padding: 16px;
    font-size: 0.8125rem;
    color: rgb(89, 89, 83);
    margin-bottom: 14px;
    max-height: 65vh;
    overflow-y: auto;
}

.dela-display-rubrik
{
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 12px;
    letter-spacing: 0.01em;
    color: rgb(89, 89, 83);
}

.dela-display-disclaimer
{
    font-weight: normal;
    font-style: italic;
}

.dela-header-cols
{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    gap: 12px;
}

.dela-header-left
{
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dela-speltyp
{
    font-size: 2.4375rem;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    color: rgb(89, 89, 83);
}

.dela-bana
{
    font-size: 0.8125rem;
    color: rgb(89, 89, 83);
}

.dela-start
{
    font-size: 0.8125rem;
    color: rgb(89, 89, 83);
}

.dela-header-right
{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    margin-top: 10px;
}

.dela-timestamp
{
    font-size: 0.8125rem;
    color: rgb(89, 89, 83);
}

.dela-rader
{
    font-size: 0.8125rem;
    color: rgb(89, 89, 83);
    margin-top: 15px;
}

.dela-kostnad
{
    font-size: 0.8125rem;
    font-weight: 700;
    color: rgb(89, 89, 83);
}

.dela-divider
{
    border: none;
    border-top: 1px solid rgb(215, 209, 186);
    margin: 12px 0;
}

.dela-horse-table
{
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

    .dela-horse-table th
    {
        font-weight: 600;
        text-align: left;
        padding: 4px 8px 6px 0;
        border-bottom: 1px solid rgb(215, 209, 186);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: rgb(89, 89, 83);
    }

    .dela-horse-table td
    {
        padding: 5px 8px 5px 0;
        color: rgb(89, 89, 83);
        border-bottom: 1px solid rgba(215, 209, 186, 0.6);
        vertical-align: middle;
    }

    .dela-horse-table tr:last-child td
    {
        border-bottom: none;
    }

    .dela-horse-table .dela-lopp-nr
    {
        font-weight: 700;
        width: 36px;
        color: rgb(89, 89, 83);
        font-size: 1.2rem;
    }

    .dela-horse-table > tbody
    {
        font-size: 0.95rem;
        text-transform: uppercase;
    }

.dela-actions
{
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}


#sort-select
{
    width: 100%;
    background: var(--bg-input, var(--bg-card));
    border: 1px solid var(--border-dim);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.875rem;
    padding: 2px 6px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23888' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px;
}

    #sort-select:focus
    {
        outline: none;
        border-color: var(--gold);
    }

    #sort-select option
    {
        background: var(--bg-card);
        color: var(--text-primary);
    }


/* --- Omgang-rad (knapp + bana-info) ------------------- */
#omgang-row
{
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Bana-info modal ---------------------------------- */
.bana-modal-box
{
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    width: 1100px;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.bana-modal-icon
{
    color: var(--gold);
}

.bana-info-table
{
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

    .bana-info-table tr
    {
        border-bottom: 1px solid var(--border-color);
    }

        .bana-info-table tr:last-child
        {
            border-bottom: none;
        }

    .bana-info-table td
    {
        padding: 9px 4px;
        vertical-align: top;
    }

        .bana-info-table td:first-child
        {
            color: var(--text-muted);
            font-size: 0.8125rem;
            white-space: nowrap;
            padding-right: 16px;
            width: 1%;
        }

        .bana-info-table td:last-child
        {
            color: var(--text-primary);
            font-weight: 500;
        }

.bana-modal-body
{
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

    .bana-modal-body::-webkit-scrollbar
    {
        width: 4px;
    }

    .bana-modal-body::-webkit-scrollbar-track
    {
        background: transparent;
    }

    .bana-modal-body::-webkit-scrollbar-thumb
    {
        background: var(--border-brighter);
        border-radius: 2px;
    }

.bana-info-section
{
    display: flex;
    flex-direction: row;
    gap: 18px;
    align-items: flex-start;
    width: 100%;
}

.omgang-info-lopp
{
    width: 100%;
    padding-top: 2px;
}

.info-lopplista
{
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.info-lopplista-item
{
    border-top: 1px solid var(--border-color);
}

    .info-lopplista-item:first-child
    {
        border-top: none;
    }

    .info-lopplista-item td
    {
        padding: 7px 6px;
        vertical-align: middle;
    }

.info-loppnr
{
    width: 28px;
    font-weight: 700;
    color: var(--gold);
    text-align: center;
    font-size: 0.9375rem;
}

.info-loppnamn
{
    color: var(--text-primary);
    font-weight: 500;
}

.info-lopptid
{
    color: var(--text-muted);
    font-size: 0.8125rem;
    white-space: nowrap;
    text-align: right;
}

.info-loppmetod
{
    width: 28px;
    text-align: center;
    color: var(--text-dim);
    font-size: 0.875rem;
}

.lopp-metod-ikon
{
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.info-loppdist
{
    color: var(--text-muted);
    font-size: 0.8125rem;
    white-space: nowrap;
    text-align: right;
    padding-right: 4px;
}


.bana-modal-left
{
    flex: 1;
    min-width: 0;
}

.bana-modal-right
{
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 60%;
}

#bana-modal-map
{
    width: 100%;
    height: 400px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    display: block;
}

.bana-modal-karta-wrap
{
    display: flex;
    justify-content: flex-end;
}

.bana-modal-karta-btn
{
    font-size: 0.8125rem;
    border-color: var(--border-brighter);
    color: var(--text-bright);
}


/* --- Bana-vaeder (väderprognos i bana-modal) ---------- */
#bana-vaeder-wrap
{
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

.bana-vaeder-rubrik, .omgang-lopp-rubrik
{
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

    .bana-vaeder-rubrik i, .omgang-lopp-rubrik i
    {
        color: var(--gold);
    }

.omgang-lopp-rubrik
{
    font-size: 1.1rem;
}

.bana-vaeder-laddas, .bana-vaeder-fel
{
    font-size: 0.8125rem;
    color: var(--text-dim);
    padding: 4px 0;
}

.bana-vaeder-slots
{
    display: flex;
    gap: 4px;
}

.bana-vaeder-slot
{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 7px 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-mid);
    min-width: 0;
    font-size: 0.75rem;
}

.bana-vaeder-slot--start
{
    border-color: var(--gold-dim);
    background: var(--gold-tint-1);
}

.bana-vaeder-tid
{
    font-size: 0.6875rem;
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
}

.bana-vaeder-slot--start .bana-vaeder-tid
{
    color: var(--gold-light);
}

.bana-vaeder-ikon
{
    font-size: 1rem;
    color: var(--text-dim);
    line-height: 1;
}

.bana-vaeder-temp
{
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-primary);
}

.bana-vaeder-vind
{
    font-size: 0.6875rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.bana-vaeder-neder
{
    font-size: 0.6875rem;
    color: #7ec8f5;
    white-space: nowrap;
}

/* Artikel */

article a
{
    color: var(--gold);
    text-decoration: none;
}

    article a:hover
    {
        color: var(--gold-light);
        text-decoration: underline;
    }

#omg-topbar, .omg-breadcrumb
{
    display: none;
}

/* === Huvud-layout === */
.omg-main
{
    padding: 2rem 1rem 3rem;
    max-width: 1100px;
}

/* === Artikelrubrik === */
.omg-article-header
{
    margin-bottom: 1.5rem;
}

    .omg-article-header h1
    {
        font-size: clamp(1.3rem, 3vw, 2rem);
        font-weight: 700;
        margin: 0 0 0.25rem;
        color: var(--text-primary);
    }

.omg-datum
{
    color: var(--gold);
}

.omg-omsattning
{
    color: var(--text-dim);
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
}

/* === Sektionsrubriker === */
.omg-main h2
{
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gold);
    margin: 2rem 0 1rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--border-color);
}

.omg-main h3
{
    font-size: 1rem;
    font-weight: 600;
    margin: 1.5rem 0 0.5rem;
    color: var(--text-primary);
}

/* === Tabeller === */
.omg-table-wrap
{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.omg-table
{
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

    .omg-table thead th
    {
        background: var(--bg-card2);
        color: var(--text-dim);
        font-weight: 600;
        text-align: left;
        padding: 0.5rem 0.6rem;
        border-bottom: 1px solid var(--border-color);
        white-space: nowrap;
    }

        .omg-table thead th:first-child
        {
            text-align: center;
        }


    .omg-table tbody tr
    {
        border-bottom: 1px solid var(--border-color);
        transition: background 0.1s;
    }

        .omg-table tbody tr:last-child
        {
            border-bottom: none;
        }

        .omg-table tbody tr:hover
        {
            background: var(--bg-card2);
        }

    .omg-table tbody td
    {
        padding: 0.45rem 0.6rem;
        vertical-align: middle;
    }

        .omg-table tbody td:first-child
        {
            text-align: center;
        }

.omg-col-kusk
{
    color: var(--text-dim);
    font-size: 0.82rem;
}

/* Rad-typer */
.omg-row-spik
{
    background: rgba(61, 86, 196, 0.06);
}

    .omg-row-spik td:first-child
    {
        border-left: 3px solid var(--locked-border);
        padding-left: 0.4rem;
    }

.omg-row-gard
{
    background: rgba(61, 86, 196, 0.06);
}

    .omg-row-gard td:first-child
    {
        border-left: 3px solid var(--locked-border);
        padding-left: 0.4rem;
    }

.omg-row-winner
{
    font-weight: 600;
}

.omg-scratched
{
    opacity: 0.4;
    text-decoration: line-through;
}

/* Taggar */
.omg-tag-gal, .omg-tag-disk
{
    font-size: 0.72rem;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-weight: 600;
}

.omg-tag-gal
{
    background: rgba(224, 92, 92, 0.2);
    color: var(--red);
}

.omg-tag-disk
{
    background: rgba(107, 116, 162, 0.2);
    color: var(--text-muted);
}

/* Vinnare-ikon */
.omg-winner-icon
{
    color: var(--gold);
    font-size: 0.8em;
}

/* === Utdelning === */
.omg-utdelning-table
{
    max-width: 520px;
}

/* === Spelförslag === */
.omg-spelforslag-info
{
    font-size: 0.9rem;
    color: var(--text-dim);
    margin-bottom: 1rem;
}

.omg-spel-cols
{
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.omg-spel-col
{
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    min-width: 140px;
    flex: 1 1 140px;
    padding: 0.6rem 0.8rem;
}

.omg-spel-col--spik
{
    border-color: var(--gold);
    background: rgba(201, 162, 39, 0.07);
}

.omg-spel-col-hdr
{
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.omg-spik-badge
{
    background: var(--gold);
    color: #000;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    letter-spacing: 0.03em;
}

.omg-spel-list
{
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
}

    .omg-spel-list li
    {
        padding: 0.2rem 0;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 0.3rem;
        flex-wrap: wrap;
    }

        .omg-spel-list li.omg-spel-winner
        {
            font-weight: 700;
            color: var(--gold-light);
        }

.omg-spel-tf
{
    color: var(--text-muted);
    font-size: 0.78rem;
}

/* === Avdelningar === */
.omg-avd
{
    margin-bottom: 2rem;
}

.omg-avd--spik .omg-table-wrap
{
    border-color: var(--gold);
}

.omg-loppinfo
{
    font-size: 0.83rem;
    color: var(--text-dim);
    margin: 0 0 0.6rem;
}

/* === Prev/next-navigering === */
.omg-prevnext
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 2.5rem 0 1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--border-color);
}

    .omg-prevnext a, .omg-prevnext span
    {
        font-size: 0.9rem;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
    }

.omg-nav-disabled
{
    color: var(--text-muted);
}

.omg-arkiv-link
{
    color: var(--text-dim);
}

    .omg-arkiv-link:hover
    {
        color: var(--text-primary);
    }

/* Vinnande hässnummer i kupong – grön cirkel */
.omg-kupong-winner-nr
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background-color: rgb(78, 187, 53);
    border: 3px solid rgb(78, 187, 53);
    border-radius: 50%;
    color: rgb(255, 255, 255);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
    line-height: 1;
}

/* Vinnande hästnummer utanför systemet – orange cirkel */
.omg-kupong-winner-out
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background-color: rgb(220, 120, 0);
    border: 3px solid rgb(220, 120, 0);
    border-radius: 50%;
    color: rgb(255, 255, 255);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
    line-height: 1;
}

/* === Vinstsektion under kupong === */
.omg-vinst-section
{
    margin-top: 12px;
    border-top: 1px solid rgb(215, 209, 186);
    padding-top: 10px;
}

.omg-vinst-rubrik
{
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgb(89, 89, 83);
    margin-bottom: 6px;
}

/* vinst-table och vinst-td-* portade från default.css */
.vinst-table
{
    width: 100%;
    font-size: 0.82rem;
    border-collapse: collapse;
}

    .vinst-table td
    {
        padding: 1px 3px;
        white-space: nowrap;
    }

.vinst-td-n
{
    color: var(--text-vinst);
}

.vinst-td-rows,
.vinst-td-per,
.vinst-td-sum
{
    text-align: right;
}

.vinst-td-x,
.vinst-td-eq
{
    text-align: center;
    color: rgb(150, 145, 130);
    padding-left: 4px;
    padding-right: 4px;
}

.vinst-summa-row td
{
    border-top: 1px solid rgb(215, 209, 186);
    padding-top: 3px;
    font-weight: 600;
}

.vinst-summa-row .vinst-td-n
{
    color: var(--text-vinst);
}


/* --- Lopp-modal (loppinfo popup) ------------------------------------ */
.lopp-modal-box
{
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    width: 950px;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.lopp-modal-icon
{
    color: var(--gold);
}

.lopp-info-table
{
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

    .lopp-info-table tr
    {
        border-bottom: 1px solid var(--border-color);
    }

        .lopp-info-table tr:last-child
        {
            border-bottom: none;
        }

    .lopp-info-table td
    {
        padding: 9px 4px;
        vertical-align: top;
    }

        .lopp-info-table td:first-child
        {
            color: var(--text-muted);
            font-size: 0.8125rem;
            white-space: nowrap;
            padding-right: 16px;
            width: 1%;
        }

        .lopp-info-table td:last-child
        {
            color: var(--text-primary);
            font-weight: 500;
        }

.lopp-modal-terms
{
    list-style: none;
    margin: 0;
    padding: 0;
    font-weight: 400;
    color: var(--text-primary);
    font-size: 0.875rem;
}

    .lopp-modal-terms li + li
    {
        margin-top: 4px;
    }



.sort-radio-section
{
    border-bottom: 1px solid var(--border-brighter);
    padding-bottom: 8px;
    margin-bottom: 4px;
}

    .sort-radio-section .form-check-input:disabled + .form-check-label
    {
        opacity: 0.5;
    }


.sort-radio-group .form-check
{
    padding-left: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sort-radio-group .form-check-input[type="radio"]
{
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    margin-top: 0;
    margin-left: 0;
    background-color: var(--bg-input-alt);
    border-color: var(--border-brighter);
    cursor: pointer;
}

    .sort-radio-group .form-check-input[type="radio"]:checked
    {
        background-color: var(--gold-dim);
        border-color: var(--gold);
    }

.sort-radio-group .form-check-label
{
    font-size: 0.8125rem;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
}

.sort-radio-group .form-check-input[type="radio"]:disabled
{
    cursor: default;
    opacity: 0.4;
}

    .sort-radio-group .form-check-input[type="radio"]:disabled + .form-check-label
    {
        cursor: default;
        color: var(--text-dim) !important;
        opacity: 1 !important;
    }

/*Knappar för navigering i historik*/

.historik-nav
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3px;
}

    .historik-nav .historik-nav-btn
    {
        width: 40px;
        height: 28px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        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;
    }

        .historik-nav .historik-nav-btn > i
        {
            font-size: 0.9rem;
        }

        .historik-nav .historik-nav-btn:hover
        {
            background: var(--bg-card);
            color: var(--text-primary);
            border-color: var(--text-dim);
        }

.omg-nav-wrap
{
    width: calc(100% - 42px);
    align-self: start;
}

    .omg-nav-wrap .btn-omg-nav
    {
        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;
    }

        .omg-nav-wrap .btn-omg-nav > i
        {
            font-size: 0.9rem;
        }

        .omg-nav-wrap .btn-omg-nav:hover
        {
            background: var(--bg-card);
            color: var(--text-primary);
            border-color: var(--text-dim);
        }

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

    #btn-nollstall-acc > i,
    #btn-backtest > i
    {
        font-size: 0.9rem;
    }

    #btn-nollstall-acc:hover,
    #btn-backtest:hover
    {
        background: var(--bg-card);
        color: var(--text-primary);
        border-color: var(--text-dim);
    }

.backtest-tr, .backtest-flex
{
    display: none !important;
}

body.backtest .backtest-tr
{
    display: table-row !important;
}

body.backtest .backtest-flex
{
    display: flex !important;
    align-items: center;
}

/* Override FontAwesome font-display: block → swap (förbättrar LCP) */
@font-face
{
    font-family: "Font Awesome 6 Solid";
    font-display: swap;
    src: url("/fontawesome-free-7.2.0-web/webfonts/fa-solid-900.woff2") format("woff2");
}

@font-face
{
    font-family: "Font Awesome 6 Free";
    font-display: swap;
    src: url("/fontawesome-free-7.2.0-web/webfonts/fa-regular-400.woff2") format("woff2");
}

@font-face
{
    font-family: "Font Awesome 6 Brands";
    font-display: swap;
    src: url("/fontawesome-free-7.2.0-web/webfonts/fa-brands-400.woff2") format("woff2");
}
/*Det här är sista raden*/