/*!
 * 360commerce UI — komponenty
 * Źródło prawdy: repo 360commerce/360commerce-app-design-system (pb_public/app/ui/components.css).
 * Wymaga tokens.css. Komponenty używają WYŁĄCZNIE tokenów semantycznych (var(--ui-*)),
 * nigdy surowych kolorów — dzięki temu motyw jasny/ciemny i akcent działają same.
 *
 * Konwencja nazw: .ui-{komponent}, .ui-{komponent}__{część}, .ui-{komponent}--{wariant}.
 * Stan: atrybuty ARIA (aria-selected, aria-pressed, aria-expanded, aria-invalid,
 * aria-busy, [hidden], [open]) albo .is-{stan} — nigdy kolejne klasy wariantów.
 * Wygląd przeniesiony z panelu /admin (stan na 2026-10-21) — zmiany idą tu, nie w panelu.
 * Od 1.1.0 obejmuje też komponenty apki mobilnej (mobile/components/ui.tsx, layout.tsx, bottom-sheet.tsx):
 * sekcja „Ekran mobilny" na końcu + warianty mobilne w sekcjach istniejących (szukaj „apka mobilna").
 */

/* ── Baza (opt-in: klasa .ui-root na <body> albo kontenerze) ─────────────── */

.ui-root {
    margin: 0;
    font-family: var(--ui-font-sans);
    font-size: var(--ui-font-size-md);
    line-height: var(--ui-line-height-relaxed);
    color: var(--ui-text);
    background: var(--ui-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.ui-root *,
.ui-root *::before,
.ui-root *::after {
    box-sizing: border-box;
}

:where([class^='ui-'], [class*=' ui-']) {
    box-sizing: border-box;
}

.ui-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ui-muted { color: var(--ui-text-muted); }
.ui-subtle { color: var(--ui-text-subtle); }
.ui-num { font-variant-numeric: tabular-nums; }
.ui-mono { font-family: var(--ui-font-mono); font-size: 0.92em; }

.ui-overline {
    font-size: var(--ui-font-size-2xs);
    font-weight: var(--ui-font-weight-semibold);
    letter-spacing: var(--ui-letter-spacing-wide);
    text-transform: uppercase;
    color: var(--ui-text-subtle);
}

.ui-link {
    color: var(--ui-primary-text);
    font-weight: var(--ui-font-weight-medium);
    text-decoration: none;
    border-radius: var(--ui-radius-sm);
}

.ui-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.ui-link:focus-visible { outline: none; box-shadow: var(--ui-focus-shadow); }

/* Role tekstu — te same, co `Typography` w apce mobilnej (h1…tiny). Nagłówki bez marginesów:
   układ rozstawia `gap`, tak jak na telefonie. */
.ui-h1 { margin: 0; font-size: var(--ui-type-h1-size); font-weight: var(--ui-font-weight-semibold); line-height: var(--ui-line-height-tight); letter-spacing: var(--ui-letter-spacing-tight); color: var(--ui-text); }
.ui-h2 { margin: 0; font-size: var(--ui-type-h2-size); font-weight: var(--ui-font-weight-semibold); line-height: var(--ui-line-height-tight); color: var(--ui-text); }
.ui-h3 { margin: 0; font-size: var(--ui-type-h3-size); font-weight: var(--ui-font-weight-semibold); line-height: var(--ui-line-height-snug); color: var(--ui-text); }
.ui-body { margin: 0; font-size: var(--ui-type-body-size); line-height: var(--ui-line-height-snug); color: var(--ui-text); }
.ui-body-strong { margin: 0; font-size: var(--ui-type-body-size); font-weight: var(--ui-font-weight-semibold); line-height: var(--ui-line-height-snug); color: var(--ui-text); }
.ui-small { margin: 0; font-size: var(--ui-type-small-size); line-height: var(--ui-line-height-snug); color: var(--ui-text-muted); }
.ui-tiny { margin: 0; font-size: var(--ui-type-tiny-size); font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-snug); color: var(--ui-text-subtle); }

/* Nagłówek grupy („TWOJA PRACA", „FIRMA I PANEL") — overline z odstępem pod spodem. */
.ui-section-title { margin: 0 0 var(--ui-space-2); font-size: var(--ui-font-size-sm); font-weight: var(--ui-font-weight-semibold); letter-spacing: var(--ui-letter-spacing-wide); text-transform: uppercase; color: var(--ui-text-subtle); }

/* ── Ikona ──────────────────────────────────────────────────────────────── */

.ui-icon {
    width: var(--ui-icon-md);
    height: var(--ui-icon-md);
    flex: 0 0 auto;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ui-icon--xs { width: var(--ui-icon-xs); height: var(--ui-icon-xs); }
.ui-icon--sm { width: var(--ui-icon-sm); height: var(--ui-icon-sm); }
.ui-icon--lg { width: var(--ui-icon-lg); height: var(--ui-icon-lg); }
.ui-icon--xl { width: var(--ui-icon-xl); height: var(--ui-icon-xl); }

/* ── Przycisk ───────────────────────────────────────────────────────────── */

.ui-btn {
    --ui-btn-bg: var(--ui-primary);
    --ui-btn-bg-hover: var(--ui-primary-hover);
    --ui-btn-color: var(--ui-on-primary);
    --ui-btn-border: transparent;
    --ui-btn-shadow: none;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-2);
    min-height: var(--ui-control-md);
    padding: 0 var(--ui-space-4);
    border: 1px solid var(--ui-btn-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-btn-bg);
    box-shadow: var(--ui-btn-shadow);
    color: var(--ui-btn-color);
    font: inherit;
    font-size: var(--ui-font-size-base);
    font-weight: var(--ui-font-weight-semibold);
    line-height: var(--ui-line-height-tight);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    overflow: hidden;
    transition:
        background-color var(--ui-duration-state) var(--ui-ease-out),
        border-color var(--ui-duration-state) var(--ui-ease-out),
        color var(--ui-duration-state) var(--ui-ease-out),
        box-shadow var(--ui-duration-state) var(--ui-ease-out),
        transform var(--ui-duration-state) var(--ui-ease-spring);
}

/* Nacisk: skala 0.97 + rozjaśnienie (warstwa ::before), jak w HeroUI */
.ui-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgb(255 255 255 / 0.16);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ui-duration-fast) var(--ui-ease-out);
}

.ui-btn:hover { background: var(--ui-btn-bg-hover); }
.ui-btn:active { transform: scale(var(--ui-press-scale)); }
.ui-btn:active::before { opacity: 1; }
.ui-btn--icon:active { transform: scale(var(--ui-press-scale)); }
.ui-btn:focus-visible { outline: none; box-shadow: var(--ui-focus-shadow); }

.ui-btn:disabled,
.ui-btn[aria-disabled='true'] {
    opacity: var(--ui-disabled-opacity);
    cursor: not-allowed;
    transform: none;
}

.ui-btn:disabled::before,
.ui-btn[aria-disabled='true']::before { opacity: 0; }

.ui-btn .ui-icon { width: var(--ui-icon-sm); height: var(--ui-icon-sm); }

.ui-btn--secondary {
    --ui-btn-bg: var(--ui-surface);
    --ui-btn-bg-hover: var(--ui-fill-hover);
    --ui-btn-color: var(--ui-text);
    --ui-btn-border: var(--ui-border);
}

.ui-btn--secondary::before,
.ui-btn--soft::before,
.ui-btn--ghost::before,
.ui-btn--link::before,
.ui-btn--danger-soft::before,
.ui-btn--inverse::before { background: var(--ui-fill-strong); }
.ui-btn--secondary:hover { border-color: var(--ui-border-strong); }

/* Cień w kolorze akcentu (HeroUI „shadow") — główny przycisk ekranu, CTA w pustym stanie */
.ui-btn--shadow { --ui-btn-shadow: 0 6px 16px -6px color-mix(in srgb, var(--ui-primary) 55%, transparent); }
.ui-btn--shadow:hover { --ui-btn-shadow: 0 8px 20px -6px color-mix(in srgb, var(--ui-primary) 65%, transparent); }
.ui-btn--shadow:active { transform: scale(var(--ui-press-scale)); --ui-btn-shadow: 0 2px 8px -4px color-mix(in srgb, var(--ui-primary) 55%, transparent); }

.ui-btn--soft {
    --ui-btn-bg: var(--ui-primary-soft);
    --ui-btn-bg-hover: var(--ui-primary-soft-hover);
    --ui-btn-color: var(--ui-primary-text);
    --ui-btn-shadow: none;
}

.ui-btn--ghost {
    --ui-btn-bg: transparent;
    --ui-btn-bg-hover: var(--ui-fill-hover);
    --ui-btn-color: var(--ui-text-secondary);
    --ui-btn-shadow: none;
}

.ui-btn--danger {
    --ui-btn-bg: var(--ui-danger);
    --ui-btn-bg-hover: var(--ui-danger-hover);
    --ui-btn-color: #ffffff;
}

.ui-btn--danger-soft {
    --ui-btn-bg: var(--ui-danger-soft);
    --ui-btn-bg-hover: color-mix(in srgb, var(--ui-danger) 16%, transparent);
    --ui-btn-color: var(--ui-danger-text);
    --ui-btn-shadow: none;
}

.ui-btn--link {
    --ui-btn-bg: transparent;
    --ui-btn-bg-hover: transparent;
    --ui-btn-color: var(--ui-primary-text);
    --ui-btn-shadow: none;
    min-height: auto;
    padding: 0;
}

.ui-btn--link:hover { text-decoration: underline; text-underline-offset: 2px; }
.ui-btn--link { overflow: visible; }
.ui-btn--link:active { transform: none; }
.ui-btn--link::before { display: none; }

/* Na tle akcentu (nagłówek gradientowy, ekran logowania) — apka mobilna */
.ui-btn--inverse {
    --ui-btn-bg: #ffffff;
    --ui-btn-bg-hover: var(--ui-on-primary-muted);
    --ui-btn-color: var(--ui-primary-active);
    --ui-btn-shadow: none;
}

.ui-btn--translucent {
    --ui-btn-bg: var(--ui-on-primary-fill);
    --ui-btn-bg-hover: var(--ui-on-primary-fill-hover);
    --ui-btn-color: #ffffff;
    --ui-btn-shadow: none;
}

.ui-btn--sm {
    min-height: var(--ui-control-sm);
    padding: 0 var(--ui-space-3);
    font-size: var(--ui-font-size-sm);
}

.ui-btn--lg {
    min-height: var(--ui-control-lg);
    padding: 0 var(--ui-space-5);
    font-size: var(--ui-font-size-md);
}

/* @deprecated 1.6.0: pigułka jest wyłącznie dla etykiet — klasa zostaje bez efektu, usuń ją z markupu */
.ui-btn--pill { border-radius: var(--ui-radius-lg); }
.ui-btn--block { display: flex; width: 100%; }

.ui-btn--icon {
    width: var(--ui-control-md);
    padding: 0;
}

.ui-btn--icon.ui-btn--sm { width: var(--ui-control-sm); }
.ui-btn--icon.ui-btn--lg { width: var(--ui-control-lg); }

/* Stan ładowania: aria-busy="true" — tekst znika płynnie, spinner wjeżdża; szerokość bez zmian. */
.ui-btn[aria-busy='true'] {
    color: transparent;
    pointer-events: none;
}

.ui-btn[aria-busy='true'] > * { opacity: 0; transition: opacity var(--ui-duration-fast) ease; }

.ui-btn[aria-busy='true']::after {
    content: '';
    position: absolute;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid var(--ui-btn-color);
    border-right-color: transparent;
    animation: ui-spin 0.7s linear infinite, ui-scale-in var(--ui-duration) var(--ui-ease-spring);
}

.ui-btn-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-2);
}

/* Licznik na ikonie (dzwonek z nieprzeczytanymi, zakładka paska dolnego):
   <button class="ui-btn ui-btn--icon ui-btn--ghost">[ikona]<span class="ui-count">3</span></button> */
.ui-count {
    position: absolute;
    top: 0.125rem;
    right: 0.125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    border-radius: var(--ui-radius-full);
    background: var(--ui-danger);
    color: #ffffff;
    font-size: var(--ui-font-size-2xs);
    font-weight: var(--ui-font-weight-semibold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 2px var(--ui-surface);
    pointer-events: none;
}

.ui-count--dot { min-width: 0.5rem; width: 0.5rem; height: 0.5rem; padding: 0; }
.ui-topbar .ui-count,
.ui-screen-header .ui-count { box-shadow: none; }

/* ── Kbd ────────────────────────────────────────────────────────────────── */

.ui-kbd {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 var(--ui-space-1-5);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-fill);
    color: var(--ui-text-muted);
    font-family: var(--ui-font-sans);
    font-size: var(--ui-font-size-2xs);
    font-weight: var(--ui-font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
}

/* ── Pola formularza ────────────────────────────────────────────────────── */

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

.ui-label {
    font-size: var(--ui-font-size-base);
    font-weight: var(--ui-font-weight-medium);
    color: var(--ui-text);
    line-height: var(--ui-line-height-snug);
}

.ui-label__required { color: var(--ui-danger); margin-left: 0.125rem; }
.ui-label__optional { color: var(--ui-text-subtle); font-weight: var(--ui-font-weight-normal); }

.ui-hint {
    margin: 0;
    font-size: var(--ui-font-size-xs);
    color: var(--ui-text-muted);
    line-height: var(--ui-line-height-snug);
}

.ui-error {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--ui-space-1);
    font-size: var(--ui-font-size-xs);
    font-weight: var(--ui-font-weight-medium);
    color: var(--ui-danger-text);
}

.ui-input,
.ui-textarea,
.ui-select {
    display: block;
    width: 100%;
    min-height: var(--ui-control-md);
    padding: var(--ui-space-2) var(--ui-space-3);
    border: 1px solid var(--ui-input-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-input-bg);
    color: var(--ui-text);
    font: inherit;
    font-size: var(--ui-font-size-base);
    line-height: var(--ui-line-height-snug);
    transition:
        border-color var(--ui-duration-state) var(--ui-ease-out),
        box-shadow var(--ui-duration-state) var(--ui-ease-out),
        background-color var(--ui-duration-state) var(--ui-ease-out);
}

.ui-input::placeholder,
.ui-textarea::placeholder { color: var(--ui-input-placeholder); }

.ui-input:hover,
.ui-textarea:hover,
.ui-select:hover { border-color: var(--ui-input-border-hover); }

.ui-input:focus,
.ui-textarea:focus,
.ui-select:focus {
    outline: none;
    border-color: var(--ui-primary);
    box-shadow: var(--ui-focus-shadow);
}

.ui-input:disabled,
.ui-textarea:disabled,
.ui-select:disabled {
    opacity: var(--ui-disabled-opacity);
    cursor: not-allowed;
    background: var(--ui-fill);
}

.ui-input[aria-invalid='true'],
.ui-textarea[aria-invalid='true'],
.ui-select[aria-invalid='true'] { border-color: var(--ui-danger); animation: ui-shake 360ms var(--ui-ease-out); }

.ui-input[aria-invalid='true']:focus,
.ui-textarea[aria-invalid='true']:focus,
.ui-select[aria-invalid='true']:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-danger) 22%, transparent);
}

.ui-input--sm,
.ui-select--sm { min-height: var(--ui-control-sm); font-size: var(--ui-font-size-sm); padding-block: var(--ui-space-1); }
.ui-input--lg,
.ui-select--lg { min-height: var(--ui-control-lg); font-size: var(--ui-font-size-md); }

/* Pole „wypełnione" (bez ramki) — formularze w ciemnych kartach, logowanie. */
.ui-input--filled,
.ui-select--filled {
    border-color: transparent;
    background: var(--ui-fill);
    box-shadow: none;
}

.ui-input--filled:hover,
.ui-select--filled:hover { border-color: transparent; background: var(--ui-hover-bg); }
.ui-input--filled:focus,
.ui-select--filled:focus { border-color: var(--ui-primary); background: var(--ui-input-bg); }

.ui-textarea {
    min-height: 5rem;
    resize: vertical;
    line-height: var(--ui-line-height-normal);
}

/* Rośnie z treścią (ui.js: data-ui-autosize) — bez paska przewijania i bez uchwytu */
.ui-textarea[data-ui-autosize] { resize: none; overflow: hidden; transition: height var(--ui-duration-fast) var(--ui-ease-out); }

