/* ============================================================
   Washeej Dark Mode Overrides — FULL REWRITE
   Based on deep audit of main.css actual selectors
   Date: 2026-02-21 (v2)
   
   main.css variables swapped in dark mode:
     --white, --black, --body-bg, --body-color, --heading-color,
     --title-color, --section-bg, --section-bg-two, shadows
   
   This file ONLY targets:
     1. Hardcoded hex colors that don't use variables
     2. Selectors where variable swap creates wrong result
   ============================================================ */

/* ========================================
   1. HARDCODED TEXT COLORS
   main.css uses #606576 in many dashboard selectors
======================================== */
[data-theme="dark"] .dashboard__right p,
[data-theme="dark"] .dashboard__right span,
[data-theme="dark"] .dashboard__right label,
[data-theme="dark"] .dashboard__right li div {
    color: hsl(215 20% 70%);
}

[data-theme="dark"] .dashboard .dashboard-body__top .left .text {
    color: hsl(215 20% 75%);
}

[data-theme="dark"] .dashboard .dashboard-body .form--control {
    color: hsl(210 40% 90%);
}

[data-theme="dark"] .dashboard .dashboard-body .form--control[type="password"],
[data-theme="dark"] .dashboard .dashboard-body .form--control[type="password"]:focus {
    color: hsl(210 40% 90%);
}

[data-theme="dark"] .dashboard .dashboard-body .password-show-hide {
    color: hsl(215 20% 70%);
}

/* ========================================
   2. WIDGET GRADIENTS (hardcoded hex + !important)
   main.css: .dashboard .widget-X { background: linear-gradient(to right, #hex, #fff) !important }
======================================== */
[data-theme="dark"] .dashboard .widget-blue {
    background: linear-gradient(135deg, hsl(217 50% 14%), hsl(222 47% 7%)) !important;
}

[data-theme="dark"] .dashboard .widget-purple {
    background: linear-gradient(135deg, hsl(270 40% 14%), hsl(222 47% 7%)) !important;
}

[data-theme="dark"] .dashboard .widget-red {
    background: linear-gradient(135deg, hsl(0 40% 14%), hsl(222 47% 7%)) !important;
}

[data-theme="dark"] .dashboard .widget-green {
    background: linear-gradient(135deg, hsl(142 40% 12%), hsl(222 47% 7%)) !important;
}

[data-theme="dark"] .dashboard .widget-yellow {
    background: linear-gradient(135deg, hsl(48 40% 14%), hsl(222 47% 7%)) !important;
}

[data-theme="dark"] .dashboard .widget-orange {
    background: linear-gradient(135deg, hsl(30 40% 14%), hsl(222 47% 7%)) !important;
}

[data-theme="dark"] .dashboard .widget-pink {
    background: linear-gradient(135deg, hsl(340 40% 14%), hsl(222 47% 7%)) !important;
}

[data-theme="dark"] .dashboard .widget-teal {
    background: linear-gradient(135deg, hsl(180 40% 12%), hsl(222 47% 7%)) !important;
}

[data-theme="dark"] .dashboard .widget-lime {
    background: linear-gradient(135deg, hsl(84 40% 14%), hsl(222 47% 7%)) !important;
}

[data-theme="dark"] .dashboard .widget-cyan {
    background: linear-gradient(135deg, hsl(188 40% 14%), hsl(222 47% 7%)) !important;
}

[data-theme="dark"] .dashboard .widget-indigo {
    background: linear-gradient(135deg, hsl(234 40% 16%), hsl(222 47% 7%)) !important;
}

[data-theme="dark"] .dashboard .widget-brown {
    background: linear-gradient(135deg, hsl(16 20% 14%), hsl(222 47% 7%)) !important;
}

[data-theme="dark"] .dashboard .widget-gray {
    background: linear-gradient(135deg, hsl(220 10% 14%), hsl(222 47% 7%)) !important;
}

[data-theme="dark"] .dashboard .widget-sky {
    background: linear-gradient(135deg, hsl(195 40% 14%), hsl(222 47% 7%)) !important;
}

[data-theme="dark"] .dashboard .widget-rose {
    background: linear-gradient(135deg, hsl(350 40% 14%), hsl(222 47% 7%)) !important;
}

