/* Inter was previously loaded via @import from fonts.googleapis.com,
   but MantisBT sends `Content-Security-Policy: style-src 'self'
   'unsafe-inline'` (core/http_api.php), which blocks any external
   stylesheet host — same root cause as the earlier inline-<script>
   problem. The @import silently failed every load; falling back to
   Open Sans (already self-hosted correctly via css/fonts.css) rather
   than pointing at a font that will never load. */

@media print {
	#view-issue-page .bugnote .btn { display: none; }
	#view-issue-page .bugnote .btn-sm { display: none; }
	.noprint { display: none; }
}

span.print { font-size: 8pt; }
span.required 		{ font-size: 8pt; color: #a8323c; }

td.category, th.category,
td.category label, th.category label
{
    background-color: #edf3f4 !important;
    color: #000000;
    font-weight: bold;
    vertical-align : top;
}
td.category .small, th.category .small	{ font-weight: normal;  }

.small-caption	{
    border: 1px solid #fff;
    font-size: 8pt;
    padding: 0 5px;
}
tr.spacer			{ background-color: #ffffff !important; color: #000000; height: 5px; }

/* Issue Summary at bug_report_page.php, bug_update_page.php */
input[type="text"]#summary { width: 100%; }

/**
 * view_all_bug_page.php
 */
#buglist td, #buglist th	{ text-align: center; }
#buglist .column-summary,
#buglist .column-description,
#buglist .column-notes,
#buglist .column-steps-to-reproduce,
#buglist .column-additional-information,
#buglist .cftype-string,
#buglist .cftype-textarea
	{ text-align: left; }

.sticky-separator,
.test-langs th
	{ background-color: lightgrey; }

/* manage_plugin_page.php */
span.dependency_dated		{ color: maroon; }
span.dependency_met			{ color: green; }
span.dependency_unmet		{ color: red; }
span.dependency_upgrade		{ color: orange; }

tr.bugnote, div.widget-box, a#attachments, .test-langs tr {
	scroll-margin-top: 50px;
}
tr.bugnote .bugnote-note { background-color: #e8e8e8; color: #000000; width: 75%; vertical-align: top; }

.bugnote-private { background-color: #fcf8e3 !important;}

.nowrap
{
	white-space: nowrap;
}

.issue-status
{
	border-bottom: 1px dotted black;
}

.bug-attachments {
	margin: 0;
	padding: 0;
}

.bug-attachments > ul {
	list-style: none;
	margin: 0.5em;
	padding: 0;
}

.bug-attachments > ul > li {
	margin: 0.5em 0;
	padding: 0;
}

.bug-attachments > ul > li > div {
	margin: 0;
	padding: 0;
}

.bug-attachment-preview-text, .bug-attachment-preview-image {
	margin: 1em;
	padding: 1em;
}

.bug-attachment-preview-image img {
	max-width: 100%;
}

.bug-attachment-preview-text {
	white-space: pre-wrap;
}

#dates label[for=start_date], #dates > label[for=end_date] {
	float: left;
	width: 3em;
}

/* manage_config_* colors */
.color-global		{ background-color: LightBlue; }
.color-project		{ background-color: LightGreen; }

td.due-0, td.overdue { background-color: red; color: #ffffff; font-weight: bold; }
td.due-1             { background-color: darkorange; color: #ffffff; font-weight: bold; }
td.due-2             { background-color: green; color: #ffffff; font-weight: bold; }
td.print-overdue     { font-weight: bold; }

.collapse-link { cursor: pointer; }

.table-nonfluid {
   width: auto !important;
}

.login-logo {
	text-align: center;
}

/* strike-through resolved issues: #22492 */
.resolved  {
    text-decoration: line-through;
}

.error-details .code {
	font-family: monospace;
}

table.filters td.category {
	color: #337ab7;
}

.listjs-table .sort:after {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  content: "";
  position: relative;
  top: -10px;
  right: -5px;
}

.listjs-table .sort.desc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #707070;
  content: "";
  position: relative;
  top: 4px;
  right: -5px;
}

.listjs-table .sort.asc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #707070;
  content: "";
  position: relative;
  top: -4px;
  right: -5px;
}

.listjs-table .sort:hover {
	text-decoration: underline;
}

.test-langs ol.plugins-toc {
    column-count: auto;
    column-width: 130px;
    column-gap: 60px;
    margin: 10px 15px 10px 30px;
}

.editable_access_level {
    display: inline-grid;
    grid-template-columns: 1fr 20px 1fr;
}

#log-event-list .duplicate-query {
    color: #E2755F;
}

/* ═══════════════════════════════════════════════════════════
   Rational Forge theme
   Reskins the stock ACE/Bootstrap chrome to match rationalforge.com
   without touching the vendor files (ace*.css, bootstrap*.css).
   Light values live on :root; dark values redefine the same custom
   properties under html.dark, toggled by the RFTheme plugin (see
   plugins/RFTheme).

   IMPORTANT: config_get_global('css_include_file') (this file) is
   emitted FIRST in core/html_api.php's html_css() — bootstrap, ace,
   ace-skins and ace-mantis all load AFTER it, not before. So we can
   never rely on source order to win a specificity tie; !important
   is used throughout on every color/background/border property that
   has any plausible same-or-lower-specificity vendor rule to beat,
   not just where the vendor rule itself used !important.

   Several vendor rules turned out to be a genuine TIE with ours
   (same selector class-count, also !important) — e.g. ace-mantis.css
   has `table { background-color: #ffffff !important; }`, ace-skins
   has `.skin-3 .nav-list>li.active>a { background-color:#f3faff
   !important; }`, ace.css has `.widget-header{background-color:#EEE
   !important}` and `.nav-tabs{background-color:#F9F9F9!important}`.
   !important alone doesn't break a tie — since the vendor files load
   after us, they win every tie. So selectors below are prefixed with
   `body` (or `body.skin-3`) wherever a same-specificity vendor rule
   is plausible, purely to add one extra, always-true specificity
   point and turn the tie into a clean win.
═══════════════════════════════════════════════════════════ */

/* ── Tokens (light = default) ──────────────────────────── */
:root {
    --rf-red:      #a8323c;
    --rf-blue:     #1d2b4e;
    --rf-lblue:    #2c5f96;
    --rf-cyan:     #4e9fd1;
    --rf-orange:   #c8622f;
    --rf-yellow:   #d8bf4a;

    --rf-bg:            #f5f7fa;
    --rf-panel:         #ffffff;
    --rf-panel-alt:     #f8fafc;
    --rf-border:        #e5e7eb;
    --rf-text:          #374151;
    --rf-text-dim:      #6b7280;
    --rf-heading:       var(--rf-blue);
    --rf-link:          var(--rf-lblue);
    --rf-link-hover:    var(--rf-cyan);

    --rf-btn-bg:            #eef2f6;
    --rf-btn-border:        #d7dee6;
    --rf-btn-bg-hover:      #e3e9f0;
    --rf-btn-border-hover:  #c3ccd6;

    --rf-input-bg:      #ffffff;
    --rf-input-border:  #d7dee6;

    --rf-code-bg:   #f1f5f9;
    --rf-code-text: #9c5a2e;

    --rf-card-shadow:     0 1px 3px rgba(15,23,42,0.04);
    --rf-dropdown-shadow: 0 10px 30px rgba(15,23,42,0.12);
    --rf-modal-shadow:    0 24px 60px rgba(15,23,42,0.25);

    /* ACE's own colour words, muted. See the "ACE colour utilities"
       section near the bottom for what these are and why they exist. */
    --rf-u-red:       #a8323c;
    --rf-u-red-soft:  #99555c;
    --rf-u-orange:    #a4551f;
    --rf-u-yellow:    #7a6220;
    --rf-u-green:     #2f6b45;
    --rf-u-blue:      #2c5f96;
    --rf-u-blue-soft: #4a7ba8;
    --rf-u-purple:    #6a4f82;
    --rf-u-pink:      #8c4f70;
}

/* ── Tokens (dark, toggled by html.dark) ───────────────── */
html.dark {
    --rf-bg:            #0a1120;
    --rf-panel:         #111827;
    --rf-panel-alt:     #0d1526;
    --rf-border:        #1f2937;
    --rf-text:          #dbe2ea;
    --rf-text-dim:      #8b97a8;
    --rf-heading:       #f1f5f9;
    --rf-link:          var(--rf-cyan);
    --rf-link-hover:    #7ec0e8;

    --rf-btn-bg:            #1f2937;
    --rf-btn-border:        #2d3a4d;
    --rf-btn-bg-hover:      #29354a;
    --rf-btn-border-hover:  #3b4a61;

    --rf-input-bg:      #0d1526;
    --rf-input-border:  #2d3a4d;

    --rf-code-bg:   #0d1526;
    --rf-code-text: #e0a077;

    --rf-card-shadow:     0 1px 3px rgba(0,0,0,0.25);
    --rf-dropdown-shadow: 0 10px 30px rgba(0,0,0,0.45);
    --rf-modal-shadow:    0 24px 60px rgba(0,0,0,0.55);

    /* Same nine, lifted so they carry on the dark page instead of
       disappearing into it. */
    --rf-u-red:       #d99098;
    --rf-u-red-soft:  #c9878e;
    --rf-u-orange:    #d99a72;
    --rf-u-yellow:    #d3c07f;
    --rf-u-green:     #8dbfa0;
    --rf-u-blue:      #7eb4dc;
    --rf-u-blue-soft: #a3cbe8;
    --rf-u-purple:    #b39ecd;
    --rf-u-pink:      #cc9db8;
}

/* On short pages (few table rows, empty states) body/.page-content
   don't have enough content to reach the bottom of the viewport —
   background-color only paints within an element's own box, so
   below wherever the content naturally ends, there's nothing there
   to paint and the browser's default white canvas shows through
   regardless of what color everything above it is set to. Forcing
   full viewport height is the actual fix, not another element-by-
   element patch. */
html {
    min-height: 100%;
    background-color: var(--rf-bg) !important;
}
body {
    font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
    background-color: var(--rf-bg) !important;
    color: var(--rf-text) !important;
    min-height: 100vh;
}
#main-container,
.main-container {
    min-height: 100vh;
    background-color: var(--rf-bg) !important;
}

/* html, #main-container, .footer-inner, and .footer-content have all
   consistently tested as transparent via getComputedStyle despite
   the exact same "selector { background-color: var(--rf-bg)
   !important }" technique working correctly on body/.footer/every
   other element in this file — checked for competing vendor
   !important rules (none found), inline JS-set styles (none found),
   and file nesting/syntax errors (none found). No confirmed
   explanation, so rather than keep chasing it, these specific
   structural wrapper elements get a hardcoded, var()-free fallback
   scoped to dark mode — nothing left in the chain that can fail to
   resolve. */
html.dark,
html.dark #main-container,
html.dark .main-container,
html.dark .footer-inner,
html.dark .footer-content {
    background-color: #0a1120 !important;
}

body h1, body h2, body h3, body h4, body h5, body h6 { color: var(--rf-heading) !important; }

body a { color: var(--rf-link) !important; }
body a:hover, body a:focus { color: var(--rf-link-hover) !important; }

body.skin-3 .page-content,
body .page-content {
    background-color: var(--rf-bg) !important;
}

/* Outer wrapper around the breadcrumb bar (id="breadcrumbs") — a
   different element than .breadcrumb (the <ul> inside it). Missed
   entirely before; ace-skins sets `.skin-3 .breadcrumbs{background-
   color:#E7F2F8}` (no !important, but never overridden until now). */
body.skin-3 .breadcrumbs,
body .breadcrumbs {
    background-color: var(--rf-panel) !important;
    border-color: var(--rf-border) !important;
}

/* .main-container:before is a full-height decorative pseudo-element
   ace.css positions behind everything (position:absolute; top:0;
   bottom:0; width:100%; z-index:-2) specifically to paint a page-wide
   background wash — ace.css sets it to solid #FFF, ace-skins.css then
   sets it again to a #FFF-to-#EEF5FA gradient for .skin-3. Neither
   uses !important, but this is likely the single biggest source of
   "big white areas" reports (behind the breadcrumb bar, below short
   pages like Roadmap, etc.), since it sits behind the entire content
   column regardless of what's actually rendered in front of it. */
body .main-container:before,
body.skin-3 .main-container:before {
    background: var(--rf-bg) !important;
}

/* Sidebar collapse toggle (the little arrow button at the bottom of
   the sidebar) — ace.css/ace-skins.css both set a light gray bg with
   no !important. */
body.skin-3 .sidebar-toggle {
    background-color: var(--rf-panel) !important;
    border-color: var(--rf-border) !important;
}
body.skin-3 .sidebar-toggle > .ace-icon {
    background-color: var(--rf-panel-alt) !important;
    border-color: var(--rf-border) !important;
    color: var(--rf-text-dim) !important;
}

/* Toolbar strip that holds the Print Reports/CSV/Excel/Summary
   buttons at the top of a table widget — ace.css: `.widget-toolbox{
   background-color:#EEE}` (no !important; there's also a narrower
   media-query variant that sets transparent!important, but only at
   certain widths, so it doesn't reliably win). */
body .widget-toolbox {
    background-color: var(--rf-panel) !important;
}

/* Bootstrap only sets border/overflow on .table-responsive, not
   background, so this is defensive rather than a confirmed fix — but
   cheap insurance against the rounded card corner showing a seam. */
body .table-responsive {
    background-color: var(--rf-panel) !important;
}

/* ── Top navbar (always brand navy, both themes) ────────── */
body.skin-3 .navbar,
body.skin-3 .navbar.navbar-collapse {
    background: var(--rf-blue) !important;
    background-image: none !important;
}
.navbar .navbar-brand,
.navbar-brand,
#mantis-logo-image {
    font-weight: 700;
}
body.skin-3 .navbar .navbar-toggle {
    background-color: rgba(255,255,255,0.12) !important;
}
/* .nav-search-input appears in two different contexts: the actual
   top navbar (always dark navy) and the breadcrumb bar (id=nav-search,
   now also dark, see .breadcrumbs above) — solid colors read
   correctly in both, unlike the translucent-white overlay this used
   to be, which only made sense against the navbar specifically. */
body .nav-search .nav-search-input {
    border-color: var(--rf-border) !important;
    border-radius: 6px;
    background-color: var(--rf-input-bg) !important;
    color: var(--rf-text) !important;
}
body .nav-search .nav-search-icon {
    color: var(--rf-text-dim) !important;
}

/* Light/dark toggle button (see plugins/RFTheme). Floats in the
   bottom-right corner of the viewport rather than inside the navbar
   itself, since the navbar's existing icon layout (user/admin menu,
   search, etc.) is core markup we can't see or edit from a plugin,
   and a fixed navbar offset collided with the admin menu button. A
   detached corner button can't collide with anything. Uses the
   theme tokens so it stays readable in both modes. */
.rf-theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1030;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--rf-border);
    background: var(--rf-panel);
    color: var(--rf-heading);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.rf-theme-toggle:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.24); }
