/*
 * PLP App Visual Layer V1（puze-admin-app.css）
 * ------------------------------------------------------------------
 * 来源：「PLP-SCM 供应链总览 · 单文件版」确认稿（Claude Design，2026-07-26）。
 * 定位：PLP 全后台统一的**内容层组件**样式——页头、KPI 联排卡、阶段链路卡、
 *       统一明细表、状态胶囊、筛选控件、分页、搜索框、通知角标，
 *       以及可选的应用侧栏（浅色/品牌深蓝双形态、可折叠）。
 * 关系：与 puze-admin-design.css（登录页与外壳基线，合同 PLP-UNIFIED-ADMIN-UI）
 *       并行组合使用；本文件只新增 .puze-app* / .puze-kpi* / .puze-stage* /
 *       .puze-table* / .puze-pill* 等命名空间，不覆盖既有类。
 * 规则：业务页引入顺序 —— 先 design.css，后 app.css；页面根节点挂 .puze-app。
 */

:root {
  /* —— 内容层新增 token（基础色沿用统一契约） —— */
  --puze-app-color-ink: #172033;
  --puze-app-color-muted: #667085;
  --puze-app-color-faint: #98a2b3;
  --puze-app-color-line: #dbe3ef;
  --puze-app-color-paper: #f4f7fb;
  --puze-app-color-panel: #ffffff;
  --puze-app-color-primary: #1f418f;
  --puze-app-color-primary-strong: #16306b; /* 主按钮 hover */
  --puze-app-color-selected: #f7faff;       /* 选中卡片底 */
  --puze-app-color-row-hover: #f9fbfe;      /* 表格行 hover */
  --puze-app-color-chip: #e3ecfb;           /* 品牌代号底 */
  --puze-app-color-sidebar: #eef3fb;
  --puze-app-color-sidebar-active: #dfe8f6;

  /* 语义色（色值/浅底成对，对应状态胶囊与提示行） */
  --puze-tone-blue: #1f418f;   --puze-tone-blue-bg: #edf4ff;
  --puze-tone-teal: #169e9c;   --puze-tone-teal-bg: rgba(22, 158, 156, 0.1);
  --puze-tone-gold: #887850;   --puze-tone-gold-bg: rgba(136, 120, 80, 0.12);
  --puze-tone-red: #a44455;    --puze-tone-red-bg: rgba(164, 68, 85, 0.1);
  --puze-tone-green: #27745f;  --puze-tone-green-bg: rgba(39, 116, 95, 0.1);
  --puze-tone-gray: #667085;   --puze-tone-gray-bg: #f4f7fb;

  --puze-app-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Microsoft YaHei", sans-serif;
  --puze-app-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", monospace;

  --puze-app-radius: 8px;
  --puze-app-cell-pad-y: 9px;   /* 紧凑密度；宽松=13px（.puze-app--loose） */

  /* —— 间距节奏（全局）——
   * gap：同一节内相邻模块的间距；gap-section：新节开始前的留白。
   * 节标题（.puze-section-head）自带 margin-top 补足到 gap-section，
   * 使「节标题贴近自己的内容、远离上一节」形成层级节奏。 */
  --puze-app-gap: 16px;
  --puze-app-gap-section: 40px;
  --puze-app-content-max: 1760px; /* 阅读型页面（--capped 修饰类）的内容列上限；数据密集页默认全幅 */
}

/* ================================================================ */
/* 应用根与内容区                                                     */
/* ================================================================ */

.puze-app {
  font-family: var(--puze-app-font);
  font-size: 13px;
  color: var(--puze-app-color-ink);
  background: var(--puze-app-color-paper);
}

.puze-app--loose {
  --puze-app-cell-pad-y: 13px;
}

.puze-app__main {
  flex: 1;
  min-width: 0;
  background: var(--puze-app-color-panel);
  padding: 20px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: var(--puze-app-gap);
  width: 100%;
}

/* 阅读型页面（表单/文档/详情）可选限宽；数据密集页默认全幅 */
.puze-app__main--capped {
  max-width: var(--puze-app-content-max);
  margin: 0 auto;
}

/* ================================================================ */
/* 页头：标题 · 周期说明 · 动作区                                      */
/* ================================================================ */

