/* Copyright Epic Games, Inc. All Rights Reserved. */
/* Dark mode theme. Variables are defined here; main.css / table.css consume them. */

:root {
	--rm-bg: #ffffff;
	--rm-fg: #212529;
	--rm-muted-fg: #6c757d;
	--rm-link: #337ab7;
	--rm-link-hover: #23527c;

	--rm-header-bg: transparent;
	--rm-hr: rgba(0, 0, 0, 0.1);

	--rm-footer-bg: rgba(240, 240, 240, 0.7);
	--rm-footer-border: rgba(0, 0, 0, 0.1);

	--rm-table-border: #ddd;
	--rm-table-head-border: grey;
	--rm-zebra: #f9f9f9;
	--rm-card-bg: #ffffff;

	--rm-info-block-border: gainsboro;
	--rm-info-block-pause-bg: lightgoldenrodyellow;
	--rm-info-block-conflict-bg: #eeb8b8;
	--rm-info-block-deferred-bg: #d4edff;

	--rm-tab-bg: #f5f5f5;
	--rm-tab-inactive-border: #d6d6d6;
	--rm-tab-inactive-border-bottom: #e0e0e0;
	--rm-tab-active-bg: #ffffff;

	--rm-graph-key-bg: gainsboro;
	--rm-signed-in-bg: #eee;
	--rm-signed-in-name: #000;

	--rm-btn-secondary-bg: #ffffff;
	--rm-btn-secondary-fg: #000;
	--rm-btn-secondary-border: dimgray;
	--rm-btn-secondary-hover-bg: whitesmoke;
	--rm-btn-secondary-focus-bg: gainsboro;

	--rm-btn-primary-bg: steelblue;
	--rm-btn-primary-fg: #fff;
	--rm-btn-primary-border: #2e6da4;

	--rm-cl-button-bg: rgba(255, 255, 255, 0.5);
	--rm-cl-button-border: rgba(169, 169, 169, 0.4);

	--rm-dropdown-bg: #ffffff;
	--rm-dropdown-fg: #212529;
	--rm-dropdown-hover-bg: #f8f9fa;
	--rm-dropdown-active-bg: cadetblue;

	--rm-input-bg: #ffffff;
	--rm-input-fg: #495057;
	--rm-input-border: #ced4da;

	--rm-modal-bg: #ffffff;
	--rm-modal-fg: #212529;
	--rm-modal-border: rgba(0, 0, 0, 0.2);

	--rm-alert-danger-bg: #f8d7da;
	--rm-alert-danger-fg: #721c24;
	--rm-alert-danger-border: #f5c6cb;

	--rm-alert-success-bg: #d4edda;
	--rm-alert-success-fg: #155724;
	--rm-alert-success-border: #c3e6cb;

	--rm-alert-warning-bg: #fff3cd;
	--rm-alert-warning-fg: #856404;
	--rm-alert-warning-border: #ffeeba;

	--rm-alert-info-bg: #d1ecf1;
	--rm-alert-info-fg: #0c5460;
	--rm-alert-info-border: #bee5eb;

	--rm-good-cl-fg: green;
	--rm-good-cl-hover-fg: darkgreen;

	--rm-warning-fg: orange;
	--rm-dead-bot-fg: red;

	/* dark-mode-only override: the legend gets a clearer contrast against
	   the page bg. Light mode keeps gainsboro from above. */

	/* Branch/edge status text colors. The original code used GREEN/ORANGE/RED
	   literals — kept as the defaults here so light mode is unchanged. */
	--rm-status-running: green;
	--rm-status-deferred: lightblue;
	--rm-status-retrying: orange;
	--rm-status-aging-mild: gray;
	--rm-status-aging-bad: red;
	--rm-status-blocked: darkred;

	/* logo: leave it alone in light mode */
	--rm-logo-filter: none;
	--rm-img-filter: none;

	/* canvas branch-guideline stroke color (default rendering is black) */
	--rm-canvas-stroke: #000000;
}