.rf-theme-toggle .rf-icon-light { display: none; }
html.dark .rf-theme-toggle .rf-icon-dark { display: none; }
html.dark .rf-theme-toggle .rf-icon-light { display: inline-block; }

/* ── Sidebar & nav list ─────────────────────────────────── */
body.skin-3 .sidebar {
    background-color: var(--rf-panel) !important;
    border-width: 0 1px 0 0;
    border-color: var(--rf-border) !important;
}
body.skin-3 .nav-list > li > a {
    background-color: transparent !important;
    color: var(--rf-text-dim) !important;
    border-bottom: 1px solid var(--rf-border);
}
body.skin-3 .nav-list > li:hover > a {
    background-color: rgba(78,159,209,0.08) !important;
    color: var(--rf-lblue) !important;
}
html.dark body.skin-3 .nav-list > li:hover > a {
    color: var(--rf-cyan) !important;
}
body.skin-3 .nav-list > li:hover:before,
body.skin-3 .nav-list > li.open:before {
    background-color: var(--rf-cyan) !important;
}
/* ace-skins.css: `.skin-3 .nav-list>li.active>a{background-color:
   #f3faff!important;color:#4D96CB!important}` — same class-count as
   our previous selector and !important, so it was tying (and, since
   it loads after us, winning). body.skin-3 breaks the tie. */
