/* ============================================
   Bowling Platform — Design Tokens
   ============================================ */
:root {
    /* ------------------------------------------------------------------
       Yttokens — default light (UIUX-PR03).
       Dessa MÅSTE ligga i bas-:root. Tidigare fanns de bara i
       @media(prefers-color-scheme: dark) och [data-theme]-blocken, vilket
       gjorde dem odefinierade i default-light (inget data-theme, ljust
       system). Konsumenter utan var()-fallback fick då transparent
       bakgrund. Se docs/CONTEXT/THEME_TOKENS.md.
       ------------------------------------------------------------------ */
    --color-bg-body:        #f6f8f9;
    --color-bg-card:        #ffffff;
    --color-bg-surface:     #eef2f4;
    --color-bg-input:       #ffffff;
    --color-text-body:      #10242e;
    --color-border:         #d9e1e5;
    --color-bottom-nav-bg:  #ffffff;

    /* Tabellrad som markerar reserv (Analysvy) — ersätter inline #cfe2ff */
    --color-row-reserve-bg: #cfe2ff;

    /* Textmarkering (::selection). MÅSTE finnas i bas-:root: utan data-theme är det här
       enda definitionen, och webbläsarens standardmarkering är en mycket ljus platta som
       döljer ljus text på mörk botten. Bakgrund OCH textfärg sätts alltid i par. */
    --color-selection-bg:   #bfdde6;
    --color-selection-text: #06202a;

    /* Kontextuella tabellrader (.table-warning m.fl.). Bootstrap ger dem en fast LJUS ton och
       sätter color:#000 på <tr> — men den färgen ÄRVS bara, och i mörkt tema sätter vi färg
       direkt på cellen med !important. Arv förlorar, så markerade rader blev ljus platta med
       ljus text: oläsliga precis där de ska dra blicken till sig (beställarrapport 2026-08-14,
       Lagform i Matchcenter). Ljusa värden = bootstraps egna, så ljust tema är oförändrat. */
    --color-row-warning-bg:   #fff3cd;
    --color-row-success-bg:   #d1e7dd;
    --color-row-primary-bg:   #cfe2ff;
    --color-row-secondary-bg: #e2e3e5;
    --color-row-danger-bg:    #f8d7da;
    --color-row-info-bg:      #cff4fc;

    /* Primärfärger — teal/petrol (DESIGNSYSTEM-TOKENS-TEAL-PETROL.md, T1) */
    --color-primary:        #0c6272;   /* loading ring, bottom-nav active, fokus-outline */
    --color-primary-btn:    #0c6272;   /* .btn-primary bg — 6.99:1 vit text (AA) */
    --color-primary-border: #0a4a5f;   /* .btn-primary border — 9.73:1 */
    /* Hover/fokus på primärknappen. I ljust tema MÖRKARE (kantfärgen, 9.73:1 mot vit text);
       i mörkt tema tvärtom LJUSARE, se temablocken. Utan den här regeln slog Bootstraps egen
       .btn-primary:hover igenom — högre specificitet än vår .btn-primary — och varje
       primärknapp i appen blev blå (#0b5ed7) så fort muspekaren nuddade den. */
    --color-primary-btn-hover: var(--color-primary-border);
    --color-primary-focus:  #258cfb;   /* focus box-shadow */
    --color-link:           #0c6272;   /* a, .btn-link — 6.99:1 */
    --color-primary-btn-text: #ffffff; /* .btn-primary text — ljust tema */

    /* Dekor/ikonfyllnad — klarar bara 3.98:1, får ALDRIG bära text eller vara knappbakgrund */
    --color-accent:         #0f8f83;

    /* Mjuk primärton — chip-/tagg-bakgrund (Chip.razor); text ovanpå = --color-primary */
    --color-primary-soft:   #e2eff2;

    /* Avatar-palett (Avatar.razor .avatar-palette-N) — mjuka toner till redan
       AA-vetted --color-info/-warning/-success (se nedan), samma teknik som
       --color-primary-soft ovan. Bara till dekorativ initial-bakgrund. */
    --color-avatar-info-soft:    #e1ebf7;
    --color-avatar-warning-soft: #f4ead9;
    --color-avatar-success-soft: #dcf0e3;

    /* Formulär-kantfärg — SC 1.4.11 (≥ 3:1 mot fält/bakgrund) */
    --color-input-border:   #6c757d;

    /* Kontextuella outline-knappar — AA-säkra ersättare för Bootstrap-defaults.
       Ljusa värden = Bootstrap-standard (godkända mot vitt); mörka teman får
       ljusare tinter (Bootstrap-defaults faller till 1–3.6:1 mot mörk bg). */
    --color-info:                   #2c6ab0;  /* mörkad för text, 5.53:1 */
    --color-warning:                #8a5a12;  /* mörkad för text, 5.91:1 */
    --color-success:                #0f7a3e;  /* mörkad för text, 5.42:1 */
    --color-danger:                 #c0362a;  /* mörkad för text, 5.52:1 */
    --color-outline-primary:        #0d6efd;  /* outline-primary, ljust (4.51:1 mot vitt) */
    --color-outline-secondary:      #6c757d;  /* outline-secondary, ljust */
    --color-outline-dark:           #212529;  /* outline-dark, ljust */
    --color-outline-success:        #198754;
    --color-outline-danger:         #dc3545;
    --color-outline-contrast-text:  #ffffff;  /* text vid ifylld hover (ljust tema) */

    /* TopNav gradient — brand-900 → brand-800 */
    --color-nav-start:      #07364a;  /* gradient vänster — 11.9:1 vit text */
    --color-nav-end:        #0a4a5f;  /* gradient höger — 9.73:1 vit text */

    /* Dropdown */
    --color-nav-dropdown-hover-bg:   #f0f4ff; /* dd-item:hover bg */
    --color-nav-dropdown-active-bg:  #e8f0fe; /* dd-item.active bg */
    --color-nav-dropdown-hover-text: #0c6272; /* dd-item:hover och .active text */

    /* Neutaler */
    --color-white:          #fff;      /* bakgrunder, btn-primary text */
    --color-text-dark:      #212529;   /* dd-item text */
    --color-text-primary:   #10242e;   /* auth-loading-title */
    --color-text-muted:     #5c6d75;   /* auth-loading-text — 5.39:1 */
    --color-code:           #c02d76;   /* <code>-tag färg */
    --color-separator:      #d9e1e5;   /* border, dividers */
    --color-track:          #e0e0e0;   /* loading-ring bakgrundsspår */

    /* Status */
    --color-valid:          #26b050;   /* valid input outline */
    --color-error-bg:       #b32121;   /* .blazor-error-boundary bg */

    /* BottomNav */
    --color-nav-inactive:   #5c636b;   /* bottom-nav-item inaktiv — AA-marginal (6.2:1) */

    /* ------------------------------------------------------------------
       Strukturtokens (T1) — samma --*-namnkonvention, inget bp-prefix.
       Källa: DESIGNSYSTEM-TOKENS-TEAL-PETROL.md §Strukturtokens.
       ------------------------------------------------------------------ */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    --shadow-card: 0 1px 2px rgb(7 54 74 / 8%), 0 8px 24px rgb(7 54 74 / 6%);
    --focus-ring: 0 0 0 3px rgb(15 143 131 / 32%);

    /* UIUX-01 reliefikonplatta — ljus rundad kvadrat, ljus uppe-vänster, mjuk skugga nere-höger.
       Samma platta i sidebar, kortrader, genvägar och tomlägen (UI-RAMVERK §2). MÅSTE deklareras
       i alla temablocken (jfr kommentaren överst) — annars faller ytan tillbaka till fallback. */
    --relief-plate-size: 40px;
    --relief-plate-bg: #eef4f6;
    --relief-plate-border: #dce7eb;
    --relief-plate-icon: #0c6272;
    --relief-shadow: -1px -1px 2px rgb(255 255 255 / 80%), 1px 2px 4px rgb(7 54 74 / 12%);

    /* Scrim för AppModal BottomSheet (ADR-0025) — lätt dimning, inte svart 50 %.
       MÅSTE deklareras i alla fyra temablocken (se kommentaren överst). */
    --color-scrim: rgb(16 36 46 / 32%);
}

/* ============================================
   Dark mode — prefers-color-scheme: dark
   ============================================ */
@media (prefers-color-scheme: dark) {
    :root {
        /* Bakgrunder — teal/petrol (T1) */
        --color-bg-body:        #0c1418;
        --color-bg-card:        #14232a;
        --color-bg-surface:     #172b33;
        --color-bg-input:       #172b33;

        /* Text */
        --color-text-body:      #e2edf0;
        --color-text-muted:     #8aa0a8;
        --color-text-primary:   #f1f5f9;

        /* Kanter */
        --color-border:         #33505a;
        --color-input-border:   #6b7a94;   /* SC 1.4.11 ≥ 3:1 mot fält/bg i mörkt tema */

        /* Primärfärg — ljusare teal för mörk bakgrund (behåller AA-kontrast som nav/fokus) */
        --color-primary:        #45c0b2;   /* länkar, aktiv nav — 7.24:1 mot kort */
        --color-link:           #45c0b2;
        --color-primary-btn:    #17b3a4;   /* ljus teal — kräver mörk knapptext */
        --color-primary-border: #0f8f83;
        --color-primary-btn-text: #04231f; /* mörk text på ljus teal-knapp — 6.07:1 */
        /* Hover LJUSARE här, inte mörkare: kantfärgen (#0f8f83) hade gett 4.17:1 mot den
           mörka knapptexten, alltså under AA. --color-primary ger 7.47:1. */
        --color-primary-btn-hover: var(--color-primary);
        --color-accent:         #19b8a8;
        --color-primary-soft:   #10333a;   /* chip-bakgrund — --color-primary (#45c0b2) AA ovanpå */

        /* Nedtonad markering i stället för webbläsarens ljusa platta (beställarrapport
           2026-08-14: "väldigt ljust och döljer text"). Mörk botten + ljus text. */
        --color-selection-bg:   #1d4b57;
        --color-selection-text: #f2f8fa;

        --color-row-warning-bg:   #3a2f10;
        --color-row-success-bg:   #12331f;
        --color-row-primary-bg:   #10333a;
        --color-row-secondary-bg: #2a3238;
        --color-row-danger-bg:    #3a1a1d;
        --color-row-info-bg:      #10303a;

        /* Statusfärger — text-säkra, AA mot kort */
        --color-info:                   #58c7e0;  /* 8.18:1 */
        --color-warning:                #f0c34a;  /* 9.67:1 */
        --color-success:                #6ecb96;  /* 8.17:1 */
        --color-danger:                 #f0938a;  /* 7.09:1 */

        /* Avatar-palett — mjuka toner mot mörk kortbakgrund (#14232a) */
        --color-avatar-info-soft:    #13303f;
        --color-avatar-warning-soft: #332710;
        --color-avatar-success-soft: #123321;

        /* Kontextuella outline-knappar — ljusa varianter för mörk bakgrund */
        --color-outline-primary:        #6ea8ff;
        --color-outline-secondary:      #a0aab5;
        --color-outline-dark:           #dfe3ea;
        --color-outline-success:        #75b798;
        --color-outline-danger:         #ea868f;
        --color-outline-contrast-text:  #000000;

        /* Nav — samma som ljust (brand-900/-800 har redan mörk bakgrund) */
        --color-nav-start:      #07364a;
        --color-nav-end:        #0a4a5f;
        --color-nav-inactive:   #7e8a9c;   /* AA-text ≥ 4.5:1 mot bottom-nav/bg */

        /* BottomNav */
        --color-bottom-nav-bg:  #111827;

        /* Reservrad — mörk tint med AA-text mot --color-text-body */
        --color-row-reserve-bg: #1c3a5e;

        /* Scrim (ADR-0025) — mörkare för mörk bakgrund */
        --color-scrim: rgb(2 10 14 / 55%);
        --relief-plate-bg: #172a32;
        --relief-plate-border: #223a44;
        --relief-plate-icon: #45c0b2;
        --relief-shadow: -1px -1px 2px rgb(255 255 255 / 6%), 1px 2px 4px rgb(0 0 0 / 35%);
    }
}

/* ============================================
   Manuell theme-override (sätts via data-theme-attribut)
   Åsidosätter prefers-color-scheme
   ============================================ */

[data-theme="dark"] {
    --color-bg-body:        #0c1418;
    --color-bg-card:        #14232a;
    --color-bg-surface:     #172b33;
    --color-bg-input:       #172b33;
    --color-text-body:      #e2edf0;
    --color-text-muted:     #8aa0a8;
    --color-text-primary:   #f1f5f9;
    --color-border:         #33505a;
    --color-input-border:   #6b7a94;
    --color-primary:        #45c0b2;
    --color-link:           #45c0b2;
    --color-primary-btn:    #17b3a4;
    --color-primary-border: #0f8f83;
    --color-primary-btn-text: #04231f;
    --color-primary-btn-hover: var(--color-primary);
    --color-accent:         #19b8a8;
    --color-primary-soft:   #10333a;
    --color-selection-bg:   #1d4b57;
    --color-selection-text: #f2f8fa;

    --color-row-warning-bg:   #3a2f10;
    --color-row-success-bg:   #12331f;
    --color-row-primary-bg:   #10333a;
    --color-row-secondary-bg: #2a3238;
    --color-row-danger-bg:    #3a1a1d;
    --color-row-info-bg:      #10303a;
    --color-avatar-info-soft:    #13303f;
    --color-avatar-warning-soft: #332710;
    --color-avatar-success-soft: #123321;
    --color-info:                   #58c7e0;
    --color-warning:                #f0c34a;
    --color-success:                #6ecb96;
    --color-danger:                 #f0938a;
    --color-outline-primary:        #6ea8ff;
    --color-outline-secondary:      #a0aab5;
    --color-outline-dark:           #dfe3ea;
    --color-outline-success:        #75b798;
    --color-outline-danger:         #ea868f;
    --color-outline-contrast-text:  #000000;
    --color-nav-start:      #07364a;
    --color-nav-end:        #0a4a5f;
    --color-nav-inactive:   #7e8a9c;
    --color-bottom-nav-bg:  #111827;
    --color-row-reserve-bg: #1c3a5e;
    --color-scrim:          rgb(2 10 14 / 55%);
    --relief-plate-bg:      #172a32;
    --relief-plate-border:  #223a44;
    --relief-plate-icon:    #45c0b2;
    --relief-shadow:        -1px -1px 2px rgb(255 255 255 / 6%), 1px 2px 4px rgb(0 0 0 / 35%);
}

