/* Appearance choice for the unpublished portal design experiment.
   Light keeps the approved slate palette; Dark restores the original Hub colors.
   Typography, dimensions and component spacing are shared between both themes. */
:root[data-theme="dark"] {
  --tl-workspace: oklch(.245 .008 280);
  --tl-shell: oklch(.15 .008 280);
  --tl-shell-deep: oklch(.15 .008 280);
  --tl-shell-raised: oklch(.205 .008 280);
  --tl-shell-border: oklch(1 0 0 / 8%);
  --tl-surface: oklch(.18 .008 280);
  --tl-surface-subtle: oklch(.168 .008 280);
  --tl-surface-muted: oklch(.205 .008 280);
  --tl-popover: oklch(.185 .005 285.8);
  --tl-border: oklch(1 0 0 / 8%);
  --tl-border-strong: oklch(1 0 0 / 18%);
  --tl-input: oklch(1 0 0 / 14%);
  --tl-text: oklch(.975 .002 285);
  --tl-text-secondary: oklch(.82 .006 285.8);
  --tl-text-muted: oklch(.68 .008 285.8);
  --tl-purple-soft: oklch(.62 .22 285 / 10%);
  --tl-focus: oklch(.7 .2 340 / 35%);
}
html[data-theme="dark"] body .topbar { background: oklch(.245 .008 280 / 80%) !important; }
html[data-theme="dark"] body :is(#app,.page,#authCard,#profileModal,.team-dialog) :is(input:not([type=checkbox]):not([type=radio]),select,textarea) { background: var(--tl-surface-subtle) !important; }
html[data-theme="dark"] body :is(input,textarea)::placeholder { color: var(--tl-text-muted) !important; }
html[data-theme="dark"] body .sidebar .hub-nav-icon { background: var(--tl-surface-subtle); }
html[data-theme="dark"] body .sidebar #tabs a.route.active { background: var(--tl-surface-muted) !important; }
html[data-theme="dark"] body .sidebar #tabs a.route.active .hub-nav-icon { background: var(--tl-gradient); }
html[data-theme="dark"] body #insightsCard .hub-stat { background: var(--tl-surface) !important; box-shadow: none; }
html[data-theme="dark"] body #insightsCard .hub-stat-value { color: var(--tl-text) !important; }
html[data-theme="dark"] body #insightsCard .insights-eyebrow,
html[data-theme="dark"] body #insightsCard .insights-signal-tag { color: var(--tl-text-muted) !important; }
html[data-theme="dark"] body #insightsCard .insights-company-head { background: transparent !important; }
html[data-theme="dark"] body #insightsCard .insights-company-head .pill { color: var(--tl-text-muted) !important; background: var(--tl-surface-muted) !important; border-color: var(--tl-border) !important; }
html[data-theme="dark"] body #insightsCard .insights-signal-source { color: var(--tl-pink) !important; }
html[data-theme="dark"] body #insightsCard .insights-signal-item:hover { background: var(--tl-surface-muted) !important; border-color: var(--tl-border-strong) !important; }
html[data-theme="dark"] body #pageDashboardGrid #recentSearches .recent-search-row strong { color: var(--tl-text); }
html[data-theme="dark"] body #page-vendor .sales-focus-fields { background: oklch(.62 .22 285 / 9%) !important; border-color: oklch(.72 .15 285 / 35%) !important; }
html[data-theme="dark"] body #page-vendor .vendor-enriched-fields { background: oklch(.24 .018 285) !important; border-color: oklch(.72 .15 285 / 50%) !important; }
html[data-theme="dark"] body .messaging-tone-option { background: var(--tl-surface-subtle) !important; }
html[data-theme="dark"] body .messaging-tone-option:has(input:checked) { background: var(--tl-surface-muted) !important; border-color: oklch(.62 .22 285 / 60%) !important; }
html[data-theme="dark"] body :is(.messaging-save-bar,.team-dialog-header) { background: var(--tl-surface) !important; }
html[data-theme="dark"] body #app .hub-prospect-search { background: var(--tl-surface-subtle); }
/* Compound search controls retain a single surface in either theme. */
html[data-theme="dark"] body #app .hub-prospect-search #q { background: transparent !important; }

html body .portal-theme-switch {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); flex: 0 0 auto;
  gap: 4px; margin: 14px 0 4px; padding: 4px; border: 1px solid var(--tl-border);
  border-radius: 10px; background: var(--tl-surface-subtle);
}
html body .portal-theme-switch button {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-width: 0; height: 40px; min-height: 40px; padding: 8px 10px;
  border: 1px solid transparent !important; border-radius: 7px; cursor: pointer;
  background: transparent !important; color: var(--tl-text-muted) !important;
  font: 700 13px/1.4 Inter,system-ui,sans-serif !important;
}
html body .portal-theme-switch button[aria-pressed="true"] {
  color: var(--tl-text) !important; border-color: var(--tl-border-strong) !important;
  background: var(--tl-surface-muted) !important;
}
html body .portal-theme-switch button:hover { color: var(--tl-text) !important; }
html body .portal-theme-switch svg { flex: 0 0 17px; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }