/* ==========================================================================
   FinLearn 共享中心工作台（Workbench）
   依赖：tokens / base / components / finance-viz
   参考产品形态：财务共享作业平台（左侧功能导航 + 顶部 KPI 条 + 主工作区 + 右侧详情）
   布局纪律：工作台内部独立滚动，不外溢撑破整页（移动端转为顺序堆叠）
   ========================================================================== */

.ws {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-8) var(--space-16);
}

/* ---------- 顶部状态条 ---------- */
.ws-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
}

.ws-strip__cell {
  padding: var(--space-4) var(--space-5);
  border-right: 1px solid var(--color-border);
}

.ws-strip__cell:last-child { border-right: 0; }

.ws-strip__label {
  display: block;
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
}

.ws-strip__value {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-heading);
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.ws-strip__cell--alert .ws-strip__value { color: var(--color-danger); }
.ws-strip__cell--ok .ws-strip__value { color: var(--color-success); }

/* ---------- 主工作区：左导航 + 右内容 ---------- */
.ws-main {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.ws-nav {
  position: sticky;
  top: calc(var(--header-h) + var(--space-5));
  display: grid;
  gap: 2px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.ws-nav__group {
  padding: var(--space-3) var(--space-3) var(--space-1);
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.ws-nav button {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  width: 100%;
  padding: var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: left;
}

.ws-nav button:hover { background: var(--paper-050); color: var(--color-heading); }

.ws-nav button[aria-current="true"] {
  background: var(--ink-050);
  color: var(--ink-700);
  font-weight: var(--weight-semibold);
  box-shadow: inset 2px 0 0 var(--color-accent);
}

.ws-nav__icon { color: currentColor; opacity: .7; }

.ws-nav__count {
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--paper-100);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.ws-nav button[aria-current="true"] .ws-nav__count {
  background: var(--ink-700);
  color: #fff;
}

.ws-panel {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}

/* ---------- 工具条 ---------- */
.ws-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.ws-toolbar .field { min-width: 130px; flex: 0 1 auto; }
.ws-toolbar .field--grow { flex: 1 1 200px; }
.ws-toolbar .field__label { font-size: var(--text-xs); }
.ws-toolbar .input,
.ws-toolbar .select { min-height: 36px; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.ws-toolbar__spacer { flex: 1 1 auto; }

/* ---------- 数据表 ---------- */
.ws-table-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow-x: auto;
}

.ws-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.ws-table caption {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background: var(--paper-050);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-align: left;
}

.ws-table th,
.ws-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.ws-table thead th {
  background: var(--paper-050);
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  position: sticky;
  top: 0;
  z-index: var(--z-base);
}

.ws-table tbody tr:hover { background: var(--paper-050); }
.ws-table tbody tr[data-selected="true"] { background: var(--ink-050); }

.ws-table__check { width: 40px; }
.ws-table__id { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-accent); }
.ws-table__amount {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: var(--weight-semibold);
}
.ws-table__link {
  border: 0;
  background: none;
  padding: 0;
  color: var(--accent, var(--color-accent));
  font-weight: var(--weight-semibold);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.ws-table__link:hover { color: var(--color-primary); }

.ws-empty {
  padding: var(--space-12) var(--space-6);
  color: var(--color-text-muted);
  text-align: center;
}

/* ---------- 状态徽标与时效 ---------- */
.st { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-semibold); white-space: nowrap; }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st--info { background: var(--ink-050); color: var(--ink-700); }
.st--warning { background: var(--amber-100); color: var(--amber-700); }
.st--success { background: var(--green-100); color: var(--green-700); }
.st--danger { background: var(--vermilion-100); color: var(--vermilion-700); }

.sla { font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.sla--ok { color: var(--green-700); }
.sla--warn { color: var(--amber-700); font-weight: var(--weight-semibold); }
.sla--over { color: var(--vermilion-700); font-weight: var(--weight-bold); }

/* 时效进度条 */
.sla-bar { position: relative; width: 64px; height: 6px; border-radius: 3px; background: var(--paper-100); overflow: hidden; }
.sla-bar__fill { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--green-600); }
.sla-bar__fill--warn { background: var(--gold-500); }
.sla-bar__fill--over { background: var(--vermilion-600); }

/* ---------- 批量操作条 ---------- */
.ws-bulk {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--gold-300);
  border-radius: var(--radius-md);
  background: var(--gold-100);
  font-size: var(--text-sm);
}

.ws-bulk__count { font-weight: var(--weight-bold); color: var(--gold-800); }

/* ---------- 单据详情 ---------- */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

.doc-field {
  display: grid;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--paper-050);
}

