/*
 * ClientBridge — look "Open A": the mockup's direction A as it was (operator, 2026-10-09: "make also another theme,
 * same as your example A - Open"), with the menu's line icons. One file of its own: Open 2's rules, then what
 * differs, at the end (operator: "just duplicate and change the duplicate... so we have different variations").
 *
 * One stylesheet over MantisBT's own pages, loaded only where the project's look is Open (core/looks.php). Nothing
 * on the pages changes but how they look: same markup, same scripts, same speed. Selectors are MantisBT's (Ace 1.4,
 * skin-3); `body.skin-3` wins over the skin's own rules, which come first.
 *
 * Font: chosen with the look (core/fonts.php, all SIL Open Font License 1.1, served from this plugin); its @font-face
 * and --o-font come inline with the stylesheet (core/looks.php client_bridge_look_tag()), Figtree unless chosen.
 */

:root {
	--o-font: "Figtree", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
	--o-bg: #f4f6f9;
	--o-surface: #ffffff;
	--o-ink: #1a2433;
	--o-muted: #5b6778;
	--o-line: #e5e9ef;
	--o-line-strong: #d3d9e2;
	--o-accent: #2563c9;
	--o-accent-hover: #1d4fa3;
	--o-accent-soft: #e9f0fc;
	--o-brand: #f39200;
	--o-zebra: #f8fafc;
	--o-radius: 12px;
	--o-radius-sm: 8px;
	--o-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .06);
	--o-focus: 0 0 0 3px rgba(37, 99, 201, .25);
}

/* ---------- ground and type ---------- */
body.skin-3,
body.skin-3 .main-container,
body.skin-3 .main-content,
body.skin-3 .page-content {
	background-color: var(--o-bg);
}
body.skin-3 {
	font-family: var(--o-font);
	font-size: 14px;
	color: var(--o-ink);
	-webkit-font-smoothing: antialiased;
}
body.skin-3 h1, body.skin-3 h2, body.skin-3 h3, body.skin-3 h4, body.skin-3 h5,
body.skin-3 .widget-title, body.skin-3 .btn, body.skin-3 input, body.skin-3 select, body.skin-3 textarea, body.skin-3 table {
	font-family: var(--o-font);
}
body.skin-3 a { color: var(--o-accent); }
body.skin-3 a:hover { color: var(--o-accent-hover); }
body.skin-3 .main-container::before { background-color: var(--o-bg); }

/* ---------- top bar: white, quiet ---------- */
body.skin-3 .navbar,
body.skin-3 .navbar .navbar-header,
body.skin-3 .navbar .navbar-collapse,
body.skin-3 .navbar .navbar-container,
body.skin-3 .navbar.navbar-collapse .navbar-container {
	background: var(--o-surface) !important;
	box-shadow: none;
}
body.skin-3 .navbar {
	border-bottom: 1px solid var(--o-line);
	min-height: 52px;
}
body.skin-3 .navbar .navbar-brand,
body.skin-3 .navbar .navbar-brand small { color: var(--o-ink); }
body.skin-3 .ace-nav > li { border-left: 0; }
body.skin-3 .ace-nav > li > a,
body.skin-3 .ace-nav > li.grey > a,
body.skin-3 .ace-nav > li.light-blue > a {
	background-color: transparent !important;
	color: var(--o-ink) !important;
	border-radius: var(--o-radius-sm);
}
body.skin-3 .ace-nav > li > a:hover,
body.skin-3 .ace-nav > li.open > a { background-color: var(--o-accent-soft) !important; }
body.skin-3 .ace-nav > li > a .ace-icon,
body.skin-3 .ace-nav > li > a > .fa { color: var(--o-muted) !important; }
body.skin-3 .navbar .btn-group > .btn.btn-primary,
body.skin-3 .navbar .btn.btn-primary,
body.skin-3 .navbar .btn.btn-primary:focus {
	background-color: var(--o-accent) !important;
	border-color: var(--o-accent) !important;
	color: #fff !important;
	border-radius: var(--o-radius-sm) !important;
	margin: 0 2px;
	text-shadow: none;
}
/* Report Ticket: the brand's orange, the one warm colour on the page (by its address: on its own page it is not shown). */
body.skin-3 .navbar .btn.btn-primary[href$="bug_report_page.php"] {
	background-color: var(--o-brand) !important;
	border-color: var(--o-brand) !important;
}
body.skin-3 .navbar .btn.btn-primary:hover { filter: brightness(.94); }
body.skin-3 .navbar .navbar-toggle { background-color: var(--o-accent); }
body.skin-3 .navbar .nav-search .nav-search-input,
body.skin-3 .navbar input[type="text"] {
	border: 1px solid var(--o-line-strong) !important;
	border-radius: var(--o-radius-sm) !important;
	background: var(--o-bg) !important;
	color: var(--o-ink) !important;
}

/* ---------- side menu: white, the page as a soft pill ---------- */
body.skin-3 .sidebar,
body.skin-3 .sidebar::before {
	background-color: var(--o-surface);
	border-color: var(--o-line);
}
body.skin-3 .nav-list { padding: 8px 8px 0; }
body.skin-3 .nav-list > li,
body.skin-3 .nav-list > li.active,
body.skin-3 .nav-list > li.active + li,
body.skin-3 .nav-list > li:hover,
body.skin-3 .nav-list > li.open {
	border: 0 !important;
	margin-bottom: 2px;
}
body.skin-3 .nav-list > li::before,
body.skin-3 .nav-list > li.active::before,
body.skin-3 .nav-list li.active > a::before,
body.skin-3 .nav-list li.active > a::after { display: none !important; }
body.skin-3 .nav-list > li > a {
	background-color: transparent;
	color: #4a5566;
	border-radius: var(--o-radius-sm);
	font-weight: 500;
}
body.skin-3 .nav-list > li > a:hover,
body.skin-3 .nav-list > li:hover > a { background-color: var(--o-bg); color: var(--o-ink); }
body.skin-3 .nav-list > li.active > a,
body.skin-3 .nav-list > li.active.highlight > a {
	background-color: var(--o-accent-soft) !important;
	color: var(--o-accent-hover) !important;
	font-weight: 600;
}
body.skin-3 .nav-list > li > a > .menu-icon { color: inherit; }
body.skin-3 .sidebar-toggle,
body.skin-3 .sidebar .sidebar-toggle { background-color: var(--o-surface); border-color: var(--o-line); }
body.skin-3 .sidebar-toggle > .ace-icon { background-color: var(--o-surface); border-color: var(--o-line-strong); color: var(--o-muted); }

/* ---------- side menu icons: thin line icons, as in the mockup (operator, 2026-10-09: "i like the menu with
   different icons"). MantisBT's Font Awesome glyph is replaced by a mask in the text colour, matched by its icon class;
   an icon not listed keeps MantisBT's own. ---------- */
