/* themes.css — light/dark system, loaded globally after variables.css. Dark = html[data-theme="dark"]; -700 is the ramp pivot. */

/* Manual dark via data-theme on <html>; brand tints flip in the theme-builder's style.css. */
html[data-theme="dark"] {

	/* scroll-shadow cover: mask the shadow ends with the dark surface, not white (paired 0-alpha for a clean fade) */
	--scrollshadow-cover: #161C24;
	--scrollshadow-cover-0: rgba(22, 28, 36, 0);

	/* ─── Status scale reversal (same as system block above) ─── */
	--Status-Colors-Success-100:  #083718;
	--Status-Colors-Success-200:  #0D5B29;
	--Status-Colors-Success-300:  #127F39;
	--Status-Colors-Success-400:  #15A348;
	--Status-Colors-Success-500:  #18AC4D;
	--Status-Colors-Success-600:  #19B14F;
	--Status-Colors-Success-800:  #76D397;
	--Status-Colors-Success-900:  #A0E4B8;
	--Status-Colors-Success-1000: #E7F9EE;

	--Status-Colors-Warning-100:  #4C2E0C;
	--Status-Colors-Warning-200:  #7F4D14;
	--Status-Colors-Warning-300:  #B16C1B;
	--Status-Colors-Warning-400:  #C97E1F;
	--Status-Colors-Warning-500:  #D88521;
	--Status-Colors-Warning-600:  #DE8722;
	--Status-Colors-Warning-800:  #FDAE52;
	--Status-Colors-Warning-900:  #FEC27D;
	--Status-Colors-Warning-1000: #FFF5E9;

	--Status-Colors-Error-100:  #450303;
	--Status-Colors-Error-200:  #8B0606;
	--Status-Colors-Error-300:  #B90808;
	--Status-Colors-Error-400:  #D40909;
	--Status-Colors-Error-500:  #DF0A0A;
	--Status-Colors-Error-600:  #E40A0A;
	--Status-Colors-Error-800:  #F37272;
	--Status-Colors-Error-900:  #F59D9D;
	--Status-Colors-Error-1000: #FDE7E7;

	/* Severity foreground: critical/high → -Hover (legible); medium/low → lighter teal. */
	--ap-severity-critical: var(--Error-Hover);
	--ap-severity-high:     var(--Warning-Hover);
	--ap-severity-medium:   #45D9D0;
	--ap-severity-low:      #45D9D0;

	/* Reversed Error-200 reads too dark here — use a lighter muted red. */
	--Error-Hover-Contrast: #A33A3A;

	/* Dark surfaces use a neutral charcoal ramp — the fixed Neutral scale's dark end reads too blue. */
	--Surface-Surface:               #1E2630;
	--Surface-Surface-lowest:        #161C24;   /* cards / panels */
	--Surface-Surface-low:           #1E2630;
	--Surface-Surface-high:          #283239;   /* elevated: search, stat cards */
	--Surface-Surface-highest:       #111C24;
	--Surface-Surface-disabled:      #12161B;
	--Surface-Surface-background:    #0E1116;   /* page canvas */

	--Text-Low:                      var(--Neutral-Colors-Main-Neutrals-500);
	--Text-Medium:                   var(--Neutral-Colors-Main-Neutrals-400);
	--Text-High:                     var(--Neutral-Colors-Main-Neutrals-300);
	--Text-Disabled:                 var(--Neutral-Colors-Main-Neutrals-600);

	--Icons-Low:                     var(--Neutral-Colors-Main-Neutrals-400);
	--Icons-Medium:                  var(--Neutral-Colors-Main-Neutrals-200);
	--Icons-High:                    var(--Neutral-Colors-Main-Neutrals-100);
	--Icons-Disabled:                var(--Neutral-Colors-Main-Neutrals-600);

	/* Dropdown items recede; only the selected one stays prominent */
	--Dropdown-Item-Text:            var(--Text-Medium);
	--Dropdown-Item-Text-Selected:   var(--Base-Colors-Base-White);

	/* Tag label goes white on the navy fill; the close × sits one step back. */
	--Tag-Text:                      var(--Text-White);
	--Tag-Close-Icon:                var(--Text-High);

	/* Neutral semantics — dark re-base of the Main-Neutrals ramp.
	   Text stops are contrast-matched to their light behaviour; surfaces and outlines use the
	   charcoal ladder, since the ramp's own dark end (#001424) reads too blue on this UI. */
	--Neutral-Text-Medium:           var(--Neutral-Colors-Main-Neutrals-400);
	--Neutral-Text-Low:              var(--Neutral-Colors-Main-Neutrals-600);
	--Neutral-Text-Muted:            var(--Neutral-Colors-Main-Neutrals-700);
	--Neutral-Surface-Subtle:        var(--Neutral-Colors-Grey-300);
	--Neutral-Surface:               var(--Neutral-Colors-Grey-100);
	--Neutral-Surface-Muted:         var(--Neutral-Colors-Grey-75);
	--Neutral-Outline:               var(--Neutral-Colors-Grey-400);
	--Neutral-Outline-Subtle:        var(--Neutral-Colors-Grey-300);

	--Outline-Low:                   #283239;   /* neutral border on charcoal (not navy) */
	--Outline-Medium:                #3A444C;
	--Outline-High:                  #4A555E;
	--Outline-Disabled:              #1A2027;

	/* Alpha-Neutrals flip to a white base so semi-transparent overlays read light-on-dark. */
	--Neutral-Colors-Alpha-Neutrals-100:  #FFFFFF1A;
	--Neutral-Colors-Alpha-Neutrals-200:  #FFFFFF26;
	--Neutral-Colors-Alpha-Neutrals-300:  #FFFFFF33;
	--Neutral-Colors-Alpha-Neutrals-400:  #FFFFFF40;
	--Neutral-Colors-Alpha-Neutrals-500:  #FFFFFF4D;
	--Neutral-Colors-Alpha-Neutrals-600:  #FFFFFF66;
	--Neutral-Colors-Alpha-Neutrals-700:  #FFFFFF80;
	--Neutral-Colors-Alpha-Neutrals-800:  #FFFFFF99;
	--Neutral-Colors-Alpha-Neutrals-900:  #FFFFFFB3;
	--Neutral-Colors-Alpha-Neutrals-1000: #FFFFFFCC;

	/* Grey is the one raw ramp that flips: tints 25-300 mirror the Surface stops, 600-1000 become foreground. */
	--Neutral-Colors-Grey-25:   #0E1116;
	--Neutral-Colors-Grey-50:   #12161B;
	--Neutral-Colors-Grey-75:   #161C24;
	--Neutral-Colors-Grey-100:  #1E2630;
	--Neutral-Colors-Grey-200:  #232C36;
	--Neutral-Colors-Grey-300:  #283239;
	--Neutral-Colors-Grey-400:  #3A444C;
	--Neutral-Colors-Grey-500:  #667085;
	--Neutral-Colors-Grey-600:  #98A2B3;
	--Neutral-Colors-Grey-700:  #D0D5DD;
	--Neutral-Colors-Grey-800:  #E4E7EC;
	--Neutral-Colors-Grey-900:  #F2F4F7;
	--Neutral-Colors-Grey-1000: #FCFCFD;

	/* Brand tints point straight at the dark stops; the oklch reversal does not exist on platform pages. */
	--Surface-Primary:    var(--Brand-Colors-Primary-1000);
	--Surface-Secondary:  var(--Brand-Colors-Secondary-1000);
	--Surface-Accent:     var(--Brand-Colors-Accent-1000);
	--Outline-Primary:    var(--Brand-Colors-Primary-900);
	--Outline-Secondary:  var(--Brand-Colors-Secondary-900);
	--Outline-Accent:     var(--Brand-Colors-Accent-900);
	--Secondary-Hover:    var(--Brand-Colors-Secondary-200);
	--Accent-Hover:       var(--Brand-Colors-Accent-200);

	/* Warning alone pointed at -200; on the reversed Status ramp that is a mid amber, not a tint. */
	--Surface-Warning:    var(--Status-Colors-Warning-100);

	/* Accents toned one shade darker — dark mode removes bright colors. */
	--Brand-Colors-Primary-base:    #0077D6;
	--Brand-Colors-Secondary-base:  #BD1A4D;
	--Brand-Colors-Accent-base:     #7A51C9;
	--Status-Colors-Success-base:   #159647;
	--Status-Colors-Success-500:    #159647;
	--Status-Colors-Success-600:    #159647;
	--Status-Colors-Warning-base:   #C2741A;
	--Status-Colors-Warning-500:    #C2741A;
	--Status-Colors-Warning-600:    #C2741A;
	--Status-Colors-Error-base:     #C40808;
	--Status-Colors-Error-500:      #C40808;
	--Status-Colors-Error-600:      #C40808;
}


