/* Goldbell branding overrides for Authelia portal.
   Loaded by nginx sub_filter on auth.mhub.goldbell.com.sg. */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/branding/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/branding/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --gb-gold-dark:  #B87A10;   /* titles only */
  --gb-gold:       #FCB72D;   /* accents on small details */
  --gb-ink:        #0f172a;
  --gb-slate-700:  #334155;
  --gb-slate-500:  #64748b;
  --gb-line:       #e2e8f0;
  --gb-card:       #ffffff;
  --gb-bg:         #f8fafc;
}

html, body, #root, .MuiTypography-root, .MuiInputBase-root, .MuiButton-root,
input, button, select, textarea {
  font-family: 'Manrope', Calibri, 'Helvetica Neue', Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--gb-bg) !important;
  color: var(--gb-ink) !important;
}

/* Drop the dark/coloured Authelia hero strip — keep the page clean. */
header, .MuiAppBar-root, [class*="HeroLayout"] > div:first-child,
[class*="LoginPortalLayout"] > div:first-child,
.LoginLayout-header, .Brand-default {
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: none !important;
}

/* Center the main card (login portal) — white surface with subtle border. */
main, [class*="LoginLayout-content"], [class*="HeroLayout-content"] {
  background: var(--gb-bg) !important;
}

/* Style only the main login card. Leave snackbars, alerts, menus, and
   tooltips untouched so error toasts retain their notistack colours. */
[class*="MuiPaper-root"]:not([class*="MuiSnackbar"]):not([class*="MuiAlert"]):not([class*="notistack"]):not([class*="MuiMenu"]):not([class*="MuiPopover"]):not([class*="MuiTooltip"]),
[class*="LoginLayout-paper"] {
  background: var(--gb-card) !important;
  border: 1px solid var(--gb-line) !important;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04), 0 1px 3px 0 rgb(0 0 0 / 0.06) !important;
  border-radius: 16px !important;
}

/* Make sure error/info/warning/success toasts stay legible regardless of
   the body-text colour override below. */
[class*="MuiAlert-standardError"], [class*="notistack-MuiContent-error"] {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border: 1px solid #fecaca !important;
}
[class*="MuiAlert-standardWarning"], [class*="notistack-MuiContent-warning"] {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fde68a !important;
}
[class*="MuiAlert-standardSuccess"], [class*="notistack-MuiContent-success"] {
  background: #dcfce7 !important;
  color: #14532d !important;
  border: 1px solid #bbf7d0 !important;
}
[class*="MuiAlert-standardInfo"], [class*="notistack-MuiContent-info"] {
  background: #e0f2fe !important;
  color: #075985 !important;
  border: 1px solid #bae6fd !important;
}
[class*="MuiAlert-root"] *, [class*="notistack-MuiContent"] * {
  color: inherit !important;
}

/* Titles in near-black (matches MP/UTM body ink). */
h1, h2, h3, .MuiTypography-h1, .MuiTypography-h2, .MuiTypography-h3, .MuiTypography-h5, .MuiTypography-h6 {
  color: var(--gb-ink) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
}

/* Body / labels / hints in slate. */
p, span, label, .MuiTypography-body1, .MuiTypography-body2,
.MuiFormHelperText-root, .MuiInputLabel-root {
  color: var(--gb-slate-700) !important;
}

/* Inputs: white with slate border + gold ring on focus. */
.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
  border-color: var(--gb-line) !important;
}
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: #cbd5e1 !important;
}
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--gb-gold) !important;
  border-width: 2px !important;
}
.MuiInputLabel-root.Mui-focused {
  color: var(--gb-gold-dark) !important;
}

/* Primary "Sign in" button: gold accent. */
.MuiButton-containedPrimary, .MuiButton-contained {
  background-color: var(--gb-gold) !important;
  color: var(--gb-ink) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.MuiButton-containedPrimary:hover, .MuiButton-contained:hover {
  background-color: #FCC03A !important;  /* brand-400 */
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.08) !important;
}

/* Text/inline links: deep gold (titles colour). */
a, .MuiLink-root, .MuiButton-text {
  color: var(--gb-gold-dark) !important;
  text-decoration: none !important;
}
a:hover, .MuiLink-root:hover, .MuiButton-text:hover {
  text-decoration: underline !important;
}

/* Checkbox accent. */
.MuiCheckbox-root.Mui-checked, .MuiSwitch-root .Mui-checked {
  color: var(--gb-gold) !important;
}

/* Footer / version line. */
[class*="Footer"], footer {
  color: var(--gb-slate-500) !important;
  font-size: 12px !important;
}