/* voucher.css -- T+ 18.0 voucher entry page (GL0101, UI-SPEC section 9)
 *
 * Split from ui-kit.css so that a page which does not use the voucher can skip
 * this file entirely. Both files are safe to load together.
 *
 * 2026-11-06: aligned to spec/css/tokens-voucher.json (102 measured tokens,
 * decompiler VM getComputedStyle + raw CSS cross-check). Previously this file
 * used screenshot-estimated values; the 5 biggest deviations are fixed here:
 *   title 16px/Arial/margin 4+12 -> 18.6667px (14pt) / YaHei / margin 5px
 *   table border-collapse:collapse -> separate + border-spacing:0
 *   header row 30px / data 24px   -> header 81px / data 36px
 *   digit guide lines             -> lineBlue / lineRed (were absent)
 *   row-header column             -> 43px / 16px / 79px
 * Also form row (label 100px / input 113px) and sign row (220px items).
 * All tokens have fallbacks because base.css is owned by another developer.
 * ASCII-only comments so no tool with a non-UTF8 default can corrupt this file.
 */

.tj-voucher {
  --tj-red: #e8483e;
  --tj-blue: #2b7de1;
  --text-1: rgb(51, 51, 51);
  --text-2: rgb(102, 102, 102);
  --text-3: rgb(153, 153, 153);
  --border: rgb(204, 204, 204);
  --border-strong: rgb(204, 204, 204);

  /* required-field pale yellow (UI-SPEC section 2: T+ marks required with
     background, not borders; measured input-bw = 0px) */
  --v-required-bg: rgb(255, 247, 202);

  --font: Arial, "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Helvetica, sans-serif;

  padding: 12px;
  font-family: var(--font, Arial, "Microsoft YaHei", sans-serif);
  font-size: 12px;
  color: var(--text-1, #333333);
  box-sizing: border-box;
}

.tj-v-sheet {
  background: #fff;
  border: 1px solid var(--border, #e3e6ea);
  padding: 10px 12px 14px;
  box-sizing: border-box;
}

/* ---- title ----
 * tokens-voucher: vch-title-fs 18.6667px (14pt), ff 微软雅黑,
 * margin 5px, weight bold, color black, centered. These came from an inline
 * style attribute in T+ (grep of the 40 CSS files finds 0 hits -- that is
 * expected, not a missing capture). */
.tj-v-title {
  text-align: center;
  font-size: 18.6667px;
  font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
  font-weight: 700;
  color: #000;
  letter-spacing: 4px;
  margin: 5px;
}

/* ---- header form ---- */
.tj-v-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}

.tj-v-field {
  /* measured: each control block is 220px wide, blocks sit 230px apart (10px gap),
     three per row; label 100px right-aligned inside the block. */
  display: inline-flex;
  align-items: center;
  gap: 0;
  width: 220px;
}
html body .tj-v-form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}
/* header inputs use T+ underline style: white background, bottom border only.
   The pale-yellow fill belongs to grid cells only. */
html body .tj-v-form .tj-v-input {
  background: #fff;
}

/* tokens-voucher vch-label-w 100px, fs 13px, lh 22px,
   padding 0 4px 0 10px, right aligned. */