[data-theme="light"] {
    /* Tvinga ljust läge även om systemet är mörkt.
       Blocket kan INTE förkortas till bara ett fåtal variabler: det måste
       återdeklarera varje variabel som @media(prefers-color-scheme: dark)
       sätter, annars vinner mörka värden på ett ljust-tvingat system.
       Samma specificitet (0,1,0) som :root — attributblocket vinner enbart
       genom att stå senare i filen. */
    --color-bg-body:        #f6f8f9;
    --color-bg-card:        #ffffff;
    --color-bg-surface:     #eef2f4;
    --color-bg-input:       #ffffff;
    --color-text-body:      #10242e;
    --color-text-muted:     #5c6d75;
    --color-text-primary:   #10242e;
    --color-border:         #d9e1e5;
    --color-input-border:   #6c757d;
    --color-primary:        #0c6272;
    --color-link:           #0c6272;
    --color-primary-btn:    #0c6272;
    --color-primary-border: #0a4a5f;
    --color-primary-btn-text: #ffffff;
    --color-primary-btn-hover: var(--color-primary-border);
    --color-accent:         #0f8f83;
    --color-primary-soft:   #e2eff2;
    --color-selection-bg:   #bfdde6;
    --color-selection-text: #06202a;

    /* Kontextuella tabellrader (.table-warning m.fl.). Bootstrap ger dem en fast LJUS ton och
       sätter color:#000 på <tr> — men den färgen ÄRVS bara, och i mörkt tema sätter vi färg
       direkt på cellen med !important. Arv förlorar, så markerade rader blev ljus platta med
       ljus text: oläsliga precis där de ska dra blicken till sig (beställarrapport 2026-08-14,
       Lagform i Matchcenter). Ljusa värden = bootstraps egna, så ljust tema är oförändrat. */
    --color-row-warning-bg:   #fff3cd;
    --color-row-success-bg:   #d1e7dd;
    --color-row-primary-bg:   #cfe2ff;
    --color-row-secondary-bg: #e2e3e5;
    --color-row-danger-bg:    #f8d7da;
    --color-row-info-bg:      #cff4fc;
    --color-avatar-info-soft:    #e1ebf7;
    --color-avatar-warning-soft: #f4ead9;
    --color-avatar-success-soft: #dcf0e3;
    --color-info:                   #2c6ab0;
    --color-warning:                #8a5a12;
    --color-success:                #0f7a3e;
    --color-danger:                 #c0362a;
    --color-outline-primary:        #0d6efd;
    --color-outline-secondary:      #6c757d;
    --color-outline-dark:           #212529;
    --color-outline-success:        #198754;
    --color-outline-danger:         #dc3545;
    --color-outline-contrast-text:  #ffffff;
    --color-nav-start:      #07364a;
    --color-nav-end:        #0a4a5f;
    --color-nav-inactive:   #5c636b;
    --color-bottom-nav-bg:  #ffffff;
    --color-row-reserve-bg: #cfe2ff;
    --color-scrim:          rgb(16 36 46 / 32%);
    --relief-plate-bg:      #eef4f6;
    --relief-plate-border:  #dce7eb;
    --relief-plate-icon:    #0c6272;
    --relief-shadow:        -1px -1px 2px rgb(255 255 255 / 80%), 1px 2px 4px rgb(7 54 74 / 12%);
}

html, body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* AppIcon (ADR-0025) — kanoniska konturikonens bas. Följer textstorleken;
   konsumenter som behöver annan storlek sätter width/height på sin egen klass. */
svg.app-icon {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    vertical-align: -0.22em;
}

/* UIUX-01 reliefikonplatta (UI-RAMVERK §2) — en ljus rundad kvadrat med subtil relief.
   Samma platta i sidebar, kortrader, genvägar och tomlägen. Sätt storlek via
   --relief-plate-size eller storleksmodifierare nedan. Ikonen ärver plattans färg. */
