/*
 * _forms.css — 表单
 * =================
 *
 * 覆盖：
 * - .layui-input / .layui-textarea       基础输入
 * - .layui-form-select                   下拉
 * - .layui-form-checkbox / -radio        单复选
 * - .layui-form-switch                   开关
 * - .layui-form-label                    标签
 * - .layui-form-item                     表单行
 * - .layui-form-mid / .layui-form-danger 提示
 * - .layui-laydate                       日期选择面板
 * - .layui-upload                        上传按钮和文件列表
 */

/* === 表单容器 === */
html[data-skin="dark"] .layui-form {
    color: var(--text-1);
}

html[data-skin="dark"] .layui-form-item {
    margin-bottom: var(--space-5);
}

html[data-skin="dark"] .layui-form-label {
    color: var(--text-2);
    font-size: var(--font-size-sm);
    padding: var(--space-2) var(--space-3) var(--space-2) 0;
    font-weight: 400;
    line-height: 22px;
}

html[data-skin="dark"] .layui-form-label.required::before {
    content: "*";
    color: var(--danger);
    margin-right: 2px;
}

html[data-skin="dark"] .layui-form-mid {
    color: var(--text-3);
    font-size: var(--font-size-sm);
}

html[data-skin="dark"] .layui-form-danger,
html[data-skin="dark"] .layui-form-danger:focus,
html[data-skin="dark"] .layui-form-danger + .layui-form-select .layui-input {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px var(--danger-soft);
}

/* === 输入框 === */
html[data-skin="dark"] .layui-input,
html[data-skin="dark"] .layui-textarea,
html[data-skin="dark"] .layui-input-block .layui-input,
html[data-skin="dark"] .layui-input-inline .layui-input {
    background: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-1);
    height: 38px;
    line-height: 36px;
    padding: 0 var(--space-3);
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    transition: all var(--transition-fast);
}

html[data-skin="dark"] .layui-textarea {
    height: auto;
    min-height: 80px;
    line-height: var(--line-height-normal);
    padding: var(--space-2) var(--space-3);
    resize: vertical;
}

html[data-skin="dark"] .layui-input::placeholder,
html[data-skin="dark"] .layui-textarea::placeholder {
    color: var(--text-3);
    font-family: var(--font-family);
}

html[data-skin="dark"] .layui-input:hover,
html[data-skin="dark"] .layui-textarea:hover {
    border-color: var(--primary-active);
}

html[data-skin="dark"] .layui-input:focus,
html[data-skin="dark"] .layui-textarea:focus {
    border-color: var(--primary);
    box-shadow: var(--shadow-focus);
    background: var(--bg-1);
    outline: none;
}

html[data-skin="dark"] .layui-input[disabled],
html[data-skin="dark"] .layui-input[readonly],
html[data-skin="dark"] .layui-textarea[disabled],
html[data-skin="dark"] .layui-textarea[readonly] {
    background: var(--bg-2);
    color: var(--text-3);
    border-color: var(--border);
    cursor: not-allowed;
}

/* === Chrome / Edge / Safari autofill 强制改 input 为浅蓝/黄背景 hack ===
 * 业务表单页（如添加客户）输入框被浏览器自动填充后变浅色，破坏暗色风格
 * 用 inset 1000px box-shadow 模拟暗色背景；text-fill-color 强制文字色；
 * transition 5000s 让原生填充色"延迟"恢复
 */
html[data-skin="dark"] .layui-input:-webkit-autofill,
html[data-skin="dark"] .layui-input:-webkit-autofill:hover,
html[data-skin="dark"] .layui-input:-webkit-autofill:focus,
html[data-skin="dark"] .layui-input:-webkit-autofill:active,
html[data-skin="dark"] .layui-textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--text-1) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset !important;
    box-shadow: 0 0 0 1000px var(--bg-input) inset !important;
    caret-color: var(--primary);
    transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
}

