/* ==========================================================================
   common.css —— 全站通用样式（管理后台风格：绿意数据 / 氢链顿）
   适用：产品碳足迹、碳排放因子、生命周期分析等管理类页面
   维护原则：仅修改本文件即可统一所有页面样式

   ========== 设计令牌（不要在页面内重复定义）==========
   --color-primary / -hover / -active : #1BA875 / #179366 / #137e58
   --color-primary-50 : #E7F6EF（浅绿背景）
   --color-primary-100: #C7E9D8
   --color-primary-200: #9BD6B7
   --color-text            : #1F2A26（主文字）
   --color-text-secondary  : #324558（次要文字 / 已填控件文字）
   --color-text-tertiary   : #8C9690（辅助文字 / placeholder）
   --color-border          : #E6E9E7
   --color-border-soft     : #EEF1EF
   --color-divider         : #F0F2F1
   --color-surface         : #FFFFFF
   --color-bg              : #F4F6F5
   --color-bg-soft         : #F9FAF9
   --color-bg-gray         : #F5F5F5（抽屉主体）
   --color-danger          : #D9534F
   --color-warning         : #E0A800
   --color-info            : #2F80ED
   --header-h              : 56px
   --sidebar-w             : 160px
   --radius-sm/md/lg       : 4/6/10px
   --space-1..8            : 4/8/12/16/20/24/32px
   --font-sans             : PingFang SC / Microsoft YaHei / ...

   ========== 组件规范（新增页面必须遵守，不要自创新样式）==========
   ◆ 字号：全站统一 14px（不要再写 13/12px）
   ◆ 表单控件
     - 默认色 #98A3B7（占位 / placeholder / select 默认第一项）
     - 已填色 #324558（真实数据；用 .is-filled 仅改文字色，不改 border/shadow）
     - 高度 32px、圆角 6px、边框 1px、字号 14px
     - focus：1px 绿边 + 3px rgba(27,168,117,0.12) 阴影
     - 必填标识：label 内 <span class="req">*</span>（红色 var(--color-danger)）
   ◆ 下拉控件（统一使用 .dropdown 自定义组件，禁原生 <select>）
     - HTML 结构必须为：
       <div class="dropdown" data-name="xx">
         <button class="dropdown__trigger">
           <span class="dropdown__text">默认文字</span>
           <span class="dropdown__arrow"></span>
         </button>
         <ul class="dropdown__menu">
           <li class="dropdown__item is-active" data-value="xx">xx</li>
           ...
         </ul>
       </div>
     - 占位场景：dropdown 加 .has-placeholder，第一项加 .is-placeholder
     - 主题：下拉项 hover 整行 #1BA875 绿底白字；选中项 #E7F6EF 浅绿底 + #1BA875 绿字
     - 监听 dropdown:change 事件拿 value/text（不要用 onchange）
   ◆ 按钮
     - 主色 #1BA875（btn--primary）
     - 幽灵按钮：白底 + 边框 #324558 + 文字 #324558（btn--ghost）
   ◆ 标签页 Tab
     - 无背景色块；选中：绿色文字 + 2px 底部绿色下划线
     - tab 栏高 48px、padding 0 16px、tab 间 gap 32px
   ◆ 筛选条 filter-bar
     - 背景白色 var(--color-surface)（不要用浅灰）
     - padding：14px 20px
     - 标签与控件间距 4px，控件最小宽度与原 select 一致
   ◆ 数据表
     - 表格区域 padding：14px 20px 20px 20px
     - 表头 sticky、白底灰字
     - 操作列 col-actions 110px 右对齐
     - 名称列 col-name min-width 200px；类型列 col-type min-width 160px
   ◆ 抽屉 Drawer
     - 顶部 180px 主题绿色（用 ::before 伪元素），主体 #F5F5F5 浅灰
     - 白卡 .drawer-card 承载内容
     - 底部 footer 固定 60px 白色背景
     - 双列表单用 .form-grid，label 在 input 上方
     - 点遮罩 / 关闭按钮 / Esc 都能关闭
   ◆ 侧边栏
     - 不加绿色竖线 / 圆点装饰
     - 菜单项 14px，hover/active 文字色 #1BA875 + 浅绿底 #E7F6EF
   ◆ 按钮行为（写在 common.js，不在 HTML 内联）
     - 新建模型：App.Drawer.openNewModel()
     - 筛选：监听 dropdown:change / input keydown
   ◆ 图标
     - 全部用 images/ 下的 SVG/PNG；不要 inline 临时 SVG
   ========================================================================== */

