/* components.css — Dashboard UI components & widgets (single file)
 * Policy: add all new component/widget CSS here. Do not add separate assets/css/<name>.css for UI components.
 */

/* ═══ button.css ═══════════════════════════════════════════════════════ */

/*
 * button.css — Button atomic component
 * Variants: primary, outline, ghost | Sizes: sm, md (default), lg
 * ─────────────────────────────────────────────────────────── */

/* ─── 1. Component-scoped variables ────────────────────────── */

.button {
    --btn-height: var(--space-10);
    --btn-padding-x: var(--space-5);
    --btn-font-size: var(--text-sm);
    --btn-font-weight: var(--font-medium);
    --btn-radius: var(--radius-lg);
    --btn-gap: var(--space-2);
    --btn-transition:
        background-color var(--duration-150) var(--ease-default),
        border-color var(--duration-150) var(--ease-default),
        color var(--duration-150) var(--ease-default),
        box-shadow var(--duration-150) var(--ease-default),
        opacity var(--duration-150) var(--ease-default);
}

/* ─── 2. Base block ─────────────────────────────────────────── */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    height: var(--btn-height);
    padding-inline: var(--btn-padding-x);
    font-family: var(--font-sans);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: var(--leading-none);
    border-radius: var(--btn-radius);
    border: 0.0625rem solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
    transition: var(--btn-transition);
    position: relative;
    overflow: hidden;
}

/* ─── 3. Elements ───────────────────────────────────────────── */

.button__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ─── 4. Modifiers — visual variants ───────────────────────── */

.button--primary {
    background-color: var(--primary);
    color: var(--text-on-primary);
    border-color: var(--primary);
}
.button--primary:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}
.button--primary:active {
    background-color: var(--primary-active);
    border-color: var(--primary-active);
}

.button--outline {
    background-color: transparent;
    color: var(--text-primary);
    border-color: var(--border-strong);
}
.button--outline:hover {
    background-color: var(--bg-muted);
    border-color: var(--border-focus);
    color: var(--primary);
}

.button--ghost {
    background-color: transparent;
    color: var(--text-secondary);
    border-color: transparent;
}
.button--ghost:hover {
    background-color: var(--bg-muted);
    color: var(--text-primary);
}

.button--danger {
    background-color: var(--danger);
    color: var(--text-on-primary);
    border-color: var(--danger);
}
.button--danger:hover {
    opacity: 0.9;
}

/* ─── 4b. Modifiers — sizes ─────────────────────────────────── */

.button--sm {
    --btn-height: var(--space-8);
    --btn-padding-x: var(--space-3);
    --btn-font-size: var(--text-xs);
    --btn-radius: var(--radius-md);
}

.button--lg {
    --btn-height: var(--space-12);
    --btn-padding-x: var(--space-6);
    --btn-font-size: var(--text-base);
}

.button--icon-only {
    --btn-padding-x: 0;
    width: var(--btn-height);
}

.button--full {
    width: 100%;
}

/* Alias — sandbox controls use button--full-width */
.button--full-width {
    width: 100%;
}

/* ─── 5. States ─────────────────────────────────────────────── */

.button:focus-visible {
    outline: 0.125rem solid var(--border-focus);
    outline-offset: 0.125rem;
}

.button:disabled,
.button.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.button.is-loading {
    color: transparent;
    pointer-events: none;
}

.button.is-loading::after {
    content: "";
    position: absolute;
    width: var(--space-4);
    height: var(--space-4);
    border: 0.125rem solid currentColor;
    border-block-start-color: transparent;
    border-radius: var(--radius-full);
    animation: btn-spin 0.6s linear infinite;
    color: var(--text-on-primary);
}

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

/* ═══ badge.css ═══════════════════════════════════════════════════════ */

/*
 * badge.css — Badge atomic component
 * Small status/label indicators
 * ─────────────────────────────────────────────────────────── */

.badge {
    --badge-radius: var(--radius-full);
    --badge-font-size: var(--text-xs);
    --badge-font-weight: var(--font-semibold);
    --badge-padding-x: var(--space-2);
    --badge-padding-y: var(--space-1);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--badge-padding-y) var(--badge-padding-x);
    font-family: var(--font-sans);
    font-size: var(--badge-font-size);
    font-weight: var(--badge-font-weight);
    line-height: var(--leading-none);
    border-radius: var(--badge-radius);
    white-space: nowrap;
    border: 0.0625rem solid transparent;
}

/* ─── Modifiers — color variants ────────────────────────────── */

.badge--default {
    background-color: var(--bg-muted);
    color: var(--text-secondary);
    border-color: var(--border-default);
}

.badge--primary {
    background-color: var(--primary-muted);
    color: var(--primary);
}

.badge--success {
    background-color: var(--success-bg);
    color: var(--success-text);
}

.badge--warning {
    background-color: var(--warning-bg);
    color: var(--warning-text);
}

.badge--danger {
    background-color: var(--danger-bg);
    color: var(--danger-text);
}

.badge--info {
    background-color: var(--info-bg);
    color: var(--info-text);
}

/* ─── Modifiers — sizes ─────────────────────────────────────── */

.badge--sm {
    --badge-font-size: 0.65rem;
    --badge-padding-x: var(--space-1);
    --badge-padding-y: 0.125rem;
}

.badge--lg {
    --badge-font-size: var(--text-sm);
    --badge-padding-x: var(--space-3);
    --badge-padding-y: var(--space-2);
    --badge-radius: var(--radius-md);
}

/* ─── Modifiers — outline style ─────────────────────────────── */

.badge--outline {
    background-color: transparent;
    border-color: currentColor;
}

/* ═══ card.css ═══════════════════════════════════════════════════════ */

/*
 * card.css — Card atomic component
 * Generic surface container with header / body / footer sub-elements
 * ─────────────────────────────────────────────────────────── */

.card {
    --card-padding: var(--space-6);
    --card-radius: var(--radius-2xl);
}

.card {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-surface);
    border: 0.0625rem solid var(--border-default);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition:
        box-shadow var(--duration-200) var(--ease-default),
        border-color var(--duration-200) var(--ease-default);
}

/* ─── Elements ──────────────────────────────────────────────── */

.card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--card-padding);
    border-block-end: 0.0625rem solid var(--border-default);
    flex-shrink: 0;
}

.card__title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
}

.card__description,
.card__subtitle {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
    margin-block-start: var(--space-1);
}

.card__body {
    padding: var(--card-padding);
    flex: 1;
}

.card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--card-padding);
    border-block-start: 0.0625rem solid var(--border-default);
    background-color: var(--bg-muted);
    flex-shrink: 0;
}

/* ─── Modifiers ─────────────────────────────────────────────── */

.card--elevated {
    box-shadow: var(--shadow-lg);
}
.card--flat {
    box-shadow: none;
}
.card--compact {
    --card-padding: var(--space-4);
}

.card:hover {
    box-shadow: var(--shadow-md);
}
.card--elevated:hover {
    box-shadow: var(--shadow-xl);
}

.card:focus-visible {
    outline: 0.125rem solid var(--border-focus);
    outline-offset: 0.125rem;
}

/* ═══ input.css ═══════════════════════════════════════════════════════ */

/*
 * input.css — Input, Textarea, Select atomic components
 * ─────────────────────────────────────────────────────────── */

.input {
    --input-height: var(--space-10);
    --input-padding-x: var(--space-4);
    --input-radius: var(--radius-lg);
    --input-font-size: var(--text-sm);
    --input-border: var(--border-default);
}

.input {
    display: block;
    width: 100%;
    height: var(--input-height);
    padding-inline: var(--input-padding-x);
    font-family: var(--font-sans);
    font-size: var(--input-font-size);
    color: var(--text-primary);
    background-color: var(--bg-surface);
    border: 0.0625rem solid var(--input-border);
    border-radius: var(--input-radius);
    transition:
        border-color var(--duration-150) var(--ease-default),
        background-color var(--duration-150) var(--ease-default),
        box-shadow var(--duration-150) var(--ease-default);
}

.input::placeholder {
    color: var(--text-muted);
}

.input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 0.1875rem var(--primary-subtle);
}

.input:disabled,
.input.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--bg-muted);
}

.input.is-error,
.input--error {
    border-color: var(--danger);
}
.input.is-success {
    border-color: var(--success);
}

/* ─── Modifiers — sizes ─────────────────────────────────────── */

.input--sm {
    --input-height: var(--space-8);
    --input-font-size: var(--text-xs);
}
.input--lg {
    --input-height: var(--space-12);
    --input-font-size: var(--text-base);
}

/* ─── Textarea override ─────────────────────────────────────── */

textarea.input,
.input.input--textarea {
    height: auto;
    min-height: 6.25rem;
    padding-block: var(--space-3);
    resize: vertical;
}

/* ─── Form field wrapper ─────────────────────────────────────── */

.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-field__label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
}

.form-field__label.is-required::after {
    content: " *";
    color: var(--danger);
}

.form-field__hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.form-field__error {
    font-size: var(--text-xs);
    color: var(--danger);
}

.form-field__message {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--danger);
}

.form-field__message svg[data-lucide] {
    flex-shrink: 0;
    margin-top: 0.0625rem;
}

.form-field--error .input {
    border-color: var(--danger);
}

/* JS-driven validation states (set by form.js) */
.form-field.is-error .input {
    border-color: var(--danger);
    box-shadow: 0 0 0 0.1875rem var(--danger-bg);
}

.form-field.is-valid .input {
    border-color: var(--success);
    box-shadow: 0 0 0 0.1875rem var(--success-bg);
}

.form-field__error {
    display: block;
    font-size: var(--text-xs);
    color: var(--danger);
    margin-block-start: var(--space-1);
}

/* Icon inside field row (password visibility, etc.)
 * Wrap input + .form-field__icon-right in .form-field__control so the icon
 * is centred on the input only (not the whole .form-field including label / errors). */
.form-field--icon-right {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-field--icon-right .form-field__control {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}

.form-field--icon-right .form-field__control .input {
    width: 100%;
    padding-inline-end: var(--space-10);
}

.form-field--icon-right .form-field__control .form-field__icon-right {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: var(--space-3);
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    pointer-events: none;
}

/* Password visibility toggle (wired by form.js) */
.form-field--icon-right .form-field__control .form-field__icon-right[role="button"] {
    pointer-events: auto;
    cursor: pointer;
    border-radius: var(--radius-md);
}

.form-field--icon-right .form-field__control .form-field__icon-right[role="button"]:focus-visible {
    outline: 0.125rem solid var(--border-focus);
    outline-offset: 0.125rem;
}

/* Search row: icon + input inline */
.form-field--icon-left {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-2);
}

.form-field--icon-left .form-field__icon-left {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.form-field--icon-left .input {
    min-width: 0;
}

/* ═══ modal.css ═══════════════════════════════════════════════════════ */

/*
 * modal.css — Modal dialog component
 * ─────────────────────────────────────────────────────────── */

/* ─── Backdrop ──────────────────────────────────────────────── */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: var(--bg-overlay);
    z-index: var(--z-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-300) var(--ease-default);
}

.modal-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* ─── Modal dialog ──────────────────────────────────────────── */

.modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    pointer-events: none;
    opacity: 0;
    transform: scale(0.96) translateY(var(--space-2));
    transition:
        opacity var(--duration-200) var(--ease-default),
        transform var(--duration-200) var(--ease-out);
}

.modal.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) translateY(0);
}

.modal__backdrop {
    position: absolute;
    inset: 0;
    background-color: var(--bg-overlay);
    z-index: 0;
}

.modal__dialog,
.modal__panel {
    position: relative;
    z-index: 1;
    background-color: var(--bg-surface);
    border: 0.0625rem solid var(--border-default);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    width: 100%;
    max-width: 31.25rem;
    max-height: calc(100dvh - var(--space-8));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ─── Elements ──────────────────────────────────────────────── */

.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-6);
    border-block-end: 0.0625rem solid var(--border-default);
    flex-shrink: 0;
}

.modal__title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
}

.modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    transition:
        background-color var(--duration-150) var(--ease-default),
        color var(--duration-150) var(--ease-default);
}

.modal__close:hover {
    background-color: var(--bg-muted);
    color: var(--text-primary);
}

.modal__body {
    padding: var(--space-6);
    overflow-y: auto;
    flex: 1;
}

.modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-block-start: 0.0625rem solid var(--border-default);
    background-color: var(--bg-muted);
    flex-shrink: 0;
}

/* ─── Size modifiers ────────────────────────────────────────── */

.modal--sm .modal__dialog,
.modal--sm .modal__panel {
    max-width: 22.5rem;
}

