/*
 * 业务模块统一工作台
 *
 * 页面信息层级固定为：PageHeader -> Command Bar -> Content Card。
 * 左侧导航是唯一模块目录；本样式不改变任何业务权限、状态或动作。
 */

:root {
  --workspace-surface: #ffffff;
  --workspace-subtle: #f7f8fb;
  --workspace-line: #e5e9f2;
  --workspace-text-soft: #667085;
  --workspace-toolbar-height: 32px;
  --workspace-surface-shadow: 0 4px 18px rgba(31, 45, 61, 0.055);
  --workspace-radius: 12px;
  --workspace-gap: 10px;
  --workspace-control-height: 32px;
}

/* 兼容保护：即使旧页面仍保留 PageTabs 节点，也不得显示第二套模块目录。 */
.app-shell .page-tabs {
  display: none !important;
}

/* 页面标题与第一块业务内容保持统一节奏。 */
.app-shell .main > .list-request-feedback > .page-head {
  margin-bottom: var(--workspace-gap);
}

.app-shell .page-head {
  min-height: 44px;
  align-items: flex-start;
}

.app-shell .page-head h1 {
  margin: 4px 0 0;
  font-size: 20px;
  line-height: 1.25;
}

.app-shell .page-head__actions {
  align-self: flex-end;
}

/* 工作台的空动作插槽不应在窄屏标题下方产生一整行间距。 */
.app-shell .page-head__actions:empty {
  display: none;
}

.app-shell .page-head .page-breadcrumb {
  font-size: 12px;
  margin-bottom: 4px;
}

/* 所有业务页遵循固定垂直节奏，禁止局部页面自行挤压模块间距。 */
.app-shell .main {
  --module-section-gap: var(--workspace-gap);
}

/*
 * ModuleWorkspace 是所有业务模块唯一的页面骨架。业务页面只提供筛选项、
 * 动作与数据内容，不能再自行组合卡片标题、命令栏和分页位置。
 */
.app-shell .module-workspace {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--module-section-gap);
}

.app-shell .module-workspace > .page-head,
.app-shell .module-workspace > .module-command-surface,
.app-shell .module-workspace > .module-content-surface,
.app-shell .module-workspace > .module-workspace-notice {
  margin: 0 !important;
}

.app-shell .module-workspace[data-variant="list"] > .module-content-surface {
  min-height: 360px;
}

