/* Flag-emoji vises ikke på Windows (Segoe UI Emoji viser landekoder som "DK" i stedet for flag).
   Denne lille selv-hostede webfont leverer KUN flag-glyfferne (unicode-range), så al anden tekst og
   øvrige emoji er fuldstændig uændret. Selv-hostet → overholder CSP (font-src 'self'). */
@font-face {
    font-family: "Twemoji Country Flags";
    unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E007F;
    src: url("/fonts/TwemojiCountryFlags.woff2") format("woff2");
    font-display: swap;
}

html, body {
    font-family: "Twemoji Country Flags", 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Flag skal også vises i MudBlazor-tekst, ikon-vælgeren og kalender-begivenheder. unicode-range gør, at
   fonten KUN slår til for flag-tegn — alt andet arver den normale skrifttype.
   [class*="mud-typography"] fanger ALLE MudText-varianter (mud-typography-body2 osv.), fx event-listen i dialogen. */
[class*="mud-typography"], .ht-icon-btn, .cal-ev, .cal-mday-ev, .cal-mday-allday, .cal-daygrid-wrap, .cal-flagfont {
    font-family: "Twemoji Country Flags", var(--mud-typography-default-family, 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif);
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

/* Centrér MudBlazor-dialoger ift. indholdet (ikke hele vinduet), så de flugter med
   opgavekortene til højre for den 250px brede sidebar. Matcher layoutets 641px-breakpoint.
   !important fordi MudBlazors egen stylesheet indlæses efter app.css. */
@media (min-width: 641px) {
    .mud-dialog-container {
        padding-left: 250px !important;
        box-sizing: border-box;
    }
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

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

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

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

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

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

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

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            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: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* Tydeligere afgrænsning på kort (papers) — undtagen dialoger/appbar/expansion-headers */
.mud-paper:not(.mud-dialog):not(.mud-appbar):not(.mud-expand-panel) {
    border: 1px solid var(--mud-palette-lines-default);
}

/* Menupunkter holdes på én linje (klip med … hvis for langt) — uanset scoped CSS */
.nav-scrollable .nav-link {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Mobil bundlinje-menu (løsning B) — kun smal skærm; skjult på desktop/tablet --- */
.bottom-nav {
    display: none;
}

@media (max-width: 640.98px) {
    .bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 68px;
        /* Følger det valgte farvetema (samme gradient som sidebar) — variabler sat på .page. */
        background-image: linear-gradient(180deg, var(--ht-sidebar-from, rgb(5, 39, 103)) 0%, var(--ht-sidebar-to, #3a0647) 100%);
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.25);
        z-index: 1200;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .bottom-nav .bn-item {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        background: none;
        border: none;
        color: rgba(255, 255, 255, 0.72);
        text-decoration: none;
        font-size: 0.72rem;
        font-weight: 500;
        cursor: pointer;
        padding: 4px 0;
    }

    .bottom-nav .bn-item .bn-emoji {
        font-size: 1.5rem;
        line-height: 1;
    }

    .bottom-nav .bn-item.active {
        color: #fff;
        font-weight: 700;
        background: rgba(255, 255, 255, 0.12);
    }
}

@media (max-width: 640.98px) {
    /* Skjul talfelternes op/ned-pile på mobil — man bruger telefonens taltastatur (klik i feltet). */
    .mud-input-numeric-spin {
        display: none !important;
    }
}

/* Dagens opgaver: kort-hoved som 2×2 grid — ikon|titel øverst, ⭐point|placering+dato nederst.
   Så stjernen flugter med meta-linjen og ikonet med titlen. */
.dag-head {
    display: grid;
    grid-template-columns: 34px 1fr;
    column-gap: 8px;
    row-gap: 1px;
    align-items: start;
}

.dag-emoji {
    font-size: 1.5rem;
    line-height: 1;
    text-align: center;
}

.dag-pts {
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
    text-align: center;
}

.dag-meta {
    min-width: 0;
}

/* Titel-række med frist i øverste højre hjørne (forfaldne kort) */
.dag-titlerow {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.dag-frist {
    flex-shrink: 0;
    font-size: .68rem;
    font-weight: 600;
    color: var(--mud-palette-error);
    white-space: nowrap;
}

/* Dato/interval på sin egen fuld-bredde linje under hovedet */
.dag-recur-full {
    font-size: .72rem;
    opacity: .85;
    margin-top: 3px;
}

/* Valgfri-kortets handling (Løs / Løs for / ✓ I dag) må aldrig klemmes eller ombryde, så alle
   knapper holder samme højde — også når opgavenavnet er langt (så ombryder titlen i stedet). */
.dag-opt-action {
    flex-shrink: 0;
}

    .dag-opt-action .mud-button-root {
        white-space: nowrap;
    }


/* Dagens opgaver: ensartet højde på opgavekort + handlingsknapper i bunden, så kort flugter */
.dag-card {
    min-height: 124px;
    display: flex;
    flex-direction: column;
}

    .dag-card .dag-card-actions {
        margin-top: auto;
        padding-top: 8px;
    }

/* Kort uden handlingsknapper (fx andres opgaver for et ikke-admin-medlem): ingen min-højde → intet tomrum nederst. */
.dag-card.dag-card-flat {
    min-height: 0;
}

/* --- Kalender månedsvisning: klasser så mobil kan komprimeres (basis = som hidtil) --- */
.cal-grid {
    display: grid;
    grid-template-columns: 26px repeat(7, 1fr);
    gap: 4px;
}

/* Uge-matrix: chip-header (medlemmer) + måneds-celler (dage som rækker). Vandret scroll ved mange medlemmer. */
.cal-wk-wrap {
    overflow-x: auto;
    padding-bottom: 4px;
}

.cal-wkx {
    display: grid;
    gap: 3px;
    min-width: 100%;
    align-items: stretch;
}

/* Kolonne-header som chip: avatar + navn */
.cal-wkx-colh {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px 3px 3px;
    background: var(--mud-palette-background-grey);
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    min-width: 0;
}

.cal-wkx-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-wkx-fam {
    font-size: 1.3rem;
    line-height: 1;
}

/* Dag-label i venstre kolonne */
.cal-wkx-day {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4px 6px;
    cursor: pointer;
    border-radius: 6px;
}

.cal-wkx-dow {
    font-size: .8rem;
    font-weight: 700;
    text-transform: capitalize;
}

.cal-wkx-date {
    font-size: .68rem;
    opacity: .65;
}

    .cal-wkx-day.cal-today {
        background: rgba(var(--mud-palette-primary-rgb), .12);
    }

/* Cellen genbruger .cal-day-udseendet (kant, "+" og bjælker) — strammere i uge-matrixen */
.cal-wkx-cell {
    min-height: 48px;
    padding: 2px 3px;
}

/* Uge: desktop viser matrix, mobil viser én persons uge som dags-rækker (i stil med dagsvisningen) */
.cal-wk-mobile {
    display: none;
}

@media (max-width: 640.98px) {
    .cal-wk-desktop {
        display: none;
    }

    .cal-wk-mobile {
        display: flex;
        flex-direction: column;
    }

    /* Uge mobil: de 7 dags-rækker deler højden ligeligt (intet tomrum efter søndag). */
    .cal-wk-mobile > .cal-wkm-row {
        flex: 1 1 0;
        min-height: 0;
    }
}

.cal-wkm-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 6px;
}

.cal-wkm-daylabel {
    flex: 0 0 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
}

    /* "+" skal være synlig i mobil-ugens celler (per-celle "+" skjules ellers på mobil) */
    .cal-wkm-cell .cal-add {
        display: flex !important;
    }

/* Dags-cellen i mobil-ugen bruger samme .cal-day-look som matrixen */
.cal-wkm-cell {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 52px;
}

/* Animeret karusel-overgang når visningen skifter.
   Lodret glid + fade (IKKE vandret — translateX gav vandret overløb og fik siden til at se "zoomet" ud). */
.cal-viewanim {
    animation: calViewIn .35s ease;
    /* Ens, FAST højde i alle visninger (udgangspunkt: uge-visningen). Måneds-gitteret fylder højden ud
       (datoerne tilpasses), og dag-visningen scroller indeni. Tunbar: ét tal her (desktop) + mobil nedenfor (W5). */
    height: 540px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Hver visnings hovedindhold fylder den resterende højde. */
.cal-viewanim > .cal-grid,
.cal-viewanim > .cal-wk-wrap,
.cal-viewanim > .cal-wk-mobile,
.cal-viewanim > .cal-wk-combined,
.cal-viewanim > .cal-daygrid-wrap,
.cal-viewanim > .cal-agenda,
.cal-viewanim > .cal-day-combined {
    flex: 1 1 auto;
    min-height: 0;
}

/* Samlet uge/dag = KUN MOBIL. Pc/tablet beholder det gamle person-opdelte layout (uge-matrix + dag-kolonner);
   mobil viser hele familiens begivenheder samlet. Media-forespørgslen nedenfor styrer hvad der vises. */
.cal-wk-combined,
.cal-day-combined {
    display: none; /* skjult på pc/tablet */
}

/* Samlet uge (mobil): 7 dags-rækker der deler højden ligeligt. Genbruger .cal-wkm-row/-daylabel/-cell. */
.cal-wk-combined {
    flex-direction: column;
}

    .cal-wk-combined > .cal-wkm-row {
        flex: 1 1 0;
        min-height: 0;
    }

/* Samlet dag (mobil): flex-kolonne, hvor KUN det indre tidsgitter (.cal-mday-grid) scroller. */
.cal-day-combined {
    flex-direction: column;
    overflow: hidden;
}

@media (max-width: 640.98px) {
    .cal-wk-combined {
        display: flex;
        overflow-y: auto;
    }

    .cal-day-combined {
        display: flex;
    }
}

/* Måned: de 6 uge-rækker deler højden ligeligt, så datoerne tilpasses (ingen tom plads). */
.cal-viewanim > .cal-grid {
    grid-template-rows: auto repeat(6, 1fr);
    overflow-y: auto;
}

/* Uge desktop: matrixen fylder højden; de 7 dags-rækker deler den ligeligt (intet tomrum, ikke for høje). */
.cal-viewanim > .cal-wk-wrap {
    overflow-y: auto;
}

.cal-viewanim > .cal-wk-wrap > .cal-wkx {
    height: 100%;
    grid-template-rows: auto repeat(7, 1fr);
}

/* Dag: wrapperen er en flex-kolonne, så KUN det indre tidsgitter scroller (ingen dobbelt scrollbar).
   VIGTIGT: sæt det på BASE-selektoren — IKKE ".cal-viewanim >" — ellers slår den de responsive
   display:none-regler, og mobil-agendaen + desktop-gitteret vises BEGGE samtidig (blanding).
   cal-agenda får sin flex-kolonne i mobil-media (hvor den vises). */
.cal-daygrid-wrap {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (max-width: 640.98px) {
    .cal-viewanim {
        height: 500px;
    }
}

@keyframes calViewIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cal-week-head {
    text-align: center;
    font-size: .6rem;
    font-weight: 600;
    opacity: .4;
    align-self: center;
}

.cal-dow {
    text-align: center;
    font-size: .72rem;
    font-weight: 600;
    opacity: .6;
}

.cal-week {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .64rem;
    font-weight: 600;
    opacity: .45;
}

.cal-day {
    min-height: 74px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    padding: 3px;
    cursor: pointer;
    overflow: hidden;
    background: transparent;
}

    .cal-day.cal-today {
        background: var(--mud-palette-primary-hover);
    }

    .cal-day.cal-dim {
        opacity: .45;
    }

.cal-dayhead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1px;
}

.cal-add {
    cursor: pointer;
    line-height: 1;
    opacity: .55;
    display: flex;
}

.cal-num {
    font-size: .78rem;
    font-weight: 600;
}

.cal-ev {
    border-radius: 3px;
    padding: 0 3px;
    margin-bottom: 2px;
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .68rem;
}

    .cal-ev.cal-ev-allday {
        color: #fff;
        font-weight: 600;
    }

    .cal-ev.cal-ev-timed {
        background: #7e6fff22;
    }

/* Hvem-indikator på begivenhedslinjen (måneds-visning): lille avatar-billede eller emoji/👪. */
.cal-ev-ava {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    margin-right: 2px;
}

.cal-ev-who {
    vertical-align: middle;
    margin-right: 1px;
}

/* Neutral "ingen emoji"-markør i måneds-visningen: lille prik i tekstfarven (hvid på heldags-bjælker). */
.cal-ev-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: .45;
    margin-right: 3px;
    vertical-align: middle;
}

.cal-more {
    font-size: .62rem;
    opacity: .7;
}

.cal-tasks {
    font-size: .66rem;
    color: var(--mud-palette-success-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Uge-nr-sammendrag under måneden — KUN mobil (desktop viser uge-nr i gitterets venstre kolonne). */
.cal-month-weeks {
    display: none;
    font-size: .72rem;
    opacity: .7;
}

/* Mobil: komprimér månedsgitteret, så det ikke maser */
@media (max-width: 640.98px) {
    .cal-grid {
        /* Mobil: ingen uge-nr-kolonne — ugenumrene vises samlet under måneden (.cal-month-weeks). */
        grid-template-columns: repeat(7, 1fr);
        gap: 2px;
    }

    .cal-week-head,
    .cal-week {
        display: none;
    }

    .cal-dow {
        font-size: .55rem;
    }

    .cal-month-weeks {
        display: block;
    }

    .cal-day {
        min-height: 48px;
        padding: 2px;
        border-radius: 4px;
    }

    .cal-num {
        font-size: .66rem;
    }

    .cal-add {
        display: none; /* per-celle "+" skjules på mobil — tap dagen for at åbne dagen */
    }

    .cal-ev {
        font-size: .5rem;
        padding: 0 2px;
        margin-bottom: 1px;
    }

    .cal-ev-ava {
        width: 10px;
        height: 10px;
    }

    .cal-more {
        font-size: .48rem;
    }

    .cal-tasks {
        font-size: .5rem;
    }
}

/* --- Kalender dagsvisning: tidsgitter (desktop) vs lodret dagsorden (mobil) --- */
.cal-agenda {
    display: none; /* skjult på desktop; tidsgitteret bruges der */
}

@media (max-width: 640.98px) {
    .cal-agenda {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .cal-daygrid-wrap {
        display: none; /* det brede tidsgitter skjules på mobil */
    }

    /* Kalenderen handler om begivenheder på mobil — skjul opgave-sektionen i dag-dialogen */
    .cal-dlg-tasks {
        display: none;
    }

    /* To-kolonne-rækker (tid fra/til, dato fra/til) stables lodret på smal skærm */
    .cal-dlg-2col {
        flex-direction: column;
    }

    /* Begivenheds-rækker: lad handlingsknapper ombryde under teksten i stedet for at flyde ud */
    .cal-dlg-evrow {
        flex-wrap: wrap;
    }
}

/* Mobil én-kolonne dagsvisning */
.cal-mday-people {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.cal-mday-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--mud-palette-lines-default);
    background: transparent;
    color: inherit;
    border-radius: 16px;
    padding: 3px 10px;
    font-size: .78rem;
    cursor: pointer;
}

    .cal-mday-chip.sel {
        background: var(--mud-palette-primary);
        color: #fff;
        border-color: var(--mud-palette-primary);
    }

.cal-mday-allday {
    color: #fff;
    border-radius: 5px;
    padding: 4px 8px;
    margin-bottom: 4px;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Heldags-felt (mobil dag): fast lille felt der scroller ved mange — så de aldrig skæres af / æder gitteret. */
.cal-mday-allday-wrap {
    flex: 0 0 auto;
    max-height: 30%;
    overflow-y: auto;
    margin-bottom: 2px;
}

/* Heldags-felt pr. kolonne (desktop/tablet dag): fast lille højde der scroller ved mange → ens kolonne-højder. */
.cal-day-allday-wrap {
    max-height: 62px;
    overflow-y: auto;
}

/* Mobil medlemsvælger (uge + dag): vandret avatar-stribe i én linje. Valgt = ring + navn; resten kun avatar. */
.cal-msel {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
    overflow-x: auto;
    padding: 2px 0 6px;
    margin-bottom: 2px;
    -webkit-overflow-scrolling: touch;
}

.cal-msel-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 5px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    padding: 2px;
    cursor: pointer;
}

    .cal-msel-item.sel {
        border-color: var(--mud-palette-primary);
        background: rgba(var(--mud-palette-primary-rgb), .10);
        padding-right: 10px;
    }

.cal-msel-fam {
    font-size: 1.7rem;
    line-height: 1;
    width: 34px;
    text-align: center;
}

.cal-msel-name {
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Deltager-vælger i begivenheds-dialogen ("For hvem"): avatar-chips med multi-valg. Valgt = ring + farve. */
.cal-pick {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cal-pick-item {
    display: flex;
    align-items: center;
    gap: 5px;
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    padding: 2px 10px 2px 2px;
    cursor: pointer;
    font-size: .82rem;
}

    .cal-pick-item.sel {
        border-color: var(--mud-palette-primary);
        background: rgba(var(--mud-palette-primary-rgb), .12);
        font-weight: 600;
    }

.cal-pick-fam {
    font-size: 1.5rem;
    line-height: 1;
    width: 32px;
    text-align: center;
}

.cal-pick-name {
    white-space: nowrap;
}

/* Indlejret hjul-tidsvælger (TimeRoller): lodrette rulle-kolonner (time + minut), midterbjælken = valgt.
   Ingen popup, intet tastatur — man ruller tallene direkte, og de "snapper" til nærmeste. */
/* Kompakt felt: ligner MudBlazor outlined date-picker (flydende label i ramme-hak + ur-ikon).
   Viser KUN den valgte tid; klik åbner popup med hjulet. */
.tw-field {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid var(--mud-palette-lines-inputs, rgba(0, 0, 0, .3));
    border-radius: var(--mud-default-borderradius, 4px);
    background: var(--mud-palette-surface);
    color: inherit;
    cursor: pointer;
}

    .tw-field:hover { border-color: var(--mud-palette-text-primary); }
    .tw-field:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }

/* Flydende label — hviler oven på rammen (baggrund = surface skjuler stregen bagved = "hak"). */
.tw-field-label {
    position: absolute;
    top: -8px;
    left: 8px;
    padding: 0 4px;
    font-size: .72rem;
    line-height: 1;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    pointer-events: none;
}

.tw-field-value {
    flex-grow: 1;
    font-size: 1rem;
}

.tw-field-icon {
    display: inline-flex;
    margin-left: 8px;
    color: var(--mud-palette-action-default, rgba(0, 0, 0, .54));
    flex-shrink: 0;
}

/* PWA "ny version"-besked: centreret ØVERST med luft hele vejen rundt (også pæn på mobil).
   Wrap fanger ingen klik (pointer-events:none), så kun selve banneret er interaktivt. */
/* Fælles STAK til top-bannerne ("ny version", "serveren opdateres", "betaling mislykkedes").
   Hver komponent renderede før sin egen fixed .app-update-wrap i top, så to samtidige bannere
   lå oven på hinanden (fx fejlet betaling + ny version klar). Stakken sætter dem under hinanden.
   Centrering sker ift. INDHOLDET: på desktop/tablet ligger den 250px brede sidebar til venstre,
   så uden padding-left virker bannerne forskudt (Renés observation 2026-08-14). Samme greb og
   breakpoint som dialogerne øverst i filen; under 641px er sidebaren skjult. */
.ht-banner-stack {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3200;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;                 /* luft foroven + i siderne */
    pointer-events: none;
}

@media (min-width: 641px) {
    .ht-banner-stack {
        padding-left: 262px;       /* 250px sidebar + de 12px luft */
    }
}

/* Bannerne ligger nu INDE i stakken og skal kun centrere sig selv i den.
   position: static er eksplicit: klassen var tidligere fixed, og uden dette ville en gammel
   cachet stylesheet (eller en fremtidig genindførsel) trække bannerne ud af stakken igen. */
.app-update-wrap {
    position: static;
    width: 100%;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.app-update-banner {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    max-width: 440px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--mud-palette-primary);
    color: #fff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
}

.app-update-text { flex: 1 1 auto; font-weight: 500; }

.app-update-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.app-update-btn {
    border: none;
    background: #fff;
    color: var(--mud-palette-primary);
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}

.app-update-close {
    border: none;
    background: transparent;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    padding: 4px 6px;
    cursor: pointer;
    opacity: .85;
}

    .app-update-close:hover { opacity: 1; }

/* Betalings-advarsel: mislykket træk (PastDue) — deler placering/knapper med app-update-banneret. */
.sub-warn-banner {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    max-width: 440px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #b26a00;               /* rav/orange: advarsel, ikke fejl — adgangen er intakt i fristen */
    color: #fff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
}

    .sub-warn-banner .app-update-btn { color: #b26a00; }

/* "Serveren opdateres"-banner (deler placering med app-update via .app-update-wrap). */
.srv-down-banner {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    max-width: 440px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #37474f;
    color: #fff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
    font-weight: 500;
}

.srv-down-spin {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: srv-spin 0.8s linear infinite;
}

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

/* Popup-overlay (over kalender-dialogen). Klik på baggrunden lukker; hjulet centreres. */
.tw-backdrop {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(0, 0, 0, .35);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tw-popup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 28px;
    min-width: 280px;              /* bredere → sværere at ramme ved siden af (luk) på mobil */
    border-radius: 14px;
    background: var(--mud-palette-surface);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
    font-family: var(--mud-typography-default-family, 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif);
}

.tw-popup-title {
    font-weight: 600;
    opacity: .8;
}

.tw-ok {
    align-self: stretch;
    padding: 8px 0;
    border: none;
    border-radius: 8px;
    background: var(--mud-palette-primary);
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
}

/* Selve hjulet (inde i popupen). */
.tw {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    gap: 6px;
}

.tw-col {
    width: 64px;                   /* bredere = større tryk-mål */
    height: 180px;                 /* 5 rækker à 36px */
    overflow-y: scroll;
    scroll-snap-type: y proximity; /* IKKE mandatory: mandatory bremsede hurtig scroll på PC */
    scrollbar-width: none;         /* Firefox */
    text-align: center;
    -webkit-overflow-scrolling: touch;
}

    .tw-col::-webkit-scrollbar { display: none; }  /* Chrome/Safari/Edge */

.tw-item {
    height: 36px;
    line-height: 36px;
    scroll-snap-align: center;
    font-size: 1.2rem;
    font-weight: 400;              /* normal vægt = samme som resten af teksten */
    cursor: pointer;               /* tryk på et tal → ruller til midten (se time-roller.js) */
}

    .tw-item:hover { color: var(--mud-palette-primary); }

.tw-pad { height: 72px; }          /* 2 rækker, så tallene kan nå midten (5 synlige rækker) */

.tw-sep {
    align-self: center;
    font-size: 1.3rem;
    font-weight: 400;
    opacity: .6;
}

/* Fremhævet midterbjælke = det valgte (midterste af de 3 rækker). */
.tw-band {
    position: absolute;
    left: 4px;
    right: 4px;
    top: 72px;
    height: 36px;
    border-top: 1px solid var(--mud-palette-primary);
    border-bottom: 1px solid var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), .06);
    pointer-events: none;
}

.cal-mday-grid {
    display: flex;
    position: relative;
    overflow-y: auto;
    /* Fylder dag-wrapperens resterende højde og er den ENESTE scroller (ingen dobbelt scrollbar). */
    flex: 1 1 auto;
    min-height: 0;
}

.cal-mday-times {
    width: 46px;
    flex-shrink: 0;
    position: relative;
}

.cal-mday-hour {
    position: absolute;
    right: 4px;
    font-size: .66rem;
    opacity: .6;
}

.cal-mday-col {
    flex: 1;
    position: relative;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.cal-mday-line {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.10);
}

.cal-mday-ev {
    position: absolute;
    color: #fff;
    border-radius: 5px;
    padding: 2px 6px;
    font-size: .74rem;
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
}

.cal-mday-evtime {
    font-weight: 600;
    opacity: .9;
    margin-right: 2px;
}

.cal-mday-now {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 2px solid #e53935;
    z-index: 2;
}

.cal-ag-task {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 2px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

    .cal-ag-task.cal-ag-done {
        opacity: .55;
        text-decoration: line-through;
    }

.cal-ag-ticon {
    font-size: 1.25rem;
}

.cal-ag-ttext {
    flex: 1;
    font-size: .85rem;
}

.cal-ag-check {
    color: var(--mud-palette-success);
    font-weight: 700;
}

/* --- Rutiner: trin-rækker (visning) — store, tydeligt adskilte tryk-felter, så små børn nemt rammer den
   rigtige linje, med stort opgave-ikon. Gælder alle; især en fordel i børnevisningen. --- */
.rut-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    margin-bottom: 10px;
    min-height: 58px;
    border-radius: 14px;
    background: var(--mud-palette-background-grey);
    border: 2px solid var(--mud-palette-lines-default);
}

    .rut-step:last-child {
        margin-bottom: 0;
    }

.rut-step-clickable {
    cursor: pointer;
    transition: border-color .12s ease, transform .06s ease;
}

    .rut-step-clickable:hover {
        border-color: var(--mud-palette-primary);
    }

    .rut-step-clickable:active {
        transform: scale(.99);
    }

.rut-step-done {
    opacity: .55;
}

/* Afkrydsning (!important vinder over MudBlazors størrelsesklasse). Hele rækken er tryk-felt, så cirklen
   behøver ikke være kæmpe — det giver titlen mere bredde til hele ord. */
.rut-step-check {
    font-size: 1.7rem !important;
    flex-shrink: 0;
}

.rut-step-emoji {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}

/* Titlen fylder den resterende bredde (så der er plads til hele ord) og ombryder KUN mellem ord —
   ikke midt i et ord. overflow-wrap deler kun et ord, hvis det alene er for langt til hele linjen. */
.rut-step-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.2;
    overflow-wrap: break-word;
}

    .rut-step-done .rut-step-title {
        text-decoration: line-through;
    }

.rut-step-pts {
    flex-shrink: 0;
    margin-left: 6px;
    font-size: 1rem;
    font-weight: 600;
    opacity: .75;
    white-space: nowrap;
}

/* --- Rutiner: admin trin-editor (point & rækkefølge) --- */
/* Desktop: titel fylder, og pile + point grupperes pænt til højre. */
.rut-step-edit {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

    .rut-step-edit .rut-title {
        flex: 1 1 auto;
        min-width: 0;
    }

.rut-step-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

    .rut-step-controls .rut-point {
        width: 92px;
    }

/* Knap-rækken (Nulstil + Gem): venstrestillet på desktop, lige brede og lige høje. */
.rut-edit-actions {
    display: flex;
    align-items: stretch;       /* samme højde */
    justify-content: flex-start; /* venstrestillet */
    gap: 12px;
    margin-top: 12px;
}

    .rut-edit-actions > .mud-button-root {
        flex: 0 0 190px;         /* samme bredde */
        white-space: nowrap;     /* ingen ombrydning */
    }

/* Mobil: titlen får sin egen linje øverst; pile til venstre og point HØJRESTILLET nedenunder.
   Knapperne står side om side (Gem til højre) og deler bredden ligeligt. */
@media (max-width: 640.98px) {
    .rut-step-edit {
        flex-direction: column;
        align-items: stretch;
        padding: 10px 0;
        border-bottom: 1px solid var(--mud-palette-lines-default);
    }

    .rut-step-controls {
        justify-content: space-between;
    }

    .rut-edit-actions {
        justify-content: stretch;
    }

        .rut-edit-actions > .mud-button-root {
            flex: 1 1 0;
            min-width: 0;
            font-size: 0.8rem;
        }
}

/* --- Byt opgaver --- */
.byt-step {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 6px;
}

.byt-step-no {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-primary);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
}

.byt-step-label {
    font-weight: 600;
}

.byt-list {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: 8px;
}

.byt-owner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 2px 4px;
}

.byt-owner-name {
    font-weight: 600;
    opacity: .85;
}

.byt-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 6px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

    .byt-opt:hover {
        border-color: var(--mud-palette-primary);
    }

    .byt-opt.byt-opt-sel {
        border-color: var(--mud-palette-primary);
        background: rgba(var(--mud-palette-primary-rgb), .10);
    }

.byt-opt-ic {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-background-grey);
    font-size: 1.1rem;
}

.byt-opt-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.byt-opt-due {
    font-size: .75rem;
    opacity: .7;
    white-space: nowrap;
}

.byt-opt-check {
    flex: 0 0 auto;
}

.byt-bid-dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .15);
    flex: 0 0 auto;
}

/* Bytte-visualisering: hver linje har en label (hvem giver/får hvad), så det er let at gennemskue. */
.byt-trade {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 6px 0;
}

.byt-trade-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.byt-trade-label {
    flex: 0 0 auto;
    min-width: 72px;
    font-size: .72rem;
    font-weight: 600;
    opacity: .65;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.byt-task-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--mud-palette-background-grey);
    max-width: 100%;
    min-width: 0;
}

    .byt-task-chip .t {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


/* --- Lykkehjul --- */
.whl-wrap {
    display: flex;
    justify-content: center;
    margin: 8px 0 4px;
}

.whl-svg {
    width: 100%;
    max-width: 330px;
    height: auto;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35));
}

