/**
 * Make Appearance actually change the Send dashboard.
 *
 * The bundle declares dark tokens on `[data-theme=dark]` and then paints the
 * shell, the top bar and the overlay with literal whites. Choosing Dark
 * therefore updated the attribute and left the interface looking as it did —
 * or worse, flipped the text to light ink while the cards stayed white.
 *
 * This file loads last. Light and dark both follow the tokens; text size
 * follows `--sd-text`. Dark is the original navy. Surfaces are named classes
 * only — never a substring match on `card` / `item` / `page`, and never a
 * colour on every `div` and `button`. Those last two are what blanked Overview
 * and drew black bars over the setup rows.
 */

:root,
html[data-theme="light"] {
  --sd-ink: var(--ink, #0f172a);
  --sd-mut: var(--muted, #5b6b82);
  --sd-line: var(--line, #e3e9f2);
  --sd-bg: var(--bg, #f6f8fc);
  --sd-paper: var(--paper, #fff);
  --sd-card: var(--paper, #fff);
}

/**
 * Navy, as the bundle already defined it.
 *
 * `--ink` is Mail's `#e6ecfb` rather than the bundle's icy `#f4f8ff`, so the
 * words stay readable without the glare. `--sd-card` has to be remapped here:
 * Overview KPI tiles use it, and `:root` in the dashboard stylesheet still
 * holds `#ffffff`.
 */
html[data-theme="dark"] {
  --bg: #07101f;
  --paper: #0d192b;
  --ink: #e6ecfb;
  --muted: #a5b2c7;
  --line: #23344d;
  --sd-ink: #e6ecfb;
  --sd-mut: #a5b2c7;
  --sd-line: #23344d;
  --sd-bg: #07101f;
  --sd-paper: #0d192b;
  --sd-card: #0d192b;
  --sd-sunk: #07101f;
  --sd-hover: color-mix(in srgb, #e6ecfb 8%, #0d192b);
  color-scheme: dark;
}

html,
body,
.dashboard-shell,
.dashboard-main,
#senditto-platform-root {
  background: var(--bg, #f6f8fc);
  color: var(--ink, #13213a);
}
.dashboard-shell {
  background: var(--bg, #f6f8fc) !important;
  color: var(--ink, #13213a) !important;
}
.dashboard-topbar {
  background: color-mix(in srgb, var(--paper, #fff) 94%, transparent) !important;
  border-bottom-color: var(--line, #e8ecf2) !important;
  color: var(--ink, #13213a) !important;
}
.dashboard-sidebar,
.dashboard-sidebar button,
.dashboard-sidebar a,
.dashboard-topbar,
.dashboard-topbar span,
.dashboard-topbar button {
  color: var(--ink, #13213a);
}
.dashboard-sidebar nav button span,
.dashboard-sidebar nav button small {
  color: inherit;
}

.profile-popover,
.docs-popover,
.search-popover,
.notification-popover,
.ws-account-menu,
#senditto-help-portal {
  background: var(--paper, #fff) !important;
  border-color: var(--line, #dfe6ef) !important;
  color: var(--ink, #1a2433) !important;
}

#senditto-platform-root,
#senditto-platform-root .pp-page {
  background: var(--bg, #f6f8fc);
  color: var(--ink, #14213b);
}

#senditto-platform-root :is(.pp-card, .tpl-card, .an-card, .wm-card, .pro-card, .ent-page .pp-card) {
  background: var(--paper, #fff) !important;
  border-color: var(--line, #e3e9f2);
  color: var(--ink, #0a1530);
}
#senditto-platform-root .pp-stats > * {
  background: var(--paper, #fff) !important;
  border-color: var(--line, #e3e9f2);
  color: var(--ink, #0a1530);
}
#senditto-platform-root :is(.pp-btn, .tpl-btn, .wm-btn, .se-btn):not(.primary):not(.danger-solid):not(.danger) {
  background: var(--paper, #fff) !important;
  color: var(--ink, #0f172a) !important;
  border-color: var(--line, #e3e9f2) !important;
}
#senditto-platform-root :is(.pp-input, .tpl-input, .wm-input, .se-input, .an-select, textarea.pp-input) {
  background: var(--paper, #fff) !important;
  color: var(--ink, #0a1530) !important;
  border-color: var(--line, #dbe3ef) !important;
}
#senditto-platform-root :is(.pp-head, .st-head, .se-head, .tpl-head) h1,
#senditto-platform-root :is(.pp-head, .st-head, .se-head, .tpl-head) p,
#senditto-platform-root .st-section h2,
#senditto-platform-root .ent-muted {
  color: var(--ink, #0f172a);
}
#senditto-platform-root .ent-muted {
  color: var(--muted, #6b7a90);
}
#senditto-platform-root :is(.pp-row, .pro-table-row):hover {
  background: color-mix(in srgb, var(--ink, #0a1530) 4%, var(--paper, #fff));
}
#senditto-platform-root :is(.pp-label-text, .tpl-label-text, .wm-label-text),
#senditto-platform-root .st-field > span,
#senditto-platform-root .pp-form label {
  color: var(--muted, #47566d);
}
#senditto-platform-root :is(.pp-table-head, .pro-table-head) {
  color: var(--muted, #8b99ad);
  background: color-mix(in srgb, var(--ink, #0a1530) 3%, var(--paper, #fff));
}

.st-page,
.st-page .st-nav,
.st-page .st-main,
.ap-card,
.ap-size,
.ap-sample {
  color: var(--ink, #0a1633);
}

.dashboard-sidebar nav button {
  font-size: calc(13.5px * var(--sd-text, 1));
}
.dashboard-topbar {
  font-size: calc(14px * var(--sd-text, 1));
}

/* ── dark: named leftover light literals, in one place ────────────────────── */

html[data-theme="dark"] .dashboard-shell,
html[data-theme="dark"] .dashboard-main,
html[data-theme="dark"] #senditto-platform-root,
html[data-theme="dark"] #senditto-platform-root .pp-page {
  background: var(--bg) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .dashboard-topbar {
  background: color-mix(in srgb, var(--paper) 94%, transparent) !important;
  border-bottom-color: var(--line) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .dashboard-sidebar,
html[data-theme="dark"] .dashboard-sidebar button,
html[data-theme="dark"] .dashboard-sidebar a,
html[data-theme="dark"] .dashboard-topbar,
html[data-theme="dark"] .dashboard-topbar span,
html[data-theme="dark"] .dashboard-topbar button {
  color: var(--ink) !important;
}
html[data-theme="dark"] .dashboard-sidebar nav button:hover {
  background: color-mix(in srgb, var(--ink) 8%, transparent) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .dashboard-sidebar nav button.active {
  background: rgba(77, 127, 255, 0.22) !important;
  color: #9ab8ff !important;
}

html[data-theme="dark"] .profile-popover,
html[data-theme="dark"] .docs-popover,
html[data-theme="dark"] .search-popover,
html[data-theme="dark"] .notification-popover,
html[data-theme="dark"] .ws-account-menu,
html[data-theme="dark"] #senditto-help-portal {
  background: var(--paper) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

html[data-theme="dark"] #senditto-platform-root :is(.pp-card, .tpl-card, .an-card, .wm-card, .pro-card, .ent-page .pp-card),
html[data-theme="dark"] #senditto-platform-root .pp-stats > * {
  background: var(--paper) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
  box-shadow: none;
}
html[data-theme="dark"] #senditto-platform-root :is(.pp-btn, .tpl-btn, .wm-btn, .se-btn):not(.primary):not(.danger-solid) {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] #senditto-platform-root :is(.pp-input, .tpl-input, .wm-input, .se-input, .an-select, textarea.pp-input) {
  background: var(--bg) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] #senditto-platform-root :is(.pp-head, .st-head, .se-head, .tpl-head) h1,
html[data-theme="dark"] #senditto-platform-root .st-section h2,
html[data-theme="dark"] #senditto-platform-root .st-h3,
html[data-theme="dark"] #senditto-platform-root .ap-block > h2 {
  color: var(--ink) !important;
}
html[data-theme="dark"] #senditto-platform-root :is(.pp-head, .st-head, .se-head, .tpl-head) p,
html[data-theme="dark"] #senditto-platform-root .ent-muted,
html[data-theme="dark"] #senditto-platform-root :is(.pp-label-text, .tpl-label-text, .wm-label-text),
html[data-theme="dark"] #senditto-platform-root .pp-form label,
html[data-theme="dark"] #senditto-platform-root .st-note,
html[data-theme="dark"] #senditto-platform-root .st-nav button small {
  color: var(--muted) !important;
}
html[data-theme="dark"] #senditto-platform-root :is(.pp-row, .pro-table-row):hover {
  background: color-mix(in srgb, var(--ink) 6%, var(--paper)) !important;
}
html[data-theme="dark"] #senditto-platform-root :is(.st-nav, .ent-settings-nav) button {
  color: var(--muted) !important;
  background: transparent !important;
}
html[data-theme="dark"] #senditto-platform-root :is(.st-nav, .ent-settings-nav) button:hover {
  background: color-mix(in srgb, var(--ink) 8%, transparent) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] #senditto-platform-root :is(.st-nav, .ent-settings-nav) button.active {
  background: rgba(77, 127, 255, 0.22) !important;
  color: #9ab8ff !important;
}
html[data-theme="dark"] .st-page .st-nav {
  background: var(--paper) !important;
  border-right-color: var(--line) !important;
}
html[data-theme="dark"] #senditto-platform-root .pp-code,
html[data-theme="dark"] .pp-modal .pp-code {
  background: var(--bg) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] :is(.pp-dialog, .tpl-dialog, .wm-dialog, .se-dialog) {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .ap-card,
html[data-theme="dark"] .ap-size,
html[data-theme="dark"] .ap-sample {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .ap-name {
  color: #e6ecfb !important;
  opacity: 1 !important;
}
html[data-theme="dark"] .ap-card small,
html[data-theme="dark"] .ap-size small,
html[data-theme="dark"] .ap-sample span {
  color: #9fb0d0 !important;
  opacity: 1 !important;
}
html[data-theme="dark"] .se-toast,
html[data-theme="dark"] .pp-toast {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] #senditto-demo-fab {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

/**
 * Overview. These classes are the dashboard's own, and they still hold
 * light literals (`#ffffff` via `--sd-card`, `#fffaf0` on the bounce banner,
 * `#fbfcfe` on feature tiles). Named, so a setup row that happens to be a
 * `button` is not painted as a bar.
 */
html[data-theme="dark"] :is(.sd-kpi, .sd-kpi3, .sd-card, .sd-card3, .sd-hero3, .sd-term) {
  background: var(--paper) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .sd-page {
  color: var(--ink) !important;
  background: transparent !important;
}
html[data-theme="dark"] :is(.sd-btn, .sd-btn3, .sd-hbtn.ghost, .sd-hbtn.mini):not(.primary):not(.solid) {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] :is(.sd-feature, .sd-fact3) {
  background: color-mix(in srgb, var(--ink) 4%, var(--paper)) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .sd-hinsight.warn {
  background: #2a2213 !important;
  border-color: #4a3c1d !important;
  color: #e0b567 !important;
}
html[data-theme="dark"] .sd-hinsight.warn b,
html[data-theme="dark"] .sd-hinsight.warn > svg {
  color: #e0b567 !important;
}
html[data-theme="dark"] .sd-hinsight.bad {
  background: #2d1715 !important;
  border-color: #5e2621 !important;
  color: #f08c84 !important;
}
html[data-theme="dark"] .sd-hinsight.bad b,
html[data-theme="dark"] .sd-hinsight.bad > svg {
  color: #f08c84 !important;
}
html[data-theme="dark"] .sd-seg {
  background: var(--bg) !important;
}
html[data-theme="dark"] .sd-seg-btn.active {
  background: var(--paper) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] :is(.sd-step, .sd-row) {
  background: transparent !important;
  border-bottom-color: var(--line) !important;
  color: inherit !important;
}
html[data-theme="dark"] :is(.sd-step, .sd-row):hover {
  background: color-mix(in srgb, var(--ink) 6%, var(--paper)) !important;
}
html[data-theme="dark"] .sd-step-body b,
html[data-theme="dark"] .sd-row-main b {
  color: var(--ink) !important;
  background: transparent !important;
}
html[data-theme="dark"] .sd-step-body small,
html[data-theme="dark"] .sd-row-main small {
  color: var(--muted) !important;
  background: transparent !important;
}
html[data-theme="dark"] :is(.sd-term-bar, .sd-term-code) {
  background: var(--bg) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .sd-term-tab.active {
  background: var(--bg) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] :is(.sd-mix, .sd-chip.mut, .sd-stream3, .sd-date-chip) {
  background: var(--bg) !important;
  color: var(--muted) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .sd-progress {
  background: var(--bg) !important;
}
html[data-theme="dark"] .sd-kpi3-top,
html[data-theme="dark"] .sd-kpi-top,
html[data-theme="dark"] .sd-kpi-sub,
html[data-theme="dark"] .sd-kpi3-sub {
  color: var(--muted) !important;
}
html[data-theme="dark"] .sd-kpi3-value,
html[data-theme="dark"] .sd-kpi-value,
html[data-theme="dark"] .sd-hero3-title,
html[data-theme="dark"] .sd-head h1 {
  color: var(--ink) !important;
}
html[data-theme="dark"] :is(.sd-btn, .sd-btn3, .sd-hbtn.ghost, .sd-hbtn.mini):not(.primary):not(.solid):hover {
  border-color: #3a4f73 !important;
  background: color-mix(in srgb, var(--ink) 6%, var(--paper)) !important;
}
html[data-theme="dark"] :is(.sd-feature, .sd-fact3):hover {
  background: color-mix(in srgb, var(--ink) 8%, var(--paper)) !important;
  border-color: #3a4f73 !important;
}

/**
 * Chrome the bundle and the workspace overlay still paint as Light.
 *
 * Their dark rules listen to `prefers-color-scheme`, not to Appearance's
 * `data-theme`. Choosing Dark on a light machine therefore left the sidebar
 * labels as `#2c3852` on navy (invisible), hover as `#f5f8fc`, the account
 * header and Sign out as `#fff`, and the avatars as a mint wash.
 */
html[data-theme="dark"] .dashboard-sidebar nav .nav-group > small {
  color: #d5def0 !important;
}
html[data-theme="dark"] .dashboard-sidebar nav .nav-group > small:hover {
  color: #f0f5ff !important;
  background: color-mix(in srgb, var(--ink) 10%, transparent) !important;
}
html[data-theme="dark"] .dashboard-sidebar nav .nav-group.has-active > small {
  color: #8bb4ff !important;
}
html[data-theme="dark"] .dashboard-sidebar nav .nav-group button,
html[data-theme="dark"] .dashboard-sidebar .sidebar-bottom button {
  color: #c5d0e4 !important;
  background: transparent !important;
}
html[data-theme="dark"] .dashboard-sidebar nav .nav-group button:hover,
html[data-theme="dark"] .dashboard-sidebar .sidebar-bottom button:hover {
  color: #e6ecfb !important;
  background: color-mix(in srgb, var(--ink) 10%, transparent) !important;
}
html[data-theme="dark"] .dashboard-sidebar nav .nav-group button.active,
html[data-theme="dark"] .dashboard-sidebar .sidebar-bottom button.active {
  color: #9ab8ff !important;
  background: rgba(77, 127, 255, 0.22) !important;
}
html[data-theme="dark"] .sidebar-brand button {
  background: color-mix(in srgb, var(--ink) 10%, var(--paper)) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .sidebar-brand button:hover {
  background: color-mix(in srgb, var(--ink) 16%, var(--paper)) !important;
}
html[data-theme="dark"] .workspace-switch {
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .ws-account-trigger {
  color: var(--ink) !important;
}
html[data-theme="dark"] .ws-account-trigger:hover,
html[data-theme="dark"] .ws-account-trigger[aria-expanded="true"] {
  background: color-mix(in srgb, var(--ink) 8%, transparent) !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] .top-search {
  background: var(--paper) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .top-search input {
  color: var(--ink) !important;
}
html[data-theme="dark"] .top-search kbd {
  background: var(--bg) !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
}
html[data-theme="dark"] .top-actions > button:not(.profile),
html[data-theme="dark"] .dash-mobile-menu {
  background: var(--paper) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .top-actions > button:not(.profile):hover {
  background: color-mix(in srgb, var(--ink) 8%, var(--paper)) !important;
}
html[data-theme="dark"] .dashboard-topbar .profile,
html[data-theme="dark"] .dashboard-topbar .profile[aria-expanded="true"] {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] .dashboard-topbar .profile > span,
html[data-theme="dark"] .profile-summary > span,
html[data-theme="dark"] .sd-row-av,
html[data-theme="dark"] .workspace-menu > button > span {
  background: linear-gradient(135deg, #1e4a8c, #1a6a7a) !important;
  color: #e6ecfb !important;
}

html[data-theme="dark"] :is(.top-popover, .profile-popover, .docs-popover, .search-popover, .notification-popover, .ws-account-menu, .workspace-menu) > button {
  background: transparent !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] :is(.top-popover, .profile-popover, .docs-popover, .search-popover, .notification-popover, .ws-account-menu, .workspace-menu) > button:hover,
html[data-theme="dark"] :is(.top-popover, .profile-popover, .docs-popover, .search-popover, .notification-popover, .ws-account-menu, .workspace-menu) > button:focus-visible {
  background: color-mix(in srgb, var(--ink) 8%, var(--paper)) !important;
}
html[data-theme="dark"] :is(.top-popover, .profile-popover) > button > i,
html[data-theme="dark"] .top-popover > button > svg {
  background: color-mix(in srgb, #4d7fff 18%, var(--paper)) !important;
  color: #8bb4ff !important;
}
html[data-theme="dark"] .profile-popover > .profile-summary,
html[data-theme="dark"] .ws-account-head {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-bottom-color: var(--line) !important;
}
html[data-theme="dark"] .profile-summary b,
html[data-theme="dark"] .ws-account-head b,
html[data-theme="dark"] :is(.top-popover, .profile-popover, .ws-account-menu) button b {
  color: var(--ink) !important;
}
html[data-theme="dark"] .profile-summary small,
html[data-theme="dark"] .ws-account-head small,
html[data-theme="dark"] :is(.top-popover, .profile-popover, .ws-account-menu) button small {
  color: var(--muted) !important;
}
html[data-theme="dark"] .profile-popover > .signout,
html[data-theme="dark"] .ws-account-menu .ws-signout {
  background: color-mix(in srgb, #f08c84 10%, var(--paper)) !important;
  box-shadow: 0 -6px 14px color-mix(in srgb, var(--bg) 88%, transparent) !important;
}
html[data-theme="dark"] .profile-popover > .signout:hover,
html[data-theme="dark"] .ws-account-menu .ws-signout:hover {
  background: color-mix(in srgb, #f08c84 18%, var(--paper)) !important;
}
html[data-theme="dark"] .profile-popover .signout b,
html[data-theme="dark"] .ws-account-menu .ws-signout b {
  color: #ff8a9c !important;
}
html[data-theme="dark"] .profile-popover .signout small,
html[data-theme="dark"] .ws-account-menu .ws-signout small {
  color: #c98b96 !important;
}
html[data-theme="dark"] .profile-popover .signout > i {
  background: #35202a !important;
  color: #ff8a9c !important;
}
html[data-theme="dark"] .popover-title {
  border-bottom-color: var(--line) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .ws-dialog {
  background: var(--paper) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .ws-dialog input,
html[data-theme="dark"] .ws-dialog select {
  background: var(--bg) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .ws-btn:not(.primary) {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

/**
 * Every overlay page. Settings, activity, send, templates, CRM, keys,
 * domains, webhooks, logs, inbound, automations, segments, campaigns.
 *
 * Those stylesheets still hold `#fff` / `#f8fbff` and, where they have a
 * dark block at all, it listens to the operating system rather than to
 * Appearance. Named classes only — the same prefixes the pages already use.
 */
html[data-theme="dark"] #senditto-platform-root,
html[data-theme="dark"] #senditto-platform-root :is(.pp-page, .st-page, .st-main, .st-main-scroll, .cr-page, .sd-page) {
  background: var(--bg) !important;
  color: var(--ink) !important;
}

html[data-theme="dark"] #senditto-platform-root :is(
  .pp-card, .pp-stat, .pp-panel, .pp-detail, .pp-secret-box, .pp-table,
  .tpl-card, .an-card, .wm-card, .pro-card, .se-card, .se-panel,
  .st-right-card, .st-callout, .st-req-row,
  .pa-card, .ps-card, .pd-card, .pd-detail, .pk-detail, .pw-card, .pw-detail, .pm-detail,
  .pc-stat, .pa-stat, .ps-stat, .pi-stat,
  .pc-table-wrap, .pa-table-wrap, .ps-table-wrap, .pi-table-wrap, .pk-table-wrap,
  .pm-table-wrap, .pw-table-wrap, .pl-table-wrap, .pd-recwrap,
  .pm-body, .pm-facts > div, .pi-message, .act-log-row, .cr-log
) {
  background: var(--paper) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] #senditto-platform-root :is(
  .pp-btn, .tpl-btn, .wm-btn, .se-btn, .st-btn, .st-back,
  .pc-btn, .pa-btn, .ps-btn, .pi-btn, .pd-btn, .pk-btn, .pm-btn, .pw-btn, .pl-btn, .pd-copy, .cr-btn
):not(.primary):not(.danger-solid):not(.solid) {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] #senditto-platform-root :is(
  .pp-btn, .tpl-btn, .wm-btn, .se-btn, .st-btn, .st-back,
  .pc-btn, .pa-btn, .ps-btn, .pi-btn, .pd-btn, .pk-btn, .pm-btn, .pw-btn, .pl-btn, .pd-copy, .cr-btn
):not(.primary):not(.danger-solid):not(.solid):hover {
  background: color-mix(in srgb, var(--ink) 8%, var(--paper)) !important;
  border-color: #3a4f73 !important;
  color: var(--ink) !important;
}

html[data-theme="dark"] #senditto-platform-root :is(
  .pp-input, .pp-select, .pp-search, .pp-textarea,
  .tpl-input, .tpl-textarea, .wm-input, .wm-select, .se-input, .an-select,
  .cr-search, .st-input, textarea.pp-input
),
html[data-theme="dark"] :is(.pp-modal, .tpl-modal, .wm-modal, .se-modal, .an-modal, .cr-modal) :is(
  .pp-input, .tpl-input, .tpl-textarea, .wm-input, .wm-select, .se-input, .an-select
) {
  background: var(--bg) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] #senditto-platform-root :is(.pp-input, .tpl-input, .wm-input, .se-input, .cr-search):focus,
html[data-theme="dark"] #senditto-platform-root :is(.pp-input, .tpl-input, .wm-input, .se-input, .cr-search):focus-within {
  background: var(--bg) !important;
  border-color: #4d7fff !important;
}

html[data-theme="dark"] #senditto-platform-root :is(
  .pp-row, .pp-log-line, .pp-more, .pp-switch-row, .pro-table-row, .st-req-row
):hover,
html[data-theme="dark"] #senditto-platform-root :is(
  .pc-table, .pa-table, .ps-table, .pi-table, .pk-table, .pm-table, .pw-table, .pl-table, .pd-records, .sd-table
) tbody tr:hover {
  background: color-mix(in srgb, var(--ink) 6%, var(--paper)) !important;
}

html[data-theme="dark"] #senditto-platform-root :is(.pp-table-head, .pp-toolbar, .pp-secret-box code, .act-log-row code) {
  background: var(--bg) !important;
  color: var(--muted) !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] #senditto-platform-root :is(.pp-stat i, .pp-icon, .pp-modal-icon) {
  background: color-mix(in srgb, #4d7fff 18%, var(--paper)) !important;
  color: #8bb4ff !important;
}

html[data-theme="dark"] #senditto-platform-root .st-callout {
  background: color-mix(in srgb, var(--ink) 5%, var(--paper)) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] #senditto-platform-root .st-callout strong {
  color: var(--ink) !important;
}
html[data-theme="dark"] #senditto-platform-root .st-callout-warn {
  background: #2a2213 !important;
  border-color: #4a3c1d !important;
  color: #e0b567 !important;
}
html[data-theme="dark"] #senditto-platform-root .st-callout-ok {
  background: #08291f !important;
  border-color: #1c4a3a !important;
  color: #4fdcae !important;
}
html[data-theme="dark"] #senditto-platform-root .st-callout-danger,
html[data-theme="dark"] #senditto-platform-root .st-danger-block {
  background: #2d1715 !important;
  border-color: #5e2621 !important;
  color: #f08c84 !important;
}
html[data-theme="dark"] #senditto-platform-root .st-callout-info {
  background: #14224a !important;
  border-color: #23344d !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] #senditto-platform-root :is(.st-field > span, .st-switch small, .st-right-card p, .st-note, .st-checklist ul) {
  color: var(--muted) !important;
}
html[data-theme="dark"] #senditto-platform-root :is(.st-right-card h3, .st-req-row b, .st-section h2, .st-h3) {
  color: var(--ink) !important;
}

html[data-theme="dark"] :is(.pp-close) {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .sd-select-list,
html[data-theme="dark"] .ak-menu,
html[data-theme="dark"] .app-select-menu {
  background: var(--paper) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] :is(.sd-select-list, .ak-menu, .app-select-menu) button {
  color: var(--ink) !important;
  background: transparent !important;
}
html[data-theme="dark"] :is(.sd-select-list, .ak-menu, .app-select-menu) button:hover {
  background: color-mix(in srgb, var(--ink) 8%, var(--paper)) !important;
}

html[data-theme="dark"] #senditto-platform-root .pp-settings-nav button {
  color: var(--muted) !important;
  background: transparent !important;
}
html[data-theme="dark"] #senditto-platform-root .pp-settings-nav button:hover {
  background: color-mix(in srgb, var(--ink) 8%, transparent) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] #senditto-platform-root .pp-settings-nav button.active {
  background: rgba(77, 127, 255, 0.22) !important;
  color: #9ab8ff !important;
}

html[data-theme="dark"] #senditto-platform-root :is(.pp-badge, .sd-stream3, .sd-chip.mut) {
  background: var(--bg) !important;
  color: var(--muted) !important;
}
html[data-theme="dark"] #senditto-platform-root .pp-health {
  background: color-mix(in srgb, var(--ink) 4%, var(--paper)) !important;
}

/**
 * Universal Dark. Tokens, not a colour on every `div` and `button`.
 *
 * Overlay stylesheets painted Light as a literal. Those literals now go
 * through `--paper` / `--sd-sunk` / `--ink`. This last sheet makes every
 * page's fields and table rows follow them. Buttons are not painted as a
 * group: that is what drew black bars over the setup rows.
 */
html[data-theme="dark"] :is(
  #senditto-platform-root,
  .pp-modal, .tpl-modal, .wm-modal, .se-modal, .an-modal, .cr-modal,
  .ws-dialog, .ws-account-menu, .workspace-menu,
  .profile-popover, .top-popover, .search-popover, .notification-popover, .docs-popover
) {
  color: var(--ink);
}
html[data-theme="dark"] :is(
  #senditto-platform-root,
  .pp-modal, .tpl-modal, .wm-modal, .se-modal, .an-modal, .cr-modal, .ws-dialog
) :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
  textarea,
  select
) {
  background: var(--bg) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] :is(
  #senditto-platform-root,
  .pp-modal, .tpl-modal, .wm-modal, .se-modal, .an-modal, .cr-modal
) tbody tr:hover {
  background: var(--sd-hover) !important;
}

html[data-theme="dark"] .wm-workspace.active {
  background: rgba(77, 127, 255, 0.22) !important;
  border-color: #3a5a9a !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .wm-workspace.active b,
html[data-theme="dark"] .wm-workspace.active small {
  color: var(--ink) !important;
}
html[data-theme="dark"] .wm-stat-row span {
  background: color-mix(in srgb, #4d7fff 18%, var(--paper)) !important;
  color: #8bb4ff !important;
}
html[data-theme="dark"] .wm-danger {
  background: #2d1715 !important;
  border-color: #5e2621 !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .wm-danger h3 {
  color: #ff8a9c !important;
}

html[data-theme="dark"] .se-side-head .se-settings-button,
html[data-theme="dark"] .se-side-head span {
  background: color-mix(in srgb, #4d7fff 18%, var(--paper)) !important;
  color: #8bb4ff !important;
}
html[data-theme="dark"] .se-avatar {
  background: linear-gradient(135deg, #1e4a8c, #1a6a7a) !important;
  color: #e6ecfb !important;
}

html[data-theme="dark"] #senditto-platform-root .st-law {
  background: #14224a !important;
  color: #9ab8ff !important;
}
html[data-theme="dark"] #senditto-platform-root .st-score-pill {
  background: #14224a !important;
  color: #9ab8ff !important;
}
html[data-theme="dark"] #senditto-platform-root .st-switch {
  border-top-color: var(--line) !important;
}
html[data-theme="dark"] #senditto-platform-root .st-callout:not(.st-callout-warn):not(.st-callout-ok):not(.st-callout-danger) strong {
  color: var(--ink) !important;
}
html[data-theme="dark"] #senditto-platform-root .st-callout:not(.st-callout-warn):not(.st-callout-ok):not(.st-callout-danger) p,
html[data-theme="dark"] #senditto-platform-root .st-checklist ul,
html[data-theme="dark"] #senditto-platform-root .st-checklist li {
  color: var(--muted) !important;
}
html[data-theme="dark"] #senditto-platform-root .pp-toggle:not(.on) {
  background: #2a3a55 !important;
}
html[data-theme="dark"] #senditto-platform-root .pp-toggle:not(.on) i {
  background: #c5d0e4 !important;
}
html[data-theme="dark"] #senditto-platform-root .pp-toggle.on {
  background: #3a6fd4 !important;
}
html[data-theme="dark"] #senditto-platform-root .pp-toggle.on i {
  background: #e8eef8 !important;
}
html[data-theme="dark"] #senditto-platform-root .pp-switch-row {
  border-top-color: var(--line) !important;
}