html.dark {
	--rm-bg: #1a1d21;
	--rm-fg: #e4e6eb;
	--rm-muted-fg: #9aa0a6;
	--rm-link: #7ab8ff;
	--rm-link-hover: #b0d3ff;

	--rm-header-bg: #14161a;
	--rm-hr: rgba(255, 255, 255, 0.1);

	--rm-footer-bg: rgba(28, 30, 35, 0.9);
	--rm-footer-border: rgba(255, 255, 255, 0.1);

	--rm-table-border: #3a3d44;
	--rm-table-head-border: #5a5f68;
	--rm-zebra: #23262c;
	--rm-card-bg: #1f2227;

	--rm-info-block-border: #3a3d44;
	--rm-info-block-pause-bg: #4a4225;
	--rm-info-block-conflict-bg: #5c2a2a;
	--rm-info-block-deferred-bg: #1f3a4a;

	--rm-tab-bg: #23262c;
	--rm-tab-inactive-border: #3a3d44;
	--rm-tab-inactive-border-bottom: #2c2f35;
	--rm-tab-active-bg: #1a1d21;

	--rm-graph-key-bg: #2e3138;
	--rm-signed-in-bg: #2a2d33;
	--rm-signed-in-name: #e4e6eb;

	--rm-btn-secondary-bg: #2a2d33;
	--rm-btn-secondary-fg: #e4e6eb;
	--rm-btn-secondary-border: #5a5f68;
	--rm-btn-secondary-hover-bg: #34373d;
	--rm-btn-secondary-focus-bg: #404349;

	--rm-btn-primary-bg: #4a7eb5;
	--rm-btn-primary-fg: #ffffff;
	--rm-btn-primary-border: #5a8ec5;

	--rm-cl-button-bg: rgba(255, 255, 255, 0.08);
	--rm-cl-button-border: rgba(255, 255, 255, 0.15);

	--rm-dropdown-bg: #2a2d33;
	--rm-dropdown-fg: #e4e6eb;
	--rm-dropdown-hover-bg: #34373d;
	--rm-dropdown-active-bg: #4a7eb5;

	--rm-input-bg: #2a2d33;
	--rm-input-fg: #e4e6eb;
	--rm-input-border: #5a5f68;

	--rm-modal-bg: #1f2227;
	--rm-modal-fg: #e4e6eb;
	--rm-modal-border: rgba(255, 255, 255, 0.15);

	--rm-alert-danger-bg: #4a1f24;
	--rm-alert-danger-fg: #f5c6cb;
	--rm-alert-danger-border: #6a2f34;

	--rm-alert-success-bg: #1f3a25;
	--rm-alert-success-fg: #c3e6cb;
	--rm-alert-success-border: #2f5a35;

	--rm-alert-warning-bg: #4a3a1f;
	--rm-alert-warning-fg: #ffeeba;
	--rm-alert-warning-border: #6a5a2f;

	--rm-alert-info-bg: #1f3a4a;
	--rm-alert-info-fg: #bee5eb;
	--rm-alert-info-border: #2f5a6a;

	--rm-good-cl-fg: #6cd66c;
	--rm-good-cl-hover-fg: #9bff9b;

	--rm-warning-fg: #ffb74d;
	--rm-dead-bot-fg: #ff6b6b;

	/* the logo is dark text on transparent — invert so it reads on dark */
	--rm-logo-filter: invert(1) hue-rotate(180deg);
	--rm-img-filter: none;

	/* canvas branch-guideline stroke color */
	--rm-canvas-stroke: #b8bcc4;

	/* Status text — brighter equivalents that read on the dark surface.
	   The blocked/aging-bad reds are lifted well above mid-luminance so
	   "BLOCKED" / "ENTIRELY BLOCKED" stay readable on the dark page. */
	--rm-status-running: #6cd66c;
	--rm-status-deferred: #7ab8ff;
	--rm-status-retrying: #ffb74d;
	--rm-status-aging-mild: #9aa0a6;
	--rm-status-aging-bad: #ff9999;
	--rm-status-blocked: #ff8a8a;

	color-scheme: dark;
}