/* Primary nav shell vars: left rail lives OUTSIDE .cl-page. Light defaults at :root here; dark flips on <html>. */
:root {
	--primarynav-bg:      linear-gradient(180deg, #2EA5FF 0%, #0a67ad 100%);
	--primarynav-surface: var(--Surface-Surface-highest);
	--primarynav-border:  var(--Outline-Low);
}
html[data-theme="dark"] {
	/* Figma dark nav: navy rail gradient, #12161B panel, #374151 border. */
	--primarynav-bg:      linear-gradient(180deg, #192433 0%, #1E293C 100%);
	--primarynav-surface: #12161B;
	--primarynav-border:  #374151;
}
@media (prefers-color-scheme: dark) {
	html:not([data-theme]) {
		--primarynav-bg:      linear-gradient(180deg, #192433 0%, #1E293C 100%);
		--primarynav-surface: #12161B;
		--primarynav-border:  #374151;
	}
}

/* ─── Dark component overrides — html[data-theme="dark"] only, so un-migrated pages under OS dark stay light ─── */

/* Placeholder graphs are baked-light rasters on a white plate — multiply them into the widget
   surface so the plate becomes the surface and only the faint graph texture survives.
   background-blend-mode composites inside the element; mix-blend-mode was ignored here. */
html[data-theme="dark"] .tp__no-results {
	background-color: var(--Surface-Surface-highest);
	background-blend-mode: multiply;
}


/* Selected text goes white in dark — Primary on navy is too low-contrast. Tag chips keep their blue. */
html[data-theme="dark"] #bug_new_issue_modal #show_assignees .count>.ap__avatar,
html[data-theme="dark"] #bug_new_issue_modal .cf-user-type-dropdown .count>.ap__avatar,
html[data-theme="dark"] #confirm_delete_saved_filter .mdl-button.close-btn:hover,
html[data-theme="dark"] #contextual_ai_modal button.close:hover,
html[data-theme="dark"] #create_page_modal .close-btn:hover,
html[data-theme="dark"] #create_team_invite_modal .ap__avatar.user-avatar3,
html[data-theme="dark"] #create_team_invite_modal.bug-report__delete-issue .close-btn:hover,
html[data-theme="dark"] #create_team_invite_modal.bug-report__delete-issue .pending-text-me,
html[data-theme="dark"] #custom_dropdown_items .mapping-show-all-checkbox-container input:checked ~ .mapping-show-all-checkbox-checkmark,
html[data-theme="dark"] #first_report_modal button.close:hover,
html[data-theme="dark"] #git_integration_steps_modal .close-btn:hover,
html[data-theme="dark"] #invite_user_modal .ap__avatar.user-avatar3,
html[data-theme="dark"] #invite_user_modal.bug-report__delete-issue .close-btn:hover,
html[data-theme="dark"] #invite_user_modal.bug-report__delete-issue .pending-text-me,
html[data-theme="dark"] #jira_bugslist_sync_table_wrapper.dataTables_wrapper .dataTables_paginate .paginate_button.current:active,
html[data-theme="dark"] #jira_bugslist_sync_table_wrapper.dataTables_wrapper .dataTables_paginate .paginate_button.current:focus,
html[data-theme="dark"] #jira_bugslist_sync_table_wrapper.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
html[data-theme="dark"] #kbdoc_tree_container .pkb__tree-item.pkb__tree-item--active,
html[data-theme="dark"] #map_fields_clickup_sync .label,
html[data-theme="dark"] #move_issues_modal button.close:hover,
html[data-theme="dark"] #notify_end_trial_free_bugasura_modal .modal-header .close:hover,
html[data-theme="dark"] #notify_free_bugasura_modal .modal-header .close:hover,
html[data-theme="dark"] #post_signup_welcome_modal .modal-header .close:hover,
html[data-theme="dark"] #project_icon_modal.bug-report__delete-issue .close-btn:hover,
html[data-theme="dark"] #project_icon_preview_modal.bug-report__delete-issue .close-btn:hover,
html[data-theme="dark"] #project_settings_modal .modal-body button.close:hover,
html[data-theme="dark"] #ps_multi_selection .mapping-show-all-checkbox-container input:checked ~ .mapping-show-all-checkbox-checkmark,
html[data-theme="dark"] #saved_filter_basic_sec button,
html[data-theme="dark"] #sprint-create-form button.close:hover,
html[data-theme="dark"] #support_bugasura_modal .modal-header .close:hover,
html[data-theme="dark"] #testcase_modal_edit #testcase_assignees_edit li.active > a,
html[data-theme="dark"] .active.custom-repeat-checkbox,
html[data-theme="dark"] .ai__stats .dropdown>.material-icons:hover,
html[data-theme="dark"] .ai__stats .material-icons.close:hover,
html[data-theme="dark"] .ai__tab>li.active>a,
html[data-theme="dark"] .answer__reports .team-name-label,
html[data-theme="dark"] .ap__dropdown--menu.new li>a.js--custom-field-type-select.dropdown-select,
html[data-theme="dark"] .ap__dropdown--menu.new>.scroll>li.active>a,
html[data-theme="dark"] .ap__dropdown--menu.new>.scroll>li>a.dropdown-select,
html[data-theme="dark"] .ap__dropdown--menu.new>li.active>a,
html[data-theme="dark"] .ap__dropdown--menu.new>li>a.active,
html[data-theme="dark"] .ap__dropdown--menu.new>li>a.dropdown-select,
html[data-theme="dark"] .ap__dropdown--menu>li.active>a,
html[data-theme="dark"] .ap__dropdown--menu>li.active>button,
html[data-theme="dark"] .ap__dropdown--menu>li>a.dropdown-select,
html[data-theme="dark"] .ap__dropdown--menu>li>button.dropdown-select,
html[data-theme="dark"] .ap__folders.jstree-default-large .jstree-clicked,
html[data-theme="dark"] .ap__header-profile,
html[data-theme="dark"] .ap__modal-close:hover,
html[data-theme="dark"] .app-box .platform-name-label,
html[data-theme="dark"] .ba-dropdown__item.active,
html[data-theme="dark"] .banner-close-btn:hover,
html[data-theme="dark"] .btn-preview-update,
html[data-theme="dark"] .bug-report__low.active,
html[data-theme="dark"] .bug-report__low.active:focus,
html[data-theme="dark"] .bug-report__low.active:hover,
html[data-theme="dark"] .bug-report__low:active,
html[data-theme="dark"] .bug-report__low:active:hover,
html[data-theme="dark"] .bug-report__low:hover,
html[data-theme="dark"] .bug-report__types>.btn.bug-report__low.active span.bug__report-counts,
html[data-theme="dark"] .bug-report__types>.btn.bug-report__low:hover span.bug__report-counts,
html[data-theme="dark"] .bug__emails-dropdown.copied .bug__emails-copied,
html[data-theme="dark"] .bug__links .box:hover,
html[data-theme="dark"] .bug__test-case .selected-testcase-close:hover,
html[data-theme="dark"] .change-plan-confirm-modal button.close:hover,
html[data-theme="dark"] .ck-content .mention,
html[data-theme="dark"] .close-asana:hover,
html[data-theme="dark"] .close-clickup-sync:hover,
html[data-theme="dark"] .close-jira:hover,
html[data-theme="dark"] .comment__user.comment__user-private .comment_content,
html[data-theme="dark"] .comment__user.comment__user-private .comment_header,
html[data-theme="dark"] .conditions-list li.active .icon-holder,
html[data-theme="dark"] .csv-block .show-attachment .mdl-button:hover,
html[data-theme="dark"] .custom-field-condition-label,
html[data-theme="dark"] .customtest__container .customtest__card.active,
html[data-theme="dark"] .dropdown--opt .dropdown-menu>.scroll>li.active>a.platform-type-item,
html[data-theme="dark"] .dropdown--opt .dropdown-menu>.scroll>li.active>a.test-data-environment-item,
html[data-theme="dark"] .environment-tribute-container li.highlight,
html[data-theme="dark"] .excel-block .show-attachment .mdl-button:hover,
html[data-theme="dark"] .file-upload-area.highlight,
html[data-theme="dark"] .filter__nav>li.saved-filter-mob.active>a,
html[data-theme="dark"] .filter__nav>li.saved-filter-mob.active>a.dropdown-select,
html[data-theme="dark"] .filter__nav>li.saved-filter-mob>a,
html[data-theme="dark"] .fm__item>.avatar-name,
html[data-theme="dark"] .form-check input[type="checkbox"]:checked+label,
html[data-theme="dark"] .form-check input[type="radio"]:checked+label,
html[data-theme="dark"] .github-popover .actions-selected-list>li,
html[data-theme="dark"] .instructions,
html[data-theme="dark"] .intro__head>button1:hover,
html[data-theme="dark"] .jira-conf nav i:hover,
html[data-theme="dark"] .jira-config .select2-results__options>li[aria-selected="true"],
html[data-theme="dark"] .jira-log-item .jira-pull-log,
html[data-theme="dark"] .jira-log-item .jira-push-log,
html[data-theme="dark"] .jira_map_fields .label,
html[data-theme="dark"] .mapping-row .label,
html[data-theme="dark"] .mapping-show-all-checkbox-container input:checked ~ .mapping-show-all-checkbox-checkmark,
html[data-theme="dark"] .mapping-show-all-checkbox-container input:checked~.mapping-show-all-checkbox-checkmark,
html[data-theme="dark"] .mdl-button.integrations-modal-close--js:hover,
html[data-theme="dark"] .mdl-button.save-filter-modal-close--js:hover,
html[data-theme="dark"] .mim__search-list-close--js:hover,
html[data-theme="dark"] .mob-index .active.mob-page-no a,
html[data-theme="dark"] .nav-tabs>li.active>a,
html[data-theme="dark"] .nav-tabs>li.active>a .tp__gtc-modal-tab-count,
html[data-theme="dark"] .nav-tabs>li.active>a:focus,
html[data-theme="dark"] .nav-tabs>li.active>a:hover,
html[data-theme="dark"] .nf__modal.ap__modal button.close:hover,
html[data-theme="dark"] .payment__user-counter button,
html[data-theme="dark"] .perfmon-toggle .active,
html[data-theme="dark"] .pkb__add-document-btn,
html[data-theme="dark"] .pkb__source-list-item.pkb-active,
html[data-theme="dark"] .pkb__tree-item--active,
html[data-theme="dark"] .progress-controls .control-btn.retry-btn:hover,
html[data-theme="dark"] .ps__field-type[data-field-type="date"],
html[data-theme="dark"] .ps__modal-mandatory-checkbox-container input:checked ~ .ps__modal-mandatory-checkbox-checkmark,
html[data-theme="dark"] .reply__hide:hover,
html[data-theme="dark"] .reply__load>span,
html[data-theme="dark"] .similar-issue-row>.similar-close:hover,
html[data-theme="dark"] .similar-issue-row>.testcase-close:hover,
html[data-theme="dark"] .sprint_options-dropdown>li.panel-dropdown-item.active,
html[data-theme="dark"] .success,
html[data-theme="dark"] .td__content .ap__issue-title .btn.active,
html[data-theme="dark"] .td__content .row.row-flex>[class*='col-']>.panel .dropdown-menu .active .circle,
html[data-theme="dark"] .td__env-item.active,
html[data-theme="dark"] .team-member__name--circle,
html[data-theme="dark"] .test-report__icons[data-report-type="automation"],
html[data-theme="dark"] .test-report__icons[data-report-type="functional"],
html[data-theme="dark"] .test__modal #app-screen ul.ap__tabs>li>a:not(#js_zip_download),
html[data-theme="dark"] .test__modal-tab--primary.ap__tabs>li>a,
html[data-theme="dark"] .testcase__column--card-details .material-icons,
html[data-theme="dark"] .testcase__row--add,
html[data-theme="dark"] .testplan-global-private .btn-success,
html[data-theme="dark"] .testplan-toggle-container .btn-success:active:focus,
html[data-theme="dark"] .testplan-toggle-container .btn-success:active:hover,
html[data-theme="dark"] .toolbar-more-item .ba-dropdown__item.current,
html[data-theme="dark"] .tp__btn-fb.ap__btn.ap__btn--new.active,
html[data-theme="dark"] .tp__case-count-filters .status-icon-block:hover,
html[data-theme="dark"] .tp__chat-list.active,
html[data-theme="dark"] .tp__chat-list:has(.dropdown.open),
html[data-theme="dark"] .tp__chat-list:hover,
html[data-theme="dark"] .tp__chat-new,
html[data-theme="dark"] .tp__chat-new:focus,
html[data-theme="dark"] .tp__chat-new:hover,
html[data-theme="dark"] .tp__cu-arrow-navigators .ap__btn--primary,
html[data-theme="dark"] .tp__exe-status[data-execution-status="completed"],
html[data-theme="dark"] .tp__list-item.active,
html[data-theme="dark"] .tr-copy-sprint-panel .ba-dropdown__item.active,
html[data-theme="dark"] .tr-day-checkbox.selected.active,
html[data-theme="dark"] .tr__fail-tc-id,
html[data-theme="dark"] .unassign-member,
html[data-theme="dark"] .user-type-member,
html[data-theme="dark"] .wizard__assign-invited>ul>li:hover,
html[data-theme="dark"] body.goIntegrations .mdl-button.integrations-modal-close--js:hover,
html[data-theme="dark"] .app-box .platform-name-label[data-platform_name='Android-Mobileweb'],
html[data-theme="dark"] .app-box .platform-name-label[data-platform_name='Desktop-Web'],
html[data-theme="dark"] .app-box .platform-name-label[data-platform_name='iOS-Apps'],
html[data-theme="dark"] .app-box .platform-name-label[data-platform_name='iOS-Mobileweb'],
html[data-theme="dark"] .device-details-save .save-config-btns .bug-filter-btns,
html[data-theme="dark"] .filter-child-item.active,
html[data-theme="dark"] .ud__team-info .dropdown--opt>.mdl-button.active,
html[data-theme="dark"] .uj__journey-preview.active {
	color: var(--Base-Colors-Base-White) !important;
}

/* Covers the variants the component rule misses: --active, and .icon children that don't take currentColor. */
html[data-theme="dark"] li.active > a.ba-dropdown__item,
html[data-theme="dark"] .active > a.ba-dropdown__item,
html[data-theme="dark"] li > a.ba-dropdown__item.dropdown-select,
html[data-theme="dark"] .ba-dropdown__item.dropdown-select,
html[data-theme="dark"] .ba-dropdown__item--active,
html[data-theme="dark"] li.active > a.ba-dropdown__item > .icon,
html[data-theme="dark"] .active > a.ba-dropdown__item > .icon,
html[data-theme="dark"] .ba-dropdown__item.dropdown-select > .icon,
html[data-theme="dark"] .ba-dropdown__item--active > .icon {
	color: var(--Dropdown-Item-Text-Selected) !important;
}


/* Bootstrap's tooltip inverts to a light panel in dark; :not() spares bespoke tooltips their own surface. */
html[data-theme="dark"] .tooltip > .tooltip-inner:not(.custom-tooltip-inner),
html[data-theme="dark"] .tooltip-inner:not(.custom-tooltip-inner) {
	background-color: var(--Base-Colors-Base-White);
	color: var(--Base-Colors-Base-Black);
}
/* The hardcoded #000 arrow must invert with the now-white tooltip body. */
html[data-theme="dark"] .tooltip.top .tooltip-arrow,
html[data-theme="dark"] .tooltip.top-left .tooltip-arrow,
html[data-theme="dark"] .tooltip.top-right .tooltip-arrow { border-top-color: var(--Base-Colors-Base-White); }
html[data-theme="dark"] .tooltip.bottom .tooltip-arrow,
html[data-theme="dark"] .tooltip.bottom-left .tooltip-arrow,
html[data-theme="dark"] .tooltip.bottom-right .tooltip-arrow { border-bottom-color: var(--Base-Colors-Base-White); }
html[data-theme="dark"] .tooltip.left .tooltip-arrow { border-left-color: var(--Base-Colors-Base-White); }
html[data-theme="dark"] .tooltip.right .tooltip-arrow { border-right-color: var(--Base-Colors-Base-White); }

/* Dark: soften the .u-ph-* skeleton shimmer sweep */
html[data-theme="dark"] .u-ph-item::before {
	background: linear-gradient(to right, rgba(255,255,255,0) 46%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0) 54%) 50% 50%;
}

/* Drop the legacy .issue-loader paint when modern u-ph-item bars are present */
.issue-loader.u-ph-item {
	background: none;
	animation: none;
}

/* Login logo dark swap now handled by js-u-assets-flip in signUp.volt. */

/* Bootstrap pins .caret border-top-color to #000 !important — flip to currentColor so it follows the text. */
html[data-theme="dark"] .caret {
	border-top-color: currentColor !important;
	border-bottom-color: currentColor !important;
}

/* Ensure a visible caret in dark; class-scoped intentional carets still win. */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] [contenteditable="true"] {
	caret-color: var(--Text-High);
	background: var(--Surface-Surface-highest);
}

/* The app hardcodes ::selection #1ac6ff, which never adapts — give dark its own. */
html[data-theme="dark"] ::selection      { background-color: var(--Brand-Colors-Primary-800); color: var(--Base-Colors-Base-White); }
html[data-theme="dark"] ::-moz-selection  { background-color: var(--Brand-Colors-Primary-800); color: var(--Base-Colors-Base-White); }

/* color-scheme darkens the native picker popup and the number spinner — neither is CSS-stylable;
   accent-color tints the selected day. */
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] input[type="month"],
html[data-theme="dark"] input[type="week"],
html[data-theme="dark"] input[type="number"] {
	color-scheme: dark;
	accent-color: var(--Brand-Colors-Primary-base);
}
@media (prefers-color-scheme: dark) {
	html:not([data-theme]) input[type="date"],
	html:not([data-theme]) input[type="time"],
	html:not([data-theme]) input[type="datetime-local"],
	html:not([data-theme]) input[type="month"],
	html:not([data-theme]) input[type="week"],
	html:not([data-theme]) input[type="number"] {
		color-scheme: dark;
		accent-color: var(--Brand-Colors-Primary-base);
	}
}

