/* ════════════════════════════════════════════════════════════
 * ui-menus.css — Biosis RCL component stilleri
 * Bölümler: UiUserMenu, UiNotificationDropdown, UiOrgSwitcher, UiLocationSwitcher
 * (ui-components.css monolitinden bölündü — 2026-06-02)
 * ════════════════════════════════════════════════════════════ */

/*
 * UiUserMenu — avatar trigger + drop-down. Same dropdown geometry as
 * UiOrgSwitcher / UiNotificationDropdown so all three drop-downs feel
 * like one family.
 */

.ui-user-menu {
    position: relative;
    display: inline-flex;
}

/* ── Trigger avatar ───────────────────────────────────────────────── */
/*
 * 34x34 round pill matching the notification + theme + locale
 * trigger family. Gradient toned down (lower saturation,
 * accent → accent-soft) so the avatar reads as identity, not as a
 * shouty CTA. Accent-tinted hover border is the shared family signal.
 */
.ui-user-menu__trigger {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background:
        linear-gradient(135deg,
            color-mix(in oklab, var(--va-accent) 78%, transparent),
            color-mix(in oklab, var(--va-info)   62%, transparent));
    color: var(--va-bg);
    border: 2px solid transparent;
    cursor: pointer;
    font-family: var(--va-font-heading);
    font-weight: 700;
    font-size: 0.8125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: border-color 150ms ease, transform 120ms ease, box-shadow 150ms ease;
    box-shadow: 0 1px 3px -1px color-mix(in oklab, var(--va-accent) 22%, transparent);
}
.ui-user-menu__trigger:hover {
    border-color: var(--va-accent);
    transform: scale(1.04);
}
.ui-user-menu.is-open .ui-user-menu__trigger {
    border-color: var(--va-accent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--va-accent) 22%, transparent);
}
.ui-user-menu__trigger:focus-visible {
    outline: 2px solid var(--va-accent);
    outline-offset: 2px;
}

.ui-user-menu__trigger-text {
    display: inline-block;
    line-height: 1;
}

/*
 * Unread-notifications dot — informational, not alarming. Replaced an
 * earlier pulsing red treatment that read as "alert!" for what is
 * actually just an unread count. Uses the accent tint to match the
 * shared dropdown family + a static bg-coloured ring.
 */
.ui-user-menu__trigger-dot {
    position: absolute;
    top: -1px;
    inset-inline-end: -1px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background-color: var(--va-accent);
    box-shadow: 0 0 0 2px var(--va-bg);
}

/* ── Backdrop + dropdown shell ────────────────────────────────────── */
.ui-user-menu__backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

.ui-user-menu__dropdown {
    position: absolute;
    z-index: 50;
    inset-block-start: calc(100% + 8px);
    inset-inline-end: 0;
    width: 19rem;
    background-color: var(--va-card);
    border: 1px solid var(--va-border-light);
    border-radius: 14px;
    box-shadow: var(--va-shadow-lg);
    overflow: hidden;
    animation: ui-user-menu-in 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes ui-user-menu-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
@media (prefers-reduced-motion: reduce) {
    .ui-user-menu__dropdown { animation: none; }
}

/* ── Header card ─────────────────────────────────────────────────── */
.ui-user-menu__card {
    padding: 14px;
    background:
        radial-gradient(ellipse 200px 120px at 100% 0%,
            color-mix(in oklab, var(--va-accent) 14%, transparent), transparent 60%),
        radial-gradient(ellipse 200px 140px at 0% 100%,
            color-mix(in oklab, var(--va-info) 10%, transparent), transparent 60%);
    border-block-end: 1px solid var(--va-border);
}

.ui-user-menu__card-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ui-user-menu__avatar {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--va-accent), var(--va-info));
    color: var(--va-on-accent);
    font-family: var(--va-font-heading);
    font-weight: 700;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px -3px color-mix(in oklab, var(--va-accent) 38%, transparent);
}

.ui-user-menu__id { min-width: 0; flex: 1 1 auto; }

.ui-user-menu__name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.ui-user-menu__name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--va-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
    min-width: 0;
}

/* Role chip — accent-tinted pill. Uppercased + tracked for a status
   feel that doesn't compete with the name. */
.ui-user-menu__role {
    flex-shrink: 0;
    font-family: var(--va-font-heading);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    background-color: color-mix(in oklab, var(--va-accent) 22%, transparent);
    color: var(--va-accent);
    border: 1px solid color-mix(in oklab, var(--va-accent) 30%, transparent);
    line-height: 1.4;
}