.modal--lg .modal__dialog,
.modal--lg .modal__panel {
    max-width: 45rem;
}

.modal--xl .modal__dialog,
.modal--xl .modal__panel {
    max-width: 60rem;
}

/* ─── When body has open modal ──────────────────────────────── */

body.has-modal-open {
    overflow: hidden;
}

/* ═══ dropdown.css ═══════════════════════════════════════════════════════ */

/*
 * dropdown.css — Dropdown menu component
 * ───────────────────────────────────────────────────────────
 *
 * Placement (wrapper .dropdown + .dropdown__menu):
 *   Default (no modifier)     — below trigger, inline-end aligned (LTR: flush right).
 *                             Typical for triggers at the end of a row (toolbar, compact actions).
 *   .dropdown--menu-start     — below trigger, inline-start aligned (LTR: left).
 *   .dropdown--menu-top       — above trigger; pair with --menu-start for top-left anchor.
 *
 * Detached menus (body-fixed, header): set data-dropdown-placement on trigger:
 *   bottom-end | bottom-start  (default: bottom-end)
 */

.dropdown {
    --dropdown-radius: var(--radius-xl);
    --dropdown-width: 12.5rem;
}

.dropdown {
    position: relative;
    display: inline-block;
}

/* ─── Base menu (below + inline-end — default) ───────────────── */

.dropdown__menu {
    position: absolute;
    inset-block-start: calc(100% + var(--space-2));
    inset-block-end: auto;
    inset-inline-start: auto;
    inset-inline-end: 0;
    min-width: var(--dropdown-width);
    background-color: var(--bg-surface);
    border: 0.0625rem solid var(--border-default);
    border-radius: var(--dropdown-radius);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
    overflow: hidden;
    opacity: 0;
    transform: scale(0.97) translateY(-0.25rem);
    transform-origin: top right;
    pointer-events: none;
    transition:
        opacity var(--duration-150) var(--ease-default),
        transform var(--duration-150) var(--ease-out);
}

/* Open state on the menu itself (wrapper + detached body-fixed menus) */
.dropdown__menu.is-open {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

/* Below trigger, inline-start (LTR: left-aligned under trigger) */
.dropdown--menu-start .dropdown__menu {
    inset-inline-start: 0;
    inset-inline-end: auto;
    transform-origin: top left;
}

/* Explicit end alignment (same as default — useful for clarity in markup) */
.dropdown--menu-end .dropdown__menu {
    inset-inline-start: auto;
    inset-inline-end: 0;
    transform-origin: top right;
}

/* Above trigger */
.dropdown--menu-top .dropdown__menu {
    inset-block-start: auto;
    inset-block-end: calc(100% + var(--space-2));
    transform: scale(0.97) translateY(0.25rem);
    transform-origin: bottom right;
}

.dropdown--menu-top .dropdown__menu.is-open {
    transform: scale(1) translateY(0);
}

.dropdown--menu-top.dropdown--menu-start .dropdown__menu {
    transform-origin: bottom left;
}

.dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    color: var(--text-primary);
    background-color: transparent;
    border: none;
    cursor: pointer;
    text-align: start;
    transition: background-color var(--duration-100) var(--ease-default);
}

.dropdown__item:hover {
    background-color: var(--bg-muted);
}
.dropdown__item:focus-visible {
    outline: none;
    background-color: var(--bg-muted);
}

.dropdown__item--danger {
    color: var(--danger-text);
}
.dropdown__item--danger:hover {
    background-color: var(--danger-bg);
}

.dropdown__divider {
    border: none;
    border-block-start: 0.0625rem solid var(--border-default);
    margin-block: var(--space-1);
}

.dropdown__label {
    display: block;
    padding: var(--space-2) var(--space-4) var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

/* Detached menu (topnav) — position vars set by dropdown.js */
.dropdown__menu--detached {
    position: fixed;
    z-index: var(--z-dropdown);
    min-width: var(--dropdown-width);
    margin: 0;
}

.dropdown__menu--detached.dropdown__menu--detached-bottom-end {
    inset-block-start: var(--_top, auto);
    inset-block-end: auto;
    inset-inline-end: var(--_right, 0);
    inset-inline-start: auto;
}

.dropdown__menu--detached.dropdown__menu--detached-bottom-start {
    inset-block-start: var(--_top, auto);
    inset-block-end: auto;
    inset-inline-start: var(--_left, 0);
    inset-inline-end: auto;
}

/* ═══ tooltip.css ═══════════════════════════════════════════════════════ */

/*
 * tooltip.css — Tooltip component
 * Shown on :hover and :focus-visible of [data-tooltip] elements
 * ─────────────────────────────────────────────────────────── */

[data-tooltip] {
    position: relative;
}

/* Structured tooltips use .tooltip__content — do not mix with attribute pseudo-bubbles */
[data-tooltip]:has(.tooltip__content)::before,
[data-tooltip]:has(.tooltip__content)::after {
    content: none;
    display: none;
}

[data-tooltip]::before,
[data-tooltip]::after {
    position: absolute;
    z-index: var(--z-tooltip);
    pointer-events: none;
    opacity: 0;
    transition:
        opacity var(--duration-150) var(--ease-default),
        transform var(--duration-150) var(--ease-out);
}

/* ─── Tooltip bubble ────────────────────────────────────────── */

[data-tooltip]::before {
    content: attr(data-tooltip);
    inset-block-end: calc(100% + var(--space-2));
    inset-inline-start: 50%;
    transform: translateX(-50%) translateY(0.25rem);
    background-color: var(--bg-inverse);
    color: var(--text-inverse);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    white-space: nowrap;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

/* ─── Tooltip arrow ─────────────────────────────────────────── */

[data-tooltip]::after {
    content: "";
    inset-block-end: calc(100% + var(--space-1));
    inset-inline-start: 50%;
    transform: translateX(-50%) translateY(0.25rem);
    border: 0.25rem solid transparent;
    border-block-start-color: var(--bg-inverse);
}

/* ─── Show on hover / focus ─────────────────────────────────── */

[data-tooltip]:hover::before,
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::before,
[data-tooltip]:focus-visible::after {
    opacity: 1;
}

[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
    transform: translateX(-50%) translateY(0);
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    transform: translateX(-50%) translateY(0);
}

/* ─── Dark mode override ────────────────────────────────────── */

[data-theme="dark"] [data-tooltip]::before {
    background-color: var(--bg-inverse-muted);
}

[data-theme="dark"] [data-tooltip]::after {
    border-block-start-color: var(--bg-inverse-muted);
}

/* ─── Structured tooltip (.tooltip + child content) — sandbox / demos ─ */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip__content {
    position: absolute;
    z-index: var(--z-tooltip);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    white-space: nowrap;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    background-color: var(--bg-inverse);
    color: var(--text-inverse);
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-150) var(--ease-default);
}

[data-theme="dark"] .tooltip__content {
    background-color: var(--bg-inverse-muted);
}

.tooltip--top .tooltip__content {
    inset-block-end: calc(100% + var(--space-2));
    inset-inline-start: 50%;
    transform: translateX(-50%);
}

.tooltip--bottom .tooltip__content {
    inset-block-start: calc(100% + var(--space-2));
    inset-inline-start: 50%;
    transform: translateX(-50%);
}

.tooltip--right .tooltip__content {
    inset-inline-start: calc(100% + var(--space-2));
    inset-block-start: 50%;
    transform: translateY(-50%);
}

.tooltip--left .tooltip__content {
    inset-inline-end: calc(100% + var(--space-2));
    inset-block-start: 50%;
    transform: translateY(-50%);
}

.tooltip.is-visible .tooltip__content {
    opacity: 1;
}

/* ═══ table.css ═══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   DATA TABLE — BEM component
   Provides: toolbar, scrollable table, avatar cells, actions, pagination
   ══════════════════════════════════════════════════════════════════ */

/* ─── Wrapper ───────────────────────────────────────────────────── */
.data-table {
    width: 100%;
    min-width: 0;
    background: var(--bg-surface);
    border: 0.0625rem solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/*
 * ─── How to show / hide borders ─────────────────────────────────
 *
 * DEFAULT (class="data-table" only):
 *   Outer card border + toolbar rule + th/td grid lines (see .data-table__th / .data-table__td).
 *
 * HTML modifiers (same element as .data-table):
 *   data-table--plain       → removes only the outer wrapper border.
 *   data-table--borderless  → removes outer border + toolbar/th/td inner lines.
 *
 * To remove borders globally via CSS (not recommended — prefer --borderless):
 *   1) Cell grid: delete or comment the border-* rules under
 *      ".data-table__td" and ".data-table__th" (and "tr:last-child .data-table__td").
 *   2) Outer card: remove border from ".data-table" or add a permanent --plain rule.
 *   3) Modifier block: delete ".data-table--plain" / ".data-table--borderless" rules if unused.
 *
 * Body cell borders use var(--border-subtle) — token lives in assets/css/variables.css.
 */
.data-table--plain {
    border: none;
}

.data-table--borderless {
    border: none;
}

.data-table--borderless .data-table__toolbar {
    border-bottom: none;
}

.data-table--borderless .data-table__th {
    border-bottom: none;
    border-inline-end: none;
}

.data-table--borderless .data-table__tbody .data-table__td {
    border-bottom: none;
    border-inline-end: none;
}

/* ─── Toolbar ───────────────────────────────────────────────────── */
.data-table__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 0.0625rem solid var(--border-default);
    flex-wrap: wrap;
}

.data-table__toolbar-title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
}

.data-table__toolbar-actions {
    display: flex;
    align-items: center;
    position: relative;
    gap: var(--space-2);
}

.data-table__filter-panel {
    position: absolute;
    inset-block-start: calc(100% + var(--space-2));
    inset-inline-end: 0;
    z-index: 10;
    min-width: 10rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 0.0625rem solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-md);
}

.data-table__filter-panel[hidden] {
    display: none;
}

.data-table__filter-title {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
}

.data-table__filter-option {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.data-table__filter-option input[type="checkbox"] {
    accent-color: var(--primary);
}

.data-table__search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 0.0625rem solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-muted);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    min-width: 10.5rem;
}

.data-table__search-icon {
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.data-table__search-input {
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: var(--text-sm);
    outline: none;
    width: 100%;
}

.data-table__search-input::placeholder {
    color: var(--text-tertiary);
}

/* ─── Scroll Wrapper ────────────────────────────────────────────── */
.data-table__scroll {
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ─── Table ─────────────────────────────────────────────────────── */
.data-table__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

/* ─── Head ──────────────────────────────────────────────────────── */
.data-table__thead {
    background: var(--bg-muted);
}

.data-table__th {
    padding: var(--space-3) var(--space-4);
    text-align: start;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    border-bottom: 0.0625rem solid var(--border-default);
    border-inline-end: 0.0625rem solid var(--border-default);
}

.data-table__th:last-child {
    border-inline-end: none;
}

.data-table__th--right {
    text-align: end;
}
.data-table__th--center {
    text-align: center;
}

/* ─── Body rows / cells ───────────────────────────────────────────
   Row borders on <tr> are unreliable with border-collapse: collapse;
   paint dividers on <td> instead. */

.data-table__tbody tr {
    transition: background-color var(--duration-fast) var(--ease-out);
}

.data-table__tbody tr:hover {
    background: var(--bg-muted);
}

.data-table__td {
    padding: var(--space-3) var(--space-4);
    color: var(--text-primary);
    vertical-align: middle;
    border-bottom: 0.0625rem solid var(--border-subtle);
    border-inline-end: 0.0625rem solid var(--border-subtle);
    white-space: nowrap;
}

.data-table__td:last-child {
    border-inline-end: none;
}

.data-table__tbody tr:last-child .data-table__td {
    border-bottom: none;
}

.data-table__td--right {
    text-align: end;
}
.data-table__td--center {
    text-align: center;
}
.data-table__td--muted {
    color: var(--text-secondary);
    white-space: nowrap;
}
.data-table__td--mono {
    font-variant-numeric: tabular-nums;
}

/* ─── Cell Sub-Elements ─────────────────────────────────────────── */
.data-table__cell-label {
    font-weight: var(--font-medium);
    color: var(--text-primary);
    white-space: nowrap;
}

.data-table__cell-sub {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: 0.125rem;
    white-space: nowrap;
}

/* ─── Avatar Cell ───────────────────────────────────────────────── */
.data-table__avatar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.data-table__avatar-img {
    width: var(--space-8);
    height: var(--space-8);
    border-radius: var(--radius-full);
    background: var(--primary-muted);
    color: var(--primary-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    flex-shrink: 0;
    overflow: hidden;
}

.data-table__avatar-img--success {
    background: var(--success-bg);
    color: var(--success-text);
}
.data-table__avatar-img--warning {
    background: var(--warning-bg);
    color: var(--warning-text);
}
.data-table__avatar-img--danger {
    background: var(--danger-bg);
    color: var(--danger-text);
}
.data-table__avatar-img--info {
    background: var(--info-bg);
    color: var(--info-text);
}

/* ─── Actions Cell ──────────────────────────────────────────────── */
.data-table__actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    justify-content: flex-end;
}

/* ─── Pagination ────────────────────────────────────────────────── */
.data-table__pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-top: 0.0625rem solid var(--border-default);
    flex-wrap: wrap;
    gap: var(--space-2);
}

.data-table__pagination-info {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.data-table__pagination-controls {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* ─── Empty State ───────────────────────────────────────────────── */
.data-table__empty {
    padding: var(--space-12) var(--space-4);
    text-align: center;
}

.data-table__empty-icon {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-3);
    color: var(--text-tertiary);
}

.data-table__empty-title {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--text-primary);
    margin: 0 0 var(--space-1);
}

.data-table__empty-desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
}

