/* ============================================
   UNIVERSAL THEME COVERAGE
   Late-loaded safety layer so every page/component uses the active theme tokens.
   ============================================ */

html[data-theme] {
    background: var(--color-background);
    --theme-accent: var(--google-blue);
    --theme-accent-light: var(--google-blue-light);
    --theme-accent-strong: var(--google-blue-dark);
    --theme-accent-subtle: var(--google-blue-subtle);
    --theme-on-accent: #ffffff;
    --primary: var(--theme-accent);
    --primary-light: var(--theme-accent-light);
    --primary-dark: var(--theme-accent-strong);
    --primary-subtle: var(--theme-accent-subtle);
    --shadow-focus: 0 0 0 3px var(--theme-accent-subtle);
    --project-accent: var(--theme-accent-light);
    --project-accent-color: var(--theme-accent);
    --project-accent-strong: var(--theme-accent-strong);
    --project-accent-fill: color-mix(in srgb, var(--theme-accent) 16%, transparent);
    --project-accent-fill-strong: color-mix(in srgb, var(--theme-accent) 32%, transparent);
    --project-accent-border: color-mix(in srgb, var(--theme-accent) 45%, transparent);
    --project-accent-glow: color-mix(in srgb, var(--theme-accent) 35%, transparent);
    --project-focus-ring: color-mix(in srgb, var(--theme-accent) 24%, transparent);
    --project-card-glow: color-mix(in srgb, var(--theme-accent) 12%, transparent);
    --project-sheen: linear-gradient(135deg, color-mix(in srgb, var(--theme-accent) 10%, transparent), color-mix(in srgb, var(--theme-accent-light) 7%, transparent));
    --project-gradient-1: linear-gradient(135deg, var(--theme-accent) 0%, var(--theme-accent-light) 100%);
    --project-gradient-3: linear-gradient(135deg, var(--google-green) 0%, var(--theme-accent) 100%);
    --project-btn-bg: var(--theme-accent-strong);
    --project-btn-text: var(--theme-on-accent);
    --project-btn-hover-bg: var(--theme-accent);
    --project-btn-shadow: var(--theme-accent-subtle);
    --project-pill-bg: var(--project-btn-bg);
    --project-pill-border: var(--project-btn-bg);
    --project-pill-text: var(--project-btn-text);
    --theme-nav-hover-bg: var(--theme-accent-subtle);
    --theme-nav-hover-text: var(--text-primary);
    --theme-nav-active-bg: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-strong));
    --theme-nav-active-text: var(--theme-on-accent);
    --theme-nav-shadow: 0 8px 20px var(--theme-accent-subtle);
    --es-primary: var(--theme-accent);
    --es-primary-hover: var(--theme-accent-strong);
    --es-info: var(--theme-accent-light);
    --perf-accent-1: var(--theme-accent);
    --perf-accent-2: var(--theme-accent-light);
    --perf-gradient-primary: linear-gradient(135deg, var(--theme-accent) 0%, var(--theme-accent-strong) 100%);
    --perf-gradient-success: linear-gradient(135deg, var(--theme-accent-light) 0%, var(--theme-accent) 100%);
    --perf-gradient-info: linear-gradient(135deg, var(--theme-accent-light) 0%, var(--theme-accent) 100%);
    --perf-header-tint-1: color-mix(in srgb, var(--theme-accent) 10%, transparent);
    --perf-header-tint-2: color-mix(in srgb, var(--theme-accent-light) 8%, transparent);
    --perf-title-color: var(--text-primary);
}

html[data-theme="sketch"],
html[data-theme="softlight"] {
    --theme-accent: #4285f4;
    --theme-accent-light: #669df6;
    --theme-accent-strong: #1967d2;
    --theme-accent-subtle: rgba(66, 133, 244, 0.12);
    --theme-on-accent: #ffffff;
}

html[data-theme="cherry-blossom"] {
    --theme-accent: #e85a8a;
    --theme-accent-light: #f6a5c3;
    --theme-accent-strong: #b13063;
    --theme-accent-subtle: rgba(232, 90, 138, 0.14);
    --theme-on-accent: #ffffff;
}

html[data-theme="glass-liquid"],
html[data-theme="crystal-glass"] {
    --theme-accent: #38bdf8;
    --theme-accent-light: #7dd3fc;
    --theme-accent-strong: #0284c7;
    --theme-accent-subtle: rgba(56, 189, 248, 0.14);
    --theme-on-accent: #0a1420;
}

html[data-theme="liquid-mercury"] {
    --theme-accent: #a1a8b3;
    --theme-accent-light: #d7dce3;
    --theme-accent-strong: #5b6470;
    --theme-accent-subtle: rgba(161, 168, 179, 0.16);
    --theme-on-accent: #0b0d12;
}

