@media (max-width: 768px) {
  .users-table { width: 100%; }
  .users-table thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .users-table tbody tr { display:block; width:100%; }
  .users-table tbody td,
  .users-table tbody th {
    display:block;
    width:100%;
    text-align:center;
    padding-top:max(8px,.6em);
    padding-bottom:max(8px,.6em);
  }
  .users-table tbody td.u-label,
  .users-table tbody th.u-label {
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    margin:-1px !important;
    padding:0 !important;
    overflow:hidden !important;
    clip:rect(0 0 0 0) !important;
    white-space:nowrap !important;
    border:0 !important;
  }
  .users-table tbody tr:nth-child(4n) { margin-bottom:.5rem; }
  .users-table .btn,
  .users-table button,
  .users-table a.button,
  .users-table a.btn {
    display:block;
    width:100%;
    text-align:center;
    box-sizing:border-box;
  }
}

/* --- v2: force full-width rows/values on mobile --- */
@media (max-width: 768px) {
  /* Ensure the whole users table takes the available space */
  .users-table { 
    width: 100% !important; 
    max-width: 100% !important; 
    display: block !important;
  }

  /* Break any leftover grid/flex that squeezes the first column */
  .users-table,
  .users-table * {
    box-sizing: border-box;
  }
  .users-table thead,
  .users-table tbody,
  .users-table tr {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Each cell becomes a single full-width row */
  .users-table td,
  .users-table th {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Neutralize any inline widths on descendants */
  .users-table [style*="width"] { width: 100% !important; }

  /* If a parent container is a grid with 2 columns, collapse to one */
  .users-table:where([style*="grid"], [class*="grid"], [class*="cols"], [class*="columns"]) {
    display: block !important;
  }

  /* Common wrappers turned into single column on mobile */
  .users-table .row,
  .users-table .grid,
  .users-table .columns,
  .users-table .col {
    display: block !important;
    width: 100% !important;
  }
}