/* HUNT dark palette (flag dark_mode). Loaded right after style.bundle.css by _LayoutHead and _AuthLayout, so these
   [data-bs-theme=dark] variables replace Metronic's own. Light mode is untouched.

   Modelled on Azure DevOps' dark theme (the owner's pick, 2026-10-09), held to HUNT's readability floor:
   - surfaces are Azure DevOps' navy-slate and get lighter as they rise: page and header #1A2029 < cards, inputs,
     menus and dropdowns #282D36 < hovers and solid inputs #2E333B;
   - body text is off-white #EBEDF0 (11.8:1 on a card), headings #F4F4F4, muted text #A6ABB3 (6:1 on a card;
     Azure DevOps' own dimmest gray is 4.3:1, under WCAG AA);
   - text-colored accents (links, icons, text-primary, badges, alerts) are light tints at 7:1 (WCAG AAA) or more on
     every surface above and on their own "-light" tint: blue #98C6FF as in Azure DevOps, its red, green and amber
     lifted until they reach 7:1;
   - the primary FILL (btn-primary, badge-primary, bg-primary, checked boxes, the active tab) is Azure DevOps' solid
     #0078D4 with white text (4.5:1, AA), #0067B5 on hover. --bs-primary stays the light text blue everywhere else;
     the fill rule below swaps it on those elements only, so Metronic's rules that paint a fill from --bs-primary
     and --bs-primary-inverse pick up the solid blue.
   - other filled accents (btn-success, badge-danger, ...) are the light tint with dark ink (--bs-*-inverse).
   New CSS should keep using the theme variables (var(--bs-primary), --bs-gray-*, --bs-*-light, bg-body ...), so it
   picks this palette up. Text on a var(--bs-primary) fill uses var(--bs-primary-inverse), never #fff; a new element
   filled with the primary color joins the fill rule's list. */

