/* src/app/dan/map.css — מפת נכסים: העיצוב של דן, מועתק.
 * מקור: legacy/community/branch-properties-map.html
 * מסכים: src/app/screens/housing-map.js — כל אחד עוטף את עצמו ב-`<div class="dan dan-<מודול>">`.
 * הנוהל: docs/runbooks/dan-design-port.md · הפלטה (`--d-*`): src/app/dan/dan.css.
 *
 * 🔴 01.10 · גיל: "תעתיק גם את הלוגיקה והפונקציונליות בדף וגם את העיצוב של כל המסכים, פשוט העתקה ממקום למקום".
 *    ⟹ זה ה-`<style>` של הדף (ומה שהוא לוקח מ-`assets/css/page.css`: `.topbar` · `.btn-*` · `.alerts` · `.kpis` · `.card`), מועתק ולא מיובא.
 *
 * ⚠️ מה שונה מהמקור, ולמה — ארבעה דברים:
 *  ① **אין `:root`** (tokens.css הוא ההצהרה היחידה) — הפלטה ב-`dan.css`, תחומה ל-`.dan`. שני האפורים הוכהו ל-AA שם.
 *  ② **שמות מקומיים למחלקות שמתנגשות עם packages/ui / kit.css** (הרשימה: runbook): `.topbar`→`.dtop` · `.btn`→`.dbtn` · `.bar`→`.dbar` ·
 *     `.pill`→`.dpill` · `.empty`→`.dempty` · `.alert`→`.dalert` · `.row`/`.rows`→`.drow`/`.drows` · `.card`→`.dcard`. (`.ltr` ו-`.sr-only`
 *     של המעטפת זהים בסמנטיקה לשל דן — משתמשים בהם כמו שהם.)
 *  ③ **אין Leaflet** — לא `leaflet.css` (גיליון חיצוני) ולא `.leaflet-container`: ה-SVG (`.dmap-svg`) הוא המפה, וכפתורי הזום
 *     (`.dmap-zoom`) מצוירים כמו `L.control.zoom` (30×30, גבול 2px, פינה שמאלית־עליונה) בלי הקובץ.
 *  ④ **ספרות בתוך סמן מרובה-נכסים — כהות, לא לבנות.** בדן הן לבנות על ירוק-בינוני/כתום/אפור: 2.9:1 · 3.0:1 · 3.4:1. כהות (#16211C) נותנות
 *     5.7 · 5.5 · 4.8 — AA, באותם מילויים בדיוק.
 *  ⑤ **container query ולא media query** (המעטפת קובעת את רוחב התוכן) — חוץ ממסך מלא: שם `.mapwrap` הוא `fixed` בגודל החלון, ולכן הוא
 *     נמדד לפי החלון (`@media`). ⚠️ ו-`container-type` נושא containing block ל-`position:fixed`, ולכן `.is-full` מבטל אותו.
 */

.dan-map {
  container: dmap / inline-size;
  display: flex; flex-direction: column; gap: 22px;
  color: var(--d-text);
  /* צבעים של דן שאין להם מקום בפלטה המשותפת (`.mk-free` · `.leaflet-container`) — מקומיים, תחומים, לא `:root`. */
  --dm-free: #8E8B80;
  --dm-map: #DDE6DC;
  --dm-bad: #C0392B;   /* `.mk-bad` · `.sw.bad` של דן */
}
.dan-map [hidden] { display: none !important; }
/* ⚠️ לפי המפרט (layout containment של `container-type`) — ועל פי הערת manager.css — `position:fixed` בתוך אלמנט כזה מתייחס אליו ולא לחלון.
   נמדד 01.10: ב-Chrome הנוכחי זה **אינו** קורה (העוטף מכסה את החלון גם בלי השורה הזו), אבל זה תלוי-מנוע, ולכן מסך מלא מוותר עליו במפורש. */
.dan-map.is-full { container-type: normal; }
body.dan-map-full { overflow: hidden; }

