/* LuxWork ERP visual skin. Business markup, scripts and API contracts stay untouched. */

:root {
    --lux-surface-canvas: #f3f4f6;
    --lux-surface-base: #ffffff;
    --lux-surface-soft: #f8fafc;
    --lux-surface-table: #f7f8fa;
    --lux-surface-active: #eaf3ff;
    --lux-border: #dbe3ee;
    --lux-border-soft: #e5e7eb;
    --lux-border-strong: #bfd2ea;
    --lux-text: #111827;
    --lux-text-soft: #334155;
    --lux-text-muted: #6b7280;
    --lux-text-faint: #94a3b8;
    --lux-primary: #0872e8;
    --lux-primary-hover: #075fc0;
    --lux-primary-soft: #eaf3ff;
    --lux-primary-border: #a8caff;
    --lux-success: #16803c;
    --lux-success-soft: #e9f8ef;
    --lux-success-border: #b8e6c7;
    --lux-warning: #925f00;
    --lux-warning-soft: #fff8e6;
    --lux-warning-border: #f3d58c;
    --lux-danger: #c5161d;
    --lux-danger-soft: #fff0f0;
    --lux-danger-border: #f4b8b8;
    --lux-purple: #6f42c1;
    --lux-purple-soft: #f1ecff;
    --lux-radius: 8px;
    --lux-radius-control: 6px;
    --lux-shadow-panel: 0 1px 2px rgba(15, 23, 42, 0.04);
    --lux-shadow-floating: 0 18px 40px rgba(15, 23, 42, 0.14);
    --lux-focus: 0 0 0 3px rgba(8, 114, 232, 0.12);
    --lux-page-gutter: 0px;
    --lux-content-inset: 14px;
    --lux-table-cell-inset: 12px;
    --lux-aligned-content-inset: calc(var(--lux-content-inset) + var(--lux-table-cell-inset));
    --lux-search-control-height: 38px;
    --lux-search-control-inner-height: 36px;
}

html,
body {
    background: var(--lux-surface-canvas);
    color: var(--lux-text);
    font-size: 13px;
    letter-spacing: 0;
}

body,
button,
input,
select,
textarea,
.btn,
.form-control,
.select2-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    letter-spacing: 0;
}

a {
    color: var(--lux-primary);
}

a:hover,
a:focus {
    color: var(--lux-primary-hover);
}

body.erp-page-scope {
    --erp-font-size-title-xl: 18px;
    --erp-font-size-title: 16px;
    --erp-font-size-body: 13px;
    --erp-font-size-secondary: 12px;
    --erp-font-size-caption: 12px;
    --erp-font-size-kicker: 11px;
    --erp-radius-checkbox: 4px;
    --erp-radius-chip-sm: 6px;
    --erp-radius-control-sm: var(--lux-radius-control);
    --erp-radius-control: var(--lux-radius-control);
    --erp-radius-dropdown: var(--lux-radius);
    --erp-radius-card: var(--lux-radius);
    --erp-radius-modal-panel: var(--lux-radius);
    --erp-radius-editor-shell: var(--lux-radius);
    --erp-radius-pill: 999px;
    --erp-text-page-title-color: var(--lux-text);
    --erp-text-card-title-color: var(--lux-text);
    --erp-text-modal-title-color: var(--lux-text);
    --erp-text-section-title-color: var(--lux-text);
    --erp-text-entity-title-color: var(--lux-text);
    --erp-text-body-color: var(--lux-text-soft);
    --erp-text-table-head-color: #475569;
    --erp-text-table-body-color: var(--lux-text-soft);
    --erp-text-label-color: var(--lux-text-muted);
    --erp-text-desc-color: var(--lux-text-muted);
    --erp-text-meta-color: #64748b;
    --erp-text-kicker-color: var(--lux-primary);
    --erp-text-pill-color: #475569;
    --erp-text-action-color: var(--lux-primary);
    --erp-text-action-hover-color: var(--lux-primary-hover);
    --erp-text-action-danger-color: var(--lux-danger);
    --erp-text-action-danger-hover-color: #a41218;
    --erp-color-surface-base: var(--lux-surface-base);
    --erp-color-surface-canvas: var(--lux-surface-canvas);
    --erp-color-surface-panel: var(--lux-surface-soft);
    --erp-color-surface-soft: var(--lux-primary-soft);
    --erp-color-surface-table-head: var(--lux-surface-table);
    --erp-color-surface-accent: var(--lux-primary-soft);
    --erp-color-surface-danger-soft: var(--lux-danger-soft);
    --erp-color-surface-success: var(--lux-success-soft);
    --erp-color-surface-warning: var(--lux-warning-soft);
    --erp-color-border-card: var(--lux-border);
    --erp-color-border-soft: var(--lux-border-soft);
    --erp-color-border-muted: var(--lux-border-soft);
    --erp-color-border-import: var(--lux-border-strong);
    --erp-color-border-button: var(--lux-primary-border);
    --erp-color-border-chip: var(--lux-border-soft);
    --erp-color-border-brand-soft: var(--lux-primary-border);
    --erp-color-border-success-soft: var(--lux-success-border);
    --erp-color-border-warning-soft: var(--lux-warning-border);
    --erp-color-border-danger-soft: var(--lux-danger-border);
    --erp-color-border-danger: var(--lux-danger);
    --erp-color-icon-search: rgba(8, 114, 232, 0.72);
    --erp-color-brand-primary: var(--lux-primary);
    --erp-color-brand-primary-hover: var(--lux-primary-hover);
    --erp-color-brand-danger: var(--lux-danger);
    --erp-color-brand-danger-hover: #a41218;
    --erp-color-neutral-strong: var(--lux-primary);
    --erp-color-neutral-action: var(--lux-primary);
    --erp-color-status-success-bg: var(--lux-success-soft);
    --erp-color-status-warn-bg: var(--lux-warning-soft);
    --erp-color-action-success: var(--lux-success);
    --erp-color-action-warning: var(--lux-warning);
    --erp-shadow-card: var(--lux-shadow-panel);
    --erp-shadow-card-soft: var(--lux-shadow-panel);
    --erp-shadow-floating: var(--lux-shadow-floating);
    --erp-shadow-brand: none;
    --erp-shadow-neutral-hover: none;
    --erp-shadow-field-inset-highlight: none;
    --erp-shadow-field-inset-soft: none;
    --erp-shadow-danger-soft: none;
    --erp-shadow-delete: var(--lux-shadow-floating);
    --erp-overlay-modal: rgba(15, 23, 42, 0.46);
    --erp-field-border: var(--lux-border);
    --erp-field-bg: var(--lux-surface-base);
    --erp-field-color: var(--lux-text-soft);
    --erp-field-placeholder: var(--lux-text-faint);
    --erp-field-focus-border: var(--lux-primary);
    --erp-field-focus-shadow: var(--lux-focus);
    --erp-field-readonly-bg: var(--lux-surface-soft);
    --erp-field-readonly-color: var(--lux-text-muted);
    --erp-page-modal-field-height: 38px;
    --erp-page-modal-field-radius: var(--lux-radius-control);
    --erp-page-modal-dropdown-radius: var(--lux-radius);
}

