/* Dark Mode Styles */

/* Smooth transition for all major elements */
body, .card, .card-header, .sidebar, .navbar, .footer, .modal-content, .form-control, .table {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* --- Theme Switch Button --- */
/* Fix theme switch button to work properly */
#themeSwitch {
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

#themeSwitch:disabled {
    opacity: 0.5 !important;
    pointer-events: none !important;
}

/* Don't override theme switch button styles */
[data-bs-theme="dark"] #themeSwitch,
[data-bs-theme="light"] #themeSwitch {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Override ALL inline styles in dark mode */
[data-bs-theme="dark"] [style*="background"] {
    background-color: #2d3748 !important;
}

[data-bs-theme="dark"] [style*="background: #fff"],
[data-bs-theme="dark"] [style*="background: #ffffff"],
[data-bs-theme="dark"] [style*="background: white"] {
    background-color: #2d3748 !important;
}

[data-bs-theme="dark"] [style*="color"] {
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] [style*="color: #000"],
[data-bs-theme="dark"] [style*="color: #000000"],
[data-bs-theme="dark"] [style*="color: black"] {
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] {
    /* --- General --- */
    --bs-body-bg: #1a202c; /* A slightly blue-ish dark gray */
    --bs-body-color: #e2e8f0;
    --bs-border-color: #4a5568;
    --bs-tertiary-bg: #2d3748;
}

/* Fix for body and main-content background overriding style.css */
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] .main-content {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}

