/* LIRA LUMA CRM
   A zero-build design system: all console pages use this single local file. */

:root {
    color-scheme: light;

    --color-bg: #f6f7f9;
    --color-surface: #ffffff;
    --color-surface-subtle: #f9fafb;
    --color-surface-hover: #f7f8fa;
    --color-border: #e4e7ec;
    --color-border-strong: #cfd5df;
    --color-text: #182230;
    --color-text-muted: #667085;
    --color-text-subtle: #8a94a6;

    --color-accent: #4f46e5;
    --color-accent-hover: #4338ca;
    --color-accent-active: #3730a3;
    --color-accent-soft: #eef2ff;
    --color-focus: rgba(79, 70, 229, 0.24);

    --color-success: #067647;
    --color-success-soft: #ecfdf3;
    --color-success-border: #abefc6;
    --color-warning: #8a5800;
    --color-warning-soft: #fff7e6;
    --color-warning-border: #fedf89;
    --color-danger: #b42318;
    --color-danger-hover: #912018;
    --color-danger-soft: #fff0ee;
    --color-danger-border: #fecdca;
    --color-info: #175cd3;
    --color-info-soft: #eff8ff;
    --color-info-border: #b2ddff;

    --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-md: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.5rem;
    --text-2xl: 1.875rem;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08),
        0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-md: 0 12px 28px rgba(16, 24, 40, 0.12),
        0 4px 8px rgba(16, 24, 40, 0.06);

    --control-sm: 2rem;
    --control-md: 2.375rem;
    --control-lg: 2.75rem;
    --content-max: 90rem;
    --page-gutter: 2rem;
    --topbar-height: 3.75rem;
}

/* Picking is intentionally its own mobile-first working surface. */
.page--picking {
    max-width: 74rem;
}

.picking-page-header,
.picking-header,
.picking-queue__item .card__body {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.picking-header {
    justify-content: flex-start;
}

.picking-header__back {
    align-items: center;
    background: var(--color-accent);
    border-radius: var(--radius-md);
    color: #fff;
    display: inline-flex;
    flex: 0 0 2.75rem;
    font-size: 1.5rem;
    font-weight: 800;
    justify-content: center;
    min-height: 2.75rem;
    text-decoration: none;
}

.picking-header__back:hover {
    background: var(--color-accent-hover);
    color: #fff;
}

.picking-header__back:active {
    background: var(--color-accent-active);
}

.picking-header__summary {
    font-size: clamp(.8125rem, 3.6vw, 1.125rem);
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
}

.picking-tabs {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #ddd8d2);
    border-radius: .75rem;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    margin-bottom: 1rem;
    overflow: hidden;
}

.picking-tabs a {
    color: inherit;
    padding: .85rem .5rem;
    text-align: center;
    text-decoration: none;
}

.picking-tabs a.is-active {
    background: #27231f;
    color: #fff;
}

.picking-queue,
.picking-screen #picking-app {
    display: grid;
    gap: 1rem;
}

.picking-queue__item.is-stuck {
    border-color: var(--color-warning-border);
    box-shadow: 0 0 0 2px var(--color-warning-border);
}

.picking-stage {
    background: #fff;
    border: 1px solid #ddd8d2;
    border-radius: 1rem;
    box-shadow: 0 .35rem 1.5rem rgb(36 29 21 / 8%);
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.picking-stage__visual {
    min-height: 45vh;
}

.picking-scan-panel {
    align-self: start;
    background: #fff;
    border: 2px solid #27231f;
    border-radius: .75rem;
    box-shadow: 0 .5rem 1.5rem rgb(36 29 21 / 14%);
    padding: .9rem;
    position: sticky;
    top: calc(var(--topbar-height) + .5rem);
    z-index: 10;
}

.picking-scan-panel h2 {
    font-size: clamp(1.7rem, 7vw, 2.6rem);
    line-height: 1.05;
    margin: 0 0 .8rem;
}

.picking-stage__kicker {
    background: #f6c344;
    border-radius: .5rem;
    color: #201707;
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: .08em;
    padding: .7rem;
    text-align: center;
}

.picking-location {
    display: block;
    font-size: clamp(2.8rem, 14vw, 7rem);
    letter-spacing: .02em;
    line-height: 1;
    margin: 1rem 0;
    text-align: center;
}

.picking-location__label {
    color: var(--color-text-muted);
    display: block;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
}

.picking-stage[data-kind="ean"] .picking-location {
    font-size: clamp(1.65rem, 8vw, 3rem);
    margin: .35rem 0 .75rem;
}

.picking-stage[data-kind="ean"] .picking-location-context {
    border-top: 1px solid #ddd8d2;
    margin-top: 1.5rem;
    padding-top: 1rem;
}

.tray-map {
    display: grid;
    gap: clamp(.12rem, .8vw, .35rem);
    grid-template-columns: repeat(9, minmax(0, 1fr));
    margin: 1rem auto;
    max-width: 42rem;
    width: 100%;
}

.tray-map__cell {
    align-items: center;
    aspect-ratio: 1.15;
    background: #f1eee9;
    border: 2px solid #d2ccc4;
    border-radius: .35rem;
    display: flex;
    font-size: clamp(.62rem, 2.8vw, .9rem);
    font-weight: 700;
    justify-content: center;
}

.tray-map__cell.is-target {
    background: #27231f;
    border-color: #27231f;
    color: #fff;
    transform: scale(1.07);
}

.tray-map__cell.is-known:not(.is-target) {
    border-color: #8b8277;
}

.picking-product {
    text-align: center;
}

.picking-product h3 {
    font-size: clamp(1.5rem, 6vw, 2.5rem);
    line-height: 1.1;
    margin: 0 auto .75rem;
    max-width: 44rem;
}

.picking-product img,
.picking-product__placeholder {
    background: #f4f1ed;
    border-radius: .75rem;
    height: min(48vh, 30rem);
    margin: 0 auto 1rem;
    object-fit: contain;
    width: 100%;
}

.picking-product__placeholder {
    align-items: center;
    color: #777;
    display: flex;
    justify-content: center;
}

.picking-counter {
    font-size: clamp(1.8rem, 8vw, 3.5rem);
    font-weight: 800;
    margin: .5rem 0 1rem;
}

.picking-scan-form {
    display: grid;
    gap: .45rem;
}

.picking-scan-form label {
    font-size: 1rem;
    font-weight: 800;
}

.picking-scan-form .form-hint {
    margin: 0;
}

.picking-scan-form input {
    font-size: 1.35rem;
    min-height: 3.4rem;
    width: 100%;
}

.picking-scan-form .btn {
    min-height: 3.25rem;
}

.picking-alarm {
    background: #a71919;
    border-radius: .75rem;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 800;
    padding: 1rem;
    position: sticky;
    top: .5rem;
    z-index: 20;
}

#picking-app.is-error::before {
    background: rgb(166 20 20 / 28%);
    content: '';
    inset: 0;
    pointer-events: none;
    position: fixed;
    z-index: 19;
}

.picking-blocker {
    align-items: center;
    background: rgb(20 24 27 / 88%);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1rem;
    position: fixed;
    z-index: 100;
}

.picking-blocker[hidden] {
    display: none;
}

.picking-blocker__panel {
    background: #fff;
    border-radius: .9rem;
    max-width: 34rem;
    padding: 2rem;
    text-align: center;
    width: 100%;
}

.picking-blocker__panel h2 {
    color: #a71919;
    margin-top: 0;
}

.picking-summary {
    display: grid;
    gap: .75rem;
}

.picking-summary article {
    align-items: center;
    border-bottom: 1px solid #e5e1dc;
    display: grid;
    gap: .75rem;
    grid-template-columns: 3.5rem 1fr auto;
    padding-bottom: .75rem;
}

.picking-summary img {
    height: 3.5rem;
    object-fit: contain;
    width: 3.5rem;
}

.warehouse-report .kv dt {
    text-transform: none;
}

