/* ════════════════════════════════════════════════════════════
 * ui-buttons.css — Biosis RCL component stilleri
 * Bölümler: UiBrandMark, UiActionButton, UiButton, UiSlider, UiCheckbox, UiThemeToggle
 * (ui-components.css monolitinden bölündü — 2026-06-02)
 * ════════════════════════════════════════════════════════════ */

/*
 * UiBrandMark — colour and rendering hints only. Geometry lives in
 * UiBrandMark.razor; size is driven by the Size parameter.
 *
 * The SVG inherits its tint from `color` (currentColor). Set it on a
 * wrapping element — e.g. `color: var(--va-accent)` — to brand-tint the
 * mark. We clamp shape-rendering to `geometricPrecision` so circle edges
 * stay crisp at small favicon sizes.
 */

.ui-brand-mark {
    display: inline-block;
    flex-shrink: 0;
    shape-rendering: geometricPrecision;
}

/* === Ui/Buttons/UiActionButton.razor.css === */
/*
 * UiActionButton — rich admin-action card. Per-category colour comes
 * from the variant modifier. Layout: icon top-start, title underneath,
 * sub-label small + muted underneath that.
 */

.ui-action {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 4px;
    padding: 14px 16px;
    background-color: var(--va-card);
    border: 1px solid var(--va-border);
    border-radius: 12px;
    color: var(--va-text);
    font-family: inherit;
    cursor: pointer;
    text-align: start;
    transition:
        background-color 140ms ease,
        border-color 140ms ease,
        transform 100ms ease,
        box-shadow 140ms ease;
    min-width: 0;
}
.ui-action:hover:not(:disabled) {
    background-color: var(--va-elevated);
    border-color: var(--va-border-light);
    transform: translateY(-1px);
}
.ui-action:active:not(:disabled) { transform: translateY(0); }
.ui-action:focus-visible {
    outline: 2px solid var(--va-accent);
    outline-offset: 2px;
}
.ui-action:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}
.ui-action--busy { cursor: progress; }
.ui-action--busy:disabled { opacity: 1; }

/* ── Icon corner ─────────────────────────────────────────────────── */
.ui-action__icon {
    grid-row: 1 / span 2;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  padding: 10px;
}
.ui-action__icon svg { width: 18px; height: 18px; }

/* ── Labels ──────────────────────────────────────────────────────── */
.ui-action__title {
    grid-column: 2;
    grid-row: 1;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--va-text);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ui-action__sub {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.6875rem;
    color: var(--va-text-muted);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Per-variant colour ───────────────────────────────────────────── */
.ui-action--default .ui-action__icon {
    background-color: var(--va-elevated);
    color: var(--va-text-dim);
}
.ui-action--default:hover:not(:disabled) .ui-action__icon {
    color: var(--va-text);
}

.ui-action--primary .ui-action__icon {
    background-color: color-mix(in oklab, var(--va-accent) 18%, transparent);
    color: var(--va-accent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--va-accent) 30%, transparent);
}
.ui-action--primary {
    border-color: color-mix(in oklab, var(--va-accent) 30%, var(--va-border));
}
.ui-action--primary:hover:not(:disabled) {
    border-color: color-mix(in oklab, var(--va-accent) 45%, var(--va-border-light));
}

.ui-action--accent .ui-action__icon {
    background-color: color-mix(in oklab, #a855f7 22%, transparent);
    color: #a855f7;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, #a855f7 30%, transparent);
}

.ui-action--warning .ui-action__icon {
    background-color: color-mix(in oklab, var(--va-warning) 18%, transparent);
    color: var(--va-warning);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--va-warning) 30%, transparent);
}

.ui-action--danger .ui-action__icon {
    background-color: color-mix(in oklab, var(--va-danger) 18%, transparent);
    color: var(--va-danger);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--va-danger) 30%, transparent);
}

/* ── Busy spinner (matches the .ui-btn__spinner ring) ───────────── */
.ui-action__spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    border: 2.25px solid color-mix(in oklab, currentColor 22%, transparent);
    border-top-color: currentColor;
    border-right-color: color-mix(in oklab, currentColor 55%, transparent);
    animation: ui-action-spin 650ms linear infinite;
}
@keyframes ui-action-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .ui-action__spinner { animation: none; }
}

/* === Ui/Buttons/UiButton.razor.css === */
/*
 * UiButton — scoped novel styling beyond Tailwind utilities.
 * Tailwind handles colour / size / spacing inline; this file is reserved for
 * the loading spinner and any visual flourish that doesn't fit utility-class
 * vocabulary cleanly.
 */

