/* ==========================================================================
   NukeWorker Quiz (Savsoft) — DARK MODE overlay
   Non-invasive: quiz_app is a third-party (Savsoft) app kept stock. This file
   only adds html[data-theme="dark"] rules on top of the app's existing CSS
   (Bootstrap 4 / SB Admin 2 + nukeworker_quiz.css). Loaded AFTER those sheets
   in quiz_app/app/Views/nukeworker_header.php so it wins on source order;
   !important is used where SB Admin 2 / Bootstrap specificity requires it.
   Light mode is untouched — every rule here is scoped under
   html[data-theme="dark"].
   ========================================================================== */

/* Palette (matches includes/nw-components.css dark tokens) */
html[data-theme="dark"] {
    --nwq-bg: #0f1720;
    --nwq-surface: #1a2430;
    --nwq-elevated: #202b36;
    --nwq-border: #2c3a4a;
    --nwq-text: #d8dde3;
    --nwq-muted: #9fb0c0;
    --nwq-link: #8fbce6;
    --nwq-link-hover: #FFD700;
    --nwq-input-bg: #131b24;
}

/* --------------------------------------------------------------------------
   Page background / wrapper
   nukeworker_header.php sets body{background:#346699} and .wrapper{background:white}
   inline — override both under dark mode.
   -------------------------------------------------------------------------- */
html[data-theme="dark"] body {
    background-color: var(--nwq-bg) !important;
    color: var(--nwq-text);
}

html[data-theme="dark"] .wrapper {
    background-color: var(--nwq-surface) !important;
    background-image: none !important;
}

html[data-theme="dark"] .optional-navigation {
    background-color: var(--nwq-surface) !important;
}

/* Base link colors set inline in the quiz header (a,a:link,a:visited{color:black}) */
html[data-theme="dark"] a,
html[data-theme="dark"] a:link,
html[data-theme="dark"] a:visited {
    color: var(--nwq-link);
}

html[data-theme="dark"] a:hover,
html[data-theme="dark"] a:active {
    color: var(--nwq-link-hover);
}

/* --------------------------------------------------------------------------
   SB Admin 2 shell: sidebar, topbar, content wrapper
   -------------------------------------------------------------------------- */
html[data-theme="dark"] #content-wrapper {
    background-color: var(--nwq-bg) !important;
}

html[data-theme="dark"] .navbar,
html[data-theme="dark"] .topbar {
    background-color: var(--nwq-surface) !important;
    color: var(--nwq-text);
}

html[data-theme="dark"] .navbar-light .navbar-nav .nav-link,
html[data-theme="dark"] .topbar .nav-item .nav-link,
html[data-theme="dark"] .topbar .nav-item .nav-link .text-gray-600,
html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-gray-500 {
    color: var(--nwq-muted) !important;
}

html[data-theme="dark"] .topbar-divider {
    border-right: 1px solid var(--nwq-border) !important;
}

html[data-theme="dark"] .topbar .dropdown-list .dropdown-header,
html[data-theme="dark"] .dropdown-menu {
    background-color: var(--nwq-elevated) !important;
    border-color: var(--nwq-border) !important;
    color: var(--nwq-text);
}

html[data-theme="dark"] .dropdown-item {
    color: var(--nwq-text) !important;
    background-color: transparent !important;
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--nwq-elevated) !important;
    color: var(--nwq-link-hover) !important;
}

html[data-theme="dark"] .dropdown-divider {
    border-top: 1px solid var(--nwq-border) !important;
}

/* Sidebar itself keeps its brand gradient (inline style on #accordionSidebar) —
   left alone intentionally, it's brand/accent, not a neutral surface. Only the
   collapse submenus (white by default) get darkened. */
html[data-theme="dark"] .sidebar .nav-item .collapse .collapse-inner,
html[data-theme="dark"] .sidebar .nav-item .collapsing .collapse-inner,
html[data-theme="dark"] .collapse-inner.bg-white,
html[data-theme="dark"] .bg-white {
    background-color: var(--nwq-elevated) !important;
    color: var(--nwq-text) !important;
}

html[data-theme="dark"] .sidebar .nav-item .collapse .collapse-inner .collapse-item,
html[data-theme="dark"] .sidebar .nav-item .collapsing .collapse-inner .collapse-item {
    color: var(--nwq-text) !important;
}

html[data-theme="dark"] .sidebar .nav-item .collapse .collapse-inner .collapse-item:hover,
html[data-theme="dark"] .sidebar .nav-item .collapsing .collapse-inner .collapse-item:hover {
    background-color: var(--nwq-surface) !important;
    color: var(--nwq-link-hover) !important;
}

