/* ============================================
   PAGE THEME ADAPTERS
   Page-by-page patches that keep each theme's look while finishing local surfaces.
   Loaded after page CSS and universal theme coverage.
   ============================================ */

html[data-theme] {
    --pt-on-accent: #ffffff;
    --pt-danger: #dc2626;
    --pt-success: #16a34a;
    --pt-warning: #d97706;
    --pt-info: #0284c7;
}

html[data-theme="sketch"] {
    --pt-project-accent: #2563eb;
    --pt-project-alt: #059669;
    --pt-github-accent: #24292f;
    --pt-github-alt: #2563eb;
    --pt-people-accent: #2563eb;
    --pt-people-alt: #16a34a;
    --pt-message-accent: #2563eb;
    --pt-message-alt: #7c3aed;
    --pt-settings-accent: #334155;
    --pt-data-accent: #0891b2;
    --pt-vault-accent: #7c3aed;
    --pt-docs-accent: #4f46e5;
}

html[data-theme="softlight"] {
    --pt-project-accent: #3b82f6;
    --pt-project-alt: #22c55e;
    --pt-github-accent: #335c8d;
    --pt-github-alt: #60a5fa;
    --pt-people-accent: #4f7fd8;
    --pt-people-alt: #34a853;
    --pt-message-accent: #4f7fd8;
    --pt-message-alt: #7aa8ff;
    --pt-settings-accent: #64748b;
    --pt-data-accent: #14b8a6;
    --pt-vault-accent: #8b5cf6;
    --pt-docs-accent: #5b7cfa;
}

html[data-theme="cherry-blossom"] {
    --pt-project-accent: #e85a8a;
    --pt-project-alt: #7aa9d8;
    --pt-github-accent: #b13063;
    --pt-github-alt: #f6a5c3;
    --pt-people-accent: #d9497a;
    --pt-people-alt: #6ea176;
    --pt-message-accent: #e85a8a;
    --pt-message-alt: #a36ee8;
    --pt-settings-accent: #8b5569;
    --pt-data-accent: #8aa6d8;
    --pt-vault-accent: #c45ea0;
    --pt-docs-accent: #b15fca;
}

html[data-theme="crystal-glass"] {
    --pt-on-accent: #07131f;
    --pt-project-accent: #38bdf8;
    --pt-project-alt: #7dd3fc;
    --pt-github-accent: #0ea5e9;
    --pt-github-alt: #a5f3fc;
    --pt-people-accent: #38bdf8;
    --pt-people-alt: #34d399;
    --pt-message-accent: #38bdf8;
    --pt-message-alt: #818cf8;
    --pt-settings-accent: #5b85a8;
    --pt-data-accent: #22d3ee;
    --pt-vault-accent: #67e8f9;
    --pt-docs-accent: #60a5fa;
}

html[data-theme="lapis-lazuli"] {
    --pt-on-accent: #ffffff;
    --pt-project-accent: #3db8ff;
    --pt-project-alt: #d9af3f;
    --pt-github-accent: #3db8ff;
    --pt-github-alt: #f5d778;
    --pt-people-accent: #3db8ff;
    --pt-people-alt: #35d399;
    --pt-message-accent: #1a4dff;
    --pt-message-alt: #d9af3f;
    --pt-settings-accent: #3db8ff;
    --pt-data-accent: #39d5ff;
    --pt-vault-accent: #6ea8ff;
    --pt-docs-accent: #3db8ff;
}

html[data-theme="mechanical-clockwork"] {
    --pt-project-accent: #b08a4a;
    --pt-project-alt: #7d5d2f;
    --pt-github-accent: #8a642c;
    --pt-github-alt: #d2b477;
    --pt-people-accent: #a37638;
    --pt-people-alt: #66865b;
    --pt-message-accent: #b08a4a;
    --pt-message-alt: #8a6a45;
    --pt-settings-accent: #6d4e1e;
    --pt-data-accent: #a97d3a;
    --pt-vault-accent: #b08a4a;
    --pt-docs-accent: #8b6f3f;
}

html[data-theme="origami-folded"] {
    --pt-project-accent: #d4674a;
    --pt-project-alt: #d49d4a;
    --pt-github-accent: #a14528;
    --pt-github-alt: #f0a08a;
    --pt-people-accent: #d4674a;
    --pt-people-alt: #629c72;
    --pt-message-accent: #d4674a;
    --pt-message-alt: #cc7a9a;
    --pt-settings-accent: #8a4f3c;
    --pt-data-accent: #d98962;
    --pt-vault-accent: #c75b78;
    --pt-docs-accent: #b56f4a;
}

