/* ════════════════════════════════════════════════════════════
 * ui-overlays.css — Biosis RCL component stilleri
 * Bölümler: UiCommandPalette, UiConfirmDialog, UiBottomSheet, UiEditModal, UiEditModal
 * (ui-components.css monolitinden bölündü — 2026-06-02)
 * ════════════════════════════════════════════════════════════ */

/*
 * UiCommandPalette — search trigger + modal overlay.
 *
 * Trigger sits in the top-bar (centred search-style chip with ⌘K hint).
 * Modal centres a ~640 px panel above a blurred backdrop. Categories
 * are colour-tinted via --cmd-tint set at the group + item level so
 * Pages, Analytics, Admin, Quick actions each carry a subtle visual
 * accent (info/accent/warning/violet).
 */

.ui-cmd {
    flex: 1 1 auto;
    max-width: 32rem;
    margin-inline: auto;
}

.ui-cmd__trigger {
    width: 100%;
    height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding-inline: 0.875rem;
    border-radius: 9px;
    background-color: color-mix(in oklab, var(--va-card) 70%, transparent);
    border: 1px solid var(--va-border);
    color: var(--va-text-dim);
    font-family: inherit;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.ui-cmd__trigger:hover {
    background-color: var(--va-card);
    border-color: var(--va-border-light);
    color: var(--va-text);
}
.ui-cmd__trigger:focus-visible {
    outline: 2px solid var(--va-accent);
    outline-offset: 2px;
}

.ui-cmd__trigger-icon {
    width: 14px; height: 14px; flex-shrink: 0; opacity: 0.7;
    display: inline-flex; align-items: center; justify-content: center;
}
.ui-cmd__trigger-icon svg { width: 100%; height: 100%; }

.ui-cmd__trigger-placeholder {
    flex: 1 1 auto;
    text-align: start;
    font-size: 0.8125rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ui-cmd__trigger-kbd {
    padding: 2px 6px;
    border-radius: 5px;
    background-color: var(--va-elevated);
    border: 1px solid var(--va-border);
    font-family: var(--va-font-mono);
    font-size: 0.65625rem;
    color: var(--va-text-dim);
    flex-shrink: 0;
    /* Keyboard shortcuts are LTR — even in an RTL paragraph the
       physical "Cmd-K" keystroke reads ⌘ then K, never K then ⌘. */
    direction: ltr;
    unicode-bidi: isolate;
}

/* ── Modal overlay ─────────────────────────────────────────────────── */
/*
 * z-index reasoning: the sidebar carries z-index:2, topbar z-index:1,
 * UiUserMenu/UiOrgSwitcher dropdowns z-index:50, UiConfirmDialog
 * z-index:9000. We sit at 8500 — above every chrome surface and above
 * any popover that might be opening, but below the destructive-action
 * confirm dialog (so an Esc-out from the palette can't accidentally
 * close a confirm-sign-out prompt sitting on top of it).
 *
 * The overlay must escape every parent stacking context to cover the
 * sidebar and topbar — TopBar.razor.css explicitly DROPS its z-index:1
 * to keep this work; do not re-add it.
 */
.ui-cmd__overlay {
    position: fixed;
    inset: 0;
    z-index: 8500;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-block-start: 12vh;
    padding-inline: 1rem;
}

.ui-cmd__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.ui-cmd__panel {
    position: relative;
    width: min(640px, 100%);
    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-cmd-in 180ms cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    max-height: 70vh;
}

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

/* ── Search row ────────────────────────────────────────────────────── */
.ui-cmd__search {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 14px 16px;
    border-block-end: 1px solid var(--va-border);
    flex-shrink: 0;
}

.ui-cmd__search-icon {
    width: 18px; height: 18px; color: var(--va-text-dim);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ui-cmd__search-icon svg { width: 100%; height: 100%; }

.ui-cmd__input {
    flex: 1 1 auto;
    background: transparent;
    border: 0;
    outline: 0;
    font-family: inherit;
    font-size: 0.96875rem;
    color: var(--va-text);
    min-width: 0;
}
.ui-cmd__input::placeholder { color: var(--va-text-muted); }

/* Close affordance — desktop shows the `esc` kbd-style hint, mobile
   swaps to an X icon (no hardware Esc key on touch devices). The button
   itself is always a real button so screen readers + click + tap all
   work; only the visual representation flips between breakpoints. */
.ui-cmd__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 5px;
    background-color: var(--va-elevated);
    border: 1px solid var(--va-border);
    color: var(--va-text-muted);
    cursor: pointer;
    flex-shrink: 0;
    direction: ltr;
    unicode-bidi: isolate;
}
.ui-cmd__close:hover {
    background-color: var(--va-card);
    color: var(--va-text);
}
.ui-cmd__close-text {
    font-family: var(--va-font-mono);
    font-size: 0.6875rem;
}
.ui-cmd__close-icon {
    display: none;
    width: 18px;
    height: 18px;
}

@media (max-width: 639.98px) {
    /* On mobile the button becomes a square icon target sized for thumbs,
       loses the kbd-pill look, and only shows the X glyph. */
    .ui-cmd__close {
        width: 36px;
        height: 36px;
        padding: 0;
        border-radius: 8px;
    }
    .ui-cmd__close-text { display: none; }
    .ui-cmd__close-icon { display: inline-block; }
}

/* ── Results region ──────────────────────────────────────────────── */
/* ── Tab strip (NEW for remote search) ─────────────────────────── */
.ui-cmd__tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 8px 0;
    border-block-end: 1px solid var(--va-border);
    overflow-x: auto;
    overflow-y: hidden;
    flex-shrink: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 14px, black calc(100% - 14px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, black 14px, black calc(100% - 14px), transparent 100%);
}
.ui-cmd__tabs::-webkit-scrollbar { display: none; }

.ui-cmd__tab {
    appearance: none;
    background: transparent;
    border: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border-radius: 7px 7px 0 0;
    color: var(--va-text-dim);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: color 120ms, background-color 120ms;
    position: relative;
    margin-block-end: -1px;
    border-block-end: 2px solid transparent;
    flex-shrink: 0;
    scroll-snap-align: start;
}
.ui-cmd__tab svg { width: 13px; height: 13px; flex-shrink: 0; }
.ui-cmd__tab:hover { color: var(--va-text); }
.ui-cmd__tab.is-active {
    color: var(--va-text);
    border-block-end-color: var(--va-accent);
    font-weight: 600;
}
.ui-cmd__tab-count {
    font-size: 10.5px;
    padding: 1px 7px;
    border-radius: 999px;
    background-color: color-mix(in oklab, var(--va-text) 9%, transparent);
    color: var(--va-text-dim);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 18px;
    text-align: center;
}
.ui-cmd__tab.is-active .ui-cmd__tab-count {
    background-color: var(--va-accent-dim);
    color: var(--va-accent);
}
.ui-cmd__tab-count--error {
    background-color: color-mix(in oklab, var(--va-danger) 16%, transparent) !important;
    color: var(--va-danger) !important;
}
.ui-cmd__tab-spinner { display: inline-flex; }

/* ── Inline spinner ──────────────────────────────────────────── */
.ui-cmd__spinner {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid color-mix(in oklab, var(--cmd-tint, var(--va-accent)) 22%, transparent);
    border-top-color: var(--cmd-tint, var(--va-accent));
    animation: ui-cmd-spin 650ms linear infinite;
    flex-shrink: 0;
    display: inline-block;
}
.ui-cmd__spinner--xs {
    width: 11px; height: 11px;
    border-width: 1.6px;
}
@keyframes ui-cmd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .ui-cmd__spinner { animation: none; }
}

