/*
 * OptiBiz application UI foundation
 *
 * This compatibility layer gives legacy Bootstrap, Tailwind/DaisyUI and
 * module views one visual baseline while pages are migrated to shared
 * components. Keep print and the purpose-built POS layout out of broad rules.
 */

:root {
    --ui-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ui-font-size-xs: 12px;
    --ui-font-size-sm: 14px;
    --ui-font-size-md: 16px;
    --ui-font-size-lg: 20px;
    --ui-font-size-xl: 24px;
    --ui-font-size-2xl: 30px;
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 20px;
    --ui-space-6: 24px;
    --ui-space-8: 32px;
    --ui-color-canvas: #f5f7fa;
    --ui-color-surface: #ffffff;
    --ui-color-surface-subtle: #f8fafc;
    --ui-color-table-header: #e2e7ee;
    --ui-color-text: #182230;
    --ui-color-muted: #697586;
    --ui-color-border: #e3e8ef;
    --ui-color-border-strong: #cdd5df;
    --ui-color-danger: #b42318;
    --ui-radius-sm: 6px;
    --ui-radius-md: 8px;
    --ui-radius-lg: 12px;
    --ui-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
    --ui-shadow-popover: 0 12px 32px -12px rgba(15, 23, 42, 0.24);
    --ui-focus-ring: 0 0 0 3px color-mix(in srgb, var(--theme-700, #004eeb) 18%, transparent);
    --ui-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ui-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ui-control-height: 42px;
    --ui-button-height: 36px;
    --ui-button-height-sm: 32px;
    --ui-button-height-xs: 28px;
    --ui-button-height-lg: 42px;
    --ui-content-gutter: var(--ui-space-5);
    --ui-form-max-width: 960px;
}

body:not(.lockscreen) {
    color: var(--ui-color-text);
    font-family: var(--ui-font-sans);
    font-size: var(--ui-font-size-sm);
    line-height: 1.5;
}

body:not(.lockscreen):not(.auth-page) {
    background: var(--ui-color-canvas);
}

body:not(.lockscreen) :where(.content, .content-header, .module-toolbar, .modal, .dropdown-menu, .select2-container, .daterangepicker) {
    font-family: var(--ui-font-sans) !important;
}

body:not(.lockscreen) .app-content,
body:not(.lockscreen) .content-wrapper {
    background: var(--ui-color-canvas);
}

body:not(.lockscreen) .content,
body:not(.lockscreen) .content-header {
    padding-left: var(--ui-content-gutter);
    padding-right: var(--ui-content-gutter);
}

body:not(.lockscreen) .content-header {
    padding-top: var(--ui-space-5);
    padding-bottom: var(--ui-space-3);
}

body:not(.lockscreen) .content-header h1 {
    color: var(--ui-color-text);
    font-size: var(--ui-font-size-xl);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

body:not(.lockscreen) .content-header h1 small {
    display: block;
    margin-top: var(--ui-space-1);
    color: var(--ui-color-muted);
    font-size: var(--ui-font-size-sm);
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: normal;
}

/* Surfaces */
body:not(.lockscreen) .content :where(.box, .panel),
body:not(.lockscreen) .ui-card {
    margin-bottom: var(--ui-space-6);
    border: 1px solid var(--ui-color-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-color-surface);
    box-shadow: var(--ui-shadow-card);
}

body:not(.lockscreen) .content :where(.box, .panel):not(.box-danger, .box-warning, .box-success, .box-info, .box-primary) {
    border-top-color: var(--ui-color-border);
}

body:not(.lockscreen) .content .box-primary {
    border-top-color: var(--theme-700, #004eeb);
}

body:not(.lockscreen) .content .box-success {
    border-top-color: #067647;
}

body:not(.lockscreen) .content .box-warning {
    border-top-color: #b54708;
}

body:not(.lockscreen) .content :where(.box-danger, .box-error) {
    border-top-color: var(--ui-color-danger);
}

/* Accounting dashboard KPIs */
body:not(.lockscreen) .accounting-kpi-grid > [class*="col-"] {
    display: flex;
}

body:not(.lockscreen) .small-box.accounting-kpi-card {
    --accounting-kpi-accent: var(--theme-700, #004eeb);
    position: relative;
    width: 100%;
    margin-bottom: var(--ui-space-5);
    overflow: hidden;
    border: 1px solid var(--ui-color-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-color-surface);
    color: var(--ui-color-text);
    box-shadow: var(--ui-shadow-card);
}

body:not(.lockscreen) .small-box.accounting-kpi-card::before {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--accounting-kpi-accent);
    content: "";
}

body:not(.lockscreen) .accounting-kpi-card--journal {
    --accounting-kpi-accent: #6941c6;
}

body:not(.lockscreen) .accounting-kpi-card--transactions {
    --accounting-kpi-accent: #067647;
}

body:not(.lockscreen) .small-box.accounting-kpi-card > .inner {
    min-height: 96px;
    padding: var(--ui-space-5) 84px var(--ui-space-4) var(--ui-space-4);
}

body:not(.lockscreen) .small-box.accounting-kpi-card h4 {
    margin: 0 0 var(--ui-space-1);
    color: var(--ui-color-text);
    font-size: var(--ui-font-size-xl);
    font-weight: 700;
    line-height: 1.25;
}

body:not(.lockscreen) .small-box.accounting-kpi-card p {
    margin: 0;
    color: var(--ui-color-muted);
    font-size: var(--ui-font-size-sm);
    font-weight: 500;
}

body:not(.lockscreen) .small-box.accounting-kpi-card > .icon,
body:not(.lockscreen) .small-box.accounting-kpi-card:hover > .icon {
    position: absolute;
    top: var(--ui-space-4);
    right: var(--ui-space-4);
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: var(--ui-radius-md);
    background: color-mix(in srgb, var(--accounting-kpi-accent) 11%, white);
    color: var(--accounting-kpi-accent);
    font-size: var(--ui-font-size-lg);
}

body:not(.lockscreen) .small-box.accounting-kpi-card > .small-box-footer {
    display: flex;
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-2);
    padding: 9px var(--ui-space-4);
    border-top: 1px solid var(--ui-color-border);
    background: var(--ui-color-surface-subtle);
    color: var(--accounting-kpi-accent);
    font-size: var(--ui-font-size-xs);
    font-weight: 650;
    text-align: left;
}

body:not(.lockscreen) .small-box.accounting-kpi-card > .small-box-footer:hover,
body:not(.lockscreen) .small-box.accounting-kpi-card > .small-box-footer:focus-visible {
    background: color-mix(in srgb, var(--accounting-kpi-accent) 7%, white);
    color: var(--accounting-kpi-accent);
    text-decoration: none;
}

body:not(.lockscreen) .small-box.accounting-kpi-card > .small-box-footer:focus-visible {
    outline: 2px solid var(--accounting-kpi-accent);
    outline-offset: -2px;
}

@media (hover: hover) and (pointer: fine) {
    body:not(.lockscreen) .small-box.accounting-kpi-card:hover {
        border-color: var(--ui-color-border-strong);
        box-shadow: 0 6px 16px -10px rgba(15, 23, 42, 0.3);
    }
}

body:not(.lockscreen) .content :where(.box, .panel) > :first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

body:not(.lockscreen) .content :where(.box, .panel) > :last-child {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

body:not(.lockscreen) .box-header,
body:not(.lockscreen) .panel-heading {
    padding: var(--ui-space-4) var(--ui-space-5);
    border-bottom-color: var(--ui-color-border);
}

body:not(.lockscreen) .box-header .box-title,
body:not(.lockscreen) .panel-title {
    color: var(--ui-color-text);
    font-size: var(--ui-font-size-md);
    font-weight: 650;
    line-height: 1.4;
}

/* Card titles and page actions share one flow so absolute positioning never
   lets action buttons cover headings or the table toolbar below. */
body:not(.lockscreen) :where(.content .box, .ui-card) > .box-header:has(> .box-tools) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-3) var(--ui-space-4);
}

body:not(.lockscreen) :where(.content .box, .ui-card) > .box-header > .box-title {
    flex: 1 1 240px;
    min-width: 0;
    margin: 0;
}

body:not(.lockscreen) :where(.content .box, .ui-card) > .box-header > .box-tools {
    position: static;
    top: auto;
    right: auto;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ui-space-2);
    margin-left: auto;
}

body:not(.lockscreen) :where(.content .box, .ui-card) > .box-header > .box-tools > .pull-right {
    float: none !important;
}

body:not(.lockscreen) .box-body:not(.no-padding):not(.p-0):not(.pb-0):not([class*="tw-p-"]):not([class*="padding-"]),
body:not(.lockscreen) .panel-body:not(.no-padding):not(.p-0):not([class*="tw-p-"]):not([class*="padding-"]) {
    padding: var(--ui-space-5);
}

body:not(.lockscreen) .box-footer,
body:not(.lockscreen) .panel-footer {
    padding: var(--ui-space-4) var(--ui-space-5);
    border-top: 1px solid var(--ui-color-border);
    background: var(--ui-color-surface-subtle);
}

body:not(.lockscreen) .ui-card__header {
    padding: var(--ui-space-4) var(--ui-space-5);
    border-bottom: 1px solid var(--ui-color-border);
}

body:not(.lockscreen) .ui-card__body {
    padding: var(--ui-space-5);
}

body:not(.lockscreen) .ui-card__footer {
    padding: var(--ui-space-4) var(--ui-space-5);
    border-top: 1px solid var(--ui-color-border);
    background: var(--ui-color-surface-subtle);
}

/* Shared layout primitives for new and progressively migrated forms. */
body:not(.lockscreen) .ui-section + .ui-section {
    margin-top: var(--ui-space-6);
}

body:not(.lockscreen) .ui-form {
    width: 100%;
    max-width: var(--ui-form-max-width);
}

body:not(.lockscreen) .cash-register-open-form {
    margin-inline: auto;
}

body:not(.lockscreen) .ui-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--ui-space-4);
}

body:not(.lockscreen) .ui-form-grid > .ui-form-field--full {
    grid-column: 1 / -1;
}

/* Compact two-step import workflows. The download/export action and upload
   action stay visually related without stretching either control across a
   wide card. */
body:not(.lockscreen) .ui-import-workflow {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    width: 100%;
    max-width: 960px;
    margin-inline: auto;
    gap: var(--ui-space-4);
}

body:not(.lockscreen) .ui-import-workflow__step {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    min-width: 0;
    align-items: center;
    gap: var(--ui-space-3);
    margin: 0;
    padding: var(--ui-space-4);
    border: 1px solid var(--ui-color-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-color-surface-subtle);
}

body:not(.lockscreen) .ui-import-workflow__number {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--theme-700, #004eeb) 12%, white);
    color: var(--theme-900, #00359e);
    font-weight: 700;
}

body:not(.lockscreen) .ui-import-workflow__content {
    min-width: 0;
}

body:not(.lockscreen) form.ui-import-workflow__step .ui-import-workflow__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: end;
    gap: var(--ui-space-3);
}

body:not(.lockscreen) form.ui-import-workflow__step .ui-import-workflow__field.form-group {
    min-width: 0;
    margin-bottom: 0;
}

body:not(.lockscreen) form.ui-import-workflow__step .ui-import-workflow__content > button {
    align-self: end;
}

body:not(.lockscreen) .ui-import-workflow__field input[type="file"] {
    display: block;
    width: 100%;
    min-height: var(--ui-control-height);
    padding: 4px;
    overflow: hidden;
    border: 1px solid var(--ui-color-border-strong);
    border-radius: var(--ui-radius-md);
    background: var(--ui-color-surface);
    color: #475467;
    font-size: var(--ui-font-size-sm);
    line-height: 32px;
}

body:not(.lockscreen) .ui-import-workflow__field input[type="file"]::file-selector-button,
body:not(.lockscreen) .ui-import-workflow__field input[type="file"]::-webkit-file-upload-button {
    height: 32px;
    margin: 0 var(--ui-space-3) 0 0;
    padding: 0 var(--ui-space-3);
    border: 0;
    border-radius: var(--ui-radius-sm);
    background: #eef2f6;
    color: #344054;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

body:not(.lockscreen) .ui-import-workflow__field input[type="file"]:focus-visible {
    border-color: var(--theme-700, #004eeb);
    outline: 0;
    box-shadow: var(--ui-focus-ring);
}

body:not(.lockscreen) .ui-import-workflow__secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-2);
    border: 1px solid var(--ui-color-border-strong);
    background: var(--ui-color-surface);
    color: #344054;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

body:not(.lockscreen) .ui-import-workflow__secondary:hover {
    border-color: #98a2b3;
    background: #eef2f6;
    color: var(--ui-color-text);
}

body:not(.lockscreen) .ui-import-notes {
    max-width: 960px;
    margin: var(--ui-space-4) auto 0;
    padding: var(--ui-space-4) var(--ui-space-5);
    border-left: 3px solid var(--theme-700, #004eeb);
    border-radius: var(--ui-radius-md);
    background: var(--ui-color-surface-subtle);
}

body:not(.lockscreen) .ui-import-notes h4 {
    margin: 0 0 var(--ui-space-2);
    color: var(--ui-color-text);
    font-size: var(--ui-font-size-sm);
    font-weight: 700;
}

body:not(.lockscreen) .ui-import-notes ol {
    margin: 0;
    padding-left: var(--ui-space-5);
    color: #475467;
}

body:not(.lockscreen) .ui-import-notes li + li {
    margin-top: var(--ui-space-1);
}

/* Product label selection uses one shared left edge. The search stays at a
   comfortable reading width while the results table uses the card width. */
body:not(.lockscreen) .label-product-builder__search {
    width: 100%;
    max-width: 760px;
    margin-bottom: var(--ui-space-4);
}

body:not(.lockscreen) .label-product-builder__table,
body:not(.lockscreen) .label-product-builder__table > table {
    width: 100%;
}

body:not(.lockscreen) .label-product-builder__table > table {
    margin-bottom: 0;
}

/* OSCU stock operations form one compact toolbar: the branch selector sets
   context, followed by the two operations that act on that context. */
body:not(.lockscreen) .oscu-stock-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--ui-space-4);
}