.ui-user-menu__email {
    font-size: 0.75rem;
    color: var(--va-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.ui-user-menu__cta {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 7px 11px;
    border-radius: 8px;
    background-color: color-mix(in oklab, var(--va-card) 80%, transparent);
    border: 1px solid var(--va-border-light);
    color: var(--va-text);
    font-family: inherit;
    font-size: 0.78125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.ui-user-menu__cta:hover {
    background-color: var(--va-elevated);
    border-color: var(--va-accent);
    text-decoration: none;
}
.ui-user-menu__cta svg {
    width: 13px;
    height: 13px;
    color: var(--va-accent);
    flex-shrink: 0;
}

/* ── Sections ────────────────────────────────────────────────────── */
.ui-user-menu__section-label {
    font-family: var(--va-font-heading);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--va-text-muted);
    padding: 12px 16px 4px;
}

.ui-user-menu__group {
    padding: 0 6px 6px;
}

.ui-user-menu__divider {
    height: 1px;
    background-color: var(--va-border);
    margin: 4px 12px;
}

.ui-user-menu__item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: transparent;
    border: 0;
    color: var(--va-text);
    font-family: inherit;
    font-size: 0.84375rem;
    font-weight: 500;
    text-align: start;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 120ms ease, color 120ms ease;
}

.ui-user-menu__item:hover {
    background-color: var(--va-elevated);
    text-decoration: none;
}
.ui-user-menu__item:focus-visible {
    outline: 2px solid var(--va-accent);
    outline-offset: -1px;
}

.ui-user-menu__item-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background-color: var(--va-elevated);
    color: var(--va-text-dim);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 120ms ease, color 120ms ease;
}
.ui-user-menu__item-icon svg {
    width: 14px;
    height: 14px;
}

.ui-user-menu__item:hover .ui-user-menu__item-icon {
    background-color: color-mix(in oklab, var(--va-accent) 18%, transparent);
    color: var(--va-accent);
}

.ui-user-menu__item-text {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-user-menu__item-badge {
    flex-shrink: 0;
    font-family: var(--va-font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 999px;
    background-color: color-mix(in oklab, var(--va-danger) 22%, transparent);
    color: var(--va-danger);
    line-height: 1.4;
}

.ui-user-menu__item--danger {
    color: var(--va-danger);
}
.ui-user-menu__item--danger .ui-user-menu__item-icon {
    background-color: color-mix(in oklab, var(--va-danger) 14%, transparent);
    color: var(--va-danger);
}
.ui-user-menu__item--danger:hover {
    background-color: color-mix(in oklab, var(--va-danger) 12%, transparent);
}
.ui-user-menu__item--danger:hover .ui-user-menu__item-icon {
    background-color: color-mix(in oklab, var(--va-danger) 22%, transparent);
    color: var(--va-danger);
}

/*
 * Mobile — pin the dropdown to the viewport edges instead of letting
 * its 19rem width sit awkwardly close to the right edge on small
 * devices. Same family treatment as UiNotificationDropdown.
 */
@media (max-width: 480px) {
    .ui-user-menu__dropdown {
        position: fixed;
        inset-inline-start: 8px;
        inset-inline-end: 8px;
        inset-block-start: calc(var(--va-header-height, 56px) + 4px);
        width: auto;
        max-height: calc(100vh - var(--va-header-height, 56px) - 16px);
        overflow-y: auto;
    }
}

/* === Ui/Notifications/UiNotificationDropdown.razor.css === */
/*
 * UiNotificationDropdown — bell trigger + drop-down. Same dropdown
 * geometry as UiUserMenu / UiThemeToggle / UiLocalePicker.
 */

.ui-noti { position: relative; display: inline-flex; }

/*
 * Trigger — 34x34 round pill with a subtle bg, matching the user-menu
 * avatar geometry so the topbar's right-side controls feel like one
 * family. Accent border on hover/open + subtle ring on open. Replaces
 * an earlier square/transparent treatment that read as "loose icon"
 * next to the round avatar.
 */
.ui-noti__trigger {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background-color: var(--va-elevated);
    border: 2px solid transparent;
    color: var(--va-text-dim);
    cursor: pointer;
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color 150ms ease, color 150ms ease,
                border-color 150ms ease, transform 120ms ease,
                box-shadow 150ms ease;
}
.ui-noti__trigger:hover {
    color: var(--va-text);
    border-color: var(--va-accent);
    transform: scale(1.04);
}
.ui-noti.is-open .ui-noti__trigger {
    color: var(--va-text);
    border-color: var(--va-accent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--va-accent) 22%, transparent);
}
.ui-noti__trigger:focus-visible {
    outline: 2px solid var(--va-accent);
    outline-offset: 2px;
}
.ui-noti__trigger svg { width: 1rem; height: 1rem; }

/* Unread badge — top-end corner of the bell, with a bg-coloured ring
   so it reads as a separate disc against the trigger pill. */
.ui-noti__badge {
    position: absolute;
    top: -2px;
    inset-inline-end: -2px;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background-color: var(--va-accent);
    color: var(--va-on-accent);
    font-family: var(--va-font-heading);
    font-size: 0.625rem;
    font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px var(--va-bg);
    line-height: 1;
}

.ui-noti__backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

.ui-noti__dropdown {
    position: absolute;
    z-index: 50;
    inset-block-start: calc(100% + 0.5rem);
    inset-inline-end: 0;
    width: 22rem;
    background-color: var(--va-card);
    border: 1px solid var(--va-border-light);
    border-radius: 0.875rem;
    box-shadow: var(--va-shadow-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: min(28rem, calc(100vh - var(--va-header-height, 56px) - 2rem));
    animation: ui-noti-in 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes ui-noti-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
@media (prefers-reduced-motion: reduce) {
    .ui-noti__dropdown { animation: none; }
}

/* ── Header ──────────────────────────────────────────────────────── */
.ui-noti__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.875rem;
    border-block-end: 1px solid var(--va-border);
    flex-shrink: 0;
}
.ui-noti__title {
    font-family: var(--va-font-heading);
    font-size: 0.84375rem;
    font-weight: 600;
    color: var(--va-text);
    margin: 0;
}
.ui-noti__mark-all {
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--va-accent);
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 5px;
    transition: background-color 120ms ease;
}
.ui-noti__mark-all:hover { background-color: var(--va-elevated); }

/* ── List ────────────────────────────────────────────────────────── */
.ui-noti__list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.25rem 0;
}

