/* Transactions list: sticky header with range + search, scrolling rows,
 * sticky footer holding the category filter drawer. */
@layer components {
  .transactions {
    display: flex;
    flex-direction: column;
    margin-inline: auto;
    max-inline-size: 30em;
    min-block-size: 100dvh;
  }

  .transactions__header {
    background-color: var(--color-canvas);
    border-block-end: var(--border);
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    inset-block-start: 0;
    padding-block: var(--block-space);
    padding-inline: var(--inline-space-double);
    position: sticky;
    z-index: var(--z-events-day-header);
  }

  .transactions__nav {
    align-items: center;
    display: flex;
    gap: var(--inline-space);
  }

  .transactions__summary {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }

  .transactions__total {
    color: var(--color-ink-medium);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    text-align: end;
  }

  .transactions__body {
    flex-grow: 1;
  }

  .transactions__footer {
    background-color: var(--color-canvas);
    border-block-start: var(--border);
    inset-block-end: 0;
    padding-block-end: var(--custom-safe-inset-bottom);
    position: sticky;
    z-index: var(--z-nav);
  }

  /* Range picker — same shape as the holdings period nav, but the checked
     radio inside each link is what marks the current range */
  .range-nav {
    --range-active-color: var(--color-accent);

    align-items: center;
    display: flex;
    gap: var(--inline-space);
    overflow-x: scroll;
    scrollbar-width: none;

    &::-webkit-scrollbar { display: none; }
  }

  .range-nav__item {
    color: var(--color-ink-medium);

    &:has(:checked) {
      color: var(--range-active-color);
    }
  }

  /* Row
  /* ------------------------------------------------------------------------ */

  .txn {
    border-block-end: var(--border);
    color: inherit;
    display: block;

    &:last-of-type {
      border-block-end: 0;
    }
  }

  .txn__row {
    align-items: center;
    border-inline-start: 4px solid var(--category-color, var(--color-ink-medium));
    display: flex;
    gap: var(--inline-space);
    padding-block: var(--block-space-half);
    padding-inline: var(--inline-space) var(--inline-space-double);
  }

  .txn__icon {
    flex-shrink: 0;
  }

  .txn__content {
    display: flex;
    flex-grow: 1;
    gap: var(--inline-space);
    justify-content: space-between;
    min-inline-size: 0;
  }

  .txn__details {
    min-inline-size: 0;
  }

  .txn__description {
    color: var(--color-ink-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .txn__meta {
    display: flex;
    gap: var(--inline-space-half);
    min-inline-size: 0;
  }

  .txn__date {
    color: var(--color-ink-medium);
    flex-shrink: 0;
    font-size: var(--text-x-small);
    white-space: nowrap;
  }

  /* dir=rtl truncates the account from the left, keeping the last digits */
  .txn__account {
    color: var(--color-ink-medium);
    font-size: var(--text-x-small);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .txn__amount {
    color: var(--color-ink-medium);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }

  /* Actions bar
  /* ------------------------------------------------------------------------ */

  /* The only piece not shared with the holdings list: a search field that
     sits inline in the header */
  .txn-actions__search {
    background: none;
    block-size: var(--icon-lg);
    border-radius: 0;
    border: 0;
    border-block-end: 1px solid var(--color-ink-light);
    box-sizing: border-box;
    color: var(--color-ink);
    flex-grow: 1;
    font-size: var(--text-small);
    min-inline-size: 0;
    padding: 0;
    text-overflow: ellipsis;

    &:focus-visible {
      border-block-end-color: var(--color-link);
      outline: none;
    }
  }

  /* Category filter rows carry a subtotal alongside the label. filter.css grows
     any <p> in a row, so the icon and subtotal opt back out. */
  .filter__row {
    .txn__icon,
    .filter__subtotal {
      flex-grow: 0;
    }
  }

  .filter__subtotal {
    font-size: var(--text-x-small);
    white-space: nowrap;
  }

  .filter__apply {
    background: none;
    border: 0;
    color: var(--color-link);
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-align: end;
  }

  /* The category list scrolls inside the drawer rather than growing it */
  .filter__scroller {
    display: flex;
    flex-direction: column;
    max-block-size: 38dvh;
    overflow-x: hidden;
    overflow-y: scroll;
    overscroll-behavior: contain;
  }

  /* A calendar with a trend badge tucked into its lower-left corner */
  /* Flex so the box hugs the glyph. Inline-level content rests on the text
     baseline, which left this wrapper 7px taller than the calendar inside it -
     and the badge anchors to inset-block-end, so it was hanging that 7px below
     the corner it is meant to sit in. Predates the icon conversion; an <svg>
     sat on the baseline exactly as a masked span does. */
  .txn-show__glyph {
    display: flex;
    inline-size: fit-content;
    position: relative;
  }

  .txn-show__glyph-base {
    --icon-size: var(--icon-xl);
  }

  /* A chip that holds a glyph, not a glyph that is also a chip: .icon paints
     itself with background-color and this needs that property for the disc it
     sits on, so they cannot be one element. */
  .txn-show__glyph-badge {
    align-items: center;
    background-color: var(--color-ink-lightest);
    block-size: var(--icon-sm);
    border-radius: 50%;
    display: flex;
    inline-size: var(--icon-sm);
    inset-block-end: 0;
    inset-inline-start: 0;
    justify-content: center;
    opacity: 0.9;
    padding: 0.25rem;
    position: absolute;

    .icon {
      --icon-size: 100%;
    }
  }

  /* Category picker (edit)
  /* ------------------------------------------------------------------------ */

  .txn-edit__summary {
    color: var(--color-ink-medium);
    font-size: var(--text-small);
  }

  /* Carries .search-field, so the glyph and the box come from there. This only
     places it. */
  .txn-edit__search {
    margin-block-start: var(--block-space-half);
  }

  .category-picker {
    border: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
  }

  /* The selected category is pulled to the top with `order` from the view */
  .category-picker__option {
    align-items: center;
    border-block-end: var(--border);
    display: flex;
    gap: var(--inline-space);
    padding: var(--block-space-half) var(--inline-space);

    p:last-of-type {
      color: var(--color-ink-medium);
      flex-grow: 1;
    }
  }
}