/* ==========================================================================
 * custom_layer.css — ryLayer 弹窗样式
 *
 * 加载位置：head.jsp，layui.css 之后（保证特异性能覆盖 layui 默认）
 * 配套：custom_layer.js（window.ryLayer）
 *
 * 命名规范：所有本文件的 class 以 ryLayer- 前缀，避免与 layui 原生冲突。
 * 使用方式：JS 里 `layero.addClass('ryLayer-xxx')`，不再用 `.css({...})` 注入 inline style。
 *
 * Phase 4 迁移进度：
 *   [✓] ryLayer-common — list() / form() 默认模式共用的标题/关闭按钮/底部按钮（2 处调用点去重）
 *   [✓] ryLayer-drawer — bottom/right 抽屉共用的标题/按钮/关闭按钮（2 处调用点去重）
 *   [—] toast / dialog / alert / barMsg — 刻意保留 inline style，不再迁移：
 *       · toast/barMsg 的 background/border-color/color 由 options 传入，动态绑定
 *       · dialog 的 titleBorder / contentBorder / higherTitle / hideTitleIcon 条件分支多
 *       · 这些内联样式都是单一调用点，无跨函数重复，抽 class 反而增加模板与 CSS 的同步成本
 *       · 后续若发现新重复模式再增补（新增 .ryLayer-xxx class 即可）
 *
 * 注意：layerEle 的位置相关样式（top/bottom/left/right/width/height）仍由 JS 的 .css() 注入，
 *      因为 layui layer.js 初始化时也会写 inline style，CSS 文件会被 inline 覆盖。
 *
 * 加载路径（三套入口，均需成对加载 design-tokens.css + custom_layer.css；
 *   custom_layer.css 依赖 design-tokens.css 里的 var(--color-*)/var(--font-*)）：
 *   - resource_css.jsp（iframe 业务页，head_ecaps_*.jsp 链路）
 *   - sysIndex-ecaps.jsp（shell 主框架）
 *   - head.jsp（error / blank / default 布局）
 *   均放在 layui.css 之后以保证特异性优先级。
 * ========================================================================== */

/* ===== 公共外壳/标题/按钮（替代 _applyCommonLayerStyle 里的 .css 调用） =====
 * 仅在非 bottom/right 抽屉位置应用；bottom/right 走各自的 ryLayer-drawer
 * 通过给 .layui-layer 加 .ryLayer-common 类触发
 * 视觉对标 SaaS modal：大圆角 + 阴影替边框 + 主按钮填充蓝/次按钮 ghost
 */
/* 外壳：大圆角 + 强阴影表达层级（border-radius 不再由 JS inline 注入，改由本 class 接管） */
.layui-layer.ryLayer-common {
    border-radius: var(--radius-2xl);            /* 14px */
    box-shadow: var(--shadow-modal-strong);
    overflow: hidden;                            /* 裁掉超出圆角的标题/底部直角 */
}

/* 标题：16px / 600，padding 撑高(不定高)，单行视觉 ≈56px、可容可选副标题两行 */
.layui-layer.ryLayer-common .layui-layer-title {
    margin-top: 0;
    height: auto;
    line-height: var(--line-height-tight);       /* 1.25 */
    padding: 17px var(--space-6);                 /* 17px 24px：单行总高 ≈56px */
    font-size: var(--font-size-lg);              /* 16px */
    font-weight: var(--font-weight-bold);        /* 700 — 命中字体 Bold face,保证任何机器/字体下标题都渲成粗 */
    color: var(--color-text-strong);
    border-bottom: 1px solid var(--color-border-light);
}