/* ─── Empty toggle pattern (data-table.js) ─────────────────────────── */
.data-table__content {
    display: block;
}

.data-table__empty-wrap {
    display: none;
    border-top: 0.0625rem solid var(--border-default);
}

.data-table.is-empty .data-table__content {
    display: none;
}

.data-table.is-empty .data-table__empty-wrap {
    display: block;
}

/* ═══ stat-card.css ═══════════════════════════════════════════════════════ */

/*
 * stat-card.css — KPI Stat Card widget
 * Displays a single metric with trend indicator
 * ─────────────────────────────────────────────────────────── */

/* ─── 1. Component-scoped variables ────────────────────────── */

.stat-card {
    --stat-card-padding: var(--space-6);
    --stat-card-radius: var(--radius-2xl);
    --stat-card-icon-size: var(--space-10);
    --stat-card-icon-radius: var(--radius-xl);
    container-type: inline-size;
    container-name: stat-card;
}

/* ─── 2. Base block ─────────────────────────────────────────── */

.stat-card {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--stat-card-padding);
    background-color: var(--bg-surface);
    border: 0.0625rem solid var(--border-default);
    border-radius: var(--stat-card-radius);
    box-shadow: var(--shadow-sm);
    transition:
        box-shadow var(--duration-200) var(--ease-default),
        border-color var(--duration-200) var(--ease-default);
}

.stat-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}

/* ─── 3. Elements ───────────────────────────────────────────── */

.stat-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stat-card__label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.stat-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--stat-card-icon-size);
    height: var(--stat-card-icon-size);
    border-radius: var(--stat-card-icon-radius);
    flex-shrink: 0;
}

.stat-card__body {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
}

/*
 * Stack when the stat-card *content box* is narrow. @container uses content-box, not border-box:
 * with padding var(--space-6) × 2 + border, outer width ≈ content + 3rem + 0.125rem (~330px when content = 17.5rem).
 * 14.375rem content ≈ 280px outer at 16px root (keep literal here; no var() in the condition).
 */
@container stat-card (max-width: 14.375rem) {
    .stat-card__body {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: var(--space-2);
    }
}

.stat-card__value {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-none);
}

.stat-card__trend {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
}

.stat-card__footnote {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-block-start: auto;
}

/* ─── 4. Modifiers — icon color variants ───────────────────── */

.stat-card__icon--primary {
    background-color: var(--primary-muted);
    color: var(--primary-text);
}

.stat-card__icon--success {
    background-color: var(--success-bg);
    color: var(--success-text);
}

.stat-card__icon--warning {
    background-color: var(--warning-bg);
    color: var(--warning-text);
}

.stat-card__icon--danger {
    background-color: var(--danger-bg);
    color: var(--danger-text);
}

.stat-card__icon--info {
    background-color: var(--info-bg);
    color: var(--info-text);
}

/* ─── 4b. Trend direction variants ─────────────────────────── */

.stat-card__trend--up {
    background-color: var(--success-bg);
    color: var(--success-text);
}

.stat-card__trend--down {
    background-color: var(--danger-bg);
    color: var(--danger-text);
}

.stat-card__trend--neutral {
    background-color: var(--bg-muted);
    color: var(--text-muted);
}

/* ─── 5. States ─────────────────────────────────────────────── */

.stat-card:focus-visible {
    outline: 0.125rem solid var(--border-focus);
    outline-offset: 0.125rem;
}

.stat-card.is-loading .stat-card__value,
.stat-card.is-loading .stat-card__trend,
.stat-card.is-loading .stat-card__footnote {
    background-color: var(--bg-subtle);
    color: transparent;
    border-radius: var(--radius-md);
    animation: stat-card-pulse 1.5s ease-in-out infinite;
}

@keyframes stat-card-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ═══ metric-chart.css ═══════════════════════════════════════════════════════ */

/*
 * metric-chart.css — Metric Chart widget
 * Contains SVG-based chart canvas + header/footer chrome
 * ─────────────────────────────────────────────────────────── */

/* ─── 1. Component-scoped variables ────────────────────────── */

.metric-chart {
    --chart-padding: var(--space-6);
    --chart-radius: var(--radius-2xl);
}

/* ─── 2. Base block ─────────────────────────────────────────── */

.metric-chart {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--chart-padding);
    background-color: var(--bg-surface);
    border: 0.0625rem solid var(--border-default);
    border-radius: var(--chart-radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* ─── 3. Elements ───────────────────────────────────────────── */

.metric-chart__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.metric-chart__title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
}

.metric-chart__subtitle {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-block-start: var(--space-1);
    margin: 0;
    margin-block-start: var(--space-1);
}

.metric-chart__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.metric-chart__canvas {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-height: 0;
}

.metric-chart__svg {
    width: 100%;
    flex: 1;
    min-height: 8.75rem;
    overflow: visible;
}

.metric-chart__x-labels {
    display: flex;
    justify-content: space-around;
    font-size: var(--text-xs);
    color: var(--text-muted);
    padding-inline: var(--space-2);
}

.metric-chart__x-labels span {
    text-align: center;
    min-width: 0;
}

.metric-chart__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-block-start: var(--space-3);
    border-block-start: 0.0625rem solid var(--border-default);
}

.metric-chart__legend {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.metric-chart__legend-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.metric-chart__legend--primary .metric-chart__legend-dot {
    background-color: var(--primary);
}

.metric-chart__total {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.metric-chart__total strong {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
}

/* ═══ activity-feed.css ═══════════════════════════════════════════════════════ */

/*
 * activity-feed.css — Activity Feed widget
 * Ordered list of recent user actions with avatar + timestamp
 * ─────────────────────────────────────────────────────────── */

/* ─── 1. Component-scoped variables ────────────────────────── */

.activity-feed {
    --feed-padding: var(--space-6);
    --feed-radius: var(--radius-2xl);
    --feed-avatar: var(--space-9);
}

/* ─── 2. Base block ─────────────────────────────────────────── */

.activity-feed {
    display: flex;
    flex-direction: column;
    padding: var(--feed-padding);
    background-color: var(--bg-surface);
    border: 0.0625rem solid var(--border-default);
    border-radius: var(--feed-radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* ─── 3. Elements ───────────────────────────────────────────── */

.activity-feed__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--space-5);
    flex-shrink: 0;
}

.activity-feed__title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
}

.activity-feed__see-all {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--primary);
    transition: color var(--duration-150) var(--ease-default);
}

.activity-feed__see-all:hover {
    color: var(--primary-hover);
}

.activity-feed__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: var(--bg-subtle) transparent;
}

.activity-feed__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding-block-end: var(--space-4);
    border-block-end: 0.0625rem solid var(--border-default);
    transition:
        opacity var(--duration-300) var(--ease-out),
        transform var(--duration-300) var(--ease-out);
}

/* Staggered fade-in states (set by activity-feed.js) */
.activity-feed__item.is-hidden {
    opacity: 0;
    transform: translateY(var(--space-2));
}

.activity-feed__item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.activity-feed__item:last-child {
    border-block-end: none;
    padding-block-end: 0;
}

.activity-feed__avatar {
    width: var(--feed-avatar);
    height: var(--feed-avatar);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--text-on-primary);
    flex-shrink: 0;
}

.activity-feed__content {
    flex: 1;
    min-width: 0;
}

.activity-feed__text {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-snug);
    margin: 0;
}

.activity-feed__text strong {
    color: var(--text-primary);
    font-weight: var(--font-medium);
}

.activity-feed__ref {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--primary);
}

.activity-feed__time {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-block-start: var(--space-1);
}

/* ─── 4. Avatar color modifiers ────────────────────────────── */

.activity-feed__avatar--primary {
    background-color: var(--primary);
}
.activity-feed__avatar--success {
    background-color: var(--success);
}
.activity-feed__avatar--warning {
    background-color: var(--warning);
}
.activity-feed__avatar--danger {
    background-color: var(--danger);
}
.activity-feed__avatar--info {
    background-color: var(--info);
}

/* ═══ quick-actions.css ═══════════════════════════════════════════════════════ */

/*
 * quick-actions.css — Quick Actions widget
 * Grid of shortcut action buttons
 * ─────────────────────────────────────────────────────────── */

/* ─── 1. Component-scoped variables ────────────────────────── */

.quick-actions {
    --qa-padding: var(--space-6);
    --qa-radius: var(--radius-2xl);
    --qa-icon-size: 2.75rem;
    --qa-icon-radius: var(--radius-xl);
}

/* ─── 2. Base block ─────────────────────────────────────────── */

.quick-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--qa-padding);
    background-color: var(--bg-surface);
    border: 0.0625rem solid var(--border-default);
    border-radius: var(--qa-radius);
    box-shadow: var(--shadow-sm);
}

/* ─── 3. Elements ───────────────────────────────────────────── */

.quick-actions__title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
}

.quick-actions__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
    gap: var(--space-3);
}

.quick-actions__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-2);
    border-radius: var(--radius-xl);
    border: 0.0625rem solid var(--border-default);
    background-color: var(--bg-surface);
    color: var(--text-secondary);
    cursor: pointer;
    transition:
        background-color var(--duration-150) var(--ease-default),
        border-color var(--duration-150) var(--ease-default),
        box-shadow var(--duration-150) var(--ease-default),
        transform var(--duration-150) var(--ease-default);
}

.quick-actions__item:hover {
    background-color: var(--bg-muted);
    border-color: var(--border-focus);
    box-shadow: var(--shadow-md);
    transform: translateY(-0.125rem);
}

.quick-actions__item:active {
    transform: translateY(0);
}

.quick-actions__item:focus-visible {
    outline: 0.125rem solid var(--border-focus);
    outline-offset: 0.125rem;
}

.quick-actions__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--qa-icon-size);
    height: var(--qa-icon-size);
    border-radius: var(--qa-icon-radius);
    background-color: var(--bg-muted);
    color: var(--text-secondary);
    transition: background-color var(--duration-150) var(--ease-default);
}

.quick-actions__item:hover .quick-actions__icon {
    background-color: var(--bg-subtle);
}

.quick-actions__label {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    text-align: center;
    white-space: nowrap;
}

/* ─── 4. Icon color modifiers ───────────────────────────────── */

.quick-actions__icon--primary {
    background-color: var(--primary-muted);
    color: var(--primary);
}

.quick-actions__icon--success {
    background-color: var(--success-bg);
    color: var(--success-text);
}

.quick-actions__icon--warning {
    background-color: var(--warning-bg);
    color: var(--warning-text);
}

.quick-actions__icon--danger {
    background-color: var(--danger-bg);
    color: var(--danger-text);
}

.quick-actions__icon--info {
    background-color: var(--info-bg);
    color: var(--info-text);
}

/* ═══ org-chart.css (zoomable tree widget) ═════════════════════════════ */

/* ─── Page shell (orgchart.php) ─────────────────────────────────── */

.oc-page {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--bg-page);
    font-family: var(--font-sans);
    color: var(--text-primary);
}

.oc-page__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 0.0625rem solid var(--border-default);
    background: var(--bg-surface);
}

.oc-page__title-area {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.oc-page__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-9);
    height: var(--space-9);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    transition: background-color var(--duration-150) var(--ease-default);
}

.oc-page__back:hover {
    background: var(--bg-muted);
}

.oc-page__title {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
}

.oc-page__actions {
    display: flex;
    gap: var(--space-2);
}

[data-theme="light"] .icon-sun {
    display: none;
}
[data-theme="dark"] .icon-moon {
    display: none;
}