/* Licznik znaków: <p class="ui-hint ui-hint--count" data-ui-count="#id">0 / 200</p> */
.ui-hint--count { margin-left: auto; font-variant-numeric: tabular-nums; transition: color var(--ui-duration-state) ease; }
.ui-hint--count.is-near { color: var(--ui-warning-text); }
.ui-hint--count.is-full { color: var(--ui-danger-text); }
.ui-field__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ui-space-3); }

.ui-select {
    appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    cursor: pointer;
}

/* Pole z ikoną / dodatkiem: <div class="ui-input-group"><svg class="ui-icon">…<input class="ui-input"></div> */
.ui-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.ui-input-group > .ui-icon,
.ui-input-group > .ui-input-group__addon {
    position: absolute;
    left: var(--ui-space-3);
    color: var(--ui-text-subtle);
    pointer-events: none;
}

.ui-input-group > .ui-icon { width: var(--ui-icon-sm); height: var(--ui-icon-sm); }
.ui-input-group > .ui-input { padding-left: 2.25rem; }

.ui-input-group__end {
    position: absolute;
    right: var(--ui-space-2);
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-1);
}

.ui-input-group:has(.ui-input-group__end) > .ui-input { padding-right: 3.5rem; }

/* Kod jednorazowy (6 cyfr): <div class="ui-otp" data-ui-otp><input class="ui-otp__cell" …>
   ui.js: auto-przeskok, Backspace cofa, strzałki, wklejenie całego kodu, `is-filled` na komórce,
   `is-complete` + zdarzenie ui:otp na kontenerze; aria-invalid="true" na kontenerze = potrząśnięcie. */
.ui-otp {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-2);
}

.ui-otp__cell {
    --ui-otp-i: 0;

    width: 2.5rem;
    height: var(--ui-control-lg);
    border: 1px solid transparent;
    border-radius: var(--ui-radius-lg);
    background: var(--ui-fill);
    color: var(--ui-text);
    caret-color: var(--ui-primary);
    font: inherit;
    font-size: var(--ui-font-size-lg);
    font-weight: var(--ui-font-weight-semibold);
    text-align: center;
    font-variant-numeric: tabular-nums;
    transition:
        border-color var(--ui-duration-state) var(--ui-ease-out),
        background-color var(--ui-duration-state) var(--ui-ease-out),
        box-shadow var(--ui-duration-state) var(--ui-ease-out),
        transform var(--ui-duration) var(--ui-ease-spring),
        color var(--ui-duration-state) ease;
}

.ui-otp__cell::placeholder { color: var(--ui-text-disabled); }
.ui-otp__cell:hover { background: var(--ui-hover-bg); }

/* Aktywna komórka: unosi się i dostaje pierścień; wypełniona: tło akcentu */
.ui-otp__cell:focus {
    outline: none;
    border-color: var(--ui-primary);
    background: var(--ui-input-bg);
    box-shadow: var(--ui-focus-shadow);
    transform: translateY(-1px) scale(1.06);
}

.ui-otp__cell.is-filled {
    border-color: var(--ui-primary-border);
    background: var(--ui-primary-soft);
    color: var(--ui-primary-active);
    animation: ui-pop var(--ui-duration) var(--ui-ease-spring);
}

/* Komplet: wszystkie komórki „zaskakują" po kolei (ui.js nadaje --ui-otp-i) */
.ui-otp.is-complete .ui-otp__cell {
    border-color: var(--ui-primary);
    animation: ui-pop 280ms var(--ui-ease-spring);
    animation-delay: calc(var(--ui-otp-i) * 35ms);
}

/* Zły kod: potrząśnięcie całego rzędu, komórki w tonie błędu */
.ui-otp[aria-invalid='true'] { animation: ui-shake 360ms var(--ui-ease-out); }
.ui-otp[aria-invalid='true'] .ui-otp__cell { border-color: var(--ui-danger); background: var(--ui-danger-soft); color: var(--ui-danger-text); animation: none; }
.ui-otp[aria-invalid='true'] .ui-otp__cell:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-danger) 22%, transparent); }

.ui-otp__sep { color: var(--ui-text-subtle); }
.ui-otp--lg .ui-otp__cell { width: 3rem; height: 3.5rem; font-size: var(--ui-type-h2-size); border-radius: var(--ui-radius-xl); }

/* Kod z e-maila w jednym polu (apka mobilna: magic link) — alternatywa dla .ui-otp */
.ui-input--code {
    text-align: center;
    font-size: var(--ui-type-h1-size);
    font-weight: var(--ui-font-weight-bold);
    letter-spacing: 0.35em;
    font-variant-numeric: tabular-nums;
}

/* Pole do skopiowania (link portalu, token pokazywany raz) */
.ui-copy {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--ui-input-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-fill);
    overflow: hidden;
}

.ui-copy__value {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--ui-space-2) var(--ui-space-3);
    border: 0;
    background: transparent;
    color: var(--ui-text);
    font-family: var(--ui-font-mono);
    font-size: var(--ui-font-size-sm);
    text-overflow: ellipsis;
}

.ui-copy__value:focus { outline: none; }

.ui-copy__button {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-1-5);
    padding: 0 var(--ui-space-3);
    border: 0;
    border-left: 1px solid var(--ui-input-border);
    background: var(--ui-surface);
    color: var(--ui-text-secondary);
    font: inherit;
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-font-weight-semibold);
    cursor: pointer;
}

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

/* ── Checkbox, radio, przełącznik ───────────────────────────────────────── */

.ui-check {
    display: flex;
    align-items: flex-start;
    gap: var(--ui-space-2-5);
    cursor: pointer;
}

.ui-check__text { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }

.ui-check__label {
    font-size: var(--ui-font-size-base);
    font-weight: var(--ui-font-weight-medium);
    color: var(--ui-text);
    line-height: var(--ui-line-height-snug);
}

.ui-check__description {
    font-size: var(--ui-font-size-xs);
    color: var(--ui-text-muted);
    line-height: var(--ui-line-height-snug);
}

.ui-check:has(:disabled) { opacity: var(--ui-disabled-opacity); cursor: not-allowed; }

.ui-checkbox,
.ui-radio {
    appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0.0625rem 0 0;
    border: 1px solid var(--ui-border-strong);
    background: var(--ui-input-bg);
    cursor: pointer;
    transition:
        background-color var(--ui-duration-state) var(--ui-ease-out),
        border-color var(--ui-duration-state) var(--ui-ease-out),
        box-shadow var(--ui-duration-state) var(--ui-ease-out),
        transform var(--ui-duration-state) var(--ui-ease-spring);
}

.ui-checkbox { border-radius: var(--ui-radius-sm); }
.ui-radio { border-radius: 50%; }

/* Najechanie: ramka akcentu; nacisk: kontrolka lekko się kurczy */
.ui-checkbox:hover,
.ui-radio:hover { border-color: var(--ui-primary); }
.ui-checkbox:active,
.ui-radio:active { transform: scale(var(--ui-press-scale)); }

/* Znak rysowany sprężyną: ptaszek (maska) wskakuje z obrotu, kropka radia rośnie od zera */
.ui-checkbox::after,
.ui-radio::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #ffffff;
    opacity: 0;
    transform: scale(0.4) rotate(-14deg);
    transition: transform var(--ui-duration) var(--ui-ease-spring), opacity var(--ui-duration-fast) var(--ui-ease-out);
}

.ui-checkbox::after {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
}

.ui-checkbox:indeterminate::after {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M4 8h8'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M4 8h8'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
}

.ui-radio::after { inset: 0.25rem; border-radius: 50%; transform: scale(0); }

.ui-checkbox:checked,
.ui-checkbox:indeterminate,
.ui-radio:checked {
    border-color: var(--ui-primary);
    background: var(--ui-primary);
}

.ui-checkbox:checked::after,
.ui-checkbox:indeterminate::after,
.ui-radio:checked::after { opacity: 1; transform: scale(1) rotate(0deg); }

.ui-checkbox:focus-visible,
.ui-radio:focus-visible,
.ui-switch:focus-visible { outline: none; box-shadow: var(--ui-focus-shadow); }

/* Przełącznik: <input type="checkbox" role="switch" class="ui-switch"> */
.ui-switch {
    appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: 2.375rem;
    height: 1.375rem;
    margin: 0;
    border: 0;
    border-radius: var(--ui-radius-full);
    background: var(--ui-border-strong);
    box-shadow: inset 0 1px 2px rgb(3 7 18 / 0.12);
    cursor: pointer;
    transition: background-color var(--ui-duration) var(--ui-ease-out), box-shadow var(--ui-duration) var(--ui-ease-out);
}

.ui-switch:hover { background: color-mix(in srgb, var(--ui-border-strong) 80%, var(--ui-text)); }

.ui-switch::before {
    content: '';
    position: absolute;
    top: 0.1875rem;
    left: 0.1875rem;
    width: 1rem;
    height: 1rem;
    border-radius: var(--ui-radius-full);
    background: #ffffff;
    box-shadow: 0 1px 2px rgb(3 7 18 / 0.25);
    transition: transform var(--ui-duration) var(--ui-ease-spring), width var(--ui-duration-fast) var(--ui-ease-out);
}

/* Nacisk: kciuk rozciąga się w kierunku ruchu (HeroUI), po puszczeniu dojeżdża sprężyną */
.ui-switch:active::before { width: 1.25rem; }
.ui-switch:checked { background: var(--ui-primary); box-shadow: none; }
.ui-switch:checked:hover { background: var(--ui-primary-hover); }
.ui-switch:checked::before { transform: translateX(1rem); }
.ui-switch:checked:active::before { transform: translateX(0.75rem); }
.ui-switch:disabled { opacity: var(--ui-disabled-opacity); cursor: not-allowed; }
.ui-switch:disabled::before { width: 1rem; }

.ui-switch--sm { width: 1.875rem; height: 1.125rem; }
.ui-switch--sm::before { width: 0.75rem; height: 0.75rem; }
.ui-switch--sm:active::before { width: 0.9375rem; }
.ui-switch--sm:checked::before { transform: translateX(0.75rem); }
.ui-switch--sm:checked:active::before { transform: translateX(0.5625rem); }

/* Wiersz ustawienia: opis po lewej, przełącznik po prawej */
.ui-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-4);
    padding: var(--ui-space-3) 0;
}

.ui-setting + .ui-setting { border-top: 1px solid var(--ui-border-muted); }

/* Opcja-karta (checkbox/radio w ramce — wybór usług, linii, ról) */
.ui-option {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2-5);
    min-height: 2.5rem;
    padding: var(--ui-space-2) var(--ui-space-3);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    font-size: var(--ui-font-size-base);
    font-weight: var(--ui-font-weight-medium);
    cursor: pointer;
    transition: background-color var(--ui-duration-fast) ease, border-color var(--ui-duration-fast) ease;
}

.ui-option:hover {
    background: var(--ui-hover-bg);
    border-color: color-mix(in srgb, var(--ui-primary) 35%, var(--ui-border));
}

.ui-option:has(:checked) {
    border-color: var(--ui-primary);
    background: var(--ui-selected-bg);
}

.ui-option:has(:disabled) { opacity: var(--ui-disabled-opacity); cursor: not-allowed; }
.ui-option:active:not(:has(:disabled)) { transform: scale(var(--ui-press-scale)); }
.ui-option { transition: background-color var(--ui-duration-state) var(--ui-ease-out), border-color var(--ui-duration-state) var(--ui-ease-out), box-shadow var(--ui-duration-state) var(--ui-ease-out), transform var(--ui-duration-fast) var(--ui-ease-out); }

/* Opcja z ikoną i opisem (metoda płatności, wybór zadania w arkuszu) */
.ui-option__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2rem; height: 2rem; color: var(--ui-text-muted); }
.ui-option:has(:checked) .ui-option__icon { color: var(--ui-selected-text); }
.ui-option__body { display: flex; flex-direction: column; gap: 0.125rem; flex: 1 1 auto; min-width: 0; }
.ui-option__title { font-weight: var(--ui-font-weight-semibold); line-height: var(--ui-line-height-snug); }
.ui-option__hint { font-size: var(--ui-font-size-xs); font-weight: var(--ui-font-weight-normal); color: var(--ui-text-muted); line-height: var(--ui-line-height-snug); }
.ui-option__hint--warning { color: var(--ui-warning-text); }
.ui-option--lg { min-height: var(--ui-touch-target); padding: var(--ui-space-3); gap: var(--ui-space-3); }

.ui-option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--ui-space-2);
}

.ui-option-stack { display: flex; flex-direction: column; gap: var(--ui-space-2); }

/* ── Wyszukiwarka ───────────────────────────────────────────────────────── */

.ui-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.ui-search > .ui-icon {
    position: absolute;
    left: var(--ui-space-3);
    width: var(--ui-icon-sm);
    height: var(--ui-icon-sm);
    color: var(--ui-text-subtle);
    pointer-events: none;
}

.ui-search__input {
    width: 100%;
    min-height: var(--ui-control-md);
    padding: var(--ui-space-2) 3.5rem var(--ui-space-2) 2.25rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    color: var(--ui-text);
    font: inherit;
    font-size: var(--ui-font-size-sm);
    transition: border-color var(--ui-duration-fast) ease, box-shadow var(--ui-duration-fast) ease;
}

.ui-search__input::placeholder { color: var(--ui-text-subtle); }

.ui-search__input:hover { border-color: var(--ui-input-border-hover); }
.ui-search__input:focus {
    outline: none;
    border-color: var(--ui-primary);
    box-shadow: var(--ui-focus-shadow);
}

.ui-search > .ui-kbd { position: absolute; right: var(--ui-space-2); }

/* Przycisk czyszczenia (apka mobilna: „×" po wpisaniu frazy) — ui.js: [data-ui-clear] */
.ui-search__clear {
    position: absolute;
    right: var(--ui-space-1-5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ui-text-subtle);
    cursor: pointer;
}

.ui-search__clear:hover { color: var(--ui-text); background: var(--ui-hover-bg); }
.ui-search__clear .ui-icon { width: var(--ui-icon-sm); height: var(--ui-icon-sm); }
.ui-search__clear { transition: opacity var(--ui-duration-state) var(--ui-ease-out), transform var(--ui-duration-state) var(--ui-ease-spring), background-color var(--ui-duration-fast) ease; }
.ui-search:has(.ui-search__clear) .ui-search__input { padding-right: 2.5rem; }
.ui-search:has(.ui-search__input:placeholder-shown) .ui-search__clear { opacity: 0; transform: scale(0.6); pointer-events: none; }

/* Wariant „wypełniony" (telefon: pole na tle strony, cel dotyku 44 px, bez ramki) */
.ui-search--filled .ui-search__input {
    min-height: var(--ui-touch-target);
    border-color: transparent;
    background: var(--ui-fill);
    font-size: var(--ui-font-size-md);
}

.ui-search--filled .ui-search__input:hover { border-color: transparent; background: var(--ui-hover-bg); box-shadow: none; }
.ui-search--filled .ui-search__input:focus { border-color: var(--ui-primary); background: var(--ui-input-bg); }

/* ── Zakładki (pigułki ze ślizgającym się wskaźnikiem) ──────────────────── */

.ui-tabs {
    position: relative;
    display: flex;
    gap: var(--ui-space-1-5);
    max-width: 100%;
    overflow-x: auto;
    padding: var(--ui-space-0-5) var(--ui-space-1) var(--ui-space-1);
    margin: 0 calc(var(--ui-space-1) * -1);
    scrollbar-width: none;
}

.ui-tabs::-webkit-scrollbar { display: none; }

.ui-tab {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-1-5);
    padding: var(--ui-space-2) var(--ui-space-4);
    border: 0;
    border-radius: var(--ui-radius-lg);
    background: transparent;
    color: var(--ui-text-muted);
    font: inherit;
    font-size: var(--ui-font-size-base);
    font-weight: var(--ui-font-weight-medium);
    line-height: 1.25rem;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--ui-duration-state) var(--ui-ease-out), background-color var(--ui-duration-state) var(--ui-ease-out), transform var(--ui-duration-state) var(--ui-ease-spring);
}

.ui-tab:hover { color: var(--ui-text); background: var(--ui-hover-bg); }
.ui-tab:active { transform: scale(var(--ui-press-scale)); }
.ui-tab:focus-visible { outline: none; box-shadow: var(--ui-focus-shadow); }

.ui-tab[aria-selected='true'],
.ui-tab[aria-current='page'],
.ui-tab.is-active {
    color: var(--ui-selected-text);
    background: var(--ui-selected-bg);
}

