/* ============================================================================
   Theme Normalization — force form controls to the dark cyber theme app-wide.

   Various older stylesheets leak light/white backgrounds onto <select>, <input>
   and <textarea> elements, and native <select> dropdown option lists render
   white on Windows (light-grey text = unreadable). This file consolidates the
   fix in ONE place and is linked LAST in base.html so it reliably wins.

   Scope is intentionally limited to FORM CONTROLS (not buttons, checkboxes,
   radios, file/submit inputs) so nothing else is disturbed.
   ============================================================================ */

/* Text-like inputs, textareas and selects → dark background, light text */
select,
textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]) {
    background-color: #0d1f3a !important;
    color: #e6f2ff !important;
    border: 1px solid rgba(0, 191, 255, 0.4) !important;
    border-radius: 6px;
}

select:focus,
textarea:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]):focus {
    border-color: #00bfff !important;
    box-shadow: 0 0 6px rgba(0, 191, 255, 0.35) !important;
    outline: none;
}

/* Native dropdown option list — the main offender (white on Windows) */
select option,
select optgroup {
    background-color: #0d1f3a !important;
    color: #e6f2ff !important;
}

/* Placeholders readable on the dark fields */
input::placeholder,
textarea::placeholder {
    color: #8fb3d9 !important;
    opacity: 1;
}

/* Filter bars / cards that leaked a light background */
.filter-section,
.filter-group {
    background-color: transparent !important;
}
.filter-section {
    background-color: #0d1f3a !important;
}

/* Filter labels stay readable on the dark card */
.filter-section label,
.filter-group label,
label[for="categoryFilter"] {
    color: #cfe6ff !important;
}

/* ----------------------------------------------------------------------------
   Form CARD containers — the app-wide light gradient (defined with !important
   in cyber-forms.css and style.css) is the root cause of "white form" pages.
   Force the standard form cards to the dark cyber theme here (loaded last).
   Inline info-boxes that set their own bg+color are untouched and stay readable.
   ---------------------------------------------------------------------------- */
