/*
 * responsive-table.css
 *
 * Turns any <table> into a stacked card list below 768px, without needing a
 * second JS-rendered markup path. Works alongside Bootstrap or plain CSS.
 *
 * Usage:
 *   1. <table class="table-mobile-cards"> (add to whatever classes it
 *      already has, e.g. Bootstrap's "table table-bordered").
 *   2. Every <td> in the table's rows needs data-label="Column Name" so its
 *      value has a visible label once the header row is hidden. Columns
 *      that are redundant on mobile (a "#" row-index column, for example)
 *      can skip the card layout entirely with Bootstrap's existing
 *      "d-none d-md-table-cell" utility classes instead of data-label.
 *   3. An actions/buttons column should get class="rt-actions" instead of
 *      data-label — its buttons right-align without a label prefix and get
 *      a divider from the rows above.
 *
 * Rows keep their JS-rendered <td> order; this file only changes how they
 * paint below the breakpoint, so no rendering JS needs to change per page.
 *
 * The label is an absolutely-positioned ::before, and each <td> stays a
 * normal block box (not flex/grid) for its actual content — deliberately,
 * so rich cell content (badges, <br>, links, multiple buttons) keeps its
 * normal wrapping behavior instead of being forced into unshrinkable flex
 * items that blow out the layout width.
 */

@media (max-width: 767.98px) {
  /* The page shell (sidebar.php's topbar/page-body) already provides its
     own spacing, so trim the extra container/card gutters on top of it —
     otherwise they stack up and leave little width for the card content. */
  .container,
  .container-fluid {
    padding-left: 10px;
    padding-right: 10px;
  }

  .card-body.table-responsive {
    padding: 8px;
  }

  table.table-mobile-cards {
    border: none;
    width: 100%;
  }

  table.table-mobile-cards thead {
    display: none;
  }

  table.table-mobile-cards,
  table.table-mobile-cards tbody,
  table.table-mobile-cards tr,
  table.table-mobile-cards td {
    display: block;
    width: 100%;
  }

  table.table-mobile-cards tr {
    background: #fff;
    border: 1px solid #e1e7e5;
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 4px 14px;
    box-shadow: 0 1px 2px rgba(16, 32, 29, 0.04), 0 8px 24px rgba(16, 32, 29, 0.06);
    overflow: hidden;
  }

  table.table-mobile-cards td {
    position: relative;
    box-sizing: border-box;
    padding: 10px 0 10px calc(38% + 10px);
    border: none;
    border-bottom: 1px solid #eef1f0;
    text-align: right;
    min-height: 20px;
    overflow-wrap: break-word;
  }

  table.table-mobile-cards td:last-child {
    border-bottom: none;
  }

  table.table-mobile-cards td[data-label]::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 10px;
    width: 38%;
    font-weight: 600;
    color: #7c8b88;
    text-align: left;
    white-space: normal;
  }

  /* A "Loading…" / "No records found" placeholder cell spans the whole row
     via colspan — treat it as plain centered text, not a label/value pair. */
  table.table-mobile-cards td[colspan] {
    padding-left: 0;
    text-align: center;
  }

  /* Actions column: right-aligned buttons, no label, separated with a
     top divider so it reads as the card's footer. */
  table.table-mobile-cards td.rt-actions {
    padding-left: 0;
    padding-top: 12px;
    margin-top: 4px;
    border-top: 1px solid #eef1f0;
    text-align: right;
  }

  table.table-mobile-cards td.rt-actions > * {
    margin-left: 6px;
  }
}