/* ---------- 0. CSS 变量（设计令牌） ---------- */
:root {
  /* 品牌主色（绿色系，对应设计图 #1BA875） */
  --color-primary: #1BA875;
  --color-primary-hover: #179366;
  --color-primary-active: #137e58;
  --color-primary-50: #E7F6EF;
  --color-primary-100: #C7E9D8;
  --color-primary-200: #9BD6B7;

  /* 中性色 */
  --color-bg: #F4F6F5;
  --color-bg-soft: #F5F7FA;
  --color-surface: #FFFFFF;
  --color-border: #E4EBF1;
  --color-border-soft: #EEF1EF;
  --color-divider: #F0F2F1;

  /* 文字 */
  --color-text: #324558;
  --color-text-secondary: #324558;
  --color-text-tertiary: #324558;
  --color-text-inverse: #FFFFFF;

  /* 状态色 */
  --color-success: #1BA875;
  --color-warning: #E0A800;
  --color-danger:  #D9534F;
  --color-info:    #2F80ED;

  /* 阴影（柔和、分层） */
  --shadow-xs: 0 1px 2px rgba(15, 36, 28, 0.04);
  --shadow-sm: 0 2px 6px rgba(15, 36, 28, 0.06);
  --shadow-md: 0 6px 18px rgba(15, 36, 28, 0.02);
  --shadow-lg: 0 16px 40px rgba(15, 36, 28, 0.12);

  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* 间距 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* 字体 */
  --font-sans: "PingFang SC", "Microsoft YaHei", "HarmonyOS Sans SC",
               "Source Han Sans CN", "Noto Sans SC", -apple-system,
               BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-num: "SF Pro Display", "Inter", "DIN Alternate", "Helvetica Neue",
              Arial, sans-serif;

  /* 布局 */
  --header-h: 56px;
  --sidebar-w: 160px;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- 1. 重置 ---------- */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}
body {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul, ol { list-style: none; padding: 0; margin: 0; }
img { display: block; max-width: 100%; }

/* ---------- 2. 顶部头部 app-header ---------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  padding: 0 var(--space-6);
  background: linear-gradient(90deg, #1BA875 0%, #1BA875 100%);
  color: var(--color-text-inverse);
  display: flex;
  align-items: center;
  box-shadow: var(--shadow-sm);
}
.app-header__brand {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  padding: 6px 0 2px;
}
.app-header__brand-logo {
  height: 32px;
  width: auto;
  max-width: none;
  display: inline-block;
  vertical-align: middle;
}
.sidebar-group__icon {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 16px;
}
.sidebar-group__icon img { width: 16px; height: 16px; display: block; }
.app-header__brand-mark {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: rgba(255,255,255,0.18);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.app-header__spacer { flex: 1; }
.app-header__user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  opacity: 0.95;
}
.app-header__avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: transparent;
  border: none;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
}
.app-header__avatar img { width: 100%; height: 100%; display: block; }
.app-header__user-meta { line-height: 1.2; text-align: left; }
.app-header__user-name { font-size: 14px; font-weight: 500; }
.app-header__user-org { font-size: 14px; opacity: 0.75; }

/* header 用户下拉按钮与菜单 */
.app-header__user { position: relative; }
.app-header__dropdown {
  width: 24px; height: 24px;
  margin-left: 2px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-inverse);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  transition: background var(--transition);
}
.app-header__dropdown:hover { background: rgba(255, 255, 255, 0.18); }
.app-header__dropdown svg { transition: transform var(--transition); }
.app-header__dropdown.is-open { background: rgba(255, 255, 255, 0.22); }
.app-header__dropdown.is-open svg { transform: rotate(180deg); }
.app-header__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 168px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 4px 0;
  z-index: 200;
  display: none;
  animation: dropdownIn 0.18s var(--transition) both;
}
.app-header__menu.is-open { display: block; }
.app-header__menu-item {
  padding: 9px 14px;
  font-size: 14px;
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background var(--transition), color var(--transition);
  user-select: none;
}
.app-header__menu-item:hover {
  background: var(--color-primary-50);
  color: var(--color-primary);
}
.app-header__menu-item--danger { color: var(--color-danger); }
.app-header__menu-item--danger:hover {
  background: rgba(217, 83, 79, 0.08);
  color: var(--color-danger);
}
.app-header__menu-divider {
  height: 1px;
  background: var(--color-border-soft);
  margin: 4px 0;
}
@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 3. 整体布局 ---------- */
.app-layout {
  display: flex;
  height: calc(100vh - var(--header-h));
  width: 100%;
  min-height: 0;
}

