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

/* Override variables for dark mode - already handled in variables.css */
/* This file contains any dark-mode specific styling that can't be done with CSS variables */

:root.dark-mode {
    /* Dark mode is primary in modern design */
}

/* Specific dark mode overrides */
:root.dark-mode body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Ensure text is visible in dark mode */
:root.dark-mode h1,
:root.dark-mode h2,
:root.dark-mode h3,
:root.dark-mode h4,
:root.dark-mode h5,
:root.dark-mode h6 {
    color: var(--text-primary);
}

:root.dark-mode p {
    color: var(--text-secondary);
}

/* Ensure links are visible in dark mode */
:root.dark-mode a {
    color: var(--color-info);
}

:root.dark-mode a:hover {
    color: #60a5fa;
}

/* Code blocks in dark mode */
:root.dark-mode code {
    background-color: var(--bg-tertiary);
    color: #fca5a5;
}

:root.dark-mode pre {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

:root.dark-mode pre code {
    background: none;
    color: var(--text-primary);
}

/* Form inputs in dark mode */
:root.dark-mode input[type="text"],
:root.dark-mode input[type="email"],
:root.dark-mode input[type="password"],
:root.dark-mode input[type="number"],
:root.dark-mode input[type="date"],
:root.dark-mode textarea,
:root.dark-mode select {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

:root.dark-mode input[type="text"]:focus,
:root.dark-mode input[type="email"]:focus,
:root.dark-mode input[type="password"]:focus,
:root.dark-mode input[type="number"]:focus,
:root.dark-mode input[type="date"]:focus,
:root.dark-mode textarea:focus,
:root.dark-mode select:focus {
    background-color: var(--bg-tertiary);
    border-color: var(--color-primary);
}

:root.dark-mode input[type="text"]::placeholder,
:root.dark-mode input[type="email"]::placeholder,
:root.dark-mode input[type="password"]::placeholder,
:root.dark-mode textarea::placeholder {
    color: var(--text-tertiary);
}

/* Buttons in dark mode */
:root.dark-mode .btn-secondary {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

:root.dark-mode .btn-secondary:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--border-dark);
}

/* Table styling in dark mode */
:root.dark-mode thead {
    background-color: var(--bg-secondary);
}

:root.dark-mode tbody tr:hover {
    background-color: var(--bg-secondary);
}

/* Scrollbar in dark mode */
:root.dark-mode ::-webkit-scrollbar-thumb {
    background-color: var(--border-dark);
}

:root.dark-mode ::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-tertiary);
}

/* Cards in dark mode */
:root.dark-mode .card,
:root.dark-mode .kpi-card {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
}

/* Chart background in dark mode */
:root.dark-mode .chart-container {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
}

/* Modal in dark mode */
:root.dark-mode .modal-content {
    background-color: var(--bg-primary);
}

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

/* Dropdown in dark mode */
:root.dark-mode .dropdown-menu {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
}

:root.dark-mode .dropdown-item:hover {
    background-color: var(--bg-secondary);
}

/* Badge colors in dark mode - more vibrant */
:root.dark-mode .badge.success {
    background-color: rgba(72, 187, 120, 0.2);
    color: #86efac;
}

:root.dark-mode .badge.warning {
    background-color: rgba(237, 137, 54, 0.2);
    color: #fdba74;
}

:root.dark-mode .badge.danger {
    background-color: rgba(245, 101, 101, 0.2);
    color: #fca5a5;
}

:root.dark-mode .badge.info {
    background-color: rgba(66, 153, 225, 0.2);
    color: #93c5fd;
}

/* Alert colors in dark mode */
:root.dark-mode .alert.success {
    background-color: rgba(72, 187, 120, 0.15);
    color: #86efac;
    border-left-color: var(--color-success);
}

:root.dark-mode .alert.warning {
    background-color: rgba(237, 137, 54, 0.15);
    color: #fdba74;
    border-left-color: var(--color-warning);
}

:root.dark-mode .alert.danger {
    background-color: rgba(245, 101, 101, 0.15);
    color: #fca5a5;
    border-left-color: var(--color-danger);
}

:root.dark-mode .alert.info {
    background-color: rgba(66, 153, 225, 0.15);
    color: #93c5fd;
    border-left-color: var(--color-info);
}

/* KPI cards in dark mode with subtle gradient */
:root.dark-mode .kpi-card {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

:root.dark-mode .kpi-card::before {
    background: linear-gradient(90deg, #60a5fa, #2dd4bf);
}

/* Ensure good contrast for all text elements in dark mode */
:root.dark-mode .text-secondary {
    color: var(--text-secondary);
}

:root.dark-mode .text-tertiary {
    color: var(--text-tertiary);
}

/* Skeleton loading in dark mode */
:root.dark-mode .skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-tertiary) 25%,
        var(--bg-secondary) 50%,
        var(--bg-tertiary) 75%
    );
}

/* Ensure borders are visible in dark mode */
:root.dark-mode input,
:root.dark-mode textarea,
:root.dark-mode select,
:root.dark-mode .table-wrapper,
:root.dark-mode .card,
:root.dark-mode .kpi-card,
:root.dark-mode .chart-container {
    border-color: var(--border-color);
}

/* Make sure disabled elements are still readable */
:root.dark-mode input:disabled,
:root.dark-mode textarea:disabled,
:root.dark-mode select:disabled {
    background-color: var(--bg-tertiary);
    color: var(--text-tertiary);
    opacity: 0.5;
}

/* Navigation items in sidebar dark mode */
:root.dark-mode .nav-item {
    color: var(--text-secondary);
}

:root.dark-mode .nav-item:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

:root.dark-mode .nav-item.active {
    background-color: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

/* Breadcrumb in dark mode */
:root.dark-mode .breadcrumb {
    color: var(--text-secondary);
}

:root.dark-mode .breadcrumb a {
    color: var(--color-info);
}

:root.dark-mode .breadcrumb a:hover {
    color: #60a5fa;
}

/* Ensure high contrast for critical UI elements */
:root.dark-mode .btn-primary {
    background-color: #3b82f6;
}

:root.dark-mode .btn-primary:hover {
    background-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

:root.dark-mode .btn-danger {
    background-color: #ef4444;
}

:root.dark-mode .btn-danger:hover {
    background-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

/* Status indicators with good contrast in dark mode */
:root.dark-mode .status-success,
:root.dark-mode .badge.success::before {
    background-color: #48bb78;
}

:root.dark-mode .status-danger,
:root.dark-mode .badge.danger::before {
    background-color: #f56565;
}

:root.dark-mode .status-warning,
:root.dark-mode .badge.warning::before {
    background-color: #ed8936;
}

:root.dark-mode .status-info,
:root.dark-mode .badge.info::before {
    background-color: #4299e1;
}