/**
 * QY 项目通用 Layui Layer 视觉主题（后台 / 前台共享）
 *
 * 谁会用：
 *   - 后台 fragments/page-head.html → common.css 加载前注入此文件
 *   - 前台 fragments/portal-head.html → note.css 加载前注入此文件
 *
 * 为什么独立成文件：
 *   1) 历史上 common.css（蓝品牌）和 note.css（紫品牌）各自维护一份 .layui-layer-* 视觉，
 *      改一处忘一处；老版 layer 4.x 的 .layui-layer-ico*（雪碧图）规则两边都是 60+ 行死代码；
 *      :not(:has(.layui-layer-ico)) 兜底两边都把图标 dialog 的 padding 还原成无图标的 22px，
 *      文字撞图标。
 *   2) 单一来源后，弹窗视觉统一一份；品牌色通过 --layer-* CSS 变量在各自上下文 :root 覆盖。
 *
 * 兼容性硬规：
 *   当前 layui.js（layer 5.x）的 confirm/msg DOM 是
 *     <i class="layui-layer-face layui-icon layui-icon-success"></i>
 *   字体图标方案，旧版 .layui-layer-ico 雪碧图选择器永远匹配不到 → 不写。
 *
 * 如何在上下文里覆盖品牌色（变量名见底部默认声明）：
 *   后台 common.css 的 :root：
 *     --layer-question-from: var(--c-brand-400);
 *     --layer-question-to:   var(--c-brand-600);
 *     --layer-btn-primary:   var(--c-brand-600);
 *     --layer-btn-primary-hover: var(--c-brand-500);
 *     --layer-btn-primary-shadow: rgba(0, 107, 230, 0.18);
 *     --layer-btn-primary-shadow-hover: rgba(0, 107, 230, 0.26);
 *     --layer-btn-area-bg: var(--c-bg-soft);   // 后台用米色 bg
 *
 *   前台 note.css 的 :root：
 *     --layer-question-from: var(--p-primary);
 *     --layer-question-to:   var(--p-primary-deep);
 *     --layer-btn-primary:   var(--p-primary-deep);
 *     --layer-btn-primary-hover: var(--p-primary);
 *     --layer-btn-primary-shadow: rgba(124, 58, 237, 0.18);
 *     --layer-btn-primary-shadow-hover: rgba(124, 58, 237, 0.26);
 *     // --layer-btn-area-bg 不覆盖，用默认中性灰
 */

/* ============= 默认 token（中性靛蓝 + 灰） =============
 * 加载顺序：layer-theme.css 先，common.css / note.css 后。
 * 上下文 :root 里同名变量会覆盖这里的默认值。 */
:root {
    --layer-radius: 12px;
    --layer-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
    --layer-card: #FFFFFF;
    --layer-card-soft: #F8FAFC;
    --layer-border-color: #E5E7EB;
    --layer-text-strong: #1F2937;
    --layer-text-soft: #4B5563;
    --layer-text-regular: #334155;

    /* 主品牌色（按钮 primary / question 图标）：默认靛蓝；后台/前台各自覆盖为蓝/紫 */
    --layer-question-from: #818cf8;
    --layer-question-to:   #6366f1;
    --layer-btn-primary:   #6366f1;
    --layer-btn-primary-hover: #818cf8;
    --layer-btn-primary-shadow: rgba(99, 102, 241, 0.18);
    --layer-btn-primary-shadow-hover: rgba(99, 102, 241, 0.26);

    /* 副按钮 */
    --layer-btn-secondary-bg: #FFFFFF;
    --layer-btn-secondary-border: #E2E8F0;
    --layer-btn-secondary-color: #475569;

    /* 自定义弹窗（非 dialog）按钮区底色：后台覆盖为米色 */
    --layer-btn-area-bg: #F8FAFC;
}

/* ============= layer 容器通用外观 ============= */
.layui-layer {
    border-radius: var(--layer-radius) !important;
    box-shadow: var(--layer-shadow) !important;
    border: 1px solid var(--layer-border-color);
    overflow: hidden;
}