html[data-theme="samurai-steel"] {
    --pt-project-accent: #cf2333;
    --pt-project-alt: #94a3b8;
    --pt-github-accent: #e5ecf2;
    --pt-github-alt: #cf2333;
    --pt-people-accent: #cf2333;
    --pt-people-alt: #6b7a8c;
    --pt-message-accent: #cf2333;
    --pt-message-alt: #9ca3af;
    --pt-settings-accent: #b7c5d1;
    --pt-data-accent: #e5ecf2;
    --pt-vault-accent: #cf2333;
    --pt-docs-accent: #d9e2ea;
}

html[data-theme="steel-sakura"] {
    --pt-project-accent: #d95687;
    --pt-project-alt: #8aa0b5;
    --pt-github-accent: #ff8fb4;
    --pt-github-alt: #dce7ef;
    --pt-people-accent: #d95687;
    --pt-people-alt: #7f98ac;
    --pt-message-accent: #d95687;
    --pt-message-alt: #a8b8c8;
    --pt-settings-accent: #dce7ef;
    --pt-data-accent: #ffb3cc;
    --pt-vault-accent: #d95687;
    --pt-docs-accent: #f0b8cc;
}

html[data-theme="liquid-gold-pour"] {
    --pt-on-accent: #342106;
    --pt-project-accent: #c8a347;
    --pt-project-alt: #e8c468;
    --pt-github-accent: #9b7a22;
    --pt-github-alt: #e8c468;
    --pt-people-accent: #c8a347;
    --pt-people-alt: #8aa35a;
    --pt-message-accent: #c8a347;
    --pt-message-alt: #d6a84d;
    --pt-settings-accent: #9b7a22;
    --pt-data-accent: #c8a347;
    --pt-vault-accent: #d8ad3e;
    --pt-docs-accent: #b98a28;
}

html[data-theme="marble"] {
    --pt-project-accent: #4a3e26;
    --pt-project-alt: #c8a347;
    --pt-github-accent: #2a2620;
    --pt-github-alt: #c8a347;
    --pt-people-accent: #4a3e26;
    --pt-people-alt: #7f7a67;
    --pt-message-accent: #4a3e26;
    --pt-message-alt: #9a865a;
    --pt-settings-accent: #4a3e26;
    --pt-data-accent: #6b5b3a;
    --pt-vault-accent: #8a7444;
    --pt-docs-accent: #6b5b3a;
}

html[data-theme="iatfusion"] {
    --pt-project-accent: #4c8dff;
    --pt-project-alt: #ff3d57;
    --pt-github-accent: #4c8dff;
    --pt-github-alt: #ffd23f;
    --pt-people-accent: #4c8dff;
    --pt-people-alt: #20d0a8;
    --pt-message-accent: #4c8dff;
    --pt-message-alt: #ff3d57;
    --pt-settings-accent: #7aa8ff;
    --pt-data-accent: #20d0ff;
    --pt-vault-accent: #7c5cff;
    --pt-docs-accent: #4c8dff;
}

html[data-theme] body[class^="page-"],
html[data-theme] body[class*=" page-"],
html[data-theme] body.mindmap-page-body {
    --page-accent: var(--theme-accent);
    --page-accent-2: var(--theme-accent-light);
    --page-accent-strong: var(--theme-accent-strong);
    --page-on-accent: var(--pt-on-accent);
    --page-surface: var(--color-surface);
    --page-surface-raised: var(--color-surface-elevated, var(--color-surface));
    --page-surface-soft: var(--color-surface-subtle, rgba(127, 127, 127, 0.08));
    --page-border: var(--border-light);
    --page-text: var(--text-primary);
    --page-muted: var(--text-secondary);
    --page-subtle: var(--text-tertiary);
    --page-focus: color-mix(in srgb, var(--page-accent) 24%, transparent);
    --page-glow: color-mix(in srgb, var(--page-accent) 18%, transparent);
    --page-shadow: var(--theme-shadow-md, 0 16px 42px rgba(15, 23, 42, 0.12));
    --page-radius: var(--theme-radius-lg, 18px);
}

/* Page family token binding */
html[data-theme] body:is(.page-projects-index, .page-projects-details, .page-projects-architecture, .page-projects-sprints, .page-projects-gates, .page-projects-tickets, .page-projects-vault) {
    --page-accent: var(--pt-project-accent);
    --page-accent-2: var(--pt-project-alt);
    --page-accent-strong: color-mix(in srgb, var(--pt-project-accent) 82%, black);
    --project-accent: var(--page-accent-2);
    --project-accent-color: var(--page-accent);
    --project-accent-strong: var(--page-accent-strong);
    --project-btn-bg: var(--page-accent);
    --project-btn-hover-bg: var(--page-accent-strong);
    --project-btn-text: var(--page-on-accent);
    --project-accent-fill: color-mix(in srgb, var(--page-accent) 14%, transparent);
    --project-accent-fill-strong: color-mix(in srgb, var(--page-accent) 24%, transparent);
    --project-accent-border: color-mix(in srgb, var(--page-accent) 42%, transparent);
    --project-focus-ring: var(--page-focus);
    --card-bg: var(--page-surface-raised);
    --border: var(--page-border);
}

