/* /Pages/Authenticated/Badges.razor.rz.scp.css */
/* Badge tiles reuse the home Quick Actions language: hue-derived gradient,
   large faded glyph, frosted caption. Tokens come from appleish.css. */

.ap-badge-hero[b-vkgveig5d9] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: var(--ap-space-6);
    border-radius: var(--ap-radius-lg);
    color: #fff;
    box-shadow: var(--ap-shadow);
    overflow: hidden;
    position: relative;
}

.ap-badge-hero--level[b-vkgveig5d9] {
    background: linear-gradient(135deg, hsl(38, 78%, 52%), hsl(18, 72%, 42%));
}

.ap-badge-hero--progress[b-vkgveig5d9] {
    background: linear-gradient(135deg, hsl(210, 62%, 52%), hsl(250, 48%, 44%));
}

.ap-badge-hero[b-vkgveig5d9]  .rz-text-secondary-color,
.ap-badge-hero[b-vkgveig5d9]  .rz-text-muted {
    color: rgba(255, 255, 255, 0.82) !important;
}

.ap-badge-hero[b-vkgveig5d9]  .rz-progressbar-circular-value {
    stroke: rgba(255, 255, 255, 0.92);
}

.ap-badge-hero[b-vkgveig5d9]  .rz-progressbar-circular-background {
    stroke: rgba(255, 255, 255, 0.22);
}

.ap-badge-grid[b-vkgveig5d9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--ap-space-3);
}

.ap-badge-tile[b-vkgveig5d9] {
    position: relative;
    display: block;
    height: 172px;
    border-radius: var(--ap-radius);
    overflow: hidden;
    background: linear-gradient(135deg,
        hsl(var(--apt-hue, 210), 58%, 56%),
        hsl(calc(var(--apt-hue, 210) + 40), 52%, 42%));
    box-shadow: var(--ap-shadow-sm);
    transition: box-shadow var(--ap-duration) var(--ap-ease),
                transform var(--ap-duration) var(--ap-ease);
}

.ap-badge-tile:hover[b-vkgveig5d9] {
    box-shadow: var(--ap-shadow-lg);
    transform: translateY(-2px);
}

.ap-badge-tile--locked[b-vkgveig5d9] {
    filter: grayscale(0.55) brightness(0.82);
}

.ap-badge-tile__glyph[b-vkgveig5d9] {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3.25rem;
    color: rgba(255, 255, 255, 0.32);
    pointer-events: none;
}

.ap-badge-tile__caption[b-vkgveig5d9] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--ap-space-3) var(--ap-space-4) var(--ap-space-4);
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.62),
        rgba(0, 0, 0, 0.32) 68%,
        rgba(0, 0, 0, 0.10));
    -webkit-backdrop-filter: blur(16px) saturate(112%) brightness(0.9);
    backdrop-filter: blur(16px) saturate(112%) brightness(0.9);
    color: #fff;
}

.ap-badge-tile__title[b-vkgveig5d9] {
    margin: 0;
    font-family: var(--ap-font-display);
    font-size: var(--ap-text-lg);
    font-weight: 600;
    line-height: var(--ap-leading-tight);
    letter-spacing: -0.01em;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.ap-badge-tile__meta[b-vkgveig5d9] {
    margin: var(--ap-space-1) 0 0;
    font-size: var(--ap-text-sm);
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ap-badge-tile__foot[b-vkgveig5d9] {
    margin: var(--ap-space-1) 0 0;
    font-size: var(--ap-text-xs, 0.75rem);
    color: rgba(255, 255, 255, 0.78);
}

.ap-badge-highlight[b-vkgveig5d9] {
    animation: ap-badge-pulse-b-vkgveig5d9 1.2s ease-in-out 3;
    box-shadow: 0 0 0 2px #f9a825, var(--ap-shadow-sm);
}

@keyframes ap-badge-pulse-b-vkgveig5d9 {
    0%, 100% { box-shadow: 0 0 0 2px #f9a825, 0 0 0 0 rgba(249, 168, 37, 0.6); }
    50% { box-shadow: 0 0 0 2px #f9a825, 0 0 0 12px rgba(249, 168, 37, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .ap-badge-tile[b-vkgveig5d9],
    .ap-badge-highlight[b-vkgveig5d9] {
        transition: none;
        animation: none;
    }
    .ap-badge-tile:hover[b-vkgveig5d9] {
        transform: none;
    }
}
/* /Pages/Authenticated/Messages.razor.rz.scp.css */
/* =============================================================================
 * /messages — scoped styles.
 *
 * Colour NEVER appears as a literal here: every value resolves through the
 * appleish token layer (--ap-*) or a Radzen semantic (--rz-danger,
 * --rz-text-disabled-color). Dark mode therefore needs no rule of its own —
 * wwwroot/css/appleish.css redefines the same tokens under
 * :root[data-theme="dark"] and the page follows.
 *
 * CSS-isolation note: Blazor stamps the scope attribute only on elements
 * written literally in Messages.razor. A class placed ON a Radzen component
 * (RadzenButton / RadzenBadge / RadzenAlert / RadzenIcon / RadzenText) lands on
 * that component's own root, which carries no scope id — so those selectors
 * must be written with a ::deep prefix. Plain selectors are for our own
 * div/span/input elements only.
 * ============================================================================= */

.ap-msg-page[b-13k84w1kr1] {
    display: flex;
    flex-direction: column;
    gap: var(--ap-space-4);
}

/* ── Panes ────────────────────────────────────────────────────────────────── */

.ap-msg-panes[b-13k84w1kr1] {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: var(--ap-space-4);
    /* dvh, not vh: the mobile bottom tab bar plus browser chrome would otherwise
       push the composer below the fold. Capped so ultra-tall displays don't
       stretch the thread into a full-screen wall. */
    height: min(calc(100dvh - 18rem), 820px);
    min-height: 440px;
}

/* Mandatory: without min-width:0 a long unbroken message body blows the grid out. */
.ap-msg-panes > *[b-13k84w1kr1] {
    min-width: 0;
}

/* ── Conversation rail ────────────────────────────────────────────────────── */

.ap-msg-list[b-13k84w1kr1] {
    background: var(--ap-bg-elevated);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius);
    box-shadow: var(--ap-shadow-sm);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ap-msg-list__head[b-13k84w1kr1] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: var(--ap-space-3) var(--ap-space-4);
    background: var(--ap-bg-elevated);
    border-bottom: 1px solid var(--ap-border);
}

[b-13k84w1kr1] .ap-msg-list__label {
    margin: 0;
}

.ap-msg-row[b-13k84w1kr1] {
    display: flex;
    align-items: center;
    gap: var(--ap-space-3);
    min-height: var(--ap-tap-min);
    padding: var(--ap-space-2) var(--ap-space-3);
    border-bottom: 1px solid var(--ap-border);
    cursor: pointer;
    transition: background var(--ap-duration-fast) var(--ap-ease);
}

.ap-msg-row:hover[b-13k84w1kr1] {
    background: var(--ap-bg-tinted);
}

/* The selected row and an own-message bubble both used to reach for the soft
   accent; the row keeps a tinted ground plus an accent edge so the two never
   read as the same surface, in either theme. */
.ap-msg-row.is-selected[b-13k84w1kr1] {
    background: var(--ap-bg-tinted);
    box-shadow: inset 3px 0 0 0 var(--ap-accent);
}

.ap-msg-row:focus-visible[b-13k84w1kr1] {
    outline: none;
    box-shadow: var(--ap-shadow-focus);
}

.ap-msg-row__avatar[b-13k84w1kr1] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--ap-radius-pill);
    background: var(--ap-bg-sunken);
    color: var(--ap-text-secondary);
}

.ap-msg-row__text[b-13k84w1kr1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0; /* required for the title ellipsis */
    flex: 1 1 auto;
}

.ap-msg-row__title[b-13k84w1kr1] {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ap-msg-row__meta[b-13k84w1kr1] {
    display: flex;
    align-items: center;
    gap: var(--ap-space-1);
    font-size: var(--ap-text-xs);
    color: var(--ap-text-secondary);
}

[b-13k84w1kr1] .ap-msg-row__muted {
    font-size: var(--ap-text-sm);
    color: var(--ap-text-tertiary);
}

[b-13k84w1kr1] .ap-msg-row__unread {
    flex: 0 0 auto;
    margin-left: auto;
}

/* ── Thread pane ──────────────────────────────────────────────────────────── */

.ap-msg-thread-pane[b-13k84w1kr1] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--ap-bg-elevated);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius);
    box-shadow: var(--ap-shadow-sm);
    overflow: hidden;
}

