html, body, #app { height: 100%; margin: 0; }
body {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  background: #f5f7fa;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #409eff;
  color: #fff;
  padding: 0 24px;
  height: 52px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.app-header .title { font-size: 18px; font-weight: 600; letter-spacing: 1px; }
.app-header .subtitle { font-size: 12px; opacity: .85; margin-left: 10px; }
.app-header .status { font-size: 12px; display: flex; align-items: center; gap: 12px; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.status-dot.ok { background: #67c23a; }
.status-dot.bad { background: #f56c6c; }

.app-main { padding: 12px 20px 24px; }
.app-main > .el-tabs > .el-tabs__header { background: #fff; padding: 0 12px; border-radius: 6px 6px 0 0; }
.app-main > .el-tabs .el-tab-pane { background: transparent; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: #fff;
  padding: 10px 12px;
  border-radius: 6px 6px 0 0;
}
.toolbar .grow { flex: 1; }
.toolbar + .el-table, .toolbar + * { margin-top: 0; }

.panel { background: #fff; border-radius: 0 0 6px 6px; padding: 0 12px 12px; }

.pager { display: flex; justify-content: flex-end; padding: 10px 4px 0; }

.overview-layout { display: flex; gap: 12px; align-items: stretch; }
.overview-filter {
  width: 230px; flex-shrink: 0; background: #fff; border-radius: 6px;
  padding: 10px; display: flex; flex-direction: column;
}
.overview-filter .list { flex: 1; overflow: auto; border: 1px solid #ebeef5; border-radius: 4px; padding: 6px; min-height: 200px; }
.overview-filter .list .el-checkbox { display: flex; margin: 0 0 4px; width: 100%; }
.overview-filter .list .el-checkbox .el-checkbox__label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.overview-filter .buttons { display: flex; gap: 8px; margin-top: 8px; }
.overview-content { flex: 1; background: #fff; border-radius: 6px; padding: 10px 12px; min-width: 0; }
.overview-totals { display: flex; gap: 32px; padding: 8px 4px 0; font-size: 14px; }
.overview-totals b { color: #409eff; font-size: 16px; }

.ops-cell .el-button { padding: 0; height: auto; }

.link-like { color: #409eff; cursor: pointer; }

.brief-desc .el-descriptions__label { width: 150px; }

.sum-row { font-weight: 700; }

.el-table .cell { word-break: break-all; }

.export-list-box { height: 220px; overflow: auto; border: 1px solid #ebeef5; border-radius: 4px; padding: 6px; }

/* ---------- AI 文件选择器 ---------- */
.file-picker { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.file-picker .file-chips { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ---------- AI 面板分区 ---------- */
.pane-title { font-weight: 600; margin: 12px 0 6px; }
.expand-box { padding: 6px 12px; }
.expand-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-weight: 600; }
.empty-hint { color: #909399; padding: 6px 0; }

/* ---------- 登录页 ---------- */
.login-wrap {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1d39c4 0%, #409eff 60%, #79bbff 100%);
}
.login-card {
  width: 360px;
  background: #fff;
  border-radius: 10px;
  padding: 36px 32px 30px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}
.login-title { font-size: 20px; font-weight: 700; text-align: center; color: #303133; }
.login-sub { font-size: 13px; color: #909399; text-align: center; margin: 8px 0 26px; }

/* ==========================================================================
   移动端适配
   --------------------------------------------------------------------------
   断点定义（与 static/js/common.js 的 MOBILE_MAX_WIDTH / NARROW_MAX_WIDTH 一致，
   改一处必须同步改另一处）：
     --mobile : <= 768px   手机
     --narrow : <= 1024px  窄屏（含平板竖屏、桌面窗口缩窄）
   原则：
     1. 不横向滚动整页 —— 需要横滚的只有表格容器 .table-wrap
     2. 可点区域 >= 44px（WCAG 2.5.5）
     3. hover 样式用 @media (hover: hover) 包裹，避免触屏"粘住"上一次点击
   ========================================================================== */

/* ---------- 表格容器：窄屏只在容器内横滚，操作列吸右 ---------- */
.table-wrap { width: 100%; }
.table-wrap .el-table { width: 100%; }

/* 上传拖拽区在窄屏占满宽度，去掉过大的上下外边距 */
.excel-upload { margin: 16px 0; display: block; }
.excel-upload .el-upload-dragger { width: 100%; }

/* ---------- 筛选栏自适应：替代模板里写死的 style="width: 220px" ---------- */
.filter-item { flex: 1 1 160px; min-width: 0; max-width: 240px; }
.filter-item-wide { flex: 2 1 240px; min-width: 0; max-width: 320px; }
/* el-select / el-input 在 flex 容器里默认 width:100% 会被压到 0，这里兜住 */
.filter-item > .el-select,
.filter-item > .el-input,
.filter-item-wide > .el-select,
.filter-item-wide > .el-input { width: 100%; }

/* ---------- 顶栏状态区：默认完整显示 ---------- */
.app-header .status { flex-shrink: 0; }
.status-text { white-space: nowrap; }
.header-user-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                    display: inline-block; vertical-align: -2px; }

@media (max-width: 1024px) {
  .app-main { padding: 10px 12px 20px; }
  .overview-filter { width: 190px; }
  .toolbar { padding: 8px 10px; }
}

@media (max-width: 768px) {
  /* ---------- 顶栏：收起文字，只留状态圆点；异常时才展开文字 ---------- */
  .app-header { height: auto !important; padding: 8px 12px; flex-wrap: wrap; gap: 6px; }
  .app-header .title { font-size: 15px; letter-spacing: 0; }
  .app-header .subtitle { display: none; }
  .app-header .status { font-size: 12px; gap: 8px; flex-wrap: wrap; width: 100%; }
  /* 正常状态只显示圆点；异常（.status-text.bad）时把文字放出来 */
  .status-text { display: none; }
  .status-text.bad { display: inline; color: #ffd8d8; }
  .status-dot { margin-right: 0; }
  .app-header .el-button { padding: 4px 8px; }

  /* ---------- 主区 / 页签 ---------- */
  .app-main { padding: 8px 8px 16px; }
  .app-main > .el-tabs > .el-tabs__header { padding: 0 6px; }
  /* 一级页签 8 个，手机上必须横向滚动而不是换行挤压 */
  .app-main > .el-tabs > .el-tabs__header .el-tabs__nav-wrap { overflow-x: auto; }
  .app-main > .el-tabs > .el-tabs__header .el-tabs__nav { white-space: nowrap; }
  .app-main > .el-tabs > .el-tabs__header .el-tabs__item { padding: 0 12px; font-size: 14px; }
  /* 二级页签（系列大盘、AI）同理 */
  .el-tabs__nav-wrap { overflow-x: auto; }
  .el-tabs__nav { white-space: nowrap; }

  /* ---------- 工具条 / 筛选栏：纵向堆叠 ---------- */
  .toolbar { flex-wrap: wrap; row-gap: 8px; padding: 8px 10px; border-radius: 8px 8px 0 0; }
  .toolbar .grow { display: none; }   /* 占位弹簧在堆叠布局里没意义，反而撑出空隙 */
  .toolbar > .el-button { flex: 1 1 calc(50% - 4px); margin-left: 0; }
  .toolbar > .el-button:only-of-type { flex: 1 1 100%; }
  .toolbar > span { font-size: 13px; }
  .filter-item, .filter-item-wide { flex: 1 1 100%; max-width: none; }
  .toolbar > .el-checkbox { flex: 1 1 100%; }

  /* 表格筛选图标在窄屏会挤掉列内容，隐藏（保留排序） */
  .el-table__column-filter-trigger { display: none; }

  /* ---------- 面板 / 分页 ---------- */
  .panel { padding: 0 8px 8px; border-radius: 0 0 8px 8px; }
  .pager { justify-content: center; }
  .pager .el-pagination { flex-wrap: wrap; justify-content: center; row-gap: 6px; }

  /* ---------- 总览页：筛选面板改为可折叠的上下布局 ---------- */
  .overview-layout { flex-direction: column; gap: 8px; }
  .overview-filter { width: auto; }
  .overview-filter .list { min-height: 120px; max-height: 180px; }
  .overview-totals { flex-direction: column; gap: 4px; padding: 8px 4px 0; }
  .overview-content { padding: 8px; }

  /* 描述列表：3 列挤压严重，标签收窄并允许内容换行 */
  .brief-desc .el-descriptions__label { width: 96px !important; }
  .brief-desc .el-descriptions__content { overflow-wrap: anywhere; }

  /* ---------- 对话框 ---------- */
  /* 顶部留白缩小，避免手机上对话框被顶到屏幕下方。
     注意：el-dialog 的宽度由组件 prop width 写成**行内**的 --el-dialog-width，
     行内变量无法用普通规则覆盖，所以模板统一改用 Viewport.dialogWidth()。
     这里再补一条 !important 兜底，覆盖任何漏改的对话框（例如第三方/未来新增的）。 */
  .el-dialog { --el-dialog-margin-top: 6vh; margin-bottom: 24px; max-width: 94vw !important; }
  .el-dialog__header { padding-right: 40px; }
  .el-dialog__title { font-size: 16px; }
  .el-dialog__body { padding: 12px 4px; }
  .el-dialog__footer { padding-top: 8px; }
  .el-dialog__footer .el-button { min-width: 88px; }
  .el-message-box { width: 92% !important; }

  /* 对话框内表单：标签改顶部对齐，输入框占满整行。
     Element Plus 2.8.8 的 .el-form-item 是 flex 行布局（不是老版 float），
     标签与内容都是它的直接 flex 子项，所以必须改 flex-direction 才能堆叠 —— 
     单改 label 的 float/display 是无效的（曾踩过）。
     标签宽度是行内 style，也要一并解除，否则仍占 72/90/100px。 */
  .el-form-item { display: flex; flex-direction: column; align-items: stretch; margin-bottom: 16px; }
  .el-form-item__label {
    width: auto !important;         /* 覆盖行内 label-width */
    justify-content: flex-start;
    text-align: left;
    padding: 0 0 4px;
    line-height: 1.4;
    margin-bottom: 0;
  }
  .el-form-item__content { margin-left: 0 !important; width: 100%; }
  /* 标签内的必填星号在顶部对齐时靠右浮动会跑位，这里保持紧随文字 */
  .el-form-item.is-required:not(.is-no-asterisk).asterisk-left > .el-form-item__label:before {
    margin-right: 4px;
  }
  /* 但表单内的行内说明文字要能换行，否则撑破 */
  .el-form-item__content > span[style*="margin-right"] { display: block; margin: 0 0 6px !important; }
  .el-input-number { width: 100% !important; }

  /* 导出选项列表等固定高度盒子改小 */
  .export-list-box { height: 180px; }
  .expand-box { padding: 4px 6px; }
  .expand-head { flex-wrap: wrap; gap: 6px; }

  /* AI 文件选择器：文件标签在窄屏允许换行 */
  .file-picker { width: 100%; }
  .file-picker .file-chips { width: 100%; }

  /* 隐藏次要列（模板上挂 .mobile-hide） */
  .mobile-hide { display: none !important; }

  /* ---------- 登录页：卡片占满可用宽度，去掉过大内边距 ---------- */
  .login-wrap { padding: 20px; box-sizing: border-box; }
  .login-card { width: 100%; max-width: 360px; padding: 28px 22px 24px; }
  .login-title { font-size: 18px; }
}

/* ---------- 触屏：放大可点区域，去掉 hover 粘滞 ---------- */
@media (hover: none) and (pointer: coarse) {
  .ops-cell .el-button { min-height: 36px; min-width: 44px; }
  .el-table .el-button.is-link { padding: 6px 2px; min-height: 32px; }
  .el-tabs__item { min-height: 44px; }
  .el-pagination button, .el-pagination .el-pager li { min-width: 34px; height: 34px; line-height: 34px; }
  .el-checkbox { min-height: 36px; }
  /* 操作列的下拉触发按钮 */
  .ops-more { min-height: 36px; }

  /* 对话框内的按钮（尤其是 size="small" 的「管理关联发票」「选择明细」等）
     在手机上只有 24px 高，点不中。统一抬到 36px。 */
  .el-dialog .el-button:not(.is-link) { min-height: 36px; }
  /* 对话框页脚的主按钮再抬一点，作为明确的"提交"目标。
     特异性需高于上面的 .el-dialog .el-button（同为两段选择器时后者更晚，故用 !important 兜底）。 */
  .el-dialog .el-dialog__footer .el-button { min-height: 44px !important; }
  /* 分页器的上下页按钮（导出对话框里的小分页） */
  .el-pagination.is-background button,
  .el-pagination--small button { min-width: 34px; height: 34px; }
  /* 下拉菜单项：手机上要能整行点中 */
  .el-dropdown-menu__item { min-height: 40px; line-height: 40px; }
  /* 单选框 / 开关 */
  .el-radio { min-height: 36px; }
  .el-switch { min-height: 32px; }
}

/* hover 效果只在真有悬停能力的设备上生效（触屏点击后 hover 会一直保持） */
@media (hover: hover) {
  .link-like:hover { text-decoration: underline; }
}