/* ExoNeuro's default identity. Loaded after workspace.css; no OS-theme dependency. */
:root {
  color-scheme: dark;
  color: #f5f5f5;
  background: #000;
  --nav: #000;
  --ink: #f5f5f5;
  --muted: #b0b0b0;
  --line: #303030;
  --border: var(--line);
  --blue: #fff;
  --accent: #fff;
  --surface: #111;
  --surface-raised: #1b1b1b;
  --surface-hover: #242424;
  --success-bg: #10291e;
  --success-ink: #9ee7c0;
  --warning-bg: #302510;
  --warning-ink: #f6d082;
  --danger-bg: #30171e;
  --danger-ink: #ffadb8;
  --info-bg: #172438;
  --info-ink: #b3ccff;
  --purple-bg: #281e38;
  --purple-ink: #d5b8ff;
}
html, body, .shell, .main, .loading-screen, .login-page {
  background: #000;
  color: var(--ink);
}
::selection { background: #fff; color: #000; }
/* The approved image is shared by the initial loading screen and dynamic brands.
   Keep the existing textual name accessible without changing app rendering logic. */
.brand { position: relative; min-height: 34px; }
.brand::before {
  content: "";
  display: block;
  flex: 0 1 196px;
  width: 196px;
  max-width: 100%;
  height: 32px;
  background: url("./wordmark.png") center left / contain no-repeat;
}
.brand > .brand-mark { display: none; }
.brand > div {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.brand-wordmark {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
}
.login-card { background: var(--surface); border: 1px solid var(--line); box-shadow: 0 24px 80px #0008; }
.login-card .brand { padding: 0; }
.login-card .brand::before { flex-basis: 240px; width: 240px; height: 36px; }
.sidebar { background: #000; color: #c6c6c6; border-right: 1px solid var(--line); }
.topbar { background: #000; }
.workspace-label, .profile-label, .logout { color: var(--muted); }
.nav-button { color: #c6c6c6; }
.nav-button:hover { background: var(--surface-raised); }
.nav-button.active { background: var(--surface-hover); }
.nav-button .count { background: #383838; color: #fff; }
.board-section button.add-board { color: #d5d5d5; }
.profile { border-color: var(--line); }
.avatar, .profile .avatar { background: #292929; color: #eee; }
.live-label { color: #b8c8bd; }
/* Neutral, layered surfaces rather than inverted page contents. */
.panel, .stat, .monitor-card, .kanban-card,
.ads-panel, .ads-account, .ads-empty,
.mail-account-card, .mail-layout, .mail-row,
.website-card, .website-job, dialog, .dialog-header {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
.kanban-column, .coverage-strip, .info-note, .detail-history,
.ads-evidence, .mail-sender {
  background: var(--surface-raised);
  border-color: var(--line);
}
.kanban-card { box-shadow: none; }
.stat:hover, .kanban-card:hover { border-color: #666; }
th, .ads-table th { background: var(--surface-raised); color: var(--muted); }
td, .mail-row, .mail-drafts, .mail-layout, #mail-list,
.ga4-metrics > div, .ga4-check { border-color: var(--line); }
.item-row:hover, .mail-row:hover, .mail-row:focus-visible { background: var(--surface-hover); }
.mail-unread { background: #191d24; box-shadow: inset 3px 0 var(--blue); }
/* Native controls also default to dark before JavaScript or user interaction. */
input, select, textarea, .filter,
.field input, .field select, .field textarea,
.ads-settings input, .ads-filter select,
.mail-home input, .mail-home select, .mail-home textarea,
.ga4-controls select, .ga4-controls input,
.website-form input, .website-form select, .comment-form textarea {
  background: #161616;
  color: var(--ink);
  border-color: #505050;
}
input::placeholder, textarea::placeholder { color: #a3a3a3; opacity: 1; }
.search, .view-toggle { background: #161616; border-color: #505050; }
.search input { background: transparent; color: var(--ink); }
.search:focus-within { outline: 2px solid var(--blue); outline-offset: 3px; }
button.icon-button, .secondary {
  background: var(--surface-raised);
  border-color: #505050;
  color: var(--ink);
}
button.icon-button:hover, .secondary:hover { background: #2c2c2c; color: #fff; }
.primary { background: #fff; color: #080808; border-color: #fff; }
.primary:hover { background: #dedede; color: #000; border-color: #dedede; }
.view-toggle button.active, .mail-tabs [aria-pressed="true"] {
  background: #303030; color: #fff; border-color: #777;
}
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible,
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-color: var(--blue);
}
input[type="checkbox"], input[type="radio"] { accent-color: #fff; }
/* Replace hard-coded light-theme text colours on every workspace module. */
.stat-label svg, .search svg, .item-company, .next-action, .priority, .date,
.column-header, .column-empty, .monitor-card dt, .monitor-card dd,
.info-note, .activity-copy small, .event-change, .field label, .field-help,
.section-title, .detail-metadata, .mail-home label, .mail-row-top,
.ga4-metrics span { color: var(--muted); }
.empty-icon, .event-icon { background: #252525; color: #d8d8d8; }
.mail-connect a { color: var(--blue); }
/* Status colours remain semantic and legible on charcoal surfaces. */
.badge, .badge.inbox, .ads-health, .ads-status, .ads-category {
  background: #2a2a2a; color: #d0d0d0;
}
.badge.ready, .badge.in_progress, .health-running, .mail-tone-0 {
  background: var(--info-bg); color: var(--info-ink);
}
.badge.waiting, .health-partial, .ads-health.pending, .archive-banner,
.ads-error, .ads-message, .mail-tone-3 {
  background: var(--warning-bg); color: var(--warning-ink);
}
.login-note { background: var(--warning-bg); color: var(--warning-ink) !important; }
.badge.needs_decision, .mail-tone-2 {
  background: var(--purple-bg); color: var(--purple-ink);
}
.badge.blocked, .health-failed, .health-stale, .error-box, .form-error,
.mail-tone-5 { background: var(--danger-bg); color: var(--danger-ink); }
.error-box { border-color: #75424a; }
.badge.resolved, .health-ok, .ads-health.good, .mail-tone-1 {
  background: var(--success-bg); color: var(--success-ink);
}
.mail-tone-4 { background: #122a2d; color: #a1e0e8; }
.mail-account-status { color: var(--success-ink); }
.mail-account-warning, .priority.high { color: var(--warning-ink); }
.priority.urgent, .date.overdue, .danger-link, .ga4-warning,
.mail-account-actions .quiet-button { color: var(--danger-ink); }
dialog { box-shadow: 0 25px 100px #000a; }
dialog::backdrop, .mail-dialog::backdrop, .website-dialog::backdrop,
.shell.nav-open .mobile-backdrop { background: #000b; }
#toast { background: #292929; color: #fff; border: 1px solid #505050; box-shadow: 0 8px 30px #0008; }
@media (max-width: 600px) {
  .login-card .brand::before { max-width: 100%; }
}
/* Match the mobile navigation breakpoint; preserve the approved artwork and
   desktop dimensions. Reduce only display size, never stretch the wordmark. */
@media (max-width: 760px) {
  .sidebar .brand::before { flex-basis: 150px; width: 150px; height: 24px; }
  .login-card .brand::before { flex-basis: 180px; width: 180px; height: 26px; }
  .loading-screen .brand-wordmark { width: 180px; }
}
/* Windows/high-contrast mode may suppress backgrounds. Keep the brand visible. */
@media (forced-colors: active) {
  .brand::before { display: none; }
  .brand > div { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; }
  .brand, .brand span:last-child { color: CanvasText; }
}