/* ─── Widget root ───────────────────────────────────────────────── */

.oc {
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    overflow: hidden;
}

/* ─── Toolbar ───────────────────────────────────────────────────── */

.oc__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 0.0625rem solid var(--border-default);
    background: var(--bg-surface);
}

.oc__toolbar-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 5rem;
}

.oc__toolbar-field--search {
    flex: 1 1 10rem;
    min-width: min(100%, 10rem);
}

.oc__toolbar-label {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
}

.oc__search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.oc__search-icon {
    position: absolute;
    inset-inline-start: var(--space-2);
    display: inline-flex;
    color: var(--text-muted);
    pointer-events: none;
}

.oc__search-icon svg {
    width: var(--text-sm);
    height: var(--text-sm);
}

.oc__search-wrap .input {
    width: 100%;
    padding-inline-start: var(--space-8);
}

.oc__toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

/* ─── Viewport (clip + drag) ────────────────────────────────────── */

.oc__viewport {
    flex: 1;
    position: relative;
    overflow: hidden;
    cursor: grab;
    background: var(--bg-page);
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.oc__viewport.is-grabbing {
    cursor: grabbing;
}

/* ─── Canvas (transformed layer) ────────────────────────────────── */

.oc__canvas {
    --oc-tx: 0;
    --oc-ty: 0;
    --oc-scale: 1;

    position: relative;
    display: inline-flex;
    justify-content: center;
    padding: var(--space-16) var(--space-8);
    min-width: 100%;
    transform-origin: 0 0;
    transform: translate(calc(var(--oc-tx) * 1px), calc(var(--oc-ty) * 1px)) scale(var(--oc-scale));
}

/* ─── Tree layout (top-down, centered) ──────────────────────────── */

.oc__tree,
.oc__children {
    display: flex;
    flex-direction: column;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.oc__children {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-6);
    padding-top: var(--space-10);
    position: relative;
}

.oc__branch {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.oc__branch.is-collapsed > .oc__children {
    display: none;
}

.oc__branch[hidden] {
    display: none;
}

/* ─── Connector lines (vertical + horizontal) ───────────────────── */

/* Vertical: parent card ↓ horizontal bar (top half of children padding) */
.oc__children::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: var(--space-5);
    border-left: 0.125rem solid var(--border-strong);
}

/* Vertical: horizontal bar ↓ child card (bottom half of children padding) */
.oc__children > .oc__branch::before {
    content: "";
    position: absolute;
    top: calc(var(--space-5) * -1);
    left: 50%;
    width: 0;
    height: var(--space-5);
    border-left: 0.125rem solid var(--border-strong);
}

/* Horizontal bar segments between sibling branches */
.oc__children > .oc__branch:not(:only-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--space-5) * -1);
    height: 0;
    border-top: 0.125rem solid var(--border-strong);
}

.oc__children > .oc__branch:first-child:not(:only-child)::after {
    left: 50%;
    width: calc(50% + var(--space-3));
}

.oc__children > .oc__branch:last-child:not(:only-child)::after {
    left: calc(var(--space-3) * -1);
    width: calc(50% + var(--space-3));
}

.oc__children > .oc__branch:not(:first-child):not(:last-child)::after {
    left: calc(var(--space-3) * -1);
    width: calc(100% + var(--space-6));
}

/* ─── Card node ─────────────────────────────────────────────────── */

.oc__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 11rem;
    border: 0.0625rem solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
    position: relative;
}

.oc__card-header {
    width: 100%;
    padding: var(--space-1) var(--space-2);
    text-align: center;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--bg-page);
    background: var(--color-rose-400);
    border-radius: calc(var(--radius-lg) - 0.0625rem) calc(var(--radius-lg) - 0.0625rem) 0 0;
}

.oc__card[data-oc-level="vip"] .oc__card-header {
    background: var(--color-amber-500);
    color: var(--color-slate-900);
}

.oc__card[data-oc-level="member"] .oc__card-header {
    background: var(--color-rose-400);
    color: var(--color-slate-0);
}

.oc__card[data-oc-level="member-alt"] .oc__card-header {
    background: var(--color-emerald-500);
    color: var(--color-slate-0);
}

.oc__card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-2);
    width: 100%;
    text-align: center;
}

.oc__field {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: var(--leading-snug);
}

.oc__field--uid {
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.oc__field--amount {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

.oc__field--ref {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

/* ─── +/- Toggle button ─────────────────────────────────────────── */

.oc__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-6);
    height: var(--space-6);
    margin-block: var(--space-1);
    padding: 0;
    border: 0.125rem solid var(--color-amber-500);
    border-radius: var(--radius-full);
    background: var(--color-amber-500);
    color: var(--color-slate-900);
    cursor: pointer;
    transition:
        background-color var(--duration-150) var(--ease-default),
        transform var(--duration-150) var(--ease-default);
}

.oc__toggle:hover {
    transform: scale(1.15);
}

.oc__toggle:focus-visible {
    outline: 0.125rem solid var(--border-focus);
    outline-offset: 0.125rem;
}

.oc__toggle svg {
    width: 0.875rem;
    height: 0.875rem;
}

/* ─── Zoom controls ─────────────────────────────────────────────── */

.oc__zoom-controls {
    position: absolute;
    bottom: var(--space-4);
    right: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    z-index: 5;
}

.oc__zoom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-10);
    height: var(--space-10);
    border: 0.0625rem solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-secondary);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition:
        background-color var(--duration-150) var(--ease-default),
        color var(--duration-150) var(--ease-default);
}

.oc__zoom-btn:hover {
    background: var(--bg-muted);
    color: var(--text-primary);
}

.oc__zoom-btn:focus-visible {
    outline: 0.125rem solid var(--border-focus);
    outline-offset: 0.125rem;
}

.oc__zoom-btn svg {
    width: var(--text-base);
    height: var(--text-base);
}

/* ─── Toolbar toggle (mobile) ───────────────────────────────────── */

.oc__toolbar-body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    flex: 1;
}

.oc__toolbar-toggle {
    display: none;
}

.oc__toolbar-toggle__chevron {
    transition: transform var(--duration-200) var(--ease-default);
}

.oc__toolbar.is-collapsed .oc__toolbar-toggle__chevron {
    transform: rotate(180deg);
}

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

@media (max-width: 48rem) {
    .oc__toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
    }

    .oc__toolbar-toggle {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        width: 100%;
        padding: var(--space-2) var(--space-4);
        margin: 0;
        border: none;
        background: transparent;
        color: var(--text-secondary);
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
        cursor: pointer;
    }

    .oc__toolbar-toggle:hover {
        color: var(--text-primary);
    }

    .oc__toolbar-toggle svg {
        width: var(--text-sm);
        height: var(--text-sm);
    }

    .oc__toolbar-body {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: var(--space-2) var(--space-3);
        padding: 0 var(--space-4) var(--space-3);
    }

    .oc__toolbar-body > .oc__toolbar-field {
        flex: 1 1 40%;
        min-width: 0;
    }

    .oc__toolbar-body > .oc__toolbar-actions {
        flex: 1 1 100%;
    }

    .oc__toolbar.is-collapsed .oc__toolbar-body {
        display: none;
    }

    .oc__toolbar-field--search {
        flex: 0 1 auto;
        min-width: 0;
    }

    .oc__zoom-controls {
        position: fixed;
        bottom: var(--space-4);
        right: var(--space-4);
    }
}

/* ═══ toast.css ═══════════════════════════════════════════════════════ */

/*
 * toast.css — Toast / Snackbar notification component
 * Stacked from bottom-right (desktop) / bottom-center (mobile)
 * JS-driven: toast.js creates and removes toasts programmatically
 * ─────────────────────────────────────────────────────────── */

/* ─── Toast region (container) ──────────────────────────────── */

.toast-region {
    position: fixed;
    inset-block-end: var(--space-6);
    inset-inline-end: var(--space-6);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-3);
    width: 22.5rem;
    max-width: calc(100vw - var(--space-8));
    pointer-events: none;
}

/* ─── Individual toast ──────────────────────────────────────── */

.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background-color: var(--bg-surface);
    border: 0.0625rem solid var(--border-default);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    pointer-events: auto;

    /* Enter: slide up from below */
    opacity: 0;
    transform: translateY(var(--space-3));
    transition:
        opacity var(--duration-200) var(--ease-out),
        transform var(--duration-200) var(--ease-out);
}

.toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Exit: fade + scale down */
.toast.is-dismissing {
    opacity: 0;
    transform: scale(0.95) translateY(var(--space-1));
    transition:
        opacity var(--duration-150) var(--ease-default),
        transform var(--duration-150) var(--ease-default);
    pointer-events: none;
}

/* ─── Icon stripe ───────────────────────────────────────────── */

.toast__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    border-radius: var(--radius-lg);
    flex-shrink: 0;
    margin-block-start: -0.125rem;
}

/* ─── Content ───────────────────────────────────────────────── */

.toast__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.toast__title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
    line-height: var(--leading-tight);
}

.toast__message {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
    line-height: var(--leading-snug);
}

/* ─── Close button ──────────────────────────────────────────── */

.toast__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-6);
    height: var(--space-6);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    flex-shrink: 0;
    margin-block-start: -0.125rem;
    transition:
        background-color var(--duration-100) var(--ease-default),
        color var(--duration-100) var(--ease-default);
}

.toast__close:hover {
    background-color: var(--bg-muted);
    color: var(--text-primary);
}

/* ─── Variants ──────────────────────────────────────────────── */

.toast--success .toast__icon {
    background-color: var(--success-bg);
    color: var(--success-text);
}

.toast--error .toast__icon {
    background-color: var(--danger-bg);
    color: var(--danger-text);
}

.toast--warning .toast__icon {
    background-color: var(--warning-bg);
    color: var(--warning-text);
}

.toast--info .toast__icon {
    background-color: var(--info-bg);
    color: var(--info-text);
}

/* Left accent border per variant */
.toast--success {
    border-inline-start: 0.1875rem solid var(--success);
}
.toast--error {
    border-inline-start: 0.1875rem solid var(--danger);
}
.toast--warning {
    border-inline-start: 0.1875rem solid var(--warning);
}
.toast--info {
    border-inline-start: 0.1875rem solid var(--info);
}

/* ─── Progress bar (auto-dismiss timer) ─────────────────────── */

.toast__progress {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    height: 0.1875rem;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    background-color: var(--primary);
    transform-origin: left;
    transition: transform linear;
}

.toast--success .toast__progress {
    background-color: var(--success);
}
.toast--error .toast__progress {
    background-color: var(--danger);
}
.toast--warning .toast__progress {
    background-color: var(--warning);
}
.toast--info .toast__progress {
    background-color: var(--info);
}

/* toast needs relative for progress bar */
.toast {
    position: relative;
    overflow: hidden;
}

/* ─── Mobile: center bottom ─────────────────────────────────── */

@media (max-width: 39.9375rem) {
    .toast-region {
        inset-inline-end: 50%;
        transform: translateX(50%);
        width: calc(100vw - var(--space-8));
    }
}

/* ═══ Date picker (shadcn-style calendar popover) ═══════════════════════ */

.date-picker {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
    max-width: 100%;
}

.date-picker__legend {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
}

.date-picker__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
}

.date-picker--range .date-picker__field {
    flex: 1 1 10rem;
    min-width: 0;
}

.date-picker__sep {
    flex-shrink: 0;
    padding-block-end: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* Anchor: trigger + popover positioning (no JS inline styles) */
.date-picker__anchor {
    position: relative;
    width: 100%;
    z-index: 0;
}

.date-picker__anchor.is-open {
    z-index: calc(var(--z-dropdown) + 1);
}

/* Trigger — input-shaped button (shadcn Command / Popover trigger feel) */
.date-picker__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    min-height: var(--space-10);
    padding-inline: var(--space-4);
    padding-block: 0;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    text-align: start;
    color: var(--text-primary);
    background-color: var(--bg-surface);
    border: 0.0625rem solid var(--border-default);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition:
        border-color var(--duration-150) var(--ease-default),
        background-color var(--duration-150) var(--ease-default),
        box-shadow var(--duration-150) var(--ease-default);
}

.date-picker__trigger:hover {
    border-color: var(--border-strong);
}

.date-picker__trigger:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 0.1875rem var(--primary-subtle);
}

.date-picker__trigger:focus-visible {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 0.1875rem var(--primary-subtle);
}

.date-picker__value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.date-picker__value--placeholder {
    color: var(--text-muted);
    font-weight: var(--font-normal);
}

.date-picker__trigger-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    pointer-events: none;
}

.date-picker__trigger-icon svg {
    width: var(--text-base);
    height: var(--text-base);
}