/* === 下拉选择 === */
html[data-skin="dark"] .layui-form-select .layui-input {
    background: var(--bg-input);
    padding-right: 36px;
}

html[data-skin="dark"] .layui-form-select .layui-edge {
    border-top-color: var(--text-2);
    transition: transform var(--transition-base);
}

html[data-skin="dark"] .layui-form-selected .layui-edge {
    transform: rotate(180deg);
    border-top-color: var(--primary);
}

html[data-skin="dark"] .layui-form-select dl {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-elevated);
    padding: var(--space-2) 0;
    margin-top: var(--space-1);
}

html[data-skin="dark"] .layui-form-select dl dd {
    color: var(--text-1);
    padding: 0 var(--space-3);
    line-height: 36px;
    font-size: var(--font-size-sm);
    transition: background var(--transition-fast);
}

html[data-skin="dark"] .layui-form-select dl dd:hover {
    background: var(--bg-3);
    color: var(--primary);
}

html[data-skin="dark"] .layui-form-select dl dd.layui-this {
    background: var(--primary-soft);
    color: var(--primary);
}

html[data-skin="dark"] .layui-form-select dl dd.layui-select-tips {
    color: var(--text-3);
}

/* 多选下拉 */
html[data-skin="dark"] .layui-form-select dl dd.layui-select-tips:hover {
    background: var(--bg-3);
    color: var(--text-2);
}

/* === 单选（紧凑：在窄表单列里不换行） === */
html[data-skin="dark"] .layui-form-radio {
    color: var(--text-1);
    line-height: 28px;
    height: 28px;
    margin: 0 6px 0 0;
    padding-right: 0;
    padding-left: 0;
    font-size: 13px;
}

html[data-skin="dark"] .layui-form-radio > i:first-child {
    color: var(--text-3);
    font-size: 16px;
    transition: color var(--transition-base);
}

html[data-skin="dark"] .layui-form-radio:hover > i:first-child {
    color: var(--primary-hover);
}

html[data-skin="dark"] .layui-form-radioed > i:first-child {
    color: var(--primary) !important;
    text-shadow: 0 0 6px var(--primary-glow);
}

/* 表单内 radio 行 padding 缩小，让多个 radio 能一行显示 */
html[data-skin="dark"] .layui-form-item .layui-input-block .layui-form-radio,
html[data-skin="dark"] .layui-form-item .layui-input-inline .layui-form-radio {
    margin-right: 4px;
}

/* === 复选 === */
html[data-skin="dark"] .layui-form-checkbox {
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-1);
    height: 26px;
    line-height: 26px;
    padding: 0 var(--space-2);
    transition: all var(--transition-base);
}

html[data-skin="dark"] .layui-form-checkbox:hover {
    border-color: var(--primary);
}

html[data-skin="dark"] .layui-form-checkbox[lay-skin="primary"] {
    background: transparent;
    border: 0;
    height: auto;
    line-height: 1.5;
    padding-left: 24px;
}

html[data-skin="dark"] .layui-form-checkbox[lay-skin="primary"] > i {
    background: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xs);
    color: transparent;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    font-size: 12px;
    transition: all var(--transition-base);
}

html[data-skin="dark"] .layui-form-checkbox[lay-skin="primary"]:hover > i {
    border-color: var(--primary);
}

html[data-skin="dark"] .layui-form-checked[lay-skin="primary"] > i,
html[data-skin="dark"] .layui-form-checkbox[lay-skin="primary"].layui-form-checked > i {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--text-on-primary);
}

html[data-skin="dark"] .layui-form-checked {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary);
}

html[data-skin="dark"] .layui-form-checked > i {
    color: var(--primary);
}

/* === 开关 ===
 * 只改颜色，不动尺寸（height / min-width / 滑块 i 位置 / em 文字 padding）
 * 由 layui.css 维持原 22px 高、18×18 滑块、min-width 35 等比例，
 * 避免在表格 80px 状态列内挤变形
 */