body.skin-3 .nav-list > li.active > a,
body.skin-3 .nav-list > li.active.highlight > a {
    background-color: rgba(78,159,209,0.12) !important;
    color: var(--rf-lblue) !important;
    font-weight: 600;
}
html.dark body.skin-3 .nav-list > li.active > a,
html.dark body.skin-3 .nav-list > li.active.highlight > a {
    background-color: rgba(78,159,209,0.16) !important;
    color: var(--rf-cyan) !important;
}
body.skin-3 .nav-list > li.active:before {
    background-color: var(--rf-lblue) !important;
}
html.dark body.skin-3 .nav-list > li.active:before {
    background-color: var(--rf-cyan) !important;
}
body.skin-3 .nav-list .submenu {
    background-color: rgba(0,0,0,0.06) !important;
}
html.dark body.skin-3 .nav-list .submenu {
    background-color: rgba(0,0,0,0.18) !important;
}

/* ── Buttons ────────────────────────────────────────────── */
.btn,
.btn-app,
.btn-app.btn-default,
.btn-app.btn-primary,
.btn-app.btn-info,
.btn-app.btn-success,
.btn-app.btn-danger,
.btn-app.btn-warning,
.btn-app.btn-purple,
.btn-app.btn-pink,
.btn-app.btn-grey {
    background-image: none !important;
    border-radius: 8px !important;
    text-shadow: none !important;
}
body .btn,
body .btn-default,
body .btn:focus,
body .btn-default:focus,
body .btn.focus,
body .btn-default.focus {
    background-color: var(--rf-btn-bg) !important;
    border-color: var(--rf-btn-border) !important;
    color: var(--rf-text) !important;
}
body .btn:hover,
body .btn-default:hover,
body .btn:focus:hover,
body .btn-default:focus:hover,
body .btn:active:hover,
body .btn-default:active:hover {
    background-color: var(--rf-btn-bg-hover) !important;
    border-color: var(--rf-btn-border-hover) !important;
}
.btn-primary,
a.btn-primary,
button.btn-primary,
input.btn-primary,
.btn-primary:focus,
.btn-primary.focus,
.btn-app.btn-primary,
.btn-app.btn-primary.no-hover:hover,
.btn-app.btn-primary.disabled:hover {
    background: #a8323c !important;
    background-image: none !important;
    border-color: #a8323c !important;
    color: #fff !important;
}
.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover,
input.btn-primary:hover,
.btn-primary:focus:hover,
.btn-primary.focus:hover,
.btn-primary:active:hover,
.btn-primary:focus:active,
.open > .btn-primary.dropdown-toggle,
.btn-app.btn-primary:hover {
    background: #8d2831 !important;
    background-image: none !important;
    border-color: #8d2831 !important;
}
.btn-primary.active,
.btn-primary.focus.active,
.btn-primary.active:focus,
.btn-primary.active:hover {
    background: #742029 !important;
    background-image: none !important;
    border-color: #742029 !important;
}