.ui-noti__empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--va-text-muted);
    font-size: 0.8125rem;
}

.ui-noti__item {
    position: relative;
    display: flex;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    cursor: pointer;
    transition: background-color 120ms ease;
}
.ui-noti__item:hover { background-color: var(--va-elevated); }

/* Subtle accent dot on unread items along the inline-start edge. */
.ui-noti__item--unread::before {
    content: "";
    position: absolute;
    inset-inline-start: 0.4375rem;
    top: 1rem;
    width: 6px; height: 6px;
    border-radius: 999px;
    background-color: var(--va-accent);
}

.ui-noti__item-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.4375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-inline-start: 0.5rem;
  padding: 5px;
}
.ui-noti__item-icon svg { width: 0.9375rem; height: 0.9375rem; }
.ui-noti__item-icon--info    { background-color: color-mix(in oklab, var(--va-info)    20%, transparent); color: var(--va-info); }
.ui-noti__item-icon--success { background-color: color-mix(in oklab, var(--va-success) 20%, transparent); color: var(--va-success); }
.ui-noti__item-icon--warning { background-color: color-mix(in oklab, var(--va-warning) 20%, transparent); color: var(--va-warning); }
.ui-noti__item-icon--danger  { background-color: color-mix(in oklab, var(--va-danger)  20%, transparent); color: var(--va-danger); }

.ui-noti__item-text {
    flex: 1 1 auto;
    min-width: 0;
}
.ui-noti__item-line {
    font-size: 0.78125rem;
    color: var(--va-text);
    line-height: 1.3;
}
.ui-noti__item-line strong { font-weight: 600; }
.ui-noti__item-body {
    font-size: 0.71875rem;
    color: var(--va-text-dim);
    line-height: 1.4;
    margin-block-start: 0.125rem;
}
.ui-noti__item-time {
    font-size: 0.65625rem;
    color: var(--va-text-muted);
    margin-block-start: 0.25rem;
}

/* ── Footer ──────────────────────────────────────────────────────── */
.ui-noti__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.625rem 0.875rem;
    background-color: var(--va-elevated);
    border-block-start: 1px solid var(--va-border);
    color: var(--va-accent);
    font-size: 0.78125rem;
    font-weight: 500;
    text-decoration: none;
    flex-shrink: 0;
    transition: background-color 120ms ease;
}
.ui-noti__footer:hover { background-color: var(--va-card); }
.ui-noti__footer svg { width: 0.875rem; height: 0.875rem; }

/*
 * Mobile — pin the dropdown to the viewport edges instead of letting
 * its 22rem width spill off-screen on a 360px device. Uses fixed
 * positioning anchored to the topbar's bottom so it doesn't drift
 * if the trigger sits inside a flex layout.
 */
@media (max-width: 480px) {
    .ui-noti__dropdown {
        position: fixed;
        inset-inline-start: 8px;
        inset-inline-end: 8px;
        inset-block-start: calc(var(--va-header-height, 56px) + 4px);
        width: auto;
        max-height: calc(100vh - var(--va-header-height, 56px) - 16px);
    }
}

/* === Ui/OrgSwitcher/UiOrgSwitcher.razor.css === */
/*
 * UiOrgSwitcher — chip + popover. Same visual language as
 * UiUserMenu / UiNotificationDropdown so all three drop-downs feel
 * like one family.
 */