/* ── Section spinner (sits in the group head where count sits) ── */
.ui-cmd__group-spinner {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
}

/* ── Shimmer skeleton rows ───────────────────────────────────── */
.ui-cmd__skel {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 4px;
}
.ui-cmd__skel-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
}
.ui-cmd__skel-icon {
    width: 30px; height: 30px; border-radius: 8px;
    background: linear-gradient(90deg,
        color-mix(in oklab, var(--va-text) 6%, var(--va-elevated)) 0%,
        color-mix(in oklab, var(--va-text) 12%, var(--va-elevated)) 50%,
        color-mix(in oklab, var(--va-text) 6%, var(--va-elevated)) 100%);
    background-size: 200% 100%;
    animation: ui-cmd-shimmer 1.4s linear infinite;
    flex-shrink: 0;
}
.ui-cmd__skel-lines {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.ui-cmd__skel-bar {
    height: 10px; border-radius: 4px;
    background: linear-gradient(90deg,
        color-mix(in oklab, var(--va-text) 6%, var(--va-elevated)) 0%,
        color-mix(in oklab, var(--va-text) 12%, var(--va-elevated)) 50%,
        color-mix(in oklab, var(--va-text) 6%, var(--va-elevated)) 100%);
    background-size: 200% 100%;
    animation: ui-cmd-shimmer 1.4s linear infinite;
}
.ui-cmd__skel-bar--wide   { width: 64%; }
.ui-cmd__skel-bar--narrow { width: 36%; height: 8px; }
@keyframes ui-cmd-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: -100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .ui-cmd__skel-icon, .ui-cmd__skel-bar { animation: none; }
}

