/* ===================================
   CUSTOM DARK MODE STYLES
   Main Background: #121212
   Cards/Sections: #212121
   Text: Smart (white only on dark backgrounds)
   =================================== */

/* ========== DISABLE TRANSITIONS FOR INSTANT CHANGE ========== */
/* .active-dark-mode * {
    transition: none !important;
} */
.card {
    background-color: white;
    border: 1px solid #F1F1F4;
}

/* ========== DARK MODE BASE STYLES ========== */
.active-dark-mode {
    background-color: #121212 !important;
}

/* ========== UTILITY CLASSES (Use these for manual control) ========== */
/* Add these classes to elements that should have white text in dark mode */
.active-dark-mode .dark-text-white {
    color: white !important;
}

.active-dark-mode .dark-text-gray {
    color: #b3b3b3 !important;
}

.active-dark-mode .dark-bg-card {
    background-color: #212121 !important;
    background: #212121 !important;
}

.active-dark-mode .dark-bg-card-hover-green {
    background-color: #212121 !important;
}

.active-dark-mode .dark-bg-main {
    background-color: #121212 !important;
    background: #121212 !important;
}

.active-dark-mode .navbar-notification-icon i {
    color: #fff !important;
}

.active-dark-mode .bg-read-notification-item{
        background-color: #212121;

}

.active-dark-mode .bg-unread-notification-item{
        background-color: #212121;

}

.active-dark-mode .dark-bg-darkgreen {
    background-color: #172E23 !important;
    background: #172E23 !important;
    color: #fff !important;
}

.active-dark-mode .dark-bg-darkred {
    background-color: #261717 !important;
    color: #fff !important;
}

.active-dark-mode .dark-bg-gray {

    background: #3a3a3a !important;
    background-color: #3a3a3a !important;
}

.active-dark-mode .dark-bg-semi-main {

    background: #ffffff0d !important;
    background-color: #ffffff0d !important;
}


/* ========== HEADINGS (Only in dark backgrounds) ========== */
.active-dark-mode .course_card_item h1,
.active-dark-mode .course_card_item h2,
.active-dark-mode .course_card_item h3,
.active-dark-mode .course_card_item h4,
.active-dark-mode .course_card_item h5,
.active-dark-mode .course_card_item h6,
.active-dark-mode .testimonial_card_item h1,
.active-dark-mode .testimonial_card_item h2,
.active-dark-mode .testimonial_card_item h3,
.active-dark-mode .testimonial_card_item h4,
.active-dark-mode .testimonial_card_item h5,
.active-dark-mode .testimonial_card_item h6,
.active-dark-mode .meeting-card-container h1,
.active-dark-mode .meeting-card-container h2,
.active-dark-mode .meeting-card-container h3,
.active-dark-mode .meeting-card-container h4,
.active-dark-mode .meeting-card-container h5,
.active-dark-mode .meeting-card-container h6,
.active-dark-mode .custom_accordion h1,
.active-dark-mode .custom_accordion h2,
.active-dark-mode .custom_accordion h3,
.active-dark-mode .custom_accordion h4,
.active-dark-mode .custom_accordion h5,
.active-dark-mode .custom_accordion h6,
.active-dark-mode .teacher-card h1,
.active-dark-mode .teacher-card h2,
.active-dark-mode .teacher-card h3,
.active-dark-mode .teacher-card h4,
.active-dark-mode .teacher-card h5,
.active-dark-mode .teacher-card h6,
.active-dark-mode .overview-section h1,
.active-dark-mode .overview-section h2,
.active-dark-mode .overview-section h3,
.active-dark-mode .overview-section h4,
.active-dark-mode .overview-section h5,
.active-dark-mode .overview-section h6,
.active-dark-mode .start_quiz_card h1,
.active-dark-mode .start_quiz_card h2,
.active-dark-mode .start_quiz_card h3,
.active-dark-mode .start_quiz_card h4,
.active-dark-mode .start_quiz_card h5,
.active-dark-mode .start_quiz_card h6 {
    color: white !important;
}