[data-theme="dark"] .dashboard .widget-neon {
    background: linear-gradient(135deg, hsl(142 50% 12%), hsl(222 47% 7%)) !important;
}

/* ========================================
   3. WIDGET ICON COLOR FIX
   main.css line 7980: .dashboard .dashboard-widget__icon { color: hsl(var(--white)) }
   With dark mode --white swap, icon SVG becomes invisible.
   Force white so SVG currentColor stays visible on colored bg.
======================================== */
[data-theme="dark"] .dashboard .dashboard-widget__icon,
[data-theme="dark"] .dashboard .dashboard-widget__icon *,
[data-theme="dark"] .dashboard .dashboard-widget__icon i,
[data-theme="dark"] .dashboard .dashboard-widget__icon i::before,
[data-theme="dark"] .dashboard .dashboard-widget__icon svg,
[data-theme="dark"] .dashboard .dashboard-widget__icon svg path,
[data-theme="dark"] .dashboard .dashboard-widget__icon svg circle,
[data-theme="dark"] .dashboard .dashboard-widget__icon-box,
[data-theme="dark"] .dashboard .dashboard-widget__icon-box *,
[data-theme="dark"] .dashboard .dashboard-widget__icon-box i,
[data-theme="dark"] .dashboard .dashboard-widget__icon-box i::before,
[data-theme="dark"] .dashboard .dashboard-widget__icon-box svg,
[data-theme="dark"] .dashboard .dashboard-widget__icon-box svg path,
[data-theme="dark"] .dashboard .dashboard-widget__icon-box svg circle,
[data-theme="dark"] .dashboard .dashboard-widget__icon-box .dashboard-widget__icon {
    color: #fff !important;
    fill: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* ========================================
   3b. BUTTON ICON COLOR FIX
   Icons inside .btn elements on dashboard appear dark brown in dark mode.
   Force white so they are visible on colored button backgrounds.
======================================== */
[data-theme="dark"] .dashboard .btn i,
[data-theme="dark"] .dashboard .btn i::before,
[data-theme="dark"] .dashboard .btn svg,
[data-theme="dark"] .dashboard .btn svg path {
    color: #fff !important;
    fill: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* ========================================
   3c. PRICING CARD-TWO DARK MODE FIX
   card-two has white bg in light mode, needs dark bg in dark mode
======================================== */
[data-theme="dark"] .pricing-card.card-two {
    background: hsl(222 47% 11%) !important;
    border-color: hsl(222 47% 18%) !important;
}

[data-theme="dark"] .pricing-card.card-two .pricing-list {
    background-color: hsl(222 47% 8%) !important;
}

[data-theme="dark"] .pricing-card.card-two .yearly_price,
[data-theme="dark"] .pricing-card.card-two .monthly_price {
    color: #fff !important;
}

[data-theme="dark"] .pricing-card.card-two .pricing-card__desc {
    color: hsl(210 20% 75%) !important;
}

[data-theme="dark"] .pricing-card.card-two .pricing-card__number {
    border-bottom-color: hsl(222 47% 18%) !important;
}

/* ========================================
   4. TABLE BORDER FIX
   main.css and rtl.css use hardcoded #c1c9d066 for table borders
======================================== */
[data-theme="dark"] .table thead tr th {
    border-color: hsl(222 47% 16%) !important;
}

[data-theme="dark"] .table tbody tr {
    border-bottom-color: hsl(222 47% 16%) !important;
}

[data-theme="dark"] .table tbody tr td {
    border-color: hsl(222 47% 16%) !important;
}

[data-theme="dark"] .table tbody tr td .name {
    color: hsl(210 40% 93%);
}

/* ========================================
   5. EMPTY STATE FIX
   empty_message.blade.php: <tr class="empty-message-row"><td><div class="py-5">
======================================== */
[data-theme="dark"] .empty-message-row td {
    background-color: hsl(222 47% 7%) !important;
}

[data-theme="dark"] .empty-message-row .d-block {
    color: hsl(215 20% 65%) !important;
}

[data-theme="dark"] .empty-message-row .text-muted {
    color: hsl(215 20% 50%) !important;
}

/* ========================================
   6. SIDEBAR HOVER/ACTIVE STATE FIX
   main.css uses hsl(var(--body-color)) as bg for active/hover.
   With dark mode --body-color swap to light gray, this becomes too bright.
======================================== */
[data-theme="dark"] .dashboard .sidebar-menu-list__item.active > a {
    background-color: hsl(222 47% 14%);
    color: hsl(210 40% 98%);
}

[data-theme="dark"] .dashboard .sidebar-menu-list__link:hover {
    background-color: hsl(222 47% 12%);
    color: hsl(210 40% 98%);
}

[data-theme="dark"] .dashboard .sidebar-menu-list__item.has-dropdown.active > a {
    color: hsl(210 40% 98%);
}

[data-theme="dark"] .dashboard .sidebar-menu-list__item.has-dropdown.active > a:after {
    color: hsl(210 40% 98%);
}

[data-theme="dark"] .dashboard .sidebar-submenu-list__item.active > a {
    color: hsl(210 40% 98%);
    background-color: hsl(222 47% 16%);
}

[data-theme="dark"] .dashboard .sidebar-submenu-list__link {
    color: hsl(215 20% 65%);
}

[data-theme="dark"] .dashboard .sidebar-submenu-list__link:hover {
    background-color: hsl(222 47% 14%);
    color: hsl(210 40% 98%);
}

[data-theme="dark"] .dashboard .sidebar-submenu-list__link::before {
    border-color: hsl(215 20% 45%);
}

[data-theme="dark"] .dashboard .sidebar-submenu-list__link:hover::before {
    border-color: hsl(210 40% 98%);
}

[data-theme="dark"] .sidebar-menu-list__title {
    color: hsl(215 20% 45%);
}

/* ========================================
   7. DASHBOARD HEADER FIX
   main.css: .dashboard .dashboard-header { background-color: hsl(var(--base-d-400)) }
   --base-d-400 = dark green, fine. But user-info__name uses --heading-color.
======================================== */
[data-theme="dark"] .dashboard .user-info__name {
    color: hsl(210 40% 95%);
}

/* ========================================
   8. FORM CONTROLS (Global)
   main.css uses hardcoded #606576 for form colors
======================================== */
[data-theme="dark"] .form--control,
[data-theme="dark"] .form-control {
    background-color: hsl(222 47% 10%) !important;
    border-color: hsl(222 47% 18%) !important;
    color: hsl(210 40% 90%) !important;
}

[data-theme="dark"] .form--control:focus,
[data-theme="dark"] .form-control:focus {
    background-color: hsl(222 47% 12%) !important;
    border-color: hsl(var(--base-d-100)) !important;
}

[data-theme="dark"] .form--control::placeholder,
[data-theme="dark"] .form-control::placeholder {
    color: hsl(215 20% 45%) !important;
}

[data-theme="dark"] .dashboard .form--control.message-input {
    background-color: unset !important;
    color: hsl(210 40% 90%) !important;
}

/* Select2 */
[data-theme="dark"] .select2-container--default .select2-selection--single {
    background-color: hsl(222 47% 10%) !important;
    border-color: hsl(222 47% 18%) !important;
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: hsl(210 40% 90%) !important;
}

[data-theme="dark"] .select2-dropdown {
    background-color: hsl(222 47% 11%) !important;
    border-color: hsl(222 47% 18%) !important;
}

[data-theme="dark"] .select2-search .select2-search__field {
    background-color: hsl(222 47% 10%) !important;
    color: hsl(210 40% 90%) !important;
    border-color: hsl(222 47% 18%) !important;
}

[data-theme="dark"] .select2-results__option--highlighted[aria-selected] {
    background-color: hsl(222 47% 16%) !important;
}

/* ========================================
   9. BUTTONS
   main.css: .btn { color: hsl(var(--dark)) !important } — dark text on light bg
   In dark mode --dark stays same (dark), need light text
======================================== */
[data-theme="dark"] .btn {
    color: hsl(210 40% 90%) !important;
}

[data-theme="dark"] .btn--base {
    color: hsl(0 0% 100%) !important;
}

[data-theme="dark"] .btn--info {
    color: hsl(0 0% 100%) !important;
}

[data-theme="dark"] .btn--dark {
    background-color: hsl(222 47% 14%) !important;
    color: hsl(210 40% 95%) !important;
}

[data-theme="dark"] .btn-outline--base:hover,
[data-theme="dark"] .btn-outline--base:focus {
    color: hsl(0 0% 100%) !important;
}

/* ========================================
   10. ALERTS (KYC alerts in dashboard)
   main.css: .alert--danger, .alert--info, .alert--warning
======================================== */
[data-theme="dark"] .alert {
    border-color: hsl(222 47% 18%);
}

[data-theme="dark"] .alert__content p {
    color: hsl(215 20% 70%) !important;
}

[data-theme="dark"] .alert__title {
    color: hsl(210 40% 95%) !important;
}

/* ========================================
   11. TRANSACTION TABLE + DASHBOARD TABLE
   main.css: .transaction-table { background-color: hsl(var(--white)) } — auto-fixed by var swap
   But .transaction-table-inner h6 needs proper color
======================================== */
[data-theme="dark"] .transaction-table-inner h6 {
    color: hsl(210 40% 95%) !important;
}

[data-theme="dark"] .dashboard-table {
    border-radius: 6px;
    overflow: hidden;
}

/* ========================================
   12. MODAL DARK MODE
======================================== */
[data-theme="dark"] .custom--modal .modal-content {
    background-color: hsl(222 47% 9%) !important;
    border-color: hsl(222 47% 16%) !important;
}

[data-theme="dark"] .custom--modal .modal-header {
    border-bottom-color: hsl(222 47% 16%) !important;
}

[data-theme="dark"] .custom--modal .modal-header .modal-title {
    color: hsl(210 40% 95%) !important;
}

[data-theme="dark"] .custom--modal .modal-body p {
    color: hsl(215 20% 70%) !important;
}

/* ========================================
   13. SCROLLBAR
======================================== */
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: hsl(222 47% 6%);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: hsl(222 47% 18%);
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: hsl(222 47% 25%);
}

/* ========================================
   14. PAGINATION
   main.css: .pagination .page-item.disabled .page-link { background: hsl(var(--dark) / 0.2) }
======================================== */
[data-theme="dark"] .page-link {
    background-color: hsl(222 47% 10%) !important;
    border-color: hsl(222 47% 18%) !important;
    color: hsl(215 20% 65%) !important;
}

[data-theme="dark"] .page-item.active .page-link {
    color: hsl(0 0% 100%) !important;
}

/* ========================================
   15. TAB NAV
======================================== */
[data-theme="dark"] .nav-tabs {
    border-bottom-color: hsl(222 47% 16%) !important;
}

[data-theme="dark"] .nav-tabs .nav-link {
    color: hsl(215 20% 60%) !important;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: hsl(222 47% 10%) !important;
    border-color: hsl(222 47% 16%) !important;
    color: hsl(210 40% 95%) !important;
}

[data-theme="dark"] .custom--tab .nav-item .nav-link {
    color: hsl(215 20% 60%) !important;
}

[data-theme="dark"] .custom--tab .nav-item .nav-link.active {
    color: hsl(0 0% 100%) !important;
}

/* ========================================
   16. BADGE DARK
   main.css: .badge--dark { background-color: hsl(var(--dark) / 0.15); color: hsl(var(--dark)) }
======================================== */
[data-theme="dark"] .badge--dark {
    background-color: hsl(222 47% 18%) !important;
    color: hsl(210 40% 90%) !important;
}

/* ========================================
   17. BREADCRUMB
======================================== */
[data-theme="dark"] .breadcrumb-section {
    background-color: hsl(222 47% 6%) !important;
}

/* ========================================
   18. FEATURE ITEM ICON FIX
   main.css: .feature-item__icon { color: hsl(var(--dark)); background-color: hsl(var(--base-two)) }
   --dark stays dark → invisible on dark bg. --base-two stays light green.
======================================== */
[data-theme="dark"] .feature-item__icon {
    color: hsl(222 47% 7%) !important;
}

[data-theme="dark"] .feature-item__icon svg {
    fill: hsl(222 47% 7%) !important;
    stroke: hsl(222 47% 7%) !important;
}

/* ============================================================
   FRONTEND (Visitor-Facing) DARK MODE
   Overrides for hardcoded colors on the public-facing pages
   ============================================================ */

/* Header */
[data-theme="dark"] .header {
    background-color: hsl(224 71% 5%) !important;
}

@media screen and (max-width: 991px) {
    [data-theme="dark"] .header {
        background-color: hsl(224 71% 4%) !important;
    }
}

/* Banner */
[data-theme="dark"] .banner-section::after {
    background: hsl(var(--base-d-300));
}

/* Footer */
[data-theme="dark"] .footer-area {
    background-color: hsl(222 47% 5%) !important;
}

[data-theme="dark"] .footer-menu__link {
    color: hsl(215 20% 70%);
}

[data-theme="dark"] .footer-menu__link:hover {
    color: hsl(var(--base));
}

[data-theme="dark"] .footer-contact-menu__item-content a {
    color: hsl(215 20% 70%);
}

/* Section backgrounds */
[data-theme="dark"] section {
    background-color: hsl(224 71% 4%);
}

[data-theme="dark"] .bg--section,
[data-theme="dark"] .bg-white {
    background-color: hsl(222 47% 7%) !important;
}

/* Pricing Cards */
[data-theme="dark"] .pricing-card,
[data-theme="dark"] .pricing-item {
    background-color: hsl(222 47% 8%) !important;
    border-color: hsl(222 47% 16%) !important;
}

/* FAQ / Accordion */
[data-theme="dark"] .custom--accordion .accordion-item {
    background-color: hsl(222 47% 8%) !important;
    border-color: hsl(222 47% 16%) !important;
}

[data-theme="dark"] .custom--accordion .accordion-button {
    background-color: hsl(222 47% 8%) !important;
    color: hsl(210 40% 95%) !important;
}

[data-theme="dark"] .custom--accordion .accordion-button:not(.collapsed) {
    background-color: hsl(222 47% 11%) !important;
}

[data-theme="dark"] .custom--accordion .accordion-body {
    color: hsl(215 20% 70%) !important;
}

/* Feature cards */
[data-theme="dark"] .feature-card,
[data-theme="dark"] .feature-item {
    background-color: hsl(222 47% 8%) !important;
    border-color: hsl(222 47% 16%) !important;
}

/* Testimonials */
[data-theme="dark"] .testimonial-item,
[data-theme="dark"] .testimonial-card {
    background-color: hsl(222 47% 8%) !important;
    border-color: hsl(222 47% 16%) !important;
}

/* Blog cards */
[data-theme="dark"] .blog-card,
[data-theme="dark"] .blog-item {
    background-color: hsl(222 47% 8%) !important;
    border-color: hsl(222 47% 16%) !important;
}

/* Auth pages */
[data-theme="dark"] .login-form,
[data-theme="dark"] .register-form,
[data-theme="dark"] .auth-form {
    background-color: hsl(222 47% 8%) !important;
    border-color: hsl(222 47% 16%) !important;
}

/* Contact page */
[data-theme="dark"] .contact-info-item {
    background-color: hsl(222 47% 8%) !important;
    border-color: hsl(222 47% 16%) !important;
}

/* How it works */
[data-theme="dark"] .how-it-work-item,
[data-theme="dark"] .work-item {
    background-color: hsl(222 47% 8%) !important;
    border-color: hsl(222 47% 16%) !important;
}

/* CTA section */
[data-theme="dark"] .cta-section {
    background-color: hsl(222 47% 6%) !important;
}

/* ========================================
   19. CHATBOX / INBOX DARK MODE
======================================== */
[data-theme="dark"] .chatbox-area__left .chatbody .chat-list__item.active,
[data-theme="dark"] .chatbox-area__left .chatbody .chat-list__item:hover {
    background-color: hsl(222 47% 12%);
}

[data-theme="dark"] .chatbox-area__left .chatbody .chat-list:has(.empty-message) {
    color: hsl(215 20% 55%);
}

/* ========================================
   20. VERIFICATION CODE
   main.css: .verification-code .boxes span { background: hsl(var(--dark) / 0.1) }
======================================== */
[data-theme="dark"] .verification-code .boxes span {
    background: hsl(222 47% 12%) !important;
    border-color: hsl(222 47% 18%) !important;
    color: hsl(210 40% 95%) !important;
}

/* ========================================
   21a. MODAL TEXT (#606576)
   main.css: .custom--modal p, span, li div { color: #606576 }
======================================== */
[data-theme="dark"] .custom--modal p,
[data-theme="dark"] .custom--modal span,
[data-theme="dark"] .custom--modal li div {
    color: hsl(215 20% 70%) !important;
}

[data-theme="dark"] .custom--modal .modal-header__left .text {
    color: hsl(215 20% 65%) !important;
}

/* ========================================
   21b. ACTION BUTTONS + FORM LABELS (#606576)
======================================== */
[data-theme="dark"] .action-btn {
    color: hsl(215 20% 65%) !important;
}

[data-theme="dark"] .form--label.label-two {
    color: hsl(215 20% 70%) !important;
}

/* ========================================
   21c. CUSTOM TABS (#606576 text)
   main.css: .custom--tab.tab-two/three .nav-link { color: #606576 }
======================================== */
[data-theme="dark"] .custom--tab.tab-two .nav-item .nav-link {
    color: hsl(215 20% 60%) !important;
    background-color: hsl(222 47% 12%) !important;
}

[data-theme="dark"] .custom--tab.tab-two .nav-item .nav-link.active {
    color: hsl(0 0% 100%) !important;
}

[data-theme="dark"] .custom--tab.tab-three .nav-item .nav-link {
    color: hsl(215 20% 60%) !important;
}

[data-theme="dark"] .custom--tab.tab-three .nav-item .nav-link.active {
    color: hsl(210 40% 95%) !important;
}

[data-theme="dark"] .tab-icon {
    color: hsl(215 20% 55%) !important;
}

/* ========================================
   21d. CHATBOX AREA (#606576 text)
======================================== */
[data-theme="dark"] .chatbox-area__left .chatbody .chat-list__content .text,
[data-theme="dark"] .chatbox-area__left .chatbody .chat-list__content .right .time {
    color: hsl(215 20% 55%) !important;
}

[data-theme="dark"] .chatbox-area__body .body-right .profile-details__top .text,
[data-theme="dark"] .chatbox-area__body .body-right .profile-details__top .text .link {
    color: hsl(215 20% 65%) !important;
}

[data-theme="dark"] .chatbox-area__body .body-right .profile-details__tab .details-content__text {
    color: hsl(215 20% 65%) !important;
}

[data-theme="dark"] .chatbox-area__body .chat-box__content .text,
[data-theme="dark"] .chatbox-area__body .chat-box__content .right .time {
    color: hsl(215 20% 55%) !important;
}

[data-theme="dark"] .note-wrapper__form .form--label {
    color: hsl(215 20% 70%) !important;
}

[data-theme="dark"] .note-wrapper .output .icon,
[data-theme="dark"] .note-wrapper .output .date {
    color: hsl(215 20% 55%) !important;
}

/* ========================================
   21e. SEARCH PLACEHOLDERS
======================================== */
[data-theme="dark"] .dashboard .search-form .form--control::placeholder,
[data-theme="dark"] .chatbox-area__left .chatbox-wrapper__header .search-form .form--control::placeholder,
[data-theme="dark"] .input-area .form--control::placeholder,
[data-theme="dark"] .note-wrapper__form .form--control::placeholder {
    color: hsl(215 20% 40%) !important;
}

[data-theme="dark"] .chatbox-area__left .chatbox-wrapper__header .search-form__icon {
    color: hsl(215 20% 45%) !important;
}

/* ========================================
   21f. CONTACT ITEM (#606576)
======================================== */
[data-theme="dark"] .contact-item__desc {
    color: hsl(215 20% 65%) !important;
}

/* ========================================
   21. PROFILE TAB BAR (Settings pages)
   main.css: .profile-page-wrapper { background-color: hsl(var(--white)); border-bottom: 1px solid #c1c9d066 }
======================================== */
[data-theme="dark"] .profile-page-wrapper {
    border-bottom-color: hsl(222 47% 16%) !important;
}

[data-theme="dark"] .profile-page-wrapper .profile-list__link {
    color: hsl(215 20% 65%) !important;
}

[data-theme="dark"] .profile-page-wrapper .profile-list__link.active {
    color: hsl(210 40% 95%) !important;
}

[data-theme="dark"] .profile-page-wrapper .profile-list__link.active::after {
    background-color: hsl(var(--base)) !important;
}

[data-theme="dark"] .profile-page-wrapper .profile-list__link:hover {
    color: hsl(210 40% 95%) !important;
}

[data-theme="dark"] .profile-page-wrapper .profile-list__link .profile-list__icon {
    color: hsl(215 20% 55%) !important;
}

[data-theme="dark"] .profile-page-wrapper .profile-list__link.active .profile-list__icon,
[data-theme="dark"] .profile-page-wrapper .profile-list__link:hover .profile-list__icon {
    color: hsl(210 40% 95%) !important;
}

/* ========================================
   22. FILTER TABS (WhatsApp accounts page)
   Inline styles use hardcoded light colors
======================================== */
[data-theme="dark"] .filter-tab {
    background-color: hsl(222 47% 12%) !important;
    color: hsl(215 20% 65%) !important;
    border-color: hsl(222 47% 18%) !important;
}

[data-theme="dark"] .filter-tab:hover {
    background-color: hsl(222 47% 16%) !important;
    color: hsl(210 40% 90%) !important;
}

[data-theme="dark"] .filter-tab.active {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important;
    color: #fff !important;
}

[data-theme="dark"] .filter-tab .badge {
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .filter-tab.active .badge {
    background: rgba(255, 255, 255, 0.25) !important;
}

/* ========================================
   23. DASHBOARD CONTAINER-TOP
   main.css: .container-top__desc { color: #606576 }
   .container-top__title { color: hsl(var(--title-color)) }
======================================== */
[data-theme="dark"] .dashboard-container .container-top__desc {
    color: hsl(215 20% 65%) !important;
}

[data-theme="dark"] .dashboard-container .container-top__title {
    color: hsl(210 40% 95%) !important;
}

/* ========================================
   24. TRANSACTION TABLE HEADING
======================================== */
[data-theme="dark"] .transaction-table-inner h6,
[data-theme="dark"] .dashboard-table__title {
    color: hsl(210 40% 95%) !important;
}

/* ========================================
   25. DASHBOARD BODY HEADER TITLE
   main.css: .dashboard-header__left .title { color: hsl(var(--body-color)) }
======================================== */
[data-theme="dark"] .dashboard .dashboard-header__left .title {
    color: hsl(215 20% 80%) !important;
}

/* ========================================
   26. USER INFO DROPDOWN
======================================== */
[data-theme="dark"] .user-info-dropdown {
    background-color: hsl(222 47% 9%) !important;
    border-color: hsl(222 47% 16%) !important;
}

[data-theme="dark"] .user-info-dropdown__link {
    color: hsl(215 20% 70%) !important;
}

[data-theme="dark"] .user-info-dropdown__link:hover {
    background-color: hsl(222 47% 12%) !important;
    color: hsl(210 40% 95%) !important;
}

[data-theme="dark"] .user-info__desc {
    color: hsl(215 20% 55%) !important;
}

/* ========================================
   RTL DARK MODE WIDGET GRADIENTS
   Use 'to left' direction for RTL layouts
======================================== */
[dir="rtl"][data-theme="dark"] .dashboard .widget-blue {
    background: linear-gradient(225deg, hsl(217 50% 14%), hsl(222 47% 7%)) !important;
}

[dir="rtl"][data-theme="dark"] .dashboard .widget-purple {
    background: linear-gradient(225deg, hsl(270 40% 14%), hsl(222 47% 7%)) !important;
}

[dir="rtl"][data-theme="dark"] .dashboard .widget-red {
    background: linear-gradient(225deg, hsl(0 40% 14%), hsl(222 47% 7%)) !important;
}

[dir="rtl"][data-theme="dark"] .dashboard .widget-green {
    background: linear-gradient(225deg, hsl(142 40% 12%), hsl(222 47% 7%)) !important;
}

[dir="rtl"][data-theme="dark"] .dashboard .widget-yellow {
    background: linear-gradient(225deg, hsl(48 40% 14%), hsl(222 47% 7%)) !important;
}

[dir="rtl"][data-theme="dark"] .dashboard .widget-orange {
    background: linear-gradient(225deg, hsl(30 40% 14%), hsl(222 47% 7%)) !important;
}

[dir="rtl"][data-theme="dark"] .dashboard .widget-pink {
    background: linear-gradient(225deg, hsl(340 40% 14%), hsl(222 47% 7%)) !important;
}

[dir="rtl"][data-theme="dark"] .dashboard .widget-teal {
    background: linear-gradient(225deg, hsl(180 40% 12%), hsl(222 47% 7%)) !important;
}

[dir="rtl"][data-theme="dark"] .dashboard .widget-lime {
    background: linear-gradient(225deg, hsl(84 40% 14%), hsl(222 47% 7%)) !important;
}

[dir="rtl"][data-theme="dark"] .dashboard .widget-cyan {
    background: linear-gradient(225deg, hsl(188 40% 14%), hsl(222 47% 7%)) !important;
}

[dir="rtl"][data-theme="dark"] .dashboard .widget-indigo {
    background: linear-gradient(225deg, hsl(234 40% 16%), hsl(222 47% 7%)) !important;
}

[dir="rtl"][data-theme="dark"] .dashboard .widget-brown {
    background: linear-gradient(225deg, hsl(16 20% 14%), hsl(222 47% 7%)) !important;
}

[dir="rtl"][data-theme="dark"] .dashboard .widget-gray {
    background: linear-gradient(225deg, hsl(220 10% 14%), hsl(222 47% 7%)) !important;
}

[dir="rtl"][data-theme="dark"] .dashboard .widget-sky {
    background: linear-gradient(225deg, hsl(195 40% 14%), hsl(222 47% 7%)) !important;
}

[dir="rtl"][data-theme="dark"] .dashboard .widget-rose {
    background: linear-gradient(225deg, hsl(350 40% 14%), hsl(222 47% 7%)) !important;
}

[dir="rtl"][data-theme="dark"] .dashboard .widget-neon {
    background: linear-gradient(225deg, hsl(142 50% 12%), hsl(222 47% 7%)) !important;
}

/* ========================================
   RTL LIGHT MODE WIDGET GRADIENTS
   main.css uses 'to right' — flip for RTL
======================================== */
[dir="rtl"] .dashboard .widget-blue {
    background: linear-gradient(to left, #e0f0ffb8, #fff) !important;
}

[dir="rtl"] .dashboard .widget-purple {
    background: linear-gradient(to left, #f5f0ff, #fff) !important;
}

[dir="rtl"] .dashboard .widget-red {
    background: linear-gradient(to left, #ffe0e082, #fff) !important;
}

[dir="rtl"] .dashboard .widget-green {
    background: linear-gradient(to left, #e0ffe9b8, #fff) !important;
}

[dir="rtl"] .dashboard .widget-yellow {
    background: linear-gradient(to left, #fffde7, #fff) !important;
}

[dir="rtl"] .dashboard .widget-orange {
    background: linear-gradient(to left, #fff3e0, #fff) !important;
}

[dir="rtl"] .dashboard .widget-pink {
    background: linear-gradient(to left, #ffe4e6, #fff) !important;
}

[dir="rtl"] .dashboard .widget-teal {
    background: linear-gradient(to left, #e0fafa, #fff) !important;
}

[dir="rtl"] .dashboard .widget-lime {
    background: linear-gradient(to left, #ecfccb, #fff) !important;
}

[dir="rtl"] .dashboard .widget-cyan {
    background: linear-gradient(to left, #cffafe, #fff) !important;
}

[dir="rtl"] .dashboard .widget-indigo {
    background: linear-gradient(to left, #e0e7ff, #fff) !important;
}

[dir="rtl"] .dashboard .widget-brown {
    background: linear-gradient(to left, #efebe9, #fff) !important;
}

[dir="rtl"] .dashboard .widget-gray {
    background: linear-gradient(to left, #f3f4f6, #fff) !important;
}

[dir="rtl"] .dashboard .widget-sky {
    background: linear-gradient(to left, #e0f7fa, #fff) !important;
}

[dir="rtl"] .dashboard .widget-rose {
    background: linear-gradient(to left, #ffe4e6, #fff) !important;
}

[dir="rtl"] .dashboard .widget-neon {
    background: linear-gradient(to left, #e0ffe8, #fff) !important;
}