html[data-skin="dark"] .layui-form-switch {
    background: var(--bg-input);
    border-color: var(--border-strong);
}

html[data-skin="dark"] .layui-form-switch i {
    background: var(--text-2);
}

html[data-skin="dark"] .layui-form-switch em {
    color: var(--text-3);
}

html[data-skin="dark"] .layui-form-onswitch {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 8px var(--primary-glow);
}

html[data-skin="dark"] .layui-form-onswitch i {
    background: var(--text-on-primary);
}

html[data-skin="dark"] .layui-form-onswitch em {
    color: var(--text-on-primary);
}

/* === 日期选择面板 === */
html[data-skin="dark"] .layui-laydate {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-elevated);
}

html[data-skin="dark"] .layui-laydate .laydate-main-list-0,
html[data-skin="dark"] .layui-laydate .laydate-main-list-1,
html[data-skin="dark"] .layui-laydate .laydate-main-list-2 {
    color: var(--text-1);
}

html[data-skin="dark"] .layui-laydate .layui-laydate-header {
    border-bottom: 1px solid var(--border);
    background: var(--bg-3);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

html[data-skin="dark"] .layui-laydate .layui-laydate-header i,
html[data-skin="dark"] .layui-laydate .layui-laydate-header span {
    color: var(--text-2);
}

html[data-skin="dark"] .layui-laydate .layui-laydate-header i:hover,
html[data-skin="dark"] .layui-laydate .layui-laydate-header span:hover {
    color: var(--primary);
}

html[data-skin="dark"] .layui-laydate-content thead th {
    color: var(--text-3);
    font-weight: 400;
}

html[data-skin="dark"] .layui-laydate-content td {
    color: var(--text-1);
    transition: all var(--transition-fast);
}

html[data-skin="dark"] .layui-laydate-content td:hover {
    background: var(--bg-3);
    color: var(--primary);
}

html[data-skin="dark"] .layui-laydate-content td.laydate-day-prev,
html[data-skin="dark"] .layui-laydate-content td.laydate-day-next {
    color: var(--text-3);
}

html[data-skin="dark"] .layui-laydate-content .layui-this {
    background: var(--primary) !important;
    color: var(--text-on-primary) !important;
}

html[data-skin="dark"] .layui-laydate-content .laydate-selected {
    background: var(--primary-soft);
    color: var(--primary);
}

html[data-skin="dark"] .layui-laydate-footer {
    border-top: 1px solid var(--border);
    background: var(--bg-3);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

html[data-skin="dark"] .layui-laydate-footer .laydate-btns-now,
html[data-skin="dark"] .layui-laydate-footer .laydate-btns-confirm {
    color: var(--primary);
}

/* === 上传 === */
html[data-skin="dark"] .layui-upload-drag {
    background: var(--bg-2);
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    color: var(--text-2);
    transition: all var(--transition-base);
}

html[data-skin="dark"] .layui-upload-drag:hover {
    border-color: var(--primary);
    background: var(--bg-3);
    color: var(--text-1);
}

html[data-skin="dark"] .layui-upload-drag .layui-icon {
    color: var(--primary);
}

html[data-skin="dark"] .layui-upload-list {
    color: var(--text-1);
}

html[data-skin="dark"] .layui-upload-img {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    padding: var(--space-1);
}

html[data-skin="dark"] .layui-upload-progress {
    background: var(--bg-3);
    border-radius: 999px;
}

html[data-skin="dark"] .layui-upload-progress-bar {
    background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
}

/* === 字段验证 === */
html[data-skin="dark"] .layui-form-item.layui-form-text .layui-input-block,
html[data-skin="dark"] .layui-form-item.layui-form-text .layui-input-inline {
    min-height: 38px;
}

/* === 文件选择按钮 === */
html[data-skin="dark"] .layui-upload-button {
    cursor: pointer;
}