/* =================================================================
   login.css — Split card on a blurred backdrop
   Layout per reference: form (left) + illustration/content (right)
   Recoloured to the HRMS green theme (--hrms-* tokens).
   ================================================================= */

/* ── Scoped token aliases ────────────────────────────────────── */
body.login-body {
  --lg-red:           var(--hrms-red, #da0000);
  --lg-red-muted:     color-mix(in srgb, var(--lg-red) 15%, transparent);

  /* Deeper green — based on the theme's strong-green family */
  --lg-green:         var(--hrms-primary-strong);                       /* var(--hrms-primary-strong) */
  --lg-green-strong:  color-mix(in srgb, var(--hrms-primary-strong) 80%, #000); /* ~#127a38 */
  --lg-green-muted:   color-mix(in srgb, var(--hrms-primary-strong) 14%, transparent);
  --lg-green-soft:    color-mix(in srgb, var(--hrms-primary-strong) 22%, transparent);
  --lg-green-fg:      var(--hrms-primary-fg);
}

/* ── Base ───────────────────────────────────────────────────── */
body.login-body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow: hidden;
  background: var(--hrms-bg);
  color: var(--hrms-text);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ── Scene + blurred backdrop ───────────────────────────────── */
.lg-scene {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
  position: relative;
  overflow: hidden;
}

/* Blurred office backdrop with a green wash */
.lg-backdrop {
  position: absolute;
  inset: -40px;          /* bleed so blur edges never show */
  z-index: 0;
  background:
    linear-gradient(135deg, rgba(var(--hrms-primary-strong-rgb), 0.22), rgba(20,184,166,0.18) 45%, rgba(13,17,23,0.30)),
    url("/assets/images/background/background-1.jpg") center/cover no-repeat;
  filter: blur(16px) saturate(1.05);
  transform: scale(1.08);
}
.lg-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 30%, rgba(0,0,0,0.28));
}
html.hrms-dark .lg-backdrop {
  background:
    linear-gradient(135deg, rgba(13,17,23,0.55), rgba(var(--hrms-primary-strong-rgb), 0.20) 60%, rgba(13,17,23,0.70)),
    url("/assets/images/background/background-1.jpg") center/cover no-repeat;
  filter: blur(18px) saturate(0.9) brightness(0.6);
}

/* ── The floating card ──────────────────────────────────────── */
.lg-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 62rem;
  min-height: 34rem;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  background: var(--hrms-card);
  border-radius: 28px;
  overflow: hidden;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.28),
    0 8px 20px rgba(0,0,0,0.16);
  animation: lg-card-in 0.6s cubic-bezier(.2,.7,.2,1) both;
}
html.hrms-dark .lg-card {
  background: var(--hrms-card-alt);
  box-shadow: 0 28px 70px rgba(0,0,0,0.55), 0 8px 24px rgba(0,0,0,0.4);
}
@keyframes lg-card-in {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Panes ──────────────────────────────────────────────────── */
.lg-pane {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Form pane — subtle dotted texture */
.lg-pane-form {
  padding: 2.75rem 3rem 2.5rem;
  justify-content: center;
  background-image: radial-gradient(var(--hrms-border) 1px, transparent 1px);
  background-size: 22px 22px;
}
html.hrms-dark .lg-pane-form {
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
}

/* ── Brand wordmark ─────────────────────────────────────────── */
.lg-brandmark {
  display: flex;
  flex-direction: column;
  align-items: center;       /* centred logo + label */
  text-align: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}
.lg-brand-logo {
  height: 42px;
  width: auto;
  max-width: 100%;
  object-fit: contain;       /* preserve the logo's 3:1 ratio, never distort */
  display: block;
  border-radius: 7px;
  box-shadow: 0 6px 16px rgba(218,0,0,0.22);
}
.lg-brandmark-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hrms-muted);
}

/* ── Animated full-width brand banner with tagline (replaces avatar) ── */
.lg-accent {
  position: relative;
  width: 100%;
  min-height: 34px;
  margin: 0.35rem 0 1.5rem;
  padding: 0.4rem 1rem;
  border-radius: 11px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg,
    var(--lg-green-strong), var(--hrms-primary), #14b8a6, var(--hrms-primary-400), var(--lg-green-strong));
  background-size: 300% 100%;
  box-shadow: 0 6px 18px var(--lg-green-soft);
  animation: lg-accent-flow 14s linear infinite;
}
@keyframes lg-accent-flow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
/* tagline text sits above the shimmer */
.lg-accent-text {
  position: relative;
  z-index: 2;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0,0,0,0.22);
}
/* shimmer sweep travelling across the banner */
.lg-accent::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 40%;
  z-index: 1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-18deg);
  animation: lg-accent-sweep 7s ease-in-out infinite;
}
@keyframes lg-accent-sweep {
  0%        { left: -45%; }
  35%, 100% { left: 125%; }
}

