/* Payments: the activity list, its toolbar and the send flow's amount group.
   Loaded after ds/css/tokens.css and ds/css/app.css; only what fasset-ds
   does not already say lives here. */

/* Activity headers and rows share these definitions by class, so a label can
   never drift onto a different track from the fact it names. */
/* The prototype's five tracks (D33 P3): a status that is not final shows as
   a pill in the date slot, so there is no Status column. */
.activity-grid-full {
  grid-template-columns: minmax(190px, 1.35fr) minmax(0, 1.8fr) minmax(70px, 0.6fr) 84px 128px 130px;
}
.activity-grid-compact {
  grid-template-columns: minmax(190px, 1.6fr) 84px 128px 130px;
}
/* The Payments list with its checkbox column first. */
.activity-grid-full.activity-grid-pick {
  grid-template-columns: 28px minmax(190px, 1.35fr) minmax(0, 1.8fr) minmax(70px, 0.6fr) 84px 128px 130px;
}
@media (max-width: 900px) { #tx-table .cell-pick { display: none; } }
.tx-summary-line,
.tx-meta-line { display: contents; }
.tx-category { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-row-compact .tx-status { display: none; }
/* Accounts' compact row keeps the note, quietly, after the counterparty in
   the first track: "Brightline GmbH · October retainer". No note, no dot. */
.activity-row-compact .tx-summary-line { display: flex; align-items: center; min-width: 0; overflow: hidden; }
.activity-row-compact .cell-main { flex: 0 1 auto; min-width: 0; }
.activity-row-compact .desc {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-12);
}
.activity-row-compact .desc::before { content: "·"; margin-inline: var(--space-6); }
.activity-row-compact .desc:empty { display: none; }
/* A field with its unit inside it: the currency as a suffix in subtle text,
   one treatment for every amount on the site (an ISO code after, a symbol
   before). */
/* An amount and its currency picker as one control: a shared border, one focus ring, the picker in the affix slot at the amount's own type size. */
.input-group { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--input); transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.input-group:hover { border-color: var(--border-strong); }
/* Focus is fasset-ds's own for a field: the hairline goes to ink with a
   half-pixel ink ring, never a green outline. */
.input-group:focus-within { border-color: var(--text-strong); box-shadow: 0 0 0 0.5px var(--text-strong); }
.input-group:has(.input[aria-invalid="true"]) { border-color: var(--negative); }
.input-group .input { flex: 1; border: 0; outline: 0; box-shadow: none; background: transparent; min-width: 0; }
.input-group .group-select { flex: 0 0 auto; border: 0; border-inline-start: 1px solid var(--border); background-color: transparent; color: var(--text-subtle); font: inherit; padding-inline-start: var(--space-12); cursor: pointer; outline: 0; }
#tx-export { margin-inline-start: auto; }
.monogram-20 { width: 20px; height: 20px; }
.tile-value.tile-in { color: var(--accent-text); }
/* ————— table toolbar: search + filters ————— */
.tx-period { display: flex; align-items: center; gap: var(--space-12); margin: calc(var(--space-8) * -1) 0 var(--space-16); color: var(--text-subtle); font-size: var(--text-12); }
.tx-period[hidden] { display: none; }
@media (max-width: 900px) {
  /* The category is in the payment's panel; the narrow row has no room for another fact. */
  #tx-table .tx-category,
    #recent-tx .tx-category { display: none; }
  #tx-table .table-header [data-column="category"] { display: none; }
  #tx-table .table-header,
    #recent-tx .table-header {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
    }
  #tx-table .group-label,
    #recent-tx .group-label { padding-inline: var(--space-8); }
  #tx-table .row.activity-row,
    #recent-tx .row.activity-row {
      grid-template-columns: minmax(0, 1fr) auto !important;
      grid-template-areas:
        "summary amount"
        "meta meta";
      column-gap: var(--space-12);
      row-gap: var(--space-4);
      min-height: 64px;
      max-height: 88px;
      padding: var(--space-10) var(--space-12);
      margin-bottom: var(--space-8);
      overflow: hidden;
      background: var(--surface-2);
    }
  #tx-table .activity-row .tx-summary-line,
    #recent-tx .activity-row .tx-summary-line {
      grid-area: summary;
      display: flex;
      align-items: center;
      min-width: 0;
      overflow: hidden;
    }
  #tx-table .activity-row .tx-meta-line,
    #recent-tx .activity-row .tx-meta-line {
      grid-area: meta;
      display: flex;
      align-items: center;
      gap: var(--space-8);
      min-width: 0;
      overflow: hidden;
      color: var(--text-subtle);
      font-size: var(--text-12);
    }
  #tx-table .activity-row .cell-main,
    #recent-tx .activity-row .cell-main {
      flex: 0 1 auto;
      flex-wrap: nowrap;
      min-width: 0;
    }
  #tx-table .activity-row .desc,
    #recent-tx .activity-row .desc {
      display: block;
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  #tx-table .activity-row .desc::before,
    #recent-tx .activity-row .desc::before {
      content: "·";
      margin-inline: var(--space-6);
      color: var(--text-faint);
    }
  /* No note, no separator: "Amina Yusuf", never "Amina Yusuf ·". */
  #tx-table .activity-row .desc:empty,
    #recent-tx .activity-row .desc:empty { display: none; }
  #tx-table .activity-row .tx-date,
    #recent-tx .activity-row .tx-date { overflow: hidden; text-overflow: ellipsis; }
  #tx-table .activity-row .amount,
    #recent-tx .activity-row .amount {
      grid-area: amount;
      align-self: center;
      min-width: 0;
      max-width: 100%;
      text-align: right;
    }
}
@media (max-width: 640px) {
  /* The desktop rail cannot be compressed into a 320px canvas. At phone widths
     the document takes the viewport; Activity has already become a two-line
     summary, while the other financial records retain their readable stacks. */
  #tx-table .activity-row .tx-method-value { display: none; }
  /* Accounts' five rows keep their method on a phone, beside the status on
     the second line, so every row reads the same at every width. */
  #recent-tx .activity-row .tx-method-value:empty { display: none; }
  .tx-toolbar { align-items: stretch; }
  .tx-search { flex-basis: 100%; max-width: none; min-width: 0; }
}
/* A definition row whose figure carries the weight (a quote's total). */
.def-row.def-strong .def-value { color: var(--text-strong); font-weight: var(--w-medium); }
/* A cell never runs into the next: status and amount keep to their tracks. */
.activity-row .tx-date { min-width: 0; overflow: hidden; }
.activity-row .tx-date .status { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.activity-row .amount { min-width: 0; overflow-wrap: anywhere; }
/* ————— Activity log (js/screens/activity.js) ————— */
.act-when { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-foot { margin-top: var(--space-16); }
.ov-pop .act-export-range { margin: 0; padding: var(--space-16); display: grid; gap: var(--space-12); }
.act-export-title { margin: 0; font-weight: var(--w-medium); color: var(--text-strong); }
.act-export-dates { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.act-export-dates .field { margin: 0; }
.ov-pop .act-export-range > .hint { margin: 0; }
/* A receipt that could not be made says so right above its button. */
.panel-foot:has(.pay-receipt-status) { flex-wrap: wrap; }
.pay-receipt-status { flex: 1 0 100%; }
.pay-receipt-status:empty { display: none; }
/* The line in the Send review's footer (the approval prediction, or what has been
   sent without approval today) takes a row of its own above Back and Send, as the
   payroll footers' lines do, instead of sharing the row and wrapping into a column. */
#send-approval-note, #send-daily-allowance { flex: 1 1 100%; margin: 0; }