/* SMEE theme for the Authelia sign-in portal (auth.bentests.com).
   Injected by nginx (sub_filter in /etc/nginx/sites-available/auth.bentests.com);
   Authelia itself is untouched. Targets MUI's stable "Mui*" class names and
   Authelia's element ids, never the generated css-xxxx classes. */

:root {
  --smee-navy: #16283c; --smee-navy-2: #24405c; --smee-red: #c62828; --smee-red-dark: #9e1f1f;
  --smee-gold: #b8923a; --smee-gold-2: #d4b36a; --smee-cream: #f5f3ee; --smee-ink: #1c232c; --smee-muted: #5d6875;
  --smee-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --smee-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
html, body { background: var(--smee-cream) !important; }
body, #root .MuiTypography-root, #root .MuiInputBase-root, #root .MuiFormLabel-root, #root .MuiButton-root {
  font-family: var(--smee-sans) !important;
}
#root { min-height: calc(100vh - 150px); }

/* ---------- SMEE header + help line (markup injected by nginx) ---------- */
.smee-top { background: linear-gradient(180deg, #1a2f46, var(--smee-navy)); border-bottom: 4px solid var(--smee-gold); }
.smee-top a { display: flex; align-items: center; gap: 14px; max-width: 1100px; margin: 0 auto; padding: 14px 20px; color: #fff; text-decoration: none; }
.smee-top img { width: 44px; height: 44px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.smee-top small { display: block; font: 600 11px var(--smee-sans); letter-spacing: 2px; text-transform: uppercase; color: var(--smee-gold-2); }
.smee-top b { display: block; font: 700 21px/1.2 var(--smee-serif); }
.smee-help { text-align: center; color: var(--smee-muted); font: 15px/1.6 var(--smee-sans); padding: 8px 20px 36px; }
.smee-help a { color: var(--smee-navy-2); font-weight: 600; }

/* Authelia's own top bar only holds the language picker: English only, so hide it */
#root header.MuiAppBar-root { display: none !important; }

/* ---------- the card ---------- */
#root .MuiContainer-maxWidthXs {
  background: #fff; border: 1px solid #e3e6ea; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(22,40,60,.05), 0 12px 36px rgba(22,40,60,.08);
  padding: 36px 32px 26px !important; margin-top: 44px !important; margin-bottom: 24px !important;
  max-width: 460px !important;
}
@media (max-width: 520px) {
  #root .MuiContainer-maxWidthXs { margin: 20px 12px !important; padding: 28px 20px 20px !important; border-radius: 14px; }
  .smee-top b { font-size: 18px; } .smee-top small { font-size: 9.5px; letter-spacing: 1.4px; }
}

/* logo / stock user icon at the top of the card */
#root #UserSvg { display: none !important; }
#root img[alt="Logo"], #root .MuiContainer-maxWidthXs img { width: 92px !important; height: 92px !important; max-height: none !important; }

/* headings */
#root .MuiTypography-h5 {
  font-family: var(--smee-serif) !important; font-weight: 700 !important; color: var(--smee-navy) !important;
  font-size: 28px !important; margin: 6px 0 4px !important;
}
#root .MuiTypography-h6 { font-family: var(--smee-serif) !important; color: var(--smee-navy) !important; }

/* text fields: bigger, rounder, SMEE focus colour */
#root .MuiOutlinedInput-root { border-radius: 10px !important; font-size: 17px !important; background: #fff; }
#root .MuiOutlinedInput-input { padding: 16px 14px !important; }
#root .MuiInputLabel-root { font-size: 17px !important; }
#root .MuiInputLabel-shrink { color: var(--smee-navy-2) !important; }
#root .MuiOutlinedInput-notchedOutline { border-color: #c9d0d8 !important; }
#root .Mui-focused .MuiOutlinedInput-notchedOutline { border-color: var(--smee-navy) !important; border-width: 2px !important; }
#root .Mui-error .MuiOutlinedInput-notchedOutline { border-color: var(--smee-red) !important; }
#root .MuiFormHelperText-root { font-size: 14px !important; }

/* main buttons: SMEE red, no shouting capitals */
#root .MuiButton-containedPrimary {
  background: var(--smee-red) !important; color: #fff !important; text-transform: none !important;
  font-size: 17px !important; font-weight: 700 !important; letter-spacing: .2px !important;
  padding: 12px 16px !important; border-radius: 10px !important; box-shadow: 0 2px 6px rgba(198,40,40,.25) !important;
}
#root .MuiButton-containedPrimary:hover { background: var(--smee-red-dark) !important; }
#root .MuiButton-containedPrimary.Mui-disabled { opacity: .55; }
#root .MuiButton-outlined, #root .MuiButton-text {
  text-transform: none !important; font-size: 16px !important; font-weight: 600 !important; border-radius: 10px !important;
  color: var(--smee-navy) !important; border-color: #c9d0d8 !important; padding: 11px 16px !important;
}
#root .MuiButton-containedSecondary, #root #cancel-button {
  text-transform: none !important; font-size: 16px !important; font-weight: 600 !important; border-radius: 10px !important;
  background: #fff !important; color: var(--smee-navy) !important; border: 1px solid #c9d0d8 !important; box-shadow: none !important;
  padding: 11px 16px !important;
}