/* .btn-default is white in dark everywhere — theme it to a neutral raised surface. Dark-only. */
html[data-theme="dark"] .btn-default {
	background-color: var(--Surface-Surface-high);
	color: var(--Text-High);
	border-color: var(--Outline-Low);
}
@media (prefers-color-scheme: dark) {
	html:not([data-theme]) .btn-default {
		background-color: var(--Surface-Surface-high);
		color: var(--Text-High);
		border-color: var(--Outline-Low);
	}
}

/* Had a literal dark bg, so it read as a dark box in light — back onto the surface token. */
input.js-shuffle-search {
	background-color: var(--Surface-Surface-highest) !important;
}

/* Autofill can only be repainted via the inset box-shadow trick. Light untouched. */
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus,
html[data-theme="dark"] input:-webkit-autofill:active,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark"] textarea:-webkit-autofill:hover,
html[data-theme="dark"] textarea:-webkit-autofill:focus,
html[data-theme="dark"] select:-webkit-autofill,
html[data-theme="dark"] select:-webkit-autofill:hover,
html[data-theme="dark"] select:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--Text-High);
	-webkit-box-shadow: 0 0 0 100rem var(--Surface-Surface-highest) inset;
	caret-color: var(--Text-High);
}
@media (prefers-color-scheme: dark) {
	html:not([data-theme]) input:-webkit-autofill,
	html:not([data-theme]) input:-webkit-autofill:hover,
	html:not([data-theme]) input:-webkit-autofill:focus,
	html:not([data-theme]) input:-webkit-autofill:active,
	html:not([data-theme]) textarea:-webkit-autofill,
	html:not([data-theme]) textarea:-webkit-autofill:hover,
	html:not([data-theme]) textarea:-webkit-autofill:focus,
	html:not([data-theme]) select:-webkit-autofill,
	html:not([data-theme]) select:-webkit-autofill:hover,
	html:not([data-theme]) select:-webkit-autofill:focus {
		-webkit-text-fill-color: var(--Text-High);
		-webkit-box-shadow: 0 0 0 100rem var(--Surface-Surface-highest) inset;
		caret-color: var(--Text-High);
	}
}

