/**
 * Custom WowDash Overrides
 * This file ensures consistent styling and proper color contrast across all pages
 * Loaded after main style.css to override Bootstrap defaults
 */

/* ========================================
   1. Card Styling
   ======================================== */

.card-header {
    background-color: var(--neutral-50) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary-light) !important;
    font-weight: 600;
}

.card-header.bg-success {
    background-color: var(--success-600) !important;
    color: var(--white) !important;
}

.card-header.bg-primary {
    background-color: var(--primary-600) !important;
    color: var(--white) !important;
}

.card-header.bg-info {
    background-color: var(--info-600) !important;
    color: var(--white) !important;
}

.card-footer {
    background-color: var(--neutral-50) !important;
    border-top: 1px solid var(--border-color) !important;
    color: var(--text-secondary-light) !important;
}

/* ========================================
   2. Badge System
   ======================================== */

.badge {
    font-weight: 500;
    padding: 0.35rem 0.75rem;
    border-radius: 0.375rem;
}

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

.badge.bg-success {
    background-color: var(--success-600) !important;
    color: var(--white) !important;
}

.badge.bg-danger {
    background-color: var(--danger-600) !important;
    color: var(--white) !important;
}

.badge.bg-warning {
    background-color: var(--warning-600) !important;
    color: var(--white) !important;
}

.badge.bg-info {
    background-color: var(--info-600) !important;
    color: var(--white) !important;
}

.badge.bg-secondary {
    background-color: var(--neutral-500) !important;
    color: var(--white) !important;
}

.badge.bg-primary-subtle {
    background-color: var(--primary-50) !important;
    color: var(--primary-700) !important;
}

.badge.bg-success-subtle {
    background-color: var(--success-50) !important;
    color: var(--success-700) !important;
}

.badge.bg-danger-subtle {
    background-color: var(--danger-50) !important;
    color: var(--danger-700) !important;
}

.badge.bg-warning-subtle {
    background-color: var(--warning-50) !important;
    color: var(--warning-700) !important;
}

.badge.bg-info-subtle {
    background-color: var(--info-50) !important;
    color: var(--info-700) !important;
}

/* ========================================
   3. Statistics Cards - Gradient Text Colors
   ======================================== */

/* Light mode: black text on gradient backgrounds */
.bg-gradient-end-1 h1,
.bg-gradient-end-1 h2,
.bg-gradient-end-1 h3,
.bg-gradient-end-1 h4,
.bg-gradient-end-1 h5,
.bg-gradient-end-1 h6,
.bg-gradient-end-1 p,
.bg-gradient-end-1 span,
.bg-gradient-end-1 small,
.bg-gradient-end-1 div,
.bg-gradient-end-1 .fw-bold,
.bg-gradient-end-1 .fw-semibold,
.bg-gradient-end-1 .fw-medium,
.bg-gradient-end-2 h1,
.bg-gradient-end-2 h2,
.bg-gradient-end-2 h3,
.bg-gradient-end-2 h4,
.bg-gradient-end-2 h5,
.bg-gradient-end-2 h6,
.bg-gradient-end-2 p,
.bg-gradient-end-2 span,
.bg-gradient-end-2 small,
.bg-gradient-end-2 div,
.bg-gradient-end-2 .fw-bold,
.bg-gradient-end-2 .fw-semibold,
.bg-gradient-end-2 .fw-medium,
.bg-gradient-end-3 h1,
.bg-gradient-end-3 h2,
.bg-gradient-end-3 h3,
.bg-gradient-end-3 h4,
.bg-gradient-end-3 h5,
.bg-gradient-end-3 h6,
.bg-gradient-end-3 p,
.bg-gradient-end-3 span,
.bg-gradient-end-3 small,
.bg-gradient-end-3 div,
.bg-gradient-end-3 .fw-bold,
.bg-gradient-end-3 .fw-semibold,
.bg-gradient-end-3 .fw-medium,
.bg-gradient-end-4 h1,
.bg-gradient-end-4 h2,
.bg-gradient-end-4 h3,
.bg-gradient-end-4 h4,
.bg-gradient-end-4 h5,
.bg-gradient-end-4 h6,
.bg-gradient-end-4 p,
.bg-gradient-end-4 span,
.bg-gradient-end-4 small,
.bg-gradient-end-4 div,
.bg-gradient-end-4 .fw-bold,
.bg-gradient-end-4 .fw-semibold,
.bg-gradient-end-4 .fw-medium,
.bg-gradient-end-5 h1,
.bg-gradient-end-5 h2,
.bg-gradient-end-5 h3,
.bg-gradient-end-5 h4,
.bg-gradient-end-5 h5,
.bg-gradient-end-5 h6,
.bg-gradient-end-5 p,
.bg-gradient-end-5 span,
.bg-gradient-end-5 small,
.bg-gradient-end-5 div,
.bg-gradient-end-5 .fw-bold,
.bg-gradient-end-5 .fw-semibold,
.bg-gradient-end-5 .fw-medium,
.bg-gradient-end-6 h1,
.bg-gradient-end-6 h2,
.bg-gradient-end-6 h3,
.bg-gradient-end-6 h4,
.bg-gradient-end-6 h5,
.bg-gradient-end-6 h6,
.bg-gradient-end-6 p,
.bg-gradient-end-6 span,
.bg-gradient-end-6 small,
.bg-gradient-end-6 div,
.bg-gradient-end-6 .fw-bold,
.bg-gradient-end-6 .fw-semibold,
.bg-gradient-end-6 .fw-medium {
    color: #000000 !important;
}