.ap-msg-thread-head[b-13k84w1kr1] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--ap-space-2);
    padding: var(--ap-space-2) var(--ap-space-4);
    border-bottom: 1px solid var(--ap-border);
    background: var(--ap-bg-elevated);
}

[b-13k84w1kr1] .ap-msg-thread-head__title {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* One pane at a time below 900px; the back control only exists there. */
[b-13k84w1kr1] .ap-msg-back {
    display: none;
}

.ap-msg-thread[b-13k84w1kr1] {
    flex: 1 1 auto;
    min-height: 0;               /* mandatory inside a flex column, or it grows instead of scrolling */
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: var(--ap-space-3);
    padding: var(--ap-space-4);
    background: var(--ap-bg-sunken);
}

.ap-msg-thread > *[b-13k84w1kr1] {
    flex: 0 0 auto;
}

.ap-msg-older[b-13k84w1kr1] {
    text-align: center;
}

/* ── Bubbles ──────────────────────────────────────────────────────────────── */

.ap-msg-bubble[b-13k84w1kr1] {
    display: flex;
    flex-direction: column;
    gap: var(--ap-space-1);
    max-width: min(72ch, 78%);
    padding: var(--ap-space-3) var(--ap-space-4);
    border-radius: var(--ap-radius);
    box-shadow: var(--ap-shadow-sm);
    overflow-wrap: anywhere;
}

.ap-msg-bubble.is-theirs[b-13k84w1kr1] {
    align-self: flex-start;
    background: var(--ap-bg-elevated);
    border: 1px solid var(--ap-border);
}

/* The soft accent tint (not solid accent) keeps the body text on --ap-text and
   contrast-safe in BOTH themes without inventing an on-accent token. */
.ap-msg-bubble.is-mine[b-13k84w1kr1] {
    align-self: flex-end;
    background: var(--ap-accent-soft);
    border: 1px solid transparent;
}

.ap-msg-bubble__meta[b-13k84w1kr1] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ap-space-2);
    font-size: var(--ap-text-xs);
    color: var(--ap-text-secondary);
}

.ap-msg-bubble__sender[b-13k84w1kr1] {
    font-weight: 600;
}

.ap-msg-bubble__body[b-13k84w1kr1] {
    color: var(--ap-text);
    line-height: var(--ap-leading-normal);
    white-space: pre-wrap;
}

.ap-msg-bubble.is-deleted .ap-msg-bubble__body[b-13k84w1kr1] {
    color: var(--ap-text-tertiary);
    font-style: italic;
}

.ap-msg-bubble__reply[b-13k84w1kr1] {
    border-left: 2px solid var(--ap-border-strong);
    padding-left: var(--ap-space-2);
    color: var(--ap-text-tertiary);
    font-size: var(--ap-text-xs);
}

.ap-msg-bubble__image[b-13k84w1kr1] {
    max-width: 240px;
    max-height: 240px;
    border-radius: var(--ap-radius-sm);
    display: block;
}

.ap-msg-bubble__file[b-13k84w1kr1] {
    display: flex;
    align-items: center;
    gap: var(--ap-space-1);
    font-size: var(--ap-text-sm);
    color: var(--ap-text-secondary);
}

[b-13k84w1kr1] .ap-msg-bubble__file-icon {
    font-size: var(--ap-text-lg);
    color: var(--ap-text-tertiary);
}

.ap-msg-bubble__actions[b-13k84w1kr1] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ap-space-1);
}

.ap-msg-reaction[b-13k84w1kr1] {
    background: var(--ap-bg-tinted);
    color: var(--ap-text);
    border-radius: var(--ap-radius-pill);
    padding: 2px var(--ap-space-2);
    font-size: var(--ap-text-xs);
    cursor: pointer;
}

.ap-msg-reaction.is-mine[b-13k84w1kr1] {
    background: var(--ap-accent-soft);
    color: var(--ap-accent);
    font-weight: 600;
}

.ap-msg-reaction:focus-visible[b-13k84w1kr1] {
    outline: none;
    box-shadow: var(--ap-shadow-focus);
}

/* ── Inline edit ──────────────────────────────────────────────────────────── */

.ap-msg-edit[b-13k84w1kr1] {
    display: flex;
    align-items: center;
    gap: var(--ap-space-2);
}

.ap-msg-edit__input[b-13k84w1kr1] {
    flex: 1 1 auto;
    min-width: 0;
}

/* ── Composer ─────────────────────────────────────────────────────────────── */

.ap-msg-composer[b-13k84w1kr1] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--ap-space-2);
    padding: var(--ap-space-3) var(--ap-space-4);
    background: var(--ap-bg-elevated);
    border-top: 1px solid var(--ap-border);
}

.ap-msg-composer__input[b-13k84w1kr1] {
    flex: 1 1 auto;
    min-width: 0;
}

.ap-msg-uploading[b-13k84w1kr1],
.ap-msg-chip[b-13k84w1kr1] {
    display: inline-flex;
    align-items: center;
    gap: var(--ap-space-1);
    flex: 0 0 auto;
}

.ap-msg-chip[b-13k84w1kr1] {
    background: var(--ap-bg-tinted);
    border-radius: var(--ap-radius-pill);
    padding: 2px var(--ap-space-2);
    font-size: var(--ap-text-xs);
    max-width: 40%;
}

.ap-msg-chip__name[b-13k84w1kr1] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── States (loading / empty / failed) ────────────────────────────────────── */

.ap-msg-state[b-13k84w1kr1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ap-space-3);
    padding: var(--ap-space-6) var(--ap-space-4);
    text-align: center;
}

.ap-msg-thread .ap-msg-state[b-13k84w1kr1] {
    margin: auto;
}

.ap-msg-state--pane[b-13k84w1kr1] {
    flex: 1 1 auto;
}

[b-13k84w1kr1] .ap-msg-state__icon {
    font-size: 2.5rem;
    color: var(--rz-text-disabled-color);
}

[b-13k84w1kr1] .ap-msg-state__text {
    margin: 0;
}

[b-13k84w1kr1] .ap-msg-alert {
    margin: 0;
    width: 100%;
}