/* ---------- 4. 侧边栏 app-sidebar ---------- */
.app-sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: var(--space-3) 0;
  height: 100%;
  min-height: 100%;
  align-self: stretch;
  overflow-y: auto;
}
.sidebar-group__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-5);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  user-select: none;
}
.sidebar-group__caret {
  margin-left: auto;
  transition: transform var(--transition);
}
.sidebar-group.is-collapsed .sidebar-group__caret { transform: rotate(-90deg); }
.sidebar-group.is-collapsed .sidebar-menu { display: none; }
.sidebar-menu {
  margin: var(--space-1) 0;
}
.sidebar-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 9px var(--space-5) 9px calc(var(--space-5) + 8px);
  font-size: 14px;
  color: var(--color-text-secondary);
  cursor: pointer;
  position: relative;
  transition: color var(--transition), background var(--transition);
}
.sidebar-menu__item:hover {
  color: var(--color-primary);
  background: var(--color-primary-50);
}
.sidebar-menu__item.is-active {
  color: var(--color-primary);
  background: var(--color-primary-50);
  font-weight: 500;
}

/* ---------- 5. 主区域 ---------- */
.app-main {
  flex: 1;
  min-width: 0;
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* ---------- 6. 页面容器 page ---------- */
.page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
  min-height: 0;
}
.page-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ---------- 7. 标签页 tabs ---------- */
.tabs {
  display: flex;
  align-items: stretch;
  gap: var(--space-8);
  height: 48px;
  padding: 0 var(--space-6);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-soft);
}
.tab {
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  position: relative;
  transition: color var(--transition);
}
.tab:hover { color: var(--color-primary); }
.tab.is-active {
  color: var(--color-primary);
  font-weight: 600;
}
.tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 1px;
}

/* ---------- 8. 筛选条 filter-bar ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 20px;
  background: var(--color-surface);
}
.filter-bar__item { display: flex; align-items: center; gap: 2px; }
.filter-bar__label {
  font-size: 14px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.filter-bar__spacer { flex: 1; }
/* 当筛选条内含 .btn 时，让按钮自动靠右（推荐写法） */
.filter-bar > .btn { margin-left: auto; }

/* ---------- 9. 表单控件 form-control ---------- */
.form-control {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.form-control__input,
.form-control__select {
  height: 32px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: #98A3B7;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  min-width: 70px;
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
  -webkit-appearance: none;
}
.form-control__select { min-width: 160px; }
.form-control__input::placeholder { color: #98A3B7; }
.form-control__input:focus,
.form-control__select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(14,138,95,0.12);
  color: var(--color-text);
}
.form-control__input:focus::placeholder { color: var(--color-text-tertiary); }
.form-control--has-icon .form-control__icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--color-text-tertiary);
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.form-control__icon img,
.form-control__icon svg { width: 14px; height: 14px; display: block; }
.form-control__select {
  padding-right: 28px;
  background-image: url("../images/icon-dropdown-arrow.svg");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  padding-right: 26px;
}
.form-control__input--search {
  /* 搜索框不显示左侧放大镜（与设计图保持一致：仅占位文字） */
  min-width: 140px;
}
.form-control__date { padding-left: 28px; }

/* ---------- 10. 按钮 button ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--transition);
  user-select: none;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
  box-shadow: 0 2px 6px rgba(14,138,95,0.25);
}
.btn--primary:hover { background: var(--color-primary-hover); box-shadow: 0 4px 10px rgba(14,138,95,0.32); }
.btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: #324558;
}
.btn--ghost:hover { color: var(--color-primary); border-color: var(--color-primary-200); }
/* 白色实底按钮：与分页当前页码同款（白底 + #324558 边框/文字） */
.btn--white {
  background: var(--color-surface);
  color: #324558;
  border-color: #324558;
  box-shadow: none;
}
.btn--white:hover {
  background: var(--color-primary-50);
  color: var(--color-primary);
  border-color: var(--color-primary-200);
  box-shadow: none;
}
.btn--icon {
  width: 32px; padding: 0; border-radius: var(--radius-md);
}
.btn--sm { height: 28px; padding: 0 10px; font-size: 14px; }