/* ===== Base =====
   Only set the dark page color on <body>, NOT on <html>. CSS propagates
   body's background up to the viewport canvas when html has no background
   of its own, which means body's `background-image` (used by the seasonal
   body.valentines / body.stpatricks etc. classes) also paints across the
   whole viewport — even on short pages. Setting bg on html as well used
   to clip body's bg-image to the body box, hiding the corner-decoration
   characters whenever the page wasn't tall enough to reach them. */
html.dark body {
	background-color: var(--rm-bg);
	color: var(--rm-fg);
}
html.dark {
	color: var(--rm-fg);
}

html.dark a {
	color: var(--rm-link);
}
html.dark a:focus,
html.dark a:hover {
	color: var(--rm-link-hover);
}

html.dark hr {
	border-color: var(--rm-hr);
}

html.dark header {
	background-color: var(--rm-header-bg);
}

/* The boilerplate-generated header uses #logoimg, but allbots.html and
   preview.html have a plain <img src="/img/logo.png"> in <header>. Match
   both so the logo flips white on dark across all pages. */
html.dark #logoimg,
html.dark header img[src*="logo"] {
	filter: var(--rm-logo-filter);
}

/* Per-logo dark-mode overrides.
   - Halloween (orange + glowing yellow mouth) and Valentine's (hot pink)
     are bright enough on transparent to read fine on dark — skip the invert.
   - stpatricks-dark and holiday-dark are hand-tuned twins (white wordmark,
     same colored decorations), so they ALSO skip the invert; boilerplate.js
     swaps to those filenames in dark mode via pickHolidayLogoSrc().
   - Star Wars + the default logo still get inverted because their wordmark
     is black on transparent and would otherwise be invisible. */
html.dark #logoimg[src*="halloween"],
html.dark header img[src*="halloween"],
html.dark #logoimg[src*="valentines"],
html.dark header img[src*="valentines"],
html.dark #logoimg[src*="-dark.png"],
html.dark header img[src*="-dark.png"] {
	filter: none;
}

/* The save graph icon and clipboard icons are dark on white — invert in dark mode */
html.dark img[src="/img/save.png"],
html.dark img[src="/img/clipboard.png"] {
	filter: invert(0.92);
}

/* The spinny "R" loading GIF is a black "R" on a white background — GIFs
   don't carry alpha, so we can't make the white truly transparent. Instead,
   `filter: invert(1)` flips it to a white "R" on a black background, then
   `mix-blend-mode: lighten` composites against the underlying card surface
   per channel via max(source, dest). Black bg loses to the card surface
   (becomes invisible); the white "R" wins. Net effect: the GIF appears to
   sit on a transparent background. */
html.dark #loadingimg,
html.dark img[src="/img/robo-r-rotating.gif"] {
	filter: invert(1);
	mix-blend-mode: lighten;
}

/* The seasonal body background images (cuddle_team_leader, sgt_green_clover)
   are pre-multiplied to ~50% alpha so they sit as faint corner decorations.
   On a dark page they all but disappear: `multiply` (the first attempt)
   drove them to near-black, and `lighten` only kept channels above the page
   color — which for desaturated character art was barely visible.
   `screen` lifts the result of compositing the image onto the dark page
   color (formula 1 - (1-a)(1-b)) so the character pixels brighten enough
   to read as a ghosted bottom-right decoration. The dark page color
   continues to dominate everywhere the image is transparent or near-black,
   so the rest of the page is unaffected. */
html.dark body.valentines,
html.dark body.stpatricks,
html.dark body.halloween,
html.dark body.starwars,
html.dark body.holiday {
	background-blend-mode: screen;
}

/* ===== Footer ===== */
html.dark #fixed-footer {
	background-color: var(--rm-footer-bg);
	border-top-color: var(--rm-footer-border);
}

/* ===== Branch list / tables ===== */
html.dark .gthead-row,
html.dark .ethead-row {
	border-bottom-color: var(--rm-table-head-border);
}

html.dark .nrow-zebra,
html.dark .erow-zebra {
	background-color: var(--rm-zebra);
}

html.dark .gthead-row > div,
html.dark .ethead-row > div,
html.dark .conflict-block-header {
	color: var(--rm-muted-fg);
}

html.dark .elist-row:not(:last-of-type),
html.dark .erow:not(:last-of-type) {
	border-bottom-color: var(--rm-table-border);
}

