/*
 * Mobile kit (docs/mobile-ux-plan.md section 3, G1–G25). Loaded last by ui_styles.php.
 *
 * Every rule here sits under a phone/tablet breakpoint or the touch query, so desktop with a mouse is unchanged:
 *   touch  = (hover: none) and (pointer: coarse)
 *   phone  = (max-width: 575.98px)
 *   small  = (max-width: 767.98px)
 * Colours, radii, shadows and type come from tokens.css only.
 */

:root {
    --ui-tap: 44px;
    --ui-tap-gap: 8px;
    /* floor for literal control sizes in older sheets: max(<literal>, var(--ui-tap-min, 0px)); 44px on touch */
    --ui-tap-min: 0px;
    --ui-input-fs-touch: 16px;
    --ui-safe-top: env(safe-area-inset-top, 0px);
    --ui-safe-bottom: env(safe-area-inset-bottom, 0px);
    --ui-safe-left: env(safe-area-inset-left, 0px);
    --ui-safe-right: env(safe-area-inset-right, 0px);
}

/* ------------------------------------------------------------------
 * G1  Inputs at 16px on touch screens, so iOS never zooms on focus and the
 *     viewport meta can leave pinch-zoom on.
 * ------------------------------------------------------------------ */
@media (hover: none) and (pointer: coarse), (max-width: 767.98px) {
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):not([type=image]),
    select,
    textarea,
    .form-control,
    .form-control-sm,
    .form-control-lg,
    .form-select,
    .form-select-sm,
    .input-group-sm > .form-control,
    .input-group-sm > .form-select,
    .dataTables_filter input,
    .dataTables_length select,
    .select2-container .select2-search__field,
    .select2-container .select2-selection,
    .bootstrap-tagsinput input,
    .swal2-input,
    .swal2-textarea,
    .swal2-select {
        font-size: var(--ui-input-fs-touch) !important;
    }
}

/* ------------------------------------------------------------------
 * G2  Touch sizes. Controls get a 44px box; small things (checkboxes, icon
 *     buttons, help tips, close buttons) keep their look and get a centred
 *     44px hit area from a pseudo-element, so neighbours don't grow.
 * ------------------------------------------------------------------ */
@media (hover: none) and (pointer: coarse) {
    :root {
        --ui-control-h: var(--ui-tap);
    }
    /* DataTables toolbars and every scoped compact variant of them (also buttons a page moved out of the wrapper) */
    .dataTables_wrapper,
    .dt-buttons,
    #productModal .product-inventory-tabs .dataTables_wrapper {
        --ui-tb-h: var(--ui-tap);
    }
    .btn,
    .btn-sm,
    .btn-group-sm > .btn,
    .form-control,
    .form-control-sm,
    .form-select,
    .form-select-sm,
    .input-group-sm > .form-control,
    .input-group-sm > .form-select,
    .input-group-sm > .btn,
    .input-group-sm > .input-group-text,
    .dataTables_filter input,
    .dataTables_length select,
    .select2-container .select2-selection--single,
    .select2-container .select2-selection--multiple {
        min-height: var(--ui-tap);
    }
    .btn-sm,
    .btn-group-sm > .btn {
        min-width: var(--ui-tap);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--ui-space-1);
    }
    .select2-container .select2-selection--single .select2-selection__rendered {
        line-height: calc(var(--ui-tap) - 2px);
    }
    .select2-container .select2-selection--single .select2-selection__arrow {
        height: calc(var(--ui-tap) - 2px);
    }

    /* Lists of rows a finger runs down: pager, tabs, menus, Select2 results */
    .page-link {
        min-width: var(--ui-tap);
        min-height: var(--ui-tap);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .nav-tabs .nav-link,
    .nav-pills .nav-link,
    .dropdown-item,
    .list-group-item-action {
        min-height: var(--ui-tap);
        display: flex;
        align-items: center;
        gap: var(--ui-space-2);
    }
    .select2-results__option {
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    /* Bigger boxes to aim at, plus the 44px hit area below */
    .form-check-input {
        width: 1.35em;
        height: 1.35em;
    }
    .form-check {
        min-height: var(--ui-tap);
        display: flex;
        align-items: center;
        gap: var(--ui-space-2);
    }
    .form-check .form-check-input {
        margin-top: 0;
        flex: none;
    }
    .form-check-label {
        padding-block: var(--ui-space-2);
    }

    /* 44px hit areas for compact controls */
    .form-check-input,
    .btn-close,
    .cd-icon-btn,
    .ui-icon-btn,
    .ui-help,
    .ui-copy,
    .nav-section-grip,
    .b2b-icon-text-btn,
    .ui-row-select,
    .ui-row-action,
    a.ui-pill,
    label.switch,
    .cc-card-delete,
    .stock-advice-guide__chevron,
    .onboarding-sc-item-delete,
    .pick-algorithm-sequence__help,
    .mapping-hint__close,
    .swal2-close {
        position: relative;
        z-index: 1; /* the hit area must sit above positioned neighbours (table cells, cards) */
    }
    .form-check-input::after,
    .btn-close::after,
    .cd-icon-btn::after,
    .ui-icon-btn::after,
    .ui-help::after,
    .nav-section-grip::after,
    .b2b-icon-text-btn::after,
    .ui-row-action::after,
    a.ui-pill::after,
    label.switch::after,
    .cc-card-delete::after,
    .stock-advice-guide__chevron::after,
    .onboarding-sc-item-delete::after,
    .pick-algorithm-sequence__help::after,
    .mapping-hint__close::after,
    .swal2-close::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: max(100%, var(--ui-tap));
        height: max(100%, var(--ui-tap));
        transform: translate(-50%, -50%);
        background: none;
        border: 0;
    }
    .ui-copy::after {
        content: '';
        position: absolute;
        inset: -14px 0;
    }
}

/* ------------------------------------------------------------------
 * No hover dependency (plan 2.4): what a mouse reveals on hover is simply
 * there on touch screens.
 * ------------------------------------------------------------------ */
@media (hover: none) and (pointer: coarse) {
    /* dialogs focus their ✕ on open; on touch that showed a focus box around it */
    .modal .btn-close:focus,
    .ui-sheet__close:focus {
        outline: none;
        box-shadow: none;
    }
    .b2b-setup-logo-dropzone.has-logo .b2b-setup-logo-dropzone-overlay {
        opacity: 1;
    }
    .menu-fav-toggle {
        opacity: .45;
        width: var(--ui-tap);
    }
    .menu-fav-toggle.is-favorite {
        opacity: 1;
    }
    .ui-edit-cell.is-editable .ui-edit-cell__hint {
        opacity: .65;
    }
    .ui-tasks .task-card-drag-handle {
        opacity: .7;
    }
    .form-check-label {
        min-height: var(--ui-tap);
        display: inline-flex;
        align-items: center;
    }
    /* a sentence with links ("I agree to the terms and privacy statement") stays one flowing text */
    .form-check-label:has(> a, > b, > strong, > em) {
        display: inline-block;
        padding-block: .75em;
    }
}

/* ------------------------------------------------------------------
 * Readable on phones (plan 2.10): meta text never below 12px.
 * ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    :root {
        --ui-fs-2xs: .75rem;
        --ui-fs-xs: .75rem;
        /* floor for literal meta sizes in older sheets: font-size: max(<literal>, var(--ui-meta-min, 0px)) */
        --ui-meta-min: 12px;
    }
}

@media (max-width: 767.98px) {
    /* a plain table showing only its empty state: no column header row pushing the message off screen */
    table:has(> tbody > tr:only-child > td[colspan]:only-child :is(.empty-state-container, .ui-empty)) > thead {
        display: none;
    }
    table:has(> tbody > tr:only-child > td[colspan]:only-child :is(.empty-state-container, .ui-empty)) {
        width: 100% !important;
        min-width: 0 !important;
    }
    table > tbody > tr:only-child > td[colspan]:only-child:has(:is(.empty-state-container, .ui-empty)) {
        white-space: normal;
    }
    /* card select cells: a wrapped checkbox or switch sits centred, its whole 44px hit area inside the cell */
    table.cd-cards td.cd-c-select > :is(.custom-control, .form-check) {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0;
    }
    table.cd-cards td.cd-c-select > :is(.custom-control, .form-check) > input {
        margin: 0 !important;
        float: none;
    }
    /* POS report filters in the filter sheet: their page styles are scoped to #pos-sales, which the sheet leaves */
    .cd-filter-panel :is(.pos-sales-filter-input-wrap, .pos-sales-filter-select-wrap) {
        position: relative;
        display: flex;
        align-items: center;
    }
    .cd-filter-panel .pos-sales-filter-field-icon {
        position: absolute;
        left: .8rem;
        top: 50%;
        transform: translateY(-50%);
        z-index: 4;
        width: 1rem;
        text-align: center;
        color: var(--ui-muted);
        pointer-events: none;
    }
    .cd-filter-panel .pos-sales-filter-control {
        width: 100%;
        padding-left: 2.25rem;
    }
    .cd-filter-panel .pos-sales-filter-field + .pos-sales-filter-field {
        margin-top: var(--ui-space-3);
    }
    /* the "missing a shipment method?" dialog has its own footer: its one button spans it like other dialogs */
    .msm-footer {
        display: flex;
    }
    .msm-footer > .btn {
        flex: 1 1 auto;
        min-height: var(--ui-tap);
    }
    /* chart toolbars (z-index 11) slid over the pinned nav bar (6) while scrolling */
    .apexcharts-toolbar {
        z-index: 3;
    }
    /* employee analytics: the five per-person numbers sit three to a row instead of one per screen line */
    .employee-kpis > .row > [class*="col-"] {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
    .employee-kpis > .row > [class*="col-"] > .p-3 {
        padding: var(--ui-space-2) !important;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: auto;
    }
    /* timeline axes (employee analytics): fewer labels, readable size */
    .timeline-hour-label {
        font-size: var(--ui-fs-xs) !important;
    }
    .timeline-hour-label--minor {
        display: none;
    }
    /* badges rendered with an inline pixel size (pick lists) keep the meta floor too */
    .badge[style*="font-size"] {
        font-size: var(--ui-fs-xs) !important;
    }
}

/* Inline filter rows (FC Open orders): one wrapper that doesn't exist for layout, except on touch phones,
   where it stays hidden until the kit opens it as the filter sheet (CD.filters) */
.cd-phone-filters {
    display: contents;
}
/* Bootstrap's .row > * gutter, for the columns the wrapper holds (it takes no part in the layout itself) */
:where(.row > .cd-phone-filters > *) {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .3); /* style.css narrows the .row > * gutter to .3 */
    padding-left: calc(var(--bs-gutter-x) * .3);
    margin-top: var(--bs-gutter-y);
}
.page-filter-row > .cd-phone-filters > [class*="col-"] {
    display: flex;
    flex-direction: column;
}
/* below 768px the filters wait behind their toggle on every device: touch phones open them as the sheet,
   elsewhere (narrow desktop windows, small tablets) the toggle folds them open in place (.is-open) */
@media (max-width: 767.98px) {
    .cd-phone-filters:not(.cd-filter-panel):not(.is-open) {
        display: none;
    }
    .cd-phone-filters.is-open:not(.cd-filter-panel) {
        display: block;
        width: 100%;
    }
    .cd-phone-filters.is-open:not(.cd-filter-panel) > [class*="col-"] {
        width: 100%;
        max-width: none;
        margin: var(--ui-space-3) 0 0 !important;
    }
    [data-cd-filters][aria-expanded="true"] .filter-chevron {
        transform: rotate(180deg);
    }
    [data-cd-filters] .filter-chevron {
        transition: transform .2s ease;
    }
}
@media (max-width: 767.98px) and (hover: none) and (pointer: coarse) {
    .cd-phone-filters:not(.cd-filter-panel) {
        display: none;
    }
    .cd-phone-filters.cd-filter-panel {
        display: block;
    }
    .cd-phone-filters.cd-filter-panel > [class*="col-"] {
        width: 100%;
        max-width: none;
        margin-bottom: var(--ui-space-3);
    }
}

/* ------------------------------------------------------------------
 * G3  Bottom sheet (CD.sheet). Works at every width (on desktop it is a
 *     centred sheet-card), but is only opened automatically on touch.
 * ------------------------------------------------------------------ */