body:not(.lockscreen) .oscu-stock-toolbar form {
    margin: 0;
}

body:not(.lockscreen) .oscu-stock-toolbar__location {
    flex: 0 1 380px;
    min-width: 260px;
}

body:not(.lockscreen) .oscu-stock-toolbar__location label,
body:not(.lockscreen) .oscu-stock-toolbar__direction label {
    display: block;
    margin-bottom: var(--ui-space-2);
    color: #344054;
    font-weight: 600;
}

body:not(.lockscreen) .oscu-stock-toolbar__location .form-control,
body:not(.lockscreen) .oscu-stock-toolbar__direction .form-control {
    width: 100%;
}

body:not(.lockscreen) .oscu-stock-toolbar__actions {
    display: flex;
    flex: 0 1 800px;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--ui-space-2);
}

body:not(.lockscreen) .oscu-stock-toolbar__sync {
    display: flex;
    flex: 0 1 620px;
    min-width: 0;
    align-items: flex-end;
    gap: var(--ui-space-2);
}

body:not(.lockscreen) .oscu-stock-toolbar__direction {
    flex: 1 1 320px;
    min-width: 260px;
}

body:not(.lockscreen) .oscu-stock-toolbar :where(.btn, .tw-dw-btn) {
    min-height: var(--ui-control-height);
    white-space: nowrap;
}

/* Manufacturing reporting and settings use compact, content-sized controls
   instead of offset grid columns that leave most of the card empty. */
body:not(.lockscreen) .mfg-report-toolbar {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(280px, 440px) max-content max-content;
    align-items: end;
    gap: var(--ui-space-3);
}

body:not(.lockscreen) .mfg-report-toolbar__title {
    align-self: center;
    margin: 0;
    color: var(--ui-color-text);
    font-size: var(--ui-font-size-md);
    font-weight: 650;
}

body:not(.lockscreen) .mfg-report-toolbar__field {
    min-width: 0;
}

body:not(.lockscreen) .mfg-report-toolbar__field > label {
    display: block;
    margin-bottom: var(--ui-space-2);
    color: #475467;
    font-size: var(--ui-font-size-xs);
    font-weight: 650;
}

body:not(.lockscreen) .mfg-report-toolbar__field .input-group,
body:not(.lockscreen) .mfg-report-toolbar__field .select2-container {
    width: 100% !important;
}

body:not(.lockscreen) .mfg-report-toolbar :where(.btn, .input-group-addon) {
    min-height: var(--ui-control-height);
}

body:not(.lockscreen) .mfg-report-toolbar .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-2);
    white-space: nowrap;
}

body:not(.lockscreen) .mfg-report-summary,
body:not(.lockscreen) .mfg-report-links {
    margin-bottom: var(--ui-space-2);
}

body:not(.lockscreen) .mfg-settings-card {
    max-width: 1180px;
    margin-inline: auto;
}

body:not(.lockscreen) .mfg-settings-card .ui-card__header .box-title {
    margin: 0;
}

body:not(.lockscreen) .mfg-settings-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) repeat(2, minmax(260px, 1fr));
    align-items: stretch;
    gap: var(--ui-space-4);
}

body:not(.lockscreen) .mfg-settings-prefix {
    align-self: center;
    margin: 0;
}

body:not(.lockscreen) .mfg-settings-option {
    display: flex;
    min-height: 88px;
    align-items: flex-start;
    gap: var(--ui-space-3);
    margin: 0;
    padding: var(--ui-space-4);
    border: 1px solid var(--ui-color-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-color-surface-subtle);
    color: #344054;
    font-weight: 600;
    line-height: 1.45;
    cursor: pointer;
}

body:not(.lockscreen) .mfg-settings-option :where(.icheckbox_square-blue, input[type="checkbox"]) {
    flex: 0 0 auto;
    margin-top: 1px;
}

body:not(.lockscreen) .mfg-settings-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-4);
}

body:not(.lockscreen) .mfg-settings-footer .help-block {
    margin: 0;
}

/* Keep ordinary forms readable on wide screens. Transaction screens, data
   tables, filter toolbars and tabbed settings deliberately retain full width. */
@supports selector(form:has(.table)) {
    body:not(.lockscreen) .content form:not(.form-inline):not(.ui-form--full):not([data-ui-form-width="full"]):not([id*="filter"]):not([class*="filter"]):not(:has(.table)):not(:has(.dataTables_wrapper)):not(:has(.pos-tab-container)) {
        width: 100%;
        max-width: var(--ui-form-max-width);
    }
}

@media screen and (max-width: 767px) {
    body:not(.lockscreen) .ui-import-workflow {
        grid-template-columns: minmax(0, 1fr);
    }

    body:not(.lockscreen) .ui-import-workflow__step {
        padding: var(--ui-space-4);
    }

    body:not(.lockscreen) form.ui-import-workflow__step .ui-import-workflow__content {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--ui-space-2);
    }

    body:not(.lockscreen) .ui-import-workflow__secondary,
    body:not(.lockscreen) .ui-import-workflow__content > button {
        width: 100%;
        justify-content: center;
    }

    body:not(.lockscreen) .ui-import-notes {
        padding: var(--ui-space-4);
    }

    body:not(.lockscreen) .oscu-stock-toolbar__location,
    body:not(.lockscreen) .oscu-stock-toolbar__actions,
    body:not(.lockscreen) .oscu-stock-toolbar__pull,
    body:not(.lockscreen) .oscu-stock-toolbar__sync,
    body:not(.lockscreen) .oscu-stock-toolbar__direction {
        width: 100%;
        min-width: 0;
        flex-basis: 100%;
    }

    body:not(.lockscreen) .oscu-stock-toolbar__sync {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    body:not(.lockscreen) .oscu-stock-toolbar :where(.btn, .tw-dw-btn) {
        width: 100%;
    }

    body:not(.lockscreen) .mfg-report-toolbar,
    body:not(.lockscreen) .mfg-settings-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body:not(.lockscreen) .mfg-report-toolbar :where(.input-group, .btn) {
        width: 100%;
    }

    body:not(.lockscreen) .mfg-settings-footer {
        align-items: stretch;
        flex-direction: column;
    }

    body:not(.lockscreen) .mfg-settings-footer .btn {
        width: 100%;
    }
}

/* Form controls and states */
body:not(.lockscreen) .content .control-label,
body:not(.lockscreen) .content .form-group > label,
body:not(.lockscreen) .modal .control-label,
body:not(.lockscreen) .modal .form-group > label {
    margin-bottom: var(--ui-space-2);
    color: #344054;
    font-size: var(--ui-font-size-sm);
    font-weight: 600;
    line-height: 1.4;
}

body:not(.lockscreen) :where(.content, .modal) .form-group {
    margin-bottom: var(--ui-space-4);
}

body:not(.lockscreen) :where(.content, .modal) .form-control,
body:not(.lockscreen) :where(.content, .modal) .select2-container .select2-selection--single,
body:not(.lockscreen) :where(.content, .modal) .select2-container .select2-selection--multiple,
body:not(.lockscreen) :where(.content, .modal) .vs__dropdown-toggle {
    min-height: var(--ui-control-height);
    border: 1px solid var(--ui-color-border-strong);
    border-radius: var(--ui-radius-md);
    background-color: var(--ui-color-surface);
    color: var(--ui-color-text);
    font-size: var(--ui-font-size-sm);
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

body:not(.lockscreen) :where(.content, .modal) input.form-control,
body:not(.lockscreen) :where(.content, .modal) select.form-control {
    height: var(--ui-control-height);
    padding: 9px 12px;
}

body:not(.lockscreen) :where(.content, .modal) textarea.form-control {
    min-height: 96px;
    height: auto;
    padding: 10px 12px;
    resize: vertical;
}

body:not(.lockscreen) :where(.content, .modal) .input-group-addon {
    height: var(--ui-control-height);
    padding: 9px 12px;
    border-color: var(--ui-color-border-strong);
    background: var(--ui-color-surface-subtle);
    color: #475467;
}

body:not(.lockscreen) :where(.content, .modal) .input-group-btn > .btn {
    height: var(--ui-control-height);
}

body:not(.lockscreen) :where(.content, .modal) .form-control::placeholder,
body:not(.lockscreen) :where(.content, .modal) .vs__search::placeholder {
    color: #9aa4b2;
    opacity: 1;
}

body:not(.lockscreen) :where(.content, .modal) .form-control:focus,
body:not(.lockscreen) :where(.content, .modal) .select2-container--focus .select2-selection,
body:not(.lockscreen) :where(.content, .modal) .select2-container--open .select2-selection,
body:not(.lockscreen) :where(.content, .modal) .vs--open .vs__dropdown-toggle,
body:not(.lockscreen) :where(.content, .modal) .v-select:focus-within .vs__dropdown-toggle {
    border-color: var(--theme-700, #004eeb) !important;
    outline: 0;
    box-shadow: var(--ui-focus-ring) !important;
}

body:not(.lockscreen) :where(.content, .modal) .form-control[disabled],
body:not(.lockscreen) :where(.content, .modal) .form-control[readonly],
body:not(.lockscreen) :where(.content, .modal) .select2-container--disabled .select2-selection,
body:not(.lockscreen) :where(.content, .modal) .vs--disabled .vs__dropdown-toggle {
    border-color: var(--ui-color-border);
    background: #f2f4f7;
    color: var(--ui-color-muted);
    cursor: not-allowed;
    opacity: 1;
}

body:not(.lockscreen) :where(.content, .modal) .form-control.is-invalid,
body:not(.lockscreen) :where(.content, .modal) .form-control.error,
body:not(.lockscreen) :where(.content, .modal) .has-error .form-control,
body:not(.lockscreen) :where(.content, .modal) .has-error .select2-selection {
    border-color: var(--ui-color-danger) !important;
}

body:not(.lockscreen) :where(.content, .modal) label.error,
body:not(.lockscreen) :where(.content, .modal) .invalid-feedback,
body:not(.lockscreen) :where(.content, .modal) .help-block {
    margin-top: var(--ui-space-2);
    font-size: var(--ui-font-size-xs);
    line-height: 1.4;
}

body:not(.lockscreen) :where(.content, .modal) label.error,
body:not(.lockscreen) :where(.content, .modal) .invalid-feedback,
body:not(.lockscreen) :where(.content, .modal) .has-error .help-block {
    color: var(--ui-color-danger);
}

body:not(.lockscreen) :where(.content, .modal) label.ui-required-label::after {
    content: " *";
    color: var(--ui-color-danger);
}

/* Select2 alignment */
/* Dropdowns mount under body, outside the page's form-control styles.
   Keep native search inputs light even when the browser prefers dark UI. */
body .select2-search__field,
body input[type="search"] {
    color-scheme: light;
    background-color: var(--ui-color-surface);
    color: var(--ui-color-text);
    caret-color: var(--ui-color-text);
}

body .select2-search--dropdown {
    padding: var(--ui-space-2);
    background-color: var(--ui-color-surface);
}

body .select2-search--dropdown .select2-search__field {
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--ui-color-border-strong);
    border-radius: var(--ui-radius-sm);
}

body .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--theme-700, #004eeb);
    outline: 0;
    box-shadow: var(--ui-focus-ring);
}

body .select2-search__field::placeholder,
body input[type="search"]::placeholder {
    color: var(--ui-color-muted);
    opacity: 1;
}

body:not(.lockscreen) :where(.content, .modal) .select2-container {
    width: 100% !important;
}

body:not(.lockscreen) :where(.content, .modal) .select2-container .select2-selection--single {
    padding: 7px 36px 7px 12px;
}

body:not(.lockscreen) :where(.content, .modal) .select2-container .select2-selection--single .select2-selection__rendered {
    min-height: 26px;
    margin-top: 0;
    padding: 2px 0;
    color: var(--ui-color-text);
    line-height: 22px;
}

body:not(.lockscreen) :where(.content, .modal) .select2-container .select2-selection--single .select2-selection__arrow {
    top: 6px;
    right: 8px;
    height: 28px;
}

body:not(.lockscreen) :where(.content, .modal) .select2-container .select2-selection--multiple {
    padding: 4px 8px;
}

body:not(.lockscreen) .select2-dropdown,
body:not(.lockscreen) .vs__dropdown-menu {
    border-color: var(--ui-color-border-strong);
    border-radius: var(--ui-radius-md);
    box-shadow: var(--ui-shadow-popover);
}

/* Vue Select compatibility. Accounting previously loaded the component JS
   without its structural stylesheet on the primary module layout. */
body:not(.lockscreen) .v-select {
    position: relative;
    font-family: inherit;
}