.layui-layer-title {
    background: var(--layer-card) !important;
    color: var(--layer-text-strong) !important;
    font-weight: 600;
    font-size: 14px;
    height: 42px !important;
    line-height: 42px !important;
    padding: 0 18px !important;
    border-bottom: 1px solid var(--layer-border-color);
    letter-spacing: 0.2px;
}
.layui-layer-setwin { top: 14px !important; }

/* ============= 通用按钮区（layer.open 自定义弹窗）============= */
.layui-layer-btn {
    padding: 10px 18px !important;
    border-top: 1px solid var(--layer-border-color);
    background: var(--layer-btn-area-bg);
}
.layui-layer-btn .layui-layer-btn0,
.layui-layer-btn .layui-layer-btn1,
.layui-layer-btn .layui-layer-btn2,
.layui-layer-btn .layui-layer-btn3 {
    border-radius: 999px !important;
    padding: 0 16px !important;
    height: 28px !important;
    line-height: 26px !important;
    font-size: 12px !important;
    font-weight: 500;
    transition: all 0.18s ease;
}
.layui-layer-btn .layui-layer-btn0 {
    background: var(--layer-btn-primary) !important;
    border-color: var(--layer-btn-primary) !important;
    color: #fff !important;
}
.layui-layer-btn .layui-layer-btn0:hover {
    background: var(--layer-btn-primary-hover) !important;
    box-shadow: 0 6px 14px var(--layer-btn-primary-shadow);
}
/* 副按钮统一白底灰边：覆盖 Layui 默认的 .layui-layer-btn2 / btn3 红字样式，
 * 避免 ['应用','删除图片','取消'] 这种 3 按钮场景下"取消"和前两个不一致。 */
.layui-layer-btn .layui-layer-btn1,
.layui-layer-btn .layui-layer-btn2,
.layui-layer-btn .layui-layer-btn3 {
    background: var(--layer-btn-secondary-bg) !important;
    border: 1px solid var(--layer-btn-secondary-border) !important;
    color: var(--layer-btn-secondary-color) !important;
}
.layui-layer-btn .layui-layer-btn1:hover,
.layui-layer-btn .layui-layer-btn2:hover,
.layui-layer-btn .layui-layer-btn3:hover {
    border-color: var(--layer-btn-primary) !important;
    color: var(--layer-btn-primary) !important;
}

/* ============= dialog（confirm / alert / msg 共享 type=0）=============
 * msg = type:0 + skin:'layui-layer-msg'，DOM 仍含 .layui-layer-dialog，命中此处规则。
 * page = type:1 (.layui-layer-page) / tips = type:4 (.layui-layer-tips) 不命中。
 */
.layui-layer.layui-layer-dialog {
    min-width: 300px !important;
    border: 1px solid var(--layer-border-color) !important;
}
/* display:flex + align-items:center 让"内容文字"按弹性盒子垂直居中（即便是单行 msg
 * 或两行 confirm，文字中线都落在内容框中间）。配合下方图标 top:50%/translateY，
 * 图标中线 = 内容框中线 = 文字中线，三线一致。
 * 不写 align-items 单写 flex 也行（默认 stretch），但 stretch 会拉伸 face 的绝对
 * 定位轨迹（实际 absolute 元素脱离流，不受 stretch 影响），所以用 center 更直白。 */
.layui-layer-dialog .layui-layer-content {
    padding: 14px 22px 14px 64px !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
    color: var(--layer-text-soft) !important;
    min-height: 32px;
    overflow: visible;
    display: flex !important;
    align-items: center;
}

/* 图标基础样式：渐变圆 + 反白字体。.layui-layer-face 同时挂着 .layui-icon-success
 * 等字体图标类，:before 由 Layui 字体提供字符；我们只把外形做成圆并把字符染白，
 * 不需要自己注入 ::before content。
 * top:50% + translateY(-50%) —— 让 32px 圆图标的视觉中线对齐内容框中线。
 * 历史 issue：原本写 top:18px（与 padding-top 对齐），但 32px 高的图标中心比 21px
 * 高的文字中心低 ~5px，msg 单行场景看起来"图标比文字偏下"。 */
