/* =============================================================================
   外观层：对齐飞书（Lark）网页视觉
   -----------------------------------------------------------------------------
   取值方式：在公司飞书多维表格页面里直接读它的 CSS 设计变量与实际渲染样式，
   不是凭印象配色（只取样式值，未读取表内数据）。

   飞书的底子跟前两版（macOS 磨砂）是冲突的，这一版按飞书重做：
   - 纯平。飞书全站没有毛玻璃，所以 backdrop-filter 一处不留。
   - 边框看得见。分区靠 #dee0e3 实线，不是 macOS 那种 7% 发丝线。
   - 圆角只有两档：控件 6、卡片 8。
   - 主色 #1456f0 只用于"可操作"：按钮、选中、链接、焦点环。
     扶摇的品牌绿只留给侧栏 logo 与身份色点，不参与交互态。
   - 悬停统一 rgba(31,35,41,.08)，按下 .12，选中 #e0e9ff + 蓝字。
   - 甘特阶段色换成飞书标签那套色相，配色公式也照搬（低透明度底 + 同色相深字）。

   本文件在 styles.css、gantt.css 之后加载，只改外观，不改结构和交互。
   整体回退：删掉 index.html 里这一行 <link>。
   ============================================================================= */

:root {
  /* 中性阶（飞书 N 系列） */
  --fs-n50: #f5f6f7;
  --fs-n100: #f2f3f5;
  --fs-n200: #eff0f1;
  --fs-n300: #dee0e3;
  --fs-n400: #bbbfc4;
  --fs-n500: #8f959e;
  --fs-n600: #646a73;
  --fs-n900: #1f2329;

  /* 文字 */
  --fs-text: #1f2329;
  --fs-text-caption: #646a73;
  --fs-text-placeholder: #8f959e;
  --fs-text-disabled: #bbbfc4;

  /* 背景 */
  --fs-bg-body: #ffffff;
  --fs-bg-shell: #f5f6f7;
  --fs-bg-base: #f8f9fa;
  --fs-bg-filler: #eff0f1;

  /* 线 */
  --fs-border-card: #dee0e3;
  --fs-border-component: #d0d3d6;
  --fs-divider: rgba(31, 35, 41, 0.15);

  /* 交互填充 */
  --fs-fill-hover: rgba(31, 35, 41, 0.08);
  --fs-fill-pressed: rgba(31, 35, 41, 0.12);

  /* 主色（只给可操作元素） */
  --fs-blue: #1456f0;
  --fs-blue-hover: #336df4;
  --fs-blue-light: #e0e9ff;
  --fs-blue-lighter: #f0f4ff;
  --fs-blue-ring: rgba(20, 86, 240, 0.15);

  /* 品牌绿：只做身份标识，不做交互态 */
  --fy-green: #226b58;

  --fs-r-control: 6px;
  --fs-r-card: 8px;
  --fs-shadow: 0 4px 16px rgba(31, 35, 41, 0.1);
  --fs-shadow-float: 0 6px 24px rgba(31, 35, 41, 0.16);

  --topbar-h: 56px;

  /* 覆盖 styles.css 的旧变量，让没被单独改写的规则也跟着走飞书 */
  --ink: #1f2329;
  --muted: #646a73;
  --line: #dee0e3;
  --canvas: #f5f6f7;
  --card: #ffffff;
  --green: #1456f0;
  --green-dark: #0f47cc;
  --green-wash: #e0e9ff;
}

