/*
 * Shared UI components (promoted from the PIM dashboard). Every page builds from these; a pattern
 * a page needs that isn't here gets added here (and to the UI kit page, /portal/public/uikit),
 * never solved in page CSS. Colours, radii, shadows and type come only from tokens.css.
 */

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

.ui-page-header .page-header {
    margin-bottom: 0;
}

.ui-page-header__title {
    font-size: var(--ui-fs-xl);
    font-weight: 700;
    color: var(--ui-text);
    margin: 0;
}

.ui-page-header__subtitle {
    font-size: var(--ui-fs-sm);
    color: var(--ui-muted);
    margin: 2px 0 0;
    max-width: 70ch;
}

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

/* Header actions: same button treatment as .main-buttons (icon + label, control height) */
.ui-page-header__actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--ui-control-h);
    padding: 0 14px;
    border-radius: var(--ui-radius);
    font-size: var(--ui-fs-base);
}

/* Date ranges and other input groups in the header keep a readable width */
.ui-page-header__actions .input-group {
    min-width: 280px;
}

/* ---------- Filter bar ---------- */
.ui-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-2);
}

.ui-filters .form-select {
    width: auto;
    min-width: 150px;
    max-width: 220px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    padding: 6px 28px 6px 12px;
    font-size: var(--ui-fs-sm);
    color: var(--ui-body);
    background-color: var(--ui-surface);
    box-shadow: none;
    transition: border-color var(--ui-ease), background-color var(--ui-ease);
}

.ui-filters .form-select:focus {
    border-color: var(--ui-primary);
    box-shadow: none;
}

.ui-filters .form-select.is-filtered,
.ui-filters .is-filtered .select2-selection {
    background-color: var(--ui-primary-soft);
    border-color: var(--ui-primary-line);
    color: var(--ui-primary);
    font-weight: 600;
}

.ui-reset {
    border: 0;
    background: transparent;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-muted);
    padding: 6px 4px;
    transition: color var(--ui-ease);
}

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

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

/* ---------- Card ---------- */
.ui-section {
    margin-bottom: var(--ui-space-4);
}

.ui-grid {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}

/* Legacy style.css pads .row (.container-fluid > .row) and .row>* differently; restore Bootstrap's gutters so
   cards in a grid line up with full-width cards */
.row.ui-grid {
    padding-right: 0;
    padding-left: 0;
}

.ui-grid > * {
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
}

/* .gy-0 / .g-0 on a kit grid: Bootstrap's utility loads before .ui-grid's 1rem row gap and lost to it */
.ui-grid.gy-0,
.ui-grid.g-0 {
    --bs-gutter-y: 0;
}

.ui-card {
    background: var(--ui-surface);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
    height: 100%;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ui-card--auto {
    height: auto;
}

.ui-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ui-space-3);
    padding: 16px 20px 8px;
}

.ui-card__title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--ui-fs-md);
    font-weight: 700;
    color: var(--ui-text);
    margin: 0;
}

.ui-card__subtitle {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    margin: 2px 0 0;
}

.ui-card__body {
    padding: 8px 20px 20px;
    flex: 1 1 auto;
    min-width: 0;
}

.ui-card__body--flush {
    padding: 0 8px 8px;
}

.ui-card__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 12px 20px;
    border-top: 1px solid var(--ui-border);
    font-size: var(--ui-fs-xs);
}

.ui-card__foot a {
    color: var(--ui-muted);
    text-decoration: none;
    transition: color var(--ui-ease);
}

.ui-card__foot a:hover {
    color: var(--ui-primary);
}

.ui-card__foot i {
    font-size: var(--ui-fs-2xs);
    color: var(--ui-faint);
    margin-right: 4px;
}

.ui-subhead {
    font-size: var(--ui-fs-xs);
    font-weight: 700;
    color: var(--ui-text);
    margin: 20px 0 10px;
}

/* ---------- Links ---------- */
.ui-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--ui-ease);
}

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

.ui-link i {
    font-size: var(--ui-fs-2xs);
    transition: transform var(--ui-ease);
}

.ui-link:hover i {
    transform: translateX(2px);
}

/* ---------- Note (inline explanation / callout) ---------- */
.ui-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-2);
    padding: 8px 12px;
    border-radius: var(--ui-radius);
    background: var(--ui-subtle);
    font-size: var(--ui-fs-sm);
    color: var(--ui-body);
}

.ui-note > :is(i, svg):first-child {
    flex: 0 0 auto;
    color: var(--ui-faint);
}

.ui-note--block {
    justify-content: flex-start;
    align-items: flex-start;
}

.ui-note--info { background: var(--ui-info-tint); color: var(--ui-info-text); }
.ui-note--success,
.ui-note.is-good { background: var(--ui-success-tint); color: var(--ui-success-text); }
.ui-note--warning { background: var(--ui-warning-tint); color: var(--ui-warning-text); }
.ui-note--danger,
.ui-note.is-alert { background: var(--ui-danger-tint); color: var(--ui-danger-text); }

.ui-note--info > :is(i, svg):first-child,
.ui-note--success > :is(i, svg):first-child,
.ui-note--warning > :is(i, svg):first-child,
.ui-note--danger > :is(i, svg):first-child {
    color: inherit;
}

/* ---------- Ring (single percentage) ---------- */
.ui-ring {
    --pct: 0;
    --ring-color: var(--ui-success);
    position: relative;
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: conic-gradient(var(--ring-color) calc(var(--pct) * 1%), var(--ui-track) 0);
}

.ui-ring::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: var(--ui-surface);
}

.ui-ring__value {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
}

/* ---------- Segment bar (distribution) ---------- */
.ui-segbar {
    display: flex;
    height: 10px;
    border-radius: var(--ui-radius-pill);
    overflow: hidden;
    background: var(--ui-track);
    gap: 2px;
}

.ui-segbar > span {
    display: block;
    height: 100%;
    transition: width var(--ui-ease-slow);
}

.ui-segbar--thin {
    height: 6px;
}

/* ---------- Chips (clickable status counts) ---------- */
.ui-chips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: var(--ui-space-2);
}

.ui-chip {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: var(--ui-radius);
    background: transparent;
    text-align: left;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    outline: none;
    transition: background-color var(--ui-ease), border-color var(--ui-ease);
}

.ui-chip:hover,
.ui-chip:focus-visible {
    background: var(--ui-subtle);
}

.ui-chip.is-active {
    background: var(--ui-primary-soft);
    border-color: var(--ui-primary-line);
}

.ui-chip__label {
    display: flex;
    align-items: center;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-muted);
    white-space: nowrap;
}

.ui-chip__value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
}

.ui-chip__value small {
    font-size: max(.7rem, var(--ui-meta-min, 0px));
    font-weight: 600;
    color: var(--ui-faint);
    margin-left: 4px;
}

.ui-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    flex: 0 0 auto;
    background: var(--dot-color, var(--ui-neutral));
}

/* ---------- Stat strip (KPI tiles in one card) ---------- */
.ui-stat-strip {
    display: grid;
    grid-template-columns: repeat(var(--ui-stat-cols, 4), minmax(0, 1fr));
}

.ui-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 20px;
    color: inherit;
    text-decoration: none;
    transition: background-color var(--ui-ease);
    min-width: 0;
}

.ui-stat + .ui-stat {
    border-left: 1px solid var(--ui-border);
}

.ui-stat:first-child {
    border-radius: var(--ui-radius) 0 0 var(--ui-radius);
}

.ui-stat:last-child {
    border-radius: 0 var(--ui-radius) var(--ui-radius) 0;
}

a.ui-stat:hover,
button.ui-stat:hover {
    background: var(--ui-subtle);
    color: inherit;
}

button.ui-stat {
    border: 0;
    background: transparent;
    text-align: left;
}

.ui-stat__label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-muted);
}

.ui-stat__value {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: var(--ui-fs-kpi);
    font-weight: 700;
    color: var(--ui-text);
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}

.ui-stat__value small {
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-faint);
}

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

.ui-delta {
    font-size: max(.7rem, var(--ui-meta-min, 0px));
    font-weight: 600;
    border-radius: var(--ui-radius-pill);
    padding: 1px 7px;
    background: var(--ui-subtle);
    color: var(--ui-muted);
}

.ui-delta :is(i, svg) {
    font-size: .6rem;
}

.ui-delta.is-up,
.ui-delta.is-good { background: var(--ui-success-tint); color: var(--ui-success-text); }
.ui-delta.is-down,
.ui-delta.is-bad { background: var(--ui-danger-tint); color: var(--ui-danger); }

.ui-spark {
    display: block;
    width: 100%;
    height: 18px;
    margin-top: 2px;
}

.ui-meter {
    height: 4px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-track);
    overflow: hidden;
    margin-top: 4px;
}

.ui-meter > span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: var(--ui-radius-pill);
    background: var(--meter-color, var(--ui-primary));
    transition: width var(--ui-ease-slow);
}

/* Meter with a percentage next to it (e.g. live rate in a table) */
.ui-progress {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    min-width: 110px;
}

.ui-progress .ui-meter {
    flex: 1 1 auto;
    height: 6px;
    margin-top: 0;
}

.ui-progress__pct {
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-text);
    width: 2.4rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Status pill with a thin progress meter underneath (shipment progress, workflows) */
.ui-progress-status {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-width: 100px;
}

.ui-progress-status .ui-meter {
    width: 100%;
    height: 3px;
    margin: 0;
}

/* Scan progress card (pack screens): count, explanation and a meter that fills as items are scanned */
.ui-scan-progress {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-3);
    padding: var(--ui-space-4) var(--ui-space-5);
}

.ui-scan-progress__head {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
}

.ui-scan-progress__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
    font-size: var(--ui-fs-md);
}

.ui-scan-progress__title {
    font-size: var(--ui-fs-md);
    font-weight: 600;
    color: var(--ui-text);
    line-height: 1.3;
}

.ui-scan-progress__count {
    margin-left: auto;
    font-size: var(--ui-fs-lg);
    font-weight: 700;
    color: var(--ui-text);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ui-scan-progress__count span:last-child {
    color: var(--ui-muted);
    font-weight: 500;
}

.ui-scan-progress .ui-meter {
    height: 8px;
    margin: 0;
}

.ui-scan-progress__actions:empty,
.ui-scan-progress__actions:not(:has(> :not([style*="display: none"]))) {
    display: none;
}

/* ---------- Tabs ---------- */
.ui-tabs {
    display: flex;
    gap: var(--ui-space-6);
    border-bottom: 1px solid var(--ui-border);
    margin-bottom: var(--ui-space-4);
    overflow-x: auto;
    scrollbar-width: none;
}

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

.ui-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    padding: 10px 0;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    font-size: var(--ui-fs-base);
    font-weight: 600;
    color: var(--ui-muted);
    white-space: nowrap;
    text-decoration: none;
    transition: color var(--ui-ease), border-color var(--ui-ease);
}

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

.ui-tab.is-active,
.ui-tab.active {
    color: var(--ui-primary);
    border-bottom-color: var(--ui-primary);
}

.ui-tab__count {
    font-size: max(.7rem, var(--ui-meta-min, 0px));
    font-weight: 700;
    padding: 0 7px;
    border-radius: var(--ui-radius-pill);
    line-height: 1.6;
    background: var(--ui-subtle);
    color: var(--ui-muted);
}

.ui-tab__count.is-danger {
    background: var(--ui-danger-tint);
    color: var(--ui-danger);
}

.ui-tab__count.is-warning {
    background: var(--ui-warning-tint);
    color: var(--ui-warning-text);
}

.ui-tab__count:empty {
    display: none;
}

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

/* ---------- Segmented toggle ---------- */
.ui-toggle {
    display: inline-flex;
    padding: 3px;
    border-radius: var(--ui-radius);
    background: var(--ui-subtle);
    flex: 0 0 auto;
}

.ui-toggle button,
.ui-toggle .ui-toggle__btn {
    border: 0;
    background: transparent;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-muted);
    padding: 3px 12px;
    border-radius: var(--ui-radius-md);
    transition: background-color var(--ui-ease), color var(--ui-ease);
}

.ui-toggle .ui-toggle__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: max(26px, var(--ui-tap-min, 0px));
    white-space: nowrap;
}

.ui-toggle button:hover,
.ui-toggle .ui-toggle__btn:hover {
    color: var(--ui-text);
}

.ui-toggle button.is-active,
.ui-toggle button.active,
.ui-toggle .ui-toggle__btn.is-active,
.ui-toggle .ui-toggle__btn.active {
    background: var(--ui-surface);
    color: var(--ui-primary);
    box-shadow: var(--ui-shadow);
}

/* Icon-only toggle (chart type): no track, the active icon gets a subtle chip */
.ui-toggle--icons {
    padding: 0;
    background: transparent;
}

.ui-toggle--icons .ui-toggle__btn {
    width: max(30px, var(--ui-tap-min, 0px));
    padding: 0;
    color: var(--ui-faint);
}

.ui-toggle--icons .ui-toggle__btn.active,
.ui-toggle--icons .ui-toggle__btn.is-active {
    background: var(--ui-subtle);
    color: var(--ui-text);
    box-shadow: none;
}

@media (max-width: 575.98px) {
    .ui-toggle {
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }
}

/* ---------- Empty / loading ---------- */
.ui-empty {
    text-align: center;
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    padding: 28px 12px;
    list-style: none;
}

.ui-empty > :is(i, svg):first-child {
    display: block;
    font-size: 1.2rem;
    color: var(--ui-faint);
    margin: 0 auto var(--ui-space-2);
}

.ui-empty p {
    margin: 0;
}

.ui-empty__title {
    display: block;
    font-weight: 700;
    color: var(--ui-text);
    margin-bottom: 2px;
}

.ui-empty .btn {
    margin-top: var(--ui-space-3);
}

.ui-empty--good > :is(i, svg):first-child {
    color: var(--ui-success);
}

.ui-empty--error > :is(i, svg):first-child {
    color: var(--ui-danger);
}

.is-loading .ui-chip__value,
.is-loading .ui-stat__value,
.is-loading .ui-ring__value {
    opacity: .35;
    transition: opacity 150ms ease;
}

@keyframes uiSkeleton {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ui-skeleton {
        animation: none;
    }
}

.ui-skeleton {
    display: block;
    height: .8em;
    border-radius: var(--ui-radius-xs);
    background: linear-gradient(90deg, var(--ui-track) 25%, var(--ui-subtle) 50%, var(--ui-track) 75%);
    background-size: 200% 100%;
    animation: uiSkeleton 1.4s ease infinite;
}

/* ---------- Pills and statuses ---------- */
.ui-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 2rem;
    padding: 2px 9px;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    background: var(--ui-subtle);
    color: var(--ui-muted);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.ui-pill--primary { background: var(--ui-primary-tint); color: var(--ui-primary); }
.ui-pill--success { background: var(--ui-success-tint); color: var(--ui-success-text); }
.ui-pill--info { background: var(--ui-info-tint); color: var(--ui-info-text); }
.ui-pill--warning { background: var(--ui-warning-tint); color: var(--ui-warning-text); }
.ui-pill--danger { background: var(--ui-danger-tint); color: var(--ui-danger); }

a.ui-pill:hover {
    filter: brightness(.96);
}

/* Status pill: dot + label, one colour per meaning */
.ui-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px 2px 8px;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    background: var(--ui-neutral-tint);
    color: var(--ui-neutral-text);
}

.ui-status > :is(i, svg) {
    font-size: .85em;
}

/* A pill that carries its own icon (directly or inside a wrapper) shows no status dot */
.ui-status:has(:is(i, svg))::before {
    display: none;
}

.ui-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.ui-status--success { background: var(--ui-success-tint); color: var(--ui-success-text); }
.ui-status--info { background: var(--ui-info-tint); color: var(--ui-info-text); }
.ui-status--warning { background: var(--ui-warning-tint); color: var(--ui-warning-text); }
.ui-status--danger { background: var(--ui-danger-tint); color: var(--ui-danger-text); }
.ui-status--primary { background: var(--ui-primary-tint); color: var(--ui-primary); }

/* ---------- Help tip (explainer tooltip trigger, see helpTip()) ---------- */
.ui-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 0 0 0 2px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ui-faint);
    font-size: .75rem;
    line-height: 1;
    vertical-align: middle;
    cursor: help;
    transition: color var(--ui-ease);
}

.ui-help:hover,
.ui-help:focus-visible,
.ui-help[aria-describedby] {
    color: var(--ui-primary);
    outline: none;
}

.ui-help:focus-visible {
    box-shadow: var(--ui-focus-ring);
}

/* ---------- Form helpers ---------- */
.ui-field-hint {
    display: block;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    margin-top: 4px;
}

.ui-field-error {
    display: block;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-danger);
    margin-top: 4px;
}

/* ---------- Item (thumb/logo + text), the base of composite cells ---------- */
.ui-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ui-item__text {
    min-width: 0;
}

.ui-item__title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: var(--ui-fs-sm);
    color: var(--ui-text);
    text-decoration: none;
    transition: color var(--ui-ease);
}

a.ui-item__title:hover {
    color: var(--ui-primary);
}

.ui-item__meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    margin-top: 1px;
}

.ui-item__meta .is-error {
    color: var(--ui-danger-text);
}

.ui-thumb {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: var(--ui-radius);
    background: var(--ui-subtle);
    border: 1px solid var(--ui-border);
    object-fit: contain;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-faint);
    font-size: var(--ui-fs-xs);
    overflow: hidden;
}

/* Wide enough for the channel wordmarks (Amazon, WooCommerce, JTL); square logos stay 22px tall, centred */
.ui-logo {
    flex: 0 0 auto;
    width: 36px;
    height: 22px;
    border-radius: var(--ui-radius-xs);
    object-fit: contain;
    background: var(--ui-logo-bg);
}

/* Partner / provider wordmark: drawn for a white background, so it keeps a small white tile (dark mode) */
.ui-brand-logo {
    display: inline-block;
    box-sizing: content-box;
    padding: 4px 8px;
    border-radius: var(--ui-radius-xs);
    background: var(--ui-logo-bg);
    object-fit: contain;
}

.ui-logo--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
    font-size: var(--ui-fs-2xs);
    font-weight: 700;
}

.ui-age {
    font-size: var(--ui-fs-xs);
    color: var(--ui-faint);
    white-space: nowrap;
}

/* Icon button that appears on row hover */
.ui-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--ui-radius);
    color: var(--ui-primary);
    background: var(--ui-primary-tint);
    font-size: .7rem;
    text-decoration: none;
    opacity: 0;
    transition: opacity 120ms ease, transform var(--ui-ease);
}

tr:hover .ui-row-action,
.ui-row-action:focus-visible {
    opacity: 1;
}

.ui-row-action:hover {
    transform: scale(1.08);
}

@media (hover: none) {
    .ui-row-action {
        opacity: 1;
    }
}

/* ---------- Compact panel table (inside a card) ---------- */
.ui-table {
    margin-bottom: 0;
    --bs-table-bg: transparent;
    --bs-table-hover-bg: transparent;
}

.ui-table thead th {
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ui-muted) !important;
    padding: 8px 12px;
    border-top: 0;
    border-bottom: 1px solid var(--ui-border) !important;
    background-color: transparent !important;
    white-space: nowrap;
}

.ui-table tbody td {
    padding: 10px 12px;
    vertical-align: middle;
    border-bottom: 1px solid var(--ui-border);
    font-size: var(--ui-fs-sm);
    color: var(--ui-body);
    background-color: transparent;
    transition: background-color var(--ui-ease);
}

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

.ui-table tbody tr:hover td {
    background-color: var(--ui-row-hover);
}

.ui-table .ui-col-main {
    max-width: 0;
    width: 46%;
}

.ui-table .ui-col-muted {
    color: var(--ui-muted);
    font-size: .78rem;
    white-space: nowrap;
}

/* ---------- Table cells (CD.cell.* in JS, UiCells in PHP) ---------- */
.ui-empty-value {
    color: var(--ui-faint);
}

.ui-clamp-1,
.ui-clamp-2,
.ui-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
}

.ui-clamp-1 { -webkit-line-clamp: 1; }
.ui-clamp-2 { -webkit-line-clamp: 2; }
.ui-clamp-3 { -webkit-line-clamp: 3; }

.ui-item__title.ui-clamp-2 {
    white-space: normal;
    line-height: 1.35;
}

.ui-item__title--plain {
    font-weight: 500;
}

.ui-item__meta--wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 2px;
    white-space: normal;
}

.ui-meta-list {
    display: block;
    overflow: hidden;
    white-space: normal;
}

.ui-meta-list__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: -13px;
}