/* --------------------------------------------------------------------------
   Cards / panels (Bootstrap .card + legacy .panel used on result & login pages)
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .panel-default {
    background-color: var(--nwq-surface) !important;
    color: var(--nwq-text);
    border-color: var(--nwq-border) !important;
}

html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .panel-heading,
html[data-theme="dark"] .panel-footer {
    background-color: var(--nwq-elevated) !important;
    border-color: var(--nwq-border) !important;
    color: var(--nwq-text);
}

html[data-theme="dark"] .panel-body,
html[data-theme="dark"] .card-body {
    background-color: var(--nwq-surface) !important;
    color: var(--nwq-text);
}

/* NukeWorker premium card (nukeworker_quiz.css .nw-card) is white by design —
   darken it too so quiz question/result cards match the rest of the page. */
html[data-theme="dark"] .nw-card {
    background-color: var(--nwq-surface) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
}

/* Quiz footer action bar (frosted white by default) */
html[data-theme="dark"] .quiz-footer-card {
    background: rgba(26, 36, 48, 0.96) !important;
    border: 1px solid var(--nwq-border) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}

/* --------------------------------------------------------------------------
   Question / answer blocks (quiz_attempt_*.php)
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .question_div,
html[data-theme="dark"] .question_container,
html[data-theme="dark"] .option_container {
    background-color: var(--nwq-surface) !important;
    color: var(--nwq-text);
}

html[data-theme="dark"] .op {
    background-color: var(--nwq-elevated) !important;
    border-color: var(--nwq-border) !important;
    color: var(--nwq-text) !important;
}

html[data-theme="dark"] .op:hover {
    background-color: var(--nwq-surface) !important;
}

/* Question navigator side panel (inline style="background:#CEDDF0" in
   quiz_attempt_Default.php) and the not-visited "qbtn" default state (#212121
   already dark and left alone — that's a status color, not a surface). */
html[data-theme="dark"] .col-md-3[style*="CEDDF0"],
html[data-theme="dark"] .question-nav-panel {
    background-color: var(--nwq-elevated) !important;
    color: var(--nwq-text) !important;
}

/* --------------------------------------------------------------------------
   Result / score pages
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .rqn {
    background-color: var(--nwq-surface) !important;
}

/* Per-question review blocks: keep the correct/wrong accent colors on the
   left border, but darken the light tint backgrounds used for correct/
   incorrect/marked/unanswered rows. */
html[data-theme="dark"] .col-md-12[style*="#f8fff9"] { background-color: rgba(40, 167, 69, 0.12) !important; }
html[data-theme="dark"] .col-md-12[style*="#fff8f8"] { background-color: rgba(220, 53, 69, 0.12) !important; }
html[data-theme="dark"] .col-md-12[style*="#fffdf0"] { background-color: rgba(255, 193, 7, 0.12) !important; }
html[data-theme="dark"] .col-md-12[style*="#ffffff"] { background-color: var(--nwq-surface) !important; }

/* Answer-sheet per-option review rows (view_result.php). The Savsoft template
   renders every option/answer with hardcoded LIGHT-mode inline styles (dark
   #333 / #1e3c72 / #000 text, #f0fff4 correct-answer boxes). Inline color beats
   a plain rule, so the specific inline fragments are overridden with !important,
   scoped to .rqn so nothing outside the answer sheet is touched. This is what
   was making the option text near-invisible on the dark card. */

/* Option / answer body text (#333 unselected, #000 long-answer) */
html[data-theme="dark"] .rqn [style*="color: #333"],
html[data-theme="dark"] .rqn [style*="color:#000"] {
    color: var(--nwq-text) !important;
}

/* Selected-option text + "Your Selection" / "Your Answer" accent labels (#1e3c72) */
html[data-theme="dark"] .rqn [style*="color: #1e3c72"] {
    color: var(--nwq-link) !important;
}

/* Selected-option row + short-answer "Your Answer" box: the faint blue tint
   (rgba(30,60,114,.05)) is invisible on dark — lift it and lighten the accent border. */
html[data-theme="dark"] .rqn [style*="rgba(30, 60, 114, 0.05)"] {
    background-color: rgba(143, 188, 230, 0.12) !important;
    border-color: var(--nwq-link) !important;
}

/* Unselected-option hairline border (#f0f2f5, near-white -> would glare on dark) */
html[data-theme="dark"] .rqn [style*="#f0f2f5"] {
    border-color: var(--nwq-border) !important;
}

