/* ui.css — ספריית הרכיבים המשותפת · Multi-Brand Premium Light
 * ════════════════════════════════════════════════════════════════════
 * 🔴 **מוסיפה, לא מחליפה.** `styles.css` נשאר כפי שהוא ואף מסך קיים
 * אינו זז. כל מחלקה כאן נושאת קידומת `u-`, ולכן אין התנגשות.
 *
 * 🔴 **מקור אחד לכל ערך.** היום יש 3,760 `style=` אינליין, 753 גדלי
 * טקסט, 350 ריפודים, 33 רדיוסים ו-28 צללים. כאן: 7 גדלים, 7 ריווחים,
 * 3 רדיוסים, 3 צללים. אם ערך אינו טוקן — הוא חסר טוקן, לא "פעם אחת".
 *
 * ⚠ **כל הערכים מ-`DESIGN.md`.** שינוי כאן בלי לעדכן שם מפצל את
 * מקור האמת, וזה בדיוק מה שהמערכת הזאת נולדה למנוע.
 * ════════════════════════════════════════════════════════════════ */

/* ── 1 · טוקנים שאינם תלויים במותג ──────────────────────────────── */
.u, [data-brand]{
  /* משטחים ודיו */
  --u-surface:#F6F5F2; --u-panel:#fff; --u-panel-2:#F3F2EE;
  --u-line:#E8E6E1; --u-line-soft:#F3F2EE;
  --u-ink:#16171B; --u-ink-2:#3C3E47; --u-muted:#6A6C76; --u-faint:#9A9CA6;

  /* 🔴 **צבעי מצב זהים בכל החברות.** מצב הוא מידע, לא מותג —
     "באיחור" חייב להיראות אותו דבר בארבעתן. כל מצב הוא שלישייה
     (רקע · טקסט · גבול), וכל `fg` עובר AA על ה-`bg` שלו. */
  --u-ok:#0B7A58;     --u-ok-bg:#E8F6F0;     --u-ok-line:#C4E6D8;
  --u-warn:#8A5A07;   --u-warn-bg:#FBF2E0;   --u-warn-line:#EEDCB6;
  --u-danger:#C8304C; --u-danger-bg:#FCEDF0; --u-danger-line:#F3CBD3;
  --u-info:#2F5FB3;   --u-info-bg:#EBF1FB;   --u-info-line:#CFDDF4;

  /* סולם ריווחים — בסיס 4, בלי ערכי ביניים */
  --u-1:4px; --u-2:8px; --u-3:12px; --u-4:16px; --u-5:24px; --u-6:32px; --u-7:48px;
  /* רדיוסים — שלושה ועוד גלולה */
  --u-r-sm:10px; --u-r-md:14px; --u-r-lg:20px; --u-r-pill:999px;
  /* צללים — שכבות טונליות, לא צללים כבדים */
  --u-sh-sm:0 1px 2px rgba(22,23,27,.04), 0 6px 16px rgba(22,23,27,.05);
  --u-sh-md:0 6px 18px rgba(22,23,27,.08), 0 20px 44px rgba(22,23,27,.07);
  --u-sh-lg:0 12px 30px rgba(22,23,27,.14), 0 36px 70px rgba(22,23,27,.16);
  /* תנועה — לפי taste-animation */
  --u-t-fast:120ms; --u-t:180ms; --u-t-slow:240ms; --u-ease:cubic-bezier(.22,1,.36,1);
  --u-font:Heebo,'IBM Plex Sans Hebrew',system-ui,-apple-system,Arial,sans-serif;

  /* 🔴 **ברירת המחדל יושבת כאן, לפני המותגים.** הניסיון הראשון כתב
     `--u-brand: var(--u-brand, ...)` בחוק נפרד — הפניה עצמית, ש-CSS
     פוסל **כולה**; ומכיוון ש-`[data-brand]` נושא אותה ספציפיות כמו
     `[data-brand="bpm"]` ויושב אחריו, הוא ניצח ומחק את ארבעת המותגים
     בבת אחת. הסרגל יצא לבן, והטקסט הלבן שבו נעלם. **נמדד במסך.**
     כאן זו הצהרה רגילה, והמותג שאחריה פשוט דורס אותה. */
  --u-brand:#3C3E47; --u-brand-ink:#3C3E47; --u-brand-dark:#16171B;
  --u-brand-tint:#F3F2EE; --u-brand-2:#6A6C76;
}

/* ── 2 · ארבע הזהויות ───────────────────────────────────────────────
 * 🔴 **הכל נגזר מארבעה ערכים.** `primary` · `dark` · `tint` ·
 * `primary-ink` — וכל השאר (סרגל, כרטיס, גרף, גבול, צל) מורכב מהם.
 * עסק חדש = ארבע שורות, בלי שורת קוד.
 *
 * ⚠ **`--u-brand` אינו תמיד צבע טקסט.** הזהב של BPM נותן 3.85:1 על
 * לבן — נכשל ב-AA. לכן `--u-brand-ink` נפרד, מוכהה עד שהוא עובר,
 * והוא **היחיד** שמותר לטקסט ולקישור על רקע בהיר. נמדד, לא הוערך. */
[data-brand="bpm"]{
  --u-brand:#A77A29;        /* זהב — מילוי, קו גרף, טקסט על כהה */
  --u-brand-ink:#966E25;    /* 4.61:1 על לבן ✓ — טקסט וקישור */
  --u-brand-dark:#151515;   /* הסרגל */
  --u-brand-tint:#F8F6F0;   /* רקע עדין, חמים */
  --u-brand-2:#D9C27E;      /* שמפניה — הדגשה על כהה */
}
[data-brand="ofek"]{
  --u-brand:#7510D7;        /* סגול */
  --u-brand-ink:#7510D7;    /* 7.47:1 ✓ */
  --u-brand-dark:#16061F;
  --u-brand-tint:#FBF5FF;
  --u-brand-2:#E71CA8;      /* פוקסיה */
  --u-brand-3:#FF8734;      /* כתום */
}
[data-brand="tal"]{
  --u-brand:#0964C8;        /* כחול חשמלי */
  --u-brand-ink:#0964C8;    /* 5.72:1 ✓ */
  --u-brand-dark:#061A35;
  --u-brand-tint:#F4F9FF;
  --u-brand-2:#16B5F5;      /* תכלת */
}
[data-brand="moshe"]{
  --u-brand:#1769B0;        /* כחול עמוק */
  --u-brand-ink:#1769B0;    /* 5.70:1 ✓ */
  --u-brand-dark:#07182F;
  --u-brand-tint:#F3F8FC;
  --u-brand-2:#64B8F5;      /* תכלת */
}

/* ── 3 · בסיס ───────────────────────────────────────────────────── */
.u *, .u *::before, .u *::after{ box-sizing:border-box }
.u{ font-family:var(--u-font); color:var(--u-ink); background:var(--u-surface);
  /* 🔴 ספרות מיושרות — בממשק פיננסי זה ההבדל בין עמודה שאפשר
     להשוות לבין עמודה מרופטת. הפספוס הנפוץ ביותר. */
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased }

/* הסולם — שבעה גדלים */
.u-display { font-size:28px;   font-weight:800; line-height:1.1;  letter-spacing:-1px }
.u-headline{ font-size:22px;   font-weight:800; line-height:1.2;  letter-spacing:-.5px }
.u-title   { font-size:17px;   font-weight:800; line-height:1.3;  letter-spacing:-.2px }
.u-subtitle{ font-size:14.5px; font-weight:700; line-height:1.4 }
.u-body    { font-size:13.5px; font-weight:400; line-height:1.55 }
.u-small   { font-size:12px;   font-weight:500; line-height:1.45 }
.u-label   { font-size:11px;   font-weight:700; line-height:1.3; letter-spacing:.3px; color:var(--u-muted) }
.u-mut{ color:var(--u-muted) } .u-faint{ color:var(--u-faint) }

