/**
 * kd2070-mobile.css — phone layout for the data tables
 *
 * The roster tables are 8 columns / ~1220px wide. On a phone that means
 * pinching and sideways scrolling to read a single player's stats. Below
 * 700px each row becomes a self-contained card: the governor name acts as
 * the card heading and every stat sits on its own line with a label.
 *
 * Everything is inside a media query, so desktop rendering is untouched.
 * Labels come from the existing .td-* classes already on the cells, so no
 * markup changes are needed on any page.
 *
 * Applies to: members.html, acclaim.html, dkp.html
 */

@media (max-width: 700px) {

  /* The horizontal scroller is no longer needed once rows stack. */
  .table-scroll {
    overflow-x: visible;
    -webkit-overflow-scrolling: auto;
  }

  .table-scroll table,
  .table-scroll tbody,
  .table-scroll tr,
  .table-scroll td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  /* Hide the header row visually but keep it for screen readers. */
  .table-scroll thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* Each row becomes a card. */
  .table-scroll tr {
    border: 1px solid var(--border, rgba(201, 146, 42, 0.2));
    border-radius: 10px;
    background: var(--panel, #161b2a);
    margin: 0 0 10px;
    padding: 12px 14px;
  }

  .table-scroll tr:last-child { margin-bottom: 0; }

  /* Stat lines: label on the left, value on the right. */
  .table-scroll td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    border: 0;
    text-align: right;
    min-height: 34px;              /* comfortable tap/read height */
  }

  .table-scroll td + td {
    border-top: 1px solid rgba(201, 146, 42, 0.07);
  }

  .table-scroll td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--text-muted, #8a8278);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-align: left;
  }

  /* Labels derived from the classes already present on each cell. */
  .table-scroll td.td-rank::before    { content: 'Rank'; }
  .table-scroll td.td-power::before   { content: 'Power'; }
  .table-scroll td.td-kp::before      { content: 'Kill Points'; }
  .table-scroll td.td-t4::before      { content: 'T4 Kills'; }
  .table-scroll td.td-t5::before      { content: 'T5 Kills'; }
  .table-scroll td.td-dead::before    { content: 'Dead'; }
  .table-scroll td.td-healed::before  { content: 'Healed'; }
  .table-scroll td.td-acclaim::before { content: 'Acclaim'; }
  .table-scroll td.td-dkp::before     { content: 'DKP'; }
  .table-scroll td.td-balance::before { content: 'Balance'; }
  .table-scroll td.td-spent::before   { content: 'Spent'; }
  .table-scroll td.td-last::before    { content: 'Last Earned'; }
  .table-scroll td.td-kvks::before    { content: 'KvKs'; }

  /* Governor cell is the card heading: full width, no label, left aligned.
     members.html has no class on it (2nd column); acclaim.html uses
     .td-governor. Both are covered. */
  .table-scroll td.td-governor,
  .table-scroll tbody tr td:nth-child(2) {
    display: block;
    text-align: left;
    padding: 0 0 10px;
    margin-bottom: 4px;
    border-top: 0;
    border-bottom: 1px solid var(--border, rgba(201, 146, 42, 0.2));
  }

  .table-scroll td.td-governor::before,
  .table-scroll tbody tr td:nth-child(2)::before {
    content: none;
  }

  /* Rank reads as a small badge rather than a stat line. */
  .table-scroll td.td-rank {
    padding-top: 0;
    border-top: 0;
  }

  /* Keep avatars from dominating the card. */
  .table-scroll .gov-avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
  }

  /* Progress bars inside acclaim cells should span the card. */
  .table-scroll td .progress-mini {
    flex: 1 1 auto;
    min-width: 80px;
  }

  /* Loading / empty states span the whole card area. */
  .table-scroll td[colspan] {
    display: block;
    text-align: center;
  }
  .table-scroll td[colspan]::before { content: none; }
}