.layui-layer-dialog .layui-layer-content .layui-layer-face {
    position: absolute !important;
    top: 50% !important;
    left: 20px !important;
    transform: translateY(-50%) !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    font-size: 18px !important;
    line-height: 1 !important;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
    background: linear-gradient(135deg, var(--layer-question-from), var(--layer-question-to));
}
/* 不同图标对应不同语义色：tips 蓝 / success 绿 / error 红 / question 主品牌
 * / lock 灰 / face-cry 橙 / face-smile 黄。
 * Layui 自身的 .layui-icon-success { color:#16b777 } 等会被这里 #fff 覆盖。 */
.layui-layer-dialog .layui-layer-content .layui-layer-face.layui-icon-tips {
    background: linear-gradient(135deg, #60a5fa, #2563eb);
}
.layui-layer-dialog .layui-layer-content .layui-layer-face.layui-icon-success {
    background: linear-gradient(135deg, #34d399, #059669);
}
.layui-layer-dialog .layui-layer-content .layui-layer-face.layui-icon-error {
    background: linear-gradient(135deg, #fb7185, #e11d48);
}
.layui-layer-dialog .layui-layer-content .layui-layer-face.layui-icon-question {
    background: linear-gradient(135deg, var(--layer-question-from), var(--layer-question-to));
}
.layui-layer-dialog .layui-layer-content .layui-layer-face.layui-icon-lock {
    background: linear-gradient(135deg, #94a3b8, #475569);
}
.layui-layer-dialog .layui-layer-content .layui-layer-face.layui-icon-face-cry {
    background: linear-gradient(135deg, #fb923c, #ea580c);
}
.layui-layer-dialog .layui-layer-content .layui-layer-face.layui-icon-face-smile {
    background: linear-gradient(135deg, #fbbf24, #d97706);
}

/* dialog 标题：去掉底分隔线，让标题与内容一体（覆盖通用 .layui-layer-title 的边框） */
.layui-layer-dialog > .layui-layer-title {
    border-bottom: none !important;
    height: 34px !important;
    line-height: 34px !important;
    padding: 0 18px !important;
    background: transparent !important;
    font-size: 14px !important;
}

/* dialog 内容若没有图标（layer.open icon 默认 -1）需要还原 padding，
 * 否则纯文字提示也会被推到 64px 缩进。
 * 用 .layui-layer-face 而不是 .layui-layer-ico —— 见文件顶部迁移说明。 */
.layui-layer-dialog .layui-layer-content:not(:has(.layui-layer-face)) {
    padding: 18px 22px !important;
}

/* dialog 按钮区：覆盖通用 .layui-layer-btn 的灰底/分隔线 */
.layui-layer-dialog > .layui-layer-btn {
    padding: 4px 18px 16px !important;
    border-top: none !important;
    background: transparent !important;
    text-align: right;
}
.layui-layer-dialog > .layui-layer-btn .layui-layer-btn0,
.layui-layer-dialog > .layui-layer-btn .layui-layer-btn1,
.layui-layer-dialog > .layui-layer-btn .layui-layer-btn2,
.layui-layer-dialog > .layui-layer-btn .layui-layer-btn3 {
    height: 28px !important;
    line-height: 28px !important;
    padding: 0px 18px !important;
    font-size: 12px !important;
    min-width: 64px;
    border-radius: 8px !important;
    margin-left: 8px;
    transition: all 0.18s ease;
}
.layui-layer-dialog > .layui-layer-btn .layui-layer-btn0 {
    box-shadow: 0 4px 10px var(--layer-btn-primary-shadow);
}
.layui-layer-dialog > .layui-layer-btn .layui-layer-btn0:hover {
    box-shadow: 0 6px 14px var(--layer-btn-primary-shadow-hover);
    transform: translateY(-1px);
}

/* ============= layer.msg（轻提示）外观微调 ============= */
.layui-layer-msg {
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
}

/* ============= 遮罩 =============
 * 默认 Layui 是 #000 0.3，质感偏暗硬；改成略带蓝灰的暗色 + 轻微模糊，
 * 强化"模态聚焦"。 */
.layui-layer-shade {
    background-color: rgba(15, 23, 42, 0.42) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}