/* ---------- 11. 数据表 data-table ---------- */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}
.data-table thead th {
  position: sticky;
  top: 0;
  background: var(--color-bg-soft);
  color: var(--color-text-secondary);
  font-weight: 500;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  z-index: 2;
}
.data-table tbody td {
  padding: 8px 16px;
  border-bottom: 1px solid var(--color-divider);
  color: var(--color-text);
  vertical-align: middle;
}
.data-table tbody tr {
  transition: background var(--transition);
}
.data-table tbody tr:hover { background: var(--color-bg-soft); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .col-index { color: var(--color-text-tertiary); width: 56px; }
.data-table .col-actions { width: 110px; text-align: right; white-space: nowrap; }
.data-table .col-name { color: var(--color-text); min-width: 200px; }
.data-table .col-type { min-width: 160px; }
.data-table .col-num { font-family: var(--font-num); }

.data-table__wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0px 20px 20px 20px;
  /* 表格区域占据剩余空间，超出时内部滚动；与筛选条 14px，与外框 20px */
}

/* 表格内操作图标 */
.row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  color: var(--color-text-tertiary);
  transition: all var(--transition);
  cursor: pointer;
  margin-left: 4px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}
.row-action:hover {
  background-color: var(--color-primary-50);
  transform: scale(1.05);
}
.row-action--danger:hover { color: var(--color-danger); background-color: rgba(217,83,79,0.08); }
.row-action svg, .row-action img { width: 16px; height: 16px; display: block; }

/* ---------- 12. 分页 pagination ---------- */
.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px var(--space-4);
  font-size: 14px;
  color: var(--color-text-secondary);
  justify-content: flex-end;
  flex-wrap: wrap;
  flex-shrink: 0;
  border-top: 1px solid var(--color-border-soft);
  background: var(--color-surface);
}
.pagination__total { color: var(--color-text-tertiary); margin-right: var(--space-3); }
.pagination__size {
  /* 自定义 dropdown，沿用主样式，只调尺寸与按钮一致 */
  width: auto;
}
.pagination__size .dropdown__trigger {
  height: 28px;
  min-width: 88px;
  padding: 0 26px 0 10px;
  font-size: 14px;
}
.pagination__size .dropdown__arrow {
  width: 12px; height: 12px;
  right: 8px;
}
.pagination__pages {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pagination__btn {
  min-width: 28px; height: 28px;
  padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition);
  outline: none;
}
.pagination__btn:hover:not(:disabled) {
  color: var(--color-primary);
  border-color: var(--color-primary-200);
}
.pagination__btn.is-active,
.pagination__btn.is-active:hover,
.pagination__btn.is-active:focus,
.pagination__btn.is-active:focus-visible,
.pagination__btn[aria-current="page"] {
  background: var(--color-surface) !important;
  color: #324558 !important;
  border-color: #324558 !important;
  font-weight: 500;
  outline: none;
  box-shadow: none;
}
.pagination__btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pagination__jumper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text-tertiary);
}
.pagination__jumper input {
  width: 36px; height: 28px;
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  outline: none;
}
.pagination__jumper input:focus { border-color: var(--color-primary); }

