/*
 * INTEND corporate style for MantisBT 2.x (ACE theme, body.skin-3).
 *
 * Every value lives in the :root block below. That block is reproduced
 * verbatim in docs/styleguide.md ("Design-Tokens"), together with the origin
 * of each value (styleguide slide, reference screenshot, or own derivation).
 * Change both places together; the rules below only reference the tokens.
 *
 * Loaded after all ace*.css files, so equal specificity wins. !important is
 * only used where the ACE rule being replaced uses it as well.
 */

:root {
	/* Colours */
	--intend-yellow: #ffb800;
	--intend-yellow-hover: #e6a600;
	--intend-yellow-tint: #fff4d6;
	--intend-black: #2c2c2c;
	--intend-on-yellow: #000000;
	--intend-white: #ffffff;
	--intend-silver: #f4f3ef;
	--intend-button: #f4f4f4;
	--intend-button-hover: #eaeaea;
	--intend-button-pressed: #e2e2e2;
	--intend-button-border: #c8c8c8;
	--intend-edge: #666666;
	--intend-shadow: #b3b3b3;
	--intend-icon: #333333;
	--intend-disabled: #999999;
	--intend-menu-text: #66615b;
	--intend-divider: #e3e3e3;
	--intend-divider-light: #ececec;
	--intend-zebra: #f2f2f2;
	--intend-link: #5f5f5f;
	--intend-red: #d73e3e;
	--intend-focus-ring: rgba(255, 184, 0, 0.25);
	--intend-area-shadow: rgba(0, 0, 0, 0.08);
	--intend-pressed-shadow: rgba(0, 0, 0, 0.15);
	--intend-button-shadow: rgba(0, 0, 0, 0.10);

	/* Typography */
	--intend-font: Arial, Helvetica, sans-serif;
	--intend-env-label-size: 18px;
	--intend-widget-title-size: 14px;
	--intend-widget-title-spacing: 0.04em;
	--intend-badge-size: 11px;
	--intend-header-button-size: 12px;
	--intend-menu-label-size: 13px;
	--intend-role-size: 12px;
	--intend-greeting-size: 15px;
	--intend-hint-size: 11px;
	--intend-footer-size: 12px;
	--intend-table-header-size: 12px;

	/* Shapes */
	--intend-radius-button: 6px;
	--intend-radius-field: 2px;
	--intend-radius-area: 15px;

	/* Navigation */
	--intend-sidebar-width: 260px;
	--intend-sidebar-width-collapsed: 60px;
	--intend-menu-item-height: 52px;
	--intend-menu-icon-size: 28px;
	--intend-logo-max-height: 64px;
}

/* ---------- Typography ---------- */

body,
button,
input,
select,
textarea,
.btn,
.tooltip,
.popover,
h1, h2, h3, h4, h5, h6,
.widget-title {
	font-family: var(--intend-font);
}

body {
	color: var(--intend-black);
}

a,
a:focus {
	color: var(--intend-link);
}

a:hover {
	color: var(--intend-black);
}

/* ---------- Page background: silver matt, content areas white ---------- */

.skin-3 .main-container:before {
	background: var(--intend-silver) !important;
}

.page-content {
	background-color: transparent;
}

/* No overflow:hidden here — it would clip dropdowns opening out of a widget;
   header and body get the rounded corners themselves instead. */
.widget-box {
	border: none;
	border-radius: var(--intend-radius-area);
	box-shadow: 0 1px 6px var(--intend-area-shadow);
	background-color: var(--intend-white);
}

.widget-box > .widget-header {
	background: var(--intend-white);
	border-bottom: 1px solid var(--intend-divider);
	border-radius: var(--intend-radius-area) var(--intend-radius-area) 0 0;
	color: var(--intend-black);
}

.widget-box > .widget-body {
	border-radius: 0 0 var(--intend-radius-area) var(--intend-radius-area);
}

.widget-box > .widget-header > .widget-title {
	font-size: var(--intend-widget-title-size);
	font-weight: bold;
	letter-spacing: var(--intend-widget-title-spacing);
	text-transform: uppercase;
}

