/* src/app/dan/lessees.css — שוכרים · תבניות חוזה: העיצוב של דן, מועתק.
 * מקור: legacy/community/branch-tenants.html · legacy/community/branch-lease-templates.html
 *   + מה שהם צריכים מ-assets/css/page.css (.topbar · h1 · .kpis/.kpi · table/th/td),
 *   + הסטפר של assets/js/journey-stepper.js (CSS שדן מזריקה מה-JS: `kd-stepper`),
 *   + כרטיסי הפריט והפס היחסי של branch-properties.html (`.it` · `.ih` · `.queue` · `.bar-row`) — שורות החוזים
 *     והיסטוריית השכירות כאן הן מה שהמסך שלנו מוסיף על branch-tenants, ובדן הן חיות בדף הנכסים.
 * מסכים: src/app/screens/housing-lessees.js (`<div class="dan dan-lessees">`) ·
 *        src/app/screens/housing-lease-templates.js (`<div class="dan dan-lease-templates">`).
 * הנוהל: docs/runbooks/dan-design-port.md · הפלטה (`--d-*`): src/app/dan/dan.css.
 *
 * ⚠️ מה שונה מהמקור, ולמה — שמונה דברים בלבד:
 *  ① **כל כלל תחום ל-`.dan-lessees` / `.dan-lease-templates`**, צבעים `var(--d-*)`, בלי `:root` ובלי `[hidden]` גלובלי
 *     (dan.css נושא אותו). #3A4A42 הקשיח ⟶ `var(--d-body)`.
 *  ② **שמות שהתנגשו במעטפת / ב-kit.css קיבלו שם מקומי:** `.btn`⟶`.lbtn` · `.card`⟶`.lcard` · `.pill`⟶`.lpill` ·
 *     `.empty`⟶`.lempty` · `.bar`⟶`.lbar` · `.topbar`⟶`.ltop` · `.tag`⟶`.ltag` · `.ltr`⟶`.lltr`. (`.btn` של המעטפת הוא
 *     כפתור 44px עם padding אחר; `.pill` צובע טקסט; `.empty` מרכז; `.bar` הוא רצועת תקציב — כולם היו נשפכים פנימה.)
 *  ③ **container query ולא media query** — רוחב התוכן תלוי במעטפת (סרגל פתוח/סגור). `@media (max-width:1000px)` /
 *     `900px` / `640px` של דן ⟶ `@container lessees` / `ltpl`. ב-375 אסורה גלילה אופקית (ui-viewport): הטבלה גוללת
 *     בתוך `.tbl` ולא בעמוד.
 *  ④ **הדיאלוגים הם kit-dialog** (`<dialog>` אמיתי, מלכודת מיקוד, Escape, שאלת "לסגור בלי לשמור?") ולא `dialog` בנוי-ביד
 *     כמו בדן — מעטפת הדיאלוג היא של kit.css, וכאן רק התוכן. אותה החלטה כמו manager.css / approvals.css.
 *  ⑤ **שני אפורים הוכהו ל-AA** — `--d-muted`/`--d-faint` (dan.css). וכל זוג צבעים כאן נמדד ≥ 4.5:1: applying 7.47 ·
 *     queued 4.96 · offered 4.64 · assigned 6.48 · active 6.51 · ended 4.67 · left 6.60 · flag 7.34 · ltag 4.79 ·
 *     ltag.shared 4.59 · ltag.off 5.57 · note.warn 5.79 · note.bad 6.71 · note.calm 5.01 · green על לבן 5.34 · דגל הסטפר (#8a3b3b על #fbe9e0) 6.44.
 *  ⑥ **שדות הטפסים (`font-size`)**: 14.5px של דן על מסך רחב, אבל ב-≤640px — 16px, כי מתחת לזה ספארי מזייף זום
 *     (tokens.css: `--fs-input`). וכפתורים/שבבים מקבלים `min-height: 44px` באותו רוחב (§8: יעד מגע).
 *  ⑦ **בחירת שורה בטבלה במקלדת**: ב-`tr.r` של דן הקליק בלבד; כאן שם האדם הוא `<button class="n">` (נראה כטקסט,
 *     מתפקד כפתח) — מקלדת וקורא-מסך מקבלים אותו בחינם, והקליק על השורה כולה נשאר כמו בדן.
 *  ⑧ **סבב תיקון 5 (01.10):** ציר הזמן בחלון האדם (`.kd-tl*`) · טבלת האנשים שומרת רוחב קריא בנייד וגוללת בתוך `.tbl` עם צל קצה · יעדי מגע 44px גם
 *     בטבלה · `kpi:hover` ו"דגלי הסטפר" בצבעי דן, ובלי hover על שבבי השלב (אין בדן) · `.res` מצויר רק כשיש מתגוררים (ה-`:empty` מעולם לא התאים — רווח לבן).
 */

