/*
 * _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 {
    /* 未选中态：透明底 + 描边，呈现清晰的"空框"语义。
     * 之前用 var(--bg-input)(#0E1426) 实心填充，比行底色(#141A2E)还深，
     * 加上 20% 白描边，整体看着像一个"已填充/激活"的控件，
     * 容易被误认为已经勾选（数据列表全选列尤其明显）。改透明只留描边。*/
    background: transparent;
    /* 描边从 0.2 提到 0.45 并加粗到 1.5px：20% 白在 #141A2E 弹窗底上几乎隐没，
     * 空框看不清，导致和选中态（亮青实心）混作一团。加粗加亮让"空框"明确可辨。*/
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--radius-xs);
    color: transparent;
    width: 18px;
    height: 18px;
    line-height: 15px;
    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);
    /* 选中态加主色辉光，让"亮起"更突出，与未选中的暗描边空框形成强对比 */
    box-shadow: 0 0 6px var(--primary-glow);
}

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 状态列内挤变形
 */
/* 注意：layui 当前版本用 `>div` 承载文字（不是 em）；
 * 滑块 i 用 > i 直接子选择器匹配，避免选到内部其他 i。
 * onswitch 文字 layui 原生加了 !important，覆盖时也需要 !important。
 */
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 > div {
    color: var(--text-3) !important;
}

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

/* 滑块用纯白 + 阴影，确保在亮 cyan 背景上对比清晰可见 */
html[data-skin="dark"] .layui-form-onswitch > i {
    background: #fff !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

/* 开启态文字用深色（与亮 cyan 强对比），覆盖 layui 原生 #fff !important */
html[data-skin="dark"] .layui-form-onswitch > div {
    color: var(--text-on-primary) !important;
    font-weight: 600;
}

/* === 日期选择面板 === */
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);
}

/* === 日期选择面板内的"时间面板"（time picker；含"开始时间/结束时间"双列）===
 * layui 把时间选择渲染成 `ul.laydate-time-list > li`，未覆盖时整体落到 layui 默认白底。
 */
html[data-skin="dark"] .layui-laydate-content .laydate-set-ymd,
html[data-skin="dark"] .layui-laydate-content .layui-laydate-list {
    background: var(--bg-elevated);
}

/* 时分秒列表外框 + 标题（"开始时间 / 结束时间 / 时 / 分 / 秒"） */
html[data-skin="dark"] .layui-laydate-content .laydate-time-show,
html[data-skin="dark"] .layui-laydate .layui-laydate-list > li,
html[data-skin="dark"] .layui-laydate .layui-laydate-list > li > ol,
html[data-skin="dark"] .layui-laydate .laydate-time-list,
html[data-skin="dark"] .layui-laydate .laydate-time-list > li,
html[data-skin="dark"] .layui-laydate .laydate-time-list > li > ol {
    background: var(--bg-elevated);
    border-color: var(--border) !important;
    color: var(--text-1);
}

/* 时分秒每格（li）的可选数字 */
html[data-skin="dark"] .layui-laydate .layui-laydate-list > li ol > li,
html[data-skin="dark"] .layui-laydate .laydate-time-list > li ol > li {
    color: var(--text-1);
    transition: all var(--transition-fast);
}

html[data-skin="dark"] .layui-laydate .layui-laydate-list > li ol > li:hover,
html[data-skin="dark"] .layui-laydate .laydate-time-list > li ol > li:hover {
    background: var(--bg-3);
    color: var(--primary);
}

/* 当前选中的数字（layui 用 .layui-this 标记） */
html[data-skin="dark"] .layui-laydate .layui-laydate-list > li ol > li.layui-this,
html[data-skin="dark"] .layui-laydate .laydate-time-list > li ol > li.laydate-disabled,
html[data-skin="dark"] .layui-laydate .laydate-time-list > li ol > li.layui-this {
    background: var(--primary) !important;
    color: var(--text-on-primary) !important;
}

/* "时 / 分 / 秒" 表头标签 */
html[data-skin="dark"] .layui-laydate .laydate-time-list > li > p,
html[data-skin="dark"] .layui-laydate .layui-laydate-list > li > p {
    background: var(--bg-3);
    color: var(--text-2);
    border-bottom: 1px solid var(--border);
}

/* 范围选择器中两个时间面板间的分隔列（双面板模式：开始时间/结束时间）*/
html[data-skin="dark"] .layui-laydate-range .layui-laydate-main {
    background: var(--bg-elevated);
}

html[data-skin="dark"] .layui-laydate-range .layui-laydate-main + .layui-laydate-main {
    border-left: 1px solid var(--border);
}

/* 输入预览区（"00:00 - 23:59" 显示框）*/
html[data-skin="dark"] .layui-laydate-preview {
    color: var(--text-2);
    border-top: 1px solid var(--border);
    background: var(--bg-3);
}

