:root {
    --yellow: #facc15;
    --bg: #fffaf4;
    --text: #111;
    --card-bg: #fff;
    --nav-bg: #fff;
    --border: #f1e4cf;
    --muted: #666;
}

[data-theme="dark"] {
    --bg: #1a1a2e;
    --text: #e0e0e0;
    --card-bg: #16213e;
    --nav-bg: #0f3460;
    --border: #2a2a4a;
    --muted: #aaa;
}

body { background: var(--bg); color: var(--text); transition: background 0.3s, color 0.3s; }
.card, .stat-card { background: var(--card-bg) !important; border-color: var(--border) !important; }
.navbar { background: var(--nav-bg) !important; }
.navbar .nav-link { color: var(--text) !important; }
.text-muted { color: var(--muted) !important; }
.table { background: var(--card-bg) !important; color: var(--text) !important; }
.table td, .table th { border-color: var(--border) !important; color: var(--text) !important; }
.form-control, .form-select { background: var(--card-bg); color: var(--text); border-color: var(--border); }

/* Dark mode toggle button */
.dark-mode-btn {
    background: none;
    border: 2px solid var(--border);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    padding: 0;
    line-height: 1;
}
.dark-mode-btn:hover {
    background: var(--yellow);
    border-color: var(--yellow);
    transform: scale(1.1);
}
.dark-mode-btn.sun { content: '☀️'; }
.dark-mode-btn.moon { content: '🌙'; }