.app-shell .module-workspace[data-variant="list"] > .module-content-surface > .el-card__body {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.app-shell .module-workspace[data-variant="list"] .module-content-surface .el-table {
  flex: 1 1 auto;
}

/* 只约束直接承载列表的骨架，不裁切表单、分栏页或弹窗。分页留在表格外。 */
.app-shell .main > .list-request-feedback > .module-workspace[data-variant="list"]:has(> .module-content-surface > .el-card__body > .el-table) {
  flex: 1 0 420px;
}

.app-shell .module-workspace[data-variant="list"] > .module-content-surface:has(> .el-card__body > .el-table) {
  min-height: 240px;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

.app-shell .module-workspace[data-variant="list"] > .module-content-surface:has(> .el-card__body > .el-table) > .el-card__body {
  flex: 1 1 0;
  overflow: hidden;
}

.app-shell .module-workspace[data-variant="list"] > .module-content-surface > .el-card__body > .el-table {
  min-height: 0;
  flex: 1 1 0;
}

/* 仅隐藏纯文字重复列表标题；业务说明、自定义标题内容和操作仍完整保留。 */
.app-shell .module-workspace[data-variant="list"] > .module-content-surface[data-title-only="true"] > .el-card__header {
  display: none;
}

.app-shell .main > .list-request-feedback > .el-alert,
.app-shell .main > .list-request-feedback > .intake-banner {
  margin: 0 0 var(--module-section-gap) !important;
}

/*
 * 独立搜索/筛选工具栏。
 * 覆盖新 BusinessFilters 以及尚在渐进迁移中的财务、质量、门户和项目页面。
 */
.app-shell .module-command-surface,
.app-shell .filter-card,
.app-shell .main > .list-request-feedback > .finance-filters,
.app-shell .main > .list-request-feedback > .ql-filters,
.app-shell .main > .list-request-feedback > .filters {
  width: 100%;
  margin: 0 0 var(--module-section-gap) !important;
  padding: 10px 12px !important;
  border: 1px solid var(--workspace-line) !important;
  border-radius: var(--workspace-radius) !important;
  background: var(--workspace-surface) !important;
  box-shadow: var(--workspace-surface-shadow) !important;
  box-sizing: border-box;
}

.app-shell .module-command-surface {
  flex: 0 0 auto !important;
  overflow: visible !important;
}

.app-shell .module-command-surface > .el-card__body,
.app-shell .filter-card > .el-card__body {
  padding: 0 !important;
}

.app-shell .module-command-surface > .el-card__body {
  height: auto !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
}

.app-shell .module-command-bar,
.app-shell .filters-card .filters,
.app-shell .filter-card .filters,
.app-shell .main > .list-request-feedback > .finance-filters,
.app-shell .main > .list-request-feedback > .ql-filters,
.app-shell .main > .list-request-feedback > .filters {
  min-height: var(--workspace-toolbar-height);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.app-shell .module-command-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.app-shell .module-command-filter-row,
.app-shell .module-command-operation-row {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-shell .module-command-filter-row {
  flex-wrap: nowrap;
}

.app-shell .module-command-operation-row {
  min-height: var(--workspace-control-height);
  justify-content: space-between;
  border-top: 1px solid #eef2f7;
  padding-top: 8px;
}

.app-shell .module-command-filters {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
}

.app-shell .module-command-filters > * {
  order: 3;
}

.app-shell .module-command-filter-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-shell .module-command-filters .filter-keyword,
.app-shell .module-command-filters > .el-input:first-of-type {
  order: 0;
  min-width: 260px;
  max-width: 480px;
  flex: 1 1 320px;
}

.app-shell .module-command-filters > .el-select {
  flex: 0 1 150px;
}

.app-shell .module-command-filters > .module-command-status-filter {
  order: 1;
  width: 180px;
  min-width: 160px;
  max-width: 200px;
  flex: 0 0 180px;
}

.app-shell .module-command-filters > .flat-date-picker,
.app-shell .module-command-filters > .el-date-editor {
  order: 2;
  min-width: 240px;
  max-width: 320px;
  flex: 0 1 280px;
}

.app-shell .module-command-summary {
  min-height: var(--workspace-control-height);
  margin-left: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--workspace-text-soft);
  font-size: 13px;
  white-space: nowrap;
}

.app-shell .module-command-actions,
.app-shell .module-command-actions > .module-actions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}

.app-shell .module-command-actions {
  min-width: 0;
  max-width: calc(100% - 120px);
  flex: 0 1 auto;
  margin-left: 0;
  padding: 0;
  justify-content: flex-end;
  border-top: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.app-shell .module-command-bar .el-input__wrapper,
.app-shell .module-command-bar .el-select__wrapper,
.app-shell .module-command-bar .flat-date-control,
.app-shell .ql-filters .el-input__wrapper,
.app-shell .ql-filters .el-select__wrapper,
.app-shell .entry-toolbar .el-input__wrapper,
.app-shell .entry-toolbar .el-select__wrapper {
  min-height: var(--workspace-control-height);
}

.app-shell .module-command-bar .el-input,
.app-shell .module-command-bar .el-select,
.app-shell .module-command-bar .flat-date-picker {
  --el-component-size: var(--workspace-control-height);
  font-size: 13px;
}

.app-shell .module-command-bar > .el-button,
.app-shell .module-command-filters > .el-button,
.app-shell .module-command-filter-actions .el-button,
.app-shell .module-command-actions .el-button,
.app-shell .ql-filters > .el-button,
.app-shell .entry-toolbar > .el-button {
  min-height: var(--workspace-control-height);
  padding: 6px 12px;
  font-size: 13px;
}

/* 第一输入框是工具栏主搜索，保持较宽并自适应填充。 */
.app-shell .filters-card .filter-keyword,
.app-shell .filter-card .filters > .el-input:first-child,
.app-shell .main > .list-request-feedback > .finance-filters > .el-input:first-child,
.app-shell .main > .list-request-feedback > .ql-filters > .el-input:first-child,
.app-shell .main > .list-request-feedback > .filters > .el-input:first-child,
.app-shell .entry-toolbar > .el-input:first-child {
  min-width: 280px;
  max-width: 520px;
  flex: 1 1 360px;
}

/* 给尚未显式使用 Search 图标的旧搜索框补统一视觉提示。 */
.app-shell .filter-card .filters > .el-input:first-child .el-input__wrapper::before,
.app-shell .main > .list-request-feedback > .finance-filters > .el-input:first-child .el-input__wrapper::before,
.app-shell .main > .list-request-feedback > .ql-filters > .el-input:first-child .el-input__wrapper::before,
.app-shell .main > .list-request-feedback > .filters > .el-input:first-child .el-input__wrapper::before,
.app-shell .entry-toolbar > .el-input:first-child .el-input__wrapper::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: #7b8798;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m21 21-4.35-4.35m2.35-5.65a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m21 21-4.35-4.35m2.35-5.65a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.app-shell .filter-count,
.app-shell .result-count,
.app-shell .ql-total,
.app-shell .selected-count {
  margin-left: auto;
  color: var(--workspace-text-soft);
  font-size: 13px;
  white-space: nowrap;
}

/* 旧质量/财务页的裸工具栏也必须服从同一左右分区。 */
.app-shell .main > .list-request-feedback > .ql-filters,
.app-shell .main > .list-request-feedback > .finance-filters,
.app-shell .main > .list-request-feedback > .filters {
  position: relative;
}

/*
 * 旧列表页把搜索和操作放在卡片标题内。统一为“标题行 + 浅色命令条”，
 * 在不移动业务按钮、不改变事件绑定的情况下获得一致的工作台结构。
 */
.app-shell .el-card__header .card-head:has(> .entry-toolbar),
.app-shell .el-card__header .card-head:has(> .module-actions) {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 12px;
}

/*
 * 旧页面将筛选器塞在内容卡片标题中。视觉上拆成与标准页面一致的
 * “独立命令栏 + 内容标题 + 表格”，不触碰任何按钮事件和业务逻辑。
 */
.app-shell .main > .list-request-feedback > .el-card:has(> .el-card__header .entry-toolbar) {
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.app-shell .main > .list-request-feedback > .el-card:has(> .el-card__header .entry-toolbar) > .el-card__header {
  padding: 0;
  border: 0;
}

.app-shell .main > .list-request-feedback > .el-card:has(> .el-card__header .entry-toolbar) .card-head {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.app-shell .main > .list-request-feedback > .el-card:has(> .el-card__header .entry-toolbar) .card-head > .entry-toolbar {
  order: -1;
  width: 100%;
  min-height: 70px;
  margin: 0 0 var(--module-section-gap);
  padding: 14px 16px;
  border: 1px solid var(--workspace-line);
  border-radius: var(--workspace-radius);
  background: var(--workspace-surface);
  box-shadow: var(--workspace-surface-shadow);
  box-sizing: border-box;
}

.app-shell .main > .list-request-feedback > .el-card:has(> .el-card__header .entry-toolbar) .card-head > strong {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--workspace-line);
  border-bottom: 0;
  border-radius: var(--workspace-radius) var(--workspace-radius) 0 0;
  background: var(--workspace-surface);
  font-size: 17px;
}

.app-shell .main > .list-request-feedback > .el-card:has(> .el-card__header .entry-toolbar) > .el-card__body {
  padding: 0 0 14px;
  overflow: hidden;
  border: 1px solid var(--workspace-line);
  border-radius: 0 0 var(--workspace-radius) var(--workspace-radius);
  background: var(--workspace-surface);
  box-shadow: var(--workspace-surface-shadow);
}

.app-shell .el-card__header .card-head > .entry-toolbar,
.app-shell .el-card__header .card-head > .module-actions {
  width: 100%;
  min-height: var(--workspace-toolbar-height);
  justify-content: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--workspace-line);
  border-radius: 8px;
  background: var(--workspace-subtle);
  box-sizing: border-box;
}

.app-shell .el-card__header .card-head > .entry-toolbar .el-tag:first-of-type,
.app-shell .el-card__header .card-head > .module-actions .el-tag:first-of-type {
  margin-left: auto;
}

/* 数据卡片统一为轻边框、紧凑标题、稳定表格表头。 */
.app-shell .main > .list-request-feedback > .el-card,
.app-shell .main > .list-request-feedback > .fill-card,
.app-shell .main > .list-request-feedback > .project-card,
.app-shell .main > .list-request-feedback > .application-card {
  border-color: var(--workspace-line);
  border-radius: var(--workspace-radius);
  box-shadow: var(--workspace-surface-shadow);
}

.app-shell .module-content-surface {
  margin: 0 0 var(--module-section-gap);
  overflow: hidden;
  border-color: var(--workspace-line);
  border-radius: var(--workspace-radius);
  box-shadow: var(--workspace-surface-shadow);
}

.app-shell .module-content-surface > .el-card__header {
  padding: 8px 12px;
  flex: 0 0 auto;
}

.app-shell .module-content-surface > .el-card__body {
  padding: 0;
}

.app-shell .module-content-heading {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.app-shell .module-content-copy strong {
  font-size: 17px;
  color: #182230;
}

.app-shell .module-content-copy p {
  margin: 4px 0 0;
  color: var(--workspace-text-soft);
  font-size: 13px;
}

.app-shell .module-content-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-shell .module-content-footer,
.app-shell .entry-pager,
.app-shell .workbench-pager,
.app-shell .finance-pager,
.app-shell .ql-pager,
.app-shell .pagination-row,
.app-shell .report-list-pager {
  min-height: 48px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 6px 12px;
  border-top: 1px solid var(--workspace-line);
  background: var(--workspace-surface);
  box-sizing: border-box;
}

/* 客户受理页的介绍横幅收敛为标准提示条，不再形成另一套视觉首页。 */
.app-shell .intake-banner {
  min-height: auto;
  padding: 12px 16px !important;
  border: 1px solid #dbe7ff !important;
  border-radius: 10px !important;
  background: #f6f9ff !important;
  box-shadow: none !important;
}

.app-shell .intake-banner .eyebrow,
.app-shell .intake-banner h2 {
  display: none;
}

.app-shell .intake-banner p {
  margin: 0;
  color: #526581;
}

.app-shell .intake-banner .banner-total {
  margin-left: auto;
}

.app-shell .fill-card > .el-card__header,
.app-shell .project-card > .el-card__header,
.app-shell .application-card > .el-card__header {
  padding: 16px 18px;
}

.app-shell .el-table {
  --el-table-header-bg-color: #f6f7f9;
  --el-table-border-color: #e6eaf0;
  --el-table-row-hover-bg-color: #f3f7ff;
}

.app-shell .el-table th.el-table__cell {
  height: 48px;
  color: #475467;
  font-weight: 700;
}

.app-shell .el-button + .el-button {
  margin-left: 0;
}

@media (max-width: 900px) {
  .app-shell .module-command-surface,
  .app-shell .filter-card,
  .app-shell .main > .list-request-feedback > .finance-filters,
  .app-shell .main > .list-request-feedback > .ql-filters,
  .app-shell .main > .list-request-feedback > .filters {
    padding: 12px !important;
  }

  .app-shell .filters-card .filter-keyword,
  .app-shell .filter-card .filters > .el-input:first-child,
  .app-shell .main > .list-request-feedback > .finance-filters > .el-input:first-child,
  .app-shell .main > .list-request-feedback > .ql-filters > .el-input:first-child,
  .app-shell .main > .list-request-feedback > .filters > .el-input:first-child,
  .app-shell .entry-toolbar > .el-input:first-child {
    width: 100% !important;
    min-width: 0;
    max-width: none;
    flex-basis: 100%;
  }

  .app-shell .filter-count,
  .app-shell .result-count,
  .app-shell .ql-total,
  .app-shell .selected-count {
    width: 100%;
    margin-left: 0;
  }

  .app-shell .module-command-actions {
    width: 100%;
    max-width: none;
    margin-left: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
    overflow: visible;
  }

  .app-shell .module-command-filter-row,
  .app-shell .module-command-filters {
    min-width: 100%;
    flex-basis: 100%;
    flex-wrap: wrap;
  }

  .app-shell .module-command-summary {
    width: 100%;
    margin-left: 0;
  }

  .app-shell .module-command-operation-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .app-shell .el-card__header .card-head > .entry-toolbar .el-tag:first-of-type,
  .app-shell .el-card__header .card-head > .module-actions .el-tag:first-of-type {
    margin-left: 0;
  }
}

.app-shell .main > .list-request-feedback { display: contents; }