/* PHASE M8 - Client Mobile Boxes and Tables Final Fix */
*{box-sizing:border-box}
html,body{max-width:100%!important;overflow-x:hidden!important}

@media(max-width:980px){
  body, main, .shell, .panel, .card, .stat, .rank-card, .field{
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  .panel,.card,.rank-card,.stat{
    overflow:hidden!important;
  }

  .table-wrap{
    overflow:visible!important;
    max-width:100%!important;
    width:100%!important;
    border:0!important;
  }

  table,
  table.client-card-table{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    table-layout:fixed!important;
    border-collapse:separate!important;
  }

  table thead,
  table.client-card-table thead{
    display:none!important;
  }

  table tbody,
  table.client-card-table tbody{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
  }

  table tr,
  table.client-card-table tr{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin:0 0 12px!important;
    padding:12px!important;
    border:1px solid rgba(101,213,255,.14)!important;
    border-radius:16px!important;
    background:rgba(255,255,255,.035)!important;
    overflow:hidden!important;
  }

  table th,
  table.client-card-table th{
    display:none!important;
  }

  table td,
  table.client-card-table td{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    border:0!important;
    padding:8px 0!important;
    display:grid!important;
    grid-template-columns:minmax(92px,38%) minmax(0,1fr)!important;
    gap:10px!important;
    align-items:start!important;
    text-align:right!important;
    white-space:normal!important;
    word-break:break-word!important;
    overflow-wrap:anywhere!important;
    overflow:hidden!important;
  }

  table td:before,
  table.client-card-table td:before{
    content:attr(data-label);
    display:block!important;
    font-weight:800!important;
    color:#a8c4e3!important;
    text-align:left!important;
    min-width:0!important;
    max-width:100%!important;
    white-space:normal!important;
    word-break:break-word!important;
    overflow-wrap:anywhere!important;
  }

  table td *,
  table.client-card-table td *{
    max-width:100%!important;
    min-width:0!important;
    white-space:normal!important;
    word-break:break-word!important;
    overflow-wrap:anywhere!important;
  }

  /* empty table fallback: do not show giant empty label boxes */
  table tbody:empty,
  table.client-card-table tbody:empty{
    display:block!important;
    min-height:54px!important;
    padding:14px!important;
    border:1px solid rgba(101,213,255,.14)!important;
    border-radius:16px!important;
    background:rgba(255,255,255,.035)!important;
  }
  table tbody:empty:before,
  table.client-card-table tbody:empty:before{
    content:'No records yet.';
    color:#a8c4e3;
    font-weight:700;
  }
}