.ui-meta-item {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.ui-meta-item::before {
    content: '·';
    display: inline-block;
    flex: 0 0 13px;
    width: 13px;
    text-align: center;
    color: var(--ui-faint);
}

.ui-item__meta--line {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-item__meta--line .ui-flag {
    display: inline-block;
    vertical-align: -1px;
    margin-right: 3px;
}

.ui-sep {
    color: var(--ui-faint);
    margin: 0 4px;
}

/* Thumbnail centred on the text block, also when the EAN/SKU/Ref line wraps to several lines */
.ui-cell-product {
    min-width: 220px;
    align-items: center;
}

.ui-col-items {
    width: 120px !important;
    min-width: 120px;
    max-width: 120px !important;
}

.ui-cell-order {
    min-width: 220px;
}

/* Order number + one meta line (returns): no room reserved for chips */
.ui-cell-order--compact {
    min-width: 0;
}

.ui-cell-order .ui-logo {
    width: 44px;
    height: 28px;
    padding: 3px 4px;
    border: 1px solid var(--ui-border);
}

.ui-cell-product .ui-thumb {
    width: 40px;
    height: 40px;
}

.ui-flag {
    margin-right: 6px;
    border-radius: 2px;
}

/* Copy-on-click value (EAN, SKU, order number) */
.ui-copy {
    cursor: copy;
    border-radius: var(--ui-radius-xs);
    padding: 0 2px;
    margin: 0 -2px;
    font-variant-numeric: tabular-nums;
    transition: background-color var(--ui-ease), color var(--ui-ease);
}

.ui-copy:hover,
.ui-copy:focus-visible {
    background: var(--ui-subtle);
    color: var(--ui-text);
    outline: none;
}

.ui-copy.is-copied {
    background: var(--ui-success-tint);
    color: var(--ui-success-text);
}

.ui-kv {
    font-variant-numeric: tabular-nums;
}

.ui-copy__label,
.ui-kv__label {
    color: var(--ui-faint);
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
    letter-spacing: .02em;
}

/* Numbers */
.ui-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ui-num.is-negative,
.ui-qty.is-out {
    color: var(--ui-danger);
}

.ui-qty.is-low {
    color: var(--ui-warning-text);
    font-weight: 600;
}

.ui-num__sub {
    display: block;
    font-size: var(--ui-fs-2xs);
    color: var(--ui-muted);
    font-weight: 400;
}

.ui-date {
    white-space: nowrap;
    color: var(--ui-body);
}

.ui-bool.is-on {
    color: var(--ui-success);
}

/* Tags */
.ui-tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ui-tag {
    --tag-color: var(--ui-muted);
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    white-space: nowrap;
    color: var(--tag-color);
    background: color-mix(in srgb, var(--tag-color) 12%, transparent);
}

.ui-tag--more {
    background: var(--ui-subtle);
    color: var(--ui-muted);
    cursor: default;
}

/* Row actions: one visible primary + a "more" menu */
.ui-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.ui-actions__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max(32px, var(--ui-tap-min, 0px));
    height: max(32px, var(--ui-tap-min, 0px));
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--ui-radius-sm);
    background: transparent;
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    text-decoration: none;
    transition: background-color var(--ui-ease), color var(--ui-ease), border-color var(--ui-ease);
}

.ui-actions__btn:hover,
.ui-actions__btn:focus-visible,
.ui-actions__btn[aria-expanded="true"] {
    background: var(--ui-subtle);
    border-color: var(--ui-border);
    color: var(--ui-text);
    outline: none;
}

/* Column conventions (DataTables and plain tables) */
table .ui-col-num,
table th.ui-col-num,
table td.ui-col-num,
table.dataTable thead th.ui-col-num,
table.dataTable tfoot th.ui-col-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

table td.ui-col-product,
table th.ui-col-product,
table td.product-title-cell {
    min-width: 300px;
}

table td.ui-col-wide,
table th.ui-col-wide {
    min-width: 220px;
}

table td.ui-col-date,
table td.ui-col-status {
    white-space: nowrap;
}

table td.ui-col-actions,
table th.ui-col-actions {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

table.dataTable tbody tr.ui-row-link {
    cursor: pointer;
}

table.dataTable tbody td {
    vertical-align: middle;
}

table.dataTable tbody tr:hover > td {
    background-color: var(--ui-row-hover);
}

th .ui-help {
    margin-left: 4px;
    text-transform: none;
}

/* ---------- Legend ---------- */
.ui-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 10px;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

.ui-legend strong {
    color: var(--ui-text);
    margin-left: 4px;
}

.ui-legend:empty {
    display: none;
}

/* ---------- Horizontal bars (ranked / stacked per row) ---------- */
.ui-bars {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ui-bar {
    display: grid;
    grid-template-columns: minmax(90px, 150px) 1fr 3rem;
    align-items: center;
    gap: var(--ui-space-3);
    padding: 7px 8px;
    margin: 0 -8px;
    border-radius: var(--ui-radius);
    transition: background-color var(--ui-ease);
}

.ui-bar:hover {
    background: var(--ui-subtle);
}

.ui-bar__name {
    font-size: var(--ui-fs-sm);
    color: var(--ui-body);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-bar__track {
    display: block;
    height: 12px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-track);
    overflow: hidden;
}

.ui-bar__fill {
    display: flex;
    gap: 2px;
    height: 100%;
    border-radius: var(--ui-radius-pill);
    overflow: hidden;
    transition: width var(--ui-ease-slow);
}

.ui-bar__fill > span {
    min-width: 3px;
    height: 100%;
    transition: opacity var(--ui-ease);
}

.ui-bar__fill:hover > span:not(:hover) {
    opacity: .45;
}

.ui-bar__total {
    font-size: var(--ui-fs-sm);
    font-weight: 700;
    color: var(--ui-text);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---------- Ranked list ---------- */
.ui-rank {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ui-rank li {
    padding: 10px 0;
}

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

.ui-rank__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ui-space-3);
}

.ui-rank__label {
    font-size: var(--ui-fs-sm);
    color: var(--ui-body);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-rank__label i {
    width: 1rem;
    font-size: .7rem;
    color: var(--ui-faint);
    margin-right: 6px;
    text-align: center;
}

.ui-rank__value {
    font-size: .78rem;
    font-weight: 700;
    color: var(--ui-text);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ui-rank__value small {
    font-weight: 500;
    color: var(--ui-muted);
    margin-left: 4px;
}

/* ---------- Medal (rank 1-3 in leaderboards, plain circle for the rest) ---------- */
.ui-medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ui-subtle);
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ui-medal--gold { background: color-mix(in srgb, var(--ui-gold) 20%, transparent); color: var(--ui-gold); }
.ui-medal--silver { background: color-mix(in srgb, var(--ui-silver) 22%, transparent); color: var(--ui-silver); }
.ui-medal--bronze { background: color-mix(in srgb, var(--ui-bronze) 20%, transparent); color: var(--ui-bronze); }

/* ---------- Activity feed ---------- */
.ui-feed {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ui-feed li {
    position: relative;
    display: flex;
    gap: var(--ui-space-3);
    padding: 8px 0;
}

.ui-feed li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 36px;
    bottom: -4px;
    width: 1px;
    background: var(--ui-border);
}

.ui-feed__icon {
    flex: 0 0 auto;
    width: 27px;
    height: 27px;
    border-radius: var(--ui-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-fs-2xs);
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
}

.ui-feed__icon.is-success { background: var(--ui-success-tint); color: var(--ui-success-text); }
.ui-feed__icon.is-error { background: var(--ui-danger-tint); color: var(--ui-danger); }
.ui-feed__icon.is-warning { background: var(--ui-warning-tint); color: var(--ui-warning-text); }

.ui-feed__body {
    min-width: 0;
    flex: 1 1 auto;
}

.ui-feed__title {
    display: flex;
    justify-content: space-between;
    gap: var(--ui-space-2);
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    color: var(--ui-text);
}

.ui-feed__title a {
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.ui-feed__title a:hover {
    color: var(--ui-primary);
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .ui-stat-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-stat-strip .ui-stat:nth-child(odd) {
        border-left: 0;
    }

    .ui-stat-strip .ui-stat:nth-child(n + 3) {
        border-top: 1px solid var(--ui-border);
    }

    .ui-stat-strip .ui-stat {
        border-radius: 0;
    }
}

@media (max-width: 575.98px) {
    .ui-filters,
    .ui-filters .form-select {
        width: 100%;
        max-width: none;
    }

    .ui-hide-sm {
        display: none;
    }

    .ui-table .ui-col-main {
        min-width: 128px;
    }

    .ui-table thead th,
    .ui-table tbody td {
        padding-left: 6px;
        padding-right: 6px;
    }

    .ui-table thead th:first-child,
    .ui-table tbody td:first-child {
        padding-left: 12px;
    }

    .ui-table .ui-meter {
        display: none;
    }

    .ui-progress {
        min-width: 0;
    }
}

/* ---- Error state (404, 500, access denied) ---- */
.ui-error-state {
    max-width: 520px;
    margin: var(--ui-space-6) auto;
    padding: var(--ui-space-6) var(--ui-space-5);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    box-shadow: var(--ui-shadow);
    text-align: center;
}

.ui-error-state__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--ui-space-4);
    border-radius: var(--ui-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: var(--ui-warning-tint);
    color: var(--ui-warning-text);
}

.ui-error-state__icon.is-danger {
    background: var(--ui-danger-tint);
    color: var(--ui-danger-text);
}

.ui-error-state__code {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ui-text);
    margin-bottom: var(--ui-space-3);
    font-variant-numeric: tabular-nums;
}

.ui-error-state__title {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ui-text);
    margin: 0 0 var(--ui-space-2);
}

.ui-error-state__text {
    color: var(--ui-muted);
    margin: 0 auto var(--ui-space-5);
    max-width: 420px;
}

.ui-error-state__detail {
    text-align: left;
    margin-bottom: var(--ui-space-4);
}

.ui-error-state__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
    justify-content: center;
}

.ui-error-state__help {
    margin-top: var(--ui-space-5);
    padding-top: var(--ui-space-4);
    border-top: 1px solid var(--ui-border);
    font-size: var(--ui-fs-sm);
}

.ui-error-state__help a {
    color: var(--ui-muted);
    text-decoration: none;
}

.ui-error-state__help a:hover {
    color: var(--ui-primary);
}

/* standalone error page (no app shell) */
.ui-error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: var(--ui-space-4);
    background: var(--ui-page);
}

.ui-error-state__icon.is-success {
    background: var(--ui-success-tint);
    color: var(--ui-success-text);
}

/* ---- Stock advice counter cards (seller + FC stock advice) ---- */
.advice-counter-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 1rem;
}

.advice-counter-card {
    position: relative;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
    cursor: pointer;
    transition: box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease;
}

.advice-counter-card.d-none {
    display: none !important;
}

.advice-counter-card:hover {
    box-shadow: var(--ui-shadow-hover);
    transform: translateY(-1px);
}

.advice-counter-card.active {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 3px var(--ui-primary-tint);
}

.advice-counter-card-header {
    margin-bottom: .5rem;
    padding-right: 36px;
}

.advice-counter-card-title {
    margin: 0;
    overflow-wrap: anywhere;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ui-muted);
}

.advice-counter-card-value {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
}

.advice-counter-card .advice-counter-card-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--ui-subtle);
    color: var(--ui-muted);
    font-size: .75rem;
    padding: 7px;
    box-sizing: border-box;
    overflow: visible;
}

.advice-counter-card.active .advice-counter-card-icon {
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
}

@media (prefers-reduced-motion: reduce) {
    .advice-counter-card:hover {
        transform: none;
    }
}

/* Rows that need attention (late / due soon): the row's own pill ("Late") says why; no tint or accent bar, so
   tables stay calm and every row reads the same */

/* Batch rows by workflow status (FC batches): accent bar + faint tint, the workflow column says which */
#datatable-batches tbody tr.batch-status-pending > td:first-child { box-shadow: inset 3px 0 0 var(--ui-primary); }
#datatable-batches tbody tr.batch-status-pending.batch-assigned > td:first-child { box-shadow: inset 3px 0 0 var(--ui-purple); }
#datatable-batches tbody tr.batch-status-picking > td:first-child,
#datatable-batches tbody tr.batch-status-picked > td:first-child,
#datatable-batches tbody tr.batch-status-packing > td:first-child { box-shadow: inset 3px 0 0 var(--ui-warning); }
#datatable-batches tbody tr.batch-status-shipped > td:first-child { box-shadow: inset 3px 0 0 var(--ui-success); }
#datatable-batches tbody tr.batch-status-pending > td { background: color-mix(in srgb, var(--ui-primary-tint) 35%, transparent); }
#datatable-batches tbody tr.batch-status-pending.batch-assigned > td { background: color-mix(in srgb, var(--ui-purple-tint) 35%, transparent); }
#datatable-batches tbody tr.batch-status-picking > td,
#datatable-batches tbody tr.batch-status-picked > td,
#datatable-batches tbody tr.batch-status-packing > td { background: color-mix(in srgb, var(--ui-warning-tint) 35%, transparent); }
#datatable-batches tbody tr.batch-status-shipped > td { background: color-mix(in srgb, var(--ui-success-tint) 35%, transparent); }

/* Inline field errors (auth forms, onboarding steps): red border + short message under the field */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--ui-danger);
    background-image: none;
    box-shadow: 0 0 0 3px var(--ui-danger-tint);
}

.form-check-input.is-invalid {
    border-color: var(--ui-danger);
}

.cd-field-error {
    margin: 0.25rem 0 0.5rem;
    font-size: 0.8rem;
    color: var(--ui-danger);
}

/* Fields that carry their own bottom margin: pull the message up under the field */
.input-group.mb-3 + .cd-field-error,
.login-form-card .form-floating.mb-3 + .cd-field-error {
    margin-top: -0.65rem;
    margin-bottom: 0.85rem;
}

.login-form-card .form-inner-group .form-floating + .cd-field-error {
    margin: 0.35rem 0 0.5rem;
}

/* Label above a value in detail panels (order modal: seller + FC) */
.oo-meta-label {
    display: block;
    margin-bottom: 2px;
    font-size: .72rem;
    font-weight: 500;
    color: var(--ui-muted);
}

/* Pick & pack order rows (seller + FC): one table per product group; a fixed layout keeps the
   columns aligned from group to group */
.handle-order-table {
    table-layout: fixed;
}

table.handle-order-table td,
table.handle-order-table.dataTable tbody td {
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 6px 8px;
}

.handle-order-table td:nth-child(1) { width: 44px; }
.handle-order-table td:nth-child(2) { width: 120px; }
.handle-order-table td:nth-child(3) { width: 27%; font-variant-numeric: tabular-nums; }
.handle-order-table td:nth-child(4) { width: 18%; }
.handle-order-table td:last-child { width: 220px; text-align: right; }

/* done / expected pill (CD.cell.progress) with an optional label line */
.ui-progress-cell {
    flex-direction: column;
    gap: 0;
    padding: 4px 10px;
    border-radius: var(--ui-radius-sm);
    line-height: 1.3;
    text-align: center;
}

.ui-progress-cell__label {
    font-size: var(--ui-fs-2xs);
    font-weight: 500;
    opacity: .85;
}

/* Child-row toggle (CD.cell.expander) */
.ui-expander {
    display: inline-flex;
    color: var(--ui-muted);
    transition: transform var(--ui-ease);
}

tr.shown .ui-expander,
tr.dt-hasChild.shown .ui-expander {
    transform: rotate(90deg);
}

/* Stock advice cell (CD.cell.advice): icon tile + advice text, red tile and marker when urgent */
.ui-advice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 240px;
    color: var(--ui-text);
    font-weight: 500;
}

.ui-advice__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-subtle);
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
}

.ui-advice__body {
    line-height: 1.4;
    padding-top: 3px;
}

.ui-advice__body a[onclick^="getStockAdviceExplanation"] {
    color: var(--ui-body);
    font-weight: 400;
    text-decoration: underline;
    text-decoration-color: var(--ui-border-strong);
    text-underline-offset: 2px;
}

.ui-advice.is-urgent .ui-advice__icon {
    background: var(--ui-danger-tint);
    color: var(--ui-danger);
}

.ui-advice__urgent {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 6px;
    padding: 1px 7px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-danger-tint);
    color: var(--ui-danger);
    font-size: var(--ui-fs-2xs);
    font-weight: 600;
}

/* Row selection (CD.cell.select) and the select-all box in the header: one size */
.ui-row-select,
table thead .custom-checkbox .form-check-input[type="checkbox"] {
    width: 1.15em;
    height: 1.15em;
    margin: 0;
    vertical-align: middle;
}

/* ---------- DataTables server-side loading overlay (shown by the shell's preXhr/draw handlers) ---------- */
.cd-dt-overlay-target {
    position: relative;
}

.cd-dt-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--ui-white-rgb), .55);
    backdrop-filter: blur(1px);
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

.cd-dt-loading-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

body[data-theme=dark] .cd-dt-loading-overlay {
    background: rgba(var(--ui-ink-rgb), .5);
}

.cd-dt-loading-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: 8px 12px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow);
    color: var(--ui-text);
    font-size: var(--ui-fs-sm);
    font-weight: 500;
}

/* The overlay replaces DataTables' own processing box */
.dataTables_wrapper .dataTables_processing {
    display: none !important;
}

/* ---------- Phases cell (CD.cell.phases): a few steps side by side, each with a thin progress bar ---------- */
.ui-phases {
    display: flex;
    gap: var(--ui-space-2);
    align-items: stretch;
    min-width: 260px;
    max-width: 440px;
    padding: 4px 0;
}

.ui-phases__step {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}

.ui-phases__label {
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-muted);
    line-height: 1.2;
    margin-bottom: 2px;
}

.ui-phases__meta,
.ui-phases__sub {
    font-size: var(--ui-fs-2xs);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-phases__meta {
    color: var(--ui-body);
    min-height: 1.1rem;
    margin-bottom: 3px;
    font-variant-numeric: tabular-nums;
}

.ui-phases__sub {
    color: var(--ui-faint);
    min-height: 1rem;
    margin-top: 3px;
}

.ui-phases__track {
    height: 5px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-track);
    overflow: hidden;
}

.ui-phases__fill {
    height: 100%;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-tone);
    transition: width .25s ease;
}

/* ---------- Inline-edit cell (CD.cell.editable / CD.cell.editInput): a value you edit in place in a table.
   States on .ui-edit-cell: is-editable, is-dirty (unsaved edit: confirm button shows), is-saving,
   is-changed (saved but not pushed yet), is-readonly. ---------- */
.ui-edit-cell {
    min-width: 0;
}

.ui-edit-cell.is-saving {
    opacity: .55;
}

.ui-edit-cell__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 1px 0;
}

.ui-edit-cell__editor {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.ui-edit-cell__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.ui-edit-cell__field {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 76px;
    padding: 3px 7px;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
    cursor: text;
}

body[data-theme=dark] .ui-edit-cell__field {
    background: var(--ui-subtle);
    border-color: var(--ui-border);
}

.ui-edit-cell.is-editable:hover .ui-edit-cell__field--standalone {
    border-color: var(--ui-primary-line);
    box-shadow: 0 0 0 2px var(--ui-primary-tint);
}

.ui-edit-cell.is-dirty .ui-edit-cell__field--standalone,
.ui-edit-cell__field--standalone:focus-within {
    border-color: var(--ui-primary);
    box-shadow: var(--ui-focus-ring);
}

.ui-edit-cell.is-changed .ui-edit-cell__field--standalone {
    border-color: rgba(var(--ui-warning-rgb), .55);
    box-shadow: 0 0 0 2px var(--ui-warning-tint);
}

.ui-edit-cell__field .currency-prefix {
    flex: 0 0 .75rem;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    user-select: none;
}

.ui-edit-cell__input {
    width: 100%;
    min-width: 44px;
    max-width: 68px;
    min-height: max(24px, var(--ui-tap-min, 0px));
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--ui-text);
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-align: right;
    -moz-appearance: textfield;
}

.ui-edit-cell__input::-webkit-outer-spin-button,
.ui-edit-cell__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ui-edit-cell__hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 12px;
    font-size: .5rem;
    color: var(--ui-muted);
    opacity: 0;
    transition: opacity .15s ease, color .15s ease;
}

.ui-edit-cell.is-editable:hover .ui-edit-cell__hint,
.ui-edit-cell.is-editable .ui-edit-cell__field:focus-within .ui-edit-cell__hint,
.ui-edit-cell.is-dirty .ui-edit-cell__hint {
    opacity: .65;
    color: var(--ui-primary);
}

.ui-edit-cell__confirm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    min-width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ui-success);
    color: var(--ui-on-primary);
    font-size: .65rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: scale(.8);
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}

.ui-edit-cell.is-dirty .ui-edit-cell__confirm {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.ui-edit-cell__confirm:hover {
    filter: brightness(.95);
}

.ui-edit-cell__confirm:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--ui-success-rgb), .35);
}

.ui-edit-cell.is-saving .ui-edit-cell__confirm {
    pointer-events: none;
}

.ui-edit-cell.is-saving .ui-edit-cell__confirm i {
    display: none;
}

.ui-edit-cell.is-saving .ui-edit-cell__confirm::after {
    content: '';
    width: 12px;
    height: 12px;
    border: 2px solid rgba(var(--ui-white-rgb), .35);
    border-top-color: var(--ui-on-primary);
    border-radius: 50%;
    animation: ui-edit-cell-spin .65s linear infinite;
}

@keyframes ui-edit-cell-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- Logo preview (branding settings): the logo on the background it is made for ---------- */
.ui-logo-preview {
    display: block;
    width: 100%;
    max-width: 280px;
    padding: 12px 8px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-logo-bg);
    object-fit: contain;
}

.ui-logo-preview--dark {
    background: rgb(var(--ui-ink-rgb));
    border-color: rgb(var(--ui-ink-rgb));
}

