/* =========================================================================
   ApexityEdu — school login screen (/login and /login/<SCHOOLCODE>)
   -------------------------------------------------------------------------
   A single centred floating card on a full-screen gradient field
   (the EximusEdu-style layout), replacing the old split-screen
   ".auth-shell" grid.

   LAYOUT CONTRACT (this is the bug the redesign fixes)
   ----------------------------------------------------
   * The shell is `min-height` — never `height` — and it is a column flex
     box: the centre area grows (`flex: 1`) and the footer simply follows
     the content. On a short screen (phone in landscape, a 13" laptop with
     the on-screen keyboard up, a very low window) the PAGE scrolls and the
     footer is still reachable. Nothing is absolutely positioned over the
     card and no ancestor has a clipping height, so the card can never be
     taller than its container and cut off its own footer row
     ("Forgot password?" / "Apply for admission").
   * Nothing here sets `overflow: hidden` on the page, so wide content
     stays reachable instead of being clipped (IMPL-MOBILE policy).
   * Every full-viewport height has a dynamic-viewport companion
     (`100svh`) so iOS/Android never show a phantom scroll.
   * Colours come from tokens, so dark mode and per-school theme CSS keep
     working; only the chrome around them (the gradient field) is fixed.

   Loaded only by login.html, after the shared stylesheets and before the
   per-school theme CSS.
   ========================================================================= */

:root {
  /* --- Gradient field -------------------------------------------------- */
  --login-bg-from:   #2c62c2;
  --login-bg-via:    #2563eb;
  --login-bg-to:     #1e40af;
  --login-glow-soft: rgba(255, 255, 255, 0.20);
  --login-glow-deep: rgba(86, 62, 234, 0.38);

  /* --- Card ------------------------------------------------------------ */
  --login-card-bg:      var(--surface);
  --login-card-fg:      var(--ink);
  --login-card-border:  var(--hairline);
  --login-card-radius:  16px;                 /* ≈ Tailwind rounded-xl/2xl */
  --login-card-pad:     var(--space-8);       /* ≈ p-8 */
  --login-card-shadow:  0 24px 60px -12px rgba(2, 18, 46, 0.55),
                        0 8px 20px -6px rgba(2, 18, 46, 0.35);

  /* --- Controls -------------------------------------------------------- */
  --login-accent:        #2563eb;             /* ≈ blue-600 */
  --login-accent-hover:  #1d4ed8;             /* ≈ blue-700 */
  --login-accent-ring:   rgba(37, 99, 235, 0.18);
  --login-on-accent:     #ffffff;
  --login-link:          var(--login-accent);
}

[data-theme="dark"] {
  /* Deeper field so the dark card still floats on it. */
  --login-bg-from:   #12325f;
  --login-bg-via:    #16386b;
  --login-bg-to:     #0a1c39;
  --login-glow-soft: rgba(148, 187, 255, 0.16);
  --login-glow-deep: rgba(86, 62, 234, 0.30);

  --login-card-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.70),
                       0 8px 20px -6px rgba(0, 0, 0, 0.55);

  --login-accent:       #3b82f6;
  --login-accent-hover: #60a5fa;
  --login-accent-ring:  rgba(96, 165, 250, 0.28);
  --login-on-accent:    #06152c;
}

/* --- Page canvas ------------------------------------------------------- */
/* The card's own surface is white; the page behind it is the gradient's
   deepest tone so an over-scroll (or a viewport taller than the document)
   never reveals the app's off-white paper at the edges. */
body {
  background: var(--login-bg-to);
}

/* --- Shell ------------------------------------------------------------- */

.login-shell {
  position: relative;
  /* min-height, NOT height: the page grows with its content. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--ribbon-h) + var(--space-6)) var(--space-4) 0;
  background: linear-gradient(
    135deg,
    var(--login-bg-from) 0%,
    var(--login-bg-via) 48%,
    var(--login-bg-to) 100%
  );
  color: #fff;
}

/* Soft light bloom so the flat gradient reads as a lit surface. */
.login-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 42% at 14% 6%, var(--login-glow-soft) 0%, transparent 68%),
    radial-gradient(52% 46% at 88% 96%, var(--login-glow-deep) 0%, transparent 72%);
  pointer-events: none;
}

.login-center {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  padding: var(--space-6) 0 var(--space-8);
}

