:root {
    color-scheme: light;
    --color-background: #f2f2f2;
    --color-surface: #ffffff;
    --color-text: #111111;
    --color-muted: #626262;
    --color-border: #d8d8d8;
    --color-accent: #202020;
    --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --radius-medium: 1rem;
    --shadow-card: 0 1.5rem 4rem rgb(0 0 0 / 8%);
    --content-width: 72rem;
    --sidebar-width: 17.5rem;
    --topbar-height: 4.75rem;
}

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

html {
    min-width: 20rem;
    font-family: var(--font-sans);
    line-height: 1.5;
    background: var(--color-background);
    color: var(--color-text);
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
}

button,
input,
select,
textarea {
    margin: 0;
    font: inherit;
    color: inherit;
}

button,
input,
select,
textarea {
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background: var(--color-surface);
}

button {
    min-height: 2.75rem;
    padding: 0.625rem 1rem;
    cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
    outline: 3px solid rgb(32 32 32 / 24%);
    outline-offset: 2px;
}

.site-shell {
    display: grid;
    width: min(100% - 2rem, var(--content-width));
    min-height: 100vh;
    margin-inline: auto;
    place-items: center;
    padding-block: 3rem;
}

.status-card {
    width: min(100%, 42rem);
    padding: clamp(2rem, 6vw, 4.5rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    text-align: center;
}

.brand-mark {
    display: grid;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 2rem;
    border-radius: 50%;
    background: var(--color-accent);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    place-items: center;
}

.eyebrow {
    margin: 0 0 0.75rem;
    color: var(--color-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

h1 {
    margin: 0;
    font-size: clamp(2.25rem, 9vw, 4.5rem);
    line-height: 1;
    letter-spacing: -0.055em;
}

.status-message {
    max-width: 28rem;
    margin: 1.5rem auto 0;
    color: var(--color-muted);
    font-size: clamp(1rem, 2vw, 1.125rem);
}

.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: 2rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text);
    font-size: 0.8125rem;
    font-weight: 650;
}

.status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-accent);
}

@media (max-width: 35rem) {
    .site-shell {
        width: min(100% - 1rem, var(--content-width));
        padding-block: 0.5rem;
    }

    .status-card {
        padding: 2.25rem 1.25rem;
        border-radius: 0.75rem;
        box-shadow: none;
    }

    .status-indicator {
        align-items: flex-start;
        border-radius: 0.75rem;
        text-align: left;
    }

    .status-dot {
        flex: 0 0 auto;
        margin-top: 0.35rem;
    }
}

.payment-order-summary {
    margin-bottom: 1rem;
}

.payment-workspace [hidden] {
    display: none !important;
}

.payment-financial-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: #f7f7f7;
}

.payment-financial-summary > div,
.payment-change {
    display: grid;
    gap: 0.25rem;
}

.payment-financial-summary span,
.payment-change span {
    color: var(--color-muted);
    font-size: 0.8125rem;
}

.payment-financial-summary strong,
.payment-change strong {
    font-size: 1.05rem;
}

.payment-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    align-items: end;
}

.payment-notes {
    grid-column: span 2;
}

.payment-change {
    min-height: 3rem;
    padding: 0.5rem 0;
    align-content: center;
}

.payment-list {
    display: grid;
    gap: 0.75rem;
}

.payment-record {
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
}

.payment-record--voided {
    background: #f5f5f5;
}

.payment-record-main,
.payment-record-amount {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.payment-record-main > div:first-child,
.payment-record-amount,
.payment-void-detail {
    display: grid;
    gap: 0.25rem;
}

.payment-record-main span,
.payment-void-detail span {
    color: var(--color-muted);
    font-size: 0.8125rem;
}

.payment-record-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin: 0.875rem 0 0;
}

.payment-record-details > div {
    display: grid;
    gap: 0.125rem;
}

.payment-record-details dt {
    color: var(--color-muted);
    font-size: 0.75rem;
}

.payment-record-details dd {
    margin: 0;
}

.payment-void-detail,
.payment-void-form {
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--color-border);
}

.payment-void-detail p {
    margin: 0;
}

.payment-void-form summary {
    width: fit-content;
    cursor: pointer;
    font-weight: 700;
}

.payment-void-form form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 0.75rem;
    margin-top: 0.75rem;
    align-items: end;
}

.order-payment-card {
    display: grid;
    gap: 1rem;
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: #f7f7f7;
}

.order-payment-card__header,
.order-payment-card__actions,
.order-payment-method {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
}

.order-payment-card__header h2,
.order-payment-card__methods h3 {
    margin: 0;
    font-size: 1rem;
}

.order-payment-card__header .section-kicker {
    margin-bottom: 0.15rem;
}

.order-payment-card__totals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
}

.order-payment-card__totals > div {
    display: grid;
    gap: 0.125rem;
    padding: 0.75rem;
    border: 1px solid #dedede;
    border-radius: 0.55rem;
    background: #ffffff;
}

.order-payment-card__totals dt {
    color: var(--color-muted);
    font-size: 0.75rem;
}

.order-payment-card__totals dd {
    margin: 0;
    font-weight: 700;
}

.order-payment-card__methods {
    display: grid;
    gap: 0.6rem;
}

.order-payment-card__methods > p,
.order-payment-card__notice {
    margin: 0;
}

.order-payment-method-list {
    display: grid;
    gap: 0.4rem;
}

.order-payment-method {
    padding-top: 0.4rem;
    border-top: 1px solid #dedede;
}

.order-payment-method span {
    display: grid;
    gap: 0.05rem;
}

.order-payment-method small {
    color: var(--color-muted);
}

.order-payment-card__actions {
    justify-content: flex-start;
    flex-wrap: wrap;
}

.order-payment-card--compact {
    order: 2;
    margin: 0;
}

.order-payment-cancellation-warning {
    margin-bottom: 1rem;
    padding: 0.875rem 1rem;
    border-left: 3px solid var(--color-accent);
    background: #f3f3f3;
}

.order-payment-cancellation-warning p {
    margin: 0.25rem 0;
}

.order-form-global-error {
    margin: 0 0 1rem;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
}

@media (max-width: 54rem) {
    .payment-financial-summary,
    .payment-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 40rem) {
    .payment-financial-summary,
    .payment-form-grid,
    .payment-void-form form {
        grid-template-columns: 1fr;
    }

    .payment-notes {
        grid-column: auto;
    }

    .payment-record-main {
        align-items: flex-start;
        flex-direction: column;
    }

    .payment-record-amount {
        width: 100%;
        grid-template-columns: 1fr auto;
        justify-items: end;
    }

    .order-payment-card__header,
    .order-payment-card__actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .order-payment-card__totals {
        grid-template-columns: 1fr;
    }

    .order-payment-card__actions .button {
        width: 100%;
    }
}

.order-workspace {
    gap: 0.85rem;
    width: 100%;
}

.order-workspace [hidden] {
    display: none !important;
}

.order-workspace-header {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.order-workspace-header h1 {
    font-size: clamp(1.8rem, 3vw, 2.65rem);
    letter-spacing: -0.035em;
    line-height: 1.05;
    margin: 0;
}

.order-workspace-header .page-description {
    margin-top: 0.4rem;
}

.order-draft-badge,
.order-default-badge,
.order-inline-badge {
    align-items: center;
    border: 1px solid #cfcfcf;
    border-radius: 999px;
    color: #484848;
    display: inline-flex;
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    line-height: 1;
    padding: 0.35rem 0.55rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.order-draft-badge {
    background: #111111;
    border-color: #111111;
    color: #ffffff;
    padding: 0.48rem 0.7rem;
}

.order-workspace-form {
    display: grid;
    gap: 0.85rem;
}

.order-context-bar {
    align-items: start;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    display: grid;
    gap: 0.85rem;
    grid-template-columns: minmax(16rem, 1.55fr) minmax(10rem, 0.85fr) minmax(12rem, 1fr);
    padding: 0.85rem 1rem;
}

.order-workspace .field-group {
    gap: 0.35rem;
    min-width: 0;
}

.order-workspace .field-group label,
.order-price-readout span {
    color: #555555;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.02em;
}

.order-workspace .field-group input:not([type="hidden"]),
.order-workspace .field-group select,
.order-workspace .field-group textarea {
    min-height: 2.65rem;
    padding: 0.58rem 0.7rem;
    width: 100%;
}

.order-workspace .field-group textarea {
    line-height: 1.45;
    resize: vertical;
}

.order-workspace-grid {
    align-items: start;
    display: grid;
    gap: 0.85rem;
    grid-template-columns: minmax(0, 1fr) minmax(21.25rem, 25rem);
}

.order-workspace-main,
.order-sidebar {
    display: grid;
    gap: 0.85rem;
    min-width: 0;
}

.order-sidebar {
    align-self: start;
    position: sticky;
    top: calc(var(--topbar-height) + 1rem);
}

.order-summary-panel { order: 1; }
.order-sidebar-actions { order: 3; }
.order-packaging-panel { order: 4; }

.order-panel,
.order-summary-panel,
.order-packaging-panel,
.order-sidebar-actions {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
}

.order-panel,
.order-summary-panel,
.order-packaging-panel {
    padding: 0.9rem;
}

.order-panel-heading {
    align-items: center;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding-bottom: 0.65rem;
}

.order-panel-heading h2,
.order-summary-panel h2 {
    font-size: 0.95rem;
    margin: 0;
}

.order-panel-heading p {
    color: var(--color-text-muted);
    font-size: 0.74rem;
    line-height: 1.4;
    margin: 0.18rem 0 0;
}

.order-panel-heading--compact {
    align-items: flex-start;
}

.order-customer-picker {
    position: relative;
}

.order-customer-picker-heading {
    align-items: center;
    display: flex;
    gap: 0.65rem;
    justify-content: space-between;
}

.order-customer-autofill-notice {
    align-items: center;
    background: #f5f5f5;
    border: 1px solid #d7d7d7;
    border-radius: 0.55rem;
    color: #3d3d3d;
    display: flex;
    font-size: 0.73rem;
    gap: 0.6rem;
    justify-content: space-between;
    line-height: 1.4;
    padding: 0.55rem 0.65rem;
}

.order-customer-autofill-notice .button {
    flex: 0 0 auto;
}

.order-customer-meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.45rem;
    min-height: 1rem;
}

.order-customer-meta > span:first-child {
    font-size: 0.75rem;
    font-weight: 750;
}

.order-customer-meta small {
    color: var(--color-text-muted);
    flex-basis: 100%;
    font-size: 0.7rem;
}

.order-search-results {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 0.55rem;
    box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.12);
    left: 0;
    max-height: 16rem;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: calc(100% + 0.25rem);
    z-index: 20;
}

