/* =====================================================
   tt-mobil.css  (10/10)
   Mobilläge för telefon: regler under body.mobil (båda lägena),
   body.mobil-portrait och body.mobil-landscape. Klasserna sätts av
   tt-mobil.js. iPad och dator påverkas inte.
   Laddas SIST så att reglerna vinner över övriga filer, se kommentaren
   i början av Default.aspx.
   ===================================================== */

/* =====================================================
   GEMENSAMT (portrait och landscape)
   Sidan scrollar som helhet (ingen inre scrollruta), så att Safari kan
   fälla ihop adressfältet och sticky-element fastnar mot skärmen.
   ===================================================== */

/* Ingen fast minsta höjd – sidan blir lika hög som innehållet */
body.mobil #app-body
{
    min-height: 0;
}

/* overflow: clip i stället för hidden – klipper likadant men blir ingen
   scrollruta, så att sticky-element inuti fastnar mot skärmen */
body.mobil #main-content
{
    overflow: clip;
}

/* Loppen växer med innehållet i stället för att scrolla internt */
body.mobil #races-container
{
    flex: none;
    overflow: visible;
}

/* Laddningsindikatorn: #races-container är tömd under laddning, så
   indikatorn visas överst utan förskjutningen från datorlayouten */
body.mobil .main-loading
{
    top: 0;
    height: auto;
    padding: 48px 16px;
}

/* Sidopanelerna: samma höjd som på dator, men efter synlig yta
   (dvh följer Safaris adressfält, vh är reserv för äldre webbläsare) */
body.mobil #right-panels-wrap
{
    height: calc(100vh - var(--top-bar-height));
    height: calc(100dvh - var(--top-bar-height));
}

/* Loppväljaren finns bara i portrait */
#lopp-valjare
{
    display: none;
}

/* =====================================================
   PORTRAIT
   #main-content till vänster (--mobil-split) med loppväljare och ett
   lopp i taget, sidopanelerna till höger med exakt en panel öppen.
   ===================================================== */

body.mobil-portrait
{
    --mobil-split: 50%;
}

body.mobil-portrait #main-content
{
    flex: 0 0 var(--mobil-split);
    width: var(--mobil-split);
    min-width: 0;
}

body.mobil-portrait #races-container
{
    padding: 6px 4px 24px;
}

/* --- Loppväljare ------------------------------------ */

body.mobil-portrait #lopp-valjare
{
    display: flex;
    gap: 2px;
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 6px 4px;
    background: var(--bg-darkest);
    border-bottom: 1px solid var(--border-color);
}

.lopp-valj-btn
{
    flex: 1 1 0;
    min-width: 0;
    height: 30px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-dim);
    font-size: 0.8125rem;
    font-weight: 800;
    cursor: pointer;
}

.lopp-valj-btn.is-avgjord
{
    background: var(--nr-klar-bg);
    color: var(--nr-klar-color);
}

.lopp-valj-btn.is-active
{
    background: var(--gold-tint-5);
    border-color: var(--gold);
    color: var(--gold-light);
}

[data-theme="light"] .lopp-valj-btn.is-active
{
    color: var(--text-primary);
}

/* --- Ett lopp i taget ------------------------------- */

body.mobil-portrait .lopp-grid
{
    display: block;
    overflow: visible;
    padding-bottom: 0;
}

body.mobil-portrait .lopp-col
{
    min-width: 0;
}

/* Dölj alla lopp utom valt (data-valt-lopp sätts av tt-mobil.js). Valt lopp
   behåller sin vanliga display, så att trådvyn (display: flex) fungerar. */
