/* DEPRECATED: the per-class patch list below is no longer the theming mechanism.
   The token block on html[data-theme="dark"] (and :root in app.css) is the supported
   one. Nothing new may be added to the patch list — a component that needs a
   dark-specific rule is not tokenised yet. The blanket text/input rules and every
   existing patch stay until those components move onto the tokens. The note further
   down that pop-up modals are left light is superseded; the modal shell follows
   the tokens. */

/* =====================================================================================
   Dark theme for MyAnimals.club
   -------------------------------------------------------------------------------------
   Activated by `html[data-theme="dark"]` (set by an inline script in App.razor before
   first paint, and toggled at runtime by siteChrome in spaModule.js).

   Strategy: keep the brand-coloured chrome (section frames, hero gradients, badges,
   the member sub-nav band) and the pop-up modals as-is — they already read well on a
   dark canvas — and re-skin the "paper" surfaces: the app background, the top header,
   the scrolling content cards, and the text/inputs inside them. These rules live in a
   GLOBAL stylesheet so they out-specify component scoped CSS (html[data-theme] + class
   beats the scoped `.class[b-hash]`).
   This is a first pass covering the app chrome + public/member content surfaces.
   ===================================================================================== */

html[data-theme="dark"] {
    --ma-bg: #12160e;
    --ma-paper: #191e13;
    /* Cards sit a step above the paper with a clearly visible edge so tiles read as tiles. */
    --ma-surface: #242c1b;
    --ma-surface-2: #2e3624;
    --ma-surface-3: #384226;
    --ma-border: #46522f;
    --ma-text: #e4e9db;
    --ma-text-muted: #b7c1a8;
    --ma-heading: #f0f4e9;
    --ma-link: #7fd0d8;
    --ma-accent: #8fc873;
    --ma-accent-ink: #12160e;
    --ma-danger: #ef8f86;
    --ma-focus: #7fd0d8;
    --ma-teal: #4fa8b2;
    /* --ma-column is geometry, not colour, and is deliberately NOT restated here. Redeclaring it
       on this selector outranks :root, so an override aimed at :root silently loses and the ad
       rails appear to be mispositioned when they are not. */
    --ma-caution: #e0bd63;
    --ma-positive: #8fc873;
    --ma-info: #74b6dd;
    /* The washes are a tint of the surface rather than of the status colour, which is what
       keeps a status tile from glowing against the page. The status ink carries the meaning. */
    --ma-danger-wash: #3a2a26;
    --ma-caution-wash: #38321e;
    --ma-positive-wash: #2b3a22;
    --ma-info-wash: #26333c;
    /* Busy wash for AsyncArea: a tint of the dark surfaces, not a lightening veil, so a loading
       region darkens slightly instead of flashing pale. */
    --ma-async-wash-1: rgba(25, 30, 19, 0.45);
    --ma-async-wash-2: rgba(56, 66, 38, 0.72);
    --ma-async-spin: #8fc873;
    --ma-async-track: rgba(228, 233, 219, 0.18);
    color-scheme: dark;
}

html[data-theme="dark"] body {
    background-color: var(--ma-bg);
    color: var(--ma-text);
}

/* ---- Top header ---- */
html[data-theme="dark"] .navBarTop.header-default,
html[data-theme="dark"] .navBarTop.header-admin {
    background-color: #171c10;
    /* No drop-shadow: it sat as a dark bar under the tab titles and broke the folder-tab seam. */
    box-shadow: none;
    color: #f1f5ec;
}

html[data-theme="dark"] .navBarTop.header-admin .section-account .theme-toggle,
html[data-theme="dark"] .navBarTop.header-admin .section-account .user-icon-trigger,
html[data-theme="dark"] .navBarTop.header-admin .section-account .user-icon-trigger .bi-person-circle {
    color: #f1f5ec;
}

html[data-theme="dark"] .site-menu ::deep a.gtab,
html[data-theme="dark"] .site-menu a.gtab {
    text-shadow: none;
    filter: none;
}

