/* NexZion humanized UI v3
   Deliberate ERP/product UI: restrained surfaces, clear hierarchy, compact data density,
   consistent states, and responsive behavior. No financial or workflow logic is changed. */

body.nx-app:not(.lockscreen) {
    --nx3-canvas: #f5f7f9;
    --nx3-surface: #ffffff;
    --nx3-soft: #f8fafc;
    --nx3-border: #e3e7ec;
    --nx3-border-strong: #cfd6df;
    --nx3-text: #182230;
    --nx3-text-2: #344054;
    --nx3-muted: #667085;
    --nx3-muted-2: #98a2b3;
    --nx3-primary: #1d4ed8;
    --nx3-primary-hover: #1e40af;
    --nx3-primary-soft: #eff6ff;
    --nx3-success: #067647;
    --nx3-success-soft: #ecfdf3;
    --nx3-warning: #b54708;
    --nx3-warning-soft: #fffaeb;
    --nx3-danger: #b42318;
    --nx3-danger-soft: #fef3f2;
    --nx3-radius: 8px;
    --nx3-shadow-menu: 0 10px 30px rgba(16,24,40,.12);
    background: var(--nx3-canvas) !important;
    color: var(--nx3-text-2);
}

/* App canvas */
body.nx-app:not(.lockscreen) main,
body.nx-app:not(.lockscreen) #scrollable-container {
    background: var(--nx3-canvas) !important;
}

body.nx-app:not(.lockscreen) #scrollable-container {
    scrollbar-gutter: stable;
}

/* Remove template-like motion/decorative treatment globally. */
body.nx-app:not(.lockscreen) [class*="hover:tw--translate"],
body.nx-app:not(.lockscreen) [class*="hover:tw-shadow-md"] {
    transform: none !important;
}

body.nx-app:not(.lockscreen) section.content [class*="tw-bg-gradient-to-r"],
body.nx-app:not(.lockscreen) .nx-dashboard [class*="tw-bg-gradient-to-r"] {
    background-image: none !important;
}

body.nx-app:not(.lockscreen) .tw-shadow-sm,
body.nx-app:not(.lockscreen) .hover\:tw-shadow-md:hover {
    box-shadow: none;
}

/* Page hierarchy */
body.nx-app:not(.lockscreen) .content-header {
    padding: 20px 22px 9px !important;
}

body.nx-app:not(.lockscreen) .content-header h1 {
    margin: 0 !important;
    color: var(--nx3-text) !important;
    font-size: 24px !important;
    line-height: 1.25 !important;
    font-weight: 680 !important;
    letter-spacing: -.025em !important;
}

body.nx-app:not(.lockscreen) .content-header h1 small {
    display: block;
    margin-top: 4px;
    color: var(--nx3-muted) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    font-weight: 450 !important;
    letter-spacing: 0 !important;
}

body.nx-app:not(.lockscreen) section.content {
    padding: 10px 22px 26px !important;
}

body.nx-app:not(.lockscreen) .content > .row {
    margin-left: -7px;
    margin-right: -7px;
}

body.nx-app:not(.lockscreen) .content > .row > [class*="col-"] {
    padding-left: 7px;
    padding-right: 7px;
}

/* Application command bar */
body.nx-app:not(.lockscreen) .nx-app-header {
    position: relative;
    z-index: 80;
}

body.nx-app:not(.lockscreen) .nx-app-header .tw-dw-dropdown-content,
body.nx-app:not(.lockscreen) .nx-app-header details > ul {
    border: 1px solid var(--nx3-border) !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: var(--nx3-shadow-menu) !important;
}

body.nx-app:not(.lockscreen) .nx-header-quick-menu {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.nx-app:not(.lockscreen) .nx-header-primary-action svg {
    width: 17px !important;
    height: 17px !important;
}

/* Sidebar */
body.nx-app:not(.lockscreen) .nx-app-sidebar {
    isolation: isolate;
}

body.nx-app:not(.lockscreen) .nx-sidebar-brand {
    text-decoration: none !important;
}

body.nx-app:not(.lockscreen) #sidebar-search {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.nx-app:not(.lockscreen) #sidebar-search-clear {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
}

body.nx-app:not(.lockscreen) #sidebar-no-results {
    margin: 0;
}

body.nx-app:not(.lockscreen) #side-bar a {
    text-decoration: none !important;
}