/* CKEditor: re-point --ck-color-* here, not in the lazy ckEditor.css, so it survives a refresh. */
html[data-theme="dark"] {
	--ck-color-base-background: var(--Surface-Surface-highest);
	--ck-color-base-foreground: var(--Surface-Surface);
	--ck-color-base-border: var(--Outline-Low);
	--ck-color-base-text: var(--Text-High);
	--ck-color-text: var(--Text-High);
	--ck-color-toolbar-background: var(--Surface-Surface-highest);
	--ck-color-toolbar-border: var(--Outline-Low);
	--ck-color-panel-background: var(--Surface-Surface);
	--ck-color-panel-border: var(--Outline-Low);
	--ck-color-dropdown-panel-background: var(--Surface-Surface-highest);
	--ck-color-dropdown-panel-border: var(--Outline-Low);
	--ck-color-input-background: var(--Surface-Surface-highest);
	--ck-color-input-border: var(--Outline-Low);
	--ck-color-input-text: var(--Text-High);
	--ck-color-input-disabled-background: var(--Surface-Surface-disabled);
	--ck-color-list-background: var(--Surface-Surface-highest);
	--ck-color-list-button-hover-background: var(--Dropdown-Item-Bg-Hover);
	--ck-color-list-button-on-background: var(--Dropdown-Item-Bg-Selected);
	--ck-color-list-button-on-text: var(--Dropdown-Item-Text-Selected);
	--ck-color-button-default-hover-background: var(--Surface-Surface-high);
	--ck-color-button-default-active-background: var(--Surface-Surface-high);
	--ck-color-button-on-background: var(--Surface-Surface-high);
	--ck-color-button-on-hover-background: var(--Surface-Surface-high);
	--ck-color-split-button-hover-background: var(--Surface-Surface-high);
}

/* The editable itself. CKEditor paints the read-only body — the AI "Generating…" state — from
   --ck-color-base-foreground, which is a light grey by design, so pin the surface explicitly
   instead of relying on it. Here rather than in the lazy ckEditor.css so it survives a refresh. */
html[data-theme="dark"] .ck.ck-editor__main>.ck-editor__editable,
html[data-theme="dark"] .ck.ck-editor__main>.ck-editor__editable.ck-read-only,
html[data-theme="dark"] .ck.ck-editor__main>.ck-editor__editable.ai-enabled {
	background-color: var(--Surface-Surface-highest);
	color: var(--Text-High);
}
@media (prefers-color-scheme: dark) {
	html:not([data-theme]) {
		--ck-color-base-background: var(--Surface-Surface-highest);
		--ck-color-base-foreground: var(--Surface-Surface);
		--ck-color-base-border: var(--Outline-Low);
		--ck-color-base-text: var(--Text-High);
		--ck-color-text: var(--Text-High);
		--ck-color-toolbar-background: var(--Surface-Surface-highest);
		--ck-color-toolbar-border: var(--Outline-Low);
		--ck-color-panel-background: var(--Surface-Surface);
		--ck-color-panel-border: var(--Outline-Low);
		--ck-color-dropdown-panel-background: var(--Surface-Surface-highest);
		--ck-color-dropdown-panel-border: var(--Outline-Low);
		--ck-color-input-background: var(--Surface-Surface-highest);
		--ck-color-input-border: var(--Outline-Low);
		--ck-color-input-text: var(--Text-High);
		--ck-color-input-disabled-background: var(--Surface-Surface-disabled);
		--ck-color-list-background: var(--Surface-Surface-highest);
		--ck-color-list-button-hover-background: var(--Dropdown-Item-Bg-Hover);
		--ck-color-list-button-on-background: var(--Dropdown-Item-Bg-Selected);
		--ck-color-list-button-on-text: var(--Dropdown-Item-Text-Selected);
		--ck-color-button-default-hover-background: var(--Surface-Surface-high);
		--ck-color-button-default-active-background: var(--Surface-Surface-high);
		--ck-color-button-on-background: var(--Surface-Surface-high);
		--ck-color-button-on-hover-background: var(--Surface-Surface-high);
		--ck-color-split-button-hover-background: var(--Surface-Surface-high);
	}
}

/* jquery.tag-editor is lazy-loaded + uncached, so its dark fix has to live here (page-load). */
html[data-theme="dark"] .tag-editor { background: var(--Surface-Surface-highest); border-color: var(--Outline-Low); color: var(--Text-Medium); }
html[data-theme="dark"] .tag-editor .placeholder { color: var(--Text-Low); }
html[data-theme="dark"] .tag-editor input { color: var(--Text-High); }
/* Tag chips use the flipping tokens — fixed pale blue renders near-white on dark. !important beats the lazy vendor file. */
.tag-editor .tag-editor-tag { color: var(--Tag-Text) !important; background: var(--Tag-Bg) !important; border: 0 !important; }
.tag-editor .tag-editor-delete { background: var(--Tag-Bg) !important; }
.tag-editor .tag-editor-delete i:before { color: var(--Tag-Close-Icon) !important; }
.tag-editor .tag-editor-delete:hover { background: var(--Tag-Close-Bg-Hover) !important; }
.tag-editor .tag-editor-delete:hover i:before { color: var(--Tag-Close-Icon-Hover) !important; }

/* Comment card: light = page-bg surface, dark = low surface (different tokens per mode). */
.comment__user { background-color: var(--Surface-Surface-background); }
html[data-theme="dark"] .comment__user { background-color: var(--Surface-Surface-low); }
@media (prefers-color-scheme: dark) {
	html:not([data-theme]) .comment__user { background-color: var(--Surface-Surface-low); }
}
/* Comment body text — readable in both modes (Text-High flips). */
.comment_content * { color: var(--Text-High); }

