/* src/app/dan/branch-dashboard.css — לוח הענף: העיצוב של דן, מועתק.
 * מקור: legacy/community/branch-dashboard.html (ה-<style> שלו, כלל אחר כלל)
 * מסכים: src/app/screens/branch.js — כל אחד עוטף את עצמו ב-`<div class="dan dan-<מודול>">`.
 * הנוהל: docs/runbooks/dan-design-port.md · הפלטה (`--d-*`): src/app/dan/dan.css.
 *
 * 🔴 01.10 · גיל: "תעתיק גם את הלוגיקה והפונקציונליות בדף וגם את העיצוב של כל המסכים, פשוט העתקה ממקום למקום".
 *
 * ⚠️ מה שונה מהמקור, ולמה — ארבעה דברים בלבד:
 *  ① **אין `:root` · `body` · `main` · `*{box-sizing}`** — המעטפת והטוקנים הם ההצהרה היחידה; הפלטה ב-dan.css. כל כלל
 *     מקבל את הקידומת `.dan-branch`.
 *  ② **שמות שמתנגשים עם המעטפת (`packages/ui` · kit.css) הוחלפו** — `alert`⟶`balert` · `card`⟶`bcard` · `row`⟶`brow` ·
 *     `topbar`⟶`btop` · `bars`⟶`bbars` · `bar`⟶`bbar` · `tag`⟶`btag`. מחלקה לא-תחומה באותו שם יורשת בשקט את הכללים שלהן
 *     (`.topbar` של המעטפת הפך כותרת לפס לבן sticky ב-/community).
 *  ③ **ניגודיות AA** — `--d-dim` (#A3ACA5, 2.2:1 על לבן) נשאר לקווים ולנקודות, **לא לטקסט**: תוויות היעד (`←`), כותרות
 *     הטבלה, האפס בלוח החוזים ואריח "בלי סיווג" עברו ל-`--d-muted`. טקסט בהיר על ירוק (`#CFE9DA`, 4.1:1) הוכהה ל-mint
 *     (4.7:1); `opacity:.75/.85` על טקסט הוסר (3.8:1); כתום (#E07A3F) כטקסט או כרקע ל"!" ⟶ `--d-orange-ink`.
 *  ④ **container query ולא media query** — הרוחב תלוי במעטפת (סרגל פתוח/סגור · max-w), לא בחלון. ה-`min-width` של דן
 *     (`.alert` 300px · `.att-grid` 310px) הוא בדיוק הגלילה האופקית ש-ui-viewport תופס ב-375.
 * ⛔ **נשמטו כללי CSS מתים בדן** — `.teams` · `.teamlist` · `.venues` (שרידי culture.html: אף JS בדף אינו פולט אותם),
 *    `.money` (כרטיס "הכנסה משכר דירה": אין לו מקור — branch-overview.mjs), `.cnt-edit` (עריכת ספירת ילדים: אין נקודת קצה),
 *    `.occ-tile.com` (נכס "מובטח": אין מקור).
 */

.dan-branch {
  container: dbranch / inline-size;
  display: flex; flex-direction: column; gap: 22px;
  color: var(--d-text);
}
.dan-branch a { color: var(--d-green); text-decoration: none; }
.dan-branch a:hover { color: var(--d-orange-ink); }

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

/* ---------- התראות ---------- */
.dan-branch .alerts { display: flex; gap: 12px; flex-wrap: wrap; }
.dan-branch .balert { 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-branch .balert.warn { background: var(--d-orange-soft); color: var(--d-orange-ink); }
.dan-branch .balert.warn .ic { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--d-orange-ink); color: #fff;
  font-weight: 700; display: grid; place-items: center; font-size: 14px; }
