/* Unified activity row — shared by the wallet recent list and the full
   transaction history. Replaces the old, divergent .tx-row / .pending-invoice /
   .inv-hist-row (wallet.css) and .group .list .row (history.css) styles so a
   transaction and a recharge invoice read in the same visual language, with
   status carried by the icon tint, a trailing badge, and the amount treatment.
   All spacing is logical for RTL; loaded after the per-screen CSS and before
   polish.css. */

.activity-list {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 4px 16px;
  display: flex;
  flex-direction: column;
}

.activity-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
  min-height: 60px;
  width: 100%;
  text-align: start;
}
.activity-row:last-child { border-bottom: 0; }
/* The payable variant is a <button>; inherit type so it reads like the rows. */
.activity-row--payable {
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  background: transparent;
}

.ar-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.ar-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}
.ar-icon svg { width: 18px; height: 18px; }
/* Icon tint by tone. Background stays neutral; only the glyph colour changes.
   A normal outgoing purchase is 'neutral' (not red) so red stays reserved for
   genuine danger (failed / canceled). */
.ar-icon--success { color: var(--success); }
.ar-icon--neutral { color: var(--text-secondary); }
.ar-icon--warning { color: var(--warning); }
.ar-icon--danger  { color: var(--danger); }
.ar-icon--muted   { color: var(--text-muted); }

.ar-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ar-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: start;
}
.ar-sub {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: start;
}

.ar-trailing { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
/* direction:ltr keeps the +/− sign on the left of the digits under RTL too. */
.ar-amount { font-size: 13px; font-weight: 700; direction: ltr; white-space: nowrap; }
.ar-amount small { font-size: 10px; font-weight: 600; color: var(--text-secondary); margin-inline-start: 3px; }
.ar-amount--positive { color: var(--success); }
.ar-amount--neutral  { color: var(--text-primary); }
.ar-amount--warning  { color: var(--warning); font-weight: 800; }
.ar-amount--muted    { color: var(--text-muted); opacity: .7; }
.ar-amount--strike   { text-decoration: line-through; }

.ar-badge {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.ar-badge--success { background: rgba(34, 197, 94, .14); color: var(--success); }
.ar-badge--warning { background: rgba(245, 158, 11, .14); color: var(--warning); }
.ar-badge--danger  { background: rgba(239, 68, 68, .14); color: var(--danger); }
.ar-badge--muted   { background: rgba(113, 113, 122, .16); color: var(--text-muted); }
.ar-countdown { direction: ltr; }

.ar-chevron { flex-shrink: 0; color: var(--text-muted); display: flex; align-items: center; margin-inline-start: 2px; }
.ar-chevron svg { width: 16px; height: 16px; }
/* The 'back' glyph points inline-start (forward in RTL); flip it for LTR. */
[dir="ltr"] .ar-chevron svg { transform: scaleX(-1); }

/* Press feedback for the payable row (polish.css loads after, but this single
   class is specific enough and :active is not otherwise claimed for it). */
.activity-row--payable:active { transform: scale(.985); }

/* ---- Invoice detail sheet (opened by tapping any invoice row) ---- */
.inv-detail { display: flex; flex-direction: column; gap: 0; margin: 2px 0 4px; }
.inv-detail-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--border);
}
.inv-detail-row:last-child { border-bottom: 0; }
.inv-detail-row .k { font-size: 13px; color: var(--text-muted); flex-shrink: 0; }
.inv-detail-row .v {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  min-width: 0; text-align: end;
}
.inv-detail-row .v small { font-size: 11px; font-weight: 500; color: var(--text-secondary); }
.inv-detail-row .v .mono {
  font-family: monospace; font-weight: 500; font-size: 12px;
  word-break: break-all; color: var(--text-secondary);
}
.inv-detail-copy {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: var(--radius-lg);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--accent); display: inline-flex; align-items: center; justify-content: center;
}
.inv-detail-copy svg { width: 15px; height: 15px; }