/**
 * ozone-theme.css - Ozone brand styling for MantisBT 2.28.
 *
 * Loaded last in <head> by OzoneTheme.php, so it always wins ties against
 * bootstrap / ace / ace-skins / ace-mantis. Where an !important appears it is
 * because Ace ships the same declaration with an !important of its own; the
 * reason is noted at each such rule.
 *
 * Scope rules this file holds itself to, so a stock MantisBT upgrade can be
 * dropped over the top without re-doing any of it:
 *
 *   1. Colour, type, border, radius, shadow and inner spacing only. No changes
 *      to position, display, float or width that Ace's layout depends on.
 *   2. The navbar stays 45px tall. Ace hardcodes that number in six places
 *      (.sidebar.sidebar-fixed{top}, .navbar-fixed-top+.main-container
 *      {padding-top}, .breadcrumbs-fixed{top}, .modal.aside-vc.navbar-offset,
 *      and two body.mob-safari variants). Changing it here would misalign the
 *      sidebar unless all six were tracked, which is the sort of coupling this
 *      overlay exists to avoid.
 *   3. Sidebar width (190px) and item height (39px) are Ace's and stay Ace's.
 *   4. Nothing that carries information is hidden. The MantisBT wordmark leaves
 *      the navbar in favour of the logo, but stays in the page <title>.
 *   5. No new network requests. No webfont CDN, no external asset - so the
 *      Content-Security-Policy in core/http_api.php needs no change.
 *
 * Palette is the intersection of the two Ozone front-ends: #EF552C from
 * web-portal (tailwind.config.js) and Atlas (frontend/src/index.css), which
 * agree on it exactly, plus the #17202D navy family from web-portal's
 * app/globals.css.
 */

/* ==========================================================================
   0. Inter, self-hosted
   --------------------------------------------------------------------------
   Served from this plugin rather than from Google. MantisBT sends
   `default-src 'self'` with no font-src of its own (core/http_api.php), so
   fonts.gstatic.com is blocked outright, and `style-src 'self' 'unsafe-inline'`
   would block the Google Fonts stylesheet as well. Self-hosting needs no CSP
   change, adds no third-party request, and keeps working offline.

   One variable file per subset, covering weight 400-700 - so every weight this
   theme uses arrives in a single download rather than one file per weight.
   The unicode-range split is Google's own: latin-ext is only fetched when a
   page actually contains a character from its range, so English pages pay for
   inter-latin.woff2 (47KB) alone.

   font-display: swap - text paints immediately in the fallback and re-renders
   when Inter arrives, rather than being invisible while the font loads.

   Inter is licensed under the SIL Open Font License 1.1; the licence travels
   with the font in files/OFL.txt.
   ========================================================================== */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('plugin_file.php?file=OzoneTheme/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('plugin_file.php?file=OzoneTheme/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	/* -- Brand. Constant across both themes. -------------------------- */
	--oz-orange:      #ef552c;
	--oz-orange-hi:   #ff8d57;
	--oz-orange-lo:   #d54800;
	--oz-orange-soft: rgba(239, 85, 44, .12);
	--oz-orange-edge: rgba(239, 85, 44, .35);
	--oz-navy:        #17202d;
	--oz-navy-deep:   #0c1015;
	--oz-navy-lift:   #263345;
	--oz-blue:        #3b82f6;

	/* Inter is now genuinely loaded - see the @font-face block above - and is
	   the face ozone3d.com and the portal both call for. The rest of the stack
	   is what renders while it swaps in, and what covers any character outside
	   the two subsets shipped: Open Sans is next because MantisBT already
	   serves it locally from css/fonts.css, so the fallback costs no request. */
	--oz-font: 'Inter', 'Segoe UI', 'Open Sans', system-ui, -apple-system, sans-serif;
	--oz-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;

	/* Atlas's --radius is 0.625rem. Kept at that scale rather than the much
	   larger radii on ozone3d.com, which suit marketing panels but read as
	   bubbly on a dense issue table. */
	--oz-radius:    10px;
	--oz-radius-sm: 6px;
	--oz-pill:      999px;

	/* -- Light surfaces (default; the dark block below overrides) ------ */
	--oz-bg:        #f4f6f9;
	--oz-surface:   #ffffff;
	--oz-surface-2: #f8fafc;
	--oz-surface-3: #eef2f7;
	--oz-ink:       #17202d;
	--oz-ink-muted: #5b6675;
	--oz-ink-faint: #8a95a5;
	--oz-line:      #e3e8ef;
	--oz-line-hard: #cfd6e0;
	--oz-shadow:    0 1px 2px rgba(16, 22, 31, .04), 0 2px 6px rgba(16, 22, 31, .06);
	--oz-shadow-lg: 0 4px 16px rgba(16, 22, 31, .12);

	--oz-side-bg:     #ffffff;
	--oz-side-ink:    #4a5563;
	--oz-side-hover:  #f1f4f9;
	--oz-input-bg:    #ffffff;
	--oz-input-focus: rgba(239, 85, 44, .16);

	/* Ink for text sitting on a css/status_config.php pastel. Those colours are
	   light in both themes, so this is dark in both themes. */
	--oz-on-status: #1b2430;

	/* Replaced per-install by the inline <style> OzoneTheme.php emits from the
	   brand_label plugin config. */
	--oz-brand-label: 'Bug Tracker';
}

[data-ozone-theme="dark"] {
	--oz-bg:        #10161f;
	--oz-surface:   #1a2230;
	--oz-surface-2: #212b3b;
	--oz-surface-3: #273345;
	--oz-ink:       #e8ecf3;
	--oz-ink-muted: #a8b0c0;  /* matches --muted in ozone3d.com rebrand-2026.css */
	--oz-ink-faint: #79839a;
	--oz-line:      #2a3546;
	--oz-line-hard: #3a4759;
	--oz-shadow:    0 1px 2px rgba(0, 0, 0, .35);
	--oz-shadow-lg: 0 6px 22px rgba(0, 0, 0, .5);

	--oz-side-bg:    #141b26;
	--oz-side-ink:   #a8b0c0;
	--oz-side-hover: #1e2735;
	--oz-input-bg:   #141b26;

	/* Hands native scrollbars, date pickers, autofill and form controls their
	   dark variants for free - a lot of chrome for one declaration. */
	color-scheme: dark;
}

/* ==========================================================================
   2. Base and typography
   ========================================================================== */