/* אייקון — עובי קו אחיד. ⚠ תו יוניקוד אינו אייקון. */
.u-ic{ width:18px; height:18px; flex:none; stroke:currentColor; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; display:block }
.u-ic-sm{ width:14px; height:14px } .u-ic-lg{ width:22px; height:22px }

/* ── 4 · כפתור ──────────────────────────────────────────────────── */
.u-btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--u-2);
  min-height:38px; padding:9px 15px; border-radius:var(--u-r-sm); border:1px solid var(--u-line);
  background:var(--u-panel); color:var(--u-ink); font:inherit; font-size:12px; font-weight:700;
  cursor:pointer; text-decoration:none; white-space:nowrap; box-shadow:var(--u-sh-sm);
  transition:background var(--u-t-fast) var(--u-ease), border-color var(--u-t-fast) var(--u-ease),
             transform var(--u-t-fast) var(--u-ease); position:relative }
.u-btn:hover{ background:var(--u-panel-2) }
/* **לחיצה שמרגישה שהממשק מקשיב** — 0.97, לפי taste-animation */
.u-btn:active{ transform:scale(.97) }
.u-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--u-brand) 24%, transparent) }
.u-btn[disabled]{ opacity:.45; pointer-events:none }
/* ⚠ **שטח נגיעה 44px בפלאפון** דרך פסאודו, בלי להגדיל את הכפתור */
@media (pointer:coarse){ .u-btn::after{ content:""; position:absolute; inset:-3px; } }

.u-btn--primary{ background:var(--u-brand-dark); border-color:var(--u-brand-dark); color:#fff;
  padding:9px 17px; box-shadow:0 6px 16px color-mix(in srgb, var(--u-brand-dark) 28%, transparent) }