.relief-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--relief-plate-size, 40px);
    block-size: var(--relief-plate-size, 40px);
    border-radius: var(--radius-md, 12px);
    background: var(--relief-plate-bg, #eef4f6);
    border: 1px solid var(--relief-plate-border, #dce7eb);
    box-shadow: var(--relief-shadow, 1px 2px 4px rgb(7 54 74 / 12%));
    color: var(--relief-plate-icon, #0c6272);
    flex-shrink: 0;
}

.relief-icon > .app-icon {
    inline-size: 60%;
    block-size: 60%;
    vertical-align: 0;
}

.relief-icon.relief-icon-sm { --relief-plate-size: 32px; }
.relief-icon.relief-icon-lg { --relief-plate-size: 56px; }

/* ============================================
   UIUX-01 delade komponenter (§2g) — kortrad, genvägar, skelett, tom-/fel-/behörighetslägen.
   Bygger på reliefikonplattan ovan; färg/yta från tokens (fallback för default-light).
   ============================================ */

/* Kortrad med chevron — hela raden är klickytan, minst 44px hög. */
.card-row {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    inline-size: 100%;
    min-block-size: 44px;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border: none;
    border-radius: var(--radius-md, 12px);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: default;
}

a.card-row,
.card-row-button { cursor: pointer; }

a.card-row:hover,
.card-row-button:hover { background: var(--color-primary-soft, #e2eff2); }

.card-row:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring, 0 0 0 3px rgb(15 143 131 / 32%));
}

/* Egen ledande yta i stället för reliefikonen (t.ex. en avatar). Får inte krympa — annars
   kläms initialerna ihop när namnet är långt. */
.card-row-leading {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.card-row-text {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    flex: 1 1 auto;
}

.card-row-title {
    font-weight: 600;
    color: var(--color-primary, #0c6272);
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-row-subtitle {
    font-size: 0.85rem;
    color: var(--color-nav-inactive, #5c636b);
}

.card-row-chevron {
    flex-shrink: 0;
    color: var(--color-nav-inactive, #5c636b);
}

/* Statusmarkering i en kompakt rad, mellan texten och chevronen. */
.card-row-trailing {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    margin-left: auto;
}

/* Genvägsrad — reliefikon över etikett. UIUX-18 §4: raden ska ALLTID vara centrerad som
   grupp, oavsett antal genvägar (2, 3, 4 …). Tidigare `overflow-x: auto` gjorde raden till
   en scrollcontainer: så fort posterna blev bredare än behållaren (fyra poster med tvåradiga
   etiketter på 375 px) började raden vid scroll-origo, vilket klippte den FÖRSTA posten mot
   vänsterkanten och fick raden att se vänsterställd ut. En scrollcontainer kan dessutom
   aldrig centrera sitt överflöd — `justify-content: center` hade klippt båda kanterna.
   Lösningen är att låta raden radbrytas i stället för att scrolla: då finns inget överflöd
   att klippa och `justify-content: center` centrerar varje rad, inklusive en ensam sista rad. */
.shortcut-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4, 16px);
    padding-block: var(--space-2, 8px);
}

.shortcut {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1, 4px);
    /* Lika bred spalt för varje genväg — annars styr etikettlängden bredden och posterna
       får ojämna mellanrum trots centreringen (beställarens "ojämnt fördelade" ikoner).
       Ingen flex-grow: en post ska aldrig bli bredare bara för att den råkar ligga sist på
       en rad. Krympning är däremot tillåten, så fyra genvägar ryms på EN centrerad rad ner
       till 320 px i stället för att brytas till 3 + 1. */
    flex: 0 1 4.5rem;
    inline-size: 4.5rem;
    padding: var(--space-1, 4px);
    border: none;
    background: transparent;
    color: var(--color-primary, #0c6272);
    text-decoration: none;
    font: inherit;
    cursor: pointer;
}

.shortcut:focus-visible {
    outline: none;
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--focus-ring, 0 0 0 3px rgb(15 143 131 / 32%));
}

.shortcut-label {
    font-size: 0.8rem;
    text-align: center;
    /* UIUX-19 §3: genvägen är 4.5rem bred, men en lång ETT-ords-etikett ("Kommunikation")
       har ingen brytpunkt och rann ut över skärmkanten i stället för att radbrytas.
       Tidigare rader kom undan för att alla etiketter var korta.
       Avstavning (dokumentet är lang="sv") ger "Kommuni-kation" i stället för det godtyckliga
       "Kommunik ation" som en ren teckenbrytning ger. break-word är fallback i webbläsare
       utan svensk avstavningsordlista — bättre en ful brytning än text utanför skärmen. */
    hyphens: auto;
    overflow-wrap: break-word;
}

/* Serienotering som ren siffra (UIUX-18 §5, mockup mina-resultat). Global och inte scoped,
   eftersom samma utseende ska gälla både SeriesNoteChip:s knapp (Compact) och den enkla
   <span> som används när posten saknar ett id att hänga en kommentar på — scoped CSS från
   sidan når inte in i komponenten. */
.series-score {
    display: inline-block;
    /* Tillräckligt bred för att tresiffriga resultat ska stå i en jämn spalt, men inte
       bredare — fyra serier ska rymmas på EN rad även på den smalaste raden (tävlingsrad
       med chevron) vid 375 px. */
    min-inline-size: 2rem;
    padding: 2px 3px;
    border: none;
    background: transparent;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary, #212529);
    text-align: center;
    cursor: pointer;
}

button.series-score:disabled {
    cursor: default;
}

/* Prick som markerar att serien har en kommentar — ersätter 💬-emojin i kompakt läge. */
.series-score.has-note {
    position: relative;
    font-weight: 600;
    color: var(--color-primary, #0c6272);
}

.series-score.has-note::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    inline-size: 5px;
    block-size: 5px;
    border-radius: 50%;
    background: var(--color-primary, #0c6272);
}

.series-score:focus-visible {
    outline: none;
    border-radius: var(--radius-sm, 8px);
    box-shadow: var(--focus-ring, 0 0 0 3px rgb(15 143 131 / 32%));
}

/* Skelettladdning — samma kortmått som slutligt innehåll, mjuk puls. */
.skeleton-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
    padding: var(--space-4, 16px);
    border-radius: var(--radius-md, 12px);
    background: var(--color-bg-card, #fff);
    box-shadow: var(--shadow-card);
}

.skeleton-line {
    block-size: 14px;
    border-radius: var(--radius-sm, 8px);
    background: var(--color-primary-soft, #e2eff2);
    animation: skeleton-pulse 1.4s ease-in-out infinite;
}

.skeleton-line:nth-child(2) { inline-size: 85%; }
.skeleton-line:nth-child(3) { inline-size: 65%; }

@keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

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

/* Tom-/fel-/behörighetslägen — centrerad reliefikon, mening, valfri handling. */
.state-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-6, 32px) var(--space-4, 16px);
    text-align: center;
}

.state-message {
    margin: 0;
    max-inline-size: 40ch;
    color: var(--color-nav-inactive, #5c636b);
}

.state-emoji {
    font-size: 2rem;
    line-height: 1;
}

/* ============================================
   Mobile — prevent horizontal page scroll
   ============================================ */

/* Clip any overflow at html root — no page-level horizontal scroll */
html {
    overflow-x: clip;
}

/* Main content container: never wider than viewport */
article.content {
    max-width: 100%;
}

/* ------------------------------------------------------------------
   Kanonisk sidgrid (ADR-0025): enda normalmönstret för sidors
   horisontella placering. 16 px gutter på mobil, 24 px från 768px;
   maxbredd och centrering definieras HÄR och ingen annanstans.
   Breda arbetsytor (fd .container-fluid) lägger till .page-shell-wide.
   OBS: aldrig transform/filter/contain på dessa — det skapar en
   stacking context som fångar AppModals fixed-lager (beslut 15).
   ------------------------------------------------------------------ */
.page-shell {
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: var(--space-4);
}

.page-shell-wide {
    max-width: none;
}

@media (min-width: 768px) {
    .page-shell {
        padding-inline: var(--space-5);
    }
}

/* Table cells: allow wrapping of long values (email, names, BITS ids).
   Uses break-word (not anywhere) to prevent columns collapsing to 0 width
   which caused names to display character-by-character on narrow screens.
   Bootstrap .text-nowrap !important wins on cells that explicitly need it. */
td,
th {
    overflow-wrap: break-word;
}

/* Button groups: wrap rather than push viewport on small screens */
@media (max-width: 767.98px) {
    .btn-group {
        flex-wrap: wrap;
    }
}

/* iOS safe area — sidled hanteras här, TOPPEN gör den inte.
   Toppbaren är sticky och mäter mot scrollportens kant, inte mot body:s paddade box. Med
   padding-top här låg baren rätt innan man skrollade och hoppade upp under statusfältet så
   fort den låste sig — beställarens "sitter inte fast och fastnar för högt". Toppbaren äger
   nu sin egen säkerhetszon: bakgrunden målas under statusfältet, innehållet trycks ned.
   TopNav renderas ovillkorligt i MainLayout, som är appens enda layout, så ingen vy blir
   utan det skyddet. */
body {
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
    background-color: var(--color-bg-body, #ffffff);
    color: var(--color-text-body, #212529);
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--color-link);
}

.btn-primary {
    color: var(--color-primary-btn-text, var(--color-white));
    background-color: var(--color-primary-btn);
    border-color: var(--color-primary-border);
}

/* Samma uppsättning tillstånd som .btn-secondary nedan redan hade. Saknades här, så
   Bootstraps .btn-primary:hover (#0b5ed7) vann på specificitet och tog över hover, fokus
   och aktivt läge på appens viktigaste knapp — på varje sida. */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    color: var(--color-primary-btn-text, var(--color-white));
    background-color: var(--color-primary-btn-hover);
    border-color: var(--color-primary-border);
}

/* Avstängd knapp behåller BASfärgen — Bootstrap dämpar den redan med opacity. Med
   hover-färgen hade den sett intryckt ut i stället för overksam. */
.btn-primary:disabled,
.btn-primary.disabled {
    color: var(--color-primary-btn-text, var(--color-white));
    background-color: var(--color-primary-btn);
    border-color: var(--color-primary-border);
}

/* Sekundärknapp enligt UX/UI KONCEPT 2027: outline i primärfärgen (inte Bootstrap-grå).
   Konceptets tre knappnivåer = .btn-primary (fylld teal), .btn-secondary (teal outline),
   .btn-link (textlänk). Kontextfärgade knappar (gul/grön/cyan) fasas ut mot dessa tre;
   endast destruktiva handlingar behåller .btn-danger/.btn-outline-danger. */
.btn-secondary {
    color: var(--color-primary);
    background-color: transparent;
    border-color: var(--color-primary);
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active {
    color: var(--color-primary-btn-text, var(--color-white));
    background-color: var(--color-primary-btn);
    border-color: var(--color-primary-border);
}

/* UIUX-23: DEAKTIVERADE primär-/sekundärknappar föll tillbaka på Bootstrap-blått
   respektive Bootstrap-grått. Bootstraps egna `.btn-primary:disabled` har högre
   specificitet (0,2,0) än temaöverskrivningen ovan (0,1,0) och vann därför så fort
   knappen var disabled. Effekten syntes tydligast på anslagseditorn, vars primära
   handling är disabled tills titel och innehåll är ifyllda — det FÖRSTA man såg på
   sidan var alltså en klarblå knapp i en teal app. Bootstraps opacity-dämpning
   (.65) står kvar och bär fortfarande "går inte att klicka". */
.btn-primary:disabled,
.btn-primary.disabled {
    color: var(--color-primary-btn-text, var(--color-white));
    background-color: var(--color-primary-btn);
    border-color: var(--color-primary-border);
}

.btn-secondary:disabled,
.btn-secondary.disabled {
    color: var(--color-primary);
    background-color: transparent;
    border-color: var(--color-primary);
}

/* UIUX-23: ikryssade kryssrutor och switchar ritades i Bootstrap-blått (#0d6efd) i en
   app vars övriga interaktiva ytor är teal — mest påtagligt på anslagseditorns
   Leverans-kort, där två blå switchar sitter direkt under teal-knappar. Endast fyllningen
   byts; Bootstraps vita knopp ligger i background-image och lämnas orörd.
   UI-RAMVERK §2: färger tas alltid från teal/petrol-tokens. */
.form-check-input:checked {
    background-color: var(--color-primary-btn);
    border-color: var(--color-primary-border);
}

/* Kontextuella outline-knappar — AA-säkra färger (ersätter Bootstrap-cyan/gult
   som föll axe color-contrast på ljust tema). Denna Bootstrap-build sätter
   color/border-color DIREKT (ej via CSS-variabler), så vi måste överskriva de
   faktiska egenskaperna — inte bara --bs-btn-*. */
.btn-outline-info {
    color: var(--color-info);
    border-color: var(--color-info);
}
.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active,
.btn-outline-info.active {
    color: var(--color-outline-contrast-text);
    background-color: var(--color-info);
    border-color: var(--color-info);
}
.btn-outline-warning {
    color: var(--color-warning);
    border-color: var(--color-warning);
}
.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active,
.btn-outline-warning.active {
    color: var(--color-outline-contrast-text);
    background-color: var(--color-warning);
    border-color: var(--color-warning);
}

.btn-outline-primary {
    color: var(--color-outline-primary);
    border-color: var(--color-outline-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    color: var(--color-outline-contrast-text);
    background-color: var(--color-outline-primary);
    border-color: var(--color-outline-primary);
}
.btn-outline-secondary {
    color: var(--color-outline-secondary);
    border-color: var(--color-outline-secondary);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary.active {
    color: var(--color-outline-contrast-text);
    background-color: var(--color-outline-secondary);
    border-color: var(--color-outline-secondary);
}
.btn-outline-dark {
    color: var(--color-outline-dark);
    border-color: var(--color-outline-dark);
}
.btn-outline-dark:hover,
.btn-outline-dark:focus,
.btn-outline-dark:active,
.btn-outline-dark.active {
    color: var(--color-outline-contrast-text);
    background-color: var(--color-outline-dark);
    border-color: var(--color-outline-dark);
}
.btn-outline-success {
    color: var(--color-outline-success);
    border-color: var(--color-outline-success);
}
.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active,
.btn-outline-success.active {
    color: var(--color-outline-contrast-text);
    background-color: var(--color-outline-success);
    border-color: var(--color-outline-success);
}
.btn-outline-danger {
    color: var(--color-outline-danger);
    border-color: var(--color-outline-danger);
}
.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active,
.btn-outline-danger.active {
    color: var(--color-outline-contrast-text);
    background-color: var(--color-outline-danger);
    border-color: var(--color-outline-danger);
}

/* Bootstrap .text-muted/.form-text hårdkodar #6c757d (4.37:1 mot ljusa ytor,
   ännu lägre mot mörk = FAIL). Bind till vår AA-säkra token i BÅDA teman
   (#5f6672 ljust ≥ 5.5:1, #94a3b8 mörkt). */
.text-muted,
.form-text {
    color: var(--color-text-muted) !important;
}

/* Bootstrap .nav-link hårdkodar #0d6efd (4.19:1 mot mörk bg = FAIL). Bind
   inaktiva flik-/nav-länkar till vår AA-länktoken (båda teman); aktiv flik
   behåller Bootstraps aktiv-styling. */
.nav-link:not(.active) {
    color: var(--color-link);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--color-white), 0 0 0 0.25rem var(--color-primary-focus); /* rgba kopplas till --color-primary-focus */
}

/* ── Global synlig fokusindikator (SC 2.4.7) ────────────────────────────
   Gäller alla interaktiva element (knapp/länk/input/select/[tabindex]).
   :focus-visible → visas bara vid tangentbords-/programmatisk fokus, inte
   vid musklick, så den inte stör pekskärm/mus. */
:focus-visible {
    outline: 3px solid var(--color-primary-focus);
    outline-offset: 2px;
    border-radius: 2px;
}
:focus:not(:focus-visible) {
    outline: none;
}
/* <main> tar programmatisk fokus via skip-link men ska inte visa ram */
main:focus,
main:focus-visible {
    outline: none;
}

/* ── Skip-link — dold tills tangentbordsfokus (SC 2.4.1) ─────────────── */
.skip-link {
    position: absolute;
    left: 0.5rem;
    top: -4rem;
    z-index: 2000;
    padding: 0.5rem 1rem;
    background-color: var(--color-primary-btn);
    color: var(--color-white);
    border-radius: 0 0 0.375rem 0.375rem;
    text-decoration: none;
    transition: top 0.15s ease-in-out;
}
.skip-link:focus {
    top: 0;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-valid);
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

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

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

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--color-error-bg);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

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

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

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

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

code {
    color: var(--color-code);
}

/* ── Dark mode — Bootstrap component overrides ───────────────────────── */

.card {
    background-color: var(--color-bg-card, #ffffff);
    border-color: var(--color-border, #dee2e6);
    color: var(--color-text-body, inherit);
}

.card-header,
.card-footer {
    background-color: var(--color-bg-surface, rgba(0,0,0,0.03));
    border-color: var(--color-border, rgba(0,0,0,0.125));
}

.form-control,
.form-select {
    background-color: var(--color-bg-input, #ffffff);
    color: var(--color-text-body, #212529);
    border-color: var(--color-input-border, #6c757d);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--color-bg-input, #ffffff);
    color: var(--color-text-body, #212529);
}

/* Låsta fält. Bootstrap hårdkodar background-color:#e9ecef på :disabled/[readonly] utan att
   röra textfärgen, medan vår .form-control-regel ovan sätter en TEMAMEDVETEN färg — i mörkt
   tema blev det ljus text på ljus platta, alltså ett fält vars innehåll inte gick att läsa
   (beställarrapport 2026-08-14: e-postfältet på Min profil).

   -webkit-text-fill-color krävs utöver color: iOS Safari målar inaktiverad text med sin egen
   urblekta färg och ignorerar color helt. Utan raden ser fältet fortfarande tvättat ut på
   iPhone, som är där rapporten kom ifrån. */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
textarea.form-control:disabled,
textarea.form-control[readonly] {
    background-color: var(--color-bg-surface, #eef2f4);
    color: var(--color-text-muted, #5b6b73);
    -webkit-text-fill-color: var(--color-text-muted, #5b6b73);
    opacity: 1;
}

.list-group-item {
    background-color: var(--color-bg-card, #ffffff);
    border-color: var(--color-border, rgba(0,0,0,0.125));
    color: var(--color-text-body, inherit);
}

.table {
    --bs-table-bg: var(--color-bg-card, transparent);
    --bs-table-color: var(--color-text-body, inherit);
    --bs-table-border-color: var(--color-border, #dee2e6);
}

/* Tabellmönstret enligt UX/UI KONCEPT 2027 ("TABELL"): dämpad liten rubrikrad,
   luftiga rader utan vertikala linjer, ev. "Visa alla"-textlänk under tabellen.
   Läggs PÅ .table: <table class="table app-table">. Ersätter table-striped/
   table-sm-varianterna i A-svepet. */
.app-table thead th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: none;
    color: var(--color-text-muted);
    border-bottom: 2px solid var(--color-border);
}

.app-table tbody td,
.app-table tbody th {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border);
}

.app-table tbody tr:last-child td,
.app-table tbody tr:last-child th {
    border-bottom: none;
}

/* Banparsrad i laguttagningens partabeller (RoundTeamCard "Uttaget lag" och
   PrintableExport-laglappen). Beställarönskemål 2026-08-14: paren ska ha luft omkring sig så
   att raderna läses som fyra banpar och inte som en enda löpande spelarlista.

   Luften ligger som radhöjd + en tydligare avdelare, INTE som en tom <tr>: en tom tabellrad
   annonseras av skärmläsare som en riktig rad utan innehåll och räknas in i tabellens
   radantal. Klassen ligger globalt och inte i en .razor.css eftersom de två komponenterna
   som använder den renderas under olika föräldrar (Laguttagning, LineupWizard,
   MatchcenterWorkspace) — scopad CSS hade nått den ena men inte den andra.

   Selektorn måste vara minst lika specifik som ".app-table tbody td" ovan för att vinna. */
.app-table tbody tr.lineup-pair-row > td,
.app-table tbody tr.lineup-pair-row > th {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}

.app-table tbody tr.lineup-pair-row + tr.lineup-pair-row > td {
    border-top: 2px solid var(--color-border);
}

/* ── Android / mobile fixes ─────────────────────────────────────────── */

/* Prevent auto-zoom when focusing inputs on Android (requires ≥ 16px) */
@media (max-width: 767.98px) {
    input.form-control,
    input.form-control-sm,
    select.form-select,
    select.form-select-sm,
    textarea.form-control {
        font-size: 16px !important;
    }
}

/* Remove 300 ms tap delay on all interactive elements */
button,
a,
[role="button"],
.btn,
label[for] {
    touch-action: manipulation;
}

/* Ensure btn-sm is finger-friendly on mobile (min 44px tap area) */
@media (max-width: 767.98px) {
    .btn-sm {
        min-height: 44px;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

/* Prevent background scroll when PWA install modal is open */
body.modal-open-pwa {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* Scroll-lås för AppModal (ADR-0025). overflow:hidden — INTE position:fixed
   som ovan, eftersom fixed nollställer scrollpositionen när låset släpps. */
body.app-modal-open {
    overflow: hidden;
    overscroll-behavior: contain;
}

/* Prevent overscroll rubber-banding inside modal backdrop on Android */
.pwa-modal-backdrop {
    overscroll-behavior: contain;
}

@media print {
    /* Dölj app-skalet (menyer/barer) i utskrift. Måste vara global (oscopad)
       CSS för att nå barnkomponenternas element — scoped .razor.css matchar inte. */
    .topnav,
    .bottom-nav,
    .bottom-nav-shell,          /* UIUX-10 §1b: skalet bär CheckIn-nivån, dölj det också */
    .app-sidebar,
    .pwa-modal-backdrop,        /* PwaInstallBanner */
    .notification-hub {
        display: none !important;
    }

    main {
        padding-left: 0 !important;
    }

    .page {
        display: block !important;
    }

    article.content,
    .page-shell {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
    }

    /* CLUBROLES (2026-07-29) Fas 7: flyttat från Laguttagning.razor:s inline <style>
       (samma skäl som ovan — body/PrintableExport-kort ligger utanför scoped CSS:s räckvidd). */
    .d-print-block {
        page-break-inside: avoid;
    }

    /* Enskild matchutskrift: dölj alla kort, visa bara det valda. */
    body.printing-single .print-match-card {
        display: none !important;
    }

    body.printing-single .print-match-card.print-target {
        display: block !important;
    }
}

/* ── Auth loading screen ──────────────────────────────────────────── */
.auth-loading-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: calc(1.5rem + var(--safe-top)) 1.25rem calc(1.5rem + var(--safe-bottom));
    background: var(--color-white);
}

.auth-loading-card {
    width: min(100%, 22rem);
    padding: 2rem 1.5rem;
    text-align: center;
    border-radius: 1.25rem;
    background: var(--color-white);
}

.auth-loading-spinner {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
}

.auth-loading-title {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.auth-loading-text {
    margin: 0;
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

/* --- Bottom navigation (mobil) — två nivåer (UIUX-01 §2f) --------------- */

/* UIUX-18 §2: nivåernas höjder är TOKENS, inte magiska tal på två ställen. Innehållets
   bottenfrigång räknades tidigare ut med literalerna 56px + 78px, medan .bottom-nav satte
   sin höjd separat — två sanningar om samma mått som kunde glida isär utan att något
   fångade det. Nu härleds både skalets höjd och frigången ur samma två variabler. */
:root {
    --bottom-nav-row-h: 56px;      /* destinationsraden */
    --bottom-nav-checkin-h: 78px;  /* den upphöjda CheckIn-nivån ovanför den */

    /* Samma princip för säkerhetszonerna och toppbarens höjd: ETT mått, en sanning.
       Fallbacken 0px är inte kosmetisk — utan den blir hela deklarationen ogiltig i en
       motor som inte känner env(), i stället för att bara sakna insetet.

       Säkerhetszonen kan INTE hanteras med padding på body för sticky- eller fixed-element:
       de mäter mot scrollportens kant, inte mot body:s paddade box. Ett element med top: 0
       hamnar därför under statusfältet i det ögonblick det låser sig, vilket var precis
       felet på toppbaren. Elementen räknar därför in insetet själva. */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);

    /* Toppbarens INNEHÅLLSHÖJD, utan säkerhetszonen. Den totala höjden är
       calc(var(--topnav-h) + var(--safe-top)) och beräknas där den behövs. */
    --topnav-h: 3.5rem;
}

/* Skalet döljs på desktop; destinationsraden ligger inuti och följer med. */
.bottom-nav-shell {
    display: none;
}

.bottom-nav {
    display: flex;
}

@media (max-width: 991.98px) {
    .bottom-nav-shell {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 99;
        padding-bottom: var(--safe-bottom);
        /* Gapet ovanför den centrerade CheckIn-knappen ska inte fånga klick mot innehållet. */
        pointer-events: none;
        /* UIUX-18 §2: CheckIn-nivån var helt genomskinlig, så sidans innehåll rullade synligt
           förbi och rakt igenom den runda knappen precis ovanför baren — texten kolliderade
           med CheckIn-cirkeln i stället för att ta slut. Det är det enda stället i appen där
           innehåll och skal möts utan avgränsning, och det får baren att läsas som om den
           svävar över sidan i stället för att ligga fast längst ned. En mjuk toning gör att
           innehållet tonar ut i baren. Ingen ny färg: samma token som destinationsraden. */
        background: linear-gradient(to bottom,
                                    transparent 0%,
                                    var(--color-bottom-nav-bg) 55%);
    }

    .bottom-nav-shell > * {
        pointer-events: auto;
    }

    .bottom-nav {
        height: var(--bottom-nav-row-h);
        background-color: var(--color-bottom-nav-bg, #ffffff);
        border-top: 1px solid var(--color-border, #dee2e6);
    }

    /* CheckIn i EGEN nivå ovanför destinationsraden — rättar mockupdefekten: den skymmer
       aldrig Matchcenters ikon eller etikett, eftersom nivåerna har separat höjd. */
    .bottom-nav-checkin {
        align-self: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        margin-bottom: 6px;
        text-decoration: none;
        color: var(--color-primary, #0c6272);
    }

    /* Innehållet får bottenpadding som rymmer BÅDA nivåerna + safe-area, så det aldrig skyms.
       Slacken är 1rem och inte 0.5rem: etiketterna i skalet är rem-baserade och växer med
       användarens textstorlek, och med den gamla marginalen krympte frigången till 1 px vid
       24 px rotstorlek (mätt) — nästa steg hade lagt sista raden under baren. */
    article.content {
        padding-bottom: calc(var(--bottom-nav-row-h) + var(--bottom-nav-checkin-h)
                             + var(--safe-bottom) + 1rem);
    }

    /* Alla användare får inte CheckIn-nivån (BottomNav renderar den bara när mobil incheckning
       är relevant). Utan den är skalet bara destinationsraden, och den fasta frigången ovan
       lämnade ~78 px död yta i botten av varje sida. Regeln MINSKAR frigången i det fallet —
       aldrig tvärtom — så en webbläsare utan :has()-stöd behåller den säkra, större frigången. */
    body:not(:has(.bottom-nav-checkin)) article.content {
        padding-bottom: calc(var(--bottom-nav-row-h) + var(--safe-bottom) + 1rem);
    }
}

.bottom-nav-checkin-plate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 56px;
    block-size: 56px;
    border-radius: 50%;
    background: var(--color-primary-btn, #0c6272);
    color: var(--color-primary-btn-text, #ffffff);
    box-shadow: 0 4px 12px rgb(7 54 74 / 25%), var(--relief-shadow, 1px 2px 4px rgb(7 54 74 / 12%));
}

.bottom-nav-checkin-plate > .app-icon {
    inline-size: 26px;
    block-size: 26px;
}

.bottom-nav-checkin-label {
    font-size: 0.7rem;
    font-weight: 600;
}

.bottom-nav-checkin:focus-visible {
    outline: none;
}

.bottom-nav-checkin:focus-visible .bottom-nav-checkin-plate {
    box-shadow: var(--focus-ring, 0 0 0 3px rgb(15 143 131 / 32%)), 0 4px 12px rgb(7 54 74 / 25%);
}

.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: var(--color-nav-inactive);
    font-size: 0.65rem;
    font-weight: 500;
    border: none;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    padding: 6px 4px;
    min-height: 44px;
    min-width: 0;
}

/* Håll etiketten på en rad (ellips vid behov) så fler nav-poster inte spräcker höjden. */
.bottom-nav-item > span:not(.bottom-nav-icon) {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* UIUX-23: aktivmarkeringen läser aria-current="page" — samma kontrakt som
   .app-sidebar-item. Regeln stod tidigare på klassen .active, som BottomNav.razor aldrig
   satt (den sätter aria-current), så INGEN post blev någonsin markerad. Prefixmatchningen
   i NavigationItemExtensions.IsActive var korrekt hela tiden; det var bara ingen som
   kunde se den. Fetstilen finns för att tillståndet inte får bäras av färg ensam (WCAG
   1.4.1) — samma skäl som sidebaren har en bakgrundsplatta. */
.bottom-nav-item[aria-current="page"] {
    color: var(--color-primary);
    font-weight: 700;
}

.bottom-nav-item:focus-visible {
    color: var(--color-primary);
}

.bottom-nav-item .bottom-nav-icon {
    font-size: 1.3rem;
    line-height: 1;
}

/* Matchcenter — mest framträdande BottomNav-plats, men fortfarande en flex-rad-item
   med samma min-height:44px som sina syskon (ingen flytande FAB som bryter mönstret).
   UIUX-23: framträdandet bärs av ikonstorleken, INTE av den aktiva färgen. Tidigare
   färgade .highlighted posten primärt oavsett route, så Matchcenter såg likadant ut på
   och utanför sin egen sektion — den enda posten helt utan synligt aktivtillstånd. */
.bottom-nav-item.highlighted .bottom-nav-icon {
    font-size: 1.5rem;
}

/* --- Desktop sidebar (UIUX-NAV-PR-A) ------------------------------------ */

.app-shell {
    display: flex;
    align-items: stretch;
}

.app-sidebar {
    display: none;
}

@media (min-width: 992px) {
    .app-shell {
        flex-direction: row;
    }

    .app-sidebar {
        display: flex;
        flex-direction: column;
        gap: var(--space-1, 4px);
        padding: var(--space-3, 16px) var(--space-2, 8px);
        background-color: var(--color-bg-surface, #f5f7f8);
        border-right: 1px solid var(--color-border, #d9e1e5);
        flex-shrink: 0;
    }

    .app-sidebar.expanded {
        width: 220px;
    }

    .app-sidebar.compact {
        width: 72px;
    }

    .app-sidebar.compact .app-sidebar-label {
        display: none;
    }
}

.app-sidebar-toggle {
    align-self: flex-end;
    border: none;
    background: transparent;
    color: var(--color-nav-inactive, #5c636b);
    cursor: pointer;
    min-height: 44px;
    min-width: 44px;
    border-radius: var(--radius-sm, 8px);
}

.app-sidebar-toggle:focus-visible,
.app-sidebar-item:focus-visible {
    outline: var(--focus-ring, 2px solid #258cfb);
    outline-offset: 2px;
}

.app-sidebar-item {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    min-height: 44px;
    min-width: 44px;
    padding: var(--space-2, 8px) var(--space-2, 8px);
    border-radius: var(--radius-sm, 8px);
    text-decoration: none;
    color: var(--color-nav-inactive, #5c636b);
    font-weight: 500;
}

.app-sidebar-item[aria-current="page"] {
    color: var(--color-primary);
    background-color: var(--color-bg-card, #ffffff);
}

.app-sidebar-item.highlighted {
    color: var(--color-primary);
    font-weight: 700;
}

.app-sidebar-icon {
    font-size: 1.2rem;
    line-height: 1;
}

/* --- "Mer"-arkets innehåll (UIUX-NAV-PR-A) ------------------------------ */

.more-sheet-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 4px);
}

.more-sheet-item {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    min-height: 44px;
    padding: var(--space-2, 8px);
    border-radius: var(--radius-sm, 8px);
    text-decoration: none;
    color: var(--color-text-body);
}

.more-sheet-item:hover,
.more-sheet-item:focus-visible {
    background-color: var(--color-bg-surface, #f5f7f8);
}

.more-sheet-icon {
    font-size: 1.2rem;
    line-height: 1;
}

/* MyPage tabs */
.mypage-tabs .nav-link {
    font-size: 0.78rem;
    padding: 0.5rem 0.25rem;
}

@media (max-width: 767.98px) {
    .mypage-tabs .nav-link {
        font-size: 0.72rem;
    }
}

/* Matchresultat match-selector */
.match-selector-list {
    max-height: 320px;
    overflow-y: auto;
}

@media (max-width: 767.98px) {
    .match-selector-list {
        max-height: 240px;
    }
}

/* ============================================
   Dark mode — globala Bootstrap-fixes
   (badges, labels, input-group-text)
   ============================================ */

@media (prefers-color-scheme: dark) {
    .form-label,
    .col-form-label,
    label {
        color: var(--color-text-body);
    }

    /* Bootstrap .text-muted uses hardcoded #6c757d — too dark on dark bg */
    .text-muted {
        color: var(--color-text-muted) !important;
    }

    .badge.bg-light,
    .badge.text-bg-light,
    .badge.bg-white {
        background-color: var(--color-bg-surface) !important;
        color: var(--color-text-body) !important;
    }

    .badge.bg-secondary,
    .badge.text-bg-secondary {
        background-color: #4a5568 !important;
        color: #e2e8f0 !important;
    }

    .input-group-text {
        background-color: var(--color-bg-surface);
        border-color: var(--color-border);
        color: var(--color-text-body);
    }
}

[data-theme="dark"] .form-label,
[data-theme="dark"] .col-form-label,
[data-theme="dark"] label {
    color: var(--color-text-body);
}

/* Bootstrap .text-muted uses hardcoded #6c757d — too dark on dark bg */
[data-theme="dark"] .text-muted {
    color: var(--color-text-muted) !important;
}

[data-theme="dark"] .badge.bg-light,
[data-theme="dark"] .badge.text-bg-light,
[data-theme="dark"] .badge.bg-white {
    background-color: var(--color-bg-surface) !important;
    color: var(--color-text-body) !important;
}

[data-theme="dark"] .badge.bg-secondary,
[data-theme="dark"] .badge.text-bg-secondary {
    background-color: #4a5568 !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .input-group-text {
    background-color: var(--color-bg-surface);
    border-color: var(--color-border);
    color: var(--color-text-body);
}

/* ============================================
   Dark mode — tabellfix
   Bootstrap 5.1 hårdkodar striped/hover-textfärger
   till #212529 (svart). Dessa måste overridas i dark
   mode annars blir texten svart på mörk bakgrund.
   ============================================ */

@media (prefers-color-scheme: dark) {
    /* 1. Tabelltext och bakgrund — Bootstrap-variabler för dark mode */
    .table {
        --bs-table-color:         var(--color-text-body);
        --bs-table-active-color:  var(--color-text-body);
        --bs-emphasis-color:      var(--color-text-body);
        --bs-table-bg:            var(--color-bg-card);
        --bs-table-border-color:  var(--color-border);
        --bs-table-striped-color: var(--color-text-body);
        --bs-table-striped-bg:    rgba(255, 255, 255, 0.07);
        --bs-table-hover-color:   var(--color-text-body);
        --bs-table-hover-bg:      rgba(255, 255, 255, 0.10);
        color:                    var(--color-text-body) !important;
    }

    /* 1b. Celler direkt — Bootstrap sätter color på td/th med egen specificitet */
    .table > :not(caption) > * > td,
    .table > :not(caption) > * > th {
        color: var(--color-text-body) !important;
    }


    /* 2. thead.table-light — anpassa till mörkt tema */
    .table-light {
        --bs-table-color:        var(--color-text-body);
        --bs-table-bg:           var(--color-bg-surface);
        --bs-table-border-color: var(--color-border);
        color: var(--color-text-body) !important;
    }

    /* 3. Nästlade tabeller med explicit bg-white */
    table.bg-white,
    .table.bg-white {
        background-color: var(--color-bg-surface) !important;
    }

    /* 4. Celler med hardkodad ljus bakgrund */
    td.bg-light, th.bg-light,
    td.bg-white, th.bg-white {
        background-color: var(--color-bg-surface) !important;
        color: var(--color-text-body) !important;
    }
}

/* Duplicat för data-theme="dark"-attribut */
[data-theme="dark"] .table {
    --bs-table-color:         var(--color-text-body);
    --bs-table-active-color:  var(--color-text-body);
    --bs-emphasis-color:      var(--color-text-body);
    --bs-table-bg:            var(--color-bg-card);
    --bs-table-border-color:  var(--color-border);
    --bs-table-striped-color: var(--color-text-body);
    --bs-table-striped-bg:    rgba(255, 255, 255, 0.07);
    --bs-table-hover-color:   var(--color-text-body);
    --bs-table-hover-bg:      rgba(255, 255, 255, 0.10);
    color:                    var(--color-text-body) !important;
}

[data-theme="dark"] .table > :not(caption) > * > td,
[data-theme="dark"] .table > :not(caption) > * > th {
    color: var(--color-text-body) !important;
}


[data-theme="dark"] .table-light {
    --bs-table-color:        var(--color-text-body);
    --bs-table-bg:           var(--color-bg-surface);
    --bs-table-border-color: var(--color-border);
    color: var(--color-text-body) !important;
}

[data-theme="dark"] table.bg-white,
[data-theme="dark"] .table.bg-white {
    background-color: var(--color-bg-surface) !important;
}

[data-theme="dark"] td.bg-light, [data-theme="dark"] th.bg-light,
[data-theme="dark"] td.bg-white, [data-theme="dark"] th.bg-white {
    background-color: var(--color-bg-surface) !important;
    color: var(--color-text-body) !important;
}

/* ============================================
   Dark mode — AppModal / Bootstrap-modaler
   Bootstrap hårdkodar .modal-content till vit bakgrund (#fff) och
   .btn-close till en svart SVG-ikon — osynlig/olevbar text (grå etiketter
   patchade för mörkt läge på tok för ljus bakgrund) och en osynlig
   stängknapp i mörkt läge. Träffar alla AppModal-baserade dialoger.
   ============================================ */

@media (prefers-color-scheme: dark) {
    .modal-content {
        background-color: var(--color-bg-card);
        color: var(--color-text-body);
        border-color: var(--color-border);
    }
    .modal-header,
    .modal-footer {
        border-color: var(--color-border);
    }
    .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
    }
}

[data-theme="dark"] .modal-content {
    background-color: var(--color-bg-card);
    color: var(--color-text-body);
    border-color: var(--color-border);
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: var(--color-border);
}
[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Liten variant för badge-inbäddade borttagningsknappar (t.ex. gruppmedlemslistor). */
.btn-close-sm {
    font-size: .55rem;
}

/* Name-prompt modal backdrop */
.modal-backdrop-custom {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1060;
    /* Säkerhetszonen måste ligga HÄR, inte på body: bakgrunden är position: fixed och mäter
       mot scrollporten. Utan paddingen delas överskottet från en hög dialog lika åt båda
       håll, och rubriken hamnar under statusfältet — observerat i vårdnadshavardialogen, där
       klockan låg ovanpå titeln. box-sizing är border-box globalt, så paddingen krymper ytan
       dialogen centreras i.

       En dialog som är högre än den kvarvarande ytan behöver fortfarande en egen max-height;
       det löser inte den här regeln åt den. */
    padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}

/* Djuplänkat anslagstavle-inlägg (/anslagstavla/{postId}) */
.bulletin-highlight > .bulletin-card {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ============================================
   UIUX-PR03 — tabellmönster (opt-in)
   ============================================ */

/* Reservrad i Analysvy. Ersätter inline background-color:#cfe2ff !important.
   Sätter Bootstraps radvariabel i stället för att slåss med !important. */
.table tbody tr.row-reserve {
    --bs-table-bg: var(--color-row-reserve-bg);
    --bs-table-color: var(--color-text-body);
    --bs-table-striped-bg: var(--color-row-reserve-bg);
    --bs-table-striped-color: var(--color-text-body);
    --bs-table-accent-bg: var(--color-row-reserve-bg);
}

/* Sticky identitetskolumn vid horisontell scroll.
   OPT-IN: sätts på den enskilda tabellen (.sticky-id-col) — medvetet INGEN
   global tabellselektor, som skulle träffa alla ~100 tabeller i appen.
   Kräver att tabellen ligger i en .table-responsive eller annan
   overflow-x-container; utan scroll-container har position: sticky ingen
   effekt och regeln är harmlös. */
.sticky-id-col > thead > tr > th:first-child,
.sticky-id-col > tbody > tr > th:first-child,
.sticky-id-col > tbody > tr > td:first-child {
    position: sticky;
    left: 0;
    /* Opak bakgrund krävs — annars scrollar innehåll synligt under kolumnen. */
    background-color: var(--color-bg-card);
    /* Över vanliga celler men under Bootstraps sticky-top (1020). */
    z-index: 2;
}

.sticky-id-col > thead > tr > th:first-child {
    z-index: 3;
}

/* Diskret kant som markerar var den frusna kolumnen slutar. */
.sticky-id-col > thead > tr > th:first-child::after,
.sticky-id-col > tbody > tr > th:first-child::after,
.sticky-id-col > tbody > tr > td:first-child::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--color-border);
}

/* ============================================
   UIUX-PR03 — temaanpassade ytklasser
   ============================================
   Ersätter Bootstraps .bg-light / .bg-white / .text-dark, som är hårdkodat
   ljusa och därför blir vita fläckar respektive osynlig text i mörkt tema.
   Medvetet NAMNGIVNA klasser i stället för att skriva över Bootstraps egna —
   ombyggnad av .bg-light globalt skulle träffa ytor utanför denna PR:s scope. */
.bg-surface {
    background-color: var(--color-bg-surface) !important;
}

.bg-card {
    background-color: var(--color-bg-card) !important;
}

/* Parkamrat till ytklasserna ovan när markupen tidigare hade .text-dark. */
.text-token-body {
    color: var(--color-text-body) !important;
}

/* ============================================
   UIUX-PR03 — global offline-banner
   ============================================ */
.connectivity-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    text-align: center;
    /* Varningsgul yta med AA-säker mörk text i båda teman. */
    background-color: #ffe08a;
    color: #3d2f00;
    /* Ligger i flödet, inte över innehållet — indikationen får inte skymma
       det användaren faktiskt håller på med. */
    position: relative;
    z-index: 1;
}

/* ============================================
   UIUX-10 §1a — TopNav:s ikonknappar (global, INTE scoped)

   UI-RAMVERK §1 kräver att alla fem ikonknappar i TopNav (klocka, hjälp, tema,
   chatt, profil) har identisk kant, bakgrund, djup OCH form: rundad kvadrat,
   border-radius 6px, aldrig cirkel.

   Reglerna måste ligga globalt. Tidigare fanns de bara i TopNav.razor.css, som är
   Blazor-scoped: scope-attributet stämplas enbart på TopNav.razors EGNA element, så
   ThemeToggle.razors knapp (en egen komponent som återanvänder klassen) fick ingen
   styling alls och renderades som en oformaterad webbläsarknapp — en blek fyrkant
   med webbläsarens defaultkant. Samma fallgrop som
   reference_blazor_scoped_css_navlink_deep.
   ============================================ */
.topnav-account-btn {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: white;
    /* Minst 44×44 px touch-target (WCAG 2.5.5 / Apple HIG) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: background 0.15s;
    position: relative;
    white-space: nowrap;
}

.topnav-account-btn:hover,
.topnav-account-btn.active {
    background: rgba(255, 255, 255, 0.25);
}

/* ============================================
   UIUX-01 §2f — temaväljare: 44×44 reliefknapp + ringmeny (tre lägen)
   ============================================ */
.theme-toggle {
    position: relative;
    display: inline-flex;
}

.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Tre likvärdiga ringar — samma storlek/relief, endast fyllningen skiljer (§2f). Fyllningarna är
   fasta illustrativa temafärger (samma oavsett aktivt tema) så en "ljus"-ring alltid ser ljus ut. */
.theme-ring {
    display: inline-block;
    inline-size: 20px;
    block-size: 20px;
    border-radius: 50%;
    border: 1px solid var(--relief-plate-border, #dce7eb);
    box-shadow: var(--relief-shadow, 1px 2px 4px rgb(7 54 74 / 12%));
}

.theme-ring-light { background: #f2f5f7; }
.theme-ring-dark { background: #1b2b33; }
.theme-ring-auto { background: linear-gradient(90deg, #f2f5f7 0 50%, #1b2b33 50% 100%); }

.theme-menu {
    position: absolute;
    inset-block-start: calc(100% + 6px);
    inset-inline-end: 0;
    /* UIUX-10 §1c — ROTORSAK till "temaväxling gör ingenting": ThemeToggle återanvänder
       .topnav-profile-backdrop (z-index 1099) som klickfångare, men menyn låg på 200.
       .topnav (position: sticky, z-index: 200) skapar en stacking context som båda ligger i,
       så backdropen målades ÖVER ringarna: tryck/klick på ett tema träffade backdropen, som
       bara stänger menyn — SelectAsync anropades aldrig och data-theme ändrades aldrig.
       Profilmenyn hade redan 1100 och var därför opåverkad, vilket är varför felet såg ut att
       gälla enbart temaväljaren. Ligg kvar över backdropen (samma lager som profilmenyn). */
    z-index: 1100;
    display: flex;
    gap: var(--space-2, 8px);
    padding: var(--space-2, 8px);
    border-radius: var(--radius-md, 12px);
    background: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border, #dee2e6);
    box-shadow: var(--shadow-card);
}

.theme-menu button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 40px;
    block-size: 40px;
    border-radius: var(--radius-md, 12px);
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
}

.theme-menu button[aria-checked="true"] {
    border-color: var(--color-primary, #0c6272);
    background: var(--color-primary-soft, #e2eff2);
}

.theme-menu button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring, 0 0 0 3px rgb(15 143 131 / 32%));
}

/* ============================================
   M1 — Hem/klubböversikt: utility-klasser som ersätter repeterade
   inline-styles (F1) i MyPage.razor. Rent typografiska, inga färger.
   ============================================ */
.ls-06 { letter-spacing: 0.06em; }
.fs-78 { font-size: 0.78rem; }

/* ============================================
   M2 — Matcher/resultat: logotyp-utilities (ersätter dupliceradad
   inline style="width:...;height:...;object-fit:contain" över filer)
   ============================================ */
.logo-44 { width: 44px; height: 44px; object-fit: contain; }
.logo-20 { width: 20px; height: 20px; object-fit: contain; }

/* ============================================
   M4 — Möten: backdrop-tint (ersätter dupliceradad
   inline style="background:rgba(0,0,0,.4)" på rå modal-markup)
   ============================================ */
.modal-backdrop-tint { background: rgba(0, 0, 0, 0.4); }

/* ============================================
   M6 — Auth-sidor: gemensam smal centrerad container
   (ersätter identisk inline style="max-width:400px;margin-top:80px"
   i Login/Aktivera/BytLosenord/GlomtLosenord/AterstallLosenord)
   ============================================ */
.auth-shell { max-width: 400px; margin-top: 80px; }

/* --------------------------------------------
   Auth-sidornas varumärkesblock och avdelare.
   Låg HÄR och inte i Login.razor.css: scoped CSS gäller bara sin egen
   komponent, och samma "ytterdörr" ska se identisk ut på login, ansökan,
   glömt/återställ/byt lösenord. Samma resonemang som .auth-shell ovan (M6).
   Alla färger kommer från designsystemets tokens — inga hårdkodade värden,
   så båda teman följer med automatiskt (fitness F2).
   -------------------------------------------- */
.auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.auth-brand-mark {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    /* Brickan bakom märket: samma yta som kortet under, med en ring i primärtonen.
       Ger mockupens cirkelform utan att införa en ny färg. */
    background-color: var(--color-bg-card);
    border: 2px solid var(--color-primary);
    padding: 6px;
    object-fit: contain;
}

.auth-brand-wordmark {
    margin: 0.5rem 0 0;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--color-text-body);
}

/* Andra halvan i accentfärgen — samma delning som mockupens vit/guld, men i appens
   palett, så ordmärket hör ihop med resten av produkten. */
.auth-brand-wordmark span {
    color: var(--color-accent);
}

.auth-brand-tagline {
    margin: 0;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted, var(--color-text-body));
    opacity: 0.75;
}

/* Kompakt variant för sidor med långt formulär (ansökan) eller som nås inifrån
   appen (byt lösenord). Där är märket en avsändarstämpel, inte en ytterdörr:
   full storlek skulle trycka ner själva formuläret under vikningen på mobil.
   Taglinen utelämnas i markupen i stället för att döljas här. */
.auth-brand-compact {
    margin-bottom: 1rem;
}

.auth-brand-compact .auth-brand-mark {
    width: 48px;
    height: 48px;
    padding: 4px;
}

.auth-brand-compact .auth-brand-wordmark {
    margin-top: 0.35rem;
    font-size: 1.15rem;
}

/* Avdelare med etikett: en linje på varje sida om texten. Grid i stället för
   pseudo-element med fast bredd, så den centreras korrekt oavsett textlängd. */
.auth-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0 0.75rem;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    height: 1px;
    background-color: var(--color-border);
}

.auth-divider span {
    font-size: 0.85rem;
    color: var(--color-text-body);
    opacity: 0.7;
}

/* ============================================
   M7 — Admin: utility-klasser för repeterade inline-styles
   ============================================ */
.mw-560 { max-width: 560px; }
.mw-520 { max-width: 520px; }
.w-4-5rem { width: 4.5rem; }

/* Maxbredds-/toppmarginalutiliteter (ADR-0025): ersätter sidornas tidigare
   inline style="max-width/margin-top" när wrappern migrerades till .page-shell.
   Smala formulär behåller sin maxbredd som klass innanför sidgriden. */
.mw-600 { max-width: 600px; }
.mw-720 { max-width: 720px; }
.mw-760 { max-width: 760px; }
.mw-820 { max-width: 820px; }
.mw-900 { max-width: 900px; }
.mw-920 { max-width: 920px; }
.mw-960 { max-width: 960px; }
.mw-1000 { max-width: 1000px; }
.mt-40 { margin-top: 40px; }
.mt-60 { margin-top: 60px; }

/* Profilmeny i TopNav (låst beslut 9: Konto-fliken → avatar-dropdown) */
.topnav-profile { position: relative; }
.topnav-profile-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 8px);
    box-shadow: var(--shadow-card);
    min-width: 200px;
    z-index: 1100;
    padding: 4px 0;
}
.topnav-profile-menu a,
.topnav-profile-menu button {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
    padding: 8px 14px;
    color: var(--color-text-body);
    text-decoration: none;
    font-size: 0.9rem;
    white-space: nowrap;
}
.topnav-profile-menu a:hover,
.topnav-profile-menu a:focus,
.topnav-profile-menu button:hover,
.topnav-profile-menu button:focus {
    background: var(--color-bg-surface);
    color: var(--color-primary);
}
/* Klick-fångare bakom profilmenyn (ADR-0025, beslut 16): stänger menyn vid
   klick var som helst utanför — även när "Mer"-arket öppnas via BottomNav,
   så menyn (1100) aldrig ligger kvar över arket (1055). */
.topnav-profile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1099;
}
/* Framstegsbredd i tiondelar (UIUX-08). Finns som klasser eftersom F1 förbjuder nya
   inline-styles i .razor — en progress-bar behöver ändå en beräknad bredd. */
.progress-fill-0   { width: 0; }
.progress-fill-10  { width: 10%; }
.progress-fill-20  { width: 20%; }
.progress-fill-30  { width: 30%; }
.progress-fill-40  { width: 40%; }
.progress-fill-50  { width: 50%; }
.progress-fill-60  { width: 60%; }
.progress-fill-70  { width: 70%; }
.progress-fill-80  { width: 80%; }
.progress-fill-90  { width: 90%; }
.progress-fill-100 { width: 100%; }

.mw-500 { max-width: 500px; }
.minw-640 { min-width: 640px; }
.minw-200 { min-width: 200px; }
.minw-160 { min-width: 160px; }
.fs-95 { font-size: 0.95em; }
.fs-70 { font-size: .7rem; }
.mw-480 { max-width: 480px; }
.mw-440 { max-width: 440px; }
.mw-420 { max-width: 420px; }
.mw-360 { max-width: 360px; }
.mw-320 { max-width: 320px; }
.mw-220 { max-width: 220px; }
.fs-65 { font-size: 0.65rem; }
.ls-05-sm { letter-spacing: 0.05em; font-size: 0.7rem; }
.touch-manipulation { touch-action: manipulation; }
.col-w-90  { width: 90px; }
.col-w-100 { width: 100px; }
.col-w-110 { width: 110px; }
.col-w-140 { width: 140px; }
.col-w-180 { width: 180px; }
.fs-95 { font-size: 0.95rem; }

/* ============================================
   K1 — Komponentlager: alert, token-drivna varianter

   .alert fanns INTE i app.css alls — den kom rakt från bootstrap.min.css med
   hårdkodade pastellfärger (.alert-success = #d1e7dd på #0f5132). I mörkt tema
   renderades alltså varje "Sparat"- eller "Ingen klubb vald"-ruta som en ljus
   platta mitt på mörk bakgrund, helt utanför tokensystemet. Det gällde 112 råa
   förekomster i 81 sidor OCH alla 67 anrop av <ErrorAlert>, som själv renderar
   .alert-danger.

   Fixen ligger medvetet på Bootstrap-klasserna i stället för på en ny komponent:
   då rättas alla anropsställen på en gång, utan markup-ändring och utan att bryta
   de tester som använder .alert-danger som markör för att ErrorAlert renderat.
   app.css laddas efter bootstrap.min.css (index.html rad 45-46), så samma
   specificitet vinner.

   Mönstret är neutral yta + token-färgad vänsterkant, samma idiom som
   .status-badge-neutral nedan. Båda tokens är temamedvetna, så mörkt tema följer
   med automatiskt utan egen media query.
   ============================================ */
.alert {
    background-color: var(--color-bg-surface);
    color: var(--color-text-body);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-border);
}

.alert-danger  { border-left-color: var(--color-danger); }
.alert-success { border-left-color: var(--color-success); }
.alert-warning { border-left-color: var(--color-warning); }
.alert-info    { border-left-color: var(--color-info); }

/* Länkar i en alert ska följa variantens ton, inte Bootstraps .alert-link-hex. */
.alert-danger .alert-link  { color: var(--color-danger); }
.alert-success .alert-link { color: var(--color-success); }
.alert-warning .alert-link { color: var(--color-warning); }
.alert-info .alert-link    { color: var(--color-info); }

/* ============================================
   K1 — Komponentlager: StatusBadge, token-drivna kind-klasser
   (ersätter råa Bootstrap bg-*, DESIGNSYSTEM-TOKENS-TEAL-PETROL.md)
   ============================================ */
.status-badge-positive { background-color: var(--color-success); color: #fff; }
.status-badge-negative { background-color: var(--color-danger); color: #fff; }
.status-badge-warning  { background-color: var(--color-warning); color: #fff; }
.status-badge-info     { background-color: var(--color-info); color: #fff; }
/* Muted-badgen ärvde --color-outline-secondary som bakgrund men behöll vit text hårdkodad.
   Ljust tema klarar 4.69:1 mot vitt, men i mörkt tema blir samma token ljus (#a0aab5, tänkt
   som TEXT mot mörk botten, inte som badge-bakgrund med vit text ovanpå) — bara 2.35:1, under
   AA. --color-outline-contrast-text är redan det AA-vettade kontrastparet för just en ifylld
   outline-secondary-yta (svart i mörkt tema, vitt i ljust) — samma fix som outline-knapparnas
   hover, se raderna ovan. */
.status-badge-muted    { background-color: var(--color-outline-secondary); color: var(--color-outline-contrast-text); }
.status-badge-neutral  { background-color: var(--color-bg-surface); color: var(--color-text-body); border: 1px solid var(--color-border); }
/* Petrol/"Intern" (§6) — samma primärton + textfärgpar som .btn-primary, som redan
   löser mörkt-tema-kravet (ljus teal-knapp kräver mörk text i mörkt tema). */
.status-badge-internal { background-color: var(--color-primary); color: var(--color-primary-btn-text, #fff); }

/* ============================================
   Matchcenter — flikremsa (M-MATCHCENTER, PR B)
   ============================================ */
.matchcenter-tabs {
    display: flex;
    /* UIUX-20: wrap gav 2-3 rader ostylad text på mobil när flikarna inte
       fick plats (samma defekt som .club-tabs hade) — skrolla i stället. */
    flex-wrap: nowrap;
    justify-content: center;
    justify-content: safe center;
    gap: var(--space-1, 4px);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--color-border);
    /* Kantfade: en flik som svämmar över högerkanten ska synas vara avklippt,
       inte se ut som att den inte finns. Ofarlig no-op när allt får plats. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}

.matchcenter-tabs::-webkit-scrollbar {
    display: none;
}

.matchcenter-tab {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    font-weight: 500;
    color: var(--color-nav-inactive, #5c636b);
    cursor: pointer;
    flex: 0 0 auto;
    white-space: nowrap;
    /* UIUX-06 §2e: minst 44px touch-target (WCAG 2.5.5), samma krav som .bottom-nav-item/.app-sidebar-item. */
    min-height: 44px;
}

.matchcenter-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 700;
}

/* Ikonflikar (Matchcenter och Coach). Etiketterna trängdes på mobil — fyra ord i rad
   klipptes mitt i, precis som "Viktig information" gjorde på anslagstavlan. Ikonen bär
   betydelsen, och namnet ligger på knappen för skärmläsare (ADR-0025: SVG:n är alltid
   aria-hidden). Kvadratisk yta så att träffytan blir minst 44×44 även utan text. */
.matchcenter-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 56px;
    padding-inline: var(--space-2, 8px);
}

.matchcenter-tab-icon .app-icon {
    inline-size: 22px;
    block-size: 22px;
}

/* UIUX-uppföljning 2026-09-15: Matchcenters egen flikrad staplar ikon över en synlig etikett
   (samma mönster som .bottom-nav-item) i stället för att bara lita på aria-label/title — de
   ikonerna gick inte att skilja åt utan att gissa eller hovra. Coach-flikarna (som fortfarande
   delar .matchcenter-tab-icon) rörs inte av den här regeln. */
.matchcenter-tab-labeled {
    flex-direction: column;
    gap: 2px;
    min-inline-size: 64px;
}

.matchcenter-tab-label {
    font-size: 0.7rem;
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* UIUX-19 §3: .club-tabs/.club-tab är borttagna. Klubbytan navigeras med en ShortcutRow
   enligt mockupen klubb-{desktop,mobile}-layout, inte med en flikremsa. Reglerna hade inga
   andra användare (endast ClubHome.razor) och togs bort i stället för att bli död CSS. */

/* Klubbens informationskort — logotyp bredvid namn på startsidan. */
.club-home-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: var(--radius-sm, 8px);
}

/* PR B: extraherade tabell-/cellbredder som tidigare låg som inline style="" */
.availability-status-col {
    min-width: 180px;
}

.result-totals-table {
    max-width: 540px;
}

/* Matchcenter-uppföljning commit 4: klickbar kort-header/rad (DecisionSupportPanel) —
   extraherad i stället för inline style="cursor:pointer;touch-action:manipulation" (F1). */
.decision-support-toggle {
    cursor: pointer;
    touch-action: manipulation;
}

/* Matchcenter-uppföljning commit 5: notrader i InternalNotesCard — separator mellan
   anteckningar utan hand-rullad inline style="border-bottom:...". */
.internal-note-item {
    border-bottom: 1px solid var(--color-border);
}

.internal-note-item:last-child {
    border-bottom: none;
}

/* ============================================
   Coach — träningsplanering (UIUX-12)
   Egen namnrymd. Följer mockuperna coach-traning-oversikt / -grupper / -scheman /
   -traningspass / -editor. Alla färger via tokens, inga hex.
   ============================================ */

/* Sidhuvud: rubrik till vänster, handlingar till höger, bryter till egen rad på mobil. */
.coach-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    margin-bottom: var(--space-2, 8px);
}

.coach-page-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
}

/* UI-RAMVERK §2: knappar av samma slag i samma rad/grupp ska ha samma storlek. Normaliseras
   här i stället för att lita på att varje anropsställe råkar välja samma btn-storleksklass —
   en primär + en sekundär knapp bredvid varandra får aldrig olika höjd eller textstorlek. */
.coach-page-head-actions .btn,
.coach-action-item .btn,
.coach-step-nav .btn,
.coach-schedule-next .btn,
.coach-btn-row .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    padding: var(--space-2, 8px) var(--space-4, 16px);
    font-size: 0.95rem;
    line-height: 1.2;
}

.coach-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
}

/* "Välj X" + "Lägg till" ska stå bredvid varandra — utan detta tar select 100 % bredd och
   knappen hamnar på egen rad. */
.coach-btn-row .form-select,
.coach-btn-row .form-control {
    flex: 1 1 180px;
    min-width: 0;
}

/* Två fält som hör ihop (start–slut, från–till) ligger bredvid varandra även i en smal
   kolumn — mockupen visar dem på en rad, inte staplade. */
.coach-field-pair {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-2, 8px);
}

.coach-field-pair .form-control {
    min-width: 0;
}

/* <legend class="form-label"> ärver annars webbläsarens stora legend-typsnitt och blir en
   rubrik i stället för en fältetikett. */
legend.form-label {
    font-size: inherit;
    line-height: inherit;
    float: none;
    width: auto;
}

/* Knappar som fyller bredden i en sidopanel — samma höjd sinsemellan. */
.coach-btn-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}

.coach-btn-stack .btn {
    width: 100%;
    min-height: 44px;
    font-size: 0.95rem;
}

.coach-page-lead {
    color: var(--color-text-muted);
    margin-bottom: var(--space-4, 16px);
}

/* Statuslivscykel-flikar (Aktiva/Arkiverade, Aktiva/Utkast/Pausade). Vänsterjusterade —
   till skillnad från arbetsytans centrerade flikrad (UI-RAMVERK §3 Mönster B) är detta ett
   listfilter inne på en sida, precis som mockuperna visar. */
.coach-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-4, 16px);
}

.coach-tab {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    font-weight: 500;
    color: var(--color-nav-inactive, #5c636b);
    cursor: pointer;
    min-height: 44px;
}

.coach-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 700;
}

.coach-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    padding: 0 var(--space-2, 8px);
    border-radius: var(--radius-sm, 8px);
    background-color: var(--color-primary-soft, #e2eff2);
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 700;
}

/* Nyckeltalsraden överst i översikten: en enda kortyta med ikon + text per mätvärde. */
.coach-metric-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2, 8px);
    background-color: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--shadow-card, none);
    padding: var(--space-4, 16px);
    margin-bottom: var(--space-4, 16px);
}

.coach-metric {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    min-width: 0;
}

.coach-metric + .coach-metric {
    border-left: 1px solid var(--color-border);
    padding-left: var(--space-3, 12px);
}

/* Mockupen skriver mätvärdet som en mening på EN rad — "2 pass idag", inte ett stort tal
   över en etikett. Bara siffran är fet. */
.coach-metric-text {
    min-width: 0;
    font-size: 0.95rem;
    color: var(--color-text-body);
}

.coach-metric-value {
    font-weight: 700;
}

.coach-metric-label {
    color: var(--color-text-muted);
}

.coach-metric-attention .coach-metric-value {
    color: var(--color-warning);
}

@media (max-width: 767.98px) {
    .coach-metric-strip {
        grid-template-columns: repeat(2, 1fr);
        row-gap: var(--space-3, 12px);
    }

    .coach-metric:nth-child(odd) {
        border-left: none;
        padding-left: 0;
    }
}

/* "Behöver åtgärd" / "Behöver ses över" — rad med ikon, text och handling till höger. */
.coach-action-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.coach-action-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-3, 12px) 0;
    border-bottom: 1px solid var(--color-border);
    min-height: 44px;
}

.coach-action-item:last-child {
    border-bottom: none;
}

.coach-action-body {
    flex: 1 1 240px;
    min-width: 0;
}

/* Sidopanelernas rader (Planering, Kopplad planering) är smalare — där ska texten och länken
   ändå rymmas på samma rad, som i mockupen. */
.coach-side-list .coach-action-body {
    flex: 1 1 80px;
}

/* Handlingsknappen i en tabellrad ska inte radbrytas till två rader. */
.table .btn {
    white-space: nowrap;
}

.coach-action-title {
    font-weight: 600;
    color: var(--color-text-body);
}

.coach-action-meta {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.coach-action-reason {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-warning);
}

/* Tomläge för en panel som aldrig får döljas vid noll (UI-RAMVERK §3). */
.coach-zero-note {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    color: var(--color-text-muted);
    margin: 0;
}

/* Sidopanelernas informationskort ("Om träningsgrupper", "Så fungerar scheman"). */
.coach-info-note {
    display: flex;
    gap: var(--space-3, 12px);
    align-items: flex-start;
    background-color: var(--color-primary-soft, #e2eff2);
    border-radius: var(--radius-md, 12px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    color: var(--color-text-body);
    font-size: 0.88rem;
}

/* Schemakort i schemalistan: ikon | uppgifter | nästa pass + handling. */
.coach-schedule-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4, 16px);
}

.coach-schedule-body {
    flex: 1 1 260px;
    min-width: 0;
}

.coach-schedule-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 8px);
    margin-bottom: var(--space-2, 8px);
}

.coach-schedule-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text-body);
}

.coach-detail-line {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    font-size: 0.88rem;
    color: var(--color-text-muted);
}

.coach-detail-line + .coach-detail-line {
    margin-top: var(--space-1, 4px);
}

.coach-detail-line-attention {
    color: var(--color-warning);
    font-weight: 600;
}

.coach-schedule-next {
    display: flex;
    align-items: center;
    gap: var(--space-4, 16px);
    padding-left: var(--space-4, 16px);
    border-left: 1px solid var(--color-border);
}

@media (max-width: 575.98px) {
    .coach-schedule-next {
        border-left: none;
        padding-left: 0;
        width: 100%;
        justify-content: space-between;
    }
}

.coach-next-label {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.coach-next-value {
    display: block;
    font-weight: 700;
    color: var(--color-primary);
}

/* Förhandsgranskningen i schemaeditorn: stort passantal + kommande datum. */
.coach-preview-count {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary);
}

.coach-preview-unit {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.coach-preview-dates {
    list-style: none;
    margin: var(--space-2, 8px) 0 0;
    padding: 0;
}

.coach-preview-dates li {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-1, 4px) 0;
    font-size: 0.9rem;
}

/* Undantagsdatum — chip-lista med borttagningsknapp. */
.coach-exception-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    margin-top: var(--space-2, 8px);
}

/* Stegindikator i passeditorn (Grunduppgifter → Målgrupp → Ledare). */
.coach-stepper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    margin-bottom: var(--space-4, 16px);
}

.coach-step {
    appearance: none;
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    flex: 1 1 180px;
    min-height: 44px;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    background-color: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 12px);
    color: var(--color-text-muted);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.coach-step.active {
    border-color: var(--color-primary);
    color: var(--color-text-body);
    font-weight: 700;
}

.coach-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 50%;
    background-color: var(--color-primary-soft, #e2eff2);
    color: var(--color-primary);
    font-size: 0.85rem;
    font-weight: 700;
}

.coach-step.active .coach-step-number,
.coach-step.done .coach-step-number {
    background-color: var(--color-primary-btn);
    color: var(--color-primary-btn-text);
}

.coach-step-nav {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2, 8px);
    margin-top: var(--space-4, 16px);
}

/* Sammanfattningspanel (Publicering) — etikettrad med ikon. */
.coach-summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.coach-summary-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3, 12px);
    padding: var(--space-3, 12px) 0;
    border-bottom: 1px solid var(--color-border);
}

.coach-summary-item:last-child {
    border-bottom: none;
}

.coach-summary-label {
    display: block;
    font-weight: 600;
    color: var(--color-text-body);
}

.coach-summary-value {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* Passdetaljens fakta- och statusrad. */
.coach-fact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3, 12px);
}

.coach-fact {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    font-size: 0.9rem;
    color: var(--color-text-body);
    min-width: 0;
}

.coach-status-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 12px);
}

.coach-status-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4, 16px);
}

