/* =============================================================================
   Admin console dark theme.

   Loaded LAST in base_app.html / base_auth.html. Every rule below the two
   both-theme sections (header toggle, profile-panel picker) is scoped to
   html[data-theme="dark"] (set before first paint by
   partials/theme_head.html, flipped by assets/js/theme_toggle.js), so the light
   theme is untouched and these rules only need to out-rank the light ones —
   the extra attribute selector does that without new !important, except where
   the light rule itself is !important.

   Print stays light: the dark rules live inside @media screen.

   Palette (use the tokens, not raw hex, in anything new):
     --dk-bg         page background          --dk-text      body text
     --dk-surface    cards, header, sidebar   --dk-muted     secondary text
     --dk-surface-2  raised: dropdown/modal   --dk-faint     placeholders
     --dk-surface-3  hover / selected rows    --dk-border    hairlines
     --dk-input      form controls            --dk-border-2  stronger lines
   The light --sea-* tokens are re-pointed at these, so design.css rules that
   already use var(--sea-*) follow automatically.
   ========================================================================== */

/* --- Theme toggle button (both themes) ---------------------------------- */

.header-theme-toggle {
	list-style: none;
	margin-right: 0.5rem;
}

.header-theme-toggle .ki-theme-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--sea-secondary-soft);
	color: var(--sea-muted);
	cursor: pointer;
	transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease;
}

.header-theme-toggle .ki-theme-btn:hover {
	background: var(--sea-primary-soft);
	color: var(--sea-primary-deep);
	box-shadow: 0 0 0 4px rgba(0, 168, 255, 0.12);
}

.header-theme-toggle .ki-theme-btn:active {
	transform: scale(0.93);
}

.header-theme-toggle .ki-theme-btn i {
	font-size: 20px;
	line-height: 1;
}

/* One even cross-fade while switching, instead of every transition in the
   theme running at its own speed. */
html.ki-theme-switching,
html.ki-theme-switching *,
html.ki-theme-switching *::before,
html.ki-theme-switching *::after {
	transition: background-color .25s ease, color .25s ease, border-color .25s ease, fill .25s ease, stroke .25s ease !important;
}

@media (prefers-reduced-motion: reduce) {
	html.ki-theme-switching,
	html.ki-theme-switching * {
		transition: none !important;
	}
}

/* --- Theme picker in the profile panel (both themes) -----------------------
   Deliberately OUTSIDE the dark scope: the Light / Dark / System control is
   new markup (partials/app/profile_dropdown_app.html, [data-theme-set]) and
   needs its base look in light too. It is built on the --sea-* tokens, which
   theme_dark.css re-points, so the dark block further down only changes the
   track and the pressed segment. */

.ki-profile-menu .ki-theme-seg {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2px;
	margin: 0 0.65rem 0.25rem;
	padding: 3px;
	border: 1px solid var(--sea-border);
	border-radius: 12px;
	background: var(--sea-secondary-soft);
}

.ki-profile-menu .ki-theme-seg button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-width: 0;
	padding: 0.45rem 0.25rem;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--sea-muted);
	font: inherit;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.ki-profile-menu .ki-theme-seg button i {
	font-size: 15px;
	line-height: 1;
}

.ki-profile-menu .ki-theme-seg button:hover {
	color: var(--sea-text);
}