html[data-theme="mechanical-clockwork"] {
    --theme-accent: #b08a4a;
    --theme-accent-light: #d2b477;
    --theme-accent-strong: #6d4e1e;
    --theme-accent-subtle: rgba(176, 138, 74, 0.15);
    --theme-on-accent: #f4ecd8;
}

html[data-theme="origami-folded"] {
    --theme-accent: #d4674a;
    --theme-accent-light: #f0a08a;
    --theme-accent-strong: #a14528;
    --theme-accent-subtle: rgba(212, 103, 74, 0.14);
    --theme-on-accent: #ffffff;
}

html[data-theme="samurai-steel"],
html[data-theme="steel-sakura"] {
    --theme-accent: #c9243f;
    --theme-accent-light: #f06b82;
    --theme-accent-strong: #7c0d20;
    --theme-accent-subtle: rgba(201, 36, 63, 0.14);
    --theme-on-accent: #ffffff;
}

html[data-theme="liquid-gold-pour"] {
    --theme-accent: #c8a347;
    --theme-accent-light: #e8c468;
    --theme-accent-strong: #9b7a22;
    --theme-accent-subtle: rgba(200, 163, 71, 0.16);
    --theme-on-accent: #3a2608;
    --google-blue: #c8a347;
    --google-blue-light: #e8c468;
    --google-blue-dark: #9b7a22;
    --google-blue-subtle: rgba(200, 163, 71, 0.16);
}

html[data-theme="marble"] {
    --theme-accent: #4a3e26;
    --theme-accent-light: #6b5b3a;
    --theme-accent-strong: #2a2620;
    --theme-accent-subtle: rgba(74, 62, 38, 0.12);
    --theme-hover-accent: #c8a347;
    --theme-on-accent: #f3eee3;
}

html[data-theme="iatfusion"] {
    --theme-accent: #4c8dff;
    --theme-accent-light: #67a8ff;
    --theme-accent-strong: #1e3a8a;
    --theme-accent-subtle: rgba(76, 141, 255, 0.16);
    --theme-on-accent: #ffffff;
}

html[data-theme] body,
html[data-theme] .app-shell,
html[data-theme] main,
html[data-theme] .main-content,
html[data-theme] .content,
html[data-theme] .page-content,
html[data-theme] .page,
html[data-theme] .container,
html[data-theme] .container-fluid {
    color: var(--text-primary) !important;
}

html[data-theme].shader-bg-active body,
html[data-theme].shader-bg-active .app-shell {
    background: transparent !important;
}

html[data-theme]:not(.shader-bg-active) body {
    background: var(--color-background) !important;
}

