:root[data-theme="dark"] {
    color-scheme: dark;
    --ui-292d45: #eeedf5;
    --ui-30324b: #eeedf5;
    --balance-surface: #302b4b;

    --ui-35314b: #eeedf5;
    --ui-44405f: #eeedf5;
    --ui-645b7a: #b6b4c7;
    --ui-666175: #b6b4c7;
    --ui-71768b: #b6b4c7;
    --ui-777c90: #b6b4c7;
    --ui-79768d: #b6b4c7;
    --ui-797b91: #b6b4c7;
    --ui-7a718b: #b6b4c7;
    --ui-7a7e91: #b6b4c7;
    --ui-7c8197: #b6b4c7;
    --ui-7e8195: #b6b4c7;
    --ui-82879a: #b6b4c7;
    --ui-85889b: #b6b4c7;
    --ui-85899d: #b6b4c7;
    --ui-868b9d: #b6b4c7;
    --ui-8b8698: #b6b4c7;
    --ui-9a92aa: #b6b4c7;
    --ui-d4cfee: #484358;
    --ui-d5cde9: #484358;
    --ui-d6d5d5: #484358;
    --ui-d7cfe8: #484358;
    --ui-dcd5e6: #484358;
    --ui-ddd5e9: #484358;
    --ui-e0dce9: #393c4e;
    --ui-e3e0f4: #393c4e;
    --ui-e4dff3: #393c4e;
    --ui-e8e5f0: #393c4e;
    --ui-e9e7ef: #393c4e;
    --ui-e9ecf4: #393c4e;
    --ui-eaf6f0: #393c4e;
    --ui-ebe5f6: #393c4e;
    --ui-ebedf5: #393c4e;
    --ui-eee8f8: #393c4e;
    --ui-eeedf9: #393c4e;
    --ui-eef0f6: #393c4e;
    --ui-efedf5: #393c4e;
    --ui-efedff: #393c4e;
    --ui-f0edf4: #393c4e;
    --ui-f0edfb: #393c4e;
    --ui-f0f1f6: #232633;
    --ui-f2eef8: #393c4e;
    --ui-f2f3f8: #232633;
    --ui-f7f7f7: #232633;
    --ui-f7f8fc: #232633;
    --ui-f8f7fb: #232633;
    --ui-f8f9fc: #232633;
    --ui-f9edef: #393c4e;
    --ui-faf9f6: #232633;
    --ui-fcf2df: #393c4e;
    --ui-fff0f3: #232633;
    --ui-fff6e7: #393c4e;
    --ui-ffffff: #232633;
}
html[data-theme="dark"], html[data-theme="dark"] body { background: #171923; color: #eeedf5; }
html[data-theme="dark"] .customer-main-content { background: #171923; }
html[data-theme="dark"] .customer-appbar { background: #20222e !important; }
html[data-theme="dark"] .customer-section { background: #232633; }
html[data-theme="dark"] .public-main-content { background: linear-gradient(180deg, #1d1f2b 0, #171923 420px); }
html[data-theme="dark"] .catalog-filters {
    border-color: rgba(238, 237, 245, .10);
    background: rgba(35, 38, 51, .88);
    box-shadow: 0 12px 35px rgba(0, 0, 0, .20);
}
html[data-theme="dark"] .dashboard .balance-card, html[data-theme="dark"] .account-balance { color: #fff; }
html[data-theme="dark"] .balance-card p, html[data-theme="dark"] .account-balance p, html[data-theme="dark"] .balance-business { color: #ded7ef; }
html[data-theme="dark"] .balance-card a { color: #fff; }
html[data-theme="dark"] .account-balance .mud-button-root { background: #f0eafa; color: #514273; }
html[data-theme="dark"] .dashboard a, html[data-theme="dark"] .account-page a { color: #bba9f0; }
html[data-theme="dark"] .dashboard .balance-card a { color: #fff; }
html[data-theme="dark"] .nav-link.active, html[data-theme="dark"] .nav-group-title[aria-expanded="true"] { color: #c5b4f0 !important; background: #39304f !important; }
html[data-theme="dark"] .nav-group-items { border-color: #4b425d; }
html[data-theme="dark"] .status-pill, html[data-theme="dark"] .metric-icon, html[data-theme="dark"] .tile-icon, html[data-theme="dark"] .count-pill { background: #343044; color: #c4b3ef; }
html[data-theme="dark"] .overdue .status-pill, html[data-theme="dark"] .overdue .metric-icon, html[data-theme="dark"] .needs-attention .credit-amount { color: #f09caf; }
html[data-theme="dark"] .today .status-pill, html[data-theme="dark"] .today .metric-icon { color: #efc27a; }
html[data-theme="dark"] .on-track .credit-amount { color: #79cba5; }

/* Hero cards retain an intentional dark surface and light foreground in both themes. */
html[data-theme="dark"] .balance-top { color: #e4dff3; }
html[data-theme="dark"] .dashboard .balance-card,
html[data-theme="dark"] .account-balance { background: radial-gradient(ellipse at 100% 100%, #514285 0%, transparent 70%), var(--balance-surface); }
html[data-theme="dark"] .dashboard .mud-button-filled-primary { background: #6b60ca; color: #fff; }
html[data-theme="dark"] .dashboard .mud-button-filled-primary:hover { background: #5c50ba; }
html[data-theme="dark"] .account-balance .mud-button-root:hover { background: #e2d7f5; color: #44365f; }