/* ---------- 字体：飞书的栈去掉它的私有字体 ---------- */
body {
  font-family:
    -apple-system, BlinkMacSystemFont, system-ui, 'Helvetica Neue', Tahoma, 'PingFang SC',
    'Microsoft Yahei', Arial, 'Hiragino Sans GB', sans-serif;
  font-size: 14px;
  line-height: 1.5715;
  color: var(--fs-text);
  background: var(--fs-bg-shell);
  background-image: none;
  -webkit-font-smoothing: antialiased;
}
.project-heading h1 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
}
.gantt-title h2,
.pricing-toolbar h2,
.section-title h2 {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
}
.eyebrow,
.project-heading p,
.gantt-title > span,
.section-title h2 span,
.subtle,
.metric-label,
.metric-sub,
.scenario-label,
.sidebar-bottom,
.workspace-label,
.save-status {
  font-size: 12px;
  color: var(--fs-text-caption);
}
.metric-value,
.quote-amount,
.quote-amount input,
.metric-sub,
.pricing-table,
.comparison,
.rates-grid,
.confirm-facts dd,
.asset-tab small,
.asset-fixed-cell,
.gantt-pan-range {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ---------- 侧栏 ---------- */
.sidebar {
  background: var(--fs-bg-shell);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-right: 1px solid var(--fs-border-card);
  box-shadow: none;
  padding: 20px 8px 14px;
}
.brand {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0 8px 22px;
  color: var(--fs-text);
}
/* 品牌绿只在这里保留 */
.brand-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--fs-r-control);
  background: var(--fy-green);
}
.brand-icon svg {
  width: 18px;
  height: 18px;
}
.brand-sub {
  font-size: 9px;
  color: var(--fs-text-placeholder);
  letter-spacing: 0.06em;
}
.project-dot,
.local-dot {
  background: var(--fy-green);
}
.workspace-label {
  padding: 0 8px;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--fs-text-placeholder);
}
.nav-item,
.project-mini {
  border-radius: var(--fs-r-control);
  padding: 7px 8px;
  margin: 1px 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--fs-text);
  background: transparent;
  box-shadow: none;
  transition: background 0.1s linear;
}
.nav-item svg {
  width: 16px;
  height: 16px;
  color: var(--fs-text-caption);
}
.nav-item:hover,
.project-mini:hover {
  background: var(--fs-fill-hover);
  box-shadow: none;
}
.nav-item:active,
.project-mini:active {
  background: var(--fs-fill-pressed);
}
.sidebar-divider {
  border-top: 1px solid var(--fs-border-card);
  margin: 12px 8px;
}
.sidebar-bottom {
  padding: 14px 8px 0;
  color: var(--fs-text-placeholder);
}

/* ---------- 顶栏 ---------- */
.topbar {
  height: var(--topbar-h);
  padding: 0 20px;
  background: var(--fs-bg-body);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--fs-border-card);
  box-shadow: none;
  position: sticky;
  top: 0;
  z-index: 15;
}
.breadcrumbs {
  font-size: 14px;
  color: var(--fs-text-caption);
}
.breadcrumbs strong {
  color: var(--fs-text);
  font-weight: 500;
}
.icon-button {
  border-radius: var(--fs-r-control);
  width: 28px;
  height: 28px;
  flex-basis: 28px;
  color: var(--fs-text-caption);
  transition: background 0.1s linear;
}
.icon-button svg {
  width: 16px;
  height: 16px;
}
.icon-button:hover {
  background: var(--fs-fill-hover);
  color: var(--fs-text);
  box-shadow: none;
}
.icon-button.danger:hover {
  background: #fee3e2;
  color: #d83931;
}
.profile-avatar {
  height: 26px;
  width: 26px;
  font-size: 12px;
  border-color: var(--fs-border-card);
  background: var(--fs-n100);
  color: var(--fs-text-caption);
}

/* ---------- 内容区 ---------- */
main {
  padding: 20px 24px 0;
}
.project-image {
  width: 52px;
  height: 56px;
  border-radius: var(--fs-r-card);
  border-color: var(--fs-border-card);
}
/* 状态标签：飞书标签公式——色相低透明度作底 + 深色字 */
.status-badge {
  background: rgba(173, 122, 3, 0.15);
  color: var(--fs-text);
  border-radius: var(--fs-r-control);
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 400;
}
.metrics {
  background: var(--fs-bg-body);
  border: 1px solid var(--fs-border-card);
  border-radius: var(--fs-r-card);
  box-shadow: none;
  padding: 16px 0;
  margin-bottom: 12px;
}
.metric {
  border-left: 1px solid var(--fs-border-card);
}
.metrics .metric-label {
  min-height: 28px;
}
.metrics .cost-factor {
  flex-shrink: 0;
}
.metric-value,
.quote-amount {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0;
}
.metrics .quote-amount {
  height: auto;
  gap: 0;
  align-items: baseline;
}
/* 报价虽用只读 input 展示，也必须继承指标字阶，不能落回通用表单的 14px。 */
.metrics .quote-amount input,
.metrics .quote-amount > span {
  font: inherit;
  letter-spacing: inherit;
  font-variant-numeric: tabular-nums;
}
.metric-value.compact,
.quote-amount.compact,
.quote-amount.compact input {
  font-size: 20px;
}
.metric-value > span {
  font-size: 16px;
  color: var(--fs-text-caption);
}

