/* GENERATED COPY — run CustomerFrontEnd/scripts/sync-shared-design.cjs
 * Source SHA-256: 28555931411820f1d66395a5c91a2bcb32cd39bd2af77f0abb19db4de6ab65ae
 */
/* Canonical data-table style: Customer loan transaction table.
 * Keep page-specific column sizing, sorting, pagination and mobile cards.
 * Sync with scripts/sync-shared-design.cjs after edits.
 */
@layer plexe-shared-design {
  /* Explicitly applied by the application templates, not just the audit fixture. */
  .plexe-design-system .pds-table {
    table-layout: fixed !important;
    margin: 18px 0 0 !important;
    max-height: none !important;
  }
  .plexe-design-system .pds-table:not(.d-none) {
    display: table !important;
  }
  @media (min-width: 576px) {
    .plexe-design-system .pds-table.d-sm-flex {
      display: table !important;
    }
  }
  @media (min-width: 768px) {
    .plexe-design-system .pds-table.d-md-flex {
      display: table !important;
    }
  }
  .plexe-design-system .pds-table thead {
    display: table-header-group !important;
  }
  .plexe-design-system .pds-table tbody {
    display: table-row-group !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .plexe-design-system .pds-table tr {
    display: table-row !important;
  }
  .plexe-design-system .pds-table :where(th, td) {
    display: table-cell !important;
    overflow-wrap: anywhere;
  }
  /* The table owns its border; wrappers must not add a second frame. */
  .plexe-design-system .pds-table-wrap {
    border: 0 solid transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    overflow: auto !important;
    width: 100%;
  }
  .plexe-design-system
    :where(
      .transaction-table,
      .documents-table,
      table.table,
      table.table-scroll,
      .cf-table,
      .site-shell table,
      .manager-shell table,
      .pds-table
    ) {
    width: 100% !important;
    background: var(--pds-surface) !important;
    color: var(--pds-body) !important;
    font: 400 16px/24px var(--pds-font) !important;
    border: 1px solid var(--pds-border) !important;
    border-radius: 16px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
  }
  .plexe-design-system
    :where(
      .transaction-table,
      .documents-table,
      table.table,
      table.table-scroll,
      .cf-table,
      .site-shell table,
      .manager-shell table,
      .pds-table
    )
    :where(thead, thead tr, tr.title) {
    background: transparent !important;
  }
  .plexe-design-system
    :where(
      .transaction-table,
      .documents-table,
      table.table,
      table.table-scroll,
      .cf-table,
      .site-shell table,
      .manager-shell table,
      .pds-table
    )
    thead
    tr {
    background: transparent !important;
  }
  .plexe-design-system
    :where(
      .transaction-table,
      .documents-table,
      table.table,
      table.table-scroll,
      .cf-table,
      .site-shell table,
      .manager-shell table,
      .pds-table
    )
    :where(th, td) {
    font-family: var(--pds-font) !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    background: transparent !important;
    border: 0 solid var(--pds-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    vertical-align: middle !important;
    text-align: start;
  }
  .plexe-design-system
    :where(
      .transaction-table,
      .documents-table,
      table.table,
      table.table-scroll,
      .cf-table,
      .site-shell table,
      .manager-shell table,
      .pds-table
    )
    th {
    background: var(--pds-soft) !important;
    color: var(--pds-muted) !important;
    font-size: 12px !important;
    line-height: 18px !important;
    text-transform: uppercase !important;
    padding: 14px 18px !important;
  }
  .plexe-design-system
    :where(
      .transaction-table,
      .documents-table,
      table.table,
      table.table-scroll,
      .cf-table,
      .site-shell table,
      .manager-shell table,
      .pds-table
    )
    td {
    background: var(--pds-surface) !important;
    font-size: 13px !important;
    line-height: 20px !important;
    text-transform: none !important;
    padding: 16px 18px !important;
    border-bottom: 1px solid var(--pds-border) !important;
  }
  .plexe-design-system
    :where(
      .transaction-table,
      .documents-table,
      table.table,
      table.table-scroll,
      .cf-table,
      .site-shell table,
      .manager-shell table,
      .pds-table
    )
    tbody
    td {
    background: var(--pds-surface) !important;
  }
  .plexe-design-system
    :where(
      .transaction-table,
      .documents-table,
      table.table,
      table.table-scroll,
      .cf-table,
      .site-shell table,
      .manager-shell table,
      .pds-table
    )
    tr:last-child
    td {
    border-bottom: 0 !important;
  }
  .plexe-design-system
    :where(
      .transaction-table,
      .documents-table,
      table.table,
      table.table-scroll,
      .cf-table,
      .site-shell table,
      .manager-shell table,
      .pds-table
    )
    thead
    tr:first-child
    > :first-child {
    border-start-start-radius: 15px !important;
  }
  .plexe-design-system
    :where(
      .transaction-table,
      .documents-table,
      table.table,
      table.table-scroll,
      .cf-table,
      .site-shell table,
      .manager-shell table,
      .pds-table
    )
    thead
    tr:first-child
    > :last-child {
    border-start-end-radius: 15px !important;
  }
  .plexe-design-system
    :where(
      .transaction-table,
      .documents-table,
      table.table,
      table.table-scroll,
      .cf-table,
      .site-shell table,
      .manager-shell table,
      .pds-table
    )
    tr.title:first-child
    > :first-child {
    border-start-start-radius: 15px !important;
  }
  .plexe-design-system
    :where(
      .transaction-table,
      .documents-table,
      table.table,
      table.table-scroll,
      .cf-table,
      .site-shell table,
      .manager-shell table,
      .pds-table
    )
    tr.title:first-child
    > :last-child {
    border-start-end-radius: 15px !important;
  }
  .plexe-design-system
    :where(
      .transaction-table,
      .documents-table,
      table.table,
      table.table-scroll,
      .cf-table,
      .site-shell table,
      .manager-shell table,
      .pds-table
    )
    tbody
    tr:last-child
    > :first-child {
    border-end-start-radius: 15px !important;
  }
  .plexe-design-system
    :where(
      .transaction-table,
      .documents-table,
      table.table,
      table.table-scroll,
      .cf-table,
      .site-shell table,
      .manager-shell table,
      .pds-table
    )
    tbody
    tr:last-child
    > :last-child {
    border-end-end-radius: 15px !important;
  }
  .plexe-design-system
    :where(
      .transaction-table,
      .documents-table,
      table.table,
      table.table-scroll,
      .cf-table,
      .site-shell table,
      .manager-shell table,
      .pds-table
    )
    tfoot
    tr:last-child
    > :first-child {
    border-end-start-radius: 15px !important;
  }
  .plexe-design-system
    :where(
      .transaction-table,
      .documents-table,
      table.table,
      table.table-scroll,
      .cf-table,
      .site-shell table,
      .manager-shell table,
      .pds-table
    )
    tfoot
    tr:last-child
    > :last-child {
    border-end-end-radius: 15px !important;
  }
  /* Public API names its general and documentation tables separately. */
  .plexe-design-system :where(.portal-table, .docs-table) {
    width: 100% !important;
    background: var(--pds-surface) !important;
    color: var(--pds-body) !important;
    font: 400 16px/24px var(--pds-font) !important;
    border: 1px solid var(--pds-border) !important;
    border-radius: 16px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
  }
  .plexe-design-system :where(.portal-table, .docs-table) :where(thead, thead tr) {
    background: transparent !important;
  }
  .plexe-design-system :where(.portal-table, .docs-table) :where(th, td) {
    border-radius: 0 !important;
  }
  .plexe-design-system :where(.portal-table, .docs-table) th {
    background: var(--pds-soft) !important;
  }
  .plexe-design-system :where(.portal-table, .docs-table) td {
    background: var(--pds-surface) !important;
  }
  .plexe-design-system :where(.portal-table, .docs-table) tr:last-child td {
    border-bottom: 0 !important;
  }
  .plexe-design-system :where(.portal-table, .docs-table) thead tr:first-child > :first-child {
    border-start-start-radius: 15px !important;
  }
  .plexe-design-system :where(.portal-table, .docs-table) thead tr:first-child > :last-child {
    border-start-end-radius: 15px !important;
  }
  .plexe-design-system :where(.portal-table, .docs-table) tbody tr:last-child > :first-child {
    border-end-start-radius: 15px !important;
  }
  .plexe-design-system :where(.portal-table, .docs-table) tbody tr:last-child > :last-child {
    border-end-end-radius: 15px !important;
  }
  .plexe-design-system
    :where(
      .transaction-table,
      .documents-table,
      table.table,
      table.table-scroll,
      .cf-table,
      .site-shell table,
      .manager-shell table,
      .pds-table
    )
    tr:not(.title):hover
    td {
    background: var(--pds-soft) !important;
  }
  .plexe-design-system
    :where(
      .transaction-table,
      .documents-table,
      table.table,
      table.table-scroll,
      .cf-table,
      .site-shell table,
      .manager-shell table,
      .pds-table
    )
    td:not(.approved-status, .waiting-status, .expires-status, .text-success, .text-danger, .text-warning) {
    color: var(--pds-ink) !important;
  }
  /* Unclassified text cells use logical start; numeric/action classes keep their alignment. */
  .plexe-design-system
    :where(
      .transaction-table,
      .documents-table,
      table.table,
      table.table-scroll,
      .cf-table,
      .site-shell table,
      .manager-shell table,
      .pds-table
    )
    td:not([class]) {
    text-align: start !important;
  }
  /* Help's data table stays a scrollable table at narrow widths. */
  .plexe-design-system :is(.site-shell, .manager-shell) .table-wrap {
    overflow-x: auto !important;
  }
  .plexe-design-system :is(.site-shell, .manager-shell) table {
    display: table !important;
  }
  .plexe-design-system :is(.site-shell, .manager-shell) table thead {
    display: table-header-group !important;
  }
  .plexe-design-system :is(.site-shell, .manager-shell) table tbody {
    display: table-row-group !important;
  }
  .plexe-design-system :is(.site-shell, .manager-shell) table tr {
    display: table-row !important;
    border: 0 solid transparent !important;
    padding: 0 !important;
  }
  .plexe-design-system :is(.site-shell, .manager-shell) table :where(th, td) {
    display: table-cell !important;
    width: auto !important;
  }
}