:root {
    color-scheme: light;
    --erp-primary: #517597;
    --erp-primary-strong: #3f5f7d;
    --erp-primary-soft: #eaf1f7;
    --erp-secondary: #c4a43d;
    --erp-success: #1f8f5f;
    --erp-danger: #c2494b;
    --erp-warning: #c88719;
    --erp-info: #3b82b6;
    --erp-text: #1f2937;
    --erp-text-muted: #5f6b7a;
    --erp-label: #517597;
    --erp-bg: #f4f6f9;
    --erp-bg-elevated: #eef2f7;
    --erp-surface: #ffffff;
    --erp-surface-2: #f8fafc;
    --erp-border: #d3dce6;
    --erp-border-strong: #b4c2d1;
    --erp-shadow-sm: 0 0.25rem 1rem rgba(15, 23, 42, 0.08);
    --erp-shadow-lg: 0 1rem 3rem rgba(15, 23, 42, 0.12);
    --erp-focus-ring: rgba(81, 117, 151, 0.18);
    --erp-auth-bg-start: rgba(255, 255, 255, 0.95);
    --erp-auth-bg-end: rgba(239, 244, 249, 0.98);
    --erp-table-head: #e6edf5;
    --erp-table-sticky: #f8fbff;
    --erp-timeline-line: #d6dee7;
    --erp-badge-bg: #ff4c51;
    --bs-body-color: var(--erp-text);
    --bs-body-color-rgb: 31, 41, 55;
    --bs-body-bg: var(--erp-bg);
    --bs-body-bg-rgb: 244, 246, 249;
    --bs-border-color: var(--erp-border);
    --bs-border-color-translucent: rgba(81, 117, 151, 0.15);
    --bs-primary: var(--erp-primary);
    --bs-primary-rgb: 81, 117, 151;
    --bs-secondary-bg: var(--erp-surface-2);
    --bs-tertiary-bg: var(--erp-bg-elevated);
    --bs-light-rgb: 248, 250, 252;
    --bs-emphasis-color: var(--erp-text);
    --bs-heading-color: var(--erp-text);
    --bs-link-color: var(--erp-primary);
    --bs-link-hover-color: var(--erp-primary-strong);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --erp-primary: #8db5db;
    --erp-primary-strong: #b8d2e8;
    --erp-primary-soft: rgba(141, 181, 219, 0.14);
    --erp-secondary: #d7bd63;
    --erp-success: #4ac18a;
    --erp-danger: #ff7a7a;
    --erp-warning: #e3b14a;
    --erp-info: #77c3f2;
    --erp-text: #e8edf3;
    --erp-text-muted: #a9b7c7;
    --erp-label: #9fc5ea;
    --erp-bg: #0f1722;
    --erp-bg-elevated: #172231;
    --erp-surface: #1b2838;
    --erp-surface-2: #223246;
    --erp-border: #33495f;
    --erp-border-strong: #466079;
    --erp-shadow-sm: 0 0.25rem 1rem rgba(2, 8, 23, 0.38);
    --erp-shadow-lg: 0 1rem 3rem rgba(2, 8, 23, 0.42);
    --erp-focus-ring: rgba(141, 181, 219, 0.26);
    --erp-auth-bg-start: rgba(15, 23, 34, 0.96);
    --erp-auth-bg-end: rgba(23, 34, 49, 0.98);
    --erp-table-head: #223246;
    --erp-table-sticky: #1d2b3d;
    --erp-timeline-line: #31465a;
    --erp-badge-bg: #ff7a7a;
    --bs-body-color: var(--erp-text);
    --bs-body-color-rgb: 232, 237, 243;
    --bs-body-bg: var(--erp-bg);
    --bs-body-bg-rgb: 15, 23, 34;
    --bs-border-color: var(--erp-border);
    --bs-border-color-translucent: rgba(159, 197, 234, 0.18);
    --bs-primary: var(--erp-primary);
    --bs-primary-rgb: 141, 181, 219;
    --bs-secondary-bg: var(--erp-surface-2);
    --bs-tertiary-bg: var(--erp-bg-elevated);
    --bs-light-rgb: 34, 50, 70;
    --bs-emphasis-color: var(--erp-text);
    --bs-heading-color: var(--erp-text);
    --bs-link-color: var(--erp-primary);
    --bs-link-hover-color: var(--erp-primary-strong);
}

:root[data-theme="dark"] .navbar-badge.border-white {
    border-color: #1b2838 !important;
}

html,
body,
.app-wrapper,
.app-main,
.content-wrapper,
.content,
.app-header,
.app-footer,
.app-sidebar,
.main-sidebar,
.main-footer {
    background-color: var(--erp-bg);
    color: var(--erp-text);
}

body,
.content-wrapper,
.card,
.modal-content,
.dropdown-menu,
.list-group-item,
.table,
.table td,
.table th,
.form-control,
.form-select,
.input-group-text,
.accordion-item {
    color: var(--erp-text);
}