.login-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
  width: 100%;
  max-width: 448px;   /* ≈ Tailwind max-w-md */
  min-width: 0;
}

/* --- Card -------------------------------------------------------------- */

.login-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
  min-width: 0;
  padding: var(--login-card-pad);
  background: var(--login-card-bg);
  color: var(--login-card-fg);
  border: 1px solid var(--login-card-border);
  border-radius: var(--login-card-radius);
  box-shadow: var(--login-card-shadow);
}

/* --- Brand: logo + title ---------------------------------------------- */

.login-brand {
  text-align: center;
}

.login-logo {
  /* A FIXED BOX with a DYNAMIC image inside: the box never changes shape
     whatever the school uploads, and the image keeps its own aspect ratio
     (`object-fit: contain`) instead of being stretched. Wide wordmarks are
     capped by width, tall crests by height. */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  margin: 0 auto var(--space-3);
}

.login-logo img {
  display: block;
  width: auto;
  height: auto;
  max-height: 80px;
  max-width: 200px;
  object-fit: contain;
  /* Keep a transparent PNG/SVG crisp and never let it bleed out the box. */
  border: 0;
  background: transparent;
}

/* Server-rendered school logo (injected by Flask into /login/<CODE>). */
.login-logo .server-school-logo {
  max-height: 80px;
  max-width: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.login-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--login-bg-from), var(--login-bg-to));
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1;
  flex: 0 0 auto;
}

.login-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  color: var(--ink);
  word-break: break-word;
}

.login-bn {
  margin: 4px 0 0;
  font-family: var(--font-bengali);
  font-size: var(--fs-sm);
  color: var(--ink-mute);
}

.login-sub {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--ink-mute);
}

/* --- Form -------------------------------------------------------------- */

.login-form,
.login-card form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.login-card .field {
  margin: 0;
  min-width: 0;
}

.login-card .field > label,
.login-card .login-label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ink-soft);
}

.login-input,
.login-card input[type="text"],
.login-card input[type="password"],
.login-card input[type="email"] {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--ink);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.login-input::placeholder,
.login-card input::placeholder {
  color: var(--ink-faint);
}

.login-input:hover,
.login-card input:hover {
  border-color: var(--ink-faint);
}

.login-input:focus,
.login-card input:focus {
  outline: none;
  border-color: var(--login-accent);
  box-shadow: 0 0 0 3px var(--login-accent-ring);
}

/* The user ID is typed as SCHOOLCODE-ID; the mono face keeps the dash and
   the digits readable. Only the school-code part is uppercased (in JS). */
#user_id,
#f-id {
  font-family: var(--font-mono);
  text-transform: none;
}
#user_id::placeholder,
#f-id::placeholder {
  font-family: var(--font-body);
  text-transform: none;
}

/* Password + eye toggle: one field, the button floats inside it. */
.login-input-wrap {
  position: relative;
}

.login-input-wrap .login-input {
  padding-right: 44px;
}

.login-eye {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--ink-mute);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

.login-eye:hover {
  color: var(--ink);
  background: var(--paper-soft);
}

.login-eye .icon {
  width: 18px;
  height: 18px;
}

/* Remember me · Forgot password — a single row, always fully rendered. */
.login-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.login-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
}

.login-remember input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--login-accent);
  cursor: pointer;
}

.login-forgot {
  padding: 0;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--login-link);
  background: none;
  border: 0;
  cursor: pointer;
}

.login-forgot:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.login-channel {
  display: flex;
  justify-content: center;
}

/* Hidden until the school's recovery channel is known — an empty wrapper
   must not leave a gap in the form's flex column. */
.login-channel[hidden] {
  display: none;
}

.login-note {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  color: var(--ink-mute);
  text-align: center;
}

/* --- Buttons ----------------------------------------------------------- */

.login-btn,
.login-card .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 11px 18px;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--login-on-accent);
  background: var(--login-accent);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.login-btn:hover:not(:disabled),
.login-card .btn:hover:not(:disabled) {
  background: var(--login-accent-hover);
  transform: translateY(-1px);
}

.login-btn:active:not(:disabled),
.login-card .btn:active:not(:disabled) {
  transform: translateY(0);
}

.login-btn:disabled,
.login-card .btn:disabled {
  opacity: 0.62;
  cursor: not-allowed;
  transform: none;
}

