/* ==========================================================================
 * 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 类触发
 */
.layui-layer.ryLayer-common .layui-layer-title {
    margin-top: 0;
    height: 54px;
    line-height: 54px;
    font-size: var(--font-size-lg);              /* 16px */
    color: var(--color-text-strong);
    border-bottom: 1px solid var(--color-border-light);
}

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

.layui-layer.ryLayer-common .layui-layer-btn {
    height: 59px;
}

.layui-layer.ryLayer-common .layui-layer-btn0,
.layui-layer.ryLayer-common .layui-layer-btn1 {
    width: 60px;
}

/* ===== 抽屉共用样式（替代 _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 <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;
}