/* Forcing the typeface takes more than a `*` rule, and the reason is worth
   recording because it fails silently:

   MantisBT emits an inline `* { font-family: <font_family pref> }` from
   layout_user_font_preference(), so matching that with our own `*` looks like
   enough. It is not - `default.css` also sets `body { font-family: ... }` and
   the same inline block sets `h1, h2, h3, h4, h5 { ... }`. Those are element
   selectors at (0,0,1) and they beat ANY `*` rule at (0,0,0), no matter how
   late it comes. The result was Inter loading correctly and then never being
   used, with every page still rendering in Open Sans.

   `body, body *` is (0,0,1) - equal to those rules, later in the cascade, so it
   wins - while staying a hair below anything class-based. Icon fonts are
   therefore untouched: `.fa` and `.glyphicon` are (0,1,0) and still outrank
   this, which is what keeps the toolbar and status glyphs rendering. */
body,
body * {
	font-family: var(--oz-font);
}

/* Restore a monospace face for code, which the rule above - and MantisBT's own
   equivalent - would otherwise flatten to the body font. Must stay AFTER the
   `body *` rule: same specificity, so order is what decides it. */
body code,
body pre,
body kbd,
body samp,
body tt,
body .monospace {
	font-family: var(--oz-mono);
}

/* Painted on <html> as well as <body> because MantisBT's login page leaves the
   body shorter than the viewport, and a body background only reaches as far as
   the body box unless it propagates to the canvas. */
html {
	background-color: var(--oz-bg);
}

body,
body.skin-3 {
	background-color: var(--oz-bg);
	color: var(--oz-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Ace paints .main-container:before behind the whole page, and ace-mantis.css
   (line ~209, under a "Disable theme backgrounds" comment) forces it to
   #ffffff with !important. Without matching that, a white slab covers every
   page in dark mode. */
.main-container:before,
body.skin-3 .main-container:before {
	background: var(--oz-bg) !important;
}

.page-content,
.main-content {
	background-color: var(--oz-bg);
	color: var(--oz-ink);
}

h1, h2, h3, h4, h5, h6,
.page-header h1 {
	color: var(--oz-ink);
	letter-spacing: -.01em;
}

.page-header {
	border-bottom-color: var(--oz-line);
}

a {
	color: var(--oz-orange);
}

a:hover,
a:focus {
	color: var(--oz-orange-lo);
}

/* Darkening on hover disappears against a dark page, so brighten instead. */
[data-ozone-theme="dark"] a:hover,
[data-ozone-theme="dark"] a:focus {
	color: var(--oz-orange-hi);
}

hr {
	border-top-color: var(--oz-line);
}

.grey, .lighter, .light-grey, small, .small {
	color: var(--oz-ink-muted);
}

/* Focus ring, matching Atlas's --ring. :focus-visible only, so keyboard users
   get it without ringing every mouse click. */
:focus-visible {
	outline: 2px solid var(--oz-orange);
	outline-offset: 1px;
}

::selection {
	background: var(--oz-orange-soft);
	color: var(--oz-ink);
}

/* ==========================================================================
   3. Navbar - modelled on the web-portal header (app/components/Header.js)
   --------------------------------------------------------------------------
   Deliberately stays #17202D in BOTH themes: the portal header is dark
   regardless of page, it keeps one reversed logo correct everywhere, and dark
   chrome over a light workspace is the pattern Atlas already uses. Height
   stays 45px - see note 2 at the top of this file.
   ========================================================================== */

#navbar,
body.skin-3 #navbar.navbar {
	/* skin-3 ships `.skin-3 .navbar{background:#404040}` - a flat mid grey. */
	background: var(--oz-navy);
	border-bottom: 1px solid rgba(255, 255, 255, .07);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

#navbar #navbar-container {
	background: transparent;
}

/* -- Brand: Ozone logo, divider, label ---------------------------------- */

#navbar .navbar-brand {
	display: flex;
	align-items: center;
	gap: 11px;
	height: 45px;
	padding: 0 18px;
	/* Ace and bootstrap set a font-size and line-height here for a wordmark
	   that is no longer rendered; flex alignment replaces them. */
	line-height: 1;
}

/* The MantisBT wordmark, replaced by the logo below. Not a loss of
   information: config_get('window_title') still renders in <title>, so the
   product name stays in the tab, in bookmarks and in history. */
#navbar .navbar-brand > span.smaller-75 {
	display: none;
}

#navbar .navbar-brand:before {
	content: '';
	display: block;
	width: 86px;
	height: 19px;
	/* Relative URL, resolved against this stylesheet's own address
	   (<root>/plugin_file.php?file=...), so the base is <root>/ and it works
	   unchanged for a MantisBT installed in a subdirectory. Allowed by the
	   img-src 'self' in core/http_api.php. */
	background: url('plugin_file.php?file=OzoneTheme/logo-ozone-reversed.svg') no-repeat center center;
	background-size: contain;
	flex: 0 0 auto;
}

#navbar .navbar-brand:after {
	/* Resolves to `none` when brand_label is blank, in which case no element is
	   generated and its divider goes with it.
	   The !important is not optional: ace-mantis.css line ~204 carries
	   `a:link:after, a:visited:after { content: normal !important }` to stop
	   browsers printing link URLs, and it is NOT wrapped in a print media
	   query - so it applies on screen to every <a> on the page. .navbar-brand
	   is an <a href>, so without this the label silently never renders while
	   every other declaration in this block still applies. */
	content: var(--oz-brand-label) !important;
	padding-left: 11px;
	border-left: 1px solid rgba(255, 255, 255, .16);
	color: rgba(255, 255, 255, .62);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .02em;
	white-space: nowrap;
}

#navbar .navbar-brand:hover:after,
#navbar .navbar-brand:focus:after {
	color: rgba(255, 255, 255, .85);
}

/* -- Right-hand nav: flatten Ace's solid colour blocks ------------------- */

#navbar .ace-nav > li {
	/* Ace draws a hard #E1E1E1 rule between every item. */
	border-left-color: rgba(255, 255, 255, .08);
}

#navbar .ace-nav > li:first-child {
	border-left-width: 0;
}

/* Ace gives each of these a saturated fill (.blue #2E6589, .grey #555), which
   is most of why the stock header looks busy. Transparent instead, with the
   fill reserved for hover and open - the web-portal treatment. */