/*
 * Three-tone ring with a fading tail — reads as motion without the
 * "transparent-top + opaque-rest" border style that looks like a broken
 * pie chart at small sizes.
 *
 *   top   = 100% currentColor    (the leading edge — bright)
 *   right = ~55% currentColor    (the fade)
 *   bottom = ~20% currentColor   (translucent base)
 *   left  = ~20% currentColor    (translucent base)
 *
 * Rotated linearly so the bright edge sweeps around once per cycle.
 */
.ui-btn__spinner {
    display: inline-block;
    width: 1.125rem;            /* 18 px — sized to sit comfortably next to a 14-16px label */
    height: 1.125rem;
    border-radius: 9999px;
    border: 2.25px solid color-mix(in oklab, currentColor 22%, transparent);
    border-top-color: currentColor;
    border-right-color: color-mix(in oklab, currentColor 55%, transparent);
    animation: ui-btn-spin 650ms linear infinite;
    flex-shrink: 0;
    /* Keep transforms on the GPU so the ring stays crisp even on slower devices. */
    will-change: transform;
}

.ui-btn__icon {
    display: inline-flex;
    align-items: center;
}

.ui-btn__label {
    /* Keeps the label on a single line while allowing icons to flow naturally. */
    line-height: 1;
}

@keyframes ui-btn-spin {
    to { transform: rotate(360deg); }
}

/* Reduce-motion: spinner shows but does not rotate. */
@media (prefers-reduced-motion: reduce) {
    .ui-btn__spinner { animation: none; }
}

/* === Ui/Cards/UiCard.razor.css === */
/*
 * UiSlider — themed range input.
 *
 * Browser support note: range inputs need separate WebKit/Firefox
 * pseudo-element rules for thumb + track styling — there's no
 * standard cross-browser shorthand. We restyle both to lean on
 * `--va-accent` (or a per-instance override via `--ui-slider-accent`)
 * so the same control reads as part of the panel UI in every chrome.
 */

.ui-slider {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    --ui-slider-accent: var(--va-accent);
}
.ui-slider.is-disabled { opacity: 0.5; cursor: not-allowed; }

.ui-slider__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ui-slider__label {
    font-size: 0.71875rem;
    font-weight: 600;
    color: var(--va-text-dim);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ui-slider__value {
    font-family: var(--va-font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--va-text);
    min-width: 28px;
    text-align: end;
}

/* ── Reset native chrome ─────────────────────────────────────── */
.ui-slider__input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 22px;
    background: transparent;
    cursor: pointer;
    margin: 0;
    padding: 0;
}
.ui-slider__input:disabled { cursor: not-allowed; }
.ui-slider__input:focus-visible { outline: none; }
.ui-slider__input:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--ui-slider-accent) 25%, transparent);
}
.ui-slider__input:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--ui-slider-accent) 25%, transparent);
}

/* ── Track (Webkit / Blink) ─────────────────────────────────────────
 * Webkit doesn't expose a native progress pseudo-element, so we paint
 * the filled segment with a hard-stop linear-gradient driven by the
 * `--ui-slider-pct` custom property the .razor.cs writes onto the
 * wrapping label. The two colour-stops at the same `pct` value give
 * a crisp boundary instead of a gradient blend. */
.ui-slider__input::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background-image: linear-gradient(
        to right,
        var(--ui-slider-accent) 0%,
        var(--ui-slider-accent) var(--ui-slider-pct, 0%),
        var(--va-elevated) var(--ui-slider-pct, 0%),
        var(--va-elevated) 100%
    );
    border: 1px solid var(--va-border);
}
/* RTL: Webkit flips the thumb position so value=0 sits on the right edge,
 * but the gradient direction is physical and stays `to right` — which paints
 * the filled portion on the wrong side of the thumb. Mirror the gradient
 * `to left` under RTL so the colour fills from the value=0 (right) edge up
 * to the thumb, matching the user's expectation. */
