/* ============================================================
   Material 风格 layui 组件覆盖层（全局，经 frag/common :: pageHead
   于 layui.css、app.css 之后引入）
   沿用 #1890ff 主色，不改主框架。
   说明：本文件晚于 layui.css 加载，同特异性规则后者生效；
   layui 自带 !important 的规则（.layui-bg-green、输入框聚焦边框）
   此处以 !important 对抗。
   ============================================================ */

/* ===== 按钮体系：filled / outlined（高度与字号不动，弹窗尺寸契约） ===== */
.layui-btn {
    background-color: var(--qa-primary);   /* 默认青绿归一到主色 */
    border-radius: var(--qa-radius-s);
    transition: background-color var(--qa-ease), border-color var(--qa-ease),
                color var(--qa-ease), box-shadow var(--qa-ease);
}

.layui-btn:hover { background-color: var(--qa-primary-hover); }
.layui-btn:active { background-color: var(--qa-primary-active); }

.layui-btn-normal { background-color: var(--qa-primary); }
.layui-btn-normal:hover { background-color: var(--qa-primary-hover); }
.layui-btn-normal:active { background-color: var(--qa-primary-active); }

.layui-btn-warm { background-color: #ff9800; }
.layui-btn-warm:hover { background-color: #ffa733; }
.layui-btn-warm:active { background-color: #f57c00; }

.layui-btn-danger { background-color: var(--qa-danger); }
.layui-btn-danger:hover { background-color: var(--qa-danger-hover); }
.layui-btn-danger:active { background-color: #d84315; }

/* 幽灵按钮 → Material outlined（须置于 filled 规则之后） */
.layui-btn-primary {
    border-color: #d9d9d9;
    background-color: transparent;
    color: var(--qa-text-2);
}

.layui-btn-primary:hover {
    border-color: var(--qa-primary);
    background-color: var(--qa-primary-weak);
    color: var(--qa-primary);
}

.layui-btn-primary:active {
    border-color: var(--qa-primary-active);
    background-color: rgba(24, 144, 255, .15);
    color: var(--qa-primary-active);
}

/* ===== 输入控件：Material 圆角 + 主色聚焦环（高度保持 38px） ===== */
.layui-input,
.layui-select,
.layui-textarea {
    border-color: #dcdfe6;
    border-radius: var(--qa-radius-s);
    transition: border-color var(--qa-ease), box-shadow var(--qa-ease);
}

.layui-input:hover,
.layui-select:hover,
.layui-textarea:hover {
    border-color: #b8c2ce;
}

/* layui 原生聚焦规则带 !important（青绿色），此处同以 !important 覆盖 */
.layui-input:focus,
.layui-textarea:focus {
    border-color: var(--qa-primary) !important;
    box-shadow: 0 0 0 3px rgba(24, 144, 255, .12);
}

/* 下拉面板 */
.layui-form-select dl {
    border-color: var(--qa-divider);
    border-radius: var(--qa-radius-s);
    box-shadow: 0 4px 12px rgba(31, 45, 61, .1);
}

.layui-form-select dl dd {
    transition: background-color var(--qa-ease), color var(--qa-ease);
}

.layui-form-select dl dd:hover {
    background-color: #f5f7fa;
}

.layui-form-select dl dd.layui-this {
    background-color: var(--qa-primary-weak);
    color: var(--qa-primary);
    font-weight: 500;
}

/* ===== 复选/单选：选中态由青绿归一到主色 ===== */
.layui-form-checkbox:hover > i,
.layui-form-radio > i:hover {
    color: var(--qa-primary);
}

.layui-form-checkbox[lay-skin=primary]:hover > i {
    border-color: var(--qa-primary) !important;
}

.layui-form-checked:hover {
    border-color: var(--qa-primary);
}

.layui-form-checked > div {
    background-color: var(--qa-primary);
}

.layui-form-checked > i {
    color: var(--qa-primary);
}

.layui-form-checked[lay-skin=primary] > i {
    border-color: var(--qa-primary) !important;
    background-color: var(--qa-primary);
    color: #fff;
}

.layui-form-radioed > i {
    color: var(--qa-primary);
}

/* ===== layer 弹窗：圆角 + 白底标题栏 + 分割线 + 按钮区 ===== */
.layui-layer {
    border-radius: var(--qa-radius-m);
    box-shadow: 0 8px 28px rgba(31, 45, 61, .18), 0 2px 8px rgba(31, 45, 61, .08);
}

.layui-layer-title {
    height: 48px;
    line-height: 48px;
    background: var(--qa-surface);
    color: var(--qa-text);
    font-weight: 500;
    border-bottom: 1px solid var(--qa-divider);
    border-radius: var(--qa-radius-m) var(--qa-radius-m) 0 0;
}

.layui-layer-btn {
    background: #fafbfd;
    border-top: 1px solid var(--qa-divider);
}

.layui-layer-btn a {
    height: 32px;
    line-height: 32px;
    border-color: #d9d9d9;
    border-radius: var(--qa-radius-s);
    color: var(--qa-text-2);
    transition: border-color var(--qa-ease), color var(--qa-ease),
                background-color var(--qa-ease);
}

.layui-layer-btn a:hover {
    border-color: var(--qa-primary);
    background-color: var(--qa-primary-weak);
    color: var(--qa-primary);
}

.layui-layer-btn .layui-layer-btn0 {
    border-color: transparent;
    background-color: var(--qa-primary);
    color: #fff;
}

.layui-layer-btn .layui-layer-btn0:hover {
    background-color: var(--qa-primary-hover);
    color: #fff;
}

/* 底部按钮内 Font Awesome 图标与文字间距 */
.layui-layer-btn a .fa {
    margin-right: 4px;
}

/* ===== 表格（.qa-table-card 内，卡片结构见 module.css）：
   Material Data Table 口径——去竖向网格线、仅保留水平分割线、
   浅底表头、行悬停态、固定列层次 ===== */
.qa-table-card .layui-table-view {
    border: none;
}

.qa-table-card .layui-table-header {
    border-bottom-color: var(--qa-divider-strong);
}

/* 去竖线：单元格只留底边（行分割线） */
.qa-table-card .layui-table td,
.qa-table-card .layui-table th {
    border-right: none;
}

.qa-table-card .layui-table td {
    border-bottom-color: var(--qa-row-divider);
}

.qa-table-card .layui-table th {
    border-bottom-color: var(--qa-divider-strong);
}

/* 表头：浅底 + 小字号 + 次级文字色 */
.qa-table-card .layui-table-view .layui-table th {
    background-color: #f7f9fc;
    color: var(--qa-text-2);
    font-size: 13px;
    font-weight: 600;
}

/* 行高微调（约 46px/行）：主表/表头/固定列为同一套 cell 高度，天然对齐 */
.qa-table-card .layui-table-cell {
    height: 36px;
    line-height: 26px;
}

/* 行悬停/点选/勾选：主色弱底 + 过渡 */
.qa-table-card .layui-table tbody tr {
    transition: background-color var(--qa-ease);
}

.qa-table-card .layui-table-hover,
.qa-table-card .layui-table-click {
    background-color: rgba(24, 144, 255, .05);
}

.qa-table-card .layui-table-checked {
    background-color: rgba(24, 144, 255, .08);
}

.qa-table-card .layui-table-checked.layui-table-hover,
.qa-table-card .layui-table-checked.layui-table-click {
    background-color: rgba(24, 144, 255, .12);
}

/* 固定右侧操作列：分割线 + 微阴影（滚动层次感） */
.qa-table-card .layui-table-fixed-r {
    border-left-color: var(--qa-divider);
    box-shadow: -6px 0 8px -4px rgba(31, 45, 61, .08);
}

/* 空数据 */
.qa-table-card .layui-none {
    color: var(--qa-text-3);
    padding: 40px 15px;
}

/* 排序箭头悬停主色 */
.qa-table-card .layui-table-sort .layui-table-sort-asc:hover {
    border-bottom-color: var(--qa-primary);
}

.qa-table-card .layui-table-sort .layui-table-sort-desc:hover {
    border-top-color: var(--qa-primary);
}

/* 表体滚动条 */
.qa-table-card .layui-table-body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.qa-table-card .layui-table-body::-webkit-scrollbar-thumb {
    background: #d0d7e0;
    border-radius: 4px;
}

.qa-table-card .layui-table-body::-webkit-scrollbar-thumb:hover {
    background: #b7c0cc;
}

/* ===== 分页栏：圆角页码 + 主色当前页胶囊 ===== */
.qa-table-card .layui-table-page {
    border-top-color: var(--qa-divider);
    background: var(--qa-surface);
}

.qa-table-card .layui-table-page .layui-laypage a,
.qa-table-card .layui-table-page .layui-laypage span {
    border-radius: var(--qa-radius-s);
    color: var(--qa-text-2);
    transition: background-color var(--qa-ease), color var(--qa-ease);
}

.qa-table-card .layui-table-page .layui-laypage a:hover {
    background-color: var(--qa-primary-weak);
    color: var(--qa-primary);
}

/* layui 当前页色块在内层 .layui-laypage-em（青绿），替换为主色 */
.qa-table-card .layui-table-page .layui-laypage-curr {
    border-radius: var(--qa-radius-s);
}

.qa-table-card .layui-table-page .layui-laypage-curr .layui-laypage-em {
    background-color: var(--qa-primary);
    border-radius: var(--qa-radius-s);
}

.qa-table-card .layui-table-page .layui-laypage-limits,
.qa-table-card .layui-table-page .layui-laypage-skip {
    color: var(--qa-text-2);
    font-size: 12px;
}

/* ===== 状态徽章：实心色块 → Material 墨粉胶囊 =====
   .layui-bg-green 在 layui 中带 !important，须同以 !important 对抗 */
.qa-table-card .layui-badge {
    height: 20px;
    line-height: 20px;
    padding: 0 10px;
    border-radius: 999px;
    background-color: rgba(255, 87, 34, .1);
    color: var(--qa-danger);
}

.qa-table-card .layui-badge.layui-bg-green {
    background-color: var(--qa-success-weak) !important;
    color: var(--qa-success-text) !important;
}