/* Dark theme. Light mode is the :root tokens in tokens.css and is not changed here. */

html[data-theme="dark"] {
  color-scheme: dark;
  --color-brand: #0c2233;
  --color-brand-ink: #f4f8fb;
  --color-canvas: #12181e;
  --color-surface: #1b242d;
  --color-surface-alt: #24303b;
  --color-border: #31404c;
  --color-border-strong: #415463;
  --color-ink: #e7eef4;
  --color-ink-soft: #b7c3ce;
  --color-ink-faint: #8ea0ae;
  --color-accent: #7ec8ea;
  --color-accent-hover: #a5daf2;
  --color-accent-soft: #1c3a4d;
  --color-pass: #3dbe78;
  --color-kill: #f07070;
  --color-watch: #79b0e8;
  --color-success: #3dbe78;
  --color-danger: #f07070;
  --color-warning: #e2b15a;
  --color-warning-bg: #3a2e16;
  --navy: #e7eef4;
  --paper: #12181e;
  --text: #e7eef4;
  --muted: #b7c3ce;
  --line: #31404c;
  --link: #7ec8ea;
  --sidebar: #161e26;
  --sidebar-border: #31404c;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .main,
html[data-theme="dark"] .assoc-main {
  background: var(--color-canvas);
  color: var(--color-ink);
}

html[data-theme="dark"] .app-header,
html[data-theme="dark"] .assoc-top {
  background: #0c2233;
  color: #f4f8fb;
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .assoc-side,
html[data-theme="dark"] .phone-tabbar,
html[data-theme="dark"] .more-sheet {
  background: var(--color-surface);
  color: var(--color-ink);
  border-color: var(--color-border);
}

html[data-theme="dark"] .sidebar a,
html[data-theme="dark"] .assoc-side a,
html[data-theme="dark"] .phone-tabbar a {
  color: var(--color-ink);
}

html[data-theme="dark"] .sidebar a.active,
html[data-theme="dark"] .assoc-side a.active {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

html[data-theme="dark"] article.lu-row,
html[data-theme="dark"] .bill-card,
html[data-theme="dark"] .surface-card,
html[data-theme="dark"] .client-card,
html[data-theme="dark"] .assoc-card,
html[data-theme="dark"] .assoc-item,
html[data-theme="dark"] .data-table,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .login-card {
  background: var(--color-surface);
  color: var(--color-ink);
  border-color: var(--color-border);
}

html[data-theme="dark"] article.lu-row.order-watch { background: #16324a !important; }
html[data-theme="dark"] article.lu-row.order-pass { background: #143226 !important; }
html[data-theme="dark"] article.lu-row.order-kill { background: #3a1c1c !important; }

html[data-theme="dark"] article.lu-row h3.lu-row-title,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3 {
  color: var(--color-ink);
}

html[data-theme="dark"] article.lu-row .lu-row-action,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .assoc-note {
  color: var(--color-ink-soft);
}

html[data-theme="dark"] .data-table th {
  background: #24303b;
  color: var(--color-ink);
}

html[data-theme="dark"] .data-table td,
html[data-theme="dark"] .data-table tr {
  border-color: var(--color-border);
  color: var(--color-ink);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #12181e;
  color: var(--color-ink);
  border-color: var(--color-border-strong);
}

html[data-theme="dark"] .ai-summary-body,
html[data-theme="dark"] .assoc-summary {
  background: #12181e;
  color: var(--color-ink);
}

html[data-theme="dark"] .pwa-install-bar {
  background: #0c2233;
  color: #f4f8fb;
}

html[data-theme="dark"] .lu-status {
  background: #24303b;
  color: var(--color-ink-soft);
  border-color: var(--color-border);
}

/* 2026-11-11 darkfix: beat html.brand-v2 hardcoded light colors.
   Cards and chrome that stayed light (or kept dark text) while tokens flipped. */

html.brand-v2[data-theme="dark"] .app-header,
html[data-theme="dark"] .app-header,
html[data-theme="dark"] .assoc-top {
  background: #0c2233;
  color: #f4f8fb;
  border-bottom-color: #31404c;
  box-shadow: none;
}

html.brand-v2[data-theme="dark"] .app-header .brand,
html.brand-v2[data-theme="dark"] .app-header .brand:hover,
html.brand-v2[data-theme="dark"] .app-header .hamburger,
html.brand-v2[data-theme="dark"] .app-header .user-menu,
html.brand-v2[data-theme="dark"] .app-header .fa,
html[data-theme="dark"] .app-header .fa,
html[data-theme="dark"] .app-header .user-menu {
  color: #f4f8fb;
}

html.brand-v2[data-theme="dark"] .section-title,
html.brand-v2[data-theme="dark"] h1,
html.brand-v2[data-theme="dark"] h2,
html.brand-v2[data-theme="dark"] h3,
html.brand-v2[data-theme="dark"] .page-title {
  color: var(--color-ink);
}

html.brand-v2[data-theme="dark"] a:not(.btn):not(.btn-primary):not(.track-card) {
  color: var(--link);
}
html.brand-v2[data-theme="dark"] a:not(.btn):not(.btn-primary):not(.track-card):hover {
  color: var(--color-accent-hover);
}

/* btn-ghost was excluded from the link rule; html.brand-v2 a hardcodes #0c5c96 (2.54:1). Color only. */
html.brand-v2[data-theme="dark"] a.btn-ghost,
html.brand-v2[data-theme="dark"] button.btn-ghost,
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] a.btn-ghost,
html[data-theme="dark"] button.btn-ghost {
  color: var(--link);
}
html.brand-v2[data-theme="dark"] a.btn-ghost:hover,
html.brand-v2[data-theme="dark"] button.btn-ghost:hover,
html[data-theme="dark"] .btn-ghost:hover,
html[data-theme="dark"] a.btn-ghost:hover,
html[data-theme="dark"] button.btn-ghost:hover {
  color: var(--color-accent-hover);
}

html.brand-v2[data-theme="dark"] .phone-tabbar a,
html.brand-v2[data-theme="dark"] .phone-tabbar button,
html[data-theme="dark"] .phone-tabbar a,
html[data-theme="dark"] .phone-tabbar button {
  color: var(--color-brand-ink);
}

html[data-theme="dark"] .track-card,
html[data-theme="dark"] .leg-card,
html[data-theme="dark"] .check-card,
html[data-theme="dark"] .activity-item,
html[data-theme="dark"] .meeting-card,
html[data-theme="dark"] .ag-card,
html[data-theme="dark"] .agenda-card,
html[data-theme="dark"] .cm-meeting,
html[data-theme="dark"] .pwa-card,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .position-hero {
  background: var(--color-surface);
  color: var(--color-ink);
  border-color: var(--color-border);
}

html[data-theme="dark"] .position-hero h2 {
  color: var(--color-ink);
}

html[data-theme="dark"] .track-card,
html.brand-v2[data-theme="dark"] .track-card {
  color: var(--color-ink);
}

html[data-theme="dark"] .track-card-name,
html[data-theme="dark"] .track-card-count strong {
  color: var(--color-ink);
}

html[data-theme="dark"] .track-card-meta {
  color: var(--color-ink-soft);
}

html[data-theme="dark"] .seg {
  border-color: var(--color-border);
}

html[data-theme="dark"] .seg a,
html[data-theme="dark"] .seg button {
  background: var(--color-surface);
  color: var(--color-ink);
  border-color: var(--color-border);
}

html[data-theme="dark"] .seg a.active,
html[data-theme="dark"] .seg button.active {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

html[data-theme="dark"] .pos-filters a,
html.brand-v2[data-theme="dark"] .pos-filters a {
  background: var(--color-surface);
  color: var(--color-ink);
  border-color: var(--color-border);
}
html[data-theme="dark"] .pos-filters a.on,
html.brand-v2[data-theme="dark"] .pos-filters a.on {
  color: #fff;
}

html[data-theme="dark"] article.lu-row .lu-row-links a,
html[data-theme="dark"] article.lu-row .lu-row-links button.linkish {
  color: var(--color-ink-soft) !important;
}

html[data-theme="dark"] article.lu-row .lu-order-label {
  color: var(--color-ink);
}

/* r3: selected Pass/Kill/Watch use dark ink on the lightened fills. Color only. */
html[data-theme="dark"] {
  --color-pass-ink: #0c2233;
  --color-kill-ink: #0c2233;
  --color-watch-ink: #0c2233;
}

html.brand-v2[data-theme="dark"] button.pos.pos-pass.is-on:not(.lu-sq),
html.brand-v2[data-theme="dark"] button.pos.pos-kill.is-on:not(.lu-sq),
html.brand-v2[data-theme="dark"] button.pos.pos-watch.is-on:not(.lu-sq),
html[data-theme="dark"] button.pos.pos-pass.is-on:not(.lu-sq),
html[data-theme="dark"] button.pos.pos-kill.is-on:not(.lu-sq),
html[data-theme="dark"] button.pos.pos-watch.is-on:not(.lu-sq),
html.brand-v2[data-theme="dark"] .order-badge.pass,
html.brand-v2[data-theme="dark"] .order-badge.kill,
html.brand-v2[data-theme="dark"] .order-badge.watch,
html[data-theme="dark"] .order-badge.pass,
html[data-theme="dark"] .order-badge.kill,
html[data-theme="dark"] .order-badge.watch {
  color: #0c2233;
}