/* Dark Mode Theme CSS */

:root.dark {
    --bg-primary: #121212;
    --bg-secondary: #1e1e1e;
    --bg-tertiary: #2d2d2d;
    --text-primary: #f3f4f6;
    --text-secondary: #d1d5db;
    --text-tertiary: #9ca3af;
    --border-color: #374151;
    --accent-color: #60a5fa;
    --accent-hover: #3b82f6;
    --error-color: #ef4444;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --info-color: #3b82f6;
}

/* Dark Mode Tailwind Styles */
.dark body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

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

.dark .bg-gray-50,
.dark .bg-gray-100 {
    background-color: var(--bg-tertiary) !important;
}

.dark .text-gray-700,
.dark .text-gray-800,
.dark .text-gray-900 {
    color: var(--text-primary) !important;
}

.dark .text-gray-500,
.dark .text-gray-600 {
    color: var(--text-secondary) !important;
}

.dark .text-gray-400 {
    color: var(--text-tertiary) !important;
}

.dark .border,
.dark .border-gray-200,
.dark .border-gray-300 {
    border-color: var(--border-color) !important;
}

/* Panel Elements */
.dark .shadow-md,
.dark .shadow-sm,
.dark .shadow-lg {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.36) !important;
}

/* Form Elements */
.dark input,
.dark select,
.dark textarea {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.dark input::placeholder {
    color: var(--text-tertiary) !important;
}

/* Buttons */
.dark .hover\:bg-gray-50:hover,
.dark .hover\:bg-gray-100:hover {
    background-color: var(--bg-tertiary) !important;
}

/* Table Elements */
.dark table {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.dark th,
.dark td {
    border-color: var(--border-color) !important;
}

.dark thead {
    background-color: var(--bg-tertiary) !important;
}

.dark tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Charts and Graphs */
.dark .apexcharts-canvas {
    background-color: var(--bg-secondary) !important;
}

.dark .apexcharts-text tspan,
.dark .apexcharts-tooltip {
    fill: var(--text-primary) !important;
}

.dark .apexcharts-grid line {
    stroke: var(--border-color) !important;
}

/* Sidebar */
.dark .sidebar {
    background-color: var(--bg-secondary) !important;
}

.dark .sidebar a,
.dark .sidebar .nav-link {
    color: var(--text-secondary) !important;
}

.dark .sidebar a:hover,
.dark .sidebar .nav-link:hover {
    background-color: var(--bg-tertiary) !important;
}

.dark .sidebar a.active,
.dark .sidebar .nav-link.active {
    background-color: var(--accent-color) !important;
    color: white !important;
}

/* Dropdown Menus */
.dark .dropdown-menu {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

.dark .dropdown-item {
    color: var(--text-primary) !important;
}

.dark .dropdown-item:hover {
    background-color: var(--bg-tertiary) !important;
}

/* Modal Windows */
.dark .modal-content {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.dark .modal-header,
.dark .modal-footer {
    border-color: var(--border-color) !important;
}

/* Card Elements */
.dark .card {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.dark .card-header,
.dark .card-footer {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

/* Alerts */
.dark .alert-success {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: var(--success-color) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
}

.dark .alert-danger {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: var(--error-color) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
}

.dark .alert-warning {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: var(--warning-color) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
}

.dark .alert-info {
    background-color: rgba(59, 130, 246, 0.2) !important;
    color: var(--info-color) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
}

/* Theme Toggle Button */
.theme-toggle {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

.theme-toggle:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.dark .theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.theme-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
}

.theme-toggle .sun-icon {
    display: none;
}

.theme-toggle .moon-icon {
    display: block;
}

.dark .theme-toggle .sun-icon {
    display: block;
}

.dark .theme-toggle .moon-icon {
    display: none;
}