body.mobil-portrait #main-content[data-valt-lopp="1"] .lopp-col:not([data-nr="1"]),
body.mobil-portrait #main-content[data-valt-lopp="2"] .lopp-col:not([data-nr="2"]),
body.mobil-portrait #main-content[data-valt-lopp="3"] .lopp-col:not([data-nr="3"]),
body.mobil-portrait #main-content[data-valt-lopp="4"] .lopp-col:not([data-nr="4"]),
body.mobil-portrait #main-content[data-valt-lopp="5"] .lopp-col:not([data-nr="5"]),
body.mobil-portrait #main-content[data-valt-lopp="6"] .lopp-col:not([data-nr="6"]),
body.mobil-portrait #main-content[data-valt-lopp="7"] .lopp-col:not([data-nr="7"]),
body.mobil-portrait #main-content[data-valt-lopp="8"] .lopp-col:not([data-nr="8"])
{
    display: none;
}

/* Svep mellan lopp: det nya loppet glider in från det håll man svepte
   (data-svep sätts av tt-mobil.js och tas bort när animationen är klar) */
@keyframes mobil-svep-nasta
{
    from { transform: translateX(40%); opacity: 0.3; }
    to   { transform: none; opacity: 1; }
}

@keyframes mobil-svep-foreg
{
    from { transform: translateX(-40%); opacity: 0.3; }
    to   { transform: none; opacity: 1; }
}

body.mobil-portrait #main-content[data-svep="nasta"] .lopp-col
{
    animation: mobil-svep-nasta 0.2s ease-out;
}

body.mobil-portrait #main-content[data-svep="foreg"] .lopp-col
{
    animation: mobil-svep-foreg 0.2s ease-out;
}

@media (prefers-reduced-motion: reduce)
{
    body.mobil-portrait #main-content[data-svep] .lopp-col
    {
        animation: none;
    }
}

/* Trådvyn: kolumnen tar hela bredden */
body.mobil-portrait .lopp-grid.trad-vy-mode .lopp-col
{
    min-width: 0;
}

/* --- Sidopaneler: exakt en öppen ------------------- */

body.mobil-portrait #right-panels-wrap
{
    flex: 1 1 0;
    min-width: 0;
    height: 100vh;
    height: 100dvh;
}

body.mobil-portrait #panel-toggle-row
{
    position: static;
}

body.mobil-portrait .panel-toggle-btn
{
    padding: 9px 0;
}

body.mobil-portrait #panel-toggle-row.analys-is-active #btn-toggle-spel.is-active
{
    margin-right: 0;
}

body.mobil-portrait #right-panels-body
{
    margin-top: 0;
    border-top: none;
    min-height: 0;
}

body.mobil-portrait #spel-sidebar,
body.mobil-portrait #analys-sidebar
{
    flex: 1 1 auto;
    width: 100%;
    border-left: none;
    transition: none;
}

body.mobil-portrait #spel-sidebar.is-collapsed,
body.mobil-portrait #analys-sidebar.is-collapsed
{
    display: none;
}

body.mobil-portrait #spel-sidebar-inner,
body.mobil-portrait #analys-sidebar-inner
{
    padding: 10px 8px 40px;
}

/* --- Spelpanelen kompakt (byggd för 300 px) --------- */

body.mobil-portrait #spel-sidebar .analys-sidebar-heading
{
    flex-wrap: wrap;
    row-gap: 6px;
}

/* Lås-knappen: bara ikon */
body.mobil-portrait .las-lasupp-text
{
    display: none;
}

/* Kupongväljaren på egen rad, knapparna under */
body.mobil-portrait .kupong-bar
{
    flex-wrap: wrap;
}

body.mobil-portrait .kupong-select
{
    flex: 1 1 100%;
}

body.mobil-portrait .kupong-bar-knappar
{
    display: flex;
    flex: 1 1 100%;
    justify-content: space-between;
}

/* ms-auto på Dela/Radera behövs inte när raden fördelas med space-between */
body.mobil-portrait .kupong-bar-knappar > .btn
{
    margin-left: 0 !important;
}

/* Lås-knappen har fast bredd 128px på dator */
body.mobil-portrait #btn-las-alla-lopp
{
    width: auto;
}