[b-13k84w1kr1] .ap-msg-alert--bar {
    border-radius: 0;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .ap-msg-panes[b-13k84w1kr1] {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
    }

    .ap-msg-list[b-13k84w1kr1] {
        max-height: min(60dvh, 520px);
    }

    .ap-msg-thread-pane[b-13k84w1kr1] {
        min-height: min(70dvh, 640px);
    }

    /* One pane at a time. */
    .ap-msg-panes.has-selection .ap-msg-list[b-13k84w1kr1] {
        display: none;
    }

    .ap-msg-panes:not(.has-selection) .ap-msg-thread-pane[b-13k84w1kr1] {
        display: none;
    }

    [b-13k84w1kr1] .ap-msg-back {
        display: inline-flex;
    }
}

@media (max-width: 480px) {
    /* Send drops under the input rather than crushing it. */
    .ap-msg-composer[b-13k84w1kr1] {
        flex-wrap: wrap;
    }

    .ap-msg-composer__input[b-13k84w1kr1] {
        flex: 1 1 100%;
        order: -1;
    }

    .ap-msg-bubble[b-13k84w1kr1] {
        max-width: 92%;
    }
}
/* /Pages/Backend/Events/EventList.razor.rz.scp.css */
/* Toolbar above the events list: one free-text filter plus the list/cards switch. */

.el-toolbar[b-k3ytr9h723] {
    display: flex;
    align-items: center;
    gap: var(--ap-space-3);
    flex-wrap: wrap;
    margin-bottom: var(--ap-space-4);
}

/* Search grows to fill; the view switch keeps its intrinsic width. */
.el-search[b-k3ytr9h723] {
    position: relative;
    flex: 1 1 260px;
    min-width: 0;
    display: flex;
    align-items: center;
}

.el-search__icon[b-k3ytr9h723] {
    position: absolute;
    left: 12px;
    font-size: 20px;
    color: var(--ap-text-tertiary);
    pointer-events: none;
}

.el-search__input[b-k3ytr9h723] {
    width: 100%;
    height: var(--ap-tap-min);
    padding: 0 40px 0 40px;
    font-family: inherit;
    font-size: var(--ap-text-base);
    color: var(--ap-text);
    background: var(--ap-bg-elevated);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-pill);
    outline: none;
    transition: border-color var(--ap-duration) var(--ap-ease),
                box-shadow var(--ap-duration) var(--ap-ease);
}

.el-search__input[b-k3ytr9h723]::placeholder {
    color: var(--ap-text-tertiary);
}

.el-search__input:focus-visible[b-k3ytr9h723] {
    border-color: var(--ap-accent);
    box-shadow: var(--ap-shadow-focus);
}

/* Native clear affordance would sit alongside ours — hide it. */
.el-search__input[b-k3ytr9h723]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.el-search__clear[b-k3ytr9h723] {
    position: absolute;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--ap-text-secondary);
    cursor: pointer;
    transition: background var(--ap-duration-fast) var(--ap-ease);
}

.el-search__clear:hover[b-k3ytr9h723] {
    background: var(--ap-bg-tinted);
}

.el-search__clear:focus-visible[b-k3ytr9h723] {
    outline: none;
    box-shadow: var(--ap-shadow-focus);
}

.el-search__clear .material-icons[b-k3ytr9h723] {
    font-size: 18px;
}

.el-views[b-k3ytr9h723] {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: var(--ap-bg-sunken);
    border-radius: var(--ap-radius-pill);
}

.el-view[b-k3ytr9h723] {
    display: inline-flex;
    align-items: center;
    gap: var(--ap-space-2);
    height: 38px;
    padding: 0 var(--ap-space-4);
    border: none;
    border-radius: var(--ap-radius-pill);
    background: transparent;
    color: var(--ap-text-secondary);
    font-family: inherit;
    font-size: var(--ap-text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--ap-duration) var(--ap-ease),
                color var(--ap-duration) var(--ap-ease);
}

.el-view:hover[b-k3ytr9h723] {
    color: var(--ap-text);
}

.el-view:focus-visible[b-k3ytr9h723] {
    outline: none;
    box-shadow: var(--ap-shadow-focus);
}

/* Selected segment reads as raised against the sunken track. */
.el-view--on[b-k3ytr9h723] {
    background: var(--ap-bg-elevated);
    color: var(--ap-text);
    box-shadow: var(--ap-shadow-sm);
}

.el-view .material-icons[b-k3ytr9h723] {
    font-size: 19px;
}

/* Below the toolbar's natural wrap point the labels cost more than they explain. */
@media (max-width: 560px) {
    .el-view__text[b-k3ytr9h723] {
        display: none;
    }
    .el-view[b-k3ytr9h723] {
        padding: 0 var(--ap-space-3);
    }
}

@media (prefers-reduced-motion: reduce) {
    .el-search__input[b-k3ytr9h723],
    .el-search__clear[b-k3ytr9h723],
    .el-view[b-k3ytr9h723] {
        transition: none;
    }
}
/* /Pages/Backend/Organizations/OrganizationTree.razor.rz.scp.css */
/*
    The detail-pane action row.

    WHY IT CLIPPED. The row was a RadzenStack carrying `Style="flex-wrap: wrap;"` — which never took
    effect. RadzenStack appends its own `flex-wrap:<Wrap>` AFTER the caller's Style, so the element
    rendered `style="...flex-wrap: wrap;--rz-gap:0.5rem;flex-wrap:nowrap;"` and computed NOWRAP; the
    Wrap PARAMETER is the only way to set it. Held on one line, the six buttons then shrank —
    `.rz-button` is `flex: 0 1 auto` with `min-width: 28px` and `overflow: hidden` — and each caption
    was cut mid-word. Measured on the live page at a 325px pane: 62px hidden from "New
    sub-organization", 57 from "Members", 52 from "Regions", 46 from "Delete", 33 from "Edit". That
    is the screenshot: "REGIO", "EDI", "DELE", "MEMBE".

    A plain div avoids the trap entirely — no component gets to append a declaration after this one.
    `flex-wrap: wrap` is then real, and `flex: 0 0 auto` makes the clipping unreachable even if some
    future rule tries to squeeze the row again: a button that cannot shrink cannot hide its own text.
    `overflow-x: auto` is the last resort for a pane narrower than one button, where a scrollbar is
    the only honest answer left.

    Verified in the browser against the app's own Radzen stylesheet at a 325px pane: before, all six
    captions clipped; after, none — two lines with the English captions, three with the longer
    German ones.

    ::deep is required: RadzenButton renders its own element, which does not carry this component's
    scope attribute.
*/
.org-tree-actions[b-2rsixodzw4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    max-width: 100%;
    overflow-x: auto;
    /* A wrapped row that also scrolls needs a little room under it for the scrollbar it may grow. */
    padding-bottom: 2px;
}

.org-tree-actions[b-2rsixodzw4]  .rz-button {
    flex: 0 0 auto;
    max-width: 100%;
}

/* Belt and braces: even if a future Radzen release adds its own shrink rule, the label itself is
   told never to hide characters. */
.org-tree-actions[b-2rsixodzw4]  .rz-button-text {
    overflow: visible;
    text-overflow: clip;
}

/* A region and its layer on one line — used by the Properties panel's claim rows AND by the claim
   picker inside the region dialog, where the layer is what tells two identically-named rows apart.
   Inline-flex with wrap so a long name plus its layer wraps rather than widening the pane (or, in
   the picker, rather than being clipped by the button it sits in).

   The two users need DIFFERENT selectors, and assuming otherwise is what made this rule half-dead:

     * the claim picker's result (OrganizationTree.razor :507) is a real <span> written in this
       component's markup, so it carries the scope attribute and the bare class reaches it;
     * the Properties panel's claim row (:301) is a RadzenText — a CHILD COMPONENT. Blazor stamps the
       scope attribute on elements this component renders, not on ones a child renders, so
       `.org-tree-region-chip` compiles to `.org-tree-region-chip[b-…]` and matches nothing there.
       ::deep from the wrapper div (which IS ours) is what crosses that boundary.

   Symptom when it was missing: the claim row read "name· default layer" with NO gap, because the
   only spacing was markup whitespace — every one of these declarations was inert. That is the same
   silently-dead-style trap as the flex-wrap bug documented at the top of this file: the rule is
   valid, applies to nothing, and looks approximately right by accident. */