#navbar .ace-nav > li > a,
#navbar .ace-nav > li.grey > a,
#navbar .ace-nav > li.blue > a,
#navbar .ace-nav > li.light-blue > a,
#navbar .ace-nav > li.dark > a,
#navbar .ace-nav > li.purple > a,
#navbar .ace-nav > li.green > a,
#navbar .ace-nav > li.red > a {
	background-color: transparent;
	color: rgba(255, 255, 255, .88);
	transition: background-color .12s ease, color .12s ease;
}

#navbar .ace-nav > li > a:hover,
#navbar .ace-nav > li > a:focus,
#navbar .ace-nav > li.open > a,
#navbar .ace-nav > li.grey > a:hover,
#navbar .ace-nav > li.grey > a:focus,
#navbar .ace-nav > li.open.grey > a,
#navbar .ace-nav > li.blue > a:hover,
#navbar .ace-nav > li.blue > a:focus,
#navbar .ace-nav > li.open.blue > a {
	background-color: rgba(255, 255, 255, .09);
	color: #fff;
}

#navbar .ace-nav > li > a > .ace-icon {
	color: rgba(255, 255, 255, .8);
}

#navbar .ace-nav > li > a:hover > .ace-icon,
#navbar .ace-nav > li.open > a > .ace-icon {
	color: #fff;
}

#navbar .ace-nav .user-info {
	color: rgba(255, 255, 255, .9);
	font-size: 13px;
	font-weight: 500;
}

#navbar .ace-nav img.nav-user-photo {
	border-radius: var(--oz-pill);
	border: 1px solid rgba(255, 255, 255, .22);
}

/* Ace's hamburger and mobile user togglers are given a mid-blue fill by skin-3
   with !important, so matching it is the only way through. */
#navbar .navbar-toggle,
#navbar .navbar-toggle:focus,
#navbar .navbar-toggle:hover {
	background-color: rgba(255, 255, 255, .1) !important;
	border-color: rgba(255, 255, 255, .16);
}

/* The theme control injected by ozone-theme.js. */
#navbar .ace-nav > li.oz-theme-toggle > a {
	min-width: 44px;
	cursor: pointer;
}

/* -- Sun / moon icons ---------------------------------------------------
   Drawn here rather than taken from Font Awesome. FA 4.7 is what MantisBT
   bundles, and its only sun is `fa-sun-o` (\f185) - a hollow ring with
   triangular rays, which at 17px is indistinguishable from a cog. FA 4.7 has
   no solid sun at all, so the pair is drawn as SVG and applied as a mask.

   Mask rather than background-image so the shape is painted with
   `currentColor`: the icons then inherit the navbar's colour and its hover
   brightening for free, exactly as the font glyphs did. The -webkit- prefix is
   for older WebKit, which never unprefixed the mask shorthand. */
#navbar .ace-nav > li.oz-theme-toggle .oz-icon {
	display: inline-block;
	width: 17px;
	height: 17px;
	vertical-align: middle;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Solid core with eight rounded rays - unmistakably a sun at small sizes,
   which is the whole point of not using \f185. */
#navbar .ace-nav > li.oz-theme-toggle .oz-icon-sun {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4.6' fill='black'/%3E%3Cg stroke='black' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='M12 1.7v3'/%3E%3Cpath d='M12 19.3v3'/%3E%3Cpath d='M1.7 12h3'/%3E%3Cpath d='M19.3 12h3'/%3E%3Cpath d='M4.75 4.75l2.1 2.1'/%3E%3Cpath d='M17.15 17.15l2.1 2.1'/%3E%3Cpath d='M19.25 4.75l-2.1 2.1'/%3E%3Cpath d='M6.85 17.15l-2.1 2.1'/%3E%3C/g%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4.6' fill='black'/%3E%3Cg stroke='black' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='M12 1.7v3'/%3E%3Cpath d='M12 19.3v3'/%3E%3Cpath d='M1.7 12h3'/%3E%3Cpath d='M19.3 12h3'/%3E%3Cpath d='M4.75 4.75l2.1 2.1'/%3E%3Cpath d='M17.15 17.15l2.1 2.1'/%3E%3Cpath d='M19.25 4.75l-2.1 2.1'/%3E%3Cpath d='M6.85 17.15l-2.1 2.1'/%3E%3C/g%3E%3C/svg%3E");
}

/* Filled crescent, to sit as a matched pair with the solid sun above. */
#navbar .ace-nav > li.oz-theme-toggle .oz-icon-moon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2.4a9.6 9.6 0 1 0 9.6 9.6c0-.5-.04-.98-.11-1.45a5.75 5.75 0 0 1-4.69 2.41 5.76 5.76 0 0 1-3.35-10.45c-.47-.07-.95-.11-1.45-.11z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2.4a9.6 9.6 0 1 0 9.6 9.6c0-.5-.04-.98-.11-1.45a5.75 5.75 0 0 1-4.69 2.41 5.76 5.76 0 0 1-3.35-10.45c-.47-.07-.95-.11-1.45-.11z'/%3E%3C/svg%3E");
}

/* The font glyphs took their colour from Ace's `.ace-icon` rule; these are
   masked boxes, so they take it from `color` on the link instead. */
#navbar .ace-nav > li.oz-theme-toggle > a {
	color: rgba(255, 255, 255, .8);
}

#navbar .ace-nav > li.oz-theme-toggle > a:hover,
#navbar .ace-nav > li.oz-theme-toggle > a:focus {
	color: #fff;
}

/* ==========================================================================
   4. Sidebar - modelled on the Atlas sidebar
   (frontend/src/components/layout/sidebar.tsx)
   --------------------------------------------------------------------------
   Atlas's active item is a soft primary tint with primary text and no arrow
   decoration. Ace/skin-3 instead draws a pale blue fill plus a triangular
   notch poking into the content. Same soft-tint treatment applied here, in
   orange, with the notch retired.
   ========================================================================== */

#sidebar,
body.skin-3 #sidebar.sidebar {
	/* skin-3 ships #DBDBDB with an #A4C6DD border. */
	background-color: var(--oz-side-bg);
	border-color: var(--oz-line);
}

/* Ace extends the sidebar background downward with this pseudo-element. It
   inherits background-color, so the rule above already covers the fill; the
   border colour is restated for skins that set it directly. */
#sidebar:before {
	border-color: var(--oz-line);
}

/* -- Items -------------------------------------------------------------- */

#sidebar .nav-list > li {
	border-color: transparent;
}