/* Max insats / Antal spikar / Max hästar: smalare fält, tätare etikett.
   Får etiketten inte plats hamnar fältet på raden under (högerställt). */
body.mobil-portrait .spel-maxbelopp-row
{
    flex-wrap: wrap;
    row-gap: 4px;
}

body.mobil-portrait .spel-maxbelopp-row .analys-sidebar-label
{
    letter-spacing: 0.5px;
    margin-bottom: 0;
}

body.mobil-portrait .spel-maxbelopp-row > input,
body.mobil-portrait .spel-maxbelopp-row > select
{
    margin-left: auto;
}

/* Rubriken Spelprioritet: mindre spärrning */
body.mobil-portrait .label-headline
{
    letter-spacing: 1.5px;
}

/* Nästa streck + Strecka-knappen: knappen hamnar under om den inte får plats */
body.mobil-portrait .spel-sektion .analys-sidebar-section > .d-flex
{
    flex-wrap: wrap;
    gap: 4px;
}

body.mobil-portrait #spel-max-belopp,
body.mobil-portrait #risk-bredd,
body.mobil-portrait #spel-antal-spikar
{
    width: 76px;
    flex-shrink: 0;
    font-size: 0.75rem;
}

body.mobil-portrait #spel-antal-spikar
{
    padding-right: 14px;
    background-position: right 3px center;
}

/* Sliderrader: etikett och värde på första raden, slidern i full bredd under */
body.mobil-portrait .guide-row
{
    grid-template-columns: 1fr auto;
    column-gap: 6px;
    row-gap: 0;
    margin-bottom: 8px;
}

body.mobil-portrait .guide-row label
{
    grid-column: 1;
    grid-row: 1;
    font-size: 0.875rem;
}

body.mobil-portrait .guide-row .guide-val
{
    grid-column: 2;
    grid-row: 1;
    font-size: 0.875rem;
}

body.mobil-portrait .guide-row .guide-slider
{
    grid-column: 1 / -1;
    grid-row: 2;
}

body.mobil-portrait .spikmetod-label,
body.mobil-portrait .spikmetod-select
{
    width: 100%;
}

body.mobil-portrait .spel-gard-row-actions
{
    flex-wrap: nowrap;
    gap: 4px;
}

body.mobil-portrait .spel-gard-row-actions > button
{
    flex: 1 1 0;
    min-width: 0;
    padding: 4px 2px;
    font-size: 0.6875rem;
    white-space: nowrap;
}

body.mobil-portrait #btn-generera
{
    width: 100%;
}

body.mobil-portrait .prognos-table
{
    width: 100%;
    font-size: 0.6875rem;
}

/* =====================================================
   LANDSCAPE
   Alla lopp i bredd, bara första raden per häst (streck, nr, namn).
   Sidopanelerna döljs.
   Zoomar man in över ett tröskelvärde sätter tt-mobil.js klassen
   mobil-zoom: då gäller inte de kompakta reglerna (:not(.mobil-zoom))
   och loppen visas som på dator, med full bredd och all data.
   Paneler, safe-area och avstängd trådvy gäller i båda fallen. tt-mobil.js sätter viewport-fit=cover i det här
   läget, så sidan fyller ut runt notchen – safe-area-paddingen nedan
   håller innehållet fritt från notch och hemindikator.
   ===================================================== */

body.mobil-landscape #right-panels-wrap
{
    display: none;
}

/* min-width: 0 – annars blir #main-content minst lika bred som alla
   kolumners innehåll (långa hästnamn) och loppen krymper inte */
body.mobil-landscape #main-content
{
    min-width: 0;
}