html.cd-sheet-open,
html.cd-sheet-open body {
    overflow: hidden;
    overscroll-behavior: none;
}
/* the shell's bars step aside under an open layer: pages give some dialogs z-index 999, below the tab bar */
html.cd-scroll-locked .ui-tabbar,
html.cd-scroll-locked .main > nav.navbar {
    visibility: hidden;
}
/* touch: the page is pinned while a layer is open (cd-mobile.js lockScroll sets top to the scroll offset) */
html.cd-scroll-locked body {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
}
/* a swipe that reaches the end of a dialog or sheet stays there instead of moving the page */
.modal,
.modal .modal-body,
.modal .modal-content,
.ui-sheet__body {
    overscroll-behavior: contain;
}
.ui-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1990;
    background: var(--ui-backdrop);
    opacity: 0;
    transition: opacity var(--ui-ease-slow);
    -webkit-tap-highlight-color: transparent;
}
.ui-sheet-backdrop.is-open {
    opacity: 1;
}
.ui-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--cd-kb, 0px);
    z-index: 1991;
    display: flex;
    flex-direction: column;
    max-height: calc(92dvh - var(--cd-kb, 0px));
    padding-bottom: var(--ui-safe-bottom);
    background: var(--ui-surface);
    color: var(--ui-text);
    border-radius: var(--ui-radius) var(--ui-radius) 0 0;
    box-shadow: var(--ui-shadow-pop);
    --sheet-x: 0px;
    transform: translate(var(--sheet-x), 105%);
    transition: transform 280ms cubic-bezier(.2, .8, .2, 1), max-height 200ms ease, height 200ms ease;
    overscroll-behavior: contain;
    outline: none;
}
.ui-sheet.is-open {
    transform: translate(var(--sheet-x), var(--sheet-drag, 0px));
}
.ui-sheet.is-dragging {
    transition: none;
}
.ui-sheet--half {
    height: calc(55dvh - var(--cd-kb, 0px));
}
.ui-sheet--full {
    height: calc(92dvh - var(--cd-kb, 0px));
}
.ui-sheet__grab {
    display: flex;
    justify-content: center;
    padding: var(--ui-space-2) 0 var(--ui-space-1);
    touch-action: none;
    cursor: grab;
}
.ui-sheet__handle {
    width: 36px;
    height: 5px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-border-strong);
}
.ui-sheet__head {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: 0 var(--ui-space-2) var(--ui-space-2) var(--ui-space-4);
    touch-action: none;
}
.ui-sheet__title {
    flex: 1;
    margin: 0;
    font-size: var(--ui-fs-lg);
    font-weight: 600;
    line-height: 1.3;
}
.ui-sheet__close {
    flex: none;
    width: var(--ui-tap);
    height: var(--ui-tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--ui-radius-pill);
    background: transparent;
    color: var(--ui-muted);
}
.ui-sheet__close:active {
    background: var(--ui-primary-soft);
}
.ui-sheet__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--ui-space-4) var(--ui-space-3);
}
.ui-sheet__foot {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--ui-space-2);
    padding: var(--ui-space-3) var(--ui-space-4) var(--ui-space-3);
    border-top: 1px solid var(--ui-border);
}
.ui-sheet__foot .btn {
    width: 100%;
    min-height: 48px;
}
@media (min-width: 576px) {
    .ui-sheet {
        left: 50%;
        right: auto;
        width: min(480px, 100vw - 32px);
        bottom: calc(var(--cd-kb, 0px) + var(--ui-space-4));
        border-radius: var(--ui-radius);
        --sheet-x: -50%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ui-sheet,
    .ui-sheet-backdrop {
        transition: none;
    }
}

/* ------------------------------------------------------------------
 * G4  Action sheet rows (CD.actionSheet) and dropdown menus shown in a sheet
 * ------------------------------------------------------------------ */
.ui-action-list {
    display: flex;
    flex-direction: column;
    margin: 0 calc(-1 * var(--ui-space-2));
}
.ui-action-list__item {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    width: 100%;
    min-height: 52px;
    padding: var(--ui-space-2) var(--ui-space-3);
    border: 0;
    border-radius: var(--ui-radius-sm);
    background: transparent;
    color: var(--ui-text);
    font-size: var(--ui-fs-lg);
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}
.ui-action-list__item > i,
.ui-action-list__item > svg,
.ui-action-list__item > img,
.ui-action-list__noicon {
    flex: none;
    width: 24px;
    text-align: center;
    color: var(--ui-muted);
    font-size: var(--ui-fs-lg);
    margin: 0;
}
.ui-action-list__label {
    flex: 1;
    min-width: 0;
}
.ui-action-list__meta {
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
}
.ui-action-list__item:active {
    background: var(--ui-primary-soft);
}
.ui-action-list__item.is-active {
    color: var(--ui-primary);
    font-weight: 600;
}
.ui-action-list__item.is-danger,
.ui-action-list__item.is-danger > i {
    color: var(--ui-danger);
}
.ui-action-list__item:disabled {
    opacity: .45;
}
.ui-action-list__header {
    padding: var(--ui-space-3) var(--ui-space-3) var(--ui-space-1);
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.ui-action-list__divider {
    height: 1px;
    margin: var(--ui-space-1) var(--ui-space-3);
    background: var(--ui-border);
}
/* A real .dropdown-menu moved into a sheet: static, full width, no popup chrome */
.ui-sheet .dropdown-menu.ui-sheet-menu {
    position: static !important;
    display: block;
    inset: auto !important;
    transform: none !important;
    width: 100%;
    min-width: 0;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}

/* ------------------------------------------------------------------
 * G5  Mobile modal anatomy (phones). Every .modal is a full-screen page with a
 *     fixed header (title + close), a scrolling body and a fixed footer with
 *     the primary action full width in the thumb zone. Short dialogs (marked
 *     .cd-modal-sheet by cd-mobile.js, or data-cd-sheet) are bottom sheets.
 *     Opt out with data-cd-no-mobile on the .modal.
 * ------------------------------------------------------------------ */
@media (max-width: 575.98px) {
    /* !important: many dialogs carry inline width/max-width/margin from their desktop layout */
    .modal:not([data-cd-no-mobile]) .modal-dialog {
        width: 100% !important;
        max-width: none !important;
        /* !important: page rules that size one dialog (#id .modal-dialog) must not leave a gap on phones */
        height: calc(100% - var(--cd-kb, 0px)) !important;
        max-height: none !important;
        min-height: 0;
        margin: 0 !important;
        inset: auto !important;
        align-items: stretch;
    }
    .modal:not([data-cd-no-mobile]) .modal-content {
        height: 100%;
        max-height: none;
        border: 0;
        border-radius: 0 !important;
        box-shadow: none;
    }
    /* Forms that wrap body + footer keep the scroll in the body */
    .modal:not([data-cd-no-mobile]) .modal-content > form,
    .modal:not([data-cd-no-mobile]) .modal-content > .modal-form {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }
    .modal:not([data-cd-no-mobile]) .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .modal:not([data-cd-no-mobile]) .modal-header {
        flex: none;
        position: sticky;
        top: 0;
        z-index: 2;
        min-height: 56px;
        align-items: center;
        padding-top: max(var(--ui-space-3), var(--ui-safe-top));
        background: var(--ui-surface);
    }
    .modal:not([data-cd-no-mobile]) .modal-header .btn-close {
        flex: none;
        margin: 0 calc(-1 * var(--ui-space-2)) 0 auto;
        padding: var(--ui-space-3);
    }
    /* title block + ✕: the block takes the row, the ✕ stays top-right (tall heroes no longer push it to a line of its own) */
    .modal:not([data-cd-no-mobile]) .modal-header:has(> .btn-close:last-child) {
        flex-direction: row;
        flex-wrap: nowrap;
    }
    .modal:not([data-cd-no-mobile]) .modal-header:has(> .btn-close:last-child) > :first-child:not(.btn-close) {
        flex: 1 1 auto;
        min-width: 0;
    }
    .modal:not([data-cd-no-mobile]) .modal-header:has(> .btn-close:last-child) > .btn-close {
        align-self: flex-start;
    }
    .modal:not([data-cd-no-mobile]) .modal-header:has(> .btn-close:last-child) > .modal-title {
        text-align: left;
        margin-left: 0;
    }
    .modal:not([data-cd-no-mobile]) .modal-footer {
        flex: none;
        margin-top: auto; /* at the bottom of the screen also when the body isn't a .modal-body */
        flex-wrap: wrap;
        gap: var(--ui-space-2);
        padding: var(--ui-space-3) var(--ui-space-4) max(var(--ui-space-3), var(--ui-safe-bottom));
        background: var(--ui-surface);
        box-shadow: 0 -1px 0 var(--ui-border);
    }
    .modal:not([data-cd-no-mobile]) .modal-footer > * {
        margin: 0;
    }
    .modal:not([data-cd-no-mobile]) .modal-footer > .btn {
        flex: 1 1 auto;
        min-height: 48px;
        min-width: 0;
        white-space: normal;
    }
    /* one footer layout: scan confirms stacked theirs in a column, where the primary's flex share became height */
    .modal:not([data-cd-no-mobile]) .modal-footer {
        flex-direction: row !important;
        align-items: stretch;
    }
    /* Primary takes the room; secondaries stay compact beside it */
    .modal:not([data-cd-no-mobile]) .modal-footer > .btn:is(.btn-primary, .btn-success, .btn-danger, [type=submit]) {
        flex: 2 1 60%;
        order: 9;
    }
    /* Slide up instead of dropping in */
    .modal.fade:not([data-cd-no-mobile]) .modal-dialog {
        transform: translateY(24px);
        transition: transform 240ms cubic-bezier(.2, .8, .2, 1);
    }
    .modal.show:not([data-cd-no-mobile]) .modal-dialog {
        transform: none;
    }

    /* Short dialogs: bottom sheet */
    .modal.cd-modal-sheet .modal-dialog {
        position: fixed;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: var(--cd-kb, 0px) !important;
        height: auto !important;
        max-height: calc(92dvh - var(--cd-kb, 0px)) !important;
        display: flex;
    }
    .modal.cd-modal-sheet .modal-content {
        height: auto;
        max-height: inherit;
        border-radius: var(--ui-radius) var(--ui-radius) 0 0 !important;
        box-shadow: var(--ui-shadow-pop);
    }
    .modal.cd-modal-sheet .modal-content::before {
        content: '';
        align-self: center;
        flex: none;
        width: 36px;
        height: 5px;
        margin-top: var(--ui-space-2);
        border-radius: var(--ui-radius-pill);
        background: var(--ui-border-strong);
    }
    .modal.cd-modal-sheet .modal-header {
        padding-top: var(--ui-space-2);
    }
    .modal.fade.cd-modal-sheet .modal-dialog {
        transform: translateY(100%);
    }
    .modal.show.cd-modal-sheet .modal-dialog {
        transform: none;
    }
}

/* ------------------------------------------------------------------
 * G6  SweetAlert on phones: anchored to the bottom like an action sheet,
 *     buttons full width with the primary on top (swal-theme.css stacks them).
 *     Toasts stay where they are.
 * ------------------------------------------------------------------ */
@media (max-width: 575.98px) {
    body .swal2-container.swal2-center:not(.swal2-toast-shown) {
        align-items: flex-end !important;
        padding: 0 !important;
    }
    body .swal2-container.swal2-center > .swal2-popup:not(.swal2-toast) {
        width: 100% !important;
        max-width: none;
        margin: 0 0 var(--cd-kb, 0px) !important;
        padding-bottom: max(var(--ui-space-4), var(--ui-safe-bottom));
        border-radius: var(--ui-radius) var(--ui-radius) 0 0;
    }
    body .swal2-container.swal2-center > .swal2-popup:not(.swal2-toast) .swal2-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
    body .swal2-container.swal2-center > .swal2-popup:not(.swal2-toast) .swal2-styled {
        width: 100%;
        min-height: 48px;
        margin: 0;
    }
    body .swal2-container.swal2-center > .swal2-popup.swal2-show:not(.swal2-toast) {
        animation: cd-sheet-up 260ms cubic-bezier(.2, .8, .2, 1);
    }
}
@keyframes cd-sheet-up {
    from { transform: translateY(100%); }
    to { transform: none; }
}

/* ------------------------------------------------------------------
 * G14  Quantity stepper (− n +). Works everywhere; the buttons are 44px on touch.
 * ------------------------------------------------------------------ */
.ui-stepper {
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    overflow: hidden;
}
.ui-stepper > button {
    flex: none;
    width: var(--ui-control-h);
    border: 0;
    background: transparent;
    color: var(--ui-primary);
    font-size: var(--ui-fs-lg);
    font-weight: 600;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.ui-stepper > button:active {
    background: var(--ui-primary-soft);
}
.ui-stepper > button:disabled {
    color: var(--ui-faint);
}
.ui-stepper > input {
    width: 4.5em;
    min-width: 0;
    min-height: var(--ui-control-h);
    border: 0;
    border-inline: 1px solid var(--ui-border);
    background: transparent;
    color: var(--ui-text);
    text-align: center;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}
.ui-stepper > input::-webkit-outer-spin-button,
.ui-stepper > input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ui-stepper > input:focus {
    outline: none;
    background: var(--ui-primary-soft);
}
@media (hover: none) and (pointer: coarse) {
    .ui-stepper > button {
        width: var(--ui-tap);
    }
}

/* ------------------------------------------------------------------
 * G10  Action bar + the bottom stack. One stack from the bottom edge up:
 *      tab bar (G18) → action bar → snackbar (G22). Each layer reads the
 *      heights below it from variables that cd-mobile.js keeps current.
 *
 *      <div class="ui-actionbar"> … buttons … </div>
 *      Inline (a normal button row) from 768px; a fixed bar in the thumb zone below that.
 *      .ui-actionbar--always: fixed at every width (bulk selection, unsaved changes).
 *      .ui-actionbar__info: a short status text on the left ("3 selected").
 * ------------------------------------------------------------------ */
:root {
    --cd-tabbar-h: 0px;
    --cd-actionbar-h: 0px;
    --cd-bottom-stack: calc(var(--cd-tabbar-h) + var(--cd-actionbar-h));
}
.ui-actionbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-2);
}
.ui-actionbar[hidden] {
    display: none !important;
}
.ui-actionbar__info {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    font-weight: 600;
}
.ui-actionbar--always,
html.cd-actionbar-fixed .ui-actionbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--cd-tabbar-h) + var(--cd-kb, 0px));
    z-index: 1035;
    flex-wrap: nowrap;
    padding: var(--ui-space-2) max(var(--ui-space-4), var(--ui-safe-right)) var(--ui-space-2) max(var(--ui-space-4), var(--ui-safe-left));
    background: var(--ui-surface);
    box-shadow: 0 -1px 0 var(--ui-border), 0 -6px 18px rgba(var(--ui-text-rgb), .06);
    animation: cd-bar-up 220ms cubic-bezier(.2, .8, .2, 1);
}
/* No tab bar under it: the bar itself clears the home indicator */
html:not(.cd-has-tabbar) .ui-actionbar--always,
html.cd-actionbar-fixed:not(.cd-has-tabbar) .ui-actionbar {
    padding-bottom: max(var(--ui-space-2), var(--ui-safe-bottom));
}
@media (max-width: 767.98px) {
    .ui-actionbar:not(.ui-actionbar--inline) {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(var(--cd-tabbar-h) + var(--cd-kb, 0px));
        z-index: 1035;
        flex-wrap: nowrap;
        padding: var(--ui-space-2) var(--ui-space-4);
        background: var(--ui-surface);
        box-shadow: 0 -1px 0 var(--ui-border), 0 -6px 18px rgba(var(--ui-text-rgb), .06);
        animation: cd-bar-up 220ms cubic-bezier(.2, .8, .2, 1);
    }
    html:not(.cd-has-tabbar) .ui-actionbar:not(.ui-actionbar--inline) {
        padding-bottom: max(var(--ui-space-2), var(--ui-safe-bottom));
    }
    .ui-actionbar:not(.ui-actionbar--inline) > .btn {
        flex: 1 1 0;
        min-height: 48px;
        min-width: 0;
    }
    .ui-actionbar:not(.ui-actionbar--inline) > .btn:is(.btn-primary, .btn-success, .btn-danger) {
        flex-grow: 2;
    }
    /* keyboard open: a form's save bar rides on the keyboard, other bars step aside */
    html.cd-kb-open .ui-actionbar:not(.ui-actionbar--keyboard) {
        display: none;
    }
}
/* Content never ends under the stack */
html.cd-has-bottom-stack #shell-content-root,
html.cd-has-bottom-stack .ui-bottom-pad {
    padding-bottom: calc(var(--cd-bottom-stack) + var(--ui-space-4)) !important;
}
@keyframes cd-bar-up {
    from { transform: translateY(100%); }
    to { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ui-actionbar {
        animation: none !important;
    }
}
@media (max-width: 767.98px) {
    html.cd-actionbar-priority .ui-actionbar:not(.ui-actionbar--always):not(.ui-actionbar--inline) {
        display: none;
    }
}

/* ------------------------------------------------------------------
 * G11  Page header on phones: title on its own line, then the primary
 *      action, filter toggle and ⋯ (cd-mobile.js folds the rest).
 * ------------------------------------------------------------------ */
.cd-header-more {
    display: none !important;
}
@media (max-width: 575.98px) {
    .cd-header-folded > .cd-header-fold {
        display: none !important;
    }
    .cd-header-folded {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch;
        gap: var(--ui-space-2);
        width: 100%;
    }
    .cd-header-folded > * {
        margin: 0 !important;
        width: auto !important;
    }
    .cd-header-folded > .cd-header-primary {
        flex: 1 1 auto;
        min-width: 0;
    }
    .cd-header-folded > .cd-header-more {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex: none;
        width: var(--ui-tap);
        min-width: var(--ui-tap);
        padding: 0;
    }
    /* Subtitles: two lines at most */
    .page-header .subtitle,
    .ui-page-header .subtitle {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ------------------------------------------------------------------
 * G12  Tabs on phones: >5 tabs show as one picker button (cd-mobile.js)
 * ------------------------------------------------------------------ */
.cd-tab-picker {
    display: none !important;
}
@media (max-width: 575.98px) {
    .cd-tabs-picker {
        display: none !important;
    }
    .cd-tab-picker {
        display: flex !important;
        align-items: center;
        gap: var(--ui-space-2);
        width: 100%;
        min-height: var(--ui-tap);
        margin-bottom: var(--ui-space-3);
        font-weight: 600;
        text-align: left;
    }
    .cd-tab-picker__label {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .cd-tab-picker__chev {
        color: var(--ui-muted);
        font-size: var(--ui-fs-sm);
    }
    /* segmented rows that stay: comfortable to thumb through */
    .nav-tabs:not(.cd-tabs-picker),
    .nav-pills:not(.cd-tabs-picker) {
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
    }
    .nav-tabs .nav-link,
    .nav-pills .nav-link {
        scroll-snap-align: center;
        white-space: nowrap;
    }
}

/* ------------------------------------------------------------------
 * G8  Pickers on touch phones: Select2, bootstrap-select and the date range
 *     picker open as bottom sheets with 48px options. Plain <select> stays native.
 * ------------------------------------------------------------------ */
@media (max-width: 767.98px) and (hover: none) and (pointer: coarse) {
    /* Select2: the dropdown container becomes a backdrop, the dropdown a sheet */
    .select2-container.select2-container--open:has(> .select2-dropdown) {
        position: fixed !important;
        inset: 0 !important;
        width: auto !important;
        height: auto !important;
        z-index: 2000;
        background: var(--ui-backdrop);
        animation: cd-fade-in 180ms ease;
    }
    .select2-container--open > .select2-dropdown {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: var(--cd-kb, 0px) !important;
        width: 100% !important;
        max-height: calc(85dvh - var(--cd-kb, 0px));
        display: flex;
        flex-direction: column;
        padding-bottom: var(--ui-safe-bottom);
        border: 0 !important;
        border-radius: var(--ui-radius) var(--ui-radius) 0 0 !important;
        background: var(--ui-surface);
        box-shadow: var(--ui-shadow-pop);
        overflow: hidden;
        animation: cd-sheet-up 240ms cubic-bezier(.2, .8, .2, 1);
    }
    .select2-container--open > .select2-dropdown .select2-search--dropdown {
        flex: none;
        padding: var(--ui-space-2) var(--ui-space-4);
    }
    .select2-container--open > .select2-dropdown .select2-search__field {
        min-height: var(--ui-tap);
        border-radius: var(--ui-radius-sm);
    }
    .select2-container--open > .select2-dropdown .select2-results {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .select2-container--open > .select2-dropdown .select2-results > .select2-results__options {
        max-height: none !important;
        flex: 1 1 auto;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 var(--ui-space-2) var(--ui-space-2);
    }
    .select2-container--open > .select2-dropdown .select2-results__option {
        padding: var(--ui-space-2) var(--ui-space-3);
        border-radius: var(--ui-radius-sm);
        font-size: var(--ui-fs-lg);
    }
    .cd-select2-head {
        display: flex;
        align-items: center;
        gap: var(--ui-space-2);
        flex: none;
        padding: var(--ui-space-3) var(--ui-space-2) 0 var(--ui-space-4);
    }
    .cd-select2-head__title {
        flex: 1;
        min-width: 0;
        margin: 0;
        font-size: var(--ui-fs-lg);
        font-weight: 600;
    }

    /* bootstrap-select: its menu as a sheet */
    .bootstrap-select.show > .dropdown-menu {
        position: fixed !important;
        inset: auto 0 var(--cd-kb, 0px) 0 !important;
        transform: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-height: calc(85dvh - var(--cd-kb, 0px)) !important;
        margin: 0 !important;
        padding: var(--ui-space-2) var(--ui-space-2) max(var(--ui-space-2), var(--ui-safe-bottom)) !important;
        border: 0 !important;
        border-radius: var(--ui-radius) var(--ui-radius) 0 0 !important;
        box-shadow: 0 0 0 100vmax var(--ui-backdrop), var(--ui-shadow-pop) !important;
        z-index: 2000 !important;
        animation: cd-sheet-up 240ms cubic-bezier(.2, .8, .2, 1);
    }
    .bootstrap-select.show > .dropdown-menu .inner {
        max-height: calc(70dvh - var(--cd-kb, 0px)) !important;
        overscroll-behavior: contain;
    }
    .bootstrap-select .dropdown-menu li a {
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    /* Date range picker: a sheet with presets as chips and native date fields (cd-mobile.js) */
    .daterangepicker {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: var(--cd-kb, 0px) !important;
        width: 100% !important;
        max-width: none !important;
        max-height: calc(88dvh - var(--cd-kb, 0px));
        margin: 0 !important;
        padding-bottom: var(--ui-safe-bottom);
        overflow-y: auto;
        overscroll-behavior: contain;
        border: 0 !important;
        border-radius: var(--ui-radius) var(--ui-radius) 0 0 !important;
        box-shadow: 0 0 0 100vmax var(--ui-backdrop), var(--ui-shadow-pop) !important;
        z-index: 2000 !important;
    }
    .daterangepicker::before,
    .daterangepicker::after {
        display: none !important;
    }
    .daterangepicker .ranges {
        float: none !important;
        width: 100%;
        margin: 0 !important;
    }
    .daterangepicker .ranges ul {
        display: flex;
        gap: var(--ui-space-2);
        width: 100% !important;
        padding: var(--ui-space-3) var(--ui-space-4) var(--ui-space-1);
        overflow-x: auto;
        scrollbar-width: none;
    }
    .daterangepicker .ranges li {
        flex: none;
        min-height: 40px;
        display: flex;
        align-items: center;
        padding: 0 var(--ui-space-3) !important;
        border: 1px solid var(--ui-border-strong);
        border-radius: var(--ui-radius-pill) !important;
        white-space: nowrap;
        font-size: var(--ui-fs-md) !important;
    }
    .daterangepicker .ranges li.active {
        border-color: var(--ui-primary);
        background: var(--ui-primary) !important;
        color: #fff !important;
    }
    .daterangepicker.cd-drp-native .drp-calendar {
        display: none !important;
    }
    .daterangepicker .cd-drp-native-fields {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* a date input's own width no longer pushes "To" off the sheet */
        gap: var(--ui-space-3);
        padding: var(--ui-space-3) var(--ui-space-4);
    }
    .cd-drp-native-fields input[type=date] {
        width: 100%;
        min-width: 0;
    }
    .cd-drp-native-fields label {
        display: block;
        margin-bottom: var(--ui-space-1);
        color: var(--ui-muted);
        font-size: var(--ui-fs-sm);
    }
    .daterangepicker .drp-buttons {
        display: flex !important;
        flex-wrap: wrap;
        gap: var(--ui-space-2);
        padding: var(--ui-space-3) var(--ui-space-4) !important;
    }
    .daterangepicker .drp-buttons .drp-selected {
        flex: 1 1 100%;
        padding: 0 !important;
    }
    .daterangepicker .drp-buttons .btn {
        flex: 1 1 0;
        min-height: 48px;
        margin: 0 !important;
    }
    .daterangepicker .drp-buttons .applyBtn {
        flex-grow: 2;
        order: 9;
    }
}
.cd-drp-native-fields {
    display: none;
}
@keyframes cd-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ------------------------------------------------------------------
 * G7  Filter sheet + chips (cd-mobile.js). Phones only; desktop keeps its panels.
 * ------------------------------------------------------------------ */
.cd-filter-chips,
.cd-filter-count {
    display: none !important;
}
@media (max-width: 767.98px) and (hover: none) and (pointer: coarse) {
    .cd-filter-count:not([hidden]) {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 22px;
        height: 22px;
        margin-left: var(--ui-space-2);
        padding: 0 6px;
        border-radius: var(--ui-radius-pill);
        background: var(--ui-primary);
        color: #fff;
        font-size: var(--ui-fs-xs);
        font-weight: 700;
    }
    .cd-filter-chips:not([hidden]) {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: center;
        gap: var(--ui-space-2);
        margin: var(--ui-space-2) 0 var(--ui-space-3);
        padding-bottom: 2px;
        overflow-x: auto;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }
    /* next to a primary action the filter toggle takes the rest of the row; its count badge never wraps the row */
    :is(.main-buttons, .page-header-toolbar) > .filter-toggle-btn {
        flex: 1 1 0;
        min-width: var(--ui-tap);
    }
    :is(.main-buttons, .page-header-toolbar) > .filter-toggle-btn > span:first-child {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    /* sharing the row with other header buttons, the filter toggle is a square funnel (plus its count) on every
       page, instead of a label cut to "Filte…" or squeezed to nothing; the label stays for screen readers */
    :is(.main-buttons, .page-header-toolbar):has(> :is(.btn, .btn-group, .dropdown):not(.filter-toggle-btn)) > .filter-toggle-btn {
        flex: none;
        min-width: var(--ui-tap);
        padding-inline: 12px;
    }
    :is(.main-buttons, .page-header-toolbar):has(> :is(.btn, .btn-group, .dropdown):not(.filter-toggle-btn)) > .filter-toggle-btn > span:first-child {
        font-size: 0;
        gap: 0;
    }
    :is(.main-buttons, .page-header-toolbar):has(> :is(.btn, .btn-group, .dropdown):not(.filter-toggle-btn)) > .filter-toggle-btn > span:first-child > i {
        margin: 0 !important;
        font-size: 16px;
    }
    .cd-filter-chips.is-reserved {
        min-height: 38px; /* one chip row, until the date range chip arrives */
    }
    /* first paint comes before the kit runs: a filter row with a date range already holds the chip row's place */
    html.cd-booting body:has(.collapse input[id*="daterange" i]) :is(.filter-column, .main-buttons, .page-header-toolbar):has(.filter-toggle-btn[data-bs-target]):not(:has(+ .cd-filter-chips)) {
        padding-bottom: calc(38px + var(--ui-space-2) + var(--ui-space-3)); /* padding: the row keeps its own margin */
    }
    .cd-filter-chips::-webkit-scrollbar {
        display: none;
    }
    .cd-filter-chip {
        display: inline-flex;
        align-items: center;
        flex: none;
        max-width: 80vw;
        height: 36px;
        min-height: 0;
        margin: 0;
        padding: 0 var(--ui-space-1) 0 var(--ui-space-3);
        line-height: 1.2;
        border: 1px solid var(--ui-primary-line);
        border-radius: var(--ui-radius-pill);
        background: var(--ui-primary-soft);
        color: var(--ui-text);
        font-size: var(--ui-fs-sm);
        white-space: nowrap;
    }
    .cd-filter-chip.is-fixed {
        padding-right: var(--ui-space-3);
    }
    .cd-filter-chip__label {
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .cd-filter-chip__label b {
        font-weight: 600;
    }
    .cd-filter-chip__remove {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        margin-left: var(--ui-space-1);
        border: 0;
        border-radius: var(--ui-radius-pill);
        background: transparent;
        color: var(--ui-muted);
    }
    .cd-filter-chip__remove::after {
        content: '';
        position: absolute;
        inset: -8px;
    }
    /* the page's own panel inside the sheet: no card chrome */
    .ui-sheet .cd-filter-panel {
        display: block !important;
        height: auto !important;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    .ui-sheet .cd-filter-panel > .card-body {
        padding: 0 !important;
    }
}

/* ------------------------------------------------------------------
 * G9  Table card mode (phones). cd-mobile.js tags each DataTable row/cell; here
 *     the real <tr> becomes a card: checkbox + title (+ status) + actions on top,
 *     then label/value lines. Header row, column widths and the sideways scroll go.
 * ------------------------------------------------------------------ */
.cd-sort-btn {
    display: none !important;
}
@media (max-width: 575.98px) {
    /* Visually hidden, not display:none: DataTables 1.13 resolves ':visible' column selectors (exports,
       CD.table.exportColumns) from the header cells' jQuery visibility */
    .cd-cards-wrap .dataTables_scrollHead,
    .cd-cards-wrap .dataTables_scrollFoot,
    table.cd-cards > thead,
    table.cd-cards > tfoot {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
        pointer-events: none;
    }
    .cd-cards-wrap .dataTables_scroll {
        clear: both; /* the toolbar floats; the cards start below it */
    }
    /* set by cd-mobile.js (bleedCards): out to the page's content edges */
    .cd-bleed {
        margin-left: var(--cd-bleed-l, 0px) !important;
        margin-right: var(--cd-bleed-r, 0px) !important;
    }
    .cd-cards-wrap .dataTables_scroll,
    .cd-cards-wrap .dataTables_scrollBody {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        border: 0 !important;
    }
    table.cd-cards,
    table.cd-cards > tbody {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }
    table.cd-cards > tbody > tr.cd-card {
        position: relative;
        display: flex !important; /* page rules that grid their rows for phones (home widgets) */
        flex-wrap: wrap;
        align-items: flex-start;
        margin: 0 0 var(--ui-space-2);
        padding: var(--ui-space-1) var(--ui-space-3) var(--ui-space-2);
        border: 1px solid var(--ui-border);
        border-radius: var(--ui-radius-lg, var(--ui-radius));
        background: var(--ui-surface) !important;
        box-shadow: 0 1px 2px rgba(var(--ui-ink-rgb, 15, 23, 42), .04);
        -webkit-tap-highlight-color: transparent;
    }
    table.cd-cards > tbody > tr.cd-card:active {
        background: var(--ui-subtle) !important;
    }
    /* a pre-checked row (bulk actions apply to all by default) looks like any card; the tint is for
       choosing rows (long-press selection mode) and DataTables' own row selection */
    table.cd-cards > tbody > tr.cd-card.selected,
    .cd-selecting table.cd-cards > tbody > tr.cd-card:has(.ui-row-select:checked, .cd-c-select input:checked) {
        border-color: var(--ui-primary-line);
        background: var(--ui-primary-soft) !important;
    }
    table.cd-cards > tbody > tr.cd-card > td {
        display: block;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 2px var(--ui-space-1) !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-align: left !important;
        white-space: normal !important;
        overflow: visible !important;
    }
    /* top line: [select] title [status] [actions] */
    /* the checkbox sits centred in its own 44px column, so its whole hit area stays inside the card */
    table.cd-cards > tbody > tr.cd-card > td.cd-c-select {
        order: 0;
        flex: none;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: var(--ui-tap) !important;
        min-width: var(--ui-tap) !important;
        min-height: var(--ui-tap);
        padding: 0 !important;
    }
    /* older phone layouts label every cell with td::before; on a card only the field lines carry labels */
    table.cd-cards td:is(.cd-c-title, .cd-c-status, .cd-c-actions, .cd-c-media, .cd-c-select)::before {
        display: none !important;
    }
    table.cd-cards td.cd-c-media {
        order: 1;
        flex: none;
        display: flex !important;
        align-items: center;
        min-height: var(--ui-tap);
        padding-right: var(--ui-space-2) !important;
    }
    table.cd-cards td.cd-c-media :is(img, .img-bg-thumbnail) {
        max-width: 44px;
        max-height: 44px;
        border-radius: var(--ui-radius-sm);
    }
    table.cd-cards td.cd-c-title {
        order: 1;
        flex: 1 1 0;
        display: flex !important;
        align-items: center;
        min-height: var(--ui-tap);
        font-size: var(--ui-fs-lg);
    }
    /* status: its own line under the title (long titles never collide with the pill) */
    table.cd-cards td.cd-c-status {
        order: 5;
        flex: 1 1 100%;
        display: flex !important;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--ui-space-1);
        padding-bottom: 2px !important;
    }
    table.cd-cards td.cd-c-select ~ td.cd-c-status {
        margin-left: var(--ui-tap);
    }
    /* the header (select, media, title, actions, status) ends the first line: fields never join it */
    table.cd-cards > tbody > tr.cd-card::after {
        content: "";
        order: 9;
        flex: 0 0 100%;
        height: 0;
    }
    table.cd-cards td.cd-c-actions {
        order: 3;
        flex: none;
        display: flex !important;
        align-items: center;
        min-height: var(--ui-tap);
    }
    /* label/value lines under the top line: the full card width, label left, value right, centred on one
       line (like a native detail list); a hairline separates them from the header */
    table.cd-cards td.cd-c-field {
        order: 10;
        flex: 1 1 100%;
        display: grid !important;
        grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
        align-items: center;
        gap: var(--ui-space-3);
        min-height: 30px;
        padding-block: 2px !important;
        font-size: var(--ui-fs-md);
    }
    table.cd-cards > tbody > tr.cd-card > td.cd-c-field.cd-first-field {
        margin-top: var(--ui-space-1);
        padding-top: var(--ui-space-2) !important;
        box-shadow: inset 0 1px 0 var(--ui-border) !important;
    }
    /* short values (numbers, dates, prices) two to a line as small stats: label above, value below */
    table.cd-cards td.cd-c-field.cd-c-field--short {
        flex: 1 1 calc(50% - 2px);
        box-sizing: border-box;
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        min-height: 0;
        padding-block: var(--ui-space-1) !important;
    }
    table.cd-cards td.cd-c-field.cd-c-field--short::before {
        font-size: var(--ui-fs-xs);
        -webkit-line-clamp: 1;
    }
    table.cd-cards td.cd-c-field.cd-c-field--short > .cd-v,
    table.cd-cards td.cd-c-field.cd-c-field--short > .cd-v > *,
    table.cd-cards td.cd-c-field.cd-c-field--short > .cd-v :is(.text-center, .text-start, .text-end) {
        align-items: flex-start;
        justify-content: flex-start;
        text-align: left !important;
    }
    table.cd-cards td.cd-c-field.cd-c-field--short > .cd-v {
        font-weight: 600;
    }
    table.cd-cards td.cd-c-field::before {
        content: attr(data-label);
        text-align: left;
        text-transform: none;
        letter-spacing: normal;
        color: var(--ui-muted);
        font-size: var(--ui-fs-sm);
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    table.cd-cards td.cd-c-field > .cd-v {
        min-width: 0;
        overflow-wrap: anywhere;
        text-align: right;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
    }
    table.cd-cards td.cd-c-field > .cd-v > *,
    table.cd-cards td.cd-c-field > .cd-v .text-center,
    table.cd-cards td.cd-c-field > .cd-v .text-start,
    table.cd-cards td.cd-c-field > .cd-v .text-end {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        text-align: right !important;
        justify-content: flex-end;
        align-items: flex-end;
    }
    /* a select or field as the value fills the value column and reads left to right */
    table.cd-cards td.cd-c-field > .cd-v > :is(select, .form-select, input.form-control, .input-group) {
        width: 100%;
        text-align: left !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    /* page-level nowrap (text-nowrap, inline white-space) would push long names out of the card */
    table.cd-cards > tbody > tr.cd-card > td {
        white-space: normal !important;
    }
    table.cd-cards td.cd-c-title {
        overflow-wrap: anywhere;
        min-width: 0;
    }
    /* a list of badges (permissions, tags) flows as wrapped chips under its label, not one badge per line */
    table.cd-cards td.cd-c-field:has(> .cd-v > .badge:nth-child(3)) {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--ui-space-1);
    }
    table.cd-cards td.cd-c-field > .cd-v:has(> .badge:nth-child(3)) {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        gap: 4px;
        text-align: left;
    }
    table.cd-cards td.cd-c-field > .cd-v:has(> .badge:nth-child(3)) > * {
        margin: 0 !important;
        text-align: left !important;
    }
    /* the card that holds the table steps back: the rows are the cards now */
    :is(.card, .ui-card):has(.cd-cards-wrap):not(:has(:is(.card, .ui-card) .cd-cards-wrap)) {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important; /* .table-column cards scroll (overflow:auto) and clipped the bled-out cards' edges */
    }
    :is(.card, .ui-card):has(.cd-cards-wrap):not(:has(:is(.card, .ui-card) .cd-cards-wrap)) > :is(.card-body, .ui-card__body) {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important; /* the list starts where any other content starts under the page header */
        margin-top: 0 !important;
        background: transparent !important;
    }
    table.cd-cards td.cd-c-field:not([data-label])::before,
    table.cd-cards td.cd-c-field[data-label=""]::before {
        display: none;
    }
    table.cd-cards td.cd-c-field:not([data-label]),
    table.cd-cards td.cd-c-field[data-label=""] {
        grid-template-columns: minmax(0, 1fr);
    }
    table.cd-cards td.cd-c-field:not([data-label]) > .cd-v,
    table.cd-cards td.cd-c-field[data-label=""] > .cd-v {
        align-items: flex-start;
        text-align: left;
    }
    table.cd-cards td.cd-c-empty,
    table.cd-cards td.cd-c-hidden {
        display: none !important;
    }
    /* responsive-extension tables: every cell on the card, no child rows */
    table.cd-cards td.dtr-hidden {
        display: grid !important;
    }
    table.cd-cards > tbody > tr.child {
        display: none !important;
    }
    table.cd-cards td.dtr-control::before {
        display: none !important;
    }
    /* empty / processing rows stay plain */
    table.cd-cards > tbody > tr:not(.cd-card) {
        display: block;
    }
    table.cd-cards > tbody > tr:not(.cd-card) > td {
        display: block;
        width: auto !important;
        border: 0 !important;
    }
    .cd-cards-wrap .cd-sort-btn {
        display: inline-flex !important;
        align-items: center;
        gap: var(--ui-space-2);
        max-width: 100%;
        margin: 0 0 var(--ui-space-2);
    }
    .cd-cards-wrap .cd-sort-btn span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ------------------------------------------------------------------
 * G18  Bottom tab bar (phones; behind the `tabbar` flag until the
 *      destinations are confirmed). 56px + safe area, icon + label, badges.
 * ------------------------------------------------------------------ */
.ui-tabbar,
.cd-nav-more-item {
    display: none;
}
@media (max-width: 767.98px) {
    html.cd-flag-tabbar .ui-tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1036;
        display: flex;
        align-items: stretch;
        height: calc(56px + var(--ui-safe-bottom));
        padding: 0 var(--ui-safe-right) var(--ui-safe-bottom) var(--ui-safe-left);
        background: color-mix(in srgb, var(--ui-surface) 92%, transparent);
        -webkit-backdrop-filter: saturate(1.6) blur(16px);
        backdrop-filter: saturate(1.6) blur(16px);
        box-shadow: 0 -1px 0 var(--ui-border);
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }
    html.cd-flag-tabbar {
        --cd-tabbar-h: calc(56px + var(--ui-safe-bottom));
    }
    /* the keyboard is up: the tab bar steps aside, like native apps */
    html.cd-flag-tabbar.cd-kb-open .ui-tabbar {
        display: none;
    }
    /* the More screen's ☰ sits at the right end of the top bar, after the profile button */
    html.cd-flag-tabbar .cd-nav-more-item {
        display: flex;
        align-items: center;
    }
    /* a big, easy ☰: a soft 46px tile at the far right of the top bar */
    .cd-nav-more {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-left: var(--ui-space-1);
        padding: 0;
        border: 0;
        border-radius: 14px;
        background: var(--ui-primary-soft);
        color: var(--ui-primary);
        font-size: 1.3rem;
        transition: transform .12s ease, background-color .12s ease;
    }
    .cd-nav-more:active {
        transform: scale(.94);
        background: color-mix(in srgb, var(--ui-primary) 18%, transparent);
    }
    /* the profile menu lives in More on phones (profile card + Account rows) */
    html.cd-flag-tabbar .main > nav.navbar .navbar-align > li:has(.dropdown-menu a[href*="logout"]) {
        display: none !important;
    }
    html.cd-flag-tabbar.cd-kb-open {
        --cd-tabbar-h: 0px;
    }
    .ui-tabbar__tab {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 6px 2px 4px;
        border: 0;
        background: transparent;
        color: var(--ui-muted);
        font-size: 12px;
        font-weight: 500;
        line-height: 1.1;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    .ui-tabbar__icon {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 26px;
        font-size: 20px;
        transition: transform 120ms ease;
    }
    .ui-tabbar__tab:active .ui-tabbar__icon {
        transform: scale(.88);
    }
    .ui-tabbar__label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .ui-tabbar__tab.is-active {
        color: var(--ui-primary);
        font-weight: 600;
    }
    .ui-tabbar__badge {
        position: absolute;
        top: -4px;
        left: 60%;
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        border: 2px solid var(--ui-surface);
        border-radius: var(--ui-radius-pill);
        background: var(--ui-danger);
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
    }
    .ui-tabbar__badge[hidden] {
        display: none;
    }
    /* nothing of the old shell floats over the tab bar */
    html.cd-flag-tabbar #floatingButton {
        display: none !important;
    }
}

/* ------------------------------------------------------------------
 * G17  "More" screen (CD.more): grouped list like a native settings screen
 * ------------------------------------------------------------------ */
.ui-sheet--more .ui-sheet__body {
    padding-top: 0;
    background: var(--ui-page);
}
.ui-more__search {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    margin: 0 calc(-1 * var(--ui-space-4));
    padding: var(--ui-space-2) var(--ui-space-4);
    background: var(--ui-page);
}
.ui-more__search > i {
    position: absolute;
    left: calc(var(--ui-space-4) + 14px);
    color: var(--ui-muted);
    pointer-events: none;
}
.ui-more__search .form-control {
    padding-left: 40px;
    border-radius: var(--ui-radius);
}
.ui-more__group {
    margin-top: var(--ui-space-4);
}
/* a sub menu inside a section card: a header row (icon + name), its pages indented under the name */
.ui-more__subhead {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    min-height: 48px;
    padding: var(--ui-space-2) var(--ui-space-3) 0;
    color: var(--ui-text);
    font-size: var(--ui-fs-lg);
    font-weight: 600;
}
.ui-more__row + .ui-more__subhead,
.ui-more__subhead + .ui-more__subhead {
    margin-top: var(--ui-space-1);
    box-shadow: inset 0 1px 0 var(--ui-border);
}
/* signed-in user at the top of More */
.ui-more__profile {
    margin-top: var(--ui-space-3);
    min-height: 68px;
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
}
.ui-more__avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ui-primary);
    color: #fff;
    font-weight: 700;
    font-size: var(--ui-fs-md);
}
.ui-more__profile-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.ui-more__profile-text strong {
    font-size: var(--ui-fs-lg);
}
.ui-more__profile-text small {
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ui-more__rows .ui-more__row--child {
    min-height: 44px;
    padding-left: calc(var(--ui-space-3) + 32px + var(--ui-space-3));
}
.ui-more__rows .ui-more__row--child .ui-more__label {
    font-size: var(--ui-fs-md);
}
/* the hairline between child rows starts at the text, like an iOS list */
.ui-more__rows .ui-more__row + .ui-more__row--child,
.ui-more__rows .ui-more__subhead + .ui-more__row--child {
    box-shadow: none;
    background-image: linear-gradient(var(--ui-border), var(--ui-border));
    background-size: calc(100% - (var(--ui-space-3) + 32px + var(--ui-space-3))) 1px;
    background-position: right top;
    background-repeat: no-repeat;
}
.ui-more__rows .ui-more__subhead + .ui-more__row--child {
    background-image: none;
}
.ui-more__rows .ui-more__row--plain {
    min-height: 48px;
}
.ui-more__title {
    margin: 0 0 var(--ui-space-2) var(--ui-space-2);
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.ui-more__rows {
    overflow: hidden;
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
}
.ui-more__row {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    min-height: 52px;
    padding: var(--ui-space-2) var(--ui-space-3);
    color: var(--ui-text) !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
}
.ui-more__row + .ui-more__row {
    box-shadow: inset 0 1px 0 var(--ui-border);
}
.ui-more__row:active {
    background: var(--ui-primary-soft);
}
.ui-more__row.is-active {
    color: var(--ui-primary) !important;
    font-weight: 600;
}
.ui-more__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
}
.ui-more__icon > svg {
    width: 18px;
    height: 18px;
}
.ui-more__icon > i {
    font-size: var(--ui-fs-md);
}
.ui-more__label {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-size: var(--ui-fs-lg);
    line-height: 1.25;
}
.ui-more__label small {
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
    font-weight: 500;
}
.ui-more__chev {
    flex: none;
    color: var(--ui-faint);
    font-size: var(--ui-fs-sm);
}

/* ------------------------------------------------------------------
 * G19  Navigation bar (flag `nav`, phones): back · compact title · search ·
 *      profile. The large page title stays in the page; when it scrolls under
 *      the bar, the bar shows it (html.cd-nav-compact). Directional view
 *      transitions per navigation type (cd-mobile.js sets the type).
 * ------------------------------------------------------------------ */
.cd-nav-title,
.cd-nav-back {
    display: none;
}
@media (max-width: 767.98px) {
    /* fixed, not sticky: below 1024px .main scrolls sideways (overflow-x: auto), which would trap a sticky bar */
    html.cd-nav .main > nav.navbar {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1030;
        height: calc(56px + var(--ui-safe-top));
        min-height: 0;
        padding-top: var(--ui-safe-top);
        view-transition-name: cd-navbar;
    }
    html.cd-nav .main {
        padding-top: calc(56px + var(--ui-safe-top));
    }
    html.cd-flag-tabbar.cd-nav #sidebar-collapse-toggle,
    html.cd-flag-tabbar.cd-nav .main > nav.navbar > a.sidebar-toggle,
    html.cd-nav .main > nav.navbar :is(#languageDropdown, #deploymentEnvironmentDropdown, a.nav-icon[href*="dark_mode"], a.nav-icon[href*="support"], .open-sidebar-icon-menu, #sidebar-tutorial-video-nav-item) {
        display: none !important;
    }
    html.cd-nav .main > nav.navbar .nav-item:has(> :is(#languageDropdown, #deploymentEnvironmentDropdown, a.nav-icon[href*="dark_mode"], a.nav-icon[href*="support"])) {
        display: none !important;
    }
    /* search: a rounded search bar filling the space between back and profile */
    html.cd-nav #spotlight-trigger-btn {
        flex: 1 1 auto;
        width: auto !important;
        max-width: none !important;
        height: 36px !important;
        min-height: 0 !important;
        margin: 0 var(--ui-space-2) !important;
        border-color: transparent !important;
        border-radius: var(--ui-radius-pill) !important;
        background: var(--ui-subtle) !important;
        justify-content: flex-start;
    }
    html.cd-nav.cd-nav-compact #spotlight-trigger-btn {
        visibility: hidden;
    }
    .cd-nav-back {
        position: relative;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: var(--ui-tap);
        height: var(--ui-tap);
        margin-left: calc(-1 * var(--ui-space-2));
        border: 0;
        border-radius: var(--ui-radius-pill);
        background: transparent;
        color: var(--ui-primary);
        font-size: 20px;
        -webkit-tap-highlight-color: transparent;
    }
    html:not(.cd-nav-drill) .cd-nav-back {
        display: none !important;
    }
    .cd-nav-back:active {
        background: var(--ui-primary-soft);
    }
    html.cd-nav .cd-nav-title {
        position: absolute;
        left: 64px;
        right: 64px;
        top: var(--ui-safe-top);
        /* the bar's bottom padding: the title centres on the same line as the search bar and the ☰ */
        bottom: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        color: var(--ui-text);
        font-size: var(--ui-fs-lg);
        font-weight: 600;
        white-space: nowrap;
        text-overflow: ellipsis;
        opacity: 0;
        transform: translateY(6px);
        transition: opacity 160ms ease, transform 160ms ease;
        pointer-events: none;
    }
    html.cd-nav.cd-nav-compact .cd-nav-title {
        opacity: 1;
        transform: none;
    }
    html.cd-nav.cd-nav-compact .main > nav.navbar {
        box-shadow: 0 1px 0 var(--ui-border);
    }
    /* the bars stay put while pages slide underneath */
    html.cd-nav .ui-tabbar {
        view-transition-name: cd-tabbar;
    }
}
/* push: the new page slides in from the right, the old one moves a little left and dims; pop reverses */
@keyframes cd-vt-in-right { from { transform: translateX(100%); } }
@keyframes cd-vt-out-left { to { transform: translateX(-28%); filter: brightness(.92); } }
@keyframes cd-vt-in-left { from { transform: translateX(-28%); filter: brightness(.92); } }
@keyframes cd-vt-out-right { to { transform: translateX(100%); } }
html:active-view-transition-type(push)::view-transition-new(root) {
    animation: 320ms cubic-bezier(.2, .8, .2, 1) both cd-vt-in-right;
    box-shadow: -8px 0 24px rgba(0, 0, 0, .12);
}
html:active-view-transition-type(push)::view-transition-old(root) {
    animation: 320ms cubic-bezier(.2, .8, .2, 1) both cd-vt-out-left;
}
html:active-view-transition-type(pop)::view-transition-new(root) {
    animation: 300ms cubic-bezier(.2, .8, .2, 1) both cd-vt-in-left;
}
html:active-view-transition-type(pop)::view-transition-old(root) {
    z-index: 1;
    animation: 300ms cubic-bezier(.2, .8, .2, 1) both cd-vt-out-right;
}
html:active-view-transition-type(fade)::view-transition-old(root),
html:active-view-transition-type(fade)::view-transition-new(root) {
    animation-duration: 160ms;
}
.ui-more__row.is-danger,
.ui-more__row.is-danger .ui-more__icon {
    color: var(--ui-danger) !important;
}
.ui-more__row.is-danger .ui-more__icon {
    background: var(--ui-danger-tint, rgba(220, 53, 69, .08));
}

/* ------------------------------------------------------------------
 * G20  Instant feel on touch screens: press feedback within a frame, no
 *      browser artefacts, skeletons instead of spinners, busy buttons.
 * ------------------------------------------------------------------ */
@media (hover: none) and (pointer: coarse) {
    html {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation; /* no double-tap zoom delay; pinch-zoom stays */
    }
    /* UI chrome is not text: no selection or callout on long-press (content stays selectable) */
    .btn,
    button,
    [role=button],
    .nav-link,
    .page-link,
    .dropdown-item,
    .ui-tabbar,
    .ui-action-list__item,
    .ui-more__row,
    .navbar,
    .cd-filter-chip,
    .form-check-label {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }
    /* a tap shows no focus ring; keyboards still get :focus-visible */
    :is(.btn, button, a, [role=button], .nav-link, .page-link, .form-check-input):focus:not(:focus-visible) {
        outline: none !important;
        box-shadow: none !important;
    }
    /* press states */
    :is(.btn, button.ui-icon-btn, .cd-icon-btn, .page-link, .ui-actions__btn, .cd-nav-back, .ui-sheet__close) {
        transition: transform 90ms ease, background-color 90ms ease, opacity 90ms ease, filter 90ms ease;
    }
    :is(.btn, .page-link, .ui-actions__btn):is(:active, .is-pressed):not(:disabled):not(.disabled) {
        transform: scale(.97);
        filter: brightness(.94);
    }
    :is(button.ui-icon-btn, .cd-icon-btn, .ui-help, .btn-close, .ui-icon-btn):is(:active, .is-pressed) {
        transform: scale(.9);
    }
    :is(a.list-group-item, .list-group-item-action, .dropdown-item, .nav-link, .card a.stretched-link, .ui-chip, .ui-action-list__item, .ui-more__row, .cd-filter-chip):is(:active, .is-pressed) {
        background-color: var(--ui-primary-soft) !important;
    }
    a:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item):not(.ui-more__row):not(.ui-tabbar__tab):is(:active, .is-pressed) {
        opacity: .6;
    }
    table.dataTable tbody tr:is(:active, .is-pressed) > td {
        background-color: var(--ui-subtle) !important;
    }
    table.cd-cards > tbody > tr.cd-card:is(:active, .is-pressed) {
        transform: scale(.99);
        background: var(--ui-subtle) !important;
    }
    .ui-tabbar__tab.is-pressed .ui-tabbar__icon,
    .cd-nav-back.is-pressed {
        transform: scale(.88);
    }
}

/* Skeletons: shapes that show where content lands, with a soft shimmer */
.ui-skeleton {
    display: block;
    border-radius: var(--ui-radius-sm);
    background: linear-gradient(90deg, var(--ui-subtle) 0%, color-mix(in srgb, var(--ui-subtle) 55%, var(--ui-surface)) 50%, var(--ui-subtle) 100%);
    background-size: 200% 100%;
    animation: cd-shimmer 1.2s ease-in-out infinite;
}
.ui-skeleton--line {
    height: 12px;
    margin: 6px 0;
}
.ui-skeleton--title {
    height: 16px;
    width: 60%;
    margin: 4px 0 8px;
}
.ui-skeleton--short {
    width: 40%;
}
.ui-skeleton-card {
    padding: var(--ui-space-3);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
}
.ui-skeleton-card + .ui-skeleton-card {
    margin-top: var(--ui-space-2);
}
@keyframes cd-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ui-skeleton {
        animation: none;
    }
}
@media (max-width: 575.98px) {
    /* card lists: skeleton cards on the first load, dimmed cards while a search/page reloads */
    /* a Select2 multi-select is a tall listbox until its script runs: give it the control's one-line height */
    select[multiple].select2:not(.select2-hidden-accessible) {
        height: var(--ui-tap);
        overflow: hidden;
    }
    /* a list table whose script hasn't run yet holds a screen's worth of room, so what follows it doesn't jump */
    table[id^="datatable"]:not(.dataTable):not(:has(tbody tr)) {
        height: 60vh;
    }
    .cd-cards-wrap .dataTables_processing,
    .cd-cards-wrap .cd-dt-loading-overlay {
        display: none !important;
    }
    .cd-cards-wrap.cd-loading table.cd-cards > tbody > tr.cd-card {
        opacity: .45;
        transition: opacity 120ms ease;
    }
    table.cd-cards > tbody > tr.cd-skel-row {
        display: block;
    }
    table.cd-cards > tbody > tr.cd-skel-row > td {
        display: block;
        padding: 0 !important;
        border: 0 !important;
    }
}

/* Busy buttons: CD.mobile.busy(btn, true) */
.btn.is-busy {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.btn.is-busy::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid currentColor;
    border-color: var(--ui-muted) var(--ui-muted) var(--ui-muted) transparent;
    border-radius: 50%;
    animation: cd-spin .7s linear infinite;
}
.btn-primary.is-busy::after,
.btn-success.is-busy::after,
.btn-danger.is-busy::after {
    border-color: #fff #fff #fff transparent;
}
@keyframes cd-spin {
    to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------
 * G21  List gestures on card lists (phones)
 * ------------------------------------------------------------------ */
@media (max-width: 575.98px) {
    /* swipe: the card slides left; its action panel rides along just outside its right edge */
    .cd-cards-wrap {
        overflow-x: clip;
    }
    table.cd-cards > tbody > tr.cd-card {
        transform: translateX(var(--cd-swipe, 0px));
        transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
        touch-action: pan-y;
    }
    table.cd-cards > tbody > tr.cd-card.is-swiping {
        transition: none;
    }
    table.cd-cards td.cd-swipe-panel {
        position: absolute !important;
        top: -1px;
        bottom: -1px;
        left: calc(100% + var(--ui-space-2));
        display: flex !important;
        gap: var(--ui-space-1);
        padding: 0 !important;
    }
    .cd-swipe-btn {
        width: 72px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border: 0;
        border-radius: var(--ui-radius);
        background: var(--ui-text);
        color: var(--ui-surface);
        font-size: var(--ui-fs-xs);
        font-weight: 600;
    }
    .cd-swipe-btn > i,
    .cd-swipe-btn > svg {
        font-size: 18px;
    }
    .cd-swipe-btn span {
        max-width: 64px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .cd-swipe-btn.is-primary {
        background: var(--ui-primary);
        color: #fff;
    }
    .cd-swipe-btn.is-danger {
        background: var(--ui-danger);
        color: #fff;
    }
    /* selection mode (long-press): cards toggle, the bulk bar shows at the bottom */
    .cd-selecting table.cd-cards > tbody > tr.cd-card {
        cursor: pointer;
    }
    /* load more replaces page numbers */
    .cd-cards-wrap .dataTables_paginate,
    .cd-cards-wrap .dataTables_length {
        display: none !important;
    }
    .cd-cards-wrap > .cd-load-more {
        display: flex;
        width: 100%;
        min-height: 48px;
        margin: var(--ui-space-2) 0;
        justify-content: center;
    }
    .cd-cards-wrap > .cd-load-more[hidden] {
        display: none;
    }
}
.cd-load-more {
    display: none;
}
/* pull to refresh */
.cd-ptr {
    position: fixed;
    left: 50%;
    top: calc(56px + var(--ui-safe-top));
    z-index: 1031;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: -20px;
    border-radius: 50%;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-pop);
    color: var(--ui-muted);
    opacity: 0;
    transform: translateY(calc(var(--cd-ptr, 0px) - 48px)) rotate(var(--cd-ptr-deg, 0deg));
    pointer-events: none;
}
.cd-ptr.is-on {
    opacity: 1;
}
.cd-ptr.is-ready {
    color: var(--ui-primary);
}
.cd-ptr.is-loading {
    transform: translateY(16px);
    transition: transform 160ms ease;
}
.cd-ptr.is-loading > i {
    animation: cd-spin .8s linear infinite;
}
@media (max-width: 767.98px) {
    .cd-select-bar > .btn {
        flex: none !important;
        min-width: var(--ui-tap);
        padding-inline: var(--ui-space-3);
        white-space: nowrap;
    }
    .cd-select-bar > .cd-sel-all {
        width: var(--ui-tap);
        padding: 0;
    }
    .cd-select-bar > .ui-actionbar__info {
        flex: 1 1 auto;
        white-space: nowrap;
    }
}

/* ------------------------------------------------------------------
 * G22  Snackbar: one at a time, above the bottom stack (tab bar, action bar)
 * ------------------------------------------------------------------ */
.ui-snackbar {
    position: fixed;
    left: max(var(--ui-space-3), var(--ui-safe-left));
    right: max(var(--ui-space-3), var(--ui-safe-right));
    bottom: calc(var(--cd-bottom-stack) + var(--cd-kb, 0px) + var(--ui-space-3));
    z-index: 2100;
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    min-height: 48px;
    max-width: 560px;
    margin: 0 auto;
    padding: var(--ui-space-2) var(--ui-space-2) var(--ui-space-2) var(--ui-space-4);
    border-radius: var(--ui-radius);
    background: var(--ui-tooltip-bg);
    color: var(--ui-tooltip-text);
    box-shadow: var(--ui-shadow-pop);
    font-size: var(--ui-fs-md);
    line-height: 1.35;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 180ms ease, transform 220ms cubic-bezier(.2, .8, .2, 1);
    touch-action: none;
}
html:not(.cd-has-bottom-stack) .ui-snackbar {
    bottom: calc(var(--cd-kb, 0px) + max(var(--ui-space-3), var(--ui-safe-bottom)));
}
.ui-snackbar.is-on {
    opacity: 1;
    transform: none;
}
.ui-snackbar__icon {
    flex: none;
    font-size: 18px;
}
.ui-snackbar--success .ui-snackbar__icon {
    color: var(--ui-success);
}
.ui-snackbar--error .ui-snackbar__icon {
    color: var(--ui-danger);
}
.ui-snackbar--warning .ui-snackbar__icon {
    color: var(--ui-warning);
}
.ui-snackbar--info .ui-snackbar__icon {
    color: var(--ui-info);
}
.ui-snackbar__msg {
    flex: 1;
    min-width: 0;
    padding: var(--ui-space-1) 0;
}
.ui-snackbar__msg a {
    color: inherit;
    text-decoration: underline;
}
.ui-snackbar__action {
    flex: none;
    min-height: var(--ui-tap);
    padding: 0 var(--ui-space-3);
    border: 0;
    border-radius: var(--ui-radius-sm);
    background: transparent;
    color: color-mix(in srgb, var(--ui-primary) 55%, #fff);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}
@media (prefers-reduced-motion: reduce) {
    .ui-snackbar {
        transition: none;
    }
}

/* ------------------------------------------------------------------
 * G23  Native controls on touch screens
 * ------------------------------------------------------------------ */
@media (hover: none) and (pointer: coarse) {
    /* switches: iOS-sized (44x26), not the G2 checkbox square */
    .form-switch .form-check-input {
        width: 44px;
        height: 26px;
        flex: none;
        border-radius: 2em;
        margin-left: 0;
    }
    .form-switch {
        padding-left: 0;
    }
}
@media (max-width: 767.98px) and (hover: none) and (pointer: coarse) {
    /* a switch with a label in a form row: label left, switch right, like a settings row */
    :is(.card-body, .ui-card__body, .modal-body, .ui-sheet__body) .form-check.form-switch:has(> .form-check-input + .form-check-label) {
        flex-direction: row-reverse;
        justify-content: space-between;
        gap: var(--ui-space-3);
    }
    :is(.card-body, .ui-card__body, .modal-body, .ui-sheet__body) .form-check.form-switch:has(> .form-check-input + .form-check-label) > .form-check-label {
        flex: 1;
    }
    /* list search: Cancel next to the focused field (cd-mobile.js) */
    .cd-search-cancel {
        display: none;
        flex: none;
        min-height: var(--ui-tap);
        padding: 0 var(--ui-space-2);
        border: 0;
        background: transparent;
        color: var(--ui-primary);
        font-weight: 600;
    }
    .cd-search-active .cd-search-cancel {
        display: inline-flex;
        align-items: center;
    }
    .dataTables_filter.cd-search-active label {
        display: flex !important;
        align-items: center;
        gap: var(--ui-space-1);
        width: 100%;
    }
    .dataTables_filter.cd-search-active input {
        flex: 1;
        width: auto !important;
    }
}

/* Grouped list (settings on phones): <div class="ui-grouped"><div class="ui-grouped__title">…</div>
   <div class="ui-grouped__rows"><a|label class="ui-grouped__row"><span class="ui-grouped__label">…</span>
   <span class="ui-grouped__value">…</span></a></div></div> */
.ui-grouped + .ui-grouped {
    margin-top: var(--ui-space-5);
}
.ui-grouped__title {
    margin: 0 0 var(--ui-space-2) var(--ui-space-3);
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.ui-grouped__rows {
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
}
.ui-grouped__row {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    min-height: 52px;
    margin: 0;
    padding: var(--ui-space-2) var(--ui-space-4);
    color: var(--ui-text) !important;
    text-decoration: none !important;
}
.ui-grouped__row + .ui-grouped__row {
    box-shadow: inset 0 1px 0 var(--ui-border);
}
a.ui-grouped__row::after {
    content: '\f054';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
    font-weight: 900;
    color: var(--ui-faint);
    font-size: var(--ui-fs-sm);
}
.ui-grouped__label {
    flex: 1;
    min-width: 0;
}
.ui-grouped__label small {
    display: block;
    color: var(--ui-muted);
    font-size: var(--ui-fs-xs);
}
.ui-grouped__value {
    color: var(--ui-muted);
    text-align: right;
}
.ui-grouped__row .form-check-input {
    margin: 0;
}

/* ------------------------------------------------------------------
 * G24  Installed app bits
 * ------------------------------------------------------------------ */
.ui-install-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}
.ui-install-steps li {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    min-height: 52px;
    font-size: var(--ui-fs-lg);
}
.ui-install-steps li + li {
    box-shadow: inset 0 1px 0 var(--ui-border);
}
.ui-install-steps li > i {
    flex: none;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
}
@media (max-width: 767.98px) {
    /* the legacy English offline bar: the offline snackbar replaces it on phones */
    #network-status-alert {
        display: none !important;
    }
}

/* ------------------------------------------------------------------
 * G15 + G25  Scanning: camera button on scan fields, the camera sheet,
 *            and the full-screen success/error flash.
 * ------------------------------------------------------------------ */
.cd-scan-btn {
    display: none !important;
}
@media (hover: none) and (pointer: coarse) {
    .cd-scan-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex: none;
        width: var(--ui-tap);
        min-width: var(--ui-tap);
        padding: 0;
        color: var(--ui-primary);
    }
    .cd-has-scan-btn:not(.input-group) {
        display: flex;
        align-items: center;
        gap: var(--ui-space-2);
    }
    .cd-has-scan-btn:not(.input-group) > input {
        flex: 1;
        min-width: 0;
    }
}
.ui-sheet--scan .ui-sheet__body {
    padding: 0;
    background: #000;
}
.cd-scan {
    position: relative;
    min-height: 60dvh;
    color: #fff;
}
.cd-scan__view {
    width: 100%;
    min-height: 60dvh;
}
.cd-scan__view video {
    width: 100% !important;
    height: 60dvh !important;
    object-fit: cover;
}
/* html5-qrcode's shaded region marks the real scan area: softer shade, white corners */
.cd-scan__view #qr-shaded-region {
    border-color: rgba(0, 0, 0, .5) !important;
}
.cd-scan__view #qr-shaded-region > div {
    background-color: #fff !important;
}
.cd-scan__status {
    padding: var(--ui-space-3) var(--ui-space-4);
    text-align: center;
    font-size: var(--ui-fs-lg);
    font-variant-numeric: tabular-nums;
}
.cd-scan.is-error .cd-scan__status {
    color: color-mix(in srgb, var(--ui-danger) 40%, #fff);
}
.cd-scan__tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-3);
    padding: var(--ui-space-2) var(--ui-space-4) var(--ui-space-4);
}
.cd-scan__tool {
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 20px;
}
.cd-scan__tool.is-on {
    background: #fff;
    color: #000;
}
.cd-scan__mode {
    margin: 0 0 0 auto;
    color: #fff;
}
.cd-scan-flash {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    animation: cd-flash 650ms ease forwards;
}
.cd-scan-flash.is-ok {
    background: color-mix(in srgb, var(--ui-success) 35%, transparent);
}
.cd-scan-flash.is-error {
    background: color-mix(in srgb, var(--ui-danger) 40%, transparent);
}
.cd-scan-flash span {
    padding: var(--ui-space-3) var(--ui-space-4);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: var(--ui-fs-xl);
    font-weight: 700;
    box-shadow: var(--ui-shadow-pop);
}
@keyframes cd-flash {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
.cd-more-switch {
    padding-left: var(--ui-space-3) !important;
}
.cd-more-switch .form-check-input {
    margin-left: auto !important;
}

/* ------------------------------------------------------------------
 * G17  Spotlight full screen on phones (search field on top, results below,
 *      Cancel), recent searches; the FC tasks bell opens as a sheet.
 * ------------------------------------------------------------------ */
.cd-spot-cancel,
.cd-recents {
    display: none;
}
@media (max-width: 767.98px) {
    #spotlight-modal.active .spotlight-container {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: 100dvh;
        margin: 0 !important;
        padding: calc(var(--ui-safe-top) + var(--ui-space-2)) var(--ui-space-3) var(--ui-safe-bottom);
        display: flex;
        flex-direction: column;
        border-radius: 0 !important;
        background: var(--ui-page) !important;
        transform: none !important;
    }
    #spotlight-modal.active .spotlight-form {
        flex: none;
    }
    #spotlight-modal.active .spotlight-input-group {
        display: flex;
        align-items: center;
        gap: var(--ui-space-1);
        flex-wrap: nowrap;
    }
    #spotlight-modal.active .spotlight-results {
        flex: 1 1 auto;
        max-height: none !important;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    #spotlight-modal.active .cd-spot-cancel {
        display: inline-flex;
        align-items: center;
        flex: none;
        min-height: var(--ui-tap);
        padding: 0 var(--ui-space-2);
        border: 0;
        background: transparent;
        color: var(--ui-primary);
        font-weight: 600;
    }
    #spotlight-modal.active .cd-recents:not([hidden]) {
        display: block;
        padding: var(--ui-space-3) var(--ui-space-1);
    }
    .cd-recents__title {
        margin: 0 0 var(--ui-space-2);
        color: var(--ui-muted);
        font-size: var(--ui-fs-sm);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .03em;
    }
    .cd-recents__row {
        display: flex;
        align-items: center;
        gap: var(--ui-space-3);
        width: 100%;
        min-height: 48px;
        padding: 0 var(--ui-space-2);
        border: 0;
        border-radius: var(--ui-radius-sm);
        background: transparent;
        color: var(--ui-text);
        text-align: left;
        font-size: var(--ui-fs-lg);
    }
    .cd-recents__row > i {
        color: var(--ui-muted);
    }
    /* FC tasks bell: its dropdown as a bottom sheet */
    #tasksDropdown.show {
        position: fixed !important;
        inset: auto 0 0 0 !important;
        transform: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-height: 80dvh !important;
        margin: 0 !important;
        padding-bottom: var(--ui-safe-bottom) !important;
        border: 0 !important;
        border-radius: var(--ui-radius) var(--ui-radius) 0 0 !important;
        box-shadow: 0 0 0 100vmax var(--ui-backdrop), var(--ui-shadow-pop) !important;
        z-index: 2000 !important;
        animation: cd-sheet-up 240ms cubic-bezier(.2, .8, .2, 1);
    }
    #tasksDropdown.show #tasksDropdownContent {
        max-height: calc(80dvh - 60px) !important;
    }
}
@media (max-width: 767.98px) {
    /* the bell sheet lives inside the fixed navbar's stacking context: the tab bar steps aside meanwhile */
    html:has(#tasksDropdown.show) .ui-tabbar {
        display: none !important;
    }
    #spotlight-modal.active .spotlight-placeholder {
        box-shadow: none !important;
        background: transparent !important;
    }
}

