/* ============================================================================
   FrontEdge-Error.css
   SchoolFront error page (Error.aspx) — centered card, logo in card, matching
   the login screen (Option B2) so a failure still looks like the product.
   Design system: Bright & Approachable, FrontEdge tokens, Plus Jakarta Sans.
   WCAG 2.1 AA tuned (buttons, links, text, focus).
   ============================================================================ */

/* Shared design tokens (single source of truth, also imported by
   frontedge-modern.css and FrontEdge-Login.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-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-error-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-error-page * { box-sizing:border-box; }

/* Faint logo "pieces" watermark, fixed bottom-right (decorative).
   Same treatment as the login page. */
body.fe-error-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-error-page .error-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-error-page .card-inner-logo { display:flex; justify-content:center; margin-bottom:24px; }
.fe-error-page .card-inner-logo a { display:block; line-height:0; }
.fe-error-page .sf-logo-img { display:block; width:100%; max-width:260px; height:auto; border:0; }

/* ---- Card ---------------------------------------------------------------- */
.fe-error-page .card {
  width:100%; max-width:560px; 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-error-page .card__body { padding:32px 40px; text-align:center; }
.fe-error-page .card-title {
  font-size:24px; font-weight:700; letter-spacing:-0.5px; margin:0 0 8px; color:var(--fe-text);
}
.fe-error-page .card-subtitle { font-size:14px; color:var(--fe-text-muted); margin:0 0 22px; }

/* ---- Error artwork -------------------------------------------------------
   Images/ErrorPic.jpg is a long-standing, recognizable part of the app —
   users know this page by it — so it stays as the card's visual anchor
   (no status glyph; the photo does that job). The source image has a white
   background, so it sits seamlessly on the white card with no framing.
   The old page floated it right at 300px; 300px is kept as the max width.  */
.fe-error-page .fe-error-art { margin:2px auto 14px; max-width:300px; }
.fe-error-page .fe-error-art img {
  display:block; width:100%; height:auto; border:0;
  aspect-ratio:1024 / 820;      /* reserve the box so nothing reflows on load */

  /* Two touches stop the photo reading as a pasted rectangle on the card:
     - multiply blends its near-white (#FDFDFD) studio backdrop into the white
       card, so there is no visible tone step at the left/right edges;
     - the source is cropped mid-torso, so a mask fades the bottom out instead
       of ending on a hard horizontal line.
     Both degrade safely: a browser that supports neither just renders the
     plain photo, which is what the old page showed anyway. */
  mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(to bottom,#000 76%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 76%,transparent 100%);
}

/* ---- Body copy ----------------------------------------------------------- */
.fe-error-page .fe-body {
  font-size:14px; line-height:1.55; color:var(--fe-text-muted); margin:0 0 24px; text-align:left;
}
.fe-error-page .fe-body:last-of-type { margin-bottom:26px; }
.fe-error-page .fe-link { color:var(--fe-green-deep); font-weight:600; text-decoration:none; }
.fe-error-page .fe-link:hover { text-decoration:underline; }
.fe-error-page .fe-link:focus-visible { outline:2px solid var(--fe-green-deep); outline-offset:2px; border-radius:3px; }

/* ---- Message area --------------------------------------------------------
   Server-driven messages (HTML-injection notice, "too many forms", etc.)
   render as <span class="fe-message fe-message--error">. Severity variants
   match the login page so the two pages stay visually in sync.              */
.fe-error-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; text-align:left;
  background:var(--fe-error-bg); color:var(--fe-error); border-color:rgba(178,58,72,0.35);
}
.fe-error-page .fe-message:empty { display:none; }            /* don't show empty boxes */
.fe-error-page .fe-message a { color:var(--fe-error); font-weight:600; }
.fe-error-page .fe-message--warning { background:var(--fe-warning-bg); color:var(--fe-warning); border-color:rgba(139,105,20,0.35); }
.fe-error-page .fe-message--info    { background:var(--fe-info-bg);    color:var(--fe-info);    border-color:rgba(46,94,142,0.35); }
.fe-error-page .fe-message--success { background:var(--fe-lime-tint);  color:var(--fe-green-deep); border-color:rgba(59,109,17,0.35); }

/* ---- Actions ------------------------------------------------------------- */
.fe-error-page .fe-actions { display:flex; flex-direction:column; gap:10px; }
.fe-error-page .fe-btn,
.fe-error-page a.fe-btn {
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:48px; padding:0 16px;
  border-radius:7px; font-family:inherit; font-size:15px; font-weight:700; letter-spacing:.2px;
  text-decoration:none; cursor:pointer; -webkit-appearance:none; appearance:none;
  transition:background .15s ease, border-color .12s ease, box-shadow .15s ease, transform .06s ease;
}
/* Primary — brand lime with dark text (AA 6.48:1) */
.fe-error-page .fe-btn--primary,
.fe-error-page a.fe-btn--primary {
  background:var(--fe-lime); color:var(--fe-text); border:0;
  box-shadow:0 2px 6px rgba(59,109,17,0.16);
}
.fe-error-page .fe-btn--primary:hover { background:var(--fe-lime-bright); box-shadow:0 3px 10px rgba(59,109,17,0.22); }
.fe-error-page .fe-btn--primary:active { transform:scale(0.99); }
/* Secondary — outlined, matches the login SSO buttons */
.fe-error-page .fe-btn--secondary,
.fe-error-page a.fe-btn--secondary {
  background:var(--fe-surface); color:var(--fe-text); font-weight:600;
  border:1px solid var(--fe-border-strong);
}
.fe-error-page .fe-btn--secondary:hover { background:var(--fe-surface-soft); border-color:var(--fe-text-faint); box-shadow:0 1px 3px rgba(31,58,47,0.06); }
.fe-error-page .fe-btn:focus-visible { outline:2px solid var(--fe-green-deep); outline-offset:2px; }

/* ---- Technical detail (only rendered when the page opts in) -------------- */
.fe-error-page .fe-error-details {
  display:block; margin-top:22px; padding:12px 14px; text-align:left;
  background:var(--fe-surface-soft); border:0.5px solid var(--fe-border);
  border-radius:7px; font-size:12px; line-height:1.5; color:var(--fe-text-faint);
  font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',monospace;
  word-break:break-word;
}
.fe-error-page .fe-error-details:empty { display:none; }

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

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width:480px) {
  .fe-error-page .card__body { padding:26px 22px 24px; }
  .fe-error-page .card { border-radius:10px; }
  .fe-error-page .card-title { font-size:22px; }
  .fe-error-page .sf-logo-img { max-width:220px; }
  .fe-error-page .fe-error-art { max-width:210px; }
  .fe-error-page .page-footer__links { gap:12px; }
}