/*
 * 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; }

/* Passkey sign-in: secondary outlined button under the password sign-in button */
#passkey-sign-in-button.MuiButton-containedPrimary {
  background-color: #FFFFFF !important;
  color: var(--locoum-teal) !important;
  border: 1px solid var(--locoum-teal);
}
#passkey-sign-in-button.MuiButton-containedPrimary:hover { background-color: rgba(14, 110, 104, 0.08) !important; }
#passkey-sign-in-button.MuiButton-containedPrimary.Mui-disabled { opacity: 0.6; color: var(--locoum-teal) !important; }
/* The upstream icon has a hardcoded light fill meant for a filled button */
#passkey-sign-in-button .MuiButton-startIcon svg { fill: currentColor; }
/* "or" divider between the two sign-in buttons */
#first-factor-stage .MuiDivider-root { color: var(--locoum-muted); }
#first-factor-stage .MuiDivider-root::before,
#first-factor-stage .MuiDivider-root::after { border-color: var(--locoum-line); }
#first-factor-stage .MuiDivider-root .MuiTypography-root { color: var(--locoum-muted); font-size: 13px; }

/* Settings pages (/settings): the top bar is a <nav>, not a <header> */
nav.MuiAppBar-root {
  background-color: var(--locoum-teal) !important;
  color: #FFFFFF !important;
}
nav.MuiAppBar-root .MuiTypography-root,
nav.MuiAppBar-root .MuiIconButton-root { color: #FFFFFF !important; }
/* "Dashboard" link appended to the right of the settings top bar by dashboard-link.js */
.locoum-dashboard-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
  min-height: 36px;
  padding: 0 14px 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF !important;
  font: 500 14px/1 "Poppins", system-ui, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}
.locoum-dashboard-link:hover { background: rgba(255, 255, 255, 0.18); }
a.locoum-dashboard-link:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.locoum-dashboard-link svg { width: 15px; height: 17px; flex-shrink: 0; }
/* Phones: logo only, the label stays for screen readers */
@media (max-width: 599px) {
  .locoum-dashboard-link { justify-content: center; width: 40px; min-height: 40px; padding: 0; }
  .locoum-dashboard-link__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
.MuiSvgIcon-colorPrimary { color: var(--locoum-teal) !important; }
.MuiListItemButton-root.Mui-selected { background-color: rgba(14, 110, 104, 0.12) !important; }
.MuiListItemButton-root.Mui-selected:hover { background-color: rgba(14, 110, 104, 0.18) !important; }
.MuiStepIcon-root.Mui-active,
.MuiStepIcon-root.Mui-completed { color: var(--locoum-teal) !important; }
.MuiDialog-paper { border-radius: 16px !important; }

/* Settings dialogs: brand the confirm buttons (MUI "info" blue and the stepper "Next") */
#dialog-verify.MuiButton-containedInfo,
#dialog-next { background-color: var(--locoum-teal) !important; }
#dialog-verify.MuiButton-containedInfo:hover,
#dialog-next:hover { background-color: var(--locoum-teal-strong) !important; }

/* Links and focus */
a.MuiLink-root { color: var(--locoum-teal) !important; }
/* "Powered by Authelia" footer: one discreet line, centered (MUI sizes the xs-4 item to a third of the row) */
#first-factor-stage .MuiGrid-grid-xs-4 { flex-basis: auto !important; max-width: none !important; width: auto !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: teal by default, white on the teal buttons (the passkey button is white) */
.MuiCircularProgress-root { color: var(--locoum-teal) !important; }
.MuiButton-containedPrimary .MuiCircularProgress-root { color: #FFFFFF !important; }
#passkey-sign-in-button .MuiCircularProgress-root { color: var(--locoum-teal) !important; }

/* Password reset pages (MinimalLayout, not inside #first-factor-stage): same white card */
#reset-password-step1-stage,
#reset-password-step2-stage { padding: 40px 16px 48px; }
#reset-password-step1-stage > .MuiContainer-root,
#reset-password-step2-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: 8px 32px 28px;
}
#reset-password-step1-stage img,
#reset-password-step2-stage img { width: 64px; height: 64px; border-radius: 16px; }
#reset-password-step1-stage h5.MuiTypography-h5,
#reset-password-step2-stage h5.MuiTypography-h5 {
  font-weight: 600 !important;
  font-size: 22px !important;
  color: var(--locoum-ink);
}
/* Reset pages: "Cancel" is secondary (outlined), like the passkey button */
#cancel-button.MuiButton-containedPrimary {
  background-color: #FFFFFF !important;
  color: var(--locoum-teal) !important;
  border: 1px solid var(--locoum-teal);
}
#cancel-button.MuiButton-containedPrimary:hover { background-color: rgba(14, 110, 104, 0.08) !important; }
#cancel-button.MuiButton-containedPrimary.Mui-disabled { color: var(--locoum-teal) !important; opacity: 0.6; }
/* "Mot de passe oublié ?" link (a button-styled MUI Link, not an <a>) */
#reset-password-button.MuiLink-root { color: var(--locoum-teal) !important; font-size: 13px; }
/* Upstream right-aligns the "forgot password" link with an inline style: center it under the buttons */
#first-factor-stage .MuiGrid-root:has(> #reset-password-button) { justify-content: center !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; }
  #reset-password-step1-stage,
  #reset-password-step2-stage { padding: 16px 12px 32px; }
  #reset-password-step1-stage > .MuiContainer-root,
  #reset-password-step2-stage > .MuiContainer-root { padding: 8px 20px 24px; border-radius: 16px; }
}