@import '_content/PSC.Blazor.Components.Chartjs/PSC.Blazor.Components.Chartjs.bundle.scp.css';

/* /Components/AppModal.razor.rz.scp.css */
.app-modal-backdrop[b-zlsjvwdhm2] {
    z-index: calc(var(--bs-modal-zindex, 1055) - 1);
}

.app-modal-surface[b-zlsjvwdhm2] {
    z-index: var(--bs-modal-zindex, 1055);
    pointer-events: none;
}

.app-modal-surface[b-zlsjvwdhm2]  .modal-dialog {
    pointer-events: auto;
}

/* ------------------------------------------------------------------
   Höjdgräns som default (beställarfynd 2026-08-15).
   "Ny chatt" listar alla klubbens medlemmar utan höjdgräns. Med
   modal-dialog-centered växer en för hög dialog åt BÅDA håll: krysset
   hamnar ovanför skärmkanten och footern nedanför, så dialogen inte går
   att stänga på mobil (Esc finns, men inget tangentbord). Bootstraps
   modal-dialog-scrollable löser det per dialog — men bara nio av tjugo
   anrop satte Scrollable, så fällan väntade i resten.

   Reglerna nedan gör det strukturellt omöjligt att bygga en dialog med
   oåtkomlig stängknapp, oavsett vad anroparen skickar in. De BEGRÄNSAR
   bara höjd; dialoger som får plats påverkas inte. Scrollable fortsätter
   fungera som förut (Bootstrap sätter samma sak, med hårdare max-height).
   BottomSheet har redan sin egen gräns och undantas.
   ------------------------------------------------------------------ */
.app-modal-surface:not(.app-modal-sheet)[b-zlsjvwdhm2]  .modal-content {
    max-height: calc(100dvh - 2 * var(--bs-modal-margin, 0.5rem));
}

/* min-height: 0 krävs — utan den vägrar en flex-item krympa under sitt
   innehåll och max-height ovan får ingen effekt. */
.app-modal-surface:not(.app-modal-sheet)[b-zlsjvwdhm2]  .modal-body {
    overflow-y: auto;
    min-height: 0;
    overscroll-behavior: contain;
}

.app-modal-surface:not(.app-modal-sheet)[b-zlsjvwdhm2]  .modal-header,
.app-modal-surface:not(.app-modal-sheet)[b-zlsjvwdhm2]  .modal-footer {
    flex-shrink: 0;
}

/* ------------------------------------------------------------------
   BottomSheet-presentation (ADR-0025).
   Lätt tokenstyrd scrim i stället för Bootstraps svarta 50 %-backdrop.
   Standard-Modal behåller Bootstrap-utseendet — reglerna nedan gäller
   endast när Presentation=BottomSheet.
   ------------------------------------------------------------------ */
.app-modal-backdrop.app-sheet-scrim[b-zlsjvwdhm2] {
    background-color: var(--color-scrim);
    opacity: 1;
}

.app-modal-sheet[b-zlsjvwdhm2]  .app-sheet-dialog {
    position: fixed;
    inset: auto 0 0 0;
    margin: 0 auto;
    width: 100%;
    max-width: 640px;
}

.app-modal-sheet[b-zlsjvwdhm2]  .app-sheet-dialog .modal-content {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 0;
    max-height: min(80dvh, 640px);
    padding-bottom: var(--safe-bottom);
    overscroll-behavior: contain;
    animation: app-sheet-in-b-zlsjvwdhm2 200ms ease-out;
}

.app-modal-sheet[b-zlsjvwdhm2]  .app-sheet-dialog .modal-body {
    overflow-y: auto;
}

/* Transform-animation (inte display/visibility): fokusfällans första pass
   måste hitta fokuserbara element redan under infarten. */
@keyframes app-sheet-in-b-zlsjvwdhm2 {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .app-modal-sheet[b-zlsjvwdhm2]  .app-sheet-dialog .modal-content {
        animation: none;
    }
}
/* /Components/Avatar.razor.rz.scp.css */
.avatar[b-f9bkzmbgzb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.avatar-initials[b-f9bkzmbgzb] {
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: 600;
    user-select: none;
}

/* Palett för Id-styrd initial-färg (se Avatar.razor) — samma text/bakgrund-
   teknik som .avatar-initials (mjuk ton + redan AA-vetted textfärg), bara
   fler kulörer för att skilja spelare åt i en lista. Mjuka bakgrunder är
   egna tokens (--color-avatar-*-soft, app.css) i stället för color-mix()
   (stöds inte i Chrome < 111). */
.avatar-palette-0[b-f9bkzmbgzb] { background-color: var(--color-primary-soft);        color: var(--color-primary); font-weight: 600; user-select: none; }
.avatar-palette-1[b-f9bkzmbgzb] { background-color: var(--color-avatar-info-soft);    color: var(--color-info);    font-weight: 600; user-select: none; }
.avatar-palette-2[b-f9bkzmbgzb] { background-color: var(--color-avatar-warning-soft); color: var(--color-warning); font-weight: 600; user-select: none; }
.avatar-palette-3[b-f9bkzmbgzb] { background-color: var(--color-avatar-success-soft); color: var(--color-success); font-weight: 600; user-select: none; }

/* UIUX-10 §1a / UI-RAMVERK §1: rundad kvadrat i stället för cirkel. Endast för
   TopNav:s profilknapp, där avataren är en av fem ikonknappar som måste ha
   identisk form. Avatarer i listor/rader (PersonRow, incheckningslistan) är
   fortsatt runda — mockuperna visar cirklar där, och UI-RAMVERK §1:s formkrav
   gäller uttryckligen TopNav:s knapprad, inte avatarer i allmänhet. */
.avatar-square[b-f9bkzmbgzb] { border-radius: 6px; }

.avatar-sm[b-f9bkzmbgzb] { width: 28px; height: 28px; font-size: 0.7rem; }
.avatar-md[b-f9bkzmbgzb] { width: 40px; height: 40px; font-size: 0.9rem; }
.avatar-lg[b-f9bkzmbgzb] { width: 72px; height: 72px; font-size: 1.5rem; }
/* /Components/Card.razor.rz.scp.css */
.app-card[b-kzmrjcd4nq] {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--shadow-card, none);
    padding: var(--space-4, 16px);
}

.app-card-header[b-kzmrjcd4nq] {
    margin-bottom: var(--space-3, 12px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 8px);
    flex-wrap: wrap;
}

.app-card-header-actions[b-kzmrjcd4nq] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    margin-left: auto;
}

.app-card-title[b-kzmrjcd4nq] {
    font-size: 1.05rem;
    font-weight: 650;
    margin: 0;
    color: var(--color-text-body);
}

.app-card-body[b-kzmrjcd4nq] {
    color: var(--color-text-body);
}

.app-card-footer[b-kzmrjcd4nq] {
    margin-top: var(--space-4, 16px);
    display: flex;
    gap: var(--space-2, 8px);
    justify-content: flex-end;
}

/* Skyddad panel — tonad yta, låsikon, behörighetstext (design-system.md §5.2) */
.app-card-protected[b-kzmrjcd4nq] {
    background-color: var(--color-bg-surface);
}

.app-card-protected-banner[b-kzmrjcd4nq] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    color: var(--color-primary);
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: var(--space-3, 12px);
}

.app-card-protected-icon[b-kzmrjcd4nq] {
    flex-shrink: 0;
}

/* Varningspanel — kort rubrik, orsak/konsekvens/handling i ChildContent (§5.3) */
.app-card-warning[b-kzmrjcd4nq] {
    border-color: var(--color-warning);
}

.app-card-warning .app-card-title[b-kzmrjcd4nq] {
    color: var(--color-warning);
}

/* Relief-vattenstämpel (CardIcon) — stor, mycket svag konturglyf i övre högra hörnet.
   Låg opacitet på text-muted → "svartvit" i ljust tema, ljusgrå i mörkt. Dekorativ. */
.app-card[b-kzmrjcd4nq] {
    position: relative;
}

.app-card[b-kzmrjcd4nq]  .app-card-watermark {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 46px;
    height: 46px;
    color: var(--color-text-muted);
    opacity: 0.14;
    pointer-events: none;
}
/* /Components/Charts/LineChartCard.razor.rz.scp.css */
.line-chart-card[b-i5hp5p61ar] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.line-chart-card__title[b-i5hp5p61ar] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-body-color, #212529);
}

/* Mobilanpassad höjd: 200 px på small, 260 px på wider screens */
.line-chart-card__canvas-wrapper[b-i5hp5p61ar] {
    position: relative;
    height: 200px;
    width: 100%;
}

@media (min-width: 576px) {
    .line-chart-card__canvas-wrapper[b-i5hp5p61ar] {
        height: 260px;
    }
}

/* Tabellfallback (UIUX-PR04). Ingen egen färgsättning — ärver temats tokens,
   så den fungerar i både light och dark utan hårdkodade ytor. */
.line-chart-card__data > summary[b-i5hp5p61ar] {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color, #6c757d);
    cursor: pointer;
}

.line-chart-card__data > summary:focus-visible[b-i5hp5p61ar] {
    outline: 2px solid var(--bs-focus-ring-color, #378ADD);
    outline-offset: 2px;
}

.line-chart-card__data table[b-i5hp5p61ar] {
    font-size: 0.8125rem;
    margin-top: 0.5rem;
}

/* Caption bär axelnamn och enheter. Den ska läsas, inte gömmas. */
.line-chart-card__data caption[b-i5hp5p61ar] {
    caption-side: top;
    padding: 0 0 0.25rem;
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #6c757d);
}
/* /Components/Chip.razor.rz.scp.css */
.chip[b-xmhwfxjbjx] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.chip-filled[b-xmhwfxjbjx] {
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
}

.chip-muted[b-xmhwfxjbjx] {
    background-color: var(--color-bg-surface);
    color: var(--color-text-muted);
}

.chip-outline[b-xmhwfxjbjx] {
    background-color: transparent;
    color: var(--color-text-body);
    border: 1px solid var(--color-border);
}
/* /Components/ClubStandingsCards.razor.rz.scp.css */
/* Klubbens eget lag i serietabellen.

   Var tidigare bootstraps .table-active, som lägger en LJUS overlay på raden utan att röra
   textfärgen. I mörkt tema blev raden ljus medan texten förblev ljus — oläslig. Samma klass av
   fel som .alert hade före PR 601: en bootstrap-default utan tokenbaserad motsvarighet.

   Lösningen tar färgen ur tokens, som är definierade för båda temana, och sätter BÅDE bakgrund
   och textfärg — en bakgrund utan textfärg är just det som gick sönder. */
.standings-own > td[b-fejonlrr4c] {
    background-color: var(--color-primary-soft, #e2eff2);
    color: var(--color-text-body);
}

/* S, V/O/F, BP, Diff och P är sifferkolumner — tabular-nums håller siffrorna på plats i
   kolumnen i stället för att variera i bredd (1 vs 8, "+" vs "−") mellan rader. */
.standings-table td.text-end[b-fejonlrr4c],
.standings-table th.text-end[b-fejonlrr4c] {
    font-variant-numeric: tabular-nums;
}
/* /Components/ImageCaptureInput.razor.rz.scp.css */
/* Fokusindikering för de tangentbordstillgängliga uppladdningsknapparna.

   Själva <input type="file"> är visually-hidden (osynlig men fokuserbar), så den
   globala :focus-visible-ringen i app.css skulle ritas på ett urklippt element och
   aldrig synas. Ringen flyttas därför till den synliga labeln när inputen har
   tangentbordsfokus. Samma värden som app.css rad 324-328 (ACCESSIBILITY.md §2). */
.image-capture-trigger:has(input:focus-visible)[b-2qyqpxt3l6] {
    outline: 3px solid var(--color-primary-focus);
    outline-offset: 2px;
    border-radius: 2px;
}
/* /Components/KpiTile.razor.rz.scp.css */
.kpi-tile[b-gt5flk9bjv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 4px);
    /* Brickor står i rader om två eller fyra. Utan detta blir en bricka vars trendrad bryts
       till två rader högre än sina grannar, och raden får ojämna underkanter. Bootstraps
       .col sträcks redan av .row (align-items: stretch); det är tile:n som inte fyllde den. */
    height: 100%;
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--shadow-card, none);
    padding: var(--space-3, 12px) var(--space-4, 16px);
}

.kpi-tile-label[b-gt5flk9bjv] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.kpi-tile-value[b-gt5flk9bjv] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text-body);
}

.kpi-tile-trend[b-gt5flk9bjv] {
    font-size: 0.8rem;
    font-weight: 500;
}

.kpi-tile-trend-positive[b-gt5flk9bjv] {
    color: var(--color-success);
}

.kpi-tile-trend-negative[b-gt5flk9bjv] {
    color: var(--color-danger);
}

.kpi-tile-trend-neutral[b-gt5flk9bjv] {
    color: var(--color-text-muted);
}

/* Smala skärmar: 3-kolumns KPI-rad — mindre etikett så "Tillgänglighet" inte trunkeras */
@media (max-width: 575.98px) {
    .kpi-tile-label[b-gt5flk9bjv] {
        font-size: 0.7rem;
    }

    .kpi-tile-value[b-gt5flk9bjv] {
        font-size: 1.4rem;
    }
}
/* /Components/LineChart.razor.rz.scp.css */
.line-chart-svg[b-50x3u83hk5] {
    width: 100%;
    height: 220px;
    overflow: visible;
}

/* Kompakt variant för diagram i ett smalt kort (t.ex. Mina resultat på Spelare-ytan) —
   samma koordinatsystem, lägre renderad höjd så att kortet inte spränger sin kolumn. */
.line-chart-sm .line-chart-svg[b-50x3u83hk5] {
    height: 160px;
}

.line-chart-gridline[b-50x3u83hk5] {
    stroke: currentColor;
    stroke-opacity: 0.1;
    stroke-width: 1;
}

.line-chart-line[b-50x3u83hk5] {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.line-chart-point[b-50x3u83hk5] {
    fill: currentColor;
    stroke: none;
}

.line-chart-axis-label[b-50x3u83hk5] {
    fill: currentColor;
    font-size: 11px;
    opacity: 0.65;
}

.line-chart-axis-y[b-50x3u83hk5] {
    text-anchor: end;
}

.line-chart-axis-x[b-50x3u83hk5] {
    text-anchor: middle;
}

.line-chart-dot[b-50x3u83hk5] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
}
/* /Components/LineupPairsView.razor.rz.scp.css */
/* Beställarönskemål 2026-08-14: laguppställningen ska läsas som banpar.

   Luften mellan paren ligger som flex-gap, inte som en tom rad i markupen — en tom rad hade
   annonserats som ett innehållslöst element av skärmläsare utan att tillföra något. */
