/* 运营后台专有样式，通用部分在 /ui.css（TraeWork Light） */

.input {
  height: 32px; padding: 0 var(--spacer-12); min-width: 140px;
  background: var(--bg-base-default); border: 1px solid var(--border-neutral-l1); border-radius: var(--radius-8);
  color: var(--text-default); font: inherit; font-size: var(--body-base-font-size);
}
.input:focus { outline: none; border-color: var(--border-contrast); }
select.input { min-width: 120px; }
.who select { margin-right: var(--spacer-6); }

/* ---------------------------------------------------------- KPI */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--spacer-16); }
.kpi { background: var(--bg-base-default); border: 1px solid var(--border-neutral-l1); border-radius: var(--radius-12); padding: var(--spacer-20); }
.kpi .v { font-size: 26px; font-weight: 600; line-height: 1.2; font-family: var(--font-family-metric); font-variant-numeric: tabular-nums; }
.kpi .k { color: var(--text-tertiary); font-size: var(--body-md-font-size); margin-top: var(--spacer-4); }
.kpi .sub { color: var(--text-tertiary); font-size: var(--body-sm-font-size); margin-top: var(--spacer-6); }
.kpi.warn .v { color: var(--status-warning-default); }
.kpi.err .v { color: var(--status-error-default); }

/* ---------------------------------------------------------- 条形图 */
.bars { display: flex; flex-direction: column; gap: var(--spacer-8); }
.bar-row { display: flex; align-items: center; gap: var(--spacer-12); font-size: var(--body-md-font-size); }
.bar-label { width: 150px; color: var(--text-tertiary); text-align: right; flex-shrink: 0; }
.bar-track { flex: 1; height: 8px; background: var(--bg-overlay-l2); border-radius: var(--radius-full); overflow: hidden; }
.bar-fill { height: 100%; background: var(--text-default); border-radius: inherit; min-width: 2px; transition: width 300ms ease; }
.bar-fill.drop { background: var(--status-error-default); }
.bar-val { width: 90px; font-size: var(--body-md-font-size); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- 表单 */
.field { display: flex; align-items: center; justify-content: space-between; gap: var(--spacer-12); margin-top: var(--spacer-10); font-size: var(--body-base-font-size); }
.field .input { width: 110px; min-width: 0; }
.field.switch { justify-content: flex-start; gap: var(--spacer-8); }
.field input[type=checkbox] { accent-color: var(--bg-brand); width: 16px; height: 16px; }

.chips { display: flex; flex-wrap: wrap; gap: var(--spacer-8); }
.chip {
  display: inline-flex; align-items: center; gap: var(--spacer-6);
  height: 24px; padding: 0 var(--spacer-8);
  background: var(--bg-overlay-l2); border: 1px solid var(--border-neutral-l1); border-radius: var(--radius-8);
  color: var(--text-secondary); font-size: var(--body-sm-font-size);
}
.chip button { background: none; border: none; color: var(--icon-tertiary); cursor: pointer; padding: 0; font: inherit; }
.chip button:hover { color: var(--status-error-default); }

/* ---------------------------------------------------------- 表格补充 */
.table td.acts { white-space: nowrap; }
.pane.hidden { display: none; }
.mini { font-size: var(--body-sm-font-size); color: var(--text-tertiary); }
.detail-json {
  display: block; max-width: 320px;
  font: var(--body-sm-font-size)/1.5 var(--font-family-mono); color: var(--text-tertiary);
  background: transparent; padding: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}