/* ============================================
   DARK MODE STYLES
   ============================================ */

/* Dark mode variables */
:root[data-theme="dark"] {
    /* Background colors */
    --color-bg-body: #1a1d23;
    --color-bg-surface: #242830;
    --color-bg-surface-hover: #2d323c;

    /* Text colors */
    --color-text-primary: #e8eaed;
    --color-text-secondary: #9aa0a6;
    --color-text-muted: #6e7681;
    --color-text-inverse: #1a1d23;

    /* Border colors */
    --color-border-light: #3c4048;
    --color-border-medium: #4a4f5a;

    /* Component specific */
    --sidebar-bg: #1f2329;
    --sidebar-text: #e8eaed;
    --sidebar-hover: #2d323c;
    --topbar-bg: #242830;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

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

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

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

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

[data-theme="dark"] .table thead th {
    background-color: var(--color-bg-surface-hover);
    border-color: var(--color-border-light);
    color: var(--color-text-primary);
}

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

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

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

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

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

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

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

[data-theme="dark"] .dropdown-menu {
    background-color: var(--color-bg-surface);
    border-color: var(--color-border-light);
}

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

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

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

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

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

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

/* Sidebar dark mode */
[data-theme="dark"] .sidebar {
    background-color: var(--sidebar-bg);
    border-right-color: var(--color-border-light);
}

[data-theme="dark"] .sidebar-brand {
    color: var(--sidebar-text);
    border-bottom-color: var(--color-border-light);
}

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

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

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

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

/* Top bar dark mode */
[data-theme="dark"] .top-bar {
    background-color: var(--topbar-bg);
    border-bottom-color: var(--color-border-light);
}

/* Language switcher dark mode */
[data-theme="dark"] .language-switcher .btn {
    background-color: var(--color-bg-surface-hover);
    border-color: var(--color-border-medium);
    color: var(--color-text-primary);
}

/* Auth container dark mode */
[data-theme="dark"] .auth-container {
    background-color: transparent;
}

[data-theme="dark"] .auth-card {
    background-color: var(--color-bg-surface);
    border-color: var(--color-border-light);
}

/* Badges dark mode */
[data-theme="dark"] .badge {
    background-color: var(--color-bg-surface-hover);
    color: var(--color-text-primary);
}

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

/* Smooth transitions */
body,
.card,
.form-control,
.btn,
.dropdown-menu,
.sidebar,
.sidebar-nav-link,
.top-bar {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}