/* =========================================================
   本轮新增的两块 UI（2026-11-04）
   ① 总账 · 账单展开详情：重排结构，不再套第二张表
   ② 记一笔 · 右下角「连续记账」浮动开关
   放在 mono.css 之后加载：mono.css 第 14 节对详情区的旧样式用 !important
   覆盖掉，这里同样用 !important 压回去。
   ========================================================= */

/* ---------- ① 账单展开详情 ---------- */
.bill-detail-cell.bd-wrap {
  background: #ffffff !important;
  border-left: 0 !important;
  border-bottom: 1px solid #ececec;
  padding: 0 !important;
}

/* 眉标行 */
.bd-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 20px 10px;
  border-bottom: 1px solid #ececec;
}
.bd-title {
  font: 400 10.5px/1 "SF Mono", Consolas, monospace;
  letter-spacing: .16em;
  color: #8a8a8a;
}
.bd-count {
  font: 400 11.5px/1 "SF Mono", Consolas, monospace;
  color: #6f6f6f;
}

/* 明细行：名称规格 | 数量×单价 | 金额 */
.bd-list { padding: 0 20px; }
.bd-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px 156px;
  align-items: baseline;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid #f2f2f2;
}
.bd-row:last-child { border-bottom: 0; }

.bd-main { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.bd-name {
  flex: 0 1 auto;
  font-size: 13px;
  font-weight: 600;
  color: #0b0b0b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bd-spec {
  font-size: 11px;
  color: #8a8a8a;
  letter-spacing: .02em;
  white-space: nowrap;
}
.bd-calc {
  text-align: right;
  font: 400 11.5px/1.4 "SF Mono", Consolas, monospace;
  color: #6f6f6f;
  white-space: nowrap;
}
.bd-calc i { font-style: normal; color: #b0b0b0; margin-right: 3px; }
.bd-amt {
  text-align: right;
  font: 600 12.5px/1.4 "SF Mono", Consolas, monospace;
  color: #0b0b0b;
  white-space: nowrap;
}

.bd-empty {
  padding: 16px 20px;
  font-size: 12px;
  color: #8a8a8a;
}

/* 页脚：元信息 + 附件 */
.bd-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 26px;
  padding: 12px 20px 14px;
  border-top: 1px solid #ececec;
}
.bd-meta { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0; }
.bd-meta > div { display: flex; align-items: baseline; gap: 8px; }
.bd-meta dt {
  font: 400 8.5px/1 "SF Mono", Consolas, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #a8a8a8;
}
.bd-meta dd { margin: 0; font-size: 12px; color: #2a2a2a; }

.bd-atts { display: flex; flex-wrap: wrap; gap: 14px; margin-left: auto; }
.bd-att {
  font-size: 12px;
  color: #0b0b0b;
  text-decoration: none;
  border-bottom: 1px solid #c9c9c9;
  padding-bottom: 1px;
}
.bd-att:hover { border-bottom-color: #0b0b0b; }

/* 窄一点的内容区（侧栏 + 面板都开着时）把「数量×单价」列收窄 */
@media (max-width: 1180px) {
  .bd-row { grid-template-columns: minmax(0, 1fr) 168px 130px; gap: 12px; }
}

/* ---------- ② 记一笔 · 右下角连续记账开关 ---------- */
.bc-mode {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 176px;
  padding: 13px 16px 14px;
  background: #0b0b0b;
  color: #fff;
  border-radius: 0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .2);
  -webkit-user-select: none;
  user-select: none;
}
.bc-mode-kicker {
  font: 400 8px/1 "SF Mono", Consolas, monospace;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
}
.bc-mode-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.bc-mode-label {
  font-size: 12.5px;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .9);
}
.bc-mode.is-on .bc-mode-label { color: #fff; }

.bc-mode-switch {
  position: relative;
  flex: none;
  width: 40px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 0;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.bc-mode-switch:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }
.bc-mode-switch:hover { border-color: rgba(255, 255, 255, .75); }

.bc-mode-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: rgba(255, 255, 255, .45);
  transition: left .16s ease, background .16s ease;
}
.bc-mode.is-on .bc-mode-knob { left: 22px; background: #fff; }
.bc-mode.is-on .bc-mode-switch { background: rgba(255, 255, 255, .14); border-color: #fff; }

.bc-mode-state {
  display: inline-block;
  margin-left: -6px;
  font: 400 9px/1 "SF Mono", Consolas, monospace;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .5);
}
.bc-mode.is-on .bc-mode-state { color: #fff; }

@media (max-width: 720px) {
  .bc-mode { right: 14px; bottom: 14px; min-width: 0; padding: 11px 13px 12px; }
}