html[data-theme] body:is(.page-projects-bugs, .page-projects-kanban) {
    --page-accent: var(--pt-project-accent);
    --page-accent-2: var(--pt-project-alt);
    --page-accent-strong: color-mix(in srgb, var(--pt-project-accent) 84%, black);
    --project-accent: var(--page-accent-2);
    --project-accent-color: var(--page-accent);
    --project-accent-strong: var(--page-accent-strong);
    --project-btn-bg: var(--page-accent);
    --project-btn-hover-bg: var(--page-accent-strong);
    --project-btn-text: var(--page-on-accent);
    --project-accent-fill: color-mix(in srgb, var(--page-accent) 14%, transparent);
    --project-accent-border: color-mix(in srgb, var(--page-accent) 42%, transparent);
    --project-focus-ring: var(--page-focus);
    --card-bg: var(--page-surface-raised);
    --border: var(--page-border);
}

html[data-theme] body:is(.page-github, .page-githubnew, .page-githubold, .page-github-workflowgenerator, .page-github-triggerworkflow, .page-codemanagement, .page-agentcodesnippets, .page-visualstudioagents, .page-branchgraveyard) {
    --page-accent: var(--pt-github-accent);
    --page-accent-2: var(--pt-github-alt);
    --page-accent-strong: color-mix(in srgb, var(--pt-github-accent) 82%, black);
    --gh-primary: var(--page-accent);
    --gh-primary-2: var(--page-accent-2);
    --gh-surface: var(--page-surface-raised);
    --gh-surface-2: var(--page-surface-soft);
    --gh-border: var(--page-border);
    --gh-text: var(--page-text);
    --gh-text-2: var(--page-muted);
    --gh-text-3: var(--page-subtle);
    --cmx-primary: var(--page-accent);
    --cmx-primary-hover: var(--page-accent-strong);
    --cmx-accent-1: var(--page-accent);
    --cmx-accent-2: var(--page-accent-2);
    --cmx-surface: var(--page-surface-raised);
    --cmx-surface-alt: var(--page-surface-soft);
    --cmx-surface-overlay: var(--page-surface-raised);
    --cmx-border: var(--page-border);
}

html[data-theme] body:is(.page-index, .page-performance-dashboard, .page-leave-index, .page-calendar-index, .page-organization-index, .page-resources-capacity, .page-recognition-wall, .page-recognition-managebadges) {
    --page-accent: var(--pt-people-accent);
    --page-accent-2: var(--pt-people-alt);
    --page-accent-strong: color-mix(in srgb, var(--pt-people-accent) 82%, black);
    --perf-accent-1: var(--page-accent);
    --perf-accent-2: var(--page-accent-2);
    --perf-gradient-primary: linear-gradient(135deg, var(--page-accent) 0%, var(--page-accent-2) 100%);
    --perf-gradient-success: linear-gradient(135deg, var(--page-accent-2) 0%, var(--page-accent) 100%);
    --perf-header-tint-1: color-mix(in srgb, var(--page-accent) 10%, transparent);
    --perf-header-tint-2: color-mix(in srgb, var(--page-accent-2) 9%, transparent);
    --es-primary: var(--page-accent);
    --es-primary-hover: var(--page-accent-strong);
    --es-info: var(--page-accent-2);
}

html[data-theme] body:is(.page-messages-index, .page-chat, .page-chatagents) {
    --page-accent: var(--pt-message-accent);
    --page-accent-2: var(--pt-message-alt);
    --page-accent-strong: color-mix(in srgb, var(--pt-message-accent) 82%, black);
}

html[data-theme] body.page-settings-index {
    --page-accent: var(--pt-settings-accent);
    --page-accent-2: var(--theme-accent);
    --page-accent-strong: color-mix(in srgb, var(--pt-settings-accent) 84%, black);
}

html[data-theme] body:is(.page-thevault, .page-projects-vault, .mindmap-page-body) {
    --page-accent: var(--pt-vault-accent);
    --page-accent-2: var(--theme-accent-light);
    --page-accent-strong: color-mix(in srgb, var(--pt-vault-accent) 82%, black);
    --vault-accent: var(--page-accent);
    --vault-accent-strong: var(--page-accent-strong);
    --vault-accent-edge: color-mix(in srgb, var(--page-accent) 44%, transparent);
    --vault-focus: var(--page-focus);
}