.order-search-result {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    cursor: pointer;
    display: block;
    padding: 0.7rem 0.8rem;
    text-align: left;
    width: 100%;
}

.order-search-result:hover,
.order-search-result:focus-visible {
    background: #f3f3f3;
}

.order-lines,
.order-detail-lines {
    display: grid;
    gap: 0.6rem;
}

.order-line,
.order-detail-line {
    border: 1px solid var(--color-border);
    border-radius: 0.65rem;
    padding: 0.72rem;
}

.order-line-grid {
    align-items: end;
    display: grid;
    gap: 0.55rem;
    grid-template-columns: minmax(14rem, 1fr) 5.5rem minmax(6rem, 0.55fr) minmax(6rem, 0.55fr) auto;
}

.order-line-quantity input {
    max-width: 6.5rem;
}

.order-price-readout {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
    padding: 0 0.15rem 0.45rem;
}

.order-detail-line-head span {
    color: var(--color-text-muted);
    font-size: 0.76rem;
}

.order-price-readout strong {
    font-size: 0.9rem;
    line-height: 1.15;
}

.order-line-actions {
    padding-bottom: 0.1rem;
}

.button--compact-danger {
    background: #ffffff;
    border-color: #d1d1d1;
    color: #4a4a4a;
    min-height: 2.3rem;
    padding: 0.45rem 0.65rem;
}

.button--compact-danger:hover {
    background: #f3f3f3;
    border-color: #8a8a8a;
    color: #111111;
}

.order-combo-config,
.order-addons {
    border-left: 2px solid #d7d7d7;
    margin: 0.6rem 0 0 0.55rem;
    padding-left: 0.75rem;
}

.order-combo-config:not([hidden]),
.order-addons:not(:empty) {
    background: #fafafa;
    border-radius: 0 0.5rem 0.5rem 0;
    padding-bottom: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.15rem;
}

.order-combo-group {
    align-items: center;
    display: grid;
    gap: 0.3rem 0.7rem;
    grid-template-columns: minmax(7rem, 0.35fr) minmax(12rem, 1fr);
    margin-top: 0.5rem;
    min-width: 0;
}

.order-combo-group > strong {
    font-size: 0.78rem;
}

.order-combo-group select {
    max-width: 30rem;
    min-height: 2.45rem;
    padding: 0.5rem 0.65rem;
    width: 100%;
}

.order-combo-fixed-items {
    display: grid;
    gap: 0.25rem;
}

.order-combo-fixed-item {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.8rem;
}

.order-combo-fixed-item .order-inline-badge {
    font-size: 0.6rem;
    padding: 0.25rem 0.4rem;
}

.order-nested-heading {
    align-items: center;
    display: flex;
    gap: 0.45rem;
    margin: 0.35rem 0;
}

.order-nested-heading strong {
    font-size: 0.78rem;
}

.order-stored-components p,
.order-detail-components p,
.order-detail-addons p {
    align-items: baseline;
    display: grid;
    font-size: 0.79rem;
    gap: 0.15rem 0.6rem;
    grid-template-columns: minmax(7rem, 0.35fr) minmax(0, 1fr);
    margin: 0.28rem 0;
}

.order-addon {
    align-items: end;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: minmax(11rem, 1.45fr) minmax(9rem, 1.15fr) 5.5rem minmax(5.5rem, 0.5fr) auto;
    margin-top: 0.45rem;
}

.order-add-addon {
    margin: 0.55rem 0 0 0.55rem;
}

