* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: -apple-system, "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  background: #f4f6fa; color: #1c2430; font-size: 13px;
}
.app { display: flex; height: 100vh; overflow: hidden; }

/* ---------- 左侧组织树 ---------- */
.side {
  width: 288px; min-width: 288px; background: #fff; border-right: 1px solid #e3e8f0;
  display: flex; flex-direction: column;
}
.side-head { padding: 16px 16px 10px; border-bottom: 1px solid #eef2f7; }
.logo { font-size: 15px; font-weight: 700; }
.logo-sub { color: #8a97a8; font-size: 12px; margin-top: 2px; }
.side-search { padding: 10px 12px; }
.side-search input {
  width: 100%; border: 1px solid #dde4ee; border-radius: 8px; padding: 7px 10px; font-size: 12px;
}
.tree { flex: 1; overflow: auto; padding: 4px 6px 20px; }
.node {
  display: flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 6px;
  cursor: pointer; color: #33445c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.node:hover { background: #f4f7fc; }
.node.on { background: #e8f0ff; color: #1f5fe0; font-weight: 600; }
.node .caret { width: 14px; text-align: center; color: #9aa7b8; font-size: 10px; flex: none; }
.node .nm { overflow: hidden; text-overflow: ellipsis; }
.node .cnt { margin-left: auto; color: #a6b2c2; font-size: 11px; }
.node.root { font-weight: 600; }

/* ---------- 右侧内容 ---------- */
.content { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.top {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 18px; background: #fff; border-bottom: 1px solid #e3e8f0;
}
.crumb { font-size: 14px; font-weight: 600; color: #1c2430; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me { display: flex; align-items: center; gap: 8px; flex: none; }
.me input { border: 1px solid #d6dde8; border-radius: 6px; padding: 6px 8px; width: 110px; }
.saved { color: #1f9d55; font-size: 12px; opacity: 0; transition: opacity .3s; }
.saved.on { opacity: 1; }

.dims { display: flex; gap: 8px; padding: 10px 18px; background: #fff; border-bottom: 1px solid #e6ebf2; flex-wrap: wrap; }
.dims button {
  border: 1px solid #d6dde8; background: #fff; color: #33445c;
  padding: 6px 14px; border-radius: 16px; cursor: pointer; font-size: 13px;
}
.dims button.on { background: #2f6fed; border-color: #2f6fed; color: #fff; }

.main { flex: 1; overflow: auto; padding: 14px 18px 40px; }
.card { background: #fff; border: 1px solid #e3e8f0; border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.card h3 {
  margin: 0; padding: 10px 14px; font-size: 13px; background: #f7f9fc; border-bottom: 1px solid #e9eef5;
  color: #33445c; display: flex; justify-content: space-between; gap: 10px;
}
.card h3 .sum { color: #2f6fed; font-weight: 600; white-space: nowrap; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 6px 10px; border-bottom: 1px solid #eef2f7; text-align: left; vertical-align: middle; }
th { background: #fbfcfe; color: #2c3e55; font-weight: 700; font-size: 13px; white-space: nowrap; letter-spacing: .2px; }
th.num { text-align: center; }
td.num, td.num input { text-align: center; }
tr:hover td { background: #fafcff; }
td input, td select {
  width: 100%; border: 1px solid transparent; background: transparent; padding: 5px 6px;
  border-radius: 5px; font: inherit; color: inherit;
}
td input:hover, td select:hover { border-color: #dfe6f0; background: #fff; }
td input:focus, td select:focus { outline: none; border-color: #2f6fed; background: #fff; }
.money { font-variant-numeric: tabular-nums; }
tr.total td { background: #f2f6ff; font-weight: 600; }
tr.group td { background: #f7f9fc; font-weight: 600; color: #33445c; }
.row-actions { text-align: right; white-space: nowrap; }
.row-actions button { border: none; background: none; color: #98a5b6; cursor: pointer; font-size: 12px; }
.row-actions button:hover { color: #e5484d; }
.addbar { padding: 9px 14px; background: #fbfcfe; }
.addbar button { border: 1px dashed #b9c6d8; background: #fff; color: #2f6fed; padding: 5px 12px; border-radius: 6px; cursor: pointer; }
.hint { padding: 9px 14px; color: #7a8798; font-size: 12px; line-height: 1.6; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; background: #eef4ff; color: #2f6fed; font-weight: 400; }
.foot {
  display: flex; justify-content: space-between; padding: 8px 18px; background: #fff;
  border-top: 1px solid #e3e8f0; color: #7a8798; font-size: 12px;
}
.empty { padding: 30px; text-align: center; color: #8a97a8; }

@media (max-width: 860px) {
  .side { width: 220px; min-width: 220px; }
  .me input { width: 80px; }
}

.submit {
  border: none; background: #2f6fed; color: #fff; padding: 7px 16px; border-radius: 6px;
  cursor: pointer; font-size: 13px; font-weight: 500;
}
.submit:hover { background: #1f5fe0; }
.submit:disabled { background: #9fb6e8; cursor: default; }
.submitted { color: #7a8798; font-size: 12px; }
.row-actions button.toggle {
  border: 1px solid #d6dde8; background: #fff; color: #2f6fed; border-radius: 5px;
  padding: 2px 8px; margin-left: 8px; font-size: 12px; cursor: pointer;
}



table.grid th, table.grid td { padding: 4px 6px; font-size: 12px; }
table.grid td input { padding: 3px 4px; }
table.grid td.region { color: #5b6b80; font-weight: 600; white-space: nowrap; }
table.grid td.subtotal { color: #2f6fed; font-weight: 600; }
table.grid tr.grand td { background: #fdeceb; font-weight: 800; color: #d92d20; font-size: 13px; }
table.grid tr.grand td.money { color: #d92d20; }
table.grid tr.total .row-actions button { font-size: 11px; color: #2f6fed; }


tr.grandrow td { background: #fdeceb; color: #d92d20; font-weight: 800; }


table.grid input.grp { font-weight: 700; color: #33445c; background: transparent; border-color: transparent; }
table.grid input.grp:hover { border-color: #dfe6f0; background: #fff; }