[dir="rtl"] .ui-slider__input::-webkit-slider-runnable-track {
    background-image: linear-gradient(
        to left,
        var(--ui-slider-accent) 0%,
        var(--ui-slider-accent) var(--ui-slider-pct, 0%),
        var(--va-elevated) var(--ui-slider-pct, 0%),
        var(--va-elevated) 100%
    );
}
/* ── Thumb (Webkit / Blink) ─────────────────────────────────── */
.ui-slider__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -7px;
    border-radius: 999px;
    background-color: var(--ui-slider-accent);
    border: 2px solid var(--va-card);
    box-shadow: 0 1px 2px color-mix(in oklab, #000 25%, transparent);
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.ui-slider__input:hover::-webkit-slider-thumb { transform: scale(1.08); }

/* ── Track (Firefox) ────────────────────────────────────────── */
.ui-slider__input::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background-color: var(--va-elevated);
    border: 1px solid var(--va-border);
}
.ui-slider__input::-moz-range-progress {
    height: 4px;
    border-radius: 999px;
    background-color: var(--ui-slider-accent);
}
.ui-slider__input::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background-color: var(--ui-slider-accent);
    border: 2px solid var(--va-card);
    box-shadow: 0 1px 2px color-mix(in oklab, #000 25%, transparent);
    cursor: pointer;
}

/* === Ui/States/UiServiceError.razor.css === */
/*
 * UiCheckbox — shadcn/ui-style checkbox.
 *
 * The native <input> is visually hidden (still focusable + keyboard-
 * navigable) and a styled <span class="ui-checkbox__box"> next to it
 * paints the empty / checked / disabled states. The check icon
 * scales in via transform when checked.
 */

.ui-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    color: var(--va-text);
    font-size: 0.8125rem;
    user-select: none;
}
.ui-checkbox.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Visually-hidden but accessible native input. Standard sr-only
   pattern that keeps it focusable + announceable by screen readers
   while letting our custom box do the painting. */
.ui-checkbox__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Custom box */
.ui-checkbox__box {
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 4px;
    border: 1.5px solid var(--va-border-light);
    background-color: var(--va-elevated);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.ui-checkbox:hover:not(.is-disabled) .ui-checkbox__box {
    border-color: var(--va-accent);
}
.ui-checkbox.is-checked .ui-checkbox__box {
    background-color: var(--va-accent);
    border-color: var(--va-accent);
}
.ui-checkbox__input:focus-visible + .ui-checkbox__box {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--va-accent) 28%, transparent);
}

/* Check icon — hidden when unchecked, scales in when checked. */
.ui-checkbox__check {
    width: 12px;
    height: 12px;
    color: var(--va-on-accent); /* contrasts the accent fill in both light + dark */
    transform: scale(0);
    transition: transform 140ms cubic-bezier(0.32, 0.72, 0, 1);
}
.ui-checkbox.is-checked .ui-checkbox__check {
    transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
    .ui-checkbox__check { transition: none; }
}

.ui-checkbox__label { line-height: 1.3; }

/* === Ui/Toggles/UiThemeToggle.razor.css === */
/*
 * UiThemeToggle — dropdown picker visually paired with UiLocalePicker.
 * Same surface treatment, same dropdown geometry, same animation.
 *
 * The dropdown opens below the trigger and aligns to the inline-end edge
 * so it stays inside the viewport in both LTR and RTL.
 */

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

/* ── Trigger ── */

.ui-theme-toggle__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    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;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background-color 150ms ease, border-color 150ms ease, transform 120ms ease;
}

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

.ui-theme-toggle__trigger:active {
    transform: scale(0.97);
}

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

.ui-theme-toggle__current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    color: var(--va-text);
}

.ui-theme-toggle__current svg {
    width: 100%;
    height: 100%;
}

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

.ui-theme-toggle.is-open .ui-theme-toggle__chevron {
    transform: rotate(180deg);
}

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

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

/* ── Menu ── */

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

    min-width: 11rem;
    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-theme-toggle-in 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ui-theme-toggle__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-theme-toggle__option:hover,
.ui-theme-toggle__option:focus-visible {
    background-color: var(--va-elevated);
    outline: none;
}

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

.ui-theme-toggle__option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    color: var(--va-text-dim);
    flex-shrink: 0;
}

.ui-theme-toggle__option-icon svg {
    width: 100%;
    height: 100%;
}

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

.ui-theme-toggle__option-label {
    flex: 1 1 auto;
    line-height: 1.25;
}

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

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

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

/* Same flip as `.ui-locale-picker__menu` — on mobile the theme trigger
   sits at the inline-start of the topbar, so the popover must extend
   inline-end (not inline-start) to stay on-screen. Scoped to `.topbar`
   so the auth page (trigger on the right) keeps the default end-anchor
   and the menu stays inside the viewport. */
@media (max-width: 639.98px) {
    .topbar .ui-theme-toggle__menu {
        inset-inline-end: auto;
        inset-inline-start: 0;
    }
    .ui-theme-toggle__menu {
        max-width: calc(100vw - 1rem);
    }
}

/* === Ui/Selects/UiMultiSelect (de-scoped: lives global) === */