/* ------------------------------------------------------------------
 * Shared order modal (open/all orders, FC orders) on phones: the inner panel
 * is the screen (no column gutter, no radius), hero on top, body scrolls.
 * ------------------------------------------------------------------ */
@media (max-width: 575.98px) {
    .modal .modal-content > .row:has(> [class*=col] > .open-order-modal-panel) {
        flex: 1 1 auto;
        min-height: 0;
        margin: 0 !important;
    }
    .modal .modal-content > .row > [class*=col]:has(> .open-order-modal-panel) {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 0 !important;
    }
    .open-order-modal-panel {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .open-order-modal-panel > .open-order-modal-hero {
        flex: none;
        padding-top: max(var(--ui-space-3), var(--ui-safe-top));
    }
    .open-order-modal-panel > .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: calc(var(--ui-space-6) + var(--ui-safe-bottom));
    }
}
@media (max-width: 575.98px) {
    /* a swipe panel only exists visually while its card is being swiped or is open */
    table.cd-cards > tbody > tr.cd-card:not(.is-swiped):not(.is-swiping) > td.cd-swipe-panel {
        visibility: hidden;
    }
}

/* Card lists: one toolbar row (search · sort · ⋯); DataTables buttons fold into ⋯ (cd-mobile.js) */
.cd-list-more {
    display: none !important;
}
@media (max-width: 575.98px) {
    .cd-cards-wrap .cd-list-tools {
        display: flex;
        align-items: stretch;
        gap: var(--ui-space-2);
        clear: both;
        margin: 0 0 var(--ui-space-3);
    }
    .cd-cards-wrap .cd-list-tools > .dataTables_filter {
        flex: 1 1 auto;
        min-width: 0;
        float: none !important;
        margin: 0 !important;
        text-align: left !important;
    }
    .cd-cards-wrap .cd-list-tools > .dataTables_filter label,
    .cd-cards-wrap .cd-list-tools > .dataTables_filter input {
        width: 100% !important;
        margin: 0 !important;
    }
    /* the search box is exactly as tall as the sort and ⋯ buttons beside it (a narrow desktop window gave the
       field its 36px desktop height next to 44px buttons) */
    .cd-cards-wrap .cd-list-tools > .dataTables_filter,
    .cd-cards-wrap .cd-list-tools > .dataTables_filter label {
        display: flex !important;
        align-items: stretch;
    }
    .cd-cards-wrap .cd-list-tools > .dataTables_filter input {
        height: auto !important;
        min-height: var(--ui-tap, 44px) !important;
    }
    .cd-cards-wrap .cd-list-tools > :is(.cd-sort-btn, .cd-list-more) {
        min-height: var(--ui-tap, 44px) !important;
    }
    .cd-cards-wrap .cd-list-tools > .cd-sort-btn {
        flex: none;
        display: inline-flex;
        align-items: center;
        width: var(--ui-tap);
        height: auto !important;
        min-height: var(--ui-control-h, 36px);
        margin: 0;
        padding: 0;
        justify-content: center;
    }
    .cd-cards-wrap .cd-list-tools > .cd-sort-btn span {
        display: none;
    }
    .cd-cards-wrap .cd-list-more {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex: none;
        width: var(--ui-tap);
        height: auto !important;
        min-height: var(--ui-control-h, 36px);
        margin: 0 !important;
        padding: 0;
    }
    /* folded, not display:none: DataTables opens its collections (Export, Columns) inside this group,
       and a child can override visibility, so the collection sheet still shows */
    .cd-cards-wrap .dt-buttons.cd-dt-folded {
        position: absolute !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        visibility: hidden;
    }
    .cd-cards-wrap .dt-buttons.cd-dt-folded .dt-button-collection {
        visibility: visible;
    }
    /* the search field collapses its Cancel into the row */
    .cd-cards-wrap .cd-list-tools > .dataTables_filter.cd-search-active ~ * {
        display: none !important;
    }
    /* DataTables button collections (Columns, Export): a bottom sheet */
    .dt-button-collection {
        position: fixed !important;
        inset: auto 0 0 0 !important;
        width: 100% !important;
        max-height: 80dvh;
        overflow-y: auto;
        margin: 0 !important;
        padding: var(--ui-space-3) var(--ui-space-3) max(var(--ui-space-3), var(--ui-safe-bottom)) !important;
        border-radius: var(--ui-radius) var(--ui-radius) 0 0 !important;
        box-shadow: 0 0 0 100vmax var(--ui-backdrop), var(--ui-shadow-pop) !important;
        z-index: 2000 !important;
        animation: cd-sheet-up 240ms cubic-bezier(.2, .8, .2, 1);
    }
    .dt-button-collection .dt-button,
    .dt-button-collection .dropdown-item {
        min-height: 48px;
        display: flex !important;
        align-items: center;
        width: 100%;
    }
}

