/* OrangeTee brand identity (Brand Guide Deck Revamped_v2025.pdf, p.23-24):
   Calibri for headers, Red Hat Display for subheaders and body text; orange
   as the primary action colour, violet as a secondary accent only. */
:root {
  --brand-orange: #fa7616;
  --brand-violet: #7368a8;
  --brand-black: #000000;
  --brand-white: #ffffff;
  --bs-primary: var(--brand-orange);
  --bs-primary-rgb: 250, 118, 22;
  --bs-link-color: var(--brand-orange);
  --bs-link-hover-color: #d9640f;
  --bs-body-font-family: "Red Hat Display", Calibri, Arial, Helvetica, sans-serif;
}

body {
  font-family: var(--bs-body-font-family);
  color: var(--brand-black);
}

h1, h2, h3, h4, h5, h6 {
  font-family: Calibri, Arial, Helvetica, sans-serif;
  font-weight: 700;
}

.btn-primary {
  background-color: var(--brand-orange);
  border-color: var(--brand-orange);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: #d9640f;
  border-color: #d9640f;
}

/* The employee-facing login surface: a single centred card rather than a bare page of text,
   since these pages are "the only thing an employee ever sees of OneAccess" (re-founding design
   §10). Task 8 adds the mobile breakpoint tuning on top of this. The top gradient accent bar
   matches .auth-card and .legal-content -- the same brand motif on every card surface in the
   app, so Error/SignedIn/Logout/InvalidReturnUrl (all .login-card users) read as part of the
   same system as Auth/Index and the legal pages instead of looking like an older, plainer card. */
.login-card {
  position: relative;
  overflow: hidden;
  max-width: 34rem;
  margin: 3rem auto;
  padding: 2rem;
  background-color: var(--brand-white);
  border: 1px solid #eaeaea;
  border-radius: 1rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.login-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-orange), var(--brand-violet));
}

/* Touch-sized tap targets on every interactive control -- the AgentApp opens these pages in a
   system browser, so there is no guarantee of a mouse-precision pointer. */
.login-card .btn,
.login-card .form-control {
  min-height: 2.75rem;
}

/* The Singpass "Log in" button is now the official downloaded asset rendered as a plain image
   (see Pages/Auth/Index.cshtml.css) -- no hand-built button styling or Poppins font is needed
   here any more. */

@media (max-width: 480px) {
  .login-card {
    max-width: none;
    margin: 0;
    padding: 1.5rem 1.25rem;
    border-radius: 0;
    border-width: 0 0 1px 0;
    box-shadow: none;
  }
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* A comfortable reading column for prose pages (Terms of Use, Personal Data Protection Policy),
   framed as a branded card -- the same white-surface-plus-gradient-accent motif as .auth-card --
   so both legal pages read as a matched pair instead of bare text floating on the page.
   Bootstrap's own .container is wide enough for forms and cards, but too wide for long-form
   paragraphs at desktop widths. */
.legal-content {
  position: relative;
  overflow: hidden;
  max-width: 42rem;
  margin: 3rem auto;
  padding: 2.5rem 2.5rem 2rem;
  line-height: 1.6;
  background-color: #fff;
  border: 1px solid #dde1e5;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(20, 17, 15, 0.04), 0 20px 48px -20px rgba(20, 17, 15, 0.28);
}

.legal-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-orange), var(--brand-violet));
}

.legal-content h2 {
  margin-top: 2rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #eee1d8;
  font-size: 1.25rem;
}