.doc-field__k { color: var(--color-text-subtle); font-size: var(--text-xs); }
.doc-field__v { color: var(--color-heading); font-size: var(--text-sm); font-weight: var(--weight-medium); word-break: break-word; }
.doc-field__v.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.doc-block { display: grid; gap: var(--space-3); }
.doc-block__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}
.doc-block__title::before { content: ""; width: 4px; height: 14px; background: var(--color-accent); border-radius: 2px; }

/* 影像占位（教学环境用图示代替真实影像，避免使用未授权票据图片） */
.doc-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }

.doc-image {
  display: grid;
  place-items: center;
  gap: var(--space-2);
  aspect-ratio: 4 / 3;
  padding: var(--space-3);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  background:
    repeating-linear-gradient(45deg, var(--paper-050), var(--paper-050) 8px, var(--paper-100) 8px, var(--paper-100) 16px);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-align: center;
}

.doc-image__label { font-weight: var(--weight-semibold); color: var(--color-text); }

/* 流转时间线 */
.flow { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }

.flow__item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  position: relative;
}

.flow__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 20px;
  bottom: 0;
  width: 1px;
  background: var(--color-border-strong);
}

.flow__dot {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: 2px solid var(--color-border-strong);
  background: var(--color-surface);
  display: grid;
  place-items: center;
  font-size: 10px;
  color: var(--color-text-subtle);
  z-index: 1;
}

.flow__item--done .flow__dot { border-color: var(--green-600); background: var(--green-600); color: #fff; }
.flow__item--current .flow__dot { border-color: var(--color-accent); background: var(--color-accent); color: #fff; }

.flow__body { display: grid; gap: 1px; }
.flow__title { color: var(--color-heading); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.flow__meta { color: var(--color-text-subtle); font-size: var(--text-xs); font-family: var(--font-mono); }

/* ---------- 绩效看板（可配置） ---------- */
.board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

.board-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--ink-700);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.board-card--alert { border-top-color: var(--vermilion-600); }
.board-card--ok { border-top-color: var(--green-600); }

.board-card__name { color: var(--color-text-muted); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); }
.board-card__value {
  color: var(--color-heading);
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}
.board-card__unit { margin-left: var(--space-1); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-muted); }
.board-card__target { color: var(--color-text-subtle); font-size: var(--text-xs); }
.board-card__hint { color: var(--color-text-muted); font-size: var(--text-xs); line-height: var(--leading-snug); }

.board-weights { display: grid; gap: var(--space-2); }
.board-weight-row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) 96px 46px;
  gap: var(--space-3);
  align-items: center;
  font-size: var(--text-sm);
}
.board-weight-row input[type="range"] { width: 100%; accent-color: var(--ink-700); }
.board-weight-row__val { font-family: var(--font-mono); text-align: right; color: var(--color-heading); font-weight: var(--weight-semibold); }

.board-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.board-total strong { font-family: var(--font-mono); font-size: var(--text-lg); color: var(--color-heading); }

/* ---------- 组织与定编 ---------- */
.org-tree { display: grid; gap: var(--space-3); }

.org-node {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.org-node__head { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: baseline; justify-content: space-between; }
.org-node__name { color: var(--color-heading); font-weight: var(--weight-bold); font-size: var(--text-sm); }
.org-node__meta { color: var(--color-text-subtle); font-size: var(--text-xs); }
.org-node__posts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.org-post {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--paper-050);
  font-size: var(--text-xs);
}
.org-post strong { font-family: var(--font-mono); color: var(--color-heading); }

/* 教材未给出、需课堂测算的岗位 */
.org-post__pending {
  padding: 0 4px;
  border-radius: var(--radius-xs);
  background: var(--gold-100);
  color: var(--gold-800);
  font-weight: var(--weight-semibold);
}

/* ---------- 计算器 ---------- */
.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.calc-out {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--border, var(--color-border));
  border-radius: var(--radius-md);
  background: var(--ink-050);
}
.calc-out__label { color: var(--color-text-subtle); font-size: var(--text-xs); }
.calc-out__value { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--color-heading); }
.calc-out__note { color: var(--color-text-muted); font-size: var(--text-xs); }

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .ws-main { grid-template-columns: minmax(0, 1fr); }
  .ws-nav {
    position: static;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-2);
  }
  .ws-nav__group { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .ws-strip__cell { border-right: 0; border-bottom: 1px solid var(--color-border); }
  .ws-table th,
  .ws-table td { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
  .doc-grid { grid-template-columns: minmax(0, 1fr); }
  .board-weight-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .board-weight-row__val { text-align: left; }
}

@media print {
  .ws-nav, .ws-toolbar, .ws-bulk { display: none; }
  .ws-table tbody tr { break-inside: avoid; }
}