.lineup-pairs[b-4npzmyuc1l] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* Etikett + parets två spelare på EN rad. minmax(0, 1fr) i stället för 1fr: utan
   min-width-nollställningen vägrar en grid-kolumn krympa under sitt innehåll, och två långa
   namn spränger kortet i sidled på mobil. */
.lineup-pair[b-4npzmyuc1l] {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 0.5rem;
    row-gap: 0.1rem;
    align-items: baseline;
}

.lineup-pair-label[b-4npzmyuc1l] {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    white-space: nowrap;
}

/* Namnet bryts hellre inuti ordet än får kortet att scrolla i sidled — vyn är ett smalt
   kort på telefon. */
.lineup-pair-player[b-4npzmyuc1l] {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Reserven är inte ett banpar och ska stå för sig: egen rad, ingen parkolumn. */
.lineup-reserve[b-4npzmyuc1l] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}

/* Avdelaren sätts bara på den FÖRSTA reserven (den som följer direkt på ett banpar), så att
   flera reserver inte får var sin linje. Finns inga ordinarie alls ritas ingen linje. */
.lineup-pair + .lineup-reserve[b-4npzmyuc1l] {
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}

/* Under ~400 px ryms inte "Par N" på samma rad som två namn utan att namnen pressas till
   någon bokstav per rad. Etiketten lägger sig då ovanför paret; spelarna står kvar bredvid
   varandra, vilket är hela poängen med vyn. */
@media (max-width: 400px) {
    .lineup-pair[b-4npzmyuc1l] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .lineup-pair-label[b-4npzmyuc1l] {
        grid-column: 1 / -1;
    }
}
/* /Components/MatchCard.razor.rz.scp.css */
.match-card-header[b-tv810nuhh6] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2, 8px);
}

.match-card-opponent[b-tv810nuhh6] {
    font-weight: 650;
    color: var(--color-text-body);
}

.match-card-last-change[b-tv810nuhh6] {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.match-card-meta[b-tv810nuhh6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3, 12px);
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: var(--space-1, 4px);
}

.match-card-status-row[b-tv810nuhh6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    margin-top: var(--space-3, 12px);
}
/* /Components/MatchHero.razor.rz.scp.css */
.match-hero-side[b-9lq1eu3mbx] {
    min-width: 84px;
    max-width: 140px;
}

.match-hero-logo[b-9lq1eu3mbx] {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 50%;
}

.match-hero-score[b-9lq1eu3mbx] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text-body);
}

.match-hero-vs[b-9lq1eu3mbx] {
    font-size: 1.1rem;
    font-weight: 600;
}
/* /Components/PersonMultiPicker.razor.rz.scp.css */
/* Chipsfältet ska läsa som ett formulärfält (mockup coach-traningsgrupp-detail) — samma ram
   och radie som .form-control, men med chips i stället för en textmarkör. */
.person-multi-field[b-ok13xstucs] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1, 6px);
    min-height: 44px;
    padding: var(--space-1, 6px) var(--space-2, 10px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    background-color: var(--color-bg-card, transparent);
    margin-bottom: var(--space-2, 8px);
}

.person-multi-empty[b-ok13xstucs] {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* Samma pill-uttryck som Chip.razor's chip-filled. Duplicerat med avsikt: Chip.razor.css är
   scope-isolerad till sin egen komponent, så klasserna går inte att återanvända härifrån. */
.person-multi-chip[b-ok13xstucs] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px 2px 10px;
    border-radius: 999px;
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

/* Träffytan hålls 24px hög inuti chipet men chipet självt sitter i ett 44px-fält, så kravet
   på tumvänlig yta bärs av raden — inte av en uppsvälld ×. */
.person-multi-remove[b-ok13xstucs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 2px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.person-multi-remove:hover:not(:disabled)[b-ok13xstucs],
.person-multi-remove:focus-visible[b-ok13xstucs] {
    background-color: var(--color-primary);
    /* Samma token som .status-badge-internal använder för text på primärfärgad yta. */
    color: var(--color-primary-btn-text);
}

.person-multi-remove:disabled[b-ok13xstucs] {
    cursor: not-allowed;
    opacity: 0.5;
}
/* /Components/PersonPicker.razor.rz.scp.css */
.person-picker-list[b-sp5zcy4zzv] {
    max-height: 260px;
    overflow-y: auto;
}

.person-picker-option[b-sp5zcy4zzv] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2, 8px);
    min-height: 44px;
}

.person-picker-name[b-sp5zcy4zzv] {
    font-weight: 500;
}

.person-picker-secondary[b-sp5zcy4zzv] {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}
/* /Components/PersonRow.razor.rz.scp.css */
.person-row[b-v3cegcb0jp] {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-2, 8px) 0;
}

.person-row-avatar[b-v3cegcb0jp] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-bg-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.person-row-avatar-img[b-v3cegcb0jp] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.person-row-initials[b-v3cegcb0jp] {
    font-size: 0.85rem;
    font-weight: 650;
    color: var(--color-primary);
}

