/* trantrongdung.css: Sổ Chuyến Đá (Trần Trọng Dũng). Only what kit v1.4 lacks, plus layout glue. Tokens only (var(--*)),
   no colour literal, no kit component restyled. Each rule names its gap in KIT_GAPS.md (G1, G2, ...). */

/* G1 Chuỗi tiền của một chuyến: Mỏ → Vận chuyển → Khách hàng, mỗi bên số tiền và phép tính, rồi LN.
   Nearest kit: .stat-strip (no direction, no per-party calculation). Lies flat on a drawer, stacks under 34rem. */
.ttd-chain { container-type: inline-size; display: grid; gap: var(--sp-3); }
.ttd-chain-list { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.ttd-chain-node { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; padding: var(--sp-3); background: var(--surface); border: 1px solid var(--panel-border); border-radius: var(--radius); }
.ttd-chain-node[data-missing] { background: var(--warn-bg); border: 1px dashed var(--warn); }
.ttd-chain-role { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); color: var(--muted); }
.ttd-chain-node[data-missing] .ttd-chain-role { color: var(--text); }
.ttd-chain-code { font-weight: 650; color: var(--heading); overflow-wrap: anywhere; }
.ttd-chain-sum { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ttd-chain-node[data-missing] .ttd-chain-sum { color: var(--warn); }
.ttd-chain-calc { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.ttd-chain-node[data-missing] .ttd-chain-calc { color: var(--text); }
.ttd-chain-arrow { display: flex; align-items: center; color: var(--muted); }
.ttd-chain-result { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); margin: 0; padding: var(--sp-2) var(--sp-3); background: var(--surface-2); border: 1px solid var(--panel-border); border-radius: var(--radius); }
.ttd-chain-result > strong { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; white-space: nowrap; }
@container (max-width: 34rem) {
  .ttd-chain-list { grid-template-columns: minmax(0, 1fr); }
  .ttd-chain-arrow { justify-content: center; }
  .ttd-chain-arrow .icon { transform: rotate(90deg); }
}

/* G2 Cột phụ của Sổ chuyến (Ghi chú, Xuất VAT, Tiền gửi) bật bằng một nút, như cột ẩn của file.
   Nearest kit: none (a table has no optional columns). */
table[data-extra-cols="off"] .ttd-x { display: none; }

/* G3 Hậu quả của một việc đảo ngược, từng dòng một (hủy chuyến, hủy khoản, mở khóa tháng).
   Nearest kit: .notice text or a plain list; a list with the figures aligned reads faster. */
.ttd-effects { display: grid; gap: var(--sp-1); margin: 0; padding: var(--sp-3); list-style: none; background: var(--surface-2); border: 1px solid var(--panel-border); border-radius: var(--radius); font-variant-numeric: tabular-nums; }

/* G4 Lãi tháng viết thành phép tính, mỗi dòng một dấu (+, −, =) ở cột riêng.
   Nearest kit: .tbl with a tfoot; the operator column is narrow and centred. */
.ttd-op { width: 2.5rem; text-align: center; font-weight: 650; color: var(--muted); }

/* G8 Hai panel cạnh nhau ở Sổ chi tiết (Tổng hợp theo loại hàng, Đã trả) kết thúc trên cùng một đường.
   Nearest kit: .page-cols-even (columns start together, each ends where its content ends). Each column holds one panel. */
.ttd-cols-fill { align-items: stretch; }
.ttd-cols-fill > .stack { align-content: stretch; }