/* ============================================================================
 * 表单控件宽度自适应规范（2026-10-14）
 * ----------------------------------------------------------------------------
 * 目标（国内后台管理系统通用表单排版）：
 *   ① 标签固定宽度、不被压缩；输入组件统一放在标签右侧；
 *   ② 单行控件占满控件区但设「上限」，不再撑满整行导致过长；
 *   ③ 短选项控件设「下限」，不会挤得过窄；
 *   ④ 长文本（多行输入）允许更宽，但仍封顶，禁止无限拉伸；
 *   ⑤ 控件高度不变，仅约束横向宽度；长短控件视觉均衡、左右对齐整齐。
 *
 * 说明：仅覆盖宽度布局，不改动任何表单业务逻辑与校验规则。
 *      使用 !important 以覆盖各页面历史上写死的 style="width:XXXpx"。
 *      规则只作用于 `.el-form-item__content` 的直接子控件，
 *      因此工具栏（.toolbar）里的筛选控件、非表单区域不受影响。
 * ========================================================================== */

/* 0) 可调参数（改这一处即可整体放宽/收紧） */
:root {
  --form-ctl-min: 180px;        /* 单行控件最小宽度：防止过窄 */
  --form-ctl-max: 420px;        /* 单行控件最大宽度：防止撑满整行 */
  --form-textarea-max: 600px;   /* 多行文本最大宽度：允许更长但封顶 */
}

/* 1) 标签固定宽度，不被压缩变形 */
.el-form-item__label { flex-shrink: 0; }

/* 2) 控件区：允许自适应伸缩，不撑破所在行 */
.el-form-item__content { min-width: 0; }

/* 3) 单行控件（文本框 / 下拉 / 日期 / 时间 / 数字 / 级联 / 树选择）
      统一铺满控件区宽度，并同时收敛上限与下限。
      覆盖历史写死的 px 宽（如 110px / 160px / 240px）。 */
.el-form-item__content > .el-input,
.el-form-item__content > .el-select,
.el-form-item__content > .el-date-editor,
.el-form-item__content > .el-time-picker,
.el-form-item__content > .el-cascader,
.el-form-item__content > .el-input-number,
.el-form-item__content > .el-tree-select {
  width: 100% !important;
  min-width: var(--form-ctl-min);
  max-width: var(--form-ctl-max);
}

/* 4) 多行文本：允许比单行更长，但仍设上限，禁止无限拉伸 */
.el-form-item__content > .el-textarea {
  width: 100% !important;
  max-width: var(--form-textarea-max);
}

/* 5) 多控件同行容器（如「时长 + 单位」「男士 + 女士」）：
      整体收敛到与单行控件同一上限，内部子控件仍按 flex 均分 → 视觉均衡。
      仅匹配无自定义 class 的纯布局 div，避免误伤业务容器的既有宽度。 */
.el-form-item__content > div:not([class]) {
  width: 100%;
  max-width: var(--form-ctl-max);
}

/* 6) 兜底：表单内其它直系元素（文本、标签、按钮组）不得横向溢出控件区 */
.el-form-item__content > * { max-width: 100%; }

/* 7) 弹窗底部操作区（确认 / 返回）始终可见：
      正文超高时只让正文滚动，按钮永远不会被挤出视口（小屏尤其明显）。
      【2026-10-15】背景：index.html 是「DOM 内模板」，浏览器 HTML 解析器不认
      `<el-alert ... />` 这类自闭合写法，会把后续兄弟节点（含 <template #footer>）
      吞进该标签内部，导致弹窗 footer 整块丢失、按钮消失。标签已全部改为显式闭合；
      此处再兜一道，保证按钮无论如何都在视野内。 */
.el-dialog__body { max-height: 62vh; overflow-y: auto; }
.el-dialog.is-fullscreen .el-dialog__body { max-height: none; }
.el-dialog__footer { flex-shrink: 0; }