body.skin-3 .nav-list > li > a > .menu-icon.fa { display: flex; align-items: center; justify-content: center; }
/* The narrow menu (MantisBT's "compact"): the icon above its name, as MantisBT has it. */
body.skin-3 .sidebar.compact .nav-list > li > a > .menu-icon.fa { margin: 0 auto; }
body.skin-3 .nav-list > li > a > .menu-icon.fa-dashboard::before { /* My Work */
	content: ""; display: inline-block; width: 22px; height: 22px; background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%223%22 width=%227%22 height=%229%22 rx=%221.5%22/%3E%3Crect x=%2214%22 y=%223%22 width=%227%22 height=%225%22 rx=%221.5%22/%3E%3Crect x=%2214%22 y=%2212%22 width=%227%22 height=%229%22 rx=%221.5%22/%3E%3Crect x=%223%22 y=%2216%22 width=%227%22 height=%225%22 rx=%221.5%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%223%22 width=%227%22 height=%229%22 rx=%221.5%22/%3E%3Crect x=%2214%22 y=%223%22 width=%227%22 height=%225%22 rx=%221.5%22/%3E%3Crect x=%2214%22 y=%2212%22 width=%227%22 height=%229%22 rx=%221.5%22/%3E%3Crect x=%223%22 y=%2216%22 width=%227%22 height=%225%22 rx=%221.5%22/%3E%3C/svg%3E") center / contain no-repeat;
}
body.skin-3 .nav-list > li > a > .menu-icon.fa-list-alt::before { /* Tickets */
	content: ""; display: inline-block; width: 22px; height: 22px; background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M8 6h13M8 12h13M8 18h13%22/%3E%3Ccircle cx=%223.5%22 cy=%226%22 r=%221%22/%3E%3Ccircle cx=%223.5%22 cy=%2212%22 r=%221%22/%3E%3Ccircle cx=%223.5%22 cy=%2218%22 r=%221%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M8 6h13M8 12h13M8 18h13%22/%3E%3Ccircle cx=%223.5%22 cy=%226%22 r=%221%22/%3E%3Ccircle cx=%223.5%22 cy=%2212%22 r=%221%22/%3E%3Ccircle cx=%223.5%22 cy=%2218%22 r=%221%22/%3E%3C/svg%3E") center / contain no-repeat;
}
body.skin-3 .nav-list > li > a > .menu-icon.fa-edit::before { /* Report Ticket */
	content: ""; display: inline-block; width: 22px; height: 22px; background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7%22/%3E%3Cpath d=%22M18.4 2.6a2 2 0 0 1 3 3L12 15l-4 1 1-4z%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7%22/%3E%3Cpath d=%22M18.4 2.6a2 2 0 0 1 3 3L12 15l-4 1 1-4z%22/%3E%3C/svg%3E") center / contain no-repeat;
}
body.skin-3 .nav-list > li > a > .menu-icon.fa-retweet::before { /* Completion Log */
	content: ""; display: inline-block; width: 22px; height: 22px; background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m3 7 2 2 4-4M3 17l2 2 4-4M13 6h8M13 12h8M13 18h8%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m3 7 2 2 4-4M3 17l2 2 4-4M13 6h8M13 12h8M13 18h8%22/%3E%3C/svg%3E") center / contain no-repeat;
}
body.skin-3 .nav-list > li > a > .menu-icon.fa-road::before { /* Delivery Plan */
	content: ""; display: inline-block; width: 22px; height: 22px; background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 22V4%22/%3E%3Cpath d=%22M4 4h12l-2.5 4L16 12H4%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 22V4%22/%3E%3Cpath d=%22M4 4h12l-2.5 4L16 12H4%22/%3E%3C/svg%3E") center / contain no-repeat;
}
body.skin-3 .nav-list > li > a > .menu-icon.fa-bar-chart-o::before { /* Summary */
	content: ""; display: inline-block; width: 22px; height: 22px; background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 3v18h18%22/%3E%3Cpath d=%22M8 17v-5M13 17V8M18 17v-9%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 3v18h18%22/%3E%3Cpath d=%22M8 17v-5M13 17V8M18 17v-9%22/%3E%3C/svg%3E") center / contain no-repeat;
}
body.skin-3 .nav-list > li > a > .menu-icon.fa-bar-chart::before { /* Summary */
	content: ""; display: inline-block; width: 22px; height: 22px; background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 3v18h18%22/%3E%3Cpath d=%22M8 17v-5M13 17V8M18 17v-9%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 3v18h18%22/%3E%3Cpath d=%22M8 17v-5M13 17V8M18 17v-9%22/%3E%3C/svg%3E") center / contain no-repeat;
}
body.skin-3 .nav-list > li > a > .menu-icon.fa-book::before { /* Documents */
	content: ""; display: inline-block; width: 22px; height: 22px; background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z%22/%3E%3Cpath d=%22M14 2v6h6M8 13h8M8 17h6%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z%22/%3E%3Cpath d=%22M14 2v6h6M8 13h8M8 17h6%22/%3E%3C/svg%3E") center / contain no-repeat;
}
body.skin-3 .nav-list > li > a > .menu-icon.fa-gears::before { /* Manage */
	content: ""; display: inline-block; width: 22px; height: 22px; background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6%22/%3E%3C/svg%3E") center / contain no-repeat;
}
body.skin-3 .nav-list > li > a > .menu-icon.fa-cogs::before { /* Manage */
	content: ""; display: inline-block; width: 22px; height: 22px; background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6%22/%3E%3C/svg%3E") center / contain no-repeat;
}
body.skin-3 .nav-list > li > a > .menu-icon.fa-tachometer::before { /* AI dashboard */
	content: ""; display: inline-block; width: 22px; height: 22px; background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z%22/%3E%3Cpath d=%22M19 3v4M17 5h4%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z%22/%3E%3Cpath d=%22M19 3v4M17 5h4%22/%3E%3C/svg%3E") center / contain no-repeat;
}
body.skin-3 .nav-list > li > a > .menu-icon.fa-line-chart::before { /* MantisStats */
	content: ""; display: inline-block; width: 22px; height: 22px; background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M22 7l-8.5 8.5-5-5L2 17%22/%3E%3Cpath d=%22M16 7h6v6%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M22 7l-8.5 8.5-5-5L2 17%22/%3E%3Cpath d=%22M16 7h6v6%22/%3E%3C/svg%3E") center / contain no-repeat;
}
body.skin-3 .nav-list > li > a > .menu-icon.fa-external-link::before { /* Open the app */
	content: ""; display: inline-block; width: 22px; height: 22px; background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6%22/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- the strip under the bar ---------- */
body.skin-3 .breadcrumbs {
	background-color: transparent;
	border-bottom: 0;
	min-height: 44px;
	padding-top: 4px;
}
body.skin-3 .breadcrumb > li > a { color: var(--o-ink); font-weight: 600; }
body.skin-3 .breadcrumbs .label.arrowed {
	background-color: var(--o-accent-soft);
	color: var(--o-accent);
	border-radius: 99px;
	font-weight: 600;
	margin-left: 4px;
}
body.skin-3 .breadcrumbs .label.arrowed::before { display: none; }
/* MantisBT places "Recently Visited" 150px from the right, beside its 120px search box; the wider box here would cover
   its start (operator, 2026-10-09: "i dont see all tickets"). */
body.skin-3 .nav-recent { color: var(--o-muted); right: 214px; }
body.skin-3 .nav-search .nav-search-input {
	border-radius: var(--o-radius-sm) !important;
	border-color: var(--o-line-strong);
	background: var(--o-surface);
	width: 170px;
}

/* ---------- boxes → white cards ---------- */
body.skin-3 .page-content { padding: 6px 22px 28px; }
body.skin-3 .widget-box,
body.skin-3 .widget-box.widget-color-blue2 {
	border: 1px solid #edf0f4;
	border-radius: var(--o-radius);
	box-shadow: var(--o-shadow);
	background: var(--o-surface);
	overflow: hidden;
	margin: 6px 0 22px;
}
body.skin-3 .widget-box > .widget-header,
body.skin-3 .widget-color-blue2 > .widget-header {
	background: var(--o-surface);
	color: var(--o-ink);
	border: 0;
	border-bottom: 1px solid var(--o-line);
	min-height: 48px;
	padding-left: 18px;
}
body.skin-3 .widget-header > .widget-title {
	font-size: 16px;
	font-weight: 650;
	line-height: 48px;
	color: var(--o-ink);
	letter-spacing: -.005em;
}
body.skin-3 .widget-header > .widget-title > .ace-icon { color: var(--o-accent); margin-right: 6px; }
body.skin-3 .widget-header .badge,
body.skin-3 .widget-title .badge {
	background-color: var(--o-bg);
	color: var(--o-muted);
	font-weight: 500;
	border-radius: 99px;
}
body.skin-3 .widget-toolbar > a,
body.skin-3 .widget-toolbar > .widget-menu > a { color: var(--o-muted); }
body.skin-3 .widget-toolbar::before { border: 0; }
body.skin-3 .widget-body { background: var(--o-surface); border: 0; }
body.skin-3 .widget-toolbox,
body.skin-3 .widget-toolbox.padding-8 {
	background: var(--o-surface);
	border-color: var(--o-line);
	padding: 10px 14px;
}
body.skin-3 .widget-toolbox.toolbox-vertical { background: var(--o-zebra); }

/* ---------- tables ---------- */
body.skin-3 .table,
body.skin-3 .table-bordered { border: 0; }
body.skin-3 .table > thead > tr > th,
body.skin-3 .table > tbody > tr > th,
body.skin-3 .table > tr > th,
body.skin-3 .table > thead > tr > td,
body.skin-3 .table > tbody > tr > td,
body.skin-3 .table-bordered > thead > tr > th,
body.skin-3 .table-bordered > tbody > tr > td,
body.skin-3 .table-bordered > tbody > tr > th {
	border-color: var(--o-line);
	border-left: 0;
	border-right: 0;
	vertical-align: middle;
}
body.skin-3 .table > thead > tr,
body.skin-3 .table > thead > tr > th,
body.skin-3 .table > thead > tr > td,
body.skin-3 .buglist-headers > th,
body.skin-3 .buglist-headers > td {
	background: var(--o-surface) !important;
	background-image: none !important;
	color: var(--o-muted);
	font-weight: 600;
	font-size: 12.5px;
	border-bottom: 1px solid var(--o-line-strong) !important;
}
body.skin-3 .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--o-zebra); }
body.skin-3 .table-hover > tbody > tr:hover,
body.skin-3 .table-hover > tbody > tr:hover > td { background-color: var(--o-accent-soft); }
body.skin-3 .table-condensed > tbody > tr > td,
body.skin-3 .table-condensed > tbody > tr > th,
body.skin-3 .table-condensed > thead > tr > th { padding: 5px 10px; }   /* as MantisBT: rows no higher than Classic (operator, 2026-10-09: "max 1.2x but preferable the same or less") */
body.skin-3 .table > tbody > tr > td,
body.skin-3 .table > tbody > tr > th { line-height: 1.35; }

