/* ==========================================================================
   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; }

/* --------------------------------------------------------------------------
   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);
}