/* Forward Rise branding for the on-call sign-in page (GoAlert).
 *
 * GoAlert has no setting for a logo, a background or colours, and its
 * interface is compiled into the binary. This stylesheet is added to the page
 * by the proxy in front of it (oncall/nginx.conf) and dresses the sign-in
 * page as the support desk's is (brand/forwardrise.css): the mural, one
 * shadowed card, the Forward Rise logo, Sora for the heading and the orange
 * action colour.
 *
 * The card is the desk's, measure for measure (Ryan, 13 October 2026: "the
 * same size, dimensions and shadow as support"). The numbers are Chatwoot
 * v4.18's own for its sign-in page (app/javascript/v3/views/login/Index.vue
 * and the components it uses) with the desk's overrides:
 *
 *   card      512 wide, 12 corner, the desk's two-part shadow, 44 padding
 *   logo      44 high; 24 under it
 *   heading   Sora 600, 24 on a 32 line; 44 under it
 *   Google    48 high, 6 corner, 16 medium text, a 24 mark
 *   or        14 uppercase on a 20 line; 32 above it, 16 under it
 *   label     14 medium on a 24 line; 4 under it
 *   field     48 high, 6 corner, 14 text
 *   between   20
 *   button    48 high, 8 corner, 16 text
 *
 * With Google and a password both offered, that is 588 high, as the desk's.
 *
 * Every rule is scoped to the sign-in page: the page that holds a sign-in
 * form (form#auth-…). Nothing here touches GoAlert once someone is signed in
 * (that is app.css and menu.css).
 *
 * Lengths are in px: GoAlert sets its own root font size, so rem is not 16px
 * here.
 *
 * It depends on GoAlert's markup (v0.35.0: web/src/app/main/components/
 * Login.tsx). After an upgrade, look at the sign-in page: if the markup moved,
 * the page falls back to GoAlert's own look and still works.
 */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Sora:wght@500;600&display=swap");

/* ── The mural ────────────────────────────────────────────────────────── */
body:has(form[id^="auth-"]) {
  background: #0d1420 url("login-bg.webp") center / cover no-repeat fixed !important;
}

body:has(form[id^="auth-"]) #app > div {
  background: transparent !important;
}

/* ── The card ─────────────────────────────────────────────────────────── */
/* GoAlert pins the card 40% down and never centres it across; centre it. */
#app > div > div:has(form[id^="auth-"]) {
  position: fixed !important;
  inset: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: auto;
  transform: none !important;
  -webkit-transform: none !important;
}