/* One component language: borders, not floating cards. */
body.nx-app:not(.lockscreen) .nx-widget,
body.nx-app:not(.lockscreen) .nx-filter-panel,
body.nx-app:not(.lockscreen) .box,
body.nx-app:not(.lockscreen) .nav-tabs-custom {
    border: 1px solid var(--nx3-border) !important;
    border-radius: var(--nx3-radius) !important;
    background: var(--nx3-surface) !important;
    box-shadow: none !important;
}

body.nx-app:not(.lockscreen) .nx-widget {
    overflow: visible;
}

body.nx-app:not(.lockscreen) .nx-widget__header,
body.nx-app:not(.lockscreen) .box-header {
    min-height: 43px;
    border-bottom-color: #edf0f3 !important;
}

body.nx-app:not(.lockscreen) .nx-widget__header .box-title,
body.nx-app:not(.lockscreen) .box-header .box-title {
    color: var(--nx3-text) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 1.4 !important;
}

body.nx-app:not(.lockscreen) .nx-widget__body {
    padding: 14px !important;
}

body.nx-app:not(.lockscreen) .nx-widget__body > .row:first-child {
    margin-top: 0;
}

/* Filters should read like a disclosure bar, not another dashboard card. */
body.nx-app:not(.lockscreen) .nx-filter-panel {
    overflow: hidden;
}

body.nx-app:not(.lockscreen) .nx-filter-toggle {
    min-height: 42px;
}

body.nx-app:not(.lockscreen) .nx-filter-toggle__label {
    color: var(--nx3-text-2);
}

body.nx-app:not(.lockscreen) .nx-filter-panel .panel-collapse.in {
    background: #fbfcfd;
}

/* Forms */
body.nx-app:not(.lockscreen) label {
    margin-bottom: 6px;
    color: var(--nx3-text-2);
    font-size: 12.5px;
    line-height: 1.35;
    font-weight: 600;
}

body.nx-app:not(.lockscreen) .form-group {
    margin-bottom: 14px;
}

body.nx-app:not(.lockscreen) .form-control,
body.nx-app:not(.lockscreen) .select2-container .select2-selection--single,
body.nx-app:not(.lockscreen) .select2-container .select2-selection--multiple {
    min-height: 37px !important;
    border: 1px solid var(--nx3-border-strong) !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: var(--nx3-text) !important;
    box-shadow: none !important;
    font-size: 13px !important;
}

body.nx-app:not(.lockscreen) .form-control {
    padding: 7px 10px;
}

body.nx-app:not(.lockscreen) textarea.form-control {
    min-height: 82px;
    line-height: 1.45;
}

body.nx-app:not(.lockscreen) .form-control:focus,
body.nx-app:not(.lockscreen) .select2-container--focus .select2-selection,
body.nx-app:not(.lockscreen) .select2-container--open .select2-selection {
    border-color: #84adff !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.10) !important;
}

body.nx-app:not(.lockscreen) .form-control[disabled],
body.nx-app:not(.lockscreen) .form-control[readonly] {
    background: #f8fafc !important;
    color: #667085 !important;
}

body.nx-app:not(.lockscreen) .input-group-addon {
    border-color: var(--nx3-border-strong) !important;
    background: #f8fafc !important;
    color: #667085 !important;
}

body.nx-app:not(.lockscreen) .input-group-btn .btn {
    min-height: 37px;
}

body.nx-app:not(.lockscreen) .help-block {
    margin: 4px 0 0;
    color: var(--nx3-muted) !important;
    font-size: 11.5px !important;
    line-height: 1.45;
}

body.nx-app:not(.lockscreen) .has-error .form-control {
    border-color: #f04438 !important;
}

body.nx-app:not(.lockscreen) .has-error label,
body.nx-app:not(.lockscreen) label.error {
    color: var(--nx3-danger) !important;
}

/* Buttons */
body.nx-app:not(.lockscreen) .btn,
body.nx-app:not(.lockscreen) .tw-dw-btn {
    min-height: 34px;
    border-radius: 6px !important;
    box-shadow: none !important;
    font-size: 12.5px;
    line-height: 1.2;
    font-weight: 600 !important;
}

body.nx-app:not(.lockscreen) .btn-primary,
body.nx-app:not(.lockscreen) .tw-dw-btn-primary {
    border-color: var(--nx3-primary) !important;
    background: var(--nx3-primary) !important;
    color: #fff !important;
}

