/* =====================================================================================
   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-border: #46522f;
    --ma-text: #e4e9db;
    --ma-text-muted: #b7c1a8;
    --ma-heading: #f0f4e9;
    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; }
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,
html[data-theme="dark"] [class*="hero"] :is(h1, h2, h3, p, span, a) {
    color: #fff;
}

/* ---- 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); }
html[data-theme="dark"] .accountDetailsItemWrapper { background: var(--ma-surface-2); border-color: var(--ma-border); }
html[data-theme="dark"] .accountDetailsItemWrapper > h4 { color: var(--ma-heading); }
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); }

/* 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-browse,
html[data-theme="dark"] .pev-browse { background: var(--ma-paper); }
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) {
    background: var(--ma-surface);
    color: var(--ma-text);
}

html[data-theme="dark"] :is(.admin-table, .aa-table, .au-table, .ag-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) td {
    color: var(--ma-text);
    border-color: var(--ma-border);
}

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

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

html[data-theme="dark"] :is(.aa-stat-label, .au-stat-label, .ag-stat-label) { color: var(--ma-text-muted); }
html[data-theme="dark"] :is(.aa-search, .au-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); }