/* 2026-10-01: neutral graphite dark theme. Keep status colors unchanged. */
:root.dark {
  --sp-bg: #101011;
  --sp-bg-elevated: #1a1a1c;
  --sp-bg-muted: #222225;
  --sp-bg-elevated-2: #262629;
  --sp-border: #35353a;
  --sp-border-strong: #55555c;
  --sp-text: #ededf0;
  --sp-text-muted: #a4a4aa;
  --sp-accent: #ededf0;
  --sp-accent-soft: #ffffff12;
  --sp-highlight: #d7d7dc;
  --sp-highlight-soft: #323237;
  --sp-card-edge: #ffffff10;
  --sp-shadow-sm: 0 2px 6px #00000018, 0 12px 30px -12px #00000070;
  --sp-canvas-glow: #ffffff08;
  --sp-canvas-glow-alt: #ffffff05;
  --sp-background-art: url("./console-backdrop-dark-gray.svg");
}

:root.dark body {
  background-color: var(--sp-bg);
}

/* Neutralize page-specific cool accents in dark mode. Semantic status colors stay unchanged. */
:root.dark {
  --sp-violet: #b4b4bc;
}

:root.dark .ui-icon-btn,
:root.dark .ui-row-action,
:root.dark .ui-row-action--stack {
  color: var(--sp-text-muted) !important;
}

:root.dark .ui-chip-sky,
:root.dark .ui-chip-violet {
  color: var(--sp-text-muted) !important;
  background: var(--sp-bg-muted) !important;
  border-color: var(--sp-border) !important;
}

:root.dark [class*="text-sky-"],
:root.dark [class*="text-blue-"],
:root.dark [class*="text-indigo-"],
:root.dark [class*="text-cyan-"],
:root.dark [class*="text-violet-"] {
  color: var(--sp-text-muted) !important;
}

:root.dark [class*="bg-sky-"],
:root.dark [class*="bg-blue-"],
:root.dark [class*="bg-indigo-"],
:root.dark [class*="bg-cyan-"],
:root.dark [class*="bg-violet-"] {
  background-color: var(--sp-bg-muted) !important;
}

:root.dark [class*="border-sky-"],
:root.dark [class*="border-blue-"],
:root.dark [class*="border-indigo-"],
:root.dark [class*="border-cyan-"],
:root.dark [class*="border-violet-"] {
  border-color: var(--sp-border) !important;
}

:root.dark [class*="ring-sky-"],
:root.dark [class*="ring-blue-"],
:root.dark [class*="ring-indigo-"],
:root.dark [class*="ring-cyan-"],
:root.dark [class*="ring-violet-"] {
  --tw-ring-color: var(--sp-border-strong) !important;
}

:root.dark .bot-group-option:has(input:checked),
:root.dark .bot-submenu-item.is-active,
:root.dark .account-view-grid.tg-account-selecting > [data-account-name].tg-account-selected {
  background: var(--sp-bg-muted) !important;
  border-color: var(--sp-border-strong) !important;
  color: var(--sp-text) !important;
}

:root.dark .bot-submenu-item.is-active::before {
  background: var(--sp-text-muted) !important;
}

:root.dark .tg-tag-dialog,
:root.dark .tg-topic-confirm {
  background: rgb(0 0 0 / 0.62) !important;
}

:root.dark .tg-manager-card,
:root.dark .tg-manager-dialog {
  background: var(--sp-bg-elevated) !important;
  border-color: var(--sp-border) !important;
  color: var(--sp-text) !important;
}

:root.dark .tg-manager-account-picker,
:root.dark .tg-manager-card input:not([type="checkbox"]),
:root.dark .tg-manager-card select,
:root.dark .tg-manager-card textarea,
:root.dark .tg-manager-dialog input:not([type="checkbox"]),
:root.dark .tg-manager-dialog textarea,
:root.dark .tg-manager-button,
:root.dark .tg-manager-actions button,
:root.dark .tg-manager-item {
  background: var(--sp-bg-muted) !important;
  color: var(--sp-text) !important;
  border-color: var(--sp-border) !important;
}

:root.dark .tg-manager-item.selected,
:root.dark .tg-manager-content-form,
:root.dark .tg-manager-metrics > div,
:root.dark .tg-manager-color-choice,
:root.dark .tg-manager-section-nav,
:root.dark .tg-manager-section-nav button {
  background: var(--sp-bg-muted) !important;
  border-color: var(--sp-border) !important;
  color: var(--sp-text) !important;
}

:root.dark .tg-manager-item-main a,
:root.dark .tg-manager-chevron,
:root.dark .tg-manager-list-head #tg-manager-count {
  color: var(--sp-text-muted) !important;
}

:root.dark .tg-manager-section-nav button.active {
  background: var(--sp-text) !important;
  border-color: var(--sp-text) !important;
  color: var(--sp-bg) !important;
}

:root.dark .tg-group-switch,
:root.dark .tg-topic-tools,
:root.dark .tg-topic-tools button,
:root.dark .tg-topic-row button,
:root.dark .tg-topic-confirm section,
:root.dark .tg-topic-confirm button,
:root.dark .tg-topic-panel {
  background: var(--sp-bg-elevated) !important;
  color: var(--sp-text) !important;
  border-color: var(--sp-border) !important;
}

:root.dark .tg-group-switch button[aria-pressed="true"] {
  background: var(--sp-text) !important;
  color: var(--sp-bg) !important;
}

:root.dark .tg-topic-row.is-selected {
  box-shadow: inset 3px 0 0 var(--sp-text-muted) !important;
}

:root.dark .tg-topic-hint,
:root.dark .tg-topic-empty,
:root.dark .tg-topic-note {
  color: var(--sp-text-muted) !important;
}

:root.dark .tg-stage-pin-mark {
  background: var(--sp-text-muted) !important;
}

:root.dark .tg-stage-pin-kicker,
:root.dark .tg-stage-reply b {
  color: var(--sp-text-muted) !important;
}

:root.dark .tg-stage .tg-stage-sub,
:root.dark .tg-stage-pin-text,
:root.dark .tg-stage-reply span {
  color: var(--sp-text-muted) !important;
}

:root.dark .tg-stage-reply {
  border-left-color: var(--sp-text-muted) !important;
  background: var(--sp-accent-soft) !important;
}

:root.dark .tg-stage .tg-stage-older {
  color: var(--sp-text-muted) !important;
}

:root.dark [data-tg-chat-shell] .tg-chat-collapse:focus-visible {
  outline-color: var(--sp-border-strong) !important;
}

/* Cool gray utility tokens used by older pages. */
:root.dark [class*="bg-gray-"],
:root.dark [class*="bg-slate-"] {
  background-color: var(--sp-bg-muted) !important;
}

:root.dark [class*="border-gray-"],
:root.dark [class*="border-slate-"] {
  border-color: var(--sp-border) !important;
}

:root.dark [class*="text-gray-4"],
:root.dark [class*="text-gray-5"],
:root.dark [class*="text-gray-6"],
:root.dark [class*="text-slate-"] {
  color: var(--sp-text-muted) !important;
}

:root.dark .tg-manager-notice:not(.error) {
  background: var(--sp-bg-muted) !important;
  color: var(--sp-text-muted) !important;
  border: 1px solid var(--sp-border) !important;
}