/* .btn-white is an ACE "ghost button" modifier (core/print_api.php's
   print_link_button() puts it on every Print/CSV/Excel/Summary/
   Report Issue/Invite Users/Create New Account/Apply Filter/Update
   button) implemented as a 2-class selector (.btn.btn-white), which
   had higher specificity than our old 1-class rules. Also found a
   SEPARATE ace.css rule keyed on the reverse class order specifically
   for the primary variant — `.btn-white.btn-primary{color:...
   !important}` and `.btn-white.btn-primary.dropdown-toggle{
   background-color:#eaf2f8!important;...}` — class order doesn't
   change what a selector matches, but these are literally different
   selectors ace.css defines separately, so both orders need covering.
   body prefix added throughout for consistency with the rest of the
   file, even though the 3-4 class selectors here were already enough
   to win on pure specificity. */
body .btn.btn-white,
body .btn-white.btn-primary,
body .btn.btn-white:focus,
body .btn-white.focus {
    background: var(--rf-btn-bg) !important;
    background-image: none !important;
    border-color: var(--rf-btn-border) !important;
    color: var(--rf-text) !important;
}
body .btn.btn-white:hover,
body .btn.btn-white:active,
body .btn.btn-white.active,
body .open > .btn.btn-white.dropdown-toggle {
    background: var(--rf-btn-bg-hover) !important;
    background-image: none !important;
    border-color: var(--rf-btn-border-hover) !important;
    color: var(--rf-text) !important;
}
body .btn.btn-primary.btn-white,
body .btn-white.btn-primary,
body .btn-primary.btn-white,
body .btn.btn-primary.btn-white:focus,
body .btn.btn-primary.btn-white.focus,
body .btn-white.btn-primary.dropdown-toggle {
    background: #a8323c !important;
    background-image: none !important;
    border-color: #a8323c !important;
    color: #fff !important;
}
body .btn.btn-primary.btn-white:hover,
body .btn.btn-primary.btn-white:active,
body .btn.btn-primary.btn-white.active,
body .btn-white.btn-primary:hover,
body .open > .btn.btn-primary.btn-white.dropdown-toggle {
    background: #8d2831 !important;
    background-image: none !important;
    border-color: #8d2831 !important;
    color: #fff !important;
}