/* ------------------------------------------------------------------
 * Phase 3 kit follow-ups (global findings from the per-page DoD runs)
 * ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    /* the tab bar + More replace the off-canvas sidebar on phones */
    html.cd-flag-tabbar #sidebar {
        display: none !important;
    }
    /* the search bar keeps its 36px look with a 44px hit area */
    html.cd-nav #spotlight-trigger-btn {
        position: relative;
        overflow: visible !important;
    }
    html.cd-nav #spotlight-trigger-btn::after {
        content: '';
        position: absolute;
        inset: -5px 0;
    }
}
@media (max-width: 575.98px) {
    /* the select column is a full tap column, so the title never covers the checkbox's hit area */
    table.cd-cards td.cd-c-select {
        min-width: var(--ui-tap);
        justify-content: center;
        padding-right: 0 !important;
    }
}
@media (hover: none) and (pointer: coarse) {
    /* anything tappable without its own pressed look still answers the finger */
    .is-pressed:not(.btn):not(.page-link):not(.ui-actions__btn):not(.ui-tabbar__tab):not(tr) {
        filter: brightness(.93);
        transition: filter 60ms ease;
    }
}
@media (max-width: 575.98px) {
    /* the KPI snap row (Open orders and similar): 8px between chips, the tap-gap minimum */
    .row:has(> .oo-kpi-col) > .oo-kpi-col {
        padding-inline: calc(var(--ui-tap-gap) / 2) !important;
    }
}
@media (max-width: 575.98px) {
    /* modals with their own part names (…-header / …-hero, …-body, …-footer): same anatomy as .modal-* */
    .modal:not([data-cd-no-mobile]) .modal-content > :is([class*="header"], [class*="hero"]):not(.modal-header) {
        flex: none;
        padding-top: max(var(--ui-space-3), var(--ui-safe-top));
    }
    .modal:not([data-cd-no-mobile]) .modal-content > [class*="body"]:not(.modal-body) {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .modal:not([data-cd-no-mobile]) .modal-content > [class*="footer"]:not(.modal-footer) {
        flex: none;
        padding-bottom: max(var(--ui-space-3), var(--ui-safe-bottom));
        box-shadow: 0 -1px 0 var(--ui-border);
        background: var(--ui-surface);
    }
}
@media (max-width: 767.98px) {
    /* small print stays readable on phones (Bootstrap .small = .875em of an already small parent) */
    small,
    .small {
        font-size: max(.875em, 12px);
    }
}
@media (hover: none) and (pointer: coarse) {
    /* icon buttons in a row: real 44px buttons (pseudo hit areas would overlap their neighbours) */
    .cd-icon-btn,
    button.ui-icon-btn,
    label.ui-icon-btn {
        min-width: var(--ui-tap) !important;
        min-height: var(--ui-tap) !important;
    }
    /* copy chips are inline controls: at least 24px tall (WCAG 2.5.8) with room around them */
    .ui-copy {
        display: inline-flex;
        align-items: center;
        gap: .3em; /* inline-flex drops the space between "EAN" and the number */
        min-height: 24px;
        padding-block: 2px;
    }
}
@media (max-width: 575.98px) {
    /* a link that is the whole value of a card line (tracking code, order link): a 44px tap line */
    table.cd-cards td.cd-c-field > .cd-v > a:only-child,
    table.cd-cards td.cd-c-field > .cd-v > a:not(.btn):first-child:last-child {
        display: inline-flex;
        align-items: center;
        min-height: var(--ui-tap);
    }
}

@media (hover: none) and (pointer: coarse) {
    :root {
        --ui-tap-min: var(--ui-tap);
    }
}
@media (max-width: 575.98px) {
    /* a modal without a footer: its primary action is promoted into one (cd-mobile.js) */
    .modal .modal-footer.cd-promoted-footer {
        display: flex;
    }
    /* stand-in for a primary that lives in the body (cd-mobile.js proxyPrimary): long labels wrap compactly */
    .modal .modal-footer > .cd-proxy-primary {
        line-height: 1.25;
    }
    .modal .modal-footer.cd-promoted-footer > .btn {
        flex: 1 1 auto;
        width: 100%;
        margin: 0 !important;
    }
}
@media (max-width: 767.98px) {
    /* page loaders: skeleton cards instead of a spinner (cd-mobile.js marks them) */
    /* display stays the page's business: it shows and hides its loader as before */
    /* only while the page's spinner is still inside: pages often write the result into the same box */
    .cd-skel-loader:has(> .spinner-border, > .spinner-grow) {
        min-height: 168px;
        background:
            linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--ui-surface) 55%, transparent) 50%, transparent 100%) 0 0 / 200% 100%,
            linear-gradient(var(--ui-subtle), var(--ui-subtle)) 16px 18px / 55% 14px no-repeat,
            linear-gradient(var(--ui-subtle), var(--ui-subtle)) 16px 42px / 80% 10px no-repeat,
            linear-gradient(var(--ui-subtle), var(--ui-subtle)) 16px 60px / 40% 10px no-repeat,
            linear-gradient(var(--ui-subtle), var(--ui-subtle)) 16px 102px / 55% 14px no-repeat,
            linear-gradient(var(--ui-subtle), var(--ui-subtle)) 16px 126px / 80% 10px no-repeat,
            linear-gradient(var(--ui-subtle), var(--ui-subtle)) 16px 144px / 40% 10px no-repeat;
        animation: cd-shimmer 1.2s ease-in-out infinite;
    }
    .cd-skel-loader:has(> .spinner-border, > .spinner-grow) > * {
        visibility: hidden;
    }
    /* an inline box (a KPI value, a count) gets one text-sized bar, not a card */
    span.cd-skel-loader:has(> .spinner-border, > .spinner-grow) {
        display: inline-block;
        min-height: 0;
        width: 4em;
        height: 1em;
        border-radius: var(--ui-radius-xs);
        background: linear-gradient(90deg, var(--ui-subtle) 0%, color-mix(in srgb, var(--ui-surface) 55%, var(--ui-subtle)) 50%, var(--ui-subtle) 100%) 0 0 / 200% 100%;
        vertical-align: middle;
    }
}
/* keyboard shortcut hints mean nothing without a keyboard (tablets, phones) */
@media (hover: none) and (pointer: coarse) {
    .spotlight-trigger-shortcut {
        display: none !important;
    }
}
@media (hover: none) and (pointer: coarse) {
    /* plain tables with clickable rows/cells (Pick & Pack lists, settings tables): 44px tap rows */
    table:not(.cd-cards) :is(tr[onclick], tr[data-href], tr.clickable-row) > td,
    table:not(.cd-cards) td[onclick] {
        height: var(--ui-tap);
    }
}
@media (hover: none) and (pointer: coarse) {
    /* a cell around a checkbox must not clip the checkbox's 44px hit area */
    td:has(.form-check-input, input[type=checkbox]),
    td:has(.form-check-input, input[type=checkbox]) > div {
        overflow: visible !important;
    }
}
@media (max-width: 767.98px) {
    /* POS register (kiosk mode) keeps its own full-screen layout: no tab bar (plan G18) */
    body[data-kiosk="true"] .ui-tabbar {
        display: none !important;
    }
    html:has(body[data-kiosk="true"]) {
        --cd-tabbar-h: 0px;
    }
}
@media (max-width: 575.98px) {
    /* RowGroup headers between cards: a sticky section title, like a native grouped list */
    table.cd-cards > tbody > tr.cd-section-row {
        position: sticky;
        top: calc(56px + var(--ui-safe-top));
        z-index: 2;
        display: block;
        margin: var(--ui-space-3) calc(-1 * var(--ui-space-1)) var(--ui-space-2);
        background: var(--ui-page);
    }
    table.cd-cards > tbody > tr.cd-section-row > :is(td, th) {
        display: block;
        width: auto !important;
        padding: var(--ui-space-2) var(--ui-space-1) !important;
        border: 0 !important;
        background: transparent !important;
        color: var(--ui-muted);
        font-size: var(--ui-fs-sm);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .03em;
    }
    table.cd-cards > tbody > tr.cd-section-row > :is(td, th) * {
        background: transparent !important;
        box-shadow: none !important;
    }
}
@media (max-width: 575.98px) {
    table.cd-cards td.cd-c-actions.cd-c-actions--wide {
        order: 30;
        flex: 1 1 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: var(--ui-space-1);
        margin-top: var(--ui-space-2);
        padding-top: var(--ui-space-2) !important;
        box-shadow: inset 0 1px 0 var(--ui-border) !important;
    }
    table.cd-cards td.cd-c-field.cd-c-field--stack {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--ui-space-1);
    }
    table.cd-cards td.cd-c-field.cd-c-field--stack > .cd-v,
    table.cd-cards td.cd-c-field.cd-c-field--stack > .cd-v > * {
        align-items: flex-start;
        justify-content: flex-start;
        text-align: left !important;
    }
    table.cd-cards td.cd-c-field.cd-c-field--stack > .cd-v {
        overflow-x: auto;
        scrollbar-width: none;
    }
}
@media (max-width: 575.98px) {
    /* "missing shipping method" fix rows: text over a full-width action instead of three squeezed columns */
    .msm-fix-bar {
        flex-wrap: wrap;
        gap: var(--ui-space-2) !important;
    }
    .msm-fix-bar .msm-fix-text {
        flex: 1 1 0 !important;
        min-width: 0;
    }
    /* tab rows outside the body (edit order) start at the screen edge without this */
    .modal:not([data-cd-no-mobile]) :is(.nav-tabs, .nav-pills):not(.modal-body:not(.p-0, .px-0) :is(.nav-tabs, .nav-pills)):not(.cd-tabs-picker) {
        padding-inline: var(--ui-space-3);
        scroll-padding-inline: var(--ui-space-3);
    }
    /* label/value tables in dialogs (Order ID: …): the label stays on one line */
    .modal-body table:not(.dataTable) tr > th:first-child:not(:only-child),
    .modal-body table:not(.dataTable) tr > td:first-child:not(:only-child):has(> :is(h5, h6, strong, b, label):only-child) {
        width: 1%;
        white-space: nowrap;
    }
    /* a scrolling dialog body scrolls; its blocks never shrink (and clip) to fit */
    .modal:not([data-cd-no-mobile]) :is(.modal-body, .msm-body) > * {
        flex-shrink: 0;
    }
    .msm-fix-bar .msm-fix-btn {
        flex: 1 1 100% !important;
        justify-content: center;
        min-height: var(--ui-tap);
        margin-left: 0 !important;
    }
}
@media (max-width: 575.98px) {
    /* utility padding on a dialog (px-4 py-3 …) would inset the full-screen modal */
    .modal:not([data-cd-no-mobile]) .modal-content {
        margin: 0 !important; /* utility margins (mx-3) would inset the full-screen dialog too */
    }
    .modal:not([data-cd-no-mobile]) .modal-dialog {
        padding: 0 !important;
    }
    /* a primary that can't leave its form: its action row sticks to the bottom of the scrolling body */
    .modal .cd-sticky-actions {
        position: sticky;
        bottom: calc(-1 * var(--bs-modal-padding, 1rem));
        z-index: 2;
        margin-top: var(--ui-space-3);
        padding: var(--ui-space-3) 0 max(var(--ui-space-2), var(--ui-safe-bottom));
        background: var(--ui-surface);
        box-shadow: 0 -1px 0 var(--ui-border);
    }
    .modal .cd-sticky-actions :is(.btn-primary, .btn-success, [type=submit]) {
        min-height: 48px;
    }
}
@media (max-width: 575.98px) {
    /* the sticky action row sits at the bottom even when the body is short */
    .modal .modal-body:has(.cd-sticky-actions),
    .modal .modal-body > form:has(.cd-sticky-actions) {
        display: flex;
        flex-direction: column;
    }
    .modal .modal-body > form:has(.cd-sticky-actions) {
        flex: 1 1 auto;
    }
    .modal .cd-sticky-actions {
        margin-top: auto !important;
    }
}
@media (max-width: 767.98px) {
    .form-text {
        font-size: max(.875em, 12px);
    }
}
@media (hover: none) and (pointer: coarse) {
    /* bare search inputs inside custom search pills (messages, chats) */
    .search-input-wrapper > input {
        min-height: var(--ui-tap);
    }
    /* "All tasks" style panel links */
    .home-tasks-panel__link {
        display: inline-flex;
        align-items: center;
        min-height: var(--ui-tap);
    }
}
@media (max-width: 575.98px) {
    /* every link in a card's value line is a 44px tap line */
    table.cd-cards td.cd-c-field .cd-v a:not(.btn) {
        display: inline-flex;
        align-items: center;
        min-height: var(--ui-tap);
        min-width: var(--ui-tap); /* short values like "#62" */
    }
    /* clickable badges and the title link inside a card get a full-height hit area */
    table.cd-cards :is(.ui-status, .badge)[role="button"],
    table.cd-cards :is(.ui-status, .badge)[onclick],
    table.cd-cards :is(.ui-status, .badge)[data-bs-toggle],
    table.cd-cards td.cd-c-title a.ui-item__title {
        position: relative;
    }
    table.cd-cards :is(.ui-status, .badge)[role="button"]::after,
    table.cd-cards :is(.ui-status, .badge)[onclick]::after,
    table.cd-cards :is(.ui-status, .badge)[data-bs-toggle]::after,
    table.cd-cards td.cd-c-title a.ui-item__title::after {
        content: '';
        position: absolute;
        inset: -12px -2px;
    }
}
@media (hover: none) and (pointer: coarse) {
    /* standalone icon + text links (settings, "configure …" links): a 44px tap line */
    a:is(.d-flex, .d-inline-flex).align-items-center:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link),
    a.text-decoration-none.align-items-center:not(.btn):not(.nav-link):not(.dropdown-item) {
        min-height: var(--ui-tap);
    }
    /* a card's own "see all" / "start" link stands alone, so it gets a full tap line too */
    .ui-card__head a.ui-link,
    .ui-card__body a.ui-link:not(p a):not(li a):not(td a):last-child,
    :is(.card-header, .ui-card__foot, [class*="__head"], [class*="__meta"]) > a:not(.btn),
    [class*="__head"] > * > a.ui-link,
    .ui-error-state__help a,
    .settings-toggle-row__link,
    .ui-note a.ui-link:not(p a),
    .info-item > a,
    .row.justify-content-center > a.text-center,
    .pbins-order > a,
    #pim-health-note a,
    .tpl-kv dt > a,
    .pos-register-recent-sales-all,
    a.ui-item__title:not(table.cd-cards a),
    a.ui-age {
        min-height: var(--ui-tap);
        display: inline-flex;
        align-items: center;
        gap: var(--ui-space-1);
    }
    /* a link inside a note's sentence stays inline text: padding grows the tap area without opening up the line */
    .ui-note p a.ui-link {
        display: inline;
        padding-block: 13px;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }
    /* "show N more" under a list and toolbars that pair a status with a button */
    :is(h1, h2, h3)[onclick],
    .fch-actions__more,
    .ui-toggle button,
    .ui-toggle .ui-toggle__btn,
    .b2b-admin-segmented button,
    .changelog-filter,
    .wms-alert-pill,
    /* page-scoped rules size these below the floor with higher specificity */
    .onboarding-packaging-manage-link,
    .onboarding-packaging-category-chip,
    .bookkeeping-period__chip,
    .bookkeeping-recent__action,
    .ps-font-chip,
    .mapping-status__option,
    #mcpCopyJsonBtn {
        min-height: var(--ui-tap) !important;
    }
    .bookkeeping-recent__action {
        min-width: var(--ui-tap) !important;
    }
    .onboarding-packaging-categories-chips {
        gap: var(--ui-tap-gap, 8px) !important;
    }
    #modal-task-currency {
        min-width: 5.5rem; /* "EUR" at the 16px phone input size */
    }
    .b2b-setup-url-card__input,
    input[type=range],
    .onboarding-step-groups-toggle,
    .bootstrap-tagsinput input,
    .ck.ck-toolbar .ck-button {
        min-height: var(--ui-tap);
    }
    .ck.ck-toolbar .ck-button,
    .bookkeeping-recent__action,
    .packaging-format-action,
    .form-check-label,
    .ui-toggle button,
    .ui-toggle .ui-toggle__btn {
        min-width: var(--ui-tap);
    }
    .ui-toggle button,
    .ui-toggle .ui-toggle__btn,
    .b2b-admin-segmented button,
    .changelog-filter,
    .wms-alert-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* icon-only links next to tabs (Home's "Monitor" opens the WMS dashboard), the login "forgot password" line */
    #seller-home .sh-chart-card__head {
        padding-top: var(--ui-tap-gap);
    }
    /* stock-section tree: 44px rows like a native list, name fills the row, add/remove at the right edge;
       the drag grip goes (jQuery UI dragging has no touch support here: reordering stays a desktop task) */
    #stock_section_navigator .nav-section-row {
        min-height: var(--ui-tap);
        margin: 0;
        padding-block: 0;
        gap: var(--ui-tap-gap);
    }
    #stock_section_navigator .nav-section-name {
        flex: 1 1 auto;
        min-height: var(--ui-tap);
        display: flex;
        align-items: center;
    }
    #stock_section_navigator .nav-section-actions {
        margin-left: auto;
        gap: var(--ui-tap-gap);
    }
    #stock_section_navigator .nav-section-actions .cd-icon-btn {
        width: var(--ui-tap);
        height: var(--ui-tap);
    }
    #stock_section_navigator .nav-section-grip {
        display: none;
    }
    .ui-card-head__actions,
    .pos-receipt-logo-actions {
        gap: var(--ui-tap-gap) !important;
    }
    /* tight form grids (g-1/g-2): fields side by side keep a finger's width apart */
    .row:is(.g-1, .g-2) {
        --bs-gutter-x: 1.25rem;
        --bs-gutter-y: .75rem;
    }
    #pos-checkout.pos-checkout--register .pos-register-recent-sales-head {
        margin-bottom: var(--ui-tap-gap);
    }
    /* a 28px row action next to a pill or link: its 44px hit area needs room to its left */
    /* a row action at the table's edge: room for its hit area inside the scroll box (no 3px sideways scroll) */
    td:last-child:has(> .ui-row-action:last-child) {
        padding-inline-end: calc(var(--ui-tap-gap) * 1.5) !important;
    }
    /* its hit area grows into that padding, so it barely reaches toward the cell on its left */
    td:last-child > .ui-row-action:last-child::after {
        left: auto;
        right: calc(var(--ui-tap-gap) * -1.5);
        transform: translateY(-50%);
    }
    * + .ui-row-action {
        margin-inline-start: calc(var(--ui-tap-gap) / 2); /* its hit area reaches 8px left, a pill's 5px right */
    }
    .bootstrap-tagsinput input {
        min-height: var(--ui-tap) !important; /* the IP list sets 40px inline */
    }
    .bootstrap-touchspin .form-control {
        min-width: var(--ui-tap);
    }
    #wms-dashboard-link,
    .login-forgot-link,
    #search-customer-input-btn,
    .packaging-format-action,
    .input-group > .btn,
    #ai-chat-smoke-sections-toggle {
        min-height: var(--ui-tap);
        min-width: var(--ui-tap);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* DataTables FixedHeader clones the head row; card-mode tables have no head row to float */
    body:has(table.cd-cards) .dtfh-floatingparent {
        display: none !important;
    }
    .batch-sync-toolbar,
    .home-tasks-panel__list,
    .ai-chat-home-tasks__list,
    .pbins-actions,
    .pos-cash-shift-actions,
    #bookkeepingPeriodChips,
    .bookkeeping-recent__actions,
    .ps-font-chips,
    .packaging-format-actions,
    .pick-algorithm-sequence__actions,
    .ui-card__foot,
    .pos-register-recent-sales-items,
    #seller-home .sh-day__list {
        gap: var(--ui-tap-gap) !important; /* page rules are often id-scoped */
    }
}

