/* ========== Dark mode (client) ========== */
html[data-theme="dark"] {
    color-scheme: dark;
}

/* Shared success green (MC alerts, fill-blank borders, essay notices) */
html[data-theme="dark"] {
    --yd-success-bg: #1b4332;
    --yd-success-border: #2d6a4f;
    --yd-success-text: #d8f3dc;
    --yd-danger-bg: #4a1c1c;
    --yd-danger-border: #7f2d2d;
    --yd-danger-text: #ffc9c9;
}

/* Do NOT use * { color: inherit } — it breaks light-on-dark feedback. */

html[data-theme="dark"] body {
    background-color: #12141a !important;
    color: #e6e6e6 !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] span,
html[data-theme="dark"] div,
html[data-theme="dark"] label,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] strong,
html[data-theme="dark"] b,
html[data-theme="dark"] th,
html[data-theme="dark"] td {
    color: #e6e6e6;
}

html[data-theme="dark"] a,
html[data-theme="dark"] a:link,
html[data-theme="dark"] a:visited {
    color: #8ab4ff;
}

/* Links often wrap <strong> titles (search results, etc.) — override * { color: black } */
html[data-theme="dark"] a strong,
html[data-theme="dark"] a b,
html[data-theme="dark"] a span {
    color: inherit !important;
}

html[data-theme="dark"] a.text-black,
html[data-theme="dark"] .text-black {
    color: #e6e6e6 !important;
}

/* Bootstrap text-body stays dark — force light for curriculum links etc. */
html[data-theme="dark"] .text-body,
html[data-theme="dark"] a.text-body {
    color: #e6e6e6 !important;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary {
    color: #9aa0a6 !important;
}

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-dark-blue {
    color: #e6e6e6 !important;
}

html[data-theme="dark"] .text-white {
    color: #fff !important;
}

/* Header icons: diamond, notification bell, user menu */
html[data-theme="dark"] .bi-gem,
html[data-theme="dark"] .bi-bell,
html[data-theme="dark"] .bi-person {
    color: #e6e6e6 !important;
}

html[data-theme="dark"] #notificationsDropdown,
html[data-theme="dark"] #notificationsDropdown .bi-bell {
    color: #e6e6e6 !important;
}

/* User account circular dropdown button (person + caret) */
html[data-theme="dark"] .btn.btn-secondary.dropdown-toggle,
html[data-theme="dark"] .btn.btn-secondary.dropdown-toggle .bi-person,
html[data-theme="dark"] .btn.btn-secondary.dropdown-toggle i {
    color: #e6e6e6 !important;
}

html[data-theme="dark"] .btn.btn-secondary.dropdown-toggle::after {
    color: #e6e6e6 !important;
    border-top-color: #e6e6e6 !important;
}

/* --- Navbar / header --- */
html[data-theme="dark"] #header .navbar,
html[data-theme="dark"] .navbar.bg-white {
    background-color: #1a1d24 !important;
    border-color: #2a2e38 !important;
}

html[data-theme="dark"] .navbar-light .navbar-nav .nav-link {
    color: #e6e6e6 !important;
}

html[data-theme="dark"] .navbar-light .navbar-toggler {
    border-color: #555;
}

html[data-theme="dark"] .navbar-toggler-icon {
    filter: invert(1);
}

html[data-theme="dark"] .dropdown-menu {
    background-color: #1e222b;
    border-color: #333;
}

html[data-theme="dark"] .dropdown-item {
    color: #e6e6e6;
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background-color: #2a2f3a;
    color: #fff;
}

/* --- Surfaces --- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .toast {
    background-color: #1a1d24;
    color: #e6e6e6;
    border-color: #2f3440;
}

html[data-theme="dark"] .card-header {
    background-color: #1a1d24;
    color: #e6e6e6;
    border-color: #2f3440;
}

html[data-theme="dark"] .card-title,
html[data-theme="dark"] .card-title.text-black {
    color: #e6e6e6 !important;
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    border-color: #2f3440;
}

html[data-theme="dark"] .modal-title {
    color: #e6e6e6 !important;
}

/* Login/register modal: back arrow + close */
html[data-theme="dark"] #backBtnOnTheModal,
html[data-theme="dark"] #backBtnOnTheModal.bi-arrow-right,
html[data-theme="dark"] .backBtnOnModal,
html[data-theme="dark"] .modal .bi-arrow-right {
    color: #e6e6e6 !important;
}