/* --- Cards & Modals --- */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .modal-content {
    background-color: #2d3748 !important;
    border: 1px solid var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .modal-header {
    background-color: #4a5568 !important;
    background-image: none !important; /* Remove purple gradient */
    border-bottom: 1px solid var(--bs-border-color) !important;
}

/* Custom style override from app */
[data-bs-theme="dark"] .card-header .text-white,
[data-bs-theme="dark"] .modal-header .text-white {
    color: #e2e8f0 !important;
}

/* --- Sidebar --- */
[data-bs-theme="dark"] .sidebar {
    background-color: #2d3748 !important;
    background-image: none !important; /* Remove purple gradient */
    border-right: 1px solid var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .sidebar .sidebar-header {
    border-bottom: 1px solid var(--bs-border-color);
}

[data-bs-theme="dark"] .sidebar .sidebar-header .text-white,
[data-bs-theme="dark"] .sidebar .sidebar-header .text-white-50 {
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .sidebar .nav-link {
    color: #a0aec0;
}

[data-bs-theme="dark"] .sidebar .nav-link:hover {
    color: #ffffff;
    background-color: #4a5568;
}

[data-bs-theme="dark"] .sidebar .nav-link.active {
    color: #ffffff;
    background-color: #0d6efd; /* Keep Bootstrap's active color */
}

/* --- Navbar --- */
[data-bs-theme="dark"] .navbar.navbar-dark {
    background: #2d3748 !important; /* Override gradient shorthand */
    border-bottom: 1px solid var(--bs-border-color);
}

/* --- Footer --- */
[data-bs-theme="dark"] .footer {
    background-color: #2d3748;
    border-top: 1px solid var(--bs-border-color);
}

/* --- Login Page --- */
[data-bs-theme="dark"].login-page,
[data-bs-theme="dark"] .login-page {
    background: #1a202c;
}

[data-bs-theme="dark"] .login-container {
    background: #2d3748;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Fix for login page body class */
[data-bs-theme="dark"] body.login-page {
    background-color: #1a202c;
}

/* --- Payslip Page --- */
[data-bs-theme="dark"] .payslip {
    background: #2d3748;
    color: #e2e8f0;
    border-color: #4a5568;
}

[data-bs-theme="dark"] .payslip table td {
    border-color: #4a5568;
}

[data-bs-theme="dark"] .payslip .bg-yellow {
    background-color: #4a5568;
}

[data-bs-theme="dark"] .payslip .bg-blue {
    background-color: #4299e13d;
}

[data-bs-theme="dark"] .payslip .bg-dark-blue {
    background-color: #4a5568;
    color: white;
}

[data-bs-theme="dark"] .payslip .company-name,
[data-bs-theme="dark"] .payslip .payslip-header {
    color: #bee3f8;
}

[data-bs-theme="dark"] .payslip .net-pay-box {
    background: #4299e13d;
}

[data-bs-theme="dark"] .payslip .red-text {
    color: #f56565;
}

/* --- Misc --- */
[data-bs-theme="dark"] .text-muted {
    color: #a0aec0 !important;
}

[data-bs-theme="dark"] .alert-info.permanent-alert,
[data-bs-theme="dark"] .alert-info {
    background-color: rgba(49, 130, 206, 0.2);
    border-color: rgba(49, 130, 206, 0.4);
    color: #bee3f8;
}

[data-bs-theme="dark"] .alert-info .bi {
    color: #90cdf4;
}

[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(255, 255, 255, 0.03);
}

/* Fix for stats-card if used */
[data-bs-theme="dark"] .stats-card {
    background-color: #2d3748;
    color: var(--bs-body-color);
}

/* --- Forms & Dropdowns --- */
[data-bs-theme="dark"] .form-label {
    color: #cbd5e0; /* Brighter label color to override style.css */
}

[data-bs-theme="dark"] .dropdown-menu {
    --bs-dropdown-bg: #2d3748;
    --bs-dropdown-border-color: var(--bs-border-color);
    --bs-dropdown-link-color: #e2e8f0;
    --bs-dropdown-link-hover-color: #ffffff;
    --bs-dropdown-link-hover-bg: #4a5568;
    --bs-dropdown-divider-bg: var(--bs-border-color);
}

/* Fix for dropdown item text color */
[data-bs-theme="dark"] .dropdown-item {
    color: var(--bs-dropdown-link-color);
}

/* Override specific hover from style.css */
[data-bs-theme="dark"] .dropdown-item:hover {
    color: #ffffff;
}

/* --- Tables --- */
[data-bs-theme="dark"] .table {
    --bs-table-border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .table thead th {
    background: #4a5568 !important; /* Override gradient from style.css */
}

[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table .table-light {
    --bs-table-bg: #4a5568;
    --bs-table-color: #e2e8f0;
    --bs-table-border-color: #718096;
}

[data-bs-theme="dark"] .table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* --- Scrollbar --- */
[data-bs-theme="dark"] ::-webkit-scrollbar-track {
    background: #2d3748;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #4a5568;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #718096;
}

/* --- Text Color Fixes --- */
/* Invert text-dark to be light on dark backgrounds */
[data-bs-theme="dark"] .text-dark {
    color: #e2e8f0 !important;
}

/* Exceptions: Keep text-dark on light/warning backgrounds */
[data-bs-theme="dark"] .bg-warning .text-dark,
[data-bs-theme="dark"] .bg-warning.text-dark,
[data-bs-theme="dark"] .bg-light .text-dark,
[data-bs-theme="dark"] .bg-light.text-dark,
[data-bs-theme="dark"] .alert-warning .text-dark,
[data-bs-theme="dark"] .badge.bg-warning,
[data-bs-theme="dark"] .badge.bg-light {
    color: #212529 !important;
}

/* Make text-secondary lighter for better contrast */
[data-bs-theme="dark"] .text-secondary {
    color: #a0aec0 !important;
}

/* Fix form controls background */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #2d3748 !important;
    border: 1px solid #4a5568 !important; /* Added border for form controls */
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: #2d3748 !important;
    border-color: #667eea !important;
    color: #ffffff !important;
}

/* --- Form Switch Dark Mode --- */
[data-bs-theme="dark"] .form-switch .form-check-input {
    background-color: #6c757d;
    border-color: #495057;
}

[data-bs-theme="dark"] .form-switch .form-check-input:checked {
    background-color: #667eea;
    border-color: #667eea;
}

[data-bs-theme="dark"] .form-switch .form-check-input::before {
    background-color: #ffffff;
}

/* --- Checkbox Dark Mode --- */
[data-bs-theme="dark"] .login-page .form-check-input[type="checkbox"] {
    background-color: #2d3748 !important;
    border-color: #4a5568 !important;
}

[data-bs-theme="dark"] .login-page .form-check-input[type="checkbox"]:checked {
    background-color: #667eea !important;
    border-color: #667eea !important;
}

/* --- Settings Page Dark Mode --- */
[data-bs-theme="dark"] .settings-section {
    background-color: #2d3748 !important;
    border-color: #4a5568 !important;
}

[data-bs-theme="dark"] .settings-header {
    background-color: #4a5568 !important;
}

[data-bs-theme="dark"] .settings-body {
    background-color: #2d3748 !important;
}

[data-bs-theme="dark"] .employee-table {
    background-color: #2d3748 !important;
}