.puze-page-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.puze-page-head__title {
  font-size: 20px;
  font-weight: 700;
}

.puze-page-head__meta {
  font-size: 12.5px;
  color: var(--puze-app-color-muted);
}

.puze-page-head__actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

/* 分节小标题（如「供应链链路」）：自带节前留白，形成模块节奏 */
.puze-section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: calc(var(--puze-app-gap-section) - var(--puze-app-gap));
  margin-bottom: 0;
}

.puze-section-head:first-child {
  margin-top: 0;
}

.puze-section-head__title {
  font-size: 15px;
  font-weight: 700;
}

.puze-section-head__hint {
  font-size: 12px;
  color: var(--puze-app-color-muted);
}

/* ================================================================ */
/* 按钮 / 筛选控件 / 搜索框 / 通知角标                                 */
/* ================================================================ */

.puze-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--puze-app-radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--puze-app-color-line);
  background: var(--puze-app-color-panel);
  color: var(--puze-app-color-ink);
  white-space: nowrap;
  user-select: none;
}

.puze-btn:hover {
  background: var(--puze-app-color-paper);
}

.puze-btn--primary {
  background: var(--puze-app-color-primary);
  border-color: var(--puze-app-color-primary);
  color: #fff;
}

.puze-btn--primary:hover {
  background: var(--puze-app-color-primary-strong);
}

/* 表格右上角的下拉筛选（供应商 / 时间范围） */
.puze-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--puze-app-radius);
  border: 1px solid var(--puze-app-color-line);
  background: var(--puze-app-color-panel);
  font-size: 12.5px;
  color: var(--puze-app-color-ink);
  cursor: pointer;
  white-space: nowrap;
}

.puze-filter-chip:hover {
  background: var(--puze-app-color-paper);
}

/* 顶栏全局搜索占位框 */
.puze-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--puze-app-color-line);
  border-radius: var(--puze-app-radius);
  background: var(--puze-app-color-panel);
  width: 270px;
  font-size: 12.5px;
  color: var(--puze-app-color-muted);
}

/* 通知未读角标 */
.puze-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--puze-tone-red);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ================================================================ */
/* KPI 联排卡：一条圆角容器，内部 1px 分隔                              */
/* ================================================================ */

.puze-kpi-strip {
  display: flex;
  border: 1px solid var(--puze-app-color-line);
  border-radius: var(--puze-app-radius);
  background: var(--puze-app-color-panel);
  overflow: hidden;
}

.puze-kpi {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  border-right: 1px solid var(--puze-app-color-line);
  overflow: hidden;
}

.puze-kpi__value {
  overflow: hidden;
  text-overflow: ellipsis;
}

.puze-kpi:last-child {
  border-right: none;
}

.puze-kpi__label {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--puze-app-color-muted);
  margin-bottom: 4px;
}

.puze-kpi__value {
  font-family: var(--puze-app-mono);
  font-size: 21px;
  font-weight: 600;
  white-space: nowrap;
}

.puze-kpi__value--danger {
  color: var(--puze-tone-red);
}

.puze-kpi__sub {
  font-size: 11.5px;
  color: var(--puze-app-color-muted);
  margin-left: 8px;
  font-weight: 400;
}

.puze-kpi__sub--up {
  color: var(--puze-tone-green);
}

.puze-kpi__sub--warn {
  color: var(--puze-tone-gold);
}

/* ================================================================ */
/* 阶段链路卡（供应链链路 / 任意流程分段导航）                          */
/* ================================================================ */

.puze-stage-strip {
  display: flex;
  border: 1px solid var(--puze-app-color-line);
  border-radius: var(--puze-app-radius);
  background: var(--puze-app-color-panel);
  overflow: hidden;
}

.puze-stage {
  flex: 1;
  min-width: 0;
  position: relative;
  padding: 14px 16px;
  border-right: 1px solid var(--puze-app-color-line);
  cursor: pointer;
  background: var(--puze-app-color-panel);
}

.puze-app--loose .puze-stage {
  padding: 18px 16px;
}

.puze-stage:last-child {
  border-right: none;
}

/* 选中态：顶部 3px 主蓝条 + 浅蓝底 */
.puze-stage::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: transparent;
}

.puze-stage.active {
  background: var(--puze-app-color-selected);
}

