/* public/css/dark.css — single source of truth for dark-theme overrides.
   Loaded LAST in BOTH dashboard-v2.html (home) and dashboard-v2-page.html
   (builder + sub-pages), so [data-theme="dark"] rules here win the cascade
   on every dashboard surface without editing the monolith or modular files.

   Architecture + phasing: docs/DARK_MODE_PLAN.md. Prefer the existing tokens
   (var(--paper)/--ink/--hairline...) for override values; only use literal
   dark recipes where a surface needs one (3D buttons, glass).

   Dashboard only. Customer-facing tenant sites / widgets stay light. */

/* ============================================================== */
/* PALETTE — clean cool near-black (Lovable / Claude reference,     */
/* founder 2026-06-14). Redefines the dark token values; loads last */
/* so it overrides the warm-brown :root dark tokens everywhere.     */
/* Every token-driven surface shifts to clean black at once.        */
/* ============================================================== */
[data-theme="dark"] {
  /* Softer dark (founder 2026-06-14: #141416 read too near-black). Page
     lifted to a refined dark grey; cards stepped above it so they read. */
  --cream:        #1C1C1F;   /* page background */
  --cream-2:      #26262A;   /* hover surface */
  --cream-3:      #303035;   /* pressed / deeper */
  --paper:        #242428;   /* card / sheet / input surface */
  --bone:         #2E2E33;   /* raised surface within a card */
  --topband:      #1C1C1F;   /* chrome band = page, reads continuous */

  --ink:          #F4F4F5;   /* primary text / headings */
  --ink-2:        #E4E4E6;
  --ink-mute:     #A2A2A8;   /* secondary text */
  --ink-soft:     #88888E;
  --ink-faint:    #6A6A70;

  /* Hairlines bumped (founder 2026-06-14: 0.08 was invisible on the lighter
     #1C1C1F page, dividers blended). These drive every token-based border/
     divider, so raising them makes the lines read everywhere at once. */
  --hairline:     rgba(255, 255, 255, 0.12);
  --hairline-2:   rgba(255, 255, 255, 0.17);
  --hairline-3:   rgba(255, 255, 255, 0.26);

  --glass-bg:     rgba(18, 18, 20, 0.80);
  /* accents (--orange, --blue, --green, --red) inherit from :root — they
     read fine on the cool-black surface and stay on-brand. */
}

/* Empty-state wave backdrop (.dash-hero-bg). The band-base SVG rect is a
   hardcoded #FEFEFD near-white that fills the whole viewport behind the
   composer = the white top. Darken it to the page bg (CSS `fill` overrides
   the SVG presentation attribute). The orange wave bands stay — on black
   they read like Lovable's bottom aurora. This also un-hides the greeting +
   wordmark, which are light text that was invisible on the white base. */
[data-theme="dark"] .dash-hero-bg .band-base rect { fill: #1C1C1F; }

/* ============================================================== */
/* PHASE 1 — Shared chrome (topbar, round buttons, sidebar, drawer) */
/* ============================================================== */

/* Round chrome buttons render as white circles in dark because they hardcode
   a light 3D gradient (linear-gradient(180deg,#FFFFFF 0%,#F8F8F8 100%) + dark
   borders). Flip to a raised dark recipe: dark gradient, light translucent
   borders, light icon. Mirrors the proven load-overlay dark burger. */
[data-theme="dark"] .mob-topbar-burger,
[data-theme="dark"] .side-opener,
[data-theme="dark"] .builder-back-btn,
[data-theme="dark"] .mob-topbar-back,
[data-theme="dark"] .mob-drawer-close {
  background: linear-gradient(180deg, var(--bone) 0%, var(--paper) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom-color: rgba(255, 255, 255, 0.06);
  color: #F7F7F7;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.32),
    0 2px 1px -1px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
[data-theme="dark"] .mob-topbar-burger:hover,
[data-theme="dark"] .side-opener:hover,
[data-theme="dark"] .builder-back-btn:hover,
[data-theme="dark"] .mob-topbar-back:hover,
[data-theme="dark"] .mob-drawer-close:hover {
  background: linear-gradient(180deg, var(--cream-3) 0%, var(--bone) 100%);
  border-color: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
}
[data-theme="dark"] .mob-topbar-burger:active,
[data-theme="dark"] .side-opener:active,
[data-theme="dark"] .builder-back-btn:active,
[data-theme="dark"] .mob-topbar-back:active,
[data-theme="dark"] .mob-drawer-close:active {
  background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
  box-shadow:
    0 0 2px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* The builder back button carries a text label alongside the glyph. */
[data-theme="dark"] .builder-back-btn,
[data-theme="dark"] .builder-back-btn span { color: #F7F7F7; }

/* Topbar band + its progressive glass: the band already themes via
   --topband, but the glass layers use white-tint gradients that read milky
   on a dark band. Drop them to faint light tints so the frost still reads
   without washing the band out. */
[data-theme="dark"] .mob-topbar-glass {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.015) 60%,
    transparent 100%);
}
/* On the home empty state the topbar background computes to a light literal
   (#FEFEFD) that beats the base var(--topband) rule, leaving a white strip
   at the very top. Re-assert the dark band. */
[data-theme="dark"] .mob-topbar {
  background: var(--topband) !important;
  background-color: var(--topband) !important;
}

/* Sidebar / drawer (dashboard-v2-mobile-account.css scopes these under
   #dash-side with a light literal, specificity 1,2,0 — match it with an
   id-scoped override so dark wins). The active "Home" pill was a light
   #ECEAE5 wash with light text = invisible. */
[data-theme="dark"] #dash-side .side-link.is-active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
}
[data-theme="dark"] #dash-side .side-link:hover {
  background: rgba(255, 255, 255, 0.05);
}
/* The sidebar Search box is a white input in dark. */
[data-theme="dark"] #dash-side .side-link--search,
[data-theme="dark"] #dash-side .side-link--search:hover {
  background: var(--paper);
  border-color: var(--hairline-2);
  color: var(--ink-mute);
}