/* Label cells (MantisBT's "category"): calm grey words on white, not a coloured column. */
body.skin-3 .table td.category,
body.skin-3 .table th.category,
body.skin-3 td.category,
body.skin-3 th.category {
	background-color: var(--o-surface) !important;
	color: var(--o-muted);
	font-weight: 600;
	font-size: 13px;
}
body.skin-3 .required { color: #d14343; }
/* MantisBT's default.css paints a label inside a label cell too (#edf3f4 !important). */
body.skin-3 th.category label,
body.skin-3 td.category label { background-color: transparent !important; color: inherit; font-weight: inherit; }

/* ---------- the ticket list ---------- */
/* Lower rows (operator, 2026-10-09: "can you make the row height a little less heigh?"). */
body.skin-3 #buglist > tbody > tr > td { padding: 4px 7px; line-height: 1.3; font-size: 13.5px; }
/* Each row in its status colour (operator: "make the background row color the same as the status color"): the rules
   per status come inline, from this install's colours (core/looks.php client_bridge_status_rows()); a thin white line
   between rows keeps them apart, and the row under the mouse darkens a little. */
body.skin-3 #buglist > tbody > tr > td { border-bottom: 2px solid var(--o-surface) !important; border-top: 0 !important; }
body.skin-3 #buglist.table-striped > tbody > tr:nth-of-type(odd) { background-color: transparent; }
body.skin-3 #buglist > tbody > tr:hover > td { box-shadow: inset 0 0 0 9999px rgba(16, 24, 40, .06); }
body.skin-3 #buglist .column-selection .lbl::before { background-color: var(--o-surface); }
body.skin-3 #buglist > thead > tr > th,
body.skin-3 #buglist .buglist-headers > th { padding: 10px 7px; }
/* Column headers: grey words, the sort links not link-blue. */
body.skin-3 #buglist .buglist-headers a,
body.skin-3 #buglist > thead a { color: var(--o-muted); }
body.skin-3 #buglist .buglist-headers a:hover { color: var(--o-accent); }
body.skin-3 #buglist .column-summary { min-width: 220px; }
/* Short columns on one line: a date or a number never breaks over two (that made rows two or three lines high). */
body.skin-3 #buglist .column-id,
body.skin-3 #buglist .column-project-id,
body.skin-3 #buglist .column-priority,
body.skin-3 #buglist .column-status,
body.skin-3 #buglist .column-date-submitted,
body.skin-3 #buglist .column-last-modified,
body.skin-3 #buglist .column-due-date,
body.skin-3 #buglist .column-attachments,
body.skin-3 #buglist .column-bugnotes-count { white-space: nowrap; }
body.skin-3 #buglist .column-id a { font-weight: 600; white-space: nowrap; }
body.skin-3 #buglist .column-summary { font-weight: 500; }
body.skin-3 #buglist .column-summary a { color: var(--o-accent-hover); }
body.skin-3 #buglist tr.sticky-separator > td { background: var(--o-bg); height: 6px; padding: 0; border: 0; }
/* Status: MantisBT's square becomes a dot; its colour is this install's status colour. */
body.skin-3 .fa-status-box {
	font-size: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
	vertical-align: 1px;
	margin-right: 6px;
	background: currentColor;
	/* The status colours are pale (they were made to fill a row): a darker ring keeps the dot visible on white. */
	box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .28) inset;
	filter: saturate(1.5);
	width: 11px;
	height: 11px;
}
body.skin-3 .column-status .align-left { white-space: nowrap; }
/* Target dates past or near: MantisBT's due-0 / due-1 cells as red / amber words, not full coloured blocks
   (the list and a ticket's page). */
body.skin-3 td.overdue:not(.column-due-date),
body.skin-3 td.due-0:not(.column-due-date),
body.skin-3 td.due-1:not(.column-due-date),
body.skin-3 td.due-2:not(.column-due-date),
body.skin-3 .due-0:not(.column-due-date),
body.skin-3 .due-1:not(.column-due-date) { background: transparent !important; background-color: transparent !important; }
/* In the ticket list the cell keeps its row's background (the status colour, the stripes): only MantisBT's red /
   orange / green block is taken away, by a rule weaker than the row's (operator, 2026-10-09: "the background of
   due_date on the tickets page are not colloured right"). */