html[data-theme] body:is(.page-dbwizard) {
    --page-accent: var(--pt-data-accent);
    --page-accent-2: var(--theme-accent-light);
    --page-accent-strong: color-mix(in srgb, var(--pt-data-accent) 82%, black);
    --ssms-accent: var(--page-accent);
    --ssms-accent-hover: var(--page-accent-strong);
    --ssms-border: var(--page-border);
    --ssms-bg-primary: var(--page-surface);
    --ssms-bg-secondary: var(--page-surface-raised);
}

html[data-theme] body:is(.page-documents, .page-myjournal) {
    --page-accent: var(--pt-docs-accent);
    --page-accent-2: var(--theme-accent-light);
    --page-accent-strong: color-mix(in srgb, var(--pt-docs-accent) 82%, black);
}

/* Shared page-family surfaces */
html[data-theme] body[class^="page-"] :where(
    .page-header,
    .perf-page-header,
    .dashboard-hero,
    .messages-hero,
    .settings-header,
    .gh-hero,
    .mj-hero,
    .es-hero
) {
    background:
        radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--page-accent) 16%, transparent), transparent 34%),
        radial-gradient(circle at 98% 0%, color-mix(in srgb, var(--page-accent-2) 12%, transparent), transparent 32%),
        var(--page-surface) !important;
    color: var(--page-text) !important;
    border-color: color-mix(in srgb, var(--page-accent) 28%, var(--page-border)) !important;
    box-shadow: var(--page-shadow) !important;
}

html[data-theme] body[class^="page-"] :where(
    input,
    select,
    textarea,
    .form-control,
    .form-select,
    .filter-select,
    .search-input,
    .perf-form-input,
    .perf-form-select,
    .perf-form-textarea,
    .chat-input,
    .wfgen-mono,
    .wfgen-input,
    .codebase-repo-dropdown
) {
    background: var(--page-surface-raised) !important;
    color: var(--page-text) !important;
    border-color: var(--page-border) !important;
}

html[data-theme] body[class^="page-"] :where(
    input,
    select,
    textarea,
    .form-control,
    .form-select,
    .filter-select,
    .search-input,
    .perf-form-input,
    .perf-form-select,
    .perf-form-textarea,
    .chat-input,
    .wfgen-mono,
    .wfgen-input,
    .codebase-repo-dropdown
):focus {
    border-color: var(--page-accent) !important;
    box-shadow: 0 0 0 3px var(--page-focus) !important;
    outline: none !important;
}

html[data-theme] body[class^="page-"] :where(
    .btn-primary,
    .button-primary,
    .perf-btn-primary,
    .project-btn--primary,
    .action-link,
    .gh-btn.primary,
    .wfgen-section-num,
    .chat-send-button,
    .send-btn,
    .new-chat-btn,
    .codebase-chat-send,
    .vault-btn--primary
) {
    background: linear-gradient(135deg, var(--page-accent), var(--page-accent-strong)) !important;
    color: var(--page-on-accent) !important;
    border-color: color-mix(in srgb, var(--page-accent) 72%, transparent) !important;
    box-shadow: 0 12px 28px var(--page-glow) !important;
}

html[data-theme] body[class^="page-"] :where(
    .btn-primary,
    .button-primary,
    .perf-btn-primary,
    .project-btn--primary,
    .action-link,
    .gh-btn.primary,
    .chat-send-button,
    .send-btn,
    .new-chat-btn,
    .codebase-chat-send,
    .vault-btn--primary
):hover:not(:disabled) {
    background: linear-gradient(135deg, var(--page-accent-strong), var(--page-accent)) !important;
    color: var(--page-on-accent) !important;
    transform: translateY(-1px);
}

html[data-theme] body[class^="page-"] :where(
    .btn-secondary,
    .btn-ghost,
    .perf-btn-secondary,
    .perf-btn-outline,
    .project-btn--ghost,
    .icon-btn,
    .btn-icon,
    .gh-btn,
    .tab-button,
    .nav-item,
    .code-tab,
    .filter-btn,
    .toolbar-btn
) {
    background: color-mix(in srgb, var(--page-accent) 8%, var(--page-surface-raised)) !important;
    color: var(--page-text) !important;
    border-color: color-mix(in srgb, var(--page-accent) 24%, var(--page-border)) !important;
}

