html, body {
    font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

/* Färger hämtas alltid från temat (var(--mud-palette-...)), se Theme/RangelyTheme.cs. */

/* --- Bottenmeny (telefon) ------------------------------------------------------------- */

.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    display: flex;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 64px;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    font-size: 0.75rem;
    -webkit-tap-highlight-color: transparent;
}

    .bottom-nav-item.active {
        color: var(--mud-palette-primary);
        font-weight: 600;
    }

@media (max-width: 959.98px) {
    .main-content {
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
    }
}

/* --- Översikten ------------------------------------------------------------------------ */

.big-button {
    min-height: 56px;
    font-size: 1.05rem;
}

.current-card {
    border-left: 6px solid var(--mud-palette-primary);
}

.session-row {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

    .session-row:last-child {
        border-bottom: none;
    }

    .session-row.cancelled .session-title,
    .session-row.cancelled .session-date {
        text-decoration: line-through;
        opacity: 0.6;
    }

.session-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 48px;
    padding: 4px 0;
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-background-gray);
    line-height: 1.1;
}

    .session-date .day {
        font-size: 1.35rem;
        font-weight: 700;
        color: var(--mud-palette-primary);
    }

    .session-date .month {
        font-size: 0.75rem;
        text-transform: uppercase;
        color: var(--mud-palette-text-secondary);
    }

.session-row.clickable {
    cursor: pointer;
}

    .session-row.clickable:active {
        background: var(--mud-palette-action-default-hover);
    }

/* --- Skjutledarens vy ------------------------------------------------------------------ */

.group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 6px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Status per serie, station eller runda för en skytt under en registrator: en liten ikon med numret efter. */
.progress-cells {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
}

.progress-cell {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* Kontrollrutnätet: en tryckbar cell per station. Färgen följer läget (synkad, väntar, saknas), alltid via temats färger. */
.control-cells {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 6px;
}

.control-cell {
    min-height: 44px;
    padding: 2px 4px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.875rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.control-cell .control-station {
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
}

.control-synced { border-color: var(--mud-palette-success); }
.control-waiting { border-color: var(--mud-palette-warning); background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent); }
.control-missing { border-color: var(--mud-palette-error); background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent); }
.control-notstarted { opacity: 0.4; cursor: default; }
.control-corrected { border-style: dashed; }

/* Ingen känd status: bocken är grå i stället för grön. */
.progress-unknown {
    opacity: 0.35;
}

/* Sektionen med de som väntar på godkännande: orange text så att den syns överst bland de närvarande. */
.group-header-warning {
    color: var(--mud-palette-warning-darken, var(--mud-palette-warning));
    padding-top: 6px;
    padding-bottom: 6px;
}

.group-count {
    padding: 0 8px;
    border-radius: 10px;
    background: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
}

.attendee-row {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 12px 10px 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

    .attendee-row.pending {
        background: var(--mud-palette-warning-hover);
    }

    .attendee-row.clickable {
        cursor: pointer;
    }

        .attendee-row.clickable:active {
            background: var(--mud-palette-action-default-hover);
        }

.attendee-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-weight: 600;
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
}

.lane-row {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 8px 4px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

    .lane-row.clickable {
        cursor: pointer;
    }

    .lane-row.selected {
        background: var(--mud-palette-primary-hover);
    }

    .lane-row.group-start {
        border-top: 3px solid var(--mud-palette-lines-default);
    }

.lane-number {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mud-default-borderradius);
    font-weight: 700;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-primary);
}

/* Registratorernas färger, hämtade från temat. */
.registrar-0 { border-color: var(--mud-palette-primary) !important; color: var(--mud-palette-primary) !important; }
.registrar-1 { border-color: var(--mud-palette-success) !important; color: var(--mud-palette-success) !important; }
.registrar-2 { border-color: var(--mud-palette-tertiary) !important; color: var(--mud-palette-tertiary) !important; }
.registrar-3 { border-color: var(--mud-palette-secondary) !important; color: var(--mud-palette-secondary) !important; }

.registrar-list {
    max-height: 40vh;
    overflow-y: auto;
}

.registrar-option {
    padding: 0 8px;
}

.candidate-button {
    min-height: 52px;
    justify-content: flex-start;
}

.section-switch {
    display: flex;
    gap: 6px;
}

.section-switch {
    overflow-x: auto;
    padding-bottom: 2px;
}

.section-button {
    flex: 1 0 auto;
    min-height: 44px;
    min-width: 0;
    padding: 0 6px;
    font-size: 0.72rem;
    letter-spacing: 0;
    white-space: nowrap;
}

.tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--mud-palette-white);
}

