html,
body,
.page-wrapper,
.card,
.summary-card,
.header,
.sidebar,
.navbar,
.btn,
.form-control,
.form-select,
.dropdown-menu,
table,
td,
th {
    transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                color 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html {
    background-color: var(--background-color) !important;
    color: var(--text-primary-color) !important;
}

body {
    background-color: transparent !important;
    color: inherit !important;
}

.page-wrapper {
    background-color: var(--background-color) !important;
    color: var(--text-primary-color) !important;
}


.header {
    background: transparent !important;
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 1050 !important;
    height: 60px;
}


[data-bs-theme="dark"] .header {
}

.navbar-toggler-icon {
    filter: var(--toggler-filter, none);
}

[data-bs-theme="dark"] .navbar-toggler-icon {
    filter: invert(1) brightness(2);
}

.navbar-light .navbar-nav .nav-link {
    color: var(--text-secondary-color) !important;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: var(--primary-color) !important;
}

.left-sidebar {
    background: var(--sidebar-color, var(--card-color)) !important;
    color: var(--text-primary-color) !important;
    border-right: 1px solid var(--card-border-color);
    position: fixed !important;
    z-index: 1040;
}

.sidebar-nav {
    background: var(--sidebar-color, var(--card-color)) !important;
}

.sidebar-nav ul li a {
    color: var(--text-secondary-color) !important;
}

.sidebar-nav ul li a:hover, 
.sidebar-nav ul li.active > a {
    color: var(--primary-color) !important;
    background-color: rgba(var(--primary-rgb), 0.15) !important;
    font-weight: 500 !important;
}

.sidebar-nav > ul > li.active > a {
    border-left: 3px solid var(--primary-color) !important;
}


.sidebar-nav > ul > li.active > a i,
.sidebar-nav ul li a.active i {
    background: transparent !important;
    background-color: transparent !important;
}


.card {
    background: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color) !important;
    border-radius: var(--radius-md) !important;
}

.border-0,
.card.border-0 {
    border: none !important;
    border-width: 0 !important;
}

.card-title, .card-body h3, .card-body h4, .card-body h5, .card-body h6 {
    color: var(--text-primary-color) !important;
}

.table-responsive {
    background: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
    margin-bottom: 1.5rem !important;
    overflow: hidden;
}


.tabulator {
    background: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border-color: var(--card-border-color) !important;
}

.tabulator-tableholder {
    background: var(--card-color) !important;
}

.tabulator-table {
    background: var(--card-color) !important;
}

.tabulator-header {
    background: var(--background-color) !important;
    color: var(--text-primary-color) !important;
    border-bottom: 2px solid var(--card-border-color) !important;
}

.tabulator-col {
    background: var(--background-color) !important;
    color: var(--text-primary-color) !important;
    border-right: 1px solid var(--card-border-color) !important;
}

.tabulator-row {
    background: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border-bottom: 1px solid var(--card-border-color) !important;
}

.tabulator-cell {
    border-right: 1px solid var(--card-border-color) !important;
}

.tabulator-row.tabulator-row-even {
    background-color: rgba(0, 0, 0, 0.03) !important;
}

[data-bs-theme="dark"] .tabulator-row.tabulator-row-even {
    background-color: var(--background-color) !important;
}

.tabulator-row:hover {
    background-color: rgba(var(--primary-rgb), 0.15) !important;
}

[data-bs-theme="dark"] .tabulator-row:hover {
    background-color: rgba(var(--primary-rgb), 0.2) !important;
}

.tabulator-row.tabulator-selected {
    background-color: rgba(var(--primary-rgb), 0.12) !important;
    color: inherit !important;
}

[data-bs-theme="dark"] .tabulator-row.tabulator-selected {
    background-color: rgba(var(--primary-rgb), 0.18) !important;
    color: inherit !important;
}

.tabulator-footer {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border-top: 1px solid var(--card-border-color) !important;
}

.tabulator-paginator button {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color) !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    margin: 0 2px !important;
}

.tabulator-paginator button:hover {
    background-color: var(--background-color) !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.tabulator-paginator button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.tabulator-page.active {
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent) !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.tabulator-header-filter input {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color) !important;
}


.page-link {
    color: var(--primary-color) !important;
    background-color: var(--card-color) !important;
    border-color: var(--card-border-color) !important;
    transition: all 0.2s ease;
}

.page-link:hover {
    background-color: var(--background-color) !important;
    color: var(--accent-color) !important;
    border-color: var(--card-border-color) !important;
    z-index: 2;
}

:root:not([data-bs-theme="dark"]) .page-item.active .page-link {
    
    
}

.page-item.active .page-link {
    border-color: var(--primary-color) !important;
}

.page-item.disabled .page-link {
    background-color: var(--card-color) !important;
    color: var(--text-secondary-color) !important;
    border-color: var(--card-border-color) !important;
    opacity: 0.6;
}





.form-control {
    background-color: var(--card-color);
    color: var(--text-primary-color) !important;
    border-color: var(--card-border-color) !important;
    border-radius: var(--radius-sm) !important;
}

.form-select {
    border-radius: var(--radius-sm) !important;
}

.form-control:focus {
    background-color: var(--card-color);
    color: var(--text-primary-color) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25) !important;
}


.btn-white {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border-color: var(--card-border-color) !important;
}

.btn-white:hover {
    background-color: rgba(var(--primary-rgb), 0.1) !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-outline-primary, .btn-outline-purple {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent) !important;
}

.btn-outline-primary:hover, .btn-outline-purple:hover {
    background-color: color-mix(in srgb, var(--primary-color) 20%, transparent) !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}


.dropdown-menu {
    background-color: var(--card-color) !important;
    border-color: var(--card-border-color) !important;
}

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

.dropdown-item:hover {
    background-color: rgba(var(--primary-rgb), 0.1) !important;
    color: var(--primary-color) !important;
}


.modal-content {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
}

.modal-header, .modal-footer {
    border-color: var(--card-border-color) !important;
}

.close {
    color: var(--text-primary-color) !important;
    text-shadow: none;
}


.text-muted {
    color: var(--text-secondary-color) !important;
}

.border {
    border-color: var(--card-border-color) !important;
}



#main-wrapper .footer {
    background: var(--background-color) !important;
    color: var(--text-secondary-color) !important;
    border-top: 1px solid var(--card-border-color) !important;
    padding: 15px 20px !important;
}

#main-wrapper .footer strong, 
#main-wrapper .footer a {
    color: var(--primary-color) !important;
}

#main-wrapper .footer a:hover {
    color: var(--accent-color) !important;
    text-decoration: underline !important;
}


.summary-card {
    border: 1px solid var(--card-border-color) !important;
    box-shadow: var(--shadow-md) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: var(--radius-md) !important;
}

.summary-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-lg) !important;
    border-color: var(--primary-color) !important;
    background-color: color-mix(in srgb, var(--primary-color) 6%, var(--card-color)) !important;
}


[data-bs-theme="dark"] .summary-card {
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: var(--shadow-md) !important;
}

