/**
 * app.css — Shared base styles (GitHub dark theme)
 *
 * Included by every HTML page in this project.
 * Contains the dark colour palette, form overrides and utility resets
 * that are identical across dashboard, login, overlay and Twitch pages.
 */

/* ─── Colour palette (CSS custom properties) ─────────────────────────── */
:root {
    --bg-base:      #0d1117;   /* page background */
    --bg-surface:   #161b22;   /* cards, navbar, dropdowns */
    --bg-elevated:  #21262d;   /* card headers, code blocks */
    --border:       #30363d;   /* subtle borders */
    --text-primary: #c9d1d9;   /* body text */
    --text-muted:   #8b949e;   /* secondary / hint text */
    --accent-blue:  #58a6ff;   /* focus rings, links */
    --accent-green: #3fb950;
    --accent-red:   #f85149;
    --accent-twitch:#9147ff;
    --accent-discord:#5865f2;
}

/* ─── Base ────────────────────────────────────────────────────────────── */
body {
    background-color: var(--bg-base);
    color: var(--text-primary);
}

/* ─── Typography helpers ──────────────────────────────────────────────── */
h5,
h6 {
    color: var(--text-primary);
}

hr {
    border-color: var(--border);
    opacity: 1;
}

.text-muted {
    color: var(--text-muted) !important;
}

/* ─── Form controls (Bootstrap dark overrides) ───────────────────────── */
.form-label {
    color: var(--text-primary);
}

.form-select,
.form-control {
    background-color: var(--bg-base);
    border: 1px solid var(--border);
    color: var(--text-primary);
}

.form-select:focus,
.form-control:focus {
    background-color: var(--bg-base);
    border-color: var(--accent-blue);
    color: var(--text-primary);
    box-shadow: 0 0 0 0.2rem rgba(88, 166, 255, 0.15);
}

.form-select option {
    background-color: var(--bg-surface);
    color: var(--text-primary);
}

.form-check-label {
    color: var(--text-primary);
}

.form-check-input {
    background-color: var(--bg-base);
    border-color: var(--border);
}

/* ─── Dropdown (Bootstrap dark overrides) ────────────────────────────── */
.dropdown-menu {
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
}

.dropdown-header {
    color: var(--text-primary) !important;
}

.dropdown-divider {
    border-color: var(--border);
}