.coach-checkin-open {
    color: var(--color-success);
    font-weight: 600;
}

.coach-checkin-closed {
    color: var(--color-text-muted);
    font-weight: 600;
}

/* Sökfält med ikon i listsidorna. */
.coach-search {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    max-width: 420px;
    margin-bottom: var(--space-4, 16px);
    padding: 0 var(--space-3, 12px);
    background-color: var(--color-bg-input, #fff);
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-md, 12px);
}

.coach-search input {
    border: none;
    background: none;
    flex: 1 1 auto;
    min-height: 44px;
    color: var(--color-text-body);
}

.coach-search input:focus {
    outline: none;
}

/* TRÄNINGSFÖRSLAG-01: spelarraden i "Mina spelare" bär två separata klickmål (profilen och
   "Skicka förslag") — syskon, inte en knapp nästlad i en länk (se motivering i
   CoachPlayersPanel.razor). */
.coach-player-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3, 12px);
    padding: var(--space-2, 8px) 0;
    border-bottom: 1px solid var(--color-border);
}

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

.coach-player-link {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    min-width: 0;
    flex: 1 1 200px;
    min-height: 44px;
    color: var(--color-text-body);
    text-decoration: none;
}

.coach-player-name {
    overflow-wrap: break-word;
}

.coach-player-suggest {
    flex: 0 0 auto;
    min-height: 44px;
}

