/* Premium Dark Mode Styles */
:root {
    color-scheme: dark;
    --dm-bg: #0f172a; /* Slate 900 */
    --dm-surface: #1e293b; /* Slate 800 */
    --dm-surface-hover: #334155; /* Slate 700 */
    --dm-text-primary: #f8fafc; /* Slate 50 */
    --dm-text-secondary: #94a3b8; /* Slate 400 */
    --dm-border: #334155; /* Slate 700 */
    --dm-accent: #3b82f6; /* Blue 500 */
}

/* Base Body Styles */
html.dark-mode body {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode body .wrapper {
    background-color: var(--dm-bg) !important;
}

/* Texts and Headings */
html.dark-mode body h1, html.dark-mode body h2, html.dark-mode body h3, html.dark-mode body h4, html.dark-mode body h5, html.dark-mode body h6,
html.dark-mode body p, html.dark-mode body span, html.dark-mode body div, html.dark-mode body a {
    color: var(--dm-text-primary);
}

html.dark-mode body p, html.dark-mode body span, html.dark-mode body .text-muted {
    color: var(--dm-text-secondary) !important;
}

/* Modals & Popups */
html.dark-mode body .modal-content, 
html.dark-mode body .hifz-modal-content {
    background-color: var(--dm-surface) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode body .hifz-modal-content h3 {
    color: var(--dm-text-primary) !important;
}

html.dark-mode body .hifz-modal-content label {
    color: var(--dm-text-secondary) !important;
}

html.dark-mode body .hifz-input-group input,
html.dark-mode body .hifz-input-group select {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

/* Ayat Containers */
html.dark-mode body .full-detail-description > div {
    background-color: var(--dm-surface) !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

html.dark-mode body .arabic_text {
    color: var(--dm-text-primary) !important;
}

/* Dropdowns & Selects */
html.dark-mode body .dropdown-menu {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode body .dropdown-menu > li > a {
    color: var(--dm-text-primary) !important;
}

html.dark-mode body .dropdown-menu > li > a:hover {
    background-color: var(--dm-surface-hover) !important;
}

/* Dark Mode Toggle Button */
.dark-mode-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    z-index: 1000;
    color: inherit; /* Ensure button inherits color from navbar context */
}

/* Mobile Toggle - Absolutely Positioned */
.mobile-theme-icon {
    position: absolute;
    right: 110px;
    top: 19px;
    float: none;
    margin: 0px;
}

/* Desktop Toggle - Flexbox / List Item */
.desktop-theme-icon {
    display: flex;
    align-items: center;
    height: 100%;
}
.desktop-theme-icon .dark-mode-toggle {
    margin-top: 5px;
    margin-right: 10px;
    margin-left: 10px;
}

.dark-mode-toggle svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
    /* By not forcing color, it will inherit from the navbar, which naturally handles light/dark transitions on scroll */
}

.dark-mode-toggle:hover svg {
    transform: rotate(15deg);
}

html.dark-mode body .dark-mode-toggle .moon-icon {
    display: none;
}
html:not(.dark-mode) body .dark-mode-toggle .sun-icon {
    display: none;
}

/* If Navbar turns white on scroll, keep icons visible */
html.dark-mode body .navbar.white.navbar-transparent.nav-scrolled .dark-mode-toggle svg,
html.dark-mode body .navbar.white.navbar-transparent.nav-scrolled .user-avatar-mobile svg,
html.dark-mode body .navbar.white.navbar-transparent.nav-scrolled .open_side_bar svg {
    color: var(--dm-text-primary);
}

/* Hide desktop toggle on mobile */
@media (max-width: 767px) {
    .desktop-theme-icon {
        display: none !important;
    }
}
/* Hide mobile toggle on desktop */
@media (min-width: 768px) {
    .mobile-theme-icon {
        display: none !important;
    }
}

/* Sura Detail Page Fixes */
html.dark-mode body .brows-job-list,
html.dark-mode body .side-widget,
html.dark-mode body table.browse,
html.dark-mode body table.browse td,
html.dark-mode body table.browse th,
html.dark-mode body .detail.pannel-footer,
html.dark-mode body .search-form,
html.dark-mode body .detail-desc,
html.dark-mode body .gray-bg,
html.dark-mode body .white-shadow,
html.dark-mode body .advance-detail,
html.dark-mode body .advance-detail-pr {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

/* Ensure columns and sections don't block the dark body background */
html.dark-mode body .container,
html.dark-mode body .row,
html.dark-mode body .col-md-9,
html.dark-mode body .col-sm-12,
html.dark-mode body section.brows-job-category,
html.dark-mode body section.detail-desc,
html.dark-mode body section.detail-desc .white-shadow,
html.dark-mode body section.detail-desc .gray-bg {
    background-color: transparent !important;
    background: transparent !important;
}

/* Form Controls & Selects */
html.dark-mode body .form-control,
html.dark-mode body .selectpicker,
html.dark-mode body .bootstrap-select > .dropdown-toggle {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode body .bootstrap-select .dropdown-menu {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode body .bootstrap-select .dropdown-menu li a {
    color: var(--dm-text-primary) !important;
}

html.dark-mode body table.browse td {
    border-color: var(--dm-border) !important;
}

html.dark-mode body .brows-job-list .ar,
html.dark-mode body .brows-job-list .ur,
html.dark-mode body .brows-job-list .en,
html.dark-mode body .brows-job-list .en_g,
html.dark-mode body .brows-job-list .tr,
html.dark-mode body .brows-job-list h5 {
    color: var(--dm-text-primary) !important;
}

html.dark-mode body h1#main_heading,
html.dark-mode body .center h5,
html.dark-mode body .side-widget h2,
html.dark-mode body .side-widget h4,
html.dark-mode body .side-widget a {
    color: var(--dm-text-primary) !important;
}

/* Pagination */
html.dark-mode body .pagination > li > a, 
html.dark-mode body .pagination > li > span {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}
html.dark-mode body .pagination > li > a:hover {
    background-color: var(--dm-surface-hover) !important;
}

/* Bismillah Text and Image */
html.dark-mode body .bismillah {
    color: var(--dm-text-primary) !important;
}

html.dark-mode body .center img[src*="bismillah"] {
    filter: invert(1) brightness(1.5) contrast(1.2);
}

/* Top Navbar Fixes */
html.dark-mode body nav.navbar,
html.dark-mode body .navbar-default,
html.dark-mode body .navbar.white,
html.dark-mode body .navbar-fixed {
    background-color: var(--dm-bg) !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

/* Navbar Links */
html.dark-mode body .navbar-nav > li > a,
html.dark-mode body .navbar-nav > li.dropdown > a.dropdown-toggle {
    color: var(--dm-text-primary) !important;
}

html.dark-mode body .navbar-nav > li > a:hover,
html.dark-mode body .navbar-nav > li.dropdown.open > a.dropdown-toggle {
    color: var(--dm-accent) !important;
}

/* Apps Dropdown Menu */
html.dark-mode body .navbar .dropdown-menu {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}
html.dark-mode body .navbar .dropdown-menu li a {
    color: var(--dm-text-primary) !important;
}
html.dark-mode body .navbar .dropdown-menu li a:hover {
    background-color: var(--dm-bg) !important;
}

/* Swap Logos */
html.dark-mode body .navbar .logo.logo-display {
    display: none !important;
}
html.dark-mode body .navbar .logo.logo-scrolled {
    display: inline-block !important;
}

/* Navbar Icons */
html.dark-mode body .navbar .user-avatar-mobile svg,
html.dark-mode body .navbar .open_side_bar,
html.dark-mode body .navbar .feather-user {
    color: var(--dm-text-primary) !important;
}

/* Search Area Adjustments */
html.dark-mode body .nav-language-split select,
html.dark-mode body .nav-language-split input {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

/* Homepage Fixes */
html.dark-mode body .first-feature {
    background-color: var(--dm-bg) !important;
    background: var(--dm-bg) !important;
}

html.dark-mode body .main-heading span b,
html.dark-mode body .main-heading a,
html.dark-mode body .main-heading p,
html.dark-mode body .main-heading h2,
html.dark-mode body .main-heading span {
    color: var(--dm-text-primary) !important;
}

html.dark-mode body .surah a:hover {
    background-color: var(--dm-surface) !important;
}

/* Ensure no child elements display a white box on hover */
html.dark-mode body .surah a:hover > div,
html.dark-mode body .surah a:hover span,
html.dark-mode body .surah a:hover .en-font {
    background-color: transparent !important;
}

html.dark-mode body .surah .text-muted {
    color: var(--dm-text-secondary) !important;
}

/* Homepage Tabs */
html.dark-mode body .nav-tabs {
    border-bottom: 1px solid var(--dm-border) !important;
}
html.dark-mode body .nav-tabs > li > a {
    border-color: transparent !important;
    background-color: transparent !important;
}
html.dark-mode body .nav-tabs > li.active > a,
html.dark-mode body .nav-tabs > li.active > a:hover,
html.dark-mode body .nav-tabs > li.active > a:focus {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) var(--dm-border) transparent !important;
    color: var(--dm-text-primary) !important;
}
html.dark-mode body .nav-tabs h3 {
    color: var(--dm-text-primary) !important;
}

/* Testimonials / Dignitaries Section */
html.dark-mode body .testimonial {
    background-color: transparent !important;
    background: transparent !important;
}

html.dark-mode body .client-testimonial {
    background-color: var(--dm-surface) !important;
    border: 1px solid var(--dm-border) !important;
    box-shadow: none !important;
}

html.dark-mode body .client-testimonial p,
html.dark-mode body .client-testimonial-title,
html.dark-mode body .client-testimonial a {
    color: var(--dm-text-primary) !important;
}

/* App Download Section */
html.dark-mode body .download-app {
    background-color: var(--dm-bg) !important;
    background: var(--dm-bg) !important;
    border-top: 1px solid var(--dm-border) !important;
}

html.dark-mode body .download-app h2,
html.dark-mode body .download-app h3,
html.dark-mode body .download-app p {
    color: var(--dm-text-primary) !important;
}

html.dark-mode body .download-app .call-btn {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text-primary) !important;
    border: 1px solid var(--dm-border) !important;
}

html.dark-mode body .download-app .call-btn:hover {
    background-color: var(--dm-surface-hover) !important;
}

/* Hero Banner Background Image Optimization */
html.dark-mode body .banner {
    /* Overlaying the red pattern with a 90% opaque dark slate gradient */
    background-image: linear-gradient(rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.9)), url('/images/slider.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
}

/* ========================================= */
/* Inner Pages & Deep Screens Optimization  */
/* ========================================= */

/* Grid Components (.pr-card, .pr-Questions) */
html.dark-mode body .pr-card,
html.dark-mode body .pr-Questions {
    background-color: var(--dm-surface) !important;
    background: var(--dm-surface) !important;
    border: 1px solid var(--dm-border) !important;
    box-shadow: none !important;
}

html.dark-mode body .pr-card:hover,
html.dark-mode body .pr-Questions:hover {
    border-color: var(--dm-accent) !important;
    background-color: var(--dm-surface-hover) !important;
    border-left: 1px solid var(--dm-accent) !important;
}

/* Fix static red texts to white, hover to accent */
html.dark-mode body .pr-header h3,
html.dark-mode body .pr-Questions h3,
html.dark-mode body .title a,
html.dark-mode body .title {
    color: var(--dm-text-primary) !important;
}

html.dark-mode body .pr-card:hover h3,
html.dark-mode body .pr-Questions:hover h3 {
    color: var(--dm-accent) !important;
}

/* Number badges */
html.dark-mode body .pr-Questions .badge {
    background-color: var(--dm-accent) !important;
    color: var(--dm-text-primary) !important;
}

/* Search & Pagination inline style overrides */
html.dark-mode body .pagination li:first-child a,
html.dark-mode body .pagination li a {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode body .pagination li:first-child a:hover,
html.dark-mode body .pagination li a:hover {
    background-color: var(--dm-surface-hover) !important;
    color: var(--dm-accent) !important;
    border-color: var(--dm-accent) !important;
}

/* Article & Blog Layouts */
html.dark-mode body .blog-news,
html.dark-mode body .full-blog,
html.dark-mode body .blog-text,
html.dark-mode body .blog-content {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text-primary) !important;
    border: none !important;
    box-shadow: none !important;
}

html.dark-mode body .blog-text h1,
html.dark-mode body .blog-text h2,
html.dark-mode body .blog-text h3,
html.dark-mode body .blog-text p {
    color: var(--dm-text-primary) !important;
}

/* Generic View Wrappers */
html.dark-mode body .inner-header-title,
html.dark-mode body section.section,
html.dark-mode body .full-detail-description {
    background-color: transparent !important;
    background: transparent !important;
}

html.dark-mode body .inner-header-title h1 {
    color: var(--dm-text-primary) !important;
}

/* Qurani Duain Page Optimization */
html.dark-mode body .duas-root {
    background: transparent !important;
    background-color: transparent !important;
    --dq-bg: var(--dm-bg) !important;
    --dq-card-bg: var(--dm-surface) !important;
    --dq-text: var(--dm-text-primary) !important;
    --dq-primary: var(--dm-text-primary) !important;
    --dq-muted: var(--dm-text-secondary) !important;
    --dq-border: var(--dm-border) !important;
}

html.dark-mode body .dq-section-box {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode body .dq-section-box h2,
html.dark-mode body .dq-section-box p {
    color: var(--dm-text-primary) !important;
}

html.dark-mode body .faq-question {
    color: var(--dm-text-primary) !important;
}

html.dark-mode body .faq-question:hover {
    background-color: var(--dm-surface-hover) !important;
}

html.dark-mode body .main-heading-custom h2 {
    color: var(--dm-text-primary) !important;
}

html.dark-mode body .dua-num-circle {
    background-color: var(--dm-bg) !important;
    color: var(--dm-accent) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode body .dua-card:hover .dua-num-circle {
    background-color: var(--dm-accent) !important;
    color: #fff !important;
}

/* Question Detail Page - Inline Style Overrides */

/* 1. Override the reference link (now using .sura-ref-link class) */
html.dark-mode body .brows-job-list .sura-ref-link {
    color: var(--dm-text-primary) !important;
    font-size: 14px !important; /* Preserving the font size from the removed inline style */
}

/* 2. Override any hardcoded blue text in the database content (e.g. Urdu text) */
html.dark-mode body .dir-rtl font[color="blue"],
html.dark-mode body .dir-rtl font[color="#0000ff"],
html.dark-mode body .dir-rtl font[color="#0000FF"],
html.dark-mode body .dir-rtl span[style*="blue"],
html.dark-mode body .dir-rtl span[style*="0000ff"] {
    color: var(--dm-text-primary) !important;
}

/* Fallback: force the entire Urdu container to white just in case */
html.dark-mode body .brows-job-list .dir-rtl {
    color: var(--dm-text-primary) !important;
}

/* ========================================= */
/* Interactive Tools Optimization           */
/* ========================================= */

/* Main Container Override */
html.dark-mode body section.first-feature {
    background-color: transparent !important;
    background: transparent !important;
}

/* Prayer Times Tool */
html.dark-mode body .pt-card,
html.dark-mode body .pt-article,
html.dark-mode body .pt-table,
html.dark-mode body .pt-wrap {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode body .pt-sub,
html.dark-mode body .pt-article p,
html.dark-mode body .pt-article li {
    color: var(--dm-text-secondary) !important;
}

html.dark-mode body .pt-article h2,
html.dark-mode body .pt-article h3,
html.dark-mode body .pt-table td {
    color: var(--dm-text-primary) !important;
}

html.dark-mode body .pt-table th {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text-secondary) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode body .pt-table tr:hover td {
    background-color: var(--dm-surface-hover) !important;
}

html.dark-mode body .pt-date {
    background-color: var(--dm-bg) !important;
    border: 1px solid var(--dm-border) !important;
}

/* Prayer Times Inputs & Notes */
html.dark-mode body .pt-select,
html.dark-mode body #pt-city,
html.dark-mode body #pt-country,
html.dark-mode body #pt-method,
html.dark-mode body #pt-school {
    background-color: #ffffff !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
    box-shadow: none !important;
}

html.dark-mode body .pt-select:hover,
html.dark-mode body .pt-select:focus,
html.dark-mode body #pt-city:hover,
html.dark-mode body #pt-country:hover,
html.dark-mode body #pt-method:hover,
html.dark-mode body #pt-school:hover,
html.dark-mode body #pt-city:focus,
html.dark-mode body #pt-country:focus,
html.dark-mode body #pt-method:focus,
html.dark-mode body #pt-school:focus {
    border-color: #dd2027 !important;
    box-shadow: 0 0 0 3px rgba(221, 32, 39, 0.1) !important;
}

html.dark-mode body .pt-note {
    background-color: rgba(221, 32, 39, 0.1) !important;
    border-color: rgba(221, 32, 39, 0.3) !important;
    color: #fca5a5 !important;
}

/* Zakat Calculator Tool */
html.dark-mode body .zc-card,
html.dark-mode body .zc-section {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode body .zc-sub,
html.dark-mode body .zc-group label {
    color: var(--dm-text-secondary) !important;
}

html.dark-mode body .zc-section-title,
html.dark-mode body .zc-card h2,
html.dark-mode body .zc-country-selector label {
    color: var(--dm-text-primary) !important;
}

html.dark-mode body .zc-input,
html.dark-mode body .zc-country-selector select {
    background-color: #ffffff !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
    box-shadow: none !important;
}

html.dark-mode body .zc-input:hover,
html.dark-mode body .zc-country-selector select:hover,
html.dark-mode body .zc-input:focus,
html.dark-mode body .zc-country-selector select:focus {
    border-color: #dd2027 !important;
    box-shadow: 0 0 0 3px rgba(221, 32, 39, 0.1) !important;
}

/* Islamic Calendar Tool */
html.dark-mode body .ic-today {
    background: var(--dm-surface) !important;
    border: 1px solid var(--dm-border) !important;
    box-shadow: none !important;
}

html.dark-mode body .ic-today h2,
html.dark-mode body .ic-today p {
    color: var(--dm-text-primary) !important;
    text-shadow: none !important;
}

html.dark-mode body .ic-card {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode body .ic-sub,
html.dark-mode body .ic-day-header {
    color: var(--dm-text-secondary) !important;
}

html.dark-mode body .ic-month-title,
html.dark-mode body .ic-gregorian {
    color: var(--dm-text-primary) !important;
}

html.dark-mode body .ic-btn {
    background-color: var(--dm-bg) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode body .ic-day {
    background-color: var(--dm-bg) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode body .ic-day:hover {
    background-color: var(--dm-surface-hover) !important;
    border-color: var(--dm-accent) !important;
}

html.dark-mode body .ic-day.ic-active {
    background-color: var(--dm-surface-hover) !important;
    border-color: var(--dm-accent) !important;
}

html.dark-mode body .ic-day.ic-empty {
    background-color: transparent !important;
    border-color: transparent !important;
}

/* Fix Hijri calendar badges inside the cells */
html.dark-mode body .ic-hijri {
    background: var(--dm-surface-hover) !important;
    background-color: var(--dm-surface-hover) !important;
    color: var(--dm-text-primary) !important;
    border: 1px solid var(--dm-border) !important;
}

/* Restore the red 'VIEW IN URDU' buttons on interactive tools */
html.dark-mode body .pagination > li > a[href*="/urdu/"] {
    background: #dd2027 !important;
    color: #fff !important;
    border: 1px solid #b9151e !important;
}

/* FAQ Sections (Shared across all tools) */
html.dark-mode body .faq-section {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode body .faq-item {
    border-color: var(--dm-border) !important;
}

html.dark-mode body .faq-question {
    color: var(--dm-text-primary) !important;
}

html.dark-mode body .faq-question:hover {
    color: var(--dm-accent) !important;
}

html.dark-mode body .faq-answer p {
    color: var(--dm-text-secondary) !important;
}
/* ========================================= */
/* Premium Sepia Mode Styles                 */
/* ========================================= */
:root {
    --sepia-bg: #f4ecd8;
    --sepia-surface: #fdf5e6;
    --sepia-surface-hover: #eae0c8;
    --sepia-text-primary: #433422;
    --sepia-text-secondary: #7a6345;
    --sepia-border: #d5c8b5;
    --sepia-accent: #b45309;
}

html.sepia-mode body {
    background-color: var(--sepia-bg) !important;
    color: var(--sepia-text-primary) !important;
}

html.sepia-mode body .wrapper,
html.sepia-mode body .brows-job-list {
    background-color: var(--sepia-bg) !important;
}

html.sepia-mode body .inner-header-title,
html.sepia-mode body section.section,
html.sepia-mode body section.first-feature,
html.sepia-mode body .full-detail-description {
    background-color: transparent !important;
    background: transparent !important;
}

html.sepia-mode body .full-detail-description > div {
    background-color: var(--sepia-surface) !important;
    border-bottom: 1px solid var(--sepia-border) !important;
}

html.sepia-mode body .inner-header-title h1,
html.sepia-mode body .sura-ref-link,
html.sepia-mode body .ayat-ar,
html.sepia-mode body .ayat-ur,
html.sepia-mode body .ayat-en,
html.sepia-mode body h2,
html.sepia-mode body h3,
html.sepia-mode body p,
html.sepia-mode body .arabic_text,
html.sepia-mode body .urdu_text,
html.sepia-mode body .translation_text {
    color: var(--sepia-text-primary) !important;
}

/* Islamic Calendar overrides for Sepia */
html.sepia-mode body .ic-card,
html.sepia-mode body .ic-today {
    background-color: var(--sepia-surface) !important;
    border-color: var(--sepia-border) !important;
    color: var(--sepia-text-primary) !important;
}
html.sepia-mode body .ic-day {
    background-color: var(--sepia-bg) !important;
    border-color: var(--sepia-border) !important;
}
html.sepia-mode body .ic-day-header,
html.sepia-mode body .ic-sub {
    color: var(--sepia-text-secondary) !important;
}

/* User Dashboard */
html.dark-mode body .dash-hero,
html.dark-mode body .dash-hero h2,
html.dark-mode body .dash-hero p,
html.dark-mode body .dash-hero div,
html.sepia-mode body .dash-hero,
html.sepia-mode body .dash-hero h2,
html.sepia-mode body .dash-hero p,
html.sepia-mode body .dash-hero div {
    color: #ffffff !important;
}

html.dark-mode body .dash-card {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode body .dash-card h3,
html.dark-mode body .dash-stat,
html.dark-mode body .dash-list a {
    color: var(--dm-text-primary) !important;
}

html.dark-mode body .dash-stat-label,
html.dark-mode body .dash-empty {
    color: var(--dm-text-secondary) !important;
}

html.dark-mode body .dash-note-text {
    color: var(--dm-text-secondary) !important;
}

html.dark-mode body .dash-note-time {
    color: var(--dm-text-secondary) !important;
    opacity: 0.85;
}

html.sepia-mode body .dash-card {
    background-color: var(--sepia-surface) !important;
    border-color: var(--sepia-border) !important;
}

html.dark-mode body .dash-tabs-nav {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode body .dash-tab-btn {
    color: var(--dm-text-secondary) !important;
}

html.dark-mode body .dash-tab-btn.is-active {
    background: var(--dm-bg) !important;
    border-color: var(--dm-border) !important;
    color: #f87171 !important;
}

html.dark-mode body .dash-tab-count {
    background: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode body .dash-tab-btn.is-active .dash-tab-count {
    background: rgba(221, 32, 39, 0.25) !important;
    color: #fca5a5 !important;
}

html.dark-mode body .dash-tab-panel h4 {
    color: var(--dm-text-primary) !important;
}

html.sepia-mode body .dash-tabs-nav {
    background: var(--sepia-bg) !important;
    border-color: var(--sepia-border) !important;
}

html.sepia-mode body .dash-tab-btn.is-active {
    background: var(--sepia-surface) !important;
}

/* Mega menu column labels use span.title (not headings) for SEO */
nav .megamenu-content .col-menu > .title {
    display: block;
    margin: 0 0 8px;
    padding: 0;
    font-size: inherit;
    font-weight: 700;
    line-height: 1.2;
}