/* Dark Mode Theme for EPV Application */

/* Dark Mode CSS Variables */
[data-theme="dark"] {
    /* Primary colors - adjusted for dark mode */
    --primary-color: #4a9eff;
    /* Brighter blue for dark backgrounds */
    --primary-dark: #2d7ce0;
    /* Darker blue for hover states */
    --primary-light: #1a365d;
    /* Dark blue for backgrounds */

    /* Secondary colors */
    --secondary-color: #a0aec0;
    /* Light gray for secondary elements */
    --secondary-dark: #718096;
    /* Medium gray */
    --secondary-light: #2d3748;
    /* Dark gray for backgrounds */

    /* Accent colors */
    --success-color: #48bb78;
    /* Green for success states */
    --warning-color: #ed8936;
    /* Orange for warning states */
    --danger-color: #f56565;
    /* Red for error/danger states */
    --info-color: #4299e1;
    /* Blue for info states */

    /* Text colors */
    --text-primary: #e2e8f0;
    /* Light gray for primary text */
    --text-secondary: #a0aec0;
    /* Medium gray for secondary text */
    --text-light: #ffffff;
    /* White text for dark backgrounds */

    /* Background colors */
    --bg-primary: #1a202c;
    /* Main dark background */
    --bg-secondary: #2d3748;
    /* Secondary dark background */
    --bg-tertiary: #4a5568;
    /* Tertiary dark background */
    --bg-card: #2d3748;
    /* Card background */
    --bg-modal: #2d3748;
    /* Modal background */

    /* Border colors */
    --border-color: #4a5568;
    /* Dark gray for borders */
    --border-focus: #4a9eff;
    /* Blue for focus states */

    /* Shadow adjustments for dark mode */
    --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.4);
    --box-shadow-large: 0 8px 16px rgba(0, 0, 0, 0.5);

    /* Salesforce Lightning Design System Colors - Dark Mode */
    --sf-blue: #4a9eff;
    --sf-blue-hover: #2d7ce0;
    --sf-blue-light: #1a365d;
    --sf-neutral-light: #2d3748;
    --sf-neutral-medium: #4a5568;
    --sf-neutral-dark: #a0aec0;
    --sf-text: #e2e8f0;
    --sf-text-light: #a0aec0;
    --sf-success: #48bb78;
    --sf-warning: #ed8936;
    --sf-error: #f56565;
    --sf-border-radius: 4px;
    --sf-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
    --sf-shadow-medium: 0 4px 4px 0 rgba(0, 0, 0, 0.4);
    --sf-shadow-large: 0 8px 16px 0 rgba(0, 0, 0, 0.5);
}

/* Dark Mode Base Styles */
[data-theme="dark"] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Dark Mode Navigation */
[data-theme="dark"] .navbar {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--box-shadow);
}

[data-theme="dark"] .navbar-brand {
    color: var(--text-primary);
}

[data-theme="dark"] .navbar-nav .nav-link {
    color: var(--text-secondary);
}

[data-theme="dark"] .navbar-nav .nav-link:hover {
    color: var(--primary-color);
    background-color: var(--primary-light);
}

[data-theme="dark"] .navbar-nav .nav-link.active {
    color: var(--primary-color);
    background-color: var(--primary-light);
}