/* ========== MAIN BACKGROUNDS ========== */
.active-dark-mode .rbt-main-content,
.active-dark-mode .rbt-breadcrumb-default,
.active-dark-mode .rbt-page-banner-wrapper,
.active-dark-mode .bg-gradient-1,
.active-dark-mode .bg-gradient-2,
.active-dark-mode .bg-gradient-3,
.active-dark-mode .rbt-section-gap,
.active-dark-mode .rbt-banner-area,
.active-dark-mode .banner-content,
.active-dark-mode .hero-section,
.active-dark-mode .rbt-feature-area,
.active-dark-mode .rbt-course-area,
.active-dark-mode .rbt-testimonial-area {
    background: #121212 !important;
}

/* Main content text (on #121212 background) */
.active-dark-mode .rbt-main-content,
.active-dark-mode .rbt-main-content p,
.active-dark-mode .rbt-main-content span:not(.badge):not(.btn *) {
    color: white !important;
}

/* ========== CARDS AND SECTIONS ========== */
.active-dark-mode .course_card_item,
.active-dark-mode .testimonial_card_item,
.active-dark-mode .meeting-card-container,
.active-dark-mode .custom_accordion,
.active-dark-mode .course-content-accordion,
.active-dark-mode .teacher-card,
.active-dark-mode .overview-section,
.active-dark-mode .start_quiz_card,
.active-dark-mode .course-card,
.active-dark-mode .rbt-card,
.active-dark-mode .card,
.active-dark-mode .card-body,
.active-dark-mode .rbt-course-card,
.active-dark-mode .tab-switcher-container,
.active-dark-mode .search-bar-container,
.active-dark-mode .mobile-tabs-container,
.active-dark-mode .rbt-counterup-area,
.active-dark-mode .counter-card,
.active-dark-mode .rbt-cta-area,
.active-dark-mode .course-card,
.active-dark-mode .quiz-session-wrapper,
.active-dark-mode .quiz-question-card,
.active-dark-mode .cta-card {
    background-color: #212121 !important;
    border-color: #3a3a3a !important;
    border-radius: 1rem !important;
}

/* Card text */
.active-dark-mode .course_card_item,
.active-dark-mode .course_card_item p,
.active-dark-mode .course_card_item .course_title,
.active-dark-mode .testimonial_card_item,
.active-dark-mode .testimonial_card_item p,
.active-dark-mode .testimonial_card_item .testimonial_text,
.active-dark-mode .testimonial_card_item .student_name,
.active-dark-mode .testimonial_card_item .student_title,
.active-dark-mode .meeting-card-container,
.active-dark-mode .meeting-card-container p,
.active-dark-mode .custom_accordion,
.active-dark-mode .custom_accordion p,
.active-dark-mode .teacher-card,
.active-dark-mode .teacher-card p,
.active-dark-mode .overview-section,
.active-dark-mode .overview-section p,
.active-dark-mode .start_quiz_card,
.active-dark-mode .start_quiz_card p {
    color: white !important;
}

/* ========== SPECIFIC CARD BACKGROUNDS ========== */
.active-dark-mode .rbt-feature-area .card,
.active-dark-mode .rbt-feature-area .rbt-card {
    background-color: #212121 !important;
}

/* ========== ACCORDION STYLES ========== */
.active-dark-mode .accordion-item {
    background-color: #212121 !important;
    border-color: #3a3a3a !important;
}

.active-dark-mode .accordion-header {
    background-color: #212121 !important;
    color: white !important;
}

.active-dark-mode .accordion-header:hover {
    background-color: #2a2a2a !important;
}

.active-dark-mode .lesson-item {
    background-color: #1a1a1a !important;
    color: white !important;
}

.active-dark-mode .lesson-item:hover {
    background-color: #252525 !important;
}

.active-dark-mode .lesson-text,
.active-dark-mode .lesson-number,
.active-dark-mode .lesson-name {
    color: white !important;
}

.active-dark-mode .lesson-count,
.active-dark-mode .lesson-duration {
    color: #b3b3b3 !important;
}

/* ========== TABS ========== */
.active-dark-mode .mobile-course-tabs {
    background-color: #212121 !important;
    border-bottom-color: #3a3a3a !important;
}

.active-dark-mode .mobile-course-tabs .nav-link {
    color: #b3b3b3 !important;
}

