/* Shared site theme. Light colors remain in the existing page stylesheets. */
body.material-theme.shadcn-home .topbar {
  height: auto;
  flex-wrap: wrap;
}

.home-theme-actions {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  grid-column: 1 / -1;
  gap: 8px;
  max-width: 100%;
  margin-left: auto;
}

body.material-theme .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 6px 10px;
  white-space: nowrap;
}

.theme-toggle svg { flex: 0 0 auto; }
.home-page .topbar .home-theme-actions .home-overload-preview-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-width: 0;
  white-space: normal;
}

html[data-theme="dark"] { color-scheme: dark; background: #101820; }

/* Map all existing UI token families to the same palette. */
html[data-theme="dark"] body,
html[data-theme="dark"] body.material-theme {
  --selection: var(--primary);
  --selection-surface: var(--accent-ui);
  --selection-foreground: var(--accent-ui-foreground);
  --background: 215 28% 9%;
  --foreground: 210 25% 92%;
  --card: 215 24% 13%;
  --card-foreground: 210 25% 92%;
  --primary: 217 82% 76%;
  --primary-foreground: 222 60% 14%;
  --secondary: 215 22% 18%;
  --secondary-foreground: 210 25% 92%;
  --muted-ui: 215 22% 18%;
  --muted-ui-foreground: 215 18% 72%;
  --accent-ui: 222 43% 24%;
  --accent-ui-foreground: 214 90% 86%;
  --destructive: 0 80% 75%;
  --destructive-foreground: 0 45% 12%;
  --border-ui: 215 18% 32%;
  --input-ui: 215 18% 40%;
  --ring-ui: 217 82% 76%;
  --bg: hsl(var(--background));
  --panel: hsl(var(--card));
  --panel-soft: hsl(var(--secondary));
  --line: hsl(var(--border-ui));
  --text: hsl(var(--foreground));
  --muted: hsl(var(--muted-ui-foreground));
  --accent: hsl(var(--primary));
  --accent-strong: hsl(var(--accent-ui-foreground));
  --danger: hsl(var(--destructive));
  --warn: #f1c57e;
  --shadow: 0 2px 12px #0005;
  --md-primary: var(--accent);
  --md-on-primary: hsl(var(--primary-foreground));
  --md-primary-container: hsl(var(--accent-ui));
  --md-on-primary-container: var(--accent-strong);
  --md-secondary: var(--muted);
  --md-secondary-container: var(--panel-soft);
  --md-on-secondary-container: var(--text);
  --md-tertiary: #edb2c2;
  --md-tertiary-container: #442b38;
  --md-on-tertiary-container: #ffdae4;
  --md-surface: var(--bg);
  --md-surface-dim: var(--bg);
  --md-surface-container-lowest: var(--panel);
  --md-surface-container-low: var(--bg);
  --md-surface-container: var(--panel-soft);
  --md-surface-container-high: #283444;
  --md-surface-container-highest: #334155;
  --md-on-surface: var(--text);
  --md-on-surface-variant: var(--muted);
  --md-outline: #76889e;
  --md-outline-variant: var(--line);
  --md-error: var(--danger);
  --md-error-container: #44262d;
  --md-warning: var(--warn);
  --md-warning-container: #3b3020;
  --md-scrim: #000a;
  --md-elevation-1: var(--shadow);
  --md-elevation-2: var(--shadow);
  --md-elevation-3: 0 12px 36px #0008;
  --guide-border: var(--line);
  --guide-muted: var(--muted);
  --guide-accent: var(--accent);
  --guide-soft: var(--panel-soft);
  background: var(--bg);
  color: var(--text);
}

html[data-theme="dark"] body.material-theme.shadcn-simulator :is(
  .top-link.active, .library-tab.active, .b3-axis-tab.active, .training-view-tab.active
) {
  background: hsl(var(--selection-surface));
  color: hsl(var(--selection-foreground));
}
html[data-theme="dark"] body.material-theme.shadcn-simulator :is(.filter-button, .catalog-filter-icon).active {
  outline-color: hsl(var(--selection));
}
html[data-theme="dark"] body.material-theme.shadcn-simulator .active-formation-panel {
  border-color: hsl(var(--selection) / 0.62);
}
html[data-theme="dark"] body.material-theme.shadcn-simulator .formation-tab-add-action > button {
  border-bottom-color: hsl(var(--selection) / 0.62);
}
html[data-theme="dark"] body.material-theme.shadcn-home .home-overview {
  background: hsl(var(--card));
}
html[data-theme="dark"] body :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: hsl(var(--selection));
}
html[data-theme="dark"] .guide-tab.is-active {
  color: hsl(var(--selection-foreground));
  border-bottom-color: hsl(var(--selection));
}