html.dark .gtable div.unmonitored-text,
html.dark .gtable div.unactionable-text {
	color: var(--rm-muted-fg);
}

html.dark .namecell .info-block {
	border-color: var(--rm-info-block-border);
}
html.dark .info-block.pause {
	background-color: var(--rm-info-block-pause-bg);
}
html.dark .info-block.conflict {
	background-color: var(--rm-info-block-conflict-bg);
}
html.dark .info-block.deferred {
	background-color: var(--rm-info-block-deferred-bg);
}
html.dark .namecell .pause-div-label {
	color: #c8a8ff;
}

html.dark .branch-graph {
	border-color: var(--rm-table-border);
}

/* ===== Graph SVG =====
   viz.js writes presentation attributes (fill=, stroke=) directly into the SVG.
   Presentation attributes are overridden by CSS, so we re-color elements here
   instead of rebuilding the dot source on every toggle. */
html.dark .branch-graph {
	background-color: transparent;
}
html.dark .branch-graph text {
	fill: #e4e6eb;
}
/* The outermost <polygon fill="white"> is the graph background — make it transparent
   so the dark page color shows through instead of a white card. viz.js emits
   either the literal "white" or "#ffffff" depending on the build. */
html.dark .branch-graph polygon[fill="white"],
html.dark .branch-graph polygon[fill="#ffffff"],
html.dark .branch-graph polygon[fill="#FFFFFF"] {
	fill: transparent;
	stroke: transparent;
}
/* Node fills (moccasin by default) — pick a dark, readable surface.
   Different viz.js builds emit the literal name or hex; cover both. */
html.dark .branch-graph .node polygon[fill="moccasin"],
html.dark .branch-graph .node polygon[fill="#ffe4b5"],
html.dark .branch-graph .node polygon[fill="#FFE4B5"] {
	fill: #3a3d44;
	stroke: #e4e6eb;
}
/* Cluster (group) boxes */
html.dark .branch-graph .cluster polygon {
	fill: transparent;
	stroke: #b8bcc4;
}
/* Edges: recolor stroke + fill (arrowheads use fill) for each EDGE_STYLES color. */
/* defaultFlow = blue */
html.dark .branch-graph .edge path[stroke="blue"],
html.dark .branch-graph .edge polygon[stroke="blue"],
html.dark .branch-graph .edge path[stroke="#0000ff"],
html.dark .branch-graph .edge polygon[stroke="#0000ff"] {
	stroke: #7ab8ff;
}
html.dark .branch-graph .edge polygon[fill="blue"],
html.dark .branch-graph .edge polygon[fill="#0000ff"] {
	fill: #7ab8ff;
}
/* gated = darkorange */
html.dark .branch-graph .edge path[stroke="darkorange"],
html.dark .branch-graph .edge polygon[stroke="darkorange"],
html.dark .branch-graph .edge path[stroke="#ff8c00"],
html.dark .branch-graph .edge polygon[stroke="#ff8c00"] {
	stroke: #ffb74d;
}
html.dark .branch-graph .edge polygon[fill="darkorange"],
html.dark .branch-graph .edge polygon[fill="#ff8c00"] {
	fill: #ffb74d;
}
/* onRequest / blockAssets = darkgray */
html.dark .branch-graph .edge path[stroke="darkgray"],
html.dark .branch-graph .edge polygon[stroke="darkgray"],
html.dark .branch-graph .edge path[stroke="#a9a9a9"],
html.dark .branch-graph .edge polygon[stroke="#a9a9a9"] {
	stroke: #b8bcc4;
}
html.dark .branch-graph .edge polygon[fill="darkgray"],
html.dark .branch-graph .edge polygon[fill="#a9a9a9"] {
	fill: #b8bcc4;
}
/* roboshelf = purple */
html.dark .branch-graph .edge path[stroke="purple"],
html.dark .branch-graph .edge polygon[stroke="purple"],
html.dark .branch-graph .edge path[stroke="#800080"],
html.dark .branch-graph .edge polygon[stroke="#800080"] {
	stroke: #c58fff;
}
html.dark .branch-graph .edge polygon[fill="purple"],
html.dark .branch-graph .edge polygon[fill="#800080"] {
	fill: #c58fff;
}
/* Forced edges (no explicit color) → default black */
html.dark .branch-graph .edge path[stroke="black"],
html.dark .branch-graph .edge path[stroke="#000000"],
html.dark .branch-graph .edge path:not([stroke]) {
	stroke: #e4e6eb;
}
html.dark .branch-graph .edge polygon[fill="black"],
html.dark .branch-graph .edge polygon[fill="#000000"] {
	fill: #e4e6eb;
}
html.dark .branch-graph .edge polygon[stroke="black"],
html.dark .branch-graph .edge polygon[stroke="#000000"] {
	stroke: #e4e6eb;
}