.ui-orgs {
    position: relative;
    display: inline-flex;
}

/* ── Trigger chip ─────────────────────────────────────────────────── *
 * Visual aligned with .ui-locs__trigger so the two switchers sit side
 * by side in topbar__lead as a consistent pair.                       */
.ui-orgs__trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 10px 0 8px;
    background-color: transparent;
    border: 1px solid var(--va-border);
    border-radius: var(--radius);
    color: var(--va-text);
    cursor: pointer;
    max-width: 240px;
    min-width: 0;
    transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}
.ui-orgs__trigger:hover {
    background-color: var(--va-elevated);
    border-color: var(--va-border-light);
}
.ui-orgs__trigger:focus-visible {
    outline: none;
    border-color: var(--va-accent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--va-accent) 22%, transparent);
}
.ui-orgs.is-open .ui-orgs__trigger {
    background-color: var(--va-elevated);
    border-color: var(--va-accent);
}

.ui-orgs__trigger-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background-color: var(--va-accent-dim);
    color: var(--va-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ui-orgs__trigger-icon svg { width: 14px; height: 14px; }

.ui-orgs__trigger-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--va-text);
}

.ui-orgs__trigger-chev {
    width: 14px;
    height: 14px;
    color: var(--va-text-muted);
    flex-shrink: 0;
    transition: transform 160ms ease;
}
.ui-orgs__trigger-chev svg { width: 100%; height: 100%; }
.ui-orgs.is-open .ui-orgs__trigger-chev { transform: rotate(180deg); color: var(--va-text-dim); }

/* ── Popover shell ────────────────────────────────────────────────── *
 * Same prominent drop-shadow + interior padding as .ui-locs__popover. */
.ui-orgs__backdrop {
    position: fixed;
    inset: 0;
    z-index: 35;
    background: transparent;
}

.ui-orgs__popover {
    position: absolute;
    z-index: 36;
    inset-block-start: calc(100% + 8px);
    inset-inline-start: 0;
    width: min(360px, calc(100vw - 24px));
    background-color: var(--va-card);
    border: 1px solid var(--va-border-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 48px -16px color-mix(in oklab, #000 55%, transparent);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 26rem;
    animation: ui-orgs-in 140ms ease-out;
}

@keyframes ui-orgs-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0)   scale(1);     }
}
@media (prefers-reduced-motion: reduce) {
    .ui-orgs__popover { animation: none; }
}

/* ── Header ───────────────────────────────────────────────────────── */
.ui-orgs__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 12px 14px 8px;
    flex-shrink: 0;
}
.ui-orgs__header-title {
    font-family: var(--va-font-heading);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--va-text-muted);
}
.ui-orgs__header-count {
    font-size: 0.6875rem;
    color: var(--va-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Search ───────────────────────────────────────────────────────── */
.ui-orgs__search {
    margin: 0 12px 8px;
    display: flex;
    align-items: center;
    height: 32px;
    border-radius: 8px;
    background-color: var(--va-elevated);
    border: 1px solid var(--va-border);
    transition: border-color 140ms ease, box-shadow 140ms ease;
    flex-shrink: 0;
}
.ui-orgs__search:focus-within {
    border-color: var(--va-accent);
    background-color: var(--va-card);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--va-accent) 18%, transparent);
}
.ui-orgs__search-icon {
    width: 13px; height: 13px;
    flex-shrink: 0;
    margin-inline-start: 10px;
    color: var(--va-text-muted);
    display: inline-flex; align-items: center; justify-content: center;
}
.ui-orgs__search-icon svg { width: 100%; height: 100%; }
.ui-orgs__search-input {
    flex: 1 1 auto;
    background: transparent;
    border: 0;
    outline: 0;
    padding: 0 10px;
    font-size: 0.8125rem;
    color: var(--va-text);
    font-family: inherit;
    min-width: 0;
}
.ui-orgs__search-input::placeholder { color: var(--va-text-muted); }

/* ── List ────────────────────────────────────────────────────────── */
.ui-orgs__list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 8px 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--va-border) transparent;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ui-orgs__list::-webkit-scrollbar { width: 4px; }
.ui-orgs__list::-webkit-scrollbar-thumb { background: var(--va-border); border-radius: 2px; }

.ui-orgs__divider {
    height: 1px;
    background-color: var(--va-border);
    margin: 6px 4px;
}

/* Item row — visual aligned with .ui-locs__item: hover-only background
 * change, selection signalled by the name colour going to --va-accent
 * (no gradient stripe), neutral "All organisations" mark, tinted-square
 * mark for the rest with no white-glow ring. */