/* Popover panel */
.date-picker__popover {
    position: absolute;
    inset-block-start: calc(100% + var(--space-2));
    inset-inline-start: 0;
    z-index: var(--z-dropdown);
    width: min(100%, 18rem);
    min-width: min(100%, 17.5rem);
    padding: var(--space-3);
    background-color: var(--bg-surface);
    border: 0.0625rem solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.date-picker__popover[data-flip="true"] {
    inset-block-start: auto;
    inset-block-end: calc(100% + var(--space-2));
}

.date-picker__popover[data-align-end="true"] {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

.date-picker__popover[hidden] {
    display: none !important;
}

.date-picker__popover.is-open:not([hidden]) {
    display: block;
}

/* Inner calendar (react-day-picker / shadcn aesthetic) */
.date-picker-cal {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.date-picker-cal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.date-picker-cal__title {
    flex: 1;
    min-width: 0;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
    text-align: center;
}

.date-picker-cal__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    padding: 0;
    color: var(--text-secondary);
    background-color: transparent;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
        background-color var(--duration-150) var(--ease-default),
        color var(--duration-150) var(--ease-default);
}

.date-picker-cal__nav-btn:hover {
    background-color: var(--bg-muted);
    color: var(--text-primary);
}

.date-picker-cal__nav-btn:focus-visible {
    outline: 0.125rem solid var(--border-focus);
    outline-offset: 0.125rem;
}

.date-picker-cal__nav-btn svg {
    width: var(--text-base);
    height: var(--text-base);
}

.date-picker-cal__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
}

.date-picker-cal__weekday {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--text-muted);
    text-align: center;
    line-height: var(--leading-tight);
}

.date-picker-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-1);
}

.date-picker-cal__day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    aspect-ratio: 1;
    max-height: var(--space-10);
    padding: 0;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--font-normal);
    color: var(--text-primary);
    background-color: transparent;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
        background-color var(--duration-150) var(--ease-default),
        color var(--duration-150) var(--ease-default);
}

.date-picker-cal__day:hover:not(:disabled) {
    background-color: var(--bg-muted);
}

.date-picker-cal__day:focus-visible {
    outline: 0.125rem solid var(--border-focus);
    outline-offset: 0.0625rem;
    z-index: 1;
}

.date-picker-cal__day--outside {
    color: var(--text-muted);
    opacity: 0.55;
}

.date-picker-cal__day--today:not(.date-picker-cal__day--selected) {
    background-color: var(--bg-muted);
    font-weight: var(--font-medium);
}

.date-picker-cal__day--selected {
    background-color: var(--primary);
    color: var(--text-on-primary);
    font-weight: var(--font-medium);
}

.date-picker-cal__day--selected:hover:not(:disabled) {
    background-color: var(--primary-hover);
    color: var(--text-on-primary);
}

.date-picker-cal__day--in-range:not(.date-picker-cal__day--selected) {
    background-color: var(--primary-muted);
    color: var(--primary-text);
    border-radius: 0;
}

.date-picker-cal__day--range-start:not(.date-picker-cal__day--range-end) {
    background-color: var(--primary);
    color: var(--text-on-primary);
    font-weight: var(--font-semibold);
    border-start-start-radius: var(--radius-md);
    border-end-start-radius: var(--radius-md);
}

.date-picker-cal__day--range-end:not(.date-picker-cal__day--range-start) {
    background-color: var(--primary);
    color: var(--text-on-primary);
    font-weight: var(--font-semibold);
    border-start-end-radius: var(--radius-md);
    border-end-end-radius: var(--radius-md);
}

.date-picker-cal__day--range-start.date-picker-cal__day--range-end {
    background-color: var(--primary);
    color: var(--text-on-primary);
    font-weight: var(--font-semibold);
    border-radius: var(--radius-md);
}

.date-picker-cal__day--range-start:hover:not(:disabled),
.date-picker-cal__day--range-end:hover:not(:disabled),
.date-picker-cal__day--range-start.date-picker-cal__day--range-end:hover:not(:disabled) {
    background-color: var(--primary-hover);
    color: var(--text-on-primary);
}

.date-picker-cal__day--disabled,
.date-picker-cal__day:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 39.9375rem) {
    .date-picker__row {
        flex-direction: column;
        align-items: stretch;
    }

    .date-picker__sep {
        display: none;
    }

    .date-picker--range .date-picker__field {
        flex-basis: auto;
    }

    .date-picker__popover {
        width: 100%;
        min-width: 0;
    }
}

/* ═══ accordion.css (shadcn-style) ═════════════════════════════════════ */

.accordion {
    width: 100%;
    border: 0.0625rem solid var(--border-default);
    border-radius: var(--radius-lg);
    background-color: var(--bg-surface);
    overflow: hidden;
}

.accordion__item + .accordion__item {
    border-top: 0.0625rem solid var(--border-default);
}

.accordion__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4);
    text-align: left;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background-color: transparent;
    border: 0;
    cursor: pointer;
    transition:
        color var(--duration-150) var(--ease-default),
        background-color var(--duration-150) var(--ease-default);
}

.accordion__trigger:hover {
    color: var(--primary-text);
    background-color: var(--bg-muted);
}

.accordion__trigger:focus-visible {
    outline: 0.125rem solid var(--border-focus);
    outline-offset: -0.125rem;
}

.accordion__title {
    min-width: 0;
}

.accordion__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-muted);
    transition:
        transform var(--duration-200) var(--ease-default),
        color var(--duration-150) var(--ease-default);
}

.accordion__item.is-open .accordion__icon {
    transform: rotate(180deg);
    color: var(--primary-text);
}

.accordion__content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--duration-200) var(--ease-default);
}

.accordion__item.is-open .accordion__content {
    grid-template-rows: 1fr;
}

.accordion__content-inner {
    min-height: 0;
    overflow: hidden;
    padding: 0 var(--space-4);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.accordion__item.is-open .accordion__content-inner {
    padding-bottom: var(--space-4);
}

/* ═══ avatar.css ═══════════════════════════════════════════════════════ */

.avatar {
    --avatar-size: var(--space-10);
    --avatar-font-size: var(--text-sm);
    --avatar-bg: var(--primary-muted);
    --avatar-fg: var(--primary-text);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: var(--radius-full);
    overflow: visible;
    flex-shrink: 0;
    background-color: var(--avatar-bg);
    color: var(--avatar-fg);
    border: 0.0625rem solid var(--border-default);
    font-family: var(--font-sans);
    font-size: var(--avatar-font-size);
    font-weight: var(--font-medium);
    line-height: var(--leading-none);
    text-transform: uppercase;
    -webkit-user-select: none;
    user-select: none;
}

.avatar__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

.avatar__fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.avatar--sm {
    --avatar-size: var(--space-8);
    --avatar-font-size: var(--text-xs);
}

.avatar--lg {
    --avatar-size: var(--space-12);
    --avatar-font-size: var(--text-base);
}

.avatar--xl {
    --avatar-size: var(--space-16);
    --avatar-font-size: var(--text-lg);
}

.avatar--success {
    --avatar-bg: var(--success-bg);
    --avatar-fg: var(--success-text);
}

.avatar--warning {
    --avatar-bg: var(--warning-bg);
    --avatar-fg: var(--warning-text);
}

.avatar--danger {
    --avatar-bg: var(--danger-bg);
    --avatar-fg: var(--danger-text);
}

.avatar--info {
    --avatar-bg: var(--info-bg);
    --avatar-fg: var(--info-text);
}

.avatar__status {
    position: absolute;
    inset-inline-end: 0;
    inset-block-end: 0;
    transform: translate(25%, 25%);
    width: var(--space-3);
    height: var(--space-3);
    border-radius: var(--radius-full);
    background-color: var(--text-muted);
    border: 0.125rem solid var(--bg-surface);
}

.avatar__status--online {
    background-color: var(--success);
}

.avatar__status--away {
    background-color: var(--warning);
}

.avatar__status--busy {
    background-color: var(--danger);
}

/* ═══ breadcrumb.css ═══════════════════════════════════════════════════ */

.breadcrumb {
    display: flex;
    align-items: center;
    min-width: 0;
    width: 100%;
}

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.breadcrumb__item {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.breadcrumb__link {
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-1-5);
    transition:
        color var(--duration-150) var(--ease-default),
        background-color var(--duration-150) var(--ease-default);
}

.breadcrumb__link:hover {
    color: var(--text-primary);
    background-color: var(--bg-muted);
}

.breadcrumb__link:focus-visible {
    outline: 0.125rem solid var(--border-focus);
    outline-offset: 0.125rem;
}

.breadcrumb__separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    margin-inline: var(--space-1);
}

.breadcrumb__separator svg {
    width: var(--text-sm);
    height: var(--text-sm);
}

.breadcrumb__current {
    color: var(--text-primary);
    font-weight: var(--font-medium);
    padding: var(--space-1) var(--space-1-5);
}

.breadcrumb--truncate .breadcrumb__item {
    max-width: 12rem;
}

.breadcrumb--truncate .breadcrumb__link,
.breadcrumb--truncate .breadcrumb__current {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ═══ button-group.css ═════════════════════════════════════════════════ */

.button-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    border-radius: var(--radius-lg);
    width: max-content;
    max-width: 100%;
}

.button-group .button {
    border-radius: 0;
}

.button-group .button + .button {
    margin-inline-start: -0.0625rem;
}

.button-group .button:first-child {
    border-start-start-radius: var(--radius-lg);
    border-end-start-radius: var(--radius-lg);
}

.button-group .button:last-child {
    border-start-end-radius: var(--radius-lg);
    border-end-end-radius: var(--radius-lg);
}

.button-group .button:focus-visible,
.button-group .button:focus {
    position: relative;
    z-index: 1;
}

.button-group--sm .button {
    --btn-height: var(--space-8);
    --btn-padding-x: var(--space-3);
    --btn-font-size: var(--text-xs);
    --btn-radius: var(--radius-md);
}

.button-group--lg .button {
    --btn-height: var(--space-12);
    --btn-padding-x: var(--space-6);
    --btn-font-size: var(--text-base);
    --btn-radius: var(--radius-xl);
}

.button-group--pill {
    border-radius: var(--radius-full);
}

.button-group--pill .button:first-child {
    border-start-start-radius: var(--radius-full);
    border-end-start-radius: var(--radius-full);
}

.button-group--pill .button:last-child {
    border-start-end-radius: var(--radius-full);
    border-end-end-radius: var(--radius-full);
}

.button-group--vertical {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

.button-group--vertical .button {
    width: 100%;
}

.button-group--vertical .button + .button {
    margin-inline-start: 0;
    margin-block-start: -0.0625rem;
}

.button-group--vertical .button:first-child {
    border-start-start-radius: var(--radius-lg);
    border-start-end-radius: var(--radius-lg);
    border-end-start-radius: 0;
}

.button-group--vertical .button:last-child {
    border-end-start-radius: var(--radius-lg);
    border-end-end-radius: var(--radius-lg);
    border-start-end-radius: 0;
}

/* ═══ toggle-button.css ════════════════════════════════════════════════ */

/* ═══ tabs.css ═════════════════════════════════════════════════════════ */

.tabs {
    display: grid;
    gap: var(--space-4);
    width: 100%;
}

.tabs__list {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1);
    width: max-content;
    max-width: 100%;
    border: 0.0625rem solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--bg-muted);
}

.tabs__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--space-9);
    padding-inline: var(--space-3);
    border: 0.0625rem solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition:
        color var(--duration-150) var(--ease-default),
        background-color var(--duration-150) var(--ease-default),
        border-color var(--duration-150) var(--ease-default),
        box-shadow var(--duration-150) var(--ease-default);
}

.tabs__trigger:hover {
    color: var(--text-primary);
}

.tabs__trigger:focus-visible {
    outline: 0.125rem solid var(--border-focus);
    outline-offset: 0.125rem;
}