body:not(.lockscreen) .v-select .vs__dropdown-toggle {
    display: flex;
    align-items: stretch;
    padding: 0 4px 0 8px;
}

body:not(.lockscreen) .v-select .vs__selected-options {
    position: relative;
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
}

body:not(.lockscreen) .v-select .vs__search,
body:not(.lockscreen) .v-select .vs__search:focus,
body:not(.lockscreen) .v-select .vs__selected {
    width: 0;
    min-width: 0;
    margin: 0;
    padding: 8px 4px;
    border: 0;
    background: transparent;
    color: var(--ui-color-text);
    font-size: var(--ui-font-size-sm);
    line-height: 24px;
    box-shadow: none;
}

body:not(.lockscreen) .v-select .vs__search {
    flex: 1 1 auto;
    width: auto;
}

body:not(.lockscreen) .v-select .vs__selected {
    position: absolute;
    left: 0;
    right: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.lockscreen) .v-select.vs--open .vs__selected {
    opacity: 0.45;
}

body:not(.lockscreen) .v-select .vs__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
}

body:not(.lockscreen) .v-select .vs__clear {
    padding: 4px;
    border: 0;
    background: transparent;
}

body:not(.lockscreen) .v-select .vs__open-indicator {
    fill: #697586;
    transition: transform 180ms var(--ui-ease-out);
}

body:not(.lockscreen) .v-select.vs--open .vs__open-indicator {
    transform: rotate(180deg);
}

body:not(.lockscreen) .v-select .vs__dropdown-menu {
    position: absolute;
    z-index: 1000;
    top: calc(100% + 4px);
    left: 0;
    display: block;
    width: 100%;
    max-height: 280px;
    margin: 0;
    padding: 4px;
    overflow-y: auto;
    list-style: none;
    background: var(--ui-color-surface);
}

body:not(.lockscreen) .v-select .vs__dropdown-option {
    padding: 9px 10px;
    border-radius: var(--ui-radius-sm);
    color: var(--ui-color-text);
    cursor: pointer;
}

