/* Mobile presentation only: leave the existing tablet/desktop tables intact. */
@media screen and (max-width: 767.98px) {
  /* Three-column costs stay comparable, with intact quantities and currency. */
  .mobile-finance-costs {
    table-layout: fixed;
    width: 100%;
  }

  .mobile-finance-costs thead th:first-child {
    width: 42%;
  }

  .mobile-finance-costs thead th:nth-child(2) {
    width: 18%;
    white-space: nowrap;
  }

  .mobile-finance-costs thead th:last-child {
    width: 40%;
  }

  .mobile-finance-costs th,
  .mobile-finance-costs td {
    padding-right: .15rem;
    padding-left: .15rem;
  }

  .mobile-finance-costs td:first-child {
    overflow-wrap: anywhere;
  }

  .mobile-finance-costs th:last-child,
  .mobile-finance-costs td:last-child {
    text-align: right;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }

  /* Wide records become labelled cards; retain every cell and native header. */
  .table-responsive.mobile-records {
    overflow: visible;
  }

  .mobile-record-table,
  .mobile-record-table tbody,
  .mobile-record-table tfoot {
    display: block;
    width: 100%;
    border: 0;
  }

  .mobile-record-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .mobile-record-table tbody tr,
  .mobile-record-table tfoot tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: .75rem;
    padding: .75rem;
    margin-bottom: .75rem;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
  }

  .mobile-record-table tbody td,
  .mobile-record-table tbody th,
  .mobile-record-table tfoot td,
  .mobile-record-table tfoot th {
    display: block;
    min-width: 0;
    padding: .25rem 0;
    border: 0;
    overflow-wrap: anywhere;
  }

  .mobile-record-table tr > :first-child,
  .mobile-record-table [colspan],
  .mobile-record-table [data-title="Status"],
  .mobile-record-table [data-title="State"],
  .mobile-record-table [data-title="Event / ticket"],
  .mobile-record-table [data-title="Invoice"],
  .mobile-record-table [data-title="Invoice access"] {
    grid-column: 1 / -1;
  }

  .mobile-record-table tr > :first-child {
    font-weight: 600;
  }

  .mobile-record-table tr > :first-child small {
    font-weight: normal;
  }

  .mobile-record-table [data-title]::before {
    content: attr(data-title);
    display: block;
    margin-bottom: .15rem;
    font-size: .8rem;
    font-weight: 600;
  }

  .mobile-record-table tr > :first-child::before {
    display: none;
  }

  /* Keep comparison columns together and their row label visible while swiping. */
  .mobile-comparison-table th,
  .mobile-comparison-table td:not(:first-child) {
    white-space: nowrap;
    overflow-wrap: normal;
  }

  .mobile-comparison-table tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 7rem;
    max-width: 9rem;
    white-space: normal;
    overflow-wrap: anywhere;
    background: #fff;
    box-shadow: 1px 0 #dee2e6;
  }
}

/* Invoice lists remain compact without changing other record tables. */
.invoice-card h4,
.invoice-card p {
  line-height: 1.35;
}

.invoice-table th,
.invoice-table td {
  padding: .2rem .35rem;
  vertical-align: top;
}

@media screen and (max-width: 767.98px) {
  .invoice-table tbody tr {
    padding: .5rem;
    margin-bottom: .5rem;
    column-gap: .5rem;
  }

  .invoice-table tbody th,
  .invoice-table tbody td {
    padding: .15rem 0;
  }

  .invoice-card .btn {
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
  }
}