/* ════════════════════════════════════════════════════════════
 * ui-forms.css — Biosis RCL component stilleri
 * Bölümler: UiInput, UiLocalePicker, UiSelect, UiMultiSelect, UiOrgPicker, UiOrgMultiSelect
 * (ui-components.css monolitinden bölündü — 2026-06-02)
 * ════════════════════════════════════════════════════════════ */

/*
 * UiInput — scoped novel styling.
 * Tailwind handles size, colour, focus state via utilities. This file owns
 * the icon-positioning helpers that are awkward to express purely in
 * utility classes.
 */

/*
 * Leading-icon container.
 *
 * We DON'T position absolutely against the wrapper anymore — the icon
 * was overlapping the input's text whenever the icon glyph was larger
 * than the input's leading padding allowed for. Instead, paint the
 * icon as a flex sibling of the <input>, and stretch the input to
 * fill the remaining row width with `flex: 1`. The wrapper's padding
 * sets the leading offset so the icon sits ~12px inside the border;
 * the input's own border/background fills the entire wrapper, hidden
 * behind the icon (z-index handles overlap order). RTL flips for free
 * because the wrapper is logical-property aware.
 */
.ui-input__icon {
    position: absolute;
    inset-inline-start: 0;
    inset-block: 0;
    width: 2.5rem;             /* 40px box; visually centred against an h-9/11 input */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: var(--va-text-dim);
    z-index: 2;                /* above the input bg so the glyph stays visible */
}
.ui-input__icon svg {
    width: 1rem;
    height: 1rem;
}

/* Trailing slot — actionable content (e.g. password show/hide). Uses
   absolute positioning so the input still spans the full wrapper width
   and ps-* / pe-* on the input handle text inset. z-index above the
   input so the click target is reachable. */
.ui-input__trail {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    padding-inline-end: 0.25rem;
    display: inline-flex;
    align-items: center;
    z-index: 2;
}

/*
 * Autofill recolouring lives in the global stylesheet (tokens.css) because
 * Blazor scoped CSS doesn't reach Chrome's UA shadow tree consistently for
 * the :-webkit-autofill pseudo-class. See tokens.css for the rule.
 */

/* === Ui/Menus/UiUserMenu.razor.css === */
/*
 * UiLocalePicker — trigger button + dropdown of cultures.
 *
 * The dropdown sits absolutely under the trigger, aligned to the inline-end
 * edge so it doesn't extend past the page boundary in either LTR or RTL.
 *
 * A full-screen invisible backdrop captures outside-click to close.
 */

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

/* ── Trigger ── */

.ui-locale-picker__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.25rem;
    padding-inline: 0.625rem 0.5rem;
    background-color: color-mix(in oklab, var(--va-card) 70%, transparent);
    border: 1px solid var(--va-border);
    border-radius: 0.625rem;
    color: var(--va-text);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background-color 150ms ease, border-color 150ms ease, transform 120ms ease;
}

.ui-locale-picker__trigger:hover {
    background-color: var(--va-elevated);
    border-color: var(--va-border-light);
}

.ui-locale-picker__trigger:active {
    transform: scale(0.97);
}

.ui-locale-picker__trigger:focus-visible {
    outline: 2px solid var(--va-accent);
    outline-offset: 2px;
}

.ui-locale-picker__icon {
    width: 1rem;
    height: 1rem;
    color: var(--va-text-dim);
    flex-shrink: 0;
}

.ui-locale-picker__label {
    line-height: 1;
}

.ui-locale-picker__chevron {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--va-text-muted);
    transition: transform 180ms ease;
}

.ui-locale-picker.is-open .ui-locale-picker__chevron {
    transform: rotate(180deg);
}

/* ── Backdrop (outside-click capture) ── */

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

/* ── Menu ── */

