/* jg-casa sign-in portal (auth.jg-casa.com): the Pocket theme of the home page,
   Mail and Helper. Soft white / near-black paper, white cards with a soft lip,
   Pocket blue accent, Pocket yellow glow orbs, self-hosted Nunito.
   Authelia v4.39 is a MUI SPA, so overrides need !important to beat MUI's
   runtime CSS-in-JS. Served same-origin as /authelia-theme.css so the portal's
   `style-src 'self'` CSP allows it (injected via nginx sub_filter).
   Light/dark follows the choice saved on jg-casa.com (see /jg-theme.js), else the system. */

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fonts/Nunito.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --jg-paper: #f7f8fa;
  --jg-surface: #ffffff;
  --jg-surface-2: #eef2f6;
  --jg-ink: #1e2a35;
  --jg-muted: #56677a;
  --jg-line: #cdd6df;
  --jg-line-soft: #e3e8ee;
  --jg-accent: #3b82c4;
  --jg-accent-text: #275d94;
  --jg-accent-soft: #e3ecfa;
  --jg-ring: #9cc0e3;
  --jg-on-bg: #275d94;
  --jg-on-ink: #ffffff;
  --jg-ok: #1d7a4c;
  --jg-ok-soft: #e4f3ea;
  --jg-off: #b3261e;
  --jg-off-soft: #fdeeee;
  --jg-warn: #8a5a00;
  --jg-warn-soft: #fdf3dc;
  --jg-glow-core: #ffd650;
  --jg-glow-mid: #fcbe28;
  --jg-glow-halo: #fff0b4;
  --jg-glow-opacity: .4;
  --jg-lip: 0 2px 0 var(--jg-line);
  --jg-shadow: 0 10px 30px rgba(20, 32, 48, .10);
  --jg-font: "Nunito", ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
:root[data-theme=dark] {
  color-scheme: dark;
  --jg-paper: #0a0c0f;
  --jg-surface: #13161b;
  --jg-surface-2: #1c2129;
  --jg-ink: #e8edf2;
  --jg-muted: #9aa7b5;
  --jg-line: #2b323c;
  --jg-line-soft: #20262e;
  --jg-accent: #5fa3e0;
  --jg-accent-text: #8dbfee;
  --jg-accent-soft: #172a45;
  --jg-ring: #3d6f9e;
  --jg-on-bg: #5fa3e0;
  --jg-on-ink: #0a0c0f;
  --jg-ok: #6fcf97;
  --jg-ok-soft: #12261b;
  --jg-off: #ff8f8f;
  --jg-off-soft: #2c1616;
  --jg-warn: #f2c46b;
  --jg-warn-soft: #2a2110;
  --jg-glow-core: #b8900e;
  --jg-glow-mid: #8a6a10;
  --jg-glow-halo: #3a2e0c;
  --jg-glow-opacity: .22;
  --jg-lip: 0 2px 0 #050607;
  --jg-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    color-scheme: dark;
    --jg-paper: #0a0c0f;
    --jg-surface: #13161b;
    --jg-surface-2: #1c2129;
    --jg-ink: #e8edf2;
    --jg-muted: #9aa7b5;
    --jg-line: #2b323c;
    --jg-line-soft: #20262e;
    --jg-accent: #5fa3e0;
    --jg-accent-text: #8dbfee;
    --jg-accent-soft: #172a45;
    --jg-ring: #3d6f9e;
    --jg-on-bg: #5fa3e0;
    --jg-on-ink: #0a0c0f;
    --jg-ok: #6fcf97;
    --jg-ok-soft: #12261b;
    --jg-off: #ff8f8f;
    --jg-off-soft: #2c1616;
    --jg-warn: #f2c46b;
    --jg-warn-soft: #2a2110;
    --jg-glow-core: #b8900e;
    --jg-glow-mid: #8a6a10;
    --jg-glow-halo: #3a2e0c;
    --jg-glow-opacity: .22;
    --jg-lip: 0 2px 0 #050607;
    --jg-shadow: 0 12px 32px rgba(0, 0, 0, .5);
  }
}