.u-btn--primary:hover{ background:color-mix(in srgb, var(--u-brand-dark) 88%, #fff) }
.u-btn--primary .u-ic{ color:var(--u-brand-2) }
/* ⚠ **כפתור מלא נצבע ב-`-ink`, לא ב-`-brand`.** טקסט לבן על הזהב
   #A77A29 נותן 3.85:1 — נכשל; על #966E25 הוא 4.61:1. בשלושת
   האחרים השניים זהים, ולכן אין שום שינוי אצלם. נמדד, לא הוערך. */
.u-btn--brand{ background:var(--u-brand-ink); border-color:var(--u-brand-ink); color:#fff }
.u-btn--brand:hover{ background:color-mix(in srgb, var(--u-brand-ink) 86%, #000) }
.u-btn--ghost{ background:transparent; border-color:transparent; color:var(--u-muted);
  box-shadow:none; padding:8px 13px }
.u-btn--ghost:hover{ background:var(--u-panel-2); color:var(--u-ink) }
.u-btn--danger{ background:var(--u-danger-bg); border-color:var(--u-danger-line); color:var(--u-danger) }
.u-btn--icon{ width:38px; padding:0 }

/* ── 5 · שדה ────────────────────────────────────────────────────── */
.u-field{ display:flex; flex-direction:column; gap:5px }
.u-field > .u-label{ font-weight:700 }
.u-input{ min-height:38px; padding:9px 12px; border-radius:var(--u-r-sm);
  border:1px solid var(--u-line); background:var(--u-panel); color:var(--u-ink);
  font:inherit; font-size:13.5px; width:100%;
  transition:border-color var(--u-t-fast) var(--u-ease), box-shadow var(--u-t-fast) var(--u-ease) }
.u-input::placeholder{ color:var(--u-faint) }
.u-input:focus{ outline:none; border-color:var(--u-brand-ink);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--u-brand) 20%, transparent) }
.u-input[aria-invalid="true"]{ border-color:var(--u-danger-line); background:var(--u-danger-bg) }
.u-err{ color:var(--u-danger); font-size:12px; font-weight:600 }
/* 🔴 **16px בפלאפון** — מתחת לזה iOS מקרב את המסך בכל מיקוד */
@media (max-width:900px){ .u-input{ font-size:16px } }

/* ── 6 · צ'יפ מצב ───────────────────────────────────────────────── */
.u-chip{ display:inline-flex; align-items:center; gap:5px; border-radius:var(--u-r-pill);
  padding:4px 10px; font-size:11px; font-weight:700; letter-spacing:.3px; white-space:nowrap;
  border:1px solid transparent }
.u-chip--ok{ background:var(--u-ok-bg); color:var(--u-ok); border-color:var(--u-ok-line) }
.u-chip--warn{ background:var(--u-warn-bg); color:var(--u-warn); border-color:var(--u-warn-line) }
.u-chip--danger{ background:var(--u-danger-bg); color:var(--u-danger); border-color:var(--u-danger-line) }
.u-chip--info{ background:var(--u-info-bg); color:var(--u-info); border-color:var(--u-info-line) }
/* ⚠ **"לא ידוע" אינו "אין"** — מצב רביעי מפורש, אפור ולא ריק */
.u-chip--none{ background:var(--u-panel-2); color:var(--u-muted); border-color:var(--u-line) }
.u-chip--brand{ background:var(--u-brand-tint); color:var(--u-brand-ink);
  border-color:color-mix(in srgb, var(--u-brand) 25%, transparent) }

/* ── 7 · כרטיס ──────────────────────────────────────────────────── */
.u-card{ background:var(--u-panel); border:1px solid var(--u-line); border-radius:var(--u-r-lg);
  box-shadow:var(--u-sh-sm); display:flex; flex-direction:column; min-height:0; overflow:hidden }
.u-card__h{ display:flex; align-items:center; gap:var(--u-2); padding:14px 18px 10px }
.u-card__h .u-ic{ color:var(--u-muted) }
.u-card__h-t{ font-size:17px; font-weight:800; letter-spacing:-.2px }
.u-card__sp{ flex:1 }
.u-card__link{ display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:700;
  color:var(--u-brand-ink); text-decoration:none }
.u-card__link:hover{ text-decoration:underline }
/* 🔴 **`flex:1` פירושו `flex-basis:0`** — גוף הכרטיס תורם **אפס**
   לגובה הטבעי שלו, ולכן הכרטיס לעולם אינו יודע כמה מקום הוא
   צריך. זה מה שהפך כל גובה שורה לניחוש, ושלושה סבבים של
   "עוד 11px" לא נגעו בסיבה. `1 1 auto` — גדל כשיש מקום, אבל
   הבסיס הוא התוכן. */
.u-card__b{ padding:0 18px 16px; flex:1 1 auto; min-height:0; overflow:auto }
.u-card__b::-webkit-scrollbar{ width:5px }
.u-card__b::-webkit-scrollbar-thumb{ background:var(--u-line); border-radius:3px }

/* ── 8 · כרטיס KPI ──────────────────────────────────────────────── */
.u-kpi{ position:relative; background:var(--u-panel); border:1px solid var(--u-line);
  border-radius:var(--u-r-md); padding:13px 15px; padding-inline-end:58px; box-shadow:var(--u-sh-sm);
  overflow:hidden }
/* 🔴 **האייקון בקצה הנגדי לטקסט.** ב-RTL הטקסט מתחיל בימין, ולכן
   `inset-inline-end`. ההפך שם אותו ישר על הכותרת — באג אמיתי. */
.u-kpi__ic{ position:absolute; top:13px; inset-inline-end:14px; width:34px; height:34px;
  border-radius:var(--u-r-sm); display:grid; place-items:center;
  background:var(--u-brand-tint); color:var(--u-brand-ink) }
.u-kpi__k{ font-size:12px; font-weight:600; color:var(--u-muted) }
.u-kpi__v{ font-size:28px; font-weight:800; letter-spacing:-1px; line-height:1.1; margin:2px 0 7px }
/* ⚠ **"−7.3%" הפך ל-"7.3%−".** מספר עם סימן הוא קטע LTR בתוך
   פסקה עברית, והדפדפן העיף את הסימן לקצה. נראה בצילום. */
.u-kpi__d{ display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:800;
  border-radius:var(--u-r-pill); padding:3px 9px; direction:ltr }
.u-kpi__d--up{ background:var(--u-ok-bg); color:var(--u-ok) }
.u-kpi__d--down{ background:var(--u-danger-bg); color:var(--u-danger) }
.u-kpi__note{ font-size:11.5px; color:var(--u-muted); margin-inline-start:8px; font-weight:500 }
/* **המוביל נושא את המותג — ההדגשה היחידה בשורה** */
.u-kpi--lead{ background:var(--u-brand-dark); border-color:var(--u-brand-dark) }
.u-kpi--lead .u-kpi__k, .u-kpi--lead .u-kpi__note{ color:rgba(255,255,255,.66) }
.u-kpi--lead .u-kpi__v{ color:var(--u-brand-2) }
.u-kpi--lead .u-kpi__ic{ background:color-mix(in srgb, var(--u-brand) 26%, transparent); color:var(--u-brand-2) }
.u-kpi--lead::after{ content:""; position:absolute; inset:auto -30px -56px auto; width:190px; height:150px;
  pointer-events:none; background:radial-gradient(ellipse, color-mix(in srgb, var(--u-brand) 30%, transparent), transparent 70%) }

/* ── 9 · טבלה ───────────────────────────────────────────────────── */
.u-table{ width:100%; border-collapse:collapse; font-size:13.5px }
.u-table th{ text-align:start; font-size:11px; font-weight:700; letter-spacing:.3px;
  color:var(--u-muted); padding:0 12px 10px; border-bottom:1px solid var(--u-line); white-space:nowrap }
.u-table td{ padding:10px 12px; border-bottom:1px solid var(--u-line-soft); height:40px }
.u-table tbody tr:last-child td{ border-bottom:0 }
.u-table--sm td{ height:34px; padding:6px 10px }
.u-table--sm th{ padding:0 10px 8px }
.u-table tbody tr{ transition:background var(--u-t-fast) var(--u-ease) }
.u-table tbody tr:hover{ background:var(--u-panel-2) }
.u-table .u-num{ font-weight:700; text-align:start }
/* **שורה שנושאת מצב** — פס בצד הוא מידע, ומותר רק כאן */
/* ⚠ **`box-shadow: inset 3px` אינו מתהפך ב-RTL** והפס נחת באמצע
   הטבלה, על הגבול הפנימי של התא הימני. `border-inline-start` כן. */
.u-table tr.u-row--danger td:first-child{ border-inline-start:3px solid var(--u-danger) }
.u-table tr.u-row--danger{ background:color-mix(in srgb, var(--u-danger-bg) 55%, transparent) }

/* ── 10 · סרגל ניווט ────────────────────────────────────────────── */
.u-nav{ width:218px; background:var(--u-brand-dark); color:rgba(255,255,255,.62);
  padding:16px 11px; display:flex; flex-direction:column; gap:2px;
  position:relative; overflow:hidden; border-inline-end:1px solid rgba(255,255,255,.07) }
/* זוהר עדין של המותג בתחתית — רמז לעולם של הלוגו, לא תמונה שמתחרה */
.u-nav::after{ content:""; position:absolute; inset:auto 0 0 0; height:210px; pointer-events:none;
  background:radial-gradient(ellipse 130% 70% at 50% 100%,
    color-mix(in srgb, var(--u-brand-2, var(--u-brand)) 26%, transparent), transparent 72%) }
/* 🔴 **ההיפוך נועד לאלומות ה-CSS, לא לצילום.** `scaleY(-1)` הפך
   אלומה שתעלה מרצפת הבמה — יפה כשזה גרדיאנט, ו**טראס הפוך**
   כשזו תמונה. התמונה נשארת כפי שצולמה; החלק התחתון שלה הוא
   ממילא הרצפה והסרט. */
.u-nav__ph{ position:absolute; inset:auto 0 0 0; height:210px; pointer-events:none;
  opacity:.92;
  /* 🔴 **המסכה הייתה הפוכה.** `#000 10% → transparent 94%` פירושו
     אטום **למעלה** ונמוג למטה — כלומר התמונה חזקה בדיוק היכן
     שיושבת לשונית "הגדרות עסק", והיא נבלעה. התמונה צריכה
     להופיע **כלפי מטה**, אל הרצפה, ולהיעלם היכן שיש טקסט. */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 62%);
          mask-image:linear-gradient(to bottom, transparent 0%, #000 62%) }
.u-nav__brand{ display:flex; align-items:center; gap:10px; padding:2px 7px 16px; position:relative; z-index:1 }
.u-nav__brand img{ width:38px; height:38px; border-radius:11px; object-fit:cover; flex:none;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--u-brand) 35%, transparent), 0 4px 14px rgba(0,0,0,.5) }
.u-nav__brand b{ display:block; font-size:15px; font-weight:800; color:#fff; line-height:1.15 }
.u-nav__brand small{ font-size:10px; font-weight:500; opacity:.62 }
.u-nav a{ display:flex; align-items:center; gap:10px; padding:8px 11px; border-radius:var(--u-r-sm);
  color:inherit; text-decoration:none; font-size:13px; font-weight:500; position:relative; z-index:1;
  transition:background var(--u-t-fast) var(--u-ease), color var(--u-t-fast) var(--u-ease) }
.u-nav a:hover{ background:rgba(255,255,255,.06); color:#fff }
.u-nav a.is-on{ color:var(--u-brand-2, var(--u-brand)); font-weight:700;
  background:linear-gradient(135deg, color-mix(in srgb, var(--u-brand) 24%, transparent),
                                     color-mix(in srgb, var(--u-brand) 8%, transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--u-brand) 34%, transparent) }
.u-nav__n{ margin-inline-start:auto; font-size:10px; font-weight:800; border-radius:var(--u-r-pill);
  padding:1px 7px; background:var(--u-danger); color:#fff }

/* ── 11 · חלונית ────────────────────────────────────────────────── */
.u-modal{ position:fixed; inset:0; z-index:90; display:none;
  align-items:center; justify-content:center; background:rgba(14,14,17,.55); padding:var(--u-4) }
.u-modal.is-open{ display:flex; animation:u-fade var(--u-t) var(--u-ease) }
.u-modal__card{ background:var(--u-panel); border-radius:var(--u-r-lg); box-shadow:var(--u-sh-lg);
  width:min(720px,94vw); max-height:92dvh; display:flex; flex-direction:column;
  /* 🔴 **ריפוד תחתון 0** — שורת כפתורים עם שוליים שליליים בתחתית
     גורמת ל-flex לספור אותה קטנה ב-26px, ואזור הגלילה נמתח מתחתיה.
     באג שחתך 16px מתחתית 77 חלוניות. */
  padding:20px 22px 0; animation:u-pop var(--u-t-slow) var(--u-ease) }
.u-modal__h{ display:flex; align-items:center; gap:var(--u-3); padding-bottom:var(--u-3) }
.u-modal__b{ overflow:auto; flex:1; min-height:0; padding-bottom:var(--u-4) }
.u-modal__f{ display:flex; gap:var(--u-2); justify-content:flex-end; align-items:center;
  margin:0 -22px; padding:12px 22px; border-top:1px solid var(--u-line);
  background:var(--u-panel); margin-bottom:0 }

@keyframes u-fade{ from{opacity:0} }
/* ⚠ **לעולם לא `scale(0)`** — מתחילים מ-0.95, אחרת זה מופיע משום מקום */
@keyframes u-pop{ from{ opacity:0; transform:scale(.95) translateY(6px) } }

/* ── 12 · עזרי פריסה ────────────────────────────────────────────── */
.u-row{ display:flex; align-items:center; gap:var(--u-2); flex-wrap:wrap }
.u-grid{ display:grid; gap:var(--u-3) }
.u-grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
.u-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.u-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (max-width:1100px){ .u-grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:760px){ .u-grid--4,.u-grid--3,.u-grid--2{ grid-template-columns:minmax(0,1fr) } }

/* ── 13 · נגישות ────────────────────────────────────────────────── */
/* 🔴 **מכובד, לא מוצהר.** מי שביקש פחות תנועה מקבל פחות תנועה. */
@media (prefers-reduced-motion:reduce){
  .u *, .u *::before, .u *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important }
}
.u-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0 }

/* ════════════════════════════════════════════════════════════════
 * 14 · שכבת היישום — סרגל עליון, רצועת מצב, גרפים, פעולות
 * ────────────────────────────────────────────────────────────────
 * 🔴 **רקע הבמה הוא הלוגו של העסק עצמו.** ארבעת הלוגואים הם
 *    צילומי במה — זהב ל-BPM, נאון לאופק, כחול לטל ולמשה. טשטוש
 *    וכהות הופכים אותם למרקם, ולכן **אין נכס חדש**, ועסק חמישי
 *    מקבל רקע משלו ביום שהוא מעלה לוגו. תמונה גנרית של במה
 *    הייתה נראית אותו דבר בארבעתן, וזה בדיוק ההפך מהבקשה.
 * ════════════════════════════════════════════════════════════ */

/* ── סרגל עליון ────────────────────────────────────────────────── */
.u-top{ position:relative; display:flex; align-items:center; gap:var(--u-3);
  padding:11px 20px; background:var(--u-brand-dark); color:#fff; overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.08) }
/* ════════════════════════════════════════════════════════════
 * 🔴 **אור במה, לא תמונה.** הניסיון הקודם שם את הלוגו עצמו ברקע,
 * והתוצאה הייתה "אי אפשר להבין מה יש שם" (אלעד) — כדי להסתיר את
 * שם העסק שבמרכז הלוגו היה צריך לטשטש עד שלא נשאר כלום. כאן
 * הרקע **בנוי**: אלומות מספוטים, ערפל, והחזר מהרצפה.
 *   · אין נכס לתחזק, ואין תלות בתמונה שמישהו צריך להכין.
 *   · חד בכל רזולוציה, ושוקל אפס.
 *   · **עסק חמישי מקבל אור משלו מהטוקנים שלו** — בדיוק הכלל של
 *     "עסק חדש לא יורש כלום".
 * ⚠ אלומה היא `conic-gradient` שמרכזו **מעל** האלמנט: משם הקרניים
 * יוצאות כלפי מטה ומתרחבות, כמו ספוט אמיתי.
 * ════════════════════════════════════════════════════════ */
.u-stage{
  --s1:var(--u-brand);
  --s2:var(--u-brand-2, var(--u-brand));
  --s3:var(--u-brand-3, var(--u-brand-2, var(--u-brand)));
  /* האלומות הבנויות — ברירת המחדל, ו**הנפילה** של כל עסק שאין
     לו תמונה. מוגדרות כטוקן אחד כדי ש-`--u-bg-img` יוכל לדרוס
     אותן בלי לשכפל שום שורה. */
  --u-beams:
    radial-gradient(140% 95% at 50% 118%,
      color-mix(in srgb, var(--s1) 44%, transparent), transparent 72%),
    conic-gradient(from 186deg at 18% -46%, transparent 0 3.2deg,
      color-mix(in srgb, var(--s2) 62%, transparent) 3.2deg 6.4deg, transparent 6.4deg),
    conic-gradient(from 177deg at 39% -54%, transparent 0 2.4deg,
      color-mix(in srgb, var(--s1) 70%, transparent) 2.4deg 5.6deg, transparent 5.6deg),
    conic-gradient(from 172deg at 63% -50%, transparent 0 2.8deg,
      color-mix(in srgb, var(--s3) 58%, transparent) 2.8deg 6deg, transparent 6deg),
    conic-gradient(from 165deg at 86% -44%, transparent 0 3deg,
      color-mix(in srgb, var(--s2) 52%, transparent) 3deg 6.6deg, transparent 6.6deg),
    radial-gradient(46px 28px at 18% -4%, color-mix(in srgb, var(--s2) 85%, transparent), transparent 70%),
    radial-gradient(46px 28px at 39% -4%, color-mix(in srgb, var(--s1) 90%, transparent), transparent 70%),
    radial-gradient(46px 28px at 63% -4%, color-mix(in srgb, var(--s3) 80%, transparent), transparent 70%),
    radial-gradient(46px 28px at 86% -4%, color-mix(in srgb, var(--s2) 75%, transparent), transparent 70%);
  background-color:var(--u-brand-dark);
  /* 🔴 **תמונה אם יש, אור בנוי אם אין.** `--u-bg-img` מוגדר רק
     לעסק שהעלה רקע; השאר נופלים לאלומות, ולכן **עסק חדש לעולם
     אינו נשאר עם משטח שחור ריק** — אותו כלל של "עסק חדש לא
     יורש כלום, אבל גם לא נשאר בלי". */
  background-image:var(--u-bg-img, var(--u-beams));
  background-size:cover; background-position:center 32%;
}
/* ── רקע לעסק — שורה אחת לכל אחד. חסר = אלומות. ──────────────
 * ⚠ **הלוגו צרוב בפינה השמאלית־עליונה של התמונה.** המסד הוא
 * רצועה רחבה ונמוכה, ו-`cover` עליה חותך **פס אופקי**; פס מהחלק
 * העליון היה מביא את הלוגו הצרוב אל מתחת לכפתורי הפעולה — שני
 * לוגואים על אותו מסך. `78%` הוא הגובה של סרט האור והחזר הרצפה,
 * שם אין טקסט ואין סימן — וזה גם החלק היפה בתמונה. */
[data-brand="bpm"]  { --u-bg-img:url('stage-bpm.jpg') }
[data-brand="ofek"] { --u-bg-img:url('stage-ofek.jpg') }
/* 🔴 **`.u-mast .u-stage` הוא סלקטור צאצא** — וה-header עצמו
   נושא את שתי המחלקות (`class="u-mast u-stage"`). הכלל מעולם
   לא חל, המיקום נשאר 32%, ו**הלוגו הצרוב של אופק הופיע בראש
   המסד** מעל האווטאר. נקודה בלי רווח = אותו אלמנט. */
.u-mast.u-stage{ background-position:center 78% }
/* ⚠ **ברקע החדש של BPM אין לוגו צרוב**, ולכן הרצועה אינה חייבת
   לברוח מטה — 26% מביא את הספוטים, הטראס וסרט האור, שהם החלק
   החזק בתמונה. המיקום הוא תכונה של התמונה, לא של המערכת. */
[data-brand="bpm"] .u-mast.u-stage{ background-position:center 26% }
/* ⚠ **בסרגל אין עודף אנכי** (הרצועה בדיוק בגובה התמונה לאחר
   `cover`), ולכן רק המיקום האופקי קובע — והלוגו יושב בשמאל.
   `82%` מביא את מערך הרמקולים ואת הסרט, בלי שום כיתוב. */
.u-nav__ph{ background-position:82% 100% }

.u-top__bg{ position:absolute; inset:0; pointer-events:none }
/* ⚠ **השכבה הזאת רק מגינה על הטקסט.** קודם היא חנקה את האור
   ולכן לא נראה כלום; עכשיו היא כהה בקצוות — שם יושבות האותיות —
   ופתוחה באמצע, שם אין טקסט. */
.u-top::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to left,
    color-mix(in srgb, var(--u-brand-dark) 74%, transparent),
    color-mix(in srgb, var(--u-brand-dark) 14%, transparent) 36%,
    color-mix(in srgb, var(--u-brand-dark) 14%, transparent) 66%,
    color-mix(in srgb, var(--u-brand-dark) 78%, transparent)) }
/* 🔴 **`> *` תפס גם את שכבת הרקע.** הכלל נועד להרים את התוכן מעל
   השכבה הכהה, ובדרך הפך את `.u-top__bg` מ-`absolute` לפריט flex
   ריק — **0×0**, ולכן תמונת הבמה לא נראתה בכלל. נמדד, לא הוערך:
   התמונה נטענה (192×192) כל הזמן, פשוט לא היה לה גודל. */
.u-top > *:not(.u-top__bg){ position:relative; z-index:1 }
/* 🔴 **פקד בלבן שקוף מתבהר דווקא במקום הבהיר.** על אלומת אור
   או על סרט נאון, `rgba(255,255,255,.09)` מוסיף לבן ללבן והטקסט
   נבלע. בסיס **שחור שקוף** עושה את ההפך: הוא מכהה את מה שמתחתיו,
   ולכן נקרא גם על אור וגם על חושך. הגבול נשאר לבן. */
.u-top__co{ display:flex; align-items:center; gap:9px; background:rgba(8,8,10,.34);
  border:1px solid rgba(255,255,255,.16); border-radius:var(--u-r-pill); padding:5px 13px 5px 9px;
  cursor:pointer; transition:background var(--u-t) var(--u-ease) }
.u-top__co:hover{ background:rgba(8,8,10,.5) }
.u-top__co img{ width:26px; height:26px; border-radius:8px; object-fit:cover; flex:none }
.u-top__co b{ font-size:13.5px; font-weight:700 }
.u-top__co .u-ic{ opacity:.6 }
.u-top__t{ font-size:11px; font-weight:600; opacity:.62 }

.u-search{ flex:1; max-width:380px; display:flex; align-items:center; gap:8px;
  background:rgba(8,8,10,.34); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--u-r-pill); padding:0 13px; height:36px; cursor:text;
  transition:background var(--u-t) var(--u-ease), border-color var(--u-t) var(--u-ease) }
.u-search:hover{ background:rgba(8,8,10,.5) }
.u-search input{ flex:1; min-width:0; background:none; border:0; outline:none; color:#fff;
  font:inherit; font-size:13px }
.u-search input::placeholder{ color:rgba(255,255,255,.62) }
.u-search kbd{ font:inherit; font-size:10.5px; font-weight:700; opacity:.6; letter-spacing:.5px;
  border:1px solid rgba(255,255,255,.22); border-radius:6px; padding:1px 6px }
.u-ibtn{ position:relative; width:34px; height:34px; display:grid; place-items:center;
  border-radius:var(--u-r-sm); border:1px solid rgba(255,255,255,.12); background:rgba(8,8,10,.34);
  color:#fff; cursor:pointer; transition:background var(--u-t) var(--u-ease) }
.u-ibtn:hover{ background:rgba(8,8,10,.52) }
.u-ibtn .u-dot{ position:absolute; top:5px; inset-inline-end:5px; width:7px; height:7px;
  border-radius:50%; background:var(--u-danger); box-shadow:0 0 0 2px var(--u-brand-dark) }
/* 🔴 **סימן מותג אינו אווטאר.** "אש" בעיגול היה ראשי תיבות
   מומצאים; הסימן של א.ש הוא **רחב** (יחס 1.5), ועיגול היה חותך
   לו את הצדדים או מקטין אותו עד שלא נקרא. מסגרת מלבנית היא מה
   שסימן כזה דורש, והיא גם מבדילה אותו מתמונת פרופיל. */
.u-ava{ height:34px; padding:0 11px; border-radius:var(--u-r-sm);
  display:grid; place-items:center; flex:none;
  background:rgba(8,8,10,.46); border:1px solid rgba(255,255,255,.16);
  cursor:pointer; transition:background var(--u-t-fast) var(--u-ease) }
.u-ava:hover{ background:rgba(8,8,10,.66) }
.u-ava img{ height:24px; width:auto; display:block; object-fit:contain }

/* ── רצועת מצב וסינון ─────────────────────────────────────────── */
.u-strip{ display:flex; align-items:center; gap:var(--u-2); flex-wrap:wrap;
  padding:10px 20px; background:var(--u-panel); border-bottom:1px solid var(--u-line) }
.u-sel{ display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 11px;
  border:1px solid var(--u-line); border-radius:var(--u-r-sm); background:var(--u-panel);
  font-size:12px; font-weight:600; color:var(--u-ink); cursor:pointer }
.u-sel:hover{ background:var(--u-panel-2) }
.u-sel .u-ic{ color:var(--u-muted) }

/* ── כותרת דף ─────────────────────────────────────────────────── */
.u-head{ display:flex; align-items:flex-end; gap:11px; padding:14px 20px 0 }
.u-head__ic{ width:34px; height:34px; border-radius:var(--u-r-sm); display:grid; place-items:center;
  background:var(--u-brand-tint); color:var(--u-brand-ink); flex:none;
  border:1px solid color-mix(in srgb, var(--u-brand) 20%, transparent) }
.u-head h1{ margin:0; font-size:24px; font-weight:800; letter-spacing:-.8px; line-height:1 }
.u-head p{ margin:4px 0 0; font-size:12px; color:var(--u-muted); font-weight:500 }

/* ── KPI עם ספארקליין ─────────────────────────────────────────── */
.u-kpi__sp{ position:absolute; inset:auto 0 0 0; height:44px; color:var(--u-brand);
  opacity:.9; pointer-events:none }
.u-kpi--lead .u-kpi__sp{ color:var(--u-brand-2, var(--u-brand)); opacity:.75 }
.u-spark{ width:100%; height:100%; display:block }

/* ── גרפים ────────────────────────────────────────────────────── */
/* 🔴 **הגרף ממלא את הקופסה.** `height:auto` גזר את הגובה מיחס
   ה-viewBox, ולכן בכרטיס של 256px הוא צויר ב-75px. הקופסה
   קובעת, ו-`ui.fit` מצייר ב-viewBox שווה לפיקסלים. */
.u-chart{ width:100%; height:100%; display:block; font-family:var(--u-font) }
/* הקופסה שתופסת את כל מה שנשאר בכרטיס, מתחת למקרא */
.u-card--chart .u-card__b{ display:flex; flex-direction:column; gap:4px }
.u-fitbox{ flex:1; min-height:90px }
.u-fitbox--row{ display:flex; align-items:center; gap:14px; flex-wrap:nowrap }
.u-chart__grid line{ stroke:var(--u-line); stroke-width:1 }
.u-chart__y text{ fill:var(--u-faint); font-size:9.5px; font-weight:600 }
.u-chart__x text{ fill:var(--u-muted); font-size:9.5px; font-weight:600 }
/* 🔴 **גודל קשיח ב-CSS מבטל אפשרות של הרכיב.** `.u-donut` היה
   `150px` קבוע, ולכן `ui.donut({size})` לא עשה דבר — הדונאט
   נשאר 150 וקבע לבדו את גובה השורה גם במצב הצפוף. המידה מגיעה
   מהרכיב, וה-CSS רק מונע ממנו להימתח. */
.u-donut{ flex:none; font-family:var(--u-font) }
.u-donut__v{ fill:var(--u-ink); font-size:19px; font-weight:800; letter-spacing:-.6px }
.u-donut__t{ fill:var(--u-muted); font-size:9.5px; font-weight:600 }
.u-leg{ display:flex; flex-direction:column; gap:7px; flex:1; min-width:0 }
.u-leg__r{ display:flex; align-items:center; gap:7px; font-size:12px }
.u-leg__r i{ width:9px; height:9px; border-radius:3px; flex:none }
.u-leg__r b{ margin-inline-start:auto; font-weight:700 }
.u-legend{ display:flex; gap:var(--u-3); align-items:center }
.u-legend span{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px;
  font-weight:600; color:var(--u-muted) }
.u-legend i{ width:8px; height:8px; border-radius:50% }

/* ── שורת אירוע עם תמונת אולם ─────────────────────────────────── */
.u-evr{ display:flex; align-items:center; gap:10px; padding:7px 0;
  border-bottom:1px solid var(--u-line-soft) }
.u-evr:last-child{ border-bottom:0 }
.u-evr__img{ width:62px; height:44px; border-radius:var(--u-r-sm); object-fit:cover; flex:none;
  background:var(--u-panel-2); border:1px solid var(--u-line) }
/* ⚠ **לוגו אינו תמונת אולם.** `cover` מותח אותו וחותך את הקצוות, ולכן
   הוא `contain` עם אוויר סביבו — עד שתמונת גוגל מחליפה אותו. */
.u-evr__img--logo{ object-fit:contain; padding:3px }
.u-evr__d{ text-align:center; width:34px; flex:none }
.u-evr__d b{ display:block; font-size:16px; font-weight:800; line-height:1 }
.u-evr__d small{ font-size:9.5px; font-weight:700; color:var(--u-muted) }
.u-evr__t{ flex:1; min-width:0 }
.u-evr__t b{ display:block; font-size:13px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.u-evr__t small{ display:flex; align-items:center; gap:4px; font-size:11px; color:var(--u-muted) }

/* ── טבלה: בחירה ותפריט שורה ──────────────────────────────────── */
.u-ck{ width:15px; height:15px; border-radius:4px; border:1.5px solid var(--u-line);
  background:var(--u-panel); display:inline-block; vertical-align:-2px; cursor:pointer }
.u-more{ width:26px; height:22px; border-radius:7px; border:1px solid var(--u-line);
  background:var(--u-panel); color:var(--u-muted); cursor:pointer; font-size:11px;
  letter-spacing:1px; line-height:1; padding:0 }
.u-more:hover{ background:var(--u-panel-2); color:var(--u-ink) }

/* ── קיצורי דרך ───────────────────────────────────────────────── */
.u-acts{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--u-2) }
.u-act{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  padding:13px 6px; border-radius:var(--u-r-md); border:1px solid var(--u-line);
  background:var(--u-panel); font-size:11.5px; font-weight:700; color:var(--u-ink);
  cursor:pointer; text-align:center;
  transition:border-color var(--u-t) var(--u-ease), transform var(--u-t) var(--u-ease) }
.u-act:hover{ border-color:color-mix(in srgb, var(--u-brand) 42%, transparent) }
.u-act:active{ transform:scale(.97) }
.u-act .u-ic{ color:var(--u-brand-ink) }
.u-act--go{ background:var(--u-brand-dark); border-color:var(--u-brand-dark); color:#fff }
.u-act--go .u-ic{ color:var(--u-brand-2, var(--u-brand)) }

/* ── יומן פעילות ──────────────────────────────────────────────── */
.u-log{ display:flex; align-items:center; gap:9px; padding:4px 0; font-size:12.5px;
  border-bottom:1px solid var(--u-line-soft) }
.u-log:last-child{ border-bottom:0 }
.u-log .u-ic{ color:var(--u-muted) }
/* 🔴 **`.u-log span` תפס גם את הצ'יפ.** `ui.chip` מחזיר `<span>`,
   ולכן `flex:1` מתח את התגית "7" לרוחב חצי שורה. סלקטור לפי שם
   אלמנט תופס כל רכיב שמשתמש באותו אלמנט — ולכן מחלקה. */
.u-log b{ font-weight:700 } .u-log .u-log__t{ flex:1; min-width:0 }
.u-log time{ font-size:11px; color:var(--u-faint); font-weight:600 }

/* ── חץ קיפול בכותרת כרטיס ────────────────────────────────────── */
.u-caret{ color:var(--u-faint); cursor:pointer; transition:transform var(--u-t) var(--u-ease) }
.u-caret.is-closed{ transform:rotate(-90deg) }

/* ════════════════════════════════════════════════════════════════
 * 15 · המסד — זהות, מצב וכסף על משטח אחד מואר
 * ────────────────────────────────────────────────────────────────
 * 🔴 **"אני לא רוצה רק רקע, אני ממש רוצה עיצוב"** (אלעד). ורקע
 * אכן אינו עיצוב: הדף היה רשת של כרטיסים לבנים זהים, שכל אחד
 * נראה חשוב בדיוק כמו שכנו — ולכן שום דבר לא נראה חשוב.
 *
 * ההכרעה: **שני עולמות במסך אחד.** מסד כהה ומואר נושא את הזהות,
 * את המצב ואת הכסף; שטח עבודה בהיר נושא את העבודה. זו אינה
 * החלטה גרפית אלא היררכיה — הכסף הוא הדבר היחיד שחי על האור,
 * ולכן הוא מה שהעין תופסת ראשונה. זה גם עולם הלקוח עצמו:
 * קונסולה כהה שמולה במה מוארת.
 *
 * ⚠ **שלוש רצועות כהות־בהירות־כהות היו נראות כמו פסים.** לכן
 * הכל גוש אחד: סרגל, כותרת, מצב וכסף יושבים על אותו משטח.
 * ════════════════════════════════════════════════════════════ */
/* ⚠ **בלי `overflow:hidden`.** הוא נדרש בזמנו לשכבת רקע שחרגה
   מהגבולות (`inset:-55%`); היום הרקע הוא של האלמנט עצמו ונחתך
   ממילא, וההסתרה רק גזרה את התפריט הנפתח של "חשבונית". */
.u-mast{ position:relative; color:#fff;
  border-bottom:1px solid rgba(255,255,255,.09) }
/* ⚠ **אלומה שעוברת מעל סכום היא אלומה שמסתירה אותו.** בספוט
   אמיתי האור חזק ליד הנורה ונבלע למטה; שתי שכבות — אחת לרוחב
   (מגינה על האותיות בקצוות) ואחת לגובה (מכבה את האור מעל שורת
   הכסף) — ולכן המספרים נקראים והאור נשאר. */
.u-mast::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom, transparent 30%,
      color-mix(in srgb, var(--u-brand-dark) 42%, transparent) 66%,
      color-mix(in srgb, var(--u-brand-dark) 58%, transparent)),
    linear-gradient(to left,
      color-mix(in srgb, var(--u-brand-dark) 62%, transparent),
      transparent 32%, transparent 68%,
      color-mix(in srgb, var(--u-brand-dark) 66%, transparent)) }
.u-mast > *{ position:relative; z-index:1 }

/* שורה 1 — זהות וחיפוש */
.u-mast__r1{ display:flex; align-items:center; gap:var(--u-3); padding:11px 20px }
/* שורה 2 — כותרת, מצב ופעולות */
.u-mast__r2{ display:flex; align-items:center; gap:var(--u-3); padding:2px 20px 13px;
  flex-wrap:wrap }
.u-mast__t h1{ margin:0; font-size:23px; font-weight:800; letter-spacing:-.8px; line-height:1.05 }
.u-mast__t p{ margin:3px 0 0; font-size:11.5px; font-weight:500; color:rgba(255,255,255,.55) }

/* תגית מצב על כהה — שקופה עם נקודה צבעונית, לא גלולה צבעונית */
.u-dchip{ display:inline-flex; align-items:center; gap:6px; border-radius:var(--u-r-pill);
  padding:5px 11px; font-size:11.5px; font-weight:600; color:rgba(255,255,255,.88);
  background:rgba(8,8,10,.38); border:1px solid rgba(255,255,255,.14); white-space:nowrap }
.u-dchip i{ width:7px; height:7px; border-radius:50%; flex:none }
.u-dchip b{ font-weight:800; color:#fff }

/* כפתור על כהה */
.u-dbtn{ display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 13px;
  border-radius:var(--u-r-sm); font:inherit; font-size:12px; font-weight:700; cursor:pointer;
  background:rgba(8,8,10,.38); border:1px solid rgba(255,255,255,.16); color:#fff;
  transition:background var(--u-t-fast) var(--u-ease), transform var(--u-t-fast) var(--u-ease) }
.u-dbtn:hover{ background:rgba(8,8,10,.56) }
.u-dbtn:active{ transform:scale(.97) }
.u-dbtn--go{ background:var(--u-brand); border-color:transparent; color:#fff;
  box-shadow:0 6px 18px color-mix(in srgb, var(--u-brand) 40%, transparent) }
.u-dbtn--go:hover{ background:color-mix(in srgb, var(--u-brand) 86%, #fff) }

/* ── הכסף — שלושה מספרים על קו אחד ────────────────────────────
 * ⚠ **קו מפריד, לא כרטיס.** שלושה כרטיסים היו שלושה אובייקטים
 * נפרדים; קו שיער אחד אומר "אותו דבר, שלושה חתכים". */
.u-money{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid rgba(255,255,255,.1) }
.u-money__c{ position:relative; padding:13px 20px 15px; overflow:hidden }
.u-money__c + .u-money__c{ border-inline-start:1px solid rgba(255,255,255,.1) }
.u-money__k{ display:flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:600; color:rgba(255,255,255,.58) }
.u-money__k .u-ic{ width:15px; height:15px; opacity:.75 }
/* 🔴 **`direction:ltr` הופך גם את היישור.** `text-align:start`
   בתוך קטע LTR פירושו **שמאל**, ולכן ₪947,348 נדבק לקצה השמאלי
   של תא שכל השאר בו מיושר לימין. הסכום צריך להיות LTR (כדי
   שהפסיקים והנקודה יישבו נכון) ו**מיושר לימין**. */
.u-money__v{ font-size:30px; font-weight:800; letter-spacing:-1.2px; line-height:1.08;
  margin:4px 0 0; direction:ltr; text-align:right }
/* **המוביל בצבע המותג — אחד בלבד.** שלושה מודגשים הם אפס מודגשים. */
.u-money__c--lead .u-money__v{ color:var(--u-brand-2, var(--u-brand)) }
.u-money__d{ display:inline-flex; align-items:center; gap:4px; margin-top:6px;
  font-size:11px; font-weight:800; border-radius:var(--u-r-pill); padding:3px 9px; direction:ltr }
.u-money__d--up{ background:color-mix(in srgb, var(--u-ok) 30%, transparent); color:#8FE6C4 }
.u-money__d--down{ background:color-mix(in srgb, var(--u-danger) 32%, transparent); color:#FFB3C1 }
.u-money__n{ font-size:11px; color:rgba(255,255,255,.46); margin-inline-start:8px; font-weight:500 }
.u-money__sp{ position:absolute; inset:auto 0 0 0; height:40px; opacity:.42;
  color:var(--u-brand-2, var(--u-brand)); pointer-events:none }

/* ⚠ **שטח העבודה אינו אפור ניטרלי** — גוון חמים/קר מהמותג, כדי
   ששני העולמות יהיו אותו עולם ולא שני אתרים שהודבקו. */
.u-work{ background:
  linear-gradient(to bottom, color-mix(in srgb, var(--u-brand) 6%, var(--u-surface)),
                             var(--u-surface) 180px) }

/* ── 16 · תפריט נפתח על כפתור ─────────────────────────────────────
 * ⚠ **התפריט בהיר גם כשהכפתור כהה.** הוא אינו חלק מהמסד אלא
 * שכבה מעליו, ולכן הוא לובש את החומר של שטח העבודה — אותו
 * כרטיס לבן שהמשתמש מכיר מכל שאר המסך. */
.u-dd{ position:relative; display:inline-flex }
.u-menu{ position:absolute; top:calc(100% + 7px); inset-inline-start:0; z-index:40;
  min-width:190px; padding:5px; display:none; flex-direction:column;
  background:var(--u-panel); border:1px solid var(--u-line); border-radius:var(--u-r-md);
  box-shadow:var(--u-sh-md) }
.u-dd.is-open .u-menu{ display:flex; animation:u-pop var(--u-t) var(--u-ease) }
.u-menu button{ display:flex; align-items:center; gap:9px; width:100%;
  padding:8px 10px; border:0; border-radius:var(--u-r-sm); background:transparent;
  font:inherit; font-size:12.5px; font-weight:600; color:var(--u-ink);
  text-align:start; cursor:pointer; white-space:nowrap }
.u-menu button:hover{ background:var(--u-brand-tint); color:var(--u-brand-ink) }
.u-menu button .u-ic{ color:var(--u-muted) }
.u-menu button:hover .u-ic{ color:var(--u-brand-ink) }
.u-menu hr{ border:0; border-top:1px solid var(--u-line-soft); margin:4px 6px }

/* ════════════════════════════════════════════════════════════════
 * 17 · פלאפון — אותו מסך, לא מסך אחר
 * ────────────────────────────────────────────────────────────────
 * 🔴 **"אני צריך לעבוד מהפלאפון"** (אלעד). לא לקרוא — לעבוד.
 * ולכן אין כאן "גרסה מוקטנת": אותם 14 גושים, אותם נתונים, אותן
 * פעולות — בסדר אחר ובמידות אחרות.
 * ⚠ מה שנשמר מהמערכת הקיימת: **ההכנסה מקבלת שורה שלמה והשאר 2
 * בשורה** (תא KPI הוא `min-width:auto` ולכן ₪5,135,602.82 נחתך
 * בקצה), **טבלה רחבה הופכת לכרטיסים**, ו**סרגל תחתון** במקום
 * שורת לשוניות ברוחב 1900px שרואים ממנה חמש.
 * ════════════════════════════════════════════════════════════ */
@media (max-width:760px){
  /* ── המסד ─────────────────────────────────────────────────── */
  /* 🔴 **שורת הזהות נשברה לשתי שורות** והאייקונים טיפסו זה על
     זה. בפלאפון נשארים שלושה דברים: מי אני, התראות, ומי המערכת.
     "פעולות מהירות" ו"עזרה" חיים בתפריט, לא בשורה של 360px. */
  /* ⚠ במסך צר האלומות עוברות ממש מעל הסכומים — השכבה מתהדקת. */
  .u-mast::after{ background:
    linear-gradient(to bottom, transparent 14%,
      color-mix(in srgb, var(--u-brand-dark) 62%, transparent) 46%,
      color-mix(in srgb, var(--u-brand-dark) 76%, transparent)) }
  .u-mast__r1{ padding:9px 14px; gap:8px; flex-wrap:nowrap }
  .u-mast__r1 > div[style*="flex:1"]{ display:none }
  .u-top__co{ flex:1 }
  #topBtns .u-ibtn:not(:last-child){ display:none }
  .u-mast__r2{ padding:0 14px 11px; gap:9px; flex-wrap:nowrap }
  /* ⚠ **"דף הבית" נשבר לשתי שורות** כי `min-width:0` התיר לו
     להצטמצם עד לשבירה. הכותרת קצרה וקבועה — היא אינה מה שצריך
     לוותר; הכפתורים שלידה הם שנגללים. */
  .u-mast__t{ flex:none; min-width:auto }
  .u-mast__t h1{ font-size:19px; white-space:nowrap } .u-mast__t p{ display:none }
  .u-search{ display:none }          /* החיפוש עולה מהסרגל התחתון */
  .u-top__co{ padding:4px 10px 4px 7px; min-width:0 }
  .u-top__co b{ font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .u-top__co .u-top__t{ display:none }
  .u-top__co img{ width:24px; height:24px }

  /* ⚠ **קיצורי הדרך נגללים אופקית, ולא נדחסים.** ארבעה כפתורים
     ברוחב 360px היו נחתכים — וכפתור שאי אפשר ללחוץ עליו אינו
     קיים. הגלילה מסומנת בכך שהרביעי מציץ. */
  /* 🔴 **`min-width:0` — בלעדיו הגלילה לא מצילה כלום.** לילד flex
     יש `min-width:auto`, כלומר **רוחב התוכן**; ארבעת הכפתורים
     דחפו את המסד כולו ל-477px במסך של 400, והעמוד גלל אופקית.
     `overflow-x:auto` אינו מצמצם — הוא רק גולל את מה שכבר צר. */
  .u-mast__r1, .u-mast__r2{ min-width:0 }
  .u-mast__t, #topBtns{ min-width:0 }
  .u-mast__r2 > .u-row{ min-width:0; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; margin-inline-end:-14px; padding-inline-end:14px }
  .u-mast__r2 > .u-row::-webkit-scrollbar{ display:none }
  .u-dbtn{ flex:none }

  /* ── הכסף: ההכנסה שורה שלמה, השאר שניים ─────────────────── */
  .u-money{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .u-money__c{ padding:10px 14px 12px; min-width:0 }
  .u-money__c--lead{ grid-column:1/-1 }
  .u-money__c:nth-child(2){ border-inline-start:0 }
  .u-money__c:nth-child(3){ border-inline-start:1px solid rgba(255,255,255,.1) }
  .u-money__c:nth-child(n+2){ border-top:1px solid rgba(255,255,255,.1) }
  /* 🔴 **₪5,135,602.82 נחתך.** 13 תווים ב-21px הם ~150px בתא של
     ~172px נטו — ועם `direction:ltr; text-align:right` העודף גולש
     **שמאלה**, אל מחוץ למסך, בלי סימן. הגודל נגזר מהמספר הארוך
     ביותר שיכול להופיע, לא מהמספר שבדקתי. */
  .u-money__v{ font-size:18px; letter-spacing:-.5px; overflow:hidden }
  .u-money__c--lead .u-money__v{ font-size:26px; letter-spacing:-.9px }
  .u-money__n{ display:none }

  /* ── שטח העבודה ──────────────────────────────────────────── */
  /* ⚠ **בפלאפון אין "שורה עליונה שלוקחת את הנותר".** הכלל הזה
     נכון למסך רחב; כאן הכל עמודה אחת, וכרטיס בגובה קבוע היה
     חותך את ההתראות באמצע. השורות לפי תוכן, והרשת גוללת. */
  .grid{ padding:10px 14px 78px !important; gap:10px !important;
    /* 🔴 **`auto` אינו "לפי תוכן" במכולה בגובה קבוע** — שלוש
       השורות התחלקו שווה ל-218px כל אחת, וההתראות נחתכו באמצע.
       `min-content` הוא מה שמונע את זה. אותה מלכודת שכבר נתפסה
       במסך הרחב; כאן היא חזרה כי הכלל נכתב מחדש. */
    grid-template-rows:none !important; grid-auto-rows:min-content !important;
    align-content:start }
  .grid .u-card, .grid .u-card__b{ overflow:visible }
  .u-card__h{ padding:11px 13px 7px } .u-card__b{ padding:0 13px 11px }

  /* 🔴 **טבלה רחבה הופכת לכרטיסים.** 7 עמודות ברוחב 360px הן
     6 עמודות מחוץ למסך — וזה נראה כמו תצוגה תקינה, לא כמו באג. */
  .u-table--cards thead{ display:none }
  .u-table--cards, .u-table--cards tbody, .u-table--cards tr, .u-table--cards td{ display:block; width:auto }
  .u-table--cards tr{ border:1px solid var(--u-line); border-radius:var(--u-r-md);
    padding:9px 11px; margin-bottom:8px; background:var(--u-panel) }
  .u-table--cards tr.u-row--danger{ border-color:var(--u-danger-line) }
  .u-table--cards tr.u-row--danger td:first-child{ border:0 }
  .u-table--cards td{ height:auto !important; padding:3px 0 !important; border:0 !important;
    /* ⚠ **הכל לימין.** `space-between` היה מעיף כל ערך אל הקצה
       הנגדי, וכל שורה הייתה מתחילה במקום אחר בדף שכולו עברית. */
    display:flex; justify-content:flex-start; align-items:center; gap:8px }
  .u-table--cards td::before{ content:attr(data-label); flex:none; width:74px;
    font-size:11px; font-weight:700; color:var(--u-muted) }
  /* ⚠ עמודת הערך צריכה להיות מסוגלת לעטוף — אחרת שם לקוח ארוך
     דוחף את הכרטיס החוצה במקום לרדת שורה. */
  .u-table--cards td > *, .u-table--cards td{ min-width:0 }
  /* ⚠ תא בלי `data-label` מופיע בכרטיס **בלי שם** — לכן אלה
     מוסתרים במפורש ולא נשארים כשורה ריקה. */
  /* 🔴 **`td:first-child` אינו "תיבת הסימון".** בטבלת החשבוניות
     הוא כן, ובטבלת ההצעות הוא **שם הלקוח** — והכלל הזה מחק אותו
     מהכרטיס. מה שקובע הוא **תווית ריקה**, שזו ממילא ההגדרה של
     "עמודה בלי כותרת". */
  .u-table--cards td[data-label=""]{ display:none }

  /* ── הגרפים ──────────────────────────────────────────────── */
  .u-fitbox{ min-height:150px }
  .u-fitbox--row{ flex-wrap:wrap; justify-content:center }

  /* ── סרגל תחתון ──────────────────────────────────────────── */
  .u-tabbar{ position:fixed; inset:auto 0 0 0; z-index:50;
    display:grid; grid-template-columns:repeat(5,1fr); align-items:center;
    background:var(--u-panel); border-top:1px solid var(--u-line);
    padding-bottom:env(safe-area-inset-bottom, 0px);
    box-shadow:0 -6px 20px rgba(22,23,27,.07) }
  .u-tabbar a{ display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:8px 2px 9px; color:var(--u-muted); text-decoration:none;
    font-size:10px; font-weight:700 }
  .u-tabbar a.is-on{ color:var(--u-brand-ink) }
  .u-tabbar a.is-on .u-ic{ color:var(--u-brand-ink) }
  /* ה-"+" הוא פעולה, לא לשונית — ולכן הוא נראה אחרת */
  .u-tabbar .u-tabbar__go{ width:44px; height:44px; border-radius:50%; justify-self:center;
    background:var(--u-brand-dark); color:#fff; display:grid; place-items:center;
    padding:0; margin-top:-14px; box-shadow:0 6px 18px rgba(0,0,0,.28) }
  .u-tabbar .u-tabbar__go .u-ic{ color:var(--u-brand-2, var(--u-brand)); width:22px; height:22px }
}
@media (min-width:761px){ .u-tabbar{ display:none } }

/* ── כרטיס התראה — המסך של המנהלים ───────────────────────────────
 * ⚠ **מספר, מה, ולמה אכפת.** מונה לבדו הוא מספר שמישהו צריך
 * לשאול עליו; השורה השנייה היא ההבדל בין "5" לבין "עד שלא תאשר,
 * לא יוצא זימון ואין קישור ללקוח". */
.u-alert{ display:flex; align-items:center; gap:11px; padding:9px 0;
  border-bottom:1px solid var(--u-line-soft); cursor:pointer }
.u-alert:last-child{ border-bottom:0 }
.u-alert__n{ width:32px; height:32px; border-radius:var(--u-r-sm); flex:none;
  display:grid; place-items:center; font-size:14px; font-weight:800; font-variant-numeric:tabular-nums }
.u-alert__t{ flex:1; min-width:0 }
.u-alert__t b{ display:block; font-size:13.5px; font-weight:700 }
.u-alert__t small{ display:block; font-size:11.5px; color:var(--u-muted); line-height:1.35 }
.u-alert .u-ic{ color:var(--u-faint); flex:none }
.u-alert--danger .u-alert__n{ background:var(--u-danger-bg); color:var(--u-danger) }
.u-alert--warn   .u-alert__n{ background:var(--u-warn-bg);   color:var(--u-warn) }
.u-alert--info   .u-alert__n{ background:var(--u-info-bg);   color:var(--u-info) }

/* בורר התפקיד — כלי תצוגה בלבד, אינו חלק מהמוצר */
.roleswitch{ position:fixed; inset:auto auto 14px 14px; z-index:60; display:flex; gap:3px;
  background:rgba(16,16,19,.9); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--u-r-pill); padding:3px; backdrop-filter:blur(8px) }
.roleswitch button{ border:0; background:transparent; color:rgba(255,255,255,.62);
  font:inherit; font-size:11.5px; font-weight:700; padding:6px 12px;
  border-radius:var(--u-r-pill); cursor:pointer }
.roleswitch button[aria-pressed="true"]{ background:#fff; color:#16171B }
@media (max-width:760px){ .roleswitch{ inset:auto 14px 78px 14px; justify-content:center } }