/* Administration seller dialog (tablets and phones): its seven tabs get their own scrolling row under the title */
@media (max-width: 991.98px) {
    #seller_dialog .modal-header {
        flex-wrap: wrap;
        row-gap: var(--ui-space-2);
    }
    #seller_dialog .modal-header > .d-flex {
        order: 3;
        flex: 1 1 100%;
        min-width: 0;
        margin-left: 0 !important;
    }
    #seller_dialog .seller-tab-buttons {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        flex: 1 1 auto;
        min-width: 0;
        scrollbar-width: none;
    }
    #seller_dialog .seller-tab-buttons > .seller-tab-btn {
        flex: none;
        white-space: nowrap;
    }
}

/* ------------------------------------------------------------------
 * Card lists: DataTables child rows (row.child) hang under their card, full width
 * ------------------------------------------------------------------ */
@media (max-width: 575.98px) {
    table.cd-cards > tbody > tr.cd-child-row {
        display: block !important;
        margin: calc(-1 * var(--ui-space-2)) 0 var(--ui-space-2);
        padding: 0 var(--ui-space-2) var(--ui-space-2);
        border: 1px solid var(--ui-border);
        border-top: 0;
        border-radius: 0 0 var(--ui-radius-lg, var(--ui-radius)) var(--ui-radius-lg, var(--ui-radius));
        background: var(--ui-surface) !important;
    }
    table.cd-cards > tbody > tr.cd-card:has(+ tr.cd-child-row) {
        margin-bottom: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    table.cd-cards > tbody > tr.cd-child-row > td {
        display: block;
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }
    table.cd-cards > tbody > tr.cd-child-row > td::before {
        display: none !important;
    }
    /* a short note next to a card's title ("2 lines") takes its own line instead of a 7px column */
    table.cd-cards td.cd-c-title {
        flex-wrap: wrap;
    }
    table.cd-cards td.cd-c-title > small {
        flex: 1 1 100%;
        order: 9;
        margin-top: 2px;
    }

    /* Delivery dialog: every section uses the sheet's width with the same 12px gutters as the action bar above
       (dialog padding + row padding + column padding used to stack up to 28-36px a side) */
    .delivery-modal-panel > .modal-body {
        padding-inline: var(--ui-space-3) !important;
    }
    .delivery-modal-panel > .modal-body > .row {
        margin-inline: 0 !important;
        padding-inline: 0 !important;
    }
    .delivery-modal-panel > .modal-body > .row > [class*="col"] {
        padding-inline: 0 !important;
    }
    /* the product list is not framed again inside the dialog */
    #inbound-delivery-products-wrapper {
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    #inbound-delivery-products-wrapper > #inbound-bulk-actions-card {
        margin-inline: 0 !important;
        border: 0 !important;
        border-radius: var(--ui-radius-md) !important;
        overflow: hidden;
    }
    #inbound-bulk-actions-card > .card-body {
        border: 0 !important;
        padding: var(--ui-space-1) var(--ui-space-3) !important;
    }
    /* the product's title line stays its own: the received badge and the buttons go on the line below it */
    #delivery_inbound_products_table > tbody > tr.cd-card > td.cd-c-title {
        flex: 1 1 calc(100% - 64px);
    }
    /* product header: the add-line / process-all buttons sit beside the received badge, not on a row of their own */
    #delivery_inbound_products_table > tbody > tr.cd-card:has(> td.cd-c-actions--wide) > td.cd-c-status {
        flex: 1 1 auto;
        width: auto !important;
    }
    #delivery_inbound_products_table > tbody > tr.cd-card:has(> td.cd-c-actions) > td.cd-c-status {
        flex: 1 1 auto;
        width: auto !important;
        align-self: center;
    }
    #delivery_inbound_products_table > tbody > tr.cd-card:has(> td.cd-c-status) > td.cd-c-actions {
        justify-content: flex-end;
        gap: var(--ui-space-1);
        margin-top: var(--ui-space-1) !important;
        align-self: center;
        order: 6;
        flex: 0 0 auto;
        margin: 0 0 0 auto;
        padding-top: 0 !important;
        box-shadow: none !important;
    }
    #delivery_inbound_products_table > tbody > tr.cd-child-row {
        margin-top: 0 !important;
        padding: var(--ui-space-3) var(--ui-space-3) var(--ui-space-3);
    }
    /* no line box under the panels (left an empty strip) */
    #delivery_inbound_products_table > tbody > tr.cd-child-row > td {
        display: flex !important;
        flex-direction: column;
        height: auto !important;
        min-height: 0 !important;
        border: 0 !important; /* style.css spaces desktop rows with a 15px border on every second row */
    }

    /* Delivery lines (one per location) as quiet inset panels:
         seller  location ........ [status]      FC  [location .......... scan]
                 [- qty +]  [€ price   ✓]            [- qty +]   [□] [process]
                 tools ............ badge            tools ............ badge   */
    .inbound-products-child-table,
    .inbound-products-child-table > tbody {
        display: flex;
        flex-direction: column;
        gap: var(--ui-space-2);
        width: 100% !important;
        margin: 0 !important;
    }
    .inbound-products-child-table > tbody > tr {
        display: grid !important;
        grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr) auto;
        grid-template-areas: "loc loc status" "qty price price" "btns btns btns";
        align-items: center;
        gap: var(--ui-space-2);
        height: auto !important;
        padding: var(--ui-space-2) var(--ui-space-3) var(--ui-space-1);
        border: 1px solid var(--ui-border) !important;
        border-radius: var(--ui-radius-md);
        background: var(--ui-subtle) !important;
    }
    .inbound-products-child-table > tbody > tr > td {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        text-align: left !important;
        white-space: normal !important;
    }
    .inbound-products-child-table > tbody > tr > td::before {
        display: none !important;
    }
    .modal .inbound-products-child-table > tbody > tr > td,
    .inbound-products-child-table.table > :not(caption) > * > *,
    #delivery_inbound_products_table .inbound-products-child-table > tbody > tr > td {
        border-bottom: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    .inbound-products-child-table > tbody > tr > td:nth-child(1) { grid-area: status; justify-self: end; }
    .inbound-products-child-table > tbody > tr > td:nth-child(2) { grid-area: qty; }
    .inbound-products-child-table > tbody > tr > td:nth-child(3) { grid-area: loc; overflow-wrap: anywhere; }
    /* seller lines have a price cell (5 cells), FC lines don't (4): the last cell is always the tools row */
    .inbound-products-child-table > tbody > tr > td:nth-child(4):not(:last-child) { grid-area: price; }
    .inbound-products-child-table > tbody > tr > td:last-child:nth-child(n+4) { grid-area: btns; justify-self: stretch; }
    .inbound-products-child-table > tbody > tr > td:last-child:nth-child(n+4):empty { display: none !important; }
    .inbound-products-child-table > tbody > tr:has(> td:nth-child(4):last-child) {
        grid-template-areas: "loc loc loc" "qty qty status" "btns btns btns";
    }
    /* location reads as the line's heading */
    .inbound-products-child-table > tbody > tr > td:nth-child(3) {
        display: flex !important;
        align-items: center;
        min-height: var(--ui-tap);
        font-weight: 600;
    }
    .inbound-products-child-table > tbody > tr > td:nth-child(3) > * {
        flex: 1 1 auto;
        min-width: 0;
    }
    .inbound-products-child-table .delivery-location-row {
        display: flex;
        align-items: center;
        gap: var(--ui-space-2);
    }
    .inbound-products-child-table .delivery-location-row {
        flex: 1 1 auto;
    }
    .inbound-products-child-table .delivery-location-input-wrap {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none !important;
    }
    .inbound-products-child-table .delivery-location-input-wrap .form-control {
        max-width: none !important;
    }
    .inbound-products-child-table .delivery-location-row {
        max-width: none !important;
        width: 100%;
        align-self: stretch;
    }
    .inbound-products-child-table .delivery-location-input-wrap .form-control {
        width: 100% !important;
    }
    /* stepper and price fill their halves */
    .inbound-products-child-table > tbody > tr > td:nth-child(2) > div,
    .inbound-products-child-table > tbody > tr > td:nth-child(2) .bootstrap-touchspin,
    .inbound-products-child-table > tbody > tr > td:nth-child(4):not(:last-child) .input-group {
        width: 100% !important;
        flex-wrap: nowrap;
    }
    .inbound-products-child-table > tbody > tr > td:nth-child(2) .bootstrap-touchspin > input {
        flex: 1 1 auto;
        width: 1%;
        min-width: 3ch;
        padding-inline: 2px;
        text-align: center;
    }
    .inbound-products-child-table > tbody > tr > td:nth-child(2) .bootstrap-touchspin > .input-group-btn > .btn {
        width: 40px;
        min-width: 40px;
        padding-inline: 0;
    }
    /* tools left, the line's saved/processed badge right */
    .inbound-products-child-table > tbody > tr > td:last-child:nth-child(n+4) > div {
        display: flex !important;
        width: 100%;
        justify-content: flex-start !important;
        flex-wrap: wrap;
        gap: 2px;
        margin-left: -12px; /* the first icon's glyph lines up with the location and stepper above */
        width: calc(100% + 12px);
    }
    .inbound-products-child-table > tbody > tr > td:last-child:nth-child(n+4) > div > :is(.badge, .ui-status, .ui-badge) {
        margin-left: auto;
        align-self: center;
    }
}