/* ── Cards (widget-box) ─────────────────────────────────── */
body .widget-box {
    border: 1px solid var(--rf-border) !important;
    border-radius: 14px;
    background-color: var(--rf-panel) !important;
    box-shadow: var(--rf-card-shadow) !important;
    overflow: hidden; /* clip header/body backgrounds to the rounded corners */
}
/* ace.css has two competing bare `.widget-header{background-color:
   ...!important}` rules (#EEE and transparent, for different widget
   variants) — same specificity as our old bare .widget-header, and
   since ace loads after us it won the tie. body prefix fixes it. */
body .widget-header {
    background: var(--rf-panel) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--rf-border) !important;
    padding-left: 18px;
}
body .widget-header > .widget-title {
    color: var(--rf-heading) !important;
    font-weight: 700;
    letter-spacing: -0.01em;
}
/* ace.css: `.white{color:#FFF!important}` is a global utility class,
   also used legitimately elsewhere (e.g. navbar icons on the always-
   dark navbar), so it can't be overridden everywhere — only scoped
   here, where My View's dashboard box titles use it explicitly
   (my_view_inc.php: <a class="white">Unassigned</a> etc.) since it
   assumed the old colored widget-header backgrounds. In light mode
   that made the link white-on-white until :hover. Confirmed via
   DevTools this is the only .white rule ace.css defines (no hidden
   higher-specificity competitor) — same "should structurally win,
   doesn't" pattern as html/#main-container/.footer-inner earlier, so
   using the same fix: hardcoded colors instead of var(), no variable
   left in the chain that can fail to resolve. */
body .widget-header .white,
body .widget-title .white {
    color: #1d2b4e !important;
}
html.dark body .widget-header .white,
html.dark body .widget-title .white {
    color: #f1f5f9 !important;
}
body .widget-toolbar > a,
body .widget-toolbar > .widget-menu > a {
    color: var(--rf-text-dim) !important;
}
body .widget-toolbar > a:hover,
body .widget-toolbar > .widget-menu > a:hover {
    color: var(--rf-cyan) !important;
}
body .widget-body,
body .widget-main {
    background-color: var(--rf-panel) !important;
    color: var(--rf-text) !important;
}

/* My View dashboard boxes use widget-color-* variant classes (one
   per panel: blue/green/red/purple/orange/...) which carry higher
   specificity than the plain .widget-header rule above, so they
   need their own override to stop showing the stock ACE rainbow. */
