/* ==========================================================================
   Dark Mode Overrides
   ========================================================================== */

.dark {
    --sm-navy: #E2E8F0;
    --sm-text: #CBD5E1;
    --sm-text-light: #94A3B8;
    --sm-text-heading: #F1F5F9;

    --sm-bg: #0F172A;
    --sm-bg-alt: #1E293B;
    --sm-bg-card: #1E293B;
    --sm-border: #334155;
    --sm-border-light: #1E293B;

    --sm-shadow: 0 1px 3px rgba(0,0,0,0.3);
    --sm-shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --sm-shadow-lg: 0 8px 24px rgba(0,0,0,0.5);

    color-scheme: dark;
}

/* Header */
.dark .sm-header {
    background: rgba(15, 23, 42, 0.95);
    border-color: var(--sm-border);
}

/* Badges */
.dark .sm-badge--navy { background: #334155; color: #E2E8F0; }
.dark .sm-badge--blue { background: #1E3A5F; color: #60A5FA; }
.dark .sm-badge--purple { background: #2E1065; color: #A78BFA; }
.dark .sm-badge--green { background: #064E3B; color: #6EE7B7; }
.dark .sm-badge--orange { background: #78350F; color: #FCD34D; }
.dark .sm-badge--teal { background: #134E4A; color: #5EEAD4; }
.dark .sm-badge--red { background: #7F1D1D; color: #FCA5A5; }
.dark .sm-badge--gray { background: #334155; color: #94A3B8; }

/* Review hero tag */
.dark .sm-review-hero__tag { background: #334155; border-color: #475569; color: #94A3B8; }
.dark .sm-review-hero__tag--green { background: #064E3B; border-color: #065F46; color: #6EE7B7; }

/* Rating card bar */
.dark .sm-rating-card__bar { background: #334155; }

/* Stars */
.dark .sm-stars__icon--empty { color: #475569; }

/* TL;DR */
.dark .sm-tldr { background: #1E293B; border-color: #334155; border-left-color: var(--sm-sky); }

/* TOC */
.dark .sm-toc { background: #1E293B; border-color: #334155; }

/* FAQ */
.dark .sm-faq__item { border-color: #334155; }

/* CTA Box */
.dark .sm-cta-box { background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%); border-color: #334155; }

/* Verdict */
.dark .sm-verdict { background: #1E293B; }

/* Author tag */
.dark .sm-author-box__tag { background: #0F172A; border-color: #475569; }

/* Tables */
.dark th { background: #1E293B; }
.dark .sm-comp-table thead th { background: #0F172A; }

/* Code */
.dark code { background: #1E293B; }
.dark pre { background: #0F172A; }

/* Versus winner */
.dark .sm-versus__winner { background: #059669; }

/* Footer - stays dark, no changes needed */
.dark .sm-footer { background: #020617; }
.dark .sm-footer__bottom { border-color: #1E293B; }

/* Blockquote */
.dark blockquote { background: #1E293B; border-left-color: var(--sm-blue); }

/* Search */
.dark .sm-search-form__input { background: #1E293B; border-color: #475569; color: #E2E8F0; }
.dark .sm-search-form__input:focus { border-color: var(--sm-blue); }

/* Newsletter input */
.dark .sm-newsletter-widget__input { background: #0F172A; border-color: #475569; color: #E2E8F0; }

/* Hero gradient */
.dark .sm-hero { background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%); }

/* Popular posts counter */
.dark .sm-popular__link::before { background: #334155; color: #94A3B8; }

/* Pricing card */
.dark .sm-pricing__card { border-color: #334155; }

/* Dark toggle border */
.dark .sm-dark-toggle { border-color: #475569; color: #CBD5E1; }

/* Menu dropdown */
.dark .sm-header__menu .sub-menu { background: #1E293B; border-color: #334155; }
.dark .sm-header__menu .sub-menu a:hover { background: #334155; }
.dark .sm-header__menu > li > a:hover,
.dark .sm-header__menu > li.current-menu-item > a { background: #1E293B; }

/* Mobile menu */
.dark .sm-header__nav.is-open { background: #0F172A; border-color: #334155; }

/* Pagination */
.dark .sm-pagination .page-numbers { border-color: #334155; color: #94A3B8; }
.dark .sm-pagination .page-numbers:hover { border-color: var(--sm-blue); color: var(--sm-blue); }
.dark .sm-pagination .page-numbers.current { background: var(--sm-blue); border-color: var(--sm-blue); color: #fff; }

/* Article nav */
.dark .sm-article__nav { border-color: #334155; }
.dark .sm-article__nav-link { border-color: #334155; }
.dark .sm-article__nav-link:hover { border-color: var(--sm-blue); }

/* Selection color */
.dark ::selection { background: rgba(37, 99, 235, 0.3); color: #E2E8F0; }