/* ==========================================================
   APP MODERN GLOBAL REDESIGN
   - Applies approved page style, popup style, and display card
   - Scoped to non-POS screens
   ========================================================== */

body:not(.pos-redesign) {
    --amg-primary-dark: var(--app-brand-blue-dark, #1f4f97);
    --amg-primary: var(--app-brand-blue, #1f7adf);
    --amg-primary-light: var(--app-brand-blue-light, #20a4e4);
    --amg-header-chip-light-start: #6ec9f6;
    --amg-header-chip-light-end: #4eb5ec;
    --amg-page-bg: #f3f7ff;
    --amg-card-bg: #ffffff;
    --amg-card-bg-soft: #f6faff;
    --amg-card-border: #d8e4f5;
    --amg-card-border-soft: #e5edf9;
    --amg-text: #4a5b74;
    --amg-label: #3d5270;
    --amg-muted: #6f829f;
    --amg-shadow-sm: 0 6px 16px rgba(30, 52, 88, 0.06);
    --amg-shadow-md: 0 12px 30px rgba(31, 66, 136, 0.1);
    --amg-shadow-lg: 0 24px 56px rgba(19, 36, 76, 0.2);
}

body:not(.pos-redesign) #scrollable-container,
body:not(.pos-redesign) #scrollable-container .content-wrapper {
    background: var(--amg-page-bg);
}

body:not(.pos-redesign) .content-header {
    margin: 0 0 10px;
}

body:not(.pos-redesign) .content-header h1 {
    color: #3f4a59 !important;
    letter-spacing: 0.2px;
}

body:not(.pos-redesign) .content-header h1 small {
    color: #5f6d82 !important;
    margin-left: 6px;
    font-weight: 600;
}

body:not(.pos-redesign) .help-popover {
    pointer-events: none;
}

body:not(.pos-redesign) .content .box,
body:not(.pos-redesign) .content .box-primary,
body:not(.pos-redesign) .content .nav-tabs-custom {
    border: 1px solid var(--amg-card-border) !important;
    border-top: 1px solid var(--amg-card-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--amg-shadow-md) !important;
    background: linear-gradient(180deg, #ffffff 0%, var(--amg-card-bg-soft) 100%) !important;
    overflow: hidden;
}

body:not(.pos-redesign) .content .box > .box-header,
body:not(.pos-redesign) .content .box-primary > .box-header,
body:not(.pos-redesign) .content .nav-tabs-custom > .nav-tabs {
    border-bottom: 0 !important;
}

body:not(.pos-redesign) .content .box > .box-header,
body:not(.pos-redesign) .content .box-primary > .box-header {
    padding: 14px 16px 10px;
    background: linear-gradient(105deg, var(--amg-primary-dark) 0%, var(--amg-primary) 52%, var(--amg-primary-light) 100%) !important;
    color: #ffffff !important;
}

body:not(.pos-redesign) .content .box > .box-header .box-title,
body:not(.pos-redesign) .content .box-primary > .box-header .box-title {
    color: inherit !important;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.2px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body:not(.pos-redesign) .content .box > .box-header .box-title *,
body:not(.pos-redesign) .content .box-primary > .box-header .box-title * {
    color: inherit !important;
}

body:not(.pos-redesign) .content .box > .box-header .box-tools .btn,
body:not(.pos-redesign) .content .box > .box-header .box-tools .tw-dw-btn,
body:not(.pos-redesign) .content .box-primary > .box-header .box-tools .btn,
body:not(.pos-redesign) .content .box-primary > .box-header .box-tools .tw-dw-btn {
    border-color: rgba(255, 255, 255, 0.45) !important;
    color: #ffffff !important;
}

/* Button on blue header must be lighter blue (approved style) */
body:not(.pos-redesign) .content .box > .box-header .box-tools .tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500,
body:not(.pos-redesign) .content .box-primary > .box-header .box-tools .tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500,
body:not(.pos-redesign) .content .box > .box-header .box-tools .btn.btn-modal.tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500,
body:not(.pos-redesign) .content .box-primary > .box-header .box-tools .btn.btn-modal.tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500,
body:not(.pos-redesign) .content .box > .box-header .box-tools .btn.btn-primary,
body:not(.pos-redesign) .content .box-primary > .box-header .box-tools .btn.btn-primary {
    background: linear-gradient(180deg, var(--amg-header-chip-light-start) 0%, var(--amg-header-chip-light-end) 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.42) !important;
    box-shadow: 0 8px 16px rgba(32, 126, 188, 0.26) !important;
    text-shadow: none !important;
}

body:not(.pos-redesign) .content .box > .box-header .box-tools .tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500:hover,
body:not(.pos-redesign) .content .box-primary > .box-header .box-tools .tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500:hover,
body:not(.pos-redesign) .content .box > .box-header .box-tools .btn.btn-modal.tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500:hover,
body:not(.pos-redesign) .content .box-primary > .box-header .box-tools .btn.btn-modal.tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500:hover,
body:not(.pos-redesign) .content .box > .box-header .box-tools .tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500:focus,
body:not(.pos-redesign) .content .box-primary > .box-header .box-tools .tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500:focus,
body:not(.pos-redesign) .content .box > .box-header .box-tools .btn.btn-modal.tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500:focus,
body:not(.pos-redesign) .content .box-primary > .box-header .box-tools .btn.btn-modal.tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500:focus,
body:not(.pos-redesign) .content .box > .box-header .box-tools .btn.btn-primary:hover,
body:not(.pos-redesign) .content .box-primary > .box-header .box-tools .btn.btn-primary:hover,
body:not(.pos-redesign) .content .box > .box-header .box-tools .btn.btn-primary:focus,
body:not(.pos-redesign) .content .box-primary > .box-header .box-tools .btn.btn-primary:focus {
    background: linear-gradient(180deg, #7cd0f8 0%, #5fbff0 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 18px rgba(33, 132, 196, 0.3) !important;
}

body:not(.pos-redesign) .content .box > .box-body,
body:not(.pos-redesign) .content .box-primary > .box-body,
body:not(.pos-redesign) .content .nav-tabs-custom > .tab-content {
    background: transparent;
    padding: 10px 14px 14px;
}

/* Legacy Bootstrap panels */
body:not(.pos-redesign) .content .panel,
body:not(.pos-redesign) .content .panel.panel-default,
body:not(.pos-redesign) .content .panel.box {
    border: 1px solid var(--amg-card-border) !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #ffffff 0%, var(--amg-card-bg-soft) 100%) !important;
    box-shadow: var(--amg-shadow-sm) !important;
    overflow: hidden;
}

body:not(.pos-redesign) .content .panel > .panel-heading {
    border-bottom: 0 !important;
    padding: 12px 14px;
    background: linear-gradient(105deg, var(--amg-primary-dark) 0%, var(--amg-primary) 52%, var(--amg-primary-light) 100%) !important;
    color: #fff !important;
    font-weight: 700;
}

body:not(.pos-redesign) .content .panel > .panel-heading * {
    color: inherit !important;
}

body:not(.pos-redesign) .content .panel > .panel-body {
    background: transparent;
    padding: 12px 14px 14px;
}

/* Legacy wells */
body:not(.pos-redesign) .content .well {
    border: 1px solid #cddded !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: var(--amg-text) !important;
    box-shadow: var(--amg-shadow-sm);
}

body:not(.pos-redesign) .content .form-group {
    margin-bottom: 10px;
    background: var(--amg-card-bg);
    border: 1px solid var(--amg-card-border);
    border-radius: 14px;
    padding: 10px 12px 11px;
    box-shadow: var(--amg-shadow-sm);
}

body:not(.pos-redesign) .content .form-group > label,
body:not(.pos-redesign) .content .control-label {
    color: var(--amg-label) !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
    margin-bottom: 7px;
}

body:not(.pos-redesign) .content .form-control,
body:not(.pos-redesign) .content .input-group-addon,
body:not(.pos-redesign) .content .select2-container--default .select2-selection--single,
body:not(.pos-redesign) .content .select2-container--default .select2-selection--multiple {
    border: 1px solid #c7d7ef !important;
    border-radius: 10px !important;
    min-height: 40px;
    background: #fff !important;
    color: var(--amg-text) !important;
    box-shadow: inset 0 1px 1px rgba(26, 39, 66, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body:not(.pos-redesign) .content textarea.form-control {
    min-height: 84px;
}

body:not(.pos-redesign) .content .form-control:focus,
body:not(.pos-redesign) .content .select2-container--default.select2-container--focus .select2-selection--single,
body:not(.pos-redesign) .content .select2-container--open .select2-selection--single,
body:not(.pos-redesign) .content .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #5f9eff !important;
    box-shadow: 0 0 0 3px rgba(62, 130, 255, 0.15) !important;
}

body:not(.pos-redesign) .product-search-field-group {
    position: relative;
}

body:not(.pos-redesign) .product-search-field-group.product-search-dropdown-open {
    z-index: 1061;
}

body:not(.pos-redesign) .product-search-field-group #search_product_select + .select2-container {
    width: 100% !important;
}

body:not(.pos-redesign) .product-search-field-group .select2-container--open,
body:not(.pos-redesign) .product-search-field-group .select2-dropdown {
    z-index: 2060;
}

body:not(.pos-redesign) .product-search-field-group .select2-search--dropdown {
    padding: 10px 12px 0;
}

body:not(.pos-redesign) .product-search-field-group .select2-search__field {
    width: 100% !important;
    min-height: 40px;
    border: 1px solid #c9daf1 !important;
    border-radius: 12px !important;
    padding: 9px 12px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    box-shadow: none !important;
}

.cv-contact-selector-dropdown .select2-search--dropdown {
    padding: 10px 12px 0;
}

.cv-contact-selector-dropdown .select2-search__field {
    width: 100% !important;
    min-height: 40px;
    border: 1px solid #c9daf1 !important;
    border-radius: 12px !important;
    padding: 9px 12px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    box-shadow: none !important;
}

.cv-contact-selector-dropdown .select2-results__options {
    padding: 8px 0 10px;
    max-height: 520px !important;
}

.cv-contact-selector-dropdown .select2-results__option {
    padding: 10px 14px;
}

.cv-contact-search-result {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cv-contact-search-result__title {
    font-size: 13.5px;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1.35;
}

.cv-contact-search-result__meta {
    font-size: 11.5px;
    line-height: 1.45;
    color: #6a7a90;
    white-space: normal;
}

.cv-contact-search-highlight {
    display: inline;
    padding: 0 2px;
    background: #ffe066;
    color: #2c2c2c;
    border-radius: 3px;
    font-weight: 700;
}

.cv-contact-selector-dropdown .select2-results__option--highlighted[aria-selected] .cv-contact-search-result__title,
.cv-contact-selector-dropdown .select2-results__option--highlighted[aria-selected] .cv-contact-search-result__meta {
    color: #fff;
}

.cv-contact-selector-dropdown .select2-results__option--highlighted[aria-selected] .cv-contact-search-highlight {
    background: #ffe066;
    color: #24303f;
}

body:not(.pos-redesign) .content input[type="file"] {
    display: block;
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px dashed #b8cae5;
    border-radius: 10px;
    background: #f7fbff;
    color: #4a5f7f;
}

body:not(.pos-redesign) .content .help-block {
    margin-top: 6px;
    margin-bottom: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--amg-muted) !important;
    font-weight: 600;
}

body:not(.pos-redesign) .content .checkbox,
body:not(.pos-redesign) .content .radio {
    margin: 0;
}

body:not(.pos-redesign) .content .checkbox label,
body:not(.pos-redesign) .content .radio label {
    color: #4b5d79 !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}

body:not(.pos-redesign) .content .table-responsive {
    border: 1px solid #cddded;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

body:not(.pos-redesign) .content .table {
    margin-bottom: 0;
}

body:not(.pos-redesign) .content .table > thead > tr > th {
    background: linear-gradient(180deg, #5e97db 0%, #4d86cc 42%, #3e77be 100%) !important;
    color: #fff !important;
    border-bottom: 0 !important;
    border-top: 0 !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    line-height: 1.35;
    padding: 10px 10px;
    vertical-align: middle;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(33, 88, 155, 0.3);
}

body:not(.pos-redesign) .content .table > thead > tr > th + th {
    border-left: 1px solid rgba(255, 255, 255, 0.78) !important;
}

body:not(.pos-redesign) .content .table > tbody > tr > td {
    color: var(--amg-text) !important;
    border-top: 1px solid var(--amg-card-border-soft) !important;
    border-right: 1px solid #edf2f9 !important;
    background: #fff;
    font-size: 12px;
    font-weight: 400;
    padding: 9px 10px;
    vertical-align: top;
}

body:not(.pos-redesign) .content .table > tbody > tr > td:last-child {
    border-right: 0 !important;
}

body:not(.pos-redesign) .content .table > tbody > tr:hover > td {
    background: #f6faff;
}

/* Modern tab system for all in-page tabs */
body:not(.pos-redesign) .content .nav-tabs-custom,
body:not(.pos-redesign) .content .tabbable-custom,
body:not(.pos-redesign) .content .tabbable {
    border: 1px solid #cddded !important;
    border-radius: 16px !important;
    overflow: hidden;
    background: linear-gradient(180deg, #f7fbff 0%, #eef5ff 100%) !important;
    box-shadow: 0 10px 24px rgba(34, 76, 138, 0.1);
}

body:not(.pos-redesign) .content .nav-tabs-custom > .nav-tabs,
body:not(.pos-redesign) .content .nav.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 !important;
    padding: 10px 12px 8px;
    border-bottom: 1px solid #dbe7f7 !important;
    background: rgba(237, 246, 255, 0.9);
}

body:not(.pos-redesign) .content .nav-tabs-custom > .nav-tabs > li,
body:not(.pos-redesign) .content .nav.nav-tabs > li {
    float: none !important;
    margin: 0 !important;
    border-top: 0 !important;
}

body:not(.pos-redesign) .content .nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: transparent !important;
}

body:not(.pos-redesign) .content .nav-tabs-custom > .nav-tabs > li > a,
body:not(.pos-redesign) .content .nav.nav-tabs > li > a {
    border: 1px solid #c3d6f0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #4b5f7f !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1px;
    padding: 9px 15px !important;
    margin: 0 !important;
    line-height: 1.3;
    transition: all 0.2s ease;
}

body:not(.pos-redesign) .content .nav-tabs-custom > .nav-tabs > li > a:hover,
body:not(.pos-redesign) .content .nav.nav-tabs > li > a:hover {
    background: #eaf3ff !important;
    color: #2d5eaa !important;
    border-color: #a9c5eb !important;
}

body:not(.pos-redesign) .content .nav-tabs-custom > .nav-tabs > li.active > a,
body:not(.pos-redesign) .content .nav-tabs-custom > .nav-tabs > li.active > a:hover,
body:not(.pos-redesign) .content .nav-tabs-custom > .nav-tabs > li.active > a:focus,
body:not(.pos-redesign) .content .nav.nav-tabs > li.active > a,
body:not(.pos-redesign) .content .nav.nav-tabs > li.active > a:hover,
body:not(.pos-redesign) .content .nav.nav-tabs > li.active > a:focus {
    background: linear-gradient(103deg, var(--amg-primary-dark) 0%, var(--amg-primary) 58%, var(--amg-primary-light) 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 8px 18px rgba(33, 118, 206, 0.28);
}

body:not(.pos-redesign) .content .nav-tabs-custom > .nav-tabs > li > a i,
body:not(.pos-redesign) .content .nav.nav-tabs > li > a i {
    color: inherit !important;
    margin-right: 6px;
}

body:not(.pos-redesign) .content .nav-tabs-custom > .tab-content,
body:not(.pos-redesign) .content .tab-content {
    border-top: 0 !important;
    background: #ffffff;
}

body:not(.pos-redesign) .content .nav-tabs.nav-justified > li,
body:not(.pos-redesign) .content .nav-tabs.nav-justified > li > a {
    width: auto !important;
}

/* Shared module submenu navbar (Essentials/HRM/HMS/Repair/etc.) */
body:not(.pos-redesign) nav.navbar-default.tw-transition-all.tw-duration-5000.tw-shrink-0.tw-rounded-2xl {
    border: 1px solid #cddded !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, #f7fbff 0%, #eef5ff 100%) !important;
    box-shadow: 0 10px 24px rgba(34, 76, 138, 0.1);
    overflow: hidden;
}

body:not(.pos-redesign) nav.navbar-default.tw-transition-all.tw-duration-5000.tw-shrink-0.tw-rounded-2xl .navbar-brand {
    color: #3f5679 !important;
    font-weight: 700;
}

body:not(.pos-redesign) nav.navbar-default.tw-transition-all.tw-duration-5000.tw-shrink-0.tw-rounded-2xl .navbar-brand i {
    color: var(--amg-primary) !important;
}

body:not(.pos-redesign) nav.navbar-default.tw-transition-all.tw-duration-5000.tw-shrink-0.tw-rounded-2xl .navbar-collapse {
    border-top: 0 !important;
}

@media (min-width: 768px) {
    body:not(.pos-redesign) nav.navbar-default.tw-transition-all.tw-duration-5000.tw-shrink-0.tw-rounded-2xl .nav.navbar-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 10px 0 10px 10px;
    }

    body:not(.pos-redesign) nav.navbar-default.tw-transition-all.tw-duration-5000.tw-shrink-0.tw-rounded-2xl .nav.navbar-nav > li {
        float: none !important;
        margin: 0 !important;
    }

    body:not(.pos-redesign) nav.navbar-default.tw-transition-all.tw-duration-5000.tw-shrink-0.tw-rounded-2xl .nav.navbar-nav > li > a {
        border: 1px solid #c3d6f0 !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        color: #4b5f7f !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        letter-spacing: 0.1px;
        line-height: 1.3;
        padding: 9px 15px !important;
        transition: all 0.2s ease;
    }

    body:not(.pos-redesign) nav.navbar-default.tw-transition-all.tw-duration-5000.tw-shrink-0.tw-rounded-2xl .nav.navbar-nav > li > a:hover {
        background: #eaf3ff !important;
        color: #2d5eaa !important;
        border-color: #a9c5eb !important;
    }

    body:not(.pos-redesign) nav.navbar-default.tw-transition-all.tw-duration-5000.tw-shrink-0.tw-rounded-2xl .nav.navbar-nav > li.active > a,
    body:not(.pos-redesign) nav.navbar-default.tw-transition-all.tw-duration-5000.tw-shrink-0.tw-rounded-2xl .nav.navbar-nav > li.active > a:hover,
    body:not(.pos-redesign) nav.navbar-default.tw-transition-all.tw-duration-5000.tw-shrink-0.tw-rounded-2xl .nav.navbar-nav > li.active > a:focus {
        background: linear-gradient(103deg, var(--amg-primary-dark) 0%, var(--amg-primary) 58%, var(--amg-primary-light) 100%) !important;
        color: #ffffff !important;
        border-color: transparent !important;
        box-shadow: 0 8px 18px rgba(33, 118, 206, 0.28);
    }
}

/* Additional legacy module navbars that don't use the Tailwind utility chain */
body:not(.pos-redesign) .content section.no-print > nav.navbar-default,
body:not(.pos-redesign) .content section.no-print > nav.navbar.navbar-default,
body:not(.pos-redesign) .content nav.navbar-default:not(.navbar-fixed-top),
body:not(.pos-redesign) .content nav.navbar.navbar-default:not(.navbar-fixed-top) {
    border: 1px solid #cddded !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, #f7fbff 0%, #eef5ff 100%) !important;
    box-shadow: 0 10px 24px rgba(34, 76, 138, 0.1);
    overflow: hidden;
}

body:not(.pos-redesign) .content section.no-print > nav.navbar-default .navbar-brand,
body:not(.pos-redesign) .content section.no-print > nav.navbar.navbar-default .navbar-brand,
body:not(.pos-redesign) .content nav.navbar-default .navbar-brand,
body:not(.pos-redesign) .content nav.navbar.navbar-default .navbar-brand {
    color: #3f5679 !important;
    font-weight: 700;
}

body:not(.pos-redesign) .content section.no-print > nav.navbar-default .navbar-brand i,
body:not(.pos-redesign) .content section.no-print > nav.navbar.navbar-default .navbar-brand i,
body:not(.pos-redesign) .content nav.navbar-default .navbar-brand i,
body:not(.pos-redesign) .content nav.navbar.navbar-default .navbar-brand i {
    color: var(--amg-primary) !important;
}

@media (min-width: 768px) {
    body:not(.pos-redesign) .content section.no-print > nav.navbar-default .nav.navbar-nav,
    body:not(.pos-redesign) .content section.no-print > nav.navbar.navbar-default .nav.navbar-nav,
    body:not(.pos-redesign) .content nav.navbar-default .nav.navbar-nav,
    body:not(.pos-redesign) .content nav.navbar.navbar-default .nav.navbar-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 10px 0 10px 10px;
    }

    body:not(.pos-redesign) .content section.no-print > nav.navbar-default .nav.navbar-nav > li,
    body:not(.pos-redesign) .content section.no-print > nav.navbar.navbar-default .nav.navbar-nav > li,
    body:not(.pos-redesign) .content nav.navbar-default .nav.navbar-nav > li,
    body:not(.pos-redesign) .content nav.navbar.navbar-default .nav.navbar-nav > li {
        float: none !important;
        margin: 0 !important;
    }

    body:not(.pos-redesign) .content section.no-print > nav.navbar-default .nav.navbar-nav > li > a,
    body:not(.pos-redesign) .content section.no-print > nav.navbar.navbar-default .nav.navbar-nav > li > a,
    body:not(.pos-redesign) .content nav.navbar-default .nav.navbar-nav > li > a,
    body:not(.pos-redesign) .content nav.navbar.navbar-default .nav.navbar-nav > li > a {
        border: 1px solid #c3d6f0 !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        color: #4b5f7f !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        letter-spacing: 0.1px;
        line-height: 1.3;
        padding: 9px 15px !important;
        transition: all 0.2s ease;
    }

    body:not(.pos-redesign) .content section.no-print > nav.navbar-default .nav.navbar-nav > li > a:hover,
    body:not(.pos-redesign) .content section.no-print > nav.navbar.navbar-default .nav.navbar-nav > li > a:hover,
    body:not(.pos-redesign) .content nav.navbar-default .nav.navbar-nav > li > a:hover,
    body:not(.pos-redesign) .content nav.navbar.navbar-default .nav.navbar-nav > li > a:hover {
        background: #eaf3ff !important;
        color: #2d5eaa !important;
        border-color: #a9c5eb !important;
    }

    body:not(.pos-redesign) .content section.no-print > nav.navbar-default .nav.navbar-nav > li.active > a,
    body:not(.pos-redesign) .content section.no-print > nav.navbar-default .nav.navbar-nav > li.active > a:hover,
    body:not(.pos-redesign) .content section.no-print > nav.navbar-default .nav.navbar-nav > li.active > a:focus,
    body:not(.pos-redesign) .content section.no-print > nav.navbar.navbar-default .nav.navbar-nav > li.active > a,
    body:not(.pos-redesign) .content section.no-print > nav.navbar.navbar-default .nav.navbar-nav > li.active > a:hover,
    body:not(.pos-redesign) .content section.no-print > nav.navbar.navbar-default .nav.navbar-nav > li.active > a:focus,
    body:not(.pos-redesign) .content nav.navbar-default .nav.navbar-nav > li.active > a,
    body:not(.pos-redesign) .content nav.navbar-default .nav.navbar-nav > li.active > a:hover,
    body:not(.pos-redesign) .content nav.navbar-default .nav.navbar-nav > li.active > a:focus,
    body:not(.pos-redesign) .content nav.navbar.navbar-default .nav.navbar-nav > li.active > a,
    body:not(.pos-redesign) .content nav.navbar.navbar-default .nav.navbar-nav > li.active > a:hover,
    body:not(.pos-redesign) .content nav.navbar.navbar-default .nav.navbar-nav > li.active > a:focus {
        background: linear-gradient(103deg, var(--amg-primary-dark) 0%, var(--amg-primary) 58%, var(--amg-primary-light) 100%) !important;
        color: #ffffff !important;
        border-color: transparent !important;
        box-shadow: 0 8px 18px rgba(33, 118, 206, 0.28);
    }
}

/* Approved status-chip system (replaces hard solid status blocks) */
body:not(.pos-redesign) .content .label,
body:not(.pos-redesign) .content .badge,
body:not(.pos-redesign) .content .payment-status-label {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 999px !important;
    padding: 4px 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    border: 1px solid #c9dcf5 !important;
    background: #eaf3ff !important;
    color: #2b6fb8 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

body:not(.pos-redesign) .content .label-success,
body:not(.pos-redesign) .content .badge-success,
body:not(.pos-redesign) .content .label.bg-green,
body:not(.pos-redesign) .content .badge.bg-green,
body:not(.pos-redesign) .content .label.bg-light-green,
body:not(.pos-redesign) .content .badge.bg-light-green {
    border-color: #84d7a6 !important;
    background: #e9fbf1 !important;
    color: #198a4e !important;
}

body:not(.pos-redesign) .content .label-customized-yes {
    border-color: #84d7a6 !important;
    background: #e9fbf1 !important;
    color: #198a4e !important;
}

body:not(.pos-redesign) .content .label-info,
body:not(.pos-redesign) .content .badge-info,
body:not(.pos-redesign) .content .label.bg-light-blue,
body:not(.pos-redesign) .content .badge.bg-light-blue,
body:not(.pos-redesign) .content .label.bg-aqua,
body:not(.pos-redesign) .content .badge.bg-aqua {
    border-color: #b8d5f6 !important;
    background: #eaf2ff !important;
    color: #2a6ab0 !important;
}

body:not(.pos-redesign) .content .label-danger,
body:not(.pos-redesign) .content .badge-danger,
body:not(.pos-redesign) .content .label.bg-red,
body:not(.pos-redesign) .content .badge.bg-red {
    border-color: #f2a5bc !important;
    background: #ffe9ef !important;
    color: #cf2f61 !important;
}

body:not(.pos-redesign) .content .label-warning,
body:not(.pos-redesign) .content .badge-warning,
body:not(.pos-redesign) .content .label.bg-yellow,
body:not(.pos-redesign) .content .badge.bg-yellow {
    border-color: #efcf88 !important;
    background: #fff5dc !important;
    color: #a06d06 !important;
}

body:not(.pos-redesign) .content .dataTables_wrapper .dataTables_filter {
    margin: 8px 0 12px;
}

body:not(.pos-redesign) .content .dataTables_wrapper .dataTables_filter label {
    color: #5b6b82 !important;
    font-weight: 600;
}

body:not(.pos-redesign) .content .dataTables_wrapper .dataTables_filter input {
    height: 42px;
    border-radius: 10px !important;
    border: 1px solid #c6d7ea !important;
    padding: 8px 12px;
}

/* Global DataTable export/action buttons with approved gradient style */
body:not(.pos-redesign) .content .dataTables_wrapper .dt-buttons > .btn,
body:not(.pos-redesign) .content .dataTables_wrapper .dt-buttons > .dt-button,
body:not(.pos-redesign) .content .dataTables_wrapper .dt-buttons > [class*="buttons-"] {
    border: 1px solid #1f7adf !important;
    border-radius: 12px !important;
    color: #1f7adf !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    min-height: 36px;
    padding: 8px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: 0 8px 16px rgba(31, 122, 223, 0.16) !important;
    background: #ffffff !important;
    background-image: none !important;
    margin: 0 6px 6px 0 !important;
}

body:not(.pos-redesign) .content .dataTables_wrapper .dt-buttons > .btn *,
body:not(.pos-redesign) .content .dataTables_wrapper .dt-buttons > .dt-button *,
body:not(.pos-redesign) .content .dataTables_wrapper .dt-buttons > [class*="buttons-"] * {
    color: #1f7adf !important;
}

body:not(.pos-redesign) .content .dataTables_wrapper .dt-buttons > .btn:hover,
body:not(.pos-redesign) .content .dataTables_wrapper .dt-buttons > .dt-button:hover,
body:not(.pos-redesign) .content .dataTables_wrapper .dt-buttons > [class*="buttons-"]:hover {
    background: #eef6ff !important;
    transform: translateY(-1px);
}

body:not(.pos-redesign) .content .dataTables_wrapper .dataTables_info {
    color: #5d6c83 !important;
    font-weight: 600;
}

/* Shared page-form helpers for create/edit screens */
body:not(.pos-redesign) .content .app-section-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    margin: 0 0 11px;
    border-radius: 999px;
    border: 1px solid #bfd8ff;
    background: linear-gradient(180deg, #f2f8ff 0%, #e8f2ff 100%);
    color: #1f66d1 !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
    box-shadow: 0 4px 12px rgba(31, 102, 209, 0.12);
}

body:not(.pos-redesign) .content .app-form-tight .form-group {
    margin-bottom: 8px;
}

body:not(.pos-redesign) .content .app-submit-row {
    margin-top: 10px;
    text-align: right;
}

body:not(.pos-redesign) .content .app-submit-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #c6d8ef;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 -8px 20px rgba(25, 53, 99, 0.08);
}

body:not(.pos-redesign) .content .app-submit-wrap .btn,
body:not(.pos-redesign) .content .app-submit-wrap .tw-dw-btn {
    min-width: 118px;
}

body:not(.pos-redesign) .content .btn-modal,
body:not(.pos-redesign) .content .btn.btn-primary,
body:not(.pos-redesign) .content .tw-dw-btn-primary {
    border-radius: 999px !important;
}

/* Normalize all "Add" gradient buttons used across modules to approved shape/size */
body:not(.pos-redesign) .content .tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500 {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    min-width: 102px;
    padding: 0 16px !important;
    border-radius: 999px !important;
    border: 0 !important;
    color: #ffffff !important;
    background: linear-gradient(100deg, var(--amg-primary-dark) 0%, var(--amg-primary) 45%, var(--amg-primary-light) 100%) !important;
    box-shadow: 0 10px 22px rgba(31, 122, 223, 0.26);
    font-size: 15px !important;
    font-weight: 700 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body:not(.pos-redesign) .content .tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500:hover,
body:not(.pos-redesign) .content .tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500:focus {
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(31, 122, 223, 0.3);
}

body:not(.pos-redesign) .content .tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500 svg {
    width: 20px !important;
    height: 20px !important;
}

body:not(.pos-redesign) .content .tw-dw-btn-outline,
body:not(.pos-redesign) .content .btn-default,
body:not(.pos-redesign) .content .btn.btn-sm.btn-default {
    border: 1px solid #c5d6ea !important;
    border-radius: 11px !important;
    background: #fff !important;
    color: #4e5b71 !important;
    font-weight: 500 !important;
    font-size: 12px !important;
}

body:not(.pos-redesign) .content .tw-dw-btn-outline:hover,
body:not(.pos-redesign) .content .btn-default:hover,
body:not(.pos-redesign) .content .btn-default:focus {
    border-color: var(--amg-primary) !important;
    background: #eff6ff !important;
    color: #284d80 !important;
}

body:not(.pos-redesign) .modal-dialog:not(.modal-danger) .modal-content {
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--amg-shadow-lg);
}

body:not(.pos-redesign) .modal-dialog:not(.modal-danger) .modal-header {
    padding: 15px 20px;
    border-bottom: 0;
    background: linear-gradient(135deg, var(--amg-primary-dark) 0%, var(--amg-primary-light) 100%);
}

body:not(.pos-redesign) .modal-dialog:not(.modal-danger) .modal-title {
    color: #fff !important;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.2px;
}

body:not(.pos-redesign) .modal-dialog:not(.modal-danger) .modal-header .close {
    color: #fff !important;
    opacity: 0.95;
    text-shadow: none;
    font-size: 30px;
    line-height: 1;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.17);
    margin-top: -2px;
}

body:not(.pos-redesign) .modal-dialog:not(.modal-danger) .modal-body {
    background: var(--amg-page-bg);
    padding: 16px 16px 10px;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}

body:not(.pos-redesign) .modal-dialog:not(.modal-danger) .modal-body .form-group {
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid var(--amg-card-border);
    border-radius: 14px;
    padding: 10px 12px 11px;
    box-shadow: var(--amg-shadow-sm);
}

body:not(.pos-redesign) .modal-dialog:not(.modal-danger) .modal-body .col-sm-12 > h4,
body:not(.pos-redesign) .modal-dialog:not(.modal-danger) .modal-body .col-md-12 > h4 {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    margin: 6px 0 11px;
    border-radius: 999px;
    border: 1px solid #c0d9ff;
    background: linear-gradient(180deg, #f2f8ff 0%, #e8f2ff 100%);
    color: #1f66d1 !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
    box-shadow: 0 3px 10px rgba(31, 102, 209, 0.12);
}

body:not(.pos-redesign) .modal-dialog:not(.modal-danger) .modal-body > h4 {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    margin: 6px 0 11px;
    border-radius: 999px;
    border: 1px solid #c0d9ff;
    background: linear-gradient(180deg, #f2f8ff 0%, #e8f2ff 100%);
    color: #1f66d1 !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
    box-shadow: 0 3px 10px rgba(31, 102, 209, 0.12);
}

body:not(.pos-redesign) .modal-dialog:not(.modal-danger) .modal-footer {
    background: #fff;
    border-top: 1px solid #d7e4f4;
    padding: 12px 16px 13px;
}

body:not(.pos-redesign) .modal-dialog:not(.modal-danger) .modal-footer .btn,
body:not(.pos-redesign) .modal-dialog:not(.modal-danger) .modal-footer .tw-dw-btn {
    min-width: 108px;
    border-radius: 11px !important;
    font-weight: 700;
}

/* Display card style reference (attached by user) */
body:not(.pos-redesign) .app-display-card,
body:not(.pos-redesign) .invoice-layout-card {
    border: 1px solid #c6daef !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%) !important;
    box-shadow: 0 8px 20px rgba(32, 61, 114, 0.08) !important;
    padding: 14px 14px !important;
}

body:not(.pos-redesign) .app-display-card .display-title,
body:not(.pos-redesign) .invoice-layout-card .layout-name {
    color: #2f4d75 !important;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

body:not(.pos-redesign) .app-display-card .display-title i,
body:not(.pos-redesign) .invoice-layout-card .layout-name i {
    color: var(--amg-primary) !important;
    font-size: 20px;
}

body:not(.pos-redesign) .app-chip,
body:not(.pos-redesign) .invoice-layout-card .layout-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: #2d5c95;
    background: #e8f2ff;
    border: 1px solid #c8dcf6;
    margin-right: 6px;
}

body:not(.pos-redesign) .app-chip.success,
body:not(.pos-redesign) .invoice-layout-card .layout-chip.default {
    color: #197b47 !important;
    border-color: #8ad8b0 !important;
    background: #e9fff2 !important;
}

body:not(.pos-redesign) .app-display-card .display-meta,
body:not(.pos-redesign) .invoice-layout-card .layout-locations {
    margin-top: 6px;
    color: #5f728e !important;
    font-size: 14px;
    line-height: 1.45;
}

body:not(.pos-redesign) .app-display-card .display-action,
body:not(.pos-redesign) .invoice-layout-card .layout-edit-btn {
    margin-top: 12px;
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    border-radius: 12px !important;
    border: 1px solid #bfd6f3 !important;
    color: #355986 !important;
    background: #fff !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

body:not(.pos-redesign) .app-display-card .display-action:hover,
body:not(.pos-redesign) .invoice-layout-card .layout-edit-btn:hover {
    background: #eaf4ff !important;
    color: #1f4f97 !important;
    border-color: #90b9e8 !important;
}

.product-search-selector-dropdown .select2-search--dropdown {
    padding: 10px 12px 0;
}

.accounts-dropdown-shell--open {
    position: relative;
    z-index: 260;
    overflow: visible;
}

.smart-accounts-dropdown {
    border: 1px solid #c9daf1;
    border-radius: 14px;
    margin-top: 8px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(31, 79, 151, 0.18);
    z-index: 261;
}

.smart-accounts-dropdown .select2-search--dropdown {
    padding: 10px 12px 0;
}

.smart-accounts-dropdown .select2-search__field {
    width: 100% !important;
    min-height: 40px;
    border: 1px solid #c9daf1;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
}

.smart-accounts-dropdown .select2-results__options {
    padding: 8px 0 10px;
    max-height: 420px !important;
}

.smart-accounts-dropdown .select2-results__option {
    padding: 8px 10px;
}

.smart-account-search-result {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px;
    border-radius: 10px;
    transition: background 0.18s ease, color 0.18s ease;
}

.smart-account-search-result__title {
    color: #324a69;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

.smart-account-search-result__meta {
    color: #8092a8;
    font-size: 12px;
    line-height: 1.3;
}

.smart-account-search-highlight {
    display: inline;
    padding: 0 2px;
    background: #ffe066;
    color: #223246;
    border-radius: 3px;
    font-weight: 700;
}

.smart-accounts-dropdown .select2-results__option--highlighted[aria-selected] .smart-account-search-result {
    background: linear-gradient(135deg, #1f7adf, #20a4e4);
}

.smart-accounts-dropdown .select2-results__option--highlighted[aria-selected] .smart-account-search-result__title,
.smart-accounts-dropdown .select2-results__option--highlighted[aria-selected] .smart-account-search-result__meta {
    color: #fff;
}

.smart-accounts-dropdown .select2-results__option--highlighted[aria-selected] .smart-account-search-highlight {
    background: #ffe066;
    color: #24303f;
}

.product-search-selector-dropdown .select2-search__field {
    width: 100% !important;
    min-height: 40px;
    border: 1px solid #c9daf1;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
}

.product-search-selector-dropdown .select2-results__options {
    padding: 8px 0 10px;
    max-height: 440px !important;
}

.product-search-selector-dropdown .select2-results__option {
    padding: 10px 14px;
}

.product-search-autocomplete.ui-autocomplete {
    max-height: 440px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 2060 !important;
    background: #fff;
    border: 1px solid #c9daf1;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(31, 79, 151, 0.18);
    padding: 8px 0;
}

.purchase-product-search-shell {
    position: relative;
    z-index: 2;
}

.purchase-product-search-shell.purchase-product-search-shell--open {
    z-index: 140;
}

@media (max-width: 767px) {
    .mobile-card-table-host {
        overflow-x: visible !important;
        border: 0;
    }

    .mobile-card-table-host .dataTables_scroll,
    .mobile-card-table-host .dataTables_scrollHead,
    .mobile-card-table-host .dataTables_scrollHeadInner,
    .mobile-card-table-host .dataTables_scrollBody {
        width: 100% !important;
    }

    .mobile-card-table-host .dataTables_scrollHead,
    .mobile-card-table-host .dataTables_scrollFoot,
    .mobile-card-table-host table.js-mobile-card-table thead,
    .mobile-card-table-host table.js-mobile-card-table tfoot {
        display: none !important;
    }

    .mobile-card-table-host .dataTables_scrollBody {
        overflow: visible !important;
        border: 0 !important;
        max-height: none !important;
        height: auto !important;
    }

    .mobile-card-table-host table.js-mobile-card-table,
    .mobile-card-table-host table.js-mobile-card-table tbody,
    .mobile-card-table-host table.js-mobile-card-table tr,
    .mobile-card-table-host table.js-mobile-card-table td {
        display: block;
        width: 100% !important;
    }

    .mobile-card-table-host table.js-mobile-card-table {
        border: 0;
        background: transparent;
    }

    .mobile-card-table-host table.js-mobile-card-table tbody tr {
        margin-bottom: 14px;
        border: 1px solid #dbe6f5;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 10px 24px rgba(31, 102, 209, 0.08);
        overflow: hidden;
    }

    .mobile-card-table-host table.js-mobile-card-table tbody td {
        display: grid;
        grid-template-columns: minmax(110px, 38%) minmax(0, 1fr);
        gap: 12px;
        align-items: start;
        padding: 10px 14px;
        border-top: 1px solid #edf2f8;
        border-left: 0 !important;
        white-space: normal !important;
        word-break: break-word;
    }

    .mobile-card-table-host table.js-mobile-card-table tbody td:first-child {
        border-top: 0;
    }

    .mobile-card-table-host table.js-mobile-card-table tbody td::before {
        content: attr(data-label);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.2px;
        color: #56718f;
        text-transform: uppercase;
    }

    .mobile-card-table-host table.js-mobile-card-table tbody td.dataTables_empty {
        display: block;
        padding: 18px 14px;
        text-align: center;
        color: #60758f;
    }

    .mobile-card-table-host table.js-mobile-card-table tbody td.dataTables_empty::before {
        display: none;
    }

    .mobile-card-table-host .dataTables_info,
    .mobile-card-table-host .dataTables_paginate {
        float: none !important;
        text-align: center;
    }

    .mobile-card-table-host .dataTables_paginate {
        margin-top: 10px;
    }
}

body:not(.pos-redesign) .content .purchase-product-search-box,
body:not(.pos-redesign) .content .purchase-product-search-box > .box-body,
body:not(.pos-redesign) .content .purchase-product-search-box > .panel-body {
    overflow: visible !important;
}

body:not(.pos-redesign) .content .purchase-product-search-box {
    position: relative;
    z-index: 30;
    transition: margin-bottom 0.18s ease, z-index 0.18s ease;
}

body:not(.pos-redesign) .content .purchase-product-search-box.purchase-product-search-box--open {
    z-index: 120;
}

.purchase-product-search-dropdown {
    position: absolute !important;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    list-style: none;
    display: none;
    z-index: 5000 !important;
}

.purchase-product-search-dropdown .purchase-product-search-item {
    margin: 0;
    padding: 0 6px;
    cursor: pointer;
    border-top: 1px solid #dbe7f5;
}

.purchase-product-search-dropdown .purchase-product-search-item:first-child {
    border-top: 0;
}

.purchase-product-search-dropdown .purchase-product-search-item .product-search-result {
    border-radius: 0;
}

.purchase-product-search-dropdown .purchase-product-search-item--active .product-search-result,
.purchase-product-search-dropdown .purchase-product-search-item:hover .product-search-result {
    background: linear-gradient(135deg, #1f7adf, #20a4e4);
}

.purchase-product-search-dropdown .purchase-product-search-item--active .product-search-result__title,
.purchase-product-search-dropdown .purchase-product-search-item--active .product-search-result__meta,
.purchase-product-search-dropdown .purchase-product-search-item:hover .product-search-result__title,
.purchase-product-search-dropdown .purchase-product-search-item:hover .product-search-result__meta {
    color: #fff;
}

.purchase-product-search-dropdown .purchase-product-search-item--active .product-search-result__badge,
.purchase-product-search-dropdown .purchase-product-search-item:hover .product-search-result__badge {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.purchase-product-search-dropdown .purchase-product-search-item--active .product-search-highlight,
.purchase-product-search-dropdown .purchase-product-search-item:hover .product-search-highlight {
    background: #ffe066;
    color: #24303f;
}

.product-search-autocomplete .ui-menu-item {
    padding: 0 6px;
}

.product-search-autocomplete .ui-menu-item-wrapper,
.product-search-autocomplete .ui-menu-item > div,
.product-search-autocomplete .ui-menu-item > a {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
}

.product-search-autocomplete .ui-state-active,
.product-search-autocomplete .ui-state-focus {
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.product-search-result {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 12px;
    white-space: normal;
}

.product-search-result__title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.product-search-result__title {
    font-size: 13.5px;
    font-weight: 700;
    color: #23364d;
    line-height: 1.35;
}

.product-search-result__meta {
    font-size: 11.5px;
    line-height: 1.45;
    color: #6a7a90;
}

.product-search-result__badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    background: #eaf4ff;
    color: #1f4f97;
}

.product-search-result__badge--danger {
    background: #ffe9e9;
    color: #c92a2a;
}

.product-search-result--disabled .product-search-result__title,
.product-search-result--disabled .product-search-result__meta {
    color: #9aa8b7;
}

.product-search-highlight {
    display: inline;
    padding: 0 2px;
    background: #ffe066;
    color: #2c2c2c;
    border-radius: 3px;
    font-weight: 700;
}

.product-search-selector-dropdown .select2-results__option--highlighted[aria-selected] .product-search-result,
.product-search-autocomplete .ui-state-active .product-search-result,
.product-search-autocomplete .ui-state-focus .product-search-result {
    background: linear-gradient(135deg, #1f7adf, #20a4e4);
}

.product-search-selector-dropdown .select2-results__option--highlighted[aria-selected] .product-search-result__title,
.product-search-selector-dropdown .select2-results__option--highlighted[aria-selected] .product-search-result__meta,
.product-search-autocomplete .ui-state-active .product-search-result__title,
.product-search-autocomplete .ui-state-active .product-search-result__meta,
.product-search-autocomplete .ui-state-focus .product-search-result__title,
.product-search-autocomplete .ui-state-focus .product-search-result__meta {
    color: #fff;
}

.product-search-selector-dropdown .select2-results__option--highlighted[aria-selected] .product-search-result__badge,
.product-search-autocomplete .ui-state-active .product-search-result__badge,
.product-search-autocomplete .ui-state-focus .product-search-result__badge {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.product-search-selector-dropdown .select2-results__option--highlighted[aria-selected] .product-search-highlight,
.product-search-autocomplete .ui-state-active .product-search-highlight,
.product-search-autocomplete .ui-state-focus .product-search-highlight {
    background: #ffe066;
    color: #24303f;
}

@media (max-width: 767px) {
    body:not(.pos-redesign) .content-header h1 small {
        display: block;
        margin-left: 0;
        margin-top: 4px;
    }

    body:not(.pos-redesign) .content .box > .box-header .box-title {
        font-size: 20px;
    }

    body:not(.pos-redesign) .content .box > .box-body,
    body:not(.pos-redesign) .content .nav-tabs-custom > .tab-content {
        padding: 9px 10px 10px;
    }

    body:not(.pos-redesign) .content .form-group {
        padding: 9px 10px 10px;
        margin-bottom: 8px;
    }

    body:not(.pos-redesign) .content .app-section-pill {
        font-size: 12px;
        margin-bottom: 9px;
    }

    body:not(.pos-redesign) .content .app-submit-wrap {
        padding: 10px;
        justify-content: stretch;
    }

    body:not(.pos-redesign) .content .app-submit-wrap .btn,
    body:not(.pos-redesign) .content .app-submit-wrap .tw-dw-btn {
        width: 100%;
        min-width: 0;
    }

    body:not(.pos-redesign) .modal-dialog:not(.modal-danger) .modal-title {
        font-size: 19px;
    }

    body:not(.pos-redesign) .modal-dialog:not(.modal-danger) .modal-body {
        padding: 12px 12px 8px;
        max-height: calc(100vh - 120px);
    }
}