[data-testid='org-tree-selected-regions'][b-2rsixodzw4]  .org-tree-region-chip,
.org-tree-region-chip[b-2rsixodzw4] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    flex-wrap: wrap;
    word-break: break-word;
}
/* /Pages/Backend/Regions/OsmSyncDialog.razor.rz.scp.css */
/*
    Layout for the OSM sync dialog's row lists.

    Why a stylesheet at all, when RegionLayerDialog needs none: that dialog renders a RadzenDataGrid,
    which brings its own row layout. This one cannot. The preview is a GROUPED list — a level
    heading followed by its rows — and no RadzenDataGrid in this repo groups: `AllowGrouping`,
    `<Groups>` and `GroupHeaderTemplate` appear in zero .razor files here. The established shape for
    a grouped preview is the one TransportImport.razor uses (a `@foreach` over `GroupBy` with a
    heading and hand-rolled `el-row` rows), so this file is the scoped equivalent of those rules,
    plus the few things a row of OSM facts needs that a transport plan row does not.

    Everything is a plain <div>/<span> written by this component, so the scope attribute lands on it
    and no ::deep is needed — except for the Radzen checkbox, which is a CHILD COMPONENT and renders
    its own element, so a bare selector would compile to `.osm-sync-row .rz-chkbox[b-…]` and match
    nothing. Same trap OrganizationTree.razor.css documents for RadzenButton.
*/

.osm-sync-scroll[b-hqn0iwfyvs] {
    /* The preview can be 50 rows. Scroll the list, not the dialog: the sync button below it is the
       thing the operator has to be able to reach without hunting for it. */
    max-height: 340px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid var(--rz-border-color, rgba(0, 0, 0, 0.12));
    border-radius: var(--rz-border-radius, 4px);
    padding: 0.25rem 0.5rem;
}

.osm-sync-group + .osm-sync-group[b-hqn0iwfyvs] {
    margin-top: 0.5rem;
}

.osm-sync-group-head[b-hqn0iwfyvs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    position: sticky;
    top: 0;
    /* Sticky over a scrolling list needs its own ground, or the rows show through it. */
    background: var(--rz-base-background-color, #fff);
    z-index: 1;
}

.osm-sync-row[b-hqn0iwfyvs] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--rz-border-color, rgba(0, 0, 0, 0.08));
}

.osm-sync-row:last-child[b-hqn0iwfyvs] {
    border-bottom: none;
}

/* The name is the row's subject: it gets the space, and it is the only part allowed to grow. */
.osm-sync-name[b-hqn0iwfyvs] {
    flex: 1 1 12rem;
    min-width: 8rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.osm-sync-tag[b-hqn0iwfyvs],
.osm-sync-ref[b-hqn0iwfyvs],
.osm-sync-new[b-hqn0iwfyvs],
.osm-sync-muted[b-hqn0iwfyvs],
.osm-sync-warn[b-hqn0iwfyvs] {
    flex: 0 0 auto;
    font-size: 0.78rem;
    line-height: 1.4;
    white-space: nowrap;
}

.osm-sync-tag[b-hqn0iwfyvs] {
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    border: 1px solid var(--rz-border-color, rgba(0, 0, 0, 0.12));
    opacity: 0.85;
}

.osm-sync-ref[b-hqn0iwfyvs] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    opacity: 0.75;
}