.person-row-identity[b-v3cegcb0jp] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.person-row-name[b-v3cegcb0jp] {
    font-weight: 600;
    color: var(--color-text-body);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.person-row-role[b-v3cegcb0jp] {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.person-row-status[b-v3cegcb0jp] {
    flex-shrink: 0;
}

.person-row-action[b-v3cegcb0jp] {
    flex-shrink: 0;
}

    /* 44×44 px touch-mål för handlingsknappar i raden (design-system.md §7) */
    .person-row-action[b-v3cegcb0jp]  .btn {
        min-width: 44px;
        min-height: 44px;
    }

/* ── Smal skärm: låt status och handling falla ner på egen rad ──────────────────────────
   Raden var EN flexrad där avatar, status och handling alla har flex-shrink: 0 — bara
   identitetskolumnen kunde krympa. På 390 px gick ~40 px till avataren, ~90 px till
   statusmärket och ~230 px till Lag-flikens TVÅ knappar. Kvar till namn och roll blev
   ~100 px: lagnamnet ellipsades till "B..." och rolltexten bröt på varje ord i tio rader,
   med statusmärket flytande mitt inne i texten.

   Komponentens dokumentation säger "en kontextuell handling" i singular. I stället för att
   förbjuda fler knappar (Lag-fliken behöver dem) låter vi raden wrappa: avatar + identitet
   fyller första raden, status och handling hamnar under, indragna i linje med texten.

   52px = avatarens 40px + radens gap på 12px. */
@media (max-width: 575.98px) {
    .person-row[b-v3cegcb0jp] {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .person-row-identity[b-v3cegcb0jp] {
        flex: 1 1 calc(100% - 52px);
    }

    .person-row-name[b-v3cegcb0jp] {
        white-space: normal;
    }

    .person-row-status[b-v3cegcb0jp],
    .person-row-action[b-v3cegcb0jp] {
        margin-inline-start: 52px;
    }

    /* Två knappar ryms inte bredvid varandra på de smalaste skärmarna. */
    .person-row-action[b-v3cegcb0jp] {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2, 8px);
    }
}

/* Detaljraden (kontaktuppgifter, senaste inloggning). Wrappar med flit: två länkar och en
   tidsangivelse ryms inte på en rad i en halv skärmbredd, och trunkering hade dolt just den
   uppgift raden finns till för. */
.person-row-detail[b-v3cegcb0jp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.75rem;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* Kontaktlänkarna ska se ut som länkar utan att skrika — raden är till för att skannas, och
   fem blå länkar per rad blir brus. */
.person-row-detail a[b-v3cegcb0jp] {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.person-row-detail a:hover[b-v3cegcb0jp],
.person-row-detail a:focus-visible[b-v3cegcb0jp] {
    color: var(--color-text-body);
}
/* /Components/PlayerCompetitionsCard.razor.rz.scp.css */
/* Tävlingslistan. Var en tabell med sex kolumner — på 390 px hamnade "Serier" utanför kanten
   och tävlingsnamnen bröt till fem rader styck. En rad per tävling, siffrorna under namnet. */
.comp-list[b-hb3ueobak6] {
    display: flex;
    flex-direction: column;
}

.comp-row[b-hb3ueobak6] {
    padding: var(--space-3, 12px) 0;
    border-bottom: 1px solid var(--color-border);
}

.comp-row:last-child[b-hb3ueobak6] {
    border-bottom: none;
}

/* Namn och datum på samma rad; datumet krymper aldrig, namnet bryter vid behov. */
.comp-head[b-hb3ueobak6] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3, 12px);
}

.comp-name[b-hb3ueobak6] {
    font-weight: 600;
    color: var(--color-text-body);
    min-inline-size: 0;
}

.comp-date[b-hb3ueobak6] {
    flex: 0 0 auto;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.comp-class[b-hb3ueobak6] {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* Siffrorna som separata delar med avdelare — läses som en mening i stället för en tabellrad. */
.comp-facts[b-hb3ueobak6] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    margin-top: 0.25rem;
    font-size: 0.9rem;
    color: var(--color-text-body);
    font-variant-numeric: tabular-nums;
}

.comp-fact-muted[b-hb3ueobak6] {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.comp-action[b-hb3ueobak6] {
    margin-top: 0.25rem;
}
/* /Components/ProgressRing.razor.rz.scp.css */
.progress-ring[b-u5ewspoypq] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.progress-ring svg[b-u5ewspoypq] {
    width: 100%;
    height: 100%;
    display: block;
}

.progress-ring-track[b-u5ewspoypq] {
    stroke: var(--color-bg-surface);
}

.progress-ring-fill[b-u5ewspoypq] {
    stroke: var(--color-primary);
    transition: stroke-dashoffset 0.4s ease;
}

.progress-ring-center[b-u5ewspoypq] {
    position: absolute;
    font-weight: 700;
    color: var(--color-text-body);
}

.progress-ring-sm[b-u5ewspoypq] { width: 56px; height: 56px; }
.progress-ring-sm .progress-ring-center[b-u5ewspoypq] { font-size: 0.85rem; }

.progress-ring-md[b-u5ewspoypq] { width: 88px; height: 88px; }
.progress-ring-md .progress-ring-center[b-u5ewspoypq] { font-size: 1.15rem; }

.progress-ring-lg[b-u5ewspoypq] { width: 120px; height: 120px; }
.progress-ring-lg .progress-ring-center[b-u5ewspoypq] { font-size: 1.5rem; }

.progress-ring-label[b-u5ewspoypq] {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: var(--space-1, 4px);
}
/* /Components/ProtocolInterpretationView.razor.rz.scp.css */
.protocol-view[b-127t2m9kzi] {
    --pv-strike: #c0392b;
    --pv-spare: #2e7d83;
    --pv-open: #c9c1b0;
    --pv-split: #d4a72c;
    --pv-cream: #f6f0e4;
    --pv-ink: #1b1b1b;
    background: var(--pv-cream);
    border-radius: 16px;
    padding: 1.5rem 1.25rem;
    color: #222;
    max-width: 720px;
    margin: 0 auto;
}

.pv-eyebrow[b-127t2m9kzi] {
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .7rem;
    font-weight: 700;
    color: var(--pv-strike);
}

.pv-name[b-127t2m9kzi] {
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* Statistikkort */
.pv-stat[b-127t2m9kzi] {
    background: #fff;
    border-radius: 12px;
    border-top: 4px solid var(--pv-open);
    padding: .9rem .5rem;
    text-align: center;
    height: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.pv-stat-num[b-127t2m9kzi] {
    font-size: 2.3rem;
    font-weight: 800;
    line-height: 1;
}

.pv-stat-label[b-127t2m9kzi] {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .72rem;
    font-weight: 700;
    margin-top: .35rem;
}

.pv-stat-sub[b-127t2m9kzi] {
    font-size: .68rem;
    color: #8a8273;
    margin-top: .15rem;
}

/* Mörk totalbar */
.pv-totals[b-127t2m9kzi] {
    background: var(--pv-ink);
    color: #fff;
    border-radius: 12px;
    display: flex;
    justify-content: space-around;
    text-align: center;
    padding: .9rem .5rem;
}

.pv-totals-num[b-127t2m9kzi] {
    display: block;
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1;
}

.pv-totals-label[b-127t2m9kzi] {
    display: block;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .68rem;
    color: #b9b3a6;
    margin-top: .25rem;
}

/* Legend */
.pv-legend[b-127t2m9kzi] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #6c6555;
}

.pv-chip[b-127t2m9kzi] {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    display: inline-block;
}

.pv-chip-open[b-127t2m9kzi] {
    background: #fff;
    border: 1px solid var(--pv-open);
}

.pv-chip-split[b-127t2m9kzi] {
    border: 2px solid var(--pv-split);
    border-radius: 50%;
    background: transparent;
}

/* Serie-kort */
.pv-serie[b-127t2m9kzi] {
    background: #fff;
    border: 1px solid #e7e0d0;
    border-radius: 12px;
}

.pv-serie--review[b-127t2m9kzi] {
    border-color: #e0a800;
    box-shadow: 0 0 0 1px #e0a800 inset;
}

.pv-serie-total[b-127t2m9kzi] {
    font-size: 1.7rem;
    font-weight: 800;
}

.pv-serie-total--warn[b-127t2m9kzi] {
    color: #b8860b;
}

.pv-printed-hint[b-127t2m9kzi] {
    font-size: .68rem;
    color: #b8860b;
    margin-top: -.2rem;
}

/* "Behöver granskas"-flaggor */
.pv-review-note[b-127t2m9kzi] {
    background: #fff8e1;
    border: 1px solid #f0d98c;
    border-radius: 10px;
    padding: .6rem .85rem;
    color: #7a5c00;
    font-size: .82rem;
}

.pv-review-badge[b-127t2m9kzi] {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .4rem;
    border-radius: 6px;
    background: #fff3cd;
    border: 1px solid #e0a800;
    color: #7a5c00;
    font-size: .65rem;
    font-weight: 700;
    vertical-align: middle;
}

.pv-edit-hint[b-127t2m9kzi] {
    background: #eef4fb;
    border: 1px solid #cfe0f3;
    border-radius: 10px;
    padding: .55rem .8rem;
    color: #34546f;
    font-size: .8rem;
}

.pv-edit-hint code[b-127t2m9kzi] {
    background: #dce8f5;
    padding: 0 .25rem;
    border-radius: 4px;
}

.pv-frame-edit[b-127t2m9kzi] {
    width: 46px;
    height: 30px;
    text-align: center;
    font-weight: 700;
    font-family: var(--bs-font-monospace, monospace);
    border: 1px solid #cdd5e0;
    border-radius: 5px;
    background: #fff;
    padding: 0;
}

/* Färgkodade redigerbara celler — ser ut som de tryckta rutorna men går att skriva i. */
.pv-frame-edit--strike[b-127t2m9kzi] {
    background: var(--pv-strike);
    color: #fff;
    border-color: var(--pv-strike);
}

.pv-frame-edit--spare[b-127t2m9kzi] {
    background: var(--pv-spare);
    color: #fff;
    border-color: var(--pv-spare);
}

.pv-frame-edit--open[b-127t2m9kzi] {
    background: #fff;
    color: #222;
}

/* Vid fokus: alltid ljus bakgrund för läsbar redigering oavsett frametyp. */
.pv-frame-edit:focus[b-127t2m9kzi] {
    background: #fff;
    color: #222;
    outline: none;
    border-color: #2e7d83;
    box-shadow: 0 0 0 2px rgba(46, 125, 131, .25);
}

/* Split-markering även i redigeringsläge (inputs ersätter de ringade kulorna):
   tydlig guldram (dubbel ring) så den syns oavsett frametyp. Inputs kan inte ha
   ::after, så vi använder en kraftig box-shadow-ring + guldkant. */
.pv-frame-edit--split[b-127t2m9kzi] {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pv-split);
    border-color: var(--pv-split);
}

/* Frame-rutnät */
.pv-grid[b-127t2m9kzi] {
    border-collapse: collapse;
    width: 100%;
    min-width: 420px;
}

.pv-grid td[b-127t2m9kzi] {
    border: 1px solid #e7e0d0;
    text-align: center;
    padding: 0;
}

.pv-grid-frameno td[b-127t2m9kzi] {
    font-size: .62rem;
    color: #9a9384;
    padding: .1rem 0;
    border-bottom: none;
}

.pv-grid-balls td[b-127t2m9kzi] {
    padding: .15rem;
}

.pv-frame[b-127t2m9kzi] {
    display: flex;
    justify-content: center;
    gap: 2px;
    min-height: 30px;
    align-items: center;
}

.pv-ball[b-127t2m9kzi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 26px;
    font-weight: 700;
    font-size: .9rem;
    border-radius: 4px;
}

.pv-ball-strike[b-127t2m9kzi] {
    background: var(--pv-strike);
    color: #fff;
}

.pv-ball-spare[b-127t2m9kzi] {
    background: var(--pv-spare);
    color: #fff;
}

/* Split: inringat förstakast på protokollet → tydlig guldring + guldsiffra + tonad botten,
   så markeringen syns lika klart som på det tryckta protokollet. */
.pv-ball-split[b-127t2m9kzi] {
    box-shadow: 0 0 0 2px var(--pv-split);
    color: #8a6d1a;
    background: #fff7e6;
    border-radius: 50%;
    font-weight: 800;
}

.pv-grid-run td[b-127t2m9kzi] {
    font-size: .72rem;
    color: #6c6555;
    background: #faf7f0;
    padding: .15rem 0;
}
/* /Components/SeasonSelector.razor.rz.scp.css */
/* SeasonSelector (UIUX-22). Måtten bor här och inte hos anroparen: scoped CSS i en förälder
   sätter inte sin scope-attribut på en barnkomponents element (samma fälla som NavLink/::deep,
   se reference_blazor_scoped_css_navlink_deep). Väljaren står bredvid lagväljaren på desktop
   och lägger sig under den på mobil; en dropdown ska inte sträcka sig över hela radbredden. */

.season-selector[b-frahmcfz4y] {
    min-width: 11rem;
}

.season-selector select[b-frahmcfz4y] {
    /* ≥44px touchyta (UI-RAMVERK §6 / WCAG 2.5.5) — form-select-sm är annars för låg. */
    min-height: 44px;
}
/* /Components/SegmentedControl.razor.rz.scp.css */
/* Segmentkontroll — ljus "bana" med ifylld pill för det valda alternativet (mockupernas
   Alla/Match/Tävling/Träning och Uttaget lag/Kandidater). Alla färger via tokens, ingen hex. */

.segmented[b-9h9553mjj3] {
    display: flex;
    inline-size: 100%;
    gap: 4px;
    padding: 4px;
    border-radius: var(--radius-lg, 16px);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
}

.segmented-option[b-9h9553mjj3] {
    /* Lika breda segment oavsett etikettlängd — annars blir "Alla" hälften så bred som
       "Tävling" och banan ser skev ut mot mockupen. */
    flex: 1 1 0;
    min-inline-size: 0;
    /* UI-RAMVERK §2: samma touch-target som .bottom-nav-item och .app-tabs .nav-link. */
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0.4rem 0.35rem;
    border: none;
    border-radius: var(--radius-md, 12px);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    /* Skyddsnät: segmenten är lika breda, så en ovanligt lång etikett spränger annars sin
       pill och lägger sig över grannarna. Etiketter ska hållas korta — men en som slinker
       igenom ska brytas, inte spilla ut. */
    overflow-wrap: anywhere;
    hyphens: auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.segmented-option:hover:not(:disabled):not(.active)[b-9h9553mjj3] {
    color: var(--color-text-primary);
}

.segmented-option.active[b-9h9553mjj3] {
    background: var(--color-primary-btn);
    color: var(--color-primary-btn-text);
    box-shadow: var(--relief-shadow, 1px 2px 4px rgb(7 54 74 / 12%));
}

.segmented-option:disabled[b-9h9553mjj3] {
    opacity: 0.55;
    cursor: default;
}

.segmented-option:focus-visible[b-9h9553mjj3] {
    outline: none;
    box-shadow: var(--focus-ring, 0 0 0 3px rgb(15 143 131 / 32%));
}

.segmented-count[b-9h9553mjj3] {
    font-size: 0.72rem;
    font-weight: 700;
    opacity: 0.75;
}

@media (max-width: 380px) {
    .segmented-option[b-9h9553mjj3] {
        font-size: 0.78rem;
        padding-inline: 0.2rem;
    }
}
/* /Components/Sparkline.razor.rz.scp.css */
/* Sparkline — färgen ärvs via currentColor från en text-utility-klass på anropsstället
   (samma mönster som LineChart/StatusBadge), så ingen ny hex och inget nytt tema-token. */

.sparkline[b-sm02rmbmjj] {
    display: block;
    inline-size: 100%;
    block-size: 72px;
    color: var(--color-primary);
    overflow: visible;
}

.sparkline-line[b-sm02rmbmjj] {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* preserveAspectRatio="none" skalar SVG:n olika i x och y — utan detta blir linjen
       tunnare/tjockare beroende på kortets bredd. */
    vector-effect: non-scaling-stroke;
}

.sparkline-area[b-sm02rmbmjj] {
    fill: currentColor;
    opacity: 0.12;
    stroke: none;
}

.sparkline-endpoint[b-sm02rmbmjj] {
    fill: currentColor;
    stroke: var(--color-bg-card);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}
/* /Components/Tabs.razor.rz.scp.css */
/* Flikrad per arbetsyta — bygger på Bootstraps nav-tabs-stomme men driver
   färger via tokens (aktiv flik = primärfärg + markeringslinje, koncept §KOMPONENTER). */

.app-tabs[b-tq2o3rm9ef] {
    background: var(--color-bg-body);
    border-bottom: 2px solid var(--color-border);
}

/* Minst 44 px hög touch-target (WCAG 2.5.5 / Apple HIG) — samma krav som mypage-tabs. */
.app-tabs .nav-link[b-tq2o3rm9ef] {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 0.78rem;
    padding: 0.5rem 0.25rem;
    color: var(--color-text-muted);
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}

.app-tabs .nav-link.active[b-tq2o3rm9ef] {
    color: var(--color-primary);
    font-weight: 600;
    background: transparent;
    border-bottom-color: var(--color-primary);
}

@media (max-width: 767.98px) {
    .app-tabs .nav-link[b-tq2o3rm9ef] {
        font-size: 0.72rem;
    }
}
/* /Components/Training/TrainingParticipantList.razor.rz.scp.css */
/* TRANING-DELTAGARE-01: spelarens fyra namngivna deltagargrupper (Grouped=true). */

.training-participant-groups[b-5vxt7uy6zm] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.training-participant-group[b-5vxt7uy6zm] {
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: var(--radius-md, 0.5rem);
    padding: 0.5rem 0.75rem;
}

.training-participant-group__header[b-5vxt7uy6zm] {
    cursor: pointer;
    list-style: none;
}

.training-participant-group__header[b-5vxt7uy6zm]::-webkit-details-marker {
    display: none;
}

.training-participant-group__list[b-5vxt7uy6zm] {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.training-participant-group__list li[b-5vxt7uy6zm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.training-participant-group__empty[b-5vxt7uy6zm] {
    margin-top: 0.5rem;
}
/* /Layout/BulletinAttachments.razor.rz.scp.css */
/* Filväljaren är en visually-hidden <input type="file"> inuti en label som ser ut som en
   knapp. Inputen behåller sin plats i tabbordningen, men dess fokusring syns inte eftersom
   elementet är bortklippt — labeln måste därför visa fokus åt den. */
.bulletin-attach[b-16ln3j7kdm] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    cursor: pointer;
}

.bulletin-attach:focus-within[b-16ln3j7kdm] {
    box-shadow: var(--focus-ring, 0 0 0 3px rgb(15 143 131 / 32%));
    outline: none;
}

/* AppIcon är en egen komponent — scope-attributet stämplas inte på dess SVG. */
.bulletin-attach[b-16ln3j7kdm]  .app-icon {
    inline-size: 16px;
    block-size: 16px;
}

/* Affischen: hela bilden, aldrig beskuren. laget.se byggde bort sin höjdbeskärning i
   nyhetsvyn efter användarsynpunkter — en affisch är nästan alltid stående A4, och en
   beskuren eller nedkrympt affisch går inte att läsa. Taket på 80vh finns bara så att ett
   enskilt anslag inte äter flera skärmar; proportionerna behålls (object-fit: contain). */
.bulletin-poster[b-16ln3j7kdm] {
    margin: 0;
}

.bulletin-poster-trigger[b-16ln3j7kdm] {
    display: block;
    inline-size: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: zoom-in;
    border-radius: var(--radius-md, 12px);
}

.bulletin-poster-trigger:focus-visible[b-16ln3j7kdm] {
    outline: none;
    box-shadow: var(--focus-ring, 0 0 0 3px rgb(15 143 131 / 32%));
}

/* Breddtaket är lika viktigt som höjdtaket, och saknades först: med bara inline-size:100%
   blåstes en A4-affisch upp till 1123 px i ett brett desktopkort och tog hela vyn (mätt).
   520 px motsvarar en A4 i ungefär den storlek man håller ett papper — hela affischen syns
   och texten går att läsa, utan att ett enda anslag fyller skärmen. På mobil är kortet
   smalare än taket, så där ändrar det ingenting. */
.bulletin-poster-trigger img[b-16ln3j7kdm] {
    inline-size: 100%;
    max-inline-size: 520px;
    max-block-size: 80vh;
    object-fit: contain;
    border-radius: var(--radius-md, 12px);
}

/* Helskärmsvyn: begränsas av modalens body, inte av kortet. */
.bulletin-poster-full[b-16ln3j7kdm] {
    display: block;
    inline-size: 100%;
    block-size: auto;
    margin-inline: auto;
}
/* /Layout/BulletinPostCard.razor.rz.scp.css */
.bulletin-content[b-s3jz8ao9em] {
    white-space: pre-wrap;
    font-size: 0.9rem;
}

/* Kortets ikonknappar (redigera/ta bort). Kvadratisk touchyta ≥ 44 px enligt
   UI-RAMVERK §tillgänglighet — btn-sm ensam ger 31 px höjd, vilket är för litet
   för en fristående ikonknapp utan textetikett. */
.bulletin-card-action[b-s3jz8ao9em] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 44px;
    min-block-size: 44px;
    padding: 0;
    line-height: 1;
}

/* AppIcon renderar sin SVG i en EGEN komponent — scope-attributet stämplas inte
   på den, så storleken måste sättas via ::deep (samma fälla som NavLink-scopet). */
.bulletin-card-action[b-s3jz8ao9em]  .app-icon {
    inline-size: 18px;
    block-size: 18px;
}
/* /Layout/BulletinPostForm.razor.rz.scp.css */
.audience-options[b-7s2zgk86ya] {
    max-height: 180px;
    overflow-y: auto;
}

/* Förhandsvisningen ska visa vad som faktiskt publiceras — hela bilden, aldrig beskuren.
   Lägre tak än i kortet: här är bilden en kontroll bland andra i ett formulär, inte
   innehållet man kommit för att se. */
.bulletin-form-preview img[b-7s2zgk86ya] {
    display: block;
    inline-size: 100%;
    max-block-size: 40vh;
    object-fit: contain;
    border-radius: var(--radius-md, 12px);
    border: 1px solid var(--color-border);
}
/* /Layout/ChatAttachmentView.razor.rz.scp.css */
/* Inline-media i chattbubblan får aldrig spränga bubblan: bredden begränsas av bubblan
   (max-width: 100%) och höjden av ett tak, så ett stort foto/en stående film inte tar
   över hela tråden. */
.chat-attachment-image[b-hk9vlajj4q] {
    max-width: 100%;
    max-height: 220px;
    border-radius: var(--radius-sm, 8px);
    display: block;
    object-fit: contain;
}

.chat-attachment-video[b-hk9vlajj4q] {
    max-width: 100%;
    max-height: 260px;
    border-radius: var(--radius-sm, 8px);
    display: block;
}
/* /Layout/NotificationHub.razor.rz.scp.css */
/* NotificationHub — flyttad från inbäddat <style>-block till scoped CSS och
   tokeniserad (ADR-0025). Fasta rgba-vitt-värden på toggle-knappen är
   avsiktliga: den sitter alltid på den mörka topnav-gradienten (M5). */

.notification-hub[b-rn1gn773k2] {
    position: relative;
}

.notification-toggle[b-rn1gn773k2] {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.12);
    color: white;
    /* UIUX-10 §1a / UI-RAMVERK §1: rundad kvadrat, samma form som övriga fyra
       TopNav-ikonknappar (.topnav-account-btn). Var tidigare 999px = helt rund,
       vilket gav tre olika former i samma knapprad. */
    border-radius: 6px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Inget eget djup: UI-RAMVERK §1 kräver identisk kant, bakgrund OCH djup som
       .topnav-account-btn, som inte bär någon slagskugga. */
}

.notification-bell[b-rn1gn773k2] {
    font-size: 1.1rem;
    line-height: 1;
}

.notification-badge[b-rn1gn773k2] {
    /* Avsiktligt fast mättad röd + vit text, INTE var(--color-danger): det
       tokenet blir ljus lax-rosa i mörkt tema och ger dålig kontrast som
       badge-bakgrund. --color-error-bg är temakonstant mörkröd (samma
       resonemang som M2). */
    position: absolute;
    top: -4px;
    right: -2px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--color-error-bg);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.notification-backdrop[b-rn1gn773k2] {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    z-index: 19;
}

.notification-panel[b-rn1gn773k2] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: min(420px, calc(100vw - 2rem));
    max-height: 70dvh;
    overflow-y: auto;
    word-break: break-word;
    overflow-wrap: anywhere;
    padding: 1rem;
    /* Opak bakgrund — overlay får inte släppa igenom sidans innehåll. */
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
    z-index: 20;
}

@media (max-width: 768px) {
    .notification-panel[b-rn1gn773k2] {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100vw - 1rem);
        max-width: calc(100vw - 1rem);
    }
}

.notification-panel-header[b-rn1gn773k2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.notification-list[b-rn1gn773k2] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.notification-card[b-rn1gn773k2] {
    background: var(--color-bg-card);
    border-left: 4px solid var(--color-primary);
    border-radius: 4px;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.notification-card.is-read[b-rn1gn773k2] {
    opacity: 0.7;
}

.notification-card.is-unread[b-rn1gn773k2] {
    border-left-color: var(--color-outline-primary);
}

.notification-card.pending-applications[b-rn1gn773k2] {
    border-left-color: var(--color-warning);
}

.notification-header[b-rn1gn773k2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.notification-club-logo[b-rn1gn773k2] {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 4px;
    background: var(--color-bg-body);
    flex-shrink: 0;
}

.notification-title-section[b-rn1gn773k2] {
    flex: 1;
    min-width: 0;
}

.notification-title[b-rn1gn773k2] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.notification-club-name[b-rn1gn773k2] {
    display: block;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.notification-message[b-rn1gn773k2] {
    font-size: 0.95rem;
    color: var(--color-text-body);
    margin-bottom: 0.5rem;
}

.notification-timestamp[b-rn1gn773k2] {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.notification-empty[b-rn1gn773k2] {
    text-align: center;
    padding: 2rem;
    color: var(--color-text-muted);
    font-style: italic;
}
/* /Layout/TopNav.razor.rz.scp.css */
/* UIUX-06 §2d/ADR-0068: oläst-märke på chattikonen — samma visuella mönster som
   NotificationHub.razor.css:.notification-badge (skoperad CSS, kan inte återanvändas
   direkt över komponentgränsen). */
.topnav-chat-badge[b-uhtt2devun] {
    position: absolute;
    top: -4px;
    right: -2px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--color-error-bg);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.topnav-backdrop[b-uhtt2devun] {
    position: fixed;
    inset: 0;
    z-index: 199;
}

/* Baren äger sin egen säkerhetszon i stället för att förlita sig på padding på body.
   Gradienten målas ända upp under statusfältet — annars syns en remsa av sidans bakgrund
   ovanför baren när den låst sig — medan paddingen trycker ned innehållet så att det inte
   hamnar bakom klockan. height är innehållshöjden PLUS insetet eftersom box-sizing är
   border-box; .topnav-inner ärver 100 % av innehållsboxen och blir alltså --topnav-h. */
.topnav[b-uhtt2devun] {
    background: linear-gradient(90deg, var(--color-nav-start) 0%, var(--color-nav-end) 100%);
    height: calc(var(--topnav-h) + var(--safe-top));
    padding-top: var(--safe-top);
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.topnav-inner[b-uhtt2devun] {
    display: flex;
    align-items: center;
    height: 100%;
}

/* ── Brand ── */
.topnav-brand-area[b-uhtt2devun] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.6rem;
    flex-shrink: 0;
}

.topnav-club-logo[b-uhtt2devun] {
    width: 26px;
    height: 26px;
    object-fit: contain;
    border-radius: var(--radius-sm, 4px);
    background: var(--color-bg-card);
    flex-shrink: 0;
}

.topnav-brand[b-uhtt2devun] {
    color: white;
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 600;
    white-space: nowrap;
}

    .topnav-brand:hover[b-uhtt2devun] {
        color: rgba(255, 255, 255, 0.85);
    }

@media (max-width: 480px) {
    .topnav-brand[b-uhtt2devun] {
        display: none;
    }
}

/* ── Klubbväxlare (PRO-02) — endast för multi-klubb-användare ── */
.topnav-club-switcher[b-uhtt2devun] {
    max-width: 9rem;
    background: rgba(255, 255, 255, 0.12);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    padding: 0.25rem 0.4rem;
    font-size: 0.8rem;
    cursor: pointer;
}

    .topnav-club-switcher option[b-uhtt2devun] {
        color: var(--color-text-dark, #212529);
        background: var(--color-white, #fff);
    }

/* ── Superadmin-flikrad (egen rad under toppbaren, alla skärmstorlekar) ── */
.superadmin-tabbar[b-uhtt2devun] {
    display: flex;
    align-items: stretch;
    background: var(--color-bg-surface, #fff);
    border-bottom: 1px solid var(--color-border, #dee2e6);
    position: sticky;
    /* Under toppbaren, alltsa dess innehallshojd PLUS sakerhetszonen. Var 3.5rem, vilket
       lade flikraden bakom baren sa fort statusfaltet tog plats. */
    top: calc(var(--topnav-h) + var(--safe-top));
    z-index: 199;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

    .superadmin-tabbar[b-uhtt2devun]::-webkit-scrollbar {
        display: none;
    }

/* ::deep krävs — NavLink renderar <a> som inte bär komponentens scope-attribut. */
.superadmin-tabbar[b-uhtt2devun]  .superadmin-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.7rem 1.1rem;
    color: var(--color-nav-inactive, #6c757d);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    border-bottom: 2.5px solid transparent;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

    .superadmin-tabbar[b-uhtt2devun]  .superadmin-tab:hover {
        color: var(--color-primary, #1b6ec2);
        background: rgba(0, 0, 0, 0.03);
        text-decoration: none;
    }

    .superadmin-tabbar[b-uhtt2devun]  .superadmin-tab.active {
        color: var(--color-primary, #1b6ec2);
        border-bottom-color: var(--color-primary, #1b6ec2);
    }

/* ── Scrollable tab area ── */
.topnav-tabs-scroll[b-uhtt2devun] {
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
}

    .topnav-tabs-scroll[b-uhtt2devun]::-webkit-scrollbar {
        display: none;
    }

.topnav-tabs[b-uhtt2devun] {
    display: flex;
    align-items: stretch;
    height: var(--topnav-h);
    white-space: nowrap;
}

/* ── Individual tab ── */
.topnav-tab[b-uhtt2devun] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    padding: 0 0.85rem;
    height: 100%;
    white-space: nowrap;
    font-size: 0.88rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

    .topnav-tab:hover[b-uhtt2devun],
    .topnav-tab.active[b-uhtt2devun],
    .topnav-tab.dd-open[b-uhtt2devun] {
        color: white;
        background: rgba(255, 255, 255, 0.1);
        border-bottom-color: rgba(255, 255, 255, 0.7);
    }

.topnav-arrow[b-uhtt2devun] {
    font-size: 0.6rem;
    opacity: 0.75;
}

/* ── Dropdown wrapper ── */
.topnav-dropdown-wrap[b-uhtt2devun] {
    position: relative;
    height: 100%;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* ── Dropdown menu ── */
.topnav-dropdown-menu[b-uhtt2devun] {
    position: absolute;
    /* Wrappern ar 100 % hog inuti baren, sa 100 % ar per definition "precis under baren".
       Det hardkodade mattet gled isar sa fort hojden andrades. */
    top: 100%;
    left: 0;
    min-width: 230px;
    background: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    z-index: 300;
    overflow: hidden;
}

.topnav-dropdown-right[b-uhtt2devun] {
    left: auto;
    right: -0.5rem;
}

.topnav-dd-item[b-uhtt2devun] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    color: var(--color-text-dark);
    text-decoration: none;
    font-size: 0.88rem;
    white-space: nowrap;
    transition: background 0.1s;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

    .topnav-dd-item:hover[b-uhtt2devun] {
        background: var(--color-nav-dropdown-hover-bg);
        color: var(--color-nav-dropdown-hover-text);
    }

    .topnav-dd-item.active[b-uhtt2devun] {
        background: var(--color-nav-dropdown-active-bg);
        color: var(--color-nav-dropdown-hover-text);
        font-weight: 500;
    }

.topnav-dd-divider[b-uhtt2devun] {
    height: 1px;
    background: var(--color-separator);
    margin: 0.2rem 0;
}

/* ── Right area ── */
.topnav-right[b-uhtt2devun] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0 0.5rem 0 0.25rem;
    margin-left: auto;
}

/* ── Account button ──
   UIUX-10 §1a: reglerna för .topnav-account-btn ligger numera i app.css (global),
   INTE här. Skälet är att ThemeToggle.razor är en egen komponent — Blazors scoped
   CSS stämplar bara TopNav.razors egna element med den här filens scope-attribut,
   så temaväljarens knapp fick ingen styling alls och renderades som en oformaterad
   webbläsarknapp (beställarens skärmdump 2026-08-08). Se app.css "TopNav:s
   ikonknappar" — flytta inte tillbaka dem hit. */

/* ── Dark mode — dropdown-meny ── */
@media (prefers-color-scheme: dark) {
    .topnav-dropdown-menu[b-uhtt2devun] {
        background-color: var(--color-bg-surface);
        border-color: var(--color-border);
    }

    .topnav-dd-item[b-uhtt2devun] {
        color: var(--color-text-body);
    }

    .topnav-dd-item:hover[b-uhtt2devun] {
        background-color: var(--color-bg-card);
        color: var(--color-text-primary);
    }
}

[data-theme="dark"] .topnav-dropdown-menu[b-uhtt2devun] {
    background-color: var(--color-bg-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .topnav-dd-item[b-uhtt2devun] {
    color: var(--color-text-body);
}

[data-theme="dark"] .topnav-dd-item:hover[b-uhtt2devun] {
    background-color: var(--color-bg-card);
    color: var(--color-text-primary);
}
/* /Layout/TrainingVideoManager.razor.rz.scp.css */
/* Visningsrutan för en träningsfilm.

   HELA bildrutan visas alltid: object-fit är `contain`, aldrig `cover`. Ett stående klipp får
   svarta fält på sidorna i stället för att beskäras — man ska aldrig tappa fötterna eller handen
   ur bild för att rutan har ett annat format. Avvägningen mot höjdtaket nedan gäller alltså
   STORLEK, inte fullständighet.

   Två problem löses här, och de förstärkte varandra:

   1. Klippen är oftast STÅENDE (telefonkamera, 1080×1920). En sådan film fyller hela skärmhöjden
      och trycker hastighets- och zoomknapparna nedanför synfältet — man kunde inte ställa om
      medan man tittade, vilket är precis när man behöver det.

   2. Zoomen använder transform, som skapar en egen ritordning. Den förstorade bilden kunde därför
      lägga sig ÖVER knapparna i stället för att klippas.

   Höjden begränsas därför till drygt halva skärmen, och rutan klipper allt som går utanför. Då
   får bild och reglage plats samtidigt, och zoomen kan aldrig täcka kontrollerna. */
.film-visare[b-ckplx0z03s] {
    overflow: hidden;
    border-radius: var(--radius-sm, 8px);
    /* var()-form med fallback, som UI-RAMVERK §2 foreskriver — en los hex hade fallt F2.
       Tokenen ar inte definierad an: svart ar ratt i bada teman for en films brevlada, och
       hooken finns om nagon senare vill tema-satta den. */
    background: var(--color-video-letterbox, #000);
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 62vh;
}

/* Gestlagret. Ligger OVANPA videon och tar beroringarna innan den ser dem.

   Varfor det behovs: iOS har en egen inbyggd gest dar nypning pa en inline-video oppnar
   helskarm. Den hanteras av videoelementet under vara lyssnare, sa den gar inte att fanga ens i
   capture-fasen — beställaren: "iphones video tar over om jag forsoker". Enda palitliga vagen ar
   att videon aldrig far beroringen.

   Priset ar att de inbyggda kontrollerna inte gar att na samtidigt. Darfor ar det ett LAGE man
   slar pa, inte nagot som alltid ligger pa: annars hade play, paus och tidslinjen slutat
   fungera. */
.film-gestlager[b-ckplx0z03s] {
    position: absolute;
    inset: 0;
    touch-action: none;
    cursor: grab;
}

.film-visare[b-ckplx0z03s] {
    position: relative;
}

.film-visare video[b-ckplx0z03s] {
    /* contain, inte cover: en stående film ska visas hel, inte beskäras. */
    max-height: 62vh;
    width: 100%;
    object-fit: contain;
    display: block;
}
/* /MainLayout.razor.rz.scp.css */
main[b-deq5xpr4my] {
    flex: 1;
    /* UIUX-10 §1b: flexobjekt har min-width: auto som default, så en bred tabell eller
       en icke-brytbar rad tvingade <main> bredare än viewporten och gav horisontell
       sidscroll. Bottennavigationen är position: fixed med left/right: 0, dvs. exakt
       viewportbred — vid horisontell scroll följde den inte med sidled utan slutade
       täcka innehållet, vilket är beställarens "bottennavigationen ligger inte kvar".
       min-width: 0 låter <main> krympa så breda barn scrollar i sin egen
       .table-responsive i stället för att spränga sidan. */
    min-width: 0;
}

@media print {
    .topnav[b-deq5xpr4my] {
        display: none !important;
    }

    article[b-deq5xpr4my] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
/* /Pages/Admin/AdminKlubbLicenser.razor.rz.scp.css */
/* KLUBBLICENS (ADR-0166): F1 (fitness) tillåter ingen inline style="" i .razor-markup —
   stängningskommentarens textfält behöver en snävare bredd än formulärets default. */
.klubblicens-kommentar[b-wwxdjasqsb] {
    max-width: 20rem;
}
/* /Pages/Admin/HcpManagement.razor.rz.scp.css */
/* Tabell för HCP per spelare, en kolumn per register. Namnkolumnen håller sig till en rimlig
   bredd men får aldrig krocka med intilliggande fält igen (KLUBBHCP-03: en tidigare version
   klämde in beräkningstexten på samma flex-rad som namn+fält, och namn som "Christoffer Finke"
   overflowade rakt in i inputfältet på mobil). Tabellen scrollar horisontellt i sin egen
   container i stället för att tvinga fram krock eller att sidan själv scrollar sidledes. */
.hcp-table-wrap[b-d48z80svh5] {
    overflow-x: auto;
}

.hcp-table[b-d48z80svh5] {
    width: 100%;
    border-collapse: collapse;
    min-width: 32rem;
}

.hcp-table th[b-d48z80svh5],
.hcp-table td[b-d48z80svh5] {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.hcp-table thead th[b-d48z80svh5] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
    border-bottom-width: 2px;
}

.hcp-table tbody tr:last-child th[b-d48z80svh5],
.hcp-table tbody tr:last-child td[b-d48z80svh5] {
    border-bottom: none;
}

/* Namnet är radens rubrik (<th scope="row">) — bryt ordet snarare än att låta det overflowa
   in i nästa kolumn om utrymmet ändå blir snålt (t.ex. läsläge med förstorad text).
   Specificiteten måste slå .hcp-table th ovan, annars vinner nowrap där. */
.hcp-table th.hcp-name[b-d48z80svh5] {
    font-weight: 600;
    white-space: normal;
    overflow-wrap: break-word;
    min-width: 8rem;
}

.hcp-input[b-d48z80svh5] {
    width: 5.5rem;
    text-align: right;
}

.hcp-ref[b-d48z80svh5] {
    font-variant-numeric: tabular-nums;
}

.hcp-meta[b-d48z80svh5] {
    display: block;
    font-size: 0.72rem;
}

/* Ändrade rader märks ut så att man ser vad som ligger osparat innan man trycker Spara. */
.hcp-row-changed td[b-d48z80svh5],
.hcp-row-changed th[b-d48z80svh5] {
    background-color: var(--color-primary-soft);
}

.hcp-row-changed th:first-child[b-d48z80svh5] {
    border-radius: var(--radius-sm, 8px) 0 0 var(--radius-sm, 8px);
}

.hcp-row-changed td:last-child[b-d48z80svh5] {
    border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
}
/* /Pages/Admin/InternalCompetitions/InternalCompetitionDetail.razor.rz.scp.css */
/* TAVLING-BANA-01: startlistan läses kolumnvis — bannummer och handicap ska stå still i sidled,
   annars hoppar siffrorna mellan raderna och listan blir svårare att stämma av i hallen. */
.startlist-num[b-q5txn0p51y] {
    font-variant-numeric: tabular-nums;
}
/* /Pages/Admin/LagstyrkaBackfill.razor.rz.scp.css */
.window-dagar-input[b-h0zo88k8z8] {
    width: 6rem;
}
/* /Pages/Admin/Mailbox.razor.rz.scp.css */
/* Mailtext är förformaterad: radbrytningarna i ett mail bär betydelse — styckeindelning,
   signaturer, citerade rader — och försvinner om texten renderas som vanlig HTML-text.
   overflow-wrap behövs eftersom mail ofta innehåller långa URL:er som annars sträcker ut
   kortet i sidled på en telefon. */
.mail-body[b-dn779qrhsu] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Ramen kan inte mäta sitt eget innehåll: sandlådan stänger av skript, och det är hela poängen.
   Höjden sätts därför utifrån med rullning inuti — hellre det än att släppa in skript enbart
   för att slippa en rullningslist. */
.mail-frame-wrap[b-dn779qrhsu] {
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.15));
    border-radius: 0.375rem;
    overflow: hidden;
}

.mail-frame[b-dn779qrhsu] {
    display: block;
    width: 100%;
    height: 50vh;
    min-height: 240px;
    max-height: 60vh;
    border: 0;
}
/* /Pages/Admin/Personuppgifter.razor.rz.scp.css */
/* Sidspecifik layout. Ersätter de inline style="…" som markupen bar (F1). Alla ytor
   och linjer kommer från app.css-tokens — inga hårdkodade färger (F2). */

.account-item + .account-item[b-2jj9soq2r0] {
    border-top: 1px solid var(--color-border, transparent);
}

/* Utfällda kontodetaljer. EN yta: panelen delar kortets bakgrund och skiljs bara med en
   linje. Tidigare låg en tonad platta här och en kortfärgad ruta inuti den — tre nästlade
   ytor, vilket fick fyra uppgifter att se ut som ett formulär. Extra bottenutrymme håller
   isär panelen från nästa kontorad, som har sin egen överkant. */
.account-panel[b-2jj9soq2r0] {
    padding-block: var(--space-3, 12px);
    padding-inline-start: var(--space-1, 4px);
    margin-bottom: var(--space-2, 8px);
    border-top: 1px solid var(--color-border, transparent);
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
}

/* Uppslagslista: rak nyckelkolumn i stället för min-width per fält, så värdena linjerar. */
.account-dl[b-2jj9soq2r0] {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: var(--space-2, 8px) var(--space-3, 12px);
    margin: 0;
    font-size: 0.9rem;
    align-items: baseline;
}

.account-dl dt[b-2jj9soq2r0] {
    color: var(--color-text-muted, inherit);
    font-weight: 400;
    margin: 0;
}

.account-dl dd[b-2jj9soq2r0] {
    margin: 0;
    min-width: 0;
}

.account-inline-action[b-2jj9soq2r0] {
    font-size: 0.8rem;
}

/* En medlemskapsrad. Ingen ram och ingen egen yta: raden är inte klickbar i sin helhet,
   och en ruta runt den lovade en interaktion som inte fanns. */
.account-membership[b-2jj9soq2r0] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2, 8px);
    flex-wrap: wrap;
}

.account-membership + .account-membership[b-2jj9soq2r0] {
    margin-top: var(--space-2, 8px);
}

/* Åtgärderna hålls ihop och skjuts ut till högerkanten när raden rymmer det. */
.account-membership-actions[b-2jj9soq2r0] {
    display: flex;
    align-items: baseline;
    gap: var(--space-3, 12px);
    margin-inline-start: auto;
}

.account-membership-identity[b-2jj9soq2r0] {
    display: flex;
    align-items: center;
    gap: var(--space-1, 4px);
    flex-wrap: wrap;
    flex-grow: 1;
    min-width: 0;
}

/* Utfällningsknappen: kvadratisk touchyta ≥ 44 px (UI-RAMVERK). Chevronen pekar nedåt i
   vila och vänds uppåt när panelen är öppen — samma glyf, ingen andra ikon att hålla i
   synk. AppIcon är en egen komponent, så storleken måste sättas via ::deep. */
.account-expand[b-2jj9soq2r0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 44px;
    min-block-size: 44px;
    padding: 0;
}

.account-expand[b-2jj9soq2r0]  .app-icon {
    inline-size: 18px;
    block-size: 18px;
    transition: transform 0.15s ease;
}

.account-expand[aria-expanded="true"][b-2jj9soq2r0]  .app-icon {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .account-expand[b-2jj9soq2r0]  .app-icon { transition: none; }
}

/* Kontoåtgärderna: textknappar på en rad, den destruktiva avskild längst ut. */
.account-actions[b-2jj9soq2r0] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-3, 12px);
    padding-top: var(--space-2, 8px);
    border-top: 1px solid var(--color-border, transparent);
}

/* "Radera konto" raderar HELA kontot — en väsentligt allvarligare åtgärd än att bara ta bort
   ett enskilt klubbmedlemskap (account-membership-actions ovanför) eller de icke-destruktiva
   åtgärderna i samma rad. Den fick tidigare bara skjutas ut till högerkanten med
   margin-inline-start: auto, vilket i praktiken gjorde den till en fjärde, lika obetonad
   textlänk — en beställare klickade den och trodde att den bara tog bort ett medlemskap
   (KONTO-TA-BORT-UX-01). Den bryts nu ut till en egen rad med tydligt avstånd, en egen
   avskiljande linje i varningsfärg och fetstil, så den läses som en annan sorts åtgärd redan
   innan bekräftelsemodalen öppnas. */
.account-danger-action[b-2jj9soq2r0] {
    flex-basis: 100%;
    margin-inline-start: 0;
    margin-top: var(--space-2, 8px);
    padding-top: var(--space-2, 8px);
    border-top: 1px solid var(--color-danger, #c0362a);
    font-weight: 600;
}
/* /Pages/Admin/SpelarHantering.razor.rz.scp.css */
/* Sidspecifik layout. Ersätter de inline style="…" som fanns i markupen (F1) —
   inga färger deklareras här, alla ytor ärvs från app.css tokens. */

/* Sökpanelen är ett smalt formulär, inte en full sidbredd. */
.player-search[b-aj170ek7h7] {
    max-width: 520px;
}

/* Åtgärdsmenyn i spelarraden. Menyn positioneras absolut mot den här wrappern,
   så den måste vara positionerad. z-index lyfter menyn över efterföljande rader. */
.player-actions[b-aj170ek7h7] {
    position: relative;
}

.player-actions-menu[b-aj170ek7h7] {
    z-index: 1050;
    min-width: 190px;
}

/* Raden vars panel/dialog just nu är öppen markeras, precis som tabellens
   .table-active gjorde. Färgen kommer från tokens, aldrig hårdkodad. */
.player-row-active[b-aj170ek7h7] {
    background-color: var(--color-bg-surface, transparent);
    border-radius: var(--radius-sm, 8px);
    padding-inline: var(--space-2, 8px);
}
/* /Pages/Admin/SuperAdminDashboard.razor.rz.scp.css */
/* BITS-sökningens träfflista. Måtten låg som inline style på elementen; de flaggades av F1 när
   omflyttningen av sidan skrev om raderna, och hör ändå hemma här.

   z-index: listan svävar över formulärfälten under sig. Utan den ritas nästa fält ovanpå
   träffarna, och man kan se men inte klicka på dem. */
.bits-traffar[b-c9ervofi8i] {
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
}

/* touch-action: manipulation tar bort webbläsarens 300 ms dubbeltrycksfördröjning, så en träff
   väljs lika snabbt på mobil som med mus. */
.bits-traff[b-c9ervofi8i] {
    cursor: pointer;
    touch-action: manipulation;
}
/* /Pages/AvailabilityParts/CoachAvailabilityGrid.razor.rz.scp.css */
/* Tillgänglighetsvyn (UIUX-13) — mockup: klubb-lagtavling-tillganglighet-{desktop,mobile}.png.
   Alla färger via app.css-tokens; bakgrundsvariabler har fallback (UI-RAMVERK §2). */

.avail[b-2wh33o20x3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
}

/* ── Nyckeltalsrad ───────────────────────────────────────────────────────
   Mockupen visar 2×2 på mobil och 4 i bredd på desktop. auto-fit ger det utan
   media query, och minmax hindrar att siffran bryts. */
.avail-kpis[b-2wh33o20x3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3, 12px);
}

.avail-kpi[b-2wh33o20x3] {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-4, 16px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 12px);
    background-color: var(--color-bg-card);
    box-shadow: var(--shadow-card);
}

/* Varje nyckeltal bär en egen betydelsefärg i mockupen. Färgen ligger på en
   vänsterkant i stället för på ytan: den fungerar i både ljust och mörkt tema
   utan nya bakgrundstokens, och siffrans kontrast påverkas aldrig. */
.avail-kpi-yes[b-2wh33o20x3] { border-left: 4px solid var(--color-success); }
.avail-kpi-partial[b-2wh33o20x3] { border-left: 4px solid var(--color-warning); }
.avail-kpi-no[b-2wh33o20x3] { border-left: 4px solid var(--color-danger); }

.avail-kpi-value[b-2wh33o20x3] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-primary);
}

.avail-kpi-label[b-2wh33o20x3] {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* ── Kropp: tidskort + tabell ────────────────────────────────────────────
   Korten är egna komponenter (Card) men ligger som direkta barn här, så
   rutnätet placerar dem utan att scoped CSS behöver nå in i dem. */
.avail-body[b-2wh33o20x3] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4, 16px);
    align-items: start;
}

@media (min-width: 992px) {
    .avail-body[b-2wh33o20x3] { grid-template-columns: minmax(220px, 1fr) minmax(0, 3fr); }
}

.avail-time-list[b-2wh33o20x3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}

.avail-time-row[b-2wh33o20x3] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    min-height: 44px;
}

.avail-time-day[b-2wh33o20x3] { font-weight: 600; }

.avail-time-span[b-2wh33o20x3] {
    margin-left: auto;
    color: var(--color-text-muted);
}

/* ── Sök/filter ──────────────────────────────────────────────────────────
   UI-RAMVERK §2: kontroller i samma rad delar höjd. Både input och select är
   44px så raden aldrig ser ojämn ut. */
.avail-toolbar[b-2wh33o20x3] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    margin-bottom: var(--space-3, 12px);
}

.avail-search[b-2wh33o20x3] {
    flex: 1 1 220px;
    min-height: 44px;
}

.avail-filter[b-2wh33o20x3] {
    flex: 0 1 180px;
    min-height: 44px;
}

.avail-muted[b-2wh33o20x3] {
    color: var(--color-text-muted);
    margin: 0;
}

.avail-footnote[b-2wh33o20x3] {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin: 0;
}

.avail-quickreply[b-2wh33o20x3] {
    display: inline-block;
    margin-left: 0.375rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 999px;
    background: var(--color-surface-muted, rgba(127, 127, 127, 0.15));
    color: var(--color-text-muted);
    font-size: 0.75rem;
    white-space: nowrap;
}

.avail-manage-btns[b-2wh33o20x3] {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.avail-manage-error[b-2wh33o20x3] {
    color: var(--color-danger, #b4433a);
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Uttagningsläget (DeclinesOnly): nyckeltalsraden ersätts av EN rad, eftersom det bara finns
   ett tal som betyder något här — hur många som fallit ifrån. */
.avail-declines-head[b-2wh33o20x3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--color-danger);
    border-radius: var(--radius-sm, 6px);
    background: var(--color-bg-surface, transparent);
}

.avail-declines-count[b-2wh33o20x3] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.avail-declines-label[b-2wh33o20x3] {
    color: var(--color-text-muted);
}

/* Utfällningen ska läsas som en väg vidare, inte som en primär handling. */
.avail-showall[b-2wh33o20x3] {
    padding: 0.5rem 0 0;
    min-height: 44px;
    text-decoration: none;
}

.avail-showall:hover[b-2wh33o20x3],
.avail-showall:focus-visible[b-2wh33o20x3] {
    text-decoration: underline;
}
/* /Pages/BitsImport.razor.rz.scp.css */
/* UIUX-21/ADR-0072: stegrutnätet i BITS-synken. Varje steg är en knapp med sin egen
   "senast importerad"-stämpel under sig, i stället för den tidigare knapp-raden — annars
   går det inte att se vilken stämpel som hör till vilken datamängd. */

.bits-step-grid[b-4qig6xg5ls] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--space-3, 12px);
}

.bits-step[b-4qig6xg5ls] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 4px);
}

.bits-step-stamp[b-4qig6xg5ls] {
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--color-text-muted);
}

.bits-step-stamp-warn[b-4qig6xg5ls] {
    color: var(--color-warning);
    font-weight: 600;
}
.bits-order-option[b-4qig6xg5ls] { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.bits-order-option .form-check-input[b-4qig6xg5ls] { margin-top: 4px; }
.bits-order-option strong[b-4qig6xg5ls] { display: block; margin-bottom: 4px; }
.bits-queue-hint[b-4qig6xg5ls] { display: none; }
@media (max-width: 575px) { .bits-queue-hint[b-4qig6xg5ls] { display: block; } }
/* /Pages/BitsOpponentOrders.razor.rz.scp.css */
.bits-order-option[b-l6xxew9kq6] { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.bits-order-option .form-check-input[b-l6xxew9kq6] { margin-top: 4px; }
.bits-order-option strong[b-l6xxew9kq6] { display: block; margin-bottom: 4px; }
.bits-queue-hint[b-l6xxew9kq6] { display: none; }
@media (max-width: 575px) { .bits-queue-hint[b-l6xxew9kq6] { display: block; } }
/* /Pages/Chat.razor.rz.scp.css */
/* Chattlistans rad: konversationslänken och läsmarkeringen ligger som syskon.
   En knapp inuti en knapp är ogiltig markup och blir otillgänglig för tangentbord,
   så raden kan inte bara svälja åtgärden. */
.chat-list-row[b-d264f9gs04] {
    display: flex;
    align-items: stretch;
}

/* Åtgärden ska inte konkurrera med raden om uppmärksamheten — den är dämpad tills
   man pekar på eller tabbar till den. */
.chat-list-row-action[b-d264f9gs04] {
    flex: 0 0 auto;
    padding: 0 var(--space-3, 0.75rem);
    color: var(--color-text-muted, #5a6b73);
    opacity: 0.6;
    text-decoration: none;
}

.chat-list-row-action:hover:not(:disabled)[b-d264f9gs04],
.chat-list-row-action:focus-visible[b-d264f9gs04] {
    opacity: 1;
    color: var(--color-primary, #0c6272);
}

.chat-list-row-action:focus-visible[b-d264f9gs04] {
    outline: none;
    box-shadow: var(--focus-ring, 0 0 0 3px rgb(15 143 131 / 32%));
}

.chat-list-row-action:disabled[b-d264f9gs04] {
    opacity: 0.3;
}
/* /Pages/ChatConversation.razor.rz.scp.css */
/* Förhandsvisning av den bilaga som ligger och väntar på att skickas.
   Tidigare visades bara ett chip med filnamnet, och en inklistrad skärmdump heter
   "urklipp-20260814-103012.png" — man såg alltså inte vad man var på väg att skicka.
   Beställarönskemål 2026-08-14: "inmatningsrutan blir tillräckligt stor för att visa bilder". */
.chat-pending-attachment[b-soxz36vq4a] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

/* Höjden är taket som får skrivytan att växa. 200px räcker för att se motivet i en
   skärmdump utan att tränga undan tråden ovanför (som har max-height 65vh).
   object-fit: contain — en stående bild ska beskäras lika lite som en liggande. */
.chat-pending-image[b-soxz36vq4a] {
    max-width: 100%;
    max-height: 200px;
    border-radius: var(--radius-sm, 8px);
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));
    display: block;
    object-fit: contain;
}

/* Lägre tak på små skärmar: 200px bild + skrivfält + tangentbord lämnar annars nästan
   ingenting kvar av konversationen på en mobil i porträttläge. */
@media (max-height: 700px) {
    .chat-pending-image[b-soxz36vq4a] {
        max-height: 120px;
    }
}

/* ── Skrivytan ─────────────────────────────────────────────────────────────────────────
   Var tidigare tre fristående kontroller i rad: bifoga-knapp, ett ENRADS <input> och en
   skicka-knapp. Ett längre meddelande rullade i sidled i ett fält lika högt som en knapp,
   och man såg bara slutet av det man skrev.

   Nu ett sammanhållet kort med textytan överst och handlingarna under. */
.chat-composer[b-soxz36vq4a] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
    padding: var(--space-3, 12px);
    background: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border, #d9e1e5);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-card, none);
    margin-bottom: var(--space-3, 12px);
}

/* Växer med innehållet men aldrig förbi ~6 rader — därefter scrollar textytan i stället
   för att äta upp konversationen ovanför. field-sizing gör det utan JS där den stöds;
   min-height håller ändå en rimlig utgångshöjd i övriga webbläsare. */
.chat-composer-input[b-soxz36vq4a] {
    field-sizing: content;
    min-height: 2.5rem;
    max-height: 9rem;
    overflow-y: auto;
    resize: none;
    width: 100%;
    border: none;
    background: transparent;
    color: var(--color-text-body);
    font: inherit;
    line-height: 1.45;
    padding: var(--space-1, 4px) var(--space-1, 4px);
}

.chat-composer-input:focus[b-soxz36vq4a] {
    outline: none;
}

/* Fokusringen ritas på hela kortet i stället för på textytan — annars ser fältet
   omarkerat ut trots att det har fokus. */
.chat-composer:focus-within[b-soxz36vq4a] {
    border-color: var(--color-primary, #0c6272);
    box-shadow: var(--focus-ring, 0 0 0 3px rgb(15 143 131 / 32%));
}

.chat-composer-actions[b-soxz36vq4a] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
}

.chat-composer-count[b-soxz36vq4a] {
    margin-inline-start: auto;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* 44×44 touch-mål (design-system.md §7) på båda handlingarna. */
.chat-composer-attach[b-soxz36vq4a],
.chat-composer-send[b-soxz36vq4a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    border: 1px solid var(--color-border, #d9e1e5);
    background: var(--color-bg-surface, #eef2f4);
    color: var(--color-text-body);
    cursor: pointer;
    margin: 0;
}

.chat-composer-send[b-soxz36vq4a] {
    border-color: transparent;
    background: var(--color-primary, #0c6272);
    /* Samma token som .btn-primary använder (app.css). En lös vit hex hade dessutom brutit
       i mörkt tema, där primärfärgen är ljus. (Skriv inte ut hexkoden här — F2 skannar
       kommentarer också, precis som den gör med PR-nummer i razor-filer.) */
    color: var(--color-primary-btn-text, var(--color-white));
}

.chat-composer-send:disabled[b-soxz36vq4a] {
    opacity: 0.45;
    cursor: not-allowed;
}

.chat-composer-attach:focus-visible[b-soxz36vq4a],
.chat-composer-send:focus-visible[b-soxz36vq4a] {
    outline: none;
    box-shadow: var(--focus-ring, 0 0 0 3px rgb(15 143 131 / 32%));
}

/* Meddelandelistan är en egen scrollbehållare — det är den som scrollas till botten när
   konversationen öppnas. Måtten låg tidigare som inline style; flyttade hit när raden ändå
   rördes (F1 tillåter inga nya inline-styles, och en rörd rad räknas som ny). */
.chat-message-list[b-soxz36vq4a] {
    max-height: 65vh;
    overflow-y: auto;
}

/* "Nya meddelanden"-avdelaren (Slack/Discord-mönstret): visar var man slutade läsa.
   Linjen ritas med en pseudo-element-regel i stället för en <hr>, så texten kan sitta
   mitt i utan extra markup. Tokens, inga hexvärden — F2/F13 skannar båda. */
.chat-unread-divider[b-soxz36vq4a] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    margin: var(--space-3, 0.75rem) 0;
    color: var(--color-primary, #0c6272);
    font-size: 0.8125rem;
    font-weight: 600;
}

.chat-unread-divider[b-soxz36vq4a]::before,
.chat-unread-divider[b-soxz36vq4a]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-primary, #0c6272);
    opacity: 0.4;
}

.chat-unread-divider > span[b-soxz36vq4a] {
    white-space: nowrap;
}

/*  CHATT-01: bubblans underrad — tidsstämpel och anmälningsknapp.
    Storleken låg tidigare som inline style. F1 förbjuder nya sådana, och regeln har rätt:
    0.7rem upprepat på två element är en klass som saknades. */
.chat-message-meta[b-soxz36vq4a] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2, 0.5rem);
    margin-top: var(--space-1, 0.25rem);
    opacity: 0.75;
    font-size: 0.7rem;
}

/*  Anmälningsknappen ska vara nåbar men inte konkurrera med meddelandet.
    Ärver storleken från föräldern i stället för att upprepa den. */
.chat-report-button[b-soxz36vq4a] {
    padding: 0;
    font-size: inherit;
    text-decoration: none;
}

/* CHATT-NAMN-01: namnredigeringsfältet i rubriken. Måttet låg tidigare som inline style
   (F1 tillåter inga nya sådana i .razor). */
.chat-namn-input[b-soxz36vq4a] {
    max-width: 16rem;
}
/* /Pages/Club/ClubEconomy.razor.rz.scp.css */
/* Kontoplanens kontofält.

   Ett kontonummer är alltid fyra siffror. Ett fält som är brett som resten av tabellen får det
   att se ut som ett fritextfält, och kassören skriver då kontonamn i stället för nummer. */
.kontofalt[b-bvwb1mmyva] {
    max-width: 6rem;
}
/* /Pages/Club/ClubPushReach.razor.rz.scp.css */
/* Namn först, orsak nedtonad efter — raden ska gå att skumma på namnen. */
.reach-list[b-1im850kk22] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}

.reach-list li[b-1im850kk22] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2, 8px);
}

.reach-name[b-1im850kk22] {
    font-weight: 600;
}

.reach-meta[b-1im850kk22] {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* De som valt själva är inget att åtgärda — listan tonas ned så att blicken stannar
   på gruppen ovanför, som faktiskt går att göra något åt. */
.reach-list-muted .reach-name[b-1im850kk22] {
    font-weight: 400;
    color: var(--color-text-muted);
}
/* /Pages/ClubHome.razor.rz.scp.css */
.club-home-logo[b-3qjz51g5k7] {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 50%;
    flex-shrink: 0;
}
/* /Pages/Guardian/BarnChattar.razor.rz.scp.css */
/* CHATT-01 §4: barnets konversationer som vårdnadshavaren läser dem.
   Egna klasser i stället för inline-styles — F1 i architecture-fitness failar på nya
   inline-styles, och regeln finns för att hålla utseendet i CSS där det går att ändra
   på ett ställe. */

.meddelandetid[b-xgcoxtm73r] {
    font-size: .78rem;
}

/* Ett chattmeddelande kan innehålla en lång oavbruten sträng (en länk, ett licensnummer).
   Utan brytning spränger den kortet i sidled på telefon. */
.meddelandetext[b-xgcoxtm73r] {
    word-break: break-word;
}
/* /Pages/Laguttagning.razor.rz.scp.css */
/* CLUBROLES (2026-07-29) Fas 7: flyttat ut ur Laguttagning.razor:s inline <style>-block
   (plan §Fas 7 "skal-markup byggs om enligt mallen"). Klasserna renderas av barnkomponenter
   (RoundTeamCard/PrintableExport/PlayerDetailsModal), inte av Laguttagning.razor:s egen markup
   — Blazor-scopning når dem bara via ::deep. */
[b-khrpv7wuvf] .lineup-player-link {
    background: none;
    border: 0;
    color: var(--color-primary);
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-align: left;
    text-decoration: underline;
}

[b-khrpv7wuvf] .lineup-player-link:hover {
    color: var(--color-primary-border);
}

[b-khrpv7wuvf] .lineup-detail-metric-label {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
}

[b-khrpv7wuvf] .lineup-detail-board-list {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Klubbloggan i sidhuvudet — fast ruta så rubriken inte hoppar när logotypen laddas. */
.lineup-club-logo[b-khrpv7wuvf] {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

/* Förloppsindikatorn vid "generera alla lag". Bredden är dynamisk och måste ligga inline;
   höjden hör hemma här. */
.lineup-progress[b-khrpv7wuvf] {
    height: 6px;
}
/* /Pages/LaguttagningParts/LineupTeamTabs.razor.rz.scp.css */
/* Lagväljare för uttagningsguiden (UIUX-13).
   Mockup: klubb-lagtavling-laguttagningar-{desktop,mobile}.png. */

.lt[b-o48nazowrh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
}

/* Flikraden scrollar i sidled på mobil (mockupen visar en avhuggen fjärde flik med pil)
   i stället för att radbrytas — annars hoppar layouten när ett lag byter status. */
.lt-tabs[b-o48nazowrh] {
    display: flex;
    gap: var(--space-2, 8px);
    overflow-x: auto;
    padding-bottom: var(--space-1, 4px);
}

/* UI-RAMVERK §2: flikarna är knappar av samma slag och delar därför storlek —
   samma höjd, samma innerspace, samma textstorlek oavsett hur långt lagnamnet är. */
.lt-tab[b-o48nazowrh] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    flex: 0 0 auto;
    min-height: 44px;
    padding: var(--space-2, 8px) var(--space-4, 16px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 12px);
    background-color: var(--color-bg-card, #fff);
    color: var(--color-text-body);
    font-size: 1rem;
    white-space: nowrap;
    cursor: pointer;
}

.lt-tab:hover[b-o48nazowrh] { border-color: var(--color-primary); }

.lt-tab.active[b-o48nazowrh] {
    background-color: var(--color-primary-btn);
    border-color: var(--color-primary-border);
    color: var(--color-primary-btn-text);
}

.lt-tab-name[b-o48nazowrh] { font-weight: 600; }
.lt-tab-sep[b-o48nazowrh] { opacity: 0.6; }
.lt-tab-state[b-o48nazowrh] { font-size: 0.875rem; }

/* Sammanfattningsraden under flikarna. */
.lt-summary[b-o48nazowrh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 8px) var(--space-4, 16px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 12px);
    background-color: var(--color-bg-surface, #f6f8f9);
}

.lt-summary-count[b-o48nazowrh] {
    font-weight: 600;
    color: var(--color-primary);
}

.lt-summary-item[b-o48nazowrh] {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2, 8px);
}

.lt-summary-label[b-o48nazowrh] {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.lt-summary-value[b-o48nazowrh] { font-weight: 700; }

.lt-body[b-o48nazowrh] { min-width: 0; }

/* Icke-valda lag är monterade men dolda (se kommentaren i markupen). display:none tar dem
   även ur tabbordningen, så tangentbordsfokus fastnar aldrig i ett osynligt lag. */
.lt-body-hidden[b-o48nazowrh] { display: none; }
/* /Pages/LaguttagningParts/LineupWizard.razor.rz.scp.css */
/* Uttagningsguiden (UIUX-13). Mockup: matchcenter-laguttagning-seriematch-*.png. */

.lw[b-vsw50ervdl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
    margin-bottom: var(--space-5, 24px);
}

.lw-head[b-vsw50ervdl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}

.lw-title[b-vsw50ervdl] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
}

.lw-meta[b-vsw50ervdl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 8px);
}

.lw-panel[b-vsw50ervdl] { min-width: 0; }

.lw-hint[b-vsw50ervdl] {
    color: var(--color-text-muted);
    margin-bottom: var(--space-3, 12px);
}

/* ── Granska ─────────────────────────────────────────────────────────────
   Mockupens "Total spelstyrka / Reserver"-block. Spelstyrkesumman ligger medvetet inte här:
   den beräknas server-side och exponeras bara för behöriga (UIUX-03 §Synlighetsregel), och
   guiden ska inte räkna fram ett eget, potentiellt avvikande värde. */
.lw-review[b-vsw50ervdl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
}

.lw-totals[b-vsw50ervdl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3, 12px);
}

.lw-total[b-vsw50ervdl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1, 4px);
    padding: var(--space-4, 16px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 12px);
    background-color: var(--color-bg-surface, #f6f8f9);
}

.lw-total-label[b-vsw50ervdl] {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.lw-total-value[b-vsw50ervdl] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-primary);
}

/* Steg 3:s variant är ETT kort med en avdelare mellan talen (mockupen), inte två fristående
   rutor som i granskningssteget. */
.lw-totals-card[b-vsw50ervdl] {
    display: flex;
    gap: 0;
    margin-block-end: var(--space-3, 12px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 12px);
    background-color: var(--color-bg-surface, #f6f8f9);
}

.lw-totals-card .lw-total[b-vsw50ervdl] {
    flex: 1 1 0;
    min-inline-size: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

.lw-totals-card .lw-total + .lw-total[b-vsw50ervdl] {
    border-inline-start: 1px solid var(--color-border);
}

.lw-rostertoggle[b-vsw50ervdl] {
    margin-block-end: var(--space-3, 12px);
}

.lw-review-list[b-vsw50ervdl] {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: lw-player;
}

.lw-review-row[b-vsw50ervdl] {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    /* ≥44px radhöjd (UI-RAMVERK §3 Kortanatomi) */
    min-height: 44px;
    padding: var(--space-2, 8px) 0;
    border-bottom: 1px solid var(--color-border);
}

.lw-review-row:last-child[b-vsw50ervdl] { border-bottom: none; }

/* Numrerade spelplatser som i mockupen (1, 2, 3, 4 … R för reserv). */
.lw-review-row[b-vsw50ervdl]::before {
    counter-increment: lw-player;
    content: counter(lw-player);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: 700;
    font-size: 0.875rem;
}

.lw-review-name[b-vsw50ervdl] { flex: 1 1 auto; min-width: 0; }

.lw-review-heading[b-vsw50ervdl] {
    margin: var(--space-4, 16px) 0 var(--space-2, 8px);
    font-weight: 600;
    color: var(--color-text-muted);
}

.lw-review-warnings[b-vsw50ervdl] {
    margin: 0;
    padding-left: var(--space-5, 24px);
}

/* ── Stegnavigering ──────────────────────────────────────────────────────
   UI-RAMVERK §2: knappar av samma slag i samma rad delar storlek. Båda knapparna får
   därför identisk höjd, minsta bredd och textstorlek — den enda skillnaden är vikten
   (primär/sekundär), precis som i mockupen. */
.lw-nav[b-vsw50ervdl] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-3, 12px);
}

.lw-nav .btn[b-vsw50ervdl] {
    min-height: 44px;
    min-width: 12rem;
    font-size: 1rem;
    line-height: 1.5;
    padding: var(--space-2, 8px) var(--space-4, 16px);
}

@media (max-width: 575.98px) {
    /* Mobil: knapparna delar bredden lika — fortfarande samma storlek som varandra. */
    .lw-nav .btn[b-vsw50ervdl] { flex: 1 1 0; min-width: 0; }
}

/* Spelstyrkans hämtningstidpunkt. Talet är föränderligt — datumet är inte dekoration, det är
   det som gör totalen jämförbar. Därför alltid synligt, aldrig bara i en tooltip. */
.lw-total-note[b-vsw50ervdl] {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    line-height: 1.3;
}

.lw-total-warn[b-vsw50ervdl] {
    color: var(--color-warning);
}

.lw-total-unknown[b-vsw50ervdl] {
    color: var(--color-text-muted);
}
/* /Pages/LaguttagningParts/LineupWizardSteps.razor.rz.scp.css */
/* Stegindikator (UIUX-13). Mockup: matchcenter-laguttagning-seriematch-*.png. */

.lw-steps[b-fqoo8r9al1] {
    padding: var(--space-4, 16px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 12px);
    background-color: var(--color-bg-surface, #f6f8f9);
}

.lw-steps-list[b-fqoo8r9al1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-1, 4px);
    list-style: none;
    margin: 0;
    padding: 0;
}

.lw-step[b-fqoo8r9al1] {
    display: flex;
    flex: 1 1 0;
    justify-content: center;
    position: relative;
    min-width: 0;
}

/* Förbindelselinjen mellan stegen (mockupens streck). Ritas som ett pseudo-element på
   markörens vertikala mitt, så den följer markörens storlek i båda brytpunkterna. */
.lw-step + .lw-step[b-fqoo8r9al1]::before {
    content: "";
    position: absolute;
    top: 1.25rem;
    right: 50%;
    left: -50%;
    height: 2px;
    background-color: var(--color-border);
}

.lw-step-done + .lw-step[b-fqoo8r9al1]::before,
.lw-step-current[b-fqoo8r9al1]::before {
    background-color: var(--color-primary);
}

.lw-step-btn[b-fqoo8r9al1] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2, 8px);
    /* Hela steget är klickytan; ≥44px (UI-RAMVERK §6). */
    min-height: 44px;
    min-width: 44px;
    padding: 0 var(--space-1, 4px);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    font: inherit;
}

.lw-step-btn:disabled[b-fqoo8r9al1] { cursor: default; }

.lw-step-marker[b-fqoo8r9al1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 2px solid var(--color-border);
    border-radius: 50%;
    background-color: var(--color-bg-card, #fff);
    font-weight: 700;
}

.lw-step-label[b-fqoo8r9al1] {
    font-size: 0.875rem;
    text-align: center;
    line-height: 1.2;
}

.lw-step-done .lw-step-marker[b-fqoo8r9al1] {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Bocken under cirkeln för klara steg (mockupen). Den får inte påverka radhöjden när den
   saknas, därför absolut positionerad under markören i stället för som ett flödesobjekt. */
.lw-step-check[b-fqoo8r9al1] {
    position: absolute;
    top: 2.75rem;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    color: var(--color-primary);
}

.lw-step-current .lw-step-btn[b-fqoo8r9al1] {
    color: var(--color-text-body);
    font-weight: 600;
}

.lw-step-current .lw-step-marker[b-fqoo8r9al1] {
    border-color: var(--color-primary-border);
    background-color: var(--color-primary-btn);
    color: var(--color-primary-btn-text);
}

.lw-steps-caption[b-fqoo8r9al1] {
    margin: var(--space-3, 12px) 0 0;
    text-align: center;
    font-weight: 600;
    color: var(--color-primary);
}

/* Mobil: bara numrerade cirklar + sammanfattningsraden under, som i mockupen. */
@media (max-width: 767.98px) {
    .lw-step-label[b-fqoo8r9al1] { display: none; }
    .lw-step-marker[b-fqoo8r9al1] { width: 2.25rem; height: 2.25rem; }
    .lw-step + .lw-step[b-fqoo8r9al1]::before { top: 1.125rem; }
    .lw-step-check[b-fqoo8r9al1] { top: 2.5rem; }

    /* Ge raden plats för bocken under cirklarna, annars klipps den mot listans underkant. */
    .lw-steps-list[b-fqoo8r9al1] { padding-block-end: 1.5rem; }
}

/* Desktop: etiketterna bär stegen, sammanfattningsraden är då redundant. */
@media (min-width: 768px) {
    .lw-steps-caption[b-fqoo8r9al1] { display: none; }
}
/* /Pages/LaguttagningParts/RoundTeamCard.razor.rz.scp.css */
/* Kolumn- och radmått som tidigare låg som inline styles (UI-RAMVERK §2). */
.lineup-nowrap[b-kii45pv2jf] {
    white-space: nowrap;
}

.lineup-col-icon[b-kii45pv2jf] {
    width: 40px;
}

/* Beställarönskemål 2026-08-14: reserverna är inte banpar och ska stå en per rad i stället
   för att flyta ihop till en enda mening under partabellen. Raden måste tåla att licens-
   numret (BITS-id) står bredvid namnet, därav flex-wrap i stället för nowrap. */
.lineup-reserve-row[b-kii45pv2jf] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.15rem 0;
}

/* Bil-krysset på reservraden. Låg tidigare som inline style="width/height" (UI-RAMVERK §2). */
.lineup-reserve-check[b-kii45pv2jf] {
    width: 1.1em;
    height: 1.1em;
}

/* Samlingstid (steg 5 "Lås & publicera"). Måttet låg tidigare som inline style på inputen. */
.lineup-time-input[b-kii45pv2jf] {
    max-width: 110px;
}

/* Lagledarväljaren (LAGLEDARE-01). Bredare än tidsrutan — den bär namn, inte fyra siffror —
   men taket hindrar den från att sträcka ut kortrubriken på smala skärmar. */
.lineup-leader-select[b-kii45pv2jf] {
    max-width: 240px;
}

.lineup-samling[b-kii45pv2jf] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.lineup-samling-note[b-kii45pv2jf] {
    font-size: 0.8125rem;
    color: var(--color-text-muted, inherit);
}

/* Förklaringen till varför låsknappen är spärrad. Alltid SYNLIG text — ett title-attribut
   visas aldrig på mobil, och en spärrad knapp utan synlig orsak är obegriplig. */
.lineup-samling-warn[b-kii45pv2jf] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-warning, inherit);
}

