/* Authelia 登录门户的工作台外观。
   只覆盖样式与页面外壳，不改 Authelia 的表单、接口和会话逻辑。 */

/* Authelia 的 Tailwind 也定义 --accent / --muted 等变量；这里统一引用 theme.css 的共享令牌，
   只给本页样式建别名，不再复制一套色板、字体和页面底色。 */
:root {
    --wb-canvas: var(--canvas);
    --wb-surface: var(--surface);
    --wb-surface-2: var(--surface-2);
    --wb-ink: var(--ink);
    --wb-muted: var(--muted);
    --wb-line: var(--line);
    --wb-line-strong: var(--line-strong);
    --wb-accent: var(--accent);
    --wb-accent-strong: var(--accent-strong);
    --wb-accent-ink: var(--accent-ink);
    --wb-brass: var(--brass);
    --wb-danger: var(--danger);
    --wb-font-sans: var(--font-sans);
    --wb-font-mono: var(--font-mono);
    --wb-hairline: var(--hairline);
    --wb-shadow: var(--shadow-2);
}

#root {
    padding-top: 72px;
    min-height: 100vh;
    box-sizing: border-box;
}

/* ---- 顶部品牌条 ---- */
#wb-login-brand {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 64px;
    padding: 0 max(16px, calc((100vw - 1120px) / 2));
    box-sizing: border-box;
    background: color-mix(in oklab, var(--wb-canvas) 78%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(16px);
    backdrop-filter: saturate(1.4) blur(16px);
    border-bottom: 1px solid var(--wb-hairline);
}
#wb-login-brand .wb-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--wb-ink);
    text-decoration: none;
}
#wb-login-brand .wb-mark {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    background: var(--wb-accent-strong);
    color: var(--wb-accent-ink);
    border-radius: 4px;
    font: 600 15px/1 var(--wb-font-sans);
}
#wb-login-brand .wb-lockup { display: grid; line-height: 1.05; }
#wb-login-brand .wb-word { font: 600 14px/1.1 var(--wb-font-sans); letter-spacing: -.01em; }
#wb-login-brand .wb-sub { margin-top: 3px; color: var(--wb-muted); font: 500 9px/1 var(--wb-font-mono); letter-spacing: .14em; text-transform: uppercase; }
#wb-login-brand .wb-note { margin-left: 8px; color: var(--wb-muted); font: 500 10px/1 var(--wb-font-mono); letter-spacing: .08em; }
#wb-login-brand .wb-register {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    color: var(--wb-accent);
    border: 1px solid color-mix(in oklab, var(--wb-accent) 35%, var(--wb-line));
    border-radius: 5px;
    text-decoration: none;
    font: 600 12px/1 var(--wb-font-sans);
}
#wb-login-brand .wb-register:hover { background: color-mix(in oklab, var(--wb-accent) 8%, transparent); }

/* ---- Authelia 卡片 ---- */
#root .MuiPaper-root {
    background: var(--wb-surface) !important;
    color: var(--wb-ink) !important;
    border: 1px solid var(--wb-line) !important;
    border-radius: 10px !important;
    box-shadow: var(--wb-shadow) !important;
    background-image: linear-gradient(180deg, color-mix(in oklab, var(--wb-surface) 70%, white), var(--wb-surface)) !important;
}
@media (prefers-color-scheme: dark) {
    #root .MuiPaper-root { background-image: linear-gradient(180deg, color-mix(in oklab, var(--wb-surface) 88%, white), var(--wb-surface)) !important; }
}
#root h1, #root h2, #root h3, #root h4, #root h5, #root h6 {
    color: var(--wb-ink) !important;
    font-family: var(--wb-font-sans) !important;
    letter-spacing: -.02em;
}
#root .MuiTypography-root { color: var(--wb-ink) !important; font-family: var(--wb-font-sans) !important; }
#root .MuiTypography-colorTextSecondary { color: var(--wb-muted) !important; }
#root .MuiDivider-root { border-color: var(--wb-hairline) !important; }
#root .MuiSvgIcon-root { color: var(--wb-muted) !important; }

/* 输入框 */
#root .MuiFormLabel-root, #root .MuiInputLabel-root { color: var(--wb-muted) !important; font-family: var(--wb-font-sans) !important; }
#root .MuiInputBase-root { background: var(--wb-surface-2) !important; color: var(--wb-ink) !important; border-radius: 6px !important; }
#root .MuiInputBase-input { color: var(--wb-ink) !important; font-family: var(--wb-font-sans) !important; }
#root .MuiOutlinedInput-notchedOutline { border-color: var(--wb-line) !important; }
#root .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: var(--wb-line-strong) !important; }
#root .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: var(--wb-accent) !important; border-width: 2px !important; }
#root .MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline { border-color: var(--wb-danger) !important; }
#root .MuiFormHelperText-root { color: var(--wb-muted) !important; }
#root .MuiFormHelperText-root.Mui-error { color: var(--wb-danger) !important; }
#root .MuiInputAdornment-root .MuiIconButton-root { color: var(--wb-muted) !important; }