/* ---------- 13. 通用工具类 ---------- */
.text-tertiary { color: var(--color-text-tertiary); }
.flex { display: flex; }
.flex-1 { flex: 1; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.muted { color: var(--color-text-tertiary); }

/* ---------- 14. 滚动条 ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #d3d8d5; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #b8c0bc; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 15. 响应式（平板以下） ---------- */
@media (max-width: 960px) {
  :root { --sidebar-w: 60px; }
  .sidebar-group__title span,
  .sidebar-menu__item span { display: none; }
  .sidebar-group__title { justify-content: center; padding: 12px 0; }
  .sidebar-menu__item { justify-content: center; padding: 10px 0; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar__spacer { display: none; }
}

/* ---------- 16. 动效 ---------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-card { animation: fadeInUp 0.45s var(--transition) both; }
.data-table tbody tr { animation: fadeInUp 0.3s var(--transition) both; }
.data-table tbody tr:nth-child(1)  { animation-delay: 0.02s; }
.data-table tbody tr:nth-child(2)  { animation-delay: 0.04s; }
.data-table tbody tr:nth-child(3)  { animation-delay: 0.06s; }
.data-table tbody tr:nth-child(4)  { animation-delay: 0.08s; }
.data-table tbody tr:nth-child(5)  { animation-delay: 0.10s; }
.data-table tbody tr:nth-child(6)  { animation-delay: 0.12s; }
.data-table tbody tr:nth-child(7)  { animation-delay: 0.14s; }
.data-table tbody tr:nth-child(8)  { animation-delay: 0.16s; }
.data-table tbody tr:nth-child(9)  { animation-delay: 0.18s; }
.data-table tbody tr:nth-child(10) { animation-delay: 0.20s; }

/* ---------- 16.5 通用 tooltip（替代原生 title 浮层） ----------
   用法：任何元素加 title 属性即可，JS 会自动转为 data-tip
   实现：JS 创建浮动 div 挂到 body，position:fixed 不受父容器 overflow/z-index 限制
   ---------------------------------------------------------------- */
.tooltip-floating {
  position: fixed;
  padding: 4px 10px;
  background: var(--color-text);
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  z-index: 100000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tooltip-floating.is-visible { opacity: 1; }

/* ---------- 17. 抽屉 drawer ---------- */
.drawer-mask {
  position: fixed; inset: 0;
  background: rgba(15, 36, 28, 0.45);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.drawer-mask.is-open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0;
  width: 760px; max-width: 92vw;
  height: 100vh;
  background: #F5F5F5;  /* 抽屉主色：浅灰 */
  z-index: 1001;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: none;  /* 默认隐藏时无阴影，避免移出视口后阴影投射到页面右侧形成灰条 */
  overflow: hidden;
}
.drawer::before {
  /* 顶部 180px 主题绿色装饰条 */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 180px;
  background: var(--color-primary);
  z-index: 0;
  pointer-events: none;
}
.drawer > * { position: relative; z-index: 1; }
.drawer.is-open { transform: translateX(0); box-shadow: var(--shadow-lg); }

.drawer__header {
  flex: 0 0 auto;
  height: 50px;
  padding: 16px 20px 0px 20px;
  background: transparent;  /* 由 ::before 180px 绿色覆盖 */
  color: var(--color-text-inverse);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 18px; font-weight: 500;
}
.drawer__close {
  cursor: pointer;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-text-inverse);
  opacity: 0.9;
  transition: opacity var(--transition);
}
.drawer__close:hover { opacity: 1; }
.drawer__close img, .drawer__close svg { width: 16px; height: 16px; display: block; }

.drawer__body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 0px 20px 20px;
  background: transparent;  /* 抽屉主色为 #F5F5F5，body 透明继承 */
}
.drawer__footer {
  flex: 0 0 auto;
  height: 60px;
  padding: 0 20px;
  background: var(--color-surface);  /* 底部 60px 白色背景 */
  display: flex; justify-content: flex-end; align-items: center; gap: 20px;
}

/* 抽屉内白卡 */
.drawer-card {
  background: var(--color-surface);
  border-radius: 4px;
  box-shadow: var(--shadow-md);
  padding: 20px 24px 24px;
  margin-top: 8px;
}

/* 抽屉内 Tab（白卡顶部） */
.drawer__tabs {
  display: flex; gap: var(--space-2);
  border-bottom: 1px solid var(--color-border-soft);
  margin: -20px -24px 20px;
  padding: 0 14px;
}
.drawer__tab {
  padding: 14px 16px;
  font-size: 14px;
  color: var(--color-text-secondary);
  cursor: pointer;
  position: relative;
  transition: color var(--transition);
}
.drawer__tab:hover { color: var(--color-primary); }
.drawer__tab.is-active {
  color: var(--color-primary);
  font-weight: 500;
}
.drawer__tab.is-active::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
}

/* radio 形式审核状态 */
.radio-group {
  display: flex; align-items: center; gap: 28px;
  font-size: 14px;
}
.radio-group__item {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  user-select: none;
}
.radio-group__item input { display: none; }
.radio-group__dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  position: relative;
  transition: all var(--transition);
}
.radio-group__item--checked { color: var(--color-primary); }
.radio-group__item--checked .radio-group__dot {
  border-color: var(--color-primary);
}
.radio-group__item--checked .radio-group__dot::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* 兼容旧 form-grid 调用（保留原样以防其他地方用到） */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}
.form-grid__full { grid-column: 1 / -1; }

.form-item__label {
  display: block;
  font-size: 14px;
  color: var(--color-text);
  margin-bottom: 6px;
  line-height: 1.4;
}
.form-item__label .req { color: var(--color-danger); margin-right: 2px; }