/* Upplysning om återställt utkast. Varnande men inte alarmerande — inget är trasigt, coachen
   har osparat arbete som skiljer sig från den sparade uttagningen. */
.lineup-draft-notice[b-kii45pv2jf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    margin-bottom: 0.75rem;
    border-left: 4px solid var(--color-warning, #b26a00);
    border-radius: var(--radius-sm, 8px);
    background: var(--color-bg-surface, transparent);
    font-size: 0.875rem;
}

@media (max-width: 480px) {
    .lineup-draft-notice[b-kii45pv2jf] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Pages/MatchcenterHome.razor.rz.scp.css */
/* Matchcenters landningssida (UIUX-11) — Mönster B enligt UI-RAMVERK §3.
   Mockup: matchcenter-desktop-layout-v2.png / matchcenter-mobile-layout-v2.png.

   Layouten är ett namngivet rutnät så att mobil- och desktopordningen kan skilja sig utan
   duplicerad markup:
     mobil    → lagväljare, nästa match, uttagningsarbete, flikar (mockupens mobilordning)
     desktop  → lagväljare + nästa match på översta raden, flikar till vänster,
                uttagningsarbete som fast sidokort till höger.
   Alla färger kommer från app.css-tokens; bakgrundsvariabler har fallback (UI-RAMVERK §2). */

.mc-home[b-tnn8os60p7] {
    display: grid;
    gap: var(--space-4, 16px);
    grid-template-areas:
        "head"
        "next"
        "rail"
        "main";
    grid-template-columns: minmax(0, 1fr);
}

.mc-home-head[b-tnn8os60p7] {
    grid-area: head;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-4, 16px);
}
.mc-home-next[b-tnn8os60p7] { grid-area: next; }
.mc-home-rail[b-tnn8os60p7] { grid-area: rail; }
.mc-home-main[b-tnn8os60p7] { grid-area: main; min-width: 0; }

@media (min-width: 992px) {
    .mc-home[b-tnn8os60p7] {
        grid-template-areas:
            "head next"
            "main rail";
        grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
        align-items: start;
    }
}

/* ── Lagväljare (mockupens A-lag/B-lag/F-lag-rad) ───────────────────────── */

.mc-team-picker[b-tnn8os60p7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}

.mc-team-picker-label[b-tnn8os60p7] {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.mc-team-picker-options[b-tnn8os60p7] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
}

.mc-team-chip[b-tnn8os60p7] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    /* ≥44px touchyta (UI-RAMVERK §6 / WCAG 2.5.5) */
    min-height: 44px;
    padding: var(--space-2, 8px) var(--space-4, 16px);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background-color: var(--color-bg-card);
    color: var(--color-text-body);
    font-weight: 500;
    cursor: pointer;
}

