/* ============================================================================
   MP DARK MODE — overrides for HARDCODED colours
   ============================================================================

   The variable flip in inc/color-skins.php (html[data-theme="dark"]) already
   repaints everything that uses var(--bg) / var(--text-primary) / the mp-*
   tokens. This file only has to catch the literal hex values baked into
   style.css and the cards — the things a var() flip can't reach.

   Every rule is scoped under html[data-theme="dark"] so light mode is never
   touched. Where a colour was set with an inline style="" attribute, only
   !important can win against it, hence the !important on those surfaces.
   ========================================================================= */

html[data-theme="dark"]{ background:#0E1013; }

/* ════════════════════════════════════════════════════════════════════════
   REMAINING FRONTEND PAGES — class-based white cards
   ────────────────────────────────────────────────────────────────────────
   Every white card defined in a page's <style> block, catalogued from the
   source. Homepage + single-property are handled at source (tokenised); these
   pages get their card classes darkened here instead — one place, additive,
   with no risk of light-mode regression from rewriting the templates. */
html[data-theme="dark"] .auth-card,           /* login / register / password / phone-collect */
html[data-theme="dark"] .prem-plan,           /* premium */
html[data-theme="dark"] .prem-pay-card,
html[data-theme="dark"] .prem-feature,
html[data-theme="dark"] .mym-card,            /* my-matches */
html[data-theme="dark"] .mym-buyer-card,
html[data-theme="dark"] .mym-no-match,
html[data-theme="dark"] .mym-empty,
html[data-theme="dark"] .mym-prompt-card,
html[data-theme="dark"] .mym-cta-bar,
html[data-theme="dark"] .mpv-card,            /* vendor marketplace */
html[data-theme="dark"] .mpv-single-card,
html[data-theme="dark"] .mpvh-card,
html[data-theme="dark"] .mpv-plan,
html[data-theme="dark"] .mpv-filter-select,
html[data-theme="dark"] .map-card,            /* contact */
html[data-theme="dark"] .profile-header-card, /* profile */
html[data-theme="dark"] .profile-section,
html[data-theme="dark"] .saved-prop-card,     /* saved properties */
html[data-theme="dark"] .mp-404,              /* 404 */
html[data-theme="dark"] .mp-404-ghost{
  background:#15181D !important;
  border-color:#262B33 !important;
  color:#ECEEF1;
}
html[data-theme="dark"] .saved-prop-card-head{ background:#1C2027 !important; }

/* Listing-form role card (.lf-wrap) — the white "How can we help you?" card. */
html[data-theme="dark"] .lf-wrap{ background:#15181D !important; border-color:#262B33 !important; }
html[data-theme="dark"] .lf-role-title,
html[data-theme="dark"] .lf-role-text strong{ color:#ECEEF1 !important; }
html[data-theme="dark"] .lf-role-btn{ background:#1C2027 !important; border-color:#2A2F37 !important; }
html[data-theme="dark"] .lf-role-btn:hover,
html[data-theme="dark"] .lf-role-btn:active{ background:#20252D !important; }

/* Vendors page cream→white hero gradient (.mpv-page-wrap). */
html[data-theme="dark"] .mpv-page-wrap{ background:#0E1013 !important; }

/* "What We Help You With" badge items. */
html[data-theme="dark"] .mp-wcb-item{ background:#1C2027 !important; border-color:#2A2F37 !important; }

/* Listing form sticky header bar (.lf-topbar) — was white. */
html[data-theme="dark"] .lf-topbar{ background:#15181D !important; border-bottom-color:#262B33 !important; }
html[data-theme="dark"] .lf-back-btn{ background:#1C2027 !important; color:#C7CDD5 !important; }
html[data-theme="dark"] .lf-back-btn:hover{ background:#20252D !important; color:#fff !important; }

/* Homepage founder ("Mahesh") section — dark name, cream quote box, white
   pillar rows. */
html[data-theme="dark"] .mp-mahesh-name{ color:#ECEEF1 !important; }
html[data-theme="dark"] .mp-mahesh-quote-block{ background:#241E10 !important; }
html[data-theme="dark"] .mp-mahesh-quote-text,
html[data-theme="dark"] .mp-mahesh-bio{ color:#C7CDD5 !important; }
html[data-theme="dark"] .mp-mahesh-pillar{ background:#1C2027 !important; border-color:#2A2F37 !important; }
html[data-theme="dark"] .mp-mahesh-pillar-title{ color:#ECEEF1 !important; }

/* Location pills — the :hover state used a light bg with (now-light) text,
   so a hovered pill went white-on-white. Give hover a dark surface. */
html[data-theme="dark"] .sp-locpill{ color:#C7CDD5 !important; }
html[data-theme="dark"] .sp-locpill:hover{ background:#2A2F37 !important; color:#fff !important; }
html[data-theme="dark"] .sp-locpill.on{ background:#DC2626 !important; color:#fff !important; }

/* my-matches hero heading (the tan highlight band behind the title used a
   flipped ink background). */
html[data-theme="dark"] .mym-hero h1,
html[data-theme="dark"] .mym-hero-title{ background:transparent !important; color:#ECEEF1 !important; }

/* ── Mobile header icons + nav drawer ─────────────────────────────────────
   The mobile hamburger, AI/saved icons and auth chip sit on the dark gradient
   header; force them light. The drawer panel itself was #fff. */
html[data-theme="dark"] .mp-nav-burger,
html[data-theme="dark"] .mp-mob-ai-btn,
html[data-theme="dark"] .mp-mob-save-btn,
html[data-theme="dark"] .mp-auth-chip,
html[data-theme="dark"] .site-logo .logo-name,
html[data-theme="dark"] .site-logo .logo-tagline{ color:#FFFFFF !important; opacity:1 !important; }
/* Make the hamburger unmistakably a tappable control on the dark bar. */
html[data-theme="dark"] .mp-nav-burger{ color:#FFFFFF !important; }
html[data-theme="dark"] .mp-nav-burger svg{ stroke:#FFFFFF !important; }
html[data-theme="dark"] .mp-auth-chip{ border-color:rgba(255,255,255,.2) !important; }

html[data-theme="dark"] .mp-drawer-panel{ background:#12151A !important; }
html[data-theme="dark"] .mp-drawer-head{ border-bottom-color:#232830 !important; }
html[data-theme="dark"] .mp-drawer-brand{ color:#F1F3F5 !important; }
html[data-theme="dark"] .mp-drawer-links a{ color:#C7CDD5 !important; }
html[data-theme="dark"] .mp-drawer-links a:hover,
html[data-theme="dark"] .mp-drawer-links a:active{ background:rgba(255,255,255,.06) !important; color:#fff !important; }
html[data-theme="dark"] .mp-drawer-foot{ border-top-color:#232830 !important; }
html[data-theme="dark"] .mp-drawer-btn-ghost{ border-color:#2A2F37 !important; color:#C7CDD5 !important; }
html[data-theme="dark"] .mp-drawer-lang{ background:#1C2027 !important; border-color:#2A2F37 !important; color:#C7CDD5 !important; }
html[data-theme="dark"] .mpv-filter-select{ color:#ECEEF1 !important; }

/* Cream / amber highlight boxes → a dark amber so they still read as accents. */
html[data-theme="dark"] .prem-upi-id,
html[data-theme="dark"] .prem-pending,
html[data-theme="dark"] .prem-selected-summary,
html[data-theme="dark"] .mpv-form-card,
html[data-theme="dark"] [style*="background:#FFFBEB" i]{
  background:#241E10 !important; border-color:#4A3A16 !important;
}

/* Headings on those pages that used dark literals. */
html[data-theme="dark"] .prem-plan h3,
html[data-theme="dark"] .mym-card h3,
html[data-theme="dark"] .mpv-card h3,
html[data-theme="dark"] .profile-section h2,
html[data-theme="dark"] .profile-section h3,
html[data-theme="dark"] .mp-404 h1{ color:#ECEEF1 !important; }

/* Page canvas — body was set to a literal #F3F3F3. */
html[data-theme="dark"] body{ background:#0E1013 !important; color:#ECEEF1; }

/* ── Page-canvas wrappers & light section bands → near-black ───────────────
   These full-width light backgrounds sat behind the dark cards and were the
   grey/"still light" areas around them. Forced to the near-black page colour.
   Includes the single-property canvas (.sp-wrap), the "Why Choose" gradient
   band, the list-property section, and any inline light-grey section bg. */
html[data-theme="dark"] .sp-wrap,
html[data-theme="dark"] .mp-why-choose,
html[data-theme="dark"] .mp-listings-section,
html[data-theme="dark"] .fp-wrap,
html[data-theme="dark"] .mym-wrap,          /* my-matches page canvas */
html[data-theme="dark"] .saved-page-wrap,   /* saved-properties page canvas */
html[data-theme="dark"] .mp-dash,           /* user dashboard canvas */
/* Any element whose INLINE background is one of the theme's light greys — this
   is what turns every page's canvas / CTA band / wrapper dark, on all
   templates, without having to name each one. Scoped to "background:" so a
   grey used as a border or inside a gradient is never affected. */
html[data-theme="dark"] [style*="background:#F6F8FB" i],
html[data-theme="dark"] [style*="background: #F6F8FB" i],
html[data-theme="dark"] [style*="background:#F8FAFC" i],
html[data-theme="dark"] [style*="background: #F8FAFC" i],
html[data-theme="dark"] [style*="background:#F9FAFB" i],
html[data-theme="dark"] [style*="background:#FAFAFA" i],
html[data-theme="dark"] [style*="background:#F3F4F6" i],
html[data-theme="dark"] [style*="background:#F1F5F9" i],
html[data-theme="dark"] [style*="background:#F4F6F8" i],
html[data-theme="dark"] [style*="background:#EFF2F7" i]{
  background:#0E1013 !important;
  border-top-color:#232830 !important;
}
/* Same light greys used as a CARD surface class rather than page canvas: give
   them the card colour, not the canvas colour, so cards still stand out. */
html[data-theme="dark"] .saved-prop-card-head,
html[data-theme="dark"] .mp-wcb-item{ background:#1C2027 !important; border-color:#2A2F37 !important; }

/* ── Generic surfaces ──────────────────────────────────────────────────────
   Broad, deliberately conservative: flip common white/near-white panel
   backgrounds and pure-black text. Scoped tight to layout containers so it
   doesn't repaint badges, buttons or coloured chips. */
html[data-theme="dark"] .container > section,
html[data-theme="dark"] section[style*="background:#fff"],
html[data-theme="dark"] section[style*="background:#FFFFFF"],
html[data-theme="dark"] .fp-section,
html[data-theme="dark"] .mp-listings-section,
html[data-theme="dark"] .page-hero-bar{
  background:#0E1013 !important;
  border-color:#232830 !important;
}

/* ── Property capsule (.pcap) ─────────────────────────────────────────────── */
html[data-theme="dark"] .property-card.pcap{
  background:#15181D !important;
  border-color:#262B33 !important;
  box-shadow:0 1px 2px rgba(0,0,0,.4) !important;
}
html[data-theme="dark"] .property-card.pcap:hover{ border-color:#333A44 !important; }
html[data-theme="dark"] .pcap-ic,
html[data-theme="dark"] .pcap-head .pcap-ic{ background:#20252D; }
html[data-theme="dark"] .pcap-area,
html[data-theme="dark"] .pcap-price,
html[data-theme="dark"] .pcap-details,
html[data-theme="dark"] .pcap-meta,
html[data-theme="dark"] .pcap-id{ color:#ECEEF1 !important; }
html[data-theme="dark"] .pcap-foot{ border-top-color:#242A31; }
html[data-theme="dark"] .pcap-save{ color:#7B838D; }
html[data-theme="dark"] .pcap-save:hover,
html[data-theme="dark"] .pcap-save.is-saved{ color:#fff; }
html[data-theme="dark"] .pcap-foot .mp-interest-btn{
  background:#1B2029 !important; color:#93B4F5 !important; border-color:#2E3947 !important;
}
html[data-theme="dark"] .pcap-foot .mp-interest-btn.mp-interest-done{
  background:#EDEFF2 !important; color:#0E1013 !important; border-color:#EDEFF2 !important;
}

/* ── High-Value cards (.mp-hv) ────────────────────────────────────────────── */
html[data-theme="dark"] .mp-hv-card{
  background:#15181D !important; border-color:#262B33 !important;
}
html[data-theme="dark"] .mp-hv-title,
html[data-theme="dark"] .mp-hv-area,
html[data-theme="dark"] .mp-hv-price,
html[data-theme="dark"] .mp-hv-id,
html[data-theme="dark"] .mp-hv-more{ color:#ECEEF1 !important; }
html[data-theme="dark"] .mp-hv-ic{ background:#20252D; }
html[data-theme="dark"] .mp-hv-foot{ border-top-color:#242A31; }

/* ── Buyer requirement cards (.rqc) ───────────────────────────────────────── */
html[data-theme="dark"] .rqc{ background:#15181D !important; border-color:#262B33 !important; }
html[data-theme="dark"] .rqc-icon{ background:#20252D; }
html[data-theme="dark"] .rqc-budget,
html[data-theme="dark"] .rqc-loc,
html[data-theme="dark"] .rqc-timeline,
html[data-theme="dark"] .rqc-id,
html[data-theme="dark"] .rqc-foot,
html[data-theme="dark"] .rqc-buyer{ color:#C7CDD5 !important; }
html[data-theme="dark"] .rqc-actions{ border-top-color:#242A31; }
html[data-theme="dark"] .rqc-btn-more{ background:#20252D; color:#ECEEF1; }

/* ── Requirements directory capsules (.mp-req-cap) ────────────────────────── */
html[data-theme="dark"] .mp-req-cap{ background:#15181D; border-color:#262B33; }
html[data-theme="dark"] .cap-ic{ background:#20252D; }
html[data-theme="dark"] .cap-type,
html[data-theme="dark"] .cap-area,
html[data-theme="dark"] .cap-budget,
html[data-theme="dark"] .cap-meta,
html[data-theme="dark"] .cap-admin,
html[data-theme="dark"] .cap-i{ color:#ECEEF1 !important; fill:#ECEEF1; }
html[data-theme="dark"] .mp-req-contact{ background:#15181D; border-color:#262B33; }
html[data-theme="dark"] .mrc-label{ color:#ECEEF1; }
html[data-theme="dark"] .mrc-call{ background:#EDEFF2; color:#0E1013; }

/* ── Filter controls / pills (properties + requirements) ──────────────────── */
html[data-theme="dark"] .mp-filter-v2 select,
html[data-theme="dark"] .mp-filter-v2 .mfv-search,
html[data-theme="dark"] .mp-req-filters input,
html[data-theme="dark"] .mp-req-filters select,
html[data-theme="dark"] #mp-propbar input,
html[data-theme="dark"] #mp-propbar select,
html[data-theme="dark"] .pb-search input{
  background:#15181D !important; border-color:#2A2F37 !important; color:#ECEEF1 !important;
}
html[data-theme="dark"] .mp-filter-v2 select::placeholder,
html[data-theme="dark"] .mp-filter-v2 .mfv-search::placeholder,
html[data-theme="dark"] .mp-req-filters input::placeholder{ color:#ECEEF1; opacity:.4; }
html[data-theme="dark"] .mp-filter-v2-apply{ background:#EDEFF2; color:#0E1013; }
html[data-theme="dark"] .mp-req-tab{ background:#15181D; border-color:#2A2F37; color:#ECEEF1; }
html[data-theme="dark"] .mp-req-tab.active{ background:#ECEEF1; color:#0E1013; }
html[data-theme="dark"] #mp-propbar{ background:rgba(18,21,26,.92) !important; border-bottom-color:#232830 !important; }
html[data-theme="dark"] #mp-propbar .pbtab{ color:#B7BEC7; }
html[data-theme="dark"] #mp-propbar .pbtab.on{ color:#fff; }

/* ── Footer ───────────────────────────────────────────────────────────────
   (Header + sidebar gradient live in inc/color-skins.php, targeting the real
   #site-header / .mp-sidebar selectors.) */
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] footer{ background:#101317 !important; color:#A9B0B9; }

/* ── Single-property page: inline dark text that a var() flip can't reach ───
   Several nodes carry style="color:#0F172A" / #111827 / #111 directly in the
   markup, which sat invisible on the dark panels. Attribute selectors with
   !important are the only thing that beats an inline style. */
html[data-theme="dark"] [style*="color:#0F172A"],
html[data-theme="dark"] [style*="color:#111827"],
html[data-theme="dark"] [style*="color:#111"],
html[data-theme="dark"] [style*="color:#0f172a"],
html[data-theme="dark"] [style*="color: #0F172A"],
html[data-theme="dark"] [style*="color: #111827"]{ color:#ECEEF1 !important; }

/* Fact grid (Area / Plot Area / Facing / Type / Listing ID) values + the
   asking price + panel headings on the single-property page. */
html[data-theme="dark"] .sp-fact-v,
html[data-theme="dark"] .sp-spec-v,
html[data-theme="dark"] .sp-price-val,
html[data-theme="dark"] .sp-title-card h1,
html[data-theme="dark"] .sp-panel-head h2,
html[data-theme="dark"] #sp-main h1,
html[data-theme="dark"] #sp-main h2,
html[data-theme="dark"] #sp-main h3,
html[data-theme="dark"] #sp-main strong,
html[data-theme="dark"] #sp-main p{ color:#ECEEF1 !important; }

/* Fact-grid tiles / info panels that were white cards. */
html[data-theme="dark"] .sp-fact,
html[data-theme="dark"] .sp-spec,
html[data-theme="dark"] .sp-facts,
html[data-theme="dark"] .sp-why-item,
html[data-theme="dark"] .sp-title-card{ background:transparent !important; border-color:#262B33 !important; }

/* ════════════════════════════════════════════════════════════════════════
   FULL-DARK SWEEP
   ────────────────────────────────────────────────────────────────────────
   Everything below turns the remaining light surfaces dark. Two tactics:
   (a) explicit class overrides for the white cards/sections defined in
       <style> blocks (a var() flip can't reach a literal #fff in a class);
   (b) a scoped attribute sweep for the inline style="background:#fff" panels.
   The attribute selectors use the ` i` flag (case-insensitive) and are keyed
   on "background:" so a white TEXT colour on a coloured button is never hit.
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   "MEANT-TO-BE-DARK" SURFACES that the ink-scale flip inverted
   ────────────────────────────────────────────────────────────────────────
   --ink-900/800/700 are the dark end of the grey scale. We invert them in dark
   mode so DARK TEXT becomes light and stays readable — but the same variables
   are also used as BACKGROUNDS on hero bands, CTAs, footer, dark buttons and
   table headers, which the inversion turned light. Every such surface is
   pinned back to a real dark here. (The alternative — a separate non-flipping
   "surface-ink" variable used across ~20 template files — is the clean
   long-term fix; this override achieves the same result in one place.) */

/* Dark section bands / heroes / CTAs — text on these is already white. */
html[data-theme="dark"] .cta-section,
html[data-theme="dark"] .page-hero,
html[data-theme="dark"] .hero-card-header,
html[data-theme="dark"] .contact-cta-card,
html[data-theme="dark"] .stats-bar,
html[data-theme="dark"] .forms-section-bg,
html[data-theme="dark"] .pricing-hero,
html[data-theme="dark"] .contact-strip,
html[data-theme="dark"] .saved-hero,
html[data-theme="dark"] .page-hero-bar,
html[data-theme="dark"] .about-hero,
html[data-theme="dark"] .sr-breadcrumb-bar,
/* Inline heroes: style="background:var(--ink-900)" on list-property /
   requirements / post-requirement pages. Scoped to background: so a text
   colour of var(--ink-900) is never given a background. */
html[data-theme="dark"] [style*="background:var(--ink-900)"],
html[data-theme="dark"] [style*="background: var(--ink-900)"],
html[data-theme="dark"] [style*="background:linear-gradient(135deg, var(--ink-900)"],
html[data-theme="dark"] [style*="background: linear-gradient(135deg, var(--ink-900)"]{
  background:linear-gradient(135deg,#14181D 0%,#0E1013 100%) !important;
  border-color:#232830 !important;
}

/* Dark table headers. */
html[data-theme="dark"] .leads-table th,
html[data-theme="dark"] .mp-cmp thead th{ background:#1C2027 !important; }
html[data-theme="dark"] .filter-bar-dark .filter-group select option{ background:#1C2027 !important; }

/* Dark PRIMARY buttons (.btn-ink / .btn-dark / pricing buy buttons). These sit
   ON dark cards now, so a dark button would vanish — invert them to light with
   dark text, matching the interest-button treatment. */
html[data-theme="dark"] .btn-ink,
html[data-theme="dark"] .btn-dark,
html[data-theme="dark"] .pc-btn,
html[data-theme="dark"] .mp-pkg-btn.basic{
  background:#EDEFF2 !important; color:#0E1013 !important; border-color:#EDEFF2 !important;
}
html[data-theme="dark"] .btn-ink:hover,
html[data-theme="dark"] .btn-dark:hover,
html[data-theme="dark"] .pc-btn:hover,
html[data-theme="dark"] .mp-pkg-btn.basic:hover{ background:#D6DAE0 !important; color:#0E1013 !important; }

/* ── Footer ───────────────────────────────────────────────────────────────
   #site-footer paints itself with var(--ink-900) too. */
html[data-theme="dark"] #site-footer{ background:#101317 !important; }
html[data-theme="dark"] #site-footer::before{ opacity:.4; }
html[data-theme="dark"] .footer-col h4{ color:#ECEEF1 !important; }
html[data-theme="dark"] .footer-col a,
html[data-theme="dark"] .footer-legal a,
html[data-theme="dark"] .footer-copyright,
html[data-theme="dark"] .footer-brand-desc,
html[data-theme="dark"] .footer-contact-item{ color:#A9B0B9 !important; }
/* The white pre-footer trust strip. */
html[data-theme="dark"] .mp-trust-prefooter{ background:#12161B !important; }

/* ── Enumerated light cards / sections (class-based #fff) ─────────────────── */
html[data-theme="dark"] .mp-hero2-card,
html[data-theme="dark"] .mp-hero2-search,
html[data-theme="dark"] .fp-loan-partners,
html[data-theme="dark"] .lp-card,
html[data-theme="dark"] .mp-wc-card,
html[data-theme="dark"] .mym-card,
html[data-theme="dark"] .mym-buyer-card,
html[data-theme="dark"] .mym-prompt-card,
html[data-theme="dark"] .mym-cta-bar,
html[data-theme="dark"] .fp-wrap,
html[data-theme="dark"] .fp-hero,
html[data-theme="dark"] .fp-card,
html[data-theme="dark"] .prem-plan,
html[data-theme="dark"] .prem-pay-card,
html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .wa-premium-card,
html[data-theme="dark"] .reel-card,
html[data-theme="dark"] .wcf-item,
html[data-theme="dark"] .mp-pkg,
html[data-theme="dark"] .testi-card,
html[data-theme="dark"] .brc,
html[data-theme="dark"] .sp-suggested,
html[data-theme="dark"] .sp-locpills,
html[data-theme="dark"] .sp-rel-card,
html[data-theme="dark"] .requirement-card,
html[data-theme="dark"] .mp-hero2-cat-item{
  background:#15181D !important;
  border-color:#262B33 !important;
  box-shadow:0 1px 2px rgba(0,0,0,.4) !important;
}
html[data-theme="dark"] .mp-hero2-cat-icon{ background:#20252D !important; box-shadow:inset 0 0 0 1px #2A2F37 !important; }
html[data-theme="dark"] .mp-hero2-cat-name{ color:#ECEEF1 !important; }
/* Their headings / body text that used dark literals. */
html[data-theme="dark"] .sp-suggested-head,
html[data-theme="dark"] .mp-hero2-card h1,
html[data-theme="dark"] .mp-hero2-card h2,
html[data-theme="dark"] .mp-wc-card h3,
html[data-theme="dark"] .mp-wc-card h4{ color:#ECEEF1 !important; }
/* Vendor cards (Verified Vendors strip) render via a shortcode with inline
   #fff — the scoped inline sweep below catches the card; lift their text. */
html[data-theme="dark"] .mpv-card,
html[data-theme="dark"] .mp-vendor-card{ background:#15181D !important; border-color:#262B33 !important; }

/* ── Full-width light section backgrounds ─────────────────────────────────
   The "Have a house to rent" CTA band and any near-white/grey section. */
html[data-theme="dark"] section[style*="background:#F"],
html[data-theme="dark"] section[style*="background:#f"],
html[data-theme="dark"] div[style*="background:#F3F4F6"],
html[data-theme="dark"] div[style*="background:#F9FAFB"],
html[data-theme="dark"] div[style*="background:#F8FAFC"],
html[data-theme="dark"] .fp-section[style*="background"]{
  background:#0E1013 !important;
}

/* ── Scoped inline sweep — everything still on a literal white background ──── */
html[data-theme="dark"] [style*="background:#fff" i],
html[data-theme="dark"] [style*="background: #fff" i],
html[data-theme="dark"] [style*="background:#ffffff" i],
html[data-theme="dark"] [style*="background-color:#fff" i]{
  background:#15181D !important;
  border-color:#262B33 !important;
}

/* ── Property page hero line ──────────────────────────────────────────────── */
html[data-theme="dark"] .mph-title,
html[data-theme="dark"] .mph-count,
html[data-theme="dark"] .mph-trust span{ color:#ECEEF1 !important; }

/* ── Single-property details block ────────────────────────────────────────── */
html[data-theme="dark"] #sp-main{ background:#15181D; border-color:#262B33; }
html[data-theme="dark"] #sp-main > .sp-panel{ border-top-color:#242A31 !important; }
html[data-theme="dark"] .sp-title-card,
html[data-theme="dark"] .sp-contact-card{ background:#15181D !important; border-color:#262B33 !important; }

/* Muted-grey text used all over gets lifted so it stays legible on dark. */
html[data-theme="dark"] .property-card.pcap .pcap-type{ color:var(--tc,#8FB4FF) !important; }

/* ── Header dark-mode toggle (inline icon button, not floating) ───────────── */
.mp-theme-toggle-hdr{
  width:38px; height:38px; border-radius:10px;
  border:1px solid rgba(0,0,0,.14); background:transparent;
  color:#1D3A5F;               /* dark icon so it shows on the LIGHT header */
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  padding:0; flex:0 0 auto;
  transition:background .15s, color .15s, border-color .15s;
}
.mp-theme-toggle-hdr:hover{ background:rgba(0,0,0,.05); }
/* On the dark-gradient header instances, flip to a light icon */
html[data-theme="dark"] .mp-theme-toggle-hdr{ color:#fff; border-color:rgba(255,255,255,.28); }
html[data-theme="dark"] .mp-theme-toggle-hdr:hover{ background:rgba(255,255,255,.2); }
.mp-theme-toggle svg{ width:20px; height:20px; }
.mp-theme-toggle .mp-icon-sun{ display:none; }
.mp-theme-toggle .mp-icon-moon{ display:block; }
html[data-theme="dark"] .mp-theme-toggle .mp-icon-sun{ display:block; color:#FFD36B; }
html[data-theme="dark"] .mp-theme-toggle .mp-icon-moon{ display:none; }
html[data-theme="dark"] .mp-theme-toggle-hdr{ border-color:#2A2F37; background:#1C2027; }
/* Sidebar variant reuses .mp-sb-link layout; just toggle the icons + gold in dark */
.mp-theme-toggle-sb{ background:none; border:0; width:100%; cursor:pointer; }

/* ── Mobile bottom nav — dark ─────────────────────────────────────────────── */
html[data-theme="dark"] .mp-bottom-nav{
  background:#12151A !important; border-top-color:#232830 !important;
}
html[data-theme="dark"] .mp-bottom-nav-item{ color:#9BA3AE !important; }
html[data-theme="dark"] .mp-bottom-nav-item.active{ color:#F87171 !important; }