/* ============================================================
   Transactions: search, bulk-edit bar and the transaction form.
   ============================================================ */

.tx-search{position:relative}
.tx-search-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:var(--fs-base);opacity:.55;pointer-events:none}
.tx-search .input{width:100%;padding-left:36px;height:40px}

/* ===== Transaction modal =====
   One vertical rhythm for the whole form: the amount leads, the fields most
   entries never touch live behind "more details". */
.tx-form{display:flex;flex-direction:column;gap:16px}
.tx-form .grid-2{gap:14px}

/* Amount hero — direction and figure, the two decisions that define an entry */
.tx-amount-box{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:14px 16px;
  display:flex;flex-direction:column;gap:12px;
}
.tx-amount-in{display:flex;align-items:center;gap:10px}
.tx-amount-sign{font-size:var(--fs-xl);font-weight:600;line-height:1;width:16px;text-align:center;flex-shrink:0}
input.tx-amount-field{
  flex:1;min-width:0;
  height:auto;padding:2px 0;
  border:none;background:none;box-shadow:none;border-radius:0;
  font-size:var(--fs-xl);font-weight:600;letter-spacing:-.02em;
  color:var(--ink);
}
input.tx-amount-field:focus{border:none;box-shadow:none}
input.tx-amount-field::placeholder{color:var(--ink-faint)}
input.tx-amount-field::-webkit-outer-spin-button,
input.tx-amount-field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input.tx-amount-field[type=number]{-moz-appearance:textfield}
.tx-cur{width:auto;min-width:76px;flex-shrink:0}

/* Income/expense direction toggle: tinted, not shouted */
.bar-segs.tx-dir{width:100%}
.bar-segs.tx-dir button{flex:1}
.bar-segs.tx-dir button[data-dir="income"].on{background:var(--good-bg);color:var(--good);box-shadow:inset 0 0 0 1px var(--good)}
.bar-segs.tx-dir button[data-dir="expense"].on{background:var(--bad-bg);color:var(--bad);box-shadow:inset 0 0 0 1px var(--bad)}

/* Option row: a switch with a title and its explanation, plus room for the
   controls it reveals (the split editor) inside the same container. */
.opt-box{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);transition:border-color .15s}
.opt-box.on{border-color:var(--brand-border)}
.opt-row{display:flex;align-items:center;gap:12px;padding:11px 14px;cursor:pointer;border-radius:var(--radius-md)}
.opt-row:hover{background:var(--surface-hover)}
.opt-row:has(+ .opt-extra:not([hidden])){border-radius:var(--radius-md) var(--radius-md) 0 0}
.opt-row:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.opt-ic{font-size:var(--fs-md);line-height:1;flex-shrink:0}
.opt-main{flex:1;min-width:0}
.opt-title{font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.opt-sub{font-size:var(--fs-xs);color:var(--ink-mute);line-height:1.45;margin-top:2px}
.opt-extra{
  padding:12px 14px 14px;
  border-top:1px solid var(--line-soft);
  background:var(--surface-2);
  border-radius:0 0 var(--radius-md) var(--radius-md);
}

/* Split editor: the outcome (who pays what) shown as two readable figures */
.split-prev{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.sp-cell{
  display:flex;flex-direction:column;gap:1px;min-width:0;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:7px 10px;
}
.sp-who{font-size:var(--fs-xs);font-weight:600;color:var(--ink-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-amt{font-size:var(--fs-base);font-weight:650;color:var(--ink)}
.split-pct{display:flex;align-items:center;gap:8px;margin-top:8px}
.split-pct .input{width:88px}
.split-pct-suffix{font-size:var(--fs-sm);color:var(--ink-soft)}
.split-sum{font-size:var(--fs-sm);margin-top:8px}

/* Progressive disclosure for the rarely-used fields */
.tx-more{border-top:1px solid var(--line);padding-top:6px}
.tx-more-btn{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:7px 2px;font-size:var(--fs-sm);font-weight:600;color:var(--ink-soft);
}
.tx-more-btn:hover{color:var(--ink)}
.tx-more-btn .chev{font-size:var(--fs-xs);color:var(--ink-faint);transition:transform .15s}
.tx-more.open .tx-more-btn .chev{transform:rotate(90deg)}
/* the hint previews what's inside — pointless once you can see it */
.tx-more-hint{margin-left:auto;font-size:var(--fs-xs);font-weight:500;color:var(--ink-faint)}
.tx-more.open .tx-more-hint{display:none}
.tx-more-body{display:none;flex-direction:column;gap:14px;padding:8px 0 2px}
.tx-more.open .tx-more-body{display:flex}

/* Transactions: bulk-edit bar floats at the bottom of the screen, only while
   rows are selected (markup sits after the table, so it never shifts rows) */
.bulk-bar{
  position:sticky;bottom:16px;z-index:15;margin-top:12px;
  padding:10px 18px;background:var(--surface);
  border:1px solid var(--brand-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
}
/* "Paid by" cell: payer chip + shared / reimbursable chips */
.tx-who{display:flex;flex-wrap:wrap;gap:4px;align-items:center}