.osm-sync-new[b-hqn0iwfyvs] {
    color: var(--rz-success, #16a34a);
    font-weight: 600;
}

.osm-sync-muted[b-hqn0iwfyvs] {
    opacity: 0.6;
}

/* A row the write would skip. Stated on the row rather than hidden, so the count on the sync
   button and the rows on screen never disagree about what is going to happen. */
.osm-sync-warn[b-hqn0iwfyvs] {
    color: var(--rz-warning-dark, #b45309);
    white-space: normal;
}

/* A rejection is a small block, not a line: it carries the explanation of why it is not syncable,
   and for a ref-less one that explanation is the entire content of the row. */
.osm-sync-rejected[b-hqn0iwfyvs] {
    border: 1px solid var(--rz-border-color, rgba(0, 0, 0, 0.12));
    border-radius: var(--rz-border-radius, 4px);
    padding: 0.4rem 0.6rem;
}

.osm-sync-rejected + .osm-sync-rejected[b-hqn0iwfyvs] {
    margin-top: 0.4rem;
}

.osm-sync-note[b-hqn0iwfyvs] {
    font-size: 0.78rem;
    line-height: 1.45;
    opacity: 0.75;
    margin-top: 0.2rem;
}

/* Radzen renders the checkbox itself, so this component's scope attribute is not on it. */
.osm-sync-row[b-hqn0iwfyvs]  .rz-chkbox,
.osm-sync-group-head[b-hqn0iwfyvs]  .rz-chkbox {
    flex: 0 0 auto;
}
/* /Pages/Backend/Regions/RegionTree.razor.rz.scp.css */
/*
    Copied from OrganizationTree.razor.css: RadzenStack Style="flex-wrap: wrap" is overwritten by
    the component's own flex-wrap declaration, so the action row must be a plain div.
*/
.region-tree-actions[b-d0ewi62uo4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
}

.region-tree-actions[b-d0ewi62uo4]  .rz-button {
    flex: 0 0 auto;
    max-width: 100%;
}

.region-tree-actions[b-d0ewi62uo4]  .rz-button-text {
    overflow: visible;
    text-overflow: clip;
}
/* /Pages/Backend/SiteWork/SiteWorkMap.razor.rz.scp.css */
.ap-sw-page[b-mzc4xcm9qk] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: calc(100vh - 8rem);
}

.ap-sw-toolbar[b-mzc4xcm9qk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.ap-sw-map-wrap[b-mzc4xcm9qk] {
    position: relative;
    flex: 1 1 auto;
    min-height: 360px;
    height: min(70vh, 720px);
    border: 1px solid var(--rz-grid-cell-border);
    border-radius: var(--rz-border-radius);
    overflow: hidden;
}

.ap-sw-map[b-mzc4xcm9qk] {
    width: 100%;
    height: 100%;
}

[b-mzc4xcm9qk] .ap-sw-pin,
[b-mzc4xcm9qk] .leaflet-marker-icon.ap-sw-pin {
    width: 44px !important;
    height: 44px !important;
    margin-left: -22px;
    margin-top: -22px;
}

[b-mzc4xcm9qk] .ap-sw-pin img {
    width: 44px;
    height: 44px;
}

.ap-sw-layout[b-mzc4xcm9qk] {
    display: grid;
    grid-template-columns: 1fr minmax(240px, 320px);
    gap: 0.75rem;
    flex: 1 1 auto;
}

@media (max-width: 900px) {
    .ap-sw-layout[b-mzc4xcm9qk] {
        grid-template-columns: 1fr;
    }
}

.ap-sw-drawer[b-mzc4xcm9qk] {
    min-height: 200px;
    max-height: min(70vh, 720px);
    overflow: auto;
}

.ap-sw-row[b-mzc4xcm9qk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 0.4rem;
    min-height: 44px;
    color: #fff;
}

.ap-sw-row:hover[b-mzc4xcm9qk] { filter: brightness(1.08); }

.ap-sw-proposed[b-mzc4xcm9qk] { background: #111111; }
.ap-sw-dispatched[b-mzc4xcm9qk] { background: #C62828; }
.ap-sw-inprogress[b-mzc4xcm9qk] { background: #F9A825; color: #111; }
.ap-sw-accepted[b-mzc4xcm9qk] { background: #2E7D32; }

.ap-sw-letter[b-mzc4xcm9qk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    font-weight: 700;
    flex-shrink: 0;
}

.ap-sw-sheet[b-mzc4xcm9qk] {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-height: 55%;
    overflow: auto;
    background: var(--ap-bg-elevated, #fff);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    padding: 1rem;
    z-index: 500;
}

.ap-sw-attestation[b-mzc4xcm9qk] {
    color: var(--ap-text-secondary);
    font-size: 0.9rem;
}

.ap-sw-fab[b-mzc4xcm9qk] {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 400;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ap-sw-filters[b-mzc4xcm9qk] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ap-sw-evidence[b-mzc4xcm9qk] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.ap-sw-evidence figure[b-mzc4xcm9qk] {
    margin: 0;
    flex: 1;
}

.ap-sw-evidence img[b-mzc4xcm9qk] {
    width: 100%;
    max-height: 160px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--rz-border-color);
}

.ap-sw-evidence figcaption[b-mzc4xcm9qk] {
    font-size: 0.75rem;
    color: var(--ap-text-secondary);
    margin-top: 2px;
}
/* /Pages/Backend/Submissions/AllSubmissions.razor.rz.scp.css */
/* Compact list/cards switch for the submissions header — icon-only, since it sits alongside the
   search box and the create action in a single header row. Mirrors the /events toolbar switch. */

.sub-views[b-iq8uqgkncz] {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: var(--ap-bg-sunken);
    border-radius: var(--ap-radius-pill);
}

.sub-view[b-iq8uqgkncz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: var(--ap-radius-pill);
    background: transparent;
    color: var(--ap-text-secondary);
    cursor: pointer;
    transition: background var(--ap-duration) var(--ap-ease),
                color var(--ap-duration) var(--ap-ease);
}

.sub-view:hover[b-iq8uqgkncz] {
    color: var(--ap-text);
}

.sub-view:focus-visible[b-iq8uqgkncz] {
    outline: none;
    box-shadow: var(--ap-shadow-focus);
}

/* Selected segment reads as raised against the sunken track. */
.sub-view--on[b-iq8uqgkncz] {
    background: var(--ap-bg-elevated);
    color: var(--ap-text);
    box-shadow: var(--ap-shadow-sm);
}

.sub-view .material-icons[b-iq8uqgkncz] {
    font-size: 18px;
}

@media (prefers-reduced-motion: reduce) {
    .sub-view[b-iq8uqgkncz] {
        transition: none;
    }
}
/* /Shared/ApAuthShell.razor.rz.scp.css */
.ap-auth-shell[b-a1sq99x87s] {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ap-space-6) var(--ap-space-4);
    background:
        radial-gradient(circle at 20% 10%, var(--ap-accent-soft) 0%, transparent 40%),
        radial-gradient(circle at 80% 90%, rgba(132, 113, 255, 0.10) 0%, transparent 45%),
        var(--ap-bg);
}

.ap-auth-card[b-a1sq99x87s] {
    width: 100%;
    max-width: 420px;
    background: var(--ap-bg-elevated);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-lg);
    padding: var(--ap-space-8) var(--ap-space-8);
    box-shadow: var(--ap-shadow);
}

.ap-auth-brand[b-a1sq99x87s] {
    display: flex;
    justify-content: center;
    margin-bottom: var(--ap-space-5);
}

[b-a1sq99x87s] .ap-auth-brand img {
    height: 56px;
    width: auto;
    object-fit: contain;
}

.ap-auth-title[b-a1sq99x87s] {
    font-family: var(--ap-font-display);
    font-size: var(--ap-text-2xl);
    font-weight: 700;
    line-height: var(--ap-leading-tight);
    letter-spacing: -0.022em;
    text-align: center;
    color: var(--ap-text);
    margin: 0 0 var(--ap-space-2);
}

.ap-auth-subtitle[b-a1sq99x87s] {
    text-align: center;
    color: var(--ap-text-secondary);
    font-size: var(--ap-text-sm);
    margin: 0 0 var(--ap-space-6);
}

.ap-auth-body[b-a1sq99x87s] {
    display: flex;
    flex-direction: column;
    gap: var(--ap-space-4);
}

.ap-auth-footer[b-a1sq99x87s] {
    margin-top: var(--ap-space-6);
    padding-top: var(--ap-space-4);
    border-top: 1px solid var(--ap-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ap-space-2);
    font-size: var(--ap-text-sm);
}

@media (max-width: 480px) {
    .ap-auth-card[b-a1sq99x87s] { padding: var(--ap-space-6) var(--ap-space-5); }
    .ap-auth-shell[b-a1sq99x87s] { min-height: calc(100vh - 56px); padding: var(--ap-space-4) var(--ap-space-3); }
}
/* /Shared/ApDefList.razor.rz.scp.css */
.ap-deflist[b-baya1ewgjd] {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

[b-baya1ewgjd] .ap-defrow {
    display: grid;
    grid-template-columns: minmax(140px, 200px) 1fr;
    gap: var(--ap-space-4);
    align-items: baseline;
    padding: var(--ap-space-3) 0;
    border-bottom: 1px solid var(--ap-border);
}

[b-baya1ewgjd] .ap-defrow:last-child {
    border-bottom: none;
}

[b-baya1ewgjd] .ap-defrow-label {
    color: var(--ap-text-secondary);
    font-size: var(--ap-text-sm);
    font-weight: 500;
    margin: 0;
}

[b-baya1ewgjd] .ap-defrow-value {
    color: var(--ap-text);
    font-size: var(--ap-text-base);
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

[b-baya1ewgjd] .ap-defrow-value-empty {
    color: var(--ap-text-tertiary);
    font-style: italic;
}

@media (max-width: 640px) {
    [b-baya1ewgjd] .ap-defrow {
        grid-template-columns: 1fr;
        gap: var(--ap-space-1);
    }
}
/* /Shared/ApDetailHero.razor.rz.scp.css */
.ap-detail-hero[b-3naugvn5sf] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: var(--ap-space-6);
    background: var(--ap-bg-elevated);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-lg);
    overflow: hidden;
    box-shadow: var(--ap-shadow-sm);
}

.ap-detail-hero-cover[b-3naugvn5sf] {
    position: relative;
    aspect-ratio: 16 / 5;
    background: linear-gradient(135deg, var(--ap-hero-tint, var(--ap-bg-sunken)), var(--ap-hero-tint-2, var(--ap-bg-tinted)));
    overflow: hidden;
}

.ap-detail-hero-cover img[b-3naugvn5sf] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ap-detail-hero-cover-fallback[b-3naugvn5sf] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ap-detail-hero-initial[b-3naugvn5sf] {
    font-family: var(--ap-font-display);
    font-size: 5rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    letter-spacing: -0.04em;
}

.ap-detail-hero-body[b-3naugvn5sf] {
    padding: var(--ap-space-6) var(--ap-space-8);
}

.ap-detail-hero-back[b-3naugvn5sf] {
    display: inline-flex;
    align-items: center;
    gap: var(--ap-space-1);
    color: var(--ap-text-secondary);
    font-size: var(--ap-text-sm);
    text-decoration: none;
    margin-bottom: var(--ap-space-3);
    transition: color var(--ap-duration-fast) var(--ap-ease);
}

.ap-detail-hero-back:hover[b-3naugvn5sf] {
    color: var(--ap-accent);
}

.ap-detail-hero-back .material-icons[b-3naugvn5sf] {
    font-size: 18px;
}

.ap-detail-hero-row[b-3naugvn5sf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ap-space-4);
    flex-wrap: wrap;
}

.ap-detail-hero-titles[b-3naugvn5sf] {
    flex: 1 1 320px;
    min-width: 0;
}

.ap-detail-hero-title[b-3naugvn5sf] {
    font-family: var(--ap-font-display);
    font-size: var(--ap-text-3xl);
    font-weight: 700;
    line-height: var(--ap-leading-tight);
    letter-spacing: -0.022em;
    margin: 0;
    color: var(--ap-text);
}

.ap-detail-hero-subtitle[b-3naugvn5sf] {
    margin: var(--ap-space-2) 0 0;
    color: var(--ap-text-secondary);
    font-size: var(--ap-text-base);
    line-height: 1.4;
}

.ap-detail-hero-pills[b-3naugvn5sf] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--ap-space-2);
    margin-top: var(--ap-space-3);
}

.ap-detail-hero-actions[b-3naugvn5sf] {
    display: flex;
    align-items: center;
    gap: var(--ap-space-2);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .ap-detail-hero-body[b-3naugvn5sf] { padding: var(--ap-space-4) var(--ap-space-4); }
    .ap-detail-hero-title[b-3naugvn5sf] { font-size: var(--ap-text-2xl); }
    .ap-detail-hero-cover[b-3naugvn5sf] { aspect-ratio: 16 / 6; }
    .ap-detail-hero-actions[b-3naugvn5sf] { width: 100%; }
}
/* /Shared/ApIdChip.razor.rz.scp.css */
.ap-id-chip[b-sc1r51a316] {
    display: inline-flex;
    align-items: center;
    gap: var(--ap-space-2);
    padding: 4px 6px 4px 10px;
    border-radius: var(--ap-radius-pill);
    background: var(--ap-bg-tinted);
    color: var(--ap-text-secondary);
    font-size: var(--ap-text-sm);
    line-height: 1;
    max-width: 100%;
}

.ap-id-chip-label[b-sc1r51a316] {
    color: var(--ap-text-tertiary);
    font-weight: 500;
    margin-right: 2px;
}

.ap-id-chip-value[b-sc1r51a316] {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.78rem;
    color: var(--ap-text);
    background: transparent;
    padding: 0;
    letter-spacing: 0.02em;
}

.ap-id-chip-action[b-sc1r51a316] {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--ap-text-tertiary);
    cursor: pointer;
    transition: background var(--ap-duration-fast) var(--ap-ease),
                color var(--ap-duration-fast) var(--ap-ease);
}

.ap-id-chip-action:hover[b-sc1r51a316] {
    background: var(--ap-border-strong);
    color: var(--ap-text);
}

.ap-id-chip-action .material-icons[b-sc1r51a316] {
    font-size: 16px;
}
/* /Shared/ApMediaTile.razor.rz.scp.css */
/* Image-backed tile with a frosted caption bar. Tokens from appleish.css; the caption is a dark
   translucent panel with white text in both themes, so it reads over any artwork or photo. */

.apt[b-yovi4z4pfy] {
    position: relative;
    display: block;
    height: 220px;
    border-radius: var(--ap-radius);
    overflow: hidden;
    cursor: pointer;
    background: var(--ap-bg-sunken);
    box-shadow: var(--ap-shadow-sm);
    transition: box-shadow var(--ap-duration) var(--ap-ease),
                transform var(--ap-duration) var(--ap-ease);
    outline: none;
}

.apt--compact[b-yovi4z4pfy] {
    height: 172px;
}

.apt:hover[b-yovi4z4pfy] {
    box-shadow: var(--ap-shadow-lg);
    transform: translateY(-2px);
}

.apt:focus-visible[b-yovi4z4pfy] {
    box-shadow: var(--ap-shadow-focus), var(--ap-shadow-lg);
    transform: translateY(-2px);
}

.apt__img[b-yovi4z4pfy] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--ap-duration-slow) var(--ap-ease);
}