/* ---------- Sub-rows (bundle contents under their bundle line): indented with a connector ---------- */
/* Same background as their bundle line: the indent and connector show the hierarchy, and no divider
   runs between a bundle line and its parts or between the parts, so they read as one group */
/* (style.css draws an !important dotted top border on every .dataTable cell) */
table > tbody > tr.ui-subrow > td {
    background: transparent;
    border-top: 0 !important;
    padding-top: 6px;
    padding-bottom: 6px;
}

table > tbody > tr:has(+ tr.ui-subrow) > td {
    border-bottom-color: transparent;
    padding-bottom: 8px;
}

/* One tree line: it starts under the bundle's 40px thumbnail, runs down past every part ("├") and
   turns into the last part ("└"). It is drawn on the item cell (td), whose top and bottom are the row
   edges, so the segments always meet; the product block inside is vertically centred, like the thumbs.
   x = 12px cell padding + 20px (thumbnail centre) - 1px (half the line). */
table > tbody > tr:has(+ tr.ui-subrow) > td:has(> .ui-cell-product .ui-thumb),
table > tbody > tr.ui-subrow > td:has(> .ui-cell-product) {
    position: relative;
}

table > tbody > tr:has(+ tr.ui-subrow) > td:has(> .ui-cell-product .ui-thumb)::after {
    content: '';
    position: absolute;
    left: 31px;
    top: calc(50% + 24px);
    bottom: 0;
    border-left: 2px solid var(--ui-border-strong);
}

tr.ui-subrow .ui-cell-product {
    padding-left: 44px;
}

table > tbody > tr.ui-subrow > td:has(> .ui-cell-product)::before {
    content: '';
    position: absolute;
    left: 31px;
    top: 0;
    width: 19px;
    height: calc(50% + 1px);
    border-left: 2px solid var(--ui-border-strong);
    border-bottom: 2px solid var(--ui-border-strong);
    border-bottom-left-radius: 6px;
}

table > tbody > tr.ui-subrow:has(+ tr.ui-subrow) > td:has(> .ui-cell-product)::after {
    content: '';
    position: absolute;
    left: 31px;
    top: 50%;
    bottom: 0;
    border-left: 2px solid var(--ui-border-strong);
}

tr.ui-subrow .ui-cell-product .ui-thumb {
    width: 32px;
    height: 32px;
}

tr.ui-subrow .ui-item__title {
    font-weight: 500;
}

/* Status cell with a muted second line (e.g. the pick location) */
.ui-status-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
}

.ui-status-cell .ui-item__meta {
    white-space: normal;
}

/* Small label next to an item title (e.g. Bundle) */
.ui-item__title + .ui-item__tag {
    margin: 2px 0 1px;
}

/* ---------- Timeline (order history and other event logs): dots on a line, title + time, optional details ---------- */
.ui-timeline-card {
    padding: 14px 14px 8px;
}

.ui-timeline-card__title {
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-muted);
    margin-bottom: 10px;
}

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

.ui-timeline__item {
    position: relative;
    padding: 0 0 12px 18px;
}

/* the line between dots */
.ui-timeline__item::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 12px;
    bottom: -2px;
    width: 2px;
    background: var(--ui-border);
}

.ui-timeline__item:last-child::before {
    display: none;
}

/* the dot */
.ui-timeline__item::after {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ui-surface);
    border: 2px solid var(--ui-primary);
}

.ui-timeline__item:last-child::after {
    background: var(--ui-primary);
}

.ui-timeline__head {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    color: inherit;
}

button.ui-timeline__head {
    cursor: pointer;
}

.ui-timeline__title {
    display: block;
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    color: var(--ui-text);
    line-height: 1.3;
}

.ui-timeline__chevron {
    margin-left: 6px;
    font-size: .65em;
    color: var(--ui-faint);
    transition: transform var(--ui-ease);
}

.ui-timeline__head[aria-expanded="true"] .ui-timeline__chevron {
    transform: rotate(180deg);
}

.ui-timeline__count {
    font-weight: 500;
    color: var(--ui-muted);
}

.ui-timeline__time {
    display: block;
    margin-top: 1px;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    font-variant-numeric: tabular-nums;
}

.ui-timeline__detail {
    margin: 6px 0 0;
    padding: 6px 8px;
    border-radius: var(--ui-radius-xs);
    background: var(--ui-subtle);
    font-size: var(--ui-fs-xs);
    color: var(--ui-body);
    overflow-wrap: anywhere;
}

/* ---------- Product option in pickers and autocompletes (CD.cell.productOption) ---------- */
.ui-pick-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    white-space: normal;
}

.ui-pick-option .ui-thumb {
    width: 34px;
    height: 34px;
    background: var(--ui-logo-bg);
}

.ui-pick-option__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ui-pick-option__title {
    font-weight: 600;
    font-size: var(--ui-fs-sm);
    color: var(--ui-text);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

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

/* In a selected/highlighted dropdown row the text stays readable */
.select2-results__option--highlighted .ui-pick-option__title,
.dropdown-item.active .ui-pick-option__title,
.ui-state-active .ui-pick-option__title {
    color: inherit;
}

.select2-results__option--highlighted .ui-pick-option__meta,
.dropdown-item.active .ui-pick-option__meta,
.ui-state-active .ui-pick-option__meta {
    color: inherit;
    opacity: .8;
}

/* ---------- Quantity stepper (bootstrap TouchSpin) ----------
   Rendered as one horizontal pill: [−] value [+]. TouchSpin keeps its vertical-button DOM (page scripts
   walk it), the wrappers are flattened with display: contents and the buttons reordered around the value.
   Pages that colour the buttons by state (btn-danger / btn-warning / btn-success while scanning) get a
   soft tint, and a complete line gets a green outline. */
.ui-stepper .bootstrap-touchspin {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: auto;
    height: 40px;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    overflow: hidden;
}

.ui-stepper .bootstrap-touchspin:has(.btn-success) {
    border-color: var(--ui-success);
    box-shadow: 0 0 0 1px var(--ui-success);
}

.ui-stepper .bootstrap-touchspin .form-control,
.ui-stepper .bootstrap-touchspin input {
    order: 1;
    width: 44px;
    height: 100%;
    min-height: 0;
    padding: 0 2px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    color: var(--ui-text);
    font-size: var(--ui-fs-lg);
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.ui-stepper .bootstrap-touchspin-vertical-button-wrapper,
.ui-stepper .input-group-btn-vertical {
    display: contents;
}

.ui-stepper .input-group-btn-vertical > .btn {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--ui-subtle);
    color: var(--ui-text);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
}

.ui-stepper .input-group-btn-vertical > .bootstrap-touchspin-down {
    order: 0;
    border-right: 1px solid var(--ui-border);
}

.ui-stepper .input-group-btn-vertical > .bootstrap-touchspin-up {
    order: 2;
    border-left: 1px solid var(--ui-border);
}

.ui-stepper .input-group-btn-vertical > .btn:hover:not(:disabled) {
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
}

.ui-stepper .input-group-btn-vertical > .btn:disabled {
    opacity: .45;
}

.ui-stepper .input-group-btn-vertical > .btn-danger {
    background: var(--ui-subtle) !important; /* beats the legacy .btn-danger !important fill in style.css */
    color: var(--ui-text) !important;
}

.ui-stepper .input-group-btn-vertical > .btn-warning {
    background: var(--ui-warning-tint) !important; /* beats the legacy .btn-warning !important fill in style.css */
    color: var(--ui-warning-text) !important;
}

.ui-stepper .input-group-btn-vertical > .btn-success {
    background: var(--ui-success-tint) !important; /* beats the legacy .btn-success !important fill in style.css */
    color: var(--ui-success-text) !important;
}

.ui-stepper .input-group-btn-vertical > .btn-danger,
.ui-stepper .input-group-btn-vertical > .btn-warning,
.ui-stepper .input-group-btn-vertical > .btn-success {
    border-color: var(--ui-border) !important;
}

.ui-stepper .input-group-btn-vertical i {
    position: static;
    font-size: .8rem;
}

/* "/ 3" next to the stepper: the target quantity; the page colours it by scan state */
.ho-order-qty-total {
    font-size: var(--ui-fs-md);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Pack screen order actions: in a narrow column the secondary actions drop their labels (title +
   aria-label stay) so the bar keeps to one row */
.handle-order-actions-bar {
    container-type: inline-size;
}

@container (max-width: 720px) {
    .handle-order-actions .handle-order-action-desktop > span {
        display: none;
    }

    .handle-order-actions .handle-order-action-desktop {
        width: 2rem;
        padding-inline: 0;
    }
}

/* Table row that is shown for context but cannot be acted on (shipped line, line fulfilled elsewhere) */
.table tr.ui-row-muted > td {
    opacity: .4;
}

/* ---------- Order lines in a table cell (UiCells::lines) ---------- */
.ui-lines {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
    min-width: 220px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

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

.ui-lines__item .ui-thumb {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.ui-lines__qty {
    flex-shrink: 0;
    min-width: 1.75rem;
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
}

.ui-lines__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.ui-lines__title {
    overflow: hidden;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    color: var(--ui-text);
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 320px;
}

.ui-lines__title a {
    color: inherit;
}

.ui-lines__title a:hover {
    color: var(--ui-primary);
}

.ui-lines__meta {
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
}

.ui-lines__item.is-muted .ui-thumb,
.ui-lines__item.is-muted .ui-lines__qty,
.ui-lines__item.is-muted .ui-lines__title {
    opacity: .55;
}

.ui-lines__item.is-done .ui-lines__title {
    text-decoration: line-through;
}

.ui-lines__note {
    font-style: normal;
}

/* Container filled by script: takes no space (or margin) while it has no content */
.ui-hide-empty:empty {
    display: none;
}

/* ---------- B2B order panel (open order modal, B2B pick & pack): fields, pallets, document downloads ---------- */
.open-order-b2b-panel {
    border: 1px solid var(--ui-border);
}

.open-order-b2b-panel-title,
.open-order-b2b-subtitle {
    color: var(--ui-text);
    font-size: var(--ui-fs-sm);
    font-weight: 600;
}

.open-order-b2b-field-label {
    display: block;
    margin-bottom: 2px;
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
}

.open-order-b2b-field-value {
    color: var(--ui-text);
    font-weight: 500;
    word-break: break-word;
}

.open-order-b2b-pallets-list {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
}

.open-order-b2b-pallet-card {
    padding: var(--ui-space-3) var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
}

.open-order-b2b-pallet-card-title {
    margin-bottom: 4px;
    color: var(--ui-text);
    font-weight: 600;
}

.open-order-b2b-pallet-card-meta {
    margin-bottom: var(--ui-space-2);
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
}

.open-order-b2b-pallet-item {
    display: flex;
    justify-content: space-between;
    gap: var(--ui-space-3);
    padding: 6px 0;
    border-top: 1px solid var(--ui-border);
}

.open-order-b2b-pallet-item:first-child {
    padding-top: 0;
    border-top: 0;
}

.open-order-b2b-pallet-item-title {
    color: var(--ui-text);
    font-size: var(--ui-fs-sm);
}

.open-order-b2b-pallet-item-qty {
    color: var(--ui-text);
    font-weight: 600;
    white-space: nowrap;
}

.open-order-b2b-documents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--ui-space-2);
}

.open-order-b2b-doc-link {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    min-height: 44px;
    padding: var(--ui-space-2) var(--ui-space-3);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    color: var(--ui-text);
    text-decoration: none;
    transition: border-color var(--ui-ease), background-color var(--ui-ease);
}

.open-order-b2b-doc-link:hover,
.open-order-b2b-doc-link:focus-visible {
    border-color: var(--ui-primary);
    background: var(--ui-primary-tint);
    color: var(--ui-text);
}

.open-order-b2b-doc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
    font-size: var(--ui-fs-sm);
}

.open-order-b2b-doc-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.open-order-b2b-doc-title {
    overflow: hidden;
    color: var(--ui-text);
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.open-order-b2b-doc-hint {
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
}

.open-order-b2b-doc-arrow {
    flex-shrink: 0;
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
}

.open-order-b2b-doc-link:hover .open-order-b2b-doc-arrow {
    color: var(--ui-primary);
}

/* Shipment options panel: action rows (cancel order, correction email, …) get a compact tinted icon */
.shipment-option-button--action .shipment-option-icon {
    width: 36px;
    height: 36px;
    margin-right: var(--ui-space-1);
    padding: 0;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-subtle);
    font-size: 1.15rem;
}

.shipment-option-button--action .shipment-option-icon:has(.text-danger) {
    background: var(--ui-danger-tint);
}

.shipment-option-button--action .shipment-option-icon:has(.text-warning) {
    background: var(--ui-warning-tint);
}

.shipment-option-button--action .shipment-option-icon:has(.text-success) {
    background: var(--ui-success-tint);
}

.shipment-option-button--action .shipment-option-icon:has(.text-info, .text-primary) {
    background: var(--ui-primary-tint);
}

.shipment-option-button--action .shipment-option-text {
    font-weight: 600;
}

.shipment-options-empty {
    padding: var(--ui-space-5) var(--ui-space-4);
    border: 1px dashed var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
}

/* ---------- Pick & pack landing: a product group card with its orders underneath ---------- */
.ui-pick-group {
    margin-bottom: var(--ui-space-3);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    overflow: hidden;
}

.ui-pick-group__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-2) var(--ui-space-5);
    padding: var(--ui-space-3) var(--ui-space-4) var(--ui-space-2);
    cursor: pointer;
    transition: background-color var(--ui-ease);
}

.ui-pick-group__head:hover {
    background: var(--ui-primary-tint);
}

.ui-pick-group__products {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: var(--ui-space-2) var(--ui-space-5);
    min-width: 0;
}

.ui-pick-group__product {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    min-width: 0;
    max-width: 420px;
}

.ui-pick-group__product .ui-thumb {
    width: 40px;
    height: 40px;
    background: var(--ui-surface);
}

.ui-pick-group__qty {
    flex-shrink: 0;
    min-width: 2rem;
    padding: 2px 6px;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-subtle);
    color: var(--ui-text);
    font-size: var(--ui-fs-sm);
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ui-pick-group__product .ui-item__title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ui-pick-group__loc {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ui-primary);
    font-weight: 600;
}

.ui-pick-group__loc i {
    font-size: .7em;
}

.ui-pick-group__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ui-pick-group .handle-order-table {
    width: 100%;
    margin: 0;
}

.ui-pick-group .handle-order-table thead th {
    padding: 8px 8px 4px;
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
}

.ui-pick-group .handle-order-table tbody tr {
    cursor: pointer;
    border-top: 1px solid var(--ui-border);
    transition: background-color var(--ui-ease);
}

.ui-pick-group .handle-order-table thead + tbody tr:first-child,
.ui-pick-group .handle-order-table tbody tr:first-child {
    border-top: 0;
}

.ui-pick-group .handle-order-table tbody tr:hover {
    background: var(--ui-row-hover);
}

.ui-pick-group .handle-order-table td {
    padding: 8px;
    vertical-align: middle;
    font-size: var(--ui-fs-sm);
}

.ui-pick-group .handle-order-table td:nth-child(1) { width: 52px; padding-left: var(--ui-space-4); }
.ui-pick-group .handle-order-table td:nth-child(2) { width: 19%; }
.ui-pick-group .handle-order-table td:nth-child(3) { width: 17%; color: var(--ui-muted); }
.ui-pick-group .handle-order-table td:nth-child(4) { width: auto; white-space: normal; }

/* Below 1200px the channel order id moves under the order number instead of being cut off */
@media (max-width: 1199.98px) {
    .ui-pick-group .handle-order-table td:nth-child(2),
    .ui-pick-group .handle-order-table td:nth-child(3) {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .ui-pick-group__order small {
        display: block;
        margin-left: 0;
    }
}
.ui-pick-group .handle-order-table td:nth-child(5) { width: 110px; }
.ui-pick-group .handle-order-table td:last-child { width: 180px; padding-right: var(--ui-space-4); }

/* Selected (claimed by me) and claimed-by-someone-else rows */
.ui-pick-group .handle-order-table tbody tr:has(.switchInput:checked) {
    background: var(--ui-primary-tint);
}

.ui-pick-group .handle-order-table tbody tr:has(.switchInput:disabled) > td:not(:nth-child(5)) {
    opacity: .5;
}

.ui-pick-group__aside {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-2);
    margin-left: auto;
}

.ui-pick-group__count {
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    white-space: nowrap;
}

.ui-pick-group__select {
    font-weight: 600;
}


.ui-pick-group__order {
    font-weight: 600;
    color: var(--ui-text);
}

.ui-pick-group__order small {
    margin-left: 4px;
    color: var(--ui-muted);
    font-weight: 400;
}

/* Quantity + reference chip (pickQtyChipHtml) */
.ui-qty-chip {
    --tag-color: var(--ui-success);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 1px 4px 1px 0;
    padding: 1px 8px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    white-space: nowrap;
}

.ui-qty-chip b {
    color: var(--tag-color);
    font-weight: 700;
}

.ui-qty-chip--info { --tag-color: var(--ui-info); }
.ui-qty-chip--purple { --tag-color: var(--ui-purple); }
.ui-qty-chip--warning { --tag-color: var(--ui-warning); }
.ui-qty-chip--danger { --tag-color: var(--ui-danger); }
.ui-qty-chip--success { --tag-color: var(--ui-success); }

/* ---------- Pick screen card (carousel + list): count, location, title, identifiers ---------- */
.ui-pick-card {
    max-width: 500px;
    margin: 0 auto;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg, var(--ui-radius));
    box-shadow: var(--ui-shadow);
}

.ui-pick-card .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ui-space-3);
    padding: var(--ui-space-5);
    text-align: center;
}

.ui-pick-card__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ui-space-3);
    margin-top: 48px; /* room for the product image that overlaps the card top */
}

.ui-pick-card__count {
    color: var(--ui-text);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ui-pick-card__total {
    margin-left: 6px;
    color: var(--ui-muted);
    font-size: 1.5rem;
    font-weight: 500;
}

.ui-pick-card__title {
    margin: 0;
    color: var(--ui-text);
    font-size: var(--ui-fs-lg);
    font-weight: 600;
    line-height: 1.3;
}

/* Stock location to pick from: the first thing a picker reads */
.ui-pick-loc {
    --tag-color: var(--ui-success);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid color-mix(in srgb, var(--tag-color) 35%, transparent);
    border-radius: var(--ui-radius-pill);
    background: color-mix(in srgb, var(--tag-color) 12%, transparent);
    color: var(--ui-text);
    font-size: var(--ui-fs-lg);
    font-weight: 700;
}

.ui-pick-loc i {
    color: var(--tag-color);
    font-size: .85em;
}

.ui-pick-loc--warning { --tag-color: var(--ui-warning); }
.ui-pick-loc--danger { --tag-color: var(--ui-danger); }

.ui-pick-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--ui-space-2);
    width: 100%;
    margin: 0;
    text-align: left;
}

.ui-pick-facts > div {
    min-width: 0;
    padding: var(--ui-space-2) var(--ui-space-3);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-subtle);
}

.ui-pick-facts dt {
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    font-weight: 500;
}

.ui-pick-facts dd {
    margin: 0;
    color: var(--ui-text);
    font-size: var(--ui-fs-md);
    font-weight: 600;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

.ui-pick-facts dd a {
    cursor: pointer;
    color: var(--ui-muted);
}

.ui-pick-facts dd a:hover {
    color: var(--ui-primary);
}

.ui-pick-card .pick-bins-grid {
    justify-content: center;
}

.ui-pick-orders td.ui-pick-orders__lines {
    white-space: normal;
}

.ui-pick-orders__lines .ui-qty-chip {
    max-width: 100%;
    white-space: normal;
}

/* ---------- Pick & pack landing toolbar (sticks to the top on scroll via the page script) ---------- */
.floating-top-handle-order-buttons-wrapper {
    margin-bottom: var(--ui-space-2);
}

.floating-top-handle-order-buttons {
    margin-top: var(--ui-space-4);
    padding: var(--ui-space-3) var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
}

.floating-top-handle-order-buttons[style*="position: fixed"] {
    z-index: 1030;
    border-radius: 0;
    box-shadow: var(--ui-shadow-hover);
}

.floating-top-handle-order-buttons .action-buttons-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-2);
}

.floating-top-handle-order-buttons .action-buttons-container > div {
    display: flex;
}

.floating-top-handle-order-buttons .action-buttons-container > div:last-child {
    margin-left: auto;
}

.floating-top-handle-order-buttons .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-2);
    min-height: var(--ui-control-h);
    padding: 0 var(--ui-space-4);
    font-weight: 600;
}

.floating-top-handle-order-buttons .dropdown-menu {
    z-index: 1031;
}