.ui-orgs__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--va-text);
    text-align: start;
    cursor: pointer;
    transition: background-color 90ms ease;
    font-family: inherit;
}
.ui-orgs__item:hover { background-color: var(--va-elevated); }
.ui-orgs__item:focus-visible {
    outline: 2px solid var(--va-accent);
    outline-offset: -1px;
}
.ui-orgs__item.is-selected .ui-orgs__item-name { color: var(--va-accent); font-weight: 600; }

.ui-orgs__item-mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background-color: var(--orgs-tint, var(--va-accent-dim));
    color: var(--va-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    flex-shrink: 0;
}
.ui-orgs__item-mark--all {
    background-color: var(--va-elevated);
    color: var(--va-text-muted);
}
.ui-orgs__item-mark--all svg { width: 14px; height: 14px; }

.ui-orgs__item-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1 1 auto;
    min-width: 0;
}
.ui-orgs__item-name {
    font-size: 0.875rem;
    color: var(--va-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ui-orgs__item-meta {
    font-size: 0.6875rem;
    color: var(--va-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-orgs__item-check {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--va-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ui-orgs__item-check svg { width: 100%; height: 100%; }

.ui-orgs__empty {
    margin: 0.75rem;
    padding: 0.875rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--va-text-muted);
    background-color: var(--va-elevated);
    border: 1px dashed var(--va-border);
    border-radius: 8px;
}

/* ── Footer ──────────────────────────────────────────────────────── */
.ui-orgs__footer {
    flex-shrink: 0;
    padding: 6px;
    border-block-start: 1px solid var(--va-border);
    background-color: color-mix(in oklab, var(--va-elevated) 60%, transparent);
}

.ui-orgs__manage {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--va-text-dim);
    font-size: 0.78125rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 120ms ease, color 120ms ease;
}
.ui-orgs__manage:hover {
    background-color: var(--va-elevated);
    color: var(--va-text);
}
.ui-orgs__manage svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.85;
}

/* ── Loading skeleton (inside the list area) ─────────────────────── */
.ui-orgs__skel-stack {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

/* ── Inline error (compact UiServiceError wrapper) ──────────────── */
.ui-orgs__error-wrap {
    padding: 0.75rem 0.25rem;
}

/* ── Search row clear button ─────────────────────────────────────── */
.ui-orgs__search-clear {
    position: absolute;
    inset-inline-end: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 0;
    background: transparent;
    color: var(--va-text-dim);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}
.ui-orgs__search-clear:hover {
    background-color: color-mix(in oklab, var(--va-text) 10%, transparent);
    color: var(--va-text);
}
.ui-orgs__search-clear svg {
    width: 14px;
    height: 14px;
}

/* The search row uses position: relative so the clear button anchors. */
.ui-orgs__search {
    position: relative;
}

@media (max-width: 639.98px) {
    /* Full-screen dialog on mobile — the trigger sits at the trailing edge
       of the topbar so an anchored popover ran off the right; going edge-
       to-edge also gives the list room to render however many orgs the
       user has. Backdrop renders solid behind the panel so an accidental
       tap above the header still works as a close. */
    .ui-orgs__backdrop {
        background-color: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        z-index: 8499;
    }
    .ui-orgs__popover {
        position: fixed;
        inset: 0;
        width: auto;
        max-height: none;
        height: 100dvh;
        max-width: none;
        border-radius: 0;
        border: 0;
        box-shadow: none;
        z-index: 8500;
    }
}

/* ── Mobile-only close button inside the popover header ─────────────── */
.ui-orgs__header-close {
    display: none;
}
@media (max-width: 639.98px) {
    .ui-orgs__header {
        position: relative;
        padding-inline-end: 48px;
    }
    .ui-orgs__header-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        inset-inline-end: 8px;
        inset-block-start: 8px;
        width: 32px;
        height: 32px;
        padding: 0;
        background: transparent;
        border: 1px solid var(--va-border);
        border-radius: 8px;
        color: var(--va-text-dim);
        cursor: pointer;
    }
    .ui-orgs__header-close:hover {
        background-color: var(--va-elevated);
        color: var(--va-text);
    }
    .ui-orgs__header-close svg { width: 16px; height: 16px; }
}

/* === Ui/Radar/UiRadar.razor.css === */
/*
 * UiLocationSwitcher — counterpart to UiOrgSwitcher. Same trigger
 * shape, popover geometry, and three-state list behaviour, sharing
 * the .ui-locs* class family.
 */
.ui-locs { position: relative; font-family: var(--va-font-body); }

.ui-locs__trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 10px 0 8px;
    background-color: transparent;
    border: 1px solid var(--va-border);
    border-radius: var(--radius);
    color: var(--va-text);
    cursor: pointer;
    max-width: 240px;
    min-width: 0;
    transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}
.ui-locs__trigger:hover {
    background-color: var(--va-elevated);
    border-color: var(--va-border-light);
}
.ui-locs__trigger:focus-visible {
    outline: none;
    border-color: var(--va-accent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--va-accent) 22%, transparent);
}
.ui-locs.is-open .ui-locs__trigger {
    background-color: var(--va-elevated);
    border-color: var(--va-accent);
}