/* a pinned action row never holds content that can grow (lists load after the dialog opens) */
.cd-sticky-actions:has(table, .dataTables_wrapper, .table-responsive) {
    position: static !important;
}

/* DataTables inside .table-responsive drops the row's negative margins but only zeroes the last column's right
   padding; on phones the toolbar columns stack full width, so a lone search column kept a 12px left inset and its
   sort button was pushed past the card edge and clipped (mychannels/feeds export feeds) */
@media (max-width: 767.98px) {
    div.table-responsive > div.dataTables_wrapper > div.row > div[class^="col-"] {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Delivery dialog on tablets (576-1199px): the product table fits the dialog instead of scrolling sideways.
   No second frame around the list, the select-all label on one line, thumbnail/status/expand columns sized
   to their content and the per-location lines sized to their controls */
@media (min-width: 576px) and (max-width: 1199.98px) {
    #inbound-delivery-products-wrapper {
        padding-inline: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    #inbound-delivery-products-wrapper > #inbound-bulk-actions-card {
        margin-inline: 0 !important;
    }
    #inbound-bulk-actions-card .row > .col-md-3 {
        flex: 0 0 auto;
        width: auto;
        white-space: nowrap;
    }
    #inbound-bulk-actions-card .row > .col-md-9 {
        flex: 1 1 0;
        width: auto;
    }
    #delivery_inbound_products_table > tbody > tr > td {
        padding-inline: 8px !important;
    }
    #delivery_inbound_products_table_wrapper .dataTables_scrollHead th {
        padding-left: 8px !important;
    }
    #delivery_inbound_products_table > tbody > tr > td:nth-child(-n+3),
    #delivery_inbound_products_table_wrapper .dataTables_scrollHead th:nth-child(-n+3) {
        width: 1% !important;
        white-space: nowrap;
    }
    #delivery_inbound_products_table .inbound-products-child-table {
        width: 100% !important;
        table-layout: auto;
    }
    /* the line cells carry inline min-widths (125/125/150/180px) sized for desktop */
    #delivery_inbound_products_table .inbound-products-child-table > tbody > tr > td {
        width: auto !important;
        min-width: 0 !important;
        padding: 6px 8px !important;
    }
    #delivery_inbound_products_table .inbound-products-child-table > tbody > tr > td:last-child > div {
        flex-wrap: wrap;
        white-space: normal;
    }
    #delivery_inbound_products_table .inbound-products-child-table > tbody > tr > td:nth-child(1) {
        width: 1% !important;
        white-space: nowrap;
    }
    #delivery_inbound_products_table .inbound-products-child-table > tbody > tr > td:nth-child(2) > div {
        width: 128px !important;
    }
    #delivery_inbound_products_table .inbound-products-child-table .delivery-purchase-price {
        width: 150px !important;
        flex-wrap: nowrap;
    }
    #delivery_inbound_products_table .inbound-products-child-table .delivery-location-input-wrap,
    #delivery_inbound_products_table .inbound-products-child-table .delivery-location-input-wrap .form-control {
        max-width: none !important;
    }
}