#sidebar .nav-list > li > a {
	background-color: transparent;
	color: var(--oz-side-ink);
	font-size: 13px;
	font-weight: 500;
	/* Ace uses padding-left:7px and no right padding. Kept symmetrical rather
	   than indented, because Ace serves two different sidebar layouts off the
	   same markup - `.sidebar.compact` centres the icon above the label, while
	   `.sidebar.navbar-collapse.compact` (the class ace.min.js adds at wider
	   breakpoints) puts them inline and left-aligned. An asymmetric indent
	   would knock the centred variant off-centre; this reads correctly in both. */
	padding-left: 12px;
	padding-right: 12px;
	border-radius: var(--oz-radius-sm);
	transition: background-color .12s ease, color .12s ease;
}

#sidebar .nav-list > li > a > .menu-icon {
	color: var(--oz-ink-faint);
	transition: color .12s ease;
}

/* -- Hover -------------------------------------------------------------- */

/* skin-3 sets both of these with !important (#95bad2 borders, #FFF/#337dbb
   fill), so they have to be met in kind. */
#sidebar .nav-list > li:hover,
#sidebar .nav-list > li.open,
#sidebar .nav-list > li.open + li,
#sidebar .nav-list > li:hover + li {
	border-color: transparent !important;
}

#sidebar .nav-list > li:hover > a,
#sidebar .nav-list > li > a:focus,
#sidebar .nav-list > li.open > a,
#sidebar .nav-list > li.open:hover > a {
	background-color: var(--oz-side-hover);
	color: var(--oz-ink);
}

#sidebar .nav-list > li:hover > a > .menu-icon,
#sidebar .nav-list > li.open > a > .menu-icon {
	color: var(--oz-ink-muted);
}

/* -- Active ------------------------------------------------------------- */

#sidebar .nav-list > li.active > a,
#sidebar .nav-list > li.active.highlight > a,
#sidebar .nav-list > li.active:hover > a {
	background-color: var(--oz-orange-soft) !important;
	color: var(--oz-orange) !important;
	font-weight: 600;
}

#sidebar .nav-list > li.active > a > .menu-icon {
	color: var(--oz-orange) !important;
}

#sidebar .nav-list > li.active,
#sidebar .nav-list > li.active + li {
	border-color: transparent !important;
}

/* The 3px rail Ace parks at the left edge of the active item. Kept - it reads
   as a clear position marker - but recoloured from #4D96CB. */
#sidebar .nav-list > li.active:before {
	background-color: var(--oz-orange) !important;
	border-radius: 0 2px 2px 0;
}

#sidebar .nav-list > li:hover:before,
#sidebar .nav-list > li.open:before {
	background-color: var(--oz-line-hard) !important;
}

/* The triangular notch skin-3 pokes into the content area from the active
   item. Purely decorative, and the soft-tint active state reads better without
   it - this is the single biggest thing that dates the stock sidebar. */
#sidebar .nav-list li.active > a:after,
#sidebar .nav-list li.active > a:before {
	display: none !important;
}

/* -- Submenus ----------------------------------------------------------- */

#sidebar .nav-list > li > .submenu {
	background-color: var(--oz-surface-2);
	border-color: var(--oz-line);
}

#sidebar .nav-list > li > .submenu > li > a {
	color: var(--oz-ink-muted);
	font-size: 12.5px;
}

#sidebar .nav-list > li > .submenu > li > a:hover {
	color: var(--oz-ink);
	background-color: var(--oz-side-hover);
}

#sidebar .nav-list > li > .submenu > li.active > a {
	color: var(--oz-orange) !important;
}

/* -- Collapse control at the foot of the sidebar ------------------------- */

#sidebar #sidebar-btn.sidebar-toggle {
	background-color: var(--oz-surface-2);
	border-color: var(--oz-line);
}

#sidebar #sidebar-btn.sidebar-toggle > .ace-icon {
	color: var(--oz-ink-muted);
	border-color: var(--oz-line);
	background-color: transparent;
}

/* ==========================================================================
   5. Content chrome
   ========================================================================== */

/* -- Breadcrumbs -------------------------------------------------------- */

/* skin-3 gives this a pale blue (#E7F2F8) at (0,2,0), so the body prefix is
   what carries this past it rather than decoration. */
.breadcrumbs,
body.skin-3 .breadcrumbs {
	background-color: var(--oz-surface);
	border: 1px solid var(--oz-line);
	/* skin-3 already floats this as a rounded bar (border-radius:4px, margin:
	   8px 8px 0); only the radius is lifted to match the panels below it. */
	border-radius: var(--oz-radius);
}

.breadcrumb {
	color: var(--oz-ink-muted);
}

.breadcrumb > li > a {
	color: var(--oz-ink-muted);
}

.breadcrumb > li > a:hover {
	color: var(--oz-orange);
}

.breadcrumb > .active {
	color: var(--oz-ink);
	font-weight: 500;
}

/* The access level tag ("DEVELOPER", "MANAGER", ...) that layout_breadcrumbs()
   renders at layout_api.php:1092 as
   `<span class="label hidden-xs label-default arrowed">`. Ace turns that
   `arrowed` class into a small left-pointing triangle via a transparent border
   trick on :before (border-right-color:#ABBAC3) - a tooltip-style tail that
   dates the bar and points at nothing in particular.
   Scoped to #breadcrumbs rather than hiding `.label.arrowed:before` outright:
   only this one call site uses the bare `arrowed` class today, but the id keeps
   the rule from reaching any future use elsewhere. bugnote_view_inc.php uses
   `arrowed-in-right`, a different class, and is left alone. */
#breadcrumbs .label.arrowed:before,
#breadcrumbs .label.arrowed-right:after {
	display: none;
}

/* Reads as a tag now rather than a speech bubble. */
#breadcrumbs .label.label-default {
	background-color: var(--oz-surface-3);
	color: var(--oz-ink-muted);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .05em;
	padding: 3px 9px;
}

/* -- Panels (.widget-box) ----------------------------------------------- */

/* MantisBT wraps nearly every block of the UI in
   `.widget-box.widget-color-blue2`, whose Ace header is a solid #5090C1 bar.
   Neutralising that to a plain surface with a hairline is the change that does
   most of the modernising - it is the Atlas/portal card, essentially. */
