/* WealthPilot | css/g2.css — page styles of G2 — Transactions (pages/transactions.js).
 * Only selectors with this group's own prefixes (spec 8.1); shared components live in core/styles.css. */

/* ─── TOOLBAR — phone: month + the month's two totals on line 1, search + add on line 2 (7.2) ─── */
.txn-sum{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:var(--fs-12);line-height:var(--lh-tight);color:var(--t3)}
.txn-found{font-size:var(--fs-12)}
.txn-toolbar .search-box{flex-basis:160px} /* month, search and add stay on one line down to 769 px */

/* ─── MONTH LISTS, REVIEW, BIN, CSV PREVIEW — on desktop the description takes the free width and ends in '…' ─── */
.txn-cat{display:inline-block;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.txn-clip{display:inline-flex;color:var(--t3)}
.who-dot{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--t3);color:var(--bg2);font-size:var(--fs-11);font-weight:700;line-height:1}
.who-dot.who-1{background:var(--acc)}
.who-dot.who-2{background:var(--pink)}
@media (min-width:769px){
  .tbl-txn td,.review-tbl td,.txn-bin td,.txn-preview td{white-space:nowrap}
  .tbl-txn .c-main,.review-tbl .c-main,.txn-bin .c-main,.txn-preview .c-main{width:100%;max-width:0}
  .tbl-txn .c-main>*,.review-tbl .c-main>*,.txn-bin .c-main>*,.txn-preview .c-main>*{overflow:hidden;text-overflow:ellipsis}
  .review-tbl .c-main{min-width:140px} /* narrow windows scroll the card sideways rather than hide the description */
  .review-tbl .inline-select{width:168px}
  .review-tbl .c-ctl+.c-ctl .inline-select{width:120px}
}

/* ─── EDIT / ADD MODAL ─── */
.seg{display:flex;gap:4px;padding:4px;margin-bottom:14px;border-radius:var(--rd-pill);background:var(--bg4)}
.type-toggle-btn{flex:1;height:32px;border-radius:var(--rd-pill);text-align:center;font-size:var(--fs-14);font-weight:600;color:var(--t2);transition:var(--tr)}
.type-toggle-btn:hover{color:var(--t1)}
.type-toggle-btn[aria-pressed="true"]{background:var(--bg2);box-shadow:var(--sh)}
.type-toggle-btn[data-type="expense"][aria-pressed="true"]{color:var(--neg-t)}
.type-toggle-btn[data-type="income"][aria-pressed="true"]{color:var(--pos-t)}
.txn-amount input{font-size:var(--fs-20);font-weight:700;text-align:right}
.txn-split{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--rd);background:var(--bg3);font-size:var(--fs-13);color:var(--t2)}
.txn-split-text{flex:1;min-width:0}
.txn-tools{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.hist-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:var(--fs-13);font-weight:600}
.hist-row{padding:8px 0;border-bottom:1px solid var(--bd2);font-size:var(--fs-13)}
.hist-row:last-child{border-bottom:0}
.hist-row .ic{color:var(--t3)}
.hist-when{font-size:var(--fs-11);color:var(--t3)}

/* ─── SPLIT MODAL — one grid row per line on desktop (labels above), one bordered box per line on phone ─── */
.split-sum{margin-bottom:12px;font-size:var(--fs-13)}
.split-head,.split-line{display:grid;grid-template-columns:minmax(0,1fr) 112px 128px 72px 36px;gap:8px;align-items:center}
.split-head{margin-bottom:6px;font-size:var(--fs-12);font-weight:600;color:var(--t2)}
.split-line{margin-bottom:8px}
.split-line .sl-tax{justify-content:center}
.split-total{display:flex;align-items:center;gap:6px;margin:12px 0;font-size:var(--fs-13);font-weight:700}

/* ─── REVIEW — a ticked row is tinted on the row itself; the confirm bar stays in view ─── */
.review-scope{margin-bottom:12px;font-size:var(--fs-13)}
.review-tbl tr:has(.review-chk:checked){background:var(--acc-bg)}
.review-busy{opacity:.5}
.review-saved{background:var(--pos-bg)}
.review-bar{position:sticky;bottom:16px;display:flex;align-items:center;gap:12px;padding:8px 16px;margin-bottom:var(--gap);background:var(--bg2);border:1px solid var(--bd);border-radius:var(--rd);box-shadow:var(--sh-pop)}
.row-leaving{opacity:0;transition:opacity .3s ease}

/* ─── CSV IMPORT ─── */
.txn-file-note{margin-bottom:12px;font-size:var(--fs-13)}
.txn-file{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-bottom:12px}
.txn-file-name{min-width:0;font-size:var(--fs-13);color:var(--t2);overflow-wrap:anywhere}
.txn-help{margin-top:4px;padding-left:18px}
.txn-preview-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:12px 16px;border-bottom:1px solid var(--bd2);font-size:var(--fs-13)}
.txn-preview-bar label{font-weight:600;color:var(--t2)}
.txn-preview-bar .inline-select{flex:0 1 280px;width:auto;min-width:0}
.txn-preview-rows{max-height:400px;overflow-y:auto}
.txn-preview-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--bd2)}

/* ─── PHONE (≤768px) ─── */
@media (max-width:768px){
  .txn-toolbar .spacer{display:none}
  .txn-toolbar .search-box{flex-basis:100px} /* search + 'พบ n รายการ' + add still share line 2 at 360 px */
  .txn-sum{flex:1 1 auto;min-width:0}
  .tbl-txn .c-amt .txn-clip{display:flex;justify-content:flex-end;margin-top:4px}
  .type-toggle-btn{height:44px}
  .split-line{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px;grid-template-areas:"cat cat del" "amt mem mem" "tax tax tax";padding:12px;border:1px solid var(--bd);border-radius:var(--rd)}
  .split-line .sl-cat{grid-area:cat}
  .split-line .sl-amt{grid-area:amt}
  .split-line .sl-mem{grid-area:mem}
  .split-line .sl-tax{grid-area:tax;justify-content:flex-start}
  .split-line .sl-del{grid-area:del}
  .review-bar{bottom:8px;padding:6px 12px}
  .review-bar .btn{flex:1}
  .txn-preview-rows{max-height:none;overflow:visible}
  .txn-preview-bar .inline-select{flex:1 1 200px}
  .txn-preview-foot .btn{flex:1}
  .txn-preview-foot .btn-primary{flex:2}
}