.legal-content .legal-source {
  margin-top: 2.5rem;
  color: var(--bs-secondary-color, #6c757d);
  font-size: 0.85rem;
}

@media (max-width: 480px) {
  .legal-content {
    margin: 1.5rem 1rem;
    padding: 1.75rem 1.5rem 1.5rem;
  }
}

/* _Layout's shared header/footer chrome (Terms of Use, Personal Data Protection Policy, Error)
   -- same isolation-scoping reason as .auth-body below: <body>, and any <a>/<img> touched by a
   Tag Helper (the navbar-brand link, its logo, the footer's asp-page links), never receive the
   CSS-isolation scope attribute, so these live in this global stylesheet rather than
   _Layout.cshtml.css. See the matching comment below and in Index.cshtml.css. */
/* Flexbox sticky footer: .flex-grow-1 (Bootstrap utility, applied to the content wrapper div in
   _Layout.cshtml) absorbs all the extra height, so .brand-footer always lands at the bottom of
   the viewport on short pages without the old scaffold's position:absolute + a magic-number
   body margin-bottom guess -- which silently breaks the moment the footer's own height changes
   (padding, wrapped text) and no longer matches that guess. Supersedes the scaffold's
   `body { margin-bottom: 60px; }` and _Layout.cshtml.css's `.footer { position: absolute; ... }`
   entirely for pages using this class; margin: 0 clears the now-irrelevant inherited value. */
.brand-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(ellipse 640px 480px at 6% -6%, rgba(250, 118, 22, 0.10), transparent 60%),
    radial-gradient(ellipse 620px 520px at 100% 108%, rgba(115, 104, 168, 0.12), transparent 60%),
    #f6f5f2;
}

.brand-header {
  position: relative;
  background-color: #fff;
  margin-bottom: 1.5rem;
}

.brand-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-orange), var(--brand-violet));
}

.brand-logo {
  display: block;
  width: 130px;
  height: auto;
}

.brand-footer {
  position: relative;
  margin-top: 2rem;
  padding: 1.5rem 0;
  color: #5b574f;
  font-size: 0.875rem;
}

.brand-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-orange), var(--brand-violet));
}

.brand-footer-copyright {
  margin-bottom: 0.35rem;
}

.brand-footer-links span {
  margin: 0 0.5rem;
  color: #c9c4ba;
}

.brand-footer a {
  color: inherit;
  text-decoration: underline;
}

.brand-footer a:hover {
  color: var(--brand-orange);
}

/* _AuthLayout's own <body class="auth-body"> styling lives here rather than in
   _AuthLayout.cshtml.css's scoped stylesheet, for the same reason as the block below: ASP.NET
   Core's CSS isolation never stamps the scope attribute onto a layout's own
   <html>/<head>/<body> tags (confirmed via the served HTML -- <body> comes back with no
   b-xxxx attribute, only its children get one), so a scoped `body { ... }` selector there is
   silently dead code. It previously left the sticky-footer `body { margin-bottom: 60px; }`
   rule below unopposed on this page too, pushing the document 60px past one viewport height
   and forcing a vertical scrollbar even though .auth-shell's own min-height: 100vh already
   fills it. */
.auth-body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse 640px 480px at 6% -6%, rgba(250, 118, 22, 0.16), transparent 60%),
    radial-gradient(ellipse 620px 520px at 100% 108%, rgba(115, 104, 168, 0.18), transparent 60%),
    #f6f5f2;
}

/* Auth/Index (Pages/Auth/Index.cshtml.css) styling for <form>, <input>, <label>, <a>, and
   <img src="~/..."> elements lives here rather than in that page's own scoped stylesheet.
   ASP.NET Core's CSS isolation does not add its scope attribute to elements touched by other
   Tag Helpers (confirmed via the served HTML: <div>/<p>/<span>/<button> get the b-xxxx
   attribute; <form>, <input>, <label>, <a>, and any <img> whose src goes through the built-in
   UrlResolutionTagHelper -- i.e. any "~/..." src -- do not) -- a scoped selector targeting any
   of those elements is silently dead code, it never matches the rendered markup. These class
   names are unique to Auth/Index, so putting them in the global stylesheet isn't a real
   collision risk. */
.auth-logo {
  display: block;
  width: 150px;
  height: auto;
  margin: 0 auto 1.75rem;
}