/* Nedräkning som ett piller på Starta-knappen: röd text och ram utan fyllning. Har egna färger, så det dämpas inte när knappen är avstängd. */
.button-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 24px;
    margin-left: 10px;
    padding: 1px 10px 0;
    color: var(--mud-palette-error);
    border: 1px solid var(--mud-palette-error);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Kommandohjälpen för fältskjutning: stora tecken som syns på håll och en stor knapp som går att pricka med en hand. */
.field-display {
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.field-time {
    font-variant-numeric: tabular-nums;
}

/* Stapeln är delad i en del per kommando; det som gått tonas ned från vänster med ett halvgenomskinligt lager i ytans färg. */
.field-bar {
    position: relative;
    display: flex;
    width: 100%;
    height: 28px;
    overflow: hidden;
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-lines-default);
}

.field-bar-segment + .field-bar-segment {
    border-left: 3px solid var(--mud-palette-surface);
}

.field-bar-elapsed {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: var(--mud-palette-surface);
    opacity: 0.8;
}

/* Kommandot poppar in när det byts (elementet ritas om med nytt @key). */
.field-flash {
    animation: field-flash 0.5s ease-out;
}

@keyframes field-flash {
    from {
        transform: scale(1.3);
        opacity: 0.2;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .field-flash {
        animation: none;
    }
}

.field-button {
    min-height: 96px;
    font-size: 1.5rem;
}

/* Poänginmatning: rader med stora knappar (en per värde), att trycka med en hand utomhus. */
.entry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(3.25rem, 1fr));
    gap: 8px;
}

.entry-six {
    grid-template-columns: repeat(6, 1fr);
}

.entry-three {
    grid-template-columns: repeat(3, 1fr);
}

.entry-four {
    grid-template-columns: repeat(4, 1fr);
}
/* Rubriker över inmatningsraderna: fetstilta så att de syns. */
.entry-heading {
    font-weight: 700 !important;
}

/* Poängen under knappsatsen: en rund markör per skott och summan efter. Temats tredje färg, så att de inte liknar knapparna. */
.entry-sum {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.25rem;
}

/* På mycket smala skärmar bryts raden till två rader när alla sex markörerna visas; reservera båda så att inget hoppar. */
@media (max-width: 340px) {
    .entry-sum {
        min-height: 4.5rem;
        align-content: flex-start;
    }
}

.entry-term {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    box-sizing: border-box;
    border: 2px solid var(--mud-palette-lines-inputs);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    /* Siffror sitter högt i radhöjden (ingen nedåtstreck): skjut ner dem lite så att de ser centrerade ut. */
    padding-top: 0.15em;
}

.entry-term-filled {
    border-color: var(--mud-palette-tertiary);
    background: var(--mud-palette-tertiary);
    color: var(--mud-palette-tertiary-text);
}

.entry-term-next {
    border-color: var(--mud-palette-tertiary);
    border-style: dashed;
}

.entry-sum-equals {
    margin-left: 0.25rem;
    color: var(--mud-palette-text-secondary);
    font-size: 1.25rem;
}

.entry-sum-total {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--mud-palette-text-primary);
}

/* Litet "p" efter summan (20p). */
.entry-sum-unit {
    margin-left: 0.1rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.entry-sum-dim {
    opacity: 0.4;
}

/* "Inga" i stället för målknapparna vid 0 träffar; samma höjd som knapparna så att inget hoppar. */
.entry-none {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
}

/* Fyller dialogens höjd. I helskärm (telefon) tar mellanrummet all överbliven höjd, så att meddelandena och Avbryt/Spara hamnar längst
   ner på skärmen, tätt samlade. */
.entry-form {
    min-height: 100%;
}

.entry-spacer {
    flex: 1 1 auto;
    margin: 0 !important;
}

/* Dialoger där inmatningen ligger inuti en omslutande ruta (egna banor): rutan och inmatningen fyller höjden i helskärm, så att knappsatsen
   hamnar längst ner också där. */
.mud-dialog-fullscreen .entry-wrap {
    min-height: 100%;
}

.entry-wrap > .entry-form {
    flex: 1 1 auto;
}

/* Knappsatsen för precision i helskärm: lite högre knappar än vanligt, men inte så höga att översta raden hamnar utom räckhåll för tummen. Hela
   inmatningen ligger samlad längst ner (tomt utrymme överst, se PrecisionResultEntry). */
.mud-dialog-fullscreen .entry-keypad .entry-button {
    min-height: 3.75rem;
    font-size: 1.6rem;
}

/* På telefon får meddelandena ta plats när de visas (inget reserveras): höjden är knapp, och då slipper man scrolla i onödan. */
.mud-dialog-fullscreen .entry-form .entry-issues {
    min-height: 0;
}

.mud-dialog-fullscreen .entry-form {
    gap: 14px;
}

.mud-dialog-fullscreen .entry-button,
.mud-dialog-fullscreen .entry-none {
    min-height: 3rem;
}

/* Plats för två meddelanden under inmatningen (uppmaning och fel, en rad var), så att dialogen aldrig hoppar när de kommer eller försvinner.
   På smal skärm kan felet ta två rader. */
.entry-issues {
    min-height: 3.4rem;
}

/* Luft ovanför det röda felet, till texten före (den grå uppmaningen, eller raden med poängen om den saknas). Padding på en omslutande
   ruta, så att det inte hänger på hur textens egen marginal beter sig. */
.entry-problem {
    padding-top: 0.75rem;
}

@media (max-width: 480px) {
    .entry-issues {
        min-height: 4.7rem;
    }
}

/* Rubrikraden för poängen: rubrik och hjälptext (som kan gå över två rader) till vänster, Ångra till höger. Fast höjd. */
.entry-poang-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 3.5rem;
}

