/* ============================================================================
   FrontEdge-Login.css
   SchoolFront login (Option B2 — centered card, logo in card).
   Styles the rendered output of login.aspx + the LogInSF / SSO user controls.
   Design system: Bright & Approachable, FrontEdge tokens, Plus Jakarta Sans.
   WCAG 2.1 AA tuned (button, borders, text, focus).
   ============================================================================ */

/* Shared design tokens (single source of truth, also imported by
   frontedge-modern.css). Defines --fe-page-bg; do NOT redefine it below. */
@import url('frontedge-shared-tokens.css');

:root {
  --fe-lime:#A8C62A; --fe-lime-bright:#B5D43A; --fe-green-deep:#3B6D11; --fe-green-darker:#2A4F0C;
  --fe-lime-tint:#EAF3DE; --fe-lime-soft:#F2F6EC; --fe-lime-light:#C0DD97;
  /* --fe-page-bg lives in frontedge-shared-tokens.css (shared with the app) */
  --fe-surface:#FFFFFF; --fe-surface-soft:#FAFCF7;
  --fe-border:#E8ECE5; --fe-border-soft:#EEF1EB; --fe-border-strong:#D4DBC9;
  --fe-field-border:#8B9779;                /* 3:1 on white (WCAG 1.4.11) */
  --fe-text:#2D3530; --fe-text-muted:#6B716A; --fe-text-faint:#767C73; --fe-text-ghost:#B5BAB1;
  --fe-sage:#A2AC9F;
  --fe-error:#B23A48; --fe-error-bg:#FBEAEC;
  --fe-warning:#8B6914; --fe-warning-bg:#FBF3E0;
  --fe-info:#2E5E8E; --fe-info-bg:#E7EFF7;
}