/* Dark mode: white text on gradient backgrounds */
html[data-theme="dark"] .bg-gradient-end-1 h1,
html[data-theme="dark"] .bg-gradient-end-1 h2,
html[data-theme="dark"] .bg-gradient-end-1 h3,
html[data-theme="dark"] .bg-gradient-end-1 h4,
html[data-theme="dark"] .bg-gradient-end-1 h5,
html[data-theme="dark"] .bg-gradient-end-1 h6,
html[data-theme="dark"] .bg-gradient-end-1 p,
html[data-theme="dark"] .bg-gradient-end-1 span,
html[data-theme="dark"] .bg-gradient-end-1 small,
html[data-theme="dark"] .bg-gradient-end-1 div,
html[data-theme="dark"] .bg-gradient-end-1 .fw-bold,
html[data-theme="dark"] .bg-gradient-end-1 .fw-semibold,
html[data-theme="dark"] .bg-gradient-end-1 .fw-medium,
html[data-theme="dark"] .bg-gradient-end-2 h1,
html[data-theme="dark"] .bg-gradient-end-2 h2,
html[data-theme="dark"] .bg-gradient-end-2 h3,
html[data-theme="dark"] .bg-gradient-end-2 h4,
html[data-theme="dark"] .bg-gradient-end-2 h5,
html[data-theme="dark"] .bg-gradient-end-2 h6,
html[data-theme="dark"] .bg-gradient-end-2 p,
html[data-theme="dark"] .bg-gradient-end-2 span,
html[data-theme="dark"] .bg-gradient-end-2 small,
html[data-theme="dark"] .bg-gradient-end-2 div,
html[data-theme="dark"] .bg-gradient-end-2 .fw-bold,
html[data-theme="dark"] .bg-gradient-end-2 .fw-semibold,
html[data-theme="dark"] .bg-gradient-end-2 .fw-medium,
html[data-theme="dark"] .bg-gradient-end-3 h1,
html[data-theme="dark"] .bg-gradient-end-3 h2,
html[data-theme="dark"] .bg-gradient-end-3 h3,
html[data-theme="dark"] .bg-gradient-end-3 h4,
html[data-theme="dark"] .bg-gradient-end-3 h5,
html[data-theme="dark"] .bg-gradient-end-3 h6,
html[data-theme="dark"] .bg-gradient-end-3 p,
html[data-theme="dark"] .bg-gradient-end-3 span,
html[data-theme="dark"] .bg-gradient-end-3 small,
html[data-theme="dark"] .bg-gradient-end-3 div,
html[data-theme="dark"] .bg-gradient-end-3 .fw-bold,
html[data-theme="dark"] .bg-gradient-end-3 .fw-semibold,
html[data-theme="dark"] .bg-gradient-end-3 .fw-medium,
html[data-theme="dark"] .bg-gradient-end-4 h1,
html[data-theme="dark"] .bg-gradient-end-4 h2,
html[data-theme="dark"] .bg-gradient-end-4 h3,
html[data-theme="dark"] .bg-gradient-end-4 h4,
html[data-theme="dark"] .bg-gradient-end-4 h5,
html[data-theme="dark"] .bg-gradient-end-4 h6,
html[data-theme="dark"] .bg-gradient-end-4 p,
html[data-theme="dark"] .bg-gradient-end-4 span,
html[data-theme="dark"] .bg-gradient-end-4 small,
html[data-theme="dark"] .bg-gradient-end-4 div,
html[data-theme="dark"] .bg-gradient-end-4 .fw-bold,
html[data-theme="dark"] .bg-gradient-end-4 .fw-semibold,
html[data-theme="dark"] .bg-gradient-end-4 .fw-medium,
html[data-theme="dark"] .bg-gradient-end-5 h1,
html[data-theme="dark"] .bg-gradient-end-5 h2,
html[data-theme="dark"] .bg-gradient-end-5 h3,
html[data-theme="dark"] .bg-gradient-end-5 h4,
html[data-theme="dark"] .bg-gradient-end-5 h5,
html[data-theme="dark"] .bg-gradient-end-5 h6,
html[data-theme="dark"] .bg-gradient-end-5 p,
html[data-theme="dark"] .bg-gradient-end-5 span,
html[data-theme="dark"] .bg-gradient-end-5 small,
html[data-theme="dark"] .bg-gradient-end-5 div,
html[data-theme="dark"] .bg-gradient-end-5 .fw-bold,
html[data-theme="dark"] .bg-gradient-end-5 .fw-semibold,
html[data-theme="dark"] .bg-gradient-end-5 .fw-medium,
html[data-theme="dark"] .bg-gradient-end-6 h1,
html[data-theme="dark"] .bg-gradient-end-6 h2,
html[data-theme="dark"] .bg-gradient-end-6 h3,
html[data-theme="dark"] .bg-gradient-end-6 h4,
html[data-theme="dark"] .bg-gradient-end-6 h5,
html[data-theme="dark"] .bg-gradient-end-6 h6,
html[data-theme="dark"] .bg-gradient-end-6 p,
html[data-theme="dark"] .bg-gradient-end-6 span,
html[data-theme="dark"] .bg-gradient-end-6 small,
html[data-theme="dark"] .bg-gradient-end-6 div,
html[data-theme="dark"] .bg-gradient-end-6 .fw-bold,
html[data-theme="dark"] .bg-gradient-end-6 .fw-semibold,
html[data-theme="dark"] .bg-gradient-end-6 .fw-medium {
    color: #FFFFFF !important;
}