@media (max-width: 575.98px) {
    .floating-top-handle-order-buttons {
        padding: var(--ui-space-2);
    }

    .floating-top-handle-order-buttons .action-buttons-container {
        flex-wrap: nowrap;
    }

    .floating-top-handle-order-buttons .action-buttons-container > div {
        flex: 1 1 0;
        min-width: 0;
    }

    /* Filters and bulk actions become icon buttons so the bar stays one row */
    .floating-top-handle-order-buttons .action-buttons-container > div.ui-pick-toolbar__end {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: var(--ui-space-1);
        margin-left: 0;
    }

    .floating-top-handle-order-buttons .ui-pick-toolbar__end .btn {
        flex: none;
        width: var(--ui-control-h);
        padding: 0;
    }

    .floating-top-handle-order-buttons .ui-pick-toolbar__end .btn-group {
        width: auto;
    }

    .floating-top-handle-order-buttons .ui-pick-toolbar__end .btn span,
    .floating-top-handle-order-buttons .ui-pick-toolbar__end .dropdown-toggle::after {
        display: none;
    }

    .floating-top-handle-order-buttons .btn,
    .floating-top-handle-order-buttons .btn-group {
        width: 100%;
        padding: 0 var(--ui-space-2);
    }
}

/* Picking screen: "Pick all" under the pick card, and the orders card below it */
.ui-pick-all {
    width: 100%;
    max-width: 500px;
    min-height: 44px;
    margin-top: var(--ui-space-3);
    font-weight: 600;
}

.ui-pick-orders-card {
    margin-top: var(--ui-space-5);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    overflow: hidden;
}

.ui-pick-orders-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-2);
    padding: var(--ui-space-3) var(--ui-space-4);
    border-bottom: 1px solid var(--ui-border);
}

.ui-pick-orders-card__title {
    margin: 0;
    color: var(--ui-text);
    font-size: var(--ui-fs-lg);
    font-weight: 600;
}

.ui-pick-orders {
    margin: 0;
}

.ui-pick-orders td {
    padding: 10px 8px;
    border-color: var(--ui-border);
    vertical-align: middle;
    font-size: var(--ui-fs-sm);
}

.ui-pick-orders tr:last-child td {
    border-bottom: 0;
}

.ui-pick-orders td:first-child {
    width: 48px;
    padding-left: var(--ui-space-4);
}

.ui-pick-orders td:nth-child(2) {
    width: 30%;
    white-space: nowrap;
}

.ui-pick-orders td:last-child {
    padding-right: var(--ui-space-4);
}

.ui-pick-orders__state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ui-warning-tint);
    color: var(--ui-warning-text);
    font-size: .7rem;
}

.ui-pick-orders__state.is-ready {
    background: var(--ui-success-tint);
    color: var(--ui-success-text);
}

/* Phones and tablets: each order row stacks (checkbox | order + customer + lines | picker + status)
   instead of squeezing six cells */
@media (max-width: 991.98px) {
    .ui-pick-group .handle-order-table tbody tr.handle-order-table-tr {
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr) auto;
        align-items: center;
        gap: 4px 8px;
        padding: 10px var(--ui-space-3);
    }

    .ui-pick-group .handle-order-table tr.handle-order-table-tr > td {
        display: block;
        width: auto !important;
        min-width: 0;
        padding: 0 !important;
        border: 0 !important;
    }

    .ui-pick-group .handle-order-table tr.handle-order-table-tr > td:nth-child(1) { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
    .ui-pick-group .handle-order-table tr.handle-order-table-tr > td:nth-child(2) { grid-column: 2; grid-row: 1; }
    .ui-pick-group .handle-order-table tr.handle-order-table-tr > td:nth-child(3) { grid-column: 2; grid-row: 2; }
    .ui-pick-group .handle-order-table tr.handle-order-table-tr > td:nth-child(4) { grid-column: 2 / -1; grid-row: 3; white-space: normal; }
    .ui-pick-group .handle-order-table tr.handle-order-table-tr > td:nth-child(5) { grid-column: 3; grid-row: 1; justify-self: end; }
    .ui-pick-group .handle-order-table tr.handle-order-table-tr > td:nth-child(6) { grid-column: 3; grid-row: 2; justify-self: end; }

    .ui-pick-group__order small {
        display: inline;
        margin-left: 4px;
    }
}

@media (max-width: 575.98px) {
    .ui-pick-group__aside {
        width: 100%;
        margin-left: 0;
    }

    .ui-pick-group__select {
        margin-left: auto;
    }
}

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

.ui-pick-toolbar__summary {
    margin-right: var(--ui-space-2);
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ui-pick-toolbar__summary b {
    color: var(--ui-text);
}

.ui-pick-toolbar__badge {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-surface);
    color: var(--ui-success-text);
    font-size: var(--ui-fs-xs);
    font-weight: 700;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}

.ui-pick-empty,
.ui-pick-loading {
    padding: 56px var(--ui-space-4);
    border: 1px dashed var(--ui-border-strong);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
}

.ui-pick-empty > i:first-child {
    font-size: 1.6rem;
}

.ui-pick-loading p {
    margin-top: var(--ui-space-3);
}

@media (max-width: 575.98px) {
    .ui-pick-toolbar__summary {
        display: none;
    }
}

/* ---------- Picking / packing work bar: back | scan | next ---------- */
.ui-workbar {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(0, 2.4fr) minmax(120px, 1fr);
    align-items: center;
    gap: var(--ui-space-3);
    width: 100%;
    margin-bottom: var(--ui-space-3);
}

.ui-workbar > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-2);
    height: 52px;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    font-size: var(--ui-fs-lg);
    font-weight: 600;
}

.ui-workbar > .btn:hover {
    border-color: var(--ui-primary);
    color: var(--ui-primary);
}

.ui-workbar__count {
    white-space: nowrap;
    padding: 1px 8px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-subtle);
    font-size: var(--ui-fs-sm);
    font-variant-numeric: tabular-nums;
}

.ui-scanbox {
    flex-wrap: nowrap;
    align-items: center;
    height: 52px;
    padding: 4px;
    border: 1px solid var(--ui-field-border);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-surface);
    transition: border-color var(--ui-ease), box-shadow var(--ui-ease);
}

.ui-scanbox:focus-within {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 3px var(--ui-primary-tint);
}

.ui-scanbox > .input-group-prepend,
.ui-scanbox > .input-group-append {
    display: flex;
    margin: 0 !important; /* legacy .input-group-append margin is !important */
}

.ui-scanbox .input-group-text {
    height: 42px;
    padding: 0 4px 0 2px;
    border: 0;
    background: transparent;
}

.ui-scanbox .input-group-text img {
    height: 36px;
}

.ui-scanbox .form-control {
    height: 42px;
    padding: 0 var(--ui-space-3);
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: var(--ui-fs-lg);
}

.ui-scanbox .form-control:focus {
    box-shadow: none;
}

.ui-scanbox .btn {
    height: 42px;
    min-width: 64px;
    padding: 0 20px;
    border-radius: var(--ui-radius-pill) !important; /* the input-group would square its left corners */
    font-weight: 600;
}

/* Under the work bar: location x / y, a progress meter and units picked */
.ui-pick-status {
    display: flex;
    align-items: center;
    gap: var(--ui-space-4);
    width: 100%;
    margin-bottom: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ui-pick-status b {
    color: var(--ui-text);
}

.ui-pick-status__meter.ui-meter {
    flex: 1 1 auto;
    height: 8px;
    margin: 0;
}

.ui-pick-status__meter > span {
    --meter-color: var(--ui-success);
}

/* The pick card carousel: arrows sit next to the card instead of at the page edges */
.ui-pick-stage .carousel {
    max-width: 680px;
    margin: 0 auto;
}

.ui-pick-stage .carousel-control-prev,
.ui-pick-stage .carousel-control-next {
    width: 56px;
    opacity: 1;
}

.ui-pick-stage .carousel-control-prev > .fa,
.ui-pick-stage .carousel-control-next > .fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--ui-border);
    border-radius: 50%;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
    color: var(--ui-text);
    font-size: var(--ui-fs-md);
}

.ui-pick-stage .carousel-control-prev:hover > .fa,
.ui-pick-stage .carousel-control-next:hover > .fa {
    border-color: var(--ui-primary);
    color: var(--ui-primary);
}

.ui-pick-card .pick-bins-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 200px));
}

@media (max-width: 767.98px) {
    .ui-workbar {
        grid-template-columns: 1fr 1fr;
    }

    .ui-workbar__scan {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .ui-workbar > .btn {
        height: 46px;
        font-size: var(--ui-fs-md);
    }

    .ui-pick-status {
        gap: var(--ui-space-2);
        padding: var(--ui-space-2) var(--ui-space-3);
    }
}

/* A pick location that is complete: the green count (and the green bin tile) say "done"; the card keeps its
   normal edge */

.is-picked .ui-pick-card__count {
    color: var(--ui-success-text);
}

/* Carousel arrows: hidden with a single location, faded at the first/last one */
.ui-pick-stage .carousel.is-single .carousel-control-prev,
.ui-pick-stage .carousel.is-single .carousel-control-next {
    display: none;
}

.ui-pick-stage .carousel.is-first .carousel-control-prev,
.ui-pick-stage .carousel.is-last .carousel-control-next {
    opacity: .35;
    pointer-events: none;
}

/* Phones: picking orders stack (state | order, then the lines underneath) */
@media (max-width: 575.98px) {
    .ui-pick-orders,
    .ui-pick-orders tbody {
        display: block;
        width: 100%;
    }

    .ui-pick-orders tr {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 4px 8px;
        padding: 10px var(--ui-space-3);
        border-bottom: 1px solid var(--ui-border);
    }

    .ui-pick-orders tr:last-child {
        border-bottom: 0;
    }

    .ui-pick-orders td {
        display: block;
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .ui-pick-orders td:first-child {
        grid-row: 1 / span 3;
    }

    .ui-pick-orders td:nth-child(n+3) {
        grid-column: 2;
    }

    .ui-pick-orders td:empty {
        display: none;
    }
}

/* Pack screen strip: turbo mode | packing progress | label printer */
.ui-pack-status .switch {
    flex-shrink: 0;
}

.ui-pack-status label {
    color: var(--ui-text);
    font-size: var(--ui-fs-sm);
}

.ui-pack-status #packProgressBar {
    --meter-color: var(--ui-primary);
}

.ui-pack-status .ai-chat-printer {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-2);
    min-width: 0;
}

.ui-pack-status .ai-chat-printer__icon {
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
}

.ui-pack-status .ai-chat-printer__label {
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
}

.ui-pack-status .ai-chat-printer__select .form-select {
    width: auto;
    max-width: 220px;
    min-height: 32px;
    height: 32px;
    padding: 0 1.75rem 0 var(--ui-space-2);
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    text-overflow: ellipsis;
}

@media (max-width: 767.98px) {
    .ui-pack-status {
        flex-wrap: wrap;
    }

    .ui-pack-status .ui-pick-status__meter {
        order: 3;
        flex-basis: 100%;
    }
}

/* On/off switch inside a table cell (e.g. include a stock level in the channel sync) */
.ui-cell-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Packaging in use (pack screen): icon tile, label over value ---------- */
.packaging-hero {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-2);
    max-width: 100%;
    margin: 0;
    padding: 4px var(--ui-space-3) 4px 4px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    text-align: left;
}

.packaging-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
    font-size: var(--ui-fs-sm);
}

.packaging-hero-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.packaging-hero-label {
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
}

.packaging-hero-value {
    color: var(--ui-text);
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.packaging-hero.packaging-hero-empty .packaging-hero-icon {
    background: var(--ui-subtle);
    color: var(--ui-muted);
}

.packaging-hero.packaging-hero-empty .packaging-hero-value {
    color: var(--ui-muted);
    font-weight: 500;
}

/* ---------- Order comment (pack screen, order dialogs): titled card with an inline note field ---------- */
.order-comment-block .order-comment-title {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    margin-bottom: var(--ui-space-2);
    color: var(--ui-text);
    font-size: var(--ui-fs-md);
    font-weight: 600;
    cursor: text;
}

.order-comment-block .order-comment-title i {
    color: var(--ui-muted);
}

.order-comment-block .order-comment-textarea {
    display: block;
    width: 100%;
    min-height: 64px;
    max-height: 12rem;
    padding: var(--ui-space-2) var(--ui-space-3);
    overflow-y: auto;
    resize: vertical;
    border: 1px solid transparent;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-subtle);
    color: var(--ui-text);
    font-size: var(--ui-fs-sm);
    line-height: 1.6;
    box-shadow: none;
}

.order-comment-block .order-comment-textarea:hover {
    border-color: var(--ui-border);
}

.order-comment-block .order-comment-textarea:focus {
    border-color: var(--ui-primary);
    background: var(--ui-surface);
    box-shadow: 0 0 0 3px var(--ui-primary-tint);
}

.order-comment-block .order-comment-textarea::placeholder {
    color: var(--ui-faint);
}

.order-comment-block .order-comment-textarea:disabled {
    cursor: not-allowed;
    opacity: .7;
}

.ui-scanbox--search {
    width: 100%;
    max-width: 560px;
}

/* The legacy wrapper is a fixed 80px box; the horizontal stepper sizes itself */
.ui-stepper .order-product-touchspin-wrapper {
    width: auto;
    padding-right: 0;
}

/* The input sits inside the pill: no fill of its own (dark mode gives inputs one with !important) */
.ui-scanbox .form-control,
body[data-theme=dark] .ui-scanbox .form-control {
    background: transparent !important;
}

/* Phones: the target quantity goes under the stepper */
@media (max-width: 575.98px) {
    .ho-order-qty-control.ui-stepper {
        flex-direction: column;
        gap: 2px;
    }
}

/* ---------- Stock correction dialog (pick screen) ---------- */
.ui-stockfix {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-3);
}

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

.ui-stockfix__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--ui-space-2) var(--ui-space-3);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-subtle);
}

.ui-stockfix__label {
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
}

.ui-stockfix__value {
    color: var(--ui-text);
    font-size: 1.35rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ui-stockfix__value.is-negative {
    color: var(--ui-danger-text);
}

.ui-stockfix__note {
    display: flex;
    gap: var(--ui-space-2);
    margin: 0;
    padding: var(--ui-space-2) var(--ui-space-3);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-info-tint);
    color: var(--ui-text);
    font-size: var(--ui-fs-xs);
    line-height: 1.5;
}

.ui-stockfix__note i {
    margin-top: 2px;
    color: var(--ui-info);
}

.ui-stockfix__question {
    margin-top: var(--ui-space-1);
    color: var(--ui-text);
    font-size: var(--ui-fs-md);
    font-weight: 600;
}

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

/* Selectable option card; the page marks the chosen one with .btn-primary */
.ui-choice.btn {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    width: 100%;
    padding: var(--ui-space-3);
    border: 1px solid var(--ui-border) !important; /* legacy .btn-primary / outline borders are !important */
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    text-align: left;
    white-space: normal;
    box-shadow: none;
}

.ui-choice.btn:hover {
    border-color: var(--ui-primary) !important;
}

.ui-choice.btn.btn-primary {
    border-color: var(--ui-primary) !important;
    background: var(--ui-primary-tint) !important;
    box-shadow: 0 0 0 1px var(--ui-primary);
}

.ui-choice__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-subtle);
    color: var(--ui-muted);
}

.ui-choice.btn-primary .ui-choice__icon {
    background: var(--ui-primary);
    color: var(--ui-on-primary);
}

.ui-choice__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ui-choice__title {
    font-size: var(--ui-fs-md);
    font-weight: 600;
}

.ui-choice__hint {
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    font-weight: 400;
    line-height: 1.4;
}

.ui-stockfix__result {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ui-space-3);
    padding: var(--ui-space-2) var(--ui-space-3);
    border: 1px dashed var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
}

.ui-stockfix__result strong {
    color: var(--ui-text);
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- Shipment option detail (carrier picked on the pack screen) ---------- */
.shipment-option-detail-title {
    margin: var(--ui-space-1) 0 var(--ui-space-3);
    color: var(--ui-text);
    font-size: var(--ui-fs-lg);
    font-weight: 600;
    text-align: center;
}

.shipment-option-detail-specs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ui-space-2);
    margin-bottom: var(--ui-space-4);
    border: 0;
}

.shipment-option-detail-spec,
.shipment-option-detail-spec:not(:last-child) {
    align-items: flex-start;
    gap: 2px;
    padding: var(--ui-space-2) var(--ui-space-3);
    border: 0;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-subtle);
    text-align: left;
}

.shipment-option-detail-spec-label {
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.shipment-option-detail-spec-value {
    color: var(--ui-text);
    font-size: var(--ui-fs-md);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.shipment-option-detail-field-label,
.shipment-option-detail-quantity-label {
    display: block;
    margin-bottom: 4px;
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    font-weight: 500;
}

.shipment-option-detail-footer {
    align-items: flex-end;
}

.shipment-option-detail-quantity {
    width: auto;
}

/* Label count (carrier detail) and return item quantity: the same pill as the pack-screen quantity stepper */
.shipment-option-detail-quantity .bootstrap-touchspin,
.shipment-option-detail-order-option-qty .bootstrap-touchspin,
.return-modal-col-qty .bootstrap-touchspin {
    display: inline-flex;
    flex-wrap: nowrap;
    width: auto;
    height: 44px;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    overflow: hidden;
}

.shipment-option-detail-quantity .bootstrap-touchspin .form-control,
.shipment-option-detail-order-option-qty .bootstrap-touchspin .form-control,
.return-modal-col-qty .bootstrap-touchspin .form-control {
    width: 48px;
    min-height: 0;
    height: 100%;
    padding: 0 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--ui-text);
    font-size: var(--ui-fs-lg);
    font-weight: 700;
    text-align: center;
}

.shipment-option-detail-quantity .bootstrap-touchspin .btn,
.shipment-option-detail-order-option-qty .bootstrap-touchspin .btn,
.return-modal-col-qty .bootstrap-touchspin .btn {
    min-width: 40px;
    min-height: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0 !important; /* TouchSpin buttons get .btn-primary, whose legacy border is !important */
    border-radius: 0 !important;
    background: var(--ui-subtle) !important;
    color: var(--ui-text) !important;
    font-size: 1.1rem;
    font-weight: 600;
}

.shipment-option-detail-quantity .bootstrap-touchspin .btn:hover:not(:disabled),
.shipment-option-detail-order-option-qty .bootstrap-touchspin .btn:hover:not(:disabled),
.return-modal-col-qty .bootstrap-touchspin .btn:hover:not(:disabled) {
    background: var(--ui-primary-tint) !important;
    color: var(--ui-primary) !important;
}

.shipment-option-detail-quantity .bootstrap-touchspin .btn:disabled,
.shipment-option-detail-order-option-qty .bootstrap-touchspin .btn:disabled,
.return-modal-col-qty .bootstrap-touchspin .btn:disabled {
    opacity: .45;
}

.shipment-option-detail-quantity .bootstrap-touchspin-down,
.shipment-option-detail-order-option-qty .bootstrap-touchspin-down,
.return-modal-col-qty .bootstrap-touchspin-down {
    border-right: 1px solid var(--ui-border) !important;
}

.shipment-option-detail-quantity .bootstrap-touchspin-up,
.shipment-option-detail-order-option-qty .bootstrap-touchspin-up,
.return-modal-col-qty .bootstrap-touchspin-up {
    border-left: 1px solid var(--ui-border) !important;
}

.shipment-option-detail-submit .btn {
    min-height: 44px;
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .shipment-option-detail-specs {
        grid-template-columns: 1fr;
    }

    .shipment-option-detail-footer {
        align-items: stretch;
    }
}

/* ---------- Address block (billing / shipping on order screens; formatAddress in seller-center-shared.js) ---------- */
.ui-address-label {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    margin-bottom: var(--ui-space-2);
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
}

.ui-address {
    display: flex;
    flex-direction: column;
    gap: 1px;
    color: var(--ui-text);
    font-size: var(--ui-fs-sm);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.ui-address__name {
    font-weight: 600;
}

.ui-address__contact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--ui-space-2);
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
}

.ui-address__contact a,
.ui-address__contact span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
}

.ui-address__contact a:hover {
    color: var(--ui-primary);
}

/* Next (pack screen) once the order is fully handled: green, with a short pulse to draw the eye */
.ui-workbar > .ui-workbar__next.is-ready {
    border-color: var(--ui-success);
    background: var(--ui-success);
    color: var(--ui-on-primary);
}

.ui-workbar > .ui-workbar__next.is-ready:hover {
    filter: brightness(.95);
}

.ui-workbar__next.is-attention {
    animation: ui-next-pulse 1.4s ease-out 2;
}

@keyframes ui-next-pulse {
    0% { box-shadow: 0 0 0 0 rgba(var(--ui-success-rgb), .55); }
    100% { box-shadow: 0 0 0 14px rgba(var(--ui-success-rgb), 0); }
}

@media (prefers-reduced-motion: reduce) {
    .ui-workbar__next.is-attention {
        animation: none;
    }
}

/* ---------- Return dialog: items head with progress, next step ---------- */
.return-modal-products-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-3);
    color: var(--ui-text);
    font-size: var(--ui-fs-md);
}

.return-progress {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    white-space: nowrap;
}

.return-progress b {
    color: var(--ui-text);
}

.return-progress__meter.ui-meter {
    width: 120px;
    height: 6px;
    margin: 0;
}

.return-progress__meter > span {
    --meter-color: var(--ui-success);
}

.return-next-step {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    margin: 0;
    padding: var(--ui-space-2) var(--ui-space-4);
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-primary-tint);
    color: var(--ui-text);
    font-size: var(--ui-fs-sm);
}