.form-card,
.form-card.large,
.exam-form-card {
    background: linear-gradient(135deg, #0d1f3a 0%, #0a1628 100%) !important;
    border: 1px solid rgba(0, 191, 255, 0.25) !important;
    color: #e6f2ff !important;
    box-shadow: 0 0 25px rgba(0, 191, 255, 0.12) !important;
}

.form-card label,
.exam-form-card label {
    color: #cfe6ff !important;
}

.form-card .form-help,
.exam-form-card .form-help,
.form-card small,
.exam-form-card small {
    color: #7fb3e0 !important;
}

/* ============================================================================
   Bengali font support
   ---------------------------------------------------------------------------
   The cyber display fonts (Share Tech Mono, VT323, Courier New) contain no
   Bengali glyphs, so Bengali text (bn questions/options/subjects) rendered as
   empty boxes. Appending a Bengali-capable font to the fallback chain fixes
   this per-glyph: Latin characters keep the cyber font, Bengali characters
   fall through to Noto Sans Bengali (loaded from Google Fonts in base.html).
   Loaded LAST so the redefinition of --font-mono wins everywhere it is used.
   ============================================================================ */
:root {
    --font-mono: 'Share Tech Mono', 'Courier New', 'Noto Sans Bengali', monospace;
}

body {
    font-family: 'Share Tech Mono', 'Courier New', 'Noto Sans Bengali', monospace;
}

/* Content and form elements that may carry Bengali text. These already use
   the mono/body font, so restating it with a Bengali fallback only adds the
   Bengali glyphs and does not change the Latin appearance. Decorative headings,
   buttons and spans are deliberately left untouched to preserve the theme. */
.question-text, .question-title, .question, .option-text, .option-label,
.subject, .category, .category-name, .answer-text, .rationale,
input, select, textarea, option, optgroup, label,
td, th, p, li {
    font-family: 'Share Tech Mono', 'Courier New', 'Noto Sans Bengali', monospace;
}

/* ============================================================================
   Bulletproof dark form cards
   ---------------------------------------------------------------------------
   cyber-forms.css and exam-form.css both set `.form-container .form-card.large`
   to a LIGHT gradient with !important (specificity 0,0,3,0). theme-fixes loads
   last; matching that specificity here makes the dark theme win globally, so no
   page needs its own inline override. exam-form's blue `.form-header` keeps its
   white text and is left intact.
   ============================================================================ */
.form-container .form-card,
.form-container .form-card.large,
form .form-card,
.exam-form-card {
    background: linear-gradient(135deg, #0d1f3a 0%, #0a1628 100%) !important;
    border: 1px solid rgba(0, 191, 255, 0.25) !important;
    color: #e6f2ff !important;
}

/* ============================================================================
   Navbar compact + Auth pages polish + password toggle icon
   ============================================================================ */
/* Compact navbar */
.nav-brand h2{ font-size:1.15rem !important; letter-spacing:1px !important; }
.nav-menu{ gap:.55rem !important; }
.nav-link{ padding:.35rem .7rem !important; font-size:.82rem !important; letter-spacing:.5px !important; }
.nav-link .cyber-icon .icon, .nav-link .icon{ width:.95em !important; height:.95em !important; }
.nav-user{ font-size:.82rem !important; padding:.3rem .6rem !important; }

/* Custom password toggle -> clean SVG eye */
.password-toggle-btn{ background:none !important; border:none !important; }
.password-toggle-btn .icon{ width:20px; height:20px; color:#8fb3d9; }
.password-toggle-btn:hover .icon{ color:#00d4ff; }

/* Auth (login/register) polish */
.auth-header h2{ background:linear-gradient(100deg,#7ff0ff,#3aa0ff 45%,#8b5cf6) !important;
    -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important;
    text-shadow:none !important; }
.auth-header h2 .icon{ -webkit-text-fill-color:initial; color:#00d4ff; filter:drop-shadow(0 0 10px rgba(0,224,255,.5)); }
.auth-card{ box-shadow:0 0 44px rgba(0,191,255,.14) !important; }
.cyber-button.btn-full, .auth-button{ background:linear-gradient(120deg,#00bfff,#8b5cf6) !important; background-size:200% auto !important;
    color:#08131f !important; border:none !important; font-weight:800 !important; transition:all .18s ease !important; }
.cyber-button.btn-full:hover, .auth-button:hover{ transform:translateY(-2px); background-position:right center !important; box-shadow:0 10px 28px rgba(139,92,246,.4) !important; }
.cyber-button.btn-full .icon, .auth-button .icon{ color:#08131f; }

/* ---- Auth inputs: dark to match the card (were white -> mismatch) ---- */
.auth-input{ background:#0a1628 !important; color:#e6f2ff !important; border:1px solid rgba(0,191,255,.28) !important; }
.auth-input:focus{ border-color:#00d4ff !important; box-shadow:0 0 0 2px rgba(0,191,255,.15) !important; outline:none !important; }
.auth-input::placeholder{ color:#8fb3d9 !important; opacity:1 !important; }
#nsi_id, #password, #confirm_password{ color:#e6f2ff !important; }
#nsi_id::placeholder, #password::placeholder, #confirm_password::placeholder{ color:#8fb3d9 !important; }

/* ---- Kill Chrome/browser autofill white background (root cause of white inputs) ---- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill{
    -webkit-box-shadow:0 0 0 1000px #0a1628 inset !important;
            box-shadow:0 0 0 1000px #0a1628 inset !important;
    -webkit-text-fill-color:#e6f2ff !important;
    caret-color:#e6f2ff !important;
    border:1px solid rgba(0,191,255,.28) !important;
    transition:background-color 100000s ease-in-out 0s !important;
}
/* Ensure typed text stays light (login inline forces #000 assuming white bg) */
.auth-input, #nsi_id, #password, #confirm_password{ color:#e6f2ff !important; -webkit-text-fill-color:#e6f2ff !important; }