.active-dark-mode .nav-link.active {
    /* color: var(--primary-color, #165D31) !important; */
    color: white !important;
    border-bottom-color: var(--primary-color, #165D31) !important;
}

.active-dark-mode .nav-link:hover:not(.disabled) {
    border-bottom-color: var(--primary-color, #165D31) !important;
}

.active-dark-mode .mobile-course-tabs .nav-link:hover {
    background-color: #2a2a2a !important;
}

.active-dark-mode .mobile-course-tab-content {
    background-color: #212121 !important;
}

.active-dark-mode .btn-check:checked + .btn.btn-active-color-primary,
.active-dark-mode .btn-check:active + .btn.btn-active-color-primary,
.active-dark-mode .btn.btn-active-color-primary:focus:not(.btn-active),
.active-dark-mode .btn.btn-active-color-primary:hover:not(.btn-active),
.active-dark-mode .btn.btn-active-color-primary:active:not(.btn-active),
.active-dark-mode .btn.btn-active-color-primary.active,
.active-dark-mode .btn.btn-active-color-primary.show,
.active-dark-mode .show > .btn.btn-active-color-primary,
.active-dark-mode .btn-check:checked + .btn.btn-active-color-primary i,
.active-dark-mode .btn-check:checked + .btn.btn-active-color-primary .svg-icon,
.active-dark-mode .btn-check:active + .btn.btn-active-color-primary i,
.active-dark-mode .btn-check:active + .btn.btn-active-color-primary .svg-icon,
.active-dark-mode .btn.btn-active-color-primary:focus:not(.btn-active) i,
.active-dark-mode .btn.btn-active-color-primary:focus:not(.btn-active) .svg-icon,
.active-dark-mode .btn.btn-active-color-primary:hover:not(.btn-active) i,
.active-dark-mode .btn.btn-active-color-primary:hover:not(.btn-active) .svg-icon,
.active-dark-mode .btn.btn-active-color-primary:active:not(.btn-active) i,
.active-dark-mode .btn.btn-active-color-primary:active:not(.btn-active) .svg-icon,
.active-dark-mode .btn.btn-active-color-primary.active i,
.active-dark-mode .btn.btn-active-color-primary.active .svg-icon,
.active-dark-mode .btn.btn-active-color-primary.show i,
.active-dark-mode .btn.btn-active-color-primary.show .svg-icon,
.active-dark-mode .show > .btn.btn-active-color-primary i,
.active-dark-mode .show > .btn.btn-active-color-primary .svg-icon {
    color: var(--primary-color, #165D31) !important;
}

/* ========== TAB SWITCHER ========== */
.active-dark-mode .tab-switcher-container {
    background-color: #212121 !important;
}

.active-dark-mode .tab-switcher-item-text {
    color: #b3b3b3 !important;
}

.active-dark-mode .tab-switcher-item.active {
    background-color: var(--primary-color, #165D31) !important;
}

.active-dark-mode .tab-switcher-item.active .tab-switcher-item-text {
    color: white !important;
}

.active-dark-mode .tab-switcher-item:hover:not(.active) {
    background-color: #2a2a2a !important;
}

/* ========== SEARCH BAR ========== */
.active-dark-mode .search-bar-container {
    background-color: #212121 !important;
    border-color: #3a3a3a !important;
}

.active-dark-mode .search-bar-input {
    background-color: transparent !important;
    color: white !important;
}

.active-dark-mode .search-bar-input::placeholder {
    color: #b3b3b3 !important;
}

.active-dark-mode .search-bar-icon {
    color: #b3b3b3 !important;
}

/* ========== BUTTONS (Keep their original colors) ========== */
.active-dark-mode .btn-primary,
.active-dark-mode .btn-light-primary,
.active-dark-mode .btn.btn-light-primary i,
.active-dark-mode .discover_btn,
.active-dark-mode .meeting-card-button,
.active-dark-mode .start_quiz_btn {
    background-color: var(--primary-color, #165D31) !important;
    color: white !important;
    border: none !important;
}

.active-dark-mode .dark-active-switch-btn {
    background-color: #212121 !important;
    color: white !important;
}

.active-dark-mode .dark-active-switch-btn-main {
    background-color: #165D31 !important;
    color: white !important;
}

.active-dark-mode .dark-active-switch-btn span {
    color: white !important;
}

.active-dark-mode .dark-active-switch-btn-main span {
    color: white !important;
}



.active-dark-mode .outline-dark-gray {
    outline: 0.5px #e5e5e542 solid !important;
}

.active-dark-mode .border-dark-main {
    border: 0.5px #363636 solid !important;
}

.active-dark-mode .border-dark-gray {
    border: 0.5px #e5e5e542 solid !important;
}
.active-dark-mode .border-dark-gray-dashed {
    border: 0.5px #e5e5e542 dashed !important;
}

.active-dark-mode .container-fluid {
    background-color: unset !important;
    background: unset !important;
}

.active-dark-mode .border-b-dark-gray {
    border-bottom: 0.5px #e5e5e542 solid !important;
}
.active-dark-mode .border-t-dark-gray {
    border-top: 0.5px #e5e5e542 solid !important;
}

.active-dark-mode .pricing-switch-nav-item button{
     border-bottom: 2px solid #e5e5e542 !important;
}

.active-dark-mode .subscription-actions{
     border-top: 1px solid #e5e5e542 !important;
}


.active-dark-mode .plan-divider-dark {
    background-color: #e5e5e542 !important;
}


.active-dark-mode .menu-item:hover {
    background-color: #2a2a2a !important;
}

.active-dark-mode .dark-bg-card-hover-green:hover {
    background-color: #172E23 !important;
}

.active-dark-mode .dark-bg-card-hover-red:hover {
    background-color: #180b0b !important;
}

.active-dark-mode .btn-primary:hover,
.active-dark-mode .discover_btn:hover,
.active-dark-mode .meeting-card-button:hover,
.active-dark-mode .btn-light-primary:hover,
.active-dark-mode .btn.btn-light-primary:hover i,
.active-dark-mode .btn.btn-light-primary:hover:not(.btn-active), 
.active-dark-mode .start_quiz_btn:hover {
    background-color: var(--primary-color-hover, #1a7346) !important;
}

.active-dark-mode .btn-check:checked + .btn.btn-primary,
.active-dark-mode .btn-check:active + .btn.btn-primary,
.active-dark-mode .btn.btn-primary:focus:not(.btn-active),
.active-dark-mode .btn.btn-primary:hover:not(.btn-active),
.active-dark-mode .btn.btn-primary:active:not(.btn-active),
.active-dark-mode .btn.btn-primary.active,
.active-dark-mode .btn.btn-primary.show,
.active-dark-mode .show > .btn.btn-primary {
    background-color: #172E23 !important;
}

/* ========== BADGES ========== */
.active-dark-mode .meeting-badge,
.active-dark-mode .difficulty_badge {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: #10b981 !important;
}

.active-dark-mode .meeting-badge-paid {
    background-color: rgba(251, 191, 36, 0.2) !important;
    color: #fbbf24 !important;
}

/* ========== META ITEMS ========== */
.active-dark-mode .meta-item {
    background-color: #1a1a1a !important;
}

.active-dark-mode .meta-label {
    color: #b3b3b3 !important;
}

.active-dark-mode .meta-value {
    color: white !important;
}

/* ========== DIVIDERS & BORDERS ========== */
.active-dark-mode .meeting-card-divider,
.active-dark-mode .meeting-card-meta-divider,
.active-dark-mode hr {
    background-color: #3a3a3a !important;
    border-color: #3a3a3a !important;
}

/* ========== PAGINATION ========== */
.active-dark-mode .pagination-item {
    background-color: #212121 !important;
    border-color: #3a3a3a !important;
}

.active-dark-mode .pagination-item:hover:not(.active):not(.disabled) {
    background-color: #2a2a2a !important;
    border-color: var(--primary-color, #165D31) !important;
}

.active-dark-mode .pagination-item.active {
    background-color: var(--primary-color, #165D31) !important;
    color: white !important;
}

.active-dark-mode .pagination-item-text {
    color: #b3b3b3 !important;
}

.active-dark-mode .pagination-item.active .pagination-item-text {
    color: white !important;
}

/* ========== EMPTY STATE ========== */
.active-dark-mode .empty-state-text {
    color: #b3b3b3 !important;
}

/* ========== TEACHER CARD ========== */
.active-dark-mode .teacher-info {
    background-color: #212121 !important;
}

.active-dark-mode .teacher-name {
    color: white !important;
}

.active-dark-mode .teacher-role,
.active-dark-mode .teacher-bio {
    color: #b3b3b3 !important;
}

.active-dark-mode .stat-item {
    color: #b3b3b3 !important;
}

/* ========== QUIZ CARD ========== */
.active-dark-mode .quiz_card_header h5 {
    color: white !important;
}

.active-dark-mode .quiz_card_body .item_key {
    color: #b3b3b3 !important;
}

.active-dark-mode .quiz_card_body .item_value {
    color: white !important;
}

.active-dark-mode .quiz_instructions {
    background-color: rgba(22, 93, 49, 0.1) !important;
    border-color: rgba(22, 93, 49, 0.3) !important;
}

.active-dark-mode .quiz_instructions h6 {
    color: var(--primary-color, #165D31) !important;
}

.active-dark-mode .instructions_list li {
    color: white !important;
}

.active-dark-mode .question-nav-item.answered {
    background-color: #1B2922 !important;
}

.active-dark-mode .question-nav-item.answered .question-nav-item-text {
    color: #2BA37A !important;
}
/* ========== FOOTER ========== */
.active-dark-mode .rbt-footer,
.active-dark-mode footer {
    background-color: #212121 !important;
}

.active-dark-mode .footer-item a,
.active-dark-mode .rbt-footer a {
    color: #b3b3b3 !important;
}

.active-dark-mode .footer-item:hover {
    background-color: rgba(22, 93, 49, 0.1) !important;
}

/* ========== HEADER/NAVBAR ========== */
.active-dark-mode .rbt-header,
.active-dark-mode .rbt-header-wrapper {
    background-color: #212121 !important;
}

.active-dark-mode .mainmenu li a,
.active-dark-mode .menu-item a {
    color: white !important;
}

.active-dark-mode .mainmenu li a,
.active-dark-mode .sidebar-menu-item {
    color: #b3b3b3 !important;
}

.active-dark-mode .mainmenu li a,
.active-dark-mode .sidebar-subject-name {
    color: #b3b3b3 !important;
}

/* .active-dark-mode .mainmenu li a,
.active-dark-mode .sidebar-menu-active {
    color: #b3b3b3 !important;
} */


.active-dark-mode .fc-button-group {
    background-color: #121212 !important;
    background: #121212 !important;
}

.active-dark-mode .side-item-selected {
    background-color: #172E23;
    color: #fff !important;
}

.active-dark-mode .disabled-text {
    color: #b3b3b370 !important;
}

.active-dark-mode .payment-method-option .payment-card.active {
    background: #165d3166 !important;
    background-color: #165d3166 !important;
}

.active-dark-mode #paymentModal .payment-method-option input[type="radio"]:checked+.payment-card {
    background: #165d3166 !important;
    background-color: #165d3166 !important;
}

.active-dark-mode #paymentModal .payment-method-option input[type="radio"]:checked+.payment-card .payment-method-title {
    color: white !important;
}

.active-dark-mode .iti__country-list {
    background-color: #212121 !important;
    background: #212121 !important;
}

.active-dark-mode .mysr-form-dividerParagraph {
    color: white !important;
}

.active-dark-mode label.mysr-form-label,
.active-dark-mode .mysr-form-footer a {
    color: #b3b3b3 !important;
}

.active-dark-mode .mysr-form-footer a:hover {
    color: white !important;
}


.active-dark-mode .sidebar-item:hover {
    background-color: rgba(22, 93, 49, 0.1) !important;
}

.active-dark-mode .footer-item :hover {
    background-color: #172E23 !important;
    color: white !important;
}

/* ========== SPECIAL BACKGROUNDS ========== */
.active-dark-mode .custom_bg {
    background: linear-gradient(180deg, rgba(22, 93, 49, 0.1) 0%, rgba(22, 93, 49, 0.05) 100%) !important;
    backdrop-filter: unset !important;
}

.active-dark-mode .tab-content-wrapper {
    background: #121212 !important;
}

.active-dark-mode .card-visual {
    background: linear-gradient(135deg, rgba(22, 93, 49, 0.2) 0%, rgba(22, 93, 49, 0.1) 100%) !important;
}

/* ========== FORMS & INPUTS ========== */
.active-dark-mode input,
.active-dark-mode textarea,
.active-dark-mode select {
    background-color: #212121 !important;
    border-color: #3a3a3a !important;
    color: white !important;
}

.active-dark-mode input::placeholder,
.active-dark-mode textarea::placeholder {
    color: #b3b3b3 !important;
}

.active-dark-mode input:focus,
.active-dark-mode textarea:focus,
.active-dark-mode select:focus {
    background-color: #212121 !important;
    border-color: var(--primary-color, #165D31) !important;
    color: white !important;
}

/* ========== CALENDAR (FullCalendar) ========== */
.active-dark-mode .fc {
    background-color: #212121 !important;
}

.active-dark-mode .fc-theme-standard td,
.active-dark-mode .fc-theme-standard th {
    border-color: #3a3a3a !important;
}

.active-dark-mode .fc-col-header-cell,
.active-dark-mode .fc-daygrid-day {
    background-color: #212121 !important;
    color: white !important;
}

.active-dark-mode .fc-toolbar-title {
    color: white !important;
}

.active-dark-mode .fc-button {
    background-color: #212121 !important;
    border-color: #3a3a3a !important;
    color: white !important;
}

.active-dark-mode .fc-button:hover {
    background-color: #2a2a2a !important;
}

.active-dark-mode .fc-button-active {
    background-color: var(--primary-color, #165D31) !important;
}

.active-dark-mode .fc .fc-button-group>.fc-button.fc-button-active {
    background-color: var(--primary-color, #165D31) !important;
    color: #fff !important;
}

.active-dark-mode .fc .fc-button.fc-prev-button,
.active-dark-mode .fc .fc-button.fc-next-button {
    background-color: #212121 !important;
    background: #212121 !important;
    color: #fff !important;
    border: 0.5px #e5e5e542 solid !important;
}


.active-dark-mode .fc .fc-list-empty {
    background-color: #212121 !important;
    background: #212121 !important;
    color: white !important;
}

.active-dark-mode .fc-theme-standard .fc-list {
    border: 0.5px #e5e5e542 solid !important;
}

.active-dark-mode .fc-header-toolbar {
    border-bottom: 0.5px #e5e5e542 solid !important;
}

.active-dark-mode .meeting-card-participant-avatar {
    border: 0.5px #212121 solid !important;
}

.active-dark-mode .setting-nav-item:hover:not(.setting-nav-item-active) {
    background-color: #2a2a2a !important;
}

.active-dark-mode .setting-nav-item-active {
    background-color: var(--primary-color, #165D31) !important;
    color: #fff !important;
}
.active-dark-mode .address-card-option.selected {
    outline: 0.5px #165D31 solid !important;
    outline-offset: -0.5px !important;
    /* background-color: var(--primary-color, #165D31) !important; */
    /* color: #fff !important; */
}

.active-dark-mode .setting-nav-item-delete:hover {
    background-color: #532727c0 !important;
    color: #fff !important;
}

.active-dark-mode .iti__selected-dial-code {
    color: #b3b3b3 !important;
}

.active-dark-mode .day-has-meeting:hover {
    background-color: #3b3b3b !important;
    color: white !important;
}


/* ========== MODALS ========== */
.active-dark-mode .modal-content {
    background-color: #212121 !important;
    color: white !important;
}

.active-dark-mode .modal-header,
.active-dark-mode .modal-footer {
    border-color: #3a3a3a !important;
}

/* ========== DROPDOWN MENUS ========== */
.active-dark-mode .dropdown-menu {
    background-color: #212121 !important;
    border-color: #3a3a3a !important;
}

.active-dark-mode .dropdown-item {
    color: white !important;
}

.active-dark-mode .dropdown-item:hover {
    background-color: #2a2a2a !important;
}

/* ========== SHADOWS ========== */
.active-dark-mode .course_card_item,
.active-dark-mode .testimonial_card_item,
.active-dark-mode .meeting-card-container,
.active-dark-mode .custom_accordion,
.active-dark-mode .teacher-card,
.active-dark-mode .overview-section {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* ========== HOVER EFFECTS ========== */
.active-dark-mode .course_card_item:hover,
.active-dark-mode .meeting-card-container:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6) !important;
    transform: translateY(-2px);
}

/* ========== SCROLLBARS ========== */
.active-dark-mode ::-webkit-scrollbar {
    background-color: #121212;
}

.active-dark-mode ::-webkit-scrollbar-thumb {
    background-color: #3a3a3a;
    border-radius: 10px;
}

.active-dark-mode ::-webkit-scrollbar-thumb:hover {
    background-color: #4a4a4a;
}

/* ========== IMAGES & ICONS ========== */
.active-dark-mode img {
    opacity: 0.95;
}

/* ========== TEXT UTILITIES ========== */
.active-dark-mode .text-muted {
    color: #b3b3b3 !important;
}

/* ========== BREADCRUMB ========== */
.active-dark-mode .breadcrumb {
    background-color: #212121 !important;
}

.active-dark-mode .breadcrumb-item,
.active-dark-mode .breadcrumb-item a {
    color: #b3b3b3 !important;
}

.active-dark-mode .breadcrumb-item.active {
    color: white !important;
}

/* ========== TABLES ========== */
.active-dark-mode table {
    background-color: #212121 !important;
    color: white !important;
}

.active-dark-mode th,
.active-dark-mode td {
    border-color: #3a3a3a !important;
    color: white !important;
}

.active-dark-mode thead {
    background-color: #1a1a1a !important;
}

.active-dark-mode tbody tr:hover {
    background-color: #2a2a2a !important;
}

/* ========== LEADERBOARD ========== */
.active-dark-mode .hero-leaderboard {
    background-color: var(--primary-color, #165D31) !important;
}

/* ========== USER MENU SIDEBAR ========== */
.active-dark-mode .user-menu-sidebar {
    background-color: #212121 !important;
}

.active-dark-mode .user-menu-close {
    background-color: #1a1a1a !important;
    color: white !important;
}

/* ========== CTA SECTION ========== */
.active-dark-mode .cta-title {
    color: white !important;
}

/* ========== SHARED TITLES ========== */
.active-dark-mode .shared_title {
    color: var(--primary-color, #165D31) !important;
}

.active-dark-mode .shared_subtitle {
    color: white !important;
}

/* Success - Dark */
.active-dark-mode .status-badge-light-success {
  background-color: #38433d; /* success-dark */
  color: #50cd89;            /* success */
}

/* Danger - Dark */
.active-dark-mode .status-badge-light-danger {
  background-color: #3a2430; /* danger-dark */
  color: #f1416c;            /* danger */
}

/* Warning - Dark */
.active-dark-mode .status-badge-light-warning {
  background-color: #3d3723; /* warning-dark */
  color: #ffc700;            /* warning */
}

/* Dark */
.active-dark-mode .status-badge-light-dark {
  background-color: #1e1e2d; /* dark */
  color: #f5f8fa;            /* light */
}


/* ========== OTHERS ========== */

.active-dark-mode .correct_bg {
    background: #212121 !important;
    border: 0.5px solid var(--Success-Dark-100, #1D3329) !important;
}

.active-dark-mode .correct_icon_bg {
    background: var(--Success-Dark-100, #1D3329) !important;
}

.active-dark-mode .wrong_bg {
    background: #212121 !important;
    border: 0.5px solid var(--Error-Dark-100, #3C2424) !important;
}

.active-dark-mode .wrong_icon_bg {
    background: var(--Error-Dark-100, #3C2424) !important;
}

.active-dark-mode .circular-progress .progress-circle-bg {
    stroke: #1B2922 !important;
}

.active-dark-mode .circular-progress .progress-circle-bg.error {
    stroke: #301D1D !important;
}

.active-dark-mode .circular-progress .progress-circle-fill {
    stroke: #2BA37A !important;
}

.active-dark-mode .circular-progress .progress-circle-fill.error {
    stroke: #C23B3B !important;
}

.active-dark-mode .circular-progress .progress-percentage {
    color: #2BA37A !important;
}

.active-dark-mode .circular-progress .progress-percentage.error {
    color: #C23B3B !important;
}

.active-dark-mode .correct {
    border: 0.5px solid var(--Success-Dark-600, #2BA37A) !important;
    background: #18201C !important;
}

.active-dark-mode .wrong {
    border: 0.5px solid var(--Error-Dark-600, #C23B3B) !important;
    background: #261717 !important;
}

.active-dark-mode .neutral {
    background: #212121 !important;
    border: 0.5px solid #727272 !important;
}

.active-dark-mode #mysr-form-form-el#mysr-form-form-el#mysr-form-form-el.mysr-form-moyasarForm[payment-form=true] .mysr-form-label, #mysr-form-form-el#mysr-form-form-el#mysr-form-form-el.mysr-form-moyasarForm[payment-form=true] label.mysr-form-label{
    color: #b3b3b3 !important;
}

.active-dark-mode .bg-img-container{
    background-color: #172E23 !important;
    background: #172E23 !important;
    color: #fff !important;
}

.active-dark-mode .carousel .carousel-indicators [data-bs-target]{
    background-color: #595959 !important;
    background: #595959 !important;
}

.active-dark-mode .carousel .carousel-indicators .active{
    background-color: #fff !important;
    background: #fff !important;
}