/* Count badge in the title ("0 - 0 / 0"): quiet, not part of the caps title. */
.widget-box > .widget-header .badge {
	background-color: var(--intend-divider-light);
	color: var(--intend-menu-text);
	font-size: var(--intend-badge-size);
	font-weight: normal;
	letter-spacing: normal;
	text-shadow: none;
	text-transform: none;
}

.widget-box > .widget-header .btn {
	font-size: var(--intend-header-button-size);
}

/* MantisBT's coloured widgets (widget-color-blue2 and others) expect a
   coloured header: ACE makes its text white and the title link carries the
   class "white" (white text with !important). On the white header used here that
   was invisible, so header text, title link and toolbar icons go dark. */
.widget-box[class*=widget-color-] > .widget-header {
	border-color: var(--intend-divider);
	color: var(--intend-black);
}

.widget-box[class*=widget-color-] > .widget-header .white {
	color: var(--intend-black) !important;
}

.widget-box[class*=widget-color-] > .widget-header > .widget-toolbar > [data-action],
.widget-box[class*=widget-color-] > .widget-header > .widget-toolbar > .widget-menu > [data-action] {
	color: var(--intend-menu-text);
	text-shadow: none;
}

/* ---------- Title bar: matt black, environment label in yellow ---------- */

.skin-3 .navbar {
	background: var(--intend-black);
}

.skin-3 .navbar .navbar-brand,
.skin-3 .navbar .navbar-brand:hover,
.skin-3 .navbar .navbar-brand:focus {
	color: var(--intend-yellow);
	font-weight: bold;
}

/* MantisBT prints $g_window_title here, which is also the browser tab title.
   The application name is already in the sidebar logo, so the bar only shows
   the environment label (--intend-env-label, emitted by IntendTheme.php from
   $g_intend_environment_label, e.g. "Development"); none on production. */
/* The span carries ACE's ".smaller-75 { font-size: 75% !important }". */
.skin-3 .navbar .navbar-brand > span.smaller-75 {
	font-size: 0 !important;
}

.skin-3 .navbar .navbar-brand > span.smaller-75::after {
	content: var(--intend-env-label, "");
	font-size: var(--intend-env-label-size);
}

/* ---------- Navigation ---------- */

/* Width applies at every viewport size: below 992 px ACE shows the sidebar
   as a fixed overlay with a hard-coded 190 px, which cut the labels off. */
.sidebar {
	width: var(--intend-sidebar-width);
}

/* Pushing the content aside and the collapsed mode only exist on desktop. */
@media (min-width: 992px) {
	.sidebar + .main-content {
		margin-left: var(--intend-sidebar-width);
	}

	.sidebar ~ .footer .footer-inner {
		left: var(--intend-sidebar-width);
	}

	.sidebar.menu-min {
		width: var(--intend-sidebar-width-collapsed);
	}

	.sidebar.menu-min + .main-content {
		margin-left: var(--intend-sidebar-width-collapsed);
	}

	.sidebar.menu-min ~ .footer .footer-inner {
		left: var(--intend-sidebar-width-collapsed);
	}
}

.skin-3 .sidebar {
	background-color: var(--intend-white);
	border-color: var(--intend-divider);
}

.skin-3 .nav-list > li,
.skin-3 .nav-list > li.active + li,
.skin-3 .nav-list > li.active + li:last-child,
.skin-3 .nav-list > li.open,
.skin-3 .nav-list > li:hover,
.skin-3 .nav-list > li.open + li,
.skin-3 .nav-list > li:hover + li {
	border-color: var(--intend-divider-light) !important;
}

/* intend.js removes ACE's "compact" class, so icon and label sit side by
   side. 8 px top/bottom padding inside the item height. */
.skin-3 .nav-list > li > a {
	height: var(--intend-menu-item-height);
	line-height: calc(var(--intend-menu-item-height) - 16px);
	padding: 8px 12px 8px 10px;
	background-color: var(--intend-white);
	color: var(--intend-menu-text);
}