/* ---- Page shell ---------------------------------------------------------- */
body.fe-login-page {
  margin:0; padding:0; min-height:100vh; background:var(--fe-page-bg);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--fe-text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
body.fe-login-page * { box-sizing:border-box; }
.fe-login-page .loginform { margin:0; }

/* Faint logo "pieces" watermark, fixed bottom-right (decorative) */
body.fe-login-page::before {
  content:''; position:fixed; right:-110px; bottom:-110px; width:520px; height:520px; opacity:0.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><rect x='26' y='1' width='23' height='24' rx='7' fill='%23A2AC9F'/><rect x='2' y='25' width='23' height='24' rx='7' fill='%23A2AC9F'/><rect x='25' y='25' width='25' height='25' rx='7' fill='%23A8C62A'/><circle cx='55' cy='22' r='5' fill='%23A8C62A'/><circle cx='24' cy='54' r='4.5' fill='%23A2AC9F'/></svg>");
  background-repeat:no-repeat; background-size:contain; pointer-events:none; z-index:0;
}

.fe-login-page .login-shell {
  position:relative; z-index:1;
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:32px 20px;
}

/* ---- Logo ---------------------------------------------------------------- */
.fe-login-page .card-inner-logo { display:flex; justify-content:center; margin-bottom:22px; }
.fe-login-page .card-inner-logo a { display:block; line-height:0; }
.fe-login-page .sf-logo-img { display:block; width:100%; max-width:300px; height:auto; border:0; }

/* ---- Card ---------------------------------------------------------------- */
.fe-login-page .card {
  width:100%; max-width:440px; background:var(--fe-surface);
  border:0.5px solid var(--fe-border); border-radius:12px;
  box-shadow:0 1px 2px rgba(31,58,47,0.04), 0 4px 16px rgba(31,58,47,0.06), 0 16px 48px rgba(31,58,47,0.08);
  overflow:hidden;
}
.fe-login-page .card__body { padding:32px 40px 32px; }
.fe-login-page .card-title { font-size:24px; font-weight:700; letter-spacing:-0.5px; margin:0 0 6px; text-align:center; color:var(--fe-text); }
.fe-login-page .card-subtitle { font-size:13px; color:var(--fe-text-muted); margin:0 0 24px; text-align:center; }

/* ---- Message area --------------------------------------------------------
   The controls emit server-driven messages as <span class="ErrorText">.
   Style ErrorText as the error message box. fe-message--* variants are
   available for future severity-based messaging.                            */
.fe-login-page .ErrorText,
.fe-login-page .fe-message {
  display:block; border-radius:7px; padding:12px 14px; font-size:13px; line-height:1.45;
  margin:0 0 18px; border:0.5px solid transparent;
  background:var(--fe-error-bg); color:var(--fe-error); border-color:rgba(178,58,72,0.35);
}
.fe-login-page .ErrorText:empty { display:none; }            /* don't show empty boxes */
.fe-login-page .ErrorText a { color:var(--fe-error); font-weight:600; }
.fe-login-page .fe-message--warning { background:var(--fe-warning-bg); color:var(--fe-warning); border-color:rgba(139,105,20,0.35); }
.fe-login-page .fe-message--info    { background:var(--fe-info-bg);    color:var(--fe-info);    border-color:rgba(46,94,142,0.35); }
.fe-login-page .fe-message--success { background:var(--fe-lime-tint);  color:var(--fe-green-deep); border-color:rgba(59,109,17,0.35); }

/* ---- Fields -------------------------------------------------------------- */
.fe-login-page .field { margin-bottom:18px; }
.fe-login-page .field__label { display:block; font-size:13px; font-weight:600; color:var(--fe-text); margin-bottom:6px; }
.fe-login-page .field__input-wrap { position:relative; }
.fe-login-page .field__input,
.fe-login-page input.field__input {
  display:block;   /* remove inline-block baseline gap so the wrap is exactly the
                      input's height — keeps the absolute toggle vertically centered */
  width:100%; height:46px; padding:0 14px; font-family:inherit; font-size:15px; color:var(--fe-text);
  background:var(--fe-surface); border:1px solid var(--fe-field-border); border-radius:7px; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease; -webkit-appearance:none; appearance:none;
}
.fe-login-page .field__input:hover { border-color:var(--fe-green-deep); }
.fe-login-page .field__input:focus { border-color:var(--fe-green-deep); box-shadow:0 0 0 3px rgba(168,198,42,0.30); }
.fe-login-page .field__input::placeholder { color:var(--fe-text-faint); }

/* password show/hide toggle (defeat any legacy `button{padding:..!important}`) */
.fe-login-page .field__toggle {
  /* Anchor from the BOTTOM, not the top. The toggle's containing block turned
     out to be the whole .field (label + input), so a top-based offset measured
     from the label. The input is the last in-flow element, so the container's
     bottom edge == the input's bottom edge — anchoring there centers reliably.
     (46px input - 32px button) / 2 = 7px up from the input's bottom. */
  position:absolute; right:8px; top:auto; bottom:7px; transform:none;
  width:32px !important; height:32px !important; padding:0 !important; margin:0 !important;
  border:0 !important; background:transparent !important; cursor:pointer; border-radius:5px;
  color:var(--fe-text-muted); display:flex; align-items:center; justify-content:center;
  transition:background .12s ease, color .12s ease; box-shadow:none !important;
}
.fe-login-page .field__toggle:hover { color:var(--fe-green-deep); background:var(--fe-lime-soft) !important; }
.fe-login-page .field__toggle:focus-visible { outline:2px solid var(--fe-green-deep); outline-offset:-1px; }
.fe-login-page .field--with-toggle .field__input { padding-right:46px; }

/* ---- Captcha (shown after repeated failed logins) ------------------------ */
.fe-login-page .fe-captcha { margin-bottom:18px; }
.fe-login-page .fe-captcha__row { display:flex; align-items:center; gap:12px; margin-top:8px; }
.fe-login-page .fe-captcha__row img { border-radius:6px; border:1px solid var(--fe-border-strong); }
.fe-login-page .fe-captcha__refresh { width:18px; height:18px; cursor:pointer; }

/* ---- Radio group (e.g. MFA enroll: choose SMS / Email) ------------------- */
.fe-login-page .fe-radio-group label {
  font-size:14px; color:var(--fe-text); font-weight:500; line-height:2.1;
  margin-left:8px; cursor:pointer;
}
.fe-login-page .fe-radio-group input[type="radio"] {
  accent-color:var(--fe-green-deep); vertical-align:middle; cursor:pointer;
}

/* ---- Checkbox row (e.g. MFA challenge: remember this device) ------------- */
.fe-login-page .fe-checkbox-row { display:flex; align-items:center; margin-bottom:18px; }
.fe-login-page .fe-checkbox-row input[type="checkbox"] {
  accent-color:var(--fe-green-deep); vertical-align:middle; cursor:pointer; margin:0;
}
.fe-login-page .fe-checkbox-row__label {
  font-size:14px; color:var(--fe-text); font-weight:500; margin-left:8px; cursor:pointer;
}

/* ---- Forgot password row ------------------------------------------------- */
.fe-login-page .form-row { display:flex; justify-content:flex-end; margin:-2px 0 22px; }
.fe-login-page .form-row__link { font-size:13px; color:var(--fe-green-deep); text-decoration:none; font-weight:600; }
.fe-login-page .form-row__link:hover { text-decoration:underline; }

/* ---- Primary button (brand lime + dark text, AA 6.48:1) ------------------ */
.fe-login-page .submit-btn,
.fe-login-page input.submit-btn {
  width:100%; height:48px; background:var(--fe-lime); color:var(--fe-text); border:0; border-radius:7px;
  font-family:inherit; font-size:15px; font-weight:700; letter-spacing:.2px; cursor:pointer;
  box-shadow:0 2px 6px rgba(59,109,17,0.16); transition:background .15s ease, transform .06s ease, box-shadow .15s ease;
  -webkit-appearance:none; appearance:none;
}
.fe-login-page .submit-btn:hover { background:var(--fe-lime-bright); box-shadow:0 3px 10px rgba(59,109,17,0.22); }
.fe-login-page .submit-btn:active { transform:scale(0.99); }
.fe-login-page .submit-btn:focus-visible { outline:2px solid var(--fe-green-deep); outline-offset:2px; }

/* ---- SSO buttons --------------------------------------------------------- */
.fe-login-page .fe-sso { text-align:center; }
.fe-login-page .sso-btn,
.fe-login-page a.sso-btn {
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:48px; padding:0 16px; margin-top:10px;
  background:var(--fe-surface); color:var(--fe-text); border:1px solid var(--fe-border-strong);
  border-radius:7px; font-family:inherit; font-size:15px; font-weight:600; text-decoration:none;
  cursor:pointer; transition:background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.fe-login-page .sso-btn:hover { background:var(--fe-surface-soft); border-color:var(--fe-text-faint); box-shadow:0 1px 3px rgba(31,58,47,0.06); }
.fe-login-page .sso-btn:focus-visible { outline:2px solid var(--fe-green-deep); outline-offset:2px; }
.fe-login-page .sso-btn__icon { display:inline-flex; line-height:0; }
.fe-login-page .sso-btn__label { line-height:1; }

/* Duo is an ImageButton (input[type=image]); render it as a centered logo button
   without distorting the source image. */
.fe-login-page .sso-btn--duo,
.fe-login-page input.sso-btn--duo {
  display:inline-block; width:auto; height:26px; padding:11px 24px; margin-top:10px;
  background:var(--fe-surface); border:1px solid var(--fe-border-strong); border-radius:7px;
  box-sizing:content-box; cursor:pointer;
}
.fe-login-page input.sso-btn--duo:hover { background:var(--fe-surface-soft); border-color:var(--fe-text-faint); }
.fe-login-page input.sso-btn--duo:focus-visible { outline:2px solid var(--fe-green-deep); outline-offset:2px; }

/* ---- Footer (mockup links under the card) -------------------------------- */
.fe-login-page .page-footer { margin-top:26px; text-align:center; font-size:12px; color:var(--fe-text-muted); width:100%; max-width:440px; }
.fe-login-page .page-footer__links { display:flex; flex-wrap:wrap; justify-content:center; gap:22px; margin-bottom:10px; }
.fe-login-page .page-footer__links a { color:var(--fe-text-muted); text-decoration:none; }
.fe-login-page .page-footer__links a:hover { color:var(--fe-green-deep); text-decoration:underline; }
.fe-login-page .page-footer__copyright { color:var(--fe-text-muted); }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width:480px) {
  .fe-login-page .card__body { padding:26px 22px 24px; }
  .fe-login-page .card { border-radius:10px; }
  .fe-login-page .card-title { font-size:22px; }
  .fe-login-page .sf-logo-img { max-width:240px; }
  .fe-login-page .field__input { font-size:16px; }   /* prevent iOS zoom-on-focus */
  .fe-login-page .page-footer__links { gap:12px; }
}