html[data-theme] body[class^="page-"] :where(
    .btn-secondary,
    .btn-ghost,
    .perf-btn-secondary,
    .perf-btn-outline,
    .project-btn--ghost,
    .icon-btn,
    .btn-icon,
    .gh-btn,
    .tab-button,
    .nav-item,
    .code-tab,
    .filter-btn,
    .toolbar-btn
):hover {
    background: color-mix(in srgb, var(--page-accent) 16%, var(--page-surface-raised)) !important;
    color: var(--page-accent-strong) !important;
    border-color: var(--page-accent) !important;
}

html[data-theme] body[class^="page-"] :where(
    .active,
    .is-active,
    .selected,
    .tab-button.active,
    .nav-item.active,
    .conversation-item.active,
    .repo-item.active,
    .history-item.active
) {
    border-color: var(--page-accent) !important;
}

/* Projects, bugs, kanban, tickets */
html[data-theme] body:is(.page-projects-index, .page-projects-details, .page-projects-architecture, .page-projects-bugs, .page-projects-kanban, .page-projects-sprints, .page-projects-gates, .page-projects-tickets, .page-projects-vault) :where(
    .project-section,
    .projects-filter-bar,
    .deadlines-section,
    .team-section,
    .phase-track-section,
    .project-card,
    .phase-card-mini,
    .deadline-item,
    .kanban-toolbar,
    .kanban-col,
    .kanban-card,
    .bugs-stats-bar,
    .bstat,
    .bcard,
    .bug-detail-panel,
    .bdp__meta-item,
    .bdp__feed-item,
    .bdp__status-opt,
    .ticket-control-panel,
    .ticket-link-panel,
    .ticket-link-card,
    .ticket-inbox-card,
    .external-ticket-card,
    .external-ticket-recent,
    .modal-box,
    .project-modal-shell,
    .custom-multiselect,
    .multiselect-options
) {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--page-accent) 7%, transparent), color-mix(in srgb, var(--page-accent-2) 5%, transparent)),
        var(--page-surface-raised) !important;
    color: var(--page-text) !important;
    border-color: color-mix(in srgb, var(--page-accent) 26%, var(--page-border)) !important;
    box-shadow: var(--project-shadow-md, var(--page-shadow)) !important;
}

html[data-theme] body:is(.page-projects-index, .page-projects-details, .page-projects-architecture, .page-projects-bugs, .page-projects-kanban, .page-projects-sprints, .page-projects-gates, .page-projects-tickets, .page-projects-vault) :where(
    .project-card:hover,
    .phase-card-mini:hover,
    .deadline-item:hover,
    .kanban-card:hover,
    .bcard:hover,
    .ticket-inbox-card:hover,
    .ticket-link-card:hover
) {
    border-color: var(--page-accent) !important;
    box-shadow: var(--project-shadow-lg, var(--page-shadow)), 0 0 0 3px var(--page-focus) !important;
}

html[data-theme] body.page-projects-bugs :where(.bug-detail-panel) {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--page-accent) 9%, transparent), transparent 32%),
        var(--page-surface-raised) !important;
    border: 1px solid color-mix(in srgb, var(--page-accent) 34%, var(--page-border)) !important;
    box-shadow: -24px 0 70px rgba(0, 0, 0, 0.18), 0 0 0 1px var(--page-glow) !important;
}

html[data-theme] body.page-projects-bugs :where(.bdp__header, .bdp__section) {
    border-color: color-mix(in srgb, var(--page-accent) 20%, var(--page-border)) !important;
}

html[data-theme] body.page-projects-bugs :where(.bdp__id, .bdp__section-title, .bstat-num, .bcard__title) {
    color: var(--page-accent-strong) !important;
    -webkit-text-fill-color: currentColor !important;
}

html[data-theme] body.page-projects-bugs :where(.bdp__close, .bdp__claim-inline-btn, .bdp__post-btn, .bdp__submit-btn, .bcard__claim-btn) {
    background: linear-gradient(135deg, var(--page-accent), var(--page-accent-strong)) !important;
    color: var(--page-on-accent) !important;
    border-color: transparent !important;
}

html[data-theme] body.page-projects-kanban :where(.kanban-drop.over) {
    background: color-mix(in srgb, var(--page-accent) 14%, transparent) !important;
    outline-color: color-mix(in srgb, var(--page-accent) 55%, transparent) !important;
}