.login-btn .icon,
.login-card .btn .icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* .btn.is-loading renders a spinner via ::after in components.css — the
   login buttons do the same with their own colours (white on blue). */
.login-btn.is-loading,
.login-card .btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.login-btn.is-loading::after,
.login-card .btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border: 2px solid var(--login-on-accent);
  border-top-color: transparent;
  border-radius: 50%;
  opacity: 0.85;
  animation: login-btn-spin 0.7s linear infinite;
}

@keyframes login-btn-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.login-btn-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 11px 18px;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.login-btn-ghost:hover:not(:disabled) {
  color: var(--ink);
  background: var(--paper-soft);
  border-color: var(--login-accent);
  transform: translateY(-1px);
}

.login-btn-ghost:disabled {
  opacity: 0.62;
  cursor: not-allowed;
  transform: none;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--hairline);
}

/* --- Banners, chip, back link ------------------------------------------ */

.login-card .banner {
  /* components.css gives .banner a bottom margin for stacked page content;
     inside the card the flex `gap` owns the spacing. */
  margin: 0;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
}

.login-card .school-confirm {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  background: var(--forest-soft);
  color: var(--forest);
  border-radius: var(--radius-md);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.login-card .school-confirm.is-shown {
  opacity: 1;
  transform: translateY(0);
}

.login-card .school-confirm .icon {
  width: 16px;
  height: 16px;
}

.login-card .auth-steps {
  display: flex;
  gap: 6px;
  margin-bottom: var(--space-2);
}

.login-card .auth-steps .step-dot {
  flex: 1 1 0;
  height: 4px;
  border-radius: 2px;
  background: var(--hairline);
}

.login-card .auth-steps .step-dot.is-current,
.login-card .auth-steps .step-dot.is-done {
  background: var(--login-accent);
}

.login-back,
.login-card .auth-foot {
  display: flex;
  justify-content: center;
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
}

.login-back {
  align-self: center;   /* a form child would otherwise stretch full width */
  padding: 0;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--login-link);
  background: none;
  border: 0;
  cursor: pointer;
}

.login-back:hover,
.login-card .btn-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.login-card .btn-link {
  color: var(--login-link);
}

.login-success {
  text-align: center;
}

.login-success .login-success-icon {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-3);
  color: var(--forest);
}

/* --- Below the card: secondary actions --------------------------------- */

.login-below {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.login-admission {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.login-admission:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.55);
}

/* --- Footer ------------------------------------------------------------ */

.login-foot {
  position: relative;
  width: 100%;
  padding: var(--space-4) var(--space-4)
    calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  color: rgba(255, 255, 255, 0.82);
  text-align: center;
}

.login-foot-meta {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: rgba(255, 255, 255, 0.58);
}

/* --- Focus: blue on blue-neutral chrome, still visible on the card ----- */

.login-card :focus-visible,
.login-logo :focus-visible {
  outline: 2px solid var(--login-accent);
  outline-offset: 2px;
}

.login-shell > *:not(.login-card) :focus-visible,
.login-below :focus-visible,
.login-foot :focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 480px) {
  .login-shell {
    padding: calc(var(--ribbon-h) + var(--space-5)) var(--space-4) 0;
  }

  .login-center {
    padding: var(--space-5) 0 var(--space-6);
  }

  .login-card {
    padding: var(--space-6) var(--space-5);
    gap: var(--space-4);
  }

  .login-title {
    font-size: var(--fs-xl);
  }

  /* 16px inputs stop iOS Safari zooming the page on focus. */
  .login-input,
  .login-card input {
    min-height: 48px;
    font-size: var(--fs-md);
  }

  .login-btn,
  .login-card .btn,
  .login-btn-ghost {
    min-height: 48px;
  }

  .login-row {
    /* The row keeps both controls visible — it wraps instead of clipping. */
    gap: var(--space-2);
  }
}

/* Short viewports (landscape phones, low windows): the card stays at the
   top and the page scrolls — the footer is never pushed out of reach. */
@media (max-height: 620px) {
  .login-center {
    align-items: flex-start;
    padding-top: var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-card,
  .login-btn,
  .login-card .btn,
  .login-btn-ghost,
  .login-admission,
  .login-card .school-confirm {
    transition: none;
  }

  .login-btn:hover:not(:disabled),
  .login-card .btn:hover:not(:disabled),
  .login-btn-ghost:hover:not(:disabled) {
    transform: none;
  }
}