.whl-person {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 5px;
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

    .whl-person:hover {
        border-color: var(--mud-palette-primary);
    }

    .whl-person.whl-person-on {
        border-color: var(--mud-palette-primary);
        background: rgba(var(--mud-palette-primary-rgb), .18);
    }

.whl-person-name {
    font-weight: 600;
}

.whl-person-w {
    font-size: .8rem;
    opacity: .7;
}

/* Status-linje over hjulet — FAST højde + ingen ombrydning, så hjulet aldrig hopper
   (heller ikke når teksten skifter fra "Spinder for…" til en lang "mangler:"-liste) */
.whl-status {
    height: 24px;
    line-height: 24px;
    margin-bottom: 8px;
    font-size: .9rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Scene omkring hjulet (til resultat-overlay) */
.whl-stage {
    position: relative;
}

/* Blinkende pærer på rammen */
.whl-bulb {
    animation: whlBulb 1.3s ease-in-out infinite;
}

    .whl-bulb.whl-bulb-b {
        animation-delay: .65s;
    }

@keyframes whlBulb {
    0%, 100% {
        opacity: 1;
        filter: drop-shadow(0 0 3px #ffe082);
    }

    50% {
        opacity: .35;
        filter: none;
    }
}

/* Hurtigere/intenst blink mens hjulet spinder */
.whl-svg.whl-spinning .whl-bulb {
    animation-duration: .4s;
}

/* Pilen blinker/pulserer med en glød */
.whl-pointer {
    animation: whlPointer 1s ease-in-out infinite;
}

@keyframes whlPointer {
    0%, 100% {
        opacity: 1;
        filter: drop-shadow(0 0 2px rgba(255, 90, 90, .5));
    }

    50% {
        opacity: .8;
        filter: drop-shadow(0 0 9px rgba(255, 120, 120, 1));
    }
}

.whl-svg.whl-spinning .whl-pointer {
    animation-duration: .4s;
}

/* Resultat-prompt hen over hjulet */
.whl-result-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    backdrop-filter: blur(2px);
    border-radius: 12px;
    z-index: 5;
    animation: whlPop .25s ease-out;
}

.whl-result-card {
    background: var(--mud-palette-surface);
    border-radius: 16px;
    padding: 20px 24px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    border: 2px solid var(--mud-palette-primary);
    max-width: 80%;
}

.whl-result-emoji {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 6px;
    animation: whlPop .4s ease-out;
}

@keyframes whlPop {
    0% {
        transform: scale(.6);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* --- Administrator: header + medlems-rækker --- */
.adm-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

/* Medlemsliste: ét pænt kort pr. medlem. Øverst identitet + rolle-chip; nedenunder Admin/Barn-checkboxe
   (venstre) og handlinger (Nulstil PIN + Slet) grupperet til højre. Samme layout på mobil og tablet,
   så alt flugter, også når admins/en selv mangler en knap. */
.adm-members {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Gør listen til en container, så hvert korts kontrol-række kan reagere på KORTETS bredde
       (ikke skærmens). Så virker det både på mobil og når man bare trækker vinduet smalt. */
    container-type: inline-size;
}

.adm-member {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 8px 12px;
}

.adm-member-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.adm-id {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.adm-member-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.adm-rolechip {
    flex: 0 0 auto;
}

/* Standard (smalt kort): kontrol-rækken stables LODRET og venstrestillet, så checkboxe og handlinger
   flugter i venstre kant for ALLE, også admins/en selv der kun har Nulstil PIN. */
.adm-member-ctl {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: 6px;
}

/* Bredt nok kort: checkboxe til venstre, handlinger til højre på én linje. */
@container (min-width: 480px) {
    .adm-member-ctl {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 4px 16px;
    }
}

.adm-checks {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 16px;
}

.adm-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.adm-pinform {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

/* Katalog: størrelses-underoverskrift inde i hver kategori (vivid farve pr. størrelse via inline style) */
.adm-cat-size {
    display: block;
    margin: 10px 0 2px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Kategori-overskrift over aktive opgaver — stor og tydelig (ingen farve-bjælke i siden) */
.adm-cat-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 18px 0 6px;
}

/* Aktive/arkiverede opgave-rækker — egen layout (stabler pænt på mobil i stedet for at mase sammen) */
.adm-task-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.adm-task-info {
    min-width: 0;
}

/* Lidt liv på opgavekortet: større ikon som blikfang + afrundet kort */
.adm-task-card {
    border-radius: 10px;
}

.adm-task-emoji {
    font-size: 1.35rem;
    margin-right: 4px;
    vertical-align: -2px;
}

.adm-task-acts {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

/* Katalog-rækker: checkbox + tekst der wrapper pænt i sin egen kolonne */
.cat-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
}

.cat-item-check {
    flex: 0 0 auto;
}

.cat-item-text {
    min-width: 0;
}

.cat-item-added {
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* Fast/skånet pr. person i opgave-dialogen */
.pref-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}

.pref-name {
    min-width: 0;
}

.pref-acts {
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
}

@media (max-width: 640.98px) {
    /* Opgave-rækker: tekst foroven, knapperne som en fuldbredde-bjælke der spredes ud (ikke klumpet til højre) */
    .adm-task-row {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .adm-task-acts {
        justify-content: space-between;
        width: 100%;
        border-top: 1px solid var(--mud-palette-lines-default);
        padding-top: 2px;
    }

    /* Mobil: størrelse vises via kortets farvede kant — skjul prik + Lille/Mellem/Stor-tekst */
    .task-size-meta {
        display: none;
    }

    /* Fast/skånet: navn foroven, tre lige-brede knapper nedenunder */
    .pref-row {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .pref-acts {
        width: 100%;
    }

        .pref-acts .mud-button-root {
            flex: 1 1 0;
        }
}

/* Arkiverede opgaver: samme look som aktive, men gennemstreget (stadig læsbart) */
.adm-arch-text {
    text-decoration: line-through;
    text-decoration-color: var(--mud-palette-text-secondary);
    opacity: 0.85;
}

/* Inline ikon-gitter (deles af belønnings- og opgave-dialogen) — undgår dropdown-popover helt, så ingen ekstra scrollbar */
.ht-icon-grid {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px;
    height: 168px; /* fast højde → dialogen hopper ikke når søgning ændrer antal rækker */
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
}

/* Historik-paginering: centrér robust.
   MudBlazor renderer .mud-pagination som et <ul> med list-style:none og margin:0,
   men nulstiller IKKE padding — så browserens standard <ul>-venstrepadding (~40px)
   skubber sidetallene til højre. padding:0 fjerner forskydningen; margin:auto +
   justify-center centrerer selve boksen. */
.hist-pager {
    display: flex;
    justify-content: center;
    width: 100%;
}
.hist-pager .mud-pagination {
    margin: 0 auto;
    padding: 0;
}

.ht-icon-btn {
    font-size: 1.5rem;
    line-height: 1;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

    .ht-icon-btn:hover {
        background: var(--mud-palette-action-default-hover);
    }

    .ht-icon-btn.sel {
        border-color: var(--mud-palette-primary);
        background: var(--mud-palette-action-default-hover);
    }

/* Avatar-baggrund: temaets gradient i stedet for MudBlazors grå standard */
.ht-avatar-bg {
    background: linear-gradient(135deg, var(--ht-sidebar-from, #052767), var(--ht-sidebar-to, #3a0647)) !important;
    color: #fff !important;
}

/* Kategori-chips (opgave-dialogen) — inline valg uden dropdown */
.ht-cat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ht-cat-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    background: transparent;
    cursor: pointer;
    font-size: .9rem;
    color: inherit;
    transition: background .12s, border-color .12s;
}

    .ht-cat-btn:hover {
        background: var(--mud-palette-action-default-hover);
    }

    .ht-cat-btn.sel {
        border-color: var(--mud-palette-primary);
        background: var(--mud-palette-action-default-hover);
        font-weight: 600;
    }

/* --- Forfaldne hos medlemmerne (samme rene rækkelook) --- */
.adm-od-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 0;
}

.adm-od-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.adm-od-emoji {
    font-size: 1.4rem;
    flex: 0 0 auto;
}

.adm-od-text {
    min-width: 0;
}

.adm-od-acts {
    display: flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 640.98px) {
    .adm-head {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    /* Mobil: info i egen række, to ens-brede knapper side om side nedenunder */
    .adm-od-info {
        width: 100%;
    }

    .adm-od-acts {
        width: 100%;
    }

        .adm-od-acts .mud-button-root {
            flex: 1 1 0;
        }

    /* Medlemskortets kontrol-række styres nu af en container-query (se .adm-member-ctl ovenfor) — ingen mobil-override. */
}

/* --- Placeringer (HouseLocationsManager) --- */
.loc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.loc-info {
    flex: 1 1 auto;
    min-width: 0;
}

    .loc-info .mud-typography {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.loc-acts {
    flex: 0 0 auto;
    display: flex;
    gap: 4px;
}

.loc-add,
.loc-edit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.loc-edit {
    padding: 6px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.loc-field {
    flex: 1 1 160px;
    min-width: 0;
}

@media (max-width: 640.98px) {
    .loc-field {
        flex: 1 1 100%;
    }
}

/* --- Besked-klokke i øverste højre hjørne --- */
.notif-bell {
    position: fixed;
    top: 8px;
    right: 12px;
    z-index: 1101;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: var(--mud-palette-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.notif-bell-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #e53935;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* --- Point-shop: varer på træhylder --- */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px 14px;
}

.shop-item {
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px 10px 3px 3px;
    overflow: hidden;
    box-shadow: 0 3px 7px rgba(0, 0, 0, .2);
}

    .shop-item.shop-item-poor {
        opacity: .55;
    }

.shop-item-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px 12px 12px;
    gap: 3px;
}

.shop-item-icon {
    font-size: 3rem;
    line-height: 1;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .28));
}

/* Ønske-billede: ALLE billeder fylder den samme boks helt ud (cover), så de ser ensartede ud */
.shop-wish-img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 4px;
}

/* Klikbart ønske-billede (links til varens side): block så det fylder boksen uden inline-mellemrum. */
.shop-wish-imglink {
    display: block;
    line-height: 0;
}

.shop-item-name {
    font-weight: 700;
    word-break: break-word;
}

.shop-item-desc {
    font-size: .72rem;
    opacity: .7;
}

/* Pris + knap forankres i bunden, så de flugter på tværs af kort uanset beskrivelse/veksel-felt */
.shop-item-action {
    margin-top: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 8px;
}

.shop-tag {
    margin-top: 6px;
    background: #f5b301;
    color: #3a2c00;
    font-weight: 700;
    font-size: .82rem;
    padding: 3px 14px;
    border-radius: 14px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .2);
}

    .shop-tag.shop-tag-kr {
        background: #2e9e6b;
        color: #fff;
    }

/* Compact-variant til admin (lavere kort, mindre info) */
.shop-adm .shop-item-body {
    padding: 10px 10px 8px;
    gap: 2px;
}

.shop-adm .shop-item-icon {
    font-size: 2.1rem;
}

.shop-adm .shop-wish-img {
    height: 88px;
}

.shop-adm .shop-tag {
    font-size: .75rem;
    padding: 2px 10px;
}

/* Live-preview i belønnings-dialogen — én vandret linje: ikon | navn | point */
.reward-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    border-radius: 12px;
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
}

.reward-preview-icon {
    font-size: 2rem;
    line-height: 1;
    flex: 0 0 auto;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .25));
}

.reward-preview-name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
    font-size: 1.05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reward-preview-tag {
    flex: 0 0 auto;
    background: #f5b301;
    color: #3a2c00;
    font-weight: 700;
    font-size: .8rem;
    padding: 3px 12px;
    border-radius: 14px;
    white-space: nowrap;
}

    .reward-preview-tag.reward-preview-tag-kr {
        background: #2e9e6b;
        color: #fff;
    }

/* "Opret"-kort: tom hylde-plads der inviterer til at tilføje en belønning */
.shop-item-add {
    cursor: pointer;
    box-shadow: none;
    border: 2px dashed var(--mud-palette-lines-default);
    background: transparent;
    transition: border-color .15s, background .15s;
}

    .shop-item-add:hover {
        border-color: var(--mud-palette-primary);
        background: var(--mud-palette-action-default-hover);
    }

.shop-item-add-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 14px 12px;
    min-height: 118px;
    color: var(--mud-palette-primary);
}

.shop-item-add-plus {
    font-size: 2.4rem;
    line-height: 1;
    font-weight: 300;
}

.shop-item-add-text {
    font-weight: 600;
    font-size: .9rem;
}

/* Selve træhylden under hver vare */
.shop-shelf-board {
    height: 14px;
    background: linear-gradient(180deg, #c79150 0%, #a8702f 55%, #7d5226 100%);
    border-top: 2px solid #e0b483;
    box-shadow: inset 0 2px 2px rgba(255, 255, 255, .25), 0 5px 6px rgba(0, 0, 0, .35);
}

/* Juridiske sider (/handelsbetingelser, /privatlivspolitik, /cookiepolitik): læsevenlig
   typografi + tabeller der kan scrolle på smalle skærme. Siderne er tilgængelige uden login. */
.legal-page h2 { font-size: 1.15rem; margin: 24px 0 8px 0; }
.legal-page p, .legal-page li { line-height: 1.65; }
.legal-page ul { margin: 8px 0 16px 0; padding-left: 22px; }
.legal-table { border-collapse: collapse; width: 100%; margin: 8px 0 16px 0; display: block; overflow-x: auto; }
.legal-table th, .legal-table td { border: 1px solid var(--mud-palette-lines-default, #ddd); padding: 8px 12px; text-align: left; vertical-align: top; }
.legal-table th { background: rgba(126, 111, 255, .08); }