/* ── Section error card (inline, per-section, with Retry) ──── */
.ui-cmd__section-error {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    margin: 0 4px;
    border-radius: 8px;
    background-color: color-mix(in oklab, var(--va-danger) 7%, transparent);
    border: 1px solid color-mix(in oklab, var(--va-danger) 25%, var(--va-border));
    font-size: 0.78125rem;
    color: var(--va-text);
}
.ui-cmd__section-error svg { width: 14px; height: 14px; color: var(--va-danger); flex-shrink: 0; }
.ui-cmd__section-error-text { flex: 1 1 auto; }
.ui-cmd__section-error-retry {
    appearance: none; background: transparent; border: 0;
    color: var(--va-danger); font: inherit; font-size: 0.71875rem;
    font-weight: 600; cursor: pointer;
    padding: 3px 7px; border-radius: 5px;
}
.ui-cmd__section-error-retry:hover {
    background-color: color-mix(in oklab, var(--va-danger) 14%, transparent);
}

/* ── Section empty (resolved with zero matches in this category) ── */
.ui-cmd__section-empty {
    padding: 14px 12px;
    margin: 0 4px;
    font-size: 0.78125rem;
    color: var(--va-text-muted);
    text-align: center;
    font-style: italic;
}

/* ── Match highlight on item name ─────────────────────────────── */
.ui-cmd__item-name b {
    font-weight: 700;
    color: var(--va-accent);
    background-color: var(--va-accent-dim);
    padding: 0 2px;
    border-radius: 2px;
}

.ui-cmd__results {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 6px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--va-border) transparent;
}
.ui-cmd__results::-webkit-scrollbar { width: 6px; }
.ui-cmd__results::-webkit-scrollbar-thumb { background: var(--va-border); border-radius: 3px; }

.ui-cmd__group {
    padding: 4px 8px 8px;
}
.ui-cmd__group + .ui-cmd__group {
    border-block-start: 1px solid var(--va-border);
    margin-block-start: 4px;
    padding-block-start: 10px;
}

.ui-cmd__group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--va-font-heading);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--va-text-muted);
    padding: 6px 12px 8px;
}
.ui-cmd__group-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background-color: var(--cmd-tint, var(--va-accent));
    box-shadow: 0 0 8px color-mix(in oklab, var(--cmd-tint, var(--va-accent)) 60%, transparent);
    flex-shrink: 0;
}
.ui-cmd__group-count {
    margin-inline-start: auto;
    font-family: var(--va-font-mono);
    font-size: 0.625rem;
    color: var(--va-text-muted);
    background-color: var(--va-elevated);
    border: 1px solid var(--va-border);
    border-radius: 999px;
    padding: 1px 7px;
    letter-spacing: 0;
}

.ui-cmd__item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    border-radius: 9px;
    color: var(--va-text);
    font-family: inherit;
    text-align: start;
    cursor: pointer;
    transition: background-color 120ms ease;
}
.ui-cmd__item:focus-visible { outline: none; }

.ui-cmd__item.is-selected {
    background-color: color-mix(in oklab, var(--cmd-tint, var(--va-accent)) 14%, transparent);
}
.ui-cmd__item.is-selected .ui-cmd__item-icon {
    background-color: color-mix(in oklab, var(--cmd-tint, var(--va-accent)) 24%, transparent);
    color: var(--cmd-tint, var(--va-accent));
}

.ui-cmd__item-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    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;
  padding: 5px;
}
.ui-cmd__item-icon svg { width: 16px; height: 16px; }

.ui-cmd__item-text {
    flex: 1 1 auto;
    min-width: 0;
}
.ui-cmd__item-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--va-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ui-cmd__item-hint {
    font-size: 0.6875rem;
    color: var(--va-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--va-font-mono);
    margin-top: 1px;
}