html[data-theme="dark"] body.material-theme.shadcn-simulator .primary-button:hover,
html[data-theme="dark"] body.material-theme.shadcn-simulator .home-how-to-link:hover {
  background: #b5cefa;
  color: hsl(var(--primary-foreground));
}

html[data-theme="dark"] body.material-theme.shadcn-simulator .danger-button:hover {
  background: var(--md-error-container);
  color: var(--danger);
}

html[data-theme="dark"] body.material-theme :is(.message, .modal-card, .bulma-modal-card-body, .guide-document) {
  background: var(--panel);
  color: var(--text);
}

html[data-theme="dark"] body strong { color: inherit; }
html[data-theme="dark"] body.material-theme .rotation-candidates { background: var(--md-primary-container); }
html[data-theme="dark"] body.material-theme .stage-badge.has-image { background: #284878; }

/* Older editor/result components still have fixed light surfaces. */
html[data-theme="dark"] body.material-theme :is(
  .b3-picker-slot, .b3-picker-item, .b3-picker-filters,
  .formation-editor-filter-accordion, .b3-status-editor .status-section, .skill-description-card,
  .rotation-title, .rotation-controls.detailed, .slot-pierce-panel, .slot-overload-part,
  .b3-bulk-replace, .b3-common-formation, .b3-common-rotation,
  .b3-options-summary span, .b3-formation-head, .b3-formation-detail,
  .b3-graph-display-controls, .b3-graph-display-item, .b3-graph-popover,
  .b3-character-damage-button, .b3-damage-link,
  .damage-combat-timeline, .detail-chart-range-selector, .combat-burst-rail,
  .damage-summary, .damage-summary-table th, .b3-detail-summary, .event-timeline, .buff-timeline,
  .buff-label, .buff-hidden-controls, .buff-hidden-chip, .buff-hidden-reset,
  .result-image-controls, .normal-result-page-dot, .normal-result-formation-head
) { background: var(--panel); color: var(--text); }
html[data-theme="dark"] body.material-theme :is(.b3-picker-slot.active, .normal-result-page-dot.active) {
  background: var(--md-primary-container);
  color: var(--accent-strong);
}
html[data-theme="dark"] body.material-theme :is(.b3-graph-canvas-wrap, .training-character-row.unowned) {
  background: var(--panel-soft);
}
html[data-theme="dark"] body.material-theme .buff-track {
  background: linear-gradient(to right, var(--line) 1px, transparent 1px) 0 0 / calc(100% / 6) 100%, var(--panel);
}

html[data-theme="dark"] body.material-theme :is(.info-breadcrumb a, .info-hero > p, .info-back-link) {
  color: var(--accent);
}

/* Fixed light colors in the home page, separate from the neutral panels. */
html[data-theme="dark"] body.material-theme.shadcn-home .home-notice {
  border-color: #8e713b;
  background: #302a1d;
}
html[data-theme="dark"] body.material-theme.shadcn-home :is(.home-notice-heading, .home-notice-heading h2) {
  color: #f1c57e;
}
html[data-theme="dark"] body.material-theme.shadcn-home .home-notice > p:not(.home-legal-note) {
  color: #ded1b8;
}
html[data-theme="dark"] body.material-theme.shadcn-home .home-qa,
html[data-theme="dark"] body.material-theme.shadcn-home .qa-modal .home-dialog-head {
  background: #192c3f;
  border-color: #426888;
}
html[data-theme="dark"] body.material-theme.shadcn-home :is(.qa-list, .qa-row) { border-color: #426888; }
html[data-theme="dark"] body.material-theme.shadcn-home :is(.qa-content p, .qa-modal h2) { color: #cadced; }
html[data-theme="dark"] body.material-theme.shadcn-home .qa-mark { color: #d6eaff; background: #304d6b; }
html[data-theme="dark"] body.material-theme.shadcn-home .qa-content p .qa-mark { background: #273c50; }
html[data-theme="dark"] .home-page .topbar .home-overload-preview-link {
  border-color: var(--line);
  background: var(--md-primary-container);
  color: var(--accent-strong);
}
html[data-theme="dark"] body.material-theme .theme-toggle[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--md-primary-container);
  color: var(--accent-strong);
}

/* Preserve character/element artwork; invert only the existing monochrome icons. */
html[data-theme="dark"] body.material-theme.shadcn-simulator :is(.filter-button, .catalog-filter-icon).has-image {
  border-color: var(--line);
  background: var(--panel-soft);
  color: var(--text);
}
html[data-theme="dark"] body.material-theme.shadcn-simulator :is(.filter-button, .catalog-filter-icon).has-image.active {
  border-color: var(--accent);
  background: var(--md-primary-container);
}
html[data-theme="dark"] body.material-theme.shadcn-simulator :is(.filter-button, .catalog-filter-icon).has-image:not(.active) img {
  filter: brightness(0) invert(1);
}
html[data-theme="dark"] body.material-theme.shadcn-simulator :is(.filter-button, .catalog-filter-icon).has-image img[src*="/icons/属性/"] {
  filter: none;
}
html[data-theme="dark"] body.material-theme.shadcn-simulator .dummy-character-icon { background: var(--panel-soft); }
html[data-theme="dark"] body.material-theme.shadcn-simulator .dummy-character-icon > img { filter: brightness(0) invert(1); }

/* The separate overload app uses utility classes instead of the site tokens. */
html[data-theme="dark"] .overload-site-header,
html[data-theme="dark"] #app :is(.bg-white, input, select) {
  background-color: var(--panel);
  color: var(--text);
  border-color: var(--line);
}
html[data-theme="dark"] .overload-home { color: var(--accent); }
html[data-theme="dark"] #app { border-color: var(--line); background: var(--panel); }
html[data-theme="dark"] #app :is(.bg-blue-500, .bg-blue-600, .bg-green-500) {
  background: var(--accent);
  color: hsl(var(--primary-foreground));
}
html[data-theme="dark"] body .bulma-select {
  --bulma-arrow-color: var(--accent);
}
html[data-theme="dark"] #app :is(.hover\:bg-blue-700, .hover\:bg-green-700):hover {
  background: #b5cefa;
  color: hsl(var(--primary-foreground));
}
html[data-theme="dark"] #app :is(.bg-blue-100, .bg-blue-200),
html[data-theme="dark"] #app .hover\:bg-blue-100:hover {
  background: var(--md-primary-container);
  color: var(--accent-strong);
}
html[data-theme="dark"] #app :is(.bg-gray-100, .bg-gray-200, .menuTab > label) { background: var(--panel-soft); color: var(--text); }
html[data-theme="dark"] #app :is(.border-gray-300, .border-gray-400) { border-color: var(--line); }
html[data-theme="dark"] #app :is(.text-black, .text-gray-600, .text-gray-700) { color: var(--text); }
html[data-theme="dark"] #app .menuTab label:has(:checked) {
  background: hsl(var(--selection-surface));
  color: hsl(var(--selection-foreground));
  border-bottom-color: hsl(var(--selection));
}
html[data-theme="dark"] #app .histogram-chart-container { background: #fff; border-radius: 6px; }

@media (max-width: 767px) {
  .home-theme-actions { width: 100%; }
  body.material-theme .theme-toggle { gap: 4px; padding-inline: 8px; font-size: 11px; }
  .home-page .topbar .home-theme-actions .home-overload-preview-link { flex: 1; font-size: 11px; text-align: center; }
}