/* ========================================
   4. Table Styling
   ======================================== */

.table thead th {
    background-color: var(--neutral-50) !important;
    color: var(--text-primary-light) !important;
    font-weight: 600;
    border-bottom: 2px solid var(--border-color) !important;
}

.table tbody tr:hover {
    background-color: var(--neutral-50) !important;
    transition: background-color 0.2s ease;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02) !important;
}

/* ========================================
   5. Form Elements - Consistent Styling
   ======================================== */

.form-control,
.form-select {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--input-stroke) !important;
    color: var(--text-primary-light) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-600) !important;
    box-shadow: 0 0 0 0.2rem rgba(72, 127, 255, 0.15) !important;
}

.form-control::placeholder {
    color: var(--text-secondary-light) !important;
    opacity: 0.6;
}

/* ========================================
   6. Button Consistency
   ======================================== */

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

.btn-primary:hover {
    background-color: var(--primary-700) !important;
    border-color: var(--primary-700) !important;
}

.btn-success {
    background-color: var(--success-600) !important;
    border-color: var(--success-600) !important;
    color: var(--white) !important;
}

.btn-success:hover {
    background-color: var(--success-700) !important;
    border-color: var(--success-700) !important;
}

.btn-danger {
    background-color: var(--danger-600) !important;
    border-color: var(--danger-600) !important;
    color: var(--white) !important;
}