.ui-cmd__item-enter {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background-color: var(--va-card);
    border: 1px solid var(--va-border-light);
    color: var(--cmd-tint, var(--va-accent));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ui-cmd__item-enter svg { width: 12px; height: 12px; }

/* ── Empty state ─────────────────────────────────────────────────── */
.ui-cmd__empty {
    padding: 40px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.ui-cmd__empty-mark {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-color: var(--va-elevated);
    color: var(--va-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.ui-cmd__empty-mark svg { width: 22px; height: 22px; }
.ui-cmd__empty-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--va-text-dim);
    margin: 0;
}
.ui-cmd__empty-hint {
    margin: 0;
    font-family: var(--va-font-mono);
    font-size: 0.75rem;
    color: var(--va-text-muted);
    background-color: var(--va-elevated);
    border: 1px solid var(--va-border);
    border-radius: 6px;
    padding: 3px 9px;
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Footer ──────────────────────────────────────────────────────── */
.ui-cmd__footer {
    display: flex;
    gap: 16px;
    padding: 10px 16px;
    border-block-start: 1px solid var(--va-border);
    background-color: color-mix(in oklab, var(--va-elevated) 60%, transparent);
    font-size: 0.6875rem;
    color: var(--va-text-muted);
    flex-shrink: 0;
    align-items: center;
}

.ui-cmd__hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ui-cmd__footer kbd {
    font-family: var(--va-font-mono);
    font-size: 0.625rem;
    padding: 3px 6px;
    border-radius: 4px;
    background-color: var(--va-card);
    border: 1px solid var(--va-border);
    color: var(--va-text-dim);
    line-height: 1;
    direction: ltr;
    unicode-bidi: isolate;
}

/* ── Mobile adjustments ──────────────────────────────────────────── */
@media (max-width: 639.98px) {
    /* The kbd hint (⌘K) drops off on touch — no hardware keyboard — but
       the placeholder stays visible since the trigger expands and there's
       room to render "Search …" inline. */
    .ui-cmd__trigger-kbd { display: none; }
    .ui-cmd__trigger {
        max-width: 110px;
        padding-inline: 0.75rem;
        justify-content: flex-start;
    }
    /* Expand the trigger to fill the middle of the topbar. Layout order is
       set in layout.css (`.ui-cmd { order: 2 }` on mobile) so the visual
       sequence is [theme] [locale] [search ────] [Org] [Loc]. */
    .ui-cmd {
        flex: 1 1 auto;
        margin-inline: 0;
        min-width: 0;
    }

    /* Full-screen palette on mobile — no margins, no rounded corners,
       fills the viewport so the results list has room to breathe at
       narrow widths. The header's close button is the touch escape route
       (esc-key hint is replaced by an X icon — see .ui-cmd__close). */
    .ui-cmd__overlay {
        padding: 0;
        align-items: stretch;
    }
    .ui-cmd__panel {
        width: 100%;
        max-height: none;
        height: 100dvh;
        border-radius: 0;
        border: 0;
        box-shadow: none;
    }
    .ui-cmd__footer { flex-wrap: wrap; gap: 12px 16px; }
}

/* === Ui/DataGrid/UiDataGrid.razor.css === */
/*
 * UiConfirmDialog — centred modal panel with a tinted icon ring,
 * title + body, and two action buttons. Matches the visual language
 * of UiCommandPalette's modal panel for consistency.
 */

.ui-confirm__overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.ui-confirm__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.ui-confirm__panel {
    position: relative;
    width: min(420px, 100%);
    background-color: var(--va-card);
    border: 1px solid var(--va-border-light);
    border-radius: 14px;
    box-shadow: var(--va-shadow-lg);
    padding: 22px 22px 18px;
    text-align: start;
    animation: ui-confirm-in 180ms cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

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

/* ── Icon ring ───────────────────────────────────────────────────── */
.ui-confirm__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.ui-confirm__icon svg { width: 22px; height: 22px; }

.ui-confirm__panel--default .ui-confirm__icon {
    background-color: color-mix(in oklab, var(--va-info) 16%, transparent);
    color: var(--va-info);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--va-info) 32%, transparent);
}
.ui-confirm__panel--warning .ui-confirm__icon {
    background-color: color-mix(in oklab, var(--va-warning) 16%, transparent);
    color: var(--va-warning);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--va-warning) 32%, transparent);
}
.ui-confirm__panel--danger .ui-confirm__icon {
    background-color: color-mix(in oklab, var(--va-danger) 16%, transparent);
    color: var(--va-danger);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--va-danger) 32%, transparent);
}

/* ── Title + body ────────────────────────────────────────────────── */
.ui-confirm__title {
    font-family: var(--va-font-heading);
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--va-text);
    margin: 0;
    letter-spacing: -0.01em;
}

.ui-confirm__body {
    margin-top: 6px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--va-text-dim);
}

/* ── Actions ─────────────────────────────────────────────────────── */
.ui-confirm__actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 22px;
}

