/* Cotlone look for Authelia's portal (4.39, Material UI). Loaded by the
   authelia-nginx sidecar on every portal page; matches accounts.cotlone.com
   and Nexus. Targets MUI's stable class names and Authelia's element ids, so
   re-check after an Authelia upgrade (screenshot the sign-in page). */

:root {
  --c-bg: #f6f6f4; --c-card: #fff; --c-fg: #17181a; --c-fg2: #4a4d52; --c-fg3: #72767c;
  --c-line: #e2e2de; --c-accent: #3d6df2; --c-bad: #c4372c;
  --c-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --c-bg: #0f1012; --c-card: #17191c; --c-fg: #ececea; --c-fg2: #b9bbbe; --c-fg3: #8a8d92;
          --c-line: #2a2d31; --c-accent: #7c9dff; --c-bad: #ff7b6e; }
}

html, body, #root, #root > div { background: var(--c-bg) !important; color: var(--c-fg) !important; }
#root, #root .MuiTypography-root, #root .MuiButtonBase-root, #root input, #root label { font-family: var(--c-font) !important; }

/* Top bar: no slab of colour, just the language picker. */
#root header.MuiAppBar-root { background: transparent !important; box-shadow: none !important; color: var(--c-fg3) !important; }

/* The card. */
#root .MuiContainer-maxWidthXs {
  background: var(--c-card) !important; border: 1px solid var(--c-line); border-radius: 16px;
  padding: 26px 22px 20px !important; margin-top: 24px; max-width: 420px !important;
  width: calc(100% - 32px) !important; box-sizing: border-box;
}
#root .MuiContainer-maxWidthXs::before {
  content: "Cotlone"; display: block; margin: 0 0 14px; color: var(--c-fg3); text-align: left;
  font: 600 12.5px var(--c-font); letter-spacing: .04em; text-transform: uppercase;
}
#root .MuiContainer-maxWidthXs > .MuiGrid-container { text-align: left !important; }
#root #UserSvg, #root .MuiContainer-maxWidthXs svg[id$="Svg"] { display: none !important; }
#root .MuiContainer-maxWidthXs h5 {
  font: 600 22px/1.3 var(--c-font) !important; letter-spacing: -.02em; color: var(--c-fg) !important;
  text-align: left !important; margin: 0 !important;
}
#root .cotlone-sub { margin: 6px 0 4px; color: var(--c-fg2); font: 15px/1.5 var(--c-font); text-align: left; }

/* Fields. */
#root .MuiOutlinedInput-root { border-radius: 10px !important; color: var(--c-fg) !important; }
#root .MuiOutlinedInput-notchedOutline { border-color: var(--c-line) !important; }
#root .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: var(--c-fg3) !important; }
#root .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: var(--c-accent) !important; border-width: 2px !important; }
#root .MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline { border-color: var(--c-bad) !important; }
#root .MuiInputLabel-root { color: var(--c-fg3) !important; }
#root .MuiInputLabel-root.Mui-focused { color: var(--c-accent) !important; }
#root .MuiInputAdornment-root .MuiIconButton-root, #root .MuiCheckbox-root { color: var(--c-fg3) !important; }
#root .MuiCheckbox-root.Mui-checked { color: var(--c-accent) !important; }
#root .MuiFormControlLabel-label { color: var(--c-fg2) !important; font-size: 14px !important; }

/* Buttons: the solid dark one from the Cotlone pages, no ALL CAPS. */
#root .MuiButton-root { text-transform: none !important; border-radius: 10px !important; font: 600 15px var(--c-font) !important;
  box-shadow: none !important; min-height: 44px; letter-spacing: 0 !important; }
#root .MuiButton-containedPrimary, #root .MuiButton-contained { background: var(--c-fg) !important; color: var(--c-bg) !important; }
#root .MuiButton-containedPrimary:hover { opacity: .9; }
#root .MuiButton-containedPrimary.Mui-disabled { opacity: .45; }
#root .MuiButton-outlined, #root .MuiButton-text { color: var(--c-fg) !important; border-color: var(--c-line) !important; }
/* Authelia draws "Cancel" as a second solid button; make it the quiet one. */
#root [id^="cancel-button"], #root #cancel-button { background: transparent !important; color: var(--c-fg2) !important;
  border: 1px solid var(--c-line) !important; }

/* Links and small print. */
#root .MuiLink-root, #root button.MuiLink-root { color: var(--c-accent) !important; font-size: 14px !important; }
#root a.MuiLink-root[href*="authelia.com"] { color: var(--c-fg3) !important; font-size: 12px !important; white-space: nowrap; }
#root .MuiGrid-root:has(> a.MuiLink-root[href*="authelia.com"]) { flex-basis: 100% !important; max-width: 100% !important; text-align: center; }
#root .MuiAlert-root { border-radius: 10px !important; }

/* "New here? Request access", added by cotlone-theme.js. */
#request-access { display: block; width: 100%; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--c-line);
  text-align: center; color: var(--c-fg3); font: 14px var(--c-font); }
#request-access a { color: var(--c-accent); text-decoration: none; font-weight: 500; }
#request-access a:hover { text-decoration: underline; }