/**
 * 表单输入框样式（仅 MD3 mdc-text-field）
 * 本站统一使用 Material Design 3 文本字段，不再维护非 MD3 的旧式输入框样式。
 * 加载：header 引入 skin/responsive/form-inputs.css
 */

/* 容器：与 mdc-text-field 共用，供 JS 兼容 .login-input-wrapper / .form-input-wrapper */
.login-input-wrapper,
.form-input-wrapper {
    position: relative;
    overflow: visible;
}

/* MD3 文本字段：内层 input 无边框，仅保留外框轮廓；显式正文字体，避免继承图标字体导致 placeholder 乱码 */
.login-input-wrapper.mdc-text-field .mdc-text-field__input,
.mdc-text-field .mdc-text-field__input {
    width: 100%;
    padding: 12px 16px !important;
    border: none !important;
    background: transparent;
    font-family: var(--md-sys-typescale-body-large-font, 'PingFang SC', 'Microsoft YaHei', 'Roboto', sans-serif) !important;
    font-size: var(--md-sys-typescale-body-large-size, 16px);
    color: var(--md-sys-color-on-surface, #1c1c1c);
    box-shadow: none !important;
    border-radius: 0;
    outline: none !important;
    box-sizing: border-box;
}
.mdc-text-field .mdc-text-field__input:focus,
.login-input-wrapper .mdc-text-field__input:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* placeholder 必须使用正文字体，否则会继承容器/兄弟的 Material Symbols 导致数字和中文显示为图标或乱码 */
.login-input-wrapper.mdc-text-field .mdc-text-field__input::placeholder,
.mdc-text-field .mdc-text-field__input::placeholder {
    font-family: var(--md-sys-typescale-body-large-font, 'PingFang SC', 'Microsoft YaHei', 'Roboto', sans-serif) !important;
}

.mdc-text-field.mdc-text-field--with-leading-icon .mdc-text-field__input {
    padding-left: 40px !important; /* 图标后约 8px 空隙，符合 MD3 可读性 */
}

/* 注册页密码遮罩：type=text + text-security，右侧留足 */
.mdc-text-field .mdc-text-field__input.reg-pwd-mask,
.login-input-wrapper .reg-pwd-mask.mdc-text-field__input {
    -webkit-text-security: disc;
    text-security: disc;
    padding-right: 12px !important;
}

/* 登录页动态校验图标（.validation-icon）在 MD3 容器内 */
.mdc-text-field .validation-icon,
.login-input-wrapper .validation-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    z-index: 10;
    display: none;
    pointer-events: none;
    line-height: 1;
    width: 22px;
    text-align: center;
}

.mdc-text-field .validation-icon.show,
.login-input-wrapper .validation-icon.show {
    display: block;
}

.mdc-text-field .validation-icon.valid,
.login-input-wrapper .validation-icon.valid {
    color: var(--md-sys-color-success, #4caf50) !important;
}

.mdc-text-field .validation-icon.valid .material-symbols-outlined,
.login-input-wrapper .validation-icon.valid .material-symbols-outlined {
    color: var(--md-sys-color-success, #4caf50) !important;
}

.mdc-text-field .validation-icon.invalid,
.login-input-wrapper .validation-icon.invalid {
    color: var(--md-sys-color-error, #ba1a1a) !important;
}

.mdc-text-field .validation-icon.invalid .material-symbols-outlined,
.login-input-wrapper .validation-icon.invalid .material-symbols-outlined {
    color: var(--md-sys-color-error, #ba1a1a) !important;
}

.mdc-text-field.has-validation-icon .mdc-text-field__input,
.login-input-wrapper.has-validation-icon .mdc-text-field__input {
    padding-right: 48px !important;
}

/* 深色主题：MD3 输入框 */
:root[data-theme="dark"] .mdc-text-field .mdc-text-field__input::placeholder,
:root.theme-dark .mdc-text-field .mdc-text-field__input::placeholder {
    color: var(--md-sys-color-on-surface-variant, #e8e8e8);
    opacity: 0.7;
}

:root[data-theme="dark"] .mdc-text-field .mdc-text-field__input,
:root.theme-dark .mdc-text-field .mdc-text-field__input {
    color: var(--md-sys-color-on-surface, #f5f5f5);
}

:root[data-theme="dark"] .mdc-text-field .mdc-text-field__input:-webkit-autofill,
:root.theme-dark .mdc-text-field .mdc-text-field__input:-webkit-autofill {
    -webkit-text-fill-color: var(--md-sys-color-on-surface, #f5f5f5) !important;
}