/**
 * Improved Dark Mode CSS
 * Enhanced visibility and better color scheme
 */

/* Dark Mode Variables */
[data-theme="dark"] {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #3a3a3a;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --text-tertiary: #808080;
    --border-color: #404040;
    --hover-bg: #4a4a4a;
    --shadow: rgba(0, 0, 0, 0.5);
    --link-color: #64b5f6;
    --link-hover: #90caf9;
}

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

/* Boxes and Cards */
[data-theme="dark"] .box,
[data-theme="dark"] .content-wrapper,
[data-theme="dark"] .main-header,
[data-theme="dark"] .main-sidebar {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

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

/* Tables */
[data-theme="dark"] .table,
[data-theme="dark"] table {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

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

[data-theme="dark"] .table > thead > tr > th,
[data-theme="dark"] .table > tbody > tr > td {
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Forms */
[data-theme="dark"] .form-control,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

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

/* Modals */
[data-theme="dark"] .modal-content {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

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

/* Dropdowns */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

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

[data-theme="dark"] .dropdown-menu > li > a:hover {
    background-color: var(--hover-bg);
    color: var(--text-primary) !important;
}

/* Tailwind Components */
[data-theme="dark"] .tw-bg-white {
    background-color: var(--bg-secondary) !important;
}

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

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

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

[data-theme="dark"] .tw-border-gray-200 {
    border-color: var(--border-color) !important;
}

/* Dropdown Menu Fix - NO GREEN! */
[data-theme="dark"] .tw-dw-dropdown-content,
[data-theme="dark"] .tw-dw-menu {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .tw-dw-menu li a,
[data-theme="dark"] .tw-dw-dropdown-content li a {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .tw-dw-menu li a:hover,
[data-theme="dark"] .tw-dw-dropdown-content li a:hover {
    background-color: var(--hover-bg) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .tw-dw-menu .tw-flex,
[data-theme="dark"] .tw-dw-dropdown-content .tw-flex {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .tw-dw-menu svg,
[data-theme="dark"] .tw-dw-dropdown-content svg {
    color: var(--text-secondary) !important;
}

/* Header and Navigation */
[data-theme="dark"] .tw-bg-gradient-to-r {
    background: linear-gradient(to right, #1e3a5f, #2d5a8e) !important;
}

/* Links - Blue instead of Green */
[data-theme="dark"] a {
    color: var(--link-color) !important;
}

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

/* Exception: Keep navigation links white */
[data-theme="dark"] .tw-text-sm a,
[data-theme="dark"] nav a,
[data-theme="dark"] .sidebar-menu a {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .tw-text-sm a:hover,
[data-theme="dark"] nav a:hover {
    color: var(--text-primary) !important;
    background-color: var(--hover-bg) !important;
}

/* Dark Mode Toggle Button - HIGHLY VISIBLE */
#theme-toggle {
    position: relative;
    background-color: rgba(255, 255, 255, 0.15) !important;
    border: 2px solid rgba(255, 215, 0, 0.5) !important;
    transition: all 0.3s ease !important;
}

#theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 215, 0, 0.7) !important;
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

#theme-toggle i {
    font-size: 18px !important;
    color: #ffd700 !important; /* Golden color */
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

[data-theme="dark"] #theme-toggle {
    background-color: rgba(255, 215, 0, 0.2) !important;
    border-color: rgba(255, 215, 0, 0.6) !important;
}

[data-theme="dark"] #theme-toggle:hover {
    background-color: rgba(255, 215, 0, 0.3) !important;
    border-color: rgba(255, 215, 0, 0.8) !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

[data-theme="dark"] #theme-toggle i {
    color: #ffeb3b !important; /* Bright yellow in dark mode */
}

/* Buttons - Keep Original Colors */
[data-theme="dark"] .btn,
[data-theme="dark"] button {
    color: inherit;
}

[data-theme="dark"] .btn-primary {
    background-color: #2196F3 !important;
    border-color: #1976D2 !important;
    color: white !important;
}

[data-theme="dark"] .btn-primary:hover {
    background-color: #1976D2 !important;
}

[data-theme="dark"] .btn-success {
    background-color: #4CAF50 !important;
    border-color: #388E3C !important;
    color: white !important;
}

[data-theme="dark"] .btn-success:hover {
    background-color: #388E3C !important;
}

[data-theme="dark"] .btn-danger {
    background-color: #f44336 !important;
    border-color: #d32f2f !important;
    color: white !important;
}

[data-theme="dark"] .btn-danger:hover {
    background-color: #d32f2f !important;
}

[data-theme="dark"] .btn-warning {
    background-color: #ff9800 !important;
    border-color: #f57c00 !important;
    color: white !important;
}

[data-theme="dark"] .btn-warning:hover {
    background-color: #f57c00 !important;
}

[data-theme="dark"] .btn-info {
    background-color: #00bcd4 !important;
    border-color: #0097a7 !important;
    color: white !important;
}

/* Sidebar */
[data-theme="dark"] .sidebar-menu > li > a {
    color: var(--text-primary);
}

[data-theme="dark"] .sidebar-menu > li.active > a {
    background-color: var(--hover-bg);
}

/* Shadows */
[data-theme="dark"] .tw-shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.7), 0 4px 6px -2px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .box-shadow,
[data-theme="dark"] .shadow {
    box-shadow: 0 2px 4px var(--shadow) !important;
}

/* Panels and Alerts */
[data-theme="dark"] .panel,
[data-theme="dark"] .alert {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .alert-info {
    background-color: #1e3a5f;
    border-color: #2d5a8e;
    color: #90caf9;
}

[data-theme="dark"] .alert-success {
    background-color: #1b5e20;
    border-color: #2e7d32;
    color: #a5d6a7;
}

[data-theme="dark"] .alert-warning {
    background-color: #e65100;
    border-color: #f57c00;
    color: #ffcc80;
}

[data-theme="dark"] .alert-danger {
    background-color: #b71c1c;
    border-color: #d32f2f;
    color: #ef9a9a;
}

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

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--text-primary);
}

/* Smooth Transitions */
body, .box, .content-wrapper, .main-header, .main-sidebar,
.form-control, input, textarea, select, .table, .modal-content,
#theme-toggle, a, .btn, .dropdown-menu {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}

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

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

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

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