.dan-branch .balert.plain { background: #fff; border: 1px solid var(--d-line); color: var(--d-body); }
.dan-branch .balert.plain .ic { width: 24px; height: 24px; flex: none; border-radius: 50%; background: #EAF2EC; color: var(--d-green);
  font-weight: 700; display: grid; place-items: center; font-size: 13px; }
.dan-branch .balert:hover { color: inherit; }
.dan-branch .balert.warn:hover { color: var(--d-orange-ink); }

/* ---------- אריחי KPI ---------- */
.dan-branch .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dan-branch .kpi { background: #fff; border-radius: 18px; padding: 20px 22px; box-shadow: var(--d-shadow);
  display: flex; flex-direction: column; gap: 6px; }
.dan-branch .kpi .l { font-size: 14px; color: var(--d-faint); }
.dan-branch .kpi .v { font-size: 30px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; }
.dan-branch .kpi .s { font-size: 13.5px; color: var(--d-green); }
.dan-branch .kpi .s.warn { color: var(--d-orange-ink); }
.dan-branch .kpi .s.mute { color: var(--d-faint); }

/* ---------- שלד: שורה של שני כרטיסים ----------
   ⚠️ **פריט ב-grid לעולם אינו צר מ-min-content שלו**, כי min-width שלו הוא auto — ולכן טבלה בת חמש עמודות בתוך כרטיס
   דוחפת את הטור כולו אל מעבר לרוחב המסך (נמדד בדן ב-375px: כרטיס של 398.6px בתוך שורה של 339px). */
.dan-branch .brow { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; align-items: start; }
.dan-branch .brow > * { min-width: 0; }
.dan-branch .brow.one { grid-template-columns: 1fr; }
.dan-branch .bcard { background: #fff; border-radius: 22px; padding: 26px 28px; box-shadow: var(--d-shadow);
  display: flex; flex-direction: column; gap: 18px; }
.dan-branch .bcard h2 { font-size: 18px; font-weight: 600; color: var(--d-ink); margin: 0; }
.dan-branch .cardhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dan-branch .cardhead a { font-size: 14.5px; }
.dan-branch .secthead { margin-bottom: 14px; }
.dan-branch .bsection { display: flex; flex-direction: column; gap: 20px; }
.dan-branch .bsection > .secthead { margin-bottom: 0; }
.dan-branch .cardtools { display: flex; align-items: center; gap: 12px; }
.dan-branch .faint { color: var(--d-faint); }
.dan-branch .blink { padding: 6px 0; font-size: 14.5px; }
.dan-branch .secthead h2 { font-size: 18px; font-weight: 600; color: var(--d-ink); margin: 0; }
.dan-branch .seclinks { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14.5px; }
.dan-branch .pill-ok { font-size: 13.5px; font-weight: 500; color: var(--d-green-dark); background: var(--d-mint); border-radius: 999px; padding: 4px 11px; }
.dan-branch .pill-warn { font-size: 13px; font-weight: 600; color: var(--d-orange-ink); background: var(--d-orange-soft); border-radius: 999px; padding: 3px 10px; }
.dan-branch .bsub { font-size: 14px; color: var(--d-faint); margin-top: 4px; }
.dan-branch .bsub.inl { margin: 0; }
.dan-branch .bnote { font-size: 12.5px; color: var(--d-faint); line-height: 1.6; margin: 0; }

/* ---------- אירועים קרובים ---------- */
.dan-branch .ev { display: flex; gap: 16px; align-items: center; background: var(--d-cream2); border-radius: 16px; padding: 16px 18px; }
.dan-branch .ev.hl { background: var(--d-orange-soft); }
.dan-branch .ev .date { width: 60px; flex: none; background: #fff; border-radius: 12px; padding: 8px 0; text-align: center; }
.dan-branch .ev .date b { display: block; font-size: 21px; font-weight: 600; color: var(--d-green); line-height: 1.1; }
.dan-branch .ev .date span { font-size: 12.5px; color: var(--d-faint); }
.dan-branch .ev.hl .date b { color: var(--d-orange-ink); }
.dan-branch .ev.hl .date span { color: var(--d-orange-ink); }
.dan-branch .ev .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dan-branch .ev .n { font-size: 17px; font-weight: 500; color: var(--d-text); }
.dan-branch .ev .s { font-size: 14.5px; color: var(--d-muted); }
.dan-branch .ev.hl .s { color: var(--d-orange-ink); }
.dan-branch .ev .cnt { flex: none; text-align: start; display: flex; flex-direction: column; gap: 2px; }
.dan-branch .ev .cnt b { font-size: 17px; font-weight: 600; color: var(--d-green); }
.dan-branch .ev .cnt span { font-size: 13px; color: var(--d-faint); }
.dan-branch .ev.hl .cnt b { color: var(--d-orange-ink); }
.dan-branch .ev.hl .cnt span { color: var(--d-orange-ink); }
.dan-branch a.ev:hover .n { color: var(--d-green); }
.dan-branch .evlist { display: flex; flex-direction: column; gap: 12px; }

/* ---------- נכסים שדורשים טיפול ----------
   ⚠️ **כרטיס לנכס, לא שורה להתראה** — והשורות הן קישורים, לא ראש המסך (דן). */
.dan-branch .att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); gap: 14px; align-items: start; }
.dan-branch .att { background: #fff; border-radius: 18px; box-shadow: var(--d-shadow); border-top: 4px solid var(--d-sage); overflow: hidden; }
.dan-branch .att.bad { border-top-color: #C0392B; }
.dan-branch .att.warn { border-top-color: var(--d-orange); }
.dan-branch .att.mute { border-top-color: #D5D2C6; }
.dan-branch .att-h { display: flex; align-items: center; gap: 10px; padding: 14px 18px 12px; color: var(--d-ink); }
.dan-branch .att-h:hover { color: var(--d-ink); background: #FBFAF5; }
.dan-branch .att-h .code { font-size: 21px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; flex: none; }
.dan-branch .att-h .place { font-size: 13.5px; color: var(--d-faint); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dan-branch .att-h .go { font-size: 15px; color: var(--d-muted); flex: none; }
.dan-branch .att-h:hover .go { color: var(--d-green); }
.dan-branch .att-i { display: flex; align-items: flex-start; gap: 9px; padding: 11px 18px; font-size: 14.5px; line-height: 1.45;
  color: var(--d-body); border-top: 1px solid var(--d-line-soft); }
.dan-branch .att-i:hover { background: var(--d-cream2); color: var(--d-ink); }
.dan-branch .att-i i { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 6px; background: var(--d-dim); }
.dan-branch .att-i.bad i { background: #C0392B; }
.dan-branch .att-i.warn i { background: var(--d-orange); }
.dan-branch .att-i .t { flex: 1; min-width: 0; }
.dan-branch .att-i .to { flex: none; font-size: 12.5px; color: var(--d-muted); white-space: nowrap; margin-top: 2px; }
.dan-branch .att-i:hover .to { color: var(--d-green); }

/* ---------- פערים במרשם — שורות סיכום, לא כרטיס-לכל-נכס ---------- */
.dan-branch .att-sub { font-size: 13.5px; font-weight: 600; color: var(--d-faint); margin: 2px 0 10px; letter-spacing: .01em; }
.dan-branch .att-sub:not(:first-child) { margin-top: 18px; }
.dan-branch .gap-list { display: flex; flex-direction: column; gap: 12px; }
.dan-branch .gap-row { display: flex; flex-direction: column; background: var(--d-cream2); border-radius: 14px; overflow: hidden; }
.dan-branch .gap-hit { display: flex; flex-direction: column; gap: 7px; padding: 14px 16px; color: inherit; text-decoration: none; }
.dan-branch .gap-hit:hover { background: var(--d-orange-soft); color: inherit; }
.dan-branch .gap-row .gh { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dan-branch .gap-row .gh b { font-size: 21px; font-weight: 600; color: var(--d-orange-ink); letter-spacing: -.01em; }
.dan-branch .gap-row .gh span { font-size: 14.5px; color: var(--d-body); }
.dan-branch .gap-row .gh .to { margin-inline-start: auto; flex: none; font-size: 12.5px; color: var(--d-muted); white-space: nowrap; }
.dan-branch .gap-hit:hover .gh .to { color: var(--d-orange-ink); }
.dan-branch .gap-row .gs { font-size: 13px; color: var(--d-faint); }
.dan-branch .gap-row .bar-track { height: 6px; }
.dan-branch .gap-row .bar-track i { background: var(--d-orange); }

/* ---------- הנכסים · מצב נוכחי — אריח לדירה, לא אחוז בודד ---------- */
.dan-branch .occ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 8px; }
.dan-branch .occ-tile { border-radius: 12px; padding: 9px 10px; display: flex; flex-direction: column; gap: 2px; min-height: 60px;
  justify-content: center; text-decoration: none; cursor: pointer; transition: transform .1s; }
.dan-branch .occ-tile:hover { transform: translateY(-1px); }
.dan-branch .occ-tile .c { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.dan-branch .occ-tile .m { font-size: 11.5px; line-height: 1.3; }
.dan-branch .occ-tile.occ { background: var(--d-green); color: #fff; }
.dan-branch .occ-tile.occ:hover { color: #fff; }
.dan-branch .occ-tile.occ .m { color: var(--d-mint); }
.dan-branch .occ-tile.vac { background: var(--d-mint); color: var(--d-green-dark); }
.dan-branch .occ-tile.vac:hover { color: var(--d-green-dark); }
.dan-branch .occ-tile.vac .m { color: var(--d-green-dark); }
.dan-branch .occ-tile.reno { background: var(--d-orange-soft); color: var(--d-orange-ink); }
.dan-branch .occ-tile.other { background: var(--d-track); color: var(--d-muted); }
.dan-branch .occ-tile.unc { background: transparent; border: 1.5px dashed var(--d-line); color: var(--d-muted); }
.dan-branch .occ-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--d-faint); }
.dan-branch .occ-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dan-branch .occ-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.dan-branch .occ-legend i.occ { background: var(--d-green); }
.dan-branch .occ-legend i.vac { background: var(--d-mint); border: 1px solid var(--d-green-dark); }
.dan-branch .occ-legend i.reno { background: var(--d-orange-soft); border: 1px solid var(--d-sand); }
.dan-branch .occ-legend i.other { background: var(--d-track); border: 1px solid var(--d-line); }
.dan-branch .occ-legend i.unc { background: none; border: 1.5px dashed var(--d-dim); }
.dan-branch .occ-big { display: flex; align-items: baseline; gap: 10px; }
.dan-branch .occ-big b { font-size: 30px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; }
.dan-branch .occ-big span { font-size: 14.5px; color: var(--d-faint); }

/* ---------- לוח פקיעת החוזים — שנים־עשר חודשים מתגלגלים ----------
   ⚠️ הצבע כאן מסמן עומס ולא מצב: חודש בלי סיומים נשאר שקוף, וחודש עם מועד הודעה נושא נקודה כתומה — שתי הספירות אינן
   אותו דבר וגם אינן אמורות להיראות אותו דבר. ⛔ התאים אינם קישורים: מסך הנכסים אינו מסנן לפי `?month=`. */
.dan-branch .mon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 7px; }
.dan-branch .mon { border-radius: 11px; min-height: 62px; display: flex; flex-direction: column; border: 1.5px solid transparent; overflow: hidden; }
.dan-branch .mon-hit { flex: 1; padding: 8px 9px; display: flex; flex-direction: column; justify-content: space-between; gap: 2px; color: inherit; }
.dan-branch .mon.has-nt .mon-hit { padding-bottom: 2px; }
.dan-branch .mon .m { font-size: 11.5px; color: var(--d-faint); line-height: 1.2; }
.dan-branch .mon .n { font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.dan-branch .mon .nt { font-size: 11px; display: flex; align-items: center; gap: 4px; line-height: 1.2; }
.dan-branch .mon-nt { padding: 0 9px 8px; color: inherit; }
.dan-branch .mon-nt .nt { color: var(--d-orange-ink); }
.dan-branch .mon.heavy .nt { color: var(--d-orange-soft); }
.dan-branch .mon .nt i { width: 6px; height: 6px; border-radius: 99px; background: var(--d-sand); flex: none; }
.dan-branch .mon.zero { border-color: var(--d-line); }
.dan-branch .mon.zero .n { color: var(--d-muted); font-weight: 400; }
.dan-branch .mon.some { background: var(--d-mint); color: var(--d-green-dark); }
.dan-branch .mon.some .m { color: var(--d-green-dark); }
.dan-branch .mon.heavy { background: var(--d-green); color: #fff; }
.dan-branch .mon.heavy .m { color: var(--d-mint); }
.dan-branch .mon.now { box-shadow: 0 0 0 2px var(--d-green-mid); }
.dan-branch .mon-note { font-size: 12.5px; color: var(--d-faint); line-height: 1.6; }

/* ---------- שלמות המרשם — אותו bar-track כמו כרטיס התקציב ---------- */
.dan-branch .compl { display: flex; flex-direction: column; gap: 13px; }
.dan-branch .compl .b { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit;
  cursor: pointer; border-radius: 8px; margin: -6px; padding: 6px; }
.dan-branch .compl .b:hover { background: var(--d-cream2); color: inherit; }
.dan-branch .compl .t { display: flex; justify-content: space-between; font-size: 14.5px; }
.dan-branch .compl .t span:first-child { color: var(--d-body); }
.dan-branch .compl .t span:last-child { color: var(--d-muted); }
.dan-branch .compl-note { font-size: 12.5px; color: var(--d-faint); line-height: 1.6; border-top: 1px solid var(--d-line-soft); padding-top: 13px; }

/* ---------- בתי הילדים / יחידות הענף ---------- */
.dan-branch .houses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dan-branch .houses > * { min-width: 0; }
.dan-branch .house { background: #fff; border-radius: 20px; padding: 20px 22px; box-shadow: var(--d-shadow); display: flex;
  flex-direction: column; gap: 14px; border-top: 4px solid var(--d-green-mid); }
.dan-branch .house.warn { border-top-color: var(--d-orange); }
.dan-branch .house .hh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dan-branch .house .hn { font-size: 19px; font-weight: 600; color: var(--d-ink); }
.dan-branch .house .ha { font-size: 13px; color: var(--d-faint); }
.dan-branch .house .num { display: flex; align-items: baseline; gap: 6px; width: 100%; }
.dan-branch .house .num b { font-size: 28px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; line-height: 1; }
.dan-branch .house .num span { font-size: 14px; color: var(--d-muted); }
.dan-branch .house .bar-track { height: 7px; background: var(--d-track); border-radius: 999px; overflow: hidden; }
.dan-branch .house .bar-track i { display: block; height: 100%; background: var(--d-green-mid); border-radius: 999px; }
.dan-branch .house.warn .bar-track i { background: var(--d-orange); }
.dan-branch .house .cap { font-size: 13px; color: var(--d-faint); }
.dan-branch .house .staff { border-top: 1px solid var(--d-line-soft); padding-top: 13px; display: flex; flex-direction: column; gap: 7px; }
.dan-branch .house .staff div { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.dan-branch .house .staff span:first-child { color: var(--d-faint); }
.dan-branch .house .staff span:last-child { color: var(--d-body); }
.dan-branch .house .staff div.hl span:last-child { color: var(--d-orange-ink); font-weight: 500; }
.dan-branch .house .foot { font-size: 13.5px; color: var(--d-green-dark); background: var(--d-mint); border-radius: 10px; padding: 8px 11px; line-height: 1.4; }
.dan-branch .house.warn .foot { color: var(--d-orange-ink); background: var(--d-orange-soft); }

/* ---------- טבלאות ---------- */
.dan-branch table { width: 100%; border-collapse: collapse; }
.dan-branch th { text-align: start; font-size: 13px; font-weight: 500; color: var(--d-muted); padding: 0 10px 11px; letter-spacing: .02em; border-bottom: 1px solid var(--d-line-soft); }
.dan-branch td { font-size: 14.5px; padding: 13px 10px; border-bottom: 1px solid #F6F3EA; color: var(--d-body); }
.dan-branch tr:last-child td { border-bottom: 0; }
/* טבלה רחבה גוללת בתוך הכרטיס שלה במקום להרחיב את הדף (דן: min-content של טבלת קריאות השירות 342px, והכרטיס במובייל 283). */
.dan-branch .wrap { overflow-x: auto; }
.dan-branch tr[data-href] { cursor: pointer; }
.dan-branch tr[data-href]:hover td { background: var(--d-cream2); }
.dan-branch td.nm { font-weight: 500; color: var(--d-text); }
/* כרטיס "חוזים לקראת סיום" — a במקום div, כי כל שורה מקשרת לנכס שלה. display:block כי a הוא inline כברירת מחדל. */
.dan-branch a.explink { display: block; text-decoration: none; color: inherit; cursor: pointer; border-radius: 10px; margin: -8px; padding: 8px; }
.dan-branch a.explink:hover { background: var(--d-cream2); color: inherit; }
.dan-branch .exlist { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.dan-branch .exhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.dan-branch .exhead b { font-weight: 600; color: var(--d-ink); }
.dan-branch .exhead b em { font-style: normal; font-weight: 400; color: var(--d-faint); }
.dan-branch .exhead span { font-size: 13.5px; color: var(--d-faint); }
.dan-branch .exfoot { font-size: 13px; color: var(--d-faint); margin-top: 5px; }
.dan-branch select.mini { font-family: inherit; font-size: 13px; padding: 6px 10px; border: 1px solid #D8E3DA; border-radius: 10px; background: #fff; color: var(--d-text); }
.dan-branch .btag { display: inline-block; font-size: 12.5px; font-weight: 500; border-radius: 999px; padding: 3px 10px; color: var(--d-body); background: var(--d-track); }
.dan-branch .ok { font-size: 13.5px; color: var(--d-green); }
.dan-branch .no { font-size: 13.5px; font-weight: 500; color: var(--d-orange-ink); }
.dan-branch .na { font-size: 13.5px; color: var(--d-faint); }

/* ---------- תקציב ---------- */
.dan-branch .figures { display: flex; gap: 18px; flex-wrap: wrap; }
.dan-branch .figures div { display: flex; flex-direction: column; gap: 3px; }
.dan-branch .figures span:first-child { font-size: 13.5px; color: var(--d-faint); }
.dan-branch .figures span:last-child { font-size: 24px; font-weight: 600; }
.dan-branch .figures .ink { color: var(--d-ink); }
.dan-branch .figures .used { color: var(--d-green); }
.dan-branch .figures .over { color: var(--d-orange-ink); }
.dan-branch .pacebox { display: flex; flex-direction: column; gap: 8px; }
.dan-branch .paceline { height: 12px; background: var(--d-track); border-radius: 999px; overflow: hidden; position: relative; }
.dan-branch .paceline i { display: block; height: 100%; background: var(--d-green); border-radius: 999px; }
.dan-branch .paceline u { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--d-dim); }
.dan-branch .pacelabels { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--d-faint); }

.dan-branch .brnch { display: flex; flex-direction: column; gap: 13px; border-top: 1px solid var(--d-line-soft); padding-top: 16px; }
.dan-branch .brnch .b { display: flex; flex-direction: column; gap: 6px; }
.dan-branch .brnch .t { display: flex; justify-content: space-between; font-size: 14.5px; }
.dan-branch .brnch .t span:first-child { color: var(--d-body); }
.dan-branch .brnch .t span:last-child { color: var(--d-muted); }
.dan-branch .brnch .t.over span:last-child { color: var(--d-orange-ink); }
.dan-branch .bar-track { height: 8px; background: var(--d-track); border-radius: 999px; overflow: hidden; }
.dan-branch .bar-track i { display: block; height: 100%; background: var(--d-green); border-radius: 999px; }
.dan-branch .bar-track i.mid { background: var(--d-green-mid); }
.dan-branch .bar-track i.warn { background: var(--d-orange); }
.dan-branch .brnch-empty { font-size: 14.5px; color: var(--d-faint); line-height: 1.7; }

/* ---------- הוצאות הענף לפי חודש ----------
   ⚠️ **התווית על העמודה מעוגלת לאלפים, והחלונית היא מה שמחזיר את המספר.** ״68״ הוא ₪67,600 — ובחודש עם ₪400 היא אפילו
   כותבת ״0״. CSS בלבד ובלי ספרייה: opacity על אלמנט שקיים תמיד; גם :focus-visible ולא רק :hover (מקלדת מקבלת אותו מידע).
   ⚠️ מעוגנת לראש העמודה (בתוך `.bbar`), ושתי העמודות בכל קצה נצמדות פנימה — חלונית רחבה פי כמה מהעמודה, ומרכוז שלה על
   עמודה קיצונית שולח אותה אל מחוץ לכרטיס. עמודה גבוהה (`.tall`) הופכת את החלונית פנימה, והיפוך מחייב גם היפוך צבע.
   ⚠️ **הכיוון תוקן ביחס לדן:** ב-RTL שתי העמודות הראשונות (ינואר · פברואר) יושבות בקצה הימני, ולכן הן מעגנות את החלונית
   בצד **ההתחלה** (`inset-inline-start`, ימין) והיא נפרשת שמאלה, פנימה; בדן הכלל הפוך ומעגן אותן משמאל, כלומר פורש ימינה, החוצה. */
.dan-branch .bbars { display: flex; align-items: flex-end; gap: 9px; height: 172px; }
.dan-branch .bbars .col { flex: 1; min-width: 0; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: end;
  gap: 7px; height: 100%; position: relative; color: inherit; text-decoration: none; }
.dan-branch .bbars a.col:hover .bbar { background: var(--d-green-dark); }
.dan-branch .bbars a.col:hover { color: inherit; }
.dan-branch .bbars .val { font-size: 11.5px; color: var(--d-faint); }
.dan-branch .bbars .bbar { position: relative; width: 100%; max-width: 32px; background: var(--d-green); border-radius: 8px 8px 3px 3px; }
.dan-branch .bbars .m { font-size: 12px; color: var(--d-muted); }
.dan-branch .bbars .col.peak .val { color: var(--d-ink); font-weight: 500; }
.dan-branch .bbars .col.peak .bbar { background: var(--d-green-dark); }
.dan-branch .bbars .tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 5;
  opacity: 0; pointer-events: none; transition: opacity .12s; background: var(--d-ink); color: #fff; font-size: 12.5px; line-height: 1.45;
  white-space: nowrap; text-align: start; padding: 7px 11px; border-radius: 10px; box-shadow: 0 6px 18px rgba(16,42,32,.18); }
.dan-branch .bbars .tip b { display: block; font-weight: 400; font-size: 11.5px; color: #B9CBC1; }
.dan-branch .bbars a.col:hover .tip, .dan-branch .bbars a.col:focus-visible .tip { opacity: 1; }
.dan-branch .bbars a.col:focus-visible { outline: 2px solid var(--d-green); outline-offset: 2px; border-radius: 6px; }
.dan-branch .bbars .col:nth-child(-n+2) .tip { inset-inline-start: -4px; inset-inline-end: auto; transform: none; }
.dan-branch .bbars .col:nth-last-child(-n+2) .tip { inset-inline-start: auto; inset-inline-end: -4px; transform: none; }
.dan-branch .bbars .col.tall .tip { bottom: auto; top: 6px; background: #fff; color: var(--d-ink); box-shadow: 0 6px 18px rgba(16,42,32,.22); }
.dan-branch .bbars .col.tall .tip b { color: var(--d-faint); }
.dan-branch .mtotal { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dan-branch .mtotal .k { font-size: 15px; color: var(--d-muted); }
.dan-branch .mtotal .v { font-size: 21px; font-weight: 600; color: var(--d-ink); }

/* ---------- דורש אותך · פניות לענף — שורות של כרטיס ---------- */
.dan-branch .todo { display: flex; flex-direction: column; gap: 12px; }
.dan-branch .todo .t { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #F4F1E7; padding-bottom: 12px; color: inherit; }
.dan-branch .todo .t:last-child { border-bottom: 0; padding-bottom: 0; }
.dan-branch .todo .t:hover { color: inherit; }
.dan-branch .todo .stack { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dan-branch .todo .n { font-size: 15.5px; font-weight: 500; color: var(--d-text); }
.dan-branch .todo .s { font-size: 13.5px; color: var(--d-faint); }
.dan-branch .todo a.t:hover .n { color: var(--d-green); }

/* ---------- שבירות ----------
   ⚠️ ברוחב ה-main (לא החלון): בדן 1200/1280/820 היו רוחבי חלון עם סרגל צד קבוע; כאן המכל הוא התוכן עצמו. */
@container dbranch (max-width: 1000px) {
  .dan-branch .brow { grid-template-columns: 1fr; }
  .dan-branch .kpis { grid-template-columns: repeat(2, 1fr); }
  .dan-branch .houses { grid-template-columns: repeat(2, 1fr); }
}
@container dbranch (max-width: 640px) {
  .dan-branch .balert { min-width: 0; flex-basis: 100%; }
  .dan-branch .houses { grid-template-columns: 1fr; }
  .dan-branch .bcard { padding: 22px 20px; }
}
/* ⚠️ **גם אריח KPI הוא פריט grid, ולכן נופל באותה מלכודת.** ברוחב 375px כל אחד משני הטורים מקבל 162px, ו-min-content של
   ₪890,000 בגופן 30px הוא 194px — הטור מתנפח וגורר את הדף החוצה. clamp ולא מספר קבוע: 24px נכנס ב-375 ולא ב-320. */
@container dbranch (max-width: 560px) {
  .dan-branch .kpis > * { min-width: 0; }
  .dan-branch .kpi { padding: 16px 14px; }
  .dan-branch .kpi .v { font-size: clamp(19px, 6.4vw, 24px); }
}
/* ⚠️ `gap:0` במסך צר — החלטת מגע: שנים־עשר יעדים חייבים להתחלק ב-283px (23.6px לכל אחד), ומרווח של 4px בין עמודות הוא
   4px שבהם הנגיעה אינה פוגעת בכלום. התוויות מתחלפות בין שתי שורות (אין רוחב שבו 12 שמות חודש נכנסים בשורה אחת). */
@container dbranch (max-width: 520px) {
  .dan-branch .bbars { gap: 0; margin-bottom: 14px; }
  .dan-branch .bbars .col { min-width: 0; }
  .dan-branch .bbars .bbar { max-width: 18px; }
  .dan-branch .bbars .col:nth-child(even) .m { transform: translateY(14px); }
}