/*
 * Sahla POS login branding for SSb Hj. Hesti - Spesial Soto Boyolali.
 * Source of truth: the brand's official website (sotossbhjhesti.com) —
 * maroon + amber on warm cream, Plus Jakarta Sans, real food photography.
 * An editorial single-column portal, not a competitor split-card layout.
 * Overrides Frappe's design tokens (see login.bundle.scss) instead of
 * fighting individual selectors. Loaded only on this login page.
 */

:root {
	--ssb-maroon: #691414;
	--ssb-maroon-deep: #540e0e;
	--ssb-red: #a7191f;
	--ssb-amber: #f59e0b;
	--ssb-yellow: #fde047;
	--ssb-orange: #d97706;
	--ssb-cream: #fff1f2;
	--ssb-ink: #3a1414;
	--ssb-ink-muted: #7a5a58;
}

body {
	font-family: "Plus Jakarta Sans", var(--font-stack, sans-serif);
	--bg-color: var(--ssb-cream);
	--gray-900: var(--ssb-maroon);
	--gray-800: var(--ssb-maroon-deep);
	--heading-color: var(--ssb-maroon-deep);
	--text-color: var(--ssb-ink);
	--ink-gray-6: var(--ssb-ink-muted);
	--ink-gray-5: var(--ssb-ink-muted);
	--ink-gray-4: #b08e8a;
	--outline-gray-2: #f3d9d4;
	--surface-white: #ffffff;
	--surface-gray-2: #fbe9e4;
	--border-radius-lg: 16px;
	--border-radius-sm: 10px;
}

body h1,
body h2,
body h3,
body h4,
body .btn,
body .ssb-portal-wordmark {
	font-family: "Plus Jakarta Sans", var(--font-stack, sans-serif);
	font-weight: 700;
}

/* ---- editorial portal shell ---- */

/* Frappe's base template already reserves ~100vh + 60px top padding for
   .page-content-wrapper; without this override that stacks with .ssb-portal's
   own min-height below and forces a scrollbar on normal-height screens. */
body .page-content-wrapper {
	padding-top: 0;
	min-height: 0;
}

.ssb-portal {
	max-width: 640px;
	margin: 0 auto;
	padding: 32px 24px 48px;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100vh;
	min-height: 100dvh;
}

.ssb-portal-header {
	display: flex;
	align-items: center;
	gap: 12px;
	align-self: flex-start;
	margin-bottom: 20px;
}

.ssb-portal-logo {
	height: 48px;
	width: auto;
}

.ssb-portal-wordmark {
	font-size: 19px;
	font-weight: 700;
	color: var(--ssb-maroon-deep);
	letter-spacing: 0.01em;
}

.ssb-portal-wordmark strong {
	/* kept maroon (not amber) for text: amber-on-white fails WCAG contrast at this size */
	color: inherit;
	font-weight: 800;
	position: relative;
}

.ssb-portal-wordmark strong::after {
	content: "";
	position: absolute;
	left: 1px;
	right: 1px;
	bottom: -2px;
	height: 3px;
	border-radius: 2px;
	background: var(--ssb-amber);
}

/* ---- hero food photo with steam divider ---- */

.ssb-portal-visual {
	width: 100%;
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	line-height: 0;
	box-shadow: 0 12px 28px rgba(105, 20, 20, 0.18);
}

.ssb-portal-visual picture,
.ssb-portal-visual img {
	width: 100%;
	height: clamp(160px, 20vw, 200px);
	object-fit: cover;
	display: block;
}

.ssb-steam-divider {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	width: 100%;
	height: 32px;
	display: block;
}

/* ---- login card ---- */

.ssb-portal-body {
	width: 100%;
	margin-top: -4px;
}

.ssb-portal-body .page-card {
	background-color: #ffffff;
	box-shadow: 0 1px 3px rgba(58, 20, 20, 0.06), 0 8px 20px rgba(58, 20, 20, 0.06);
	border: 1px solid var(--outline-gray-2);
	max-width: 100%;
}

.ssb-portal-body .page-card-head .app-logo {
	display: none;
}

.ssb-portal-footer {
	margin: 24px 0 0;
	text-align: center;
	font-size: 13px;
	color: var(--ssb-ink-muted);
}

/* ---- brand accent touches on interactive elements ---- */

.ssb-portal-body .btn-login,
.ssb-portal-body .btn-ldap-login {
	font-weight: 700;
}

.ssb-portal-body .btn-login:hover,
.ssb-portal-body .btn-login:focus {
	background: var(--ssb-maroon-deep) !important;
}

.ssb-portal-body .forgot-password-message a,
.ssb-portal-body .sign-up-message a,
.ssb-portal-body .resend-link a {
	color: var(--ssb-maroon) !important;
	font-weight: 600;
}

.ssb-portal-body .forgot-password-message a:hover,
.ssb-portal-body .sign-up-message a:hover,
.ssb-portal-body .resend-link a:hover {
	color: var(--ssb-orange) !important;
}

/* email-link login is a supporting action, not a second equal-weight CTA */
.ssb-portal-body .ssb-secondary-link {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--ssb-maroon) !important;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	min-height: 36px !important;
	padding: 6px 4px !important;
	width: auto !important;
	display: inline-flex !important;
	align-self: center;
}

.ssb-portal-body .ssb-secondary-link:hover {
	color: var(--ssb-orange) !important;
	background: transparent !important;
}

.ssb-portal-body input[type="text"]:focus,
.ssb-portal-body input[type="email"]:focus,
.ssb-portal-body input[type="password"]:focus {
	border-color: var(--ssb-maroon);
	box-shadow: 0 0 0 3px rgba(105, 20, 20, 0.13);
}

/* real, accessible password-visibility button (was a bare svg) */
.ssb-portal-body .password-field .toggle-password {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: var(--border-radius-sm);
	cursor: pointer;
	fill: var(--ink-gray-4);
}

.ssb-portal-body .password-field .toggle-password:hover {
	background: var(--surface-gray-2);
}

.ssb-portal-body .password-field input {
	padding-right: 40px;
}

/* larger, easier-to-tap inputs/buttons */
.ssb-portal-body input[type="text"],
.ssb-portal-body input[type="email"],
.ssb-portal-body input[type="password"] {
	height: 44px;
}

.ssb-portal-body .btn-login,
.ssb-portal-body .btn-ldap-login,
.ssb-portal-body .btn-login-option,
.ssb-portal-body .btn-signup {
	min-height: 44px;
}

/* visible focus ring for keyboard navigation, brand-colored */
.ssb-portal-body a:focus-visible,
.ssb-portal-body button:focus-visible,
.ssb-portal-body input:focus-visible {
	outline: 2px solid var(--ssb-maroon);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	.ssb-portal-body .page-card {
		transition: box-shadow 200ms ease;
	}
}

/* ---- responsive ---- */

@media (max-width: 480px) {
	.ssb-portal {
		padding: 20px 16px 32px;
	}

	.ssb-portal-visual img {
		height: 140px;
	}

	.ssb-portal-logo {
		height: 38px;
	}

	.ssb-portal-wordmark {
		font-size: 17px;
	}
}