/* ---------- כותרת ---------- */
.dan-map h1 { font-size: 27px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; margin: 0 0 5px; }
.dan-map .dtop { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dan-map .dtop .meta { font-size: 15.5px; color: var(--d-muted); }

/* ---------- כפתורים ---------- */
.dan-map .dbtn { font-family: inherit; font-size: 14.5px; font-weight: 500; border-radius: 999px; padding: 10px 18px;
  cursor: pointer; border: 1px solid #D8E3DA; background: #fff; color: var(--d-green); text-decoration: none;
  display: inline-block; }
.dan-map .dbtn:hover { background: #F4F8F5; }
.dan-map .dbtn.solid { background: var(--d-green); color: #fff; border-color: var(--d-green); font-weight: 600; }
.dan-map .dbtn.solid:hover { background: var(--d-green-dark); color: #fff; }
.dan-map .dbtn.link { border: 0; background: none; padding: 6px 8px; color: var(--d-muted); font-size: 13.5px; }
.dan-map .dbtn.link:hover { color: var(--d-orange-ink); }
.dan-map .dbtn.sm { font-size: 13.5px; padding: 7px 13px; }
.dan-map .dbtn:focus-visible, .dan-map .kpi:focus-visible, .dan-map .tabs button:focus-visible {
  outline: 2px solid var(--d-green); outline-offset: 2px; }

/* ---------- אריחי KPI ----------
   ⚠️ `min-width:0` על אריח ברשת (הערת דן): ברירת המחדל של פריט grid היא min-width:auto, כלומר הוא מסרב להצטמצם מתחת לרוחב התוכן שלו —
   ב-375px נשארים כאן ~71px לטקסט, ו"אזורים על התרשים" רחב מזה. בלי השורה הזו האריח דוחף את הרשת והדף מקבל גלישה אופקית.
   האריח הוא `<a>` (כלל 10: אין מונה בלי קישור) ונראה כמו ה-`<div>` של דן. */
.dan-map .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dan-map .kpi { background: #fff; border-radius: 18px; padding: 14px 18px; min-width: 0; box-shadow: var(--d-shadow);
  display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; }
.dan-map .kpi .l { font-size: 13.5px; color: var(--d-faint); }
.dan-map .kpi .v { font-size: 24px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; }
.dan-map .kpi .s { font-size: 13.5px; color: var(--d-green); }
.dan-map .kpi .s.warn { color: var(--d-orange-ink); }
.dan-map .kpi .s.mute { color: var(--d-faint); }

/* ---------- שורת הבוררים ---------- */
.dan-map .dbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 0; }
.dan-map .dbar select { font-family: inherit; font-size: 14.5px; padding: 9px 12px; border: 1px solid #D8E3DA;
  border-radius: 10px; background: #fff; color: var(--d-text); }
.dan-map .dbar select:focus-visible { outline: 2px solid var(--d-green); outline-offset: 2px; }

/* ---------- מקרא ---------- */
.dan-map .legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--d-muted);
  list-style: none; margin: 0; padding: 0; }
.dan-map .legend .lg { display: flex; align-items: center; gap: 6px; }
.dan-map .legend .sw { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(16,42,32,.18); background: var(--d-green-mid); flex: none; display: inline-block; }
.dan-map .legend .sw.warn { background: var(--d-orange); }
.dan-map .legend .sw.bad { background: var(--dm-bad); }
.dan-map .legend .sw.free { background: var(--dm-free); }
.dan-map .legend .sw.multi { width: 20px; height: 20px; display: grid; place-items: center; color: var(--d-text);
  font-size: 11px; font-weight: 700; font-style: normal; }
/* שלנו (אין פוליגונים — ראו כותרת): צבע האזור הוא טבעת, והמקרא מראה אותה. הצבע עצמו inline (`border-color`), ליטרל מהקוד. */
.dan-map .legend .sw.ring { background: transparent; border: 3px solid; box-shadow: none; width: 15px; height: 15px; }

/* ---------- התראות (נ״צ חסר · סינון ריק) ---------- */
.dan-map .dalerts { display: flex; gap: 12px; flex-wrap: wrap; }
.dan-map .dalert { flex: 1; min-width: 300px; display: flex; align-items: center; gap: 12px; border-radius: 16px;
  padding: 14px 18px; font-size: 15px; line-height: 1.5; }
.dan-map .dalert.plain { background: #fff; border: 1px solid var(--d-line); color: var(--d-body); }
.dan-map .dalert .ic { width: 24px; height: 24px; flex: none; border-radius: 50%; font-weight: 700;
  display: grid; place-items: center; font-size: 13px; }
.dan-map .dalert.plain .ic { background: #EAF2EC; color: var(--d-green); }
.dan-map .dalert a { color: var(--d-green); font-weight: 500; text-decoration: underline; }
.dan-map .dalert a:hover { color: var(--d-orange-ink); }

/* ---------- המפה ----------
   ⚠️ גובה המפה נגזר מהחלון ולא ממספר קסם (דן: `flex:1` — main שם הוא flex column בגובה מסך; כאן המעטפת אינה כזו, ולכן clamp). הרצפה 420px;
   במובייל 58svh (ולא vh: בספארי סרגל הכתובת מכווץ את החלון תוך כדי גלילה, ו-vh היה גורם לקפיצה) — "המפה שהמסך הזה קיים בשבילה
   מגיעה כרצועה" (הערת דן) היא בדיוק מה ש-`layout()` פותר: התרשים נפרס על המכל הזה, לא על 640×380. */
.dan-map .mapwrap { position: relative; height: clamp(420px, calc(100vh - 430px), 880px); border-radius: 18px;
  overflow: hidden; box-shadow: var(--d-shadow); background: var(--dm-map); }
@supports (height: 1svh) { .dan-map .mapwrap { height: clamp(420px, calc(100svh - 430px), 880px); } }
/* ⚠️ `base.css` קובע `svg { width:20px; height:20px }` לכל SVG — המפה ממלאת את העוטף במפורש. */
.dan-map .dmap-stage { position: absolute; inset: 0; }
.dan-map .dmap-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none;
  cursor: grab; user-select: none; -webkit-user-select: none; }
.dan-map .mapwrap.is-dragging .dmap-svg { cursor: grabbing; }
/* תיבת הזום (shift+גרירה) — כמו `.leaflet-zoom-box` של Leaflet. */
.dan-map .dmap-box { position: absolute; z-index: 4; pointer-events: none; border: 2px dotted #38f; background: rgba(243,243,243,.5); box-sizing: border-box; }
.dan-map .dmap-box[hidden] { display: none; }
.dan-map .dmap-svg:focus-visible { outline: 3px solid var(--d-ink); outline-offset: -3px; }

/* סמן = מבנה. הצבע הוא בדיוק שפת הסריקה של המרשם: ירוק = מושכר ותקין · כתום = חוזה נגמר בקרוב · אפור = פנוי (האדום — ראו כותרת הקובץ). */
.dan-map [data-hm-dot] { cursor: pointer; }
.dan-map [data-hm-circle] { fill: var(--d-green-mid); filter: drop-shadow(0 1px 2px rgba(16,42,32,.45)); }
.dan-map [data-hm-dot][data-hm-sev="warn"] [data-hm-circle] { fill: var(--d-orange); }
.dan-map [data-hm-dot][data-hm-sev="bad"] [data-hm-circle] { fill: var(--dm-bad); }
.dan-map [data-hm-dot][data-hm-sev="free"] [data-hm-circle] { fill: var(--dm-free); }
.dan-map [data-hm-count] { fill: var(--d-text); }
/* ספרות על האדום — לבנות (5.4:1), כמו בדן: הכהות (#16211C) נותנות 3.0:1 על #C0392B, מתחת ל-AA. על שלושת המילויים האחרים הכהות ≥ 4.8:1 (ראו ④). */
.dan-map [data-hm-dot][data-hm-sev="bad"] [data-hm-count] { fill: #fff; }
/* תווית האזור (דן: `.zl span` — פיל לבן שקוף למחצה, גבול בצבע האזור, 12.5px/600). הגבול ב-`stroke` (ליטרל מהקוד); הטקסט כהה — AA (הצהוב של דן 2.9:1). */
.dan-map [data-hm-zone-bg] { fill: rgba(255,255,255,.88); stroke-width: 1.5; filter: drop-shadow(0 1px 2px rgba(16,42,32,.25)); }
.dan-map [data-hm-zone-text] { fill: var(--d-text); }
/* תווית הקוד — שלנו (אין רקע מפה שמזהה מבנה): הילה בצבע המפה, כדי שתיקרא גם מעל טבעת וליד נקודה אחרת. */
.dan-map [data-hm-label] { fill: var(--d-text); paint-order: stroke; stroke: var(--dm-map); stroke-width: 3px; stroke-linejoin: round; }
/* §8 · סימן מיקוד: `outline` על ה-`<g>` (ui-keyboard מודד אותו), ובנוסף גבול כהה לסמן עצמו — דפדפן שאינו מצייר outline על SVG עדיין מראה היכן המיקוד. */
.dan-map [data-hm-dot]:focus-visible { outline: 2px solid var(--d-ink); outline-offset: 3px; }
.dan-map [data-hm-dot]:focus-visible [data-hm-circle] { stroke: var(--d-ink); stroke-width: 3; }

/* בקרות הזום — כמו `L.control.zoom` של Leaflet, בלי leaflet.css. ⚠️ `left` פיזי: ה-container של Leaflet הוא ltr גם בדף RTL. */
.dan-map .dmap-zoom { position: absolute; top: 10px; left: 10px; z-index: 5; display: flex; flex-direction: column;
  border: 2px solid rgba(0,0,0,.2); border-radius: 4px; background-clip: padding-box; overflow: hidden; background: #fff; }
.dan-map .dmap-zoom button { width: 30px; height: 30px; padding: 0; border: 0; background: #fff; color: var(--d-text);
  font: 700 20px/30px var(--font); text-align: center; cursor: pointer; display: block; }
.dan-map .dmap-zoom button + button { border-top: 1px solid #ccc; }
.dan-map .dmap-zoom button:hover { background: #F4F4F4; }
.dan-map .dmap-zoom button[aria-disabled="true"] { cursor: default; background: #F4F4F4; color: var(--d-muted); }
.dan-map .dmap-zoom button:focus-visible { outline: 2px solid var(--d-green); outline-offset: -2px; }

.dan-map .credit { font-size: 12.5px; color: var(--d-faint); line-height: 1.6; margin: 0; }
.dan-map .credit a { color: var(--d-muted); text-decoration: underline; }

/* ---------- מצב ריק ---------- */
.dan-map .dempty { background: #fff; border-radius: 16px; padding: 26px; text-align: center; color: var(--d-muted);
  box-shadow: var(--d-shadow); line-height: 1.7; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dan-map .dempty a:not(.dbtn) { color: var(--d-green); text-decoration: underline; }
/* בתוך כרטיס/לשונית (דן: `.empty` שם הוא אותו כרטיס, בלי צל כפול) */
.dan-map .kit-dialog .dempty { box-shadow: none; background: var(--d-cream2); padding: 18px; }

/* ---------- הרשימה (שלנו — ראו כותרת): כרטיס בשפת דן ---------- */
.dan-map .dcard { background: #fff; border-radius: 22px; padding: 26px 28px; box-shadow: var(--d-shadow);
  display: flex; flex-direction: column; gap: 18px; }
.dan-map .dcard h2 { font-size: 18px; font-weight: 600; color: var(--d-ink); margin: 0; }
.dan-map .cardhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- תוכן הדיאלוגים (המעטפת היא kit-dialog) ---------- */
.dan-map .pills { display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
.dan-map .dpill { font-size: 12.5px; border-radius: 999px; padding: 3px 10px; background: var(--d-mint);
  color: var(--d-green-dark); white-space: nowrap; }
.dan-map .dpill.warn { background: var(--d-orange-soft); color: var(--d-orange-ink); }
.dan-map .dpill.mute { background: #F1EFE8; color: var(--d-muted); }
.dan-map .dpill.bad { background: #FDECEA; color: #8E2A20; }
.dan-map .prow { background: var(--d-cream2); border-radius: 12px; padding: 11px 14px; font-size: 14px;
  display: flex; flex-direction: column; gap: 6px; }
.dan-map .prow .ptop { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.dan-map .prow .ptop b { font-size: 15px; color: var(--d-ink); }
.dan-map .prow .psub { font-size: 13px; color: var(--d-muted); line-height: 1.6; }
.dan-map .prows { display: flex; flex-direction: column; gap: 8px; }
/* ⚠️ `auto-fit` ולא `1fr 1fr` + media query: רוחב הדיאלוג תלוי בחלון ולא ברוחב המסך, ו-container query על `.dan-map` לא היה מודד אותו. */
.dan-map .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 10px 16px; }
.dan-map .fact { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.dan-map .fact b { font-size: 12.5px; color: var(--d-faint); font-weight: 400; }
.dan-map .tabs { display: flex; gap: 6px; border-bottom: 1px solid #E6EEE8; margin-bottom: 4px; flex-wrap: wrap; }
.dan-map .tabs button { font-family: inherit; font-size: 14.5px; border: 0; background: none; padding: 9px 14px;
  cursor: pointer; color: var(--d-muted); border-bottom: 2px solid transparent; }
.dan-map .tabs button.on { color: var(--d-green-dark); font-weight: 600; border-bottom-color: var(--d-green); }
.dan-map .drows { display: flex; flex-direction: column; gap: 8px; }
.dan-map .drow { background: var(--d-cream2); border-radius: 12px; padding: 10px 14px; font-size: 14px;
  display: flex; flex-direction: column; gap: 6px; }
.dan-map .drow .top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.dan-map .drow .sub { font-size: 13px; color: var(--d-muted); }
.dan-map .drow .sub.warn { color: var(--d-orange-ink); font-weight: 500; }
.dan-map .people { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.dan-map .person { background: #fff; border: 1px solid #E6EEE8; border-radius: 999px; padding: 4px 10px; font-size: 13px;
  display: flex; align-items: center; gap: 6px; }
.dan-map .drow .acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding-top: 2px; }
/* כותרת מסמך = הקישור להורדה (דן: `<a><b>titleHe</b></a>`). כפתור, כי ההורדה עוברת fetch עם בדיקת הרשאה — ונראה כמו הקישור של דן. */
.dan-map .drow .dtitle { font: inherit; color: var(--d-green); background: none; border: 0; padding: 0; cursor: pointer;
  text-align: start; text-decoration: underline; }
.dan-map .drow .dtitle:hover { color: var(--d-orange-ink); }
.dan-map .drow .dtitle:focus-visible { outline: 2px solid var(--d-green); outline-offset: 2px; border-radius: 3px; }

/* ---------- שבירות ----------
   ⚠️ כולן על רוחב `.dan-map` (container), חוץ ממה שבתוך המסך המלא (media — ראו ⑤ למעלה). */
@container dmap (max-width: 700px) {
  .dan-map .kpis { gap: 8px; }
  .dan-map .kpi { padding: 11px 12px; }
  .dan-map .kpi .v { font-size: 20px; }
  .dan-map .kpi .l, .dan-map .kpi .s { font-size: 11.5px; line-height: 1.35; }
  .dan-map .dalert { flex-basis: 100%; min-width: 0; }
  .dan-map .dcard { padding: 22px 20px; }
  .dan-map .mapwrap { height: 58vh; }
}
@supports (height: 1svh) {
  @container dmap (max-width: 700px) { .dan-map .mapwrap { height: 58svh; } }
}

/* ---------- מסך מלא (דן: `body.mapfull`) ----------
   ⚠️ **סטייה מדן, מכוונת:** בדן שורת הבוררים צפה מעל המפה (`position:absolute`) ומסתירה את מה שמתחתיה; כאן `.mapwrap` הוא עמודה — השורה
   מעל, והבמה (`.dmap-stage`) ממלאת את כל השאר — ולכן אף נקודה אינה מוסתרת, וגובה השורה (שנשברת לכמה שורות בצר) אינו מספר קסם. */
.dan-map.is-full .mapwrap { position: fixed; inset: 0; z-index: 900; border-radius: 0; height: auto; box-shadow: none;
  display: flex; flex-direction: column; }
.dan-map.is-full .mapwrap > .dbar { flex: none; margin: 12px 12px 0; padding: 10px 12px; border-radius: 14px; background: #fff;
  box-shadow: 0 6px 24px rgba(16,42,32,.18); position: relative; z-index: 1; }
.dan-map.is-full .dmap-stage { position: relative; inset: auto; flex: 1 1 0; min-height: 0; margin-top: 12px; }
@media (max-width: 820px) {
  .dan-map.is-full .mapwrap > .dbar { margin: 8px 8px 0; padding: 8px; gap: 6px; }
  .dan-map.is-full .mapwrap > .dbar select { font-size: 13.5px; padding: 7px 9px; }
  .dan-map.is-full .dmap-stage { margin-top: 8px; }
}