/* qÚčto design system 2026 — components.css (ADR-0223, ADR-0225,
 * docs/DESIGN_SYSTEM.md).
 *
 * Reusable components on top of tokens.css: buttons, form fields, cards,
 * KPI tiles, tables (+ pivot, totals, pagination, column chooser, filter
 * panel), badges/pills/tags, callouts/flashes/toast, empty state, meta lists,
 * toolbars, popovers/menus (user menu, firm switcher, context menu), dialog
 * and drawer base, dropzone, danger zone, system settings controls.
 *
 * Rules of the house (direction A, ADR-0225): colours only via tokens;
 * static surfaces are white with NO border — a soft ink ring (--e0) plus a
 * transparent 1 px border that forced colours paint; floating layers get
 * --pop-shadow / --dialog-shadow; radii cards 16, controls 10, pills 999;
 * the primary button is tactile (brand gradient + inner light + brand edge,
 * --accent-ink text); motion only on opacity, transform, colours and
 * shadows with the duration and easing tokens — press = scale, never
 * levitation; no monospace.
 * Components respond to their container: `main` is the size container
 * `main` (layout.css).
 */

@layer components {
    /* =====================================================================
       Buttons
       ===================================================================== */
    .qucto-button {
        --btn-fg: var(--qct-secondary);
        --btn-bg: var(--surface);
        --btn-shadow: var(--btn-secondary-shadow);
        --btn-bg-hover: var(--row-hover);
        --btn-shadow-hover: var(--btn-secondary-shadow-hover);
        --btn-shadow-active: var(--btn-shadow-hover);
        --btn-fg-hover: var(--text);

        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--sp-2);
        min-height: var(--control-h);
        max-width: 100%;
        padding: 0 var(--sp-3-5);
        font: inherit;
        font-size: var(--fs-control);
        line-height: var(--lh-nav);
        font-weight: var(--fw-semibold);
        color: var(--btn-fg);
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
        vertical-align: middle;
        background: var(--btn-bg);
        /* Transparent: invisible here, painted by forced colours. */
        border: 1px solid transparent;
        border-radius: var(--r-control);
        box-shadow: var(--btn-shadow);
        cursor: pointer;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        transition:
            background-color var(--dur-1) var(--ease-out),
            box-shadow var(--dur-1) var(--ease-out),
            color var(--dur-1) var(--ease-out),
            transform var(--dur-1) var(--ease-out);
    }

    .qucto-button:hover {
        color: var(--btn-fg-hover);
        background: var(--btn-bg-hover);
        box-shadow: var(--btn-shadow-hover);
    }

    .qucto-button:active:not(:disabled, [aria-disabled='true']) {
        box-shadow: var(--btn-shadow-active);
        transform: scale(var(--press-scale));
    }

    .qucto-button:focus-visible {
        outline: var(--focus-ring);
        outline-offset: var(--focus-offset);
    }

    .qucto-button svg {
        width: var(--icon-sm);
        height: var(--icon-sm);
        stroke-width: 1.8;
    }

    /* Tactile primary: brand gradient, inner light, brand edge, dark ink. */
    .qucto-button-primary {
        --btn-fg: var(--accent-ink);
        --btn-bg: var(--btn-primary-bg);
        --btn-shadow: var(--btn-primary-shadow);
        --btn-bg-hover: var(--btn-primary-bg-hover);
        --btn-shadow-hover: var(--btn-primary-shadow);
        --btn-shadow-active: var(--btn-primary-shadow-pressed);
        --btn-fg-hover: var(--accent-ink);
    }

    .qucto-button-danger {
        --btn-fg: var(--text-on-strong);
        --btn-bg: var(--danger-strong);
        --btn-shadow: var(--btn-danger-shadow);
        --btn-bg-hover: var(--danger-ink);
        --btn-shadow-hover: var(--btn-danger-shadow);
        --btn-fg-hover: var(--text-on-strong);
    }

    .qucto-button-ghost {
        --btn-fg: var(--text-secondary);
        --btn-bg: transparent;
        --btn-shadow: none;
        --btn-bg-hover: var(--hover);
        --btn-shadow-hover: none;
    }

    .qucto-button-danger-ghost {
        --btn-fg: var(--danger-ink);
        --btn-bg: var(--surface);
        --btn-bg-hover: var(--danger-pill);
        --btn-shadow-hover: 0 0 0 1px var(--danger-border), var(--e1);
        --btn-fg-hover: var(--danger-ink);
    }

    .qucto-button-sm {
        gap: var(--sp-1-5);
        min-height: var(--control-h-sm);
        padding: 0 var(--sp-3);
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        border-radius: var(--r-md);
    }

    .qucto-button-block {
        display: flex;
        width: 100%;
    }

    .qucto-button:disabled,
    .qucto-button[aria-disabled='true'] {
        --btn-fg: var(--text-muted);
        --btn-fg-hover: var(--text-muted);
        --btn-bg: var(--surface-2);
        --btn-bg-hover: var(--surface-2);
        --btn-shadow: 0 0 0 1px var(--ring-color);
        --btn-shadow-hover: var(--btn-shadow);
        cursor: not-allowed;
    }

    /* A pending HTMX request on a button = a visible busy state. */
    button.htmx-request,
    .qucto-button.htmx-request {
        cursor: progress;
        opacity: 0.6;
        pointer-events: none;
    }

    /* HTMX loading (RESEARCH D4): nothing for ~300 ms, then a quiet cue;
       refreshed regions keep their old data dimmed instead of a spinner. */
    .htmx-indicator {
        opacity: 0;
        transition: opacity var(--dur-2) var(--ease-out);
    }

    .htmx-request .htmx-indicator,
    .htmx-request.htmx-indicator {
        opacity: 1;
        transition-delay: 300ms;
    }

    [aria-busy='true']:not(button, .qucto-button) {
        opacity: 0.6;
        transition: opacity var(--dur-2) var(--ease-out) 300ms;
    }

    @container main (max-width: 40rem) {
        .qucto-button {
            white-space: normal;
        }
    }

    /* ---- icon button ---- */
    .qucto-icon-btn {
        display: inline-grid;
        place-items: center;
        width: var(--control-h-sm);
        height: var(--control-h-sm);
        padding: 0;
        color: var(--text-muted);
        text-decoration: none;
        background: transparent;
        border: 1px solid transparent;
        border-radius: var(--r-md);
        cursor: pointer;
        transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
    }

    .qucto-icon-btn:hover {
        color: var(--text);
        background: var(--hover);
    }

    .qucto-icon-btn:active {
        transform: scale(var(--press-scale));
    }

    .qucto-icon-btn svg {
        width: var(--icon-sm);
        height: var(--icon-sm);
        stroke-width: 1.75;
    }

    /* =====================================================================
       Form fields
       ===================================================================== */
    .qucto-form-field {
        display: flex;
        flex-direction: column;
        gap: var(--sp-1-5);
        min-width: 0;
        margin-bottom: var(--sp-4);
    }

    .qucto-form-field > label,
    .qucto-form-field > .qucto-form-label {
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        font-weight: var(--fw-medium);
        color: var(--text);
    }

    .qucto-form-field > label:has(> input[type='checkbox'], > input[type='radio']) {
        display: flex;
        align-items: flex-start;
        gap: var(--sp-2);
        font-size: var(--fs-base);
        line-height: var(--lh-base);
        font-weight: var(--fw-regular);
    }

    .qucto-form-field > label > input[type='checkbox'],
    .qucto-form-field > label > input[type='radio'] {
        margin-top: 2px;
    }

    /* Auto-fit grid: two fields share the row, a wrapped field keeps its
       column width instead of stretching across the whole form. */
    .qucto-form-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
        align-items: start;
        column-gap: var(--sp-4);
    }

    .qucto-form-row > .qucto-button {
        align-self: end;
        justify-self: start;
        margin-bottom: var(--sp-4);
    }

    .qucto-form-hint,
    .qucto-form-field > p:not([class]) {
        margin: 0;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text-muted);
    }

    .qucto-form-error {
        display: flex;
        align-items: flex-start;
        gap: var(--sp-1-5);
        margin: 0;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        font-weight: var(--fw-medium);
        color: var(--danger-ink);
    }

    .qucto-form-error::before {
        content: '';
        flex: none;
        width: 16px;
        height: 16px;
        margin-top: 1px;
        background: currentColor;
        mask: var(--i-error) center / 16px no-repeat;
    }

    .qucto-form-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp-2);
        margin-top: var(--sp-6);
    }

    .qucto-form-inline {
        margin-top: var(--sp-3);
    }

    .qucto-account-card {
        max-width: var(--form-max);
    }

    /* Progressive disclosure inside forms („Rozšířené možnosti"). */
    .qucto-advanced {
        margin: 0 0 var(--sp-4);
    }

    .qucto-advanced > summary {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-1);
        min-height: 28px;
        font-size: var(--fs-sm);
        font-weight: var(--fw-medium);
        color: var(--text-secondary);
        list-style: none;
        user-select: none;
        border-radius: var(--r-xs);
    }

    .qucto-advanced > summary::-webkit-details-marker {
        display: none;
    }

    .qucto-advanced > summary::after {
        content: '';
        width: 16px;
        height: 16px;
        background: currentColor;
        mask: var(--i-chevron-down) center / 16px no-repeat;
        transition: transform var(--dur-3) var(--ease-out);
    }

    .qucto-advanced > summary:hover {
        color: var(--text);
    }

    .qucto-advanced[open] > summary {
        margin-bottom: var(--sp-3);
    }

    .qucto-advanced[open] > summary::after {
        transform: rotate(180deg);
    }

    /* Checkbox list with a per-row explanation (Phase 51 — dostupné sekce). */
    .qucto-checklist {
        display: flex;
        flex-direction: column;
        margin: var(--sp-3) 0 0;
        padding: 0;
        list-style: none;
    }

    .qucto-checklist-item + .qucto-checklist-item {
        border-top: 1px solid var(--border-subtle);
    }

    .qucto-checklist-item label {
        display: flex;
        align-items: flex-start;
        gap: var(--sp-3);
        padding: var(--sp-2-5) 0;
        cursor: pointer;
    }

    .qucto-checklist-item input[type='checkbox'] {
        margin-top: 2px;
    }

    .qucto-checklist-label {
        display: block;
        font-weight: var(--fw-medium);
        color: var(--text);
    }

    .qucto-checklist-hint {
        display: block;
        margin-top: var(--sp-0-5);
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text-muted);
    }

    /* Off reads as off without relying on colour alone. */
    .qucto-checklist-item label:has(input:not(:checked)) .qucto-checklist-label {
        color: var(--text-muted);
        text-decoration: line-through;
        text-decoration-color: var(--border-control);
    }

    /* Invoice line: one row of fields on wide screens. */
    .qucto-line-row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: var(--sp-2);
        padding: var(--sp-3) 0;
        border-bottom: 1px solid var(--border-subtle);
    }

    .qucto-line-row > input,
    .qucto-line-row > select {
        width: auto;
        min-width: 0;
    }

    .qucto-line-row > input[name$='[description]'] {
        flex: 4 1 16rem;
    }

    .qucto-line-row > input[name$='[quantity]'],
    .qucto-line-row > input[name$='[unit_price]'] {
        flex: 1 1 6.5rem;
    }

    .qucto-line-row > input[name$='[unit_label]'] {
        flex: 0 1 4.5rem;
    }

    .qucto-line-row > select {
        flex: 1 1 10rem;
    }

    .qucto-line-row > label {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-1-5);
        min-height: var(--control-h);
        font-size: var(--fs-sm);
    }

    .qucto-line-tax {
        flex-basis: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* System settings: white-label colours + logo (ADR-0040). */
    .qucto-color-field {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-4);
        padding: var(--sp-2-5) 0;
        border-bottom: 1px solid var(--border-subtle);
    }

    .qucto-color-field > label {
        font-weight: var(--fw-medium);
    }

    .qucto-color-row {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-2-5);
    }

    .qucto-color-value {
        font-size: var(--fs-sm);
        font-variant-numeric: tabular-nums;
        color: var(--text-muted);
        text-transform: uppercase;
    }

    .qucto-logo-preview {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-2);
        margin-bottom: var(--sp-4);
        padding: var(--sp-4);
        /* The logo sits on the dark frame in the app, so it is previewed there. */
        background: var(--frame-glow) 0 0 / var(--frame-glow-w) var(--frame-glow-h) no-repeat, var(--frame-bg);
        border: 1px solid transparent;
        border-radius: var(--r-card-nested);
    }

    .qucto-logo-preview > .qucto-form-hint {
        color: var(--sb-muted);
    }

    .qucto-logo-preview-img {
        width: auto;
        max-width: 220px;
        height: auto;
        max-height: 56px;
        object-fit: contain;
    }

    /* =====================================================================
       Cards
       ===================================================================== */
    /* White, no border — a soft ink ring (--e0); the transparent 1px border
       is invisible here and becomes the edge in forced colours. */
    .qucto-card {
        --card-px: var(--sp-5);
        --card-py: 18px;

        min-width: 0;
        padding: var(--card-py) var(--card-px);
        background: var(--surface);
        border: 1px solid transparent;
        border-radius: var(--r-card);
        box-shadow: var(--e0);
    }

    @container main (max-width: 40rem) {
        .qucto-card {
            --card-px: var(--sp-4);
            --card-py: var(--sp-4);
        }
    }

    .qucto-card-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-2) var(--sp-3);
        min-height: var(--control-h-sm);
        margin-bottom: var(--sp-3);
    }

    .qucto-card-header > :first-child {
        min-width: 0;
    }

    .qucto-card-title,
    .qucto-card > h2:not([class]) {
        margin: 0;
        font-size: var(--fs-title-sm);
        line-height: var(--lh-title-sm);
        font-weight: var(--fw-semibold);
        letter-spacing: var(--tracking-title);
        color: var(--text);
    }

    .qucto-card-header > a:not(.qucto-button) {
        font-size: var(--fs-label);
        font-weight: var(--fw-medium);
        color: var(--text-muted);
        text-decoration: none;
    }

    .qucto-card-header > a:not(.qucto-button):hover {
        color: var(--text);
    }

    .qucto-card-subtitle {
        margin: 0 0 var(--sp-3);
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        font-weight: var(--fw-semibold);
        color: var(--text);
    }

    /* Vertical rhythm for the bare content the templates put in cards. */
    .qucto-card > :where(h2, h3, h4, p, ul, ol, dl, table, form, details, fieldset, .qucto-table-scroll, .qucto-callout, .qucto-flash, .qucto-stat-grid, .qucto-amount-hero, .qucto-detail, .qucto-meta-list, .qucto-plain-list, .qucto-actionbar, .qucto-toolbar, .qucto-form-row, .qucto-form-field, .qucto-emptystate, .qucto-dropzone, article)
        + :where(p, ul, ol, dl, table, form, details, .qucto-table-scroll, .qucto-callout, .qucto-flash, .qucto-stat-grid, .qucto-detail, .qucto-meta-list, .qucto-plain-list, .qucto-actionbar, .qucto-toolbar, .qucto-form-hint, .qucto-emptystate, .qucto-dropzone, article) {
        margin-top: var(--sp-3);
    }

    .qucto-card > * + :where(h3, h4) {
        margin-top: var(--sp-5);
    }

    .qucto-card > :where(h2, h3, h4):not(:last-child):not(.qucto-visually-hidden) {
        margin-bottom: var(--sp-3);
    }

    .qucto-card > :where(h3, h4):not(:last-child) {
        margin-bottom: var(--sp-2);
    }

    /* Prose followed by fields: a clear step before the next label. */
    .qucto-card > :where(p, ul, ol, dl, .qucto-callout, .qucto-flash, .qucto-form-hint)
        + :where(.qucto-form-row, .qucto-form-field, fieldset, .qucto-line-row, .qucto-table-pivot-controls) {
        margin-top: var(--sp-4);
    }

    .qucto-card > .qucto-card-header + * {
        margin-top: 0;
    }

    .qucto-card > :is(.qucto-button, button):not(:first-child) {
        margin-top: var(--sp-3);
    }

    .qucto-card > :is(.qucto-form-row, .qucto-form-field, .qucto-line-row) ~ :is(.qucto-button, button) {
        margin-top: 0;
    }

    .qucto-card > .qucto-form-field:last-child,
    .qucto-card > .qucto-form-row:last-child > .qucto-form-field {
        margin-bottom: 0;
    }

    .qucto-card > article + article {
        padding-top: var(--sp-3);
        border-top: 1px solid var(--border-subtle);
    }

    /* Flush card: tables run edge to edge; everything else gets the padding back. */
    /* A bare wide table scrolls inside the card, never the page. */
    .qucto-card-flush {
        padding: 0;
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }

    .qucto-card-flush > .qucto-card-header {
        margin: 0;
        padding: var(--sp-3-5) var(--card-px) var(--sp-2);
    }

    .qucto-card-flush > :is(p, .qucto-form-hint, .qucto-callout, .qucto-flash, .qucto-toolbar, form:not([class])) {
        margin: var(--sp-3) var(--card-px);
    }

    .qucto-card-flush > .qucto-toolbar {
        margin-block: 0;
        padding-block: var(--sp-3);
    }

    .qucto-card-flush > .qucto-table-scroll,
    .qucto-card-flush > table {
        margin: 0;
    }

    .qucto-card-flush > :is(p, .qucto-form-hint) + :is(.qucto-table-scroll, table) {
        border-top: 1px solid var(--border-subtle);
    }

    .qucto-card-section {
        padding: var(--card-py) var(--card-px);
        border-top: 1px solid var(--border-subtle);
    }

    .qucto-card-flush > .qucto-card-section:first-child {
        border-top: 0;
    }

    .qucto-card-hero {
        --card-px: var(--sp-6);
        --card-py: var(--sp-6);
    }

    .qucto-card-hero > .qucto-amount-hero + :is(dl, .qucto-detail) {
        margin-top: var(--sp-5);
        padding-top: var(--sp-2);
        border-top: 1px solid var(--border-subtle);
    }

    .qucto-card-danger {
        box-shadow: 0 0 0 1px var(--danger-border), var(--e1);
    }

    .qucto-card-danger .qucto-card-title,
    .qucto-card-danger > h2 {
        color: var(--danger-ink);
    }

    .qucto-danger-toggle {
        margin: var(--sp-2) 0;
        font-weight: var(--fw-semibold);
        color: var(--danger-ink);
    }

    /* =====================================================================
       KPI tiles, amount hero
       ===================================================================== */
    .qucto-stat-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.75rem), 1fr));
        gap: var(--card-gap);
    }

    .qucto-stat-grid + :is(table, .qucto-table-scroll) {
        margin-top: var(--sp-4);
    }

    .qucto-stat {
        display: flex;
        flex-direction: column;
        gap: var(--sp-1);
        min-width: 0;
        padding: var(--sp-4) 18px var(--sp-3-5);
        background: var(--surface);
        border: 1px solid transparent;
        border-radius: var(--r-card);
        box-shadow: var(--e0);
    }

    /* A tile nested in a card is a quiet plate, not a card in a card. */
    .qucto-card .qucto-stat {
        background: var(--surface-inset);
        border-radius: var(--r-card-nested);
        box-shadow: none;
    }

    .qucto-stat-accent {
        box-shadow: 0 0 0 1px var(--accent-line), var(--e1);
    }

    .qucto-stat-label {
        font-size: var(--fs-label);
        line-height: var(--lh-label);
        font-weight: var(--fw-medium);
        color: var(--text-muted);
    }

    .qucto-stat-value {
        font-size: var(--fs-kpi);
        line-height: var(--lh-kpi);
        font-weight: var(--fw-bold);
        letter-spacing: var(--tracking-kpi);
        font-variant-numeric: tabular-nums;
        color: var(--text);
        overflow-wrap: anywhere;
    }

    .qucto-stat-label + .qucto-stat-value {
        margin-top: var(--sp-1);
    }

    .qucto-stat-meta + .qucto-stat-value {
        margin-top: var(--sp-3);
    }

    .qucto-stat-meta {
        font-size: var(--fs-label);
        line-height: var(--lh-label);
        color: var(--text-muted);
    }

    .qucto-stat > a:last-child {
        margin-top: auto;
        padding-top: var(--sp-2);
        font-size: var(--fs-sm);
        font-weight: var(--fw-medium);
    }

    .qucto-amount-hero {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--sp-1) var(--sp-4);
    }

    .qucto-amount-hero-value {
        font-size: var(--fs-kpi);
        line-height: var(--lh-kpi);
        font-weight: var(--fw-bold);
        letter-spacing: var(--tracking-kpi);
        font-variant-numeric: tabular-nums;
        color: var(--text);
    }

    .qucto-amount-hero-label {
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        font-weight: var(--fw-medium);
        color: var(--text-muted);
    }

    /* =====================================================================
       Label–value lists
       ===================================================================== */
    .qucto-detail,
    .qucto-meta-list {
        display: grid;
        grid-template-columns: minmax(9rem, max-content) minmax(0, 1fr);
        column-gap: var(--sp-6);
        margin: 0;
        padding: 0;
    }

    .qucto-detail > :is(dt, dd),
    .qucto-meta-list > :is(dt, dd) {
        margin: 0;
        padding-block: var(--sp-2);
        border-top: 1px solid var(--border-subtle);
    }

    .qucto-detail > :is(dt, dd):nth-child(-n + 2),
    .qucto-meta-list > :is(dt, dd):nth-child(-n + 2) {
        border-top: 0;
    }

    :is(.qucto-detail, .qucto-meta-list) > dt {
        color: var(--text-muted);
    }

    :is(.qucto-detail, .qucto-meta-list) > dd {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    :is(.qucto-meta-list, .qucto-detail, .qucto-main dl:not([class])) > dd.qucto-num {
        text-align: left;
    }

    ul.qucto-meta-list {
        list-style: none;
    }

    ul.qucto-meta-list > li {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
        padding-block: var(--sp-2);
        border-top: 1px solid var(--border-subtle);
    }

    ul.qucto-meta-list > li:first-child {
        border-top: 0;
    }

    ul.qucto-meta-list > li > span:first-child {
        color: var(--text-muted);
    }

    ul.qucto-meta-list > li > strong {
        min-width: 0;
        font-weight: var(--fw-medium);
        overflow-wrap: anywhere;
    }

    @container main (max-width: 36rem) {
        .qucto-detail,
        .qucto-meta-list,
        .qucto-main dl:not([class]) {
            grid-template-columns: minmax(0, 1fr);
        }

        :is(.qucto-detail, .qucto-meta-list, .qucto-main dl:not([class])) > dt {
            padding-bottom: 0;
        }

        :is(.qucto-detail, .qucto-meta-list, .qucto-main dl:not([class])) > dd {
            padding-top: var(--sp-0-5);
            border-top: 0;
        }

        :is(.qucto-detail, .qucto-meta-list, .qucto-main dl:not([class])) > dt:first-child + dd {
            padding-top: var(--sp-0-5);
        }

        ul.qucto-meta-list > li {
            grid-template-columns: minmax(0, 1fr);
            gap: var(--sp-0-5);
        }
    }

    .qucto-plain-list {
        display: grid;
        gap: var(--sp-2);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* =====================================================================
       Tables
       ===================================================================== */
    .qucto-table {
        width: 100%;
        font-size: var(--fs-base);
        line-height: var(--lh-base);
        border-collapse: separate;
        border-spacing: 0;
    }

    :root[data-density='compact'] .qucto-table {
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
    }

    .qucto-table caption {
        padding: 0 var(--cell-px) var(--sp-2);
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text-muted);
        caption-side: top;
        text-align: left;
    }

    /* Header: 12.5 px / 500 muted, sentence case, no fill of its own (the
       white is the card's — needed under the sticky header), one hairline. */
    .qucto-table > thead > tr > :is(th, td) {
        padding: var(--sp-2) var(--cell-px);
        font-size: var(--fs-label);
        line-height: var(--lh-label);
        font-weight: var(--fw-medium);
        color: var(--text-muted);
        text-align: left;
        white-space: nowrap;
        vertical-align: bottom;
        background: var(--surface);
        border-bottom: 1px solid var(--border-subtle);
    }

    .qucto-table > tbody > tr > :is(td, th) {
        padding: var(--cell-py) var(--cell-px);
        color: var(--text);
        text-align: left;
        vertical-align: top;
        border-bottom: 1px solid var(--border-subtle);
        transition: background-color var(--dur-1) var(--ease-out);
    }

    /* The document number leads the row; its link (the whole cell, not a link
       inside prose) shows the underline on hover and focus only. */
    .qucto-table > tbody > tr > [data-column='number'],
    .qucto-table > tbody > tr > [data-column='number'] a {
        font-weight: var(--fw-semibold);
    }

    .qucto-table > tbody > tr > [data-column='number'] > a:first-child {
        text-decoration-color: transparent;
    }

    .qucto-table > tbody > tr > [data-column='number'] > a:first-child:is(:hover, :focus-visible) {
        text-decoration-color: var(--link-underline-hover);
    }

    .qucto-table > tbody > tr > th {
        font-weight: var(--fw-medium);
    }

    .qucto-table > tbody > tr:last-child > :is(td, th) {
        border-bottom: 0;
    }

    .qucto-table > tbody > tr:hover > :is(td, th) {
        background: var(--row-hover);
    }

    .qucto-table > tbody > tr[aria-selected='true'] > :is(td, th),
    .qucto-table > tbody > tr.is-selected > :is(td, th) {
        background: var(--selected);
    }

    .qucto-table > tbody > tr[aria-selected='true'] > :first-child,
    .qucto-table > tbody > tr.is-selected > :first-child {
        box-shadow: inset 2px 0 0 var(--accent);
    }

    .qucto-table > tfoot > tr > :is(th, td) {
        padding: var(--cell-py) var(--cell-px);
        font-weight: var(--fw-semibold);
        color: var(--text);
        text-align: left;
        vertical-align: top;
        background: var(--surface-sunken);
        border-top: 1px solid var(--border);
    }

    .qucto-table > tfoot > tr + tr > :is(th, td) {
        border-top-color: var(--border-subtle);
    }

    /* Summary-only tables (per-currency totals) have no body above the footer. */
    .qucto-table > thead + tfoot > tr:first-child > :is(th, td) {
        border-top: 0;
    }

    .qucto-card-flush .qucto-table caption {
        padding: var(--sp-3) var(--card-px) var(--sp-2);
    }

    /* Flush cards: the first/last column lines up with the card padding. */
    .qucto-card-flush .qucto-table :is(th, td):first-child {
        padding-left: var(--card-px);
    }

    .qucto-card-flush .qucto-table :is(th, td):last-child {
        padding-right: var(--card-px);
    }

    .qucto-table :is(td, th) a:not(.qucto-button) {
        font-weight: var(--fw-medium);
    }

    .qucto-table .qucto-badge {
        vertical-align: top;
    }

    /* Numbers are instruments: right-aligned, tabular, never broken. */
    .qucto-num {
        font-variant-numeric: tabular-nums;
        text-align: right;
    }

    .qucto-table .qucto-num,
    .qucto-table [data-column='number'],
    .qucto-table [data-column='currency'],
    .qucto-table [data-column$='date'],
    .qucto-table [data-column='date'],
    .qucto-table [data-column='paid_on'],
    .qucto-table [data-column='period'],
    .qucto-table [data-column='uploaded'],
    .qucto-table [data-column='imported_at'],
    .qucto-table [data-column='published_at'],
    .qucto-table [data-column='updated_at'],
    .qucto-table [data-column='as_of'] {
        white-space: nowrap;
    }

    .qucto-table :is(th, td).qucto-num {
        text-align: right;
    }

    /* Long-text columns keep a readable measure instead of wrapping names
       into three lines (auto table layout squeezes them first); short labels
       stay on one line. Plain min-width — table cells ignore calc-size(). */
    .qucto-table > tbody > tr > :is(td, th):is([data-column='partner'], [data-column='name'], [data-column='title'], [data-column='group'], [data-column='subgroup'], [data-column='activity'], [data-column='account'], [data-column='filename'], [data-column='cash_label'], [data-column='label']) {
        min-width: 12rem;
    }

    .qucto-table > tbody > tr > th[scope='row'] {
        min-width: 10rem;
    }

    /* Row action forms (hidden inputs + buttons) lay out as one wrapped row. */
    .qucto-table :is(td, th) > form:not([class]) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp-1) var(--sp-2);
    }

    .qucto-table > tbody > tr > :is(td, th):is([data-column='note'], [data-column='description'], [data-column='posting']) {
        min-width: 14rem;
    }

    .qucto-table > tbody > tr > :is(td, th):is([data-column='type'], [data-column='status'], [data-column='state'], [data-column='source'], [data-column='direction'], [data-column='kind'], [data-column='position'], [data-column='contract_type'], [data-column='personal_number'], [data-column='code']) {
        white-space: nowrap;
    }

    .qucto-num-strong {
        font-weight: var(--fw-semibold);
        color: var(--text);
    }

    .qucto-table-secondary {
        display: block;
        margin-top: var(--sp-0-5);
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        font-weight: var(--fw-regular);
        color: var(--text-muted);
        white-space: normal;
    }

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

    .qucto-row-controls {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp-2);
    }

    .qucto-row-controls select {
        width: auto;
        min-width: 9.5rem;
    }

    .qucto-row-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp-2);
    }

    .qucto-cell-input {
        width: 7rem;
        min-height: var(--control-h-sm);
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .qucto-cell-input.is-computed {
        background: var(--accent-wash);
        border-color: var(--accent-hover);
    }

    .qucto-amount-cell {
        cursor: context-menu;
        white-space: nowrap;
    }

    /* Keyboard/touch trigger for the payroll back-solve menu (payroll-amount.js). */
    .qucto-amount-cell-edit {
        width: var(--control-h-sm);
        height: var(--control-h-sm);
        margin-inline-start: var(--sp-1);
        vertical-align: middle;
    }

    /* The scroll region: wide tables scroll inside their own box, never the
       page; on larger screens it is also a bounded vertical scroller so the
       header row stays in view (sticky header inside the scroll container). */
    .qucto-table-scroll,
    .qucto-table-wrap {
        position: relative;
        max-width: 100%;
        overflow: auto;
        overscroll-behavior-x: contain;
        /* Scroll hints: the cover moves with the content, the shadow stays. */
        background:
            linear-gradient(to right, var(--surface) 30%, transparent) left center / 40px 100% no-repeat local,
            linear-gradient(to left, var(--surface) 30%, transparent) right center / 40px 100% no-repeat local,
            radial-gradient(farthest-side at 0 50%, var(--scroll-shadow), transparent) left center / 12px 100% no-repeat scroll,
            radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow), transparent) right center / 12px 100% no-repeat scroll;
    }

    .qucto-table-scroll:focus-visible,
    .qucto-table-wrap:focus-visible {
        outline-offset: -2px;
    }

    .qucto-table-scroll > .qucto-table > thead > tr > :is(th, td) {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .qucto-table-scroll > .qucto-table > tfoot > tr:only-child > :is(th, td) {
        position: sticky;
        bottom: 0;
        z-index: 1;
    }

    /* Nothing sticky sits above the sheet on ≥ 768 px: the region may take
       the visible sheet minus a margin, and its header stays in view. */
    @media (min-width: 768px) and (min-height: 560px) {
        .qucto-table-scroll {
            max-height: calc(var(--sheet-h) - var(--sp-8));
        }
    }

    /* Phone: the first column stays while the rest scrolls (orientation). */
    @media (max-width: 767.98px) {
        .qucto-table-scroll > .qucto-table > * > tr > :first-child {
            position: sticky;
            left: 0;
            z-index: 1;
            background: var(--surface);
            box-shadow: inset -1px 0 0 var(--border-subtle);
        }

        .qucto-table-scroll > .qucto-table > thead > tr > :first-child {
            z-index: 2;
        }

        .qucto-table-scroll > .qucto-table > tfoot > tr > :first-child {
            background: var(--surface-sunken);
        }

        .qucto-table-scroll > .qucto-table > tbody > tr:hover > :first-child {
            background: var(--row-hover);
        }
    }

    /* Header shortcut to the pivot of one column (Phase 162). */
    .qucto-table-group-link {
        display: block;
        width: fit-content;
        margin-top: var(--sp-0-5);
        font-size: var(--fs-xs);
        line-height: var(--lh-xs);
        font-weight: var(--fw-regular);
        color: var(--text-muted);
        text-decoration: none;
    }

    .qucto-table-group-link:hover {
        color: var(--text);
        text-decoration: underline;
    }

    th.qucto-num .qucto-table-group-link {
        margin-left: auto;
    }

    /* „Seskupit podle" controls in the filter form. */
    .qucto-table-pivot-controls {
        min-width: 0;
        margin: var(--sp-2) 0 0;
        padding: var(--sp-4) 0 0;
        border: 0;
        border-top: 1px solid var(--border-subtle);
    }

    .qucto-table-pivot-controls > legend {
        float: left;
        width: 100%;
        margin-bottom: var(--sp-3);
        padding: 0;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        font-weight: var(--fw-semibold);
        color: var(--text);
    }

    .qucto-table-pivot-controls > legend + * {
        clear: both;
    }

    /* Column chooser: a disclosure of toggle chips. */
    .qucto-table-options {
        margin: var(--sp-1) 0 var(--sp-4);
    }

    .qucto-table-options > summary {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-1);
        min-height: 28px;
        font-size: var(--fs-sm);
        font-weight: var(--fw-medium);
        color: var(--text-secondary);
        list-style: none;
        border-radius: var(--r-xs);
    }

    .qucto-table-options > summary::-webkit-details-marker {
        display: none;
    }

    .qucto-table-options > summary::after {
        content: '';
        width: 16px;
        height: 16px;
        background: currentColor;
        mask: var(--i-chevron-down) center / 16px no-repeat;
        transition: transform var(--dur-3) var(--ease-out);
    }

    .qucto-table-options[open] > summary::after {
        transform: rotate(180deg);
    }

    .qucto-table-options > summary:hover {
        color: var(--text);
    }

    .qucto-table-options > fieldset {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-2);
        min-width: 0;
        margin: var(--sp-2) 0 0;
        padding: var(--sp-3);
        background: var(--surface-inset);
        border: 1px solid transparent;
        border-radius: var(--r-card-nested);
    }

    .qucto-table-options > fieldset > legend {
        float: left;
        width: 100%;
        margin-bottom: var(--sp-1);
        padding: 0;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text-muted);
    }

    .qucto-table-options > fieldset > label {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-2);
        min-height: 32px;
        padding: 0 var(--sp-3) 0 var(--sp-2-5);
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        background: var(--surface);
        border: 1px solid transparent;
        border-radius: var(--r-pill);
        box-shadow: var(--e0);
        transition: background-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
    }

    .qucto-table-options > fieldset > label:hover {
        box-shadow: var(--e0-hover);
    }

    .qucto-table-options > fieldset > label:has(input:checked) {
        background: var(--accent-wash);
        box-shadow: 0 0 0 1px var(--accent-line);
    }

    .qucto-table-options > fieldset > label:has(input:disabled) {
        cursor: default;
    }

    .qucto-table-options > fieldset > p {
        flex-basis: 100%;
        margin: var(--sp-1) 0 0;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text-muted);
    }

    /* =====================================================================
       Pagination („Strana 3 z 26" + page numbers)
       ===================================================================== */
    .qucto-pagination {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-2) var(--sp-4);
    }

    .qucto-pagination-status {
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        font-variant-numeric: tabular-nums;
        color: var(--text-muted);
    }

    .qucto-pagination-pages {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp-1);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .qucto-pagination-page {
        display: inline-grid;
        place-items: center;
        min-width: var(--control-h-sm);
        height: var(--control-h-sm);
        padding: 0 var(--sp-2);
        font-size: var(--fs-sm);
        font-weight: var(--fw-medium);
        font-variant-numeric: tabular-nums;
        color: var(--text-muted);
        text-decoration: none;
        border: 1px solid transparent;
        border-radius: var(--r-md);
        transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
    }

    a.qucto-pagination-page:hover {
        color: var(--text);
        background: var(--hover);
    }

    .qucto-pagination-page[aria-current='page'] {
        font-weight: var(--fw-semibold);
        color: var(--text);
        background: var(--surface);
        box-shadow: var(--seg-thumb-shadow);
    }

    .qucto-pagination-gap {
        min-width: 20px;
        color: var(--text-muted);
        text-align: center;
    }

    @container main (max-width: 40rem) {
        .qucto-pagination-page:not([aria-current]) {
            display: none;
        }

        .qucto-pagination-gap {
            display: none;
        }
    }

    /* =====================================================================
       Filter panel (_filter_panel.html.twig): a quiet bar that opens into
       the form. The <form class="qucto-card"> hosts one <details>.
       ===================================================================== */
    .qucto-card:has(> .qucto-filters) {
        padding: 0;
    }

    .qucto-card:has(> .qucto-filters) > [role='alert'] {
        margin: var(--sp-3) var(--card-px) 0;
    }

    .qucto-filters {
        padding: 0 var(--card-px);
    }

    .qucto-filters[open] {
        padding-bottom: var(--card-py);
    }

    .qucto-filters-summary {
        display: flex;
        align-items: center;
        gap: var(--sp-2-5);
        min-height: 48px;
        margin-inline: calc(-1 * var(--card-px));
        padding: var(--sp-1) var(--card-px);
        font-size: var(--fs-nav);
        font-weight: var(--fw-semibold);
        color: var(--text);
        list-style: none;
        border-radius: calc(var(--r-card) - 1px);
        transition: background-color var(--dur-1) var(--ease-out);
    }

    .qucto-filters-summary::-webkit-details-marker {
        display: none;
    }

    .qucto-filters-summary:hover {
        background: var(--row-hover);
    }

    .qucto-filters-summary:focus-visible {
        outline-offset: -2px;
    }

    .qucto-filters-summary svg {
        flex-shrink: 0;
        width: var(--icon-sm);
        height: var(--icon-sm);
        stroke-width: 1.75;
        color: var(--text-muted);
    }

    .qucto-filters-count {
        display: inline-flex;
        align-items: center;
        height: var(--pill-h);
        padding: 0 var(--pill-px);
        font-size: var(--pill-fs);
        font-weight: var(--fw-semibold);
        color: var(--accent-ink);
        white-space: nowrap;
        background: var(--accent);
        border: 1px solid transparent;
        border-radius: var(--r-pill);
    }

    .qucto-filters-hint {
        min-width: 0;
        overflow: hidden;
        font-size: var(--fs-sm);
        font-weight: var(--fw-regular);
        color: var(--text-muted);
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .qucto-filters-chevron {
        display: inline-flex;
        margin-left: auto;
        transition: transform var(--dur-3) var(--ease-out);
    }

    .qucto-filters[open] > .qucto-filters-summary {
        margin-bottom: var(--sp-4);
        border-bottom: 1px solid var(--border-subtle);
        border-radius: calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0;
    }

    .qucto-filters[open] .qucto-filters-chevron {
        transform: rotate(180deg);
    }

    .qucto-filters > .qucto-form-hint {
        margin: 0 0 var(--sp-2);
    }

    .qucto-filters > .qucto-button {
        margin-top: var(--sp-3);
        margin-right: var(--sp-2);
    }

    /* =====================================================================
       Badges (status pills) & tags — soft pills: tone wash + tone ink, no
       hard outline (a transparent 1px border becomes the edge in forced
       colours). The text always carries the meaning, never the colour.
       Status classes are dynamic (qucto-badge-{status}); unknown ones fall
       back to neutral.
       ===================================================================== */
    .qucto-badge {
        --tone-wash: var(--neutral-pill);
        --tone-border: var(--neutral-border);
        --tone-ink: var(--neutral-ink);
        --tone-dot: var(--neutral-solid);

        display: inline-flex;
        align-items: center;
        gap: var(--sp-1);
        min-height: var(--pill-h);
        padding: 0 var(--pill-px);
        font-size: var(--pill-fs);
        line-height: 1;
        font-weight: var(--fw-semibold);
        color: var(--tone-ink);
        white-space: nowrap;
        vertical-align: middle;
        background: var(--tone-wash);
        border: 1px solid transparent;
        border-radius: var(--r-pill);
    }

    /* success: Zaplaceno, Schváleno, Aktivní, Zpracováno */
    .qucto-badge-paid,
    .qucto-badge-active,
    .qucto-badge-success,
    .qucto-badge-approved,
    .qucto-badge-accepted,
    .qucto-badge-processed,
    .qucto-badge-published {
        --tone-wash: var(--success-pill);
        --tone-border: var(--success-border);
        --tone-ink: var(--success-ink);
        --tone-dot: var(--success-solid);
    }

    /* info: Vystaveno / Otevřeno / Odesláno / Probíhá */
    .qucto-badge-issued,
    .qucto-badge-info,
    .qucto-badge-open,
    .qucto-badge-submitted,
    .qucto-badge-partial {
        --tone-wash: var(--info-pill);
        --tone-border: var(--info-border);
        --tone-ink: var(--info-ink);
        --tone-dot: var(--info-solid);
    }

    /* warning: Pozastaveno, Čeká, Vráceno k doplnění */
    .qucto-badge-suspended,
    .qucto-badge-warning,
    .qucto-badge-pending,
    .qucto-badge-readonly {
        --tone-wash: var(--warning-pill);
        --tone-border: var(--warning-border);
        --tone-ink: var(--warning-ink);
        --tone-dot: var(--warning-solid);
    }

    /* danger: Stornováno, Po splatnosti, Zamítnuto, Selhalo */
    .qucto-badge-cancelled,
    .qucto-badge-danger,
    .qucto-badge-error,
    .qucto-badge-overdue,
    .qucto-badge-returned,
    .qucto-badge-failed,
    .qucto-badge-rejected {
        --tone-wash: var(--danger-pill);
        --tone-border: var(--danger-border);
        --tone-ink: var(--danger-ink);
        --tone-dot: var(--danger-solid);
    }

    /* neutral: Koncept, Vypnuto, Smazáno */
    .qucto-badge-draft,
    .qucto-badge-neutral,
    .qucto-badge-disabled,
    .qucto-badge-deleted {
        --tone-wash: var(--neutral-pill);
        --tone-border: var(--neutral-border);
        --tone-ink: var(--neutral-ink);
        --tone-dot: var(--neutral-solid);
    }

    /* The only amber pill: „Nové". */
    .qucto-badge-new {
        --tone-wash: var(--accent);
        --tone-border: var(--accent-hover);
        --tone-ink: var(--accent-ink);
        --tone-dot: var(--accent-ink);
    }

    .qucto-tag {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-1);
        min-height: var(--pill-h);
        padding: 0 var(--sp-1-5);
        font-size: var(--fs-xs);
        line-height: 1;
        font-weight: var(--fw-medium);
        color: var(--text-secondary);
        white-space: nowrap;
        background: var(--surface-2);
        border: 1px solid transparent;
        border-radius: var(--r-xs);
    }

    /* =====================================================================
       Callouts, flashes, bare live-region paragraphs, HTMX toast.
       Wash + border + icon + text; the text stays ink for long reading.
       ===================================================================== */
    .qucto-callout,
    .qucto-flash,
    .qucto-main p[role='alert']:not([class]),
    .qucto-main p[role='status']:not([class]) {
        --tone-wash: var(--info-wash);
        --tone-border: var(--info-border);
        --tone-icon: var(--info-solid);
        --tone-mask: var(--i-info);

        position: relative;
        margin: 0;
        padding: var(--sp-3) var(--sp-4) var(--sp-3) calc(var(--sp-4) + 16px + var(--sp-2-5));
        font-size: var(--fs-base);
        line-height: var(--lh-base);
        color: var(--text);
        background: var(--tone-wash);
        border: 1px solid color-mix(in oklch, var(--tone-border) 60%, transparent);
        border-radius: var(--r-card-nested);
    }

    .qucto-callout::before,
    .qucto-flash::before,
    .qucto-main p[role='alert']:not([class])::before,
    .qucto-main p[role='status']:not([class])::before {
        content: '';
        position: absolute;
        top: calc(var(--sp-3) + 2px);
        left: var(--sp-4);
        width: 16px;
        height: 16px;
        background: var(--tone-icon);
        mask: var(--tone-mask) center / 16px no-repeat;
    }

    /* Callouts that bring their own icon keep it. */
    .qucto-callout:has(> svg) {
        display: flex;
        gap: var(--sp-2-5);
        padding-left: var(--sp-4);
    }

    .qucto-callout:has(> svg)::before {
        content: none;
    }

    .qucto-callout > svg {
        flex: none;
        width: 16px;
        height: 16px;
        margin-top: 2px;
        color: var(--tone-icon);
    }

    .qucto-callout > :is(p, ul, ol) {
        margin: 0;
    }

    .qucto-callout > * + :is(p, ul, ol) {
        margin-top: var(--sp-2);
    }

    .qucto-callout > ul {
        padding-left: 1.1rem;
    }

    .qucto-callout-warning,
    .qucto-flash-warning {
        --tone-wash: var(--warning-wash);
        --tone-border: var(--warning-border);
        --tone-icon: var(--warning-solid);
        --tone-mask: var(--i-warning);
    }

    .qucto-flash-success {
        --tone-wash: var(--success-wash);
        --tone-border: var(--success-border);
        --tone-icon: var(--success-solid);
        --tone-mask: var(--i-success);
    }

    .qucto-flash-error,
    .qucto-flash-danger,
    .qucto-main p[role='alert']:not([class]) {
        --tone-wash: var(--danger-wash);
        --tone-border: var(--danger-border);
        --tone-icon: var(--danger-solid);
        --tone-mask: var(--i-error);
    }

    /* Status notes („Nepřítomná ve zdroji…") read as a neutral note. */
    .qucto-main p[role='status']:not([class]) {
        --tone-wash: var(--surface);
        --tone-border: var(--border);
        --tone-icon: var(--text-muted);
    }

    .qucto-main p:is([role='alert'], [role='status']):not([class]):empty {
        padding: 0;
        border: 0;
    }

    .qucto-main p:is([role='alert'], [role='status']):not([class]):empty::before {
        content: none;
    }

    .qucto-htmx-toast {
        position: fixed;
        right: var(--sp-4);
        bottom: var(--sp-4);
        z-index: var(--z-toast);
        display: flex;
        align-items: flex-start;
        gap: var(--sp-3);
        max-width: min(26rem, calc(100vw - 2 * var(--sp-4)));
        box-shadow: var(--pop-shadow);
        transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);

        @starting-style {
            opacity: 0;
            transform: translateY(var(--motion-shift-lg));
        }
    }

    .qucto-htmx-toast-close {
        display: grid;
        place-items: center;
        flex: none;
        width: 24px;
        height: 24px;
        margin: -2px calc(-1 * var(--sp-1)) -2px auto;
        padding: 0;
        font-size: 0;
        color: var(--text-secondary);
        background: transparent;
        border: 0;
        border-radius: var(--r-xs);
    }

    .qucto-htmx-toast-close::before {
        content: '';
        width: 16px;
        height: 16px;
        background: currentColor;
        mask: var(--i-close) center / 16px no-repeat;
    }

    .qucto-htmx-toast-close:hover {
        color: var(--text);
        background: color-mix(in oklch, var(--text) 8%, transparent);
    }

    /* =====================================================================
       Empty state: system state + the step that belongs to it (NN/g)
       ===================================================================== */
    .qucto-emptystate {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--sp-2);
        max-width: 30rem;
        margin: 0 auto;
        padding: var(--sp-10) var(--sp-6);
        text-align: center;
        color: var(--text-muted);
    }

    .qucto-emptystate-icon {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        margin-bottom: var(--sp-1);
        color: var(--text-secondary);
        background: var(--surface);
        border: 1px solid transparent;
        border-radius: var(--r-card-nested);
        box-shadow: var(--e0);
    }

    .qucto-emptystate-icon svg {
        width: 20px;
        height: 20px;
        stroke-width: 1.75;
    }

    .qucto-emptystate-title {
        font-size: var(--fs-title-sm);
        line-height: var(--lh-title-sm);
        font-weight: var(--fw-semibold);
        letter-spacing: var(--tracking-title);
        color: var(--text);
    }

    .qucto-emptystate-text {
        max-width: 44ch;
        font-size: var(--fs-base);
        line-height: var(--lh-base);
        color: var(--text-muted);
        text-wrap: pretty;
    }

    .qucto-emptystate > :is(.qucto-button, .qucto-emptystate-actions),
    .qucto-emptystate > a {
        margin-top: var(--sp-2);
    }

    .qucto-emptystate-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--sp-2);
    }

    .qucto-empty {
        padding: var(--sp-2) 0;
        font-size: var(--fs-sm);
        color: var(--text-muted);
    }

    /* =====================================================================
       Toolbars, action bar
       ===================================================================== */
    .qucto-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp-2) var(--sp-3);
    }

    .qucto-toolbar-spacer,
    .qucto-actionbar-spacer {
        flex: 1;
    }

    .qucto-actionbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp-2);
    }

    .qucto-actionbar form {
        display: contents;
    }

    @container main (max-width: 40rem) {
        .qucto-actionbar-spacer {
            display: none;
        }
    }

    .qucto-break-anywhere {
        overflow-wrap: anywhere;
    }

    /* =====================================================================
       Popovers & menus — one surface for the user menu, the firm switcher,
       the payroll context menu and future `.qucto-menu` / [popover] menus.
       ===================================================================== */
    .qucto-user-pop,
    .qucto-ws-popup,
    .qucto-ctxmenu,
    .qucto-menu,
    .qucto-popover {
        --pop-dir: -1;

        padding: var(--sp-1);
        font-size: var(--fs-base);
        line-height: var(--lh-base);
        color: var(--text);
        background: var(--surface);
        border: 1px solid transparent;
        border-radius: var(--r-pop);
        box-shadow: var(--pop-shadow);
    }

    .qucto-user-pop {
        --pop-dir: 1;
    }

    .qucto-user-card[open] > .qucto-user-pop,
    .qucto-ws-popup:not([hidden]),
    .qucto-ctxmenu,
    .qucto-menu:popover-open,
    .qucto-popover:popover-open {
        animation: qct-pop-in var(--dur-2) var(--ease-out);
    }

    @keyframes qct-pop-in {
        from {
            opacity: 0;
            transform: translateY(calc(var(--pop-dir) * var(--motion-shift))) scale(var(--enter-scale));
        }
    }

    .qucto-user-pop-action,
    .qucto-ws-option,
    .qucto-ctxmenu-item,
    .qucto-menu-item {
        display: flex;
        align-items: center;
        gap: var(--sp-2-5);
        width: 100%;
        min-height: var(--control-h-sm);
        padding: var(--sp-1-5) var(--sp-2);
        font: inherit;
        font-size: var(--fs-nav);
        line-height: var(--lh-nav);
        color: var(--text);
        text-align: left;
        text-decoration: none;
        background: transparent;
        border: 0;
        border-radius: var(--r-sm);
        cursor: pointer;
        transition: background-color var(--dur-1) var(--ease-out);
    }

    .qucto-user-pop-action:hover,
    .qucto-ws-option:hover,
    .qucto-ctxmenu-item:hover,
    .qucto-menu-item:hover,
    .qucto-ws-option:focus-visible,
    .qucto-menu-item:focus-visible {
        background: var(--hover);
    }

    .qucto-user-pop-action:focus-visible,
    .qucto-ws-option:focus-visible,
    .qucto-ctxmenu-item:focus-visible,
    .qucto-menu-item:focus-visible {
        outline: var(--focus-ring);
        outline-offset: -2px;
    }

    .qucto-user-pop-action svg,
    .qucto-menu-item svg {
        flex: none;
        width: var(--icon-sm);
        height: var(--icon-sm);
        stroke-width: 1.75;
        color: var(--text-muted);
    }

    .qucto-user-pop-action[aria-current] {
        font-weight: var(--fw-medium);
        background: var(--surface-2);
    }

    .qucto-user-pop-id {
        display: flex;
        flex-direction: column;
        margin-bottom: var(--sp-1);
        padding: var(--sp-2) var(--sp-2) var(--sp-2-5);
        border-bottom: 1px solid var(--border-subtle);
    }

    .qucto-user-pop-name,
    .qucto-user-pop-email {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .qucto-user-pop-name {
        font-weight: var(--fw-semibold);
    }

    .qucto-user-pop-email {
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text-muted);
    }

    .qucto-user-pop-logout {
        margin-top: var(--sp-1);
        padding-top: var(--sp-1);
        border-top: 1px solid var(--border-subtle);
    }

    /* Firm switcher popup (portalled to <body>, placed by JS). */
    .qucto-ws-popup {
        position: fixed;
        z-index: var(--z-popover);
        display: flex;
        flex-direction: column;
        max-width: min(20rem, calc(100vw - 24px));
        overflow: hidden;
        transform-origin: top left;
    }

    .qucto-ws-list {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .qucto-ws-search {
        position: relative;
        flex: none;
        margin: 0 0 var(--sp-1);
        padding-bottom: var(--sp-1);
        border-bottom: 1px solid var(--border-subtle);
    }

    .qucto-ws-search::before {
        content: '';
        position: absolute;
        top: calc(var(--control-h-sm) / 2 - 8px);
        left: var(--sp-2-5);
        width: 16px;
        height: 16px;
        background: var(--text-muted);
        mask: var(--i-search) center / 16px no-repeat;
        pointer-events: none;
    }

    .qucto-ws-search-input {
        min-height: var(--control-h-sm);
        padding-left: calc(var(--sp-2-5) + 16px + var(--sp-2));
        border-color: transparent;
        border-radius: var(--r-sm);
        background: var(--surface-inset);
    }

    .qucto-ws-group + .qucto-ws-group {
        margin-top: var(--sp-1);
        padding-top: var(--sp-1);
        border-top: 1px solid var(--border-subtle);
    }

    .qucto-ws-group-label {
        padding: var(--sp-1-5) var(--sp-2) var(--sp-1);
        font-size: var(--fs-xs);
        line-height: var(--lh-xs);
        font-weight: var(--fw-medium);
        color: var(--text-muted);
    }

    .qucto-ws-option-avatar {
        display: grid;
        place-items: center;
        flex: none;
        width: 24px;
        height: 24px;
        font-size: var(--fs-2xs);
        line-height: 1;
        font-weight: var(--fw-bold);
        color: var(--text-secondary);
        background: var(--surface-2);
        border: 1px solid transparent;
        border-radius: 7px;
    }

    .qucto-ws-option-name {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .qucto-ws-option.is-selected {
        font-weight: var(--fw-medium);
    }

    .qucto-ws-option.is-selected .qucto-ws-option-avatar {
        color: var(--sb-avatar-ink);
        background: var(--sb-avatar-bg);
    }

    .qucto-ws-option.is-selected::after {
        content: '';
        flex: none;
        width: 16px;
        height: 16px;
        margin-left: auto;
        background: var(--text);
        mask: var(--i-check) center / 14px no-repeat;
    }

    .qucto-ws-option.is-disabled {
        color: var(--text-muted);
        cursor: default;
    }

    .qucto-ws-option.is-disabled:hover {
        background: transparent;
    }

    .qucto-ws-option.is-disabled .qucto-ws-option-avatar {
        display: none;
    }

    .qucto-ws-empty {
        margin: 0;
        padding: var(--sp-2);
        font-size: var(--fs-sm);
        color: var(--text-muted);
    }

    /* Payroll „Zadat částku" context menu (payroll-amount.js). */
    .qucto-ctxmenu {
        position: fixed;
        z-index: var(--z-popover);
        min-width: 13rem;
        max-width: 18rem;
        transform-origin: top left;
    }

    .qucto-ctxmenu-form {
        display: flex;
        flex-direction: column;
        gap: var(--sp-2);
        padding: var(--sp-2);
    }

    .qucto-ctxmenu-form label {
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        font-weight: var(--fw-medium);
        color: var(--text);
    }

    .qucto-ctxmenu-input {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .qucto-ctxmenu-hint {
        margin: 0;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text-muted);
    }

    .qucto-ctxmenu-error {
        margin: 0;
        padding: var(--sp-2);
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--danger-ink);
    }

    .qucto-ctxmenu-form .qucto-ctxmenu-error {
        padding: 0;
    }

    /* =====================================================================
       Dialog & drawer base (native <dialog> + showModal()).
       ===================================================================== */
    .qucto-dialog,
    .qucto-drawer {
        max-height: calc(100dvh - 2 * var(--sp-8));
        padding: var(--sp-6);
        color: var(--text);
        background: var(--surface);
        border: 1px solid transparent;
        box-shadow: var(--dialog-shadow);
        opacity: 1;
        transition:
            opacity var(--dur-4) var(--ease-out),
            transform var(--dur-4) var(--ease-out),
            overlay var(--dur-4) allow-discrete,
            display var(--dur-4) allow-discrete;
    }

    .qucto-dialog {
        width: min(30rem, calc(100vw - 2 * var(--sp-4)));
        border-radius: var(--r-xl);
        transform: none;
    }

    .qucto-dialog-wide {
        width: min(40rem, calc(100vw - 2 * var(--sp-4)));
    }

    .qucto-drawer {
        width: min(35rem, calc(100vw - var(--sheet-inset)));
        height: calc(100dvh - 2 * var(--sheet-inset));
        max-height: none;
        margin: var(--sheet-inset) var(--sheet-inset) var(--sheet-inset) auto;
        border-radius: var(--r-xl);
    }

    .qucto-dialog:not([open]),
    .qucto-drawer:not([open]) {
        opacity: 0;
    }

    .qucto-dialog:not([open]) {
        transform: scale(var(--enter-scale));
    }

    .qucto-drawer:not([open]) {
        transform: translateX(var(--motion-shift-lg));
    }

    @starting-style {
        .qucto-dialog[open] {
            opacity: 0;
            transform: scale(var(--enter-scale));
        }

        .qucto-drawer[open] {
            opacity: 0;
            transform: translateX(var(--motion-shift-lg));
        }
    }

    :is(.qucto-dialog, .qucto-drawer)::backdrop {
        background: var(--backdrop);
    }

    .qucto-dialog-title {
        margin: 0 0 var(--sp-3);
        font-size: var(--fs-title);
        line-height: var(--lh-title);
        font-weight: var(--fw-semibold);
        letter-spacing: var(--tracking-title);
    }

    .qucto-dialog-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: var(--sp-2);
        margin-top: var(--sp-6);
    }

    /* =====================================================================
       Dropzone: a styled box around the native file input — the whole zone
       is clickable and keyboard-operable; limits are stated up front.
       ===================================================================== */
    .qucto-dropzone {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--sp-1);
        padding: var(--sp-6) var(--sp-6) var(--sp-5);
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        text-align: center;
        color: var(--text-muted);
        background: var(--surface-inset);
        border: 1px dashed var(--border-control);
        border-radius: var(--r-card);
        transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
    }

    .qucto-dropzone > svg {
        box-sizing: content-box;
        width: 20px;
        height: 20px;
        margin-bottom: var(--sp-1);
        padding: var(--sp-2-5);
        stroke-width: 1.8;
        color: var(--text-secondary);
        background: var(--surface);
        border: 1px solid transparent;
        border-radius: var(--r-card-nested);
        box-shadow: var(--e0);
    }

    .qucto-dropzone-title {
        font-size: var(--fs-base);
        line-height: var(--lh-base);
        font-weight: var(--fw-semibold);
        color: var(--text);
    }

    .qucto-dropzone input[type='file'] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: 0;
        cursor: pointer;
        opacity: 0;
    }

    .qucto-dropzone:hover,
    .qucto-dropzone.is-dragover {
        background: var(--surface);
        border-color: var(--text-muted);
    }

    .qucto-dropzone.is-dragover {
        background: var(--accent-wash);
        border-color: var(--accent-hover);
        border-style: solid;
    }

    .qucto-dropzone:has(input:focus-visible) {
        outline: var(--focus-ring);
        outline-offset: var(--focus-offset);
    }

    .qucto-dropzone.is-filled {
        background: var(--surface);
        border-style: solid;
        border-color: var(--success-border);
    }

    .qucto-dropzone-file {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-1-5);
        max-width: 100%;
        margin-top: var(--sp-2);
        padding: var(--sp-1) var(--sp-2-5);
        overflow: hidden;
        font-size: var(--fs-sm);
        font-weight: var(--fw-medium);
        color: var(--text);
        white-space: nowrap;
        text-overflow: ellipsis;
        background: var(--success-wash);
        border: 1px solid var(--success-border);
        border-radius: var(--r-pill);
    }

    .qucto-dropzone-file::before {
        content: '';
        flex: none;
        width: 14px;
        height: 14px;
        background: var(--success-solid);
        mask: var(--i-check) center / 14px no-repeat;
    }

    /* =====================================================================
       R5c — density switch, command palette, filter chips, list cards
       (RESEARCH D4 „Hustota", „Topbar/Paleta příkazů", „Filtry", „Mobil").
       ===================================================================== */

    /* ---- density: compact header row to match 36px rows ---- */
    :root[data-density='compact'] .qucto-table > thead > tr > :is(th, td) {
        padding-block: var(--sp-2);
    }

    /* ---- density switch in the user menu (segmented control) ---- */
    .qucto-density {
        min-width: 0;
        margin: var(--sp-1) 0 0;
        padding: var(--sp-2) var(--sp-2) var(--sp-1);
        border: 0;
        border-top: 1px solid var(--border-subtle);
    }

    .qucto-density-legend {
        float: left;
        width: 100%;
        margin-bottom: var(--sp-1-5);
        padding: 0;
        font-size: var(--fs-xs);
        line-height: var(--lh-xs);
        font-weight: var(--fw-medium);
        color: var(--text-muted);
    }

    /* Segmented control (density, period switches) — same look as the area tabs. */
    .qucto-segmented {
        display: grid;
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
        gap: var(--sp-0-5);
        clear: both;
        padding: var(--seg-pad);
        background: var(--seg-track);
        border: 1px solid transparent;
        border-radius: var(--seg-radius);
    }

    .qucto-segmented-option {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 28px;
        padding: 0 var(--sp-2);
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        font-weight: var(--fw-medium);
        color: var(--seg-fg);
        border: 1px solid transparent;
        border-radius: var(--seg-item-radius);
        cursor: pointer;
        transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
    }

    /* The native radio stays the control (arrow keys, name, state) — just invisible. */
    .qucto-segmented-option > input {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        opacity: 0;
        cursor: pointer;
    }

    .qucto-segmented-option:hover {
        color: var(--seg-fg-hover);
    }

    .qucto-segmented-option:has(input:checked) {
        color: var(--seg-fg-active);
        background: var(--seg-thumb);
        box-shadow: var(--seg-thumb-shadow);
    }

    .qucto-segmented-option:has(input:focus-visible) {
        outline: var(--focus-ring);
        outline-offset: 0;
    }

    /* ---- command palette (native modal <dialog>, APG combobox) ----
       No enter/exit animation: it opens from a keyboard shortcut many times
       a day and must feel instant (RESEARCH D6). */
    .qucto-palette {
        width: min(40rem, calc(100vw - 2 * var(--sp-4)));
        max-width: none;
        max-height: min(34rem, calc(100dvh - 2 * var(--sp-8)));
        margin: 12vh auto auto;
        padding: 0;
        overflow: hidden;
        color: var(--text);
        background: var(--surface);
        border: 1px solid transparent;
        border-radius: var(--r-xl);
        box-shadow: var(--dialog-shadow);
    }

    .qucto-palette[open] {
        display: flex;
        flex-direction: column;
    }

    .qucto-palette::backdrop {
        background: var(--backdrop);
    }

    .qucto-palette-search {
        display: flex;
        flex: none;
        align-items: center;
        gap: var(--sp-2-5);
        padding: 0 var(--sp-2) 0 var(--sp-4);
        border-bottom: 1px solid var(--border-subtle);
        transition: border-color var(--dur-1) var(--ease-out);
    }

    /* The field's focus shows as the accent line under the search row. */
    .qucto-palette-search:focus-within {
        border-bottom-color: var(--focus);
        box-shadow: 0 1px 0 var(--focus);
    }

    .qucto-palette-search > svg {
        flex: none;
        width: 18px;
        height: 18px;
        stroke-width: 1.75;
        color: var(--text-muted);
    }

    .qucto-palette-input {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        height: 52px;
        min-height: 0;
        padding: 0;
        font-size: var(--fs-md);
        line-height: var(--lh-md);
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .qucto-palette-input:focus-visible {
        outline: none;
    }

    .qucto-palette-input::placeholder {
        color: var(--text-muted);
        opacity: 1;
    }

    .qucto-palette-close {
        display: grid;
        flex: none;
        place-items: center;
        width: 32px;
        height: 32px;
        padding: 0;
        color: var(--text-muted);
        background: transparent;
        border: 0;
        border-radius: var(--r-sm);
        cursor: pointer;
        transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
    }

    .qucto-palette-close:hover {
        color: var(--text);
        background: var(--hover);
    }

    .qucto-palette-close svg {
        width: 16px;
        height: 16px;
    }

    .qucto-palette-list {
        flex: 1 1 auto;
        min-height: 0;
        margin: 0;
        padding: var(--sp-1-5);
        overflow-y: auto;
        overscroll-behavior: contain;
        list-style: none;
        scroll-padding-block: var(--sp-8) var(--sp-1-5);
    }

    .qucto-palette-list ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .qucto-palette-list > li:not([hidden]) ~ li:not([hidden]) {
        margin-top: var(--sp-1-5);
        padding-top: var(--sp-1-5);
        border-top: 1px solid var(--border-subtle);
    }

    .qucto-palette-group-label {
        padding: var(--sp-1-5) var(--sp-2-5) var(--sp-1);
        font-size: var(--fs-xs);
        line-height: var(--lh-xs);
        font-weight: var(--fw-medium);
        color: var(--text-muted);
    }

    .qucto-palette-option {
        display: flex;
        align-items: center;
        gap: var(--sp-2-5);
        min-height: 40px;
        padding: var(--sp-1-5) var(--sp-2-5);
        font-size: var(--fs-base);
        line-height: var(--lh-base);
        color: var(--text);
        border-radius: var(--r-md);
        cursor: pointer;
    }

    .qucto-palette-option[aria-selected='true'] {
        background: var(--hover);
    }

    .qucto-palette-option-icon {
        display: inline-flex;
        flex: none;
        color: var(--text-muted);
    }

    .qucto-palette-option-icon svg {
        width: var(--icon-sm);
        height: var(--icon-sm);
        stroke-width: 1.75;
    }

    .qucto-palette-option[aria-selected='true'] .qucto-palette-option-icon {
        color: var(--text);
    }

    .qucto-palette-option-avatar {
        display: grid;
        flex: none;
        place-items: center;
        width: 22px;
        height: 22px;
        margin-inline: -3px;
        font-size: var(--fs-2xs);
        line-height: 1;
        font-weight: var(--fw-bold);
        color: var(--text-secondary);
        background: var(--surface-2);
        border: 1px solid transparent;
        border-radius: 7px;
    }

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

    .qucto-palette-option-meta {
        flex: none;
        max-width: 45%;
        overflow: hidden;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text-muted);
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .qucto-palette-empty {
        margin: 0;
        padding: var(--sp-8) var(--sp-4);
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        text-align: center;
        color: var(--text-muted);
    }

    /* ---- the firm's data in the palette (Phase 240): title over the matched text ---- */
    .qucto-palette-hit {
        min-height: 44px;
    }

    .qucto-palette-hit-main {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-width: 0;
    }

    .qucto-palette-hit-snippet {
        overflow: hidden;
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text-muted);
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .qucto-palette-all .qucto-palette-option-label {
        font-weight: var(--fw-medium);
    }

    /* Phone: the facts go under the title instead of squeezing it. */
    @media (max-width: 640px) {
        .qucto-palette-hit {
            flex-wrap: wrap;
            row-gap: 0;
        }

        .qucto-palette-hit .qucto-palette-option-meta {
            flex: 1 0 100%;
            order: 3;
            max-width: none;
            padding-left: calc(var(--icon-sm) + var(--sp-2-5));
        }
    }

    .qucto-palette-option mark,
    .qucto-search-hit mark {
        padding: 0;
        font-weight: var(--fw-semibold);
        color: inherit;
        background: var(--accent-wash);
        border-radius: 2px;
    }

    .qucto-palette-loading {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        padding: var(--sp-2) var(--sp-2-5);
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text-muted);
    }

    .qucto-palette-loading::before {
        content: '';
        flex: none;
        width: 12px;
        height: 12px;
        border: 2px solid var(--border-subtle);
        border-top-color: var(--text-muted);
        border-radius: 50%;
        animation: qct-palette-spin 700ms linear infinite;
    }

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

    @media (prefers-reduced-motion: reduce) {
        .qucto-palette-loading::before {
            animation: none;
        }
    }

    .qucto-palette-help {
        display: flex;
        flex: none;
        flex-wrap: wrap;
        gap: var(--sp-1) var(--sp-4);
        margin: 0;
        padding: var(--sp-2) var(--sp-4);
        font-size: var(--fs-xs);
        line-height: var(--lh-xs);
        color: var(--text-muted);
        background: var(--surface-sunken);
        border-top: 1px solid var(--border-subtle);
    }

    @media (max-width: 40rem) {
        .qucto-palette {
            width: calc(100vw - 2 * var(--sp-2));
            max-height: calc(100dvh - 2 * var(--sp-2));
            margin-top: var(--sp-2);
        }
    }

    /* ---- active filters as removable chips (_filter_panel.html.twig) ---- */
    .qucto-filter-chips {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp-2);
        padding: 0 var(--card-px) var(--sp-3);
    }

    .qucto-filters[open] + .qucto-filter-chips {
        padding-top: var(--sp-3);
        border-top: 1px solid var(--border-subtle);
    }

    .qucto-filter-chip-list {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-2);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .qucto-filter-chip {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-1);
        max-width: 100%;
        min-height: 28px;
        padding: 0 var(--sp-1-5) 0 var(--sp-2-5);
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text);
        text-decoration: none;
        background: var(--accent-wash);
        border: 1px solid transparent;
        border-radius: var(--r-pill);
        box-shadow: 0 0 0 1px var(--accent-line);
        transition: background-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
    }

    .qucto-filter-chip-text {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .qucto-filter-chip-label {
        color: var(--text-secondary);
    }

    .qucto-filter-chip-value {
        font-weight: var(--fw-medium);
    }

    .qucto-filter-chip::after {
        content: '';
        flex: none;
        width: 16px;
        height: 16px;
        background: var(--text-secondary);
        mask: var(--i-close) center / 12px no-repeat;
        border-radius: 50%;
    }

    .qucto-filter-chip:hover {
        background: var(--accent-soft);
        box-shadow: 0 0 0 1px var(--accent-hover);
    }

    .qucto-filter-chip:hover::after {
        background: var(--text);
    }

    .qucto-filter-chips-clear {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        padding: 0 var(--sp-1);
        font-size: var(--fs-sm);
        font-weight: var(--fw-medium);
        color: var(--text-secondary);
        border-radius: var(--r-xs);
    }

    .qucto-filter-chips-clear:hover {
        color: var(--text);
    }

    /* ---- list tables → cards on a narrow container (RESEARCH D4 „Mobil").
       Opt-in: `.qucto-table-scroll.qucto-table-cards` around a list table
       whose cells carry data-label (the column header) and whose markup
       carries explicit table roles, so screen readers keep rows, cells and
       (visually hidden) column headers once `display` changes. The cell of
       the detail link (number / name / title) heads the card, the amount
       sits opposite, a status pill below; the rest are label: value rows.
       Analytics and pivot tables do not opt in and keep scrolling. ---- */
    .qucto-table-cards {
        container: qucto-list / inline-size;
    }

    @container qucto-list (max-width: 40rem) {
        .qucto-table-scroll.qucto-table-cards > .qucto-table,
        .qucto-table-scroll.qucto-table-cards > .qucto-table > tbody,
        .qucto-table-scroll.qucto-table-cards > .qucto-table > caption {
            display: block;
        }

        .qucto-table-scroll.qucto-table-cards > .qucto-table > thead {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip-path: inset(50%);
            white-space: nowrap;
        }

        /* Header shortcuts would be invisible focus stops; „Seskupit podle"
           stays in the filter panel. */
        .qucto-table-cards .qucto-table-group-link {
            display: none;
        }

        .qucto-table-scroll.qucto-table-cards > .qucto-table > tbody > tr {
            position: relative;
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            column-gap: var(--sp-3);
            padding: var(--sp-3) var(--card-px, var(--sp-4));
            border-bottom: 1px solid var(--border-subtle);
            transition: background-color var(--dur-1) var(--ease-out);
        }

        .qucto-table-scroll.qucto-table-cards > .qucto-table > tbody > tr:last-child {
            border-bottom: 0;
        }

        .qucto-table-scroll.qucto-table-cards > .qucto-table > tbody > tr > :is(td, th) {
            position: static;
            display: grid;
            grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
            grid-column: 1 / -1;
            column-gap: var(--sp-3);
            min-width: 0;
            padding: var(--sp-0-5) 0;
            text-align: right;
            white-space: normal;
            overflow-wrap: anywhere;
            background: transparent;
            border: 0;
            box-shadow: none;
        }

        .qucto-table-scroll.qucto-table-cards > .qucto-table > tbody > tr > :is(td, th):empty {
            display: none;
        }

        /* Keep cards short: zero deductions add nothing, and without any
           deduction the net amount only repeats the document value. The
           table (desktop) and the Excel export still show every column. */
        .qucto-table-scroll.qucto-table-cards > .qucto-table > tbody > tr > :is([data-column='advance_applied'], [data-column='setoff_applied'], [data-column='opposite_amount'])[data-value='0.00'],
        .qucto-table-scroll.qucto-table-cards > .qucto-table > tbody > tr:has(> [data-column='advance_applied'][data-value='0.00']):has(> [data-column='setoff_applied'][data-value='0.00']) > [data-column='payable'] {
            display: none;
        }

        /* Label column: decorative copy of the header (alt text '' — the
           real header reaches assistive tech through the hidden <thead>). */
        .qucto-table-scroll.qucto-table-cards > .qucto-table > tbody > tr > :is(td, th)[data-label]:not([data-column='number'], [data-column='name'], [data-column='title'], [data-column='amount'], [data-column='select'])::before {
            content: attr(data-label);
            content: attr(data-label) / '';
            grid-row: 1 / span 4;
            font-size: var(--fs-sm);
            line-height: var(--lh-sm);
            font-weight: var(--fw-regular);
            text-align: left;
            color: var(--text-muted);
            overflow-wrap: normal;
        }

        .qucto-table-scroll.qucto-table-cards .qucto-num {
            white-space: nowrap;
        }

        /* Card head: the detail link and the amount opposite it. */
        .qucto-table-scroll.qucto-table-cards > .qucto-table > tbody > tr > :is([data-column='number'], [data-column='name'], [data-column='title']) {
            display: block;
            grid-row: 1;
            grid-column: 1;
            padding: 0 0 var(--sp-1);
            font-size: var(--fs-md);
            line-height: var(--lh-md);
            font-weight: var(--fw-semibold);
            text-align: left;
            overflow-wrap: break-word;
        }

        .qucto-table-scroll.qucto-table-cards > .qucto-table > tbody > tr > [data-column='amount'] {
            display: block;
            grid-row: 1;
            grid-column: 2;
            padding: 0 0 var(--sp-1);
            font-size: var(--fs-md);
            line-height: var(--lh-md);
            font-weight: var(--fw-semibold);
        }

        /* A status pill speaks for itself: its own line under the head. */
        .qucto-table-scroll.qucto-table-cards > .qucto-table > tbody > tr > :is([data-column='status'], [data-column='state']):has(> .qucto-badge) {
            display: flex;
            flex-wrap: wrap;
            gap: var(--sp-1);
            grid-row: 2;
            padding: 0 0 var(--sp-1-5);
        }

        .qucto-table-scroll.qucto-table-cards > .qucto-table > tbody > tr > :is([data-column='status'], [data-column='state'])[data-label]:has(> .qucto-badge)::before {
            content: none;
        }

        .qucto-table-scroll.qucto-table-cards > .qucto-table > tbody > tr > [data-column='select'] {
            display: block;
            grid-row: 1;
            grid-column: 2;
            padding: 0;
        }

        /* WCAG 2.5.8: the 16 px box inside the card's tap area gets an
           invisible ≥ 24 px (44 px on touch) hit area; the checkmark keeps
           ::before, the input is already position: relative (rule below). */
        .qucto-table-scroll.qucto-table-cards > .qucto-table > tbody > tr > [data-column='select'] input[type='checkbox']::after {
            content: '';
            position: absolute;
            inset: calc(-1 * var(--sp-1));
        }

        @media (pointer: coarse) {
            .qucto-table-scroll.qucto-table-cards > .qucto-table > tbody > tr > [data-column='select'] input[type='checkbox']::after {
                inset: calc(-1 * var(--sp-3) - var(--sp-0-5));
            }
        }

        .qucto-table-scroll.qucto-table-cards .qucto-table-secondary {
            margin-top: 0;
        }

        /* The whole card opens the detail (stretched link); other controls
           in the card stay clickable above it. */
        .qucto-table-scroll.qucto-table-cards > .qucto-table > tbody > tr > :is([data-column='number'], [data-column='name'], [data-column='title']) > a:first-child::after {
            content: '';
            position: absolute;
            inset: 0;
        }

        .qucto-table-scroll.qucto-table-cards > .qucto-table > tbody > tr > :is(td, th):not([data-column='number'], [data-column='name'], [data-column='title']) :is(a, button, input, select, label, summary) {
            position: relative;
            z-index: 1;
        }

        @media (hover: hover) {
            .qucto-table-scroll.qucto-table-cards > .qucto-table > tbody > tr:hover {
                background: var(--row-hover);
            }
        }
    }

    /* =====================================================================
       Forced colours: floating layers and pills keep a visible edge.
       ===================================================================== */
    @media (forced-colors: active) {
        .qucto-badge,
        .qucto-tag,
        .qucto-filters-count,
        .qucto-nav-badge-pill {
            border: 1px solid CanvasText;
        }

        .qucto-callout::before,
        .qucto-flash::before,
        .qucto-form-error::before,
        .qucto-filter-chip::after {
            background: CanvasText;
            forced-color-adjust: none;
        }

        .qucto-palette-option[aria-selected='true'],
        .qucto-segmented-option:has(input:checked) {
            outline: 2px solid Highlight;
            outline-offset: -2px;
        }

        .qucto-button {
            border: 1px solid ButtonText;
        }

        .qucto-pagination-page[aria-current='page'] {
            outline: 2px solid Highlight;
        }
    }

    /* Touch: every target at least 44 px. */
    @media (pointer: coarse) {
        .qucto-icon-btn {
            width: 44px;
            height: 44px;
        }

        .qucto-user-pop-action,
        .qucto-ws-option,
        .qucto-ctxmenu-item,
        .qucto-menu-item,
        .qucto-pagination-page,
        .qucto-palette-option,
        .qucto-segmented-option,
        .qucto-filter-chip,
        .qucto-filter-chips-clear {
            min-height: 44px;
        }

        .qucto-palette-close {
            width: 44px;
            height: 44px;
        }

        /* No keyboard legend on touch. */
        .qucto-palette-help,
        .qucto-palette-trigger-kbd {
            display: none;
        }
    }
}

