/* ============================================================
   Transactions — Honey design system (Phase 2).
   Token-driven; shared components live in components.css.
   ============================================================ */

/* Container that wraps the day-grouped cards (used on expenses/show too). */
.transactions {
  margin-top: 0.5rem;
}

/* Day group heading inside a list card. */
.day-header {
  color: var(--txt-subtle);
  padding: var(--space-4) var(--space-5) var(--space-1);
  font-size: var(--txt-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
/* Separator between day groups (every group after the first). */
.tx-day-divider {
  border-top: 1px solid var(--border);
}

/* Filter bar category selects. Custom chevron so the pill shape isn't
   cramped by the native dropdown arrow. */
.tx-filter-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 0.5rem 2.25rem 0.5rem 0.875rem;
  font-size: 0.875rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a7b63' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  color: var(--txt);
  cursor: pointer;
}
.tx-filter-select:focus {
  outline: none;
  border-color: var(--border-strong);
}
:root:is(.dark) .tx-filter-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a99a85' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* A single transaction row. */
.tx-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3-5) var(--space-5);
  transition: background-color 0.15s ease;
  border-bottom: 1px solid var(--border);
}
.tx-row:last-child {
  border-bottom: 0;
}
.tx-row:hover {
  background-color: var(--surface-2);
}

/* Title link. */
.tx-link {
  color: var(--txt);
}
.tx-link:hover {
  color: var(--accent-strong);
}

/* Row actions: circular icon buttons matching the inbox posting actions. */
.action-edit,
.action-delete {
  color: var(--txt-subtle);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.action-edit:hover {
  background-color: var(--surface-3);
  color: var(--accent-strong);
}
.action-delete:hover {
  background-color: var(--surface-3);
  color: var(--neg);
}

/* Overflow (kebab) menu — used in place of inline actions on small screens. */
.tx-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 30;
  margin-top: var(--space-1);
  width: 9rem;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding-block: var(--space-1);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
}
.tx-menu__item {
  color: var(--txt);
}
.tx-menu__item:hover {
  background: var(--surface-2);
}
.tx-menu__item--danger {
  color: var(--neg);
}

