/* The selectable fee list on a phone - see Views/Shared/_FeeSelection.cshtml
   and wwwroot/js/fee-selection.js.
 *
 * WHY THIS IS NOT app-grid.css's job. The fee list is deliberately not an
 * <app-grid> (every row is an input in one form, and the totals, the allowed
 * methods and the Pay button are fee-selection.js's), so it cannot inherit the
 * .app-grid-cards rules. The layout below is deliberately the SAME SHAPE as
 * those, because the two should read as one system on a phone: the header is
 * clipped rather than hidden, each row becomes a bordered card, and each cell
 * carries its own heading from a data-label. If you change one, look at the
 * other.
 *
 * WHAT IT REPLACED, because "it scrolls sideways" sounds survivable and was
 * not: at 375px the fee table was 376px of content in a 295px box. The 81px
 * behind the swipe were Status and Paperwork - whether you still owe the fee,
 * and whether a purchase order is already on file for it. The two facts a
 * coach opens this screen to find were the two you could not see, and with
 * three tables on the page there were three separate scroll regions that did
 * not move together. */

@media (max-width: 767.98px) {

  /* Clipped, not display:none - a display:none header leaves the accessibility
     tree, and the cells below still reference it. Same treatment as
     .app-grid-cards thead. */
  .fee-cards thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .fee-cards,
  .fee-cards tbody,
  .fee-cards td {
    display: block;
    width: auto;
  }

  /* THE ROW IS A FLEX CONTAINER rather than a stack of blocks, so the tick and
     the fee name can sit together on the card's first line while everything
     else takes a full line of its own. A checkbox on a line by itself, above
     the thing it selects, reads as a fourth field rather than as the control
     that picks this fee. */
  .fee-cards tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    padding: 0.75rem 0.875rem;
    margin-bottom: 0.625rem;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-body-bg);
  }

  .fee-cards td {
    padding: 0.1875rem 0;
    border: 0;
    /* Alignment is a column idea. Down a card, everything reads left. */
    text-align: left !important;
  }

  /* Line one: the tick, then the fee name as the card's title.
     A FIXED BASIS, not auto, and it is what lines the titles up. An unpayable
     fee (paid, cancelled, locked into a batch) renders no checkbox, so an
     auto-width cell collapses and that card's title starts ~26px left of every
     payable one - a ragged column of headings down the page. Border-box, so
     the basis covers the padding and the cell is the same 26px whether it
     holds a checkbox or nothing. */
  .fee-cards td[data-fee-cell="select"] {
    flex: 0 0 1.625rem;
    padding-right: 0.625rem;
  }

  .fee-cards td[data-fee-cell="name"] {
    flex: 1 1 auto;
    font-weight: 600;
    /* The desktop table indents this under the team header; down a card there
       is nothing to indent away from. */
    padding-left: 0 !important;
  }

  /* Every labelled cell takes its own full line: heading left, value right. */
  .fee-cards td[data-label] {
    flex: 1 0 100%;
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    justify-content: space-between;
  }

  .fee-cards td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 40%;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
  }

  /* The paperwork cell - the PO line and the Invoice/Quote buttons - spans the
     card under a rule, so the buttons read as the end of the card rather than
     as another field. Matches .app-grid-cards td:not([data-label]). */
  .fee-cards td[data-fee-cell="docs"] {
    flex: 1 0 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
    padding-top: 0.625rem;
    border-top: var(--bs-border-width) solid var(--bs-border-color);
  }

  /* A fee with no PO and no documents would otherwise render as a lone
     horizontal rule at the bottom of the card. */
  .fee-cards td[data-fee-cell="docs"]:empty {
    display: none;
  }

  /* THE TEAM HEADER stays a header and does not become a card: it is the thing
     the cards below belong to. Full width, no border, and the payment-type
     control drops onto its own line - inline with ms-3 the <select> is the
     widest thing in the row and went off the right edge. */
  .fee-cards tr.fee-team-row {
    display: block;
    padding: 0.5rem 0.25rem 0.25rem;
    margin-bottom: 0.375rem;
    border: 0;
    border-radius: 0;
    background-color: transparent;
  }

  .fee-cards tr.fee-team-row td:empty {
    display: none;
  }

  .fee-cards .fee-team-paytype {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.375rem;
  }

  /* The label's desktop spacing, undone: it is no longer trailing the team
     name on one line. */
  .fee-cards .fee-team-paytype > .ms-3 {
    margin-left: 0 !important;
  }

  .fee-cards .fee-team-paytype select {
    margin-left: 0 !important;
    /* Fills the line rather than sitting at its content width, which on the
       longest option ("Purchase Order") was near enough the full width anyway
       and on the shortest looked like a mistake. */
    flex: 1 1 auto;
    width: auto !important;
  }

  /* The pay bar wraps to three lines on a phone; without this its own padding
     makes it taller than it needs to be under the cards. */
  .fee-cards + .card .card-body,
  [data-fee-selection] .sticky-bottom .card-body {
    row-gap: 0.625rem;
  }
}