body.nx-app:not(.lockscreen) .btn-primary:hover,
body.nx-app:not(.lockscreen) .btn-primary:focus,
body.nx-app:not(.lockscreen) .tw-dw-btn-primary:hover,
body.nx-app:not(.lockscreen) .tw-dw-btn-primary:focus {
    border-color: var(--nx3-primary-hover) !important;
    background: var(--nx3-primary-hover) !important;
}

body.nx-app:not(.lockscreen) .btn-default,
body.nx-app:not(.lockscreen) .tw-dw-btn-outline {
    border-color: var(--nx3-border-strong) !important;
    background: #fff !important;
    color: var(--nx3-text-2) !important;
}

body.nx-app:not(.lockscreen) .btn-default:hover,
body.nx-app:not(.lockscreen) .tw-dw-btn-outline:hover {
    border-color: #98a2b3 !important;
    background: #f8fafc !important;
    color: var(--nx3-text) !important;
}

body.nx-app:not(.lockscreen) .btn-success {
    border-color: #079455 !important;
    background: #079455 !important;
}

body.nx-app:not(.lockscreen) .btn-danger {
    border-color: #d92d20 !important;
    background: #d92d20 !important;
}

body.nx-app:not(.lockscreen) .btn-warning {
    border-color: #dc6803 !important;
    background: #dc6803 !important;
    color: #fff !important;
}

body.nx-app:not(.lockscreen) .btn-link {
    min-height: auto;
    padding-left: 4px;
    padding-right: 4px;
    color: var(--nx3-primary);
    background: transparent !important;
}

body.nx-app:not(.lockscreen) .btn:focus-visible,
body.nx-app:not(.lockscreen) .tw-dw-btn:focus-visible,
body.nx-app:not(.lockscreen) a:focus-visible,
body.nx-app:not(.lockscreen) button:focus-visible {
    outline: 3px solid rgba(37,99,235,.16) !important;
    outline-offset: 2px;
}

/* DataTables */
body.nx-app:not(.lockscreen) .table-responsive {
    border: 0 !important;
    -webkit-overflow-scrolling: touch;
}

body.nx-app:not(.lockscreen) table.table {
    margin-bottom: 0;
    color: var(--nx3-text-2);
    font-size: 12.5px;
}

body.nx-app:not(.lockscreen) table.table > thead > tr > th {
    padding: 9px 10px !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--nx3-border-strong) !important;
    background: #f8fafc !important;
    color: #475467 !important;
    font-size: 11.5px !important;
    font-weight: 650 !important;
    line-height: 1.3;
    vertical-align: middle;
    white-space: nowrap;
}

body.nx-app:not(.lockscreen) table.table > tbody > tr > td {
    padding: 9px 10px !important;
    border-color: #edf0f3 !important;
    vertical-align: middle;
}

body.nx-app:not(.lockscreen) table.table-striped > tbody > tr:nth-of-type(odd) {
    background: #fcfcfd !important;
}

body.nx-app:not(.lockscreen) table.table-hover > tbody > tr:hover,
body.nx-app:not(.lockscreen) table.table > tbody > tr:hover {
    background: #f8fafc !important;
}

body.nx-app:not(.lockscreen) table.table tfoot {
    background: #fbfcfd;
}

body.nx-app:not(.lockscreen) table.table tfoot .footer-total,
body.nx-app:not(.lockscreen) table.table tfoot .bg-gray {
    background: #f8fafc !important;
    color: var(--nx3-text-2) !important;
}

body.nx-app:not(.lockscreen) .dataTables_wrapper .dataTables_info {
    padding-top: 10px !important;
    color: var(--nx3-muted);
    font-size: 11.5px;
}

body.nx-app:not(.lockscreen) .dataTables_wrapper .pagination {
    margin: 8px 0 0 !important;
}

body.nx-app:not(.lockscreen) .pagination > li > a,
body.nx-app:not(.lockscreen) .pagination > li > span {
    min-width: 32px;
    min-height: 32px;
    padding: 6px 9px;
    border-color: var(--nx3-border) !important;
    color: #475467;
    text-align: center;
}

body.nx-app:not(.lockscreen) .pagination > .active > a,
body.nx-app:not(.lockscreen) .pagination > .active > span {
    border-color: var(--nx3-primary) !important;
    background: var(--nx3-primary) !important;
    color: #fff !important;
}