#buglist td.overdue, #buglist td.due-0, #buglist td.due-1, #buglist td.due-2 { background-color: transparent; }
body.skin-3 .due-0, body.skin-3 .due-0 *, body.skin-3 td.overdue, body.skin-3 td.overdue * { color: #b42323 !important; font-weight: 600; }
body.skin-3 .due-1, body.skin-3 .due-1 * { color: #b25e00 !important; font-weight: 600; }
body.skin-3 td.due-2, body.skin-3 td.due-2 * { color: #23784a !important; font-weight: 600; }
body.skin-3 .due-0::before, body.skin-3 .due-1::before {
	content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
	margin-right: 6px; vertical-align: 1px; background: currentColor;
}

/* The filter box (operator, 2026-10-09: "hard to see the differences between label and value of fields. and labels
   are not shown as links or buttons"): each field's name is a small button that opens it (MantisBT's own link), on a
   tinted row; its value below it in dark, plain text on white. */
/* The filter box's rows as high as the other tables (Summary's): the room above and below comes from the Spacing
   setting (core/looks.php client_bridge_sizes_css()), none of its own (operator, 2026-10-09: "i want the row height of
   the filterbox same as on page summary_page.php"). */
body.skin-3 #filter .table > tbody > tr > td { padding-left: 8px; padding-right: 8px; border-top: 0; border-bottom: 0; }
body.skin-3 #filter td.small-caption.category { background-color: var(--o-bg) !important; }
/* The field names: links again, not buttons (operator, 2026-10-09: "change the filter buttons back into links again
   in the filterbox") — blue, faintly underlined, on the light grey row; the value below in dark text on white. */
body.skin-3 #filter td.small-caption.category a.dynamic-filter-expander,
body.skin-3 #filter td.small-caption.category > a {
	color: var(--o-accent-hover) !important;
	font-weight: 600;
	font-size: 12.5px;
	text-decoration: underline !important;
	text-decoration-color: rgba(37, 99, 201, .35) !important;
	text-underline-offset: 2px;
	white-space: nowrap;
}
body.skin-3 #filter td.small-caption.category a:hover { text-decoration-color: currentColor !important; }
body.skin-3 #filter td.small-caption:not(.category) {
	background-color: var(--o-surface) !important;
	color: var(--o-ink); font-size: 13.5px; font-weight: 500;
	border-bottom: 1px solid var(--o-line) !important;
}

/* ---------- buttons ---------- */
body.skin-3 .btn,
body.skin-3 .btn.btn-white,
body.skin-3 .btn.btn-round { border-radius: var(--o-radius-sm) !important; text-shadow: none; }
/* Every button looks like one (operator, 2026-10-09: "links and buttons should always be visible as action
   buttons"): tinted blue, outlined, blue words; the main one of a form filled (below). */
body.skin-3 .btn.btn-white,
body.skin-3 .btn.btn-white.btn-primary,
body.skin-3 .btn.btn-white.btn-default,
body.skin-3 .btn.btn-white.btn-danger {
	background-color: #eef4fd !important;
	border: 1px solid #b8cdee !important;
	color: var(--o-accent-hover) !important;
	font-weight: 600;
	transition: background-color .12s ease, border-color .12s ease;
}
body.skin-3 .btn.btn-white.btn-danger { background-color: #fdf0f0 !important; border-color: #efc2c2 !important; color: #b42323 !important; }
body.skin-3 .btn.btn-white:hover,
body.skin-3 .btn.btn-white.btn-primary:hover {
	background-color: #dce8fb !important;
	border-color: var(--o-accent) !important;
}
/* Links in the page: blue with a faint underline, so they read as something to click. */
body.skin-3 .page-content a:not(.btn):not(.dynamic-filter-expander):not(.dropdown-toggle):not([data-action]) {
	color: var(--o-accent-hover);
	text-decoration: underline;
	text-decoration-color: rgba(37, 99, 201, .35);
	text-underline-offset: 2px;
}
body.skin-3 .page-content a:not(.btn):hover { text-decoration-color: currentColor; }
body.skin-3 .btn.btn-white:focus-visible,
body.skin-3 .btn:focus-visible { outline: 0; box-shadow: var(--o-focus); }
/* The one main action of a form (Submit Ticket, Add Comment, Apply Filter, Add): filled — the submit button in a
   box's bottom bar or alone in a form. Links and the rows of equal actions on a ticket stay white. */
body.skin-3 .widget-toolbox input[type="submit"].btn-primary,
body.skin-3 .widget-toolbox button[type="submit"].btn-primary,
body.skin-3 .widget-toolbox > button.btn-primary:not([type]),
body.skin-3 #report_bug_form input[type="submit"].btn,
body.skin-3 .bugnote-add input[type="submit"].btn,
body.skin-3 form[action="bugnote_add.php"] input[type="submit"].btn {
	background-color: var(--o-accent) !important;
	border-color: var(--o-accent) !important;
	color: #fff !important;
}
body.skin-3 .widget-toolbox input[type="submit"].btn-primary:hover,
body.skin-3 #report_bug_form input[type="submit"].btn:hover,
body.skin-3 form[action="bugnote_add.php"] input[type="submit"].btn:hover { background-color: var(--o-accent-hover) !important; }
/* The ticket's Edit: its main action, top and bottom. */
body.skin-3 form[action="bug_update_page.php"] input[type="submit"].btn {
	background-color: var(--o-accent) !important;
	border-color: var(--o-accent) !important;
	color: #fff !important;
}

/* ---------- fields ---------- */
body.skin-3 input[type="text"],
body.skin-3 input[type="email"],
body.skin-3 input[type="password"],
body.skin-3 input[type="number"],
body.skin-3 input[type="date"],
body.skin-3 input[type="search"],
body.skin-3 select,
body.skin-3 textarea,
body.skin-3 .form-control,
body.skin-3 .input-sm {
	border: 1px solid var(--o-line-strong);
	border-radius: var(--o-radius-sm);
	background-color: var(--o-surface);
	color: var(--o-ink);
	box-shadow: none;
	transition: border-color .12s ease, box-shadow .12s ease;
}
body.skin-3 input[type="text"],
body.skin-3 input[type="email"],
body.skin-3 input[type="date"],
body.skin-3 select,
body.skin-3 .input-sm { min-height: 30px; padding: 3px 8px; }
body.skin-3 textarea, body.skin-3 .form-control { padding: 8px 10px; }
body.skin-3 input:focus,
body.skin-3 select:focus,
body.skin-3 textarea:focus,
body.skin-3 .form-control:focus {
	border-color: var(--o-accent) !important;
	box-shadow: var(--o-focus) !important;
	outline: 0;
}
body.skin-3 input.ace[type="checkbox"] + .lbl::before,
body.skin-3 input.ace[type="radio"] + .lbl::before {
	border-color: #b7c0cc;
	border-radius: 4px;
}
body.skin-3 input.ace[type="radio"] + .lbl::before { border-radius: 50%; }
body.skin-3 input.ace[type="checkbox"]:checked + .lbl::before {
	background-color: var(--o-accent);
	border-color: var(--o-accent);
	color: #fff;
}
/* The drop zone of Report Ticket. */
body.skin-3 .dropzone,
body.skin-3 .dz-clickable .dropzone {
	border: 2px dashed var(--o-line-strong) !important;
	border-radius: var(--o-radius-sm);
	background: var(--o-zebra) !important;
}

/* ---------- a ticket ---------- */
body.skin-3 .table > tbody > tr.spacer > td { background: var(--o-bg); border: 0; height: 10px; padding: 0; }
body.skin-3 td.bug-id, body.skin-3 td.bug-summary { font-weight: 600; }
body.skin-3 td.bug-summary { font-size: 15px; }
body.skin-3 td.bug-description, body.skin-3 td.bug-additional-information, body.skin-3 td.bug-steps-to-reproduce { line-height: 1.6; }
/* Comments: each one a light block, the author and time on the left in grey. */
body.skin-3 .bugnote > td,
body.skin-3 tr.bugnote > td { border-color: var(--o-line); }
body.skin-3 .bugnote .category,
body.skin-3 tr.bugnote > td.category {
	background: var(--o-surface) !important;
	color: var(--o-muted);
	font-weight: 500;
}
body.skin-3 .bugnote-note,
body.skin-3 td.bugnote-note.bugnote-public { line-height: 1.6; background-color: var(--o-surface) !important; }
body.skin-3 .bugnote-private,
body.skin-3 .bugnote-private > td { background-color: #fff8e6 !important; }
body.skin-3 .well,
body.skin-3 .well-xs {
	background: var(--o-zebra);
	border: 1px solid var(--o-line);
	border-radius: var(--o-radius-sm);
	box-shadow: none;
}
body.skin-3 .label { border-radius: 99px; font-weight: 600; }
body.skin-3 .label.arrowed-in-right::after,
body.skin-3 .label.arrowed::before { display: none; }

/* ---------- small screens: the same, a little tighter ---------- */
@media (max-width: 767px) {
	body.skin-3 .page-content { padding: 6px 10px 20px; }
	body.skin-3 .widget-box { border-radius: var(--o-radius-sm); }
}
@media (prefers-reduced-motion: reduce) {
	body.skin-3 * { transition: none !important; }
}

/*
 * ClientBridge — look "Open A": the mockup's direction A exactly (operator, 2026-10-09: "make also another theme, same
 * as your example A - Open"; mockup /mnt/dev/work/ct301-pc-mantisbt-marine/design/mantis-theme-mockup.html).
 * What differs from Open 2 (the rules above):
 *
 *   - the ticket list's rows white, every other one lightly shaded, roomy; the status a pill in its colour and a
 *     stripe at the start of the row (the colours come inline per status, client_bridge_status_rows( …, 'pill' ));
 *   - the side menu wider, the icon beside its name;
 *   - buttons white with an outline, the main one filled.
 */

/* ---------- side menu: wide, icon beside the name (desktop) ---------- */
@media (min-width: 992px) {
	body.skin-3 .sidebar.compact:not(.menu-min),
	body.skin-3 .sidebar.compact.navbar-collapse:not(.menu-min) { width: 200px; }
	body.skin-3 .sidebar.compact:not(.menu-min) + .main-content { margin-left: 200px !important; }
	body.skin-3 .sidebar.compact:not(.menu-min) ~ .footer .footer-inner { left: 200px; }
	body.skin-3 .sidebar.compact:not(.menu-min) .nav-list > li > a {
		display: flex;
		align-items: center;
		gap: 10px;
		height: auto;
		padding: 8px 12px;
		line-height: 20px;
		text-align: left;
	}
	body.skin-3 .sidebar.compact:not(.menu-min) .nav-list > li > a > .menu-icon,
	body.skin-3 .sidebar.compact:not(.menu-min) .nav-list > li > a > .menu-icon.fa {
		display: inline-flex;
		width: 22px;
		height: 22px;
		line-height: 22px;
		margin: 0;
		font-size: 17px;
		flex: none;
	}
	body.skin-3 .sidebar.compact:not(.menu-min) .nav-list > li > a > .menu-icon::before { width: 18px; height: 18px; }
	body.skin-3 .sidebar.compact:not(.menu-min) .nav-list > li > a > .menu-text { display: inline; font-size: 14px; }
}

/* ---------- ticket list: white rows, light stripes, roomy ---------- */
body.skin-3 #buglist > tbody > tr > td {
	padding: 5px 8px;
	border-bottom: 1px solid var(--o-line) !important;
	background-color: var(--o-surface);
}
body.skin-3 #buglist > tbody > tr:nth-of-type(even) > td { background-color: var(--o-zebra); }
body.skin-3 #buglist > tbody > tr:hover > td { background-color: var(--o-accent-soft); box-shadow: none; }
/* … the row's stripe stays on hover (it is the first cell's inset shadow, set per status). */
body.skin-3 #buglist .column-summary a { color: var(--o-ink); }
body.skin-3 #buglist .column-summary a:hover { color: var(--o-accent); }

/* The status: a pill in its colour (set per status), a darker dot in front. */
body.skin-3 #buglist td.column-status > div {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 10px 0 8px;   /* slim, so the row stays one line high (operator: "the rows must get thinner") */
	line-height: 18px;
	border-radius: 99px;
	font-size: 12.5px;
	font-weight: 500;
	color: #1f2733;
	white-space: nowrap;
}
body.skin-3 #buglist td.column-status .fa-status-box {
	width: 7px;
	height: 7px;
	margin-right: 0;
	filter: brightness(.6) saturate(1.4);
	box-shadow: none;
}