.mc-team-chip:hover[b-tnn8os60p7] { border-color: var(--color-primary); }

.mc-team-chip.active[b-tnn8os60p7] {
    background-color: var(--color-primary-btn);
    border-color: var(--color-primary-border);
    color: var(--color-primary-btn-text);
    font-weight: 600;
}

.mc-team-chip-icon[b-tnn8os60p7] { width: 1.1em; height: 1.1em; }

/* ── Nästa match ───────────────────────────────────────────────────────── */

.mc-next-body[b-tnn8os60p7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 12px);
}

.mc-next-teams[b-tnn8os60p7] { min-width: 0; }

.mc-next-actions[b-tnn8os60p7] {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    flex-wrap: wrap;
}

/* ── Uttagningsarbete-kortet ───────────────────────────────────────────── */

/* Varningsraderna renderas av CardRow (egen komponent) — scoped CSS når inte barnets rot
   utan ::deep (UI-RAMVERK §2, reference_blazor_scoped_css_navlink_deep). Mockupens röda
   varningston återges som en kantmarkering i --color-danger; ingen ny färgtoken införs. */
.mc-worklist[b-tnn8os60p7]  .mc-worklist-alert {
    border-left: 3px solid var(--color-danger);
    border-radius: var(--radius-md, 12px);
    padding-left: var(--space-3, 12px);
}