html[data-theme="dark"] .site-brand,
html[data-theme="dark"] .admin-brand { color: #f1f5ec; }
/* The amber outline goes muddy on the dark header; lift it to the dark caution tone. */
html[data-theme="dark"] .site-brand .brand-beta { border-color: #c79a35; color: #e0b452; }
html[data-theme="dark"] .admin-brand .brand-tld { color: #9bb88a; }
html[data-theme="dark"] .admin-badge { background: #3d5a34; }
html[data-theme="dark"] .user_count_wrapper,
html[data-theme="dark"] .user_count_wrapper_mobile {
    background: #1f2618;
    border-color: #3a4632;
    color: #e8f0e2;
}

html[data-theme="dark"] .parent-menu-item,
html[data-theme="dark"] .top-level-link {
    color: #cdd6c1;
}

html[data-theme="dark"] .parent-menu-item:hover,
html[data-theme="dark"] .top-level-link:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #f1f5ec;
}

html[data-theme="dark"] .top-level-link.active,
html[data-theme="dark"] .parent-active .parent-menu-item {
    background-color: #3d5a34;
    color: #fff;
    border-color: #3d5a34;
}

/* Inactive global tabs + header icons go to a uniform soft light; the active tab keeps
   its coloured fill/white text (untouched via :not(.active)). */
html[data-theme="dark"] .gtab:not(.active) { color: #cdd6c1; }
html[data-theme="dark"] .navBarTop.header-default .bi:not(.brand-accent):not(.brand-tld) { color: #cdd6c1; }

/* ---- The scrolling content "paper" (public + member app-shells) ---- */
html[data-theme="dark"] .public-content-full,
html[data-theme="dark"] .member-content-full {
    background: var(--ma-paper);
}

/* Placeholder public sections (Community / Breeding / Events / Wildlife) used cream paper +
   white cards. Recolour them so the lower half matches Groups/Adoptions. */
html[data-theme="dark"] .section-body {
    background: var(--ma-paper);
}

html[data-theme="dark"] .section-body h2 {
    color: var(--ma-heading);
}

html[data-theme="dark"] .section-card {
    background: var(--ma-surface);
    border-color: var(--ma-border);
    box-shadow: none;
}

html[data-theme="dark"] .section-card h3 {
    color: var(--ma-heading);
}

html[data-theme="dark"] .section-card p,
html[data-theme="dark"] .section-cta p {
    color: var(--ma-text-muted);
}

html[data-theme="dark"] .section-card-icon {
    color: #8fbe6f;
}

/* Default text + headings inside the content scrollers. Element-level selectors here
   out-specify single-class scoped rules, so hard-coded dark text is recoloured. */
html[data-theme="dark"] .public-scroll,
html[data-theme="dark"] .member-scroll {
    color: var(--ma-text);
}

html[data-theme="dark"] .public-scroll :is(h1, h2, h3, h4, h5, h6),
html[data-theme="dark"] .member-scroll :is(h1, h2, h3, h4, h5, h6) {
    color: var(--ma-heading);
}

html[data-theme="dark"] .public-scroll :is(p, li, label, dt, dd, small, span),
html[data-theme="dark"] .member-scroll :is(p, li, label, dt, dd, small, span) {
    color: var(--ma-text);
}

/* Keep already-light text on coloured panels/badges readable (don't force muted). */
html[data-theme="dark"] .contact-info :is(h1, h2, h3, p, span, a, strong),
html[data-theme="dark"] .grp-cat,
html[data-theme="dark"] .adopt-pub-badge,
/* Buttons are excluded: a hero's call-to-action paints its own pale pill and chooses its own ink,
   so forcing white here made those white-on-white. Hero prose still gets white. The descendant
   forms matter as much as the element itself — a button's icon span carries no "btn" class of its
   own, so excluding only the button left the icon white on the pale pill. */
html[data-theme="dark"] [class*="hero"] :is(h1, h2, h3, p, span, a):not(
    :is([class*="btn"], [class*="cta"], [class*="btn"] *, [class*="cta"] *)
) {
    color: #fff;
}

/* Excluding them from the white above is only half of it: the broad .public-scroll span rule
   then claims the icon and paints it the page's body colour, which is just as light. A pill's
   contents take the pill's own ink, whatever each hero chose it to be. */
html[data-theme="dark"] [class*="hero"] :is([class*="btn"], [class*="cta"]) :is(span, strong, small, i, svg) {
    color: inherit;
}

/* ---- Cards / surfaces inside the content area ---- */
html[data-theme="dark"] :is(
    .grp-card, .grp-listitem, .grp-search, .grp-view-toggle,
    .adopt-pub-card, .adopt-listitem, .adopt-search, .adopt-view-toggle,
    .contact-form-card,
    .gd-card, .gd-event,
    .hl-form-card, .hl-table-wrap,
    .ev-form-card, .ev-cal,
    .gr-form-card,
    .ag-table-wrap
) {
    background: var(--ma-surface);
    border-color: var(--ma-border);
}

/* Pill filters / chips / toggles → slightly lighter than the card. */
html[data-theme="dark"] :is(.grp-filter, .adopt-filter, .adopt-chip) {
    background: var(--ma-surface-2);
    border-color: var(--ma-border);
    color: var(--ma-text);
}

/* ---- Form controls in the content area ---- */
html[data-theme="dark"] .public-scroll :is(input, textarea, select),
html[data-theme="dark"] .member-scroll :is(input, textarea, select),
html[data-theme="dark"] .contact-input {
    background: var(--ma-surface-2);
    color: var(--ma-text);
    border-color: var(--ma-border);
}

html[data-theme="dark"] .public-scroll ::placeholder,
html[data-theme="dark"] .member-scroll ::placeholder {
    color: var(--ma-text-muted);
}

/* Search pills wrap a transparent input; recolour the pill + its icon. */
html[data-theme="dark"] :is(.grp-search, .adopt-search) input { background: transparent; }
html[data-theme="dark"] :is(.grp-search .bi, .adopt-search .bi) { color: var(--ma-text-muted); }

/* Account Details modal (nav dropdown) — align with dark surfaces. */
html[data-theme="dark"] .accountDetailsOuterWrapper { background: var(--ma-surface); color: var(--ma-text); }
html[data-theme="dark"] .accountDetailsWrapper { background: var(--ma-surface); }
/* The card selector has to carry the parent class as well. AccountDetails.razor.css styles this
   card through `.accountDetailsWrapper ::deep .accountDetailsItemWrapper`, and ::deep puts the
   scope attribute on the ANCESTOR — `.accountDetailsWrapper[b-hash] .accountDetailsItemWrapper`,
   which is (0,3,0). A plain `html[data-theme] .accountDetailsItemWrapper` is only (0,2,1) and lost,
   so the card kept its cream background while the text above went light: unreadable. */
html[data-theme="dark"] .accountDetailsWrapper .accountDetailsItemWrapper,
html[data-theme="dark"] .accountDetailsItemWrapper { background: var(--ma-surface-2); border-color: var(--ma-border); }
html[data-theme="dark"] .accountDetailsWrapper .accountDetailsItemWrapper > h4,
html[data-theme="dark"] .accountDetailsItemWrapper > h4 { color: var(--ma-heading); }

/* The address under each Settings card pins its dark green with !important, so only !important
   displaces it; left alone it sat green-on-green at about 1.2:1. */
html[data-theme="dark"] .settings-email { color: var(--ma-text) !important; }

/* Animal-outline picker. These chips are pure white with dark green glyphs, which survives on a
   light page and turns into a row of glare on a dark one. The selected chip keeps a green cast so
   the choice still reads without relying on the ring alone. */
html[data-theme="dark"] .ppp-chip { background: var(--ma-surface-2); border-color: var(--ma-border); color: var(--ma-text); }
html[data-theme="dark"] .ppp-chip.is-on { background: #33472c; border-color: #6fae59; box-shadow: 0 0 0 2px #3f6033; }
html[data-theme="dark"] .ppp-preview p { color: var(--ma-text-muted); }
html[data-theme="dark"] .ppp-clear { color: #d9ad93; }
html[data-theme="dark"] .accountDetailsWrapper .form-group > label { color: var(--ma-text-muted); }
html[data-theme="dark"] .accountDetailsWrapper .form-control { background: var(--ma-surface); color: var(--ma-text); border-color: var(--ma-border); }
html[data-theme="dark"] .accountDetailsWrapper .form-control:disabled { background: var(--ma-surface-2); color: var(--ma-text-muted); }
html[data-theme="dark"] .accountDetails-footer { background: var(--ma-surface-2); border-color: var(--ma-border); }
html[data-theme="dark"] .successWrapper,
html[data-theme="dark"] .errorResponseWrapper { background: var(--ma-surface-2); border-color: var(--ma-border); }
html[data-theme="dark"] :is(.loading, .success, .errorResponse) { background: rgba(0,0,0,0.55); }

/* Login / Register / password dialogs (nav dropdown, and the #Login deep link). These panels
   pin `background-color: white` in their component CSS, so the dark body text colour cascaded
   in and left the headings and field labels near-white on white — unreadable. Each panel needs
   its background restated here, not just its text. */
html[data-theme="dark"] :is(.userControlDiv.active, .userDetailsDiv.active) { background-color: var(--ma-surface); color: var(--ma-text); }
html[data-theme="dark"] .accountUnAuthorizedDiv { background-color: var(--ma-surface); color: var(--ma-text); border-color: var(--ma-border); }
html[data-theme="dark"] .accountDropdownContent { background-color: var(--ma-surface); color: var(--ma-text); border-color: var(--ma-border); }
html[data-theme="dark"] .accountDropdownContent .dropdown-item { color: var(--ma-text); }
html[data-theme="dark"] :is(.accountDropdownContent, .accountUnAuthorizedDiv) .dropdown-item:hover { background-color: var(--ma-surface-2); }
html[data-theme="dark"] .admin-wrapper { background-color: var(--ma-surface); border-color: var(--ma-border); }
/* The Administrator link pins its red with !important, and that red is too dark to read on
   the dark surface; reuse the lighter danger tone used elsewhere in this file. */
html[data-theme="dark"] .admin-wrapper { color: #ef8f86 !important; }

html[data-theme="dark"] :is(.loginWrapper, .registrationWrapper, .resetPasswordWrapper) { border-color: var(--ma-border); color: var(--ma-text); }
html[data-theme="dark"] :is(.loginWrapper, .registrationWrapper, .resetPasswordWrapper) :is(h3, h4) { color: var(--ma-heading); }
html[data-theme="dark"] :is(.loginWrapper, .registrationWrapper, .resetPasswordWrapper) label { color: var(--ma-text-muted); }
html[data-theme="dark"] :is(.loginWrapper, .registrationWrapper, .resetPasswordWrapper) .form-control { background-color: var(--ma-surface); color: var(--ma-text); border-color: var(--ma-border); }
html[data-theme="dark"] :is(.loginWrapper, .registrationWrapper, .resetPasswordWrapper) .form-control::placeholder { color: var(--ma-text-muted); }

/* The close affordance is a white pill with red trim pinned in app.css; on a dark panel the
   glyph sat white-on-white and the control read as an empty circle. */
html[data-theme="dark"] .DialogClose { background: var(--ma-surface-2); color: var(--ma-text); border-color: var(--ma-border); }
html[data-theme="dark"] .DialogClose:hover { background: #0f6e78; color: #fff; border-color: #0f6e78; }

/* P.R.I.S.M. contextual action ring. The pills tint their background from --ma-paper, which this
   file does flip, but their label reads `var(--ma-ink, #2a2118)` and --ma-ink is defined nowhere in
   the codebase — so the fallback brown held while the background went dark, leaving dark-on-dark
   text. Restate the label and lift the ring, which was also too dim to find on the dark canvas. */
html[data-theme="dark"] .prism-action { color: var(--ma-text); border-color: color-mix(in srgb, #0f6e78 62%, transparent); }
html[data-theme="dark"] .prism-action-icon { color: #4db8c0; }
html[data-theme="dark"] .prism-actions-toggle { color: var(--ma-text); border-color: color-mix(in srgb, #0f6e78 62%, transparent); background: color-mix(in srgb, var(--ma-surface, #1e2730) 88%, transparent); }
html[data-theme="dark"] .prism-actions-toggle:hover,
html[data-theme="dark"] .prism-actions-toggle:focus-visible { background: var(--ma-surface, #1e2730); color: #4db8c0; }

/* Animal ID badge on the profile. */
html[data-theme="dark"] .ad-badge-code { background: #24303c; color: #b9cbdc; }
html[data-theme="dark"] .ad-badge-share { background: #24303c; color: #9fc0dd; }
html[data-theme="dark"] .ad-badge-share:hover { background: #2c3d4c; }
html[data-theme="dark"] .ad-share-panel { background: #1e2730; border-color: #2c3844; }
html[data-theme="dark"] .ad-share-info h4 { color: #dfe7d6; }
html[data-theme="dark"] .ad-share-info p { color: #aab6a0; }
html[data-theme="dark"] .ad-share-open { color: #9fc0dd; }

/* Animal profile actions menu + headline/status. */
html[data-theme="dark"] .ad-actions-btn { background: #263019; color: #d3dcc6; border-color: #384428; }
html[data-theme="dark"] .ad-actions-btn:hover { background: #2e3a1f; }
html[data-theme="dark"] .ad-actions-pop { background: #1e2730; border-color: #2c3844; box-shadow: 0 10px 28px rgba(0,0,0,0.45); }
html[data-theme="dark"] .ad-action-item { color: #d3dcc6; }
html[data-theme="dark"] .ad-action-item:hover { background: #26313b; }
html[data-theme="dark"] .ad-action-item .bi { color: #93a487; }
html[data-theme="dark"] .ad-action-danger { color: #ef8f86; }
html[data-theme="dark"] .ad-action-danger:hover { background: #3a2321; }
html[data-theme="dark"] .ad-action-sep { background: #2c3844; }
html[data-theme="dark"] .ad-headline { color: #aab6a0; }
html[data-theme="dark"] .ad-status-missing { background: #3a2321; color: #ef8f86; }
html[data-theme="dark"] .ad-status-adopt { background: #3a2c1b; color: #e8ab72; }

/* Animal friend requests + cross-owner links. */
html[data-theme="dark"] .ad-family-owner { color: #93a487; }
html[data-theme="dark"] .ad-pending-badge { background: #3a3320; color: #e2c887; }
html[data-theme="dark"] .ad-req-panel { background: #241f30; border-color: #382f47; }
html[data-theme="dark"] .ad-req-title { color: #c0a6ee; }
html[data-theme="dark"] .ad-req-card { background: #1e2730; border-color: #2c3844; }
html[data-theme="dark"] .ad-req-name { color: #dfe7d6; }
html[data-theme="dark"] .ad-req-owner { color: #93a487; }
html[data-theme="dark"] .ad-req-rel { color: #aab6a0; }
html[data-theme="dark"] .ad-req-avatar { background: #2a3440; color: #8aa; }

/* Livestock hobby-farm note in the animal form. */
html[data-theme="dark"] .af-note-livestock { background: #24301b; border-color: #384428; color: #b8c3aa; }
html[data-theme="dark"] .af-note-livestock a { color: #9cc07f; }

/* Adoptions secondary filter row: species dropdown + "near me" pill. */
html[data-theme="dark"] .adopt-select { background: var(--ma-surface-2); color: var(--ma-text); border-color: var(--ma-border); }
html[data-theme="dark"] .adopt-select-lbl { color: var(--ma-text-muted); }
html[data-theme="dark"] .adopt-near { background: var(--ma-surface-2); border-color: var(--ma-border); color: var(--ma-text-muted); }
html[data-theme="dark"] .adopt-near-input { background: transparent; color: var(--ma-text); }
html[data-theme="dark"] .adopt-dist { color: #e08a3c; }

/* Table headers/rows inside content tables. */
html[data-theme="dark"] .public-scroll :is(th, td),
html[data-theme="dark"] .member-scroll :is(th, td) {
    border-color: var(--ma-border);
    color: var(--ma-text);
}

/* Empty-state / muted helper copy stays legible. */
html[data-theme="dark"] :is(.grp-empty, .adopt-empty, .grp-loading, .adopt-loading) { color: var(--ma-text-muted); }
html[data-theme="dark"] :is(.grp-empty h3, .adopt-empty h3) { color: var(--ma-heading); }

/* =====================================================================================
   Dark-mode deepening pass — member zone
   The member pages (My Animals tiles, Animal detail, Health, Events, Groups, etc.) use many
   per-page card families (.animal-card, .ad-*-card, .gd-*, .hl-*, .ev-*, .gr-*, tables…).
   Rather than enumerate every one, we key off class-name substrings scoped to .member-scroll:
   any "…-card / …-event / …-row / …-wrap / …-cal / …-tile" container gets the dark surface +
   a visible border (the tiles were blending into the paper before). Over-matching nested
   elements is harmless — they already sit on the same surface.
   ===================================================================================== */
html[data-theme="dark"] .member-scroll :is(
    [class*="-card"], [class*="-event"], [class*="-row"], [class*="-wrap"],
    [class*="-cal"], [class*="-tile"], [class*="-panel"], [class*="-box"]
) {
    background: var(--ma-surface);
    border-color: var(--ma-border);
}

/* Give member tiles/cards a clearly visible edge against the dark paper. Only the card ROOTS
   get a drawn border — not their inner `-card-top/-actions/-link/-headings` parts, which would
   otherwise render as nested boxes. */
html[data-theme="dark"] .member-scroll :is(
    .animal-card, .gd-card, .gd-event, .hl-form-card, .hl-table-wrap,
    .ev-form-card, .ev-cal, .gr-form-card, .gr-card, .animals-table-wrap
) {
    border: 1px solid var(--ma-border);
    box-shadow: none;
}

/* Titles / names → bright; dates / meta / notes / sub / labels → muted. */
html[data-theme="dark"] .member-scroll :is(
    [class*="-title"], [class*="-name"], [class*="-head"] > strong
) {
    color: var(--ma-heading);
}

html[data-theme="dark"] .member-scroll :is(
    [class*="-sub"], [class*="-date"], [class*="-meta"], [class*="-notes"],
    [class*="-body"], [class*="-bio"], [class*="-label"], [class*="-desc"]
) {
    color: var(--ma-text-muted);
}

/* Soft chips / soft badges / count pills → readable on dark. */
html[data-theme="dark"] .member-scroll :is(
    [class*="-chip"], [class*="badge-soft"], [class*="-count"], .animal-chip
) {
    background: var(--ma-surface-2);
    color: var(--ma-text);
}

/* Table header strip. */
html[data-theme="dark"] .member-scroll :is(th),
html[data-theme="dark"] .public-scroll :is(th) {
    background: var(--ma-surface-2);
    color: var(--ma-text);
}

/* Segmented view toggles (Tiles/List) + filter pills that were white. */
html[data-theme="dark"] .member-scroll :is(.animals-view-toggle, .afg-btn, .af-species-select, .avt-btn) {
    background: var(--ma-surface-2);
    border-color: var(--ma-border);
    color: var(--ma-text);
}
html[data-theme="dark"] .member-scroll .avt-btn { background: transparent; }

/* Row hover on member tables shouldn't flash near-white. */
html[data-theme="dark"] .member-scroll tr:hover td { background: rgba(255, 255, 255, 0.03); }

/* Icon-only buttons (edit/delete on tiles) need a lighter resting colour on dark. */
html[data-theme="dark"] .member-scroll :is(.animal-icon-btn, [class*="-icon-btn"]) { color: var(--ma-text-muted); }

/* Empty-state cards (e.g. "My Groups" / "My Animals" empty prompts). The class is `.empty-state`
   — no "-card" substring — so the generic member rules above miss it and it stayed white. */
html[data-theme="dark"] .empty-state {
    background: var(--ma-surface);
    border: 1px dashed var(--ma-border);
    box-shadow: none;
}
html[data-theme="dark"] .empty-state h3 { color: var(--ma-heading); }
html[data-theme="dark"] .empty-state p,
html[data-theme="dark"] .empty-soon { color: var(--ma-text-muted); }
html[data-theme="dark"] .empty-btn-ghost { background: var(--ma-surface-2); color: #cfe0c4; }
html[data-theme="dark"] .empty-btn-ghost:hover { background: #384227; }

/* Card hover on dark: lift the border rather than a heavy white shadow. */
html[data-theme="dark"] .member-scroll .animal-card-link:hover {
    border-color: #5c6b3c;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

/* Category "soft"/light chips defined with pale backgrounds (e.g. .at-badge.cat-pets,
   .animal-badge-soft, memorial tags) read fine as light chips on dark; leave their own colours.
   But the plain soft chip text must not inherit the muted override into unreadability. */
html[data-theme="dark"] .member-scroll .animal-chip { border: 1px solid var(--ma-border); }

/* ---- Friends + Messages (member social) ---- */
html[data-theme="dark"] .member-scroll :is(.fr-item, .fr-search input, .fr-btn) {
    background: var(--ma-surface);
    border-color: var(--ma-border);
}
html[data-theme="dark"] .member-scroll .fr-name { color: var(--ma-heading); }
html[data-theme="dark"] .member-scroll :is(.fr-sub, .fr-muted, .ms-muted, .ms-conv-last) { color: var(--ma-text-muted); }
html[data-theme="dark"] .member-scroll :is(.fr-chip, .fr-animal-chip) { background: var(--ma-surface-2); color: var(--ma-text); }
html[data-theme="dark"] .member-scroll .fr-btn:hover { background: var(--ma-surface-2); }

html[data-theme="dark"] .member-scroll :is(.ms-list, .ms-thread-head, .ms-compose) { border-color: var(--ma-border); }
html[data-theme="dark"] .member-scroll .ms-conv:hover { background: var(--ma-surface); }
html[data-theme="dark"] .member-scroll .ms-conv.active { background: var(--ma-surface-2); }
html[data-theme="dark"] .member-scroll :is(.ms-conv-name, .ms-thread-name) { color: var(--ma-heading); }
html[data-theme="dark"] .member-scroll .theirs .ms-bubble { background: var(--ma-surface-2); color: var(--ma-text); }
html[data-theme="dark"] .member-scroll .ms-compose textarea { background: var(--ma-surface-2); color: var(--ma-text); border-color: var(--ma-border); }

/* ---- Co-owners (shared animal care) ---- */
html[data-theme="dark"] .member-scroll .ad-shared-banner {
    background: var(--ma-surface);
    border-color: var(--ma-border);
    color: var(--ma-text);
}
html[data-theme="dark"] .member-scroll .ad-care-row {
    background: var(--ma-surface);
    border-color: var(--ma-border);
}
html[data-theme="dark"] .member-scroll .ad-care-avatar {
    background: var(--ma-surface-2);
    color: #9cc77f;
}
html[data-theme="dark"] .member-scroll .ad-care-name { color: var(--ma-heading); }
html[data-theme="dark"] .member-scroll .ad-care-hint { color: var(--ma-text-muted); }

/* Co-owner invitation cards on My Animals */
html[data-theme="dark"] .member-scroll .coinv-card {
    background: var(--ma-surface);
    border-color: var(--ma-border);
}
html[data-theme="dark"] .member-scroll .coinv-icon { background: var(--ma-surface-2); color: #9cc77f; }
html[data-theme="dark"] .member-scroll .coinv-title { color: var(--ma-text); }
html[data-theme="dark"] .member-scroll .coinv-decline { color: var(--ma-text-muted); border-color: var(--ma-border); }
html[data-theme="dark"] .member-scroll .coinv-decline:hover { background: var(--ma-surface-2); }

/* Shared badges */
html[data-theme="dark"] .member-scroll .animal-badge-shared {
    background: #24344a !important;
    color: #9bc4f0 !important;
}
html[data-theme="dark"] .member-scroll .at-tag-shared {
    background: #24344a;
    color: #9bc4f0;
}

/* ---- Theme toggle button (in the header) ---- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #2f4a29;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.theme-toggle:hover { background: rgba(47, 74, 41, 0.1); }

html[data-theme="dark"] .theme-toggle { color: #f4d47a; }
html[data-theme="dark"] .theme-toggle:hover { background: rgba(255, 255, 255, 0.1); }

/* Community / public Events browse (replaces the old cream placeholder shells) */
html[data-theme="dark"] .poi-card,
html[data-theme="dark"] .pev-card {
    background: var(--ma-surface);
    border-color: var(--ma-border);
}
html[data-theme="dark"] .poi-card h3,
html[data-theme="dark"] .pev-card h3 { color: var(--ma-heading); }
html[data-theme="dark"] .poi-addr,
html[data-theme="dark"] .poi-dist,
html[data-theme="dark"] .poi-when,
html[data-theme="dark"] .poi-desc,
html[data-theme="dark"] .pev-meta,
html[data-theme="dark"] .pev-card p,
html[data-theme="dark"] .poi-note,
html[data-theme="dark"] .pev-note { color: var(--ma-text-muted); }
html[data-theme="dark"] .poi-member,
html[data-theme="dark"] .pev-member,
html[data-theme="dark"] .poi-near {
    background: var(--ma-surface-2);
    border-color: var(--ma-border);
    color: var(--ma-text);
}
html[data-theme="dark"] .poi-chip,
html[data-theme="dark"] .pev-chip,
html[data-theme="dark"] .pev-view-btn {
    background: var(--ma-surface);
    border-color: var(--ma-border);
    color: var(--ma-text);
}
html[data-theme="dark"] .member-scroll .fr-points,
html[data-theme="dark"] .member-scroll .fr-invite,
html[data-theme="dark"] .member-scroll .hl-clinic-banner {
    background: var(--ma-surface);
    border-color: var(--ma-border);
    color: var(--ma-text);
}
html[data-theme="dark"] .local-band { background: var(--ma-paper); }
html[data-theme="dark"] .local-band h2,
html[data-theme="dark"] .local-band h3 { color: var(--ma-heading); }
html[data-theme="dark"] .local-lead,
html[data-theme="dark"] .local-empty,
html[data-theme="dark"] .local-card span { color: var(--ma-text-muted); }
html[data-theme="dark"] .local-card {
    background: var(--ma-surface);
    border-color: var(--ma-border);
}
html[data-theme="dark"] .local-card strong { color: var(--ma-heading); }
html[data-theme="dark"] .ad-service-btn { background: var(--ma-surface-2); color: #8fd4df; }
html[data-theme="dark"] .poi-reviews { background: var(--ma-surface-2); }

/* ---- Admin zone: dark paper + light text (no leftover white tables / dark-on-dark) ---- */
html[data-theme="dark"] .main-admin,
html[data-theme="dark"] .admin-main-content {
    background: var(--ma-paper);
    color: var(--ma-text);
}

html[data-theme="dark"] .main-admin :is(h1, h2, h3, h4, h5) { color: var(--ma-heading); }
html[data-theme="dark"] .main-admin :is(p, td, label, small, .admin-hint, .aa-loading, .aa-empty, .au-loading, .au-empty, .ag-loading, .ag-empty) {
    color: var(--ma-text);
}

html[data-theme="dark"] :is(.admin-table, .aa-table, .au-table, .ag-table, .adir-table) {
    background: var(--ma-surface);
    color: var(--ma-text);
}

html[data-theme="dark"] :is(.admin-table, .aa-table, .au-table, .ag-table, .adir-table) th {
    background: var(--ma-surface-2);
    color: var(--ma-text-muted);
    border-color: var(--ma-border);
}

html[data-theme="dark"] :is(.admin-table, .aa-table, .au-table, .ag-table, .adir-table) td {
    color: var(--ma-text);
    border-color: var(--ma-border);
}

html[data-theme="dark"] :is(.aa-table-wrap, .au-table-wrap, .ag-table-wrap, .adir-table-wrap, .admin-simple) {
    background: transparent;
}

html[data-theme="dark"] :is(.aa-stat, .au-stat, .ag-stat, .adir-stat) {
    background: var(--ma-surface);
    border-color: var(--ma-border);
}

html[data-theme="dark"] :is(.aa-stat-label, .au-stat-label, .ag-stat-label, .adir-stat-label) { color: var(--ma-text-muted); }
html[data-theme="dark"] :is(.aa-search, .au-search, .adir-search) {
    background: var(--ma-surface-2);
    border-color: var(--ma-border);
    color: var(--ma-text);
}

html[data-theme="dark"] .main-admin .card {
    background: var(--ma-surface);
    border-color: var(--ma-border);
    color: var(--ma-text);
}

html[data-theme="dark"] .main-admin .card .text-muted { color: var(--ma-text-muted) !important; }
html[data-theme="dark"] .main-admin .table { color: var(--ma-text); --bs-table-bg: var(--ma-surface); --bs-table-color: var(--ma-text); }
html[data-theme="dark"] .main-admin .table thead th { background: var(--ma-surface-2); color: var(--ma-text-muted); }

html[data-theme="dark"] :is(.pets-card, .wl-card, .ad-card, .ad-lineage, .pub-card, .pub-connect) {
    background: var(--ma-surface);
    border-color: var(--ma-border);
}

html[data-theme="dark"] :is(.pets-card strong, .wl-card strong, .ad-main h1, .pub-name) { color: var(--ma-heading); }
html[data-theme="dark"] :is(.pets-card span, .pets-card em, .wl-card span, .ad-sub, .ad-desc, .pub-bio, .pub-owner) { color: var(--ma-text-muted); }

html[data-theme="dark"] .guest-gate-card { background: var(--ma-surface); }
html[data-theme="dark"] .guest-gate-card h2 { color: var(--ma-heading); }
html[data-theme="dark"] .guest-gate-card p,
html[data-theme="dark"] .guest-gate-home { color: var(--ma-text); }

/* =====================================================================================
   Second pass — surfaces that were still painting themselves cream or white.
   The four public bodies (.pets-body, .rem-body, .news-body, .stories-body) used to set
   background: #f7f3ea; that is gone from their scoped CSS, so they now show --ma-paper
   through. What follows is everything that sat *on* those bodies, plus the member
   dashboard, the month calendar and the market, none of which were covered above.
   ===================================================================================== */

/* ---- Public cards ---- */
html[data-theme="dark"] :is(.rem-card, .news-card, .stories-card, .market-stall) {
    background: var(--ma-surface);
    border-color: var(--ma-border);
}

html[data-theme="dark"] :is(.rem-card strong, .news-card strong, .stories-card strong) { color: var(--ma-heading); }
html[data-theme="dark"] :is(.rem-card span, .rem-card em, .news-sum, .news-meta, .stories-card span,
                            .rem-empty, .news-empty, .stories-empty, .pets-empty, .rem-count) {
    color: var(--ma-text-muted);
}

/* Scoped CSS sets this one with !important, so matching it takes the same. */
html[data-theme="dark"] .rem-dates { color: #d7cfc0 !important; }

html[data-theme="dark"] :is(.rem-photo, .market-photo-empty) {
    background: var(--ma-surface-2);
    color: var(--ma-text-muted);
}

/* ---- Public toolbars: chips, selects and the near-me bar ---- */
html[data-theme="dark"] :is(.pets-chip, .pets-view-btn, .pets-select, .pets-more, .pets-near,
                            .pets-near-go, .pets-near-me, .news-chip, .stories-chip, .stories-tag,
                            .rem-search, .rem-chip, .rem-select, .rem-clear, .market-chip) {
    background: var(--ma-surface);
    border-color: var(--ma-border);
    color: var(--ma-text);
}

html[data-theme="dark"] :is(.pets-near input, .rem-search input) {
    background: none;
    color: var(--ma-text);
}

html[data-theme="dark"] .pets-select-lbl select { background: var(--ma-surface); color: var(--ma-text); }

/* Keep the "on" states loud — they are how you tell what is filtered. */
html[data-theme="dark"] .pets-chip.active,
html[data-theme="dark"] .pets-view-btn.active { background: #c2621b; border-color: #c2621b; color: #fff; }
html[data-theme="dark"] .news-chip.active { background: #6f9a5c; border-color: #6f9a5c; color: #14180f; }
html[data-theme="dark"] .stories-chip.is-on { background: #c07ba0; border-color: #c07ba0; color: #14180f; }
html[data-theme="dark"] .rem-chip.is-on { background: #9a9083; border-color: #9a9083; color: #14180f; }
html[data-theme="dark"] .market-chip.is-on { background: #d8a441; border-color: #d8a441; color: #14180f; }
html[data-theme="dark"] .rem-clear-inline { color: #cfc6b7; }

/* ---- Home page bands ---- */
html[data-theme="dark"] :is(.spot-band, .story-band, .feature-band, .newsletter-band) {
    background: var(--ma-paper);
}

html[data-theme="dark"] :is(.spot-band h2, .story-band h2, .feature-band h2, .newsletter-band h3,
                            .spot-crown strong, .story-tease strong, .feature-card h3) {
    color: var(--ma-heading);
}

html[data-theme="dark"] :is(.spot-lead, .story-tease span, .feature-card p, .newsletter-band p) {
    color: var(--ma-text-muted);
}

html[data-theme="dark"] :is(.spot-hero, .spot-crown, .story-tease) {
    background: var(--ma-surface);
    border-color: var(--ma-border);
}

/* The card mixes its accent into cream; mix into the dark surface instead so the tint survives. */
html[data-theme="dark"] .feature-card {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 26%, var(--ma-surface)) 0%, var(--ma-surface) 42%);
    border-color: color-mix(in srgb, var(--accent) 30%, var(--ma-border));
}

html[data-theme="dark"] :is(.spot-hero strong, .spot-crown strong, .story-tease strong) { color: var(--ma-heading); }
html[data-theme="dark"] .spot-line { color: var(--ma-text-muted); }
html[data-theme="dark"] .local-when { background: #1c3a3e; color: #8fd4df; }

/* Each card's accent is a mid-tone picked to read on cream; against the dark surface the same
   value goes muddy, so lift it toward the body text without losing the hue. */
html[data-theme="dark"] :is(.feature-go, .org-go, .org-kicker) { color: color-mix(in srgb, var(--accent) 50%, #e4e9db); }

/* ---- Beta notice + organization tile ---- */
html[data-theme="dark"] .beta-band {
    background: var(--ma-caution-wash);
    border-color: color-mix(in srgb, var(--ma-caution) 45%, var(--ma-border));
}

html[data-theme="dark"] .beta-copy { color: var(--ma-text-muted); }
html[data-theme="dark"] .beta-copy strong { color: var(--ma-heading); }
html[data-theme="dark"] .beta-tag { background: #c79a35; color: #14180f; }

html[data-theme="dark"] .org-band { background: var(--ma-paper); }

/* Same reason as .feature-card: the tile mixes its accent into cream. */
html[data-theme="dark"] .org-tile {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 26%, var(--ma-surface)) 0%, var(--ma-surface) 60%);
    border-color: color-mix(in srgb, var(--accent) 30%, var(--ma-border));
}

html[data-theme="dark"] .org-h { color: var(--ma-heading); }
html[data-theme="dark"] .org-p { color: var(--ma-text-muted); }

html[data-theme="dark"] .nls {
    background: var(--ma-surface);
    border-color: var(--ma-border);
}
html[data-theme="dark"] .nls-copy h3 { color: var(--ma-heading); }
html[data-theme="dark"] .nls-copy p { color: var(--ma-text-muted); }
html[data-theme="dark"] .nls-form input {
    background: var(--ma-surface-2);
    border-color: var(--ma-border);
    color: var(--ma-text);
}
html[data-theme="dark"] .nls-done { color: #a8cf95; }

/* ---- Member dashboard ---- */
html[data-theme="dark"] :is(.widget, .dash-customize, .dash-step, .feed) {
    background: var(--ma-surface);
    border-color: var(--ma-border);
}

html[data-theme="dark"] :is(.widget-value, .dash-step strong, .feed-head h2) { color: var(--ma-heading); }
html[data-theme="dark"] :is(.widget-label, .widget-soon, .dash-next-lead, .dash-customize p,
                            .dash-step-main span:last-child, .feed-lead, .feed-note, .feed-empty,
                            .feed-meta) {
    color: var(--ma-text-muted);
}

html[data-theme="dark"] .widget-foot { border-top-color: var(--ma-border); }
html[data-theme="dark"] .dash-customize-grid label { color: var(--ma-text); }
html[data-theme="dark"] .dash-step-dismiss:hover { background: var(--ma-surface-2); color: var(--ma-text); }
html[data-theme="dark"] .feed-empty { border-color: var(--ma-border); }
html[data-theme="dark"] .feed-chip {
    background: var(--ma-surface-2);
    border-color: var(--ma-border);
    color: var(--ma-text);
}
html[data-theme="dark"] .feed-chip.is-on { background: #7f9366; border-color: #7f9366; color: #14180f; }
html[data-theme="dark"] .feed-item { border-bottom-color: var(--ma-border); }

/* ---- Month calendar ----
   .ev-cal is already dark via the [class*="-cal"] catch-all, but the cells that set their own
   background (padding days, today, hover) stayed near-white, which is what made the grid look
   half-lit. */
html[data-theme="dark"] .ev-cell { border-color: var(--ma-border); }
html[data-theme="dark"] .ev-cell:hover { background: var(--ma-surface-2); }
html[data-theme="dark"] .ev-cell.ev-out { background: var(--ma-bg); color: #6f7a63; }
html[data-theme="dark"] .ev-cell.ev-today { background: #1c3a3e; }
html[data-theme="dark"] .ev-cell-num { color: var(--ma-text-muted); }
html[data-theme="dark"] .ev-cell.ev-out .ev-cell-num { color: #5d6753; }
html[data-theme="dark"] .ev-cell.ev-today .ev-cell-num { background: #2a9aa8; color: #08171a; }
html[data-theme="dark"] .ev-cal-dow { background: var(--ma-surface-2); border-bottom-color: var(--ma-border); }
html[data-theme="dark"] .ev-dow { color: var(--ma-text-muted); }

html[data-theme="dark"] :is(.ev-nav-btn, .ev-today-btn, .ev-view-btn, .ev-btn-ghost, .ev-input,
                            .ev-type-tag) {
    background: var(--ma-surface-2);
    border-color: var(--ma-border);
    color: var(--ma-text);
}

html[data-theme="dark"] .ev-view-btn.active { background: #2a9aa8; border-color: #2a9aa8; color: #08171a; }
html[data-theme="dark"] .ev-form-card { background: var(--ma-surface); border-color: var(--ma-border); }

/* ---- Farm market ---- */
html[data-theme="dark"] .market-good {
    background: var(--ma-surface-2);
    border-color: var(--ma-border);
}

html[data-theme="dark"] :is(.market-where, .market-about, .market-desc, .market-sub, .market-note,
                            .market-toggle, .market-empty) {
    color: var(--ma-text-muted);
}

html[data-theme="dark"] .market-empty { border-color: var(--ma-border); }
html[data-theme="dark"] .market-price { color: #b7cf94; }

/* ---- Bootstrap's bare .btn has dark ink baked in, which disappears on a dark surface. ---- */
html[data-theme="dark"] .btn:not([class*="btn-"]) { color: var(--ma-text); }

/* ---- The public frame and its footer ----
   Every section paints these with its own tab colour, which reads on either theme. Home sends
   nothing, so both fall back — and the light fallback is a pale cream. */
/* The legal pages carry their own ink because they also render standalone on a white page.
   Inside a modal on the dark theme that ink lands at about 1.4:1, so the whole document needs
   the themed text colours. */
html[data-theme="dark"] .legal-page { color: var(--ma-text); }

html[data-theme="dark"] :is(.legal-page h1, .legal-page h2) { color: var(--ma-heading); }

html[data-theme="dark"] .legal-meta { color: var(--ma-text-muted); }

html[data-theme="dark"] :is(.legal-page a, .legal-page button.footer-btn, .legal-page code) {
    color: var(--ma-link);
}

html[data-theme="dark"] .legal-draft {
    background: var(--ma-caution-wash);
    border-color: var(--ma-caution);
    color: var(--ma-text);
}

/* --ma-paper is within a few points of the page itself, so the fallback frame vanished. The
   surface step is the nearest token that still reads as an edge. */
html[data-theme="dark"] main.public-main > article.content {
    background: var(--public-sec, var(--ma-surface-2));
}

html[data-theme="dark"] .public-footer {
    background: var(--public-foot, var(--ma-surface-2));
    color: var(--public-foot-ink, var(--ma-text-muted));
}

/* ---- Shared location/range control (every public section that has a map uses it) ---- */
html[data-theme="dark"] :is(.locf-near, .locf-radius) {
    background: var(--ma-surface);
    border-color: var(--ma-border);
    color: var(--ma-text);
}

html[data-theme="dark"] .locf-input { color: var(--ma-text); }

/* These tint themselves with black at 6%, which is invisible once the pill behind them is dark. */
html[data-theme="dark"] :is(.locf-go, .locf-me, .locf-clear) {
    background: var(--ma-surface-2);
    color: var(--ma-text);
}

html[data-theme="dark"] :is(.locf-go:hover:not(:disabled), .locf-me:hover:not(:disabled), .locf-clear:hover) {
    background: #3b4530;
}

html[data-theme="dark"] .locf-error { color: #e88b8b; }

/* ---- Home story rotator ---- */
html[data-theme="dark"] .sr-tile {
    background: var(--ma-surface);
    border-color: var(--ma-border);
}
html[data-theme="dark"] .sr-tile:hover { border-color: #5d6c40; }

/* ---- Breeding listings ---- */
html[data-theme="dark"] .br-card {
    background: var(--ma-surface);
    border-color: var(--ma-border);
}
html[data-theme="dark"] .br-card strong { color: var(--ma-heading); }
html[data-theme="dark"] .br-card span,
html[data-theme="dark"] .br-sub { color: var(--ma-text-muted); }

/* Google paints the map container light grey until tiles arrive, which flashes a bright panel
   mid-page. Match the dark style's base geometry so the wait is invisible. The !important is
   for Google's own inline background on that div, which a stylesheet cannot otherwise reach. */
html[data-theme="dark"] .map-view { background: #1e2418; }
html[data-theme="dark"] .map-view > div { background-color: #1e2418 !important; }