html.dark .graph-key {
	background-color: var(--rm-graph-key-bg);
	color: var(--rm-fg);
	border: 1px solid #4a4d54;
}

/* Legend arrows are CSS masks defined in main.css. Dark mode only swaps each
   class's `color` — the shape stays identical. */
html.dark .auto-merge-arrow       { color: #e4e6eb; }
html.dark .gated-auto-merge-arrow { color: #ffb74d; }
html.dark .on-request-arrow       { color: #b8bcc4; }
html.dark .default-flow-arrow     { color: #7ab8ff; }
html.dark .block-assets-arrow     { color: #b8bcc4; }
html.dark .roboshelf-arrow        { color: #c58fff; }
html.dark .red-arrow              { color: #ff7b7b; }

/* ===== Tabs ===== */
html.dark div#branchList ul.nav.nav-tabs {
	background-color: var(--rm-tab-bg);
	border-bottom-color: var(--rm-fg);
}

html.dark div#branchList ul.nav.nav-tabs > li.nav-item:not(.nav-item-active) > a {
	background-color: var(--rm-tab-bg);
	border-color: var(--rm-tab-inactive-border);
	border-bottom-color: var(--rm-tab-inactive-border-bottom);
	color: var(--rm-fg);
}

html.dark div#branchList ul.nav.nav-tabs > li.nav-item:not(.nav-item-active) > a:hover,
html.dark div#branchList ul.nav.nav-tabs > li.nav-item:not(.nav-item-active) > a:focus {
	background-color: var(--rm-card-bg);
	border-color: var(--rm-muted-fg);
	border-bottom-color: var(--rm-tab-active-bg);
}

html.dark div#branchList ul.nav.nav-tabs > li.nav-item-active > a {
	background-color: var(--rm-tab-active-bg);
	border-color: var(--rm-fg);
	border-bottom-color: var(--rm-tab-active-bg);
	color: var(--rm-fg);
}

/* ===== Signed-in user ===== */
html.dark #signed-in-user {
	background-color: var(--rm-signed-in-bg);
}
html.dark #signed-in-user .user-name {
	color: var(--rm-signed-in-name);
}
html.dark #signed-in-user .tags {
	color: var(--rm-muted-fg);
}
html.dark #signed-in-user i {
	color: var(--rm-muted-fg);
}

html.dark #top-right {
	color: var(--rm-muted-fg);
}

/* ===== Buttons ===== */
html.dark .btn.btn-secondary-alt,
html.dark .button-bar .btn.btn-outline-dark {
	color: var(--rm-btn-secondary-fg);
	background-color: var(--rm-btn-secondary-bg);
	border-color: var(--rm-btn-secondary-border);
}

html.dark .btn.btn-secondary-alt:hover,
html.dark .button-bar .btn.btn-outline-dark:hover {
	background-color: var(--rm-btn-secondary-hover-bg);
	color: var(--rm-btn-secondary-fg);
}

html.dark .btn.btn-secondary-alt:focus,
html.dark .button-bar .btn.btn-outline-dark:focus {
	background-color: var(--rm-btn-secondary-focus-bg);
	border-color: var(--rm-fg);
	color: var(--rm-btn-secondary-fg);
}

html.dark .btn.btn-primary-alt {
	background-color: var(--rm-btn-primary-bg);
	border-color: var(--rm-btn-primary-border);
	color: var(--rm-btn-primary-fg);
}