/* Action dropdowns */
body.nx-app:not(.lockscreen) .dropdown-menu,
body.nx-app:not(.lockscreen) .tw-dw-dropdown-content {
    border: 1px solid var(--nx3-border) !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: var(--nx3-shadow-menu) !important;
}

body.nx-app:not(.lockscreen) .dropdown-menu > li > a {
    min-height: 32px;
    padding: 7px 11px;
    color: var(--nx3-text-2);
    font-size: 12.5px;
}

body.nx-app:not(.lockscreen) .dropdown-menu > li > a:hover {
    background: #f8fafc;
    color: var(--nx3-text);
}

/* Tabs */
body.nx-app:not(.lockscreen) .nav-tabs-custom {
    overflow: hidden;
}

body.nx-app:not(.lockscreen) .nav-tabs-custom > .nav-tabs {
    padding: 0 12px;
    border-bottom: 1px solid var(--nx3-border) !important;
    background: #fff;
}

body.nx-app:not(.lockscreen) .nav-tabs-custom > .nav-tabs > li {
    margin: 0 18px 0 0 !important;
    border: 0 !important;
}

body.nx-app:not(.lockscreen) .nav-tabs-custom > .nav-tabs > li > a {
    padding: 11px 2px 9px !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--nx3-muted) !important;
    font-size: 12.5px;
    font-weight: 550;
}

body.nx-app:not(.lockscreen) .nav-tabs-custom > .nav-tabs > li.active > a {
    border-bottom-color: var(--nx3-primary) !important;
    color: var(--nx3-text) !important;
    font-weight: 650;
}

body.nx-app:not(.lockscreen) .nav-tabs-custom > .tab-content {
    padding: 14px !important;
}

/* Statuses / badges: semantic, not rainbow decoration. */
body.nx-app:not(.lockscreen) .label,
body.nx-app:not(.lockscreen) .badge {
    border-radius: 999px;
    box-shadow: none !important;
    font-size: 10.5px;
    line-height: 1.25;
    font-weight: 650;
}

body.nx-app:not(.lockscreen) .label-success,
body.nx-app:not(.lockscreen) .bg-green,
body.nx-app:not(.lockscreen) .bg-olive {
    background: var(--nx3-success-soft) !important;
    color: var(--nx3-success) !important;
}

body.nx-app:not(.lockscreen) .label-warning,
body.nx-app:not(.lockscreen) .bg-yellow,
body.nx-app:not(.lockscreen) .bg-orange {
    background: var(--nx3-warning-soft) !important;
    color: var(--nx3-warning) !important;
}

body.nx-app:not(.lockscreen) .label-danger,
body.nx-app:not(.lockscreen) .bg-red {
    background: var(--nx3-danger-soft) !important;
    color: var(--nx3-danger) !important;
}

body.nx-app:not(.lockscreen) .label-info,
body.nx-app:not(.lockscreen) .bg-aqua,
body.nx-app:not(.lockscreen) .bg-blue {
    background: var(--nx3-primary-soft) !important;
    color: var(--nx3-primary) !important;
}

/* Alerts */
body.nx-app:not(.lockscreen) .alert {
    padding: 11px 13px;
    border-width: 1px !important;
    border-radius: 7px !important;
    box-shadow: none !important;
}

body.nx-app:not(.lockscreen) .alert-danger {
    border-color: #fecdca !important;
    background: var(--nx3-danger-soft) !important;
    color: #912018 !important;
}

body.nx-app:not(.lockscreen) .alert-success {
    border-color: #abefc6 !important;
    background: var(--nx3-success-soft) !important;
    color: #05603a !important;
}

body.nx-app:not(.lockscreen) .alert-warning {
    border-color: #fedf89 !important;
    background: var(--nx3-warning-soft) !important;
    color: #93370d !important;
}