/* Ångra: lite högre än en vanlig liten knapp, så att den är lätt att träffa. */
.entry-undo {
    min-height: 2.5rem;
    font-size: 1rem;
}

/* "Inga" (0 träffar) på rubrikraden: bredare än en sifferknapp, men inte så bred att den tar plats från raden. */
.entry-zero {
    min-width: 4.5rem !important;
    font-size: 1.1rem;
}

.entry-button {
    min-height: 2.75rem;
    min-width: 0 !important;
    font-size: 1.25rem;
}

/* Prick på en flik som ska kontrolleras innan start; försvinner när fliken öppnats. */
.tab-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--mud-palette-warning);
}

.tab-count-warning {
    background: var(--mud-palette-warning);
}

.tab-count-info {
    background: var(--mud-palette-info);
}

.flex-1 {
    flex: 1 1 0;
}

.qr-code {
    width: min(100%, 280px);
    padding: 12px;
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-white);
    border: 1px solid var(--mud-palette-lines-default);
}

    .qr-code svg {
        display: block;
        width: 100%;
        height: auto;
    }

.guest-link {
    word-break: break-all;
}

.choice-button {
    text-transform: none;
    min-width: 0;
    padding-left: 0;
}

.candidate-lane {
    margin-left: 6px;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

.candidate-list {
    max-height: 55vh;
    overflow-y: auto;
}

.series-count {
    min-width: 2ch;
    text-align: center;
}

.action-bar {
    position: sticky;
    bottom: calc(72px + env(safe-area-inset-bottom));
    z-index: 5;
    padding: 12px;
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    box-shadow: var(--mud-elevation-8);
}

@media (min-width: 960px) {
    .action-bar {
        bottom: 16px;
    }
}

/* Kommandohjälpens flytande knapp (en ikon, samma storlek som menyknappen): ovanför bottenmenyn och åtgärdsfältet, direkt under
   menyknappen och i linje med den, men under panelen. Medan ett kommando pågår växer den åt vänster med kommandot och tiden. */
.field-fab {
    position: fixed;
    right: 24px;
    bottom: calc(180px + env(safe-area-inset-bottom));
    z-index: 1200;
}

@media (min-width: 960px) {
    .field-fab {
        bottom: 120px;
    }
}

/* Gruppraden i banstatusen (synkade, väntar, krock, avbrutna): hela raden fäller ut gruppen. */
.group-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    min-height: 48px;
    cursor: pointer;
    border-top: 1px solid var(--mud-palette-lines-default);
    -webkit-tap-highlight-color: transparent;
}

/* Åtgärdsmenyns knapp: precis ovanför kommandohjälpens knapp. */
.action-fab {
    position: fixed;
    right: 24px;
    bottom: calc(240px + env(safe-area-inset-bottom));
    z-index: 1200;
}

@media (min-width: 960px) {
    .action-fab {
        bottom: 180px;
    }
}

/* De flytande knapparna är lite genomskinliga, så att man ser innehållet bakom. Helt synliga när man rör dem, och kommandohjälpens
   knapp medan ett kommando pågår (då ska kommandot och tiden synas tydligt). */
.field-fab,
.action-fab {
    opacity: 0.8;
    transition: opacity 0.2s;
}

.field-fab:hover,
.field-fab:focus-visible,
.field-fab.running,
.action-fab:hover,
.action-fab:focus-within {
    opacity: 1;
}

/* Panelen från botten får scrolla om innehållet är högre än skärmen. */
.field-sheet {
    overflow-y: auto;
    border-top-left-radius: var(--mud-default-borderradius);
    border-top-right-radius: var(--mud-default-borderradius);
}

.badge-medal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--mud-palette-white);
    background: var(--badge-color);
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Ett fel har inträffat."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1F4E79;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Laddar");
    }