@media (max-width: 56.25rem) {
    .picking-scan-panel {
        top: calc(var(--topbar-height) + .5rem);
    }
}

@media (max-width: 47.99rem) {
    .page.page--picking {
        padding-block: .75rem 1.5rem;
    }

    .picking-screen #picking-app {
        gap: .5rem;
    }

    .picking-header {
        gap: .5rem;
    }

    .picking-stage {
        gap: .5rem;
        padding: .65rem;
    }

    .picking-scan-panel {
        padding: .65rem;
    }

    .picking-scan-panel h2 {
        margin-bottom: .4rem;
    }

    .picking-scan-form {
        gap: .3rem;
    }
}

@media (min-width: 48rem) {
    .picking-stage {
        grid-template-columns: minmax(0, 1fr) minmax(18rem, .45fr);
        padding: 1.5rem;
    }

    .picking-scan-panel {
        grid-column: 2;
        grid-row: 1;
    }

    .picking-stage__visual {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .product-locations-card {
        grid-column: 1 / -1;
    }
}

/* "Приёмка": a counting surface, not a picking one. The operator stands at a
   pallet with a scanner and reads two things — the bar at the top and the row
   that just moved — so both are large, and nothing else competes with them. */
.page--inbound {
    max-width: 74rem;
}

#inbound-app {
    display: grid;
    gap: var(--space-4);
}

#inbound-app.is-error {
    animation: inbound-shake 160ms ease-in-out 2;
}

@keyframes inbound-shake {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-6px); }
}

.inbound-header {
    align-items: center;
}

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

.inbound-progress {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
    position: sticky;
    top: var(--space-2);
    z-index: 10;
}

.inbound-progress__track {
    height: 0.75rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.inbound-progress__fill {
    display: block;
    height: 100%;
    background: var(--color-accent);
    transition: width 220ms ease;
}

.inbound-progress__label {
    margin: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    font-variant-numeric: tabular-nums;
}

.inbound-progress__count {
    font-size: var(--text-xl);
    font-weight: 800;
}

.inbound-progress__percent {
    color: var(--color-text-muted);
    font-weight: 650;
}

/* Red is "nothing was recorded", amber is "it was recorded and you should
   look" — different answers, different existing CRM colours. */
.inbound-alarm {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: #a71919;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 800;
    position: sticky;
    top: var(--space-2);
    z-index: 20;
}

.inbound-alarm.is-warning {
    background: var(--color-warning-soft);
    border: 1px solid var(--color-warning-border);
    color: var(--color-warning);
}

.inbound-blocker,
.inbound-dialog {
    align-items: center;
    background: rgb(20 24 27 / 88%);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: var(--space-4);
    position: fixed;
    z-index: 100;
}

.inbound-blocker__panel,
.inbound-dialog__panel {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    max-width: 40rem;
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--space-8);
    width: 100%;
}

.inbound-blocker__panel {
    max-width: 34rem;
    text-align: center;
}

.inbound-blocker__panel h2 {
    color: #a71919;
    margin-top: 0;
}

.inbound-dialog__question {
    font-size: var(--text-lg);
    font-weight: 650;
    line-height: 1.4;
}

.inbound-dialog__discrepancies {
    margin-block: var(--space-5);
}

.inbound-dialog .actions {
    margin-top: var(--space-5);
}

.inbound-issue-form {
    display: grid;
    gap: var(--space-4);
}

.inbound-issue-form > :where(h2, p, .form-row) {
    margin-block: 0;
}

.inbound-issue-types {
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
    border: 0;
}

.inbound-issue-types legend {
    margin-bottom: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 600;
}

.inbound-issue-types label {
    margin: 0;
    padding: var(--space-3);
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    cursor: pointer;
}

.inbound-issue-types input {
    margin-top: .2rem;
}

.inbound-finish-panel {
    max-width: 72rem;
}

.data-table--finish-issues :where(select, textarea, input[type="file"]) {
    min-width: 10rem;
}

.data-table--finish-issues textarea {
    min-height: 4rem;
}

.data-table--finish-issues input[type="file"] {
    max-width: 14rem;
}

.inbound-over-hint {
    margin-top: var(--space-2);
    white-space: normal;
    text-align: left;
}

.inbound-issues .card__body p {
    margin: 0;
}

.data-table--inbound-issues td {
    vertical-align: middle;
}

.inbound-issue-photo {
    width: 3.25rem;
    height: 3.25rem;
    display: block;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
}

.inbound-issue-photos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    min-width: 8rem;
}

.inbound-issue-photo-count {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.inbound-photo-selection {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-5);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.inbound-photo-selection:empty {
    display: none;
}

.inbound-issue-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.inbound-toast {
    right: var(--space-5);
    bottom: var(--space-5);
    z-index: 120;
    position: fixed;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-success);
    color: #fff;
    font-weight: 700;
    box-shadow: var(--shadow-md);
}

.inbound-stage .card__body {
    display: grid;
    gap: var(--space-3);
}

.inbound-scan-form,
.inbound-qty-form,
.inbound-location-form {
    display: grid;
    gap: var(--space-2);
}

/* These stage fields are the controls a person touches while holding a scanner
   in the other hand, so they are the console's largest. */
.inbound-scan-form input,
.inbound-qty-form input,
.inbound-location-form input {
    min-height: var(--control-lg);
    font-size: var(--text-lg);
    font-variant-numeric: tabular-nums;
}

.inbound-qty__name,
.inbound-location__name {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 700;
}

.inbound-qty__ean,
.inbound-location__ean {
    margin: 0;
    color: var(--color-text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.inbound-qty__counter,
.inbound-location__qty,
.inbound-progress__placed {
    margin: 0;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.inbound-actions {
    justify-content: flex-end;
}

.data-table--inbound-lines td {
    font-variant-numeric: tabular-nums;
}

@media (min-width: 48rem) {
    /* On narrow screens nowrap preserves the address; extra width only lengthens table scrolling. */
    .data-table--inbound-lines th:last-child,
    .data-table--inbound-lines td:last-child {
        min-width: 9.5rem;
    }
}

.inbound-places {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
    font-weight: 650;
}

.inbound-line__places {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.inbound-line-cancel {
    flex: none;
    margin-left: auto;
    white-space: nowrap;
}

.inbound-place {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.inbound-place__code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: nowrap;
}

.inbound-place__qty {
    white-space: nowrap;
}

.data-table--inbound-lines tr.is-active td {
    background: var(--color-accent-soft);
}

.data-table--inbound-lines tr.is-complete td {
    background: var(--color-success-soft);
}

.data-table--inbound-lines tr.is-over td {
    background: var(--color-warning-soft);
}

.inbound-line__mark {
    margin-left: var(--space-2);
    font-weight: 800;
}

.data-table--inbound-lines tr.is-over .inbound-line__mark {
    color: var(--color-warning);
}

.is-unplaced {
    color: var(--color-warning);
}

.inbound-line-scans {
    margin-top: var(--space-2);
    font-variant-numeric: tabular-nums;
}

.inbound-line-scans > summary {
    cursor: pointer;
}

.inbound-scan-list {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
    padding-left: var(--space-5);
}

.inbound-scan-entry--voided .inbound-scan-entry__facts {
    text-decoration: line-through;
}

.inbound-scan-entry {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.inbound-scan-entry__facts {
    /* Keep long actor labels from collapsing the table column to one character;
       the existing .table-wrap owns horizontal scrolling. */
    min-width: 8rem;
    overflow-wrap: anywhere;
}

.inbound-scan-cancel {
    flex: none;
    margin-left: auto;
    min-width: 2rem;
    min-height: 2rem;
}

[data-void-queue-hint] {
    flex-basis: 100%;
}

@media (max-width: 47.99rem) {
    .inbound-line-cancel {
        flex-basis: 100%;
        width: max-content;
        max-width: 100%;
    }

    .inbound-progress {
        position: static;
        padding: var(--space-3);
    }

    .inbound-dialog__panel {
        padding: var(--space-5);
    }
}

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

html {
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    min-width: 20rem;
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow-x: clip;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--text-md);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

main {
    flex: 1 0 auto;
    min-width: 0;
    max-width: 100%;
}

form {
    margin: 0;
}

img {
    max-width: 100%;
}

a {
    color: var(--color-accent);
    text-underline-offset: 0.16em;
}

a:hover {
    color: var(--color-accent-hover);
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 0;
    font-size: clamp(1.5rem, 2vw, var(--text-2xl));
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

h2 {
    margin-bottom: 0;
    font-size: var(--text-base);
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

strong {
    font-weight: 650;
}

::selection {
    background: var(--color-accent-soft);
    color: var(--color-text);
}

[hidden] {
    display: none !important;
}

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

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

.cell-nowrap {
    white-space: nowrap;
}

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

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--color-focus);
}

.skip-link {
    position: fixed;
    z-index: 100;
    top: var(--space-3);
    left: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-text);
    color: var(--color-surface);
    font-weight: 650;
    text-decoration: none;
    transform: translateY(calc(-100% - var(--space-6)));
    transition: transform 140ms ease;
}

.skip-link:focus {
    color: var(--color-surface);
    transform: translateY(0);
}

/* Application chrome --------------------------------------------------- */

.topbar {
    position: sticky;
    z-index: 20;
    top: 0;
    flex: 0 0 auto;
    max-width: 100%;
    border-bottom: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow-xs);
    backdrop-filter: blur(10px);
}

.topbar__inner {
    width: calc(100% - var(--page-gutter) - var(--page-gutter));
    max-width: var(--content-max);
    min-height: var(--topbar-height);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.brand,
.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text);
    text-decoration: none;
}

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

.brand__mark {
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    display: inline-grid;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--color-accent);
    color: #ffffff;
    font-size: var(--text-base);
    font-weight: 750;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.2);
}