[data-bs-theme=dark] {
	/* Surfaces */
	--bs-page-bg: #1A2029;
	--bs-app-blank-bg: #1A2029;
	--bs-header-bg-color: #1A2029;
	--bs-header-border-color: #2C323A;
	--bs-body-bg: #282D36;
	--bs-body-bg-rgb: 40, 45, 54;
	--bs-secondary-bg: #383D45;
	--bs-secondary-bg-rgb: 56, 61, 69;
	--bs-tertiary-bg: #2E333B;
	--bs-tertiary-bg-rgb: 46, 51, 59;
	--bs-root-card-border-color: #343943;
	--bs-border-color: #383D45;
	--bs-border-dashed-color: #484D54;
	--bs-dropdown-bg: #282D36;
	--bs-menu-dropdown-bg-color: #282D36;
	--bs-drawer-bg-color: #282D36;
	--bs-code-bg: #2E333B;
	--bs-symbol-label-bg: #2E333B;
	--bs-table-striped-bg: rgba(255, 255, 255, 0.03);
	--bs-scrollbar-color: #383D45;
	--bs-scrollbar-hover-color: #484D54;
	--bs-engage-btn-bg: #383D45;
	--bs-engage-btn-border-color: #383D45;

	/* Grays: 100-400 are fills and borders, 500-900 are text (500 = muted, 900 = body) */
	--bs-gray-100: #2E333B;
	--bs-gray-100-rgb: 46, 51, 59;
	--bs-gray-200: #383D45;
	--bs-gray-200-rgb: 56, 61, 69;
	--bs-gray-300: #484D54;
	--bs-gray-300-rgb: 72, 77, 84;
	--bs-gray-400: #5F6369;
	--bs-gray-400-rgb: 95, 99, 105;
	--bs-gray-500: #A6ABB3;
	--bs-gray-500-rgb: 166, 171, 179;
	--bs-gray-600: #AEB2B8;
	--bs-gray-600-rgb: 174, 178, 184;
	--bs-gray-700: #C0C2C6;
	--bs-gray-700-rgb: 192, 194, 198;
	--bs-gray-800: #D1D2D4;
	--bs-gray-800-rgb: 209, 210, 212;
	--bs-gray-900: #EBEDF0;
	--bs-gray-900-rgb: 235, 237, 240;
	--bs-text-gray-100: #2E333B;
	--bs-text-gray-200: #383D45;
	--bs-text-gray-300: #484D54;
	--bs-text-gray-400: #5F6369;
	--bs-text-gray-500: #A6ABB3;
	--bs-text-gray-600: #AEB2B8;
	--bs-text-gray-700: #C0C2C6;
	--bs-text-gray-800: #D1D2D4;
	--bs-text-gray-900: #EBEDF0;
	--bs-text-muted: #A6ABB3;
	--bs-menu-heading-color: #A6ABB3;
	--bs-symbol-label-color: #D1D2D4;
	--bs-engage-btn-color: #D1D2D4;
	--bs-engage-btn-color-active: #D1D2D4;
	--bs-engage-btn-icon-color: #AEB2B8;
	--bs-bullet-bg-color: #5F6369;
	--bs-rating-color-default: #5F6369;

	/* Text */
	--bs-body-color: #EBEDF0;
	--bs-body-color-rgb: 235, 237, 240;
	--bs-heading-color: #F4F4F4;
	--bs-emphasis-color: #F4F4F4;
	--bs-emphasis-color-rgb: 244, 244, 244;
	--bs-secondary-color: rgba(235, 237, 240, 0.8);
	--bs-secondary-color-rgb: 235, 237, 240;
	--bs-tertiary-color: rgba(235, 237, 240, 0.65);
	--bs-tertiary-color-rgb: 235, 237, 240;
	--bs-highlight-color: #F4F4F4;
	--bs-text-white: #F4F4F4;
	--bs-code-color: #F0A3D2;

	/* Primary (blue) as text: links, icons, text-primary, light badges and alerts. The solid fill is further down. */
	--bs-primary: #98C6FF;
	--bs-primary-rgb: 152, 198, 255;
	--bs-primary-active: #B8D8FF;
	--bs-primary-light: #1E3350;
	--bs-primary-inverse: #0A1A2E;
	--bs-primary-clarity: rgba(152, 198, 255, 0.2);
	--bs-text-primary: #98C6FF;
	--bs-primary-text-emphasis: #B8D8FF;
	--bs-primary-bg-subtle: #1E3350;
	--bs-primary-border-subtle: #376091;
	--bs-link-color: #98C6FF;
	--bs-link-color-rgb: 152, 198, 255;
	--bs-link-hover-color: #B8D8FF;
	--bs-link-hover-color-rgb: 184, 216, 255;
	--bs-component-hover-color: #98C6FF;
	--bs-component-hover-bg: #2E333B;
	--bs-menu-link-color-hover: #98C6FF;
	--bs-menu-link-color-show: #98C6FF;
	--bs-menu-link-color-here: #98C6FF;
	--bs-menu-link-color-active: #98C6FF;
	--bs-menu-link-bg-color-hover: #2E333B;
	--bs-menu-link-bg-color-show: #2E333B;
	--bs-menu-link-bg-color-here: #2E333B;
	--bs-menu-link-bg-color-active: #2E333B;

	/* Primary as a solid fill with white text (Azure DevOps' communication blue) */
	--bs-component-active-bg: #0078D4;
	--bs-component-active-color: #FFFFFF;
	--bs-component-checked-bg: #0078D4;
	--bs-component-checked-color: #FFFFFF;
	--bs-scrolltop-bg-color: #0078D4;
	--bs-scrolltop-bg-color-hover: #0067B5;
	--bs-scrolltop-icon-color: #FFFFFF;
	--bs-scrolltop-icon-color-hover: #FFFFFF;
	--bs-ribbon-label-bg: #0078D4;
	--bs-ribbon-label-border-color: #0067B5;

	/* Info (purple; Azure DevOps has none, so HUNT's) */
	--bs-info: #CDBBFF;
	--bs-info-rgb: 205, 187, 255;
	--bs-info-active: #DCCFFF;
	--bs-info-light: #2E2A47;
	--bs-info-inverse: #1C1033;
	--bs-info-clarity: rgba(205, 187, 255, 0.2);
	--bs-text-info: #CDBBFF;
	--bs-info-text-emphasis: #DCCFFF;
	--bs-info-bg-subtle: #2E2A47;
	--bs-info-border-subtle: #5B4E8C;

	/* Success (Azure DevOps' yellow-green, lifted to 7:1) */
	--bs-success: #A6D06E;
	--bs-success-rgb: 166, 208, 110;
	--bs-success-active: #B9DC8A;
	--bs-success-light: #2B331E;
	--bs-success-inverse: #14240A;
	--bs-success-clarity: rgba(166, 208, 110, 0.2);
	--bs-text-success: #A6D06E;
	--bs-success-text-emphasis: #B9DC8A;
	--bs-success-bg-subtle: #2B331E;
	--bs-success-border-subtle: #4E6B2A;
	--bs-form-valid-color: #A6D06E;
	--bs-form-valid-border-color: #A6D06E;

	/* Warning (Azure DevOps' amber) */
	--bs-warning: #FDB913;
	--bs-warning-rgb: 253, 185, 19;
	--bs-warning-active: #FDC94A;
	--bs-warning-light: #37311E;
	--bs-warning-inverse: #2A1F00;
	--bs-warning-clarity: rgba(253, 185, 19, 0.2);
	--bs-text-warning: #FDB913;
	--bs-warning-text-emphasis: #FDC94A;
	--bs-warning-bg-subtle: #37311E;
	--bs-warning-border-subtle: #7A5C10;
	--bs-highlight-bg: #4D3F12;

	/* Danger (Azure DevOps' red, lifted to 7:1) */
	--bs-danger: #FDAEB4;
	--bs-danger-rgb: 253, 174, 180;
	--bs-danger-active: #FEC2C7;
	--bs-danger-light: #3F282F;
	--bs-danger-inverse: #3A0814;
	--bs-danger-clarity: rgba(253, 174, 180, 0.2);
	--bs-text-danger: #FDAEB4;
	--bs-danger-text-emphasis: #FEC2C7;
	--bs-danger-bg-subtle: #3F282F;
	--bs-danger-border-subtle: #8A3F4E;
	--bs-form-invalid-color: #FDAEB4;
	--bs-form-invalid-border-color: #FDAEB4;

	/* Neutral buttons and badges (secondary / light / dark): Azure DevOps' white-on-slate buttons */
	--bs-light: #383D45;
	--bs-light-rgb: 56, 61, 69;
	--bs-light-active: #42474F;
	--bs-light-light: #2E333B;
	--bs-light-inverse: #D1D2D4;
	--bs-light-clarity: rgba(56, 61, 69, 0.2);
	--bs-text-light: #383D45;
	--bs-secondary: #484D54;
	--bs-secondary-rgb: 72, 77, 84;
	--bs-secondary-active: #5F6369;
	--bs-secondary-light: #383D45;
	--bs-secondary-inverse: #F4F4F4;
	--bs-secondary-clarity: rgba(72, 77, 84, 0.2);
	--bs-text-secondary: #484D54;
	--bs-dark: #383D45;
	--bs-dark-rgb: 56, 61, 69;
	--bs-dark-active: #484D54;
	--bs-dark-light: #2E333B;
	--bs-dark-inverse: #F4F4F4;
	--bs-dark-clarity: rgba(56, 61, 69, 0.2);
	--bs-text-dark: #383D45;
	--bs-light-bg-subtle: #2E333B;
	--bs-light-border-subtle: #484D54;
	--bs-dark-bg-subtle: #1A2029;
	--bs-dark-border-subtle: #383D45;
	--bs-secondary-bg-subtle: #383D45;
	--bs-secondary-border-subtle: #5F6369;
}

