/* ============================================================
   票据管理模块样式（独立，全部以 .tk- 前缀，不影响其他页面）
   ============================================================ */

.tk-page { animation: tkFade .18s ease; }
@keyframes tkFade { from { opacity: .55; } to { opacity: 1; } }

.tk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* 顶部 6 个按钮（横向一排） */
.tk-tabs {
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  overflow-x: auto; padding: 4px 0 10px;
}
.tk-tab {
  flex: 0 0 auto; min-width: 128px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 20px; border-radius: 10px; cursor: pointer;
  font-size: 14px; font-weight: 500; color: #5c5850;
  background: #fff; border: 1px solid var(--card-border, #e8e3da);
  transition: all .18s; white-space: nowrap;
}
.tk-tab:hover { border-color: #4f8c8c; color: #3d6e6e; transform: translateY(-1px); }
.tk-tab.active {
  background: linear-gradient(135deg, #4f8c8c, #3d6e6e);
  border-color: #3d6e6e; color: #fff;
  box-shadow: 0 4px 14px rgba(79,140,140,.22);
}
.tk-tab .tk-tab-badge {
  font-size: 11px; padding: 1px 6px; border-radius: 8px;
  background: rgba(0,0,0,.06); color: inherit;
}
.tk-tab.active .tk-tab-badge { background: rgba(255,255,255,.22); }

/* 列表卡片 */
.tk-card { padding: 16px 18px 12px; }
.tk-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.tk-search {
  position: relative; flex: 1 1 320px; max-width: 420px;
}
.tk-search input {
  width: 100%; padding: 9px 34px 9px 34px; font-size: 13px;
  border: 1px solid var(--border, #e0dbd2); border-radius: 10px; background: #fdfcfa;
  font-family: inherit; color: #3d3a35;
}
.tk-search input:focus { outline: none; border-color: #4f8c8c; box-shadow: 0 0 0 3px rgba(79,140,140,.1); background: #fff; }
.tk-search .tk-search-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: #a9a49a; pointer-events: none; display: flex;
}
.tk-search .tk-search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: none; background: transparent; color: #b5b0a4; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 2px 4px; display: none;
}
.tk-search.has-value .tk-search-clear { display: block; }

.tk-btn-new { display: inline-flex; align-items: center; gap: 6px; }

/* 数据表 */
.tk-table-wrap {
  overflow: auto; max-height: calc(100vh - 300px);
  border: 1px solid #ece7de; border-radius: 12px;
}
table.tk-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
table.tk-table th {
  position: sticky; top: 0; z-index: 2; background: #faf8f4; color: #6b6860;
  font-weight: 600; font-size: 12px; padding: 10px 12px; text-align: left;
  border-bottom: 1px solid #e8e3da; white-space: nowrap;
}
table.tk-table td {
  padding: 9px 12px; border-bottom: 1px solid #f3efe8; color: #4a463f;
  white-space: nowrap; vertical-align: middle;
}
table.tk-table tbody tr:hover td { background: #fbfaf7; }
table.tk-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tk-table td.center { text-align: center; }
table.tk-table th.num { text-align: right; }
table.tk-table th.center { text-align: center; }
.tk-panel:only-child .tk-table-wrap { max-height: calc(100vh - 330px); }
table.tk-table .tk-empty { text-align: center; color: #a9a49a; padding: 42px 0; }

.tk-doc-no { font-family: Consolas, "Courier New", monospace; font-size: 12px; color: #3d6e6e; font-weight: 600; }
.tk-status { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 11px; }
.tk-status.normal { background: #eaf4f0; color: #3f7a6c; }
.tk-status.red { background: #fdeceb; color: #b8483f; }
.tk-status.partial { background: #fdf1e3; color: #b8791f; }
.tk-amount.red { color: #b8483f; font-weight: 700; }

/* 列表分板块（已开票 / 已冲红、开票记录 / 冲红记录） */
.tk-panel { margin-bottom: 18px; }
.tk-panel:last-child { margin-bottom: 4px; }
.tk-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px; margin-bottom: 8px;
  background: #faf8f4; border: 1px solid #efeae2; border-left: 4px solid #4f8c8c;
  border-radius: 8px;
}
.tk-panel-title { font-size: 13.5px; font-weight: 700; color: #3d3a35; display: flex; align-items: center; gap: 8px; }
.tk-panel-title .tk-panel-count {
  font-style: normal; font-size: 11.5px; font-weight: 600; color: #3d6e6e;
  background: #e8f3f1; border-radius: 10px; padding: 1px 8px;
}
.tk-panel-sub { font-size: 12.5px; color: #8c8980; }
.tk-panel-sub b { color: #3d3a35; }
.tk-panel-sub b.red { color: #b8483f; }
.tk-panel .tk-table-wrap { max-height: 34vh; }
.tk-panel .tk-table-wrap.tk-paged { max-height: none; }

/* 选品两步提示 */
.tk-step-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding: 9px 14px; font-size: 12.5px; color: #6b6860;
  background: #faf8f4; border: 1px dashed #e0dbd2; border-radius: 10px; flex-wrap: wrap;
}
.tk-step-foot b { color: #3d3a35; }
.tk-quiet { color: #a9a49a; }

.tk-op { display: flex; gap: 6px; }
.tk-op button {
  border: 1px solid #e0dbd2; background: #fff; color: #5c5850;
  border-radius: 7px; padding: 4px 10px; font-size: 12px; cursor: pointer;
  transition: all .15s; font-family: inherit;
}
.tk-op button:hover { border-color: #4f8c8c; color: #3d6e6e; background: #f4fafa; }
.tk-op button.danger:hover { border-color: #d4726a; color: #b8483f; background: #fdf3f2; }
.tk-op button:disabled { opacity: .45; cursor: not-allowed; }

.tk-footer-line {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 2px 2px; font-size: 12.5px; color: #8c8980; flex-wrap: wrap;
}
.tk-footer-line b { color: #3d3a35; }

/* 冲红方式选择（全部冲红 / 部分冲红） */
.tk-red-choices { display: flex; flex-direction: column; gap: 12px; margin-bottom: 6px; }
.tk-red-choice {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left;
  padding: 14px 16px; border: 1px solid #e0dbd2; border-radius: 10px; background: #fff;
  cursor: pointer; font-family: inherit; transition: all .15s;
}
.tk-red-choice:hover { border-color: #4f8c8c; background: #f4fafa; box-shadow: 0 2px 8px rgba(79,140,140,.08); }
.tk-red-choice b { font-size: 14px; color: #3d3a35; }
.tk-red-choice span { font-size: 12.5px; color: #8c8980; line-height: 1.5; }

/* 部分冲红：勾选栏 / 说明摘要 */
.tk-red-pick-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 2px 4px; font-size: 13px; color: #6b6860; flex-wrap: wrap;
}
.tk-red-pick-bar b { color: #3d3a35; }
.tk-red-pick-bar .red { color: #b8483f; }
.tk-red-pick-ops { display: flex; gap: 8px; margin-left: auto; }
.tk-red-summary {
  font-size: 13px; color: #6b6860; background: #fdf3f2; border: 1px solid #f3d9d6;
  border-radius: 8px; padding: 9px 12px; margin-bottom: 12px;
}
.tk-red-summary b { color: #3d3a35; }
.tk-red-summary .red { color: #b8483f; font-weight: 700; }

/* 板块底部：左侧统计 + 右下角页码 */
.tk-panel-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 2px 2px; font-size: 12.5px; color: #8c8980; flex-wrap: wrap;
}
.tk-panel-stat b { color: #3d3a35; }
.tk-panel-stat b.red { color: #b8483f; }
/* 开票记录：冲红金额列（有值才显示，红色加粗） */
.tk-table td.tk-red-amt { color: #c0392b; font-weight: 700; }
.tk-pager { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.tk-pager-btn {
  min-width: 28px; height: 28px; padding: 0 8px; border-radius: 7px; border: 1px solid #e0dbd2;
  background: #fff; color: #5c5850; font-size: 12px; cursor: pointer; font-family: inherit;
  transition: all .15s;
}
.tk-pager-btn:hover:not(:disabled) { border-color: #4f8c8c; color: #3d6e6e; background: #f4fafa; }
.tk-pager-btn.active { background: #4f8c8c; border-color: #4f8c8c; color: #fff; font-weight: 600; }
.tk-pager-btn:disabled { opacity: .45; cursor: not-allowed; }
.tk-pager-gap { color: #a9a49a; font-size: 12px; padding: 0 2px; }

/* 选品弹窗 */
.tk-modal-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #efeae2;
}
.tk-modal-title { font-size: 17px; font-weight: 700; color: #3d3a35; }
.tk-modal-sub { font-size: 12.5px; color: #8c8980; }
.tk-step-meta {
  display: flex; gap: 10px 22px; flex-wrap: wrap; font-size: 12.5px; color: #6b6860;
  background: #faf8f4; border: 1px solid #efeae2; border-radius: 10px; padding: 8px 14px; margin-bottom: 12px;
}
.tk-step-meta b { color: #3d3a35; font-weight: 600; }

.tk-pick-search { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.tk-pick-search .tk-search { max-width: 520px; }
.tk-pick-tip { font-size: 12px; color: #a9a49a; }

/* 供应商筛选（带输入联想） */
.tk-sup-filter { position: relative; flex: 0 1 360px; min-width: 260px; }
.tk-sup-filter input {
  width: 100%; padding: 9px 58px 9px 34px; font-size: 13px;
  border: 1px solid var(--border, #e0dbd2); border-radius: 10px; background: #fdfcfa;
  font-family: inherit; color: #3d3a35; cursor: pointer;
}
.tk-sup-filter input:focus { cursor: text; }
.tk-sup-caret {
  position: absolute; right: 8px; top: 19px; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 5px; display: flex;
  align-items: center; justify-content: center; color: #8c8980; cursor: pointer;
}
.tk-sup-caret:hover { background: #f0ece4; color: #4f8c8c; }
.tk-sup-filter input:focus { outline: none; border-color: #4f8c8c; box-shadow: 0 0 0 3px rgba(79,140,140,.1); background: #fff; }
.tk-sup-filter .tk-search-icon {
  position: absolute; left: 11px; top: 19px; transform: translateY(-50%);
  color: #a9a49a; pointer-events: none; display: flex;
}
.tk-sup-clear {
  position: absolute; right: 32px; top: 19px; transform: translateY(-50%);
  width: 18px; height: 18px; line-height: 16px; text-align: center; border-radius: 50%;
  color: #b5b0a4; cursor: pointer; font-size: 15px; display: none; user-select: none;
}
.tk-sup-filter.has-value .tk-sup-clear { display: block; }
.tk-sup-clear:hover { background: #f0ece4; color: #6b6860; }
.tk-sup-drop {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  background: #fff; border: 1px solid #e6e1d7; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12); max-height: 300px; overflow: auto; display: none;
}
.tk-sup-drop.show { display: block; }
.tk-sup-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; font-size: 13px; color: #3d3a35; cursor: pointer;
}
.tk-sup-item:hover, .tk-sup-item.active { background: #f2f7f6; }
.tk-sup-item .tk-sup-name { flex: 1; word-break: break-all; }
.tk-sup-item .tk-sup-cnt { color: #a9a49a; font-size: 11.5px; white-space: nowrap; }
.tk-sup-empty { padding: 12px; font-size: 12.5px; color: #a9a49a; text-align: center; }

.tk-pick-wrap {
  overflow: auto; max-height: calc(100vh - 545px); min-height: 190px;
  border: 1px solid #ece7de; border-radius: 10px;
}
table.tk-pick td.tk-code { white-space: nowrap; font-family: Consolas, "Courier New", monospace; font-size: 12px; }
table.tk-pick { width: 100%; min-width: 1420px; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
table.tk-pick.tk-pick-picked { min-width: 1120px; }
/* 部分冲红勾选表：完整适配弹窗宽度，不横向滚动 */
table.tk-pick.tk-pick-red { min-width: 0; }
table.tk-pick.tk-pick-red th, table.tk-pick.tk-pick-red td { white-space: normal; }
table.tk-pick th.num { text-align: right; }
/* 查看弹窗：已冲红明细加粗、合计行 */
.tk-pick tr.tk-item-red td { font-weight: 700; color: #c0392b; background: #fdf6f5; }
.tk-pick tr.tk-view-total td { font-weight: 700; background: #f6f4ee; border-top: 2px solid #d9d3c8; }
/* 开票清单详情：开票 / 冲红流水行 */
.tk-flow-line {
  font-size: 13px; color: #5c5850; background: #f7f9f9; border: 1px solid #e2ecec;
  border-radius: 8px; padding: 9px 12px; margin-bottom: 10px; line-height: 1.6;
}
.tk-flow-line b { color: #2f4f4f; }
.tk-flow-line b.red { color: #c0392b; }

/* 冲红清单详情：来源说明行 */
.tk-red-source {
  font-size: 13px; color: #6b6860; background: #fdf3f2; border: 1px solid #f3d9d6;
  border-radius: 8px; padding: 9px 12px; margin-bottom: 10px; line-height: 1.6;
}
.tk-red-source b { color: #3d3a35; }
.tk-red-source .red { color: #c0392b; }
table.tk-pick th {
  position: sticky; top: 0; z-index: 2; background: #f6f3ec; color: #6b6860;
  font-size: 12px; font-weight: 600; padding: 9px 10px; text-align: left;
  border-bottom: 1px solid #e6e1d7; white-space: nowrap;
}
table.tk-pick td { padding: 7px 10px; border-bottom: 1px solid #f4f0e9; vertical-align: middle; }
table.tk-pick tr.picked td { background: #f2fbf7; }
table.tk-pick td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tk-pick td.center { text-align: center; }
table.tk-pick .tk-qty {
  width: 74px; padding: 5px 8px; font-size: 12.5px; text-align: right;
  border: 1px solid #e0dbd2; border-radius: 7px; font-family: inherit;
}
table.tk-pick .tk-qty:focus { outline: none; border-color: #4f8c8c; box-shadow: 0 0 0 2px rgba(79,140,140,.12); }
table.tk-pick .tk-qty:disabled { background: #f7f5f1; color: #b5b0a4; }
table.tk-pick td.amt { text-align: right; font-variant-numeric: tabular-nums; color: #3d6e6e; font-weight: 600; }
table.tk-pick .tk-name { white-space: normal; min-width: 190px; line-height: 1.4; }
table.tk-pick td.tk-sup { min-width: 170px; max-width: 260px; color: #5c5850; line-height: 1.4; }
table.tk-pick input.tk-pick-cb { width: 16px; height: 16px; cursor: pointer; accent-color: #4f8c8c; }
table.tk-pick tbody tr { cursor: pointer; }
table.tk-pick tbody tr:hover td { background: #fbfaf6; }
table.tk-pick tbody tr.picked:hover td { background: #eaf7f0; }

.tk-total-bar {
  margin-top: 12px; display: flex; align-items: center; justify-content: space-between;
  gap: 10px 24px; flex-wrap: wrap;
  background: #faf8f4; border: 1px solid #efeae2; border-radius: 10px; padding: 10px 16px;
}
.tk-total-bar .tk-total-item { font-size: 13px; color: #6b6860; }
.tk-total-bar .tk-total-item b { font-size: 16px; color: #b87090; font-weight: 700; margin-left: 4px; }
.tk-total-bar .tk-cn { font-size: 13px; color: #3d3a35; }
.tk-total-bar .tk-cn b { color: #3d6e6e; }

.tk-modal-actions {
  display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid #efeae2;
}

/* 表单行 */
.tk-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .tk-form-row { grid-template-columns: 1fr; } }

/* 单据结果 */
.tk-result-list { display: flex; flex-direction: column; gap: 10px; }
.tk-result-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border: 1px solid #ece7de; border-radius: 10px; background: #fcfbf9;
  flex-wrap: wrap;
}
.tk-result-item .tk-result-main { display: flex; flex-direction: column; gap: 2px; }
.tk-result-item .tk-result-no { font-family: Consolas, monospace; font-weight: 600; color: #3d6e6e; }

/* 详情 */
.tk-detail-meta { display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 13px; color: #6b6860; margin-bottom: 12px; }
.tk-detail-meta b { color: #3d3a35; }

/* 旧账冲红（我要冲票）提示 */
.tk-oldred-tip { font-size: 13px; color: #b8483f; background: #fdf3f2; border: 1px solid #f3d9d6; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; }
.tk-oldred-tip b { color: #b8483f; }

/* 选取耗材：底部分页（左下角） */
.tk-pick-foot { display: flex; align-items: center; gap: 10px; justify-content: flex-start; padding: 8px 2px 0; font-size: 13px; color: #6b6860; flex-wrap: wrap; }
.tk-pick-foot .tk-pager { margin-left: 2px; }

/* ===== 冲红原因 ===== */
.tk-op button:disabled { opacity: .45; cursor: not-allowed; }
.tk-red-reason { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: #6b3a33; background: #fdf3f2; border: 1px solid #f3d9d6; border-radius: 8px; padding: 8px 12px; margin: 6px 0 8px; }
.tk-red-reason-label { flex: 0 0 auto; color: #b8483f; font-weight: 600; }
.tk-reason-list { display: flex; flex-direction: column; gap: 10px; max-height: 56vh; overflow: auto; }
.tk-reason-item { border: 1px solid #e8e4dc; border-radius: 10px; padding: 10px 12px; background: #fdfcf9; }
.tk-reason-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: #6b6860; margin-bottom: 6px; }
.tk-reason-no { font-weight: 600; color: #2f2c27; }
.tk-reason-amt { margin-left: auto; color: #c0392b; font-weight: 600; }
.tk-reason-text { font-size: 13.5px; color: #33302b; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.tk-reason-empty { text-align: center; padding: 40px 10px; color: #a9a49a; }