/* 主按钮；语言选择等文字按钮不跟着变绿 */
#root button[type="submit"], #root .MuiButton-containedPrimary {
    min-height: 42px;
    background: var(--wb-accent-strong) !important;
    color: var(--wb-accent-ink) !important;
    border-radius: 6px !important;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 8px 18px -10px color-mix(in oklab, var(--wb-accent) 80%, transparent) !important;
    font: 600 13px/1 var(--wb-font-sans) !important;
    letter-spacing: .02em;
}
#root button[type="submit"]:hover, #root .MuiButton-containedPrimary:hover { background: var(--wb-accent) !important; }
#root button[type="submit"].Mui-disabled { background: var(--wb-line-strong) !important; color: var(--wb-muted) !important; }
#root .MuiButton-root { font-family: var(--wb-font-sans) !important; }
#root .MuiButton-text { color: var(--wb-muted) !important; }
#root .MuiButton-text:hover { background: color-mix(in oklab, var(--wb-ink) 6%, transparent) !important; }

/* 链接、重置密码、页脚 */
#root .MuiLink-root, #root a { color: var(--wb-accent) !important; }
#root .MuiLink-root:hover, #root a:hover { color: var(--wb-accent-strong) !important; }
#root .MuiAlert-root {
    background: color-mix(in oklab, var(--wb-danger) 8%, var(--wb-surface)) !important;
    color: var(--wb-ink) !important;
    border: 1px solid color-mix(in oklab, var(--wb-danger) 35%, var(--wb-line)) !important;
    border-radius: 6px !important;
}
#root .MuiAlert-icon { color: var(--wb-danger) !important; }
#root .MuiAlert-message { color: var(--wb-ink) !important; }
#root .MuiCheckbox-root { color: var(--wb-line-strong) !important; }
#root .MuiCheckbox-root.Mui-checked { color: var(--wb-accent) !important; }
#root .MuiFormControlLabel-label { color: var(--wb-ink) !important; }

/* 卡片里的注册提示，由 auth-login.js 插到表单后面 */
.wb-register-note {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--wb-hairline);
    color: var(--wb-muted);
    font: 400 12px/1.7 var(--wb-font-sans);
}
.wb-register-note strong { display: block; margin-bottom: 2px; color: var(--wb-ink); font-weight: 600; }
.wb-register-note a { color: var(--wb-accent) !important; font-weight: 600; text-decoration: none; }
.wb-register-note a:hover { text-decoration: underline; }

/* ---- Authelia 4.39 的真实布局：Tailwind 类名，没有 MUI 卡片 ---- */
#first-factor-stage > div {
    max-width: 468px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#first-factor-stage .flex.flex-col.items-stretch {
    max-width: 468px !important;
    margin: 0 auto;
    padding: 26px 32px 24px !important;
    background: var(--wb-surface) !important;
    border: 1px solid var(--wb-line) !important;
    border-radius: 10px !important;
    box-shadow: var(--wb-shadow) !important;
    background-image: linear-gradient(180deg, color-mix(in oklab, var(--wb-surface) 72%, white), var(--wb-surface)) !important;
    text-align: left;
}

@media (prefers-color-scheme: dark) {
    #first-factor-stage .flex.flex-col.items-stretch {
        background-image: linear-gradient(180deg, color-mix(in oklab, var(--wb-surface) 88%, white), var(--wb-surface)) !important;
    }
}

/* 默认的灰色人像和空占位不要 */
#first-factor-stage .flex.flex-col.items-stretch > div:first-child,
#first-factor-stage .w-full.p-2 {
    display: none !important;
}

/* 标题 */
#first-factor-stage .flex.flex-col.items-stretch > div:nth-child(2) {
    text-align: left;
}
#first-factor-stage .flex.flex-col.items-stretch > div:nth-child(2) > * {
    margin: 0 0 18px !important;
    color: var(--wb-ink) !important;
    font: 600 24px/1.2 var(--wb-font-sans) !important;
    letter-spacing: -.02em;
}

/* 表单 */
#form-login input {
    height: 52px !important;
    background: var(--wb-surface-2) !important;
    border: 1px solid var(--wb-line) !important;
    border-radius: 6px !important;
    color: var(--wb-ink) !important;
    font-family: var(--wb-font-sans) !important;
    padding: 18px 12px 6px !important;
}
#form-login input:focus {
    border-color: var(--wb-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--wb-accent) 18%, transparent) !important;
}
#form-login label {
    left: 12px !important;
    color: var(--wb-muted) !important;
    font-family: var(--wb-font-sans) !important;
    font-size: 12px !important;
}
#form-login input:focus + label,
#form-login input:not(:placeholder-shown) + label {
    top: 8px !important;
    transform: none !important;
    font-size: 10px !important;
}
#sign-in-button {
    font-family: var(--wb-font-sans) !important;
    letter-spacing: .04em;
}
#reset-password-button {
    color: var(--wb-accent) !important;
    font-family: var(--wb-font-sans) !important;
}
#language-button {
    color: var(--wb-muted) !important;
}
#language-button:hover {
    background: color-mix(in oklab, var(--wb-ink) 6%, transparent) !important;
}
#root a[href*="authelia"] {
    color: var(--wb-muted) !important;
    font-size: 11px;
}

@media (max-width: 560px) {
    #first-factor-stage {
        padding-left: 14px !important;
        padding-right: 14px !important;
        box-sizing: border-box;
    }
    #first-factor-stage .flex.flex-col.items-stretch {
        padding: 22px 20px 20px !important;
    }
    #wb-login-brand { height: 58px; padding: 0 14px; }
    #wb-login-brand .wb-note, #wb-login-brand .wb-sub { display: none; }
    #wb-login-brand .wb-register { font-size: 11px; }
    #root { padding-top: 58px; }
    #root .MuiPaper-root { border-radius: 8px !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}