/* The drawer-foot "View plan" pill is a white 3D button. */
[data-theme="dark"] .side-mbar-plan {
  background: linear-gradient(180deg, var(--bone) 0%, var(--paper) 100%);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ---- Account bottom sheet (.msheet-*, tapped from the avatar) ---- */
[data-theme="dark"] .msheet { background: var(--paper); }
[data-theme="dark"] .msheet-grab { background: var(--hairline-3); }
[data-theme="dark"] .msheet-credits { background: var(--bone); }
[data-theme="dark"] .msheet-credits-bar { background: var(--hairline-2); }
/* plan-ic is bg:var(--ink) (light in dark) with #fff icon = invisible.
   Flip to a raised dark chip with a light glyph. */
[data-theme="dark"] .msheet-plan-ic {
  background: var(--cream-3);
  color: var(--ink);
}
/* The upgrade CTA card is a light cream gradient with dark-orange text. */
[data-theme="dark"] .msheet-plan-cta {
  background: linear-gradient(180deg, rgba(217, 96, 31, 0.16) 0%, rgba(192, 72, 26, 0.10) 100%);
  border-color: rgba(217, 96, 31, 0.30);
}
[data-theme="dark"] .msheet-plan-cta b { color: var(--orange-soft); }
[data-theme="dark"] .msheet-plan-cta > span { color: var(--ink-mute); }

/* ============================================================== */
/* PHASE 2 — Surfaces + composer                                   */
/* ============================================================== */

/* Home empty-state composer box hardcodes #ffffff (home-empty.css, scoped
   body.is-empty-dash, specificity 0,2,0). Flip to the dark paper surface. */
[data-theme="dark"] body.is-empty-dash .builder-input-box {
  background: var(--paper);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom-color: rgba(255, 255, 255, 0.06);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 10px 28px -14px rgba(0, 0, 0, 0.5),
    0 28px 56px -28px rgba(0, 0, 0, 0.4);
}

/* Home "New" news pill — white frost glass + dark hairline. */
[data-theme="dark"] .builder-news-pill {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--ink-2);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 10px 28px -10px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ---- Local pages ---- */
/* Suburb card / row (white gradient). */
[data-theme="dark"] .lp-card {
  background: linear-gradient(180deg, var(--bone) 0%, var(--paper) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 4px 12px -6px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
/* Cream "rebuild on the latest builder" banner. */
[data-theme="dark"] .lp-note {
  background: rgba(217, 96, 31, 0.10);
  border-color: rgba(217, 96, 31, 0.26);
  color: var(--orange-soft);
}
/* Suggested-suburb chips. */
[data-theme="dark"] .lp-suggest-chip {
  background: var(--bone);
  border-color: rgba(255, 255, 255, 0.10);
  color: var(--ink);
}
/* Status chips: light pills read fine on dark, but tune the muted ones so
   they sit on the dark surface rather than glow. */
[data-theme="dark"] .lp-chip--needs { background: rgba(255, 255, 255, 0.08); color: var(--ink-mute); }
[data-theme="dark"] .lp-chip--hidden { background: rgba(255, 255, 255, 0.06); color: var(--ink-soft); }
/* Suburb editor bottom sheet. */
[data-theme="dark"] .lp-sheet-panel,
[data-theme="dark"] .lp-sheet { background: var(--paper); }
[data-theme="dark"] .lp-sheet-x { background: var(--bone); color: var(--ink-mute); }

/* Composer 3D squircle buttons (+, ..., map, mic) — white gradient. */
[data-theme="dark"] .builder-input-action,
[data-theme="dark"] .builder-input-more,
[data-theme="dark"] .builder-input-map,
[data-theme="dark"] .builder-input-mic {
  background: linear-gradient(180deg, var(--bone) 0%, var(--paper) 100%);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .builder-input-action:hover:not(:disabled),
[data-theme="dark"] .builder-input-more:hover:not(:disabled),
[data-theme="dark"] .builder-input-map:hover:not(:disabled),
[data-theme="dark"] .builder-input-mic:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--cream-3) 0%, var(--bone) 100%);
  border-color: rgba(255, 255, 255, 0.16);
}
/* Primary send disc is dark in light theme; on a dark composer it vanishes.
   Invert to a light disc with a dark glyph so it reads as the primary action. */
[data-theme="dark"] .builder-input-send {
  background: linear-gradient(180deg, #FAFAFA 0%, #E6E6E8 100%);
  border-color: rgba(255, 255, 255, 0.2);
  color: #1F1611;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 4px 10px -2px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
[data-theme="dark"] .builder-input-send:hover:not(:disabled) {
  background: linear-gradient(180deg, #FFFFFF 0%, #DEDEE0 100%);
}

/* ---- My website page card ---- */
/* The site card wrapper is light grey; the iframe preview inside it stays
   light (it is the customer's site), but the card chrome + meta go dark. */
/* NOTE: these surfaces get their light colour from JS-INJECTED <style>
   blocks (.ms-page .ms-v2-site-card; #set-notify .sn-title), which are added
   to the DOM at runtime AFTER dark.css and so win specificity ties. Use
   !important here (the injected rules don't use it) to win regardless. */
[data-theme="dark"] .ms-page .ms-v2-site-card {
  background: var(--paper) !important;
  border-color: var(--hairline-2) !important;
}
[data-theme="dark"] .ms-metric-cust__btn {
  background: var(--bone) !important;
  border-color: var(--hairline-2) !important;
  color: var(--ink) !important;
}

/* My Site card inner elements (injected .ms-page styles; need !important). */
[data-theme="dark"] .ms-page .ms-v2-site-card__status { color: var(--ink) !important; }
[data-theme="dark"] .ms-page .ms-v2-site-card__pause {
  background: linear-gradient(180deg, var(--bone), var(--paper)) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .ms-page .ms-v2-site-card__pause svg { color: var(--ink-mute) !important; }
[data-theme="dark"] .ms-page .ms-v2-site-card__brand .ms-v2-preview__name { color: var(--ink) !important; }
[data-theme="dark"] .ms-page .ms-v2-site-card__url { color: var(--ink-mute) !important; }
/* The light "Open site" secondary button (.ms-v2-btn-c2, injected !important). */
[data-theme="dark"] .ms-v2-btn-c2 {
  background: linear-gradient(180deg, var(--bone), var(--paper)) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .ms-v2-btn-c2:hover { background: linear-gradient(180deg, var(--cream-3), var(--bone)) !important; }

/* ---- Settings: invisible headings + row titles ---- */
/* .sn-title / .sn-row-name hardcode #1F1611 in injected styles = invisible. */
[data-theme="dark"] .sn-title { color: var(--ink) !important; }
[data-theme="dark"] .sn-row-name { color: var(--ink) !important; }
[data-theme="dark"] .sn-hint a { color: var(--ink) !important; }

/* ---- Settings / account page (.sa, injected #fff cards + #1F1611 text) ---- */
[data-theme="dark"] .sa .sa-group {
  background: var(--paper) !important;
  border-color: var(--hairline-2) !important;
}
[data-theme="dark"] .sa .sa-group-title,
[data-theme="dark"] .sa .sa-row-name,
[data-theme="dark"] .sa .sa-label,
[data-theme="dark"] .sa .sa-theme-name { color: var(--ink) !important; }
[data-theme="dark"] .sa .sa-row-sub,
[data-theme="dark"] .sa .sa-hint { color: var(--ink-mute) !important; }
/* selected theme card: active border is #1F1611 (invisible on dark). */
[data-theme="dark"] .sa .sa-theme-card.is-on { border-color: var(--ink) !important; }
[data-theme="dark"] .sa .sa-theme-card { border-color: var(--hairline-2) !important; }
/* row dividers inside the groups. */
[data-theme="dark"] .sa .sa-row { border-color: var(--hairline) !important; }
[data-theme="dark"] .sa .sa-row + .sa-row { border-top-color: var(--hairline) !important; }
/* sa nested card (linked-account chip) + inputs/selects. */
[data-theme="dark"] .sa .sa-card { background: var(--bone) !important; border-color: var(--hairline-2) !important; }
[data-theme="dark"] .sa .sa-input,
[data-theme="dark"] .sa .sa-select {
  background: var(--paper) !important; color: var(--ink) !important; border-color: var(--hairline-2) !important;
}

/* ============================================================== */
/* PHASE 3 — feature pages (injected #fff cards + #1F1611 text).    */
/* Injected per-page <style> blocks win specificity ties (added at  */
/* runtime after dark.css), so these use !important. Surfaces ->    */
/* dark; titles/values -> light; muted -> ink-mute.                 */
/* ============================================================== */

/* ---- Card / surface backgrounds -> dark paper ---- */
[data-theme="dark"] .recov-card,
[data-theme="dark"] .recov-lock-card,
[data-theme="dark"] .recov-select,
[data-theme="dark"] .qr-row,
[data-theme="dark"] .qr-empty,
[data-theme="dark"] .rp-card,
[data-theme="dark"] .rp-empty,
[data-theme="dark"] .fv2-card,
[data-theme="dark"] .fv2-panel,
[data-theme="dark"] .fv2-lrow,
[data-theme="dark"] .fv2e-card,
[data-theme="dark"] .fv2e-box,
[data-theme="dark"] .fv2e-in,
[data-theme="dark"] .fv2e-ta,
[data-theme="dark"] .fv2e-qin,
[data-theme="dark"] .fv2e-sel,
[data-theme="dark"] .fv2e-slot,
[data-theme="dark"] .fv2e-win,
[data-theme="dark"] .fv2e-tz,
[data-theme="dark"] .fhub-status-card,
[data-theme="dark"] .fhub-textarea,
[data-theme="dark"] .cal-action-btn,
[data-theme="dark"] .drafts-live-card-slim,
[data-theme="dark"] .ld-card,
[data-theme="dark"] .ld-menu,
[data-theme="dark"] .ms-kpi,
[data-theme="dark"] .ms-metric-menu,
[data-theme="dark"] .ms-prepub-input,
[data-theme="dark"] .dm-row,
[data-theme="dark"] .dm-rec,
[data-theme="dark"] .dm-empty,
[data-theme="dark"] .set-billing-header-card,
[data-theme="dark"] .set-billing-pay-card,
[data-theme="dark"] .pay-card,
[data-theme="dark"] .si-card,
[data-theme="dark"] .ss-input,
[data-theme="dark"] .qr-action {
  background: var(--paper) !important;
  border-color: var(--hairline-2) !important;
}

/* ---- Pills / segmented / buttons / bubbles -> raised dark ---- */
[data-theme="dark"] .recov-toggle-pill,
[data-theme="dark"] .recov-btn-c2,
[data-theme="dark"] .recov-sms-bubble,
[data-theme="dark"] .cal-new-btn,
[data-theme="dark"] .cal-pill,
[data-theme="dark"] .fv2-addbtn,
[data-theme="dark"] .fv2e-btn,
[data-theme="dark"] .fv2e-chip,
[data-theme="dark"] .fv2e-mode,
[data-theme="dark"] .sb-manage-btn,
[data-theme="dark"] .set-btn-ghost,
[data-theme="dark"] .set-mini-intg-connect,
[data-theme="dark"] .set-mini-intg-disconnect,
[data-theme="dark"] .qr-chip,
[data-theme="dark"] .rp-chip,
[data-theme="dark"] .rp-action,
[data-theme="dark"] .dm-btn,
[data-theme="dark"] .ld-menu-btn,
[data-theme="dark"] .ms-dd__btn,
[data-theme="dark"] .ms-v2-qpill,
[data-theme="dark"] .btn-c2 {
  background: var(--bone) !important;
  border-color: var(--hairline-2) !important;
  color: var(--ink) !important;
}

/* ---- Titles / values / labels -> light ink ---- */
[data-theme="dark"] .recov-section-title,
[data-theme="dark"] .recov-kpi-value,
[data-theme="dark"] .recov-big-stat,
[data-theme="dark"] .recov-call-text,
[data-theme="dark"] .recov-lock-title,
[data-theme="dark"] .recov-number-value,
[data-theme="dark"] .recov-radio-label,
[data-theme="dark"] .recov-settings-row__label,
[data-theme="dark"] .recov-sms-bubble,
[data-theme="dark"] .sa-action-title,
[data-theme="dark"] .set-section-title,
[data-theme="dark"] .set-row-name,
[data-theme="dark"] .set-billing-section-title,
[data-theme="dark"] .set-billing-header-tagline,
[data-theme="dark"] .set-billing-pay-text,
[data-theme="dark"] .set-invoice-date,
[data-theme="dark"] .set-invoice-amount,
[data-theme="dark"] .set-billing-upgrade-card-cta,
[data-theme="dark"] .si-name,
[data-theme="dark"] .si-section-title,
[data-theme="dark"] .ss-group-title,
[data-theme="dark"] .ss-hours-day,
[data-theme="dark"] .ss-hours-time,
[data-theme="dark"] .ss-input,
[data-theme="dark"] .ld-name,
[data-theme="dark"] .ld-field__v,
[data-theme="dark"] .ld-act,
[data-theme="dark"] .ld-back,
[data-theme="dark"] .ld-menu__item,
[data-theme="dark"] .empty-title,
[data-theme="dark"] .empty-step-title,
[data-theme="dark"] .row-name { color: var(--ink) !important; }

/* ---- Billing page (#set-billing-scoped, id specificity 1,2,0) ---- */
[data-theme="dark"] #set-billing .set-billing-header-card,
[data-theme="dark"] #set-billing .set-billing-pay-card,
[data-theme="dark"] #set-billing .set-billing-card {
  background: var(--paper) !important;
  border-color: var(--hairline-2) !important;
}
[data-theme="dark"] #set-billing .set-billing-header-tagline,
[data-theme="dark"] #set-billing .set-billing-section-title,
[data-theme="dark"] #set-billing .set-billing-pay-text,
[data-theme="dark"] #set-billing .set-invoice-date,
[data-theme="dark"] #set-billing .set-invoice-amount,
[data-theme="dark"] #set-billing .set-billing-upgrade-card-cta { color: var(--ink) !important; }
[data-theme="dark"] #set-billing .set-btn-ghost,
[data-theme="dark"] #set-billing .sb-manage-btn {
  background: var(--bone) !important;
  border-color: var(--hairline-2) !important;
  color: var(--ink) !important;
}

/* ---- Integrations page (#set-integrations-scoped) ---- */
[data-theme="dark"] #set-integrations .si-card {
  background: var(--paper) !important;
  border-color: var(--hairline-2) !important;
}
[data-theme="dark"] #set-integrations .si-name,
[data-theme="dark"] #set-integrations .si-section-title,
[data-theme="dark"] #set-integrations .set-mini-intg-connect { color: var(--ink) !important; }
[data-theme="dark"] #set-integrations .set-mini-intg-disconnect {
  background: var(--bone) !important;
  border-color: var(--hairline-2) !important;
  color: var(--ink) !important;
}

/* ---- Recovery: active segmented toggle pill (white !important) ---- */
[data-theme="dark"] .recov-toggle-pill.is-on {
  background: linear-gradient(180deg, var(--cream-3), var(--bone)) !important;
  color: var(--ink) !important;
}

/* ---- My website: Danger zone "Delete site" button ---- */
[data-theme="dark"] .ms-danger-btn {
  background: var(--bone) !important;
  border-color: var(--hairline-2) !important;
  color: var(--red) !important;
}

/* ---- Recovery: segmented toggle group + active pill + faint labels ----
   Actual markup is `.recov-page .toggle-group button(.is-on)` (id-ish
   specificity 0,2,0 / 0,3,0) so the overrides must out-scope it. */
[data-theme="dark"] .recov-page .toggle-group,
[data-theme="dark"] .toggle-group {
  background: var(--cream-2) !important;
  border-color: var(--hairline-2) !important;
}
[data-theme="dark"] .recov-page .toggle-group button { color: var(--ink-mute) !important; }
[data-theme="dark"] .recov-page .toggle-group button.is-on {
  background: var(--bone) !important;
  border-color: var(--hairline-2) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .recov-status-label,
[data-theme="dark"] .recov-select { color: var(--ink) !important; }
[data-theme="dark"] .recov-sms-link-label,
[data-theme="dark"] .recov-recent-label,
[data-theme="dark"] .recov-number-label,
[data-theme="dark"] .recov-section-subtitle,
[data-theme="dark"] .recov-kpi-label { color: var(--ink-mute) !important; }

/* ---- Integrations: Manage / Connect / Disconnect mini buttons ---- */
[data-theme="dark"] .set-mini-intg-disconnect,
[data-theme="dark"] .set-mini-intg-connect {
  color: var(--ink) !important;
  background: var(--bone) !important;
  border-color: var(--hairline-2) !important;
}

/* ============================================================== */
/* PHASE 3d — dividers / borders blending into the dark surface     */
/* Hardcoded rgba(31,22,17,...) borders + 1px divider lines are     */
/* invisible on dark. Recolour to the light hairline token.         */
/* ============================================================== */
[data-theme="dark"] .ms-v2-site-card__header,
[data-theme="dark"] .ms-v2-site-card__actions-secondary,
[data-theme="dark"] .ms-rep-metric,
[data-theme="dark"] .my-site-recent,
[data-theme="dark"] .sa-action-row,
[data-theme="dark"] .sa-section,
[data-theme="dark"] .recov-hairline,
[data-theme="dark"] .recov-radio-row,
[data-theme="dark"] .recov-settings-row,
[data-theme="dark"] .cal-grid-wrap,
[data-theme="dark"] .cal-conn-card,
[data-theme="dark"] .cal-tabs,
[data-theme="dark"] .set-invoice-grid,
[data-theme="dark"] .drafts-row,
[data-theme="dark"] .drafts-newchat-row,
[data-theme="dark"] .drafts-pill,
[data-theme="dark"] .drafts-ring { border-color: var(--hairline-2) !important; }

/* Ghost / outline buttons: these carry a WHITE gradient via background-IMAGE
   (not background-color), so we must reset the image, not just the colour. */
[data-theme="dark"] .recov-btn-ghost,
[data-theme="dark"] .sa-btn-ghost,
[data-theme="dark"] .lp-btn,
[data-theme="dark"] .fd-btn {
  background: var(--bone) !important;
  background-image: none !important;
  border-color: var(--hairline-2) !important;
  color: var(--ink) !important;
}
/* Inputs */
[data-theme="dark"] .lp-input,
[data-theme="dark"] .lp-toggle {
  background: var(--paper) !important;
  background-image: none !important;
  border-color: var(--hairline-2) !important;
  color: var(--ink) !important;
}

/* Misc faint helper labels on settings cards. */
[data-theme="dark"] .set-help,
[data-theme="dark"] .sa .set-help { color: var(--ink-mute) !important; }
/* Inline-styled dark text on the account page (e.g. "Business logo" heading
   is <div style="color:#1F1611">). CSS !important beats inline non-important. */
[data-theme="dark"] .sa [style*="color:#1F1611"],
[data-theme="dark"] .sa [style*="color: #1F1611"] { color: var(--ink) !important; }
[data-theme="dark"] .sa [style*="color:#6B5A4C"],
[data-theme="dark"] .sa [style*="color: #6B5A4C"] { color: var(--ink-mute) !important; }

/* Background-based 1px hairline divider elements (height:1px; bg rgba ink) */
[data-theme="dark"] .ms-divider,
[data-theme="dark"] .ms-section-divider,
[data-theme="dark"] .sa-divider,
[data-theme="dark"] .set-hr,
[data-theme="dark"] .recov-rule { background: var(--hairline-2) !important; }

/* Billing invoice row dividers (#set-billing-scoped, id specificity). */
[data-theme="dark"] #set-billing .set-invoice-grid,
[data-theme="dark"] #set-billing .set-invoice-grid + .set-invoice-grid { border-color: var(--hairline-2) !important; }
/* Calendar active tab indicator + drafts card thumb/button borders. */
[data-theme="dark"] .cal-tabs__indicator { background: var(--ink) !important; }
[data-theme="dark"] .drafts-live-card-slim__thumb,
[data-theme="dark"] .drafts-live-card-slim__btn { border-color: var(--hairline-2) !important; }

/* ============================================================== */
/* PHASE 3e — Inbox (/dashboard-v2/inbound) — .leads-v4 scoped     */
/* White cards + #1F1611 names were invisible. All .leads-v4-      */
/* scoped (0,2,0), so overrides must out-scope with .leads-v4.     */
/* ============================================================== */
[data-theme="dark"] .leads-v4 .ld-card,
[data-theme="dark"] .leads-v4 .ld-menu {
  background: var(--paper) !important;
  background-image: none !important;
  border-color: var(--hairline-2) !important;
}
/* Buttons / steps / avatars / menu buttons (white gradient + dark text) */
[data-theme="dark"] .leads-v4 .btn-c2,
[data-theme="dark"] .leads-v4 .ld-act,
[data-theme="dark"] .leads-v4 .ld-back,
[data-theme="dark"] .leads-v4 .ld-menu-btn,
[data-theme="dark"] .leads-v4 .ld-step,
[data-theme="dark"] .leads-v4 .row-avatar--visit,
[data-theme="dark"] .leads-v4 .posthog-icon {
  background: var(--bone) !important;
  background-image: none !important;
  border-color: var(--hairline-2) !important;
  color: var(--ink) !important;
}
/* Names / values / titles -> light */
[data-theme="dark"] .leads-v4 .row-name,
[data-theme="dark"] .leads-v4 .ld-name,
[data-theme="dark"] .leads-v4 .ld-field__v,
[data-theme="dark"] .leads-v4 .ld-menu__item,
[data-theme="dark"] .leads-v4 .empty-title,
[data-theme="dark"] .leads-v4 .empty-step-title,
[data-theme="dark"] .leads-v4 .posthog-title { color: var(--ink) !important; }
/* Inner dividers / photo + map borders */
[data-theme="dark"] .leads-v4 .hr,
[data-theme="dark"] .leads-v4 .ld-map-link,
[data-theme="dark"] .leads-v4 .ld-photo { border-color: var(--hairline-2) !important; }

/* Inbox: list ROWS carry a white gradient via background-IMAGE (probes that
   read background-color miss them). Reset image + dark surface. */
[data-theme="dark"] .leads-v4 .row,
[data-theme="dark"] .leads-v4 .row.is-cancelled {
  background: var(--paper) !important;
  background-image: none !important;
  border-color: var(--hairline-2) !important;
}
/* Inbox top stat card */
[data-theme="dark"] .leads-pulse-card {
  background: var(--paper) !important;
  background-image: none !important;
  border-color: var(--hairline-2) !important;
}
/* Inbox filter tabs (All / Needs reply / Bookings / Quotes) */
[data-theme="dark"] .leads-v4 .leads-tabs,
[data-theme="dark"] .leads-tabs { background: var(--cream-2) !important; background-image: none !important; }
[data-theme="dark"] .leads-v4 .leads-tab,
[data-theme="dark"] .leads-tab {
  background: transparent !important;
  background-image: none !important;
  color: var(--ink-mute) !important;
}
[data-theme="dark"] .leads-v4 .leads-tab.is-on,
[data-theme="dark"] .leads-v4 .leads-tab.is-active,
[data-theme="dark"] .leads-v4 .leads-tab[aria-selected="true"],
[data-theme="dark"] .leads-tab.is-on { color: var(--ink) !important; }
[data-theme="dark"] .leads-tab-ind { background: var(--bone) !important; border-color: var(--hairline-2) !important; }

/* Inbox/Drafts filter pills (.drafts-pill). Give them the dark 3D gradient
   like the cards/buttons; the active pill lifts brighter to read as selected. */
[data-theme="dark"] .drafts-filters .drafts-pill,
[data-theme="dark"] .leads-v4 .drafts-pill {
  background: linear-gradient(180deg, var(--bone) 0%, var(--paper) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--ink-mute) !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
[data-theme="dark"] .drafts-filters .drafts-pill.is-on,
[data-theme="dark"] .leads-v4 .drafts-pill.is-on,
[data-theme="dark"] .drafts-filters .drafts-pill[aria-selected="true"],
[data-theme="dark"] .leads-v4 .drafts-pill[aria-selected="true"] {
  background: linear-gradient(180deg, var(--cream-3) 0%, var(--bone) 100%) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: var(--ink) !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

/* ============================================================== */
/* PHASE 3f — feature-page ACTION buttons get the 3D gradient      */
/* (founder 2026-06-14: the chrome 3D is fine, but inbox/feature   */
/* buttons were flattened to plain grey — give them the same       */
/* tactile recipe). Placed last so it wins the earlier flat rules. */
/* Chips/pills/badges/inputs are intentionally NOT included.       */
/* ============================================================== */
[data-theme="dark"] .qr-action,
[data-theme="dark"] .rp-action,
[data-theme="dark"] .leads-v4 .btn-c2,
[data-theme="dark"] .leads-v4 .ld-act,
[data-theme="dark"] .leads-v4 .ld-back,
[data-theme="dark"] .leads-v4 .ld-menu-btn,
[data-theme="dark"] .btn-c2,
[data-theme="dark"] .sb-manage-btn,
[data-theme="dark"] #set-billing .sb-manage-btn,
[data-theme="dark"] .set-btn-ghost,
[data-theme="dark"] #set-billing .set-btn-ghost,
[data-theme="dark"] .set-mini-intg-connect,
[data-theme="dark"] .set-mini-intg-disconnect,
[data-theme="dark"] #set-integrations .set-mini-intg-disconnect,
[data-theme="dark"] .cal-new-btn,
[data-theme="dark"] .fd-btn,
[data-theme="dark"] .fv2-addbtn,
[data-theme="dark"] .fv2e-btn,
[data-theme="dark"] .dm-btn,
[data-theme="dark"] .recov-btn-c2,
[data-theme="dark"] .recov-btn-ghost,
[data-theme="dark"] .sa-btn-ghost,
[data-theme="dark"] .lp-btn,
[data-theme="dark"] .ms-dd__btn {
  background: linear-gradient(180deg, var(--bone) 0%, var(--paper) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--ink) !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.32),
    0 2px 1px -1px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

/* ============================================================== */
/* PHASE 3g — cards that have the 3D gradient in light get it in   */
/* dark too (founder 2026-06-14: inbox lead cards looked flat).    */
/* Only the cards that used the white card gradient in light:      */
/* .leads-v4 .row, .ms-kpi, forms-editor boxes. Flat-white cards   */
/* stay flat (var(--paper)) by design. Placed last to win.         */
/* ============================================================== */
[data-theme="dark"] .leads-v4 .row,
[data-theme="dark"] .leads-v4 .row.is-cancelled,
[data-theme="dark"] .ms-kpi,
[data-theme="dark"] .fhub-svc,
[data-theme="dark"] .fv2e-box,
[data-theme="dark"] .fv2e-slot,
[data-theme="dark"] .fv2e-win,
[data-theme="dark"] .fv2e-biz {
  background: linear-gradient(180deg, var(--bone) 0%, var(--paper) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 4px 12px -6px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* ============================================================== */
/* PHASE 3h — Drafts page: list rows + new-website bar + live-card */
/* View button carry white gradients via background-image. Give    */
/* the rows the dark 3D card gradient and the View btn the 3D btn.  */
/* ============================================================== */
[data-theme="dark"] .drafts-row,
[data-theme="dark"] .drafts-newchat-row {
  background: linear-gradient(180deg, var(--bone) 0%, var(--paper) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--ink) !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 4px 12px -6px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
[data-theme="dark"] .drafts-live-card-slim__btn {
  background: linear-gradient(180deg, var(--bone) 0%, var(--paper) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--ink) !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

/* ============================================================== */
/* PHASE 3i — remaining settings pages (Usage, Schedule, Domain)   */
/* + the stubborn integrations Manage button.                      */
/* ============================================================== */
/* Usage */
[data-theme="dark"] .um-meter-label,
[data-theme="dark"] .um-row-name { color: var(--ink) !important; }
[data-theme="dark"] .um-btn,
[data-theme="dark"] #set-usage .um-btn,
[data-theme="dark"] .dm-btn,
[data-theme="dark"] #set-domain .dm-btn {
  background: linear-gradient(180deg, var(--bone) 0%, var(--paper) 100%) !important;
  background-image: linear-gradient(180deg, var(--bone) 0%, var(--paper) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--ink) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}
/* Domain */
[data-theme="dark"] .dm-empty-title { color: var(--ink) !important; }
/* Schedule & area */
[data-theme="dark"] .ss-group { background: var(--paper) !important; border-color: var(--hairline-2) !important; }
[data-theme="dark"] .ss-label { color: var(--ink) !important; }
[data-theme="dark"] .set-chip {
  background: var(--bone) !important; background-image: none !important;
  border-color: var(--hairline-2) !important; color: var(--ink) !important;
}
[data-theme="dark"] .ss-select {
  background: var(--paper) !important; background-image: none !important;
  border-color: var(--hairline-2) !important; color: var(--ink) !important;
}
/* Integrations "Manage" button — super-specific nuke (white gradient via
   background-image under #set-integrations .si-card). */
[data-theme="dark"] #set-integrations .si-card .set-mini-intg-disconnect,
[data-theme="dark"] #set-integrations .si-card .set-mini-intg-connect {
  background: linear-gradient(180deg, var(--bone) 0%, var(--paper) 100%) !important;
  background-image: linear-gradient(180deg, var(--bone) 0%, var(--paper) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--ink) !important;
}

/* Usage + Domain: id-scoped dark text labels that beat my unscoped rules. */
[data-theme="dark"] #set-usage .um-meter-label,
[data-theme="dark"] #set-usage .um-row-name { color: var(--ink) !important; }
[data-theme="dark"] #set-domain .dm-empty-title { color: var(--ink) !important; }

/* ============================================================== */
/* PHASE 3j — Usage/Domain weird-box + warm text fixes             */
/* set-card/set-block are transparent layout wrappers in light     */
/* (not cards); a paper bg in dark made a boxy shade with no        */
/* outline. Keep them transparent. Neutralise warm-brown muted     */
/* text (#6B5A4C/#8a7866) -> grey. Fix domain light boxes.         */
/* ============================================================== */
[data-theme="dark"] .set-card,
[data-theme="dark"] .set-block { background: transparent !important; border: 0 !important; box-shadow: none !important; }

[data-theme="dark"] #set-usage .um-meter-sub,
[data-theme="dark"] #set-usage .um-pct,
[data-theme="dark"] #set-usage .um-intro,
[data-theme="dark"] #set-usage .um-row-sub,
[data-theme="dark"] .um-meter-sub,
[data-theme="dark"] .um-pct,
[data-theme="dark"] .um-intro,
[data-theme="dark"] .um-row-sub,
[data-theme="dark"] #set-domain .dm-default-sub,
[data-theme="dark"] #set-domain .dm-empty-sub,
[data-theme="dark"] #set-domain .dm-dns-lede,
[data-theme="dark"] #set-domain .dm-dns-hint,
[data-theme="dark"] .dm-default-sub,
[data-theme="dark"] .dm-empty-sub,
[data-theme="dark"] .dm-dns-lede,
[data-theme="dark"] .dm-dns-hint { color: var(--ink-mute) !important; }

[data-theme="dark"] .dm-default {
  background: var(--bone) !important;
  border-color: var(--hairline-2) !important;
}
[data-theme="dark"] .dm-rec { background: var(--paper) !important; border-color: var(--hairline-2) !important; }

/* ============================================================== */
/* Builder intake FORM (re-enabled 2026-06-14) — dark support      */
/* Card/inputs use tokens (dark already). These cover the bits     */
/* that don't: primary button, active CTA pill, chips, photo.      */
/* ============================================================== */
/* Primary "Build my site" — invert to a light button like the send disc. */
[data-theme="dark"] .builder-form-submit {
  background: linear-gradient(180deg, #FBFBFA 0%, #E6E6E8 100%) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #1F1611 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px -6px rgba(0, 0, 0, 0.4) !important;
}
/* Segmented CTA: active pill light-fill, inactive readable. */
[data-theme="dark"] .builder-form-segmented { background: var(--paper) !important; border-color: var(--hairline-2) !important; }
[data-theme="dark"] .builder-form-seg { color: var(--ink-mute) !important; border-right-color: var(--hairline) !important; }
[data-theme="dark"] .builder-form-seg.is-on { background: var(--ink) !important; color: var(--cream) !important; }
[data-theme="dark"] .builder-form-seg:hover { background: rgba(255, 255, 255, 0.05) !important; color: var(--ink) !important; }
/* Suburb chips. */
[data-theme="dark"] .builder-form-chip { background: var(--bone) !important; border-color: var(--hairline-2) !important; color: var(--ink) !important; }
/* Photo dropzone. */
[data-theme="dark"] .builder-form-photo { background: var(--bone) !important; border-color: var(--hairline-2) !important; }
[data-theme="dark"] .builder-form-photo-pick { color: var(--ink-mute) !important; }
/* Header bar + select inherit tokens; ensure title/step contrast. */
[data-theme="dark"] .builder-form-htitle { color: var(--ink) !important; }
[data-theme="dark"] .builder-form-hstep { color: var(--ink-faint) !important; }

/* ============================================================== */
/* AI thinking pulse — the gradient is hardcoded DARK ink          */
/* (rgba(31,22,17)), invisible on the dark page. Flip the sweep    */
/* to light ink so "Understanding your request" reads in dark.     */
/* (.is-settled + .builder-thinking-eye already use --ink tokens.) */
/* ============================================================== */
[data-theme="dark"] .builder-thinking-pulse {
  background: linear-gradient(
    90deg,
    rgba(244, 244, 245, 1.00)  0%,
    rgba(244, 244, 245, 1.00) 42%,
    rgba(244, 244, 245, 0.22) 50%,
    rgba(244, 244, 245, 1.00) 58%,
    rgba(244, 244, 245, 1.00) 100%
  ) !important;
  background-size: 220% 100% !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}