.ui-locale-picker__menu {
    position: absolute;
    z-index: 50;
    inset-block-start: calc(100% + 0.5rem);
    inset-inline-end: 0;

    min-width: 12rem;
    margin: 0;
    padding: 0.375rem;
    list-style: none;

    background-color: var(--va-card);
    border: 1px solid var(--va-border);
    border-radius: 0.75rem;
    box-shadow: var(--va-shadow-lg);

    display: flex;
    flex-direction: column;
    gap: 0.125rem;

    animation: ui-locale-picker-in 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ui-locale-picker__option {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    background: transparent;
    border: 0;
    border-radius: 0.5rem;
    color: var(--va-text);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.875rem;
    text-align: start;
    transition: background-color 120ms ease;
}

.ui-locale-picker__option:hover,
.ui-locale-picker__option:focus-visible {
    background-color: var(--va-elevated);
    outline: none;
}

.ui-locale-picker__option[data-selected="true"] {
    color: var(--va-accent);
}

.ui-locale-picker__option-code {
    font-family: var(--va-font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--va-text-muted);
    background-color: color-mix(in oklab, var(--va-elevated) 80%, transparent);
    border: 1px solid var(--va-border);
    border-radius: 0.375rem;
    padding: 0.125rem 0.375rem;
    flex-shrink: 0;
    width: 2.25rem;
    text-align: center;
}

.ui-locale-picker__option[data-selected="true"] .ui-locale-picker__option-code {
    color: var(--va-accent);
    border-color: color-mix(in oklab, var(--va-accent) 40%, transparent);
}

.ui-locale-picker__option-name {
    flex: 1 1 auto;
    line-height: 1.25;
}

.ui-locale-picker__option-check {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--va-accent);
    flex-shrink: 0;
}

@keyframes ui-locale-picker-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-locale-picker__menu { animation: none; }
}

/* On mobile the topbar reorders so the locale trigger lives on the
   inline-START of the bar (see order rules in layout.css). The base
   `inset-inline-end: 0` anchors the popover to the trigger's trailing
   edge and extends it inline-start — pushing it off the leading edge
   of the viewport. Flip to start-anchored so it grows inline-end +
   stays on screen.

   IMPORTANT: this flip is scoped to `.topbar` because on the auth
   page (`.auth-page-actions`) the trigger sits at top-RIGHT regardless
   of viewport size. Applying the flip there pushes the menu OFF the
   trailing edge instead. */
@media (max-width: 639.98px) {
    .topbar .ui-locale-picker__menu {
        inset-inline-end: auto;
        inset-inline-start: 0;
    }
    /* Final safety net for any context — never let the menu exceed the
       viewport width minus a tiny gutter. */
    .ui-locale-picker__menu {
        max-width: calc(100vw - 1rem);
    }
}

/* === Ui/Selects/UiSelect.razor.css === */
/*
 * UiSelect — shadcn/ui-style popover dropdown.
 *
 * Trigger geometry mirrors UiInput's md size (h-9 / 36px) with a
 * trailing chevron. Popover opens below the trigger, animated fade +
 * slight upward translate. Options are full-width buttons with
 * accent-tinted hover + a check icon for the selected value.
 */

/*
 * Default width is `auto` so the select sizes to content in inline /
 * row contexts (toolbar filters, page-size pickers in pagination).
 * Form-field call sites that want the select to stretch to the
 * field's full width get that for free: `.dev-modal__field` is a
 * flex column with the default `align-items: stretch`, so a
 * non-`100%` flex child still fills the cross-axis. Pages that need
 * a fixed cap (e.g. a filter chip) can set `max-width` via the
 * `Class` parameter.
 */
.ui-select {
    position: relative;
    display: inline-flex;
}

/* ── Trigger ─────────────────────────────────────────────────────── */
.ui-select__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: 36px;
    padding: 0 0.75rem;
    background-color: var(--va-elevated);
    border: 1px solid var(--va-border);
    border-radius: 8px;
    color: var(--va-text);
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
    text-align: start;
    transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
.ui-select__trigger:hover { border-color: var(--va-border-light); }
.ui-select__trigger:focus-visible,
.ui-select.is-open .ui-select__trigger {
    outline: none;
    border-color: var(--va-accent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--va-accent) 22%, transparent);
}

.ui-select.is-disabled .ui-select__trigger,
.ui-select__trigger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Trigger size variants ─────────────────────────────────────── */
.ui-select.ui-select--size-sm .ui-select__trigger {
    height: 28px;
    padding: 0 0.5rem;
    font-size: 0.75rem;
    border-radius: 7px;
}
.ui-select.ui-select--size-lg .ui-select__trigger {
    height: 44px;
    padding: 0 0.875rem;
    font-size: 0.875rem;
}