.widget-box {
	background-color: var(--oz-surface);
	border: 1px solid var(--oz-line);
	border-radius: var(--oz-radius);
	box-shadow: var(--oz-shadow);
	/* Ace lets the header's square corners overhang the rounded box. */
	overflow: hidden;
}

.widget-box.widget-color-blue2,
.widget-box.widget-color-grey,
.widget-box.widget-color-red {
	border-color: var(--oz-line);
}

.widget-box > .widget-header,
.widget-box.widget-color-blue2 > .widget-header,
.widget-box.widget-color-grey > .widget-header,
.widget-box.widget-color-red > .widget-header {
	background: var(--oz-surface-2);
	border-color: var(--oz-line);
	color: var(--oz-ink);
	padding-left: 16px;
	padding-right: 16px;
}

.widget-box > .widget-header > .widget-title,
.widget-box > .widget-header .widget-title {
	color: var(--oz-ink);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .01em;
}

.widget-box > .widget-header .widget-toolbar > a,
.widget-box > .widget-header .widget-toolbar > a > .ace-icon {
	color: var(--oz-ink-muted);
}

.widget-box > .widget-header .widget-toolbar > a:hover,
.widget-box > .widget-header .widget-toolbar > a:hover > .ace-icon {
	color: var(--oz-orange);
}

.widget-body {
	background-color: var(--oz-surface);
	color: var(--oz-ink);
}

.widget-main {
	background-color: var(--oz-surface);
}

.widget-toolbox {
	background-color: var(--oz-surface-2);
	border-color: var(--oz-line) !important;  /* Ace: border-color with !important */
}

/* Red is the one widget colour worth keeping semantic - it flags destructive
   and error panels, so it keeps an accent rather than going neutral. */
.widget-box.widget-color-red > .widget-header {
	border-bottom-color: #d64545;
	box-shadow: inset 0 2px 0 0 #d64545;
}

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

/* ace-mantis.css line ~182 sets a bare `table { background-color:#ffffff
   !important }`. That is the single most important thing to neutralise for a
   dark theme - every issue list, filter panel and detail table in MantisBT is
   a <table>, and all of them would otherwise render as white slabs carrying
   light text. Matched in kind, on the same bare element selector. */
table {
	background-color: transparent !important;
}

.table {
	color: var(--oz-ink);
	background-color: transparent;
}