/* links, checkbox */
#root .MuiLink-root { color: var(--smee-navy-2) !important; font-size: 15.5px !important; font-weight: 600; }
#root #reset-password-button { font-size: 16px !important; }
#root .MuiCheckbox-root.Mui-checked, #root .MuiCheckbox-root { color: var(--smee-navy) !important; }
#root .MuiFormControlLabel-label { font-size: 16px !important; color: var(--smee-ink); }

/* body text inside the card (e.g. "Check your email…") */
#root .MuiContainer-maxWidthXs .MuiTypography-body1 { font-size: 16.5px !important; line-height: 1.55 !important; color: var(--smee-ink); }

/* alerts / snackbars */
#root .MuiAlert-root, .MuiSnackbar-root .MuiAlert-root, .MuiAlert-root { border-radius: 10px !important; font-size: 15.5px !important; }

/* "Powered by Authelia" line: the SMEE header and help line replace it */
#root a[href*="authelia.com"] { display: none !important; }

/* keep the help line just under the card, not pushed off-screen */
#root { min-height: 0 !important; }
/* "Keep me signed in" on narrow screens: box and text side by side, left aligned */
#root .MuiFormControlLabel-root { align-items: center; text-align: left; margin-left: -9px; }
/* pop-up messages in SMEE colours */
.MuiAlert-filledInfo, .MuiAlert-standardInfo { background: var(--smee-navy) !important; color: #fff !important; }
.MuiAlert-filledSuccess, .MuiAlert-standardSuccess { background: #2e7d32 !important; color: #fff !important; }
.MuiAlert-filledError, .MuiAlert-standardError { background: var(--smee-red) !important; color: #fff !important; }
.MuiAlert-root .MuiAlert-icon { color: inherit !important; }
.MuiAlert-message { font-family: var(--smee-sans); font-size: 15.5px; line-height: 1.5; }
/* Authelia stretches each stage to full screen height, which pushed the help line off-screen */
#root [id$="-stage"] { min-height: 0 !important; }

/* The two reset pages share one button label ("Reset", worded "Continue" in the
   locale file, which is also what screen readers hear). Show each page its own
   clearer visible label. */
#reset-password-step1-stage #reset-button,
#reset-password-step2-stage #reset-button { font-size: 0 !important; }
#reset-password-step1-stage #reset-button::after { content: "Send me a link"; font-size: 17px; }
#reset-password-step2-stage #reset-button::after { content: "Set my password"; font-size: 17px; }
#reset-password-step1-stage #reset-button::after,
#reset-password-step2-stage #reset-button::after { white-space: nowrap; line-height: 1.2; }

/* Reset pages: stack the two buttons full width (main action on top) instead of
   side by side, so "Set my password" never gets squeezed on a phone. */
#root [id^="reset-password-step"] .MuiGrid-grid-xs-6:has(> #reset-button),
#root [id^="reset-password-step"] .MuiGrid-grid-xs-6:has(> #cancel-button) {
  flex-basis: 100% !important; max-width: 100% !important; width: 100% !important;
}
#root [id^="reset-password-step"] #reset-button,
#root [id^="reset-password-step"] #cancel-button { width: 100%; }