html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(1.4);
    opacity: 0.9;
}

html[data-theme="dark"] .btn-close:hover {
    opacity: 1;
}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-alice-blue {
    background-color: #1a1d24 !important;
    color: #e6e6e6 !important;
}

/* Course curriculum: lesson/assignment rows & titles */
html[data-theme="dark"] #LessonsAccordion .bg-alice-blue,
html[data-theme="dark"] #LessonsAccordion .row.bg-alice-blue {
    background-color: #22262f !important;
    color: #e6e6e6 !important;
}

/* Done lesson row (inline style uses light green) */
html[data-theme="dark"] #LessonsAccordion .row[style*="background-color: #e5f6ed"],
html[data-theme="dark"] #LessonsAccordion .row[style*="background-color:#e5f6ed"] {
    background-color: #1b4332 !important;
}

html[data-theme="dark"] #LessonsAccordion a.text-body,
html[data-theme="dark"] #LessonsAccordion a.h6,
html[data-theme="dark"] #LessonsAccordion .h6 {
    color: #e6e6e6 !important;
}

html[data-theme="dark"] #LessonsAccordion a.text-muted {
    color: #9aa0a6 !important;
}

html[data-theme="dark"] .accordion-button,
html[data-theme="dark"] .accordion-button:not(.collapsed),
html[data-theme="dark"] .accordion-button.btn-link {
    color: #e6e6e6 !important;
    background-color: transparent !important;
}

html[data-theme="dark"] .accordion-button::after {
    filter: invert(1);
}

/* --- Nav tabs (course page + user panel; override inline #F0F4FA) --- */
html[data-theme="dark"] .nav-tabs {
    background-color: #1a1d24 !important;
    border-color: #2f3440 !important;
}

html[data-theme="dark"] ul.nav-tabs[style] {
    background-color: #1a1d24 !important;
}

html[data-theme="dark"] .nav-tabs .nav-link {
    color: #c8c8c8 !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

html[data-theme="dark"] .nav-tabs .nav-link:hover,
html[data-theme="dark"] .nav-tabs .nav-link:focus {
    color: #e6e6e6 !important;
    border-color: #3a4150 #3a4150 transparent !important;
}

html[data-theme="dark"] .nav-tabs .nav-link.active {
    color: #e6e6e6 !important;
    background-color: #12141a !important;
    border-color: #2f3440 #2f3440 #12141a !important;
}

/* --- Tables (user panel notifications, orders, payments, comments) --- */
html[data-theme="dark"] .table {
    color: #e6e6e6 !important;
    border-color: #2f3440 !important;
}

html[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: #1a1d24 !important;
    color: #e6e6e6 !important;
    border-color: #2f3440 !important;
}

html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table th,
html[data-theme="dark"] .thead-light th {
    background-color: #22262f !important;
    color: #e6e6e6 !important;
    border-color: #2f3440 !important;
}

html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered > :not(caption) > * {
    border-color: #2f3440 !important;
}

html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #1e222b !important;
    color: #e6e6e6 !important;
}

html[data-theme="dark"] .table a,
html[data-theme="dark"] .table a.text-primary {
    color: #8ab4ff !important;
}

html[data-theme="dark"] .table a.text-black {
    color: #e6e6e6 !important;
}

/* --- Pagination (search results, etc.) --- */
html[data-theme="dark"] .pagination .page-link {
    background-color: #1a1d24;
    border-color: #3a4150;
    color: #e6e6e6;
}

html[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: #195ec8;
    border-color: #195ec8;
    color: #fff;
}

html[data-theme="dark"] .pagination .page-item.disabled .page-link {
    background-color: #1a1d24;
    border-color: #3a4150;
    color: #6c757d;
}

html[data-theme="dark"] .pagination .page-link:hover {
    background-color: #2a2f3a;
    border-color: #3a4150;
    color: #fff;
}

/* --- Lesson item cards --- */
html[data-theme="dark"] [id^="item-"],
html[data-theme="dark"] .lesson-item,
html[data-theme="dark"] .card.lesson-item,
html[data-theme="dark"] .border.rounded {
    background-color: #1a1d24;
    border: 1px solid #3a4150 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] [id^="item-"] {
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* --- Forms --- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background-color: #12141a !important;
    color: #e6e6e6 !important;
    border-color: #3a4050 !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background-color: #12141a !important;
    color: #e6e6e6 !important;
    border-color: #195ec8 !important;
}

