/**
 * hladmin 后台自有公共样式
 *
 * ── 放什么 ──────────────────────────────────────────────────────────────────
 *   只放「各页共用」的规则（目前是小屏自适应）。页面专属样式仍写在各自模板的 <style> 里 ——
 *   本文件在 {:asset_page_css_tags()} 里输出，位置在页面自己的 <style> **之前**，
 *   所以页面样式天然优先，不会被这里覆盖（需要强覆盖时才用 !important）。
 *
 * ── 加载方式与维护纪律 ───────────────────────────────────────────────────────
 *   登记在「系统配置 → 基础设置 → 静态资源 → 业务页 CSS 清单」(asset.page_css)，
 *   所有用 {:asset_page_css_tags()} 的后台页自动引入（框架主页走 shell 清单，不带本文件）。
 *   ⚠️ 改动本文件后请递增清单行里的 ?v=，否则浏览器仍用旧缓存。
 */

/* ── 页面底色（2026-10-24）───────────────────────────────────────────────────
   右侧内容区统一浅灰，与左侧白色菜单形成色块区隔（参考 Art Design Pro）；
   页内卡片保持白色，靠灰底产生层次。页面自己的 <style> 仍可覆盖。 */
body {
    background-color: #F5F6FA;
}

/* ── 内容卡片统一圆角与柔和阴影（2026-10-24）──────────────────────────────
   .panel 是各页通用的白卡片容器；这里统一提升圆角/阴影观感，
   页面自己的 .panel 样式在之后加载，如个别页需要不同仍可覆盖（不带 !important 时）。 */
.panel {
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(29, 35, 41, .05);
}

/* ── 筛选行里的下拉框宽度（桌面端）────────────────────────────────────────────
   layui 把 <select> 渲染成 .layui-form-select（div），页面原来写的
   `.filter .layui-select{width:190px}` 只作用到原生 select / input 上，
   渲染后的外层容器没有宽度约束，在 flex 行里会塌成很窄一条 —— 这里补齐。

   列表页有两套历史写法，都要补：
     · 体系B：.filter（menu/log/file 等，flex 布局）
     · 体系A：.search-panel + .layui-inline（user/role/dept 等，inline-block 布局），
       这批页面自带 style 只约束了 .layui-input/.layui-select，同样漏了渲染后的容器。 */
.filter .layui-form-select {
    width: 190px;
}

.search-panel .layui-form-select {
    width: 200px; /* 与这些页面自定的输入框宽 200px 对齐 */
}

/* ── 渲染后的下拉箭头位置（2026-10-26）────────────────────────────────────────
   layui 2.13 把「已渲染」标记（layui-unselect）加在**外层容器**上，不再加在标题
   输入框上。于是各页里 `.search-panel .layui-input:not(.layui-unselect){width:190px}`
   这类给普通输入框定宽的规则，会连渲染出来的标题输入框一起命中 ——
   输入框被撑成 190px、外层容器还是 200px，箭头又是按**容器**定位（right:10px），
   结果箭头贴到输入框右边框上/跑到框外（图库筛选行现场）。

   这里统一把标题输入框锁成与容器同宽：页面再怎么写输入框宽度都影响不到箭头。
   必须 !important —— 页面自己的 <style> 在本文件之后加载，同权重它会赢。 */
.layui-form-select .layui-select-title > .layui-input {
    width: 100% !important;
}

/* ── 小屏（≤768px：手机 / 平板竖屏）────────────────────────────────────────────
   后台是「框架页 + iframe」结构，小屏下最容易错位的就是筛选行与表单：
   layui 的控件默认给固定宽度（输入框 190px、label 110px），窄屏里会被挤成一条缝。
   统一在这里兜住，省得每个页面各写一遍媒体查询。 */
@media screen and (max-width: 768px) {
    /* 1) 筛选行：改成竖排，每个控件占满整行 */
    .filter {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .filter > * {
        width: 100% !important;
    }

    .filter .layui-input,
    .filter .layui-select,
    .filter .layui-form-select,
    .filter .layui-textarea {
        width: 100% !important;
    }

    .filter .layui-btn {
        width: 100%;
        margin-left: 0 !important;
    }

    /* 撑开空白的占位元素在小屏没有意义（改成竖排后反而会多出一段空隙） */
    .filter-spacer {
        display: none;
    }

    /* 2) 面板：内边距收紧；副标题（.d）从右浮动改为独占一行，避免被标题挤掉 */
    .panel {
        padding: 14px 12px 4px;
    }

    .panel-head .d {
        margin-left: 0;
        width: 100%;
        text-align: left;
        margin-top: 6px;
    }

    /* 3) 弹窗 / 页面表单：label 独占一行，输入框占满（layui 默认 label 固定宽度会挤压输入区） */
    .layui-form-item .layui-form-label {
        width: 100% !important;
        text-align: left;
        padding: 0 0 6px;
    }

    .layui-form-item .layui-input-block {
        margin-left: 0 !important;
    }

    /* 4) 指标卡片：一行一张，避免被压成窄条 */
    .card {
        flex: 1 1 100%;
    }

    /* 5) 体系A 列表页（.search-panel + .layui-inline 的旧布局：user / role / dept 等）
          同样竖排。体系B 的 .filter 由第 1 条兜住，体系A 的类名历史上漏了 ——
          窄屏里固定 200px 的筛选框会被挤对半换行，比竖排更难对齐 */
    .search-panel .layui-inline {
        display: block;
        width: 100%;
        margin-bottom: 8px;
    }

    .search-panel .layui-input,
    .search-panel .layui-select,
    .search-panel .layui-form-select {
        width: 100% !important;
    }

    /* 6) 页面上下留白收紧（iframe 内空间本来就小） */
    body {
        padding: 10px;
    }
}