/* Versioned here so the shared feedback palette does not depend on nested import caches. */
:root {
  --notice-bg: #eef2ff;
  --notice-border: #c7d2fe;
  --notice-text: #3730a3;
  --notice-accent: #4f46e5;
  --notice-error-bg: #fff4ed;
  --notice-error-border: #fed7aa;
  --notice-error-text: #9a3412;
  --notice-warning-bg: #fff8eb;
  --notice-warning-border: #f6cf7a;
  --notice-warning-text: #854d0e;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #08111d;
  --bg-soft: #0c1928;
  --surface: #0e1b2a;
  --surface-raised: #112131;
  --surface-soft: #142638;
  /* Compatibility aliases for pages that still use the legacy surface names. */
  --panel: #112131;
  --canvas: #0c1928;
  --card: var(--surface-raised);
  --border: var(--line);
  --input-bg: var(--surface-soft);
  --line: #22364a;
  --line-strong: #304960;
  --text: #eaf2f8;
  --text-soft: #c6d2dc;
  --muted: #9aabbb;
  --primary: #53c9bd;
  --primary-hover: #77dbd1;
  --primary-soft: #102f34;
  --primary2: #79a7ff;
  --mint: #58d3aa;
  --danger: #ff7590;
  --warning: #f0b45f;
  --notice-bg: #202549;
  --notice-border: #454c86;
  --notice-text: #c7d2fe;
  --notice-accent: #6366f1;
  --notice-error-bg: #3a261e;
  --notice-error-border: #7c4a32;
  --notice-error-text: #fdba74;
  --notice-warning-bg: #352b17;
  --notice-warning-border: #735d2d;
  --notice-warning-text: #fde68a;
  --focus: rgba(83, 201, 189, .28);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .2);
  --shadow: 0 15px 40px rgba(0, 0, 0, .18);
  --shadow-lg: 0 28px 80px rgba(0, 0, 0, .4);
}

html[data-theme="dark"] body { background: radial-gradient(circle at 82% -10%, rgba(67, 115, 196, .14), transparent 30rem), var(--bg); }
html[data-theme="dark"] :is(.rail, .top, .topbar, .login-form) { background-color: color-mix(in srgb, var(--surface) 88%, transparent); }
/* The legacy sidebar has explicit light-theme colors and may be loaded later.
   Keep dark-mode foregrounds and selection surfaces readable at either order. */
html[data-theme="dark"] .dion-rail .nav-link,
html[data-theme="dark"] .dion-rail .rail-collapse { color: var(--text-soft); }
html[data-theme="dark"] .dion-rail .nav-icon { color: var(--muted); }
html[data-theme="dark"] .dion-rail .nav-link:hover,
html[data-theme="dark"] .dion-rail .rail-collapse:hover { color: var(--primary); background: var(--surface-soft); }
html[data-theme="dark"] .dion-rail .nav-link.active { color: var(--primary); background: var(--primary-soft); }
html[data-theme="dark"] .dion-rail .nav-link.active .nav-icon { color: var(--primary); }
html[data-theme="dark"] .dion-rail .brand-copy b { color: var(--text); }
html[data-theme="dark"] .rail.dion-rail,
html[data-theme="dark"] .dion-rail .nova-brand,
html[data-theme="dark"] .dion-rail .rail-foot { border-color: var(--line); }
html[data-theme="dark"] :is(.panel, .card, .stat, .dash-metric, .settings-card, .profile-card, .profile-menu, .modal-content, .dialog, .drawer, .popover) { color: var(--text); background-color: var(--surface-raised); border-color: var(--line); box-shadow: var(--shadow); }
html[data-theme="dark"] :is(.quick-link, .dash-tabs, .distribution, .leader, .code-box, .empty-state, .setting-row, .profile-section, .balance-card, .marketing-stat, .provider-card, .consumer-stat) { background-color: var(--surface-soft); border-color: var(--line); }
html[data-theme="dark"] :is(input, select, textarea, .search, .filter, .language, .icon-button, .theme-toggle, .dash-select, .dash-refresh, .btn.secondary, .btn.ghost) { color: var(--text); background-color: var(--surface-soft); border-color: var(--line); }
html[data-theme="dark"] :is(th, td, .panel-head, .card-head, .filters, .quick-row, .leader, .recent-head, .profile-row, .setting-row) { border-color: var(--line); }
html[data-theme="dark"] tbody tr:hover { background: rgba(105, 154, 192, .08); }
html[data-theme="dark"] :is(.chart, .trend-chart, .chart-wrap) { --chart-grid: var(--line); }
html[data-theme="dark"] .chart-grid { stroke: var(--line); }
html[data-theme="dark"] :is(.metric-icon, .leader-rank, .badge.info, .tag.blue) { filter: saturate(.85) brightness(.9); }

