/* /Components/Dialogs/DialogLayout.razor.rz.scp.css */
/* Fills the height Radzen's dialog content box gives us (see the .rz-dialog-content rule in app.css), so
   the body below can be the thing that scrolls. min-height: 0 because a flex item's default minimum is its
   content, which would let it push past the box instead of shrinking and scrolling. */
.dialog-layout[b-vurg99hyjj] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.dialog-body[b-vurg99hyjj] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* A little air above the buttons, and room to the right so a scrollbar on the body does not sit directly
   against them. */
.dialog-buttons[b-vurg99hyjj] {
    flex: 0 0 auto;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding-top: 1rem;
}
/* /Components/Layout/CookieBanner.razor.rz.scp.css */
/* Hidden until app.js reveals it for users who have not yet acknowledged the notice. */
.cookie-banner[b-h58hd76wk8] {
    display: none;
}

    .cookie-banner.visible[b-h58hd76wk8] {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1001;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        flex-wrap: wrap;
        padding: 0.75rem 1.25rem;
        background: var(--rz-base-800, #2b2b2b);
        color: var(--rz-base-0, #fff);
        box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.3);
    }

.cookie-banner-text[b-h58hd76wk8] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
    max-width: 60ch;
}

.cookie-banner-button[b-h58hd76wk8] {
    flex-shrink: 0;
    cursor: pointer;
    padding: 0.4rem 1.25rem;
    border: none;
    border-radius: var(--rz-border-radius, 4px);
    background: var(--rz-primary, #1976d2);
    color: var(--rz-on-primary, #fff);
    font-size: 0.9rem;
    font-weight: 600;
}

    .cookie-banner-button:hover[b-h58hd76wk8] {
        background: var(--rz-primary-dark, #1565c0);
    }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* The layout is a two-row, two-column grid: a full-width header on top, then the sidebar and the page
   content side by side. The colours and sizes mirror the Radzen theme variables so the look is unchanged
   from the previous RadzenLayout-based markup. */
/* Owns the viewport height on behalf of everything in it, so the deadline banner takes its share off the
   top and the layout gets what is left. With the layout claiming 100dvh for itself, the banner made the
   document taller than the window and the browser put a page scrollbar next to the ones the sidebar and
   the content already have. */
.app-shell[b-068999xfxp] {
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.layout[b-068999xfxp] {
    /* min-height: 0 so this shrinks to the space the banner leaves instead of its content's height. */
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: grid;
    /* minmax(0, 1fr) instead of 1fr: a bare 1fr track has an implicit min-content minimum, so the
       header's nowrap title would force this shared column wider than the screen, clipping all the page
       content on the right. minmax(0, ...) lets the column shrink to the viewport instead. */
    grid-template-columns: var(--rz-sidebar-width, 300px) minmax(0, 1fr);
    grid-template-rows: var(--rz-header-min-height, 3.125rem) 1fr;
    grid-template-areas:
        "header header"
        "sidebar page";
    background: var(--rz-layout-background-color, var(--rz-base-100));
}

.header[b-068999xfxp] {
    grid-area: header;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1rem;
    background: var(--rz-header-background-color, var(--rz-primary));
    color: var(--rz-header-color, var(--rz-on-primary, #fff));
    box-shadow: var(--rz-header-shadow);
}

.header-left[b-068999xfxp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.header-right[b-068999xfxp] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.menu-button[b-068999xfxp] {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: inherit;
}

.banner-title[b-068999xfxp] {
    font-size: clamp(1.1rem, 5vw, 2rem);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
    text-decoration: none;
}

.header-icon[b-068999xfxp] {
    display: flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.header-button[b-068999xfxp] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.logout-form[b-068999xfxp] {
    display: flex;
    align-items: center;
    margin: 0;
}

.sidebar[b-068999xfxp] {
    grid-area: sidebar;
    overflow-y: auto;
    background: var(--rz-sidebar-background-color, #fff);
    color: var(--rz-sidebar-color, inherit);
    border-inline-end: var(--rz-sidebar-border-inline-end, 1px solid #e0e0e0);
}

/* When the menu is long enough to scroll, its scrollbar ends up right next to the page's, with only the
   sidebar border between them — two identical bars that give no clue which one moves what. Make the
   menu's visibly slighter than the page's so it reads as secondary rather than as the twin of the one
   beside it. Only the ::-webkit-* properties here: setting scrollbar-width on the element as well would
   make Chromium ignore these rules entirely (the Firefox equivalent is under the @supports guard in
   app.css). */
.sidebar[b-068999xfxp]::-webkit-scrollbar {
    width: 6px;
}

.sidebar[b-068999xfxp]::-webkit-scrollbar-thumb {
    background: var(--rz-base-300, #d0d0d0);
}

.sidebar[b-068999xfxp]::-webkit-scrollbar-thumb:hover {
    background: var(--rz-base-400, #b0b0b0);
}

.page[b-068999xfxp] {
    grid-area: page;
    min-width: 0;
    overflow: auto;
    /* Always reserve room for the vertical scrollbar so the content does not shift when it appears on a
       long page (such as a calendar day with a lot of text) and disappears on a short one. */
    scrollbar-gutter: stable;
    padding: var(--rz-layout-body-padding, 1rem);
}

/* The backdrop only ever appears on mobile while the menu is open. */
.menu-backdrop[b-068999xfxp] {
    display: none;
}

/* Desktop: the hamburger collapses the persistent sidebar (shown by default). */
.menu-toggle-state:checked ~ .app-shell .layout[b-068999xfxp] {
    grid-template-columns: 0 minmax(0, 1fr);
}

.menu-toggle-state:checked ~ .app-shell .layout .sidebar[b-068999xfxp] {
    display: none;
}

/* Mobile: the sidebar leaves the grid and slides in over the content as an overlay drawer, so opening
   the menu no longer pushes the page to the side. */
@media (max-width: 768px) {
    .layout[b-068999xfxp] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "header"
            "page";
    }

    .sidebar[b-068999xfxp] {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(80vw, var(--rz-sidebar-width, 300px));
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        z-index: 5;
        box-shadow: var(--rz-shadow-4, 0 0.5rem 1rem rgba(0, 0, 0, 0.3));
    }

    /* Keep a single-column grid even when the desktop "collapse" rule above is active. */
    .menu-toggle-state:checked ~ .app-shell .layout[b-068999xfxp] {
        grid-template-columns: minmax(0, 1fr);
    }

    .menu-toggle-state:checked ~ .app-shell .layout .sidebar[b-068999xfxp] {
        display: block;
        transform: translateX(0);
    }

    .menu-toggle-state:checked ~ .app-shell .layout .menu-backdrop[b-068999xfxp] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 4;
        background: rgba(0, 0, 0, 0.4);
    }
}

/* Editing content is a desktop task, so the edit pencil is hidden on a narrow portrait screen to
   de-clutter the mobile header. Rotating the phone to landscape (where the layout reads fine) brings it
   back. The width guard keeps it visible on a small phone held landscape, which counts as portrait only
   when taller than wide. */
@media (max-width: 768px) and (orientation: portrait) {
    .header-icon--editor[b-068999xfxp] {
        display: none;
    }
}

#blazor-error-ui[b-068999xfxp] {
    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[b-068999xfxp] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/PaymentDeadlineBanner.razor.rz.scp.css */
.deadline-banner[b-ecqqz16k4g] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1.25rem;
    color: var(--rz-base-0, #fff);
    font-size: 0.9rem;
    line-height: 1.4;
}

.deadline-banner--upcoming[b-ecqqz16k4g] {
    background: var(--rz-success, #2e7d32);
}

.deadline-banner--reached[b-ecqqz16k4g] {
    background: var(--rz-danger, #c62828);
}

.deadline-banner-body[b-ecqqz16k4g] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 1.1rem;
}

.deadline-banner-lead[b-ecqqz16k4g] {
    font-weight: 700;
}

/* No white-space:nowrap here, so a long group (several matches on one deadline) wraps within the banner
   rather than overflowing the viewport. */
.deadline-banner-date[b-ecqqz16k4g] {
    font-weight: 600;
    white-space: nowrap;
    margin-right: 0.25rem;
}

/* Links sit on a coloured background, so keep them white and underlined for contrast. */
.deadline-banner a[b-ecqqz16k4g] {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
}

    .deadline-banner a:hover[b-ecqqz16k4g] {
        text-decoration: none;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-9lm0jpykem],
.components-reconnect-repeated-attempt-visible[b-9lm0jpykem],
.components-reconnect-failed-visible[b-9lm0jpykem],
.components-pause-visible[b-9lm0jpykem],
.components-resume-failed-visible[b-9lm0jpykem],
.components-rejoining-animation[b-9lm0jpykem] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-9lm0jpykem],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-9lm0jpykem],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-9lm0jpykem],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-9lm0jpykem],
#components-reconnect-modal.components-reconnect-retrying[b-9lm0jpykem],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-9lm0jpykem],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-9lm0jpykem],
#components-reconnect-modal.components-reconnect-failed[b-9lm0jpykem],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-9lm0jpykem] {
    display: block;
}


#components-reconnect-modal[b-9lm0jpykem] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-9lm0jpykem 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-9lm0jpykem 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-9lm0jpykem 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-9lm0jpykem]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-9lm0jpykem 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-9lm0jpykem {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-9lm0jpykem {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-9lm0jpykem {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-9lm0jpykem] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-9lm0jpykem] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-9lm0jpykem] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-9lm0jpykem] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-9lm0jpykem] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-9lm0jpykem] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-9lm0jpykem] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-9lm0jpykem 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-9lm0jpykem] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-9lm0jpykem {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/SideMenu.razor.rz.scp.css */
/* Markdown menus can nest lists. The browser default indents each nested level by 40px, which pushes the
   second-level bullet far past the parent's text. Tighten it so the nested bullet sits roughly under the
   text of the item above it. ::deep reaches the lists RadzenMarkdown renders inside this component. */
[b-qxvzk34p3k] ul ul {
    padding-inline-start: 1rem;
}
/* /Components/Layout/ViewAsMemberButton.razor.rz.scp.css */
.view-as-form[b-pojvq248kt] {
    display: flex;
    align-items: center;
    margin: 0;
}

.view-as-button[b-pojvq248kt] {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    border-radius: 999px;
}

/* Highlighted while the preview is active, so it is obvious the site is being viewed as an ordinary
   member and which control switches back. */
.view-as-button--active[b-pojvq248kt] {
    background: var(--rz-warning, #e69500);
    color: #fff;
    padding: 0.15rem;
}
/* /Components/Pages/ActivityLog.razor.rz.scp.css */
/* The cards always flow straight down in a single column, growing to fit their description. The log is
   used mostly on mobile, so there is no left-to-right wrapping like the member list has. */
.activity-cards[b-7l89wk8wdt] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.activity-card[b-7l89wk8wdt] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.75rem;
    border: 1px solid var(--rz-border, #d4d4d8);
    border-radius: 0.5rem;
    background: var(--rz-base-100, #f4f4f5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.activity-card-date[b-7l89wk8wdt] {
    font-weight: 700;
}

/* Leave room on the right of the date for the lock icon so it never runs underneath it. */
.activity-card.is-signed .activity-card-date[b-7l89wk8wdt] {
    padding-right: 2rem;
}

.activity-card-icons[b-7l89wk8wdt] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: inline-flex;
    gap: 0.25rem;
}

.activity-card-icon[b-7l89wk8wdt] {
    display: inline-flex;
    cursor: default;
}

.activity-card-description[b-7l89wk8wdt] {
    overflow-wrap: anywhere;
}

    /* Trim the markdown's outer paragraph margins so the description sits flush within the card. */
    .activity-card-description[b-7l89wk8wdt]  p:first-child {
        margin-top: 0;
    }

    .activity-card-description[b-7l89wk8wdt]  p:last-child {
        margin-bottom: 0;
    }

.activity-card-signed[b-7l89wk8wdt] {
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color, #6b7280);
}

/* Pushed to the bottom-right corner, matching the member list. */
.activity-card-menu[b-7l89wk8wdt] {
    align-self: flex-end;
}

/* The add/edit form that replaces the list. */
.activity-form[b-7l89wk8wdt] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
    max-width: 40rem;
}

.activity-form-field[b-7l89wk8wdt] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .activity-form-field label[b-7l89wk8wdt] {
        font-weight: 600;
    }

.activity-form-actions[b-7l89wk8wdt] {
    display: flex;
    gap: 0.5rem;
}
/* /Components/Pages/Calendar.razor.rz.scp.css */
/* flow-root makes this a block formatting context, which both contains the floated calendar (so it does
   not overlap later content) and stops the first child's top margin from collapsing out through the top.
   Without that, a day whose content starts with a top margin (the "Ingen hendelse" paragraph) pushed the
   whole box — and so the calendar — about 1rem down, while a day rendered from Markdown did not, making
   the calendar appear to jump when switching between days. */
.calendar-page[b-huoaxam4a2] {
    display: flow-root;
    max-width: 60rem;
    margin: 0 auto 2rem 0;
}

/* The calendar floats so the day's content starts to the right and wraps below it when tall. A frame
   and faint background set it apart from the day's content. */
.calendar[b-huoaxam4a2] {
    float: left;
    margin: 0 1.5rem 1rem 0;
    padding: 0.75rem;
    border: 1px solid var(--rz-border, #d4d4d8);
    border-radius: 0.5rem;
    background: var(--rz-base-100, #f4f4f5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.calendar-nav[b-huoaxam4a2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.calendar-nav a[b-huoaxam4a2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 1.25rem;
    line-height: 1;
}

.calendar-nav a:hover[b-huoaxam4a2] {
    background: var(--rz-base-200);
}

.calendar-title[b-huoaxam4a2] {
    flex: 1;
    text-align: center;
    font-weight: 700;
}

.calendar-table[b-huoaxam4a2] {
    border-collapse: collapse;
}

/* A three-column grid with equal flexible side columns keeps the link centred in the box no matter how
   many action buttons are shown; the buttons live in the right column. */
.calendar-footer[b-huoaxam4a2] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-top: 0.5rem;
}

.calendar-footer-left[b-huoaxam4a2] {
    grid-column: 1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.calendar-footer-icon[b-huoaxam4a2] {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.calendar-footer-icon:hover[b-huoaxam4a2] {
    color: var(--rz-primary);
}

.calendar-list-link[b-huoaxam4a2] {
    grid-column: 2;
    text-align: center;
    font-size: 0.9rem;
}

.calendar-actions[b-huoaxam4a2] {
    grid-column: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
}

.calendar-edit-link[b-huoaxam4a2] {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.calendar-edit-link:hover[b-huoaxam4a2] {
    color: var(--rz-primary);
}

.calendar-delete-link:hover[b-huoaxam4a2] {
    color: var(--rz-danger);
}

.calendar-table th[b-huoaxam4a2] {
    padding: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
    text-align: center;
}

.calendar-table td[b-huoaxam4a2] {
    padding: 0;
    text-align: center;
}

/* The week-number column is quietly set off from the days. */
.week-col[b-huoaxam4a2] {
    color: var(--rz-text-secondary-color);
    font-size: 0.8rem;
    padding-right: 0.5rem !important;
    border-right: 1px solid var(--rz-border, #d4d4d8);
}

.day a[b-huoaxam4a2] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0.1rem;
    border-radius: 0.25rem;
    color: inherit;
    text-decoration: none;
}

/* Days with an event get a faint, rounded grey background to stand out, in addition to the dot. The
   rounded corners come from the cell's own border-radius. */
.day.has-event a[b-huoaxam4a2] {
    background: var(--rz-base-200, #e9e9ec);
}

.day a:hover[b-huoaxam4a2] {
    background: var(--rz-base-300, #dcdce0);
}

/* Days spilling in from the neighbouring months are muted. */
.day.out-month a[b-huoaxam4a2] {
    color: var(--rz-text-disabled-color);
}

/* Today is outlined; the selected day is filled. */
.day.today a[b-huoaxam4a2] {
    outline: 2px solid var(--rz-primary);
    outline-offset: -2px;
}

.day.selected a[b-huoaxam4a2] {
    background: var(--rz-primary);
    color: var(--rz-primary-contrast, #fff);
}

/* A dot marks days that have an event. */
.day.has-event a[b-huoaxam4a2]::after {
    content: "";
    position: absolute;
    bottom: 0.3rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: var(--rz-danger);
}

.day.selected.has-event a[b-huoaxam4a2]::after {
    background: var(--rz-primary-contrast, #fff);
}

/* A dashed outline marks days that have an unpublished draft. It is only rendered for editors, and uses
   an outline (not a border) so it never shifts the grid layout. */
.day.has-draft a[b-huoaxam4a2] {
    outline: 1px dashed var(--rz-primary);
    outline-offset: -1px;
}

/* When the day content is split by a "---" line, the part before it stays in a column to the right of
   the calendar: flow-root makes it a block formatting context, so it sits beside the floated calendar
   and never wraps underneath, even when it is taller than the calendar. */
.day-right[b-huoaxam4a2] {
    display: flow-root;
}

/* The part after the split clears below the calendar (and below the right-hand column). */
.day-below[b-huoaxam4a2] {
    clear: both;
}

/* The editor-only draft section under the day's content: a divider, a note, and its action buttons. */
.draft-divider[b-huoaxam4a2] {
    clear: both;
    margin: 1.5rem 0 1rem 0;
    border: none;
    border-top: 1px solid var(--rz-border, #d4d4d8);
}

.draft-block[b-huoaxam4a2] {
    clear: both;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.draft-note[b-huoaxam4a2] {
    margin: 0;
    font-style: italic;
    color: var(--rz-text-secondary-color, #52525b);
}

.draft-actions[b-huoaxam4a2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.draft-button[b-huoaxam4a2] {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--rz-primary);
    border-radius: var(--rz-button-border-radius, 4px);
    background: transparent;
    color: var(--rz-primary);
    font-size: 0.875rem;
    cursor: pointer;
}

.draft-button:hover[b-huoaxam4a2] {
    background: var(--rz-primary);
    color: var(--rz-primary-contrast, #fff);
}

/* The publish button is the primary action, so it is filled rather than outlined. */
.draft-button.draft-publish[b-huoaxam4a2] {
    background: var(--rz-primary);
    color: var(--rz-primary-contrast, #fff);
}

.draft-button.draft-publish:hover[b-huoaxam4a2] {
    filter: brightness(0.92);
}

/* On narrow screens the calendar stops floating and the content stacks below it. */
@media (max-width: 640px) {
    .calendar[b-huoaxam4a2] {
        float: none;
        width: 100%;
        margin: 0 0 1.5rem 0;
    }

    .calendar-table[b-huoaxam4a2] {
        width: 100%;
    }

    .day a[b-huoaxam4a2] {
        width: 100%;
    }
}

/* The edit/new/delete actions are a desktop editing task, so they are hidden on a narrow portrait screen
   to de-clutter the calendar on mobile. Rotating to landscape (where the layout reads fine) brings them
   back. Matches the header edit pencil so both disappear and reappear together. */
@media (max-width: 768px) and (orientation: portrait) {
    .calendar-actions[b-huoaxam4a2] {
        display: none;
    }
}
/* /Components/Pages/CalendarDiff.razor.rz.scp.css */
.diff[b-midwxb865u] {
    border: 1px solid var(--rz-border);
    border-radius: 0.4rem;
    overflow-x: auto;
    padding: 0.4rem 0;
}

.diff-line[b-midwxb865u] {
    /* Preserve leading and internal spaces so the markdown lines up as written. */
    white-space: pre;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.45;
    padding: 0 0.75rem;
}

/* Green is kept light and red made distinctly darker, so the two lines differ in lightness (not just hue)
   and stay tellable apart with red/green colour blindness. The +/- prefix is the colour-independent cue. */
.diff-added[b-midwxb865u] {
    background: rgba(56, 142, 60, 0.13);
}

.diff-removed[b-midwxb865u] {
    background: rgba(160, 20, 20, 0.42);
}

.diff-context[b-midwxb865u] {
    color: var(--rz-text-secondary-color);
}
/* /Components/Pages/EditWeb.razor.rz.scp.css */
/* Centre every grid cell's content vertically so the icons line up with the row text. */
[b-h5j1vxuoc4] td {
    vertical-align: middle;
}

/* Browsing and previewing keep the ordinary flow with a little space under the content. */
.editor-page[b-h5j1vxuoc4] {
    margin: 0 0 2rem 0;
}

/* While editing, the page fills the height available inside the layout's scroll area (the parent .page
   has a definite height and 1rem of padding, which becomes the breathing room under the buttons). The
   column then hands its spare height to the textarea, so the Save/Cancel buttons stay in view without a
   page scrollbar. */
.editor-page.editing[b-h5j1vxuoc4] {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.editor-page.editing .editor-edit[b-h5j1vxuoc4] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* The textarea's wrapper takes all the height left over from the fixed rows above and below it. */
.editor-page.editing .editor-body[b-h5j1vxuoc4] {
    flex: 1;
    min-height: 0;
    display: flex;
}

/* Reach into the Radzen textarea to make it fill its wrapper. resize is turned off since the height is
   driven by the layout, and box-sizing keeps the border inside the measured height. */
.editor-page.editing .editor-body[b-h5j1vxuoc4]  textarea {
    flex: 1;
    width: 100%;
    min-height: 0;
    box-sizing: border-box;
    resize: none;
}

.editor-page.editing .editor-actions[b-h5j1vxuoc4] {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
/* /Components/Pages/EventHealth.razor.rz.scp.css */
/* The detail is where a warning explains itself to whoever has to fix it, so it has to be readable in
   full. Radzen truncates cell text by default; these wrap instead. */
[b-j7ugo00bkw] td.health-detail .rz-cell-data {
    white-space: normal;
    overflow-wrap: anywhere;
}
/* /Components/Pages/EventRegister.razor.rz.scp.css */
/* Let long event names wrap instead of being truncated with an ellipsis by the grid's default cell style.
   ::deep reaches the cells RadzenDataGrid renders, and !important beats its own white-space rule. */
[b-aa0on96bqa] .rz-cell-data {
    white-space: normal !important;
}
/* /Components/Pages/Members.razor.rz.scp.css */
/* The cards flow left to right and wrap to a new row when they reach the right edge. The min() keeps a
   single card from overflowing on very narrow screens, where the grid collapses to one column. */
.member-cards[b-tk5na7h4ie] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.member-card[b-tk5na7h4ie] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem;
    border: 1px solid var(--rz-border, #d4d4d8);
    border-radius: 0.5rem;
    background: var(--rz-base-100, #f4f4f5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.member-name[b-tk5na7h4ie] {
    font-weight: 700;
}

/* Leave room on the right of the name for the corner icons so a long name never runs underneath them. */
.member-card.is-admin .member-name[b-tk5na7h4ie] {
    padding-right: 3.5rem;
}

.member-line[b-tk5na7h4ie] {
    overflow-wrap: anywhere;
}

.member-card-icons[b-tk5na7h4ie] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: inline-flex;
    gap: 0.25rem;
}

.member-card-icon[b-tk5na7h4ie] {
    display: inline-flex;
    cursor: default;
}

/* Pushed to the bottom-right corner; margin-top: auto keeps it at the bottom even when the card is
   stretched to match a taller neighbour in the same row. */
.member-card-menu[b-tk5na7h4ie] {
    margin-top: auto;
    align-self: flex-end;
}
/* /Components/Pages/Participants.razor.rz.scp.css */
/* Withdrawn ("Slettet") registrations are struck through and faded out; when a person is withdrawn from
   every event they appear in, their name and club get the same treatment. */
.withdrawn[b-ns5jkbd92g] {
    text-decoration: line-through;
    opacity: 0.45;
}

.paid-mark[b-ns5jkbd92g] {
    color: var(--rz-success);
    margin-left: 0.35rem;
}

/* Event names are long, so let the column headers wrap instead of stretching the grid. */
[b-ns5jkbd92g] .rz-column-title-content {
    white-space: normal;
}
/* /Components/Pages/Registrations.razor.rz.scp.css */
/* Approved registrations stand out; withdrawn ones are greyed and struck through. The classes are put on
   the grid rows in code, so ::deep is needed to reach the rows RadzenDataGrid renders, and !important is
   needed to beat the grid's own row and alternating-stripe backgrounds.
   The success tint is semi-transparent, so on the frozen Nr/Navn columns the horizontally-scrolled cells
   would show through and overlap the text. Layer the tint over the opaque base colour so every approved
   cell — frozen ones included — stays opaque. */
[b-25mry96aka] tr.status-approved td {
    background:
        linear-gradient(var(--rz-success-lighter, #e8f5e9), var(--rz-success-lighter, #e8f5e9)),
        var(--rz-base-background-color, #fff) !important;
}

/* Grey every cell on a withdrawn row. Radzen wraps each cell's content in an inner span with its own
   colour, so colouring the td alone only reaches the plain text; the descendant selector is needed to
   grey the number, dates, status text and the name link consistently. */
[b-25mry96aka] tr.status-deleted td,
[b-25mry96aka] tr.status-deleted td * {
    color: #c0c0c0 !important;
    text-decoration: line-through;
    text-decoration-color: #c0c0c0;
}

/* The squad overview's phase headings ("For-stevne"/"Hovedstevne"), only shown when the event has both. */
.squad-phase[b-25mry96aka] {
    font-size: 1.25rem;
    margin: 0.5rem 0 1rem 0;
}
/* /Components/Pages/SquadList.razor.rz.scp.css */
.squad[b-eqwzi3vzfw] {
    margin-bottom: 1.5rem;
}

.squad-title[b-eqwzi3vzfw] {
    font-size: 1.1rem;
    margin: 0 0 0.5rem 0;
}

/* The count is supporting detail next to the squad's name, so it is toned down rather than competing
   with it. */
.squad-count[b-eqwzi3vzfw] {
    color: var(--rz-text-secondary-color);
    font-weight: 400;
    margin-left: 0.35rem;
}

.squad-empty[b-eqwzi3vzfw] {
    color: var(--rz-text-secondary-color);
    margin: 0;
}

/* Fixed layout so the columns come from the widths below rather than from each table's own contents:
   these tables are stacked down the page, and columns that shifted from squad to squad made them read as
   unrelated tables instead of one list broken into squads. */
.squad-members[b-eqwzi3vzfw] {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    max-width: 60rem;
}

.squad-members th[b-eqwzi3vzfw],
.squad-members td[b-eqwzi3vzfw] {
    text-align: left;
    padding: 0.35rem 0.75rem 0.35rem 0;
    border-bottom: 1px solid var(--rz-border);
    /* A fixed layout will not grow for a long name or club, so let the text wrap instead of spilling. */
    overflow-wrap: anywhere;
}

.squad-members th:nth-child(1)[b-eqwzi3vzfw],
.squad-members td:nth-child(1)[b-eqwzi3vzfw] {
    width: 40%;
}

.squad-members th:nth-child(2)[b-eqwzi3vzfw],
.squad-members td:nth-child(2)[b-eqwzi3vzfw] {
    width: 30%;
}

.squad-members th:nth-child(3)[b-eqwzi3vzfw],
.squad-members td:nth-child(3)[b-eqwzi3vzfw] {
    width: 20%;
}

.squad-members th:nth-child(4)[b-eqwzi3vzfw],
.squad-members td:nth-child(4)[b-eqwzi3vzfw] {
    width: 10%;
}

.squad-members th[b-eqwzi3vzfw] {
    color: var(--rz-text-secondary-color);
    font-weight: 600;
}
/* /Components/Pages/Tasks.razor.rz.scp.css */
/* Completed tasks are muted so open ones stand out. The class is set on the grid rows in code, so ::deep is
   needed to reach the rows RadzenDataGrid renders. */
[b-5cvo0goksb] tr.task-completed td {
    color: var(--rz-text-secondary-color) !important;
}

/* Task text can be several lines of free text, so show all of it instead of the grid's default
   single truncated line. pre-wrap keeps the line breaks the author typed; ::deep reaches the cells
   RadzenDataGrid renders, and !important beats its own white-space rule. */
[b-5cvo0goksb] td.task-text .rz-cell-data {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere;
}
/* /Components/Shared/PageHeader.razor.rz.scp.css */
.page-header[b-4bxsyhjc90] {
    flex: 0 0 auto;
    margin-bottom: 1rem;
}

.page-header-row[b-4bxsyhjc90] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* No margin of its own: the page's padding is the only space above the title, so the gap over it matches
   the one to its left.
   The line height is normalised for the same reason: the theme gives an h1 a 48px line box around a 32px
   font, and the half-leading pushed the letters a few pixels further down than the menu's heading, which
   has none. Equal boxes were not enough — what is seen is where the letters sit. */
.page-header-row h1[b-4bxsyhjc90] {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    line-height: normal;
}

.page-header-actions[b-4bxsyhjc90] {
    flex: 0 0 auto;
}

/* Sized to the title rather than to body text, so the arrow reads as part of the heading. The muted
   colour keeps it from competing with the title it sits beside. */
.page-header-back[b-4bxsyhjc90] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: var(--rz-text-secondary-color);
    text-decoration: none;
}

.page-header-back:hover[b-4bxsyhjc90] {
    color: var(--rz-text-color);
}

.page-header-back[b-4bxsyhjc90]  .rz-icon,
.page-header-back[b-4bxsyhjc90]  i {
    font-size: 1.75rem;
}

/* Fades from the text colour to the muted one across the page, so the rule closes the heading without
   drawing a hard line across the whole width. */
.page-header-rule[b-4bxsyhjc90] {
    height: 2px;
    margin-top: 0.35rem;
    background: linear-gradient(to right, var(--rz-text-color), var(--rz-text-secondary-color));
}