/* Modals */
body.nx-app:not(.lockscreen) .modal-content {
    overflow: hidden;
    border: 1px solid var(--nx3-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 24px 64px rgba(16,24,40,.18) !important;
}

body.nx-app:not(.lockscreen) .modal-header {
    padding: 14px 17px !important;
    border-bottom: 1px solid var(--nx3-border) !important;
    background: #fff;
}

body.nx-app:not(.lockscreen) .modal-title {
    color: var(--nx3-text);
    font-size: 16px;
    font-weight: 650;
}

body.nx-app:not(.lockscreen) .modal-body {
    padding: 17px !important;
}

body.nx-app:not(.lockscreen) .modal-footer {
    padding: 12px 17px !important;
    border-top: 1px solid var(--nx3-border) !important;
    background: #fbfcfd;
}

/* Dashboard: treat metrics as compact readouts, not eight colorful cards. */
body.nx-app:not(.lockscreen) .nx-dashboard-shell {
    background: var(--nx3-canvas) !important;
    border-bottom: 1px solid var(--nx3-border);
}

body.nx-app:not(.lockscreen) .nx-dashboard-shell .nx-dashboard-title {
    color: var(--nx3-text) !important;
}

body.nx-app:not(.lockscreen) .nx-dashboard-shell .nx-dashboard-subtitle {
    color: var(--nx3-muted) !important;
}

body.nx-app:not(.lockscreen) .nx-dashboard-shell .nx-dashboard-card {
    min-height: 74px !important;
    border-color: var(--nx3-border) !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.nx-app:not(.lockscreen) .nx-dashboard-shell .nx-dashboard-card:hover {
    border-color: #c7ced8 !important;
}

body.nx-app:not(.lockscreen) .nx-dashboard-shell .nx-dashboard-card [class*="tw-rounded-full"] {
    border-radius: 6px !important;
    background: #f5f7f9 !important;
    color: #667085 !important;
}

body.nx-app:not(.lockscreen) .nx-dashboard-body .nx-dashboard-chart-card,
body.nx-app:not(.lockscreen) .nx-dashboard-body .nx-dashboard-panel {
    border: 1px solid var(--nx3-border) !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
    transform: none !important;
}

body.nx-app:not(.lockscreen) .nx-dashboard-body .nx-dashboard-chart-card:hover,
body.nx-app:not(.lockscreen) .nx-dashboard-body .nx-dashboard-panel:hover {
    border-color: #c7ced8 !important;
    transform: none !important;
}

body.nx-app:not(.lockscreen) .nx-dashboard-panel-head [class*="tw-rounded-full"] {
    border-radius: 6px !important;
    background: #f5f7f9 !important;
    color: #667085 !important;
}

body.nx-app:not(.lockscreen) .nx-dashboard-content-heading h2 {
    color: var(--nx3-text);
}

body.nx-app:not(.lockscreen) .nx-dashboard-content-heading p {
    color: var(--nx3-muted);
}

/* Create/edit workflows: section titles should feel like one document, not a card gallery. */
body.nx-app:not(.lockscreen)[data-nx-page="products"] .nx-widget,
body.nx-app:not(.lockscreen)[data-nx-page="purchases"] .nx-widget,
body.nx-app:not(.lockscreen)[data-nx-page="sells"] .nx-widget,
body.nx-app:not(.lockscreen)[data-nx-page="expenses"] .nx-widget {
    margin-bottom: 14px;
}

body.nx-app:not(.lockscreen)[data-nx-page="products"] .nx-widget__header,
body.nx-app:not(.lockscreen)[data-nx-page="purchases"] .nx-widget__header,
body.nx-app:not(.lockscreen)[data-nx-page="sells"] .nx-widget__header,
body.nx-app:not(.lockscreen)[data-nx-page="expenses"] .nx-widget__header {
    background: #fbfcfd;
}

/* Contact / ledger */
body.nx-app:not(.lockscreen)[data-nx-page="contacts"] .nx-contact-profile-header__switcher {
    margin-bottom: 1px;
}

body.nx-app:not(.lockscreen)[data-nx-page="contacts"] .contact-info-box,
body.nx-app:not(.lockscreen)[data-nx-page="contacts"] .info-box {
    box-shadow: none !important;
}

/* Footer */
body.nx-app:not(.lockscreen) #scrollable-container > .tw-mt-auto {
    margin-top: 18px !important;
    border-top: 1px solid var(--nx3-border);
    color: var(--nx3-muted);
}

/* POS workspace: compact, operational and tactile without playful styling. */
body.nx-app.lockscreen {
    background: #f3f5f7 !important;
    color: #344054;
}

body.nx-app.lockscreen .nx-pos-sale-panel {
    border: 1px solid #dfe4ea !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

body.nx-app.lockscreen .nx-pos-action-bar {
    border-color: #dfe4ea !important;
    border-radius: 8px 8px 0 0 !important;
    box-shadow: 0 -3px 16px rgba(16,24,40,.06) !important;
}

body.nx-app.lockscreen .nx-pos-drawer-trigger {
    border-radius: 6px !important;
    font-size: 12.5px !important;
}

body.nx-app.lockscreen .nx-pos-filter-card,
body.nx-app.lockscreen .pos-card {
    border-radius: 7px !important;
    box-shadow: none !important;
}

body.nx-app.lockscreen .nx-pos-filter-card:hover,
body.nx-app.lockscreen .pos-card:hover {
    transform: none !important;
    box-shadow: none !important;
}

body.nx-app.lockscreen .form-control,
body.nx-app.lockscreen .select2-container .select2-selection--single {
    border-radius: 6px !important;
    box-shadow: none !important;
}

/* Touch/responsive */
@media (max-width: 991px) {
    body.nx-app:not(.lockscreen) .content-header {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    body.nx-app:not(.lockscreen) section.content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    body.nx-app:not(.lockscreen) .nx-dashboard-shell > .tw-px-5,
    body.nx-app:not(.lockscreen) .nx-dashboard-body {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    body.nx-app:not(.lockscreen) .dataTables_wrapper .dataTables_scrollBody {
        max-height: 52vh !important;
    }
}

@media (max-width: 767px) {
    body.nx-app:not(.lockscreen) .content-header {
        padding: 15px 12px 7px !important;
    }

    body.nx-app:not(.lockscreen) .content-header h1 {
        font-size: 21px !important;
    }

    body.nx-app:not(.lockscreen) section.content {
        padding: 8px 12px 18px !important;
    }

    body.nx-app:not(.lockscreen) .nx-widget__body,
    body.nx-app:not(.lockscreen) .nav-tabs-custom > .tab-content {
        padding: 11px !important;
    }

    body.nx-app:not(.lockscreen) .nx-widget__header,
    body.nx-app:not(.lockscreen) .box-header {
        padding-left: 11px !important;
        padding-right: 11px !important;
    }

    body.nx-app:not(.lockscreen) .form-group {
        margin-bottom: 12px;
    }

    body.nx-app:not(.lockscreen) .btn,
    body.nx-app:not(.lockscreen) .tw-dw-btn {
        min-height: 38px;
    }

    body.nx-app:not(.lockscreen) .nav-tabs-custom > .nav-tabs {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    body.nx-app:not(.lockscreen) .nav-tabs-custom > .nav-tabs > li {
        float: none;
        flex: 0 0 auto;
    }

    body.nx-app:not(.lockscreen) .dataTables_wrapper .dataTables_filter label,
    body.nx-app:not(.lockscreen) .dataTables_wrapper .dataTables_length label {
        width: 100%;
    }

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

    body.nx-app:not(.lockscreen) .dataTables_wrapper .dt-buttons {
        display: flex !important;
        width: 100%;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        padding-bottom: 3px;
        scrollbar-width: thin;
    }

    body.nx-app:not(.lockscreen) .dataTables_wrapper .dt-buttons .btn {
        flex: 0 0 auto;
    }

    body.nx-app:not(.lockscreen) .modal-dialog {
        width: auto;
        margin: 10px;
    }

    body.nx-app:not(.lockscreen) .nx-dashboard-shell > .tw-px-5,
    body.nx-app:not(.lockscreen) .nx-dashboard-body {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body.nx-app:not(.lockscreen) .nx-dashboard-shell .tw-grid {
        gap: 8px !important;
    }

    body.nx-app:not(.lockscreen) .nx-dashboard-shell .nx-dashboard-card {
        min-height: 70px !important;
    }
}

@media (max-width: 480px) {
    body.nx-app:not(.lockscreen) .nx-dashboard-shell .tw-grid {
        grid-template-columns: minmax(0,1fr) !important;
    }

    body.nx-app:not(.lockscreen) .content-header h1 small {
        max-width: 100%;
    }

    body.nx-app:not(.lockscreen) table.table {
        font-size: 12px;
    }
}

@media (pointer: coarse) {
    body.nx-app:not(.lockscreen) #side-bar a,
    body.nx-app:not(.lockscreen) .btn,
    body.nx-app:not(.lockscreen) .tw-dw-btn {
        min-height: 40px;
    }
}

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

/* Print layouts are fiscal/business documents and are intentionally not restyled. */
@media print {
    body.nx-app #receipt_section,
    body.nx-app .print_section {
        background: #fff !important;
    }
}

/* Dashboard metrics are one segmented operational strip rather than a grid of floating cards. */
body.nx-app:not(.lockscreen) .nx-dashboard-metric-strip {
    gap: 0 !important;
    overflow: hidden;
    border: 1px solid var(--nx3-border);
    border-radius: 8px;
    background: #fff;
}

body.nx-app:not(.lockscreen) .nx-dashboard-metric-strip .nx-dashboard-card {
    min-height: 78px !important;
    margin: 0 !important;
    border: 0 !important;
    border-right: 1px solid #edf0f3 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

body.nx-app:not(.lockscreen) .nx-dashboard-metric-strip .nx-dashboard-card:last-child {
    border-right: 0 !important;
}

body.nx-app:not(.lockscreen) .nx-dashboard-metric-strip .nx-dashboard-card:hover {
    background: #fbfcfd !important;
}

@media (max-width: 1279px) {
    body.nx-app:not(.lockscreen) .nx-dashboard-metric-strip .nx-dashboard-card:nth-child(2) {
        border-right: 0 !important;
    }
    body.nx-app:not(.lockscreen) .nx-dashboard-metric-strip .nx-dashboard-card:nth-child(-n+2) {
        border-bottom: 1px solid #edf0f3 !important;
    }
}

@media (max-width: 639px) {
    body.nx-app:not(.lockscreen) .nx-dashboard-metric-strip {
        grid-template-columns: 1fr !important;
    }
    body.nx-app:not(.lockscreen) .nx-dashboard-metric-strip .nx-dashboard-card,
    body.nx-app:not(.lockscreen) .nx-dashboard-metric-strip .nx-dashboard-card:nth-child(2) {
        border-right: 0 !important;
        border-bottom: 1px solid #edf0f3 !important;
    }
    body.nx-app:not(.lockscreen) .nx-dashboard-metric-strip .nx-dashboard-card:last-child {
        border-bottom: 0 !important;
    }
}

/* Legacy DaisyUI action buttons otherwise retain oversized template height. */
body.nx-app:not(.lockscreen) section.content .tw-dw-btn:not(.tw-dw-btn-xs):not(.tw-dw-btn-sm) {
    height: auto !important;
    min-height: 34px !important;
    padding: 7px 11px !important;
}

body.nx-app:not(.lockscreen) section.content .tw-dw-btn svg {
    width: 16px !important;
    height: 16px !important;
}

body.nx-app:not(.lockscreen) section.content .tw-dw-btn.tw-m-2 {
    margin: 0 7px 9px 0 !important;
}

/* Section headers read like document sections, not centered card titles. */
body.nx-app:not(.lockscreen) .nx-widget__heading {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
}

body.nx-app:not(.lockscreen) .nx-widget__heading .box-title {
    width: auto !important;
    text-align: left !important;
}

body.nx-app:not(.lockscreen) .file-caption-main .btn,
body.nx-app:not(.lockscreen) .input-group-btn .fileinput-upload-button,
body.nx-app:not(.lockscreen) .input-group-btn .btn-file {
    height: 37px !important;
    min-height: 37px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}

/* Mobile POS keeps checkout controls reachable while the sale body scrolls. */
@media (max-width: 600px) {
    body.nx-app.lockscreen[data-nx-page="pos"] section.content.no-print {
        padding-bottom: 126px !important;
    }

    body.nx-app.lockscreen[data-nx-page="pos"] .nx-pos-action-bar {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: 7px 0 9px !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-radius: 8px 8px 0 0 !important;
        background: rgba(255,255,255,.985) !important;
        z-index: 1040 !important;
    }

    body.nx-app.lockscreen[data-nx-page="pos"] .nx-pos-action-bar > div {
        gap: 7px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    body.nx-app.lockscreen[data-nx-page="pos"] .nx-pos-action-bar button {
        min-height: 34px !important;
    }
}

/* Tablet POS: wrap the checkout/action rail instead of forcing a horizontal hunt. */
@media (min-width: 601px) and (max-width: 900px) {
    body.nx-app.lockscreen[data-nx-page="pos"] section.content.no-print {
        padding-bottom: 138px !important;
    }

    body.nx-app.lockscreen[data-nx-page="pos"] .nx-pos-action-bar {
        padding: 7px 0 9px !important;
    }

    body.nx-app.lockscreen[data-nx-page="pos"] .nx-pos-action-bar > div {
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 7px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        overflow-x: visible !important;
    }

    body.nx-app.lockscreen[data-nx-page="pos"] .nx-pos-action-bar > div > .tw-flex.tw-items-center.tw-gap-4.tw-flex-row {
        width: 100% !important;
        flex: 1 1 100% !important;
        flex-wrap: wrap !important;
        gap: 9px !important;
        overflow-x: visible !important;
    }

    body.nx-app.lockscreen[data-nx-page="pos"] .nx-pos-action-bar button {
        flex: 0 0 auto !important;
    }

    body.nx-app.lockscreen[data-nx-page="pos"] .nx-pos-action-bar .nx-pos-recent-button {
        height: 36px !important;
    }
}

/* Tablet POS final layout: compact two-row action matrix + a separate recent button. */
@media (min-width: 601px) and (max-width: 900px) {
    body.nx-app.lockscreen[data-nx-page="pos"] section.content.no-print {
        padding-bottom: 112px !important;
    }

    body.nx-app.lockscreen[data-nx-page="pos"] .nx-pos-action-bar > div {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 148px !important;
        align-items: start !important;
        gap: 8px !important;
    }

    body.nx-app.lockscreen[data-nx-page="pos"] .nx-pos-secondary-actions {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        width: 100% !important;
        gap: 6px !important;
        overflow: visible !important;
    }

    body.nx-app.lockscreen[data-nx-page="pos"] .nx-pos-secondary-actions > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 36px !important;
        margin: 0 !important;
    }

    body.nx-app.lockscreen[data-nx-page="pos"] .nx-pos-secondary-actions > button {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 6px 7px !important;
        white-space: nowrap !important;
        font-size: 11px !important;
    }

    body.nx-app.lockscreen[data-nx-page="pos"] .nx-pos-secondary-actions .nx-sale-profit-summary {
        justify-content: center !important;
        padding: 5px 6px !important;
        font-size: 10.5px !important;
    }

    body.nx-app.lockscreen[data-nx-page="pos"] .nx-pos-secondary-actions .pos-total {
        padding: 4px 6px !important;
        justify-content: center !important;
    }

    body.nx-app.lockscreen[data-nx-page="pos"] .nx-pos-secondary-actions .pos-total > div {
        flex-direction: row !important;
        gap: 3px !important;
        font-size: 11px !important;
    }

    body.nx-app.lockscreen[data-nx-page="pos"] .nx-pos-secondary-actions .pos-total .number {
        font-size: 14px !important;
    }

    body.nx-app.lockscreen[data-nx-page="pos"] .nx-pos-recent-actions {
        display: block !important;
        width: 148px !important;
        min-width: 148px !important;
    }

    body.nx-app.lockscreen[data-nx-page="pos"] .nx-pos-recent-actions .nx-pos-recent-button {
        width: 100% !important;
        min-width: 0 !important;
        padding: 6px 8px !important;
        white-space: normal !important;
        line-height: 1.25 !important;
    }
}

/* Tablet create/edit forms: two deliberate columns instead of compressed Bootstrap 4-up rows. */
@media (min-width: 768px) and (max-width: 991px) {
    body.nx-app:not(.lockscreen) .nx-form-details .nx-widget__body > .row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 14px !important;
        row-gap: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.nx-app:not(.lockscreen) .nx-form-details .nx-widget__body > .row > [class*="col-"] {
        width: auto !important;
        min-width: 0 !important;
        float: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.nx-app:not(.lockscreen) .nx-form-details .nx-widget__body > .row > .col-sm-12,
    body.nx-app:not(.lockscreen) .nx-form-details .nx-widget__body > .row > .col-md-12,
    body.nx-app:not(.lockscreen) .nx-form-details .nx-widget__body > .row > .form-group.col-sm-12,
    body.nx-app:not(.lockscreen) .nx-form-details .nx-widget__body > .row > .form-group.col-md-12 {
        grid-column: 1 / -1 !important;
    }

    body.nx-app:not(.lockscreen) .nx-form-details .nx-widget__body > .row > .clearfix {
        display: none !important;
    }
}