/* =====================================================================
   FILE: assets/css/dark-mode.css
   PROJECT: daylikaj
   PURPOSE: Dark mode theme overrides.
   USAGE:   <body class="dark-mode"> ... </body>
   ===================================================================== */

body.dark-mode {
    --color-bg: #121212;
    --color-text: #ffffff;
    --color-text-muted: #b0b0b0;
    --color-border: #333333;
    --color-card-bg: #1e1e1e;
    --color-cyan-border: #26a69a;

    background-color: var(--color-bg);
    color: var(--color-text);
}

body.dark-mode .dl-header {
    background: #1a1a1a;
    border-bottom: 1px solid #333;
}

body.dark-mode .dl-card,
body.dark-mode .dl-job-card,
body.dark-mode .dl-sidebar {
    background: var(--color-card-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}

body.dark-mode .dl-form-control {
    background: #2a2a2a;
    border-color: #444;
    color: #fff;
}
body.dark-mode .dl-form-control:focus {
    border-color: #26a69a;
    box-shadow: 0 0 0 3px rgba(38,166,154,0.2);
}
body.dark-mode .dl-form-control::placeholder {
    color: #888;
}

body.dark-mode .dl-form-label,
body.dark-mode .dl-card-header {
    color: #fff;
    border-color: #333;
}

body.dark-mode .dl-bottom-nav {
    background: #1a1a1a;
    border-top: 1px solid #333;
}
body.dark-mode .dl-bottom-nav a { color: #b0b0b0; }
body.dark-mode .dl-bottom-nav a.active { color: #26a69a; }

body.dark-mode .dl-btn-outline {
    color: #26a69a;
    border-color: #26a69a;
}
body.dark-mode .dl-btn-outline:hover {
    background: #26a69a;
    color: #fff;
}

body.dark-mode .dl-progress { background: #333; }

body.dark-mode .dl-toast {
    background: #2a2a2a;
    color: #fff;
}

body.dark-mode .dl-marquee {
    background: #333;
    color: #ffc107;
}

body.dark-mode .dl-loader-overlay {
    background: rgba(0,0,0,0.8);
}

body.dark-mode .dl-empty-state { color: #888; }

body.dark-mode a { color: #26a69a; }
body.dark-mode a:hover { color: #4dd0c7; }

body.dark-mode table {
    color: #fff;
    background: var(--color-card-bg);
}
body.dark-mode table th,
body.dark-mode table td {
    border-color: #333;
}

body.dark-mode .modal-content {
    background: var(--color-card-bg);
    color: #fff;
}