/* 信息提示块 .info-tip —— 主题绿色（取替默认蓝色调），用于规则说明、注意事项等 */
.info-tip {
  display: flex;
  gap: 12px;
  background: var(--color-primary-50);   /* #E7F6EF */
  border: 1px solid var(--color-primary-100);  /* #C7E9D8 */
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin: 20px 0;
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.8;
}
.info-tip__icon {
  flex: 0 0 18px; width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  margin-top: 2px;
}
.info-tip__title { color: var(--color-primary); font-weight: 600; margin-right: 4px; }
.info-tip__list { margin: 0; padding-left: 20px; }
.info-tip__list li { list-style: decimal; }
/* ---------- 17.x 表单控件统一规范（PCF 筛选条 / 抽屉通用） ----------
   规则：
   - 默认色 #98A3B7（占位、初始值、select 选中文字）
   - focus / 有值时变深色 var(--color-text)
   - 高度 32px、圆角 6px、边框 1px
   - select 下拉箭头：icon-dropdown-arrow.svg，right 10px center，16x16
   - input 图标：form-control--has-icon + 14x14 .form-control__icon
   ---------------------------------------------------------------- */
.form-item__input,
.form-item__select {
  width: 100%;
  height: 32px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: #98A3B7;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), color var(--transition);
  appearance: none;
  -webkit-appearance: none;
}
.form-item__input::placeholder { color: #98A3B7; }
.form-item__input:focus,
.form-item__select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(27, 168, 117, 0.12);
}
.form-item__input.is-filled,
.form-item__select.is-filled {
  color: var(--color-text-secondary);  /* #324558，仅文字色，不改边框/阴影 */
}
/* 只读字段（更高层级设定，不可编辑）：去 hover/focus 效果，与普通输入框一致但视觉上不可点 */
.form-item__input[readonly],
.form-item__input[readonly]:hover,
.form-item__input[readonly]:focus {
  background: var(--color-bg-soft);
  border-color: var(--color-border);
  box-shadow: none;
  cursor: default;
  color: var(--color-text-secondary);
}
/* textarea 专用：多行时需要垂直内边距，避免占位贴顶 */
textarea.form-item__input,
.form-item__textarea {
  height: auto;
  min-height: 80px;
  padding: 8px 10px;
  line-height: 1.6;
  resize: vertical;
  font-family: inherit;
}
.form-item__input:focus::placeholder { color: var(--color-text-tertiary); }
.form-item__select {
  background-image: url("../images/icon-dropdown-arrow.svg");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
}
/* 兼容旧 placeholder class（无新值时仍为灰色） */
.form-item__input--placeholder { color: #98A3B7; }

/* 抽屉内如需放图标，与 PCF 筛选条共用 form-control--has-icon 结构 */
.form-item__input-wrap { position: relative; display: block; }
.form-item__input-wrap > .form-item__input { padding-right: 28px; }
.form-item__input-wrap .form-item__icon {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-text-tertiary);
  pointer-events: none;
}
.form-item__input-wrap .form-item__icon img,
.form-item__input-wrap .form-item__icon svg { width: 14px; height: 14px; display: block; }

/* 数量 + 单位 组合 */
.form-item__combo {
  display: flex; gap: 8px;
}
.form-item__combo .form-item__input--num { flex: 1; min-width: 0; }
.form-item__combo .form-item__select--unit { flex: 0 0 110px; }
.form-item__combo .num-input { flex: 1; min-width: 0; }

/* 数字输入框 +/- 按钮（共用组件） */
.num-input {
  position: relative;
  width: 100%;
}
.num-input__field {
  width: 100%;
  height: 32px;
  padding: 0 24px 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  -moz-appearance: textfield;
  appearance: textfield;
}
.num-input__field::-webkit-outer-spin-button,
.num-input__field::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.num-input__field:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(27, 168, 117, 0.12);
}
.num-input__spinner {
  position: absolute; right: 1px; top: 1px; bottom: 1px;
  width: 22px;
  display: flex; flex-direction: column;
  border-left: 1px solid var(--color-border);
}
.num-input__btn {
  flex: 1;
  background: var(--color-surface);
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--color-text-tertiary);
  display: inline-flex; align-items: center; justify-content: center;
  transition: color var(--transition), background var(--transition);
}
.num-input__btn + .num-input__btn {
  border-top: 1px solid var(--color-border);
}
.num-input__btn:hover { color: var(--color-primary); background: var(--color-primary-50); }

