/*
 * Locoum branding for the Authelia portal.
 * Injected by the `authelia-portal` nginx (see portal/nginx.conf) and served from /locoum/.
 * Authelia has no official colour theming: these rules target MUI's stable `Mui*` class
 * names and Authelia's element ids. Re-check the portal after every Authelia upgrade.
 */

@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("/locoum/fonts/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("/locoum/fonts/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("/locoum/fonts/poppins-latin-600-normal.woff2") format("woff2"); }

:root {
  --locoum-teal: #0E6E68;
  --locoum-teal-strong: #0B5854;
  --locoum-ink: #0F172A;
  --locoum-muted: #475569;
  --locoum-line: #E2E8F0;
  --locoum-page: #F8FAFC;
}

/* Typography everywhere */
body,
.MuiTypography-root,
.MuiButton-root,
.MuiInputBase-root,
.MuiFormLabel-root,
.MuiFormControlLabel-label,
.MuiAlert-root {
  font-family: "Poppins", system-ui, sans-serif !important;
}

body {
  background: var(--locoum-page) !important;
  color: var(--locoum-ink);
}

/* Header: the Dashboard's teal bar with the white Locoum logo */
header.MuiAppBar-root {
  background: var(--locoum-teal) url("/locoum/locoum-logo-white.svg") no-repeat 24px center / auto 15px !important;
  color: #FFFFFF !important;
  min-height: 52px;
  justify-content: center;
}
header.MuiAppBar-root .MuiToolbar-root { min-height: 52px; }
header.MuiAppBar-root .MuiTypography-root,
header.MuiAppBar-root .MuiIconButton-root,
#language-button { color: #FFFFFF !important; }

/* Login card */
#first-factor-stage { padding: 40px 16px 48px; }
#first-factor-stage > .MuiContainer-root {
  max-width: 420px;
  background: #FFFFFF;
  border: 1px solid var(--locoum-line);
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
  padding: 0 32px 28px;
  overflow: hidden;
}
/* Locoum illustration on top of the card */
#first-factor-stage > .MuiContainer-root::before {
  content: "";
  display: block;
  height: 150px;
  margin: 0 -32px 8px;
  background: #F3F0E8 url("/locoum/hero.webp") no-repeat 85% 100% / cover;
}
#first-factor-stage img {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  margin-top: -40px;
  border: 4px solid #FFFFFF;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}
#first-factor-stage h5.MuiTypography-h5 {
  font-weight: 600 !important;
  font-size: 22px !important;
  color: var(--locoum-ink);
}

/* Fields */
.MuiOutlinedInput-root { border-radius: 12px !important; }
.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline { border-color: #CBD5E1; }
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: var(--locoum-muted); }
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--locoum-teal) !important;
  border-width: 2px;
}
.MuiInputLabel-root.Mui-focused,
.MuiFormLabel-root.Mui-focused { color: var(--locoum-teal) !important; }

/* Checkbox */
.MuiCheckbox-root.Mui-checked,
.MuiRadio-root.Mui-checked { color: var(--locoum-teal) !important; }

/* Primary buttons (sign-in and the other stages) */
.MuiButton-containedPrimary,
#sign-in-button {
  background-color: var(--locoum-teal) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  text-transform: none !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  min-height: 46px;
}
.MuiButton-containedPrimary:hover,
#sign-in-button:hover { background-color: var(--locoum-teal-strong) !important; }
.MuiButton-containedPrimary.Mui-disabled { opacity: 0.6; color: #FFFFFF !important; }
.MuiButton-outlinedPrimary,
.MuiButton-textPrimary { color: var(--locoum-teal) !important; border-color: var(--locoum-teal) !important; }

/* Links and focus */
a.MuiLink-root { color: var(--locoum-teal) !important; }
/* "Powered by Authelia" footer: one discreet line */
#first-factor-stage .MuiGrid-grid-xs-4 { flex-basis: auto !important; max-width: none !important; }
#first-factor-stage .MuiGrid-grid-xs-4 a.MuiLink-root { color: #64748B !important; white-space: nowrap; }
.MuiButtonBase-root:focus-visible,
a:focus-visible { outline: 2px solid var(--locoum-teal); outline-offset: 2px; }

/* Loading indicator */
.MuiCircularProgress-root { color: var(--locoum-teal) !important; }

/* Phones: full-width card */
@media (max-width: 480px) {
  #first-factor-stage { padding: 16px 12px 32px; }
  #first-factor-stage > .MuiContainer-root { padding: 0 20px 24px; border-radius: 16px; }
  #first-factor-stage > .MuiContainer-root::before { height: 120px; margin: 0 -20px 8px; }
  header.MuiAppBar-root { background-position: 16px center !important; }
}