/* Gdy wskaźnik jest gotowy (ui.js / pill-tabs.js), to on rysuje tło aktywnej zakładki. */
.ui-tabs.is-ready .ui-tab[aria-selected='true'],
.ui-tabs.is-ready .ui-tab[aria-current='page'],
.ui-tabs.is-ready .ui-tab.is-active {
    background: transparent;
    box-shadow: none;
}

.ui-tabs__indicator {
    position: absolute;
    top: var(--ui-space-0-5);
    left: 0;
    z-index: 0;
    height: calc(100% - 0.375rem);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-primary-soft);
    opacity: 0;
    pointer-events: none;
    transition:
        transform var(--ui-duration-slow) var(--ui-ease-spring),
        width var(--ui-duration-slow) var(--ui-ease-spring),
        opacity 150ms ease;
}

.ui-tabs.is-ready .ui-tabs__indicator { opacity: 1; }

.ui-tab__count {
    transition: background-color var(--ui-duration-state) var(--ui-ease-out), color var(--ui-duration-state) var(--ui-ease-out);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 var(--ui-space-1-5);
    border-radius: var(--ui-radius-full);
    background: var(--ui-fill-hover);
    font-size: var(--ui-font-size-2xs);
    font-weight: var(--ui-font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.ui-tab[aria-selected='true'] .ui-tab__count,
.ui-tab[aria-current='page'] .ui-tab__count,
.ui-tab.is-active .ui-tab__count {
    background: var(--ui-primary-soft-hover);
    color: var(--ui-selected-text);
}

/* Wariant „podkreślenie" — zakładki wewnątrz kart i szuflad */
.ui-tabs--underline {
    gap: var(--ui-space-4);
    padding: 0;
    margin: 0;
    border-bottom: 1px solid var(--ui-border);
}

.ui-tabs--underline .ui-tab {
    padding: var(--ui-space-2-5) 0;
    border-radius: 0;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
}

.ui-tabs--underline .ui-tab:hover { background: transparent; }

.ui-tabs--underline .ui-tab[aria-selected='true'],
.ui-tabs--underline .ui-tab[aria-current='page'],
.ui-tabs--underline .ui-tab.is-active {
    color: var(--ui-selected-text);
    background: transparent;
    box-shadow: none;
    border-bottom-color: var(--ui-primary);
}

.ui-tabs--underline .ui-tab:active { transform: none; }

/* Z ui.js: podkreślenie jedzie sprężyną między zakładkami zamiast przeskakiwać */
.ui-tabs--underline .ui-tabs__indicator {
    top: auto;
    bottom: -1px;
    height: 2px;
    border-radius: var(--ui-radius-full);
    background: var(--ui-primary);
    box-shadow: none;
}

.ui-tabs--underline.is-ready .ui-tab[aria-selected='true'],
.ui-tabs--underline.is-ready .ui-tab[aria-current='page'],
.ui-tabs--underline.is-ready .ui-tab.is-active { border-bottom-color: transparent; }

.ui-tab-panel[hidden] { display: none; }

/* ── Przełącznik segmentowy ─────────────────────────────────────────────── */

.ui-segmented {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-0-5);
    padding: 0.1875rem;
    border-radius: var(--ui-radius-lg);
    background: var(--ui-fill);
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.ui-segmented__item {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-1-5);
    min-height: 2rem;
    padding: 0 var(--ui-space-3);
    border: 0;
    border-radius: var(--ui-radius-sm);
    background: transparent;
    color: var(--ui-text-muted);
    font: inherit;
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-font-weight-semibold);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--ui-duration-state) var(--ui-ease-out), background-color var(--ui-duration-state) var(--ui-ease-out), box-shadow var(--ui-duration-state) var(--ui-ease-out), transform var(--ui-duration-state) var(--ui-ease-spring);
}

.ui-segmented__item:hover { color: var(--ui-text); }
.ui-segmented__item:active { transform: scale(var(--ui-press-scale)); }
.ui-segmented__item:focus-visible { outline: none; box-shadow: var(--ui-focus-shadow); }

/* Wskaźnik (ui.js dokłada go do [data-ui-segmented] i przesuwa sprężyną pod wybrany segment) */
.ui-segmented__indicator {
    position: absolute;
    top: 0.1875rem;
    left: 0;
    z-index: 0;
    height: calc(100% - 0.375rem);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-sm);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--ui-duration-slow) var(--ui-ease-spring), width var(--ui-duration-slow) var(--ui-ease-spring), opacity 150ms ease;
}

.ui-segmented.is-ready .ui-segmented__indicator { opacity: 1; }
.ui-segmented.is-ready .ui-segmented__item[aria-pressed='true'],
.ui-segmented.is-ready .ui-segmented__item[aria-selected='true'],
.ui-segmented.is-ready .ui-segmented__item:has(input:checked) { background: transparent; box-shadow: none; }
.ui-segmented--primary .ui-segmented__indicator { background: var(--ui-primary-soft); box-shadow: none; }

.ui-segmented__item[aria-pressed='true'],
.ui-segmented__item[aria-selected='true'],
.ui-segmented__item:has(input:checked) {
    color: var(--ui-text);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-sm);
}

.ui-segmented__item:disabled { opacity: var(--ui-disabled-opacity); cursor: not-allowed; }
.ui-segmented__item input { position: absolute; opacity: 0; pointer-events: none; }

/* Wariant „akcent" — wybór, który ma zostać zauważony (ustawienia apki) */
.ui-segmented--primary .ui-segmented__item[aria-pressed='true'],
.ui-segmented--primary .ui-segmented__item[aria-selected='true'],
.ui-segmented--primary .ui-segmented__item:has(input:checked) {
    color: var(--ui-selected-text);
    background: var(--ui-selected-bg);
    box-shadow: none;
}

.ui-segmented--block { display: flex; }
.ui-segmented--block .ui-segmented__item { flex: 1 1 0; }

/* ── Chip filtra ────────────────────────────────────────────────────────── */

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

/* Rząd filtrów przewijany w poziomie (telefon): bez zawijania, pasek przewijania ukryty,
   wewnętrzny odstęp 16 px wyrównany do krawędzi ekranu. */
.ui-chips--scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: var(--ui-space-3) var(--ui-space-4);
    margin: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.ui-chips--scroll::-webkit-scrollbar { display: none; }
.ui-chips__divider { flex: 0 0 auto; align-self: stretch; width: 1px; margin: 0 var(--ui-space-1); background: var(--ui-border); }

.ui-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-1-5);
    min-height: var(--ui-control-sm);
    padding: 0 var(--ui-space-3);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    color: var(--ui-text-muted);
    font: inherit;
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-font-weight-medium);
    line-height: 1.25rem;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--ui-duration-state) var(--ui-ease-out), border-color var(--ui-duration-state) var(--ui-ease-out), background-color var(--ui-duration-state) var(--ui-ease-out), transform var(--ui-duration-state) var(--ui-ease-spring);
}

.ui-chip:hover { color: var(--ui-text); border-color: var(--ui-border-strong); background: var(--ui-hover-bg); }
.ui-chip:active { transform: scale(var(--ui-press-scale)); }
.ui-chip:focus-visible { outline: none; box-shadow: var(--ui-focus-shadow); }
.ui-chip .ui-icon { width: var(--ui-icon-sm); height: var(--ui-icon-sm); }

.ui-chip[aria-pressed='true'],
.ui-chip[aria-current='true'],
.ui-chip.is-active {
    border-color: var(--ui-primary);
    background: var(--ui-selected-bg);
    color: var(--ui-selected-text);
}

/* Telefon: pigułka wyższa (36 px) + zapas dotyku w pionie bez nachodzenia na sąsiada */
.ui-chip--lg { min-height: 2.25rem; padding: 0 0.875rem; font-size: var(--ui-font-size-sm); }

.ui-chip[aria-pressed='true']:hover,
.ui-chip[aria-current='true']:hover,
.ui-chip.is-active:hover { background: var(--ui-primary-soft-hover); }

.ui-chip__count {
    transition: background-color var(--ui-duration-state) var(--ui-ease-out), color var(--ui-duration-state) var(--ui-ease-out);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.125rem;
    padding: 0 var(--ui-space-1-5);
    border-radius: var(--ui-radius-full);
    background: var(--ui-fill-hover);
    font-size: var(--ui-font-size-2xs);
    font-weight: var(--ui-font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.ui-chip__remove {
    display: inline-flex;
    margin-right: calc(var(--ui-space-1) * -1);
    padding: 0.125rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.ui-chip__remove { transition: background-color var(--ui-duration-fast) ease, transform var(--ui-duration-state) var(--ui-ease-spring); }
.ui-chip__remove:hover { background: var(--ui-hover-bg); }

/* ── Odznaka ────────────────────────────────────────────────────────────── */

.ui-badge {
    --ui-badge-bg: var(--ui-neutral-soft);
    --ui-badge-color: var(--ui-neutral-text);
    --ui-badge-border: var(--ui-neutral-border);

    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-1);
    max-width: 100%;
    padding: 0.1875rem var(--ui-space-2);
    border: 1px solid var(--ui-badge-border);
    border-radius: var(--ui-radius-full);
    background: var(--ui-badge-bg);
    color: var(--ui-badge-color);
    font-size: var(--ui-font-size-xs);
    font-weight: var(--ui-font-weight-medium);
    line-height: 1.1;
    white-space: nowrap;
    vertical-align: middle;
}

.ui-badge .ui-icon { width: var(--ui-icon-xs); height: var(--ui-icon-xs); }

.ui-badge--primary { --ui-badge-bg: var(--ui-primary-soft); --ui-badge-color: var(--ui-primary-text); --ui-badge-border: var(--ui-primary-border); }
.ui-badge--success { --ui-badge-bg: var(--ui-success-soft); --ui-badge-color: var(--ui-success-text); --ui-badge-border: var(--ui-success-border); }
.ui-badge--warning { --ui-badge-bg: var(--ui-warning-soft); --ui-badge-color: var(--ui-warning-text); --ui-badge-border: var(--ui-warning-border); }
.ui-badge--danger { --ui-badge-bg: var(--ui-danger-soft); --ui-badge-color: var(--ui-danger-text); --ui-badge-border: var(--ui-danger-border); }
.ui-badge--info { --ui-badge-bg: var(--ui-info-soft); --ui-badge-color: var(--ui-info-text); --ui-badge-border: var(--ui-info-border); }
/* Stan drugoplanowy („Nieaktywny", „Archiwum") — jaśniejszy napis niż neutralny; ton `subtle` z apki mobilnej */
.ui-badge--subtle { --ui-badge-bg: var(--ui-fill); --ui-badge-color: var(--ui-text-subtle); --ui-badge-border: transparent; }
/* Akcent mocniejszy niż --primary („W trakcie" na telefonie) — ton `accent` z apki mobilnej */
.ui-badge--accent { --ui-badge-bg: var(--ui-primary-soft); --ui-badge-color: var(--ui-primary-active); --ui-badge-border: var(--ui-primary-border); font-weight: var(--ui-font-weight-semibold); }

.ui-badge--solid { --ui-badge-border: transparent; color: #ffffff; }
.ui-badge--solid.ui-badge--primary { --ui-badge-bg: var(--ui-primary); }
.ui-badge--solid.ui-badge--success { --ui-badge-bg: var(--ui-success); }
.ui-badge--solid.ui-badge--warning { --ui-badge-bg: var(--ui-warning); }
.ui-badge--solid.ui-badge--danger { --ui-badge-bg: var(--ui-danger); }
.ui-badge--solid.ui-badge--info { --ui-badge-bg: var(--ui-info); }

/* Etykieta techniczna (DRAFT, BETA, v1) — mała, wersalikami */
.ui-badge--caps {
    padding: 0.125rem var(--ui-space-1-5);
    border-radius: var(--ui-radius-sm);
    font-size: var(--ui-font-size-2xs);
    font-weight: var(--ui-font-weight-semibold);
    letter-spacing: var(--ui-letter-spacing-wide);
    text-transform: uppercase;
}

.ui-badge--lg { padding: var(--ui-space-1) var(--ui-space-3); font-size: var(--ui-font-size-sm); }

.ui-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}

.ui-dot--success { color: var(--ui-success); }
.ui-dot--warning { color: var(--ui-warning); }
.ui-dot--danger { color: var(--ui-danger); }
.ui-dot--info { color: var(--ui-info); }
.ui-dot--neutral { color: var(--ui-neutral); }
.ui-dot--primary { color: var(--ui-primary); }
.ui-dot--pulse { box-shadow: 0 0 0 0 currentColor; animation: ui-pulse 1.8s ease-out infinite; }

/* ── Status zadania: <span class="ui-status" data-status="in_progress">W toku</span> ── */

.ui-status {
    --ui-status-bg: var(--ui-neutral-soft);
    --ui-status-color: var(--ui-neutral-text);

    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-1-5);
    padding: 0.125rem var(--ui-space-2);
    border-radius: var(--ui-radius-full);
    background: var(--ui-status-bg);
    color: var(--ui-status-color);
    font-size: var(--ui-font-size-2xs);
    font-weight: var(--ui-font-weight-semibold);
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: uppercase;
    white-space: nowrap;
}

.ui-status--dot::before {
    content: '';
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: currentColor;
}

/* Sama kropka statusu 8 px (gęsta lista, kolumna bez miejsca na pigułkę) — etykietę daj w title/aria-label */
.ui-status--bare { width: 0.5rem; height: 0.5rem; padding: 0; gap: 0; border-radius: 50%; background: var(--ui-status-color); font-size: 0; }
.ui-status--bare::before { content: none; }

.ui-status--plain { text-transform: none; letter-spacing: 0; font-size: var(--ui-font-size-xs); font-weight: var(--ui-font-weight-semibold); }

.ui-status[data-status='requested'] { --ui-status-bg: var(--ui-status-requested-bg); --ui-status-color: var(--ui-status-requested-text); }
.ui-status[data-status='quoted'] { --ui-status-bg: var(--ui-status-quoted-bg); --ui-status-color: var(--ui-status-quoted-text); }
.ui-status[data-status='draft'] { --ui-status-bg: var(--ui-status-draft-bg); --ui-status-color: var(--ui-status-draft-text); }
.ui-status[data-status='planned'] { --ui-status-bg: var(--ui-status-planned-bg); --ui-status-color: var(--ui-status-planned-text); }
.ui-status[data-status='in_progress'] { --ui-status-bg: var(--ui-status-in_progress-bg); --ui-status-color: var(--ui-status-in_progress-text); }
.ui-status[data-status='paused'] { --ui-status-bg: var(--ui-status-paused-bg); --ui-status-color: var(--ui-status-paused-text); }
.ui-status[data-status='to_settle'] { --ui-status-bg: var(--ui-status-to_settle-bg); --ui-status-color: var(--ui-status-to_settle-text); }
.ui-status[data-status='to_review'] { --ui-status-bg: var(--ui-status-to_review-bg); --ui-status-color: var(--ui-status-to_review-text); }
.ui-status[data-status='to_fix'] { --ui-status-bg: var(--ui-status-to_fix-bg); --ui-status-color: var(--ui-status-to_fix-text); }
.ui-status[data-status='accepted'] { --ui-status-bg: var(--ui-status-accepted-bg); --ui-status-color: var(--ui-status-accepted-text); }
.ui-status[data-status='done'] { --ui-status-bg: var(--ui-status-done-bg); --ui-status-color: var(--ui-status-done-text); }
.ui-status[data-status='cancelled'] { --ui-status-bg: var(--ui-status-cancelled-bg); --ui-status-color: var(--ui-status-cancelled-text); }

/* ── Awatar ─────────────────────────────────────────────────────────────── */

.ui-avatar {
    --ui-avatar-size: 2rem;
    --ui-avatar-color: var(--ui-gray-400);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--ui-avatar-size);
    height: var(--ui-avatar-size);
    border-radius: 50%;
    background: color-mix(in srgb, var(--ui-avatar-color) 18%, var(--ui-surface));
    color: color-mix(in srgb, var(--ui-avatar-color) 70%, var(--ui-text));
    font-size: calc(var(--ui-avatar-size) * 0.36);
    font-weight: var(--ui-font-weight-semibold);
    line-height: 1;
    text-transform: uppercase;
    overflow: hidden;
    user-select: none;
    transition: transform var(--ui-duration-state) var(--ui-ease-spring), box-shadow var(--ui-duration-state) var(--ui-ease-out);
}

a.ui-avatar,
button.ui-avatar { border: 0; padding: 0; cursor: pointer; text-decoration: none; }
a.ui-avatar:active,
button.ui-avatar:active { transform: scale(var(--ui-press-scale)); transition-duration: 0ms; }
a.ui-avatar:focus-visible,
button.ui-avatar:focus-visible { outline: none; box-shadow: var(--ui-focus-shadow); }