.btn-danger:hover {
    background-color: var(--danger-700) !important;
    border-color: var(--danger-700) !important;
}

.btn-warning {
    background-color: var(--warning-600) !important;
    border-color: var(--warning-600) !important;
    color: var(--white) !important;
}

.btn-warning:hover {
    background-color: var(--warning-700) !important;
    border-color: var(--warning-700) !important;
}

.btn-info {
    background-color: var(--info-600) !important;
    border-color: var(--info-600) !important;
    color: var(--white) !important;
}

.btn-info:hover {
    background-color: var(--info-700) !important;
    border-color: var(--info-700) !important;
}

/* ========================================
   7. Modal Styling
   ======================================== */

.modal-header {
    background-color: var(--neutral-50) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.modal-header.bg-primary {
    background-color: var(--primary-600) !important;
    color: var(--white) !important;
}

.modal-header.bg-success {
    background-color: var(--success-600) !important;
    color: var(--white) !important;
}

.modal-header.bg-danger {
    background-color: var(--danger-600) !important;
    color: var(--white) !important;
}

.modal-footer {
    background-color: var(--neutral-50) !important;
    border-top: 1px solid var(--border-color) !important;
}

/* ========================================
   8. Text Color Utilities
   ======================================== */

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

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

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

.text-warning {
    color: var(--warning-700) !important;
    /* Darker for readability */
}

.text-info {
    color: var(--info-600) !important;
}

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

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

/* ========================================
   9. Dark Theme Adjustments
   ======================================== */
/* Removed all custom dark theme dropdown and select overrides */
/* Using original template styles from style.css for better compatibility */

[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    background-color: var(--dark-2) !important;
    color: #FFFFFF !important;
    border-color: var(--dark-3) !important;
}

[data-theme="dark"] .table thead th {
    background-color: var(--dark-2) !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .table tbody tr:hover {
    background-color: var(--dark-3) !important;
}

[data-theme="dark"] .table tbody tr {
    color: #FFFFFF !important;
}

/* Dark mode primary buttons - white text */
[data-theme="dark"] .btn-primary-600 {
    color: #FFFFFF !important;
}

[data-theme="dark"] .btn-primary-600 i,
[data-theme="dark"] .btn-primary-600 iconify-icon,
[data-theme="dark"] .btn-primary-600 span {
    color: #FFFFFF !important;
}

[data-theme="dark"] .table {
    background-color: var(--dark-2) !important;
}

[data-theme="dark"] .table tbody td {
    background-color: var(--dark-2) !important;
    color: #FFFFFF !important;
    border-color: var(--dark-3) !important;
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--dark-3) !important;
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) td {
    background-color: var(--dark-3) !important;
}

/* Dark mode table-primary highlighted row */
[data-theme="dark"] .table-primary,
[data-theme="dark"] .table-primary td,
[data-theme="dark"] tr.table-primary,
[data-theme="dark"] tr.table-primary td {
    background-color: rgba(72, 127, 255, 0.25) !important;
    color: #FFFFFF !important;
}

/* Dark mode outline buttons - white text, no hover effects */
[data-theme="dark"] .btn-outline-primary-600 {
    border-color: var(--primary-400) !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .btn-outline-primary-600 i,
[data-theme="dark"] .btn-outline-primary-600 iconify-icon {
    color: #FFFFFF !important;
}

[data-theme="dark"] .btn-outline-primary-600:hover,
[data-theme="dark"] .btn-outline-primary-600:focus,
[data-theme="dark"] .btn-outline-primary-600:active {
    background-color: transparent !important;
    border-color: var(--primary-400) !important;
    color: #FFFFFF !important;
    transform: none !important;
    box-shadow: none !important;
}

[data-theme="dark"] .btn-outline-primary-600:hover i,
[data-theme="dark"] .btn-outline-primary-600:hover iconify-icon {
    color: #FFFFFF !important;
}

[data-theme="dark"] .btn-outline-danger-600 {
    border-color: var(--danger-400) !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .btn-outline-danger-600 i,
[data-theme="dark"] .btn-outline-danger-600 iconify-icon {
    color: #FFFFFF !important;
}

[data-theme="dark"] .btn-outline-danger-600:hover,
[data-theme="dark"] .btn-outline-danger-600:focus,
[data-theme="dark"] .btn-outline-danger-600:active {
    background-color: transparent !important;
    border-color: var(--danger-400) !important;
    color: #FFFFFF !important;
    transform: none !important;
    box-shadow: none !important;
}

[data-theme="dark"] .btn-outline-danger-600:hover i,
[data-theme="dark"] .btn-outline-danger-600:hover iconify-icon {
    color: #FFFFFF !important;
}

[data-theme="dark"] .btn-sm.btn-outline-primary-600 i,
[data-theme="dark"] .btn-sm.btn-outline-danger-600 i {
    color: #FFFFFF !important;
}

/* Dark mode list-group items */
[data-theme="dark"] .list-group-item {
    background-color: var(--dark-2) !important;
    border-color: var(--dark-3) !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .list-group-item .text-neutral-900 {
    color: #FFFFFF !important;
}

[data-theme="dark"] .list-group-item .fw-semibold {
    color: #FFFFFF !important;
}

/* Dark mode card body text */
[data-theme="dark"] .card-body {
    color: var(--text-primary-light) !important;
}

[data-theme="dark"] .card-body h5,
[data-theme="dark"] .card-body h6 {
    color: #FFFFFF !important;
}

/* Dark theme for bootstrap select (if used) */
[data-theme="dark"] .bootstrap-select .dropdown-toggle {
    background-color: var(--dark-2) !important;
    color: var(--white) !important;
    border-color: var(--dark-3) !important;
}

[data-theme="dark"] .bootstrap-select .dropdown-menu {
    background-color: var(--dark-2) !important;
}

/* Dark theme for datalist and autocomplete */
[data-theme="dark"] datalist {
    background-color: var(--dark-2) !important;
    color: var(--white) !important;
}

/* Dark theme for multiselect and multiple options */
[data-theme="dark"] select[multiple],
[data-theme="dark"] select[size] {
    background-color: var(--dark-2) !important;
    color: var(--white) !important;
    border-color: var(--dark-3) !important;
}

[data-theme="dark"] select[multiple] option:checked {
    background-color: var(--primary-600) !important;
    color: var(--white) !important;
}

/* ========================================
   12. Accessibility - WCAG AA Compliance
   ======================================== */

/* Ensure minimum contrast ratios */
.badge,
.btn,
.alert {
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Focus indicators for keyboard navigation */
a:focus,
button:focus,
.btn:focus,
.form-control:focus,
.form-select:focus {
    outline: 2px solid var(--primary-600);
    outline-offset: 2px;
}

/* ========================================
   13. Responsive Adjustments - Mobile Optimization
   ======================================== */

/* Hide columns on mobile */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }

    .card-header,
    .card-footer {
        padding: 0.75rem;
    }

    .badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}

/* Mobile & Tablet Responsive (max-width: 991px) */
@media (max-width: 991px) {

    /* Table responsive improvements */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 8px;
    }

    .table th,
    .table td {
        padding: 0.5rem !important;
    }

    /* Card body padding */
    .card-body {
        padding: 1rem !important;
    }

    /* Filter form improvements */
    .d-flex.align-items-center.gap-3 {
        flex-wrap: wrap !important;
    }

    .form-select-sm,
    .form-control-sm {
        font-size: 0.875rem !important;
    }

    /* Modal adjustments */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .modal-body {
        padding: 1rem;
    }
}

/* Mobile Only Responsive (max-width: 576px) */
@media (max-width: 576px) {

    /* Typography adjustments */
    h1, .h1 { font-size: 1.75rem !important; }
    h2, .h2 { font-size: 1.5rem !important; }
    h3, .h3 { font-size: 1.25rem !important; }
    h4, .h4 { font-size: 1.1rem !important; }
    h5, .h5 { font-size: 1rem !important; }
    h6, .h6 { font-size: 0.9rem !important; }

    /* Card padding reduction */
    .card {
        margin-bottom: 1rem;
    }

    .card-body {
        padding: 0.75rem !important;
    }

    .p-24 {
        padding: 1rem !important;
    }

    .p-16 {
        padding: 0.75rem !important;
    }

    /* Button adjustments */
    .btn {
        font-size: 0.875rem;
    }

    .btn-sm {
        padding: 0.375rem 0.5rem;
        font-size: 0.8125rem;
    }

    /* Stat card icons */
    .w-48-px {
        width: 40px !important;
        height: 40px !important;
    }

    .w-32-px {
        width: 28px !important;
        height: 28px !important;
    }

    .w-24-px {
        width: 20px !important;
        height: 20px !important;
    }

    /* Pagination */
    .pagination {
        font-size: 0.875rem;
    }

    .pagination .page-link {
        padding: 0.375rem 0.5rem;
    }

    /* Date range picker */
    #customDateRange {
        flex-direction: column !important;
        width: 100%;
    }

    #customDateRange input {
        width: 100% !important;
        margin-bottom: 0.5rem;
    }
}

