/* =========================================================
   שי חי יזמות — מלאי דירות · עיצוב RTL בהשראת הלוגו:
   בסיס לבן, טקסט פחם, ופסיפס האריחים הצבעוני כשפת אקצנט
   ========================================================= */
:root {
  /* פלטת אריחי הלוגו (נדגמה מ-assets/logo.png) */
  --tile-magenta: #e6007e;
  --tile-cyan: #00a3e0;
  --tile-lime: #a6ce39;
  --tile-yellow: #f0c000;
  --tile-orange: #f26522;
  --tile-gray: #909090;

  --ink: #221c29;        /* פחם הכיתוב בלוגו */
  --muted: #6f6a7a;
  --line: #e7e5ec;
  --bg: #f6f6f8;
  --card: #ffffff;
  --accent: #0084bd;     /* ציאן הלוגו, מוכהה לניגודיות טקסט */

  /* סטטוסים ממופים לפלטת הלוגו: כהה לטקסט, בהיר לרקע, חי לקווים */
  --ok: #648f1c;   --ok-bg: #f1f7e2;   --ok-vivid: var(--tile-lime);
  --sold: #c00069; --sold-bg: #fce8f2; --sold-vivid: var(--tile-magenta);
  --hold: #c2511b; --hold-bg: #fdeee2; --hold-vivid: var(--tile-orange);
  /* "שוק חופשי" — לא זמין, ולכן באותו צבע כמו "נמכר" */
  --market: var(--sold); --market-bg: var(--sold-bg); --market-vivid: var(--sold-vivid);

  --radius: 11px;
  --radius-sm: 9px;
  --shadow: 0 4px 16px rgba(34, 28, 41, 0.06);
  --shadow-lg: 0 14px 40px rgba(34, 28, 41, 0.18);
  --tap: 40px;
  --header-h: 46px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* clip (לא hidden): מגירת הסינון מוזזת אל מחוץ למסך ב-translateX והייתה
   מרחיבה את הגלילה האופקית ב-RTL; clip אינו שובר position:sticky */
html, body { margin: 0; padding: 0; overflow-x: clip; }
body {
  font-family: "Heebo", "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}
button, input, select { font-family: inherit; }
h1, h2, h3 { margin: 0; }
:where(button, select, input, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Header ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  min-height: var(--header-h);
  padding: 7px clamp(10px, 2.5vw, 22px) 6px;
  background: #fff;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 14px rgba(34, 28, 41, 0.06);
  padding-top: max(7px, env(safe-area-inset-top));
}
/* פס הפסיפס — חתימת הלוגו לאורך ראש העמוד */
.topbar::before {
  content: ""; position: absolute; top: 0; right: 0; left: 0; height: 4px;
  background: linear-gradient(90deg,
    var(--tile-magenta) 0 17%,
    var(--tile-orange)  0 34%,
    var(--tile-yellow)  0 50%,
    var(--tile-lime)    0 67%,
    var(--tile-cyan)    0 84%,
    var(--tile-gray)    0 100%);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark { display: flex; align-items: center; }
.brand-mark img { height: 48px; width: auto; display: block; }
.brand-title { font-weight: 800; font-size: clamp(16px, 2.4vw, 21px); line-height: 1.1; color: var(--ink); }
.brand-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* מצב הטמעה (iframe): מסתירים לוגו וכותרת ראשית, אך משאירים את כותרת המשנה
   (כותרת העמוד) כתווית, ואת בקרות התצוגה/סינון. */
.is-embed .brand-mark, .is-embed .brand-title { display: none; }
.is-embed .brand-sub { font-size: 14px; font-weight: 700; color: var(--ink); margin-top: 0; }
.is-embed .topbar-end { margin-inline-start: auto; }

.topbar-mid { flex: 1; display: flex; justify-content: center; }
.project-picker { display: flex; align-items: center; gap: 8px; max-width: 100%; }
.picker-label { font-size: 13px; color: var(--muted); }
#projectSelect {
  height: var(--tap); min-width: 200px; max-width: 46vw;
  border-radius: 11px; border: 1.5px solid var(--line);
  background: #fff; color: var(--ink);
  padding: 0 14px; font-size: 15px; font-weight: 600;
}
#projectSelect:focus { outline: none; border-color: var(--accent); }

.topbar-end { display: flex; align-items: center; gap: 10px; }
.live { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.live-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--tile-lime); box-shadow: 0 0 0 0 rgba(166, 206, 57, .7); animation: pulse 2.2s infinite; }
.live.is-stale .live-dot { background: var(--tile-yellow); animation: none; }
.live.is-error .live-dot { background: var(--tile-orange); animation: none; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(166,206,57,.55);} 70%{box-shadow:0 0 0 8px rgba(166,206,57,0);} 100%{box-shadow:0 0 0 0 rgba(166,206,57,0);} }

