/* Dark Mode Overrides — OnlineCalc Theme */
[data-theme="dark"] {
    --oc-bg:          #18181B;
    --oc-surface:     #27272A;
    --oc-elevated:    #3F3F46;
    --oc-border:      #52525B;
    --oc-border-light:#3F3F46;
    --oc-text:        #FAFAFA;
    --oc-text-muted:  #A1A1AA;
    --oc-text-subtle: #71717A;

    --oc-brand:       #34D399;
    --oc-brand-hover: #10B981;
    --oc-brand-light: rgba(52,211,153,.12);
    --oc-brand-muted: rgba(52,211,153,.25);
    --oc-accent:      #6EE7B7;

    --oc-shadow-sm:   0 1px 3px rgba(0,0,0,.4);
    --oc-shadow-md:   0 4px 12px rgba(0,0,0,.5);
    --oc-shadow-lg:   0 8px 30px rgba(0,0,0,.6);
    --oc-shadow-xl:   0 20px 60px rgba(0,0,0,.7);
}

/* ── Body & scrollbar ───────────────────────────────────── */
[data-theme="dark"] body {
    color-scheme: dark;
}
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--oc-surface); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--oc-elevated); border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--oc-border); }

/* ── Selection ──────────────────────────────────────────── */
[data-theme="dark"] ::selection {
    background: var(--oc-brand-muted);
    color: var(--oc-text);
}

/* ── Header ─────────────────────────────────────────────── */
[data-theme="dark"] .oc-header {
    background: rgba(24,24,27,.92);
    border-bottom-color: var(--oc-border);
}
[data-theme="dark"] .oc-header.is-scrolled {
    background: rgba(24,24,27,.97);
}

/* ── Announcement bar ───────────────────────────────────── */
[data-theme="dark"] .oc-announcement {
    background: #064E3B;
    color: #D1FAE5;
}

/* ── Navigation ─────────────────────────────────────────── */
[data-theme="dark"] .oc-nav__link {
    color: var(--oc-text-muted);
}
[data-theme="dark"] .oc-nav__link:hover,
[data-theme="dark"] .oc-nav__link.is-active {
    color: var(--oc-brand);
}
[data-theme="dark"] .oc-mega-menu {
    background: var(--oc-surface);
    border-color: var(--oc-border);
}
[data-theme="dark"] .oc-mega-menu__category-title {
    color: var(--oc-text-subtle);
}
[data-theme="dark"] .oc-mega-menu__link {
    color: var(--oc-text-muted);
}
[data-theme="dark"] .oc-mega-menu__link:hover {
    background: var(--oc-elevated);
    color: var(--oc-brand);
}
[data-theme="dark"] .oc-lang-btn {
    color: var(--oc-text-muted);
    border-color: var(--oc-border);
}
[data-theme="dark"] .oc-lang-btn:hover {
    background: var(--oc-elevated);
}
[data-theme="dark"] .oc-lang-dropdown {
    background: var(--oc-surface);
    border-color: var(--oc-border);
}
[data-theme="dark"] .oc-lang-option:hover {
    background: var(--oc-elevated);
}
[data-theme="dark"] .oc-theme-toggle {
    color: var(--oc-text-muted);
}
[data-theme="dark"] .oc-theme-toggle:hover {
    background: var(--oc-elevated);
    color: var(--oc-brand);
}
[data-theme="dark"] .oc-user-menu__dropdown {
    background: var(--oc-surface);
    border-color: var(--oc-border);
}
[data-theme="dark"] .oc-user-menu__dropdown a {
    color: var(--oc-text-muted);
}
[data-theme="dark"] .oc-user-menu__dropdown a:hover {
    background: var(--oc-elevated);
    color: var(--oc-text);
}

/* ── Mobile nav ─────────────────────────────────────────── */
[data-theme="dark"] .oc-mobile-nav {
    background: var(--oc-surface);
    border-right-color: var(--oc-border);
}
[data-theme="dark"] .oc-mobile-nav__link {
    color: var(--oc-text-muted);
    border-bottom-color: var(--oc-border-light);
}
[data-theme="dark"] .oc-mobile-nav__link:hover,
[data-theme="dark"] .oc-mobile-nav__link.is-active {
    color: var(--oc-brand);
    background: var(--oc-brand-light);
}
[data-theme="dark"] .oc-mobile-nav-overlay {
    background: rgba(0,0,0,.7);
}