/* 当前资产的报价与对外排期联动 */
.quote-link-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin-top: 10px;
  color: var(--fs-text-caption);
  font-size: 12px;
}
.quote-link-control label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fs-text);
  cursor: pointer;
}
.quote-link-control input {
  accent-color: var(--fs-blue);
}
.quote-schedule-notice {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #dee0e3;
  border-radius: 8px;
  background: var(--fs-bg-card, #fff);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.quote-schedule-notice > div {
  flex: 1 1 260px;
}
.quote-schedule-notice strong {
  color: #ad7a03;
}
.quote-schedule-notice p {
  margin: 4px 0 0;
  color: var(--fs-text-caption);
}
.pricing-input[readonly] {
  background: var(--fs-bg-shell);
  cursor: default;
}
.schedule-unit-price {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  color: var(--fs-text-caption);
  font-size: 12px;
  white-space: nowrap;
}
.schedule-unit-price .pricing-field {
  color: var(--fs-text-caption);
}
.schedule-unit-price .pricing-input {
  width: 76px;
  height: 32px;
  color: var(--fs-text);
}
.calendar-reference {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--fs-border-card);
}
.calendar-reference p {
  line-height: 1.6;
  color: var(--fs-text-caption);
}
.calendar-version {
  overflow-wrap: anywhere;
}
/* 视图页签：飞书的做法是文字页签 + 蓝色下划线，不是分段控件 */
.view-toolbar {
  position: static;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  border-bottom: 1px solid var(--fs-border-card);
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: 14px;
}
.view-tabs {
  gap: 20px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.view-tabs button {
  border: 0;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  box-shadow: none;
  padding: 9px 2px 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--fs-text-caption);
  transition: color 0.1s linear;
}
.view-tabs svg {
  width: 16px;
  height: 16px;
}
.view-tabs button:hover {
  background: transparent;
  color: var(--fs-text);
}
.view-tabs button[aria-selected='true'] {
  background: transparent;
  color: var(--fs-blue);
  font-weight: 500;
  border-bottom-color: var(--fs-blue);
  box-shadow: none;
}
.view-tabs button[aria-selected='true'] svg {
  color: var(--fs-blue);
}
.nav-count {
  background: var(--fs-n100);
  color: var(--fs-text-caption);
  border-radius: var(--fs-r-control);
}

/* 内容卡 */
#external-schedule-content,
#schedule-content,
#pricing-content,
#budget-content,
.compare-card {
  background: var(--fs-bg-body);
  border: 1px solid var(--fs-border-card);
  border-radius: var(--fs-r-card);
  box-shadow: none;
  padding: 16px 18px;
}

/* ---------- 控件 ---------- */
.button {
  border-radius: var(--fs-r-control);
  border: 1px solid var(--fs-border-component);
  background: var(--fs-bg-body);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  min-height: 32px;
  padding: 4px 11px;
  font-size: 14px;
  font-weight: 400;
  color: var(--fs-text);
  transition:
    background 0.1s linear,
    border-color 0.1s linear;
}
.button:hover {
  background: var(--fs-n50);
  border-color: var(--fs-n400);
}
.button:active {
  background: var(--fs-n200);
  transform: none;
}
.button svg {
  width: 16px;
  height: 16px;
  color: var(--fs-text-caption);
}
.button.small {
  min-height: 28px;
  padding: 2px 9px;
  font-size: 13px;
}
.button.primary {
  background: var(--fs-blue);
  border-color: var(--fs-blue);
  color: #fff;
  font-weight: 400;
  box-shadow: none;
}
.button.primary:hover {
  background: var(--fs-blue-hover);
  border-color: var(--fs-blue-hover);
}
.button.primary svg {
  color: #fff;
}
.button.text {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--fs-blue);
}
.button.danger-fill {
  background: #d83931;
  border-color: #d83931;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.button.danger-text {
  color: #d83931;
}

