/* ==========================================================================
   page-common.css —— 后台业务页面通用样式（页面级复用层）
   --------------------------------------------------------------------------
   来源：重审 qy_business_console/src/views 全部页面后，从各页重复的 scoped
         样式抽取而来（列表/表格页、配置页、Dashboard 页共 15+ 个页面）。

   依赖：
     1. colors.css        —— 设计令牌（颜色变量），必须先于本文件加载
     2. public/global.css —— 通用按钮/文本/标签小部件（regularButton、
                            holoButton、filledButton、basicTagItem、
                            regularButtonText1~3、regularTitleText 等）

   约定：
     - 本文件只使用 var(--xxx) 设计令牌，禁止直接写色值/硬编码；
     - 新页面只要套用本文件类名，无需再在 <style scoped> 中重复定义；
     - 旧页面中的同名 scoped 定义优先级更高，不会被本文件影响，可逐步删除重复。

   本文件为“纯 CSS”，不使用嵌套、不使用 :deep()、不使用 less/scss 语法。
   ========================================================================== */

/* ==========================================================================
   1. 页面容器 .pageContent
   --------------------------------------------------------------------------
   页面根节点（路由组件第一层 div）。默认：占满内容区、纵向 flex。
   旧页面中 QA/配置多列布局 = .pageContent + flex-direction: row + gap；
   整个页面是一张白卡（Prompt 管理）时用 --panel。
   ========================================================================== */