.skin-black-light .wrapper,
.content-wrapper,
.right-side,
.main-footer,
body.erp-page-scope .content-wrapper,
body.erp-page-scope.erp-page-editor-frame {
    background: var(--lux-surface-canvas) !important;
}

.skin-black-light .main-sidebar,
.skin-black-light .left-side {
    background: var(--lux-surface-base) !important;
    border-right: 1px solid var(--lux-border);
    box-shadow: none;
}

.skin-black-light .sidebar {
    padding: 10px 8px 14px;
}

.skin-black-light .sidebar::-webkit-scrollbar,
.skin-black-light .sidebar-menu::-webkit-scrollbar,
.content-wrapper::-webkit-scrollbar,
.modal-body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.skin-black-light .sidebar::-webkit-scrollbar-thumb,
.skin-black-light .sidebar-menu::-webkit-scrollbar-thumb,
.content-wrapper::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #cbd5e1;
}

.skin-black-light .sidebar a {
    color: var(--lux-text-soft);
}

.skin-black-light .sidebar-menu > li {
    position: relative;
    margin-bottom: 2px;
}

.skin-black-light .sidebar-menu > li.erp-sidebar-section-start {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--lux-border-soft);
}

.skin-black-light .sidebar-menu > li > a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 0;
    color: var(--lux-text-soft);
    font-size: 13px;
    font-weight: 600;
    transition: background-color 160ms ease, color 160ms ease;
}

.skin-black-light .sidebar-menu > li > a > .fa,
.skin-black-light .sidebar-menu > li > a > .glyphicon,
.skin-black-light .sidebar-menu > li > a > .ion {
    flex: 0 0 18px;
    width: 18px;
    margin: 0;
    font-size: 15px;
    text-align: center;
    color: #64748b;
}

.skin-black-light .sidebar-menu > li > a > img {
    flex: 0 0 18px;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    object-fit: contain;
}

.skin-black-light .sidebar-menu > li:hover > a {
    color: var(--lux-primary-hover);
    background: var(--lux-surface-soft);
    box-shadow: none;
}

.skin-black-light .sidebar-menu > li.active > a,
.skin-black-light .sidebar-menu > li.menu-open > a {
    color: var(--lux-primary);
    background: var(--lux-primary-soft);
    box-shadow: none;
}

.skin-black-light .sidebar-menu > li.active > a::before,
.skin-black-light .sidebar-menu > li.menu-open > a::before {
    content: "";
    position: absolute;
    top: 7px;
    bottom: 7px;
    left: 0;
    width: 3px;
    background: var(--lux-primary);
}

.skin-black-light .sidebar-menu > li:hover > a > .fa,
.skin-black-light .sidebar-menu > li.active > a > .fa,
.skin-black-light .sidebar-menu > li.menu-open > a > .fa,
.skin-black-light .sidebar-menu > li:hover > a > .glyphicon,
.skin-black-light .sidebar-menu > li.active > a > .glyphicon,
.skin-black-light .sidebar-menu > li.menu-open > a > .glyphicon,
.skin-black-light .sidebar-menu > li:hover > a > .ion,
.skin-black-light .sidebar-menu > li.active > a > .ion,
.skin-black-light .sidebar-menu > li.menu-open > a > .ion {
    color: var(--lux-primary);
}

.skin-black-light .sidebar-menu > li > .treeview-menu,
.skin-black-light .treeview-menu .treeview-menu {
    margin: 2px 0 8px 20px;
    padding: 4px 0 4px 12px;
    border: 0;
    border-left: 1px solid var(--lux-border);
    border-radius: 0;
    background: transparent;
}

.skin-black-light .treeview-menu .treeview-menu {
    margin-left: 10px;
    padding-left: 10px;
    border-style: solid;
}

.skin-black-light .treeview-menu > li {
    margin: 0;
}