html[data-theme="dark"] .form-control::placeholder {
    color: #8a8f98 !important;
}

html[data-theme="dark"] .input-group-text {
    background-color: #2a2f3a !important;
    color: #e6e6e6 !important;
    border-color: #3a4050 !important;
}

html[data-theme="dark"] .form-label,
html[data-theme="dark"] label {
    color: #e6e6e6 !important;
}

/* Fill-blank: same green/red as alerts */
html[data-theme="dark"] input.form-control[data-blank-index].is-valid,
html[data-theme="dark"] .form-control.is-valid {
    border-color: var(--yd-success-border) !important;
    box-shadow: 0 0 0 0.15rem rgba(45, 106, 79, 0.35);
}

html[data-theme="dark"] input.form-control[data-blank-index].is-invalid,
html[data-theme="dark"] .form-control.is-invalid {
    border-color: var(--yd-danger-border) !important;
    box-shadow: 0 0 0 0.15rem rgba(127, 45, 45, 0.35);
}

html[data-theme="dark"] .fill-blank-wrong-word {
    background-color: #6e6e6e;
}

/* --- Alerts / MC / essay success & danger (shared palette) --- */
html[data-theme="dark"] .alert-success,
html[data-theme="dark"] label.alert-success,
html[data-theme="dark"] .alert.alert-success {
    background-color: var(--yd-success-bg) !important;
    border-color: var(--yd-success-border) !important;
    color: var(--yd-success-text) !important;
}

html[data-theme="dark"] .alert-success *,
html[data-theme="dark"] label.alert-success * {
    color: var(--yd-success-text) !important;
}

html[data-theme="dark"] .alert-danger,
html[data-theme="dark"] label.alert-danger,
html[data-theme="dark"] .alert.alert-danger {
    background-color: var(--yd-danger-bg) !important;
    border-color: var(--yd-danger-border) !important;
    color: var(--yd-danger-text) !important;
}

html[data-theme="dark"] .alert-danger *,
html[data-theme="dark"] label.alert-danger * {
    color: var(--yd-danger-text) !important;
}

html[data-theme="dark"] .alert-info {
    background-color: #1a2a3a !important;
    border-color: #2a4a6a !important;
    color: #c5d8eb !important;
}

html[data-theme="dark"] .alert-info * {
    color: #c5d8eb !important;
}

html[data-theme="dark"] .alert-warning {
    background-color: #3a2e1a !important;
    border-color: #6a5a2a !important;
    color: #f0e0b0 !important;
}

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

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

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

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

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

html[data-theme="dark"] textarea[name="text_answer"]:disabled {
    border-color: var(--yd-success-border) !important;
}

html[data-theme="dark"] [id^="questionNotice-"] {
    color: #e6e6e6 !important;
}

html[data-theme="dark"] [id^="questionNotice-"] .border.rounded {
    background-color: #1e222b !important;
    border-color: #3a4150 !important;
    color: #e6e6e6 !important;
}

/* --- Lesson header / footer --- */
html[data-theme="dark"] #lesson-header,
html[data-theme="dark"] #lesson-footer,
html[data-theme="dark"] #assignment-header {
    border-color: rgba(255, 255, 255, 0.15) !important;
    background-color: #1a1d24;
}

html[data-theme="dark"] #lesson-name {
    color: #e6e6e6 !important;
}

html[data-theme="dark"] .selected-lesson-bg,
html[data-theme="dark"] .selected-item-bg {
    background-color: #2a3140 !important;
}

html[data-theme="dark"] .button-dark {
    background-color: #2a2f3a !important;
}

html[data-theme="dark"] .dropdown-toggle {
    background-color: #2a2f3a !important;
    border-color: rgba(255, 255, 255, 0.15);
    color: #e6e6e6 !important;
}

html[data-theme="dark"] .comment-header-bg-color {
    background-color: #2a2f3a !important;
}

html[data-theme="dark"] .comment-body,
html[data-theme="dark"] .comment-body p {
    color: #e6e6e6 !important;
}

html[data-theme="dark"] swiper-slide {
    background: #1a1d24;
}