/* Kwadrat z zaokrągleniem: logo firmy, ikona apki */
.ui-avatar--square { border-radius: var(--ui-radius-lg); }
.ui-avatar--square.ui-avatar--xs,
.ui-avatar--square.ui-avatar--sm { border-radius: var(--ui-radius-sm); }
.ui-avatar--square.ui-avatar--xl,
.ui-avatar--square.ui-avatar--2xl { border-radius: var(--ui-radius-xl); }

.ui-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ui-avatar--xs { --ui-avatar-size: 1.375rem; }
.ui-avatar--sm { --ui-avatar-size: 1.5rem; }
.ui-avatar--lg { --ui-avatar-size: 2.5rem; }
.ui-avatar--xl { --ui-avatar-size: 3.5rem; }

/* Pierścień w kolorze osoby (zespół, przypisani) */
.ui-avatar--ring {
    overflow: visible;
    box-shadow: 0 0 0 2px var(--ui-surface), 0 0 0 4px var(--ui-avatar-color);
}

.ui-avatar--ring img { border-radius: inherit; }

.ui-avatar__status {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 30%;
    height: 30%;
    min-width: 0.5rem;
    min-height: 0.5rem;
    border-radius: 50%;
    border: 2px solid var(--ui-surface);
    background: var(--ui-success);
}

.ui-avatar__status--away { background: var(--ui-warning); }
.ui-avatar__status--busy { background: var(--ui-danger); }
.ui-avatar__status--offline { background: var(--ui-neutral); }

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

.ui-avatar-group > .ui-avatar {
    box-shadow: 0 0 0 2px var(--ui-surface);
}

.ui-avatar-group > .ui-avatar + .ui-avatar { margin-left: calc(var(--ui-avatar-size) * -0.28); }

/* Grupa interaktywna: najechany awatar wychodzi na wierzch (pierścień + cień), zero przesuwania sąsiadów */
.ui-avatar-group--interactive > .ui-avatar { position: relative; cursor: pointer; }
.ui-avatar-group--interactive > .ui-avatar:hover { z-index: 1; box-shadow: 0 0 0 2px var(--ui-surface), var(--ui-shadow-sm); }

/* Pełny kolor osoby/firmy z białymi inicjałami (apka mobilna, logo klienta bez obrazka) */
.ui-avatar--solid { background: var(--ui-avatar-color); color: #ffffff; }
.ui-avatar--2xl { --ui-avatar-size: 5.25rem; }

.ui-avatar--more {
    --ui-avatar-color: var(--ui-gray-500);
    background: var(--ui-fill-strong);
    color: var(--ui-text-secondary);
    font-size: calc(var(--ui-avatar-size) * 0.32);
    text-transform: none;
}

/* ── Karta ──────────────────────────────────────────────────────────────── */

/* Karta, kafel i kafel KPI jako <button>: dziedziczą pismo i wyrównanie, bez domyślnego centrowania przeglądarki */
button.ui-card,
button.ui-tile,
button.ui-stat { font: inherit; text-align: inherit; color: inherit; cursor: pointer; }

.ui-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xl);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-xs);
    color: var(--ui-text);
}

.ui-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ui-space-4);
    padding: var(--ui-space-4) var(--ui-space-5);
    border-bottom: 1px solid var(--ui-border-muted);
}

.ui-card__title {
    margin: 0;
    font-size: var(--ui-font-size-md);
    font-weight: var(--ui-font-weight-semibold);
    line-height: var(--ui-line-height-snug);
}

.ui-card__description {
    margin: var(--ui-space-1) 0 0;
    font-size: var(--ui-font-size-sm);
    color: var(--ui-text-muted);
    line-height: var(--ui-line-height-normal);
}

.ui-card__body { padding: var(--ui-space-5); }
.ui-card__body--flush { padding: 0; }

.ui-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ui-space-2);
    padding: var(--ui-space-3) var(--ui-space-5);
    border-top: 1px solid var(--ui-border-muted);
    background: var(--ui-surface-sunken);
    border-radius: 0 0 var(--ui-radius-xl) var(--ui-radius-xl);
}

.ui-card--interactive {
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--ui-duration) var(--ui-ease), box-shadow var(--ui-duration) ease, border-color var(--ui-duration) ease;
}

.ui-card--interactive:hover {
    transform: translateY(-1px);
    border-color: var(--ui-border-strong);
    box-shadow: var(--ui-shadow-md);
}

.ui-card--interactive:hover .ui-card__title { color: var(--ui-primary-text); }
.ui-card__title { transition: color var(--ui-duration-state) var(--ui-ease-out); }

.ui-card--interactive:focus-visible { outline: none; box-shadow: var(--ui-focus-shadow); }

/* Dotyk: karta przygasa zamiast unosić się (telefon nie ma najechania — `PressableCard`) */
.ui-card--interactive:active { transform: none; opacity: var(--ui-press-opacity); transition-duration: 0ms; }

/* Karta jednoelementowa (telefon): treść bez nagłówka/stopki, padding 16 px, rząd albo stos */
.ui-card--pad { padding: var(--ui-space-4); gap: var(--ui-space-2); }
.ui-card--row { flex-direction: row; align-items: center; gap: var(--ui-space-3); }
.ui-card--row > .ui-icon:last-child { color: var(--ui-text-disabled); }
.ui-card__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--ui-space-2); }

.ui-card--muted { background: var(--ui-fill); box-shadow: none; }
.ui-card--dashed { border-style: dashed; box-shadow: none; background: transparent; }
.ui-card--elevated { border-color: transparent; box-shadow: var(--ui-shadow-lg), var(--ui-shadow-highlight); }

/* ── Kafel encji (linia, usługa, apka, klient) ──────────────────────────── */

.ui-tile {
    --ui-tile-accent: var(--ui-primary);

    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-3);
    min-width: 0;
    padding: var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xl);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-xs), 0 0 0 1px rgb(0 0 0 / 0.02);
    color: var(--ui-text);
    text-decoration: none;
    transition: transform var(--ui-duration) var(--ui-ease), box-shadow var(--ui-duration) ease, border-color var(--ui-duration) ease;
}

a.ui-tile:hover,
button.ui-tile:hover,
.ui-tile--interactive:hover {
    transform: translateY(-1px);
    border-color: var(--ui-border-strong);
    box-shadow: var(--ui-shadow-md);
}

.ui-tile:focus-visible { outline: none; box-shadow: var(--ui-focus-shadow); }

.ui-tile__accent {
    height: 0.25rem;
    width: 2.5rem;
    border-radius: var(--ui-radius-full);
    background: var(--ui-tile-accent);
}

.ui-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid color-mix(in srgb, var(--ui-tile-accent) 25%, var(--ui-border));
    border-radius: var(--ui-radius-lg);
    background: color-mix(in srgb, var(--ui-tile-accent) 10%, var(--ui-surface));
    color: var(--ui-tile-accent);
}

.ui-tile__title {
    margin: 0;
    font-size: var(--ui-font-size-md);
    font-weight: var(--ui-font-weight-semibold);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ui-tile__meta {
    margin: 0;
    font-size: var(--ui-font-size-sm);
    color: var(--ui-text-muted);
}

.ui-tile__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-1-5);
    margin-top: auto;
}

.ui-tile--inactive { opacity: var(--ui-disabled-opacity); }

.ui-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: var(--ui-space-4);
}

/* ── Kafel KPI ──────────────────────────────────────────────────────────── */

.ui-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--ui-space-4);
}

.ui-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-1);
    min-width: 0;
    padding: var(--ui-space-4) var(--ui-space-5);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xl);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-xs);
    text-decoration: none;
    color: inherit;
    transition:
        border-color var(--ui-duration-state) var(--ui-ease-out),
        box-shadow var(--ui-duration-state) var(--ui-ease-out),
        transform var(--ui-duration-state) var(--ui-ease-out);
}

/* Pasek pod liczbą („12 z 26 dni") — zwykły ui-progress w kaflu */
.ui-stat > .ui-progress { margin-top: var(--ui-space-2); }

.ui-stat__label {
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-font-weight-medium);
    color: var(--ui-text-muted);
    transition: color var(--ui-duration-state) var(--ui-ease-out);
}

/* Kafelek ikony nad liczbą (apka mobilna: Panel — urlop, premia). Ton kafla barwi ikonę. */
.ui-stat__icon {
    --ui-stat-icon-color: var(--ui-primary);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ui-icon-tile);
    height: var(--ui-icon-tile);
    margin-bottom: var(--ui-space-1);
    border-radius: var(--ui-radius-lg);
    background: color-mix(in srgb, var(--ui-stat-icon-color) 12%, transparent);
    color: var(--ui-stat-icon-color);
}

.ui-stat--info .ui-stat__icon { --ui-stat-icon-color: var(--ui-info); }
.ui-stat--success .ui-stat__icon { --ui-stat-icon-color: var(--ui-success); }
.ui-stat--warning .ui-stat__icon { --ui-stat-icon-color: var(--ui-warning); }
.ui-stat--danger .ui-stat__icon { --ui-stat-icon-color: var(--ui-danger); }
.ui-stat--neutral .ui-stat__icon { --ui-stat-icon-color: var(--ui-text-muted); }

/* Kafel-wiersz: ikona, liczba z etykietą, strzałka (telefon: „Zadania w toku →") */
.ui-stat--row { flex-direction: row; align-items: center; gap: var(--ui-space-3); }
.ui-stat--row .ui-stat__icon { margin: 0; }
.ui-stat--row .ui-stat__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ui-stat--row > .ui-icon:last-child { color: var(--ui-text-disabled); transition: transform var(--ui-duration-state) var(--ui-ease-out), color var(--ui-duration-state) var(--ui-ease-out); }
a.ui-stat--row:hover > .ui-icon:last-child { color: var(--ui-text-muted); }
.ui-stat--row .ui-stat__value { font-size: var(--ui-type-h2-size); line-height: 1.2; }

/* Siatka 2 kolumn na telefonie (kafle urlopu) */
.ui-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-3); }

/* Liczba: 24 px w wierszu 28 px (jak 1.4), pełny kontrast tekstu i ciaśniejsze cyfry (wzorzec Geist) */
.ui-stat__value {
    font-size: var(--ui-font-size-2xl);
    font-weight: var(--ui-font-weight-bold);
    line-height: 1.75rem;
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--ui-letter-spacing-tight);
    white-space: nowrap;
}

.ui-stat__hint {
    font-size: var(--ui-font-size-xs);
    color: var(--ui-text-subtle);
}

/* Trend jako pigułka w tonie: tło z koloru tekstu, więc działa w obu motywach */
.ui-stat__trend {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: var(--ui-space-1);
    height: 1.25rem;
    padding: 0 var(--ui-space-1-5);
    border-radius: var(--ui-radius-full);
    background: color-mix(in srgb, currentColor 10%, transparent);
    font-size: var(--ui-font-size-xs);
    font-weight: var(--ui-font-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--ui-text-muted);
}

.ui-stat__trend .ui-icon { width: var(--ui-icon-xs); height: var(--ui-icon-xs); }
.ui-stat__trend--up { color: var(--ui-success-text); }
.ui-stat__trend--down { color: var(--ui-danger-text); }
.ui-stat__trend--flat { color: var(--ui-text-muted); }

.ui-stat--success .ui-stat__hint { color: var(--ui-success-text); }
.ui-stat--warning { border-color: var(--ui-warning-border); }
.ui-stat--warning .ui-stat__value,
.ui-stat--warning .ui-stat__hint { color: var(--ui-warning-text); }
.ui-stat--danger { border-color: var(--ui-danger-border); }
.ui-stat--danger .ui-stat__value,
.ui-stat--danger .ui-stat__hint { color: var(--ui-danger-text); }

a.ui-stat:hover { border-color: var(--ui-border-strong); box-shadow: var(--ui-shadow-md); transform: translateY(-1px); }
a.ui-stat:hover .ui-stat__label { color: var(--ui-text-secondary); }
a.ui-stat:active { transform: none; box-shadow: var(--ui-shadow-xs); transition-duration: 0ms; }
a.ui-stat:focus-visible { outline: none; box-shadow: var(--ui-focus-shadow); }

/* Ładowanie: szkielety w miejscu etykiety i liczby, kafel nie zmienia wysokości */
.ui-stat .ui-skeleton--text { height: 0.8125rem; margin: 0.25rem 0; width: 55%; }
.ui-stat .ui-skeleton--value { height: 1.25rem; margin: 0.25rem 0; width: 40%; }

/* ── Tabela ─────────────────────────────────────────────────────────────── */

.ui-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xl);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-xs);
}

.ui-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ui-font-size-base);
    color: var(--ui-text);
}

.ui-table th {
    padding: var(--ui-space-3) var(--ui-space-4);
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-fill);
    color: var(--ui-text-secondary);
    font-size: var(--ui-font-size-xs);
    font-weight: var(--ui-font-weight-semibold);
    text-align: left;
    white-space: nowrap;
    transition: color var(--ui-duration-state) var(--ui-ease-out);
}

/* Sortowanie: <th aria-sort="ascending"><button class="ui-table__sort">Kwota [[icon:arrow-up]]</button></th>
   Strzałka pojawia się przy najechaniu, aktywna kolumna ma ją na stałe; malejąco = obrócona. */
.ui-table__sort {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-1);
    margin: calc(var(--ui-space-1) * -1) calc(var(--ui-space-1-5) * -1);
    padding: var(--ui-space-1) var(--ui-space-1-5);
    border: 0;
    border-radius: var(--ui-radius-sm);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: inherit;
    white-space: inherit;
    cursor: pointer;
    transition: color var(--ui-duration-state) var(--ui-ease-out), background-color var(--ui-duration-state) var(--ui-ease-out);
}

.ui-table__sort .ui-icon {
    width: var(--ui-icon-sm);
    height: var(--ui-icon-sm);
    opacity: 0;
    transform: translateY(2px);
    transition: opacity var(--ui-duration-state) var(--ui-ease-out), transform var(--ui-duration-state) var(--ui-ease-out), color var(--ui-duration-state) var(--ui-ease-out);
}

.ui-table th:hover .ui-table__sort { color: var(--ui-text); }
.ui-table th:hover .ui-table__sort .ui-icon { opacity: 0.5; transform: none; }
.ui-table__sort:focus-visible { outline: none; box-shadow: var(--ui-focus-shadow); }
.ui-table th[aria-sort='ascending'],
.ui-table th[aria-sort='descending'] { color: var(--ui-text); }
.ui-table th[aria-sort='ascending'] .ui-table__sort .ui-icon,
.ui-table th[aria-sort='descending'] .ui-table__sort .ui-icon { opacity: 1; transform: none; color: var(--ui-primary-text); }
.ui-table th[aria-sort='descending'] .ui-table__sort .ui-icon { transform: rotate(180deg); }

.ui-table td {
    padding: var(--ui-space-3) var(--ui-space-4);
    border-bottom: 1px solid var(--ui-border-muted);
    vertical-align: middle;
}

.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table tbody tr { transition: background-color var(--ui-duration-fast) var(--ui-ease-out); }
.ui-table tbody tr:hover { background: var(--ui-hover-bg); }

/* Wiersz-link (klik w cały wiersz) i wiersz zaznaczony: pasek akcentu wewnątrz komórki, bez zmiany układu */
.ui-table tbody tr.is-link { cursor: pointer; }
.ui-table tbody tr.is-link:active { background: var(--ui-fill-strong); transition-duration: 0ms; }
.ui-table tbody tr.is-selected { background: var(--ui-selected-bg); }
.ui-table tbody tr.is-selected:hover { background: var(--ui-primary-soft-hover); }
.ui-table tbody tr.is-selected > td:first-child { box-shadow: inset 2px 0 0 var(--ui-primary); }

/* Akcje w wierszu: wyciszone, pełne przy najechaniu/fokusie; na dotyku zawsze pełne */
.ui-table .is-actions .ui-btn { opacity: 0.55; transition: opacity var(--ui-duration-state) var(--ui-ease-out), transform var(--ui-duration-fast) var(--ui-ease-out), background-color var(--ui-duration-state) var(--ui-ease-out), color var(--ui-duration-state) var(--ui-ease-out); }
.ui-table tbody tr:hover .is-actions .ui-btn,
.ui-table .is-actions .ui-btn:focus-visible,
.ui-table .is-actions .ui-btn[aria-expanded='true'] { opacity: 1; }

