/* === Truck Monitor — Color Themes === */

/* Default: Dark */
:root {
    --bg: #1a1a2e;
    --fg: #eee;
    --card: #16213e;
    --card2: #0f3460;
    --border: #333;
    --accent: #4ecca3;
    --accent-hover: #3db892;
    --accent-fg: #000;
    --muted: #888;
    --danger: #e94560;
    --danger-hover: #c73550;
    --header-bg: #16213e;
    --input-bg: #0f3460;
    --hover-bg: #0f3460;
}

/* Light — Tailwind/Shadcn-inspired, WCAG AA+ contrast */
body.theme-light {
    --bg: #f8f9fb;
    --fg: #1a1d26;
    --card: #ffffff;
    --card2: #f1f3f6;
    --border: #d5d9e0;
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-fg: #fff;
    --muted: #5f6878;
    --danger: #dc2626;
    --danger-hover: #b91c1c;
    --header-bg: #ffffff;
    --input-bg: #ffffff;
    --hover-bg: #eef0f4;
}

/* === Universal overrides === */
body {
    background: var(--bg) !important;
    color: var(--fg) !important;
}

#header {
    background: var(--header-bg) !important;
    border-bottom-color: var(--border) !important;
}

#header h1 { color: var(--fg) !important; }

nav a { color: var(--muted) !important; }
nav a:hover, nav a.active { color: var(--accent) !important; }
nav .nav-sep { color: var(--border) !important; }

.user-info { color: var(--muted) !important; }
.user-info button { background: var(--card2) !important; color: var(--muted) !important; border: none !important; }
.user-info button:hover { background: var(--hover-bg) !important; color: var(--fg) !important; }

/* Cards, panels */
.card, .group-card, .gf-card, .v-card, .order-card,
.settings-section .card,
[class*="-card"] {
    background: var(--card) !important;
    border-color: var(--border) !important;
}

body.theme-light .card, body.theme-light .group-card, body.theme-light .gf-card,
body.theme-light .v-card, body.theme-light .order-card,
body.theme-light [class*="-card"] {
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04) !important;
}
body.theme-light .modal {
    box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
}
body.theme-light #header {
    box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
}

/* Sidebar nav */
.sidebar-nav a { color: var(--muted) !important; }
.sidebar-nav a:hover { background: var(--hover-bg) !important; color: var(--fg) !important; }
.sidebar-nav a.active { background: var(--hover-bg) !important; color: var(--accent) !important; }

/* Forms */
input[type="text"], input[type="number"], input[type="password"],
input[type="email"], input[type="url"], select, textarea {
    background: var(--input-bg) !important;
    border-color: var(--border) !important;
    color: var(--fg) !important;
}

/* Buttons */
.btn-primary { background: var(--accent) !important; color: var(--accent-fg) !important; }
.btn-primary:hover { background: var(--accent-hover) !important; }
.btn-danger { background: var(--danger) !important; color: #fff !important; }
.btn-danger:hover { background: var(--danger-hover) !important; }
.btn-secondary, .btn:not(.btn-primary):not(.btn-danger) {
    background: var(--card2) !important;
    color: var(--muted) !important;
}
.btn:not(.btn-primary):not(.btn-danger):hover {
    background: var(--hover-bg) !important;
    color: var(--fg) !important;
}

/* Tables */
th { color: var(--muted) !important; border-bottom-color: var(--border) !important; }
td { border-bottom-color: var(--border) !important; }

/* Modal */
.modal-bg { background: rgba(0,0,0,0.5) !important; }
body.theme-light .modal-bg { background: rgba(0,0,0,0.3) !important; }
.modal { background: var(--card) !important; border-color: var(--border) !important; }

/* Hints */
.hint, .form-group .hint { color: var(--muted) !important; }

/* Sections */
.page-title, h2.page-title { color: var(--fg) !important; }
.card h3 { color: var(--accent) !important; }

/* Toggle switch */
.toggle-slider, .toggle .slider { background: var(--card2) !important; }
.toggle-switch input:checked + .toggle-slider,
.toggle input:checked + .slider { background: var(--accent) !important; }

/* Page specific backgrounds */
.container, .settings-layout, .page-layout {
    background: transparent !important;
}

/* No data text */
.no-data { color: var(--muted) !important; }

/* Scrollbar (webkit) */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* Theme toggle button */
.theme-toggle-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, border-color 0.2s;
}
.theme-toggle-btn:hover {
    border-color: var(--accent);
    color: var(--fg);
}