/* The primary fill: on these elements --bs-primary is the solid blue and its inverse white, so Metronic's rules
   (background var(--bs-primary), color var(--bs-primary-inverse), hover var(--bs-primary-active)) paint the fill. */
[data-bs-theme=dark] :is(
	.btn.btn-primary,
	.btn-check:active + .btn.btn-light-primary, .btn-check:checked + .btn.btn-light-primary,
	.btn.btn-light-primary.active, .btn.btn-light-primary.show,
	.btn.btn-light-primary:active:not(.btn-active), .btn.btn-light-primary:focus:not(.btn-active), .btn.btn-light-primary:hover:not(.btn-active),
	.btn-check:active + .btn.btn-active-primary, .btn-check:checked + .btn.btn-active-primary,
	.btn.btn-active-primary.active, .btn.btn-active-primary.show,
	.btn.btn-active-primary:active:not(.btn-active), .btn.btn-active-primary:focus:not(.btn-active), .btn.btn-active-primary:hover:not(.btn-active),
	.badge-primary:not(.badge-outline),
	.bg-primary,
	.form-check-input:checked,
	.brain-bubble, .brain-cite:hover, .brain-cite:focus,
	#userGuideNav .nav-link.active, #apiDocsNav .nav-link.active
) {
	--bs-primary: #0078D4;
	--bs-primary-rgb: 0, 120, 212;
	--bs-primary-active: #0067B5;
	--bs-primary-inverse: #FFFFFF;
}

/* Popovers, tooltips and toasts sit on the raised surface with a visible edge. */
[data-bs-theme=dark] .popover:not(.popover-inverse) {
	--bs-popover-bg: #2C323A;
	--bs-popover-border-color: #383D45;
	--bs-popover-header-bg: #2C323A;
	--bs-popover-header-border-color: #383D45;
	--bs-popover-body-color: #EBEDF0;
}

[data-bs-theme=dark] .tooltip:not(.tooltip-inverse) {
	--bs-tooltip-bg: #2C323A;
	--bs-tooltip-color: #EBEDF0;
}

[data-bs-theme=dark] .toast {
	--bs-toast-bg: #2C323A;
	--bs-toast-header-bg: #2C323A;
	--bs-toast-header-border-color: #383D45;
}

/* Bootstrap fixes the checked box color (#1b84ff); follow the solid fill (white tick, from Bootstrap). */
[data-bs-theme=dark] .form-check-input:checked {
	background-color: var(--bs-primary);
	border-color: var(--bs-primary);
}

[data-bs-theme=dark] .form-check.form-check-success .form-check-input:checked { border-color: var(--bs-success); }
[data-bs-theme=dark] .form-check.form-check-danger .form-check-input:checked { border-color: var(--bs-danger); }
[data-bs-theme=dark] .form-check.form-check-warning .form-check-input:checked { border-color: var(--bs-warning); }

/* Inputs: a visible focus ring in the text blue, as Azure DevOps does, not a near-invisible border change. */
[data-bs-theme=dark] .form-control:focus,
[data-bs-theme=dark] .form-select:focus {
	border-color: #98C6FF;
	box-shadow: 0 0 0 0.2rem rgba(152, 198, 255, 0.35);
}

/* Metronic's dark btn-dark is a fixed gray pair; keep it on the palette. */
[data-bs-theme=dark] .btn.btn-dark,
[data-bs-theme=dark] .btn.btn-dark .svg-icon,
[data-bs-theme=dark] .btn.btn-dark i {
	color: #EBEDF0;
}

[data-bs-theme=dark] .btn.btn-dark {
	background-color: #484D54;
}