/* ==========================================
   Dark Mode — Shared Variables & Overrides
   All templates link this stylesheet.
   ========================================== */

:root {
    --bg: #1e2433;
    --card-bg: #272d3d;
    --input-bg: #2a3042;
    --fg: #e1e4eb;
    --fg-secondary: #c0c5d0;
    --muted: #7c8494;
    --border: rgba(255, 255, 255, 0.08);
    --input-border: rgba(255, 255, 255, 0.10);
    --primary: #3366FF;
    --primary-hover: #2952cc;
    --active-bg: rgba(51, 102, 255, 0.12);
    --surface: rgba(255, 255, 255, 0.04);
    --danger: #ef4444;
    --score-bar-bg: rgba(255, 255, 255, 0.08);
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: var(--bg);
    color: var(--fg);
}

/* Grainy noise texture overlay */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.30' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

/* Bootstrap .form-control dark override */
.form-control,
.modal-form-control {
    background-color: var(--input-bg) !important;
    color: var(--fg) !important;
    border-color: var(--input-border) !important;
}

.form-control::placeholder,
.modal-form-control::placeholder {
    color: var(--muted) !important;
}

.form-control:focus,
.modal-form-control:focus {
    background-color: var(--input-bg) !important;
    color: var(--fg) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.1rem rgba(51, 102, 255, 0.25) !important;
}

/* Chrome autofill dark mode hack */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
    -webkit-text-fill-color: var(--fg) !important;
    border-color: var(--input-border) !important;
}