html[data-theme="dark"] .ui-widget-content { border-color: var(--Outline-Low); background: var(--Surface-Surface); color: var(--Text-Medium); }
html[data-theme="dark"] .ui-widget-content a { color: var(--Primary-Primary); }
html[data-theme="dark"] .ui-widget-content .ui-state-hover, html[data-theme="dark"] .ui-widget-content .ui-state-focus { background: var(--Surface-Surface-high); }
@media (prefers-color-scheme: dark) {
	html:not([data-theme]) .tag-editor { background: var(--Surface-Surface-highest); border-color: var(--Outline-Low); color: var(--Text-Medium); }
	html:not([data-theme]) .tag-editor .placeholder { color: var(--Text-Low); }
	html:not([data-theme]) .tag-editor input { color: var(--Text-High); }
	/* tag chip handled by the non-scoped prominent rule above (same in both modes) */
	html:not([data-theme]) .tag-editor .tag-editor-delete { background: var(--Surface-Primary); }
	html:not([data-theme]) .tag-editor .tag-editor-delete i:before { color: var(--Primary-Primary); }
	html:not([data-theme]) .tag-editor .tag-editor-delete:hover { background: var(--Tag-Close-Bg-Hover); }
	html:not([data-theme]) .tag-editor .tag-editor-delete:hover i:before { color: var(--Tag-Close-Icon-Hover); }
	html:not([data-theme]) .ui-widget-content { border-color: var(--Outline-Low); background: var(--Surface-Surface); color: var(--Text-Medium); }
	html:not([data-theme]) .ui-widget-content a { color: var(--Primary-Primary); }
	html:not([data-theme]) .ui-widget-content .ui-state-hover, html:not([data-theme]) .ui-widget-content .ui-state-focus { background: var(--Surface-Surface-high); }
}

/* ─── Generic theme utilities — prefer one of these in the HTML over a new per-component dark rule ─── */

/* u-text-high — prominent theme-aware text (--Text-High flips both modes) */
.u-text-high {
	color: var(--Text-High) !important;
}

/* u-icon-flip — flip a dark icon to white in dark mode (add class in HTML) */
html[data-theme="dark"] .u-icon-flip {
	filter: brightness(0) invert(1);
}
@media (prefers-color-scheme: dark) {
	html:not([data-theme]) .u-icon-flip {
		filter: brightness(0) invert(1);
	}
}
/* u-icon-flip-soft — like u-icon-flip but to muted white-grey, not pure white */
html[data-theme="dark"] .u-icon-flip-soft {
	filter: brightness(0) invert(0.7);
}
@media (prefers-color-scheme: dark) {
	html:not([data-theme]) .u-icon-flip-soft {
		filter: brightness(0) invert(0.7);
	}
}

/* :empty map-fields loaders are CSS backgrounds, so they cannot use the Loader{{ DARK_SUFFIX }}.gif swap the markup uses. */
html[data-theme="dark"] #fields_mapping_layout:empty,
html[data-theme="dark"] .mapping-layout .scroll-thin:empty {
	background-image: url(./../../img/Loader-dark.gif);
}
@media (prefers-color-scheme: dark) {
	html:not([data-theme]) #fields_mapping_layout:empty,
	html:not([data-theme]) .mapping-layout .scroll-thin:empty {
		background-image: url(./../../img/Loader-dark.gif);
	}
}

/* u-dark-white — always white in dark; for elements permanently on a brand fill. */
html[data-theme="dark"] .u-dark-white.u-dark-white.u-dark-white {
	color: var(--Base-Colors-Base-White) !important;
}
/* u-dark-white-hover — white only while hovered/focused/pressed in dark. */
html[data-theme="dark"] .u-dark-white-hover.u-dark-white-hover.u-dark-white-hover:hover,
html[data-theme="dark"] .u-dark-white-hover.u-dark-white-hover.u-dark-white-hover:focus,
html[data-theme="dark"] .u-dark-white-hover.u-dark-white-hover.u-dark-white-hover:active {
	color: var(--Base-Colors-Base-White) !important;
}
/* u-dark-white-active — white only when selected; matches the state class on the element or an ancestor. */
html[data-theme="dark"] .u-dark-white-active.u-dark-white-active.u-dark-white-active.active,
html[data-theme="dark"] .u-dark-white-active.u-dark-white-active.u-dark-white-active.current,
html[data-theme="dark"] .u-dark-white-active.u-dark-white-active.u-dark-white-active.selected,
html[data-theme="dark"] .u-dark-white-active.u-dark-white-active.u-dark-white-active.highlight,
html[data-theme="dark"] .u-dark-white-active.u-dark-white-active.u-dark-white-active.pkb-active,
html[data-theme="dark"] .u-dark-white-active.u-dark-white-active.u-dark-white-active.copied,
html[data-theme="dark"] .u-dark-white-active.u-dark-white-active.u-dark-white-active.dropdown-select,
html[data-theme="dark"] .u-dark-white-active.u-dark-white-active.u-dark-white-active.pkb__tree-item--active,
html[data-theme="dark"] .u-dark-white-active.u-dark-white-active.u-dark-white-active.is-checked,
html[data-theme="dark"] .active .u-dark-white-active.u-dark-white-active.u-dark-white-active,
html[data-theme="dark"] .current .u-dark-white-active.u-dark-white-active.u-dark-white-active,
html[data-theme="dark"] .selected .u-dark-white-active.u-dark-white-active.u-dark-white-active,
html[data-theme="dark"] .copied .u-dark-white-active.u-dark-white-active.u-dark-white-active {
	color: var(--Base-Colors-Base-White) !important;
}
/* u-dark-white-checked — white while the paired input is checked in dark. */
html[data-theme="dark"] input:checked ~ .u-dark-white-checked,
html[data-theme="dark"] input:checked + .u-dark-white-checked {
	color: var(--Base-Colors-Base-White) !important;
}

/* daterangepicker: vendor CSS is static/cached, so it is themed here. */
html[data-theme="dark"] .daterangepicker {
	background-color: var(--Surface-Surface-highest);
	border-color: var(--Outline-Low);
	color: var(--Text-High);
}
html[data-theme="dark"] .daterangepicker:before { border-bottom-color: var(--Outline-Low); border-top-color: var(--Outline-Low); }
html[data-theme="dark"] .daterangepicker:after { border-bottom-color: var(--Surface-Surface-highest); border-top-color: var(--Surface-Surface-highest); }
html[data-theme="dark"] .daterangepicker .calendar-table {
	background-color: var(--Surface-Surface-highest);
	border-color: var(--Surface-Surface-highest);
}
/* Pin the calendar header cells dark — transparent in vendor CSS, so a custom skin could leave them white. */
html[data-theme="dark"] .daterangepicker .calendar-table table thead,
html[data-theme="dark"] .daterangepicker .calendar-table th {
	background-color: var(--Surface-Surface-highest);
	color: var(--Text-Medium);
}
html[data-theme="dark"] .daterangepicker .calendar-table .next span,
html[data-theme="dark"] .daterangepicker .calendar-table .prev span { border-color: var(--Text-Medium); }
html[data-theme="dark"] .daterangepicker td.available:hover,
html[data-theme="dark"] .daterangepicker th.available:hover { background-color: var(--Surface-Surface-low); }
html[data-theme="dark"] .daterangepicker td.week,
html[data-theme="dark"] .daterangepicker th.week { color: var(--Text-Low); }
html[data-theme="dark"] .daterangepicker td.off,
html[data-theme="dark"] .daterangepicker td.off.in-range,
html[data-theme="dark"] .daterangepicker td.off.start-date,
html[data-theme="dark"] .daterangepicker td.off.end-date {
	background-color: var(--Surface-Surface-highest);
	color: var(--Text-Low);
}
html[data-theme="dark"] .daterangepicker td.in-range {
	background-color: var(--Surface-Primary);
	color: var(--Text-High);
}
html[data-theme="dark"] .daterangepicker .drp-buttons { border-top-color: var(--Outline-Low); }
html[data-theme="dark"] .daterangepicker.show-ranges.ltr .drp-calendar.left,
html[data-theme="dark"] .daterangepicker.show-ranges.rtl .drp-calendar.right { border-color: var(--Outline-Low); }
html[data-theme="dark"] .daterangepicker .ranges li:hover { background-color: var(--Surface-Surface-low); }
html[data-theme="dark"] .daterangepicker select.monthselect,
html[data-theme="dark"] .daterangepicker select.yearselect {
	background-color: var(--Surface-Surface-low);
	color: var(--Text-High);
	border-color: var(--Outline-Low);
}
html[data-theme="dark"] .daterangepicker select.hourselect,
html[data-theme="dark"] .daterangepicker select.minuteselect,
html[data-theme="dark"] .daterangepicker select.secondselect,
html[data-theme="dark"] .daterangepicker select.ampmselect {
	background: var(--Surface-Surface-low);
	border-color: var(--Outline-Low);
	color: var(--Text-High);
}
@media (prefers-color-scheme: dark) {
	html:not([data-theme]) .daterangepicker {
		background-color: var(--Surface-Surface-highest);
		border-color: var(--Outline-Low);
		color: var(--Text-High);
	}
	html:not([data-theme]) .daterangepicker:before { border-bottom-color: var(--Outline-Low); border-top-color: var(--Outline-Low); }
	html:not([data-theme]) .daterangepicker:after { border-bottom-color: var(--Surface-Surface-highest); border-top-color: var(--Surface-Surface-highest); }
	html:not([data-theme]) .daterangepicker .calendar-table {
		background-color: var(--Surface-Surface-highest);
		border-color: var(--Surface-Surface-highest);
	}
	/* Calendar header band: month/year row + weekday row (thead/th). */
	html:not([data-theme]) .daterangepicker .calendar-table table thead,
	html:not([data-theme]) .daterangepicker .calendar-table th {
		background-color: var(--Surface-Surface-highest);
		color: var(--Text-Medium);
	}
	html:not([data-theme]) .daterangepicker .calendar-table .next span,
	html:not([data-theme]) .daterangepicker .calendar-table .prev span { border-color: var(--Text-Medium); }
	html:not([data-theme]) .daterangepicker td.available:hover,
	html:not([data-theme]) .daterangepicker th.available:hover { background-color: var(--Surface-Surface-low); }
	html:not([data-theme]) .daterangepicker td.week,
	html:not([data-theme]) .daterangepicker th.week { color: var(--Text-Low); }
	html:not([data-theme]) .daterangepicker td.off,
	html:not([data-theme]) .daterangepicker td.off.in-range,
	html:not([data-theme]) .daterangepicker td.off.start-date,
	html:not([data-theme]) .daterangepicker td.off.end-date {
		background-color: var(--Surface-Surface-highest);
		color: var(--Text-Low);
	}
	html:not([data-theme]) .daterangepicker td.in-range {
		background-color: var(--Surface-Primary);
		color: var(--Text-High);
	}
	html:not([data-theme]) .daterangepicker .drp-buttons { border-top-color: var(--Outline-Low); }
	html:not([data-theme]) .daterangepicker .ranges li:hover { background-color: var(--Surface-Surface-low); }
	html:not([data-theme]) .daterangepicker select.monthselect,
	html:not([data-theme]) .daterangepicker select.yearselect {
		background-color: var(--Surface-Surface-low);
		color: var(--Text-High);
		border-color: var(--Outline-Low);
	}
	html:not([data-theme]) .daterangepicker select.hourselect,
	html:not([data-theme]) .daterangepicker select.minuteselect,
	html:not([data-theme]) .daterangepicker select.secondselect,
	html:not([data-theme]) .daterangepicker select.ampmselect {
		background: var(--Surface-Surface-low);
		border-color: var(--Outline-Low);
		color: var(--Text-High);
	}
}