.table > thead > tr > th,
.table > tbody > tr > th {
	background-color: var(--oz-surface-2);
	border-color: var(--oz-line) !important;  /* Ace uses !important here */
	color: var(--oz-ink-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	vertical-align: middle;
}

.table > tbody > tr > td,
.table > tfoot > tr > td {
	border-color: var(--oz-line) !important;
	color: var(--oz-ink);
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th {
	border-color: var(--oz-line);
}

/* Same specificity as bootstrap's own striped/hover rules, so precedence
   against the dynamic .status-N-bg classes from css/status_config.php is
   exactly what it is on a stock install - nothing here reorders that. */
.table-striped > tbody > tr:nth-of-type(odd) {
	background-color: var(--oz-surface-2);
}

.table-hover > tbody > tr:hover {
	background-color: var(--oz-surface-3);
}

/* An issue list is almost entirely links - id, summary, category, reporter,
   handler. Painting every one of them accent-orange turns the table into a
   wall of orange and spends the brand colour on the least meaningful thing on
   the page. Table links take the body ink and earn the accent on hover, which
   is what Atlas does with its tables and what keeps orange meaning something.
   Scoped to table cells so prose links elsewhere stay accented. */
.table > tbody > tr > td a,
.table > tbody > tr > th a {
	color: var(--oz-ink);
}

.table > tbody > tr > td a:hover,
.table > tbody > tr > td a:focus,
.table > tbody > tr > th a:hover {
	color: var(--oz-orange);
	text-decoration: underline;
}

/* -- Cells that css/default.css paints light ---------------------------- */

/* css/default.css is MantisBT's $g_css_include_file - the first stylesheet on
   every page - and it hardcodes a handful of light fills, three of them with
   !important. Ace's table rules are not the problem here; these are.
   Symptom: the filter panel's label rows ("Reporter", "Assigned To", ...) and
   the bugnote bodies render as near-white bars in dark mode, and because the
   theme's ink is light, the text on them is illegible. Light mode looked fine,
   which is exactly why this hid for so long.
   Treatment follows the table headers above, which is Atlas's: a raised
   surface, body ink, no colour of its own. */

/* default.css:13 - `background-color:#edf3f4 !important; color:#000000` on
   every form and filter label cell. Note that BOTH halves must move together:
   our `.table > tbody > tr > td` colour rule is (0,1,3) and already
   out-specified their `color:#000` at (0,1,1), which is what turned the text
   light while the !important fill stayed light. */
td.category,
th.category,
td.category label,
th.category label {
	background-color: var(--oz-surface-2) !important;
	color: var(--oz-ink);
}

/* default.css:138 at (0,2,2) - a blue (#337ab7) label colour that only applies
   inside the filter table, so it needs matching specificity of its own. */
table.filters td.category,
table.filters th.category,
table.filters td.category label {
	color: var(--oz-ink);
}

/* default.css:21 - `border: 1px solid #fff` on every .small-caption cell. This
   is what draws the bright white grid across the filter panel in dark mode. */
.small-caption {
	border-color: var(--oz-line);
}

/* default.css:25 - 5px-tall pure white spacer rows between filter blocks.
   The `color:#000000` it also sets is invisible today because the row is empty
   by design, but it is reset too so anything that ever lands in one is not
   black-on-dark. */
tr.spacer {
	background-color: transparent !important;
	color: inherit;
}

/* default.css:56 - the body of every bugnote on every issue page (#e8e8e8). */
tr.bugnote .bugnote-note,
.bugnote-note {
	background-color: var(--oz-surface);
	color: var(--oz-ink);
}

/* default.css:58 - private bugnotes get a cream fill (#fcf8e3) to mark them.
   Kept as a signal rather than flattened, but re-expressed as a translucent
   amber that reads correctly over either a light or a dark surface. */
.bugnote-private {
	background-color: rgba(239, 154, 44, .12) !important;
}

/* -- Status colours ----------------------------------------------------- */

/* css/status_config.php generates `.status-<N>-bg { background-color: <pastel> }`
   from $g_status_colors. Those pastels are light in both themes, so in dark
   mode the inherited light body text would sit on a light fill. Attribute
   selectors rather than an enumerated list because statuses are configurable -
   a custom status is covered without touching this file. */
[data-ozone-theme="dark"] [class*="status-"][class*="-bg"],
[data-ozone-theme="dark"] [class*="status-"][class*="-bg"] a {
	color: var(--oz-on-status);
}

/* The small status square in the issue list (.fa-status-box, coloured by
   .status-<N>-fg). Given a little definition so the pastels do not dissolve
   into a light row or a dark one. */
.fa-status-box {
	border-radius: 3px;
	text-shadow: 0 0 1px rgba(0, 0, 0, .28);
}

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

.btn {
	/* Ace: border-radius:0. Rounded to the Atlas scale. */
	border-radius: var(--oz-radius-sm);
	font-weight: 500;
	letter-spacing: .01em;
}

/* Ace sets `.btn.btn-round{border-radius:4px!important}`, and btn-round is on
   most MantisBT buttons. */
.btn.btn-round {
	border-radius: var(--oz-radius-sm) !important;
}

/* Ace gives .btn a 5px border in the button's own colour rather than padding,
   so border-color has to move with background-color or the button grows a ring.
   .btn-inverse is included because it sets `background-color:#555!important`
   and MantisBT pairs it with btn-primary (and the Auth0Login plugin's sign-in
   button does too), which would otherwise be a grey button in an orange ring. */
.btn.btn-primary,
.btn.btn-primary.btn-inverse {
	background-color: var(--oz-orange) !important;
	border-color: var(--oz-orange);
	color: #fff !important;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary.btn-inverse:hover,
.btn.btn-primary.btn-inverse:focus,
.btn.btn-primary.btn-inverse:active,
.open > .btn.btn-primary.dropdown-toggle {
	background-color: var(--oz-orange-lo) !important;
	border-color: var(--oz-orange-lo);
	color: #fff !important;
}

/* MantisBT's most common button is `btn btn-primary btn-white btn-round`,
   which in Ace means a white button with the primary colour as its text and
   border. Ace ships that pair as `.btn-white.btn-primary{border-color:#8aafce;
   color:#6688a6!important}` - the !important is why this one is matched. */
.btn.btn-white,
.btn.btn-white.no-hover:active,
.btn.btn-white.no-hover:hover {
	background-color: var(--oz-surface) !important;
	color: var(--oz-ink) !important;
	border-color: var(--oz-line-hard);
}

.btn.btn-white:hover,
.btn.btn-white:focus {
	background-color: var(--oz-surface-3) !important;
	color: var(--oz-ink) !important;
}

.btn.btn-white.btn-primary {
	color: var(--oz-orange) !important;
	border-color: var(--oz-orange-edge);
}

.btn.btn-white.btn-primary:hover,
.btn.btn-white.btn-primary:focus,
.btn.btn-white.btn-primary:active,
.open > .btn.btn-white.btn-primary.dropdown-toggle {
	background-color: var(--oz-orange-soft) !important;
	border-color: var(--oz-orange);
	color: var(--oz-orange) !important;
}

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

.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="date"],
textarea,
select,
select.input-sm,
.input-group-addon {
	background-color: var(--oz-input-bg);
	border-color: var(--oz-line-hard);
	color: var(--oz-ink);
	border-radius: var(--oz-radius-sm);
}

.form-control:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
	/* Ace re-declares `background-color:#FFF` on its own :focus rules at the
	   same specificity as these. Restating it is required, not redundant -
	   without it a focused field flashes white on a dark form, which is most
	   visible on the login page where the username field is autofocused. */
	background-color: var(--oz-input-bg);
	border-color: var(--oz-orange);
	box-shadow: 0 0 0 3px var(--oz-input-focus);
	color: var(--oz-ink);
}

.form-control::placeholder {
	color: var(--oz-ink-faint);
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
	background-color: var(--oz-surface-3);
	color: var(--oz-ink-muted);
}

/* ace-mantis.css forces both of these with !important (#eee and #fff), so they
   would stay light in dark mode: a disabled select on a filter panel, and the
   typeahead ghost text on the project and user pickers. */
select[disabled] {
	background-color: var(--oz-surface-3) !important;
	color: var(--oz-ink-faint) !important;
}

input.tt-hint,
.form-group input.tt-hint {
	background-color: transparent !important;
	color: var(--oz-ink-faint) !important;
}

label,
.control-label {
	color: var(--oz-ink-muted);
	font-weight: 500;
}

.input-group-addon {
	background-color: var(--oz-surface-2);
	color: var(--oz-ink-muted);
}

/* Ace styles its own checkbox/radio replacements against a light page. */
.lbl:before {
	background-color: var(--oz-input-bg) !important;  /* Ace uses !important */
	border-color: var(--oz-line-hard) !important;
}

input[type="checkbox"].ace:checked + .lbl:before,
input[type="radio"].ace:checked + .lbl:before {
	border-color: var(--oz-orange) !important;
	background-color: var(--oz-orange) !important;
	color: #fff !important;
}

/* -- Dropdowns and popovers -------------------------------------------- */

.dropdown-menu {
	background-color: var(--oz-surface);
	border: 1px solid var(--oz-line);
	border-radius: var(--oz-radius);
	box-shadow: var(--oz-shadow-lg);
	padding: 4px;
}

.dropdown-menu > li > a {
	color: var(--oz-ink);
	border-radius: var(--oz-radius-sm);
	padding: 6px 10px;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
	background-color: var(--oz-surface-3);
	color: var(--oz-ink);
}

/* Ace's dropdown-yellow/-blue variants recolour every row; MantisBT uses
   dropdown-yellow for the user and project menus. */
.dropdown-menu.dropdown-yellow > li > a:hover,
.dropdown-menu.dropdown-yellow > li > a:focus,
.dropdown-menu.dropdown-blue > li > a:hover,
.dropdown-menu.dropdown-blue > li > a:focus {
	background-color: var(--oz-orange-soft);
	color: var(--oz-orange);
}

.dropdown-menu > li.divider,
.dropdown-menu .divider {
	background-color: var(--oz-line);
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover {
	background-color: var(--oz-orange-soft);
	color: var(--oz-orange);
}

/* -- Labels, badges, alerts -------------------------------------------- */

.label,
.badge {
	border-radius: var(--oz-pill);
	font-weight: 600;
	letter-spacing: .01em;
}

.badge {
	background-color: var(--oz-surface-3);
	color: var(--oz-ink-muted);
}

/* Ace declares `.label-primary,.label.label-primary{background-color:#428BCA}`,
   so the doubled class is needed to match it. */
.label.label-primary,
.badge.badge-primary,
.label-primary,
.badge-primary {
	background-color: var(--oz-orange);
	color: #fff;
}

.alert {
	border-radius: var(--oz-radius);
	border-width: 1px;
	box-shadow: none;
}

/* Bootstrap's alerts are pale pastels with dark text - correct on a light page,
   but a bright slab on a dark one. Re-tinted rather than recoloured, so each
   alert keeps its meaning (info / success / warning / danger) and only its
   luminance changes. Light mode keeps bootstrap's own colours. */
[data-ozone-theme="dark"] .alert-info {
	background-color: rgba(59, 130, 246, .12);
	border-color: rgba(59, 130, 246, .3);
	color: #a9ccff;
}

[data-ozone-theme="dark"] .alert-success {
	background-color: rgba(108, 232, 207, .12);
	border-color: rgba(108, 232, 207, .28);
	color: #8ee9d3;
}

[data-ozone-theme="dark"] .alert-warning {
	background-color: rgba(239, 154, 44, .13);
	border-color: rgba(239, 154, 44, .32);
	color: #f0c078;
}

[data-ozone-theme="dark"] .alert-danger {
	background-color: rgba(214, 69, 69, .14);
	border-color: rgba(214, 69, 69, .34);
	color: #f3a3a3;
}

/* Alert bodies carry <strong> labels and links. In both themes those links
   should read as part of the alert rather than as brand-orange text inside a
   green or red box, so they take the alert's own colour and earn their
   affordance from the underline instead. */
.alert strong,
.alert b,
.alert a {
	color: inherit;
}

.alert a {
	text-decoration: underline;
}

/* -- Tabs and pagination ----------------------------------------------- */

.nav-tabs {
	border-bottom-color: var(--oz-line);
}

.nav-tabs > li > a {
	color: var(--oz-ink-muted);
	background-color: transparent;
	border-color: transparent;
	border-radius: var(--oz-radius-sm) var(--oz-radius-sm) 0 0;
}

.nav-tabs > li > a:hover {
	color: var(--oz-ink);
	background-color: var(--oz-surface-2);
	border-color: transparent;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
	background-color: var(--oz-surface);
	border-color: var(--oz-line);
	border-bottom-color: transparent;
	color: var(--oz-orange);
	font-weight: 600;
}

.pagination > li > a,
.pagination > li > span {
	background-color: var(--oz-surface);
	border-color: var(--oz-line);
	color: var(--oz-ink-muted);
}

.pagination > li > a:hover {
	background-color: var(--oz-surface-3);
	color: var(--oz-ink);
}

/* Ace's is `.pagination>li.active>a` at (0,2,2) - the `li` is what makes this
   selector match it rather than lose by one element. */
.pagination > li.active > a,
.pagination > li.active > span,
.pagination > li.active > a:hover,
.pagination > li.active > a:focus {
	background-color: var(--oz-orange);
	border-color: var(--oz-orange);
	color: #fff;
	text-shadow: none;
}

/* -- Modals, wells, popovers ------------------------------------------- */

.modal-content {
	background-color: var(--oz-surface);
	border: 1px solid var(--oz-line);
	border-radius: var(--oz-radius);
	box-shadow: var(--oz-shadow-lg);
	color: var(--oz-ink);
}

.modal-header,
.modal-footer {
	border-color: var(--oz-line);
}

.well,
blockquote {
	background-color: var(--oz-surface-2);
	border-color: var(--oz-line);
	border-radius: var(--oz-radius);
	color: var(--oz-ink);
}

pre {
	background-color: var(--oz-surface-2);
	border-color: var(--oz-line);
	border-radius: var(--oz-radius-sm);
	color: var(--oz-ink);
}

/* -- Footer ------------------------------------------------------------- */

.footer .footer-inner .footer-content {
	background-color: transparent;
	border-top: 1px solid var(--oz-line);
	color: var(--oz-ink-faint);
	font-size: 11.5px;
}

.footer .footer-inner .footer-content a {
	color: var(--oz-ink-muted);
}

.footer .footer-inner .footer-content a:hover {
	color: var(--oz-orange);
}

/* Ace's back-to-top button. */
#btn-scroll-up.btn-scroll-up {
	background-color: var(--oz-orange) !important;  /* Ace uses !important */
	border-radius: var(--oz-radius-sm);
}

/* ==========================================================================
   6. Login / signup / register - modelled on the Atlas login card
   (frontend/src/pages/auth/login.tsx)
   --------------------------------------------------------------------------
   Atlas centres a ~380px card under a brand block, on a plain ground with a
   very faint brand-tinted wash. Same shape here, over MantisBT's existing
   .login-container / #login-box markup - no PHP touched.
   ========================================================================== */

/* ace-mantis.css line ~213 does `.light-login { background: ... #ffffff
   !important }`, so specificity alone loses here no matter how it is written -
   every longhand below has to carry !important to get through. */
body.login-layout,
body.login-layout.light-login {
	background-color: var(--oz-bg) !important;
	/* The two-corner wash from ozone3d.com's rebrand, dialled well down - at
	   this opacity it reads as depth rather than decoration. `fixed` so it
	   covers the viewport even though MantisBT leaves the login body shorter
	   than the window. */
	background-image:
		radial-gradient(60rem 30rem at 12% -8%, rgba(239, 85, 44, .10), transparent 60%),
		radial-gradient(55rem 28rem at 92% -4%, rgba(59, 130, 246, .08), transparent 60%) !important;
	background-repeat: no-repeat !important;
	background-attachment: fixed !important;
	min-height: 100vh;
}

body.login-layout .login-container {
	/* MantisBT already centres this in a col-md-6; narrowing to the Atlas card
	   width stops the form stretching on a wide screen. */
	max-width: 400px;
	margin: 0 auto;
	padding-top: 4vh;
}

/* -- Brand block -------------------------------------------------------- */

body.login-layout .login-logo {
	text-align: center;
	margin-bottom: 4px;
}

/* layout_login_page_logo() renders <img src="{$g_logo_image}">, the stock
   MantisBT mark. Swapped for the Ozone logo as a background so that neither
   the PHP nor the logo_image config has to change - and so an upgrade that
   rewrites either leaves this intact. */
body.login-layout .login-logo img {
	display: none;
}

body.login-logo-fallback .login-logo img {
	/* Escape hatch: add this class to <body> to get the configured logo_image
	   back without editing this file. */
	display: inline-block;
}

body.login-layout .login-logo:before {
	content: '';
	display: inline-block;
	width: 168px;
	height: 36px;
	background: url('plugin_file.php?file=OzoneTheme/logo-ozone-reversed.svg') no-repeat center center;
	background-size: contain;
	/* The asset is the reversed (white) wordmark, which would vanish on the
	   light login ground. Inverting to near-black keeps one asset serving both
	   the dark navbar and the light login page. */
	filter: invert(1) hue-rotate(180deg);
}

/* In dark mode the wordmark is already the right way round. */
[data-ozone-theme="dark"] body.login-layout .login-logo:before {
	filter: none;
}

/* -- The card ----------------------------------------------------------- */

body.login-layout #login-box.widget-box,
body.login-layout .signup-box.widget-box,
body.login-layout .forgot-box.widget-box {
	background-color: var(--oz-surface);
	border: 1px solid var(--oz-line);
	border-radius: var(--oz-radius);
	box-shadow: var(--oz-shadow-lg);
}

/* Ace's `.login-layout .widget-box .widget-main{padding:16px;background:#F7F7F7}`
   is (0,3,0); the .widget-box in the middle is what lifts this to (0,3,1) so it
   wins. Dropping it made the card interior stay light grey in dark mode - the
   card border themed correctly while its inside did not. */
body.login-layout .widget-box .widget-main {
	padding: 26px 24px 24px;
	background: transparent;
}

body.login-layout .widget-box .widget-body {
	background-color: transparent;
}

/* ace-mantis.css paints this #393939 for the stock dark login. */
body.login-layout .signup-box .toolbar,
body.login-layout .widget-box .toolbar {
	background: transparent;
	border-top-color: var(--oz-line);
}

body.login-layout .widget-main h4.header {
	color: var(--oz-ink);
	border-bottom: 0;
	margin: 0 0 2px;
	text-align: center;
	/* Both default to leaving MantisBT's own heading exactly as it is. They are
	   only overridden - by the inline <style> in OzoneTheme.php - on
	   login_page.php, so signup and lost-password keep their real headings even
	   though they reuse this identical markup and id. See the :after below. */
	font-size: var(--oz-login-orig-size, 15px);
	font-weight: 600;
	visibility: var(--oz-login-orig-vis, visible);
}

/* Replacement heading, e.g. "Mantis Bug Tracking" for MantisBT's "Login".
   Done as generated content because the shipped text is a bare text node with
   no element around it, so there is nothing to select and restyle - and
   because CSS cannot reach the lang string that produced it. `content`
   resolves to `none` unless the plugin set the property, in which case no box
   is generated and this rule costs nothing.
   visibility is restated because the rule above hides the h4 (and therefore
   its text) from both the layout and the accessibility tree; a pseudo-element
   can opt back in, which is what keeps a screen reader from reading the old
   heading and the new one one after the other. */
body.login-layout .widget-main h4.header:after {
	content: var(--oz-login-title, none);
	visibility: visible;
	font-size: 15px;
	font-weight: 600;
	color: var(--oz-ink);
}

body.login-layout .widget-main h4.header > .ace-icon {
	display: none;  /* the card's purpose is already its heading */
}

body.login-layout .form-control {
	height: 40px;
}

/* MantisBT's sign-in button is `btn btn-success btn-inverse` - green. Scoped to
   the login layout so btn-success keeps meaning "success" everywhere else. */
body.login-layout .btn.btn-success,
body.login-layout .btn.btn-success:focus {
	background-color: var(--oz-orange) !important;  /* Ace uses !important */
	border-color: var(--oz-orange);
	color: #fff !important;
	border-radius: var(--oz-radius-sm);
	height: 40px;
}

body.login-layout .btn.btn-success:hover,
body.login-layout .btn.btn-success:active {
	background-color: var(--oz-orange-lo) !important;
	border-color: var(--oz-orange-lo);
}

/* Atlas's sign-in card ends in one full-width action. MantisBT floats a
   40%-wide button to the right of a full-width field, which reads as
   unfinished. Width and float only - markup and behaviour untouched. The
   !important pair answers Ace's `.width-40{width:40%!important}` and
   bootstrap's `.pull-right{float:right!important}`. */
body.login-layout .btn.btn-success,
body.login-layout input[type="submit"].btn {
	width: 100% !important;
	float: none !important;
	margin-top: 2px;
}

/* Ace's .hr-double draws two stacked rules; one hairline is enough. */
body.login-layout .hr,
body.login-layout .hr-double {
	border-top: 1px solid var(--oz-line);
	border-bottom: 0;
	background: none;
}

/* The local sign-in button and the Auth0Login plugin's "Sign in with Ozone
   Portal" link are styled identically and deliberately so: both are
   `btn-success`/`btn-primary` + `btn-inverse`, and the rules above plus the
   .btn.btn-primary block in section 5 land them on the same solid orange fill,
   radius and height. Nothing here distinguishes them.
   (An earlier revision demoted the local button to an outline variant so the
   two would not read as equals. Removed - matching them is the ask.) */

/* css/login.css wraps every link in literal [square brackets] via :before and
   :after content. Retiring them is the single cheapest tidy-up on this page. */
body.login-layout #login-links li:before,
body.login-layout #login-links li:after,
body.login-layout #captcha-refresh li:before,
body.login-layout #captcha-refresh li:after {
	content: '';
	display: none;
}

body.login-layout #login-links li a {
	color: var(--oz-ink-muted);
	font-size: 12.5px;
}

body.login-layout #login-links li a:hover {
	color: var(--oz-orange);
}

/* ==========================================================================
   7. Print and reduced motion
   ========================================================================== */

@media print {
	/* Printed issue reports should be ink-on-paper regardless of theme. */
	body,
	body.skin-3,
	.page-content,
	.main-content,
	.widget-box,
	.widget-body,
	.widget-main {
		background: #fff !important;
		color: #000 !important;
		box-shadow: none !important;
	}

	.widget-box {
		border-color: #ccc !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* The only transitions this file adds are colour fades on nav items and
	   buttons; drop them rather than leave them for the OS to fight. */
	#sidebar .nav-list > li > a,
	#sidebar .nav-list > li > a > .menu-icon,
	#navbar .ace-nav > li > a {
		transition: none;
	}
}