body:not(.lockscreen) .v-select .vs__dropdown-option--highlight {
    background: color-mix(in srgb, var(--theme-700, #004eeb) 10%, white);
    color: var(--theme-900, #00359e);
}

body:not(.lockscreen) .v-select .vs__dropdown-option--disabled {
    color: #9aa4b2;
    cursor: not-allowed;
}

/* Buttons.
   The POS layout (body.lockscreen) is excluded from this file's rules, so its
   modals kept DaisyUI's unstyled 48px default while the rest of the app used
   36px. Modals are shared chrome rather than till furniture, so POS modal
   buttons opt back in to the standard here. */
body:not(.lockscreen) :where(.content, .modal, .module-toolbar) :where(.btn, .tw-dw-btn),
body.lockscreen .modal :where(.btn, .tw-dw-btn) {
    min-height: var(--ui-button-height);
    border-radius: var(--ui-radius-md);
    font-size: var(--ui-font-size-sm);
    font-weight: 600;
    line-height: 1.2;
    transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 120ms var(--ui-ease-out);
}

/* DaisyUI sets its own height on .tw-dw-btn, which min-height alone does not
   override. */
body.lockscreen .modal :where(.tw-dw-btn) {
    height: auto;
}

body:not(.lockscreen) :where(.content, .modal, .module-toolbar) :where(.btn, .tw-dw-btn):not(.btn-lg):not(.btn-sm):not(.btn-xs):not(.tw-dw-btn-lg):not(.tw-dw-btn-sm):not(.tw-dw-btn-xs):not([class*="tw-h-"]) {
    height: var(--ui-button-height);
    padding: 7px 12px;
}

body:not(.lockscreen) :where(.content, .modal, .module-toolbar) :where(.btn-sm, .tw-dw-btn-sm) {
    height: var(--ui-button-height-sm);
    min-height: var(--ui-button-height-sm);
    padding: 6px 10px;
    font-size: var(--ui-font-size-xs);
}

body:not(.lockscreen) :where(.content, .modal, .module-toolbar) :where(.btn-xs, .tw-dw-btn-xs) {
    height: var(--ui-button-height-xs);
    min-height: var(--ui-button-height-xs);
    padding: 4px 8px;
    font-size: var(--ui-font-size-xs);
    line-height: 1.2;
}

body:not(.lockscreen) :where(.content, .modal, .module-toolbar) :where(.btn-lg, .tw-dw-btn-lg) {
    height: var(--ui-button-height-lg);
    min-height: var(--ui-button-height-lg);
    padding: 9px 16px;
}

body:not(.lockscreen) :where(.content, .modal, .module-toolbar) :where(.btn, .tw-dw-btn):focus-visible {
    outline: 2px solid var(--theme-700, #004eeb);
    outline-offset: 2px;
}

body:not(.lockscreen) :where(.content, .modal, .module-toolbar) :where(.btn, .tw-dw-btn):active:not([disabled]) {
    transform: scale(0.97);
}

body:not(.lockscreen) :where(.content, .modal, .module-toolbar) :where(.btn, .tw-dw-btn)[disabled],
body:not(.lockscreen) :where(.content, .modal, .module-toolbar) :where(.btn, .tw-dw-btn).disabled {
    cursor: not-allowed;
    opacity: 0.5;
    box-shadow: none;
}

body:not(.lockscreen) :where(.content, .modal, .module-toolbar) :where(.btn-primary, .tw-dw-btn-primary) {
    border-color: var(--theme-800, #0040c1) !important;
    background-color: var(--theme-800, #0040c1) !important;
    background-image: none !important;
    color: #fff !important;
}

body:not(.lockscreen) :where(.content, .modal, .module-toolbar) :where(.btn-primary, .tw-dw-btn-primary):hover {
    border-color: var(--theme-700, #004eeb) !important;
    background-color: var(--theme-700, #004eeb) !important;
}

body:not(.lockscreen) :where(.content, .modal, .module-toolbar) :where(.btn-default, .btn-secondary, .tw-dw-btn-outline:not(.tw-dw-btn-error):not(.tw-dw-btn-warning):not(.tw-dw-btn-success)) {
    border-color: var(--ui-color-border-strong);
    background: var(--ui-color-surface);
    color: #344054;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

body:not(.lockscreen) :where(.content, .modal, .module-toolbar) :where(.btn-default, .btn-secondary, .tw-dw-btn-outline):hover {
    border-color: #98a2b3;
    background: var(--ui-color-surface-subtle);
}

body:not(.lockscreen) :where(.content, .modal, .module-toolbar) :where(.btn-danger, .tw-dw-btn-error) {
    border-color: var(--ui-color-danger) !important;
    background-color: var(--ui-color-danger) !important;
    color: #fff !important;
}

body:not(.lockscreen) :where(.content, .modal, .module-toolbar) :where(.btn-danger, .tw-dw-btn-error):hover,
body:not(.lockscreen) :where(.content, .modal, .module-toolbar) :where(.btn-danger, .tw-dw-btn-error):focus-visible {
    border-color: #912018 !important;
    background-color: #912018 !important;
    color: #fff !important;
}

/* Shared list/report filters, including legacy Bootstrap column slots. */
body:not(.lockscreen) .ui-filters {
    margin-bottom: var(--ui-space-4);
    overflow: visible;
}

body:not(.lockscreen) .ui-filters__heading {
    margin: 0;
    font-size: var(--ui-font-size-sm);
}

body:not(.lockscreen) .ui-filters__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 10px 18px;
    border: 0;
    border-radius: var(--ui-radius-lg);
    background: color-mix(in srgb, var(--theme-800, #0040c1) 5%, white);
    color: var(--theme-900, #00359e);
    font: inherit;
    font-weight: 650;
    text-align: start;
}

body:not(.lockscreen) .ui-filters__toggle[aria-expanded="true"] {
    border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0;
}

body:not(.lockscreen) .ui-filters__toggle:hover {
    background: color-mix(in srgb, var(--theme-800, #0040c1) 9%, white);
}

body:not(.lockscreen) .ui-filters__toggle:focus-visible {
    outline: 2px solid var(--theme-800, #0040c1);
    outline-offset: 2px;
}

body:not(.lockscreen) .ui-filters__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--theme-800, #0040c1) 10%, white);
}

body:not(.lockscreen) .ui-filters__chevron {
    margin-inline-start: auto;
    font-size: 12px;
}

body:not(.lockscreen) .ui-filters__toggle[aria-expanded="true"] .ui-filters__chevron {
    transform: rotate(180deg);
}

body:not(.lockscreen) .ui-filters__fields {
    padding: 18px;
    border-top: 1px solid var(--ui-color-border);
}

body:not(.lockscreen) .ui-filters :is(.ui-filters__fields, .row, form):has(> [class*="col-"]) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(260px, calc(25% - 12px))), 1fr));
    align-items: end;
    gap: 16px;
}

body:not(.lockscreen) .ui-filters .row {
    margin: 0;
}

body:not(.lockscreen) .ui-filters__fields > :is(.row, form) {
    grid-column: 1 / -1;
    min-width: 0;
}

body:not(.lockscreen) .ui-filters .row::before,
body:not(.lockscreen) .ui-filters .row::after {
    content: none;
}

body:not(.lockscreen) .ui-filters :is(.ui-filters__fields, .row, form) > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
}

body:not(.lockscreen) .ui-filters :is(.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12) {
    grid-column: 1 / -1;
}

body:not(.lockscreen) .ui-filters [class*="col-"] > br {
    display: none;
}

body:not(.lockscreen) .ui-filters .form-group {
    margin-bottom: 0;
}

body:not(.lockscreen) .ui-filters .select2-container {
    width: 100% !important;
    min-width: 0;
}

body:not(.lockscreen) .ui-filters .input-group {
    display: flex;
    width: 100%;
}

body:not(.lockscreen) .ui-filters .input-group > :is(.form-control, .select2-container) {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
}

body:not(.lockscreen) .ui-filters .input-group > .input-group-addon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    border-radius: var(--ui-radius-md) 0 0 var(--ui-radius-md);
    color: var(--theme-800, #0040c1);
}

body:not(.lockscreen) .ui-filters .input-group > .input-group-addon + .form-control,
body:not(.lockscreen) .ui-filters .input-group > .select2-container .select2-selection {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

body:not(.lockscreen) .ui-filters .input-group:focus-within .input-group-addon {
    border-color: var(--theme-800, #0040c1);
}

/* Modals, tabs and pagination */
body:not(.lockscreen) .modal-content {
    border: 1px solid var(--ui-color-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-popover);
    overflow: hidden;
}

body:not(.lockscreen) .modal-header,
body:not(.lockscreen) .modal-footer {
    padding: var(--ui-space-4) var(--ui-space-5);
    border-color: var(--ui-color-border);
}

@media screen {
    body:not(.lockscreen) .modal-header {
        border-bottom-color: var(--theme-900, #00359e);
        background: linear-gradient(to right, var(--theme-800, #0040c1), var(--theme-900, #00359e));
        color: #fff;
    }

    body:not(.lockscreen) .modal-header .modal-title {
        color: inherit;
        font-weight: 600;
    }

    body:not(.lockscreen) .modal-header .close {
        color: #fff;
        opacity: 1;
        text-shadow: none;
        border-radius: var(--ui-radius-sm);
    }

    body:not(.lockscreen) .modal-header .close:hover,
    body:not(.lockscreen) .modal-header .close:focus-visible {
        background-color: rgba(255, 255, 255, 0.16);
        color: #fff;
    }

    body:not(.lockscreen) .modal-header .close:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 3px;
    }
}

body:not(.lockscreen) .modal-body {
    padding: var(--ui-space-5);
}

body:not(.lockscreen) .nav-tabs {
    display: flex;
    gap: var(--ui-space-1);
    border-bottom-color: var(--ui-color-border);
}

/* Bootstrap's justified tabs size each item as a 1% table cell; inside the flex row above that
   squeezed the tabs onto each other. Let them share the row evenly instead. */
body:not(.lockscreen) .nav-tabs.nav-justified > li {
    display: block;
    flex: 1 1 0;
    float: none;
    width: auto;
    text-align: center;
}

body:not(.lockscreen) .nav-tabs > li > a {
    margin: 0 0 -1px;
    padding: 10px 12px;
    border-radius: var(--ui-radius-md) var(--ui-radius-md) 0 0;
    color: var(--ui-color-muted);
    font-weight: 600;
}

body:not(.lockscreen) .nav-tabs > li.active > a,
body:not(.lockscreen) .nav-tabs > li.active > a:hover,
body:not(.lockscreen) .nav-tabs > li.active > a:focus {
    border-color: var(--ui-color-border) var(--ui-color-border) var(--ui-color-surface);
    color: var(--theme-800, #0040c1);
}

body:not(.lockscreen) .pagination > li > a,
body:not(.lockscreen) .pagination > li > span {
    min-width: 34px;
    min-height: 34px;
    padding: 7px 10px;
    border-color: var(--ui-color-border);
    color: #475467;
}

body:not(.lockscreen) .pagination > .active > a,
body:not(.lockscreen) .pagination > .active > span,
body:not(.lockscreen) .pagination > .active > a:hover,
body:not(.lockscreen) .pagination > .active > span:hover {
    border-color: var(--theme-800, #0040c1);
    background: var(--theme-800, #0040c1);
    color: #fff;
}

/* Tables and DataTables toolbars */
body:not(.lockscreen) .ui-table-scroll {
    /* A table must not set the intrinsic width of its own viewport. In
       shrink-to-fit cards that creates a ResizeObserver growth loop. */
    contain: inline-size;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-color: #98a2b3 #eef2f6;
    scrollbar-width: thin;
}

body:not(.lockscreen) table.ui-resizable-table {
    table-layout: fixed !important;
    min-width: 0 !important;
    max-width: none !important;
}

body:not(.lockscreen) table.ui-resizable-table > tbody > tr > td {
    white-space: normal;
    overflow-wrap: anywhere;
}

body:not(.lockscreen) table.ui-resizable-table .ui-resizable-column {
    position: relative;
    padding-inline-end: 28px;
    overflow-wrap: anywhere;
}

.ui-column-resizer {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: 10px;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
    z-index: 2;
}

.ui-column-resizer::after {
    content: '';
    position: absolute;
    inset-block: 25%;
    inset-inline-end: 2px;
    width: 2px;
    border-radius: 2px;
    background: var(--ui-color-border-strong, #b8c4d4);
}

.ui-column-resizer:hover::after,
.ui-column-resizer:focus::after {
    background: var(--theme-800, #0040c1);
}

.ui-column-resizer:focus-visible {
    outline: 2px solid var(--theme-800, #0040c1);
    outline-offset: -2px;
}

.ui-column-dragging,
.ui-column-dragging * {
    cursor: col-resize !important;
    user-select: none !important;
}

body:not(.lockscreen) .ui-table-width-reset {
    border: 0;
    padding: 4px 8px;
    background: transparent;
    color: var(--theme-800, #0040c1);
    font-size: var(--ui-font-size-xs);
    text-decoration: underline;
    text-underline-offset: 3px;
}

body:not(.lockscreen) .ui-table-width-reset:disabled {
    color: var(--ui-color-muted);
    cursor: default;
    text-decoration: none;
}

@media print {
    .ui-column-resizer, .ui-table-width-reset { display: none !important; }
    body:not(.lockscreen) .ui-table-scroll { contain: none; overflow: visible !important; }
    body:not(.lockscreen) table.ui-resizable-table { table-layout: auto !important; width: 100% !important; }
    .ui-column-widths col { width: auto !important; }
}

body:not(.lockscreen) .table-responsive,
body:not(.lockscreen) .dataTables_scrollBody {
    border: 0;
    border-radius: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-color: #98a2b3 #eef2f6;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

body:not(.lockscreen) table.table {
    margin-bottom: 0;
    color: var(--ui-color-text);
}

body:not(.lockscreen) table.table > thead > tr > th {
    padding: 11px 12px;
    border-bottom: 1px solid var(--ui-color-border-strong);
    background: var(--ui-color-table-header);
    color: #344054;
    font-size: var(--ui-font-size-xs);
    font-weight: 650;
    line-height: 1.35;
    vertical-align: middle;
}

body:not(.lockscreen) table.table > tbody > tr > td,
body:not(.lockscreen) table.table > tfoot > tr > td {
    padding: 11px 12px;
    border-top-color: var(--ui-color-border);
    vertical-align: middle;
}

/* Legacy detail tables put their headings in either thead or tbody.
   Theme only heading rows, leaving green status indicators semantic. */
@media screen {
    body table.table > :is(thead, tbody, tfoot) > tr.bg-green:has(> th),
    body table.table > :is(thead, tbody, tfoot) > tr.bg-green > th {
        background: var(--theme-800, #0040c1) !important;
        color: #fff !important;
        border-color: var(--theme-900, #00359e);
    }
}

/* Line editors can have units, stock hints, or validation below an input.
   Anchor every field to the top instead of centering shorter cells beside it. */
body:not(.lockscreen) :is(#stock_adjustment_product_table, #purchase_entry_table) > tbody > tr > td {
    vertical-align: top;
}

/* Plain totals and row actions sit on the first control's center line. */
body:not(.lockscreen) :is(#stock_adjustment_product_table, #purchase_entry_table) > tbody > tr > td > :is(.sr_number, .row_subtotal_before_tax, .row_subtotal_after_tax, .remove_product_row, .remove_purchase_entry_row) {
    display: inline-flex;
    align-items: center;
    min-height: var(--ui-control-height);
}

/* Give the tax name the whole control width; its calculated amount belongs
   below it, rather than squeezing the selected name down to a single letter. */
body:not(.lockscreen) #purchase_entry_table .purchase-line-tax {
    display: grid;
    gap: var(--ui-space-2);
    min-width: 156px;
    text-align: start;
}

body:not(.lockscreen) #purchase_entry_table .purchase-line-tax > select {
    width: 100%;
    min-width: 156px;
    padding-inline-end: 28px;
}

body:not(.lockscreen) #purchase_entry_table .purchase-line-tax__amount {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    color: var(--ui-color-muted);
    font-size: var(--ui-font-size-xs);
    line-height: 1.4;
}

body:not(.lockscreen) #purchase_entry_table .purchase-line-tax__amount .purchase_product_unit_tax_text {
    color: var(--ui-color-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Keep dense table totals readable without making the footer taller than the
   data it summarizes. Wide totals use the table's horizontal scroll instead
   of squeezing labels and currency values into narrow, wrapped columns. */
body:not(.lockscreen) table.table > tfoot > tr.footer-total > td {
    padding: 9px 12px;
    font-size: var(--ui-font-size-sm) !important;
    line-height: 1.35;
    white-space: nowrap;
}

body:not(.lockscreen) table.table > tfoot > tr.footer-total > td:first-child[colspan] {
    min-width: 96px;
    text-align: right !important;
}

body:not(.lockscreen) table.table > tfoot > tr.footer-total > td:has(.dt-footer-breakdown),
body:not(.lockscreen) table.table > tfoot > tr.footer-total > td[class$="_count"] {
    min-width: 144px;
    text-align: left;
}

body:not(.lockscreen) table.table > tfoot > tr.footer-total > td[class*="footer_total"],
body:not(.lockscreen) table.table > tfoot > tr.footer-total > td[class*="_total"] {
    min-width: 120px;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
}

body:not(.lockscreen) .dt-footer-breakdown {
    display: flex;
    width: max-content;
    min-width: 100%;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    color: #475467;
    font-size: var(--ui-font-size-xs);
    line-height: 1.35;
}

body:not(.lockscreen) .dt-footer-breakdown__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ui-space-3);
    white-space: nowrap;
}

body:not(.lockscreen) .dt-footer-breakdown__label {
    color: #475467;
}

body:not(.lockscreen) .dt-footer-breakdown__count {
    min-width: 2ch;
    color: var(--ui-color-text);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    text-align: right;
}

body:not(.lockscreen) table.table > tbody > tr:hover > td {
    background: #f9fafb;
}

body:not(.lockscreen) .dataTables_wrapper > .dt-toolbar {
    display: grid;
    grid-template-areas: "title search buttons actions";
    grid-template-columns: minmax(160px, 1fr) minmax(220px, 280px) max-content max-content;
    align-items: center;
    gap: var(--ui-space-3);
    margin-right: 0;
    margin-left: 0;
    margin-bottom: var(--ui-space-4);
}

body:not(.lockscreen) .dataTables_wrapper .dt-toolbar-title {
    grid-area: title;
    min-width: 0;
}

/* Short status choices should not stretch across an entire grid column. */
body:not(.lockscreen) .ui-compact-filter {
    width: 180px;
    max-width: 100%;
}

body:not(.lockscreen) .ui-compact-filter > :is(select, .select2-container) {
    width: 100% !important;
}

body:not(.lockscreen) .dt-toolbar-title .ui-compact-filter {
    margin-bottom: 0;
}

body:not(.lockscreen) .dataTables_wrapper .dt-toolbar-title .box-title,
body:not(.lockscreen) .dataTables_wrapper .dt-toolbar-title .panel-title {
    display: block;
    margin: 0;
    color: var(--ui-color-text);
    font-size: var(--ui-font-size-md);
    font-weight: 650;
    line-height: 1.4;
}

body:not(.lockscreen) .dataTables_wrapper .dt-toolbar-buttons {
    grid-area: buttons;
    min-width: 0;
}

body:not(.lockscreen) .dataTables_wrapper .dt-toolbar-search {
    grid-area: search;
    width: 100%;
    max-width: 280px;
    justify-self: start;
}

body:not(.lockscreen) .dataTables_wrapper > .row.margin-bottom-20 > .dt-toolbar-actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ui-space-2);
    width: auto;
    padding: 0;
}

body:not(.lockscreen) .dataTables_wrapper .dt-toolbar-actions > .pull-right {
    float: none !important;
}

body:not(.lockscreen) .dataTables_wrapper .dt-toolbar-actions :where(.btn, .tw-dw-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-2);
    min-height: var(--ui-button-height);
    padding: 7px 12px;
    border-radius: var(--ui-radius-md) !important;
    font-size: var(--ui-font-size-sm);
    line-height: 1.2;
}

body:not(.lockscreen) .dataTables_wrapper .dt-toolbar-actions :where(svg) {
    width: 18px;
    height: 18px;
}

body:not(.lockscreen) .dataTables_wrapper .dt-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--ui-space-2);
}

body:not(.lockscreen) .dataTables_wrapper .dt-buttons :where(.btn, .tw-dw-btn) {
    min-height: var(--ui-button-height);
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body:not(.lockscreen) .dataTables_wrapper .dt-export-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-2);
    min-height: var(--ui-button-height);
    padding: 7px 12px;
    border-color: var(--theme-800, #0040c1) !important;
    border-radius: var(--ui-radius-md) !important;
    background-color: var(--theme-800, #0040c1) !important;
    background-image: none !important;
    color: #fff !important;
    font-weight: 600;
    white-space: nowrap;
}

body:not(.lockscreen) .dataTables_wrapper .dt-export-menu-trigger .fa-caret-down {
    margin-left: var(--ui-space-1);
    color: currentColor;
    opacity: 0.8;
}

/* Dense dashboard cards use a quiet, compact secondary export action. */
body:not(.lockscreen) [data-compact-export-label] .dataTables_wrapper .dt-export-menu-trigger {
    height: var(--ui-button-height-sm);
    min-height: var(--ui-button-height-sm);
    max-height: var(--ui-button-height-sm);
    padding: 5px 9px;
    border-color: var(--ui-color-border-strong) !important;
    background-color: var(--ui-color-surface) !important;
    color: #475467 !important;
    font-size: var(--ui-font-size-xs);
    box-shadow: none !important;
}

body:not(.lockscreen) [data-compact-export-label] .dataTables_wrapper .dt-export-menu-trigger .fa-caret-down {
    margin-left: 0;
}

body:not(.lockscreen) .datatable-filter-inline {
    display: flex;
    max-width: 340px;
    align-items: center;
    gap: var(--ui-space-2);
}

body:not(.lockscreen) .datatable-filter-inline label {
    flex: 0 0 auto;
    margin: 0;
    color: #475467;
    font-size: var(--ui-font-size-xs);
    font-weight: 650;
    white-space: nowrap;
}

body:not(.lockscreen) .datatable-filter-inline .form-control {
    width: 220px;
    min-width: 0;
    height: var(--ui-button-height);
}

body:not(.lockscreen) .dt-button-collection.dt-export-menu {
    z-index: 2002;
    display: flex !important;
    flex-direction: column;
    gap: var(--ui-space-1);
    width: min(280px, calc(100vw - 32px));
    min-width: 240px;
    margin: var(--ui-space-1) 0 0 !important;
    padding: var(--ui-space-2) !important;
    border: 1px solid var(--ui-color-border) !important;
    border-radius: var(--ui-radius-md) !important;
    background: var(--ui-color-surface) !important;
    box-shadow: var(--ui-shadow-popover) !important;
    column-count: 1 !important;
}

body:not(.lockscreen) .dt-button-collection.dt-export-menu > li {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

body:not(.lockscreen) .dt-button-collection.dt-export-menu :where(a.dt-button, button.dt-button, li > a, li > button) {
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    gap: var(--ui-space-2);
    width: 100% !important;
    min-height: var(--ui-button-height);
    margin: 0 !important;
    padding: var(--ui-space-2) var(--ui-space-3) !important;
    border: 0 !important;
    border-radius: var(--ui-radius-sm) !important;
    background: transparent !important;
    color: #344054 !important;
    font-size: var(--ui-font-size-sm) !important;
    font-weight: 600;
    text-align: left;
    text-shadow: none !important;
    box-shadow: none !important;
    cursor: pointer;
}

body:not(.lockscreen) .dt-button-collection.dt-export-menu :where(.fa, .fas, .far) {
    width: 16px;
    flex: 0 0 16px;
    text-align: center;
}

body:not(.lockscreen) .dt-button-collection.dt-export-menu :where(a.dt-button, button.dt-button, li > a, li > button):hover,
body:not(.lockscreen) .dt-button-collection.dt-export-menu :where(a.dt-button, button.dt-button, li > a, li > button):focus-visible,
body:not(.lockscreen) .dt-button-collection.dt-export-menu .buttons-columnVisibility.active {
    background: var(--ui-color-surface-subtle) !important;
    color: var(--theme-800, #0040c1) !important;
    outline: 0;
}

body:not(.lockscreen) .dataTables_wrapper .dataTables_filter label,
body:not(.lockscreen) .dataTables_wrapper .dataTables_length label {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    margin-bottom: 0;
    color: var(--ui-color-muted);
    font-weight: 500;
}

body:not(.lockscreen) .dataTables_wrapper .dataTables_length label {
    white-space: nowrap;
}

body:not(.lockscreen) .dataTables_wrapper .dataTables_filter,
body:not(.lockscreen) .dataTables_wrapper .dataTables_filter label,
body:not(.lockscreen) .dataTables_wrapper .dataTables_filter input {
    width: 100%;
}

body:not(.lockscreen) .dataTables_wrapper .dataTables_filter input,
body:not(.lockscreen) .dataTables_wrapper .dataTables_length select {
    height: 36px;
    border: 1px solid var(--ui-color-border-strong);
    border-radius: var(--ui-radius-md);
    background: var(--ui-color-surface);
}

body:not(.lockscreen) .dataTables_wrapper .dataTables_filter input {
    min-height: 42px;
    border-color: #98a2b3;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

body:not(.lockscreen) .dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--theme-700, #004eeb);
    outline: 0;
    box-shadow: var(--ui-focus-ring);
}

body:not(.lockscreen) .dataTables_wrapper > .dt-footer {
    display: grid;
    grid-template-areas: "length info pagination";
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    align-items: center;
    gap: var(--ui-space-4);
    margin: 0;
    padding: var(--ui-space-3) var(--ui-space-4);
    border-top: 1px solid var(--ui-color-border);
}

/* Bootstrap's clearfix pseudo-elements become empty grid rows. */
body:not(.lockscreen) .dataTables_wrapper > .dt-footer::before,
body:not(.lockscreen) .dataTables_wrapper > .dt-footer::after {
    display: none;
}

/* The table controls provide the bottom inset when they end a card. Keep
   normal card padding when other content follows the table. */
body:not(.lockscreen) .ui-card__body:has(> .dataTables_wrapper:last-child),
body:not(.lockscreen) .ui-card__body:has(> :last-child > .dataTables_wrapper:last-child) {
    padding-bottom: 0;
}

body:not(.lockscreen) .dataTables_wrapper .dt-footer-length {
    grid-area: length;
}

body:not(.lockscreen) .dataTables_wrapper .dt-footer-info {
    grid-area: info;
    min-width: 0;
    text-align: center;
}

body:not(.lockscreen) .dataTables_wrapper .dt-footer-pagination {
    grid-area: pagination;
    justify-self: end;
}

body:not(.lockscreen) .dataTables_wrapper .dataTables_info,
body:not(.lockscreen) .dataTables_wrapper .dataTables_paginate {
    float: none;
    padding-top: 0;
    color: var(--ui-color-muted);
}

body:not(.lockscreen) .dataTables_wrapper .dataTables_paginate .pagination {
    margin: 0;
}

.ui-back-to-top {
    position: fixed;
    inset-inline-end: var(--ui-content-gutter);
    bottom: max(var(--ui-space-1), env(safe-area-inset-bottom));
    z-index: 900;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--ui-color-border-strong);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-color-surface);
    color: var(--theme-700, #004eeb);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
    cursor: pointer;
    transition: transform 140ms var(--ui-ease-out);
}

.ui-back-to-top[hidden] {
    display: none !important;
}

.ui-back-to-top svg {
    width: 20px;
    height: 20px;
}

.ui-back-to-top:focus-visible {
    outline: 2px solid var(--theme-700, #004eeb);
    outline-offset: 3px;
}

.ui-back-to-top:active {
    transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
    .ui-back-to-top:hover {
        background: var(--ui-color-surface-subtle);
        border-color: var(--theme-700, #004eeb);
        transform: translateY(-1px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-back-to-top,
    .ui-back-to-top:hover,
    .ui-back-to-top:active {
        transition: none;
        transform: none;
    }
}

/* Reserve room for the floating control without moving the copyright off
   center or covering it when it wraps on small screens. */
body:not(.lockscreen) .app-footer > div {
    padding-inline: 72px;
    padding-bottom: env(safe-area-inset-bottom);
}

body:not(.lockscreen) .dataTables_wrapper .dt-toolbar-buttons:empty,
body:not(.lockscreen) .dataTables_wrapper .dt-toolbar-title:empty,
body:not(.lockscreen) .dataTables_wrapper .dt-toolbar-actions:empty {
    display: none;
}

body:not(.lockscreen) :where(.box-tools, .datatable-page-actions, .datatable-page-filters).is-mounted {
    display: none !important;
}

body:not(.lockscreen) :where(.box-header, .panel-heading).is-table-toolbar-mounted {
    display: none !important;
}

body:not(.lockscreen) .ui-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-2);
    margin-bottom: var(--ui-space-4);
}

body:not(.lockscreen) :where(.dataTables_empty, .ui-empty-state) {
    padding: var(--ui-space-8) var(--ui-space-4) !important;
    color: var(--ui-color-muted);
    font-size: var(--ui-font-size-sm);
    text-align: center;
}

@media (max-width: 1099px) {
    body:not(.lockscreen) .dataTables_wrapper > .dt-toolbar {
        grid-template-areas:
            "title title title"
            "search buttons actions";
        grid-template-columns: minmax(180px, 1fr) max-content max-content;
    }

    body:not(.lockscreen) .dataTables_wrapper > .row.margin-bottom-20 > .dt-toolbar-actions {
        justify-content: flex-end;
    }

    body:not(.lockscreen) .dataTables_wrapper .dt-toolbar-search {
        max-width: none;
    }

    body:not(.lockscreen) .dataTables_wrapper > .dt-footer {
        grid-template-areas:
            "length pagination"
            "info info";
        grid-template-columns: max-content minmax(0, 1fr);
    }
}

/* Alerts and toasts */
body:not(.lockscreen) .alert {
    border-width: 1px;
    border-radius: var(--ui-radius-md);
    box-shadow: none;
}

#toast-container {
    top: 16px;
    right: 16px;
    bottom: auto;
    width: min(380px, calc(100vw - 32px));
}

#toast-container > div,
#toast-container.toast-top-right > div {
    width: 100%;
    margin-bottom: 10px;
    border-radius: var(--ui-radius-md);
    box-shadow: var(--ui-shadow-popover);
    opacity: 1;
}

#toast-container .toast-message a.btn {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    margin-top: 10px;
    border-radius: var(--ui-radius-sm);
}

/* Frequent navigation should react immediately, without long movement. */
.main-header,
.module-toolbar {
    transition-property: background-color, border-color, box-shadow !important;
    transition-duration: 180ms !important;
    transition-timing-function: ease !important;
}

.main-header .tw-transition-all {
    transition-property: color, background-color, border-color, box-shadow, transform !important;
    transition-duration: 160ms !important;
    transition-timing-function: ease !important;
}

.main-header :where(button, a):active {
    transform: scale(0.97);
}

.app-content .hover\:tw--translate-y-0\.5:hover {
    transform: none !important;
}

/* Minimum practical pointer target for compact dismiss controls. */
.pos-filter-chip-clear,
[data-dismiss-expiry-banner] {
    min-width: 32px;
    min-height: 32px;
}

.pos-filter-chip-clear {
    margin: -9px -9px -9px 0;
    transition: color 140ms ease, background-color 140ms ease, transform 120ms var(--ui-ease-out) !important;
}

.pos-filter-chip-clear:active {
    transform: scale(0.96);
}

@media (hover: hover) and (pointer: fine) {
    body:not(.lockscreen) table.table > tbody > tr {
        transition: background-color 120ms ease;
    }
}

@media (max-width: 767px) {
    :root {
        --ui-content-gutter: var(--ui-space-3);
    }

    body:not(.lockscreen) .content-header {
        padding-top: var(--ui-space-4);
        padding-bottom: var(--ui-space-2);
    }

    body:not(.lockscreen) .content-header h1 {
        font-size: var(--ui-font-size-lg);
    }

    body:not(.lockscreen) .box-header,
    body:not(.lockscreen) .panel-heading,
    body:not(.lockscreen) .box-body:not(.no-padding):not(.p-0):not(.pb-0):not([class*="tw-p-"]):not([class*="padding-"]),
    body:not(.lockscreen) .panel-body:not(.no-padding):not(.p-0):not([class*="tw-p-"]):not([class*="padding-"]) {
        padding: var(--ui-space-4);
    }

    body:not(.lockscreen) .modal-header,
    body:not(.lockscreen) .modal-body,
    body:not(.lockscreen) .modal-footer {
        padding: var(--ui-space-4);
    }

    body:not(.lockscreen) .ui-card__header,
    body:not(.lockscreen) .ui-card__body,
    body:not(.lockscreen) .ui-card__footer {
        padding: var(--ui-space-4);
    }

    body:not(.lockscreen) :where(.content .box, .ui-card) > .box-header:has(> .box-tools) {
        align-items: stretch;
        flex-direction: column;
    }

    body:not(.lockscreen) :where(.content .box, .ui-card) > .box-header > .box-title {
        flex: 0 1 auto;
    }

    body:not(.lockscreen) :where(.content .box, .ui-card) > .box-header > .box-tools {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }

    body:not(.lockscreen) .ui-form,
    body:not(.lockscreen) .content form {
        max-width: 100%;
    }

    body:not(.lockscreen) .ui-form-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    body:not(.lockscreen) .ui-form-grid > * {
        grid-column: 1;
        grid-row: 1;
    }

    body:not(.lockscreen) .nav-tabs {
        max-width: 100%;
        padding-bottom: 1px;
        overflow-x: auto;
    }

    body:not(.lockscreen) .nav-tabs > li {
        flex: 0 0 auto;
    }

    body:not(.lockscreen) .content .row > [class*="col-xs-"] .form-group {
        min-width: 0;
    }

    body:not(.lockscreen) .table-responsive > table.table.dataTable,
    body:not(.lockscreen) .dataTables_scrollBody > table {
        min-width: 720px;
    }

    /* Pages with three or more toolbar controls (Products has Export/Download,
       Download Excel and Add) could not fit them across one "buttons actions"
       row: the two areas were sized independently, so the wider one ran under
       its neighbour. Each area gets its own full-width row and wraps within
       itself instead. */
    body:not(.lockscreen) .dataTables_wrapper > .dt-toolbar {
        grid-template-areas:
            "title"
            "search"
            "buttons"
            "actions";
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        row-gap: var(--ui-space-2);
    }

    /* Buttons share the row evenly and wrap onto a new line rather than
       overlapping when they cannot all fit. */
    body:not(.lockscreen) .dataTables_wrapper .dt-toolbar-buttons,
    body:not(.lockscreen) .dataTables_wrapper > .row.margin-bottom-20 > .dt-toolbar-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: var(--ui-space-2);
    }

    body:not(.lockscreen) .dataTables_wrapper .dt-toolbar-buttons .dt-buttons,
    body:not(.lockscreen) .dataTables_wrapper .dt-toolbar-actions > .pull-right {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ui-space-2);
    }

    /* Let each control size to its label but still share space when several
       sit on one line, so none of them is squeezed to an unreadable width. */
    body:not(.lockscreen) .dataTables_wrapper .dt-toolbar-buttons :where(.btn, .tw-dw-btn),
    body:not(.lockscreen) .dataTables_wrapper .dt-toolbar-actions :where(.btn, .tw-dw-btn) {
        flex: 1 1 auto;
        min-width: max-content;
    }

    body:not(.lockscreen) .dataTables_wrapper > .dt-toolbar > * {
        width: 100%;
        max-width: none;
        padding-right: 0;
        padding-left: 0;
    }

    body:not(.lockscreen) .dataTables_wrapper .dataTables_filter,
    body:not(.lockscreen) .dataTables_wrapper .dataTables_length {
        width: 100%;
        text-align: left;
    }

    body:not(.lockscreen) .dataTables_wrapper .dataTables_filter label {
        align-items: stretch;
        flex-direction: column;
        gap: 5px;
    }

    body:not(.lockscreen) .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        margin-left: 0;
    }

    body:not(.lockscreen) .dataTables_wrapper .dt-buttons {
        flex-wrap: wrap;
        max-width: 100%;
        padding-bottom: 0;
        overflow: visible;
    }

    body:not(.lockscreen) .dataTables_wrapper .dt-buttons :where(.btn, .tw-dw-btn) {
        flex: 0 0 auto;
        min-height: var(--ui-button-height);
    }

    /* Now that actions own a full-width row of their own (see the toolbar
       grid above), they align to the start like every other toolbar row
       instead of hugging the right edge. */
    body:not(.lockscreen) .dataTables_wrapper > .row.margin-bottom-20 > .dt-toolbar-actions {
        width: 100%;
        justify-self: stretch;
        justify-content: flex-start;
    }

    body:not(.lockscreen) .dataTables_wrapper > .dt-footer {
        grid-template-areas:
            "length"
            "info"
            "pagination";
        grid-template-columns: minmax(0, 1fr);
        gap: var(--ui-space-3);
    }

    body:not(.lockscreen) .dataTables_wrapper .dt-footer-pagination {
        justify-self: start;
        max-width: 100%;
        overflow-x: auto;
    }

    body:not(.lockscreen) .dataTables_wrapper .dataTables_info,
    body:not(.lockscreen) .dataTables_wrapper .dataTables_paginate {
        width: 100%;
        text-align: left;
    }

    body:not(.lockscreen) .dataTables_wrapper .dt-footer-info {
        text-align: left;
    }

    /* Every settings control gets a usable row on phones, irrespective of
       legacy col-xs-4/6 declarations inside individual tab partials. */
    .superadmin-settings-page .pos-tab-content > .row > [class*="col-xs-"] {
        float: none;
        width: 100%;
    }

    #toast-container {
        top: 8px;
        right: 8px;
        width: calc(100vw - 16px);
    }

    #subscription-expiry-banner {
        margin-right: 12px;
        margin-left: 12px;
    }

    .dashboard-metrics > div > :first-child {
        padding: 12px;
    }

    .dashboard-metrics > div {
        transform: none !important;
        transition-property: box-shadow !important;
    }

    .dashboard-metrics > div > :first-child > .tw-flex {
        gap: 8px;
    }

    .dashboard-metrics .tw-w-10.tw-h-10,
    .dashboard-metrics .sm\:tw-w-12.sm\:tw-h-12 {
        width: 32px;
        height: 32px;
    }

    .dashboard-metrics .tw-w-6.tw-h-6 {
        width: 18px;
        height: 18px;
    }

    .dashboard-metrics .tw-text-xl {
        font-size: var(--ui-font-size-md);
        line-height: 1.35;
    }

    .dashboard-metrics .tw-text-sm {
        font-size: var(--ui-font-size-xs);
        line-height: 1.35;
    }

    /* ---------------------------------------------------------------------
       Touch ergonomics (mobile QA, phase 1)
       ---------------------------------------------------------------------
       Phones only; desktop density is untouched. The POS layout carries the
       `lockscreen` body class and is excluded from every rule here on
       purpose -- it has its own control sizing in app.css.
       --------------------------------------------------------------------- */

    /* iOS Safari force-zooms the viewport when a focused field renders below
       16px, so entering anything left the user pinching back out. Raising the
       token keeps the visual height the same (padding absorbs it) while
       clearing the zoom threshold. */
    body:not(.lockscreen) :where(.content, .modal) .form-control,
    body:not(.lockscreen) :where(.content, .modal) input.form-control,
    body:not(.lockscreen) :where(.content, .modal) select.form-control,
    body:not(.lockscreen) :where(.content, .modal) textarea.form-control,
    body:not(.lockscreen) .form-control.input-sm,
    body:not(.lockscreen) .dataTables_wrapper .dt-toolbar input,
    body:not(.lockscreen) .dataTables_wrapper .dt-toolbar select,
    body:not(.lockscreen) .select2-container .select2-search__field,
    body:not(.lockscreen) .select2-container .select2-selection--single,
    body:not(.lockscreen) .select2-container .select2-selection--multiple {
        font-size: var(--ui-font-size-md);
    }

    body:not(.lockscreen) :where(.content, .modal) input.form-control,
    body:not(.lockscreen) :where(.content, .modal) select.form-control {
        padding-top: 7px;
        padding-bottom: 7px;
    }

    /* Select2 renders its own control next to a hidden native select; the
       visible box sat at 34px regardless of the token above.

       Only the outer box takes the control height. Giving the same height to
       the __rendered span pushed the label below centre -- the span became as
       tall as the box while sitting inside the box's own 7px top padding --
       and stretching the arrow to full height dropped it low too. The label is
       centred with flex instead, so it stays put whatever the box height. */
    body:not(.lockscreen) .select2-container .select2-selection--single {
        height: var(--ui-control-height);
        display: flex;
        align-items: center;
    }

    body:not(.lockscreen) .select2-container .select2-selection--single .select2-selection__rendered {
        height: auto;
        min-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.35;
    }

    body:not(.lockscreen) .select2-container .select2-selection--single .select2-selection__arrow {
        top: 50%;
        height: 24px;
        margin-top: -12px;
    }

    body:not(.lockscreen) .select2-container .select2-selection--single .select2-selection__rendered {
        display: flex;
        align-items: center;
    }

    /* File pickers rendered 26-27px tall. */
    body:not(.lockscreen) .content input[type="file"] {
        min-height: 44px;
        padding: var(--ui-space-2);
    }

    /* Dashboard widget filters use .input-sm outside .content, so they kept
       Bootstrap's 12px / 30px sizing. */
    body:not(.lockscreen) select.form-control.input-sm,
    body:not(.lockscreen) input.form-control.input-sm {
        height: var(--ui-control-height);
        min-height: var(--ui-control-height);
    }

    /* Header controls render as one uniform 44px square.

       They were a mix of 44, 32 and 36px tall and 44, 48 and 51px wide: the
       icon buttons, the <summary> dropdown triggers (quick actions, avatar)
       and the text POS link each carried their own padding.

       Only controls that are actually inline at this width are listed. A
       blanket :where(a, button, summary) also matched the desktop-only
       controls that Tailwind hides here (collapse-sidebar, calculator, date,
       today's profit) and gave them a size, which forced them visible and
       pushed the header to 181px over several rows. */
    body:not(.lockscreen) .theme-header-bg .small-view-button,
    body:not(.lockscreen) .theme-header-bg a#show_unread_notifications,
    body:not(.lockscreen) .theme-header-bg button#etims-header-test-connection,
    body:not(.lockscreen) .theme-header-bg button.clock_in_btn,
    body:not(.lockscreen) .theme-header-bg summary[aria-label="Quick actions"],
    body:not(.lockscreen) .theme-header-bg summary[aria-label="Account menu"],
    body:not(.lockscreen) .theme-header-bg a[href*="pos/create"] {
        display: inline-flex;
        box-sizing: border-box;
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
    }

    /* Icon-only triggers stay square; the POS link keeps room for its label. */
    body:not(.lockscreen) .theme-header-bg summary[aria-label="Quick actions"],
    body:not(.lockscreen) .theme-header-bg summary[aria-label="Account menu"] {
        width: 44px;
        padding-left: 0;
        padding-right: 0;
    }

    /* Sidebar rows were a uniform 32px. 38px keeps them comfortably tappable
       without the 44px isolated-target floor: these are full-width rows in a
       vertical list, so the horizontal span does the work and there is no
       adjacent target to mis-hit. At 44px a twelve-item menu grew by ~144px
       and pushed the lower modules off screen. */
    body:not(.lockscreen) .side-bar a,
    body:not(.lockscreen) .side-bar .treeview > a,
    body:not(.lockscreen) .side-bar .treeview-menu > li > a {
        min-height: 38px;
        display: flex;
        align-items: center;
    }

    /* Bootstrap sets .label to font-size:75%, which resolves to 10.5px against
       a 14px parent. These pills carry payment and eTIMS state, so they need to
       survive a glance. */
    body:not(.lockscreen) .content .label,
    body:not(.lockscreen) .content span.label,
    body:not(.lockscreen) .content .badge,
    body:not(.lockscreen) table.table .label,
    body:not(.lockscreen) table.table small,
    body:not(.lockscreen) .kra-kpi-label,
    body:not(.lockscreen) .kra-kpi-note,
    body:not(.lockscreen) .kra-badge,
    body:not(.lockscreen) .kra-table-secondary,
    body:not(.lockscreen) .kra-table-code,
    body:not(.lockscreen) .kra-submissions-table th {
        font-size: var(--ui-font-size-xs);
    }

    /* Bulk-action checkboxes gate delete and deactivate but rendered 13px.
       Padding does not grow a checkbox's hit area, so the box itself is
       enlarged and the surrounding cell supplies the rest of the target. */
    body:not(.lockscreen) table.table input[type="checkbox"],
    body:not(.lockscreen) table.table input[type="radio"] {
        width: 22px;
        height: 22px;
        margin: 0;
    }

    body:not(.lockscreen) table.table td:has(> input[type="checkbox"]),
    body:not(.lockscreen) table.table th:has(> input[type="checkbox"]) {
        padding: var(--ui-space-3);
    }

    /* Invoice-number links open the transaction modal and are the main way
       into a record from the report tables; they rendered 32x19. */
    body:not(.lockscreen) table.table a.btn-modal {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: var(--ui-space-2) var(--ui-space-1);
    }

    /* Select2 panels opened at ~206px on a 375px screen, truncating option
       labels exactly where they carry meaning (branch names, customers). */
    body:not(.lockscreen) .select2-container .select2-dropdown {
        min-width: min(calc(100vw - 2 * var(--ui-space-4)), 420px);
    }

    body:not(.lockscreen) .select2-container .select2-results__option {
        min-height: 44px;
        padding-top: var(--ui-space-3);
        padding-bottom: var(--ui-space-3);
        line-height: 1.35;
    }

    /* The filter accordion toggle is a bare anchor inside .box-title, so it
       had no padding of its own and collapsed to a 17px tap height -- on a
       control that gates the filters on every list and report page. */
    body:not(.lockscreen) .box-header > .box-title > a[data-toggle="collapse"] {
        display: flex;
        align-items: center;
        gap: var(--ui-space-2);
        min-height: 44px;
    }

    /* Row-level table actions ("Actions", "Product stock history") render at
       .tw-dw-btn-xs -- 28px. These are the primary way into a record on a
       phone, so they get the full target height. */
    body:not(.lockscreen) table.table .tw-dw-btn.tw-dw-btn-xs,
    body:not(.lockscreen) table.table .btn-xs,
    body:not(.lockscreen) .dataTables_wrapper .tw-dw-btn.tw-dw-btn-xs {
        min-height: 44px;
        padding-top: var(--ui-space-2);
        padding-bottom: var(--ui-space-2);
    }

    /* Bulk-action submits above the products table. */
    body:not(.lockscreen) .content input[type="submit"].tw-dw-btn,
    body:not(.lockscreen) .content button.tw-dw-btn.tw-dw-btn-xs {
        min-height: 44px;
    }

    /* Payment-status pills double as the "view payment" trigger. */
    body:not(.lockscreen) table.table a.payment-status-label {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        padding: var(--ui-space-1) var(--ui-space-2);
    }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.lockscreen) *,
    body:not(.lockscreen) *::before,
    body:not(.lockscreen) *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media print {
    body,
    body:not(.lockscreen) .content,
    body:not(.lockscreen) .app-content {
        background: #fff !important;
    }

    body:not(.lockscreen) .content :where(.box, .panel),
    body:not(.lockscreen) .ui-card {
        border-color: #d1d5db;
        box-shadow: none;
    }
}

/* =========================================================================
   POS touch ergonomics (mobile QA, phase 2)
   =========================================================================
   Every other rule in this file is scoped to body:not(.lockscreen), which
   deliberately excludes the POS layout -- `lockscreen` is the POS body class.
   The POS screen therefore misses the app-wide 16px/44px rules above, so the
   till gets its own block here.

   These live in ui-system.css rather than app.css because /public/css/* is
   gitignored except for this file (see .gitignore), so app.css edits would
   not be version-controlled or deployed.
   ========================================================================= */

/* Location picker sizes to the branch name, at every width.

   The select sits in .pos-location-picker, inside a column capped at
   md:tw-w-1/3. Together
   those truncated the name to "General St..." on tablet (49px of box for a
   240px option) and "General Store - Main B" on desktop (131px), while the
   row itself had hundreds of pixels to spare -- the header's left column
   ended at x=487 in a 1424px row.

   Letting the wrapper and column size to their content lets the picker grow
   to whatever branch name is selected, and the date/keyboard block beside it
   simply follows along. min-width:0 keeps it able to shrink again on a phone
   rather than forcing the row to overflow. */
body.lockscreen .pos-header .pos-location-picker {
    width: auto !important;
    /* The wrapper now carries the width, since the select inside is 100% and
       no longer self-sizes. 320px clears the longest realistic branch label
       ("General Store - Westlands Branch (BL0041)" needs ~241px of text plus
       padding); it shrinks on narrower rows via the basis below. */
    flex: 0 1 360px;
    /* Do not let the rest of the row squeeze the picker; it was being crushed
       to 44px. Kept modest here so it cannot collide with the toolbar on a
       tablet -- the wider floor is applied from 1024px up, below. */
    min-width: min(220px, 100%);
}

/* From laptop width up the row has room for the whole branch label
   (~241px of text plus padding and arrow) without crowding the toolbar. */
@media screen and (min-width: 1024px) {
    body.lockscreen .pos-header .pos-location-picker {
        min-width: 300px;
    }
}

/* Tablet is the one width with no slack: the toolbar (back, undo, pause,
   register, close, calculator, fullscreen, Add Expense) already fills the row
   on its own, so a picker wide enough to read collides with it. Wrapping the
   header onto two rows there gives the location its own line and lets the
   toolbar keep the next one, instead of the two overlapping. */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    body.lockscreen .pos-header > div {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    body.lockscreen .pos-header > div > div:first-child {
        flex: 1 1 100%;
    }

    body.lockscreen .pos-header .pos-location-picker {
        min-width: 300px;
    }
}

/* Select2 renders its option list in the DOM, keeping the menu anchored to
   this control when Chrome device emulation changes the visual viewport.
   The native select popup is browser chrome and could appear at the top of
   the window instead of below the field. */
body.lockscreen .pos-header .pos-location-picker .select2-container {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

body.lockscreen .pos-header .pos-location-picker .select2-selection--single {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 30px;
    height: 30px;
    padding: 5px 30px 5px 10px;
    background-color: #fff;
    border: 1px solid #d2d6de;
    border-radius: 0;
}

body.lockscreen .pos-header .pos-location-picker .select2-selection__rendered {
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 1.42857143;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.lockscreen .pos-header .pos-location-picker .select2-selection__arrow {
    top: 50%;
    right: 6px;
    height: 20px;
    margin-top: -10px;
}

/* Free the header's left column from its one-third cap so the picker can use
   the space the row already has. */
body.lockscreen .pos-header > div > div:first-child {
    /* !important beats Tailwind's md:tw-w-1/3, which capped this column at a
       third of the row (243px on tablet) and made the picker overflow into
       the toolbar rather than the column growing to hold it. */
    width: auto !important;
    max-width: 100%;
    flex: 0 1 auto;
}

/* The date + keyboard block keeps its size and sits next to the picker
   instead of being pushed out of the row. */
body.lockscreen .pos-header .tw-flex > div:has(> .curr_datetime) {
    flex: 0 0 auto;
}

/* "Location:" is a <p> that inherits a 40px line box while the select beside
   it is 30px tall. Both are centred in the row, but the taller box put the
   label's text visibly above the select's, which reads as the label sitting
   high. Matching line heights puts the two baselines on the same line. */
body.lockscreen .pos-header p {
    display: flex;
    align-items: center;
    margin: 0;
    line-height: 1;
    white-space: nowrap;
}

/* Every POS form control -- not just the two that happen to be enabled on
   this tenant. The screen has several optional fields (commission agent,
   type of service, invoice scheme, transaction date, exchange rate, price
   group) that are hidden behind settings; when a business turns one on it
   renders with the same .input-group / .form-control / select2 markup, so
   the rules are written against those patterns rather than against
   #search_product and #customer_id by id. */
body.lockscreen form .input-group,
body.lockscreen .pos-header .input-group {
    --pos-field-h: 40px;
    display: flex;
    width: 100%;
    align-items: stretch;
    gap: 0;
}

body.lockscreen form .input-group > * {
    align-self: stretch;
    margin: 0;
    height: var(--pos-field-h);
}

/* Fields take the leftover width and fill the row height. */
body.lockscreen form .input-group > .form-control,
body.lockscreen form .input-group > [class*="select2-container"],
body.lockscreen form .input-group > input,
body.lockscreen form .input-group > select {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    min-height: var(--pos-field-h);
    height: var(--pos-field-h);
}

/* The hidden native select select2 leaves behind is still a flex child;
   keep it out of the layout so it cannot claim a share of the row. */
body.lockscreen form .input-group > .select2-hidden-accessible {
    position: absolute;
    width: 1px !important;
    height: 1px;
    flex: 0 0 0;
}

/* select2 writes a pixel width onto its container inline when it initialises,
   which outranks the flex sizing above and left the customer picker short of
   its column while the product search filled its own. */
body.lockscreen form .input-group > .select2-container[style] {
    flex: 1 1 auto !important;
    width: auto !important;
}

body.lockscreen form .input-group .select2-selection--single {
    min-height: var(--pos-field-h);
    height: var(--pos-field-h);
}

/* Leading icons become equal squares matching the row height, so the
   user, magnifier, calendar, exchange and price-group addons all read as
   the same box. */
body.lockscreen form .input-group > .input-group-addon {
    display: inline-flex;
    flex: 0 0 auto;
    width: var(--pos-field-h);
    min-width: var(--pos-field-h);
    padding: 0;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

body.lockscreen form .input-group > .input-group-btn {
    display: inline-flex;
    flex: 0 0 auto;
    width: auto;
    align-items: stretch;
    white-space: nowrap;
}

body.lockscreen form .input-group .input-group-btn > .btn {
    display: inline-flex;
    width: var(--pos-field-h);
    min-width: var(--pos-field-h);
    /* !important beats Bootstrap's own .btn padding/line-height, which
       otherwise resolved these to 32px inside their 40px cell. */
    height: var(--pos-field-h) !important;
    min-height: var(--pos-field-h) !important;
    padding: 0 !important;
    line-height: 1 !important;
    align-items: center;
    justify-content: center;
}

/* Standalone selects and inputs (commission agent, and any optional field
   rendered without an .input-group wrapper) match the same height so a
   tenant that enables them does not get a row of mismatched controls. */
body.lockscreen form .form-group > .form-control,
body.lockscreen form .form-group > .select2-container .select2-selection--single {
    min-height: 40px;
    height: 40px;
}

/* Customer and product search share the row equally.
   They ship as col-md-4 + col-md-8, a 1:2 split, so the customer picker was
   cramped at 247px while the search field had 524px -- and the two met a
   third of the way across rather than at the centre. */
@media screen and (min-width: 992px) {
    body.lockscreen .row > .col-md-4:has(.add_new_customer),
    body.lockscreen .row > .col-md-8:has(#search_product) {
        width: 50%;
    }
}

@media screen and (max-width: 767px) {
    /* On a phone the row is the constraint, not the name: the picker takes
       the width left after the label and the basket/menu icons rather than
       holding a 240px floor that would push them off screen. */
    body.lockscreen .pos-header .pos-location-picker {
        flex: 1 1 auto;
        min-width: 0;
    }

    body.lockscreen .pos-header > div > div:first-child {
        width: 100% !important;
    }
}

/* The action bar was #f8fafc against a #f3f4f6 page -- about two per cent
   apart in luminance -- so the one piece of fixed chrome on the screen read as
   just another card, and at desktop widths it blended into the product grid
   above it. A cooler, darker slate surface plus a defined top edge separates
   the bar from the white cards and marks it as a control surface docked over
   the content rather than part of it. Applied at every width, since the same
   ambiguity shows up on desktop. */
body.lockscreen .pos-form-actions {
    background: #e7ebf0 !important;
    border-top: 1px solid #cbd5e1;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.10) !important;
}

/* The secondary row (Draft, Suspend, Credit Sale, Card) sits on the same
   surface; keep it transparent so the bar reads as one object. */
body.lockscreen .pos-footer-secondary {
    background: transparent;
}

/* Buttons that were white now need a touch more definition to hold their edge
   against the darker bar. */
body.lockscreen .pos-form-actions .pos-mpesa-checkout,
body.lockscreen .pos-form-actions .js-pos-cancel {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

@media screen and (max-width: 767px) {
    /* Payment buttons were 28px tall, which is too small for the highest
       consequence taps in the product. 40px is the working compromise: these
       buttons are 82-103px wide, so they are comfortably hittable without the
       44px isolated-target floor, which made the fixed bar eat too much of a
       small screen. */
    body.lockscreen .pos-form-actions .pos-footer-primary {
        /* Confirming actions first, then a fixed 10px spacer column, then
           Cancel (order rules below). The spacer is what separates the
           destructive action from the confirming ones while leaving Cancel
           flush with the bar's right padding. */
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) 10px minmax(0, .95fr) !important;
        /* center, not stretch: Cancel is the only item in its grid row track
           and stretch left it floating above the other buttons' baseline. */
        align-items: center;
    }

    body.lockscreen .pos-form-actions .pos-footer-primary > button {
        min-height: 40px !important;
    }

    /* Cancel discards a live sale and sat flush against "Multiple Pay", so a
       mis-tap lost the basket. It moves to the end of the row, separated from
       the confirming actions.

       The separation comes from a wider column gap before it rather than a
       margin on the button: a margin-left shifted Cancel inside its own grid
       column and pushed it to within 8px of the screen edge, while the row
       started at 8px on the left. Extra column-gap keeps the button aligned
       to the same right inset as the bar's own padding. */
    body.lockscreen .pos-form-actions .pos-footer-primary > .js-pos-cancel,
    body.lockscreen .pos-form-actions .pos-footer-primary > .js-pos-delete {
        /* Column 4 is the spacer, so Cancel is pinned to column 5. Explicit
           placement keeps auto-placement from filling the spacer. */
        grid-column: 5;
        grid-row: 1;
    }

    body.lockscreen .pos-form-actions .pos-footer-primary > .pos-finalize {
        grid-column: 1;
    }

    body.lockscreen .pos-form-actions .pos-footer-primary > .pos-mpesa-checkout {
        grid-column: 2;
        grid-row: 1;
        /* Image-only control: its tw-h-10 plus the min-height above resolved
           taller than the text buttons and broke the row's baseline. */
        height: 40px !important;
        min-height: 40px !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }

    body.lockscreen .pos-form-actions .pos-footer-primary > .pos-express-finalize:not(.pos-mpesa-checkout) {
        grid-column: 3;
        grid-row: 1;
    }

    /* Secondary row: Draft, Suspend, Credit Sale, Card. Icon-and-label pairs
       rather than filled buttons, so they match the primary row's 40px. */
    body.lockscreen .pos-footer-secondary > button,
    body.lockscreen .pos-footer-secondary button.tw-dw-btn,
    body.lockscreen .pos-footer-secondary a.tw-dw-btn {
        min-height: 40px;
    }

    /* The footer is now taller than the 54px of clearance set for it, which
       left the totals sitting behind the payment row. Safe-area-inset keeps
       the bar clear of the iOS home indicator. */
    body.lockscreen .pos_form_totals {
        margin-bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.lockscreen .pos-form-actions {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* The quantity field deliberately gets no min-height. Its +/- steppers are
       hidden below md (see product_row.blade.php), so on a phone it is a plain
       typed input inside a padded cell that already carries a label -- a
       height floor here only made an already-tall cart row taller. Keeping it
       at 16px still prevents the iOS zoom, which was the actual defect. */

    body.lockscreen #pos_table .pos_remove_row,
    body.lockscreen #pos_table .edit-product-price-modal,
    body.lockscreen #pos_table .row_edit_product_price_model {
        min-width: 40px;
        min-height: 40px;
    }

    /* Fields that made iOS zoom the till mid-sale. */
    body.lockscreen .pos-header .form-control,
    body.lockscreen #search_product,
    body.lockscreen #select_location_id,
    body.lockscreen #pos_table .form-control,
    body.lockscreen .select2-container .select2-search__field,
    body.lockscreen .select2-container .select2-selection--single {
        font-size: 16px !important;
    }

    body.lockscreen #search_product,
    body.lockscreen .pos-header .pos-location-picker .select2-selection--single {
        min-height: 40px;
    }

    body.lockscreen .pos-header .pos-location-picker .select2-selection--single {
        height: 40px;
    }

    /* --- POS header rows -------------------------------------------------
       Three separate problems on a phone, all from desktop-shaped markup:
       the location select's old 28%-wide wrapper was ~98px here and truncated
       branch names to "Genera..." while leaving half the row empty; and the
       customer and search rows are Bootstrap .input-group tables whose
       select2 and text input did not share a common edge. */

    /* The mobile basket button carries tw-w-10/h-10 but was being shrunk by
       the header's flex row; hold it at its intended 40px square. */
    body.lockscreen .pos-header button.btn-modal {
        flex: 0 0 auto;
        width: 40px;
        min-width: 40px;
        height: 40px;
    }
}

/* =========================================================================
   Recent Transactions modal (POS) -- mobile layout
   =========================================================================
   The modal renders a desktop table with Bootstrap col-md-* widths, so on a
   phone the invoice text was squeezed into a ~72px column, the three actions
   stacked vertically at 48px each, and the tab strip wrapped onto two lines.
   Each transaction becomes a stacked card instead: identity and amount on
   top, one equal row of actions beneath. Buttons match the 40px used
   elsewhere in the app.
   ========================================================================= */

@media screen and (max-width: 767px) {
    body.lockscreen #recent_transactions_modal .modal-dialog {
        margin: 8px auto;
        width: auto;
        max-width: none;
    }

    body.lockscreen #recent_transactions_modal .modal-body {
        padding: var(--ui-space-3);
    }

    /* Tabs on one line: no wrap, no oversized padding, scroll if they still
       cannot fit rather than stacking. */
    body.lockscreen #recent_transactions_modal .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    body.lockscreen #recent_transactions_modal .nav-tabs > li {
        flex: 1 1 auto;
        float: none;
        white-space: nowrap;
    }

    body.lockscreen #recent_transactions_modal .nav-tabs > li > a {
        display: flex;
        min-height: 40px;
        align-items: center;
        justify-content: center;
        padding: var(--ui-space-2) var(--ui-space-2);
        margin-right: 0;
        font-size: var(--ui-font-size-sm);
    }

    /* Table -> stacked cards. */
    body.lockscreen #recent_transactions_modal .tab-content table,
    body.lockscreen #recent_transactions_modal .tab-content tbody,
    body.lockscreen #recent_transactions_modal .tab-content tr,
    body.lockscreen #recent_transactions_modal .tab-content td {
        display: block;
        width: auto;
    }

    body.lockscreen #recent_transactions_modal .tab-content tr {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: baseline;
        gap: 2px var(--ui-space-2);
        padding: var(--ui-space-3) 0;
        border-bottom: 1px solid var(--ui-color-border);
    }

    body.lockscreen #recent_transactions_modal .tab-content tr:last-child {
        border-bottom: 0;
    }

    body.lockscreen #recent_transactions_modal .tab-content td {
        padding: 0;
        border: 0;
    }

    /* 1. index  2. invoice + customer  3. amount -- all on the first line. */
    body.lockscreen #recent_transactions_modal .tab-content td:nth-child(1) {
        grid-column: 1;
        color: var(--ui-color-muted);
    }

    body.lockscreen #recent_transactions_modal .tab-content td:nth-child(2) {
        grid-column: 2;
        min-width: 0;
        font-weight: 600;
        overflow-wrap: anywhere;
    }

    body.lockscreen #recent_transactions_modal .tab-content td:nth-child(3) {
        grid-column: 3;
        justify-self: end;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    /* Actions span the full width on their own line, sharing it equally. */
    body.lockscreen #recent_transactions_modal .tab-content td:nth-child(4) {
        display: flex;
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: nowrap;
        /* align-items, not the row's inherited baseline: the Edit link has no
           icon-plus-text baseline in common with Print/Delete and sat 4px
           high of them. */
        align-items: center;
        gap: var(--ui-space-2);
        margin-top: var(--ui-space-2);
    }

    body.lockscreen #recent_transactions_modal .tab-content td:nth-child(4) > .tw-dw-btn {
        display: inline-flex;
        flex: 1 1 0;
        min-width: 0;
        min-height: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        gap: var(--ui-space-1);
        padding: 0 var(--ui-space-2);
        font-size: var(--ui-font-size-xs);
    }

    body.lockscreen #recent_transactions_modal .modal-footer {
        padding: var(--ui-space-3);
    }

    body.lockscreen #recent_transactions_modal .modal-footer .tw-dw-btn {
        width: 100%;
        min-height: 40px;
    }

    body.lockscreen #recent_transactions_modal .tab-content p {
        padding: var(--ui-space-4) 0;
        color: var(--ui-color-muted);
        text-align: center;
    }
}