body.mobil-landscape #app-top
{
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

body.mobil-landscape #races-container
{
    padding: 6px max(4px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
}

/* --- Lopp-grid: alla kolumner i bredd ---------------- */

body.mobil-landscape:not(.mobil-zoom) .lopp-grid
{
    gap: 3px;
    overflow: visible;
    padding-bottom: 0;
}

/* overflow: clip (inte hidden) så att den sticky rubriken fungerar */
body.mobil-landscape:not(.mobil-zoom) .lopp-col
{
    flex: 1 1 0;
    min-width: 0;
    overflow: clip;
    border-radius: 6px;
}

/* --- Rubrik: bara lås, antal streck och loppnummer, sticky ---- */

/* Grid med tre kolumner: lås/antal till vänster, loppnumret i mitten,
   tom kolumn till höger som balanserar så att numret hamnar mitt i */
body.mobil-landscape:not(.mobil-zoom) .lopp-col-header
{
    position: sticky;
    top: 0;
    z-index: 5;
    height: auto;
    padding: 3px 4px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap: 0;
    align-items: center;
}

body.mobil-landscape:not(.mobil-zoom) .lopp-lock-wrap
{
    grid-column: 1;
    justify-self: start;
}

body.mobil-landscape:not(.mobil-zoom) .lopp-col-time,
body.mobil-landscape:not(.mobil-zoom) .lopp-utveckling-wrap,
body.mobil-landscape:not(.mobil-zoom) .lopp-col-distans,
body.mobil-landscape:not(.mobil-zoom) .lopp-race-status-badge,
body.mobil-landscape:not(.mobil-zoom) .lopp-col-startmetod,
body.mobil-landscape:not(.mobil-zoom) .lopp-resultat-btn,
body.mobil-landscape:not(.mobil-zoom) .lopp-play-btn
{
    display: none;
}

/* Tätt mellan lås-ikon och antal, så att vänsterkolumnen inte blir bredare
   än den högra (då hamnar loppnumret inte mitt i) */
body.mobil-landscape:not(.mobil-zoom) .lopp-lock-wrap
{
    gap: 2px !important;
}

body.mobil-landscape:not(.mobil-zoom) .lopp-lock-icon
{
    font-size: 14px;
    margin-top: 0;
}

body.mobil-landscape:not(.mobil-zoom) .lopp-col-checked-count
{
    font-size: 100%;
    margin-top: 0;
}

body.mobil-landscape:not(.mobil-zoom) .lopp-nr-wrap
{
    grid-column: 2;
    width: auto;
    margin-left: 0;
}

body.mobil-landscape:not(.mobil-zoom) .lopp-col-nr
{
    width: 22px;
    height: 22px;
    font-size: 0.75rem;
}

/* --- Hästrader: bara första raden ------------------- */

body.mobil-landscape:not(.mobil-zoom) .hast-row
{
    padding: 3px 3px;
}

/* Allt utom första raden (kryssruta, nr, namn): kusk, statistik, prognos, index */
body.mobil-landscape:not(.mobil-zoom) .hast-row > :not(:first-child),
body.mobil-landscape:not(.mobil-zoom) .hast-tillagg
{
    display: none;
}

/* Lås-ikon till vänster och numret i mitten på första raden, namnet
   centrerat på egen rad under. Grid med tre kolumner där den tomma högra
   kolumnen balanserar så att numret hamnar mitt i. */
body.mobil-landscape:not(.mobil-zoom) .hast-row > :first-child
{
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    gap: 1px 2px !important;
    align-items: center;
    min-width: 0;
}

body.mobil-landscape:not(.mobil-zoom) .hast-row .hast-lock-icon
{
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
}

body.mobil-landscape:not(.mobil-zoom) .hast-row .hast-nr
{
    grid-column: 2;
    grid-row: 1;
}

body.mobil-landscape:not(.mobil-zoom) .hast-row .hast-namn
{
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
    min-width: 0;
}

/* Namnet tar bara sin egen bredd (centreras), men kortas med ellips vid behov */
body.mobil-landscape:not(.mobil-zoom) .hast-row .hast-namn-text
{
    flex: 0 1 auto;
}

body.mobil-landscape:not(.mobil-zoom) .hast-lock-icon
{
    font-size: 14px;
}

body.mobil-landscape:not(.mobil-zoom) .hast-nr
{
    width: 22px;
    height: 18px;
    padding-bottom: 1px;
    margin-top: 0;
    flex-shrink: 0;
    font-size: 0.6875rem;
}

body.mobil-landscape:not(.mobil-zoom) .hast-namn
{
    font-size: 0.75rem;
    gap: 2px;
}

body.mobil-landscape:not(.mobil-zoom) .hast-plac
{
    min-width: 0;
}

/* --- Trådvy: inte i landscape ------------------------
   Trådvyn kan vara påslagen från portrait eller dator. Här visas i stället
   vanliga hästrader; vid vridning tillbaka syns trådvyn igen. Görs i CSS
   så att renderRaces (som återaktiverar trådvyn) inte behöver ändras. */

body.mobil-landscape .trad-view
{
    display: none;
}

body.mobil-landscape:not(.mobil-zoom) .lopp-grid.trad-vy-mode
{
    height: auto;
    align-items: flex-start;
    overflow: visible;
    gap: 3px;
}

body.mobil-landscape:not(.mobil-zoom) .lopp-grid.trad-vy-mode .lopp-col
{
    display: block;
    min-width: 0;
    overflow: clip;
}

body.mobil-landscape .lopp-grid.trad-vy-mode .hast-row
{
    display: flex !important;
}

/* =====================================================
   MODAL: MÅLFOTO (#resultat-modal, tt-resultat.js)
   ===================================================== */

/* Portrait: bara vald distans och Repris */
body.mobil-portrait #resultat-modal .upplopps-zoom-btn:not(.upplopps-zoom-active)
{
    display: none;
}

/* Repris nära distansknappen: 1rem (som gap-3) inklusive radens gap på 10px */
body.mobil-portrait #resultat-modal .upplopps-repris-btn
{
    margin-left: calc(1rem - 10px);
}

/* Landscape: varje häst får sin höjd och banorna scrollar i stället för
   att tryckas ihop till modalens höjd. Distansknapparna ligger kvar
   överst (sticky) när man scrollar. */
/* Dialogen: 100% i stället för Bootstraps 100vw, som på iOS kan bli
   bredare än den synliga ytan */
body.mobil-landscape #resultat-modal .modal-dialog
{
    width: 100%;
    max-width: 100%;
}

/* Extra marginal till höger (skärmens rundade hörn) och ingen negativ
   marginal på stängknappen */
body.mobil-landscape #resultat-modal .modal-header
{
    padding: 6px calc(env(safe-area-inset-right) + 20px) 6px max(12px, env(safe-area-inset-left));
}

body.mobil-landscape #resultat-modal .btn-close
{
    margin: 0;
    flex-shrink: 0;
}

body.mobil-landscape #resultat-modal .modal-title
{
    font-size: 1.1rem;
}

body.mobil-landscape .resultat-modal-body
{
    overflow-y: auto;
    padding: 0 max(12px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(12px, env(safe-area-inset-left));
}

body.mobil-landscape .upplopps-zoom-wrap
{
    position: sticky;
    top: 0;
    z-index: 3;
    margin-bottom: 0;
    padding: 6px 0;
    background: var(--bg-darkest);
}

body.mobil-landscape #upplopps-banor
{
    flex: none;
    overflow: visible;
}

body.mobil-landscape .upplopps-bana
{
    flex: none;
    height: 52px;
}

/* Ikonstorleken är satt i vh, som blir mycket litet i landscape */
body.mobil-landscape .upplopps-ikon
{
    font-size: 1.75rem;
}

/* Vinstmarginalen: drygt en halv rad högre, så att nedre raden inte hamnar
   ned i första banan (grundläget är translateY(5px)) */
body.mobil-landscape .upplopps-vinstmarginal
{
    transform: translateX(50%) translateY(-5px);
}