/* Record dialog headers on phones (deliveries, orders, ...): one compact line (#id, status, type/channel pill,
   close) instead of three rows; a reference line wraps under it. The product dialog has its own header. */
@media (max-width: 575.98px) {
    .open-order-modal-panel > .open-order-modal-hero:not(.product-modal-hero) {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        position: relative;
        justify-content: flex-start !important;
        gap: var(--ui-space-1) var(--ui-space-2);
        min-height: 52px;
        padding: var(--ui-space-2) 52px var(--ui-space-2) var(--ui-space-3) !important;
    }
    .open-order-modal-panel > .open-order-modal-hero:not(.product-modal-hero) > .open-order-modal-hero-start {
        display: contents;
    }
    .open-order-modal-panel > .open-order-modal-hero:not(.product-modal-hero) .open-order-modal-hero-status .badge {
        padding: 4px 10px !important;
        line-height: 1.4;
    }
    .open-order-modal-panel > .open-order-modal-hero:not(.product-modal-hero) .open-order-modal-hero-channel-pill {
        width: auto !important;
        flex: none;
        order: 3;
        padding: 3px 10px !important;
        font-size: var(--ui-fs-sm);
    }
    .open-order-modal-panel > .open-order-modal-hero:not(.product-modal-hero) .open-order-modal-close {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 44px;
        height: 44px;
        margin: 0 !important;
        padding: 0 !important;
    }
    .open-order-modal-panel > .open-order-modal-hero:not(.product-modal-hero) .open-order-modal-hero-start > :not(h2):not(.open-order-modal-hero-status) {
        order: 9;
        flex: 0 1 auto;
        width: auto !important;
        min-width: 0;
        margin: 0 !important;
        font-size: var(--ui-fs-sm);
    }
}

/* Delivery lines that are already stocked (processed, badge shown) on phones: two calm rows instead of three.
     Huiskamer ........ [tag][print] [Stocked]
     [box] 10           [€ 0,00  ✓]
   The disabled process button repeats the badge, and a locked stepper reads as a plain quantity */
@media (max-width: 575.98px) {
    .inbound-products-child-table > tbody > tr:has(> td:first-child button:disabled):has(> td:last-child .badge-soft-success) {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "loc btns" "qty price";
        row-gap: var(--ui-space-1);
        padding-block: var(--ui-space-2);
    }
    .inbound-products-child-table > tbody > tr:has(> td:first-child button:disabled):has(> td:last-child .badge-soft-success) > td:first-child {
        display: none !important;
    }
    /* the price box has a fixed width so it never sizes the right column */
    .inbound-products-child-table > tbody > tr:has(> td:first-child button:disabled):has(> td:last-child .badge-soft-success) > td:nth-child(4):not(:last-child) {
        justify-self: end;
    }
    .inbound-products-child-table > tbody > tr:has(> td:first-child button:disabled):has(> td:last-child .badge-soft-success) .delivery-purchase-price {
        width: 168px !important;
    }
    .inbound-products-child-table .delivery-purchase-price > .form-control {
        width: 1% !important;
        min-width: 0 !important;
    }
    .inbound-products-child-table > tbody > tr:has(> td:first-child button:disabled):has(> td:last-child .badge-soft-success) > td:last-child .cd-icon-btn {
        width: 36px !important;
        min-width: 36px !important;
        height: 40px !important;
        min-height: 40px !important;
    }
    .inbound-products-child-table > tbody > tr:has(> td:first-child button:disabled):has(> td:last-child .badge-soft-success) > td:last-child > div {
        gap: 0 !important;
    }
    .inbound-products-child-table > tbody > tr:has(> td:first-child button:disabled):has(> td:last-child .badge-soft-success) > td:last-child .badge {
        padding: 3px 8px !important;
        font-size: var(--ui-fs-xs, 12px) !important;
    }
    .inbound-products-child-table > tbody > tr:has(> td:first-child button:disabled):has(> td:last-child .badge-soft-success) > td:nth-child(3) {
        min-height: 40px;
    }
    .inbound-products-child-table > tbody > tr:has(> td:first-child button:disabled):has(> td:last-child .badge-soft-success) > td:last-child {
        justify-self: end;
    }
    .inbound-products-child-table > tbody > tr:has(> td:first-child button:disabled):has(> td:last-child .badge-soft-success) > td:last-child > div {
        width: auto;
        margin-left: 0;
        flex-wrap: nowrap;
        align-items: center;
    }
    .inbound-products-child-table > tbody > tr:has(> td:first-child button:disabled):has(> td:last-child .badge-soft-success) > td:last-child > div > .badge {
        margin-left: var(--ui-space-1);
    }
    /* a locked quantity: no dead -/+ buttons, just the number */
    .inbound-products-child-table > tbody > tr > td:nth-child(2) > div:has(.bootstrap-touchspin > input:disabled) {
        display: flex !important;
        align-items: center;
        gap: var(--ui-space-2);
        width: auto !important;
    }
    .inbound-products-child-table > tbody > tr > td:nth-child(2) > div:has(.bootstrap-touchspin > input:disabled)::before {
        content: "\f466";
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 13px;
        color: var(--ui-muted);
    }
    .inbound-products-child-table > tbody > tr > td:nth-child(2) .bootstrap-touchspin:has(> input:disabled) {
        width: auto !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .inbound-products-child-table > tbody > tr > td:nth-child(2) .bootstrap-touchspin:has(> input:disabled) > .input-group-btn {
        display: none !important;
    }
    .inbound-products-child-table > tbody > tr > td:nth-child(2) .bootstrap-touchspin > input:disabled {
        flex: none !important;
        width: 8ch !important;
        min-height: 0;
        height: auto;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-align: left !important;
        font-weight: 600;
        font-size: var(--ui-fs-md, 15px);
        color: var(--ui-text) !important;
        -webkit-text-fill-color: var(--ui-text);
        opacity: 1;
    }
    /* product header: the received badge starts under the title text, not under the thumbnail */
    #delivery_inbound_products_table > tbody > tr.cd-card:has(> td.cd-c-media) > td.cd-c-status {
        padding-left: 42px !important;
    }
}

/* phones: the traceability button fills the line under its label */
@media (max-width: 575.98px) {
    table.cd-cards td.cd-c-field .delivery-serial-btn {
        width: 100%;
        min-width: 0;
        flex-direction: row;
        justify-content: center !important;
        align-items: center !important;
        min-height: var(--ui-tap);
        text-align: center !important;
    }
}

/* FC delivery lines on phones: the line's select checkbox sits in the bottom-right corner (thumb reach),
   the process button stays beside the quantity */
@media (max-width: 575.98px) {
    .inbound-products-child-table > tbody > tr:has(> td:nth-child(4):last-child):has(> td:first-child .product-selection-checkbox) {
        grid-template-areas: "loc loc loc" "qty qty status" "btns btns chk";
    }
    .inbound-products-child-table > tbody > tr:has(> td:nth-child(4):last-child) > td:first-child:has(.product-selection-checkbox),
    .inbound-products-child-table > tbody > tr:has(> td:nth-child(4):last-child) > td:first-child:has(.product-selection-checkbox) > div {
        display: contents !important;
    }
    .inbound-products-child-table > tbody > tr > td:first-child .product-selection-checkbox {
        grid-area: chk;
        justify-self: end;
        align-self: center;
        width: 24px;
        height: 24px;
        margin: 0 var(--ui-space-2) 0 0;
    }
    .inbound-products-child-table > tbody > tr:has(> td:nth-child(4):last-child) > td:first-child .product-selection-checkbox ~ button,
    .inbound-products-child-table > tbody > tr:has(> td:nth-child(4):last-child) > td:first-child .product-selection-checkbox ~ * {
        grid-area: status;
        justify-self: end;
    }
}

/* Date fields: iOS centres the value; left-aligned like every other field, with a calendar icon so the field
   reads as a picker */