.apt:hover .apt__img[b-yovi4z4pfy] {
    transform: scale(1.04);
}

/* No artwork: stable hue-derived gradient with a faint glyph. */
.apt--fallback[b-yovi4z4pfy] {
    background: linear-gradient(135deg,
        hsl(var(--apt-hue, 210), 58%, 56%),
        hsl(calc(var(--apt-hue, 210) + 40), 52%, 42%));
}

.apt__glyph[b-yovi4z4pfy] {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3.25rem;
    color: rgba(255, 255, 255, 0.30);
    pointer-events: none;
}

/* Frosted caption: backdrop-filter blurs and greys the slice of image behind the text, while the
   gradient alone still guarantees contrast where backdrop-filter is unsupported. */
.apt__caption[b-yovi4z4pfy] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--ap-space-3) var(--ap-space-4) var(--ap-space-4);
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.62),
        rgba(0, 0, 0, 0.32) 68%,
        rgba(0, 0, 0, 0.10));
    -webkit-backdrop-filter: blur(16px) saturate(112%) brightness(0.9);
    backdrop-filter: blur(16px) saturate(112%) brightness(0.9);
    color: #fff;
}

.apt__title[b-yovi4z4pfy] {
    margin: 0;
    font-family: var(--ap-font-display);
    font-size: var(--ap-text-lg);
    font-weight: 600;
    line-height: var(--ap-leading-tight);
    letter-spacing: -0.01em;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Titles are sometimes a single unbroken token (upload filenames), which would otherwise run
       past the tile edge instead of wrapping into the second line. */
    overflow-wrap: anywhere;
}

.apt__meta[b-yovi4z4pfy] {
    display: flex;
    align-items: center;
    gap: var(--ap-space-2);
    margin-top: var(--ap-space-1);
    font-size: var(--ap-text-sm);
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Meta content is supplied by the caller, so it carries the caller's scope — reach it with ::deep. */
.apt__meta[b-yovi4z4pfy]  .material-icons {
    font-size: 1rem;
    line-height: 1;
}

.apt__meta[b-yovi4z4pfy]  .apt-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.apt__meta[b-yovi4z4pfy]  .apt-meta-sep {
    opacity: 0.7;
}

/* Quick actions carry a sentence rather than chips — let it wrap to two lines. */
.apt--compact .apt__meta[b-yovi4z4pfy] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .apt[b-yovi4z4pfy],
    .apt__img[b-yovi4z4pfy] {
        transition: none;
    }
    .apt:hover[b-yovi4z4pfy],
    .apt:focus-visible[b-yovi4z4pfy] {
        transform: none;
    }
    .apt:hover .apt__img[b-yovi4z4pfy] {
        transform: none;
    }
}
/* /Shared/ApPageHeader.razor.rz.scp.css */
.ap-page-header[b-76k2nsku5v] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ap-space-4);
    flex-wrap: wrap;
    padding: var(--ap-space-2) 0 var(--ap-space-5);
    margin-bottom: var(--ap-space-4);
    border-bottom: 1px solid var(--ap-border);
}

.ap-page-header-titles[b-76k2nsku5v] {
    flex: 1 1 320px;
    min-width: 0;
}