/* GitHub, workflow generator, and code management */
html[data-theme] body:is(.page-github, .page-githubnew, .page-githubold, .page-github-workflowgenerator, .page-github-triggerworkflow, .page-codemanagement, .page-agentcodesnippets, .page-visualstudioagents, .page-branchgraveyard) :where(
    .gh-sidebar__card,
    .repo-item,
    .gh-repoTop,
    .content-card,
    .metric-card,
    .workflow-card,
    .stat-pill,
    .traffic-panel,
    .traffic-item,
    .tab-nav,
    .perf-card,
    .wfgen-tip,
    .wfgen-warn,
    .workflow-type-panel,
    .wfgen-artifact,
    .secret-table,
    .cmx-statusbar,
    .cmx-sidebar,
    .cmx-repo,
    .cmx-repo-header,
    .cmx-metric-card,
    .cmx-modal__panel,
    .cmx-empty
) {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--page-accent) 7%, transparent), color-mix(in srgb, var(--page-accent-2) 5%, transparent)),
        var(--page-surface-raised) !important;
    color: var(--page-text) !important;
    border-color: color-mix(in srgb, var(--page-accent) 26%, var(--page-border)) !important;
    box-shadow: var(--page-shadow) !important;
}

html[data-theme] body:is(.page-github-workflowgenerator, .page-github-triggerworkflow) :where(
    .perf-page-header-title i,
    .perf-card-title i,
    .wfgen-section-title i,
    .wfgen-artifact-lang,
    .secret-name,
    .ai-badge
) {
    color: var(--page-accent) !important;
    -webkit-text-fill-color: currentColor !important;
}

html[data-theme] body:is(.page-github-workflowgenerator, .page-github-triggerworkflow) :where(
    .wfgen-pre,
    .wfgen-mono,
    code,
    pre
) {
    background: color-mix(in srgb, var(--page-accent) 7%, #0b1020) !important;
    color: #e5edf8 !important;
    border-color: color-mix(in srgb, var(--page-accent) 32%, transparent) !important;
}

html[data-theme] body.page-codemanagement :where(.cmx-repo.is-active, .cmx-action-btn:not(:disabled):hover, .cmx-statusbar__btn:hover) {
    background: color-mix(in srgb, var(--page-accent) 16%, var(--page-surface-raised)) !important;
    border-color: var(--page-accent) !important;
}

/* Performance, leave, calendar, organization, resources, recognition */
html[data-theme] body:is(.page-index, .page-performance-dashboard, .page-leave-index, .page-calendar-index, .page-organization-index, .page-resources-capacity, .page-recognition-wall, .page-recognition-managebadges) :where(
    .perf-card,
    .perf-metric-card,
    .perf-comparison-item,
    .perf-goal-item,
    .perf-key-result-box,
    .perf-modal-container,
    .capacity-metric-card,
    .team-stat-item,
    .leave-card,
    .leave-balance-card,
    .leave-request-card,
    .leave-table,
    .leave-modal,
    .calendar-card,
    .org-card,
    .org-node,
    .recognition-card,
    .badge-card,
    .es-action-card,
    .es-stat-card,
    .es-section,
    .es-timeline-item,
    .es-help-card
) {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--page-accent) 6%, transparent), color-mix(in srgb, var(--page-accent-2) 5%, transparent)),
        var(--page-surface-raised) !important;
    color: var(--page-text) !important;
    border-color: color-mix(in srgb, var(--page-accent) 25%, var(--page-border)) !important;
    box-shadow: var(--page-shadow) !important;
}

html[data-theme] body:is(.page-index, .page-performance-dashboard, .page-leave-index, .page-calendar-index, .page-organization-index, .page-resources-capacity, .page-recognition-wall, .page-recognition-managebadges) :where(
    .perf-card-title i,
    .perf-goal-meta i,
    .perf-metric-value,
    .leave-hero__title-icon,
    .leave-stat-value,
    .es-section__title i,
    .es-stat-card__value
) {
    color: var(--page-accent-strong) !important;
    -webkit-text-fill-color: currentColor !important;
}

html[data-theme] body:is(.page-leave-index, .page-calendar-index) :where(.leave-action-btn--primary, .leave-hero__action, .leave-submit-btn) {
    background: linear-gradient(135deg, var(--page-accent), var(--page-accent-2)) !important;
    color: var(--page-on-accent) !important;
    border-color: transparent !important;
}

/* Messages and chat */
html[data-theme] body:is(.page-messages-index, .page-chat, .page-chatagents) :where(
    .messages-layout,
    .messages-sidebar,
    .messages-main,
    .messages-page .messages-sidebar,
    .messages-page .messages-main,
    .chat-sidebar,
    .chat-main,
    .chat-header,
    .chat-input-container,
    .conversation-item,
    .history-item,
    .message-content,
    .message-text,
    .msg-bubble,
    .document-reference,
    .suggestion-chip,
    .agent-card,
    .modal-container,
    .participants-list,
    .participant-item
) {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--page-accent) 6%, transparent), color-mix(in srgb, var(--page-accent-2) 5%, transparent)),
        var(--page-surface-raised) !important;
    color: var(--page-text) !important;
    border-color: color-mix(in srgb, var(--page-accent) 24%, var(--page-border)) !important;
}

