/* Scoped to platform settlement lists; To B / To C and accounting tables are untouched. */
.ps-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  color: #10293d;
}
.ps-table > thead > tr > th:nth-child(1) {
  width: 16%;
}
.ps-table > thead > tr > th:nth-child(2),
.ps-table > thead > tr > th:nth-child(3) {
  width: 8%;
}
.ps-table > thead > tr > th:nth-child(4) {
  width: 12%;
}
.ps-table > thead > tr > th:nth-child(5) {
  width: 46%;
}
.ps-table > thead > tr > th:nth-child(6) {
  width: 10%;
}
.ps-table > :is(thead, tbody) > tr > :is(th, td) {
  padding: 14px 10px;
  vertical-align: middle;
  text-align: start;
  white-space: normal;
  overflow-wrap: anywhere;
  border-bottom: 1px solid #e5dfd5;
}
.ps-table > thead > tr > th {
  background: #f8f3eb;
}
.ps-table > tbody > tr:nth-child(even) {
  background: #fcf8f1;
}
.ps-row-lines > div {
  min-height: 76px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ps-row-lines > div + div {
  border-top: 1px solid #e5dfd5;
}
.ps-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 8px 0;
  margin: 0;
  list-style: none;
  font-size: 13px;
}
.ps-steps li {
  position: relative;
  text-align: center;
  min-width: 0;
  color: #7a8593;
}
.ps-steps li::after {
  content: '';
  position: absolute;
  top: 8px;
  inset-inline-start: 50%;
  width: 100%;
  height: 2px;
  background: #cbd0d6;
}
.ps-steps li:last-child::after {
  display: none;
}
.ps-steps li.is-connected::after {
  background: #16985b;
}
.ps-steps li i {
  position: relative;
  z-index: 1;
  display: block;
  width: 16px;
  height: 16px;
  margin: 0 auto 8px;
  border: 3px solid white;
  border-radius: 50%;
  box-sizing: content-box;
  background: #b3bbc5;
}
.ps-steps .is-reached {
  color: #11834c;
}
.ps-steps .is-reached i {
  background: #16985b;
}
.ps-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.ps-status {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ps-status > span {
  padding: 8px 12px;
  border-radius: 7px;
}
.ps-canceled > span {
  color: #596575;
  background: #e8eaee;
}
.ps-unverified > span,
.ps-pending-offset > span {
  color: #956016;
  background: #fff0c6;
}
.ps-next-settlement > span {
  color: #64748b;
  background: #f4f6f8;
  border: 1px solid #dfe5ec;
}
.ps-status small,
.ps-partial,
.ps-note {
  color: #71808c;
  font-size: 13px;
}
.ps-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 5px;
  font-size: 13px;
}
.ps-legend span:first-child {
  color: #11834c;
}
.ps-legend span:last-child {
  color: #7a8593;
}
.ps-note {
  margin-top: 5px;
}
#appView .ps-filters {
  display: grid;
  grid-template-columns: minmax(145px, 1.6fr) repeat(5, minmax(95px, 1fr)) auto;
  gap: 10px;
  align-items: end;
}
#appView .ps-filters label {
  display: grid;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
}
#appView .ps-filters :is(input, select) {
  width: 100%;
  min-width: 0;
  min-height: 44px;
}
#appView .ps-filters button {
  min-height: 44px;
}
.ps-source-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
@media (max-width: 1200px) {
  #appView .ps-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1100px) {
  #appView .ps-table,
  #appView .ps-table > tbody {
    display: block;
  }
  #appView .ps-table > thead {
    display: none;
  }
  #appView .ps-table > tbody > tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px 8px;
    gap: 8px;
    border-bottom: 1px solid #e5dfd5;
  }
  #appView .ps-table > tbody > tr > td {
    display: block;
    padding: 4px;
    border: 0;
    min-width: 0;
    text-align: start;
  }
  #appView .ps-table > tbody > tr > td::before {
    content: attr(data-label);
    display: block;
    color: #71808c;
    font-size: 12px;
    margin-bottom: 5px;
  }
  #appView .ps-table > tbody > tr > td[data-label='收款进度'],
  #appView .ps-table > tbody > tr > td:last-child {
    grid-column: 1 / -1;
  }
  #appView .ps-table > tbody > tr > td:first-child::before,
  #appView .ps-table > tbody > tr > td:last-child::before {
    display: none;
  }
  #appView .ps-table > tbody > tr > td:last-child {
    text-align: end;
  }
  #appView .ps-table > tbody > tr[data-af-expanded] {
    display: block;
  }
  #appView .ps-table > tbody > tr[data-cf-platform-expanded] {
    display: block;
  }
  #appView .ps-table > tbody > tr[data-cf-platform-expanded] > td {
    text-align: start;
  }
  .ps-row-lines > div {
    min-height: 60px;
  }
}
@media (max-width: 600px) {
  #appView .ps-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #appView .ps-filters label:first-child {
    grid-column: 1 / -1;
  }
  .ps-steps {
    font-size: 12px;
  }
  .ps-steps li > span:not(.ps-sr-only) {
    display: block;
    padding-inline: 3px;
  }
}

/* Keep the original mobile cards. Desktop columns use semantics, not a fifth-column guess. */
@media (max-width: 1100px) {
  #appView :is(.cf-settlement-table, .af-settlement-table).ps-table > tbody > tr > td {
    grid-column: auto;
  }
  #appView
    :is(.cf-settlement-table, .af-settlement-table).ps-table
    > tbody
    > tr
    > td[data-settlement-progress-cell],
  #appView :is(.cf-settlement-table, .af-settlement-table).ps-table > tbody > tr > td:last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1101px) {
  #appView [data-settlement-table-scroll] {
    max-inline-size: 100%;
    min-inline-size: 0;
    overflow-x: auto;
  }
  #appView :is(.cf-settlement-table, .af-settlement-table).ps-table {
    min-inline-size: 1120px;
  }
  #appView :is(.cf-settlement-table, .af-settlement-table).ps-table > thead > tr > th {
    width: auto;
  }
  #appView :is(.cf-settlement-table, .af-settlement-table).ps-table th:nth-child(1) {
    width: 15%;
  }
  #appView :is(.cf-settlement-table, .af-settlement-table).ps-table th:nth-child(2),
  #appView :is(.cf-settlement-table, .af-settlement-table).ps-table th:nth-child(3) {
    width: 8%;
  }
  #appView :is(.cf-settlement-table, .af-settlement-table).ps-table th:nth-child(4),
  #appView
    :is(.cf-settlement-table, .af-settlement-table).ps-table
    th[data-settlement-currency-cell] {
    width: 12%;
  }
  #appView
    :is(.cf-settlement-table, .af-settlement-table).ps-table
    th[data-settlement-progress-cell] {
    width: 44%;
  }
  #appView
    :is(.cf-settlement-table, .af-settlement-table).ps-table:has([data-settlement-currency-cell])
    th[data-settlement-progress-cell] {
    width: 32%;
  }
  #appView :is(.cf-settlement-table, .af-settlement-table).ps-table th:last-child {
    width: 13%;
  }
  #appView
    :is(.cf-settlement-table, .af-settlement-table).ps-table
    td[data-settlement-currency-cell] {
    white-space: nowrap;
  }
}