/* ======================================================================== משותף לשני המסכים */
.dan-lessees, .dan-lease-templates { display: flex; flex-direction: column; gap: 22px; color: var(--d-text); }
.dan-lessees { container: lessees / inline-size; }
.dan-lease-templates { container: ltpl / inline-size; }
.dan-lessees a, .dan-lease-templates a { color: var(--d-green); text-decoration: none; }
.dan-lessees a:hover, .dan-lease-templates a:hover { color: var(--d-orange-ink); }

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

/* ---------- כפתורים ---------- */
.dan-lessees .lbtn, .dan-lease-templates .lbtn { 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-lessees .lbtn:hover, .dan-lease-templates .lbtn:hover { background: #F4F8F5; }
.dan-lessees .lbtn.sm, .dan-lease-templates .lbtn.sm { font-size: 13.5px; padding: 7px 13px; }
.dan-lessees .lbtn.solid, .dan-lease-templates .lbtn.solid { background: var(--d-green); color: #fff; border-color: var(--d-green); font-weight: 600; }
.dan-lessees .lbtn.solid:hover, .dan-lease-templates .lbtn.solid:hover { background: var(--d-green-dark); color: #fff; }
.dan-lessees .lbtn.link, .dan-lease-templates .lbtn.link { border: 0; background: none; padding: 6px 8px; color: var(--d-muted); font-size: 13.5px; }
.dan-lessees .lbtn.link:hover, .dan-lease-templates .lbtn.link:hover { color: var(--d-orange-ink); }
.dan-lessees .lbtn[disabled], .dan-lease-templates .lbtn[disabled] { opacity: .45; cursor: default; }

/* ---------- שבבי סינון (`.views` בדן) ----------
   ⚠️ `.chips` / `.chip` הם של המעטפת, והסינון הגנרי של app.js נתלה עליהם — לכן שבבי רשימת החוזים והנוסחים נשארים `.chip` ומקבלים כאן
   את המראה של `.views button` (בורר ספציפי יותר גובר על `.chip` של components.css, כולל `min-height` ו-`:hover`). */
.dan-lessees .views, .dan-lessees .chips, .dan-lease-templates .views, .dan-lease-templates .chips { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.dan-lessees .views button, .dan-lessees .chips .chip, .dan-lease-templates .views button, .dan-lease-templates .chips .chip {
  font-family: inherit; font-size: 14.5px; border: 1px solid #D8E3DA; background: #fff; padding: 8px 14px; min-height: 0; border-radius: 999px;
  cursor: pointer; color: var(--d-muted); font-weight: 400; }
.dan-lessees .chips .chip:hover, .dan-lease-templates .chips .chip:hover { border-color: var(--d-green-mid); }
.dan-lessees .views button[aria-pressed="true"], .dan-lessees .chips .chip[aria-pressed="true"],
.dan-lease-templates .views button[aria-pressed="true"], .dan-lease-templates .chips .chip[aria-pressed="true"] {
  background: var(--d-green); border-color: var(--d-green); color: #fff; font-weight: 600; }
.dan-lessees .chip__n, .dan-lease-templates .chip__n { margin-inline-start: 4px; color: inherit; font-variant-numeric: tabular-nums; }
.dan-lessees .chip__n::before, .dan-lease-templates .chip__n::before { content: "("; }
.dan-lessees .chip__n::after, .dan-lease-templates .chip__n::after { content: ")"; }
.dan-lessees .chips .chip[data-empty="true"], .dan-lease-templates .chips .chip[data-empty="true"] { color: var(--d-muted); }

/* ---------- שורת החיפוש ---------- */
.dan-lessees .lbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.dan-lessees .lbar input, .dan-lessees .lbar select, .dan-lease-templates .lbar input, .dan-lease-templates .lbar select {
  font-family: inherit; font-size: 14.5px; padding: 9px 12px; border: 1px solid #D8E3DA; border-radius: 10px; background: #fff; color: var(--d-text);
  min-height: 0; width: auto; }
.dan-lessees .lbar label { font-size: 13.5px; color: var(--d-muted); }

/* ---------- כרטיס · הודעה · ריק ---------- */
.dan-lessees .lcard, .dan-lease-templates .lcard { background: #fff; border-radius: 16px; box-shadow: var(--d-shadow); padding: 16px 18px; min-width: 0; }
.dan-lessees .lcard h2, .dan-lease-templates .lcard h2 { margin: 0 0 10px; font-size: 14.5px; color: var(--d-ink); font-weight: 600; letter-spacing: 0; }
.dan-lessees .lempty, .dan-lease-templates .lempty { background: #fff; border-radius: 16px; padding: 26px; text-align: center; color: var(--d-muted); box-shadow: var(--d-shadow); line-height: 1.7; }
.dan-lessees .lempty p, .dan-lease-templates .lempty p { margin: 0 0 10px; }
.dan-lessees .lempty p:last-child, .dan-lease-templates .lempty p:last-child { margin-bottom: 0; }
.dan-lessees .note, .dan-lease-templates .note { font-size: 13.5px; border-radius: 10px; padding: 10px 12px; line-height: 1.55; margin-bottom: 13px; }
.dan-lessees .note p, .dan-lease-templates .note p { margin: 4px 0 0; }
.dan-lessees .note.warn, .dan-lease-templates .note.warn { background: #FDF3E3; color: #7A5A12; border: 1px solid #F0DFC0; }
.dan-lessees .note.bad, .dan-lease-templates .note.bad { background: #FBEDED; color: #8A3A3A; border: 1px solid #F0CFCF; }
.dan-lessees .note.calm, .dan-lease-templates .note.calm { background: #F4F8F5; color: var(--d-muted); border: 1px solid #E4EDE7; }
.dan-lessees .note b, .dan-lease-templates .note b, .dan-lessees .note strong, .dan-lease-templates .note strong { font-weight: 600; }
.dan-lessees .lltr, .dan-lease-templates .lltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
/* הודעת המצב החיה של ערכת הכתיבה (kit-status) — מתחת לכותרת, בשורה משלה רק כשיש בה טקסט. */
.dan-lessees .kit-status, .dan-lease-templates .kit-status { font-size: 13.5px; min-height: 0; margin: 0; }
.dan-lessees .kit-status:empty, .dan-lease-templates .kit-status:empty { display: none; }

/* ---------- שדות טופס (kit `field()` בתוך דיאלוג / עורך) ---------- */
.dan-lessees .form-field, .dan-lease-templates .form-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
.dan-lessees .form-field label, .dan-lease-templates .form-field label { font-size: 13.5px; color: var(--d-muted); font-weight: 500; }
.dan-lessees .form-input, .dan-lease-templates .form-input { font-family: inherit; font-size: 14.5px; padding: 9px 12px; border: 1px solid #D8E3DA;
  border-radius: 10px; background: #fff; color: var(--d-text); width: 100%; min-height: 0; }
.dan-lessees .form-input:disabled, .dan-lease-templates .form-input:disabled { background: #F6F8F7; color: var(--d-faint); opacity: 1; }
.dan-lessees .form-input[aria-invalid="true"], .dan-lease-templates .form-input[aria-invalid="true"] { border-color: var(--d-orange); border-width: 2px; }
.dan-lessees .kit-field__hint, .dan-lease-templates .kit-field__hint { font-size: 12.5px; color: var(--d-faint); line-height: 1.5; margin: 0; }
.dan-lessees .kit-field__error, .dan-lease-templates .kit-field__error { font-size: 12.5px; color: var(--d-orange-ink); font-weight: 500; margin: 0; }
/* שגיאת הטופס (kit `formErrorSlotHTML`, מחלקה `.alert` של המעטפת) — המראה של `.note.bad` בדן. */
.dan-lessees [data-kit-form-error], .dan-lease-templates [data-kit-form-error] { display: block; font-size: 13.5px; border-radius: 10px; padding: 10px 12px;
  line-height: 1.55; margin: 0 0 13px; background: #FBEDED; color: #8A3A3A; border: 1px solid #F0CFCF; }
.dan-lessees [data-kit-form-error][hidden], .dan-lease-templates [data-kit-form-error][hidden] { display: none; }
.dan-lessees .lacts, .dan-lease-templates .lacts { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.dan-lessees .kit-dialog__body { color: var(--d-text); }

/* ======================================================================== שוכרים (branch-tenants.html) */

/* ---------- המונים · כל אחד מסנן את הטבלה ---------- */
.dan-lessees .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dan-lessees .kpi { min-width: 0; background: #fff; border-radius: 18px; padding: 20px 22px; box-shadow: var(--d-shadow);
  display: flex; flex-direction: column; gap: 6px; }
.dan-lessees .kpi .l { font-size: 14px; color: var(--d-faint); display: block; }
.dan-lessees .kpi .v { font-size: 30px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; display: block; }
.dan-lessees .kpi .s { font-size: 13.5px; color: var(--d-green); display: block; }
.dan-lessees .kpi .s.warn { color: var(--d-orange-ink); }
.dan-lessees .kpi .s.mute { color: var(--d-faint); }
/* `.kpi` כרטיס משותף (page.css) — כאן הוא כפתור, ולכן איפוס מקומי בלבד. */
.dan-lessees button.kpi { font: inherit; color: inherit; text-align: start; width: 100%; cursor: pointer; border: 1px solid transparent; transition: border-color .12s; }
.dan-lessees button.kpi:hover { border-color: var(--d-cream2); }
.dan-lessees button.kpi[aria-pressed="true"] { border-color: var(--d-green); }
.dan-lessees button.kpi:focus-visible { outline: 2px solid var(--d-green); outline-offset: 2px; }

/* ---------- אנליטיקה: משפך · חציון · סיבות ---------- */
.dan-lessees .ana { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; margin: 4px 0 16px; }
.dan-lessees .funnel { display: flex; gap: 6px; align-items: flex-end; }
.dan-lessees .funnel .st { flex: 1; display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; font-size: 12.5px; color: var(--d-muted); min-width: 0; }
.dan-lessees .funnel .st b { font-size: 22px; color: var(--d-ink); font-weight: 600; }
.dan-lessees .funnel .st i { display: block; width: 100%; border-radius: 6px 6px 0 0; background: var(--d-mint); min-height: 6px; }
.dan-lessees .funnel .st.acc i { background: var(--d-green); }
.dan-lessees .funnel .st.rej i { background: #FDECEA; }
.dan-lessees .funnel-none { margin: 10px 0 0; font-size: 12.5px; color: var(--d-faint); }
.dan-lessees .med { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; font-size: 14px; }
.dan-lessees .med b { display: block; font-size: 20px; color: var(--d-ink); font-weight: 600; }
.dan-lessees .med span { color: var(--d-faint); font-size: 12.5px; }
.dan-lessees .reasons { font-size: 13.5px; display: flex; flex-direction: column; gap: 4px; }
.dan-lessees .reasons > div { display: flex; justify-content: space-between; gap: 8px; }
.dan-lessees .reasons .src { color: var(--d-faint); font-size: 12px; }
.dan-lessees .reasons .none { color: var(--d-faint); display: block; }

/* ---------- גלולות שלב · דגלים ---------- */
.dan-lessees .lpill { font-size: 12.5px; border-radius: 999px; padding: 3px 10px; white-space: nowrap; display: inline-block; background: var(--d-mint); color: var(--d-green-dark); }
.dan-lessees .lpill.applying { background: #EEF3FA; color: #2F4F7A; }
.dan-lessees .lpill.queued { background: var(--d-cream2); color: var(--d-orange-ink); border: 1px solid #F0E4D2; }
.dan-lessees .lpill.offered { background: var(--d-orange-soft); color: var(--d-orange-ink); }
.dan-lessees .lpill.assigned { background: #E6F0F4; color: #1F5B72; }
.dan-lessees .lpill.active { background: var(--d-mint); color: var(--d-green-dark); }
.dan-lessees .lpill.ended { background: #F1EFE8; color: var(--d-muted); }
.dan-lessees .lpill.left { background: #F3EEEE; color: #8A3B3B; }
.dan-lessees .lpill.warn { background: var(--d-orange-soft); color: var(--d-orange-ink); }
.dan-lessees .lpill.bad { background: #FDECEA; color: #8E2A20; }
.dan-lessees .lpill.mute { background: #F1EFE8; color: var(--d-muted); }
.dan-lessees .flag { font-size: 12px; border-radius: 999px; padding: 2px 8px; background: #FDECEA; color: #8E2A20; margin-inline-start: 4px; white-space: nowrap; display: inline-block; }
.dan-lessees .flag.soft { background: #F1EFE8; color: var(--d-muted); }

/* ---------- הטבלה ---------- */
/* ⚠️ מרחיב-את-העמוד: טבלה רחבה מהמסך גוללת בתוך `.tbl` — בלי `overflow:auto` היא הייתה מרחיבה את המסמך כולו (ui-viewport, 375). */
.dan-lessees .tbl { background: #fff; border-radius: 16px; box-shadow: var(--d-shadow); overflow: auto; }
.dan-lessees table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.dan-lessees th { font-weight: 500; color: var(--d-faint); font-size: 13px; text-align: start; padding: 12px 14px; border-bottom: 1px solid #EEF2EE;
  white-space: nowrap; letter-spacing: .02em; }
.dan-lessees td { padding: 12px 14px; border-bottom: 1px solid #F3F5F2; vertical-align: middle; color: var(--d-body); }
.dan-lessees tr:last-child td { border-bottom: 0; }
.dan-lessees tr.r { cursor: pointer; }
.dan-lessees tr.r:hover td { background: #FAFCFA; }
.dan-lessees tr.act td:first-child { box-shadow: inset 4px 0 0 var(--d-orange); }
.dan-lessees td .n { font-weight: 600; color: var(--d-ink); }
.dan-lessees td .s { font-size: 12.5px; color: var(--d-faint); display: block; margin-top: 2px; }
.dan-lessees td.links a, .dan-lessees td.links span { font-size: 12.5px; margin-inline-start: 8px; white-space: nowrap; }
.dan-lessees td.links > span { color: var(--d-body); }
/* ⑦ שם האדם הוא הפותח של החלון — נראה כטקסט, כמו `span.n` בדן. */
.dan-lessees button.n { font: inherit; font-weight: 600; color: var(--d-ink); background: none; border: 0; padding: 0; margin: 0; text-align: start; cursor: pointer; border-radius: 4px; }
.dan-lessees button.n:hover { color: var(--d-green); }
.dan-lessees button.n:focus-visible { outline: 2px solid var(--d-green); outline-offset: 2px; }

/* ---------- קטעים שהמסך שלנו מוסיף על branch-tenants: החוזים וההיסטוריה ---------- */
.dan-lessees .lsec { display: flex; flex-direction: column; gap: 12px; }
.dan-lessees .lsec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dan-lessees .lsec h2 { font-size: 18px; font-weight: 600; color: var(--d-ink); margin: 0; letter-spacing: 0; }
.dan-lessees .lsec-head .sub { font-size: 13.5px; color: var(--d-muted); }

/* פס הצבע בצד הוא שפת הסריקה (branch-properties.html): ירוק = פעיל ותקין · כתום = בחלון ההודעה · אדום = עבר מועדו ולא נסגר · אפור = נסגר. */
.dan-lessees .lgrid { display: flex; flex-direction: column; gap: 12px; }
.dan-lessees .it { background: #fff; border-radius: 16px; padding: 16px 18px; box-shadow: var(--d-shadow);
  border-inline-start: 4px solid var(--d-green-mid); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dan-lessees .it.warn { border-inline-start-color: var(--d-orange); }
.dan-lessees .it.bad { border-inline-start-color: #C0392B; }
.dan-lessees .it.free { border-inline-start-color: #B4B2A9; }
.dan-lessees .ih { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dan-lessees .ih .n { font-size: 17px; font-weight: 600; color: var(--d-ink); }
.dan-lessees .ih .w { font-size: 13.5px; color: var(--d-muted); }
.dan-lessees .pills { display: flex; gap: 6px; flex-wrap: wrap; }
.dan-lessees .it .meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13.5px; color: var(--d-muted); }
.dan-lessees .it .acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding-top: 2px; }
.dan-lessees .res { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dan-lessees .res li { background: var(--d-cream2); border-radius: 12px; padding: 10px 14px; font-size: 14px; color: var(--d-body);
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.dan-lessees .queue { display: flex; align-items: baseline; gap: 8px; }
.dan-lessees .queue .pos { font-size: 13px; color: var(--d-faint); min-width: 22px; }
.dan-lessees .bar-row { height: 4px; background: var(--d-line); border-radius: 99px; overflow: hidden; margin: 6px 0 2px; }
.dan-lessees .bar-fill { height: 100%; background: var(--d-green); border-radius: 99px; }
.dan-lessees .hkpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

/* ---------- תוכן הדיאלוגים (המעטפת היא kit-dialog) ---------- */
.dan-lessees .dhead { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.dan-lessees .dhead .meta { font-size: 13.5px; color: var(--d-muted); display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.dan-lessees .kd-stepper { display: flex; align-items: flex-start; margin: 8px 0 4px; direction: rtl; }
.dan-lessees .kd-stepper .st { flex: 1; min-width: 0; text-align: center; position: relative; font-size: 12px; line-height: 1.25; color: var(--d-muted); padding: 0 2px; }
.dan-lessees .kd-stepper .st i { display: block; width: 14px; height: 14px; border-radius: 50%; margin: 0 auto 5px; background: var(--d-cream2);
  border: 2px solid var(--d-cream2); box-sizing: border-box; position: relative; z-index: 1; }
.dan-lessees .kd-stepper .st:not(:last-child)::after { content: ""; position: absolute; top: 6px; right: 50%; width: 100%; height: 2px; background: var(--d-cream2); }
.dan-lessees .kd-stepper .st.done i { background: var(--d-green); border-color: var(--d-green); }
.dan-lessees .kd-stepper .st.done::after { background: var(--d-green); }
.dan-lessees .kd-stepper .st.now i { background: #fff; border-color: var(--d-green); box-shadow: 0 0 0 3px rgba(14,122,85,.18); }
.dan-lessees .kd-stepper .st.now { color: var(--d-ink); font-weight: 600; }
.dan-lessees .kd-stepper .st.neg i { background: #C2410C; border-color: #C2410C; }
.dan-lessees .kd-stepper .st.neg { color: #8A3B3B; font-weight: 600; }
.dan-lessees .kd-stepper .st small { display: block; font-weight: 400; font-size: 11.5px; color: var(--d-faint); margin-top: 2px; }
.dan-lessees .kd-stepper-note { font-size: 12.5px; color: var(--d-muted); margin: 2px 0 6px; }
.dan-lessees .kd-stepper-note b { color: var(--d-ink); font-weight: 600; }
.dan-lessees .kd-stepper-flags { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 6px; }
.dan-lessees .kd-stepper-flags span { font-size: 11.5px; background: #fbe9e0; color: #8a3b3b; border-radius: 999px; padding: 2px 8px; }
.dan-lessees .kd-stepper-flags span.soft { background: #F1EFE8; color: var(--d-muted); }

/* ---------- ציר הזמן בחלון האדם — `TL_CSS` של journey-stepper.js, מועתק (`.kd-tl*`), בלי הקיפול של האירועים הנגזרים ובלי "מעמד" (אין מקור) ----------
   ⚠️ עמודת התאריך/שעה (118px) היא של דן, ובשורה בלי שעה היא ריקה גם שם — העמודות כאן DATE בלבד, ולכן היא ריקה תמיד; בנייד (≤640) היא מצטמצמת
   לאפס, אחרת היא אוכלת שליש מהחלון. קו החיבור בצבע cream-2 כמו בדן — כמעט שקוף על לבן (אותו עניין כמו תחנות "טרם" בסטפר, אישור גיל ממתין). */
.dan-lessees .kd-tl { list-style: none; margin: 6px 0 0; padding: 0; direction: rtl; }
.dan-lessees .kd-tl li { display: grid; grid-template-columns: 118px 14px 1fr; gap: 8px; padding: 5px 0; font-size: 13px; position: relative; align-items: start; color: var(--d-ink); }
.dan-lessees .kd-tl .d { color: var(--d-muted); font-size: 12px; white-space: nowrap; padding-top: 2px; }
.dan-lessees .kd-tl .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--d-green); margin-top: 5px; justify-self: center; position: relative; z-index: 1; }
.dan-lessees .kd-tl li.application .dot, .dan-lessees .kd-tl-legend i.application { background: #2F4F7A; }
.dan-lessees .kd-tl li.waitlist .dot, .dan-lessees .kd-tl-legend i.waitlist { background: #d97a2b; }
.dan-lessees .kd-tl li:not(:last-child)::after { content: ""; position: absolute; right: calc(118px + 8px + 6px); top: 18px; bottom: -6px; width: 2px; background: var(--d-cream2); }
.dan-lessees .kd-tl li.day { display: block; padding: 9px 0 3px; font-size: 12px; font-weight: 600; color: var(--d-muted); }
.dan-lessees .kd-tl li.day::after { display: none; }
.dan-lessees .kd-tl-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--d-muted); margin: 8px 0 2px; }
.dan-lessees .kd-tl-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-inline-end: 4px; vertical-align: middle; background: var(--d-green); }

/* ======================================================================== תבניות חוזה (branch-lease-templates.html) */
/* ⚠️ minmax(0,…) ולא 1fr: ברירת המחדל של פריט גריד היא min-width:auto, ו-<pre> של התצוגה המקדימה היה מרחיב את העמודה מעבר למסך במקום לגלול בתוכה. */
.dan-lease-templates .cols { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 18px; align-items: start; }
.dan-lease-templates .lcard.side, .dan-lease-templates .lcard.ed { padding: 16px; border: 1px solid var(--d-line-soft); border-radius: 14px; box-shadow: none; }
.dan-lease-templates .lcard h2 { font-size: 16.5px; margin: 0 0 12px; }
.dan-lease-templates .list { display: flex; flex-direction: column; gap: 8px; }
.dan-lease-templates .tpl { border: 1px solid #E4EDE7; border-radius: 12px; padding: 11px 13px; cursor: pointer; background: #fff; text-align: start;
  font-family: inherit; width: 100%; color: var(--d-text); }
.dan-lease-templates .tpl:hover { background: #F7FAF8; }
.dan-lease-templates .tpl.on { border-color: var(--d-green); background: #F4F8F5; }
.dan-lease-templates .tpl b { display: block; font-size: 15px; color: var(--d-ink); font-weight: 600; line-height: 1.4; }
.dan-lease-templates .tpl .s { display: block; font-size: 13px; color: var(--d-faint); margin-top: 3px; }
.dan-lease-templates .ltag { display: inline-block; font-size: 12px; border-radius: 999px; padding: 2px 9px; margin-inline-start: 6px; background: #EEF3F0; color: var(--d-muted); font-weight: 400; }
.dan-lease-templates .ltag.shared { background: #FDF3E3; color: #8A6A1F; }
.dan-lease-templates .ltag.off { background: #F2E9E9; color: #8A4A4A; }
.dan-lease-templates .lcard.side .lbar { margin-bottom: 10px; }
.dan-lease-templates .lcard.side .lbar input { flex: 1 1 100%; min-width: 0; }
.dan-lease-templates .lcard.side .chips { margin-bottom: 10px; }
.dan-lease-templates .lcard.side .chips .chip { font-size: 13px; padding: 5px 11px; }
.dan-lease-templates .two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.dan-lease-templates .fields { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dan-lease-templates .fields button { font-family: inherit; font-size: 12.5px; border: 1px solid #D8E3DA; background: #fff; border-radius: 999px; padding: 5px 11px;
  cursor: pointer; color: var(--d-muted); min-height: 0; }
.dan-lease-templates .fields button:hover { border-color: var(--d-green); color: var(--d-green); }
/* ⚠️⚠️ **direction:rtl מפורש, ולא unicode-bidi:plaintext** — plaintext נותן לכל שורה את הכיוון של התו החזק הראשון שלה, ולכן שורה שנפתחת
   ב-{{property_kind}} הופכת כולה ל-LTR ונצמדת לשמאל בעוד השורה שמעליה עברית ונצמדת לימין (דן, אחרי צילום מסך). */
.dan-lease-templates [data-kit-field="bodyHe"] textarea, .dan-lease-templates .preview { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.65; direction: rtl; text-align: right; }
.dan-lease-templates [data-kit-field="bodyHe"] textarea { min-height: 340px; resize: vertical; }
.dan-lease-templates .preview { white-space: pre-wrap; overflow-wrap: anywhere; background: #FAFBFA; border: 1px solid #E4EDE7; border-radius: 10px; padding: 13px; margin: 0;
  max-height: 420px; overflow: auto; color: var(--d-text); }
.dan-lease-templates .ed h3 { font-size: 14px; margin: 18px 0 8px; color: var(--d-muted); font-weight: 600; letter-spacing: 0; }
.dan-lease-templates .pvbar { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.dan-lease-templates .pvbar select { font-family: inherit; font-size: 14.5px; padding: 9px 12px; border: 1px solid #D8E3DA; border-radius: 10px; background: #fff; max-width: 100%;
  color: var(--d-text); flex: 1 1 220px; width: auto; min-height: 0; }
.dan-lease-templates .grow { flex: 1; }
.dan-lease-templates .hint { font-size: 12.5px; color: var(--d-faint); line-height: 1.5; }

/* ======================================================================== שבירות */
/* ⚠️ הסף של דן הוא רוחב **החלון** (1000px) — וכאן רוחב **התוכן**: סרגל הצד (≈ 300px עם הריפוד) יושב לידו, ולכן 1000px של דן הם ≈ 700px
   של המכל. נמדד ב-1280: המכל 968px, ובדן באותו חלון ארבעת המונים בשורה אחת. */
@container lessees (max-width: 700px) {
  .dan-lessees .kpis, .dan-lessees .hkpis { grid-template-columns: repeat(2, 1fr); }
  .dan-lessees .ana { grid-template-columns: 1fr; }
}
@container lessees (max-width: 640px) {
  .dan-lessees .lbtn, .dan-lessees .views button, .dan-lessees .chips .chip { min-height: 44px; }
  .dan-lessees .lbar input, .dan-lessees .lbar select, .dan-lessees .form-input { font-size: 16px; }
  .dan-lessees .lbar input[type="search"] { flex: 1 1 100%; min-width: 0; }
  .dan-lessees .kpi { padding: 16px 16px; }
  .dan-lessees .kpi .v { font-size: 26px; }
  .dan-lessees .it { padding: 14px 14px; }
  .dan-lessees .med { grid-template-columns: 1fr; }
  /* ⑥ יעדי מגע 44px גם בטבלת האנשים (נמדד ב-375: קישור 15px · שם 34px · תיבת הסימון 13px) — axe אינו תופס זאת (target-size אינו ב-wcag21aa). */
  .dan-lessees td.links a { display: inline-block; padding: 14px 6px; margin-inline-start: 0; }
  .dan-lessees .lbar label:not(.sr-only) { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
  .dan-lessees .lbar input[type="checkbox"] { width: 20px; height: 20px; }
  .dan-lessees button.n { min-height: 44px; min-width: 44px; }
  .dan-lessees .kd-tl li { grid-template-columns: 0 14px 1fr; }
  .dan-lessees .kd-tl li:not(:last-child)::after { right: calc(0px + 8px + 6px); }
  /* הטבלה של דן אין לה נקודת שבירה, ובנייד חמש העמודות התכווצו ל-min-content ("1124" ו"ימים" בשורות נפרדות, שורות של 170px). עכשיו היא שומרת
     על רוחב קריא וגוללת בתוך `.tbl`, וצל בקצה מרמז שיש עוד (צללי-גלילה: הכיסוי `local` מסתיר את הצל כשאין מה לגלול). */
  .dan-lessees table { min-width: 560px; }
  .dan-lessees .tbl {
    background:
      linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center / 40px 100% no-repeat local,
      linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right center / 40px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(16, 42, 32, .22), rgba(16, 42, 32, 0)) left center / 14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(16, 42, 32, .22), rgba(16, 42, 32, 0)) right center / 14px 100% no-repeat scroll,
      #fff;
  }
}
@container ltpl (max-width: 600px) {
  .dan-lease-templates .cols { grid-template-columns: minmax(0, 1fr); }
}
@container ltpl (max-width: 560px) {
  .dan-lease-templates .two { grid-template-columns: minmax(0, 1fr); }
  .dan-lease-templates .lbtn, .dan-lease-templates .chips .chip, .dan-lease-templates .fields button { min-height: 44px; }
  .dan-lease-templates .form-input, .dan-lease-templates .lbar input, .dan-lease-templates .pvbar select { font-size: 16px; }
}