/* Ładowanie: treść przygasa, nie znika (wysokość zostaje); pusty wiersz w tabeli z filtrem */
.ui-table-wrap.is-loading tbody,
.ui-table-wrap[aria-busy='true'] tbody { opacity: 0.45; pointer-events: none; transition: opacity var(--ui-duration) var(--ui-ease-out); }
.ui-table tbody { transition: opacity var(--ui-duration) var(--ui-ease-out); }
.ui-table__empty td { padding: var(--ui-space-8) var(--ui-space-4); text-align: center; color: var(--ui-text-muted); font-size: var(--ui-font-size-sm); }

/* Nagłówek przyklejony przy przewijaniu w ramce (border-collapse nie trzyma krawędzi — stąd cień 1 px) */
.ui-table-wrap--sticky { max-height: 24rem; overflow: auto; }
.ui-table-wrap--sticky th { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--ui-border); }

/* Stopka: podsumowanie i stronicowanie pod tabelą, w tej samej ramce */
.ui-table__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-2) var(--ui-space-4);
    padding: var(--ui-space-2) var(--ui-space-4);
    border-top: 1px solid var(--ui-border);
    background: var(--ui-fill);
    font-size: var(--ui-font-size-sm);
    color: var(--ui-text-muted);
    font-variant-numeric: tabular-nums;
}

.ui-table--striped tbody tr:nth-child(even) { background: color-mix(in srgb, var(--ui-fill) 55%, transparent); }
.ui-table--striped tbody tr:hover { background: var(--ui-hover-bg); }

.ui-table .is-numeric,
.ui-table td.ui-num,
.ui-table th.ui-num { text-align: right; font-variant-numeric: tabular-nums; }

.ui-table .is-actions { width: 1%; text-align: right; white-space: nowrap; }

.ui-table__primary { font-weight: var(--ui-font-weight-semibold); }
.ui-table__secondary { display: block; font-size: var(--ui-font-size-xs); color: var(--ui-text-muted); }

.ui-table--compact th,
.ui-table--compact td { padding: var(--ui-space-2) var(--ui-space-3); font-size: var(--ui-font-size-sm); }

@media (hover: none) {
    .ui-table .is-actions .ui-btn { opacity: 1; }
}

/* ── Lista (wiersze) ────────────────────────────────────────────────────── */

.ui-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-list__item {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    padding: var(--ui-space-3) var(--ui-space-4);
    color: inherit;
    text-decoration: none;
}

.ui-list__item + .ui-list__item { border-top: 1px solid var(--ui-border-muted); }

a.ui-list__item,
button.ui-list__item {
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--ui-duration-fast) ease;
}

a.ui-list__item:hover,
button.ui-list__item:hover { background: var(--ui-hover-bg); }
a.ui-list__item:active,
button.ui-list__item:active { background: var(--ui-fill-strong); transition-duration: 0ms; }
a.ui-list__item:focus-visible,
button.ui-list__item:focus-visible { outline: none; box-shadow: var(--ui-focus-shadow-inset); }

/* Zaznaczony wiersz (wynik wyszukiwania, aktywna pozycja): tło akcentu i pasek 2 px wewnątrz, bez zmiany układu */
.ui-list__item.is-selected { background: var(--ui-selected-bg); box-shadow: inset 2px 0 0 var(--ui-primary); }
.ui-list__item.is-selected:hover { background: var(--ui-primary-soft-hover); }
.ui-list__item.is-selected .ui-list__title { color: var(--ui-selected-text); }

.ui-list__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }

.ui-list__title {
    font-size: var(--ui-font-size-base);
    font-weight: var(--ui-font-weight-semibold);
    color: var(--ui-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-list__meta {
    font-size: var(--ui-font-size-xs);
    color: var(--ui-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-list__trailing {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    flex: 0 0 auto;
    color: var(--ui-text-subtle);
    font-size: var(--ui-font-size-xs);
    font-variant-numeric: tabular-nums;
}

/* Strzałka na końcu wiersza ciemnieje przy najechaniu */
.ui-list__trailing > .ui-icon { transition: transform var(--ui-duration-state) var(--ui-ease-out), color var(--ui-duration-state) var(--ui-ease-out); }
a.ui-list__item:hover .ui-list__trailing > .ui-icon,
button.ui-list__item:hover .ui-list__trailing > .ui-icon { color: var(--ui-text-muted); }

/* Akcje wiersza ukryte do najechania/fokusu (Linear); na dotyku zawsze widoczne */
.ui-list__actions { display: flex; align-items: center; gap: var(--ui-space-1); opacity: 0; transition: opacity var(--ui-duration-state) var(--ui-ease-out); }
.ui-list__item:hover .ui-list__actions,
.ui-list__item:focus-within .ui-list__actions { opacity: 1; }

/* Gęsta lista (Linear): wiersze 36 px z zaokrąglonym podświetleniem, bez linii, skróty w ui-kbd */
.ui-list--dense .ui-list__item { min-height: var(--ui-control-md); padding: var(--ui-space-1) var(--ui-space-3); gap: var(--ui-space-2-5); border-radius: var(--ui-radius-lg); }
.ui-list--dense .ui-list__item + .ui-list__item { border-top: 0; }
.ui-list--dense .ui-list__title { font-size: var(--ui-font-size-sm); font-weight: var(--ui-font-weight-medium); }
.ui-list--dense .ui-list__meta { font-size: var(--ui-font-size-2xs); }
.ui-list--dense .ui-list__item.is-selected { box-shadow: none; }
.ui-list--dense .ui-list__item > .ui-icon:first-child { color: var(--ui-text-muted); }

/* Kafelek ikony zamiast awatara (powiadomienia na telefonie); nieprzeczytane = kafelek w akcencie */
.ui-list__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--ui-icon-tile);
    height: var(--ui-icon-tile);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-fill);
    color: var(--ui-text-muted);
}

.ui-list__item.is-unread .ui-list__icon { background: var(--ui-primary-soft); color: var(--ui-primary-text); }
.ui-list__item.is-unread .ui-list__title { font-weight: var(--ui-font-weight-semibold); }
.ui-list__text { font-size: var(--ui-font-size-sm); color: var(--ui-text-muted); white-space: normal; }
.ui-list__time { font-size: var(--ui-font-size-2xs); color: var(--ui-text-subtle); }
.ui-list--touch .ui-list__item { min-height: calc(var(--ui-touch-target) + var(--ui-space-4)); padding-block: var(--ui-space-3); }
.ui-list--touch .ui-list__item + .ui-list__item { border-top: 0; }
.ui-list--divided .ui-list__item + .ui-list__item { border-top: 1px solid var(--ui-border-muted); margin-left: calc(var(--ui-icon-tile) + var(--ui-space-3) + var(--ui-space-4)); padding-left: 0; }
.ui-list__item.is-unread { background: color-mix(in srgb, var(--ui-info) 6%, transparent); }
.ui-list--inset { border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xl); background: var(--ui-surface); overflow: hidden; }

/* ── Właściwości (etykieta: wartość) ────────────────────────────────────── */

.ui-props {
    display: grid;
    grid-template-columns: minmax(7rem, max-content) 1fr;
    column-gap: var(--ui-space-4);
    margin: 0;
}

.ui-props > dt,
.ui-props__label {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    min-height: 2.25rem;
    color: var(--ui-text-muted);
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-font-weight-medium);
}

.ui-props > dt .ui-icon { width: var(--ui-icon-sm); height: var(--ui-icon-sm); color: var(--ui-text-subtle); }

.ui-props > dd,
.ui-props__value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-1-5);
    min-height: 2.25rem;
    margin: 0;
    color: var(--ui-text);
    font-size: var(--ui-font-size-sm);
    min-width: 0;
}

.ui-props__empty { color: var(--ui-text-subtle); }

/* Wiersz „ikona · etykieta · wartość po prawej" (karta „Dane osobowe", metadane zadania na telefonie) */
.ui-props--rows { display: flex; flex-direction: column; gap: var(--ui-space-1); }
.ui-props--rows > div,
.ui-props__row { display: flex; align-items: center; gap: var(--ui-space-2); min-height: 2rem; font-size: var(--ui-font-size-sm); }
.ui-props__row > .ui-icon { width: var(--ui-icon-sm); height: var(--ui-icon-sm); color: var(--ui-text-subtle); }
.ui-props__row .ui-props__label { flex: 0 0 7.5rem; min-height: 0; }
.ui-props__row .ui-props__value { flex: 1 1 auto; min-height: 0; justify-content: flex-end; text-align: right; font-weight: var(--ui-font-weight-semibold); }
.ui-props__row--tap { min-height: var(--ui-touch-target); cursor: pointer; }
.ui-props__row--tap:active { opacity: var(--ui-press-opacity); }

/* ── Komunikat ──────────────────────────────────────────────────────────── */

.ui-alert {
    --ui-alert-bg: var(--ui-info-soft);
    --ui-alert-border: var(--ui-info-border);
    --ui-alert-accent: var(--ui-info-text);

    display: flex;
    align-items: flex-start;
    gap: var(--ui-space-3);
    padding: var(--ui-space-3) var(--ui-space-4);
    border: 1px solid var(--ui-alert-border);
    border-radius: var(--ui-radius-xl);
    background: var(--ui-alert-bg);
    color: var(--ui-text);
    font-size: var(--ui-font-size-sm);
    line-height: var(--ui-line-height-normal);
}

.ui-alert > .ui-icon { color: var(--ui-alert-accent); margin-top: 0.0625rem; }
.ui-alert__body { flex: 1 1 auto; min-width: 0; }

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

.ui-alert__text { margin: 0.125rem 0 0; color: var(--ui-text-secondary); }
.ui-alert__actions { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); margin-top: var(--ui-space-3); }

.ui-alert--info { --ui-alert-bg: var(--ui-info-soft); --ui-alert-border: var(--ui-info-border); --ui-alert-accent: var(--ui-info-text); }
.ui-alert--success { --ui-alert-bg: var(--ui-success-soft); --ui-alert-border: var(--ui-success-border); --ui-alert-accent: var(--ui-success-text); }
.ui-alert--warning { --ui-alert-bg: var(--ui-warning-soft); --ui-alert-border: var(--ui-warning-border); --ui-alert-accent: var(--ui-warning-text); }
.ui-alert--danger { --ui-alert-bg: var(--ui-danger-soft); --ui-alert-border: var(--ui-danger-border); --ui-alert-accent: var(--ui-danger-text); }
.ui-alert--neutral { --ui-alert-bg: var(--ui-fill); --ui-alert-border: var(--ui-border); --ui-alert-accent: var(--ui-text-muted); }

/* Karta-komunikat z paskiem po lewej (telefon: baner braku uprawnień IdoSell) — białe tło,
   akcent tylko na krawędzi i ikonie, bo kolorowe tło na całej karcie 390 px krzyczy. */
.ui-alert--bar {
    --ui-alert-bg: var(--ui-surface);
    --ui-alert-border: var(--ui-border);
    flex-direction: column;
    gap: var(--ui-space-3);
    padding: var(--ui-space-4);
    border-left: 2px solid var(--ui-alert-accent);
    box-shadow: var(--ui-shadow-xs);
}

.ui-alert--bar .ui-alert__head { display: flex; gap: var(--ui-space-2); }
.ui-alert--bar .ui-alert__head > .ui-icon { color: var(--ui-alert-accent); margin-top: 0.125rem; }
.ui-alert--bar .ui-alert__actions { margin-top: 0; }
.ui-alert--bar.ui-alert--danger { --ui-alert-accent: var(--ui-danger); }
.ui-alert--bar.ui-alert--warning { --ui-alert-accent: var(--ui-warning); }
.ui-alert--bar.ui-alert--info { --ui-alert-accent: var(--ui-info); }
.ui-alert--bar.ui-alert--success { --ui-alert-accent: var(--ui-success); }

/* Kroki do wykonania (instrukcja z serwera): <ol class="ui-steps"><li>…</li></ol> */
.ui-steps {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
    margin: 0;
    padding: var(--ui-space-3);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-fill);
    list-style: none;
    counter-reset: ui-step;
    font-size: var(--ui-font-size-sm);
    color: var(--ui-text);
}

.ui-steps > li { display: flex; gap: var(--ui-space-2); counter-increment: ui-step; }
.ui-steps > li::before { content: counter(ui-step) '.'; flex: 0 0 auto; font-weight: var(--ui-font-weight-semibold); color: var(--ui-text-subtle); font-variant-numeric: tabular-nums; }
.ui-steps--plain > li::before { content: none; }
.ui-steps__title { display: block; font-weight: var(--ui-font-weight-semibold); }

/* Baner: jedna linia z akcją po prawej („Zostały 2 kredyty — Rozszerz") */
.ui-banner {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    padding: var(--ui-space-3) var(--ui-space-3) var(--ui-space-3) var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xl);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-xs);
}

.ui-banner > .ui-icon { color: var(--ui-text-muted); }
.ui-banner__body { flex: 1 1 auto; min-width: 0; }
.ui-banner__title { margin: 0; font-size: var(--ui-font-size-base); font-weight: var(--ui-font-weight-semibold); }
.ui-banner__text { margin: 0; font-size: var(--ui-font-size-xs); color: var(--ui-text-muted); }

/* ── Pusty stan ─────────────────────────────────────────────────────────── */

.ui-empty {
    --ui-empty-icon-color: var(--ui-text-muted);
    --ui-empty-icon-bg: var(--ui-surface);

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-1);
    min-height: 8rem;
    padding: var(--ui-space-8) var(--ui-space-6);
    border: 1px dashed var(--ui-border);
    border-radius: var(--ui-radius-xl);
    background: var(--ui-fill);
    text-align: center;
    overflow: hidden;
}

/* Ikona na kole z dwoma gasnącymi pierścieniami (Untitled UI) — zamiast ilustracji; pierścienie wygasają ku dołowi,
   żeby nie wchodziły pod tytuł. Rysowane pseudoelementami: zero dodatkowego HTML-u. */
.ui-empty__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: var(--ui-space-3);
    border-radius: 50%;
    background: var(--ui-empty-icon-bg);
    box-shadow: var(--ui-shadow-xs);
    color: var(--ui-empty-icon-color);
}

.ui-empty__icon::before,
.ui-empty__icon::after {
    content: '';
    position: absolute;
    inset: -0.875rem;
    border: 1px solid var(--ui-border);
    border-radius: 50%;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, black 35%, transparent 80%);
    mask-image: linear-gradient(to bottom, black 35%, transparent 80%);
}

.ui-empty__icon::after { inset: -2rem; opacity: 0.55; }
.ui-empty__icon > .ui-icon { position: relative; }

/* Tony ikony: akcent (zaproszenie do akcji), błąd (sieć, brak uprawnień) */
.ui-empty--primary { --ui-empty-icon-color: var(--ui-primary-text); --ui-empty-icon-bg: var(--ui-primary-soft); }
.ui-empty--danger { --ui-empty-icon-color: var(--ui-danger-text); --ui-empty-icon-bg: var(--ui-danger-soft); }
.ui-empty--warning { --ui-empty-icon-color: var(--ui-warning-text); --ui-empty-icon-bg: var(--ui-warning-soft); }

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

.ui-empty__text {
    margin: 0;
    max-width: 28rem;
    font-size: var(--ui-font-size-sm);
    color: var(--ui-text-muted);
}

.ui-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ui-space-2); margin-top: var(--ui-space-4); }

/* Zapytanie w tytule („Nic dla „blik"") — nie łamie się w środku */
.ui-empty__query { font-weight: var(--ui-font-weight-semibold); color: var(--ui-text); white-space: nowrap; }

/* Kompaktowy: w szufladzie, karcie, pod nagłówkiem sekcji */
.ui-empty--compact { min-height: 0; padding: var(--ui-space-5) var(--ui-space-4); gap: var(--ui-space-1); }
.ui-empty--compact .ui-empty__icon { display: none; }
.ui-empty--compact .ui-empty__actions { margin-top: var(--ui-space-2); }
.ui-empty--compact .ui-empty__title { font-size: var(--ui-font-size-base); font-weight: var(--ui-font-weight-medium); color: var(--ui-text-muted); }
.ui-empty--plain { border: 0; background: transparent; }