/* Dark Mode Cards */
[data-theme="dark"] .card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .card-header {
    background-color: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

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

[data-theme="dark"] .card-footer {
    background-color: var(--bg-tertiary);
    border-top: 1px solid var(--border-color);
}

/* Dark Mode Buttons */
[data-theme="dark"] .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-light);
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-primary:focus {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

[data-theme="dark"] .btn-secondary {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-secondary:focus {
    background-color: var(--secondary-light);
    border-color: var(--secondary-dark);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background-color: transparent;
}

[data-theme="dark"] .btn-outline-primary:hover,
[data-theme="dark"] .btn-outline-primary:focus {
    background-color: var(--primary-light);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Dark Mode Forms */
[data-theme="dark"] .form-control {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .form-control:focus {
    background-color: var(--bg-tertiary);
    border-color: var(--border-focus);
    color: var(--text-primary);
    box-shadow: 0 0 0 1px var(--border-focus);
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--text-secondary);
}

[data-theme="dark"] .form-label {
    color: var(--text-primary);
}

[data-theme="dark"] .form-text {
    color: var(--text-secondary);
}

[data-theme="dark"] .form-select {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .form-select:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 1px var(--border-focus);
}

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

[data-theme="dark"] .table thead th {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .table tbody td {
    border-bottom: 1px solid var(--border-color);
}

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

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

/* Dark Mode Badges */
[data-theme="dark"] .badge-primary {
    background-color: var(--primary-color);
    color: var(--text-light);
}

[data-theme="dark"] .badge-secondary {
    background-color: var(--secondary-color);
    color: var(--text-light);
}

[data-theme="dark"] .badge-success {
    background-color: var(--success-color);
    color: var(--text-light);
}

[data-theme="dark"] .badge-danger {
    background-color: var(--danger-color);
    color: var(--text-light);
}

[data-theme="dark"] .badge-warning {
    background-color: var(--warning-color);
    color: var(--text-primary);
}

[data-theme="dark"] .badge-info {
    background-color: var(--info-color);
    color: var(--text-light);
}

/* Dark Mode Alerts */
[data-theme="dark"] .alert-primary {
    background-color: var(--primary-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

[data-theme="dark"] .alert-secondary {
    background-color: var(--secondary-light);
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}

[data-theme="dark"] .alert-success {
    background-color: rgba(72, 187, 120, 0.1);
    border-color: var(--success-color);
    color: var(--success-color);
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(245, 101, 101, 0.1);
    border-color: var(--danger-color);
    color: var(--danger-color);
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(237, 137, 54, 0.1);
    border-color: var(--warning-color);
    color: var(--warning-color);
}

[data-theme="dark"] .alert-info {
    background-color: rgba(66, 153, 225, 0.1);
    border-color: var(--info-color);
    color: var(--info-color);
}

/* Dark Mode Modals */
[data-theme="dark"] .modal-content {
    background-color: var(--bg-modal);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .modal-header {
    background-color: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .modal-footer {
    background-color: var(--bg-tertiary);
    border-top: 1px solid var(--border-color);
}

[data-theme="dark"] .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Dark Mode Dropdowns */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--box-shadow-medium);
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--primary-light);
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-divider {
    border-top: 1px solid var(--border-color);
}

[data-theme="dark"] .dropdown-header {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

/* Dark Mode Navigation Tabs */
[data-theme="dark"] .nav-tabs {
    border-bottom: 2px solid var(--border-color);
}

[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
    background-color: var(--bg-tertiary);
    color: var(--primary-color);
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    color: var(--primary-color);
    background-color: var(--bg-card);
    border-color: var(--border-color) var(--border-color) var(--bg-card);
}

[data-theme="dark"] .tab-content {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: none;
}

/* Dark Mode Page Header */
[data-theme="dark"] .page-header {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .page-title {
    color: var(--text-primary);
}

/* Dark Mode Login Page */
[data-theme="dark"] .login-page {
    background: linear-gradient(135deg, var(--bg-primary), var(--bg-secondary));
}

[data-theme="dark"] .login-box {
    background-color: var(--bg-card);
    color: var(--text-primary);
    box-shadow: var(--box-shadow-large);
}

[data-theme="dark"] .login-box h1 {
    color: var(--primary-color);
}

/* Dark Mode Loading Screen */
[data-theme="dark"] .loading-screen {
    background-color: rgba(26, 32, 44, 0.95);
}

[data-theme="dark"] .loading-text {
    color: var(--text-primary);
}

[data-theme="dark"] .loading-progress-bar {
    background-color: var(--border-color);
}

[data-theme="dark"] .loading-progress-bar::after {
    background-color: var(--primary-color);
}

/* Dark Mode Mobile Navigation */
[data-theme="dark"] .mobile-bottom-nav {
    background-color: var(--bg-secondary);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .mobile-bottom-nav .nav-link {
    color: var(--text-secondary);
}

[data-theme="dark"] .mobile-bottom-nav .nav-link.active {
    color: var(--primary-color);
}

[data-theme="dark"] .mobile-more-panel {
    background-color: var(--bg-card);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .mobile-more-panel-header {
    background-color: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .mobile-more-panel-header h5 {
    color: var(--text-primary);
}

[data-theme="dark"] .more-menu-item {
    color: var(--text-primary);
}

[data-theme="dark"] .more-menu-item:hover,
[data-theme="dark"] .more-menu-item:active {
    background-color: var(--primary-light);
}

[data-theme="dark"] .mobile-overlay {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Dark Mode Status Badges */
[data-theme="dark"] .status-pending_approval,
[data-theme="dark"] .status-submitted {
    background-color: var(--warning-color);
    color: var(--text-primary);
}

[data-theme="dark"] .status-approved {
    background-color: var(--success-color);
    color: var(--text-light);
}

[data-theme="dark"] .status-processed {
    background-color: var(--info-color);
    color: var(--text-light);
}

[data-theme="dark"] .status-rejected {
    background-color: var(--danger-color);
    color: var(--text-light);
}

/* Dark Mode Approval Status Cards */
[data-theme="dark"] .approval-status-pending {
    background-color: var(--bg-secondary);
    border-left: 4px solid var(--warning-color);
}

[data-theme="dark"] .approval-status-approved {
    background-color: rgba(72, 187, 120, 0.1);
    border-left: 4px solid var(--success-color);
}

[data-theme="dark"] .approval-status-rejected {
    background-color: rgba(245, 101, 101, 0.1);
    border-left: 4px solid var(--danger-color);
}

[data-theme="dark"] .approval-status-partially {
    background-color: rgba(66, 153, 225, 0.1);
    border-left: 4px solid var(--info-color);
}

/* Dark Mode File Upload */
[data-theme="dark"] .file-upload-area {
    background-color: var(--bg-secondary);
    border: 2px dashed var(--border-color);
}

[data-theme="dark"] .file-upload-area:hover {
    background-color: var(--primary-light);
    border-color: var(--primary-color);
}

[data-theme="dark"] .file-upload-icon {
    color: var(--text-secondary);
}

/* Dark Mode Dashboard Stats */
[data-theme="dark"] .dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

[data-theme="dark"] .stat-card {
    background-color: var(--bg-card);
    box-shadow: var(--box-shadow);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .stat-label {
    color: var(--text-secondary);
}

/* Dark Mode Expense Form */
[data-theme="dark"] .expense-form-section {
    background-color: var(--bg-card);
    box-shadow: var(--box-shadow);
}

[data-theme="dark"] .expense-form-title {
    border-bottom: 1px solid var(--border-color);
}

/* Dark Mode Approval Timeline */
[data-theme="dark"] .approval-timeline::before {
    background-color: var(--border-color);
}

[data-theme="dark"] .approval-step::before {
    background-color: var(--bg-secondary);
    border: 2px solid var(--border-color);
}

[data-theme="dark"] .approval-step.completed::before {
    background-color: var(--success-color);
    border-color: var(--success-color);
}

[data-theme="dark"] .approval-step.rejected::before {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
}

[data-theme="dark"] .approval-step.pending::before {
    background-color: var(--warning-color);
    border-color: var(--warning-color);
}

[data-theme="dark"] .approval-step-content {
    background-color: var(--bg-card);
    box-shadow: var(--box-shadow);
}

[data-theme="dark"] .approval-step-date {
    color: var(--text-secondary);
}

/* Dark Mode Notification Items */
[data-theme="dark"] .notification-item {
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .notification-item:hover {
    background-color: var(--bg-secondary);
}

/* Dark Mode User Avatar */
[data-theme="dark"] .user-avatar {
    border: 1px solid var(--border-color);
}

/* Dark Mode Utility Classes */
[data-theme="dark"] .text-primary {
    color: var(--primary-color) !important;
}

[data-theme="dark"] .text-secondary {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-success {
    color: var(--success-color) !important;
}

[data-theme="dark"] .text-danger {
    color: var(--danger-color) !important;
}

[data-theme="dark"] .text-warning {
    color: var(--warning-color) !important;
}

[data-theme="dark"] .text-info {
    color: var(--info-color) !important;
}

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

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

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

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

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

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

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

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

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

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

[data-theme="dark"] .border {
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .border-top {
    border-top: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .border-right {
    border-right: 1px solid var(--border-color) !important;
}

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

[data-theme="dark"] .border-left {
    border-left: 1px solid var(--border-color) !important;
}

/* Dark Mode Toggle Button */
.theme-toggle {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.theme-toggle:hover {
    background-color: var(--primary-light);
    color: var(--primary-color);
}

[data-theme="dark"] .theme-toggle {
    color: var(--text-secondary);
}

[data-theme="dark"] .theme-toggle:hover {
    background-color: var(--primary-light);
    color: var(--primary-color);
}

/* Dark Mode Transition */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Dark Mode Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Dark Mode Focus States */
[data-theme="dark"] *:focus {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* Dark Mode Selection */
[data-theme="dark"] ::selection {
    background-color: var(--primary-color);
    color: var(--text-light);
}

[data-theme="dark"] ::-moz-selection {
    background-color: var(--primary-color);
    color: var(--text-light);
}

/* Dark Mode Third-party Components */
[data-theme="dark"] .swal2-popup {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

[data-theme="dark"] .swal2-title {
    color: var(--text-primary);
}

[data-theme="dark"] .swal2-content {
    color: var(--text-secondary);
}

[data-theme="dark"] .swal2-confirm {
    background-color: var(--primary-color);
}

[data-theme="dark"] .swal2-cancel {
    background-color: var(--secondary-color);
}

[data-theme="dark"] .ui-widget {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

[data-theme="dark"] .ui-widget-content {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .ui-widget-header {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .ui-state-default {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .ui-state-hover {
    background-color: var(--primary-light);
    color: var(--text-primary);
}

[data-theme="dark"] .ui-state-active {
    background-color: var(--primary-color);
    color: var(--text-light);
}

/* Dark Mode Bootstrap Overrides */
[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-theme="dark"] .btn-close-white {
    filter: none;
}

/* Dark Mode Custom Components */
[data-theme="dark"] .filter-section {
    background-color: transparent;
    border: none;
}

[data-theme="dark"] .loading-overlay {
    background: rgba(26, 32, 44, 0.95);
}

[data-theme="dark"] .loading-indicator svg {
    filter: brightness(0) invert(1);
}

/* Dark Mode Print Styles */
@media print {
    [data-theme="dark"] * {
        background: white !important;
        color: black !important;
    }
}

/* Dark Mode Expense Form Specific Styles */
[data-theme="dark"] .expense-item {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .expense-item .form-control,
[data-theme="dark"] .expense-item .form-select {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .expense-item .form-control:focus,
[data-theme="dark"] .expense-item .form-select:focus {
    background-color: var(--bg-tertiary);
    border-color: var(--border-focus);
    color: var(--text-primary);
}

[data-theme="dark"] .expense-item .form-label {
    color: var(--text-primary);
}

[data-theme="dark"] .expense-item .input-group-text {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .total-amount {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    padding: 15px 20px !important;
    border-radius: var(--sf-border-radius) !important;
    margin-top: 20px !important;
    font-size: 1.2rem !important;
    font-weight: 500 !important;
}

[data-theme="dark"] .total-amount span {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .total-amount .form-control {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .total-amount .form-control:focus {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-focus) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .total-amount .form-label {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .total-amount .input-group-text {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Dark Mode Total Section */
[data-theme="dark"] .total-section {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-top: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .total-section .total-amount {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    padding: 15px 20px !important;
    border-radius: var(--sf-border-radius) !important;
    margin-top: 20px !important;
    font-size: 1.2rem !important;
    font-weight: 500 !important;
}

[data-theme="dark"] .total-section .amount-words {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .total-section .amount-words span {
    color: var(--text-primary) !important;
}

/* Additional Total Amount Targeting */
[data-theme="dark"] div.total-amount,
[data-theme="dark"] .total-amount,
[data-theme="dark"] #totalAmount,
[data-theme="dark"] span#totalAmount {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* Force override for any inline styles */
[data-theme="dark"] .total-amount[style*="background"],
[data-theme="dark"] .total-amount[style*="color"] {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* Target the specific total amount container */
[data-theme="dark"] .col-md-6 .total-amount {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--primary-color) !important;
    padding: 15px 20px !important;
    border-radius: var(--sf-border-radius) !important;
    margin-top: 20px !important;
    font-size: 1.2rem !important;
    font-weight: 500 !important;
    display: block !important;
    width: 100% !important;
    box-shadow: 0 0 10px rgba(74, 158, 255, 0.3) !important;
}

/* Dark Mode Table Specific Styles */
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(even) {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

[data-theme="dark"] .table tbody tr {
    color: var(--text-primary);
}

[data-theme="dark"] .table tbody tr:hover {
    background-color: var(--primary-light);
    color: var(--text-primary);
}

[data-theme="dark"] .table tbody td {
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .table thead th {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

/* Dark Mode Pagination */
[data-theme="dark"] .pagination .page-link {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .pagination .page-link:hover {
    background-color: var(--primary-light);
    border-color: var(--primary-color);
    color: var(--text-primary);
}

[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-light);
}

[data-theme="dark"] .pagination .page-item.disabled .page-link {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

/* Dark Mode Search Box */
[data-theme="dark"] .search-box .form-control {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .search-box .form-control:focus {
    background-color: var(--bg-tertiary);
    border-color: var(--border-focus);
    color: var(--text-primary);
}

[data-theme="dark"] .search-icon {
    color: var(--text-secondary);
}

/* Dark Mode Autocomplete */
[data-theme="dark"] .ui-autocomplete {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ui-autocomplete .ui-menu-item {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .ui-autocomplete .ui-menu-item:hover,
[data-theme="dark"] .ui-autocomplete .ui-menu-item.ui-state-focus {
    background-color: var(--primary-light) !important;
    color: var(--text-primary) !important;
}

/* Dark Mode Email Chips */
[data-theme="dark"] .email-chip {
    background-color: var(--primary-color);
    color: var(--text-light);
}

/* Dark Mode Split Invoice Styling */
[data-theme="dark"] .master-invoice {
    background-color: rgba(74, 158, 255, 0.1);
}

[data-theme="dark"] .sub-invoice {
    background-color: rgba(66, 153, 225, 0.1);
}

[data-theme="dark"] .sub-invoice td:first-child:before {
    color: var(--text-secondary);
}

/* Dark Mode Status Badges */
[data-theme="dark"] .status-badge {
    color: var(--text-light);
}

[data-theme="dark"] .status-pending,
[data-theme="dark"] .status-pending_approval,
[data-theme="dark"] .status-pending-approval {
    background-color: var(--warning-color);
    color: var(--text-primary);
}

[data-theme="dark"] .status-submitted {
    background-color: var(--primary-color);
    color: var(--text-light);
}

[data-theme="dark"] .status-approved {
    background-color: var(--success-color);
    color: var(--text-light);
}

[data-theme="dark"] .status-rejected {
    background-color: var(--danger-color);
    color: var(--text-light);
}

[data-theme="dark"] .status-partially-approved {
    background-color: var(--secondary-color);
    color: var(--text-light);
}

[data-theme="dark"] .status-processed {
    background-color: var(--info-color);
    color: var(--text-light);
}

/* Dark Mode Form Groups */
[data-theme="dark"] .form-group {
    color: var(--text-primary);
}

[data-theme="dark"] .form-group .form-label {
    color: var(--text-primary);
}

[data-theme="dark"] .form-group .form-text {
    color: var(--text-secondary);
}

/* Dark Mode Input Groups */
[data-theme="dark"] .input-group .form-control {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .input-group .form-control:focus {
    background-color: var(--bg-tertiary);
    border-color: var(--border-focus);
    color: var(--text-primary);
}

[data-theme="dark"] .input-group .input-group-text {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

/* Dark Mode Custom Form Elements */
[data-theme="dark"] .form-check-input {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

[data-theme="dark"] .form-check-label {
    color: var(--text-primary);
}

/* Dark Mode Text Areas */
[data-theme="dark"] textarea.form-control {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] textarea.form-control:focus {
    background-color: var(--bg-tertiary);
    border-color: var(--border-focus);
    color: var(--text-primary);
}

/* Dark Mode File Upload */
[data-theme="dark"] .file-upload-area {
    background-color: var(--bg-secondary);
    border: 2px dashed var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .file-upload-area:hover {
    background-color: var(--primary-light);
    border-color: var(--primary-color);
}

/* Dark Mode Custom Components */
[data-theme="dark"] .expense-form-section {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .expense-form-title {
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

/* Dark Mode List Groups */
[data-theme="dark"] .list-group-item {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .list-group-item:hover {
    background-color: var(--primary-light);
    color: var(--text-primary);
}

[data-theme="dark"] .list-group-item.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-light);
}

/* Dark Mode Breadcrumbs */
[data-theme="dark"] .breadcrumb {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .breadcrumb-item a {
    color: var(--primary-color);
}

[data-theme="dark"] .breadcrumb-item.active {
    color: var(--text-secondary);
}

/* Dark Mode Progress Bars */
[data-theme="dark"] .progress {
    background-color: var(--bg-tertiary);
}

[data-theme="dark"] .progress-bar {
    background-color: var(--primary-color);
}

/* Dark Mode Spinners */
[data-theme="dark"] .spinner-border {
    color: var(--primary-color);
}

[data-theme="dark"] .spinner-grow {
    color: var(--primary-color);
}

/* Dark Mode Specific Expense Form Classes */
[data-theme="dark"] .expense-item {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .expense-header {
    color: var(--text-primary);
}

[data-theme="dark"] .expense-files {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .remove-expense {
    color: var(--danger-color);
}

[data-theme="dark"] .remove-expense:hover {
    color: var(--text-primary);
}

[data-theme="dark"] .split-invoice-check {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .split-invoice-check:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

[data-theme="dark"] .cost-center-autocomplete {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .cost-center-autocomplete:focus {
    background-color: var(--bg-tertiary);
    border-color: var(--border-focus);
    color: var(--text-primary);
}

[data-theme="dark"] .amount-input {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .amount-input:focus {
    background-color: var(--bg-tertiary);
    border-color: var(--border-focus);
    color: var(--text-primary);
}

[data-theme="dark"] .approver-email-input {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .approver-email-input:focus {
    background-color: var(--bg-tertiary);
    border-color: var(--border-focus);
    color: var(--text-primary);
}

[data-theme="dark"] .datepicker-only {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .datepicker-only:focus {
    background-color: var(--bg-tertiary);
    border-color: var(--border-focus);
    color: var(--text-primary);
}

[data-theme="dark"] .travel-fields {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

/* Dark Mode File Validation Messages */
[data-theme="dark"] .file-validation-error {
    color: var(--danger-color);
    background-color: rgba(245, 101, 101, 0.1);
    border: 1px solid var(--danger-color);
    padding: 0.5rem;
    border-radius: 4px;
}

[data-theme="dark"] .file-validation-success {
    color: var(--success-color);
    background-color: rgba(72, 187, 120, 0.1);
    border: 1px solid var(--success-color);
    padding: 0.5rem;
    border-radius: 4px;
}

[data-theme="dark"] .file-validation-loading {
    color: var(--info-color);
    background-color: rgba(66, 153, 225, 0.1);
    border: 1px solid var(--info-color);
    padding: 0.5rem;
    border-radius: 4px;
}

/* Dark Mode Additional Form Elements */
[data-theme="dark"] .form-control:disabled {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    opacity: 0.6;
}

[data-theme="dark"] .form-select:disabled {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    opacity: 0.6;
}

/* Dark Mode Placeholder Text */
[data-theme="dark"] .form-control::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

[data-theme="dark"] .form-select::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

/* Dark Mode Small Text */
[data-theme="dark"] .small,
[data-theme="dark"] small {
    color: var(--text-secondary);
}

/* Dark Mode Text Muted */
[data-theme="dark"] .text-muted {
    color: var(--text-secondary) !important;
}

/* Dark Mode Links */
[data-theme="dark"] a {
    color: var(--primary-color);
}

[data-theme="dark"] a:hover {
    color: var(--primary-dark);
}

/* Dark Mode Code Elements */
[data-theme="dark"] code {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] pre {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

/* Dark Mode Blockquotes */
[data-theme="dark"] blockquote {
    background-color: var(--bg-secondary);
    border-left: 4px solid var(--primary-color);
    color: var(--text-primary);
}

/* Dark Mode Horizontal Rules */
[data-theme="dark"] hr {
    border-color: var(--border-color);
}

/* Dark Mode Mark/Highlight */
[data-theme="dark"] mark {
    background-color: var(--warning-color);
    color: var(--text-primary);
}

/* Dark Mode KBD */
[data-theme="dark"] kbd {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

/* Dark Mode Sample */
[data-theme="dark"] samp {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

/* Dark Mode Variable */
[data-theme="dark"] var {
    color: var(--primary-color);
}

/* Dark Mode Abbreviation */
[data-theme="dark"] abbr[title] {
    border-bottom: 1px dotted var(--border-color);
}

/* Dark Mode Definition Lists */
[data-theme="dark"] dl {
    color: var(--text-primary);
}

[data-theme="dark"] dt {
    color: var(--text-primary);
}

[data-theme="dark"] dd {
    color: var(--text-secondary);
}

/* Dark Mode Address */
[data-theme="dark"] address {
    color: var(--text-primary);
}

/* Dark Mode Cite */
[data-theme="dark"] cite {
    color: var(--text-secondary);
}

/* Dark Mode Time */
[data-theme="dark"] time {
    color: var(--text-secondary);
}

/* Dark Mode Dashboard Specific Styles */
[data-theme="dark"] .dashboard-stats {
    background-color: transparent;
}

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

[data-theme="dark"] .stat-value {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .stat-label {
    color: var(--text-secondary) !important;
}

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

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

[data-theme="dark"] .feature-icon {
    color: var(--primary-color) !important;
}

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

[data-theme="dark"] .card-text {
    color: var(--text-secondary) !important;
}

/* Override inline styles for Reports section */
[data-theme="dark"] .card[style*="background-color: #f8f9fa"] {
    background-color: var(--bg-card) !important;
    opacity: 0.8 !important;
}

[data-theme="dark"] .feature-icon[style*="color: #6c757d"] {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .card-title[style*="color: #6c757d"] {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .card-text[style*="color: #6c757d"] {
    color: var(--text-secondary) !important;
}

/* Dark Mode Card Headers */
[data-theme="dark"] .card-header.bg-light {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .card-header {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* Dark Mode Quick Actions Section */
[data-theme="dark"] h4 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .mb-3 {
    color: var(--text-primary) !important;
}

/* Dark Mode Alert in Reports Section */
[data-theme="dark"] .alert-info {
    background-color: rgba(66, 153, 225, 0.1) !important;
    border: 1px solid var(--info-color) !important;
    color: var(--info-color) !important;
}

/* Dark Mode Disabled Buttons */
[data-theme="dark"] .btn:disabled {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
    opacity: 0.6 !important;
}

[data-theme="dark"] .btn-secondary:disabled {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

/* Dark Mode User Information Section */
[data-theme="dark"] .card-body {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* Dark Mode Small Text */
[data-theme="dark"] .small {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-muted {
    color: var(--text-secondary) !important;
}

/* Dark Mode Text Color Classes */
[data-theme="dark"] .text-primary {
    color: var(--primary-color) !important;
}

[data-theme="dark"] .text-success {
    color: var(--success-color) !important;
}

[data-theme="dark"] .text-danger {
    color: var(--danger-color) !important;
}

[data-theme="dark"] .text-info {
    color: var(--info-color) !important;
}

[data-theme="dark"] .text-warning {
    color: var(--warning-color) !important;
}

/* Dark Mode Background Color Classes */
[data-theme="dark"] .bg-light {
    background-color: var(--bg-tertiary) !important;
}

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

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

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

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

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

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

/* Dark Mode File Input Specific Styles */
[data-theme="dark"] input[type="file"] {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] input[type="file"]:focus {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-focus) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(74, 158, 255, 0.25) !important;
}

[data-theme="dark"] input[type="file"]:hover {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] input[type="file"].has-error {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--danger-color) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(245, 101, 101, 0.25) !important;
}

[data-theme="dark"] input[type="file"].has-success {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--success-color) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(72, 187, 120, 0.25) !important;
}

/* Dark Mode File Input Webkit Styling */
[data-theme="dark"] input[type="file"]::-webkit-file-upload-button {
    background-color: var(--primary-color) !important;
    color: var(--text-light) !important;
    border: 1px solid var(--primary-color) !important;
    border-radius: 4px !important;
    padding: 0.375rem 0.75rem !important;
    margin-right: 0.5rem !important;
    cursor: pointer !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

[data-theme="dark"] input[type="file"]::-webkit-file-upload-button:hover {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
}

[data-theme="dark"] input[type="file"]::-webkit-file-upload-button:focus {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    outline: 2px solid var(--border-focus) !important;
    outline-offset: 2px !important;
}

/* Dark Mode File Input Text */
[data-theme="dark"] input[type="file"]::file-selector-button {
    background-color: var(--primary-color) !important;
    color: var(--text-light) !important;
    border: 1px solid var(--primary-color) !important;
    border-radius: 4px !important;
    padding: 0.375rem 0.75rem !important;
    margin-right: 0.5rem !important;
    cursor: pointer !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

[data-theme="dark"] input[type="file"]::file-selector-button:hover {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
}

[data-theme="dark"] input[type="file"]::file-selector-button:focus {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    outline: 2px solid var(--border-focus) !important;
    outline-offset: 2px !important;
}

/* Dark Mode File Input Container */
[data-theme="dark"] .expense-files {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--sf-border-radius) !important;
    padding: 1rem !important;
}

[data-theme="dark"] .expense-files .input-group {
    background-color: transparent !important;
}

[data-theme="dark"] .expense-files .input-group-text {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .expense-files .input-group-text:hover {
    background-color: var(--primary-light) !important;
    color: var(--primary-color) !important;
}

/* Dark Mode File Upload Area */
[data-theme="dark"] .file-upload-area {
    background-color: var(--bg-secondary) !important;
    border: 2px dashed var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .file-upload-area:hover {
    background-color: var(--primary-light) !important;
    border-color: var(--primary-color) !important;
}

[data-theme="dark"] .upload-drop-zone {
    background-color: var(--bg-secondary) !important;
    border: 2px dashed var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .upload-drop-zone:hover {
    background-color: var(--primary-light) !important;
    border-color: var(--primary-color) !important;
}

[data-theme="dark"] .upload-content h5 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .upload-content p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .upload-content .text-muted {
    color: var(--text-secondary) !important;
}

/* Dark Mode File Upload Icons */
[data-theme="dark"] .fa-cloud-upload-alt {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .fa-upload {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .fa-file-invoice {
    color: var(--text-primary) !important;
}

/* Dark Mode File Upload Buttons */
[data-theme="dark"] .btn-secondary {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

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

/* Dark Mode Dashboard Reports Section - Coming Soon Alert */
[data-theme="dark"] .alert-info {
    background-color: rgba(66, 153, 225, 0.15) !important;
    border: 1px solid var(--info-color) !important;
    color: var(--info-color) !important;
    border-radius: 8px !important;
    padding: 0.75rem 1rem !important;
}

[data-theme="dark"] .alert-info strong {
    color: var(--info-color) !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="dark"] .alert-info i {
    color: var(--info-color) !important;
}

[data-theme="dark"] .alert-info .fas {
    color: var(--info-color) !important;
}

/* Dark Mode Reports Section Specific */
[data-theme="dark"] .card[style*="background-color: #f8f9fa"] .alert-info {
    background-color: rgba(66, 153, 225, 0.2) !important;
    border: 1px solid var(--info-color) !important;
    color: var(--info-color) !important;
}

[data-theme="dark"] .card[style*="background-color: #f8f9fa"] .alert-info strong {
    color: var(--info-color) !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .card[style*="background-color: #f8f9fa"] .alert-info i {
    color: var(--info-color) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Dark Mode Coming Soon Text Enhancement */
[data-theme="dark"] .alert-info .mb-3 {
    color: var(--info-color) !important;
}

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

/* Dark Mode Alert Text */
[data-theme="dark"] .alert-info * {
    color: var(--info-color) !important;
}

[data-theme="dark"] .alert-info .strong,
[data-theme="dark"] .alert-info strong {
    color: var(--info-color) !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* Dark Mode Alert Icons */
[data-theme="dark"] .alert-info .fa-clock {
    color: var(--info-color) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="dark"] .alert-info .fas {
    color: var(--info-color) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Dark Mode Alert Container */
[data-theme="dark"] .alert {
    border-radius: 8px !important;
    border-width: 1px !important;
    border-style: solid !important;
}

/* Dark Mode Alert Info Specific */
[data-theme="dark"] .alert.alert-info {
    background-color: rgba(66, 153, 225, 0.15) !important;
    border-color: var(--info-color) !important;
    color: var(--info-color) !important;
}

[data-theme="dark"] .alert.alert-info * {
    color: var(--info-color) !important;
}

[data-theme="dark"] .alert.alert-info strong {
    color: var(--info-color) !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

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

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

/* Dark Mode Login Page Specific Styles */
[data-theme="dark"] body {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%) !important;
}

[data-theme="dark"] .login-box {
    background: rgba(45, 55, 72, 0.95) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 1px 8px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .login-box h1 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .login-box p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .brand-subtitle {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .login-branding {
    color: var(--text-secondary) !important;
}

/* Dark Mode Google Sign-in Button */
[data-theme="dark"] .btn-google {
    background: linear-gradient(135deg, #4285F4 0%, #3367d6 100%) !important;
    color: white !important;
    border: none !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.4) !important;
    transition: all 0.3s ease !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    font-size: 1rem !important;
    text-transform: none !important;
}

[data-theme="dark"] .btn-google:hover,
[data-theme="dark"] .btn-google:focus {
    background: linear-gradient(135deg, #3367d6 0%, #2a56c6 100%) !important;
    color: white !important;
    box-shadow: 0 6px 20px rgba(66, 133, 244, 0.5) !important;
    transform: translateY(-1px) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important;
    font-weight: 700 !important;
}

[data-theme="dark"] .btn-google:active {
    background: linear-gradient(135deg, #2a56c6 0%, #1e3f8b 100%) !important;
    color: white !important;
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(66, 133, 244, 0.4) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7) !important;
    font-weight: 700 !important;
}

/* Dark Mode Google Icon */
[data-theme="dark"] .btn-google svg {
    fill: white !important;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2)) !important;
}

[data-theme="dark"] .btn-google:hover svg {
    fill: white !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) !important;
}

/* Additional Google Button Text Styling */
[data-theme="dark"] .btn-google,
[data-theme="dark"] .btn-google *,
[data-theme="dark"] .btn-google span,
[data-theme="dark"] .btn-google div {
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    font-weight: 700 !important;
}

[data-theme="dark"] .google-login-btn {
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    font-weight: 700 !important;
}

[data-theme="dark"] .google-login-btn:hover {
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important;
    font-weight: 700 !important;
}

/* Force override for any inherited styles */
[data-theme="dark"] a.btn-google,
[data-theme="dark"] a.google-login-btn {
    color: white !important;
    text-decoration: none !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    font-weight: 700 !important;
}

[data-theme="dark"] a.btn-google:hover,
[data-theme="dark"] a.google-login-btn:hover {
    color: white !important;
    text-decoration: none !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important;
    font-weight: 700 !important;
}

/* Dark Mode Login Logo Glow */
[data-theme="dark"] .login-logo-glow {
    background: radial-gradient(circle, rgba(74, 158, 255, 0.2) 0%, rgba(66, 153, 225, 0.1) 60%, transparent 100%) !important;
}

/* Dark Mode Login Logo */
[data-theme="dark"] .login-logo {
    filter: brightness(1.1) contrast(1.1) !important;
}

/* Dark Mode Login Container */
[data-theme="dark"] .login-container {
    background: transparent !important;
}

/* Dark Mode Login Page Text */
[data-theme="dark"] .login-box .text-center p {
    color: var(--text-secondary) !important;
}

/* Dark Mode Login Page Links */
[data-theme="dark"] .login-box a {
    color: var(--primary-color) !important;
}

[data-theme="dark"] .login-box a:hover {
    color: var(--primary-dark) !important;
}

/* Dark Mode Login Page Form Elements */
[data-theme="dark"] .login-box .form-control {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .login-box .form-control:focus {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-focus) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(74, 158, 255, 0.25) !important;
}

[data-theme="dark"] .login-box .form-control::placeholder {
    color: var(--text-secondary) !important;
    opacity: 0.7 !important;
}

/* Dark Mode Login Page Labels */
[data-theme="dark"] .login-box .form-label {
    color: var(--text-primary) !important;
}

/* Dark Mode Login Page Buttons */
[data-theme="dark"] .login-box .btn {
    font-weight: 500 !important;
}

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

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

[data-theme="dark"] .login-box .btn-secondary {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

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