/* The official Singpass button asset, full width within the card's own padding (matching the
   email input/submit button below it) -- it scales uniformly by its own intrinsic aspect ratio
   (no distortion, no recolouring), it just renders taller than the spec's compact reference
   size as a result. */
.auth-singpass-button img {
  display: block;
  width: 100%;
  height: auto;
}

.auth-singpass-button:hover img {
  filter: brightness(0.96);
}

/* A floating label: the label sits inside the input at rest and lifts into a small caption
   above the text once the field is focused or filled -- the label doubles as the placeholder,
   so there's no separate caption sitting above the box competing for attention. */
.auth-input-group .auth-input {
  width: 100%;
  min-height: 3.5rem;
  padding: 1.85rem 0.875rem 0.55rem;
}

.auth-input-group .auth-label {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  margin: 0;
  color: #78746c;
  font-size: 1rem;
  font-weight: 400;
  transform: translateY(-50%);
  transform-origin: left top;
  pointer-events: none;
  transition: transform 0.15s ease, color 0.15s ease;
}

.auth-input-group .auth-input:not(:placeholder-shown) + .auth-label {
  transform: translateY(-1.2rem) scale(0.78);
  color: #78746c;
}

.auth-input-group .auth-input:focus + .auth-label {
  transform: translateY(-1.2rem) scale(0.78);
  color: var(--brand-orange);
}

.auth-input {
  font-family: inherit;
  font-size: 1rem;
  color: #1c1a17;
  background-color: #f9f8f6;
  border: 1px solid #dde1e5;
  border-radius: 0.65rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.auth-input:focus {
  outline: none;
  background-color: #fff;
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 3px rgba(250, 118, 22, 0.16);
}

/* asp-validation-summary always renders a hidden placeholder even with nothing to say --
   <div class="validation-summary-valid"><ul><li style="display:none"></li></ul></div> -- normally
   kept invisible by jQuery Unobtrusive Validation, which this app never loads (server-only
   validation). Without that script nothing hides the container itself, only the one empty <li>,
   so the bare <ul>'s default browser margin/list-style showed through as a stray bullet on every
   page load with no error at all. Hide the whole thing outright. */
.validation-summary-valid {
  display: none;
}

/* The shared error-banner treatment for asp-validation-summary once it actually holds an error
   (Auth/Index's "Please enter email address!", Auth/Verify's "Incorrect code!"/lockout message,
   etc.) -- both pages consolidate every error for their one form into this single summary now,
   not also a duplicate per-field asp-validation-for span (removed from both .cshtml files). */
.validation-summary-errors {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  background-color: #fdecea;
  border-left: 3px solid #b3261e;
  border-radius: 0.65rem;
  color: #7a1712;
  font-size: 0.9rem;
}

.validation-summary-errors::before {
  content: "\26A0";
  flex: 0 0 auto;
  font-size: 1.05rem;
  line-height: 1.4;
  color: #b3261e;
}

.validation-summary-errors ul {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}

.validation-summary-errors li {
  line-height: 1.4;
}

.auth-legal a {
  color: inherit;
  text-decoration: underline;
}

/* Auth/Logout's own "Stay signed in" link (Pages/Auth/Logout.cshtml.css has the rest of that
   page's styling, and its own note on why this one rule lives here instead): an asp-page-touched
   <a> never receives CSS isolation's scope attribute, same reason as every other <a>/<form>/
   <input>/<label> rule already collected in this file. */
.auth-logout-cancel {
  display: inline-block;
  margin-top: 1rem;
  color: #9a968d;
  font-size: 0.85rem;
  text-decoration: underline;
}

.auth-logout-cancel:hover {
  color: var(--brand-violet);
}

/* Auth/SignedIn's inline "log out" link -- same CSS-isolation gotcha as .auth-logout-cancel
   above; SignedIn.cshtml.css has the rest of that page's styling and its own note on why. */
.auth-signedin-copy a {
  color: inherit;
  text-decoration: underline;
}

.auth-signedin-copy a:hover {
  color: var(--brand-violet);
}