/* Telefon: ikona 64 px na kole z wypełnienia, tytuł h3, akcja na całą szerokość */
.ui-empty--screen { border: 0; background: transparent; min-height: 40vh; padding: var(--ui-space-8); }
.ui-empty--screen .ui-empty__icon { width: 4rem; height: 4rem; margin-bottom: var(--ui-space-4); background: var(--ui-fill); box-shadow: none; color: var(--ui-text-subtle); }
.ui-empty--screen .ui-empty__icon::before { inset: -1.25rem; }
.ui-empty--screen .ui-empty__icon::after { inset: -2.75rem; }
.ui-empty--screen.ui-empty--danger .ui-empty__icon { background: var(--ui-danger-soft); color: var(--ui-danger-text); }
.ui-empty--screen .ui-empty__icon .ui-icon { width: var(--ui-icon-xl); height: var(--ui-icon-xl); }
.ui-empty--screen .ui-empty__title { font-size: var(--ui-type-h3-size); color: var(--ui-text-secondary); }
.ui-empty--screen .ui-empty__actions { align-self: stretch; flex-direction: column; }

/* ── Postęp, spinner, szkielet ──────────────────────────────────────────── */

.ui-progress {
    --ui-progress-value: 0%;
    --ui-progress-color: var(--ui-primary);

    position: relative;
    width: 100%;
    height: 0.5rem;
    border-radius: var(--ui-radius-full);
    background: var(--ui-fill-strong);
    overflow: hidden;
}

.ui-progress__bar {
    display: block;
    width: var(--ui-progress-value);
    height: 100%;
    border-radius: inherit;
    background: var(--ui-progress-color);
    transition: width var(--ui-duration-slow) var(--ui-ease);
}

.ui-progress--sm { height: 0.25rem; }

/* Nieokreślony (nie znamy końca): segment 40% jeżdżący po pasku, sam transform */
.ui-progress--indeterminate .ui-progress__bar { width: 40%; animation: ui-indeterminate 1.4s var(--ui-ease-standard) infinite; }
.ui-progress--success { --ui-progress-color: var(--ui-success); }
.ui-progress--warning { --ui-progress-color: var(--ui-warning); }
.ui-progress--danger { --ui-progress-color: var(--ui-danger); }

.ui-meter {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-1-5);
}

.ui-meter__head {
    display: flex;
    justify-content: space-between;
    gap: var(--ui-space-2);
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-font-weight-medium);
}

.ui-meter__value { font-variant-numeric: tabular-nums; color: var(--ui-text-secondary); }

.ui-spinner {
    display: inline-block;
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--ui-primary) 22%, transparent);
    border-top-color: var(--ui-primary);
    animation: ui-spin 0.8s linear infinite;
}

.ui-spinner--sm { width: 1rem; height: 1rem; }
.ui-spinner--lg { width: 2rem; height: 2rem; border-width: 3px; }

/* Ładowanie całego widoku (ekran, zakładka): wyśrodkowany spinner na tle strony */
.ui-loading {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-3);
    min-height: 12rem;
    color: var(--ui-text-muted);
    font-size: var(--ui-font-size-sm);
}

.ui-loading--screen { min-height: 60vh; }

/* Przyciemnienie elementu w trakcie operacji (miniatura w trakcie pobierania linku) */
.ui-busy-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    background: var(--ui-overlay);
    color: #ffffff;
}

.ui-busy-overlay .ui-spinner { border-color: rgb(255 255 255 / 0.3); border-top-color: #ffffff; }

.ui-skeleton {
    display: block;
    min-height: 0.75rem;
    border-radius: var(--ui-radius-sm);
    background: linear-gradient(90deg, var(--ui-fill) 0%, var(--ui-fill-strong) 50%, var(--ui-fill) 100%) 0 0 / 200% 100%;
    animation: ui-shimmer 1.4s ease-in-out infinite;
}

.ui-skeleton--text { height: 0.75rem; }
.ui-skeleton--title { height: 1.125rem; width: 40%; }
.ui-skeleton--circle { border-radius: 50%; }

/* ── Toast (wygląd — w apkach toasty pokazuje host przez AppBridge.toast) ── */

.ui-toast {
    --ui-toast-accent: var(--ui-success);

    display: flex;
    align-items: flex-start;
    gap: var(--ui-space-3);
    width: min(24rem, 100%);
    padding: var(--ui-space-3) var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xl);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-lg);
    color: var(--ui-text);
    font-size: var(--ui-font-size-sm);
}

.ui-toast {
    --ui-toast-duration: 4000ms;

    position: relative;
    overflow: hidden;
    animation: ui-toast-in var(--ui-duration-slow) var(--ui-ease-spring);
}

.ui-toast.is-leaving { animation: ui-toast-out var(--ui-duration) var(--ui-ease-in) forwards; pointer-events: none; }
.ui-toast > .ui-icon { color: var(--ui-toast-accent); animation: ui-scale-in var(--ui-duration-slow) var(--ui-ease-spring) 80ms backwards; }
.ui-toast__body { flex: 1 1 auto; min-width: 0; }
.ui-toast .ui-close { margin: calc(var(--ui-space-1) * -1) calc(var(--ui-space-1) * -1) 0 0; width: 1.75rem; height: 1.75rem; }

/* Pasek czasu do zniknięcia (wstrzymuje się po najechaniu): <span class="ui-toast__progress"></span> */
.ui-toast__progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: var(--ui-toast-accent);
    transform-origin: left;
    animation: ui-toast-progress var(--ui-toast-duration) linear forwards;
}

.ui-toast:hover .ui-toast__progress { animation-play-state: paused; }
.ui-toast__title { margin: 0; font-weight: var(--ui-font-weight-semibold); }
.ui-toast__text { margin: 0.125rem 0 0; color: var(--ui-text-muted); }
.ui-toast--danger { --ui-toast-accent: var(--ui-danger); }
.ui-toast--warning { --ui-toast-accent: var(--ui-warning); }
.ui-toast--info { --ui-toast-accent: var(--ui-info); }

.ui-toast-stack {
    position: fixed;
    right: var(--ui-space-4);
    bottom: var(--ui-space-4);
    z-index: var(--ui-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
}

/* ── Menu akcji / popover ───────────────────────────────────────────────── */

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

.ui-popover,
.ui-menu {
    z-index: var(--ui-z-dropdown);
    min-width: 13rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xl);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-lg);
    color: var(--ui-text);
}

.ui-dropdown > .ui-menu,
.ui-dropdown > .ui-popover {
    position: absolute;
    top: calc(100% + var(--ui-space-1-5));
    right: 0;
    transform-origin: top right;
    animation: ui-pop-in var(--ui-duration-state) var(--ui-ease-out);
}

/* Wyjście (ui.js nadaje is-closing na 120 ms przed ukryciem) */
.ui-dropdown > .ui-menu.is-closing,
.ui-dropdown > .ui-popover.is-closing { animation: ui-pop-out var(--ui-duration-fast) var(--ui-ease-in) forwards; pointer-events: none; }

.ui-dropdown--start > .ui-menu,
.ui-dropdown--start > .ui-popover { right: auto; left: 0; transform-origin: top left; }

.ui-dropdown > [hidden] { display: none; }

.ui-popover { padding: var(--ui-space-4); }

.ui-menu {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: var(--ui-space-1-5);
}

.ui-menu__label {
    padding: var(--ui-space-2) var(--ui-space-2-5) var(--ui-space-1);
    font-size: var(--ui-font-size-2xs);
    font-weight: var(--ui-font-weight-semibold);
    letter-spacing: var(--ui-letter-spacing-wide);
    text-transform: uppercase;
    color: var(--ui-text-subtle);
}

.ui-menu__item {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2-5);
    width: 100%;
    padding: var(--ui-space-2) var(--ui-space-2-5);
    border: 0;
    border-radius: var(--ui-radius-lg);
    background: transparent;
    color: var(--ui-text);
    font: inherit;
    font-size: var(--ui-font-size-base);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--ui-duration-fast) var(--ui-ease-out), transform var(--ui-duration-fast) var(--ui-ease-out);
}

.ui-menu__item > .ui-icon { width: var(--ui-icon-sm); height: var(--ui-icon-sm); color: var(--ui-text-muted); transition: color var(--ui-duration-fast) ease; }
.ui-menu__item:hover,
.ui-menu__item:focus-visible { outline: none; background: var(--ui-hover-bg); }
.ui-menu__item:hover > .ui-icon,
.ui-menu__item:focus-visible > .ui-icon { color: var(--ui-text); }
.ui-menu__item:active { transform: scale(var(--ui-press-scale)); }
.ui-menu__item:disabled { opacity: var(--ui-disabled-opacity); cursor: not-allowed; }

.ui-menu__text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.ui-menu__title { font-weight: var(--ui-font-weight-medium); line-height: var(--ui-line-height-snug); }
.ui-menu__description { font-size: var(--ui-font-size-xs); color: var(--ui-text-muted); line-height: var(--ui-line-height-snug); }
.ui-menu__shortcut { margin-left: auto; padding-left: var(--ui-space-3); font-size: var(--ui-font-size-xs); color: var(--ui-text-subtle); white-space: nowrap; }

.ui-menu__item--danger,
.ui-menu__item--danger > .ui-icon { color: var(--ui-danger-text); }
.ui-menu__item--danger:hover,
.ui-menu__item--danger:focus-visible { background: color-mix(in srgb, var(--ui-danger) 9%, transparent); }

.ui-menu__item[aria-checked='true'] { font-weight: var(--ui-font-weight-semibold); background: var(--ui-primary-soft); color: var(--ui-primary-text); }

.ui-menu__separator { height: 1px; margin: var(--ui-space-1) var(--ui-space-1-5); background: var(--ui-border-muted); border: 0; }

/* ── Podpowiedź: <span class="ui-tooltip" data-tooltip="Tekst">…</span> ─── */

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

.ui-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 50%;
    z-index: var(--ui-z-tooltip);
    width: max-content;
    max-width: 16rem;
    padding: var(--ui-space-1-5) var(--ui-space-2-5);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-gray-900);
    color: #ffffff;
    font-size: var(--ui-font-size-xs);
    font-weight: var(--ui-font-weight-medium);
    line-height: var(--ui-line-height-snug);
    white-space: normal;
    text-align: center;
    box-shadow: var(--ui-shadow-md);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 0.25rem) scale(0.96);
    transition: opacity var(--ui-duration-fast) var(--ui-ease-out), transform var(--ui-duration-state) var(--ui-ease-spring);
}

:where(.dark, [data-theme='dark']) .ui-tooltip::after { background: var(--ui-gray-700); }

/* Pojawia się z opóźnieniem 300 ms (żeby nie migać przy przejeżdżaniu), znika od razu */
.ui-tooltip:hover::after,
.ui-tooltip:focus-within::after { opacity: 1; transform: translate(-50%, 0) scale(1); transition-delay: 300ms; }
.ui-tooltip:focus-within::after { transition-delay: 0ms; }

.ui-tooltip--bottom::after { top: calc(100% + 0.5rem); bottom: auto; }

/* ── Akordeon (na <details>) ────────────────────────────────────────────── */

.ui-accordion {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xl);
    background: var(--ui-surface);
    overflow: hidden;
}

.ui-accordion + .ui-accordion { margin-top: var(--ui-space-3); }

.ui-accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-3);
    padding: 0.875rem var(--ui-space-4);
    font-size: var(--ui-font-size-md);
    font-weight: var(--ui-font-weight-semibold);
    color: var(--ui-text);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.ui-accordion__trigger::-webkit-details-marker { display: none; }
.ui-accordion__trigger:hover { background: var(--ui-hover-bg); }
.ui-accordion__trigger:focus-visible { outline: none; box-shadow: var(--ui-focus-shadow-inset); }

.ui-accordion__trigger::after {
    content: '';
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    background: currentColor;
    color: var(--ui-text-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform var(--ui-duration) ease;
}

.ui-accordion[open] > .ui-accordion__trigger::after { transform: rotate(180deg); }

.ui-accordion__meta { margin-left: auto; font-size: var(--ui-font-size-xs); font-weight: var(--ui-font-weight-medium); color: var(--ui-text-muted); }
.ui-accordion__panel { padding: 0 var(--ui-space-4) var(--ui-space-4); }
.ui-accordion[open] > .ui-accordion__panel { animation: ui-panel-in var(--ui-duration) var(--ui-ease-out); }
.ui-accordion__trigger::after { transition: transform var(--ui-duration) var(--ui-ease-spring); }

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

.ui-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--ui-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ui-space-4);
    background: var(--ui-overlay);
    backdrop-filter: blur(2px);
    animation: ui-fade-in var(--ui-duration) var(--ui-ease-out);
}

.ui-modal-backdrop[hidden] { display: none; }

/* Wyjście (ui.js: is-closing na 160 ms przed ukryciem) */
.ui-modal-backdrop.is-closing { animation: ui-fade-out var(--ui-duration-state) var(--ui-ease-in) forwards; pointer-events: none; }
.ui-modal-backdrop.is-closing .ui-modal { animation: ui-modal-out var(--ui-duration-state) var(--ui-ease-in) forwards; }

.ui-modal {
    display: flex;
    flex-direction: column;
    width: min(28rem, 100%);
    max-height: calc(100dvh - 2rem);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-2xl);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-xl);
    color: var(--ui-text);
    overflow: hidden;
    animation: ui-modal-in var(--ui-duration-slow) var(--ui-ease-spring);
}

.ui-modal__icon { animation: ui-scale-in var(--ui-duration-slow) var(--ui-ease-spring) 60ms backwards; }

.ui-modal--sm { width: min(22rem, 100%); }
.ui-modal--lg { width: min(40rem, 100%); }
.ui-modal--xl { width: min(56rem, 100%); }

.ui-modal__header {
    display: flex;
    align-items: flex-start;
    gap: var(--ui-space-3);
    padding: var(--ui-space-5) var(--ui-space-5) var(--ui-space-3);
}

.ui-modal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--ui-primary-soft);
    color: var(--ui-primary-text);
}

.ui-modal__icon--warning { background: var(--ui-warning-soft); color: var(--ui-warning-text); }
.ui-modal__icon--danger { background: var(--ui-danger-soft); color: var(--ui-danger-text); }

.ui-modal__titles { flex: 1 1 auto; min-width: 0; }
.ui-modal__title { margin: 0; font-size: var(--ui-font-size-lg); font-weight: var(--ui-font-weight-semibold); line-height: var(--ui-line-height-snug); }
.ui-modal__description { margin: var(--ui-space-1) 0 0; font-size: var(--ui-font-size-sm); color: var(--ui-text-muted); }

.ui-modal__body {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-4);
    padding: var(--ui-space-2) var(--ui-space-5) var(--ui-space-5);
    overflow-y: auto;
}

.ui-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ui-space-2);
    padding: var(--ui-space-3) var(--ui-space-5);
    border-top: 1px solid var(--ui-border-muted);
    background: var(--ui-surface-sunken);
}

/* Stopka „dwa równe przyciski" (Odrzuć / Zapisz zmiany) */
.ui-modal__footer--split > .ui-btn { flex: 1 1 0; }

.ui-modal--centered .ui-modal__header { flex-direction: column; align-items: center; text-align: center; }
.ui-modal--centered .ui-modal__body { text-align: center; }

/* ── Zamknij (×) — modal, szuflada, komunikat ───────────────────────────── */

.ui-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    margin: calc(var(--ui-space-1) * -1) calc(var(--ui-space-1) * -1) 0 auto;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ui-text-muted);
    cursor: pointer;
    transition: background-color var(--ui-duration-fast) ease, color var(--ui-duration-fast) ease;
}

.ui-close:hover { background: var(--ui-hover-bg); color: var(--ui-text); }
.ui-close:focus-visible { outline: none; box-shadow: var(--ui-focus-shadow); }
.ui-close .ui-icon { width: var(--ui-icon-md); height: var(--ui-icon-md); }

/* ── Szuflada (prawa) ───────────────────────────────────────────────────── */

.ui-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--ui-z-drawer);
    background: rgb(0 0 0 / 0.4);
    backdrop-filter: blur(2px);
    animation: ui-fade-in var(--ui-duration) var(--ui-ease-out);
}

.ui-drawer-backdrop[hidden],
.ui-drawer[hidden] { display: none; }

.ui-drawer-backdrop.is-closing { animation: ui-fade-out var(--ui-duration-state) var(--ui-ease-in) forwards; pointer-events: none; }
.ui-drawer.is-closing { animation: ui-drawer-out var(--ui-duration-state) var(--ui-ease-in) forwards; pointer-events: none; }

.ui-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: calc(var(--ui-z-drawer) + 1);
    display: flex;
    flex-direction: column;
    width: min(var(--ui-drawer-md), 100vw);
    height: 100dvh;
    border-left: 1px solid var(--ui-border);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-xl);
    color: var(--ui-text);
    animation: ui-drawer-in 320ms var(--ui-ease-out);
}

