/* Neutral dark surfaces with softened V-System brand-red accents. */
html[data-theme=dark] {
  --navi-canvas:#1f1f1f;
  --navi-surface:#292929;
  --appearance-raised:#333333;
  --navi-ink:#e6e6e6;
  --navi-muted:#bdbdbd;
  --navi-line:#454545;
  --navi-soft:#402b2b;
  --navi-accent:#ee8c86;
  --night-selected:#4a2d2c;
  --night-selected-ink:#f9e8e6;
  --night-action:#ad3c36;
  --night-action-hover:#bb443d;
  --navi-success:#8ecb9d;
  --navi-warning:#e0bd75;
  --navi-danger:#f0a0a0;
  --vn-black:var(--navi-ink);
  --vn-charcoal:#d2d2d2;
  --vn-graphite:var(--navi-muted);
  --vn-line:var(--navi-line);
  --vn-paper:var(--navi-canvas);
  --border:var(--navi-line);
  --blue:var(--navi-accent);
  --navi-shadow:none;
  --system-backdrop:linear-gradient(#1f1f1f,#1f1f1f);
  --system-arc:#ffffff06;
  --night-chart:var(--navi-accent);
  --night-info:#63ade7;
}
html[data-theme=dark]:has(#portal-view:not(.hidden)) {
  --system-backdrop:linear-gradient(#1f1f1f,#1f1f1f);
}
html[data-theme=dark] :is(.sidebar,.topbar,.entry-shell) { background:var(--navi-surface); }
html[data-theme=dark] :is(.login-panel,.invite-panel) { background:var(--navi-canvas); }
html[data-theme=dark] :is(.brand-mark,.topbar-mobile-brand,.login-service-icon,.navi-mobile) {
  filter:brightness(.72) saturate(.75);
}
html[data-theme=dark] #portal-view .nav-group-title { background:var(--navi-surface); }
html[data-theme=dark] #portal-view :is(.nav-item:hover,.nav-group-title:hover,.nav-sub-item:hover) {
  background:var(--appearance-raised); color:var(--navi-ink);
}
html[data-theme=dark] #portal-view :is(.nav-sub-item.active,.nav-item.active) {
  background:var(--night-selected); color:var(--night-selected-ink); border-left-color:var(--navi-accent);
}
html[data-theme=dark] #portal-view .nav-group.active .nav-group-title { background:var(--appearance-raised); }
html[data-theme=dark] .nav-sub-item.active .sub-nav-icon { color:var(--navi-accent); filter:none; }

