.login-body {
  min-height: 100%;
  background: #f4f4f5;
  color: #0a0a0a;
}

html.dark .login-body {
  background: #09090b;
  color: #fafafa;
}

.login-mark {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #111;
  color: #fafafa;
}

html.dark .login-mark {
  background: #fafafa;
  color: #111;
}

:root,
html[data-theme="light"] {
  --app-sidebar: 15.5rem;
  --app-sidebar-collapsed: 4.5rem;
  --app-topbar: 3.5rem;
  --app-sidebar-bg: #111111;
  --app-sidebar-bg-2: #111111;
  --app-accent: #fafafa;
  --app-accent-soft: rgba(255, 255, 255, 0.1);
  --app-content-bg: #f4f4f5;
  --app-text: #0a0a0a;
  --app-muted: #71717a;
  --app-topbar-bg: rgba(255, 255, 255, 0.92);
  --app-topbar-border: #e4e4e7;
  --app-panel-bg: #ffffff;
  --app-panel-border: #e4e4e7;
  --app-icon-hover: #f4f4f5;
  --app-overlay: rgba(0, 0, 0, 0.45);
  --app-surface: #ffffff;
  --app-surface-2: #f4f4f5;
  --app-line: #e4e4e7;
  color-scheme: light;
}

html.dark,
html[data-theme="dark"] {
  --app-sidebar-bg: #000000;
  --app-sidebar-bg-2: #000000;
  --app-accent: #fafafa;
  --app-accent-soft: rgba(255, 255, 255, 0.08);
  --app-content-bg: #050505;
  --app-text: #fafafa;
  --app-muted: #a1a1aa;
  --app-topbar-bg: rgba(5, 5, 5, 0.94);
  --app-topbar-border: #1c1c1c;
  --app-panel-bg: #080808;
  --app-panel-border: #1c1c1c;
  --app-icon-hover: #111111;
  --app-overlay: rgba(0, 0, 0, 0.72);
  --app-surface: #080808;
  --app-surface-2: #000000;
  --app-line: #1c1c1c;
  color-scheme: dark;
}

/* ——— Decorative brand hues → ink (classic B&W) ——— */
.text-purple-500, .text-purple-600, .text-purple-700, .text-purple-800,
.text-violet-500, .text-violet-600, .text-violet-700, .text-violet-800, .text-violet-900,
.text-indigo-500, .text-indigo-600, .text-indigo-700,
.text-blue-500, .text-blue-600, .text-blue-700, .text-blue-800,
.text-sky-600, .text-sky-700, .text-sky-800, .text-sky-900,
.text-fuchsia-600, .text-pink-600 {
  color: #18181b !important;
}

html.dark .text-purple-500, html.dark .text-purple-600, html.dark .text-purple-700, html.dark .text-purple-800,
html.dark .text-violet-500, html.dark .text-violet-600, html.dark .text-violet-700, html.dark .text-violet-800, html.dark .text-violet-900,
html.dark .text-indigo-500, html.dark .text-indigo-600, html.dark .text-indigo-700,
html.dark .text-blue-500, html.dark .text-blue-600, html.dark .text-blue-700, html.dark .text-blue-800,
html.dark .text-sky-600, html.dark .text-sky-700, html.dark .text-sky-800, html.dark .text-sky-900,
html.dark .text-fuchsia-600, html.dark .text-pink-600 {
  color: #e4e4e7 !important;
}

.bg-purple-50, .bg-violet-50, .bg-indigo-50, .bg-blue-50, .bg-sky-50, .bg-fuchsia-50 {
  background-color: #f4f4f5 !important;
}
.bg-purple-100, .bg-violet-100, .bg-indigo-100, .bg-blue-100, .bg-sky-100 {
  background-color: #e4e4e7 !important;
}
.bg-purple-600, .bg-violet-600, .bg-indigo-600, .bg-blue-600, .bg-sky-600,
.bg-purple-700, .bg-violet-700, .bg-indigo-700 {
  background-color: #18181b !important;
  color: #fafafa;
}