.skin-black-light .treeview-menu > li > a {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    height: auto;
    padding: 8px 10px;
    border-radius: 0;
    color: var(--lux-text-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
}

.skin-black-light .treeview-menu > li > a > .fa,
.skin-black-light .treeview-menu > li > a > .glyphicon,
.skin-black-light .treeview-menu > li > a > .ion {
    flex: 0 0 14px;
    width: 14px;
    margin: 0;
    color: var(--lux-text-faint);
    font-size: 10px;
    text-align: center;
}

.skin-black-light .treeview-menu > li:hover > a {
    color: var(--lux-primary-hover);
    background: var(--lux-surface-soft);
}

.skin-black-light .treeview-menu > li.active > a {
    color: var(--lux-primary);
    background: var(--lux-primary-soft);
    box-shadow: inset 2px 0 var(--lux-primary);
}

.skin-black-light .sidebar-menu a:focus-visible,
.skin-black-light .erp-sidebar-manual-link:focus-visible {
    outline: 2px solid var(--lux-primary);
    outline-offset: -2px;
}

.skin-black-light .erp-sidebar-manual {
    border-top-color: var(--lux-border-soft);
}

.skin-black-light .erp-sidebar-manual-link,
.navbar-app-link,
.main-header .navbar .nav > li.user > a {
    border-color: var(--lux-border);
    border-radius: var(--lux-radius);
    background: var(--lux-surface-base);
    color: var(--lux-primary);
    box-shadow: none;
}

.skin-black-light .erp-sidebar-manual-link {
    min-height: 40px;
    padding: 0 12px;
    border-radius: 4px;
}

.skin-black-light .erp-sidebar-manual-link > .fa {
    flex: 0 0 18px;
    width: 18px;
    margin: 0;
    text-align: center;
}

.skin-black-light .erp-sidebar-manual-link:hover,
.skin-black-light .erp-sidebar-manual-link:focus,
.navbar-app-link:hover,
.navbar-app-link:focus,
.main-header .navbar .nav > li.user > a:hover,
.main-header .navbar .nav > li.user.open > a,
.main-header .navbar .nav > li.user > a:focus {
    border-color: var(--lux-primary-border);
    background: var(--lux-primary-soft);
    color: var(--lux-primary-hover);
    box-shadow: none;
}

.main-header .logo {
    background: var(--lux-surface-base) !important;
    border-right: 1px solid var(--lux-border);
    border-bottom: 1px solid var(--lux-border);
}

.main-header .logo .logo-mini {
    color: var(--lux-primary);
    letter-spacing: 0;
}

.main-header .navbar {
    background: var(--lux-surface-base) !important;
    border-bottom: 1px solid var(--lux-border);
    box-shadow: none;
}

.navbar-page-title {
    color: var(--lux-text);
    font-size: 14px;
    font-weight: 700;
}

.navbar-page-kicker {
    color: var(--lux-text-muted);
    letter-spacing: 0;
}

.main-header .sidebar-toggle {
    color: var(--lux-text-muted);
}

.main-header .sidebar-toggle:before {
    border-color: var(--lux-border);
    border-radius: var(--lux-radius-control);
    background: var(--lux-surface-base);
}

.main-header .sidebar-toggle:hover:before,
.main-header .sidebar-toggle:focus:before,
.main-header .sidebar-toggle:active:before {
    border-color: var(--lux-primary-border);
    background: var(--lux-primary-soft);
}

.navbar-finmaster-link,
.navbar-sop-link {
    border-color: var(--lux-border);
    background: var(--lux-surface-base);
    color: var(--lux-primary);
}

.navbar-finmaster-link:hover,
.navbar-finmaster-link:focus,
.navbar-sop-link:hover,
.navbar-sop-link:focus,
.navbar-sop-link.has-sop-notification {
    border-color: var(--lux-primary-border);
    background: var(--lux-primary-soft);
    color: var(--lux-primary-hover);
}

.navbar-ai-link {
    border-color: var(--lux-primary);
    background: var(--lux-primary);
}

.navbar-ai-link:hover,
.navbar-ai-link:focus {
    border-color: var(--lux-primary-hover);
    background: var(--lux-primary-hover);
}

.main-header .navbar .dropdown-menu {
    margin-top: 8px;
    border: 1px solid var(--lux-border);
    border-radius: var(--lux-radius);
    box-shadow: var(--lux-shadow-floating);
}

.skin-black-light .main-header li.user-header,
.main-header .navbar .dropdown-menu > li.user-footer {
    background: var(--lux-surface-soft);
    border-color: var(--lux-border-soft);
}

.main-header .navbar .dropdown-menu > li.user-footer .btn {
    border-color: var(--lux-border);
    border-radius: var(--lux-radius-control);
    color: var(--lux-primary);
}

.content-header {
    padding: 18px 24px 8px;
}

.content-header > h1 {
    margin: 0;
    color: var(--lux-text);
    font-size: 20px;
    font-weight: 700;
}

.content-header > .breadcrumb {
    top: 16px;
    right: 24px;
    color: var(--lux-text-muted);
}

body.erp-page-scope .content.erp-page-content {
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin-right: 0 !important;
}

/* Keep legacy list pages on the same edge-to-edge content rhythm. */
body.erp-page-scope .content-wrapper > section.content:not(.erp-page-content) {
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

body.erp-page-scope .content-wrapper > section.content:not(.erp-page-content) > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.erp-page-scope .content-wrapper > section.content:not(.erp-page-content) > .row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.erp-page-scope .content-wrapper > section.content:not(.erp-page-content) > .row > [class*="col-"] > .box {
    margin: 0 !important;
    border-radius: 0 !important;
}

body.erp-page-scope .content-wrapper > section.content:not(.erp-page-content) .box-body > .search-bar {
    margin-bottom: 10px !important;
    border-radius: 0 !important;
}

.erp-page {
    padding: 18px 24px 34px;
}

.erp-page-shell {
    gap: 0;
    padding-top: 0;
}

body.erp-page-scope .content.erp-page-content .erp-page-shell {
    width: 100%;
    max-width: none;
    margin: 0;
}

body.erp-page-scope .content.erp-page-content .erp-page-card--shell {
    margin: 0 !important;
    border-radius: 0 !important;
}

body.erp-page-scope .content.erp-page-content .erp-page-card--shell > .erp-page-card__head {
    padding-left: var(--lux-aligned-content-inset) !important;
    padding-right: var(--lux-aligned-content-inset) !important;
}

body.erp-page-scope .content.erp-page-content .erp-page-card--shell > .erp-page-card__body--search,
body.erp-page-scope .content.erp-page-content .erp-page-card--shell > .erp-page-card__body--list,
body.erp-page-scope .content.erp-page-content .erp-page-card--shell > .erp-page-card__body {
    padding-left: var(--lux-content-inset) !important;
    padding-right: var(--lux-content-inset) !important;
}

body.erp-page-scope .content.erp-page-content .erp-page-card--shell > .erp-page-card__body--search {
    margin-left: var(--lux-content-inset) !important;
    margin-right: var(--lux-content-inset) !important;
    padding-left: var(--lux-table-cell-inset) !important;
    padding-right: var(--lux-table-cell-inset) !important;
    padding-top: 12px !important;
    padding-bottom: 14px !important;
    margin-bottom: 10px !important;
}

body.erp-page-scope .content.erp-page-content :is(.search-bar, .erp-page-search-surface, .erp-page-card__body--search) {
    border-radius: 0 !important;
}

body.erp-page-scope .content.erp-page-content .erp-page-card--shell > .erp-page-card__body--list {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

body.erp-page-scope .content.erp-page-content .erp-page-card--shell > .erp-page-card__body--list.erp-page-table-shell {
    padding-left: var(--lux-content-inset) !important;
    padding-right: var(--lux-content-inset) !important;
}

body.erp-page-scope .content.erp-page-content .erp-page-table-shell table > thead > tr > th:first-child,
body.erp-page-scope .content.erp-page-content .erp-page-table-shell table > tbody > tr > td:first-child {
    padding-left: var(--lux-table-cell-inset) !important;
}

body.erp-page-scope .content.erp-page-content .erp-page-table-shell table > thead > tr > th:last-child,
body.erp-page-scope .content.erp-page-content .erp-page-table-shell table > tbody > tr > td:last-child {
    padding-right: var(--lux-table-cell-inset) !important;
}

body.erp-page-scope .content.erp-page-content .erp-page-card--shell + .erp-page-card--shell {
    border-top: 0 !important;
}

.box,
.panel,
.well,
.ibox-content,
.erp-page-card,
.erp-upload-page-card,
.erp-modal-search-surface,
.search-bar.erp-page-search-card {
    border: 1px solid var(--lux-border) !important;
    border-radius: var(--lux-radius) !important;
    background: var(--lux-surface-base) !important;
    box-shadow: var(--lux-shadow-panel) !important;
}

.box {
    margin-bottom: 16px;
}

.box-header,
.panel-heading,
.erp-page-card__head {
    border-color: var(--lux-border-soft) !important;
}

.box-header {
    padding: 16px 18px;
}

.box-header.with-border {
    border-bottom-color: var(--lux-border-soft);
}

.box-title,
.panel-title,
.erp-page-card__title {
    color: var(--lux-text) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

.box-body {
    padding: 16px 18px;
}

.erp-page-card--padded {
    padding: 20px;
}

.erp-page-card--form-compact {
    padding: 18px 20px;
}

.erp-page-card--padded > .erp-page-card__head,
.erp-page-card--form-compact > .erp-page-card__head {
    margin-bottom: 16px;
}

.erp-page-card__desc,
.help-block,
.text-muted,
.small,
small {
    color: var(--lux-text-muted) !important;
}

.search-bar,
.erp-page-search-surface,
.erp-page-card__body--search {
    border-color: var(--lux-border) !important;
    background: var(--lux-surface-soft) !important;
}

.search-bar {
    margin-bottom: 14px;
    padding: 14px;
    border: 1px solid var(--lux-border);
    border-radius: var(--lux-radius);
}

.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
body.erp-page-scope select.form-control:not(.select2-hidden-accessible):not([multiple]):not([size]) {
    min-height: 38px;
    height: 38px !important;
    border: 1px solid var(--lux-border) !important;
    border-radius: var(--lux-radius-control) !important;
    background-color: var(--lux-surface-base) !important;
    box-shadow: none !important;
    color: var(--lux-text-soft) !important;
    font-size: 13px;
}

textarea.form-control {
    min-height: 96px;
    height: auto !important;
}

.form-control {
    padding: 8px 12px;
}

select.form-control,
body.erp-page-scope select.form-control:not(.select2-hidden-accessible):not([multiple]):not([size]) {
    padding: 0 34px 0 12px !important;
    line-height: 36px !important;
}

input.form-control {
    line-height: 20px !important;
}

.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--lux-primary) !important;
    box-shadow: var(--lux-focus) !important;
    outline: none !important;
}

.input-group-addon {
    border-color: var(--lux-border);
    background: var(--lux-surface-soft);
    color: var(--lux-text-muted);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--lux-text-soft);
    line-height: 36px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--lux-text-faint);
}