/* Page chrome */
html[data-theme] .page-header,
html[data-theme] .section-header,
html[data-theme] .content-header,
html[data-theme] .toolbar,
html[data-theme] .topbar,
html[data-theme] .subnav,
html[data-theme] .filter-bar,
html[data-theme] .actions-bar,
html[data-theme] .search-bar,
html[data-theme] .breadcrumb,
html[data-theme] .sidebar,
html[data-theme] .side-panel,
html[data-theme] .drawer,
html[data-theme] .drawer-content {
    background: var(--color-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
    box-shadow: var(--theme-shadow-sm) !important;
}

/* General surfaces */
html[data-theme] :where(
    .card,
    .glass-card,
    .panel,
    .panel-card,
    .content-card,
    .dashboard-card,
    .metric-card,
    .stat-card,
    .summary-card,
    .feature-card,
    .settings-card,
    .theme-card,
    .project-card,
    .repo-card,
    .repository-card,
    .workflow-card,
    .issue-card,
    .bug-card,
    .sprint-card,
    .gate-card,
    .kanban-card,
    .document-card,
    .doc-card,
    .agent-card,
    .message-card,
    .notification-card,
    .resource-card,
    .capacity-card,
    .calendar-card,
    .leave-card,
    .recognition-card,
    .widget,
    .widget-card,
    .tile,
    .tile-card,
    .list-card,
    .auth-card,
    .login-card,
    .modal-content,
    .dropdown-menu,
    .popover,
    .toast,
    .list-group-item,
    .accordion-item,
    .tab-pane,
    .table-wrapper,
    .table-container,
    .data-grid,
    .code-panel,
    .code-section,
    .code-card,
    .editor-panel,
    .file-panel,
    .results-panel,
    .inspector-panel,
    .wizard-panel,
    .wizard-card,
    .query-builder,
    .builder-panel,
    .perf-card,
    .github-card,
    .chat-panel,
    .chat-container,
    .chat-sidebar,
    .chat-main,
    .chat-header,
    .chat-input-area,
    .chat-input-container,
    .messages-container,
    .conversation-list,
    .conversation-item,
    .agent-panel
) {
    background: var(--color-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
    box-shadow: var(--theme-shadow-sm) !important;
}

html[data-theme] :where(
    .card:hover,
    .glass-card:hover,
    .panel:hover,
    .dashboard-card:hover,
    .metric-card:hover,
    .stat-card:hover,
    .project-card:hover,
    .repo-card:hover,
    .document-card:hover,
    .agent-card:hover,
    .theme-card:hover,
    .kanban-card:hover,
    .widget:hover,
    .tile:hover
) {
    border-color: var(--border-medium) !important;
    box-shadow: var(--theme-shadow-md) !important;
}

/* Nested subtle regions */
html[data-theme] :where(
    .card-header,
    .card-footer,
    .panel-header,
    .panel-footer,
    .section,
    .section-body,
    .subsection,
    .empty-state,
    .detail-row,
    .metadata,
    .meta-row,
    .activity-item,
    .timeline-item,
    .comment,
    .comment-body,
    .file-row,
    .tree-node,
    .repo-row,
    .branch-row,
    .commit-row,
    .workflow-row,
    .issue-row,
    .message-row,
    .notification-row,
    .result-row,
    .result-item,
    .inspector-row,
    .kanban-column,
    .kanban-lane,
    .chat-message,
    .message,
    .message-content,
    .assistant-message,
    .user-message
) {
    background-color: var(--color-surface-subtle) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

/* Typography */
html[data-theme] :where(
    h1, h2, h3, h4, h5, h6,
    .page-title,
    .section-title,
    .card-title,
    .panel-title,
    .title,
    .heading,
    .stat-value,
    .metric-value,
    .repo-name,
    .project-name,
    .document-title,
    .agent-name,
    .message-title
) {
    color: var(--text-primary) !important;
}

html[data-theme] :where(
    p,
    label,
    .subtitle,
    .description,
    .card-description,
    .page-subtitle,
    .text-muted,
    .muted,
    .secondary-text,
    .meta,
    .metadata,
    .help-text,
    .hint,
    small,
    .small,
    .stat-label,
    .metric-label,
    .timestamp,
    .date,
    .author,
    .breadcrumb-item,
    .empty-state p
) {
    color: var(--text-secondary) !important;
}

html[data-theme] :where(.text-tertiary, .placeholder, .caption, .eyebrow) {
    color: var(--text-tertiary) !important;
}

html[data-theme] a:not(.btn):not(.pill-nav__item):not(.theme-card):not(.dropdown-item):hover {
    color: var(--theme-accent-strong) !important;
}

/* Forms */
html[data-theme] :where(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    .form-control,
    .form-select,
    .search-input,
    .chat-input,
    .input,
    .input-wrapper,
    .select2-selection,
    .custom-select,
    .multiselect,
    .monaco-inputbox
) {
    background: var(--color-surface-elevated) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
    border-radius: var(--theme-radius-md) !important;
}

html[data-theme] :where(input, select, textarea, .form-control, .form-select, .chat-input)::placeholder {
    color: var(--text-tertiary) !important;
}

html[data-theme] :where(
    input:not([type="checkbox"]):not([type="radio"]):focus,
    select:focus,
    textarea:focus,
    .form-control:focus,
    .form-select:focus,
    .search-input:focus,
    .chat-input:focus,
    .input-wrapper:focus-within
) {
    border-color: var(--theme-accent) !important;
    box-shadow: var(--shadow-focus) !important;
    outline: none !important;
}

html[data-theme] :where(.form-label, .control-label, .field-label) {
    color: var(--text-primary) !important;
}

html[data-theme] :where(.form-text, .validation-summary, .validation-message) {
    color: var(--text-secondary) !important;
}

/* Buttons and interactive controls */
html[data-theme] :where(
    .btn:not(.btn-danger):not(.btn-warning):not(.btn-success):not(.btn-outline-danger),
    .button:not(.btn-danger):not(.btn-warning):not(.btn-success):not(.btn-outline-danger),
    button:not(.theme-card):not(.pill-nav__item):not(.pill-nav__toggle):not(.btn-danger):not(.btn-warning):not(.btn-success):not(.btn-outline-danger),
    .action-btn,
    .icon-btn,
    .toolbar-btn,
    .tab-button,
    .filter-btn
) {
    background: var(--color-surface-elevated) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-medium) !important;
    box-shadow: var(--theme-shadow-sm) !important;
}

html[data-theme] :where(
    .btn-primary,
    .primary-btn,
    .button-primary,
    button.primary,
    .action-btn.primary,
    .toolbar-btn.active,
    .tab-button.active,
    .filter-btn.active
) {
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-strong)) !important;
    color: var(--theme-on-accent) !important;
    border-color: var(--theme-accent) !important;
    box-shadow: 0 8px 20px var(--theme-accent-subtle) !important;
}