@layer components {
    /* =====================================================================
       List toolbar (Zaměstnanci, 2026-09-24): the card header carries two
       icon actions — „Hledání a filtry" toggles the filter row below it
       (checkbox without a name + :has(), no JavaScript), „Sloupce" opens
       the column chooser in a native [popover].
       ===================================================================== */
    .qucto-card-flush > .qucto-list-toolbar > .qucto-card-header {
        margin: 0;
        padding: var(--sp-3-5) var(--card-px) var(--sp-2);
    }

    .qucto-list-toolbar-filters {
        display: none;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp-2);
        padding: var(--sp-1) var(--card-px) var(--sp-3);
    }

    .qucto-list-toolbar:has(> .qucto-list-toolbar-toggle:checked) .qucto-list-toolbar-filters {
        display: flex;
    }

    .qucto-list-toolbar-filters select {
        width: auto;
        max-width: 100%;
    }

    .qucto-list-toolbar-search {
        position: relative;
        flex: 1 1 16rem;
        max-width: 22rem;
        min-width: 12rem;
    }

    .qucto-list-toolbar-search > svg {
        position: absolute;
        top: 50%;
        left: var(--sp-3);
        width: var(--icon-sm);
        height: var(--icon-sm);
        color: var(--text-muted);
        transform: translateY(-50%);
        pointer-events: none;
    }

    .qucto-list-toolbar-search > input {
        width: 100%;
        padding-inline-start: calc(var(--sp-3) + var(--icon-sm) + var(--sp-2));
    }

    .qucto-list-toolbar-actions {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
    }

    /* The filter toggle is a <label>; its checkbox carries focus and state. */
    .qucto-list-toolbar-toggle:focus-visible + .qucto-card-header [data-employees-filters-toggle] {
        outline: var(--focus-ring);
        outline-offset: var(--focus-offset);
    }

    .qucto-list-toolbar-toggle:checked + .qucto-card-header [data-employees-filters-toggle] {
        color: var(--text);
        background: var(--hover);
        box-shadow: none;
    }

    .qucto-icon-btn-dot {
        position: absolute;
        top: 7px;
        right: 7px;
        width: 7px;
        height: 7px;
        background: var(--qct-brand);
        border-radius: 50%;
        box-shadow: 0 0 0 2px var(--surface);
    }

    /* Icon-only actions next to the filters: same height as the controls. */
    .qucto-icon-btn.qucto-icon-btn-outline {
        position: relative;
        width: var(--control-h);
        height: var(--control-h);
        color: var(--text-secondary);
        background: var(--surface);
        border-radius: var(--r-control);
        box-shadow: var(--e0);
    }

    .qucto-icon-btn.qucto-icon-btn-outline:hover {
        color: var(--text);
        background: var(--surface);
        box-shadow: var(--e0-hover);
    }

    .qucto-icon-btn.qucto-icon-btn-outline svg {
        width: 18px;
        height: 18px;
    }

    /* Column chooser popover: near the toolbar on wide screens, a bottom sheet
       on phones. Anchor positioning where supported, centred otherwise. */
    .qucto-columns-popover {
        width: min(22rem, calc(100vw - 2 * var(--sp-4)));
        max-height: min(32rem, calc(100dvh - 2 * var(--sp-6)));
        padding: var(--sp-4);
        overflow: auto;
        overscroll-behavior: contain;
    }

    .qucto-columns-popover::backdrop {
        background: transparent;
    }

    .qucto-columns-popover-title {
        margin: 0;
        font-size: var(--fs-title-sm);
        line-height: var(--lh-title-sm);
        font-weight: var(--fw-semibold);
    }

    .qucto-columns-popover-hint {
        margin: var(--sp-1) 0 var(--sp-3);
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--text-muted);
    }

    .qucto-columns-popover-list {
        display: grid;
        gap: 0;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .qucto-columns-popover-list label {
        display: flex;
        align-items: center;
        gap: var(--sp-2-5);
        min-height: var(--control-h-sm);
        padding: var(--sp-1) var(--sp-2);
        border-radius: var(--r-sm);
        cursor: pointer;
    }

    .qucto-columns-popover-list label:hover {
        background: var(--hover);
    }

    .qucto-columns-popover-fixed {
        margin-inline-start: var(--sp-1);
        font-size: var(--fs-xs);
        line-height: var(--lh-xs);
        color: var(--text-muted);
    }

    .qucto-columns-popover-actions {
        display: flex;
        justify-content: flex-end;
        gap: var(--sp-2);
        margin-block-start: var(--sp-3);
        padding-block-start: var(--sp-3);
        border-top: 1px solid var(--border-subtle);
    }

    @supports (anchor-name: --x) {
        [data-employees-columns-toggle] {
            anchor-name: --employee-columns;
        }

        .qucto-columns-popover {
            position-anchor: --employee-columns;
            inset: auto;
            top: anchor(bottom);
            right: anchor(right);
            margin: var(--sp-2) 0 0;
            position-try-fallbacks: flip-block;
        }
    }

    @media (max-width: 640px) {
        /* Phones: search and both selects full width, Filtrovat below. */
        .qucto-list-toolbar-search,
        .qucto-list-toolbar-filters select,
        .qucto-list-toolbar-filters > .qucto-button {
            flex: 1 1 100%;
            width: 100%;
            min-width: 0;
            max-width: none;
        }

        .qucto-columns-popover,
        .qucto-columns-popover:popover-open {
            inset: auto 0 0 0;
            width: 100%;
            max-width: none;
            margin: 0;
            padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
            border-radius: var(--r-card) var(--r-card) 0 0;
        }

        .qucto-columns-popover::backdrop {
            background: var(--backdrop, transparent);
        }

        .qucto-columns-popover-list label {
            min-height: var(--control-h);
        }
    }

    /* A whole tile as a link (employee agendas, 2026-09-24): the state is
       text, not a number, so the value is set a step smaller than a KPI. */
    .qucto-stat-link {
        color: inherit;
        text-decoration: none;
        transition: box-shadow var(--dur-1) var(--ease-out);
    }

    .qucto-stat-link:hover {
        box-shadow: var(--e0-hover);
    }

    .qucto-stat-link:focus-visible {
        outline: var(--focus-ring);
        outline-offset: var(--focus-offset);
    }

    .qucto-stat-link .qucto-stat-value {
        font-size: var(--fs-title);
        line-height: var(--lh-title);
    }

    .qucto-stat-link .qucto-stat-meta {
        margin-top: auto;
    }

    /* Narrow tiles: four in a row on a desktop, two on a phone. */
    .qucto-employee-agendas {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
        margin-block-end: var(--card-gap);
    }

    @media (max-width: 640px) {
        .qucto-employee-agendas .qucto-stat {
            padding: var(--sp-3) var(--sp-3-5);
        }

        .qucto-employee-agendas .qucto-stat-value {
            font-size: var(--fs-base);
            line-height: var(--lh-base);
        }
    }

    /* Payroll history of an employee: a month with results in two currencies
       stacks one line per currency in each amount cell. */
    .qucto-payroll-line {
        display: block;
    }

    /* A form in a native [popover] (employee document upload): centred like
       a dialog, a bottom sheet on phones. */
    .qucto-form-popover {
        width: min(36rem, calc(100vw - 2 * var(--sp-4)));
        max-height: calc(100dvh - 2 * var(--sp-6));
        padding: var(--sp-5);
        overflow: auto;
        overscroll-behavior: contain;
    }

    .qucto-form-popover::backdrop {
        background: var(--backdrop, transparent);
    }

    .qucto-form-popover > .qucto-card-title {
        margin-block-end: var(--sp-3);
    }

    @media (max-width: 640px) {
        .qucto-form-popover,
        .qucto-form-popover:popover-open {
            inset: auto 0 0 0;
            width: 100%;
            max-width: none;
            margin: 0;
            padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
            border-radius: var(--r-card) var(--r-card) 0 0;
        }
    }

    @media (forced-colors: active) {
        .qucto-icon-btn.qucto-icon-btn-outline {
            border: 1px solid ButtonText;
        }
    }
}