.mc-worklist-clear[b-tnn8os60p7] {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin: 0;
}

.mc-worklist-cta[b-tnn8os60p7] {
    display: block;
    width: 100%;
    margin-top: var(--space-3, 12px);
    text-align: center;
}
/* /Pages/MinaResultat.razor.rz.scp.css */
/* Mina resultat — layout enligt mockupen mina-resultat-mobile-proposal-v2.
   Alla färger via tokens (F2: ingen ny hex). */

/* UIUX-22: samma borderlösa rubrikväljare som UIUX-18 byggde, men den handrullade <select>:en
   är nu den delade SeasonSelector-komponenten — därför ::deep. */
.result-season[b-z92vfq244y]  select {
    font-size: 1.05rem;
    font-weight: 600;
    border: none;
    background-color: transparent;
    padding-inline-start: 0;
    color: var(--color-text-primary);
}

/* ── Sammanfattningskort: KPI-rad + BITS + formkurva ─────────────────────────── */

.result-kpi-row[b-z92vfq244y] {
    display: flex;
    align-items: stretch;
}

.result-kpi[b-z92vfq244y] {
    flex: 1 1 0;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-block: var(--space-2, 8px);
    text-align: center;
}

/* Tunn avdelare mellan nyckeltalen, som i mockupen — inte en ram runt varje tal. */
.result-kpi + .result-kpi[b-z92vfq244y] {
    border-inline-start: 1px solid var(--color-border);
}

