/*
 * Palm Apps Core – Login Page Stylesheet
 * Scoped to .palm-login-body.
 */

/* ============================================================
   0. CSS VARIABLES & RESET
   ============================================================ */
:root {
	--palm-primary: #0d1b2a;
	--palm-accent:  #1d4ed8;
}

.palm-login-body,
.palm-login-body * {
	box-sizing: border-box;
}

.palm-login-body {
	margin:      0;
	padding:     0;
	min-height:  100vh;
	display:     flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background:  linear-gradient(135deg, var(--palm-primary) 0%, #0f2744 50%, #162e5c 100%);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size:   15px;
	color:       #1e293b;
	-webkit-font-smoothing: antialiased;
}

/* ============================================================
   1. DECORATIVE CIRCLES
   ============================================================ */
.palm-login-circles {
	position:       fixed;
	inset:          0;
	pointer-events: none;
	overflow:       hidden;
	z-index:        0;
}

.palm-circle {
	position:      absolute;
	border-radius: 50%;
	opacity:       .06;
	background:    #fff;
}

.palm-circle--1 {
	width:  500px;
	height: 500px;
	top:    -160px;
	right:  -100px;
}

.palm-circle--2 {
	width:  360px;
	height: 360px;
	bottom: -120px;
	left:   -80px;
	opacity: .04;
}

.palm-circle--3 {
	width:  200px;
	height: 200px;
	top:    40%;
	left:   60%;
	opacity: .035;
}

/* ============================================================
   2. LAYOUT
   ============================================================ */
.palm-login-wrap {
	position:   relative;
	z-index:    1;
	width:      100%;
	max-width:  460px;
	padding:    20px 20px 0;
	display:    flex;
	flex-direction: column;
	align-items: center;
}

/* ============================================================
   3. CARD
   ============================================================ */
.palm-login-card {
	width:         100%;
	background:    #ffffff;
	border-radius: 20px;
	box-shadow:    0 20px 60px rgba(0,0,0,.30), 0 4px 12px rgba(0,0,0,.20);
	padding:       40px 40px 36px;
}

/* ============================================================
   4. LOGO
   ============================================================ */
.palm-login-logo {
	text-align: center;
	margin-bottom: 28px;
}

.palm-login-logo img {
	display:    block;
	margin:     0 auto;
	max-height: 56px;
	width:      auto;
	object-fit: contain;
}

/* ============================================================
   5. HEADINGS
   ============================================================ */
.palm-login-title {
	font-size:      26px;
	font-weight:    800;
	color:          var(--palm-primary);
	margin:         0 0 8px;
	text-align:     center;
	letter-spacing: -.02em;
}

.palm-login-sub {
	font-size:  15px;
	color:      #64748b;
	margin:     0 0 28px;
	text-align: center;
}

/* ============================================================
   6. ERROR / NOTICE MESSAGES
   ============================================================ */
.palm-login-error {
	display:       flex;
	align-items:   center;
	gap:           8px;
	padding:       12px 14px;
	margin-bottom: 20px;
	background:    #fef2f2;
	border:        1px solid #fecaca;
	border-radius: 8px;
	color:         #b91c1c;
	font-size:     14px;
	font-weight:   500;
}

.palm-login-error svg {
	flex-shrink: 0;
}

.palm-login-notice {
	display:       flex;
	align-items:   center;
	gap:           8px;
	padding:       12px 14px;
	margin-bottom: 20px;
	background:    #eff6ff;
	border:        1px solid #bfdbfe;
	border-radius: 8px;
	color:         #1d4ed8;
	font-size:     14px;
	font-weight:   500;
}

/* Check-email confirmation stays green; password-reset success is blue (above) */
.palm-login-notice-success {
	background: #f0fdf4;
	border-color: #bbf7d0;
	color: #15803d;
}

.palm-login-notice svg {
	flex-shrink: 0;
}

/* ============================================================
   7. FORM
   ============================================================ */
.palm-login-form {
	display:        flex;
	flex-direction: column;
	gap:            18px;
}

.palm-form-group {
	display:        flex;
	flex-direction: column;
	gap:            6px;
}

.palm-form-label {
	font-size:   13px;
	font-weight: 600;
	color:       #374151;
}

.palm-input-wrap {
	position: relative;
}

.palm-form-input {
	width:         100%;
	height:        48px;
	padding:       0 44px 0 14px;
	border:        1.5px solid #e2e8f0;
	border-radius: 10px;
	background:    #f8fafc;
	font-size:     15px;
	color:         #1e293b;
	outline:       none;
	transition:    border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
	-webkit-appearance: none;
}

.palm-form-input:focus {
	background:   #ffffff;
	border-color: var(--palm-accent);
	box-shadow:   0 0 0 3px rgba(29,78,216,.12);
}

.palm-form-input.has-error {
	border-color: #ef4444;
}

.palm-form-input.has-error:focus {
	box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}

/* For the non-password input – don't pad right */
.palm-form-group > .palm-form-input {
	padding-right: 14px;
}

/* Password reveal button */
.palm-pw-toggle {
	position:        absolute;
	right:           12px;
	top:             50%;
	transform:       translateY(-50%);
	background:      none;
	border:          none;
	padding:         4px;
	cursor:          pointer;
	color:           #94a3b8;
	display:         flex;
	align-items:     center;
	transition:      color 150ms ease;
}

.palm-pw-toggle:hover {
	color: #475569;
}

/* Remember me row */
.palm-form-check {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             8px;
}

.palm-check-label {
	display:     flex;
	align-items: center;
	gap:         7px;
	font-size:   14px;
	color:       #475569;
	cursor:      pointer;
	user-select: none;
}

.palm-check-input {
	width:         16px;
	height:        16px;
	accent-color:  var(--palm-accent);
	cursor:        pointer;
	border-radius: 4px;
	flex-shrink:   0;
}

.palm-forgot-link {
	font-size:  13px;
	color:      var(--palm-accent);
	text-decoration: none;
	font-weight: 500;
	white-space: nowrap;
}

.palm-forgot-link:hover {
	text-decoration: underline;
}

/* Submit button */
.palm-login-btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             8px;
	width:           100%;
	height:          50px;
	padding:         0 20px;
	background:      var(--palm-accent);
	color:           #ffffff;
	font-size:       15px;
	font-weight:     700;
	border:          none;
	border-radius:   10px;
	cursor:          pointer;
	margin-top:      4px;
	transition:      background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.palm-login-btn:hover {
	background:  #1e40af;
	transform:   translateY(-1px);
	box-shadow:  0 4px 16px rgba(29,78,216,.32);
}

.palm-login-btn:active {
	transform:  translateY(0);
	box-shadow: none;
}

/* ============================================================
   8. FOOTER CAPTION
   ============================================================ */
.palm-login-footer {
	margin:     20px 0 0;
	font-size:  12px;
	color:      rgba(255,255,255,.35);
	text-align: center;
}

/* ============================================================
   9. RESPONSIVE
   ============================================================ */
@media (max-width: 500px) {
	.palm-login-card {
		padding:       28px 22px 24px;
		border-radius: 16px;
	}

	.palm-login-title {
		font-size: 22px;
	}

	.palm-login-wrap {
		padding: 16px 12px 0;
	}

	.palm-form-check {
		flex-direction: column;
		align-items:    flex-start;
		gap:            10px;
	}
}