.pageContent {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

/* 多列内容（左侧列表 + 右侧详情/配置），横向排列 */
.pageContent--row {
  flex-direction: row;
  gap: 20px;
}

/* 内容宽度自适应（fit-content），常用于行内放置若干张卡片 */
.pageContent--fit {
  width: fit-content;
  min-width: 100%;
  min-height: 100%;
}

/* 区块间距 20px（与 --fit 组合使用：列排布多张卡片） */
.pageContent--stack {
  gap: 20px;
}

/* 页面本身就是一张白卡（无外层面板时） */
.pageContent--panel {
  box-sizing: border-box;
  padding: 20px 24px;
  background-color: var(--regularBoxBackground);
  border-radius: 6px;
  overflow-y: auto;
}

/* ==========================================================================
   2. 白色内容面板（每页最常用的“一块内容”容器）
   --------------------------------------------------------------------------
   页面统计区 / 搜索表格区 / 配置区都长这样：
     面板 = 白底 + 圆角 6px + 内边距 16px/24px + 纵向 flex。
   通常会再叠加 public/global.css 的 .shadowedContentBox（阴影）。
   旧页面命名不一（.sectionDisplayBox / .wordDisplayBox / .quotaDisplayBox /
   .logDisplayBox / .sceneDetailBox 等），新代码统一用 .panelBox。
   ========================================================================== */
.panelBox,
.sectionDisplayBox,
.wordDisplayBox,
.quotaDisplayBox,
.logDisplayBox {
  flex: 1;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 16px 24px;
  border-radius: 6px;
  background-color: var(--regularBoxBackground);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

/* 面板自身不需要占满高度（如固定在顶部的简报面板） */
.panelBox--auto {
  flex: none;
}

/* 横向布局的面板（头部信息 + 操作按钮等） */
.panelBox--row {
  flex-direction: row;
  align-items: center;
}

/* ==========================================================================
   3. 页面顶部分类标签条 .pageTabBox（二级页面 Tab）
   --------------------------------------------------------------------------
   结构：.pageTabBox > .tabItem + 一个绝对定位的 .tabIndicator 滑动条。
   滑动条 left/width 由 JS 动态计算并内联覆盖。
   ========================================================================== */
.pageTabBox {
  flex-shrink: 0;
  width: 100%;
  height: 56px;
  box-sizing: border-box;
  padding: 4px 20px;
  border-radius: 6px;
  background-color: var(--regularBoxBackground);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}

.pageTabBox .tabItem {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 0 12px;
  height: 100%;
  user-select: none;
}

.pageTabBox .tabIndicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 1.5px;
  background-color: var(--mainColor);
  transition:
    left 0.3s ease,
    width 0.3s ease;
  z-index: 1;
  pointer-events: none;
}

/* 标签条下方通常跟一张内容面板（白卡），二者间留 0/20px 间隙，看页面需求 */

/* ==========================================================================
   4. 区块标题行 .titleLine（面板顶部：标题 + 搜索/操作按钮一行）
   --------------------------------------------------------------------------
   常与 public/global.css 的 .regularTitleText（16px/24px/t1Text）配合：
     <div class="titleLine">
       <div class="regularTitleText">标题</div>
       <div style="height:1px; flex:1;"></div>   <!-- 弹性占位 -->
       <el-input class="searchInput"/> / 按钮 ...
     </div>
   ========================================================================== */
.titleLine {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 16px 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* 标题行内右侧对齐按钮时，中间用该弹性占位 */
.flexSpacer {
  height: 1px;
  flex: 1;
  min-width: 1px;
}

/* ==========================================================================
   5. 搜索/筛选控件 .searchInput
   --------------------------------------------------------------------------
   用法：直接给 el-input / el-select / el-date-picker 挂 class="searchInput"
   （Element Plus 会把 class 落到组件根节点上）。
   ========================================================================== */
/* 用法：直接给 el-input / el-select / el-date-picker 挂 class="searchInput"
   （Element Plus 会把 class 落到组件根节点上）。
   注意：不要再给子元素加 margin-right——水平间距由所在行的 gap 负责，
   否则会与 gap 叠加出双倍间距。 */
.searchInput {
  width: 200px;
  height: 32px;
}

/* 稍宽的搜索框（旧页面 210px 变体，无右间距） */
.searchInput--block {
  width: 210px;
}

/* 搜索操作行（.basicFlexRow 的“可换行”增强，二者组合使用）：
   容器宽度被压缩时子项自动换行、行距 10px，而不是挤作一团。
   新页面更推荐直接用 .titleLine（自带换行与 gap 间距）。 */
.searchRow {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 10px;
}

/* ==========================================================================
   6. 表格上方工具行 / 行内操作
   ========================================================================== */
/* 表格标签、行操作按钮的水平排列容器 */
.tableFlexRowBox,
.toolbarRow {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}

/* 表格“操作”列内的文字按钮（默认色，用时内联/修饰覆盖颜色） */
.optionButton {
  font-size: 14px;
  line-height: 22px;
  user-select: none;
  cursor: pointer;
}

/* 状态圆点（表格里 6x6 的状态指示点；颜色用内联 style 指定令牌） */
.statusDot {
  width: 6px;
  height: 6px;
  border-radius: 100%;
  flex-shrink: 0;
  margin-right: 8px;
}

/* ==========================================================================
   7. Element Plus 表格统一样式（全应用默认）
   --------------------------------------------------------------------------
   旧页面在 scoped 里用 :deep 重复了 8 份相同代码，这里统一收口为全应用默认
   （页面内表格与弹窗内表格一致）：表头浅灰底 + 600 字重 + t1 文字；
   单元格细分隔线颜色。个别页面若需差异，请用更高的页面私有选择器覆盖。

   另：凡含“操作”列的 el-table，操作列固定右侧请在 <el-table-column> 上使用
   fixed="right" 模板属性（Element Plus 内建滚动实现），不要用 CSS 实现。
   ========================================================================== */
.el-table th.el-table__cell {
  border-bottom-color: var(--tableBorderColor);
  background-color: var(--lightBoxBackground);
  font-size: 14px;
  color: var(--t1Text);
  font-weight: 600;
}

.el-table td.el-table__cell {
  border-bottom-color: var(--tableBorderColor);
}

/* ==========================================================================
   8. 分页条 .paginationBox（表格面板底部右对齐）
   ========================================================================== */
.paginationBox {
  width: 100%;
  height: 64px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

/* 分页左侧的“xx-xx条 / 共N条”文本 */
.paginationInfo {
  font-size: 14px;
  color: var(--t1Text);
  margin-right: 16px;
  white-space: nowrap;
}

/* ==========================================================================
   9. 多行文本输入卡 .contentInput（弹窗/编辑区中的 textarea）
   --------------------------------------------------------------------------
   用法：<el-input class="contentInput" type="textarea" :rows="4"/>
   内部样式让文字与边框保持 12/16/40px 的留白并禁止拉伸。
   弹窗底部如需“字数统计/按钮”悬浮，用 .textareaWrapper + .textareaToolbar。
   ========================================================================== */
.contentInput .el-textarea__inner {
  box-sizing: border-box;
  padding: 12px 16px 40px 16px;
  font-size: 14px;
  line-height: 22px;
  resize: none;
}

.textareaWrapper {
  position: relative;
  width: 100%;
}

.textareaToolbar {
  position: absolute;
  right: 16px;
  bottom: 12px;
  display: flex;
  gap: 20px;
}

/* ==========================================================================
   10. Dashboard 简报/统计卡片（多个总览页复用）
   --------------------------------------------------------------------------
   .schoolBriefingBox：左图标右大数字的简报卡（宽自适应、min-width 450、
                       高 172、圆角 20）。图标/数字用绝对定位子元素：
     .briefingPic    —— 右上角配图（161x124）
     .briefingTitle  —— 左上标题（可叠 public 的 .regularTitleText）
     .briefingValue  —— 左上大数字（40px/600，颜色内联指定）
   ========================================================================== */
.schoolBriefingBox {
  flex: 1;
  flex-shrink: 0;
  min-width: 450px;
  height: 172px;
  border-radius: 20px;
  background-color: var(--regularBoxBackground);
  position: relative;
}

.schoolBriefingBox .briefingPic {
  width: 161px;
  height: 124px;
  position: absolute;
  top: 24px;
  right: 46px;
}

.schoolBriefingBox .briefingTitle {
  position: absolute;
  top: 47px;
  left: 46px;
}

.schoolBriefingBox .briefingValue {
  position: absolute;
  top: 91px;
  left: 46px;
  font-size: 40px;
  color: var(--t1Text);
  font-weight: 600;
}

/* 小号警示信息框（如“待处理/处理中”计数角标） */
.warningInfoBox {
  width: 123px;
  height: 67px;
  border: 1px solid var(--borderColor);
  position: relative;
}

.warningInfoBox .warningInfoNumber {
  position: absolute;
  top: 11px;
  width: 100%;
  text-align: center;
  font-size: 24px;
  line-height: 24px;
  color: var(--t1Text);
}

.warningInfoBox .warningInfoText {
  position: absolute;
  top: 42px;
  width: 100%;
  text-align: center;
  font-size: 10px;
  color: var(--t2Text);
}

/* 设置入口条（齿轮图标 + 文字，如“告警设置”） */
.settingButtonBox {
  width: 100%;
  height: 40px;
  border: 1px solid var(--borderColor);
  border-radius: 4px;
  position: relative;
  margin-bottom: 10px;
  user-select: none;
  cursor: pointer;
}

.settingButtonBox .settingIcon {
  position: absolute;
  top: 13px;
  left: 24px;
  width: 14px;
  height: 14px;
}

.settingButtonBox .settingText {
  position: absolute;
  top: 9px;
  left: 48px;
  font-size: 14px;
  line-height: 22px;
  color: var(--t1Text);
}

/* ==========================================================================
   11. 弹窗/面板内说明文字
   --------------------------------------------------------------------------
   弹窗骨架请用 public/global.css 的 .regularDialog / .dialogButtonBox /
   .freePartSplitLine / .addEditBody / .addEditButtons。
   ========================================================================== */
.dialogDecoText {
  font-size: 14px;
  line-height: 22px;
  color: var(--t1Text);
}

/* ==========================================================================
   12. 图标基座
   --------------------------------------------------------------------------
   42x42 圆角方块（主色底）→ public/global.css 的 .filledIconHolder；
   18/20px 圆形小图标框 → 本文件 .iconWithBackgroundFrame（默认 20px，
   需要 18px 时用 --small 修饰类）。
   ========================================================================== */
.iconWithBackgroundFrame {
  --frame-size: 20px;
  width: var(--frame-size);
  height: var(--frame-size);
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.iconWithBackgroundFrame--small {
  --frame-size: 18px;
}

/* ==========================================================================
   13. 通用开关（Element Plus el-switch 主题）
   --------------------------------------------------------------------------
   Element Plus 2.x 通过 CSS 变量控制开关颜色，直接内联/类上覆盖即可：
     style="--el-switch-on-color: var(--mainColor); --el-switch-off-color: var(--switchOff)"
   危险开关（如敏感词库“停用/启用”）：on=emergencyText / off=emergencyTextIDLE。
   ========================================================================== */

/* ==========================================================================
   其他
   --------------------------------------------------------------------------
   一些文本的样式，仅在内部只有文本没有包裹其他结构时使用，AI生成时除非确定需要生成的内容其内联样式已完整包含下方任意一个类的所有样式属性（属性名与值均一致），才可用该类替换这些属性并保留其他额外样式；若缺少该类任一属性，则不得使用这些类
   ========================================================================== */
.commonText1 {
  font-size: 14px;
  line-height: 22px;
  color: var(--t1Text);
}