/* eastfern 登录页覆盖样式
 * 由 nginx sub_filter 注入 <link> 加载（Authelia 的 CSP 只允许 'self' 与 nonce）
 * 改动本文件即时生效，无需 reload nginx。
 */

:root {
  --background: oklch(99% 0 0);
  --foreground: oklch(22% 0 0);
  --primary: oklch(22% 0 0);
  --primary-foreground: oklch(99% 0 0);
  --ring: oklch(22% 0 0);
  --border: oklch(90% 0 0);
  --input: oklch(90% 0 0);
  --card: oklch(99% 0 0);
  --muted: oklch(96% 0 0);
  --accent: oklch(96% 0 0);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: oklch(16% 0 0);
    --foreground: oklch(94% 0 0);
    --primary: oklch(94% 0 0);
    --primary-foreground: oklch(16% 0 0);
    --ring: oklch(94% 0 0);
    --border: oklch(30% 0 0);
    --input: oklch(30% 0 0);
    --card: oklch(16% 0 0);
    --muted: oklch(22% 0 0);
    --accent: oklch(22% 0 0);
  }
}

/* 去掉默认的人物剪影，换成站名字标 */
#UserSvg { display: none !important; }

#first-factor-stage > div::before {
  content: 'eastfern.';
  display: block;
  text-align: center;
  font: 500 34px/1.2 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  letter-spacing: -1.8px;
  margin-bottom: 26px;
  color: var(--foreground);
}

/* 标题与控件 */
#first-factor-stage h5 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.2px;
  color: var(--foreground);
}

#form-login input {
  border-radius: 7px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

#form-login button[type=submit] {
  font-weight: 500;
  letter-spacing: .3px;
  border-radius: 7px;
}

/* 弱化 Authelia 署名 */
a[href*='authelia.com'] { opacity: .28; }

/* ============================================================
   第二因素 / WebAuthn 页面（MUI 组件，与第一因素不是同一套）
   这些页面的粉色、红叉来自 MUI 组件自带的 palette，不走 CSS 变量，
   所以必须按 MUI 的类名直接覆盖。
   ============================================================ */

/* 文本按钮与链接：粉色 → 中性色 */
#root .MuiButton-text,
#root .MuiButton-textPrimary,
#root .MuiButton-textSecondary,
#root .MuiLink-root,
#root a {
  color: var(--foreground) !important;
}

/* 所有 MUI 图标跟随文字色（红叉、错误提示一并变中性） */
#root .MuiSvgIcon-root {
  color: inherit !important;
  fill: currentColor !important;
}
#root .MuiSvgIcon-colorError,
#root svg[color='error'] {
  color: var(--foreground) !important;
}

/* 卡片：去掉阴影改成细边框 */
#root .MuiPaper-root {
  box-shadow: none !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background-color: transparent !important;
}

/* 标题字体与字距 */
#root h3, #root h4, #root h5, #root h6,
#root .MuiTypography-h4, #root .MuiTypography-h5, #root .MuiTypography-h6 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  letter-spacing: -.4px;
}

/* 正文与说明文字 */
#root .MuiTypography-body1, #root .MuiTypography-body2 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* 分隔竖线 */
#root .MuiDivider-root { background-color: var(--border) !important; }

/* ============================================================
   用户设置页（/auth/settings）：
   Authelia 把凭据卡片写成 col-span-3（宽屏只占 25%），右侧大片留白。
   这里让它占满整行，页面同时变短。
   ============================================================ */
#root [class*='xl:col-span-3'] {
  grid-column: 1 / -1 !important;
  max-width: none !important;
}

/* 设置页卡片内的操作按钮组贴右，避免加宽后离文字过远时显得松散 */
#root [class*='xl:col-span-3'] > div {
  width: 100%;
}