.tabs__trigger.is-active,
.tabs__trigger[aria-selected="true"] {
    background: var(--bg-surface);
    border-color: var(--border-default);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.tabs__panel {
    border: 0.0625rem solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    color: var(--text-primary);
    padding: var(--space-4);
}

.tabs__panel[hidden] {
    display: none;
}

.tabs__panel-title {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
}

.tabs__panel-desc {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.tabs--pill .tabs__list {
    border-radius: var(--radius-full);
}

.tabs--pill .tabs__trigger {
    border-radius: var(--radius-full);
}

.tabs--underline .tabs__list {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    border-bottom: 0.0625rem solid var(--border-default);
}

.tabs--underline .tabs__trigger {
    border-radius: 0;
    border: none;
    border-bottom: 0.125rem solid transparent;
}

.tabs--underline .tabs__trigger.is-active,
.tabs--underline .tabs__trigger[aria-selected="true"] {
    background: transparent;
    border: none;
    border-bottom: 0.125rem solid var(--primary);
    color: var(--text-primary);
    box-shadow: none;
}

.tabs--vertical {
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    align-items: start;
}

.tabs--vertical .tabs__list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

.tabs--vertical .tabs__trigger {
    justify-content: flex-start;
    width: 100%;
}

@media (max-width: 48rem) {
    .tabs--vertical {
        grid-template-columns: 1fr;
    }
}

/* ═══ depth.css ════════════════════════════════════════════════════════ */

.depth {
    --depth-point-size: var(--space-6);
    --depth-line-thickness: 0.125rem;

    display: flex;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.depth__step {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
}

.depth__step:last-child {
    flex: 0 1 auto;
}

.depth__step:not(:last-child)::after {
    content: "";
    display: block;
    height: var(--depth-line-thickness);
    flex: 1;
    margin-inline: var(--space-2);
    border-radius: var(--radius-full);
    background: var(--border-default);
}

.depth__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    min-width: 0;
    padding: 0;
}

.depth__item:focus-visible {
    outline: 0.125rem solid var(--border-focus);
    outline-offset: var(--space-1);
    border-radius: var(--radius-sm);
}

.depth__point {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--depth-point-size);
    height: var(--depth-point-size);
    border: 0.0625rem solid var(--border-strong);
    border-radius: var(--radius-full);
    background: var(--bg-surface);
    color: var(--text-muted);
    flex-shrink: 0;
    transition:
        border-color var(--duration-150) var(--ease-default),
        background-color var(--duration-150) var(--ease-default),
        color var(--duration-150) var(--ease-default);
}

.depth__item.is-current {
    color: var(--text-primary);
}

.depth__item.is-current .depth__point {
    border-color: var(--primary);
    background: var(--primary-subtle);
    color: var(--primary-text);
}

.depth__item.is-complete .depth__point {
    border-color: var(--success);
    background: var(--success-subtle);
    color: var(--success-text);
}

.depth__step.is-complete::after {
    background: var(--success);
}

.depth__label {
    white-space: nowrap;
}

.depth--compact .depth__label {
    display: none;
}

.depth--compact .depth__step {
    flex: 0 1 auto;
}

.depth--compact .depth__step:not(:last-child)::after {
    width: var(--space-6);
    flex: 0 0 auto;
}

@media (max-width: 48rem) {
    .depth {
        flex-wrap: wrap;
    }

    .depth__step {
        flex: 1 1 100%;
    }

    .depth__step:not(:last-child)::after {
        display: none;
    }
}

.toggle-button-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    width: fit-content;
    max-width: 100%;
}

.toggle-button {
    --toggle-btn-height: var(--space-10);
    --toggle-btn-padding-x: var(--space-4);
    --toggle-btn-radius: var(--radius-lg);
    --toggle-btn-bg: var(--bg-surface);
    --toggle-btn-border: var(--border-default);
    --toggle-btn-text: var(--text-secondary);
    --toggle-btn-active-bg: var(--primary-subtle);
    --toggle-btn-active-border: var(--primary);
    --toggle-btn-active-text: var(--primary-text);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--toggle-btn-height);
    padding-inline: var(--toggle-btn-padding-x);
    border: 0.0625rem solid var(--toggle-btn-border);
    border-radius: var(--toggle-btn-radius);
    background-color: var(--toggle-btn-bg);
    color: var(--toggle-btn-text);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    line-height: var(--leading-none);
    cursor: pointer;
    transition:
        border-color var(--duration-150) var(--ease-default),
        background-color var(--duration-150) var(--ease-default),
        color var(--duration-150) var(--ease-default),
        box-shadow var(--duration-150) var(--ease-default);
}

.toggle-button:hover {
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.toggle-button:focus-visible {
    outline: 0.125rem solid var(--border-focus);
    outline-offset: 0.125rem;
}

.toggle-button[aria-pressed="true"],
.toggle-button.is-active {
    background-color: var(--toggle-btn-active-bg);
    border-color: var(--toggle-btn-active-border);
    color: var(--toggle-btn-active-text);
}

.toggle-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.toggle-button__icon svg {
    width: var(--text-base);
    height: var(--text-base);
}

.toggle-button__label {
    white-space: nowrap;
}

.toggle-button--sm {
    --toggle-btn-height: var(--space-8);
    --toggle-btn-padding-x: var(--space-3);
    --toggle-btn-radius: var(--radius-md);
    font-size: var(--text-xs);
}

.toggle-button--lg {
    --toggle-btn-height: var(--space-12);
    --toggle-btn-padding-x: var(--space-5);
    --toggle-btn-radius: var(--radius-xl);
    font-size: var(--text-base);
}

.toggle-button--success {
    --toggle-btn-active-bg: var(--success-bg);
    --toggle-btn-active-border: var(--success);
    --toggle-btn-active-text: var(--success-text);
}

.toggle-button--danger {
    --toggle-btn-active-bg: var(--danger-bg);
    --toggle-btn-active-border: var(--danger);
    --toggle-btn-active-text: var(--danger-text);
}

.toggle-button:disabled,
.toggle-button.is-disabled,
.toggle-button[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* ═══ checkbox.css ═════════════════════════════════════════════════════ */

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
}

.checkbox {
    --checkbox-size: var(--space-4);
    --checkbox-radius: var(--radius-sm);
    --checkbox-border: var(--border-strong);
    --checkbox-bg: var(--bg-surface);
    --checkbox-checked-bg: var(--primary);
    --checkbox-checked-border: var(--primary);
    --checkbox-check: var(--text-on-primary);

    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-primary);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    width: fit-content;
}

.checkbox__input {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    flex-shrink: 0;
    border-radius: var(--checkbox-radius);
    border: 0.0625rem solid var(--checkbox-border);
    background-color: var(--checkbox-bg);
    display: inline-grid;
    place-content: center;
    transition:
        border-color var(--duration-150) var(--ease-default),
        background-color var(--duration-150) var(--ease-default),
        box-shadow var(--duration-150) var(--ease-default);
}

.checkbox__input::after {
    content: "";
    width: calc(var(--checkbox-size) * 0.375);
    height: calc(var(--checkbox-size) * 0.625);
    border-inline-end: 0.125rem solid var(--checkbox-check);
    border-block-end: 0.125rem solid var(--checkbox-check);
    transform: translateY(-8%) rotate(45deg) scale(0);
    transform-origin: center;
    transition: transform var(--duration-100) var(--ease-out);
}

.checkbox__input:hover {
    border-color: var(--border-focus);
}

.checkbox__input:focus-visible {
    outline: 0.125rem solid var(--border-focus);
    outline-offset: 0.125rem;
}

.checkbox__input:checked {
    border-color: var(--checkbox-checked-border);
    background-color: var(--checkbox-checked-bg);
}

.checkbox__input:checked::after {
    transform: translateY(-8%) rotate(45deg) scale(1);
}

.checkbox__input:indeterminate,
.checkbox__input.is-indeterminate {
    border-color: var(--checkbox-checked-border);
    background-color: var(--checkbox-checked-bg);
}

.checkbox__input:indeterminate::after,
.checkbox__input.is-indeterminate::after {
    width: calc(var(--checkbox-size) * 0.5);
    height: 0.125rem;
    border-inline-end: 0;
    border-block-end: 0;
    background-color: var(--checkbox-check);
    transform: scale(1);
    border-radius: var(--radius-full);
}

.checkbox__label {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text-primary);
}

.checkbox__hint {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.checkbox__label-wrap {
    display: inline-flex;
    flex-direction: column;
}

.checkbox--icon-leading .checkbox__label-row {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
}

.checkbox--icon-leading .checkbox__label-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.checkbox--icon-leading .checkbox__label-icon svg {
    width: var(--text-sm);
    height: var(--text-sm);
}

.checkbox--sm {
    --checkbox-size: var(--space-3);
}

.checkbox--lg {
    --checkbox-size: var(--space-5);
}

.checkbox--success {
    --checkbox-checked-bg: var(--success);
    --checkbox-checked-border: var(--success);
}

.checkbox--danger {
    --checkbox-checked-bg: var(--danger);
    --checkbox-checked-border: var(--danger);
}

.checkbox--soft {
    --checkbox-bg: var(--bg-muted);
    --checkbox-border: transparent;
}

.checkbox--outline {
    --checkbox-radius: var(--radius-md);
}

.checkbox--card {
    width: 100%;
    border: 0.0625rem solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    background-color: var(--bg-surface);
}

.checkbox--card:has(.checkbox__input:checked) {
    border-color: var(--primary);
    background-color: var(--primary-subtle);
}

.checkbox--disabled,
.checkbox:has(.checkbox__input:disabled) {
    opacity: 0.6;
    cursor: not-allowed;
}

.checkbox__input:disabled {
    cursor: not-allowed;
}

/* ═══ switch.css ═══════════════════════════════════════════════════════ */

.switch-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
}

.switch {
    --switch-width: var(--space-10);
    --switch-height: var(--space-6);
    --switch-track-off: var(--bg-subtle);
    --switch-track-on: var(--primary);
    --switch-border: var(--border-strong);
    --switch-thumb-bg: var(--bg-surface);
    --switch-thumb-size: calc(var(--switch-height) - var(--space-1));

    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    width: fit-content;
    color: var(--text-primary);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.switch__input {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    margin: 0;
    width: var(--switch-width);
    height: var(--switch-height);
    flex-shrink: 0;
    flex-grow: 0;
    border-radius: var(--radius-full);
    border: 0.0625rem solid var(--switch-border);
    background-color: var(--switch-track-off);
    display: inline-grid;
    align-items: center;
    position: relative;
    transition:
        border-color var(--duration-150) var(--ease-default),
        background-color var(--duration-150) var(--ease-default),
        box-shadow var(--duration-150) var(--ease-default);
}

.switch__input::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: calc(var(--space-1) / 2);
    width: var(--switch-thumb-size);
    height: var(--switch-thumb-size);
    border-radius: var(--radius-full);
    background-color: var(--switch-thumb-bg);
    box-shadow: var(--shadow-sm);
    transform: translateY(-50%);
    pointer-events: none;
    transition: transform var(--duration-150) var(--ease-default);
}

.switch__input:hover {
    border-color: var(--border-focus);
}

.switch__input:focus-visible {
    outline: 0.125rem solid var(--border-focus);
    outline-offset: 0.125rem;
}

.switch__input:checked {
    border-color: var(--switch-track-on);
    background-color: var(--switch-track-on);
}

.switch__input:checked::after {
    transform: translate(
        calc(var(--switch-width) - var(--switch-thumb-size) - var(--space-1)),
        -50%
    );
}

.switch__label {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text-primary);
}

.switch__hint {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.switch__label-wrap {
    display: inline-flex;
    flex-direction: column;
}

.switch--icon-leading .switch__label-row {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
}

.switch--icon-leading .switch__label-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.switch--icon-leading .switch__label-icon svg {
    width: var(--text-sm);
    height: var(--text-sm);
}

.switch--sm {
    --switch-width: var(--space-8);
    --switch-height: var(--space-5);
}

.switch--lg {
    --switch-width: var(--space-12);
    --switch-height: var(--space-7);
}

.switch--success {
    --switch-track-on: var(--success);
}

.switch--warning {
    --switch-track-on: var(--warning);
}

.switch--danger {
    --switch-track-on: var(--danger);
}

.switch--card {
    width: 100%;
    justify-content: space-between;
    border: 0.0625rem solid var(--border-default);
    border-radius: var(--radius-lg);
    background-color: var(--bg-surface);
    padding: var(--space-3);
}

.switch--card:has(.switch__input:checked) {
    border-color: var(--primary);
    background-color: var(--primary-subtle);
}

.switch--disabled,
.switch:has(.switch__input:disabled) {
    opacity: 0.6;
    cursor: not-allowed;
}

.switch__input:disabled {
    cursor: not-allowed;
}

.switch-target-panel {
    border: 0.0625rem solid var(--border-default);
    border-radius: var(--radius-lg);
    background-color: var(--bg-surface);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
    transition:
        border-color var(--duration-150) var(--ease-default),
        background-color var(--duration-150) var(--ease-default);
}

.switch-target-panel.is-on {
    border-color: var(--primary);
    background-color: var(--primary-subtle);
}

.switch-target-panel.is-off {
    opacity: 0.78;
}

.switch-target-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.switch-target-panel__title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.switch-target-panel__state {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--primary-text);
}