/* Nested surfaces must override light gradients as well as background colors. */
html[data-theme=dark] :is(.overview-metric > header,.project-health-stat,.metric-definition code,.project-health-method > span) {
  background:var(--appearance-raised); border-color:var(--navi-line); color:var(--navi-ink);
}
html[data-theme=dark] :is(.overview-metric header button,.chart-points circle) {
  background:var(--navi-surface); fill:var(--navi-surface); border-color:var(--navi-line); color:var(--navi-muted);
}
html[data-theme=dark] :is(.overview-period,.quality-filter-title,.metric-definition,.file-picker span) { border-color:var(--navi-line); }
html[data-theme=dark] :is(.overview-period-title b,.overview-period-title span,.overview-period-legend,.overview-project-filter label span,.quality-filters label > span,.quality-metric-card p,.project-health-stat span,.metric-definition header span) { color:var(--navi-muted); }
html[data-theme=dark] :is(.project-health-stat strong,.project-health-method b,.quality-report-table td strong,.project-health-table td strong,.metric-definition header strong,.quality-filter-title b) { color:var(--navi-ink); }
html[data-theme=dark] :is(.overview-sparkline polyline,.chart-line,.chart-points circle) { stroke:var(--night-chart); }
html[data-theme=dark] .chart-area { fill:color-mix(in srgb,var(--night-chart) 8%,transparent); }
html[data-theme=dark] .chart-grid line { stroke:var(--navi-line); }
html[data-theme=dark] :is(.chart-grid text,.chart-points text) { fill:var(--navi-muted); }
html[data-theme=dark] :is(.overview-sparkline small.positive,.quality-report-table .positive) { color:var(--navi-success); }
html[data-theme=dark] .overview-sparkline small.negative { color:var(--navi-danger); }
html[data-theme=dark] :is(.quality-report-table .warning,.project-score.light) { color:var(--navi-warning); }
html[data-theme=dark] .project-score.severe { color:var(--navi-danger); }
html[data-theme=dark] .project-score.research { color:var(--night-info); }
html[data-theme=dark] :is(.project-health-badge.severe,.quality-heading-actions > span.demo-data,.invite-error) { background:#462a2c; color:var(--navi-danger); border-color:#654344; }
html[data-theme=dark] .project-health-badge.light { background:#393428; color:var(--navi-warning); }
html[data-theme=dark] .project-health-badge.research { background:#293641; color:var(--night-info); }
html[data-theme=dark] .role-badge.user { background:var(--appearance-raised); color:var(--navi-muted); }
html[data-theme=dark] .status-badge.deleted { background:var(--appearance-raised); color:var(--navi-muted); }
html[data-theme=dark] .modal:has(.email-flow) { background:var(--navi-surface); }
html[data-theme=dark] ::placeholder { color:#adadad; }
html[data-theme=dark] { scrollbar-color:#666666 var(--navi-canvas); }
html[data-theme=dark] :is(button,a,input,select,textarea):focus-visible { outline-color:var(--navi-accent); }

/* Deeper red actions keep white labels readable; status colors remain independent. */
html[data-theme=dark] .primary-button { background:var(--night-action); color:#ffffff; }
html[data-theme=dark] .primary-button:hover { background:var(--night-action-hover); }
html[data-theme=dark] :is(.status-badge,.quality-badge,.metric-card.green .metric-icon) { background:#253d2c; color:var(--navi-success); }
html[data-theme=dark] :is(.status-badge.failed,.status-badge.offline,.ota-status.failed,.notification-status.failed,.invitation-status.revoked) { background:#462a2c; color:var(--navi-danger); }
html[data-theme=dark] :is(.status-badge.pending,.status-badge.in-progress,.ota-status.pending,.ota-status.in-progress,.notification-status.pending,.invitation-status.expired) { background:#403722; color:var(--navi-warning); }
html[data-theme=dark] .status-badge.deleted { background:var(--appearance-raised); color:var(--navi-muted); }
html[data-theme=dark] .role-badge.user { background:var(--appearance-raised); color:var(--navi-muted); }
/* Nested and transient content: use the same theme tokens as its parent panel. */
html[data-theme=dark] {
  --muted:var(--navi-muted);
  --night-success-surface:#253d2c;
  --night-warning-surface:#403722;
  --night-danger-surface:#462a2c;
}
html[data-theme=dark] :is(.notification-item,.generate-password-button) { background:var(--navi-surface); color:var(--navi-ink); border-color:var(--navi-line); }
html[data-theme=dark] :is(.notification-item.unread,.notification-item:hover,.notification-item:focus-visible,.generate-password-button:hover) { background:var(--appearance-raised); }
html[data-theme=dark] :is(.notification-copy b,.connection-details dd,.profile-summary-details b) { color:var(--navi-ink); }
html[data-theme=dark] :is(.notification-empty,.notification-meta,.connection-details dt,.sync-progress-heading span,.password-strength-heading,.password-strength-heading b,.check,.ota-form label > span,.invitation-result label,.invite-role-row span) { color:var(--navi-muted); }
html[data-theme=dark] :is(.notification-state,.password-requirements span,.ota-status,.invitation-status,.deleted-row,.invitation-alternatives) { background:var(--appearance-raised); color:var(--navi-muted); }
html[data-theme=dark] :is(.notification-item.success .notification-state,.password-requirements span.met,.ota-status.online,.invitation-status.active) { background:var(--night-success-surface); color:var(--navi-success); }
html[data-theme=dark] :is(.notification-item.failed .notification-state,.ota-status.offline,.invitation-status.revoked,.danger-note) { background:var(--night-danger-surface); color:var(--navi-danger); }
html[data-theme=dark] :is(.notification-item.in-progress .notification-state,.ota-status.pending,.invitation-status.expired) { background:var(--night-warning-surface); color:var(--navi-warning); }
html[data-theme=dark] .invitation-status.used { background:var(--navi-soft); color:var(--navi-accent); }
html[data-theme=dark] :is(.notification-item.success .notification-status,.generated-password-message) { color:var(--navi-success); }
html[data-theme=dark] :is(.notification-item.failed .notification-status,.connection-state p,.email-field-error,.email-form-error) { color:var(--navi-danger); }
html[data-theme=dark] :is(.notification-item.in-progress .notification-status,.network-warning,.metric-card.amber strong) { color:var(--navi-warning); }
html[data-theme=dark] .notification-unread { background:var(--navi-soft); color:var(--navi-ink); border-color:var(--navi-surface); }
html[data-theme=dark] :is(.account-dropdown hr,.profile-summary-details,.profile-summary-details div,.connection-details div,.invite-mobile-brand,.admin-navigation > p) { border-color:var(--navi-line); }
html[data-theme=dark] .account-separator { background:var(--navi-line); }
html[data-theme=dark] .profile-avatar { background:var(--navi-soft); color:var(--navi-accent); }
html[data-theme=dark] .profile-tabs button:hover { color:var(--navi-ink); }
html[data-theme=dark] .password-strength-bar i { background:var(--navi-line); }
html[data-theme=dark] .password-strength-bar:is([data-score="1"],[data-score="2"]) i:nth-child(-n+2) { background:var(--navi-danger); }
html[data-theme=dark] .password-strength-bar[data-score="1"] i:nth-child(2) { background:var(--navi-line); }
html[data-theme=dark] .password-strength-bar:is([data-score="3"],[data-score="4"]) i:nth-child(-n+3) { background:var(--navi-warning); }
html[data-theme=dark] .password-strength-bar[data-score="4"] i:nth-child(4) { background:var(--navi-warning); }
html[data-theme=dark] .password-strength-bar[data-score="5"] i { background:var(--navi-success); }
html[data-theme=dark] .entry-shell .input-wrap { background:var(--appearance-raised); border-color:var(--navi-line); }
html[data-theme=dark] .entry-shell .input-wrap input { color:var(--navi-ink); }
html[data-theme=dark] .generate-password-button:hover { color:var(--navi-accent); }