:root{
  /* =======================================================================
     פלטת הצבעים
     -----------------------------------------------------------------------
     נגזרת מהמוקאפ, ואומתה מול תקן AA: כל 12 זוגות הטקסט-רקע עוברים.
     שני עוגנים שכדאי להכיר לפני שינוי:
       • navy משמש לכותרות ולכרטיס ההפוך. הוא כהה מהכחול הראשי בכוונה,
         כדי שכותרת לא תתחרה בכפתור על תשומת הלב.
       • הצבעים הסמנטיים (ענבר, ירוק, אדום) אינם מתחלפים עם ערכת הנושא.
         סטטוס תשלום צריך להיראות אותו דבר גם כשהמיתוג ירוק או סגול.
     ======================================================================= */
  /* רוחב המגירה. מוגדר כמשתנה כי שני דברים חייבים להסכים עליו: המגירה
     עצמה, והמרחק שהדף זז שמאלה כשהיא נפתחת. */
  /* ⚠ רוחב אחד לשתי המגירות *ולהזזת הדף*. מגירת הצוות הייתה 78vw בעוד
     הדף זז 86vw, וההמבורגר (שזז עם הדף) נדחק אל מחוץ לקצה המסך. */
  --drawer-w:min(300px, 80vw);

  --navy:#0E2545;
  --ink:#1C2E45;             /* טקסט גוף — 13.76:1 על לבן */
  --ink-mid:#5A6B82;         /* תוויות ומשנה — 5.44:1 */
  --ink-soft:#5A6B82;
  --line:#E2E8F1;
  --bg:#F4F6FA;              /* רקע העמוד */
  --panel:#FFFFFF;

  --primary:#1B4FA0;
  --primary-light:#2F63C4;
  --primary-deep:#123A7A;
  --primary-pale:#E8EFFA;

  --accent:#0E9CAE;
  --accent-soft:#E4F6F9;

  --gold:#9A5B08;            /* ענבר — משמש גם כאזהרה */
  --gold-accent:#B87A1E;
  --gold-pale:#FDF3E3;
  --amber:#9A5B08;
  --amber-pale:#FDF3E3;

  --green:#186B44;
  --green-pale:#E4F1EA;

  --brick:#9B3030;
  --brick-pale:#FBE9E9;

  /* ⚠ צבע "מלא" שנשאר כהה בשתי ערכות הנושא.
     ------------------------------------------------------------------
     --brick משמש בשני תפקידים הפוכים: צבע *טקסט* על רקע בהיר, וצבע
     *רקע* מתחת לטקסט לבן. במצב כהה שני התפקידים דורשים ערכים הפוכים —
     הטקסט חייב להיות בהיר, והרקע חייב להישאר כהה מספיק כדי שלבן ייקרא
     עליו. טוקן אחד אינו יכול לשרת את שניהם, ולכן יש שניים. */
  --brick-solid:#B03A2E;     /* לבן עליו — 6.0:1, בשני המצבים */

  /* ⚠ הטוקנים שמתחת נולדו מבדיקת ניגודיות שהורצה על *שני* המצבים.
     =========================================================================
     ההערה בראש הפלטה הצהירה ש"כל 12 זוגות הטקסט-רקע עוברים AA". זה היה
     נכון למצב בהיר. מצב כהה החליף את הטוקנים — אבל כל ערך hex שהוקשח
     בתוך כלל נשאר בערך של מצב בהיר, ולכן התהפך על הראש.

     ⚠ החמור מכולם היה רקע השדות:
         input,select,textarea{ background:#FBFCFD; color:var(--ink); }
     במצב כהה --ink הוא #E6EBF2, כלומר כמעט-לבן על כמעט-לבן — 1.17:1.
     *כל* שדה טקסט, תיבת בחירה ו-textarea במערכת. והתסמין מטעה במיוחד
     כי כלל ה-:focus מחליף את הרקע ל---panel, ולכן השדה נקרא דווקא
     כשנוגעים בו — ונעלם ברגע שעוזבים.

     --on-primary: הטקסט שיושב *על* --primary כרקע מלא. אותו סיפור כמו
     --brick-solid: במצב כהה --primary הופך לכחול בהיר (#6BA3F5), ולבן
     עליו הוא 2.57:1. 17 כללים הקשיחו color:#fff מעליו.

     --primary-ink / --accent-ink: הטקסט שיושב על הרקעים *העמומים*.
     צבע ורקע מאותו גוון בשני קצותיו נותנים ניגודיות נמוכה מעצם טבעם:
     --accent על --accent-soft היה 2.95:1 במצב בהיר, בארבעה כללים.
     applyThemeColors מחשבת אותם לכל אחת משש ערכות המיתוג. */
  --field:#FBFCFD;           /* רקע שדה טופס */
  /* ⚠ גבול השדה עצמו — לא --line.
     --line (#E2E8F1) הוא קו מפריד עדין, ועל רקע השדה הוא 1.2:1: גבול
     השדה כמעט לא נראה, ומי שרואה פחות טוב לא ידע איפה מקלידים.
     WCAG 1.4.11 דורש 3:1 לגבול של פקד. */
  --field-border:#7D8A9C;    /* 3.4:1 על --field, 3.2:1 על --bg */
  --field-invalid:#FFF8F6;   /* ...ובמצב שגיאה */
  --row-alt:#FBFCFE;         /* הצללה עדינה לשורת טבלה משנית */
  --on-primary:#FFFFFF;      /* טקסט על --primary כרקע מלא */
  --primary-ink:#2367D1;     /* טקסט על --primary-pale  (4.62:1) */
  --accent-ink:#0B7684;      /* טקסט על --accent-soft   (4.79:1) */
  /* ⚠ --accent-solid: רקע מלא בגוון ההדגשה, שלבן עליו עובר AA.
     אותו דפוס כמו --brick-solid, ומאותה סיבה: --accent לבדו משמש גם
     כטקסט על רקע עמום וגם כרקע מתחת לטקסט, ושני התפקידים דורשים
     ערכים הפוכים. לבן על --accent הוא 3.3:1 בלבד.
     ⚠ זהה בשני מצבי הצבע — רקע כהה-בינוני עם טקסט לבן תקין גם במצב
     כהה, ולכן applyThemeColors כותבת אותו לבלוק הבהיר בלבד. */
  --accent-solid:#0B7F8E;    /* לבן עליו — 4.73:1 */

  /* ⚠ צבעי המשבצות בדף הבית (UI_COLORS ב-uiconfig.js).
     היו hex קשיחים, ולכן במצב כהה כל משבצת צבעונית הייתה ריבוע פסטל
     בוהק על רקע כהה. עכשיו כל צבע הוא זוג טוקנים, והמצב הכהה מגדיר
     אותם מחדש: גוון בהיר יותר לאייקון, ורקע שהוא תערובת שלו עם הפאנל. */
  --tile-cyan:#0891B2;   --tile-cyan-pale:#ECFEFF;
  --tile-green:#15803D;  --tile-green-pale:#F0FDF4;
  --tile-amber:#B45309;  --tile-amber-pale:#FFFBEB;
  --tile-brick:#B91C1C;  --tile-brick-pale:#FEF2F2;
  --tile-purple:#7E22CE; --tile-purple-pale:#FAF5FF;
  --tile-slate:#334155;  --tile-slate-pale:#F8FAFC;

  --fs-xs:0.8125rem;    /* 13px - הקטן ביותר שמותר לטקסט */
  --fs-sm:0.875rem;     /* 14px */
  --fs-base:0.9375rem;  /* 15px - טקסט גוף */
  --fs-md:1rem;         /* 16px */
  --fs-lg:1.125rem;     /* 18px */
  --fs-xl:1.25rem;      /* 20px */
  --fs-2xl:1.5rem;      /* 24px */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --radius-pill:999px;
  --radius-xs:6px;
  --radius:14px;
  --radius-sm:9px;
  /* ⚠ שני אלה נוספו כי 30+ כללים הקשיחו 12px ו-18px בלי טוקן — ולכן
     פאנל, חלון וכרטיס קיבלו כל אחד עיגול פינות קצת אחר. */
  --radius-md:12px;
  --radius-lg:18px;
  /* צללים בשתי שכבות: אחת קרובה שמגדירה את הקצה, ואחת רחוקה ורכה
     שיוצרת את תחושת הריחוף. שכבה אחת נראית שטוחה.
     ⚠ כאן הייתה קודם קבוצת צללים נוספת, באותו :root, שהקבוצה הזו דרסה —
     כלומר קוד מת שנראה כאילו הוא קובע. נמחקה. */
  --shadow-xs:0 1px 2px rgba(19,40,90,.05);
  --shadow-sm:0 2px 6px rgba(19,40,90,.06), 0 1px 2px rgba(19,40,90,.05);
  --shadow-md:0 8px 24px rgba(19,40,90,.09), 0 2px 6px rgba(19,40,90,.06);
  --shadow-lg:0 18px 48px rgba(19,40,90,.14), 0 4px 14px rgba(19,40,90,.08);
  --shadow:var(--shadow-sm);
  --ease:cubic-bezier(.4,0,.2,1);
  --t:all .18s var(--ease);
}
*{box-sizing:border-box;}

/* תכונת hidden של HTML מיושמת בדפדפן ככלל display:none בעדיפות נמוכה, וכל
   כלל עיצוב שקובע display לאותו אלמנט גובר עליה בשקט. זה בדיוק מה שקרה
   בפאנל החשבונות של התב"ר: display:flex ניצח, והפאנל נשאר פתוח תמיד גם
   כשהתכונה הוגדרה. הכלל הזה מבטיח ש-hidden באמת מסתיר, בכל מקום. */
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
/* שדה שמקבל מיקוד לא נוחת מתחת לכותרת הדביקה (WCAG 2.4.11).
   --header-h נמדד ב-platform.js; 72px הוא גובה שורה אחת, עד שנמדד. */
html{scroll-padding-top:calc(var(--header-h, 72px) + 12px);}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:'Heebo',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{min-height:100vh;line-height:1.5;}
.mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;}
/* ---- מציג PDF פנימי ----
   העמודים מצוירים ל-canvas ומוצגים ברצף אנכי, כמו במציג רגיל. הרקע
   האפור הכהה הוא הקונבנציה של מציגי PDF ומפריד את "הנייר" מהמסך. */
.pdf-inline{
  display:flex;flex-direction:column;gap:10px;
  max-height:70vh;max-height:70dvh;overflow-y:auto;overscroll-behavior:contain;
  background:#525659;padding:10px;border-radius:8px;
}
/* מציין מקום לעמוד. היחס נקבע מראש כדי שהגלילה לא תקפוץ כשעמוד
   נכנס לתצוגה או משוחרר מהזיכרון. ראו renderPdfInline ב-shared.js. */
.pdf-page-slot{
  position:relative;width:100%;background:#fff;border-radius:4px;
  box-shadow:0 1px 6px rgba(0,0,0,.35);overflow:hidden;
}
.pdf-inline canvas{
  display:block;width:100%;height:auto;background:#fff;
  /* הקנבס מצויר ברוחב 1400 ומוקטן לרוחב המכל. ההקטנה בידי הדפדפן
     איכותית בהרבה מציור ישיר בגודל הקטן — וזה בדיוק מה שמונע את
     פיצול האותיות בעברית. */
  image-rendering:auto;
}
/* שורת המוצא מתחת למציג. תמיד מוצגת — ראו renderPdfInline ב-shared.js. */
.pdf-inline-foot{
  margin-top:8px;font-size:var(--fs-xs);color:var(--ink-soft);text-align:center;
}
.pdf-inline-foot a{color:var(--primary);font-weight:600;}

/* מספר טלפון הוא יחידה אחת. ראו formatPhoneDisplay ב-budget.js. */
.phone-num{white-space:nowrap;}

/* ---- טלפונים בכרטיס תושב/ת בנייד ----
   כל אדם בשורה משלו, ולא שניהם משורשרים ב-' | '.
   ------------------------------------------------------------------------
   השורה המשורשרת הייתה טקסט עברי ומספרים לטיניים מעורבים באותה שורה,
   שנשברה איפה שנוח לדפדפן. בצילום זה נראה כך:
       אביחי:  -667 (054)
       0215  |  לירז:
       (054) 667-0214
   כלומר גם המספר נשבר באמצע וגם סדר הקריאה התבלבל.

   שורה לאדם פותרת את שניהם: אין מה לשבור, ואין ערבוב.
   כל שורה היא גם קישור חיוג — לחיצה מחייגת, כמו בדף הקשר. */
.cc-phones{display:flex;flex-direction:column;gap:2px;margin-top:6px;}
.cc-phone{
  display:flex;align-items:baseline;gap:var(--space-2);
  /* flex-wrap: השם והמספר עוברים לשתי שורות כשאין מקום לשניהם.
     ------------------------------------------------------------------------
     בלי זה השם פשוט נעלם. הכרטיס בנייד צר ממילא — מספר סידורי, תיבת
     סימון, עיגול אווטאר וכפתור מחיקה אוכלים את רובו — והמספר הוא
     nowrap ולכן אינו יכול להצטמצם. התוצאה: כל הלחץ נופל על השם, הוא
     מצטמצם עד אפס, ו-overflow:hidden מסתיר אותו לגמרי.
     בצילום נראו רק מספרים בלי "אביעד" ו"שירה" לצידם.

     עם wrap, כשאין מקום המספר יורד שורה במקום למחוק את השם. */
  flex-wrap:wrap;min-width:0;
  min-height:34px;padding:3px 2px;
  text-decoration:none;color:inherit;
}
/* בלי רקע ובלי מסגרת.
   הרקע הכחול-בהיר הפך כל מספר לתיבה נפרדת, ובכרטיס עם שני מספרים
   התוצאה הייתה רועשת ומושכת את העין יותר מהשם של משק הבית. הטלפונים
   הם מידע משני בכרטיס, ולא צריכים משקל ויזואלי משלהם. */
.cc-phone:active{opacity:.6;}
.cc-phone-who{
  font-size:var(--fs-xs);color:var(--ink-soft);font-weight:600;
  /* השם מתקצר בשלוש נקודות אם צריך — אבל לא מתחת ל-4 תווים, אחרת אין
     בו שום ערך. מתחת לזה עדיף שהמספר ירד שורה. */
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  flex:0 1 auto;min-width:4ch;
}
.cc-phone-num{
  font-size:var(--fs-sm);color:var(--primary);font-weight:600;
  white-space:nowrap;margin-inline-start:auto;flex:0 0 auto;
}
@media (pointer: coarse){ .cc-phone{min-height:40px;} }
/* כותרות בסנס-סריף. הגופן הסריפי נשאר רק במסמכים רשמיים מודפסים (אישור
   ועדת בנייה), שם הוא מתאים - אבל במסך הוא נקרא עדין ופחות ברור. */
h1,h2,h3{font-family:'Heebo',system-ui,sans-serif;font-weight:800;letter-spacing:-.015em;line-height:1.25;}
.display{font-family:'Heebo',system-ui,sans-serif;letter-spacing:-.005em;}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:var(--radius-xs);}
main:focus{outline:none;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip-link{position:absolute;top:-70px;inset-inline-end:16px;z-index:300;background:var(--primary);color:var(--panel);padding:12px 20px;min-height:44px;display:inline-flex;align-items:center;border-radius:0 0 10px 10px;font-weight:700;font-size:var(--fs-base);text-decoration:none;box-shadow:var(--shadow-md);transition:top .18s var(--ease);}
.skip-link:focus{top:0;}
/* ⚠ מסך הכניסה: בלי ניווט.
   ------------------------------------------------------------------------
   ראו את ההסבר המלא ב-renderGate. הכלל מכסה גם את הניווט עצמו וגם את
   הכפתור שפותח אותו בנייד, כי שניהם מובילים לאותם מסכים נעולים. */
body.is-gated #staffNav,
body.is-gated #mobileNavToggle{ display:none !important; }
/* החשיפה של איפוס החירום — שקטה, אבל ניתנת למיקוד ולמציאה. */
.gate-danger-wrap{margin-top:10px;}
.gate-danger-wrap > summary{
  cursor:pointer;font-size:var(--fs-xs);color:var(--ink-soft);
  padding:6px 0;list-style:none;
}
.gate-danger-wrap > summary::-webkit-details-marker{display:none;}
.gate-danger-wrap > summary::before{content:'▸ ';}
.gate-danger-wrap[open] > summary::before{content:'▾ ';}
.gate-danger-wrap > summary:hover{color:var(--brick);}

/* ---- header (brand) ---- */
/* =========================================================================
   הסרגל העליון
   -------------------------------------------------------------------------
   קודם היו כאן שלושה חלקים מוערמים - כותרת, גל דקורטיבי, וסרגל ניווט -
   ובסך הכל 535 פיקסלים לפני שרואים תוכן אצל משתמש/ת עם שני תפקידים.
   עכשיו שורה אחת בגובה 62 פיקסלים: מיתוג בימין, פעולות בשמאל.
   ========================================================================= */
/* z-index גבוה מה-backdrop ומהמגירות, וזו אינה שרירותיות.
   ------------------------------------------------------------------------
   position:sticky יחד עם z-index יוצר הקשר ערימה, וכל צאצא נלכד בתוכו.
   מרגע שהניווטים עברו לתוך הכותרת, ה-z-index שלהם (40 ו-60) הפך יחסי
   לכותרת - כלומר "30.40" ו-"30.60". ה-backdrop יושב מחוץ לכותרת עם 39,
   ולכן כיסה את המגירה בנייד: לוחצים על ההמבורגר, המסך מחשיך, ותפריט
   אין. הכותרת חייבת להיות מעל כולם כדי שצאצאיה יהיו מעל. */
.brand-header{
  position:sticky;top:0;z-index:100;
  background:var(--panel);border-bottom:1px solid var(--line);
  padding:0 var(--space-5);
}
.header-inner{
  display:flex;align-items:center;gap:var(--space-5);
  /* min-height ולא height.
     ---------------------------------------------------------------------
     ב-600 פיקסלים ומטה נוסף row-gap לכותרת, כלומר הפריסה *מצפה* שהתוכן
     ייפול לשורה שנייה במסכים צרים. אבל גובה קשיח של 66 פיקסלים אינו גדל
     יחד איתו — השורה השנייה פשוט נחתכת מחוץ לגבול הכותרת ונחבאת מאחורי
     התוכן. min-height שומר על אותו גובה בדיוק כשהכל נכנס בשורה אחת,
     ומאפשר לכותרת לגדול כשלא. */
  min-height:66px;max-width:1400px;margin:0 auto;flex-wrap:wrap;
}
/* margin-inline-start על .brand ולא gap על הכותרת.
   -------------------------------------------------------------------------
   הלוגו הוא תמונה עם שוליים משלה, וכפתור התפריט הוא עיגול מלא ברקע
   צבעוני. שני רכיבים "כבדים" ויזואלית שנוגעים כמעט זה בזה נקראים כגוש
   אחד ולא כשניים.

   הפרדה כאן ולא ב-gap של הכותרת, כי המרווח שייך ליחס בין הלוגו לשכנו
   *משמאלו* בלבד — gap היה מרחיב גם את המרווח בין החיפוש לצ'יפ המשתמש/ת,
   ששם הוא כבר נכון. וכשאין המבורגר (ניווט פרוש) ה-margin פשוט יושב
   בקצה השורה ואינו מזיז דבר. */
.brand{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;min-width:0;min-height:44px;margin-inline-start:6px;}
/* הפעולות נדחפות לקצה הנגדי ללוגו.
   ------------------------------------------------------------------------
   בלי זה הן נצמדו ללוגו והשאירו 855 פיקסלים ריקים בצד השני. margin auto
   ולא justify-content:space-between, כי כשהניווט פרוש הוא ממלא את האמצע
   בעצמו — ו-space-between היה דוחף אותו לקצה במקום להשאיר אותו סמוך ללוגו. */
.header-actions{
  display:flex;align-items:center;gap:var(--space-2);
  flex-shrink:0;margin-inline-start:auto;
}
.brand img.logo-img{height:58px;width:auto;display:block;border-radius:8px;}
.brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0;}
.brand-title{color:var(--primary);font-size:var(--fs-lg);font-weight:800;letter-spacing:-.01em;}
.brand-sub{color:var(--ink-soft);font-size:var(--fs-xs);}
@media (max-width:520px){ .brand-sub{display:none;} }
/* ---- צ'יפ המשתמש/ת ותפריטו ---- */
.user-menu-wrap{position:relative;}
.user-chip{
  display:flex;align-items:center;gap:var(--space-2);
  height:44px;min-width:44px;padding:0 10px 0 6px;
  border:1px solid var(--line);border-radius:var(--radius-pill);
  background:var(--panel);cursor:pointer;font-family:inherit;transition:background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  color:var(--ink);   /* ⚠ כפתור אינו יורש צבע — בלי זה ה-▾ שחור, ובמצב כהה בלתי נראה (1.3:1) */
}
.user-chip:hover{border-color:var(--primary-light);background:var(--primary-pale);}
.user-avatar{
  display:grid;place-items:center;width:30px;height:30px;flex-shrink:0;
  border-radius:50%;background:var(--primary);color:var(--on-primary);
  font-size:var(--fs-xs);font-weight:800;
}
.user-chip-text{display:flex;flex-direction:column;line-height:1.15;text-align:start;min-width:0;}
.user-chip-text b{font-size:var(--fs-sm);color:var(--ink);white-space:nowrap;}
.user-chip-text span{
  font-size:var(--fs-xs);color:var(--ink-soft);white-space:nowrap;
  max-width:130px;overflow:hidden;text-overflow:ellipsis;
}
@media (max-width:1150px){ .user-chip-text{display:none;} .user-chip{padding:0 5px;} }

.user-menu{
  display:none;position:absolute;top:calc(100% + 6px);inset-inline-end:0;
  min-width:230px;z-index:120;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);padding:6px;
}
.user-menu.open{display:block;animation:navMenuIn .14s var(--ease);}
.user-menu-head{
  padding:var(--space-3);border-bottom:1px solid var(--line);margin-bottom:6px;
  display:flex;flex-direction:column;gap:2px;
}
.user-menu-head b{font-size:var(--fs-base);color:var(--ink);}
.user-menu-head span{font-size:var(--fs-xs);color:var(--ink-soft);line-height:1.35;}
.user-menu button{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);
  width:100%;padding:11px 12px;min-height:44px;
  border:none;background:none;border-radius:var(--radius-sm);
  font-family:inherit;font-size:var(--fs-base);font-weight:600;color:var(--ink);
  text-align:start;cursor:pointer;transition:var(--t);
}
.user-menu button:hover{background:var(--primary-pale);color:var(--primary-ink);}
.user-menu button.danger{color:var(--brick);}
.user-menu button.danger:hover{background:var(--brick-pale);}
.who b{color:var(--primary);}
.who button{background:none;border:none;color:var(--ink-soft);cursor:pointer;font-size:var(--fs-sm);text-decoration:underline;padding:0;font-family:inherit;transition:var(--t);}
.who button:hover{color:var(--brick);}
/* הגל הדקורטיבי הוסר: 24 פיקסלים בלי תפקיד, בראש כל מסך */

/* ---- nav ---- */
/* הניווט יושב בתוך הכותרת, בשורה אחת עם הלוגו והפעולות - כמו במוקאפ.
   קודם הוא היה סרגל נפרד מתחתיה, וזה יצר שורה שלמה שרובה ריקה. */
nav{
  display:flex;align-items:center;gap:2px;
  flex:1;min-width:0;overflow-x:auto;
  scrollbar-width:none;
}
nav::-webkit-scrollbar{display:none;}
#mobileNavToggle{display:none;}
nav button{
  display:inline-flex;align-items:center;gap:5px;
  border:none;background:none;padding:0 14px;height:40px;margin:0;
  font-family:'Heebo',system-ui,sans-serif;font-size:var(--fs-base);font-weight:600;color:var(--ink-mid);
  cursor:pointer;border-radius:var(--radius-pill);border-bottom:none;
  white-space:nowrap;transition:var(--t);flex-shrink:0;
}
nav button:hover{color:var(--primary-ink);background:var(--primary-pale);}
nav button.active{color:var(--primary-ink);background:var(--primary-pale);font-weight:700;}
/* הוסר: כלל כפול שדרס את הריחוף שמעליו והחליש אותו ל-5% אטימות */
/* ניווט התושבים יושב בכותרת, בשורה אחת עם הלוגו והפעולות - בדיוק כמו
   ניווט הצוות. קודם היה כאן רצועה נפרדת של עיגולים בגובה ~150 פיקסלים,
   שהציגה בדיוק את אותם יעדים שמופיעים ככרטיסים בדף הבית - כלומר אותה
   רשימה פעמיים על מסך אחד. הכרטיסים נשארו כי הם מסבירים מה נכנס תחת כל
   שם; הרצועה ירדה כי היא לא הוסיפה דבר. */
.resident-portal-nav{
  display:flex;align-items:center;gap:2px;
  flex:1;min-width:0;overflow-x:auto;
  scrollbar-width:none;
}
.resident-portal-nav::-webkit-scrollbar{display:none;}
/* גלולה זהה לזו של ניווט הצוות. העיגול הצבעוני מוקטן לנקודת זיהוי
   בגודל 22 פיקסלים - הצבע נשמר, השטח לא. */
.resident-icon-btn{
  display:inline-flex;align-items:center;gap:7px;
  height:40px;padding:0 14px 0 7px;width:auto;flex-shrink:0;
  border:none;background:none;border-radius:var(--radius-pill);
  font-family:'Heebo',system-ui,sans-serif;cursor:pointer;transition:var(--t);
}
.resident-icon-btn .circle{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:none;transition:var(--t);}
.resident-icon-btn .circle svg{width:15px;height:15px;}
.resident-icon-btn:hover{background:var(--primary-pale);}
.resident-icon-btn span:last-child{font-size:var(--fs-base);font-weight:600;color:var(--ink-mid);white-space:nowrap;line-height:1;}
.resident-icon-btn:hover span:last-child{color:var(--primary);}
.resident-portal-nav button.resident-icon-btn.active{background:var(--primary-pale);}
.resident-icon-btn.active span:last-child{color:var(--primary);font-weight:700;}
.notif-badge{position:absolute;top:-4px;inset-inline-end:-4px;background:var(--brick);color:var(--panel);font-size:var(--fs-xs);font-weight:700;min-width:19px;height:19px;border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 0 0 2px var(--panel);}
.nav-badge{background:var(--brick);color:var(--panel);font-size:var(--fs-xs);font-weight:700;min-width:17px;height:17px;border-radius:var(--radius-pill);display:inline-flex;align-items:center;justify-content:center;padding:0 4px;margin-inline-start:5px;vertical-align:middle;}
.resident-portal-nav button.active{border-bottom-color:transparent;color:var(--ink);background:none;}

/* אותו רוחב בדיוק כמו הכותרת (1400). קודם הכותרת הייתה 1400 והתוכן 1180 -
   שניהם ממורכזים, אך הלוגו והחיפוש יצאו 110 פיקסלים החוצה מהכרטיסים
   שמתחתיהם. זה מה שנראה כמו סרגל לא מסודר.

   1400 נדרש גם כדי שהניווט יישאר פרוש: הוא צורך 867 פיקסלים, ועם הלוגו
   והפעולות אין מקום לכולם ברוחב צר יותר. */
main{max-width:1400px;margin:0 auto;padding:var(--space-6) var(--space-5) 72px;}

/* טקסט רץ מוגבל לאורך שורה קריא, גם כשהמיכל רחב. שורה של 1400 פיקסלים
   בעברית היא כ-150 תווים - העין מאבדת את תחילת השורה הבאה.

   ⚠ .empty הוסר מהרשימה הזו, וזו הייתה הסיבה למלבנים החצי-ריקים.
   ------------------------------------------------------------------------
   ההיגיון של הגבלת אורך שורה נכון ל-.note ול-.set-hint, שהם פסקאות טקסט
   רץ. .empty אינו פסקה — הוא *תיבת מציין מקום* עם מסגרת מקווקוות, רקע
   ואייקון ממורכז. הגבלה ל-92ch נתנה לו כ-730 פיקסלים בתוך פאנל של 1330,
   וללא margin:auto הוא נצמד לתחילת השורה — כלומר לימין. התוצאה: תיבה
   שתופסת חצי מהפאנל ו-600 פיקסלים לבנים לצידה.

   הטקסט שבתוכו ממורכז ממילא, ולכן אין שום סיבה להגביל את התיבה. */
.note, .set-hint{max-width:92ch;}
.tab{display:none;}
.tab.active{display:block;animation:fade .3s var(--ease);}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- cards / grid ----
   הערה על minmax(min(NNNpx,100%),1fr) שחוזר בכל הרשתות בגיליון:
   minmax(280px,1fr) לבדו מכריח עמודה ברוחב 280 גם כשהמיכל צר יותר, ואז
   הרשת חורגת מהמסך. בטלפון של 320 פיקסלים נשארים כ-264 פיקסלים אחרי
   הריפוד של main ושל הפאנל, כלומר כל רשת עם מינימום מעל 264 דחפה את
   העמוד לגלילה אופקית. min(...,100%) מצמצם את המינימום לרוחב המיכל
   כשצריך, ומשאיר אותו כמו שהוא כשיש מקום. */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:var(--space-4);margin-bottom:var(--space-5);}
.card{
  position:relative;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--space-5) var(--space-5) 20px;
  box-shadow:var(--shadow-sm);
  transition:var(--t);overflow:hidden;
}
.card::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--primary),var(--gold));opacity:.85;}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
/* ⚠ שישה כרטיסים זהים הם שישה מספרים שצריך לקרוא כדי למצוא אחד.
   -------------------------------------------------------------------------
   הפס העליון של כל הכרטיסים היה אותו מעבר צבע בדיוק, ולכן לא נשא שום
   מידע. כאן הוא נושא את *סוג* המספר: תכנון, כסף שנכנס, כסף שיצא, ומה
   שמחויב אבל טרם יצא. העין מוצאת את מה שהיא מחפשת בלי לקרוא תוויות.

   ⚠ is-key — השורה התחתונה. מתוך שישה מספרים יש אחד שמחליטים לפיו,
   והוא צריך להיראות כך. */
.card.acc-plan::before{background:var(--ink-soft);opacity:.4;}
.card.acc-in::before{background:var(--green);opacity:.9;}
.card.acc-out::before{background:var(--brick);opacity:.9;}
.card.acc-hold::before{background:var(--amber);opacity:.9;}
.card.is-key{border-color:var(--primary);box-shadow:var(--shadow-md);}
.card.is-key::before{height:5px;background:var(--primary);opacity:1;}
.card.is-key .label{color:var(--ink);}
.card.is-key .value{font-size:2.05rem;}
.card.is-key.key-bad{border-color:var(--brick);}
.card.is-key.key-bad::before{background:var(--brick);}
.card.is-key.key-ok{border-color:var(--green);}
.card.is-key.key-ok::before{background:var(--green);}
.card .value.muted{color:var(--ink-soft);font-size:1.15rem;font-weight:600;}
.card .label{font-size:var(--fs-base);font-weight:600;color:var(--ink-mid);margin-bottom:var(--space-2);letter-spacing:-.005em;}
.card .value{font-family:'JetBrains Mono',monospace;font-size:1.75rem;font-weight:700;line-height:1.15;letter-spacing:-.02em;}
.value.pos{color:var(--primary-light);}
.value.neg{color:var(--brick);}
.value.gold{color:var(--gold);}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-5);margin-bottom:var(--space-5);transition:box-shadow .25s var(--ease);}
.panel h2{
  font-size:var(--fs-xl);margin:0 0 var(--space-4);color:var(--primary);font-weight:700;
  letter-spacing:-.01em;line-height:1.3;
}
.panel h2 small{font-family:'Heebo';font-weight:500;color:var(--ink-soft);font-size:var(--fs-sm);}

/* ---- forms ---- */
.form-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.field{display:flex;flex-direction:column;gap:4px;flex:1;min-width:130px;}
.field label{font-size:var(--fs-xs);color:var(--ink-soft);font-weight:600;}
/* ⚠ תווית ארוכה בסוגריים מושכת את העין יותר מהשדה עצמו.
   "אסמכתת תשלום (קבלה, חשבונית מס, צילום העברה בנקאית)" נשברה לשתי
   שורות ותפסה יותר מקום מהשדה. הכותרת נשארת קצרה, והדוגמאות יורדות
   לשורת עזר שקטה מתחתיה — קריא בלי לצעוק. */
.field-hint{font-size:var(--fs-xs);color:var(--ink-soft);line-height:1.4;}
/* ⚠ שדה שאינו אמור להימתח על כל הרוחב. תיבת "סטטוס תשלום" לבדה בשורה
   נמתחה מקצה לקצה ונראתה כמו שדה חשוב יותר מהסכום שמעליה. */
.field.is-compact{max-width:260px;}
@media (max-width:600px){ .field.is-compact{max-width:none;} }
/* חטיבה בתוך טופס — מפרידה בין "מה ההוצאה" לבין "אילו מסמכים יש לה". */
.form-section{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);}
.form-section-head{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  margin:0 0 10px;font-size:var(--fs-md);font-weight:700;color:var(--primary);
}
.form-section-head span{font-size:var(--fs-xs);font-weight:500;color:var(--ink-soft);}
input,select,textarea{font-family:'Heebo',system-ui,sans-serif;font-size:var(--fs-base);padding:9px 11px;border:1px solid var(--field-border);border-radius:var(--radius-sm);background:var(--field);color:var(--ink);transition:border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);}
@media (max-width:600px){
  /* שדות טופס בנייד.
     ----------------------------------------------------------------------
     שני מספרים שאינם שרירותיים:

     16px גופן — הסף שמתחתיו ספארי באייפון מזום אוטומטית בכל מיקוד בשדה.
     הכלל שהיה כאן קבע 15px והצהיר שהוא מונע זום; בפועל הוא קיבע גודל
     שגורם לו. כל הקלדה בטופס התחילה בקפיצת זום שהמשתמש/ת צריכים לבטל.

     44px גובה — תקן יעד המגע. השדות היו 38px, ובטופס עם שישה שדות
     צמודים זה מספיק כדי להחטיא. */
  input,select,textarea{
    font-size:16px;
    min-height:44px;
    padding:11px 12px;
  }
  textarea, textarea[rows]{min-height:88px;}

  /* תיבות סימון וכפתורי רדיו הם היוצא מן הכלל: הגדלה שלהם ל-44 מעוותת
     את הריבוע. במקומם מגדילים את שטח הלחיצה סביבם — התוצאה זהה לאצבע,
     והריבוע נשאר בגודלו. */
  input[type="checkbox"], input[type="radio"]{
    min-height:0;width:22px;height:22px;padding:0;margin:11px;
  }
  /* כפתורים בתוך כרטיסים ורשימות */
  .proj-card button, .feed-action button, .pb-act, td button, .tag button{
    min-height:44px;
  }
  /* קישורי הפוטר בפורטל */
  .portal-root footer button{min-height:44px;padding:11px 8px;}

  /* קישורי "כל הקריאות ←" בכותרות הכרטיסים, וכפתורי הניווט בעימוד */
  .card-head-link{min-height:44px;padding:11px 4px;}
  .pager button{min-width:44px;min-height:44px;}
}

/* =========================================================================
   יעדי מגע בכל מכשיר עם מסך מגע
   -------------------------------------------------------------------------
   הכללים שמעל תחומים ל-600 פיקסלים, אבל טאבלט ונייד מסובב הם רחבים מזה
   ועדיין נוגעים באצבע. pointer:coarse שואל את המכשיר עצמו אם מדובר
   בהצבעה גסה, במקום להסיק את זה מרוחב המסך.
   ========================================================================= */
@media (pointer: coarse){
  input,select,textarea{font-size:16px;min-height:44px;}
  input[type="checkbox"], input[type="radio"]{min-height:0;width:22px;height:22px;margin:11px;}
  /* ⚠ שני כללים ספציפיים יותר ניצחו את הכלל שמעל, ולכן הוא לא חל
     בדיוק על שתי תיבות הסימון שהוא נכתב בשבילן.
     ======================================================================
     ספציפיות: `.task-item input[type=checkbox]` היא (0,2,1) מול (0,1,1)
     כאן, ולכן תיבת הסימון של משימה נשארה 17px בנייד — מתחת לסף 24px של
     WCAG 2.5.8, ובלי תווית עוטפת שתגדיל את שטח הנגיעה.

     `.ch-opt input` היא (0,1,1), כלומר *שווה* — ומוגדרת מאוחר יותר
     בקובץ, ולכן ניצחה אותו ונשארה 18px. שם זה פחות חמור, כי התיבה
     יושבת בתוך <label> עם padding של 12px שכולו לחיץ.

     התוצאה: כלל שנכתב במפורש כדי "למנוע החטאה בטופס עם שישה שדות
     צמודים" פשוט לא רץ על שני המקומות הצפופים ביותר.

     ⚠ העקיפה *אינה* כאן, אלא צמוד לכל אחד משני הכללים האלה — ראו
     .task-item ו-.ch-opt. הסיבה: ספציפיות זהה נשברת לפי סדר הקובץ,
     ושני הכללים מוגדרים מאוחר יותר. עקיפה שיושבת כאן נראית נכונה
     ופשוט אינה חלה — וזה בדיוק הסוג של תיקון שמרגיע בלי לתקן. */
  .card-head-link{min-height:44px;padding:11px 4px;}
  .proj-card button, .feed-action button, .pb-act, td button, .tag button{min-height:44px;}
  .portal-root footer button{min-height:44px;padding:11px 8px;}
  .send-btn{width:44px;height:44px;}

  /* כפתורים קטנים — 100 מופעים במערכת, וכולם היו מתחת לסף.
     ------------------------------------------------------------------------
     הרשימה שמעל תופסת כפתורים לפי ההקשר שלהם (בתוך כרטיס, בתוך תא טבלה),
     אבל .btn.small מופיע גם בהרבה מקומות אחרים: בשורות פעולה, בכותרות
     פאנלים, בתוך חלונות. גובהו בפועל היה כ-30 פיקסלים — 7 ריפוד למעלה,
     7 למטה וטקסט של 13. זהו פחות משני שלישים מהסף המקובל של 44, ואלה
     דווקא הכפתורים המסוכנים: "מחיקה", "עריכה", "אישור".

     הריפוד האופקי לא גדל יחד עם הגובה, כדי ששלושה כפתורי פעולה עדיין
     ייכנסו בשורה אחת בטלפון במקום לרדת שורה כל אחד. */
  :is(button,a).btn{min-height:44px;}
  :is(button,a).btn.small{min-height:44px;padding:8px 14px;}
  /* אותו היגיון לכפתורי הסגירה של החלונות ולקישורי הפעולה */
  .modal-close,.icon-btn{min-width:44px;min-height:44px;}
  /* ניווט התושב/ת במצב פרוש — 40 פיקסלים, וזהו הניווט *הראשי* שלו/ה.
     במגירה הוא כבר 56, אבל בטאבלט ובטלפון מסובב שבהם הניווט נכנס בשורה
     אחת הוא נשאר 40, ואלה מכשירי מגע לכל דבר. */
  .resident-icon-btn{min-height:44px;}
}

/* שבירת מחרוזות ארוכות שאין בהן רווח.
   -------------------------------------------------------------------------
   בגיליון כולו לא היה אף overflow-wrap, word-break או hyphens. המשמעות
   היא שכתובת מייל ארוכה, שם קובץ שהועלה, כתובת אינטרנט בהודעה או מספר
   חשבון דוחפים את המיכל שלהם לרוחב שגדול מהמסך — וברגע שמיכל אחד חורג,
   כל העמוד מקבל גלילה אופקית והפריסה נראית שבורה.

   break-word ולא break-all: break-all שובר גם מילים רגילות באמצע, וזה
   הורס קריאוּת בעברית. break-word שובר רק כשאין ברירה אחרת. */
body{overflow-wrap:break-word;}
textarea{resize:vertical;min-height:60px;}
input:hover,select:hover,textarea:hover{border-color:var(--ink-soft);}
/* ⚠ טבעת המיקוד של שדה הייתה צל בשקיפות 14% — 1.2:1 מול הרקע, כלומר
   כמעט בלתי נראית. מי שמנווט/ת במקלדת לא ראה/תה באיזה שדה הסמן עומד.
   WCAG 2.4.7 + 1.4.11: מתאר מלא בצבע הראשי (5.7:1), כמו בשאר המערכת. */
input:focus,select:focus,textarea:focus{outline:2px solid var(--primary-light);outline-offset:1px;border-color:var(--primary-light);box-shadow:none;background:var(--panel);}
/* ---- מצבי שגיאה בטפסים (ולידציה מוצמדת לשדה עצמו, לא רק הודעת טוסט חולפת) ---- */
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:var(--brick);background:var(--field-invalid);}
.field.is-invalid input:focus,.field.is-invalid select:focus,.field.is-invalid textarea:focus{border-color:var(--brick);box-shadow:0 0 0 3px rgba(155,65,48,.16);}
.field-error{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:600;color:var(--brick);margin-top:3px;line-height:1.35;}
.field-error::before{content:'!';display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--brick);color:var(--panel);font-size:var(--fs-xs);font-weight:700;flex-shrink:0;}
.req-mark{color:var(--brick);margin-inline-start:2px;}
:is(button,a).btn{font-family:'Heebo',system-ui,sans-serif;font-weight:700;font-size:var(--fs-base);padding:11px 22px;border-radius:var(--radius-pill);border:none;cursor:pointer;background:linear-gradient(180deg,var(--primary-light),var(--primary));color:var(--panel);box-shadow:0 2px 8px color-mix(in srgb, var(--primary) 28%, transparent);transition:var(--t);}
:is(button,a).btn:hover{filter:brightness(1.07);box-shadow:0 4px 14px color-mix(in srgb, var(--primary) 34%, transparent);transform:translateY(-1px);}
:is(button,a).btn:active{transform:translateY(0) scale(.98);}
:is(button,a).btn.ghost{background:var(--panel);border:1px solid var(--line);color:var(--ink);box-shadow:none;}
:is(button,a).btn.ghost:hover{border-color:var(--primary-ink);color:var(--primary-ink);background:var(--primary-pale);transform:translateY(-1px);box-shadow:var(--shadow-xs);}
:is(button,a).btn.danger{background:var(--panel);color:var(--brick);border:1px solid rgba(155,65,48,.25);box-shadow:none;}
:is(button,a).btn.danger:hover{background:var(--brick-pale);border-color:var(--brick);transform:translateY(-1px);}
:is(button,a).btn.small{padding:7px 16px;font-size:var(--fs-sm);border-radius:var(--radius-pill);}
:is(button,a).btn:disabled{opacity:.5;cursor:not-allowed;transform:none;filter:none;}
/* ⚠ הכלל היה button.btn בלבד, ולכן חמשת הקישורים עם class="btn" — בהם
   כפתור החיוג לאנשי קשר בחירום, הכניסה עם Google וחיבור הדואר — הוצגו
   כטקסט רגיל ולא ככפתור. :is(button,a) שומר על אותה ספציפיות בדיוק
   (0,1,1), ולכן אף כלל קיים לא מנצח או מפסיד אחרת. */
a.btn{display:inline-block;text-align:center;text-decoration:none;line-height:1.5;}

/* ---- table ---- */
table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);}
th{text-align:right;color:var(--ink-soft);font-weight:700;font-size:var(--fs-xs);letter-spacing:.02em;text-transform:uppercase;padding:10px 8px;border-bottom:2px solid var(--line);}
td{padding:10px 8px;border-bottom:1px solid var(--bg);transition:background .12s var(--ease);}
tr:hover td{background:var(--primary-pale);}
.tag{display:inline-block;padding:4px 10px;border-radius:var(--radius-sm);font-size:var(--fs-xs);font-weight:700;white-space:nowrap;line-height:1.35;}
@media (max-width:600px){
  .tag button{min-width:44px;min-height:44px;font-size:var(--fs-md);}
}
th.sortable{cursor:pointer;user-select:none;transition:var(--t);}
th.sortable:hover{color:var(--primary);}
/* ⚠ כותרת שממיינת חייבת להיות כפתור, לא <th onclick>.
   ------------------------------------------------------------------------
   <th> אינו ניתן למיקוד ואינו מגיב ל-Enter או לרווח, ולכן המיון בטבלה
   היה זמין לעכבר בלבד. all:unset מסיר גם את חיווי המיקוד, ולכן
   :focus-visible מחזיר אותו במפורש — בלעדיו מי שמנווט/ת במקלדת אינו
   רואה איפה הוא נמצא. */
th .th-sort{
  all:unset;display:inline-flex;align-items:center;gap:4px;
  cursor:pointer;font:inherit;color:inherit;
}
/* ⚠ אחרי המעבר לכפתור נעלם כל סימן שאפשר למיין: th.sortable נשא
   cursor:pointer ושינוי צבע ב-hover, והכותרת החדשה נראתה כטקסט מת.
   החץ העמום אומר "אפשר למיין כאן" גם בלי לרחף. */
th .th-sort .th-arrow{font-size:.82em;opacity:.32;}
th .th-sort.is-sorted .th-arrow{opacity:1;color:var(--primary);}
th .th-sort:hover{color:var(--primary);text-decoration:underline;}
th .th-sort:hover .th-arrow{opacity:.75;}
th .th-sort:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px;}
.tag.income{background:var(--primary-pale);color:var(--primary-ink);}
.tag.expense{background:var(--brick-pale);color:var(--brick);}
.rowbtns{display:flex;gap:6px;}
.filters{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.filters select{min-width:140px;}
/* רוחב מינימלי לשדות חיפוש וסינון.
   -------------------------------------------------------------------------
   הרוחב הזה היה עד עכשיו סגנון מוטבע (style="min-width:200px") ישירות על
   שבעה שדות. סגנון מוטבע גובר על כל כלל בגיליון, ולכן הכלל שאמור לכווץ
   אותם בנייד — .filters input{width:100%;min-width:0} — פשוט לא נכנס
   לתוקף. בטלפון של 360 פיקסלים שדה של 200 לצד תפריט של 140 חרג מהמסך
   בכל אחד ממסכי הסינון.

   מחלקה במקום סגנון מוטבע היא מה שמאפשר לכלל הנייד לנצח. */
.filter-grow{min-width:200px;}

/* ---- chart ---- */
.chart-wrap{overflow-x:auto;}
.legend{display:flex;gap:16px;font-size:var(--fs-sm);color:var(--ink-soft);margin-top:8px;}
.legend span{display:inline-flex;align-items:center;gap:6px;}
.legend i{width:10px;height:10px;border-radius:2px;display:inline-block;}

/* ---- projects ---- */
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:14px;}
.proj-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm);transition:var(--t);}
.proj-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.proj-card h3{margin:0 0 6px;font-size:var(--fs-md);color:var(--primary);}
/* ⚠ שם הפרויקט פתח את החלון דרך onclick על ה-<h3> עצמו: לא ניתן
   למיקוד, לא נפתח ב-Enter, ולא מוכרז ככפתור. */
.proj-card h3 .proj-title-btn{all:unset;cursor:pointer;font:inherit;color:inherit;}
.proj-card h3 .proj-title-btn:hover{text-decoration:underline;}
.proj-card h3 .proj-title-btn:focus-visible{
  outline:2px solid var(--primary);outline-offset:3px;border-radius:4px;
}
.status{display:inline-block;font-size:var(--fs-xs);font-weight:700;padding:4px 10px;border-radius:var(--radius-sm);white-space:nowrap;line-height:1.35;}
.status.planned{background:var(--gold-pale);color:var(--gold);}
.status.active{background:var(--primary-pale);color:var(--primary-ink);}
.status.done{background:var(--bg);color:var(--ink-mid);}
.progress-track{height:8px;border-radius:var(--radius-xs);background:var(--bg);margin:10px 0 4px;overflow:hidden;}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--primary-light));transition:width .3s var(--ease);}
.proj-meta{font-size:var(--fs-sm);color:var(--ink-soft);display:flex;justify-content:space-between;margin-top:6px;}

/* ⚠ הכרטיס היה ארבע שורות של "תווית: ערך | תווית: ערך" בזו אחר זו,
   בלי היררכיה ובלי מנוחה לעין — טבלה קטנה שמתחזה לכרטיס. כאן:
   כותרת, תיאור, מדידה, ואז רשימת נתונים מיושרת, ובסוף תגי החריגים.

   ⚠ flex-direction:column יחד עם margin-top:auto על שורת הכפתורים:
   בלעדיהם כפתורי "ניהול מלא" של כרטיסים סמוכים יושבים בגבהים שונים
   לפי אורך התיאור, והרשת נראית שבורה. */
.proj-card{display:flex;flex-direction:column;}
.proj-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.proj-desc{margin:0 0 10px;font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.5;}
.proj-bar-line{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  font-size:var(--fs-sm);color:var(--ink-soft);margin-top:5px;
}
.proj-bar-line b{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--ink-mid);}
.proj-stats{
  margin:0;padding-top:10px;border-top:1px solid var(--line);
  display:grid;gap:5px;
}
.proj-stat{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:var(--fs-sm);}
.proj-stat dt{color:var(--ink-soft);}
.proj-stat dd{margin:0;color:var(--ink-mid);font-weight:600;text-align:end;}
.proj-stat.is-bad dd{color:var(--brick);}
.proj-stat.is-warn dd{color:var(--amber);}
/* ⚠ חריג הוא תג ולא טקסט אדום בתוך שורה. טקסט אדום בין נתונים אחרים
   נקרא כחלק מהם; תג נקרא כדבר שקרה. */
.proj-flags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.proj-flag{
  font-size:var(--fs-xs);font-weight:700;padding:3px 9px;
  border-radius:var(--radius-pill);white-space:nowrap;line-height:1.5;
}
.proj-flag.bad{background:var(--brick-pale);color:var(--brick);}
.proj-flag.warn{background:var(--amber-pale);color:var(--amber);}
/* ⚠ שתי שורות ולא אחת.
   ------------------------------------------------------------------------
   ארבעה כפתורים בשורה אחת בכרטיס ברוחב 280 פיקסלים אילצו כל אחד מהם
   לוותר על התווית ולהישאר אייקון בלבד, ושני אייקונים סמוכים (מדפסת
   וחץ הורדה) אינם אומרים למי שרואה אותם בפעם הראשונה מה ההבדל ביניהם.

   הפעולה הראשית תופסת שורה שלמה, ושלוש פעולות הייצוא והמחיקה מתחלקות
   בשורה שמתחתיה — כל אחת עם המילה שלה. */
.proj-card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:12px;}
.proj-card-actions .btn{flex:1 1 auto;white-space:nowrap;}
.proj-card-actions .btn.is-primary-action{flex:1 1 100%;}
.proj-status-select{font-size:var(--fs-xs);padding:3px 6px;flex-shrink:0;}

/* ---- מה השתנה מאז הייבוא הקודם ---- */
.util-change{margin-top:var(--space-3);}
.util-change .uc-alert{color:var(--brick);}
.util-change .uc-hint{display:block;margin-top:4px;font-size:var(--fs-xs);color:var(--ink-soft);}
.ud-chip{
  display:inline-flex;align-items:center;gap:3px;
  padding:1px 8px;border-radius:var(--radius-pill);
  font-size:var(--fs-xs);font-weight:700;white-space:nowrap;
  margin-inline-start:6px;
}
/* ⚠ החץ הוא תוספת ולא הסימן: הסכום והצבע נושאים את המידע גם בלעדיו. */
.ud-up{background:var(--brick-pale);color:var(--brick);}
.ud-down{background:var(--green-pale);color:var(--green);}
/* ⚠ --brick-solid ולא --brick: כאן הצבע הוא רקע מתחת לטקסט לבן,
   ובמצב כהה --brick הוא בהיר — ולבן על בהיר אינו נקרא. */
.ud-crossed{background:var(--brick-solid);color:#fff;}

/* ---- טריות הנתונים ----
   ⚠ שורה דקה ולא כרטיסים. פאנל סטטוס קודם הוסר בדיוק כי הוא נראה כמו
   רשימה שנייה לצד משבצות ההעלאה; כאן זו שורת מטא-דאטה שמלווה את
   המספרים, ולא מתחרה בהם על תשומת הלב. */
.fin-fresh{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 var(--space-3);}
.ff-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:var(--radius-pill);
  font-size:var(--fs-xs);font-weight:600;
  background:var(--bg);color:var(--ink-soft);border:1px solid var(--line);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* ⚠ הגוון לעולם אינו הסימן היחיד — הטקסט עצמו אומר "עודכן לפני X". */
.ff-chip.ff-ok{background:var(--green-pale);color:var(--green);border-color:rgba(47,107,79,.22);}
.ff-chip.ff-warn{background:var(--amber-pale);color:var(--amber);border-color:rgba(125,78,18,.22);}
.ff-chip.ff-late{background:var(--brick-pale);color:var(--brick);border-color:rgba(155,65,48,.24);}
.ff-chip.ff-missing{border-style:dashed;}
.ff-link{
  background:none;border:0;cursor:pointer;font:inherit;
  font-size:var(--fs-xs);font-weight:700;color:var(--primary);
  padding:3px 6px;border-radius:var(--radius-sm);min-height:32px;
}
.ff-link:hover{background:var(--primary-pale);}

/* ---- שורת ההתמצאות בראש מסכי הכספים ----
   ⚠ ארבעה מסכים מסתכלים על אותם נתונים בחתכים שונים. השורה אומרת שני
   דברים שאי אפשר לנחש מהשם: על איזו שאלה המסך עונה, ומאיזה קובץ הוא
   ניזון — ומפנה למסך הנכון כשהשאלה שלך היא אחרת. */
.screen-lede{
  margin:0 0 var(--space-4);padding:12px 14px;
  background:var(--primary-pale);border-inline-start:4px solid var(--primary);
  border-radius:var(--radius-sm);
  font-size:var(--fs-sm);line-height:1.6;color:var(--ink-mid);
}
.screen-lede b{color:var(--ink);}
.screen-lede span{display:block;margin-top:4px;font-size:var(--fs-xs);color:var(--ink-soft);}
.screen-lede span b{color:var(--primary);font-weight:700;}
@media print{ .screen-lede{display:none;} }

/* ---- קיבוץ לפי סעיף בדוח הניצול ----
   ⚠ אותה שפה ויזואלית כמו bc-cat במסך "תקציב מול ביצוע", בכוונה:
   זה בדיוק אותו פילוח על אותם נתונים, ושתי צורות שונות לאותו דבר הן
   מה שגרם למסך להיראות כשני מסכים. */
.util-cat{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px;overflow:hidden;background:var(--panel);}
.util-cat-over{border-inline-start:4px solid var(--brick);}
.util-cat-head{
  width:100%;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 14px;background:none;border:0;cursor:pointer;text-align:start;
  font-size:var(--fs-sm);color:var(--ink);min-height:48px;
}
.util-cat-head:hover{background:var(--primary-pale);}
.util-cat-caret{color:var(--primary);font-size:var(--fs-xs);flex-shrink:0;}
.util-cat-meta{color:var(--ink-soft);font-size:var(--fs-xs);}
.util-cat-nums{margin-inline-start:auto;font-weight:700;color:var(--ink-mid);white-space:nowrap;}
.util-cat-body{padding:0 12px 12px;}

/* ⚠ מצב הפרסום של פרוטוקול — מילה וגם צבע.
   "חסוי" ו"מפורסם" הם ההבדל בין דיון פנימי לבין מסמך שכל היישוב קורא,
   ולכן הם נאמרים במילים ולא נרמזים בגוון בלבד. */
.pub-badge{
  font-size:var(--fs-xs);font-weight:700;padding:2px 9px;
  border-radius:var(--radius-pill);white-space:nowrap;flex-shrink:0;
}
.pub-on{background:var(--green-pale);color:var(--green);}
.pub-off{background:var(--bg);color:var(--ink-soft);border:1px dashed var(--line);}

/* ⚠ פרויקט בלי תקציב — אמירה, ולא סרגל ריק */
.proj-nobudget{
  margin:10px 0 4px;padding:6px 10px;border-radius:var(--radius-sm);
  background:var(--bg);border:1px dashed var(--line);
  font-size:var(--fs-xs);color:var(--ink-soft);
}

/* ---- סרגל הסינון של הפרויקטים ---- */
.proj-toolbar{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px;}
.proj-toolbar .field{margin:0;}

/* ⚠ פס צבע בצד הכרטיס, לא רקע צבעוני.
   הסטטוס היה קיים רק כתוכן ה-<select>, כלומר היה צריך לקרוא כל כרטיס
   בנפרד כדי לדעת מה בביצוע ומה רק בתכנון. אותה מוסכמה ככרטיסי האחזקה. */
.proj-card{border-inline-start:4px solid var(--line);}
.proj-planned{border-inline-start-color:var(--ink-soft);}
.proj-active {border-inline-start-color:var(--primary);}
.proj-done   {border-inline-start-color:var(--green);}
.proj-done h3{color:var(--ink-soft);}

/* ⚠ הדחיפות היא צבע *ומילה* ("באיחור"), ולא צבע בלבד - מי שאינו מבחין
   בין אדום לכתום עדיין צריך לקבל את המידע. */
.proj-due-late{color:var(--brick);font-weight:700;}
.proj-due-warn{color:var(--amber);font-weight:700;}

/* חריגה מהתקציב: הסרגל מגיע ל-100% ומחליף צבע, כי מעבר לזה אין לאן לגדול */
.progress-fill.over{background:linear-gradient(90deg,var(--amber),var(--brick));}

/* ---- messages ---- */
.msg{border-bottom:1px solid var(--bg);padding:14px 0;}
.msg:last-child{border-bottom:none;}
.msg-head{display:flex;align-items:center;gap:8px;margin-bottom:5px;font-size:var(--fs-sm);}
.msg-head b{color:var(--primary);}
.msg-head .time{color:var(--ink-soft);font-size:var(--fs-xs);margin-inline-start:auto;}
.cat-pill{display:inline-block;font-size:var(--fs-xs);font-weight:700;padding:3px 9px;border-radius:var(--radius-sm);background:var(--gold-pale);color:var(--gold);white-space:nowrap;line-height:1.35;}
.cat-pill.urgent{background:var(--brick-pale);color:var(--brick);}
/* אזהרה שהיא כבר כשל — אותו מבנה, צבע שאומר "זה קרה". */
.note.is-danger{
  color:var(--brick);background:var(--brick-pale);
  border-color:rgba(155,48,48,.3);border-inline-start-color:var(--brick);
}

.empty{
  /* 30 פיקסלים ריפוד ועוד אייקון של 46 נתנו תיבה בגובה ~150 פיקסלים
     כדי לומר "אין כלום". בלוח בקרה עם שני פאנלים ריקים זה חצי מסך של
     כלום, שדוחף את מה שכן יש מתחת לקו הגלילה. */
  text-align:center;padding:20px 16px;color:var(--ink-soft);font-size:var(--fs-base);line-height:1.6;
  border:1px dashed var(--line);border-radius:var(--radius);
  /* ⚠ היה linear-gradient(#FCFDFE,#F6F8FC) קשיח: במצב כהה כל "אין עדיין..."
     היה מלבן כמעט לבן עם טקסט אפור-בהיר עליו (~2.5:1). טוקן במקום. */
  background:var(--bg);
}
/* "מאיפה מתחילים" — כפתור בתוך מצב ריק שמוביל לטופס שמעליו */
.empty .empty-act{ display:block; margin:10px auto 0; }
.empty::before{
  content:'';display:block;width:34px;height:34px;margin:0 auto 8px;opacity:.4;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235D6B7C' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13.5h4.2l1.8 2.7h6l1.8-2.7H21'/%3E%3Cpath d='M6 4.5h12l3 9v4.5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V13.5l3-9z'/%3E%3C/svg%3E");
}
#protocolDropzone:hover{border-color:var(--primary-light);background:var(--primary-pale);}
#protocolDropzone.dragover{border-color:var(--primary-ink);background:var(--primary-pale);box-shadow:var(--shadow-md);}
#bulletinDropzone:hover{border-color:var(--primary-light);background:var(--primary-pale);}
#bulletinDropzone.dragover{border-color:var(--primary-ink);background:var(--primary-pale);box-shadow:var(--shadow-md);}
/* התראות ככרטיסים מובחנים ולא כשורות טקסט.
   שלוש דרגות, וכל אחת נבדלת בשלושה אמצעים בו-זמנית: צבע, אייקון, ופס צד עבה.
   הצבע לבדו לא מספיק - לא לעיוורי צבעים ולא בהדפסה בשחור-לבן. */
/* ⚠ הסבר אינו אזהרה, ולכן אינו צהוב.
   =========================================================================
   .note הוא ענבר — צבע של "שים לב". הוא שימש גם להסברים קבועים ("כל
   הסכומים כוללים מע"מ", "תיק הפרויקט: חוזים ותכניות"), ומסך שכל הסבר
   בו צהוב מאמן את העין להתעלם מצהוב — וכשמגיעה אזהרה אמיתית, כמו פער
   מימון, היא נבלעת בין ההסברים.

   .info-note הוא אותו מבנה בדיוק בכחול השקט של המערכת: אותה היררכיה,
   בלי הצעקה. */
.info-note{
  font-size:var(--fs-sm);line-height:1.55;color:var(--ink-mid);
  background:var(--primary-pale);border-inline-start:4px solid var(--primary);
  border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);
  margin-bottom:var(--space-4);
}
.info-note b{color:var(--ink);}

/* שורת סייג — הערה שצריכה להיות זמינה אבל לא לתפוס נפח. */
.fine-print{
  display:block;font-size:var(--fs-xs);color:var(--ink-soft);
  margin:0 0 var(--space-4);line-height:1.5;
}
.fine-print b{color:var(--ink-mid);}

.note{
  position:relative;font-size:var(--fs-base);line-height:1.55;
  color:var(--gold);background:var(--gold-pale);
  border:1px solid rgba(140,138,76,.3);border-inline-start:5px solid var(--gold-accent);
  border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);
  margin-bottom:var(--space-4);
}
.note b{color:inherit;}

/* אזהרה - כתום */
.note-warn{
  color:var(--amber);background:var(--amber-pale);
  border-color:rgba(125,78,18,.28);border-inline-start-color:var(--amber);
}
/* חריגה חמורה - אדום */
.note-alert{
  color:var(--brick);background:var(--brick-pale);
  border-color:rgba(155,65,48,.3);border-inline-start-color:var(--brick);
}
/* מידע - כחול */
.note-info{
  color:var(--primary-ink);background:var(--primary-pale);
  border-color:rgba(19,73,171,.22);border-inline-start-color:var(--primary);
}
/* חיובי - ירוק */
.note-ok{
  color:var(--green);background:var(--green-pale);
  border-color:rgba(47,107,79,.25);border-inline-start-color:var(--green);
}
.note-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:var(--radius-pill);flex-shrink:0;
  /* ⚠ היה background:currentColor + color:var(--panel) — currentColor הוא
     הצבע של האלמנט עצמו, כלומר panel, והאות "i" נצבעה בצבע הרקע שלה (1:1).
     עיגול מתאר בצבע ההודעה עובד בכל סוגי ההודעות ובשני המצבים. */
  background:none;color:inherit;border:2px solid currentColor;
  font-size:var(--fs-xs);font-weight:800;margin-inline-end:var(--space-2);
}
.note-head{display:flex;align-items:center;gap:var(--space-1);font-weight:700;margin-bottom:var(--space-1);}

/* ---- gate ---- */
/* =========================================================================
   סולם השכבות (z-index) — למה המספרים הם מה שהם
   -------------------------------------------------------------------------
   הכותרת היא position:sticky עם z-index:100, והניווטים יושבים *בתוכה*.
   לכן היא הקשר ערימה שלם: כל מה שבתוכה נצבע ברמה 100, ללא קשר ל-z-index
   הפרטי שלו. משמעות הדבר היא שכל דבר שאמור לכסות את הכותרת חייב z-index
   גדול מ-100 — ולא מספיק שהוא "אחרי" בקוד.

   קודם מסך ההתחברות היה 50 והחלונות 60, כלומר *מתחת* לכותרת: פס הכותרת,
   הלוגו וכפתור ההמבורגר צפו מעל מסך ההתחברות ומעל כל חלון פתוח, וכשהמגירה
   הייתה פתוחה היא כיסתה את החלון.

   הסולם:
      39   רקע כהה מאחורי מגירת הניווט (מחוץ לכותרת, ולכן מתחתיה)
     100   הכותרת ובתוכה הניווטים והמגירות
     150   כפתור החירום הצף — מעל התוכן, מתחת לכל חלון
     400   מסך ההתחברות
     500   חלונות (modals)
     510   תצוגת קובץ — נפתחת מתוך חלון אחר
     520   תעודת אישור ועדת בנייה — נפתחת מתוך חלון הפרטים
     900   הודעות מרחפות (toast) — חייבות להיראות גם מעל חלון
   ========================================================================= */
#gate{position:fixed;inset:0;background:linear-gradient(135deg, rgba(19,73,171,.55), rgba(36,49,40,.6));backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:400;}
#gate .box{background:var(--panel);border-radius:var(--radius-lg);padding:32px 30px;width:min(380px,90vw);box-shadow:var(--shadow-lg);animation:fade .3s var(--ease);}
#gate h2{margin:0 0 4px;color:var(--primary);font-size:var(--fs-xl);}
#gate p{color:var(--ink-soft);font-size:var(--fs-sm);margin:0 0 18px;}

/* ---- modal ---- */
.modal-bg{position:fixed;inset:0;background:rgba(20,28,38,.55);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;z-index:500;padding:20px;
  /* גלילה שהגיעה לסוף החלון לא ממשיכה לגלול את הדף שמאחוריו. בלי זה,
     גלילה בחלון ארוך בנייד "נדבקת" לדף, וכשסוגרים את החלון מוצאים את
     עצמנו במקום אחר לגמרי בעמוד. */
  overscroll-behavior:contain;}
/* חלון תצוגת הקובץ נפתח לעיתים קרובות מתוך חלון עריכה אחר שכבר פתוח (עריכת תושב/ת, פרוטוקולים, שורת תקציב וכו') - חייב תמיד לצוף מעליו */
#filePreviewModalBg{z-index:510;}
/* חלון האישור נפתח לעיתים קרובות מתוך חלון פרטי הבקשה שכבר פתוח - חייב תמיד לצוף מעליו */
#bldgApprovalCertModalBg{z-index:520;}
.modal-bg.open{display:flex;animation:fade .18s var(--ease);}
/* נעילת גלילת הדף כל עוד חלון פתוח.
   ------------------------------------------------------------------------
   overscroll-behavior למעלה מונע את *שרשור* הגלילה מתוך החלון אל הדף,
   אבל לא את גלילת הדף עצמו כשהאצבע נוגעת ברקע הכהה. המחלקה נוספת ומוסרת
   ב-app.js לפי מספר החלונות הפתוחים בפועל, ולא בכל פתיחה בנפרד — אחרת
   חלון שנפתח מתוך חלון אחר היה משחרר את הנעילה בסגירתו.

   הערה לעתיד: זהו הפתרון השמרני. ב-iOS Safari הוא מונע את הגלילה ברוב
   המצבים אך לא בכולם; הפתרון המלא (position:fixed על ה-body עם שמירת
   מקום הגלילה) נוגע גם בכותרת ה-sticky, ולכן לא נכנס כאן. */
body.modal-open{overflow:hidden;}
/* כפתור החירום יורד ל-150 בסולם החדש ולכן כבר אינו *מעל* החלונות — אבל
   הרקע הכהה שקוף למחצה, והכפתור האדום נראה דרכו כמו כתם. בנוסף הוא יושב
   בפינה התחתונה, בדיוק שם שבו יושבים כפתורי הפעולה של החלון. מעלימים אותו
   לגמרי כל עוד חלון פתוח. */
body.modal-open #emergencyFab{display:none !important;}
/* max-height: קודם 85vh בלבד.
   ------------------------------------------------------------------------
   vh בנייד מתייחס לחלון ה*גדול* — כלומר לגובה המסך כשסרגל הכתובת מוסתר.
   כל עוד הסרגל מוצג, 85vh גבוה מהאזור הנראה בפועל, ולכן תחתית החלון —
   בדיוק המקום שבו יושבים "שמירה" ו"ביטול" — נחתכה מתחת לממשק הדפדפן.
   dvh מודד את החלון הדינמי, זה שרואים באמת. שורת ה-vh נשארת ראשונה
   כגיבוי לדפדפנים ישנים שאינם מכירים dvh ויתעלמו מהשורה שאחריה. */
.modal{background:var(--panel);border-radius:var(--radius-lg);padding:var(--space-5);width:min(520px,100%);max-height:85vh;max-height:85dvh;overflow:auto;overscroll-behavior:contain;box-shadow:var(--shadow-lg);animation:modalIn .22s var(--ease);}
@keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.modal h3{margin:0 0 12px;color:var(--primary);}
.modal textarea.code{width:100%;height:180px;font-family:'JetBrains Mono',monospace;font-size:var(--fs-xs);}

.modal.wide{width:min(760px,100%);}
.modal-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px;}
.modal-topbar h3{margin:0;}
.modal-close{background:none;border:none;font-size:var(--fs-xl);line-height:1;color:var(--ink-soft);cursor:pointer;padding:8px 10px;min-width:44px;min-height:44px;border-radius:8px;transition:var(--t);}
.modal-close:hover{color:var(--brick);background:var(--brick-pale);}
.mtabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:10px 0 18px;}
.mtabs button{border:none;background:none;padding:9px 14px;font-family:'Heebo',system-ui,sans-serif;font-size:var(--fs-sm);font-weight:600;color:var(--ink-soft);cursor:pointer;border-radius:8px 8px 0 0;border-bottom:3px solid transparent;transition:var(--t);}
.mtabs button.active{color:var(--primary-ink);background:var(--primary-pale);border-bottom-color:var(--gold);}
.mtabs button:hover{color:var(--primary);}

.task-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--bg);}
.task-item:last-child{border-bottom:none;}
.task-item input[type=checkbox]{width:17px;height:17px;accent-color:var(--primary-light);flex-shrink:0;}
/* ⚠ 24px בנייד — יעד המגע המזערי של WCAG 2.5.8. העקיפה כאן ולא
   בבלוק הנייד שלמעלה, כי לשני הכללים ספציפיות זהה (0,2,1) וההכרעה
   נופלת לפי סדר הקובץ. אין כאן תווית עוטפת שתגדיל את השטח. */
@media (max-width:600px){ .task-item input[type=checkbox]{width:24px;height:24px;} }
.task-item span.txt{flex:1;font-size:var(--fs-base);}
/* ⚠ הקו נמתח על .task-title ולא על .txt כולו.
   ------------------------------------------------------------------------
   text-decoration מתפשט לכל הצאצאים, ו**צאצא אינו יכול לבטל אותו** —
   text-decoration:none על הילד פשוט אינו עושה כלום. התוצאה שנראתה
   במסך: "באחריות דנה לוי · 07/08/2026" קיבל קו מחיקה יחד עם שם המשימה,
   כאילו התאריך עצמו בוטל. הפתרון היחיד הוא לא למתוח את הקו מלכתחילה
   מעל האלמנט שמכיל את שניהם. */
/* ⚠ משימה באיחור מסומנת גם בקצה השורה ולא רק בצבע התאריך: ברשימה של
   עשר משימות העין סורקת שמות, לא תאריכים. */
.task-item.is-late{border-inline-start:3px solid var(--brick);padding-inline-start:9px;}
.task-item.done span.txt{color:var(--ink-soft);}
.task-item.done .task-title{text-decoration:line-through;}
.task-add-row{display:flex;gap:8px;margin-bottom:14px;}
.task-add-row input{flex:1;}
/* ⚠ המטא של המשימה בשורה משלו ולא לצידה.
   "באחריות X · 15/09/2026" לצד טקסט משימה ארוך דחק את הטקסט לשורה
   שנייה ושבר את היישור של כל הרשימה. */
.task-meta{display:block;font-size:var(--fs-xs);color:var(--ink-soft);margin-top:2px;}
/* רשימת הקבצים בתוך חלון ההוצאה, וסימוני המסמכים בטבלה */
/* שורת השמירה של חלון הפרויקט — נדבקת לתחתית החלון בכל הלשוניות. */
.pm-footer{
  position:sticky;bottom:-22px;z-index:5;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:18px -22px -22px;padding:12px 22px;
  background:var(--panel);border-top:1px solid var(--line);
}
.pm-footer .btn{margin-inline-start:auto;}
.pm-hint{font-size:var(--fs-xs);color:var(--ink-soft);}
/* ⚠ שלושת הכפתורים נשברו כל אחד לשתי שורות ("דוח מצב להדפסה / PDF"
   על שתי שורות) והשורה נראתה שבורה. כפתור הוא יחידה אחת. */
.pm-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.pm-actions .btn{white-space:nowrap;}
@media (max-width:640px){ .pm-footer{bottom:-16px;margin:16px -16px -16px;padding:12px 16px;} }
.ent-files{display:flex;flex-direction:column;gap:4px;margin-bottom:6px;}
/* ⚠ קובץ מצורף הוא שורה משלו ולא טקסט שנדחק בין שני כפתורים.
   "דרישת תשלום.pdf" נשבר לשתי שורות באמצע המילה כי השם, המרווח ושני
   הכפתורים חלקו את אותה שורה צרה. רקע קל הופך כל קובץ ליחידה שאפשר
   לסרוק בעין, והשם מקבל שורה שלמה כשאין מקום. */
.ent-file{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:var(--fs-xs);padding:5px 8px;
  background:var(--bg);border-radius:var(--radius-sm);
}
.ent-file b{flex:1 1 140px;min-width:0;font-weight:600;color:var(--primary);overflow-wrap:anywhere;}
.ent-file .grow{margin-inline-start:auto;}
/* ⚠ min-width כדי ששני התגים ישבו בשורה אחת. בלעדיו העמודה נדחסה
   לרוחב תג אחד, התגים נערמו זה על זה, וכל שורה בטבלה הוכפלה בגובהה. */
/* כותרת מתקפלת שנראית כמו כפתור, כי היא כפתור. */
.roll-head{
  display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  padding:6px 0;font-weight:700;color:var(--primary);font-size:var(--fs-md);
}
.roll-head::-webkit-details-marker{display:none;}
.roll-head::before{content:'▸';font-size:var(--fs-sm);transition:transform .18s var(--ease);}
details[open] > .roll-head::before{transform:rotate(-90deg);}
.roll-head:hover{color:var(--primary-light);}
.roll-head:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:var(--radius-xs);}
.roll-head .count{
  font-size:var(--fs-xs);font-weight:600;color:var(--ink-soft);
  background:var(--bg);border-radius:var(--radius-pill);padding:1px 9px;
}
.ent-tags{display:flex;flex-wrap:wrap;gap:4px;min-width:118px;}
/* "נותר לשלם" הוא פירוט של הסטטוס ולא עמודה בפני עצמה. */
.ent-sub{font-size:var(--fs-xs);color:var(--ink-soft);margin-top:3px;white-space:nowrap;}
.ent-tag{
  display:inline-block;padding:2px 7px;border-radius:var(--radius-pill);
  font-size:var(--fs-xs);font-weight:600;line-height:1.6;
  background:var(--primary-pale);color:var(--primary-ink);
  border:none;font-family:inherit;
}
/* ⚠ "דרישת תשלום" שנשבר לשתי שורות הכפיל את גובה כל שורת הוצאה
   בטבלה. תג הוא יחידה אחת. */
.ent-tag{white-space:nowrap;}
button.ent-tag{cursor:pointer;}
button.ent-tag:hover{background:var(--primary);color:var(--on-primary);}
button.ent-tag:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
/* ⚠ "אין" הוא מידע ולא היעדר מידע: תג עמום אומר שהמסמך טרם הועלה,
   בעוד ששום דבר על המסך נקרא כאילו העמודה לא רלוונטית לשורה הזו. */
.ent-tag.none{background:var(--bg);color:var(--ink-soft);font-weight:500;}
/* ⚠ שולם בלי אסמכתא — זו בקרה, לא קישוט. תשלום שיצא ואין לו הוכחה
   הוא בדיוק מה שנשאלים עליו בביקורת. */
.ent-tag.miss{background:var(--brick-pale);color:var(--brick);}
/* קו המחיקה שייך לטקסט המשימה, לא לתאריך שלה. */
.task-item.done .task-meta{text-decoration:none;}

.reg-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--bg);font-size:var(--fs-sm);flex-wrap:wrap;}
.reg-item:last-child{border-bottom:none;}
.reg-item b{color:var(--primary);}
.reg-item .amt{font-family:'JetBrains Mono',monospace;color:var(--brick);margin-inline-start:auto;}
/* תגיות סטטוס תשלום.
   שלושה מצבים קיימים בנתונים - לא שולם, שולם חלקית, שולם במלואו - אבל עד
   כה היו רק שני עיצובים: "לא שולם" ו"שולם חלקית" נראו זהים לחלוטין, ולא
   היה אפשר להבחין ביניהם במבט. עכשיו לכל מצב מראה משלו. */
.reg-status{
  display:inline-flex;align-items:center;gap:5px;
  font-size:var(--fs-xs);font-weight:700;padding:4px 10px;
  /* radius מתון ולא כדורי.
     ------------------------------------------------------------------
     עם radius של 999px, תגית שנשברה לשתי שורות קיבלה עיגול מלא סביב כל
     שורה בנפרד ונראתה כשתי טיפות מדורגות. nowrap מונע את השבירה מלכתחילה,
     ו-radius מתון מבטיח שגם אם תוסיף בעתיד תווית ארוכה יותר - הצורה
     תישאר סבירה במקום להישבר. */
  border-radius:var(--radius-sm);border:1px solid transparent;
  white-space:nowrap;line-height:1.35;
}
.reg-status::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0;}
/* התא שמכיל את התגית לא נדחס מתחת לרוחב שלה */
td:has(> .reg-status){white-space:nowrap;}

.reg-status.reg-paid,   .reg-status.paid{background:var(--green-pale);color:var(--green);border-color:rgba(47,107,79,.22);}
.reg-status.reg-partial{background:var(--amber-pale);color:var(--amber);border-color:rgba(125,78,18,.22);}
.reg-status.reg-unpaid, .reg-status.pending{background:var(--bg);color:var(--ink-mid);border-color:var(--line);}
/* ⚠ שישה סעיפים ברצף בלי הפרדה נראו כרשימה אחת ארוכה. קו שמתמשך עד
   סוף השורה הופך כל כותרת לחוצץ, וסעיף ריק נשאר שקט. */
.doc-section{margin-top:18px;}
.doc-section:first-of-type{margin-top:8px;}
.doc-section-head{
  display:flex;align-items:center;gap:10px;
  margin:0 0 2px;font-size:var(--fs-md);color:var(--primary);font-weight:700;
}
.doc-section-head::after{content:'';flex:1;height:1px;background:var(--line);}
.doc-section-head .count{
  font-size:var(--fs-xs);font-weight:600;color:var(--ink-soft);
  background:var(--bg);border-radius:var(--radius-pill);padding:1px 8px;
}
.doc-section-empty{font-size:var(--fs-xs);color:var(--ink-soft);padding:4px 0 2px;}
.doc-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--bg);flex-wrap:wrap;}
.doc-item:last-child{border-bottom:none;}
.doc-item b{color:var(--primary);}

::-webkit-scrollbar{height:9px;width:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#C7CFDB;border-radius:var(--radius-xs);}
::-webkit-scrollbar-thumb:hover{background:#AEB9C9;}

.toast{
  pointer-events:auto;
  background:var(--ink);color:var(--panel);padding:13px 22px;border-radius:var(--radius-md);
  font-size:var(--fs-base);box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(14px) scale(.96);transition:opacity .28s var(--ease), transform .28s var(--ease);
  max-width:420px;text-align:center;
}
.toast.show{opacity:1;transform:translateY(0) scale(1);}
/* מיקום הערימה. היה style inline על #toastContainer, ועבר לכאן כשנוסף
   האזור השני לשגיאות. z-index 900 — ראו את סולם השכבות ב-#gate. */
.toast-stack{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:900;
  display:flex;flex-direction:column-reverse;gap:8px;align-items:center;
  pointer-events:none;max-width:92vw;
}
.toast-lane{display:flex;flex-direction:column-reverse;gap:8px;align-items:center;}
.toast-lane:empty{display:none;}
/* ⚠ שגיאה שנעלמת אחרי 3.4 שניות היא שגיאה שחלק מהאנשים לא הספיקו
   לקרוא (WCAG 2.2.1). שגיאה נשארת 10 שניות, נעצרת כשהעכבר או המיקוד
   עליה, ויש לה כפתור סגירה. */
.toast{display:flex;align-items:center;gap:12px;}
.toast-msg{flex:1;}
.toast-close{
  flex-shrink:0;display:grid;place-items:center;width:28px;height:28px;
  margin-inline-end:-8px;border:none;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.16);color:inherit;font:inherit;font-size:var(--fs-sm);line-height:1;
}
.toast-close:hover{background:rgba(255,255,255,.28);}
.toast-close:focus-visible{outline:2px solid currentColor;outline-offset:2px;}

/* כותרת קבוצה מתקפלת (נכסים, פרוטוקולים). הכפתור יושב *בתוך* ה-h3 כדי
   ששני הדברים יישמרו: ניווט לפי כותרות, ומצב פתוח/סגור (aria-expanded). */
.group-head{margin:18px 0 8px;font-size:var(--fs-base);}
.group-toggle{
  display:flex;align-items:center;gap:8px;width:100%;padding:4px 0;
  border:none;background:none;cursor:pointer;user-select:none;text-align:start;
  font:inherit;font-weight:800;color:var(--primary-ink);border-radius:var(--radius-xs);
}
.group-toggle:hover{text-decoration:underline;}
.group-arrow{display:inline-block;transition:transform .15s var(--ease);}
.group-count{color:var(--ink-soft);font-weight:400;}

/* כותרת כרטיס שהיא כפתור אמיתי (ראו data-a11y-skip ב-app.js).
   נראית בדיוק כמו הטקסט שהיה שם — רק נגישה למקלדת ולקורא מסך. הלחיצה
   עליה מבעבעת אל ה-onclick של הכרטיס, ולכן אין לה onclick משלה. */
.card-link{
  border:none;background:none;padding:0;margin:0;cursor:pointer;
  font:inherit;color:inherit;text-align:start;line-height:inherit;
  min-height:24px;   /* WCAG 2.5.8 — בלי זה יצא 23.9px בשורת שם בכרטיס */
}
.card-link:hover{text-decoration:underline;}

/* טקסט עזר קטן ועמום. שלושת אלה היו style="..." זהה ב-36 מקומות בקוד;
   מחלקה אחת אומרת שאם משנים את מראה טקסט העזר — משנים אותו פעם אחת. */
.hint-xs{font-size:var(--fs-xs);color:var(--ink-soft);}
.hint-sm{font-size:var(--fs-xs);color:var(--ink-soft);}
.note-sm{margin:6px 0 0;font-size:var(--fs-xs);}

/* כפתור שנראה כקישור (פעולה שאינה ניווט, אבל ממוקמת בתוך טקסט) */
.link-btn{
  border:none;background:none;padding:0;cursor:pointer;font:inherit;
  color:var(--primary-ink);text-decoration:underline;text-underline-offset:2px;
}
.link-btn:hover{text-decoration-thickness:2px;}

/* הצהרת הנגישות */
.a11y-statement h4{margin:18px 0 6px;font-size:var(--fs-md);color:var(--ink);}
.a11y-statement p,.a11y-statement li{font-size:var(--fs-base);line-height:1.65;color:var(--ink);}
.a11y-statement ul{margin:0;padding-inline-start:20px;}
.a11y-statement .a11y-updated{margin-top:18px;font-size:var(--fs-sm);color:var(--ink-soft);}
.toast.toast-success{background:linear-gradient(135deg,var(--primary-light),var(--primary));}
.toast.toast-error{background:linear-gradient(135deg,#B54F3B,var(--brick-solid));}
.toast.toast-info{background:#2B3644;}

.mtabs-sticky-wrap{position:sticky;top:-22px;background:var(--panel);z-index:5;margin:0 -22px;padding:0 22px;}
@media (max-width:600px){
  .mtabs-sticky-wrap{top:-16px;margin:0 -16px;padding:0 16px;}
}

@media (max-width:600px){
  .brand-header{padding:12px 14px 0;}
  .brand img.logo-img{height:38px;}
  .brand-text h1{font-size:var(--fs-md);}
  .brand-text span{display:none;} /* מסתיר את כותרת המשנה הארוכה במסכים צרים - גורמת לעומס חזותי ולגלישה מיותרת */
  /* 10 ולא 8: בטלפון הכותרת צפופה ממילא, ו-8 הצמיד את הלוגו לכפתור
     התפריט עד שהם נראו כרכיב אחד. יחד עם ה-margin של 6 על .brand זה
     נותן 16 פיקסלים ליד הלוגו — מספיק להפריד, בלי לדחוף את שם היישוב
     לשורה שנייה במסך של 360. */
  .header-inner{gap:10px;row-gap:10px;}
  /* ה-margin מצטמצם מעט בטלפון, כי שם כל פיקסל נחשב */
  .brand{margin-inline-start:4px;}
  main{padding:18px 14px 50px;}
}

/* ================= מובייל: התאמה מקיפה ================= */
@media (max-width:640px){
  /* פחות בזבוז מקום בשוליים בפאנלים/כרטיסים/מודלים */
  .panel{padding:14px;}
  .modal-bg{padding:10px;}
  .modal{padding:16px;border-radius:16px;max-height:92vh;max-height:92dvh;}
  .modal.wide{width:100%;}
  .mtabs-sticky-wrap{top:-16px;margin:0 -16px;padding:0 16px;}

  /* חלון כניסה */
  #gate .box{padding:20px;width:94vw;}

}
@media (max-width:380px){
  .cards{grid-template-columns:minmax(0,1fr);}
  nav button{padding:11px 9px;font-size:var(--fs-sm);}
}

/* כיבוד העדפת מערכת ההפעלה "צמצום אנימציות" - חשוב למשתמשים עם רגישות לתנועה,
   סחרחורות או הפרעות קשב. הכל ממשיך לעבוד, פשוט בלי תנועה. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .card:hover,.panel:hover,.proj-card:hover,:is(button,a).btn:hover,.resident-icon-btn:hover .circle{transform:none!important;}
}

/* ---- נספחי האישור: תוכניות התושב/ת מוצמדות לאותו מסמך, כל אחת בעמוד נפרד ---- */
.attach-page{margin-top:26px;padding-top:18px;border-top:1px dashed var(--line);}
.attach-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-size:var(--fs-sm);color:var(--ink-soft);margin-bottom:10px;
}
.attach-head b{color:var(--primary);font-size:var(--fs-sm);}
.attach-img{display:block;max-width:100%;height:auto;margin:0 auto;border:1px solid var(--line);border-radius:var(--radius-xs);}
.attach-missing{
  border:1px dashed var(--line);border-radius:var(--radius-sm);padding:22px 16px;
  text-align:center;font-size:var(--fs-sm);color:var(--ink-soft);background:var(--row-alt);
}
.attach-status{
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:var(--fs-sm);color:var(--ink-soft);padding:18px 10px;
}
.attach-status .spinner{
  width:16px;height:16px;border-radius:50%;flex-shrink:0;
  border:2px solid var(--line);border-top-color:var(--primary);
  animation:attachSpin .8s linear infinite;
}
@keyframes attachSpin{to{transform:rotate(360deg);}}

/* =========================================================================
   מסך ההגדרות
   ========================================================================= */
.set-tabs{
  display:flex;gap:var(--space-1);flex-wrap:wrap;
  border-bottom:1px solid var(--line);margin-bottom:var(--space-5);
}
.set-tabs button{
  padding:var(--space-3) var(--space-4);min-height:46px;
  border:none;background:none;border-bottom:3px solid transparent;
  font-family:inherit;font-size:var(--fs-base);font-weight:600;color:var(--ink-mid);
  cursor:pointer;transition:var(--t);white-space:nowrap;
  border-radius:8px 8px 0 0;
}
.set-tabs button:hover{color:var(--primary-ink);background:var(--primary-pale);}
.set-tabs button.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:800;}

.set-hint{
  font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.55;
  margin:0 0 var(--space-4);
}
#tab-settings .panel h2{
  font-size:var(--fs-md);font-weight:800;color:var(--ink);
  margin:0 0 var(--space-2);
}
.theme-swatches{display:flex;gap:var(--space-3);flex-wrap:wrap;}

@media (max-width:640px){
  .set-tabs{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(var(--space-3) * -1);padding-inline:var(--space-3);
  }
  .set-tabs::-webkit-scrollbar{display:none;}
  .set-tabs button{font-size:var(--fs-sm);padding:var(--space-3);}
}

/* =========================================================================
   הודעות לתושבים
   -------------------------------------------------------------------------
   ערוץ שלא חובר מוצג מושבת ומסומן במפורש. הפיתוי היה להציג את כולם
   כזמינים ולשלוח רק לאתר בשקט - אבל אז מי שסימן "וואטסאפ" מאמין שההודעה
   יצאה. כפתור מושבת עם הסבר עדיף על הבטחה שלא מתקיימת.
   ========================================================================= */
.ch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:var(--space-2);}
.ch-opt{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3);border:1px solid var(--line);border-radius:16px;
  background:var(--panel);cursor:pointer;transition:var(--t);
}
.ch-opt:hover{border-color:var(--primary-light);}
.ch-opt input{width:18px;height:18px;flex-shrink:0;margin:0;}
/* התיבה יושבת בתוך <label class="ch-opt"> עם padding של 12px שכולו
   לחיץ, ולכן שטח הנגיעה כבר גדול; ההגדלה היא לדיוק האצבע על התיבה. */
@media (max-width:600px){ .ch-opt input{width:22px;height:22px;} }
.ch-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.ch-text b{font-size:var(--fs-base);color:var(--ink);}
.ch-text span{font-size:var(--fs-xs);color:var(--ink-soft);line-height:1.35;}
.ch-opt.ch-off{background:var(--bg);cursor:not-allowed;opacity:.72;}
.ch-opt.ch-off:hover{border-color:var(--line);}
.ch-badge{
  flex-shrink:0;font-size:var(--fs-xs);font-weight:700;color:var(--amber);
  background:var(--amber-pale);border-radius:var(--radius-pill);padding:3px 9px;white-space:nowrap;
}

.ann-card{
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-4);
  background:var(--panel);margin-bottom:var(--space-3);
}
.ann-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);}
.ann-card h3{font-size:var(--fs-md);font-weight:800;color:var(--ink);margin:0;line-height:1.3;}
.ann-body{font-size:var(--fs-base);color:var(--ink);line-height:1.6;margin:var(--space-2) 0 0;white-space:pre-wrap;}
.ann-meta{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:var(--fs-xs);color:var(--ink-soft);margin-top:var(--space-3);
}
.ann-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:var(--space-2);}
.ch-chip{
  font-size:var(--fs-xs);font-weight:700;padding:3px 9px;border-radius:var(--radius-pill);
  background:var(--green-pale);color:var(--green);white-space:nowrap;
}
.ch-chip.off{background:var(--bg);color:var(--ink-soft);border:1px solid var(--line);}

/* =========================================================================
   חיפוש מהיר
   -------------------------------------------------------------------------
   נפתח מלמעלה ולא במרכז המסך: העין כבר שם אחרי Ctrl+K, והרשימה גדלה
   כלפי מטה בלי לקפוץ.
   ========================================================================= */
/* נראה כמו שדה חיפוש ולא כאייקון: משתמש/ת מזדמנים אינם מנחשים שאייקון
   זכוכית מגדלת בפינה פותח חיפוש חוצה-מערכת, ורמז המקלדת חסר משמעות בנייד. */
/* שדה החיפוש.
   ------------------------------------------------------------------------
   כשהניווט מכווץ למגירה, השדה מקבל שוליים אוטומטיים ונדחף למרכז השורה —
   שם הוא בולט וקל למצוא. כשהניווט פרוש הוא זה שתופס את המרכז, ואין לאן
   למרכז; השדה יושב אז לצד פרטי המשתמש/ת.

   שוליים אוטומטיים ולא מיקום מוחלט: מיקום מוחלט היה ממרכז מדויק יותר,
   אבל גם מאפשר לשדה לחפוף פריטי ניווט במסך צר. שדה שרוכב על תפריט גרוע
   משדה שממורכז בקירוב. */
#paletteTrigger{
  display:none;align-items:center;gap:var(--space-2);
  height:44px;min-height:44px;padding:0 16px;min-width:44px;
  border:1px solid var(--line);border-radius:var(--radius-pill);
  background:var(--bg);color:var(--ink-mid);cursor:pointer;
  font-family:inherit;font-size:var(--fs-sm);transition:background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
/* box-shadow מוחרג מה-transition של הפקדים כאן בכוונה.
   הוא נושא את טבעת המיקוד, ומעבר של רבע שנייה עליה נמדד כ-0.065 פיקסלים
   ברגע ההגעה - כלומר טבעת שמתפוגגת פנימה במקום להופיע. מי שמנווט במקלדת
   צריך לדעת מיד איפה הוא נמצא, ולכן הצבעים מקבלים מעבר רך והטבעת לא.

/* סימון המיקוד בפקדי הכותרת נעשה ב-box-shadow ולא ב-outline.
   ------------------------------------------------------------------------
   שתי סיבות. הראשונה מעשית: הפקדים עגולים לגמרי (radius מלא), ו-outline
   מצויר כמלבן סביבם - הטבעת נראית כמו מסגרת שלא שייכת לצורה. box-shadow
   עוקב אחרי הפינות.

   השנייה: outline התנהג כאן באופן לא צפוי ולא הופיע כלל בבדיקה, גם עם
   כלל בעל עדיפות מלאה. box-shadow נכנס לתוקף באופן עקבי וניתן לאימות
   במדידה, וזה שווה יותר מהיצמדות למאפיין ה"נכון". */
#paletteTrigger:focus-visible,
.user-chip:focus-visible,
#mobileNavToggle:focus-visible,
.brand:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--panel), 0 0 0 6px var(--primary-light);
}
/* לוגו מלבני - פינה תואמת */
.brand:focus-visible{border-radius:var(--radius-md);}
#paletteTrigger:hover{border-color:var(--primary-light);color:var(--primary);background:var(--panel);}
/* הכיתוב כהה מספיק כדי להיקרא, ובהיר מספיק כדי לא להתחרות בשם היישוב */
.pal-placeholder{color:var(--ink-mid);}
.pal-placeholder{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:230px;font-size:var(--fs-sm);
}
/* במסך צר נשאר האייקון בלבד - טקסט שנחתך גרוע מהיעדרו */
/* הכיתוב בשדה החיפוש מוצג רק כשהניווט במגירה.
   ------------------------------------------------------------------------
   הוא תופס כ-230 פיקסלים, וכשהניווט פרוש אלה בדיוק הפיקסלים שחסרים לו.
   התוצאה הייתה שהניווט התכווץ להמבורגר גם במסך ברוחב 2560, והסרגל נראה
   חצי ריק: לוגו, חיפוש, משתמש, ושטח לבן.

   נקודת עצירה קבועה לא הייתה עוזרת כאן, כי הרוחב שהניווט צורך תלוי גם
   בגופן שנטען בפועל. התלייה במחלקה nav-collapsed קושרת את ההחלטה לאותה
   מדידה שמחליטה על הניווט עצמו. */
/* ⚠ הכלל שהיה כאן — body:not(.nav-collapsed) .pal-placeholder{display:none} —
   נכתב כשהניווט ישב באותה שורה עם הלוגו והחיפוש. מאז הניווט בשורה משלו
   (ראו "הסרגל העליון — שורה משלו"), והשורה הראשונה חצי ריקה: החיפוש נשאר
   זכוכית מגדלת ו-"Ctrl K" בלי מילה אחת שאומרת שזה חיפוש. עכשיו שדה רחב עם
   כיתוב. במגירה (טלפון/טאבלט) הוא ממורכז כמו קודם. */
body:not(.nav-collapsed) #paletteTrigger{
  flex:0 1 420px; min-width:260px; margin-inline:auto;
  justify-content:flex-start;
}
body:not(.nav-collapsed) .pal-placeholder{ max-width:none; flex:1; text-align:start; }
body:not(.nav-collapsed) .pal-kbd{ margin-inline-start:auto; }
@media (max-width:520px){ .pal-placeholder{display:none;} }
.pal-kbd{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-xs);
  padding:3px 7px;color:var(--ink-mid);margin-inline-start:var(--space-2);
}
@media (max-width:900px){ .pal-kbd{display:none;} #paletteTrigger{padding:0 10px;} }

#paletteBg{align-items:flex-start;padding-top:12vh;}
.pal-box{
  width:min(620px, 94vw);
  background:var(--panel);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;display:flex;flex-direction:column;max-height:70vh;
}
.pal-head{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-4);border-bottom:1px solid var(--line);color:var(--ink-soft);
}
.pal-head input{
  flex:1;border:none;background:none;padding:0;
  font-family:inherit;font-size:var(--fs-lg);color:var(--ink);
}
/* ⚠ השדה בפלטת הפקודות הוא חסר מסגרת בכוונה, ולכן המיקוד מסומן על
   השורה כולה. קודם היה כאן outline:none בלי שום תחליף — אין סימון בכלל. */
.pal-head input:focus{outline:none;box-shadow:none;}
.pal-head:focus-within{box-shadow:inset 0 -2px 0 var(--primary-light);}
.pal-esc{
  border:1px solid var(--line);background:var(--bg);color:var(--ink-soft);
  border-radius:var(--radius-xs);padding:3px 9px;font-size:var(--fs-xs);font-weight:700;
  font-family:inherit;cursor:pointer;flex-shrink:0;
}
.pal-results{overflow-y:auto;padding:var(--space-2);}
.pal-row{
  display:flex;align-items:center;gap:var(--space-3);width:100%;
  padding:var(--space-3);min-height:52px;
  border:none;background:none;border-radius:var(--radius-sm);
  font-family:inherit;text-align:start;cursor:pointer;
}
.pal-row:hover,.pal-row.sel{background:var(--primary-pale);}
.pal-kind{
  flex-shrink:0;min-width:82px;
  font-size:var(--fs-xs);font-weight:700;color:var(--primary);
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:3px 9px;text-align:center;
}
.pal-row.sel .pal-kind{border-color:var(--primary-light);}
.pal-label{font-size:var(--fs-base);font-weight:700;color:var(--ink);flex-shrink:0;}
.pal-hint{
  font-size:var(--fs-sm);color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.pal-foot{
  display:flex;gap:var(--space-4);flex-wrap:wrap;
  padding:var(--space-3) var(--space-4);border-top:1px solid var(--line);
  background:var(--bg);font-size:var(--fs-xs);color:var(--ink-soft);
}
@media (max-width:640px){
  #paletteBg{padding-top:6vh;}
  .pal-kind{min-width:0;}
  .pal-foot span:last-child{display:none;}
}

/* =========================================================================
   דף הכניסה
   -------------------------------------------------------------------------
   שלוש החלטות:
     • הברכה קטנה יותר (1.5rem במקום 2.1). היא נקראת פעם אחת ביום; כותרות
       האריחים נקראות בכל כניסה.
     • האייקון נושא את הצבע במקום ריבוע צבעוני סביבו. 40 פיקסלים של אייקון
       במקום 26 בתוך ריבוע של 52 - גדול יותר, נקי יותר.
     • אריח עם הדמיה תופס שתי עמודות. זה מה ששובר את המונוטוניות של רשת
       אחידה ומייצר היררכיה.
   ========================================================================= */
.hub-head{margin-bottom:var(--space-5);}
.hub-date{font-size:var(--fs-sm);font-weight:700;color:var(--primary);margin:0 0 var(--space-1);}
.hub-title{
  font-size:1.5rem;font-weight:800;letter-spacing:-.02em;line-height:1.15;
  color:var(--ink);margin:0;   /* ⚠ לא --navy: במצב כהה navy הוא צבע הרקע, והברכה נעלמה (1:1) */
}

.hub-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(232px,100%),1fr));
  gap:var(--space-4);align-items:stretch;
}
.hub-tile{
  position:relative;display:flex;flex-direction:column;
  gap:var(--space-4);width:100%;
  padding:var(--space-5);min-height:140px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  font-family:inherit;text-align:start;cursor:pointer;transition:var(--t);
}
.hub-tile:hover{
  transform:translateY(-4px);border-color:transparent;
  box-shadow:var(--shadow-md);
}
.hub-wide{grid-column:span 2;}
@media (max-width:620px){ .hub-wide{grid-column:span 1;} }

.hub-main{display:flex;align-items:flex-start;gap:var(--space-4);min-width:0;}
/* בלי ריבוע רקע: האייקון עצמו צבוע, ולכן הוא יכול להיות גדול בלי להעיק */
.hub-icon{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;transition:var(--t);}
.hub-tile:hover .hub-icon{transform:scale(1.08);}
.hub-text{display:flex;flex-direction:column;gap:3px;min-width:0;}
.hub-text b{font-size:1.0625rem;font-weight:800;color:var(--ink);line-height:1.25;letter-spacing:-.01em;}
.hub-text span{font-size:var(--fs-sm);color:var(--ink-mid);line-height:1.4;}

/* ---- הדמיות בתוך האריח ---- */
.hub-viz{margin-top:auto;padding-top:var(--space-2);}
.hub-gauge{display:flex;align-items:flex-end;gap:var(--space-3);}
.hub-gauge svg{flex-shrink:0;}
.hub-viz-val{
  font-size:1.5rem;font-weight:800;color:var(--ink);line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.hub-viz-lbl{font-size:var(--fs-xs);color:var(--ink-mid);padding-bottom:3px;}

.hub-bars-row{
  display:flex;align-items:flex-end;gap:var(--space-2);
  height:52px;margin-bottom:var(--space-2);
}
.hub-bar{flex:1;border-radius:5px 5px 2px 2px;min-height:8px;transition:var(--t);}
.hub-tile:hover .hub-bar{filter:brightness(1.08);}
.hub-bars-legend{display:flex;gap:var(--space-3);flex-wrap:wrap;}
.hub-bars-legend span{
  display:flex;flex-direction:column;gap:1px;
  font-size:var(--fs-xs);color:var(--ink-mid);line-height:1.2;
}
.hub-bars-legend b{
  font-size:var(--fs-md);font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums;
}

/* התג יושב בזרימה הרגילה בתחתית האריח, ולא מרחף בפינה.
   ------------------------------------------------------------------------
   כשהוא היה position:absolute בפינה הנגדית לכותרת, הוא חפף אותה באריחים
   צרים: "1 בקשה לדיון" תופס כ-110 פיקסלים, ובאריח של 232 נשארו לכותרת
   פחות מזה. מיקום מוחלט תמיד יתנגש במשהו ברוחב מסוים - זרימה רגילה לא.

   הוא תופס את אותו מקום שבו יושבת ההדמיה, וזה בטוח: אף אזור אינו נושא
   גם תג וגם הדמיה. */
.hub-badge{
  margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;gap:5px;
  font-size:var(--fs-xs);font-weight:600;color:var(--ink-mid);
  background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:5px 12px;white-space:nowrap;
}
.hub-badge b{font-weight:800;color:var(--ink);}
.hub-badge.warn{background:var(--amber-pale);border-color:rgba(154,91,8,.22);color:var(--amber);}
.hub-badge.warn b{color:var(--amber);}
.hub-badge.alert{background:var(--brick-pale);border-color:rgba(155,48,48,.24);color:var(--brick);}
.hub-badge.alert b{color:var(--brick);}

@media (max-width:640px){
  .hub-title{font-size:1.3rem;}
  .hub-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-3);}
  .hub-tile{padding:var(--space-4);min-height:0;gap:var(--space-3);}
  .hub-icon{width:36px;height:36px;}
  .hub-icon svg{width:34px;height:34px;}

}

/* =========================================================================
   רכיבי לוח הבקרה
   -------------------------------------------------------------------------
   שכבה משותפת שנגזרה מהמוקאפ ומשמשת את כל דפי הבית. שלושה דפוסים חוזרים:

     1. כותרת כרטיס עם ריבוע אייקון - נותנת לכל מודול זהות מיידית בסריקה,
        במקום שורת טקסט שנבלעת
     2. רצועת מדדים - כרטיס אחד מחולק בקווים, ולא ארבעה כרטיסים נפרדים.
        פחות רעש ויזואלי על אותו מידע
     3. כרטיס הפוך (כהה) - שמור לפריט אחד בעמוד, זה שדורש פעולה
   ========================================================================= */

/* ---- כותרת כרטיס ---- */
.card-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--space-4);margin-bottom:var(--space-4);
}
/* flex:1 — כדי שהכותרת תבלע את המקום הפנוי.
   הכותרת היא justify-content:space-between עם שלושה ילדים מאז שנוסף
   כפתור הקיפול: כותרת, קישור "כל הקריאות", וחץ. שלושה ילדים בפריסה
   כזו נפרשים במרווחים שווים, ולכן הקישור נחת באמצע הפאנל, מנותק
   משניהם. עם flex:1 על הכותרת, הקישור והחץ נצמדים יחד לקצה. */
.card-head-main{display:flex;align-items:flex-start;gap:var(--space-3);min-width:0;flex:1;}
.card-head-icon{
  display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;
  border-radius:13px;background:var(--primary-pale);color:var(--primary-ink);
}
.card-head-icon.tone-accent{background:var(--accent-soft);color:var(--accent-ink);}
.card-head-icon.tone-warn{background:var(--amber-pale);color:var(--amber);}
.card-head-icon.tone-ok{background:var(--green-pale);color:var(--green);}
.card-head-icon.tone-dark{background:var(--primary);color:var(--on-primary);}
.card-head-text{min-width:0;}
.card-head-text h2{
  font-size:var(--fs-lg);font-weight:800;color:var(--primary);
  margin:0;letter-spacing:-.01em;line-height:1.25;
}
.card-head-text p{font-size:var(--fs-sm);color:var(--ink-soft);margin:3px 0 0;line-height:1.4;}
.card-head-link{
  display:inline-flex;align-items:center;gap:4px;flex-shrink:0;
  font-size:var(--fs-sm);font-weight:700;color:var(--primary);
  background:none;border:none;cursor:pointer;padding:4px 2px;
}
.card-head-link:hover{text-decoration:underline;}

/* ---- רצועת מדדים ---- */
/* ---- תמונה כספית: תאים בתוך כרטיס, לא כרטיסים נפרדים ---- */
.fin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:var(--space-3);}
.fin-cell{
  padding:var(--space-4);border:1px solid var(--line);border-radius:16px;background:var(--bg);
  display:flex;flex-direction:column;gap:var(--space-2);
}
.fin-label{font-size:var(--fs-sm);font-weight:600;color:var(--ink-mid);}
.fin-value{
  font-size:1.35rem;font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.fin-value.pos{color:var(--green);}
.fin-value.neg{color:var(--brick);}

.metric-strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  margin-bottom:var(--space-5);overflow:hidden;
}
.metric{padding:var(--space-5);border-inline-start:1px solid var(--line);}
.metric:first-child{border-inline-start:none;}
.metric-label{
  display:flex;align-items:center;gap:var(--space-2);
  font-size:var(--fs-sm);font-weight:600;color:var(--ink-mid);margin-bottom:var(--space-3);
}
.metric-label svg{width:17px;height:17px;flex-shrink:0;}
.metric-value{
  font-size:1.85rem;font-weight:800;color:var(--primary);
  line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.metric-sub{font-size:var(--fs-xs);color:var(--ink-soft);margin-top:var(--space-2);line-height:1.4;}
.metric-sub.warn{color:var(--amber);font-weight:600;}
.metric-sub.alert{color:var(--brick);font-weight:600;}
.metric-sub.ok{color:var(--green);font-weight:600;}
.metric-bar{height:6px;border-radius:var(--radius-pill);background:var(--line);margin-top:var(--space-3);overflow:hidden;}
.metric-bar > i{display:block;height:100%;border-radius:var(--radius-pill);background:var(--primary);}

/* ---- שורות רשימה עם פס חומרה ---- */
/* ---- זרם הפעילות ---- */
.act-list .feed-row{align-items:center;}
.act-kind{
  flex-shrink:0;min-width:96px;text-align:center;
  font-size:var(--fs-xs);font-weight:700;color:var(--primary);
  background:var(--primary-pale);border-radius:var(--radius-pill);padding:4px 10px;
}
.act-when{
  flex-shrink:0;font-size:var(--fs-xs);color:var(--ink-soft);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
/* שבירת שורת הזרם לשתי שורות במסך צר.
   -------------------------------------------------------------------------
   השורה היא פלקס בלי flex-wrap: תווית סוג, גוף, זמן, וכפתור "פתיחה" —
   כולם flex-shrink:0 חוץ מהגוף. סכום המינימומים שלהם הוא רוחב שהשורה
   מסרבת לרדת מתחתיו, וזה מה שהרחיב את הרשת שמעליה.

   התנאי היה @media (max-width:640px) בלבד, כלומר טלפון של 411 פיקסלים
   כן היה מכוסה — אבל רק אם שאילתת המדיה נמדדת מול אותו רוחב שבו הרשת
   מחושבת. אחרי שהרשת עצמה כבר לא גדלה בגלל תוכן (minmax(0,...) למעלה),
   השבירה כאן היא מה שמבטיח שהשורה גם תיראה טוב ולא רק תצטמצם.

   compact-layout ולא 640px, כדי להתיישר עם שאר הפריסה הצרה במערכת. */
@media (max-width:640px){
  .act-list .feed-row{flex-wrap:wrap;align-items:flex-start;}
  .act-kind{min-width:0;}
  .act-when{margin-inline-start:auto;}
  .act-list .feed-body{flex-basis:100%;order:3;}
}
body.compact-layout .act-list .feed-row{flex-wrap:wrap;align-items:flex-start;}
body.compact-layout .act-kind{min-width:0;}
body.compact-layout .act-when{margin-inline-start:auto;}
body.compact-layout .act-list .feed-body{flex-basis:100%;order:3;}
/* הכפתור נשאר בגודלו ולא נמתח לרוחב השורה כשהוא נופל לשורה משלו */


.feed-list{list-style:none;margin:0;padding:0;}
.feed-row{
  display:flex;align-items:flex-start;gap:var(--space-3);
  padding:var(--space-3) 0;border-top:1px solid var(--line);
}
.feed-row:first-child{border-top:none;}
.feed-bar{width:3px;border-radius:var(--radius-pill);align-self:stretch;flex-shrink:0;background:var(--line);}
.feed-bar.late{background:var(--brick);}
.feed-bar.warn{background:var(--amber);}
.feed-bar.ok{background:var(--primary-light);}
.feed-body{min-width:0;flex:1;}
.feed-title{
  display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;
  font-size:var(--fs-base);font-weight:700;color:var(--ink);margin:0;line-height:1.3;
}
.feed-meta{font-size:var(--fs-sm);color:var(--ink-soft);margin:3px 0 0;line-height:1.4;}
.feed-action{flex-shrink:0;}

/* ---- האזור האישי: חשבון ופרטים ---- */
.prof-sub{
  font-size:var(--fs-md);font-weight:800;color:var(--ink);
  margin:var(--space-6) 0 var(--space-2);
  padding-top:var(--space-4);border-top:1px solid var(--line);
}
.prof-sub:first-of-type{margin-top:var(--space-4);padding-top:0;border-top:none;}
.acct-head{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-4);}

/* אווטאר — משמש גם בכותרת וגם במסך, ולכן מוגדר פעם אחת */
.prof-avatar{
  display:grid;place-items:center;flex-shrink:0;
  width:44px;height:44px;border-radius:50%;overflow:hidden;
  background:var(--primary-pale);color:var(--primary-ink);
  font-weight:800;font-size:var(--fs-sm);
}
.prof-avatar-lg{width:72px;height:72px;font-size:1.35rem;}
.prof-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
/* התמונה ממלאת את העיגול בכותרת גם כשהיא הוזרקה לתוך .user-avatar */
.user-avatar.has-image{padding:0;overflow:hidden;}
.user-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;}

.avatar-picker{display:flex;flex-wrap:wrap;gap:var(--space-3);}
.avatar-opt{
  display:grid;place-items:center;width:52px;height:52px;
  border-radius:50%;cursor:pointer;transition:var(--t);
  background:color-mix(in srgb, var(--av) 12%, transparent);
  color:var(--av);border:2px solid transparent;
}
.avatar-opt:hover{background:color-mix(in srgb, var(--av) 22%, transparent);}
/* הנבחר מסומן במסגרת ולא רק בצבע: הבדלי רוויה לבדם אינם נקראים
   בעין שאינה מבחינה בצבעים, ואינם עומדים בדרישות הניגודיות. */
.avatar-opt.is-on{border-color:var(--av);}
.avatar-opt.is-on::after{
  content:'';position:absolute;width:52px;height:52px;border-radius:50%;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--av) 25%, transparent);
}

/* ---- בחירת רשומה לקישור באזור האישי ---- */
.link-options{display:flex;flex-direction:column;gap:var(--space-2);}
.link-opt{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  width:100%;padding:12px 14px;min-height:44px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md);
  text-align:start;cursor:pointer;transition:var(--t);font-family:inherit;
}
.link-opt:hover{border-color:var(--primary-ink);background:var(--primary-pale);}
.link-opt b{font-size:var(--fs-base);color:var(--ink);}
.link-opt span{font-size:var(--fs-sm);color:var(--ink-soft);}

/* =========================================================================
   מצב כהה
   -------------------------------------------------------------------------
   נוסף אחרי שהמערכת נמצאה בשימוש גם בשעות ערב — מזכירות שסוגרת יום,
   ותושבים שפותחים את הפורטל מהמיטה. מסך לבן בוהק בחושך אינו רק לא נעים;
   הוא גורם למשתמשים לצמצם את בהירות המסך ואז לא לראות טקסט אפור.

   שלוש החלטות שמבדילות מצב כהה טוב מהיפוך צבעים:

   1. הרקע אינו שחור אלא כחול-אפור כהה.
      שחור מוחלט מול טקסט לבן יוצר "הילה" (halation) — הטקסט נראה מטושטש,
      במיוחד למי שסובל/ת מאסטיגמציה. #0F1720 נותן את אותה הרגשה בלי זה.

   2. הטקסט אינו לבן טהור אלא #E6EBF2.
      ניגודיות 21:1 היא יותר מדי. היא גורמת לעייפות עין בקריאה ממושכת,
      וזו בדיוק העבודה של המזכירות.

   3. צבע המותג מבהיר, לא מוחשך.
      כחול כהה על רקע כהה נעלם. הגוונים כאן נבחרו כך שיעמדו ב-4.5:1
      מול הרקע הכהה, כמו שהמקוריים עומדים מול הלבן.

   ⚠ ההפעלה היא לפי העדפת המערכת *וגם* לפי בחירה ידנית. data-theme על
   ה-html גובר על שאילתת המדיה, כדי שמי שרוצה כהה ביום יוכל/תוכל. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --navy:#0A1220;
    --ink:#E6EBF2;
    --ink-mid:#9DAABC;
    --ink-soft:#94A3B8;
    --line:#25303F;
    --bg:#0F1720;
    --panel:#18212D;
    --primary:#6BA3F5;
    --primary-light:#8CB8F8;
    --primary-deep:#4A85DC;
    --primary-pale:#1A2942;
    --accent-soft:#1E2A3A;
    --gold-pale:#2A2417;
    --amber-pale:#2E2313;
    --brick-pale:#2E1A1A;
    --green-pale:#122A1E;
    /* ⚠ ארבעת צבעי המשמעות נשכחו כאן, וזה כשל נגישות אמיתי.
       =================================================================
       הרקעים העמומים (--brick-pale וחבריו) הוחלפו לגרסאות כהות, אבל
       צבעי הטקסט שיושבים עליהם נשארו בערכי מצב-בהיר. התוצאה, במצב כהה:

           --brick  #9B3030  על  --panel  #18212D   ->  2.2:1
           --brick  #9B3030  על  --brick-pale       ->  2.2:1
           --amber  #9A5B08  על  --panel            ->  3.0:1
           --green  #186B44  על  --panel            ->  2.5:1

       הסף ל-AA הוא 4.5:1. כלומר כל סכום שלילי (.value.neg), כל תאריך
       באיחור (.proj-due-late), כל שגיאת שדה (.field-error) וכל תג
       חריגה היו כמעט בלתי-קריאים למי שעובד/ת במצב כהה — וזה בדיוק
       המידע שאסור לפספס.

       הערכים למטה נבדקו מול --panel ומול הרקעים העמומים. */
    --brick:#F1897F;         /* 6.7:1 על --panel, 6.8:1 על --brick-pale */
    --green:#5FCB92;         /* 8.1:1 על --panel */
    --gold:#E8B04A;          /* 8.3:1 על --panel */
    --gold-accent:#F2C877;
    --amber:#E8B04A;
    /* ⚠ הטוקנים האלה חייבים להופיע גם כאן וגם בבלוק [data-theme="dark"],
       כמו כל השאר. רקע השדות היה הפער הגדול: הוא הוקשח ל-#FBFCFD בכלל
       עצמו, ולכן כל שדה טופס במערכת היה כמעט-לבן עם טקסט כמעט-לבן. */
    --field:#111A25;
    --field-border:#62728A;  /* 3.6:1 על --field, 3.3:1 על --panel */
    --field-invalid:#2A1715;
    --row-alt:#141C28;
    --on-primary:#0A1220;    /* על --primary הבהיר של מצב כהה — 5.37:1 */
    --primary-ink:#5089E2;   /* applyThemeColors דורסת לפי ערכת המיתוג */
    --accent-ink:#0E98AA;
    --tile-cyan:#22D3EE;   --tile-cyan-pale:color-mix(in srgb, #22D3EE 16%, #18212D);
    --tile-green:#4ADE80;  --tile-green-pale:color-mix(in srgb, #4ADE80 16%, #18212D);
    --tile-amber:#FBBF24;  --tile-amber-pale:color-mix(in srgb, #FBBF24 16%, #18212D);
    --tile-brick:#F87171;  --tile-brick-pale:color-mix(in srgb, #F87171 16%, #18212D);
    --tile-purple:#C084FC; --tile-purple-pale:color-mix(in srgb, #C084FC 16%, #18212D);
    --tile-slate:#94A3B8;  --tile-slate-pale:color-mix(in srgb, #94A3B8 16%, #18212D);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 4px 12px rgba(0,0,0,.45);
    --shadow-lg:0 12px 32px rgba(0,0,0,.5);
  }
  /* תמונות וסמלים מעומעמים מעט: לוגו בהיר על רקע כהה "בורח" מהעמוד */
  :root:not([data-theme="light"]) .brand-logo,
  :root:not([data-theme="light"]) img{ filter:brightness(.92); }
  /* מסמכים סרוקים נשארים כמו שהם — היפוך של מסמך רשמי מעוות אותו */
  :root:not([data-theme="light"]) .pdf-inline canvas{ filter:none; }
  /* ⚠ מפת החום של מטריצת הכספים נשארת בהירה, והדיו מתכהה.
     ====================================================================
     לטבלה הזו 24 גוני רקע קשיחים — שישה גוני שנה, כל אחד בגרסת ביצוע
     ובגרסת תקציב, לכותרת ולתא. הם אינם קישוט אלא *קידוד נתונים*: הגוון
     הוא השנה. החלפתם לגרסאות כהות הייתה הורסת את ההצמדה בין הצבע
     למשמעות, והפיכתם לטוקנים הייתה 24 טוקנים לרכיב אחד.

     לכן הבחירה ההפוכה: הרקעים נשארים, והטקסט שמעליהם מתכהה. זו אותה
     הכרעה שכבר נעשתה כאן ל-.pdf-inline canvas — דוח כספי צפוף נקרא
     כמו גיליון מודפס שמושתל בעמוד, וזה עדיף על קידוד צבע שנשבר.

     בלי זה: --ink במצב כהה הוא #E6EBF2, כלומר טקסט כמעט-לבן על
     #EAF1F8 — 1.1:1. כל הטבלה ריקה למראה.

     --brick-solid ולא --brick: הראשון כהה בשני המצבים (ראו הבלוק
     בראש הפלטה), והשני הופך בהיר במצב כהה. */
  :root:not([data-theme="light"]) .mtx-master td[class*="mtx-y"],
  :root:not([data-theme="light"]) .mtx-master thead th[class*="mtx-y"],
  :root:not([data-theme="light"]) .mtx-master tr.mtx-mion-sum td.mtx-bud{ color:var(--navy); }
  :root:not([data-theme="light"]) .mtx-master td[class*="mtx-y"].neg,
  :root:not([data-theme="light"]) .mtx-master td[class*="mtx-y"].neg b,
  :root:not([data-theme="light"]) .mtx-master tr.mtx-mion-sum td.mtx-bud.neg,
  :root:not([data-theme="light"]) .mtx-master tr.mtx-mion-sum td.mtx-bud.neg b{ color:var(--brick-solid); }
}

/* בחירה ידנית גוברת על העדפת המערכת */
:root[data-theme="dark"]{
  --navy:#0A1220; --ink:#E6EBF2; --ink-mid:#9DAABC; --ink-soft:#94A3B8;
  --line:#25303F; --bg:#0F1720; --panel:#18212D;
  --primary:#6BA3F5; --primary-light:#8CB8F8; --primary-deep:#4A85DC;
  --primary-pale:#1A2942; --accent-soft:#1E2A3A;
  --gold-pale:#2A2417; --amber-pale:#2E2313;
  --brick-pale:#2E1A1A; --green-pale:#122A1E;
  /* אותם ערכים כמו בבלוק שאילתת המדיה — ראו את ההסבר שם. */
  --brick:#F1897F; --green:#5FCB92;
  --gold:#E8B04A; --gold-accent:#F2C877; --amber:#E8B04A;
  /* אותם ערכים כמו בבלוק שאילתת המדיה — ראו את ההסבר שם. */
  --field:#111A25; --field-border:#62728A; --field-invalid:#2A1715; --row-alt:#141C28;
  --on-primary:#0A1220; --primary-ink:#5089E2; --accent-ink:#0E98AA;
  --tile-cyan:#22D3EE;   --tile-cyan-pale:color-mix(in srgb, #22D3EE 16%, #18212D);
  --tile-green:#4ADE80;  --tile-green-pale:color-mix(in srgb, #4ADE80 16%, #18212D);
  --tile-amber:#FBBF24;  --tile-amber-pale:color-mix(in srgb, #FBBF24 16%, #18212D);
  --tile-brick:#F87171;  --tile-brick-pale:color-mix(in srgb, #F87171 16%, #18212D);
  --tile-purple:#C084FC; --tile-purple-pale:color-mix(in srgb, #C084FC 16%, #18212D);
  --tile-slate:#94A3B8;  --tile-slate-pale:color-mix(in srgb, #94A3B8 16%, #18212D);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 4px 12px rgba(0,0,0,.45);
  --shadow-lg:0 12px 32px rgba(0,0,0,.5);
}
:root[data-theme="dark"] .brand-logo,
:root[data-theme="dark"] img{ filter:brightness(.92); }

/* =========================================================================
   ניגודיות גבוהה ומצב צבעים כפוי
   -------------------------------------------------------------------------
   שתי העדפות שלא נתמכו כלל, ושתיהן *אדיטיביות*: הן חלות רק כשהמשתמש/ת
   ביקש/ה אותן בהגדרות המערכת, ולכן אינן יכולות לפגוע בברירת המחדל.

   ⚠ forced-colors (מצב ניגודיות גבוהה של Windows) מחליף את כל הצבעים
   בפלטת המערכת ו*מתעלם* מ-background. כלומר כל מה שבמערכת הזו נבדל
   מסביבתו באמצעות רקע בלבד — תגית סטטוס, סעיף פעיל בניווט, שורת
   טבלה מודגשת, כרטיס — הופך לשטח אחיד בלי גבול. ההוספה היחידה
   שנדרשת היא גבול: במצב כזה גבול הוא מה שמגדיר צורה.

   ⚠ ה-focus ring מוגדר כאן מחדש ב-Highlight, כי outline שמסתמך על
   --primary נעלם גם הוא.
   ========================================================================= */
@media (forced-colors: active){
  .panel, .card, .modal, .tag, .status, .cat-pill, .chip, .bslot,
  .fin-card, .hub-card, .msg, .doc-item, .proj-card, .prop-chip,
  input, select, textarea, .btn, button{
    border:1px solid currentColor;
  }
  /* סעיף פעיל בניווט נבדל ברקע בלבד — כאן הוא צריך סימן של ממש */
  nav button.active{ border:2px solid currentColor; font-weight:800; }
  /* פס התקדמות וגרף עמודות הם צורה בלי טקסט; בלי גבול הם נעלמים */
  .bar, .bar > span, .hub-bars-row > *, .bc-bar, .progress, .progress > *{
    border:1px solid currentColor;
  }
  :focus-visible{ outline:3px solid Highlight; outline-offset:2px; }
  /* צל אינו קיים במצב הזה, ולכן הוא אינו יכול לשמש להפרדה */
  .panel, .card, .modal{ box-shadow:none; }
}

/* ⚠ prefers-contrast: more — המשתמש/ת ביקש/ה יותר ניגודיות מברירת
   המחדל. הטקסט כאן כבר עובר AA, ולכן ההוספה אינה בצבעי הטקסט אלא
   במה שמכוון בכוונה להיות עדין: גבולות, טקסט משנה, ומצב ריחוף. */
@media (prefers-contrast: more){
  :root{
    --line:#9AA7B8;
    --ink-mid:#3D4B5F;
    --ink-soft:#3D4B5F;
  }
  /* ⚠ [data-theme="dark"] בלבד. :root:not([data-theme="light"]) היה
     תופס *גם* מצב בהיר-אוטומטי, כלומר קו כהה על רקע בהיר. מצב
     כהה-אוטומטי מטופל בשאילתה המשולבת שמתחת. */
  :root[data-theme="dark"]{
    --line:#6B7A8D;
  }
  .panel, .card, .fin-card, .modal{ border:1px solid var(--line); }
  input, select, textarea{ border-width:2px; }
  :focus-visible{ outline-width:3px; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --line:#6B7A8D; }
}
:root[data-theme="dark"] .pdf-inline canvas{ filter:none; }
/* אותה הכרעה כמו בבלוק שאילתת המדיה — ראו את ההסבר שם. */
:root[data-theme="dark"] .mtx-master td[class*="mtx-y"],
:root[data-theme="dark"] .mtx-master thead th[class*="mtx-y"],
:root[data-theme="dark"] .mtx-master tr.mtx-mion-sum td.mtx-bud{ color:var(--navy); }
:root[data-theme="dark"] .mtx-master td[class*="mtx-y"].neg,
:root[data-theme="dark"] .mtx-master td[class*="mtx-y"].neg b,
:root[data-theme="dark"] .mtx-master tr.mtx-mion-sum td.mtx-bud.neg,
:root[data-theme="dark"] .mtx-master tr.mtx-mion-sum td.mtx-bud.neg b{ color:var(--brick-solid); }

/* ---- תפוסת מרחב בטופס השיריון ----
   מוצג בין שדות השעות לבין שאר הטופס, כדי שההתנגשות תתגלה בזמן
   בחירת השעות ולא אחרי מילוי כל הטופס. */
.avail-free, .avail-busy{
  padding:12px 14px;border-radius:var(--radius-md);margin:var(--space-2) 0 var(--space-4);
  font-size:var(--fs-sm);
}
.avail-free{background:var(--green-pale);color:var(--green);}
.avail-busy{background:var(--amber-pale);border-inline-start:4px solid var(--amber);color:var(--ink);}
/* התנגשות היא מצב אחר מ"תפוס" — תפוס הוא מידע, התנגשות היא חסימה */
.avail-busy.is-clash{background:var(--brick-pale);border-inline-start-color:var(--brick);}
.avail-slots{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.avail-slot{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--panel);border:1px solid var(--line);
  padding:4px 10px;border-radius:var(--radius-pill);font-size:var(--fs-xs);
}
.avail-slot i{font-style:normal;color:var(--ink-soft);font-size:var(--fs-xs);}
/* ממתין לאישור נראה אחרת מאושר: הוא תופס, אבל עוד עשוי להשתחרר */
.avail-slot.is-pending{border-style:dashed;}
.avail-warn{margin:10px 0 0;font-weight:700;color:var(--brick);}
.avail-ok{margin:10px 0 0;color:var(--green);}

/* ---- אזור התקציב ---- */
.fin-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:var(--space-5) 0 var(--space-4);}
.fin-tab{
  padding:8px 16px;min-height:44px;border-radius:var(--radius-pill);
  background:var(--panel);border:1px solid var(--line);color:var(--ink-soft);
  font-family:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:var(--t);
}
.fin-tab:hover{border-color:var(--primary);color:var(--primary);}
.fin-tab.is-on{background:var(--primary);border-color:var(--primary);color:var(--on-primary);}
.fin-h{font-size:var(--fs-md);font-weight:800;color:var(--ink);margin:var(--space-6) 0 var(--space-3);}
.fin-subh{font-size:0.84375rem;font-weight:700;color:var(--primary);margin:var(--space-4) 0 var(--space-2);}
.fin-subh span{color:var(--ink-soft);font-weight:400;}
/* ---- השוואה חכמה ---- */
:root{--cmp-a:#2C5A8C;--cmp-b:#3AA981;}
/* ⚠ במצב כהה --cmp-a נשאר כחול כהה על רקע כהה — שם הסעיף בתובנה
   (<b style="color:var(--cmp-a)">) היה ב-2.5:1. הגרף והטקסט מאותו טוקן. */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--cmp-a:#7FA8E0;} }
:root[data-theme="dark"]{--cmp-a:#7FA8E0;}
.cmp-presets{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px;font-size:var(--fs-sm);}
.cmp-presets>span{color:var(--ink-soft);font-weight:600;}
.cmp-presets button{padding:6px 12px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--panel);cursor:pointer;font-size:var(--fs-xs);font-weight:600;color:var(--primary);}
.cmp-presets button:hover{background:var(--primary-pale);border-color:var(--primary-ink);}
.cmp-builder{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
.cmp-side{flex:1 1 260px;border:1px solid var(--line);border-radius:var(--radius);padding:12px;background:var(--panel);box-shadow:0 1px 3px rgba(20,40,70,.04);}
.cmp-side-head{font-weight:800;margin-bottom:8px;display:flex;align-items:center;gap:8px;font-size:var(--fs-base);}
.cmp-kind{font-size:var(--fs-xs);font-weight:800;padding:2px 9px;border-radius:var(--radius-pill);margin-inline-start:auto;}
.cmp-kind-inc{background:var(--green-pale);color:var(--green);}
.cmp-kind-exp{background:var(--brick-pale);color:var(--brick);}
.cmp-legend .cmp-kind{margin-inline-start:6px;}
.cmp-search-income{border-inline-start:5px solid #1B7A44;}
.cmp-search-expense{border-inline-start:5px solid #B23A2E;}
.cmp-side-income{border-top:3px solid #1B7A44;}
.cmp-side-expense{border-top:3px solid #B23A2E;}
.cmp-side-head::before{content:'';width:12px;height:12px;border-radius:4px;display:inline-block;}
.cmp-dot-a::before,i.cmp-dot-a{background:var(--cmp-a);}
.cmp-dot-b::before,i.cmp-dot-b{background:var(--cmp-b);}
.cmp-search{width:100%;box-sizing:border-box;font-size:16px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);}
.cmp-search:focus{outline:2px solid var(--primary);border-color:var(--primary);background:var(--panel);}
.cmp-metric{display:flex;gap:6px;margin-top:8px;}
.cmp-metric button{flex:1;padding:8px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);color:var(--ink);cursor:pointer;font-size:var(--fs-sm);font-weight:600;min-height:40px;}
.cmp-metric button.on{background:var(--primary);border-color:var(--primary);color:var(--on-primary);}
.cmp-vs{align-self:center;font-weight:800;color:var(--ink-soft);}
.cmp-vs{display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid var(--line);background:var(--panel);border-radius:var(--radius-md);padding:8px 12px;cursor:pointer;min-height:44px;font-size:1.125rem;line-height:1;}
.cmp-vs span{font-size:var(--fs-xs);font-weight:600;color:var(--ink-soft);}
.cmp-vs:hover{border-color:var(--primary-ink);background:var(--primary-pale);}
.cmp-years{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:2px 0 12px;font-size:var(--fs-sm);}
.cmp-years>span{color:var(--ink-soft);font-weight:600;margin-inline-end:2px;}
.cmp-years button{padding:5px 12px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--panel);cursor:pointer;font-size:var(--fs-sm);font-weight:700;color:var(--ink-soft);min-height:34px;}
.cmp-years button.on{background:var(--primary);border-color:var(--primary);color:var(--on-primary);}
.cmp-sum td.cmp-win{background:var(--primary-pale);}
.cmp-sum td.cmp-win.neg{background:var(--brick-pale);}
.cmp-insight.over{background:var(--brick-pale);border:1px solid var(--brick);}
.cmp-legend{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;}
.cmp-legend-keys{display:flex;flex-wrap:wrap;gap:16px;}
.cmp-export{padding:6px 12px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--panel);cursor:pointer;font-size:var(--fs-xs);font-weight:600;color:var(--primary);min-height:36px;}
.cmp-export:hover{background:var(--primary-pale);border-color:var(--primary-ink);}
.cmp-chart-tools{display:flex;gap:8px;align-items:center;}
.cmp-chart-toggle{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius-pill);overflow:hidden;}
.cmp-chart-toggle button{border:none;background:var(--panel);cursor:pointer;font-size:var(--fs-md);padding:6px 12px;min-height:36px;color:var(--ink-soft);}
.cmp-chart-toggle button.on{background:var(--primary);color:var(--on-primary);}
.cmp-bar{transition:opacity .12s;} .cmp-bar:hover{opacity:.8;}
/* קליק מהטבלה הגדולה אל הבונה */
.mtx-master .mtx-click{cursor:pointer;}
.mtx-master .mtx-click:hover{text-decoration:underline;background:var(--primary-pale) !important;}
.cmp-legend{display:flex;flex-wrap:wrap;gap:16px;margin:6px 2px 10px;font-size:var(--fs-sm);font-weight:600;}
.cmp-legend i{width:14px;height:14px;border-radius:4px;display:inline-block;vertical-align:-2px;margin-inline-end:6px;}
.cmp-chart{width:100%;height:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:10px;box-sizing:border-box;}
.cmp-insight{margin:12px 2px;padding:12px 14px;background:var(--primary-pale);border-radius:var(--radius-md);font-size:0.90625rem;line-height:1.5;}
.cmp-details{margin-top:10px;}
.cmp-details>summary{cursor:pointer;font-weight:700;color:var(--primary);padding:6px 0;}
.cmp-sum tr.cmp-tot td{background:var(--primary-pale);font-weight:700;border-top:2px solid var(--primary);}
@media (max-width:520px){ .cmp-vs{display:none;} }
/* טבלת-אב רחבה (תקציב+ביצוע לכל השנים) — גלילה אופקית, כותרת+עמודה דביקות */
.mtx-wrap{max-height:72vh;overflow:auto;border:1px solid var(--line);border-radius:var(--radius-md);-webkit-overflow-scrolling:touch;}
.mtx-master{border-collapse:collapse;font-size:var(--fs-xs);white-space:nowrap;width:max-content;min-width:100%;}
.mtx-master th, .mtx-master td{padding:6px 10px;border:1px solid var(--line);text-align:right;}
.mtx-master thead th{position:sticky;color:var(--on-primary);z-index:3;}
.mtx-master thead tr:first-child th{top:0;height:30px;}
.mtx-master thead tr:last-child th{top:30px;}
.mtx-master th.mtx-yr{text-align:center;border-bottom:2px solid var(--panel);background:var(--primary);}
.mtx-master th.mtx-bud, .mtx-master td.mtx-bud{background:var(--bg);}
.mtx-master thead th.mtx-bud{background:#2c4a6e;}
.mtx-master .mtx-name{position:sticky;inset-inline-start:0;background:var(--panel);z-index:2;min-width:170px;max-width:220px;white-space:normal;}
.mtx-master thead .mtx-name{z-index:4;background:var(--primary);}
/* שם הסעיף עבר מ-td ל-th scope="row" מטעמי נגישות. ברירת המחדל של th
   היא מודגש וממורכז — כאן משחזרים במפורש את המראה הקודם, כדי שהשינוי
   יהיה סמנטי בלבד ולא ויזואלי. */
.mtx-master tbody th.mtx-name{font-weight:400;text-align:start;}
.mtx-master tr.mtx-mion th .bc-linkbtn{color:var(--primary);font-weight:700;}
.mtx-master th.mtx-name .bc-linkbtn{font-weight:inherit;text-align:start;width:100%;}
/* ⚠ th ולא td: תא המיון הוא כותרת קבוצה ועבר ל-th (ראו masterComparisonTableHtml).
   הסלקטור חייב לכלול את שניהם, אחרת העיצוב פשוט נעלם. */
.mtx-master tr.mtx-mion td, .mtx-master tr.mtx-mion th{background:var(--primary-pale);color:var(--primary-ink);font-weight:700;position:sticky;inset-inline-start:0;text-align:start;}
/* ⚠ שורת סעיף *מסוכמת* — הכלל שמעל אינו מתאים לה.
   ------------------------------------------------------------------------
   הכלל שמעל מחיל position:sticky;right:0 על כל td/th בשורת mtx-mion. זה
   נכון כשהיה בשורה תא אחד בלבד (כותרת ברוחב מלא), אבל במצב "מקובץ לפי
   סעיף" השורה נושאת גם את תת-הסכום לכל שנה — וכל התאים היו נדבקים
   לאותו מיקום בקצה, זה על גבי זה. רק תא השם נשאר דביק. */
.mtx-master tr.mtx-mion-sum td{position:static;right:auto;background:var(--primary-pale);color:var(--primary-ink);}
.mtx-master tr.mtx-mion-sum td.mtx-bud{background:#dbe6f2;}
.mtx-master tr.mtx-mion-sum td.neg, .mtx-master tr.mtx-mion-sum td.neg b{color:var(--brick);}
.mtx-master .mtx-caret{
  background:none;border:none;padding:0 4px 0 0;margin:0;cursor:pointer;
  color:var(--primary);font-size:var(--fs-xs);line-height:1;
}
/* ⚠ flex על span פנימי ולא על ה-th עצמו: display:flex על תא טבלה מוציא
   אותו מפריסת הטבלה, והעמודה הדביקה מאבדת את הרוחב שלה. */
.mtx-master .mtx-mion-head{display:flex;align-items:center;gap:4px;min-width:0;}
.mtx-master .mtx-mion-head .bc-linkbtn{flex:1;min-width:0;width:auto;}
.mtx-master .mtx-mion-meta{color:var(--ink-soft);font-weight:400;font-size:var(--fs-xs);flex-shrink:0;}
/* ⚠ עמודת ההפרש סוגרת את השנה בקו.
   בלי הגבול, 2024 ו-2025 נראות כרצף אחד של עשר עמודות מספרים ואי אפשר
   לראות איפה נגמרת אחת ומתחילה השנייה — חמש עמודות לשנה זה מעבר למה
   שהעין מחזיקה בלי עוגן. */
.mtx-sides td.cmp-diff, .mtx-sides th.cmp-diff{
  border-inline-start:2px solid var(--primary);font-weight:700;
}
.mtx-sides tbody td.cmp-diff{background:var(--bg);}
.mtx-sides tbody td.cmp-diff.neg, .mtx-sides tbody td.cmp-diff.neg b{color:var(--brick);}
.mtx-sides tr.fin-bal td.cmp-diff{background:var(--primary);color:var(--on-primary);}
.mtx-sides tr.fin-bal td.cmp-diff.neg, .mtx-sides tr.fin-bal td.cmp-diff.neg b{color:#fff;}
/* ⚠ שורות ההרכב — החשבונות שבתוך סעיף פתוח.
   ההזחה היא padding-inline-start ולא margin: עמודת השם דביקה, ו-margin
   על תא דביק מזיז אותו מול שאר העמודות בזמן גלילה אופקית. */
.mtx-sides tr.cmp-acct th.mtx-name{
  padding-inline-start:22px;font-weight:400;background:var(--panel);
}
.mtx-sides tr.cmp-acct th.mtx-name .bc-linkbtn{color:var(--ink-mid);font-weight:400;}
.mtx-sides tr.cmp-acct td{background:var(--panel);}
.mtx-sides tr.cmp-acct td.mtx-bud{background:var(--bg);}

/* ---- בניית תקציב ---- */
.bd-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.bd-status{
  border-radius:var(--radius-pill);padding:4px 14px;font-size:var(--fs-xs);font-weight:700;
  white-space:nowrap;border:1px solid transparent;
}
/* ⚠ הסטטוס מקודד גם בטקסט וגם בצבע. צבע לבדו אינו נגיש, ו"טיוטה" מול
   "מאושר" הוא בדיוק ההבדל שאסור לפספס. */
.bd-status-draft{background:var(--bg);color:var(--ink-mid);border-color:var(--line);}
.bd-status-voting{background:var(--gold-pale);color:var(--gold);border-color:var(--gold);}
.bd-status-approved{background:var(--green-pale);color:var(--green);border-color:var(--green);}
.bd-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:var(--space-3) 0;}
.bd-table{border-collapse:collapse;font-size:var(--fs-xs);width:max-content;min-width:100%;}
.bd-table th, .bd-table td{padding:6px 10px;border:1px solid var(--line);text-align:right;}
.bd-table thead th{background:var(--primary);color:var(--on-primary);position:sticky;top:0;z-index:3;}
.bd-table .mtx-name{
  position:sticky;inset-inline-start:0;background:var(--panel);z-index:2;
  min-width:190px;max-width:260px;white-space:normal;text-align:start;font-weight:400;
}
.bd-table thead .mtx-name{z-index:4;background:var(--primary);}
.bd-table tr.bd-sec th, .bd-table tr.bd-sec td{
  background:var(--primary-pale);color:var(--primary-ink);font-weight:700;
}
.bd-sec-hint{font-weight:400 !important;font-size:var(--fs-xs);color:var(--ink-soft) !important;}
.bd-sub-sep{color:var(--ink-soft);font-weight:400;margin:0 3px;}
.bd-side{display:block;font-size:var(--fs-xs);color:var(--ink-soft);}
.bd-input{
  width:120px;text-align:right;font-variant-numeric:tabular-nums;
  padding:4px 8px;min-height:34px;
}
/* ⚠ אין כאן disabled: במצב נעול הקלט מוחלף בטקסט מודגש (ראו bdTableHtml),
   כי שדה מושבת עדיין נראה כמו שדה ומזמין ניסיון להקליד בו. */
.bd-note{width:150px;padding:4px 8px;min-height:34px;font-size:var(--fs-xs);}
.bd-pct-new{color:var(--primary);font-weight:700;}
.bd-pct-same{color:var(--ink-soft);}
.bd-tally{display:flex;gap:14px;flex-wrap:wrap;font-weight:700;margin-bottom:var(--space-2);}
.bd-t-for{color:var(--green);}
.bd-t-against{color:var(--brick);}
.bd-t-abstain{color:var(--ink-soft);}
.bd-v-for{color:var(--green);font-weight:700;}
.bd-v-against{color:var(--brick);font-weight:700;}
.bd-v-abstain{color:var(--ink-soft);font-weight:700;}
/* ⚠ שורת "כדי לאזן" — הופכת את הגירעון ממספר למשימה. */
.bd-gap{
  background:var(--brick-pale);border:1px solid var(--brick);color:var(--brick);
  border-radius:var(--radius-sm);padding:8px 14px;font-size:var(--fs-xs);
  margin:0 0 var(--space-3);
}
.bd-gap[hidden]{display:none;}
.bd-tip{color:var(--ink-soft);font-size:var(--fs-xs);margin-inline-start:auto;}
.bd-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:var(--space-2);}
.bd-find{flex:1;min-width:200px;max-width:340px;min-height:40px;}
.bd-name{width:100%;font-weight:600;padding:3px 6px;min-height:32px;font-size:var(--fs-xs);}
.bd-sect{width:100%;padding:3px 6px;min-height:30px;font-size:var(--fs-xs);color:var(--ink-mid);margin-top:3px;}
.bd-acts{white-space:nowrap;}
.bd-x{color:var(--brick);font-size:var(--fs-base);}
.bd-sec-act{margin-inline-start:6px;color:var(--primary);font-size:var(--fs-sm);}
/* ⚠ שורה שהוסרה נשארת קריאה. קו חוצה בלבד היה הופך אותה לבלתי קריאה
   דווקא כשצריך לוודא מה בדיוק ירד; העמעום מספיק כדי לומר "לא נספר". */
.bd-gone th.mtx-name, .bd-gone td{opacity:.62;}
.bd-gone .bd-name{text-decoration:line-through;}
.bd-was{display:block;font-size:var(--fs-xs);color:var(--ink-soft);}
.bd-tag{
  display:inline-block;border-radius:var(--radius-pill);padding:1px 8px;
  font-size:var(--fs-xs);font-weight:700;border:1px solid transparent;
}
.bd-tag-new{background:var(--green-pale);color:var(--green);border-color:var(--green);}
.bd-tag-removed{background:var(--brick-pale);color:var(--brick);border-color:var(--brick);}
.bd-tag-renamed, .bd-tag-moved{background:var(--gold-pale);color:var(--gold);border-color:var(--gold);}
.bd-t-struct{color:var(--primary);}
@media (max-width:640px){
  .bd-input{width:96px;}
  .bd-note{width:110px;}
  .bd-table .mtx-name{min-width:150px;}
  .bd-find{max-width:none;}
}
.mtx-master tr.fin-sec td{background:var(--ink);color:var(--panel);font-weight:800;position:sticky;inset-inline-start:0;}
.mtx-master tr.fin-sub td, .mtx-master tr.fin-sub td.mtx-name{background:#eef2f7;font-weight:700;}
.mtx-master tr.fin-bal td, .mtx-master tr.fin-bal td.mtx-name{background:var(--primary);color:var(--on-primary);font-weight:800;}
.mtx-master td.neg, .mtx-master td.neg b{color:var(--brick);}
.mtx-master tr.fin-bal td.neg, .mtx-master tr.fin-bal td.neg b{color:#ffb3b3;}
/* ---- צבע ייחודי לכל שנה — פלטה רכה בהתקדמות כרונולוגית קר→חם ----
   בהירות אחידה בין הגוונים (נעים לעין), רוויה נמוכה (טקסט כהה קריא),
   והתקדמות מכחול-קריר (הישן) לוורדרד-חם (החדש). התקציב מעט כהה מהביצוע. */
.mtx-master thead th.mtx-yr, .mtx-master thead th[class*="mtx-y"]{color:var(--ink);}
.mtx-master td.mtx-y0{background:#EAF1F8;}  .mtx-master td.mtx-y0.mtx-bud{background:#D4E3F1;}
.mtx-master thead th.mtx-y0{background:#B7CFE6;}  .mtx-master thead th.mtx-y0.mtx-bud{background:#A3C1DC;}
.mtx-master td.mtx-y1{background:#E7F3F2;}  .mtx-master td.mtx-y1.mtx-bud{background:#CDE6E3;}
.mtx-master thead th.mtx-y1{background:#ABD7D2;}  .mtx-master thead th.mtx-y1.mtx-bud{background:#96CBC5;}
.mtx-master td.mtx-y2{background:#EBF3E7;}  .mtx-master td.mtx-y2.mtx-bud{background:#D5E7CB;}
.mtx-master thead th.mtx-y2{background:#B9D7A9;}  .mtx-master thead th.mtx-y2.mtx-bud{background:#A6CB93;}
.mtx-master td.mtx-y3{background:#F7F0DD;}  .mtx-master td.mtx-y3.mtx-bud{background:#EDE0BC;}
.mtx-master thead th.mtx-y3{background:#DECB8E;}  .mtx-master thead th.mtx-y3.mtx-bud{background:#D2BD74;}
.mtx-master td.mtx-y4{background:#F9ECE7;}  .mtx-master td.mtx-y4.mtx-bud{background:#F0D8CC;}
.mtx-master thead th.mtx-y4{background:#E3BCAC;}  .mtx-master thead th.mtx-y4.mtx-bud{background:#D8AA97;}
.mtx-master td.mtx-y5{background:#F3ECF5;}  .mtx-master td.mtx-y5.mtx-bud{background:#E3D6EA;}
.mtx-master thead th.mtx-y5{background:#CEBCDD;}  .mtx-master thead th.mtx-y5.mtx-bud{background:#BFA9D2;}

/* ---- קווי הפרדה ברורים ---- */
/* בין שנים: קו כהה יותר בתחילת כל קבוצת-שנה (עמודת התקציב פותחת שנה) */
.mtx-master th.mtx-bud, .mtx-master td.mtx-bud{border-inline-start:2px solid var(--primary);}
/* בין קטגוריות (מיון): קו עליון מודגש לכל כותרת-מיון */
.mtx-master tr.mtx-mion td, .mtx-master tr.mtx-mion th{border-top:2px solid var(--primary);border-bottom:1px solid var(--primary);}
/* בין מקטעים (הכנסות/הוצאות/מאזן): קו עבה */
.mtx-master tr.fin-sec td{border-top:3px solid var(--ink);}
.mtx-master tr.fin-sub td{border-top:2px solid var(--primary);}
.mtx-master tr.fin-bal td{border-top:3px solid var(--ink);}
/* גבול תחתון מודגש לכותרת */
.mtx-master thead tr:last-child th{border-bottom:2px solid var(--primary);}
.mtx-master tr.fin-sub td.neg, .mtx-master tr.fin-sub td.neg b{color:var(--brick);}
/* מטריצת סעיף×שנה + קטעים מתקפלים (שלב 2 של התקציב הרב-שנתי) */
.fin-matrix th, .fin-matrix td{ white-space:nowrap; }
.fin-matrix tr.fin-sec td{ background:var(--primary-pale); color:var(--primary-ink); font-weight:700; }
.fin-matrix tr.fin-sub td{ background:var(--bg); font-weight:700; border-top:1px solid var(--line); }
.fin-matrix tr.fin-bal td{ background:var(--primary); color:var(--on-primary); font-weight:800; }
.fin-matrix tr.fin-bal td.neg, .fin-matrix tr.fin-bal td.neg b{ color:#ffb3b3; }
.fin-details{ margin:var(--space-3) 0; border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; }
.fin-details>summary{ cursor:pointer; padding:12px 14px; font-weight:700; background:var(--panel); list-style:none; }
.fin-details>summary::-webkit-details-marker{ display:none; }
.fin-details>summary::before{ content:'▸ '; color:var(--primary); }
.fin-details[open]>summary::before{ content:'▾ '; }
.fin-details>*:not(summary){ padding:0 14px 12px; }
/* "ניתוח מתקדם" בהשוואת שנים — הכותרת אומרת מה מסתתר בפנים, כדי שלא
   יהיה צורך לפתוח כדי לדעת אם זה מה שמחפשים */
.fin-advanced{ margin-top:var(--space-5); }
.fin-advanced>summary{ min-height:44px; }
.fin-advanced>summary small{ display:block; font-weight:400; color:var(--ink-soft); font-size:var(--fs-xs); margin-top:2px; }

/* מקורות הנתונים — מצב כל קובץ במבט */
.fin-srcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--space-3);margin-top:var(--space-4);}
.fin-src{padding:12px 14px;border-radius:var(--radius-md);background:var(--bg);border:1px dashed var(--line);}
.fin-src.is-on{background:var(--green-pale);border-style:solid;border-color:var(--green);}
.fin-src b{display:block;font-size:var(--fs-sm);color:var(--ink);}
.fin-src span{font-size:var(--fs-xs);color:var(--ink-soft);}

.fin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-4);}
.fin-card{padding:18px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);}
.fin-card.good{border-top:3px solid var(--green);}
.fin-card.bad{border-top:3px solid var(--brick);}
.fin-card-label{font-size:var(--fs-sm);color:var(--ink-soft);}
.fin-card-value{font-size:1.6rem;font-weight:800;color:var(--ink);margin:4px 0 2px;}
.fin-card-sub{font-size:var(--fs-xs);color:var(--ink-soft);}

/* הגרף גולל אופקית בנייד במקום להצטמצם עד לחוסר קריאות */
.fin-chart-scroll{overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;}
.fin-legend{display:flex;gap:var(--space-4);font-size:var(--fs-xs);color:var(--ink-soft);margin-top:6px;}
.fin-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-inline-end:5px;}

.fin-items{display:flex;flex-direction:column;gap:var(--space-3);}
.fin-item{padding:14px;border-radius:var(--radius-md);background:var(--panel);border:1px solid var(--line);}
/* חריגה וקרבה לחריגה נבדלות בצבע *ובעובי המסגרת* — צבע לבדו אינו
   נקרא בעין שאינה מבחינה בגוונים */
.fin-item.warn{border-inline-start:4px solid var(--amber);}
.fin-item.over{border-inline-start:4px solid var(--brick);background:var(--brick-pale);}
.fin-item-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;}
.fin-item-head span{font-size:var(--fs-xs);color:var(--ink-soft);}
.fin-bar{height:7px;border-radius:4px;background:var(--line);margin:9px 0;overflow:hidden;}
.fin-bar-fill{height:100%;background:var(--primary);border-radius:4px;}
.fin-item.warn .fin-bar-fill{background:var(--amber);}
.fin-item.over .fin-bar-fill{background:var(--brick);}
.fin-item-nums{display:flex;flex-wrap:wrap;gap:var(--space-3);font-size:var(--fs-xs);color:var(--ink-soft);}
.fin-item-nums b{color:var(--ink);font-variant-numeric:tabular-nums;}
.fin-item-nums .neg b{color:var(--brick);}
.fin-item-nums .res b{color:var(--amber);}
.fin-item-nums .pct{margin-inline-start:auto;font-weight:700;}
td.neg b, td.neg{color:var(--brick);}
tr.is-res{opacity:.75;}

/* ---- חיצי שינוי בהשוואה בין שנים ----
   ⚠ החץ הוא הסימן העיקרי, לא הצבע — עלייה וירידה חייבות להיות
   נבדלות גם בעין שאינה מבחינה בגוונים. */
.up{color:var(--green);font-weight:700;white-space:nowrap;}
.down{color:var(--brick);font-weight:700;white-space:nowrap;}
/* "ללא שינוי" — בלי חץ ובלי צבע של עלייה או ירידה */
.flat{color:var(--ink-mid);font-weight:600;white-space:nowrap;}

/* ---- פירוט פרויקט תב"ר ----
   ⚠ הגרסה הקודמת ערמה שתי טבלאות בלי כותרות. כותרת לכל חלק היא
   ההבדל בין "מה אני רואה" ל"זו ההתקדמות לפי שנה". */
.tabar-detail{
  margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);
}
.tabar-sec{
  margin:var(--space-5) 0 var(--space-2);font-size:var(--fs-sm);font-weight:700;
  color:var(--ink);display:flex;align-items:baseline;gap:8px;
}
.tabar-detail > .tabar-sec:first-child{margin-top:0;}
.tabar-sec span{font-size:var(--fs-xs);font-weight:400;color:var(--ink-soft);}

/* ---- כרטיס וסכום שניתנים ללחיצה ----
   ⚠ button ולא div עם onclick: עובד מהמקלדת, נקרא כלחיץ בקורא מסך,
   ומקבל מיקוד נראה בלי שום עבודה נוספת. */
.fin-card-btn{
  display:block;width:100%;text-align:start;font-family:inherit;
  cursor:pointer;position:relative;padding-bottom:30px;
}
.fin-card-btn:hover{border-color:var(--primary);box-shadow:var(--shadow-md);}
.fin-card-more{
  position:absolute;inset-inline-start:18px;bottom:12px;
  font-size:var(--fs-xs);color:var(--primary);font-weight:600;
}
.res-btn{
  background:none;border:0;padding:0;margin:0;font:inherit;
  color:inherit;cursor:pointer;text-decoration:underline;
  text-decoration-style:dotted;text-underline-offset:3px;
  min-height:44px;display:inline-flex;align-items:center;
}
.res-btn:hover b{color:var(--primary);}

/* ---- בורר טווח ההשוואה ---- */
.cmp-range{
  padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg);margin-bottom:var(--space-4);
}
.cmp-modes{display:flex;flex-wrap:wrap;gap:var(--space-2);}
/* ⚠ label עוטף radio אמיתי — נגיש למקלדת ולקורא מסך בלי עבודה,
   ומאפשר בחירה בחצים כמצופה מקבוצת רדיו. */
.cmp-mode{
  display:flex;align-items:flex-start;gap:8px;cursor:pointer;
  padding:10px 14px;border-radius:var(--radius-md);border:1px solid var(--line);
  background:var(--panel);font-size:var(--fs-sm);min-height:44px;
  flex:1 1 180px;transition:var(--t);
}
.cmp-mode:hover{border-color:var(--primary);}
.cmp-mode.is-on{border-color:var(--primary-ink);background:var(--primary-pale);font-weight:600;}
.cmp-mode input{width:auto;margin:2px 0 0;flex-shrink:0;}
.cmp-mode span span{
  display:block;font-weight:400;font-size:var(--fs-xs);color:var(--ink-soft);margin-top:2px;
}
@media (max-width:520px){ .cmp-mode{flex:1 1 100%;} }

/* ---- רשימת הצעות בחיפוש ----
   ⚠ לא datalist: הוא מתאים לפי *תחילת* המחרוזת בחלק מהדפדפנים, ולכן
   "נוער" לא מצא "שכר רכז נוער". וגם אי אפשר לעצב אותו או להדגיש בו
   את החלק התואם. */
.sugg-wrap{position:relative;}
.sugg-wrap input{width:100%;}
.sugg-list{
  position:absolute;inset-inline:0;top:calc(100% + 4px);z-index:40;
  margin:0;padding:4px;list-style:none;max-height:280px;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);
}
.sugg-list[hidden]{display:none;}
.sugg-list li{
  padding:10px 12px;border-radius:8px;cursor:pointer;
  font-size:var(--fs-sm);color:var(--ink);min-height:44px;
  display:flex;align-items:center;
}
.sugg-list li:hover,
.sugg-list li.is-active{background:var(--primary-pale);}
/* ⚠ ההדגשה היא רקע *ומשקל*, לא צבע בלבד */
.sugg-list mark{background:var(--gold-pale);color:inherit;font-weight:800;padding:0 1px;border-radius:3px;}

/* ---- כרטיסי תב"ר ----
   ⚠ הרשימה הקודמת השתמשה בכרטיסי הסעיפים הרגילים, ולא התאימה: בתב"ר
   אין "אחוז ניצול" אלא יחס בין הכנסות להוצאות, והשאלה היא אם הפרויקט
   מכוסה — לא אם חרג. */
.tabar-list{display:flex;flex-direction:column;gap:var(--space-3);}
.tabar-card{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);
  padding:14px 16px;transition:var(--t);
}
.tabar-card.is-neg{border-inline-start:4px solid var(--brick);}
.tabar-card.is-open{box-shadow:var(--shadow-md);border-color:var(--primary);}

/* ⚠ כפתור ולא div: פתיחה וסגירה חייבות לעבוד מהמקלדת ולהיקרא
   כ"מתקפל" בקורא מסך. aria-expanded נושא את המצב. */
.tabar-head{
  display:flex;align-items:center;gap:12px;width:100%;
  background:none;border:0;padding:0;margin:0 0 10px;
  font-family:inherit;text-align:start;cursor:pointer;min-height:44px;
}
.tabar-chev{color:var(--ink-soft);font-size:var(--fs-sm);flex-shrink:0;}
.tabar-title{flex:1;min-width:0;}
.tabar-title b{display:block;font-size:var(--fs-base);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tabar-meta{display:block;font-size:var(--fs-xs);color:var(--ink-soft);margin-top:2px;}
.tabar-balance{text-align:end;flex-shrink:0;}
.tabar-balance-label{display:block;font-size:var(--fs-xs);color:var(--ink-soft);}
.tabar-balance b{font-size:var(--fs-lg);font-variant-numeric:tabular-nums;}
.tabar-balance.pos b{color:var(--green);}
.tabar-balance.neg b{color:var(--brick);}

/* פס היחס: כמה התקבל מול כמה הוצא, במבט אחד */
.tabar-split{display:flex;height:8px;border-radius:5px;overflow:hidden;background:var(--line);}
.tabar-split-in{background:var(--primary);}
.tabar-split-out{background:var(--brick);}
.tabar-nums{
  display:flex;justify-content:space-between;gap:var(--space-3);
  font-size:var(--fs-xs);color:var(--ink-soft);margin-top:6px;
}
.tabar-nums b{font-variant-numeric:tabular-nums;}
.tabar-nums .in b{color:var(--primary);}
.tabar-nums .out b{color:var(--brick);}
.tabar-nums .res b{color:var(--amber);}
/* השריון באמצע — הוא בין השניים גם במשמעות */
.tabar-nums .res{margin-inline:auto;}

@media (max-width:520px){
  .tabar-balance b{font-size:var(--fs-base);}
  .tabar-nums{flex-wrap:wrap;}
}

/* ---- משבצות העלאת קבצי תקציב ---- */
.bslot{
  padding:16px;border-radius:var(--radius);background:var(--panel);
  border:1px solid var(--line);margin-bottom:var(--space-4);
}
/* ⚠ המצב מסומן בסימן *ובצבע המסגרת*, לא בצבע בלבד —
   צבע לבדו אינו נקרא בעין שאינה מבחינה בגוונים. */
.bslot.is-done{border-color:var(--green);border-inline-start:4px solid var(--green);}
.bslot-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:6px;}
.bslot-head b{display:block;font-size:var(--fs-base);color:var(--ink);}
.bslot-head span{font-size:var(--fs-xs);color:var(--ink-soft);}
.bslot-dot{
  display:grid;place-items:center;flex-shrink:0;
  width:24px;height:24px;border-radius:50%;
  background:var(--line);color:var(--ink);font-size:var(--fs-sm);font-weight:800;
}
.bslot.is-done .bslot-dot{background:var(--green);color:var(--panel);}
.bslot-what{font-size:var(--fs-xs);color:var(--ink-soft);margin:0 0 12px;line-height:1.6;}
.bslot-status{
  font-size:var(--fs-sm);color:var(--ink);
  background:var(--green-pale);padding:10px 12px;border-radius:10px;
}

/* ---- מצב טעינה בכפתור ----
   ראו את ההערה המלאה ב-platform.js. הטקסט מוסתר ב-visibility ולא
   מוחלף, כדי שרוחב הכפתור לא יקפוץ ושקורא מסך לא יקריא אותו כפול. */
.btn.is-busy, button.is-busy{
  position:relative;
  cursor:progress;
  /* אין opacity נמוך: הכפתור עדיין ממוקד ולחיץ מבחינת המקלדת,
     והעמעום היה מרמז שהוא מנוטרל. */
}
.btn.is-busy > *, button.is-busy > *{visibility:hidden;}
.btn.is-busy::after, button.is-busy::after{
  content:'';position:absolute;inset-block:0;inset-inline:0;margin:auto;
  width:16px;height:16px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  animation:btn-spin .6s linear infinite;
  visibility:visible;
}
@keyframes btn-spin{to{transform:rotate(360deg);}}
/* ⚠ מי שביקש/ה תנועה מופחתת מקבל/ת פעימה עדינה במקום סיבוב.
   ספינר מסתובב הוא טריגר ידוע לבחילה אצל אנשים עם רגישות לתנועה. */
@media (prefers-reduced-motion: reduce){
  .btn.is-busy::after, button.is-busy::after{
    animation:btn-pulse 1.2s ease-in-out infinite;
    border-top-color:currentColor;
  }
  @keyframes btn-pulse{50%{opacity:.35;}}
}
/* טקסט לקוראי מסך בלבד */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---- קיפול פאנלים בלוח הבקרה ---- */
/* הכפתור יושב בקצה הכותרת. 44x44 כי זהו יעד מגע, ובנייד הוא הדרך היחידה
   לקפל — ראו makeHomePanelsCollapsible ב-home.js. */
.panel-collapse{
  flex-shrink:0;display:grid;place-items:center;
  width:44px;height:44px;margin:-10px -8px -10px 0;
  border:none;background:none;border-radius:50%;
  color:var(--ink-soft);cursor:pointer;transition:var(--t);
}
.panel-collapse:hover{background:var(--primary-pale);color:var(--primary-ink);}
.panel-collapse svg{transition:transform .2s var(--ease);}
/* החץ מסתובב לפי מצב הפאנל, ולכן אין צורך להחליף אייקון ב-JavaScript
   ואין רגע שבו האייקון והמצב אינם מסונכרנים. */
.panel.is-collapsed .panel-collapse svg{transform:rotate(-90deg);}
.panel.is-collapsed .panel-body{display:none;}
/* הכותרת מפסיקה להחזיק רווח תחתון כשאין מה להפריד ממנו */
.panel.is-collapsed .card-head{margin-bottom:0;}

/* ---- ציר זמן לעדכונים ---- */
.tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-4);}
.tl li{position:relative;padding-inline-start:var(--space-4);border-inline-start:2px solid var(--line);}
.tl li:first-child{border-inline-start-color:var(--primary);}
.tl li::before{
  content:'';position:absolute;inset-inline-start:-5px;top:5px;
  width:8px;height:8px;border-radius:50%;background:var(--line);
}
.tl li:first-child::before{background:var(--primary);}
.tl-time{font-size:var(--fs-xs);font-weight:700;color:var(--ink-soft);margin:0 0 3px;}
.tl li:first-child .tl-time{color:var(--primary);}
.tl-title{font-size:var(--fs-base);font-weight:700;color:var(--ink);margin:0;line-height:1.35;}
.tl-text{font-size:var(--fs-sm);color:var(--ink-soft);margin:3px 0 0;line-height:1.5;}

/* ---- כרטיס הפוך ---- */
.panel.invert{
  background:var(--primary);color:var(--on-primary);border-color:transparent;
  box-shadow:var(--shadow-lg);
}
.panel.invert .card-head-text h2{color:#fff;}
.panel.invert .card-head-text p{color:rgba(255,255,255,.72);}
.panel.invert .card-head-icon{background:rgba(255,255,255,.14);color:#fff;}
.panel.invert .agenda{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2);}
.panel.invert .agenda li{
  display:flex;align-items:flex-start;gap:var(--space-2);
  font-size:var(--fs-base);color:rgba(255,255,255,.92);line-height:1.4;
}
.panel.invert .agenda li::before{content:'•';color:rgba(255,255,255,.5);flex-shrink:0;}
.panel.invert .btn{background:var(--panel);color:var(--primary);box-shadow:none;}
.panel.invert .btn:hover{background:var(--primary-pale);}
.panel.invert .eyebrow{font-size:var(--fs-xs);font-weight:700;color:rgba(255,255,255,.6);margin:0 0 var(--space-3);}

/* צורת הכפתורים מוגדרת במקום אחד למעלה, ולא נדרסת מכאן */

/* ---- רשת דפי הבית ---- */
/* minmax(0,...) ולא 1fr לבד — וזו הסיבה שלוח הבקרה דחף את כל העמוד.
   -------------------------------------------------------------------------
   ‎1fr הוא קיצור ל-minmax(auto, 1fr), והמינימום auto פירושו "לא קטן
   מתוכן המינימום של הפריט". כלומר אם פריט אחד ברשת מסרב להצטמצם מתחת
   לרוחב מסוים, הוא לא נחתך ולא גולל — הוא *מרחיב את העמודה*, ואיתה את
   הרשת כולה, ואיתה את המסמך.

   בדיוק זה קרה: הפאנל "מה קרה במערכת" (span-2) מכיל שורות פלקס שלא
   נשברות, והמינימום שלו יצא רחב מהמסך. התוצאה בצילום — ההערות ורצועת
   המדדים בגודל תקין כי הן *מחוץ* לרשת, והפאנל פי שניים מהן וחורג
   הצידה. ברגע שהמסמך רחב מהמסך, העמוד ניתן לגלילה אופקית, וכניסה
   ללוח הבקרה נוחתת באזור הריק — המסך הלבן מהצילום הראשון.

   minmax(0,1fr) קובע שהמינימום הוא אפס, ולכן העמודה לעולם לא גדלה
   בגלל תוכן. תוכן שאינו נכנס מצטמצם או גולל בתוך עצמו, כפי שצריך.

   min-width:0 על הילדים הוא אותו עיקרון בשכבה אחת פנימה: פריט פלקס
   או גריד מקבל min-width:auto כברירת מחדל, וזה מונע ממנו להצטמצם. */
.home-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5);align-items:start;}
.home-grid > *{min-width:0;}
.home-grid > .span-2{grid-column:1 / -1;}
@media (max-width:900px){
  .home-grid{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:640px){
  .metric{padding:var(--space-4);border-inline-start:none;border-top:1px solid var(--line);}
  .metric:first-child{border-top:none;}
  .metric-value{font-size:1.6rem;}
  .card-head-icon{width:40px;height:40px;border-radius:var(--radius-md);}
  /* כפתור פעולה ברוחב מלא מתאים לכרטיס שבו הוא הפעולה היחידה, אבל *לא*
     לשורה בזרם הפעילות: שם הוא הופך כל שורה לשלוש שורות בגובה כ-130
     פיקסלים, ושמונה פריטים נהפכים לגלילה של יותר מ-1000 פיקסלים. הזרם
     מוחרג במפורש למטה ליד act-list. */
  .feed-action{width:100%;}
  .feed-action .btn{width:100%;justify-content:center;}
}

/* שורת זרם הפעילות בנייד — קומפקטית.
   -------------------------------------------------------------------------
   הכלל הכללי .feed-action{width:100%} נכון לכרטיסים, ושגוי כאן. בזרם הוא
   הפך כל פריט לשלוש שורות: תווית וזמן, כפתור ענק לרוחב כל המסך, וכותרת.
   שמונה פריטים = גלילה של יותר מאלף פיקסלים על מסך של 800.

   הכפתור חוזר לרוחב התוכן שלו ונצמד לקצה, ליד הזמן. הכלל הזה יושב
   *אחרי* בלוק ה-640 בכוונה, כדי לנצח אותו בסדר המקור. */
.act-list .feed-action{width:auto;flex:0 0 auto;margin-inline-start:auto;}
.act-list .feed-action .btn{width:auto;}
/* חמישה פריטים כברירת מחדל; השאר קיימים ב-HTML ומוסתרים, ולכן "הצג עוד"
   הוא מיידי ואינו מצריך רינדור נוסף. */
.act-list .act-extra{display:none;}
.act-list.show-all .act-extra{display:flex;}
.act-more{margin-top:var(--space-3);width:100%;justify-content:center;}

/* =========================================================================
   ניווט במגירה — לפי מדידה ולא לפי נקודת עצירה
   -------------------------------------------------------------------------
   נקודת עצירה קבועה נכשלה כאן פעמיים, ובצדק: הרוחב שהניווט צורך תלוי
   בכמה פריטים גלויים (משתנה לפי תפקיד ולפי מודולים שכובו), באורך השמות,
   ברוחב שם המשתמש/ת, ובגודל הגופן שהדפדפן מגיש. כל מספר שאבחר יהיה נכון
   למקרה אחד ושגוי לאחר.

   לכן JS מודד בפועל אם הניווט גולש (scrollWidth מול clientWidth) ומוסיף
   את המחלקה nav-collapsed לגוף המסמך. המחלקה - ולא רוחב המסך - מפעילה
   את המגירה. ראו updateNavFit ב-platform.js.
   ========================================================================= */
  /* אותה שפת צורה כמו שדה החיפוש וצ'יפ המשתמש/ת: גלולה, מסגרת דקה,
     44 פיקסלים. שלושה רכיבים סמוכים בשלוש צורות שונות נראים מקריים. */
  /* רקע כחלחל ואייקון בצבע הראשי.
     קודם הוא היה לבן על כותרת לבנה, עם מסגרת ביחס ניגודיות 1.2:1 —
     כלומר בלתי נראית. הכפתור היה שם, במידות תקינות, ופשוט לא נראה. */
  body.nav-collapsed #mobileNavToggle{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;flex-shrink:0;
    border:1px solid transparent;border-radius:var(--radius-pill);
    background:var(--primary-pale);color:var(--primary-ink);cursor:pointer;
    transition:background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  }
  body.nav-collapsed #mobileNavToggle:hover{background:var(--primary);color:var(--on-primary);}
  body.nav-collapsed #mobileNavBackdrop{display:none;position:fixed;inset:0;background:rgba(20,28,38,.5);z-index:39;}
  /* ראו את ההסבר המלא מעל updateNavFit ב-platform.js ובסקריפט המוטבע
     בראש ה-body. בקצרה, שני מצבים שבהם אסור שיהיה מעבר מונפש:

     nav-measuring — בזמן המדידה עצמה. בלעדיה, המדידה נופלת באמצע מעבר
     של 250ms ומחזירה מספר שגוי, וזו הסיבה שהגרסה הקודמת נאלצה להמתין
     120 מילישניות ובמשך אותן 120 מילישניות הציגה פריסת שולחן בטלפון.

     nav-boot — עד לסיום המדידה הראשונה. בלעדיה, ההוספה הראשונה של
     nav-collapsed מנפישה את המגירה מ-translateX(0) ל-translateX(100%),
     כלומר התפריט נראה נפתח ונסגר בהחלקה בכל כניסה למערכת. */
  body.nav-measuring #staffNav,
  body.nav-measuring .resident-portal-nav,
  body.nav-boot #staffNav,
  body.nav-boot .resident-portal-nav{transition:none !important;}
  /* ⚠ וגם הילדים. לכפתורי הניווט יש transition:all (var(--t)), ולכן
     getComputedStyle והמידות שנמדדות בזמן המדידה הן ערכי *תחילת* המעבר:
     הריפוד של פריט מגירה (10px 12px) ועיגול של 38px. ניווט התושב/ת נמדד
     כך בגודל המגירה, "לא נכנס", ונשאר המבורגר גם על מסך 1440 — לצמיתות,
     כי כל מדידה הבאה מתחילה שוב ממצב המגירה. */
  body.nav-measuring :is(#staffNav, .resident-portal-nav) *,
  body.nav-boot :is(#staffNav, .resident-portal-nav) *{transition:none !important;}
  body.nav-collapsed #mobileNavBackdrop.open{display:block;animation:fade .18s var(--ease);}
  body.nav-collapsed #staffNav{
    flex-direction:column;
    position:fixed;top:0;bottom:0;inset-inline-start:0;inset-inline-end:auto;
    width:var(--drawer-w);
    background:var(--panel);box-shadow:var(--shadow-lg);
    z-index:40;padding:76px 0 20px;overflow-y:auto;
    transform:translateX(100%);
    transition:transform .25s var(--ease), visibility .25s var(--ease);
    pointer-events:none;
    /* visibility:hidden מוציא את כפתורי המגירה הסגורה גם מסדר המעבר במקלדת (Tab),
       לא רק מהעכבר - אחרת משתמש/ת מקלדת "נופל/ת" לתוך תפריט בלתי נראה. */
    visibility:hidden;
  }
  body.nav-collapsed .nav-submenu{min-width:220px;}
  body.nav-collapsed #staffNav.mobile-open{
    transform:translateX(0);
    pointer-events:auto;
    visibility:visible;
  }
  /* height:auto מבטל את הגובה הקבוע של הגלולה בשולחני. בלעדיו פריטי
     המגירה נשארו 40 פיקסלים - צפוף, ומתחת לתקן המגע. */
  body.nav-collapsed #staffNav button{
    border-bottom:1px solid var(--bg);padding:15px 22px;text-align:right;
    border-radius:0;white-space:normal;margin:0;
    height:auto;min-height:52px;
  }
  body.nav-collapsed #staffNav button.active{background:var(--primary-pale);border-bottom:1px solid var(--bg);border-inline-start:3px solid var(--gold);}

  /* כרטיס מותג בראש העמוד */
  body.nav-collapsed .who{font-size:var(--fs-xs);padding:6px 10px;max-width:60vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  /* ⚠ אין כאן כלל gap.
     ------------------------------------------------------------------------
     גרסה קודמת קבעה כאן gap:14px, וזו הייתה טעות: nav-collapsed נדלקת
     גם במסך *רחב* כשהניווט ארוך מדי (מנהל/ת עם הרבה תפקידים), ושם
     הכלל הבסיסי כבר נותן 24 — כלומר הכלל הזה דווקא *הקטין* את המרווח
     במחשב במקום להגדיל אותו.

     המרווח מטופל עכשיו בשני מקומות נפרדים ונכונים:
       • המרווח הצמוד ללוגו — ב-.brand, ללא תלות במצב המגירה
       • צמצום המרווח הכללי בטלפון — בבלוק ה-600px, שם הוא באמת נחוץ */


  /* =========================================================================
     מכאן ואילך: פריסה צרה, לפי *רוחב המסך* ולא לפי הניווט
     -------------------------------------------------------------------------
     עד עכשיו כל הכללים האלה היו תלויים ב-nav-collapsed, שנקבעת לפי השאלה
     "האם שורת הניווט נכנסת ברוחב הכותרת". זה ערבב שתי שאלות שונות לגמרי:

       • האם הניווט צריך להיות מגירה?  — שאלה על הניווט
       • האם התוכן צריך פריסה צרה?     — שאלה על המסך

     הן נפרדות, והערבוב שלהן שבר את שני הכיוונים:

       מנהל/ת עם כל התפקידים על מסך 1100 פיקסלים — שורת הניווט ארוכה ואינה
       נכנסת, ולכן nav-collapsed נדלקה והמסך הרחב קיבל את פריסת הטלפון:
       טבלאות מוערמות ככרטיסים, שדה אחד בשורה, כרטיסי אנשי קשר. הכל על
       1100 פיקסלים של מקום פנוי.

       ובכיוון ההפוך — טאבלט או טלפון מסובב שבהם הניווט דווקא כן נכנס
       קיבלו טבלאות של שמונה עמודות ברוחב שולחני.

     עכשיו כל שאלה מקבלת מחלקה משלה:
       nav-collapsed  — מגירה. נקבעת במדידה (updateNavFit).
       compact-layout — פריסה צרה. נקבעת ברוחב המסך (matchMedia ב-platform.js
                        וגם בסקריפט המוטבע בראש ה-body, כדי שהציור הראשון
                        כבר יהיה נכון).

     למה מחלקה ולא פשוט @media: הרמת הכללים ל-@media הייתה מורידה את
     הסגוליות (specificity) שלהם מ-(0,2,1) ל-(0,0,1), ואז כללים אחרים
     בגיליון היו מתחילים לנצח אותם במקומות בלתי צפויים. עם מחלקה במקום
     מחלקה הסגוליות וסדר המקור נשארים זהים בדיוק, והשינוי מכני לחלוטין.
     ========================================================================= */

  /* כפתורים - אזור מגע נוח יותר באצבע */
  /* WCAG 2.5.8 דורש יעד מגע של 44x44 לכל הפחות. שלושת הכללים כאן היו
     מתחת לזה (42, 36) - קטן מספיק כדי שאצבע תחטיא, במיוחד בטופס עם
     כמה כפתורים צמודים. */
  body.compact-layout :is(button,a).btn{padding:12px 18px;min-height:44px;}
  body.compact-layout :is(button,a).btn.small{padding:10px 14px;min-height:44px;font-size:var(--fs-sm);}

  /* טפסים - שדה אחד בשורה, פחות צפוף */
  body.compact-layout .form-row{gap:10px;margin-bottom:10px;}
  body.compact-layout .field{min-width:100%;}
  body.compact-layout .field label{font-size:var(--fs-sm);}

  /* טבלאות - פונט קצת יותר גדול לקריאות, ריווח מצומצם כדי לפנות מקום.
     שורות לא נשברות באמצע תוכן התא (למשל מספרי טלפון עם " | ") - במקום זה הטבלה כולה
     גוללת אופקית, במקום להיראות שבורה. */
  body.compact-layout table{font-size:var(--fs-sm);}
  body.compact-layout th{font-size:var(--fs-xs);padding:8px 6px;white-space:nowrap;}
  body.compact-layout td{padding:10px 6px;white-space:nowrap;}
  body.compact-layout .rowbtns{flex-wrap:wrap;gap:6px;white-space:normal;}

  /* גלילה אופקית לטבלאות רחבות.
     ------------------------------------------------------------------------
     ההערה שהייתה כאן טענה שכל טבלה עטופה במעטפת overflow-x:auto — אבל
     מעטפת כזו לא הייתה קיימת בשום מקום בגיליון. המעטפות בפועל
     (incomeTableWrap, residentsTableWrap וכו') הן div ריקים בלי מחלקה
     ובלי סגנון.

     והתוצאה חמורה דווקא בגלל שתי השורות שמעל: td ו-th מקבלים nowrap,
     כלומר אף תא לא נשבר. 18 מתוך 22 הטבלאות במערכת אינן stacked-cards,
     ורובן 7-8 עמודות — טבלת הכנסות, הוצאות, בקרה תקציבית, כרטסת,
     פרוטוקולים, מרשם התושבים. בטלפון של 360 פיקסלים כל אחת מהן דחפה את
     *כל העמוד* לרוחב כפול, עם גלילה אופקית של המסך כולו: הכותרת נגררת,
     הכפתורים בורחים מחוץ למסך, והפריסה נראית שבורה.

     display:block הופך את הטבלה עצמה למיכל גלילה. זו הדרך היחידה להשיג
     את זה בלי לגעת ב-18 מקומות שמייצרים את ה-HTML.
     :not(.stacked-cards) — אלה שכן הופכות לכרטיסים כבר משתמשות ב-display
     לצורך אחר, ואסור לדרוס אותן. */
  body.compact-layout table:not(.stacked-cards){
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    /* בלי זה טבלה צרה מתכווצת לרוחב התוכן במקום למלא את הפאנל */
    min-width:100%;
    /* רמז ויזואלי שיש עוד תוכן מימין. ברירת המחדל בנייד היא פס גלילה
       נסתר, ובלי הרמז משתמש/ת פשוט לא יודע/ת שאפשר לגלול. */
    scrollbar-width:thin;
  }
  body.compact-layout table:not(.stacked-cards) tbody{width:100%;}

  /* טבלה עם המחלקה stacked-cards הופכת בנייד לרשימת "כרטיסים" - כל שורה נהיית כרטיס נפרד
     עם תוויות מעל כל ערך, במקום עמודות צפופות שדורשות גלילה אופקית. */
  body.compact-layout table.stacked-cards thead{display:none;}
  body.compact-layout table.stacked-cards, body.compact-layout table.stacked-cards tbody, body.compact-layout table.stacked-cards tr{display:block;width:100%;}
  body.compact-layout table.stacked-cards tr{
    margin-bottom:12px;border:1px solid var(--line);border-radius:var(--radius-sm);
    padding:4px 14px;background:var(--panel);box-shadow:var(--shadow-xs);
  }
  body.compact-layout table.stacked-cards td{
    display:flex;align-items:center;gap:10px;
    border:none;border-bottom:1px solid var(--bg);padding:9px 0;
  }
  body.compact-layout table.stacked-cards td:last-child{border-bottom:none;}
  body.compact-layout table.stacked-cards td:empty{display:none;}
  body.compact-layout table.stacked-cards td::before{
    content:attr(data-label);
    font-weight:700;color:var(--ink-soft);font-size:var(--fs-xs);
    min-width:66px;flex-shrink:0;
  }
  body.compact-layout table.stacked-cards td:not([data-label])::before, body.compact-layout table.stacked-cards td[data-label=""]::before{content:none;}
  body.compact-layout table.stacked-cards .rowbtns{flex:1;justify-content:flex-end;}

  /* כרטיס איש-קשר קומפקטי לנייד (תושבים/דף קשר) - שם + סטטוס + טלפון בלבד, שדות ריקים לא מוצגים כלל */
  body.compact-layout .contact-card-list{display:flex;flex-direction:column;gap:8px;}
  body.compact-layout .contact-card{
    display:flex;align-items:center;gap:12px;padding:12px 14px;
    background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);
    box-shadow:var(--shadow-xs);cursor:pointer;transition:var(--t);
  }
  body.compact-layout .contact-card:active{background:var(--primary-pale);}
  body.compact-layout .contact-card .avatar-circle{
    width:42px;height:42px;border-radius:50%;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(155deg,var(--primary-light),var(--primary));
    color:var(--panel);font-weight:700;font-size:var(--fs-md);
  }
  body.compact-layout .contact-card .cc-body{flex:1;min-width:0;}
  body.compact-layout .contact-card .cc-name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  body.compact-layout .contact-card .cc-name{font-weight:700;font-size:var(--fs-base);color:var(--ink);}
  body.compact-layout .contact-card .cc-sub{font-size:var(--fs-sm);color:var(--ink-soft);margin-top:2px;}
  body.compact-layout .contact-card .cc-actions{display:flex;flex-direction:column;gap:6px;flex-shrink:0;}
  body.compact-layout .contact-card .cc-actions button{min-width:44px;min-height:44px;padding:0;font-size:var(--fs-md);}
  body.compact-layout .contact-card .cc-index{flex-shrink:0;width:20px;text-align:center;font-size:var(--fs-xs);font-weight:700;color:var(--ink-soft);}


  /* כרטיסי נתונים ופרויקטים - עמודה אחת ברורה */
  body.compact-layout .cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;}
  body.compact-layout .card{padding:12px 14px;}
  body.compact-layout .card .value{font-size:var(--fs-lg);}
  body.compact-layout .proj-grid{grid-template-columns:minmax(0,1fr);}

  /* פילטרים וחיפוש - נערמים אנכית במקום להידחס */
  body.compact-layout .filters{gap:8px;}
  body.compact-layout .filters select, body.compact-layout .filters input,
  body.compact-layout .filter-grow{width:100%;min-width:0;flex-basis:100%;}

  /* הודעות טוסט - לא נדבקות ממש לתחתית המסך (בגלל סרגלי דפדפן/ג'סטורות) */
  body.compact-layout #toastStack{bottom:calc(16px + env(safe-area-inset-bottom, 0px));}
  body.compact-layout .toast{font-size:var(--fs-sm);padding:10px 16px;}

  /* פרויקטים ומשימות - פחות ריפוד */
  body.compact-layout .proj-card{padding:13px;}
  body.compact-layout .task-item, body.compact-layout .reg-item, body.compact-layout .doc-item, body.compact-layout .msg{font-size:var(--fs-sm);}


/* =========================================================================
   ניווט התושבים בנייד — מגירה נשלפת
   -------------------------------------------------------------------------
   הבעיה שתוקנה: שבעה עיגולים בני 66 פיקסלים בשלוש שורות, בתוך אזור דביק,
   תפסו 361 פיקסלים - 43% ממסך טלפון. פותחים טופס ורואים תפריט.

   הפתרון: אותה מגירה שכבר משרתת את סרגל הצוות, נשלפת מכפתור שלושת הפסים.
   בנייד הניווט תופס אפס מקום עד שמבקשים אותו, וכשהוא נפתח כל הפריטים
   נראים יחד בלי גלילה צידית.

   הפריטים גדולים ומרווחים בכוונה - מגירה היא מסך מלא, לא רשימה דחוסה,
   ואצבע צריכה למצוא את היעד בלי דיוק.
   ========================================================================= */
/* אותו מנגנון בדיוק כמו במגירת הצוות: המחלקה, לא רוחב המסך.
   אי-התאמה בין השניים יוצרת מצב שבו הניווט הופך למגירה אבל הכפתור
   שפותח אותה עדיין מוסתר - כלומר תושב/ת בלי שום דרך לנווט. */
  /* נפתחת מצד ימין.
     ------------------------------------------------------------------
     inset-inline-end בעברית הוא הצד השמאלי, ולכן המגירה נפתחה משמאל
     בעוד הכפתור שפותח אותה יושב בימין. inset-inline-start הוא הצד הימני,
     והיסט חיובי ב-translateX מסתיר אותה מעבר לקצה הימני.

     הרקע בנייבי ולא בצבע הראשי, כדי להתיישר עם הפאנלים הכהים שבשאר
     המערכת — פאנל השירותים בפורטל וכותרת יומן האירועים. */
  body.nav-collapsed .resident-portal-nav{
    position:fixed;inset-block:0;inset-inline-start:0;inset-inline-end:auto;
    width:var(--drawer-w);
    z-index:60;
    display:flex;flex-direction:column;flex-wrap:nowrap;
    justify-content:flex-start;align-items:stretch;
    gap:4px;
    padding:calc(var(--space-6) + 20px) var(--space-3) var(--space-5);
    background:var(--navy);
    border-bottom:none;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    transform:translateX(100%);
    transition:transform .25s var(--ease), visibility .25s var(--ease);
    pointer-events:none;visibility:hidden;
    box-shadow:-8px 0 34px rgba(0,0,0,.24);
  }
  body.nav-collapsed .resident-portal-nav.mobile-open{
    transform:translateX(0);
    pointer-events:auto;visibility:visible;
  }

  /* פריט המגירה בנוי כמו כרטיס במערכת: עיגול אייקון צבעוני, כותרת,
     ופינות רכות. אותה שפה כמו הקיצורים בדף הבית ובפאנל הכהה. */
  body.nav-collapsed .resident-icon-btn{
    flex-direction:row;align-items:center;gap:var(--space-3);
    width:100%;height:auto;
    padding:10px 12px;
    min-height:56px;
    border-radius:var(--radius);
    background:rgba(255,255,255,.06);
  }
  body.nav-collapsed .resident-icon-btn .circle{
    width:38px;height:38px;box-shadow:none;flex-shrink:0;border-radius:var(--radius-md);
  }
  body.nav-collapsed .resident-icon-btn .circle svg{width:22px;height:22px;}
  body.nav-collapsed .resident-icon-btn:hover .circle, body.nav-collapsed .resident-icon-btn:active .circle{transform:none;}
  body.nav-collapsed .resident-icon-btn span:last-child{
    font-size:1.0625rem;font-weight:700;color:#fff;
    text-align:start;white-space:normal;line-height:1.3;
  }
  body.nav-collapsed .resident-icon-btn:hover{background:rgba(255,255,255,.14);}

  /* ⚠ var(--panel) ולא #fff, ו---ink ולא --navy.
     ההערה למטה אומרת "הכרטיס הלבן שמופיע בכל מקום אחר במערכת" — וזו
     בדיוק הסיבה לטוקן: במצב כהה כרטיס אינו לבן אלא #18212D. ערך קשיח
     השאיר כאן ריבוע לבן בודד בתוך עמוד כהה, ו---navy עליו היה הופך
     לטקסט כהה על רקע כהה ברגע שהרקע כן היה מתוקן. */
  body.nav-collapsed .resident-portal-nav button.resident-icon-btn.active{
    background:var(--panel);
  }
  /* הפריט הפעיל הוא הכרטיס שמופיע בכל מקום אחר במערכת */
  body.nav-collapsed .resident-icon-btn.active span:last-child{color:var(--ink);font-weight:800;}
  body.nav-collapsed .resident-icon-btn.active .circle{outline:2px solid rgba(255,255,255,.6);outline-offset:2px;}
  /* המגירה כהה, ולכן צבעי הריחוף והמצב הפעיל של הגלולות בשולחני
     חייבים להתבטל כאן - אחרת הטקסט הופך לכחול על רקע כחול. */
  /* רק בריחוף. הפריט הפעיל הוא כרטיס לבן, וטקסט לבן עליו היה בלתי
     נראה — הכלל הזה בא אחרי כלל הפריט הפעיל ודרס אותו. */
  body.nav-collapsed .resident-icon-btn:hover span:last-child{color:#fff;}
  body.nav-collapsed .resident-icon-btn.active:hover span:last-child{color:var(--navy);}

  body.nav-collapsed .resident-icon-btn .nav-badge{
    position:static;margin-inline-start:auto;flex-shrink:0;
  }


/* =========================================================================
   דף הבית של התושבים
   -------------------------------------------------------------------------
   הקו: אייקוני קו דקים בצבע הדגשה, כרטיסים לבנים בפינות רחבות עם צל רך,
   הכול ממורכז, על רקע בגוון רך במקום לבן. מה שנותן לזה את הקלילות אינו
   הצבע אלא היחס בין השטח הריק לתוכן - לכן הכרטיסים גבוהים והריווח נדיב.
   ========================================================================= */

/* פורטל התושבים יושב על רקע רך, כדי שהכרטיסים הלבנים ייראו צפים מעליו */
body.resident-view main{background:var(--accent-soft);}
body.resident-view{background:var(--accent-soft);}

/* =========================================================================
   פורטל התושבים
   -------------------------------------------------------------------------
   שלוש שכבות, לפי סדר החשיבות לתושב/ת:
     1. באנר — מה חדש. אם יש הודעה טרייה היא הבאנר עצמו; אחרת ברכה.
     2. שישה שירותים ראשיים על רקע בהיר.
     3. שאר השירותים בפאנל כהה. ההפרדה הכהה אומרת "אלה הדברים היומיומיים
        ואלה כל השאר" בלי להסתיר דבר בתפריט.
   ואחריהן לוח האירועים.
   ========================================================================= */








/* הבאנר עם תמונה. הכהות מוטמעת בגרדיאנט של background-image עצמו ולא
   בשכבה נפרדת - כך הטקסט קריא על כל תמונה, כולל בהירה, בלי לתחזק
   שכבת overlay שיכולה להישאר מאחור. */


/* ---- מוני המצב האישי ---- */







/* ---- כותרת סקשן עם פס הדגשה ---- */


/* ---- שישה השירותים הראשיים ----
   ממורכזים, אייקון קו למעלה, כותרת מודגשת וכיתוב הסבר מתחת. הכיתוב
   הכרחי: "דיווח על תקלה" לבדו לא אומר לתושב/ת חדשים מה נכנס תחתיו. */








/* ---- פאנל השירותים הנוספים ---- */







/* ---- אזור חצוי ---- */







/* ---- פוטר ---- */








/* ---- לוח האירועים ---- */







@media (max-width:820px){ .rp-events-grid{grid-template-columns:minmax(0,1fr);} }

















/* =========================================================================
   גישה לשעת חירום
   -------------------------------------------------------------------------
   הכפתור צף מעל כל מסך ואינו נגלל. אדום מובהק שאינו מופיע בשום מקום אחר
   בממשק - כדי שהעין תמצא אותו בלי לחפש, גם תחת לחץ.
   ========================================================================= */
body.logged-in #paletteTrigger{display:flex;}
body.nav-collapsed #paletteTrigger{margin-inline:auto;}

#emergencyFab{
  position:fixed;inset-block-end:20px;inset-inline-end:20px;z-index:150;
  display:flex;align-items:center;gap:var(--space-2);
  min-height:52px;padding:0 20px;border:none;border-radius:var(--radius-pill);
  background:#B22222;color:#fff;
  font-family:inherit;font-size:var(--fs-base);font-weight:800;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(178,34,34,.34), 0 12px 34px rgba(178,34,34,.22);
  transition:var(--t);
}
#emergencyFab:hover{background:#991B1B;transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(178,34,34,.42), 0 18px 44px rgba(178,34,34,.26);}
#emergencyFab:focus-visible{outline:3px solid #fff;outline-offset:3px;}
@media (max-width:760px){
  #emergencyFab{inset-block-end:16px;inset-inline-end:16px;padding:0 17px;min-height:50px;}
}

.emg-modal{max-width:560px;}
.emg-lead{
  font-size:var(--fs-base);line-height:1.55;color:var(--ink-mid);
  background:var(--brick-pale);border-inline-start:5px solid var(--brick);
  border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);
  margin:0 0 var(--space-4);
}
.emg-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-2);}
@media (max-width:520px){ .emg-grid{grid-template-columns:minmax(0,1fr);} }

.emg-national{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3) var(--space-4);min-height:64px;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--panel);text-decoration:none;transition:var(--t);
}
.emg-national:hover{border-color:#B22222;background:var(--brick-pale);}
.emg-num{
  font-family:'JetBrains Mono',monospace;font-size:1.35rem;font-weight:700;
  color:var(--brick);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.emg-info{display:flex;flex-direction:column;gap:1px;min-width:0;}
.emg-info b{font-size:var(--fs-base);color:var(--ink);}
.emg-info span{font-size:var(--fs-xs);color:var(--ink-soft);line-height:1.35;}

.emg-sub{
  font-size:var(--fs-md);font-weight:800;color:var(--primary);
  margin:var(--space-5) 0 var(--space-3);
}
.emg-local{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2);}
.emg-local li{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding:var(--space-3) var(--space-4);min-height:56px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);
}
.emg-local-info{display:flex;flex-direction:column;gap:1px;min-width:0;}
.emg-local-info b{font-size:var(--fs-base);}
.emg-local-info span{font-size:var(--fs-xs);color:var(--ink-soft);}
.emg-local .btn{font-variant-numeric:tabular-nums;white-space:nowrap;}
.emg-nophone{font-size:var(--fs-xs);color:var(--ink-soft);}

/* הכפתור אינו נדפס - הוא חסר משמעות על נייר */
@media print{ #emergencyFab{display:none !important;} }

/* =========================================================================
   זמן המתנה בקריאות אחזקה
   -------------------------------------------------------------------------
   הצבע מלווה תמיד במספר הימים בכתב. פס צד בכרטיס נותן סריקה מהירה של
   הרשימה, אבל מי שאינו מבחין בגוונים - וכל מי שמדפיס בשחור-לבן - מקבל
   את אותו מידע מהטקסט.
   ========================================================================= */
.wait-tag{
  display:inline-block;padding:3px 9px;border-radius:var(--radius-sm);
  font-size:var(--fs-xs);font-weight:700;white-space:nowrap;line-height:1.35;
  border:1px solid transparent;
}
.wait-ok  {background:var(--primary-pale);color:var(--primary-ink);border-color:rgba(19,73,171,.18);}
.wait-warn{background:var(--amber-pale);color:var(--amber);border-color:rgba(125,78,18,.22);}
.wait-late{background:var(--brick-pale);color:var(--brick);border-color:rgba(155,65,48,.24);}
.wait-done{background:var(--green-pale);color:var(--green);border-color:rgba(47,107,79,.22);}

/* =========================================================================
   דוח תקציב מול ביצוע
   ========================================================================= */
.bc-cat-row:hover{background:var(--primary-pale);}
.bc-caret{display:inline-block;width:14px;color:var(--primary);font-size:var(--fs-xs);}
.bc-code{
  font-size:var(--fs-xs);color:var(--ink-soft);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--radius-xs);padding:1px 5px;margin-inline-start:6px;
  font-variant-numeric:tabular-nums;
}
.bc-acct-count{font-size:var(--fs-xs);color:var(--ink-soft);margin-inline-start:8px;}
.bc-acct-row{background:var(--row-alt);}
.bc-acct-row td:first-child{padding-inline-start:26px;}
.bc-acct-name{font-size:var(--fs-sm);}

/* פס הניצול. הצבע נושא משמעות, ולכן הוא מלווה תמיד באחוז במספרים -
   קורא מסך ומשתמש/ת עם עיוורון צבעים מקבלים את אותו מידע. */
.bc-bar{
  position:relative;display:inline-block;vertical-align:middle;
  width:calc(100% - 46px);height:9px;border-radius:var(--radius-xs);
  background:var(--line);overflow:visible;
}
.bc-bar-fill{height:100%;border-radius:var(--radius-xs);background:var(--primary);transition:width .3s var(--ease);}
.bc-bar-ok   .bc-bar-fill{background:var(--green);}
.bc-bar-warn .bc-bar-fill{background:var(--gold-accent);}
.bc-bar-over .bc-bar-fill{background:var(--brick);}
.bc-bar-alert{background:var(--brick-pale);}
.bc-bar-neutral{background:var(--line);}
.bc-bar-neutral .bc-bar-fill{background:repeating-linear-gradient(45deg,#B9C2D0,#B9C2D0 4px,#CDD5E0 4px,#CDD5E0 8px);}
.tag-tabar{background:var(--primary-pale);color:var(--primary-ink);}
.bc-bar-alert .bc-bar-fill{
  background:repeating-linear-gradient(45deg,var(--brick),var(--brick) 4px,#C97B6C 4px,#C97B6C 8px);
}
.bc-bar-over{overflow:visible;}
.bc-bar-over-label,.bc-bar-over span{white-space:nowrap;}
.bc-bar .bc-bar-over{position:absolute;top:-5px;inset-inline-end:-4px;font-size:var(--fs-xs);color:var(--brick);font-weight:700;}
.bc-util-text{
  display:inline-block;width:42px;text-align:start;font-size:var(--fs-xs);
  color:var(--ink-soft);font-variant-numeric:tabular-nums;margin-inline-start:4px;
}
.bc-recon-list{list-style:none;margin:8px 0 0;padding:0;max-height:260px;overflow-y:auto;}
.bc-recon-list li{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:5px 8px;border-bottom:1px solid var(--line);font-size:var(--fs-sm);
}
.bc-recon-list li:last-child{border-bottom:none;}
.bc-recon-list li b{margin-inline-start:auto;font-variant-numeric:tabular-nums;}
.note details summary::-webkit-details-marker{display:none;}
.note details summary::before{content:'▸ ';}
.note details[open] summary::before{content:'▾ ';}
.md-clickable{cursor:pointer;}
.bc-row-clickable{cursor:pointer;}
.bc-row-clickable:hover{background:var(--primary-pale);}
.bc-row-clickable:hover .bc-acct-name{color:var(--primary);text-decoration:underline;}
.md-clickable:hover{background:var(--primary-pale);}
.md-txcount{font-size:var(--fs-xs);color:var(--ink-soft);text-align:start;}
tr.md-txwrap > td{padding:0 0 10px;background:var(--row-alt);}
.ledger-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);margin:0;}
.ledger-table th{
  background:transparent;color:var(--ink-soft);font-size:var(--fs-xs);font-weight:600;
  padding:6px 8px;border-bottom:1px solid var(--line);text-transform:none;letter-spacing:0;
}
.ledger-table td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top;}
.ledger-table tr:last-child td{border-bottom:none;}
.ledger-table .mono{font-variant-numeric:tabular-nums;white-space:nowrap;}
.ledger-enc td{color:var(--ink-soft);background:var(--gold-pale);}
/* ---- תפריט התקציב הנפתח ----
   position:fixed ולא absolute, והאלמנט יושב מחוץ ל-<nav>. הסיבה: סרגל
   הניווט הוא מיכל עם overflow-x:auto, וכל תפריט שנפתח בתוכו נחתך על ידו
   ומופיע בקצה המסך. המיקום המדויק מחושב ב-JS מול מיקום הכפתור. */
nav button.has-submenu{display:inline-flex;align-items:center;gap:5px;}
.nav-caret{font-size:var(--fs-xs);opacity:.75;transition:transform .18s var(--ease);}
nav button.has-submenu[aria-expanded="true"] .nav-caret{transform:rotate(180deg);}

.nav-submenu{
  display:none;position:fixed;top:0;inset-inline-start:0;
  min-width:236px;max-width:calc(100vw - 24px);z-index:120;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);
  padding:6px;
}
.nav-submenu.open{display:block;animation:navMenuIn .14s var(--ease);}
@keyframes navMenuIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.nav-submenu button{
  display:block;width:100%;text-align:start;
  padding:10px 12px;min-height:44px;border:none;background:none;
  font-family:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--ink);
  border-radius:var(--radius-sm);cursor:pointer;transition:var(--t);
  border-bottom:none;
}
.nav-submenu button:hover{background:var(--primary-pale);color:var(--primary-ink);}
.nav-submenu button.active{background:var(--primary);color:var(--panel);}

/* ---- כותרות מקטע ושורת הסבר בתת-תפריט ----
   ⚠ ההסבר הוא <small> *בתוך* הכפתור ולא אלמנט אחיו: כך הוא יורש את
   ההסתרה כשהתפקיד אינו מורשה, בלי שסינון ההרשאות יצטרך להכיר אותו. */
.nav-sub-head{
  padding:10px 12px 4px;font-size:var(--fs-xs);font-weight:800;
  color:var(--ink-soft);letter-spacing:.02em;
}
.nav-sub-head:first-child{padding-top:4px;}
.nav-submenu button small{
  display:block;margin-top:2px;font-size:var(--fs-xs);font-weight:500;
  color:var(--ink-soft);line-height:1.45;white-space:normal;
}
/* ⚠ במצב פעיל/ריחוף הרקע מתהפך, וההסבר חייב להתהפך איתו — אחרת
   נשאר טקסט אפור על רקע כחול, כלומר בלתי קריא. */
.nav-submenu button:hover small{color:var(--primary);}
.nav-submenu button.active small{color:var(--panel);opacity:.85;}
.nav-submenu{min-width:300px;}

/* ---- מצב הייבוא ---- */
.import-status-row{
  display:flex;align-items:center;gap:11px;
  padding:11px 0;border-bottom:1px solid var(--line);
}
.import-status-row:last-of-type{border-bottom:none;}
.import-status-row > div{flex:1;}
.import-status-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.import-status-dot.on{background:var(--green);}
.import-status-dot.off{background:var(--line);border:1px solid var(--ink-soft);}
.import-status-detail{font-size:var(--fs-xs);color:var(--ink-soft);margin-top:2px;line-height:1.45;}
.import-status-foot{
  margin-top:10px;padding-top:10px;border-top:1px solid var(--line);
  font-size:var(--fs-xs);color:var(--ink-soft);
}

/* =========================================================================
   מסך התב"ר
   ========================================================================= */
.tbr-list{display:flex;flex-direction:column;gap:12px;}
.tbr-card{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--space-4) 18px;background:var(--panel);box-shadow:var(--shadow-xs);
  transition:box-shadow .18s var(--ease);
}
.tbr-card:hover{box-shadow:var(--shadow-sm);}
.tbr-title{margin:0;}
.tbr-toggle{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;width:100%;
  background:none;border:none;padding:4px 0;min-height:44px;
  font-family:inherit;text-align:start;cursor:pointer;border-radius:var(--radius-sm);
}
.tbr-toggle:hover .tbr-name{color:var(--primary);}
.tbr-caret{color:var(--primary);font-size:var(--fs-xs);width:12px;flex-shrink:0;}
.tbr-name{font-size:var(--fs-md);font-weight:700;color:var(--ink);}

/* מצב הפרויקט. הצבע מלווה תמיד בטקסט מפורש, כדי שלא יישא מידע לבדו. */
.tbr-status{font-size:var(--fs-xs);font-weight:600;padding:3px 10px;border-radius:var(--radius-sm);white-space:nowrap;line-height:1.35;}
.tbr-status-active{background:var(--green-pale);color:var(--green);}
.tbr-status-dormant{background:var(--gold-pale);color:var(--gold);}
.tbr-status-none{background:var(--bg);color:var(--ink-soft);border:1px solid var(--line);}

/* ציר השנים */
.tbr-timeline{display:flex;gap:4px;margin:8px 0 10px;flex-wrap:wrap;}
.tbr-year{
  font-size:var(--fs-xs);font-weight:600;padding:3px 8px;border-radius:var(--radius-xs);
  background:var(--bg);color:var(--ink-soft);border:1px solid var(--line);
  font-variant-numeric:tabular-nums;
}
.tbr-year.on{background:var(--primary);color:var(--panel);border-color:var(--primary);}

/* המספרים */
.tbr-figures{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 4px;}
.tbr-figures > div{display:flex;flex-direction:column;gap:1px;}
.tbr-figures dt{font-size:var(--fs-xs);color:var(--ink-soft);font-weight:600;}
.tbr-figures dd{margin:0;font-size:var(--fs-md);font-weight:700;font-variant-numeric:tabular-nums;}

/* החשבונות שבתוך הפרויקט - כפתורים אמיתיים, נגישים במקלדת */
.tbr-accounts{display:flex;flex-direction:column;gap:4px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);}
.tbr-account{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;width:100%;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:9px 11px;min-height:44px;font-family:inherit;font-size:var(--fs-sm);
  text-align:start;cursor:pointer;transition:var(--t);
}
.tbr-account:hover{background:var(--primary-pale);border-color:var(--primary-light);}
.tbr-account-name{font-weight:600;color:var(--ink);}
.tbr-account:hover .tbr-account-name{color:var(--primary);}
.tbr-account-sum{margin-inline-start:auto;font-weight:700;font-variant-numeric:tabular-nums;}
.tbr-account-go{font-size:var(--fs-xs);color:var(--primary);font-weight:600;opacity:0;transition:var(--t);}
.tbr-account:hover .tbr-account-go,
.tbr-account:focus-visible .tbr-account-go{opacity:1;}

/* כפתורים בתוך טבלאות התקציב - במקום שורות שניתן ללחוץ עליהן בעכבר בלבד */
.bc-linkbtn, .bc-catbtn{
  background:none;border:none;padding:6px 4px;min-height:44px;
  font-family:inherit;font-size:inherit;color:inherit;text-align:start;
  cursor:pointer;border-radius:var(--radius-xs);
}
.bc-linkbtn{font-size:var(--fs-sm);font-weight:600;color:var(--ink);}
.bc-linkbtn:hover{color:var(--primary);text-decoration:underline;}
.bc-catbtn{display:flex;align-items:center;gap:7px;width:100%;min-height:44px;}
.bc-catbtn:hover b{color:var(--primary);}

.tabar-years{
  margin-top:10px;padding:10px 12px;
  border:1px solid var(--primary-pale);border-radius:var(--radius-sm);
  background:var(--bg);   /* ⚠ היה גרדיאנט בהיר קשיח — מלבן לבן במצב כהה */
}
.tabar-years-head{font-size:var(--fs-xs);color:var(--primary);margin-bottom:8px;}
.tabar-years-head span{display:block;color:var(--ink-soft);font-weight:400;margin-top:3px;line-height:1.45;}
.tabar-years-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);}
.tabar-years-table th{
  background:transparent;color:var(--ink-soft);font-size:var(--fs-xs);font-weight:600;
  padding:4px 8px;border-bottom:1px solid var(--line);text-transform:none;letter-spacing:0;text-align:start;
}
.tabar-years-table td{padding:4px 8px;border-bottom:1px solid var(--line);text-align:start;}
.tabar-years-table tfoot td{border-top:1.5px solid var(--line);border-bottom:none;}
.tabar-years-table .mono{font-variant-numeric:tabular-nums;}
.md-ident{
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:11px 14px;margin-bottom:14px;background:var(--bg);
}
.md-ident-main{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--fs-md);}
.md-ident-main b{font-size:var(--fs-md);}
.md-ident-sub{font-size:var(--fs-sm);color:var(--ink-soft);margin-top:5px;}
tr.md-year td{
  background:var(--primary-pale);color:var(--primary-ink);
  font-weight:700;font-size:var(--fs-xs);padding:4px 8px;
}
.bc-viewtoggle{
  display:inline-flex;border:1px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden;background:var(--panel);
}
.bc-viewtoggle button{
  border:none;background:none;padding:11px 14px;min-height:44px;
  font-family:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--ink-soft);
  cursor:pointer;transition:var(--t);
}
.bc-viewtoggle button + button{border-inline-start:1px solid var(--line);}
.bc-viewtoggle button:hover{background:var(--primary-pale);color:var(--primary-ink);}
.bc-viewtoggle button.active,
.bc-viewtoggle button[aria-pressed="true"]{background:var(--primary);color:var(--panel);}
/* מתג "לפי סעיף / לפי חודש" בראש מצב התקציב — רוחב מלא בטלפון, כדי
   ששני המצבים יהיו מטרות מגע גדולות ולא שני כפתורים צפופים בפינה */
.fin-viewswitch{margin:0 0 var(--space-4);}
@media (max-width:640px){
  .fin-viewswitch{display:flex;}
  .fin-viewswitch button{flex:1;}
}
.bc-meta{
  margin-top:12px;padding-top:10px;border-top:1px solid var(--line);
  font-size:var(--fs-xs);color:var(--ink-soft);display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}

.tag-income{background:var(--green-pale);color:var(--green);}
.tag-expense{background:var(--brick-pale);color:var(--brick);}
.filter-count{font-size:var(--fs-xs);color:var(--ink-soft);align-self:center;}
.card .sub{font-size:var(--fs-xs);color:var(--ink-soft);margin-top:3px;}

/* =========================================================================
   סרגל הכלים של כל לשונית (ייצוא והדפסה) — על המסך בלבד
   ========================================================================= */
.chart-head{display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-2);}
.chart-head h3{margin:0;font-size:var(--fs-lg);color:var(--ink);}
.chart-head span{font-size:var(--fs-sm);color:var(--ink-mid);}

.tab-toolbar{
  display:flex;gap:var(--space-2);flex-wrap:wrap;
  justify-content:flex-start;          /* בעברית: תחילת השורה = צד ימין */
  align-items:center;
  margin:0 0 var(--space-5);padding-bottom:var(--space-3);
  border-bottom:1px solid var(--line);
}
.tab-toolbar .btn{
  font-size:var(--fs-base);padding:10px 18px;min-height:44px;
  display:inline-flex;align-items:center;gap:var(--space-2);
}
/* כפתורי פעולה משניים במתאר ברור במקום רקע שקוף חיוור */
.tab-toolbar .btn.ghost{
  border:1.5px solid var(--primary-light);color:var(--primary);background:var(--panel);
  font-weight:700;
}
.tab-toolbar .btn.ghost:hover{background:var(--primary-pale);border-color:var(--primary-ink);}
.toolbar-icon{font-size:var(--fs-md);line-height:1;}

/* פס התראה למצב קריאה בלבד */
#offlineBanner{
  display:none;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--brick-pale);border:1px solid var(--brick);color:var(--brick);
  border-radius:var(--radius-sm);padding:11px 15px;margin:0 0 16px;
  font-size:var(--fs-sm);font-weight:600;line-height:1.45;
}
#offlineBanner .offline-icon{flex-shrink:0;font-size:var(--fs-md);}
#offlineBanner .offline-detail{font-weight:400;color:var(--ink);}
body.is-offline .tab-toolbar{opacity:.6;}

/* כותרת המסמך המודפס — מוסתרת על המסך, מופיעה רק על הנייר */
.print-header{display:none;}

/* =========================================================================
   הדפסה
   -------------------------------------------------------------------------
   שני מצבים נפרדים, ולכן שתי חטיבות:
     • body.printing-certificate — אישור ועדת בנייה, שהוא מסמך רשמי בפני עצמו
     • כל השאר — הלשונית הפעילה, כדוח נקי על A4
   בלי ההפרדה הזו כל הדפסה הייתה יוצאת אחת משתי הצורות בטעות.
   ========================================================================= */

/* ---- מצב א': אישור ועדת בנייה + התוכניות המצורפות ---- */
/* =========================================================================
   נייד: הרכיבים שנוספו לאחרונה
   ------------------------------------------------------------------------- */
@media (max-width:760px){
  /* ריפוד תחתון שמפנה מקום לכפתור החירום הצף, אחרת הוא מכסה את השורה
     האחרונה בכל טופס - וזו בדיוק השורה שבה יושב כפתור השמירה */
  /* ה-FAB תופס 66 פיקסלים מהתחתית (50 גובה + 16 מרווח). הריפוד גדול
     ממנו בכוונה, כדי שהשורה האחרונה בכל טופס - זו שבה יושב כפתור
     השמירה - לא תסתתר מאחוריו. */
  main{padding:var(--space-4) var(--space-3) 92px;}
  .panel{padding:var(--space-4);}

  /* כרטיסי נתונים: עמודה אחת, מספר מעט קטן יותר כדי שלא יישבר */
  .cards{grid-template-columns:minmax(0,1fr);gap:var(--space-3);}
  .card{padding:var(--space-4);}
  .card .value{font-size:1.5rem;}

  /* סרגל הפעולות: שני כפתורים במלוא הרוחב, נוחים לאגודל */
  .tab-toolbar{gap:var(--space-2);}
  .tab-toolbar .btn{flex:1 1 45%;justify-content:center;min-height:48px;}

  /* כרטיס תב"ר */
  .tbr-card{padding:var(--space-4) var(--space-3);}
  .tbr-figures{gap:var(--space-2) var(--space-4);}
  .tbr-figures dd{font-size:var(--fs-base);}
  .tbr-account{flex-wrap:wrap;gap:var(--space-1) var(--space-2);}
  .tbr-account-sum{margin-inline-start:0;width:100%;text-align:start;}
  .tbr-account-go{display:none;}

  /* טבלת התנועות בחלון הפירוט: העמודות הפחות חיוניות יורדות */
  .ledger-table{font-size:var(--fs-xs);}
  .ledger-table th:nth-child(4),
  .ledger-table td:nth-child(4){display:none;}   /* אסמכתא */
  .ledger-table th,.ledger-table td{padding:5px 6px;}

  /* הגרף נגלל לרוחב במקום להידחס */
  .chart-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .chart-head{gap:var(--space-1);}

  /* תפריט הניווט הנפתח תופס כמעט את כל הרוחב */
  .nav-submenu{min-width:min(280px, calc(100vw - 32px));}

  /* התראות: פס צד דק יותר כדי לא לגזול רוחב */
  .note{border-inline-start-width:4px;padding:var(--space-3);}
}

/* מכשירים עם מגרעת: התוכן לא נחתך מאחוריה */
@supports (padding: max(0px)){
  body{
    padding-inline-start:env(safe-area-inset-left);
    padding-inline-end:env(safe-area-inset-right);
  }
  /* הכלל הזה יושב אחרי כלל הריפוד של הנייד ולכן דורס אותו. הוא חייב
     לכלול גם את מקום ה-FAB (66 פיקסלים), ולא רק את האזור הבטוח - אחרת
     כפתור השמירה בתחתית טופס מסתתר מאחורי כפתור החירום. */
  main{padding-bottom:calc(92px + env(safe-area-inset-bottom, 0px));}
}

/* =========================================================================
   מסמך הפרוטוקול שנוצר במחולל
   -------------------------------------------------------------------------
   העיצוב עוקב אחרי הפרוטוקול המודפס של היישוב: טבלת כותרת עם תוויות
   בעמודה צרה, טבלת נושאים ממוספרת, ונספחים בעמודים נפרדים.
   אותו HTML משמש לתצוגה ולהדפסה, כדי שמה שרואים יהיה מה שיוצא.
   ========================================================================= */
.pg-doc{font-size:var(--fs-sm);line-height:1.6;color:var(--ink);}
.pg-title{text-align:center;color:var(--primary);font-size:1.1rem;margin:0 0 var(--space-5);text-decoration:underline;}
.pg-head,.pg-body{width:100%;border-collapse:collapse;margin-bottom:var(--space-5);}
.pg-head th,.pg-head td,.pg-body th,.pg-body td{border:1px solid var(--ink);padding:7px 9px;vertical-align:top;}
.pg-h-label{width:15%;background:var(--bg);text-align:start;font-weight:700;white-space:nowrap;}
.pg-h-value{text-align:center;font-weight:700;}
.pg-body th{background:var(--bg);text-align:center;font-weight:700;}
.pg-col-num{width:34px;text-align:center;font-weight:700;}
.pg-subject{font-weight:700;text-align:center;}
.pg-page{margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--line);}
.pg-page-title{font-size:var(--fs-sm);font-weight:800;margin:0 0 var(--space-4);}
.pg-sub{color:var(--amber);font-size:1rem;font-weight:800;margin:var(--space-4) 0 var(--space-2);}
.pg-brief{margin:0;padding-inline-start:20px;}
.pg-brief li{margin-bottom:5px;}
.pg-decision{margin:0;}
.pg-vote{margin-bottom:var(--space-5);}
.pg-vote-note{margin:0 0 var(--space-2);color:var(--ink-soft);}
/* פס ולא עוגה: עוגה דורשת SVG ומתנהגת רע בהדפסה, ופס אופקי מוסר בדיוק
   את אותו מידע — יחס בין שתי כמויות — וקריא גם בהדפסה בשחור-לבן. */
.pg-bar{display:flex;height:16px;border-radius:8px;overflow:hidden;background:var(--line);}
.pg-bar-for{background:var(--primary);}
/* ⚠ הדפסה: המסמך יוצא על נייר לבן בכל מצב, ולכן אסור לו לרשת צבע
   שמתבהר במצב כהה — אחרת פס ההצבעה מודפס דהוי. */
.pg-bar-against{background:var(--brick-solid);}
.pg-legend{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:6px;font-size:var(--fs-xs);}
.pg-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-inline-end:5px;}
.pg-dot-for{background:var(--primary);}
.pg-dot-against{background:var(--brick-solid);}
.pg-foot{margin-top:var(--space-6);text-align:center;color:var(--ink-soft);font-size:var(--fs-xs);}

@media print{
  /* אותה שיטה כמו באישור ועדת הבנייה: מסתירים הכל חוץ מגוף המסמך */
  body.printing-protocol *{visibility:hidden;}
  body.printing-protocol #protoPreviewBody,
  body.printing-protocol #protoPreviewBody *{visibility:visible;}
  body.printing-protocol #protoPreviewBody{position:absolute;top:0;right:0;left:0;padding:0;}
  body.printing-protocol .no-print{display:none!important;}
  /* כל נספח בעמוד משלו, כמו במקור */
  body.printing-protocol .pg-page{page-break-before:always;break-before:page;border-top:none;padding-top:0;}
  body.printing-protocol .pg-bar,
  body.printing-protocol .pg-bar-for,
  body.printing-protocol .pg-bar-against,
  body.printing-protocol .pg-legend i{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}

/* ---- מסמך התקציב להדפסה / PDF ----
   מוסתר לגמרי על המסך וקיים רק בהדפסה. אותה שיטה כמו הפרוטוקולים
   ואישורי ועדת הבנייה: מסתירים את כל הגוף ומראים רק את המסמך.

   ⚠ הפריסה והצבעים מחקים את קובץ "תקציב 2026" שהיישוב עובד איתו:
   חטיבת הכנסות בכתום בהיר, חטיבת הוצאות בכחול בהיר, עמודת ההצעה של כל
   חטיבה בגוון מודגש יותר, ועמודת היתרה בירוק. מי שקורא את התקציב הזה
   שנים מזהה מיד איפה להסתכל. */
#bdPrintDoc{display:none;}
@media print{
  /* ⚠ display:none על שאר הגוף, ולא visibility:hidden + position:absolute.
     =======================================================================
     השיטה של הפרוטוקולים — להסתיר בשקיפות ולמקם את המסמך absolute בראש
     הדף — עובדת למסמך קצר ו**חותכת מסמך ארוך**: אלמנט ממוקם-absolute
     אינו נשבר בין עמודים כמו זרימה רגילה, ולכן כל מה שחורג מהעמוד
     הראשון פשוט נעלם. עם 124 סעיפים על שישה עמודים זה בדיוק מה שקרה.

     display:none מוציא את שאר המסך מהזרימה לגמרי, והמסמך נשאר אלמנט
     סטטי רגיל שנשבר בין עמודים כמו שצריך. */
  body.printing-budget > *:not(#bdPrintDoc){display:none !important;}
  body.printing-budget #bdPrintDoc{
    display:block;position:static;padding:0;
    font-family:'Heebo',sans-serif;color:#1a1a1a;
  }
  body.printing-budget .no-print{display:none!important;}
  /* ⚠ exact ולא economy: המידע כאן מקודד בצבע החטיבה. רקע שיורד בהדפסה
     הופך את הטבלה לשש עמודות מספרים זהות. */
  body.printing-budget #bdPrintDoc *{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  /* ⚠ עמוד בעל שם, ולא ‎@page‎ סתם.
     =======================================================================
     ‎@page‎ הוא כלל גלובלי ואינו ניתן להגבלה לפי מחלקה על ה-body. הכלל
     הזה היה ‎@page{size:A4 landscape}‎ — ומכיוון שבהמשך הקובץ יושב
     ‎@page{size:A4}‎ של ההדפסה הכללית, הוא **נדרס והמסמך הודפס לאורך**.
     התוצאה: תשע עמודות על דף לאורך, ועמודת "יתרה" וחלק מההוצאות נחתכו
     מחוץ לדף. דווח מהשטח.

     עמוד בעל שם חל רק על מה שמפנה אליו ב-page, ולכן אינו מתנגש עם
     ההדפסה הכללית ואינו נדרס על ידה. */
  @page bdgtLandscape{ size:A4 landscape; margin:9mm 8mm; }
  body.printing-budget #bdPrintDoc{ page:bdgtLandscape; }

  #bdPrintDoc .bdp-title-wrap{text-align:center;margin-bottom:9px;}
  #bdPrintDoc .bdp-title{
    font-size:17pt;font-weight:800;color:#12314f;margin:0 0 3px;letter-spacing:-.01em;
  }
  #bdPrintDoc .bdp-title-sub{font-size:8.5pt;color:#5b6b7c;}
  #bdPrintDoc .bdp-badge{
    display:inline-block;border-radius:var(--radius-pill);padding:0 9px;
    font-size:8pt;font-weight:700;border:1px solid;
  }
  #bdPrintDoc .bdp-badge-draft{background:#f2f5f8;color:#4a5a6a;border-color:#c8d3de;}
  #bdPrintDoc .bdp-badge-voting{background:#fdf3dc;color:#8a6100;border-color:#e0b64a;}
  #bdPrintDoc .bdp-badge-approved{background:#e6f4ea;color:#1e7a3c;border-color:#1e7a3c;}

  /* ---- הטבלה הראשית ---- */
  #bdPrintDoc .bdp-grid{
    width:100%;border-collapse:collapse;font-size:7.6pt;table-layout:fixed;
  }
  /* ⚠ בלי overflow:hidden — הוא חתך שמות חשבון ארוכים באמצע מילה.
     עם table-layout:fixed התא אינו מתרחב, ולכן הטקסט חייב לעטוף ולא
     להיחתך: שם שנחתך הוא שם שאי אפשר לזהות לפיו את הסעיף. */
  #bdPrintDoc .bdp-grid th, #bdPrintDoc .bdp-grid td{
    border:.6px solid #9aa7b4;padding:2.2px 4px;text-align:right;
    vertical-align:middle;word-wrap:break-word;overflow-wrap:break-word;
  }
  #bdPrintDoc .bdp-grid .num{
    text-align:left;font-variant-numeric:tabular-nums;white-space:nowrap;
  }
  #bdPrintDoc .bdp-grid thead th{font-weight:700;text-align:center;}
  #bdPrintDoc .bdp-grp th{font-size:9pt;padding:4px;}
  #bdPrintDoc .bdp-cols th{font-size:7.2pt;color:#33475b;}
  /* ⚠ הכותרת חוזרת בכל עמוד — הדפדפן עושה זאת ל-thead בלבד. */
  #bdPrintDoc .bdp-grid thead{display:table-header-group;}
  #bdPrintDoc .bdp-grid tr{break-inside:avoid;page-break-inside:avoid;}

  /* ⚠ המסמך חייב להיקרא גם בלי צבעי רקע.
     =======================================================================
     ב-PDF שנשמר בפועל הרקעים לא הודפסו — "גרפיקת רקע" היא תיבת סימון
     בחלון ההדפסה של כרום, ו-print-color-adjust:exact אינו גובר עליה
     בכל גרסה. הטבלה יצאה אפורה-לבנה, וכל הקידוד של חטיבות ההכנסה
     וההוצאה אבד: תשע עמודות מספרים זהות.

     לכן ההפרדה בין החטיבות נשענת על **קווים** ולא על צבע. הצבע נשאר
     כחיזוק למי שמדפיס איתו. עמודות 3, 6 ו-9 הן תחילת חטיבת ההכנסות,
     חטיבת ההוצאות ועמודת היתרה. */
  #bdPrintDoc .bdp-grid tbody td:nth-child(3),
  #bdPrintDoc .bdp-grid tbody td:nth-child(6),
  #bdPrintDoc .bdp-grid tbody td:nth-child(9){
    border-inline-start:1.7px solid #33475b;
  }
  #bdPrintDoc .bdp-grid thead .bdp-inc, #bdPrintDoc .bdp-grid thead .bdp-exp,
  #bdPrintDoc .bdp-grid thead .bdp-bal{border-inline-start:1.7px solid #33475b;}
  /* עמודת ההצעה — המספר שבגללו המסמך נכתב — מודגשת בטקסט ולא ברקע. */
  #bdPrintDoc .bdp-grid .bdp-prop{font-weight:700;}
  #bdPrintDoc .bdp-grid tbody .bdp-bal{font-weight:700;}

  /* חטיבות הצבע — הכנסות כתום, הוצאות כחול, יתרה ירוק */
  #bdPrintDoc .bdp-inc{background:#fce9dc;}
  #bdPrintDoc .bdp-inc.bdp-prop{background:#f6c9a8;font-weight:600;}
  #bdPrintDoc .bdp-exp{background:#dfe6f5;}
  #bdPrintDoc .bdp-exp.bdp-prop{background:#b7c7e8;font-weight:600;}
  #bdPrintDoc .bdp-bal{background:#d9ead3;font-weight:600;}
  #bdPrintDoc .bdp-c-sec{background:#f4f6f8;color:#33475b;font-size:7pt;}
  #bdPrintDoc .bdp-c-name{background:#fff;}
  #bdPrintDoc thead .bdp-inc{background:#f6c9a8;}
  #bdPrintDoc thead .bdp-exp{background:#b7c7e8;}
  #bdPrintDoc thead .bdp-bal{background:#c6e0b4;}
  #bdPrintDoc thead .bdp-c-sec, #bdPrintDoc thead .bdp-c-name{background:#e9edf1;}

  /* רוחב קבוע: השמות מקבלים מקום, עמודות המספרים אחידות */
  #bdPrintDoc .bdp-grid .bdp-c-sec{width:11%;}
  #bdPrintDoc .bdp-grid .bdp-c-name{width:21%;}
  #bdPrintDoc .bdp-grid .bdp-inc, #bdPrintDoc .bdp-grid .bdp-exp{width:9.5%;}
  #bdPrintDoc .bdp-grid .bdp-bal{width:10%;}

  #bdPrintDoc .bdp-sub td{
    background:#eef1f4;font-weight:700;border-top:1px solid #6b7b8c;
  }
  #bdPrintDoc .bdp-sub .bdp-inc{background:#f7ded0;}
  #bdPrintDoc .bdp-sub .bdp-exp{background:#d5deef;}
  #bdPrintDoc .bdp-sub .bdp-bal{background:#cfe3c7;}
  #bdPrintDoc .bdp-grand td{
    background:#12314f;color:#fff;font-weight:800;font-size:9pt;
    border-color:#12314f;padding:5px 4px;
  }
  #bdPrintDoc .bdp-gone td{color:#95a2af;text-decoration:line-through;}
  #bdPrintDoc .bdp-dash{color:#b4bec8;}
  #bdPrintDoc .bdp-tag{
    font-size:6.4pt;border:.5px solid #c8a94a;background:#fdf6e3;color:#8a6100;
    border-radius:var(--radius-pill);padding:0 4px;white-space:nowrap;
  }
  #bdPrintDoc .bdp-tag-new{border-color:#1e7a3c;background:#e6f4ea;color:#1e7a3c;}
  #bdPrintDoc .bdp-tag-removed{border-color:#a52121;background:#fbe9e9;color:#a52121;}
  #bdPrintDoc .bdp-was{display:block;font-size:6.6pt;color:#8494a4;}

  /* ---- שלוש חטיבות הסיכום מתחת לטבלה ---- */
  #bdPrintDoc .bdp-summary{
    display:flex;gap:8px;margin-top:9px;break-inside:avoid;page-break-inside:avoid;
  }
  #bdPrintDoc .bdp-sum-box{
    flex:1;border:.8px solid #9aa7b4;border-radius:4px;padding:6px 10px;background:#fbfcfd;
  }
  #bdPrintDoc .bdp-sum-box span{display:block;font-size:7.5pt;color:#5b6b7c;}
  #bdPrintDoc .bdp-sum-box b{display:block;font-size:13pt;font-weight:800;color:#12314f;}
  #bdPrintDoc .bdp-sum-box i{display:block;font-size:7pt;color:#8494a4;font-style:normal;}
  #bdPrintDoc .bdp-sum-bal{background:#f1f8ee;border-color:#7aa06a;}
  #bdPrintDoc .bdp-sum-bal b{color:#1e7a3c;}
  #bdPrintDoc .bdp-sum-bal.bdp-neg{background:#fdf1f1;border-color:#c07a7a;}
  #bdPrintDoc .bdp-sum-bal.bdp-neg b{color:#a52121;}

  /* ---- עמוד השינויים וההצבעה ---- */
  #bdPrintDoc .bdp-page2{break-before:page;page-break-before:always;}
  #bdPrintDoc .bdp-h2{
    font-size:11pt;font-weight:700;color:#12314f;
    margin:14px 0 5px;padding-bottom:3px;border-bottom:1px solid #9aa7b4;
  }
  #bdPrintDoc .bdp-note{font-size:8pt;color:#5b6b7c;margin:3px 0 7px;}
  #bdPrintDoc .bdp-grid-narrow{font-size:8pt;table-layout:auto;}
  #bdPrintDoc .bdp-grid-narrow td, #bdPrintDoc .bdp-grid-narrow th{background:#fff;}
  #bdPrintDoc .bdp-grid-narrow thead th{background:#e9edf1;}
  #bdPrintDoc .bdp-note-cell{color:#5b6b7c;font-size:7.4pt;}
  #bdPrintDoc .bdp-v-for{color:#1e7a3c;font-weight:700;}
  #bdPrintDoc .bdp-v-against{color:#a52121;font-weight:700;}
  #bdPrintDoc .bdp-v-abstain{color:#6b7b8c;font-weight:700;}

  #bdPrintDoc .bdp-sign{display:flex;gap:36px;margin-top:24px;break-inside:avoid;}
  #bdPrintDoc .bdp-sign div{flex:1;}
  #bdPrintDoc .bdp-sign span{display:block;font-size:8.5pt;color:#5b6b7c;margin-bottom:24px;}
  #bdPrintDoc .bdp-sign i{display:block;border-top:.8px solid #6b7b8c;}
  #bdPrintDoc .bdp-foot{
    margin-top:12px;padding-top:6px;border-top:.6px solid #cdd5dd;
    font-size:7.4pt;color:#5b6b7c;line-height:1.5;
  }
}

/* ---- דוח מצב פרויקט להדפסה / PDF ----
   מוסתר לגמרי על המסך וקיים רק בהדפסה, כמו מסמך התקציב. */
#projPrintDoc{display:none;}
@media print{
  /* ⚠ display:none על האחים ולא visibility:hidden — ראו את ההסבר המלא
     מעל #bdPrintDoc: מסמך ממוקם-absolute אינו נשבר בין עמודים, וכל מה
     שחורג מהעמוד הראשון פשוט נעלם. */
  body.printing-project > *:not(#projPrintDoc){display:none !important;}
  body.printing-project #projPrintDoc{
    display:block;position:static;padding:0;
    font-family:'Heebo',sans-serif;color:#1a1a1a;
  }
  body.printing-project .no-print{display:none!important;}
  /* ⚠ עמוד בעל שם. @page גלובלי אינו ניתן להגבלה לפי מחלקה על ה-body,
     ולכן @page{size:A4} הכללי שבהמשך הקובץ היה דורס כלל אנונימי כאן. */
  @page pjrPage{ size:A4 portrait; margin:14mm 13mm; }
  body.printing-project #projPrintDoc{ page:pjrPage; }
  /* השורה המודגשת נושאת את המסקנה כולה — רקע שיורד בהדפסה הופך אותה
     לשורה ככל השורות. */
  body.printing-project #projPrintDoc .pjr-row-hi th,
  body.printing-project #projPrintDoc .pjr-row-hi td,
  body.printing-project #projPrintDoc .pjr-table thead th{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }

  #projPrintDoc .pjr-top{
    display:flex;justify-content:space-between;align-items:baseline;
    border-bottom:1.4px solid #2c4a63;padding-bottom:5px;margin-bottom:12px;
  }
  #projPrintDoc .pjr-org{font-weight:700;font-size:11pt;color:#2c4a63;}
  #projPrintDoc .pjr-when{font-size:8.5pt;color:#5b6b7c;}
  #projPrintDoc .pjr-title{font-size:15pt;margin:0 0 12px;color:#1a1a1a;}
  #projPrintDoc .pjr-h2{
    font-size:11pt;margin:16px 0 6px;color:#2c4a63;
    border-bottom:.6px solid #cdd5dd;padding-bottom:3px;break-after:avoid;
  }
  #projPrintDoc .pjr-p{font-size:10pt;line-height:1.5;margin:0 0 10px;}
  #projPrintDoc .pjr-note{font-size:9pt;color:#5b6b7c;margin:6px 0 0;}
  #projPrintDoc table{width:100%;border-collapse:collapse;font-size:9.5pt;}
  #projPrintDoc .pjr-meta th{
    text-align:start;font-weight:600;color:#5b6b7c;width:42%;
    padding:4px 0;border-bottom:.5px solid #e3e8ed;
  }
  #projPrintDoc .pjr-meta td{padding:4px 0;border-bottom:.5px solid #e3e8ed;}
  #projPrintDoc .pjr-num{text-align:end;font-variant-numeric:tabular-nums;}
  #projPrintDoc .pjr-row-hi th,
  #projPrintDoc .pjr-row-hi td{background:#eef3f7;font-weight:700;}
  #projPrintDoc .pjr-bad,
  #projPrintDoc .pjr-bad td,
  #projPrintDoc .pjr-bad th{color:#9c3b2e;}
  #projPrintDoc .pjr-table{margin-top:4px;}
  #projPrintDoc .pjr-table thead th{
    background:#eef3f7;text-align:start;font-weight:600;color:#2c4a63;
    padding:5px 6px;border:.5px solid #cdd5dd;
  }
  #projPrintDoc .pjr-table td{padding:4px 6px;border:.5px solid #e3e8ed;}
  #projPrintDoc .pjr-table tr{break-inside:avoid;}
  #projPrintDoc .pjr-list{margin:4px 0 0;padding-inline-start:18px;font-size:9.5pt;line-height:1.6;}
  #projPrintDoc .pjr-foot{
    margin-top:16px;padding-top:6px;border-top:.6px solid #cdd5dd;
    font-size:7.6pt;color:#5b6b7c;line-height:1.5;
  }
}

@media print{
  body.printing-certificate *{visibility:hidden;}
  body.printing-certificate #bldgApprovalCertBody,
  body.printing-certificate #bldgApprovalCertBody *{visibility:visible;}
  body.printing-certificate #bldgApprovalCertBody{position:absolute;top:0;right:0;left:0;padding:0;}
  body.printing-certificate #bldgApprovalCertBody .attach-page{
    page-break-before:always;break-before:page;
    margin-top:0;padding-top:0;border-top:none;
  }
  body.printing-certificate #bldgApprovalCertBody .attach-page img{
    max-width:100%;max-height:88vh;height:auto;border:none;
  }
  body.printing-certificate #bldgApprovalCertBody .no-print{display:none!important;}
}

/* ⚠ יעד מגע מינימלי — WCAG 2.5.8.
   =========================================================================
   סריקה של המסכים מצאה פקדים בגובה 13 עד 19 פיקסלים: תיבות הסימון
   בספר הטלפונים ובמסמכי התושבים (13), כפתורי ה-✕ בניהול הוועדות (13),
   כפתורי המיון בכותרות הטבלה (18), ותיבת הסטטוס בכרטיס הפרויקט (19).

   הסף בתקן הוא 24 על 24. מתחתיו הפגיעה אינה תיאורטית: אצבע על מסך
   מגע, יד לא יציבה או עכבר לא מדויק מפספסים, ובטבלה שבה כל שורה
   נראית זהה — פספוס פירושו סימון השורה הלא נכונה.

   ⚠ הכלל בסוף הגיליון בכוונה: הוא צריך לגבור על all:unset שמאפס
   min-height בכפתורים המותאמים (.th-sort, .proj-title-btn).

   ⚠ תיבות סימון גדלות ל-18 ולא ל-24: 24 נראה כמו תיבה שבורה בשורת
   טבלה. הן עומדות בחלופת המרווח שבתקן — הן מרוחקות זו מזו הרבה מעבר
   ל-24 פיקסלים — והגדלתן מ-13 ל-18 היא שיפור אמיתי בפגיעה. */
button, [role="button"], summary, .btn,
th .th-sort, .proj-card h3 .proj-title-btn{
  min-height:24px;
}
button:not(.btn):not(.modal-close), [role="button"]:not(.btn){ min-width:24px; }
input[type=checkbox], input[type=radio]{ width:18px; height:18px; }

/* ---- מצב ב': דוח מהלשונית הפעילה ---- */
@media print{
  @page{ size:A4; margin:14mm 12mm; }

  /* חיסכון בדיו: רקעים וצללים יורדים, הטקסט נעשה שחור מלא.
     color-adjust:economy מבקש מהדפדפן לוותר על רקעים דקורטיביים. */
  body:not(.printing-certificate){
    background:#fff !important;color:#000 !important;
    font-size:10.5pt;line-height:1.4;
    -webkit-print-color-adjust:economy;print-color-adjust:economy;
  }
  body:not(.printing-certificate) *{
    box-shadow:none !important;text-shadow:none !important;
    animation:none !important;transition:none !important;
  }

  /* כל מה שאין לו קיום על נייר */
  body:not(.printing-certificate) .brand-header,
  body:not(.printing-certificate) nav,
  body:not(.printing-certificate) #mobileNavToggle,
  body:not(.printing-certificate) #mobileNavBackdrop,
  body:not(.printing-certificate) .skip-link,
  body:not(.printing-certificate) #toastStack,
  body:not(.printing-certificate) #gate,
  body:not(.printing-certificate) .modal-bg,
  body:not(.printing-certificate) .tab-toolbar,
  body:not(.printing-certificate) .filters,
  body:not(.printing-certificate) .note,
  body:not(.printing-certificate) #offlineBanner,
  body:not(.printing-certificate) .no-print,
  body:not(.printing-certificate) button,
  body:not(.printing-certificate) .btn,
  body:not(.printing-certificate) .rowbtns,
  body:not(.printing-certificate) input,
  body:not(.printing-certificate) select,
  body:not(.printing-certificate) textarea,
  body:not(.printing-certificate) .bulk-bar,
  body:not(.printing-certificate) .dropzone{
    display:none !important;
  }

  /* רק הלשונית הפעילה מודפסת */
  body:not(.printing-certificate) .tab{display:none !important;}
  body:not(.printing-certificate) .tab.active{display:block !important;}

  body:not(.printing-certificate) main{max-width:none;margin:0;padding:0;}

  /* כותרת המסמך */
  body:not(.printing-certificate) .print-header{
    display:block;margin:0 0 10pt;padding-bottom:6pt;border-bottom:1.5pt solid #000;
  }
  body:not(.printing-certificate) .print-header .ph-top{
    display:flex;justify-content:space-between;font-size:8.5pt;color:#333;
  }
  body:not(.printing-certificate) .print-header .ph-title{
    font-family:'Heebo',system-ui,sans-serif;font-size:17pt;margin:5pt 0 2pt;color:#000;
  }
  body:not(.printing-certificate) .print-header .ph-by{font-size:8.5pt;color:#333;}

  /* פאנלים: בלי מסגרות וצללים, אבל עם היררכיה ברורה */
  body:not(.printing-certificate) .panel{
    border:none;border-radius:0;background:#fff !important;
    padding:0;margin:0 0 12pt;
  }
  body:not(.printing-certificate) .panel h2{
    color:#000;font-size:12.5pt;margin:0 0 6pt;
    border-bottom:0.75pt solid #000;padding-bottom:3pt;
    break-after:avoid;page-break-after:avoid;   /* כותרת לא נשארת לבד בתחתית העמוד */
  }
  body:not(.printing-certificate) .panel h2 small{color:#444;font-size:9pt;}

  /* טבלאות — הלב של הדוחות */
  body:not(.printing-certificate) table{
    width:100%;border-collapse:collapse;font-size:9pt;
    page-break-inside:auto;break-inside:auto;
  }
  /* שורת הכותרת חוזרת בראש כל עמוד, אחרת עמוד 2 והלאה חסרי משמעות */
  body:not(.printing-certificate) thead{display:table-header-group;}
  body:not(.printing-certificate) tfoot{display:table-footer-group;}
  /* שורה בודדת לא נחתכת בין שני עמודים */
  body:not(.printing-certificate) tr{
    page-break-inside:avoid;break-inside:avoid;
  }
  body:not(.printing-certificate) th,
  body:not(.printing-certificate) td{
    border:0.5pt solid #777;padding:3pt 5pt;
    background:transparent !important;color:#000 !important;
    text-align:right;vertical-align:top;
  }
  body:not(.printing-certificate) th{
    background:#ececec !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;
    font-size:8.5pt;text-transform:none;letter-spacing:0;
  }
  body:not(.printing-certificate) tr:hover td{background:transparent !important;}
  /* עמודות של תיבות סימון וכפתורים נעלמות מהנייר */
  body:not(.printing-certificate) td:empty{display:none;}

  /* כרטיסי סיכום */
  body:not(.printing-certificate) .cards{
    display:flex;flex-wrap:wrap;gap:6pt;margin-bottom:10pt;
  }
  body:not(.printing-certificate) .card{
    flex:1 1 22%;border:0.5pt solid #999;background:#fff !important;
    padding:5pt 7pt;border-radius:0;
    page-break-inside:avoid;break-inside:avoid;
  }
  body:not(.printing-certificate) .card::before{display:none;}
  body:not(.printing-certificate) .card .label{color:#333;font-size:8pt;}
  body:not(.printing-certificate) .card .value{color:#000 !important;font-size:12pt;}

  /* תגיות וסטטוסים: מסגרת במקום רקע צבעוני */
  body:not(.printing-certificate) .tag,
  body:not(.printing-certificate) .status,
  body:not(.printing-certificate) .cat-pill,
  body:not(.printing-certificate) .reg-status{
    background:transparent !important;color:#000 !important;
    border:0.5pt solid #666;padding:1pt 5pt;font-size:8pt;
  }

  /* פריטים שלא כדאי לחתוך באמצע */
  body:not(.printing-certificate) .proj-card,
  body:not(.printing-certificate) .contact-card,
  body:not(.printing-certificate) .doc-item,
  body:not(.printing-certificate) .msg,
  body:not(.printing-certificate) .task-item,
  body:not(.printing-certificate) .reg-item,
  body:not(.printing-certificate) .attach-page{
    page-break-inside:avoid;break-inside:avoid;
    border-color:#999;background:#fff !important;
  }
  body:not(.printing-certificate) .proj-card{border:0.5pt solid #999;border-radius:0;padding:6pt;}

  /* גרפים ופסי התקדמות — רקע צבעוני נחוץ כאן, אחרת אין מה לראות */
  body:not(.printing-certificate) .chart-wrap,
  body:not(.printing-certificate) .progress-fill{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  body:not(.printing-certificate) .chart-wrap{overflow:visible;page-break-inside:avoid;}

  /* כרטיס פרויקט תב"ר לא נחתך בין עמודים */
  body:not(.printing-certificate) .tbr-card{
    page-break-inside:avoid;break-inside:avoid;
    border:0.5pt solid #999;box-shadow:none;padding:6pt 8pt;
  }
  body:not(.printing-certificate) .tbr-toggle{min-height:0;padding:0;}
  body:not(.printing-certificate) .tbr-figures dd{font-size:11pt;}
  /* ציר השנים נושא מידע, ולכן הרקע שלו נדפס למרות מצב חיסכון בדיו */
  body:not(.printing-certificate) .tbr-year.on{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
    font-weight:700;
  }
  body:not(.printing-certificate) .tbr-status{
    background:transparent !important;border:0.5pt solid #666;color:#000 !important;
  }
  body:not(.printing-certificate) .tbr-account{
    page-break-inside:avoid;break-inside:avoid;background:#fff !important;
  }

  body:not(.printing-certificate) .empty{border:none;color:#333;}
  body:not(.printing-certificate) .empty::before{display:none;}

  /* קישורים: בלי הדפסת הכתובת אחריהם, זה רק מלכלך את הדוח */
  body:not(.printing-certificate) a{color:#000 !important;text-decoration:none;}
  body:not(.printing-certificate) a[href]::after{content:"" !important;}
}


/* =========================================================================
   פתיחת המגירה דוחפת את הדף
   -------------------------------------------------------------------------
   במקום שהמגירה תכסה את התוכן, התוכן מוסט שמאלה ברוחב המגירה. היתרון
   מעשי: רואים איפה היו לפני שפתחו, ולחיצה על התוכן הגלוי סוגרת וחוזרת.

   מלכודת שנעקפה כאן: transform על אלמנט הופך אותו למכולה של מיקום, וכל
   position:fixed שבתוכו נמדד יחסית אליו במקום למסך. המגירה יושבת בתוך
   <header>, ולכן אסור להזיז את הכותרת עצמה — מוזזים רק ילדיה שאינם
   המגירה, ובנפרד ה-main.
   ========================================================================= */
/* כל מה שזז חייב להיות ברשימה אחת.
   ------------------------------------------------------------------------
   שדה החיפוש הוצא מאזור הפעולות כדי שיוכל להתמרכז, ובאותו רגע הוא הפסיק
   לזוז יחד איתו — הלוגו זז 320 פיקסלים ונחת עליו. כל אלמנט שיוצא מקבוצה
   קיימת חייב להתווסף כאן במפורש. */
body.nav-pushed #mobileNavToggle,
body.nav-pushed .brand,
body.nav-pushed #paletteTrigger,
body.nav-pushed .header-actions,
body.nav-pushed main,
body.nav-pushed #emergencyFab{
  transform:translateX(calc(var(--drawer-w) * -1));
}
/* ההמבורגר זז יחד עם הדף ולא נשאר במקומו: אילו נשאר, הוא היה נבלע מתחת
   למגירה — והכפתור שפתח אותה הוא גם הכפתור שסוגר אותה. */
#mobileNavToggle, .brand, #paletteTrigger, .header-actions, main{transition:transform .25s var(--ease);}

/* חסימת גלילה אופקית בזמן ההזזה — כולל בדרך חזרה.
   -------------------------------------------------------------------------
   ⚠ זהו התיקון למסך שנראה ריק אחרי מעבר בין לשוניות.

   מה שהיה כאן: הכלל חל רק על body.nav-pushed, כלומר רק כל עוד המגירה
   פתוחה. ההיגיון נשמע נכון — ההזזה קיימת רק אז, אז גם החריגה — אבל הוא
   מפספס את מה שקורה בסגירה:

     1. המגירה פתוחה. main מוזז 320 פיקסלים שמאלה. נוצרת חריגה של 320
        פיקסלים בצד שמאל, שהיא בעברית צד ה"סוף" — כלומר חריגה *שאפשר
        לגלול אליה*. הכלל הזה חוסם אותה. עד כאן תקין.
     2. בוחרים לשונית. showTab מסיר את nav-pushed *מיידית*.
     3. אבל להזזה עצמה יש transition של 250 מילישניות. main עדיין מוזז
        320 פיקסלים שמאלה — והחסימה כבר לא בתוקף.
     4. במשך אותן 250 מילישניות העמוד ניתן לגלילה אופקית. מיקום הגלילה
        נתפס באזור הריק, ההזזה מסתיימת, והמשתמש/ת נשאר/ת עם מסך לבן
        ותוכן שנדחף מחוץ למסך מימין.

   nav-unpushing מוסיפה 300 מילישניות של חסימה אחרי ההסרה, כלומר מכסה
   את כל משך ההזזה חזרה. היא מוסרת ב-toggleMobileNav וב-showTab.

   ⚠ למה לא פשוט להפוך את החסימה לקבועה, שנשמע פשוט יותר: לפי מפרט
   CSS Overflow, כשציר אחד הוא clip והשני visible — השני מחושב כ-hidden.
   כלומר html{overflow-x:clip} קבוע היה הופך את overflow-y ל-hidden
   ומבטל את הגלילה האנכית של כל האפליקציה. חלון של 300 מילישניות אחרי
   לחיצה על לשונית הוא בלתי מורגש; מצב קבוע היה שובר הכל. */
body.nav-pushed,
html:has(body.nav-pushed),
body.nav-unpushing,
html:has(body.nav-unpushing){overflow-x:clip;}

/* הרקע האפל מיותר כשהדף נשאר גלוי — הוא רק מסתיר את מה שרצינו להראות.
   נשאר שטח לחיץ שקוף לסגירה בלחיצה מחוץ למגירה. */
/* ⚠ היה .18 — כמעט שקוף, ולא נראה כמשהו שלוחצים עליו כדי לסגור.
   עכשיו כהה מספיק כדי לומר "זה מחוץ לתפריט", והדף עדיין מזוהה מתחתיו. */
body.nav-pushed #mobileNavBackdrop.open{background:rgba(14,37,69,.45);}

/* כפתור הסגירה בראש המגירה — רק בפריסת המגירה, ובפינה השמאלית של
   האזור הריק שמעל הפריטים (padding-top של המגירה שמור לו). */
/* ⚠ שורת כותרת: "תפריט" בצד ההתחלה (ימין), ✕ עגול בפינה הנגדית, באותו גובה.
   הגלולה "✕ סגירת התפריט" שהייתה כאן ישבה לבדה בפינה, לא מיושרת לשום דבר. */
.nav-close, .nav-drawer-title{display:none;}
body.nav-collapsed #staffNav > .nav-drawer-title,
body.nav-collapsed #residentNav > .nav-drawer-title{
  display:block;position:absolute;top:24px;inset-inline-start:22px;
  font-size:var(--fs-lg);font-weight:800;line-height:1.2;color:var(--ink);
}
body.nav-collapsed #residentNav > .nav-drawer-title{color:#fff;}
body.nav-collapsed #staffNav > .nav-close,
body.nav-collapsed #residentNav > .nav-close{
  display:inline-flex;align-items:center;justify-content:center;
  position:absolute;top:12px;inset-inline-end:12px;
  width:44px;min-height:44px;height:44px;padding:0;margin:0;
  border:none;border-radius:50%;
  background:transparent;color:var(--ink-mid);cursor:pointer;
}
body.nav-collapsed :is(#staffNav, #residentNav) > .nav-close .btn-ic{ width:22px; height:22px; margin:0; }
body.nav-collapsed #staffNav > .nav-close:hover{background:var(--primary-pale);color:var(--primary-ink);}
body.nav-collapsed #residentNav > .nav-close{color:rgba(255,255,255,.85);}
body.nav-collapsed #residentNav > .nav-close:hover{background:rgba(255,255,255,.12);color:#fff;}
@media (prefers-reduced-motion: reduce){
  body.nav-pushed .brand, body.nav-pushed .header-actions,
  body.nav-pushed main, .brand, .header-actions, main{transition:none;}
}

/* =========================================================================
   ספר הטלפונים — כרטיסים
   ========================================================================= */
.pb-count{font-size:var(--fs-sm);color:var(--ink-mid);margin:0 0 var(--space-3);}
.pb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2);}

.pb-card{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;transition:var(--t);
}
.pb-card.open{border-color:var(--primary-light);box-shadow:var(--shadow-sm);}

.pb-head{
  display:flex;align-items:center;gap:var(--space-3);width:100%;
  padding:var(--space-3) var(--space-4);min-height:68px;
  border:none;background:none;font-family:inherit;text-align:start;cursor:pointer;
  transition:background-color .18s var(--ease);
}
.pb-head:hover{background:var(--bg);}
.pb-avatar{
  display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;
  border-radius:50%;background:var(--primary-pale);color:var(--primary-ink);
  font-size:var(--fs-base);font-weight:800;
}
.pb-name{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.pb-name b{font-size:var(--fs-md);font-weight:700;color:var(--ink);line-height:1.3;}
.pb-name span{font-size:var(--fs-sm);color:var(--ink-mid);}
.pb-toggle{
  display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;
  border-radius:50%;background:var(--primary);color:var(--on-primary);
  font-size:1.25rem;font-weight:700;line-height:1;
}
.pb-card.open .pb-toggle{background:var(--ink-mid);}

.pb-body{border-top:1px solid var(--line);padding:var(--space-4);background:var(--bg);}
.pb-person + .pb-person{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px dashed var(--line);}
.pb-person-name{font-size:var(--fs-sm);font-weight:700;color:var(--ink-mid);margin:0 0 var(--space-2);}
.pb-acts{display:flex;flex-direction:column;gap:var(--space-2);}

/* כל אמצעי קשר הוא קישור שמפעיל פעולה: חיוג, וואטסאפ, דוא"ל */
.pb-act{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-2) var(--space-3);min-height:48px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md);
  text-decoration:none;transition:var(--t);
}
.pb-act:hover{border-color:currentColor;transform:translateX(-2px);}
.pb-act-icon{
  display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;
  border-radius:10px;
}
.pb-act-label{font-size:var(--fs-sm);color:var(--ink-mid);flex-shrink:0;min-width:56px;}
.pb-act-val{
  font-size:var(--fs-base);font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.pb-tel{color:var(--brick);}
.pb-tel .pb-act-icon{background:var(--brick-pale);color:var(--brick);}
.pb-wa{color:var(--green);}
.pb-wa .pb-act-icon{background:var(--green-pale);color:var(--green);}
.pb-mail{color:var(--primary);}
.pb-mail .pb-act-icon{background:var(--primary-pale);color:var(--primary-ink);}

@media (max-width:640px){
  .pb-head{padding:var(--space-3);gap:var(--space-2);min-height:64px;}
  .pb-avatar{width:40px;height:40px;}
  .pb-body{padding:var(--space-3);}
  .pb-act{padding:var(--space-2);}
  .pb-act-label{display:none;}
}

/* =========================================================================
   כרטיס קריאת אחזקה
   -------------------------------------------------------------------------
   הסגנונות כאן היו מוטבעים בכל כרטיס. עם 400 קריאות זה יצר 297KB של
   תכונות style חוזרות — 39% מכל ה-HTML של המסך. מחלקה נשלחת פעם אחת
   בגיליון ולא 400 פעם ב-DOM.
   ========================================================================= */
.list-count{font-size:var(--fs-sm);color:var(--ink-mid);margin:0 0 var(--space-3);}
/* כפתור שליחת תגובה. היה מוטבע בשלושה מקומות בשני גדלים שונים
   (40 ו-42), ושניהם מתחת לתקן המגע. */
.send-btn{
  width:44px;height:44px;flex-shrink:0;border-radius:50%;border:none;
  background:var(--primary);color:var(--on-primary);font-size:var(--fs-lg);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:var(--t);
}
.send-btn:hover{background:var(--primary-deep);}

.mc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;flex-wrap:wrap;}
.mc-tags{display:flex;gap:6px;align-items:center;}
.mc-desc{font-size:var(--fs-base);margin-top:8px;line-height:1.5;}
.mc-meta{font-size:var(--fs-sm);color:var(--ink-soft);margin-top:10px;}
.mc-link{cursor:pointer;text-decoration:underline;color:var(--primary);}
.mc-thread{
  margin-top:10px;max-height:220px;overflow-y:auto;padding:4px 6px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);
}
.mc-msg{display:flex;justify-content:flex-end;margin-bottom:8px;}
.mc-msg.mc-staff{justify-content:flex-start;}
.mc-bubble{
  max-width:78%;background:var(--gold-pale);border-radius:var(--radius);
  padding:7px 11px;box-shadow:var(--shadow-xs);
}
.mc-staff .mc-bubble{background:var(--primary-pale);}
.mc-by{font-size:var(--fs-xs);font-weight:700;margin-bottom:2px;color:var(--gold);}
.mc-staff .mc-by{color:var(--primary-light);}
.mc-text{font-size:var(--fs-sm);line-height:1.4;}

/* =========================================================================
   מסך שליטה בתצוגת הפורטל
   ========================================================================= */
.ui-row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding:var(--space-3) var(--space-4);border:1px solid var(--line);
  border-radius:var(--radius);background:var(--panel);margin-bottom:var(--space-2);
}
.ui-toggle{display:flex;align-items:center;gap:var(--space-3);cursor:pointer;flex:1;min-width:0;}
.ui-toggle input{width:20px;height:20px;flex-shrink:0;margin:0;}
.ui-row-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.ui-row-text b{font-size:var(--fs-base);color:var(--ink);}
.ui-row-text span{font-size:var(--fs-xs);color:var(--ink-soft);line-height:1.35;}
.ui-move{display:flex;gap:4px;flex-shrink:0;}
.ui-move .btn{min-width:44px;padding:8px 10px;}
.ui-move .btn[disabled]{opacity:.35;cursor:not-allowed;}

.ui-card{
  border:1px solid var(--line);border-radius:16px;background:var(--bg);
  padding:var(--space-4);margin-bottom:var(--space-3);
}
.ui-card-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  margin-bottom:var(--space-3);
}
.ui-num{
  display:grid;place-items:center;width:30px;height:30px;flex-shrink:0;
  border-radius:50%;background:var(--primary-pale);color:var(--primary-ink);
  font-size:var(--fs-sm);font-weight:800;
}
@media (max-width:640px){
  .ui-row{flex-direction:column;align-items:stretch;}
  .ui-move{justify-content:flex-end;}
}

/* =========================================================================
   מחלקות התבנית לפורטל התושבי
   -------------------------------------------------------------------------
   204 מחלקות שנוצרו מתוך portal-template.jsx, עם אותם ערכים בדיוק.
   הן יושבות כאן ולא בקובץ נפרד, וזו החלטה שנלמדה מכשל:

   כשהן היו ב-portal.css, ה-Service Worker הישן — שאינו מכיר את הקובץ —
   חסם אותו, והעמוד לא נראה "פחות טוב" אלא קרס לגמרי: אייקוני SVG בלי
   מידות התפשטו לרוחב המסך, כרטיסים קיבלו אפור ברירת מחדל, והרשת נעלמה.

   קובץ אחד פחות הוא נקודת כשל אחת פחות.

   הכל מתוחם ל-.portal-root, אחרת ה-reset של Tailwind היה מאפס גבולות
   בכל 25 המסכים.
   ========================================================================= */
.portal-root,.portal-root *,.portal-root ::before,.portal-root ::after{box-sizing:border-box;border:0 solid #e2e8f0;}
.portal-root .group{}
.portal-root .-bottom-6{bottom:-1.5rem}
.portal-root .absolute{position:absolute}
.portal-root .aspect-square{aspect-ratio:1/1}
.portal-root .bg-black{background-color:var(--navy)}
.portal-root .bg-blue-700{background-color:var(--primary)}
.portal-root .bg-cyan-200{background-color:var(--accent-soft)}
.portal-root .bg-cyan-50{background-color:var(--accent-soft)}
.portal-root .bg-cyan-600{background-color:var(--accent)}
.portal-root .bg-gradient-to-bl{background-image:linear-gradient(to bottom left,var(--tw-from),var(--tw-via,var(--tw-from)),var(--tw-to))}
.portal-root .bg-gradient-to-l{background-image:linear-gradient(to left,var(--tw-from),var(--tw-via,var(--tw-from)),var(--tw-to))}
.portal-root .bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-from),var(--tw-via,var(--tw-from)),var(--tw-to))}
.portal-root .bg-red-600{background-color:var(--brick-solid)}
.portal-root .bg-sky-50{background-color:var(--primary-pale)}
.portal-root .bg-slate-800{background-color:var(--navy)}
.portal-root .bg-slate-900{background-color:var(--navy)}
.portal-root .bg-white{background-color:var(--panel)}
.portal-root .block{display:block}
/* ⚠ בלי object-cover התמונה נמתחת: object-fit נופל ל-fill, וכל
   תמונה בפורטל (גיבור, מקדם, פריט מוצג) הוצגה מעוותת. */
.portal-root .object-cover{object-fit:cover}
/* ⚠ span הוא inline כברירת מחדל, ולכן ריפוד אנכי אינו משפיע על
   הגובה. תג "חדשות היישוב" נראה מעוך. */
.portal-root .inline-block{display:inline-block}
.portal-root .blur-2xl{filter:blur(40px)}
.portal-root .border{border-width:1px;border-style:solid}
.portal-root .border-8{border-width:8px;border-style:solid}
.portal-root .border-b{border-bottom-width:1px;border-bottom-style:solid}
.portal-root .border-slate-200{border-color:var(--line)}
.portal-root .border-slate-900{border-color:var(--navy)}
.portal-root .border-transparent{border-color:transparent}
.portal-root .flex{display:flex}
.portal-root .flex-col{flex-direction:column}
.portal-root .flex-wrap{flex-wrap:wrap}
.portal-root .font-bold{font-weight:700}
.portal-root .font-extrabold{font-weight:800}
.portal-root .font-light{font-weight:300}
.portal-root .font-semibold{font-weight:600}
.portal-root .from-cyan-500{--tw-from:#06b6d4}
.portal-root .from-slate-900{--tw-from:#0f172a}
/* ⚠ חמש עצירות צבע היו בשימוש ב-portal.js ולא הוגדרו כאן.
   linear-gradient פוסל את *כל* ההכרזה אם ולו עצירה אחת ריקה, ולכן
   שני בלוקי הרזרבה — התמונה שלא הועלתה במקדם ובפריט המוצג — לא
   קיבלו רקע כלל. מעליהם יושב טקסט לבן, וכך הוא נפל על מה שמאחור.
   זה נראה כמו "התמונה לא נטענה" ולא כמו באג CSS. */
.portal-root .from-blue-800{--tw-from:#1e40af}
.portal-root .gap-0\.5{gap:0.125rem}
.portal-root .gap-1{gap:0.25rem}
.portal-root .gap-2{gap:0.5rem}
.portal-root .gap-3{gap:0.75rem}
.portal-root .gap-4{gap:1rem}
.portal-root .gap-5{gap:1.25rem}
.portal-root .gap-8{gap:2rem}
.portal-root .gap-x-6{column-gap:1.5rem}
.portal-root .gap-y-2{row-gap:0.5rem}
.portal-root .grid{display:grid}
.portal-root .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.portal-root .group:hover .group-hover\:scale-110{transform:scale(1.1)}
.portal-root .h-1{height:0.25rem}
.portal-root .h-10{height:2.5rem}
.portal-root .h-11{height:2.75rem}
.portal-root .h-12{height:3rem}
.portal-root .h-16{height:4rem}
.portal-root .h-20{height:5rem}
.portal-root .h-4{height:1rem}
.portal-root .h-5{height:1.25rem}
.portal-root .h-6{height:1.5rem}
.portal-root .h-72{height:18rem}
.portal-root .h-9{height:2.25rem}
.portal-root .h-96{height:24rem}
.portal-root .h-full{height:100%}
.portal-root .hidden{display:none}
.portal-root .hover\:-translate-y-1:hover{transform:translateY(-0.25rem)}
.portal-root .hover\:bg-blue-600:hover{background-color:#2563eb}
.portal-root .hover\:bg-red-700:hover{background-color:#b91c1c}
/* ⚠ טוקן ולא #f1f5f9: ריחוף שמבהיר את הרקע הופך במצב כהה לריבוע
   כמעט-לבן עם הטקסט הבהיר של המצב הכהה מעליו. --bg הוא רקע העמוד,
   כלומר הצללה עדינה בשני הכיוונים. */
.portal-root .hover\:bg-slate-100:hover{background-color:var(--bg)}
.portal-root .hover\:bg-slate-800:hover{background-color:#1e293b}
.portal-root .hover\:border-blue-600:hover{border-color:#2563eb}
.portal-root .hover\:border-cyan-600:hover{border-color:#0891b2}
.portal-root .hover\:from-cyan-400:hover{--tw-from:#22d3ee}
.portal-root .hover\:shadow-lg:hover{box-shadow:0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1)}
.portal-root .hover\:shadow-md:hover{box-shadow:0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1)}
.portal-root .hover\:shadow-xl:hover{box-shadow:0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1)}
.portal-root .hover\:text-blue-700:hover{color:#1d4ed8}
.portal-root .hover\:text-white:hover{color:#ffffff}
.portal-root .hover\:to-emerald-400:hover{--tw-to:#34d399}
.portal-root .inline-flex{display:inline-flex}
.portal-root .inset-0{inset:0}
.portal-root .inset-x-0{left:0;right:0}
.portal-root .items-center{align-items:center}
.portal-root .items-start{align-items:flex-start}
.portal-root .justify-between{justify-content:space-between}
.portal-root .justify-center{justify-content:center}
.portal-root .justify-end{justify-content:flex-end}
.portal-root .leading-relaxed{line-height:1.625}
.portal-root .leading-snug{line-height:1.375}
.portal-root .leading-tight{line-height:1.25}
.portal-root .max-w-6xl{max-width:72rem}
.portal-root .max-w-lg{max-width:32rem}
.portal-root .max-w-md{max-width:28rem}
.portal-root .mb-3{margin-bottom:0.75rem}
.portal-root .mb-5{margin-bottom:1.25rem}
.portal-root .mb-6{margin-bottom:1.5rem}
.portal-root .min-h-80{min-height:20rem}
/* איפוס סימני רשימה בפורטל התושב/ת.
   -------------------------------------------------------------------------
   בכל שאר המערכת ה-list-style מאופס לפי מחלקה — .feed-list, .tl, .agenda
   ועוד שמונה. הפורטל נכתב בסגנון אחר (מחלקות בנוסח Tailwind) ולא קיבל
   אף אחת מהן, ולכן ה-<ul> שלו הציג את סימן ברירת המחדל של הדפדפן:
   נקודה שחורה קטנה בקצה כל פריט.

   בכרטיס אירוע היא נראתה כמו לכלוך — נקודה מנותקת שצפה ליד הכרטיס בלי
   שום קשר לעיצוב. האיפוס כאן חל על כל הרשימות בפורטל, כולל כאלה
   שיתווספו בעתיד. */
.portal-root ul,
.portal-root ol{list-style:none;margin:0;padding:0;}

/* ---- צבע לכל משבצת ----
   הצבע מגיע כמשתני CSS על האלמנט עצמו (--tile-ink, --tile-pale) ולא
   כמחלקה, כי הוא נבחר בהגדרות ולא ידוע מראש. ראו UI_COLORS ב-uiconfig.js.
   הרקע החיוור מופיע רק סביב האייקון ולא על כל הכרטיס — כרטיס צבעוני
   שלם הופך שורה של שש משבצות לרעש. */


/* ---- פוטר שטוח ----
   קודם: py-10, אווטאר 36px, גופן lg, ארבעה רווחים של 20px. בנייד זה
   היה בלוק של כ-260 פיקסלים בתחתית כל מסך בפורטל, שהמשתמש/ת גוללת
   דרכו בלי סיבה. עכשיו שורה אחת מרכזית וקישורים מתחתיה. */







@media (pointer: coarse){ .portal-footer-nav button{min-height:40px;} }

/* דוגמית הצבע בעורך ההגדרות */
.ui-swatch-row{margin-top:var(--space-2);}
.ui-swatch{
  display:inline-flex;align-items:center;padding:5px 12px;border-radius:var(--radius-pill);
  font-size:var(--fs-xs);font-weight:700;
}

.portal-root .min-h-screen{min-height:100vh}
.portal-root .min-w-0{min-width:0}
.portal-root .mt-1{margin-top:0.25rem}
.portal-root .mt-2{margin-top:0.5rem}
.portal-root .mt-3{margin-top:0.75rem}
.portal-root .mt-5{margin-top:1.25rem}
.portal-root .mt-6{margin-top:1.5rem}
.portal-root .mx-auto{margin-left:auto;margin-right:auto}
.portal-root .my-5{margin-top:1.25rem;margin-bottom:1.25rem}
.portal-root .opacity-40{opacity:0.4}
.portal-root .opacity-80{opacity:0.8}
.portal-root .opacity-85{opacity:0.85}
.portal-root .order-1{order:1}
.portal-root .order-2{order:2}
.portal-root .overflow-hidden{overflow:hidden}
.portal-root .overflow-x-auto{overflow-x:auto}
.portal-root .p-3{padding:0.75rem}
.portal-root .p-5{padding:1.25rem}
.portal-root .p-6{padding:1.5rem}
.portal-root .pb-12{padding-bottom:3rem}
.portal-root .pb-2{padding-bottom:0.5rem}
.portal-root .place-items-center{place-items:center}
.portal-root .px-2{padding-left:0.5rem;padding-right:0.5rem}
.portal-root .px-3{padding-left:0.75rem;padding-right:0.75rem}
.portal-root .px-4{padding-left:1rem;padding-right:1rem}
.portal-root .px-5{padding-left:1.25rem;padding-right:1.25rem}
.portal-root .px-6{padding-left:1.5rem;padding-right:1.5rem}
.portal-root .px-7{padding-left:1.75rem;padding-right:1.75rem}
.portal-root .py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem}
.portal-root .py-1{padding-top:0.25rem;padding-bottom:0.25rem}
.portal-root .py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.portal-root .py-12{padding-top:3rem;padding-bottom:3rem}
.portal-root .py-4{padding-top:1rem;padding-bottom:1rem}
.portal-root .relative{position:relative}
.portal-root .rounded-2xl{border-radius:1rem}
.portal-root .rounded-3xl{border-radius:1.5rem}
.portal-root .rounded-full{border-radius:9999px}
.portal-root .rounded-lg{border-radius:0.5rem}
.portal-root .rounded-xl{border-radius:0.75rem}
.portal-root .shadow-2xl{box-shadow:0 25px 50px -12px rgb(0 0 0 / .25)}
.portal-root .shadow-sm{box-shadow:0 1px 2px 0 rgb(0 0 0 / .05)}
.portal-root .shrink-0{flex-shrink:0}
.portal-root .sticky{position:sticky}
.portal-root .text-2xl{font-size:1.5rem;line-height:2rem}
.portal-root .text-3xl{font-size:1.875rem;line-height:2.25rem}
.portal-root .text-base{font-size:1rem;line-height:1.5rem}
.portal-root .text-center{text-align:center}
.portal-root .text-cyan-400{color:#22d3ee}
/* --accent כטקסט על לבן הוא 3.3:1; --accent-ink עובר AA בכל הערכות */
.portal-root .text-cyan-600{color:var(--accent-ink)}
.portal-root .text-cyan-700{color:var(--accent-ink)}
.portal-root .text-lg{font-size:1.125rem;line-height:1.75rem}
.portal-root .text-slate-200{color:#e2e8f0}
.portal-root .text-slate-300{color:#cbd5e1}
.portal-root .text-slate-400{color:var(--ink-mid)}
.portal-root .text-slate-600{color:var(--ink-mid)}
.portal-root .text-slate-700{color:var(--ink)}
.portal-root .text-slate-900{color:var(--ink)}
.portal-root .text-sm{font-size:0.875rem;line-height:1.25rem}
.portal-root .text-start{text-align:start}
.portal-root .text-white{color:#ffffff}
.portal-root .text-xl{font-size:1.25rem;line-height:1.75rem}
.portal-root .text-xs{font-size:var(--fs-xs);line-height:1rem}
.portal-root .to-emerald-500{--tw-to:#10b981}
.portal-root .to-cyan-600{--tw-to:#0891b2}
.portal-root .to-blue-900{--tw-to:#1e3a8a}
.portal-root .to-transparent{--tw-to:transparent}
.portal-root .top-0{top:0px}
.portal-root .tracking-tight{letter-spacing:-0.025em}
.portal-root .transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
.portal-root .via-blue-600{--tw-via:#2563eb}
.portal-root .via-slate-800{--tw-via:#1e293b}
.portal-root .via-slate-900{--tw-via:#0f172a}
.portal-root .w-1{width:0.25rem}
.portal-root .w-10{width:2.5rem}
.portal-root .w-11{width:2.75rem}
.portal-root .w-16{width:4rem}
.portal-root .w-20{width:5rem}
.portal-root .w-4{width:1rem}
.portal-root .w-5{width:1.25rem}
.portal-root .w-56{width:14rem}
.portal-root .w-6{width:1.5rem}
.portal-root .w-9{width:2.25rem}
.portal-root .w-fit{width:fit-content}
.portal-root .w-full{width:100%}
.portal-root .z-40{z-index:40}

@media (min-width:640px){
.portal-root .sm\:block{display:block}
.portal-root .sm\:gap-4{gap:1rem}
.portal-root .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.portal-root .sm\:h-96{height:24rem}
.portal-root .sm\:hidden{display:none}
.portal-root .sm\:inline{display:inline}
.portal-root .sm\:p-8{padding:2rem}
.portal-root .sm\:pb-16{padding-bottom:4rem}
.portal-root .sm\:px-5{padding-left:1.25rem;padding-right:1.25rem}
.portal-root .sm\:px-7{padding-left:1.75rem;padding-right:1.75rem}
.portal-root .sm\:px-10{padding-left:2.5rem;padding-right:2.5rem}
.portal-root .sm\:py-16{padding-top:4rem;padding-bottom:4rem}
.portal-root .sm\:text-2xl{font-size:1.5rem;line-height:2rem}
.portal-root .sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}
.portal-root .sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}
.portal-root .sm\:text-5xl{font-size:3rem;line-height:1}
.portal-root .sm\:text-lg{font-size:1.125rem;line-height:1.75rem}
.portal-root .sm\:text-sm{font-size:0.875rem;line-height:1.25rem}
.portal-root .sm\:text-xl{font-size:1.25rem;line-height:1.75rem}
.portal-root .sm\:w-64{width:16rem}
}

@media (min-width:768px){
.portal-root .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.portal-root .md\:justify-start{justify-content:flex-start}
.portal-root .md\:me-auto{margin-inline-end:auto}
.portal-root .md\:ms-0{margin-inline-start:0}
.portal-root .md\:mx-0{margin-left:0px;margin-right:0px}
.portal-root .md\:order-1{order:1}
.portal-root .md\:order-2{order:2}
.portal-root .md\:text-right{text-align:right}
}

@media (min-width:1024px){
.portal-root .lg\:gap-12{gap:3rem}
.portal-root .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.portal-root .lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.portal-root .lg\:order-1{order:1}
.portal-root .lg\:order-2{order:2}
}
/* חודש בפירוט החודשי: th scope="row" מטעמי נגישות — משחזרים את מראה ה-td. */
.md-month{font-weight:400;text-align:start;}
.md-month .md-toggle{font-weight:inherit;text-align:start;}

/* מסך הכניסה: הפרדה בין המסלול הרגיל ("שכחתי סיסמה") לבין הפעולה
   ההרסנית. שני כפתורים זהים זה מתחת לזה, שאחד מהם מוחק את כל
   החשבונות לצמיתות, הם מלכודת — במיוחד במסך שבו נמצא מי שכבר מבולבל. */
.gate-help{font-size:var(--fs-xs);color:var(--ink-soft);margin:0 0 10px;line-height:1.6;}
/* ⚠ button.btn.gate-danger ולא .btn.gate-danger: הכלל שמעליו הוא
   button.btn.ghost — אלמנט ושתי מחלקות — והוא מנצח בספציפיות שתי
   מחלקות בלבד. בלי ה-button הכפתור נשאר בצבע הרגיל בשקט. */
:is(button,a).btn.gate-danger{color:var(--brick);border-color:color-mix(in srgb, var(--brick) 40%, transparent);}
:is(button,a).btn.gate-danger:hover{background:var(--brick-pale);border-color:var(--brick);color:var(--brick);}
.gate-danger-note{font-size:var(--fs-xs);color:var(--ink-soft);margin:6px 0 0;line-height:1.5;text-align:center;}

/* דירוג חומרת חריגה — ראו bcBar ב-budgetcontrol.js.
   הפס נחתך ב-100% ולכן אינו יכול לשאת את ההבדל בין 143% ל-18,498%;
   התג והקווקוו נושאים אותו במקומו. */
.bc-bar .bc-bar-over.bc-sev-sm{font-weight:600;opacity:.85;}
.bc-bar .bc-bar-over.bc-sev-md{font-weight:800;}
.bc-bar .bc-bar-over.bc-sev-lg{
  font-weight:800;color:#fff;background:var(--brick-solid);
  padding:1px 6px;border-radius:var(--radius-pill);top:-7px;
  box-shadow:0 1px 3px rgba(178,58,46,.35);
}
/* קווקוו = "המספר חורג מהסקאלה". אותה שפה כמו bc-bar-neutral. */
.bc-barsev-lg .bc-bar-fill{
  background:repeating-linear-gradient(45deg,var(--brick),var(--brick) 4px,#8E2A20 4px,#8E2A20 8px);
}
@media (prefers-reduced-motion:no-preference){
  .bc-bar .bc-bar-over.bc-sev-lg{transition:transform .2s var(--ease);}
}
/* גבייה מעבר ליעד — הישג, לא אזהרה. ירוק ולא אדום. */
.bc-bar .bc-bar-over.bc-sev-inc{color:var(--green);font-weight:700;}

/* ⚠ שדות בחירת קובץ — 12 מתוך 14 היו פקד דפדפן גולמי.
   =========================================================================
   כל פקד אחר במערכת מעוצב, ורק שדות ההעלאה הציגו את כפתור ברירת המחדל
   של הדפדפן: מלבן אפור עם מסגרת דקה וטיפוגרפיה של מערכת ההפעלה. במסך
   "העלאת קבצי תקציב", שכולו כרטיסים מעוצבים, זה נראה כמו חלק שנשכח.

   ::file-selector-button מעצב את הכפתור עצמו. הטקסט "לא נבחר קובץ"
   נשלט על ידי הדפדפן ואי אפשר לשנותו — אבל אפשר לתת לו טיפוגרפיה
   וריווח שמתיישבים עם השאר.

   העיצוב חל גלובלית, ולכן גם 11 השדות במסכים האחרים מיושרים אוטומטית. */
input[type="file"]{
  font-family:'Heebo',system-ui,sans-serif;
  font-size:var(--fs-sm);
  color:var(--ink-soft);
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm, 10px);
  background:var(--panel);
  max-width:100%;
  cursor:pointer;
  transition:var(--t);
}
input[type="file"]:hover{ border-color:var(--primary); }
input[type="file"]:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
input[type="file"]::file-selector-button{
  font-family:'Heebo',system-ui,sans-serif;
  font-weight:700;
  font-size:var(--fs-sm);
  padding:7px 16px;
  margin-inline-end:12px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--panel);
  color:var(--ink);
  cursor:pointer;
  transition:var(--t);
}
input[type="file"]:hover::file-selector-button{
  border-color:var(--primary-ink); color:var(--primary-ink); background:var(--primary-pale);
}

/* ============================================================
   שכבת פורטל התושבים
   ============================================================
   כללי .portal-root שמעל הם תת-קבוצה קפואה של Tailwind, שהוצאה פעם
   אחת מהתבנית ואינה מתחדשת (ראו את הערת הפתיחה ב-js/portal.js).
   הצבעים שבהם היו הקסה קשיחה, ולכן הפורטל היה המסך היחיד במערכת
   שלא הגיב למצב כהה: הטוקנים ב-:root התהפכו סביבו והוא נשאר לבן.
   עכשיו הם מצביעים על אותם טוקנים, ומצב כהה עובד בלי שורה נוספת.

   ⚠ מה שנשאר בהיר בכוונה: text-slate-200, text-slate-300 ו-
   text-cyan-400 יושבים על כיסוי כהה מעל תמונת הראשי, שנשאר כהה
   בשני המצבים. מיפוי שלהם לטוקן היה מעלים אותם.
   ============================================================ */

/* ⚠ הרקע החלופי כשאין תמונת ראשי.
   קודם: bg-gradient-to-bl from-blue-800 via-blue-600 to-cyan-600.
   שלוש מחלקות העצירה האלה מעולם לא הוגדרו, ולכן הגרדיאנט התפענח
   ל-linear-gradient(to bottom left, , , ), ערך פסול שאינו מצויר
   כלל. הכותרת הלבנה נותרה על רקע שקוף למחצה. זו הייתה ברירת המחדל
   של כל יישוב שלא העלה תמונת ראשי. */

/* ⚠ טקסט כהה, לא לבן. ה-CTA היה גרדיאנט cyan אל emerald, כלומר שני
   גוונים נוספים בהירו שכבר החזיק שניים, וניגודיות שמשתנה לאורך
   המעבר. הגוון האחיד פותר את זה, אבל לבן על --accent נותן 3.31:1
   ונכשל ב-AA. --navy עליו נותן 4.66:1 בבהיר ו-5.70:1 בכהה, כי
   --accent אינו מוגדר מחדש במצב כהה ו---navy דווקא כן מתכהה.
   המקור השתמש בטקסט כהה וצדק בכך: הבעיה הייתה הגרדיאנט שמתחתיו. */
/* ריחוף בטבעת ולא בשינוי צבע: כל הכהיה או הבהרה של הרקע גוררת איתה
   את יחס הניגודיות, וכאן אין מרווח לבזבז. */


/* ⚠ גובה קבוע בהירו (h-72 / sm:h-96) נחתך בנייד כשסרגל הכתובת של
   Safari נסגר והגובה נשאר. גובה מזערי נותן לתוכן לגדול. */
.portal-root .min-h-72{ min-height:18rem; display:flex; }
/* ⚠ display:flex לבדו לא הספיק, וזה נמדד ולא שוער: הילד נושא h-full,
   כלומר height:100%, ו-stretch פועל רק כשהמידה של הפריט היא auto.
   התוצאה הייתה 230px בתוך 384px, כלומר תוכן שקפץ לראש ההירו ואיבד
   את המרכוז האנכי. שחרור הגובה מחזיר את ה-stretch. */
.portal-root .min-h-72 > .h-full{ height:auto; align-self:stretch; }
@media (min-width:640px){
  .portal-root .sm\:min-h-96{ min-height:24rem; }
}

/* ⚠ סיווג וסוג הקראוון היו קודם דחוסים בתוך שדה ההערות, ולכן היה
   אי אפשר לסנן, למיין או לזהות אותם במבט. עכשיו הם שבבים על הכרטיס,
   ושדות נפרדים בטופס — במקביל לשדות הייעודיים שקיימים באיירטייבל. */
.prop-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 2px; }
.prop-chip{
  display:inline-block; padding:2px 9px; border-radius:var(--radius-pill);
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.01em;
  background:var(--primary-pale); color:var(--primary-ink);
}
.prop-chip.is-soft{ background:var(--accent-soft); color:var(--accent-ink); }
.prop-nums{ font-size:var(--fs-xs); color:var(--ink-mid); }
.prop-nums b{ color:var(--ink); font-weight:700; }

/* ⚠ הדיירים מקבלים אזור משלהם ולא שורת טקסט אחת. במקור הוצג שם אחד
   בשדה tenantName; כאן מוצגים שם משפחה ושני בני הזוג, ולכל תקופת
   שכירות התשלומים שלה — מה שהשוכר משלם ומה שהיישוב משלם לאמנה. */
.prop-tenants{ margin-top:8px; display:flex; flex-direction:column; gap:5px; }
.prop-tenants-label{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.04em;
  color:var(--ink-mid); text-transform:none;
}
.prop-tenant{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;
  font-size:var(--fs-sm); line-height:1.45;
}
.prop-tenant b{ color:var(--ink); font-weight:700; }
.prop-tenant-pay{ font-size:var(--fs-xs); color:var(--ink-mid); }
.prop-tenants.is-past{
  margin-top:6px; padding-inline-start:10px;
  border-inline-start:2px solid var(--line);
}
.prop-tenants.is-past .prop-tenant b{ color:var(--ink-mid); font-weight:600; }

/* ⚠ הכפתור נושא aria-expanded ולא רק חץ, כדי שקורא מסך ידע אם
   ההיסטוריה פתוחה או סגורה. */
.prop-hist-btn{
  margin-top:8px; padding:5px 0; min-height:32px;
  background:none; border:0; cursor:pointer; font:inherit;
  font-size:var(--fs-xs); font-weight:700; color:var(--primary);
  border-bottom:1px solid transparent;
}
.prop-hist-btn:hover{ border-bottom-color:currentColor; }
.prop-hist-btn:focus-visible{ outline:3px solid var(--primary); outline-offset:2px; border-radius:4px; }

/* חוזי שכירות על כרטיס הנכס */
.prop-docs{ margin-top:10px; display:flex; flex-direction:column; gap:4px; }
.prop-doc{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:8px 10px; min-height:40px;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm);
  cursor:pointer; font:inherit; font-size:var(--fs-xs); text-align:start;
  transition:border-color .16s, background .16s;
}
.prop-doc:hover{ border-color:var(--primary); background:var(--panel); }
.prop-doc:focus-visible{ outline:3px solid var(--primary); outline-offset:2px; }
.prop-doc-name{ color:var(--ink); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prop-doc-act{ margin-inline-start:auto; color:var(--primary); font-weight:700; flex:none; }

/* ⚠ שני מספרי המבנה אינם שקולים, ולכן אינם נראים אותו דבר.
   מספר הישוב הוא תפעולי — איש האחזקה מזהה בו את הקראוון בשטח — ולכן
   הוא גדול ובולט. מספר האמנה הוא מזהה החברה שממנה היישוב שוכר, והוא
   מידע מנהלי. חוסר מסומן במפורש ולא מוסתר בשדה ריק. */
.prop-ids{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 4px; }
.prop-id{
  display:flex; flex-direction:column; gap:1px;
  padding:5px 11px; border-radius:var(--radius-sm);
  background:var(--primary-pale); border:1px solid transparent;
}
.prop-id-label{ font-size:var(--fs-xs); font-weight:600; color:var(--ink-mid); }
.prop-id-val{ font-size:16px; font-weight:800; color:var(--primary-deep); line-height:1.15; }
.prop-id.is-admin{ background:var(--bg); border-color:var(--line); }
.prop-id.is-admin .prop-id-val{ font-size:var(--fs-sm); font-weight:700; color:var(--ink); }
.prop-id.is-missing{ background:var(--gold-pale); border-color:var(--gold-accent); }
.prop-id.is-missing .prop-id-val{ color:var(--gold); font-size:var(--fs-sm); }
.prop-warn{
  margin-top:4px; font-size:var(--fs-xs); font-weight:600;
  color:var(--gold); line-height:1.4;
}

/* ================================================================
   כרטיס הנכס — שלושה אזורים
   ================================================================
   ⚠ ההפרדה בין האזורים היא בקו שיער ולא במסגרת. הכרטיס כבר ממוסגר,
   ומסגרת בתוך מסגרת יוצרת רעש במקום היררכיה. */
.prop-card{ display:flex; flex-direction:column; gap:0; }

/* ---- אזור 1: זיהוי ---- */
.prop-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; padding-bottom:12px;
}
.prop-head-id{ display:flex; align-items:center; gap:12px; min-width:0; }
/* ⚠ מספר הישוב גדול ובולט: זה המספר שאיש האחזקה סורק בו את הרשימה
   כדי למצוא קראוון בשטח. הוא המידע הראשי בכרטיס, לא הכותרת. */
.prop-num{
  flex:none; display:flex; align-items:center; justify-content:center;
  min-width:46px; height:46px; padding:0 8px;
  border-radius:var(--radius-sm);
  background:var(--primary); color:var(--on-primary);
  font-size:var(--fs-xl); font-weight:800; line-height:1;
  font-variant-numeric:tabular-nums;
}
.prop-num.is-missing{ background:var(--gold-pale); color:var(--gold); border:1px dashed var(--gold-accent); }
.prop-head-text{ min-width:0; }
.prop-head-text h3{ margin:0; font-size:var(--fs-md); font-weight:700; line-height:1.3; }
.prop-sub{
  display:flex; flex-wrap:wrap; gap:2px 10px; margin-top:3px;
  font-size:var(--fs-xs); color:var(--ink-mid);
}
.prop-sub span{ white-space:nowrap; }

.prop-warn{
  margin-bottom:12px; padding:7px 10px;
  border-radius:var(--radius-sm);
  background:var(--gold-pale); color:var(--gold);
  font-size:var(--fs-xs); font-weight:600; line-height:1.4;
}

/* ---- אזור 2 ו-3: אכלוס ומסמכים ---- */
.prop-zone{
  padding:12px 0; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:5px;
}
.prop-zone-label{
  font-size:var(--fs-xs); font-weight:700; color:var(--ink-mid); margin-bottom:1px;
}
.prop-zone.is-past{ border-top:0; padding-top:0; padding-inline-start:12px; }
.prop-zone.is-past .prop-tenant b{ color:var(--ink-mid); font-weight:600; }
.prop-empty{ font-size:var(--fs-xs); color:var(--ink-soft); }

.prop-contract{ font-size:var(--fs-xs); color:var(--ink-mid); }
.prop-contract b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.prop-contract.is-soon{ color:var(--gold); font-weight:700; }
.prop-contract.is-soon b{ color:var(--gold); }
.prop-contract.is-expired{ color:var(--brick); font-weight:700; }
.prop-contract.is-expired b{ color:var(--brick); }

.prop-notes{ font-size:var(--fs-xs); line-height:1.5; color:var(--ink-mid); }

.prop-actions{
  display:flex; gap:8px; justify-content:flex-end;
  padding-top:12px; border-top:1px solid var(--line);
}

/* ⚠ "אמנה חסר" בשורת המשנה מסומן, אבל רק לקראוון ששכור מאמנה.
   לקראוון של היישוב אין מספר אצלם, וזה תקין ולא חוסר. */
.prop-sub span:last-child:empty{ display:none; }

/* ⚠ תגית הבעלות מופיעה תמיד, כי היא קובעת מי אחראי על הקראוון ולמי
   משלמים עליו. שני הגוונים שונים בכוונה: קראוון של היישוב וקראוון
   שכור הם שתי מציאויות שונות, וההבחנה צריכה להיות מיידית. */
.prop-owner{
  display:inline-block; margin-inline-start:8px; vertical-align:middle;
  padding:2px 9px; border-radius:var(--radius-pill);
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.01em;
  background:var(--accent-soft); color:var(--accent-ink);
}
.prop-owner.is-yishuv{ background:var(--green-pale); color:var(--green); }

/* הודעת מצב לצד כפתור הסנכרון */
.prop-sync-msg{
  font-size:var(--fs-xs); color:var(--ink-mid); align-self:center;
  margin-inline-start:4px;
}

/* ⚠ המראה של כפתור מושבת, בלי להוציא אותו מסדר הטאב.
   pointer-events חוסם עכבר; propSyncBusy חוסם מקלדת בקוד. */
[aria-disabled="true"]{ opacity:.6; pointer-events:none; }

/* =========================================================================
   אזור התושב — עיצוב 2026-10 (portal.js: renderPortalTemplate,
   renderMyRequestsTab, syncResidentTabbar)
   -------------------------------------------------------------------------
   ⚠ הכל על טוקני המערכת, בלי hex: מצב כהה וערכות המיתוג חלים לבד.
   ⚠ rh = resident home. הקידומת חדשה בכוונה ולא שימוש חוזר ב-rp-*
     הישנים (emergency.js, renderResidentHome) — שם הם עדיין מוגדרים.
   ========================================================================= */
body.resident-view, body.resident-view main{ background:var(--bg); }

.rh{ display:flex; flex-direction:column; gap:var(--space-5); max-width:1200px; margin:0 auto; }
.rh h1, .rh h2, .rh h3{ color:var(--ink); }
.rh-hello{ display:flex; flex-direction:column; gap:2px; }
.rh-hello h1{ margin:0; font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight:800; letter-spacing:-.01em; }
.rh-date{ font-size:var(--fs-base); color:var(--ink-soft); }
.rh-h2{ margin:0 0 var(--space-3); font-size:var(--fs-lg); font-weight:800; }

.rh-cols{ display:flex; flex-wrap:wrap; gap:var(--space-5); align-items:flex-start; }
.rh-main{ flex:999 1 560px; min-width:0; display:flex; flex-direction:column; gap:var(--space-5); }
.rh-side{ flex:1 1 320px; min-width:0; display:flex; flex-direction:column; gap:var(--space-5); }

.rh-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-4) var(--space-5); }
.rh-card-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-2); margin-bottom:var(--space-2); }
.rh-card-head h2{ margin:0; font-size:var(--fs-lg); font-weight:800; }
.rh-more{ min-height:44px; font-weight:600; }
.rh-empty{ margin:var(--space-2) 0 0; color:var(--ink-soft); font-size:var(--fs-base); line-height:1.6; }

/* אייקונים */
.rh-ic{ width:20px; height:20px; }
.rh-ic-lg{ width:24px; height:24px; }
.rh-chev{ width:16px; height:16px; color:var(--ink-soft); flex-shrink:0; }

/* מה קורה אצלי */
.rh-status{ list-style:none; margin:0; padding:0; }
.rh-status li + li{ border-top:1px solid var(--line); }
.rh-status-row{
  width:100%; display:flex; align-items:center; gap:var(--space-3); padding:10px 0; min-height:56px;
  border:none; background:none; font:inherit; color:var(--ink); text-align:start; cursor:pointer;
}
.rh-status-icon{
  width:40px; height:40px; border-radius:var(--radius-md); flex-shrink:0;
  display:grid; place-items:center; background:var(--primary-pale); color:var(--primary-ink);
}
.rh-status-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.rh-status-text b{ font-size:var(--fs-md); font-weight:700; }
.rh-status-text span{ font-size:var(--fs-sm); color:var(--ink-soft); }
.rh-status-row:hover .rh-status-text b{ text-decoration:underline; }

/* תגי סטטוס — כל גוון עם צבע טקסט שעובר AA על הרקע העמום שלו */
.rh-pill{ flex-shrink:0; white-space:nowrap; font-size:var(--fs-xs); font-weight:700; padding:4px 10px; border-radius:var(--radius-pill); }
.rh-pill-info{ background:var(--primary-pale); color:var(--primary-ink); }
.rh-pill-warn{ background:var(--amber-pale); color:var(--amber); }
.rh-pill-ok{ background:var(--green-pale); color:var(--green); }
.rh-pill-bad{ background:var(--brick-pale); color:var(--brick); }

/* שלוש פעולות */
.rh-actions{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--space-3); }
.rh-action{
  min-height:104px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-2);
  padding:var(--space-3) 6px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--panel);
  font:inherit; font-size:var(--fs-base); font-weight:700; color:var(--ink); text-align:center; line-height:1.25; cursor:pointer;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.rh-action:hover{ border-color:var(--primary-light); box-shadow:var(--shadow-sm); }
.rh-action-icon{ width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:var(--primary); color:var(--on-primary); }

/* הודעה אחרונה */
.rh-news{ background:var(--navy); color:#fff; border-radius:var(--radius-lg); padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-2); }
.rh-news h2{ margin:0; color:#fff; font-size:var(--fs-lg); font-weight:800; line-height:1.3; }
.rh-news p{ margin:0; color:rgba(255,255,255,.86); font-size:var(--fs-md); line-height:1.55; }
.rh-news-meta{ font-size:var(--fs-sm); font-weight:600; color:rgba(255,255,255,.75); }
.rh-news-link{
  align-self:flex-start; min-height:44px; display:inline-flex; align-items:center; gap:6px; padding:0;
  border:none; background:none; color:#fff; font:inherit; font-weight:700; font-size:var(--fs-md); cursor:pointer;
}
.rh-news-link .rh-chev{ color:#fff; }
.rh-news-link:hover{ text-decoration:underline; }
.rh-news-link:focus-visible{ outline-color:#fff; }

/* אירועים */
.rh-chips{ display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; margin-bottom:var(--space-2); scrollbar-width:none; }
.rh-chip{
  flex-shrink:0; min-height:40px; padding:0 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:var(--panel); color:var(--ink); font:inherit; font-size:var(--fs-sm); font-weight:600; cursor:pointer;
}
.rh-chip[aria-pressed="true"]{ background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
.rh-events{ list-style:none; margin:0; padding:0; }
.rh-event{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) 0; }
.rh-event + .rh-event{ border-top:1px solid var(--line); }
.rh-event-date{
  width:56px; flex-shrink:0; border-radius:var(--radius-md); background:var(--primary-pale); color:var(--primary-ink);
  display:flex; flex-direction:column; align-items:center; padding:6px 0; line-height:1.1;
}
.rh-event-date b{ font-size:var(--fs-xl); font-weight:800; }
.rh-event-date span{ font-size:var(--fs-xs); font-weight:600; }
.rh-event-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.rh-event-text b{ font-size:var(--fs-md); font-weight:700; color:var(--ink); }
.rh-event-text span{ font-size:var(--fs-sm); color:var(--ink-soft); }
.rh-event-btn{
  flex-shrink:0; min-height:44px; padding:0 16px; border-radius:var(--radius-pill);
  border:1px solid var(--primary-ink); background:var(--panel); color:var(--primary-ink);
  font:inherit; font-weight:700; font-size:var(--fs-base); cursor:pointer;
}
.rh-event-btn:hover{ background:var(--primary-pale); }

/* כל השירותים */
.rh-services{ padding:var(--space-4) 0 var(--space-2); }
.rh-services .rh-h2{ padding:0 var(--space-5); }
.rh-group{ margin:var(--space-3) 0 2px; padding:0 var(--space-5); font-size:var(--fs-sm); font-weight:700; color:var(--ink-soft) !important; }
.rh-list{ list-style:none; margin:0; padding:0; }
.rh-row{
  width:100%; min-height:52px; display:flex; align-items:center; gap:var(--space-3); padding:0 var(--space-5);
  border:none; border-top:1px solid var(--line); background:none; font:inherit; color:var(--ink); text-align:start; cursor:pointer;
}
.rh-row:hover{ background:var(--bg); }
.rh-row-icon{ color:var(--tile-ink, var(--ink-soft)); display:grid; place-items:center; }
.rh-row-label{ flex:1; font-size:var(--fs-md); }
.rh-badge{
  min-width:22px; height:22px; padding:0 6px; border-radius:var(--radius-pill); display:grid; place-items:center;
  background:var(--brick-solid); color:#fff; font-size:var(--fs-xs); font-weight:700;
}

.rh-promo{ background:none; }
.rh-foot{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:var(--space-4) 0; color:var(--ink-soft); font-size:var(--fs-sm); text-align:center; }
.rh-foot p{ margin:0; }

/* הבקשות שלי */
.rh-requests{ max-width:760px; gap:var(--space-4); }
.rh-seg{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); padding:4px; border-radius:var(--radius-pill); background:var(--line); }
.rh-seg button{
  min-height:44px; border:none; border-radius:var(--radius-pill); background:transparent;
  font:inherit; font-size:var(--fs-md); font-weight:600; color:var(--ink-soft); cursor:pointer;
}
.rh-seg button[aria-pressed="true"]{ background:var(--panel); color:var(--ink); font-weight:700; box-shadow:var(--shadow-xs); }
.rh-req{ display:flex; flex-direction:column; gap:var(--space-3); }
.rh-req.is-unseen{ border-color:var(--primary-light); box-shadow:0 0 0 1px var(--primary-light); }
.rh-req-head{ display:flex; align-items:flex-start; gap:var(--space-3); }
.rh-req-title{ flex:1; min-width:0; }
.rh-req-title span{ font-size:var(--fs-sm); color:var(--ink-soft); }
.rh-req-title h2{ margin:2px 0 0; font-size:var(--fs-lg); font-weight:700; line-height:1.3; }
.rh-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; }
.rh-steps li{ display:flex; flex-direction:column; gap:6px; font-size:var(--fs-sm); color:var(--ink-soft); }
.rh-step-bar{ height:6px; border-radius:var(--radius-pill); background:var(--line); }
.rh-steps li.is-done{ color:var(--ink); }
.rh-steps li.is-done .rh-step-bar{ background:var(--primary); }
.rh-steps li[aria-current="step"]{ font-weight:700; }
.rh-update{ background:var(--bg); border-radius:var(--radius-md); padding:10px 12px; }
.rh-update span{ font-size:var(--fs-xs); font-weight:700; color:var(--ink-soft); }
.rh-update p{ margin:2px 0 0; font-size:var(--fs-base); line-height:1.5; }
.rh-new{ border-style:dashed; }
.rh-new-btns{ display:flex; flex-wrap:wrap; gap:var(--space-2); }

/* בטלפון: פעולות בשלוש עמודות צרות, ריווח צפוף יותר */
@media (max-width:640px){
  .rh{ gap:var(--space-4); }
  .rh-card{ padding:var(--space-4); }
  .rh-services{ padding:var(--space-4) 0 var(--space-2); }
  .rh-services .rh-h2, .rh-group, .rh-row{ padding-inline:var(--space-4); }
  .rh-actions{ gap:var(--space-2); }
}

/* ---- חירום בכותרת לתושב/ת, במקום הכפתור הצף ---- */
.res-emergency-btn{ display:none; }
body.resident-view .res-emergency-btn{
  display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px;
  border:none; border-radius:var(--radius-pill); background:var(--brick-solid); color:#fff;
  font:inherit; font-weight:700; font-size:var(--fs-base); cursor:pointer;
}
body.resident-view .res-emergency-btn:hover{ filter:brightness(1.08); }
body.resident-view #emergencyFab{ display:none !important; }

/* ---- סרגל ניווט תחתון: תושב/ת בטלפון בלבד ---- */
#residentTabbar{ display:none; }
body.resident-view.compact-layout #residentTabbar{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  position:fixed; inset-inline:0; bottom:0; z-index:300;
  background:var(--panel); border-top:1px solid var(--line);
  padding:4px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  box-shadow:0 -4px 16px rgba(14,37,69,.06);
}
#residentTabbar button{
  min-height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  border:none; background:none; font:inherit; font-size:var(--fs-xs); font-weight:500; color:var(--ink-soft); cursor:pointer;
}
#residentTabbar button.is-active{ color:var(--primary-ink); font-weight:700; }
#residentTabbar .rtb-icon{ position:relative; display:grid; place-items:center; }
#residentTabbar .rtb-badge{
  position:absolute; top:-6px; inset-inline-end:-10px; min-width:18px; height:18px; padding:0 4px;
  border-radius:var(--radius-pill); background:var(--brick-solid); color:#fff; font-size:var(--fs-xs); font-weight:700;
  display:grid; place-items:center; line-height:1;
}
/* התוכן לא מסתתר מאחורי הסרגל */
body.resident-view.compact-layout main{ padding-bottom:calc(88px + env(safe-area-inset-bottom, 0px)); }
body.resident-view.compact-layout #toastStack{ bottom:calc(84px + env(safe-area-inset-bottom, 0px)); }
body.modal-open #residentTabbar{ display:none !important; }
@media print{ #residentTabbar, .res-emergency-btn{ display:none !important; } }

/* ⚠ בטלפון, לתושב/ת: כפתור ההמבורגר מוסתר — "שירותים" בסרגל התחתון
   פותח את אותה מגירה. בלי זה הכותרת נשברה לשתי שורות (המבורגר, לוגו,
   חיפוש, חירום ומשתמש/ת לא נכנסים ב-375px). */
body.resident-view.compact-layout #mobileNavToggle{ display:none; }
body.resident-view.compact-layout .brand-sub{ display:none; }

/* ---- תיקון: פריסת המחשב כמו בהדמיה ----
   ⚠ בגרסה הראשונה הפריסה של הטלפון שימשה גם במחשב: "מה קורה אצלי" כרשימת
   שורות, ושלוש הפעולות כאריחים גדולים באמצע העמוד. בהדמיה למחשב הפעולות הן
   כפתורים לצד הברכה, והסטטוס הוא כרטיסים בשורה. המעבר לפי compact-layout —
   אותו סף שהמערכת כבר משתמשת בו לטלפון (platform.js). */
.rh-hello{ flex-direction:row; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--space-3); }
.rh-hello-text{ display:flex; flex-direction:column; gap:2px; }
.rh-hello-actions{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.rh-pill-btn{
  min-height:48px; padding:0 18px; border-radius:var(--radius-pill); display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--field-border); background:var(--panel); color:var(--ink);
  font:inherit; font-weight:700; font-size:var(--fs-md); cursor:pointer;
}
.rh-pill-btn:hover{ border-color:var(--primary-light); background:var(--primary-pale); }
.rh-pill-btn.is-primary{ background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
.rh-pill-btn.is-primary:hover{ filter:brightness(1.07); }
body.compact-layout .rh-hello-actions{ display:none; }
body:not(.compact-layout) .rh-do{ display:none; }

body:not(.compact-layout) .rh-status{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px; margin-top:var(--space-2); }
body:not(.compact-layout) .rh-status li + li{ border-top:none; }
body:not(.compact-layout) .rh-status-row{
  height:100%; flex-direction:column; align-items:flex-start; gap:8px; padding:14px;
  border:1px solid var(--line); border-radius:var(--radius); transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
body:not(.compact-layout) .rh-status-row:hover{ border-color:var(--primary-light); box-shadow:var(--shadow-sm); }
body:not(.compact-layout) .rh-status-row .rh-status-icon{ display:none; }
body:not(.compact-layout) .rh-status-row .rh-pill{ order:-1; }
body:not(.compact-layout) .rh-status-text b{ font-size:var(--fs-lg); line-height:1.35; }
body:not(.compact-layout) .rh-status-text span{ font-size:var(--fs-base); line-height:1.5; }

.rh-news-head{ margin:0 0 2px; color:#fff; font-size:var(--fs-lg); font-weight:800; }
.rh-news-item{ padding:var(--space-3) 0; border-top:1px solid rgba(255,255,255,.14); display:flex; flex-direction:column; gap:2px; }
.rh-news-item h3{ margin:0; color:#fff; font-size:var(--fs-md); font-weight:700; line-height:1.35; }
.rh-news-item p{ margin:2px 0 0; color:rgba(255,255,255,.86); font-size:var(--fs-base); line-height:1.55; }
body.compact-layout .rh-news-more{ display:none; }

/* ---- טפסי התושב (דיווח תקלה, בקשת בנייה, שיריון) ---- */
.form-req-note{ margin:0 0 var(--space-3); font-size:var(--fs-sm); color:var(--ink-soft); }
.rh-form .card-head{ margin-bottom:var(--space-2); }
.rh-form button[type="submit"]{ min-width:160px; }
@media (max-width:640px){ .rh-form button[type="submit"]{ width:100%; } }

/* ---- פעמון העדכונים (תושב/ת בלבד) ---- */
.res-bell-wrap{ display:none; position:relative; }
body.resident-view .res-bell-wrap{ display:block; }
.res-bell-btn{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center; position:relative;
  border:1px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer;
}
.res-bell-btn:hover{ border-color:var(--primary-light); }
.res-bell-btn .rtb-badge{
  position:absolute; top:-4px; inset-inline-end:-4px; min-width:18px; height:18px; padding:0 4px;
  border-radius:var(--radius-pill); background:var(--brick-solid); color:#fff; font-size:var(--fs-xs); font-weight:700;
  display:grid; place-items:center; line-height:1;
}
.res-bell-panel{
  position:absolute; top:calc(100% + 8px); inset-inline-end:0; z-index:600;
  width:min(360px, calc(100vw - 24px)); max-height:min(70vh, 520px); overflow-y:auto;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  padding:var(--space-3) 0;
}
.res-bell-title{ margin:0; padding:0 var(--space-4) var(--space-2); font-size:var(--fs-md); font-weight:800; color:var(--ink); }
.rh-bell-list{ list-style:none; margin:0; padding:0; }
.rh-bell-item{
  width:100%; display:flex; gap:var(--space-3); align-items:flex-start; padding:var(--space-3) var(--space-4);
  border:none; border-top:1px solid var(--line); background:none; font:inherit; color:var(--ink); text-align:start; cursor:pointer;
}
.rh-bell-item:hover{ background:var(--bg); }
.rh-bell-item.is-new{ background:var(--primary-pale); }
.rh-bell-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.rh-bell-text b{ font-size:var(--fs-base); font-weight:700; line-height:1.35; }
.rh-bell-text span{ font-size:var(--fs-sm); color:var(--ink-soft); line-height:1.45; }
.rh-bell-when{ display:inline-flex; align-items:center; gap:6px; }
.rh-bell-dot{ width:8px; height:8px; border-radius:50%; background:var(--brick-solid); }
.rh-bell-empty{ padding:var(--space-3) var(--space-4); margin:0; }
/* בטלפון הלוח נפתח לכל רוחב המסך, מתחת לכותרת */
body.compact-layout .res-bell-panel{ position:fixed; top:64px; inset-inline:12px; width:auto; }
/* ⚠ עם הפעמון, הכותרת של התושב/ת בטלפון שוב נשברה לשתי שורות (98px).
   החיפוש הוא הפריט הכי פחות חיוני שם — "שירותים" בסרגל התחתון מוביל לכל
   מסך — ולכן הוא מוסתר לתושב/ת בטלפון בלבד. */
body.resident-view.compact-layout #paletteTrigger{ display:none; }

/* ---- קישור ישיר לאירוע: הדגשת היעד ---- */
.rh-event-title{ text-align:start; }
.rh-event-title b{ font-size:var(--fs-md); font-weight:700; color:var(--ink); }
.act-card{ transition:box-shadow .3s var(--ease); }
.act-card.is-target{ box-shadow:0 0 0 3px var(--primary-light); }
.act-card:focus-visible{ outline:3px solid var(--primary-light); outline-offset:2px; }

/* =========================================================================
   סקירת כספים (finhome.js) — נשען על rh-card/rh-status/rh-pill של אזור התושב
   ========================================================================= */
.fh-fresh{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:var(--radius-pill); background:var(--green-pale); color:var(--green); font-weight:700; font-size:var(--fs-base); }
.fh-kpis{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:var(--space-4); }
.fh-kpi{ display:flex; flex-direction:column; gap:6px; text-align:start; }
.fh-kpi h2{ margin:0; font-size:var(--fs-md); font-weight:600; color:var(--ink-soft) !important; }
.fh-kpi-value{ font-size:1.875rem; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
.fh-kpi-note{ font-size:var(--fs-base); color:var(--ink-mid); line-height:1.5; }
.fh-kpi-btn{ font:inherit; color:inherit; cursor:pointer; }
.fh-kpi-btn:hover{ border-color:var(--primary-light); box-shadow:var(--shadow-sm); }
.fh-kpi-more{ font-weight:700; color:var(--primary-ink); font-size:var(--fs-base); }
.fh-bar{ height:8px; border-radius:var(--radius-pill); background:var(--line); overflow:hidden; }
.fh-bar-fill{ display:block; height:100%; border-radius:var(--radius-pill); }
.fh-tone-primary{ background:var(--primary); }
.fh-tone-ok{ background:var(--green); }
.rh-status-icon.fh-icon-bad{ background:var(--brick-pale); color:var(--brick); }
.rh-status-icon.fh-icon-warn{ background:var(--amber-pale); color:var(--amber); }
.fh-files{ list-style:none; margin:0 0 var(--space-2); padding:0; display:flex; flex-direction:column; gap:10px; }
.fh-files li{ display:flex; align-items:center; gap:10px; font-size:var(--fs-md); }
.fh-file-mark{ width:26px; height:26px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:var(--fs-sm); background:var(--bg); color:var(--ink-mid); border:1px solid var(--line); }
.fh-file-mark.is-ok{ background:var(--green-pale); color:var(--green); }
.fh-file-mark.is-missing{ background:var(--brick-pale); color:var(--brick); }
.fh-file-label{ flex:1; }
.fh-file-state{ font-size:var(--fs-sm); font-weight:600; color:var(--ink-mid); }
.fh-glossary{ margin:0; display:flex; flex-direction:column; gap:10px; }
.fh-glossary dt{ font-weight:700; font-size:var(--fs-md); }
.fh-glossary dd{ margin:2px 0 0; font-size:var(--fs-base); color:var(--ink-mid); line-height:1.55; }
.fh-empty p{ margin:0 0 var(--space-3); font-size:var(--fs-md); line-height:1.6; }

/* ---- עדכון נתונים מודרך (renderBudgetSlots) ---- */
.bslot-intro{ margin:0 0 var(--space-4); font-size:var(--fs-md); line-height:1.6; color:var(--ink-mid); }
.bslot-tag{ flex-shrink:0; align-self:flex-start; font-size:var(--fs-xs); font-weight:700; padding:3px 10px; border-radius:var(--radius-pill); background:var(--bg); color:var(--ink-mid); border:1px solid var(--line); }
.bslot-tag.is-req{ background:var(--brick-pale); color:var(--brick); border-color:transparent; }
.bslot-source{ margin:0 0 var(--space-2); font-size:var(--fs-base); color:var(--ink-mid); }
.bslot-next{ display:inline-flex; margin-top:var(--space-2); min-height:44px; align-items:center; font-weight:700; }
.fh-neg{ color:var(--brick); }

/* =========================================================================
   סקירת כספים — תובנות (שלב B)
   ========================================================================= */
.fh-head-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.fh-sub{ margin:2px 0 var(--space-3); font-size:var(--fs-base); color:var(--ink-mid); line-height:1.55; }
.fh-muted{ color:var(--ink-mid); font-weight:400; }
.fh-pos{ color:var(--green); }

/* השורה התחתונה — הכרטיס היחיד הכהה במסך, כי זה המשפט שקוראים ראשון */
.fh-bottom{ background:var(--navy); color:#fff; border-radius:var(--radius-lg); padding:var(--space-5) var(--space-5); display:flex; flex-direction:column; gap:10px; }
.fh-bottom h2{ margin:0; font-size:var(--fs-base); font-weight:600; color:#C9D6EA !important; }
.fh-bottom p{ margin:0; font-size:1.25rem; line-height:1.6; font-weight:500; }
.fh-bottom b{ color:#fff; }
.fh-bl-plan{ font-size:var(--fs-md); color:#C9D6EA; }
.fh-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.fh-chip{ min-height:44px; padding:0 16px; border-radius:var(--radius-pill); border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.1); color:#fff; font:inherit; font-weight:600; font-size:var(--fs-base); cursor:pointer; }
.fh-chip:hover{ background:rgba(255,255,255,.2); }
.fh-chip:focus-visible{ outline:3px solid #fff; outline-offset:2px; }

/* תחזית: פס מה ששולם (מלא), פס התחזית (בהיר), וקו התקציב */
.fh-fc{ display:flex; flex-direction:column; gap:6px; margin-bottom:var(--space-4); }
.fh-fc-head{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; font-size:var(--fs-md); }
.fh-fc-head span{ font-weight:700; }
.fh-fc-bar{ position:relative; height:20px; border-radius:8px; background:var(--bg); border:1px solid var(--line); }
.fh-fc-bar > span{ position:absolute; top:0; bottom:0; inset-inline-start:0; border-radius:7px; }
.fh-fc-fc{ background:var(--primary-pale); }
.fh-fc-act{ background:var(--primary); }
.fh-fc-bar.is-inc .fh-fc-fc{ background:var(--green-pale); }
.fh-fc-bar.is-inc .fh-fc-act{ background:var(--green); }
.fh-fc-bar > .fh-fc-bud{ top:-5px; bottom:-5px; width:3px; border-radius:2px; background:var(--ink); }
.fh-fc-nums{ display:flex; flex-wrap:wrap; gap:4px 18px; font-size:var(--fs-base); color:var(--ink-mid); }
.fh-fc-nums b{ color:var(--ink); }
.fh-how summary{ cursor:pointer; min-height:44px; display:inline-flex; align-items:center; font-weight:700; color:var(--primary-ink); }
.fh-how p{ margin:0; font-size:var(--fs-base); color:var(--ink-mid); line-height:1.6; }

/* לאן הולך הכסף */
.fh-where{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.fh-where-row{ display:flex; justify-content:space-between; gap:8px; font-size:var(--fs-md); }
.fh-where-bar{ display:block; height:8px; margin-top:4px; border-radius:var(--radius-pill); background:var(--bg); }
.fh-where-bar span{ display:block; height:100%; border-radius:var(--radius-pill); background:var(--primary); }

/* מה השתנה */
.fh-changes{ list-style:none; margin:0; padding:0; }
.fh-changes li + li{ border-top:1px solid var(--line); }
.fh-change-row{ width:100%; min-height:56px; display:flex; align-items:center; gap:12px; padding:8px 0; border:none; background:none; font:inherit; color:inherit; text-align:start; cursor:pointer; }
.fh-change-row:hover .fh-change-text b{ text-decoration:underline; }
.fh-arrow{ width:34px; height:34px; flex-shrink:0; border-radius:10px; display:grid; place-items:center; font-size:0.875rem; }
.fh-arrow.is-up{ background:var(--brick-pale); color:var(--brick); }
.fh-arrow.is-down{ background:var(--green-pale); color:var(--green); }
.fh-change-text{ flex:1; min-width:0; display:flex; flex-direction:column; }
.fh-change-text span{ font-size:var(--fs-sm); color:var(--ink-mid); }
.fh-change-delta{ font-weight:700; white-space:nowrap; }

/* ספקים */
.fh-sup{ list-style:none; margin:0; padding:0; }
.fh-sup li + li{ border-top:1px solid var(--line); }
.fh-sup summary{ min-height:56px; display:flex; align-items:center; gap:12px; cursor:pointer; list-style:none; }
.fh-sup summary::-webkit-details-marker{ display:none; }
.fh-sup-rank{ width:28px; height:28px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; background:var(--primary-pale); color:var(--primary-ink); font-weight:800; font-size:var(--fs-sm); }
.fh-sup-text{ flex:1; min-width:0; display:flex; flex-direction:column; }
.fh-sup-text span{ font-size:var(--fs-sm); color:var(--ink-mid); }
.fh-sup-amt{ white-space:nowrap; }
.fh-sup-tx{ margin:4px 0 10px; }

/* חודש אחר חודש */
.fh-months{ width:100%; }
.fh-months th[scope="row"]{ text-align:start; font-weight:700; }
.fh-months tr.fh-peak{ background:var(--amber-pale); }

/* מצב התקציב: "למה?" בראש הפירוט, והתחזית בשורת סעיף שצפוי לחרוג */
.fin-why{ margin:0 0 10px; padding:10px 12px; border-radius:var(--radius-sm); background:var(--primary-pale); color:var(--ink); font-size:var(--fs-base); line-height:1.6; }
.fin-fc-note{ margin:6px 0 0; font-size:var(--fs-sm); font-weight:700; color:var(--amber); }

/* =========================================================================
   אזור הכספים — שלב C: נגישות וטלפון
   ========================================================================= */
/* מצב התקציב: ספירה בראש הרשימה, וכפתור לסעיפים התקינים */
.util-counts{ margin:0 0 var(--space-3); font-size:var(--fs-base); font-weight:600; color:var(--ink-mid); }
.util-ok-toggle{ width:100%; min-height:52px; margin:var(--space-3) 0; border:1px dashed var(--field-border); border-radius:var(--radius-md); background:var(--panel); color:var(--green); font:inherit; font-weight:700; font-size:var(--fs-md); cursor:pointer; }
.util-ok-toggle:hover{ background:var(--green-pale); }
/* שם הסעיף הוא הכפתור שפותח את הפירוט — מטרת מגע מלאה, לא 24 פיקסלים */
.fin-item-head .card-link{ min-height:44px; display:inline-flex; align-items:center; }
/* קיצורי הגרף בהשוואת שנים — היו 29 פיקסלים */
.cmp-presets button{ min-height:44px; }

/* הגרף החודשי: במחשב — גרף, והטבלה ב"הצגה כטבלה"; בטלפון — הטבלה במקומו */
.chart-table-m{ display:none; }
.chart-table-d{ margin-top:var(--space-3); }
.chart-table-d > summary{ cursor:pointer; min-height:44px; display:inline-flex; align-items:center; font-weight:700; color:var(--primary-ink); }
.chart-table th[scope="row"]{ text-align:start; font-weight:700; }

@media (max-width:640px){
  #finViewMonth .chart-wrap, #finViewMonth .chart-table-d{ display:none; }
  #finViewMonth .chart-table-m{ display:block; }
  /* ⚠ בטלפון שורת ההתמצאות בכספים מקוצרת לשאלה עצמה. ההסבר על מקור הקובץ
     תפס חצי מסך לפני המספר הראשון, ושורת הטריות מתחת אומרת כבר מאיזה
     קובץ ומתי. */
  #tab-budgetControl .screen-lede > span,
  #tab-yearCompare .screen-lede > span,
  #tab-tabar .screen-lede > span,
  #tab-budgetBuilder .screen-lede > span{ display:none; }
  .fh-bottom p{ font-size:1.0625rem; }
}

/* =========================================================================
   סקירת כספים — בדיקת תקינות ומצב הגבייה
   ========================================================================= */
.fh-checks{ margin:var(--space-3) 0 var(--space-2); border-top:1px solid var(--line); padding-top:var(--space-3); }
.fh-checks > summary{ min-height:44px; display:flex; align-items:center; gap:10px; cursor:pointer; font-weight:700; }
.fh-check-mark{ width:26px; height:26px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:var(--fs-sm); }
.fh-check-mark.is-ok{ background:var(--green-pale); color:var(--green); }
.fh-check-mark.is-warn{ background:var(--amber-pale); color:var(--amber); }
.fh-checks ul{ list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.fh-check{ display:flex; flex-direction:column; gap:2px; font-size:var(--fs-base); line-height:1.5; padding-inline-start:10px; border-inline-start:3px solid var(--line); }
.fh-check span{ color:var(--ink-mid); }
.fh-check-ok{ border-inline-start-color:var(--green); }
.fh-check-warn{ border-inline-start-color:var(--amber); }
.fh-check-warn b{ color:var(--amber); }

.fh-h3{ margin:var(--space-4) 0 var(--space-2); font-size:var(--fs-md); font-weight:700; color:var(--ink); }
.fh-col-nums{ display:flex; flex-wrap:wrap; gap:var(--space-5); margin-bottom:var(--space-3); }
.fh-col-nums > div{ display:flex; flex-direction:column; }
.fh-col-nums span{ font-size:var(--fs-sm); color:var(--ink-mid); }
.fh-col-nums b{ font-size:1.5rem; font-weight:800; }
.fh-col-nums small{ font-size:var(--fs-sm); color:var(--ink-mid); }
.fh-where-bar.is-warn span{ background:var(--amber); }
.fh-col-top{ list-style:none; margin:0; padding:0; }
.fh-col-top li{ display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-top:1px solid var(--line); font-size:var(--fs-base); }
.fh-col-note{ margin:var(--space-3) 0 0; font-size:var(--fs-sm); }

/* =========================================================================
   כספים — פישוט: שורות התצוגה "לפי חודש"
   ========================================================================= */
/* שם הסעיף הוא הכפתור שפותח את הפירוט — נראה כקישור, בגודל מגע מלא */
.fl-open{ border:none; background:none; padding:0; margin:0; min-height:44px; font:inherit; font-weight:700; color:var(--primary-ink); text-align:start; cursor:pointer; }
.fl-open:hover{ text-decoration:underline; }
.md-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:var(--space-4); padding-top:var(--space-3); border-top:1px solid var(--line); }
.md-actions .btn{ min-height:44px; }

/* בטלפון: שורה = שם הסעיף, ומתחתיו שלושה מספרים זה לצד זה (במקום כרטיס
   של 308 פיקסלים עם שבע שורות ושלושה כפתורים) */
body.compact-layout table.stacked-cards.fin-lines tr{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:2px 10px; padding:6px 12px 10px; }
body.compact-layout table.stacked-cards.fin-lines td{ display:flex; flex-direction:column; align-items:flex-start; gap:0; padding:0; border:none; font-size:var(--fs-base); }
body.compact-layout table.stacked-cards.fin-lines td::before{ min-width:0; font-size:var(--fs-xs); }
body.compact-layout table.stacked-cards.fin-lines td.fl-name{ grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px; }
body.compact-layout table.stacked-cards.fin-lines td.fl-name::before,
body.compact-layout table.stacked-cards.fin-lines td.fl-cat,
body.compact-layout table.stacked-cards.fin-lines td.fl-type{ display:none; content:none; }

/* =========================================================================
   כספים — נגישות: מטרות מגע וגודל טקסט מינימלי
   =========================================================================
   ⚠ מוגבל למסכי הכספים במכוון. אותן מחלקות (btn small, set-hint, tag)
   משמשות בכל המערכת, ושינוי גלובלי היה מזיז פריסות שלא נבדקו כאן. */
:is(#tab-finHome, #tab-budgetImport, #tab-budgetControl, #tab-tabar, #tab-yearCompare, #tab-budgetBuilder, #tab-projects) :is(.btn.small, .tab-toolbar .btn){ min-height:44px; }
.tab-toolbar .btn{ min-height:44px; }
.ff-link{ min-height:44px; display:inline-flex; align-items:center; }
.cmp-years button, .cmp-metric button{ min-height:44px; }
.fin-chip-x{ min-width:44px; min-height:44px; border:none; background:none; cursor:pointer; color:var(--brick); font:inherit; font-weight:700; font-size:var(--fs-md); border-radius:var(--radius-sm); }
.fin-chip-x:hover{ background:var(--brick-pale); }

/* ⚠ 12 פיקסלים היה הגודל של רוב משפטי ההסבר, התגיות והטבלאות בכספים —
   מתחת למה שנוח לקרוא לחברי ועד שאינם צעירים. משפט שיש בו מספר: 14. */
:is(#tab-finHome, #tab-budgetImport, #tab-budgetControl, #tab-tabar, #tab-yearCompare, #tab-budgetBuilder, #tab-projects) :is(.screen-lede, .screen-lede span, .set-hint, .note-sm, .fin-item-nums, .ledger-table, .fin-matrix, .fh-sub){ font-size:0.875rem; }
:is(#tab-finHome, #tab-budgetImport, #tab-budgetControl, #tab-tabar, #tab-yearCompare, #tab-budgetBuilder, #tab-projects) :is(.rh-pill, .tag, .ff-chip, .ff-link, .bslot-tag){ font-size:0.8125rem; }
:is(#tab-budgetControl, #tab-yearCompare, #tab-tabar) table :is(td, th){ font-size:0.875rem; }
#encModalBody .ledger-table, #budgetReportDetailBody :is(table, .md-ident-sub, .bc-code){ font-size:0.875rem; }
/* המשך: המחלקות שנמצאו בסריקה עדיין מתחת ל-13 פיקסלים או ל-44 */
#tab-budgetControl :is(.fin-card-sub, .fin-card-more, .fin-item-head span, .field label),
#tab-finHome .fh-months th,
#tab-budgetImport :is(.bslot-what, .bslot-what b),
#tab-tabar :is(.tabar-nums span, .tabar-nums b, .tabar-balance-label, .tabar-meta),
#tab-yearCompare :is(.cmp-presets button, .cmp-export, .cmp-kind, .cmp-details summary small),
#tab-projects .field label{ font-size:0.875rem; }
.th-sort{ min-height:44px; }
.cmp-chart-toggle button, .cmp-export, .cmp-details > summary{ min-height:44px; }
.cmp-details > summary{ display:flex; align-items:center; }
/* כותרות המיון — all:unset בכלל המקורי איפס את הגובה; אותה ספציפיות, מאוחר יותר */
th .th-sort{ min-height:44px; }
#tab-finHome table th,
#tab-budgetControl label :is(span, b),
#tab-budgetImport .bslot span:not(.sr-only),
#tab-yearCompare :is(.cmp-range span, .cmp-vs span){ font-size:0.875rem; }
.fin-advanced > summary small{ font-size:0.8125rem; }
#tab-budgetImport .btn{ min-height:44px; }
:is(#tab-budgetBuilder, #tab-projects) .btn{ min-height:44px; }

/* =========================================================================
   כספים — נראות: אייקונים של המערכת, ומקרא הגרף שאינו נשען על צבע
   ========================================================================= */
.btn-ic{ width:18px; height:18px; flex-shrink:0; vertical-align:-3px; margin-inline-end:4px; }
.btn .btn-ic, .cmp-export .btn-ic{ display:inline-block; }
.cmp-vs .btn-ic{ width:22px; height:22px; margin:0; }
/* הצד השני במקרא — אותם פסים כמו בעמודות */
.cmp-dot-b::before, i.cmp-dot-b{ background:repeating-linear-gradient(45deg, var(--cmp-b) 0 3px, rgba(255,255,255,.55) 3px 5px); }

/* =========================================================================
   הסרגל העליון — שורה משלו במחשב, מגירה מסודרת בטלפון
   =========================================================================
   ⚠ במחשב: הניווט בשורה השנייה של הכותרת, ברוחב מלא. השורה הראשונה —
   לוגו, חיפוש, פעולות. כך 10 הפריטים נכנסים במחשב נייד רגיל, ואינם
   נעלמים לתוך ☰ (ראו updateNavFit). */
body:not(.nav-collapsed) .header-inner{ row-gap:0; }
body:not(.nav-collapsed) .header-inner > nav{
  order:10; flex:1 0 100%;
  border-top:1px solid var(--line);
  padding:6px 0; margin-top:2px;
}
body:not(.nav-collapsed) .header-inner > nav button{ height:42px; }
/* צפוף — אותה שורה, פחות ריפוד, כשהרוחב גבולי */
body.nav-tight:not(.nav-collapsed) .header-inner > nav button{ padding:0 9px; }
body.nav-tight:not(.nav-collapsed) .header-inner > nav{ gap:0; }

/* ---- המגירה ----
   ⚠ "nav{align-items:center}" של השורה האופקית עבר גם למגירה, ולכן כל
   פריט הצטמצם לרוחב הטקסט שלו ועמד באמצע — עמודה צרה ומרחפת. */
body.nav-collapsed #staffNav{ align-items:stretch; padding-top:72px; }
body.nav-collapsed #staffNav > button{
  width:100%; justify-content:flex-start; gap:12px;
  font-size:var(--fs-md); color:var(--ink);
}
body.nav-collapsed #staffNav > button:hover{ background:var(--primary-pale); }
/* "דף הכניסה" הוא אייקון בלבד בשורה — במגירה יש מקום לשם */
body.nav-collapsed #staffNav > button[data-tab="hub"] .sr-only{
  position:static; width:auto; height:auto; margin:0; clip:auto; clip-path:none; overflow:visible; white-space:normal;
}
/* קבוצה במגירה מסמנת שיש בפנים עוד — חץ בקצה, במקום החץ למטה */
body.nav-collapsed #staffNav > button.has-submenu .nav-caret{ margin-inline-start:auto; transform:rotate(90deg); font-size:var(--fs-sm); }

/* ---- קבוצה במגירה: נפתחת במקומה, עם "חזרה" ---- */
/* ⚠ ".nav-submenu button{display:block}" חזק מ-".nav-sub-back" לבדו — ובמחשב "חזרה" הופיע בראש כל תפריט */
.nav-submenu .nav-sub-back, .nav-submenu .nav-sub-title{ display:none; }
body.nav-collapsed .nav-submenu.open{
  position:fixed; top:0 !important; bottom:0; inset-inline-start:0; inset-inline-end:auto;
  left:auto; right:0;
  width:var(--drawer-w); min-width:0; max-width:none;
  border:none; border-radius:0; box-shadow:var(--shadow-lg);
  padding:16px 10px 24px; overflow-y:auto; animation:none;
}
body.nav-collapsed .nav-submenu.open .nav-sub-back{
  display:flex; align-items:center; gap:8px; width:auto; min-height:44px;
  padding:0 14px; margin:0 0 6px; border:1px solid var(--line); border-radius:999px;
  background:var(--panel); color:var(--primary-ink); font-weight:700; font-size:var(--fs-sm);
}
body.nav-collapsed .nav-submenu.open .nav-sub-title{
  display:block; padding:10px 12px 6px; font-size:1.25rem; font-weight:800; color:var(--ink);
}
body.nav-collapsed .nav-submenu.open button[data-tab]{ font-size:var(--fs-md); min-height:52px; }
body.nav-collapsed .nav-submenu.open button[data-tab] small{ font-size:var(--fs-sm); }

/* =========================================================================
   שורת "סה"כ/מאזן" במצב כהה — מינוס שנקרא
   =========================================================================
   ⚠ השורה צבועה --primary, שבמצב כהה הוא כחול בהיר (#5089E2) עם טקסט כהה.
   המינוס הוורוד (#ffb3b3) שנבחר לכחול הכהה של המצב הבהיר ירד ל-2.1:1, ו-#fff
   בטבלת הצדדים ל-3.4:1. במצב כהה המינוס בצבע הטקסט של השורה — הסימן "-"
   כבר אומר שהוא שלילי, והצבע לא היה הדרך היחידה לדעת. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) :is(.mtx-master, .fin-matrix) tr.fin-bal td.neg,
  :root:not([data-theme="light"]) :is(.mtx-master, .fin-matrix) tr.fin-bal td.neg b,
  :root:not([data-theme="light"]) .mtx-sides tr.fin-bal td.cmp-diff.neg,
  :root:not([data-theme="light"]) .mtx-sides tr.fin-bal td.cmp-diff.neg b{ color:var(--on-primary); }
}
:root[data-theme="dark"] :is(.mtx-master, .fin-matrix) tr.fin-bal td.neg,
:root[data-theme="dark"] :is(.mtx-master, .fin-matrix) tr.fin-bal td.neg b,
:root[data-theme="dark"] .mtx-sides tr.fin-bal td.cmp-diff.neg,
:root[data-theme="dark"] .mtx-sides tr.fin-bal td.cmp-diff.neg b{ color:var(--on-primary); }

/* =========================================================================
   אזור התושב/ת — סבב UX
   ========================================================================= */
/* כרטיס פעילות: עד כאן סגנון מוטבע בכל שורה. "מתי" מעל התיאור — זה מה
   שמחליטים לפיו; המחיר תמיד מופיע, גם "ללא תשלום", כדי שלא יישאר ספק. */
.act-card{
  display:flex; gap:var(--space-4); align-items:flex-start;
  background:var(--bg); border-radius:var(--radius); padding:var(--space-4); margin-bottom:14px;
}
.act-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.act-title{ margin:0; font-size:var(--fs-lg); color:var(--ink); }
.act-when{ font-size:var(--fs-sm); font-weight:700; color:var(--primary-ink); }
.act-desc{ font-size:var(--fs-base); color:var(--ink); }
.act-price{ font-size:var(--fs-sm); color:var(--ink-soft); }
.act-price b{ color:var(--ink); }
.act-reg{ min-height:44px; padding:0 22px; margin-top:4px; }
.act-done{ margin:4px 0 0; }
.act-img{ width:112px; height:112px; object-fit:cover; border-radius:10px; flex-shrink:0; box-shadow:var(--shadow-sm); }
@media (max-width:480px){ .act-img{ width:84px; height:84px; } }
.reg-item .reg-when{ color:var(--ink-soft); }
.reg-item.is-past{ opacity:.75; }

/* דף הבית: יעדי מגע בטלפון. שבבי הסינון היו 40px, ושם האירוע — כפתור
   שפותח אותו — 24px בלבד, צמוד לכפתור "הרשמה" (WCAG 2.5.8). */
.rh-chip{ min-height:44px; }
.rh-event-title{ min-height:44px; display:flex; flex-direction:column; justify-content:center; }
.rh-foot .link-btn{ min-height:44px; padding:0 12px; }
/* "פתוחות / הסתיימו": הלשונית הלא-נבחרת הייתה 4.4:1 על רקע הפס — מתחת
   לסף. ההבדל בין נבחרת ללא-נבחרת נשאר ברקע, בצל ובמשקל. */
.rh-seg button{ color:var(--ink); }

/* סרגל "ייצוא לאקסל / הדפסה" — כלי צוות. אצל תושב/ת הוא ישב *מעל* שם
   המסך בדף הקשר ובפרוטוקולים, וייצוא דף הקשר הוא הורדה גורפת של פרטי
   כל השכנים. */
body.resident-view .tab-toolbar{ display:none; }
/* קריאת אחזקה שנפתחה מ"הבקשות שלי" — מודגשת רגע, כמו אירוע מדף הבית */
.mm-item{ transition:box-shadow .3s var(--ease); scroll-margin-top:calc(var(--header-h, 72px) + 12px); }
.mm-item.is-target{ box-shadow:0 0 0 3px var(--primary-light); border-radius:var(--radius-sm); }
.mm-item:focus-visible{ outline:3px solid var(--primary-light); outline-offset:2px; }

/* =========================================================================
   דף הכניסה ולוח הבקרה — סבב UX
   ========================================================================= */
/* מדד = כפתור למסך שלו. נשאר נראה כמו מדד; מה שמשתנה הוא שאפשר ללחוץ. */
button.metric{
  display:block; width:100%; text-align:start; font:inherit; color:inherit;
  background:none; border:none; border-inline-start:1px solid var(--line); border-radius:0;
  cursor:pointer; transition:background-color .15s var(--ease);
}
button.metric:first-child{ border-inline-start:none; }
button.metric:hover{ background:var(--primary-pale); }
button.metric:focus-visible{ outline:3px solid var(--primary-light); outline-offset:-3px; }
@media (max-width:900px){
  button.metric{ border-inline-start:none; border-top:1px solid var(--line); }
  button.metric:first-child{ border-top:none; }
}

/* אריח לוח הבקרה: מה ממתין, במילים */
.hub-todo{ display:flex; flex-direction:column; gap:6px; }
.hub-todo-row{ display:flex; align-items:baseline; gap:var(--space-2); font-size:var(--fs-sm); color:var(--ink); }
.hub-todo-row > b{
  min-width:28px; text-align:center; font-size:var(--fs-lg); font-weight:800; color:var(--primary);
  font-variant-numeric:tabular-nums;
}
.hub-todo-row.warn > b{ color:var(--amber); }
.hub-todo-row.alert > b{ color:var(--brick); }
.hub-todo-row small{ display:block; font-size:var(--fs-xs); color:var(--amber); font-weight:600; }
.hub-todo-ok{ display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-sm); color:var(--green); font-weight:600; }

/* =========================================================================
   הגדרות המערכת — סבב UX
   ========================================================================= */
/* תפריט קפיצה בתוך "פורטל תושבים" */
.set-jump{
  display:flex; flex-wrap:wrap; gap:6px; margin:0 0 var(--space-4);
  padding:var(--space-3); background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-md);
}
.set-jump button{
  min-height:40px; padding:0 14px; border:1px solid var(--line); border-radius:var(--radius-pill);
  background:var(--bg); color:var(--ink); font:inherit; font-size:var(--fs-sm); font-weight:600; cursor:pointer;
}
.set-jump button:hover{ background:var(--primary-pale); border-color:var(--primary-light); }
@media (pointer:coarse){ .set-jump button{ min-height:44px; } }
.set-anchor{ scroll-margin-top:calc(var(--header-h, 72px) + 16px); }
.set-anchor h2:focus-visible{ outline:3px solid var(--primary-light); outline-offset:4px; border-radius:4px; }
.set-sub{ margin:var(--space-5) 0 var(--space-1); font-size:var(--fs-md); color:var(--ink); }

/* מצב הגיבוי */
.bs-list{ list-style:none; margin:0 0 var(--space-2); padding:0; display:flex; flex-direction:column; gap:8px; }
.bs-row{
  display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline;
  padding:10px 14px; border-radius:var(--radius-md); background:var(--bg);
  border-inline-start:4px solid var(--line); font-size:var(--fs-sm); color:var(--ink);
}
.bs-row b{ min-width:170px; }
.bs-row.ok{ border-inline-start-color:var(--green); }
.bs-row.alert{ border-inline-start-color:var(--brick); background:var(--brick-pale); color:var(--brick); }

/* "עוד" בשורת משתמש */
.row-more{ position:relative; }
.row-more > summary{ list-style:none; cursor:pointer; }
.row-more > summary::-webkit-details-marker{ display:none; }
.row-more > summary::after{ content:" ▾"; font-size:.8em; }
.row-more-menu{
  position:absolute; z-index:30; inset-inline-end:0; top:calc(100% + 4px); min-width:210px;
  display:flex; flex-direction:column; padding:6px; gap:2px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-lg);
}
.row-more-menu button{
  min-height:40px; padding:0 12px; text-align:start; border:none; border-radius:var(--radius-sm);
  background:none; color:var(--ink); font:inherit; font-size:var(--fs-sm); cursor:pointer; white-space:nowrap;
}
.row-more-menu button:hover, .row-more-menu button:focus-visible{ background:var(--primary-pale); }
.row-more-menu button.danger{ color:var(--brick); border-top:1px solid var(--line); border-radius:0 0 var(--radius-sm) var(--radius-sm); margin-top:4px; }
.row-more-menu button.danger:hover{ background:var(--brick-pale); }
@media (pointer:coarse){ .row-more-menu button{ min-height:44px; } }

/* =========================================================================
   כותרת מסך אחידה
   =========================================================================
   ⚠ רוב מסכי הצוות נפתחו בכותרת של פאנל ("פרויקט חדש", "לפי חודש") בלי
   שם למסך עצמו — "איפה אני" נענה רק מהסימון בתפריט. ראו syncScreenTitle. */
.screen-head{ margin:0 0 var(--space-5); }
.screen-head[hidden]{ display:none; }
.screen-head h1{
  margin:0; font-size:1.5rem; font-weight:800; line-height:1.2; letter-spacing:-.01em; color:var(--ink);
}
.screen-sub{ margin:4px 0 0; font-size:var(--fs-base); color:var(--ink-soft); max-width:72ch; }
.screen-sub:empty{ display:none; }
@media (max-width:600px){ .screen-head h1{ font-size:1.3rem; } }

/* "טוען…" בראש מסך שנתוניו בדרך (showLoadingNote) */
.loading-note{
  display:flex; align-items:center; gap:10px; margin:0 0 var(--space-4);
  padding:10px 14px; border-radius:var(--radius-md); background:var(--primary-pale);
  color:var(--primary-ink); font-size:var(--fs-sm); font-weight:600;
}
.loading-dot{
  width:14px; height:14px; flex-shrink:0; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent; animation:ghm-spin .8s linear infinite;
}
@keyframes ghm-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .loading-dot{ animation:none; border-top-color:currentColor; opacity:.6; } }

/* =========================================================================
   אייקונים במקום סימני טקסט (✕ ◀ ↑↓ ⬇ ⚠ ✓)
   =========================================================================
   כל מערכת הפעלה ציירה אותם אחרת — ✕ דק בווינדוס ועבה באייפון, ⚠ צבעוני
   באנדרואיד — ובחלק מהגופנים בגודל אחר מהטקסט שלידם. */
.ic-inline{ width:1.05em; height:1.05em; vertical-align:-.17em; margin-inline-end:5px; flex-shrink:0; }
.modal-close .btn-ic, .send-btn .btn-ic{ margin:0; }
.modal-close .btn-ic{ width:20px; height:20px; vertical-align:middle; }
.send-btn .btn-ic{ width:20px; height:20px; }
.group-arrow{ display:inline-flex; transition:transform .2s var(--ease); }
.group-arrow .btn-ic{ margin:0; width:16px; height:16px; }
.offline-icon .btn-ic{ margin:0; }

/* "בטל" בתוך הודעה */
.toast-action{
  margin-inline-start:12px; min-height:36px; padding:0 14px; border-radius:var(--radius-pill);
  border:1.5px solid currentColor; background:transparent; color:inherit;
  font:inherit; font-weight:800; cursor:pointer; white-space:nowrap;
}
.toast-action:hover{ background:rgba(255,255,255,.16); }
.toast-action:focus-visible{ outline:3px solid currentColor; outline-offset:2px; }
@media (pointer:coarse){ .toast-action{ min-height:44px; } }

/* פעולות מרובות */
.bulk-bar{
  position:sticky; top:calc(var(--header-h, 72px) + 8px); z-index:5;
  display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 var(--space-3);
  padding:10px 14px; border-radius:var(--radius-md); background:var(--primary-pale);
  border:1px solid var(--primary-light); box-shadow:var(--shadow-sm);
}
.bulk-bar[hidden]{ display:none; }
.bulk-count{ font-weight:800; color:var(--primary-ink); margin-inline-end:auto; }
.mc-pick{ display:inline-flex; align-items:center; justify-content:center; min-width:32px; min-height:32px; cursor:pointer; }
.mc-pick input{ width:20px; height:20px; margin:0; cursor:pointer; }
@media (pointer:coarse){ .mc-pick{ min-width:44px; min-height:44px; } }

/* מתג הגדרה עם הסבר */
.set-toggle{
  display:flex; align-items:flex-start; gap:12px; margin-top:var(--space-4);
  padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg); cursor:pointer;
}
.set-toggle input{ width:22px; height:22px; margin:2px 0 0; flex-shrink:0; cursor:pointer; }
.set-toggle span{ display:flex; flex-direction:column; gap:4px; color:var(--ink); }
.set-toggle small{ font-size:var(--fs-sm); color:var(--ink-soft); line-height:1.5; }

/* "כל השירותים באייקון אחד בטלפון" (installCardHtml) */
.rh-install{ display:flex; gap:var(--space-4); align-items:flex-start; }
.rh-install-ic{ width:44px; height:44px; flex-shrink:0; border-radius:12px; display:grid; place-items:center;
  background:var(--primary-pale); color:var(--primary-ink); }
.rh-install-ic svg{ width:24px; height:24px; }
.rh-install-text p{ margin:4px 0 12px; color:var(--ink-soft); font-size:var(--fs-base); line-height:1.6; }
.rh-install-btns{ display:flex; gap:8px; flex-wrap:wrap; }

/* =========================================================================
   מגירת התושבים — בצבע המשטח של המערכת, לא נייבי קבוע
   =========================================================================
   ⚠ הרקע היה var(--navy) גם במצב בהיר — "כדי להתיישר עם הפאנל הכהה
   בפורטל". בפועל: מגירה כהה על עמוד בהיר, שנראית כמו מצב כהה שהופעל
   בטעות, ולא כמו מגירת הצוות (בהירה). עכשיו --panel: לבן במצב בהיר, כהה
   במצב כהה — אותו טוקן, אותה מגירה, בשני המצבים. */
body.nav-collapsed .resident-portal-nav{
  background:var(--panel);
  box-shadow:-8px 0 34px rgba(14,37,69,.18);
}
body.nav-collapsed .resident-icon-btn{ background:var(--bg); }
body.nav-collapsed .resident-icon-btn span:last-child{ color:var(--ink); }
body.nav-collapsed .resident-icon-btn:hover{ background:var(--primary-pale); }
body.nav-collapsed .resident-icon-btn:hover span:last-child{ color:var(--primary-ink); }
/* הפריט הפעיל: רקע כחלחל ופס בצד ההתחלה — לא "כרטיס לבן" שאין לו משמעות על רקע לבן */
body.nav-collapsed .resident-portal-nav button.resident-icon-btn.active{
  background:var(--primary-pale);
  box-shadow:inset -4px 0 0 var(--primary);
}
body.nav-collapsed .resident-icon-btn.active span:last-child,
body.nav-collapsed .resident-icon-btn.active:hover span:last-child{ color:var(--primary-ink); font-weight:800; }
body.nav-collapsed .resident-icon-btn.active .circle{ outline:none; }
body.nav-collapsed #residentNav > .nav-drawer-title{ color:var(--ink); }
body.nav-collapsed #residentNav > .nav-close{ color:var(--ink-mid); }
body.nav-collapsed #residentNav > .nav-close:hover{ background:var(--primary-pale); color:var(--primary-ink); }

/* =========================================================================
   הסרגל העליון: "איפה אני" שונה בבירור מ"על מה העכבר"
   =========================================================================
   ⚠ ריחוף ומסך פעיל היו *אותו עיצוב* (רקע תכלת, טקסט כחול) — רק המשקל
   הבדיל. עם העכבר על "לוח בקרה" כש"כספים" פתוח, נראו שני פריטים פעילים.
   עכשיו: פעיל = מלא בצבע הראשי; ריחוף = אפור עדין. רק בסרגל בשולחני —
   במגירה יש לפריט הפעיל עיצוב משלו. */
body:not(.nav-collapsed) #staffNav > button.active{
  background:var(--primary); color:var(--on-primary); font-weight:700;
}
body:not(.nav-collapsed) #staffNav > button.active .nav-caret{ color:inherit; opacity:.85; }
body:not(.nav-collapsed) #staffNav > button:not(.active):hover{
  background:var(--bg); color:var(--ink);
}

/* =========================================================================
   מצב התקציב — "מאזן לפי קבוצה"
   ========================================================================= */
.util-bal-wrap{ overflow-x:auto; }
.util-bal{ width:100%; }
.util-bal td, .util-bal th{ text-align:start; }
.util-bal tfoot th, .util-bal tfoot td{ border-top:2px solid var(--ink); padding-top:10px; }
.util-bal-tag{
  display:inline-block; margin-inline-start:8px; padding:1px 8px; border-radius:var(--radius-pill);
  background:var(--bg); border:1px solid var(--line); color:var(--ink-soft); font-size:var(--fs-xs); font-weight:600;
}
/* עודף/גירעון — גם במילה, לא רק בצבע */
.bal-pos{ color:var(--green); font-weight:700; }
.bal-neg{ color:var(--brick); font-weight:700; }
.bal-cost{ color:var(--ink-mid); font-weight:600; }
.bal-zero{ color:var(--ink-soft); }

/* מאזן לפי קבוצה — גרסה פשוטה: משפט סיכום, רשימות, תוצאה בגדול ופס יחסי */
.balg-summary{ padding:var(--space-4); border-radius:var(--radius-md); background:var(--bg); margin:0 0 var(--space-4); }
.balg-summary p{ margin:0; font-size:var(--fs-md); line-height:1.6; color:var(--ink); }
.balg-summary .balg-summary-sub{ margin-top:4px; font-size:var(--fs-sm); color:var(--ink-soft); }
.balg-h{ margin:var(--space-5) 0 var(--space-2); font-size:var(--fs-md); color:var(--ink); }
.balg-h span{ color:var(--ink-soft); font-weight:600; }
.balg-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.balg{ padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--panel); }
.balg-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.balg-name{ font-size:var(--fs-md); color:var(--ink); }
.balg-res{ font-size:var(--fs-lg); font-weight:800; font-variant-numeric:tabular-nums; }
.balg.is-neg .balg-res{ color:var(--brick); }
.balg.is-pos .balg-res{ color:var(--green); }
.balg.is-even .balg-res{ color:var(--ink-soft); }
.balg-bar{ height:8px; margin:8px 0 6px; border-radius:var(--radius-pill); background:var(--bg); overflow:hidden; }
.balg-bar > i{ display:block; height:100%; border-radius:var(--radius-pill); }
.balg.is-neg .balg-bar > i{ background:var(--brick); }
.balg.is-pos .balg-bar > i{ background:var(--green); }
.balg-sub{ font-size:var(--fs-sm); color:var(--ink-soft); }
.balg-one, .balg-full{ margin-top:var(--space-5); border:1px solid var(--line); border-radius:var(--radius-md); background:var(--panel); }
.balg-one > summary, .balg-full > summary{ cursor:pointer; padding:12px 14px; min-height:44px; font-weight:700; color:var(--primary-ink); }
.balg-one[open] > summary, .balg-full[open] > summary{ border-bottom:1px solid var(--line); }
.balg-full .util-bal-wrap{ padding:0 8px 8px; }
.balg-plain{ list-style:none; margin:0; padding:6px 14px 12px; }
.balg-plain li{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); font-size:var(--fs-sm); }
.balg-plain li:last-child{ border-bottom:none; }
.balg-plain span{ color:var(--ink-mid); font-variant-numeric:tabular-nums; }

/* מצב התקציב לפי שנים — בורר שנה, רשימת סעיפים לשנה קודמת, ושורת כלים אחת */
.util-years{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:var(--space-3); }
.util-years-lbl{ font-size:var(--fs-sm); color:var(--ink-soft); font-weight:600; margin-inline-end:2px; }
.util-years button{ min-height:40px; padding:6px 14px; border:1px solid var(--line); border-radius:var(--radius-pill); background:var(--panel); color:var(--ink); font:inherit; font-size:var(--fs-sm); font-weight:600; cursor:pointer; font-variant-numeric:tabular-nums; }
.util-years button:hover{ border-color:var(--primary); }
.util-years button.active{ background:var(--primary); border-color:var(--primary); color:var(--panel); }
.util-years button:focus-visible{ outline:3px solid var(--primary); outline-offset:2px; }
.util-tools{ display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--space-4); align-items:flex-end; }
.util-tools .field{ margin:0; flex:1 1 150px; }
.util-tools .field:first-child{ flex:2 1 260px; }
.py-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.py-row{ padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--panel); }
.py-row.is-over{ border-inline-start:4px solid var(--brick); }
.py-top{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.py-top b{ font-size:var(--fs-md); color:var(--ink); }
.py-pct{ font-size:var(--fs-md); font-weight:800; color:var(--ink-mid); font-variant-numeric:tabular-nums; }
.py-row.is-over .py-pct{ color:var(--brick); }
.py-bar{ height:8px; margin:8px 0 6px; border-radius:var(--radius-pill); background:var(--bg); overflow:hidden; }
.py-bar > i{ display:block; height:100%; border-radius:var(--radius-pill); background:var(--primary); }
.py-row.is-over .py-bar > i{ background:var(--brick); }
.py-sub{ font-size:var(--fs-sm); color:var(--ink-soft); }

/* מאזן לפי קבוצה — כל קבוצה נפתחת לסעיפים שמרכיבים אותה */
.balg{ padding:0; }
.balg-det > summary{ display:block; padding:12px 14px; cursor:pointer; list-style:none; border-radius:var(--radius-md); }
.balg-det > summary::-webkit-details-marker{ display:none; }
.balg-det > summary:hover{ background:var(--bg); }
.balg-det > summary:focus-visible{ outline:3px solid var(--primary); outline-offset:2px; }
.balg-det .balg-top, .balg-det .balg-bar, .balg-det .balg-sub{ display:block; }
.balg-det .balg-top{ display:flex; }
.balg-more{ display:inline-block; margin-inline-start:8px; color:var(--primary-ink); font-weight:700; }
.balg-more::after{ content:" ▾"; }
.balg-det[open] .balg-more::after{ content:" ▴"; }
.balg-body{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:var(--space-4); padding:4px 14px 14px; border-top:1px solid var(--line); }
.balg-part-h{ display:flex; justify-content:space-between; gap:8px; margin:12px 0 6px; font-size:var(--fs-sm); color:var(--ink); }
.balg-part-h span{ color:var(--ink-mid); font-variant-numeric:tabular-nums; }
.balg-lines{ list-style:none; margin:0; padding:0; }
.balg-lines li{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:7px 0; border-bottom:1px solid var(--line); font-size:var(--fs-sm); }
.balg-lines li:last-child{ border-bottom:none; }
.balg-line-name{ text-align:start; }
.balg-line-amt{ white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--ink); }
.balg-line-amt small{ color:var(--ink-soft); font-size:var(--fs-xs, 12px); }
.balg-lines li.is-over .balg-line-amt b{ color:var(--brick); }
.balg-plain .balg-det > summary{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; font-size:var(--fs-sm); }
.balg-plain .balg-det > summary span{ color:var(--ink-mid); }
.balg-plain .balg-body{ padding:4px 0 10px; }
.balg-plain li > .balg-det{ flex:1; min-width:0; }
.balg-rev{ color:var(--amber); font-weight:700; }

/* תב"ר — סוג התנועה בטבלת כל התנועות, באותם צבעים כמו "התקבל / פתוח / הוצא" בכרטיס */
.tabar-kind{ display:inline-block; padding:2px 8px; border-radius:var(--radius-pill); font-size:var(--fs-xs, 12px); font-weight:700; background:var(--bg); white-space:nowrap; }
.tabar-kind.in{ color:var(--primary); }
.tabar-kind.out{ color:var(--brick); }
.tabar-kind.res{ color:var(--amber); }

/* =========================================================================
   סבב UI/UX — נובמבר 2026
   ========================================================================= */

/* ---- שורות "דורש טיפול" בלוח הבקרה, בטלפון ----
   ⚠ באג: הכלל של 640 נותן ל-.feed-action רוחב 100%, אבל .feed-row לא
   נשבר לשורות (flex-wrap ברירת מחדל nowrap). הכפתור תפס את כל הרוחב
   וגוף השורה התכווץ לעמודה של אות אחת — שם בקשת הבנייה נקרא מלמעלה
   למטה, אות אחרי אות. עכשיו השורה נשברת והכפתור יורד לשורה משלו. */
@media (max-width:640px){
  .feed-row{flex-wrap:wrap;}
  .feed-row > .feed-body{flex:1 1 0;}
  .feed-row > .feed-action{flex:1 0 100%;padding-inline-start:calc(3px + var(--space-3));}
  .act-list .feed-row > .feed-action{flex:0 0 auto;padding-inline-start:0;}
}
.feed-title{overflow-wrap:anywhere;}

/* ---- "הזמנות פתוחות ₪1,440" ----
   inline-flex מוחק את הרווח שבין הטקסט ל-<b>, והסכום נדבק למילה
   ("₪1,440הזמנות פתוחות"). gap מחזיר אותו. */
.res-btn{gap:.35em;}

/* ---- שם בעל הטלפון אינו מונוספייס ----
   formatPhoneDisplay יושב בתוך תאים עם .mono; JetBrains Mono אינו כולל
   עברית, והשם ("אביחי:") נפל לגופן מונוספייס של המערכת — מרווח ומשונה. */
.phone-who{font-family:'Heebo',system-ui,sans-serif;font-weight:500;color:var(--ink-mid);letter-spacing:0;}

/* ---- הודעה שחזרה על עצמה מהבהבת במקום להיערם ---- */
@keyframes toastPulse{ 0%{transform:scale(1);} 40%{transform:scale(1.04);} 100%{transform:scale(1);} }
.toast.toast-pulse{animation:toastPulse .35s var(--ease, ease);}
@media (prefers-reduced-motion:reduce){ .toast.toast-pulse{animation:none;} }

/* ---- כרטיס איש קשר / משק בית בטלפון — שתי קומות ----
   קומה עליונה: בחירה · אווטאר · שם · מחיקה. מתחת: טלפונים, מיילים
   ופרטים ברוחב הכרטיס כולו. ראו phonebookMobileCardsHtml. */
body.compact-layout .contact-card.cc-stack{
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto;
  grid-template-areas:"check avatar name actions" "body body body body";
  align-items:center;gap:6px 10px;
}
body.compact-layout .contact-card.cc-stack .cc-check{grid-area:check;display:flex;align-items:center;}
body.compact-layout .contact-card.cc-stack .avatar-circle{grid-area:avatar;width:38px;height:38px;}
body.compact-layout .contact-card.cc-stack .cc-name-row{grid-area:name;min-width:0;}
body.compact-layout .contact-card.cc-stack .cc-name{text-align:start;line-height:1.3;}
body.compact-layout .contact-card.cc-stack .cc-actions{grid-area:actions;flex-direction:row;}
body.compact-layout .contact-card.cc-stack .cc-body{grid-area:body;min-width:0;}
body.compact-layout .contact-card.cc-stack .cc-body:empty{display:none;}
body.compact-layout .contact-card.cc-stack .cc-phones{margin-top:2px;}
.cc-emails{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:4px;}
.cc-emails a{color:var(--primary);text-decoration:none;overflow-wrap:anywhere;max-width:100%;}
.cc-emails a:hover{text-decoration:underline;}
/* בלי תיבת בחירה (תושב/ת צופה) — העמודה הראשונה פשוט ריקה */
body.compact-layout .contact-card.cc-stack:not(:has(.cc-check)){grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"avatar name actions" "body body body";}

/* ---- מסנני רשימות בטלפון: שתיים בשורה ----
   חמש רשימות נפתחות זו מתחת לזו ("כל הסטטוסים", "כל הקטגוריות", "כל
   השנים"...) דחפו את הקריאה הראשונה אל מתחת לקפל המסך. החיפוש נשאר
   ברוחב מלא; הרשימות הנפתחות מתחלקות לשני טורים. */
@media (max-width:640px){
  .filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
  .filters > input,
  .filters > .filter-grow,
  .filters > :only-child{grid-column:1 / -1;}
  .filters select{min-width:0;width:100%;}
}

/* ---- כפתור החירום הצף לא מסתיר את סוף העמוד ----
   הוא יושב קבוע בפינה, והפריט האחרון ברשימה (כפתור "מחיקה" של הקריאה
   האחרונה, "הצג עוד") נשאר מתחתיו בלי דרך לגלול אותו החוצה. */
body:not(.resident-view) #mainContent{padding-bottom:calc(var(--space-6, 32px) + 64px);}

/* ---- ייבוא תושבים מקובץ: מקופל ----
   ייבוא מחליף את *כל* רשימת התושבים. פעולה נדירה והרסנית לא צריכה
   לשבת בראש המסך שבו עובדים כל יום. */
.import-fold{margin:var(--space-5) 0 0;}
.import-fold > summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;
  font-weight:700;color:var(--ink-mid);font-size:var(--fs-sm);
  padding:10px 4px;min-height:44px;
}
.import-fold > summary::-webkit-details-marker{display:none;}
.import-fold > summary::before{content:'';width:8px;height:8px;border-inline-end:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s;}
.import-fold[open] > summary::before{transform:rotate(45deg);}
.import-fold > summary:hover{color:var(--primary);}

/* ---- גרף התזרים: מיושר למרכז ולא נדבק לשמאל ---- */
.chart-wrap{text-align:center;}

/* ---- טפסי "חדש" מקופלים (toggleCreatePanel) ---- */
.create-bar{display:flex;justify-content:flex-start;margin:0 0 var(--space-4);}
.create-panel[hidden]{display:none !important;}
.create-actions{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center;}
@media (max-width:640px){
  .create-bar .btn{width:100%;justify-content:center;}
  .create-actions .btn{flex:1;justify-content:center;}
}

/* ---- כרטיס קריאת אחזקה קומפקטי (toggleMaintChat) ---- */
.mc-line{margin:6px 0 0;font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.45;}
.mc-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;}
.mc-actions-end{display:flex;gap:8px;margin-inline-start:auto;}
.mc-chat{margin-top:10px;}
.mc-reply{display:flex;gap:8px;margin-top:8px;}
.mc-reply input{flex:1;min-width:0;padding:10px 14px;border-radius:var(--radius-pill);}
.mc-last{margin:10px 0 0;font-size:var(--fs-sm);color:var(--ink-mid);background:var(--bg);border-radius:var(--radius-sm);padding:8px 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mc-last b{color:var(--ink);font-weight:700;}

/* ---- סקירת כספים: אותו רוחב כמו שאר המסכים ----
   .rh הוגבל ל-1200 פיקסלים, וכל שאר המסכים מתפרסים על רוחב התוכן —
   המעבר מ"מצב התקציב" ל"סקירת כספים" נראה כמו קפיצה פנימה. הטור הצדדי
   מקבל קצת יותר מקום, והסכום בשורת "לאן הולך הכסף" אינו נשבר. */
.rh{max-width:none;}
.rh-side{flex-basis:380px;}
.fh-where-row{align-items:baseline;}
.fh-where-row > span:first-child{min-width:0;}
.fh-where-row > span:last-child{white-space:nowrap;flex-shrink:0;}

/* ---- לוח הבקרה: בלי חורים בין הכרטיסים ----
   כרטיס חצי-רוחב שאחריו בא כרטיס ברוחב מלא השאיר חצי שורה ריקה, וכרטיס
   קצר ליד ארוך השאיר שטח לבן מתחתיו. dense ממלא חצי שורה ריקה בכרטיס
   החצי הבא בתור, ו-stretch משווה את גובה הכרטיסים באותה שורה. */
.home-grid{grid-auto-flow:row dense;align-items:stretch;}

/* ---- כפתורי פעולה בשורת כותרת של פאנל: מקובצים בקצה ---- */
.head-actions{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-inline-start:auto;}
@media (max-width:640px){ .head-actions{width:100%;} .head-actions .btn{flex:1;justify-content:center;} }

/* ---- מחלקות עזר במקום style="" חוזר ב-index.html ----
   !important כי הן מחליפות מאפיין style מוטבע, שגבר על כל כלל אחר;
   בלעדיו כללי נייד קיימים (למשל .field ברוחב מלא) היו משנים פריסה. */
.u-flex2{flex:2 !important;}
.u-wfull{width:100% !important;}
.u-mb14{margin-bottom:14px !important;}
.u-mb20{margin-bottom:20px !important;}
.u-row-between{display:flex;justify-content:space-between;align-items:center;margin-top:8px;}
.u-justify-end{justify-content:flex-end !important;}
.u-lede-xs{font-size:var(--fs-xs,.8125rem);color:var(--ink-soft);margin-top:-6px;}
.u-hint-xs{font-size:var(--fs-xs,.8125rem);color:var(--ink-soft);margin-bottom:6px;}
.u-lede-sm{font-size:var(--fs-sm);color:var(--ink-soft);margin-top:-6px;}
.u-actions{display:flex;gap:8px;margin-top:14px;}

/* ---- תפריט "עוד" בכרטיס: נפתח כלפי מעלה, כי הכרטיס נגמר מתחתיו ---- */
.row-more.up .row-more-menu{top:auto;bottom:calc(100% + 4px);}
.row-more-menu button{display:flex;align-items:center;gap:8px;}
.proj-card-actions{align-items:center;flex-wrap:nowrap;}
.proj-card-actions .btn.is-primary-action{flex:1 1 auto;}

/* ---- ראש כרטיס קריאת אחזקה ----
   space-between עם שלושה ילדים (בחירה, כותרת, תגיות) הציב את הכותרת
   באמצע הכרטיס. עכשיו: בחירה וכותרת צמודות בהתחלה, התגיות והסטטוס
   בקצה; בטלפון הן יורדות לשורה משלהן ולא נדחסות ליד הכותרת. */
.mc-card .mc-head{justify-content:flex-start;align-items:center;flex-wrap:nowrap;}
.mc-card .mc-head h3{flex:1;min-width:0;overflow-wrap:anywhere;font-size:var(--fs-md);}
.mc-card .mc-tags{flex-wrap:wrap;justify-content:flex-end;}
@media (max-width:640px){
  .mc-card .mc-head{flex-wrap:wrap;}
  .mc-card .mc-tags{flex:1 0 100%;justify-content:flex-start;}
}

/* ---- "מה קרה במערכת": השורה כולה לחיצה (act-open) ---- */
.act-row{position:relative;border-radius:var(--radius-sm);transition:background .15s;}
.act-row:hover{background:var(--bg);}
.act-open{all:unset;cursor:pointer;font:inherit;color:inherit;text-align:start;}
.act-open::after{content:'';position:absolute;inset:0;border-radius:inherit;}
.act-open:focus-visible::after{outline:2px solid var(--primary);outline-offset:-2px;}
.act-chev{color:var(--ink-soft);font-size:1.25rem;line-height:1;align-self:center;padding-inline:4px;}

/* ---- הדפסה ----
   ⚠ הכלל הכללי בהדפסה מסתיר *כל* button. אבל חלק מהכפתורים הם תוכן:
   שם הפרויקט בכרטיס, שם איש הקשר, כותרת שורה ב"מה קרה במערכת". בהדפסה
   של מסך הפרויקטים יצאו כרטיסים בלי שם. אלה חוזרים כטקסט רגיל.

   ⚠ וטבלה שהופכת לכרטיסים בטלפון (stacked-cards) הודפסה ככרטיסים: רוחב
   עמוד A4 צר מספיק כדי להפעיל את הפריסה הצרה, ורשימת התושבים יצאה
   משק בית לכל חצי עמוד. בהדפסה היא חוזרת להיות טבלה. */
@media print{
  body:not(.printing-certificate) :is(.proj-title-btn, .act-open, .cc-name, .card-link){
    display:inline !important;border:none !important;background:none !important;
    padding:0 !important;color:inherit !important;font:inherit !important;text-decoration:none !important;
  }
  body:not(.printing-certificate) .act-chev{display:none !important;}
  body.compact-layout:not(.printing-certificate) table.stacked-cards{display:table !important;width:100%;}
  body.compact-layout:not(.printing-certificate) table.stacked-cards thead{display:table-header-group !important;}
  body.compact-layout:not(.printing-certificate) table.stacked-cards tbody{display:table-row-group !important;}
  body.compact-layout:not(.printing-certificate) table.stacked-cards tr{display:table-row !important;margin:0;border:none;padding:0;box-shadow:none;}
  body.compact-layout:not(.printing-certificate) table.stacked-cards td{display:table-cell !important;border-bottom:1px solid #ccc;padding:4pt 6pt;}
  body.compact-layout:not(.printing-certificate) table.stacked-cards td::before{content:none !important;}
  /* טבלה רחבה נחתכה בשולי העמוד: td/th הם nowrap על המסך. בהדפסה הם נשברים. */
  body:not(.printing-certificate) .tab.active table{width:100% !important;table-layout:auto;font-size:8.5pt;}
  body:not(.printing-certificate) .tab.active :is(td, th){white-space:normal !important;}
  body:not(.printing-certificate) .tab.active .phone-num{white-space:nowrap;}
}
.u-scroll-x{overflow-x:auto !important;}
.u-fs-xs{font-size:var(--fs-xs,.8125rem) !important;}
.u-soft{color:var(--ink-soft) !important;}
.u-m0{margin:0 !important;}
.u-mt10{margin-top:10px !important;}

/* ---- "עוד" (<summary class="btn ghost small">) נראה ככפתור ----
   ⚠ כללי .btn כתובים ל-:is(button,a) בלבד, ולכן summary קיבל את המחלקות
   ונשאר טקסט חשוף — בשורת המשתמשים בהגדרות כבר מזמן, ועכשיו גם בכרטיס
   הפרויקט. כאן אותו מראה של ghost small. */
.row-more > summary.btn{
  display:inline-flex;align-items:center;gap:4px;min-height:36px;
  font-family:'Heebo',system-ui,sans-serif;font-weight:700;font-size:var(--fs-sm);
  padding:7px 16px;border-radius:var(--radius-pill);
  background:var(--panel);border:1px solid var(--line);color:var(--ink);transition:var(--t);
  user-select:none;
}
.row-more > summary.btn:hover,.row-more[open] > summary.btn{border-color:var(--primary-ink);color:var(--primary-ink);background:var(--primary-pale);}
.row-more > summary.btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
@media (pointer:coarse){ .row-more > summary.btn{min-height:44px;} }

/* "מה קורה אצלי" עם פריט אחד תפס חצי מהרוחב (auto-fill השאיר עמודה ריקה).
   auto-fit מקפל את העמודות הריקות, ופריט יחיד נמתח על כל השורה. */
body:not(.compact-layout) .rh-status{ grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }

/* ---- ניווט התושב/ת במחשב: שורה צפופה במקום המבורגר ----
   11 פריטים עם עיגול צבעוני דרשו 1,719 פיקסלים, ולכן גם על מסך 1440
   התושב/ת קיבל/ה תפריט נשלף בלבד. במצב הצפוף (nav-tight, ש-updateNavFit
   מנסה לפני שהוא מוותר למגירה) העיגולים יורדים — כמו בניווט הצוות, שאין
   בו אייקונים — והשורה נכנסת. במגירה ובטלפון העיגולים נשארים. */
body.nav-tight:not(.nav-collapsed) .resident-icon-btn{padding:0 10px;gap:0;}
body.nav-tight:not(.nav-collapsed) .resident-icon-btn .circle{width:0;height:0;overflow:visible;background:none !important;}
body.nav-tight:not(.nav-collapsed) .resident-icon-btn .circle svg{display:none;}
body.nav-tight:not(.nav-collapsed) .resident-icon-btn span:last-child{font-size:var(--fs-sm);}

/* =========================================================================
   חלון הפרויקט (וכל חלון רחב) בטלפון
   -------------------------------------------------------------------------
   מה שנראה בצילום מהטלפון:
     • הלשוניות נשברו באמצע מילה — "מש/ימו/ת", "הפרויק/ט" — כי חמש לשוניות
       נדחסו לרוחב 340 פיקסלים. עכשיו הן בשורה אחת שנגללת לצדדים, והלשונית
       הפעילה נגללת לתוך המסך (switchProjectModalTab).
     • טבלאות ההכנסות, ההוצאות ו"כמה נותר מכל מקור" (6–7 עמודות) נחתכו
       בצד, ושורה אחת תפסה 120 פיקסלים. עכשיו כל שורה היא כרטיס: השם
       למעלה, המספרים בשני טורים, הכפתורים בתחתית.
     • החלון צף עם שוליים ופינות — בטלפון הוא תופס את כל המסך.
     • שורת השמירה: ההסבר והכפתור בשורה אחת, ההסבר בגופן קטן.
   ========================================================================= */
@media (max-width:640px){
  .mtabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-inline:-4px;padding-inline:4px;}
  .mtabs::-webkit-scrollbar{display:none;}
  .mtabs button{white-space:nowrap;flex:0 0 auto;padding:10px 12px;min-height:44px;}

  .modal-bg:has(> .modal.wide){padding:0;align-items:stretch;}
  .modal.wide{width:100%;max-width:none;max-height:100vh;max-height:100dvh;height:100dvh;border-radius:0;}
  .modal.wide .mtabs-sticky-wrap{padding-top:10px;}
  .modal-topbar h3{overflow-wrap:anywhere;}

  .pm-footer{flex-wrap:nowrap;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));}
  .pm-footer .pm-hint{flex:1;min-width:0;font-size:var(--fs-xs);line-height:1.35;}
  .pm-footer .btn{flex:0 0 auto;}
}
body.compact-layout table.stacked-cards.pm-cards tr{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;padding:10px 12px 12px;
}
body.compact-layout table.stacked-cards.pm-cards td{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:4px 0;border:none;min-width:0;overflow-wrap:anywhere;
}
body.compact-layout table.stacked-cards.pm-cards td::before{min-width:0;font-size:var(--fs-xs);font-weight:600;}
body.compact-layout table.stacked-cards.pm-cards td.sc-title{grid-column:1 / -1;font-weight:800;font-size:var(--fs-md);color:var(--ink);padding-bottom:6px;border-bottom:1px solid var(--line);}
body.compact-layout table.stacked-cards.pm-cards td.sc-title::before{content:none;}
body.compact-layout table.stacked-cards.pm-cards td.sc-actions{grid-column:1 / -1;padding-top:8px;border-top:1px solid var(--line);}
body.compact-layout table.stacked-cards.pm-cards td.sc-actions::before{content:none;}
body.compact-layout table.stacked-cards.pm-cards .rowbtns{width:100%;justify-content:flex-start;flex-wrap:wrap;}
body.compact-layout .u-scroll-x:has(> table.stacked-cards){overflow-x:visible !important;}
body.compact-layout table.stacked-cards.pm-cards tr,
body.compact-layout table.stacked-cards.pm-cards tr:nth-child(even),
body.compact-layout table.stacked-cards.pm-cards tr:hover{background:var(--panel);}
body.compact-layout table.stacked-cards.pm-cards td{background:none !important;}
body.compact-layout table.stacked-cards.pm-cards td::before{font-family:'Heebo',system-ui,sans-serif;letter-spacing:0;}
/* יומן השינויים בטלפון: הטקסט ("צפי העלות שונה מ-...") נשבר לשורות ולא נחתך בצד */
body.compact-layout table.pm-history{display:table !important;width:100%;table-layout:auto;}
body.compact-layout table.pm-history td,body.compact-layout table.pm-history th{white-space:normal;vertical-align:top;}
body.compact-layout table.pm-history td:first-child{white-space:nowrap;}
/* ⚠ טקסט ארוך בכרטיס ("גיוס תרומות דרך הקרן (לאחר ניכוי 5% תקורה)") לא
   נשבר — td בפריסה הצרה הוא nowrap — ודחף את כל החלון אל מחוץ למסך: כותרת
   הפרויקט, "צפוי" והסכומים נחתכו בצד. נמצא בצילום מהטלפון על נתונים אמיתיים. */
body.compact-layout table.stacked-cards.pm-cards td{white-space:normal;}
body.compact-layout table.stacked-cards.pm-cards td.mono{white-space:nowrap;}
@media (max-width:640px){ .modal.wide{overflow-x:hidden;} .modal.wide #pmBody{min-width:0;max-width:100%;} }

/* =========================================================================
   התאמה לטלפונים — iPhone (Safari) ו-Android (Chrome), נובמבר 2026
   נמצא בסריקה של כל המסכים על iPhone SE / 14 Pro, Pixel 7 ו-Galaxy 360.
   ========================================================================= */

/* ⚠ iPhone מגדיל את כל הדף כשנוגעים בשדה שהגופן שלו קטן מ-16px, ולא מקטין
   חזרה. נמצאו שדות כאלה ב-5 מסכים: בורר הסטטוס בכרטיס פרויקט ובקריאת
   אחזקה (13px), שדות בניית התקציב, תגובה לקריאה (15px). כלל אחד לכל שדה
   במכשיר מגע — !important כי חלק מהגדלים כתובים ישירות על השדה. */
@media (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
  select, textarea{ font-size:max(16px, 1em) !important; }
}

/* ⚠ גלילה הצידה של כל העמוד בטלפון קטן (iPhone SE, 320–375px):
   1. טבלה שהופכת לכרטיסים: התא נשאר nowrap, ושם סעיף ארוך ("הוצאות חשמל
      העמסה קראוון חיילים") או רשימת תפקידים של עובד דחפו את העמוד הצידה. */
body.compact-layout table.stacked-cards td{white-space:normal;overflow-wrap:anywhere;min-width:0;}
body.compact-layout table.stacked-cards td > *{min-width:0;}
body.compact-layout table.stacked-cards td.mono,
body.compact-layout table.stacked-cards td .phone-num{white-space:nowrap;}
/* 2. פרוטוקולים: שדה "ועדה חדשה" וכפתור ההוספה בשורה אחת — לשדה היה רוחב
      מינימלי, והשורה יצאה מהמסך. */
#committeesPanel input{min-width:0;flex:1 1 auto;}
/* 3. "הבקשות שלי" (קריאות אחזקה של תושב/ת): כרטיס בעמודה עם flex-wrap — 
      בעמודה, wrap מחשב את רוחב השורה לפי התוכן ולא לפי הכרטיס, ושורת
      הפרטים יצאה 60 פיקסלים מחוץ למסך. */
.mm-item{flex-wrap:nowrap;min-width:0;}
.mm-item > *{min-width:0;max-width:100%;overflow-wrap:anywhere;}

/* ⚠ iPhone עם פס בית (כל ה-iPhone מ-X ואילך), כשהמערכת מותקנת כאפליקציה:
   כפתור החירום הצף ישב על הפס ונבלע במחוות החזרה למסך הבית. */
#emergencyFab{inset-block-end:calc(16px + env(safe-area-inset-bottom, 0px));}

/* Safari עד גרסה 17 מכיר רק את הגרסה עם הקידומת — בלי זה הרקע מאחורי
   חלונות ומסך הכניסה לא היה מטושטש באייפון. */
#gate{-webkit-backdrop-filter:blur(3px);}
.modal-bg{-webkit-backdrop-filter:blur(2px);}

/* שדות תאריך ושעה ב-iPhone: בלי גובה מינימלי שדה ריק מתכווץ לפס דק,
   והערך נצמד לשמאל גם בממשק בעברית. */
input[type=date], input[type=time], input[type=datetime-local]{min-height:44px;}
input[type=date]::-webkit-date-and-time-value,
input[type=time]::-webkit-date-and-time-value{text-align:right;}
/* 4. שדה טקסט בשורת flex (שדה תגובה + כפתור שליחה, ועוד) — לשדה יש רוחב
      טבעי של כ-20 תווים, והוא לא הצטמצם מתחתיו. min-width:0 מאפשר לו
      להתכווץ לרוחב שנשאר. */
input, select, textarea{min-width:0;}

/* ---- אזורי מגע במכשירי מגע ----
   תיבות הבחירה בכרטיסי דף קשר ומידע תושבים היו 18x18 פיקסלים, וחץ הכיווץ
   של סעיף בבניית התקציב 24x24 — קל לפספס באצבע ולפתוח את הכרטיס במקום. */
@media (pointer:coarse){
  input[type=checkbox], input[type=radio]{width:22px;height:22px;}
  .contact-card .cc-check{min-width:44px;min-height:44px;justify-content:center;}
  .mtx-caret{min-width:44px;min-height:44px;}
}
/* סרגל "ייצוא לאקסל / הדפסה" בטלפון צר (320–360, iPhone SE): כל כפתור
   נשבר לשתי שורות. בשורה אחת, גופן מעט קטן יותר. */
@media (max-width:380px){
  .tab-toolbar .btn{white-space:nowrap;padding-inline:12px;font-size:var(--fs-sm);gap:6px;}
}

/* =========================================================================
   סבב טלפונים 3
   ========================================================================= */

/* ⚠ לשוניות ההגדרות נדחסו זו על זו בטלפון.
   הפס עובר לגלילה אופקית ב-640px, אבל הכפתורים נשארו flex-shrink:1 עם
   white-space:nowrap — אז במקום לגלול הם התכווצו לרוחב של 36–68px והטקסט
   שלהם נשפך על השכנים ("פורטל תושבים" על "משתמשים והרשאות"). */
.set-tabs button{flex:0 0 auto;}

/* כפתור החירום הצף בטלפון: עיגול עם סמל בלבד.
   הגלולה "⚠ חירום" ברוחב 100px ישבה על שדות חיפוש, מסננים ומספרים בכל
   מסך של הצוות. העיגול שומר על אותו צבע ומקום (העין עדיין מוצאת אותו),
   והמילה נשארת לקוראי מסך דרך aria-label. בזמן הקלדה הוא מוסתר — המקלדת
   ממילא מכסה חצי מסך, והוא נדחף בדיוק מעל שדה הקלט. */
@media (max-width:640px){
  #emergencyFab{
    width:54px;height:54px;min-height:54px;padding:0;justify-content:center;
    border-radius:50%;
  }
  #emergencyFab > span{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
  }
  #emergencyFab svg{width:24px;height:24px;}
  body.logged-in:not(.resident-view) main{padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px));}
  body.typing #emergencyFab{opacity:0;pointer-events:none;transform:scale(.6);}
}

/* ⚠ בורר קבצים בעברית ובגודל אצבע.
   =========================================================================
   הטקסט של הפקד המקורי ("Choose Files · No file chosen") נקבע לפי שפת
   הדפדפן ולא לפי הדף, ולכן בטלפון באנגלית הוא הופיע באנגלית באמצע טופס
   עברי, בגודל של 30px, בלי שום אישור לאחר הבחירה מה נבחר.
   enhanceFileInputs (platform.js) עוטף כל שדה: השדה האמיתי פרוש שקוף על
   כל המלבן — כך הלחיצה היא עדיין לחיצה על הפקד עצמו (חשוב ל-iOS, שפותח
   את בורר התמונות/המצלמה רק מלחיצה ישירה), והמקלדת והקוראי-מסך רואים
   את אותו input עם אותו id ואותם מאזינים. */
.fp{
  position:relative;display:flex;align-items:center;gap:var(--space-3);
  min-height:54px;padding:8px 12px;max-width:100%;box-sizing:border-box;
  border:1.5px dashed var(--line-strong, var(--line));border-radius:12px;
  background:var(--panel);transition:var(--t);
}
.fp:hover{border-color:var(--primary);}
.fp:focus-within{outline:2px solid var(--primary);outline-offset:2px;}
.fp.has-file{border-style:solid;border-color:var(--primary);background:var(--primary-pale);}
.fp > input[type="file"]{
  position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;
  opacity:0;cursor:pointer;border:none;font-size:16px;
}
.fp-btn{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:var(--radius-pill);
  background:var(--primary);color:var(--on-primary);font-weight:700;font-size:var(--fs-sm);
  pointer-events:none;
}
.fp-btn svg{width:16px;height:16px;}
.fp-name{
  flex:1 1 auto;min-width:0;font-size:var(--fs-sm);color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;
  /* שם קובץ באנגלית נחתך בסופו ("leak-photo-kit…") ולא בתחילתו */
  unicode-bidi:plaintext;text-align:right;
}
.fp.has-file .fp-name{color:var(--ink);font-weight:600;}
.fp-thumb{
  flex:0 0 auto;width:38px;height:38px;border-radius:8px;object-fit:cover;
  pointer-events:none;border:1px solid var(--line);
}
.fp-thumb[hidden]{display:none;}