.skin-3 .nav-list > li > a > .menu-icon {
	font-size: var(--intend-menu-icon-size);
	min-width: 32px;
	margin-right: 8px;
	vertical-align: middle;
}

.skin-3 .nav-list > li > a > .menu-text {
	font-size: var(--intend-menu-label-size);
	font-weight: bold;
	text-transform: uppercase;
	white-space: nowrap;
	vertical-align: middle;
}

.skin-3 .nav-list > li:hover > a,
.skin-3 .nav-list > li.open > a,
.skin-3 .nav-list > li.open:hover > a {
	background-color: var(--intend-yellow-tint);
	color: var(--intend-on-yellow);
}

/* ACE draws a coloured bar left of hovered/active items; the active item is
   a full yellow block instead, so the bar is not needed. */
.skin-3 .nav-list > li.open:before,
.skin-3 .nav-list > li:hover:before,
.skin-3 .nav-list > li.active:before {
	display: none !important;
}

.skin-3 .nav-list > li.active > a,
.skin-3 .nav-list > li.active.highlight > a {
	background-color: var(--intend-yellow) !important;
	color: var(--intend-on-yellow) !important;
}

.skin-3 .nav-list > li.active > a > .menu-icon {
	color: var(--intend-on-yellow);
}

/* Arrow pointing from the active item into the content area, vertically
   centred (ACE's arrow is 24 px high). */
.skin-3 .nav-list li.active > a:before {
	border-color: transparent var(--intend-yellow) transparent transparent;
	top: calc((var(--intend-menu-item-height) - 24px) / 2);
}

.skin-3 .nav-list li.active > a:after {
	border-right-color: var(--intend-silver);
	top: calc((var(--intend-menu-item-height) - 24px) / 2);
}

/* Collapsed: icons only, labels pop out on hover (ACE behaviour). */
.skin-3 .sidebar.menu-min .nav-list > li > a {
	padding-left: 0;
	padding-right: 0;
	text-align: center;
}

.skin-3 .sidebar.menu-min .nav-list > li > a > .menu-icon {
	margin-right: 0;
}

.skin-3 .sidebar.menu-min .nav-list > li > a > .menu-text {
	left: calc(var(--intend-sidebar-width-collapsed) - 1px);
	height: calc(var(--intend-menu-item-height) + 1px);
	line-height: calc(var(--intend-menu-item-height) - 2px);
}

/* Header: application logo, role, greeting (emitted by IntendTheme.php). */
#intend-sidebar-head {
	padding: 18px 16px 14px;
	border-bottom: 1px solid var(--intend-divider-light);
	background-color: var(--intend-white);
	text-align: center;
}

#intend-sidebar-head .intend-logo img {
	max-width: 100%;
	max-height: var(--intend-logo-max-height);
}

#intend-sidebar-head .intend-role {
	margin-top: 10px;
	color: var(--intend-menu-text);
	font-size: var(--intend-role-size);
	font-weight: bold;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

#intend-sidebar-head .intend-greeting {
	margin-top: 4px;
	color: var(--intend-black);
	font-size: var(--intend-greeting-size);
}

/* Shown for accounts that sign in through Entra ID (EntraId plugin). */
#intend-sidebar-head .intend-auth {
	margin-top: 6px;
	color: var(--intend-menu-text);
	font-size: var(--intend-hint-size);
}

#intend-sidebar-head .intend-auth .fa {
	margin-right: 3px;
}

.sidebar.menu-min #intend-sidebar-head {
	display: none;
}

/* ---------- Buttons: silver matt, dark-grey edge, grey shadow ---------- */

/* Nearly every MantisBT button is "btn btn-primary btn-white btn-round".
   Light edge and soft shadow at rest; the styleguide's dark-grey edge
   appears on hover/focus as the interaction cue. */