.ui-select__value {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--va-text);
}
.ui-select__value--placeholder { color: var(--va-text-muted); }

.ui-select__chev {
    width: 14px;
    height: 14px;
    color: var(--va-text-dim);
    flex-shrink: 0;
    transition: transform 150ms ease;
}
.ui-select.is-open .ui-select__chev { transform: rotate(180deg); }
.ui-select.ui-select--size-sm .ui-select__chev { width: 12px; height: 12px; }

/* ── Popover ─────────────────────────────────────────────────────── */
.ui-select__backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: transparent;
}

.ui-select__popover {
    position: absolute;
    z-index: 81;
    inset-block-start: calc(100% + 6px);
    inset-inline-start: 0;
    /* `inset-inline-end: 0` would force the popover to track the
       trigger width — fine for full-width form fields but breaks the
       compact toolbar case where a 4rem trigger needs to host "100"
       in its options without truncation. Drop the end inset and let
       `min-width: 100%` keep the popover at LEAST as wide as the
       trigger; content can push it wider as needed (capped at `max-width`
       so it never gets unwieldy on screens with long labels). */
    min-width: 100%;
    max-width: min(20rem, calc(100vw - 24px));
    max-height: min(20rem, 60vh);
    overflow: hidden;
    padding: 4px;
    background-color: var(--va-card);
    border: 1px solid var(--va-border);
    border-radius: 9px;
    box-shadow: var(--va-shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 4px;
    animation: ui-select-in 140ms cubic-bezier(0.32, 0.72, 0, 1);
}
/*
 * Direction="up" — flip the popover to open above the trigger.
 *
 * Required for selects that sit at the bottom edge of an
 * `overflow: hidden` ancestor (the grid page-size picker is the
 * canonical case). Opening downward there gets immediately clipped
 * by the rounded chrome of `.ui-grid`; opening upward keeps the
 * popover INSIDE the grid's bounds (it floats over the data area)
 * so nothing is clipped.
 */
.ui-select.ui-select--dir-up .ui-select__popover {
    inset-block-start: auto;
    inset-block-end: calc(100% + 6px);
    transform-origin: bottom;
    animation: ui-select-in-up 140ms cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes ui-select-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
@keyframes ui-select-in-up {
    from { opacity: 0; transform: translateY(4px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
@media (prefers-reduced-motion: reduce) {
    .ui-select__popover { animation: none; }
}

/* ── Filter input (Filterable=true) ─────────────────────────────── */
.ui-select__filter {
    position: relative;
    flex-shrink: 0;
    padding: 4px 4px 0;
}
.ui-select__filter-icon {
    position: absolute;
    inset-inline-start: 12px;
    inset-block-start: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--va-text-muted);
    pointer-events: none;
}
.ui-select__filter-input {
    width: 100%;
    height: 32px;
    padding: 0 10px 0 32px;
    background-color: var(--va-elevated);
    border: 1px solid var(--va-border);
    border-radius: 7px;
    color: var(--va-text);
    font-family: inherit;
    font-size: 0.8125rem;
    outline: none;
    transition: border-color 120ms ease;
}
.ui-select__filter-input::placeholder { color: var(--va-text-muted); }
.ui-select__filter-input:focus {
    border-color: var(--va-accent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--va-accent) 22%, transparent);
}
html[dir="rtl"] .ui-select__filter-input { padding: 0 32px 0 10px; }
html[dir="rtl"] .ui-select__filter-icon {
    inset-inline-start: auto;
    inset-inline-end: 12px;
}

/* ── Options scroll region ─────────────────────────────────────── */
.ui-select__options {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1 1 auto;
    min-height: 0;
}

/* ── Options ─────────────────────────────────────────────────────── */
.ui-select__option {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 0.5rem 0.625rem;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--va-text);
    font-family: inherit;
    font-size: 0.8125rem;
    text-align: start;
    cursor: pointer;
    transition: background-color 100ms ease, color 100ms ease;
}
.ui-select__option:hover,
.ui-select__option.is-active {
    background-color: color-mix(in oklab, var(--va-accent) 14%, transparent);
    color: var(--va-text);
}
.ui-select__option.is-selected {
    color: var(--va-accent);
    font-weight: 500;
}

.ui-select__option-label {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-select__option-check {
    width: 14px;
    height: 14px;
    color: var(--va-accent);
    flex-shrink: 0;
}

.ui-select__empty {
    padding: 0.75rem 0.625rem;
    margin: 0;
    text-align: center;
    color: var(--va-text-muted);
    font-size: 0.8125rem;
}

/* === Ui/Sheets/UiBottomSheet.razor.css === */
/*
 * UiMultiSelect — popover with per-row checkboxes for multi-select.
 * Visual language matches UiSelect (h-9 default trigger, chevron,
 * animated popover), with a per-option check column on the leading
 * edge and an optional trailing chip for meta.
 */
.ui-multiselect {
    position: relative;
    width: 100%;
    --ms-h: 36px;
    font-family: var(--va-font-body);
    color: var(--va-text);
}
.ui-multiselect--size-sm { --ms-h: 28px; font-size: 0.8125rem; }
.ui-multiselect--size-md { --ms-h: 36px; font-size: 0.875rem;  }
.ui-multiselect--size-lg { --ms-h: 44px; font-size: 0.9375rem; }
.ui-multiselect.is-disabled .ui-multiselect__trigger { opacity: 0.55; cursor: not-allowed; }

.ui-multiselect__trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: var(--ms-h);
    padding-inline: 12px;
    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-multiselect__trigger:hover  { border-color: var(--va-border-light); }
.ui-multiselect.is-open .ui-multiselect__trigger,
.ui-multiselect__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-multiselect__value {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--va-text);
}
.ui-multiselect__value--placeholder { color: var(--va-text-muted); }

.ui-multiselect__badge {
    flex-shrink: 0;
    min-width: 22px;
    height: 18px;
    padding-inline: 6px;
    border-radius: 999px;
    background-color: var(--va-accent-dim);
    color: var(--va-accent);
    font-size: 0.6875rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

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

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

.ui-multiselect__popover {
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    top: calc(var(--ms-h) + 6px);
    z-index: 36;
    min-width: 16rem;
    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: 22rem;
    /* Clip the plate to its rounded corners. Inner `__options` keeps its
       own `overflow-y: auto` so the scroll affordance shows up *inside*
       the plate instead of items bleeding past the rounded edge. */
    overflow: hidden;
    animation: ui-multiselect-in 140ms ease-out;
}
.ui-multiselect--dir-up .ui-multiselect__popover {
    top: auto;
    bottom: calc(var(--ms-h) + 6px);
    transform-origin: bottom center;
}

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

.ui-multiselect__filter {
    position: relative;
    display: flex;
    align-items: center;
}
.ui-multiselect__filter-icon {
    position: absolute;
    inset-inline-start: 10px;
    width: 14px;
    height: 14px;
    color: var(--va-text-muted);
    pointer-events: none;
}
.ui-multiselect__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;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.ui-multiselect__filter-input:focus {
    border-color: var(--va-accent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--va-accent) 22%, transparent);
}
.ui-multiselect__filter-input::placeholder { color: var(--va-text-muted); }

.ui-multiselect__bulk {
    display: flex;
    gap: 4px;
    padding-block: 4px;
    border-bottom: 1px solid var(--va-border);
}
.ui-multiselect__bulk-btn {
    flex: 1 1 0;
    height: 28px;
    padding-inline: 8px;
    background: transparent;
    border: 1px dashed transparent;
    border-radius: var(--radius-sm);
    color: var(--va-text-dim);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.ui-multiselect__bulk-btn:hover:not(:disabled) {
    background-color: var(--va-elevated);
    color: var(--va-text);
    border-color: var(--va-border);
}
.ui-multiselect__bulk-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.ui-multiselect__empty {
    padding: 14px 12px;
    text-align: center;
    color: var(--va-text-muted);
    font-size: 0.8125rem;
}

.ui-multiselect__options {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    padding-inline-end: 2px;
    flex: 1 1 auto;
    /* CRITICAL: without `min-height: 0` the flex item can't shrink below
       its content size, so when there are many options the list grows
       past the popover's `max-height` and the inner `overflow-y: auto`
       never activates — the items just get clipped by the popover's
       `overflow: hidden`, hiding all but the first few. */
    min-height: 0;
    scrollbar-width: thin;
}

.ui-multiselect__option {
    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, color 90ms ease;
    font-size: inherit;
}
.ui-multiselect__option:hover,
.ui-multiselect__option.is-active {
    background-color: var(--va-elevated);
}
.ui-multiselect__option.is-selected { color: var(--va-accent); }

.ui-multiselect__option-check {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--va-border);
    border-radius: 4px;
    background-color: var(--va-bg);
    color: transparent;
    transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}
.ui-multiselect__option-check.is-checked {
    background-color: var(--va-accent);
    border-color: var(--va-accent);
    color: var(--va-bg);
}
.ui-multiselect__option-check svg { width: 11px; height: 11px; }

.ui-multiselect__option-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-multiselect__option-chip {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: var(--va-elevated);
    color: var(--va-text-muted);
    font-size: 0.6875rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* === Ui/OrgSwitcher/UiOrgPicker (de-scoped: lives global) === */
/*
 * UiOrgPicker — single-org dropdown form input. Trigger styled like
 * UiInput (matches UiSelect/UiMultiSelect heights), each row shows a
 * tinted initial avatar + name + meta.
 */
.ui-org-picker {
    position: relative;
    width: 100%;
    font-family: var(--va-font-body);
}
.ui-org-picker.is-disabled .ui-org-picker__trigger { opacity: 0.55; cursor: not-allowed; }

.ui-org-picker__trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 40px;
    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-org-picker__trigger:hover { border-color: var(--va-border-light); }
.ui-org-picker.is-open .ui-org-picker__trigger,
.ui-org-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-org-picker__mark {
    width: 28px;
    height: 28px;
    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.75rem;
    font-weight: 700;
    flex-shrink: 0;
}
.ui-org-picker__mark--empty {
    background-color: var(--va-elevated);
    color: var(--va-text-muted);
}
.ui-org-picker__mark--empty svg { width: 14px; height: 14px; }

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

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

.ui-org-picker__backdrop {
    position: fixed;
    inset: 0;
    z-index: 35;
}
.ui-org-picker__popover {
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    top: calc(40px + 6px);
    z-index: 36;
    min-width: 18rem;
    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: 22rem;
    animation: ui-multiselect-in 140ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
    .ui-org-picker__popover { animation: none; }
}

.ui-org-picker__filter {
    position: relative;
    display: flex;
    align-items: center;
}
.ui-org-picker__filter-icon {
    position: absolute;
    inset-inline-start: 10px;
    width: 14px;
    height: 14px;
    color: var(--va-text-muted);
    pointer-events: none;
}
.ui-org-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-org-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-org-picker__filter-input::placeholder { color: var(--va-text-muted); }

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

.ui-org-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-org-picker__item:hover { background-color: var(--va-elevated); }
.ui-org-picker__item.is-selected .ui-org-picker__item-name { color: var(--va-accent); font-weight: 600; }
.ui-org-picker__item--clear .ui-org-picker__item-name { color: var(--va-text-dim); }

.ui-org-picker__item-mark {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    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.75rem;
    font-weight: 700;
    flex-shrink: 0;
}
.ui-org-picker__item-mark--clear {
    background-color: var(--va-elevated);
    color: var(--va-text-muted);
}
.ui-org-picker__item-mark--clear svg { width: 14px; height: 14px; }

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

/* === Ui/OrgSwitcher/UiOrgMultiSelect (de-scoped: lives global) === */
/*
 * UiOrgMultiSelect — thin wrapper over UiMultiSelect that handles the
 * Loading / Error states. The actual dropdown UI is UiMultiSelect's.
 */
.ui-org-multi { width: 100%; }
.ui-org-multi.is-disabled { opacity: 0.6; pointer-events: none; }
.ui-org-multi__skel  { width: 100%; }
.ui-org-multi__error { padding: 4px 0; }

/* === Ui/LocationSwitcher/UiLocationSwitcher (topbar) === */