/* Bootstrap btn-light is hard-coded white — kill it in dark mode */
html.dark .btn.btn-light {
	background-color: var(--rm-btn-secondary-bg);
	border-color: var(--rm-btn-secondary-border);
	color: var(--rm-btn-secondary-fg);
}
html.dark .btn.btn-light:hover {
	background-color: var(--rm-btn-secondary-hover-bg);
	color: var(--rm-btn-secondary-fg);
}

/* Help button in top-right (.big-help is just a margin tweak; bootstrap's
   .btn-outline-dark has a dark border + dark text that vanish on dark bg). */
html.dark .btn.btn-outline-dark,
html.dark .big-help {
	color: var(--rm-fg);
	border-color: var(--rm-btn-secondary-border);
	background-color: transparent;
}
html.dark .btn.btn-outline-dark:hover,
html.dark .big-help:hover {
	color: var(--rm-fg);
	background-color: var(--rm-btn-secondary-hover-bg);
	border-color: var(--rm-fg);
}
html.dark .btn.btn-outline-dark:focus,
html.dark .big-help:focus {
	color: var(--rm-fg);
	background-color: var(--rm-btn-secondary-focus-bg);
	box-shadow: 0 0 0 0.2rem rgba(122, 184, 255, 0.3);
}

/* Bootstrap btn-info / btn-warning / btn-success have hard-coded white text that
   does work on dark, but the backgrounds clash with the page color when used as
   block buttons. Leave them mostly alone; just darken slightly. */
html.dark .btn.btn-info {
	background-color: #155a6b;
	border-color: #1a6b80;
}
html.dark .btn.btn-info:hover {
	background-color: #1a6b80;
	border-color: #207e96;
}

html.dark .info-block.conflict .cl-menu-button .btn {
	background-color: var(--rm-cl-button-bg);
	border-color: var(--rm-cl-button-border);
	color: var(--rm-fg);
}

html.dark .cl-menu-button .btn.last-good-cl,
html.dark .lastchangecell .last-good-cl {
	color: var(--rm-good-cl-fg);
}
html.dark .cl-menu-button .btn.last-good-cl:hover {
	color: var(--rm-good-cl-hover-fg);
}

html.dark .cl-menu-button .btn.temp-gate-cl,
html.dark .lastchangecell .temp-gate-cl {
	color: #e0b84a; /* brighter goldenrod for dark backgrounds */
}
html.dark .cl-menu-button .btn.temp-gate-cl:hover {
	color: #f0cf73;
}

/* ===== Dropdowns ===== */
html.dark .dropdown-menu {
	background-color: var(--rm-dropdown-bg);
	border-color: var(--rm-modal-border);
	color: var(--rm-dropdown-fg);
}
html.dark .dropdown-menu .dropdown-item {
	color: var(--rm-dropdown-fg);
}
html.dark .dropdown-menu .dropdown-item:hover,
html.dark .dropdown-menu .dropdown-item:focus {
	background-color: var(--rm-dropdown-hover-bg);
	color: var(--rm-dropdown-fg);
}
html.dark .dropdown-item.active,
html.dark .dropdown-item:active {
	background-color: var(--rm-dropdown-active-bg);
	color: #fff;
}
html.dark .dropdown-divider {
	border-top-color: var(--rm-modal-border);
}