.return-next-step i {
    color: var(--ui-primary);
}

.shipment-option-detail-order-option-qty .bootstrap-touchspin .form-control:disabled,
.return-modal-col-qty .bootstrap-touchspin .form-control:disabled {
    background: transparent;
    color: var(--ui-muted);
}

/* Item outcome picker + Confirm on one line */
.return-modal-col-status .return-status-select {
    min-width: 180px;
}

.return-modal-snippet-select.form-select {
    min-width: 200px;
    padding-right: 2rem;
}

.return-restock-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

/* While restocking is the next step, Restock is the highlighted action in each row */
.modal .return-modal-products.is-restock-step .return-restock-btn.btn {
    border-color: var(--ui-primary) !important; /* legacy .btn-light colours are !important */
    background: var(--ui-primary) !important;
    color: var(--ui-on-primary) !important;
}

/* Phones: each return item becomes a card (product on top, quantity / stock / status underneath) */
@media (max-width: 575.98px) {
    .return-modal-products-table thead {
        display: none;
    }

    .return-modal-products-table,
    .return-modal-products-table tbody {
        display: block;
        width: 100% !important;
    }

    .return-modal-products-table tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: var(--ui-space-2) var(--ui-space-3);
        padding: var(--ui-space-3);
        border-bottom: 1px solid var(--ui-border);
    }

    .return-modal-products-table tbody td {
        display: block;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0 !important;
        border: 0 !important;
        white-space: normal !important;
    }

    .return-modal-products-table tbody td.return-modal-col-item {
        flex: 1 1 100%;
    }
}

.return-restock-btn i {
    color: inherit !important; /* a generic .btn i colour rule would leave the icon grey on the highlighted button */
}

/* ---------- Icon button (card-header and toolbar actions: add, print, wizard) ---------- */
.ui-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    padding: 0;
    border: 0;
    border-radius: var(--ui-radius-sm);
    background: transparent;
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    transition: background-color var(--ui-ease), color var(--ui-ease);
}

.ui-icon-btn:hover,
.ui-icon-btn:focus-visible {
    background: var(--ui-subtle);
    color: var(--ui-text);
}

.ui-icon-btn:focus-visible {
    outline: 0;
    box-shadow: var(--ui-focus-ring);
}

.ui-icon-btn--primary {
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
}

.ui-icon-btn--primary:hover,
.ui-icon-btn--primary:focus-visible {
    background: var(--ui-primary);
    color: var(--ui-on-primary);
}

/* Card header with a title on the left and actions on the right */
.ui-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-3);
    flex-wrap: wrap;
}

.ui-card-head > :first-child {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    min-width: 0;
    margin: 0;
}

.ui-card-head__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-1);
    margin-left: auto;
    max-width: 100%;
}

.ui-card-head__actions > .btn {
    white-space: nowrap;
}

/* Loading block inside a card or panel (replaces ad-hoc spinner + h4) */
.ui-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-2);
    min-height: 96px;
    padding: var(--ui-space-4);
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
}

.ui-loading .spinner-border {
    width: 1.5rem;
    height: 1.5rem;
    border-width: 2px;
}

.ui-loading--lg {
    min-height: 220px;
}

/* ---------- Step cards (wizard flows: one card per step) ---------- */
.ui-step {
    transition: opacity var(--ui-ease), box-shadow var(--ui-ease);
}

.ui-step > .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-3);
}

.ui-step__title {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    margin: 0;
    font-size: var(--ui-fs-md);
    font-weight: 700;
    color: var(--ui-text);
}

.ui-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    background: var(--ui-subtle);
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    font-weight: 700;
}

.ui-step__num .ui-step__check {
    display: none;
}

.content .card.ui-step.active,
.content .card.ui-step.is-active {
    box-shadow: 0 0 0 2px var(--ui-primary-line), var(--ui-shadow);
}

.ui-step.active .ui-step__num,
.ui-step.is-active .ui-step__num {
    background: var(--ui-primary);
    color: var(--ui-on-primary);
}

.ui-step.completed .ui-step__num,
.ui-step.is-done .ui-step__num {
    background: var(--ui-success-tint);
    color: var(--ui-success-text);
}

.ui-step.completed .ui-step__num-text,
.ui-step.is-done .ui-step__num-text {
    display: none;
}

.ui-step.completed .ui-step__check,
.ui-step.is-done .ui-step__check {
    display: inline;
}

.content .card.ui-step.disabled,
.content .card.ui-step.is-locked {
    opacity: .55;
    pointer-events: none;
    box-shadow: none;
}

.ui-step.disabled .ui-step__title,
.ui-step.is-locked .ui-step__title {
    color: var(--ui-muted);
}

/* Wide quantity stepper (horizontal TouchSpin: − value +) */
.ui-qty-wide .bootstrap-touchspin {
    flex-wrap: nowrap;
}

.ui-qty-wide .bootstrap-touchspin .form-control {
    height: 48px;
    text-align: center;
    font-size: var(--ui-fs-xl);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ui-qty-wide .bootstrap-touchspin .btn {
    width: 56px;
    height: 48px;
    font-size: var(--ui-fs-lg);
    font-weight: 700;
}

/* Clickable stat tiles (filters): the active one is marked like a tab */
.ui-stat.is-active,
.ui-stat.active {
    box-shadow: inset 0 -2px 0 var(--ui-primary);
}

.ui-stat.is-active .ui-stat__label,
.ui-stat.active .ui-stat__label {
    color: var(--ui-primary);
}

/* ---------- Location tree (stock sections navigator): guide lines instead of arrow images, one text size ---------- */
#stock_section_navigator > .custom-layer-ul {
    margin: 0;
    padding-left: 0 !important;
}

#stock_section_navigator .custom-layer-ul .custom-layer-ul {
    margin: 0;
    padding-left: 22px !important;
}

#stock_section_navigator .custom-layer-li:before {
    top: 0;
    width: 10px;
    height: 16px;
    margin: 0 0 0 -14px;
    background: none;
    border-left: 1px solid var(--ui-border-strong);
    border-bottom: 1px solid var(--ui-border-strong);
    border-bottom-left-radius: var(--ui-radius-xs);
    filter: none;
}

#stock_section_navigator > .custom-layer-ul > .custom-layer-li:before {
    display: none;
}

#stock_section_navigator .nav-section-row {
    gap: var(--ui-space-1);
    min-height: 32px;
    padding: 2px var(--ui-space-1);
    border-radius: var(--ui-radius-sm);
}

#stock_section_navigator .nav-section-row:hover {
    background: var(--ui-subtle);
}

#stock_section_navigator .nav-section-current > .nav-section-row,
#stock_section_navigator .nav-section-item:has(.nav-section-check:checked) > .nav-section-row {
    background: var(--ui-primary-tint);
}

#stock_section_navigator .nav-section-name {
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    color: var(--ui-text);
}

#stock_section_navigator .nav-section-current > .nav-section-row .nav-section-name {
    font-weight: 700;
    color: var(--ui-primary);
}

#stock_section_navigator .nav-section-grip {
    color: var(--ui-faint);
}

#stock_section_navigator .nav-section-add {
    color: var(--ui-success);
}

/* Warehouse list (stock sections): one row per warehouse, the selected one tinted */
#warehouses_container .btn {
    border: 0 !important;
    background: transparent !important;
    color: var(--ui-text) !important;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    box-shadow: none;
    transform: none;
}

#warehouses_container .btn:hover {
    background: var(--ui-subtle) !important;
}

#warehouses_container .btn.selected-warehouse,
#warehouses_container .btn.selected-warehouse:hover {
    background: var(--ui-primary-tint) !important;
    color: var(--ui-primary) !important;
    font-weight: 700;
}

#warehouses_container .btn strong {
    color: inherit !important;
    font-weight: inherit;
}

/* Read-only inputs that open a picker on click (date range pickers) look like normal fields, not disabled ones */
.form-control[readonly].cursor-pointer:not(:disabled) {
    background-color: var(--ui-surface);
    color: var(--ui-text);
}

/* A label that wraps to two lines must not push its value out of line with the others */
.ui-stat-strip .ui-stat {
    justify-content: space-between;
}

/* The "nothing found" row is not a data row: no hover tint over the empty state */
.table > tbody > tr > td.dataTables_empty,
.table-hover > tbody > tr:hover > td.dataTables_empty {
    --bs-table-bg-state: transparent;
    --bs-table-accent-bg: transparent;
    background-color: transparent;
    box-shadow: none;
}

/* ---------- Pick & pack order line (UiCells::packLine) ---------- */
.ui-pack-line {
    align-items: center;
    min-width: 0;
}

.ui-pack-line .ui-thumb {
    width: 48px;
    height: 48px;
}

.ui-pack-line .ui-item__text {
    flex: 1 1 auto;
}

.ui-pack-line .ui-note {
    width: fit-content;
    max-width: 100%;
    margin: 6px 0 2px;
}

/* Bundle: parent thumb → part thumb */
.ui-thumbs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.ui-thumbs > i {
    color: var(--ui-faint);
    font-size: var(--ui-fs-2xs);
}

.ui-pack-line .ui-thumbs .ui-thumb--sm,
.ui-thumb--sm {
    width: 32px;
    height: 32px;
}

/* Icon instead of an image (extra shipment and other non-product lines) */
.ui-thumb--primary {
    background: var(--ui-primary-tint);
    border-color: transparent;
    color: var(--ui-primary);
    font-size: var(--ui-fs-md);
}

/* A note that must not be missed (packing instructions): bold, keeps the line breaks */
.ui-note--strong {
    font-size: var(--ui-fs-md);
    font-weight: 700;
    line-height: 1.35;
    box-shadow: inset 0 0 0 1px currentColor;
}

.ui-note--strong > span {
    white-space: pre-wrap;
}

@media (max-width: 575.98px) {
    .ui-pack-line {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .ui-pack-line .ui-thumb {
        width: 36px;
        height: 36px;
    }
}

/* ---------- Facts (label above value, e.g. order details) ---------- */
.ui-fact {
    min-width: 0;
}

.ui-fact__label {
    display: block;
    font-size: var(--ui-fs-xs);
    color: var(--ui-muted);
    line-height: 1.35;
}

.ui-fact__value {
    display: block;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    color: var(--ui-text);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* Label and value on one line (header of a facts block) */
.ui-fact--inline {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.ui-fact--inline .ui-fact__label,
.ui-fact--inline .ui-fact__value {
    display: inline;
}

.ui-facts-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--ui-border);
}

/* ---------- Pick card product image (picking carousel and list) ---------- */
.ui-pick-card__img {
    display: block;
    max-width: 100%;
    height: 100px;
    padding: 10px;
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-hover);
    object-fit: contain;
}

.ui-pick-card__img--float {
    position: relative;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.ui-pick-card__img--sm {
    height: 60px;
}

/* Phones: 16px text in search and tag inputs so iOS does not zoom in while typing or scanning */
@media (max-width: 767.98px) {
    .dataTables_filter input,
    .bootstrap-tagsinput input {
        font-size: 16px;
    }
}

.packaging-hero--info {
    border-color: var(--ui-info-tint);
    background: var(--ui-info-tint);
}

.packaging-hero--info .packaging-hero-icon {
    background: var(--ui-surface);
    color: var(--ui-info);
}

.packaging-hero--danger {
    border-color: var(--ui-danger-soft);
    background: var(--ui-danger-tint);
}

.packaging-hero--danger .packaging-hero-icon {
    background: var(--ui-surface);
    color: var(--ui-danger);
}

/* ---------- Count badge (small number next to an action, e.g. broken items reported) ---------- */
.ui-count {
    display: inline-block;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: var(--ui-radius-xs);
    background: var(--ui-subtle);
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.ui-count--danger {
    background: var(--ui-danger-tint);
    color: var(--ui-danger-text);
}

/* ---------- Table toolbar with a centred item (pack screen: buttons left, packaging tile centred, search right) ---------- */
.dataTables_wrapper .ui-dt-toolbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.dataTables_wrapper .ui-dt-toolbar .dt-buttons {
    float: none;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    margin-bottom: 0;
}

.dataTables_wrapper .ui-dt-toolbar .dt-buttons .btn-group {
    display: inline-flex;
    width: auto;
    text-align: left;
}

.dataTables_wrapper .ui-dt-toolbar .dt-buttons .btn {
    flex: 0 0 auto;
    width: auto;
}

.dataTables_wrapper .ui-dt-toolbar .packaging-hero-wrap {
    position: absolute;
    left: 50%;
    z-index: 1;
    max-width: calc(100% - 2rem);
    transform: translateX(-50%);
    text-align: center;
}

.dataTables_wrapper .ui-dt-toolbar div.dataTables_filter {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    float: none;
    min-width: 0;
    margin: 0 0 0 auto;
    text-align: right;
}

.dataTables_wrapper .ui-dt-toolbar div.dataTables_filter label {
    width: auto;
    margin: 0;
    text-align: left;
}

.dataTables_wrapper .ui-dt-toolbar div.dataTables_filter input {
    width: 220px;
    max-width: 100%;
    margin-left: 0;
}

@media (max-width: 767.98px) {
    .dataTables_wrapper .ui-dt-toolbar .dt-buttons,
    .dataTables_wrapper .ui-dt-toolbar .packaging-hero-wrap,
    .dataTables_wrapper .ui-dt-toolbar div.dataTables_filter {
        position: static;
        flex: 1 1 100%;
        float: none;
        width: 100%;
        margin-left: 0;
        transform: none;
    }

    .dataTables_wrapper .ui-dt-toolbar div.dataTables_filter {
        justify-content: stretch;
    }

    .dataTables_wrapper .ui-dt-toolbar div.dataTables_filter label {
        display: flex;
        align-items: center;
        width: 100%;
    }

    .dataTables_wrapper .ui-dt-toolbar div.dataTables_filter input {
        flex: 1;
        width: 100%;
    }
}

/* ---------- Pack table (order lines on the pack screen): product left, quantity and status tight ---------- */
.ui-pack-table tbody td {
    padding: 10px 8px;
    vertical-align: middle;
}

.ui-pack-table tbody td.ho-order-product-cell,
.ui-pack-table thead th.ho-order-product-col {
    text-align: left !important;
}

.ui-pack-table tbody td.order-product-touchspin-td {
    width: 1%;
    text-align: center !important;
    white-space: nowrap;
}

.ui-pack-table tbody td.ho-order-status-cell {
    width: 1%;
    white-space: nowrap;
}

.ui-pack-table .ho-order-status-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
}

.ui-pack-table .ho-order-status-badge {
    flex-shrink: 0;
}

.ui-pack-table .ho-order-qty-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.ui-pack-table .ho-report-broken-control {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
}

.ui-pack-table .ho-report-broken-btn {
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
    padding: 6px 8px;
}

.dataTables_scrollHead .ui-pack-table thead th,
.ui-pack-table thead th {
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .ui-pack-table tbody td {
        padding: 8px 6px;
    }

    .ui-pack-table .ho-order-status-actions {
        flex-direction: column;
        gap: 4px;
    }

    /* Each order line as a two-line card: product across the full width (it was squeezed to ~100px,
       breaking EAN/SKU mid-word), quantity and status underneath. Column headers no longer line up. */
    .ui-pack-table thead,
    .dataTables_scrollHead:has(.ui-pack-table) {
        display: none;
    }

    .ui-pack-table tbody tr {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas: "product product" "qty status";
        align-items: center;
        gap: 6px 10px;
        padding: 10px 2px;
        border-bottom: 1px solid var(--ui-border);
    }

    .ui-pack-table tbody td,
    .ui-pack-table.dataTable tbody > tr > td {
        display: block;
        width: auto !important;
        padding: 0;
        border: 0 !important; /* the table's dotted row lines would sit between the parts of one line */
    }

    /* the packaging picker sits next to the buttons: full width like them */
    .dataTables_wrapper:has(.ui-pack-table) .packaging-hero-wrap {
        width: 100%;
        margin: 0 0 6px !important;
    }

    .dataTables_wrapper:has(.ui-pack-table) .packaging-hero-wrap > * {
        width: 100%;
    }

    .ui-pack-table tbody td.ho-order-product-cell {
        grid-area: product;
    }

    .ui-pack-table tbody td.order-product-touchspin-td {
        grid-area: qty;
        text-align: left !important;
    }

    .ui-pack-table tbody td.ho-order-status-cell {
        grid-area: status;
        justify-self: end;
    }

    .ui-pack-table .ho-order-status-actions {
        flex-direction: row;
    }

    /* Toolbar above it: Columns, Pack all and the packaging picker as equal full-width rows */
    .dataTables_wrapper:has(.ui-pack-table) .dt-buttons {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        width: 100%;
    }

    .dataTables_wrapper:has(.ui-pack-table) .dt-buttons > *,
    .dataTables_wrapper:has(.ui-pack-table) .dt-buttons > .btn-group > .btn {
        width: 100%;
        margin: 0 !important;
    }
}

/* ---------- Empty state, large (a panel or dialog section with nothing in it yet): icon in a tinted circle ---------- */
.ui-empty--hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 28px 16px;
}

.ui-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--ui-space-3);
    border-radius: 50%;
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
    font-size: 1.35rem;
}

.ui-empty--hero .ui-empty__title {
    margin-bottom: 4px;
    font-size: var(--ui-fs-lg);
}

.ui-empty__text {
    max-width: 420px;
    margin: 0 auto;
    line-height: 1.55;
}

/* ---------- Spreadsheet import (orders, products, stock, prices): upload panel, guide card, required
   columns, AI column mapping status and the mapping control bar. The page prefixes (order-, stock-,
   parent-, product-import-*) are kept as aliases so markup and JS hooks stay as they are. ---------- */
.ui-import-guide-card,
.order-import-guide-card,
.stock-import-guide-card,
.parent-import-guide-card,
.product-import-guide-card {
    margin-bottom: var(--ui-space-3);
    border: 1px solid var(--ui-primary-tint);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
}

.ui-import-guide-icon,
.order-import-guide-icon,
.stock-import-guide-icon,
.parent-import-guide-icon,
.product-import-guide-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--ui-radius);
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
}

.ui-import-guide-title,
.order-import-guide-title,
.stock-import-guide-title,
.parent-import-guide-title,
.product-import-guide-title {
    margin-bottom: 2px;
    color: var(--ui-text);
    font-weight: 600;
}

.ui-import-guide-subtitle,
.order-import-guide-subtitle,
.stock-import-guide-subtitle,
.parent-import-guide-subtitle,
.product-import-guide-subtitle {
    margin-bottom: 0;
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
}

.ui-import-requirements,
.order-import-requirements,
.stock-import-requirements,
.parent-import-requirements,
.product-import-requirements {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
    margin: var(--ui-space-4) 0 0;
}

.ui-import-requirement,
.order-import-requirement,
.stock-import-requirement,
.parent-import-requirement,
.product-import-requirement {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-surface);
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    transition: color var(--ui-ease), border-color var(--ui-ease), background-color var(--ui-ease);
}

.ui-import-requirement i,
.order-import-requirement i,
.stock-import-requirement i,
.parent-import-requirement i,
.product-import-requirement i {
    font-size: var(--ui-fs-2xs);
}

.ui-import-note,
.order-import-note,
.stock-import-note,
.parent-import-note,
.product-import-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: var(--ui-space-3);
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
}

.ui-import-note i,
.order-import-note i,
.stock-import-note i,
.parent-import-note i,
.product-import-note i {
    margin-top: 2px;
    color: var(--ui-primary);
}

.ui-import-control-bar,
.order-import-control-bar,
.stock-import-control-bar,
.parent-import-control-bar,
.product-import-control-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-3);
    margin: var(--ui-space-3) 0 var(--ui-space-4);
    padding: 10px 12px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-subtle);
}

/* Bootstrap 4 checkbox markup (custom-control custom-checkbox + form-check-input + custom-control-label)
   has no Bootstrap 5 styling: the box sat on its own line above the label. Lay it out like .form-check. */
.custom-control.custom-checkbox:not(table *):has(> .form-check-input + label:not(:empty)) {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-height: 0;
    padding-left: 0;
}

.custom-control.custom-checkbox:not(table *):has(> .form-check-input + label:not(:empty)) > .form-check-input {
    float: none;
    flex-shrink: 0;
    margin: 0.15em 0 0;
}

.custom-control.custom-checkbox:not(table *):has(> .form-check-input + label:not(:empty)) > .form-check-input + label {
    margin: 0 !important;
    cursor: pointer;
}

.ui-import-control-bar .custom-control,
.order-import-control-bar .custom-control,
.stock-import-control-bar .custom-control,
.parent-import-control-bar .custom-control,
.product-import-control-bar .custom-control {
    margin: 0 !important;
}

.ui-import-control-actions,
.order-import-control-actions,
.stock-import-control-actions,
.parent-import-control-actions,
.product-import-control-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ui-space-2);
}

.ui-import-clear-all-btn,
.order-import-clear-all-btn,
.stock-import-clear-all-btn,
.parent-import-clear-all-btn,
.product-import-clear-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    border: 1px solid var(--ui-danger-tint);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-danger-tint);
    color: var(--ui-danger-text);
    font-weight: 600;
}