/* ---- Page, type, orbs ---- */
html, body { background: var(--jg-paper) !important; color: var(--jg-ink) !important; }
body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
#root, #root > div, #root main { background: transparent !important; }
body, body *:not(svg):not(path) { font-family: var(--jg-font) !important; }
body::before {
  content: "";
  position: fixed;
  inset: -20vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(34vmax 30vmax at 22% 18%, var(--jg-glow-core), transparent 70%),
    radial-gradient(28vmax 26vmax at 82% 30%, var(--jg-glow-mid), transparent 70%),
    radial-gradient(40vmax 34vmax at 60% 88%, var(--jg-glow-halo), transparent 72%);
  filter: blur(28px);
  opacity: var(--jg-glow-opacity);
  animation: jg-orbdrift 26s ease-in-out infinite alternate;
}
@keyframes jg-orbdrift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(3vmax, -2vmax, 0) scale(1.06); }
  100% { transform: translate3d(-2vmax, 2vmax, 0) scale(1); }
}

.MuiTypography-root { color: var(--jg-ink) !important; letter-spacing: 0 !important; }
.MuiTypography-h1, .MuiTypography-h2, .MuiTypography-h3,
.MuiTypography-h4, .MuiTypography-h5, .MuiTypography-h6 { font-weight: 800 !important; letter-spacing: -0.01em !important; line-height: 1.2 !important; }
.MuiTypography-h5 { font-size: 1.3rem !important; }
.MuiTypography-h6 { font-size: 1.1rem !important; }
.MuiTypography-body1 { font-weight: 600 !important; line-height: 1.5 !important; }
.MuiTypography-body2, .MuiTypography-subtitle1, .MuiTypography-subtitle2, .MuiTypography-caption,
.MuiTypography-colorTextSecondary, .MuiFormHelperText-root { color: var(--jg-muted) !important; font-weight: 600 !important; line-height: 1.5 !important; }

/* ---- Top bar: no slab, just the title and pill controls on the paper ---- */
.MuiAppBar-root {
  background: transparent !important;
  color: var(--jg-ink) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.MuiAppBar-positionFixed {
  background: color-mix(in srgb, var(--jg-paper) 82%, transparent) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
}
.MuiToolbar-root .MuiTypography-root { font-weight: 800 !important; font-size: 1.15rem !important; }

/* ---- Cards ---- */
.MuiPaper-root,
.MuiCard-root {
  background: var(--jg-surface) !important;
  color: var(--jg-ink) !important;
  background-image: none !important;
  border: 1px solid var(--jg-line-soft) !important;
  border-radius: 22px !important;
  box-shadow: var(--jg-lip) !important;
}
.MuiAppBar-root.MuiPaper-root { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.MuiAppBar-positionFixed.MuiPaper-root { background: color-mix(in srgb, var(--jg-paper) 82%, transparent) !important; }
.MuiDrawer-paper { border-radius: 0 22px 22px 0 !important; border: 0 !important; box-shadow: var(--jg-shadow) !important; padding: 6px 0 !important; }
.MuiDialog-paper { border-radius: 22px !important; box-shadow: var(--jg-lip), var(--jg-shadow) !important; }
.MuiPopover-paper, .MuiMenu-paper { border-radius: 16px !important; box-shadow: var(--jg-lip), var(--jg-shadow) !important; }
.MuiBackdrop-root:not(.MuiBackdrop-invisible) { background-color: rgba(10, 12, 15, .45) !important; }
.MuiDivider-root { border-color: var(--jg-line-soft) !important; }
/* Bordered info boxes inside cards (Security page Name / Email / Password).
   Borderless boxes are unaffected: only the colour and radius change. */
#root .MuiPaper-root .MuiBox-root { border-color: var(--jg-line) !important; border-radius: 14px !important; }

/* ---- Menus and lists ---- */
.MuiListItemButton-root, .MuiMenuItem-root {
  margin: 2px 8px !important;
  border-radius: 14px !important;
  min-height: 44px !important;
}
.MuiListItemButton-root.Mui-selected, .MuiMenuItem-root.Mui-selected { background: var(--jg-accent-soft) !important; }
.MuiListItemButton-root.Mui-selected .MuiTypography-root, .MuiMenuItem-root.Mui-selected { color: var(--jg-accent-text) !important; font-weight: 800 !important; }
.MuiListItemButton-root:hover, .MuiMenuItem-root:hover { background: var(--jg-surface-2) !important; }
.MuiListItemText-primary { font-weight: 700 !important; }
.MuiListItemIcon-root { color: var(--jg-accent-text) !important; }

/* ---- Text fields ---- */
.MuiOutlinedInput-root, .MuiFilledInput-root { border-radius: 14px !important; background: var(--jg-surface) !important; }
.MuiOutlinedInput-notchedOutline { border-color: var(--jg-line) !important; }
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: var(--jg-ring) !important; }
.MuiOutlinedInput-root.Mui-focused { box-shadow: 0 0 0 3px var(--jg-accent-soft) !important; }
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: var(--jg-accent) !important; border-width: 1px !important; }
.MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline { border-color: var(--jg-off) !important; }
.MuiInputLabel-root { color: var(--jg-muted) !important; font-weight: 700 !important; }
.MuiInputLabel-root.Mui-focused { color: var(--jg-accent-text) !important; }
.MuiInputLabel-root.Mui-error, .MuiFormHelperText-root.Mui-error { color: var(--jg-off) !important; }
.MuiInputBase-input { color: var(--jg-ink) !important; font-weight: 600 !important; }
.MuiInputBase-input::placeholder { color: var(--jg-muted) !important; opacity: 1 !important; }
.MuiInputAdornment-root .MuiSvgIcon-root, .MuiInputAdornment-root .MuiIconButton-root { color: var(--jg-muted) !important; }
/* The one-time-code boxes in the 2FA prompt. */
input[autocomplete="one-time-code"], .otp-input input, .MuiOtpInput-Box input, input[inputmode="numeric"] {
  border-radius: 14px !important;
  font-weight: 800 !important;
}