/* ── Avatar ─────────────────────────────────────────────────── */
.lg-avatar {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  color: var(--lg-green-fg);
  background: linear-gradient(135deg, var(--lg-green), var(--lg-green-strong));
  box-shadow: 0 8px 22px var(--lg-green-soft), 0 0 0 6px var(--hrms-card);
  margin-bottom: 1.1rem;
}
html.hrms-dark .lg-avatar { box-shadow: 0 8px 22px rgba(0,0,0,0.4), 0 0 0 6px var(--hrms-card-alt); }

/* ── Title ──────────────────────────────────────────────────── */
.lg-title {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 1.4rem;
  color: var(--hrms-text);
}
.lg-title-underline { position: relative; }
.lg-title-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: var(--lg-green);
}

/* Subtitle (forgot / reset pages) — pulled up under the underlined title */
.lg-subtitle {
  margin: -0.9rem 0 1.5rem;
  font-size: 0.9rem;
  line-height: 1.45;
  font-weight: 450;
  color: var(--hrms-muted);
  max-width: 22rem;
}

/* ── Form ───────────────────────────────────────────────────── */
.lg-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 22rem;
}
.lg-field { display: flex; flex-direction: column; gap: 0.35rem; }

/* Input wrap with leading icon chip (per reference) */
.lg-input-wrap { position: relative; display: flex; align-items: center; }

/* Chip corners sit concentric with the input corners:
   input radius 16 − 6px inset = 10px chip radius → clean blend. */
.lg-input-chip {
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 6px;
  width: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lg-green-fg);
  background: linear-gradient(135deg, var(--lg-green), var(--lg-green-strong));
  font-size: 0.85rem;
  z-index: 2;
  pointer-events: none;
  transition: transform 0.18s ease;
}
.lg-input-wrap:focus-within .lg-input-chip { transform: scale(1.04); }

/* Rounded-rectangle input — radius matches the chip so corners align */
.lg-input.form-control {
  width: 100% !important;
  height: 52px !important;
  padding: 0 44px 0 58px !important;
  background: var(--hrms-card) !important;
  border: 1px solid var(--hrms-border) !important;
  border-radius: 16px !important;
  color: var(--hrms-text) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}
.lg-input.form-control::placeholder { color: var(--hrms-subtle) !important; font-weight: 400 !important; }
.lg-input.form-control:focus {
  border-color: var(--lg-green) !important;
  box-shadow: 0 0 0 3px var(--lg-green-muted) !important;
  outline: none !important;
}
html.hrms-dark .lg-input.form-control {
  background: var(--hrms-hover) !important;
  border-color: var(--hrms-border) !important;
  color: var(--hrms-text) !important;
  box-shadow: none !important;
}
html.hrms-dark .lg-input.form-control::placeholder { color: var(--hrms-muted) !important; }
html.hrms-dark .lg-input.form-control:focus {
  border-color: var(--lg-green) !important;
  box-shadow: 0 0 0 3px var(--lg-green-muted) !important;
}

/* Password show/hide */
.lg-pw-toggle {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  color: var(--hrms-icon);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 0.82rem;
  border-radius: 6px;
  transition: color 0.15s ease;
  z-index: 2;
}
.lg-pw-toggle:hover { color: var(--lg-green); }
.lg-pw-toggle:focus-visible { outline: 2px solid var(--lg-green); outline-offset: 1px; }

/* Inline validation */
.lg-field-error {
  font-size: 0.72rem;
  color: var(--lg-red);
  font-weight: 500;
  min-height: 0.9em;
  padding-left: 1.1rem;
  line-height: 1.3;
}
.lg-input-error.form-control {
  border-color: var(--lg-red) !important;
  box-shadow: 0 0 0 3px var(--lg-red-muted) !important;
  animation: lg-shake 0.32s cubic-bezier(.36,.07,.19,.97);
}
@keyframes lg-shake {
  10%,90% { transform: translateX(-1px); }
  20%,80% { transform: translateX(2px); }
  30%,50%,70% { transform: translateX(-4px); }
  40%,60% { transform: translateX(4px); }
}