/* 分段控件 */
.segmented {
  border-radius: var(--fs-r-control);
  border: 1px solid var(--fs-border-card);
  background: var(--fs-n100);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  padding: 2px;
  gap: 2px;
}
.segmented button {
  border-radius: 4px;
  padding: 3px 11px;
  font-size: 13px;
  color: var(--fs-text-caption);
}
.segmented button:hover {
  color: var(--fs-text);
}
.segmented button.active {
  background: var(--fs-bg-body);
  color: var(--fs-blue);
  font-weight: 500;
  box-shadow: none;
}

/* 资产页签 */
.asset-tab {
  border-radius: var(--fs-r-card);
  border: 1px solid var(--fs-border-card);
  background: var(--fs-bg-body);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.asset-tab:hover {
  background: var(--fs-n50);
}
.asset-tab.active {
  background: var(--fs-blue-lighter);
  border-color: var(--fs-blue);
  box-shadow: none;
}
.asset-tab.active b {
  color: var(--fs-blue);
}
.asset-tab b {
  font-size: 14px;
  font-weight: 500;
}
.asset-tab small {
  font-size: 12px;
  color: var(--fs-text-caption);
}
.asset-tab-remove {
  border-radius: 4px;
}
.asset-tab-remove:hover {
  background: #fee3e2;
  color: #d83931;
}

/* 输入 */
.field input,
.field select,
.pricing-input,
input[type='date'],
input[type='text'],
input[type='number'],
select {
  border-radius: var(--fs-r-control);
  border-color: var(--fs-border-component);
  font-size: 14px;
}
.field input:focus,
.field select:focus,
.pricing-input:focus {
  border-color: var(--fs-blue);
}
.field > span {
  font-size: 12px;
  color: var(--fs-text-caption);
}

/* 焦点环：飞书蓝 */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
[role='slider']:focus-visible {
  outline: 2px solid var(--fs-blue);
  outline-offset: 1px;
  box-shadow: 0 0 0 4px var(--fs-blue-ring);
  border-radius: var(--fs-r-control);
}

/* ---------- 弹出面板 ---------- */
dialog::backdrop {
  background: rgba(0, 0, 0, 0.32);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
dialog.modal,
dialog.drawer {
  border-radius: var(--fs-r-card);
  background: var(--fs-bg-body);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  box-shadow: var(--fs-shadow-float);
}
dialog.drawer {
  border-radius: var(--fs-r-card) 0 0 var(--fs-r-card);
  border-left: 1px solid var(--fs-border-card);
}
.drawer-header,
.milestone-editor .modal-actions {
  background: var(--fs-bg-body);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: var(--fs-border-card);
}
.roster-labels {
  background: var(--fs-n50);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.confirm-facts > div {
  background: var(--fs-n50);
  border: 0;
  border-radius: var(--fs-r-control);
}

/* ---------- 甘特图 ---------- */
/* 日期、星期和日历状态各占一行；窄尺度缩写为“一…六、日”。 */
.asset-calendar-header {
  height: 114px;
}
.asset-calendar-header .calendar-fixed,
.external-schedule .asset-calendar-header .calendar-fixed {
  grid-template-rows: 44px 24px 46px;
}
.calendar-days {
  height: 46px;
}
.calendar-days > span {
  gap: 1px;
  border-right-color: var(--fs-border-card);
  color: var(--fs-text-caption);
  font-variant-numeric: tabular-nums;
}
.calendar-days .calendar-weekday {
  font-size: 10px;
  line-height: 13px;
  white-space: nowrap;
}
.calendar-days small {
  min-height: 10px;
}
.calendar-days .calendar-weekend {
  background: var(--fs-n300);
  color: var(--fs-text);
}
.calendar-days .calendar-weekend-date b,
.calendar-days .calendar-weekend-date .calendar-weekday {
  font-weight: 700;
}
/* 只加深已知休息周末的整列，补班与未核验日期沿用各自状态。 */
.asset-project-track > .calendar-weekend:not(.calendar-holiday):not(.calendar-makeup):not(.calendar-unknown),
.person-track > .calendar-weekend:not(.calendar-holiday):not(.calendar-makeup):not(.calendar-unknown),
.gantt-new-track > .calendar-weekend:not(.calendar-holiday):not(.calendar-makeup):not(.calendar-unknown) {
  background: var(--fs-n200);
  border-inline: 1px solid var(--fs-border-card);
}
/* 新增行的文字缩进不能作用于按日期定位的背景列。 */
.gantt-new-track > .calendar-weekend {
  margin-left: 0;
}
.asset-calendar-header {
  background: var(--fs-bg-base);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--fs-border-card);
  box-shadow: none;
}
.asset-calendar-header .calendar-fixed {
  background: var(--fs-bg-base);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.asset-fixed-cell {
  border-right: 1px solid var(--fs-border-card);
  font-size: 13px;
}
.asset-summary-row .asset-fixed-cell {
  background: var(--fs-n50);
}
.asset-phase-header {
  background: var(--fs-bg-base);
}

/* 排期条：圆角与飞书标签一致（6），阶段色走飞书色相 */
.external-stage-bar {
  border-radius: var(--fs-r-control);
  font-variant-numeric: tabular-nums;
}
.external-stage-bar.compact > small,
.external-stage-bar.short > .stage-bar-name {
  display: none;
}
.external-stage-bar > .stage-bar-duration {
  flex-shrink: 0;
}
.allocation-bar {
  border-radius: var(--fs-r-control);
  box-shadow: none;
}
.allocation-bar.whole-flow {
  cursor: pointer;
}
.allocation-bar.dragging {
  box-shadow: var(--fs-shadow);
}
/* 选中态描边改飞书蓝，跟其它选中态统一 */
.allocation-bar.bar-selected,
.external-stage-bar.bar-selected {
  outline: 2px solid var(--fs-blue);
  box-shadow: 0 0 0 4px var(--fs-blue-ring);
}

/* 日期滑块 */
.gantt-pan-track {
  height: 22px;
  border-radius: var(--fs-r-control);
  border: 1px solid var(--fs-border-card);
  background: var(--fs-n100);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.gantt-pan-thumb {
  border-radius: var(--fs-r-control);
  border: 1px solid var(--fs-border-component);
  background: var(--fs-bg-body);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 1px 3px rgba(31, 35, 41, 0.12);
}
.gantt-pan-thumb::after {
  background: repeating-linear-gradient(90deg, var(--fs-n500) 0 1px, transparent 1px 3px);
}
.gantt-pan.panning .gantt-pan-thumb {
  background: var(--fs-bg-body);
  box-shadow: 0 2px 6px rgba(31, 35, 41, 0.18);
}
.gantt-pan-step {
  border-radius: var(--fs-r-control);
  border-color: var(--fs-border-component);
  background: var(--fs-bg-body);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--fs-text-caption);
}
.gantt-pan-step:hover {
  background: var(--fs-n50);
  border-color: var(--fs-n400);
  color: var(--fs-text);
}

/* ---------- toast ---------- */
#toast {
  border-radius: var(--fs-r-control);
  background: rgba(31, 35, 41, 0.9);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  box-shadow: var(--fs-shadow);
  font-size: 14px;
}

/* ---------- 表格 ---------- */
.pricing-table,
.comparison {
  font-size: 14px;
}
.pricing-table thead th,
.comparison thead th {
  font-size: 12px;
  font-weight: 400;
  color: var(--fs-text-caption);
  background: var(--fs-bg-base);
  border-bottom: 1px solid var(--fs-border-card);
}
.pricing-table td,
.pricing-table th,
.comparison td,
.comparison th {
  border-color: var(--fs-border-card);
}
.pricing-asset th,
.pricing-asset td {
  background: var(--fs-n50);
}
.pricing-asset.active th,
.pricing-asset.active td {
  background: var(--fs-blue-lighter);
}
.page-footer {
  color: var(--fs-text-placeholder);
  font-size: 12px;
}

/* =============================================================================
   降级与无障碍：本版没有任何 backdrop-filter，所以只需处理对比度与打印
   ============================================================================= */

@media (prefers-contrast: more) {
  :root {
    --fs-border-card: #a9adb3;
    --fs-border-component: #8f959e;
    --fs-text-caption: #373c43;
    --fs-text-placeholder: #4e545c;
  }
}

@media print {
  body {
    background: #fff;
  }
  .sidebar,
  .topbar {
    display: none;
  }
  .app-shell {
    margin-left: 0;
  }
  #external-schedule-content,
  #schedule-content,
  #pricing-content,
  #budget-content,
  .compare-card,
  .metrics {
    background: #fff !important;
    box-shadow: none !important;
  }
}

/* ---------- 手机 ---------- */
@media (max-width: 760px) {
  .metrics .metric-label {
    min-height: 40px;
  }
  :root {
    --topbar-h: 48px;
  }
  main {
    padding: 14px 12px 0;
  }
  .project-heading h1 {
    font-size: 18px;
  }
  .view-tabs {
    gap: 14px;
    overflow-x: auto;
  }
  dialog.drawer {
    border-radius: var(--fs-r-card) var(--fs-r-card) 0 0;
  }
}

/* =============================================================================
   语义色：盈亏、达标、预警不跟主色走
   -----------------------------------------------------------------------------
   主色 #1456f0 只表示"可操作"。利润是好坏判断，用飞书的绿 #2ea121 / 红 #d83931，
   否则蓝色利润既看不出正负，也和按钮抢注意力。
   ============================================================================= */
:root {
  --fs-green: #2ea121;
  --fs-green-bg: rgba(46, 161, 33, 0.15);
  --fs-red: #d83931;
  --fs-red-bg: rgba(216, 57, 49, 0.15);
  --fs-yellow: #ad7a03;
  --fs-yellow-bg: rgba(173, 122, 3, 0.15);
  --red: #d83931;
}
.profit-metric .metric-value {
  color: var(--fs-green);
}
.profit-metric.negative .metric-value {
  color: var(--fs-red);
}
.metric-sub.error {
  color: var(--fs-red);
}
/* 达标 / 未达标标签走飞书标签公式：色相 15% 作底 + 深色字 */
.target-badge {
  color: var(--fs-text);
  background: var(--fs-green-bg);
  border-radius: var(--fs-r-control);
  padding: 1px 7px;
  font-size: 12px;
}
.target-badge.warning {
  color: var(--fs-text);
  background: var(--fs-yellow-bg);
}
.margin-track {
  background: var(--fs-n200);
  border-radius: 2px;
}
.margin-track > span {
  background: var(--fs-green);
  border-radius: 2px;
}
.schedule-alert {
  background: var(--fs-yellow-bg);
  color: var(--fs-text);
  border-radius: var(--fs-r-control);
}
/* 资产总条：用中性深灰，不跟阶段色和主色抢 */
.asset-project-bar {
  background: #5a6270;
  border-radius: var(--fs-r-control);
}

/* =============================================================================
   居中弹窗：长表单也要能用
   -----------------------------------------------------------------------------
   人员投入面板从右侧抽屉改成居中弹窗后，表单比屏幕高时不能把标题和操作区顶出视野，
   所以正文滚动、页眉与操作区吸住。负 margin 是用来抵消 .modal 的 26px 内边距。
   ============================================================================= */
dialog.modal {
  max-height: calc(100dvh - 48px);
  overflow: auto;
  overscroll-behavior: contain;
}
dialog.modal .modal-heading {
  position: sticky;
  top: -26px;
  z-index: 2;
  /* 标题与副标题顶对齐，关闭按钮不会掉到副标题那一行 */
  align-items: flex-start;
  background: var(--fs-bg-body);
  margin: -26px -26px 16px;
  padding: 26px 26px 12px;
  border-bottom: 1px solid var(--fs-border-card);
}
dialog.modal .modal-actions {
  position: sticky;
  bottom: -26px;
  z-index: 2;
  background: var(--fs-bg-body);
  margin: 20px -26px -26px;
  padding: 14px 26px 26px;
  border-top: 1px solid var(--fs-border-card);
}
/* 人员投入面板：删除按钮留在左侧，跟提交按钮拉开距离 */
#allocation-form .modal-actions {
  justify-content: space-between;
  align-items: center;
}

/* 面板内的计算摘要（类名沿用 drawer-calculation，形态已改为居中弹窗） */
.drawer-calculation {
  background: var(--fs-n50);
  border: 1px solid var(--fs-border-card);
  border-radius: var(--fs-r-control);
  padding: 14px 16px;
}
.drawer-calculation > div {
  font-size: 13px;
  color: var(--fs-text-caption);
}
.drawer-calculation strong {
  font-size: 22px;
  font-weight: 500;
  color: var(--fs-text);
}

/* 从人员池或甘特人员行双击进来时，高亮对应等级的日价输入框 */
.rate-focus {
  border-color: var(--fs-blue) !important;
  box-shadow: 0 0 0 3px var(--fs-blue-ring);
}

/* hidden 属性要压得过 .field 的 display:flex（全流程时藏起开始日期与投入比例） */
[hidden] {
  display: none !important;
}