/* Coach-avatarer i grupptabellen. */
.coach-avatar-row {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    flex-wrap: wrap;
}

/* NAV-CONSOLIDATION-A2: matchrader som öppnar Matchcenter. Raden är en
   mus-genväg — den tillgängliga vägen är den riktiga <a>-länken i radens
   motståndarcell, så raden behöver ingen egen tabindex/roll. Extraherad
   klass i stället för inline style (F1). */
.matchrow-clickable {
    cursor: pointer;
    touch-action: manipulation;
}

.matchrow-clickable:hover {
    background-color: var(--color-bg-surface, rgba(0, 0, 0, .03));
}

/* ============================================
   K1 — Rörelse: respektera prefers-reduced-motion (DESIGNSYSTEM-TOKENS-TEAL-PETROL.md §Övriga regler)
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   UIUX-14 — Klubbens undersidor (inställningar, kommunikation, medlemmar, ansökningar)
   Mockuper: klubb-installningar*, klubb-kommunikation*, klubb-medlemmar*, klubb-kontoansokningar*.
   Ligger här (inte i .razor.css) eftersom fitnessgaten F2 förbjuder hex i .razor.css medan
   UI-RAMVERK §2 kräver fallback på bakgrundsvariabler — app.css är tokenkällan och undantagen.
   ============================================ */

