@import "./variables.css";

/* Scoped entirely to classes introduced by theme_surmawala/www/login.html — safe to
   load on every website page via web_include_css without touching other pages. */

/* Belt-and-braces: even with full_width=1 (set in www/login.py) removing
   core's ".container my-4" wrapper, zero out any ancestor spacing so the
   shell is guaranteed edge-to-edge regardless of base template padding. */
body:has(.surmawala-login-shell) {
	margin: 0;
}

body:has(.surmawala-login-shell) .page-content-wrapper,
body:has(.surmawala-login-shell) .page_content,
body:has(.surmawala-login-shell) main {
	padding: 0;
	margin: 0;
	max-width: none;
}

.surmawala-login-shell {
	min-height: 100vh;
	width: 100%;
	margin: 0;
	background: var(--sw-bg);
	display: flex;
	flex-direction: column;
}

@media (min-width: 992px) {
	.surmawala-login-shell {
		display: grid;
		grid-template-columns: 7fr 3fr;
	}
}

/* ---------- Left banner (70%) ---------- */

.surmawala-login-banner {
	position: relative;
	display: none;
	background-image: var(--surmawala-banner-image, none);
	background-size: cover;
	background-position: center;
	background-color: var(--sw-primary-dark);
	overflow: hidden;
}

.surmawala-login-banner.no-image {
	background-image: var(--sw-primary-gradient);
}

.surmawala-login-banner-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.65) 100%);
}

.surmawala-login-banner-copy {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 48px;
	color: #fff;
}

.surmawala-login-banner-copy h1 {
	font-size: 2rem;
	font-weight: 600;
	margin: 0 0 8px;
	color: #fff;
}

.surmawala-login-banner-copy p {
	font-size: 1rem;
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	max-width: 32rem;
}

@media (min-width: 992px) {
	.surmawala-login-banner {
		display: block;
	}
}

/* ---------- Right panel (30%) ---------- */

.surmawala-login-panel {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px 20px;
	min-height: 100vh;
	background: var(--sw-bg);
	animation: sw-fade-up var(--sw-duration-enter) ease-out both;
}

@keyframes sw-fade-up {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.surmawala-login-panel .page-card {
	background: var(--sw-bg);
	border: 1px solid var(--sw-border);
	border-radius: var(--sw-radius-lg);
	box-shadow: var(--sw-shadow-md);
}

.surmawala-login-panel .page-card-head img.app-logo {
	max-height: 48px;
}

/* Core reserves space for the icon on the left but not for the "Show"
   toggle on the right, so the masked value can run into it on narrow
   panels. Reserve room regardless of panel width. */
.surmawala-login-panel .password-field input[type="password"],
.surmawala-login-panel .password-field input[type="text"] {
	padding-right: 48px !important;
}

.surmawala-login-panel .password-field .toggle-password {
	background: var(--sw-bg);
	padding-left: 4px;
}

.surmawala-login-panel .page-card-head h4 {
	color: var(--sw-text);
}

/* Brand color on primary actions, links and focus states */

.surmawala-login-panel .btn-primary,
.surmawala-login-panel .btn-login {
	background: var(--sw-primary) !important;
	border-color: var(--sw-primary) !important;
	transition: background var(--sw-transition-fast), transform var(--sw-transition-fast);
}

.surmawala-login-panel .btn-primary:hover,
.surmawala-login-panel .btn-login:hover {
	background: var(--sw-primary-dark) !important;
	border-color: var(--sw-primary-dark) !important;
	transform: translateY(-1px);
}

.surmawala-login-panel .btn-primary:active,
.surmawala-login-panel .btn-login:active {
	transform: translateY(0);
}

.surmawala-login-panel a,
.surmawala-login-panel .forgot-password-message a,
.surmawala-login-panel .sign-up-message a {
	color: var(--sw-primary);
}

.surmawala-login-panel a:hover {
	color: var(--sw-primary-dark);
}

.surmawala-login-panel input[type="text"]:focus,
.surmawala-login-panel input[type="email"]:focus,
.surmawala-login-panel input[type="password"]:focus {
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sw-primary) 16%, transparent);
	transition: box-shadow var(--sw-transition-fast);
}

.surmawala-login-panel .page-card-body.invalid input[type="text"],
.surmawala-login-panel .page-card-body.invalid input[type="email"],
.surmawala-login-panel .page-card-body.invalid input[type="password"] {
	border: 1px solid var(--sw-primary) !important;
}

.surmawala-login-panel .toggle-password {
	transition: color var(--sw-transition-fast);
}

.surmawala-login-panel .toggle-password:hover {
	color: var(--sw-primary);
}

.surmawala-login-panel .btn-login-option {
	transition: background var(--sw-transition-fast), transform var(--sw-transition-fast);
}

.surmawala-login-panel .btn-login-option:hover {
	transform: translateY(-1px);
}

/* Comfortable, usable form on phones/tablets: banner hidden via the min-width
   rule above, panel takes the full width and keeps generous spacing. */
@media (max-width: 991px) {
	.surmawala-login-panel {
		padding: 24px 16px;
	}
}

/* ---------- Loading state (applied by public/js/login.js on submit) ---------- */

.surmawala-login-panel .btn.sw-loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}

.surmawala-login-panel .btn.sw-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border: 2px solid rgba(255, 255, 255, 0.45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: sw-spin 700ms linear infinite;
}

@keyframes sw-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.surmawala-login-panel .btn.sw-loading::after {
		animation: none;
	}
}