html.dark .bg-purple-50, html.dark .bg-violet-50, html.dark .bg-indigo-50, html.dark .bg-blue-50, html.dark .bg-sky-50, html.dark .bg-fuchsia-50 {
  background-color: #1c1c20 !important;
}
html.dark .bg-purple-100, html.dark .bg-violet-100, html.dark .bg-indigo-100, html.dark .bg-blue-100, html.dark .bg-sky-100 {
  background-color: #3f3f46 !important;
}
html.dark .bg-purple-600, html.dark .bg-violet-600, html.dark .bg-indigo-600, html.dark .bg-blue-600,
html.dark .bg-purple-700, html.dark .bg-violet-700, html.dark .bg-indigo-700 {
  background-color: #fafafa !important;
  color: #0a0a0a !important;
}

.border-purple-200, .border-violet-200, .border-violet-300, .border-indigo-200, .border-blue-200, .border-sky-200 {
  border-color: #d4d4d8 !important;
}
html.dark .border-purple-200, html.dark .border-violet-200, html.dark .border-violet-300,
html.dark .border-indigo-200, html.dark .border-blue-200, html.dark .border-sky-200 {
  border-color: #3f3f46 !important;
}

.bg-amber-50, .bg-orange-50, .bg-emerald-50, .bg-rose-50, .bg-teal-50, .bg-green-50, .bg-red-50, .bg-yellow-50 {
  background-color: #f4f4f5 !important;
}
.text-amber-700, .text-amber-800, .text-amber-900,
.text-orange-700, .text-orange-800,
.text-emerald-500, .text-emerald-600, .text-emerald-700, .text-emerald-800,
.text-rose-600, .text-rose-700, .text-rose-800,
.text-teal-600, .text-green-600, .text-red-600, .text-red-800 {
  color: #18181b !important;
}
.border-amber-200, .border-orange-200, .border-emerald-200, .border-rose-200, .border-teal-200, .border-red-200, .border-green-200 {
  border-color: #d4d4d8 !important;
}
.from-purple-600, .from-violet-600, .from-indigo-600, .from-blue-600, .from-purple-500, .from-orange-500 {
  --tw-gradient-from: #18181b var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(24 24 27 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-blue-600, .to-indigo-700, .to-violet-600, .via-blue-600 {
  --tw-gradient-to: #3f3f46 var(--tw-gradient-to-position) !important;
}
html.dark .from-purple-600, html.dark .from-violet-600, html.dark .from-indigo-600, html.dark .from-blue-600 {
  --tw-gradient-from: #fafafa var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(250 250 250 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
html.dark .to-blue-600, html.dark .to-indigo-700, html.dark .to-violet-600, html.dark .via-blue-600 {
  --tw-gradient-to: #a1a1aa var(--tw-gradient-to-position) !important;
}

/* ——— Dark surfaces (all panel pages without per-file dark: classes) ——— */
html.dark .bg-white { background-color: #080808 !important; }
html.dark .bg-white\/80 { background-color: rgb(8 8 8 / 0.86) !important; }
html.dark .bg-white\/10 { background-color: rgb(255 255 255 / 0.08) !important; }
html.dark .bg-gray-50, html.dark .bg-slate-50, html.dark .bg-zinc-50, html.dark .bg-neutral-50,
html.dark .bg-zinc-50\/50, html.dark .bg-gray-50\/50 {
  background-color: #000000 !important;
}
html.dark .bg-gray-100, html.dark .bg-slate-100, html.dark .bg-zinc-100, html.dark .bg-neutral-100 {
  background-color: #1c1c20 !important;
}
html.dark .bg-gray-200, html.dark .bg-slate-200, html.dark .bg-zinc-200 {
  background-color: #2e2e33 !important;
}
html.dark .bg-slate-800, html.dark .bg-zinc-800, html.dark .bg-gray-800 {
  background-color: #1c1c20 !important;
}
html.dark .bg-slate-900, html.dark .bg-zinc-900, html.dark .bg-gray-900 {
  background-color: #fafafa !important;
  color: #0a0a0a !important;
}
html.dark .bg-black {
  background-color: #000 !important;
}
html.dark .hover\:bg-slate-800:hover, html.dark .hover\:bg-zinc-800:hover {
  background-color: #e4e4e7 !important;
  color: #0a0a0a !important;
}
html.dark .hover\:bg-slate-50:hover, html.dark .hover\:bg-zinc-50:hover,
html.dark .hover\:bg-zinc-50\/80:hover, html.dark .hover\:bg-gray-50:hover, html.dark .hover\:bg-gray-100:hover {
  background-color: #1c1c20 !important;
}
html.dark .hover\:bg-white:hover { background-color: #1c1c20 !important; }

html.dark .text-black,
html.dark .text-gray-800, html.dark .text-gray-900,
html.dark .text-slate-800, html.dark .text-slate-900,
html.dark .text-zinc-800, html.dark .text-zinc-900,
html.dark .text-neutral-800, html.dark .text-neutral-900 {
  color: #fafafa !important;
}
html.dark .text-gray-700, html.dark .text-slate-700, html.dark .text-zinc-700 {
  color: #e8e8ec !important;
}
html.dark .text-gray-600, html.dark .text-slate-600, html.dark .text-zinc-600 {
  color: #c8c8ce !important;
}
html.dark .text-gray-500, html.dark .text-slate-500, html.dark .text-zinc-500 {
  color: #9a9aa3 !important;
}
html.dark .text-gray-400, html.dark .text-slate-400, html.dark .text-zinc-400, html.dark .text-white\/60 {
  color: #7a7a84 !important;
}
html.dark .text-white { color: #fafafa !important; }
html.dark .bg-zinc-900,
html.dark .bg-slate-900,
html.dark .bg-gray-900 {
  background-color: #fafafa !important;
  color: #0a0a0a !important;
}
html.dark .bg-zinc-900.text-white,
html.dark .bg-slate-900.text-white,
html.dark .bg-gray-900.text-white,
html.dark .bg-zinc-900 .text-white,
html.dark .bg-slate-900 .text-white,
html.dark .bg-zinc-900 *,
html.dark .bg-slate-900 * {
  color: #0a0a0a !important;
}
html.dark .hover\:bg-zinc-800:hover,
html.dark .hover\:bg-slate-800:hover {
  background-color: #e4e4e7 !important;
  color: #0a0a0a !important;
}

html.dark .border-gray-100, html.dark .border-slate-100, html.dark .border-zinc-100 {
  border-color: #2e2e33 !important;
}
html.dark .border-gray-200, html.dark .border-slate-200, html.dark .border-zinc-200, html.dark .border-neutral-200 {
  border-color: #2e2e33 !important;
}
html.dark .border-gray-300, html.dark .border-slate-300, html.dark .border-zinc-300 {
  border-color: #3f3f46 !important;
}
html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-zinc-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: #2e2e33 !important;
}

html.dark .placeholder-gray-400::placeholder,
html.dark .placeholder-slate-400::placeholder,
html.dark .placeholder-zinc-400::placeholder {
  color: #71717a !important;
}

html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.dark select, html.dark textarea {
  background-color: #000000;
  color: #fafafa;
  border-color: #2a2a2a;
}

html.dark .shadow-card, html.dark .shadow-sm, html.dark .shadow, html.dark .shadow-md, html.dark .shadow-lg {
  --tw-shadow-color: rgb(0 0 0 / 0.45);
}

html.dark .bg-rose-50, html.dark .bg-rose-50\/80 { background-color: rgb(127 29 29 / 0.25) !important; }
html.dark .bg-amber-50 { background-color: rgb(120 53 15 / 0.25) !important; }
html.dark .bg-orange-50 { background-color: rgb(124 45 18 / 0.25) !important; }
html.dark .bg-emerald-50 { background-color: rgb(6 78 59 / 0.25) !important; }
html.dark .bg-teal-50 { background-color: rgb(19 78 74 / 0.25) !important; }
html.dark .text-rose-600, html.dark .text-rose-700, html.dark .text-rose-800 { color: #fda4af !important; }
html.dark .text-amber-700, html.dark .text-amber-800, html.dark .text-amber-900 { color: #fcd34d !important; }
html.dark .text-orange-700, html.dark .text-orange-800 { color: #fdba74 !important; }
html.dark .text-emerald-600, html.dark .text-emerald-700, html.dark .text-emerald-800, html.dark .text-emerald-500 {
  color: #6ee7b7 !important;
}
html.dark .border-rose-200 { border-color: rgb(251 113 133 / 0.35) !important; }
html.dark .border-amber-200 { border-color: rgb(251 191 36 / 0.35) !important; }
html.dark .border-orange-200 { border-color: rgb(251 146 60 / 0.35) !important; }
html.dark .border-emerald-200 { border-color: rgb(52 211 153 / 0.35) !important; }

html.dark .hover\:text-violet-700:hover, html.dark .hover\:text-violet-900:hover {
  color: #fafafa !important;
}

.app-theme-panel {
  background: var(--app-panel-bg, #fff);
  border: 1px solid var(--app-panel-border, #e4e4e7);
  border-radius: 0.9rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14);
  z-index: 40;
  width: 13.5rem !important;
  padding: 0.35rem;
}

.app-theme-option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 0.7rem;
  background: transparent;
  color: var(--app-text);
  font-size: 0.8125rem;
  font-weight: 550;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}

.app-theme-option i {
  width: 1rem;
  text-align: center;
  color: var(--app-muted);
}

.app-theme-option:hover,
.app-theme-option.is-active {
  background: var(--app-icon-hover);
}

.app-theme-option.is-active {
  font-weight: 650;
}

.theme-choice {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem;
  border: 1px solid #e4e4e7;
  border-radius: 1rem;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  text-align: left;
  width: 100%;
}

html.dark .theme-choice {
  border-color: #2e2e33;
  background: #131316;
}

.theme-choice:hover {
  border-color: #a1a1aa;
}

.theme-choice.is-active {
  border-color: #18181b;
  box-shadow: 0 0 0 1px #18181b;
}

html.dark .theme-choice.is-active {
  border-color: #fafafa;
  box-shadow: 0 0 0 1px #fafafa;
}

.theme-choice-preview {
  height: 3.25rem;
  border-radius: 0.65rem;
  border: 1px solid #e4e4e7;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1rem 1fr;
}

.theme-choice-preview.is-dark {
  border-color: #3f3f46;
  background: #0a0a0a;
}

.theme-choice-preview.is-light {
  background: #f4f4f5;
}

.theme-choice-preview.is-system {
  background: linear-gradient(90deg, #f4f4f5 50%, #0a0a0a 50%);
}

.theme-choice-preview span:first-child {
  background: #111;
}

.theme-choice-preview.is-light span:last-child {
  background: #fff;
  margin: 0.35rem 0.4rem;
  border-radius: 0.25rem;
}

.theme-choice-preview.is-dark span:last-child {
  background: #131316;
  margin: 0.35rem 0.4rem;
  border-radius: 0.25rem;
}

.theme-choice-preview.is-system span:last-child {
  background: transparent;
}

/* Page-local hubs that hardcode #fff / indigo — follow shell tokens */
.reports-hub,
.qc-section,
.var-sheet {
  color: var(--app-text);
}

html.dark .qc-section,
html.dark .var-sheet {
  background: var(--app-panel-bg) !important;
  border-color: var(--app-panel-border) !important;
}

html.dark .qc-head {
  border-bottom-color: var(--app-panel-border) !important;
}

html.dark .qc-label,
html.dark .qc-calc strong {
  color: var(--app-text) !important;
}

html.dark .qc-hint {
  color: var(--app-muted) !important;
}

html.dark .qc-input,
html.dark .qc-select,
html.dark .qc-textarea {
  background: var(--app-content-bg) !important;
  color: var(--app-text) !important;
  border-color: var(--app-panel-border) !important;
}

html.dark .qc-input:focus,
html.dark .qc-select:focus,
html.dark .qc-textarea:focus {
  border-color: #a1a1aa !important;
  box-shadow: 0 0 0 3px rgba(250, 250, 250, 0.08) !important;
}

html.dark .qc-calc {
  background: #111 !important;
  color: var(--app-muted) !important;
}

/* Colorful hover leftovers → zinc (fixes cream table rows in dark) */
.hover\:bg-purple-50:hover,
.hover\:bg-violet-50:hover,
.hover\:bg-indigo-50:hover,
.hover\:bg-blue-50:hover,
.hover\:bg-sky-50:hover,
.hover\:bg-yellow-50:hover,
.hover\:bg-amber-50:hover,
.hover\:bg-green-50:hover,
.hover\:bg-emerald-50:hover,
.hover\:bg-red-50:hover,
.hover\:bg-gray-50\/50:hover {
  background-color: #f4f4f5 !important;
}

html.dark .hover\:bg-purple-50:hover,
html.dark .hover\:bg-violet-50:hover,
html.dark .hover\:bg-indigo-50:hover,
html.dark .hover\:bg-blue-50:hover,
html.dark .hover\:bg-sky-50:hover,
html.dark .hover\:bg-yellow-50:hover,
html.dark .hover\:bg-amber-50:hover,
html.dark .hover\:bg-green-50:hover,
html.dark .hover\:bg-emerald-50:hover,
html.dark .hover\:bg-red-50:hover,
html.dark .hover\:bg-gray-50\/50:hover,
html.dark .hover\:bg-white:hover {
  background-color: #1c1c20 !important;
}

html.dark .bg-yellow-50,
html.dark .bg-purple-50,
html.dark .bg-violet-50 {
  background-color: #131316 !important;
}

html.dark .tox-tinymce {
  border-color: #2e2e33 !important;
  background: #131316 !important;
}

html.dark .tox .tox-editor-header,
html.dark .tox .tox-toolbar-overlord,
html.dark .tox .tox-toolbar,
html.dark .tox .tox-toolbar__overflow,
html.dark .tox .tox-toolbar__primary,
html.dark .tox .tox-toolbar__group,
html.dark .tox .tox-menubar,
html.dark .tox .tox-anchorbar,
html.dark .tox .tox-statusbar {
  background: #131316 !important;
  background-color: #131316 !important;
  background-image: none !important;
  border-color: #2e2e33 !important;
}

html.dark .tox .tox-statusbar {
  border-top: 1px solid #2e2e33 !important;
}

html.dark .tox .tox-tbtn,
html.dark .tox .tox-split-button,
html.dark .tox .tox-statusbar__path-item,
html.dark .tox .tox-statusbar__wordcount,
html.dark .tox .tox-statusbar__branding {
  color: #a1a1aa !important;
}

html.dark .tox .tox-tbtn svg,
html.dark .tox .tox-tbtn svg path {
  fill: #a1a1aa !important;
}

html.dark .tox .tox-tbtn:hover,
html.dark .tox .tox-split-button:hover {
  background: #1c1c20 !important;
  color: #fafafa !important;
}

html.dark .tox .tox-tbtn--select,
html.dark .tox .tox-tbtn--bespoke,
html.dark .tox .tox-listbox,
html.dark .tox .tox-listboxfield,
html.dark .tox .tox-listboxfield .tox-listbox,
html.dark .tox .tox-split-button,
html.dark .tox .tox-split-button__chevron {
  background: #1c1c20 !important;
  background-color: #1c1c20 !important;
  background-image: none !important;
  color: #e4e4e7 !important;
  border-color: #2e2e33 !important;
}

html.dark .tox .tox-tbtn--select:hover,
html.dark .tox .tox-tbtn--bespoke:hover,
html.dark .tox .tox-listbox:hover,
html.dark .tox .tox-split-button:hover {
  background: #27272a !important;
  color: #fafafa !important;
}

html.dark .tox .tox-menu,
html.dark .tox .tox-collection,
html.dark .tox .tox-selected-menu,
html.dark .tox .tox-collection--list .tox-collection__group,
html.dark .tox .tox-collection__item {
  background: #131316 !important;
  background-color: #131316 !important;
  color: #e4e4e7 !important;
  border-color: #2e2e33 !important;
}

html.dark .tox .tox-collection__item--active,
html.dark .tox .tox-collection__item--enabled {
  background: #27272a !important;
  color: #fafafa !important;
}

html.dark .tox .tox-edit-area,
html.dark .tox .tox-edit-area__iframe {
  background-color: #131316 !important;
}