.result-kpi-value[b-z92vfq244y] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text-primary);
}

.result-kpi-label[b-z92vfq244y] {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.result-summary-divider[b-z92vfq244y] {
    block-size: 1px;
    background: var(--color-border);
    margin-block: var(--space-2, 8px);
}

.result-summary-heading[b-z92vfq244y] {
    margin: 0;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.result-form-header[b-z92vfq244y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 8px);
    margin-block-end: var(--space-1, 4px);
}

.result-form-title[b-z92vfq244y] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.result-form-delta[b-z92vfq244y] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 1rem;
    font-weight: 700;
}

.result-form-delta.positive[b-z92vfq244y] {
    color: var(--color-success);
}

.result-form-delta.negative[b-z92vfq244y] {
    color: var(--color-danger);
}

/* Chevronen roterad till en upp-/nedpil (mockupens ↑/↓). */
.result-form-arrow[b-z92vfq244y] {
    display: inline-flex;
}

.result-form-delta.positive .result-form-arrow[b-z92vfq244y] {
    transform: rotate(-90deg);
}

.result-form-delta.negative .result-form-arrow[b-z92vfq244y] {
    transform: rotate(90deg);
}

/* ── Hopfällt periodfilter ───────────────────────────────────────────────────── */

.result-period-summary[b-z92vfq244y] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    min-block-size: 44px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--color-text-primary);
    list-style: none;
}