.view-toggle { display: flex; background: #efedf3; border-radius: 9px; padding: 2px; }
.vt-btn { border: none; background: transparent; color: var(--muted); height: 32px; padding: 0 12px; border-radius: 7px; font-weight: 700; font-size: 13px; cursor: pointer; }
.vt-btn.is-active { background: var(--ink); color: #fff; }

.filter-toggle {
  display: none; align-items: center; gap: 8px;
  height: var(--tap); padding: 0 16px; border-radius: 11px;
  border: 1.5px solid var(--line); background: #fff;
  color: var(--ink); font-weight: 700; font-size: 15px; cursor: pointer;
}
.filter-count-badge {
  background: var(--tile-magenta); color: #fff; font-weight: 800;
  border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-grid; place-items: center; font-size: 12px;
}

/* ---------- Data-source notice ---------- */
.data-notice {
  padding: 8px clamp(10px, 2.5vw, 22px);
  background: var(--hold-bg); color: var(--hold);
  border-bottom: 1px solid rgba(0, 0, 0, .07);
  font-weight: 700; font-size: 12.5px; text-align: center;
}
.data-notice.is-demo { background: var(--sold); color: #fff; }

/* ---------- Stats ---------- */
.stats {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 8px; padding: 9px clamp(10px, 2.5vw, 22px) 0;
}
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 7px 12px; display: flex; align-items: center; gap: 9px; box-shadow: var(--shadow);
}
.stat-num { font-size: clamp(17px, 1.8vw, 21px); font-weight: 800; line-height: 1; }
.stat-lbl { font-size: 11.5px; color: var(--muted); }
.stat-dot { width: 11px; height: 11px; border-radius: 3px; } /* אריח קטן, כמו בלוגו */
.stat.ok .stat-num { color: var(--ok); } .stat.ok .stat-dot { background: var(--ok-vivid); }
.stat.market .stat-num { color: var(--market); } .stat.market .stat-dot { background: var(--market-vivid); }
.stat.sold .stat-num { color: var(--sold); } .stat.sold .stat-dot { background: var(--sold-vivid); }
.stat.hold .stat-num { color: var(--hold); } .stat.hold .stat-dot { background: var(--hold-vivid); }
.stat.total .stat-num { color: var(--ink); } .stat.total .stat-dot { background: var(--tile-gray); }

/* ---------- Layout ---------- */
.layout {
  display: grid; grid-template-columns: 250px 1fr; gap: 14px;
  padding: 12px clamp(10px, 2.5vw, 22px) 28px;
  align-items: start;
}

/* ---------- Filters ---------- */
.filters {
  position: sticky; top: calc(var(--header-h) + 8px);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; box-shadow: var(--shadow);
  max-height: calc(100vh - var(--header-h) - 20px); overflow-y: auto;
}
.filters-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.filters-head h2 { font-size: 15px; font-weight: 800; flex: 1; }
.close-filters { display: none; background: var(--bg); border: none; width: 34px; height: 34px; border-radius: 9px; font-size: 15px; cursor: pointer; color: var(--muted); }
.link-btn { background: none; border: none; color: var(--accent); font-weight: 700; font-size: 13px; cursor: pointer; padding: 5px; }

.filter-group { padding: 8px 0; border-top: 1px solid var(--line); }
.filter-group:first-of-type { border-top: none; }
.filter-title { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  min-height: 33px; padding: 0 11px; border-radius: 8px;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: all .12s ease; user-select: none;
}
.chip:active { transform: scale(.96); }
.chip.is-on { border-color: var(--ink); background: var(--ink); color: #fff; }
.chip.is-on.ok { border-color: var(--ok); background: var(--ok); }
.chip.is-on.sold { border-color: var(--sold); background: var(--sold); }
.chip.is-on.hold { border-color: var(--hold); background: var(--hold); }

.range-row { display: flex; align-items: center; gap: 8px; }
.range-row input {
  flex: 1; min-width: 0; height: var(--tap); border-radius: 9px;
  border: 1.5px solid var(--line); padding: 0 12px; font-size: 15px; background: #fff; color: var(--ink);
}
.range-row input:focus { outline: none; border-color: var(--accent); }
.dash { color: var(--muted); }

/* ---------- Dual-range slider (מחיר / שטח) ---------- */
.rng { direction: ltr; padding: 2px 4px 0; }
.rng-vals { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 800; color: var(--ink); margin-bottom: 12px; }
.rng-dash { color: var(--muted); font-weight: 600; }
.rng-empty { color: var(--muted); font-size: 14px; }
.rng-track { position: relative; height: 26px; touch-action: none; }
.rng-base, .rng-fill { position: absolute; top: 11px; height: 4px; border-radius: 4px; }
.rng-base { left: 0; right: 0; background: var(--line); }
.rng-fill { background: var(--accent); }
.rng-thumb {
  position: absolute; top: 13px; width: 24px; height: 24px; margin-left: -12px;
  transform: translateY(-50%); padding: 0; border-radius: 50%;
  background: #fff; border: 2px solid var(--accent);
  box-shadow: 0 1px 5px rgba(34, 28, 41, .3);
  cursor: grab; touch-action: none; z-index: 2;
}
.rng-thumb:active { cursor: grabbing; }
.rng-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.apply-filters { display: none; }

/* ---------- Results ---------- */
.results { min-width: 0; }

/* ---------- Active filters bar ---------- */
.active-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.afilter {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 11px; border-radius: 999px;
  background: var(--ink); color: #fff; border: none;
  font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.afilter:hover { opacity: .88; }
.afilter-x { font-size: 11px; line-height: 1; opacity: .8; }
.afilter-clear { background: transparent; color: var(--accent); border: 1.5px solid var(--line); }
.afilter-clear:hover { border-color: var(--accent); opacity: 1; }
.results-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.results-count { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.results-count b { color: var(--accent); }
.sort-picker { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
#sortSelect { height: 36px; border-radius: 8px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); padding: 0 11px; font-size: 13.5px; font-weight: 600; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 11px 12px; box-shadow: var(--shadow); cursor: pointer; position: relative;
  border-top: 3px solid var(--ok-vivid); transition: transform .12s ease, box-shadow .12s ease;
  display: flex; flex-direction: column; gap: 8px;
}
.card:active { transform: translateY(1px) scale(.995); }
.card:hover { box-shadow: var(--shadow-lg); }
.card.status-sold { border-top-color: var(--sold-vivid); }
.card.status-hold { border-top-color: var(--hold-vivid); }
.card.status-market { border-top-color: var(--market-vivid); }
/* דירות שאינן זמינות — דהויות, כדי שיהיה ברור שאינן זמינות לבחירה */
.card.status-sold, .card.status-hold, .card.status-market { opacity: .55; }
.card.status-sold:hover, .card.status-hold:hover, .card.status-market:hover { opacity: .85; }

.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.card-apt { font-size: 17px; font-weight: 800; color: var(--ink); line-height: 1; }
.card-apt small { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.badge { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.market { background: var(--market-bg); color: var(--market); }
.badge.sold { background: var(--sold-bg); color: var(--sold); }
.badge.hold { background: var(--hold-bg); color: var(--hold); }

.card-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.spec { text-align: center; }
.spec-val { font-size: 14.5px; font-weight: 800; color: var(--ink); }
.spec-lbl { font-size: 10.5px; color: var(--muted); margin-top: 1px; }

.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px dashed var(--line); padding-top: 8px; }
.card-price { font-size: 15.5px; font-weight: 800; color: var(--ink); }
.tag { font-size: 10.5px; font-weight: 700; padding: 3px 7px; border-radius: 6px; }
.tag.mt { background: #e3f4fc; color: #00719f; }     /* ציאן הלוגו */
.tag.free { background: #faf1cd; color: #8a6d00; }   /* צהוב הלוגו */

/* ---------- Table ---------- */
/* גלילה אנכית בתוך המיכל — כך שורת הכותרת הדביקה באמת נשארת למעלה */
.table-scroll { overflow: auto; max-height: calc(100vh - var(--header-h) - 48px); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.apt-table { width: 100%; border-collapse: collapse; min-width: 1040px; }
.apt-table th, .apt-table td { padding: 7px 10px; text-align: right; font-size: 12.5px; }
.apt-table td { white-space: nowrap; }
.apt-table thead th { background: var(--ink); color: #fff; font-weight: 700; position: sticky; top: 0; z-index: 1; vertical-align: top; white-space: nowrap; line-height: 1.15; }
.apt-table thead th small { display: block; font-weight: 500; font-size: 9.5px; opacity: .72; margin-top: 1px; }
.apt-table tbody tr { border-top: 1px solid var(--line); cursor: pointer; }
.apt-table tbody tr:nth-child(even) { background: #faf9fb; }
.apt-table tbody tr:hover { background: #eef2f6; }
.apt-table tbody tr.status-sold,
.apt-table tbody tr.status-hold,
.apt-table tbody tr.status-market { color: var(--muted); opacity: .6; }
.apt-table tbody tr.status-sold:hover,
.apt-table tbody tr.status-hold:hover,
.apt-table tbody tr.status-market:hover { opacity: .9; }
.apt-table .cell-apt { font-weight: 800; color: var(--ink); }
.apt-table .cell-price { font-weight: 800; }

/* ---------- Empty ---------- */
.empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-mosaic { display: flex; gap: 7px; justify-content: center; margin-bottom: 16px; }
.empty-mosaic i { width: 17px; height: 17px; border-radius: 4px; }
.empty-mosaic i:nth-child(1) { background: var(--tile-magenta); }
.empty-mosaic i:nth-child(2) { background: var(--tile-orange); }
.empty-mosaic i:nth-child(3) { background: var(--tile-yellow); }
.empty-mosaic i:nth-child(4) { background: var(--tile-lime); }
.empty-mosaic i:nth-child(5) { background: var(--tile-cyan); }
.empty-mosaic i:nth-child(6) { background: var(--tile-gray); }

/* ---------- Backdrop / drawer ---------- */
.backdrop { position: fixed; inset: 0; background: rgba(26, 21, 33, .5); z-index: 45; }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(26, 21, 33, .55); }
.modal-card { background: var(--card); width: min(560px, 100%); max-height: 90vh; overflow-y: auto; border-radius: 18px; padding: 20px 20px 18px; box-shadow: var(--shadow-lg); position: relative; }
.modal-card::before {
  content: ""; position: absolute; top: 0; right: 0; left: 0; height: 5px;
  background: linear-gradient(90deg,
    var(--tile-magenta) 0 17%, var(--tile-orange) 0 34%, var(--tile-yellow) 0 50%,
    var(--tile-lime) 0 67%, var(--tile-cyan) 0 84%, var(--tile-gray) 0 100%);
}
.modal-close { position: absolute; top: 12px; left: 12px; width: 36px; height: 36px; border-radius: 10px; border: none; background: var(--bg); font-size: 16px; cursor: pointer; color: var(--muted); }
.m-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding-left: 40px; }
.m-apt { font-size: 25px; font-weight: 800; color: var(--ink); }
.m-sub { color: var(--muted); font-size: 13.5px; }
.m-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.m-item { background: var(--bg); border-radius: 10px; padding: 8px 11px; }
.m-item .k { font-size: 11.5px; color: var(--muted); }
.m-item .v { font-size: 15px; font-weight: 700; margin-top: 2px; }
.m-item.wide { grid-column: 1 / -1; }
.m-price { grid-column: 1 / -1; background: var(--ink); color: #fff; border-radius: 12px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; }
.m-price .k { color: #beb7c9; font-size: 12.5px; }
.m-price .v { font-size: 22px; font-weight: 800; }

/* ---------- מסמכי דירה (PDF) ---------- */
.m-docs { margin-top: 12px; }
.m-docs-title { font-size: 11.5px; font-weight: 700; color: var(--muted); margin-bottom: 7px; }
.m-docs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.doc-btn {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 10px;
  padding: 9px 11px; color: var(--ink); font-size: 12.5px; font-weight: 600;
  transition: border-color .12s ease, background .12s ease, transform .1s ease;
}
.doc-btn:hover { border-color: var(--accent); background: #f4fbff; }
.doc-btn:active { transform: translateY(1px); }
.doc-btn .doc-ic { flex: none; display: inline-flex; color: var(--accent); }
.doc-btn-t { min-width: 0; line-height: 1.25; }
@media (max-width: 480px) { .m-docs-row { grid-template-columns: 1fr; } }

/* ---------- Responsive ---------- */

/* Desktop: פריסת "אפליקציה" בגובה המסך — הדף עצמו לא נגלל, ולכן פאנל
   הסינון תמיד נכנס בגובה החלון; התוצאות והסינון נגללים כל אחד לעצמו
   (בלי אפקט הגלילה הכפולה של דף + פאנל) */
@media (min-width: 1001px) {
  html, body { height: 100%; }
  body { display: flex; flex-direction: column; overflow: hidden; }
  .topbar, .data-notice, .stats { flex: none; }
  .layout { flex: 1; min-height: 0; align-items: stretch; padding-bottom: 16px; }
  .filters { position: static; max-height: none; overflow-y: auto; }
  /* עמודת התוצאות: שורת המיון קבועה, ואזור הכרטיסים/הטבלה נגלל לעצמו */
  .results { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  .results-head { flex: none; }
  .cards { flex: 1; min-height: 0; overflow-y: auto; align-content: start; padding-bottom: 24px; }
  .table-scroll { flex: 1; min-height: 0; max-height: none; }
  .empty { flex: none; }
}

/* Tablet & portrait kiosk (narrower): filters become a drawer */
@media (max-width: 1000px) {
  .filter-toggle { display: inline-flex; }
  .topbar-mid { order: 3; flex-basis: 100%; justify-content: flex-start; }
  .layout { grid-template-columns: 1fr; }
  /* מגירה סגורה = display:none, כדי שלא תמתח את רוחב הדף (אלמנט fixed
     מחוץ למסך אינו נחתך ע"י overflow-x:clip וגורם לגלישה אופקית) */
  .filters {
    position: fixed; top: 0; bottom: 0; right: 0; z-index: 50;
    width: min(360px, 88vw); border-radius: 0;
    /* גובה לפי גובה החלון בפועל בנייד (dvh) כדי שהמגירה לא תחרוג */
    height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: 0 14px; box-sizing: border-box;
    box-shadow: -8px 0 34px rgba(26, 21, 33, .28);
    display: none;
  }
  .filters.is-open { display: block; animation: drawerIn .24s ease; }
  @keyframes drawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
  /* כותרת המגירה נעוצה למעלה */
  .filters .filters-head {
    position: sticky; top: 0; z-index: 2; margin: 0 -14px 4px;
    padding: max(14px, env(safe-area-inset-top)) 14px 10px;
    background: var(--card); border-bottom: 1px solid var(--line);
  }
  .close-filters { display: block; }
  /* כפתור "הצג תוצאות" נעוץ לתחתית המגירה, ברוחב מלא — תמיד גלוי */
  .apply-filters {
    display: block; position: sticky; bottom: 0; z-index: 2;
    box-sizing: border-box; width: calc(100% + 28px); margin: 12px -14px 0;
    padding: 15px 14px calc(15px + env(safe-area-inset-bottom)); height: auto;
    border: none; border-radius: 0; background: var(--ink); color: #fff;
    font-size: 16px; font-weight: 800; cursor: pointer;
    box-shadow: 0 -8px 18px rgba(26, 21, 33, .16);
  }
  .stats { grid-auto-flow: column; }
}

/* Phones */
@media (max-width: 640px) {
  :root { --header-h: 60px; }
  .brand-sub { display: none; }
  .brand-mark img { height: 38px; }
  .topbar { flex-wrap: wrap; gap: 10px; }
  .topbar-mid { order: 3; flex-basis: 100%; }
  .project-picker { width: 100%; }
  #projectSelect { flex: 1; min-width: 0; max-width: none; }
  .live-text { display: none; }
  .view-toggle .vt-btn { padding: 0 11px; font-size: 13px; }
  .stats { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  /* עמודה אחת בטלפון: כרטיס ברוחב מלא, בלי צפיפות/גלישה (צפיפות זמינה בתצוגת טבלה) */
  .cards { grid-template-columns: 1fr; gap: 12px; }
  .card { padding: 15px; }
  .m-grid { grid-template-columns: 1fr 1fr; } /* 2 עמודות בטלפון — פחות גובה, בלי גלילה פנימית */
}
@media (max-width: 380px) {
  .stats { grid-template-columns: 1fr 1fr; }
}

/* Large / kiosk landscape: roomier cards */
@media (min-width: 1500px) {
  .cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .layout { grid-template-columns: 330px 1fr; }
}

/* Touch: remove hover lift on touch devices */
@media (hover: none) {
  .card:hover { box-shadow: var(--shadow); }
}

/* =========================================================
   הבלטת שינויים חיים: הדגשה על הכרטיס/שורה + תגית "עודכן כעת"
   (הטוסט וההקפצה-לראש מנוהלים ב-app.js)
   ========================================================= */
/* --hlbg = רקע רך של הכרטיס/שורה, --hld = צבע כהה מלא לתג הסטטוס — לפי הסטטוס */
.cards { padding-top: 6px; padding-inline: 8px; } /* מעט מרווח בצדדים ובראש */
.card.just-changed, .apt-table tr.just-changed { --hlbg: #e8f3fb; --hld: var(--accent); }
.card.just-changed.status-sold, .card.just-changed.status-market,
.apt-table tr.just-changed.status-sold, .apt-table tr.just-changed.status-market { --hlbg: var(--sold-bg); --hld: var(--sold); }
.card.just-changed.status-hold, .apt-table tr.just-changed.status-hold { --hlbg: var(--hold-bg); --hld: var(--hold); }
.card.just-changed.status-ok,   .apt-table tr.just-changed.status-ok   { --hlbg: var(--ok-bg);   --hld: var(--ok); }

/* צביעת רקע עדינה בלבד — בלי שינוי גודל/מסגרת */
.card.just-changed { opacity: 1 !important; background: var(--hlbg); }
.card.just-changed.flash { animation: tintIn 1.6s ease-out; }
.apt-table tr.just-changed td { background: var(--hlbg); }
.apt-table tr.just-changed.flash td { animation: tintIn 1.6s ease-out; }
@keyframes tintIn {   /* נכנס לרקע הקבוע ונשאר — בלי מסגרת, גודל, או הבהוב חוזר */
  0%   { background: transparent; }
  30%  { background: var(--hlbg); }
  100% { background: var(--hlbg); }
}

/* תג הסטטוס בכרטיס/שורה מודגשים: כהה ומלא, כדי שלא "ייבלע" ברקע הבהיר הזהה */
.card.just-changed .badge, .apt-table tr.just-changed .badge {
  background: var(--hld); color: #fff;
}
.badge-time { font-weight: 700; opacity: .82; }

/* טוסט "עדכון חי" — צף בפינה השמאלית-עליונה, נעלם אחרי כמה שניות */
.live-toasts {
  position: fixed; top: 14px; left: 14px; right: auto; z-index: 1000;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  pointer-events: none;
}
.ltoast {
  pointer-events: auto; display: flex; align-items: center; gap: 11px;
  width: auto; max-width: min(400px, calc(100vw - 28px)); box-sizing: border-box;
  background: var(--ink); color: #fff; border-radius: 12px; padding: 11px 14px;
  box-shadow: 0 12px 30px rgba(34,28,41,.30);
  opacity: 0; transform: translateY(-14px); transition: opacity .35s ease, transform .35s ease;
}
.ltoast.show { opacity: 1; transform: translateY(0); }
.ltoast.hide { opacity: 0; transform: translateY(-14px); }
.lt-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: #fff; }
.ltoast.sold .lt-dot, .ltoast.market .lt-dot { background: var(--sold-vivid); }
.ltoast.hold .lt-dot { background: var(--hold-vivid); }
.ltoast.ok .lt-dot { background: #17b26a; }
.lt-tx { min-width: 0; }
.lt-line { font-size: 13px; line-height: 1.3; }
.lt-line b { font-weight: 800; }
.lt-sub { font-size: 11px; opacity: .74; margin-top: 1px; }

@media (prefers-reduced-motion: reduce) {
  .card.just-changed.flash, .apt-table tr.just-changed.flash td { animation: none; }
  .ltoast { transition: opacity .2s ease; }
}