/**
 * FBK-Time Dark Mode Stylesheet
 *
 * Dark theme variables and overrides.
 * Activated via data-theme="dark" on html element.
 */

/* =============================================
   DARK MODE VARIABLES
   ============================================= */
[data-theme="dark"] {
    /* Colors */
    --primary-color: #4da3ff;
    --primary-hover: #7bb8ff;

    /* Background & Text */
    --bg-color: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-muted: #0f0f1a;
    --bg-weekend: #2a2a4a;
    --bg-holiday: #4a3d12;
    --text-color: #e4e4e4;
    --text-muted: #a0a0a0;
    --holiday-text: #ffd966;
    --border-color: #2a2a4a;
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* =============================================
   DARK MODE COMPONENT OVERRIDES
   ============================================= */

/* Form inputs */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-color);
}

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

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

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

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

/* Alerts */
[data-theme="dark"] .alert-success {
    background-color: #1e4620;
    color: #a3d9a5;
    border-color: #2d5a2f;
}

[data-theme="dark"] .alert-danger {
    background-color: #4a1a1d;
    color: #f5a5a8;
    border-color: #6b2428;
}

[data-theme="dark"] .alert-warning {
    background-color: #4a3d12;
    color: #ffd966;
    border-color: #6b5918;
}

[data-theme="dark"] .alert-info {
    background-color: #12404a;
    color: #7ed4e6;
    border-color: #186878;
}

/* Theme toggle button */
[data-theme="dark"] .theme-toggle {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

/* Navigation */
[data-theme="dark"] .nav-main {
    background-color: var(--bg-color);
}

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

[data-theme="dark"] .nav-toggle-icon,
[data-theme="dark"] .nav-toggle-icon::before,
[data-theme="dark"] .nav-toggle-icon::after {
    background-color: var(--text-color);
}

/* Cards */
[data-theme="dark"] .card {
    background-color: var(--bg-color);
    border-color: var(--border-color);
}

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

[data-theme="dark"] .pagination-link:hover,
[data-theme="dark"] .pagination-link.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
}

/* Login card */
[data-theme="dark"] .login-card {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
}

/* Footer */
[data-theme="dark"] .footer {
    background-color: var(--bg-color);
    border-color: var(--border-color);
}

/* =============================================
   AUTO DARK MODE (System Preference)
   ============================================= */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        --primary-color: #4da3ff;
        --primary-hover: #7bb8ff;
        --bg-color: #1a1a2e;
        --bg-secondary: #16213e;
        --bg-muted: #0f0f1a;
        --bg-weekend: #2a2a4a;
        --bg-holiday: #4a3d12;
        --text-color: #e4e4e4;
        --text-muted: #a0a0a0;
        --holiday-text: #ffd966;
        --border-color: #2a2a4a;
        --shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4);
    }


    /* Form inputs */
    [data-theme="auto"] .form-input,
    [data-theme="auto"] .form-select,
    [data-theme="auto"] .form-textarea {
        background-color: var(--bg-secondary);
        border-color: var(--border-color);
        color: var(--text-color);
    }

    /* Tables */
    [data-theme="auto"] .table {
        background-color: var(--bg-color);
    }

    [data-theme="auto"] .table th {
        background-color: var(--bg-secondary);
    }

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

    /* Alerts */
    [data-theme="auto"] .alert-success {
        background-color: #1e4620;
        color: #a3d9a5;
        border-color: #2d5a2f;
    }

    [data-theme="auto"] .alert-danger {
        background-color: #4a1a1d;
        color: #f5a5a8;
        border-color: #6b2428;
    }

    [data-theme="auto"] .alert-warning {
        background-color: #4a3d12;
        color: #ffd966;
        border-color: #6b5918;
    }

    [data-theme="auto"] .alert-info {
        background-color: #12404a;
        color: #7ed4e6;
        border-color: #186878;
    }

    /* Theme toggle button */
    [data-theme="auto"] .theme-toggle {
        background-color: var(--bg-secondary);
        border: 1px solid var(--border-color);
    }

    /* Navigation */
    [data-theme="auto"] .nav-main {
        background-color: var(--bg-color);
    }

    [data-theme="auto"] .nav-link:hover,
    [data-theme="auto"] .nav-link.active {
        background-color: var(--bg-secondary);
    }

    [data-theme="auto"] .nav-toggle-icon,
    [data-theme="auto"] .nav-toggle-icon::before,
    [data-theme="auto"] .nav-toggle-icon::after {
        background-color: var(--text-color);
    }

    /* Cards */
    [data-theme="auto"] .card {
        background-color: var(--bg-color);
        border-color: var(--border-color);
    }

    /* Pagination */
    [data-theme="auto"] .pagination-link {
        background-color: var(--bg-secondary);
        border-color: var(--border-color);
        color: var(--text-color);
    }

    [data-theme="auto"] .pagination-link:hover,
    [data-theme="auto"] .pagination-link.active {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
        color: #ffffff;
    }

    /* Login card */
    [data-theme="auto"] .login-card {
        background-color: var(--bg-color);
        border: 1px solid var(--border-color);
    }

    /* Footer */
    [data-theme="auto"] .footer {
        background-color: var(--bg-color);
        border-color: var(--border-color);
    }
}