/* Tablet Specific (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {

    /* 2 columns for stats */
    .col-xxl-2.col-lg-4.col-sm-6,
    .col-xxl-3.col-sm-6,
    .col-xxl-4.col-sm-6 {
        flex: 0 0 auto;
        width: 50% !important;
    }

    .col-xxl-6 {
        flex: 0 0 auto;
        width: 100% !important;
    }

    .table {
        font-size: 0.875rem;
    }
}

/* Large Mobile / Small Tablet (577px - 767px) */
@media (min-width: 577px) and (max-width: 767px) {
    .col-sm-6 {
        flex: 0 0 auto;
        width: 50% !important;
    }

    .table {
        font-size: 0.8rem;
    }
}

/* Print styles */
@media print {

    .sidebar,
    .navbar,
    .btn,
    .hide-mobile {
        display: none !important;
    }

    .card {
        break-inside: avoid;
    }

    .table {
        font-size: 0.75rem;
    }
}

/* Landscape mobile optimization */
@media (max-width: 896px) and (orientation: landscape) {
    .modal-dialog {
        max-height: 90vh;
        overflow-y: auto;
    }

    .card-body {
        padding: 0.75rem !important;
    }
}

/* ========================================
   Keep Button Icons White and Remove Hover Effects
   ======================================== */