body .widget-box[class*="widget-color-"] {
    border-color: var(--rf-border) !important;
}
body .widget-box[class*="widget-color-"] > .widget-header {
    background: var(--rf-panel) !important;
    color: var(--rf-heading) !important;
    border-color: var(--rf-border) !important;
}

/* ── Dashboard stat tiles ───────────────────────────────── */
body .infobox {
    border-style: solid !important;
    border-color: var(--rf-border) !important;
    border-radius: 12px;
    background-color: var(--rf-panel) !important;
    color: var(--rf-text) !important;
    overflow: hidden;
}
body .infobox .infobox-content {
    color: var(--rf-text) !important;
}

/* ── Tables ─────────────────────────────────────────────── */
/* ace-mantis.css: `table { background-color: #ffffff !important; }`
   — identical selector and !important to our old bare `table` rule,
   so it tied and (loading after us) won. body prefix breaks it. */
body table {
    background-color: var(--rf-panel) !important;
    color: var(--rf-text) !important;
}
body .table > thead > tr > th {
    background-color: var(--rf-panel-alt) !important;
    color: var(--rf-heading) !important;
    border-bottom: 2px solid var(--rf-border) !important;
    font-weight: 700;
}
body .table > tbody > tr > td,
body .table > tbody > tr > th {
    border-color: var(--rf-border) !important;
}
/* Bootstrap sets `.table-hover>tbody>tr:hover{background-color:
   #f5f5f5}` on the ROW itself (no !important) — we'd only ever
   overridden the <td> inside it, not the <tr>, so the row's own
   light gray was still painting. Also switched from a translucent
   rgba() tint to a solid opaque color: a translucent overlay blends
   with whatever's underneath rather than guaranteeing a specific
   final color, so if the row's own background was ever even slightly
   off, the hover state read as barely-different-from-white instead
   of a reliable, readable dark highlight. */
body .table-hover > tbody > tr:hover,
body .table > tbody > tr:hover > td,
body .table > tbody > tr:hover > th {
    background-color: var(--rf-panel-alt) !important;
    color: var(--rf-text) !important;
}
body .table-bordered,
body .table-bordered > thead > tr > th,
body .table-bordered > tbody > tr > td {
    border-color: var(--rf-border) !important;
}
body .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--rf-panel-alt) !important;
}

/* Bug list status colors (status-<id>-bg / status-<id>-fg) are
   generated at request time by css/status_config.php from your
   admin-configured status colors (Manage > Configuration), not by
   this file — they're pastel-with-dark-text by design regardless of
   theme. The generic `table { color: var(--rf-text) }` rule above
   would otherwise force dark-theme's light gray text onto them,
   making it unreadable against their own light background. */
body [class*="status-"][class*="-bg"] {
    color: #1f2937 !important;
}

/* ── Forms ──────────────────────────────────────────────── */
/* Many Mantis form fields (e.g. the Summary field on Report/Update
   Issue, core/print_api.php:578) are plain <input> tags with no
   .form-control class at all, so they need their own bare-tag rule
   rather than relying only on the .form-control class. */
body .form-control,
body select,
body textarea,
body input[type="text"],
body input[type="search"],
body input[type="email"],
body input[type="password"],
body input[type="number"],
body input[type="tel"],
body input[type="url"] {
    background-color: var(--rf-input-bg) !important;
    border-radius: 8px;
    border-color: var(--rf-input-border) !important;
    color: var(--rf-text) !important;
}
body .form-control:focus,
body input[type="text"]:focus,
body input[type="search"]:focus,
body input[type="email"]:focus,
body input[type="password"]:focus,
body input[type="number"]:focus,
body input[type="tel"]:focus,
body input[type="url"]:focus,
body textarea:focus {
    border-color: var(--rf-cyan) !important;
    box-shadow: 0 0 0 3px rgba(78,159,209,0.15) !important;
}
body .input-group-addon {
    background-color: var(--rf-panel-alt) !important;
    border-color: var(--rf-input-border) !important;
    color: var(--rf-text-dim) !important;
}
body label, body .control-label, body th > label, body td > label {
    color: var(--rf-text) !important;
}
body .help-block, body .text-muted {
    color: var(--rf-text-dim) !important;
}
body select[disabled] {
    background-color: var(--rf-panel-alt) !important;
    color: var(--rf-text-dim) !important;
}

/* ── Pagination ─────────────────────────────────────────── */
body .pagination > li > a,
body .pagination > li > span,
body .pager > li > a,
body .pager > li > span {
    border-radius: 6px !important;
    background-color: var(--rf-panel) !important;
    border-color: var(--rf-border) !important;
    color: var(--rf-link) !important;
}
body .pagination > li.active > a,
body .pagination > li.active > a:hover,
body .pagination > li.active > a:focus {
    background-color: var(--rf-lblue) !important;
    border-color: var(--rf-lblue) !important;
}
body .pagination > li.disabled > a,
body .pagination > li.disabled > a:hover {
    background-color: var(--rf-panel) !important;
    color: var(--rf-text-dim) !important;
}