/* ---------- buttons: white with an outline, as the mockup ---------- */
body.skin-3 .btn.btn-white,
body.skin-3 .btn.btn-white.btn-primary,
body.skin-3 .btn.btn-white.btn-default {
	background-color: var(--o-surface) !important;
	border: 1px solid #c3ccd8 !important;
	color: var(--o-ink) !important;
	font-weight: 500;
}
body.skin-3 .btn.btn-white:hover,
body.skin-3 .btn.btn-white.btn-primary:hover {
	background-color: var(--o-bg) !important;
	border-color: #9eaabb !important;
}

/* ---------- the sign-in pages (login_page.php, login_password_page.php): MantisBT gives them body.login-layout,
   not skin-3, so they have rules of their own (operator, 2026-10-09: "continue theme open-A for pages … login_page.php,
   login_page.php?error=1&return=index.php, login_password_page.php"). ---------- */
body.login-layout,
body.login-layout .main-container,
body.login-layout .main-content {
	background: var(--o-bg) !important;
	font-family: var(--o-font);
	color: var(--o-ink);
	-webkit-font-smoothing: antialiased;
}
body.login-layout .login-container { max-width: 420px; margin: 0 auto; padding-top: 4vh; }
body.login-layout .login-logo { text-align: center; }
body.login-layout .login-logo img { max-height: 56px; width: auto; }
body.login-layout .widget-box,
body.login-layout .signup-box.widget-box,
body.login-layout .widget-box.no-border {
	background: var(--o-surface);
	border: 1px solid #edf0f4 !important;
	border-radius: var(--o-radius);
	box-shadow: var(--o-shadow) !important;
	overflow: hidden;
	padding: 0;
}
body.login-layout .widget-body,
body.login-layout .widget-main { background: var(--o-surface) !important; border: 0; padding: 28px 28px 24px; }
body.login-layout .widget-main { padding: 0; }
body.login-layout h4.header {
	font-family: var(--o-font);
	font-size: 20px;
	font-weight: 650;
	color: var(--o-ink);
	border-bottom: 0;
	padding-bottom: 0;
	margin: 0 0 4px;
}
body.login-layout h4.header > .ace-icon { color: var(--o-accent); margin-right: 6px; }
body.login-layout label { font-weight: 500; color: var(--o-muted); }
body.login-layout .form-control,
body.login-layout input[type="text"],
body.login-layout input[type="password"],
body.login-layout input[type="email"] {
	height: 40px;
	border: 1px solid var(--o-line-strong);
	border-radius: var(--o-radius-sm);
	background: var(--o-surface);
	color: var(--o-ink);
	font-family: var(--o-font);
	font-size: 15px;
	padding: 6px 36px 6px 12px;
	box-shadow: none;
}
body.login-layout .form-control:focus,
body.login-layout input:focus {
	border-color: var(--o-accent) !important;
	box-shadow: var(--o-focus) !important;
	outline: 0;
}
body.login-layout .input-icon > .ace-icon { color: var(--o-muted); line-height: 40px; }
/* The sign-in button: the look's main action, filled blue, the full width. */
body.login-layout input[type="submit"].btn,
body.login-layout .btn.btn-success,
body.login-layout .btn.btn-inverse:not(.btn-scroll-up) {
	float: none !important;
	width: 100% !important;
	height: 42px;
	margin-top: 4px;
	border: 1px solid var(--o-accent) !important;
	border-radius: var(--o-radius-sm) !important;
	background: var(--o-accent) !important;
	color: #fff !important;
	font-family: var(--o-font);
	font-size: 15px !important;
	font-weight: 600;
	text-shadow: none;
}
body.login-layout input[type="submit"].btn:hover { background: var(--o-accent-hover) !important; }
body.login-layout .alert {
	border-radius: var(--o-radius-sm);
	font-size: 13px;
	margin-top: 16px;
}
body.login-layout .alert-danger { background: #fdf0f0; border-color: #efc2c2; color: #8f1f1f; }
body.login-layout .alert-warning { background: #fff8e6; border-color: #f2dfa8; color: #7a5a00; }
body.login-layout .toolbar,
body.login-layout .toolbar.clearfix {
	background: var(--o-zebra) !important;
	border-top: 1px solid var(--o-line) !important;
	padding: 10px 28px;
}
body.login-layout .toolbar a,
body.login-layout a { color: var(--o-accent-hover); }
body.login-layout .btn-scroll-up { display: none !important; }

/* ---------- the further pages (2026-10-09: My Work, Delivery Plan, Summary and Graphs, Documents, My Account and its
   tabs) ---------- */
/* The ground reaches the bottom of the window on a short page too (it showed white under the content). */
html { background: var(--o-bg); }
body.skin-3 .main-content { min-height: calc(100vh - 52px); }

/* Box titles that are links (My Work's boxes): dark words on the white header, not MantisBT's white on blue. */
body.skin-3 .widget-header .widget-title a,
body.skin-3 .widget-header .widget-title a:hover {
	color: var(--o-ink) !important;
	text-decoration: none !important;
}
body.skin-3 .widget-header .widget-title a:hover { color: var(--o-accent) !important; }

/* Tabs (Summary / Graphs, Documents, My Account …): words on the line, the open one blue and underlined. */
body.skin-3 .nav-tabs {
	border-bottom: 1px solid var(--o-line);
	padding-left: 4px;
}
body.skin-3 .nav-tabs > li > a,
body.skin-3 .nav-tabs > li > a:focus {
	border: 0 !important;
	border-bottom: 2px solid transparent !important;
	border-radius: 0;
	background: transparent !important;
	color: var(--o-muted) !important;
	font-weight: 600;
	text-decoration: none !important;
	margin-right: 4px;
	padding: 8px 12px;
	box-shadow: none !important;
}
body.skin-3 .nav-tabs > li > a:hover { color: var(--o-ink) !important; border-bottom-color: var(--o-line-strong) !important; }
body.skin-3 .nav-tabs > li.active > a,
body.skin-3 .nav-tabs > li.active > a:hover,
body.skin-3 .nav-tabs > li.active > a:focus {
	color: var(--o-accent-hover) !important;
	border-bottom-color: var(--o-accent) !important;
	background: transparent !important;
}
body.skin-3 .nav-tabs > li.active > a::before,
body.skin-3 .nav-tabs > li.active > a::after { display: none; }

/* Grey chips (My Work's date range and similar): light, readable. */
body.skin-3 .widget-box .label-grey,
body.skin-3 .widget-box .label-default,
body.skin-3 .widget-box .label:not([class*="label-"]) {
	background-color: #e8edf3 !important;
	color: var(--o-ink) !important;
	font-weight: 500;
}

/* An empty page's message (Delivery Plan without milestones): a quiet card, not large text. */
body.skin-3 .page-content p.lead {
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--o-muted);
	background: var(--o-surface);
	border: 1px solid #edf0f4;
	border-radius: var(--o-radius);
	box-shadow: var(--o-shadow);
	padding: 16px 20px;
	max-width: 820px;
}

/* One filled button per bar: the first; a second one (Reset Prefs) white. */
body.skin-3 .widget-toolbox input[type="submit"].btn-primary ~ input[type="submit"].btn,
body.skin-3 .widget-toolbox input[type="submit"].btn-primary ~ .btn,
body.skin-3 .widget-toolbox form + form input[type="submit"].btn {
	background-color: var(--o-surface) !important;
	border-color: #c3ccd8 !important;
	color: var(--o-ink) !important;
}
/* A plain button without MantisBT's classes (a plugin's Submit): as the look's main button. */
body.skin-3 .page-content input[type="submit"]:not(.btn),
body.skin-3 .page-content button[type="submit"]:not(.btn) {
	height: 32px;
	padding: 0 14px;
	border: 1px solid var(--o-accent);
	border-radius: var(--o-radius-sm);
	background: var(--o-accent);
	color: #fff;
	font-family: var(--o-font);
	font-weight: 600;
	cursor: pointer;
}
/* Preferences: "Reset Prefs" is a form of its own beside "Update Prefs" — white, the second choice. */
body.skin-3 form[action*="account_prefs_reset"] input[type="submit"].btn {
	background-color: var(--o-surface) !important;
	border-color: #c3ccd8 !important;
	color: var(--o-ink) !important;
}

/* Fields rounded as the look has them: Ace sets border-radius: 0 !important on every field, which won (operator,
   2026-10-09: "there are still some squared value fields like on page proj_doc_add_page.php. check all pages"). */
body.skin-3 input[type="text"],
body.skin-3 input[type="email"],
body.skin-3 input[type="password"],
body.skin-3 input[type="number"],
body.skin-3 input[type="date"],
body.skin-3 input[type="url"],
body.skin-3 input[type="tel"],
body.skin-3 input[type="search"],
body.skin-3 input:not([type]),
body.skin-3 select,
body.skin-3 textarea,
body.skin-3 .form-control,
body.skin-3 .input-sm {
	border-radius: var(--o-radius-sm) !important;
}
/* The file chooser's button, as the look's other buttons. */
body.skin-3 input[type="file"] { font-family: var(--o-font); }
body.skin-3 input[type="file"]::file-selector-button {
	margin-right: 10px;
	padding: 5px 12px;
	border: 1px solid #c3ccd8;
	border-radius: var(--o-radius-sm);
	background: var(--o-surface);
	color: var(--o-ink);
	font-family: var(--o-font);
	font-weight: 500;
	cursor: pointer;
}
body.skin-3 input[type="file"]::file-selector-button:hover { background: var(--o-bg); border-color: #9eaabb; }
/* The sign-in pages' fields rounded too: Ace's border-radius: 0 !important won there as well (operator, 2026-10-09:
   "not rounded on page login_password_page.php, check all pages"). */
body.login-layout input[type="text"],
body.login-layout input[type="password"],
body.login-layout input[type="email"],
body.login-layout input:not([type]),
body.login-layout select,
body.login-layout textarea,
body.login-layout .form-control {
	border-radius: var(--o-radius-sm) !important;
}

/* Dropdown menus (the user menu, the project list, a box's menu): rounded with a soft shadow, the item under the mouse
   light blue instead of Ace's yellow (operator, 2026-10-09: "popup also not rounded"). Ace sets border-radius: 0
   !important on them. */
body.skin-3 .dropdown-menu {
	border: 1px solid var(--o-line) !important;
	border-radius: var(--o-radius) !important;
	box-shadow: 0 8px 24px rgba(16, 24, 40, .14) !important;
	padding: 6px !important;
	background: var(--o-surface);
	font-family: var(--o-font);
}
body.skin-3 .dropdown-menu > li > a,
body.skin-3 .dropdown-menu .list > li > a {
	border-radius: var(--o-radius-sm);
	padding: 7px 12px;
	color: var(--o-ink) !important;
	background: transparent !important;
}
body.skin-3 .dropdown-menu > li > a:hover,
body.skin-3 .dropdown-menu > li > a:focus,
body.skin-3 .dropdown-menu > li.active > a,
body.skin-3 .dropdown-menu .list > li > a:hover,
body.skin-3 .dropdown-yellow > li > a:hover,
body.skin-3 .dropdown-yellow > li > a:focus {
	background: var(--o-accent-soft) !important;
	color: var(--o-accent-hover) !important;
}
body.skin-3 .dropdown-menu > li > a > .ace-icon,
body.skin-3 .dropdown-menu > li > a > .fa { color: var(--o-muted); }
body.skin-3 .dropdown-menu > li > a:hover > .ace-icon,
body.skin-3 .dropdown-menu > li > a:hover > .fa { color: var(--o-accent-hover); }
body.skin-3 .dropdown-menu .divider { background-color: var(--o-line); margin: 4px 0; }
/* No pointed caret above the menu: a floating card. */
body.skin-3 .dropdown-caret::before,
body.skin-3 .dropdown-caret::after { display: none !important; }
body.skin-3 .dropdown-menu .projects-searchbox input { border-radius: var(--o-radius-sm) !important; }

/* Every popup rounded with a soft shadow, as the menus (operator, 2026-10-09: "check all popup pages"): Bootstrap's and
   jQuery UI's dialogs, popovers and tooltips, the date picker, a page's own <dialog> (ExcelReport), the AI voice panel,
   Snippets' tips. The plugins are not changed: their popups are styled from here. */
body.skin-3 .modal-content,
body.skin-3 dialog,
body.skin-3 .ui-dialog,
body.skin-3 .ui-widget.ui-widget-content,
body.skin-3 .ui-menu,
body.skin-3 .popover,
body.skin-3 .qtip,
body.skin-3 .ai-voice-panel,
body.skin-3 .bootstrap-datetimepicker-widget,
body.skin-3 .bootstrap-datetimepicker-widget.dropdown-menu {
	border-radius: var(--o-radius) !important;
	border: 1px solid var(--o-line) !important;
	box-shadow: 0 10px 30px rgba(16, 24, 40, .16) !important;
	font-family: var(--o-font);
	overflow: hidden;
}
body.skin-3 .contractors-dialog.modal-content { border: 0 !important; box-shadow: none !important; overflow: visible; }
body.skin-3 dialog { padding: 0; background: var(--o-surface); color: var(--o-ink); }
body.skin-3 dialog::backdrop { background: rgba(16, 24, 40, .35); }
body.skin-3 .ui-dialog .ui-dialog-titlebar {
	background: var(--o-surface) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--o-line) !important;
	border-radius: 0 !important;
	color: var(--o-ink);
	font-weight: 650;
}
body.skin-3 .tooltip-inner { border-radius: var(--o-radius-sm) !important; font-family: var(--o-font); padding: 5px 9px; }
body.skin-3 .bootstrap-datetimepicker-widget table td.active,
body.skin-3 .bootstrap-datetimepicker-widget table td.active:hover,
body.skin-3 .bootstrap-datetimepicker-widget table td span.active { background: var(--o-accent) !important; border-radius: 6px; }
body.skin-3 .bootstrap-datetimepicker-widget table td.day:hover,
body.skin-3 .bootstrap-datetimepicker-widget table td span:hover { background: var(--o-accent-soft); border-radius: 6px; }
body.skin-3 .bootstrap-datetimepicker-widget::before,
body.skin-3 .bootstrap-datetimepicker-widget::after { display: none !important; }

/* A box with a menu in it (the filter box's ≡) does not clip what drops out of it; its header keeps the rounded top.
   The controls in a box's top bar centred in its height (operator, 2026-10-09: "not centred and popup not visible in
   filterbox"). */
body.skin-3 .widget-box:has(.dropdown-menu),
body.skin-3 .widget-box:has(.widget-menu) { overflow: visible; }
body.skin-3 .widget-box > .widget-header { border-radius: var(--o-radius) var(--o-radius) 0 0; }
body.skin-3 .widget-box.collapsed > .widget-header { border-radius: var(--o-radius); }
/* … and, the box not clipping, what fills its bottom is rounded itself (operator, 2026-10-09: "not rounded corner" — the
   filter box's search row). */
body.skin-3 .widget-box > .widget-body,
body.skin-3 .widget-box > .widget-body > :last-child,
body.skin-3 .widget-box > .widget-body > :last-child > :last-child,
body.skin-3 .widget-box > .widget-body > :last-child > :last-child > :last-child {
	border-bottom-left-radius: var(--o-radius);
	border-bottom-right-radius: var(--o-radius);
}
body.skin-3 .widget-header > .widget-toolbar {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 47px;
	line-height: normal;
	padding: 0 8px;
}
body.skin-3 .widget-header > .widget-toolbar > form,
body.skin-3 .widget-header > .widget-toolbar > .widget-menu,
body.skin-3 .widget-header > .widget-toolbar > a { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
body.skin-3 .widget-header > .widget-toolbar .dropdown-menu { margin-top: 6px; }
body.skin-3 .dropdown-menu a,
body.skin-3 .dropdown-menu a:hover { text-decoration: none !important; }
/* "Ticket #": room for the magnifier at its left (the looks' field padding covered the words with it). */
body.skin-3 .nav-search .nav-search-input { padding-left: 28px !important; }
body.skin-3 .nav-search .nav-search-icon { left: 6px; color: var(--o-muted); }
/* The date picker: as wide as its calendar (the look's fonts run wider than Ace's fixed width; clipping cut off
   Saturday). */
body.skin-3 .bootstrap-datetimepicker-widget,
body.skin-3 .bootstrap-datetimepicker-widget.dropdown-menu { overflow: visible !important; width: auto !important; min-width: 17.5em; }
body.skin-3 .bootstrap-datetimepicker-widget table { width: 100%; }

/* Page navigation (First, Prev, 1 2 3, Next, Last): rounded buttons apart, the current page blue (operator,
   2026-10-09: "not rounded"). */
/* MantisBT writes them in reverse and floats them right: that order is kept, only a gap between them. */
body.skin-3 .pagination { border-radius: 0; }
body.skin-3 .pagination > li > a,
body.skin-3 .pagination > li > span {
	margin: 0 0 0 4px !important;
	min-width: 32px;
	padding: 5px 10px;
	text-align: center;
	border: 1px solid #c3ccd8 !important;
	border-radius: var(--o-radius-sm) !important;
	background: var(--o-surface) !important;
	color: var(--o-ink) !important;
	font-weight: 500;
	text-decoration: none !important;
}
body.skin-3 .pagination > li > a:hover { background: var(--o-accent-soft) !important; border-color: var(--o-accent) !important; color: var(--o-accent-hover) !important; }
body.skin-3 .pagination > .active > a,
body.skin-3 .pagination > .active > span,
body.skin-3 .pagination > .active > a:hover {
	background: var(--o-accent) !important;
	border-color: var(--o-accent) !important;
	color: #fff !important;
}
body.skin-3 .pagination > .disabled > a,
body.skin-3 .pagination > .disabled > span { color: var(--o-muted) !important; background: var(--o-zebra) !important; }

/* jQuery UI's dialogs (Manage Columns on View Tickets, InlineColumnConfiguration): what is inside rounded too —
   the close button, the tabs as pills, the buttons, the rows (operator, 2026-10-09: "popup configure column also not
   rounded"). One card: the tabs box inside it has no border or shadow of its own. */
body.skin-3 .ui-widget-overlay { background: rgba(16, 24, 40, .35); opacity: 1; }
body.skin-3 .ui-dialog { padding: 0; background: var(--o-surface); }
body.skin-3 .ui-dialog .ui-dialog-titlebar { padding: 12px 16px; }
body.skin-3 .ui-dialog .ui-dialog-titlebar-close {
	width: 28px;
	height: 28px;
	margin-top: -14px;
	right: 12px;
	padding: 0;
	border: 1px solid var(--o-line-strong) !important;
	border-radius: var(--o-radius-sm) !important;
	background: var(--o-surface) !important;
	color: var(--o-muted);
	font-size: 0;
	line-height: 26px;
	text-align: center;
}
body.skin-3 .ui-dialog .ui-dialog-titlebar-close::before { content: "\00d7"; font-size: 20px; }
body.skin-3 .ui-dialog .ui-dialog-titlebar-close:hover { background: var(--o-accent-soft) !important; border-color: var(--o-accent) !important; color: var(--o-accent-hover); }
body.skin-3 .ui-dialog .ui-dialog-titlebar-close .ui-icon,
body.skin-3 .ui-dialog .ui-dialog-titlebar-close .ui-button-icon-space { display: none; }
body.skin-3 .ui-dialog .ui-dialog-content { padding: 12px 16px; }
body.skin-3 .ui-dialog .ui-dialog-content .ui-widget-content,
body.skin-3 .ui-dialog .ui-dialog-content .ui-widget.ui-widget-content {
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	background: transparent;
	overflow: visible;
}
body.skin-3 .ui-dialog .ui-tabs { padding: 0; }
body.skin-3 .ui-dialog .ui-tabs .ui-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 4px;
	border: 0;
	border-radius: var(--o-radius-sm) !important;
	background: var(--o-zebra);
}
body.skin-3 .ui-dialog .ui-tabs .ui-tabs-nav::before,
body.skin-3 .ui-dialog .ui-tabs .ui-tabs-nav::after { display: none; }
body.skin-3 .ui-dialog .ui-tabs .ui-tabs-nav li {
	float: none;
	margin: 0;
	border: 1px solid transparent !important;
	border-radius: var(--o-radius-sm) !important;
	background: transparent;
	top: 0;
}
body.skin-3 .ui-dialog .ui-tabs .ui-tabs-nav li .ui-tabs-anchor { padding: 5px 12px; color: var(--o-muted); font-weight: 600; font-size: 13px; }
body.skin-3 .ui-dialog .ui-tabs .ui-tabs-nav li:hover { background: var(--o-surface); border-color: var(--o-line) !important; }
body.skin-3 .ui-dialog .ui-tabs .ui-tabs-nav li.ui-tabs-active {
	background: var(--o-surface);
	border-color: var(--o-line-strong) !important;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
body.skin-3 .ui-dialog .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { color: var(--o-accent-hover); }
body.skin-3 .ui-dialog .ui-tabs .ui-tabs-panel { padding: 10px 0 0; }
body.skin-3 .ui-dialog input[type="submit"],
body.skin-3 .ui-dialog input[type="button"],
body.skin-3 .ui-dialog button:not(.ui-dialog-titlebar-close),
body.skin-3 .ui-dialog .ui-button:not(.ui-dialog-titlebar-close) {
	padding: 5px 14px;
	border: 1px solid var(--o-accent) !important;
	border-radius: var(--o-radius-sm) !important;
	background: var(--o-accent) !important;
	color: #fff !important;
	font-weight: 600;
	font-size: 13px;
	line-height: 1.4;
}
body.skin-3 .ui-dialog input[type="submit"]:hover,
body.skin-3 .ui-dialog input[type="button"]:hover,
body.skin-3 .ui-dialog button:not(.ui-dialog-titlebar-close):hover { background: var(--o-accent-hover) !important; }
/* The column list: light rounded rows, not the plugin's grey bars. */
body.skin-3 .ui-dialog .columns_form_actions { display: flex; align-items: center; justify-content: space-between; height: auto; padding: 4px 0 10px; font-weight: 600; }
body.skin-3 .ui-dialog fieldset > ol { margin: 0 0 0 2.2em; padding: 0; }
body.skin-3 div.columns_form_container fieldset > ol > li:nth-child(odd),
body.skin-3 div.columns_form_container fieldset > ol > li:nth-child(even) {
	background-color: transparent;
	border-radius: 6px;
	padding: 2px 8px;
}
body.skin-3 div.columns_form_container fieldset > ol > li:nth-child(odd) { background-color: var(--o-zebra); }
body.skin-3 div.columns_form_container fieldset > ol > li:hover { background-color: var(--o-accent-soft); }
body.skin-3 div.columns_form_container fieldset > ol > li label { margin: 0 0 0 4px; font-weight: 500; cursor: move; }
body.skin-3 div.columns_form_inner { border-radius: var(--o-radius-sm); }

/* The side menu folded to its icons (MantisBT's ‹‹ under the menu): each icon centred in the narrow strip, and the name
   that shows beside it on mouse-over a rounded label as the other popups (operator, 2026-10-09: "left menu icons not
   neat centered", "not rounded"). */
body.skin-3 .sidebar.menu-min .nav-list { padding: 6px 4px 0; }
body.skin-3 .sidebar.menu-min .nav-list > li > a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	padding: 0;
	margin: 0;
}
body.skin-3 .sidebar.menu-min .nav-list > li > a > .menu-icon,
body.skin-3 .sidebar.menu-min .nav-list > li > a > .menu-icon.fa {
	display: inline-flex;
	width: 22px;
	height: 22px;
	margin: 0;
	font-size: 17px;
	line-height: 22px;
	flex: none;
}
body.skin-3 .sidebar.menu-min .nav-list > li > a > .menu-icon::before { width: 20px; height: 20px; }
body.skin-3 .sidebar.menu-min .nav-list > li > a > .menu-text,
body.skin-3 .sidebar.menu-min .nav-list > li > .submenu {
	left: 40px;
	border: 1px solid var(--o-line) !important;
	border-radius: var(--o-radius-sm) !important;
	box-shadow: 0 8px 24px rgba(16, 24, 40, .14) !important;
	background: var(--o-surface) !important;
	color: var(--o-ink) !important;
	font-weight: 600;
	padding-left: 14px;
}
body.skin-3 .sidebar.menu-min .sidebar-toggle > .ace-icon { border-radius: 99px; }