.ap-page-header-back[b-76k2nsku5v] {
    display: inline-flex;
    align-items: center;
    gap: var(--ap-space-1);
    color: var(--ap-text-secondary);
    font-size: var(--ap-text-sm);
    text-decoration: none;
    margin-bottom: var(--ap-space-2);
    transition: color var(--ap-duration-fast) var(--ap-ease);
}

.ap-page-header-back:hover[b-76k2nsku5v] {
    color: var(--ap-accent);
}

.ap-page-header-back .material-icons[b-76k2nsku5v] {
    font-size: 18px;
}

.ap-page-header-row[b-76k2nsku5v] {
    display: flex;
    align-items: baseline;
    gap: var(--ap-space-3);
    flex-wrap: wrap;
}

.ap-page-header-title[b-76k2nsku5v] {
    font-family: var(--ap-font-display);
    font-size: var(--ap-text-2xl);
    font-weight: 700;
    line-height: var(--ap-leading-tight);
    letter-spacing: -0.022em;
    color: var(--ap-text);
    margin: 0;
}

.ap-page-header-subtitle[b-76k2nsku5v] {
    color: var(--ap-text-secondary);
    font-size: var(--ap-text-sm);
    margin: var(--ap-space-1) 0 0;
}

.ap-page-header-pills[b-76k2nsku5v] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--ap-space-2);
}

.ap-page-header-actions[b-76k2nsku5v] {
    display: flex;
    align-items: center;
    gap: var(--ap-space-2);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .ap-page-header[b-76k2nsku5v] { padding: var(--ap-space-1) 0 var(--ap-space-3); }
    .ap-page-header-title[b-76k2nsku5v] { font-size: var(--ap-text-xl); }
    .ap-page-header-actions[b-76k2nsku5v] { width: 100%; }
}
/* /Shared/ApSection.razor.rz.scp.css */
.ap-detail-section[b-te3ckdstc9] {
    background: var(--ap-bg-elevated);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius);
    box-shadow: var(--ap-shadow-sm);
    margin-bottom: var(--ap-space-4);
    overflow: hidden;
}

.ap-detail-section-header[b-te3ckdstc9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ap-space-3);
    padding: var(--ap-space-4) var(--ap-space-6);
    border-bottom: 1px solid var(--ap-border);
    background: transparent;
    text-align: left;
    width: 100%;
    font: inherit;
    color: inherit;
    border-left: none;
    border-right: none;
    border-top: none;
}

.ap-detail-section-header.is-toggle[b-te3ckdstc9] {
    cursor: pointer;
    transition: background var(--ap-duration-fast) var(--ap-ease);
}

.ap-detail-section-header.is-toggle:hover[b-te3ckdstc9] {
    background: var(--ap-bg-tinted);
}

.ap-detail-section.is-collapsed .ap-detail-section-header[b-te3ckdstc9] {
    border-bottom: none;
}

.ap-detail-section-titles[b-te3ckdstc9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ap-detail-section-title[b-te3ckdstc9] {
    font-family: var(--ap-font-display);
    font-size: var(--ap-text-lg);
    font-weight: 600;
    color: var(--ap-text);
    letter-spacing: -0.012em;
    line-height: 1.2;
}

.ap-detail-section-subtitle[b-te3ckdstc9] {
    color: var(--ap-text-secondary);
    font-size: var(--ap-text-sm);
}

.ap-detail-section-chevron[b-te3ckdstc9] {
    color: var(--ap-text-tertiary);
    font-size: 22px;
    transition: transform var(--ap-duration) var(--ap-ease);
}

.ap-detail-section-actions[b-te3ckdstc9] {
    display: inline-flex;
    align-items: center;
    gap: var(--ap-space-2);
}

.ap-detail-section-body[b-te3ckdstc9] {
    padding: var(--ap-space-5) var(--ap-space-6);
}

@media (max-width: 640px) {
    .ap-detail-section-header[b-te3ckdstc9] { padding: var(--ap-space-3) var(--ap-space-4); }
    .ap-detail-section-body[b-te3ckdstc9] { padding: var(--ap-space-4) var(--ap-space-4); }
}
/* /Shared/LanguageFlagPicker.razor.rz.scp.css */
/*
    WHY EVERY RULE HERE GOES THROUGH ::deep

    The previous version of this file styled `.ap-lang-dropdown` directly, reasoning that since
    Radzen puts that class on the `.rz-dropdown` ROOT element, the chrome could be cleared on that
    element. The first half is true; the conclusion does not follow, and the whole stylesheet was
    inert.

    Blazor stamps this component's scope attribute only on elements THIS component renders. Every
    element from `<RadzenDropDown>` down is rendered by RadzenDropDown, so none of them carries it.
    The rules compiled to `.ap-lang-dropdown[b-5x0jmgtkd5]` and the root element has no `b-*`
    attribute at all — verified in the browser, where the root still computed
    `border: 0.8px solid rgb(198,203,210)`, `border-radius: 4px` and `height: 44px` against a
    stylesheet asking for no border, 8px and 32px. That grey 1px border is the "small frame" that was
    drawn around the flag.

    So the class name is not the handle; the wrapper `div.ap-lang` in the razor file is, because that
    element IS ours and ::deep can descend from it into the child component's markup.

    GEOMETRY: matched to the neighbouring icon buttons rather than invented. The theme toggle is a
    RadzenButton (Variant.Text, ButtonStyle.Primary) computing to 40x40, border-radius 32px,
    transparent, no border, hovering to var(--ap-accent-hover) via `.rz-button.rz-primary:hover`.
    The flag now uses the same box and the same hover fill, so the three controls in that toolbar
    behave identically.
*/

.ap-lang[b-5x0jmgtkd5] {
    display: inline-flex;
    align-items: center;
}

/* The collapsed trigger: a borderless round icon-button, exactly like its neighbours. */
.ap-lang[b-5x0jmgtkd5]  .rz-dropdown {
    width: 40px;
    min-width: 40px;
    height: 40px;
    /* Overrides the app-wide `.rz-dropdown { min-height: var(--ap-tap-min) }` (44px). That rule
       exists to keep text inputs at a comfortable tap target, and it is right for inputs - but this
       control is not one. It is an icon button that happens to be built on RadzenDropDown, and
       leaving it at 44 made it 4px taller than the theme and About buttons it sits between, which is
       the misalignment this file is fixing. If the 44px floor should win instead, the fix is to move
       the neighbouring icon buttons up to 44 rather than to leave these three disagreeing. */
    min-height: 40px;
    padding: 0;
    border: none;
    /* 32px, not 50%: copied from the theme button so the two cannot drift apart. */
    border-radius: 32px;
    background: transparent;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

/* The blue circle the other toolbar items show.

   Two things this has to beat, both measured rather than assumed:

   1. Radzen's input-hover rules (`.rz-autocomplete:hover`, `.rz-dropdown:hover`, ...) set
      `border: var(--rz-input-hover-border)` and `box-shadow: var(--rz-input-hover-shadow)`. They are
      what drew a thin ring around the flag on hover once the permanent frame was gone. The class is
      repeated below purely to raise specificity above them - this control is a text input as far as
      the Radzen theme is concerned, and it is not one.

   2. The neighbouring buttons resolve `.rz-button.rz-primary:hover { background: var(--ap-accent-hover) }`
      to a soft TINT, not the solid #0077ed the variable holds, because Variant.Text renders the fill
      through its own translucent layer. A RadzenDropDown gets none of that treatment, so copying the
      declaration verbatim would paint a solid blue disc that matches nothing. The tint is mixed here
      instead, off the same variable, so a theme change still moves all three together. */
.ap-lang[b-5x0jmgtkd5]  .rz-dropdown.rz-dropdown:hover {
    background: color-mix(in srgb, var(--ap-accent-hover) 12%, transparent);
    border: none;
    box-shadow: none;
}

/* Keyboard focus must still be visible — the frame this file removes was a permanent border, not a
   focus ring, and dropping the ring with it would leave keyboard users with no indication at all. */
.ap-lang[b-5x0jmgtkd5]  .rz-dropdown:focus-visible {
    outline: 2px solid var(--rz-primary, #2563eb);
    outline-offset: 2px;
}

/* Mouse focus and Radzen's own focused/open state get no border: clicking the flag should look
   like clicking the theme button, which draws nothing. */
.ap-lang[b-5x0jmgtkd5]  .rz-dropdown:focus:not(:focus-visible),
.ap-lang[b-5x0jmgtkd5]  .rz-dropdown.rz-state-focused {
    border: none;
    box-shadow: none;
    outline: none;
}

.ap-lang[b-5x0jmgtkd5]  .rz-dropdown-label {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hide Radzen's chevron — the flag is the entire affordance. */
.ap-lang[b-5x0jmgtkd5]  .rz-dropdown-trigger {
    display: none;
}

.ap-lang[b-5x0jmgtkd5]  .ap-lang-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 20px;
    overflow: hidden;
    border-radius: 3px;
}

.ap-lang[b-5x0jmgtkd5]  .ap-lang-trigger svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Popup row: flag left, native-language name right. The popup is rendered into a portal outside
   this component's subtree, so these need ::deep too. */
.ap-lang[b-5x0jmgtkd5]  .ap-lang-row,
[b-5x0jmgtkd5] .ap-lang-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 2px 0;
}

.ap-lang[b-5x0jmgtkd5]  .ap-lang-row-flag,
[b-5x0jmgtkd5] .ap-lang-row-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 20px;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 2px;
    /* Kept here and NOT on the trigger: in the list a flag needs an edge to read as a swatch; on
       the toolbar that same edge was half of what made the trigger look framed. */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) inset;
}