/* ── Search overlay ─────────────────────────────────────── */
[data-theme="dark"] .oc-search-overlay {
    background: rgba(24,24,27,.96);
}
[data-theme="dark"] .oc-search-overlay__input {
    background: var(--oc-surface);
    border-color: var(--oc-border);
    color: var(--oc-text);
}
[data-theme="dark"] .oc-search-overlay__input:focus {
    border-color: var(--oc-brand);
}
[data-theme="dark"] .oc-search-result-item {
    background: var(--oc-surface);
    border-color: var(--oc-border);
    color: var(--oc-text-muted);
}
[data-theme="dark"] .oc-search-result-item:hover {
    background: var(--oc-elevated);
    border-color: var(--oc-brand);
    color: var(--oc-text);
}

/* ── Hero ───────────────────────────────────────────────── */
[data-theme="dark"] .oc-hero {
    background: linear-gradient(135deg, #18181B 0%, #1A2E1E 50%, #18181B 100%);
}
[data-theme="dark"] .oc-hero__eyebrow {
    background: var(--oc-brand-light);
    color: var(--oc-brand);
    border-color: var(--oc-brand-muted);
}
[data-theme="dark"] .oc-hero__search-box {
    background: var(--oc-surface);
    border-color: var(--oc-border);
}
[data-theme="dark"] .oc-hero__search-box:focus-within {
    border-color: var(--oc-brand);
}
[data-theme="dark"] .oc-hero__search-input {
    color: var(--oc-text);
}
[data-theme="dark"] .oc-hero__search-input::placeholder {
    color: var(--oc-text-subtle);
}

/* ── Cards ──────────────────────────────────────────────── */
[data-theme="dark"] .oc-card {
    background: var(--oc-surface);
    border-color: var(--oc-border);
}
[data-theme="dark"] .oc-card:hover {
    border-color: var(--oc-brand);
}
[data-theme="dark"] .oc-calc-card {
    background: var(--oc-surface);
    border-color: var(--oc-border);
}
[data-theme="dark"] .oc-calc-card:hover {
    border-color: var(--oc-brand);
}
[data-theme="dark"] .oc-calc-card__icon {
    background: var(--oc-brand-light);
    color: var(--oc-brand);
}
[data-theme="dark"] .oc-calc-card__title {
    color: var(--oc-text);
}
[data-theme="dark"] .oc-calc-card__desc {
    color: var(--oc-text-muted);
}
[data-theme="dark"] .oc-calc-card__tag {
    background: var(--oc-elevated);
    color: var(--oc-text-subtle);
}

/* ── Category section ───────────────────────────────────── */
[data-theme="dark"] .oc-section--alt {
    background: var(--oc-surface);
}
[data-theme="dark"] .oc-category-card {
    background: var(--oc-elevated);
    border-color: var(--oc-border);
}
[data-theme="dark"] .oc-category-card:hover {
    border-color: var(--oc-brand);
    background: rgba(52,211,153,.08);
}

/* ── Feature strip ──────────────────────────────────────── */
[data-theme="dark"] .oc-feature-strip {
    background: var(--oc-surface);
    border-top-color: var(--oc-border);
    border-bottom-color: var(--oc-border);
}
[data-theme="dark"] .oc-feature-strip__item {
    color: var(--oc-text-muted);
}

/* ── Buttons ────────────────────────────────────────────── */
[data-theme="dark"] .oc-btn--secondary {
    background: var(--oc-elevated);
    border-color: var(--oc-border);
    color: var(--oc-text);
}
[data-theme="dark"] .oc-btn--secondary:hover {
    background: var(--oc-border);
    border-color: var(--oc-text-subtle);
}
[data-theme="dark"] .oc-btn--outline {
    border-color: var(--oc-border);
    color: var(--oc-text-muted);
}
[data-theme="dark"] .oc-btn--outline:hover {
    background: var(--oc-elevated);
    border-color: var(--oc-brand);
    color: var(--oc-brand);
}
[data-theme="dark"] .oc-btn--ghost {
    color: var(--oc-text-muted);
}
[data-theme="dark"] .oc-btn--ghost:hover {
    background: var(--oc-elevated);
    color: var(--oc-text);
}

/* ── Forms ──────────────────────────────────────────────── */
[data-theme="dark"] .oc-input,
[data-theme="dark"] .oc-select,
[data-theme="dark"] .oc-textarea {
    background: var(--oc-elevated);
    border-color: var(--oc-border);
    color: var(--oc-text);
}
[data-theme="dark"] .oc-input::placeholder,
[data-theme="dark"] .oc-textarea::placeholder {
    color: var(--oc-text-subtle);
}
[data-theme="dark"] .oc-input:focus,
[data-theme="dark"] .oc-select:focus,
[data-theme="dark"] .oc-textarea:focus {
    border-color: var(--oc-brand);
    background: var(--oc-surface);
}
[data-theme="dark"] .oc-input:disabled,
[data-theme="dark"] .oc-select:disabled {
    background: var(--oc-surface);
    color: var(--oc-text-subtle);
}
[data-theme="dark"] .oc-label {
    color: var(--oc-text-muted);
}
[data-theme="dark"] .oc-input-hint {
    color: var(--oc-text-subtle);
}
[data-theme="dark"] .oc-input-group__addon {
    background: var(--oc-elevated);
    border-color: var(--oc-border);
    color: var(--oc-text-subtle);
}
[data-theme="dark"] .oc-range::-webkit-slider-runnable-track {
    background: var(--oc-elevated);
}
[data-theme="dark"] .oc-checkbox__box,
[data-theme="dark"] .oc-radio__box {
    border-color: var(--oc-border);
    background: var(--oc-elevated);
}

/* ── Alerts ─────────────────────────────────────────────── */
[data-theme="dark"] .oc-alert--info    { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.3); color: #93C5FD; }
[data-theme="dark"] .oc-alert--success { background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.3); color: #6EE7B7; }
[data-theme="dark"] .oc-alert--warning { background: rgba(245,158,11,.12);  border-color: rgba(245,158,11,.3);  color: #FCD34D; }
[data-theme="dark"] .oc-alert--error   { background: rgba(239,68,68,.12);   border-color: rgba(239,68,68,.3);   color: #FCA5A5; }

/* ── Tables ─────────────────────────────────────────────── */
[data-theme="dark"] .oc-table th {
    background: var(--oc-elevated);
    color: var(--oc-text-muted);
    border-bottom-color: var(--oc-border);
}
[data-theme="dark"] .oc-table td {
    border-bottom-color: var(--oc-border-light);
    color: var(--oc-text-muted);
}
[data-theme="dark"] .oc-table tr:hover td {
    background: var(--oc-brand-light);
}
[data-theme="dark"] .oc-table--striped tr:nth-child(even) td {
    background: rgba(255,255,255,.03);
}

/* ── Tabs ───────────────────────────────────────────────── */
[data-theme="dark"] .oc-tabs__nav {
    border-bottom-color: var(--oc-border);
}
[data-theme="dark"] .oc-tabs__tab {
    color: var(--oc-text-subtle);
}
[data-theme="dark"] .oc-tabs__tab:hover {
    color: var(--oc-text);
    background: var(--oc-elevated);
}
[data-theme="dark"] .oc-tabs__tab.is-active {
    color: var(--oc-brand);
    border-bottom-color: var(--oc-brand);
}

/* ── Modals ─────────────────────────────────────────────── */
[data-theme="dark"] .oc-modal__box {
    background: var(--oc-surface);
    border: 1px solid var(--oc-border);
}
[data-theme="dark"] .oc-modal__header {
    border-bottom-color: var(--oc-border);
}
[data-theme="dark"] .oc-modal__footer {
    border-top-color: var(--oc-border);
    background: var(--oc-elevated);
}
[data-theme="dark"] .oc-modal__close {
    color: var(--oc-text-subtle);
}
[data-theme="dark"] .oc-modal__close:hover {
    background: var(--oc-elevated);
    color: var(--oc-text);
}

/* ── Pricing ────────────────────────────────────────────── */
[data-theme="dark"] .oc-pricing-card {
    background: var(--oc-surface);
    border-color: var(--oc-border);
}
[data-theme="dark"] .oc-pricing-card--featured {
    background: linear-gradient(145deg, #064E3B 0%, #065F46 100%);
    border-color: var(--oc-brand);
}
[data-theme="dark"] .oc-pricing-card__price {
    color: var(--oc-text);
}
[data-theme="dark"] .oc-pricing-card__feature {
    color: var(--oc-text-muted);
    border-top-color: var(--oc-border-light);
}
[data-theme="dark"] .oc-pricing-card__feature--missing {
    color: var(--oc-text-subtle);
}

/* ── Auth card ──────────────────────────────────────────── */
[data-theme="dark"] .oc-auth-card {
    background: var(--oc-surface);
    border-color: var(--oc-border);
}
[data-theme="dark"] .oc-auth-divider {
    color: var(--oc-text-subtle);
}
[data-theme="dark"] .oc-auth-divider::before,
[data-theme="dark"] .oc-auth-divider::after {
    background: var(--oc-border);
}
[data-theme="dark"] .oc-oauth-btn {
    background: var(--oc-elevated);
    border-color: var(--oc-border);
    color: var(--oc-text);
}
[data-theme="dark"] .oc-oauth-btn:hover {
    background: var(--oc-border);
}

/* ── Dashboard ──────────────────────────────────────────── */
[data-theme="dark"] .oc-dashboard-sidebar {
    background: var(--oc-surface);
    border-right-color: var(--oc-border);
}
[data-theme="dark"] .oc-dashboard-nav__link {
    color: var(--oc-text-muted);
}
[data-theme="dark"] .oc-dashboard-nav__link:hover,
[data-theme="dark"] .oc-dashboard-nav__link.is-active {
    background: var(--oc-brand-light);
    color: var(--oc-brand);
}
[data-theme="dark"] .oc-stat-card {
    background: var(--oc-surface);
    border-color: var(--oc-border);
}
[data-theme="dark"] .oc-stat-card__value {
    color: var(--oc-text);
}
[data-theme="dark"] .oc-plan-badge {
    background: var(--oc-brand-light);
    color: var(--oc-brand);
}

/* ── Blog / Prose ───────────────────────────────────────── */
[data-theme="dark"] .oc-post-card {
    background: var(--oc-surface);
    border-color: var(--oc-border);
}
[data-theme="dark"] .oc-post-card:hover {
    border-color: var(--oc-brand);
}
[data-theme="dark"] .oc-post-card__meta {
    color: var(--oc-text-subtle);
}
[data-theme="dark"] .oc-post-card__title a {
    color: var(--oc-text);
}
[data-theme="dark"] .oc-post-card__title a:hover {
    color: var(--oc-brand);
}
[data-theme="dark"] .oc-post-card__excerpt {
    color: var(--oc-text-muted);
}
[data-theme="dark"] .oc-prose {
    color: var(--oc-text-muted);
}
[data-theme="dark"] .oc-prose h1,
[data-theme="dark"] .oc-prose h2,
[data-theme="dark"] .oc-prose h3,
[data-theme="dark"] .oc-prose h4 {
    color: var(--oc-text);
}
[data-theme="dark"] .oc-prose a {
    color: var(--oc-brand);
}
[data-theme="dark"] .oc-prose code {
    background: var(--oc-elevated);
    color: var(--oc-brand);
    border-color: var(--oc-border);
}
[data-theme="dark"] .oc-prose pre {
    background: #0D1117;
    border-color: var(--oc-border);
}
[data-theme="dark"] .oc-prose blockquote {
    background: var(--oc-elevated);
    border-left-color: var(--oc-brand);
    color: var(--oc-text-muted);
}
[data-theme="dark"] .oc-prose table th {
    background: var(--oc-elevated);
}
[data-theme="dark"] .oc-prose table td,
[data-theme="dark"] .oc-prose table th {
    border-color: var(--oc-border);
}
[data-theme="dark"] .oc-prose hr {
    border-color: var(--oc-border);
}

/* ── Breadcrumb ─────────────────────────────────────────── */
[data-theme="dark"] .oc-breadcrumb__item {
    color: var(--oc-text-subtle);
}
[data-theme="dark"] .oc-breadcrumb__link {
    color: var(--oc-text-muted);
}
[data-theme="dark"] .oc-breadcrumb__link:hover {
    color: var(--oc-brand);
}

/* ── FAQ accordion ──────────────────────────────────────── */
[data-theme="dark"] .oc-faq-item {
    border-color: var(--oc-border);
    background: var(--oc-surface);
}
[data-theme="dark"] .oc-faq-item.is-open {
    border-color: var(--oc-brand);
}
[data-theme="dark"] .oc-faq-question {
    color: var(--oc-text);
}
[data-theme="dark"] .oc-faq-answer {
    color: var(--oc-text-muted);
    border-top-color: var(--oc-border-light);
}

/* ── Toast ──────────────────────────────────────────────── */
[data-theme="dark"] .oc-toast {
    background: var(--oc-elevated);
    border-color: var(--oc-border);
    color: var(--oc-text);
}

/* ── Progress & skeleton ────────────────────────────────── */
[data-theme="dark"] .oc-progress-bar__track {
    background: var(--oc-elevated);
}
[data-theme="dark"] .oc-skeleton {
    background: linear-gradient(90deg,
        var(--oc-elevated) 25%,
        var(--oc-border)   50%,
        var(--oc-elevated) 75%
    );
    background-size: 400% 100%;
}

/* ── Cookie banner ──────────────────────────────────────── */
[data-theme="dark"] .oc-cookie-banner {
    background: var(--oc-surface);
    border-top-color: var(--oc-border);
    color: var(--oc-text-muted);
}

/* ── Pagination ─────────────────────────────────────────── */
[data-theme="dark"] .oc-pagination .page-numbers {
    color: var(--oc-text-muted);
    border-color: var(--oc-border);
}
[data-theme="dark"] .oc-pagination .page-numbers:hover {
    background: var(--oc-elevated);
    border-color: var(--oc-brand);
    color: var(--oc-brand);
}
[data-theme="dark"] .oc-pagination .page-numbers.current {
    background: var(--oc-brand);
    border-color: var(--oc-brand);
    color: #fff;
}

/* ── 404 page ───────────────────────────────────────────── */
[data-theme="dark"] .oc-404__popular-item {
    background: var(--oc-surface);
    border-color: var(--oc-border);
    color: var(--oc-text-muted);
}
[data-theme="dark"] .oc-404__popular-item:hover {
    background: var(--oc-elevated);
    border-color: var(--oc-brand);
    color: var(--oc-brand);
}

/* ── Sidebar widget ─────────────────────────────────────── */
[data-theme="dark"] .oc-sidebar-widget {
    background: var(--oc-surface);
    border-color: var(--oc-border);
}
[data-theme="dark"] .oc-sidebar-widget__title {
    color: var(--oc-text);
    border-bottom-color: var(--oc-border);
}
[data-theme="dark"] .oc-sidebar-widget__list a {
    color: var(--oc-text-muted);
    border-bottom-color: var(--oc-border-light);
}
[data-theme="dark"] .oc-sidebar-widget__list a:hover {
    color: var(--oc-brand);
    background: var(--oc-brand-light);
}

/* ── Footer ─────────────────────────────────────────────── */
[data-theme="dark"] .oc-footer {
    background: #09090B;
    border-top-color: var(--oc-border);
}
[data-theme="dark"] .oc-footer__col-title {
    color: var(--oc-text);
}
[data-theme="dark"] .oc-footer__link {
    color: var(--oc-text-subtle);
}
[data-theme="dark"] .oc-footer__link:hover {
    color: var(--oc-brand);
}
[data-theme="dark"] .oc-footer__bottom {
    border-top-color: var(--oc-border);
    color: var(--oc-text-subtle);
}
[data-theme="dark"] .oc-footer__tagline {
    color: var(--oc-text-subtle);
}
[data-theme="dark"] .oc-social-link {
    color: var(--oc-text-subtle);
    border-color: var(--oc-border);
}
[data-theme="dark"] .oc-social-link:hover {
    color: var(--oc-brand);
    border-color: var(--oc-brand);
}
[data-theme="dark"] .oc-trust-badge {
    background: var(--oc-elevated);
    border-color: var(--oc-border);
    color: var(--oc-text-subtle);
}

/* ── Ad blocks ──────────────────────────────────────────── */
[data-theme="dark"] .oc-ad-block {
    background: var(--oc-surface);
    border-color: var(--oc-border);
}
[data-theme="dark"] .oc-ad-block__label {
    color: var(--oc-text-subtle);
}

/* ── Smooth dark mode transition ───────────────────────── */
*, *::before, *::after {
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 200ms;
    transition-timing-function: ease;
}
/* Exclude transitions that shouldn't animate */
.oc-modal-overlay,
.oc-mobile-nav,
.oc-search-overlay,
[class*="oc-toast"],
[class*="oc-spinner"],
[class*="oc-skeleton"] {
    transition: none;
}