/*
 * Custom styling for the Authelia login portal at auth.sosldev.aappinstruments.org.
 *
 * Loaded by a <link rel="stylesheet"> tag that Caddy injects into every
 * Authelia HTML response via the replace-response plugin (see Caddyfile,
 * auth.{$SOSL_DOMAIN}:4441 site block). External CSS is required because
 * Authelia's CSP (style-src 'self' nonce-…) silently blocks inline
 * <style> tags that lack the per-request nonce.
 *
 * Iterate by editing this file — no Caddy restart required. Just hard-
 * refresh (Ctrl/Cmd + Shift + R) the browser. Cache-Control: no-store is
 * set on /_brand/*.css in the Caddyfile so Cloudflare doesn't edge-cache
 * the file either.
 */

/* --------------------------------------------------------------------------
 * Background image — scoped to the login (#form-login) and 2FA OTP
 * (#otp-input) pages only, via :has(). The IDs are hardcoded in upstream
 * Authelia and exercised by their e2e tests, so they're stable across
 * minor upgrades. :has() is supported by Chrome 105+, Safari 15.4+,
 * Firefox 121+ (all 2022-2024).
 *
 * Drop your image at caddy/brand/login-bg.jpg (4K JPG recommended,
 * < 3 MB for fast first-paint). Replace the filename here if you'd
 * rather use something else.
 * -------------------------------------------------------------------------- */
html:has(#form-login, #otp-input) {
  background-image: url('/_brand/login-bg.jpg') !important;
  background-size: cover !important;
  background-position: 50% 50% !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  background-color: #0d1117 !important;
  min-height: 100vh;
}

/* On the bg-photo routes, make every Material-UI wrapper transparent so
 * the <html>-level background actually shows through. The form-card
 * rules below paint the form opaque on top. */
html:has(#form-login, #otp-input) :is(
  body,
  #root,
  #root > div,
  #root > div > div,
  .MuiAppBar-root
) {
  background-color: transparent !important;
}

/* --------------------------------------------------------------------------
 * Form-card panel — white panel with a soft drop-shadow so the form pops
 * against the photo. Authelia's LoginLayout renders no <Paper>/<Card>
 * itself; the "card" look is created entirely by these rules. Scoped via
 * stable upstream IDs (#first-factor-stage, #second-factor-stage) that
 * the project uses in its e2e tests — safe across minor upgrades.
 * Applied on every auth route so the form is consistently legible.
 * -------------------------------------------------------------------------- */
#first-factor-stage > .MuiContainer-root,
#second-factor-stage > .MuiContainer-root {
  background: #FFFFFF !important;
  padding: 2rem !important;
  border-radius: 5px !important;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px !important;
}

/* Logo image — Authelia always serves the override at /static/media/logo.png
 * regardless of how the surrounding DOM is nested, so targeting via the
 * src attribute is the most stable hook (CSS class hashes change between
 * upgrades). Drop your logo at authelia/assets/logo.png. */
img[src*="/static/media/logo"] {
  width: 100% !important;
  margin: 0 !important;
  margin-bottom: 8px !important;
}

/* Hide the WebAuthn Credentials panel on the user settings page.
 * webauthn.disable: true in authelia/configuration.yml makes the
 * matching "Add" button non-functional. Targets the Paper that contains
 * the stable upstream id #webauthn-credential-add. */
.MuiPaper-root:has(#webauthn-credential-add) {
  display: none !important;
}