/* v586 - LIST (Availability) on phones: one compact "glance" row per unit.
   Pairs with js/289-list-mobile.js (adds ONE extra cell .avl-m-cell to each row + header).
   Desktop (>1024px): the extra cell is display:none -> nothing changes.
   Roll back: remove the <link> + <script> tags of 289 in index.html. */
.avl-m-cell{display:none}

@media (max-width:1024px){
  /* ---- table shell: no sideways scroll, only 2 real columns (chevron + glance cell) ---- */
  table.avl-table{min-width:0!important;width:100%;table-layout:fixed;font-size:12px}
  table.avl-table thead th:not(.avl-m-cell):not(.avl-col-expand),
  table.avl-table tbody tr.avl-row > td:not(.avl-m-cell):not(.avl-col-expand){display:none!important}
  table.avl-table th.avl-m-cell,table.avl-table td.avl-m-cell{display:table-cell;padding:0!important;min-width:0;width:auto}
  table.avl-table th.avl-col-expand,table.avl-table td.avl-col-expand{width:32px;min-width:32px;padding:0 0 0 4px!important;border-right:0!important;text-align:center}
  /* detail / loading / empty rows leave the column grid (their colspan was written for 14 columns) */
  tr.avl-detail-row.is-open,tr.avl-loading-row,tr.avl-empty-row{display:block}
  tr.avl-detail-row.is-open > td,tr.avl-loading-row > td,tr.avl-empty-row > td{display:block;width:100%}
  /* status colour edge now sits on the first visible cell (the chevron), not the hidden select cell */
  table.avl-table tbody tr.avl-row[data-status="VACANT"] td.avl-col-expand{box-shadow:inset 4px 0 0 #D9E2EC}
  table.avl-table tbody tr.avl-row[data-status="BOOKED"] td.avl-col-expand{box-shadow:inset 4px 0 0 #E7C86B}
  table.avl-table tbody tr.avl-row[data-status="CONTRACTED"] td.avl-col-expand{box-shadow:inset 4px 0 0 #69B989}
  table.avl-table tbody tr.avl-row[data-status="DEPOSIT"] td.avl-col-expand{box-shadow:inset 4px 0 0 #E67E22}
  table.avl-table tbody tr.avl-row[data-status="LEASED"] td.avl-col-expand{box-shadow:inset 4px 0 0 #D9534F}
  table.avl-table tbody tr.avl-row[data-status="ON HOLD"] td.avl-col-expand{box-shadow:inset 4px 0 0 #E4BE75}
  table.avl-table tbody tr.avl-row[data-status="OUT OF MARKET"] td.avl-col-expand{box-shadow:inset 4px 0 0 #98A2B3}
  table.avl-table tbody tr.avl-row{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
  table.avl-table tbody tr.avl-row > td{padding-top:0!important;padding-bottom:0!important;vertical-align:middle}
  table.avl-table tbody tr.avl-row .avl-expand-btn{width:24px!important;height:24px!important}
  table.avl-table tbody tr.avl-row .avl-expand-ic{font-size:10px!important}

  /* ---- header: one word per column ---- */
  table.avl-table thead th.avl-m-cell{font-size:10px;letter-spacing:.6px;text-transform:uppercase;white-space:nowrap;overflow:hidden}
  table.avl-table thead th.avl-col-expand i{font-size:11px}

  /* ---- the glance cell (tiers switch with the viewport width; no per-row containers = cheaper layout) ---- */
  .avl-mc{position:relative;padding:0 10px 0 2px;transition:padding-left .18s ease;font-family:var(--font-body,var(--font-sans,Arial,sans-serif));font-variant-numeric:tabular-nums}
  .avl-m{display:grid;align-items:center;column-gap:8px;row-gap:1px;padding:6px 0;line-height:1.3;
    grid-template-columns:minmax(0,1.15fr) minmax(0,.7fr) minmax(0,1.2fr) 82px;
    grid-template-areas:"unit rate view status" "beds offer size status" "bld bld bld bld"}
  .avl-m > *{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .m-unit{grid-area:unit}.m-beds{grid-area:beds}.m-rate{grid-area:rate}.m-offer{grid-area:offer}
  .m-view{grid-area:view}.m-size{grid-area:size}.m-status{grid-area:status;justify-self:end;overflow:visible;position:relative}
  .m-bld{grid-area:bld}
  .avl-one-bld .m-bld{display:none}

  .m-unit-no{font-size:12.5px;font-weight:700;letter-spacing:0;color:var(--navy-900,#0b2038)}
  [data-theme="dark"] .m-unit-no{color:var(--ink,#fff)}
  .m-unit .priority-broker-ic,.m-unit .avl-viewings-badge{margin-left:4px;transform:scale(.85);transform-origin:left center;vertical-align:middle}
  /* beds line also carries two tiny tags: balcony (icon, only when YES) + furnishing (FF / SF / UF) - no extra row height */
  .m-beds{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600}
  .m-bt{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;opacity:.7}
  .m-ex{display:inline-flex;align-items:center;gap:4px;flex:none}
  /* balcony (only when the unit has one): small tag right beside the unit size, same row. */
  .m-bal{display:inline-flex;align-items:center;gap:1px;font-size:8px;font-weight:700;line-height:1;letter-spacing:.1px;color:var(--navy-700,#2E4F79);white-space:nowrap}
  .m-bal-ck{font-style:normal;font-weight:800;color:var(--gold-600,#a8842f)}
  [data-theme="dark"] .m-bal{color:#A9C6E8}
  [data-theme="dark"] .m-bal-ck{color:#E6C877}
  .m-fur{font-size:8.5px;font-weight:800;letter-spacing:.3px;line-height:1;padding:1.5px 3px;border-radius:4px;border:1px solid rgba(168,132,47,.5);color:#7a5a14;background:rgba(199,164,91,.12)}
  [data-theme="dark"] .m-fur{color:#E6C877;border-color:rgba(230,200,119,.45);background:rgba(199,164,91,.14)}
  .m-fur:empty{display:none}
  .m-rate{font-size:12.5px;font-weight:700;color:var(--navy-900,#0b2038)}
  [data-theme="dark"] .m-rate{color:var(--ink,#fff)}
  .m-offer{font-size:10.5px;font-weight:700;margin-left:-6px;padding-left:6px}
  .m-offer-chip{display:inline-block;margin-left:-5px;padding:0 5px;border-radius:999px;background:rgba(199,164,91,.2);color:#7a5a14;border:1px solid rgba(199,164,91,.45);line-height:1.35}
  [data-theme="dark"] .m-offer-chip{color:#E6C877;background:rgba(199,164,91,.16)}
  .m-offer .m-none,.m-none{opacity:.35;font-weight:600}
  .m-view{font-size:11.5px;font-weight:600}
  .m-view{display:flex;align-items:center;gap:5px}
  .m-vp{display:inline-flex;align-items:center;min-width:0;white-space:nowrap}
  .m-view.m-view-2{gap:3px;font-size:10.5px}.m-view-2 i{width:11px;margin-right:2px}
  .m-view i,.m-view .m-ic0{display:inline-block;font-size:10px;width:13px;flex:none;text-align:center;margin-right:3px;color:var(--gold-600,#a8842f)}
  .m-size{padding-left:16px;display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600}
  .m-size .m-n,.m-size .m-u,.m-size .m-none{opacity:.75}
  .m-size .m-n,.m-size .m-u{flex:none}
  .m-u{display:none}
  .m-bld{font-size:9.5px;font-weight:600;letter-spacing:.3px;opacity:.55;text-transform:uppercase}

  /* status pill = the desktop .avl-status-badge (colours / icon disc / caret disc come from css/22), just scaled down.
     Admin keeps the invisible <select> overlay = quick status change. */
  .m-status .avl-status-badge{gap:3px;padding:2.5px 6px 2.5px 3px;font-size:8.5px;letter-spacing:.2px;font-weight:800;white-space:nowrap}
  .m-status .avl-status-badge > i:not(.avl-status-caret){width:11px;height:11px;font-size:6.5px;flex:none}
  .m-status .avl-status-badge.is-editable{padding-right:16px}
  .m-status .avl-status-badge .avl-status-caret{position:absolute;right:3px;top:50%;transform:translateY(-50%);width:11px;height:11px;font-size:6px}
  .m-status .avl-status-badge select{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;cursor:pointer}

  /* ---- selection: long-press a row (or tap the ring once selecting) ---- */
  .m-sel{position:absolute;left:4px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;border:1.8px solid rgba(11,32,56,.32);background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;padding:0;opacity:0;pointer-events:none;transform:scale(.6);transition:opacity .15s,transform .18s}
  .m-sel i{font-size:10px;color:#fff;opacity:0}
  .m-sel::after{content:"";position:absolute;inset:-10px}
  body.has-compare-bar .avl-mc{padding-left:32px}
  body.has-compare-bar .m-sel{opacity:1;pointer-events:auto;transform:none}
  table.avl-table tbody tr.avl-row.avl-sel .m-sel{background:var(--gold-500,#C7A45B);border-color:var(--gold-500,#C7A45B)}
  table.avl-table tbody tr.avl-row.avl-sel .m-sel i{opacity:1}
  table.avl-table tbody tr.avl-row.avl-sel > td{box-shadow:inset 0 0 0 9999px rgba(199,164,91,.16)}
  table.avl-table tbody tr.avl-row.avl-lp-armed > td{box-shadow:inset 0 0 0 9999px rgba(199,164,91,.12)}

  /* ---- header grid: same columns as the rows ---- */
  .avl-m-head{grid-template-areas:"unit rate view status";padding:8px 0}
  .avl-m-head > span{font-weight:700}
  .avl-m-head .h-view{padding-left:16px}
  .avl-m-head .h-beds,.avl-m-head .h-offer,.avl-m-head .h-size{display:none}
  .avl-m-head .h-status{grid-area:status;justify-self:end;padding-right:6px}
  .avl-m-head .h-unit{grid-area:unit}.avl-m-head .h-rate{grid-area:rate}.avl-m-head .h-view{grid-area:view}
}

/* very narrow phones (<=340px): tighter type, status shown as a dot + 1 word already */
@media (max-width:370px){
  .m-unit-no,.m-rate{font-size:12px}
  .m-status .avl-status-badge{font-size:8px;gap:2px;letter-spacing:.1px}
  .avl-m{column-gap:5px;grid-template-columns:minmax(0,1.1fr) minmax(0,.7fr) minmax(0,1.25fr) 76px}
}
@media (prefers-reduced-motion:reduce){.avl-mc,.m-sel{transition:none}}

/* v612 - everything left-aligned (phones + iPad): header words, values, status pill */
@media (max-width:1024px){
  .avl-m,.avl-m-head{justify-items:start;text-align:left}
  .avl-m > *,.avl-m-head > span{text-align:left}
  .m-status,.avl-m-head .h-status{justify-self:start}
  .avl-m-head .h-status{padding-right:0}
  table.avl-table thead th.avl-m-cell{text-align:left}
}


/* v614 - LIST on phones + iPad: tidy vertical alignment in every row.
   1) the gold offer medal (+ admin viewings badge) moves from the unit number to its OWN column right before the status pill (same x in every row, centred on both lines);
   2) beds text gets a fixed width so the furnishing tag (FF / SF / UF) sits at the same x in every row, all tags the same width;
   3) every value is centred vertically on its line, digits are tabular.
   Roll back: delete this block (and the m-flag / h-flag bits in js/289). */
@media (max-width:1024px){
  .avl-m{
    column-gap:5px;
    grid-template-columns:minmax(82px,1.1fr) minmax(0,.75fr) minmax(0,1.2fr) 26px 82px;
    grid-template-areas:"unit rate view flag status" "beds offer size flag status" "bld bld bld bld bld";
    align-items:center}
  .avl-m-head{grid-template-areas:"unit rate view flag status"}
  .avl-m-head .h-flag{grid-area:flag}
  .avl-mc{padding-right:6px}
  .m-flag{grid-area:flag;justify-self:center;align-self:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;overflow:visible;min-height:18px}
  .m-flag .priority-icon-badge{margin:0;transform:none;width:18px;height:18px}
  .m-flag .avl-viewings-badge{margin:0;transform:none;gap:2px;padding:0 4px;font-size:9px;line-height:14px;min-height:14px}
  .m-flag .avl-viewings-badge i{font-size:8px}
  .m-status{align-self:center;justify-self:start}

  /* furnishing tag: same x + same width in every row */
  .m-beds{display:flex;align-items:center;gap:4px}
  .m-bt{flex:0 0 56px;width:56px;min-width:0;overflow:hidden;text-overflow:clip;white-space:nowrap}
  .m-bt-long{font-size:8.5px;letter-spacing:-.3px}
  .m-ex{flex:none;min-width:22px}
  .m-fur{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:22px;text-align:center}

  /* values: one shared vertical centre, digits stacked */
  .m-unit,.m-rate,.m-view,.m-beds,.m-offer,.m-size{display:flex;align-items:center;min-height:18px}
  .m-unit-no,.m-rate,.m-offer,.m-size,.m-bt{font-variant-numeric:tabular-nums}
  .m-view .m-ic0,.m-view i{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;flex:none}
  .m-offer{margin-left:0;padding-left:0}
  .m-offer-chip{margin-left:0}
}
@media (max-width:370px){
  .avl-m{column-gap:4px;grid-template-columns:minmax(80px,1.1fr) minmax(0,.75fr) minmax(0,1.25fr) 24px 76px}
  .m-bt{flex-basis:54px;width:54px}
  .m-bal{font-size:7.5px}
}
/* iPad: more room -> looser columns, slightly larger tags */
@media (min-width:700px) and (max-width:1024px){
  .avl-m{column-gap:12px;grid-template-columns:minmax(110px,1.1fr) minmax(0,.8fr) minmax(0,1.2fr) 36px 96px}
  .m-bt{flex-basis:70px;width:70px}
  .m-bt-long{font-size:9.5px;letter-spacing:-.1px}
  .m-fur{min-width:26px;font-size:9.5px;padding:2px 4px}
  .m-ex{min-width:26px}
  .m-flag .priority-icon-badge{width:20px;height:20px}
}