/* v615 - LIST: ONE responsive-size rule for every cell (unit, rate, view, beds, offer, size, building, status pill, headers).
   Phone (<700px)      = smaller
   iPad  (700-1024px)  = medium
   Desktop (>1024px)   = natural size (same as before)
   All sizes come from the variables below; change a number here and every cell follows.
   Fluid inside each tier (clamp + vw), so there are no sudden jumps between devices.
   Column widths, status pill, discs, badges and row padding scale together with the text.
   Loaded LAST (after 289 + 294). Roll back: remove this file's <link> tag. */

/* ---------- 1) size variables per device ---------- */
table.avl-table{
  /* phone */
  --l-val:clamp(11.5px,3.3vw,13px);   /* unit no. + rate (main values) */
  --l-mid:clamp(10.5px,2.9vw,11.5px); /* view */
  --l-sub:clamp(9.5px,2.65vw,10.5px); /* beds, offer, size */
  --l-tiny:clamp(8px,2.2vw,9px);      /* building name, FF/SF/UF tag, balcony */
  --l-head:clamp(9px,2.5vw,10px);     /* column headers */
  --l-st:clamp(8px,2.2vw,8.8px);      /* status pill text */
  --l-gap:5px;
  --l-padv:6px;
}
@media (min-width:700px) and (max-width:1024px){
  table.avl-table{ /* iPad - medium, compact rows */
    --l-val:clamp(12.5px,1.6vw,14px);
    --l-mid:clamp(11px,1.4vw,12.5px);
    --l-sub:clamp(10.5px,1.3vw,11.5px);
    --l-tiny:clamp(9px,1.15vw,10px);
    --l-head:clamp(10px,1.3vw,11px);
    --l-st:clamp(9.5px,1.25vw,10.5px);
    --l-gap:10px;
    --l-padv:5px;
  }
}
@media (min-width:1025px){
  table.avl-table{ /* desktop - natural size */
    --l-val:clamp(10px,.82vw,12px);
    --l-mid:clamp(10px,.82vw,12px);
    --l-sub:clamp(10px,.82vw,12px);
    --l-tiny:clamp(9px,.7vw,10.5px);
    --l-head:clamp(9px,.7vw,10.5px);
    --l-st:clamp(9px,.68vw,10px);
  }
}

/* ---------- 2) phone + iPad (one-glance rows) ---------- */
@media (max-width:1024px){
  .avl-m{
    column-gap:var(--l-gap);
    padding:var(--l-padv) 0;
    grid-template-columns:minmax(calc(var(--l-val)*6.6),1.1fr) minmax(0,.75fr) minmax(0,1.2fr) calc(var(--l-val)*2.05) calc(var(--l-st)*9.7);
  }
  .m-unit-no,.m-rate{font-size:var(--l-val)}
  .m-view,.m-view.m-view-2{font-size:var(--l-mid)}
  .m-beds,.m-offer,.m-size,.m-bt{font-size:var(--l-sub)}
  .m-bt{flex:0 0 calc(var(--l-sub)*5.4);width:calc(var(--l-sub)*5.4)}
  .m-bt-long{font-size:calc(var(--l-sub)*.82)}
  .m-bld,.m-bal{font-size:var(--l-tiny)}
  .m-fur{font-size:var(--l-tiny);min-width:calc(var(--l-tiny)*2.5)}
  .m-ex{min-width:calc(var(--l-tiny)*2.5)}
  .m-view .m-ic0,.m-view i{font-size:calc(var(--l-mid)*.88);width:calc(var(--l-mid)*1.15);height:calc(var(--l-mid)*1.15)}
  .m-flag .priority-icon-badge{width:calc(var(--l-val)*1.5);height:calc(var(--l-val)*1.5)}
  .m-flag .avl-viewings-badge{font-size:var(--l-tiny)}
  .m-unit,.m-rate,.m-view,.m-beds,.m-offer,.m-size{min-height:calc(var(--l-val)*1.45)}

  /* status pill - same markup as desktop, scaled with the text */
  .m-status .avl-status-badge{font-size:var(--l-st);gap:calc(var(--l-st)*.35);padding:calc(var(--l-st)*.3) calc(var(--l-st)*.72) calc(var(--l-st)*.3) calc(var(--l-st)*.36)}
  .m-status .avl-status-badge.is-editable{padding-right:calc(var(--l-st)*1.9)}
  .m-status .avl-status-badge > i:not(.avl-status-caret){width:calc(var(--l-st)*1.3);height:calc(var(--l-st)*1.3);font-size:calc(var(--l-st)*.76)}
  .m-status .avl-status-badge .avl-status-caret{width:calc(var(--l-st)*1.3);height:calc(var(--l-st)*1.3);font-size:calc(var(--l-st)*.7);right:calc(var(--l-st)*.36)}

  /* headers */
  table.avl-table thead th.avl-m-cell,.avl-m-head > span{font-size:var(--l-head)}
  table.avl-table thead th.avl-col-expand i{font-size:calc(var(--l-head)*1.1)}
  table.avl-table{font-size:var(--l-sub)}
}