.ui-confirm__btn {
    height: 36px;
    padding: 0 14px;
    border-radius: 9px;
    font-family: inherit;
    font-size: 0.84375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.ui-confirm__btn:disabled {
    cursor: progress;
    opacity: 0.85;
}
.ui-confirm__btn[aria-busy="true"] {
    /* Locks the width so the label-to-spinner swap doesn't reflow the
       row. Without this, the row jumps when the spinner appears. */
    min-width: 84px;
}

/*
 * Confirm-button busy spinner — same three-tone ring used by
 * `.ui-btn__spinner` so async confirms read as the same kind of "in
 * flight" cue as primary action buttons elsewhere in the panel.
 */
.ui-confirm__btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    border: 2px solid color-mix(in oklab, currentColor 22%, transparent);
    border-top-color: currentColor;
    border-right-color: color-mix(in oklab, currentColor 55%, transparent);
    animation: ui-confirm-btn-spin 650ms linear infinite;
    flex-shrink: 0;
}
@keyframes ui-confirm-btn-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .ui-confirm__btn-spinner { animation: none; }
}

.ui-confirm__btn-label { line-height: 1; }

.ui-confirm__btn--ghost {
    background-color: transparent;
    border-color: var(--va-border);
    color: var(--va-text);
}
.ui-confirm__btn--ghost:hover {
    background-color: var(--va-elevated);
    border-color: var(--va-border-light);
}

.ui-confirm__btn--default {
    background-color: var(--va-accent);
    color: var(--va-on-accent);
}
.ui-confirm__btn--default:hover {
    background-color: color-mix(in oklab, var(--va-accent) 88%, white);
}

.ui-confirm__btn--warning {
    background-color: var(--va-warning);
    color: var(--va-on-accent);
}
.ui-confirm__btn--warning:hover {
    background-color: color-mix(in oklab, var(--va-warning) 88%, white);
}

.ui-confirm__btn--danger {
    background-color: var(--va-danger);
    color: #FFF;
}
.ui-confirm__btn--danger:hover {
    background-color: color-mix(in oklab, var(--va-danger) 90%, white);
}

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

/* === Ui/Feedback/UiAlert.razor.css === */
/*
 * UiBottomSheet — iOS-style 90vh sheet sliding up from the bottom.
 *
 * Stacking: backdrop at z-index 60, panel at 61. Beats every dropdown
 * (z 40/50) without relying on a portal. Sheet is fixed to the
 * viewport so the topbar / sidebar / bottom-nav stay underneath.
 *
 * Sheet panel takes 90vh max-height and grows from a slide-in start
 * state. `prefers-reduced-motion` swaps to instant.
 */

.ui-sheet {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none; /* The backdrop + panel set their own pointer-events. */
}