html[data-theme] :where(
    .btn:hover,
    .button:hover,
    button:not(.theme-card):not(.pill-nav__item):not(.pill-nav__toggle):hover,
    .action-btn:hover,
    .icon-btn:hover,
    .toolbar-btn:hover,
    .tab-button:hover,
    .filter-btn:hover
) {
    border-color: var(--theme-accent) !important;
    box-shadow: var(--theme-shadow-md) !important;
}

/* Navigation */
html[data-theme] :where(
    .pill-nav,
    .nav-tabs,
    .tabs,
    .tab-list,
    .navbar,
    .nav-panel,
    .sidebar-nav,
    .menu,
    .menu-panel
) {
    background: var(--color-surface) !important;
    border-color: var(--border-light) !important;
    box-shadow: var(--theme-shadow-sm) !important;
}

html[data-theme] :where(
    .pill-nav__item,
    .nav-link,
    .tab,
    .tab-item,
    .dropdown-item,
    .menu-item,
    .sidebar-link
) {
    color: var(--text-secondary) !important;
}

html[data-theme] :where(
    .pill-nav__item:hover,
    .nav-link:hover,
    .tab:hover,
    .tab-item:hover,
    .dropdown-item:hover,
    .menu-item:hover,
    .sidebar-link:hover
) {
    background: var(--theme-accent-subtle) !important;
    color: var(--text-primary) !important;
}

html[data-theme] :where(
    .pill-nav__item.active,
    .nav-link.active,
    .tab.active,
    .tab-item.active,
    .menu-item.active,
    .sidebar-link.active
) {
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-strong)) !important;
    color: var(--theme-on-accent) !important;
    box-shadow: 0 4px 12px var(--theme-accent-subtle) !important;
}