/* No hover effect utility class */
.no-hover-effect:hover,
.no-hover-effect:focus,
.no-hover-effect:active,
.no-hover-effect:hover:focus,
.no-hover-effect:hover:active {
    transform: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transition: none !important;
}

.no-hover-effect.btn-primary-600:hover,
.no-hover-effect.btn-primary-600:focus,
.no-hover-effect.btn-primary-600:active {
    background-color: var(--primary-600) !important;
    border-color: var(--primary-600) !important;
    color: #fff !important;
}

.no-hover-effect.btn-success-600:hover,
.no-hover-effect.btn-success-600:focus,
.no-hover-effect.btn-success-600:active {
    background-color: var(--success-600) !important;
    border-color: var(--success-600) !important;
    color: #fff !important;
}

.no-hover-effect.btn-warning-600:hover,
.no-hover-effect.btn-warning-600:focus,
.no-hover-effect.btn-warning-600:active {
    background-color: var(--warning-600) !important;
    border-color: var(--warning-600) !important;
    color: #fff !important;
}

.no-hover-effect.btn-outline-primary-600:hover,
.no-hover-effect.btn-outline-primary-600:focus,
.no-hover-effect.btn-outline-primary-600:active {
    background-color: transparent !important;
    border-color: var(--primary-600) !important;
    color: var(--primary-600) !important;
}

.no-hover-effect.btn-outline-danger-600:hover,
.no-hover-effect.btn-outline-danger-600:focus,
.no-hover-effect.btn-outline-danger-600:active {
    background-color: transparent !important;
    border-color: var(--danger-600) !important;
    color: var(--danger-600) !important;
}

/* Force icons to stay white in no-hover-effect buttons */
.no-hover-effect i,
.no-hover-effect iconify-icon,
.no-hover-effect .text-white,
.no-hover-effect:hover i,
.no-hover-effect:hover iconify-icon,
.no-hover-effect:hover .text-white,
.no-hover-effect:focus i,
.no-hover-effect:focus iconify-icon,
.no-hover-effect:focus .text-white,
.no-hover-effect:active i,
.no-hover-effect:active iconify-icon,
.no-hover-effect:active .text-white {
    color: #ffffff !important;
}