.MuiCard-root:has(form[id^="auth-"]) {
  --fr-card: #ffffff;
  --fr-text: #2d3848; /* navy-600 */
  --fr-muted: #6b7486;
  --fr-field: #ffffff;
  --fr-line: #d5dae3;

  box-sizing: border-box;
  width: 100% !important;
  max-width: 512px !important;
  background: var(--fr-card) !important;
  color: var(--fr-text) !important;
  border-radius: 12px !important;
  box-shadow:
    0 2px 6px rgba(10, 14, 22, 0.35),
    0 28px 70px rgba(10, 14, 22, 0.6) !important;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Dark, as GoAlert is by default, when the device is. Every colour on the
 * card is set here, so it reads the same whatever GoAlert's own theme says. */
@media (prefers-color-scheme: dark) {
  .MuiCard-root:has(form[id^="auth-"]) {
    --fr-card: #121822;
    --fr-text: #f3f5f8;
    --fr-muted: #9aa3b5;
    --fr-field: #1a2230;
    --fr-line: #3a4458;
  }

  .MuiCard-root:has(form[id^="auth-"]) img[alt="GoAlert"]:not([class]) {
    content: url("forwardrise-logo-white.png") !important;
  }
}

.MuiCard-root:has(form[id^="auth-"]) .MuiCardContent-root {
  padding: 44px !important;
}

/* GoAlert spaces its rows with a grid's gutters; every space here is set by
 * the rules below instead. */
.MuiCard-root:has(form[id^="auth-"]) .MuiGrid-container {
  width: 100% !important;
  margin: 0 !important;
}

.MuiCard-root:has(form[id^="auth-"]) .MuiGrid-item {
  max-width: 100%;
  padding: 0 !important;
}

/* ── Logo and heading: stacked, as on the desk ────────────────────────── */
.MuiCard-root:has(form[id^="auth-"]) .MuiGrid-container:has(> .MuiGrid-item > img[alt="GoAlert"]) {
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.MuiCard-root:has(form[id^="auth-"]) img[alt="GoAlert"]:not([class]) {
  content: url("forwardrise-logo.png");
  height: 44px !important;
  width: auto;
  display: block;
}

.MuiCard-root:has(form[id^="auth-"]) h5 {
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Sora", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 24px !important;
  line-height: 32px !important;
  letter-spacing: 0 !important;
  color: var(--fr-text) !important;
}

.MuiCard-root:has(form[id^="auth-"]) h5 b {
  font-weight: 600;
}

/* The name comes from GoAlert's own setting ("Oncall"). */
.MuiCard-root:has(form[id^="auth-"]) h5 b::before {
  content: "Login to Forward Rise ";
}

/* ── The ways to sign in: Google first, then "or", then a password ────── */
.MuiCard-root:has(form[id^="auth-"]) .MuiGrid-item:has(> form#auth-oidc) {
  order: 1;
  margin-top: 44px;
}

.MuiCard-root:has(form[id^="auth-"]) .MuiGrid-item:has(> .MuiDivider-root) {
  order: 2;
  margin-top: 32px;
  gap: 8px;
}

.MuiCard-root:has(form[id^="auth-"]) .MuiGrid-item:has(> form#auth-basic) {
  order: 3;
  margin-top: 44px;
}

.MuiCard-root:has(form#auth-oidc) .MuiGrid-item:has(> form#auth-basic) {
  margin-top: 16px;
}

/* Anything else GoAlert shows here (another provider, an error) follows. */
.MuiCard-root:has(form[id^="auth-"]) .MuiCardContent-root > .MuiGrid-container > .MuiGrid-item:not(:has(> form#auth-oidc)):not(:has(> form#auth-basic)):not(:has(> .MuiDivider-root)) {
  order: 4;
  margin-top: 20px;
}

/* Sign in with Google: the desk's neutral button and Google's mark. */
.MuiCard-root:has(form[id^="auth-"]) form#auth-oidc button[type="submit"] {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 12px 16px !important;
  gap: 8px;
  border: 1px solid var(--fr-line) !important;
  border-radius: 6px !important;
  background: var(--fr-field) !important;
  color: var(--fr-text) !important;
  box-shadow: 0 1px 2px rgba(10, 14, 22, 0.05) !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.MuiCard-root:has(form[id^="auth-"]) form#auth-oidc button[type="submit"]::before {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  background: url("icons/google.svg") center / 20px 20px no-repeat;
}

.MuiCard-root:has(form[id^="auth-"]) form#auth-oidc button[type="submit"]:hover,
.MuiCard-root:has(form[id^="auth-"]) form#auth-oidc button[type="submit"]:focus-visible {
  background: rgba(147, 153, 176, 0.1) !important;
}

/* "or", between two ways to sign in. */
.MuiCard-root:has(form[id^="auth-"]) .MuiDivider-root {
  flex: 1;
  width: auto !important;
  border-color: var(--fr-line) !important;
}

.MuiCard-root:has(form[id^="auth-"]) .MuiDivider-root + .MuiTypography-root {
  padding: 0 !important;
  font-family: inherit !important;
  font-size: 14px !important;
  line-height: 20px !important;
  text-transform: uppercase;
  color: var(--fr-muted);
}

/* ── Fields: a label above a full-width box ───────────────────────────── */
.MuiCard-root:has(form[id^="auth-"]) form#auth-basic .MuiGrid-item + .MuiGrid-item {
  margin-top: 20px;
}

.MuiCard-root:has(form[id^="auth-"]) .MuiFormControl-root {
  width: 100%;
  margin: 0 !important;
  text-align: left;
}

.MuiCard-root:has(form[id^="auth-"]) .MuiInputLabel-root {
  position: static !important;
  transform: none !important;
  max-width: none !important;
  margin-bottom: 4px;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500;
  line-height: 24px !important;
  letter-spacing: 0 !important;
  color: var(--fr-text) !important;
}

/* Every field here is required; the star says nothing. */
.MuiCard-root:has(form[id^="auth-"]) .MuiInputLabel-asterisk {
  display: none;
}

.MuiCard-root:has(form[id^="auth-"]) .MuiOutlinedInput-root {
  border-radius: 6px !important;
  background: var(--fr-field) !important;
  color: var(--fr-text) !important;
  font-family: inherit !important;
}

.MuiCard-root:has(form[id^="auth-"]) .MuiOutlinedInput-input {
  box-sizing: border-box;
  height: 48px !important;
  padding: 12px !important;
  font-size: 14px !important;
  line-height: 24px !important;
}

.MuiCard-root:has(form[id^="auth-"]) .MuiOutlinedInput-notchedOutline {
  top: 0 !important;
  border-color: var(--fr-line) !important;
}

.MuiCard-root:has(form[id^="auth-"]) .MuiOutlinedInput-notchedOutline legend {
  display: none;
}

.MuiCard-root:has(form[id^="auth-"]) .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #f05828 !important; /* orange-500 */
  border-width: 2px !important;
}

/* ── The button: orange, full width ───────────────────────────────────── */
.MuiCard-root:has(form[id^="auth-"]) form:not(#auth-oidc) button[type="submit"] {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 12px 20px !important;
  border-radius: 8px !important;
  background: #f05828 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.MuiCard-root:has(form[id^="auth-"]) form:not(#auth-oidc) button[type="submit"]:hover,
.MuiCard-root:has(form[id^="auth-"]) form:not(#auth-oidc) button[type="submit"]:focus-visible {
  background: #d8451a !important; /* orange-600 */
}

.MuiCard-root:has(form[id^="auth-"]) button[type="submit"]:focus-visible {
  outline: 2px solid #136c99; /* sky-700 */
  outline-offset: 2px;
}