[data-bs-theme="dark"] .summary-card:hover {
    background-color: color-mix(in srgb, #ffffff 12%, var(--card-color)) !important;
    box-shadow: var(--shadow-lg), 0 0 15px color-mix(in srgb, var(--primary-color) 25%, transparent) !important;
}


.summary-card.inactive {
    opacity: 0.85 !important;
    filter: grayscale(40%) !important;
}

/* Reusable elevation utility — extends the .summary-card gradient/lift language
   to other card-like components without duplicating the ruleset. */
.card-elevated, .stat-card, .dashboard-tile {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease;
}
.card-elevated:hover, .stat-card:hover, .dashboard-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

[data-bs-theme="dark"] .summary-card.inactive {
    opacity: 0.85 !important;
    background-color: color-mix(in srgb, #ffffff 4%, var(--card-color)) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}


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

.bg-primary {
    background-color: var(--primary-color) !important;
}

.text-white {
    color: #ffffff !important;
}

.btn-purple {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
}

.btn-purple:hover {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: #ffffff !important;
}


.input-group-text {
    background-color: var(--background-color) !important;
    color: var(--text-primary-color) !important;
    border-color: var(--card-border-color) !important;
}


.custom-control-label {
    color: var(--text-primary-color) !important;
}

.custom-control-label::before {
    background-color: var(--card-color) !important;
    border-color: var(--card-border-color) !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}


.nav-tabs {
    border-bottom: 1px solid var(--card-border-color) !important;
}

.nav-tabs .nav-link {
    color: var(--text-secondary-color) !important;
    border: 1px solid transparent;
}

.nav-tabs .nav-link:hover {
    border-color: var(--card-border-color) var(--card-border-color) var(--card-border-color) !important;
    color: var(--primary-color) !important;
}

.nav-tabs .nav-link.active {
    background-color: var(--card-color) !important;
    border-color: var(--card-border-color) var(--card-border-color) var(--card-color) !important;
    color: var(--primary-color) !important;
}


.select2-container .select2-selection {
    background-color: var(--card-color) !important;
    border: 1px solid var(--card-border-color) !important;
    height: calc(2.25rem + 2px) !important; 
    padding-top: 4px;
    color: var(--text-primary-color) !important;
}

.select2-container .select2-selection__rendered {
    color: var(--text-primary-color) !important;
    line-height: 1.5 !important;
}

.select2-container .select2-selection__arrow {
    height: calc(2.25rem + 2px) !important;
}

.select2-container .select2-selection__arrow b {
    border-color: var(--text-secondary-color) transparent transparent transparent !important;
}

.select2-dropdown {
    background-color: var(--card-color) !important;
    border: 1px solid var(--card-border-color) !important;
    color: var(--text-primary-color) !important;
}

.select2-search__field {
    background-color: var(--background-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color) !important;
}

.select2-results__option {
    color: var(--text-primary-color) !important;
    background-color: var(--card-color) !important;
}

.select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

.select2-results__option[aria-selected="true"] {
    background-color: var(--background-color) !important;
    color: var(--primary-color) !important;
}


[data-bs-theme="dark"] .select2-container .select2-selection {
    background-color: var(--card-color) !important;
    border-color: var(--card-border-color) !important;
}

[data-bs-theme="dark"] .select2-container .select2-selection__rendered {
    color: var(--text-primary-color) !important;
}

[data-bs-theme="dark"] .select2-dropdown {
    background-color: var(--card-color) !important;
    border-color: var(--card-border-color) !important;
    color: var(--text-primary-color) !important;
}

[data-bs-theme="dark"] .select2-results__option {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
}

[data-bs-theme="dark"] .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary-color) !important;
    color: var(--secondary-color) !important;
}

[data-bs-theme="dark"] .select2-results__option[aria-selected="true"] {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-primary-color) !important;
}


.input-group > .select2-container--default {
    width: auto;
    flex: 1 1 auto;
}

.input-group > .select2-container--default .select2-selection--single {
    height: 100% !important;
    line-height: inherit !important;
    border-radius: 0 0.25rem 0.25rem 0 !important;
}



#dashboard-data > div[class*='col-'],
#card-row-1 .row > div[class*='col-'],
#card-row-2 .row > div[class*='col-'],
#card-row-3 .row > div[class*='col-'],
#card-row-4 .row > div[class*='col-'] {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
}

.card-dashboard {
    background-color: var(--card-color) !important;
    border: 1px solid var(--card-border-color);
    border-radius: 12px; 
    box-shadow: 0 4px 6px var(--shadow-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    padding: 20px; 
    height: 100%; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.card-dashboard:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px var(--shadow-color);
    border-color: var(--primary-color);
}


.card-dashboard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(var(--primary-rgb), 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.card-dashboard:hover::before {
    opacity: 1;
}

.card-dashboard p {
    font-size: 14px;
    color: var(--text-secondary-color);
    margin-bottom: 0;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.card-dashboard h5 {
    color: var(--text-primary-color);
    font-weight: 700;
    font-size: 1.5rem; 
    margin-bottom: 5px;
}


.card-dashboard a {
    text-decoration: none;
    display: block;
    height: 100%;
}

.media {
    display: flex;
    align-items: center;
    justify-content: space-between; 
}

.media-left {
    padding-right: 15px;
}

.media-left i {
    opacity: 0.9;
    transition: transform 0.3s ease;
}

.card-dashboard:hover .media-left i {
    transform: scale(1.1);
}

.media-body {
    flex: 1;
}

.media-text-right {
    text-align: right;
}


.p-15 {
    padding: 20px !important;
}




.color-primary { color: var(--primary-color) !important; }
.color-secondary { color: var(--secondary-color) !important; }
.color-success { color: var(--success-color) !important; }
.color-danger { color: var(--danger-color) !important; }
.color-warning { color: var(--warning-color) !important; }
.color-info { color: var(--info-color) !important; }


.shimmer-wrapper {
    position: relative;
    overflow: hidden;
    background-color: var(--card-color); 
}

.shimmer-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.1) 20%, 
        rgba(255, 255, 255, 0.2) 60%,
        rgba(255, 255, 255, 0)
    );
    animation: shimmer 2s infinite;
}

[data-bs-theme="light"] .shimmer-wrapper::after {
    background-image: linear-gradient(
        90deg,
        rgba(230, 230, 230, 0) 0,
        rgba(230, 230, 230, 0.4) 20%,
        rgba(230, 230, 230, 0.8) 60%,
        rgba(230, 230, 230, 0)
    );
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}


canvas {
    background-color: var(--card-color);
    border-radius: 8px;
    padding: 10px;
}




.spinner {
    display: inline-block;
    border: 3px solid rgba(var(--primary-rgb), 0.3);
    border-left-color: var(--primary-color);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    vertical-align: middle;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spinning {
    animation: spin 1s linear infinite;
}

.hidden {
    display: none !important;
}


.bg-gradient-161 {
    background: linear-gradient(135deg, var(--card-border-color), var(--background-color));
    color: var(--text-primary-color);
    border-bottom: 1px solid var(--card-border-color);
}


.tabulator .tabulator-cell .tabulator-action {
    color: var(--primary-color) !important;
    text-decoration: none;
    font-weight: 500;
}

.tabulator .tabulator-cell .tabulator-action:hover {
    color: var(--accent-color) !important;
    text-decoration: underline;
}


.timer-display {
    color: var(--text-secondary-color) !important;
    font-size: 0.85rem;
}




.dataTables_wrapper .dataTables_processing {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color) !important;
    box-shadow: 0 4px 15px var(--shadow-color) !important;
    border-radius: 8px;
    z-index: 1100;
}


.tbllist th:first-child, 
.tbllist tbody td:first-child,
.tbllist th:last-child, 
.tbllist tbody td:last-child {
    position: sticky !important;
    background-color: var(--card-color) !important; 
    z-index: 2;
}

.tbllist th:first-child, .tbllist td:first-child { left: 0; border-right: 1px solid var(--card-border-color) !important; }
.tbllist th:last-child, .tbllist td:last-child { right: 0; border-left: 1px solid var(--card-border-color) !important; }


table.dataTable {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border-collapse: collapse !important;
    width: 100% !important;
    border: none !important; 
}


.dataTables_wrapper {
    border: none !important;
}

table.dataTable th,
table.dataTable td {
    border-color: var(--card-border-color) !important;
    color: var(--text-primary-color) !important;
}


table.dataTable thead th {
    background-color: var(--background-color) !important;
    color: var(--text-primary-color) !important;
    border-bottom: 2px solid var(--card-border-color) !important;
    border-top: none !important;
}


.table th {
    background-image: none !important;
    background-color: var(--background-color) !important;
    color: var(--text-primary-color) !important;
    border-color: var(--card-border-color) !important;
}