/* ---- Buttons ---- */
.MuiButton-root {
  min-height: 44px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  text-transform: none !important;
  font-size: .95rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}
.MuiButton-contained,
.MuiButton-containedPrimary {
  background: var(--jg-on-bg) !important;
  color: var(--jg-on-ink) !important;
  box-shadow: var(--jg-lip) !important;
}
.MuiButton-contained:hover,
.MuiButton-containedPrimary:hover { filter: brightness(1.08); }
.MuiButton-contained svg, .MuiButton-contained .MuiSvgIcon-root { color: inherit !important; }
.MuiButton-containedError, .MuiButton-containedSecondary { background: var(--jg-off-soft) !important; color: var(--jg-off) !important; }
.MuiButton-outlined {
  border: 1px solid var(--jg-line) !important;
  background: var(--jg-surface) !important;
  color: var(--jg-ink) !important;
  box-shadow: var(--jg-lip) !important;
}
.MuiButton-outlined:hover { border-color: var(--jg-ring) !important; }
.MuiButton-outlinedError { color: var(--jg-off) !important; }
.MuiButton-text,
.MuiButton-textPrimary { color: var(--jg-accent-text) !important; }
.MuiButton-text:hover { background: var(--jg-accent-soft) !important; }
.MuiButton-root:active { transform: translateY(1px); }
.MuiButton-root.Mui-disabled { opacity: .5 !important; }
.MuiIconButton-root { color: var(--jg-ink) !important; border-radius: 999px !important; min-width: 44px; min-height: 44px; }
.MuiIconButton-root:hover { background: var(--jg-surface-2) !important; }
.MuiToolbar-root .MuiIconButton-root { border: 1px solid var(--jg-line) !important; background: var(--jg-surface) !important; box-shadow: var(--jg-lip) !important; }
.MuiToolbar-root .MuiIconButton-root .MuiSvgIcon-root { color: var(--jg-accent-text) !important; }

/* ---- Links ---- */
.MuiLink-root, a { color: var(--jg-accent-text) !important; font-weight: 800 !important; text-decoration: none !important; }
.MuiLink-root:hover, a:hover { text-decoration: underline !important; }
/* Small footer link ("Powered by Authelia"): keep a 24px tap target. */
#root a[href*="authelia.com"] { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; }
:focus-visible { outline: 2px solid var(--jg-accent) !important; outline-offset: 2px !important; }