/* Tables and grids */
html[data-theme] :where(table, .table, .data-table, .grid, .ag-root, .results-table) {
    background: var(--color-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

html[data-theme] :where(thead, th, .table-header, .grid-header, .ag-header) {
    background: var(--color-surface-elevated) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

html[data-theme] :where(td, tr, .table-row, .grid-row, .ag-row) {
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

html[data-theme] :where(tbody tr:hover, .table-row:hover, .grid-row:hover, .ag-row:hover) {
    background: var(--color-surface-subtle) !important;
}

/* Badges, chips, pills */
html[data-theme] :where(.badge, .chip, .pill, .tag, .label, .status, .status-badge):not(.badge-danger):not(.badge-warning):not(.badge-success):not(.status-danger):not(.status-warning):not(.status-success) {
    background: var(--theme-accent-subtle) !important;
    border-color: var(--border-light) !important;
}

/* Projects use a custom glass-tinted CTA pill style. Defer to projects.css. */
/* Text uses --text-primary so it always swaps with the active theme, even if --google-blue isn't overridden. */
html[data-theme] :where(.projects-shell-v2, .project-section, .project-card, .bugs-grid, .bugs-stats-bar) .pill,
html[data-theme] :where(.projects-shell-v2, .project-section, .project-card, .bugs-grid, .bugs-stats-bar) a.pill,
html[data-theme] :where(.projects-shell-v2, .project-section, .project-card, .bugs-grid, .bugs-stats-bar) button.pill {
    background: var(--project-accent-fill) !important;
    color: var(--project-accent-strong) !important;
    border-color: var(--project-accent-border) !important;
}

html[data-theme] :where(.projects-shell-v2, .project-section, .project-card, .bugs-grid, .bugs-stats-bar) .pill:hover,
html[data-theme] :where(.projects-shell-v2, .project-section, .project-card, .bugs-grid, .bugs-stats-bar) .pill:focus-visible,
html[data-theme] :where(.projects-shell-v2, .project-section, .project-card, .bugs-grid, .bugs-stats-bar) a.pill:hover,
html[data-theme] :where(.projects-shell-v2, .project-section, .project-card, .bugs-grid, .bugs-stats-bar) button.pill:hover {
    background: var(--project-accent-fill-strong) !important;
    color: var(--project-accent-strong) !important;
    border-color: var(--project-accent-color) !important;
}

html[data-theme] :where(.projects-shell-v2, .project-section, .project-card, .bugs-grid, .bugs-stats-bar) .pill,
html[data-theme] :where(.projects-shell-v2, .project-section, .project-card, .bugs-grid, .bugs-stats-bar) .pill :where(i, span) {
    color: inherit !important;
}

html[data-theme] :where(.projects-shell-v2, .project-section, .project-card, .bugs-grid, .bugs-stats-bar) .pill:hover :where(i, span),
html[data-theme] :where(.projects-shell-v2, .project-section, .project-card, .bugs-grid, .bugs-stats-bar) .pill:focus-visible :where(i, span) {
    color: inherit !important;
}

/* IATFusion project-card pills need stronger selectors than the universal theme rules. */
html[data-theme="iatfusion"] .projects-shell-v2 .project-card .pill,
html[data-theme="iatfusion"] .projects-shell-v2 .project-card a.pill,
html[data-theme="iatfusion"] .projects-shell-v2 .project-card button.pill {
    background: linear-gradient(135deg, #2f6fff 0%, #4c8dff 55%, #67a8ff 100%) !important;
    color: #ffffff !important;
    border-color: #4c8dff !important;
    box-shadow:
        0 6px 16px rgba(76, 141, 255, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

html[data-theme="iatfusion"] .projects-shell-v2 .project-card .pill:hover,
html[data-theme="iatfusion"] .projects-shell-v2 .project-card .pill:focus-visible,
html[data-theme="iatfusion"] .projects-shell-v2 .project-card a.pill:hover,
html[data-theme="iatfusion"] .projects-shell-v2 .project-card a.pill:focus-visible,
html[data-theme="iatfusion"] .projects-shell-v2 .project-card button.pill:hover,
html[data-theme="iatfusion"] .projects-shell-v2 .project-card button.pill:focus-visible {
    background: linear-gradient(135deg, #3f7dff 0%, #59a2ff 55%, #7cc8ff 100%) !important;
    color: #ffffff !important;
    border-color: #67a8ff !important;
    box-shadow:
        0 10px 26px rgba(76, 141, 255, 0.40),
        0 0 22px rgba(92, 225, 255, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

html[data-theme="iatfusion"] .projects-shell-v2 .project-card .pill :where(i, span),
html[data-theme="iatfusion"] .projects-shell-v2 .project-card a.pill :where(i, span),
html[data-theme="iatfusion"] .projects-shell-v2 .project-card button.pill :where(i, span) {
    color: #ffffff !important;
}

/* Code/editor areas */
html[data-theme] :where(pre, code, .code-block, .code-editor, .code-viewer, .file-content, .diff-viewer, .terminal-output, .log-output, .console, .monaco-editor, .cm-editor) {
    background: var(--color-surface-elevated) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

html[data-theme] :where(.line-number, .code-meta, .file-meta, .diff-meta) {
    color: var(--text-tertiary) !important;
}

/* Modals, overlays, menus */
html[data-theme] :where(.modal-backdrop, .overlay, .drawer-backdrop) {
    background: rgba(0, 0, 0, 0.45) !important;
}

html[data-theme] :where(.modal-header, .modal-footer, .dropdown-header, .popover-header) {
    background: var(--color-surface-elevated) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

/* Icons and SVGs that use currentColor */
html[data-theme] :where(.icon, .material-icons, .fa, .fas, .far, .fab, svg:not(.theme-preview svg)) {
    color: inherit;
}

/* Dividers and borders */
html[data-theme] :where(hr, .divider, .separator, .border, .border-top, .border-bottom, .border-left, .border-right) {
    border-color: var(--border-light) !important;
}

/* Progress and meters */
html[data-theme] :where(.progress, .progress-track, .meter, .meter-track) {
    background: var(--color-surface-subtle) !important;
    border-color: var(--border-light) !important;
}

html[data-theme] :where(.progress-bar, .meter-fill, .progress-fill) {
    background: linear-gradient(90deg, var(--theme-accent), var(--theme-accent-light)) !important;
}

/* Top navigation sanitation: avatar/active states were falling back to default blue. */
html[data-theme] .pill-nav__item.active {
    background: var(--theme-nav-active-bg) !important;
    color: var(--theme-nav-active-text) !important;
    border-color: var(--theme-accent) !important;
    box-shadow: var(--theme-nav-shadow) !important;
}

html[data-theme] .pill-nav__user-avatar {
    background: var(--theme-nav-active-bg) !important;
    color: var(--theme-nav-active-text) !important;
    border: 1px solid color-mix(in srgb, var(--theme-accent) 48%, transparent) !important;
    box-shadow: 0 6px 16px var(--theme-accent-subtle) !important;
}

html[data-theme] .pill-nav__item:hover,
html[data-theme] .pill-nav__dropdown-item:hover {
    background: var(--theme-nav-hover-bg) !important;
    color: var(--theme-nav-hover-text) !important;
    border-color: var(--theme-accent) !important;
    box-shadow: inset 0 -2px 0 var(--theme-accent) !important;
    outline: none !important;
    text-decoration: none !important;
}

html[data-theme] :where(.pill-nav__item, .pill-nav__dropdown-item, .nav-link):focus,
html[data-theme] :where(.pill-nav__item, .pill-nav__dropdown-item, .nav-link):focus-visible {
    border-color: var(--theme-accent) !important;
    box-shadow: inset 0 -2px 0 var(--theme-accent), 0 0 0 3px var(--theme-accent-subtle) !important;
    outline: none !important;
    text-decoration: none !important;
}

/* Module hero/title sanitation for pages with older inline/module CSS. */
html[data-theme] :where(
    .hero-title,
    .page-header h1,
    .es-hero__title,
    .org-hero h1,
    .leave-hero h1
) {
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-strong)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

html[data-theme] :where(
    .org-hero,
    .leave-hero,
    .es-hero
) {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--theme-accent) 12%, transparent), transparent 36%),
        linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-elevated) 100%) !important;
}

html[data-theme] :where(
    .org-hero__title-icon,
    .leave-hero__title-icon,
    .leave-modal__title-icon,
    .balance-icon
) {
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-strong)) !important;
    color: var(--theme-on-accent) !important;
    -webkit-text-fill-color: var(--theme-on-accent) !important;
    box-shadow: 0 12px 24px var(--theme-accent-subtle) !important;
}

html[data-theme] :where(
    .org-node-card,
    .employee-card,
    .employee-card-compact,
    .leave-action-btn,
    .leave-modal__close,
    .form-control:focus,
    .form-select:focus
) {
    border-color: var(--border-light) !important;
}

html[data-theme] :where(
    .org-node-card:hover,
    .employee-card:hover,
    .employee-card-compact:hover,
    .leave-action-btn:hover,
    .leave-modal__close:hover,
    .form-control:focus,
    .form-select:focus
) {
    border-color: var(--theme-accent) !important;
    box-shadow: var(--theme-shadow-md) !important;
}

html[data-theme] :where(
    .org-info .job-title,
    .org-detail-item i,
    .leave-requests-count,
    .balance-value
) {
    color: var(--theme-accent-strong) !important;
}

html[data-theme] :where(
    .reports-badge,
    .custom-tab.active,
    .leave-action-btn--secondary,
    .leave-requests-count,
    .leave-request-days
) {
    background: color-mix(in srgb, var(--theme-accent) 14%, var(--color-surface)) !important;
    border-color: color-mix(in srgb, var(--theme-accent) 36%, transparent) !important;
}

html[data-theme] :where(.reports-badge, .custom-tab.active) {
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-strong)) !important;
    color: var(--theme-on-accent) !important;
    box-shadow: 0 10px 20px var(--theme-accent-subtle) !important;
}

html[data-theme] :where(.org-node-card) {
    border-left-color: var(--theme-accent) !important;
}

html[data-theme] :where(.org-node-card:hover) {
    border-left-color: var(--theme-accent-strong) !important;
}

html[data-theme] .dept-card::before,
html[data-theme] .balance-card::before,
html[data-theme] .balance-progress-bar {
    background: linear-gradient(90deg, var(--theme-accent), var(--theme-accent-light)) !important;
}

/* Employee Services module token bridge: employee-services.css defined blue tokens in :root. */
html[data-theme] :where(.es-hero) {
    color: var(--theme-on-accent) !important;
}

html[data-theme] :where(.es-help-card__btn) {
    background: var(--theme-accent) !important;
    color: var(--theme-on-accent) !important;
}

html[data-theme] :where(.es-help-card__btn:hover) {
    background: var(--theme-accent-strong) !important;
    box-shadow: 0 4px 12px var(--theme-accent-subtle) !important;
}

/* Performance / Resources Capacity / Recognition Wall sanitation.
   These pages load perf-dashboard.css/perf-modal.css plus inline Razor styles that
   still contain default blue literals. This late layer forces all primary/info
   surfaces through --theme-accent and overrides normal inline style attributes. */
html[data-theme] :where(
    .perf-page-header,
    .capacity-metric-card
) {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--theme-accent) 12%, transparent), transparent 36%),
        linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-elevated) 100%) !important;
}