.ui-locs__trigger-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background-color: var(--va-accent-dim);
    color: var(--va-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ui-locs__trigger-icon svg { width: 14px; height: 14px; }

.ui-locs__trigger-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--va-text);
}

.ui-locs__trigger-chev {
    width: 14px;
    height: 14px;
    color: var(--va-text-muted);
    flex-shrink: 0;
    transition: transform 160ms ease;
}
.ui-locs__trigger-chev svg { width: 100%; height: 100%; }
.ui-locs.is-open .ui-locs__trigger-chev { transform: rotate(180deg); color: var(--va-text-dim); }

.ui-locs__backdrop { position: fixed; inset: 0; z-index: 35; }

.ui-locs__popover {
    position: absolute;
    inset-inline-start: 0;
    top: calc(36px + 8px);
    z-index: 36;
    width: min(360px, calc(100vw - 24px));
    background-color: var(--va-card);
    border: 1px solid var(--va-border-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 48px -16px color-mix(in oklab, #000 55%, transparent);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 26rem;
    animation: ui-locs-in 140ms ease-out;
}
@keyframes ui-locs-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0)   scale(1);     }
}
@media (prefers-reduced-motion: reduce) {
    .ui-locs__popover { animation: none; }
}

@media (max-width: 639.98px) {
    /* Full-screen dialog on mobile — mirror of .ui-orgs__popover. */
    .ui-locs__backdrop {
        background-color: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        z-index: 8499;
    }
    .ui-locs__popover {
        position: fixed;
        inset: 0;
        top: auto;
        width: auto;
        max-height: none;
        height: 100dvh;
        max-width: none;
        border-radius: 0;
        border: 0;
        box-shadow: none;
        z-index: 8500;
    }
}

/* ── Mobile-only close button inside the location popover header ────── */
.ui-locs__header-close {
    display: none;
}
@media (max-width: 639.98px) {
    .ui-locs__header {
        position: relative;
        padding-inline-end: 48px;
    }
    .ui-locs__header-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        inset-inline-end: 8px;
        inset-block-start: 8px;
        width: 32px;
        height: 32px;
        padding: 0;
        background: transparent;
        border: 1px solid var(--va-border);
        border-radius: 8px;
        color: var(--va-text-dim);
        cursor: pointer;
    }
    .ui-locs__header-close:hover {
        background-color: var(--va-elevated);
        color: var(--va-text);
    }
    .ui-locs__header-close svg { width: 16px; height: 16px; }
}

.ui-locs__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 6px 8px 4px;
}
.ui-locs__header-title {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--va-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ui-locs__header-count {
    font-size: 0.6875rem;
    color: var(--va-text-muted);
    font-variant-numeric: tabular-nums;
}

.ui-locs__search {
    position: relative;
    display: flex;
    align-items: center;
}
.ui-locs__search-icon {
    position: absolute;
    inset-inline-start: 10px;
    width: 14px;
    height: 14px;
    color: var(--va-text-muted);
    pointer-events: none;
}
.ui-locs__search-input {
    width: 100%;
    height: 32px;
    padding-inline: 32px 32px;
    border: 1px solid var(--va-border);
    border-radius: var(--radius);
    /* var(--va-elevated) to match .ui-orgs__search's wrapper background — the
       org switcher hosts the bg on the wrapper with a transparent input, the
       loc switcher hosts it on the input directly; both should render the
       same colour. */
    background-color: var(--va-elevated);
    color: var(--va-text);
    font-size: 0.8125rem;
    font-family: var(--va-font-body);
    outline: none;
}
.ui-locs__search-input:focus {
    border-color: var(--va-accent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--va-accent) 22%, transparent);
}
.ui-locs__search-input::placeholder { color: var(--va-text-muted); }

.ui-locs__search-clear {
    position: absolute;
    inset-inline-end: 6px;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: var(--va-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ui-locs__search-clear:hover { color: var(--va-text); background-color: var(--va-elevated); }
.ui-locs__search-clear svg { width: 12px; height: 12px; }

.ui-locs__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    flex: 1 1 auto;
    scrollbar-width: thin;
}
.ui-locs__skel-stack { display: flex; flex-direction: column; gap: 6px; padding: 6px 4px; }
.ui-locs__error-wrap { padding: 8px; }
.ui-locs__empty {
    padding: 14px 12px;
    text-align: center;
    color: var(--va-text-muted);
    font-size: 0.8125rem;
}
.ui-locs__divider { height: 1px; background-color: var(--va-border); margin: 2px 0; }

.ui-locs__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--va-text);
    text-align: start;
    cursor: pointer;
    transition: background-color 90ms ease;
    font-family: inherit;
}
.ui-locs__item:hover { background-color: var(--va-elevated); }
.ui-locs__item.is-selected .ui-locs__item-name { color: var(--va-accent); font-weight: 600; }