/* choice（系统边界/数据来源）一行两项 */
.form-item__choices {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.choice {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  background: var(--color-surface);
  color: var(--color-text);
  transition: all var(--transition);
  min-height: 32px;
}
.choice:hover { border-color: var(--color-primary-200); }
.choice input { display: none; }
.choice__box {
  width: 16px; height: 16px;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent;
  background: var(--color-surface);
  flex: 0 0 16px;
  transition: all var(--transition);
}
.choice--checked {
  border-color: var(--color-primary);
  background: var(--color-primary-50);
  color: var(--color-primary);
}
.choice--checked .choice__box {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* 抽屉底部按钮（白底 + 绿底） */
.drawer__footer .btn--ghost {
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border-color: #324558;
}
.drawer__footer .btn--ghost:hover {
  color: var(--color-primary);
  border-color: var(--color-primary-200);
}

/* ---------- 18. 自定义下拉 dropdown（替换原生 <select>，可全样式控制） ---------- */
.dropdown { position: relative; display: block; }
.dropdown__trigger {
  width: 100%;
  height: 32px;
  padding: 0 32px 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: #98A3B7;
  font-size: 14px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), color var(--transition);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  position: relative;
}
.dropdown__trigger:hover { border-color: var(--color-primary-200); }
.dropdown__trigger:focus,
.dropdown.is-open .dropdown__trigger {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(27, 168, 117, 0.12);
}
.dropdown.is-filled .dropdown__trigger { color: var(--color-text-secondary); }
.dropdown__arrow {
  position: absolute;
  right: 10px; top: 50%;
  width: 16px; height: 16px;
  transform: translateY(-50%);
  background: url("../images/icon-dropdown-arrow.svg") no-repeat center / contain;
  pointer-events: none;
  transition: transform var(--transition);
}
.dropdown.is-open .dropdown__arrow { transform: translateY(-50%) rotate(180deg); }
.dropdown__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 18px rgba(15, 36, 28, 0.10);
  z-index: 200;
  max-height: 220px;
  overflow-y: auto;
  display: none;
}
.dropdown.is-open .dropdown__menu { display: block; }
/* 向上展开（用于靠近视口底部的下拉，如分页） */
.dropdown--up .dropdown__menu {
  top: auto;
  bottom: calc(100% + 4px);
}
.dropdown--up .dropdown__arrow { transform: translateY(-50%) rotate(180deg); }
.dropdown--up.is-open .dropdown__arrow { transform: translateY(-50%) rotate(0deg); }
.dropdown__item {
  padding: 8px 12px;
  font-size: 14px;
  color: var(--color-text);
  cursor: pointer;
  user-select: none;
  transition: background var(--transition), color var(--transition);
}
.dropdown__item:hover {
  background: var(--color-primary);
  color: #fff;
}
.dropdown__item.is-active {
  background: var(--color-primary-50);
  color: var(--color-primary);
  font-weight: 500;
}
.dropdown__item.is-active:hover {
  background: var(--color-primary);
  color: #fff;
}
/* 数量 + 单位组合里的下拉 */
.form-item__combo .dropdown { flex: 0 0 110px; }

/* 只读下拉（更高层级设定，不可编辑）：保留箭头，视觉变灰、不响应交互 */
.dropdown.is-disabled .dropdown__trigger,
.dropdown.is-disabled .dropdown__trigger:hover,
.dropdown.is-disabled .dropdown__trigger:focus {
  background: var(--color-bg-soft);
  border-color: var(--color-border);
  box-shadow: none;
  color: var(--color-text-secondary);
  cursor: not-allowed;
  opacity: 0.85;
}
.dropdown.is-disabled .dropdown__arrow { opacity: 0.55; }

/* 筛选条下拉：保持与原 .form-control__select 一致的最小宽度 */
.filter-bar__item .dropdown { min-width: 160px; }
.drawer__footer .btn--primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
  box-shadow: 0 2px 6px rgba(14,138,95,0.25);
  min-width: 80px;
}
.drawer__footer .btn--primary:hover {
  background: var(--color-primary-hover);
  box-shadow: 0 4px 10px rgba(14,138,95,0.32);
}

/* ---------- 19. 生命周期页布局（PCF-lifecycle.html） ----------
   左：阶段树（5 大阶段 + 嵌套子项）
   右：可折叠卡片堆叠（过程描述 / 产品信息 / 输入表 / 输出表）
   ---------------------------------------------------------------- */
.lifecycle-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
  padding: 16px 20px;
  flex: 1;
  min-height: 0;
  overflow: auto;
  align-items: start;
}

