/* History page: day headings, filter chips, purchase rows (also used
   by Income and Reimbursements), the reimbursement highlight and the
   "new since last time" flash. */

.txn-breakdown{font-size:12.5px; color:var(--muted); margin-top:2px;}

/* history list */
.day-heading{font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin:18px 0 6px; display:flex; justify-content:space-between;}
.day-total{font-weight:700; letter-spacing:0; text-transform:none; font-size:12.5px;}
/* one swipeable row of filter chips; scrolls sideways instead of wrapping */
.filter-row{
  display:flex; gap:7px; overflow-x:auto; margin:-4px -16px 10px; padding:2px 16px 4px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.filter-row::-webkit-scrollbar{display:none;}
.filter-chip{
  flex-shrink:0; display:inline-flex; align-items:center; padding:8px 13px; border-radius:999px;
  border:1px solid var(--line); background:var(--white); font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap;
}
.filter-chip.active{background:var(--ink); border-color:var(--ink); color:var(--white);}
.filter-chip.reimb.active{background:var(--gold); border-color:var(--gold);}
/* one soft flash on rows that are new or changed since History was last viewed */
.expense-row{position:relative; isolation:isolate;}
.expense-row.flash::before{
  content:""; position:absolute; inset:2px -8px; border-radius:10px; z-index:-1; pointer-events:none;
  background:#cfe6dc; opacity:0; animation:rowFlash 1.3s ease-out;
}
@keyframes rowFlash{0%{opacity:0;} 18%{opacity:1;} 100%{opacity:0;}}
@media (prefers-reduced-motion: reduce){ .expense-row.flash::before{animation-duration:.9s;} }
.filter-summary{font-size:13px; color:var(--muted); margin:0 2px 4px;}
.day-heading:first-child{margin-top:0;}
.expense-row{
  display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line);
}
.expense-row:last-child{border-bottom:none;}
.exp-thumb{width:40px; height:40px; border-radius:8px; object-fit:cover; background:var(--paper-2); flex-shrink:0;}
.exp-thumb.placeholder{
  display:flex; align-items:center; justify-content:center;
  /* a pale tint of the category colour, with the icon in a darker step of it */
  background:color-mix(in oklab, var(--cat, var(--pine-2)) 16%, white);
  color:color-mix(in oklab, var(--cat, var(--pine-2)) 72%, black);
}
.row-icon{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round;}
.exp-mid{flex:1; min-width:0;}
.exp-desc{font-size:15px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.exp-meta{font-size:12px; color:var(--muted); margin-top:1px;}
.reimb-tag{color:var(--gold); font-weight:700;}
/* Still waiting to be paid back: a warm wash with a gold edge, so these
   stand out while scrolling History. */
.expense-row.reimb-pending{
  background:#fbf1df; box-shadow:inset 3px 0 0 var(--gold);
  margin:2px -10px; padding-left:13px; padding-right:10px; border-radius:10px; border-bottom-color:transparent;
}
.reimb-tag.pending-pill{
  display:inline-block; background:var(--gold); color:var(--white); font-size:10.5px; letter-spacing:.02em;
  text-transform:uppercase; padding:1px 7px; border-radius:999px; margin-left:4px; vertical-align:1px;
}
.reimb-tag.received{color:var(--pine-2);}
.exp-amt{font-size:16px; font-weight:700; white-space:nowrap;}
.inc-amt{color:var(--pine-2);}
.show-more-btn{display:block; margin:12px auto 18px;}