/* ===== Form inputs ===== */
html.dark .form-control,
html.dark input[type="text"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark input[type="email"],
html.dark textarea,
html.dark select {
	background-color: var(--rm-input-bg);
	color: var(--rm-input-fg);
	border-color: var(--rm-input-border);
}
html.dark .form-control:focus {
	background-color: var(--rm-input-bg);
	color: var(--rm-input-fg);
	border-color: var(--rm-btn-primary-bg);
}
html.dark .form-control::placeholder {
	color: var(--rm-muted-fg);
}

/* ===== Modals ===== */
html.dark .modal-content {
	background-color: var(--rm-modal-bg);
	color: var(--rm-modal-fg);
	border-color: var(--rm-modal-border);
}
html.dark .modal-header,
html.dark .modal-footer {
	border-color: var(--rm-modal-border);
}
html.dark .modal-header .close {
	color: var(--rm-fg);
	text-shadow: 0 1px 0 #000;
}
html.dark .modal-backdrop.show {
	opacity: 0.7;
}

/* ===== Alerts ===== */
html.dark .alert-danger {
	background-color: var(--rm-alert-danger-bg);
	color: var(--rm-alert-danger-fg);
	border-color: var(--rm-alert-danger-border);
}
html.dark .alert-success {
	background-color: var(--rm-alert-success-bg);
	color: var(--rm-alert-success-fg);
	border-color: var(--rm-alert-success-border);
}
html.dark .alert-warning {
	background-color: var(--rm-alert-warning-bg);
	color: var(--rm-alert-warning-fg);
	border-color: var(--rm-alert-warning-border);
}
html.dark .alert-info {
	background-color: var(--rm-alert-info-bg);
	color: var(--rm-alert-info-fg);
	border-color: var(--rm-alert-info-border);
}

/* ===== Misc text colors ===== */
html.dark .warning {
	color: var(--rm-warning-fg);
}
html.dark .dead-bot {
	color: var(--rm-dead-bot-fg);
}

/* Bootstrap defaults `pre` to dark text (#212529), which disappears against
   the dark page. This shows up most visibly on the crashed-bot tab where
   the stack trace is rendered as a <pre>. Use a slightly raised surface so
   the block also reads as a code area, not just floating text. */
html.dark pre {
	color: var(--rm-fg);
	background-color: var(--rm-card-bg);
	border: 1px solid var(--rm-table-border);
	border-radius: 4px;
	padding: 0.6em 0.8em;
}

/* ===== Cards (used by createshelf, etc.) ===== */
html.dark .card {
	background-color: var(--rm-card-bg);
	border-color: var(--rm-table-border);
	color: var(--rm-fg);
}
html.dark .card-header,
html.dark .card-footer {
	background-color: var(--rm-tab-bg);
	border-color: var(--rm-table-border);
}

/* ===== Login form ===== */
html.dark .login-form form {
	background-color: var(--rm-card-bg);
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.5);
	color: var(--rm-fg);
}

/* ===== Graph control panel ===== */
html.dark details.graphcontrolpanel {
	color: var(--rm-fg);
}
html.dark details.botselect {
	background-color: var(--rm-card-bg);
	color: var(--rm-fg);
	border-color: var(--rm-btn-secondary-border);
}
html.dark details.botselect fieldset ul li:hover {
	background: var(--rm-dropdown-hover-bg);
}

/* The Bootstrap .border utility uses rgba(0,0,0,.125) which vanishes on dark */
html.dark .border,
html.dark .border-top,
html.dark .border-right,
html.dark .border-bottom,
html.dark .border-left {
	border-color: var(--rm-table-border) !important;
}

/* ===== Dark mode slider switch =====
   Single <button role="switch"> rendered as: round-cap track containing a
   sliding thumb + "Dark Mode" text label to its right. Aligns with the
   Material / Horde toggle convention. */
.dark-mode-switch {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-right: .5em;
	padding: 4px 8px;
	background: transparent;
	border: none;
	color: inherit;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.85rem;
	line-height: 1;
	vertical-align: middle;
}
.dark-mode-switch:focus {
	outline: none;
}
.dark-mode-switch:focus-visible .dark-mode-switch-track {
	box-shadow: 0 0 0 2px rgba(122, 184, 255, 0.5);
}
.dark-mode-switch-track {
	position: relative;
	display: inline-block;
	width: 34px;
	height: 18px;
	border-radius: 999px;
	background: #c4c8cf;
	transition: background-color 0.2s;
	flex: 0 0 auto;
}
.dark-mode-switch-thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	transition: left 0.2s, background-color 0.2s;
}
.dark-mode-switch-label {
	font-weight: 500;
	white-space: nowrap;
}
/* Active (dark) state: thumb slides right; track turns brand blue. */
html.dark .dark-mode-switch-track {
	background: #4a7eb5;
}
html.dark .dark-mode-switch-thumb {
	left: 18px;
}
html.dark .dark-mode-switch-label {
	color: var(--rm-fg);
}