/* color-scheme: dark also forces the native date-picker popup and calendar chrome dark. */
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="month"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
	html:not([data-theme]) input[type="date"],
	html:not([data-theme]) input[type="datetime-local"],
	html:not([data-theme]) input[type="time"],
	html:not([data-theme]) input[type="month"] { color-scheme: dark; }
}

/* Dark: darken skeleton loader imgs (src has "sk"+"ton", not skipbutton); img-only so inline svgs unaffected */
html[data-theme="dark"] .u-ph-item img,
html[data-theme="dark"] img[src*="sk" i][src*="ton" i]:not([src*="button" i]) { filter: brightness(0.15); }
@media (prefers-color-scheme: dark) {
	html:not([data-theme]) .u-ph-item img,
	html:not([data-theme]) img[src*="sk" i][src*="ton" i]:not([src*="button" i]) { filter: brightness(0.15); }
}

/* Bootstrap pins [readonly] to #eee, which never flips — override to Surface-highest. */
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] .form-control[disabled] {
	background-color: var(--Surface-Surface-high);
	color: var(--Text-Low);
}

/* ── Dark (system preference, no manual override) ── */
/* Hex, not var(): surface tokens cascade to .cl-page in system-dark, not to :root. */
@media (prefers-color-scheme: dark) {
	html:not([data-theme]) .form-control[readonly],
	html:not([data-theme]) .form-control[disabled] {
		background-color: #283239; /* --Surface-Surface-high dark */
		color: #808A92; /* --Text-Low dark */
	}
}

/* Bootstrap 3 safety net — flips its hardcoded light defaults; semantic + page rules still win. */
/* Surfaces — containers that default to #fff */
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .panel-default,
html[data-theme="dark"] .list-group-item {
	background-color: var(--Surface-Surface-highest);
	color: var(--Text-High);
	border-color: var(--Outline-Low);
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { border-color: var(--Outline-Low); }
html[data-theme="dark"] .panel-default > .panel-heading,
html[data-theme="dark"] .popover-title,
html[data-theme="dark"] .well {
	background-color: var(--Surface-Surface-low);
	color: var(--Text-High);
	border-color: var(--Outline-Low);
}
/* Dropdown menu items — idle recedes, hover lifts, selected stays prominent */
html[data-theme="dark"] .dropdown-menu > li > a,
html[data-theme="dark"] .dropdown-menu > li > a:focus {color: var(--Dropdown-Item-Text);text-shadow: none;}
html[data-theme="dark"] .dropdown-menu > li > a:hover { background-color: var(--Dropdown-Item-Bg-Hover); color: var(--Dropdown-Item-Text-Hover); }
html[data-theme="dark"] .dropdown-menu > .active > a,
html[data-theme="dark"] .dropdown-menu > .active > a:hover { background-color: var(--Dropdown-Item-Bg-Selected); color: var(--Dropdown-Item-Text-Selected); }
html[data-theme="dark"] .dropdown-header { color: var(--Text-Low); }
html[data-theme="dark"] .dropdown-menu .divider { background-color: var(--Outline-Low); }
/* Form controls (base) — [readonly]/[disabled] handled separately above */
html[data-theme="dark"] .form-control {
	background-color: var(--Surface-Surface-highest);
	color: var(--Text-High);
	border-color: var(--Outline-Low);
}
html[data-theme="dark"] .input-group-addon {
	background-color: var(--Surface-Surface-highest);
	color: var(--Text-Medium);
	border-color: var(--Outline-Low);
}
/* Tables */
html[data-theme="dark"] .table {color: var(--Text-High);background: var(--Surface-Surface-highest);}
html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] .table > thead > tr > td,
html[data-theme="dark"] .table > tbody > tr > th,
html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] .table > tfoot > tr > th,
html[data-theme="dark"] .table > tfoot > tr > td,
html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered > thead > tr > th,
html[data-theme="dark"] .table-bordered > tbody > tr > td { border-color: var(--Outline-Low); }
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--Surface-Surface-low); }
html[data-theme="dark"] .table-hover > tbody > tr:hover { background-color: var(--Surface-Surface-low); }
/* Nav tabs */
html[data-theme="dark"] .nav-tabs { border-bottom-color: var(--Outline-Low); }
html[data-theme="dark"] .nav-tabs > li.active > a,
html[data-theme="dark"] .nav-tabs > li.active > a:hover,
html[data-theme="dark"] .nav-tabs > li.active > a:focus {
	background-color: var(--Surface-Surface-highest);
	color: var(--Text-High);
	border-color: var(--Outline-Low) var(--Outline-Low) transparent;
}
/* Popover arrow: inner is #fff, outer rgba(0,0,0,.25) — both need flipping per direction. */
html[data-theme="dark"] .popover.top > .arrow:after    { border-top-color: var(--Surface-Surface-highest); }
html[data-theme="dark"] .popover.right > .arrow:after  { border-right-color: var(--Surface-Surface-highest); }
html[data-theme="dark"] .popover.bottom > .arrow:after { border-bottom-color: var(--Surface-Surface-highest); }
html[data-theme="dark"] .popover.left > .arrow:after   { border-left-color: var(--Surface-Surface-highest); }
html[data-theme="dark"] .popover.top > .arrow    { border-top-color: var(--Outline-Low); }
html[data-theme="dark"] .popover.right > .arrow  { border-right-color: var(--Outline-Low); }
html[data-theme="dark"] .popover.bottom > .arrow { border-bottom-color: var(--Outline-Low); }
html[data-theme="dark"] .popover.left > .arrow   { border-left-color: var(--Outline-Low); }
/* Dropdown caret (forced #000 → invisible on dark). Tooltip arrow (#000) left — matches the intentional inverted tooltip. */
html[data-theme="dark"] .caret { border-top-color: var(--Text-Medium) !important; }
/* Misc chrome */
html[data-theme="dark"] .close { color: var(--Text-High); text-shadow: none; opacity: .7; }
html[data-theme="dark"] .breadcrumb { background-color: var(--Surface-Surface-low); }
html[data-theme="dark"] hr { border-top-color: var(--Outline-Low); }