.ui-sheet__backdrop {
    position: absolute;
    inset: 0;
    background-color: color-mix(in oklab, #000 56%, transparent);
    pointer-events: auto;
    animation: ui-sheet-fade-in 200ms ease-out;
}

@keyframes ui-sheet-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ui-sheet__panel {
    position: relative;
    z-index: 61;
    pointer-events: auto;
    background-color: var(--va-card);
    border-start-start-radius: 18px;
    border-start-end-radius: 18px;
    box-shadow: 0 -10px 40px -8px color-mix(in oklab, #000 50%, transparent);
    height: 90vh;
    height: 90dvh;
    max-height: 90vh;
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* iOS notch / home indicator safe area. */
    padding-bottom: env(safe-area-inset-bottom);
    animation: ui-sheet-slide-in 280ms cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes ui-sheet-slide-in {
    from { transform: translateY(100%); }
    to   { transform: translateY(0);    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-sheet__backdrop,
    .ui-sheet__panel { animation: none; }
}

/* ── Header ──────────────────────────────────────────────────────── */
.ui-sheet__header {
    position: relative;
    flex-shrink: 0;
    padding: 22px 16px 12px;
    border-block-end: 1px solid var(--va-border);
    text-align: center;
}

/* The grab handle — visual cue that the sheet can be dragged down. */
.ui-sheet__handle {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 8px;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background-color: var(--va-border-light);
}

.ui-sheet__title {
    margin: 0;
    font-family: var(--va-font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--va-text);
    line-height: 1.3;
    /* leave room for the absolutely-positioned close button */
    padding-inline-end: 32px;
    padding-inline-start: 32px;
}

.ui-sheet__close {
    position: absolute;
    inset-block-start: 14px;
    inset-inline-end: 12px;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background-color: var(--va-elevated);
    border: 1px solid var(--va-border);
    color: var(--va-text-dim);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.ui-sheet__close:hover {
    background-color: var(--va-card);
    border-color: var(--va-accent);
    color: var(--va-text);
}
.ui-sheet__close:focus-visible {
    outline: 2px solid var(--va-accent);
    outline-offset: 2px;
}
.ui-sheet__close svg { width: 14px; height: 14px; }

/* ── Body ────────────────────────────────────────────────────────── */
.ui-sheet__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px 18px;
}

/*
 * Drag-down: the JS module sets `--ui-sheet-drag-y` on the panel
 * during a drag gesture so we can translate without re-running
 * paint on every frame.
 */
.ui-sheet__panel.is-dragging {
    animation: none;
    transition: none;
    transform: translateY(var(--ui-sheet-drag-y, 0));
}
.ui-sheet__panel.is-snapping-back {
    transition: transform 180ms cubic-bezier(0.32, 0.72, 0, 1);
    transform: translateY(0);
}

/* === Ui/Skeletons/UiSkeleton.razor.css === */
/* ═══════════════════════════════════════════════════════════════════
 * UiEditModal styles — ported from VA1 (pages-styles.css) on 2026-06-02.
 * Biosis previously emitted ui-emodal* markup with no matching CSS, so
 * the "Yeni Yükümlü" / edit modal rendered unstyled. These rules live in
 * the RCL component stylesheet (loaded via _content/...). All colour /
 * spacing tokens are the shared --va-* system (see tokens.css), so the
 * VA1 rules map 1:1 — only the accent value differs (Biosis teal var(--va-accent)).
 * ═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
 * UiEditModal — concept-approved tabbed editor modal
 * (Components/Ui/Modals/UiEditModal.razor)
 *
 * Replaces the legacy right-edge slide-over drawer (`dev-slide-panel`).
 *
 * Layout:
 *   ≥1024px  → centred card, side tab rail (180px), sticky footer.
 *   640..1023→ centred card, tabs as a horizontal strip on top.
 *   <640px   → bottom-sheet rising from the bottom edge, top tab strip,
 *              sticky footer above the safe-area inset.
 * ═══════════════════════════════════════════════════════════════════ */
.ui-emodal-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    background-color: color-mix(in oklab, #000 56%, transparent);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 3vw, 32px);
    animation: ui-emodal-fade 180ms ease-out;
}
@keyframes ui-emodal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ui-emodal {
    position: relative;
    width: 100%;
    max-width: 880px;
    height: min(640px, 88vh);
    background-color: var(--va-card);
    border: 1px solid var(--va-border);
    border-radius: 16px;
    box-shadow: var(--va-shadow-lg);
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "head"
        "layout"
        "foot";
    overflow: hidden;
    animation: ui-emodal-in 220ms cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes ui-emodal-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
@media (prefers-reduced-motion: reduce) {
    .ui-emodal-overlay,
    .ui-emodal { animation: none; }
}

/* Header */
.ui-emodal__head {
    grid-area: head;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-block-end: 1px solid var(--va-border);
}
.ui-emodal__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-emodal__icon svg { width: 18px; height: 18px; }
.ui-emodal__title-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}
.ui-emodal__eyebrow {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--va-text-dim);
    font-weight: 600;
    line-height: 1.2;
}
.ui-emodal__title {
    margin: 1px 0 0;
    font-family: var(--va-font-heading);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--va-text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ui-emodal__pill {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.71875rem;
    font-weight: 600;
    flex-shrink: 0;
    background-color: color-mix(in oklab, var(--va-text-dim) 14%, transparent);
    color: var(--va-text);
}
.ui-emodal__pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
}
.ui-emodal__pill--success { background-color: color-mix(in oklab, var(--va-success) 14%, transparent); color: var(--va-success); }
.ui-emodal__pill--warning { background-color: color-mix(in oklab, var(--va-warning) 14%, transparent); color: var(--va-warning); }
.ui-emodal__pill--danger  { background-color: color-mix(in oklab, var(--va-danger)  14%, transparent); color: var(--va-danger);  }
.ui-emodal__pill--info    { background-color: color-mix(in oklab, var(--va-info)    14%, transparent); color: var(--va-info);    }
.ui-emodal__pill--neutral { background-color: color-mix(in oklab, var(--va-text-dim) 14%, transparent); color: var(--va-text); }

.ui-emodal__close {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background-color: var(--va-elevated);
    border: 1px solid var(--va-border);
    color: var(--va-text-dim);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-inline-start: 8px;
    padding: 0;
    transition: color 120ms ease, border-color 120ms ease;
}
.ui-emodal__close:hover { color: var(--va-text); border-color: var(--va-accent); }

/* Layout: side rail + body on desktop, stacked on tablet/mobile */
.ui-emodal__layout {
    grid-area: layout;
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-areas: "rail body";
    overflow: hidden;
    min-height: 0;
}
.ui-emodal__tabs {
    grid-area: rail;
    background-color: color-mix(in oklab, var(--va-elevated) 60%, transparent);
    border-inline-end: 1px solid var(--va-border);
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}
.ui-emodal__tab {
    appearance: none;
    background: transparent;
    border: 0;
    text-align: start;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 9px;
    color: var(--va-text-dim);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    transition: color 120ms ease, background-color 120ms ease;
}
.ui-emodal__tab-icon svg { width: 15px; height: 15px; flex-shrink: 0; display: block; }
.ui-emodal__tab:hover {
    color: var(--va-text);
    background-color: color-mix(in oklab, var(--va-text) 4%, transparent);
}
.ui-emodal__tab.is-active {
    color: var(--va-text);
    background-color: color-mix(in oklab, var(--va-accent) 14%, transparent);
    font-weight: 600;
}
.ui-emodal__tab.is-active::before {
    content: "";
    position: absolute;
    inset-inline-start: -10px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    border-radius: 2px;
    background-color: var(--va-accent);
}
.ui-emodal__tab.is-danger.is-active {
    color: var(--va-danger);
    background-color: color-mix(in oklab, var(--va-danger) 10%, transparent);
}
.ui-emodal__tab.is-danger.is-active::before { background-color: var(--va-danger); }
.ui-emodal__tab-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-emodal__tab-badge {
    font-family: var(--va-font-mono);
    font-size: 0.6875rem;
    padding: 1px 7px;
    border-radius: 999px;
    background-color: color-mix(in oklab, var(--va-text) 10%, transparent);
    color: var(--va-text-dim);
    flex-shrink: 0;
}

/* Body */
.ui-emodal__body {
    grid-area: body;
    overflow-y: auto;
    padding: 20px 22px 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
}
.ui-emodal__error {
    padding: 10px 12px;
    border-radius: 8px;
    background-color: color-mix(in oklab, var(--va-danger) 10%, transparent);
    border: 1px solid color-mix(in oklab, var(--va-danger) 30%, var(--va-border));
    color: var(--va-danger);
    font-size: 0.8125rem;
    font-weight: 500;
}

/* Footer */
.ui-emodal__foot {
    grid-area: foot;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-block-start: 1px solid var(--va-border);
    background-color: color-mix(in oklab, var(--va-card) 92%, transparent);
}

/* ─── Form helpers reused inside UiEditModal tab bodies ─────────── */
.ui-emodal__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ui-emodal__label {
    font-size: 0.71875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--va-text-dim);
}
.ui-emodal__field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}
@media (max-width: 560px) {
    .ui-emodal__field-grid { grid-template-columns: 1fr; }
}
.ui-emodal__segment {
    display: inline-flex;
    background-color: var(--va-elevated);
    border: 1px solid var(--va-border);
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
    align-self: flex-start;
}
.ui-emodal__segment-item {
    flex: 0 0 auto;
    padding: 6px 14px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--va-text-dim);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
}
.ui-emodal__segment-item.is-active {
    background-color: var(--va-card);
    color: var(--va-text);
    box-shadow: 0 1px 2px rgba(0,0,0,0.08), inset 0 0 0 1px var(--va-border-light);
}

