/* HQ-31: phiếu thu + gợi ý khớp + phân bổ + tiền dư (views/receipts.js). File riêng để nhánh song song không đụng app.css.
   Chỉ dùng biến màu của app.css (sáng / tối). */
.rc-s { font-size: 12px; }
.rc-intro { margin: -6px 0 12px; max-width: 980px; }
.rc-head-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.rc-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--surface-2); color: var(--muted); }
.rc-chip.s-unmatched { background: var(--warn-soft); color: var(--warn); }
.rc-chip.s-partial { background: var(--brand-soft); color: var(--brand-dark); }
.rc-chip.s-allocated { background: var(--ok-soft); color: var(--ok-text); }
.rc-chip.s-refunded { background: var(--accent-soft); color: var(--accent-text); }
.rc-chip.s-ignored { text-decoration: line-through; }
.rc-code { white-space: nowrap; font-weight: 600; }
.rc-n { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 2px; border-radius: 999px; background: var(--surface-2); color: var(--ink); font-size: 11px; }
.chip.on .rc-n { background: var(--surface); }
.rc-views .rc-search { margin-left: auto; min-width: 260px; }
.rc-content { overflow-wrap: anywhere; }
.rc-credit { color: var(--accent-text); font-weight: 600; }
.rc-over { color: var(--err); font-weight: 700; }
.rc-sum { margin: 8px 0 0; }
.rc-filter { margin-bottom: 8px; }

/* Chi tiết */
.rc-head { flex-wrap: wrap; gap: 8px; }
.rc-head h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.rc-amount { font-variant-numeric: tabular-nums; }
.rc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.rc-content-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin: 0 0 10px; box-shadow: var(--shadow); }
.rc-content-text { font-size: 16px; font-weight: 600; letter-spacing: .01em; overflow-wrap: anywhere; margin-top: 2px; }
.rc-bar { display: flex; height: 8px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; margin: 12px 0 4px; }
.rc-bar i { display: block; height: 100%; }
.rc-bar i.a { background: var(--ok); }
.rc-bar i.r { background: var(--accent); }
.rc-bar-text { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; font-variant-numeric: tabular-nums; margin-bottom: 10px; }
.rc-note { margin: 8px 0; padding: 10px 14px; }
.rc-sec { margin: 16px 0; }
.rc-sec-head { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; margin-bottom: 8px; }
.rc-sec-head h2 { font-size: 17px; margin: 0; }
.rc-empty { background: var(--surface-2); border-radius: 10px; padding: 10px 14px; font-size: 13px; color: var(--muted); }
.rc-raw { white-space: pre-wrap; background: var(--surface-2); border-radius: 10px; padding: 12px; font-size: 13px; overflow-wrap: anywhere; }

/* Thẻ gợi ý */
.rc-sugs { display: grid; gap: 8px; }
.rc-sug { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; box-shadow: var(--shadow); }
.rc-score { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 15px;
  background: var(--surface-2); color: var(--muted); font-variant-numeric: tabular-nums; }
.rc-score.hi { background: var(--ok-soft); color: var(--ok-text); }
.rc-score.mid { background: var(--warn-soft); color: var(--warn); }
.rc-sug-body { min-width: 0; }
.rc-sug-title { overflow-wrap: anywhere; }
.rc-reason { font-size: 13px; color: var(--ink); margin-top: 2px; overflow-wrap: anywhere; }
.rc-sug-act { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-variant-numeric: tabular-nums; }

/* Ô phân bổ */
.rc-editor { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 10px 0; background: var(--surface-2); }
.rc-editor-head { display: flex; gap: 4px 10px; flex-wrap: wrap; align-items: baseline; margin-bottom: 4px; }
.rc-row { display: grid; gap: 6px 8px; align-items: start; padding: 8px 0; border-bottom: 1px dashed var(--line);
  grid-template-columns: minmax(170px, 1.3fr) minmax(170px, 1.6fr) minmax(160px, 1.5fr) minmax(100px, .8fr) 120px minmax(100px, 1fr) 30px; }
.rc-row .field label { display: block; margin-bottom: 2px; }
.rc-row .rc-f > span { padding-bottom: 2px; }
.rc-row .rc-del { margin-top: 18px; }
.rc-row .field { margin: 0; min-width: 0; }
.rc-row .field label { font-size: 11px; color: var(--muted); }
.rc-f { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rc-f > span { font-size: 11px; color: var(--muted); }
.rc-f input, .rc-f select, .rc-row .field input { width: 100%; min-width: 0; }
.rc-del { font-size: 18px; }
.rc-editor-foot { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-top: 10px; }
.rc-live { font-variant-numeric: tabular-nums; font-size: 13px; }
.rc-editor-foot [data-save] { margin-left: auto; }

/* Dán tin */
.modal.rc-wide { max-width: 1000px; }
.modal-bg:has(.rc-wide) { align-items: flex-start; overflow-y: auto; }
.rc-preview { margin-top: 12px; }
.rc-prev td { vertical-align: top; }
.rc-prev tr.rc-off td { opacity: .6; }
.rc-notes { min-width: 180px; }
.rc-auto { display: inline-block; font-size: 12px; color: var(--ok-text); background: var(--ok-soft); border-radius: 8px; padding: 1px 6px; }

/* Dự án / Khách hàng 360 */
.rc-bar-line { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.rc-credit-box { display: flex; flex-direction: column; gap: 4px; background: var(--accent-soft); color: var(--ink); border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; }
.rc-credit-box > strong { color: var(--accent-text); }
.rc-credit-row { font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.rc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.rc-list li { overflow-wrap: anywhere; }
.rc-li-amt { float: right; font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) {
  .rc-row { grid-template-columns: repeat(2, minmax(0, 1fr)) 30px; }
  .rc-row .picker, .rc-row .rc-f { grid-column: span 1; }
  .rc-row .rc-del { grid-column: 3; grid-row: 1; }
}
@media (max-width: 760px) {
  .rc-views .rc-search { margin-left: 0; min-width: 0; width: 100%; }
  .rc-actions { margin-left: 0; }
  .rc-head { flex-direction: column; align-items: flex-start; }
  .rc-sug { grid-template-columns: 44px minmax(0, 1fr); }
  .rc-sug-act { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .rc-row { grid-template-columns: minmax(0, 1fr) 30px; }
  .rc-row > *:not(.rc-del) { grid-column: 1; }
  .rc-row .rc-del { grid-column: 2; grid-row: 1; }
  .rc-editor-foot [data-save] { margin-left: 0; width: 100%; }
  .rc-content-text { font-size: 15px; }
  .rc-li-amt { float: none; }
}

/* Khách hàng 360: ô "Tiền dư của khách" (chỉ hiện khi > 0) — dải tiền thành 7 ô ở màn rộng; màn hẹp giữ lưới của portfolio.css */
.c360-m.credit { box-shadow: inset 0 3px 0 var(--accent), var(--shadow); }
.c360-m.credit .c360-m-value { color: var(--accent-text); }
@media (min-width: 1361px) { .c360-money:has(.c360-m.credit) { grid-template-columns: repeat(7, minmax(0, 1fr)); } }