html[data-theme] .perf-page-header::before,
html[data-theme] .capacity-metric-card::before,
html[data-theme] .perf-card::before {
    background: radial-gradient(circle, color-mix(in srgb, var(--theme-accent) 10%, transparent) 0%, transparent 70%) !important;
}

html[data-theme] :where(
    .perf-metric-icon-primary,
    .perf-metric-icon-info,
    .perf-metric-icon-warning,
    .capacity-icon-box,
    .member-avatar-large,
    .team-icon-large,
    .perf-dashboard-wrapper [style*="rgba(66, 133, 244"]
) {
    background: color-mix(in srgb, var(--theme-accent) 15%, var(--color-surface)) !important;
    color: var(--theme-accent-strong) !important;
    border-color: color-mix(in srgb, var(--theme-accent) 36%, transparent) !important;
    box-shadow: 0 4px 16px var(--theme-accent-subtle) !important;
}

html[data-theme] .perf-page-header-title .fa-trophy,
html[data-theme] .perf-dashboard-wrapper .perf-metric-icon-box[style*="var(--google-yellow)"] {
    color: var(--theme-accent-strong) !important;
    -webkit-text-fill-color: currentColor !important;
}

html[data-theme] .perf-dashboard-wrapper .perf-metric-icon-box[style*="var(--google-yellow)"] {
    background: color-mix(in srgb, var(--theme-accent) 15%, var(--color-surface)) !important;
    border-color: color-mix(in srgb, var(--theme-accent) 36%, transparent) !important;
    box-shadow: 0 4px 16px var(--theme-accent-subtle) !important;
}