.ui-import-clear-all-btn:hover,
.order-import-clear-all-btn:hover,
.stock-import-clear-all-btn:hover,
.parent-import-clear-all-btn:hover,
.product-import-clear-all-btn:hover {
    border-color: var(--ui-danger-soft);
    background: var(--ui-danger-tint);
    color: var(--ui-danger-text);
}

.ui-import-clear-ai-btn,
.order-import-clear-ai-btn,
.stock-import-clear-ai-btn,
.parent-import-clear-ai-btn,
.product-import-clear-ai-btn {
    display: none;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    border-radius: var(--ui-radius-pill);
}

#order-import-ai-status,
#parent-import-ai-status,
#bundle-import-ai-status,
#child-import-ai-status,
.stock-import-ai-status,
#pim-import-ai-status,
.ui-import-ai-status {
    position: relative;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-4);
    margin: 0 0 var(--ui-space-4);
    padding: 14px 16px;
    overflow: hidden;
    border: 1px solid var(--ui-primary-line);
    border-radius: var(--ui-radius);
    background: var(--ui-primary-tint);
    color: var(--ui-text);
}

#order-import-ai-status::after,
#parent-import-ai-status::after,
#bundle-import-ai-status::after,
#child-import-ai-status::after,
.stock-import-ai-status::after,
#pim-import-ai-status::after,
.ui-import-ai-status::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(var(--ui-white-rgb), .35), transparent);
    transform: translateX(-100%);
    animation: uiImportSweep 1.7s ease-in-out infinite;
    pointer-events: none;
}

#order-import-ai-status .ai-status-icon,
#parent-import-ai-status .ai-status-icon,
#bundle-import-ai-status .ai-status-icon,
#child-import-ai-status .ai-status-icon,
.stock-import-ai-status .ai-status-icon,
#pim-import-ai-status .ai-status-icon,
.ui-import-ai-status .ai-status-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ui-surface);
    color: var(--ui-primary);
}

#order-import-ai-status .ai-status-title,
#parent-import-ai-status .ai-status-title,
#bundle-import-ai-status .ai-status-title,
#child-import-ai-status .ai-status-title,
.stock-import-ai-status .ai-status-title,
#pim-import-ai-status .ai-status-title,
.ui-import-ai-status .ai-status-title {
    font-weight: 600;
}

#order-import-ai-status .ai-status-text,
#parent-import-ai-status .ai-status-text,
#bundle-import-ai-status .ai-status-text,
#child-import-ai-status .ai-status-text,
.stock-import-ai-status .ai-status-text,
#pim-import-ai-status .ai-status-text,
.ui-import-ai-status .ai-status-text {
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
}

#order-import-ai-status.is-done,
#parent-import-ai-status.is-done,
#bundle-import-ai-status.is-done,
#child-import-ai-status.is-done,
.stock-import-ai-status.is-done,
#pim-import-ai-status.is-done,
.ui-import-ai-status.is-done {
    border-color: var(--ui-success-tint);
    background: var(--ui-success-tint);
}

#order-import-ai-status.is-error,
#parent-import-ai-status.is-error,
#bundle-import-ai-status.is-error,
#child-import-ai-status.is-error,
.stock-import-ai-status.is-error,
#pim-import-ai-status.is-error,
.ui-import-ai-status.is-error {
    border-color: var(--ui-danger-tint);
    background: var(--ui-danger-tint);
}

body[data-theme=dark] #order-import-ai-status::after,
body[data-theme=dark] #parent-import-ai-status::after,
body[data-theme=dark] #bundle-import-ai-status::after,
body[data-theme=dark] #child-import-ai-status::after,
body[data-theme=dark] .stock-import-ai-status::after,
body[data-theme=dark] #pim-import-ai-status::after,
body[data-theme=dark] .ui-import-ai-status::after {
    background: linear-gradient(90deg, transparent, rgba(var(--ui-white-rgb), .08), transparent);
}


@keyframes uiImportSweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    #order-import-ai-status::after,
    #parent-import-ai-status::after,
    #bundle-import-ai-status::after,
    #child-import-ai-status::after,
    .stock-import-ai-status::after,
    #pim-import-ai-status::after,
    .ui-import-ai-status::after {
        animation: none;
    }
}

@media (max-width: 767.98px) {
    #order-import-ai-status,
    #parent-import-ai-status,
    #bundle-import-ai-status,
    #child-import-ai-status,
    .stock-import-ai-status,
    #pim-import-ai-status,
    .ui-import-ai-status {
        flex-direction: column;
        align-items: flex-start;
    }

    .ui-import-requirements,
    .order-import-requirements,
    .stock-import-requirements,
    .parent-import-requirements,
    .product-import-requirements {
        flex-direction: column;
    }

    .ui-import-control-bar,
    .order-import-control-bar,
    .stock-import-control-bar,
    .parent-import-control-bar,
    .product-import-control-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .ui-import-control-actions,
    .order-import-control-actions,
    .stock-import-control-actions,
    .parent-import-control-actions,
    .product-import-control-actions {
        justify-content: stretch;
    }

    .order-import-detect-ai-btn,
    .order-import-clear-all-btn,
    .order-import-clear-ai-btn,
    .stock-import-detect-ai-btn,
    .stock-import-clear-all-btn,
    .stock-import-clear-ai-btn,
    .parent-import-detect-ai-btn,
    .parent-import-clear-all-btn,
    .parent-import-clear-ai-btn,
    .product-import-detect-ai-btn,
    .product-import-clear-all-btn,
    .product-import-clear-ai-btn,
    .ui-import-detect-ai-btn,
    .ui-import-clear-all-btn,
    .ui-import-clear-ai-btn {
        width: 100%;
    }
}

/* Upload panel (import dialogs): format chips, dashed drop target */
.cd-import-tabs {
    flex-wrap: nowrap;
    gap: var(--ui-space-2);
    padding-bottom: var(--ui-space-3);
    overflow-x: auto;
    border: 0;
}

.cd-import-tabs .nav-item {
    flex: 0 0 auto;
}

.cd-import-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    font-weight: 600;
}

.cd-import-tabs .nav-link.active {
    border-color: var(--ui-primary-line);
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
}

.cd-import-panel {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
}

.cd-import-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ui-space-4);
    margin-bottom: var(--ui-space-4);
}

.cd-import-panel-title {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    margin-bottom: 6px;
    color: var(--ui-text);
    font-weight: 600;
}

.cd-import-panel-title-text,
.cd-import-upload-title {
    display: block;
    color: var(--ui-text);
    font-weight: 600;
}

.cd-import-panel-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--ui-radius);
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
}

.cd-import-panel-copy {
    margin-bottom: 0;
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    line-height: 1.55;
}

.cd-import-guide-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 12px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.cd-import-guide-link:hover {
    color: var(--ui-primary-hover);
}

.cd-import-format-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: var(--ui-space-4) 0;
}

.cd-import-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
}

.cd-import-chip-warning {
    background: var(--ui-warning-tint);
    color: var(--ui-warning-text);
}

.cd-import-upload-card {
    margin: 0;
}

.cd-import-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.cd-import-upload-target {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--ui-space-3);
    width: 100%;
    min-height: 122px;
    margin: 0;
    padding: 20px;
    border: 2px dashed var(--ui-primary-line);
    border-radius: var(--ui-radius);
    background: var(--ui-primary-tint);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--ui-ease), background-color var(--ui-ease);
}

.cd-import-upload-target:hover,
.cd-import-upload-target.is-dragover {
    border-color: var(--ui-primary);
}

.cd-import-upload-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ui-surface);
    color: var(--ui-primary);
    font-size: var(--ui-fs-lg);
}

.cd-import-upload-subtitle {
    display: block;
    margin-top: 2px;
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
}

@media (max-width: 767.98px) {
    .cd-import-panel-header {
        flex-direction: column;
    }

    .cd-import-upload-target {
        align-items: flex-start;
    }
}


/* ---------- Searchable select (bootstrap-select / ajax-bootstrap-select) ---------- */
.bootstrap-select > .dropdown-toggle {
    border: 1px solid var(--ui-border-strong) !important;
    font-weight: 500;
}

.bootstrap-select.show > .dropdown-toggle,
.bootstrap-select > .dropdown-toggle:focus {
    border-color: var(--ui-primary) !important;
    outline: 0 !important;
}

.bootstrap-select.is-invalid > .dropdown-toggle {
    border-color: var(--ui-danger) !important;
}

.bootstrap-select .dropdown-menu {
    padding: 6px;
    border: 0;
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-pop);
}

/* In a dialog the list always opens below the field, full width (Popper flipped it over the title) */
.modal .bootstrap-select .dropdown-menu {
    inset: 100% auto auto 0 !important;
    min-width: 100% !important;
    max-width: 100%;
    margin-top: 4px;
    transform: none !important;
}

/* Long product labels wrap inside the search dropdown instead of running past the dialog */
.modal .bootstrap-select .dropdown-menu li a {
    white-space: normal;
}

.bootstrap-select .bs-searchbox {
    padding: 0 0 6px;
}

.bootstrap-select .dropdown-item {
    /* flex drops the whitespace text node that wrapped onto an empty extra line */
    display: flex;
    align-items: flex-start;
    padding: 8px 10px;
    border-radius: var(--ui-radius-sm);
    font-size: var(--ui-fs-sm);
    line-height: 1.4;
    white-space: normal;
}

.bootstrap-select .dropdown-item.active,
.bootstrap-select .dropdown-item:active,
.bootstrap-select .dropdown-item.selected {
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
}

.bootstrap-select .dropdown-item small,
.bootstrap-select .dropdown-item .text-muted {
    color: var(--ui-muted);
}

/* ajax-bootstrap-select adds a Bootstrap 3 glyphicon that renders as an empty line */
.bootstrap-select .glyphicon {
    display: none;
}

.bootstrap-select .no-results,
.bootstrap-select .status {
    margin: 2px 0 0;
    padding: 6px 10px;
    border-radius: var(--ui-radius-sm);
    background: transparent;
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    font-style: normal;
}

/* ---------- Quiet stepper (horizontal TouchSpin in forms and dialogs): outline, not two coloured blocks ---------- */
.ui-spin .bootstrap-touchspin {
    flex-wrap: nowrap;
    width: auto;
    height: 38px;
    overflow: hidden;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface) !important;
}

.ui-spin .bootstrap-touchspin .btn {
    width: 36px;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ui-body) !important;
    box-shadow: none;
}

.ui-spin .bootstrap-touchspin .btn:hover {
    background: var(--ui-primary-tint) !important;
    color: var(--ui-primary) !important;
}

.ui-spin .bootstrap-touchspin .form-control {
    height: 100%;
    min-height: 0;
    border: 0;
    border-radius: 0 !important;
    background: transparent;
    box-shadow: none;
    text-align: center;
    font-weight: 600;
}

/* the frame is the control height and everything inside fills it exactly: field rules gave the input a 46px
   min-height inside the 38px frame, so the number sat 5px low and the − / + overflowed */
html body .ui-spin .bootstrap-touchspin {
    height: var(--ui-control-h);
    align-items: stretch;
}
html body .ui-spin .bootstrap-touchspin > .form-control,
html body .ui-spin .bootstrap-touchspin > .input-group-btn > .btn,
html body .ui-spin .bootstrap-touchspin > .btn {
    height: auto !important;
    min-height: 0 !important;
    max-height: none;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
}
html body .ui-spin .bootstrap-touchspin > .input-group-btn {
    display: flex;
}

/* a stepper's − / + are the controls: the browser's own spin arrows would push the value off centre */
:is(.ui-spin, .ui-stepper, .bootstrap-touchspin) input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}
:is(.ui-spin, .ui-stepper, .bootstrap-touchspin) input[type=number]::-webkit-inner-spin-button,
:is(.ui-spin, .ui-stepper, .bootstrap-touchspin) input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ---------- Page settings side panel (#settingsNav) ---------- */
#settingsNav .ui-settings-title {
    padding: 20px 20px 8px;
    color: var(--ui-text);
    font-size: var(--ui-fs-md);
    font-weight: 700;
}

#settingsNav > .form-group.row {
    align-items: center;
    margin: 0;
    padding: 12px 20px !important;
    border-bottom: 1px solid var(--ui-border);
}

#settingsNav > .form-group.row label:not(.switch) {
    margin: 0;
    color: var(--ui-body);
    font-size: var(--ui-fs-sm);
}

/* ---------- Thumb around an image (order lines) and the quantity badge ---------- */
.ui-thumb--md {
    width: 44px;
    height: 44px;
    background: var(--ui-surface);
}

.ui-thumb > img {
    max-width: 82%;
    max-height: 82%;
    object-fit: contain;
}

/* Broken image (cd-ui.js swaps in a blank pixel): neutral tile with a picture icon instead of the browser's broken icon */
/* State class: wins over any page thumb background. Tiles that set the old placeholder PNG as an inline
   background (stacked order-line images) get the same look. */
[style*="no_product_image.png"],
img.ui-img-broken {
    background: var(--ui-subtle) var(--ui-img-placeholder) center / 50% no-repeat !important;
    object-fit: none !important;
}

img.ui-img-broken--sized {
    width: 48px;
    height: 48px;
    border-radius: var(--ui-radius);
}

.ui-thumb > img.ui-img-broken {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
}

/* Quantity pill; its colour comes from getBadgeColorBasedOnQuantity() (more than 1 stands out) */
.ui-qty-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    padding: 0 8px;
    border-radius: var(--ui-radius-pill);
    color: var(--ui-on-primary);
    font-size: var(--ui-fs-xs);
    font-weight: 700;
}

.ui-qty-badge--editable {
    cursor: pointer;
    transition: box-shadow var(--ui-ease);
}

.ui-qty-badge--editable:hover {
    box-shadow: 0 0 0 3px var(--ui-border);
}

/* Column selects while AI maps the spreadsheet: shimmer while detecting, a short pulse when mapped */
select.ai-detecting:is(.order_import_select, .parent_import_select, .bundle_import_select, .child_import_select, .locations_import_select, .surcharge_import_select, .pim-price-import-select, .ui-import-select) {
    background-image: linear-gradient(90deg, var(--ui-primary-tint), var(--ui-success-tint), var(--ui-primary-tint));
    background-size: 200% 100%;
    animation: uiImportShimmer 1.25s linear infinite;
}

select.ai-mapped:is(.order_import_select, .parent_import_select, .bundle_import_select, .child_import_select, .locations_import_select, .surcharge_import_select, .pim-price-import-select, .ui-import-select),
.stock-import-ai-mapped {
    border-color: var(--ui-primary) !important;
    box-shadow: 0 0 0 3px var(--ui-primary-tint);
    animation: uiImportPulse .7s ease;
}

@keyframes uiImportShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes uiImportPulse {
    0% { transform: scale(1); }
    45% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    select.ai-detecting,
    select.ai-mapped,
    .stock-import-ai-mapped {
        animation: none;
    }
}

/* Row the user opened last (rules, templates): tint + accent bar so it is easy to find again */
.table tr.rule-row-last-opened > td {
    background: var(--ui-primary-tint) !important;
}

.table tr.rule-row-last-opened > td:first-child {
    box-shadow: inset 3px 0 0 var(--ui-primary);
}

/* Settings tiles that open a settings page: lift on hover, the icon takes the primary colour */
.hover-card {
    transition: box-shadow var(--ui-ease), transform var(--ui-ease);
}

.hover-card:hover {
    box-shadow: var(--ui-shadow-hover) !important;
    transform: translateY(-2px);
}

.hover-card:hover .text-secondary {
    color: var(--ui-primary) !important;
}

@media (prefers-reduced-motion: reduce) {
    .hover-card:hover {
        transform: none;
    }
}

/* Button that fills up while it counts down to an automatic next step (labels) */
.auto-next-progress-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 0;
    height: 100%;
    background: rgba(var(--ui-white-rgb), .35);
    pointer-events: none;
}

/* Order options on the carrier detail (extra packaging, …): same pill stepper, the label beside it */
.shipment-option-detail-order-option-qty {
    width: auto;
}

.shipment-option-detail-order-option-qty .input-group-btn,
.shipment-option-detail-quantity .input-group-btn {
    display: contents;
}

.shipment-option-detail-order-option-qty .bootstrap-touchspin-down {
    order: 0;
}

.shipment-option-detail-order-option-qty .bootstrap-touchspin .form-control {
    order: 1;
}

.shipment-option-detail-order-option-qty .bootstrap-touchspin-up {
    order: 2;
}

.shipment-option-detail-order-option-label {
    color: var(--ui-text);
    font-size: var(--ui-fs-sm);
    font-weight: 500;
}

/* Carrier detail header: back button, then the carrier name or logo as the panel title */
.shipment-option-detail-header {
    gap: var(--ui-space-3);
    padding-bottom: var(--ui-space-4);
}

.shipment-option-detail-back {
    width: 36px;
    height: 36px;
    border-radius: var(--ui-radius-sm);
    color: var(--ui-muted) !important;
}

.shipment-option-detail-back:hover {
    color: var(--ui-primary) !important;
}

.shipment-option-detail-brand {
    justify-content: flex-start;
    min-height: 36px;
    padding: 0;
}

.shipment-option-detail-carrier-logo {
    justify-content: flex-start;
}

.shipment-option-detail-title-brand,
body[data-theme=dark] .shipment-option-detail-title-brand {
    color: var(--ui-text);
    font-size: var(--ui-fs-lg);
    font-weight: 700;
    text-align: left;
}

/* Filter panels on phones: 16px text (no iOS zoom) and touch-sized fields */
@media (max-width: 767.98px) {
    .filter-section :is(.form-select, .form-control, select) {
        min-height: 44px;
        font-size: 16px;
    }
}

/* ---------- Address autocomplete dropdown (Google Places .pac-*), used wherever an address field has autocomplete ---------- */
.pac-container {
    border: 1px solid rgba(var(--ui-black-rgb), 0.125);
    border-radius: var(--ui-radius-sm);
    box-shadow: var(--ui-shadow-hover);
    font-family: inherit;
    margin-top: 0.5rem;
    padding: 0.5rem 0;
    z-index: 9999 !important;
}

.pac-item {
    border-top: none;
    border-bottom: 1px solid var(--ui-border);
    cursor: pointer;
    font-size: var(--ui-fs-base);
    padding: 0.75rem 1rem;
    transition: background-color 0.15s ease-in-out;
}

.pac-item:first-child {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.pac-item:last-child {
    border-bottom: none;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.pac-item:hover,
    .pac-item-selected {
    background-color: var(--ui-subtle);
}

.pac-item-query {
    color: var(--ui-body);
    font-size: var(--ui-fs-base);
    font-weight: 500;
}

.pac-matched {
    color: var(--ui-primary);
    font-weight: 600;
}

.pac-icon {
    background-image: none !important;
    background-color: transparent !important;
    border-radius: 0;
    height: 20px;
    margin-right: 0.75rem;
    width: 20px;
    position: relative;
}

.pac-icon:before {
    content: "\f3c5";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: var(--ui-fs-lg);
    color: var(--ui-primary);
    line-height: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.pac-icon-marker {
    background-color: transparent !important;
}

.pac-icon-marker:before {
    content: "\f3c5";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: var(--ui-fs-lg);
    color: var(--ui-primary);
    line-height: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.pac-logo:after {
    display: none !important;
}

.pac-container:after {
    display: none !important;
}

/* ---------- Order cell meta line: small flag, channel logo at text height ---------- */
.ui-item__meta .ui-flag {
    width: 16px;
    height: 12px;
    margin-right: 0;
    border-radius: 2px;
    background-size: cover;
    line-height: 12px;
    vertical-align: -1px;
}

.ui-logo-inline {
    display: inline-block;
    width: auto;
    height: 14px;
    max-width: 76px;
    object-fit: contain;
    vertical-align: -2px;
}

/* Logos are drawn for light backgrounds: a small light tile in dark mode */
body[data-theme=dark] .ui-logo-inline {
    height: 18px;
    padding: 2px 4px;
    border-radius: var(--ui-radius-xs);
    background: var(--ui-logo-bg);
    vertical-align: -4px;
}

/* ---------- Filter panel switches (EAN / SKU, Stock / Weight …): the kit segmented toggle look ---------- */
.filter-section .btn-group:has(.btn-check) {
    gap: 0;
    padding: 3px;
    border-radius: var(--ui-radius);
    background: var(--ui-subtle);
}

.filter-section .btn-group .btn-check + .btn {
    flex: 1 1 0;
    min-height: 30px;
    padding: 4px 10px;
    border: 0 !important;
    border-radius: var(--ui-radius-md) !important;
    background: transparent !important;
    box-shadow: none;
    color: var(--ui-muted) !important;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
}

.filter-section .btn-group .btn-check + .btn:hover {
    color: var(--ui-text) !important;
}

.filter-section .btn-group .btn-check:checked + .btn {
    background: var(--ui-surface) !important;
    box-shadow: var(--ui-shadow);
    color: var(--ui-primary) !important;
}

.filter-section .btn-group .btn-check:focus-visible + .btn {
    box-shadow: var(--ui-focus-ring);
}

/* ---------- Wall display (warehouse monitor on a TV): header bar, clock, refresh bar, large stats ---------- */
.ui-display-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--ui-space-4);
    margin-bottom: var(--ui-space-4);
}

.ui-display-head__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.ui-display-head__logo {
    max-width: min(260px, 100%);
    max-height: 56px;
    object-fit: contain;
}

.ui-display-head__by {
    font-size: var(--ui-fs-xs);
    color: var(--ui-faint);
}

.ui-display-head__title {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    font-size: var(--ui-fs-xl);
    font-weight: 700;
    color: var(--ui-text);
    white-space: nowrap;
}

.ui-display-head__title small {
    font-size: var(--ui-fs-md);
    font-weight: 500;
    color: var(--ui-muted);
}

.ui-live-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ui-success);
    box-shadow: 0 0 0 0 rgba(var(--ui-success-rgb), .5);
    animation: ui-live-pulse 2s ease-out infinite;
}

