/*
 * Frappe-bridge CSS — quiets stock Frappe public-page chrome
 * that would otherwise show through our themed wrapper.
 *
 * Loaded after app.css via web_include_css. Scoped to public web pages
 * (the chain that uses templates/web.html → templates/web_base.html).
 *
 * Does NOT touch /app (Desk) styles — those don't load this stylesheet.
 */

/* Hide empty Frappe page-header / breadcrumbs scaffolding on stock pages.
   When pages actually need them they explicitly populate the blocks; when
   they don't, the empty wrappers leave visible whitespace. */
.page-content-wrapper > .page-breadcrumbs:empty,
.page-content-wrapper .page-header-wrapper:empty,
.page-header-wrapper > .page-header:empty,
.page-header-wrapper > .page-header-actions-block:empty {
	display: none;
}

/* Frappe's web.html wraps content in <main class="container my-4"> — the my-4
   adds 1.5rem top/bottom that fights our themed sections that already have
   their own padding. Reduce on full-bleed marketing pages by opting in via
   body class .full-bleed (set per-page when needed). */
body.full-bleed .page-content-wrapper > main.container.my-4 {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* Frappe drops its own .navbar.navbar-light onto the page when web_block
   renders Standard Navbar — but we override that block, so this shouldn't
   appear. If a stray Frappe navbar shows up (e.g. via a third-party app),
   suppress it. Our themed navbar uses .adminuiux-header. */
body > nav.navbar.navbar-light:not(.adminuiux-header nav) {
	display: none;
}

/* Bootstrap-4-flavoured Frappe forms (.form-control, .form-group) and our
   theme's BS5 .form-floating live side by side. When pages render Frappe's
   stock forms (web forms, my-account), gently align them with theme tone:
   roundedness, focus colour. */
.page-content .form-control:focus,
.page_content .form-control:focus,
.adminuiux-content .form-control:focus {
	border-color: var(--bs-primary, #5e8e3e);
	box-shadow: 0 0 0 0.2rem rgba(94, 142, 62, 0.15);
}

/* Hide Frappe's stock footer entirely — our themed footer is rendered via
   the navbar/footer block override in web_base.html. */
body > footer.web-footer:not(.adminuiux-footer) {
	display: none;
}

/* The login.bundle.css we explicitly skip on /login defines .page-card and
   .login-content. Our themed login uses .login-box maxwidth-400 instead, so
   nothing to do — but if any other Frappe page references .page-card,
   give it a soft theme treatment. */
.page-card {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}

/* Login failure visual feedback — login.js adds .invalid-login on the card
   and .invalid on .page-card-body. Provide a shake + red border so the user
   knows their credentials were rejected. */
.login-content.page-card.invalid-login {
	animation: ut-shake 0.5s;
}
@keyframes ut-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-8px); }
	40% { transform: translateX(8px); }
	60% { transform: translateX(-6px); }
	80% { transform: translateX(6px); }
}
.page-card-body.invalid input.form-control {
	border-color: #dc3545;
	background-image: linear-gradient(to right, transparent, rgba(220, 53, 69, 0.06));
}
.page-card-body.invalid input.form-control:focus {
	box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.2);
}

/* ── Universal Plus brand sizing ──
   Overrides the theme's hardcoded 36px navbar logo. Responsive:
   smaller on mobile so it doesn't fight the toggler + sign-in button. */
.universal-brand-logo {
	height: 44px !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
}
@media (min-width: 768px) {
	.universal-brand-logo { height: 56px !important; }
}
@media (min-width: 1200px) {
	.universal-brand-logo { height: 64px !important; }
}
.universal-brand-logo--lg {
	height: 64px !important;
	width: auto !important;
}
@media (min-width: 768px) {
	.universal-brand-logo--lg { height: 88px !important; }
}
.universal-brand-logo--sm {
	height: 36px !important;
	width: auto !important;
}

/* ── Body padding-top to clear the fixed navbar ──
   The theme's .scrollup body class provides some, but not enough for our
   bigger logo. Match the navbar's actual rendered height per breakpoint. */
body.scrollup {
	padding-top: 64px;
}
@media (min-width: 768px) {
	body.scrollup { padding-top: 80px; }
}
@media (min-width: 1200px) {
	body.scrollup { padding-top: 96px; }
}

/* ── Navbar container side padding on mobile ──
   Bootstrap's .container-fluid has 0.75rem default; bump on phones to keep
   logo + toggler + sign-in button from kissing the screen edges. */
.adminuiux-header .navbar > .container-fluid {
	padding-left: 1rem;
	padding-right: 1rem;
}
@media (min-width: 768px) {
	.adminuiux-header .navbar > .container-fluid {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

/* ── Sign-in button shrinks on mobile so it doesn't get clipped ── */
.adminuiux-header .btn-link-header {
	padding: 0.375rem 0.75rem;
	font-size: 0.875rem;
}
@media (min-width: 768px) {
	.adminuiux-header .btn-link-header {
		padding: 0.5rem 1rem;
		font-size: 1rem;
	}
}

/* ── All page sections get safe horizontal padding on mobile ──
   Targets our marketing pages (sections inside .adminuiux-content). */
.adminuiux-content > section.container-fluid,
.adminuiux-content > .container-fluid {
	padding-left: 1rem;
	padding-right: 1rem;
}
@media (min-width: 768px) {
	.adminuiux-content > section.container-fluid,
	.adminuiux-content > .container-fluid {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}