table.dataTable tbody tr {
    background-color: var(--card-color) !important;
    border-bottom: 1px solid var(--card-border-color) !important;
}

table.dataTable.stripe tbody tr.odd, 
table.dataTable.display tbody tr.odd {
    background-color: rgba(0, 0, 0, 0.02) !important; 
}

[data-bs-theme="dark"] table.dataTable.stripe tbody tr.odd,
[data-bs-theme="dark"] table.dataTable.display tbody tr.odd {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

table.dataTable tbody tr:hover {
    background-color: rgba(var(--primary-rgb), 0.1) !important;
}


table.dataTable tbody > tr.selected,
table.dataTable tbody > tr.selected td,
table.dataTable tbody > tr.selected th,
#main-wrapper table.dataTable tbody > tr.selected td,
#main-wrapper table.dataTable tbody > tr.selected th,
.tbllist tbody > tr.selected td,
.table tbody > tr.selected td {
    background-color: rgba(var(--primary-rgb), 0.08) !important; 
    background-image: none !important;
    color: inherit !important;
}


table.dataTable tbody > tr.selected td:first-child,
.tbllist tbody > tr.selected td:first-child,
.table tbody > tr.selected td:first-child,
.tabulator-row.tabulator-selected .tabulator-cell:first-child {
    border-left: 4px solid var(--primary-color) !important;
}


.tbllist tbody > tr.selected td:first-child,
.tbllist tbody > tr.selected td:last-child {
    background-color: rgba(var(--primary-rgb), 0.08) !important;
}


[data-bs-theme="dark"] table.dataTable tbody > tr.selected,
[data-bs-theme="dark"] table.dataTable tbody > tr.selected td,
[data-bs-theme="dark"] table.dataTable tbody > tr.selected th,
[data-bs-theme="dark"] #main-wrapper table.dataTable tbody > tr.selected td,
[data-bs-theme="dark"] .tbllist tbody > tr.selected td {
    background-color: rgba(var(--primary-rgb), 0.15) !important;
    background-image: none !important;
    color: inherit !important;
}

[data-bs-theme="dark"] .tbllist tbody > tr.selected td:first-child,
[data-bs-theme="dark"] .tbllist tbody > tr.selected td:last-child {
    background-color: rgba(var(--primary-rgb), 0.15) !important;
}


.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--text-primary-color) !important;
    background-color: var(--card-color) !important;
    border: 1px solid var(--card-border-color) !important;
    border-radius: 4px;
    margin: 0 2px;
    padding: 5px 10px;
    transition: all 0.2s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--primary-color) !important;
    color: #fff !important;
    border-color: var(--primary-color) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: var(--background-color) !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    background-color: var(--card-color) !important;
    color: var(--text-secondary-color) !important;
    border-color: var(--card-border-color) !important;
    opacity: 0.5;
    cursor: not-allowed;
}


.tabulator-paginator button {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color) !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    margin: 0 2px !important;
}

.tabulator-paginator button:hover {
    background-color: var(--background-color) !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.tabulator-paginator button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.tabulator-page.active {
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent) !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
    color: var(--text-secondary-color) !important;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color) !important;
    padding: 4px;
    border-radius: 4px;
}


.summary-card {
    border: 1px solid var(--card-border-color);
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
}


