/*
 * "Pending actions" on the staff home screen (assets/platform/js/pending-actions.js).
 * A grid of rows, not a table: on a wide screen one line per item, on a phone each item
 * reflows to two lines with its Open button at the side, never a sideways scroll.
 */
.pa-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  height: 1.4em;
  padding: 0 .4em;
  margin-left: .4rem;
  border-radius: 999px;
  background: var(--err, #c0392b);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.pa-empty {
  margin: 0;
  padding: .75rem 0;
  font-size: 12.5px;
  color: var(--muted);
}

/*
 * One grid for the whole list, each row a subgrid of it: the columns are sized to
 * their content across every row (a chip, an amount, a badge, a date, a button) and
 * the reference takes what is left, whatever the page's base font size.
 */
.pa-list {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content max-content max-content max-content;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.pa-head,
.pa-item {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  gap: .5rem .9rem;
  align-items: center;
  padding: .55rem .85rem;
}

@supports not (grid-template-columns: subgrid) {
  .pa-head,
  .pa-item {
    grid-template-columns: max-content minmax(0, 1fr) max-content max-content max-content max-content;
  }
}

.pa-head {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .02em;
  background: var(--surface-2, rgba(0, 0, 0, .02));
  border-bottom: 1px solid var(--border);
}

.pa-item {
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}

.pa-item:last-child {
  border-bottom: 0;
}

.pa-item:hover {
  background: rgba(15, 61, 122, .04);
}

.pa-kind {
  display: inline-block;
  justify-self: start;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text2);
  background: rgba(15, 61, 122, .07);
}

.pa-kind--emi,
.pa-kind--loan,
.pa-kind--disburse,
.pa-kind--foreclosure { background: rgba(124, 58, 237, .1); color: #5b21b6; }

.pa-kind--deposit,
.pa-kind--withdrawal { background: rgba(5, 150, 105, .1); color: #047857; }

.pa-kind--membership,
.pa-kind--profile,
.pa-kind--closure { background: rgba(37, 99, 235, .1); color: #1d4ed8; }

.pa-kind--expense,
.pa-kind--change_request { background: rgba(245, 158, 11, .14); color: #92400e; }

.pa-ref {
  min-width: 0;
}

.pa-ref strong {
  display: block;
  overflow-wrap: anywhere;
}

.pa-sub {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

.pa-amount {
  font-weight: 600;
  white-space: nowrap;
}

.pa-since {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
}

.pa-open {
  justify-self: end;
}

@media (max-width: 899px) {
  .pa-list {
    display: block;
  }

  .pa-head {
    display: none;
  }

  .pa-item {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: .25rem .6rem;
    padding: .6rem .75rem;
  }

  .pa-item > .pa-kind { grid-column: 1 / 3; grid-row: 1; }
  .pa-item > .pa-ref { grid-column: 1 / 3; grid-row: 2; }
  .pa-item > .pa-amount { grid-column: 1; grid-row: 3; }
  .pa-item > .pa-status { grid-column: 2; grid-row: 3; }
  .pa-item > .pa-since { grid-column: 1 / 3; grid-row: 4; }
  .pa-item > .pa-open { grid-column: 3; grid-row: 1 / 5; align-self: center; }
}