/*
 * Whitelabel branding layer.
 *
 * Maps the --pg-* custom properties emitted by common/BrandStyle.jsp onto the
 * AdminLTE selectors that carry the console's visual identity. Loaded after
 * adminlte.min.css and style.css so it is the last word on themed surfaces.
 *
 * !important is used deliberately: AdminLTE's own theme rules are written at
 * four-class specificity (for example
 * .sidebar-dark-light .nav-sidebar>.nav-item>.nav-link.active), and matching
 * that selector shape here would couple this file to AdminLTE internals.
 * Only themed properties are forced; layout and spacing are left untouched.
 */

/* ------------------------------------------------------------------ Sidebar */

.main-sidebar {
	background-color: var(--pg-sidebar-bg) !important;
}

.main-sidebar .brand-link {
	background-color: var(--pg-sidebar-brand-bg) !important;
	color: var(--pg-sidebar-brand-text) !important;
	border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.main-sidebar .brand-link .brand-text,
.main-sidebar .brand-link:hover {
	color: var(--pg-sidebar-brand-text) !important;
}

/* Keep an arbitrary partner logo inside the brand strip. */
.main-sidebar .brand-link .brand-image {
	max-height: 33px;
	width: auto;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link,
.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link,
.main-sidebar .nav-header {
	color: var(--pg-sidebar-text) !important;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link:hover,
.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link:hover,
.main-sidebar .nav-sidebar > .nav-item > .nav-link.active,
.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
	background-color: var(--pg-sidebar-active-bg) !important;
	color: var(--pg-sidebar-active-text) !important;
}

/* ------------------------------------------------------------------- Topbar */

.main-header.navbar {
	background-color: var(--pg-topbar-bg) !important;
	border-bottom-color: var(--pg-border-color) !important;
	color: var(--pg-topbar-text) !important;
}

.main-header.navbar .navbar-nav > .nav-item > .nav-link {
	color: var(--pg-topbar-text) !important;
}

/* ------------------------------------------------------------------ Content */

.content-wrapper {
	background-color: var(--pg-page-bg) !important;
	color: var(--pg-text-color);
}

.card {
	background-color: var(--pg-surface-bg);
}

/* -------------------------------------------------------------------- Links */

a {
	color: var(--pg-link);
}

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

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

.btn-primary {
	background-color: var(--pg-primary) !important;
	border-color: var(--pg-primary) !important;
	color: var(--pg-primary-text) !important;
}

.btn-primary:hover, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
	background-color: var(--pg-primary-hover) !important;
	border-color: var(--pg-primary-hover) !important;
	color: var(--pg-primary-text) !important;
}

.text-primary {
	color: var(--pg-primary) !important;
}

.bg-primary {
	background-color: var(--pg-primary) !important;
	color: var(--pg-primary-text) !important;
}

.badge-primary {
	background-color: var(--pg-primary) !important;
	color: var(--pg-primary-text) !important;
}

/* AdminLTE iCheck checkboxes and radios take the partner primary when checked */
.icheck-primary > input:first-child:checked + label::before,
.icheck-primary > input:first-child:checked + input[type="hidden"] + label::before {
	background-color: var(--pg-primary) !important;
	border-color: var(--pg-primary) !important;
}

.btn-outline-primary {
	border-color: var(--pg-primary) !important;
	color: var(--pg-primary) !important;
}

.btn-outline-primary:hover {
	background-color: var(--pg-primary) !important;
	color: var(--pg-primary-text) !important;
}

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

.main-footer {
	background-color: var(--pg-footer-bg) !important;
	border-top-color: var(--pg-border-color) !important;
	color: var(--pg-footer-text) !important;
}

/* ------------------------------------------- Login, register and error pages */

/*
 * Two background layers on one element: a flat overlay drawn as a gradient on
 * top of the partner photo. With no photo configured --pg-login-bg-image is
 * "none" and with no tint --pg-login-overlay is "transparent", so both layers
 * collapse and the flat --pg-login-bg color shows through unchanged.
 */
.login-page, .register-page, .error-page {
	background-color: var(--pg-login-bg) !important;
	background-image:
		linear-gradient(var(--pg-login-overlay), var(--pg-login-overlay)),
		var(--pg-login-bg-image) !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
	background-attachment: fixed !important;
}

.login-box, .register-box {
	max-width: 100%;
	width: var(--pg-login-card-width);
}

/* Preserve AdminLTE's small-screen behaviour, which the width above overrides. */
@media (max-width: 576px) {
	.login-box, .register-box {
		width: 90%;
	}
}

/*
 * overflow is what makes the radius visible. The card body carries an opaque
 * background and square corners, and it is the card's only child, so without
 * clipping it paints straight over the rounded corners and the radius has no
 * effect at all. The error page card escaped this because its body is
 * transparent.
 */
.login-box > .card, .register-box > .card, .error-page .card {
	border-radius: var(--pg-login-card-radius);
	overflow: hidden;
}

.login-card-body, .register-card-body {
	background-color: var(--pg-surface-bg);
	color: var(--pg-text-color);
}

/*
 * Sizes the partner logo rather than only capping it. max-height alone can
 * shrink an image but never enlarge one, so raising the token above the
 * asset's natural height did nothing at all. width:auto holds the aspect
 * ratio, max-width keeps a wide banner inside the card, and object-fit stops
 * the two constraints distorting the image when both bite at once.
 */
.login-logo img, .register-logo img {
	height: var(--pg-login-logo-height);
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

/*
 * The logo sits at the top of the card rather than above it, matching the
 * reference partner login. AdminLTE's .login-logo spacing assumes the outside
 * placement and leaves the mark cramped against the card edge, so the in-card
 * copy sets its own.
 */
.login-card-body > .login-logo, .register-card-body > .login-logo {
	margin-bottom: 1.5rem;
	padding-top: 0.5rem;
}

/*
 * The card's heading sits under the centered logo, so it is centered too, on
 * every card of the family (Login, Register, RecoverPassword, Welcome) so the
 * text does not jump when the user moves between them. Descendant, not child:
 * RecoverPassword's heading is inside its form.
 */
.login-card-body h3 {
	text-align: center;
}