/* worthly.si — tables on phones: each row becomes a labelled card instead of a table that
   overflows the screen. Labels come from data-label, which app.js copies out of the <thead>,
   so no table markup has to change and any new table inherits it. */

@media(max-width:700px){
  .tablewrap{overflow:visible;border:0;background:none;box-shadow:none}
  .tablewrap table[data-cards],
  .tablewrap table[data-cards] tbody,
  .tablewrap table[data-cards] tr,
  .tablewrap table[data-cards] td{display:block;width:100%}
  .tablewrap table[data-cards] thead{display:none}
  .tablewrap table[data-cards] tbody tr{
    background:#fff;border:1px solid var(--line);border-radius:14px;
    padding:13px 15px;margin:0 0 10px;box-shadow:0 1px 2px rgba(16,32,80,.045);
  }
  .tablewrap table[data-cards] td{
    border:0;padding:7px 0;display:flex;align-items:baseline;justify-content:space-between;gap:14px;text-align:right;
  }
  .tablewrap table[data-cards] td:first-child{padding-top:0;font-size:16.5px;font-weight:600}
  .tablewrap table[data-cards] td:last-child{padding-bottom:0}
  .tablewrap table[data-cards] td+td{border-top:1px dashed #EDF1FA}
  .tablewrap table[data-cards] td::before{
    content:attr(data-label);flex:0 0 auto;text-align:left;color:var(--muted);
    font:600 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;
  }
  .tablewrap table[data-cards] td:first-child::before{display:none}
  .tablewrap table[data-cards] td:empty{display:none}
  /* action cell (Make offer on Atom / Enquire): full-width stacked buttons on phones */
  .tablewrap table[data-cards] td.rowact{display:block;padding-top:10px}
  .tablewrap table[data-cards] td.rowact::before{display:none}
  .tablewrap table[data-cards] td.rowact .btn{width:100%;justify-content:center}
  .tablewrap table[data-cards] td.rowact .btn+.btn{margin-top:8px}
  .tablewrap table[data-cards] .num{text-align:right}
  /* sortable headers are pointless once the header is gone */
  .tablewrap table[data-cards] th[data-sort]{pointer-events:none}
}