.btn.btn-white.btn-primary,
.btn.btn-white.btn-default {
	background-color: var(--intend-button) !important;
	border: 1px solid var(--intend-button-border);
	box-shadow: 0 1px 2px var(--intend-button-shadow) !important;
	color: var(--intend-icon) !important;
	font-weight: normal;
	text-shadow: none;
	transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.btn.btn-white.btn-primary:hover,
.btn.btn-white.btn-primary:focus,
.btn.btn-white.btn-default:hover,
.btn.btn-white.btn-default:focus {
	background-color: var(--intend-button-hover) !important;
	border-color: var(--intend-edge);
	color: var(--intend-on-yellow) !important;
}

.btn.btn-white.btn-primary:active,
.btn.btn-white.btn-primary.active,
.btn.btn-white.btn-default:active,
.btn.btn-white.btn-default.active {
	background-color: var(--intend-button-pressed) !important;
	box-shadow: inset 0 1px 2px var(--intend-pressed-shadow) !important;
}

.btn.btn-white.btn-primary[disabled],
.btn.btn-white.btn-primary.disabled {
	color: var(--intend-disabled) !important;
	border-color: var(--intend-shadow);
}

.btn.btn-round {
	border-radius: var(--intend-radius-button) !important;
}

/* Filled primary button (rare in MantisBT): yellow, because active. */
.btn-primary:not(.btn-white),
.btn-primary:not(.btn-white):focus {
	background-color: var(--intend-yellow) !important;
	border-color: var(--intend-yellow);
	color: var(--intend-on-yellow) !important;
	text-shadow: none;
}

.btn-primary:not(.btn-white):hover {
	background-color: var(--intend-yellow-hover) !important;
	border-color: var(--intend-yellow-hover);
}

/* Red only for destructive actions and errors. */
.btn-danger:not(.btn-white),
.btn-danger:not(.btn-white):focus {
	background-color: var(--intend-red) !important;
	border-color: var(--intend-red);
}

.btn-white.btn-danger {
	border-color: var(--intend-red);
	color: var(--intend-red) !important;
}

/* ---------- Form fields ---------- */

input[type=text],
input[type=password],
input[type=email],
input[type=url],
input[type=search],
input[type=tel],
input[type=number],
input[type=date],
textarea,
select,
.form-control {
	border-radius: var(--intend-radius-field) !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
	border-color: var(--intend-yellow) !important;
	box-shadow: 0 0 0 2px var(--intend-focus-ring) !important;
}

span.required {
	color: var(--intend-red);
}

/* ---------- Tables: upper-case bold header, zebra rows ---------- */

.table > thead > tr > th {
	color: var(--intend-black);
	font-size: var(--intend-table-header-size);
	font-weight: bold;
	text-transform: uppercase;
}

.table-striped > tbody > tr:nth-of-type(odd) {
	background-color: var(--intend-zebra);
}

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

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span {
	background-color: var(--intend-yellow);
	border-color: var(--intend-yellow);
	color: var(--intend-on-yellow);
}

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

.alert-danger {
	border-color: var(--intend-red);
	color: var(--intend-red);
}

/* ---------- Login page ---------- */

.light-login {
	background: var(--intend-silver) !important;
}

/* ---------- Footer line: privacy policy link ---------- */

/* MantisBT wraps $g_bottom_include_page in "navbar-fixed-bottom" (its only
   use), which would pin it over the page content; keep it in the flow:
   below the login form, and at the end of the footer on other pages. */
.navbar-fixed-bottom {
	position: static;
}

.intend-legal {
	padding: 12px 0;
	font-size: var(--intend-footer-size);
	text-align: center;
}

.intend-legal a {
	color: var(--intend-link);
}

/* MantisBT's login box is an ACE "signup-box"; ACE gives it a translucent
   grey-green background, 1 px padding and a dark bottom line, which showed
   as a frame around the square inner area at the rounded corners. Same
   specificity as the ACE rule; overflow:hidden clips the inner corners
   (no dropdowns open out of these boxes). */
.light-login .widget-box.signup-box,
.light-login .widget-box.login-box,
.light-login .widget-box.forgot-box {
	padding: 0;
	border: none;
	border-radius: var(--intend-radius-area);
	box-shadow: 0 1px 6px var(--intend-area-shadow);
	background-color: var(--intend-white);
	overflow: hidden;
}

.light-login .widget-box .widget-main {
	background: var(--intend-white);
}