.ui-drawer--sm { width: min(var(--ui-drawer-sm), 100vw); }
.ui-drawer--lg { width: min(var(--ui-drawer-lg), 100vw); }

.ui-drawer__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ui-space-4);
    padding: var(--ui-space-4) var(--ui-space-5);
    border-bottom: 1px solid var(--ui-border);
}

.ui-drawer__eyebrow { margin: 0 0 0.125rem; }
.ui-drawer__title { margin: 0; font-size: var(--ui-font-size-lg); font-weight: var(--ui-font-weight-semibold); line-height: var(--ui-line-height-snug); }
.ui-drawer__description { margin: var(--ui-space-1) 0 0; font-size: var(--ui-font-size-sm); color: var(--ui-text-muted); }

.ui-drawer__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-4);
    padding: var(--ui-space-4) var(--ui-space-5);
    overflow-y: auto;
}

.ui-drawer__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ui-space-3);
    padding: var(--ui-space-4) var(--ui-space-5);
    border-top: 1px solid var(--ui-border);
    background: var(--ui-surface);
}

/* Podgląd w miejscu (dokumentacja, makiety) — bez pozycjonowania fixed */
.ui-drawer--static,
.ui-modal--static {
    position: relative;
    inset: auto;
    z-index: auto;
    height: auto;
    max-height: none;
    animation: none;
}

.ui-drawer--static { width: 100%; max-width: var(--ui-drawer-sm); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xl); box-shadow: var(--ui-shadow-md); overflow: hidden; }

/* ── Nagłówek strony, okruszki, nagłówek sekcji ─────────────────────────── */

.ui-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ui-space-4);
    margin-bottom: var(--ui-space-6);
}

.ui-page-header__main { min-width: 0; }

.ui-page-header__title {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    margin: var(--ui-space-1) 0 0;
    font-size: var(--ui-font-size-3xl);
    font-weight: var(--ui-font-weight-semibold);
    letter-spacing: var(--ui-letter-spacing-tight);
    line-height: 1.2;
    color: var(--ui-text);
}

/* Pionowy akcent przed tytułem — znak rozpoznawczy panelu */
.ui-page-header__title::before {
    content: '';
    flex: 0 0 auto;
    width: 0.375rem;
    min-height: 1.75rem;
    align-self: stretch;
    border-radius: var(--ui-radius-lg);
    background: var(--ui-primary-hover);
}

.ui-page-header__description {
    margin: var(--ui-space-2) 0 0 1.125rem;
    max-width: 48rem;
    font-size: var(--ui-font-size-base);
    color: var(--ui-text-muted);
}

.ui-page-header__actions { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); }

.ui-page-header--compact .ui-page-header__title { font-size: var(--ui-font-size-2xl); }

.ui-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-1-5);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--ui-font-size-base);
    font-weight: var(--ui-font-weight-medium);
}

.ui-breadcrumbs a { color: var(--ui-primary-text); text-decoration: none; }
.ui-breadcrumbs a:hover { text-decoration: underline; text-underline-offset: 2px; }
.ui-breadcrumbs [aria-current='page'] { color: var(--ui-text); }
.ui-breadcrumbs li + li::before { content: '/'; margin-right: var(--ui-space-1-5); color: var(--ui-text-disabled); }

.ui-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-3);
    margin-bottom: var(--ui-space-3);
}

.ui-section-header__title {
    margin: 0;
    font-size: var(--ui-font-size-lg);
    font-weight: var(--ui-font-weight-semibold);
    color: var(--ui-text);
}

.ui-section-header__count { color: var(--ui-text-subtle); font-weight: var(--ui-font-weight-medium); }

/* ── Separator ──────────────────────────────────────────────────────────── */

.ui-divider {
    height: 1px;
    margin: var(--ui-space-4) 0;
    border: 0;
    background: var(--ui-border);
}

.ui-divider--label {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    height: auto;
    background: none;
    font-size: var(--ui-font-size-2xs);
    font-weight: var(--ui-font-weight-semibold);
    letter-spacing: var(--ui-letter-spacing-wide);
    text-transform: uppercase;
    color: var(--ui-text-subtle);
}

.ui-divider--label::before,
.ui-divider--label::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--ui-border); }

/* Na tle akcentu („lub" na ekranie logowania) */
.ui-divider--inverse { color: var(--ui-on-primary-muted); }
.ui-divider--inverse::before,
.ui-divider--inverse::after { background: var(--ui-on-primary-border); }

/* ── Pasek apki (apki w ramce panelu: tytuł + zakładki + akcje, bez sidebara) ── */

.ui-topbar {
    position: sticky;
    top: 0;
    z-index: var(--ui-z-sticky);
    display: flex;
    align-items: center;
    gap: var(--ui-space-4);
    min-height: 3.5rem;
    padding: 0 var(--ui-space-6);
    border-bottom: 1px solid var(--ui-border);
    background: color-mix(in srgb, var(--ui-surface) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
}

.ui-topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-2);
    margin: 0;
    font-size: var(--ui-font-size-md);
    font-weight: var(--ui-font-weight-semibold);
    color: var(--ui-text);
    white-space: nowrap;
    text-decoration: none;
}

.ui-topbar__nav { min-width: 0; }
.ui-topbar__nav .ui-tabs { margin: 0; padding-block: var(--ui-space-1); }
.ui-topbar__spacer { flex: 1 1 auto; }
.ui-topbar__actions { display: flex; align-items: center; gap: var(--ui-space-2); }

.ui-main {
    width: 100%;
    max-width: var(--ui-content-max);
    margin: 0 auto;
    padding: var(--ui-space-6);
}

@media (max-width: 640px) {
    .ui-topbar { padding: 0 var(--ui-space-4); gap: var(--ui-space-2); }
    .ui-main { padding: var(--ui-space-4); }
    .ui-page-header__title { font-size: var(--ui-font-size-2xl); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EKRAN MOBILNY — komponenty przeniesione z apki natywnej (mobile/components/{layout,ui,bottom-sheet}.tsx).
   Działają też w portalu na telefonie i w apce v2 otwartej w WebView apki mobilnej (D10: dokument
   najwyższego poziomu — bez ramki panelu, więc pasek apki `ui-topbar` zastępuje `ui-screen-header`).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Ekran: kontener, treść, strefy bezpieczne ──────────────────────────── */

.ui-screen {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--ui-bg);
    color: var(--ui-text);
}

.ui-screen__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-3);
    padding: var(--ui-space-4);
    padding-bottom: calc(var(--ui-space-8) + var(--ui-safe-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Zapas pod listą, żeby ostatnia karta nie chowała się pod FAB-em / paskiem zakładek */
.ui-screen__body--fab { padding-bottom: calc(var(--ui-fab-size) + var(--ui-space-5) + var(--ui-space-4) + var(--ui-safe-bottom)); }
.ui-screen__body--tabbar { padding-bottom: calc(var(--ui-tabbar-height) + var(--ui-space-4) + var(--ui-safe-bottom)); }
.ui-screen__body--fab.ui-screen__body--tabbar { padding-bottom: calc(var(--ui-tabbar-height) + var(--ui-fab-size) + var(--ui-space-8) + var(--ui-safe-bottom)); }

/* Pasek pod nagłówkiem na tle strony (przełącznik widoku, filtry) */
.ui-screen__bar { padding: var(--ui-space-2) var(--ui-space-4) 0; background: var(--ui-bg); }
.ui-screen__bar--divided { padding-bottom: var(--ui-space-3); border-bottom: 1px solid var(--ui-border); }
.ui-screen__bar > .ui-chips--scroll { padding-inline: 0; }

/* Cały ekran na gradiencie marki (logowanie, kod z e-maila) */
.ui-screen--brand { background: var(--ui-primary-gradient); color: #ffffff; }
.ui-screen--brand .ui-screen__body { align-items: center; justify-content: center; gap: var(--ui-space-4); padding: calc(var(--ui-space-6) + var(--ui-safe-top)) var(--ui-space-6) calc(var(--ui-space-6) + var(--ui-safe-bottom)); }
.ui-on-brand { color: #ffffff; }
.ui-on-brand-muted { color: var(--ui-on-primary-muted); }

/* Logo na gradiencie: półprzezroczysta plakietka */
.ui-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--ui-space-4) var(--ui-space-5);
    border-radius: var(--ui-radius-xl);
    background: var(--ui-on-primary-fill);
    color: #ffffff;
    font-weight: var(--ui-font-weight-semibold);
    letter-spacing: var(--ui-letter-spacing-tight);
}

/* Kadr skanera QR (ramka na podglądzie aparatu) */
.ui-scan-frame {
    position: relative;
    width: 100%;
    max-width: 20rem;
    aspect-ratio: 1;
    border-radius: var(--ui-radius-xl);
    background: rgb(0 0 0 / 0.25);
    overflow: hidden;
}

.ui-scan-frame::after {
    content: '';
    position: absolute;
    inset: 1.5rem;
    border: 3px solid rgb(255 255 255 / 0.7);
    border-radius: var(--ui-radius-lg);
    pointer-events: none;
}

.ui-scan-frame__hint {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-3);
    padding: var(--ui-space-5);
    color: var(--ui-on-primary-muted);
    font-size: var(--ui-font-size-sm);
    text-align: center;
}

/* ── Nagłówek ekranu (gradient marki, zaokrąglony dół) ─────────────────── */

.ui-screen-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    padding: calc(var(--ui-space-3) + var(--ui-safe-top)) var(--ui-space-4) var(--ui-space-4);
    border-radius: 0 0 var(--ui-radius-2xl) var(--ui-radius-2xl);
    background: var(--ui-primary-gradient);
    color: #ffffff;
}

.ui-screen-header__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }

.ui-screen-header__eyebrow {
    margin: 0;
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-font-weight-medium);
    color: var(--ui-on-primary-muted);
}

.ui-screen-header__title {
    margin: 0;
    font-size: var(--ui-type-h1-size);
    font-weight: var(--ui-font-weight-semibold);
    line-height: var(--ui-line-height-tight);
    letter-spacing: var(--ui-letter-spacing-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-screen-header__actions { display: flex; align-items: center; gap: var(--ui-space-2); flex: 0 0 auto; }

/* Przyciski na gradiencie: duchy w bieli */
.ui-screen-header .ui-btn--ghost { --ui-btn-color: #ffffff; --ui-btn-bg-hover: var(--ui-on-primary-fill); }
.ui-screen-header .ui-btn--ghost:focus-visible { box-shadow: 0 0 0 3px var(--ui-on-primary-border); }

/* Wariant „szczegół": płaski, pełny kolor akcentu, strzałka wstecz, bez zaokrąglenia
   (ekran wypchnięty na stos: zadanie, faktura, klient, apka w WebView) */
.ui-screen-header--solid {
    gap: var(--ui-space-1);
    padding: calc(var(--ui-space-2) + var(--ui-safe-top)) var(--ui-space-3) var(--ui-space-3);
    border-radius: 0;
    background: var(--ui-primary-active);
}

.ui-screen-header--solid .ui-screen-header__title { font-size: var(--ui-font-size-lg); font-weight: var(--ui-font-weight-semibold); }
.ui-screen-header--solid .ui-screen-header__eyebrow { order: 2; font-size: var(--ui-font-size-sm); }

.ui-screen-header__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--ui-touch-target);
    height: var(--ui-touch-target);
    margin-left: calc(var(--ui-space-2) * -1);
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
}

.ui-screen-header__back:hover { background: var(--ui-on-primary-fill); }
.ui-screen-header__back:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ui-on-primary-border); }
.ui-screen-header__back .ui-icon { width: var(--ui-icon-lg); height: var(--ui-icon-lg); }

/* ── Dolny pasek zakładek ───────────────────────────────────────────────── */

.ui-tabbar {
    position: sticky;
    bottom: 0;
    z-index: var(--ui-z-sticky);
    display: flex;
    align-items: stretch;
    min-height: var(--ui-tabbar-height);
    padding-bottom: var(--ui-safe-bottom);
    border-top: 1px solid var(--ui-border);
    background: var(--ui-surface);
}

.ui-tabbar--fixed { position: fixed; right: 0; bottom: 0; left: 0; }

.ui-tabbar__item {
    position: relative;
    flex: 1 1 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1875rem;
    min-width: 0;
    padding: var(--ui-space-1-5) var(--ui-space-1) var(--ui-space-2);
    border: 0;
    background: transparent;
    color: var(--ui-text-subtle);
    font: inherit;
    font-size: var(--ui-type-tiny-size);
    font-weight: var(--ui-font-weight-semibold);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--ui-duration-fast) ease;
}

.ui-tabbar__item .ui-icon { width: var(--ui-icon-lg); height: var(--ui-icon-lg); }
.ui-tabbar__item:hover { color: var(--ui-text-muted); }
.ui-tabbar__item:focus-visible { outline: none; box-shadow: var(--ui-focus-shadow-inset); border-radius: var(--ui-radius-lg); }

.ui-tabbar__item[aria-current='page'],
.ui-tabbar__item[aria-selected='true'],
.ui-tabbar__item.is-active { color: var(--ui-primary); }

.ui-tabbar__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Licznik przy ikonie zakładki */
.ui-tabbar__item .ui-count { top: 0.25rem; left: calc(50% + 0.25rem); right: auto; box-shadow: 0 0 0 2px var(--ui-surface); }

/* ── Pływający przycisk akcji (FAB) ─────────────────────────────────────── */

.ui-fab {
    position: fixed;
    right: var(--ui-space-4);
    bottom: calc(var(--ui-space-5) + var(--ui-safe-bottom));
    z-index: var(--ui-z-sticky);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-2);
    width: var(--ui-fab-size);
    height: var(--ui-fab-size);
    padding: 0;
    border: 0;
    border-radius: var(--ui-radius-2xl);
    background: var(--ui-primary);
    color: var(--ui-on-primary);
    font: inherit;
    font-size: var(--ui-font-size-md);
    font-weight: var(--ui-font-weight-semibold);
    box-shadow: var(--ui-shadow-lg);
    cursor: pointer;
    transition: transform var(--ui-duration-fast) ease, opacity var(--ui-duration-fast) ease, background-color var(--ui-duration-fast) ease;
}

.ui-fab .ui-icon { width: var(--ui-icon-lg); height: var(--ui-icon-lg); }
.ui-fab:hover { background: var(--ui-primary-hover); }
.ui-fab:active { transform: scale(var(--ui-press-scale)); opacity: var(--ui-press-opacity); }
.ui-fab:focus-visible { outline: none; box-shadow: var(--ui-shadow-lg), var(--ui-focus-shadow); }

/* Z etykietą (gdy ikona sama nie mówi, co się stanie) */
.ui-fab--extended { width: auto; padding: 0 var(--ui-space-5) 0 var(--ui-space-4); }
.ui-fab--extended .ui-icon { width: var(--ui-icon-lg); height: var(--ui-icon-lg); }

/* Nad paskiem zakładek */
.ui-fab--above-tabbar { bottom: calc(var(--ui-tabbar-height) + var(--ui-space-4) + var(--ui-safe-bottom)); }

/* W podglądzie / wewnątrz kontenera (katalog, makieta): pozycja względem rodzica */
.ui-fab--static { position: absolute; }
.ui-fab--inline { position: static; }

/* ── Arkusz dolny (bottom sheet) ────────────────────────────────────────── */

.ui-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--ui-z-modal);
    background: var(--ui-overlay);
    animation: ui-fade-in var(--ui-duration) var(--ui-ease-out);
}

.ui-sheet-backdrop[hidden],
.ui-sheet[hidden] { display: none; }

.ui-sheet-backdrop.is-closing { animation: ui-fade-out var(--ui-duration-state) var(--ui-ease-in) forwards; pointer-events: none; }
.ui-sheet.is-closing { animation: ui-sheet-out var(--ui-duration-state) var(--ui-ease-in) forwards; pointer-events: none; }

.ui-sheet {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: calc(var(--ui-z-modal) + 1);
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 3rem);
    margin: 0 auto;
    max-width: 40rem;
    padding: var(--ui-space-1) var(--ui-space-5) calc(var(--ui-space-4) + var(--ui-safe-bottom));
    border-radius: var(--ui-radius-2xl) var(--ui-radius-2xl) 0 0;
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-xl);
    color: var(--ui-text);
    animation: ui-sheet-in 320ms var(--ui-ease-out);
}