.brand__name {
    font-size: var(--text-sm);
    font-weight: 750;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.brand__product {
    padding-left: var(--space-2);
    border-left: 1px solid var(--color-border-strong);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
}

.topbar__nav {
    align-self: stretch;
    display: flex;
    align-items: stretch;
    gap: var(--space-1);
}

.topbar__nav a {
    position: relative;
    min-height: var(--topbar-height);
    padding-inline: var(--space-2);
    display: inline-flex;
    align-items: center;
    color: var(--color-text-muted);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color 140ms ease, background-color 140ms ease;
}

.topbar__nav a::after {
    position: absolute;
    right: var(--space-3);
    bottom: 0;
    left: var(--space-3);
    height: 2px;
    border-radius: var(--radius-pill) var(--radius-pill) 0 0;
    background: transparent;
    content: "";
}

.topbar__nav a:hover {
    background: var(--color-surface-subtle);
    color: var(--color-text);
}

.topbar__nav a.is-active,
.topbar__nav a[aria-current="page"] {
    color: var(--color-accent);
}

.topbar__nav a.is-active::after,
.topbar__nav a[aria-current="page"]::after {
    background: var(--color-accent);
}

.topbar__account {
    min-width: 0;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.locale-switch {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.locale-switch__option {
    min-width: 2rem;
    min-height: var(--control-sm);
    padding: 0 var(--space-2);
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: var(--text-xs);
    font-weight: 650;
    cursor: pointer;
}

.locale-switch__option + .locale-switch__option {
    border-left: 1px solid var(--color-border);
}

.locale-switch__option:hover:not(:disabled) {
    background: var(--color-surface-hover);
    color: var(--color-text);
}

.locale-switch__option[aria-current="true"] {
    background: var(--color-accent-soft);
    color: var(--color-accent-hover);
    cursor: default;
}

.user-avatar {
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    display: inline-grid;
    place-items: center;
    border: 1px solid #d9d6fe;
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent-hover);
    font-size: var(--text-sm);
    font-weight: 700;
}

.topbar__identity {
    min-width: 0;
    max-width: 10rem;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.topbar__user {
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.app-footer {
    width: calc(100% - var(--page-gutter) - var(--page-gutter));
    max-width: var(--content-max);
    margin: auto auto 0;
    padding-block: var(--space-5) var(--space-6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
}

/* Page structure ------------------------------------------------------- */

.page {
    width: calc(100% - var(--page-gutter) - var(--page-gutter));
    max-width: var(--content-max);
    min-width: 0;
    margin-inline: auto;
    padding-block: var(--space-8) var(--space-12);
}

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

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

.page-header__eyebrow,
.confirmation-card__eyebrow {
    margin-bottom: var(--space-1);
    color: var(--color-accent);
    font-size: var(--text-xs);
    font-weight: 750;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.page-header__subtitle,
.page-header__description {
    max-width: 44rem;
    margin: var(--space-2) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-md);
}

.page-header__description {
    text-align: right;
}

.page-back,
.confirmation-page__back {
    margin-bottom: var(--space-4);
}

.back-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
}

.back-link:hover {
    color: var(--color-accent);
}

.stack {
    display: grid;
    gap: var(--space-5);
}

.stack--small {
    gap: var(--space-3);
}

.stack--large {
    gap: var(--space-8);
}

/* Cards --------------------------------------------------------------- */

.card,
.filter-card,
.data-card,
.auth-card,
.state-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.card {
    min-width: 0;
    overflow: hidden;
}

.card__header {
    min-height: 3.5rem;
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-subtle);
}

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

.card--table,
.data-card {
    margin-bottom: var(--space-5);
    overflow: hidden;
}

.data-card__header {
    min-height: 3.75rem;
    padding: var(--space-3) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-border);
}

.data-card__header p {
    margin: var(--space-1) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.grid-2,
.detail-grid,
.order-facts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--space-5);
}

.grid-2 > .card,
.detail-grid > .card,
.order-facts-grid > .card {
    height: 100%;
}

/* Feedback ------------------------------------------------------------ */

.flash-stack,
.order-alerts {
    display: grid;
    gap: var(--space-2);
}

.flash-stack:not(:empty) {
    margin-bottom: var(--space-3);
}

.order-alerts:not(:empty) {
    margin-bottom: var(--space-3);
}

.alert {
    --alert-accent: var(--color-info);
    --alert-bg: #f8fbff;

    min-width: 0;
    margin: 0;
    padding: var(--space-2) var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--alert-accent);
    border-radius: var(--radius-md);
    background: var(--alert-bg);
    color: var(--color-text);
    font-size: var(--text-xs);
    line-height: 1.4;
}

.alert::before {
    content: none;
}

.alert > :last-child {
    margin-bottom: 0;
}

.alert > form:last-child {
    margin-left: auto;
}

.alert ul {
    margin-block: 0;
    padding-left: var(--space-5);
}

.alert--success {
    --alert-accent: var(--color-success);
    --alert-bg: #f8fcfa;
}

.alert--warning {
    --alert-accent: #d39400;
    --alert-bg: #fffcf5;
}

.alert--error,
.alert--danger {
    --alert-accent: var(--color-danger);
    --alert-bg: #fffafa;
}

.alert--info {
    --alert-accent: var(--color-info);
    --alert-bg: #f8fbff;
}

.empty,
.empty-state {
    min-height: 15rem;
    padding: var(--space-12) var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    text-align: center;
}

.empty-state__icon {
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: var(--space-4);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-surface-subtle);
    color: var(--color-text-subtle);
    font-size: var(--text-xl);
}

.empty-state h2 {
    margin-bottom: var(--space-2);
    color: var(--color-text);
    font-size: var(--text-lg);
}

.empty-state p,
.empty p {
    max-width: 32rem;
    margin-bottom: var(--space-4);
}

/* Forms and controls -------------------------------------------------- */

label,
.refund-legend {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 600;
}

:where(
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    select,
    textarea
) {
    width: 100%;
    min-width: 0;
    min-height: var(--control-md);
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    outline: none;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    line-height: 1.35;
    box-shadow: var(--shadow-xs);
    transition: border-color 140ms ease, box-shadow 140ms ease,
        background-color 140ms ease;
}