/* ---- Toggles, steps, progress ---- */
.MuiCheckbox-root, .MuiRadio-root { color: var(--jg-muted) !important; }
.MuiCheckbox-root.Mui-checked,
.MuiRadio-root.Mui-checked { color: var(--jg-accent) !important; }
.MuiSwitch-switchBase.Mui-checked { color: var(--jg-on-bg) !important; }
.MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track { background-color: var(--jg-accent) !important; opacity: .55 !important; }
.MuiStepIcon-root { color: var(--jg-surface-2) !important; }
.MuiStepIcon-root.Mui-active, .MuiStepIcon-root.Mui-completed { color: var(--jg-on-bg) !important; }
.MuiStepIcon-text { fill: var(--jg-ink) !important; font-weight: 800 !important; }
.MuiStepIcon-root.Mui-active .MuiStepIcon-text { fill: var(--jg-on-ink) !important; }
.MuiStepLabel-label { color: var(--jg-muted) !important; font-weight: 700 !important; }
.MuiStepLabel-label.Mui-active, .MuiStepLabel-label.Mui-completed { color: var(--jg-ink) !important; font-weight: 800 !important; }
.MuiCircularProgress-root, .MuiCircularProgress-colorPrimary { color: var(--jg-accent) !important; }
.MuiLinearProgress-root { background-color: var(--jg-surface-2) !important; border-radius: 999px !important; }
.MuiLinearProgress-barColorPrimary { background-color: var(--jg-accent) !important; }
.MuiChip-root { border-radius: 999px !important; background: var(--jg-accent-soft) !important; color: var(--jg-accent-text) !important; font-weight: 800 !important; }
.MuiTooltip-tooltip { border-radius: 10px !important; background: var(--jg-ink) !important; color: var(--jg-paper) !important; font-weight: 700 !important; font-size: .8rem !important; }
.MuiTableCell-root { border-color: var(--jg-line-soft) !important; color: var(--jg-ink) !important; }
.MuiTableCell-head { color: var(--jg-muted) !important; font-weight: 800 !important; }

/* ---- Icons ---- */
.MuiSvgIcon-root { color: var(--jg-muted) !important; }
.MuiSvgIcon-colorPrimary { color: var(--jg-accent-text) !important; }
.MuiSvgIcon-colorSuccess { color: var(--jg-ok) !important; }
.MuiSvgIcon-colorError { color: var(--jg-off) !important; }
.MuiSvgIcon-colorWarning { color: var(--jg-warn) !important; }
/* The large user icon at the top of the sign-in card. */
#root .MuiSvgIcon-fontSizeLarge, #root svg[data-testid="AccountCircleIcon"] { color: var(--jg-accent-text) !important; }
#UserSvg, #UserSvg path { fill: var(--jg-accent-text) !important; }
.information-icon { color: var(--jg-accent) !important; }
.success-icon { color: var(--jg-ok) !important; }
.failure-icon { color: var(--jg-off) !important; }
.MuiAvatar-root { background: var(--jg-accent-soft) !important; color: var(--jg-accent-text) !important; font-weight: 800 !important; }

/* The second-factor method box (One-Time Password / passkey) is a bordered
   MUI Box in the sign-in column, not a Paper; give it the card look. */
#root .MuiGrid-direction-xs-column > .MuiBox-root {
  border-color: var(--jg-line-soft) !important;
  border-radius: 22px !important;
}
#root .MuiGrid-direction-xs-column > .MuiBox-root:has(.MuiTypography-root) {
  background: var(--jg-surface) !important;
  box-shadow: var(--jg-lip) !important;
}

/* ---- Alerts and snackbars ---- */
.MuiAlert-root { border-radius: 16px !important; border: 0 !important; font-weight: 700 !important; box-shadow: var(--jg-lip) !important; }
.MuiAlert-standardError, .MuiAlert-filledError { background: var(--jg-off-soft) !important; color: var(--jg-off) !important; }
.MuiAlert-standardSuccess, .MuiAlert-filledSuccess { background: var(--jg-ok-soft) !important; color: var(--jg-ok) !important; }
.MuiAlert-standardInfo, .MuiAlert-filledInfo { background: var(--jg-accent-soft) !important; color: var(--jg-accent-text) !important; }
.MuiAlert-standardWarning, .MuiAlert-filledWarning { background: var(--jg-warn-soft) !important; color: var(--jg-warn) !important; }
.MuiAlert-root .MuiSvgIcon-root, .MuiAlert-root .MuiTypography-root { color: inherit !important; }
.MuiSnackbarContent-root { border-radius: 16px !important; }

