/* ============================================================
   TRANSACTIONS PAGE — full history view
   Loaded globally like every other page stylesheet (see
   index.html), so generic-sounding classes here are scoped
   under .page-transactions to avoid leaking into other pages
   that reuse names like .page-header / .page-title but have
   no matching CSS of their own yet.

   Icons throughout this file are intentionally monochrome
   (neutral bg-elevated chips, currentColor icons) — color is
   reserved for amount text and status badges only, per brand.
   ============================================================ */

.page-transactions { padding-bottom: var(--space-xl); }

/* ─── Header ────────────────────────────────────────────── */
.page-transactions .page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md) 0 var(--space-lg);
}
.page-transactions .page-header-text { display: flex; flex-direction: column; gap: 2px; }
.page-transactions .page-title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.page-transactions .page-subtitle {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.page-transactions .page-header-actions {
  display: flex;
  gap: var(--space-xs);
  flex-shrink: 0;
  padding-top: 2px;
}

/* ─── Overview card ─────────────────────────────────────── */
.tx-overview { margin-bottom: var(--space-md); }

.tx-overview__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.tx-month-nav { display: flex; align-items: center; gap: var(--space-sm); }
.tx-month-btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition-fast), opacity var(--transition-fast);
}
.tx-month-btn:hover:not(:disabled) { background: var(--bg-hover); }
.tx-month-btn:disabled { opacity: .3; cursor: default; }
.tx-month-label {
  min-width: 100px;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  color: var(--text-primary);
}

.tx-statement-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.tx-statement-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
.tx-statement-btn:disabled { opacity: .4; cursor: default; }

.tx-stats { display: flex; }
.tx-stat { position: relative; flex: 1; padding: 0 var(--space-sm); }
.tx-stat:first-child { padding-left: 0; }
.tx-stat:last-child { padding-right: 0; }
.tx-stat + .tx-stat::before {
  content: '';
  position: absolute;
  left: 0; top: 2px; bottom: 2px;
  width: 1px;
  background: var(--border-subtle);
}
.tx-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}
.tx-stat-label { margin-bottom: 4px; font-size: var(--text-xs); color: var(--text-secondary); }
.tx-stat-value {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.tx-stat-value--in { color: var(--profit); }
.tx-stat-value--net { font-size: var(--text-xl); }
.tx-stat-delta { margin-top: 5px; font-size: var(--text-xs); font-weight: var(--font-semi); }
.tx-stat-delta--up { color: var(--success); }
.tx-stat-delta--down { color: var(--danger); }
.tx-stat-delta--flat { color: var(--text-muted); }

.tx-search-wrap:not(:empty) { margin-bottom: var(--space-sm); }

/* ─── Filter pills ──────────────────────────────────────── */
.tx-pills {
  display: flex;
  gap: var(--space-xs);
  padding: 2px 2px var(--space-md);
  overflow-x: auto;
  scrollbar-width: none;
}
.tx-pills::-webkit-scrollbar { display: none; }
.tx-pill {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.tx-pill:hover { border-color: var(--border-active); }
.tx-pill--active,
.tx-pill--active:hover {
  background: var(--text-primary);
  color: var(--text-inverse);
  border-color: var(--text-primary);
}
.tx-pill .count { margin-left: 2px; font-weight: var(--font-medium); opacity: .65; }

/* ─── Day groups ────────────────────────────────────────── */
.tx-day-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-sm) 2px var(--space-xs);
}
.tx-day-header .d { font-size: var(--text-sm); font-weight: var(--font-semi); color: var(--text-primary); }
.tx-day-header .c { font-size: var(--text-xs); color: var(--text-muted); }

/* ─── Transaction row ───────────────────────────────────── */
.tx-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
  padding: var(--space-md);
  text-align: left;
  width: 100%;
}
.tx-row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
}
.tx-row-info { flex: 1 1 auto; min-width: 0; }
.tx-row-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--text-primary);
}
.tx-row-meta { margin-top: 2px; font-size: var(--text-xs); color: var(--text-secondary); }
.tx-row-meta--warn { color: var(--pending); }
.tx-row-meta--err { color: var(--danger); }

.tx-row-right { flex-shrink: 0; text-align: right; }
.tx-row-amount {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.tx-row-amount--in { color: var(--profit); }
.tx-row-amount--voided {
  opacity: .5;
  text-decoration: line-through;
  text-decoration-color: var(--border-active);
}
.tx-row-chevron { flex-shrink: 0; color: var(--text-muted); }

/* ─── Detail modal ──────────────────────────────────────── */
.tx-detail-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto var(--space-md);
  border-radius: var(--radius-full);
  background: var(--bg-hover);
  border: 1px solid var(--border-soft);
  color: var(--text-primary);
}
/* Some /assets/icons/*.svg files carry no width/height of their own
   (only a viewBox) — explicit sizing here keeps this class correct
   regardless of which icon system mounted into it. */
.tx-detail-icon svg { width: 20px; height: 20px; }
.tx-detail-amount {
  margin-bottom: 2px;
  text-align: center;
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}
.tx-detail-amount--in { color: var(--profit); }
.tx-detail-title { margin-bottom: var(--space-md); text-align: center; font-size: var(--text-sm); color: var(--text-secondary); }
.tx-detail-reason {
  margin-top: var(--space-xs);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: #f87171;
  font-size: var(--text-xs);
}

[data-theme="light"] .tx-detail-reason {
  color: #B91C1C;
}
.tx-detail-actions { display: flex; gap: var(--space-sm); margin-top: var(--space-md); }
.tx-detail-actions .btn { flex: 1; }

/* ─── Misc ──────────────────────────────────────────────── */
.tx-list-empty-wrap { margin-top: var(--space-sm); }