.ap-lang[b-5x0jmgtkd5]  .ap-lang-row-flag svg,
[b-5x0jmgtkd5] .ap-lang-row-flag svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ap-lang[b-5x0jmgtkd5]  .ap-lang-row-name,
[b-5x0jmgtkd5] .ap-lang-row-name {
    font-size: 0.875rem;
    color: var(--rz-text-color, #1a1a1a);
    line-height: 1.2;
}

.ap-lang[b-5x0jmgtkd5]  .ap-lang-fallback,
[b-5x0jmgtkd5] .ap-lang-fallback {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--rz-text-color, #1a1a1a);
}
/* /Shared/MainTopNav.razor.rz.scp.css */
.top-nav-bar[b-3o3b1s19bj] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1.5rem;
    background-color: var(--rz-base-darker, #1a1a2e);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    height: 56px;
    position: relative;
    z-index: 100;
}

.top-nav-logo[b-3o3b1s19bj] {
    color: var(--rz-on-base-darker, #e0e0e0);
    text-decoration: none;
    font-size: 0.875rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.top-nav-logo:hover[b-3o3b1s19bj] {
    color: white;
}

.top-nav-search[b-3o3b1s19bj] {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 600px;
    margin: 0 auto;
    display: none;
}

/* Show search bar on medium+ screens */
@media (min-width: 768px) {
    .top-nav-search[b-3o3b1s19bj] {
        display: block;
    }
}

.top-nav-actions[b-3o3b1s19bj] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.top-nav-link[b-3o3b1s19bj] {
    color: var(--rz-on-base-darker, #e0e0e0);
    text-decoration: none;
    font-size: 0.875rem;
    white-space: nowrap;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.top-nav-link:hover[b-3o3b1s19bj] {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}
/* /Shared/MapSearchBar.razor.rz.scp.css */
.map-search-bar[b-v4makey5te] {
    position: relative;
    display: flex;
    align-items: center;
    background: white;
    border-radius: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    padding: 0 12px;
    height: 40px;
    width: 100%;
    transition: box-shadow 0.2s ease;
}

.map-search-bar:focus-within[b-v4makey5te] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.search-icon[b-v4makey5te] {
    color: #9aa0a6;
    font-size: 1rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-right: 8px;
}

.search-input[b-v4makey5te] {
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.875rem;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    color: #202124;
}

.search-input[b-v4makey5te]::placeholder {
    color: #9aa0a6;
}

.search-clear[b-v4makey5te] {
    background: none;
    border: none;
    cursor: pointer;
    color: #70757a;
    font-size: 0.875rem;
    padding: 4px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    border-radius: 50%;
}

.search-clear:hover[b-v4makey5te] {
    color: #202124;
    background: rgba(0, 0, 0, 0.04);
}

/* ── Dropdown ── */

.search-dropdown[b-v4makey5te] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    overflow: hidden;
    max-height: 400px;
    overflow-y: auto;
}

.search-suggestion[b-v4makey5te] {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    cursor: pointer;
    gap: 12px;
    transition: background 0.1s;
}

.search-suggestion:hover[b-v4makey5te],
.search-suggestion.highlighted[b-v4makey5te] {
    background: #f1f3f4;
}

.suggestion-icon[b-v4makey5te] {
    color: #70757a;
    font-size: 1rem;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.suggestion-text[b-v4makey5te] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.suggestion-primary[b-v4makey5te] {
    font-size: 0.875rem;
    color: #202124;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggestion-secondary[b-v4makey5te] {
    font-size: 0.75rem;
    color: #70757a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggestion-type[b-v4makey5te] {
    font-size: 0.65rem;
    color: #9aa0a6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.search-loading[b-v4makey5te] {
    padding: 12px 16px;
    font-size: 0.85rem;
    color: #70757a;
    text-align: center;
}
/* /Shared/Messaging/NewConversationDialog.razor.rz.scp.css */
/* Recipient picker rows — same row language as the /messages conversation rail.
   Colour resolves through the appleish token layer only, so light and dark both
   follow the theme with no rule of their own.

   Scoping note: only the elements written literally in NewConversationDialog.razor
   carry the scope attribute (the .ap-msg-pick-* div/span/input). A Radzen component
   root does not, which is why the icon rule is reached through ::deep from a scoped
   ancestor rather than as a bare class selector. */

.ap-msg-pick-search[b-3k0on6kasn] {
    width: 100%;
}

.ap-msg-pick-scroll[b-3k0on6kasn] {
    max-height: 220px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ap-msg-pick-row[b-3k0on6kasn] {
    display: flex;
    align-items: center;
    gap: var(--ap-space-2);
    min-height: var(--ap-tap-min);
    padding: var(--ap-space-2) var(--ap-space-3);
    border-bottom: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-sm);
    cursor: pointer;
    transition: background var(--ap-duration-fast) var(--ap-ease);
}

.ap-msg-pick-row:hover[b-3k0on6kasn] {
    background: var(--ap-bg-tinted);
}

.ap-msg-pick-row:focus-visible[b-3k0on6kasn] {
    outline: none;
    box-shadow: var(--ap-shadow-focus);
}

.ap-msg-pick-row[b-3k0on6kasn]  .ap-msg-pick-row__icon {
    color: var(--ap-text-secondary);
    font-size: var(--ap-text-lg);
    flex: 0 0 auto;
}

.ap-msg-pick-row__label[b-3k0on6kasn] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}