.select2-dropdown,
body.erp-page-scope .select2-dropdown {
    border: 1px solid var(--lux-border) !important;
    border-radius: var(--lux-radius) !important;
    background: var(--lux-surface-base) !important;
    box-shadow: var(--lux-shadow-floating) !important;
    overflow: hidden;
}

.select2-results__option {
    padding: 9px 12px;
    color: var(--lux-text-soft);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
body.erp-page-scope .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--lux-primary) !important;
    color: #ffffff !important;
}

.btn,
.erp-page-btn,
.erp-page-action-btn,
.erp-page-pagination-jump__button,
body > .layui-layer .layui-layer-btn a {
    min-height: 36px;
    border-radius: var(--lux-radius-control) !important;
    box-shadow: none !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.btn {
    padding: 8px 14px;
}

.btn-sm,
.btn-group-sm > .btn {
    min-height: 32px;
    padding: 6px 12px;
    font-size: 12px;
}

.erp-page-btn {
    height: 38px;
    min-width: 104px;
    padding: 0 16px;
}

.erp-page-action-btn {
    height: 34px;
    min-width: 86px;
    padding: 0 12px;
}

.btn-primary,
.btn-info,
.erp-page-btn--primary,
.erp-page-action-btn--primary,
.btn-search,
.btn-success.btn-primary,
.pagination > .active > a,
.pagination > .active > span,
body > .layui-layer .layui-layer-btn .layui-layer-btn0 {
    border-color: var(--lux-primary) !important;
    background: var(--lux-primary) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-info:hover,
.btn-info:focus,
.erp-page-btn--primary:hover,
.erp-page-btn--primary:focus,
.erp-page-action-btn--primary:hover,
.erp-page-action-btn--primary:focus,
.btn-search:hover,
.btn-search:focus,
body > .layui-layer .layui-layer-btn .layui-layer-btn0:hover {
    border-color: var(--lux-primary-hover) !important;
    background: var(--lux-primary-hover) !important;
    color: #ffffff !important;
}

.btn-default,
.btn-primary-border,
.erp-page-btn:not(.erp-page-btn--primary):not(.erp-page-btn--danger),
.erp-page-action-btn:not(.erp-page-action-btn--primary):not(.erp-page-action-btn--danger):not(.erp-page-action-btn--success):not(.erp-page-action-btn--warning),
body > .layui-layer .layui-layer-btn a:not(.layui-layer-btn0) {
    border-color: var(--lux-primary-border) !important;
    background: var(--lux-surface-base) !important;
    color: var(--lux-primary) !important;
}

.btn-default:hover,
.btn-default:focus,
.btn-primary-border:hover,
.btn-primary-border:focus,
.erp-page-btn:not(.erp-page-btn--primary):not(.erp-page-btn--danger):hover,
.erp-page-btn:not(.erp-page-btn--primary):not(.erp-page-btn--danger):focus,
.erp-page-action-btn:not(.erp-page-action-btn--primary):not(.erp-page-action-btn--danger):not(.erp-page-action-btn--success):not(.erp-page-action-btn--warning):hover,
.erp-page-action-btn:not(.erp-page-action-btn--primary):not(.erp-page-action-btn--danger):not(.erp-page-action-btn--success):not(.erp-page-action-btn--warning):focus {
    border-color: var(--lux-primary) !important;
    background: var(--lux-primary-soft) !important;
    color: var(--lux-primary-hover) !important;
}

.btn-danger,
.erp-page-btn--danger,
.erp-page-action-btn--danger {
    border-color: var(--lux-danger-border) !important;
    background: var(--lux-danger-soft) !important;
    color: var(--lux-danger) !important;
}

.btn-danger:hover,
.btn-danger:focus,
.erp-page-btn--danger:hover,
.erp-page-btn--danger:focus,
.erp-page-action-btn--danger:hover,
.erp-page-action-btn--danger:focus {
    border-color: var(--lux-danger) !important;
    background: var(--lux-danger) !important;
    color: #ffffff !important;
}

.erp-page-action-btn--success,
.label-success,
.badge-success {
    border-color: var(--lux-success-border) !important;
    background: var(--lux-success-soft) !important;
    color: var(--lux-success) !important;
}

.erp-page-action-btn--warning,
.label-warning,
.badge-warning {
    border-color: var(--lux-warning-border) !important;
    background: var(--lux-warning-soft) !important;
    color: var(--lux-warning) !important;
}

.table,
.fixed-table-container,
.bootstrap-table .table,
.erp-page-table-wrap,
.erp-page-table-shell {
    color: var(--lux-text-soft);
}

.table-bordered,
.fixed-table-container {
    border-color: var(--lux-border) !important;
}

.table > thead > tr > th,
.table-bordered > thead > tr > th,
.bootstrap-table .table > thead > tr > th,
table.erp-page-table > thead > tr > th,
body.erp-page-scope .erp-page-card--list .table > thead > tr > th,
:is(body.erp-page-scope .erp-page-modal, body.erp-page-scope .bootbox.modal) .erp-modal-data-table > thead > tr > th {
    border-color: var(--lux-border-soft) !important;
    background: var(--lux-surface-table) !important;
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.45;
    padding: 12px 12px !important;
    vertical-align: middle !important;
}

.table > tbody > tr > td,
.table-bordered > tbody > tr > td,
.bootstrap-table .table > tbody > tr > td,
table.erp-page-table > tbody > tr > td,
body.erp-page-scope .erp-page-card--list .table > tbody > tr > td,
:is(body.erp-page-scope .erp-page-modal, body.erp-page-scope .bootbox.modal) .erp-modal-data-table > tbody > tr > td {
    border-color: var(--lux-border-soft) !important;
    background: var(--lux-surface-base) !important;
    color: var(--lux-text-soft) !important;
    font-size: 13px !important;
    line-height: 1.55;
    padding: 13px 12px !important;
    vertical-align: middle !important;
}

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th,
.bootstrap-table .table-hover > tbody > tr:hover > td,
table.erp-page-table.table-hover > tbody > tr:hover > td,
:is(body.erp-page-scope .erp-page-modal, body.erp-page-scope .bootbox.modal) .erp-modal-data-table.table-hover > tbody > tr:hover > td {
    background: #fbfdff !important;
}

.erp-page-table-shell table,
table.erp-page-table,
:is(body.erp-page-scope .erp-page-modal, body.erp-page-scope .bootbox.modal) table.erp-modal-data-table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

table.erp-page-table > tbody > tr > td:first-child,
table.erp-page-table > tbody > tr > td:last-child,
:is(body.erp-page-scope .erp-page-modal, body.erp-page-scope .bootbox.modal) .erp-modal-data-table > tbody > tr > td:first-child,
:is(body.erp-page-scope .erp-page-modal, body.erp-page-scope .bootbox.modal) .erp-modal-data-table > tbody > tr > td:last-child {
    border-radius: 0 !important;
}

.fixed-table-toolbar,
.dataTables_wrapper > .row:first-child,
.dataTables_wrapper > .row:last-child {
    color: var(--lux-text-muted);
}

.dataTables_wrapper .dataTables_info,
.bootstrap-table .fixed-table-pagination,
.pagination-detail {
    color: var(--lux-text-muted);
    font-size: 12px;
}

.pagination {
    display: inline-flex;
    gap: 6px;
    margin: 0;
}

.pagination > li > a,
.pagination > li > span,
body.erp-page-scope .erp-page-card--list .pagination > li > a,
body.erp-page-scope .erp-page-card--list .pagination > li > span,
:is(body.erp-page-scope .erp-page-modal, body.erp-page-scope .bootbox.modal) .pagination > li > a,
:is(body.erp-page-scope .erp-page-modal, body.erp-page-scope .bootbox.modal) .pagination > li > span {
    min-width: 34px;
    height: 34px;
    border: 1px solid var(--lux-border) !important;
    border-radius: var(--lux-radius-control) !important;
    background: var(--lux-surface-base) !important;
    color: var(--lux-text-muted) !important;
    line-height: 32px;
}

.pagination > .active > a,
.pagination > .active > span,
body.erp-page-scope .erp-page-card--list .pagination > .active > a,
body.erp-page-scope .erp-page-card--list .pagination > .active > span,
:is(body.erp-page-scope .erp-page-modal, body.erp-page-scope .bootbox.modal) .pagination > .active > a,
:is(body.erp-page-scope .erp-page-modal, body.erp-page-scope .bootbox.modal) .pagination > .active > span {
    border-color: var(--lux-primary) !important;
    background: var(--lux-primary) !important;
    color: #ffffff !important;
}

.label,
.badge,
.tag,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    border-radius: 999px !important;
    font-weight: 700;
    letter-spacing: 0;
}

.label-primary,
.badge-primary,
.label-info,
.badge-info {
    background: var(--lux-primary-soft) !important;
    color: var(--lux-primary) !important;
}

.label-danger,
.badge-danger {
    background: var(--lux-danger-soft) !important;
    color: var(--lux-danger) !important;
}

.text-primary {
    color: var(--lux-primary) !important;
}

.text-success {
    color: var(--lux-success) !important;
}

.text-warning {
    color: var(--lux-warning) !important;
}

.text-danger {
    color: var(--lux-danger) !important;
}

.alert {
    border-radius: var(--lux-radius);
    box-shadow: none;
}

.alert-info {
    border-color: var(--lux-primary-border);
    background: var(--lux-primary-soft);
    color: var(--lux-primary-hover);
}

.alert-success {
    border-color: var(--lux-success-border);
    background: var(--lux-success-soft);
    color: var(--lux-success);
}

.alert-warning {
    border-color: var(--lux-warning-border);
    background: var(--lux-warning-soft);
    color: var(--lux-warning);
}

.alert-danger {
    border-color: var(--lux-danger-border);
    background: var(--lux-danger-soft);
    color: var(--lux-danger);
}

.nav-tabs {
    border-bottom: 1px solid var(--lux-border);
}

.nav-tabs > li > a {
    border-radius: var(--lux-radius-control) var(--lux-radius-control) 0 0;
    color: var(--lux-text-muted);
    font-weight: 700;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    border-color: var(--lux-border) var(--lux-border) var(--lux-surface-base);
    color: var(--lux-primary);
}

.dropdown-menu {
    border: 1px solid var(--lux-border);
    border-radius: var(--lux-radius);
    box-shadow: var(--lux-shadow-floating);
}

.dropdown-menu > li > a {
    color: var(--lux-text-soft);
    font-size: 13px;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: var(--lux-primary-soft);
    color: var(--lux-primary);
}

.modal-backdrop.in,
body.erp-page-scope .modal-backdrop.in {
    background: rgba(15, 23, 42, 0.46) !important;
    opacity: 1 !important;
}

.modal-content,
.bootbox.modal .modal-content,
:is(body.erp-page-scope .erp-page-modal, body.erp-page-scope .bootbox.modal) .modal-content {
    border: 1px solid var(--lux-border) !important;
    border-radius: var(--lux-radius) !important;
    background: var(--lux-surface-base) !important;
    box-shadow: var(--lux-shadow-floating) !important;
    overflow: hidden;
}

.modal-header,
.bootbox.modal .modal-header,
:is(body.erp-page-scope .erp-page-modal, body.erp-page-scope .bootbox.modal) .modal-header {
    padding: 16px 20px !important;
    border-bottom: 1px solid var(--lux-border-soft) !important;
    background: var(--lux-surface-base) !important;
}

.modal-title,
.bootbox.modal .modal-title,
:is(body.erp-page-scope .erp-page-modal, body.erp-page-scope .bootbox.modal) .modal-title {
    color: var(--lux-text) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.35;
}

.modal-body,
.bootbox.modal .modal-body,
:is(body.erp-page-scope .erp-page-modal, body.erp-page-scope .bootbox.modal) .modal-body {
    padding: 18px 20px !important;
    background: var(--lux-surface-base) !important;
}

.modal-footer,
.bootbox.modal .modal-footer,
:is(body.erp-page-scope .erp-page-modal, body.erp-page-scope .bootbox.modal) .modal-footer {
    padding: 12px 20px 16px !important;
    border-top: 1px solid var(--lux-border-soft) !important;
    background: var(--lux-surface-soft) !important;
}

.modal-footer .btn,
:is(body.erp-page-scope .erp-page-modal, body.erp-page-scope .bootbox.modal) .modal-footer .btn {
    min-width: 96px;
    height: 36px;
}

.modal .close,
.bootbox.modal .close,
:is(body.erp-page-scope .erp-page-modal, body.erp-page-scope .bootbox.modal) .close {
    color: var(--lux-text-muted) !important;
    opacity: 1 !important;
    text-shadow: none;
}

body > .layui-layer:not(.layui-layer-msg),
body.erp-page-scope .erp-page-editor-layer.layui-layer,
body.erp-page-scope .layui-layer.product-layer-dialog {
    border: 1px solid var(--lux-border) !important;
    border-radius: var(--lux-radius) !important;
    background: var(--lux-surface-base) !important;
    box-shadow: var(--lux-shadow-floating) !important;
    overflow: hidden !important;
}

body > .layui-layer .layui-layer-title,
body.erp-page-scope .erp-page-editor-layer .layui-layer-title {
    height: auto !important;
    padding: 15px 20px !important;
    border-bottom: 1px solid var(--lux-border-soft) !important;
    background: var(--lux-surface-base) !important;
    color: var(--lux-text) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

body > .layui-layer .layui-layer-content,
body > .layui-layer .layui-layer-content iframe,
body.erp-page-scope .erp-page-editor-layer .layui-layer-content,
body.erp-page-scope .erp-page-editor-layer .layui-layer-content iframe {
    background: var(--lux-surface-base) !important;
}

body > .layui-layer .layui-layer-btn,
body.erp-page-scope .erp-page-editor-layer .layui-layer-btn {
    padding: 12px 20px 16px !important;
    border-top: 1px solid var(--lux-border-soft) !important;
    background: var(--lux-surface-soft) !important;
}

body > .layui-layer.layui-layer-msg {
    border-radius: var(--lux-radius) !important;
    border: 1px solid var(--lux-border) !important;
    box-shadow: var(--lux-shadow-floating) !important;
}

.erp-page-editor-form .form-section-header,
:is(body.erp-page-scope .erp-page-modal, body.erp-page-scope .bootbox.modal, body.erp-page-scope.erp-page-editor-frame, body.erp-page-scope .erp-page-editor-form) .form-section-header {
    border-color: var(--lux-border-soft) !important;
    color: var(--lux-text) !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
}

.erp-page-editor-form .form-group label,
.control-label,
:is(.erp-page-search-field, .erp-page-filter-item) label {
    color: var(--lux-text-muted) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.erp-page-code-editor__surface,
.erp-page-selection-surface,
.erp-page-form-card,
.erp-page-modal-panel-shell {
    border-color: var(--lux-border) !important;
    border-radius: var(--lux-radius) !important;
    background: var(--lux-surface-base) !important;
    box-shadow: none !important;
}

img,
.product-img,
.item-main-img img,
.table img {
    border-radius: var(--lux-radius-control);
}

body.erp-page-scope.erp-page-editor-frame.platform-login-page-scope,
body.erp-page-scope.erp-page-editor-frame.pay-guide-login-page-scope,
body.erp-page-scope.erp-page-editor-frame.login-error-page-scope {
    background: var(--lux-surface-canvas) !important;
}

body.login-error-page-scope .erp-page-card,
body.platform-login-page-scope .erp-page-card,
body.pay-guide-login-page-scope .erp-page-card,
.guide-page-card {
    border-color: var(--lux-border) !important;
    border-radius: var(--lux-radius) !important;
    background: var(--lux-surface-base) !important;
    box-shadow: var(--lux-shadow-panel) !important;
}

.guide-page-chat-log {
    border-color: var(--lux-border) !important;
    border-radius: var(--lux-radius) !important;
    background: var(--lux-surface-soft) !important;
    box-shadow: none !important;
}

.guide-message {
    border-radius: var(--lux-radius) !important;
    box-shadow: none !important;
}

.guide-message--sent {
    background: var(--lux-primary) !important;
    color: #ffffff !important;
}

.guide-message--received {
    border: 1px solid var(--lux-border) !important;
    background: var(--lux-surface-base) !important;
    color: var(--lux-text-soft) !important;
}

.page {
    background-color: var(--lux-surface-canvas) !important;
}

.box-form {
    background-color: var(--lux-surface-base) !important;
    border-left: 1px solid var(--lux-border-soft);
}

.login-title,
.login-text {
    color: var(--lux-text) !important;
    letter-spacing: 0 !important;
}

.login-input {
    border: 1px solid var(--lux-border) !important;
    border-radius: var(--lux-radius-control) !important;
    background: var(--lux-surface-base) !important;
    color: var(--lux-text-soft) !important;
    box-shadow: none !important;
}

.login-input:focus {
    border-color: var(--lux-primary) !important;
    box-shadow: var(--lux-focus) !important;
    outline: none !important;
}

.login-btn {
    border-radius: var(--lux-radius-control) !important;
    background: var(--lux-primary) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.login-btn:hover,
.login-btn:focus {
    background: var(--lux-primary-hover) !important;
}

body.customer-page-scope .content.erp-page-content {
    padding: 0 !important;
    margin: 0 !important;
}

body.customer-page-scope .erp-page-shell {
    width: 100%;
    max-width: none;
    gap: 0;
    margin: 0;
    padding-top: 0;
}

body.customer-page-scope .erp-page-card--search {
    margin-bottom: 0;
}

body.customer-page-scope .erp-page-card--shell {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
}

body.customer-page-scope .erp-page-search-card > .erp-page-card__head {
    padding: 14px var(--lux-aligned-content-inset) 8px;
}

body.customer-page-scope .erp-page-search-card .erp-page-card__body--search {
    margin-left: var(--lux-content-inset) !important;
    margin-right: var(--lux-content-inset) !important;
    padding: 10px var(--lux-table-cell-inset) 14px !important;
}

body.customer-page-scope .erp-page-card--list-headless > .erp-page-card__body--list {
    padding: 12px var(--lux-content-inset) 12px;
}

body.customer-page-scope .erp-page-table-shell {
    padding-left: var(--lux-content-inset) !important;
    padding-right: var(--lux-content-inset) !important;
}

body.customer-page-scope .search-bar {
    margin-bottom: 0;
    padding: 12px;
}

body.erp-page-scope :is(.search-bar, .erp-page-search-surface, .erp-modal-search-surface) :is(.erp-page-search-field, .erp-page-filter-item) :is(input.form-control, select.form-control:not(.select2-hidden-accessible):not([multiple]):not([size])),
body.erp-page-scope :is(.search-bar, .erp-page-search-surface, .erp-modal-search-surface) :is(.erp-page-search-field, .erp-page-filter-item) .select2-container--default .select2-selection--single {
    min-height: var(--lux-search-control-height) !important;
    height: var(--lux-search-control-height) !important;
    line-height: var(--lux-search-control-inner-height) !important;
    box-sizing: border-box !important;
}

body.erp-page-scope :is(.search-bar, .erp-page-search-surface, .erp-modal-search-surface) :is(.erp-page-search-field, .erp-page-filter-item) input.form-control,
body.erp-page-scope :is(.search-bar, .erp-page-search-surface, .erp-modal-search-surface) :is(.erp-page-search-field, .erp-page-filter-item) select.form-control:not(.select2-hidden-accessible):not([multiple]):not([size]) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.erp-page-scope :is(.search-bar, .erp-page-search-surface, .erp-modal-search-surface) :is(.erp-page-search-field, .erp-page-filter-item) .select2-container,
body.erp-page-scope :is(.search-bar, .erp-page-search-surface, .erp-modal-search-surface) :is(.erp-page-search-field, .erp-page-filter-item) .input-group.date {
    min-height: var(--lux-search-control-height) !important;
    height: var(--lux-search-control-height) !important;
}

body.erp-page-scope :is(.search-bar, .erp-page-search-surface, .erp-modal-search-surface) :is(.erp-page-search-field, .erp-page-filter-item) .select2-container--default .select2-selection--single {
    display: flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.erp-page-scope :is(.search-bar, .erp-page-search-surface, .erp-modal-search-surface) :is(.erp-page-search-field, .erp-page-filter-item) .select2-container--default .select2-selection--single .select2-selection__rendered {
    min-height: var(--lux-search-control-inner-height) !important;
    height: var(--lux-search-control-inner-height) !important;
    line-height: var(--lux-search-control-inner-height) !important;
    display: flex !important;
    align-items: center !important;
}

body.erp-page-scope :is(.search-bar, .erp-page-search-surface, .erp-modal-search-surface) :is(.erp-page-search-field, .erp-page-filter-item) .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: var(--lux-search-control-inner-height) !important;
}

body.erp-page-scope :is(.search-bar, .erp-page-search-surface, .erp-modal-search-surface) :is(.erp-page-search-field, .erp-page-filter-item) .select2-container--default .select2-selection--single .select2-selection__arrow::before {
    margin-top: 14px !important;
}

body.erp-page-scope :is(.search-bar, .erp-page-search-surface, .erp-modal-search-surface) :is(.erp-page-search-field, .erp-page-filter-item) .input-group.date {
    display: flex !important;
    align-items: stretch !important;
}

body.erp-page-scope :is(.search-bar, .erp-page-search-surface, .erp-modal-search-surface) :is(.erp-page-search-field, .erp-page-filter-item) .input-group.date .input-group-addon {
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.erp-page-scope :is(.search-bar, .erp-page-search-surface, .erp-modal-search-surface) :is(.erp-page-search-field, .erp-page-filter-item) .input-group.date .form-control {
    min-height: var(--lux-search-control-height) !important;
    height: var(--lux-search-control-height) !important;
    line-height: var(--lux-search-control-inner-height) !important;
}

body.erp-page-scope :is(.search-bar, .erp-page-search-surface, .erp-modal-search-surface) :is(input.form-control, select.form-control:not(.select2-hidden-accessible):not([multiple]):not([size])),
body.erp-page-scope :is(.search-bar, .erp-page-search-surface, .erp-modal-search-surface) .select2-container--default .select2-selection--single,
body.erp-page-scope :is(.search-bar, .erp-page-search-surface, .erp-modal-search-surface) .input-group.date {
    min-height: var(--lux-search-control-height) !important;
    height: var(--lux-search-control-height) !important;
    box-sizing: border-box !important;
}

body.erp-page-scope :is(.search-bar, .erp-page-search-surface, .erp-modal-search-surface) :is(input.form-control, select.form-control:not(.select2-hidden-accessible):not([multiple]):not([size])) {
    line-height: var(--lux-search-control-inner-height) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.erp-page-scope :is(.search-bar, .erp-page-search-surface, .erp-modal-search-surface) .input-group.date .input-group-addon,
body.erp-page-scope :is(.search-bar, .erp-page-search-surface, .erp-modal-search-surface) .input-group.date .form-control {
    min-height: var(--lux-search-control-height) !important;
    height: var(--lux-search-control-height) !important;
}

@media (max-width: 767px) {
    .content,
    body.erp-page-scope .content.erp-page-content,
    .erp-page {
        padding: 12px;
    }

    .content-header {
        padding: 14px 12px 6px;
    }

    .box-body,
    .box-header,
    .erp-page-card--padded,
    .erp-page-card--form-compact {
        padding-left: 14px;
        padding-right: 14px;
    }

    .modal-body,
    .modal-header,
    .modal-footer {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}