/* Dark Mode Styles */
body.dark-mode,
body[data-bs-theme="dark"] {
    background-color: #1a1d21;
    color: #e4e6eb;
}

body.dark-mode .card,
body[data-bs-theme="dark"] .card {
    background-color: #242526;
    color: #e4e6eb;
    border-color: #3a3b3c;
}

body.dark-mode .card-header,
body[data-bs-theme="dark"] .card-header {
    background-color: #2f3136;
    border-color: #3a3b3c;
    color: #e4e6eb;
}

body.dark-mode .table,
body[data-bs-theme="dark"] .table {
    color: #e4e6eb;
    border-color: #3a3b3c;
}

body.dark-mode .table thead th,
body[data-bs-theme="dark"] .table thead th {
    background-color: #2f3136;
    border-color: #3a3b3c;
    color: #e4e6eb;
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd),
body[data-bs-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02);
}

body.dark-mode .table-hover tbody tr:hover,
body[data-bs-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .vertical-menu,
body[data-bs-theme="dark"] .vertical-menu {
    background-color: #242526;
}

body.dark-mode #page-topbar,
body[data-bs-theme="dark"] #page-topbar {
    background-color: #242526;
    border-bottom: 1px solid #3a3b3c;
}

body.dark-mode .navbar-header,
body[data-bs-theme="dark"] .navbar-header {
    background-color: #242526;
}

body.dark-mode .footer,
body[data-bs-theme="dark"] .footer {
    background-color: #242526;
    border-top: 1px solid #3a3b3c;
    color: #b0b3b8;
}

body.dark-mode .page-content,
body[data-bs-theme="dark"] .page-content {
    background-color: #1a1d21;
}

body.dark-mode .form-control,
body[data-bs-theme="dark"] .form-control,
body.dark-mode .form-select,
body[data-bs-theme="dark"] .form-select {
    background-color: #3a3b3c;
    border-color: #4e4f50;
    color: #e4e6eb;
}

body.dark-mode .form-control:focus,
body[data-bs-theme="dark"] .form-control:focus,
body.dark-mode .form-select:focus,
body[data-bs-theme="dark"] .form-select:focus {
    background-color: #3a3b3c;
    border-color: #7a6fbe;
    color: #e4e6eb;
}

body.dark-mode .modal-content,
body[data-bs-theme="dark"] .modal-content {
    background-color: #242526;
    color: #e4e6eb;
}

body.dark-mode .modal-header,
body[data-bs-theme="dark"] .modal-header {
    border-bottom-color: #3a3b3c;
}

body.dark-mode .modal-footer,
body[data-bs-theme="dark"] .modal-footer {
    border-top-color: #3a3b3c;
}

body.dark-mode .right-bar,
body[data-bs-theme="dark"] .right-bar {
    background-color: #242526;
    color: #e4e6eb;
}

body.dark-mode .breadcrumb-item a,
body[data-bs-theme="dark"] .breadcrumb-item a {
    color: #7a6fbe;
}

body.dark-mode .text-muted,
body[data-bs-theme="dark"] .text-muted {
    color: #b0b3b8 !important;
}

/* Theme Colors */
html[data-theme-color="red"] .btn-primary,
html[data-theme-color="red"] .bg-primary {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

html[data-theme-color="teal"] .btn-primary,
html[data-theme-color="teal"] .bg-primary {
    background-color: #20c997 !important;
    border-color: #20c997 !important;
}

html[data-theme-color="red"] .text-primary {
    color: #dc3545 !important;
}

html[data-theme-color="teal"] .text-primary {
    color: #20c997 !important;
}

/* DataTables Dark Mode */
body.dark-mode .dataTables_wrapper,
body[data-bs-theme="dark"] .dataTables_wrapper {
    color: #e4e6eb;
}

body.dark-mode .dataTables_wrapper .dataTables_filter input,
body[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input,
body.dark-mode .dataTables_wrapper .dataTables_length select,
body[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background-color: #3a3b3c;
    border-color: #4e4f50;
    color: #e4e6eb;
}

body.dark-mode .dataTables_wrapper .dataTables_info,
body[data-bs-theme="dark"] .dataTables_wrapper .dataTables_info,
body.dark-mode .dataTables_wrapper .dataTables_length label,
body[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length label {
    color: #b0b3b8;
}