/* "Correct Answer" callout: light-green fill -> dark green tint, green text lifted */
html[data-theme="dark"] .rqn [style*="#f0fff4"] {
    background-color: rgba(40, 167, 69, 0.15) !important;
    border-color: rgba(40, 167, 69, 0.4) !important;
}
html[data-theme="dark"] .rqn [style*="color: #2f855a"] {
    color: #7ee2a8 !important;
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .table {
    color: var(--nwq-text);
}

html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td {
    border-color: var(--nwq-border) !important;
}

html[data-theme="dark"] .table thead th {
    background-color: var(--nwq-elevated) !important;
    color: var(--nwq-text);
    border-color: var(--nwq-border) !important;
}

html[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: var(--nwq-elevated) !important;
    color: var(--nwq-text);
}

html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* --------------------------------------------------------------------------
   Forms / inputs
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] select.form-control,
html[data-theme="dark"] textarea.form-control,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: var(--nwq-input-bg) !important;
    color: var(--nwq-text) !important;
    border-color: var(--nwq-border) !important;
}

html[data-theme="dark"] .form-control::placeholder {
    color: var(--nwq-muted) !important;
    opacity: 1;
}

html[data-theme="dark"] .form-control:focus {
    background-color: var(--nwq-input-bg) !important;
    color: var(--nwq-text) !important;
    border-color: var(--nwq-link) !important;
    box-shadow: 0 0 0 0.2rem rgba(143, 188, 230, 0.25) !important;
}

html[data-theme="dark"] .input-group-text {
    background-color: var(--nwq-elevated) !important;
    border-color: var(--nwq-border) !important;
    color: var(--nwq-muted) !important;
}

html[data-theme="dark"] .form-group label,
html[data-theme="dark"] label {
    color: var(--nwq-text);
}

/* select2 widget used on quiz list/filter pages */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--nwq-input-bg) !important;
    border-color: var(--nwq-border) !important;
    color: var(--nwq-text) !important;
}

html[data-theme="dark"] .select2-dropdown {
    background-color: var(--nwq-elevated) !important;
    border-color: var(--nwq-border) !important;
    color: var(--nwq-text) !important;
}

html[data-theme="dark"] .select2-results__option {
    color: var(--nwq-text) !important;
}

html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--nwq-surface) !important;
    color: var(--nwq-link-hover) !important;
}

/* --------------------------------------------------------------------------
   Buttons (leave brand/status colors — btn-nukeworker gradient, btn-success/
   btn-danger/btn-warning correct-wrong colors — alone; only neutral/default
   buttons need dark treatment)
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .btn-default,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-light {
    background-color: var(--nwq-elevated) !important;
    border-color: var(--nwq-border) !important;
    color: var(--nwq-text) !important;
}

html[data-theme="dark"] .btn-default:hover,
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-light:hover {
    background-color: var(--nwq-surface) !important;
    color: var(--nwq-link-hover) !important;
}

html[data-theme="dark"] .button-link {
    background: var(--nwq-elevated) !important;
    color: var(--nwq-text) !important;
    border-color: var(--nwq-border) !important;
}

html[data-theme="dark"] .button-link:hover {
    background: var(--nwq-link-hover) !important;
    color: #1e3c72 !important;
    border-color: var(--nwq-link-hover) !important;
}

html[data-theme="dark"] .btn-link {
    color: var(--nwq-link) !important;
}

html[data-theme="dark"] .btn-link:hover {
    color: var(--nwq-link-hover) !important;
}

/* --------------------------------------------------------------------------
   Modals
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .modal-content {
    background-color: var(--nwq-surface) !important;
    color: var(--nwq-text);
    border-color: var(--nwq-border) !important;
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    border-color: var(--nwq-border) !important;
}

html[data-theme="dark"] .modal-backdrop {
    background-color: #000;
}

/* --------------------------------------------------------------------------
   Alerts / badges / list groups
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .list-group-item {
    background-color: var(--nwq-surface) !important;
    color: var(--nwq-text);
    border-color: var(--nwq-border) !important;
}

html[data-theme="dark"] .alert {
    border-color: var(--nwq-border) !important;
}

/* --------------------------------------------------------------------------
   Headings / misc text that assumed a light/blue background
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .text-gray-900 {
    color: var(--nwq-text) !important;
}

html[data-theme="dark"] .text-dark {
    color: var(--nwq-text) !important;
}

html[data-theme="dark"] hr {
    border-color: var(--nwq-border);
}