/* ============ RECEIPTS (Add / Edit Expense sheet) ============
   One full-width "Scan or attach receipt" button (corners match the Property toggle) at
   the top of the sheet, and small receipt chips just above Save. Hidden on income and
   until receipts are set up. Fields filled in by the AI scan get a soft plum outline
   until the user edits them. */

.rcpt-bar { display: block; margin: 0 0 12px; }
.rcpt-bar[hidden], .rcpt-list[hidden] { display: none; }

.rcpt-bar button { margin: 0; font-family: inherit; }
.rcpt-bar button:hover { filter: none; }

.rcpt-bar .rcpt-scan {
  display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
  padding: 10px 14px; border-radius: 10px;
  background: rgba(var(--plum-rgb), 0.07);
  border: 1px solid rgba(var(--plum-rgb), 0.26);
  color: var(--plum); font-size: 0.9em; font-weight: 600;
}
.rcpt-scan svg { width: 17px; height: 17px; color: var(--plum); flex-shrink: 0; }
.rcpt-scan:hover:not(:disabled) { background: rgba(var(--plum-rgb), 0.11); }
.rcpt-scan i { font-style: normal; font-size: 0.9em; margin-left: -1px; }
.rcpt-scan:active:not(:disabled) { transform: scale(0.985); }

.rcpt-note { font-size: 0.82em; color: var(--text-subtle); padding: 2px; }

#txForm .ai-filled {
  border-color: rgba(var(--plum-rgb), 0.45);
  box-shadow: 0 0 0 3px rgba(var(--plum-rgb), 0.08);
}

.rcpt-list { display: grid; gap: 8px; margin: 16px 0 2px; }

.rcpt-chip {
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 8px;
  border: 1px solid var(--hairline); border-radius: 14px;
  background: rgba(var(--overlay-rgb), 0.025);
}
.rcpt-chip button { margin: 0; width: auto; font-family: inherit; }
.rcpt-chip button:hover { filter: none; }

.rcpt-chip .rcpt-thumb {
  width: 44px; height: 44px; padding: 0; border-radius: 10px; overflow: hidden; flex-shrink: 0;
  background: var(--lavender-wash); display: grid; place-items: center;
}
.rcpt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rcpt-doc svg { width: 22px; height: 22px; color: var(--brand-plum); }

.rcpt-meta { min-width: 0; flex: 1; display: grid; gap: 1px; }
.rcpt-name { font-size: 0.86em; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcpt-size { font-size: 0.74em; color: var(--muted); }

.rcpt-acts { display: flex; gap: 2px; flex-shrink: 0; }
.rcpt-chip .rcpt-act {
  width: 34px; height: 34px; padding: 0; border-radius: 10px; display: grid; place-items: center;
  background: none; color: var(--text-subtle);
}
.rcpt-act svg { width: 17px; height: 17px; }
.rcpt-act:hover { background: rgba(var(--overlay-rgb), 0.05); color: var(--text); }
.rcpt-act.rcpt-del:hover { color: var(--red); }

.rcpt-busy { display: flex; align-items: center; gap: 8px; font-size: 0.82em; color: var(--muted); padding: 4px 2px; }
.rcpt-spin {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(var(--brand-teal-rgb), 0.25); border-top-color: var(--brand-teal-ink);
  animation: rcpt-spin 0.8s linear infinite;
}
@keyframes rcpt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rcpt-spin { animation-duration: 2.4s; } }

.rcpt-error { font-size: 0.82em; color: var(--red-light); padding: 2px; }

/* Transaction lists: a tiny grey paperclip next to the date when a receipt is attached */
.tx-clip { display: inline-flex; vertical-align: -2px; margin-left: 5px; color: var(--muted); opacity: 0.85; }
.tx-clip svg { width: 13px; height: 13px; }

@media (max-width: 360px) {
  .rcpt-chip .rcpt-act { width: 30px; }
  .rcpt-chip { gap: 9px; }
}