/* 禁用态数字（不可选时间）*/
html[data-skin="dark"] .layui-laydate .laydate-time-list > li ol > li.laydate-disabled {
    color: var(--text-3) !important;
    background: transparent !important;
    cursor: not-allowed;
}

/* === 上传 === */
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;
}

/* === 树形选择（.layui-tree） ===
 * 权限弹窗的菜单树（type=1 layer + tree 组件）。
 * layui 默认是浅色背景，未在暗色面板内做适配会显式露出白底。
 * 覆盖范围：容器、节点、checkbox、连接线、hover/选中态。
 */
html[data-skin="dark"] .layui-tree {
    background: transparent;
    color: var(--text-1);
}

/* 树节点单元（含 checkbox / 文本 / 折叠图标） */
html[data-skin="dark"] .layui-tree-set,
html[data-skin="dark"] .layui-tree-pack {
    background: transparent;
}

/* 每行 entry：hover 高亮（替换默认白底） */
html[data-skin="dark"] .layui-tree-entry {
    transition: background var(--transition-fast);
}

html[data-skin="dark"] .layui-tree-entry:hover {
    background: var(--bg-3);
}

/* 节点主体内容（图标 + 文字 wrapper） */
html[data-skin="dark"] .layui-tree-main {
    color: var(--text-1);
}

/* 文本块（节点名）—— layui 默认 hover 加了 .layui-tree-txt 的浅色背景，必须重写 */
html[data-skin="dark"] .layui-tree-txt {
    color: var(--text-1);
    background: transparent !important;
}

html[data-skin="dark"] .layui-tree-entry:hover .layui-tree-txt,
html[data-skin="dark"] .layui-tree-txt:hover {
    color: var(--primary);
    background: transparent !important;
}

/* 折叠/展开 图标 */
html[data-skin="dark"] .layui-tree-iconClick,
html[data-skin="dark"] .layui-tree-icon {
    color: var(--text-2);
}

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

/* 节点连接线（树状结构的竖线/横线） */
html[data-skin="dark"] .layui-tree-line .layui-tree-set .layui-tree-set::before,
html[data-skin="dark"] .layui-tree-line .layui-tree-set .layui-tree-set::after,
html[data-skin="dark"] .layui-tree-line .layui-tree-entry::after {
    border-color: var(--border) !important;
}

/* checkbox（树节点前的勾选框）—— 借用 layui-form-checkbox 的暗色规则 */
html[data-skin="dark"] .layui-tree-check {
    border: 1px solid var(--border-strong);
    background: var(--bg-input);
    border-radius: var(--radius-xs);
    transition: all var(--transition-fast);
}

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

/* 选中态 checkbox（仅限树节点）
 * ⚠ 这里原来写成全局 `.layui-icon-ok:before`——但 layui 主复选框（lay-skin="primary"）的
 *   对勾用的就是同一个 layui-icon-ok 类（见 layui.js：<i class="layui-icon layui-icon-ok">，
 *   无论选中与否，主复选框的 i 都带这个类；只有 indeterminate 态才换成 layui-icon-indeterminate）。
 *   全局给它的 :before 加"青色底 + 可见对勾色"，会让"未选中"的复选框（数据列表全选列、
 *   表单复选框等）也画出青色对勾 → 看着像已勾选（用户反馈的问题①根因）。
 *   这里收敛到 .layui-tree 作用域，仅作用于权限树节点，不再污染表格/表单复选框。
 *   主复选框的选中态由下方 .layui-form-checked[lay-skin="primary"] > i 单独负责。
 */
html[data-skin="dark"] .layui-tree .layui-icon-ok:before,
html[data-skin="dark"] .layui-tree-checkedFirst .layui-tree-check {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--text-on-primary);
}

/* 半选中态（部分子节点选中） */
html[data-skin="dark"] .layui-tree-checkedFirst.layui-tree-checkedHalf .layui-tree-check {
    background: var(--primary-soft);
    border-color: var(--primary);
}

/* 当前激活节点（单击高亮） */
html[data-skin="dark"] .layui-tree-setHide .layui-tree-pack {
    display: none;
}

html[data-skin="dark"] .layui-tree-set.layui-tree-setLineShort .layui-tree-entry {
    background: var(--primary-soft);
    color: var(--primary);
}

/* 树的搜索框（如果用了 toolbar）*/
html[data-skin="dark"] .layui-tree-search {
    background: var(--bg-input);
    border: 1px solid var(--border-strong);
    color: var(--text-1);
    border-radius: var(--radius-sm);
}

html[data-skin="dark"] .layui-tree-search:focus {
    border-color: var(--primary);
    box-shadow: var(--shadow-focus);
}