@keyframes ui-live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(var(--ui-success-rgb), .5); }
    70% { box-shadow: 0 0 0 10px rgba(var(--ui-success-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--ui-success-rgb), 0); }
}

.ui-display-head__clock {
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.ui-display-clock {
    font-size: calc(var(--ui-fs-kpi) * 1.6);
    font-weight: 700;
    line-height: 1;
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
}

.ui-refresh-bar {
    width: 120px;
    height: 3px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-subtle);
    overflow: hidden;
}

.ui-refresh-bar > span {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: inherit;
    background: var(--ui-primary);
}

.ui-display-head__hint {
    font-size: var(--ui-fs-2xs);
    color: var(--ui-faint);
}

.ui-stat-strip--display .ui-stat {
    padding: var(--ui-space-4) var(--ui-space-4);
    gap: 6px;
}

.ui-stat-strip--display .ui-stat__label {
    font-size: var(--ui-fs-sm);
}

/* A currency symbol sits against its amount ("€37,56"), not a gap away like a unit */
.ui-stat__value > .ui-stat__currency {
    margin-right: -6px;
}

.ui-stat-strip--display .ui-stat__value {
    font-size: calc(var(--ui-fs-kpi) * 2);
}

.ui-stat-strip--display .ui-stat__meta {
    font-size: var(--ui-fs-sm);
}

.ui-stat-strip--display .ui-delta {
    font-size: var(--ui-fs-xs);
}

.ui-stat-strip.is-loading .ui-stat__value {
    opacity: .45;
}

@media (max-width: 767.98px) {
    .ui-display-head {
        grid-template-columns: 1fr auto;
    }

    .ui-display-head__title {
        display: none;
    }
}

/* Product cell: title with a trailing badge (ABC class and similar) on one line */
.ui-item__titlerow {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.ui-item__titlerow > .ui-status {
    flex: 0 0 auto;
}

/* ---------- Quantity stepper default: every TouchSpin is one joined field ----------
   [−][ 0 ][+] share one border and radius, the buttons are as tall as the input. One class of specificity: it
   beats the legacy style.css button sizes but not the page variants above (pack pill, ui-stepper vertical, ui-spin). */
.bootstrap-touchspin:where(:not(:has(.input-group-btn-vertical))) {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    overflow: hidden;
}

.bootstrap-touchspin:where(:not(:has(.input-group-btn-vertical))):focus-within {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 3px var(--ui-primary-tint);
}

.bootstrap-touchspin:where(:not(:has(.input-group-btn-vertical))) > :where(.input-group-btn, .input-group-prepend, .input-group-append) {
    display: flex;
    margin: 0;
}

.bootstrap-touchspin:where(:not(:has(.input-group-btn-vertical))) :where(.form-control) {
    flex: 1 1 auto;
    width: 1%;
    max-width: none !important; /* a page width cap on the input would leave a gap inside the field */
    min-width: 3rem;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.bootstrap-touchspin:where(:not(:has(.input-group-btn-vertical))) :is(.bootstrap-touchspin-down, .bootstrap-touchspin-up) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: max(36px, var(--ui-tap-min, 0px));
    height: auto;
    margin: 0 !important;
    padding: 0 10px;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--ui-subtle) !important;
    color: var(--ui-text) !important;
    box-shadow: none !important;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
}

.bootstrap-touchspin:where(:not(:has(.input-group-btn-vertical))) .bootstrap-touchspin-down {
    border-right: 1px solid var(--ui-border) !important;
}

.bootstrap-touchspin:where(:not(:has(.input-group-btn-vertical))) .bootstrap-touchspin-up {
    border-left: 1px solid var(--ui-border) !important;
}

.bootstrap-touchspin:where(:not(:has(.input-group-btn-vertical))) :is(.bootstrap-touchspin-down, .bootstrap-touchspin-up):hover:not(:disabled) {
    background: var(--ui-primary-tint) !important;
    color: var(--ui-primary) !important;
}

/* Import column mapping: the action buttons (detect with AI, deselect all, clear AI) share one size and shape */
:is(.product-import-control-actions, .order-import-control-actions, .stock-import-control-actions, .parent-import-control-actions, .pim-price-import-control-actions, .ui-import-control-actions) > .btn {
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-sm);
    font-weight: 600;
}

/* (the "clear AI selections" button stays hidden until there is something to clear, so display is set apart) */
:is(.product-import-control-actions, .order-import-control-actions, .stock-import-control-actions, .parent-import-control-actions, .pim-price-import-control-actions, .ui-import-control-actions) > .btn:not([class*="clear-ai-btn"]) {
    display: inline-flex;
}

/* ---------- Input groups: every part is as tall as the field ----------
   A prefix (€), a small button or a colour swatch next to an input stretches to the same height instead of
   sticking out above or below it. The TouchSpin stepper and vertical steppers have their own rules. */
.input-group:not(.bootstrap-touchspin):not(:has(.input-group-btn-vertical)) {
    align-items: stretch;
}

.input-group:not(.bootstrap-touchspin):not(:has(.input-group-btn-vertical)) > :is(.form-control, .form-select, .btn, .input-group-text, select, input:not([type=checkbox]):not([type=radio]):not([type=hidden])) {
    height: auto !important;
    min-height: var(--ui-control-h);
    padding-top: 0;
    padding-bottom: 0;
}

.input-group:not(.bootstrap-touchspin):not(:has(.input-group-btn-vertical)) > :is(.btn, .input-group-text) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Bootstrap's .input-group-sm squares the outer corners (0.1rem); the joins still win */
.input-group.input-group-sm > :is(.form-control, .form-select, .btn, .input-group-text) {
    border-radius: var(--ui-radius-sm);
}

.input-group:not(.bootstrap-touchspin):not(:has(.input-group-btn-vertical)) > textarea.form-control {
    padding-top: 8px;
    padding-bottom: 8px;
}

.input-group:not(.bootstrap-touchspin):not(:has(.input-group-btn-vertical)) > input[type=color].form-control {
    flex: 0 0 48px;
    padding: 4px;
}

/* TouchSpin: the value field fills the full height of the joined control */
.bootstrap-touchspin:where(:not(:has(.input-group-btn-vertical))) :where(.form-control) {
    height: auto !important;
    align-self: stretch;
}

/* Bootstrap 4 wrappers (.input-group-prepend / -append) inside BS5 input groups: same height, joined corners */
.input-group:not(.bootstrap-touchspin) > :is(.input-group-prepend, .input-group-append, .input-group-btn) {
    display: flex;
    align-items: stretch;
}

.input-group:not(.bootstrap-touchspin) > :is(.input-group-prepend, .input-group-append, .input-group-btn) > :is(.btn, .input-group-text) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: auto !important;
    min-height: var(--ui-control-h);
    padding-top: 0;
    padding-bottom: 0;
}

.input-group:not(.bootstrap-touchspin) > .input-group-prepend > :is(.btn, .input-group-text) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group:not(.bootstrap-touchspin) > .input-group-append > :is(.btn, .input-group-text) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.input-group:not(.bootstrap-touchspin) > .input-group-prepend ~ :is(.form-control, .form-select) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.input-group:not(.bootstrap-touchspin) > :is(.form-control, .form-select):has(~ .input-group-append) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* DataTables toolbar buttons, selects and inputs share one height (--ui-tb-h, see base.css) */
.dataTables_wrapper .dt-buttons :is(.btn, .dt-button, .form-select, .form-control) {
    height: var(--ui-tb-h, var(--ui-control-h));
    min-height: var(--ui-tb-h, var(--ui-control-h));
}

.dataTables_wrapper .dt-buttons :is(.form-select, .form-control) {
    width: auto;
    font-size: var(--ui-tb-fs, inherit);
    border-color: var(--ui-border);
}

/* Outline buttons: a light tinted frame at rest, the full colour on hover. Rows of blue/red
   frames (row actions, toolbars) read as noise; the coloured label still carries the meaning. */
.btn-outline-primary:not(:hover):not(:focus-visible):not(.active):not(:active) {
    border-color: var(--ui-primary-line) !important;
}

.btn-outline-danger:not(:hover):not(:focus-visible):not(.active):not(:active) {
    border-color: rgba(var(--ui-danger-rgb), .3) !important;
}

.btn-outline-success:not(:hover):not(:focus-visible):not(.active):not(:active) {
    border-color: rgba(var(--ui-success-rgb), .35) !important;
}

/* Secondary outline buttons render with a near-black frame in the legacy theme; in the kit they are
   neutral controls (like .btn-light), and a chosen toggle (btn-check / .active) gets the primary tint */
.btn-outline-secondary {
    border-color: var(--ui-border-strong) !important;
    color: var(--ui-text) !important;
    background-color: var(--ui-surface);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible {
    background-color: var(--ui-subtle) !important;
    border-color: var(--ui-border-strong) !important;
    color: var(--ui-text) !important;
}

.btn-check:checked + .btn-outline-secondary,
.btn-outline-secondary.active,
.btn-outline-secondary:active {
    background-color: var(--ui-primary-soft) !important;
    border-color: var(--ui-primary-line) !important;
    color: var(--ui-primary) !important;
}

/* Table scrollers: a thin scrollbar that stays visible. macOS hides overlay scrollbars, so columns
   past the card edge looked cut off with no sign that the table scrolls sideways. */
/* legacy style.css sets scrollbar-width: thin, which in Chrome disables the styles below (and stays an overlay on macOS) */
div.dataTables_scrollBody,
.table-column .dataTables_scrollBody,
.table-responsive,
.b2b-approvals-table-wrap {
    scrollbar-width: auto;
}

.dataTables_scrollBody::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.b2b-approvals-table-wrap::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dataTables_scrollBody::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.b2b-approvals-table-wrap::-webkit-scrollbar-thumb {
    background: var(--ui-border-strong);
    border-radius: var(--ui-radius-pill);
}

.dataTables_scrollBody::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover,
.b2b-approvals-table-wrap::-webkit-scrollbar-thumb:hover {
    background: var(--ui-faint);
}

.dataTables_scrollBody::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
.b2b-approvals-table-wrap::-webkit-scrollbar-track {
    background: transparent;
}

/* Disabled solid buttons: a neutral muted fill instead of the faded brand colour (in dark mode a
   65%-opacity green/blue with white text was hard to read and still looked clickable) */
/* html body: outranks the per-theme colour rules (body[data-theme=dark] .btn-success) */
html body :is(.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info):is(:disabled, .disabled) {
    background-color: var(--ui-subtle) !important;
    border-color: var(--ui-border-strong) !important;
    color: var(--ui-faint) !important;
    opacity: 1;
}

/* A finished step shown where its action button was ("Accepted"): reads as a state, not a dead button */
html body .btn.ui-btn-done,
html body .btn.ui-btn-done:disabled {
    background-color: var(--ui-success-tint) !important;
    border-color: transparent !important;
    color: var(--ui-success-text) !important;
    opacity: 1;
    cursor: default;
}

/* Channel/carrier settings dialogs: the extra-settings area is empty for most channels; without content it
   showed as a bordered blank strip under the name field */
#channelSettingsBody:empty {
    display: none;
}

/* "Beta" on an integration tile: a small corner badge, not text squeezed in after the logo */
.btn:has(> .integration-tile__beta) {
    position: relative;
}
.btn > .integration-tile__beta.badge {
    position: absolute;
    top: -7px;
    right: -6px;
    z-index: 1;
    font-size: var(--ui-fs-xs, .7rem);
    line-height: 1.2;
    /* opaque: it sits on the tile corner, over the white logo plate in dark mode */
    background-color: color-mix(in srgb, var(--ui-warning) 20%, var(--ui-surface)) !important;
}

/* Occupancy picker search: a bordered kit field with the icon inside, not the grey iOS slab
   (legacy style.css) */
.occupancy-overflow-search {
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
    transition: border-color var(--ui-ease), box-shadow var(--ui-ease);
}

.occupancy-overflow-search:focus-within {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 3px var(--ui-primary-tint);
}

.occupancy-overflow-search input.form-control.form-control,
.occupancy-overflow-search input.form-control.form-control:focus {
    min-height: 38px;
    background: transparent !important; /* darkmode.css paints .form-control with !important */
    border: 0 !important;
}

/* ---------- Wide tables: edge shadows where more columns sit outside the box (cd-mobile.js syncOverflow) ---------- */
.cd-ov-host {
    position: relative;
}
.cd-ov-host::before,
.cd-ov-host::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 3;
    width: 18px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
}
.cd-ov-host::before {
    left: 0;
    background: linear-gradient(to right, rgba(var(--ui-ink-rgb, 15, 23, 42), .10), transparent);
}
.cd-ov-host::after {
    right: 0;
    background: linear-gradient(to left, rgba(var(--ui-ink-rgb, 15, 23, 42), .10), transparent);
}
.cd-ov-host.cd-ov-l::before,
.cd-ov-host.cd-ov-r::after {
    opacity: 1;
}

/* a table a few dozen px too wide for its box: tighter cells so it fits without a sideways scroll (cd-mobile.js) */
table.cd-tight > :is(thead, tbody, tfoot) > tr > :is(th, td) {
    padding-left: 6px !important;
    padding-right: 6px !important;
}
table.cd-tight > thead > tr > th:is(.sorting, .sorting_asc, .sorting_desc) {
    padding-right: 20px !important;
}

/* Channel picker ("Connect sales channels", 40 cards): a wide dialog on tablets too, 3-line descriptions and one
   row of category chips, so the list is a scan of logos instead of 20 000 px of text */
@media (min-width: 768px) and (max-width: 1199.98px) {
    #select_api_modal .modal-dialog.modal-xl {
        max-width: calc(100vw - 48px);
    }
}
#select_api_modal .channel-card .card-body p.text-muted {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#select_api_modal .channel-card .card-body > span.badge:nth-of-type(n+5) {
    display: none;
}
@media (min-width: 768px) {
    #select_api_modal .row > .channel-card {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
}
@media (min-width: 1200px) {
    #select_api_modal .row > .channel-card {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* ---------- Balanced tile rows: no lone last tile ----------
   A row of exactly four "one third" tiles (settings hubs, POS overview, analytics) ended in a single tile under a
   row of three: two by two on tablets and small laptops, four across from 1200px. */
@media (min-width: 768px) {
    .row:has(> [class*="col-"]:nth-child(4):last-child):not(:has(> :not([class*="-4"]))) > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}
@media (min-width: 1200px) {
    .row:has(> [class*="col-"]:nth-child(4):last-child):not(:has(> :not([class*="-4"]))) > [class*="col-"] {
        flex: 0 0 25%;
        max-width: 25%;
    }
}
/* KPI strips: four or five tiles stay on one row on tablets instead of 3 + 1 / 4 + 1 */
@media (min-width: 768px) {
    #threepl-dashboard .tpl-kpi-strip {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    }
    .ui-page-center-packing-bins .pbins-stats {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
    }
    #pos-settings .pos-receipt-display-toggles > .form-check {
        flex: 0 0 calc(50% - 0.5rem);
    }
}
.ui-page-center-packing-bins .pbins-stat-label {
    hyphens: auto;
    overflow-wrap: anywhere;
}

/* Delivery products (seller -> FC): the traceability button, icon and text on one line */
.delivery-serial-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-2);
    min-width: 200px;
    white-space: nowrap;
}

/* Date fields that open the portal calendar (cd-ui.js, mouse/trackpad devices): a calendar icon like the native field */
input.form-control.cd-date-field {
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
    cursor: pointer;
}

/* Order-type tiles: hover is the stronger shadow only. Their row scrolls sideways on smaller screens and a scroll
   container clips anything that moves out of it, so the 2px lift cut off the tile's top edge. */
.order-filter-card:hover,
.order-filter-card.shipment-method-active:hover {
    transform: none !important;
}
/* the selected tile also answers the pointer: a stronger edge on hover */
.order-filter-card.oo-kpi.shipment-method-active:hover,
.order-filter-card.oo-kpi--all.shipment-method-active:hover {
    border-color: color-mix(in srgb, var(--ui-primary) 55%, transparent) !important;
}

/* a table whose data failed to load (cd-ui.js showTableError): only the error state and its Try again show */
.dataTables_wrapper.cd-dt-failed :is(.dataTables_info, .dataTables_paginate, .cd-load-more) {
    display: none !important;
}

/* order dialog detail labels: long Dutch/German compounds hyphenate at a syllable instead of breaking anywhere
   ("Pakketafmetinge / n") */
.oo-meta-label {
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* Icon and unit addons (a search glass, calendar, cm³, €) read as part of the field: same surface, no divider,
   muted text; the whole group takes the focus colour. Groups whose addon holds a button, checkbox or select keep
   Bootstrap's tiles. (:has() can't nest, so "plain" is decided on the group.) */
.input-group:not(.bootstrap-touchspin):not(.ui-scanbox):has(> .input-group-text):not(:has(> .input-group-text :is(input, .btn, select, .dropdown))) > .input-group-text {
    background-color: var(--ui-surface) !important;
    color: var(--ui-muted);
    min-width: 0;
}
.input-group:not(.bootstrap-touchspin):not(.ui-scanbox):has(> .input-group-text):not(:has(> .input-group-text :is(input, .btn, select, .dropdown))) > .input-group-text > :is(i, svg) {
    font-size: .85rem;
}
/* leading addon */
.input-group:not(.bootstrap-touchspin):not(.ui-scanbox):has(> .input-group-text):not(:has(> .input-group-text :is(input, .btn, select, .dropdown))) > .input-group-text:first-child {
    border-right: 0 !important;
    padding-left: 14px;
    padding-right: 6px;
}
.input-group:not(.bootstrap-touchspin):not(.ui-scanbox):has(> .input-group-text):not(:has(> .input-group-text :is(input, .btn, select, .dropdown))) > .input-group-text:first-child + :is(.form-control, .form-select, input) {
    border-left: 0 !important;
    padding-left: 6px;
}
/* trailing addon (units) */
.input-group:not(.bootstrap-touchspin):not(.ui-scanbox):has(> .input-group-text):not(:has(> .input-group-text :is(input, .btn, select, .dropdown))) > .input-group-text:last-child {
    border-left: 0 !important;
    padding-left: 6px;
    padding-right: 14px;
}
.input-group:not(.bootstrap-touchspin):not(.ui-scanbox):has(> .input-group-text):not(:has(> .input-group-text :is(input, .btn, select, .dropdown))) > :is(.form-control, .form-select, input):has(+ .input-group-text:last-child) {
    border-right: 0 !important;
}
/* focus: the whole group lights up, with one ring around it */
.input-group:not(.bootstrap-touchspin):not(.ui-scanbox):has(> .input-group-text):not(:has(> .input-group-text :is(input, .btn, select, .dropdown))):focus-within {
    border-radius: var(--ui-radius-md);
    box-shadow: var(--ui-focus-ring);
}
.input-group:not(.bootstrap-touchspin):not(.ui-scanbox):has(> .input-group-text):not(:has(> .input-group-text :is(input, .btn, select, .dropdown))):focus-within > :is(.form-control, .form-select, .input-group-text) {
    border-color: var(--ui-primary) !important;
    box-shadow: none !important;
}
.input-group:not(.bootstrap-touchspin):not(.ui-scanbox):has(> .input-group-text):not(:has(> .input-group-text :is(input, .btn, select, .dropdown))):focus-within > .input-group-text {
    color: var(--ui-primary);
}

/* Pack screen quantity: the stepper is the only box; "/ 1.000" sits next to it as plain text and is never cut.
   (.ui-stepper also names the button stepper in mobile.css, whose border + overflow:hidden wrapped and clipped
   the total here.) */
.ho-order-qty-control.ui-stepper {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    max-width: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}
.order-product-touchspin-td {
    width: auto !important;
    max-width: none !important;
    white-space: nowrap;
}
.ho-order-qty-control .ho-order-qty-total {
    flex: 0 0 auto;
    white-space: nowrap;
}
/* the value field fits four digits (1000) */
.ho-order-qty-control .bootstrap-touchspin input.form-control {
    width: 58px;
    padding: 0 4px;
}
/* a line that is done (shipped / locked): no faded buttons, just the number in a calm green frame */
.ho-order-qty-control .bootstrap-touchspin:has(input:disabled) {
    border-color: var(--ui-success);
    background: var(--ui-success-tint);
    box-shadow: none;
    opacity: 1;
}
.ho-order-qty-control .bootstrap-touchspin:has(input:disabled) .btn {
    display: none !important;
}
.ho-order-qty-control .bootstrap-touchspin input:disabled {
    min-width: 64px;
    color: var(--ui-success-text);
    opacity: 1;
    -webkit-text-fill-color: var(--ui-success-text);
}
@media (max-width: 575.98px) {
    .ho-order-qty-control.ui-stepper {
        flex-direction: row;
        gap: 8px;
    }
}