.ui-locs__item-mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background-color: var(--locs-tint, var(--va-accent-dim));
    color: var(--va-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    flex-shrink: 0;
}
.ui-locs__item-mark--all {
    background-color: var(--va-elevated);
    color: var(--va-text-muted);
}
.ui-locs__item-mark--all svg { width: 14px; height: 14px; }

.ui-locs__item-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1 1 auto;
    min-width: 0;
}
.ui-locs__item-name {
    font-size: 0.875rem;
    color: var(--va-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ui-locs__item-meta {
    font-size: 0.6875rem;
    color: var(--va-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ui-locs__item-check {
    width: 16px;
    height: 16px;
    color: var(--va-accent);
    flex-shrink: 0;
}

.ui-locs__footer {
    padding-top: 4px;
    border-top: 1px solid var(--va-border);
}
.ui-locs__manage {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    color: var(--va-text-dim);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 90ms ease, color 90ms ease;
}
.ui-locs__manage:hover { background-color: var(--va-elevated); color: var(--va-text); }
.ui-locs__manage svg { width: 14px; height: 14px; }

/* === Ui/LocationSwitcher/UiLocationPicker (form single) === */
.ui-loc-picker { position: relative; width: 100%; font-family: var(--va-font-body); }
.ui-loc-picker.is-disabled .ui-loc-picker__trigger { opacity: 0.55; cursor: not-allowed; }

.ui-loc-picker__trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 48px;
    padding: 4px 12px 4px 6px;
    background-color: var(--va-card);
    border: 1px solid var(--va-border);
    border-radius: var(--radius);
    color: var(--va-text);
    cursor: pointer;
    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
    text-align: start;
}
.ui-loc-picker__trigger:hover { border-color: var(--va-border-light); }
.ui-loc-picker.is-open .ui-loc-picker__trigger,
.ui-loc-picker__trigger:focus-visible {
    border-color: var(--va-accent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--va-accent) 25%, transparent);
    outline: none;
}

.ui-loc-picker__mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background-color: var(--locs-tint, var(--va-accent-dim));
    color: var(--va-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    flex-shrink: 0;
}
.ui-loc-picker__mark--empty {
    background-color: var(--va-elevated);
    color: var(--va-text-muted);
}
.ui-loc-picker__mark--empty svg { width: 16px; height: 16px; }

.ui-loc-picker__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1 1 auto;
    min-width: 0;
}
.ui-loc-picker__name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--va-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ui-loc-picker__name--placeholder { color: var(--va-text-muted); font-weight: 400; }
.ui-loc-picker__meta {
    font-size: 0.6875rem;
    color: var(--va-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-loc-picker__chev {
    width: 16px;
    height: 16px;
    color: var(--va-text-muted);
    flex-shrink: 0;
    transition: transform 160ms ease, color 140ms ease;
}
.ui-loc-picker.is-open .ui-loc-picker__chev { transform: rotate(180deg); color: var(--va-text-dim); }

.ui-loc-picker__backdrop { position: fixed; inset: 0; z-index: 35; }
.ui-loc-picker__popover {
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    top: calc(48px + 6px);
    z-index: 36;
    min-width: 22rem;
    background-color: var(--va-card);
    border: 1px solid var(--va-border-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 40px -12px color-mix(in oklab, #000 50%, transparent);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 26rem;
    animation: ui-locs-in 140ms ease-out;
}

.ui-loc-picker__filter { position: relative; display: flex; align-items: center; }
.ui-loc-picker__filter-icon {
    position: absolute;
    inset-inline-start: 10px;
    width: 14px;
    height: 14px;
    color: var(--va-text-muted);
    pointer-events: none;
}
.ui-loc-picker__filter-input {
    width: 100%;
    height: 32px;
    padding-inline: 32px 12px;
    border: 1px solid var(--va-border);
    border-radius: var(--radius);
    background-color: var(--va-bg);
    color: var(--va-text);
    font-size: 0.8125rem;
    font-family: var(--va-font-body);
    outline: none;
}
.ui-loc-picker__filter-input:focus {
    border-color: var(--va-accent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--va-accent) 22%, transparent);
}
.ui-loc-picker__filter-input::placeholder { color: var(--va-text-muted); }

.ui-loc-picker__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    flex: 1 1 auto;
    scrollbar-width: thin;
}
.ui-loc-picker__skel-stack { display: flex; flex-direction: column; gap: 6px; padding: 6px 4px; }
.ui-loc-picker__error-wrap { padding: 8px; }
.ui-loc-picker__empty {
    padding: 14px 12px;
    text-align: center;
    color: var(--va-text-muted);
    font-size: 0.8125rem;
}
.ui-loc-picker__divider { height: 1px; background-color: var(--va-border); margin: 2px 0; }

.ui-loc-picker__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--va-text);
    text-align: start;
    cursor: pointer;
    transition: background-color 90ms ease;
    font-family: inherit;
}
.ui-loc-picker__item:hover { background-color: var(--va-elevated); }
.ui-loc-picker__item.is-selected .ui-loc-picker__item-name { color: var(--va-accent); font-weight: 600; }
.ui-loc-picker__item--clear .ui-loc-picker__item-name { color: var(--va-text-dim); }

.ui-loc-picker__item-mark {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background-color: var(--locs-tint, var(--va-accent-dim));
    color: var(--va-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    flex-shrink: 0;
}
.ui-loc-picker__item-mark--clear {
    background-color: var(--va-elevated);
    color: var(--va-text-muted);
}
.ui-loc-picker__item-mark--clear svg { width: 14px; height: 14px; }

.ui-loc-picker__item-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}
.ui-loc-picker__item-name {
    font-size: 0.875rem;
    color: var(--va-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ui-loc-picker__item-meta {
    font-size: 0.6875rem;
    color: var(--va-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ui-loc-picker__item-check {
    width: 16px;
    height: 16px;
    color: var(--va-accent);
    flex-shrink: 0;
}

/* === Ui/LocationSwitcher/UiLocationMultiSelect (form multi) === */
.ui-loc-multi { width: 100%; }
.ui-loc-multi.is-disabled { opacity: 0.6; pointer-events: none; }
.ui-loc-multi__skel  { width: 100%; }
.ui-loc-multi__error { padding: 4px 0; }

/* === is-locked state for UiOrgSwitcher + UiLocationSwitcher ===
 *
 * When a user has access to only one org / location, the topbar chip
 * auto-selects it and renders as a read-only badge: no chevron, no
 * pointer cursor, no hover affordance, no popover. The user keeps
 * visible confirmation of the active scope without a clickable surface
 * that would only ever do nothing.
 */
.ui-orgs.is-locked .ui-orgs__trigger,
.ui-locs.is-locked .ui-locs__trigger {
    cursor: default;
    pointer-events: none;
    opacity: 0.95;
}
.ui-orgs.is-locked .ui-orgs__trigger:hover,
.ui-locs.is-locked .ui-locs__trigger:hover {
    background-color: transparent;
    border-color: var(--va-border);
}

/* === Ui/Pwa/UiAppUpdateBanner.razor.css === */
/*
 * Floating bottom-anchored banner for "a new version is available".
 * Renders only when the service worker has installed a new SW into
 * `waiting`. Sits above the bottom-nav on mobile (z-index above 5) and
 * above the topbar's z-index budget on desktop (8500-tier). Pointer
 * events are intentionally restored on the inner panel only so the
 * outer wrapper doesn't block clicks elsewhere when the banner is
 * hidden under a transparent layer (it isn't — but defence in depth).
 */

.ui-app-upd {
    position: fixed;
    inset-inline-start: 0;
    inset-inline-end: 0;
    inset-block-end: 0;
    z-index: 8800;
    display: flex;
    justify-content: center;
    padding: 1rem;
    pointer-events: none;
}
.ui-app-upd__panel {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    max-width: 560px;
    padding: 0.875rem 1rem;
    background-color: var(--va-card);
    border: 1px solid var(--va-border-light);
    border-radius: 14px;
    box-shadow: 0 24px 48px -16px color-mix(in oklab, #000 55%, transparent);
    animation: ui-app-upd-in 220ms cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes ui-app-upd-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .ui-app-upd__panel { animation: none; }
}

.ui-app-upd__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background-color: color-mix(in oklab, var(--va-accent) 18%, transparent);
    color: var(--va-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ui-app-upd__icon svg { width: 20px; height: 20px; }

.ui-app-upd__text { flex: 1 1 auto; min-width: 0; }
.ui-app-upd__title {
    margin: 0;
    font-family: var(--va-font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--va-text);
}
.ui-app-upd__body {
    margin: 2px 0 0;
    color: var(--va-text-dim);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.ui-app-upd__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

@media (max-width: 639.98px) {
    /* Make room for the bottom-nav (~56 px + safe-area inset). */
    .ui-app-upd { inset-block-end: calc(56px + env(safe-area-inset-bottom, 0px) + 8px); padding: 0.625rem; }
    .ui-app-upd__panel { flex-wrap: wrap; }
    .ui-app-upd__text { flex-basis: calc(100% - 36px - 0.875rem); }
    .ui-app-upd__actions { flex-basis: 100%; justify-content: flex-end; }
}