/* ========================================
   DARK MODE
   Overrides light theme colors when .dark-mode
   Body content only — header & footer are NOT affected
   ======================================== */

/* ========================================
   DARK MODE TOGGLE BUTTON (always visible)
   ======================================== */

.dark-mode-toggle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #FFFFFF;
    background: transparent;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
    font-size: 0.85rem;
}

@media (hover: hover) {
    .dark-mode-toggle:hover {
        background-color: rgba(255, 255, 255, 0.15);
    }
}

/* ========================================
   BASE: Body, Main, Sections
   ======================================== */

body.dark-mode {
    background-color: #0F1923 !important;
    color: #E1E8EF !important;
}

body.dark-mode main,
.dark-mode main {
    background-color: #0F1923 !important;
}

body.dark-mode main section,
.dark-mode main section,
.dark-mode section {
    background-color: #0F1923 !important;
}

/* ========================================
   INLINE TEXT COLOR OVERRIDES
   Covers style="color: #0A2540", #0C2E4E, #6c757d
   ======================================== */

.dark-mode main h1,
.dark-mode main h2,
.dark-mode main h3,
.dark-mode main h4,
.dark-mode main h5,
.dark-mode main h6,
.dark-mode section h1,
.dark-mode section h2,
.dark-mode section h3,
.dark-mode section h4,
.dark-mode section h5,
.dark-mode section h6 {
    color: #E1E8EF !important;
}

.dark-mode main p,
.dark-mode main span,
.dark-mode main label,
.dark-mode main li,
.dark-mode main div,
.dark-mode section p,
.dark-mode section span,
.dark-mode section label,
.dark-mode section li,
.dark-mode section div {
    color: #E1E8EF;
}

.dark-mode main .lead,
.dark-mode section .lead {
    color: #8899AA !important;
}

.dark-mode main .text-muted,
.dark-mode section .text-muted {
    color: #8899AA !important;
}

/* ========================================
   CARDS
   ======================================== */

.dark-mode .card {
    background-color: #162231 !important;
    color: #E1E8EF !important;
    border-color: #1C2A3A !important;
}

.dark-mode .card-header {
    background-color: #1A2B3D !important;
    color: #E1E8EF !important;
    border-bottom-color: #1C2A3A !important;
}

.dark-mode .card-body {
    background-color: #162231 !important;
    color: #E1E8EF !important;
}

/* ========================================
   BUTTONS — Gradient Blue (keep original look)
   ======================================== */

.dark-mode .btn-gradient-blue {
    background: var(--gradient) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
}

.dark-mode .btn-gradient-blue:disabled,
.dark-mode .btn-gradient-blue.disabled {
    background: var(--gradient) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
}

.dark-mode .btn-gradient-blue i {
    color: #FFFFFF !important;
}

/* ========================================
   BUTTONS — White/Blue Text variant
   ======================================== */

.dark-mode main .btn-white-blue-text {
    background-color: #1A2B3D !important;
    border-color: #2A3B4D !important;
    color: #E1E8EF !important;
}

.dark-mode main .btn-white-blue-text i {
    color: #E1E8EF !important;
}

@media (hover: hover) {
    .dark-mode main .btn-white-blue-text:hover {
        background-color: #243548 !important;
        border-color: #243548 !important;
    }
}

.dark-mode main .btn-white-blue-text:disabled,
.dark-mode main .btn-white-blue-text.disabled {
    background-color: #1A2B3D !important;
    border-color: #2A3B4D !important;
    color: #E1E8EF !important;
}

/* ========================================
   ALERTS (Quiz answer states)
   ======================================== */

.dark-mode .alert-info {
    background-color: #1A2B3D !important;
    color: #C8D6E5 !important;
}

.dark-mode .alert-secondary {
    background-color: #1A2B3D !important;
    color: #C8D6E5 !important;
}

.dark-mode .alert-success {
    background-color: rgba(29, 205, 130, 0.15) !important;
    color: #34d399 !important;
}

.dark-mode .alert-danger {
    background-color: rgba(220, 53, 69, 0.15) !important;
    color: #f87171 !important;
}

/* ========================================
   TABLES
   ======================================== */

.dark-mode .table {
    background-color: #162231 !important;
    color: #E1E8EF !important;
}

