/* ============================================================================
   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: var(--sur-in, #0d1f3a) !important;
    color: var(--ink, #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: var(--acc-t, #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: var(--sur-in, #0d1f3a) !important;
    color: var(--ink, #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: var(--sur-in, #0d1f3a) !important;
}

/* Filter labels stay readable on the dark card */
.filter-section label,
.filter-group label,
label[for="categoryFilter"] {
    color: var(--ink-2, #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: var(--ink, #e6f2ff) !important;
    box-shadow: 0 0 25px rgba(0, 191, 255, 0.12) !important;
}

.form-card label,
.exam-form-card label {
    color: var(--ink-2, #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: var(--ink, #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:var(--acc-t, #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:var(--acc-t, #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:var(--btn-ink, #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:var(--btn-ink, #08131f); }

/* ---- Auth inputs: dark to match the card (were white -> mismatch) ---- */
.auth-input{ background:var(--sur-in, #0a1628) !important; color:var(--ink, #e6f2ff) !important; border:1px solid rgba(0,191,255,.28) !important; }
.auth-input:focus{ border-color:var(--acc-t, #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:var(--ink, #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 var(--sur-in, #0a1628) inset !important;
            box-shadow:0 0 0 1000px var(--sur-in, #0a1628) inset !important;
    -webkit-text-fill-color:var(--ink, #e6f2ff) !important;
    caret-color:var(--ink, #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:var(--ink, #e6f2ff) !important; -webkit-text-fill-color:var(--ink, #e6f2ff) !important; }

/* ---- Form container: kill the light pink background (style.css) -> dark theme ---- */
.form-container{ background:transparent !important; }
.form-container::before{ opacity:.4; }
/* Hide empty media preview boxes (were showing a stray black rectangle) */
.youtube-preview:empty, .image-preview:empty{ display:none !important; }

/* ---- Checkboxes/radios must never stretch to full width (a global input rule
        was forcing width:100%, turning the "Enable Negative Marking" checkbox
        into a long box). Keep them small and inline. ---- */
input[type="checkbox"], input[type="radio"]{
    width:16px !important; height:16px !important;
    min-width:16px !important; min-height:16px !important;
    flex:0 0 auto !important; display:inline-block !important;
    accent-color:var(--acc-t, #00bfff); margin:0 4px 0 0; vertical-align:middle; padding:0 !important;
}

/* ---- Navbar: turn OFF the top glow ---- */
.navbar{ box-shadow:none !important; border-bottom:1px solid rgba(0,191,255,0.18) !important; }
.nav-brand h2{ text-shadow:none !important; }
.navbar::before, .navbar::after{ box-shadow:none !important; }


/* ==================================================================
   P3 color-consistency pass (2026-09-06 audit)
   ================================================================== */

/* flash 'warning' category: used by 10 backend call sites but had NO css at all */
.flash-warning {
    background: rgba(255, 193, 7, .12) !important;
    border: 1px solid rgba(255, 193, 7, .45) !important;
    border-left: 4px solid #ffc107 !important;
    color: var(--warn-t2, #ffe39a) !important;
}

/* ONE canonical scheme for active/passed badges — they were defined six times
   in four different palettes (white-on-#00ff00 was ~1.4:1 contrast) */
.exam-status.active, .status-badge.active, .status-badge.available-now,
.active-exam .exam-status.active {
    background: rgba(34, 197, 94, .14) !important;
    border: 1px solid rgba(34, 197, 94, .55) !important;
    color: var(--ok-t2, #b8f5c9) !important;
    text-shadow: none !important;
    box-shadow: 0 0 12px rgba(34, 197, 94, .18) !important;
}
.status-badge.passed, .exam-status.passed {
    background: rgba(34, 197, 94, .14) !important;
    border: 1px solid rgba(34, 197, 94, .55) !important;
    color: var(--ok-t2, #b8f5c9) !important;
    text-shadow: none !important;
}
.status-badge.failed, .exam-status.failed {
    background: rgba(239, 68, 68, .13) !important;
    border: 1px solid rgba(239, 68, 68, .5) !important;
    color: var(--bad-t2, #ffb4b4) !important;
    text-shadow: none !important;
}

/* Login/register labels: retire the matrix-green + orange neon w/ triple glow */
.auth-label[for="nsi_id"], .auth-label[for="username"],
.auth-label[for="password"], .auth-label[for="confirm_password"] {
    color: var(--ink-link, #7fd4ff) !important;
    -webkit-text-fill-color: var(--ink-link, #7fd4ff) !important;
    text-shadow: 0 0 10px rgba(0, 191, 255, .3) !important;
    background-image: none !important;
    font-size: 1.05rem !important;
}


/* ==================================================================
   Legacy rules woken up by the @media brace fix (they were trapped in
   a mobile-only block for ages and are a previous design generation).
   Neutralize the visible artifacts in BOTH themes.
   ================================================================== */

/* the 4px animated shimmer bars across the rankings/leaderboard cards */
.ranking-section-card::before,
.leaderboard-section-card::before {
    display: none !important;
    content: none !important;
    animation: none !important;
}

/* gradient-text card headers (cyan->green, animated glow) -> plain readable text */
.card-header h3 {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
    animation: none !important;
}

/* released green-tinged glow on the leaderboard subtitle */
.leaderboard-subtitle { text-shadow: none !important; }

/* keep the personal rankings list unclipped (legacy rule capped it at 400px) */
.personal-rankings-grid {
    max-height: none !important;
    overflow-y: visible !important;
}


/* The 'cyber scanner' — a blurred 2px cyan line endlessly sweeping down the
   whole viewport (.info-section::after, main-content.css). It anchors to the
   body (no positioned ancestor), so it painted stray full-width lines across
   every page section. Distracting + eye strain — OFF in both themes. */
.info-section::after {
    display: none !important;
    content: none !important;
    animation: none !important;
}