.switch-target-panel.is-off .switch-target-panel__state {
    color: var(--text-secondary);
}

.switch-target-panel__desc {
    margin: 0;
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}

.switch-target-note {
    width: 100%;
    border-radius: var(--radius-md);
    border: 0.0625rem dashed var(--warning);
    background-color: var(--warning-bg);
    color: var(--warning-text);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
}

/* ═══ empty.css ════════════════════════════════════════════════════════ */

.empty {
    --empty-max-width: 28rem;

    width: 100%;
    max-width: var(--empty-max-width);
    margin-inline: auto;
    padding: var(--space-8) var(--space-5);
    border: 0.0625rem dashed var(--border-default);
    border-radius: var(--radius-xl);
    background-color: var(--bg-surface);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.empty__icon {
    width: var(--space-12);
    height: var(--space-12);
    border-radius: var(--radius-full);
    background-color: var(--bg-muted);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.empty__icon svg {
    width: var(--text-xl);
    height: var(--text-xl);
}

.empty__title {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.empty__desc {
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}

.empty__actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
}

.empty--compact {
    padding: var(--space-6) var(--space-4);
    gap: var(--space-2);
}

.empty--compact .empty__icon {
    width: var(--space-10);
    height: var(--space-10);
}

.empty--elevated {
    border-style: solid;
    background-color: var(--bg-surface-raised);
    box-shadow: var(--shadow-sm);
}

.empty--danger .empty__icon {
    background-color: var(--danger-bg);
    color: var(--danger-text);
}

.empty--success .empty__icon {
    background-color: var(--success-bg);
    color: var(--success-text);
}

/* ═══ input-group.css ══════════════════════════════════════════════════ */

.input-group {
    --input-group-radius: var(--radius-lg);

    display: inline-flex;
    align-items: stretch;
    width: 100%;
    min-width: 0;
}

.input-group__addon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: var(--space-10);
    padding-inline: var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    background-color: var(--bg-muted);
    border: 0.0625rem solid var(--border-default);
    white-space: nowrap;
}

.input-group__addon svg {
    width: var(--text-base);
    height: var(--text-base);
}

.input-group .input {
    border-radius: 0;
    min-width: 0;
    flex: 1 1 auto;
}

.input-group__addon:first-child {
    border-start-start-radius: var(--input-group-radius);
    border-end-start-radius: var(--input-group-radius);
    border-inline-end: none;
}

.input-group__addon:last-child {
    border-start-end-radius: var(--input-group-radius);
    border-end-end-radius: var(--input-group-radius);
    border-inline-start: none;
}

.input-group .input:first-child {
    border-start-start-radius: var(--input-group-radius);
    border-end-start-radius: var(--input-group-radius);
}

.input-group .input:last-child {
    border-start-end-radius: var(--input-group-radius);
    border-end-end-radius: var(--input-group-radius);
}

.input-group .input:focus {
    position: relative;
    z-index: 1;
}

.input-group .button {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: var(--input-group-radius);
    border-end-end-radius: var(--input-group-radius);
    margin-inline-start: -0.0625rem;
    height: var(--input-height);
}

/* ═══ input-otp.css ════════════════════════════════════════════════════ */

.otp {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    width: fit-content;
    max-width: 100%;
}

.otp__group {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.otp__separator {
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-none);
}

.otp__slot {
    width: var(--space-10);
    height: var(--space-10);
    border-radius: var(--radius-md);
    border: 0.0625rem solid var(--border-default);
    background-color: var(--bg-surface);
    color: var(--text-primary);
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    line-height: var(--leading-none);
    text-transform: uppercase;
    caret-color: var(--primary);
    transition:
        border-color var(--duration-150) var(--ease-default),
        box-shadow var(--duration-150) var(--ease-default);
}

.otp__slot::placeholder {
    color: var(--text-muted);
}

.otp__slot:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 0.1875rem var(--primary-subtle);
}

.otp__slot:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--bg-muted);
}

/* ═══ progress.css ═════════════════════════════════════════════════════ */

.progress {
    --progress-height: var(--space-2);
    --progress-radius: var(--radius-full);
    --progress-track: var(--bg-muted);
    --progress-fill: var(--primary);
    --progress-value: 0%;

    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
}

.progress__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: var(--text-lg);
    color: var(--text-secondary);
}

.progress__label {
    color: var(--text-secondary);
}

.progress__value {
    color: var(--text-primary);
    font-weight: var(--font-medium);
    font-variant-numeric: tabular-nums;
}

.progress__bar {
    width: 100%;
    height: var(--progress-height);
    min-height: 2rem;
    border-radius: var(--progress-radius);
    background-color: var(--progress-track);
    overflow: hidden;
    position: relative;
}

.progress__fill {
    width: var(--progress-value);
    height: 100%;
    border-radius: inherit;
    background-color: var(--progress-fill);
    transition: width var(--duration-300) var(--ease-default);
}

.progress--sm {
    --progress-height: var(--space-1);
}

.progress--lg {
    --progress-height: var(--space-3);
}

.progress--success {
    --progress-fill: var(--success);
}

.progress--warning {
    --progress-fill: var(--warning);
}

.progress--danger {
    --progress-fill: var(--danger);
}

.progress--striped .progress__fill {
    background-image: linear-gradient(
        -45deg,
        color-mix(in srgb, var(--progress-fill) 80%, var(--color-white) 20%) 25%,
        var(--progress-fill) 25%,
        var(--progress-fill) 50%,
        color-mix(in srgb, var(--progress-fill) 80%, var(--color-white) 20%) 50%,
        color-mix(in srgb, var(--progress-fill) 80%, var(--color-white) 20%) 75%,
        var(--progress-fill) 75%,
        var(--progress-fill)
    );
    background-size: var(--space-6) var(--space-6);
}

.progress--segmented .progress__bar {
    background-image: repeating-linear-gradient(
        to right,
        var(--progress-track) 0,
        var(--progress-track) calc(var(--space-4) - 0.0625rem),
        transparent calc(var(--space-4) - 0.0625rem),
        transparent var(--space-4)
    );
}

.progress--ring {
    --ring-size: var(--space-20);
    --ring-thickness: var(--space-2);

    align-items: center;
    gap: var(--space-3);
}

.progress__ring {
    width: var(--ring-size);
    height: var(--ring-size);
    border-radius: var(--radius-full);
    background: conic-gradient(var(--progress-fill) var(--progress-value), var(--progress-track) 0);
    display: grid;
    place-items: center;
    position: relative;
}

.progress__ring::after {
    content: "";
    width: calc(var(--ring-size) - (var(--ring-thickness) * 2));
    height: calc(var(--ring-size) - (var(--ring-thickness) * 2));
    border-radius: var(--radius-full);
    background-color: var(--bg-surface);
}

.progress__ring-value {
    position: absolute;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* Demo-ready static value modifiers */
.progress--v-10 {
    --progress-value: 10%;
}
.progress--v-25 {
    --progress-value: 25%;
}
.progress--v-40 {
    --progress-value: 40%;
}
.progress--v-60 {
    --progress-value: 60%;
}
.progress--v-75 {
    --progress-value: 75%;
}
.progress--v-90 {
    --progress-value: 90%;
}
.progress--v-100 {
    --progress-value: 100%;
}

/* data-progress class mapping for progress.js (0..100) */
.progress--v-0 {
    --progress-value: 0%;
}
.progress--v-1 {
    --progress-value: 1%;
}
.progress--v-2 {
    --progress-value: 2%;
}
.progress--v-3 {
    --progress-value: 3%;
}
.progress--v-4 {
    --progress-value: 4%;
}
.progress--v-5 {
    --progress-value: 5%;
}
.progress--v-6 {
    --progress-value: 6%;
}
.progress--v-7 {
    --progress-value: 7%;
}
.progress--v-8 {
    --progress-value: 8%;
}
.progress--v-9 {
    --progress-value: 9%;
}
.progress--v-10 {
    --progress-value: 10%;
}
.progress--v-11 {
    --progress-value: 11%;
}
.progress--v-12 {
    --progress-value: 12%;
}
.progress--v-13 {
    --progress-value: 13%;
}
.progress--v-14 {
    --progress-value: 14%;
}
.progress--v-15 {
    --progress-value: 15%;
}
.progress--v-16 {
    --progress-value: 16%;
}
.progress--v-17 {
    --progress-value: 17%;
}
.progress--v-18 {
    --progress-value: 18%;
}
.progress--v-19 {
    --progress-value: 19%;
}
.progress--v-20 {
    --progress-value: 20%;
}
.progress--v-21 {
    --progress-value: 21%;
}
.progress--v-22 {
    --progress-value: 22%;
}
.progress--v-23 {
    --progress-value: 23%;
}
.progress--v-24 {
    --progress-value: 24%;
}
.progress--v-25 {
    --progress-value: 25%;
}
.progress--v-26 {
    --progress-value: 26%;
}
.progress--v-27 {
    --progress-value: 27%;
}
.progress--v-28 {
    --progress-value: 28%;
}
.progress--v-29 {
    --progress-value: 29%;
}
.progress--v-30 {
    --progress-value: 30%;
}
.progress--v-31 {
    --progress-value: 31%;
}
.progress--v-32 {
    --progress-value: 32%;
}
.progress--v-33 {
    --progress-value: 33%;
}
.progress--v-34 {
    --progress-value: 34%;
}
.progress--v-35 {
    --progress-value: 35%;
}
.progress--v-36 {
    --progress-value: 36%;
}
.progress--v-37 {
    --progress-value: 37%;
}
.progress--v-38 {
    --progress-value: 38%;
}
.progress--v-39 {
    --progress-value: 39%;
}
.progress--v-40 {
    --progress-value: 40%;
}
.progress--v-41 {
    --progress-value: 41%;
}
.progress--v-42 {
    --progress-value: 42%;
}
.progress--v-43 {
    --progress-value: 43%;
}
.progress--v-44 {
    --progress-value: 44%;
}
.progress--v-45 {
    --progress-value: 45%;
}
.progress--v-46 {
    --progress-value: 46%;
}
.progress--v-47 {
    --progress-value: 47%;
}
.progress--v-48 {
    --progress-value: 48%;
}
.progress--v-49 {
    --progress-value: 49%;
}
.progress--v-50 {
    --progress-value: 50%;
}
.progress--v-51 {
    --progress-value: 51%;
}
.progress--v-52 {
    --progress-value: 52%;
}
.progress--v-53 {
    --progress-value: 53%;
}
.progress--v-54 {
    --progress-value: 54%;
}
.progress--v-55 {
    --progress-value: 55%;
}
.progress--v-56 {
    --progress-value: 56%;
}
.progress--v-57 {
    --progress-value: 57%;
}
.progress--v-58 {
    --progress-value: 58%;
}
.progress--v-59 {
    --progress-value: 59%;
}
.progress--v-60 {
    --progress-value: 60%;
}
.progress--v-61 {
    --progress-value: 61%;
}
.progress--v-62 {
    --progress-value: 62%;
}
.progress--v-63 {
    --progress-value: 63%;
}
.progress--v-64 {
    --progress-value: 64%;
}
.progress--v-65 {
    --progress-value: 65%;
}
.progress--v-66 {
    --progress-value: 66%;
}
.progress--v-67 {
    --progress-value: 67%;
}
.progress--v-68 {
    --progress-value: 68%;
}
.progress--v-69 {
    --progress-value: 69%;
}
.progress--v-70 {
    --progress-value: 70%;
}
.progress--v-71 {
    --progress-value: 71%;
}
.progress--v-72 {
    --progress-value: 72%;
}
.progress--v-73 {
    --progress-value: 73%;
}
.progress--v-74 {
    --progress-value: 74%;
}
.progress--v-75 {
    --progress-value: 75%;
}
.progress--v-76 {
    --progress-value: 76%;
}
.progress--v-77 {
    --progress-value: 77%;
}
.progress--v-78 {
    --progress-value: 78%;
}
.progress--v-79 {
    --progress-value: 79%;
}
.progress--v-80 {
    --progress-value: 80%;
}
.progress--v-81 {
    --progress-value: 81%;
}
.progress--v-82 {
    --progress-value: 82%;
}
.progress--v-83 {
    --progress-value: 83%;
}
.progress--v-84 {
    --progress-value: 84%;
}
.progress--v-85 {
    --progress-value: 85%;
}
.progress--v-86 {
    --progress-value: 86%;
}
.progress--v-87 {
    --progress-value: 87%;
}
.progress--v-88 {
    --progress-value: 88%;
}
.progress--v-89 {
    --progress-value: 89%;
}
.progress--v-90 {
    --progress-value: 90%;
}
.progress--v-91 {
    --progress-value: 91%;
}
.progress--v-92 {
    --progress-value: 92%;
}
.progress--v-93 {
    --progress-value: 93%;
}
.progress--v-94 {
    --progress-value: 94%;
}
.progress--v-95 {
    --progress-value: 95%;
}
.progress--v-96 {
    --progress-value: 96%;
}
.progress--v-97 {
    --progress-value: 97%;
}
.progress--v-98 {
    --progress-value: 98%;
}
.progress--v-99 {
    --progress-value: 99%;
}
.progress--v-100 {
    --progress-value: 100%;
}

/* ═══ radio.css ════════════════════════════════════════════════════════ */

.radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
}