/* Primary buttons - keep icons white and disable hover effects */
.btn-primary-600 i,
.btn-primary-600 iconify-icon {
    color: #fff !important;
}

.btn-primary-600:hover,
.btn-primary-600:focus,
.btn-primary-600:active,
.btn-primary-600:focus-visible {
    background-color: var(--primary-600) !important;
    border-color: var(--primary-600) !important;
    color: #fff !important;
    transform: none !important;
    box-shadow: none !important;
    transition: none !important;
}

.btn-primary-600:hover i,
.btn-primary-600:hover iconify-icon,
.btn-primary-600:focus i,
.btn-primary-600:focus iconify-icon,
.btn-primary-600:active i,
.btn-primary-600:active iconify-icon,
.btn-primary-600:focus-visible i,
.btn-primary-600:focus-visible iconify-icon {
    color: #fff !important;
}

/* Success buttons - keep icons white and disable hover effects */
.btn-success-600:hover,
.btn-success-600:focus,
.btn-success-600:active {
    background-color: var(--success-600) !important;
    border-color: var(--success-600) !important;
    color: #fff !important;
}

.btn-success-600:hover i,
.btn-success-600:hover iconify-icon,
.btn-success-600:focus i,
.btn-success-600:focus iconify-icon,
.btn-success-600:active i,
.btn-success-600:active iconify-icon {
    color: #fff !important;
}

/* Warning buttons - keep icons white and disable hover effects */
.btn-warning-600:hover,
.btn-warning-600:focus,
.btn-warning-600:active {
    background-color: var(--warning-600) !important;
    border-color: var(--warning-600) !important;
    color: #fff !important;
}

.btn-warning-600:hover i,
.btn-warning-600:hover iconify-icon,
.btn-warning-600:focus i,
.btn-warning-600:focus iconify-icon,
.btn-warning-600:active i,
.btn-warning-600:active iconify-icon {
    color: #fff !important;
}

/* Outline buttons - keep icons white and disable hover effects */
.btn-outline-primary-600:hover,
.btn-outline-primary-600:focus,
.btn-outline-primary-600:active {
    background-color: transparent !important;
    border-color: var(--primary-600) !important;
    color: var(--primary-600) !important;
}

.btn-outline-primary-600:hover i,
.btn-outline-primary-600:hover iconify-icon,
.btn-outline-primary-600:focus i,
.btn-outline-primary-600:focus iconify-icon,
.btn-outline-primary-600:active i,
.btn-outline-primary-600:active iconify-icon {
    color: var(--primary-600) !important;
}

.btn-outline-danger-600:hover,
.btn-outline-danger-600:focus,
.btn-outline-danger-600:active {
    background-color: transparent !important;
    border-color: var(--danger-600) !important;
    color: var(--danger-600) !important;
}

.btn-outline-danger-600:hover i,
.btn-outline-danger-600:hover iconify-icon,
.btn-outline-danger-600:focus i,
.btn-outline-danger-600:focus iconify-icon,
.btn-outline-danger-600:active i,
.btn-outline-danger-600:active iconify-icon {
    color: var(--danger-600) !important;
}

/* Generic button classes - keep icons white and disable hover effects */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--primary-600) !important;
    border-color: var(--primary-600) !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: var(--success-600) !important;
    border-color: var(--success-600) !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: var(--warning-600) !important;
    border-color: var(--warning-600) !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: var(--danger-600) !important;
    border-color: var(--danger-600) !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background-color: var(--info-600) !important;
    border-color: var(--info-600) !important;
}

.btn-primary:hover i,
.btn-primary:hover iconify-icon,
.btn-success:hover i,
.btn-success:hover iconify-icon,
.btn-warning:hover i,
.btn-warning:hover iconify-icon,
.btn-danger:hover i,
.btn-danger:hover iconify-icon,
.btn-info:hover i,
.btn-info:hover iconify-icon {
    color: #fff !important;
}

/* ========================================
   17. Select2 Dropdown Dark Mode Support
   ======================================== */