.ui-emodal__meta {
    border: 1px solid var(--va-border);
    border-radius: 10px;
    background-color: color-mix(in oklab, var(--va-elevated) 50%, transparent);
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 18px;
    margin: 0;
}
@media (max-width: 480px) {
    .ui-emodal__meta { grid-template-columns: 1fr; }
}
.ui-emodal__meta-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ui-emodal__meta-row dt {
    margin: 0;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--va-text-dim);
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}
.ui-emodal__meta-row dt svg { width: 12px; height: 12px; color: var(--va-accent); flex-shrink: 0; }
.ui-emodal__meta-row dd {
    margin: 0;
    font-size: 0.84375rem;
    color: var(--va-text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Action row — used in Quick actions / Danger tabs */
.ui-emodal__action {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background-color: var(--va-elevated);
    border: 1px solid var(--va-border);
    border-radius: 12px;
    padding: 12px 14px;
    color: var(--va-text);
    font: inherit;
    font-size: 0.84375rem;
    text-align: start;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease;
}
.ui-emodal__action:hover:not(:disabled) {
    border-color: var(--va-accent);
    background-color: color-mix(in oklab, var(--va-accent) 7%, var(--va-elevated));
    transform: translateY(-1px);
}
.ui-emodal__action:active { transform: translateY(0); }
.ui-emodal__action:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.ui-emodal__action-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background-color: color-mix(in oklab, var(--va-accent) 16%, transparent);
    color: var(--va-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ui-emodal__action-icon svg { width: 16px; height: 16px; display: block; }
.ui-emodal__action-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ui-emodal__action-title { font-weight: 600; font-size: 0.84375rem; }
.ui-emodal__action-hint { font-size: 0.75rem; color: var(--va-text-dim); }
.ui-emodal__action-chev { color: var(--va-text-muted); flex-shrink: 0; }
.ui-emodal__action-chev svg { width: 16px; height: 16px; display: block; }
[dir="rtl"] .ui-emodal__action-chev svg { transform: scaleX(-1); }

.ui-emodal__action.is-warn .ui-emodal__action-icon {
    background-color: color-mix(in oklab, var(--va-warning) 16%, transparent);
    color: var(--va-warning);
}
.ui-emodal__action.is-warn:hover:not(:disabled) {
    border-color: var(--va-warning);
    background-color: color-mix(in oklab, var(--va-warning) 7%, var(--va-elevated));
}
.ui-emodal__action.is-danger .ui-emodal__action-icon {
    background-color: color-mix(in oklab, var(--va-danger) 16%, transparent);
    color: var(--va-danger);
}
.ui-emodal__action.is-danger:hover:not(:disabled) {
    border-color: var(--va-danger);
    background-color: color-mix(in oklab, var(--va-danger) 7%, var(--va-elevated));
}

.ui-emodal__danger-zone {
    border-radius: 12px;
    padding: 14px;
    background-color: color-mix(in oklab, var(--va-danger) 6%, transparent);
    border: 1px dashed color-mix(in oklab, var(--va-danger) 45%, transparent);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ui-emodal__danger-zone-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--va-danger);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ui-emodal__danger-zone-head svg { width: 14px; height: 14px; flex-shrink: 0; }
.ui-emodal__danger-zone-hint {
    margin: 0;
    font-size: 0.78125rem;
    color: var(--va-text-dim);
    line-height: 1.5;
}

.ui-emodal__readonly {
    padding: 10px 12px;
    background-color: color-mix(in oklab, var(--va-elevated) 60%, transparent);
    border: 1px solid var(--va-border);
    border-radius: 8px;
    font-size: 0.78125rem;
    color: var(--va-text-dim);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ui-emodal__readonly-row { display: inline-flex; align-items: center; gap: 8px; }
.ui-emodal__readonly-row svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--va-accent); }

/* ── Tablet (640..1023): flip side rail to top tab strip ─────── */
@media (max-width: 1023.98px) {
    .ui-emodal { max-width: 600px; height: min(680px, 92vh); }
    .ui-emodal__layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        grid-template-areas: "rail" "body";
    }
    .ui-emodal__tabs {
        flex-direction: row;
        border-inline-end: 0;
        border-block-end: 1px solid var(--va-border);
        overflow-x: auto;
        overflow-y: hidden;
        padding: 10px 14px;
        gap: 6px;
        /* Hide the scrollbar but keep the strip scrollable — keeps four+
           tabs from forcing an ugly horizontal bar on touch. */
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-snap-type: x proximity;
        /* Soft fade edges so users can see there's more off-screen. */
        -webkit-mask-image: linear-gradient(to right,
            transparent 0,
            black 16px,
            black calc(100% - 16px),
            transparent 100%);
                mask-image: linear-gradient(to right,
            transparent 0,
            black 16px,
            black calc(100% - 16px),
            transparent 100%);
    }
    .ui-emodal__tabs::-webkit-scrollbar { display: none; }
    .ui-emodal__tab { scroll-snap-align: start; flex-shrink: 0; }
    .ui-emodal__tab.is-active::before { display: none; }
    .ui-emodal__tab.is-active {
        box-shadow: inset 0 -2px 0 var(--va-accent);
        border-radius: 8px 8px 0 0;
    }
    .ui-emodal__tab.is-danger.is-active {
        box-shadow: inset 0 -2px 0 var(--va-danger);
    }
}

/* ── Mobile (<640): bottom-sheet ─────────────────────────────── */
@media (max-width: 639.98px) {
    .ui-emodal-overlay {
        align-items: flex-end;
        padding: 0;
    }
    .ui-emodal {
        max-width: 100%;
        width: 100%;
        height: 92vh;
        border-radius: 18px 18px 0 0;
        animation: ui-emodal-up 240ms cubic-bezier(0.32, 0.72, 0, 1);
    }
    .ui-emodal__head { padding: 12px 14px; }
    .ui-emodal__body { padding: 16px 16px 12px; }
    .ui-emodal__foot {
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    }
    .ui-emodal__foot > * { flex: 1 1 0; }
}
@keyframes ui-emodal-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .ui-emodal { animation: none; }
}