/*
 * 统一页头 (pangu-page-header)
 * ---------------------------------------------------------------------------
 * 来源：component-spec.html 模块 1「页头统一规范体系」三种排列。
 * 槽位固定：左 lead（标题+说明） / 中 metrics（关键统计） / 右 actions（操作）。
 * 主操作永远在最右侧，每页最多一个 primary。
 *
 * 全新 pangu- 前缀，legacy.css 中 0 处同名规则 → 无需任何 !important。
 * 旧的 .console-page-head / .console-head-actions / .console-orders-header
 * 已被本文件取代。
 */

/* ==========================================================================
   基础框架（排列 A：标题 + 说明 + 右侧操作）
   ========================================================================== */
.pangu-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pangu-space-4);
  flex-wrap: wrap;
  min-width: 0;
}

.pangu-header-lead {
  display: flex;
  flex-direction: column;
  gap: var(--pangu-space-1);
  min-width: 0;
  flex: 1 1 260px;
}

.pangu-header-title-row {
  display: flex;
  align-items: center;
  gap: var(--pangu-space-3);
  flex-wrap: wrap;
}

.pangu-header-title {
  margin: 0;
  font-size: var(--pangu-fs-lg);
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--pangu-text);
}

.pangu-header-sub {
  margin: 0;
  font-size: var(--pangu-fs-sm);
  font-weight: 400;
  line-height: 1.4;
  color: var(--pangu-text-2);
}

/* 右侧操作区：主操作锁定最右，次操作紧邻其左 */
.pangu-header-actions {
  display: flex;
  align-items: center;
  gap: var(--pangu-space-3);
  margin-left: auto;
  flex: 0 0 auto;
}

/* ==========================================================================
   排列 B：带关键统计指标的页头
   ========================================================================== */
.pangu-header-metrics-strip {
  display: flex;
  align-items: center;
  gap: var(--pangu-space-4);
  padding: var(--pangu-space-2) var(--pangu-space-4);
  background: var(--pangu-bg-hover);
  border: 1px solid var(--pangu-border);
  border-radius: var(--pangu-radius-sm);
  flex: 0 1 auto;
  min-width: 0;
}

.pangu-header-metric-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pangu-header-metric-label {
  font-size: var(--pangu-fs-xs);
  line-height: 1.3;
  color: var(--pangu-text-3);
  white-space: nowrap;
}

.pangu-header-metric-value {
  font-size: var(--pangu-fs-md);
  font-weight: 700;
  line-height: 1.3;
  color: var(--pangu-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pangu-header-metric-divider {
  width: 1px;
  height: 20px;
  background: var(--pangu-border);
  flex: 0 0 auto;
}

/* ==========================================================================
   排列 C：页头下方的分段控制 + 筛选行
   ========================================================================== */
.pangu-header-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pangu-space-4);
  margin-top: var(--pangu-space-4);
  padding-top: var(--pangu-space-4);
  border-top: 1px solid var(--pangu-border);
  flex-wrap: wrap;
}

/* ==========================================================================
   标题归属开关
   ---------------------------------------------------------------------------
   默认（方案 A，与线上现状一致）：标题+说明由顶栏 #topbarPageTitle 承担，
   页内 lead 全程隐藏，保证标题只出现一次。
   加 html.pangu-headline-inpage（方案 B）：标题回到页内页头，顶栏只留操作区。
   ========================================================================== */

/* -- 方案 A：页内 lead 全程隐藏，标题只由顶栏承担（= 线上现状） -- */
html:not(.pangu-headline-inpage) .pangu-header-lead {
  display: none;
}

/* 只有 lead、没有任何操作的页头，不占 .console-content 的网格行 */
html:not(.pangu-headline-inpage) .pangu-page-header.is-lead-only {
  display: none;
}

/* -- 方案 B：页内页头承担标题，顶栏让位 -- */
html.pangu-headline-inpage .console-topbar-title {
  display: none;
}

/* ==========================================================================
   响应式（断点只用 540 / 768 / 1024 / 1280）
   ========================================================================== */
@media (max-width: 1024px) {
  .pangu-header-metrics-strip {
    order: 3;
    width: 100%;
    overflow-x: auto;
  }
}

/* 手机端（底部导航形态）不做任何改动：按钮保持原来的自然宽度，
   只允许换行，避免撑破 375px 宽的屏幕。不设 width:100%、不拉伸按钮。 */
@media (max-width: 768px) {
  .pangu-header-actions {
    flex-wrap: wrap;
  }

  .pangu-header-filter-row {
    margin-top: var(--pangu-space-3);
    padding-top: var(--pangu-space-3);
  }
}