/* 左侧阶段树 */
.lifecycle-tree {
  background: var(--color-bg-soft);
  border-radius: var(--radius-md);
  padding: 8px 0;
  max-height: 100%;
  overflow-y: auto;
}
.lifecycle-stage { padding: 0; }
.lifecycle-stage__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 800;
  color: var(--color-text);
  cursor: pointer;
  user-select: none;
  transition: color var(--transition);
}
.lifecycle-stage__header:hover { color: var(--color-primary); }
.lifecycle-stage__header img {
  width: 16px; height: 16px;
  display: inline-block;
}
.lifecycle-stage__caret {
  margin-left: auto;
  transition: transform var(--transition);
  color: var(--color-text-tertiary);
}
.lifecycle-stage.is-collapsed .lifecycle-stage__caret { transform: rotate(-90deg); }
.lifecycle-stage.is-collapsed > .lifecycle-stage__children { display: none; }

.lifecycle-stage__children {
  margin: 0;
  padding: 0 0 4px 0;
  list-style: none;
}
.lifecycle-stage__item {
  padding: 6px 16px 6px 32px;
  font-size: 14px;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: 0;
  transition: color var(--transition), background var(--transition);
  user-select: none;
}
.lifecycle-stage__item:hover {
  color: var(--color-primary);
  background: var(--color-primary-50);
}
.lifecycle-stage__item.is-active {
  color: var(--color-primary);
  background: var(--color-primary-50);
  font-weight: 500;
}

.lifecycle-stage__group { padding: 0; }
.lifecycle-stage__group-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 16px 6px 24px;
  font-size: 14px;
  color: var(--color-text-secondary);
  cursor: pointer;
  user-select: none;
  transition: color var(--transition);
}
.lifecycle-stage__group-header:hover { color: var(--color-primary); }
.lifecycle-stage__group-caret {
  width: 10px; height: 10px;
  transition: transform var(--transition);
  color: var(--color-text-tertiary);
  flex: 0 0 10px;
}
.lifecycle-stage__group.is-collapsed .lifecycle-stage__group-caret { transform: rotate(-90deg); }
.lifecycle-stage__group.is-collapsed > .lifecycle-stage__group-children { display: none; }
.lifecycle-stage__group-children { padding: 0; list-style: none; }
.lifecycle-stage__group-children .lifecycle-stage__item { padding-left: 40px; }

.lifecycle-tree__footer {
  border-top: 1px solid var(--color-border-soft);
  padding: 12px 16px 4px;
  margin-top: 8px;
}

/* 右侧内容区 */
.lifecycle-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* 可折叠卡片（公用：任何需要 header + body + 折叠的卡片场景） */
.collapse-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.collapse-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--color-bg-soft);            /* #F5F7FA 浅灰蓝 */
  border-bottom: 1px solid var(--color-border-soft);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);                    /* 标题文字用深色 */
  cursor: pointer;
  user-select: none;
  transition: background var(--transition);
}
.collapse-card__header:hover { background: var(--color-primary-50); }  /* hover 用主色浅绿 #E7F6EF */
.collapse-card__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-primary);         /* 圆点保留绿色,作为视觉锚点 */
  flex: 0 0 8px;
}
.collapse-card__caret {
  margin-left: auto;
  transition: transform var(--transition);
  color: var(--color-primary);
}
.collapse-card.is-collapsed .collapse-card__caret { transform: rotate(-90deg); }
.collapse-card.is-collapsed .collapse-card__body { display: none; }
.collapse-card__body {
  padding: 16px 20px;
}
.collapse-card__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

/* 元信息行（如过程描述右上的 主营业务来源 / 代表行业） */
.collapse-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: flex-end;
  font-size: 14px;
  color: var(--color-text);
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--color-border-soft);
}
.collapse-card__meta-label { color: var(--color-text-tertiary); margin-right: 4px; }

/* 上传文件行（过程材料） */
.upload-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 14px;
  color: var(--color-text-secondary);
}
.upload-row__icon {
  width: 16px; height: 16px;
  color: var(--color-text-tertiary);
  flex: 0 0 16px;
}

/* 标签（如 产品信息 表格中的"上产证"） */
.tag {
  display: inline-block;
  padding: 1px 6px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-primary);
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-100);
  border-radius: var(--radius-sm);
  margin-left: 6px;
  vertical-align: middle;
}

/* ---------- 20. 同页 Tab Pane 切换（PCF-edit.html） ----------
   tab + tab-panes 组合：data-target 在 .tab 上、data-pane 在 .tab-pane 上对应；
   切换时只切 .is-active，不改 URL。
   ---------------------------------------------------------------- */
.tab-pane { display: none; }
.tab-pane.is-active { display: block; }
.tab-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  color: var(--color-text-tertiary);
  font-size: 14px;
  background: var(--color-bg-soft);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  margin-top: 16px;
}