.order-delivery-grid {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.order-delivery-address,
.order-delivery-reference,
.order-delivery-notes {
    grid-column: 1 / -1;
}

.order-notes-panel textarea {
    min-height: 4.25rem !important;
}

.order-summary-panel h2 {
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 0.75rem;
    padding-bottom: 0.65rem;
}

.order-total-summary {
    display: grid;
    gap: 0.65rem;
}

.order-total-summary > div {
    align-items: baseline;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.order-total-summary span {
    color: #555555;
    font-size: 0.82rem;
}

.order-total-summary strong {
    font-size: 0.95rem;
}

.order-total-summary__total {
    border-top: 1px solid #cfcfcf;
    margin-top: 0.1rem;
    padding-top: 0.75rem;
}

.order-total-summary__total span {
    color: #111111;
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
}

.order-total-summary__total strong {
    font-size: 1.35rem;
    letter-spacing: -0.025em;
}

.order-packaging-lines {
    display: grid;
    gap: 0.55rem;
}

.order-packaging-line {
    background: #fafafa;
    border: 1px solid #e2e2e2;
    border-radius: 0.55rem;
    display: grid;
    gap: 0.5rem;
    padding: 0.6rem;
}

.order-packaging-quantity {
    align-items: center;
    display: flex;
    gap: 0.45rem;
}

.order-packaging-quantity input {
    flex: 0 1 6rem;
    max-width: 6rem;
}

.order-packaging-quantity span {
    color: #454545;
    font-size: 0.82rem;
    font-weight: 750;
}

.order-packaging-actions {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
}

.order-sidebar-actions {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    padding: 0.75rem;
}

.order-sidebar-actions .button {
    width: 100%;
}

.order-summary-head {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.order-detail-grid {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.order-detail-grid dt {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.order-detail-grid dd {
    margin: 0.2rem 0 0;
}

.order-detail-line-head {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
}

.order-detail-line-head > div {
    display: grid;
    gap: 0.15rem;
}

.table-actions {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.order-trace-heading {
    align-items: flex-start;
}

.order-trace-heading .field-hint {
    margin-bottom: 0;
}

.order-timeline {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.order-timeline-event {
    position: relative;
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr);
    gap: 0.8rem;
    padding-bottom: 1.15rem;
}

.order-timeline-event:last-child {
    padding-bottom: 0;
}

.order-timeline-event:not(:last-child)::before {
    position: absolute;
    top: 0.8rem;
    bottom: 0;
    left: 0.34rem;
    width: 1px;
    background: var(--color-border);
    content: "";
}

.order-timeline-marker {
    position: relative;
    z-index: 1;
    width: 0.75rem;
    height: 0.75rem;
    margin-top: 0.25rem;
    border: 2px solid #111111;
    border-radius: 50%;
    background: #ffffff;
}

.order-timeline-content {
    min-width: 0;
    padding-bottom: 0.1rem;
}

.order-timeline-event-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.order-timeline-event-head time,
.order-timeline-user {
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.order-timeline-user,
.order-timeline-note,
.order-timeline-detail {
    margin: 0.25rem 0 0;
}

.order-timeline-note,
.order-timeline-detail {
    line-height: 1.45;
}

.order-inventory-movements-table .quantity-cell {
    white-space: nowrap;
}

@media (max-width: 75rem) {
    .order-workspace-grid {
        grid-template-columns: minmax(0, 1fr) minmax(19rem, 21rem);
    }

    .order-line-grid {
        grid-template-columns: minmax(12rem, 1fr) 5.25rem minmax(6rem, 0.65fr) minmax(6rem, 0.65fr);
    }

    .order-line-actions {
        grid-column: 4;
        justify-self: end;
    }

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

@media (max-width: 62rem) {
    .order-context-bar {
        grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr));
    }

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

    .order-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        position: static;
    }

    .order-sidebar-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 52rem) {
    .order-context-bar {
        grid-template-columns: minmax(0, 1fr);
    }

    .order-workspace-grid {
        display: flex;
        flex-direction: column;
    }

    .order-workspace-main,
    .order-sidebar {
        display: contents;
    }

    .order-delivery-panel { order: 1; }
    .order-products-panel { order: 2; }
    .order-packaging-panel { order: 3; }
    .order-notes-panel { order: 4; }
    .order-summary-panel { order: 5; }
    .order-payment-card--compact { order: 6; }
    .order-sidebar-actions { order: 7; }
}

@media (max-width: 45rem) {
    .order-delivery-grid,
    .order-addon,
    .order-summary-head,
    .order-detail-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .order-delivery-address,
    .order-delivery-reference,
    .order-delivery-notes {
        grid-column: auto;
    }

    .order-line-grid {
        grid-template-columns: minmax(0, 1fr) minmax(5rem, 0.35fr) minmax(6rem, 0.45fr);
    }

    .order-line-product {
        grid-column: 1 / -1;
    }

    .order-line-actions {
        grid-column: 3;
        justify-self: end;
    }

    .order-addon {
        align-items: stretch;
    }

    .order-combo-group,
    .order-stored-components p {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 34rem) {
    .order-workspace-header,
    .order-panel-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .order-draft-badge {
        align-self: flex-start;
    }

    .order-panel-heading .button {
        width: 100%;
    }

    .order-line-grid,
    .order-addon,
    .order-sidebar-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .order-line-product,
    .order-line-actions {
        grid-column: auto;
    }

    .order-line-actions,
    .order-line-actions .button,
    .order-addon > .button {
        justify-self: stretch;
        width: 100%;
    }

    .order-line-quantity input {
        max-width: none;
    }
}

/* Inventory catalog */

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

.module-page {
    display: grid;
    gap: 1.25rem;
}

.module-page-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.module-page-header h1 {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1;
    letter-spacing: -0.045em;
}

.page-description {
    max-width: 58rem;
    margin: 0.75rem 0 0;
    color: var(--color-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.module-page-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.625rem;
}

.button {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 750;
    line-height: 1.2;
    text-decoration: none;
}

.button--primary {
    border-color: #111111;
    background: #111111;
    color: #ffffff;
}

.button--primary:hover {
    background: #2a2a2a;
}

.button--secondary {
    background: #ffffff;
    color: #111111;
}

.button--secondary:hover,
.button--text:hover {
    border-color: #909090;
    background: #f1f1f1;
}

.button--text {
    border-color: transparent;
    background: transparent;
    color: #303030;
}

.catalog-filters {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 13rem) auto;
    align-items: end;
    gap: 0.875rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: #ffffff;
}

.inventory-item-filters {
    grid-template-columns: minmax(12rem, 1fr) minmax(9rem, 12rem) minmax(11rem, 14rem) auto;
}

.movement-filters {
    display: grid;
    grid-template-columns: minmax(12rem, 1.4fr) minmax(11rem, 1fr) repeat(2, minmax(9rem, 0.75fr));
    align-items: end;
    gap: 0.875rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: #ffffff;
}

.product-filters {
    display: grid;
    grid-template-columns: minmax(13rem, 1.35fr) minmax(9rem, 0.7fr) minmax(10rem, 0.75fr) minmax(11rem, 0.9fr) auto;
    align-items: end;
    gap: 0.875rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: #ffffff;
}

.movement-filters select,
.movement-filters input[type="date"] {
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 0.875rem;
}

.movement-filter-actions {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 0.5rem;
}

.report-page {
    gap: 1.25rem;
}

.report-page-header {
    align-items: flex-end;
}

.report-period {
    display: grid;
    min-width: min(100%, 19rem);
    gap: 0.25rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: #ffffff;
}

.report-period span,
.report-metric span,
.report-metric small,
.report-section-heading > p {
    color: var(--color-muted);
}

.report-period span,
.report-metric span {
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.report-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.875rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: #ffffff;
}

.report-preset-fieldset {
    min-width: 0;
    flex: 1 1 42rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.report-preset-fieldset legend {
    margin-bottom: 0.625rem;
    font-size: 0.875rem;
    font-weight: 700;
}

.report-preset-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.report-preset-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.report-preset-label {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #ffffff;
    color: #303030;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 700;
}

.report-preset-input:focus-visible + .report-preset-label {
    outline: 3px solid rgb(32 32 32 / 18%);
    outline-offset: 2px;
}

.report-preset-input:checked + .report-preset-label {
    border-color: #111111;
    background: #111111;
    color: #ffffff;
}

.report-custom-range {
    display: none;
    flex: 1 1 100%;
    grid-template-columns: repeat(2, minmax(10rem, 14rem));
    gap: 0.75rem;
    padding-top: 0.5rem;
}

#report-preset-custom:checked ~ .report-custom-range {
    display: grid;
}

#product-report-preset-custom:checked ~ .report-product-custom-range {
    display: grid;
}

.report-custom-range input[type="date"] {
    min-height: 2.75rem;
}

.report-filter-actions {
    display: flex;
    align-items: center;
}

.report-subnav {
    overflow-x: auto;
    border-bottom: 1px solid var(--color-border);
    scrollbar-width: thin;
}

.report-subnav-list {
    display: flex;
    min-width: max-content;
    gap: 1.25rem;
}

.report-subnav-link {
    position: relative;
    padding: 0.75rem 0.125rem;
    color: var(--color-muted);
    font-size: 0.875rem;
    font-weight: 750;
    text-decoration: none;
}

.report-subnav-link::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: transparent;
    content: '';
}

.report-subnav-link:hover,
.report-subnav-link:focus-visible,
.report-subnav-link.is-active {
    color: #111111;
}

.report-subnav-link.is-active::after {
    background: #111111;
}

.report-section {
    display: grid;
    gap: 0.875rem;
}

.report-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.report-section-heading h2,
.report-section-heading p {
    margin: 0;
}

.report-section-heading h2 {
    font-size: 1.125rem;
}

.report-section-heading > p {
    font-size: 0.8125rem;
}

.report-primary-metric-grid,
.report-secondary-metric-grid {
    display: grid;
    gap: 0.75rem;
}

.report-primary-metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.report-secondary-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.report-metric {
    display: grid;
    min-width: 0;
    gap: 0.375rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: #ffffff;
}

.report-metric strong {
    overflow-wrap: anywhere;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.report-metric small {
    font-size: 0.75rem;
    line-height: 1.35;
}

.report-metric--muted {
    background: #f6f6f6;
}

.report-metric--primary {
    gap: 0.5rem;
    padding: 1.125rem;
    border-color: #c9c9c9;
}

.report-metric--primary > strong {
    font-size: clamp(1.4rem, 2.4vw, 2rem);
}

.report-comparison {
    display: grid;
    gap: 0.2rem;
    margin: 0.25rem 0 0;
    padding-top: 0.625rem;
    border-top: 1px solid var(--color-border);
    color: #404040;
    font-size: 0.75rem;
    line-height: 1.35;
}

.report-comparison strong {
    color: #171717;
    font-size: 0.8125rem;
}

.report-comparison span {
    color: var(--color-muted);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
}

.report-comparison--down strong {
    text-decoration: underline;
    text-decoration-color: #8a8a8a;
    text-underline-offset: 0.2em;
}

.report-comparison--unavailable {
    color: var(--color-muted);
}

.report-chart-card {
    padding: clamp(0.75rem, 2vw, 1.25rem);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: #ffffff;
}

.report-chart-card[hidden] {
    display: none;
}

.report-chart-container {
    position: relative;
    width: 100%;
    height: clamp(18rem, 42vw, 27rem);
}

.report-chart-container canvas {
    max-width: 100%;
}

.report-trend-table-wrap {
    max-height: 27rem;
}

.report-product-filters {
    align-items: end;
}

.report-product-type-filter {
    flex: 0 1 13rem;
}

.report-product-type-filter select {
    width: 100%;
    min-height: 2.75rem;
}

.report-product-type-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.report-type-summary-card {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: #ffffff;
}

.report-type-summary-card header {
    display: grid;
    gap: 0.35rem;
}

.report-type-summary-card header > strong {
    overflow-wrap: anywhere;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-variant-numeric: tabular-nums;
}

.report-type-summary-card header > small,
.report-type-summary-card dt {
    color: var(--color-muted);
}

.report-type-summary-card dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}

.report-type-summary-card dl div {
    display: grid;
    gap: 0.2rem;
}

.report-type-summary-card dt,
.report-type-summary-card dd {
    margin: 0;
    font-size: 0.75rem;
}

.report-type-summary-card dd {
    overflow-wrap: anywhere;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.report-type-badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border: 1px solid #bdbdbd;
    border-radius: 999px;
    background: #f6f6f6;
    color: #242424;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.report-type-badge--combo {
    border-color: #777777;
    background: #ececec;
}

.report-type-badge--addon {
    border-style: dashed;
}

.report-product-chart-container {
    position: relative;
    width: 100%;
    height: clamp(24rem, 70vw, 34rem);
}

.report-product-chart-container canvas {
    max-width: 100%;
}

.report-product-ranking-table {
    min-width: 52rem;
}

.report-product-detail-table {
    min-width: 78rem;
}

.report-table {
    min-width: 42rem;
}

.report-empty {
    min-height: 7rem;
}

.report-history-filters {
    align-items: end;
}

.report-history-mode-fieldset {
    min-width: 12rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.report-history-mode-fieldset legend,
.report-history-year-field > label,
.report-history-month-field > label {
    margin-bottom: 0.625rem;
    font-size: 0.875rem;
    font-weight: 700;
}

.report-history-mode-list {
    display: flex;
    gap: 0.5rem;
}

.report-history-mode-list label {
    position: relative;
}

.report-history-mode-list input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}

.report-history-mode-list span {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    padding: 0.625rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #ffffff;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 750;
}

.report-history-mode-list input:focus-visible + span {
    outline: 3px solid rgb(32 32 32 / 18%);
    outline-offset: 2px;
}

.report-history-mode-list input:checked + span {
    border-color: #111111;
    background: #111111;
    color: #ffffff;
}

.report-history-year-field,
.report-history-month-field {
    flex: 0 1 11rem;
}

.report-history-year-field input,
.report-history-month-field select {
    width: 100%;
    min-height: 2.75rem;
}

.report-history-month-field label span {
    color: var(--color-muted);
    font-size: 0.7rem;
    font-weight: 500;
}

.report-history-period-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.625rem;
}

.report-history-highlight-grid,
.report-history-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.report-history-highlight-card {
    display: grid;
    gap: 0.375rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: #ffffff;
}

.report-history-highlight-card > span,
.report-history-highlight-card > small {
    color: var(--color-muted);
}

.report-history-highlight-card > span {
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.report-history-highlight-card > strong {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
}

.report-history-highlight-card > p,
.report-history-chart-grid h3 {
    margin: 0;
}

.report-history-highlight-card > p {
    font-size: 1.125rem;
    font-weight: 750;
}

.report-history-chart-grid h3 {
    padding-bottom: 0.75rem;
    font-size: 0.9375rem;
}

.report-history-main-chart-container {
    height: clamp(18rem, 42vw, 27rem);
}

.report-history-compact-chart-container {
    position: relative;
    width: 100%;
    height: clamp(15rem, 30vw, 20rem);
}

.report-history-table-wrap {
    max-height: 34rem;
}

.report-history-table {
    min-width: 78rem;
}

@media (max-width: 72rem) {
    .report-primary-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-secondary-metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

@media (max-width: 48rem) {
    .report-page-header,
    .report-section-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .report-period {
        width: 100%;
    }

    .report-primary-metric-grid,
    .report-secondary-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-product-type-filter {
        flex: 1 1 100%;
    }

    .report-history-chart-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 35rem) {
    .report-custom-range,
    .report-primary-metric-grid,
    .report-secondary-metric-grid,
    .report-product-type-grid {
        grid-template-columns: 1fr;
    }


    .report-history-highlight-grid {
        grid-template-columns: 1fr;
    }

    .report-history-mode-fieldset,
    .report-history-year-field,
    .report-history-month-field {
        flex: 1 1 100%;
    }

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

    .report-product-chart-container {
        height: 30rem;
    }
}

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

@media print {
    .report-print-page .admin-sidebar,
    .report-print-page .admin-topbar,
    .report-print-page .sidebar-overlay,
    .report-print-page .report-filters,
    .report-print-page .report-history-period-nav {
        display: none !important;
    }

    .report-print-page,
    .report-print-page .admin-shell,
    .report-print-page .admin-workspace,
    .report-print-page .admin-main {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
    }

    .report-print-page .report-page {
        display: block;
    }

    .report-print-page .report-page > * + * {
        margin-top: 1rem;
    }

    .report-print-page .report-primary-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-print-page .report-secondary-metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .report-print-page .report-subnav {
        display: none !important;
    }

    .report-print-page .report-product-type-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .report-print-page .report-history-highlight-grid,
    .report-print-page .report-history-chart-grid {
        grid-template-columns: 1fr;
    }

    .report-print-page .report-section,
    .report-print-page .report-metric,
    .report-print-page .report-chart-card,
    .report-print-page .catalog-table-wrap {
        break-inside: avoid;
    }

    .report-print-page .report-chart-container {
        height: 20rem;
    }

    .report-print-page .report-product-chart-container {
        height: 28rem;
    }

    .report-print-page .report-history-main-chart-container,
    .report-print-page .report-history-compact-chart-container {
        height: 18rem;
    }

    .report-print-page .report-trend-table-wrap {
        max-height: none;
        overflow: visible;
    }

    .report-print-page .report-history-table-wrap {
        max-height: none;
        overflow: visible;
    }

    .report-print-page .catalog-table {
        min-width: 0;
    }
}

.field-group select,
.field-group input[type="search"] {
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 0.875rem;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.field-group select:hover,
.field-group input[type="search"]:hover {
    border-color: #9a9a9a;
}

.field-group select:focus,
.field-group input[type="search"]:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgb(32 32 32 / 10%);
    outline: none;
}

.catalog-filter-actions,
.form-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.catalog-empty {
    display: flex;
    min-height: 10rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: #ffffff;
}

.catalog-empty p {
    margin: 0;
    color: var(--color-muted);
}

.catalog-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: #ffffff;
}

.catalog-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.catalog-table th,
.catalog-table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #e3e3e3;
    text-align: left;
    vertical-align: middle;
}

.catalog-table th {
    background: #f7f7f7;
    color: #595959;
    font-size: 0.6875rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
}

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

.catalog-table tbody tr:hover {
    background: #fafafa;
}

.quantity-cell {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.movement-table {
    min-width: 70rem;
}

.movement-date {
    white-space: nowrap;
}

.movement-delta {
    font-weight: 750;
}

.table-secondary-text {
    display: block;
    margin-top: 0.2rem;
    color: var(--color-muted);
    font-size: 0.75rem;
}

.movement-reference {
    max-width: 16rem;
    overflow-wrap: anywhere;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.pagination p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.875rem;
}

.pagination-actions {
    display: flex;
    gap: 0.5rem;
}

.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #333333;
    font-size: 0.75rem;
    font-weight: 750;
    white-space: nowrap;
}

.status-chip::before {
    width: 0.45rem;
    height: 0.45rem;
    border: 1px solid currentColor;
    border-radius: 50%;
    content: "";
}

.status-chip.is-active::before {
    background: #222222;
}

.status-chip.is-inactive {
    color: #777777;
}

.catalog-row-action {
    text-align: right !important;
}

.catalog-row-action a {
    color: #111111;
    font-weight: 750;
    text-underline-offset: 0.2em;
}

.catalog-row-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
}

.inventory-item-form {
    display: grid;
    gap: 1rem;
}

.form-section {
    padding: clamp(1rem, 3vw, 1.5rem);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: #ffffff;
}

.form-section-heading {
    margin-bottom: 1.25rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid #e5e5e5;
}

.form-section-heading h2 {
    margin: 0;
    font-size: 1rem;
}

[data-order-details-form] {
    display: grid;
    gap: 1rem;
}

.form-subsection {
    border: 1px solid var(--color-border);
    border-radius: 0.65rem;
    margin: 0;
    padding: 1rem;
}

.form-subsection > legend {
    font-size: 0.85rem;
    font-weight: 750;
    padding: 0 0.35rem;
}

.form-subsection > .field-group {
    margin-top: 1rem;
}

.form-grid {
    display: grid;
    gap: 1rem;
}

.form-grid--two,
.form-grid--three {
    grid-template-columns: minmax(0, 1fr);
}

.inventory-item-form .field-group input:not([type="checkbox"]):not([type="hidden"]),
.inventory-item-form .field-group select,
.inventory-item-form .field-group textarea {
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 0.875rem;
}

.inventory-entry-form textarea,
.inventory-adjustment-form textarea,
.inventory-waste-form textarea,
.product-form textarea {
    min-height: 7rem;
    resize: vertical;
}

.product-table {
    min-width: 72rem;
}

.product-direct-item {
    margin-top: 1rem;
}

.product-direct-item[hidden] {
    display: none;
}

.product-inventory-handling {
    margin: 0;
    padding: 0;
    border: 0;
}

.product-inventory-handling legend {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
}

.product-inventory-handling__options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
}

.product-inventory-handling__option {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.product-pricing-section {
    display: grid;
    gap: 1.25rem;
}

.product-pricing-section .form-section-heading {
    margin-bottom: 0;
}

.product-pricing-section .form-section-heading p,
.product-channel-prices__heading p {
    margin: 0.35rem 0 0;
}

.product-general-price {
    max-width: 22rem;
}

.product-channel-prices,
.product-channel-prices__list {
    display: grid;
    gap: 0.75rem;
}

.product-channel-prices__heading h3 {
    margin: 0;
    font-size: 0.9rem;
}

.product-channel-price {
    display: grid;
    grid-template-columns: minmax(10rem, 0.8fr) minmax(16rem, 1.2fr);
    gap: 0.75rem 1rem;
    align-items: center;
    padding: 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: 0.65rem;
    background: #fafafa;
}

.product-channel-price__identity,
.product-channel-price__control {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.product-channel-price__identity label {
    font-weight: 700;
}

.product-channel-price__control input {
    min-width: 0;
    flex: 1;
}

.product-channel-price > .field-error {
    grid-column: 2;
    margin: 0;
}

@media (max-width: 40rem) {
    .product-channel-price {
        grid-template-columns: 1fr;
    }

    .product-channel-price__identity,
    .product-channel-price__control {
        align-items: stretch;
        flex-direction: column;
    }

    .product-channel-price > .field-error {
        grid-column: 1;
    }
}

.order-cancellation-form {
    display: grid;
    gap: 1.25rem;
}

.recipe-product-summary.order-cancellation-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.order-cancellation-choice {
    margin: 0;
    padding: 0;
    border: 0;
}

.order-cancellation-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.order-cancellation-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.65rem;
    background: #ffffff;
    cursor: pointer;
}

.order-cancellation-option input[type="radio"] {
    width: 1.125rem;
    min-height: auto;
    margin: 0.15rem 0 0;
    padding: 0;
    accent-color: #111111;
}

.order-cancellation-option span,
.order-cancellation-option small {
    display: block;
}

.order-cancellation-option small {
    margin-top: 0.25rem;
    color: var(--color-muted);
    line-height: 1.45;
}

.order-cancellation-option--readonly {
    cursor: default;
}

.order-cancellation-global-error {
    margin: 0;
}

.inventory-item-form .product-inventory-handling__option input[type="radio"] {
    width: 1.125rem;
    min-height: auto;
    margin: 0;
    padding: 0;
    accent-color: #111111;
}

.product-checkboxes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.recipe-product-summary {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(10rem, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: #ffffff;
}

.recipe-product-summary div {
    min-width: 0;
}

.recipe-product-summary dt {
    margin-bottom: 0.3rem;
    color: var(--color-muted);
    font-size: 0.6875rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.recipe-product-summary dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.recipe-form {
    margin-top: 1rem;
}

.recipe-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.recipe-lines {
    display: grid;
    gap: 0.75rem;
}

.recipe-line {
    min-width: 0;
    margin: 0;
    padding: 1rem;
    border: 1px solid #dddddd;
    border-radius: 0.625rem;
    background: #fafafa;
}

.recipe-line legend {
    padding-inline: 0.25rem;
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.recipe-line-grid {
    display: grid;
    grid-template-columns: minmax(15rem, 1.5fr) minmax(8rem, 0.55fr) minmax(12rem, 1fr) auto;
    align-items: start;
    gap: 0.875rem;
}

[data-recipe-unit-field][hidden],
.recipe-yield-info[hidden],
.recipe-basis-warning[hidden] {
    display: none;
}

.recipe-yield-info {
    display: grid;
    align-content: start;
    gap: 0.25rem;
    min-height: 3rem;
    padding: 0.625rem 0.75rem;
    border-left: 2px solid #303030;
    color: var(--color-muted);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.recipe-yield-info strong {
    color: var(--color-text);
    font-size: 0.8125rem;
}

.recipe-basis-warning {
    margin: 0.75rem 0 0;
    padding: 0.625rem 0.75rem;
    border: 1px solid #c8c8c8;
    border-radius: 0.5rem;
    background: #f3f3f3;
    color: #333333;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.recipe-line-action {
    align-self: end;
    min-height: 3rem;
    display: flex;
    align-items: center;
}

.recipe-empty {
    margin: 0;
    padding: 1rem;
    border: 1px dashed #c8c8c8;
    border-radius: 0.625rem;
    color: var(--color-muted);
    text-align: center;
}

.recipe-global-error {
    margin-bottom: 0.75rem;
}

.recipe-readonly-wrap {
    margin-top: 1rem;
}

.recipe-readonly-table {
    min-width: 42rem;
}

.combo-form,
.combo-readonly-groups {
    margin-top: 1rem;
}

.combo-section-heading,
.combo-group-heading,
.combo-group-actions {
    display: flex;
    align-items: center;
}

.combo-section-heading,
.combo-group-heading {
    justify-content: space-between;
    gap: 1rem;
}

.combo-section-heading h2,
.combo-section-heading p,
.combo-group-heading h2,
.combo-group-heading h3,
.combo-group-heading p {
    margin: 0;
}

.combo-group-heading p {
    margin-top: 0.2rem;
    color: var(--color-muted);
    font-size: 0.8125rem;
}

.combo-groups,
.combo-readonly-groups {
    display: grid;
    gap: 1rem;
}

.combo-group,
.combo-readonly-group {
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: #fafafa;
}

.combo-group-fields {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 1fr) minmax(11rem, 0.7fr);
    gap: 0.875rem;
    margin-top: 0.875rem;
}

.combo-type-help {
    margin: 0.625rem 0 0;
}

.combo-group-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.25rem;
}

.combo-options {
    display: grid;
    gap: 0.625rem;
    margin-top: 0.875rem;
}

.combo-option {
    display: grid;
    grid-template-columns: minmax(14rem, 1.5fr) minmax(7rem, 0.5fr) minmax(11rem, 0.75fr) auto;
    align-items: start;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid #dddddd;
    border-radius: 0.625rem;
    background: #ffffff;
}

[data-combo-price-field][hidden] {
    display: none;
}

.combo-option-action {
    align-self: end;
    display: flex;
    min-height: 3rem;
    align-items: center;
}

.combo-add-option {
    margin-top: 0.75rem;
}

.combo-options-error,
.combo-global-error {
    margin-top: 0.75rem;
}

.combo-readonly-group .catalog-table-wrap {
    margin-top: 0.75rem;
}

.combo-options-table {
    min-width: 34rem;
}

.packaging-profile-form,
.product-packaging-form,
.product-packaging-current {
    margin-top: 1rem;
}

.packaging-composition-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.packaging-lines {
    display: grid;
    gap: 0.75rem;
}

.packaging-line {
    min-width: 0;
    margin: 0;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 0.625rem;
    background: #fafafa;
}

.packaging-line legend {
    padding: 0 0.35rem;
    color: var(--color-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.packaging-line-grid {
    display: grid;
    grid-template-columns: minmax(15rem, 1.6fr) minmax(8rem, 0.55fr) minmax(10rem, 0.7fr) auto;
    align-items: start;
    gap: 0.75rem;
}

.packaging-unit-readout {
    display: grid;
    gap: 0.35rem;
    min-height: 4.75rem;
    align-content: start;
}

.packaging-unit-readout > span {
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: 700;
}

.packaging-unit-readout > strong {
    min-height: 2.75rem;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background: #f1f1f1;
    color: var(--color-muted);
    font-size: 0.875rem;
    font-weight: 600;
}

.packaging-line-action {
    align-self: end;
    display: flex;
    min-height: 3rem;
    align-items: center;
}

.packaging-global-error {
    margin-top: 0.75rem;
}

.product-packaging-current > p {
    margin: 0;
}

.customer-row-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.customer-duplicate-warning,
.customer-system-note,
.customer-status-action {
    margin-bottom: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: #ffffff;
}

.customer-duplicate-warning h2,
.customer-duplicate-warning p,
.customer-status-action h2,
.customer-status-action p {
    margin: 0;
}

.customer-duplicate-warning h2,
.customer-status-action h2 {
    font-size: 1rem;
}

.customer-duplicate-warning > p,
.customer-status-action p,
.customer-system-note span {
    margin-top: 0.35rem;
    color: var(--color-muted);
    font-size: 0.875rem;
}

.customer-duplicate-list {
    display: grid;
    gap: 0.5rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.customer-duplicate-list li,
.customer-status-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.customer-duplicate-list li {
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}

.customer-duplicate-list li > div,
.customer-system-note {
    display: grid;
    gap: 0.25rem;
}

.customer-duplicate-list li span {
    color: var(--color-muted);
    font-size: 0.875rem;
}

.customer-detail-summary {
    margin-bottom: 1rem;
}

.customer-status-action {
    margin-bottom: 0;
}

.customer-inline-dialog {
    background: #ffffff;
    border: 1px solid #cfcfcf;
    border-radius: 0.9rem;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.22);
    color: var(--color-text);
    margin: auto;
    max-height: calc(100vh - 2rem);
    max-width: min(46rem, calc(100vw - 2rem));
    padding: 0;
    width: 100%;
}

.customer-inline-dialog::backdrop {
    background: rgba(0, 0, 0, 0.48);
}

.customer-inline-form {
    display: grid;
    gap: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 1.1rem;
}

.customer-inline-dialog-header {
    align-items: flex-start;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding-bottom: 0.85rem;
}

.customer-inline-dialog-header h2,
.customer-inline-dialog-header p,
.customer-inline-duplicates h3,
.customer-inline-duplicates p {
    margin: 0;
}

.customer-inline-dialog-header h2 {
    font-size: 1.25rem;
}

.customer-inline-dialog-close {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: #333333;
    cursor: pointer;
    display: inline-flex;
    font-size: 1.5rem;
    height: 2.25rem;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 2.25rem;
}

.customer-inline-dialog-close:hover,
.customer-inline-dialog-close:focus-visible {
    background: #eeeeee;
}

.customer-inline-duplicates {
    background: #f7f7f7;
    border: 1px solid #d5d5d5;
    border-radius: 0.7rem;
    display: grid;
    gap: 0.75rem;
    padding: 0.85rem;
}

.customer-inline-duplicates h3 {
    font-size: 0.95rem;
}

.customer-inline-duplicates p,
.customer-inline-duplicate-list span {
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.customer-inline-duplicate-list {
    display: grid;
    gap: 0.55rem;
}

.customer-inline-duplicate-list article {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 0.55rem;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0.7rem;
}

.customer-inline-duplicate-list article > div {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.customer-inline-duplicate-list .status-chip {
    justify-self: start;
}

.customer-inline-status {
    margin: 0;
}

.customer-inline-actions {
    border-top: 1px solid var(--color-border);
    margin-top: 0;
    padding-top: 0.85rem;
}

@media (max-width: 72rem) {
    .product-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-filters .catalog-filter-actions {
        grid-column: 1 / -1;
    }

    .recipe-product-summary {
        grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.6fr);
    }

    .recipe-product-name {
        grid-column: 1 / -1;
    }

    .recipe-line-grid {
        grid-template-columns: minmax(0, 1.5fr) minmax(8rem, 0.55fr) minmax(0, 1fr);
    }

    .recipe-line-action {
        grid-column: 1 / -1;
        justify-self: end;
    }

    .combo-option {
        grid-template-columns: minmax(0, 1.5fr) minmax(7rem, 0.5fr) minmax(0, 0.8fr);
    }

    .combo-option-action {
        grid-column: 1 / -1;
        justify-self: end;
    }

    .packaging-line-grid {
        grid-template-columns: minmax(0, 1.5fr) minmax(8rem, 0.6fr) minmax(0, 0.8fr);
    }

    .packaging-line-action {
        grid-column: 1 / -1;
        justify-self: end;
    }
}

@media (max-width: 48rem) {
    .packaging-composition-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .packaging-composition-heading .button {
        width: 100%;
    }

    .packaging-line-grid {
        grid-template-columns: 1fr;
    }

    .packaging-line-action {
        grid-column: auto;
        justify-self: stretch;
    }

    .packaging-line-action .button {
        width: 100%;
    }

    .customer-duplicate-list li,
    .customer-status-action {
        align-items: stretch;
        flex-direction: column;
    }

    .customer-duplicate-list .button,
    .customer-status-action form,
    .customer-status-action .button {
        width: 100%;
    }

    .customer-inline-dialog {
        max-height: calc(100vh - 1rem);
        max-width: calc(100vw - 1rem);
    }

    .customer-inline-form {
        max-height: calc(100vh - 1rem);
    }

    .customer-inline-duplicate-list article,
    .order-customer-autofill-notice {
        align-items: stretch;
        flex-direction: column;
    }

    .customer-inline-duplicate-list .button,
    .order-customer-autofill-notice .button {
        width: 100%;
    }
}

.stock-readout {
    display: grid;
    gap: 0.25rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.625rem;
    background: #f7f7f7;
}

.stock-readout > span {
    color: var(--color-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.stock-readout > strong {
    font-size: 1.125rem;
    font-variant-numeric: tabular-nums;
}

.stock-readout p {
    margin: 0.5rem 0 0;
    color: var(--color-muted);
    font-size: 0.875rem;
}

.stock-readout p.is-negative {
    color: #7a1d1d;
    font-weight: 700;
}

.inventory-item-form select:disabled {
    cursor: not-allowed;
    background: #eeeeee;
    color: #666666;
}

.optional-label {
    color: var(--color-muted);
    font-size: 0.75rem;
    font-weight: 500;
}

.checkbox-field {
    grid-template-columns: auto 1fr;
    align-content: center;
    align-items: center;
    gap: 0.625rem;
    min-height: 3rem;
    padding-top: 1.625rem;
}

.checkbox-field input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
    min-height: auto;
    accent-color: #111111;
}

.checkbox-field label {
    cursor: pointer;
}

.user-role-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.user-role-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: 0.625rem;
    cursor: pointer;
}

.user-role-option input {
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.125rem;
    accent-color: #111111;
}

.user-role-option span {
    display: grid;
    gap: 0.2rem;
}

.user-role-option small {
    color: var(--color-muted);
    font-size: 0.8125rem;
}

.user-password-section {
    margin-top: 1rem;
}

.field-error,
.field-hint {
    margin: 0;
    font-size: 0.8125rem;
}

.field-error {
    color: #4b1212;
    font-weight: 650;
}

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

.has-error input,
.has-error select {
    border-color: #6f2525;
}

.form-error-summary {
    padding: 0.875rem 1rem;
    border: 1px solid #6f2525;
    border-left-width: 4px;
    border-radius: 0.625rem;
    background: #f5eeee;
    color: #371111;
    font-size: 0.875rem;
    font-weight: 650;
}

.yield-section[hidden] {
    display: none;
}

.form-actions {
    justify-content: flex-end;
    padding-top: 0.25rem;
}

.count-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.count-rows {
    display: grid;
    gap: 0.625rem;
}

.count-row {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background: #ffffff;
}

.count-row + .count-row {
    margin-top: 0;
}

.count-row legend {
    padding: 0 0.375rem;
    color: var(--color-muted);
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.count-row legend.visually-hidden {
    padding: 0;
}

.count-row-grid {
    display: grid;
    grid-template-columns: minmax(18rem, 2fr) minmax(7.5rem, 0.65fr) minmax(8rem, 0.65fr) minmax(10rem, 0.8fr) auto;
    gap: 0.625rem;
    align-items: end;
}

.count-row .field-group {
    gap: 0.35rem;
}

.count-row .field-group input,
.count-row .field-group select {
    min-height: 2.625rem;
    padding-block: 0.55rem;
}

.count-theoretical {
    display: grid;
    gap: 0.375rem;
    align-content: center;
    min-height: 2.625rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background: #ffffff;
}

.count-theoretical span,
.count-summary dt {
    color: var(--color-muted);
    font-size: 0.6875rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.count-theoretical strong {
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.count-row-action {
    padding-bottom: 0;
}

.count-global-error {
    margin-bottom: 1rem;
}

.count-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: var(--color-border);
}

.count-summary > div {
    display: grid;
    gap: 0.375rem;
    padding: 1rem 1.25rem;
    background: #ffffff;
}

.count-summary dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.count-summary-note {
    grid-column: 1 / -1;
}

.count-detail-table-wrap {
    margin-top: 1rem;
}

.count-detail-table {
    min-width: 70rem;
}

@media (max-width: 70rem) {
    .count-row-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .count-row-action {
        grid-column: 1 / -1;
        justify-self: end;
    }
}

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

    .count-row-action {
        grid-column: auto;
        justify-self: stretch;
    }

    .count-row-action .button {
        width: 100%;
    }
}

@media (min-width: 44rem) {
    .form-grid--two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .user-role-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 55rem) {
    .catalog-filters,
    .inventory-item-filters {
        grid-template-columns: minmax(0, 1fr) minmax(9rem, 0.45fr);
    }

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

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

    .recipe-readonly-table {
        min-width: 0;
    }

    .catalog-filter-actions {
        grid-column: 1 / -1;
    }

    .catalog-table-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
    }

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

    .movement-table {
        min-width: 0;
    }

    .catalog-table thead {
        display: none;
    }

    .catalog-table tbody {
        display: grid;
        gap: 0.75rem;
    }

    .catalog-table tr {
        padding: 0.5rem 1rem;
        border: 1px solid var(--color-border);
        border-radius: 0.75rem;
        background: #ffffff;
    }

    .catalog-table td {
        display: grid;
        grid-template-columns: minmax(7.5rem, 0.45fr) minmax(0, 1fr);
        gap: 1rem;
        padding: 0.625rem 0;
        border-bottom: 1px solid #e7e7e7;
        text-align: right;
        white-space: normal;
    }

    .catalog-table td::before {
        color: #6a6a6a;
        content: attr(data-label);
        font-size: 0.6875rem;
        font-weight: 750;
        letter-spacing: 0.06em;
        text-align: left;
        text-transform: uppercase;
    }

    .catalog-table td.catalog-row-action {
        display: block;
        padding-top: 0.875rem;
        text-align: right !important;
    }

    .catalog-table td.catalog-row-action::before {
        content: none;
    }
}

@media (max-width: 36rem) {
    .module-page-header,
    .catalog-empty {
        align-items: stretch;
        flex-direction: column;
    }

    .module-page-header .button,
    .catalog-empty .button {
        width: 100%;
    }

    .module-page-actions {
        width: 100%;
    }

    .table-actions {
        width: 100%;
        justify-content: stretch;
    }

    .table-actions .button {
        flex: 1 1 auto;
    }

    .order-timeline-event-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.2rem;
    }

    .module-page-actions form,
    .order-inventory-warning .form-actions form {
        width: 100%;
    }

    .recipe-product-summary,
    .recipe-line-grid {
        grid-template-columns: 1fr;
    }

    .recipe-product-summary.order-cancellation-summary {
        grid-template-columns: 1fr;
    }

    .order-cancellation-options {
        grid-template-columns: 1fr;
    }

    .recipe-product-name,
    .recipe-line-action {
        grid-column: auto;
    }

    .recipe-section-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .combo-section-heading,
    .combo-group-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .combo-group-actions {
        justify-content: stretch;
    }

    .combo-group-actions .button {
        flex: 1 1 auto;
    }

    .combo-group-fields,
    .combo-option {
        grid-template-columns: 1fr;
    }

    .combo-option-action {
        grid-column: auto;
    }

    .combo-option-action,
    .combo-option-action .button,
    .combo-add-option,
    .combo-section-heading .button {
        width: 100%;
    }

    .recipe-line-action,
    .recipe-line-action .button {
        width: 100%;
    }

    .catalog-filters,
    .inventory-item-filters {
        grid-template-columns: 1fr;
    }

    .movement-filters {
        grid-template-columns: 1fr;
    }

    .product-filters,
    .product-checkboxes {
        grid-template-columns: 1fr;
    }

    .product-filters .catalog-filter-actions {
        grid-column: auto;
    }

    .movement-filter-actions {
        grid-column: auto;
    }

    .movement-filter-actions .button,
    .pagination-actions .button {
        flex: 1 1 auto;
    }

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

    .catalog-filter-actions {
        grid-column: auto;
    }

    .catalog-filter-actions .button {
        flex: 1 1 auto;
    }

    .catalog-table td {
        grid-template-columns: 1fr;
        gap: 0.25rem;
        text-align: left;
    }

    .form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .form-actions .button {
        width: 100%;
    }

    .count-section-heading,
    .count-row-grid,
    .count-summary {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .count-section-heading {
        display: grid;
    }

    .count-section-heading .button,
    .count-row-action .button {
        width: 100%;
    }

    .count-row-action,
    .count-summary-note {
        grid-column: auto;
    }
}

/* Administrative layout */

.admin-page {
    background: #f4f4f4;
    color: var(--color-text);
}

.admin-page.sidebar-open {
    overflow: hidden;
}

.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 100;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: #ffffff;
    color: #111111;
    font-weight: 750;
    text-decoration: none;
    transform: translateY(-150%);
}

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

.admin-shell {
    min-height: 100vh;
}

.admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    display: flex;
    width: min(88vw, var(--sidebar-width));
    min-height: 100vh;
    min-height: 100dvh;
    flex-direction: column;
    overflow-y: auto;
    border-right: 1px solid #2d2d2d;
    background: #111111;
    color: #ffffff;
    transform: translateX(-101%);
    visibility: hidden;
    transition: transform 180ms ease, visibility 0s linear 180ms;
}

.admin-sidebar a:focus-visible,
.admin-sidebar button:focus-visible {
    outline-color: #ffffff;
}

.admin-shell.is-sidebar-open .admin-sidebar {
    transform: translateX(0);
    visibility: visible;
    transition-delay: 0s;
}

.sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    min-height: 100vh;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgb(0 0 0 / 52%);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 180ms ease, visibility 0s linear 180ms;
}

.admin-shell.is-sidebar-open .sidebar-overlay {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition-delay: 0s;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--topbar-height);
    padding: 1rem 1.125rem;
    border-bottom: 1px solid #2d2d2d;
}

.sidebar-brand {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.75rem;
    color: #ffffff;
    text-decoration: none;
}

.sidebar-brand-mark {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    border: 1px solid #505050;
    border-radius: 50%;
    background: #ffffff;
    color: #111111;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    place-items: center;
}

.sidebar-brand-copy,
.sidebar-user-copy {
    display: grid;
    min-width: 0;
}

.sidebar-brand-copy strong {
    overflow: hidden;
    font-size: 0.9375rem;
    letter-spacing: -0.015em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-brand-copy small,
.sidebar-user-copy small {
    color: #a8a8a8;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sidebar-close {
    display: grid;
    width: 2.5rem;
    min-height: 2.5rem;
    padding: 0;
    border-color: #444444;
    background: #1d1d1d;
    color: #ffffff;
    font-size: 1.5rem;
    line-height: 1;
    place-items: center;
}

.admin-nav {
    flex: 1 1 auto;
    padding: 1.5rem 0.875rem;
}

.admin-nav-label {
    margin: 0 0 0.625rem;
    padding-inline: 0.75rem;
    color: #858585;
    font-size: 0.6875rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.admin-nav-list {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-nav-item {
    display: grid;
    grid-template-columns: 0.5rem minmax(0, 1fr) auto;
    min-height: 2.75rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 0.625rem;
    color: #cecece;
    font-size: 0.875rem;
    font-weight: 650;
    text-decoration: none;
}

a.admin-nav-item:hover {
    border-color: #3d3d3d;
    background: #1c1c1c;
    color: #ffffff;
}

.admin-nav-item.is-active {
    border-color: #444444;
    background: #ffffff;
    color: #111111;
}

.admin-nav-marker {
    width: 0.375rem;
    height: 0.375rem;
    border: 1px solid currentColor;
    border-radius: 50%;
}

.admin-nav-item.is-active .admin-nav-marker {
    background: currentColor;
}

.admin-nav-item.is-disabled {
    color: #707070;
    cursor: not-allowed;
}

.admin-nav-item small {
    color: #686868;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-nav-parent {
    color: #a9a9a9;
}

.admin-nav-parent.has-active-child {
    color: #ffffff;
}

.admin-subnav-list {
    display: grid;
    gap: 0.125rem;
    margin: 0.125rem 0 0.375rem 1.125rem;
    padding: 0 0 0 0.75rem;
    border-left: 1px solid #353535;
    list-style: none;
}

.admin-subnav-item {
    display: block;
    padding: 0.55rem 0.75rem;
    border-radius: 0.5rem;
    color: #a8a8a8;
    font-size: 0.8125rem;
    font-weight: 650;
    text-decoration: none;
}

.admin-subnav-item:hover {
    background: #1c1c1c;
    color: #ffffff;
}

.admin-subnav-item.is-active {
    background: #ffffff;
    color: #111111;
}

.sidebar-account {
    padding: 1rem;
    border-top: 1px solid #2d2d2d;
}

.sidebar-user {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem;
}

.sidebar-user-avatar {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #2c2c2c;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 800;
    place-items: center;
}

.sidebar-user-copy strong {
    overflow: hidden;
    color: #ffffff;
    font-size: 0.875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-logout {
    margin-top: 0.875rem;
}

.sidebar-logout button {
    width: 100%;
    border-color: #414141;
    background: #1b1b1b;
    color: #efefef;
    font-size: 0.8125rem;
    font-weight: 700;
}

.sidebar-logout button:hover {
    border-color: #666666;
    background: #262626;
}

.admin-workspace {
    min-width: 0;
    min-height: 100vh;
}

.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    min-height: var(--topbar-height);
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    background: rgb(255 255 255 / 96%);
    backdrop-filter: blur(0.75rem);
}

.admin-topbar-main {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.875rem;
}

.menu-toggle {
    display: grid;
    width: 2.75rem;
    min-height: 2.75rem;
    flex: 0 0 auto;
    padding: 0;
    border-color: var(--color-border);
    place-items: center;
}

.menu-toggle-lines {
    display: grid;
    width: 1.125rem;
    gap: 0.25rem;
}

.menu-toggle-lines span {
    height: 1px;
    background: #111111;
}

.topbar-title {
    display: grid;
    min-width: 0;
}

.topbar-title span {
    color: var(--color-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.topbar-title strong {
    overflow: hidden;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-main {
    width: min(100%, 90rem);
    margin-inline: auto;
    padding: clamp(1rem, 3vw, 2.5rem);
}

.admin-main:focus {
    outline: none;
}

.flash-stack {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.flash-message {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: #ffffff;
    color: #202020;
    font-size: 0.875rem;
}

.flash-message-marker {
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.35rem;
    border: 1px solid currentColor;
    border-radius: 50%;
}

.flash-message--success {
    border-left: 4px solid #202020;
}

.flash-message--success .flash-message-marker {
    background: #202020;
}

.flash-message--error {
    border-color: #555555;
    background: #e8e8e8;
    font-weight: 650;
}

.flash-message--warning {
    border-style: dashed;
}

.flash-message--info {
    color: var(--color-muted);
}

.dashboard-hero {
    display: flex;
    align-items: flex-start;
    padding: clamp(1.5rem, 4vw, 2.25rem);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: #ffffff;
}

.section-kicker {
    margin: 0 0 0.625rem;
    color: var(--color-muted);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dashboard-hero h1 {
    margin: 0;
    font-size: clamp(2.25rem, 7vw, 3.75rem);
    line-height: 1;
    letter-spacing: -0.05em;
}

.dashboard-welcome {
    max-width: 43rem;
    margin: 1.25rem 0 0;
    color: var(--color-muted);
    font-size: clamp(1rem, 2vw, 1.125rem);
}

.dashboard-welcome strong {
    color: var(--color-text);
}

.section-heading h2,
.dashboard-module-card h3 {
    margin: 0;
    letter-spacing: -0.025em;
}

.dashboard-section {
    margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.25rem;
}

.section-heading h2 {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
}

.section-heading > p {
    max-width: 31rem;
    margin: 0;
    color: var(--color-muted);
    font-size: 0.875rem;
}

.dashboard-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.dashboard-module-card {
    display: flex;
    min-height: 11rem;
    flex-direction: column;
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: #ffffff;
    color: var(--color-text);
    text-decoration: none;
    transition: border-color 150ms ease, transform 150ms ease;
}

.dashboard-module-card:hover {
    border-color: #808080;
    transform: translateY(-1px);
}

.dashboard-module-card h3 {
    margin-top: 0;
    font-size: 1.25rem;
}

.dashboard-module-card p {
    margin: 0.75rem 0 1.5rem;
    color: var(--color-muted);
    font-size: 0.875rem;
}

.dashboard-module-card > span {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 0.8125rem;
    font-weight: 700;
}

@media (min-width: 44rem) {
    .dashboard-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .admin-page.sidebar-open {
        overflow: auto;
    }

    .admin-sidebar {
        width: var(--sidebar-width);
        transform: none;
        visibility: visible;
        transition: none;
    }

    .sidebar-overlay,
    .sidebar-close,
    .menu-toggle {
        display: none;
    }

    .admin-workspace {
        margin-left: var(--sidebar-width);
    }

    .admin-topbar {
        padding-inline: 2rem;
    }

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

@media (max-width: 43.999rem) {
    .dashboard-hero,
    .section-heading {
        align-items: stretch;
        flex-direction: column;
        gap: 1.25rem;
    }

}

@media (max-width: 30rem) {
    .dashboard-hero,
    .dashboard-module-card {
        border-radius: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-sidebar,
    .sidebar-overlay {
        transition-duration: 0.01ms;
    }
}

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

.auth-page {
    background:
        linear-gradient(145deg, rgb(255 255 255 / 94%), rgb(236 236 236 / 94%)),
        repeating-linear-gradient(90deg, transparent 0 4rem, rgb(0 0 0 / 3%) 4rem 4.0625rem);
}

.auth-shell {
    display: grid;
    width: min(100% - 2rem, 31rem);
    min-height: 100vh;
    margin-inline: auto;
    padding-block: 3rem;
    place-items: center;
}

.auth-panel {
    width: 100%;
    padding: clamp(2rem, 7vw, 3.5rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.auth-panel .brand-mark {
    margin-inline: 0;
    margin-bottom: 2rem;
}

.auth-panel h1 {
    font-size: clamp(2.25rem, 10vw, 3.75rem);
}

.auth-intro {
    margin: 1rem 0 0;
    color: var(--color-muted);
}

.form-alert {
    margin-top: 1.5rem;
    padding: 0.875rem 1rem;
    border: 1px solid #949494;
    border-radius: 0.625rem;
    background: #f3f3f3;
    color: #222222;
    font-size: 0.9375rem;
}

.form-alert p {
    margin: 0 0 0.5rem;
    font-weight: 700;
}

.form-alert ul {
    margin: 0;
    padding-left: 1.25rem;
}

.order-inventory-warning,
.order-confirmed-warning {
    padding: 1rem;
    border: 1px solid #8f8f8f;
    border-radius: var(--radius-medium);
    background: #f4f4f4;
}

.order-inventory-warning h2,
.order-confirmed-warning h2,
.order-inventory-warning > p,
.order-confirmed-warning > p {
    margin-top: 0;
}

.order-inventory-warning .form-actions {
    margin-top: 1rem;
}

.form-success,
.form-notice {
    margin-top: 1.5rem;
    padding: 0.875rem 1rem;
    border-radius: 0.625rem;
    font-size: 0.9375rem;
}

.form-success {
    border: 1px solid #4d4d4d;
    background: #ededed;
    color: #111111;
    font-weight: 650;
}

.form-notice {
    border-left: 3px solid var(--color-accent);
    background: #f7f7f7;
    color: var(--color-muted);
}

.auth-form {
    display: grid;
    gap: 1.25rem;
    margin-top: 2rem;
}

.field-group {
    display: grid;
    gap: 0.5rem;
}

.field-group label {
    font-size: 0.875rem;
    font-weight: 700;
}

.field-help {
    margin: -0.125rem 0 0;
    color: var(--color-muted);
    font-size: 0.8125rem;
}

.field-group input {
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 0.875rem;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.field-group input:hover {
    border-color: #9a9a9a;
}

.field-group input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgb(32 32 32 / 10%);
    outline: none;
}

.primary-button,
.secondary-button {
    border-color: var(--color-accent);
    font-weight: 750;
    transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.primary-button {
    width: 100%;
    margin-top: 0.25rem;
    background: var(--color-accent);
    color: #ffffff;
}

.primary-button:hover {
    background: #000000;
}

.primary-button:active,
.secondary-button:active {
    transform: translateY(1px);
}

.dashboard-card h1 {
    font-size: clamp(2rem, 7vw, 3.75rem);
}

.setup-shell {
    width: min(100% - 2rem, 38rem);
}

.setup-panel h1 {
    font-size: clamp(2rem, 8vw, 3.25rem);
}

.logout-form {
    margin-top: 2rem;
}

.secondary-button {
    background: var(--color-surface);
    color: var(--color-text);
}

.secondary-button:hover {
    background: var(--color-accent);
    color: #ffffff;
}

@media (max-width: 35rem) {
    .auth-shell {
        width: min(100% - 1rem, 31rem);
        padding-block: 0.5rem;
    }

    .auth-panel {
        padding: 2.25rem 1.25rem;
        border-radius: 0.75rem;
        box-shadow: none;
    }

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

/* Promotion administration and historical order applications. */
.promotion-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
.promotion-fields > legend { font-weight: 700; margin-bottom: 1rem; }
.promotion-days { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; border: 0; padding: 1rem 0; }
.promotion-days legend { padding: 0; font-weight: 600; }
.promotion-days label, .promotion-product-option { display: flex; align-items: center; gap: .65rem; }
.promotion-editor input[type="checkbox"] { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; accent-color: #111; }
.promotion-channel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.promotion-channel-grid > fieldset { min-width: 0; margin: 0; border: 1px solid #ddd; border-radius: .5rem; padding: 1rem; }
.promotion-product-options { max-height: 22rem; overflow-y: auto; padding: .5rem; border: 1px solid #ddd; border-radius: .5rem; }
.promotion-product-option { padding: .65rem .25rem; overflow-wrap: anywhere; border-bottom: 1px solid #eee; }
.promotion-product-option[hidden] { display: none; }
.promotion-editor [hidden] { display: none !important; }
.promotion-editor [data-promotion-calculator-output] { padding: 1rem; background: #f4f4f4; border-left: 3px solid #333; line-height: 1.7; overflow-wrap: anywhere; }
.promotion-application { padding: 1rem 0; border-bottom: 1px solid #ddd; overflow-wrap: anywhere; }
.promotion-application h3 { margin-top: 0; }
.promotion-application li { margin: .4rem 0; }
@media (max-width: 720px) {
    .promotion-channel-grid { grid-template-columns: minmax(0, 1fr); }
    .promotion-editor .form-grid { grid-template-columns: minmax(0, 1fr); }
    .promotion-days { gap: .8rem; }
}