/* =========================================================================
   Mobile header overflow
   =========================================================================
   At 360px the header held six controls (menu, eTIMS test, clock-in, POS,
   notifications, avatar) plus a 24px gap, so the right-hand cluster wrapped
   to a second row and the bar took 125px -- 17% of the screen. The two
   occasional actions move into the avatar dropdown (see header.blade.php);
   only the frequently used controls stay inline.
   ========================================================================= */

@media screen and (max-width: 639px) {
    /* Occasional actions live in the avatar menu at this width. */
    body:not(.lockscreen) .theme-header-bg #etims-header-test-connection,
    body:not(.lockscreen) .theme-header-bg .clock_in_btn,
    body:not(.lockscreen) .theme-header-bg .clock_out_btn {
        display: none !important;
    }

    /* One row: the cluster no longer wraps, and the gap tightens so the
       remaining controls sit comfortably without shrinking below 44px. */
    body:not(.lockscreen) .theme-header-bg > div > div {
        flex-wrap: nowrap;
        gap: var(--ui-space-2);
        align-items: center;
    }

    body:not(.lockscreen) .theme-header-bg > div > div:last-child {
        margin-left: auto;
    }

    /* The POS link is text rather than an icon; keep it from being squeezed. */
    body:not(.lockscreen) .theme-header-bg a[href*="pos/create"] {
        flex: 0 0 auto;
        min-height: 44px;
        padding-right: var(--ui-space-3);
        padding-left: var(--ui-space-3);
    }
}