/* btn-default — neutral white button (#fff/#333/#ccc) → flips. Semantic btns (.btn-primary etc.) left alone. */
html[data-theme="dark"] .btn-default {
	background-color: var(--Surface-Surface-highest);
	color: var(--Text-High);
	border-color: var(--Outline-Low);
}
/* states BS sets to #e6e6e6: focus / hover / active / pressed / open dropdown-toggle */
html[data-theme="dark"] .btn-default.focus,
html[data-theme="dark"] .btn-default:focus,
html[data-theme="dark"] .btn-default:hover,
html[data-theme="dark"] .btn-default.active,
html[data-theme="dark"] .btn-default:active,
html[data-theme="dark"] .open > .dropdown-toggle.btn-default { background-color: var(--Surface-Surface-low); color: var(--Text-High); border-color: var(--Outline-Low); }
/* states BS sets to #d4d4d4: active+hover/focus, open-toggle+hover/focus (more pressed) */
html[data-theme="dark"] .btn-default.active.focus,
html[data-theme="dark"] .btn-default.active:focus,
html[data-theme="dark"] .btn-default.active:hover,
html[data-theme="dark"] .btn-default:active.focus,
html[data-theme="dark"] .btn-default:active:focus,
html[data-theme="dark"] .btn-default:active:hover,
html[data-theme="dark"] .open > .dropdown-toggle.btn-default.focus,
html[data-theme="dark"] .open > .dropdown-toggle.btn-default:focus,
html[data-theme="dark"] .open > .dropdown-toggle.btn-default:hover { background-color: var(--Surface-Surface-high); color: var(--Text-High); border-color: var(--Outline-High); }
/* disabled — BS keeps it #fff; match the base surface (opacity handles the dimming) */
html[data-theme="dark"] .btn-default.disabled,
html[data-theme="dark"] .btn-default[disabled],
html[data-theme="dark"] fieldset[disabled] .btn-default { background-color: var(--Surface-Surface-highest); color: var(--Text-Low); border-color: var(--Outline-Low); }
/* Pagination + pager (white links, #ddd border, #eee hover) */
html[data-theme="dark"] .pagination > li > a,
html[data-theme="dark"] .pagination > li > span,
html[data-theme="dark"] .pager li > a,
html[data-theme="dark"] .pager li > span {
	background-color: var(--Surface-Surface-highest);
	color: var(--Text-High);
	border-color: var(--Outline-Low);
}
html[data-theme="dark"] .pagination > li > a:hover,
html[data-theme="dark"] .pagination > li > a:focus,
html[data-theme="dark"] .pager li > a:hover { background-color: var(--Surface-Surface-low); border-color: var(--Outline-Low); }
html[data-theme="dark"] .pagination > .disabled > a,
html[data-theme="dark"] .pagination > .disabled > span { background-color: var(--Surface-Surface-low); color: var(--Text-Low); border-color: var(--Outline-Low); }
/* Progress track (#f5f5f5 → recessed surface) */
html[data-theme="dark"] .progress { background-color: var(--Surface-Surface-low); }
/* Default badge / label (grey #777 pill) */
html[data-theme="dark"] .badge { background-color: var(--Surface-Surface-high); color: var(--Text-High); }
html[data-theme="dark"] .label-default { background-color: var(--Surface-Surface-high); color: var(--Text-High); }
/* Nav (non-tab) hover, thumbnails, jumbotron, page-header */
html[data-theme="dark"] .nav > li > a:hover,
html[data-theme="dark"] .nav > li > a:focus { background-color: var(--Surface-Surface-low); }
html[data-theme="dark"] .thumbnail { background-color: var(--Surface-Surface-highest); border-color: var(--Outline-Low); }
html[data-theme="dark"] .jumbotron { background-color: var(--Surface-Surface-low); color: var(--Text-High); }
html[data-theme="dark"] .page-header { border-bottom-color: var(--Outline-Low); }
/* Code blocks (pre/code/kbd default light bg) */
html[data-theme="dark"] pre { background-color: var(--Surface-Surface-low); color: var(--Text-High); border-color: var(--Outline-Low); }
html[data-theme="dark"] code { background-color: var(--Surface-Surface-low); color: var(--Text-Error); }

/* MDL dark: brand checked controls to --Primary-Primary; flip material.min.css light surfaces/text/outlines. */

/* Checkbox / radio / switch checked = --Primary-Primary in both modes; !important ties MDL's own rule. */
.mdl-checkbox.is-checked .mdl-checkbox__box-outline { border-color: var(--Primary-Primary); }
.mdl-checkbox.is-checked .mdl-checkbox__tick-outline { background-color: var(--Primary-Primary); }
.mdl-radio.is-checked .mdl-radio__outer-circle { border-color: var(--Primary-Primary); }
.mdl-radio.is-checked .mdl-radio__inner-circle { background: var(--Primary-Primary); }
.mdl-switch.is-checked .mdl-switch__thumb { background: var(--Primary-Primary); }
.mdl-switch.is-checked .mdl-switch__track {background: var(--Surface-Primary);}

/* --- MDL dark overrides (manual [data-theme=dark]) --- */
/* Elevated surfaces: dialog / menu / card (white) -> highest surface */
html[data-theme="dark"] .mdl-dialog,
html[data-theme="dark"] .mdl-menu,
html[data-theme="dark"] .mdl-card { background-color: var(--Surface-Surface-highest); color: var(--Text-High); }
html[data-theme="dark"] .mdl-dialog__title { color: var(--Text-High); }
html[data-theme="dark"] .mdl-dialog__content { color: var(--Text-Medium); }
/* List item text (rgba(0,0,0,.87)) + hover */
html[data-theme="dark"] .mdl-list__item { color: var(--Text-High); }
html[data-theme="dark"] .mdl-list__item:hover { background-color: var(--Surface-Surface-low); }
/* Textfield: input text/underline + label (rgba(0,0,0,.12)/.26) */
html[data-theme="dark"] .mdl-textfield__input { color: var(--Text-High); border-bottom-color: var(--Outline-Low); }
html[data-theme="dark"] .mdl-textfield__label { color: var(--Text-Medium); }
/* Unchecked outlines (rgba(0,0,0,.54)) would vanish on dark -> visible outline */
html[data-theme="dark"] .mdl-checkbox__box-outline,
html[data-theme="dark"] .mdl-radio__outer-circle { border-color: var(--Outline-Low); }
/* Switch mirrors .ba-switch; :not() guards keep .project__toggle green and let disabled beat checked. */
html[data-theme="dark"] .mdl-switch__track {
	background: var(--Surface-Surface-high);
	box-shadow: inset 0 0 0 1px var(--Outline-Medium);
}
html[data-theme="dark"] .mdl-switch__thumb { background: var(--Base-Colors-Base-White); }
html[data-theme="dark"] .mdl-switch.is-checked:not(.project__toggle):not(.is-disabled) .mdl-switch__track {
	background: var(--Primary-Primary);
	box-shadow: inset 0 0 0 1px var(--Primary-Primary);
}
html[data-theme="dark"] .mdl-switch.is-checked:not(.project__toggle):not(.is-disabled) .mdl-switch__thumb { background: var(--Base-Colors-Base-White); }
html[data-theme="dark"] .mdl-switch.is-disabled .mdl-switch__track { background: var(--Surface-Surface-disabled); }
html[data-theme="dark"] .mdl-switch.is-disabled .mdl-switch__thumb { background: var(--Icons-Disabled); }

@media (prefers-color-scheme: dark) {
	html:not([data-theme]) .mdl-dialog,
	html:not([data-theme]) .mdl-menu,
	html:not([data-theme]) .mdl-card { background-color: var(--Surface-Surface-highest); color: var(--Text-High); }
	html:not([data-theme]) .mdl-dialog__title { color: var(--Text-High); }
	html:not([data-theme]) .mdl-dialog__content { color: var(--Text-Medium); }
	html:not([data-theme]) .mdl-list__item { color: var(--Text-High); }
	html:not([data-theme]) .mdl-list__item:hover { background-color: var(--Surface-Surface-low); }
	html:not([data-theme]) .mdl-textfield__input { color: var(--Text-High); border-bottom-color: var(--Outline-Low); }
	html:not([data-theme]) .mdl-textfield__label { color: var(--Text-Medium); }
	html:not([data-theme]) .mdl-checkbox__box-outline,
	html:not([data-theme]) .mdl-radio__outer-circle { border-color: var(--Outline-Low); }
	html:not([data-theme]) .mdl-switch__track {
		background: var(--Surface-Surface-high);
		box-shadow: inset 0 0 0 1px var(--Outline-Medium);
	}
	html:not([data-theme]) .mdl-switch__thumb { background: var(--Base-Colors-Base-White); }
	html:not([data-theme]) .mdl-switch.is-checked:not(.project__toggle):not(.is-disabled) .mdl-switch__track {
		background: var(--Primary-Primary);
		box-shadow: inset 0 0 0 1px var(--Primary-Primary);
	}
	html:not([data-theme]) .mdl-switch.is-checked:not(.project__toggle):not(.is-disabled) .mdl-switch__thumb { background: var(--Base-Colors-Base-White); }
	html:not([data-theme]) .mdl-switch.is-disabled .mdl-switch__track { background: var(--Surface-Surface-disabled); }
	html:not([data-theme]) .mdl-switch.is-disabled .mdl-switch__thumb { background: var(--Icons-Disabled); }
}