:where(
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    select,
    textarea
):hover:not(:disabled) {
    border-color: #aeb7c5;
}

:where(
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    select,
    textarea
):focus-visible {
    border-color: var(--color-accent);
    outline: none;
    box-shadow: 0 0 0 3px var(--color-focus);
}

:where(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--color-danger);
}

:where(input, select, textarea):disabled {
    border-color: var(--color-border);
    background: var(--color-surface-subtle);
    color: var(--color-text-subtle);
    cursor: not-allowed;
}

textarea {
    min-height: 7rem;
    padding-block: var(--space-3);
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color: var(--color-text-subtle);
    opacity: 1;
}

input[type="checkbox"],
input[type="radio"] {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    margin: 0;
    accent-color: var(--color-accent);
}

.form-row {
    min-width: 0;
    margin-bottom: var(--space-4);
}

.form-row:last-child {
    margin-bottom: 0;
}

.form-hint,
.form-error {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
}

.form-hint {
    color: var(--color-text-muted);
}

.form-error {
    color: var(--color-danger);
    font-weight: 550;
}

.control--code {
    height: 3.25rem;
    text-align: center;
    font-size: var(--text-xl);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: 0.32em;
}

.role-toggle,
.refund-pick {
    min-width: 0;
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
}

.role-toggle {
    min-height: var(--control-md);
    align-items: center;
}

.refund-pick input {
    margin-top: 0.15rem;
}

/* Buttons ------------------------------------------------------------- */

.btn {
    min-height: var(--control-md);
    padding: 0 var(--space-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: var(--text-md);
    font-weight: 650;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease,
        color 140ms ease, box-shadow 140ms ease, transform 80ms ease;
}

.btn:hover {
    border-color: #aeb7c5;
    background: var(--color-surface-hover);
    color: var(--color-text);
}

.btn:active:not(:disabled) {
    transform: translateY(1px);
}

.btn--primary {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.18);
}

.btn--primary:hover {
    border-color: var(--color-accent-hover);
    background: var(--color-accent-hover);
    color: #ffffff;
}

.btn--secondary {
    border-color: var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text);
}

.btn--quiet {
    border-color: transparent;
    background: transparent;
    color: var(--color-text-muted);
    box-shadow: none;
}

.btn--quiet:hover {
    border-color: var(--color-border);
    background: var(--color-surface-subtle);
    color: var(--color-text);
}

.btn--pill-sm {
    min-height: 1.5rem;
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    box-shadow: none;
    color: var(--color-text);
    font-size: var(--text-xs);
    line-height: 1.25;
}

.btn--pill-sm:hover {
    border-color: var(--color-border-strong);
    background: var(--color-surface-subtle);
}

.btn--danger {
    border-color: var(--color-danger-border);
    background: var(--color-surface);
    color: var(--color-danger);
}

.btn--danger:hover {
    border-color: var(--color-danger);
    background: var(--color-danger-soft);
    color: var(--color-danger-hover);
}

.btn--small,
.btn--sm {
    min-height: var(--control-sm);
    padding-inline: var(--space-3);
    font-size: var(--text-sm);
}

.btn--block {
    width: 100%;
}

.btn:disabled,
.btn[aria-disabled="true"] {
    border-color: var(--color-border);
    background: var(--color-surface-subtle);
    color: var(--color-text-subtle);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.actions,
.button-group,
.filter__actions,
.filter-actions,
.row-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Filter bars --------------------------------------------------------- */

.filter-card {
    margin-bottom: var(--space-5);
    padding: var(--space-4);
}

form.filter-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--space-3);
}

.filter,
.filter-grid {
    min-width: 0;
    display: grid;
    align-items: end;
    gap: var(--space-3);
}

.filter--orders {
    grid-template-columns: minmax(12rem, 18rem) auto minmax(10rem, 1fr);
}