/* Page-level styles predate the shared theme and use hard-coded white surfaces. */
html[data-theme="dark"] :is(
  .announcement-side, .announcement-list, .announcement-modal-card,
  .key-table-wrap, .key-modal-card,
  .downstream-table-card, .downstream-form-card,
  .consumer-panel, .user-table, .modal-card,
  .ip-panel, .settings-tabs, .settings-card,
  .usage-stat, .usage-panel,
  .code-stat, .codes-panel, .codes-modal-card,
  .groups-table-panel, .profile-dropdown
) {
  color: var(--text);
  background-color: var(--surface-raised);
  border-color: var(--line);
  box-shadow: var(--shadow);
}

/* Give tables an opaque themed base: transparent cells must never expose a
   legacy white wrapper. Keep row cells transparent so hover/selection is visible. */
html[data-theme="dark"] table { color: var(--text-soft); background-color: var(--surface-raised); }
html[data-theme="dark"] thead,
html[data-theme="dark"] thead tr,
html[data-theme="dark"] thead th,
html[data-theme="dark"] tfoot,
html[data-theme="dark"] tfoot tr,
html[data-theme="dark"] tfoot :is(th, td) {
  color: var(--muted);
  background-color: var(--surface-soft);
  border-color: var(--line);
}
html[data-theme="dark"] tbody,
html[data-theme="dark"] tbody tr,
html[data-theme="dark"] tbody :is(th, td) {
  color: var(--text-soft);
  background-color: transparent;
  border-color: var(--line);
}
html[data-theme="dark"] tbody tr:nth-child(even) { background-color: rgba(127, 162, 192, .025); }
html[data-theme="dark"] tbody tr:hover { background-color: rgba(105, 154, 192, .09); }
html[data-theme="dark"] tbody tr:is(.selected-row, [aria-selected="true"]) {
  background-color: var(--primary-soft);
}
html[data-theme="dark"] tbody tr:is(.selected-row, [aria-selected="true"]):hover {
  background-color: color-mix(in srgb, var(--primary) 16%, var(--surface-raised));
}

/* Keep table status badges readable without light-only pastel backgrounds. */
html[data-theme="dark"] :is(.receipt-status, .recharge-status.approved, .settlement-status.completed) {
  color: var(--mint);
  background: color-mix(in srgb, var(--mint) 12%, var(--surface-raised));
}
html[data-theme="dark"] :is(.recharge-status.pending, .settlement-status.parent_confirmed) {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 12%, var(--surface-raised));
}
html[data-theme="dark"] :is(.recharge-status.rejected, .settlement-status.disputed) {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, var(--surface-raised));
}
html[data-theme="dark"] :is(.network-pill, .settlement-status.provider_confirmed) {
  color: var(--primary2);
  background: color-mix(in srgb, var(--primary2) 12%, var(--surface-raised));
}
html[data-theme="dark"] .settlement-status.pending { color: var(--muted); background: var(--surface-soft); }
html[data-theme="dark"] .receipt-choice:has(input:checked) { border-color: var(--primary); }
html[data-theme="dark"] :is(.user-toolbar button, .downstream-filters button, .provider-filters button, .reconciliation-toolbar button) {
  color: var(--bg);
}

html[data-theme="dark"] :is(
  .usage-table, .consumer-table, .groups-table, .downstream-table,
  .codes-table, .key-table, .ip-table, .user-table
) :is(td, th) { border-color: var(--line); }

html[data-theme="dark"] :is(
  .usage-select, .usage-button, .usage-filter input, .usage-filter select,
  .usage-filter-actions button, .usage-pagination button,
  .consumer-filter input, .consumer-filter select, .consumer-filter button,
  .consumer-pagination button,
  .groups-search, .groups-filter, .groups-refresh,
  .downstream-pagination button, .downstream-actions a,
  .key-button, .key-search, .key-select, .api-endpoint,
  .codes-search, .codes-select, .codes-refresh, .codes-actions button,
  .codes-field input, .codes-field select,
  .user-toolbar input, .user-toolbar select, .account-action, .modal-cancel,
  .announcement-field input, .announcement-field textarea, .announcement-actions button,
  .ip-action, .settings-input, .settings-select,
  .profile-trigger, .profile-form .field input[readonly]
) {
  color: var(--text-soft);
  background-color: var(--surface-soft);
  border-color: var(--line);
}

html[data-theme="dark"] :is(.key-value, .code-value, .usage-empty i, .modal-close, .key-modal-close) {
  color: var(--text-soft);
  background-color: var(--bg-soft);
}
html[data-theme="dark"] :is(.usage-pagination, .consumer-pagination, .downstream-pagination, .codes-toolbar) {
  color: var(--muted);
  background-color: var(--surface-raised);
  border-color: var(--line);
}
html[data-theme="dark"] :is(.groups-user, .group-name, .downstream-identity, .code-stat b, .usage-table td:first-child) { color: var(--text); }

/* High-contrast text roles for legacy page styles with fixed light-theme colors. */
html[data-theme="dark"] :is(.dash-metric, .consumer-stat, .usage-stat, .code-stat) b,
html[data-theme="dark"] :is(
  .quick-link b, .leader-name, .chart-summary b,
  .announcement-card h3,
  .api-endpoint b, .key-usage b,
  .consumer-user, .groups-user, .group-name, .downstream-identity,
  .settings-row b, .settings-subtitle, .settings-policy-head b,
  .profile-meta b
) { color: var(--text); }