/* Tighter horizontal rhythm on small screens so rows never crowd. */
@media (max-width: 640px) {
  .tx-list .day-header,
  .tx-list .tx-row {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .tx-row {
    gap: 0.625rem;
  }
  .tx-row .icon-tile {
    height: 2.25rem;
    width: 2.25rem;
  }
}

/* ============================================================
   Layout classes (replace former Tailwind utility soup).
   Form fields reuse the shared .expense-field* vocabulary the
   transaction form already coupled to; page scaffold reuses
   .expense-page / .expense-panel.
   ============================================================ */

/* ---------- Month navigation ---------- */
.tx-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--space-4);
  row-gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.tx-nav__group {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
}
.tx-nav-btn {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--space-9);
  height: var(--space-9);
  border-radius: var(--radius-full);
}
.tx-nav-btn:focus { outline: none; }
.tx-nav-btn--present {
  width: auto;
  padding-inline: var(--space-4);
  font-size: var(--txt-sm);
  font-weight: var(--weight-bold);
}
.tx-nav__title {
  margin-left: var(--space-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--txt-2xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
}
@media (max-width: 48rem) {
  .tx-nav__title {
    margin-left: var(--space-1);
    font-size: var(--txt-xl);
  }
}
.tx-new-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5);
  width: auto;
  border-radius: var(--radius-full);
  padding: var(--space-2-5) var(--space-4);
  font-size: var(--txt-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.tx-new-btn:focus { outline: none; }
@media (max-width: 48rem) {
  .tx-new-btn { width: 100%; }
}

/* ---------- Balance row: the figure, and the All / Income / Expense control ---------- */
.tx-balance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.tx-balance__label {
  font-size: var(--txt-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tx-balance__amount {
  font-size: var(--txt-2xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
}
.tx-balance__note {
  font-size: var(--txt-sm);
}
@media (max-width: 48rem) {
  .tx-balance {
    flex-direction: column;
    align-items: flex-start;
  }
}
.tx-empty {
  border-radius: var(--radius-3xl);
  padding: var(--space-10) var(--space-2);
  font-size: var(--txt-lg);
  text-align: center;
  font-weight: var(--weight-bold);
}

/* ---------- Filter bar + segmented controls ---------- */
.tx-filter {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.tx-filter--idle { margin-bottom: 0; }
.tx-seg {
  display: inline-flex;
  gap: var(--space-1);
  border-radius: var(--radius-full);
  padding: var(--space-1);
}
.tx-seg--fit { width: fit-content; }
.tx-seg-btn {
  border-radius: var(--radius-full);
  font-size: var(--txt-xs);
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.tx-seg-btn:focus { outline: none; }
.tx-seg-btn:focus-visible {
  outline: 2px solid var(--txt);
  outline-offset: 2px;
}
.tx-seg-btn--kind { padding: var(--space-2) var(--space-4); }
/* The shared segment paints a solid amber pill and slides every property on
   hover and click. This filter stays flat: a tint when selected, a quiet
   surface on hover, and no animation. */
nav.tx-seg .tx-seg-btn--filter {
  padding: var(--space-1-5) var(--space-5);
  transition: none;
  box-shadow: none;
}
nav.tx-seg .tx-seg-btn--filter.seg-btn--active,
nav.tx-seg .tx-seg-btn--filter.seg-btn--active:hover,
nav.tx-seg .tx-seg-btn--filter.seg-btn--active:active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  box-shadow: none;
}
nav.tx-seg .tx-seg-btn--filter:not(.seg-btn--active):hover,
nav.tx-seg .tx-seg-btn--filter:not(.seg-btn--active):active {
  background: var(--surface);
  color: var(--txt);
  box-shadow: none;
}
.tx-filter__cascade {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
/* This rule is unlayered, so its `display` beats the `.hidden` utility (which
   lives in @layer utilities). Without this explicit override the server-toggled
   `hidden` class can't hide the non-active income/expense cascade, so every
   category filter shows at once. */
.tx-filter__cascade.hidden { display: none; }
.tx-kind-badge {
  display: inline-block;
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  font-size: var(--txt-xs);
  font-weight: var(--weight-bold);
}

/* ---------- Transaction list card ---------- */
.tx-list {
  border-radius: var(--radius-3xl);
  overflow: hidden;
}
.tx-row__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-xl);
}
.tx-row__body {
  min-width: 0;
  flex: 1;
}
.tx-row__title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--weight-bold);
}
.tx-row__meta {
  margin-top: var(--space-1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.tx-row__attach {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--txt-xs);
}
/* Reported amount above, amount paid below — right-aligned so the two read as
   one figure with an annotation rather than as two competing figures. */
.tx-row__amount {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.tx-amount { font-weight: var(--weight-black); }
.tx-row__original { font-size: var(--txt-xs); }
.tx-actions { font-size: var(--txt-sm); }
.tx-actions__menu {
  position: relative;
  display: inline-flex;
}
.tx-kebab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
}
.tx-menu__link {
  display: block;
  padding: var(--space-2) var(--space-4);
  font-size: var(--txt-sm);
}
.tx-menu__link--full {
  width: 100%;
  text-align: left;
}

/* ---------- Transaction show page ---------- */
.tx-show-actions {
  display: flex;
  gap: var(--space-2);
}
.tx-show-amount {
  font-size: var(--txt-3xl);
  font-weight: var(--weight-semibold);
}
/* Amount paid, captioning the reported figure above it. Tight to the amount and
   clear of what follows, so it groups with the figure it annotates rather than
   with the next block. */
.tx-show-original {
  margin-top: var(--space-1);
  margin-bottom: var(--space-2);
  font-size: var(--txt-sm);
}
/* Plain (non-bold) detail value on the show page. */
.expense-value-plain { font-size: var(--txt-base); }
.tx-link-medium { font-weight: var(--weight-medium); }
.tx-link-medium:hover { text-decoration: underline; }

/* ---------- Assign-transaction search results ---------- */
.tx-search-frame {
  display: block;
  margin-bottom: var(--space-4);
}
.tx-search {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}