.tj-v-label {
  width: 100px;
  height: 22px;
  font-size: 13px;
  line-height: 22px;
  padding: 0 4px 0 10px;
  text-align: right;
  color: var(--text-1, #333333);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
}

/* required red dot, 4px, before the label (UI-SPEC section 2) */
.tj-v-req {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--tj-red, #e8483e);
  margin-right: 3px;
  flex: 0 0 auto;
}

/* tokens-voucher vch-ed-w 113px, h 24px, fs 12px,
   border-bottom 1px #ccc ONLY (no other borders). */
.tj-v-input {
  width: 113px;
  height: 24px;
  line-height: 24px;
  padding: 0 4px;
  font-size: 12px;
  font-family: inherit;
  color: var(--text-1, #333333);
  border: none;
  border-bottom: 1px solid #ccc;
  background: #fff;
  box-sizing: border-box;
  outline: none;
}

.tj-v-input:focus {
  border-color: var(--tj-blue, #2b7de1);
}

/* required inputs: pale yellow background, no border (measured input-bw = 0) */
.tj-v-input.tj-v-input-required {
  background: var(--v-required-bg, rgb(255, 247, 202));
}

/* ---- mini tabs ---- */
.tj-v-minitabs {
  /* measured (T+ #div_TabHead1 area): tab 42x24, gap 13, container has no border */
  display: flex;
  gap: 13px;
  margin-bottom: 6px;
  padding-left: 2px;
}

.tj-v-minitab {
  position: relative;
  height: 24px;
  line-height: 24px;
  padding: 0 8px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-2, #666666);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.tj-v-minitab.tj-active {
  /* measured on T+ GL0101: rgb(55,136,255) with font-weight 700 */
  color: rgb(55, 136, 255);
  font-weight: 700;
}

.tj-v-minitab.tj-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: rgb(55, 136, 255);
}

/* ---- grid ---- */
.tj-v-grid-wrap {
  overflow-x: auto;
  position: relative;
}

.tj-v-grid {
  /* content width (1242px measured composition); 100% stretched the fixed
     columns unevenly and pushed the digit blocks out of proportion */
  width: auto;
  /* tokens-voucher vch-tbl-collapse = separate, vch-tbl-spacing = 0 */
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 12px;
  background: #fff;
}

/* tokens-voucher vch-hr-h = 81px (header embeds a 33px digit row),
   vch-hr-bg #e8e8e8, vch-hr-fs 13px. Data rows are 36px, NOT 28px. */
/* Header total 81px = title row 48 + digit row 33 (measured from T+).
   Setting 81px on BOTH rows doubled it to 162. */
.tj-v-grid thead tr { background: rgb(232, 232, 232); }
.tj-v-grid thead tr.tj-v-head { height: 48px; }
.tj-v-grid thead tr.tj-v-head-digits { height: 33px; }
.tj-v-grid tbody tr { height: 36px; }

.tj-v-grid th {
  background: var(--grid-th-bg, rgb(232, 232, 232));
  color: var(--grid-th-color, rgb(0, 0, 0));
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  border: 1px solid rgb(204, 204, 204);
  border-left: 0;
  height: 30px;
  padding: 0 2px;
  box-sizing: border-box;
  white-space: nowrap;
}

/* Head title (借方/贷方): 16px, weight 400 (NOT bold), line-height 46px. */
.tj-v-th-amount {
  font-size: 16px;
  font-weight: 400;
  line-height: 46px;
}

/* second header row: the 13 amount digit labels (26 cells total).
   vch-span: inline-block, width 16px + 2px padding = 20px, height 28px,
   line-height 28px, border-top/left 1px solid #ccc. */
/* Header digit cells MUST stay table-cell: inline-block breaks the table grid
   and makes the 13-digit row wrap into a vertical column (measured: thead 965px). */
.tj-v-head-digits th {
  display: table-cell;
  width: 16px;
  height: 28px;
  line-height: 28px;
  padding: 2px;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  color: rgb(51, 51, 51);
  background: rgb(232, 232, 232);
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  box-sizing: content-box;
}

/* Digit guide lines -- the visual soul of the 13-digit amount header.
   T+ generates these at runtime so they are absent from all 40 CSS files;
   the two colors were measured directly. Two groups of 13 digit cells:
   debit (1..13) then credit (14..26). lineBlue before 亿(i=2),
   百万(i=5), 十万(i=6) => nth-child 3,6,7 and 16,19,20.
   lineRed before 角(i=11) => nth-child 12 and 25. */
.tj-v-digit {
  display: inline-block;
  width: 16px;
  height: 28px;
  line-height: 28px;
  padding: 2px;
  text-align: center;
  box-sizing: content-box;
}

.tj-v-head-digits th:nth-child(3),
.tj-v-head-digits th:nth-child(6),
.tj-v-head-digits th:nth-child(7),
.tj-v-head-digits th:nth-child(16),
.tj-v-head-digits th:nth-child(19),
.tj-v-head-digits th:nth-child(20),
.tj-v-digit.lineBlue {
  border-left: 1px solid rgba(165, 217, 246, .5);
}
.tj-v-head-digits th:nth-child(12),
.tj-v-head-digits th:nth-child(25),
.tj-v-digit.lineRed {
  border-left: 1px solid rgba(238, 185, 185, .4);
}

.tj-v-grid td {
  border: 1px solid rgb(204, 204, 204);
  border-left: 0;
  height: 36px;
  padding: 0;
  box-sizing: border-box;
  vertical-align: middle;
}

/* Row header: tokens-voucher vch-rh-w 43px, h 79px, fs 16px (larger than
   the 12px body text), bg #e8e8e8, the ONLY cell with all four borders. */
/* 79px belongs to the HEADER row-header cell only. Sharing the rule with
   td.tj-v-td-handle forced every body row to 79px (measured rowH 79 vs 36). */
.tj-v-grid th.tj-v-th-handle {
  height: 79px;
}
.tj-v-grid td.tj-v-td-handle,
.tj-v-grid th.tj-v-th-handle {
  width: 43px;
  line-height: 14px;
  font-size: 16px;
  padding: 0 !important;
  text-align: center;
  vertical-align: middle;
  background: #e8e8e8;
  border: 1px solid #ccc;
  white-space: normal;
  color: rgb(51, 51, 51);
  cursor: grab;
  user-select: none;
}

.tj-v-td-handle {
  color: transparent;   /* grip is a hover affordance in T+, not permanent */
}
.tj-v-grid tbody tr:hover .tj-v-td-handle { color: rgb(153, 153, 153); }
.tj-v-td-handle:active {
  cursor: grabbing;
}

/* row number column */
.tj-v-td-no,
.tj-v-th-no {
  text-align: center;
  color: var(--text-2, #666666);
  background: #fafafa;
}

/* summary / account cells */
.tj-v-td-summary,
.tj-v-td-account {
  padding: 0;
}

.tj-v-cell {
  width: 100%;
  /* token vch-ed-h = 24px (measured); was 22px */
  height: 24px;
  line-height: 24px;
  padding: 0 4px;
  font-size: 12px;
  font-family: inherit;
  color: var(--text-1, #333333);
  border: 0;
  /* token input-bc = rgb(0,0,0): T+ keeps a 0-width border with an explicit
     black colour; border:0 alone makes computed colour fall back to #333. */
  border-color: rgb(0, 0, 0);
  background: #fff;
  box-sizing: border-box;
  outline: none;
}

/* required cell: pale yellow rgb(255,247,202), no border, focus ring only */
.tj-v-cell.tj-v-cell-required {
  /* T+ keeps the cell white; the pale yellow is an active/focus cue only.
     Filling every required cell made the whole grid look yellow. */
  background: #fff;
}
.tj-v-cell.tj-v-cell-required:focus,
.tj-v-row.tj-v-row-active .tj-v-cell {
  background: var(--v-required-bg, rgb(255, 247, 202));
}

.tj-v-cell:focus {
  box-shadow: inset 0 0 0 1px var(--tj-blue, #2b7de1);
}

/* account cell wrapper holds the input and the magnifier button */
.tj-v-accwrap {
  display: flex;
  align-items: center;
  width: 100%;
}

.tj-v-accwrap .tj-v-cell {
  flex: 1 1 auto;
  min-width: 0;
}

.tj-v-pick {
  flex: 0 0 auto;
  width: 20px;
  height: 22px;
  line-height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  color: var(--text-2, #666666);
}

.tj-v-pick:hover {
  background: #eef4fd;
}

/* 13 amount digit cells
 * Measured: each td.f2 panel is 271px wide for 13 digits, so one digit cell is
 * about 20.85px. T+ declares width:16px + padding:2px with content-box, which
 * renders 20px (first column) to 21px (the rest, wider glyphs).
 * Height: declared 28px, renders 33px because of line-height + padding.
 * Do NOT hard-code 21px / 33px: that loses the padding semantics and makes the
 * first column too wide.
 */
.tj-v-td-digit {
  padding: 0;
  text-align: center;
  /* NOTE: forcing height:36px here pushed the row to 79px (the inner
     .tj-v-digit input adds its own height). Row height stays governed by
     tbody tr { height: 36px }; this cell just fills it. */
  height: auto;
  vertical-align: middle;
}

.tj-v-digit {
  width: 100%;
  height: 28px;
  line-height: 28px;
  padding: 2px;
  font-size: 16px;
  font-family: inherit;
  text-align: center;
  color: var(--text-1, rgb(51, 51, 51));
  border: 0;
  background: #fff;
  box-sizing: border-box;
  outline: none;
}

.tj-v-digit:focus {
  background: #eef4fd;
  box-shadow: inset 0 0 0 1px var(--tj-blue, #2b7de1);
}

/* Digit guide lines are defined above with the header cells.
   tokens-voucher: lineBlue rgba(165,217,246,.5), lineRed rgba(238,185,185,.4).
   Resolved 2026-11-06; no JS change needed (nth-child on the 26 header cells). */

/* total row */
.tj-v-total td {
  background: var(--grid-total-bg, rgb(245, 245, 245));
  font-size: 13px;
  font-weight: 700;
  color: var(--grid-total-fg, rgb(51, 51, 51));
  height: 26px;
}

.tj-v-td-total-label {
  text-align: left;
  padding-left: 6px;
}

.tj-v-td-total-digit {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
}

/* ---- add row ---- */
.tj-v-addrow {
  padding: 4px 0 0 2px;
}

.tj-v-addbtn {
  width: 22px;
  height: 22px;
  line-height: 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-2, #666666);
  background: #fff;
  border: 1px solid var(--border-strong, #d0d4da);
  border-radius: 2px;
  cursor: pointer;
  padding: 0;
}

.tj-v-addbtn:hover {
  color: var(--tj-blue, #2b7de1);
  border-color: var(--tj-blue, #2b7de1);
}

/* ---- balance hint ---- */
.tj-v-balance {
  margin-top: 4px;
  font-size: 12px;
  padding-left: 2px;
}

.tj-v-balance.tj-ok {
  color: #2e7d32;
}

.tj-v-balance.tj-bad {
  color: var(--tj-red, #e8483e);
}

/* ---- sign row ----
 * Measured: outer container font-size 12px, height 33px.
 * NOTE the signature bar is 12px while other areas are 14px in real T+.
 * Do not unify it to 14px.
 */
.tj-v-sign {
  display: flex;
  gap: 0;                        /* measured item x-gap is 220px = item width */
  align-items: center;
  height: 33px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--border, rgb(204, 204, 204));
  font-size: 12px;
  flex-wrap: wrap;
  box-sizing: content-box;
}

/* tokens-voucher vch-sign-item-w 220px, h 28px; adjacent x delta 220px. */
.tj-v-sign-item {
  display: inline-flex;
  align-items: center;
  gap: 0;      /* T+ places label and value flush: 100 + 113 = 213 */
  font-size: 13px;
  width: 220px;
  height: 28px;
  font-size: 12px;
  flex: 0 0 220px;
}

.tj-v-sign-label {
  width: 100px;
  text-align: right;              /* measured: text-align right */
  padding: 0 5px 0 10px;          /* measured: 0 5 0 10 */
  box-sizing: border-box;
  font-size: 13px;
  color: rgb(102, 102, 102);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 13px;
  flex: 0 0 100px;
}

.tj-v-sign-value {
  width: 113px;
  height: 21px;
  border-bottom: 1px solid var(--border-strong, rgb(204, 204, 204));
  padding: 0 4px 1px;
  color: var(--text-2, rgb(102, 102, 102));
  font-size: 12px;
  display: inline-block;
  box-sizing: border-box;
}