/* ── Badges, dropdowns, modals ──────────────────────────── */
.badge,
.label {
    border-radius: 6px;
}
/* ace.css: `.dropdown-menu{margin:0!important;border-color:#FFF
   !important;box-shadow:none!important;...}` — tied with our old
   bare .dropdown-menu rule, won on load order. */
body .dropdown-menu {
    background-color: var(--rf-panel) !important;
    border-radius: 10px;
    border-color: var(--rf-border) !important;
    box-shadow: var(--rf-dropdown-shadow) !important;
}
body .dropdown-menu > li > a {
    color: var(--rf-text) !important;
}
body .dropdown-menu > li > a:hover,
body .dropdown-menu > li > a:focus {
    background-color: rgba(78,159,209,0.10) !important;
    color: var(--rf-link) !important;
}
body .dropdown-menu .divider {
    background-color: var(--rf-border) !important;
}
body .modal-content {
    background-color: var(--rf-panel) !important;
    color: var(--rf-text) !important;
    border-radius: 16px;
    box-shadow: var(--rf-modal-shadow) !important;
}
body .modal-header, body .modal-footer {
    border-color: var(--rf-border) !important;
}

/* ── Misc text-bearing chrome ───────────────────────────── */
body code, body pre {
    background-color: var(--rf-code-bg) !important;
    color: var(--rf-code-text) !important;
    border-color: var(--rf-border) !important;
}
body blockquote {
    border-color: var(--rf-border) !important;
    color: var(--rf-text-dim) !important;
}
body .well {
    background-color: var(--rf-panel) !important;
    border-color: var(--rf-border) !important;
    color: var(--rf-text) !important;
}
body .breadcrumb {
    background-color: transparent !important;
    color: var(--rf-text-dim) !important;
}
body .breadcrumb > li + li:before {
    color: var(--rf-text-dim) !important;
}
/* ace.css: `.nav-tabs{background-color:#F9F9F9!important}`,
   `.nav-tabs>li>a{background-color:#F9F9F9!important;...}`, and
   `.nav-tabs>li.active>a{background-color:...!important;color:...
   !important}` are all tied with our old bare selectors here. */
body .nav-tabs {
    background-color: var(--rf-panel) !important;
    border-color: var(--rf-border) !important;
}
body .nav-tabs > li > a {
    color: var(--rf-text-dim) !important;
    background-color: transparent !important;
}
body .nav-tabs > li.active > a,
body .nav-tabs > li.active > a:hover,
body .nav-tabs > li.active > a:focus {
    background-color: var(--rf-panel) !important;
    border-color: var(--rf-border) var(--rf-border) transparent !important;
    color: var(--rf-link) !important;
}
body .list-group-item {
    background-color: var(--rf-panel) !important;
    border-color: var(--rf-border) !important;
    color: var(--rf-text) !important;
}
body hr {
    border-color: var(--rf-border) !important;
}

/* ── Alerts (readable pairing differs enough between themes
   that these are written out per-theme rather than tokenized) ── */