html[data-theme="dark"] :is(.dash-metric, .consumer-stat, .usage-stat, .code-stat) :is(span, small),
html[data-theme="dark"] :is(
  .metric-copy small.muted, .quick-link small, .leader-count, .chart-labels, .dash-model,
  .announcement-card p, .announcement-meta, .announcement-list-head span, .announcement-empty,
  .key-usage, .key-icon-action,
  .consumer-user small, .consumer-empty, .consumer-pagination,
  .groups-user small, .groups-usage small, .group-account small, .groups-empty,
  .downstream-identity small, .downstream-empty, .downstream-pagination,
  .settings-intro p, .settings-card-head p, .settings-field small, .settings-help,
  .settings-row small, .settings-policy-head small,
  .codes-empty, .codes-modal-card p, .profile-merchant, .profile-chevron
) { color: var(--muted); }

html[data-theme="dark"] :is(
  .announcement-filter, .announcement-modal-card p, .announcement-field label,
  .api-endpoint, .api-endpoint code,
  .consumer-tab, .group-capacity,
  .downstream-form label, .downstream-form input,
  .settings-tab, .settings-field label, .settings-label, .settings-segment button, .settings-add,
  .codes-field label, .codes-modal-card p, .profile-item, .user-email
) { color: var(--text-soft); }

html[data-theme="dark"] :is(
  .consumer-balance, .consumer-recharge, .group-account, .groups-usage b,
  .downstream-merchant, .downstream-money, .user-balance
) { color: var(--mint); }
html[data-theme="dark"] :is(.consumer-id, .consumer-secret, .code-value, .key-value) { color: var(--primary2); }
html[data-theme="dark"] :is(.consumer-tab.active, .announcement-filter.active, .settings-tab.active) { color: var(--primary); }
html[data-theme="dark"] :is(.announcement-filter.active, .settings-tab.active, .settings-segment button.active) {
  color: var(--primary);
  background-color: var(--primary-soft);
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  box-shadow: var(--shadow-sm);
}
html[data-theme="dark"] :is(.settings-tab:hover, .settings-add:hover, .quick-link:hover, .profile-item:hover) {
  color: var(--primary);
  background-color: var(--primary-soft);
}
html[data-theme="dark"] :is(.dash-tab, .key-copy, .announcement-close, .codes-close, .modal-close, .key-modal-close) {
  color: var(--muted);
}

html[data-theme="dark"] .dash-tab.active {
  color: var(--text);
  background-color: var(--surface-raised);
  box-shadow: var(--shadow-sm);
}
html[data-theme="dark"] :is(.dist-track, .group-capacity i, .key-meter) { background-color: var(--line); }
html[data-theme="dark"] .login-art { background: radial-gradient(circle at 22% 16%, #235f6d, transparent 36%), radial-gradient(circle at 80% 76%, #126e60, transparent 34%), linear-gradient(145deg, #071522, #102f42); }
html[data-theme="dark"] .login-body { background: var(--surface); }
html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { border: 2px solid var(--surface); border-radius: 99px; background: var(--line-strong); }

/* Shared feedback palette: indigo for confirmations, orange for errors, amber for cautions. */
:is(
  .balance-message.show,
  .upstream-message.show,
  .account-message.show,
  .key-notice.show,
  .downstream-flash.show,
  .provider-flash.show,
  .reconciliation-message.show,
  .profile-message.show,
  .downstream-message
) {
  color: var(--notice-text);
  background: var(--notice-bg);
  border-color: var(--notice-border);
}

:is(
  .balance-message.show.error,
  .upstream-message.error,
  .account-message.error,
  .key-notice.error,
  .downstream-flash.error,
  .provider-flash.error,
  .reconciliation-message.error,
  .profile-message.error,
  .downstream-message.error,
  .account-modal-message,
  .key-modal-message,
  .auth-alert
) {
  color: var(--notice-error-text);
  background: var(--notice-error-bg);
  border-color: var(--notice-error-border);
}

:is(
  .upstream-modal-error,
  .auth-agreement-error,
  .settlement-message,
  .reconciliation-modal-message,
  #reconciliation-batch-feedback.error
) { color: var(--notice-error-text); }

:is(
  .demo-alert,
  .demo-chip,
  .settings-warn,
  .provider-notice,
  .agreement-document .agreement-warning,
  .upstream-auto-notice,
  .reconciliation-snapshot-notice
) {
  color: var(--notice-warning-text);
  background: var(--notice-warning-bg);
  border-color: var(--notice-warning-border);
}

:is(.settings-warn, .upstream-auto-notice) small { color: inherit; opacity: .82; }

.settings-toast {
  color: #fff;
  background: var(--notice-accent);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--notice-accent) 30%, transparent);
}