/* ============================================================
   Branding Mide per al portal d'accés (auth.marccarreramas.com)
   Injectat via Caddy replace-response. Sobreescriu l'estil MUI
   del portal SSO. 2026-09-07.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  --m-black: #0A0A0A;
  --m-white: #FFFFFF;
  --m-g50: #F7F7F7;
  --m-g100: #F0F0F0;
  --m-g200: #E5E5E5;
  --m-g300: #D1D1D1;
  --m-g500: #808080;
  --m-g700: #3D3D3D;
  --m-accent: #5B4FE8;
  --m-accent-600: #4A3FD4;
}

/* base */
html, body, #root {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
  background: var(--m-g50) !important;
}
* { font-family: inherit !important; }

/* targeta central */
.MuiPaper-root {
  background: var(--m-white) !important;
  border: 1px solid var(--m-g200) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

/* tipografia */
.MuiTypography-h5, .MuiTypography-h6 {
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--m-black) !important;
}
.MuiTypography-root { color: var(--m-black); }
.MuiTypography-colorTextSecondary, .MuiFormHelperText-root { color: var(--m-g500) !important; }

/* inputs */
.MuiOutlinedInput-root {
  border-radius: 4px !important;
  background: var(--m-white) !important;
}
.MuiOutlinedInput-notchedOutline { border-color: var(--m-g300) !important; }
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: var(--m-g500) !important; }
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--m-accent) !important;
  border-width: 2px !important;
}
.MuiInputLabel-root.Mui-focused { color: var(--m-accent) !important; }

/* botons */
.MuiButton-containedPrimary, .MuiButton-contained {
  background: var(--m-black) !important;
  color: var(--m-white) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  text-transform: none !important;
  font-weight: 600 !important;
  transition: background 150ms ease-out !important;
}
.MuiButton-containedPrimary:hover, .MuiButton-contained:hover { background: var(--m-g700) !important; }
.MuiButton-outlined, .MuiButton-text {
  color: var(--m-black) !important;
  border-color: var(--m-g300) !important;
  border-radius: 4px !important;
  text-transform: none !important;
  font-weight: 500 !important;
}
.MuiButton-text { color: var(--m-accent) !important; }

/* enllaços, checkbox, switches, spinners — accent indigo */
.MuiLink-root, a { color: var(--m-accent) !important; }
.MuiCheckbox-root.Mui-checked, .MuiRadio-root.Mui-checked { color: var(--m-accent) !important; }
.MuiSwitch-switchBase.Mui-checked { color: var(--m-accent) !important; }
.MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track { background: var(--m-accent) !important; }
.MuiCircularProgress-root { color: var(--m-accent) !important; }
.MuiLinearProgress-bar { background: var(--m-accent) !important; }

/* pantalla del codi d'un sol ús (OTC) i TOTP: dígits */
.MuiOutlinedInput-input { color: var(--m-black) !important; }

/* avatar/icona d'usuari */
.MuiAvatar-root { background: var(--m-accent) !important; }

/* logo: el fitxer d'assets del motor era un placeholder trencat — el pintem
   nosaltres (mide.js també en reescriu el src). El background cobreix el
   flaix d'imatge trencada abans que carregui el JS. */
img[alt="Logo"] {
  width: 56px !important;
  height: 56px !important;
  object-fit: contain;
  background: url('/branding/logo.svg') center / contain no-repeat;
  color: transparent; /* amaga el text alt si l'src falla */
}

/* fora la firma del motor SSO ("Powered by / Desarrollado por ...") */
a[href*="authelia.com"], a[href*="authelia.com"] + *,
p a[href*="authelia"] { display: none !important; }