.app-header,
.app-footer,
.app-sidebar,
.card,
.modal-content,
.dropdown-menu,
.list-group-item,
.filters,
.timeline > div > .timeline-item,
.mercadochat,
.auth-card,
.table,
.input-group-text {
    background-color: var(--erp-surface) !important;
    border-color: var(--erp-border) !important;
    box-shadow: var(--erp-shadow-sm);
}

.content-wrapper,
.app-main,
.bg-body-tertiary,
.bg-body-secondary {
    background-color: var(--erp-bg) !important;
}

.text-muted,
.dropdown-item.text-muted,
.timeline > div > .timeline-item > .time,
.invoice,
.invoice p {
    color: #517597 !important;
}

.dropdown-item:hover,
.nav-item:hover,
.nav-sidebar .nav-link:hover,
.table-hover > tbody > tr:hover > * {
    background-color: var(--erp-primary-soft) !important;
    color: var(--erp-primary-hover) !important;
}

.nav-sidebar .nav-link.active,
.nav-sidebar .nav-link.active p,
.nav-sidebar .nav-link.active i {
    color: var(--erp-primary) !important;
}

.label-color,
th,
label,
.label,
.card-title,
#filters a,
.btnMaster,
#formLogin a,
#id_table a,
#tableID a,
.svg-color svg path,
.highlighted-svg .s1,
.auth-brand,
.logo h6,
.subBar li a {
    /* color: var(--erp-label) !important; */
    fill: var(--erp-label) !important;
}

.btn-primary,
#formLogin button {
    background-color: var(--erp-primary) !important;
    border-color: var(--erp-primary) !important;
    color: #fff !important;
    box-shadow: var(--erp-shadow-sm);
}

.btn-primary:hover,
.btn-primary:focus,
#formLogin button:hover,
#formLogin button:focus {
    background-color: var(--erp-primary-strong) !important;
    border-color: var(--erp-primary-strong) !important;
}

.form-control,
.form-select,
.input-group-text,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--erp-surface) !important;
    border-color: var(--erp-border) !important;
    color: var(--erp-text) !important;
}

.form-control:focus,
.form-select:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--erp-primary) !important;
    box-shadow: 0 0 0 0.2rem var(--erp-focus-ring) !important;
}

th,
.sticky-col,
thead .sticky-col,
#exp_table > thead > tr > th,
.dataTables_wrapper table.dataTable thead > tr > th,
.dataTables_wrapper table.dataTable thead > tr > td,
.dataTables_wrapper table.dataTable thead > tr > th.sorting,
.dataTables_wrapper table.dataTable thead > tr > th.sorting_asc,
.dataTables_wrapper table.dataTable thead > tr > th.sorting_desc,
.dataTables_wrapper table.dataTable thead > tr > th.sorting_asc_disabled,
.dataTables_wrapper table.dataTable thead > tr > th.sorting_desc_disabled,
.dataTables_wrapper table.dataTable thead > tr > td.sorting,
.dataTables_wrapper table.dataTable thead > tr > td.sorting_asc,
.dataTables_wrapper table.dataTable thead > tr > td.sorting_desc,
.dataTables_wrapper table.dataTable thead > tr > td.sorting_asc_disabled,
.dataTables_wrapper table.dataTable thead > tr > td.sorting_desc_disabled,
.extra-info-row td,
.timeline > .time-label > span {
    background-color: var(--erp-table-head) !important;
    color: var(--erp-text) !important;
}

.sticky-col,
thead .sticky-col {
    background: var(--erp-table-sticky) !important;
}

hr,
.dropdown-divider,
.timeline > div > .timeline-item > .timeline-header {
    border-color: var(--erp-border) !important;
}

ul.timeline:before,
.timeline::before {
    background: var(--erp-timeline-line) !important;
}

ul.timeline > li:before {
    background: var(--erp-surface);
    border-color: var(--erp-primary);
}

.sino span {
    background-color: var(--erp-badge-bg);
    box-shadow: var(--erp-surface) 0 0 0 2px;
}

.avatar span {
    background-color: var(--erp-success);
    box-shadow: var(--erp-surface) 0 0 0 2px;
}

.ui-floating-controls {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ui-floating-controls__button {
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--erp-label);
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.ui-floating-controls__button i,
.notification-bell__icon {
    width: 1.58125rem;
    height: 1.58125rem;
    font-size: 1.58125rem;
    line-height: 1;
    display: block;
}

.app-header .navbar-nav.ms-auto .nav-item > a > .fa-user,
.app-header .navbar-nav.ms-auto .dropdown-toggle > .fa-user,
.app-header .navbar-nav.ms-auto .nav-item > a > .label-color.fa-user {
    font-size: 1.375rem;
}

.notification-bell {
    position: relative;
    text-decoration: none;
}

.ui-floating-controls__button:hover,
.ui-floating-controls__button:focus-visible {
    color: var(--erp-label);
    opacity: 0.75;
    outline: none;
}