/* 标题区可选副标题：title 传 HTML 时附 <div class="ryLayer-title-sub">，渲染在主标题下方 */
.layui-layer.ryLayer-common .ryLayer-title-sub {
    margin-top: var(--space-1);                   /* 4px */
    font-size: var(--font-size-sm);              /* 12px */
    font-weight: var(--font-weight-normal);      /* 400 */
    line-height: var(--line-height-normal);      /* 1.5 */
    color: var(--color-neutral-text);
    white-space: normal;                         /* 覆盖 layui title 的 nowrap，允许副标题换行 */
    max-width: 100%;                             /* 不超出标题区宽度 */
    display: -webkit-box;
    -webkit-line-clamp: 2;                       /* 最多两行，超出省略号 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 关闭按钮：靠标题区顶部对齐(双行副标题时也贴右上角) */
.layui-layer.ryLayer-common .layui-layer-setwin {
    top: 18px;
    right: 20px;
}

.layui-layer.ryLayer-common .layui-layer-setwin a {
    transform: scale(1.1);
}

/* 底部按钮区：分割线 + 内边距(对齐由各 btn-align 变体决定) */
.layui-layer.ryLayer-common .layui-layer-btn {
    height: auto;
    padding: var(--space-3) var(--space-6);      /* 12px 24px */
    border-top: 1px solid var(--color-border-light);
}

/* 双/单按钮(非 center/left 对齐)：反转成 SaaS 序——取消居左 / 主按钮居右。
   覆盖裸 layer.open(无 align 类只 layui-layer-btn) + ryLayer 的 btn-r；排除 3 按钮 btn-c(保持 center) 与 btn-l。
   (row-reverse 下 flex-start 即右对齐) */
.layui-layer.ryLayer-common .layui-layer-btn:not(.layui-layer-btn-c):not(.layui-layer-btn-l) {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
}

/* 主按钮(确定)：填充系统主色蓝；次按钮(取消)：白底 ghost。统一 36 高 / 8 圆角 */
.layui-layer.ryLayer-common .layui-layer-btn .layui-layer-btn0,
.layui-layer.ryLayer-common .layui-layer-btn .layui-layer-btn1 {
    display: inline-block;
    width: auto;
    min-width: 76px;
    height: var(--control-height-lg);            /* 36px */
    line-height: 34px;
    margin: 0 0 0 var(--space-2);                /* 按钮间距 8px */
    padding: 0 var(--space-5);                   /* 0 20px */
    border-radius: var(--radius-lg);             /* 8px */
    font-size: var(--font-size-base);            /* 14px */
    text-align: center;
    transition: background var(--duration-fast) var(--ease-default),
                border-color var(--duration-fast) var(--ease-default);
}

.layui-layer.ryLayer-common .layui-layer-btn .layui-layer-btn0 {
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: #ffffff;
}

.layui-layer.ryLayer-common .layui-layer-btn .layui-layer-btn0:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.layui-layer.ryLayer-common .layui-layer-btn .layui-layer-btn1 {
    background: #ffffff;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}

.layui-layer.ryLayer-common .layui-layer-btn .layui-layer-btn1:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ===== 规则配置弹窗（ryLayer.dialog({ dialogType: 'ruleConfig' })） =====
 * 用于阈值/热度/策略矩阵类弹窗：标题说明 + 轻量分区 + 规则表格 + 固定底部按钮。
 * 业务 JSP 只写 ry-rule-* 结构，不再写页面私有 CSS。
 */
.layui-layer.ryLayer-rule-config {
    border-radius: var(--radius-2xl);
}

.layui-layer.ryLayer-rule-config .layui-layer-title {
    padding: var(--space-4) var(--space-6) var(--space-3);
}

.layui-layer.ryLayer-rule-config .layui-layer-title .layui-layer-title-span {
    display: block;
    padding-right: var(--space-8);
}

.layui-layer.ryLayer-rule-config .layui-layer-content {
    background: #ffffff;
    color: var(--color-text);
}

.layui-layer.ryLayer-footer-fixed {
    display: flex;
    flex-direction: column;
}

.layui-layer.ryLayer-footer-fixed .layui-layer-content {
    flex: 1;
}

.ry-rule-dialog {
    text-align: left;
    font-size: var(--font-size-base);
    color: var(--color-text);
}

.ry-rule-section {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.ry-rule-section:first-child {
    padding-top: 0;
}

.ry-rule-section:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.ry-rule-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-strong);
}

.ry-rule-section-title:before {
    content: "";
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: var(--color-success);
}

.ry-rule-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    line-height: var(--control-height-md);
}

.ry-rule-toolbar b,
.ry-rule-table th {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-strong);
}

.ry-rule-compose {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ry-rule-compose-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--control-height-md);
}

.ry-rule-compose-row-sub {
    gap: var(--space-2);
}

.ry-rule-compose-label {
    flex: none;
    color: var(--color-text-strong);
    font-weight: var(--font-weight-bold);
}

.ry-rule-compose-value {
    min-width: 0;
    color: var(--color-text);
}

.ry-rule-choice-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
}

.ry-rule-choice-group .radio-inline,
.ry-rule-compose-row-sub .checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-left: 0;
    padding-left: 0;
}

.ry-rule-choice-group .radio-inline input[type="radio"],
.ry-rule-compose-row-sub .checkbox-inline input[type="checkbox"] {
    position: static;
    margin: 0;
    vertical-align: middle;
}

.ry-rule-muted {
    color: var(--color-text-secondary);
}

.ry-rule-level {
    display: inline-flex;
    align-items: center;
    min-width: 38px;
    height: 26px;
    padding: 0 var(--space-2);
    border-radius: 13px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    line-height: 26px;
}

.ry-rule-level:before {
    content: "";
    width: 6px;
    height: 6px;
    margin-right: var(--space-1);
    border-radius: 50%;
}

.ry-rule-level-green {
    background: #e8f7ed;
    color: #16833a;
}