html[data-theme="marble"] .perf-dashboard-wrapper [style*="var(--google-yellow)"],
html[data-theme="marble"] .perf-dashboard-wrapper td[style*="color: var(--google-yellow)"] {
    color: var(--theme-accent-strong) !important;
    -webkit-text-fill-color: currentColor !important;
}

html[data-theme] :where(
    .perf-btn-primary,
    .perf-progress-primary,
    .perf-progress-bar-fill,
    .team-header,
    .perf-page-header-title > div,
    .tab-btn.active,
    .perf-checkbox-input:checked ~ .perf-checkbox-custom
) {
    background: linear-gradient(135deg, var(--theme-accent) 0%, var(--theme-accent-strong) 100%) !important;
    color: var(--theme-on-accent) !important;
    border-color: var(--theme-accent) !important;
    box-shadow: 0 8px 22px var(--theme-accent-subtle) !important;
}

html[data-theme] :where(
    .perf-btn-primary:hover,
    .week-navigator-btn:hover
) {
    background: linear-gradient(135deg, var(--theme-accent-strong) 0%, var(--theme-accent) 100%) !important;
    color: var(--theme-on-accent) !important;
    border-color: var(--theme-accent-strong) !important;
    box-shadow: 0 10px 26px var(--theme-accent-subtle) !important;
}

html[data-theme] :where(
    .perf-metric-change-up,
    .perf-card-title i,
    .perf-goal-meta i,
    .perf-badge-primary,
    .perf-badge-info,
    .perf-link,
    .capacity-metric-value,
    .week-display i,
    .team-stat-item i,
    .team-stat-value,
    .member-details h4 + .member-role-badge.role-developer,
    .skill-level,
    .perf-dashboard-wrapper [style*="--google-blue"]
) {
    color: var(--theme-accent-strong) !important;
    -webkit-text-fill-color: currentColor !important;
}

html[data-theme] :where(
    .perf-color-primary,
    .perf-color-info,
    .capacity-metric-value
) {
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-strong)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

html[data-theme] :where(
    .perf-badge-primary,
    .perf-badge-info,
    .role-developer,
    .leave-requests-count,
    .perf-dashboard-wrapper tr[style*="--google-blue-subtle"]
) {
    background: color-mix(in srgb, var(--theme-accent) 14%, var(--color-surface)) !important;
    color: var(--theme-accent-strong) !important;
    border-color: color-mix(in srgb, var(--theme-accent) 35%, transparent) !important;
    box-shadow: 0 2px 8px var(--theme-accent-subtle) !important;
}

html[data-theme] .perf-card-header::after,
html[data-theme] .perf-modal-header::after,
html[data-theme] .perf-key-result-box::before,
html[data-theme] .perf-metric-card::before,
html[data-theme] .perf-comparison-item::before,
html[data-theme] .perf-goal-item::before,
html[data-theme] .capacity-bar-fill {
    background: linear-gradient(90deg, var(--theme-accent), var(--theme-accent-light)) !important;
}

html[data-theme] :where(
    .perf-metric-card:hover,
    .perf-card:hover,
    .perf-comparison-item:hover,
    .perf-goal-item:hover,
    .capacity-metric-card:hover,
    .team-stat-item:hover,
    .perf-key-result-box:hover,
    .perf-checkbox-label:hover,
    .perf-modal-body .perf-form-input:hover,
    .perf-modal-body .perf-form-select:hover,
    .perf-modal-body .perf-form-textarea:hover,
    .perf-modal-body .perf-form-input:focus,
    .perf-modal-body .perf-form-select:focus,
    .perf-modal-body .perf-form-textarea:focus
) {
    border-color: var(--theme-accent) !important;
    box-shadow: var(--theme-shadow-md), 0 0 0 3px var(--theme-accent-subtle) !important;
}

html[data-theme] :where(
    .perf-btn-outline,
    .perf-btn-secondary:hover
) {
    color: var(--theme-accent-strong) !important;
    border-color: var(--theme-accent) !important;
    background: color-mix(in srgb, var(--theme-accent) 10%, var(--color-surface)) !important;
}

html[data-theme] :where(.perf-btn-outline:hover) {
    color: var(--theme-on-accent) !important;
    background: var(--theme-accent) !important;
    border-color: var(--theme-accent) !important;
}

html[data-theme] .perf-modal-close-btn::before,
html[data-theme] .perf-checkbox-input:focus ~ .perf-checkbox-custom {
    background: var(--theme-accent-subtle) !important;
    box-shadow: 0 0 0 4px var(--theme-accent-subtle) !important;
}