/* ── Submit ─────────────────────────────────────────────────── */
.lg-submit {
  margin-top: 0.4rem;
  width: 100%;
  max-width: 22rem;
  height: 52px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--lg-green), var(--lg-green-strong));
  color: var(--lg-green-fg);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px var(--lg-green-soft);
  transition: box-shadow 0.18s ease, transform 0.15s ease;
}
.lg-submit::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-18deg);
  transition: left 0.55s ease;
}
.lg-submit:hover::after { left: 130%; }
.lg-submit:hover { transform: translateY(-1px); box-shadow: 0 12px 28px var(--lg-green-soft); }
.lg-submit:active { transform: scale(0.985); }

.lg-submit-label { transition: opacity 0.15s ease; }
.lg-submit-spinner {
  position: absolute;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  opacity: 0;
  animation: lg-spin 0.7s linear infinite;
}
.lg-submit.is-loading { pointer-events: none; }
.lg-submit.is-loading .lg-submit-label { opacity: 0; }
.lg-submit.is-loading .lg-submit-spinner { opacity: 1; }
@keyframes lg-spin { to { transform: rotate(360deg); } }

/* ── Forgot password pill ───────────────────────────────────── */
.lg-forgot {
  align-self: flex-start;
  margin-top: 1.5rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--hrms-border);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--hrms-muted);
  text-decoration: none;
  background: var(--hrms-card);
  transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.lg-forgot:hover {
  color: var(--lg-green);
  border-color: var(--lg-green);
  box-shadow: 0 0 0 3px var(--lg-green-muted);
}
html.hrms-dark .lg-forgot { background: var(--hrms-hover); }

/* =================================================================
   RIGHT pane — illustration + content
   ================================================================= */
.lg-pane-art {
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--lg-green-strong);
}
.lg-art-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 75% 20%, color-mix(in srgb, var(--lg-green) 28%, transparent), transparent 55%),
    linear-gradient(150deg, color-mix(in srgb, var(--lg-green) 14%, var(--hrms-card)) 0%, var(--hrms-card) 70%);
}
html.hrms-dark .lg-art-bg {
  background:
    radial-gradient(circle at 75% 20%, color-mix(in srgb, var(--lg-green) 26%, transparent), transparent 55%),
    linear-gradient(150deg, color-mix(in srgb, var(--lg-green) 16%, var(--hrms-card-alt)) 0%, var(--hrms-card-alt) 70%);
}

.lg-art-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}

/* Illustration (local SVG) */
.lg-illustration {
  width: 100%;
  max-width: 380px;
  display: flex;
  justify-content: center;
}
.lg-illustration-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 30px rgba(15,61,36,0.14));
}

/* float anim */
.lg-float        { animation: lg-floaty 6s ease-in-out infinite; }
.lg-float-slow   { animation: lg-floaty 7.5s ease-in-out 0.5s infinite; }
.lg-float-slower { animation: lg-floaty 8.5s ease-in-out 1s infinite; }
@keyframes lg-floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* content */
.lg-art-copy { text-align: center; max-width: 22rem; }
.lg-art-title {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
  color: var(--hrms-text);
}
.lg-art-sub {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--hrms-muted);
}

/* ── Theme toggle ───────────────────────────────────────────── */
.login-theme-btn {
  position: fixed;
  top: 16px; right: 16px;
  z-index: 999;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 0.875rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  transition: border-color 0.18s ease, background 0.18s ease;
}
.login-theme-btn:hover { border-color: #fff; background: rgba(255,255,255,0.28); }
.login-theme-btn .login-theme-icon-light { display: none; }
.login-theme-btn .login-theme-icon-dark  { display: block; }
html.hrms-dark .login-theme-btn .login-theme-icon-light { display: block; }
html.hrms-dark .login-theme-btn .login-theme-icon-dark  { display: none; }

/* =================================================================
   Responsive
   ================================================================= */
@media (max-width: 860px) {
  body.login-body { overflow: auto; }
  .lg-scene { padding: 1.5rem 1rem; }
  .lg-card { grid-template-columns: 1fr; max-width: 26rem; min-height: 0; }
  .lg-pane-art { display: none; }
  .lg-pane-form { padding: 2.5rem 2rem; align-items: center; text-align: center; }
  .lg-brandmark, .lg-form, .lg-submit { align-items: center; }
  .lg-form { width: 100%; }
  .lg-forgot { align-self: center; }
}

@media (max-width: 420px) {
  .lg-pane-form { padding: 2rem 1.5rem; }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lg-card, .lg-chart span, .lg-float, .lg-float-slow, .lg-float-slower,
  .lg-gear-1, .lg-gear-2, .lg-accent { animation: none !important; }
  .lg-submit::after, .lg-accent::after { display: none; }
}