.result-period-summary[b-z92vfq244y]::-webkit-details-marker {
    display: none;
}

/* Egen chevron som pekar nedåt/uppåt, eftersom standardmarkören är bortdold ovan. */
.result-period-summary[b-z92vfq244y]::after {
    content: "";
    inline-size: 8px;
    block-size: 8px;
    margin-inline-start: auto;
    border-inline-end: 2px solid var(--color-nav-inactive);
    border-block-end: 2px solid var(--color-nav-inactive);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.result-period-details[open] > .result-period-summary[b-z92vfq244y]::after {
    transform: rotate(-135deg);
}

/* ── Resultatlistan ──────────────────────────────────────────────────────────── */

.result-list-heading[b-z92vfq244y] {
    margin-block: var(--space-4, 16px) var(--space-2, 8px);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.result-row[b-z92vfq244y] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-3, 12px);
    align-items: start;
}

.result-main[b-z92vfq244y] {
    min-inline-size: 0;
}

.result-title-line[b-z92vfq244y] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    flex-wrap: wrap;
}

.result-name[b-z92vfq244y] {
    font-weight: 600;
    color: var(--color-text-primary);
}

.result-date[b-z92vfq244y] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* Serierna som en jämn sifferrad — mockupens "201 188 213 205". */
.result-scores[b-z92vfq244y] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-block-start: var(--space-2, 8px);
}

.result-aside[b-z92vfq244y] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: end;
}

.result-total-line[b-z92vfq244y] {
    display: flex;
    align-items: center;
    gap: var(--space-1, 4px);
}

/* Chevronen är mockupens navigeringsaffordans till hela resultattabellen.
   Den är smal i LAYOUTEN (24 px) men har en osynligt utvidgad träffyta via ::after, så
   WCAG 2.5.5:s 44 px uppfylls utan att chevronen äter 44 px av radens bredd — annars
   krympte mittkolumnen så mycket att fyra serier bröts till "194 221 203 / 216". */
.result-chevron[b-z92vfq244y] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 24px;
    block-size: 24px;
    color: var(--color-nav-inactive);
}

.result-chevron[b-z92vfq244y]::after {
    content: "";
    position: absolute;
    inset: -10px;
}

.result-chevron:focus-visible[b-z92vfq244y] {
    outline: none;
    border-radius: var(--radius-sm, 8px);
    box-shadow: var(--focus-ring, 0 0 0 3px rgb(15 143 131 / 32%));
}

.result-total[b-z92vfq244y] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text-primary);
}

.result-context[b-z92vfq244y] {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.result-footer[b-z92vfq244y] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    margin-block-start: var(--space-3, 12px);
    padding-block-start: var(--space-2, 8px);
    border-block-start: 1px solid var(--color-border);
}
/* /Pages/MyPage.razor.rz.scp.css */
.mypage-dashboard[b-ywa0h0jodv] {
    overflow-x: hidden;
    padding-bottom: calc(1.5rem + var(--safe-bottom));
}

.mypage-tabs[b-ywa0h0jodv] {
    background: var(--color-bg-body);
    border-bottom: 2px solid var(--color-border);
    top: 0;
    z-index: 100;
}

/* Minst 44 px hög touch-target på flikarna (WCAG 2.5.5 / Apple HIG) */
.mypage-tabs .nav-link[b-ywa0h0jodv] {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 640.98px) {
    .mypage-dashboard[b-ywa0h0jodv] {
        min-height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}
/* /Pages/SpectoV2/SpectoV2ReportPage.razor.rz.scp.css */
.specto-shot-table[b-pshvfj6o4h] {
    max-height: 32rem;
}

/* Sticky identitetskolumn (M8, DESIGNSYSTEM-TOKENS-TEAL-PETROL.md): hanteras
   av den delade, opt-in .sticky-id-col-klassen (app.css) på <table> i stället
   för en egen bespoke regel — samma mönster/token som övriga breda tabeller. */

.specto-shot-table tbody tr[role="button"]:focus-visible[b-pshvfj6o4h] {
    outline: 3px solid var(--bs-primary);
    outline-offset: -3px;
}

/* Uppföljningsserien läses kolumnvis — driften i pass 3 jämförs med pass 1 och 2 på raderna
   ovanför. Med proportionella siffror hamnar decimaltecknen på olika ställen och kolumnen
   slutar gå att skanna. */
.uppfoljning-varde[b-pshvfj6o4h] {
    font-variant-numeric: tabular-nums;
}

/* Ett mätvärde per kort: namn, medianen stort, kurvan kast för kast, spannet under. Samma
   skal som KpiTile (token-driven) så att korten inte ser ut som en tredje sorts ruta. */
.specto-matvarde[b-pshvfj6o4h] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 4px);
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 12px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
}

.specto-matvarde-median[b-pshvfj6o4h] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.specto-matvarde-rad[b-pshvfj6o4h] {
    font-variant-numeric: tabular-nums;
}
/* /Pages/Spelarprofil.razor.rz.scp.css */
/* Spelarprofil (UIUX-22) — de två måtten som tidigare satt som inline styles i markupen
   (viktfältets bredd och motståndarkolumnens trunkeringsbredd). Inline styles failar
   fitnessgaten F1/F2; UI-RAMVERK §6 kräver att de bor i CSS. */

.arsenal-weight[b-szgo6coyip] {
    max-width: 6rem;
}

.opponent-cell[b-szgo6coyip] {
    max-width: 9rem;
}
/* /Pages/StaffingSchedule.razor.rz.scp.css */
.staffing-text[b-wo4gvnbmno] { white-space: pre-wrap; }
.staffing-slot[b-wo4gvnbmno] { overflow-wrap: anywhere; }
/* /Pages/Tillganglighet.razor.rz.scp.css */
/* /tillganglighet (UIUX-13) — mockup: klubb-lagtavling-tillganglighet-{desktop,mobile}.png. */

.tg-meta[b-tse1gupvyf] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    margin-bottom: var(--space-3, 12px);
}

.tg-lede[b-tse1gupvyf] {
    color: var(--color-text-muted);
    margin-bottom: var(--space-4, 16px);
}

.tg-picker[b-tse1gupvyf] { margin-bottom: var(--space-4, 16px); }

.tg-select[b-tse1gupvyf] {
    max-width: 32rem;
    min-height: 44px;
}

/* Informationsbanner (mockupens "Svaren gäller kandidatpoolen för Lag 1, 2 och 3"). */
.tg-banner[b-tse1gupvyf] {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    margin-bottom: var(--space-4, 16px);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-md, 12px);
    background-color: var(--color-bg-surface);
}

.tg-actions[b-tse1gupvyf] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3, 12px);
    justify-content: flex-end;
    margin-top: var(--space-4, 16px);
}

/* UI-RAMVERK §2: knappar av samma slag delar storlek. Handlingsraden nedan kan växa med
   fler knappar (export, påminnelse) — låt dem dela höjd och minsta bredd från start så att
   raden inte blir ojämn när nästa knapp läggs till. */
.tg-actions .btn[b-tse1gupvyf] {
    min-height: 44px;
    min-width: 12rem;
}
/* /Pages/Training/LogTraining.razor.rz.scp.css */
/* Serie-rutnät: kompakta poängkort i stället för fullbreda fält i en lång stapel.
   Mobile-first — auto-fill ger ~2 kort på smal telefon, fler på bredare skärm. */
.serie-grid[b-fzxyzilve2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: .6rem;
}

.serie-cell[b-fzxyzilve2] {
    position: relative;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e3e3e3);
    border-radius: 12px;
    padding: .45rem .65rem .5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    transition: border-color .12s ease, box-shadow .12s ease;
}

.serie-cell:focus-within[b-fzxyzilve2] {
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 2px rgba(13, 110, 253, .15);
}

.serie-cell-no[b-fzxyzilve2] {
    display: block;
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    color: var(--bs-secondary-color, #8a8a8a);
}

.serie-input[b-fzxyzilve2] {
    border: 0;
    background: transparent;
    width: 100%;
    padding: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bs-body-color, #1b1b1b);
}

.serie-input:focus[b-fzxyzilve2] {
    outline: none;
    box-shadow: none;
}

/* Dölj number-spinnarna — de skräpar ner det stora siffer-fältet. */
.serie-input[b-fzxyzilve2]::-webkit-outer-spin-button,
.serie-input[b-fzxyzilve2]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.serie-input[type=number][b-fzxyzilve2] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Diskret borttagning i hörnet — syns men tar ingen layout-plats. */
.serie-remove[b-fzxyzilve2] {
    position: absolute;
    top: .15rem;
    right: .25rem;
    border: 0;
    background: transparent;
    color: #c0392b;
    font-size: 1.15rem;
    line-height: 1;
    padding: .1rem .25rem;
    opacity: .45;
    transition: opacity .12s ease;
}

.serie-remove:hover[b-fzxyzilve2],
.serie-remove:focus[b-fzxyzilve2] {
    opacity: 1;
}

/* "Lägg till"-kortet ser ut som en tom plats i rutnätet. */
.serie-add[b-fzxyzilve2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    min-height: 64px;
    border: 1px dashed var(--bs-border-color, #c9c9c9);
    border-radius: 12px;
    background: transparent;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .8rem;
    font-weight: 600;
    transition: border-color .12s ease, color .12s ease, background .12s ease;
}

.serie-add:hover[b-fzxyzilve2] {
    border-color: var(--bs-primary, #0d6efd);
    color: var(--bs-primary, #0d6efd);
    background: rgba(13, 110, 253, .04);
}

.serie-add-plus[b-fzxyzilve2] {
    font-size: 1.3rem;
    line-height: 1;
}
/* /Pages/Training/TrainingOverview.razor.rz.scp.css */
/* Spelarens träningsöversikt — layout enligt mockupen spelare-traning-oversikt.
   Alla färger via tokens (F2 tillåter ingen hex här). */

.training-title[b-kt91pqvujc] {
    margin-block-end: var(--space-3, 12px);
    font-weight: 700;
}

/* Flikraden återanvänder segmentkontrollens utseende (.segmented/.segmented-option i
   SegmentedControl-komponentens CSS är scoped, därför upprepas de bärande reglerna för
   ankarvarianten här — det här är länkar mellan tre sidor, inte en styrd radiogrupp). */
.training-tabs[b-kt91pqvujc] {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin-block-end: var(--space-3, 12px);
    border-radius: var(--radius-lg, 16px);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
}

.training-tabs .segmented-option[b-kt91pqvujc] {
    flex: 1 1 0;
    min-inline-size: 0;
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.35rem;
    border-radius: var(--radius-md, 12px);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.training-tabs .segmented-option.active[b-kt91pqvujc] {
    background: var(--color-primary-btn);
    color: var(--color-primary-btn-text);
    box-shadow: var(--relief-shadow);
}

/* ── Primärhandlingen: bred knapp med chevron längst till höger ─────────────── */

.training-cta-wrap[b-kt91pqvujc] {
    position: relative;
    margin-block-end: var(--space-3, 12px);
}

.training-cta[b-kt91pqvujc] {
    inline-size: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 8px);
    min-block-size: 52px;
    font-size: 1.05rem;
    font-weight: 600;
}

/* ── Statistikremsan ───────────────────────────────────────────────────────── */

.training-stats[b-kt91pqvujc] {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    margin-block-end: var(--space-4, 16px);
}

.training-stat[b-kt91pqvujc] {
    flex: 1 1 0;
    min-inline-size: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    font-size: 0.9rem;
    color: var(--color-text-body);
}

/* Tunn avdelare mellan de två talen, precis som i mockupen. */
.training-stat + .training-stat[b-kt91pqvujc] {
    padding-inline-start: var(--space-3, 12px);
    border-inline-start: 1px solid var(--color-border);
}

.training-stat strong[b-kt91pqvujc] {
    font-size: 1.15rem;
    color: var(--color-text-primary);
}

/* ── Senaste träningspass ──────────────────────────────────────────────────── */

.training-section-title[b-kt91pqvujc] {
    margin-block: var(--space-4, 16px) var(--space-2, 8px);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.training-filter-summary[b-kt91pqvujc] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    min-block-size: 44px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    list-style: none;
}

.training-filter-summary[b-kt91pqvujc]::-webkit-details-marker {
    display: none;
}

.training-filter-details[b-kt91pqvujc] {
    margin-block-end: var(--space-2, 8px);
}

/* Listan är ETT kort med rader, inte ett kort per pass (mockupen).
   Ikonplattan och chevronen spänner över BÅDA raderna, så sifferraden kan lägga sig under
   passets namn utan att chevronen knuffas ned på en egen rad under listan. */
.training-history-card .training-entry[b-kt91pqvujc] {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-1, 4px) var(--space-3, 12px);
    padding-block: var(--space-3, 12px);
}

.training-entry > .relief-icon[b-kt91pqvujc] {
    grid-column: 1;
    grid-row: 1 / -1;
}

.training-entry-chevron[b-kt91pqvujc] {
    grid-column: 3;
    grid-row: 1 / -1;
}

.training-entry + .training-entry[b-kt91pqvujc] {
    border-block-start: 1px solid var(--color-border);
}

.training-entry-main[b-kt91pqvujc] {
    min-inline-size: 0;
}

.training-entry-link[b-kt91pqvujc] {
    padding: 0;
    border: none;
    background: transparent;
    font: inherit;
    font-weight: 600;
    color: var(--color-text-primary);
    text-align: start;
    cursor: pointer;
}

.training-entry-date[b-kt91pqvujc] {
    font-weight: 400;
    color: var(--color-text-muted);
}

.training-entry-scores[b-kt91pqvujc] {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-body);
}

.training-entry-avg[b-kt91pqvujc] {
    color: var(--color-text-muted);
}

.training-entry-avg strong[b-kt91pqvujc] {
    color: var(--color-text-primary);
}

.training-entry-chevron[b-kt91pqvujc] {
    display: inline-flex;
    color: var(--color-nav-inactive);
}

.training-more-link[b-kt91pqvujc] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-block-size: 44px;
    font-weight: 600;
    text-decoration: none;
}