html[data-theme] body:is(.page-messages-index, .page-chat, .page-chatagents) :where(.msg-bubble.me, .message.user .message-content, .user-message .message-text) {
    background: linear-gradient(135deg, var(--page-accent), var(--page-accent-strong)) !important;
    color: var(--page-on-accent) !important;
    border-color: transparent !important;
}

html[data-theme] body:is(.page-messages-index, .page-chat, .page-chatagents) :where(.conversation-item.active, .history-item.active, .suggestion-chip:hover) {
    background: color-mix(in srgb, var(--page-accent) 16%, var(--page-surface-raised)) !important;
    color: var(--page-accent-strong) !important;
}

/* Settings and theme builder */
html[data-theme] body.page-settings-index :where(
    .settings-sidebar,
    .settings-content .card,
    .theme-card,
    .builder-item,
    .modal-box,
    .users-table,
    .tab-content.active
) {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--page-accent) 5%, transparent), color-mix(in srgb, var(--page-accent-2) 4%, transparent)),
        var(--page-surface-raised) !important;
    color: var(--page-text) !important;
    border-color: color-mix(in srgb, var(--page-accent) 24%, var(--page-border)) !important;
    box-shadow: var(--page-shadow) !important;
}

html[data-theme] body.page-settings-index :where(.theme-card.selected, .nav-item.active) {
    background: color-mix(in srgb, var(--page-accent) 14%, var(--page-surface-raised)) !important;
    border-color: var(--page-accent) !important;
    color: var(--page-accent-strong) !important;
    box-shadow: 0 0 0 3px var(--page-focus) !important;
}

html[data-theme] body.page-settings-index :where(input[type="range"]) {
    accent-color: var(--page-accent);
}

/* Vault, mindmap, documents, journal, DB wizard */
html[data-theme] body:is(.page-thevault, .page-projects-vault, .mindmap-page-body, .page-documents, .page-myjournal, .page-dbwizard) :where(
    .vault-hero,
    .vault-card,
    .vault-project-card,
    .vault-entry-card,
    .vault-category-section,
    .vault-modal__dialog,
    .vault-workspace-shell,
    .vault-workspace-inspector,
    .vault-workspace-toolbar,
    .document-card,
    .message-card,
    .section,
    .table-container,
    .chunk,
    .mj-hero,
    .mj-task-pane,
    .mj-workspace,
    .mj-task-card,
    .mj-composer,
    .mj-feed,
    .mj-entry,
    .db-wizard-wrapper,
    .ssms-welcome,
    .properties-panel,
    .query-panel,
    .results-panel,
    .column-details-panel,
    .modal-dialog
) {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--page-accent) 6%, transparent), color-mix(in srgb, var(--page-accent-2) 4%, transparent)),
        var(--page-surface-raised) !important;
    color: var(--page-text) !important;
    border-color: color-mix(in srgb, var(--page-accent) 25%, var(--page-border)) !important;
    box-shadow: var(--page-shadow) !important;
}

html[data-theme] body:is(.page-thevault, .page-projects-vault, .mindmap-page-body, .page-documents, .page-myjournal, .page-dbwizard) :where(
    .vault-btn--primary,
    .vault-mini-btn:hover,
    .mj-save-btn,
    .mj-open-link,
    .ssms-welcome-icon,
    .execute-btn,
    .run-query-btn
) {
    background: linear-gradient(135deg, var(--page-accent), var(--page-accent-strong)) !important;
    color: var(--page-on-accent) !important;
    border-color: transparent !important;
}

/* Tables, modals, popovers, toasts and notification island inside themed pages */
html[data-theme] body[class^="page-"] :where(
    table,
    .table,
    .data-table,
    .users-table,
    .secret-table,
    .modal,
    .modal-box,
    .modal-container,
    .modal-content,
    .dropdown-menu,
    .popover,
    .toast,
    .notif-live-island,
    .codebase-toast,
    .cmx-toast
) {
    background: var(--page-surface-raised) !important;
    color: var(--page-text) !important;
    border-color: color-mix(in srgb, var(--page-accent) 24%, var(--page-border)) !important;
}

html[data-theme] body[class^="page-"] :where(th, .table thead th, .data-table thead th, .users-table th, .secret-table th) {
    background: color-mix(in srgb, var(--page-accent) 10%, var(--page-surface-raised)) !important;
    color: var(--page-accent-strong) !important;
    border-color: color-mix(in srgb, var(--page-accent) 22%, var(--page-border)) !important;
}

html[data-theme] body[class^="page-"] :where(td, .table td, .data-table td, .users-table td, .secret-table td) {
    color: var(--page-text) !important;
    border-color: color-mix(in srgb, var(--page-accent) 14%, var(--page-border)) !important;
}