/* Select2 Dropdown Dark Mode */
html[data-theme="dark"] .select2-dropdown {
    background-color: var(--dark-2, #273142) !important;
    border-color: var(--neutral-600, #4B5563) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .select2-results {
    background-color: var(--dark-2, #273142) !important;
}

/* Select2 options - visible text in dark mode */
html[data-theme="dark"] .select2-container--default .select2-results__option {
    color: #FFFFFF !important;
    background-color: var(--dark-2, #273142) !important;
}

/* Highlighted option */
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary-600, #487fff) !important;
    color: #FFFFFF !important;
}

/* Selected option */
html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--dark-3, #323D4E) !important;
    color: #FFFFFF !important;
}

/* Search box in dropdown */
html[data-theme="dark"] .select2-search--dropdown {
    background-color: var(--dark-2, #273142) !important;
}

html[data-theme="dark"] .select2-search--dropdown .select2-search__field {
    background-color: var(--dark-3, #323D4E) !important;
    border-color: var(--neutral-600, #4B5563) !important;
    color: #FFFFFF !important;
}

html[data-theme="dark"] .select2-search--dropdown .select2-search__field::placeholder {
    color: var(--neutral-400, #9CA3AF) !important;
}

html[data-theme="dark"] .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--primary-600, #487fff) !important;
}

/* No results message */
html[data-theme="dark"] .select2-container--default .select2-results__message {
    color: var(--neutral-400, #9CA3AF) !important;
}

/* Select2 Selection (the main select box) in dark mode */
html[data-theme="dark"] .select2-container--default .select2-selection--single {
    background-color: var(--dark-2, #273142) !important;
    border-color: var(--neutral-600, #4B5563) !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #FFFFFF !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--neutral-400, #9CA3AF) !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--neutral-400, #9CA3AF) transparent transparent transparent !important;
}

/* ========================================
   ApexCharts Tooltip - Clean Override
   (loaded after apexcharts.css so cascade wins)
   ======================================== */

/* Base tooltip — enforce compact size on ALL charts regardless of theme */
.apexcharts-tooltip {
    min-width: auto !important;
    max-width: 220px !important;
    width: auto !important;
    padding: 0 !important;
}

/* Light mode tooltip container */
.apexcharts-tooltip.apexcharts-theme-light {
    border: 1px solid #E4E7EC !important;
    background: #ffffff !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    padding: 0 !important;
    min-width: auto !important;
    max-width: 220px !important;
    width: auto !important;
}

/* Dark mode tooltip container */
.apexcharts-tooltip.apexcharts-theme-dark {
    background: #1e1e1e !important;
    border: 1px solid #333 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    border-radius: 8px !important;
    color: #fff !important;
    padding: 0 !important;
    min-width: auto !important;
    max-width: 220px !important;
    width: auto !important;
}

/* Light mode title row (the x-axis label header) */
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    background: #f8fafc !important;
    border-bottom: 1px solid #E4E7EC !important;
    color: #344054 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 10px !important;
    margin-bottom: 0 !important;
}

/* Dark mode title row */
.apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
    background: rgba(0, 0, 0, 0.25) !important;
    border-bottom: 1px solid #374151 !important;
    color: #e5e7eb !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 10px !important;
    margin-bottom: 0 !important;
}

/* Series group row */
.apexcharts-tooltip-series-group.apexcharts-active,
.apexcharts-tooltip-series-group {
    padding: 4px 10px !important;
    background: transparent !important;
}

/* Y-group row (inner padding) */
.apexcharts-tooltip-y-group {
    padding: 0 !important;
}

/* Value text */
.apexcharts-tooltip-text-y-value,
.apexcharts-tooltip-text-goals-value {
    font-weight: 600 !important;
    color: #101928 !important;
}

html[data-theme="dark"] .apexcharts-tooltip-text-y-value,
html[data-theme="dark"] .apexcharts-tooltip-text-goals-value {
    color: #f9fafb !important;
}

/* Label text */
.apexcharts-tooltip-text-y-label {
    color: #667085 !important;
}

html[data-theme="dark"] .apexcharts-tooltip-text-y-label {
    color: #9CA3AF !important;
}