/* --- Theme toggle: moon / sun icons --- */
.theme-toggle {
    border: none;
    background: transparent;
    color: #273044;
    padding: 0.35rem 0.5rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover,
.theme-toggle:focus {
    color: #195ec8;
}

.theme-toggle .bi {
    font-size: 1.25rem;
}

/* Override style.css * { color: black } so icons stay light in dark mode */
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .theme-toggle .bi,
html[data-theme="dark"] .theme-toggle i,
html[data-theme="dark"] .theme-icon-light,
html[data-theme="dark"] .theme-icon-dark {
    color: #e6e6e6 !important;
}

html[data-theme="dark"] .theme-toggle:hover,
html[data-theme="dark"] .theme-toggle:hover .bi,
html[data-theme="dark"] .theme-toggle:hover i,
html[data-theme="dark"] .theme-toggle:focus,
html[data-theme="dark"] .theme-toggle:focus .bi,
html[data-theme="dark"] .theme-toggle:focus i {
    color: #8ab4ff !important;
}

/* Dark mode → show sun; light mode → show moon */
html[data-theme="dark"] .theme-icon-light {
    display: inline-block !important;
}

html[data-theme="dark"] .theme-icon-dark {
    display: none !important;
}

html:not([data-theme="dark"]) .theme-icon-light {
    display: none !important;
}

html:not([data-theme="dark"]) .theme-icon-dark {
    display: inline-block !important;
}

html[data-theme="dark"] .progress {
    background-color: #2a2f3a;
}

/* --- Site footer --- */
html[data-theme="dark"] footer,
html[data-theme="dark"] #footer {
    background-color: #0e1014;
    color: #c8c8c8;
}

html[data-theme="dark"] footer a.text-dark,
html[data-theme="dark"] footer .text-dark {
    color: #c8c8c8 !important;
}

html[data-theme="dark"] footer a.text-dark:hover {
    color: #fff !important;
}

html[data-theme="dark"] footer .text-dark-blue {
    color: #e6e6e6 !important;
}

/* Social media icons (Font Awesome + Bootstrap Icons) */
html[data-theme="dark"] footer .fab,
html[data-theme="dark"] footer .fa-brands,
html[data-theme="dark"] footer .fa-instagram,
html[data-theme="dark"] footer .fa-telegram,
html[data-theme="dark"] footer .fa-linkedin,
html[data-theme="dark"] footer .bi-youtube,
html[data-theme="dark"] footer i.fab,
html[data-theme="dark"] footer i.fa-brands,
html[data-theme="dark"] footer i.bi {
    color: #e6e6e6 !important;
}

html[data-theme="dark"] footer a:hover .fab,
html[data-theme="dark"] footer a:hover .fa-brands,
html[data-theme="dark"] footer a:hover .bi {
    color: #8ab4ff !important;
}

/* Image logos (Bale, Aparat) — invert dark assets so they show on dark bg */
html[data-theme="dark"] footer img[src*="bale"],
html[data-theme="dark"] footer img[src*="aparat"],
html[data-theme="dark"] footer img[alt="بله"],
html[data-theme="dark"] footer img[alt="آپارات"] {
    filter: invert(1) brightness(1.1);
    opacity: 0.9;
}

html[data-theme="dark"] .shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .btn-secondary {
    background-color: #3a4050;
    border-color: #3a4050;
    color: #e6e6e6 !important;
}

html[data-theme="dark"] .btn-secondary .bi,
html[data-theme="dark"] .btn-secondary i {
    color: #e6e6e6 !important;
}

html[data-theme="dark"] hr {
    border-color: #2f3440;
    opacity: 1;
}

/* --- Bootstrap popover (lesson progress tooltip) --- */
html[data-theme="dark"] .popover {
    background-color: #1e222b !important;
    border-color: #3a4150 !important;
    color: #e6e6e6 !important;
}

html[data-theme="dark"] .popover-body,
html[data-theme="dark"] .popover-header {
    background-color: #1e222b !important;
    color: #e6e6e6 !important;
    border-color: #3a4150 !important;
}

html[data-theme="dark"] .popover .popover-arrow::before,
html[data-theme="dark"] .popover .popover-arrow::after {
    border-top-color: #1e222b !important;
    border-bottom-color: #1e222b !important;
    border-left-color: #1e222b !important;
    border-right-color: #1e222b !important;
}

/* --- SweetAlert2 --- */
html[data-theme="dark"] .swal2-popup {
    background: #1e222b !important;
    color: #e6e6e6 !important;
}

html[data-theme="dark"] .swal2-title,
html[data-theme="dark"] .swal2-html-container,
html[data-theme="dark"] .swal2-content {
    color: #e6e6e6 !important;
}

html[data-theme="dark"] .swal2-confirm {
    background-color: #195ec8 !important;
    color: #fff !important;
}