.filter-grid {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.filter-grid--products {
    grid-template-columns: minmax(8.5rem, 1fr) minmax(9rem, 1fr)
        minmax(13rem, 1.45fr) minmax(8rem, 0.8fr) minmax(8rem, 0.8fr)
        minmax(8.5rem, 0.9fr);
}

.filter-grid--users {
    grid-template-columns: minmax(10rem, 0.65fr) minmax(16rem, 1.35fr);
}

.filter__field,
.filter-field {
    min-width: 0;
}

.filter__field label,
.filter-field label {
    white-space: nowrap;
}

.filter-field--search {
    min-width: 0;
}

.filter__actions,
.filter-actions {
    min-height: var(--control-md);
    justify-content: flex-end;
}

.filter__status,
.filter-status {
    align-self: center;
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    white-space: nowrap;
}

.filter[aria-busy="true"],
.filter-card[aria-busy="true"] {
    cursor: progress;
}

:where(.filter, .filter-card) select {
    height: var(--control-md);
    padding-right: 2.25rem;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23667085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 1rem;
}

:where(.filter, .filter-card) :where(input[type="text"], input[type="search"]) {
    height: var(--control-md);
}

/* Submit controls remain in the HTML and are only hidden after crm.js marks
   the document as enhanced. A failed or blocked script keeps the plain form. */
.js [data-auto-submit] > .filter__submit,
.js [data-auto-submit] > button[type="submit"],
.js [data-auto-submit] .filter__actions > button[type="submit"],
.js [data-auto-submit] .filter-actions > button[type="submit"] {
    display: none;
}

/* Tables -------------------------------------------------------------- */

.table-wrap {
    /* Positioned on purpose: the visually-hidden caption/spans inside the
       table are absolute, and without a positioned ancestor they resolve
       against the viewport at the table's full 1100px width — the whole
       page then scrolls sideways on mobile (hub #134). */
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    border-spacing: 0;
    border-collapse: separate;
    font-size: var(--text-md);
}

th,
td {
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

th {
    background: var(--color-surface-subtle);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    white-space: nowrap;
}

tbody tr {
    transition: background-color 120ms ease;
}

tbody tr:hover {
    background: var(--color-surface-hover);
}

tbody tr:last-child td {
    border-bottom: 0;
}

.data-table td {
    vertical-align: middle;
}

.data-table--orders {
    min-width: 68.75rem;
}

.data-table--products {
    min-width: 78rem;
}

.data-table--users {
    min-width: 51rem;
}

.order-items .data-table {
    min-width: 47.5rem;
}

.order-items .data-table td,
.refund-lines td {
    vertical-align: top;
}

.refund-lines {
    min-width: 42.5rem;
}

td.num,
th.num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.data-table__actions {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

tr.is-attention,
.data-table__row--attention {
    background: var(--color-warning-soft);
}

tr.is-attention:hover,
.data-table__row--attention:hover {
    background: #fff2cf;
}

.cell-strong {
    font-weight: 650;
}

.cell-sub {
    display: block;
    margin-top: 0.125rem;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 450;
    line-height: 1.4;
}

.product-eans {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.order-number {
    color: var(--color-accent);
    text-decoration-thickness: 1px;
    text-decoration-color: transparent;
    white-space: nowrap;
}

.order-number:hover {
    text-decoration-color: currentColor;
}

.person-cell {
    width: 13rem;
    max-width: 13rem;
}

.person-cell .text-truncate {
    max-width: 12rem;
}

.product-cell {
    min-width: 17rem;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.product-cell__media {
    flex: 0 0 auto;
}

.product-cell__content {
    min-width: 0;
}

.thumb,
.thumb--empty {
    width: 2.5rem;
    height: 2.5rem;
    display: block;
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
}

.thumb {
    object-fit: cover;
}

.thumb--empty {
    position: relative;
    border: 1px dashed var(--color-border-strong);
}

.thumb--empty::after {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    content: "—";
}

.price-old {
    text-decoration: line-through;
}

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

.row-actions {
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.row-actions form,
.row-action {
    display: inline-flex;
}

.row-editor {
    min-width: 0;
}

.row-editor > summary,
.row-edit > summary {
    list-style: none;
}

.row-editor > summary::-webkit-details-marker,
.row-edit > summary::-webkit-details-marker {
    display: none;
}

.row-editor[open] > summary,
.row-edit[open] > summary {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
    color: var(--color-accent-hover);
}

.row-editor__panel {
    min-width: 31rem;
    margin-top: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    text-align: left;
    white-space: normal;
}

.row-editor__form,
.row-edit form {
    display: grid;
    grid-template-columns: repeat(3, minmax(8rem, 1fr));
    align-items: end;
    gap: var(--space-3);
}

.row-editor__form .form-row,
.row-edit form .form-row {
    margin-bottom: 0;
}

.row-editor__panel > .form-error {
    margin-bottom: 0;
}

/* "Товары": the collections form. A group of checkboxes is not a button — it
   takes its own line under the row's actions rather than stretching a cell
   sized to fit them (`.data-table__actions { width: 1% }`). */
.row-collections {
    margin-top: var(--space-2);
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.row-collections__box {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    font-weight: 450;
}

/* Badges -------------------------------------------------------------- */

.badge {
    --badge-bg: #f2f4f7;
    --badge-border: #e4e7ec;
    --badge-text: #475467;

    min-height: 1.5rem;
    padding: 0.125rem 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    border: 1px solid var(--badge-border);
    border-radius: var(--radius-pill);
    background: var(--badge-bg);
    color: var(--badge-text);
    font-size: var(--text-xs);
    font-weight: 650;
    line-height: 1.25;
    white-space: nowrap;
}

/* These aliases deliberately include the API values returned by the format
   helpers. Unknown values still fall back to the neutral base badge. */
.badge--pending_payment,
.badge--payment-unpaid,
.badge--payment-refund_pending,
.badge--flag,
.badge--warning {
    --badge-bg: var(--color-warning-soft);
    --badge-border: var(--color-warning-border);
    --badge-text: var(--color-warning);
}

.badge--paid,
.badge--delivered,
.badge--payment-paid,
.badge--active,
.badge--visible,
.badge--success {
    --badge-bg: var(--color-success-soft);
    --badge-border: var(--color-success-border);
    --badge-text: var(--color-success);
}

.badge--processing,
.badge--shipped,
.badge--operator,
.badge--info {
    --badge-bg: var(--color-info-soft);
    --badge-border: var(--color-info-border);
    --badge-text: var(--color-info);
}

/* Red catalogue warnings: a price above market or outside the pricing rule. */
.badge--danger {
    --badge-bg: var(--color-danger-soft);
    --badge-border: var(--color-danger-border);
    --badge-text: var(--color-danger);
}

.badge--refunded,
.badge--payment-refunded,
.badge--admin,
.badge--accent {
    --badge-bg: var(--color-accent-soft);
    --badge-border: #d9d6fe;
    --badge-text: var(--color-accent-hover);
}

.badge--cancelled,
.badge--customer,
.badge--inactive,
.badge--hidden,
.badge--self,
.badge--neutral {
    --badge-bg: #f2f4f7;
    --badge-border: #e4e7ec;
    --badge-text: #475467;
}

.self-tag {
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-pill);
    background: #f2f4f7;
    color: #475467;
    font-size: var(--text-xs);
    font-weight: 650;
}

/* Key/value data ------------------------------------------------------ */

.kv {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(7.5rem, 0.72fr) minmax(0, 1.28fr);
    gap: var(--space-3) var(--space-4);
}

.kv dt {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.kv dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.kv--totals {
    grid-template-columns: minmax(0, 1fr) auto;
}

.kv--totals dd {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.kv--totals .kv__total {
    margin-top: var(--space-1);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: var(--text-base);
    font-weight: 700;
}

.totals-note {
    margin: var(--space-3) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    text-align: right;
}

.money-axis {
    font-variant-numeric: tabular-nums;
}

/* Order workspace ---------------------------------------------------- */

/* Product card ------------------------------------------------------- */

.page--product {
    max-width: 78rem;
}

.product-hero {
    margin-bottom: var(--space-4);
    padding: var(--space-5);
    display: grid;
    grid-template-areas: "media content prices";
    grid-template-columns: 7rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.product-hero__media {
    width: 7rem;
    aspect-ratio: 1;
    display: grid;
    grid-area: media;
    place-items: center;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-surface-subtle);
}

.product-hero__photo {
    padding: 0;
    border: 0;
    background: transparent;
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.product-hero__photo:hover img {
    filter: brightness(0.96);
}

.product-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-hero__placeholder {
    color: var(--color-text-subtle);
    font-size: var(--text-sm);
}

.product-hero__content {
    min-width: 0;
    grid-area: content;
}

.product-hero__content h1 {
    margin-bottom: var(--space-2);
    overflow-wrap: anywhere;
}

.product-hero__badges,
.product-collection-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.product-hero__price {
    margin: var(--space-4) 0 var(--space-3);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-3);
    color: var(--color-text-muted);
}

.product-hero__price strong {
    color: var(--color-text);
    font-size: var(--text-xl);
}

.product-hero__prices {
    grid-area: prices;
    display: grid;
    gap: var(--space-4);
    max-width: 20rem;
    overflow-wrap: anywhere;
}
.product-hero__prices p {
    margin: 0;
}

.product-hero__price strong {
    font-size: var(--text-2xl);
}

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

.product-hero__ean {
    margin-block: var(--space-3);
    font-size: var(--text-md);
    overflow-wrap: anywhere;
}

.product-hero__badges {
    font-size: var(--text-sm);
}

.product-hero__collections {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
}

.product-hero__collections .product-collections {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.product-hero__collections fieldset {
    margin: 0;
}

.product-hero__collections legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.product-hero__collections .product-collections__fields {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
}

.product-hero__collections .product-collections__fields label {
    gap: var(--space-1);
    font-size: inherit;
}

.product-hero__collections .product-collections > .btn {
    width: auto;
    min-height: 1.75rem;
    padding-inline: var(--space-2);
}

.product-stock-counts {
    display: flex;
    gap: var(--space-6);
    margin: 0 0 var(--space-4);
}

.product-stock-counts dt {
    color: var(--color-text-muted);
}

.product-stock-counts dd {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 700;
}

.product-history {
    margin-top: var(--space-5);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-4);
}

.product-history__header {
    margin-bottom: var(--space-3);
}

.product-purchase-row + .product-purchase-row {
    margin-top: var(--space-4);
}

.product-purchase-row p {
    margin: 0 0 var(--space-2);
}

.product-market.kv {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2) var(--space-3);
}

.product-market.kv dd {
    margin: 0;
}

.product-section__grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}


.product-sections {
    display: grid;
    gap: var(--space-5);
}

.product-section .card__body {
    min-width: 0;
}

.product-section__grid {
    display: grid;
    align-items: start;
    gap: var(--space-6);
}

.product-section__grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.product-section__column {
    min-width: 0;
    overflow-wrap: anywhere;
}

.product-section__column h3 {
    margin-bottom: var(--space-3);
    font-size: var(--text-md);
}

.product-section__stack {
    display: grid;
    gap: var(--space-6);
}

.product-stock-summary {
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
}

.product-stock-summary p {
    margin: 0;
}

.product-stock-summary__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.product-locations-empty {
    margin: 0;
}

.location-table {
    table-layout: auto;
}

.location-table td {
    vertical-align: top;
}

.location-table__actions > .location-action {
    display: inline-block;
    margin: 0 var(--space-1) var(--space-2) 0;
}

.location-action > summary {
    list-style: none;
}

.location-action > summary::marker,
.location-action > summary::-webkit-details-marker {
    display: none;
    content: "";
}

.location-action[open] {
    width: 100%;
}

.location-action[open] > summary {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
    color: var(--color-accent-hover);
}

.location-action__form {
    margin-top: var(--space-2);
    padding: var(--space-3);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    align-items: end;
    gap: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
}

.location-action__form label {
    min-width: 0;
    margin: 0;
}

.product-price-form,
.product-ean-add,
.product-collections {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}

.product-price-form,
.product-ean-add {
    display: grid;
    gap: var(--space-3);
}

.product-price-form__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.product-price-form__fields .form-row,
.product-ean-add .form-row {
    margin: 0;
}

.product-price-form > .btn,
.product-ean-add > .btn,
.product-collections > .btn {
    justify-self: start;
}

.product-storefront-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.product-collections__fields {
    margin: 0 0 var(--space-3);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2) var(--space-3);
    border: 0;
}

.product-collections__fields legend {
    width: 100%;
    margin-bottom: var(--space-2);
    grid-column: 1 / -1;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 650;
}

.product-collections__fields label {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text);
    font-weight: 500;
}

.product-ean-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-ean-list li {
    padding-block: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.product-ean-list li:first-child {
    padding-top: 0;
}

.product-ean-list__code {
    min-width: 0;
    overflow-wrap: anywhere;
}

.journal-filters {
    margin-bottom: var(--space-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.journal-filter {
    min-height: var(--control-sm);
    padding-inline: var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    font: inherit;
    font-size: var(--text-sm);
}

.journal-filter:hover,
.journal-filter:focus-visible,
.journal-filter.is-active {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.journal {
    margin: 0;
    padding: 0;
    list-style: none;
}

.journal > li {
    min-width: 0;
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.journal > li:first-child {
    padding-top: 0;
}

.journal > li:last-child {
    border-bottom: 0;
}

.journal__line {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    overflow-wrap: anywhere;
}

.journal__line strong {
    font-variant-numeric: tabular-nums;
}

.journal__comment {
    margin: var(--space-1) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.journal__empty {
    margin: 0;
}

.journal__more {
    margin-top: var(--space-4);
}

.photo-dialog {
    max-width: calc(100vw - var(--space-4));
    max-height: 100vh;
    margin: auto;
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-md);
}

.photo-dialog img {
    display: block;
    max-width: min(90vw, 1000px);
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.photo-dialog [data-photo-close] {
    display: flex;
    margin: var(--space-2) 0 0 auto;
}

.stock-dialog {
    width: calc(100% - var(--space-8));
    max-width: 30rem;
    max-height: 90vh;
    margin: auto;
    padding: var(--space-6);
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-md);
}

.photo-dialog::backdrop,
.stock-dialog::backdrop {
    background: rgb(20 24 27 / 88%);
}

.stock-dialog__form {
    display: grid;
    gap: var(--space-4);
}

.stock-dialog__form h2,
.stock-dialog__form p,
.stock-dialog__form .form-row {
    margin-block: 0;
}

.stock-dialog__form textarea {
    min-height: 4rem;
}

.stock-dialog__location .form-hint {
    min-height: 1.25rem;
}

.stock-dialog input.is-invalid {
    border-color: var(--color-danger);
}

.stock-dialog__direction {
    margin: 0;
    padding: 0;
    border: 0;
}

.stock-dialog__direction legend {
    margin-bottom: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 600;
}

.stock-dialog__segment {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.stock-dialog__segment label {
    margin: 0;
}

.stock-dialog__segment span {
    min-height: var(--control-md);
    padding-inline: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    box-shadow: var(--shadow-xs);
}

.stock-dialog__segment input:focus-visible + span {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-focus);
}

.stock-dialog__segment input:checked + span {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-surface);
}

.stock-dialog__preview {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
    font-size: var(--text-lg);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.stock-dialog__preview.is-invalid {
    color: var(--color-danger);
}

.stock-dialog__shelf-preview {
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

.stock-dialog__meta {
    overflow-wrap: anywhere;
}

.stock-dialog__actions {
    margin-top: var(--space-1);
}

html:not(.js) .stock-dialog {
    position: static;
    width: 100%;
    max-width: none;
    margin: var(--space-5) 0 0;
    display: block;
}

.order-hero {
    margin-bottom: var(--space-5);
    padding: var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.order-hero__content {
    min-width: 0;
}

.order-hero__title {
    margin-bottom: var(--space-3);
}

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

.order-hero__meta {
    margin: var(--space-2) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.order-hero__total {
    flex: 0 0 auto;
    padding-left: var(--space-8);
    border-left: 1px solid var(--color-border);
    text-align: right;
}

.order-hero__total-label {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.order-hero__total-value {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-2xl);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.025em;
}

/* The rail is first in the DOM for narrow screens and keyboard reading order;
   grid areas move it to the right only when the desktop layout has room. */
.order-workspace {
    display: grid;
    grid-template-areas: "body rail";
    grid-template-columns: minmax(0, 1fr) minmax(18.5rem, 21rem);
    align-items: start;
    gap: var(--space-5);
}

.order-workspace__rail {
    position: sticky;
    top: calc(var(--topbar-height) + var(--space-5));
    grid-area: rail;
    min-width: 0;
    display: grid;
    gap: var(--space-5);
}

.order-workspace__body {
    grid-area: body;
    min-width: 0;
    display: grid;
    gap: var(--space-5);
}

.order-workspace__body > .card,
.order-workspace__rail > .card {
    margin: 0;
}

.workflow-card__section + .workflow-card__section {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}

.workflow-card__section > h3 {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    font-weight: 700;
}

.workflow-card__owner {
    grid-template-columns: 1fr;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
}

.workflow-card__owner dd {
    margin-bottom: var(--space-2);
}

.workflow-card__hint {
    margin-top: var(--space-2);
}

.workflow-card__actions {
    align-items: stretch;
    flex-direction: column;
}

.workflow-card__actions > *,
.workflow-card__actions form,
.workflow-card__actions .btn {
    width: 100%;
}

.inline-form,
.shipping-form {
    margin-top: var(--space-4);
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.shipping-form > div {
    min-width: 0;
    flex: 1 1 12rem;
}

.shipping-form .btn {
    flex: 0 0 auto;
}

.order-items .card__body {
    padding: 0;
}

.order-facts-grid {
    align-items: stretch;
}

.order-facts-grid .card {
    height: 100%;
}

.order-totals .card__body {
    display: flex;
    flex-direction: column;
}

.order-totals .totals-note {
    margin-top: var(--space-4);
}

.payment-card dd,
.customer-card dd,
.delivery-card dd {
    overflow-wrap: anywhere;
}

/* Refund controls stay inside the composition card: the line selection and
   its money axis must remain visually attached to the items they describe. */
.refund-money-axis {
    margin: var(--space-4) var(--space-5) 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
    color: var(--color-text-muted);
    text-align: left;
}

.refund-form,
.refund-panel {
    margin: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}

.refund-form > summary,
.refund-panel > summary {
    min-height: var(--control-md);
    width: fit-content;
    padding: 0 var(--space-4);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border: 1px solid var(--color-danger-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-danger);
    font-size: var(--text-md);
    font-weight: 650;
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.refund-form > summary::after,
.refund-panel > summary::after {
    color: currentColor;
    content: "+";
}

.refund-form[open] > summary::after,
.refund-panel[open] > summary::after {
    content: "−";
}

.refund-form > summary::-webkit-details-marker,
.refund-panel > summary::-webkit-details-marker {
    display: none;
}

.refund-form > summary:hover,
.refund-panel > summary:hover {
    border-color: var(--color-danger);
    background: var(--color-danger-soft);
}

.refund-form__body {
    margin-top: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-subtle);
}

.refund-form__section + .refund-form__section {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}

.refund-mode,
.refund-reason {
    display: grid;
    gap: var(--space-3);
}

.refund-form__body > .table-wrap {
    margin-block: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.refund-lines select {
    min-width: 5.5rem;
}

.refund-form__actions {
    margin-top: var(--space-5);
}

.refund-panel__note {
    margin: var(--space-4) var(--space-5) var(--space-5);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
}

.refund-summary {
    margin: 0;
    padding-left: var(--space-5);
}

.refund-summary li + li {
    margin-top: var(--space-2);
}

/* Timeline ------------------------------------------------------------ */

.timeline {
    margin: 0;
    padding: 0;
    list-style: none;
}

.order-timeline .card__body {
    padding-block: var(--space-2);
}

.timeline li {
    position: relative;
    min-height: 2.75rem;
    padding: var(--space-3) 0 var(--space-3) 1.75rem;
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.timeline li::before {
    position: absolute;
    top: 1.1rem;
    left: 0.25rem;
    width: 0.5rem;
    height: 0.5rem;
    border: 2px solid var(--color-surface);
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 1px #c7d7fe;
    content: "";
}

.timeline li:last-child {
    border-bottom: 0;
}

.timeline__when {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    white-space: nowrap;
}

.timeline__reason,
.timeline__actor {
    display: block;
    margin-top: 0.125rem;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

/* Confirmation pages ------------------------------------------------- */

.confirmation-page {
    width: 100%;
    max-width: 47.5rem;
    margin-inline: auto;
}

.confirmation-page__back {
    margin-bottom: var(--space-4);
}

.confirmation-card {
    margin-bottom: var(--space-4);
}

.confirmation-card__header {
    min-height: auto;
    padding: var(--space-5) var(--space-6);
    background: var(--color-surface);
}

.confirmation-card__title {
    font-size: var(--text-xl);
}

.confirmation-card__body {
    padding: var(--space-6);
}

.confirmation-card__actions {
    justify-content: flex-start;
}

.status-change,
.refund-review__details {
    grid-template-columns: minmax(8.5rem, 0.65fr) minmax(0, 1.35fr);
    gap: var(--space-4);
}

.refund-review__warning {
    margin-top: var(--space-5);
}

.refund-review__form .confirmation-card__body {
    padding-block: var(--space-4);
}

/* Login and standalone states --------------------------------------- */

.auth-body {
    background: var(--color-bg);
}

.login-shell,
.state-shell {
    width: calc(100% - var(--page-gutter) - var(--page-gutter));
    margin-inline: auto;
    padding-block: var(--space-10);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-shell {
    max-width: 26rem;
}

.auth-brand {
    margin: 0 auto var(--space-5);
}

.auth-brand > span:last-child {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.auth-brand__name {
    font-size: var(--text-sm);
    font-weight: 750;
    letter-spacing: 0.1em;
}

.auth-brand__product {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: 0.08em;
}

.auth-card {
    overflow: hidden;
    border-radius: var(--radius-xl);
}

.auth-card__header {
    padding: var(--space-6) var(--space-6) var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.auth-card__header > .locale-switch {
    float: right;
    margin-left: var(--space-3);
}

.auth-card__header h1 {
    font-size: var(--text-xl);
}

.auth-card__header > p:last-child {
    margin: var(--space-2) 0 0;
    color: var(--color-text-muted);
}

.auth-card__step {
    margin-bottom: var(--space-2);
    color: var(--color-accent);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.auth-card__body {
    padding: var(--space-6);
}

.auth-card__body .form-hint {
    margin: 0 0 var(--space-5);
}

.auth-card__footer {
    padding: 0 var(--space-6) var(--space-6);
}

.auth-security-note {
    margin: var(--space-4) 0 0;
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    text-align: center;
}

.state-shell {
    max-width: 32rem;
}

.state-shell--wide {
    max-width: 40rem;
}

.state-card {
    position: relative;
    overflow: hidden;
    padding: var(--space-8);
    text-align: center;
    border-radius: var(--radius-xl);
}

.state-card__code {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    padding: 0.15rem 0.45rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface-subtle);
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
}

.state-card__icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto var(--space-5);
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: var(--text-lg);
    font-weight: 750;
}

.state-card__icon--warning {
    border: 1px solid var(--color-warning-border);
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.state-card__icon--error {
    border: 1px solid var(--color-danger-border);
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.state-card h1 {
    font-size: var(--text-xl);
}

.state-card > p {
    max-width: 32rem;
    margin: var(--space-3) auto 0;
    color: var(--color-text-muted);
}

.state-card__message {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-danger-soft);
    color: var(--color-danger) !important;
}

.state-card__detail {
    font-size: var(--text-sm);
}

.state-card__actions {
    margin-top: var(--space-6);
    display: flex;
    justify-content: center;
    gap: var(--space-2);
}

/* Pagination ---------------------------------------------------------- */

.pager {
    min-height: var(--control-md);
    margin-top: var(--space-5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Подвал списка товаров: он живёт ВНУТРИ карточки таблицы, поэтому берёт её
   отступы и верхнюю границу вместо внешнего `margin-top` центрированного
   пейджера выше. */
.pager--footer {
    margin-top: 0;
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-border);
    justify-content: space-between;
    gap: var(--space-3) var(--space-4);
}

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

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

.pager__size select {
    width: auto;
    min-height: var(--control-sm);
    padding-block: 0;
    font-size: var(--text-sm);
}

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

.pager__pages li {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.pager__gap {
    padding-inline: var(--space-1);
    color: var(--color-text-subtle);
}

/* Номера страниц узкие и одинаковые по ширине, иначе «9» и «10» дёргают ряд. */
.pager__pages .btn {
    min-width: var(--control-sm);
    padding-inline: var(--space-2);
}

/* Стрелки без адресата ведут себя как выключённые кнопки, но остаются на
   месте: исчезающий на первой странице `«` сдвигал бы весь ряд номеров. */
.pager__pages [aria-disabled="true"] {
    pointer-events: none;
}

/* Узкий экран: подвал складывается в столбец, номера уезжают под сводку. */
@media (max-width: 47.5rem) {
    .pager--footer {
        justify-content: flex-start;
    }

    .pager--footer .pager__pages {
        width: 100%;
        justify-content: center;
    }
}

/* Tablet landscape: keep data dense but allow deliberate two-row filters. */
@media (max-width: 73.75rem) {
    .filter-grid--products {
        grid-template-columns: repeat(3, minmax(10rem, 1fr));
    }

    form.filter-card {
        grid-template-columns: 1fr;
    }

    .filter-actions {
        justify-content: flex-start;
    }

    .order-workspace {
        grid-template-columns: minmax(0, 1fr) minmax(17.5rem, 19.5rem);
    }

    .person-cell {
        width: 11rem;
        max-width: 11rem;
    }

    .person-cell .text-truncate {
        max-width: 10rem;
    }
}

@media (max-width: 64rem) {
    .product-section__grid--3,
    .product-section__grid--2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Tablet: navigation wraps, filters become two-column, and the workflow rail
   returns to its DOM-first position above the order body. */
@media (max-width: 56.25rem) {
    :root {
        --page-gutter: 1.25rem;
        --topbar-height: 5.25rem;
    }

    /* INVARIANT (hub #134, acceptance 17.08): the collapsed topbar is EXACTLY
       two rows — "brand | account" above, full-width nav tabs below. Every
       child is pinned to a named area, so a new block or DOM reorder can never
       push the account onto a third row again (that was the original bug:
       auto-flow dropped it under the tabs). Add new topbar children to these
       areas explicitly or extend the template — never rely on auto-placement. */
    .topbar__inner {
        min-height: var(--topbar-height);
        padding-top: var(--space-1);
        display: grid;
        grid-template-areas:
            "brand account"
            "nav nav";
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--space-2) var(--space-3);
    }

    .brand {
        min-width: 0;
        min-height: 2.5rem;
        grid-area: brand;
    }

    .topbar__account {
        min-height: 2.5rem;
        grid-area: account;
    }

    .topbar__nav {
        min-width: 0;
        width: 100%;
        grid-area: nav;
        overflow-x: auto;
        border-top: 1px solid var(--color-border);
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .topbar__nav a {
        min-height: 2.5rem;
        font-size: var(--text-sm);
    }

    .page {
        padding-block: var(--space-6) var(--space-10);
    }

    .page-header,
    .page__head {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-2);
    }

    .page-header__description {
        text-align: left;
    }

    .filter--orders,
    .filter-grid,
    .filter-grid--products,
    .filter-grid--users {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter__actions,
    .filter-actions,
    .filter__status,
    .filter-status {
        justify-content: flex-start;
    }

    .filter--orders .filter__status {
        grid-column: 1 / -1;
    }

    .order-hero {
        padding: var(--space-5);
    }

    .order-workspace {
        grid-template-areas:
            "rail"
            "body";
        grid-template-columns: minmax(0, 1fr);
    }

    .order-workspace__rail {
        position: static;
    }

    .workflow-card__actions {
        flex-direction: row;
    }

    .workflow-card__actions > *,
    .workflow-card__actions form,
    .workflow-card__actions .btn {
        width: auto;
    }

    .order-facts-grid,
    .grid-2,
    .detail-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .row-editor__panel {
        min-width: 25rem;
    }
}

/* Phones are not the primary console target, but the same server-rendered
   controls remain fully usable without a separate mobile interface. */
@media (max-width: 40rem) {
    :root {
        --page-gutter: 1rem;
        --topbar-height: 5rem;
    }

    .product-hero {
        padding: var(--space-4);
        grid-template-areas: "media" "content" "prices";
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
    }
    .product-hero__media { width: 5.5rem; }
    .product-hero__content h1 { font-size: var(--text-lg); }
    .product-section__grid--3 { grid-template-columns: minmax(0, 1fr); }
    .product-section .card__header { align-items: center; gap: var(--space-2); }

    .product-price-form__fields,
    .product-collections__fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .product-price-form > .btn,
    .product-ean-add > .btn,
    .product-collections > .btn {
        width: 100%;
        justify-self: stretch;
    }

    .location-table,
    .location-table tbody,
    .location-table tr,
    .location-table td {
        width: 100%;
        display: block;
    }

    .location-table thead {
        display: none;
    }

    .location-table tr {
        padding: var(--space-3) var(--space-4);
        border-bottom: 1px solid var(--color-border);
    }

    .location-table tr:last-child {
        border-bottom: 0;
    }

    .location-table td,
    .location-table td:last-child {
        width: 100%;
        padding: var(--space-2) 0;
        display: grid;
        grid-template-columns: minmax(6rem, 0.42fr) minmax(0, 1fr);
        gap: var(--space-3);
        border: 0;
        overflow-wrap: anywhere;
    }

    .location-table td::before {
        color: var(--color-text-muted);
        content: attr(data-label);
        font-size: var(--text-xs);
        font-weight: 700;
        letter-spacing: 0.045em;
        text-transform: uppercase;
    }

    .location-table__actions {
        display: block !important;
    }

    .location-table__actions:empty,
    .location-table__actions--empty {
        display: none !important;
    }

    .location-table__actions::before {
        display: block;
        margin-bottom: var(--space-2);
    }

    .location-table__actions > .location-action {
        width: 100%;
        margin: 0 0 var(--space-2);
    }

    .location-action > summary {
        width: 100%;
    }

    .location-action__form {
        grid-template-columns: minmax(0, 1fr);
    }

    .stock-dialog {
        width: calc(100% - var(--space-4));
        max-width: none;
        max-height: 90vh;
        padding: var(--space-5);
    }

    .topbar__inner {
        width: calc(100% - var(--page-gutter) - var(--page-gutter));
    }

    .brand,
    .topbar__account {
        min-height: 2.25rem;
    }

    .brand {
        gap: var(--space-2);
    }

    .brand__mark {
        width: 1.75rem;
        height: 1.75rem;
        flex-basis: 1.75rem;
        font-size: var(--text-sm);
    }

    .brand__product,
    .topbar__role,
    .user-avatar {
        display: none;
    }

    .brand__name {
        font-size: var(--text-xs);
    }

    .topbar__identity {
        max-width: 8rem;
    }

    .topbar__account {
        gap: var(--space-1);
    }

    .topbar__account .btn {
        padding-inline: var(--space-2);
        font-size: var(--text-xs);
    }

    .topbar__account .btn,
    .locale-switch__option {
        min-height: 2rem;
    }

    .locale-switch__option {
        min-width: 1.75rem;
        padding-inline: 0.375rem;
    }

    .topbar__nav a {
        min-height: 2.25rem;
        padding-inline: var(--space-2);
        font-size: var(--text-xs);
    }

    .app-footer {
        flex-wrap: wrap;
        padding-bottom: var(--space-5);
    }

    .page {
        padding-block: var(--space-5) var(--space-8);
    }

    .page-header,
    .page__head {
        margin-bottom: var(--space-5);
    }

    .filter-card {
        padding: var(--space-3);
    }

    form.filter-card,
    .filter,
    .filter-grid {
        gap: var(--space-2);
    }

    :where(.filter, .filter-card) :where(input[type="text"], input[type="search"], select) {
        font-size: var(--text-base);
    }

    .filter--orders,
    .filter-grid,
    .filter-grid--products,
    .filter-grid--users {
        grid-template-columns: minmax(0, 1fr);
    }

    .filter--orders .filter__status {
        grid-column: auto;
    }

    .filter__actions,
    .filter-actions {
        width: 100%;
    }

    .filter__actions .btn,
    .filter-actions .btn {
        flex: 1 1 auto;
    }

    .btn--small,
    .btn--sm {
        min-height: 2.25rem;
    }

    .card__header,
    .card__body,
    .confirmation-card__header,
    .confirmation-card__body {
        padding-inline: var(--space-4);
    }

    .order-hero {
        padding: var(--space-5);
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-5);
    }

    .order-hero__total {
        width: 100%;
        padding: var(--space-4) 0 0;
        border-top: 1px solid var(--color-border);
        border-left: 0;
        text-align: left;
    }

    .order-hero__total-value {
        font-size: var(--text-xl);
    }

    .alert {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .alert > form:last-child {
        width: 100%;
        margin-left: 0;
    }

    .alert > form:last-child .btn {
        width: 100%;
    }

    .workflow-card__actions,
    .confirmation-card__actions,
    .refund-form__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .workflow-card__actions > *,
    .workflow-card__actions form,
    .workflow-card__actions .btn,
    .confirmation-card__actions .btn,
    .refund-form__actions .btn {
        width: 100%;
    }

    .inline-form,
    .shipping-form {
        align-items: stretch;
        flex-direction: column;
    }

    .shipping-form .btn {
        width: 100%;
    }

    .kv,
    .status-change,
    .refund-review__details {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-1);
    }

    .kv dd {
        margin-bottom: var(--space-3);
    }

    .kv--totals {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--space-3);
    }

    .kv--totals dd {
        margin-bottom: 0;
    }

    .timeline li {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-1);
    }

    .row-editor__panel {
        min-width: 18rem;
    }

    .row-editor__form,
    .row-edit form {
        grid-template-columns: minmax(0, 1fr);
    }

    .refund-money-axis,
    .refund-form,
    .refund-panel,
    .refund-panel__note {
        margin-right: var(--space-4);
        margin-left: var(--space-4);
    }

    .refund-form__body {
        padding: var(--space-3);
    }

    .login-shell,
    .state-shell {
        padding-block: var(--space-6);
    }

    .auth-card__header,
    .auth-card__body,
    .state-card {
        padding: var(--space-5);
    }

    .auth-card__footer {
        padding: 0 var(--space-5) var(--space-5);
    }

    .state-card__actions .btn {
        width: 100%;
    }
}

@media (max-width: 30rem) {
    .topbar__identity {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    .topbar,
    .app-footer,
    .page-back,
    .no-print,
    .inbound-progress,
    .inbound-stage,
    .inbound-actions,
    .inbound-dialog,
    .inbound-blocker,
    .inbound-alarm,
    [data-line-revert],
    [data-void-button],
    [data-over-issue] {
        display: none !important;
    }

    body,
    .card,
    .card__header {
        background: #fff;
        box-shadow: none;
    }

    .page--inbound {
        max-width: none;
    }

    .table-wrap {
        overflow: visible;
    }
}