.dark-mode .table thead {
    background-color: #1A2B3D !important;
}

.dark-mode .table th {
    color: #E1E8EF !important;
    background-color: #1A2B3D !important;
    border-color: #1C2A3A !important;
}

.dark-mode .table td {
    color: #C8D6E5 !important;
    background-color: #162231 !important;
    border-color: #1C2A3A !important;
}

.dark-mode .table tr {
    border-color: #1C2A3A !important;
}

/* ========================================
   MODALS
   ======================================== */

.dark-mode .modal-content {
    background-color: #162231 !important;
    border-color: #1C2A3A !important;
    color: #E1E8EF !important;
}

.dark-mode .modal-header {
    background-color: #1A2B3D !important;
    color: #E1E8EF !important;
    border-bottom-color: #1C2A3A !important;
}

.dark-mode .modal-header h5 {
    color: #E1E8EF !important;
}

.dark-mode .modal-body {
    background-color: #162231 !important;
    color: #E1E8EF !important;
}

.dark-mode .modal-footer {
    background-color: #162231 !important;
}

.dark-mode main .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Modal buttons */
.dark-mode .modal .btn-white-blue-text {
    background-color: #1A2B3D !important;
    border-color: #2A3B4D !important;
    color: #E1E8EF !important;
}

.dark-mode .modal .btn-white-blue-text i {
    color: #E1E8EF !important;
}

/* ========================================
   QUIZ — Modal question links
   ======================================== */

.dark-mode .modal-question-link.unanswered {
    background-color: #1A2B3D !important;
    color: #E1E8EF !important;
}

.dark-mode .modal-question-link.correct {
    background-color: rgba(29, 205, 130, 0.15) !important;
    color: #34d399 !important;
}

.dark-mode .modal-question-link.incorrect {
    background-color: rgba(220, 53, 69, 0.15) !important;
    color: #f87171 !important;
}

.dark-mode .emoji-barometer-count {
    color: #8899AA !important;
}

/* ========================================
   FORMS
   ======================================== */

.dark-mode .form-select,
.dark-mode .form-control {
    background-color: #1A2B3D !important;
    border-color: #2A3B4D !important;
    color: #E1E8EF !important;
}

.dark-mode .form-select:focus,
.dark-mode .form-control:focus {
    background-color: #1A2B3D !important;
    border-color: #0660BD !important;
    color: #E1E8EF !important;
}

.dark-mode .form-select:disabled,
.dark-mode .form-select.grayed-out {
    background-color: #0F1923 !important;
    color: #556677 !important;
}

.dark-mode .form-label {
    color: #E1E8EF !important;
}

.dark-mode .form-title {
    color: #E1E8EF !important;
}

.dark-mode .form-subtitle {
    color: #8899AA !important;
}

/* ========================================
   PROGRESS BARS
   ======================================== */

.dark-mode .progress {
    background-color: #1C2A3A !important;
}

/* ========================================
   PAGINATION
   ======================================== */

.dark-mode .pagination .page-link {
    color: #E1E8EF !important;
    background-color: #1A2B3D !important;
    border-color: #2A3B4D !important;
}

.dark-mode .pagination .page-item.disabled .page-link {
    color: #556677 !important;
    background-color: #0F1923 !important;
    border-color: #1C2A3A !important;
}

/* ========================================
   CONTENT AREA (generic pages)
   ======================================== */

.dark-mode .content-area {
    color: #E1E8EF !important;
}

.dark-mode .content-area h1,
.dark-mode .content-area h2,
.dark-mode .content-area h3,
.dark-mode .content-area h4,
.dark-mode .content-area h5,
.dark-mode .content-area h6 {
    color: #E1E8EF !important;
}

.dark-mode .content-area a {
    color: #60A5FA !important;
}

/* ========================================
   BG-LIGHT UTILITY
   ======================================== */

.dark-mode main .bg-light {
    background-color: #162231 !important;
}

/* ========================================
   PRICING MODAL
   ======================================== */

.dark-mode .modal-body .card-body {
    background-color: #162231 !important;
}

/* ========================================
   MISC
   ======================================== */

.dark-mode main hr {
    border-color: #1C2A3A !important;
}

.dark-mode main .shadow-sm {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}