.ry-rule-level-green:before {
    background: #32c56a;
}

.ry-rule-level-yellow {
    background: #fff7d6;
    color: #8a6700;
}

.ry-rule-level-yellow:before {
    background: #f1a000;
}

.ry-rule-level-red {
    background: #fbdbde;
    color: #b4232d;
}

.ry-rule-level-red:before {
    background: #ec5e69;
}

.ry-rule-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

.ry-rule-table th,
.ry-rule-table td {
    padding: 6px var(--space-1);
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: middle;
    line-height: 1.45;
}

.ry-rule-table th {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-normal);
    background: #ffffff;
}

.ry-rule-table tbody tr:last-child td {
    border-bottom: 0;
}

.ry-rule-table .form-control {
    height: var(--control-height-md);
}

.ry-rule-table .input-group {
    max-width: 96px;
}

.ry-rule-table .input-group-addon {
    min-width: 28px;
    padding: 0 var(--space-1);
    background: #ffffff;
    color: var(--color-text-secondary);
}

.ry-rule-field-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2) var(--space-4);
}

.ry-rule-field {
    min-width: 0;
}

.ry-rule-field label {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-normal);
}

/*规则区表单控件撑满 grid 格子(覆盖 custom.css/customList.css 全局 .form-control 的 width:auto)*/
.ry-rule-field .form-control {
    display: block;
    width: 100%;
}

.ry-rule-field-wide {
    grid-column: span 2;
}

.ry-rule-hint {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-3);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.7;
}

.ry-rule-hint:before {
    content: "ⓘ";
    flex: none;
    color: var(--color-text-secondary);
}

.ry-rule-overstock {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-2);
}

.ry-rule-overstock .input-group {
    width: 104px;
}

@media (max-width: 900px) {
    .ry-rule-field-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ry-rule-field-wide {
        grid-column: span 2;
    }

}

/* ===== 抽屉共用样式（替代 _setBottomStyle / _setRightStyle 里的重复 .css 调用） =====
 * .ryLayer-drawer       共用背景/边框/按钮布局
 * .ryLayer-drawer-bottom 变体（仅在 bottom 模式加）
 * .ryLayer-drawer-right  变体（仅在 right 模式加）
 * 注：根元素 layerEle 的定位 top/bottom/left/right/width/height 仍在 JS 设置，CSS 无法覆盖 layui 的 inline style
 */
.layui-layer.ryLayer-drawer .ryLayer-page-content {
    padding: 0;
}

.layui-layer.ryLayer-drawer .layui-layer-title {
    background-color: var(--color-drawer-title-bg);
    text-align: center;
    border-top: 1px solid var(--color-drawer-title-bg);
    margin-top: 0;
    height: 52px;
    line-height: 41px;
    padding-left: 80px;
    font-size: var(--font-size-lg);              /* 16px */
    color: var(--color-text);
}

/* 标题文字居中加粗 — 原 JS 通过 append \3c style> 注入，现收到 CSS */
.layui-layer.ryLayer-drawer .layui-layer-title span {
    font-weight: 700 !important;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.layui-layer.ryLayer-drawer .layui-layer-content {
    border: none;
}

.layui-layer.ryLayer-drawer .layui-layer-btn {
    position: absolute;
    background-color: var(--color-drawer-title-bg);
    border: none;
    top: 0;
    padding-top: 7px;
    padding-bottom: 12px;
    height: auto;
}

/* 抽屉不显示右上角关闭按钮（由顶部自定义 unfold/minimize 按钮取代） */
.layui-layer.ryLayer-drawer .layui-layer-setwin {
    display: none;
}

/* iframe 抽屉内容区填充（title 52px + content 剩余） */
.layui-layer.ryLayer-drawer-bottom.ryLayer-drawer-iframe .layui-layer-content {
    height: calc(100% - 52px);
}

.layui-layer.ryLayer-drawer-right .layui-layer-content {
    height: calc(100% - 52px);
    max-height: none;
}

/* ===== loading/提示框样式修复 =====
 * 修复 layui-layer-msg 的 content 右边距问题（原生 padding: 0 0 0 60px 导致文字紧贴右边框）
 * 覆盖 layui-2.8.4/css/layui.css 第 7965 行
 */
.layui-layer-msg .layui-layer-content {
    padding: 0 20px 0 60px !important;
}

/* type:image 单图字段 —— 预览图 + 空占位(随弹窗内 .drawForm 渲染,layerSuccessFun 内挂上传) */
.layer-form-image__preview { max-width: 120px; max-height: 120px; border: 1px solid #e6e6e6; padding: 2px; display: block; }
.layer-form-image__empty { width: 120px; height: 120px; border: 1px dashed #ccc; color: #999; font-size: 12px;
                           display: flex; align-items: center; justify-content: center; text-align: center; cursor: pointer; }