/* Select2 dark: flip select2.min.css light defaults; align result hover/selected to the dropdown standard. */
/* Closed box + dropdown menu — surfaces & borders */
html[data-theme="dark"] .select2-selection--single,
html[data-theme="dark"] .select2-selection--multiple,
html[data-theme="dark"] .select2-dropdown { background-color: var(--Surface-Surface-highest); border-color: var(--Outline-Low); }
html[data-theme="dark"] .select2-selection--single .select2-selection__rendered { color: var(--Text-High); }
html[data-theme="dark"] .select2-selection__placeholder { color: var(--Text-Low); }
html[data-theme="dark"] .select2-selection--single .select2-selection__arrow b { border-top-color: var(--Text-Medium); }
html[data-theme="dark"] .select2-container--open .select2-selection__arrow b { border-bottom-color: var(--Text-Medium); }
html[data-theme="dark"] .select2-search__field { color: var(--Text-High); }
html[data-theme="dark"] .select2-search--dropdown .select2-search__field { border-color: var(--Outline-Low); background-color: var(--Surface-Surface-highest); }
/* Disabled */
html[data-theme="dark"] .select2-container--disabled .select2-selection--single,
html[data-theme="dark"] .select2-container--disabled .select2-selection--multiple { background-color: var(--Surface-Surface-disabled); }
/* Multi-select chips (#e4e4e4) */
html[data-theme="dark"] .select2-selection--multiple .select2-selection__choice { background-color: var(--Surface-Surface-low); border-color: var(--Outline-Low); color: var(--Text-High); }
html[data-theme="dark"] .select2-selection--multiple .select2-selection__choice__remove { color: var(--Text-Low); }
html[data-theme="dark"] .select2-selection--multiple .select2-selection__choice__remove:hover { color: var(--Text-High); }
/* Results — text + hover/selected per the dropdown standard */
.select2-results__option { color: var(--Dropdown-Item-Text); }
/* Follows the dropdown standard in both modes; !important beats select2's own colours whatever the load order. */
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--Surface-Surface-background) !important; color: var(--Text-High) !important; }
.select2-container--default .select2-results__option[aria-selected=true] { background-color: var(--Surface-Primary) !important; color: var(--Primary-Primary) !important; }

/* Selected/active item (dark only): text + mono icon → white; light unchanged. */
/* select2 selected option */
html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true],
html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true] .material-icons,
html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true] .material-symbols-rounded { color: #fff !important; }
/* Secondary left-nav current entity → white (img already flipped) */
html[data-theme="dark"] .ap__siderbar--new ul li.current>a>span,
html[data-theme="dark"] .ap__siderbar--new.reports-link ul li.current .material-symbols-rounded,
html[data-theme="dark"] .ap__siderbar--new.reports-link ul li.current .side-bar-count { color: #fff !important; }
/* .ap__dropdown--menu active item */
html[data-theme="dark"] .ap__dropdown--menu>li.active>a,
html[data-theme="dark"] .ap__dropdown--menu>li.active>button,
html[data-theme="dark"] .ap__dropdown--menu>li.active>a .material-icons,
html[data-theme="dark"] .ap__dropdown--menu>li.active>a .material-symbols-rounded,
html[data-theme="dark"] .ap__dropdown--menu>li.active>button .material-icons { color: #fff !important; }
/* Active top-tab (tr__tabs) label → white in dark via token; light keeps blue */
html[data-theme="dark"] .bug__tabs.ap__tabs.tr__tabs.ap__tabs>li.active>a { --tab-active-text: var(--Base-Colors-Base-White); }
/* Static titles use .u-entity-title; these are state-based tab text that cannot be a static class. */
html[data-theme="dark"] .u-entity-title,
html[data-theme="dark"] .tc__content .bug__tabs.ap__tabs>li.active>a,
html[data-theme="dark"] .container-fluid.ps__container .ps__tabs li.active a,
html[data-theme="dark"] .int__cards-nav>li.active>a,
html[data-theme="dark"] #sprint_testpert_nav li.active a,
html[data-theme="dark"] #sprint_testpert_nav li.active .tp__tabs-text,
html[data-theme="dark"] .uj__journey-preview.active .uj__journey-title {
	color: var(--Base-Colors-Base-White) !important;
}
/* jstree selected/hover text → white across all trees; beats the per-container rules. */
html[data-theme="dark"] .jstree-clicked,
html[data-theme="dark"] .jstree-hovered,
html[data-theme="dark"] .ap__folders.jstree-default-large .jstree-clicked,
html[data-theme="dark"] .ap__folders.jstree-default-large .jstree-anchor.jstree-hovered {
	color: var(--Base-Colors-Base-White) !important;
}
/* jstree folders: base inverts to white, idle folders dim — the more specific idle rule wins. */
html[data-theme="dark"] .ap__folders:not(.ap__file-suites).jstree-default-large .jstree-anchor>.jstree-icon {
	filter: brightness(0) invert(1);
}
html[data-theme="dark"] .ap__folders:not(.ap__file-suites).jstree-default-large .jstree-node:not(.jstree-open)>.jstree-anchor:not(.jstree-clicked)>.jstree-icon {
	filter: brightness(0.8);
}
/* jstree anchor hover: surface bg + white text; selected keeps its blue via its own !important. */
html[data-theme="dark"] .ap__folders.jstree-default-large .jstree-anchor:hover,
html[data-theme="dark"] .ap__folders.jstree-default-large .jstree-anchor.jstree-hovered {
	background-color: var(--Surface-Surface-background);
	color: var(--Base-Colors-Base-White) !important;
}
/* Neutralise the hover arrow cell (it inherited Surface-Primary); background only, so the arrow image survives. */
html[data-theme="dark"] .ap__folders.jstree-default-large .jstree-node:not(:has(> .jstree-clicked)):has(> .jstree-anchor:hover, > .jstree-icon:hover) > .jstree-icon {
	background-color: var(--Surface-Surface-background) !important;
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme]) .select2-selection--single,
	html:not([data-theme]) .select2-selection--multiple,
	html:not([data-theme]) .select2-dropdown { background-color: var(--Surface-Surface-highest); border-color: var(--Outline-Low); }
	html:not([data-theme]) .select2-selection--single .select2-selection__rendered { color: var(--Text-High); }
	html:not([data-theme]) .select2-selection__placeholder { color: var(--Text-Low); }
	html:not([data-theme]) .select2-selection--single .select2-selection__arrow b { border-top-color: var(--Text-Medium); }
	html:not([data-theme]) .select2-container--open .select2-selection__arrow b { border-bottom-color: var(--Text-Medium); }
	html:not([data-theme]) .select2-search__field { color: var(--Text-High); }
	html:not([data-theme]) .select2-search--dropdown .select2-search__field { border-color: var(--Outline-Low); background-color: var(--Surface-Surface-highest); }
	html:not([data-theme]) .select2-container--disabled .select2-selection--single,
	html:not([data-theme]) .select2-container--disabled .select2-selection--multiple { background-color: var(--Surface-Surface-disabled); }
	html:not([data-theme]) .select2-selection--multiple .select2-selection__choice { background-color: var(--Surface-Surface-low); border-color: var(--Outline-Low); color: var(--Text-High); }
	html:not([data-theme]) .select2-selection--multiple .select2-selection__choice__remove { color: var(--Text-Low); }
	html:not([data-theme]) .select2-selection--multiple .select2-selection__choice__remove:hover { color: var(--Text-High); }
	html:not([data-theme]) .select2-results__option { color: var(--Dropdown-Item-Text); }
}

/* dark base text flip: un-tokenized text inherits Bootstrap body #333 (invisible on dark) */
html[data-theme="dark"] body {
	color: var(--Text-High);
}

/* DataTables paints .paginate_button with a light gradient that never dark-themes — theme the surface. */
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
	background: var(--Surface-Surface-highest) !important;
	border-color: var(--Outline-Low) !important;
	color: var(--Text-High) !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current {
	background: var(--Primary-Primary) !important;
	border-color: var(--Primary-Primary) !important;
}