/* 
  HouseCalc Global Dark Mode Theme 
  Mapped exactly to glossary.html styling
*/

/* Core Theme Overrides */
html.dark-theme {
    /* Glossary Backgrounds */
    --bg: #07090F;
    --surface: #0D1220;
    --surface2: #111927;

    /* Glossary Borders */
    --border: #1C2940;

    /* Glossary Text Colors */
    --text: #EDE8DF;
    --text2: #8C9BB8;
    --text3: #4A5878;

    /* Glossary Accents & Variable Remapping for All Pages */
    --gold: #C9963A;
    --gold2: #E8B95A;
    --gold3: #F5DFA0;

    --ink: var(--text);
    --ink2: var(--text2);
    --ink3: var(--text3);

    --slate: var(--text2);
    --muted: var(--text3);

    --sky: rgba(14, 165, 160, 0.1);
    --navy: #0D1220;
    --navy2: #111927;
    --navy-mid: #0D1220;

    --green-bg: rgba(22, 163, 74, 0.1);
    --red-bg: rgba(220, 38, 38, 0.1);
    --amber-bg: rgba(217, 119, 6, 0.1);
    --blue-bg: rgba(59, 130, 246, 0.1);

    /* Themed Shadows */
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Base element overrides to force CSS variable adoption */
html.dark-theme body {
    background: var(--bg) !important;
    color: var(--text) !important;
}

html.dark-theme h1,
html.dark-theme h2,
html.dark-theme h3,
html.dark-theme h4,
html.dark-theme h5,
html.dark-theme h6 {
    color: var(--text) !important;
}

/* Navigation overrides */
html.dark-theme nav {
    background: rgba(7, 9, 15, 0.97) !important;
    border-bottom: 1px solid var(--border) !important;
}

/* Card, Panel, and Container overrides */
html.dark-theme .calc-card,
html.dark-theme .guide-card,
html.dark-theme .side-card,
html.dark-theme .hero-card,
html.dark-theme .summary-card,
html.dark-theme .result-card,
html.dark-theme .info-card,
html.dark-theme .br-card,
html.dark-theme .inc-box,
html.dark-theme .tool-card,
html.dark-theme .step-card,
html.dark-theme .region-card,
html.dark-theme .rate-card,
html.dark-theme .card,
html.dark-theme .sidebar-card,
html.dark-theme .hero,
html.dark-theme .insight-box,
html.dark-theme .res-total,
html.dark-theme .tl-link,
html.dark-theme .nb-link,
html.dark-theme .faq-item,
html.dark-theme .contact-box,
html.dark-theme .browser-card,
html.dark-theme .advice-card,
html.dark-theme .dont-box,
html.dark-theme .wc-body,
html.dark-theme .yc-body,
html.dark-theme .tc-body,
html.dark-theme .ov-card,
html.dark-theme .reg-card,
html.dark-theme .chip:not(.on),
html.dark-theme .item,
html.dark-theme .sc-hero,
html.dark-theme .lw-ext,
html.dark-theme .toggle-row,
html.dark-theme .pnl-section,
html.dark-theme .pnl-header,
html.dark-theme .pnl-row,
html.dark-theme .cat-header,
html.dark-theme .cat-body,
html.dark-theme .sc-body,
html.dark-theme .scen-table tr.sub td,
html.dark-theme .breakdown-table tr.total td,
html.dark-theme .sbs-table tr.subtotal td,
html.dark-theme .rtab:not(.on),
html.dark-theme .bchip:not(.on),
html.dark-theme .rep-table-wrap,
html.dark-theme .joint-section {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

/* Interactive elements in dark mode */
html.dark-theme .chip:hover,
html.dark-theme .cat-header:hover,
html.dark-theme .toggle-row:hover,
html.dark-theme .rtab:hover:not(.on),
html.dark-theme .bchip:hover:not(.on) {
    background: var(--surface2) !important;
    border-color: var(--teal) !important;
}

/* Alert Boxes and Status indicators */
html.dark-theme .warn-box,
html.dark-theme .verdict-box.warn,
html.dark-theme .callout-warn,
html.dark-theme .lease-warn,
html.dark-theme .warn,
html.dark-theme .scotland-note {
    background: var(--amber-bg) !important;
    border-color: rgba(217, 119, 6, 0.4) !important;
    color: var(--text) !important;
}

html.dark-theme .callout-red {
    background: var(--red-bg) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: var(--text) !important;
}

html.dark-theme .trust-bar {
    background: linear-gradient(to bottom, var(--surface) 0%, var(--bg) 100%) !important;
    border-bottom-color: var(--border) !important;
}

html.dark-theme .verdict-box.bad {
    background: var(--red-bg) !important;
    border-color: rgba(220, 38, 38, 0.4) !important;
    color: var(--text) !important;
}

html.dark-theme .verdict-box.ok,
html.dark-theme .updated,
html.dark-theme .callout-info {
    background: var(--bg) !important;
    border-color: rgba(14, 165, 160, 0.4) !important;
    color: var(--text) !important;
}

html.dark-theme .callout-green {
    background: rgba(22, 163, 74, 0.12) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
    color: var(--text) !important;
}

html.dark-theme .bg-light,
html.dark-theme .section-bg,
html.dark-theme .bg-white,
html.dark-theme section,
html.dark-theme .trust-banner,
html.dark-theme .tools-section,
html.dark-theme .rates-section,
html.dark-theme .faq-section,
html.dark-theme .cta-section {
    background-color: var(--bg) !important;
}

html.dark-theme .stat-box,
html.dark-theme .tool-icon,
html.dark-theme .stat-item,
html.dark-theme .step-num,
html.dark-theme .sc-detail {
    background: var(--surface2) !important;
}

html.dark-theme .card-h,
html.dark-theme .res-row,
html.dark-theme .tl-link,
html.dark-theme .nb-link {
    border-color: var(--border) !important;
}

/* Input Fields */
html.dark-theme input[type="text"],
html.dark-theme input[type="tel"],
html.dark-theme input[type="number"],
html.dark-theme select {
    background: var(--surface2) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

html.dark-theme input:focus,
html.dark-theme select:focus {
    border-color: var(--teal) !important;
    background: var(--surface) !important;
}

/* Fix for Home Page Calculator inline input */
html.dark-theme #hpPrice {
    background: transparent !important;
    border-color: transparent !important;
}

/* Buying Costs elements */
html.dark-theme .cat-name,
html.dark-theme .cat-amount {
    color: var(--text) !important;
}

html.dark-theme .cat-range {
    color: var(--muted) !important;
}

/* Specific component texts */
html.dark-theme a,
html.dark-theme h1 span,
html.dark-theme h2 span,
html.dark-theme .ph-sub,
html.dark-theme .guide-intro,
html.dark-theme p,
html.dark-theme .form-text,
html.dark-theme .tl-desc,
html.dark-theme .sb-link,
html.dark-theme td,
html.dark-theme th,
html.dark-theme .mp-label,
html.dark-theme .br-sub,
html.dark-theme .rl,
html.dark-theme .tool-desc,
html.dark-theme .tl-time,
html.dark-theme .tl-stage,
html.dark-theme .tl-body,
html.dark-theme .tl-title,
html.dark-theme .tl-title,
html.dark-theme .feature-item,
html.dark-theme .stat-label,
html.dark-theme .toggle-label,
html.dark-theme .pnl-title,
html.dark-theme .bchip-label,
html.dark-theme .rtab-name,
html.dark-theme label {
    color: var(--text) !important;
}

html.dark-theme .text-teal {
    color: var(--teal) !important;
}

html.dark-theme .rep-row.highlight-row {
    background: rgba(14, 165, 160, .12) !important;
}

html.dark-theme .toggle-sub,
html.dark-theme .pnl-row .rn .note,
html.dark-theme .rtab-tax,
html.dark-theme .bchip-sub,
html.dark-theme .sc-detail .sd-label,
html.dark-theme .sc-tagline,
html.dark-theme .crit-row {
    color: var(--muted) !important;
}

html.dark-theme .crit-title,
html.dark-theme .sc-title {
    color: var(--text) !important;
}

/* Tables */
html.dark-theme table,
html.dark-theme th,
html.dark-theme td {
    border-color: var(--border) !important;
}

html.dark-theme th {
    background: var(--surface2) !important;
    color: var(--text) !important;
}

html.dark-theme tr {
    border-bottom: 1px solid var(--border) !important;
}

html.dark-theme tr:hover {
    background: rgba(255, 255, 255, 0.02) !important;
}

/* Toggle specific CSS */
.theme-toggle-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 12px;
}

.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

html.dark-theme .theme-toggle-btn {
    background: rgba(14, 165, 160, 0.15);
    border-color: rgba(14, 165, 160, 0.3);
    color: var(--teal);
}

html.dark-theme .theme-toggle-btn:hover {
    background: rgba(14, 165, 160, 0.25);
}

.theme-toggle-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* ── Page-specific light background fixes ────────────────────────── */

/* rate-change-alert.html */
html.dark-theme .feat,
html.dark-theme .ir-item.current,
html.dark-theme .tool-link,
html.dark-theme .s-badge.none,
html.dark-theme .sc-footer {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

html.dark-theme .email-input {
    background: var(--surface2) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

/* stamp-duty-calculator-*.html email capture button hover */
html.dark-theme .ec-btn:hover {
    background: rgba(14, 165, 160, 0.15) !important;
    color: var(--teal) !important;
}