.summary-card[data-color="primary"] { background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%); color: #fff; }
.summary-card[data-color="info"] { background: linear-gradient(135deg, #17a2b8 0%, #21c5de 100%); color: #fff; }
.summary-card[data-color="success"] { background: linear-gradient(135deg, #28a745 0%, #34d058 100%); color: #fff; }
.summary-card[data-color="danger"] { background: linear-gradient(135deg, #dc3545 0%, #f05463 100%); color: #fff; }
.summary-card[data-color="warning"] { background: linear-gradient(135deg, #ffc107 0%, #ffd043 100%); color: #212529; }
.summary-card[data-color="light"] { background: var(--background-color); color: var(--text-primary-color); }

.summary-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px var(--shadow-color);
}

.summary-card.inactive {
    opacity: 0.4;
    filter: grayscale(80%);
    transform: scale(0.95);
}

.summary-card.active {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 30px var(--shadow-color);
    border: 2px solid #fff !important;
    z-index: 10;
}

[data-bs-theme="dark"] .summary-card.active {
    border-color: var(--primary-color) !important;
}


.dropdown-menu.with-numbers {
    counter-reset: item;
}
.dropdown-menu.with-numbers .dropdown-item::before {
    content: counter(item);
    counter-increment: item;
    display: inline-block;
    width: 1.8em;
    height: 1.8em;
    line-height: 1.8em;
    text-align: center;
    background-color: var(--background-color);
    border-radius: 0.25rem;
    font-weight: bold;
    color: var(--text-secondary-color);
    margin-right: 0.8em;
}


#chkSearchByScanner {
    width: 1.2rem;
    height: 1.2rem;
    accent-color: var(--primary-color);
}


.jumbotron {
    background-color: var(--background-color) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid var(--card-border-color);
}


hr.solid {
    border-top: 2px solid var(--card-border-color);
}


.card-dashboard, 
.card-dashboard:hover,
a:has(> .card-dashboard),
a:has(> .card-dashboard):hover {
    cursor: default !important;
}


.card-dashboard i {
    text-shadow: none !important;
    box-shadow: none !important;
}


.btn, button, input[type="button"], input[type="submit"], input[type="reset"], .m-tab-btn, .toggle-font-size {
    border-radius: var(--radius-sm) !important;
}

.btn-sm, .btn-group-sm > .btn {
    border-radius: 6px !important;
}

.btn-lg, .btn-group-lg > .btn {
    border-radius: var(--radius-md) !important;
}

input, select, textarea, .form-control, .form-select, .input-group-text {
    border-radius: var(--radius-sm) !important;
}


.rounded-0 {
    border-radius: var(--radius-sm) !important;
}


.daterangepicker, .ui-datepicker, .datepicker, .bootstrap-datetimepicker-widget {
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid var(--card-border-color, rgba(0,0,0,0.15)) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
}

.daterangepicker .calendar-table {
    border-radius: 8px !important;
}


[data-theme="titanium-metallic"][data-bs-theme="dark"] .daterangepicker .ranges li:hover,
[data-theme="titanium-metallic"][data-bs-theme="dark"] .daterangepicker .ranges li.active,
[data-theme="titanium-metallic"][data-bs-theme="dark"] .daterangepicker td.active,
[data-theme="titanium-metallic"][data-bs-theme="dark"] .daterangepicker td.active:hover {
    background-color: var(--primary-color) !important;
    color: var(--secondary-color, #1e1e2d) !important;
    font-weight: 600 !important;
}

[data-theme="titanium-metallic"][data-bs-theme="dark"] .daterangepicker td.available:hover,
[data-theme="titanium-metallic"][data-bs-theme="dark"] .daterangepicker th.available:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--text-primary-color, #ffffff) !important;
}


[data-theme="titanium-metallic"][data-bs-theme="dark"] .btn-purple,
[data-theme="titanium-metallic"][data-bs-theme="dark"] .bg-primary,
[data-theme="titanium-metallic"][data-bs-theme="dark"] .page-item.active .page-link,
[data-theme="titanium-metallic"][data-bs-theme="dark"] .list-group-item.active {
    color: var(--secondary-color, #263238) !important;
}


[data-theme="titanium-metallic"][data-bs-theme="dark"] .select2-results__option--highlighted[aria-selected] {
    background-color: var(--accent-color) !important;
    color: #ffffff !important;
}


[data-theme="titanium-metallic"][data-bs-theme="dark"] .table-report thead th,
[data-theme="titanium-metallic"][data-bs-theme="dark"] .report-title,
[data-theme="titanium-metallic"][data-bs-theme="dark"] .step-number,
[data-theme="titanium-metallic"][data-bs-theme="dark"] .floating-btn:hover {
    color: var(--secondary-color, #263238) !important;
}


.dropdown-menu {
    border-radius: 10px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
}


[data-bs-theme="dark"] .tabulator-header-filter input:focus,
[data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-col .tabulator-header-filter input:focus,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input:focus,
[data-bs-theme="dark"] #myInput:focus {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.05) !important;
}



/* =====================================================================
   Guided Tour (intro.js) Theme-Adaptive Color Tone & Elevated Styling
   ===================================================================== */
.introjs-overlay {
    background: rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1.0 !important;
}

.introjs-helperLayer {
    background: transparent !important;
    border: 2px solid var(--primary-color, #4f46e5) !important;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55), 0 0 25px rgba(var(--primary-rgb, 79, 70, 229), 0.6) !important;
    border-radius: 8px !important;
    transition: all 0.25s ease-out !important;
}

/* Ensure the targeted element inside menu is crystal clear and not shaded */
.introjs-showElement,
tr.introjs-showElement > td,
tr.introjs-showElement > th {
    z-index: 9999999 !important;
}

#sidebarnav a.introjs-showElement {
    background: var(--card-color, #ffffff) !important;
    color: var(--primary-color, #4f46e5) !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

[data-bs-theme="dark"] #sidebarnav a.introjs-showElement {
    background: #1e293b !important;
    color: #38bdf8 !important;
}

/* Light Theme (Default) */
.introjs-tooltip {
    background: #ffffff !important;
    color: #1e293b !important;
    border-radius: 18px !important;
    padding: 1.35rem 1.4rem 1.15rem !important;
    box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(15, 23, 42, 0.08) !important;
    min-width: 290px !important;
    max-width: 380px !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    font-family: inherit !important;
}

/* Dark Theme */
[data-bs-theme="dark"] .introjs-tooltip {
    background: #151926 !important;
    color: #f1f5f9 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 20px rgba(var(--primary-rgb, 79, 70, 229), 0.18) !important;
}

/* Arrow styling */
.introjs-arrow {
    border-color: transparent !important;
}
.introjs-arrow.bottom { border-top-color: #ffffff !important; }
.introjs-arrow.top { border-bottom-color: #ffffff !important; }
.introjs-arrow.left { border-right-color: #ffffff !important; }
.introjs-arrow.right { border-left-color: #ffffff !important; }

[data-bs-theme="dark"] .introjs-arrow.bottom { border-top-color: #151926 !important; }
[data-bs-theme="dark"] .introjs-arrow.top { border-bottom-color: #151926 !important; }
[data-bs-theme="dark"] .introjs-arrow.left { border-right-color: #151926 !important; }
[data-bs-theme="dark"] .introjs-arrow.right { border-left-color: #151926 !important; }

/* Text & Typography */
.introjs-tooltiptext {
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
    color: #334155 !important;
}

.introjs-tooltiptext strong {
    color: #0f172a !important;
    font-weight: 700 !important;
}

[data-bs-theme="dark"] .introjs-tooltiptext {
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .introjs-tooltiptext strong {
    color: #ffffff !important;
}

.introjs-tooltip-header,
.introjs-tooltip-title {
    color: #0f172a !important;
    font-weight: 800 !important;
    letter-spacing: -0.2px !important;
}

[data-bs-theme="dark"] .introjs-tooltip-header,
[data-bs-theme="dark"] .introjs-tooltip-title {
    color: #f8fafc !important;
}

/* Close/Dismiss Button (X) */
.introjs-skipbutton {
    width: 26px !important;
    height: 26px !important;
    line-height: 24px !important;
    text-align: center !important;
    border-radius: 50% !important;
    color: #64748b !important;
    background: rgba(148, 163, 184, 0.15) !important;
    box-shadow: none !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.introjs-skipbutton:hover {
    color: #dc2626 !important;
    background: rgba(220, 38, 38, 0.12) !important;
    transform: scale(1.08) !important;
}

[data-bs-theme="dark"] .introjs-skipbutton {
    color: #94a3b8 !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .introjs-skipbutton:hover {
    color: #f87171 !important;
    background: rgba(239, 68, 68, 0.2) !important;
}

/* Action Buttons (Next / Done / Back) */
.introjs-tooltipbuttons {
    border-top: 1px solid rgba(226, 232, 240, 0.8) !important;
    padding-top: 12px !important;
    margin-top: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

[data-bs-theme="dark"] .introjs-tooltipbuttons {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.introjs-button {
    background: var(--primary-color, #4f46e5) !important;
    color: #ffffff !important;
    text-shadow: none !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 7px 18px !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb, 79, 70, 229), 0.32) !important;
}

.introjs-button:hover {
    background: color-mix(in srgb, #000000 10%, var(--primary-color, #4f46e5)) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(var(--primary-rgb, 79, 70, 229), 0.45) !important;
    color: #ffffff !important;
}

/* Secondary / Previous Button */
.introjs-prevbutton {
    background: #f1f5f9 !important;
    color: #475569 !important;
    box-shadow: none !important;
    border: 1px solid #e2e8f0 !important;
}

.introjs-prevbutton:hover {
    background: #e2e8f0 !important;
    color: #1e293b !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] .introjs-prevbutton {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .introjs-prevbutton:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
}

/* Disabled button state */
.introjs-disabled, .introjs-disabled:hover {
    background: #f8fafc !important;
    color: #94a3b8 !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    transform: none !important;
}

[data-bs-theme="dark"] .introjs-disabled, [data-bs-theme="dark"] .introjs-disabled:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: rgba(255, 255, 255, 0.28) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Progress bar */
.introjs-progress {
    background-color: rgba(148, 163, 184, 0.2) !important;
    border-radius: 6px !important;
    height: 5px !important;
    overflow: hidden !important;
    margin: 12px 0 6px !important;
}

[data-bs-theme="dark"] .introjs-progress {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

.introjs-progressbar {
    background: linear-gradient(90deg, var(--primary-color, #4f46e5) 0%, #38bdf8 100%) !important;
    border-radius: 6px !important;
}

/* Step Bullets / Dots */
.introjs-bullets {
    padding: 6px 0 2px !important;
}

.introjs-bullets ul li a {
    background: rgba(148, 163, 184, 0.4) !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    transition: all 0.25s ease !important;
}

.introjs-bullets ul li a:hover {
    background: rgba(148, 163, 184, 0.7) !important;
}

.introjs-bullets ul li a.active {
    background: var(--primary-color, #4f46e5) !important;
    width: 22px !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb, 79, 70, 229), 0.4) !important;
}

[data-bs-theme="dark"] .introjs-bullets ul li a {
    background: rgba(255, 255, 255, 0.25) !important;
}

[data-bs-theme="dark"] .introjs-bullets ul li a.active {
    background: var(--primary-color, #6366f1) !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.5) !important;
}


[data-bs-theme="dark"] .view-content {
    background-color: transparent !important;
}

[data-bs-theme="dark"] .bg-white {
    background-color: var(--card-color) !important;
    color: var(--text-primary-color) !important;
    border-color: var(--card-border-color) !important;
}

[data-bs-theme="dark"] .bg-white input,
[data-bs-theme="dark"] .bg-white span,
[data-bs-theme="dark"] .bg-white select,
[data-bs-theme="dark"] .bg-white button,
[data-bs-theme="dark"] .bg-white .input-group-text,
[data-bs-theme="dark"] .bg-white .form-control {
    background-color: transparent !important;
    color: var(--text-primary-color) !important;
    border-color: var(--card-border-color) !important;
}

[data-bs-theme="dark"] .filter-section {
    background-color: var(--card-color) !important;
    border-color: var(--card-border-color) !important;
}

[data-bs-theme="dark"] .input-group .bg-white,
[data-bs-theme="dark"] .input-group-text.bg-white,
[data-bs-theme="dark"] input.bg-white {
    background-color: var(--background-color) !important;
    color: var(--text-primary-color) !important;
    border-color: var(--card-border-color) !important;
}

[data-bs-theme="dark"] .summary-loader {
    background: rgba(18, 18, 24, 0.7) !important;
}

[data-bs-theme="dark"] .bg-light {
    background-color: var(--background-color) !important;
    color: var(--text-primary-color) !important;
}

[data-bs-theme="dark"] .btn-light {
    background-color: var(--background-color) !important;
    color: var(--text-primary-color) !important;
    border-color: var(--card-border-color) !important;
}

[data-bs-theme="dark"] .btn-light:hover {
    background-color: var(--card-border-color) !important;
    color: var(--text-primary-color) !important;
}

[data-bs-theme="dark"] [style*="whitesmoke"] {
    background: var(--card-color) !important;
    background-color: var(--card-color) !important;
}


[data-bs-theme="light"] {
    --text-primary-color: #000000 !important;
    --text-secondary-color: #0f172a !important;
}

[data-bs-theme="dark"] {
    --text-primary-color: #ffffff !important;
    --text-secondary-color: #f9fafb !important;
}


.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info,
.btn-gradient-primary, .btn-gradient-success, .btn-gradient-danger, .btn-gradient-warning, .btn-gradient-info {
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 30px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
}

.btn-primary, .btn-gradient-primary {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
}
.btn-primary:hover, .btn-gradient-primary:hover,
.btn-primary:focus, .btn-gradient-primary:focus {
    transform: translateY(-2px) scale(1.02) !important;
    filter: brightness(1.15) !important;
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.35) !important;
    color: #ffffff !important;
}

.btn-success, .btn-gradient-success {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
}
.btn-success:hover, .btn-gradient-success:hover,
.btn-success:focus, .btn-gradient-success:focus {
    transform: translateY(-2px) scale(1.02) !important;
    filter: brightness(1.1) !important;
    box-shadow: 0 6px 20px rgba(52, 211, 153, 0.4) !important;
    color: #ffffff !important;
}

.btn-danger, .btn-gradient-danger {
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important;
}
.btn-danger:hover, .btn-gradient-danger:hover,
.btn-danger:focus, .btn-gradient-danger:focus {
    transform: translateY(-2px) scale(1.02) !important;
    filter: brightness(1.15) !important;
    box-shadow: 0 6px 20px rgba(244, 63, 94, 0.35) !important;
    color: #ffffff !important;
}

.btn-warning, .btn-gradient-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #1f2937 !important;
}
.btn-warning:hover, .btn-gradient-warning:hover,
.btn-warning:focus, .btn-gradient-warning:focus {
    transform: translateY(-2px) scale(1.02) !important;
    filter: brightness(1.15) !important;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35) !important;
    color: #1f2937 !important;
}

.btn-info, .btn-gradient-info {
    background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%) !important;
}
.btn-info:hover, .btn-gradient-info:hover,
.btn-info:focus, .btn-gradient-info:focus {
    transform: translateY(-2px) scale(1.02) !important;
    filter: brightness(1.15) !important;
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.35) !important;
    color: #ffffff !important;
}


[data-bs-theme="dark"] .btn-primary, [data-bs-theme="dark"] .btn-gradient-primary {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
}
[data-bs-theme="dark"] .btn-success, [data-bs-theme="dark"] .btn-gradient-success {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
}
[data-bs-theme="dark"] .btn-danger, [data-bs-theme="dark"] .btn-gradient-danger {
    background: linear-gradient(135deg, #fb7185 0%, #f43f5e 100%) !important;
}
[data-bs-theme="dark"] .btn-warning, [data-bs-theme="dark"] .btn-gradient-warning {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    color: #0f172a !important;
}
[data-bs-theme="dark"] .btn-info, [data-bs-theme="dark"] .btn-gradient-info {
    background: linear-gradient(135deg, #38bdf8 0%, #3b82f6 100%) !important;
}


.btn-outline-secondary {
    border: 1px solid #4b5563 !important;
    color: #4b5563 !important;
    background-color: transparent !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.btn-outline-secondary:hover, 
.btn-outline-secondary.active, 
.btn-outline-secondary:active,
.btn-outline-secondary:focus {
    background-color: #4b5563 !important;
    color: #ffffff !important;
    border-color: #4b5563 !important;
}


[data-bs-theme="dark"] .btn-outline-secondary {
    border-color: #9ca3af !important;
    color: #9ca3af !important;
    background-color: transparent !important;
}

[data-bs-theme="dark"] .btn-outline-secondary:hover, 
[data-bs-theme="dark"] .btn-outline-secondary.active, 
[data-bs-theme="dark"] .btn-outline-secondary:active,
[data-bs-theme="dark"] .btn-outline-secondary:focus {
    background-color: #9ca3af !important;
    color: #111827 !important;
    border-color: #9ca3af !important;
}



.ui-menu-item-wrapper.ui-state-active,
.ui-menu-item-wrapper:hover,
.ui-menu-item .ui-state-active,
.ui-menu-item:hover,
.ui-state-active,
.ui-state-focus {
    background: rgba(var(--primary-rgb, 79, 70, 229), 0.82) !important;
    color: #ffffff !important;
    border-color: rgba(var(--primary-rgb, 79, 70, 229), 0.4) !important;
    outline: 2px solid rgba(var(--primary-rgb, 79, 70, 229), 0.4) !important;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb, 79, 70, 229), 0.25) !important;
}

.ui-menu-item-wrapper.ui-state-active *,
.ui-menu-item-wrapper:hover *,
.ui-menu-item .ui-state-active *,
.ui-state-active *,
.ui-state-focus *,
.ui-menu-item-wrapper.ui-state-active .text-muted,
.ui-menu-item-wrapper:hover .text-muted,
.ui-menu-item:hover .text-muted,
.ui-state-active .text-muted,
.ui-state-focus .text-muted,
.autocomplete-item:hover .text-muted,
.autocomplete-item:hover p,
.autocomplete-item:hover span,
.autocomplete-item:has(.ui-state-active) .text-muted,
.autocomplete-item:has(.ui-state-active) p,
.autocomplete-item:has(.ui-state-active) span {
    color: #ffffff !important;
    background: transparent !important;
}

.ui-menu-item-wrapper.ui-state-active .badge,
.ui-menu-item-wrapper:hover .badge,
.ui-menu-item .ui-state-active .badge,
.ui-state-active .badge,
.ui-state-focus .badge {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow: none !important;
}


[data-bs-theme="dark"] .ui-menu-item-wrapper.ui-state-active,
[data-bs-theme="dark"] .ui-menu-item-wrapper:hover,
[data-bs-theme="dark"] .ui-menu-item .ui-state-active,
[data-bs-theme="dark"] .ui-state-active,
[data-bs-theme="dark"] .ui-state-focus {
    background: rgba(var(--primary-rgb), 0.85) !important;
    color: #ffffff !important;
    outline-color: rgba(var(--primary-rgb), 0.5) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}

[data-bs-theme="dark"] .ui-menu-item-wrapper.ui-state-active *,
[data-bs-theme="dark"] .ui-menu-item-wrapper:hover *,
[data-bs-theme="dark"] .ui-menu-item .ui-state-active *,
[data-bs-theme="dark"] .ui-state-active *,
[data-bs-theme="dark"] .ui-state-focus * {
    color: #ffffff !important;
    background: transparent !important;
}

[data-bs-theme="dark"] .ui-menu-item-wrapper.ui-state-active .badge,
[data-bs-theme="dark"] .ui-menu-item-wrapper:hover .badge,
[data-bs-theme="dark"] .ui-menu-item .ui-state-active .badge,
[data-bs-theme="dark"] .ui-state-active .badge,
[data-bs-theme="dark"] .ui-state-focus .badge {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

[data-bs-theme="dark"] .bg-white button,
[data-bs-theme="dark"] .bg-white .input-group-text,
[data-bs-theme="dark"] .bg-white .form-control {
    background-color: transparent !important;
    color: var(--text-primary-color) !important;
    border-color: var(--card-border-color) !important;
}

[data-bs-theme="dark"] .filter-section {
    background-color: var(--card-color) !important;
    border-color: var(--card-border-color) !important;
}

[data-bs-theme="dark"] .input-group .bg-white,
[data-bs-theme="dark"] .input-group-text.bg-white,
[data-bs-theme="dark"] input.bg-white {
    background-color: var(--background-color) !important;
    color: var(--text-primary-color) !important;
    border-color: var(--card-border-color) !important;
}

[data-bs-theme="dark"] .summary-loader {
    background: rgba(18, 18, 24, 0.7) !important;
}

[data-bs-theme="dark"] .bg-light {
    background-color: var(--background-color) !important;
    color: var(--text-primary-color) !important;
}

[data-bs-theme="dark"] .btn-light {
    background-color: var(--background-color) !important;
    color: var(--text-primary-color) !important;
    border-color: var(--card-border-color) !important;
}

[data-bs-theme="dark"] .btn-light:hover {
    background-color: var(--card-border-color) !important;
    color: var(--text-primary-color) !important;
}

[data-bs-theme="dark"] [style*="whitesmoke"] {
    background: var(--card-color) !important;
    background-color: var(--card-color) !important;
}


[data-bs-theme="light"] {
    --text-primary-color: #000000 !important;
    --text-secondary-color: #0f172a !important;
}

[data-bs-theme="dark"] {
    --text-primary-color: #ffffff !important;
    --text-secondary-color: #f9fafb !important;
}


.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info,
.btn-gradient-primary, .btn-gradient-success, .btn-gradient-danger, .btn-gradient-warning, .btn-gradient-info {
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 30px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
}

.btn-primary, .btn-gradient-primary {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
}
.btn-primary:hover, .btn-gradient-primary:hover,
.btn-primary:focus, .btn-gradient-primary:focus {
    transform: translateY(-2px) scale(1.02) !important;
    filter: brightness(1.15) !important;
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.35) !important;
    color: #ffffff !important;
}

.btn-success, .btn-gradient-success {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
}
.btn-success:hover, .btn-gradient-success:hover,
.btn-success:focus, .btn-gradient-success:focus {
    transform: translateY(-2px) scale(1.02) !important;
    filter: brightness(1.1) !important;
    box-shadow: 0 6px 20px rgba(52, 211, 153, 0.4) !important;
    color: #ffffff !important;
}

.btn-danger, .btn-gradient-danger {
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important;
}
.btn-danger:hover, .btn-gradient-danger:hover,
.btn-danger:focus, .btn-gradient-danger:focus {
    transform: translateY(-2px) scale(1.02) !important;
    filter: brightness(1.15) !important;
    box-shadow: 0 6px 20px rgba(244, 63, 94, 0.35) !important;
    color: #ffffff !important;
}

.btn-warning, .btn-gradient-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #1f2937 !important;
}
.btn-warning:hover, .btn-gradient-warning:hover,
.btn-warning:focus, .btn-gradient-warning:focus {
    transform: translateY(-2px) scale(1.02) !important;
    filter: brightness(1.15) !important;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35) !important;
    color: #1f2937 !important;
}

.btn-info, .btn-gradient-info {
    background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%) !important;
}
.btn-info:hover, .btn-gradient-info:hover,
.btn-info:focus, .btn-gradient-info:focus {
    transform: translateY(-2px) scale(1.02) !important;
    filter: brightness(1.15) !important;
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.35) !important;
    color: #ffffff !important;
}


[data-bs-theme="dark"] .btn-primary, [data-bs-theme="dark"] .btn-gradient-primary {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
}
[data-bs-theme="dark"] .btn-success, [data-bs-theme="dark"] .btn-gradient-success {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
}
[data-bs-theme="dark"] .btn-danger, [data-bs-theme="dark"] .btn-gradient-danger {
    background: linear-gradient(135deg, #fb7185 0%, #f43f5e 100%) !important;
}
[data-bs-theme="dark"] .btn-warning, [data-bs-theme="dark"] .btn-gradient-warning {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    color: #0f172a !important;
}
[data-bs-theme="dark"] .btn-info, [data-bs-theme="dark"] .btn-gradient-info {
    background: linear-gradient(135deg, #38bdf8 0%, #3b82f6 100%) !important;
}


.btn-outline-secondary {
    border: 1px solid #4b5563 !important;
    color: #4b5563 !important;
    background-color: transparent !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.btn-outline-secondary:hover, 
.btn-outline-secondary.active, 
.btn-outline-secondary:active,
.btn-outline-secondary:focus {
    background-color: #4b5563 !important;
    color: #ffffff !important;
    border-color: #4b5563 !important;
}


[data-bs-theme="dark"] .btn-outline-secondary {
    border-color: #9ca3af !important;
    color: #9ca3af !important;
    background-color: transparent !important;
}

[data-bs-theme="dark"] .btn-outline-secondary:hover, 
[data-bs-theme="dark"] .btn-outline-secondary.active, 
[data-bs-theme="dark"] .btn-outline-secondary:active,
[data-bs-theme="dark"] .btn-outline-secondary:focus {
    background-color: #9ca3af !important;
    color: #111827 !important;
    border-color: #9ca3af !important;
}




.sidebar-nav ul li a i {
    margin-right: 8px !important;
}


table, 
.table,
.table-bordered,
.table-bordered th, 
.table-bordered td,
.table > thead,
.table > tbody,
.table > tfoot,
.table > thead > tr,
.table > tbody > tr,
.table > tfoot > tr,
.table th,
.table td,
table.dataTable th,
table.dataTable td,
.table > :not(caption) > * > * {
    border-color: rgba(0, 0, 0, 0.08) !important;
    border-top-color: rgba(0, 0, 0, 0.08) !important;
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
    border-left-color: rgba(0, 0, 0, 0.08) !important;
    border-right-color: rgba(0, 0, 0, 0.08) !important;
}

[data-bs-theme="dark"] table, 
[data-bs-theme="dark"] .table,
[data-bs-theme="dark"] .table-bordered,
[data-bs-theme="dark"] .table-bordered th, 
[data-bs-theme="dark"] .table-bordered td,
[data-bs-theme="dark"] .table > thead,
[data-bs-theme="dark"] .table > tbody,
[data-bs-theme="dark"] .table > tfoot,
[data-bs-theme="dark"] .table > thead > tr,
[data-bs-theme="dark"] .table > tbody > tr,
[data-bs-theme="dark"] .table > tfoot > tr,
[data-bs-theme="dark"] .table th,
[data-bs-theme="dark"] .table td,
[data-bs-theme="dark"] table.dataTable th,
[data-bs-theme="dark"] table.dataTable td,
[data-bs-theme="dark"] .table > :not(caption) > * > * {
    border-color: rgba(255, 255, 255, 0.08) !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    border-left-color: rgba(255, 255, 255, 0.08) !important;
    border-right-color: rgba(255, 255, 255, 0.08) !important;
}


.dataTables_scrollBody,
.dataTables_scrollHead,
.dataTables_scrollFoot {
    border-color: rgba(0, 0, 0, 0.08) !important;
    border-top-color: rgba(0, 0, 0, 0.08) !important;
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

[data-bs-theme="dark"] .dataTables_scrollBody,
[data-bs-theme="dark"] .dataTables_scrollHead,
[data-bs-theme="dark"] .dataTables_scrollFoot {
    border-color: rgba(255, 255, 255, 0.08) !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}


.jsgrid,
.jsgrid-grid-header,
.jsgrid-grid-body,
.jsgrid-table,
.jsgrid-cell,
.jsgrid-header-row > .jsgrid-header-cell,
.jsgrid-filter-row > .jsgrid-cell,
.jsgrid-insert-row > .jsgrid-cell,
.jsgrid-edit-row > .jsgrid-cell,
.jsgrid-selected-row > .jsgrid-cell,
.jsgrid-pager-container {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-bs-theme="dark"] .jsgrid,
[data-bs-theme="dark"] .jsgrid-grid-header,
[data-bs-theme="dark"] .jsgrid-grid-body,
[data-bs-theme="dark"] .jsgrid-table,
[data-bs-theme="dark"] .jsgrid-cell,
[data-bs-theme="dark"] .jsgrid-header-row > .jsgrid-header-cell,
[data-bs-theme="dark"] .jsgrid-filter-row > .jsgrid-cell,
[data-bs-theme="dark"] .jsgrid-insert-row > .jsgrid-cell,
[data-bs-theme="dark"] .jsgrid-edit-row > .jsgrid-cell,
[data-bs-theme="dark"] .jsgrid-selected-row > .jsgrid-cell,
[data-bs-theme="dark"] .jsgrid-pager-container {
    border-color: rgba(255, 255, 255, 0.08) !important;
}


.tabulator,
.tabulator-header,
.tabulator-col,
.tabulator-row,
.tabulator-cell {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-bs-theme="dark"] .tabulator,
[data-bs-theme="dark"] .tabulator-header,
[data-bs-theme="dark"] .tabulator-col,
[data-bs-theme="dark"] .tabulator-row,
[data-bs-theme="dark"] .tabulator-cell {
    border-color: rgba(255, 255, 255, 0.08) !important;
}


.tabulator,
.tabulator-header {
    border-top: none !important;
}


#SalesItems,
#SalesItems tr,
#SalesItems th,
#SalesItems td,
#SalesItems thead,
#SalesItems tbody,
#SalesItems thead th,
#SalesItems tbody td {
    border-color: rgba(0, 0, 0, 0.08) !important;
    border-top-color: rgba(0, 0, 0, 0.08) !important;
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
    border-left-color: rgba(0, 0, 0, 0.08) !important;
    border-right-color: rgba(0, 0, 0, 0.08) !important;
}

[data-bs-theme="dark"] #SalesItems,
[data-bs-theme="dark"] #SalesItems tr,
[data-bs-theme="dark"] #SalesItems th,
[data-bs-theme="dark"] #SalesItems td,
[data-bs-theme="dark"] #SalesItems thead,
[data-bs-theme="dark"] #SalesItems tbody,
[data-bs-theme="dark"] #SalesItems thead th,
[data-bs-theme="dark"] #SalesItems tbody td {
    border-color: rgba(255, 255, 255, 0.08) !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    border-left-color: rgba(255, 255, 255, 0.08) !important;
    border-right-color: rgba(255, 255, 255, 0.08) !important;
}


#SalesItems {
    border-top: none !important;
}
#SalesItems thead tr:first-child th {
    border-top: none !important;
}


.company-item {
    transition: all 0.2s ease;
    color: var(--text-primary-color) !important;
}

.company-item:hover {
    background: rgba(var(--primary-rgb, 79, 70, 229), 0.12) !important;
    color: var(--text-primary-color) !important;
}

.company-item-active {
    background: rgba(var(--primary-rgb, 79, 70, 229), 0.15) !important;
    color: var(--text-primary-color) !important;
    border: 1px solid rgba(var(--primary-rgb, 79, 70, 229), 0.3) !important;
}

[data-bs-theme="dark"] .company-item:hover {
    background: rgba(var(--primary-rgb, 99, 102, 241), 0.2) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .company-item-active {
    background: rgba(var(--primary-rgb, 99, 102, 241), 0.25) !important;
    color: #ffffff !important;
    border: 1px solid rgba(var(--primary-rgb, 99, 102, 241), 0.4) !important;
}

[data-bs-theme="dark"] .company-item-active span,
[data-bs-theme="dark"] .company-item-active i,
[data-bs-theme="dark"] .company-item:hover span,
[data-bs-theme="dark"] .company-item:hover i {
    color: #ffffff !important;
}


.sidebar-nav ul li ul {
    padding-left: 16px !important;
}

.sidebar-nav ul li ul li a {
    padding: 8px 20px 8px 10px !important;
}

.sidebar-nav ul li ul li a span,
.sidebar-nav ul li ul li a i {
    margin-right: 8px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    width: 18px !important;
    min-width: 18px !important;
    text-align: center !important;
}


.jsgrid-footer-row > .jsgrid-cell {
    background-color: #f8fafc !important;
    color: var(--text-primary-color) !important;
    font-weight: 700 !important;
    border-top: 2px solid rgba(0, 0, 0, 0.08) !important;
}

[data-bs-theme="dark"] .jsgrid-footer-row > .jsgrid-cell {
    background-color: transparent !important;
    color: var(--text-primary-color) !important;
    font-weight: 700 !important;
    border-top: 2px solid rgba(255, 255, 255, 0.08) !important;
}


[data-theme="titanium-metallic"][data-bs-theme="dark"] .ui-menu-item-wrapper:hover,
[data-theme="titanium-metallic"][data-bs-theme="dark"] .ui-menu-item-wrapper.ui-state-active,
[data-theme="titanium-metallic"][data-bs-theme="dark"] .autocomplete-item:hover,
[data-theme="titanium-metallic"][data-bs-theme="dark"] .autocomplete-item:has(.ui-state-active) {
    background-color: var(--accent-color) !important;
    color: #ffffff !important;
}

[data-theme="titanium-metallic"][data-bs-theme="dark"] .ui-menu-item-wrapper:hover *,
[data-theme="titanium-metallic"][data-bs-theme="dark"] .ui-menu-item-wrapper.ui-state-active *,
[data-theme="titanium-metallic"][data-bs-theme="dark"] .autocomplete-item:hover *,
[data-theme="titanium-metallic"][data-bs-theme="dark"] .autocomplete-item:has(.ui-state-active) * {
    color: #ffffff !important;
    background: transparent !important;
}


#AddPay {
    background: linear-gradient(135deg, #094024 0%, #157347 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 6px rgba(21, 115, 71, 0.15) !important;
}

#AddPay:hover {
    background: linear-gradient(135deg, #062c19 0%, #0e5232 100%) !important;
    box-shadow: 0 6px 12px rgba(21, 115, 71, 0.25) !important;
    transform: translateY(-1px) !important;
}

#AddPay:active {
    transform: translateY(0) !important;
}

/* Global Select2 Hover and Selection Fix for SPA compatibility */
html body .select2-container .select2-results__options .select2-results__option[aria-selected="true"],
html body .select2-container .select2-results__options .select2-results__option[aria-selected="true"].select2-results__option--selectable {
    background-color: #6f42c1 !important;
    color: #ffffff !important;
}

html body .select2-container .select2-results__options .select2-results__option[aria-selected="true"].select2-results__option--highlighted,
html body .select2-container .select2-results__options .select2-results__option[aria-selected="true"].select2-results__option--selectable.select2-results__option--highlighted {
    background-color: #5a35a2 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   GLOBAL MOBILE RESPONSIVE ENHANCEMENTS (360px - 768px Viewports)
   ========================================================================== */

/* Prevent horizontal body overflow across all pages */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

#main-wrapper {
    max-width: 100vw;
    overflow-x: hidden;
    width: 100%;
}

/* Tables, Tabulator grids, JSGrid & DataTables internal scroll container */
.table-responsive,
.tabulator,
.jsgrid,
.dataTables_wrapper {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Base mobile responsive layout rules (< 992px) */
@media (max-width: 991.98px) {
    .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1045 !important;
    }

    .dropdown-menu {
        max-width: calc(100vw - 20px) !important;
    }

    .dropdown-menu-end {
        right: 0 !important;
        left: auto !important;
    }
}

/* Sidebar Drawer & Mobile Viewport Rules (< 1170px) */
@media (max-width: 1169.98px) {
    .left-sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: -270px !important;
        width: 260px !important;
        z-index: 1055 !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: none !important;
        display: block !important;
    }

    .show-sidebar .left-sidebar,
    body.sidebar-open-mobile .left-sidebar {
        left: 0 !important;
        box-shadow: 4px 0 25px rgba(0, 0, 0, 0.25) !important;
    }

    .page-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    .mobile-sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        z-index: 1050;
    }
}

/* Mobile Screen Specific Rules (< 768px) */
@media (max-width: 767.98px) {
    .page-wrapper {
        padding: 60px 8px 15px 8px !important;
        margin-left: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    .container-fluid {
        padding-left: 4px !important;
        padding-right: 4px !important;
        padding-top: 4px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .card {
        margin-bottom: 12px !important;
        border-radius: 10px !important;
    }

    .card-body {
        padding: 12px 10px !important;
    }

    .card-header {
        padding: 10px 12px !important;
    }

    .card-header .d-flex {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .card-header .d-flex > div,
    .card-header .d-flex > .btn,
    .card-header .d-flex > .btn-group {
        width: 100% !important;
    }

    /* List filter toolbar stacking */
    .filter-toolbar,
    .search-filter-bar,
    .erp-pagehead {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .erp-pagehead .erp-title {
        font-size: 18px !important;
    }

    /* Touch target sizes & Form control mobile ergonomics */
    .btn {
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn-sm {
        min-height: 32px;
        padding: 4px 10px !important;
        font-size: 12px !important;
    }

    .form-control,
    .form-select,
    .select2-container .select2-selection {
        min-height: 38px !important;
        font-size: 13.5px !important;
    }

    /* Select2 full width on mobile */
    .select2-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Grid & Tabulator styling for narrow mobile devices */
    .tabulator {
        border-radius: 8px !important;
        font-size: 12px !important;
    }

    .tabulator .tabulator-header .tabulator-col .tabulator-col-content {
        padding: 6px 4px !important;
    }

    .tabulator .tabulator-cell {
        padding: 6px 4px !important;
    }

    /* Pagination controls */
    .pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 3px !important;
    }

    .pagination .page-item .page-link {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
}

/* Small Smartphone Screen Rules (< 576px / 360px-480px viewports) */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100% - 1rem) !important;
    }

    .modal-content {
        border-radius: 12px !important;
    }

    .modal-header {
        padding: 10px 14px !important;
    }

    .modal-body {
        padding: 12px 14px !important;
        max-height: calc(100vh - 140px) !important;
        overflow-y: auto !important;
    }

    .modal-footer {
        padding: 8px 14px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .modal-footer > * {
        margin: 0 !important;
        flex: 1 1 auto !important;
        width: 100% !important;
    }

    /* Stack btn-group on narrow mobile */
    .btn-group.stack-mobile {
        flex-direction: column !important;
        width: 100% !important;
    }

    .btn-group.stack-mobile > .btn {
        width: 100% !important;
        border-radius: 6px !important;
        margin-bottom: 4px !important;
    }

    /* Summary cards & stats on mobile */
    .summary-card,
    .erp-stat-card {
        padding: 12px !important;
        margin-bottom: 10px !important;
    }
}

/* =====================================================================
   ERP Page Header Buttons & Action Controls High-Contrast Enforcement
   ===================================================================== */
.erp-btn.primary,
.erp-pagehead .erp-btn.primary,
#btnQuickAdd,
#btnCreate.erp-btn {
    background: linear-gradient(135deg, var(--primary-color, #4f46e5) 0%, var(--accent-color, #6366f1) 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
    font-weight: 700 !important;
}

.erp-btn.primary *,
.erp-pagehead .erp-btn.primary *,
#btnQuickAdd *,
#btnCreate.erp-btn * {
    color: #ffffff !important;
}

.erp-btn.primary:hover,
.erp-pagehead .erp-btn.primary:hover,
#btnQuickAdd:hover,
#btnCreate.erp-btn:hover {
    filter: brightness(1.15) !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .erp-btn.primary,
[data-bs-theme="dark"] .erp-pagehead .erp-btn.primary,
[data-bs-theme="dark"] #btnQuickAdd,
[data-bs-theme="dark"] #btnCreate.erp-btn {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.4) !important;
}

[data-theme="silver-metallic"] .erp-btn.primary,
[data-theme="titanium-metallic"] .erp-btn.primary,
[data-theme="midnight-metallic"] .erp-btn.primary,
[data-theme="silver-metallic"] .btn-primary,
[data-theme="titanium-metallic"] .btn-primary,
[data-theme="midnight-metallic"] .btn-primary,
[data-bs-theme="dark"] [data-theme="silver-metallic"] .erp-btn.primary,
[data-bs-theme="dark"] [data-theme="titanium-metallic"] .erp-btn.primary,
[data-bs-theme="dark"] [data-theme="midnight-metallic"] .erp-btn.primary,
[data-bs-theme="dark"] [data-theme="silver-metallic"] .btn-primary,
[data-bs-theme="dark"] [data-theme="titanium-metallic"] .btn-primary,
[data-bs-theme="dark"] [data-theme="midnight-metallic"] .btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
    border: none !important;
}

[data-theme="silver-metallic"] .erp-btn.primary *,
[data-theme="titanium-metallic"] .erp-btn.primary *,
[data-theme="midnight-metallic"] .erp-btn.primary *,
[data-theme="silver-metallic"] .btn-primary *,
[data-theme="titanium-metallic"] .btn-primary *,
[data-theme="midnight-metallic"] .btn-primary * {
    color: #ffffff !important;
}

/* Soft, crisp borders for top navbar header buttons */
.btn-outline-theme {
    border: 1px solid #9ca3af !important;
    background-color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

[data-bs-theme="light"] .btn-outline-theme {
    border: 1px solid #9ca3af !important;
    background-color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

[data-bs-theme="dark"] .btn-outline-theme {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
    box-shadow: none !important;
}

.btn-outline-theme:hover,
[data-bs-theme="dark"] .btn-outline-theme:hover {
    border-color: transparent !important;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35) !important;
}

.btn-outline-theme:hover *,
.btn-outline-theme:hover i,
.btn-outline-theme:hover small,
.btn-outline-theme:hover span,
[data-bs-theme="dark"] .btn-outline-theme:hover *,
[data-bs-theme="dark"] .btn-outline-theme:hover i,
[data-bs-theme="dark"] .btn-outline-theme:hover small,
[data-bs-theme="dark"] .btn-outline-theme:hover span {
    color: #ffffff !important;
}

/* Specific vibrant hover gradients for metallic themes */
[data-theme="titanium-metallic"] .btn-outline-theme:hover,
[data-theme="silver-metallic"] .btn-outline-theme:hover,
[data-theme="midnight-metallic"] .btn-outline-theme:hover,
[data-bs-theme="dark"][data-theme="titanium-metallic"] .btn-outline-theme:hover,
[data-bs-theme="dark"][data-theme="silver-metallic"] .btn-outline-theme:hover,
[data-bs-theme="dark"][data-theme="midnight-metallic"] .btn-outline-theme:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    border-color: #1d4ed8 !important;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.45) !important;
    color: #ffffff !important;
}

[data-theme="gold-metallic"] .btn-outline-theme:hover,
[data-bs-theme="dark"][data-theme="gold-metallic"] .btn-outline-theme:hover {
    background: linear-gradient(135deg, #b45309 0%, #d97706 100%) !important;
    border-color: #d97706 !important;
    box-shadow: 0 6px 18px rgba(217, 119, 6, 0.45) !important;
    color: #ffffff !important;
}

[data-theme="rose-gold-metallic"] .btn-outline-theme:hover,
[data-bs-theme="dark"][data-theme="rose-gold-metallic"] .btn-outline-theme:hover {
    background: linear-gradient(135deg, #be185d 0%, #db2777 100%) !important;
    border-color: #db2777 !important;
    box-shadow: 0 6px 18px rgba(219, 39, 119, 0.45) !important;
    color: #ffffff !important;
}