/* ---- Account links on the settings pages (injected, see /jg-theme.js) ---- */
.jg-account-nav {
  position: fixed;
  top: max(6px, calc((var(--jg-bar-h, 64px) - 44px) / 2));
  right: 16px;
  z-index: 1150;
  display: flex;
  gap: 8px;
}
.jg-account-nav[hidden] { display: none !important; }
.jg-account-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid var(--jg-line);
  border-radius: 999px;
  background: var(--jg-surface);
  box-shadow: var(--jg-lip);
  color: var(--jg-ink) !important;
  font-size: .9rem;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.jg-account-nav a:hover { border-color: var(--jg-ring); color: var(--jg-accent-text) !important; }
html.jg-has-account-nav .MuiToolbar-root { padding-right: 200px !important; }

/* ---- Always-visible escape hatch (injected after #root) so a rejected or
   access-denied user can always reach a clean login. ---- */
.jg-reset-link {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 1000;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700 !important;
  color: var(--jg-muted) !important;
  white-space: nowrap;
}
.jg-reset-link:hover { color: var(--jg-accent-text) !important; background: var(--jg-surface); }

/* ---- Passkey enrolment helper (shown only on the WebAuthn/2FA routes). Fixed
   as a slim banner at the TOP so it never overlaps the centred sign-in card. ---- */
#jg-passkey-help { position: fixed; top: 0; left: 0; right: 0; z-index: 1150; display: flex; justify-content: center; padding: 8px 12px; pointer-events: none; }
/* The [hidden] attribute must beat the ID selector's display:flex, or the JS
   auth-gate (help.hidden = true) can never actually hide the banner. */
#jg-passkey-help[hidden] { display: none !important; }
.jg-pk-card {
  pointer-events: auto;
  width: min(96vw, 720px);
  display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
  padding: 12px 16px;
  border: 1px solid var(--jg-line-soft);
  border-radius: 20px;
  background: var(--jg-surface);
  color: var(--jg-ink);
  box-shadow: var(--jg-lip), var(--jg-shadow);
}
.jg-pk-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jg-pk-head strong { font-size: .98rem; font-weight: 800; }
.jg-pk-sub { font-size: .8rem; color: var(--jg-muted); font-weight: 600; line-height: 1.4; }
.jg-pk-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jg-pk-label { font-size: .8rem; font-weight: 800; color: var(--jg-muted); }
#jg-pk-code { min-width: 5ch; padding: 4px 14px; border-radius: 14px; background: var(--jg-surface-2); color: var(--jg-ink); font-size: 1.35rem; font-weight: 800; letter-spacing: .14em; text-align: center; font-variant-numeric: tabular-nums; }
#jg-pk-refresh { min-height: 44px; padding: 0 16px; border: 1px solid var(--jg-line); border-radius: 999px; background: var(--jg-surface); color: var(--jg-ink); box-shadow: var(--jg-lip); font-size: .88rem; font-weight: 800; cursor: pointer; }
#jg-pk-refresh:hover { border-color: var(--jg-ring); color: var(--jg-accent-text); }
#jg-pk-note { font-size: .8rem; color: var(--jg-muted); font-weight: 600; }
/* Nudge the portal content down so the banner never covers the avatar. */
body:has(#jg-passkey-help:not([hidden])) #root { padding-top: 88px; }
html.jg-has-account-nav #jg-passkey-help { top: var(--jg-bar-h, 64px); }
html.jg-has-account-nav body:has(#jg-passkey-help:not([hidden])) #root { padding-top: var(--jg-pk-h, 0px); }

@media (max-width: 620px) {
  .jg-account-nav { right: 10px; gap: 6px; }
  /* Settings cards span the full grid cell on phones; keep them off the edges. */
  html.jg-has-account-nav #root .MuiGrid-grid-xs-12 > .MuiPaper-root { margin-inline: 12px; }
  .jg-account-nav a { padding: 0 12px; font-size: .84rem; }
  html.jg-has-account-nav .MuiToolbar-root { padding-right: 160px !important; }
  .jg-pk-card { justify-content: center; }
  .MuiPaper-root.MuiPaper-rounded:not(.MuiDrawer-paper) { border-radius: 20px !important; }
}
@media (forced-colors: active) {
  body::before { display: none; }
  .MuiPaper-root, .MuiButton-root, .jg-account-nav a { border: 1px solid CanvasText !important; box-shadow: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .MuiButton-root:active { transform: none; }
}