.puze-stage.active::before {
  background: var(--puze-app-color-primary);
}

.puze-stage__head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--puze-app-color-muted);
}

.puze-stage__figure {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 3px;
}

.puze-stage__count {
  font-family: var(--puze-app-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--puze-app-color-ink);
}

.puze-stage__unit {
  font-size: 11.5px;
  color: var(--puze-app-color-muted);
}

.puze-stage__note {
  font-size: 11.5px;
  margin-top: 6px;
}

.puze-stage__note--blue  { color: var(--puze-tone-blue); }
.puze-stage__note--teal  { color: var(--puze-tone-teal); }
.puze-stage__note--gold  { color: var(--puze-tone-gold); }
.puze-stage__note--red   { color: var(--puze-tone-red); }
.puze-stage__note--green { color: var(--puze-tone-green); }
.puze-stage__note--gray  { color: var(--puze-tone-gray); }

/* ================================================================ */
/* 明细表卡：标题行 · 筛选 · 表格 · 分页                                */
/* ================================================================ */

.puze-table-card {
  border: 1px solid var(--puze-app-color-line);
  border-radius: var(--puze-app-radius);
  background: var(--puze-app-color-panel);
  overflow: hidden;
  margin-top: 2px;
}

.puze-table-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--puze-app-color-line);
}

.puze-table-card__title {
  font-size: 13.5px;
  font-weight: 600;
}

.puze-table-card__count {
  font-family: var(--puze-app-mono);
  font-size: 11px;
  color: var(--puze-app-color-muted);
}

.puze-table-card__filters {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.puze-table {
  width: 100%;
  border-collapse: collapse;
}

.puze-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--puze-app-color-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--puze-app-color-line);
  background: var(--puze-app-color-paper);
  white-space: nowrap;
}

.puze-table th:first-child,
.puze-table th:last-child {
  padding-left: 16px;
  padding-right: 16px;
}

.puze-table tbody tr {
  border-bottom: 1px solid var(--puze-app-color-line);
}

.puze-table tbody tr:hover {
  background: var(--puze-app-color-row-hover);
}

.puze-table td {
  padding: var(--puze-app-cell-pad-y) 12px;
  font-size: 13px;
  vertical-align: middle;
  white-space: nowrap;
  color: var(--puze-app-color-ink);
}

.puze-table td:first-child,
.puze-table td:last-child {
  padding-left: 16px;
  padding-right: 16px;
}

/* 单元格语义变体 */
.puze-table .cell-id {
  font-family: var(--puze-app-mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--puze-app-color-primary);
  cursor: pointer;
}

.puze-table .cell-mono {
  font-family: var(--puze-app-mono);
  font-size: 12.5px;
  color: var(--puze-app-color-muted);
}

.puze-table .cell-wrap {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--puze-app-color-muted);
  white-space: normal;
}

.puze-table .cell-num {
  text-align: right;
  font-family: var(--puze-app-mono);
}

.puze-table .cell-owner {
  font-size: 12.5px;
  color: var(--puze-app-color-muted);
}

/* 表尾分页 */
.puze-table-card__foot {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-top: 1px solid var(--puze-app-color-line);
  font-size: 12.5px;
  color: var(--puze-app-color-muted);
}

.puze-pager {
  margin-left: auto;
  display: flex;
  gap: 4px;
  font-family: var(--puze-app-mono);
  font-size: 12px;
}

.puze-pager__page {
  padding: 3px 9px;
  border: 1px solid var(--puze-app-color-line);
  border-radius: 6px;
  cursor: pointer;
}

.puze-pager__page.active {
  border-color: var(--puze-app-color-primary);
  color: var(--puze-app-color-primary);
  font-weight: 600;
}

/* ================================================================ */
/* 状态胶囊（22px 高 · 5px 圆点 · 语义浅底）                            */
/* ================================================================ */

.puze-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}

.puze-pill::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.puze-pill--blue  { color: var(--puze-tone-blue);  background: var(--puze-tone-blue-bg); }
.puze-pill--teal  { color: var(--puze-tone-teal);  background: var(--puze-tone-teal-bg); }
.puze-pill--gold  { color: var(--puze-tone-gold);  background: var(--puze-tone-gold-bg); }
.puze-pill--red   { color: var(--puze-tone-red);   background: var(--puze-tone-red-bg); }
.puze-pill--green { color: var(--puze-tone-green); background: var(--puze-tone-green-bg); }
.puze-pill--gray  { color: var(--puze-tone-gray);  background: var(--puze-tone-gray-bg); }