/* Scan progress (pack screens), refined: tighter, a slim meter that turns green when done, the partial
   shipment as a quiet text action */
.ui-scan-progress {
    gap: 12px;
    padding: 16px 20px;
}
.ui-scan-progress__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}
.ui-scan-progress__title {
    font-size: .92rem;
}
.ui-scan-progress__count {
    font-size: 1.1rem;
}
.ui-scan-progress .ui-meter {
    height: 6px;
    border-radius: 999px;
}
.ui-scan-progress .ui-meter > span {
    border-radius: 999px;
    transition: width var(--ui-ease-slow), background-color var(--ui-ease);
}
.ui-scan-progress .ui-meter > span[style*="width: 100%"] {
    background: var(--ui-success);
}
.ui-scan-progress__actions {
    display: flex;
    margin-top: -2px;
}
.ui-scan-progress__partial {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: max(32px, var(--ui-tap-min, 0px));
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ui-primary);
    font-size: .85rem;
    font-weight: 600;
}
.ui-scan-progress__partial:hover,
.ui-scan-progress__partial:focus-visible {
    color: var(--ui-primary-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Filter sidebar stacked above its list (tablets): the filters flow into a grid instead of one per row */
@media (min-width: 576px) and (max-width: 991.98px) {
    .filter-column .filters-sidebar > .card-body {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 14px 16px;
        align-items: end;
    }
    .filter-column .filters-sidebar > .card-body > :not(.filter-section) {
        grid-column: 1 / -1;
    }
    .filter-column .filters-sidebar > .card-body > .filter-section {
        margin-bottom: 0 !important;
        min-width: 0;
    }
    .filter-column .filters-sidebar > .card-body > .d-grid {
        justify-items: end;
    }
    .filter-column .filters-sidebar > .card-body > .d-grid > .btn {
        width: auto;
    }
}
/* stacked: the filter card spans the same width as the list under it (me-md-3 is for the side-by-side layout) */
@media (max-width: 991.98px) {
    .filter-column .filters-sidebar {
        margin-right: 0 !important;
    }
}

/* Order status tiles: legacy padding (3.6px columns on a row without the matching pull-out) set the outer
   tiles 4px inside the page title and the table: even gutters, outer edges flush */
.row:has(> .oo-kpi-col) {
    margin-left: -6px;
    margin-right: -6px;
    padding-left: 0;
    padding-right: 0;
}
.row:has(> .oo-kpi-col) > .oo-kpi-col {
    padding-left: 6px;
    padding-right: 6px;
}

/* Order status tiles: three tiles share one row on tablets instead of wrapping 2 + 1 (four stay 2 x 2) */
@media (min-width: 576px) and (max-width: 1199.98px) {
    .row:has(> .oo-kpi-col:nth-child(3):last-child) > .oo-kpi-col {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
}
@media (min-width: 576px) and (max-width: 1199.98px) {
    /* many status tiles (sellers with several carriers): three per row instead of a long two-column stack */
    .row:has(> .oo-kpi-col:nth-child(5)) > .oo-kpi-col,
    .row:has(> :nth-child(5) > .order-filter-card) > :has(> .order-filter-card) {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
}
/* order status tile labels stay on one line (a wrapped carrier name ran over the count) */
.order-filter-card .card-body .fw-medium {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Empty-state actions: full-size buttons with room around them and the header buttons' lift */
:is(.empty-state-container, .ui-empty) :is(.seller-profiles-empty-actions, .empty-state-actions) {
    gap: 12px !important;
    margin-top: 12px !important;
}
:is(.empty-state-container, .ui-empty) .btn {
    min-height: var(--ui-control-h);
    padding: 0 20px;
    font-size: var(--ui-fs-md);
    font-weight: 600;
    border-radius: var(--ui-radius-md);
    box-shadow: var(--ui-shadow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
:is(.empty-state-container, .ui-empty) .btn > i {
    margin: 0 !important;
}
:is(.empty-state-container, .ui-empty) .btn-light {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border-strong) !important;
}

/* Sales channel rows: Settings and Actions as two equal, full-size buttons */
.channel-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    white-space: nowrap;
}
.channel-row-actions .channel-row-actions__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: var(--ui-radius-md) !important;
    background: var(--ui-surface) !important;
    box-shadow: var(--ui-shadow);
    color: var(--ui-text) !important;
    font-size: .85rem;
    font-weight: 600;
}
.channel-row-actions .channel-row-actions__btn > i {
    color: var(--ui-muted);
    font-size: .85rem;
}
.channel-row-actions .channel-row-actions__btn:hover,
.channel-row-actions .channel-row-actions__btn:focus-visible,
.channel-row-actions .channel-row-actions__btn.show {
    border-color: var(--ui-primary) !important;
    color: var(--ui-primary) !important;
    background: var(--ui-primary-soft) !important;
}
.channel-row-actions .channel-row-actions__btn:hover > i {
    color: var(--ui-primary);
}
.channel-row-actions .dropdown-toggle::after {
    margin-left: 2px;
}
.channel-row-actions .channel-row-actions__btn {
    box-shadow: none !important;
}

/* Status badges in table rows were rendered with .p-2 (a tall 8px box) by many controllers: they match the row's
   other chips instead (pill, ui-pill height), with the meta line tucked underneath */
table tbody td .badge.p-2 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px !important;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    line-height: 1.5;
}
table tbody td .ui-item__text > .badge.p-2 + .ui-item__meta {
    margin-top: 4px !important;
}

/* One date-range field (daterangepicker): optional calendar icon left, clear (×) inside the field on the right */
.cd-daterange {
    position: relative;
}
.cd-daterange__icon {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: var(--ui-muted);
    font-size: 13px;
    pointer-events: none;
}
.cd-daterange .cd-daterange__input {
    padding-right: 36px;
    cursor: pointer;
    text-overflow: ellipsis;
}
.cd-daterange__icon + .cd-daterange__input {
    padding-left: 36px;
}
.cd-daterange__clear {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ui-muted);
    font-size: 13px;
}
.cd-daterange__clear[hidden] {
    display: none;
}
.cd-daterange__clear:hover,
.cd-daterange__clear:focus-visible {
    background: var(--ui-subtle);
    color: var(--ui-text);
}

/* The filter column clips (overflow: hidden, for its collapse animation), which cut off the filter card's 1px ring
   and soft shadow: room around the card, given back with negative margins so nothing moves */
.filter-column:not(.filter-collapsed) {
    padding: 1px 1px 6px !important;
    margin-top: -1px !important;
    margin-left: -1px !important;
    margin-bottom: -6px;
}

/* scrollX tables keep a hidden copy of the header in the body that only sizes the columns (DataTables gives it
   height 0 and no vertical padding inline). Page rules that pad "#some-table thead th" with !important hit that
   copy too, which left an empty band under the header and pushed the body columns out of line with the header. */
.dataTables_scrollBody > table > thead > tr > th,
.dataTables_scrollBody > table > thead > tr > td {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
}

/* Filter + table pages (products, orders, deliveries, returns, labels): legacy style.css pads
   `.container-fluid > .row` 6px, which set both cards in from the page title and the header buttons */
.container-fluid > .row.show-on-extra-filters {
    padding-left: 0;
    padding-right: 0;
}
/* ...and where the table column wraps its card (shipping rules) instead of being the card, its column padding
   set the card in by another 7px */
.show-on-extra-filters > .table-column:not(.card) {
    padding-left: 0;
    padding-right: 0;
}

/* Shell edges: the main menu's right side and the top bar's bottom carry the same hairline as the sidebar footer
   (inset, so nothing shifts); it replaces the top bar's wide soft glow */
:root {
    --cd-shell-edge: rgba(0, 0, 0, .14);
}
body[data-theme=dark] {
    --cd-shell-edge: rgba(255, 255, 255, .08);
}
/* the menu's children paint their own background, so the edge is a line drawn above them */
html body .sidebar.secondary-background-color,
html body #sidebar.sidebar {
    border-right: 0 !important;
}
html body .sidebar.secondary-background-color::after {
    content: "";
    position: absolute;
    top: var(--cd-shell-edge-top, 65.45px); /* meets the top bar's bottom line; follows it up as the page scrolls (cd-ui.js) */
    right: 0;
    bottom: 0;
    width: 1px;
    background: var(--cd-shell-edge);
    pointer-events: none;
    z-index: 6;
}
html body .navbar.navbar-bg {
    border-bottom: 0 !important;
    box-shadow: inset 0 -1px 0 var(--cd-shell-edge) !important;
}

/* Pick screen bins: their own block under the product facts, one tile per bin. The bin number is a badge,
   scanned/total sits above a thin progress bar; the bin to fill next has a brand ring, a full bin turns green
   with a check (HandleCenterOrder / HandleOrder buildPickBasketHtml, progress from handle_order.php) */
.pick-bins {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ui-space-2);
    width: 100%;
}
.pick-bins-title {
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.pick-bins .pick-bins-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 190px));
    justify-content: center;
    gap: 10px;
    width: 100%;
}
.pick-bins .pick-bin-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 8px 14px 8px 8px;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-md, 12px);
    background: var(--ui-surface);
    box-shadow: none;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}
.pick-bins .pick-bin-card .pick-bin-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--ui-subtle);
    color: var(--ui-text);
    line-height: 1.05;
    text-align: center;
    white-space: nowrap;
}
.pick-bins .pick-bin-label small {
    color: var(--ui-muted) !important;
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.pick-bins .pick-bin-label strong {
    color: inherit !important;
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.pick-bins .pick-bin-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.pick-bins .pick-bin-progress {
    margin: 0;
    color: var(--ui-text);
    font-size: 1rem;
    font-weight: 700;
}
.pick-bins .pick-bin-bar {
    display: block;
    height: 4px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--ui-track, var(--ui-subtle));
}
.pick-bins .pick-bin-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ui-primary-strong);
    transition: width 200ms ease;
}
.pick-bins .pick-bin-done {
    position: absolute;
    top: 8px;
    right: 10px;
    display: none;
    color: var(--ui-success-text, #198754);
    font-size: 12px;
}
/* the bin to fill now */
.pick-bins .pick-bin-card.active {
    border-color: var(--ui-primary);
    background: var(--ui-surface);
    box-shadow: 0 0 0 1px var(--ui-primary);
}
.pick-bins .pick-bin-card.active .pick-bin-label {
    background: var(--ui-primary-strong);
    color: #fff;
}
.pick-bins .pick-bin-card.active .pick-bin-label small {
    color: rgba(255, 255, 255, .8) !important;
}
/* full */
.pick-bins .pick-bin-card.completed {
    border-color: color-mix(in srgb, var(--ui-success, #198754) 45%, transparent);
    background: var(--ui-success-tint, rgba(25, 135, 84, .1));
}
.pick-bins .pick-bin-card.completed .pick-bin-label {
    background: #3fc77d; /* ChannelDock green */
    color: #fff;
}
.pick-bins .pick-bin-card.completed .pick-bin-label small {
    color: rgba(255, 255, 255, .85) !important;
}
.pick-bins .pick-bin-card.completed .pick-bin-bar > span {
    background: var(--ui-success, #198754);
}
.pick-bins .pick-bin-card.completed .pick-bin-done {
    display: block;
}
@media (max-width: 575.98px) {
    .pick-bins .pick-bins-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.pick-bins .pick-bin-card.disabled {
    opacity: .55;
}

/* ---------- PIM product dialog: assets ---------- */
.pim-assets-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: var(--ui-space-3);
}
/* first tile of the asset grid: upload (click or drop) with the media library as its second action */
.pim-asset-add {
    display: flex;
    flex-direction: column;
    height: calc(100% - var(--ui-space-3));
    min-height: 172px;
    margin-bottom: var(--ui-space-3);
    overflow: hidden;
    border: 1.5px dashed var(--ui-border-strong);
    border-radius: var(--ui-radius-md, 12px);
    background: var(--ui-surface);
    transition: border-color 150ms ease, background-color 150ms ease;
}
.pim-asset-add:hover,
.pim-asset-add:has(.is-dragover) {
    border-color: var(--ui-primary);
}
.pim-asset-add .pim-asset-add__upload {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin: 0;
    padding: 16px 10px;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    text-align: center;
    cursor: pointer;
}
.pim-asset-add .pim-asset-add__upload.is-dragover {
    background: var(--ui-primary-tint) !important;
}
.pim-asset-add__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
    font-size: 17px;
}
.pim-asset-add__title {
    color: var(--ui-text);
    font-size: .875rem;
    font-weight: 600;
}
.pim-asset-add__hint {
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
}
.pim-asset-add__formats {
    margin-top: 4px;
    color: var(--ui-faint);
    font-size: .68rem;
    letter-spacing: .02em;
}
.pim-asset-add__library {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 10px;
    border: 0;
    border-top: 1px solid var(--ui-border);
    background: var(--ui-subtle);
    color: var(--ui-text);
    font-size: .82rem;
    font-weight: 600;
}
.pim-asset-add__library i {
    color: var(--ui-muted);
}
.pim-asset-add__library:hover,
.pim-asset-add__library:focus-visible {
    background: var(--ui-primary-tint);
    color: var(--ui-primary);
}
.pim-asset-add__library:hover i {
    color: inherit;
}

/* Media library dialog (SweetAlert): header, a grid of square tiles with size captions, or an empty state */
.pim-media-lib-swal.swal2-popup {
    padding: 0 !important;
    border-radius: var(--ui-radius-lg, 14px) !important;
    background: var(--ui-surface) !important;
}
.pim-media-lib-swal .swal2-html-container,
.pim-media-lib-swal .swal2-content {
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}
.pim-media-lib {
    padding: 20px 24px 24px;
}
.pim-media-lib__head {
    padding-right: 32px;
    text-align: left;
    margin-bottom: 16px;
}
.pim-media-lib__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 2px;
    color: var(--ui-text);
    font-size: 1.05rem;
    font-weight: 700;
}
.pim-media-lib__title i {
    color: var(--ui-muted);
}
.pim-media-lib__sub {
    margin: 0;
    color: var(--ui-muted);
    font-size: .85rem;
}
.pim-media-lib__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 12px;
}
.pim-media-lib__item {
    position: relative;
}
.pim-media-lib__item .asset_delete_button {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
}
.pim-media-lib__pick {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px 8px 6px;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-md, 12px);
    background: var(--ui-surface);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.pim-media-lib__pick img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
}
.pim-media-lib__pick:hover,
.pim-media-lib__pick:focus-visible {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 1px var(--ui-primary);
}
.pim-media-lib__size {
    color: var(--ui-muted);
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
}
.pim-media-lib__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 32px 16px 20px;
    border: 1.5px dashed var(--ui-border-strong);
    border-radius: var(--ui-radius-md, 12px);
    color: var(--ui-muted);
    font-size: .85rem;
    text-align: center;
}
.pim-media-lib__empty strong {
    color: var(--ui-text);
    font-size: .95rem;
}
.pim-media-lib__empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: var(--ui-subtle);
    color: var(--ui-muted);
    font-size: 20px;
}

/* Attribute rows: AI and add buttons are square controls at input height. Idle AI is a quiet brand button, the
   score it returns keeps its meaning as a soft green / amber / red tile, the add (+) button is a neutral control */
tr.marketplace_attribute_tr :is([id^="marketplace_attribute_value_ai_button_"], [id^="marketplace_attribute_value_add_button_"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--ui-control-h);
    height: var(--ui-control-h);
    margin: 0 !important;
    padding: 0 10px;
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: var(--ui-radius);
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    font-size: .9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    box-shadow: none !important;
    vertical-align: middle;
}
tr.marketplace_attribute_tr :is([id^="marketplace_attribute_value_ai_button_"], [id^="marketplace_attribute_value_add_button_"]):hover:not(:disabled) {
    border-color: var(--ui-primary) !important;
    color: var(--ui-primary) !important;
}
tr.marketplace_attribute_tr [id^="marketplace_attribute_value_ai_button_"]:has(.fa-wand-magic-sparkles) {
    border-color: color-mix(in srgb, var(--ui-primary) 35%, transparent) !important;
    background: var(--ui-primary-tint) !important;
    color: var(--ui-primary) !important;
}
tr.marketplace_attribute_tr [id^="marketplace_attribute_value_ai_button_"]:has(.fa-wand-magic-sparkles):hover:not(:disabled) {
    border-color: var(--ui-primary) !important;
    background: var(--ui-primary) !important;
    color: #fff !important;
}
tr.marketplace_attribute_tr [id^="marketplace_attribute_value_ai_button_"].btn-success:not(:has(i)) {
    border-color: color-mix(in srgb, var(--ui-success) 45%, transparent) !important;
    background: var(--ui-success-tint) !important;
    color: var(--ui-success-text) !important;
}
tr.marketplace_attribute_tr [id^="marketplace_attribute_value_ai_button_"].btn-warning {
    border-color: color-mix(in srgb, var(--ui-warning) 50%, transparent) !important;
    background: var(--ui-warning-tint) !important;
    color: var(--ui-warning-text) !important;
}
html body tr.marketplace_attribute_tr [id^="marketplace_attribute_value_ai_button_"].btn-danger:not(:disabled) {
    border-color: color-mix(in srgb, var(--ui-danger) 45%, transparent) !important;
    background: var(--ui-danger-tint) !important;
    color: var(--ui-danger-text) !important;
}
tr.marketplace_attribute_tr [id^="marketplace_attribute_value_ai_button_"].btn-dark {
    background: var(--ui-subtle) !important;
    color: var(--ui-muted) !important;
}

/* Order dialog facts: a calm label / value list (one fact per row, value right, hairline between) instead of a
   3-up grid with wrapping ids, a big status pill and loud help icons */
.card-body > .row:has(> div > .selected-order-id) {
    display: flex;
    flex-direction: column;
    margin: 0;
}
.card-body > .row:has(> div > .selected-order-id) > div {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    min-height: 38px;
    margin: 0 !important;
    padding: 7px 0 !important;
    border-bottom: 1px solid var(--ui-border);
}
.card-body > .row:has(> div > .selected-order-id) > div:last-child {
    border-bottom: 0;
}
/* fields the order has no value for stay out of the list */
.card-body > .row:has(> div > .selected-order-id) > div:has(> span:empty:last-child) {
    display: none !important;
}
.card-body > .row:has(> div > .selected-order-id) .oo-meta-label {
    flex: none;
    margin: 0;
    color: var(--ui-muted);
    font-size: .8rem;
    font-weight: 500;
}
.card-body > .row:has(> div > .selected-order-id) > div > * {
    width: auto !important;
}
.card-body > .row:has(> div > .selected-order-id) > div > :not(.oo-meta-label) {
    display: inline-flex !important;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    color: var(--ui-text);
    font-size: .875rem;
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}
.card-body > .row:has(> div > .selected-order-id) .selected-order-status .badge,
.card-body > .row:has(> div > .selected-order-id) .selected-order-status .ui-status {
    padding: 3px 10px !important;
    font-size: var(--ui-fs-xs) !important;
    line-height: 1.5;
}
.card-body > .row:has(> div > .selected-order-id) :is(.fa-info-circle, .fa-circle-info, [class*="help-icon"]) {
    color: var(--ui-faint) !important;
    font-size: 12px !important;
}

/* order dialog: "no shipment labels" sits in a card like its neighbours */
#shipment-labels-empty-state.ui-empty {
    margin: 0 0 var(--ui-space-4);
    padding: 40px 24px;
    border-radius: var(--ui-radius-lg, 14px);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
}
/* rows the page's own script hides (Batch ID, VAT number when not relevant) stay hidden */
.card-body > .row:has(> div > .selected-order-id) > div:is([style*="display: none"], [style*="display:none"], .d-none) {
    display: none !important;
}

/* Seller deliveries: the receiving FC's logo sits on the title line of To / From */
.ui-delivery-party img {
    max-width: 84px !important;
    max-height: 26px !important;
    padding: 2px 4px !important;
    vertical-align: middle;
}

/* Pick/pack order card: the action bar paints over the card's top corners; it takes the card's radius instead of
   clipping (overflow would cut off the More actions menu) */
.card > .handle-order-actions-bar,
.card > .handle-order-actions-bar > .handle-order-actions {
    border-top-left-radius: inherit !important;
    border-top-right-radius: inherit !important;
}

/* green "Pack" / "Next": the count chip turns translucent white so the numbers stay readable */
.ui-workbar__next.is-ready .ui-workbar__count {
    background: rgba(255, 255, 255, .24);
    color: #fff;
}

/* pick scan field: the round logo sits inside the pill with a little air, so it follows the field's radius */
.ui-scanbox .input-group-text.google {
    padding: 0 4px 0 6px !important;
}
.ui-scanbox .input-group-text.google img {
    display: block;
    height: calc(var(--ui-control-h) + 2px) !important;
    max-height: 40px;
    width: auto;
    padding: 0 !important;
}

/* Step title with a button on the right: the number and text are wrapped, and keep the step title's own gap
   (gap-3 put the text 4px further right than in steps without a button) */
.ui-step__title-main {
    gap: inherit;
}