/* Blokada przewijania strony pod otwartą nakładką (ui.js) */
.ui-scroll-lock { overflow: hidden; }

/* Uchwyt — sygnał „pociągnij w dół" */
.ui-sheet__handle {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 0.3125rem;
    margin: var(--ui-space-2) auto var(--ui-space-3);
    border-radius: var(--ui-radius-full);
    background: var(--ui-border-strong);
}

.ui-sheet__title { margin: 0 0 var(--ui-space-2); font-size: var(--ui-type-h2-size); font-weight: var(--ui-font-weight-semibold); line-height: var(--ui-line-height-tight); }
.ui-sheet__description { margin: 0 0 var(--ui-space-2); font-size: var(--ui-font-size-base); color: var(--ui-text-muted); line-height: var(--ui-line-height-normal); }

.ui-sheet__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-3);
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.ui-sheet__footer { display: flex; gap: var(--ui-space-2); padding-top: var(--ui-space-3); }
.ui-sheet__footer > .ui-btn { flex: 1 1 0; }

/* Podgląd w miejscu (katalog) */
.ui-sheet--static {
    position: relative;
    inset: auto;
    z-index: auto;
    max-height: none;
    width: 100%;
    border: 1px solid var(--ui-border);
    border-bottom: 0;
    animation: none;
}

/* ── Wiersz nawigacyjny (ikona · tytuł · podpis · strzałka) ─────────────── */

.ui-nav-row {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    width: 100%;
    padding: var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xl);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-xs);
    color: var(--ui-text);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--ui-duration-fast) ease, opacity var(--ui-duration-fast) ease;
}

.ui-nav-row:hover { background: var(--ui-hover-bg); }
.ui-nav-row:active { opacity: var(--ui-press-opacity); }
.ui-nav-row:focus-visible { outline: none; box-shadow: var(--ui-focus-shadow); }

.ui-nav-row__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--ui-icon-tile);
    height: var(--ui-icon-tile);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
}

.ui-nav-row__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.0625rem; }
.ui-nav-row__title { font-size: var(--ui-type-body-size); font-weight: var(--ui-font-weight-semibold); line-height: var(--ui-line-height-snug); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-nav-row__subtitle { font-size: var(--ui-font-size-sm); color: var(--ui-text-muted); line-height: var(--ui-line-height-snug); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ui-nav-row__trailing { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--ui-space-2); color: var(--ui-text-disabled); }
.ui-nav-row__trailing .ui-icon { width: var(--ui-icon-md); height: var(--ui-icon-md); }

/* Ton „wyciszony": długa lista jednorodnych pozycji — ikona bez kafelka, inaczej kilkanaście
   kafelków z akcentem to szum (mobile: NavRow tone="muted") */
.ui-nav-row--muted .ui-nav-row__icon { width: auto; height: auto; background: transparent; color: var(--ui-text-muted); }

/* Grupa wierszy jeden pod drugim (Profil) */
.ui-nav-rows { display: flex; flex-direction: column; gap: var(--ui-space-2); }

/* ── Akcja w karcie (ikona + napis, 44 px) ──────────────────────────────── */

.ui-action-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    width: 100%;
    min-height: var(--ui-touch-target);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ui-primary-text);
    font: inherit;
    font-size: var(--ui-type-body-size);
    font-weight: var(--ui-font-weight-semibold);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: opacity var(--ui-duration-fast) ease;
}

.ui-action-row:hover { text-decoration: underline; text-underline-offset: 3px; }
.ui-action-row:active { opacity: var(--ui-press-opacity); }
.ui-action-row:focus-visible { outline: none; box-shadow: var(--ui-focus-shadow); border-radius: var(--ui-radius-lg); }
.ui-action-row:disabled,
.ui-action-row[aria-disabled='true'] { opacity: var(--ui-disabled-opacity); cursor: not-allowed; text-decoration: none; }

.ui-action-row__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.25rem; }
.ui-action-row__icon .ui-icon { width: var(--ui-icon-md); height: var(--ui-icon-md); }
.ui-action-row__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ui-action-row--muted { color: var(--ui-text-muted); }
.ui-action-row--danger { color: var(--ui-danger-text); }

/* Ładowanie: ikona ustępuje spinnerowi, akcja zablokowana */
.ui-action-row[aria-busy='true'] { pointer-events: none; }
.ui-action-row[aria-busy='true'] .ui-action-row__icon .ui-icon { display: none; }
.ui-action-row[aria-busy='true'] .ui-action-row__icon::after {
    content: '';
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: ui-spin 0.7s linear infinite;
}

.ui-action-row + .ui-action-row { border-top: 1px solid var(--ui-border-muted); }

/* ── Kafel skrótu (ikona nad napisem, równe kolumny) ───────────────────── */

.ui-shortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: var(--ui-space-3); }

.ui-shortcut {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-2);
    min-height: 5.5rem;
    padding: var(--ui-space-4) var(--ui-space-2);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xl);
    background: var(--ui-surface);
    color: var(--ui-text);
    font: inherit;
    font-size: var(--ui-type-body-size);
    font-weight: var(--ui-font-weight-semibold);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--ui-duration-fast) ease, opacity var(--ui-duration-fast) ease;
}

.ui-shortcut .ui-icon { width: var(--ui-icon-lg); height: var(--ui-icon-lg); color: var(--ui-primary); }
.ui-shortcut:hover { background: var(--ui-hover-bg); }
.ui-shortcut:active { opacity: var(--ui-press-opacity); }
.ui-shortcut:focus-visible { outline: none; box-shadow: var(--ui-focus-shadow); }
.ui-shortcut__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* ── Załączniki (miniatury + chipy plików) ──────────────────────────────── */

.ui-attachments { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); }

.ui-attachment {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-1-5);
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ui-text);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.ui-attachment:active { opacity: var(--ui-press-opacity); }
.ui-attachment:focus-visible { outline: none; box-shadow: var(--ui-focus-shadow); border-radius: var(--ui-radius-lg); }

/* Obrazek: kwadratowa miniatura */
.ui-attachment--image {
    --ui-attachment-size: 7.5rem;

    width: var(--ui-attachment-size);
    height: var(--ui-attachment-size);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-fill);
    overflow: hidden;
}

.ui-attachment--image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ui-attachment--lg { --ui-attachment-size: 11.25rem; }
.ui-attachment--sm { --ui-attachment-size: 4rem; }

/* Plik: chip z ikoną, nazwą i znakiem „otwórz" */
.ui-attachment--file {
    max-width: 14rem;
    min-height: 2rem;
    padding: 0.375rem var(--ui-space-2);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-fill);
    font-size: var(--ui-font-size-xs);
    font-weight: var(--ui-font-weight-medium);
    color: var(--ui-text-secondary);
}

.ui-attachment--file:hover { background: var(--ui-hover-bg); }
.ui-attachment--file .ui-icon { width: var(--ui-icon-sm); height: var(--ui-icon-sm); flex: 0 0 auto; color: var(--ui-text-muted); }
.ui-attachment--file .ui-icon:last-child { color: var(--ui-text-subtle); }
.ui-attachment__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Oczekujący na wysłanie: „×" w rogu miniatury */
.ui-attachment__remove {
    position: absolute;
    top: -0.375rem;
    right: -0.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border: 0;
    border-radius: 50%;
    background: var(--ui-danger);
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 0 0 2px var(--ui-surface);
}

.ui-attachment__remove .ui-icon { width: var(--ui-icon-xs); height: var(--ui-icon-xs); }
.ui-attachment--image:has(.ui-attachment__remove) { overflow: visible; }
.ui-attachment--image:has(.ui-attachment__remove) img { border-radius: var(--ui-radius-lg); }

/* Dodaj załącznik: pusty kafel kreskowany */
.ui-attachment--add { justify-content: center; border: 1px dashed var(--ui-border-strong); background: transparent; color: var(--ui-text-muted); }
.ui-attachment--add:hover { background: var(--ui-hover-bg); color: var(--ui-text); }

/* ── Tablica (Kanban) z przewijaniem w poziomie ─────────────────────────── */

.ui-board {
    display: flex;
    align-items: flex-start;
    gap: var(--ui-space-3);
    padding: var(--ui-space-3);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.ui-board__column {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
    width: 16.25rem;
    scroll-snap-align: start;
}

.ui-board__head { display: flex; align-items: center; gap: var(--ui-space-1-5); padding: 0 var(--ui-space-1); }
.ui-board__title { flex: 1 1 auto; min-width: 0; font-size: var(--ui-font-size-sm); font-weight: var(--ui-font-weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-board__count { font-size: var(--ui-font-size-2xs); font-weight: var(--ui-font-weight-medium); color: var(--ui-text-subtle); font-variant-numeric: tabular-nums; }
.ui-board__empty { padding: var(--ui-space-2) var(--ui-space-1); font-size: var(--ui-font-size-sm); color: var(--ui-text-disabled); }
.ui-board__note { margin: 0; padding: 0 var(--ui-space-3) var(--ui-space-2); font-size: var(--ui-font-size-2xs); color: var(--ui-text-muted); }

/* Karta na tablicy: zwarta, tytuł do 3 linii */
.ui-board__card { padding: var(--ui-space-3); gap: var(--ui-space-1); }
.ui-board__card .ui-card__title { font-size: var(--ui-font-size-sm); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Pozioma lista metadanych pod tytułem (termin, godziny) */
.ui-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-3); }
.ui-meta__item { display: inline-flex; align-items: center; gap: 0.1875rem; font-size: var(--ui-font-size-2xs); font-weight: var(--ui-font-weight-medium); color: var(--ui-text-muted); white-space: nowrap; }
.ui-meta__item .ui-icon { width: var(--ui-icon-xs); height: var(--ui-icon-xs); color: var(--ui-text-subtle); }
.ui-meta__spacer { flex: 1 1 auto; }

/* ── Kompozytor (komentarz, notatka): pole + okrągły „wyślij" ───────────── */

.ui-composer {
    display: flex;
    align-items: flex-end;
    gap: var(--ui-space-2);
    padding: var(--ui-space-3);
    border-top: 1px solid var(--ui-border);
    background: var(--ui-surface);
}

.ui-composer__input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--ui-touch-target);
    max-height: 7.5rem;
    padding: 0.625rem var(--ui-space-3);
    border: 1px solid transparent;
    border-radius: var(--ui-radius-xl);
    background: var(--ui-fill);
    color: var(--ui-text);
    font: inherit;
    font-size: var(--ui-type-body-size);
    line-height: var(--ui-line-height-snug);
    resize: none;
}

.ui-composer__input::placeholder { color: var(--ui-input-placeholder); }
.ui-composer__input:focus { outline: none; border-color: var(--ui-primary); background: var(--ui-input-bg); box-shadow: var(--ui-focus-shadow); }

.ui-composer__send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.625rem;
    height: 2.625rem;
    border: 0;
    border-radius: 50%;
    background: var(--ui-primary);
    color: var(--ui-on-primary);
    cursor: pointer;
    transition: opacity var(--ui-duration-fast) ease, background-color var(--ui-duration-fast) ease;
}

.ui-composer__send:hover { background: var(--ui-primary-hover); }
.ui-composer__send:disabled { opacity: var(--ui-disabled-opacity); cursor: not-allowed; }
.ui-composer__send:focus-visible { outline: none; box-shadow: var(--ui-focus-shadow); }
.ui-composer__send .ui-icon { width: var(--ui-icon-md); height: var(--ui-icon-md); }

/* Przycisk-ikona obok pola (załącz, aparat) */
.ui-composer__tool { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.625rem; height: 2.625rem; border: 0; border-radius: 50%; background: transparent; color: var(--ui-text-muted); cursor: pointer; }
.ui-composer__tool:hover { background: var(--ui-hover-bg); color: var(--ui-text); }

/* Pasek nad kompozytorem: przełącznik widoczności, oczekujące załączniki */
.ui-composer-bar { display: flex; align-items: center; gap: var(--ui-space-2); min-height: var(--ui-touch-target); padding: 0 var(--ui-space-3); border-top: 1px solid var(--ui-border); background: var(--ui-surface); font-size: var(--ui-font-size-sm); color: var(--ui-text-subtle); }
.ui-composer-bar .ui-attachments { flex-wrap: nowrap; overflow-x: auto; padding: var(--ui-space-2) 0.375rem; scrollbar-width: none; }

/* Wzmianka @osoba w treści */
.ui-mention { color: var(--ui-primary-active); font-weight: var(--ui-font-weight-semibold); }

/* ── Próbki akcentu i przełącznik motywu (Profil → Wygląd) ─────────────── */

.ui-swatches { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); }

.ui-swatch {
    --ui-swatch: var(--ui-primary);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--ui-radius-lg);
    background: var(--ui-swatch);
    color: #ffffff;
    cursor: pointer;
    transition: transform var(--ui-duration-fast) ease, border-color var(--ui-duration-fast) ease;
}

.ui-swatch:hover { border-color: var(--ui-text-muted); }
.ui-swatch:focus-visible { outline: none; box-shadow: var(--ui-focus-shadow); }
.ui-swatch .ui-icon { width: var(--ui-icon-sm); height: var(--ui-icon-sm); opacity: 0; }
.ui-swatch[aria-pressed='true'],
.ui-swatch[aria-checked='true'] { border-color: var(--ui-text); }
.ui-swatch[aria-pressed='true'] .ui-icon,
.ui-swatch[aria-checked='true'] .ui-icon { opacity: 1; }
.ui-swatch--round { border-radius: 50%; width: 1.75rem; height: 1.75rem; }

/* Rząd przełączników ustawienia (push / w aplikacji / e-mail) */
.ui-switch-row { display: flex; justify-content: space-between; gap: var(--ui-space-2); }
.ui-switch-row__item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 0.125rem; font-size: var(--ui-type-tiny-size); color: var(--ui-text-subtle); }

/* Profil: awatar + nazwa + e-mail wyśrodkowane */
.ui-identity { display: flex; flex-direction: column; align-items: center; gap: var(--ui-space-1); padding: var(--ui-space-3) 0; text-align: center; }
.ui-identity .ui-h2 { margin-top: var(--ui-space-2); }

/* ── Animacje ───────────────────────────────────────────────────────────── */

@keyframes ui-spin { to { transform: rotate(360deg); } }
@keyframes ui-pop { 0% { transform: scale(1); } 45% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes ui-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes ui-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes ui-fade-in { from { opacity: 0; } }
@keyframes ui-fade-out { to { opacity: 0; } }
@keyframes ui-modal-out { to { opacity: 0; transform: translateY(0.5rem) scale(0.97); } }
@keyframes ui-drawer-out { to { transform: translateX(100%); } }
@keyframes ui-sheet-out { to { transform: translateY(100%); } }
@keyframes ui-toast-in { from { opacity: 0; transform: translateY(0.75rem) scale(0.95); } }
@keyframes ui-toast-out { to { opacity: 0; transform: translateX(1.5rem) scale(0.96); } }
@keyframes ui-toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes ui-panel-in { from { opacity: 0; transform: translateY(-0.25rem); } }
@keyframes ui-pop-in { from { opacity: 0; transform: translateY(-6px) scale(0.96); } }
@keyframes ui-pop-out { to { opacity: 0; transform: translateY(-4px) scale(0.97); } }
@keyframes ui-scale-in { from { transform: scale(0.4); opacity: 0; } }
@keyframes ui-modal-in { from { opacity: 0; transform: translateY(1rem) scale(0.95); } }
@keyframes ui-drawer-in { from { transform: translateX(100%); } }
@keyframes ui-sheet-in { from { transform: translateY(100%); } }
@keyframes ui-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes ui-pulse { 0% { box-shadow: 0 0 0 0 currentColor; } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

@media (prefers-reduced-motion: reduce) {
    .ui-tabs__indicator,
    .ui-modal,
    .ui-drawer,
    .ui-modal-backdrop,
    .ui-drawer-backdrop,
    .ui-dropdown > .ui-menu,
    .ui-dropdown > .ui-popover,
    .ui-segmented__indicator,
    .ui-toast,
    .ui-toast > .ui-icon,
    .ui-toast__progress,
    .ui-modal__icon,
    .ui-accordion__panel,
    .ui-sheet,
    .ui-sheet-backdrop { animation: none; transition: none; }
    .ui-skeleton,
    .ui-progress--indeterminate .ui-progress__bar,
    .ui-dot--pulse,
    .ui-otp,
    .ui-otp__cell,
    .ui-input[aria-invalid='true'],
    .ui-textarea[aria-invalid='true'],
    .ui-select[aria-invalid='true'] { animation: none; }
}