.alert {
    border-radius: 10px;
    border-width: 1px;
    border-style: solid;
}
.alert-success { background-color: #eef5f1 !important; border-color: #c6dfd0 !important; color: #2f6b45 !important; }
.alert-info    { background-color: #eef4f8 !important; border-color: #c3d9e8 !important; color: #2c5f96 !important; }
.alert-warning { background-color: #f7f3e6 !important; border-color: #e6d9ac !important; color: #7a6220 !important; }
.alert-danger  { background-color: #f8eeef !important; border-color: #e2c2c5 !important; color: #8d2831 !important; }
html.dark .alert-success { background-color: rgba(90,160,115,0.12) !important;  border-color: rgba(90,160,115,0.38) !important;  color: #a8d4ba !important; }
html.dark .alert-info    { background-color: rgba(78,159,209,0.10) !important;  border-color: rgba(78,159,209,0.35) !important;  color: #9ccbe6 !important; }
html.dark .alert-warning { background-color: rgba(216,191,74,0.10) !important;  border-color: rgba(216,191,74,0.35) !important;  color: #e6d290 !important; }
html.dark .alert-danger  { background-color: rgba(168,50,60,0.14) !important;   border-color: rgba(168,50,60,0.40) !important;   color: #e6a3aa !important; }

/* ── ACE colour utilities ───────────────────────────────────
   The single biggest miss in this file for a long time. ACE ships a set of
   bare colour words (.red, .blue, .orange ...) and a set of Bootstrap label
   and badge variants, and MantisBT uses them everywhere the RF theme does not
   reach: the priority and severity icons on every row of My View and the
   issue list (core/print_api.php calls print_icon with 'ace-icon bigger-125
   red'), the overdue marker, and the status and handler chips.

   None of it went through .btn-primary, so muting the brand red did nothing
   to any of it, and .red is #DD5A43, a hot tomato that reads as a louder red
   than the brand ever was. That is what still looked oversaturated after the
   palette change.

   Two things make these rules necessary rather than optional:

   1. ACE writes them as `.red{color:#DD5A43!important}`. !important on our
      side alone is not enough to win, because ace.min.css loads AFTER this
      file and an !important tie goes to whoever comes last. The `body` prefix
      adds one specificity point and turns the tie into a clean win. Do not
      strip it.
   2. The label and badge rules are defined by ACE under both `.label-danger`
      and `.label.label-danger`, so both forms are covered below.

   Verified against the live install by injecting these rules into a real page
   and reading the computed values back, not by reasoning about the cascade. */
body .red,
body .ace-icon.red      { color: var(--rf-u-red) !important; }
body .red2,
body .light-red         { color: var(--rf-u-red-soft) !important; }
body .green             { color: var(--rf-u-green) !important; }
body .blue              { color: var(--rf-u-blue) !important; }
body .light-blue        { color: var(--rf-u-blue-soft) !important; }
body .orange            { color: var(--rf-u-orange) !important; }
body .orange2           { color: var(--rf-u-yellow) !important; }
body .purple            { color: var(--rf-u-purple) !important; }
body .pink              { color: var(--rf-u-pink) !important; }

/* Solid chips. These carry white text in both themes, so they take the
   light-theme (darker) tones everywhere rather than following the toggle. */
body .label-danger,  body .label.label-danger,
body .label-important, body .label.label-important,
body .badge-danger,  body .badge.badge-danger,
body .badge-important, body .badge.badge-important
                        { background-color: #a8323c !important; color: #fff !important; }
body .label-warning, body .label.label-warning,
body .badge-warning, body .badge.badge-warning
                        { background-color: #a4551f !important; color: #fff !important; }
body .label-success, body .label.label-success,
body .badge-success, body .badge.badge-success
                        { background-color: #2f6b45 !important; color: #fff !important; }
body .label-info,    body .label.label-info,
body .badge-info,    body .badge.badge-info,
body .label-primary, body .label.label-primary
                        { background-color: #2c5f96 !important; color: #fff !important; }
body .label-grey,    body .label.label-grey,
body .badge-grey,    body .badge.badge-grey
                        { background-color: #8a8f96 !important; color: #fff !important; }


/* ── MantisBT utility backgrounds (see top of this file) ──
   The stock light chips (LightBlue/LightGreen/#e8e8e8/etc, all with
   black text) already carry their own contrasting bg+text, so they
   stay untouched in light mode; only dark mode needs a swap so they
   don't glare against the dark page. !important matches the
   specificity of the rules being overridden. */
html.dark td.category, html.dark th.category,
html.dark td.category label, html.dark th.category label {
    background-color: var(--rf-panel) !important;
    color: var(--rf-text) !important;
}
html.dark tr.bugnote .bugnote-note {
    background-color: var(--rf-panel) !important;
    color: var(--rf-text) !important;
}
html.dark .bugnote-private {
    background-color: rgba(216,191,74,0.08) !important;
    color: var(--rf-text) !important;
}
html.dark tr.spacer {
    background-color: transparent !important;
}
html.dark .color-global {
    background-color: rgba(78,159,209,0.15) !important;
    color: var(--rf-text) !important;
}
html.dark .color-project {
    background-color: rgba(90,160,115,0.18) !important;
    color: var(--rf-text) !important;
}

/* ── Footer ─────────────────────────────────────────────── */
/* ace.css puts .footer-inner at `position:fixed;bottom:0` (and
   .footer-content at `position:absolute`) at some breakpoints —
   pinned to the viewport rather than the page. Since both are
   otherwise transparent, what shows through them depends on
   whatever else happens to be stacked at that fixed screen
   position, which is unpredictable. Forcing them back into normal
   flow means they reliably paint their own (now dark) background
   instead of depending on that. */
body .footer-inner,
body .footer-content {
    position: static !important;
}
body .footer,
body .footer-inner,
body .footer-content {
    background-color: var(--rf-panel) !important;
    border-top: 1px solid var(--rf-border) !important;
}
body .footer .footer-inner,
body .footer .footer-inner address,
body .footer .footer-inner small {
    color: var(--rf-text-dim) !important;
    font-size: 0.8rem;
}

/* Defensive: .main-content wraps both the breadcrumb bar and
   .page-content, no confirmed competing rule found but cheap
   insurance against a gap showing through at its edges. */
body .main-content {
    background-color: var(--rf-bg) !important;
}