.radio-group[role="radiogroup"] {
    margin: 0;
}

.radio {
    --radio-size: var(--space-4);
    --radio-border: var(--border-strong);
    --radio-bg: var(--bg-surface);
    --radio-dot: var(--primary);

    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-primary);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    width: fit-content;
}

.radio__input {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    width: var(--radio-size);
    height: var(--radio-size);
    border-radius: var(--radius-full);
    border: 0.0625rem solid var(--radio-border);
    background-color: var(--radio-bg);
    display: grid;
    place-content: center;
    flex-shrink: 0;
    transition:
        border-color var(--duration-150) var(--ease-default),
        box-shadow var(--duration-150) var(--ease-default);
}

.radio__input::after {
    content: "";
    width: calc(var(--radio-size) * 0.5);
    height: calc(var(--radio-size) * 0.5);
    border-radius: var(--radius-full);
    background-color: var(--radio-dot);
    transform: scale(0);
    transition: transform var(--duration-150) var(--ease-out);
}

.radio__input:hover {
    border-color: var(--border-focus);
}

.radio__input:focus-visible {
    outline: 0.125rem solid var(--border-focus);
    outline-offset: 0.125rem;
}

.radio__input:checked {
    border-color: var(--radio-dot);
}

.radio__input:checked::after {
    transform: scale(1);
}

.radio__label {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text-primary);
}

.radio__hint {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.radio__label-wrap {
    display: inline-flex;
    flex-direction: column;
}

.radio--sm {
    --radio-size: var(--space-3);
}

.radio--lg {
    --radio-size: var(--space-5);
}

.radio--success {
    --radio-dot: var(--success);
}

.radio--danger {
    --radio-dot: var(--danger);
}

.radio--card {
    width: 100%;
    border: 0.0625rem solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    background-color: var(--bg-surface);
}

.radio--card:has(.radio__input:checked) {
    border-color: var(--primary);
    background-color: var(--primary-subtle);
}

.radio--disabled,
.radio:has(.radio__input:disabled) {
    opacity: 0.6;
    cursor: not-allowed;
}

.radio__input:disabled {
    cursor: not-allowed;
}

/* Button-like segmented radios */
.radio-group--segment {
    display: inline-flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    width: fit-content;
    max-width: 100%;
    border: 0.0625rem solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.radio-group--segment .radio {
    position: relative;
    margin: 0;
    width: auto;
    min-width: 0;
    border-inline-end: 0.0625rem solid var(--border-default);
    background-color: var(--bg-surface);
}

.radio-group--segment .radio:last-child {
    border-inline-end: none;
}

.radio-group--segment .radio__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.radio-group--segment .radio__input::after {
    display: none;
}

.radio-group--segment .radio__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-4);
    min-height: var(--space-10);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    transition:
        background-color var(--duration-150) var(--ease-default),
        color var(--duration-150) var(--ease-default);
}

.radio-group--segment .radio__input:checked + .radio__label {
    background-color: var(--primary-subtle);
    color: var(--primary-text);
}

.radio-group--segment .radio__input:focus-visible + .radio__label {
    outline: 0.125rem solid var(--border-focus);
    outline-offset: -0.125rem;
}

.radio-group--segment.radio-group--segment-pill {
    border-radius: var(--radius-full);
}

.radio-group--segment.radio-group--segment-pill .radio__label {
    padding-inline: var(--space-5);
}

/* ═══ slider.css ═══════════════════════════════════════════════════════ */

.slider {
    --slider-height: var(--space-1-5);
    --slider-thumb-size: var(--space-4);
    --slider-track: var(--bg-muted);
    --slider-fill: var(--primary);
    --slider-percent: 0%;

    width: 100%;
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.slider__input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: var(--slider-thumb-size);
    margin: 0;
    background: transparent;
    cursor: pointer;
}

/* WebKit track */
.slider__input::-webkit-slider-runnable-track {
    height: var(--slider-height);
    border-radius: var(--radius-full);
    background: linear-gradient(
        to right,
        var(--slider-fill) 0%,
        var(--slider-fill) var(--slider-percent),
        var(--slider-track) var(--slider-percent),
        var(--slider-track) 100%
    );
}

/* Firefox track */
.slider__input::-moz-range-track {
    height: var(--slider-height);
    border-radius: var(--radius-full);
    background-color: var(--slider-track);
}

/* Firefox progress (filled part) */
.slider__input::-moz-range-progress {
    height: var(--slider-height);
    border-radius: var(--radius-full);
    background-color: var(--slider-fill);
}

/* Thumb */
.slider__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--slider-thumb-size);
    height: var(--slider-thumb-size);
    border-radius: var(--radius-full);
    border: 0.125rem solid var(--slider-fill);
    background-color: var(--bg-surface);
    margin-top: calc((var(--slider-height) - var(--slider-thumb-size)) / 2);
    box-shadow: var(--shadow-sm);
}

.slider__input::-moz-range-thumb {
    width: var(--slider-thumb-size);
    height: var(--slider-thumb-size);
    border-radius: var(--radius-full);
    border: 0.125rem solid var(--slider-fill);
    background-color: var(--bg-surface);
    box-shadow: var(--shadow-sm);
}

.slider__input:focus-visible {
    outline: none;
}

.slider__input:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 0.25rem var(--primary-subtle);
}

.slider__input:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 0.25rem var(--primary-subtle);
}

.slider--sm {
    --slider-height: var(--space-1);
    --slider-thumb-size: var(--space-3);
}

.slider--lg {
    --slider-height: var(--space-2);
    --slider-thumb-size: var(--space-5);
}

.slider--success {
    --slider-fill: var(--success);
}

.slider--warning {
    --slider-fill: var(--warning);
}

.slider--danger {
    --slider-fill: var(--danger);
}

.slider__input:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.slider--v-0 {
    --slider-percent: 0%;
}

.slider--v-1 {
    --slider-percent: 1%;
}

.slider--v-2 {
    --slider-percent: 2%;
}

.slider--v-3 {
    --slider-percent: 3%;
}

.slider--v-4 {
    --slider-percent: 4%;
}

.slider--v-5 {
    --slider-percent: 5%;
}

.slider--v-6 {
    --slider-percent: 6%;
}

.slider--v-7 {
    --slider-percent: 7%;
}

.slider--v-8 {
    --slider-percent: 8%;
}

.slider--v-9 {
    --slider-percent: 9%;
}

.slider--v-10 {
    --slider-percent: 10%;
}

.slider--v-11 {
    --slider-percent: 11%;
}

.slider--v-12 {
    --slider-percent: 12%;
}

.slider--v-13 {
    --slider-percent: 13%;
}

.slider--v-14 {
    --slider-percent: 14%;
}

.slider--v-15 {
    --slider-percent: 15%;
}

.slider--v-16 {
    --slider-percent: 16%;
}

.slider--v-17 {
    --slider-percent: 17%;
}

.slider--v-18 {
    --slider-percent: 18%;
}

.slider--v-19 {
    --slider-percent: 19%;
}

.slider--v-20 {
    --slider-percent: 20%;
}

.slider--v-21 {
    --slider-percent: 21%;
}

.slider--v-22 {
    --slider-percent: 22%;
}

.slider--v-23 {
    --slider-percent: 23%;
}

.slider--v-24 {
    --slider-percent: 24%;
}

.slider--v-25 {
    --slider-percent: 25%;
}

.slider--v-26 {
    --slider-percent: 26%;
}

.slider--v-27 {
    --slider-percent: 27%;
}

.slider--v-28 {
    --slider-percent: 28%;
}

.slider--v-29 {
    --slider-percent: 29%;
}

.slider--v-30 {
    --slider-percent: 30%;
}

.slider--v-31 {
    --slider-percent: 31%;
}

.slider--v-32 {
    --slider-percent: 32%;
}

.slider--v-33 {
    --slider-percent: 33%;
}

.slider--v-34 {
    --slider-percent: 34%;
}

.slider--v-35 {
    --slider-percent: 35%;
}

.slider--v-36 {
    --slider-percent: 36%;
}

.slider--v-37 {
    --slider-percent: 37%;
}

.slider--v-38 {
    --slider-percent: 38%;
}

.slider--v-39 {
    --slider-percent: 39%;
}

.slider--v-40 {
    --slider-percent: 40%;
}

.slider--v-41 {
    --slider-percent: 41%;
}

.slider--v-42 {
    --slider-percent: 42%;
}

.slider--v-43 {
    --slider-percent: 43%;
}

.slider--v-44 {
    --slider-percent: 44%;
}

.slider--v-45 {
    --slider-percent: 45%;
}

.slider--v-46 {
    --slider-percent: 46%;
}

.slider--v-47 {
    --slider-percent: 47%;
}

.slider--v-48 {
    --slider-percent: 48%;
}

.slider--v-49 {
    --slider-percent: 49%;
}

.slider--v-50 {
    --slider-percent: 50%;
}

.slider--v-51 {
    --slider-percent: 51%;
}

.slider--v-52 {
    --slider-percent: 52%;
}

.slider--v-53 {
    --slider-percent: 53%;
}

.slider--v-54 {
    --slider-percent: 54%;
}

.slider--v-55 {
    --slider-percent: 55%;
}

.slider--v-56 {
    --slider-percent: 56%;
}

.slider--v-57 {
    --slider-percent: 57%;
}

.slider--v-58 {
    --slider-percent: 58%;
}

.slider--v-59 {
    --slider-percent: 59%;
}

.slider--v-60 {
    --slider-percent: 60%;
}

.slider--v-61 {
    --slider-percent: 61%;
}

.slider--v-62 {
    --slider-percent: 62%;
}

.slider--v-63 {
    --slider-percent: 63%;
}

.slider--v-64 {
    --slider-percent: 64%;
}

.slider--v-65 {
    --slider-percent: 65%;
}

.slider--v-66 {
    --slider-percent: 66%;
}

.slider--v-67 {
    --slider-percent: 67%;
}

.slider--v-68 {
    --slider-percent: 68%;
}

.slider--v-69 {
    --slider-percent: 69%;
}

.slider--v-70 {
    --slider-percent: 70%;
}

.slider--v-71 {
    --slider-percent: 71%;
}

.slider--v-72 {
    --slider-percent: 72%;
}

.slider--v-73 {
    --slider-percent: 73%;
}

.slider--v-74 {
    --slider-percent: 74%;
}

.slider--v-75 {
    --slider-percent: 75%;
}

.slider--v-76 {
    --slider-percent: 76%;
}

.slider--v-77 {
    --slider-percent: 77%;
}

.slider--v-78 {
    --slider-percent: 78%;
}

.slider--v-79 {
    --slider-percent: 79%;
}

.slider--v-80 {
    --slider-percent: 80%;
}

.slider--v-81 {
    --slider-percent: 81%;
}

.slider--v-82 {
    --slider-percent: 82%;
}

.slider--v-83 {
    --slider-percent: 83%;
}

.slider--v-84 {
    --slider-percent: 84%;
}

.slider--v-85 {
    --slider-percent: 85%;
}

.slider--v-86 {
    --slider-percent: 86%;
}

.slider--v-87 {
    --slider-percent: 87%;
}

.slider--v-88 {
    --slider-percent: 88%;
}

.slider--v-89 {
    --slider-percent: 89%;
}

.slider--v-90 {
    --slider-percent: 90%;
}

.slider--v-91 {
    --slider-percent: 91%;
}

.slider--v-92 {
    --slider-percent: 92%;
}

.slider--v-93 {
    --slider-percent: 93%;
}

.slider--v-94 {
    --slider-percent: 94%;
}

.slider--v-95 {
    --slider-percent: 95%;
}

.slider--v-96 {
    --slider-percent: 96%;
}

.slider--v-97 {
    --slider-percent: 97%;
}

.slider--v-98 {
    --slider-percent: 98%;
}

.slider--v-99 {
    --slider-percent: 99%;
}

.slider--v-100 {
    --slider-percent: 100%;
}