/* =========================================================
   0) Reset + overflow-skydd (minskar “random” scrollbars)
   ========================================================= */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow: hidden; /* <-- viktig: stoppar body-scroll */
}

body {
    margin: 0;
    background: #f2f2f2; /* grått runt "telefonen" */
}

#app {
    min-height: 100%;
}

.main-no-padding {
    padding: 0 !important;
}

/* Ta bort MudBlazors default padding runt main content */
.mud-main-content {
    padding: 0 !important;
}

/* Slå av uppercase där du vill */
.no-uppercase {
    text-transform: none !important;
}


/* =========================================================
   1) Telefon-skal (låser maxbredd + maxhöjd)
   ========================================================= */
.phone-shell {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    /* fallback först, dvh override sen (annars vinner vh alltid) */
    height: min(100vh, 930px);
    height: min(100dvh, 930px);
    background: #EEF3FF;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
}

.phone-content {
    flex: 1;
    min-width: 0;
    overflow-y: auto; /* enda scrollen */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* OBS: Använd INTE page-with-bottom-nav när nav ligger inne i phone-shell.
   Om du ändå råkar ha kvar klassen på någon wrapper så gör vi den neutral: */
.page-with-bottom-nav {
    padding-bottom: 0 !important;
}


/* =========================================================
   2) CalcButton (miniräknar-knapp)
   ========================================================= */
.calc-btn {
    border-radius: 14px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .10);
    text-transform: none;
    padding: 0;
    transition: transform 80ms ease, box-shadow 80ms ease, filter 80ms ease;
}

    .calc-btn:hover {
        transform: translateY(-1px);
    }

    .calc-btn:active {
        transform: translateY(1px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
    }

.calc-btn__label {
    display: inline-flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.5px;
}

.calc-btn.is-selected {
    transform: translateY(1px);
    box-shadow: inset 0 4px 10px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .10);
    filter: brightness(0.96);
}

    .calc-btn.is-selected:hover {
        transform: translateY(1px);
    }


/* =========================================================
   3) TeamComponent grid (spelarknappar)
   ========================================================= */
.team-grid {
    display: grid;
    gap: var(--gap, 10px);
    align-content: start;
    /* fallbacks så grid inte blir trasigt om vars saknas */
    grid-template-columns: repeat(var(--cols, 4), var(--btn-size, 72px));
    justify-content: center;
    /* skydd mot att grid råkar göra overflow */
    max-width: 100%;
}

/* <= 380px */
@media (max-width: 380px) {
    .team-grid {
        grid-template-columns: repeat(3, var(--btn-size, 72px));
    }
}

/* <= 320px */
@media (max-width: 320px) {
    .team-grid {
        grid-template-columns: repeat(2, var(--btn-size, 72px));
    }
}


/* =========================================================
   4) ActionButtonsComponent grid (actions)
   ========================================================= */
.action-grid {
    display: grid;
    gap: var(--gap, 8px);
    max-width: 100%;
}

    /* auto: så många knappar per rad som får plats */
    .action-grid[style*="--mode:auto;"] {
        grid-template-columns: repeat(auto-fit, minmax(var(--minw, 140px), 1fr));
    }

    /* fixed: exakt X kolumner */
    .action-grid[style*="--mode:fixed;"] {
        grid-template-columns: repeat(var(--cols, 2), 1fr);
    }


/* =========================================================
   5) TeamInfoComponent (header + stats)
   ========================================================= */
.teaminfo {
    border-radius: 6px;
    overflow: hidden;
}

.teaminfo__header {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* <-- 3 kolumner */
    align-items: center;
    background: #1976d2;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
}

.teaminfo__period {
    padding: 6px 8px;
    text-align: center;
    font-weight: 800;
    opacity: .95;
    white-space: nowrap;
}

.teaminfo__team {
    padding: 6px 10px;
    text-align: center;
}

.teaminfo__body {
    background: #d9d9d9;
    padding: 6px 10px 8px;
}

.teaminfo__clock {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
}

.teaminfo__grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    row-gap: 2px;
    column-gap: 12px;
    align-items: center;
    font-size: 12px;
}

.teaminfo__label,
.teaminfo__val {
    text-align: center;
    font-weight: 600;
}


/* =========================================================
   6) PlayerInfoComponent (ingen ram, kompakt)
   ========================================================= */
.playerinfo {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.playerinfo__row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.playerinfo__num {
    font-weight: 800;
    font-size: 20px;
    line-height: 1;
    min-width: 28px;
    text-align: left;
}

.playerinfo__stats {
    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
}

.playerinfo-empty {
    opacity: .75;
}


/* =========================================================
   Top navigation (header + tabs) - PILL STYLING
   ========================================================= */
.top-nav {
    position: sticky; /* ligger kvar när du scrollar */
    top: 0;
    z-index: 50;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,.12);
}

.top-nav__bar {
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    height: 56px;
    padding: 0 6px;
}

.top-nav__title {
    text-align: center;
    font-weight: 800;
    font-size: 16px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-nav__tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 8px 10px;
    /* nicer scrolling on mobile */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

    .top-nav__tabs::-webkit-scrollbar {
        display: none;
    }

.top-nav__tab {
    border-radius: 999px; /* pill */
    padding: 8px 14px;
    min-height: 36px;
    opacity: 0.85;
    white-space: nowrap;
    transition: transform .12s ease, opacity .12s ease, background-color .12s ease;
}

    .top-nav__tab:hover {
        opacity: 1;
        transform: translateY(-1px);
        background: rgba(255,255,255,0.06); /* neutral hover (dark friendly) */
    }

    .top-nav__tab.is-active {
        opacity: 1;
        font-weight: 700;
        /* pill background */
        background: rgba(255,255,255,0.12);
        border: 1px solid rgba(255,255,255,0.18);
    }

/* Optional: make active stand out more on light themes too */
@media (prefers-color-scheme: light) {
    .top-nav__tab:hover {
        background: rgba(0,0,0,0.06);
    }

    .top-nav__tab.is-active {
        background: rgba(0,0,0,0.08);
        border: 1px solid rgba(0,0,0,0.10);
    }
}


/* =========================================================
   7) Bottom navigation (egen bottenmeny, ligger INNE i shell)
   - Aktiv markering: LINJE
   ========================================================= */
.bottom-nav {
    position: static;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.12);
    /* Gör plats för iPhone home-indicator */
    padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
    /* valfritt: lite mer höjd så det känns bra */
    min-height: calc(64px + env(safe-area-inset-bottom));
}

.bottom-nav__item {
    width: 100%;
    height: 64px;
    padding: 0;
    text-transform: none;
    position: relative;
    color: rgba(0,0,0,.65);
}

.bottom-nav__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.bottom-nav__label {
    font-size: 12px;
    font-weight: 600;
    opacity: .9;
}

.bottom-nav__item .mud-icon-root {
    font-size: 22px;
}

.bottom-nav__item:active {
    transform: translateY(1px);
}

/* Aktiv flik */
.bottom-nav__item.is-active {
    color: var(--mud-palette-primary) !important;
    background: rgba(0,0,0,.03);
}

    /* Aktiv indikator = liten LINJE högst upp */
    .bottom-nav__item.is-active::before {
        content: "";
        position: absolute;
        top: 0;
        left: 18%;
        right: 18%;
        height: 3px;
        border-radius: 0 0 8px 8px;
        background: var(--mud-palette-primary);
    }


/* =========================================================
   8) Num picker
   ========================================================= */
.num-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}