html[data-theme] body[class^="page-"] :where(
    .badge,
    .chip,
    .pill,
    .tag,
    .ai-badge,
    .step-badge,
    .status-badge,
    .workflow-badge,
    .tab-count
) {
    background: color-mix(in srgb, var(--page-accent) 14%, var(--page-surface-raised)) !important;
    color: var(--page-accent-strong) !important;
    border-color: color-mix(in srgb, var(--page-accent) 30%, transparent) !important;
}

html[data-theme] body[class^="page-"] :where(
    .alert-success,
    .perf-alert-success,
    .success-message,
    .msg-line.system.ok
) {
    background: color-mix(in srgb, var(--pt-success) 14%, var(--page-surface-raised)) !important;
    color: color-mix(in srgb, var(--pt-success) 72%, var(--page-text)) !important;
    border-color: color-mix(in srgb, var(--pt-success) 34%, transparent) !important;
}

html[data-theme] body[class^="page-"] :where(
    .alert-danger,
    .alert-error,
    .perf-alert-danger,
    .error-message,
    .cmx-toast--danger
) {
    background: color-mix(in srgb, var(--pt-danger) 14%, var(--page-surface-raised)) !important;
    color: color-mix(in srgb, var(--pt-danger) 78%, var(--page-text)) !important;
    border-color: color-mix(in srgb, var(--pt-danger) 34%, transparent) !important;
}

html[data-theme] body[class^="page-"] :where(
    .alert-warning,
    .warning-message,
    .wfgen-warn,
    .msg-line.system.warn
) {
    background: color-mix(in srgb, var(--pt-warning) 14%, var(--page-surface-raised)) !important;
    color: color-mix(in srgb, var(--pt-warning) 74%, var(--page-text)) !important;
    border-color: color-mix(in srgb, var(--pt-warning) 34%, transparent) !important;
}

html[data-theme] body[class^="page-"] :where(
    *:focus-visible
) {
    outline: 2px solid var(--page-accent) !important;
    outline-offset: 2px !important;
}

html[data-theme] body[class^="page-"] :where(
    *:disabled,
    .disabled,
    [aria-disabled="true"]
) {
    opacity: 0.62 !important;
    cursor: not-allowed !important;
}

html[data-theme] body[class^="page-"] :where(
    .perf-skeleton,
    .loading-shimmer,
    .skeleton,
    .placeholder
) {
    background: linear-gradient(90deg, var(--page-surface-soft), color-mix(in srgb, var(--page-accent) 12%, var(--page-surface-raised)), var(--page-surface-soft)) !important;
    background-size: 220% 100% !important;
}

html[data-theme] body[class^="page-"] ::selection,
html[data-theme] body[class*=" page-"] ::selection {
    background: color-mix(in srgb, var(--page-accent) 32%, transparent);
    color: var(--page-text);
}

html[data-theme] body[class^="page-"] *::-webkit-scrollbar-thumb,
html[data-theme] body[class*=" page-"] *::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--page-accent) 34%, var(--page-border)) !important;
    border: 2px solid transparent !important;
    background-clip: padding-box !important;
}

/* Standalone branded ticket intake gets page-specific polish from brand tokens. */
body.ticket-intake {
    --page-accent: var(--brand-primary);
    --page-accent-2: var(--brand-secondary);
    --page-accent-strong: var(--brand-primary-dark);
    --page-on-accent: #ffffff;
    --page-surface: var(--brand-surface);
    --page-surface-raised: color-mix(in srgb, var(--brand-surface) 92%, white);
    --page-border: var(--brand-line);
    --page-text: var(--brand-ink);
    --page-muted: var(--brand-muted);
    --page-focus: color-mix(in srgb, var(--brand-primary) 24%, transparent);
    --page-shadow: 0 20px 60px color-mix(in srgb, var(--brand-primary) 16%, transparent);
}

body.ticket-intake :where(.ticket-form, .ticket-intro__panel, .ticket-success, .ticket-errors, .ticket-type-card, .platform-topbar) {
    border-color: color-mix(in srgb, var(--page-accent) 24%, var(--page-border)) !important;
    box-shadow: var(--page-shadow) !important;
}

body.ticket-intake :where(.ticket-field input, .ticket-field select, .ticket-field textarea) {
    border-color: color-mix(in srgb, var(--page-accent) 20%, var(--page-border)) !important;
}

body.ticket-intake :where(.ticket-field input, .ticket-field select, .ticket-field textarea):focus {
    border-color: var(--page-accent) !important;
    box-shadow: 0 0 0 3px var(--page-focus) !important;
}