/* Theme tokens are defined only for dark mode; inline CSS fallbacks preserve the existing light UI exactly.
   PDF paper, photos, markup color pickers, brand buttons and customer-defined status/tag colors stay unchanged. */
:root[data-theme="dark"] {
    --theme-surface: #111b26;
    --theme-surface-alt: #182431;
    --theme-surface-hover: #233345;
    --theme-surface-blue: #173b50;
    --theme-surface-green: #17372c;
    --theme-surface-red: #40272e;
    --theme-surface-yellow: #3c3320;
    --theme-surface-purple: #322d46;
    --theme-text: #edf2f7;
    --theme-text-muted: #b0bdcb;
    --theme-link: #64cdf2;
    --theme-success: #87dba8;
    --theme-danger: #ff9a9a;
    --theme-warning: #f5ce78;
    --theme-purple: #c6b1f4;
    --theme-border: #34465a;
    --theme-border-blue: #35617a;
    --theme-border-green: #3c6650;
    --theme-border-red: #85505a;
    --theme-border-yellow: #826e42;
    --theme-border-purple: #65547d;
    --df-ink: #edf2f7;
    --df-surface: #111b26;
    --df-cyan-soft: #173b50;
    --df-cyan-border: #35617a;
}

.account-menu-theme {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 18px 14px;
    border-bottom: 1px solid var(--theme-border, #edf1f4);
    color: var(--theme-text, #243240);
    font-size: 16px;
    font-weight: 500;
}
.account-menu:has(.account-menu-theme) .account-menu-header { border-bottom: 0; padding-bottom: 12px; }
.account-theme-options { display: flex; align-items: center; gap: 4px; }
.account-theme-button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--theme-text-muted, #56616b);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.account-theme-button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.account-theme-button:hover { background: var(--theme-surface-hover, #f4f7fb); }
.account-theme-button[aria-pressed="true"] { background: var(--theme-surface-blue, #edf4fd); color: var(--theme-text, #45505c); }
.account-theme-button:focus-visible { outline: 2px solid var(--df-cyan-dark); outline-offset: 2px; }

/* Keep the shared white token for paper/button ink; override the app surfaces that also use it explicitly. */
:root[data-theme="dark"] .activity-page-date-popover,
:root[data-theme="dark"] .activity-page-date-presets,
:root[data-theme="dark"] .activity-page-date-input { background: var(--theme-surface); }
:root[data-theme="dark"] .startup-screen { background: var(--theme-surface); }
:root[data-theme="dark"] .startup-dot { background: var(--theme-text); }
:root[data-theme="dark"] :is(.nav-avatar, .account-menu-initials, .account-settings-initials) { color: var(--theme-text); }
:root[data-theme="dark"] .activity-page-calendar-nav:hover { color: var(--theme-text); }
:root[data-theme="dark"] .add-deal-stage-chip:not(.active):not(.completed) {
    --stage-chip-fill: var(--theme-surface);
    --stage-chip-border: var(--theme-border);
    color: var(--theme-text-muted);
}
/* Text links need a brighter blue on dark surfaces; keep the original blue button fills. */
:root[data-theme="dark"] :is(
    .detail-quick-btn:hover, .detail-quick-btn.is-active,
    .activity-page-date-preset:hover, .activity-page-date-preset.is-active,
    .activity-page-calendar-nav, .activity-page-calendar-weekday.is-weekend,
    .activity-page-calendar-day:hover, .activity-page-calendar-day.is-weekend:not(.is-muted),
    .custom-report-category-expander:hover, .contact-tag-menu-option.is-selected,
    .auth-link, .contact-email, .info-value a, .detail-status-pill,
    .detail-edit-contact-btn:hover, .detail-action-meta, .detail-action-assignee,
    .detail-action-note-btn, .detail-note-action-btn:hover, .detail-note-cancel-btn,
    .delete-contact-cancel, .modal-btn-link, .pipeline-settings-cancel, .deal-attachment-link,
    .form-tab.active, .pipeline-settings-tab.active, .add-deal-title, .detail-inline-deal-topbar,
    .add-deal-insert-items:hover, .detail-checkbox.is-action-button,
    .status-lead, .status-prospect, .status-customer, .status-vendor,
    .detail-due-flag, .detail-quick-date-btn:hover, .detail-calendar-dow:first-child
) { color: var(--theme-link); }