/* -- Brödsmula -------------------------------------------------------- */
.app-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 8px);
    margin-bottom: var(--space-2, 8px);
    font-size: 0.9rem;
}

.app-breadcrumb-link { color: var(--color-primary); text-decoration: none; }
.app-breadcrumb-link:hover,
.app-breadcrumb-link:focus-visible { text-decoration: underline; }
.app-breadcrumb-sep,
.app-breadcrumb-current { color: var(--color-text-muted, #5b6b70); }

/* -- Inställningsnavet: förloppsbanner + områdesrader ------------------ */
.settings-progress {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    background-color: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border, #dfe5e7);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--shadow-card, none);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    margin-bottom: var(--space-3, 12px);
}

.settings-progress-text { font-weight: 600; color: var(--color-text-body, #14343d); }

.settings-areas {
    background-color: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border, #dfe5e7);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--shadow-card, none);
    overflow: hidden;
}

.settings-area {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    /* Hela raden är klickytan (UI-RAMVERK §3 Kortanatomi), rejält över 44px. */
    min-height: 72px;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    text-decoration: none;
    color: inherit;
    border-top: 1px solid var(--color-border, #dfe5e7);
}

.settings-area:first-child { border-top: none; }
.settings-area:hover { background-color: var(--color-primary-soft, #e2eff2); }
.settings-area:focus-visible { outline: 2px solid var(--color-primary, #0f6f7f); outline-offset: -2px; }

.settings-area-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 4px);
    flex: 1 1 auto;
    min-width: 0;
}

.settings-area-title { font-weight: 600; color: var(--color-text-body, #14343d); }
.settings-area-subtitle { font-size: 0.85rem; color: var(--color-text-muted, #5b6b70); }
.settings-area-chevron { flex: 0 0 auto; color: var(--color-text-muted, #5b6b70); }

.settings-note,
.settings-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2, 8px);
    margin-top: var(--space-3, 12px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border-radius: var(--radius-md, 12px);
    font-size: 0.9rem;
}

.settings-note { background-color: var(--color-info-soft, #eaf2f8); color: var(--color-text-muted, #5b6b70); }
.settings-warning { background-color: var(--color-warning-soft, #fdf3e3); color: var(--color-text-body, #14343d); }

/* -- Gemensamt inställningsrutnät ------------------------------------- */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3, 12px);
    align-items: start;
}

.settings-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 991.98px) {
    .settings-grid,
    .settings-grid-3 { grid-template-columns: 1fr; }
}

/* Etikett till vänster, växel till höger - som mockupens synlighetslista. */
.settings-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    min-height: 44px;
    padding: var(--space-2, 8px) 0;
    border-bottom: 1px solid var(--color-border, #dfe5e7);
}

.settings-toggle-last { border-bottom: none; }
.settings-toggle .form-check { margin: 0; flex: 0 0 auto; }
.settings-toggle .form-check-label { margin: 0; }

/* Ledande växel (växeln först, etiketten efter) - AI-fliken. */
.settings-toggle-lead { justify-content: flex-start; border-bottom: none; }

.settings-savebar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2, 8px);
    margin-top: var(--space-3, 12px);
    flex-wrap: wrap;
}

.settings-inline-error { color: var(--color-danger, #b3261e); font-size: 0.9rem; margin: 0; }
.settings-inline-ok { color: var(--color-success, #1c7a4a); font-size: 0.9rem; margin: 0; }

/* Nyckel/värde-rad i kort (BITS-koppling, synkstatus, budget). */
.kv-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    min-height: 44px;
    padding: var(--space-2, 8px) 0;
    border-bottom: 1px solid var(--color-border, #dfe5e7);
}

.kv-row:last-child { border-bottom: none; }
.kv-row-strong { border-top: 1px solid var(--color-border, #dfe5e7); border-bottom: none; }
.kv-label { color: var(--color-text-muted, #5b6b70); }

.kv-value {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    text-align: right;
}

/* -- Identitetskortet (logotyp + fält) -------------------------------- */
.identity-grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4, 16px);
}

@media (max-width: 575.98px) {
    .identity-grid { grid-template-columns: 1fr; }
}

.identity-logo { display: flex; flex-direction: column; gap: var(--space-2, 8px); }

.identity-logo-frame {
    width: 128px;
    height: 128px;
    display: grid;
    place-items: center;
    border: 1px dashed var(--color-border, #dfe5e7);
    border-radius: var(--radius-md, 12px);
    background-color: var(--color-bg-surface, #f5f7f8);
    overflow: hidden;
}

.identity-logo-frame img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Filinmatningen är dold bakom knappetiketten men behåller tangentbordsfokus. */
.identity-logo-btn { position: relative; overflow: hidden; }
.identity-logo-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.identity-fields { min-width: 0; }

/* -- BITS-statusbanner ------------------------------------------------ */
.bits-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4, 16px);
    background-color: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border, #dfe5e7);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--shadow-card, none);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    margin-bottom: var(--space-3, 12px);
}

.bits-banner-item { display: inline-flex; align-items: center; gap: var(--space-2, 8px); }
.bits-banner-label { color: var(--color-text-muted, #5b6b70); font-size: 0.85rem; }
.bits-banner-idle { opacity: 0.85; }

/* -- AI och protokoll ------------------------------------------------- */
.ai-subheading {
    font-size: 0.95rem;
    font-weight: 600;
    margin: var(--space-3, 12px) 0 var(--space-2, 8px);
    color: var(--color-text-body, #14343d);
}

.ai-model-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3, 12px);
    border: 1px solid var(--color-border, #dfe5e7);
    border-radius: var(--radius-md, 12px);
    padding: var(--space-3, 12px);
}

.ai-model-text { display: flex; flex-direction: column; gap: var(--space-1, 4px); flex: 1 1 auto; min-width: 0; }
.ai-model-hint { font-size: 0.85rem; color: var(--color-text-muted, #5b6b70); }

/* Leverantörsplatta - monokrom bokstavsplatta i stället för leverantörslogotyper
   (UI-RAMVERK §2: en enda ikonfamilj, inga färgglada främmande glyfer). */
.ai-provider-plate {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: var(--radius-sm, 8px);
    background-color: var(--color-primary-soft, #e2eff2);
    color: var(--color-primary, #0f6f7f);
    font-weight: 700;
    font-size: 0.8rem;
}

.ai-provider-plate-sm { width: 28px; height: 28px; font-size: 0.7rem; }
.ai-provider-cell { display: flex; align-items: center; gap: var(--space-2, 8px); font-weight: 600; }
.ai-key-mask { font-variant-numeric: tabular-nums; letter-spacing: 0.05em; }
.ai-key-editor-row > td { border-top: none; padding-top: 0; }

.ai-key-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    flex-wrap: wrap;
    margin-top: var(--space-1, 4px);
}

.ai-key-note {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    margin: var(--space-3, 12px) 0 0;
    font-size: 0.85rem;
    color: var(--color-text-muted, #5b6b70);
}

.ai-budget-amount { display: flex; align-items: baseline; gap: var(--space-2, 8px); margin-bottom: var(--space-2, 8px); }
.ai-budget-amount strong { font-size: 1.75rem; line-height: 1.1; color: var(--color-text-body, #14343d); }
.ai-budget-of { color: var(--color-text-muted, #5b6b70); }
.ai-budget-bar { margin-bottom: var(--space-2, 8px); }
.ai-budget-note { font-size: 0.85rem; color: var(--color-text-muted, #5b6b70); margin-bottom: var(--space-2, 8px); }
.ai-share { gap: var(--space-1, 4px); }
.ai-share .form-control { width: 5rem; text-align: right; }

/* -- Linjär mätare (ProgressBar) -------------------------------------- */
.progress-bar-linear { width: 100%; line-height: 0; }
.progress-bar-linear svg { width: 100%; height: 6px; display: block; }
.progress-bar-linear-track { fill: var(--color-bg-surface, #eceff1); }
.progress-bar-linear-fill-normal { fill: var(--color-primary, #0f6f7f); }
.progress-bar-linear-fill-low { fill: var(--color-warning, #b8791b); }
.progress-bar-linear-fill-critical { fill: var(--color-danger, #b3261e); }

/* Mobil: områdesraderna blir fristående kort, subtiteln stryks (som mockupen). */
@media (max-width: 767.98px) {
    .settings-areas {
        background: none;
        border: none;
        box-shadow: none;
        overflow: visible;
        display: flex;
        flex-direction: column;
        gap: var(--space-2, 8px);
    }

    .settings-area {
        background-color: var(--color-bg-card, #fff);
        border: 1px solid var(--color-border, #dfe5e7);
        border-radius: var(--radius-md, 12px);
        box-shadow: var(--shadow-card, none);
        flex-wrap: wrap;
    }

    .settings-area-subtitle { display: none; }
}

/* UIUX-14 / UI-RAMVERK §2: knappar av samma slag ska ha samma storlek. En handlingsrad
   markeras med .action-row, som tvingar samtliga knappar i raden till samma höjd och
   textstorlek oavsett om de är primära eller sekundära. Skillnad i storlek inom samma
   grupp är alltid en defekt, så regeln görs strukturell i stället för att lita på
   att varje anropsställe råkar välja samma btn-klass. */
.action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 8px);
}

.action-row > .btn,
.action-row > .action-row-item > .btn {
    min-height: 44px;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
}

/* Lodrät variant (kort med staplade handlingar) - knapparna fyller bredden lika. */
.action-row-stacked {
    flex-direction: column;
    align-items: stretch;
}

/* -- UIUX-14 F/E/G: nyckeltalsrad, "Att hantera", listrader, tvådelad granskning -- */

/* Nyckeltalsrad som EN sammanhållen remsa med avdelare (mockupernas KPI-panel), till
   skillnad från KpiTile som är fristående kort. */
.kpi-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    background-color: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border, #dfe5e7);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--shadow-card, none);
    padding: var(--space-3, 12px) var(--space-2, 8px);
    margin-bottom: var(--space-3, 12px);
}

.kpi-strip-item {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    flex: 1 1 0;
    min-width: 160px;
    padding: var(--space-1, 4px) var(--space-3, 12px);
    border-left: 1px solid var(--color-border, #dfe5e7);
}

.kpi-strip-item:first-child { border-left: none; }

.kpi-strip-text { display: flex; flex-direction: column; min-width: 0; }

.kpi-strip-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text-body, #14343d);
}

.kpi-strip-label { font-size: 0.85rem; color: var(--color-text-muted, #5b6b70); }

.kpi-strip-item-warning .kpi-strip-value { color: var(--color-warning, #b8791b); }

@media (max-width: 767.98px) {
    .kpi-strip-item {
        flex: 1 1 50%;
        min-width: 0;
        border-left: none;
    }
}

/* Rubrikrad med handling till höger. */
.page-heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    flex-wrap: wrap;
    margin-bottom: var(--space-3, 12px);
}

/* "Att hantera"-rad: ikon, text, handling. */
.manage-row {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    min-height: 56px;
    padding: var(--space-2, 8px) 0;
    border-bottom: 1px solid var(--color-border, #dfe5e7);
}

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

.manage-row-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.manage-row-detail { font-size: 0.85rem; color: var(--color-text-muted, #5b6b70); }

.area-summary { color: var(--color-text-muted, #5b6b70); margin-bottom: var(--space-3, 12px); }

/* Listrad inuti ett kort (senaste anslag, kommande möten, medlemslistor). */
.list-row {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    min-height: 56px;
    padding: var(--space-2, 8px) 0;
    border-bottom: 1px solid var(--color-border, #dfe5e7);
    text-decoration: none;
    color: inherit;
}

.list-row:last-of-type { border-bottom: none; }
.list-row:hover { background-color: var(--color-primary-soft, #e2eff2); }
.list-row:focus-visible { outline: 2px solid var(--color-primary, #0f6f7f); outline-offset: -2px; }

.list-row-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 500;
}

.list-row-meta { font-size: 0.85rem; color: var(--color-text-muted, #5b6b70); white-space: nowrap; }

.list-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    min-height: 44px;
    margin-top: var(--space-2, 8px);
    color: var(--color-primary, #0f6f7f);
    text-decoration: none;
    font-weight: 500;
}

.list-more:hover { text-decoration: underline; }

@media (max-width: 575.98px) {
    /* Metadata staplas under titeln på smal skärm i stället för att trängas ihop. */
    .list-row { flex-wrap: wrap; }
    .list-row-meta { white-space: normal; }
}

/* -- Tvådelad granskningsyta (kontoansökningar) ------------------------ */
.review-split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-3, 12px);
    align-items: start;
}

@media (max-width: 991.98px) {
    .review-split { grid-template-columns: 1fr; }
}

/* Vald rad i listan speglas i panelen till höger. */
.review-item {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    width: 100%;
    min-height: 64px;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border: 1px solid transparent;
    border-radius: var(--radius-md, 12px);
    background: none;
    text-align: left;
    cursor: pointer;
    color: inherit;
}

.review-item:hover { background-color: var(--color-primary-soft, #e2eff2); }

.review-item-active {
    border-color: var(--color-primary, #0f6f7f);
    background-color: var(--color-primary-soft, #e2eff2);
}

.review-item-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.review-item-sub { font-size: 0.85rem; color: var(--color-text-muted, #5b6b70); }

/* Numrerade steg i granskningsguiden. */
.review-step {
    display: flex;
    gap: var(--space-3, 12px);
    padding: var(--space-3, 12px) 0;
    border-bottom: 1px solid var(--color-border, #dfe5e7);
}

.review-step:last-of-type { border-bottom: none; }

.review-step-number {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--color-primary, #0f6f7f);
    color: var(--color-primary, #0f6f7f);
    font-weight: 600;
    font-size: 0.85rem;
}

.review-step-body { flex: 1 1 auto; min-width: 0; }

.review-step-title {
    font-weight: 600;
    margin-bottom: var(--space-2, 8px);
    color: var(--color-text-body, #14343d);
}

/* -- Anslagseditorn --------------------------------------------------- */
.editor-split {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-3, 12px);
    align-items: start;
}

@media (max-width: 991.98px) {
    .editor-split { grid-template-columns: 1fr; }
}

/* Vald affisch innan anslaget sparats. Hela bilden, aldrig beskuren — men lägre tak än i det
   publicerade anslaget: här är den en kontroll i ett formulär, inte innehållet man kommit för. */
.bulletin-editor-preview img {
    display: block;
    inline-size: 100%;
    max-inline-size: 320px;
    max-block-size: 40vh;
    object-fit: contain;
    border-radius: var(--radius-md, 12px);
    border: 1px solid var(--color-border, #dfe5e7);
}

/* Förhandsgranskningen ska likna det publicerade anslaget, inte formuläret. */
.preview-card {
    border: 1px solid var(--color-border, #dfe5e7);
    border-radius: var(--radius-md, 12px);
    padding: var(--space-4, 16px);
    background-color: var(--color-bg-surface, #f8fafb);
}

.preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 8px);
    margin-bottom: var(--space-2, 8px);
}

.preview-body { white-space: pre-wrap; margin-bottom: var(--space-3, 12px); }

.preview-meta {
    border-top: 1px solid var(--color-border, #dfe5e7);
    padding-top: var(--space-2, 8px);
    font-size: 0.85rem;
    color: var(--color-text-muted, #5b6b70);
}

/* Utskickslistans utfällbara leveransöversikt. */
.delivery-detail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4, 16px);
    padding: var(--space-3, 12px);
    background-color: var(--color-bg-surface, #f8fafb);
    border-radius: var(--radius-md, 12px);
}

.delivery-channel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 8px);
    min-height: 36px;
}

.delivery-pct { font-weight: 600; }
.delivery-pct-full { color: var(--color-success, #1c7a4a); }
.delivery-pct-partial { color: var(--color-warning, #b8791b); }

.delivery-subhead {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted, #5b6b70);
    margin-bottom: var(--space-2, 8px);
}

/* -- UIUX-14 E: medlemsregister och medlemsprofil ---------------------- */
.members-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    margin-bottom: var(--space-3, 12px);
}

.members-search { flex: 1 1 260px; max-width: 380px; }

.role-chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1, 4px); }

.member-hero {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    flex-wrap: wrap;
    background-color: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border, #dfe5e7);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--shadow-card, none);
    padding: var(--space-4, 16px);
    margin-bottom: var(--space-3, 12px);
}

.member-hero-text { flex: 1 1 auto; min-width: 0; }

/* Riskzon - destruktiva atgarder, hopfallbar och stangd som standard. */
.danger-zone { border-color: var(--color-warning, #b8791b); }

.danger-zone-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    width: 100%;
    min-height: 56px;
    padding: var(--space-2, 8px) 0;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    color: inherit;
}

.danger-zone-body { border-top: 1px solid var(--color-border, #dfe5e7); margin-top: var(--space-2, 8px); }

/* Mobilt medlemskort (klubb-medlemmar-mobile) - ersatter tabellen under md. */
.member-cards { display: flex; flex-direction: column; gap: var(--space-2, 8px); }

.member-card {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    min-height: 64px;
    padding: var(--space-3, 12px);
    background-color: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border, #dfe5e7);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--shadow-card, none);
    text-decoration: none;
    color: inherit;
}

.member-card:hover { background-color: var(--color-primary-soft, #e2eff2); }
.member-card:focus-visible { outline: 2px solid var(--color-primary, #0f6f7f); outline-offset: -2px; }
.member-card-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }


/* --- Upptagetindikator (UI-RAMVERK §3.1) ------------------------------------
   Global, inte scoped: delas av BusyButton (knapp) och BusyBanner (sektion).
   Egen ring i stället för Bootstraps spinner-border — den ärver currentColor och
   fungerar därför i alla knappvarianter och båda teman utan en variant per färg. */
.busy-dot {
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    margin-right: 0.45em;
    vertical-align: -0.1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: busy-dot-spin 0.7s linear infinite;
}

@keyframes busy-dot-spin {
    to { transform: rotate(360deg); }
}

/* Respektera valet att slippa rörelse: ringen står still men syns kvar, så
   återkopplingen "något pågår" finns kvar utan animation. */
@media (prefers-reduced-motion: reduce) {
    .busy-dot {
        animation: none;
        border-right-color: currentColor;
        opacity: 0.55;
    }
}

/* Resultatglyf på aktiveringssidan (✓/✗). Ersätter två inline style="font-size:2rem"
   — samma sort som städats bort på övriga ytor (F1). */
.auth-result-glyph { font-size: 2rem; line-height: 1; }
/* Klarmarkeringen efter en protokollskanning. Måttet låg som inline style på elementet. */
.scan-klar-glyf { font-size: 2.5rem; line-height: 1; }

/* ============================================
   Textmarkering (::selection)
   ============================================
   Appen stylade INTE ::selection alls, så markerad text ritades av webbläsarens standard —
   en mycket ljus platta. På mörk bakgrund ligger appens text ljus, och ljust på ljust gör
   markeringen oläslig: den DÖLJER precis den text den ska lyfta fram. Beställarrapport
   2026-08-14: "väldigt ljust och döljer text".

   Båda egenskaperna sätts alltid tillsammans. Sätter man bara background ärver texten sin
   vanliga färg, och då är man tillbaka i samma fel — det var exakt så bootstraps .table-active
   gick sönder (PR 616). Se docs/CONTEXT/THEME_TOKENS.md.

   ::selection och ::-moz-selection måste stå i VAR SIN regel. Okänd selektor i en gruppering
   ogiltigförklarar hela regeln, så en kombinerad lista hade tystnat i båda webbläsarna. */
::selection {
    background-color: var(--color-selection-bg, #bfdde6);
    color: var(--color-selection-text, #06202a);
}

::-moz-selection {
    background-color: var(--color-selection-bg, #bfdde6);
    color: var(--color-selection-text, #06202a);
}

/* ============================================
   Kontextuella tabellrader
   ============================================
   Tokendrivna i stället för bootstraps fasta ljusa toner. Regeln är MEDVETET oscopead: hela
   temaskillnaden ligger i variablerna, som är definierade i alla fyra lägen. Skriver man i
   stället regler inne i dark-media måste de vara literalfria — annars slår de igenom även när
   användaren tvingat ljust tema på ett mörkt system, vilket är just den fällan resten av det
   här avsnittet undviker genom att bara referera tokens. Se docs/CONTEXT/THEME_TOKENS.md. */
.table-warning   { --bs-table-bg: var(--color-row-warning-bg, #fff3cd); }
.table-success   { --bs-table-bg: var(--color-row-success-bg, #d1e7dd); }
.table-primary   { --bs-table-bg: var(--color-row-primary-bg, #cfe2ff); }
.table-secondary { --bs-table-bg: var(--color-row-secondary-bg, #e2e3e5); }
.table-danger    { --bs-table-bg: var(--color-row-danger-bg, #f8d7da); }
.table-info      { --bs-table-bg: var(--color-row-info-bg, #cff4fc); }

/* ============================================
   Kvarvarande Bootstrap-ytor utan tokenbaserad motsvarighet
   ============================================
   Samma idiom som .alert ovan: fixen ligger på BOOTSTRAP-KLASSEN, inte på en ny komponent, så
   alla anropsställen rättas på en gång utan markup-ändring. app.css laddas efter
   bootstrap.min.css (index.html), så samma specificitet vinner.

   Genomgången gjordes systematiskt: varje regel i bootstrap.min.css med hårdkodad ljus
   bakgrund korsades mot vad markupen faktiskt använder. De som sätter BÅDE bakgrund och
   textfärg är läsbara även i mörkt tema — de blir ljusa fläckar, inte osynlig text. De nedan
   saknade tokenbaserad motsvarighet helt. Se docs/CONTEXT/THEME_TOKENS.md. */

/* Menyer öppnades som vita rutor mitt i ett mörkt gränssnitt. */
.dropdown-menu {
    background-color: var(--color-bg-card);
    border-color: var(--color-border);
    color: var(--color-text-body);
}

.dropdown-item {
    color: var(--color-text-body);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--color-bg-surface);
    color: var(--color-text-body);
}

/* Bootstrap ger .list-group-item-action en ljus hover (#f8f9fa) med mörk text. Själva raden är
   redan tokenstyrd via .list-group-item, så utan detta blinkade den till ljus vid beröring. */
.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--color-bg-surface);
    color: var(--color-text-body);
}

/* Alert-varianter som saknade kantfärg. Ytan kommer redan från .alert ovan — det här är bara
   den token-färgade vänsterkanten, så de tre inte står utan accent. */
.alert-primary   { border-left-color: var(--color-primary); }
.alert-secondary { border-left-color: var(--color-text-muted); }
.alert-light     { border-left-color: var(--color-border); }

/* <mark> används inte i dag, men är HTML:s egen markeringsyta och exakt det fall som
   rapporterades: bootstrap ger den #fcf8e3 utan textfärg, så första gången någon markerar en
   sökträff hade den blivit ljus platta med ljus text i mörkt tema. Samma tokens som
   ::selection, så de två ser likadana ut. */
mark,
.mark {
    background-color: var(--color-selection-bg, #bfdde6);
    color: var(--color-selection-text, #06202a);
}

/* ============================================
   Kantsvep tillbaka (SWIPE-BACK-01)
   ============================================
   Indikatorn skapas av wwwroot/js/swipe-back.js, inte av en komponent: den uppdateras varje
   frame under gesten, och ett Blazor-renderat element hade riskerat att skrivas över mitt i
   svepet. JS sätter bara --swipe-progress (0..1) — allt utseende bor här.

   Elementet finns bara i DOM:en när gesten är registrerad, det vill säga i installerad PWA. */
.swipe-back-indicator {
    --swipe-progress: 0;
    position: fixed;
    top: 50%;
    left: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--color-border, #d9e1e5);
    border-left: 0;
    border-radius: 0 999px 999px 0;
    background-color: var(--color-bg-card, #ffffff);
    color: var(--color-primary, #0c6272);
    box-shadow: var(--shadow-card);
    /* Ren dekor — den får aldrig ta emot en beröring som var avsedd för sidan under. */
    pointer-events: none;
    opacity: var(--swipe-progress);
    transform: translate3d(calc(-2.5rem + var(--swipe-progress) * 2.5rem), -50%, 0);
}

/* Gesten fungerar från båda kanterna (inåt), så indikatorn måste kunna byta sida. Speglad
   rundning, spegelvänd pil och motsatt tecken på förflyttningen — allt annat är oförändrat. */
.swipe-back-indicator.from-right {
    left: auto;
    right: 0;
    border-radius: 999px 0 0 999px;
    border-right: 0;
    border-left: 1px solid var(--color-border, #d9e1e5);
    transform: translate3d(calc(2.5rem - var(--swipe-progress) * 2.5rem), -50%, 0);
}

.swipe-back-indicator.from-right svg {
    transform: scaleX(-1);
}

/* Under gesten: ingen transition alls, så indikatorn följer fingret 1:1. Transitionen slås på
   först vid släpp, så den glider ut i stället för att slockna abrupt. */
.swipe-back-indicator.is-releasing {
    transition: opacity 160ms ease-out, transform 160ms ease-out;
}

/* Reducerad rörelse: indikatorn står stilla på sin plats och tonar bara in när gesten passerat
   committröskeln (JS sätter progress till 0 eller 1). Återkoppling utan rörelse — inte utan
   återkoppling alls, vilket hade gjort gesten oläslig. */
@media (prefers-reduced-motion: reduce) {
    .swipe-back-indicator,
    .swipe-back-indicator.is-releasing,
    /* .from-right måste stå med explicit: den har högre specificitet än enbart
       .swipe-back-indicator och hade annars vunnit med sin rörliga transform, så
       högerkanten hade fortsatt glida trots att användaren bett om motsatsen. */
    .swipe-back-indicator.from-right,
    .swipe-back-indicator.from-right.is-releasing {
        transition: none;
        transform: translate3d(0, -50%, 0);
    }
}