@supports (-webkit-touch-callout: none) {
    input.form-control:is([type="date"], [type="datetime-local"], [type="month"], [type="time"]) {
        display: flex;
        align-items: center;
        text-align: left;
        -webkit-appearance: none;
        appearance: none;
    }
}
input.form-control:is([type="date"], [type="datetime-local"], [type="month"])::-webkit-date-and-time-value {
    text-align: left;
    margin: 0;
}
/* Date fields everywhere: Safari draws the value at the top of the box and an empty field as today's date in
   grey with black slashes. The value is centred vertically and the separators follow the text colour softly. */
@supports (font: -apple-system-body) {
    /* Safari only (macOS and iOS); Chrome centres the value and places its calendar icon itself */
    input.form-control:is([type="date"], [type="datetime-local"], [type="month"], [type="time"]) {
        display: flex;
        align-items: center;
    }
    input.form-control:is([type="date"], [type="datetime-local"], [type="month"], [type="time"])::-webkit-datetime-edit {
        padding: 0;
        line-height: normal;
    }
}
input.form-control:is([type="date"], [type="datetime-local"], [type="month"], [type="time"])::-webkit-datetime-edit-text {
    color: var(--ui-muted);
    padding: 0 1px;
}
@media (hover: none) and (pointer: coarse) {
    input.form-control:is([type="date"], [type="datetime-local"], [type="month"]) {
        padding-right: 40px;
        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 14px center;
        background-size: 18px 18px;
    }
    /* Chrome (Android, touch tablets) also draws its own icon: it stays tappable but invisible, over ours */
    input.form-control:is([type="date"], [type="datetime-local"], [type="month"])::-webkit-calendar-picker-indicator {
        opacity: 0;
        width: 28px;
        height: 28px;
        margin-right: -30px;
        cursor: pointer;
    }
}

/* Page header rhythm on phones, the same on every page: title + subtitle, buttons, filter chips 16px apart,
   and the content always 16px under the last of them (pages stacked 24/16/12px margins and an empty
   filter column's 16px into 28-64px). Tablets and desktop keep their uniform 24px. */
@media (max-width: 767.98px) {
    .page-header-toolbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--ui-space-4);
        margin-bottom: var(--ui-space-4) !important;
    }
    .page-header-toolbar > * {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .page-header {
        margin-bottom: var(--ui-space-4) !important;
    }
    .page-header-toolbar > .page-header {
        margin-bottom: 0 !important;
    }
    :not(.page-header-toolbar) > .page-header + .main-buttons {
        margin-top: 0 !important;
        margin-bottom: var(--ui-space-4) !important;
    }
    :is(.page-header-toolbar, .page-header, .page-header + .main-buttons) + * {
        margin-top: 0 !important;
    }
    /* a filter column whose panel is folded away takes no room */
    .filter-column:not(:has(.filters-sidebar.show, .filters-sidebar.collapsing)) {
        margin-bottom: 0 !important;
    }
}

/* Product dialog header on phones: a slimmer hero (44px thumbnail) and the actions as one row of equal
   icon-over-label tiles instead of two rows of wide buttons (211px -> ~140px) */
@media (max-width: 575.98px) {
    .open-order-modal-hero.product-modal-hero,
    .product-modal-hero.open-order-modal-hero {
        padding: var(--ui-space-2) var(--ui-space-1) var(--ui-space-2) var(--ui-space-3) !important;
        align-items: center;
        row-gap: 0 !important;
        min-height: 0 !important;
    }
    .product-modal-hero-img-btn .product-modal-hero-img {
        width: 44px !important;
        height: 44px !important;
    }
    .product-modal-hero-img-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px;
        flex: none;
    }
    .product-modal-hero-img-btn img {
        max-width: 100%;
        max-height: 100%;
    }
    .open-order-modal-actions.product-modal-actions {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--ui-space-2);
        padding: var(--ui-space-2) var(--ui-space-3) !important;
    }
    .product-modal-actions > .product-modal-actions-end {
        display: contents !important;
    }
    .product-modal-actions .btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 52px;
        margin: 0 !important;
        padding: 6px 4px !important;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        font-size: var(--ui-fs-xs, 12px);
        line-height: 1.2;
        white-space: normal;
        text-align: center;
    }
    .product-modal-actions .btn > i {
        margin: 0 !important;
        font-size: 15px;
    }
    .product-modal-actions .btn > span {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-align: center !important;
        font-weight: 500;
    }
}

/* Table toolbars on tablets (576-1199px): the length select, buttons and search used to fall into ragged
   rows (select alone, buttons, search floating right on its own). Now: select + buttons on one row, the search
   filling the next. Only for toolbars whose controls sit directly in the wrapper; Bootstrap-row toolbars
   keep their own layout. Laptops and wider fit everything on one line already. */
@media (min-width: 576px) and (max-width: 1199.98px) {
    .dataTables_wrapper:has(> .dataTables_length, > .dt-buttons):has(> .dataTables_filter) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--ui-space-2) 0;
    }
    .dataTables_wrapper:has(> .dataTables_length, > .dt-buttons):has(> .dataTables_filter) > * {
        flex: 0 0 100%;
        min-width: 0;
    }
    .dataTables_wrapper:has(> .dataTables_length, > .dt-buttons):has(> .dataTables_filter) > :is(.dataTables_length, .dt-buttons) {
        flex: 0 0 auto;
        margin: 0 var(--ui-space-2) 0 0 !important;
        float: none !important;
    }
    .dataTables_wrapper:has(> .dataTables_length, > .dt-buttons):has(> .dataTables_filter) > .dataTables_filter {
        flex: 1 1 100% !important;
        float: none !important;
        margin: 0 !important;
        text-align: left;
    }
    .dataTables_wrapper:has(> .dataTables_length, > .dt-buttons):has(> .dataTables_filter) > .dataTables_filter label,
    .dataTables_wrapper:has(> .dataTables_length, > .dt-buttons):has(> .dataTables_filter) > .dataTables_filter input {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }
    /* the select says enough on its own: "items weergeven" goes */
    .dataTables_wrapper:has(> .dataTables_length) > .dataTables_length label {
        font-size: 0;
        gap: 0;
        padding: 0 !important;
    }
    .dataTables_wrapper:has(> .dataTables_length) > .dataTables_length select {
        font-size: var(--ui-fs-base, 14px);
        margin: 0 !important;
    }
    .dataTables_wrapper:has(> .dataTables_length, > .dt-buttons):has(> .dataTables_filter) > :is(.cd-dt-loading-overlay, .dataTables_processing) {
        flex: none;
    }
}

/* Delivery lines with traceability data (expiry / batch / serial chips under the location) on phones: the
   location and its chips get the full width (they shared a row with the tools and badge, squeezing the
   location to a few characters per line); the tools and badge move to their own row */
@media (max-width: 575.98px) {
    .inbound-products-child-table > tbody > tr > td:nth-child(3):has(.delivery-trace-summary) {
        flex-wrap: wrap;
        row-gap: var(--ui-space-2);
    }
    .inbound-products-child-table > tbody > tr > td:nth-child(3) > .delivery-trace-summary {
        flex: 1 1 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: var(--ui-space-1) var(--ui-space-2);
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        text-align: left;
        font-weight: 400;
    }
    .inbound-products-child-table > tbody > tr:has(> td:first-child button:disabled):has(> td:last-child .badge-soft-success):has(> td:nth-child(3) .delivery-trace-summary) {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "loc loc" "qty price" "btns btns";
        row-gap: var(--ui-space-2);
    }
    .inbound-products-child-table > tbody > tr:has(> td:first-child button:disabled):has(> td:last-child .badge-soft-success):has(> td:nth-child(3) .delivery-trace-summary) > td:last-child {
        justify-self: stretch;
    }
    .inbound-products-child-table > tbody > tr:has(> td:first-child button:disabled):has(> td:last-child .badge-soft-success):has(> td:nth-child(3) .delivery-trace-summary) > td:last-child > div {
        width: calc(100% + 8px);
        margin-left: -8px;
    }
    .inbound-products-child-table > tbody > tr:has(> td:first-child button:disabled):has(> td:last-child .badge-soft-success):has(> td:nth-child(3) .delivery-trace-summary) > td:last-child > div > .badge {
        margin-left: auto;
    }
}

/* Card lists: status badges are compact pills on one line (desktop cells use big p-2 badges with extra
   flags such as "Late" stacked under them) */
@media (max-width: 575.98px) {
    table.cd-cards td.cd-c-status :is(.badge, .ui-status) {
        padding: 3px 10px !important;
        font-size: var(--ui-fs-xs, 12px) !important;
        line-height: 1.5;
        margin: 0 !important;
    }
    table.cd-cards td.cd-c-status > .ui-item__text,
    table.cd-cards td.cd-c-status .ui-item__meta {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: center !important;
        gap: var(--ui-space-1);
        margin: 0 !important;
    }
    table.cd-cards td.cd-c-status .ui-item__meta .ui-pill {
        padding: 3px 10px;
        font-size: var(--ui-fs-xs, 12px);
        line-height: 1.5;
    }
}
@media (max-width: 575.98px) {
    /* a two-line value (name + detail): the label lines up with its first line */
    table.cd-cards td.cd-c-field:has(> .cd-v .ui-item__meta) {
        align-items: start !important;
    }
    table.cd-cards td.cd-c-field:has(> .cd-v .ui-item__meta)::before {
        padding-top: 1px;
    }
}

/* Card lists: the status sits top-right beside the title (it took a row of its own, and after a select checkbox it
   was indented under the thumbnail); several flags stack on the right. Progress statuses and the delivery
   dialog's own layout keep their full-width row. Value badges in fields are compact pills. */
@media (max-width: 575.98px) {
    table.cd-cards:not(#delivery_inbound_products_table) > tbody > tr.cd-card:not(:has(> td.cd-c-status ~ td.cd-c-status)) > td.cd-c-status:not(:has(.ui-progress-cell, .progress)) {
        order: 3;
        flex: 0 1 auto;
        max-width: 45%;
        width: auto !important;
        margin-left: auto !important;
        padding-top: var(--ui-space-2) !important;
        align-self: flex-start;
        flex-direction: column;
        align-items: flex-end !important;
        justify-content: flex-start;
        gap: var(--ui-space-1);
        text-align: right;
    }
    table.cd-cards:not(#delivery_inbound_products_table) > tbody > tr.cd-card:not(:has(> td.cd-c-status ~ td.cd-c-status)) > td.cd-c-status:not(:has(.ui-progress-cell, .progress)) > .ui-item__text {
        flex-direction: column !important;
        align-items: flex-end !important;
    }
    table.cd-cards:not(#delivery_inbound_products_table) > tbody > tr.cd-card:not(:has(> td.cd-c-status ~ td.cd-c-status)) > td.cd-c-title:has(~ td.cd-c-status:not(:has(.ui-progress-cell, .progress))) {
        flex: 1 1 0;
        min-width: 0;
    }
    table.cd-cards td.cd-c-field .cd-v .badge {
        padding: 2px 10px !important;
        font-size: var(--ui-fs-sm, 13px) !important;
        line-height: 1.5;
    }
}
@media (max-width: 575.98px) {
    /* paired stats: one hairline under the card header only, and a link value (batch id) is text-height like its
       neighbours (the whole cell is the tap target) */
    table.cd-cards td.cd-c-field.cd-c-field--short:not(.cd-first-field) {
        box-shadow: none !important;
    }
    table.cd-cards td.cd-c-field.cd-c-field--short .cd-v a {
        display: inline !important;
        min-height: 0 !important;
        min-width: 0 !important;
        padding: 0;
    }
}
@media (max-width: 575.98px) {
    /* a number pill with a short detail ("1" + "1 in locations"): one line, detail then pill, centred on the label */
    table.cd-cards td.cd-c-field > .cd-v > .ui-item__text:has(> .badge + .ui-item__meta:last-child) {
        display: inline-flex !important;
        flex-direction: row-reverse !important;
        align-items: center !important;
        justify-content: flex-start;
        gap: var(--ui-space-2);
    }
    table.cd-cards td.cd-c-field > .cd-v > .ui-item__text:has(> .badge + .ui-item__meta:last-child) > .ui-item__meta {
        margin: 0 !important;
        white-space: nowrap;
    }
    table.cd-cards td.cd-c-field:has(> .cd-v > .ui-item__text > .badge + .ui-item__meta:last-child) {
        align-items: center !important;
    }
}
@media (max-width: 575.98px) {
    /* card fields with a value and a small detail (seller + contact, "0 products" + "1 box") read on one line:
       value · detail, so a card keeps one line per field and the list stays scannable */
    table.cd-cards td.cd-c-field > .cd-v :is(.ui-item__text):has(> .ui-item__title + .ui-item__meta) {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: baseline !important;
        column-gap: 6px;
        row-gap: 0;
        text-align: right;
    }
    table.cd-cards td.cd-c-field > .cd-v :is(.ui-item__text):has(> .ui-item__title + .ui-item__meta) > .ui-item__meta {
        margin: 0 !important;
    }
    table.cd-cards td.cd-c-field > .cd-v :is(.ui-item__text):has(> .ui-item__title + .ui-item__meta) > .ui-item__meta::before {
        content: "·";
        margin-right: 6px;
        color: var(--ui-muted);
    }
    table.cd-cards td.cd-c-field:has(> .cd-v .ui-item__title + .ui-item__meta) {
        align-items: center !important;
    }
}

@media (max-width: 575.98px) {
    /* several status cells (quantity + status + location): one row under the title, side by side */
    table.cd-cards > tbody > tr.cd-card:has(> td.cd-c-status ~ td.cd-c-status) > td.cd-c-status {
        flex: 0 1 auto !important;
        width: auto !important;
        order: 5;
    }
    table.cd-cards > tbody > tr.cd-card:has(> td.cd-c-status ~ td.cd-c-status) > td.cd-c-status ~ td.cd-c-status {
        margin-left: var(--ui-space-2) !important;
    }
    table.cd-cards > tbody > tr.cd-card:has(> td.cd-c-status ~ td.cd-c-status) > td.cd-c-status .ui-status-cell {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px var(--ui-space-2);
    }
}
@media (max-width: 575.98px) {
    table.cd-cards > tbody > tr.cd-card:has(> td.cd-c-status ~ td.cd-c-status) > td.cd-c-title {
        min-width: calc(100% - 64px) !important;
    }
}
@media (max-width: 575.98px) {
    /* an actions cell without any control (bundle component lines) takes no room */
    table.cd-cards > tbody > tr.cd-card > td.cd-c-actions:not(:has(button, a, input, select, .btn)) {
        display: none !important;
    }
}
@media (max-width: 575.98px) {
    /* shipping method options: icon · name + price · weight/size on one row like desktop (the weight row was forced
       to full width plus a left offset, so it ran past the card and was cut off) */
    .shipment-option-inner,
    .shipment-option-button .row {
        flex-wrap: nowrap !important;
        align-items: center;
        gap: var(--ui-space-2);
    }
    .shipment-option-meta {
        width: auto !important;
        max-width: 38% !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        padding-top: 0 !important;
        margin-left: auto !important;
        flex: none;
    }
    .shipment-option-icon {
        width: 2.5rem !important;
        height: 2.5rem !important;
        font-size: 1.25rem !important;
    }
}

/* Card list skeletons have the shape of the cards that replace them (thumbnail + title lines, a divider, two
   field lines), so the list doesn't jump between placeholder and content */
.ui-skeleton-card__head {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    padding-bottom: var(--ui-space-3);
    margin-bottom: var(--ui-space-2);
    border-bottom: 1px solid var(--ui-border);
}
.ui-skeleton-card__head > .ui-skeleton--thumb {
    flex: none;
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: var(--ui-radius-md);
}
.ui-skeleton-card__head > div {
    flex: 1;
    min-width: 0;
}
.ui-skeleton-card__field {
    display: flex;
    justify-content: space-between;
    gap: var(--ui-space-4);
}
.ui-skeleton-card__field > .ui-skeleton {
    width: 30%;
}
.ui-skeleton-card__field > .ui-skeleton + .ui-skeleton {
    width: 25%;
}
/* the product placeholder icon is drawn by CSS, so it is there on first paint (the icon font arrives later) */
.ui-thumb:has(> i.fa-image:only-child) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.6'/%3E%3Cpath d='M21 16l-5-5-9 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 46%;
}
.ui-thumb > i.fa-image:only-child {
    visibility: hidden;
}
@media (max-width: 575.98px) {
    /* before the kit turns a list into cards, its card frame doesn't flash as a narrow white bar */
    html.cd-booting .card:has(table.table):not(:has(.cd-cards-wrap)) {
        background: transparent !important;
        box-shadow: none !important;
        border-color: transparent !important;
    }
}
@media (max-width: 575.98px) {
    :is(.main-buttons, .page-header-toolbar):has(> :is(.btn, .btn-group, .dropdown):not(.filter-toggle-btn)) > .filter-toggle-btn .filter-chevron {
        display: none !important;
    }
}

/* Links inside a card value (an order or batch number) get a taller invisible hit area on phones */
@media (max-width: 767.98px) {
    .cd-card .cd-v a:not(.btn) {
        position: relative;
    }
    .cd-card .cd-v a:not(.btn)::before {
        content: "";
        position: absolute;
        inset: -6px -4px;
    }
}

/* Tablets: the top bar's "Watch tutorial" shows its icon only (the label wrapped under it next to the other tools) */
@media (max-width: 1199.98px) {
    .sidebar-tutorial-video-btn-label {
        display: none !important;
    }
}

/* Sales channel cards: the buttons say what they do, so no "Settings" row label; they share the full width */
@media (max-width: 767.98px) {
    .cd-card td:has(> .cd-v > .channel-row-actions, > .channel-row-actions)::before {
        content: none !important;
        display: none !important;
    }
    .cd-card td:has(.channel-row-actions) {
        grid-template-columns: minmax(0, 1fr) !important;
        display: block !important;
    }
    .cd-card .channel-row-actions {
        display: flex;
        width: 100%;
    }
    .cd-card .channel-row-actions > .channel-row-actions__btn,
    .cd-card .channel-row-actions > .btn-group {
        flex: 1 1 0;
    }
    .cd-card .channel-row-actions .btn-group > .channel-row-actions__btn {
        width: 100%;
        justify-content: center;
    }
    .cd-card .channel-row-actions > .channel-row-actions__btn {
        justify-content: center;
    }
}