/* ================================================================ */
/* 工作区页签（内容页顶部，白卡样式；命名空间独立于外壳 tabs）           */
/* ================================================================ */

.puze-app-tabs {
  display: flex;
  gap: 4px;
  align-items: flex-end;
}

.puze-app-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--puze-app-color-muted);
  border-radius: var(--puze-app-radius) var(--puze-app-radius) 0 0;
  cursor: pointer;
}

.puze-app-tab:hover {
  background: var(--puze-app-color-sidebar-active);
}

.puze-app-tab.active {
  color: var(--puze-app-color-ink);
  font-weight: 500;
  background: var(--puze-app-color-panel);
  border: 1px solid var(--puze-app-color-line);
  border-bottom: none;
}

/* ================================================================ */
/* 应用侧栏（可选外壳）：浅色默认 / 品牌深蓝 --dark，可折叠 64px         */
/* ================================================================ */

.puze-app-aside {
  position: relative;
  width: 256px;
  flex: none;
  background: var(--puze-app-color-sidebar);
  border-right: 1px solid var(--puze-app-color-line);
  display: flex;
  flex-direction: column;
  transition: width 0.18s ease;
}

.puze-app-aside.collapsed {
  width: 64px;
}

.puze-app-aside__brand {
  position: relative;
  overflow: hidden;
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--puze-app-color-line);
}

.puze-app-aside__co {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--puze-app-color-faint);
  white-space: nowrap;
}

.puze-app-aside__title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  margin-top: 3px;
}

.puze-app-aside__code {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  font-family: var(--puze-app-mono);
  color: var(--puze-app-color-primary);
  background: var(--puze-app-color-chip);
  border-radius: 4px;
  padding: 2px 6px;
}

.puze-app-aside__nav {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.puze-app-aside__group {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--puze-app-color-faint);
  padding: 12px 12px 4px;
}

.puze-app-aside__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--puze-app-radius);
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
  color: var(--puze-app-color-ink);
}

.puze-app-aside__item:hover {
  background: var(--puze-app-color-sidebar-active);
}

.puze-app-aside__item.active {
  background: var(--puze-app-color-sidebar-active);
  color: var(--puze-app-color-primary);
  font-weight: 600;
}

.puze-app-aside__foot {
  margin-top: auto;
  padding: 12px 10px;
  border-top: 1px solid var(--puze-app-color-line);
}

/* 品牌深蓝形态 */
.puze-app-aside--dark {
  background: var(--puze-app-color-primary);
  border-right-color: rgba(255, 255, 255, 0.14);
}

.puze-app-aside--dark .puze-app-aside__brand {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.puze-app-aside--dark .puze-app-aside__co {
  color: rgba(255, 255, 255, 0.55);
}

.puze-app-aside--dark .puze-app-aside__title {
  color: #fff;
}

.puze-app-aside--dark .puze-app-aside__code {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

.puze-app-aside--dark .puze-app-aside__group {
  color: rgba(255, 255, 255, 0.5);
}

.puze-app-aside--dark .puze-app-aside__item {
  color: rgba(255, 255, 255, 0.8);
}

.puze-app-aside--dark .puze-app-aside__item:hover,
.puze-app-aside--dark .puze-app-aside__item.active {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.puze-app-aside--dark .puze-app-aside__foot {
  border-top-color: rgba(255, 255, 255, 0.14);
}

/* ================================================================ */
/* 响应式：窄屏下 KPI / 阶段卡换行                                     */
/* ================================================================ */

@media (max-width: 1100px) {
  .puze-kpi-strip,
  .puze-stage-strip {
    flex-wrap: wrap;
  }

  .puze-kpi,
  .puze-stage {
    flex: 1 1 33%;
    border-bottom: 1px solid var(--puze-app-color-line);
  }
}

@media (max-width: 720px) {
  .puze-kpi,
  .puze-stage {
    flex: 1 1 50%;
  }

  .puze-search {
    width: auto;
  }
}