html[data-theme] :where(.perf-modal-close-btn:hover) {
    background: var(--theme-accent) !important;
    color: var(--theme-on-accent) !important;
    border-color: var(--theme-accent) !important;
}

html[data-theme] :where(.perf-dashboard-wrapper [style*="#5a7de8"]) {
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-strong)) !important;
    color: var(--theme-on-accent) !important;
    box-shadow: 0 8px 22px var(--theme-accent-subtle) !important;
}

html[data-theme] :where(.perf-dashboard-wrapper [style*="rgba(66, 133, 244, 0.3)"]) {
    box-shadow: 0 4px 12px var(--theme-accent-subtle) !important;
}

/* Bootstrap/color utility sanitation: stop default blue utilities from leaking into themed pages. */
html[data-theme] :where(.text-primary, .link-primary, .accent, .accent-text) {
    color: var(--theme-accent-strong) !important;
}

html[data-theme] :where(.bg-primary, .badge-primary, .badge--primary, .primary-bg) {
    background: var(--theme-accent) !important;
    color: var(--theme-on-accent) !important;
    border-color: var(--theme-accent) !important;
}

html[data-theme] :where(.border-primary, .primary-border) {
    border-color: var(--theme-accent) !important;
}

html[data-theme] :where(.btn-outline-primary, .outline-primary) {
    color: var(--theme-accent-strong) !important;
    border-color: var(--theme-accent) !important;
    background: transparent !important;
}

html[data-theme] :where(.btn-outline-primary:hover, .outline-primary:hover) {
    color: var(--theme-on-accent) !important;
    border-color: var(--theme-accent) !important;
    background: var(--theme-accent) !important;
}

/* Liquid Gold hard stop: any app-level primary/active/selected surface uses molten gold, never default blue. */
html[data-theme="liquid-gold-pour"] :where(
    .btn-primary,
    .primary-btn,
    .button-primary,
    .action-btn.primary,
    .toolbar-btn.active,
    .tab-button.active,
    .filter-btn.active,
    .pill-nav__item.active,
    .nav-link.active,
    .tab.active,
    .tab-item.active,
    .menu-item.active,
    .sidebar-link.active,
    .progress-bar,
    .meter-fill,
    .progress-fill,
    .bg-primary,
    .badge-primary,
    .badge--primary,
    .primary-bg
) {
    background: linear-gradient(135deg, #c8a347, #9b7a22) !important;
    color: #3a2608 !important;
    border-color: #c8a347 !important;
    box-shadow: 0 8px 20px rgba(200, 163, 71, 0.18) !important;
}

html[data-theme="liquid-gold-pour"] :where(
    a:not(.btn):not(.pill-nav__item):not(.theme-card):not(.dropdown-item),
    .text-primary,
    .link-primary,
    .accent,
    .accent-text,
    .primary-text,
    .icon-primary,
    .fa-primary
) {
    color: #9b7a22 !important;
}

html[data-theme="liquid-gold-pour"] :where(
    input:focus,
    select:focus,
    textarea:focus,
    .form-control:focus,
    .form-select:focus,
    .search-input:focus,
    .chat-input:focus,
    .input-wrapper:focus-within,
    .border-primary,
    .primary-border
) {
    border-color: #c8a347 !important;
    box-shadow: 0 0 0 3px rgba(200, 163, 71, 0.16) !important;
}

html[data-theme="liquid-gold-pour"] .hero-panel {
    background:
        radial-gradient(circle at 7% 12%, color-mix(in srgb, #c8a347 18%, transparent), transparent 34%),
        radial-gradient(circle at 100% 0%, color-mix(in srgb, #e8c468 18%, transparent), transparent 30%),
        linear-gradient(115deg, color-mix(in srgb, var(--color-surface) 92%, transparent), color-mix(in srgb, var(--color-surface-subtle) 78%, transparent)),
        linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 92%, transparent), var(--color-surface-elevated, var(--color-surface))) !important;
    box-shadow: 0 24px 80px rgba(180, 130, 30, 0.16) !important;
}

html[data-theme="liquid-gold-pour"] .hero-panel::after {
    background: radial-gradient(ellipse, color-mix(in srgb, #e8c468 20%, transparent), transparent 68%) !important;
}

html[data-theme="marble"] :where(.btn:hover, .button:hover, .nav-link:hover, .tab:hover, .tab-item:hover, .menu-item:hover, .sidebar-link:hover) {
    border-color: var(--theme-hover-accent) !important;
}

/* Theme picker previews must keep their bespoke art */
html[data-theme] .theme-preview,
html[data-theme] .theme-preview *,
html[data-theme] #theme-shader-canvas {
    box-shadow: revert;
}