.ki-profile-menu .ki-theme-seg button[aria-pressed="true"] {
	background: var(--sea-surface);
	color: var(--sea-text);
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.ki-profile-menu .ki-theme-seg button[aria-pressed="true"] i {
	color: var(--sea-primary-deep);
}

.ki-profile-menu .ki-theme-seg button:focus-visible {
	outline: 2px solid var(--sea-primary);
	outline-offset: 1px;
}

/* --- Tokens --------------------------------------------------------------- */

@media screen {

html[data-theme="dark"] {
	color-scheme: dark;

	--dk-bg: #0e131a;
	--dk-surface: #151c25;
	--dk-surface-2: #1b2430;
	--dk-surface-3: #222d3b;
	--dk-input: #10171f;
	--dk-border: rgba(255, 255, 255, 0.08);
	--dk-border-2: rgba(255, 255, 255, 0.14);
	--dk-text: #e4ebf2;
	--dk-muted: #9aa8b7;
	--dk-faint: #6c7a89;
	--dk-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
	--dk-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
	--dk-link: #5cc8ff;
	--dk-link-hover: #8fd9ff;

	/* Tinted fills for status chips/alerts: low-alpha hue on the dark surface,
	   paired with a light ink of the same hue. */
	--dk-primary-fill: rgba(0, 168, 255, 0.14);
	--dk-primary-ink: #6fcfff;
	--dk-success-fill: rgba(46, 204, 113, 0.14);
	--dk-success-ink: #6ee7a8;
	--dk-warning-fill: rgba(240, 160, 32, 0.16);
	--dk-warning-ink: #f7c46a;
	--dk-danger-fill: rgba(225, 78, 90, 0.16);
	--dk-danger-ink: #ff8f99;
	--dk-info-fill: rgba(56, 189, 248, 0.14);
	--dk-info-ink: #7dd3fc;
	--dk-neutral-fill: rgba(148, 163, 184, 0.14);
	--dk-neutral-ink: #cbd5e1;

	/* design.css tokens */
	--sea-primary: #1fb2ff;
	--sea-primary-deep: var(--dk-link);
	/* The active hist-window pill keeps the bright fill under its dark ink. */
	--sea-primary-fill: var(--sea-primary);
	--sea-primary-soft: var(--dk-primary-fill);
	--sea-primary-mist: rgba(0, 168, 255, 0.08);
	--sea-secondary: var(--dk-text);
	--sea-secondary-soft: var(--dk-surface-2);
	--sea-surface: var(--dk-surface);
	--sea-surface-strong: var(--dk-surface-2);
	--sea-text: var(--dk-text);
	--sea-muted: var(--dk-muted);
	--sea-border: var(--dk-border);
	--sea-shadow: var(--dk-shadow);
	--sea-danger-ink: var(--dk-danger-ink);
	--sea-warning-ink: var(--dk-warning-ink);

	/* Bootstrap 5.3 (data-bs-theme="dark" sets its own; these pin them to the
	   console palette so Bootstrap components and theme surfaces match). */
	--bs-body-bg: var(--dk-bg);
	--bs-body-bg-rgb: 14, 19, 26;
	--bs-body-color: var(--dk-text);
	--bs-body-color-rgb: 228, 235, 242;
	--bs-emphasis-color: #f4f8fb;
	--bs-secondary-color: var(--dk-muted);
	--bs-tertiary-color: var(--dk-faint);
	--bs-secondary-bg: var(--dk-surface-2);
	--bs-tertiary-bg: var(--dk-surface-2);
	--bs-border-color: var(--dk-border-2);
	--bs-border-color-translucent: var(--dk-border);
	--bs-heading-color: var(--dk-text);
	--bs-link-color: var(--dk-link);
	--bs-link-hover-color: var(--dk-link-hover);
	--bs-link-color-rgb: 92, 200, 255;
	--bs-link-hover-color-rgb: 143, 217, 255;
	--bs-card-bg: var(--dk-surface);
	--bs-card-cap-bg: transparent;
	--bs-card-border-color: var(--dk-border);
	--bs-light-rgb: 34, 45, 59;
	--bs-white-rgb: 21, 28, 37;
	--bs-dark-rgb: 228, 235, 242;

	/* ki-admin theme (style.css) — body.dark sets these too; repeated on html
	   so elements outside body rules (and the auth shell) agree. */
	--bodybg-color: var(--dk-bg);
	--font-color: var(--dk-text);
	--border_color: var(--dk-border-2);
	--light-gray: var(--dk-surface-2);
	--link-color: var(--dk-text);
	--box-shadow: var(--dk-shadow-sm);
	--hover-shadow: var(--dk-shadow);
}

/* ki-admin's body.dark block redefines these on body, which out-scopes html;
   pin them back to the console palette. --white is an "r, g, b" triple that
   the theme uses as rgba(var(--white)) for card and panel surfaces. */
html[data-theme="dark"] body.dark {
	--white: 21, 28, 37;
	--bodybg-color: var(--dk-bg);
	--bs-body-bg: var(--dk-bg);
	--bs-body-color: var(--dk-text);
	--bs-secondary-color: var(--dk-muted);
	--bs-border-color: var(--dk-border-2);
	--bs-card-border-color: var(--dk-border);
	--bs-form-control-bg: var(--dk-input);
	--bs-tertiary-bg: var(--dk-surface-2);
	--bs-card-color: var(--dk-text);
	--bs-list-group-color: var(--dk-text);
	--border_color: var(--dk-border-2);
	--light-gray: var(--dk-surface-2);
	--font-color: var(--dk-text);
	--link-color: var(--dk-text);
}

/* --- Page canvas ------------------------------------------------------------ */

html[data-theme="dark"],
html[data-theme="dark"] body {
	background-color: var(--dk-bg);
}

html[data-theme="dark"] body.portal-theme {
	background:
		radial-gradient(circle at top right, rgba(0, 168, 255, 0.10), transparent 32%),
		linear-gradient(180deg, #0f151d 0%, var(--dk-bg) 60%, #0c1117 100%);
	background-attachment: fixed;
}

html[data-theme="dark"] body.auth-theme {
	background:
		radial-gradient(circle at top left, rgba(0, 168, 255, 0.16), transparent 36%),
		linear-gradient(135deg, #0f161f 0%, var(--dk-bg) 50%, #0b1016 100%);
}

html[data-theme="dark"] body.portal-theme,
html[data-theme="dark"] body.auth-theme,
html[data-theme="dark"] .app-wrapper {
	color: var(--dk-text);
}

html[data-theme="dark"] ::selection {
	background: rgba(0, 168, 255, 0.35);
	color: #fff;
}

/* Thin scrollbars that do not glow white on a dark page. */
html[data-theme="dark"] {
	scrollbar-color: #2c3846 transparent;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
	background-color: #2c3846;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
	background-color: transparent;
}

/* Header toggle on the dark canvas */
html[data-theme="dark"] .header-theme-toggle .ki-theme-btn:hover {
	color: #ffd56b;
	box-shadow: 0 0 0 4px rgba(255, 213, 107, 0.12);
}

} /* @media screen */

/* ==========================================================================
   Dark: Shared components (Bootstrap and ki-admin)
   ========================================================================== */

/* =============================================================================
   Dark theme: shared components.

   Bootstrap 5.3.0-alpha1 + ki-admin (style.css / responsive.css) components
   the console uses: palette knobs, text / background / border / shadow
   utilities, cards, tables, forms, buttons, badges, alerts, overlays
   (dropdown, modal, offcanvas, toast, tooltip, popover), navs, pagination,
   list group, accordion, breadcrumb, progress, code / kbd / mark, simplebar
   and the ApexCharts tooltip / menu chrome.

   Every rule is prefixed with html[data-theme="dark"] so it out-ranks the light
   rule it replaces (and is !important where that rule is). Bare element rules
   (code, kbd, mark, option) use :where(html[data-theme="dark"]) instead: they
   keep the light rule's specificity and win on load order alone, so a page's
   own `.foo code` or `.foo kbd` still beats them as it does in light.

   Two traps decide much of what is here:
   - ki-admin writes "white" as rgba(var(--white)), and its body.dark block
     turns --white into the dark surface, so white text on a solid fill
     (.bg-danger badge, .btn-info, solid alerts) silently goes dark-on-colour.
     Those are given white back explicitly.
   - Bootstrap's .shadow-* and overlay shadows are built from
     --bs-body-color-rgb, which would glow light on a dark page; they are
     replaced with the --dk-shadow tokens.
   ========================================================================== */

@media screen {

/* --- Palette knobs ----------------------------------------------------------- */

/* ki-admin's own colour triples. body.dark (style.css L230, responsive.css L97)
   sets them to a purple-grey / warm-grey palette that does not match the
   console tokens; these mirror the tokens as "r, g, b" so every
   rgba(var(--light|--dark|--secondary), a) in the theme lands on-palette:
     --light     = --dk-surface-3   (bg-light, btn-light, alert-light, tracks)
     --dark      = --dk-text        (text-dark, headings, ki "dark" ink)
     --secondary = --dk-muted       (text-secondary, ki hairlines at alpha)
   --bs-body-color-rgb: body.dark sets it to "#eaeaec", which is not a triple
   and voids every rgba(var(--bs-body-color-rgb)) (.text-body, for one).
   --bs-text-opacity: body.dark sets 0. */
html[data-theme="dark"] body.dark {
	--light: 34, 45, 59;
	--dark: 228, 235, 242;
	--secondary: 154, 168, 183;
	--bs-body-color-rgb: 228, 235, 242;
	--bs-text-opacity: 1;
}

/* Bootstrap 5.3 tints (bg-*-subtle, text-*-emphasis, border-*-subtle, alerts,
   list-group variants). Bootstrap's own [data-bs-theme=dark] values are near
   black navy / brown; these point them at the console's tinted pairs. alpha1
   names the ink --bs-*-text; the 5.3 final name --bs-*-text-emphasis is set
   too so a vendor bump keeps working. */
html[data-theme="dark"] {
	--bs-primary-bg-subtle: var(--dk-primary-fill);
	--bs-primary-text: var(--dk-primary-ink);
	--bs-primary-text-emphasis: var(--dk-primary-ink);
	--bs-primary-border-subtle: color-mix(in srgb, var(--dk-primary-ink) 32%, transparent);
	--bs-secondary-bg-subtle: var(--dk-neutral-fill);
	--bs-secondary-text: var(--dk-neutral-ink);
	--bs-secondary-text-emphasis: var(--dk-neutral-ink);
	--bs-secondary-border-subtle: var(--dk-border-2);
	--bs-success-bg-subtle: var(--dk-success-fill);
	--bs-success-text: var(--dk-success-ink);
	--bs-success-text-emphasis: var(--dk-success-ink);
	--bs-success-border-subtle: color-mix(in srgb, var(--dk-success-ink) 32%, transparent);
	--bs-info-bg-subtle: var(--dk-info-fill);
	--bs-info-text: var(--dk-info-ink);
	--bs-info-text-emphasis: var(--dk-info-ink);
	--bs-info-border-subtle: color-mix(in srgb, var(--dk-info-ink) 32%, transparent);
	--bs-warning-bg-subtle: var(--dk-warning-fill);
	--bs-warning-text: var(--dk-warning-ink);
	--bs-warning-text-emphasis: var(--dk-warning-ink);
	--bs-warning-border-subtle: color-mix(in srgb, var(--dk-warning-ink) 32%, transparent);
	--bs-danger-bg-subtle: var(--dk-danger-fill);
	--bs-danger-text: var(--dk-danger-ink);
	--bs-danger-text-emphasis: var(--dk-danger-ink);
	--bs-danger-border-subtle: color-mix(in srgb, var(--dk-danger-ink) 32%, transparent);
	--bs-light-bg-subtle: var(--dk-surface-2);
	--bs-light-text: var(--dk-text);
	--bs-light-text-emphasis: var(--dk-text);
	--bs-light-border-subtle: var(--dk-border-2);
	--bs-dark-bg-subtle: var(--dk-surface-3);
	--bs-dark-text: var(--dk-text);
	--bs-dark-text-emphasis: var(--dk-text);
	--bs-dark-border-subtle: var(--dk-border-2);

	/* bg-body-secondary / bg-body-tertiary read the -rgb triples, which the
	   foundation does not pin (= --dk-surface-2). */
	--bs-secondary-bg-rgb: 27, 36, 48;
	--bs-tertiary-bg-rgb: 27, 36, 48;
	--bs-highlight-bg: var(--dk-warning-fill);
	--bs-code-color: var(--dk-danger-ink);
}

/* --- Text utilities ------------------------------------------------------------ */

/* :where() keeps these at the light utilities' own weight (0,1,0), so the
   light cascade holds unchanged: design.css's `.app-wrapper a` and
   `.app-wrapper .text-*` rules still win where they win in light (an
   <a class="text-body"> stays link-coloured, as it is in light), and these
   only replace the ki / Bootstrap value underneath, on load order. */
:where(html[data-theme="dark"]) .text-dark,
:where(html[data-theme="dark"]) .text-dark:hover,
:where(html[data-theme="dark"]) .text-black,
:where(html[data-theme="dark"]) .text-body,
:where(html[data-theme="dark"]) .text-light,
:where(html[data-theme="dark"]) .text-light:hover {
	color: var(--dk-text) !important;
}

:where(html[data-theme="dark"]) .text-secondary,
:where(html[data-theme="dark"]) .text-secondary:hover,
:where(html[data-theme="dark"]) .text-body-secondary {
	color: var(--dk-muted) !important;
}

/* Outside .app-wrapper (toasts and menus appended to body) ki's .text-primary
   is its dark teal; inside, design.css already maps it to --dk-link. */
:where(html[data-theme="dark"]) .text-primary,
:where(html[data-theme="dark"]) .text-primary:hover {
	color: var(--dk-link) !important;
}

/* The saturated danger / info hues fall under 4.5:1 as text on the dark
   surfaces (danger is 4.4:1); their light inks keep the hue. */
:where(html[data-theme="dark"]) .text-danger,
:where(html[data-theme="dark"]) .text-danger:hover {
	color: var(--dk-danger-ink) !important;
}

:where(html[data-theme="dark"]) .text-info,
:where(html[data-theme="dark"]) .text-info:hover {
	color: var(--dk-info-ink) !important;
}

/* White stays white outside .app-wrapper (ki's .text-white is
   rgba(var(--white)), the dark surface under body.dark). Inside it,
   design.css maps .text-white to --sea-text, the light body colour. */
:where(html[data-theme="dark"]) .text-white,
:where(html[data-theme="dark"]) .text-white:hover,
:where(html[data-theme="dark"]) .link-white,
:where(html[data-theme="dark"]) .link-white:hover {
	color: var(--bs-white) !important;
}

:where(html[data-theme="dark"]) .link-dark,
:where(html[data-theme="dark"]) .link-dark:hover {
	color: var(--dk-text) !important;
}

/* --- Background utilities ------------------------------------------------------ */

html[data-theme="dark"] .bg-white {
	background-color: var(--dk-surface) !important;
}

html[data-theme="dark"] .bg-light {
	background-color: var(--dk-surface-2) !important;
}

/* bg-body inside a card / modal meant "the panel colour" in light (both are
   white there); in dark the page colour would read as a hole. */
html[data-theme="dark"] .card .bg-body {
	background-color: var(--dk-surface) !important;
}

html[data-theme="dark"] .modal-content .bg-body,
html[data-theme="dark"] .dropdown-menu .bg-body {
	background-color: var(--dk-surface-2) !important;
}

/* Solid status fills keep their hue and their white text. */
html[data-theme="dark"] .bg-primary,
html[data-theme="dark"] .bg-success,
html[data-theme="dark"] .bg-danger,
html[data-theme="dark"] .bg-info {
	color: var(--bs-white);
}

/* Yellow (and the light info blue when a template asked for dark text) takes
   dark ink: light text on these fills is under 2:1. */
html[data-theme="dark"] .bg-warning,
html[data-theme="dark"] .bg-warning.text-dark,
html[data-theme="dark"] .bg-warning .text-dark,
html[data-theme="dark"] .bg-warning strong,
html[data-theme="dark"] .bg-warning small,
html[data-theme="dark"] .bg-info.text-dark,
html[data-theme="dark"] .bg-info .text-dark {
	color: var(--dk-bg) !important;
}

/* ki's solid secondary would be a pale slab under the remapped --secondary;
   a neutral tint reads as the same "grey chip" on a dark page. */
html[data-theme="dark"] .bg-secondary {
	background-color: var(--dk-neutral-fill) !important;
	color: var(--dk-neutral-ink);
}

html[data-theme="dark"] .progress-bar.bg-secondary {
	background-color: var(--dk-faint) !important;
}

/* bg-dark is the console's code / terminal slab (pre.bg-dark.text-light):
   keep it the darkest surface rather than the inverted light block. */
html[data-theme="dark"] .bg-dark {
	background-color: var(--dk-input) !important;
	color: var(--dk-text);
	box-shadow: inset 0 0 0 1px var(--dk-border);
}

html[data-theme="dark"] .badge.bg-dark {
	background-color: var(--dk-surface-3) !important;
	box-shadow: inset 0 0 0 1px var(--dk-border-2);
}

html[data-theme="dark"] .text-bg-light {
	background-color: var(--dk-surface-2) !important;
	color: var(--dk-text) !important;
}

html[data-theme="dark"] .text-bg-dark {
	background-color: var(--dk-surface-3) !important;
	color: var(--dk-text) !important;
}

/* ki tinted backgrounds (bg-light-*): the light ink is ki's teal / saturated
   hue, unreadable on dark; design.css paints primary/success/warning with
   --sea-primary-soft, kept as the same blue tint here. */
html[data-theme="dark"] .bg-light-primary,
html[data-theme="dark"] .bg-light-success,
html[data-theme="dark"] .bg-light-warning {
	background-color: var(--dk-primary-fill) !important;
	color: var(--dk-primary-ink) !important;
}

html[data-theme="dark"] .bg-light-info {
	background-color: var(--dk-info-fill) !important;
	color: var(--dk-info-ink) !important;
}

html[data-theme="dark"] .bg-light-danger {
	background-color: var(--dk-danger-fill) !important;
	color: var(--dk-danger-ink) !important;
}

html[data-theme="dark"] .bg-light-secondary,
html[data-theme="dark"] .bg-light-dark,
html[data-theme="dark"] .bg-light-light {
	background-color: var(--dk-neutral-fill) !important;
	color: var(--dk-neutral-ink) !important;
}

/* --- Borders and shadows --------------------------------------------------------- */

html[data-theme="dark"] .border-light {
	border-color: var(--dk-border-2) !important;
}

html[data-theme="dark"] .border-white {
	border-color: var(--dk-border) !important;
}

html[data-theme="dark"] .shadow-sm,
html[data-theme="dark"] .shadow {
	box-shadow: var(--dk-shadow-sm) !important;
}

html[data-theme="dark"] .shadow-lg {
	box-shadow: var(--dk-shadow) !important;
}

/* --- Cards --------------------------------------------------------------------- */

html[data-theme="dark"] .card {
	--bs-card-bg: var(--dk-surface);
	--bs-card-color: var(--dk-text);
	--bs-card-cap-bg: transparent;
	--bs-card-border-color: var(--dk-border);
	--bs-card-subtitle-color: var(--dk-muted);
}

html[data-theme="dark"] .card .card-header,
html[data-theme="dark"] .card .card-footer {
	border-color: var(--dk-border);
}

html[data-theme="dark"] .card.hover-effect:hover {
	box-shadow: var(--dk-shadow);
}

/* ki solid cards: their "* { color: white }" is the flipped --white. */
html[data-theme="dark"] .card-primary *,
html[data-theme="dark"] .card-secondary *,
html[data-theme="dark"] .card-success *,
html[data-theme="dark"] .card-danger *,
html[data-theme="dark"] .card-info * {
	color: var(--bs-white) !important;
}

html[data-theme="dark"] .card-warning * {
	color: var(--dk-bg) !important;
}

html[data-theme="dark"] .card-light *,
html[data-theme="dark"] .card-white * {
	color: var(--dk-text) !important;
}

html[data-theme="dark"] .card-light {
	background-color: var(--dk-surface-2);
}

html[data-theme="dark"] .card-outline-primary:hover *,
html[data-theme="dark"] .card-outline-success:hover *,
html[data-theme="dark"] .card-outline-danger:hover *,
html[data-theme="dark"] .card-outline-info:hover * {
	color: var(--bs-white);
}

/* --- Tables -------------------------------------------------------------------- */

html[data-theme="dark"] .table {
	--bs-table-color: var(--dk-text);
	--bs-table-border-color: var(--dk-border-2);
	--bs-table-striped-color: var(--dk-text);
	--bs-table-striped-bg: color-mix(in srgb, var(--dk-text) 3%, transparent);
	--bs-table-active-color: var(--dk-text);
	--bs-table-active-bg: var(--dk-border-2);
	--bs-table-hover-color: var(--dk-text);
	--bs-table-hover-bg: var(--dk-border);
	color: var(--dk-text);
	border-color: var(--dk-border-2);
}

/* thead.table-light / tr.table-light: Bootstrap hard-codes #f8f9fa / #000. */
html[data-theme="dark"] .table-light {
	--bs-table-color: var(--dk-text);
	--bs-table-bg: var(--dk-surface-2);
	--bs-table-border-color: var(--dk-border-2);
	--bs-table-striped-bg: var(--dk-surface-3);
	--bs-table-striped-color: var(--dk-text);
	--bs-table-active-bg: var(--dk-surface-3);
	--bs-table-active-color: var(--dk-text);
	--bs-table-hover-bg: var(--dk-surface-3);
	--bs-table-hover-color: var(--dk-text);
	color: var(--dk-text);
	border-color: var(--dk-border-2);
}

html[data-theme="dark"] .table-dark {
	--bs-table-color: var(--dk-text);
	--bs-table-bg: var(--dk-surface-3);
	--bs-table-border-color: var(--dk-border-2);
	--bs-table-striped-bg: var(--dk-surface-2);
	--bs-table-striped-color: var(--dk-text);
	--bs-table-active-bg: var(--dk-surface-2);
	--bs-table-active-color: var(--dk-text);
	--bs-table-hover-bg: var(--dk-surface-2);
	--bs-table-hover-color: var(--dk-text);
	color: var(--dk-text);
	border-color: var(--dk-border-2);
}

/* Row / cell status tints (tr.table-warning and friends). */
html[data-theme="dark"] .table-primary,
html[data-theme="dark"] .table-secondary,
html[data-theme="dark"] .table-success,
html[data-theme="dark"] .table-info,
html[data-theme="dark"] .table-warning,
html[data-theme="dark"] .table-danger {
	--bs-table-color: var(--dk-text);
	--bs-table-striped-color: var(--dk-text);
	--bs-table-active-color: var(--dk-text);
	--bs-table-hover-color: var(--dk-text);
	--bs-table-striped-bg: var(--dk-border);
	--bs-table-active-bg: var(--dk-border-2);
	--bs-table-hover-bg: var(--dk-border);
	color: var(--dk-text);
}

html[data-theme="dark"] .table-primary {
	--bs-table-bg: var(--dk-primary-fill);
	--bs-table-border-color: color-mix(in srgb, var(--dk-primary-ink) 24%, transparent);
	border-color: var(--bs-table-border-color);
}

html[data-theme="dark"] .table-secondary {
	--bs-table-bg: var(--dk-neutral-fill);
	--bs-table-border-color: var(--dk-border-2);
	border-color: var(--bs-table-border-color);
}

html[data-theme="dark"] .table-success {
	--bs-table-bg: var(--dk-success-fill);
	--bs-table-border-color: color-mix(in srgb, var(--dk-success-ink) 24%, transparent);
	border-color: var(--bs-table-border-color);
}

html[data-theme="dark"] .table-info {
	--bs-table-bg: var(--dk-info-fill);
	--bs-table-border-color: color-mix(in srgb, var(--dk-info-ink) 24%, transparent);
	border-color: var(--bs-table-border-color);
}

html[data-theme="dark"] .table-warning {
	--bs-table-bg: var(--dk-warning-fill);
	--bs-table-border-color: color-mix(in srgb, var(--dk-warning-ink) 24%, transparent);
	border-color: var(--bs-table-border-color);
}

html[data-theme="dark"] .table-danger {
	--bs-table-bg: var(--dk-danger-fill);
	--bs-table-border-color: color-mix(in srgb, var(--dk-danger-ink) 24%, transparent);
	border-color: var(--bs-table-border-color);
}

html[data-theme="dark"] .table-active {
	--bs-table-accent-bg: var(--dk-border-2);
	color: var(--dk-text);
}

/* Sticky headers sit on the card, not on the page. */
html[data-theme="dark"] .card thead.sticky-top,
html[data-theme="dark"] .card thead.position-sticky {
	background-color: var(--dk-surface);
}

/* ki table bits whose hairline is the lilac / grey triple at alpha. */
html[data-theme="dark"] .table-bottom-border > tbody > tr {
	border-top-color: var(--dk-border);
}

/* --- Forms ------------------------------------------------------------------------ */

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
	background-color: var(--dk-input);
	color: var(--dk-text);
	border-color: var(--dk-border-2);
}

/* Bootstrap's dark chevron is #adb5bd; this is --dk-muted. */
html[data-theme="dark"] .form-select {
	--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239aa8b7' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

html[data-theme="dark"] .form-select.custom-form-select {
	background-color: transparent;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
	background-color: var(--dk-input);
	color: var(--dk-text);
	border-color: var(--sea-primary);
	box-shadow: 0 0 0 0.2rem var(--dk-primary-fill);
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] .form-select::placeholder {
	color: var(--dk-faint);
}

html[data-theme="dark"] .form-floating > .form-control::placeholder {
	color: transparent !important;
}

html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-select:disabled,
html[data-theme="dark"] .form-control.disabled {
	background-color: var(--dk-surface-2);
	color: var(--dk-muted);
	border-color: var(--dk-border);
}

html[data-theme="dark"] .form-control-plaintext {
	color: var(--dk-text);
}

html[data-theme="dark"] .form-control.is-invalid,
html[data-theme="dark"] .form-select.is-invalid,
html[data-theme="dark"] .form-control.is-invalid:focus,
html[data-theme="dark"] .form-select.is-invalid:focus,
html[data-theme="dark"] .was-validated .form-control:invalid,
html[data-theme="dark"] .was-validated .form-select:invalid {
	border-color: var(--dk-danger-ink);
}

html[data-theme="dark"] .form-control.is-valid,
html[data-theme="dark"] .form-select.is-valid,
html[data-theme="dark"] .form-control.is-valid:focus,
html[data-theme="dark"] .form-select.is-valid:focus,
html[data-theme="dark"] .was-validated .form-control:valid,
html[data-theme="dark"] .was-validated .form-select:valid {
	border-color: var(--dk-success-ink);
}

html[data-theme="dark"] .form-control.is-invalid:focus,
html[data-theme="dark"] .form-select.is-invalid:focus {
	box-shadow: 0 0 0 0.2rem var(--dk-danger-fill);
}

html[data-theme="dark"] .invalid-feedback {
	color: var(--dk-danger-ink);
}

html[data-theme="dark"] .valid-feedback {
	color: var(--dk-success-ink);
}

html[data-theme="dark"] .form-control::file-selector-button {
	background-color: var(--dk-surface-3);
	color: var(--dk-text);
}

html[data-theme="dark"] .form-control:hover:not(:disabled):not([readonly])::file-selector-button {
	background-color: var(--dk-border-2);
}

/* Native option lists (the dropdown itself follows color-scheme: dark; the
   option rows take these where the browser honours them). */
:where(html[data-theme="dark"]) option,
:where(html[data-theme="dark"]) optgroup {
	background-color: var(--dk-surface-2);
	color: var(--dk-text);
}

html[data-theme="dark"] body.dark .app-form select option {
	background-color: var(--dk-surface-2);
	color: var(--dk-text);
}

html[data-theme="dark"] .app-form .form-select option:active,
html[data-theme="dark"] .app-form .form-select option:checked {
	background-color: var(--dk-surface-3);
	color: var(--dk-text);
}

html[data-theme="dark"] .app-form .form-select option:hover {
	background-color: var(--dk-primary-fill);
	color: var(--dk-primary-ink);
}

/* Browser autofill paints its own pale fill; cover it with the input colour. */
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"] textarea:-webkit-autofill,
html[data-theme="dark"] select:-webkit-autofill {
	-webkit-text-fill-color: var(--dk-text);
	-webkit-box-shadow: 0 0 0 1000px var(--dk-input) inset;
	box-shadow: 0 0 0 1000px var(--dk-input) inset;
	caret-color: var(--dk-text);
}

html[data-theme="dark"] .input-group-text {
	background-color: var(--dk-surface-2);
	color: var(--dk-muted);
	border-color: var(--dk-border-2);
}

/* Checks / radios / switches. design.css draws them native (appearance:auto)
   with a white fill and ring; 20_design_a.css re-themes its base, checked,
   hover and focus rules. These are the Bootstrap states it does not touch. */
html[data-theme="dark"] .form-check-input {
	--bs-form-check-bg: var(--dk-input);
}

html[data-theme="dark"] .form-check-input:indeterminate {
	background-color: var(--sea-primary);
	border-color: var(--sea-primary);
}

html[data-theme="dark"] .form-check-input:disabled {
	background-color: var(--dk-surface-2);
	border-color: var(--dk-border);
}

html[data-theme="dark"] .form-switch .form-check-input:not(:checked):not(:focus) {
	--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%239aa8b7'/%3e%3c/svg%3e");
}

html[data-theme="dark"] .form-range::-webkit-slider-runnable-track {
	background-color: var(--dk-surface-3);
}

html[data-theme="dark"] .form-range::-moz-range-track {
	background-color: var(--dk-surface-3);
}

/* ki .app-form hairlines are the grey triple at 0.4. */
html[data-theme="dark"] .app-form .form-select,
html[data-theme="dark"] .app-form .form-control,
html[data-theme="dark"] .app-form.app-icon-form .form-control {
	border-color: var(--dk-border-2);
}

html[data-theme="dark"] .app-form .form-select:focus,
html[data-theme="dark"] .app-form .form-control:focus,
html[data-theme="dark"] .app-form.app-icon-form .form-control:focus {
	color: var(--dk-text);
	border-color: var(--sea-primary);
	box-shadow: 0 0 0 0.2rem var(--dk-primary-fill);
}

html[data-theme="dark"] .app-form .form-select.is-invalid,
html[data-theme="dark"] .app-form .form-control.is-invalid,
html[data-theme="dark"] .app-form.was-validated .form-control:invalid {
	border-color: var(--dk-danger-ink);
}

/* --- Buttons ------------------------------------------------------------------------ */

/* The design.css white-slab buttons (.btn-outline-secondary / -danger,
   .btn-light-secondary: background #fff !important) are re-themed in
   20_design_a.css; only their disabled look is added here. */
html[data-theme="dark"] .btn-outline-secondary:disabled,
html[data-theme="dark"] .btn-outline-secondary.disabled,
html[data-theme="dark"] .btn-outline-danger:disabled,
html[data-theme="dark"] .btn-outline-danger.disabled {
	background: var(--dk-surface) !important;
	border-color: var(--dk-border) !important;
}

/* A selected btn-check toggle, dark colours. design.css gives light its own
   checked fill at (0,2,0)/(0,3,0); this (0,3,1) rule out-ranks it in dark
   (and the dark base button rules at (0,2,1)) and stays below a page's
   scoped `.x .btn-check:checked + .btn` (0,4,0). */
html[data-theme="dark"] :where(.btn-check:checked, .btn-check:active) + .btn.btn-outline-secondary,
html[data-theme="dark"] :where(.btn-check:checked, .btn-check:active) + .btn.btn-outline-danger,
html[data-theme="dark"] :where(.btn-check:checked, .btn-check:active) + .btn.btn-outline-primary,
html[data-theme="dark"] :where(.btn-check:checked, .btn-check:active) + .btn.btn-outline-success,
html[data-theme="dark"] .btn.btn-outline-secondary.active,
html[data-theme="dark"] .btn.btn-outline-primary.active {
	background: var(--dk-primary-fill) !important;
	border-color: color-mix(in srgb, var(--dk-primary-ink) 55%, transparent) !important;
	color: var(--dk-primary-ink) !important;
}

/* ki btn-light: the lilac --light, with no hover change. Its text is ki's
   rgba(var(--dark)) !important, already the light ink, and is left to that
   rule so a .text-danger on the button still wins as it does in light. */
html[data-theme="dark"] .btn-light {
	--bs-btn-color: var(--dk-text);
	--bs-btn-disabled-color: var(--dk-muted);
	background-color: var(--dk-surface-2);
	border-color: var(--dk-border-2);
}

html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-light:active,
html[data-theme="dark"] .btn-light.active,
html[data-theme="dark"] .btn-light.show,
html[data-theme="dark"] .btn-light:focus-visible {
	background-color: var(--dk-surface-3) !important;
	border-color: var(--dk-faint) !important;
}

html[data-theme="dark"] .btn-light:focus:not(:hover):not(:focus-visible):not(.active):not(.show) {
	background-color: var(--dk-surface-2) !important;
	border-color: var(--dk-border-2) !important;
}

html[data-theme="dark"] .btn-light.disabled,
html[data-theme="dark"] .btn-light:disabled {
	background-color: var(--dk-surface-2) !important;
	border-color: var(--dk-border) !important;
}

/* ki btn-white has a "white" border that vanishes into its own fill. */
html[data-theme="dark"] .btn-white {
	background-color: var(--dk-surface);
	border-color: var(--dk-border-2);
}

html[data-theme="dark"] .btn-white:hover,
html[data-theme="dark"] .btn-white:active,
html[data-theme="dark"] .btn-white.active,
html[data-theme="dark"] .btn-white:focus-visible {
	background-color: var(--dk-surface-3) !important;
	border-color: var(--dk-faint) !important;
}

/* ki btn-secondary under the remapped grey triple would be white on pale
   grey (2.4:1); a raised neutral button instead. */
html[data-theme="dark"] .btn-secondary {
	--bs-btn-color: var(--dk-text);
	--bs-btn-hover-color: var(--dk-text);
	--bs-btn-active-color: var(--dk-text);
	background-color: var(--dk-surface-3);
	border-color: var(--dk-border-2);
	color: var(--dk-text);
}

html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-secondary:active,
html[data-theme="dark"] .btn-secondary.active,
html[data-theme="dark"] .btn-secondary.show,
html[data-theme="dark"] .btn-secondary:focus-visible,
html[data-theme="dark"] .btn-secondary.disabled {
	background-color: var(--dk-surface-3) !important;
	border-color: var(--dk-faint) !important;
	color: var(--dk-text);
}

/* btn-dark inverts: a light button with dark ink (white on --dark, which is
   now the near-white text colour, would vanish). */
html[data-theme="dark"] .btn-dark {
	--bs-btn-color: var(--dk-bg);
	--bs-btn-hover-color: var(--dk-bg);
	--bs-btn-active-color: var(--dk-bg);
	color: var(--dk-bg);
}

/* Solid info: ki forces its text to rgba(var(--white)). */
html[data-theme="dark"] .btn.btn-info {
	color: var(--bs-white);
}

/* ki outline buttons: the hover fill is the saturated hue, the hover text the
   flipped --white. */
html[data-theme="dark"] .btn-outline-success:hover,
html[data-theme="dark"] .btn-outline-success.active,
html[data-theme="dark"] .btn-outline-success.show,
html[data-theme="dark"] .btn-outline-success:focus-visible,
html[data-theme="dark"] .btn-outline-info:hover,
html[data-theme="dark"] .btn-outline-info.active,
html[data-theme="dark"] .btn-outline-info.show,
html[data-theme="dark"] .btn-outline-info:focus-visible {
	color: var(--bs-white);
}

html[data-theme="dark"] .btn-outline-warning:hover,
html[data-theme="dark"] .btn-outline-warning.active,
html[data-theme="dark"] .btn-outline-warning.show,
html[data-theme="dark"] .btn-outline-warning:focus-visible {
	color: var(--dk-bg);
}

html[data-theme="dark"] .btn-outline-light {
	color: var(--dk-text);
	border-color: var(--dk-border-2) !important;
}

html[data-theme="dark"] .btn-outline-light:hover,
html[data-theme="dark"] .btn-outline-light.active,
html[data-theme="dark"] .btn-outline-light.show,
html[data-theme="dark"] .btn-outline-light:focus-visible {
	background-color: var(--dk-surface-3);
	color: var(--dk-text);
}

/* ki tinted buttons: saturated text on a 10% tint. */
html[data-theme="dark"] .btn-light-success {
	background-color: var(--dk-success-fill);
	color: var(--dk-success-ink);
}

html[data-theme="dark"] .btn-light-danger {
	background-color: var(--dk-danger-fill);
	color: var(--dk-danger-ink);
}

html[data-theme="dark"] .btn-light-warning {
	background-color: var(--dk-warning-fill);
	color: var(--dk-warning-ink);
}

html[data-theme="dark"] .btn-light-info {
	background-color: var(--dk-info-fill);
	color: var(--dk-info-ink);
}

html[data-theme="dark"] .btn-light-success:hover,
html[data-theme="dark"] .btn-light-success.active,
html[data-theme="dark"] .btn-light-success:focus-visible {
	border-color: color-mix(in srgb, var(--dk-success-ink) 50%, transparent);
	color: var(--dk-success-ink);
}

html[data-theme="dark"] .btn-light-danger:hover,
html[data-theme="dark"] .btn-light-danger.active,
html[data-theme="dark"] .btn-light-danger:focus-visible {
	border-color: color-mix(in srgb, var(--dk-danger-ink) 50%, transparent);
	color: var(--dk-danger-ink);
}

html[data-theme="dark"] .btn-light-warning:hover,
html[data-theme="dark"] .btn-light-warning.active,
html[data-theme="dark"] .btn-light-warning:focus-visible {
	border-color: color-mix(in srgb, var(--dk-warning-ink) 50%, transparent);
	color: var(--dk-warning-ink);
}

html[data-theme="dark"] .btn-light-info:hover,
html[data-theme="dark"] .btn-light-info.active,
html[data-theme="dark"] .btn-light-info:focus-visible {
	border-color: color-mix(in srgb, var(--dk-info-ink) 50%, transparent);
	color: var(--dk-info-ink);
}

html[data-theme="dark"] .btn-light-dark,
html[data-theme="dark"] .btn-light-light {
	background-color: var(--dk-neutral-fill);
	color: var(--dk-neutral-ink);
}

/* The close X is a black SVG. */
html[data-theme="dark"] .btn-close {
	filter: invert(1) grayscale(100%) brightness(200%);
}

/* --- Badges -------------------------------------------------------------------------- */

/* bg-light badges (150x "bg-light text-dark") would merge into a surface-2
   row; a hairline keeps the chip shape. */
html[data-theme="dark"] .badge.bg-light {
	box-shadow: inset 0 0 0 1px var(--dk-border-2);
}

html[data-theme="dark"] .badge.bg-white {
	box-shadow: inset 0 0 0 1px var(--dk-border-2);
}

/* design.css Tabler-name shim (.badge.bg-*-lt). Primary / info / warning /
   danger already follow the re-pointed --sea-* tokens; these are the
   hard-coded inks. */
html[data-theme="dark"] .badge.bg-secondary-lt {
	background: var(--dk-neutral-fill) !important;
	border-color: var(--dk-border-2);
	color: var(--dk-neutral-ink) !important;
}

html[data-theme="dark"] .badge.bg-warning-lt,
html[data-theme="dark"] .badge.bg-yellow-lt,
html[data-theme="dark"] .badge.bg-orange-lt {
	background: var(--dk-warning-fill) !important;
	border-color: color-mix(in srgb, var(--dk-warning-ink) 32%, transparent);
	color: var(--dk-warning-ink) !important;
}

html[data-theme="dark"] .badge.bg-danger-lt,
html[data-theme="dark"] .badge.bg-red-lt {
	background: var(--dk-danger-fill) !important;
	border-color: color-mix(in srgb, var(--dk-danger-ink) 32%, transparent);
	color: var(--dk-danger-ink) !important;
}

html[data-theme="dark"] .badge.bg-success-lt,
html[data-theme="dark"] .badge.bg-green-lt,
html[data-theme="dark"] .badge.bg-teal-lt {
	background: var(--dk-success-fill) !important;
	border-color: color-mix(in srgb, var(--dk-success-ink) 32%, transparent);
	color: var(--dk-success-ink) !important;
}

html[data-theme="dark"] .badge.bg-info-lt,
html[data-theme="dark"] .badge.bg-azure-lt,
html[data-theme="dark"] .badge.bg-cyan-lt,
html[data-theme="dark"] .badge.bg-blue-lt,
html[data-theme="dark"] .badge.bg-primary-lt {
	background: var(--dk-primary-fill) !important;
	border-color: color-mix(in srgb, var(--dk-primary-ink) 32%, transparent);
	color: var(--dk-primary-ink) !important;
}

/* No purple token: the light rule's own hue, lifted toward the text colour. */
html[data-theme="dark"] .badge.bg-purple-lt {
	border-color: rgba(155, 107, 255, 0.32);
	color: color-mix(in srgb, rgb(155, 107, 255) 62%, var(--dk-text)) !important;
}

html[data-theme="dark"] .badge.bg-dark-lt,
html[data-theme="dark"] .badge.bg-muted-lt {
	background: var(--dk-neutral-fill) !important;
	border-color: var(--dk-border-2);
	color: var(--dk-text) !important;
}

/* --- Alerts ---------------------------------------------------------------------------- */

/* ki paints primary / secondary / info / light / dark alerts as solid slabs
   with rgba(var(--white)) text, which goes dark-on-colour once --white flips.
   In dark they become tinted fills with body-colour text. Success / warning /
   danger are design.css's own (a blue mist and two grey panels in light):
   success follows the re-pointed --sea-primary-mist, and 20_design_a.css
   re-themes the grey two, so they are not restyled here. */
html[data-theme="dark"] .alert {
	--bs-alert-color: var(--dk-text);
	--bs-alert-link-color: var(--dk-link);
	color: var(--dk-text);
}

html[data-theme="dark"] .alert-primary {
	--bs-alert-bg: var(--dk-primary-fill);
	--bs-alert-border-color: color-mix(in srgb, var(--dk-primary-ink) 30%, transparent);
	background-color: var(--dk-primary-fill);
	border-color: var(--bs-alert-border-color);
	color: var(--dk-text);
}

html[data-theme="dark"] .alert-info {
	--bs-alert-bg: var(--dk-info-fill);
	--bs-alert-border-color: color-mix(in srgb, var(--dk-info-ink) 30%, transparent);
	background-color: var(--dk-info-fill);
	border-color: var(--bs-alert-border-color);
	color: var(--dk-text);
}

html[data-theme="dark"] .alert-secondary {
	--bs-alert-bg: var(--dk-neutral-fill);
	--bs-alert-border-color: var(--dk-border-2);
	background-color: var(--dk-neutral-fill);
	border-color: var(--dk-border-2);
	color: var(--dk-text);
}

html[data-theme="dark"] .alert-light {
	--bs-alert-bg: var(--dk-surface-2);
	--bs-alert-border-color: var(--dk-border-2);
	background-color: var(--dk-surface-2);
	border-color: var(--dk-border-2);
}

html[data-theme="dark"] .alert-dark {
	--bs-alert-bg: var(--dk-surface-3);
	--bs-alert-border-color: var(--dk-border-2);
	background-color: var(--dk-surface-3);
	border-color: var(--dk-border-2);
	color: var(--dk-text);
}

html[data-theme="dark"] .alert-white {
	background-color: var(--dk-surface);
	border-color: var(--dk-border-2);
	color: var(--dk-text);
}

/* ki left-rule alerts keep their coloured rule, lose the light hairline. */
html[data-theme="dark"] .alert-border-primary,
html[data-theme="dark"] .alert-border-secondary,
html[data-theme="dark"] .alert-border-success,
html[data-theme="dark"] .alert-border-danger,
html[data-theme="dark"] .alert-border-warning,
html[data-theme="dark"] .alert-border-info,
html[data-theme="dark"] .alert-border-light,
html[data-theme="dark"] .alert-border-dark {
	border-top-color: var(--dk-border-2);
	border-right-color: var(--dk-border-2);
	border-bottom-color: var(--dk-border-2);
}

html[data-theme="dark"] .alert .alert-link {
	color: var(--dk-link);
}

/* --- Dropdowns ------------------------------------------------------------------------- */

html[data-theme="dark"] .dropdown-menu {
	--bs-dropdown-color: var(--dk-text);
	--bs-dropdown-bg: var(--dk-surface-2);
	--bs-dropdown-border-color: var(--dk-border-2);
	--bs-dropdown-divider-bg: var(--dk-border-2);
	--bs-dropdown-box-shadow: var(--dk-shadow);
	--bs-dropdown-link-color: var(--dk-text);
	--bs-dropdown-link-hover-color: var(--dk-text);
	--bs-dropdown-link-hover-bg: var(--dk-surface-3);
	--bs-dropdown-link-active-color: var(--dk-primary-ink);
	--bs-dropdown-link-active-bg: var(--dk-primary-fill);
	--bs-dropdown-link-disabled-color: var(--dk-faint);
	--bs-dropdown-header-color: var(--dk-muted);
	box-shadow: var(--dk-shadow);
}

html[data-theme="dark"] .dropdown-divider {
	border-top-color: var(--dk-border-2);
	opacity: 1;
}

html[data-theme="dark"] .dropdown-item-text {
	color: var(--dk-muted);
}

/* --- Modals and offcanvas ---------------------------------------------------------------- */

html[data-theme="dark"] .modal {
	--bs-modal-color: var(--dk-text);
	--bs-modal-bg: var(--dk-surface-2);
	--bs-modal-border-color: var(--dk-border-2);
	--bs-modal-box-shadow: var(--dk-shadow);
	--bs-modal-header-border-color: var(--dk-border);
	--bs-modal-footer-border-color: var(--dk-border);
}

html[data-theme="dark"] .modal-content {
	box-shadow: var(--dk-shadow);
}

html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .offcanvas-sm,
html[data-theme="dark"] .offcanvas-md,
html[data-theme="dark"] .offcanvas-lg,
html[data-theme="dark"] .offcanvas-xl,
html[data-theme="dark"] .offcanvas-xxl {
	--bs-offcanvas-color: var(--dk-text);
	--bs-offcanvas-bg: var(--dk-surface);
	--bs-offcanvas-border-color: var(--dk-border-2);
	--bs-offcanvas-box-shadow: var(--dk-shadow);
}

/* ki tints the header offcanvas backdrop with --dark, now near white. */
html[data-theme="dark"] header .offcanvas-backdrop {
	background-color: var(--dk-bg);
}

/* --- Toasts, tooltips, popovers ---------------------------------------------------------- */

html[data-theme="dark"] .toast {
	--bs-toast-color: var(--dk-text);
	--bs-toast-bg: var(--dk-surface-2);
	--bs-toast-border-color: var(--dk-border-2);
	--bs-toast-box-shadow: var(--dk-shadow);
	--bs-toast-header-color: var(--dk-muted);
	--bs-toast-header-bg: var(--dk-surface-3);
	--bs-toast-header-border-color: var(--dk-border);
}

html[data-theme="dark"] .app-color-toast {
	background: var(--dk-surface-2);
}

/* Bootstrap draws the tooltip in --bs-emphasis-color (near white) and
   style.css forces its text to #fff !important under body.dark: white on
   white. A raised dark chip instead. */
html[data-theme="dark"] .tooltip {
	--bs-tooltip-bg: var(--dk-surface-3);
	--bs-tooltip-color: var(--dk-text);
	--bs-tooltip-opacity: 1;
}

html[data-theme="dark"] body.dark .tooltip-inner {
	background-color: var(--dk-surface-3);
	color: var(--dk-text) !important;
	box-shadow: var(--dk-shadow-sm), inset 0 0 0 1px var(--dk-border-2);
}

html[data-theme="dark"] .popover {
	--bs-popover-bg: var(--dk-surface-2);
	--bs-popover-border-color: var(--dk-border-2);
	--bs-popover-box-shadow: var(--dk-shadow);
	--bs-popover-header-bg: var(--dk-surface-3);
	--bs-popover-header-color: var(--dk-text);
	--bs-popover-body-color: var(--dk-text);
	--bs-popover-arrow-border: var(--dk-border-2);
}

/* --- Navs ---------------------------------------------------------------------------------- */

html[data-theme="dark"] .nav-tabs {
	--bs-nav-tabs-border-color: var(--dk-border-2);
	--bs-nav-tabs-link-hover-border-color: var(--dk-border) var(--dk-border) var(--dk-border-2);
	--bs-nav-tabs-link-active-color: var(--dk-text);
	--bs-nav-tabs-link-active-bg: var(--dk-surface-2);
	--bs-nav-tabs-link-active-border-color: var(--dk-border-2) var(--dk-border-2) var(--dk-surface-2);
	border-color: var(--dk-border-2);
}

/* Bootstrap's default pill is #0d6efd; on the dark console it becomes the
   brand tint, matching the selected states elsewhere. */
html[data-theme="dark"] .nav-pills {
	--bs-nav-pills-link-active-color: var(--dk-primary-ink);
	--bs-nav-pills-link-active-bg: var(--dk-primary-fill);
}

html[data-theme="dark"] .nav-pills .nav-link.active,
html[data-theme="dark"] .nav-pills .show > .nav-link {
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dk-primary-ink) 35%, transparent);
}

/* --- Pagination ---------------------------------------------------------------------------- */

html[data-theme="dark"] .pagination {
	--bs-pagination-color: var(--dk-link);
	--bs-pagination-bg: var(--dk-surface-2);
	--bs-pagination-border-color: var(--dk-border-2);
	--bs-pagination-hover-color: var(--dk-link-hover);
	--bs-pagination-hover-bg: var(--dk-surface-3);
	--bs-pagination-hover-border-color: var(--dk-border-2);
	--bs-pagination-focus-color: var(--dk-link-hover);
	--bs-pagination-focus-bg: var(--dk-surface-3);
	--bs-pagination-focus-box-shadow: 0 0 0 0.2rem var(--dk-primary-fill);
	--bs-pagination-active-color: var(--dk-primary-ink);
	--bs-pagination-active-bg: var(--dk-primary-fill);
	--bs-pagination-active-border-color: color-mix(in srgb, var(--dk-primary-ink) 45%, transparent);
	--bs-pagination-disabled-color: var(--dk-faint);
	--bs-pagination-disabled-bg: var(--dk-surface);
	--bs-pagination-disabled-border-color: var(--dk-border);
}

/* style.css / responsive.css body.dark hard-code #333644 / #474a56. */
html[data-theme="dark"] body.dark .disabled > .page-link,
html[data-theme="dark"] body.dark .page-link.disabled {
	background-color: var(--dk-surface);
	border-color: var(--dk-border);
	color: var(--dk-faint);
}

/* --- List group ------------------------------------------------------------------------------ */

html[data-theme="dark"] .list-group {
	--bs-list-group-color: var(--dk-text);
	--bs-list-group-bg: var(--dk-surface);
	--bs-list-group-border-color: var(--dk-border);
	--bs-list-group-action-color: var(--dk-text);
	--bs-list-group-action-hover-color: var(--dk-text);
	--bs-list-group-action-hover-bg: var(--dk-surface-3);
	--bs-list-group-action-active-color: var(--dk-text);
	--bs-list-group-action-active-bg: var(--dk-surface-3);
	--bs-list-group-disabled-color: var(--dk-faint);
	--bs-list-group-disabled-bg: var(--dk-surface);
	--bs-list-group-active-color: var(--dk-primary-ink);
	--bs-list-group-active-bg: var(--dk-primary-fill);
	--bs-list-group-active-border-color: color-mix(in srgb, var(--dk-primary-ink) 35%, transparent);
}

/* A flush list lives inside a card or modal and takes its panel. */
html[data-theme="dark"] .list-group-flush {
	--bs-list-group-bg: transparent;
}

html[data-theme="dark"] .modal-content .list-group {
	--bs-list-group-bg: transparent;
}

html[data-theme="dark"] .list-group .list-group-item {
	border-color: var(--dk-border);
}

html[data-theme="dark"] .list-group-item-light {
	--bs-list-group-color: var(--dk-text);
	--bs-list-group-bg: var(--dk-surface-2);
	--bs-list-group-border-color: var(--dk-border-2);
}

html[data-theme="dark"] .list-group-item-dark {
	--bs-list-group-color: var(--dk-text);
	--bs-list-group-bg: var(--dk-surface-3);
	--bs-list-group-border-color: var(--dk-border-2);
}

/* --- Accordion --------------------------------------------------------------------------------- */

html[data-theme="dark"] .accordion {
	--bs-accordion-color: var(--dk-text);
	--bs-accordion-bg: var(--dk-surface);
	--bs-accordion-border-color: var(--dk-border-2);
	--bs-accordion-btn-color: var(--dk-text);
	--bs-accordion-btn-bg: var(--dk-surface);
	--bs-accordion-btn-focus-border-color: color-mix(in srgb, var(--sea-primary) 55%, transparent);
	--bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem var(--dk-primary-fill);
	--bs-accordion-active-color: var(--dk-primary-ink);
	--bs-accordion-active-bg: var(--dk-primary-fill);
}

/* Chevrons: --dk-muted closed, --dk-primary-ink open (Bootstrap's dark one is
   its own #6ea8fe for both). */
html[data-theme="dark"] .accordion-button::after {
	--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239aa8b7'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236fcfff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

html[data-theme="dark"] .app-accordion .accordion-item .accordion-body {
	color: var(--dk-muted);
}

/* --- Breadcrumb, progress -------------------------------------------------------------------- */

html[data-theme="dark"] .breadcrumb {
	--bs-breadcrumb-divider-color: var(--dk-faint);
	--bs-breadcrumb-item-active-color: var(--dk-muted);
}

/* ki tracks are the lilac --light at 0.2 (!important). */
html[data-theme="dark"] .progress,
html[data-theme="dark"] .progress-stacked {
	--bs-progress-bg: var(--dk-surface-3);
	background-color: var(--dk-surface-3) !important;
}

/* --- Code, kbd, mark, hr ---------------------------------------------------------------------- */

:where(html[data-theme="dark"]) code {
	color: var(--dk-danger-ink);
	background-color: var(--dk-danger-fill);
}

/* Inside a pre block the code is the block's text, not an inline chip. */
:where(html[data-theme="dark"]) pre code {
	color: inherit;
	background-color: transparent;
}

:where(html[data-theme="dark"]) pre {
	color: var(--dk-text);
}

:where(html[data-theme="dark"]) kbd {
	background-color: var(--dk-surface-3);
	color: var(--dk-text);
	box-shadow: inset 0 -1px 0 var(--dk-border-2);
}

:where(html[data-theme="dark"]) mark,
html[data-theme="dark"] .mark {
	background-color: var(--dk-warning-fill);
	color: var(--dk-text);
}

:where(html[data-theme="dark"]) hr {
	color: var(--dk-border-2);
	opacity: 1;
}

/* --- Simplebar ------------------------------------------------------------------------------------ */

html[data-theme="dark"] .simplebar-scrollbar::before,
html[data-theme="dark"] .simplebar-vertical .simplebar-scrollbar::before,
html[data-theme="dark"] .simplebar-horizontal .simplebar-scrollbar::before {
	background-color: var(--dk-faint);
}

/* --- ApexCharts chrome ---------------------------------------------------------------------------- */

/* theme_toggle.js themes the charts themselves; this is the HTML chrome the
   library injects with its own light colours (and ki's !important tooltip). */
html[data-theme="dark"] .apexcharts-tooltip,
html[data-theme="dark"] .apexcharts-tooltip.apexcharts-theme-light,
html[data-theme="dark"] .apexcharts-tooltip.apexcharts-theme-dark {
	background: var(--dk-surface-2) !important;
	background-color: var(--dk-surface-2) !important;
	border: 1px solid var(--dk-border-2) !important;
	color: var(--dk-text) !important;
	box-shadow: var(--dk-shadow-sm);
}

html[data-theme="dark"] .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title,
html[data-theme="dark"] .apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
	background: var(--dk-surface-3) !important;
	border-bottom: 1px solid var(--dk-border) !important;
	color: var(--dk-text);
}

html[data-theme="dark"] .apexcharts-tooltip-rangebar .category {
	color: var(--dk-muted);
}

html[data-theme="dark"] .apexcharts-xaxistooltip,
html[data-theme="dark"] .apexcharts-yaxistooltip,
html[data-theme="dark"] .apexcharts-xaxistooltip.apexcharts-theme-dark,
html[data-theme="dark"] .apexcharts-yaxistooltip.apexcharts-theme-dark {
	background: var(--dk-surface-2);
	border: 1px solid var(--dk-border-2);
	color: var(--dk-text);
}

html[data-theme="dark"] .apexcharts-xaxistooltip-bottom:after,
html[data-theme="dark"] .apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:after {
	border-bottom-color: var(--dk-surface-2);
}

html[data-theme="dark"] .apexcharts-xaxistooltip-bottom:before,
html[data-theme="dark"] .apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:before {
	border-bottom-color: var(--dk-border-2);
}

html[data-theme="dark"] .apexcharts-xaxistooltip-top:after,
html[data-theme="dark"] .apexcharts-xaxistooltip-top.apexcharts-theme-dark:after {
	border-top-color: var(--dk-surface-2);
}

html[data-theme="dark"] .apexcharts-xaxistooltip-top:before,
html[data-theme="dark"] .apexcharts-xaxistooltip-top.apexcharts-theme-dark:before {
	border-top-color: var(--dk-border-2);
}

html[data-theme="dark"] .apexcharts-yaxistooltip-left:after,
html[data-theme="dark"] .apexcharts-yaxistooltip-left.apexcharts-theme-dark:after {
	border-left-color: var(--dk-surface-2);
}

html[data-theme="dark"] .apexcharts-yaxistooltip-left:before,
html[data-theme="dark"] .apexcharts-yaxistooltip-left.apexcharts-theme-dark:before {
	border-left-color: var(--dk-border-2);
}

html[data-theme="dark"] .apexcharts-yaxistooltip-right:after,
html[data-theme="dark"] .apexcharts-yaxistooltip-right.apexcharts-theme-dark:after {
	border-right-color: var(--dk-surface-2);
}

html[data-theme="dark"] .apexcharts-yaxistooltip-right:before,
html[data-theme="dark"] .apexcharts-yaxistooltip-right.apexcharts-theme-dark:before {
	border-right-color: var(--dk-border-2);
}

html[data-theme="dark"] .apexcharts-menu {
	background: var(--dk-surface-2);
	border: 1px solid var(--dk-border-2);
	color: var(--dk-text);
	box-shadow: var(--dk-shadow-sm);
}

html[data-theme="dark"] .apexcharts-menu-item:hover {
	background: var(--dk-surface-3);
}

html[data-theme="dark"] .apexcharts-zoom-icon svg,
html[data-theme="dark"] .apexcharts-zoomin-icon svg,
html[data-theme="dark"] .apexcharts-zoomout-icon svg,
html[data-theme="dark"] .apexcharts-reset-icon svg,
html[data-theme="dark"] .apexcharts-menu-icon svg,
html[data-theme="dark"] .apexcharts-selection-icon svg {
	fill: var(--dk-muted);
}

html[data-theme="dark"] .apexcharts-pan-icon svg {
	fill: var(--dk-surface);
	stroke: var(--dk-muted);
}

} /* @media screen */

/* ==========================================================================
   Dark: design.css part 1: shell, side menu, buttons, forms
   ========================================================================== */

/* dark fragment 20_design_a: assets/design.css lines 1-1754 (page canvas,
   app shell header, side menu incl. the collapsed semi-nav rail, logo, header
   search trigger and user chip, buttons, forms, alerts, light-tint badges,
   cards and panels, the workspace command palette, offcanvas and footer).

   Scoped html[data-theme="dark"] and wrapped in @media screen so print stays
   light. Each rule is the original design.css selector with the dark prefix,
   which out-ranks the light rule; where the light declaration is !important
   this one is too. Rules that already read var(--sea-*) follow the re-pointed
   tokens in theme_dark.css and are not repeated here. */

@media screen {

/* --- Page canvas (design.css L701) -----------------------------------------
   theme_dark.css paints body.portal-theme; this keeps the shell body dark
   even if a page swaps the portal-theme class off. */
html[data-theme="dark"] body.ki-portal-shell-body {
	background:
		radial-gradient(circle at top right, rgba(0, 168, 255, 0.10), transparent 32%),
		linear-gradient(180deg, var(--dk-surface) 0%, var(--dk-bg) 52%, var(--dk-bg) 100%);
	background-attachment: fixed;
}

/* --- App shell header (L58) ---------------------------------------------- */
html[data-theme="dark"] .app-shell-header {
	background: var(--dk-surface) !important;
	box-shadow: var(--dk-shadow-sm);
}

/* L1004: the sticky header; the .app-shell-header colour above wins on the
   header itself (it is !important in light too), this covers any other. */
html[data-theme="dark"] body.ki-portal-shell-body .header-main {
	background: color-mix(in srgb, var(--dk-surface) 88%, transparent);
	box-shadow: var(--dk-shadow-sm);
}

/* --- Logo (L728, plus style.css body.dark nav .app-logo .logo img) -------
   logo-light.svg is dark-ink wordmark on transparent; swap in the light-ink
   artwork. The ki-admin dark theme blows every sidebar logo out to white with
   a brightness filter, which would also bleach the blue tile: undo it. */
html[data-theme="dark"] img.sd-logo[src*="/logo-light."] {
	content: url("/assets/img/logo-dark.svg");
}

html[data-theme="dark"] body.dark nav .app-logo .logo img,
html[data-theme="dark"] body.ki-portal-shell-body nav .app-logo .logo img.sd-logo,
html[data-theme="dark"] body.ki-portal-shell-body nav .app-logo .logo img.logo-compact-mark {
	filter: none;
}

/* --- Buttons (L142-219) ----------------------------------------------------
   --sea-primary-deep is re-pointed at the light link blue, which is right for
   text but leaves white button text unreadable on a hover fill. Solid fills
   keep the brand hover blue from the light theme. */
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-primary:focus,
html[data-theme="dark"] .btn-primary:active {
	background-color: #0087cc !important;
	border-color: #0087cc !important;
}

html[data-theme="dark"] .btn-light-secondary,
html[data-theme="dark"] .btn-outline-danger {
	background: var(--dk-surface-2) !important;
	border: 1px solid var(--dk-border-2) !important;
}

html[data-theme="dark"] .btn-outline-secondary {
	background: var(--dk-surface-2) !important;
	border: 1px solid var(--dk-border-2) !important;
}

html[data-theme="dark"] .btn-outline-danger:hover,
html[data-theme="dark"] .btn-light-secondary:hover,
html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-outline-secondary:focus,
html[data-theme="dark"] .btn-outline-secondary:active {
	background: var(--dk-surface-3) !important;
	border-color: var(--dk-border-2) !important;
}

/* --- Entity pages: related list and detail tiles (L319-352) --------------- */
html[data-theme="dark"] .sea-related-list-item {
	background: linear-gradient(180deg, var(--dk-surface-2) 0%, var(--dk-surface) 100%);
}

html[data-theme="dark"] .sea-related-list-item:hover {
	background: var(--dk-surface-3);
	box-shadow: var(--dk-shadow-sm);
}

html[data-theme="dark"] .sea-detail-tile {
	background: linear-gradient(180deg, var(--dk-surface-2) 0%, var(--dk-surface) 100%);
}

/* --- Auth panels (L389-417) ----------------------------------------------- */
html[data-theme="dark"] .form-content-box .form-container,
html[data-theme="dark"] .image-content-box .form-container,
html[data-theme="dark"] .image-contentbox .form-container {
	background: var(--dk-surface);
}

html[data-theme="dark"] .image-content-box,
html[data-theme="dark"] .image-contentbox {
	background: var(--dk-surface);
}

html[data-theme="dark"] .form-content-box {
	background: var(--dk-surface);
}

/* --- Forms (L454-559) ----------------------------------------------------- */
html[data-theme="dark"] .custom-forms .form-floating > .form-control,
html[data-theme="dark"] .custom-forms .form-control {
	border-color: var(--dk-border-2);
	background: var(--dk-input);
	box-shadow: none;
}

html[data-theme="dark"] .form-floating > .form-control:not(:focus) {
	border-color: var(--dk-border-2);
}

/* The rules above out-rank the light focus ring; restate it. */
html[data-theme="dark"] .custom-forms .form-floating > .form-control:focus,
html[data-theme="dark"] .custom-forms .form-control:focus,
html[data-theme="dark"] .form-check-input:focus {
	border-color: rgba(0, 168, 255, 0.38);
	box-shadow: 0 0 0 0.2rem rgba(0, 168, 255, 0.14);
}

/* Bootstrap's floated-label backing patch is body-bg; match the control. */
html[data-theme="dark"] .form-floating > .form-control:focus ~ label::after,
html[data-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label::after {
	background-color: var(--dk-input);
}

html[data-theme="dark"] .form-check-input {
	border-color: var(--dk-faint);
	background-color: var(--dk-input);
	box-shadow: none;
}

html[data-theme="dark"] .form-check-input:checked {
	background-color: var(--sea-primary);
	border-color: var(--sea-primary);
}

html[data-theme="dark"] .form-check-input:hover {
	border-color: rgba(0, 168, 255, 0.55);
}

/* --- Alerts (L580-590): neutral grey panels in light ---------------------- */
html[data-theme="dark"] .alert-warning {
	background: var(--dk-surface-2);
	border-color: var(--dk-border-2);
}

html[data-theme="dark"] .alert-danger {
	background: var(--dk-surface-2);
	border-color: var(--dk-border-2);
}

/* --- Light-tint badges (L615-665) ----------------------------------------- */
html[data-theme="dark"] .badge.bg-secondary-lt {
	color: var(--dk-neutral-ink) !important;
}

html[data-theme="dark"] .badge.bg-success-lt,
html[data-theme="dark"] .badge.bg-green-lt,
html[data-theme="dark"] .badge.bg-teal-lt {
	color: var(--dk-success-ink) !important;
}

html[data-theme="dark"] .badge.bg-purple-lt {
	color: color-mix(in srgb, rgb(155, 107, 255) 60%, var(--dk-text)) !important;
}

html[data-theme="dark"] .badge.bg-dark-lt,
html[data-theme="dark"] .badge.bg-muted-lt {
	background: var(--dk-neutral-fill) !important;
	border: 1px solid var(--dk-border-2);
}

/* --- Side menu (L705-924) ------------------------------------------------- */
html[data-theme="dark"] body.ki-portal-shell-body nav {
	background: linear-gradient(180deg, var(--dk-surface) 0%, var(--dk-surface) 56%, var(--dk-surface-2) 100%);
	box-shadow: var(--dk-shadow-sm);
}

html[data-theme="dark"] body.ki-portal-shell-body .app-logo {
	background: var(--dk-surface);
}

html[data-theme="dark"] body.ki-portal-shell-body .nav-profile {
	background: linear-gradient(180deg, rgba(0, 168, 255, 0.10), transparent);
}

html[data-theme="dark"] body.ki-portal-shell-body .main-nav > li > a {
	box-shadow: none;
}

html[data-theme="dark"] body.ki-portal-shell-body .main-nav > li > a i,
html[data-theme="dark"] body.ki-portal-shell-body .main-nav > li > ul > li > a i {
	background: var(--dk-primary-fill);
}

/* Sub-items are translucent white pills in light. The dark base rule out-ranks
   the light :hover rule, so the hover tints are restated after it; the open
   and active gradients stay !important and keep winning. */
html[data-theme="dark"] body.ki-portal-shell-body .main-nav > li > ul > li > a {
	background: var(--dk-surface-2);
}

html[data-theme="dark"] body.ki-portal-shell-body .main-nav > li > a:hover {
	background: var(--sea-primary-mist);
}

html[data-theme="dark"] body.ki-portal-shell-body .main-nav > li > ul > li > a:hover {
	background: var(--sea-primary-soft);
}

html[data-theme="dark"] body.ki-portal-shell-body .nav-section-badge {
	background: var(--dk-primary-fill);
}

/* The open group's count badge is a white pill with dark ink in light. */
html[data-theme="dark"] body.ki-portal-shell-body .main-nav > li > a[aria-expanded="true"] .badge-notification {
	background: var(--dk-surface) !important;
	color: var(--dk-text) !important;
	border-color: var(--dk-border-2) !important;
}

/* --- Header controls (L1079-1268) ----------------------------------------- */
html[data-theme="dark"] body.ki-portal-shell-body .head-icon.bg-light-dark,
html[data-theme="dark"] body.ki-portal-shell-body .head-user-link {
	background: var(--dk-surface-2) !important;
	box-shadow: var(--dk-shadow-sm);
}

html[data-theme="dark"] body.ki-portal-shell-body .head-user-chevron {
	background: var(--dk-surface-3);
}

/* Light ink on the re-pointed link blue would be white-on-pale; use the
   canvas colour as ink and cut the ring out of the header surface. */
html[data-theme="dark"] body.ki-portal-shell-body .badge-notification {
	background: var(--dk-link) !important;
	color: var(--dk-bg) !important;
	border: 2px solid var(--dk-surface);
}

html[data-theme="dark"] body.ki-portal-shell-body .header-searchbar .form-control,
html[data-theme="dark"] body.ki-portal-shell-body .workspace-search-modal-content .form-control {
	background: var(--dk-input);
	border-color: var(--dk-border-2);
	box-shadow: none;
}

html[data-theme="dark"] body.ki-portal-shell-body .header-search-kbd {
	background: var(--dk-surface-3);
}

/* --- Workspace search (L1270-1289) ---------------------------------------- */
html[data-theme="dark"] body.ki-portal-shell-body .workspace-search-results .list-group-item {
	border-top-color: var(--dk-border);
}

/* --- Command palette (L1318-1600) ----------------------------------------- */
html[data-theme="dark"] .ws-search-modal .ws-search-content {
	box-shadow: var(--dk-shadow);
}

html[data-theme="dark"] .ws-search-close kbd,
html[data-theme="dark"] .ws-search-foot kbd,
html[data-theme="dark"] .ws-group__count {
	background: var(--dk-surface-3);
}

html[data-theme="dark"] .ws-search-close:hover kbd {
	background: var(--sea-primary-soft);
}

html[data-theme="dark"] .ws-hit.is-active .ws-hit__icon {
	background: var(--dk-surface-3);
}

/* --- Offcanvas panels (L1635) --------------------------------------------- */
html[data-theme="dark"] body.ki-portal-shell-body .head-box {
	border-bottom-color: var(--dk-border);
}

} /* @media screen */

/* ==========================================================================
   Dark: design.css part 2: header widgets, panels, badges
   ========================================================================== */

/* =============================================================================
   design.css lines 1751 to end, dark overrides: notification bell and panel,
   header and sidebar avatars, profile panel, threat frame and pill, response
   queue cards, IAM tables, status timelines, Daily Tasks state pills, rails,
   status strip, tiers, recommendations and the progress steps.

   Rules that design.css already writes with var(--sea-*) follow the dark
   tokens on their own and are not repeated here. Everything below is a
   hardcoded light colour, a light shadow, or a token that does not hold up on
   a dark surface (translucent fills that must stay opaque, white text on
   --sea-primary-deep, which turns light blue in dark mode).

   Hues that the shared --dk-* palette does not carry (blue, cyan, violet,
   indigo, teal, magenta) are derived here as --dkb-* from the same light hues
   design.css uses for rails and pills, so a violet "In review" pill and its
   violet rail stay one colour family: fill = hue at 20% over the surface,
   ink = hue mixed into --dk-text (about 7:1 on --dk-surface).
   ========================================================================== */

@media screen {

html[data-theme="dark"] {
	--dkb-blue-fill: color-mix(in srgb, #2563eb 20%, transparent);
	--dkb-blue-ink: color-mix(in srgb, #2563eb 45%, var(--dk-text));
	--dkb-cyan-fill: color-mix(in srgb, #0891b2 20%, transparent);
	--dkb-cyan-ink: color-mix(in srgb, #0891b2 45%, var(--dk-text));
	--dkb-violet-fill: color-mix(in srgb, #7c3aed 20%, transparent);
	--dkb-violet-ink: color-mix(in srgb, #7c3aed 45%, var(--dk-text));
	--dkb-indigo-fill: color-mix(in srgb, #5b5bd6 20%, transparent);
	--dkb-indigo-ink: color-mix(in srgb, #5b5bd6 45%, var(--dk-text));
	--dkb-teal-fill: color-mix(in srgb, #0a8d7e 20%, transparent);
	--dkb-teal-ink: color-mix(in srgb, #0a8d7e 45%, var(--dk-text));
	--dkb-magenta-fill: color-mix(in srgb, #c026d3 20%, transparent);
	--dkb-magenta-ink: color-mix(in srgb, #c026d3 45%, var(--dk-text));
	/* The original brand deep blue (light --sea-primary-deep). Dark mode points
	   that token at the light link blue, which white text cannot sit on. */
	--dkb-brand-deep: #0087cc;
}

/* ---- Make-a-task header button ---------------------------------------------
   The plus badge must be OPAQUE to cut the clipboard outline under it; the
   dark --sea-primary-soft is translucent, so paint the same blend solid
   (14% brand blue over the header surface, as the button itself shows). */
html[data-theme="dark"] .header-make-task .ki-make-task-plus-bg {
	fill: color-mix(in srgb, #00a8ff 14%, var(--dk-surface));
}

/* ---- Notifications panel ------------------------------------------------- */
html[data-theme="dark"] body.ki-portal-shell-body .header-notification-canvas {
	border-color: var(--dk-border-2) !important;
	box-shadow: var(--dk-shadow), 0 0 0 1px rgba(0, 0, 0, 0.25);
}

/* A dark page needs a firmer dim than .18 for the panel to lift off it. */
html[data-theme="dark"] body.ki-portal-shell-body:has(.header-notification-canvas.show) .offcanvas-backdrop,
html[data-theme="dark"] body.ki-portal-shell-body:has(.ki-profile-canvas.show) .offcanvas-backdrop {
	--bs-backdrop-opacity: 0.45;
}

html[data-theme="dark"] body.ki-portal-shell-body .header-notification-canvas .ki-notif-body::-webkit-scrollbar-thumb,
html[data-theme="dark"] body.ki-portal-shell-body .ki-profile-canvas .ki-profile-body::-webkit-scrollbar-thumb {
	background: var(--dk-border-2);
}

html[data-theme="dark"] .ki-notif-bar {
	background: color-mix(in srgb, var(--dk-surface) 92%, transparent);
}

/* Severity palette: bars keep their hue, pastel fills and dark inks swap for
   the tinted fill + light ink pairs. */
html[data-theme="dark"] .ki-sev-danger    { --ki-ink: var(--dk-danger-ink);  --ki-soft: var(--dk-danger-fill); }
html[data-theme="dark"] .ki-sev-warning   { --ki-ink: var(--dk-warning-ink); --ki-soft: var(--dk-warning-fill); }
html[data-theme="dark"] .ki-sev-secondary { --ki-ink: var(--dk-neutral-ink); --ki-soft: var(--dk-neutral-fill); }
html[data-theme="dark"] .ki-sev-info      { --ki-ink: var(--dk-info-ink);    --ki-soft: var(--dk-info-fill); }
html[data-theme="dark"] .ki-sev-success   { --ki-ink: var(--dk-success-ink); --ki-soft: var(--dk-success-fill); }

html[data-theme="dark"] .ki-notif-foot-btn--ghost:hover {
	background: var(--dk-surface-3);
}

html[data-theme="dark"] .ki-notif-foot-btn--primary:hover {
	background: var(--dkb-brand-deep);
}

/* ---- Avatars (sidebar, header chip, profile hero) ----------------------- */
html[data-theme="dark"] body.ki-portal-shell-body .nav-profile .ki-nav-avatar,
html[data-theme="dark"] .header-user .ki-head-avatar,
html[data-theme="dark"] .ki-profile-avatar {
	background: linear-gradient(135deg, var(--sea-primary) 0%, var(--dkb-brand-deep) 100%);
}

html[data-theme="dark"] .ki-nav-online {
	border-color: var(--dk-surface);
}

/* ---- Sidebar gear dropdown ---------------------------------------------- */
html[data-theme="dark"] body.ki-portal-shell-body .profile-menu-dropdown .ki-nav-menu {
	border-color: var(--dk-border-2);
	box-shadow: var(--dk-shadow);
}

html[data-theme="dark"] body.ki-portal-shell-body .profile-menu-dropdown .ki-nav-menu .dropdown-item a.text-danger:hover {
	background: var(--dk-danger-fill);
}

/* ---- Workspace profile panel -------------------------------------------- */
html[data-theme="dark"] body.ki-portal-shell-body .ki-profile-canvas {
	border-color: var(--dk-border-2) !important;
	box-shadow: var(--dk-shadow), 0 0 0 1px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .ki-profile-hero {
	background:
		radial-gradient(120% 90% at 50% -20%, var(--sea-primary-soft) 0%, transparent 70%),
		linear-gradient(180deg, var(--sea-primary-mist), var(--sea-surface));
}

html[data-theme="dark"] .ki-2fa-on {
	color: var(--dk-success-ink);
	background: var(--dk-success-fill);
}

html[data-theme="dark"] .ki-2fa-off {
	color: var(--dk-warning-ink);
	background: var(--dk-warning-fill);
}

/* Darkening a dark chip reads as nothing; lift it instead. */
html[data-theme="dark"] .ki-2fa-off:hover {
	filter: brightness(1.18);
}

/* Icon tile tints */
html[data-theme="dark"] .ki-pl-blue   { background: var(--dkb-blue-fill);    color: var(--dkb-blue-ink); }
html[data-theme="dark"] .ki-pl-indigo { background: var(--dkb-indigo-fill);  color: var(--dkb-indigo-ink); }
html[data-theme="dark"] .ki-pl-green  { background: var(--dk-success-fill);  color: var(--dk-success-ink); }
html[data-theme="dark"] .ki-pl-slate  { background: var(--dk-neutral-fill);  color: var(--dk-neutral-ink); }
html[data-theme="dark"] .ki-pl-violet { background: var(--dkb-violet-fill);  color: var(--dkb-violet-ink); }
html[data-theme="dark"] .ki-pl-cyan   { background: var(--dk-info-fill);     color: var(--dk-info-ink); }
html[data-theme="dark"] .ki-pl-amber  { background: var(--dk-warning-fill);  color: var(--dk-warning-ink); }
html[data-theme="dark"] .ki-pl-teal   { background: var(--dkb-teal-fill);    color: var(--dkb-teal-ink); }
html[data-theme="dark"] .ki-pl-red    { background: var(--dk-danger-fill);   color: var(--dk-danger-ink); }

html[data-theme="dark"] .ki-profile-link--danger strong {
	color: var(--dk-danger-ink);
}

html[data-theme="dark"] .ki-profile-link--danger:hover {
	background: var(--dk-danger-fill);
}

/* ---- Response-queue row emphasis -----------------------------------------
   The light tint is a near-transparent background that REPLACES the card
   surface; on a dark page that let the darker canvas show through. Blend the
   same faint hue into the card surface instead. */
html[data-theme="dark"] .ki-action-card--critical {
	background: color-mix(in srgb, var(--sea-danger) 6%, var(--dk-surface));
}

html[data-theme="dark"] .ki-action-card--elevated {
	background: color-mix(in srgb, var(--sea-warning) 6%, var(--dk-surface));
}

/* ---- IAM · Users & Roles ------------------------------------------------- */
html[data-theme="dark"] .iam-act:hover {
	box-shadow: var(--dk-shadow-sm);
}

html[data-theme="dark"] .iam-act-success:hover {
	color: var(--dk-success-ink);
}

/* ---- Status timelines ----------------------------------------------------
   Unsampled time: stripes one step lighter than the bar, so a gap in the
   record is visible on the dark track rather than blending into it. */
html[data-theme="dark"] .hist-unknown,
html[data-theme="dark"] .hist-bar-empty {
	background: repeating-linear-gradient(
		135deg,
		var(--dk-surface-3) 0 4px,
		transparent 4px 8px
	);
}

html[data-theme="dark"] .hist-pop {
	border-color: var(--dk-border-2);
	background: var(--dk-surface-2);
}

/* ---- Daily Tasks state pills --------------------------------------------- */
html[data-theme="dark"] .ki-state {
	--ki-state-bg: var(--dk-neutral-fill);
	--ki-state-fg: var(--dk-neutral-ink);
}
html[data-theme="dark"] .ki-state-open { --ki-state-bg: transparent; --ki-state-fg: var(--dk-neutral-ink); --ki-state-line: var(--dk-faint); }
html[data-theme="dark"] .ki-state-in_progress { --ki-state-bg: var(--dkb-blue-fill); --ki-state-fg: var(--dkb-blue-ink); }
html[data-theme="dark"] .ki-state-waiting { --ki-state-bg: var(--dkb-cyan-fill); --ki-state-fg: var(--dkb-cyan-ink); }
html[data-theme="dark"] .ki-state-blocked { --ki-state-bg: var(--dk-danger-fill); --ki-state-fg: var(--dk-danger-ink); --ki-state-line: color-mix(in srgb, var(--sea-danger) 55%, transparent); }
html[data-theme="dark"] .ki-state-in_review { --ki-state-bg: var(--dkb-violet-fill); --ki-state-fg: var(--dkb-violet-ink); }
html[data-theme="dark"] .ki-state-deferred { --ki-state-bg: var(--dk-neutral-fill); --ki-state-fg: var(--dk-muted); }
html[data-theme="dark"] .ki-state-done { --ki-state-bg: var(--dk-success-fill); --ki-state-fg: var(--dk-success-ink); }
html[data-theme="dark"] .ki-state-cancelled { --ki-state-bg: var(--dk-neutral-fill); --ki-state-fg: var(--dk-muted); }

/* Rails: the two pale greys would glow brighter than the live colours on a
   dark row; keep them quiet. */
html[data-theme="dark"] .ki-rail-deferred { --ki-rail: var(--dk-faint); }
html[data-theme="dark"] .ki-rail-cancelled { --ki-rail: var(--dk-border-2); }

/* ---- Status strip -------------------------------------------------------- */
html[data-theme="dark"] .ki-state-strip-sep {
	background: var(--dk-border-2);
}

html[data-theme="dark"] .ki-chip {
	border-color: var(--dk-border-2);
	background: var(--dk-surface);
}

/* Restated: the rule above out-ranks the light hover and active borders. */
html[data-theme="dark"] .ki-chip:hover {
	border-color: var(--ki-chip);
}

html[data-theme="dark"] .ki-state-strip a.ki-chip {
	color: var(--dk-text) !important;
}

html[data-theme="dark"] .ki-state-strip a.ki-chip.is-active {
	border-color: var(--ki-chip);
	background: var(--ki-chip);
	color: #fff !important;
}

html[data-theme="dark"] .ki-chip-count {
	background: var(--dk-surface-3);
	color: var(--dk-text);
}

/* The "All" chip's slate icon vanishes on the dark surface; use the "To do"
   slate, which still carries white text when the chip is active. */
html[data-theme="dark"] .ki-chip-all {
	--ki-chip: #64748b;
}

/* ---- Tiers and escalation ------------------------------------------------ */
html[data-theme="dark"] .ki-tier-1 {
	background: var(--dk-neutral-fill);
	color: var(--dk-neutral-ink);
}

html[data-theme="dark"] .ki-tier-2,
html[data-theme="dark"] .ki-tier2 {
	background: var(--dkb-magenta-fill);
	color: var(--dkb-magenta-ink);
}

html[data-theme="dark"] .ki-text-tier2 {
	color: var(--dkb-magenta-ink) !important;
}

html[data-theme="dark"] .ki-escalation {
	background: color-mix(in srgb, #c026d3 10%, transparent);
}

/* ---- Recommendations ----------------------------------------------------- */
html[data-theme="dark"] .ki-recommended {
	background: var(--dk-warning-fill);
	color: var(--dk-warning-ink);
}

/* ---- Task progress steps --------------------------------------------------
   The base rules below out-rank every light state modifier, so each state is
   restated after them. Saturated dots keep their hue. */
html[data-theme="dark"] .ki-steps li {
	color: var(--dk-faint);
}

html[data-theme="dark"] .ki-steps li::before {
	border-color: var(--dk-border-2);
	background: var(--dk-surface);
}

html[data-theme="dark"] .ki-steps li::after {
	background: var(--dk-border-2);
}

html[data-theme="dark"] .ki-steps .ki-step-sub {
	color: var(--dk-faint);
}

html[data-theme="dark"] .ki-steps li.is-done { color: var(--dk-success-ink); }
html[data-theme="dark"] .ki-steps li.is-done::before { border-color: #16a34a; background: #16a34a; }
html[data-theme="dark"] .ki-steps li.is-done::after,
html[data-theme="dark"] .ki-steps li.is-current::after,
html[data-theme="dark"] .ki-steps li.is-paused::after,
html[data-theme="dark"] .ki-steps li.is-cancelled::after { background: color-mix(in srgb, #16a34a 60%, var(--dk-surface)); }
html[data-theme="dark"] .ki-steps li.is-current { color: var(--dkb-blue-ink); }
html[data-theme="dark"] .ki-steps li.is-current::before { border-color: #2563eb; background: #2563eb; box-shadow: 0 0 0 4px rgba(37, 99, 235, .28); }
html[data-theme="dark"] .ki-steps li.is-paused::before { border-color: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, .22); }
html[data-theme="dark"] .ki-steps li.is-skipped { color: var(--dk-faint); }
html[data-theme="dark"] .ki-steps li.is-cancelled { color: var(--dk-muted); }
html[data-theme="dark"] .ki-steps li.is-cancelled::before { border-color: #9ca3af; background: #9ca3af; }

} /* @media screen */

/* ==========================================================================
   Dark: Page stylesheets
   ========================================================================== */

/* =============================================================================
   Dark fragment 30_pages_a: page stylesheets.

   Covers, rule by rule:
     fleet.css, fleet_signals.css, ki_nav.css, tenant_quick_view.css,
     entity_detail.css, vuln_detail.css, backup_detail.css

   Every rule is scoped to html[data-theme="dark"] and the body is wrapped in
   @media screen, so print and the light theme are untouched.

   These sheets lean on low-alpha tints (rgba(..., .1)) that already read on a
   dark surface, so most fills stay as they are. What changes:
     - white / near-white panels, light borders and light shadows;
     - the dark status inks (#0e9c6c, #b9790a, #c41f37 ...), which drop under
       3:1 on the dark surface and move to the --dk-*-ink tokens;
     - categorical inks with no token (indigo, teal, purple, orange ...), which
       keep their hue by mixing the light rule's own ink with --dk-text.
   Where a dark override on a base class would out-rank a light modifier that
   set the same property (for example .ed-cov vs .ed-cov-on), the modifier is
   re-declared below the base so it still wins.
   ========================================================================== */

@media screen {

/* --- Local helpers --------------------------------------------------------- */

html[data-theme="dark"] {
	/* Indigo ink for the fleet accent (NOTICE, dispatched, info tones). */
	--dk30-indigo-ink: color-mix(in srgb, var(--fleet-accent, #5b6cff) 62%, var(--dk-text));
	/* Teal: the light accent-2 is already bright enough on the dark surface. */
	--dk30-teal-ink: var(--fleet-accent-2, #00c2cb);
	/* "High" sits between critical (danger) and medium (warning). */
	--dk30-coral-ink: color-mix(in srgb, var(--dk-danger-ink) 70%, var(--dk-warning-ink));

	/* fleet_signals.css tokens */
	--sig-ink: var(--dk-text);
	--sig-muted: var(--dk-muted);

	/* tenant_quick_view.css tokens (the --sea-* backed ones follow on their own) */
	--tqv-ink: var(--dk-text);
	--tqv-ink-soft: var(--dk-neutral-ink);
	--tqv-muted: var(--dk-muted);
	--tqv-line: var(--dk-border);
	--tqv-surface: var(--dk-surface-2);
	--tqv-canvas: var(--dk-surface);
	--tqv-danger-soft: var(--dk-danger-fill);
	--tqv-warning-soft: var(--dk-warning-fill);
	--tqv-success-ink: var(--dk-success-ink);
	--tqv-success-soft: var(--dk-success-fill);
	--tqv-secondary-soft: var(--dk-neutral-fill);
}

/* =============================================================================
   fleet.css
   ========================================================================== */

html[data-theme="dark"] .fleet-card:hover {
	box-shadow: var(--dk-shadow) !important;
}

/* Status pills */
html[data-theme="dark"] .pill-online { color: var(--dk-success-ink); }
html[data-theme="dark"] .pill-stale { color: var(--dk-warning-ink); }
html[data-theme="dark"] .pill-offline { color: var(--dk-muted); }
html[data-theme="dark"] .pill-unknown { color: var(--dk-faint); }

/* Severity badges */
html[data-theme="dark"] .sev-BLOCK { color: var(--dk-danger-ink); }
html[data-theme="dark"] .sev-ALERT { color: var(--dk-warning-ink); }
html[data-theme="dark"] .sev-WARNING { color: var(--dk30-teal-ink); }
html[data-theme="dark"] .sev-NOTICE { color: var(--dk30-indigo-ink); }
html[data-theme="dark"] .sev-INFO { color: var(--dk-muted); }
html[data-theme="dark"] .sev-DEBUG { color: var(--dk-faint); }

/* Command status */
html[data-theme="dark"] .cmd-pending { color: var(--dk-warning-ink); }
html[data-theme="dark"] .cmd-dispatched { color: var(--dk30-indigo-ink); }
html[data-theme="dark"] .cmd-succeeded,
html[data-theme="dark"] .cmd-completed { color: var(--dk-success-ink); }
html[data-theme="dark"] .cmd-failed,
html[data-theme="dark"] .cmd-rejected,
html[data-theme="dark"] .cmd-cancelled { color: var(--dk-danger-ink); }

/* JSON viewer and YAML preview are already dark; an inset hairline keeps
   them from melting into the dark card without changing their size. */
html[data-theme="dark"] .fleet-json,
html[data-theme="dark"] .fleet-yaml-preview {
	box-shadow: inset 0 0 0 1px var(--dk-border-2);
}

html[data-theme="dark"] .fleet-empty { color: var(--dk-muted); }
html[data-theme="dark"] .fleet-live { color: var(--dk-success-ink); }

/* Host resource meters */
html[data-theme="dark"] .fleet-metric-label,
html[data-theme="dark"] .fleet-metric-sub { color: var(--dk-muted); }

/* Category tabs */
html[data-theme="dark"] .fleet-cat-tab { color: var(--dk-muted); }
html[data-theme="dark"] .fleet-cat-tab:hover { color: var(--dk30-indigo-ink); }
html[data-theme="dark"] .fleet-cat-tab.active { color: #fff; }

/* Config builder */
html[data-theme="dark"] .fleet-section-title {
	color: var(--dk-muted);
	border-bottom-color: var(--dk-border-2);
}
html[data-theme="dark"] .cfg-help { color: var(--dk30-indigo-ink); }
html[data-theme="dark"] .popover-body .cfg-rec { color: var(--dk-success-ink); }

/* Endpoints: vulnerability severity buckets */
html[data-theme="dark"] .sev-critical { color: var(--dk-danger-ink); }
html[data-theme="dark"] .sev-high { color: var(--dk30-coral-ink); }
html[data-theme="dark"] .sev-medium { color: var(--dk-warning-ink); }
html[data-theme="dark"] .sev-low { color: var(--dk30-teal-ink); }
html[data-theme="dark"] .sev-unknown { color: var(--dk-muted); }

/* Endpoints: OS badge */
html[data-theme="dark"] .ep-os-badge { color: var(--dk30-indigo-ink); }
html[data-theme="dark"] .ep-linux { color: color-mix(in srgb, #d2691e 60%, var(--dk-text)); }
html[data-theme="dark"] .ep-windows { color: color-mix(in srgb, #0078d7 55%, var(--dk-text)); }
html[data-theme="dark"] .ep-macos { color: var(--dk-neutral-ink); }

/* Endpoints: mini stat tiles */
html[data-theme="dark"] .ep-mini-lbl { color: var(--dk-muted); }
html[data-theme="dark"] .ep-mini-crit .ep-mini-num { color: var(--dk-danger-ink); }
html[data-theme="dark"] .ep-mini-high .ep-mini-num { color: var(--dk30-coral-ink); }
html[data-theme="dark"] .ep-mini-med .ep-mini-num { color: var(--dk-warning-ink); }
html[data-theme="dark"] .ep-mini-low .ep-mini-num { color: var(--dk30-teal-ink); }

/* Per-WAN connection-type badge. Each type keeps its own hue. */
html[data-theme="dark"] .bw-badge--starlink { color: var(--dk30-indigo-ink); }
html[data-theme="dark"] .bw-badge--satellite-vsat { color: color-mix(in srgb, #7a4fd0 50%, var(--dk-text)); }
html[data-theme="dark"] .bw-badge--fiber { color: var(--dk30-teal-ink); }
html[data-theme="dark"] .bw-badge--cable { color: var(--dk-warning-ink); }
html[data-theme="dark"] .bw-badge--dsl { color: var(--dk-neutral-ink); }
html[data-theme="dark"] .bw-badge--cellular { color: color-mix(in srgb, #d63a5c 55%, var(--dk-text)); }
html[data-theme="dark"] .bw-badge--fixed-wireless { color: var(--dk-success-ink); }
html[data-theme="dark"] .bw-badge--transit { color: var(--dk-neutral-ink); }
html[data-theme="dark"] .bw-badge--unknown { color: var(--dk-muted); }

/* =============================================================================
   fleet_signals.css
   (--sig-ink / --sig-muted are re-pointed above, which covers the tile
   values, labels, feed, mix bars and per-source table.)
   ========================================================================== */

html[data-theme="dark"] .sig-head {
	background:
		radial-gradient(1200px 240px at 12% -40%, rgba(91, 108, 255, .18), transparent 60%),
		radial-gradient(900px 220px at 88% -30%, rgba(0, 194, 203, .16), transparent 62%),
		linear-gradient(180deg, var(--dk-surface) 0%, var(--dk-surface-2) 100%);
	border-color: var(--dk-border-2);
}

/* The sheen at full white strength would flash across a dark header. */
html[data-theme="dark"] .sig-head::after {
	background: linear-gradient(105deg, transparent 38%, var(--dk-border) 50%, transparent 62%);
}

/* Connection state pill */
html[data-theme="dark"] .sig-conn.is-live { color: var(--dk-success-ink); }
html[data-theme="dark"] .sig-conn.is-connecting { color: var(--dk-warning-ink); }
html[data-theme="dark"] .sig-conn.is-down { color: var(--dk-danger-ink); }

html[data-theme="dark"] .sig-icon.neutral { color: var(--dk-muted); }

/* Chips */
html[data-theme="dark"] .sig-chip { color: var(--dk-muted); }
html[data-theme="dark"] .sig-chip.stream { color: var(--dk30-indigo-ink); }
html[data-theme="dark"] .sig-chip.mode-plain { color: var(--dk-muted); }
html[data-theme="dark"] .sig-chip.mode-signal { color: var(--dk30-teal-ink); }
html[data-theme="dark"] .sig-chip.rejected { color: var(--sig-reject); }
html[data-theme="dark"] .sig-chip.method { color: var(--dk30-teal-ink); }

/* Channel switch: light fills the active segment with --sig-ink and white
   text; --sig-ink is now light, so the text flips to the page colour. */
html[data-theme="dark"] .sig-channel .btn.active { color: var(--dk-bg); }

/* =============================================================================
   ki_nav.css
   ========================================================================== */

html[data-theme="dark"] .ki-hx-loading { color: var(--dk-muted); }

/* =============================================================================
   vuln_detail.css
   ========================================================================== */

html[data-theme="dark"] .app-wrapper .vd-crumbs a { color: var(--dk-link) !important; }

html[data-theme="dark"] .vd-sub .ti { color: var(--dk-muted); }

/* --vd-sev stays saturated for fills (ring stroke, hero stripe, grade tile
   with white text); where it is used as text it is lifted toward --dk-text. */
html[data-theme="dark"] .vd-ring-num {
	color: color-mix(in srgb, var(--vd-sev, var(--fleet-accent, #5b6cff)) 60%, var(--dk-text));
}
html[data-theme="dark"] .vd-ring-cap { color: var(--dk-muted); }

/* Signal tiles */
html[data-theme="dark"] .vd-signal:hover { box-shadow: var(--dk-shadow) !important; }
html[data-theme="dark"] .vd-signal-cap { color: var(--dk-muted); }

/* Code blocks: the default block is already dark, the quiet one was light. */
html[data-theme="dark"] .vd-code pre { box-shadow: inset 0 0 0 1px var(--dk-border-2); }
html[data-theme="dark"] .vd-code-quiet pre {
	background: var(--dk-surface-2);
	color: var(--dk-text);
}
html[data-theme="dark"] .vd-code-quiet .vd-code-copy {
	color: var(--dk-muted);
	background: var(--dk-border);
}
html[data-theme="dark"] .vd-code-quiet .vd-code-copy:hover { color: var(--dk-text); }

/* One-click and callouts */
html[data-theme="dark"] .vd-oneclick > .ti { color: var(--dk-muted); }
html[data-theme="dark"] .vd-oneclick-on > .ti { color: var(--dk30-indigo-ink); }
html[data-theme="dark"] .vd-callout > .ti { color: var(--dk30-indigo-ink); }
html[data-theme="dark"] .vd-callout-warn > .ti { color: var(--dk-warning-ink); }
html[data-theme="dark"] .vd-callout-ok > .ti { color: var(--dk-success-ink); }

/* Tone chips */
html[data-theme="dark"] .vd-tone-success { color: var(--dk-success-ink); }
html[data-theme="dark"] .vd-tone-danger { color: var(--dk-danger-ink); }
html[data-theme="dark"] .vd-tone-warning { color: var(--dk-warning-ink); }
html[data-theme="dark"] .vd-tone-info { color: var(--dk30-indigo-ink); }
html[data-theme="dark"] .vd-tone-muted { color: var(--dk-muted); }

/* Timeline: base dot first, tone modifiers after so their ink still wins. */
html[data-theme="dark"] .vd-tl-dot {
	background: var(--dk-surface-2);
	color: var(--dk-muted);
}
html[data-theme="dark"] .vd-tl-danger .vd-tl-dot { color: var(--dk-danger-ink); }
html[data-theme="dark"] .vd-tl-warning .vd-tl-dot { color: var(--dk-warning-ink); }
html[data-theme="dark"] .vd-tl-success .vd-tl-dot { color: var(--dk-success-ink); }
html[data-theme="dark"] .vd-tl-info .vd-tl-dot { color: var(--dk30-indigo-ink); }

/* Sidebar facts and links */
html[data-theme="dark"] .vd-facts dt { color: var(--dk-muted); }
html[data-theme="dark"] .vd-links a > .ti:first-child { color: var(--dk30-indigo-ink); }

/* =============================================================================
   entity_detail.css
   ========================================================================== */

html[data-theme="dark"] .ed-ring-grade,
html[data-theme="dark"] .ed-hero-icon {
	color: color-mix(in srgb, var(--vd-sev, var(--fleet-accent, #5b6cff)) 60%, var(--dk-text));
}

/* In-page section nav */
html[data-theme="dark"] .ed-subnav {
	background: color-mix(in srgb, var(--dk-surface) 92%, transparent);
	box-shadow: var(--dk-shadow-sm), inset 0 0 0 1px var(--dk-border);
}
html[data-theme="dark"] .app-wrapper .ed-subnav a { color: var(--dk-muted) !important; }
html[data-theme="dark"] .app-wrapper .ed-subnav a:hover { color: var(--dk30-indigo-ink) !important; }
html[data-theme="dark"] .ed-subnav .ed-count-hot { color: var(--dk-danger-ink); }

/* Needs attention */
html[data-theme="dark"] .ed-attention li > .ti { color: var(--dk-muted); }
html[data-theme="dark"] .ed-attention .ed-att-danger > .ti { color: var(--dk-danger-ink); }
html[data-theme="dark"] .ed-attention .ed-att-warning > .ti { color: var(--dk-warning-ink); }
html[data-theme="dark"] .ed-attention .ed-att-info > .ti { color: var(--dk30-indigo-ink); }
html[data-theme="dark"] .ed-att-detail { color: var(--dk-muted); }
html[data-theme="dark"] .ed-all-clear > .ti { color: var(--dk-success-ink); }

/* Score reasons */
html[data-theme="dark"] .ed-pts-danger { color: var(--dk-danger-ink); }
html[data-theme="dark"] .ed-pts-warning { color: var(--dk-warning-ink); }
html[data-theme="dark"] .ed-pts-info { color: var(--dk-muted); }
html[data-theme="dark"] .ed-pts-success { color: var(--dk-success-ink); }

/* Share bars and gauges */
html[data-theme="dark"] .ed-bar-count { color: var(--dk-muted); }
html[data-theme="dark"] .ed-gauge-cap { color: var(--dk-muted); }

/* Protection coverage: base card first, state tints after (they set the
   background too and would otherwise lose to the base override). */
html[data-theme="dark"] .ed-cov { background: var(--dk-surface-2); }
html[data-theme="dark"] .ed-cov-detail { color: var(--dk-muted); }
html[data-theme="dark"] .ed-cov-on {
	background: linear-gradient(var(--dk-success-fill), var(--dk-success-fill)) var(--dk-surface-2);
}
html[data-theme="dark"] .ed-cov-on > .ti,
html[data-theme="dark"] .ed-cov-on .ed-cov-state { color: var(--dk-success-ink); }
html[data-theme="dark"] .ed-cov-partial {
	background: linear-gradient(var(--dk-warning-fill), var(--dk-warning-fill)) var(--dk-surface-2);
}
html[data-theme="dark"] .ed-cov-partial > .ti,
html[data-theme="dark"] .ed-cov-partial .ed-cov-state { color: var(--dk-warning-ink); }
html[data-theme="dark"] .ed-cov-off {
	background: linear-gradient(var(--dk-danger-fill), var(--dk-danger-fill)) var(--dk-surface-2);
}
html[data-theme="dark"] .ed-cov-off > .ti,
html[data-theme="dark"] .ed-cov-off .ed-cov-state { color: var(--dk-danger-ink); }
html[data-theme="dark"] .ed-cov-unknown > .ti,
html[data-theme="dark"] .ed-cov-unknown .ed-cov-state { color: var(--dk-muted); }

/* Mini stat blocks */
html[data-theme="dark"] .ed-mini-lbl { color: var(--dk-muted); }
html[data-theme="dark"] .ed-mini-crit .ed-mini-num { color: var(--dk-danger-ink); }
html[data-theme="dark"] .ed-mini-high .ed-mini-num { color: var(--dk30-coral-ink); }
html[data-theme="dark"] .ed-mini-med .ed-mini-num { color: var(--dk-warning-ink); }
html[data-theme="dark"] .ed-mini-low .ed-mini-num { color: var(--dk30-teal-ink); }
html[data-theme="dark"] .ed-mini-ok .ed-mini-num { color: var(--dk-success-ink); }

/* Small helpers */
html[data-theme="dark"] .ed-empty { color: var(--dk-muted); }
html[data-theme="dark"] .ed-chip { color: var(--dk-neutral-ink); }
html[data-theme="dark"] .ed-curated { color: var(--dk-muted); }
html[data-theme="dark"] .ed-prompt {
	background: var(--dk-surface-2);
	color: var(--dk-text);
}
html[data-theme="dark"] .ed-sticky-head thead th { background: var(--dk-surface); }

/* =============================================================================
   backup_detail.css
   ========================================================================== */

/* Volume switcher: base first, the selected volume after. */
html[data-theme="dark"] .app-wrapper .bk-volume {
	color: var(--dk-muted) !important;
	background: var(--dk-surface);
}
html[data-theme="dark"] .app-wrapper .bk-volume.bk-volume-on {
	background: linear-gradient(var(--dk-primary-fill), var(--dk-primary-fill)) var(--dk-surface);
	color: var(--dk30-indigo-ink) !important;
}

html[data-theme="dark"] .bk-ctl-head { color: var(--dk-muted); }

/* Storage card: drive tiles sit inside a card. */
html[data-theme="dark"] .bk-drive { background: var(--dk-surface-2); }
html[data-theme="dark"] .bk-drive-full {
	background: linear-gradient(var(--dk-danger-fill), var(--dk-danger-fill)) var(--dk-surface-2);
}

/* =============================================================================
   tenant_quick_view.css
   (the --tqv-* tokens are re-pointed above; these are the literal colours)
   ========================================================================== */

html[data-theme="dark"] .tqv-backdrop { background: rgba(0, 0, 0, .55); }

html[data-theme="dark"] .tqv-drawer {
	box-shadow: var(--dk-shadow), 0 0 0 1px var(--dk-border-2);
}

html[data-theme="dark"] .tqv-icon-btn:hover { background: var(--dk-surface-3); }
/* Re-declared after :hover, as in the light sheet, so it keeps its tint. */
html[data-theme="dark"] .tqv-icon-btn.is-attention {
	background: var(--tqv-warning-soft);
	color: var(--tqv-warning-ink);
}

/* Loading skeleton */
html[data-theme="dark"] .tqv-skel {
	background: linear-gradient(90deg, var(--dk-surface-2) 0%, var(--dk-surface-3) 50%, var(--dk-surface-2) 100%);
	background-size: 200% 100%;
}

/* Hero */
html[data-theme="dark"] .tqv-hero {
	background: linear-gradient(135deg, transparent 45%, var(--dk-primary-fill) 100%) var(--dk-surface-2);
}
html[data-theme="dark"] .tqv-id code { background: var(--dk-surface-3); }

/* Badges: base first, tones after (they set the background too). */
html[data-theme="dark"] .tqv-badge { background: var(--dk-surface-2); }
html[data-theme="dark"] .tqv-badge--primary { background: var(--tqv-primary-soft); }
html[data-theme="dark"] .tqv-badge--success { background: var(--tqv-success-soft); }
html[data-theme="dark"] .tqv-badge--danger { background: var(--tqv-danger-soft); }
html[data-theme="dark"] .tqv-badge--warning { background: var(--tqv-warning-soft); }
html[data-theme="dark"] .tqv-badge--muted { background: var(--tqv-secondary-soft); }

/* Buttons */
html[data-theme="dark"] .tqv-btn--ghost { background: var(--dk-surface-2); }
html[data-theme="dark"] .tqv-btn--ghost:hover {
	border-color: var(--dk-border-2);
	box-shadow: var(--dk-shadow-sm);
}

/* KPI tiles */
html[data-theme="dark"] .tqv-kpi { background: var(--dk-surface-2); }
html[data-theme="dark"] .tqv-kpi:hover {
	border-color: var(--dk-border-2);
	box-shadow: var(--dk-shadow-sm);
}

/* Tabs */
html[data-theme="dark"] .tqv-tab:hover { background: var(--dk-surface-2); }

/* Cards and list surfaces */
html[data-theme="dark"] .tqv-card,
html[data-theme="dark"] .tqv-stat,
html[data-theme="dark"] .tqv-table-wrap,
html[data-theme="dark"] .tqv-compose,
html[data-theme="dark"] .tqv-picker-item,
html[data-theme="dark"] .tqv-entry-body { background: var(--dk-surface-2); }

/* Pinned notes: the light amber panel becomes the warning tint. */
html[data-theme="dark"] .tqv-pinned-item,
html[data-theme="dark"] .tqv-entry.is-pinned .tqv-entry-body {
	border-color: color-mix(in srgb, var(--dk-warning-ink) 30%, transparent);
	background: linear-gradient(var(--dk-warning-fill), var(--dk-warning-fill)) var(--dk-surface-2);
}

/* Table */
html[data-theme="dark"] .tqv-table th { background: var(--dk-surface-3); }
html[data-theme="dark"] .tqv-table tbody tr:hover td { background: var(--dk-surface-3); }

/* Empty state */
html[data-theme="dark"] .tqv-empty {
	border-color: var(--dk-border-2);
	background: var(--dk-surface-2);
}
html[data-theme="dark"] .tqv-empty .ti { color: var(--dk-faint); }

/* History compose: kind toggles, base first, checked after. */
html[data-theme="dark"] .tqv-kind span { background: var(--dk-surface-2); }
html[data-theme="dark"] .tqv-kind input:checked + span { background: var(--tqv-primary-soft); }

/* Inputs */
html[data-theme="dark"] .tqv-input,
html[data-theme="dark"] .tqv-input.tqv-search { background: var(--dk-input); }
html[data-theme="dark"] .tqv-input:focus {
	border-color: color-mix(in srgb, var(--dk-link) 55%, transparent);
	background: var(--dk-input);
}

/* Filter chips: the active chip is the ink filled inverse, so on dark it is
   a light chip with page-coloured text. */
html[data-theme="dark"] .tqv-chip { background: var(--dk-surface-2); }
html[data-theme="dark"] .tqv-chip.is-active {
	border-color: var(--dk-text);
	background: var(--dk-text);
	color: var(--dk-bg);
}

} /* @media screen */

/* ==========================================================================
   Dark: Topology, world map, showroom, reel, manual
   ========================================================================== */

/*

   Covers topology.css, worldmap.css, showroom.css, reel.css, manual.css and
   document.css.

   - topology.css: the map stage (#topo, nodes, links, pills, hover card, HUD,
     legend, on-map WAN buttons) is a fixed navy picture in both themes and
     needs nothing here. Only the parts that sit on the console surface are
     themed: the WAN failover card below the map (status chips, event
     timeline), and the "Why this WAN" modal, whose card topology.js paints
     white with inline styles (hence the !important below).
   - worldmap.css: the stage is navy by default and only goes light under
     [data-theme="light"], so the dark console already gets the dark picture.
     No rules needed.
   - showroom.css, reel.css: standalone documents (Video Sessions room, live
     join page, video ad reel) that hard-code <html data-theme="dark"> and do
     not load theme_dark.css. Already dark, nothing to do.
   - document.css, manual.css: printable A4 documents and the manual book,
     standalone pages that do not load theme_dark.css. Skipped on purpose. */

@media screen {

/* --- Topology: WAN failover card (Bootstrap card below the map) ---------- */

html[data-theme="dark"] .topo-chip-active { background: var(--dk-success-fill); color: var(--dk-success-ink); }
html[data-theme="dark"] .topo-chip-healthy { background: var(--dk-primary-fill); color: var(--dk-primary-ink); }
html[data-theme="dark"] .topo-chip-degraded,
html[data-theme="dark"] .topo-chip-reachable { background: var(--dk-warning-fill); color: var(--dk-warning-ink); }
html[data-theme="dark"] .topo-chip-down { background: var(--dk-danger-fill); color: var(--dk-danger-ink); }
html[data-theme="dark"] .topo-chip-disabled { background: var(--dk-neutral-fill); color: var(--dk-neutral-ink); }

/* Per-WAN chip tray: the light 3% black wash vanishes on a dark card. */
html[data-theme="dark"] .topo-chip-wrap { background: var(--dk-surface-2); }

/* Event timeline rows and kind tags. */
html[data-theme="dark"] .topo-evt { border-top-color: var(--dk-border); }
html[data-theme="dark"] .topo-evt-switch .topo-evt-kind { background: var(--dk-warning-fill); color: var(--dk-warning-ink); }
html[data-theme="dark"] .topo-evt-outage .topo-evt-kind { background: var(--dk-danger-fill); color: var(--dk-danger-ink); }
html[data-theme="dark"] .topo-evt-restored .topo-evt-kind { background: var(--dk-success-fill); color: var(--dk-success-ink); }

/* --- Topology: inline rename editor (mounted inside the stage) ----------- */

html[data-theme="dark"] .topo-editor {
	background: var(--dk-surface-2);
	border-color: var(--dk-border-2);
	box-shadow: var(--dk-shadow);
	color: var(--dk-text);
}

/* --- Topology: "Why this WAN is selected" modal ------------------------- */
/* topology.js sets background:#fff / color:#1e2433 inline on the card, the
   heading and the table (including --bs-table-color), so these must be
   !important to win over the inline styles. */

html[data-theme="dark"] #topo-why-modal .topo-editor {
	background: var(--dk-surface-2) !important;
	color: var(--dk-text) !important;
}
html[data-theme="dark"] #topo-why-modal .topo-editor h3 { color: var(--dk-text) !important; }
html[data-theme="dark"] #topo-why-modal .table {
	--bs-table-color: var(--dk-text) !important;
	--bs-table-border-color: var(--dk-border-2);
	color: var(--dk-text) !important;
	border-color: var(--dk-border-2);
}
/* Active WAN row: Bootstrap's .table-success is a fixed pale green with black
   ink in 5.3.0, regardless of data-bs-theme. */
html[data-theme="dark"] #topo-why-modal .table-success {
	--bs-table-color: var(--dk-text);
	--bs-table-bg: var(--dk-success-fill);
	--bs-table-border-color: var(--dk-border-2);
	--bs-table-hover-bg: var(--dk-surface-3);
	--bs-table-hover-color: var(--dk-text);
	color: var(--dk-text);
	border-color: var(--dk-border-2);
}

} /* @media screen */

/* ==========================================================================
   Dark: Script-built UI (charts chrome, theme picker)
   ========================================================================== */

/* =============================================================================
   Dark fragment 35_js: UI that the console's JavaScript builds.

   Audit of the app scripts the templates load (vendor libraries and the stock
   ki-admin demo scripts that no template loads are out of scope):
     - theme_toggle.js now themes every ApexCharts instance as it renders and
       redraws them on a switch (axis, legend, donut centre text, grid, pie
       seams, tooltip), so chart colours need no CSS. What CSS still owns is
       the chart chrome ApexCharts draws as HTML: tooltips, the axis tooltips,
       the toolbar icons and the export menu, styled by apexcharts' injected
       sheet with fixed black / white values; those are below.
     - ki_dashboards.js: label grey #8a93a1 reads 5.5:1 on the dark card and
       its grid is a low-alpha grey, so it needs nothing beyond the hook.
     - topology.js "Why this WAN" card: now paints with --dk-* tokens (light
       fallbacks) instead of a fixed white card; 31_pages_b also forces it.
     - fleet/signals.html scope canvas: low-alpha greys and saturated traces,
       readable on both surfaces; it redraws every tick.
     - timeline.js (.hist-pop), workspace_search.js (.ws-group ...), ki_nav.js
       (.ki-hx-loading, .ki-spinner) and tenant_quick_view.js (.tqv-*) build
       markup whose rules live in design.css / ki_nav.css /
       tenant_quick_view.css and are themed by the 20/21 and 30 fragments.
     - worldmap.js, timeline.js, workspace_search.js, ki_nav.js, safe_dom.js,
       portal_control.js and tenant_quick_view.js set no colours from script.
     - map.html, video_sessions/room.html, live/join.html and the video ad
       reel are standalone documents already fixed to dark; they do not load
       this sheet.
   ========================================================================== */

@media screen {

/* --- Theme picker on the dark canvas --------------------------------------- */

/* A recessed track with the pressed segment lifted out of it. */
html[data-theme="dark"] .ki-profile-menu .ki-theme-seg {
	border-color: var(--dk-border-2);
	background: var(--dk-input);
}

html[data-theme="dark"] .ki-profile-menu .ki-theme-seg button[aria-pressed="true"] {
	background: var(--dk-surface-3);
	color: var(--dk-text);
	box-shadow: var(--dk-shadow-sm);
}

html[data-theme="dark"] .ki-profile-menu .ki-theme-seg button[aria-pressed="true"] i {
	color: var(--dk-link);
}

/* --- ApexCharts chrome ------------------------------------------------------
   Every chart is in ApexCharts' dark mode once the console is dark (see
   theme_toggle.js), which puts .apexcharts-theme-dark on the chart and its
   tooltips. Its own dark look is translucent black boxes; these pull them
   onto the console palette. */

/* Point tooltip */
html[data-theme="dark"] .apexcharts-tooltip.apexcharts-theme-dark {
	border: 1px solid var(--dk-border-2);
	background: var(--dk-surface-2);
	color: var(--dk-text);
	box-shadow: var(--dk-shadow-sm);
}

html[data-theme="dark"] .apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
	border-bottom: 1px solid var(--dk-border-2);
	background: var(--dk-surface-3);
}

/* Axis crosshair tooltips and their arrows (:before is the border, :after
   the fill). */
html[data-theme="dark"] .apexcharts-xaxistooltip.apexcharts-theme-dark,
html[data-theme="dark"] .apexcharts-yaxistooltip.apexcharts-theme-dark {
	border: 1px solid var(--dk-border-2);
	background: var(--dk-surface-2);
	color: var(--dk-text);
}

html[data-theme="dark"] .apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:before {
	border-bottom-color: var(--dk-border-2);
}

html[data-theme="dark"] .apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:after {
	border-bottom-color: var(--dk-surface-2);
}

html[data-theme="dark"] .apexcharts-xaxistooltip-top.apexcharts-theme-dark:before {
	border-top-color: var(--dk-border-2);
}

html[data-theme="dark"] .apexcharts-xaxistooltip-top.apexcharts-theme-dark:after {
	border-top-color: var(--dk-surface-2);
}

html[data-theme="dark"] .apexcharts-yaxistooltip-left.apexcharts-theme-dark:before {
	border-left-color: var(--dk-border-2);
}

html[data-theme="dark"] .apexcharts-yaxistooltip-left.apexcharts-theme-dark:after {
	border-left-color: var(--dk-surface-2);
}

html[data-theme="dark"] .apexcharts-yaxistooltip-right.apexcharts-theme-dark:before {
	border-right-color: var(--dk-border-2);
}

html[data-theme="dark"] .apexcharts-yaxistooltip-right.apexcharts-theme-dark:after {
	border-right-color: var(--dk-surface-2);
}

/* Toolbar: ApexCharts' dark icons are near-white at rest, which shouts on a
   card; rest on the muted tone and brighten on hover like the light theme
   does. The selected tool keeps its saturated blue. */
html[data-theme="dark"] .apexcharts-theme-dark .apexcharts-zoom-icon svg,
html[data-theme="dark"] .apexcharts-theme-dark .apexcharts-zoomin-icon svg,
html[data-theme="dark"] .apexcharts-theme-dark .apexcharts-zoomout-icon svg,
html[data-theme="dark"] .apexcharts-theme-dark .apexcharts-reset-icon svg,
html[data-theme="dark"] .apexcharts-theme-dark .apexcharts-selection-icon svg,
html[data-theme="dark"] .apexcharts-theme-dark .apexcharts-menu-icon svg,
html[data-theme="dark"] .apexcharts-theme-dark .apexcharts-toolbar-custom-icon svg {
	fill: var(--dk-muted);
}

html[data-theme="dark"] .apexcharts-theme-dark .apexcharts-selection-icon:not(.apexcharts-selected):hover svg,
html[data-theme="dark"] .apexcharts-theme-dark .apexcharts-zoom-icon:not(.apexcharts-selected):hover svg,
html[data-theme="dark"] .apexcharts-theme-dark .apexcharts-zoomin-icon:hover svg,
html[data-theme="dark"] .apexcharts-theme-dark .apexcharts-zoomout-icon:hover svg,
html[data-theme="dark"] .apexcharts-theme-dark .apexcharts-reset-icon:hover svg,
html[data-theme="dark"] .apexcharts-theme-dark .apexcharts-menu-icon:hover svg,
html[data-theme="dark"] .apexcharts-theme-dark .apexcharts-toolbar-custom-icon:hover svg {
	fill: var(--dk-text);
}

html[data-theme="dark"] .apexcharts-canvas .apexcharts-zoom-icon.apexcharts-selected svg,
html[data-theme="dark"] .apexcharts-canvas .apexcharts-selection-icon.apexcharts-selected svg,
html[data-theme="dark"] .apexcharts-canvas .apexcharts-reset-zoom-icon.apexcharts-selected svg {
	fill: var(--dk-link);
}

/* The pan icon is a white-filled glyph with a grey outline. */
html[data-theme="dark"] .apexcharts-pan-icon svg {
	fill: var(--dk-surface);
	stroke: var(--dk-muted);
}

html[data-theme="dark"] .apexcharts-pan-icon:not(.apexcharts-selected):hover svg {
	stroke: var(--dk-text);
}

html[data-theme="dark"] .apexcharts-pan-icon.apexcharts-selected svg {
	stroke: var(--dk-link);
}

/* Download menu */
html[data-theme="dark"] .apexcharts-menu,
html[data-theme="dark"] .apexcharts-theme-dark .apexcharts-menu {
	border-color: var(--dk-border-2);
	background: var(--dk-surface-2);
	color: var(--dk-text);
	box-shadow: var(--dk-shadow-sm);
}

html[data-theme="dark"] .apexcharts-menu-item:hover,
html[data-theme="dark"] .apexcharts-theme-light .apexcharts-menu-item:hover {
	background: var(--dk-surface-3);
}

} /* @media screen */

/* ==========================================================================
   Dark: Templates: fleet, remote, architecture, endpoints
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Fleet, Remote, Architecture and Endpoints templates.

   This area is themed in place: hardcoded light colours in the templates' own
   <style> blocks and style="" attributes were rewritten as
   var(--dk-TOKEN, <original>), so light mode keeps the original literal and
   dark mode picks up the token. The ApexCharts on Bandwidth and Telemetry read
   data-theme at render time for axis, grid and tooltip colours.

   Left dark on purpose in both themes (they are pictures of a stage, not page
   chrome): the Network Devices discovery stage (.disc-stage), the topology and
   world map embeds (.map-embed), the architecture viewer (.arch-root), the
   remote session console (.ra-*) and the agent.yaml preview (#ac-yaml).
   The Ecosystem Map (fleet/map.html) is its own document with its own
   light / dark switch; printable reports (investigator_report.html,
   knowledge_base_book.html) stay light.

   Only what could not be done in the template lives below.
   -------------------------------------------------------------------------- */

@media screen {

	/* The dark stages sit on a dark page in this theme; a slightly stronger
	   hairline keeps their edge from dissolving into the page background. */
	html[data-theme="dark"] .disc-stage,
	html[data-theme="dark"] .map-embed,
	html[data-theme="dark"] .arch-root {
		box-shadow: 0 0 0 1px var(--dk-border-2);
	}

	/* Remote session toolbar and screen frame: lift the border off the page. */
	html[data-theme="dark"] .ra-toolbar,
	html[data-theme="dark"] .ra-screen-wrap {
		border-color: var(--dk-border-2);
	}
}

/* ==========================================================================
   Dark: Templates: threat defense, incidents, monitoring, intel
   ========================================================================== */

/*

   Area: threat_defense, incidents, monitoring, intel, dashboards, the top-level
   app pages, app/partials, partials (header, side menu, tenant switcher), live
   and auth. Page <style> blocks in that area carry their own dark rules next to
   the light ones (home.html, tenant_switcher.html, queue_styles.html,
   detection_policy.html, controls_panel.html, link_picker_head.html), so this
   file only holds what cannot live in one template.

   Already covered elsewhere, not repeated here: the sidebar and auth logo swap
   (20_design_a, img.sd-logo[src*="/logo-light."]), the auth card
   (20_design_a .form-content-box), live/join.html (showroom.css, always dark). */

@media screen {

/* "bg-warning text-dark" / "bg-info text-dark" chips (action chips on the
   Detection Policy page, severity and state badges across the incident and
   queue pages). design.css forces every `.app-wrapper .text-dark` to
   var(--sea-text) !important, which the dark theme turns light: light ink on a
   saturated amber or cyan fill. Keep the ink dark on those fills only. */
html[data-theme="dark"] .app-wrapper .bg-warning.text-dark,
html[data-theme="dark"] .app-wrapper .bg-info.text-dark,
html[data-theme="dark"] .app-wrapper .btn-warning.text-dark,
html[data-theme="dark"] .app-wrapper .btn-info.text-dark {
	color: var(--dk-bg) !important;
}

} /* @media screen */

/* ==========================================================================
   Dark: Templates: tenants, org health, onboarding, compliance
   ========================================================================== */

/*

   Templates: app/tenants, org_health, onboarding, compliance, audit,
   client_reviews, consolidation, crisis, effectiveness, evaluation, evidence,
   independent_review, ai_systems, change_management, client_activity,
   cryptography, maritime, physical, segmentation, secure_development, sites,
   iam.

   Everything in this area was themed in place:
   - org_health/index.html: a dark @media screen block at the end of its own
     <style> (the oh- classes only exist on that page).
   - tenants/view.html: card hover shadow takes var(--dk-shadow-sm, ...).
   The other pages already use Bootstrap utilities or var(--bs-*) / var(--sea-*)
   only, which the token layer and the components fragment re-theme.
   Left light on purpose: compliance/report_print.html, audit/report.html and
   client_reviews/report.html are standalone printable documents (own <html>,
   no theme script). */

@media screen {
}

/* ==========================================================================
   Dark: Templates: compliance registers and people
   ========================================================================== */

/* =============================================================================
   Dark fragment 43_tpl_compliance_b: page styles for the compliance and people
   templates (policies, rechecks, registration, regulatory clock, risks,
   suppliers, removable media, recovery, asset classification, automation,
   entitlements, HR, happiness, schedules, training, courses, questionnaires).

   Most of these pages already style themselves with Bootstrap / --sea-* vars,
   which theme_dark.css re-points. What is left here:
     - the Staff Questionnaire figure frame, plus the few example pictures whose
       own <style> was tuned for a white card (they render on the dark card
       like the rest of the mock, so their dark-on-white inks need lifting);
     - the course player preview, editor and translation page, served from
       common's /s/course.css with literal light values (course pictures `.ci`
       keep their own light surface, like screenshots).
   Every rule is scoped html[data-theme="dark"]; print stays light.
   ========================================================================== */

@media screen {

/* --- Staff Questionnaire: example picture frame ---------------------------- */

html[data-theme="dark"] .sq-figure {
	border-color: var(--dk-border-2);
	background: var(--dk-surface-2);
}

html[data-theme="dark"] .sq-figure-label {
	color: var(--dk-muted);
}

html[data-theme="dark"] .sq-figure-frame {
	background: var(--dk-bg);
	border-color: var(--dk-border-2);
	box-shadow: inset 0 0 0 1px var(--dk-border), var(--dk-shadow-sm);
}

/* --- Staff Questionnaire: pictures with white-card inks -------------------- */

/* Router netdev badges (admin-a-netdev-*). */
html[data-theme="dark"] .sq-figure-frame :is(.sqp-admin-a-netdev-rnd, .sqp-admin-a-netdev-routed, .sqp-admin-a-netdev-shadow, .sqp-admin-a-netdev-snmp) .b-shadow {
	color: var(--dk-danger-ink);
}

html[data-theme="dark"] .sq-figure-frame :is(.sqp-admin-a-netdev-rnd, .sqp-admin-a-netdev-routed, .sqp-admin-a-netdev-shadow, .sqp-admin-a-netdev-snmp) .b-upstream {
	color: var(--dk-primary-ink);
}

html[data-theme="dark"] .sq-figure-frame :is(.sqp-admin-a-netdev-rnd, .sqp-admin-a-netdev-routed, .sqp-admin-a-netdev-shadow, .sqp-admin-a-netdev-snmp) .b-new {
	color: var(--dk-warning-ink);
}

/* Grey "offline" / INFO pills (routers, artifact pictures). */
html[data-theme="dark"] .sq-figure-frame :is(.sqp-a-rt-asof, .sqp-a-rt-norec) .pill-offline,
html[data-theme="dark"] .sq-figure-frame :is(.sqp-f-artmb, .sqp-f-artph) .sev-INFO {
	color: var(--dk-neutral-ink);
}

/* Investigation trend chips (admin-f-inv-*). */
html[data-theme="dark"] .sq-figure-frame :is(.sqp-f-invburst, .sqp-f-invnew, .sqp-f-invorg) .tr.up {
	color: var(--dk-danger-ink);
}

html[data-theme="dark"] .sq-figure-frame :is(.sqp-f-invburst, .sqp-f-invnew, .sqp-f-invorg) .tr.new {
	color: var(--dk-primary-ink);
}

/* Org Health tiles (admin-b-orghealth-*). */
html[data-theme="dark"] .sq-figure-frame :is(.sqp-b-oh-fleet, .sqp-b-oh-down, .sqp-b-oh-noncomp, .sqp-b-oh-trend) .oh-meta,
html[data-theme="dark"] .sq-figure-frame .sqp-b-oh-now .oh-q-tenant {
	color: var(--dk-muted);
}

html[data-theme="dark"] .sq-figure-frame :is(.sqp-b-oh-fleet, .sqp-b-oh-down, .sqp-b-oh-noncomp, .sqp-b-oh-trend) .oh-tile {
	border-color: var(--dk-border-2);
}

html[data-theme="dark"] .sq-figure-frame :is(.sqp-b-oh-fleet, .sqp-b-oh-down, .sqp-b-oh-noncomp, .sqp-b-oh-trend) .oh-meter {
	background: var(--dk-surface-3);
}

html[data-theme="dark"] .sq-figure-frame :is(.sqp-b-oh-fleet, .sqp-b-oh-down, .sqp-b-oh-noncomp, .sqp-b-oh-trend) .oh-ring-track {
	stroke: var(--dk-surface-3);
}

html[data-theme="dark"] .sq-figure-frame :is(.sqp-b-oh-fleet, .sqp-b-oh-down, .sqp-b-oh-noncomp, .sqp-b-oh-trend) .oh-delta {
	background: var(--dk-neutral-fill);
	color: var(--dk-neutral-ink);
}

html[data-theme="dark"] .sq-figure-frame :is(.sqp-b-oh-fleet, .sqp-b-oh-down, .sqp-b-oh-noncomp, .sqp-b-oh-trend) .oh-delta.is-up {
	background: var(--dk-success-fill);
	color: var(--dk-success-ink);
}

html[data-theme="dark"] .sq-figure-frame :is(.sqp-b-oh-fleet, .sqp-b-oh-down, .sqp-b-oh-noncomp, .sqp-b-oh-trend) .oh-delta.is-down {
	background: var(--dk-danger-fill);
	color: var(--dk-danger-ink);
}

html[data-theme="dark"] .sq-figure-frame .sqp-b-oh-now .oh-queue li {
	border-bottom-color: var(--dk-border);
}

/* Restricted home dashboard panels (admin-b-home-restricted): a white panel
   under the dark card's light text would read white on white. */
html[data-theme="dark"] .sq-figure-frame .sqp-b-home-restr .dash-panel {
	background: var(--dk-surface);
	box-shadow: var(--dk-shadow-sm);
}

html[data-theme="dark"] .sq-figure-frame .sqp-b-home-restr .dash-panel-head p {
	color: var(--dk-muted);
}

/* --- Courses: author preview (course/preview.html inside courses/view) ------ */

/* The player defines its palette as --cp-* on .cp; re-point it for the preview
   inside the dark console. The full player on /s/ pages keeps its own light
   surface (that page does not load this sheet). */
html[data-theme="dark"] .cp.cp-preview {
	--cp-ink: var(--dk-text);
	--cp-muted: var(--dk-muted);
	--cp-line: var(--dk-border-2);
	--cp-card: var(--dk-surface-2);
	--cp-soft: var(--dk-surface-3);
	--cp-accent: var(--dk-link);
	--cp-good: var(--dk-success-ink);
	--cp-good-bg: var(--dk-success-fill);
	--cp-bad: var(--dk-danger-ink);
	--cp-bad-bg: var(--dk-danger-fill);
	color-scheme: dark;
}

html[data-theme="dark"] .cp-preview .cp-takeaway {
	background: var(--dk-primary-fill);
}

html[data-theme="dark"] .cp-preview .cp-pill {
	background: var(--dk-neutral-fill);
	color: var(--dk-neutral-ink);
}

html[data-theme="dark"] .cp-preview .cp-pill-good {
	background: var(--cp-good-bg);
	color: var(--cp-good);
}

/* The number disc sits on the (now light) accent: dark ink, not white. */
html[data-theme="dark"] .cp-preview .cp-q-n {
	color: var(--dk-bg);
}

/* Course pictures stay light like screenshots; frame them for the dark page. */
html[data-theme="dark"] .ci-figure-label {
	color: var(--dk-muted);
}

html[data-theme="dark"] .ci {
	border-color: var(--dk-border-2);
	box-shadow: var(--dk-shadow-sm);
}

/* --- Courses: editor (course_content/editor.js in courses/edit) ------------ */

html[data-theme="dark"] .cp-ed {
	--cp-line: var(--dk-border-2);
	--cp-accent: var(--dk-link);
}

html[data-theme="dark"] .cp-ed-card {
	background: var(--dk-surface-2);
}

html[data-theme="dark"] .cp-ed-input {
	border-color: var(--dk-border-2);
	background: var(--dk-input);
	color: var(--dk-text);
}

html[data-theme="dark"] .cp-ed-input::placeholder {
	color: var(--dk-faint);
}

html[data-theme="dark"] .cp-ed-btn {
	border-color: var(--dk-border-2);
	background: var(--dk-surface-3);
	color: var(--dk-text);
}

html[data-theme="dark"] .cp-ed-btn:hover {
	border-color: var(--cp-accent);
}

html[data-theme="dark"] .cp-ed-add {
	color: var(--dk-link);
}

html[data-theme="dark"] .cp-ed-danger {
	color: var(--dk-danger-ink);
}

html[data-theme="dark"] .cp-ed-example {
	background: var(--sea-primary-mist);
}

html[data-theme="dark"] .cp-ed-place {
	color: var(--dk-bg);
}

/* --- Courses: translation page (courses/translate) ------------------------- */

html[data-theme="dark"] .cp-tr-row {
	border-top-color: var(--dk-border);
}

} /* @media screen */

/* ==========================================================================
   Dark: Templates: sales, video, pricing
   ========================================================================== */

/*

   Business / commercial templates: sales materials, video ads and sessions,
   pricing, quotes, service plans, reports and requests, shares, site
   enquiries, vCISO requests, landing, manual, notifications, reports, tasks,
   mobile operators, network providers, client staff, portal, portal users and
   the in-app documents list.

   The in-app pages in this area carry no hardcoded colours of their own: they
   are built from Bootstrap utilities and the design.css ki-* components, which
   the components and design fragments re-theme. What is left here is the one
   page-local style block that a translucent tint makes too faint on a dark
   card.

   Deliberately left light (own <html> document, theme_dark.css never loads):
   app/service_reports/print.html, app/manual/book.html,
   app/sales_materials/document.html + terms.html and their _leaflet_*,
   _twopage_* and long-form partials (printed brochures), app/pricing/policy.html
   and app/quotes/offer.html (documents/_layout.html), and the public share
   pages under templates/share/** (client-facing forms on base_share.html).
   app/video_ads/reel.html and app/video_sessions/room.html ship their own dark
   design (data-theme="dark" on <html>, reel.css / showroom.css). */

@media screen {

	/* Site Insights daily bars (app/landing/insights.html). Visitors are the
	   primary blue at 35% alpha: pale on white, but close to the card colour
	   on a dark surface. Lift them to the light primary ink so the stacked
	   segment stays readable against both the card and the views bar. The
	   legend swatch follows. */
	html[data-theme="dark"] .li-bar .li-visitors {
		background: var(--dk-primary-ink);
		opacity: .7;
	}

	html[data-theme="dark"] .li-key.li-key-faint {
		background: var(--dk-primary-ink);
		opacity: .7;
	}

}

/* ==========================================================================
   Dark: QA pass 1
   ========================================================================== */

@media screen {
/* --- Notifications offcanvas footer (partials/app/notifications_dropdown_app.html)
   "Send notification" is an <a>, so design.css `.app-wrapper a` paints its
   label --sea-primary-deep, which dark mode turns into the light link blue:
   pale blue on the brand fill. Give the solid button its white label back. */
html[data-theme="dark"] .app-wrapper a.ki-notif-foot-btn--primary,
html[data-theme="dark"] .app-wrapper a.ki-notif-foot-btn--primary:hover {
	color: #fff !important;
}

/* --- ki tinted chips: success / warning (IAM status, access review, ...) ---
   In light, design.css gives these the blue soft fill but ki keeps the green
   / amber label, so the hue still carries the meaning. The components
   fragment (10_components.css) turned the label primary blue as well, which
   made "Active", "Never reviewed" and "Reviewed" look identical. Use the
   matching tinted pair so the hue survives. Same selector, later fragment. */
html[data-theme="dark"] .bg-light-success {
	background-color: var(--dk-success-fill) !important;
	color: var(--dk-success-ink) !important;
}

html[data-theme="dark"] .bg-light-warning {
	background-color: var(--dk-warning-fill) !important;
	color: var(--dk-warning-ink) !important;
}

/* --- Hovered / focused <a class="btn btn-outline-primary|success"> --------
   The hover fills the button solid, but design.css `.app-wrapper a:hover`
   (0,2,1, !important) beats `.btn-outline-primary:hover` (0,2,0), so the
   label and icon stay link blue on the blue fill and vanish ("From current
   plan" on Quotes, the row link icon on Daily Tasks, "Open" on Courses).
   Give them the white label the light rule intends. */
html[data-theme="dark"] .app-wrapper a.btn-outline-primary:hover,
html[data-theme="dark"] .app-wrapper a.btn-outline-primary:focus,
html[data-theme="dark"] .app-wrapper a.btn-outline-primary:active,
html[data-theme="dark"] .app-wrapper a.btn-outline-success:hover,
html[data-theme="dark"] .app-wrapper a.btn-outline-success:focus,
html[data-theme="dark"] .app-wrapper a.btn-outline-success:active {
	color: #fff !important;
}

/* --- Auth card under 992px (responsive.css .sign-in-bg .form-container) ----
   On narrow screens ki recolours the heading and intro with its dark teal
   --primary (!important), which reads dark on dark around the login form. */
@media (max-width: 991px) {
	html[data-theme="dark"] .sign-in-bg .form-container h2 {
		color: var(--dk-text) !important;
	}

	html[data-theme="dark"] .sign-in-bg .form-content-box p {
		color: var(--dk-muted) !important;
	}

	html[data-theme="dark"] .sign-in-bg .form-content-box p a,
	html[data-theme="dark"] .sign-in-bg .form-content-box i {
		color: var(--dk-link) !important;
	}

	html[data-theme="dark"] .sign-in-bg .form-content-box label,
	html[data-theme="dark"] .sign-in-bg .form-content-box .form-floating .text-white {
		color: var(--dk-muted) !important;
	}
}
}

/* ==========================================================================
   Dark: QA pass 2
   ========================================================================== */

@media screen {

/* --- Auth frame (style.css .sign-in-bg .main-container .main-content-box) --
   The light frame is a PNG: a white half and a blue half split by a charcoal
   S-curve. The white half glared around every dark auth card (login, 2FA
   setup/verify, recovery codes, invite). Redraw it with gradients: a dark
   curved half with a thin rim over the same brand blue. */
html[data-theme="dark"] .sign-in-bg .main-container .main-content-box {
	background-color: var(--dk-surface-2);
	background-image:
		radial-gradient(ellipse 58% 82% at 0% 48%,
			var(--dk-surface-2) 0,
			var(--dk-surface-2) 97%,
			var(--dk-bg) 97%,
			var(--dk-bg) 100%,
			transparent 100%),
		linear-gradient(160deg, var(--sea-primary) 0%, color-mix(in srgb, var(--sea-primary) 72%, black) 100%);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	box-shadow: var(--dk-shadow);
}

/* --- History window pills (design.css .hist-window, partials/timeline) ----
   The active pill's #fff label loses to `.app-wrapper a { color: ...
   !important }`, leaving link-blue text on the blue fill. Dark ink reads on
   the bright fill (about 8:1). */
html[data-theme="dark"] .app-wrapper a.hist-window.is-active {
	color: var(--dk-bg) !important;
}

}

/* ==========================================================================
   Dark: QA pass 3
   ========================================================================== */

@media screen {

/* --- Auth frame (base_auth.html: login, 2FA setup/verify, invites) ---------
   style.css paints .main-content-box with a baked RGB picture: a white field
   and a blue swoosh. Nothing else touches it, so it stayed a white slab
   around the dark form. Swap it for the same picture on a pseudo layer,
   inverted and hue-rotated back so the swoosh stays blue and the white field
   goes dark. */
html[data-theme="dark"] .sign-in-bg .main-container .main-content-box {
	position: relative;
	isolation: isolate;
	background-image: none;
	background-color: var(--dk-surface-2);
}

html[data-theme="dark"] .sign-in-bg .main-container .main-content-box::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: url(../880f31c85ce743c62fcb.png) center / cover no-repeat;
	filter: invert(0.9) hue-rotate(180deg);
	opacity: 0.8;
	pointer-events: none;
}

/* --- 2FA setup QR (auth/two_factor_setup.html) -----------------------------
   The QR sits in .bg-white, which the components fragment darkens. Scanners
   need a light quiet zone around the code, so this one box stays white like
   a picture. */
html[data-theme="dark"] .qr-box.bg-white {
	background-color: var(--bs-white) !important;
	border-color: var(--dk-border-2) !important;
}

/* --- Cards inside modals (partials/examples modal on every register) -------
   A .card keeps the page-level --sea-shadow (0 18px 40px). On a modal that
   reads as a black bar under each example record; a well with a hairline
   border reads as the nested panel it is. */
html[data-theme="dark"] .modal-body .card {
	border: 1px solid var(--dk-border) !important;
	box-shadow: none;
}

}

/* ==========================================================================
   Dark: QA pass 4
   ========================================================================== */

@media screen {

/* --- Auth frame (style.css .sign-in-bg .main-container .main-content-box) --
   51_qa_2 redraws the frame with gradients, 52_qa_3 lays an inverted copy of
   the PNG on a ::before and clears the gradient. The inverted picture paints
   on top, so its near-black field and light-grey curve rim are what shows.
   Keep one version: drop the pseudo layer and restore the gradient frame,
   with a thinner rim so it reads like the light frame's charcoal arc. */
html[data-theme="dark"] .sign-in-bg .main-container .main-content-box::before {
	content: none;
}

html[data-theme="dark"] .sign-in-bg .main-container .main-content-box {
	background-color: var(--dk-surface-2);
	background-image:
		radial-gradient(ellipse 58% 82% at 0% 48%,
			var(--dk-surface-2) 0,
			var(--dk-surface-2) 98.4%,
			var(--dk-bg) 98.4%,
			var(--dk-bg) 100%,
			transparent 100%),
		linear-gradient(160deg, var(--sea-primary) 0%, color-mix(in srgb, var(--sea-primary) 72%, black) 100%);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

}

/* ==========================================================================
   Dark: QA pass 5
   ========================================================================== */

@media screen {

/* --- Config Builder quick actions (config_builder.html <style>) -------------
   The tiles sit on --bs-body-bg, white on a white card in light, but the
   darkest page tone inside a raised card in dark, so they read as holes.
   Raise them to the nested-panel tone; the #0d6efd icon is lifted to the
   dark link blue so it clears 3:1 on that tone. */
html[data-theme="dark"] .cfg-quick-btn {
	background: var(--dk-surface-2);
	border-color: var(--dk-border-2);
	color: var(--dk-text);
}

html[data-theme="dark"] .cfg-quick-btn:hover {
	background: var(--dk-surface-3);
	border-color: var(--dk-link);
	box-shadow: var(--dk-shadow-sm);
}

html[data-theme="dark"] .cfg-quick-btn > i {
	color: var(--dk-link);
}

/* Push / pull toasts float over the page: give them the raised tone and a
   visible edge instead of the page background. */
html[data-theme="dark"] .cfg-toast {
	background: var(--dk-surface-2);
	border-top-color: var(--dk-border-2);
	border-right-color: var(--dk-border-2);
	border-bottom-color: var(--dk-border-2);
	box-shadow: var(--dk-shadow);
}

/* --- Settings-kit section tiles (common ui/settings_kit.css) ---------------
   --sk-surface comes from --bs-body-bg: white (raised) in light, but the
   page tone in dark, so an opened tile and its chips sank below the page.
   Point it at the panel tone instead. */
html[data-theme="dark"] .sk-root,
html[data-theme="dark"] .sk-plan-lock,
html[data-theme="dark"] .sk-pop {
	--sk-surface: var(--dk-surface);
}

/* Toned tiles (set / enabled / partial / off) paint only a 7% wash over the
   page, which reads darker than the neutral tiles on --dk-surface-2: the
   light hierarchy came out inverted. Lay the wash over the nested tone. */
html[data-theme="dark"] .sk-tile[data-sk-tone]:not(.is-open):not(.is-locked) {
	background: linear-gradient(var(--sk-tone-bg), var(--sk-tone-bg)) var(--dk-surface-2);
}

}

/* ==========================================================================
   Dark: QA pass 6
   ========================================================================== */

@media screen {

/* ---- Response Queue (threat_defense/partials/queue_styles.html) -----------
   The card's section tabs are bare <button class="nav-link"> with no
   background of their own, so in dark the browser paints its native
   ButtonFace grey (#6b6b6b) behind light-grey text. Give the idle tabs the
   card surface: darker chips in the surface-2 track, active one lifts. */
html[data-theme="dark"] .rq-tabs .nav-link {
	background: var(--dk-surface);
	color: var(--dk-muted);
}

html[data-theme="dark"] .rq-tabs .nav-link:hover {
	background: var(--dk-surface-3);
	color: var(--dk-text);
}

html[data-theme="dark"] .rq-tabs .nav-link.active {
	color: var(--dk-text);
}

/* Count pill on the active section tab ("All 1"): 25% white over the blue
   fill reads 3:1 with its white figure. Darken the pill instead. */
html[data-theme="dark"] .rq-tabs-row a.rq-section.active .badge {
	background: rgba(0, 0, 0, 0.28) !important;
}

/* ---- Listbox selects (select[multiple], e.g. Pricing "Set them up") -------
   The components fragment gives every option the surface-2 fill, which also
   covers the chosen rows, so a selected option was hard to tell apart from
   the box. Chromium only honours a fill on :checked options as an image,
   hence the one-stop gradient. */
html[data-theme="dark"] select[multiple] option:checked {
	background: linear-gradient(var(--dk-primary-fill), var(--dk-primary-fill)), var(--dk-surface-3);
	color: var(--dk-text);
}

/* ---- Org Health board (org_health/index.html <style>, _board.html) -------
   The "not monitored" stack segment is #b6c0cc, which glares next to the
   saturated status segments on the dark track. Keep it neutral, just dimmer. */
html[data-theme="dark"] .oh-fill-secondary {
	background: var(--dk-faint);
}

/* The active "All" status chip is slate (#64748b) in dark, so the page's
   25% white count pill lands on #8b97a8 and its white figure drops to 3:1.
   Darken the pill instead of lightening it. */
html[data-theme="dark"] .oh-chips button.ki-chip.is-active .ki-chip-count {
	background: rgba(0, 0, 0, 0.28);
}

/* ---- Neutral subtle badges (Regulatory clock sector tags, etc.) ----------
   Muted grey ink on the neutral tint reads at about 4.4:1 on hovered rows,
   and these are 10px labels. Use the neutral pair's own ink. */
html[data-theme="dark"] .badge.bg-secondary-subtle.text-secondary {
	color: var(--dk-neutral-ink) !important;
}

/* ---- Config templates panel (common ui/config_templates.css) -------------
   .ct-error is Bootstrap's #dc3545, 4.1:1 on the dark card. */
html[data-theme="dark"] .ct-error {
	color: var(--dk-danger-ink);
}

}

/* ==========================================================================
   Dark: QA final pass
   ========================================================================== */

@media screen {

/* ---- Panels painted with var(--bs-body-bg) ---------------------------------
   In light --bs-body-bg is white, the same as a card. In dark it is the page
   canvas, darker than the card, so these panels read as holes. Lift them to
   the surface they sit on. */

/* Router / endpoint Quick Config sections sit straight on the page. */
html[data-theme="dark"] .qc-card {
	background: var(--dk-surface);
}

/* Diagnostics stat tiles sit inside a card. */
html[data-theme="dark"] .ds-tile {
	background: var(--dk-surface-2);
}

/* Tenant view score ring: the inner disc must match the card behind it, or
   the ring reads as a doughnut with a black hole. */
html[data-theme="dark"] .tv-ring::before {
	background: var(--dk-surface);
}

/* --- Solid action fills -----------------------------------------------------
   White on the bright brand blue (#1fb2ff) is 2.4:1 and on the theme green
   (#0ab964) 2.6:1, so in dark mode every solid button and filled badge takes
   a deeper fill of the same hue: white on these is 5.3:1 / 5.4:1. Hover goes
   darker still, so contrast rises on hover instead of falling. Light mode
   keeps the brand fills. */
html[data-theme="dark"] {
	--dk-fill-primary: #0b6fb8;
	--dk-fill-primary-hover: #095d9b;
	--dk-fill-success: #087a46;
	--dk-fill-success-hover: #066639;
}

html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .bg-primary,
html[data-theme="dark"] .badge.bg-primary-subtle,
html[data-theme="dark"] .btn-light-primary:hover,
html[data-theme="dark"] .btn-light-primary:focus,
html[data-theme="dark"] .btn-light-primary:active {
	background-color: var(--dk-fill-primary) !important;
	border-color: var(--dk-fill-primary) !important;
	color: #fff !important;
}

html[data-theme="dark"] .btn-primary {
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-primary:focus,
html[data-theme="dark"] .btn-primary:active,
html[data-theme="dark"] .btn-primary.active {
	background-color: var(--dk-fill-primary-hover) !important;
	border-color: var(--dk-fill-primary-hover) !important;
}

html[data-theme="dark"] .btn-success,
html[data-theme="dark"] .bg-success {
	background-color: var(--dk-fill-success) !important;
	border-color: var(--dk-fill-success) !important;
	color: #fff !important;
}

html[data-theme="dark"] .btn-success:hover,
html[data-theme="dark"] .btn-success:focus,
html[data-theme="dark"] .btn-success:active,
html[data-theme="dark"] .btn-success.active {
	background-color: var(--dk-fill-success-hover) !important;
	border-color: var(--dk-fill-success-hover) !important;
}

/* Keyboard focus stays visible on the deeper fills. */
html[data-theme="dark"] .btn-primary:focus-visible,
html[data-theme="dark"] .btn-success:focus-visible {
	outline: 2px solid var(--dk-link);
	outline-offset: 2px;
}

} /* @media screen */