/* The proxied rows only exist for the narrow layout. */
@media screen and (min-width: 640px) {
    .header-overflow-item {
        display: none !important;
    }
}

/* Accounting pages with a Sales / Expenses / Purchases (or settings) switcher: tabs run across the top so the table gets the full width. */
.acct-tx .list-group-link { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px 0; border-bottom: 1px solid #e5e7eb; }
.acct-tx .list-group-link .list-group-item { flex: 0 0 auto; min-width: 130px; margin: 0 0 -1px; padding: 9px 18px; border: 1px solid transparent; border-radius: 8px 8px 0 0; background: transparent; color: #6b7280; font-weight: 600; }
.acct-tx .list-group-link .list-group-item:hover { background: #f3f4f6; color: #111827; }
.acct-tx .list-group-link .list-group-item.active { background: #fff; color: var(--theme-800, #0040c1); border-color: #e5e7eb #e5e7eb #fff; }
.acct-tx .list-group-link .list-group-item.active::after { display: none; }
.acct-tx .pos-tab { padding: 16px; }
.acct-tx .pos-tab .dataTable td { white-space: normal; }

/* Opt-in refresh for CRM, Essentials, Project and Spreadsheet.
   Keep Bootstrap collapse/dropdown hooks and spreadsheet grid geometry intact. */
@media screen {
    .module-toolbar.ui-module-nav {
        min-height: 0;
        margin: 16px var(--ui-content-gutter) 4px;
        padding: 6px;
        border: 1px solid var(--ui-color-border);
        border-radius: var(--ui-radius-lg);
        background: var(--ui-color-surface);
        box-shadow: var(--ui-shadow-card);
    }

    .ui-module-nav > .container-fluid { padding: 0 8px; }
    .ui-module-nav .navbar-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        height: 44px;
        padding: 10px 14px;
        color: var(--ui-color-text);
        font-size: 16px;
        font-weight: 650;
    }
    .ui-module-nav .navbar-brand > i { color: var(--theme-700, #004eeb); }
    .ui-module-nav .navbar-nav { margin-top: 0; margin-bottom: 0; }
    .ui-module-nav .navbar-nav > li > a {
        margin: 3px 2px;
        padding: 9px 9px;
        border-radius: var(--ui-radius-md);
        color: var(--ui-color-muted);
        font-size: 13px;
        line-height: 20px;
    }
    .ui-module-nav .navbar-nav > :is(.active, .open) > a,
    .ui-module-nav .navbar-nav > li > a:hover,
    .ui-module-nav .navbar-nav > li > a:focus {
        background: color-mix(in srgb, var(--theme-700, #004eeb) 8%, white);
        color: var(--theme-800, #0040c1);
    }
    .ui-module-nav .navbar-nav > .active > a { font-weight: 650; }
    .ui-module-nav a:focus-visible,
    .ui-module-nav .navbar-toggle:focus-visible {
        outline: 2px solid var(--theme-700, #004eeb);
        outline-offset: 2px;
    }
    .ui-module-nav .navbar-toggle {
        min-width: 40px;
        min-height: 40px;
        margin: 2px 0;
        border-color: var(--ui-color-border);
        border-radius: var(--ui-radius-md);
    }
    .ui-module-nav .dropdown-menu {
        min-width: 190px;
        padding: 6px;
        border: 1px solid var(--ui-color-border);
        border-radius: var(--ui-radius-md);
        box-shadow: var(--ui-shadow-popover);
    }
    .ui-module-nav .dropdown-menu > a {
        display: block;
        padding: 9px 12px;
        border-radius: var(--ui-radius-sm);
        color: var(--ui-color-text);
    }
    .ui-module-nav .dropdown-menu > a:hover { background: var(--ui-color-surface-subtle); }

    /* Compact metrics retain their status colors, with quieter surfaces. */
    .ui-module-dashboard .info-box.info-box-new-style {
        display: flex;
        align-items: center;
        gap: 14px;
        min-height: 88px;
        margin-bottom: 16px;
        padding: 18px;
        border: 1px solid var(--ui-color-border);
        border-radius: var(--ui-radius-lg);
        box-shadow: var(--ui-shadow-card);
    }
    .ui-module-dashboard .info-box-new-style .info-box-icon {
        display: flex;
        flex: 0 0 44px;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin: 0;
        border-radius: 12px;
        font-size: 20px;
        line-height: 1;
        box-shadow: none;
    }
    .ui-module-dashboard .info-box-icon.bg-aqua {
        background: color-mix(in srgb, var(--theme-700, #004eeb) 9%, white) !important;
        color: var(--theme-700, #004eeb) !important;
    }
    .ui-module-dashboard .info-box-icon > i { font-size: 20px; }
    .ui-module-dashboard .info-box-icon.bg-yellow { background: #fffaeb !important; color: #b54708 !important; }
    .ui-module-dashboard .info-box-icon.bg-red { background: #fff1f3 !important; color: #c01048 !important; }
    .ui-module-dashboard .info-box-icon.bg-green { background: #ecfdf3 !important; color: #067647 !important; }
    .ui-module-dashboard .info-box-content { min-width: 0; margin: 0; padding: 0; }
    .ui-module-dashboard .info-box-text {
        color: var(--ui-color-muted);
        font-size: 12px;
        font-weight: 500;
        line-height: 1.45;
        text-transform: none;
        white-space: normal;
    }
    .ui-module-dashboard .info-box-number {
        margin-top: 4px;
        color: var(--ui-color-text);
        font-size: 24px;
        font-weight: 650;
        line-height: 1.2;
        font-variant-numeric: tabular-nums;
    }
    .ui-crm-overview {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
        gap: 20px;
        margin: 0;
    }
    .ui-crm-overview::before, .ui-crm-overview::after { display: none; }
    .ui-crm-overview > [class*="col-"],
    .ui-crm-overview > [class*="col-"] > .col-md-12 { width: 100%; padding: 0; }
    .ui-module-dashboard > hr { margin: 8px 0 24px; border-color: var(--ui-color-border); }
    .ui-crm-overview .table td { text-align: end; font-variant-numeric: tabular-nums; }

    .ui-project-list .eq-height-col > .box { border-color: var(--ui-color-border); }
    body:not(.lockscreen) .ui-project-list .eq-height-col .box-header {
        background: var(--ui-color-surface-subtle);
        color: var(--ui-color-text);
        border-bottom: 1px solid var(--ui-color-border);
    }
    .ui-project-list .box.box-solid.box-primary > .box-header .box-title a,
    .ui-project-list .box.box-solid.box-primary > .box-header .btn-default {
        color: var(--ui-color-text);
    }
    .ui-project-list .box.box-solid.box-primary > .box-header .box-title a:hover { color: var(--theme-700, #004eeb); }
    .ui-project-list .eq-height-col .box-body { line-height: 1.9; }
    .ui-project-list .eq-height-col .box-body i { width: 20px; color: var(--ui-color-muted); }
    .ui-project-list .btn-group-toggle > .btn-info {
        background: var(--ui-color-surface);
        border-color: var(--ui-color-border);
        color: var(--ui-color-muted);
    }
    .ui-project-list .btn-group-toggle > .btn-info.active {
        background: color-mix(in srgb, var(--theme-700, #004eeb) 8%, white);
        color: var(--theme-800, #0040c1);
        box-shadow: none;
    }

    .ui-sheet-library-tools { display: flex; align-items: center; flex-wrap: wrap; row-gap: 12px; margin-bottom: 16px; }
    .ui-sheet-library-tools .mb-12 { margin-bottom: 0; }
    .ui-sheet-library #spreadsheets_tree { padding: 12px 0; }
    .ui-sheet-library .jstree-anchor { padding: 6px 8px; border-radius: var(--ui-radius-sm); }
    .ui-sheet-library .jstree-hovered { background: var(--ui-color-surface-subtle); box-shadow: none; }
    .ui-sheet-library .jstree-clicked { background: color-mix(in srgb, var(--theme-700, #004eeb) 8%, white); box-shadow: none; }
    .ui-sheet-library .tree-actions .btn { margin-inline-start: 6px; }

    /* Editor chrome only: no cell, canvas, formula or context-menu overrides. */
    .ui-sheet-editor .content > .container-fluid { padding: 0; }
    .ui-sheet-editor .ui-sheet-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
    .ui-sheet-toolbar > [class*="col-"] { width: auto; min-width: 0; padding: 0; }
    .ui-sheet-toolbar > .col-xs-4:nth-child(2) { flex: 1 1 260px; }
    .ui-sheet-toolbar > .col-xs-4 p { margin: 0; }
    .ui-sheet-toolbar > .ui-sheet-actions { display: flex; flex-direction: row-reverse; align-items: center; gap: 8px; }
    .ui-sheet-actions #spreadsheet { margin: 0; }
    .ui-sheet-actions .pull-right { float: none !important; }
    .ui-sheet-toolbar > .col-xs-12 { flex: 1 1 100%; }
    .ui-sheet-editor #import-excel-file { max-width: 100%; color: var(--ui-color-muted); font-size: 13px; }
    .ui-sheet-editor #import-excel-file::file-selector-button {
        margin-inline-end: 10px;
        padding: 10px 14px;
        border: 1px solid var(--ui-color-border-strong);
        border-radius: var(--ui-radius-md);
        background: var(--ui-color-surface);
        color: var(--ui-color-text);
        font: inherit;
        cursor: pointer;
    }
    .ui-sheet-editor .spreadsheet {
        position: relative;
        width: 100%;
        height: calc(100vh - 180px);
        height: calc(100dvh - 180px);
        min-height: 440px;
        border: 1px solid var(--ui-color-border-strong);
        border-radius: var(--ui-radius-md);
        overflow: hidden;
    }
}

@media screen and (min-width: 768px) {
    .ui-module-nav > .container-fluid { display: flex; align-items: flex-start; }
    .ui-module-nav .navbar-header { flex-shrink: 0; }
    .ui-module-nav .navbar-collapse { flex: 1; min-width: 0; padding: 0; }
    .ui-module-nav .navbar-nav { display: flex; flex-wrap: wrap; float: none; }
    .ui-module-nav .navbar-nav > li { float: none; }
}
@media screen and (max-width: 767px) {
    .module-toolbar.ui-module-nav { margin-top: 12px; }
    .ui-module-nav .navbar-collapse { margin-top: 6px; border-top-color: var(--ui-color-border); box-shadow: none; }
    .ui-module-nav .navbar-nav > li > a { padding: 11px 12px; }
    .ui-module-nav .navbar-nav .open .dropdown-menu { box-shadow: none; }
    .ui-module-dashboard .info-box.info-box-new-style { margin-bottom: 12px; }
    .ui-sheet-library-tools > [class*="col-"] { width: 100%; }
    .ui-sheet-toolbar > .col-xs-4:nth-child(2) { flex-basis: 100%; }
}