/* ---------- 3) desktop (full table) - same sizes as before, now driven by the same variables ---------- */
@media (min-width:1025px){
  table.avl-table{font-size:var(--l-val)}
  table.avl-table thead th{font-size:var(--l-head)}
  table.avl-table .avl-status-badge{font-size:var(--l-st);gap:calc(var(--l-st)*.33);padding:calc(var(--l-st)*.33) calc(var(--l-st)*.66)}
  table.avl-table .avl-status-badge.is-editable{padding-right:calc(var(--l-st)*1.9)}
  table.avl-table .avl-status-badge i{width:calc(var(--l-st)*1.22);height:calc(var(--l-st)*1.22);font-size:calc(var(--l-st)*.72)}
  table.avl-table .avl-status-badge .avl-status-caret{width:calc(var(--l-st)*1.22);height:calc(var(--l-st)*1.22);font-size:calc(var(--l-st)*.66)}
}

/* v617 - iPad (700-1024px): TWO-LINE rows, kept slim. Line 1 = Unit | Rate | View ; line 2 = Beds (+FF/SF/UF) | Offer | Size.
   The Building name gets its own column beside them (spanning both lines, centred) instead of a third line, so the row stays two lines tall
   and the wide iPad width is put to use. Single-building sheets drop that column. Phones are unchanged (3rd line for the building). */
@media (min-width:700px) and (max-width:1024px){
  .avl-m{
    padding:var(--l-padv) 0;row-gap:2px;
    grid-template-columns:minmax(100px,1fr) minmax(0,.85fr) minmax(0,1.2fr) minmax(0,1.1fr) 44px calc(var(--l-st)*9.7);
    grid-template-areas:"unit rate view bld flag status" "beds offer size bld flag status"}
  .avl-one-bld .avl-m{
    grid-template-columns:minmax(100px,1fr) minmax(0,.85fr) minmax(0,1.2fr) 44px calc(var(--l-st)*9.7);
    grid-template-areas:"unit rate view flag status" "beds offer size flag status"}
  .avl-m-head{grid-template-areas:"unit rate view bld flag status"}
  .avl-one-bld .avl-m-head{grid-template-areas:"unit rate view flag status"}
  .avl-m-head .h-bld{display:block;grid-area:bld}
  .avl-one-bld .avl-m-head .h-bld{display:none}
  .m-bld{display:flex;align-items:center;align-self:center;font-size:var(--l-sub);letter-spacing:0;text-transform:none;opacity:.75;font-weight:600;
         white-space:normal;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .avl-one-bld .m-bld{display:none}
  .m-unit,.m-rate,.m-view,.m-beds,.m-offer,.m-size{min-height:calc(var(--l-val)*1.3)}
}
/* phones: no building header cell (the building stays on the 3rd line of the row) */
@media (max-width:699px){.avl-m-head .h-bld{display:none}}

/* v618 - LIST on phones + iPad: viewings count (admin) moved from the medal column to UNDER the status pill.
   Tiny eye icon + number, no border / background / padding, so it takes no extra width and never crowds the view icon.
   Roll back: delete this block and restore js/289 (the badge goes back into .m-flag). */
@media (max-width:1024px){
  .m-status{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
  .m-status .avl-viewings-badge{
    margin:1px 0 0;padding:0;border:0;background:transparent;border-radius:0;box-shadow:none;transform:none;
    min-height:0;gap:2px;font-size:calc(var(--l-tiny)*.9);line-height:1;font-weight:700;color:rgba(22,45,76,.62);
    -webkit-tap-highlight-color:transparent}
  .m-status .avl-viewings-badge i{font-size:.85em;color:var(--gold-500,#cea577);opacity:.9}
  .m-status .avl-viewings-badge:hover,.m-status .avl-viewings-badge:focus-visible{background:transparent;border:0}
}