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

:root {
  /* --- משטחים --- */
  --bg:            oklch(0.981 0.003 265);
  --surface:       oklch(1 0 0);
  --surface-2:     oklch(0.974 0.004 265);
  --surface-3:     oklch(0.955 0.005 265);
  --line:          oklch(0.913 0.006 265);
  --line-strong:   oklch(0.861 0.008 265);

  /* --- טקסט --- */
  --text:          oklch(0.235 0.019 266);
  --text-2:        oklch(0.446 0.017 266);
  --muted:         oklch(0.545 0.016 266);

  /* --- מותג וסמנטיקה --- */
  --accent:        oklch(0.523 0.188 265);
  --accent-hover:  oklch(0.463 0.186 265);
  --accent-soft:   oklch(0.955 0.024 265);
  --accent-line:   oklch(0.878 0.055 265);
  --accent-text:   oklch(0.463 0.186 265);

  --up:            oklch(0.545 0.126 163);
  --up-soft:       oklch(0.958 0.032 163);
  --up-line:       oklch(0.885 0.062 163);

  --down:          oklch(0.553 0.192 26);
  --down-soft:     oklch(0.960 0.026 26);
  --down-line:     oklch(0.888 0.055 26);

  --warn:          oklch(0.588 0.132 70);
  --warn-soft:     oklch(0.964 0.038 80);
  --warn-line:     oklch(0.891 0.077 80);

  /* --- גריד הגרפים --- */
  --chart-grid:    oklch(0.922 0.006 265);
  --chart-prior:   oklch(0.855 0.012 265);

  /* סולם עוצמה למפת החום: גוון אחד, חמש מדרגות, בהיר לכהה. הדיו נקבע לכל
     מדרגה בנפרד — טקסט כהה עד המדרגה השלישית ולבן משם, כדי שכל תא יעמוד
     בניגודיות ולא רק רובם. */
  --heat-0:  oklch(0.972 0.002 265);
  --heat-1:  oklch(0.945 0.028 265);
  --heat-2:  oklch(0.878 0.062 265);
  --heat-3:  oklch(0.760 0.115 265);
  --heat-4:  oklch(0.565 0.165 265);
  --heat-5:  oklch(0.430 0.150 265);
  --heat-ink-low:  oklch(0.300 0.060 265);
  --heat-ink-high: #fff;

  /* --- מבנה --- */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 20px;
  --r-xl: 26px;

  /* סולם מרווחים על בסיס 4. כל padding, gap ומרווח במערכת יושב על אחת
     המדרגות האלה — זה מה שמייצר קצב אחיד במקום מספרים שנבחרו לכל רכיב. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;

  /* סולם טיפוגרפי: שבע מדרגות, יחס ~1.15 בקטנות ו-1.3 בגדולות. המדרגות
     הקטנות צפופות כי שם יושבות התוויות, והקפיצה לכותרת ולמספר היא הצהרה. */
  --fs-micro: calc(11px * var(--fs-scale));
  --fs-label: calc(12px * var(--fs-scale));
  --fs-sm: calc(13px * var(--fs-scale));
  --fs-body: calc(14px * var(--fs-scale));
  --fs-h3: calc(15px * var(--fs-scale));
  --fs-h2: calc(18px * var(--fs-scale));
  --fs-h1: calc(24px * var(--fs-scale));
  --fs-display: calc(42px * var(--fs-scale));

  /* מכפיל גודל הטקסט. כל גודל במערכת נכפל בו, ולכן "טקסט גדול" הוא באמת
     כל הטקסט — כולל תוויות, תגיות וצירי הגרפים — ולא רק הכותרות. */
  --fs-scale: 1;

  --lh-tight: 1.1;
  --lh-snug:  1.35;
  --lh-body:  1.55;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* ככל שהטקסט גדול יותר כך הריווח נסגר — אחרת מספר בגודל תצוגה מתפרק */
  --track-display: -.035em;
  --track-tight:   -.02em;
  --track-label:    .04em;

  /* --- עומק ---
     שתי שכבות לכל צל: אחת הדוקה שמגדירה את הקצה, ואחת רכה ורחוקה שמייצרת
     את ההרמה. צל בשכבה אחת נראה כמו קו מטושטש ולא כמו גובה. */
  --shadow-sm: 0 1px 2px oklch(0.235 0.019 266 / .05),
               0 1px 1px oklch(0.235 0.019 266 / .03);
  --shadow:    0 1px 2px oklch(0.235 0.019 266 / .04),
               0 6px 16px -4px oklch(0.235 0.019 266 / .10);
  --shadow-lg: 0 12px 32px -8px oklch(0.235 0.019 266 / .16),
               0 2px 8px oklch(0.235 0.019 266 / .06);

  /* משטח הכרטיס. במצב יום הקצה נוצר מהצל ומטבעת שיער, ולא ממסגרת מלאה:
     מסגרת על כל קופסה היא מה שגורם למסך להיראות כמו טופס. במצב לילה אין
     צל שנראה, ולכן שם המסגרת חוזרת והיא זו שמפרידה בין השכבות. */
  --card-bd: transparent;
  --card-ring: inset 0 0 0 1px oklch(0.235 0.019 266 / .055);
  --card-el: var(--shadow-sm);

  /* --- תנועה --- */
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 380ms;

  /* בהירות רקע ראשי־התיבות, נגזרת מהשם */
  --tint-l: 0.932;

  --sidebar: 236px;
  --header-h: 60px;

  --font: "Heebo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.32, .72, 0, 1);

  color-scheme: light;
}

/* ----------------------------------------------------------------- לילה ---
   רקע כמעט-שחור ולא שחור מוחלט: על שחור טהור טקסט לבן "בוהק" ומטשטש, והמשטחים
   מאבדים עומק. #12151b שומר על הפרדה בין שכבות ועל 16.6:1 לטקסט הראשי. */
:root[data-theme="dark"] {
  --bg:            #090c10;
  --surface:       #12151b;
  --surface-2:     #1c1f26;
  --surface-3:     #252931;
  --line:          #272b33;
  --line-strong:   #363b45;

  --text:          #f3f4f6;
  --text-2:        #c7cbd3;
  --muted:         #90959e;

  --accent:        #5b8def;
  --accent-hover:  #7aa4f5;
  --accent-soft:   #1a2540;
  --accent-line:   #2c3d62;
  --accent-text:   #a8c2fa;

  --up:            #2ec98f;
  --up-soft:       #10281f;
  --up-line:       #1b4435;

  --down:          #f4756c;
  --down-soft:     #2c1512;
  --down-line:     #4d221d;

  --warn:          #e9ad4b;
  --warn-soft:     #2a1f0d;
  --warn-line:     #4a381a;

  --chart-grid:    #242830;
  --chart-prior:   #414751;

  --heat-0:  #161a21;
  --heat-1:  #1b2534;
  --heat-2:  #22354f;
  --heat-3:  #2c4a78;
  --heat-4:  #35619f;
  --heat-5:  #3f6dbb;
  /* במצב לילה הסולם מטפס מהמשטח כלפי מעלה, ולכן דיו בהיר על כל מדרגה */
  --heat-ink-low:  #f3f4f6;
  --heat-ink-high: #f3f4f6;

  --tint-l: 0.335;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / .45);
  --shadow:    0 1px 2px rgb(0 0 0 / .4), 0 6px 16px rgb(0 0 0 / .38);
  --shadow-lg: 0 12px 34px rgb(0 0 0 / .55), 0 2px 8px rgb(0 0 0 / .4);

  /* בלילה הצל אינו נראה על רקע כהה, ולכן ההפרדה חוזרת להיות מסגרת */
  --card-bd: var(--line);
  --card-ring: none;
  --card-el: none;

  color-scheme: dark;
}

/* ------------------------------------------------------- גודל הטקסט --
   שלוש מדרגות. ההעדפה נשמרת ונחתמת על ה-HTML, בדיוק כמו הנושא, כך שגם
   כאן יש נקודת אמת אחת. */
:root[data-text="large"]  { --fs-scale: 1.125; }
:root[data-text="xlarge"] { --fs-scale: 1.25; }

/* ---------------------------------------------------------------- reset --- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: calc(14px * var(--fs-scale));
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 0;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.011em; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { display: block; }

::selection { background: var(--accent-soft); color: var(--accent-text); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 99px;
  border: 3px solid var(--bg);
}
*::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* מספרים תמיד בספרות טבלאיות ובכיוון שמאל־לימין, גם בתוך משפט בעברית */
/* ספרות טבלאיות רק היכן שמספרים מתיישרים אנכית: טורים וצירים. */
.num, td.num, th.num, .tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ============================================================== app shell === */
.app {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-3);
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------------------------------------------------------------- sidebar -- */
.sidebar {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-5) var(--sp-3);
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--card-ring), var(--card-el);
  position: sticky;
  top: var(--sp-3);
  height: calc(100dvh - var(--sp-6));
  overflow-y: auto;
}

.brand { display: grid; gap: 1px; padding: 4px 10px 18px; }

/* הלוגו הוא השם עצמו: משקל כבד, ריווח אותיות פתוח, בלי סמל נלווה. */
.wordmark {
  font-size: calc(19px * var(--fs-scale));
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--text);
  line-height: 1;
}
.wordmark.small { font-size: calc(14px * var(--fs-scale)); letter-spacing: .12em; }
.brand-sub { font-size: calc(11.5px * var(--fs-scale)); color: var(--muted); }

.nav-fields { display: grid; gap: 8px; padding: 0 10px; }
.theme-seg { width: 100%; margin-bottom: 4px; }
.theme-seg button { flex: 1; }

.nav-label {
  font-size: calc(10.5px * var(--fs-scale));
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--muted);
  padding: 14px 10px 6px;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  text-align: start;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.nav-item svg { flex: none; color: var(--muted); transition: color var(--dur-fast); }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item:hover svg { color: var(--text-2); }
.nav-item.is-active {
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: var(--fw-semi);
}
/* פס מבטא בקצה הפריט הפעיל: סימון שנקרא במבט אחד גם כשהרקע הרך כמעט שקוף */
.nav-item.is-active::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  translate: 0 -50%;
  width: 3px;
  height: 17px;
  border-radius: 99px;
  background: var(--accent);
}
.nav-item.is-active svg { color: var(--accent); }
.nav-count {
  margin-inline-start: auto;
  font-size: calc(11px * var(--fs-scale));
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 99px;
  padding: 1px 7px;
}
.nav-item.is-active .nav-count { background: var(--surface); color: var(--accent-text); }

.sidebar-foot { margin-top: auto; padding-top: 14px; display: grid; gap: 4px; }

/* ----------------------------------------------------------------- header -- */
.main { grid-column: 2; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--header-h);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) 0;
  background: color-mix(in oklch, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
}

.page-head { min-width: 0; }
.page-title { font-size: var(--fs-h2); font-weight: var(--fw-semi);
              letter-spacing: var(--track-tight); line-height: var(--lh-tight); }
.page-sub { font-size: var(--fs-label); color: var(--muted); }

.topbar-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.no-mobile { display: inline-flex; }

/* עמודה אחת שאינה גדלה מעבר לרוחב שיש: בלי minmax(0,1fr) עמודת גריד
   מתרחבת עד רוחב התוכן המלא, ושם ארוך בשורה אחת היה מותח את כל המסך. */
.view { padding: 0 var(--sp-2) var(--sp-8); display: grid;
        grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); align-content: start; }

/* --------------------------------------------------------------- controls -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: calc(36px * var(--fs-scale));
  padding: 0 var(--sp-4);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: calc(13px * var(--fs-scale));
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background .13s, border-color .13s, box-shadow .13s, transform .08s;
}
.btn:hover { background: var(--surface-2); border-color: var(--line-strong); }
.btn:active { transform: translateY(.5px); }
.btn svg { color: var(--muted); }
.btn:hover svg { color: var(--text-2); }
.btn[disabled] { opacity: .45; pointer-events: none; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary svg, .btn-primary:hover svg { color: currentColor; }

.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--surface-2); border-color: transparent; }

.btn-danger { color: var(--down); border-color: var(--down-line); background: var(--surface); }
.btn-danger:hover { background: var(--down-soft); border-color: var(--down); }
.btn-danger svg { color: currentColor; }

.btn-sm { height: calc(30px * var(--fs-scale)); padding: 0 var(--sp-3); font-size: calc(12.5px * var(--fs-scale)); border-radius: 999px; }
.btn-icon { width: calc(36px * var(--fs-scale)); padding: 0; }
.btn-icon.btn-sm { width: calc(30px * var(--fs-scale)); }

.input, .select {
  height: calc(36px * var(--fs-scale));
  padding: 0 var(--sp-4);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: calc(13px * var(--fs-scale));
  transition: border-color .13s, box-shadow .13s;
  width: 100%;
}
.input:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.input::placeholder { color: var(--muted); }

.select {
  appearance: none;
  padding-inline-end: 30px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(11px) calc(50% + 1px), calc(16px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 210px;
}
.search svg { position: absolute; inset-inline-start: 13px; color: var(--muted); pointer-events: none; }
.search .input { padding-inline-start: 34px; }

.field { display: flex; align-items: center; gap: 7px; }
.field > span { font-size: calc(12px * var(--fs-scale)); color: var(--muted); white-space: nowrap; }
.field .select, .field .input { width: auto; }

.check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: calc(13px * var(--fs-scale));
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}
.check input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }

.seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.seg button {
  height: calc(30px * var(--fs-scale));
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: calc(12.5px * var(--fs-scale));
  font-weight: 500;
  cursor: pointer;
  transition: background .13s, color .13s;
}
.seg button:hover { color: var(--text); }
.seg button.is-active {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* מפריד בתוך בורר מקטעים: שתי קבוצות באותו פס, כשהראשונה היא הדרך
   המרכזית והשאר חלופות. */
.seg-div { width: 1px; align-self: stretch; margin: var(--sp-1) var(--sp-1);
           background: var(--line-strong); flex: none; }
.seg button svg { margin-inline-end: 2px; }

label.stacked { display: grid; gap: 5px; }
label.stacked > span { font-size: calc(12px * var(--fs-scale)); font-weight: 500; color: var(--text-2); }
label.stacked textarea {
  min-height: 78px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  resize: vertical;
  font-size: calc(13px * var(--fs-scale));
  line-height: 1.55;
}
label.stacked textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ------------------------------------------------------------------ cards -- */
.card {
  background: var(--surface);
  border: 1px solid var(--card-bd);
  border-radius: var(--r-lg);
  box-shadow: var(--card-ring), var(--card-el);
}

/* פאנל שקוע: חומר משני שנמצא בתוך כרטיס ואינו כרטיס בזכות עצמו. */
.panel {
  background: var(--surface-2);
  border-radius: var(--r);
  padding: var(--sp-4);
}

.card-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5) var(--sp-3);
}
.card-head h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-tight);
}
.card-head .sub {
  font-size: var(--fs-label);
  color: var(--muted);
  line-height: var(--lh-snug);
  margin-top: 1px;
}
.card-head .spacer { margin-inline-start: auto; }
/* כשהגוף צמוד לקצה (רשימה או טבלה) הכותרת צריכה קו שמפריד ממנו; כשיש ריפוד,
   הרווח עושה את העבודה והקו רק מוסיף רעש. */
.card-head:has(+ .card-body.flush) {
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.card-body { padding: 0 var(--sp-5) var(--sp-5); }
.card-body.flush { padding: 0; }
/* כרטיס בלי כותרת — הגוף שלו מחזיק את כל הריפוד */
.card > .card-body:first-child { padding-top: var(--sp-5); }

.grid { display: grid; gap: var(--sp-5); }
.grid > *, .view > * { min-width: 0; }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }

/* --------------------------------------------------------------- hero KPI -- */
/* ההירו הוא הרגע החזק היחיד במסך: משטח מגוון קלות שמרים את המספר הראשי
   מעל שאר הכרטיסים, בלי לצבוע את כל העמוד. */
.hero {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 0;
  background:
    radial-gradient(120% 140% at 100% 0%,
      color-mix(in oklch, var(--accent) 7%, transparent) 0%, transparent 62%),
    var(--surface);
  border: 1px solid var(--card-bd);
  border-radius: var(--r-lg);
  box-shadow: var(--card-ring), var(--shadow);
  overflow: hidden;
}
.hero-main { padding: var(--sp-6); display: grid; gap: var(--sp-1); align-content: center; }
.hero-label {
  font-size: var(--fs-label);
  color: var(--muted);
  font-weight: var(--fw-medium);
}
.hero-value {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-display);
  line-height: var(--lh-tight);
  /* ספרות פרופורציונליות: ברוחב אחיד מספר כמו 121 נראה רופף בגודל תצוגה */
  font-variant-numeric: proportional-nums;
}
/* סימן המטבע אינו ספרה: הוא נסוג במשקל ובגודל כדי שהמספר יוביל */
.hero-value .cur {
  font-size: .56em;
  font-weight: var(--fw-medium);
  color: var(--muted);
  margin-inline: .16em;
  letter-spacing: 0;
}
.hero-meta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
             margin-top: var(--sp-2); }
.hero-chart { padding: var(--sp-4) var(--sp-4) var(--sp-3); min-width: 0; }

/* ------------------------------------------------------- מסילת המדדים --
   ארבעה מספרים על משטח אחד, מופרדים בקו ולא במרווח. הם עונים יחד על שאלה
   אחת, ולכן הם נקראים כאובייקט אחד ולא כארבע קופסאות. */
.stat-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  background: var(--surface);
  border: 1px solid var(--card-bd);
  border-radius: var(--r-lg);
  box-shadow: var(--card-ring), var(--card-el);
  overflow: hidden;
}
.stat {
  padding: var(--sp-4) var(--sp-5);
  display: grid;
  gap: 2px;
  align-content: start;
  border-inline-start: 1px solid var(--line);
}
.stat:first-child { border-inline-start: 0; }
.stat-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  color: var(--muted);
}
.stat-label svg { color: var(--muted); flex: none; }
.stat-value {
  font-size: var(--fs-h1);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-tight);
  line-height: var(--lh-snug);
  font-variant-numeric: proportional-nums;
  direction: rtl;
  unicode-bidi: plaintext;
}
.stat-foot { font-size: var(--fs-micro); color: var(--muted); }
.stat-help {
  width: 16px;
  height: 16px;
  flex: none;
  margin-inline-start: auto;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: transparent;
  color: var(--muted);
  font-size: calc(10.5px * var(--fs-scale));
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.stat-help:hover { background: var(--accent-soft); color: var(--accent-text);
                   border-color: var(--accent-line); }

/* ---------------------------------------------------------- תור העבודה --
   שורה אחת לכל דבר שדורש טיפול, והפעולה יושבת בשורה עצמה. */
.act-list { display: grid; grid-template-columns: minmax(0, 1fr); }
.act-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.act-row:last-child { border-bottom: 0; }
.act-row:hover { background: var(--surface-2); }
.act-row > .grow { flex: 1; min-width: 0; }

/* סימן הדחיפות: קו צבע דק בקצה השורה, שנקרא לפני שקוראים מילה */
.act-mark {
  width: 3px;
  align-self: stretch;
  min-height: 30px;
  border-radius: 99px;
  background: var(--line-strong);
  flex: none;
}
.act-mark.down { background: var(--down); }
.act-mark.warn { background: var(--warn); }

.act-tools { display: flex; gap: var(--sp-1); flex: none; opacity: 0;
             transition: opacity var(--dur-fast); }
.act-row:hover .act-tools, .act-row:focus-within .act-tools { opacity: 1; }
.act-tools .btn { width: 30px; padding: 0; }
.act-tools svg { color: var(--text-2); }

.act-more {
  width: 100%;
  padding: var(--sp-3);
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--accent-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.act-more:hover { background: var(--surface-2); }

.kpi { padding: var(--sp-4) var(--sp-5); display: grid; gap: 2px; }
.kpi-label {
  font-size: var(--fs-label);
  color: var(--muted);
  font-weight: var(--fw-medium);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.kpi-value {
  font-size: var(--fs-h1);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-tight);
  line-height: var(--lh-snug);
  font-variant-numeric: proportional-nums;
}
.hero-value, .kpi-value { direction: rtl; unicode-bidi: plaintext; }
.kpi-foot { font-size: var(--fs-micro); color: var(--muted); display: flex;
            align-items: center; gap: var(--sp-2); }
.kpi-help {
  width: 16px;
  height: 16px;
  flex: none;
  margin-inline-start: auto;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: transparent;
  color: var(--muted);
  font-size: calc(10.5px * var(--fs-scale));
  line-height: 1;
  cursor: pointer;
  transition: background .13s, color .13s;
}
.kpi-help:hover { background: var(--accent-soft); color: var(--accent-text);
                  border-color: var(--accent-line); }
.kpi-spark { margin-top: 8px; }

/* --------------------------------------------------------- badges & deltas -- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: calc(22px * var(--fs-scale));
  padding: 0 var(--sp-2);
  border-radius: 99px;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  white-space: nowrap;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-2);
}
.badge.up { background: var(--up-soft); border-color: var(--up-line); color: var(--up); }
.badge.down { background: var(--down-soft); border-color: var(--down-line); color: var(--down); }
.badge.warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.badge.accent { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text); }

.delta {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  /* מספר עם סימן הוא רצף משמאל לימין; בלי זה המינוס נדחק לקצה השני */
  direction: ltr;
}
.delta.up { color: var(--up); }
.delta.down { color: var(--down); }

.dot { width: 7px; height: 7px; border-radius: 99px; flex: none; }

/* ----------------------------------------------------------------- tables -- */
.table-wrap { overflow: auto; max-width: 100%; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: calc(13px * var(--fs-scale)); }

thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: start;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-label);
  color: var(--muted);
  white-space: nowrap;
  padding: var(--sp-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable:hover { color: var(--text); }
thead th .sort-arrow { opacity: .55; margin-inline-start: 3px; }

tbody td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.row-link { cursor: pointer; }
tbody tr.row-link:hover td { background: var(--surface-2); }
td.num, th.num { text-align: start; direction: ltr; }
th.num { text-align: start; }

.cell-title { font-weight: 550; letter-spacing: -.008em; }
.cell-sub { font-size: calc(11.5px * var(--fs-scale)); color: var(--muted); font-weight: 400; direction: ltr; text-align: start; }

.avatar {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: calc(13px * var(--fs-scale));
  font-weight: 600;
  background: var(--surface-3);
  color: var(--text-2);
}
.cell-party { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cell-party > div { min-width: 0; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------- edit grid --- */
.grid-table td.cell { padding: 0; position: relative; }
/* עמודת הלקוח נשארת גלויה בזמן גלילה אופקית על פני 12 חודשים */
.grid-table td:first-child,
.grid-table th:first-child,
.grid-table tfoot td:first-child {
  position: sticky;
  inset-inline-start: 0;
  z-index: 3;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--line);
}
:root:dir(rtl) .grid-table td:first-child,
:root:dir(rtl) .grid-table th:first-child { box-shadow: -1px 0 0 var(--line); }
.grid-table thead th:first-child { z-index: 4; background: var(--surface-2); }
.grid-table tfoot td:first-child { z-index: 4; background: var(--surface-2); }
tbody tr.row-link:hover .grid-table td:first-child { background: var(--surface-2); }

.grid-table td.cell { min-width: 84px; }
.grid-table td.cell input {
  width: 100%;
  height: 40px;
  border: 0;
  background: transparent;
  padding: 0 9px;
  direction: ltr;
  text-align: start;
  font-variant-numeric: tabular-nums;
  font-size: calc(12.5px * var(--fs-scale));
  color: var(--text-2);
}
.grid-table td.cell.filled input { color: var(--text); font-weight: 500; }
.grid-table td.cell input:hover { background: var(--surface-2); }
.grid-table td.cell input:focus {
  outline: none;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--accent);
  color: var(--text);
}
.grid-table td.cell.saved::after {
  content: "";
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 4px;
  width: 5px; height: 5px;
  border-radius: 99px;
  background: var(--up);
  animation: fade-out 1.6s ease forwards;
}
@keyframes fade-out { to { opacity: 0; } }

.grid-table th.num { min-width: 84px; }
tfoot td {
  position: sticky;
  bottom: 0;
  background: var(--surface-2);
  border-top: 1px solid var(--line-strong);
  border-bottom: 0;
}
.grid-table tfoot td {
  position: sticky;
  bottom: 0;
  font-weight: 600;
  background: var(--surface-2);
  border-top: 1px solid var(--line-strong);
  border-bottom: 0;
}

/* ------------------------------------------------------------------ lists -- */
/* עמודה אחת קשיחה: עמודת גריד ברירת-מחדל נמתחת לרוחב התוכן המלא, ושורה
   עם שם ארוך היתה מותחת איתה את כל המסך במקום לקצר את השם. */
.list { display: grid; grid-template-columns: minmax(0, 1fr); }
.list-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.list-row:last-child { border-bottom: 0; }
.list-row:hover { background: var(--surface-2); }
.list-row > .grow { flex: 1; min-width: 0; }
.list-title { font-weight: var(--fw-medium); font-size: var(--fs-sm);
              letter-spacing: -.006em; }
.list-sub { font-size: var(--fs-micro); color: var(--muted); line-height: var(--lh-snug); }
.list-value {
  text-align: start;
  direction: ltr;
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semi);
  flex: none;                 /* הסכום לעולם לא נדחק החוצה בגלל שם ארוך */
  white-space: nowrap;
}
.list-value.up { color: var(--up); }
.list-value.down { color: var(--down); }

/* שלד טעינה: מחזיק את הגובה של מה שעומד להגיע, כדי שהמסך לא יקפוץ סביבו */
.skeleton { display: grid; gap: var(--sp-3); padding: var(--sp-5); }
.skeleton-row {
  height: 14px;
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--surface-2) 25%,
              var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: skeleton-sweep 1.4s var(--ease) infinite;
}
.skeleton-row:nth-child(2) { width: 82%; }
.skeleton-row:nth-child(3) { width: 64%; }
@keyframes skeleton-sweep { from { background-position: 100% 0; }
                            to { background-position: 0 0; } }
.list-scroll { max-height: 470px; overflow-y: auto; }
.list-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px;
             border-bottom: 1px solid var(--line); }
.list-item:last-child { border-bottom: 0; }
.list-item.done .list-title { text-decoration: line-through; color: var(--muted); }

.rank {
  width: 20px;
  flex: none;
  font-size: calc(11.5px * var(--fs-scale));
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* העמודה מוגבלת ל-minmax(0,1fr): בלעדיה שם ארוך קובע את רוחב המינימום של
   השורה, והלוח כולו נגלל הצידה בטלפון. */
.bar-row { display: grid; grid-template-columns: minmax(0, 1fr);
           gap: 6px; padding: 9px 16px; cursor: pointer; }
.bar-row:hover { background: var(--surface-2); }
.bar-head { display: flex; align-items: baseline; gap: 10px; font-size: calc(12.5px * var(--fs-scale)); }
.bar-head .grow { flex: 1; min-width: 0; }
.bar-track { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 99px; transition: width .5s var(--ease); }

/* ------------------------------------------------------------ empty state -- */
.empty {
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-sm);
  max-width: 42ch;
  margin-inline: auto;
  line-height: var(--lh-snug);
}
.empty svg { color: var(--line-strong); }
.empty strong { color: var(--text-2); font-weight: var(--fw-semi); font-size: var(--fs-h3); }

/* ----------------------------------------------------------------- drawer -- */
.drawer { position: fixed; inset: 0; z-index: 60; }
.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: oklch(0.235 0.019 266 / .42);
  backdrop-filter: blur(2px);
  animation: fade-in .2s var(--ease);
}
.drawer-panel {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(720px, 100%);
  background: var(--bg);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  animation: slide-in .26s var(--ease);
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes slide-in { from { transform: translateX(-24px); opacity: 0; } }
:root:dir(rtl) .drawer-panel { animation-name: slide-in; }

.drawer-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.drawer-head h2 { font-size: calc(17px * var(--fs-scale)); letter-spacing: -.025em; }
.drawer-body { padding: 18px 20px 40px; display: grid; gap: 14px; align-content: start; }

.tabs {
  display: flex;
  gap: 2px;
  padding: 0 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 61px;
  z-index: 2;
}
.tabs button {
  border: 0;
  background: none;
  padding: 10px 12px;
  font-size: calc(13px * var(--fs-scale));
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .13s;
}
.tabs button:hover { color: var(--text); }
.tabs button.is-active { color: var(--accent-text); border-bottom-color: var(--accent); font-weight: 600; }

/* ------------------------------------------------------------------ toast -- */
.toast-stack {
  position: fixed;
  inset-block-end: 20px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  z-index: 80;
  display: grid;
  gap: 8px;
  justify-items: center;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  max-width: min(420px, calc(100vw - 32px));
  border-radius: var(--r-lg);
  line-height: 1.5;
  background: var(--text);
  color: var(--bg);
  font-size: calc(13px * var(--fs-scale));
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: toast-in .24s var(--ease);
}
.toast.is-out { animation: toast-out .2s var(--ease) forwards; }
.toast svg { color: currentColor; opacity: .75; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px) scale(.98); } }

/* --------------------------------------------------------------- palette --- */
.palette { position: fixed; inset: 0; z-index: 90; display: grid; place-items: start center; }
.palette-backdrop { position: absolute; inset: 0; background: oklch(0.235 0.019 266 / .38); }
.palette-box {
  position: relative;
  margin-top: 12vh;
  width: min(560px, calc(100% - 32px));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: pop .18s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(-8px) scale(.985); } }
.palette-input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 15px 18px;
  font-size: calc(15px * var(--fs-scale));
  background: transparent;
}
.palette-input:focus { outline: none; }
.palette-results { max-height: 340px; overflow-y: auto; padding: 6px; }
.palette-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--r);
  cursor: pointer;
}
.palette-row.is-active { background: var(--accent-soft); }
.palette-row .grow { flex: 1; min-width: 0; }
.palette-hint { padding: 9px 18px; border-top: 1px solid var(--line); font-size: calc(11.5px * var(--fs-scale)); color: var(--muted);
                display: flex; gap: 12px; }
kbd {
  font-family: var(--font);
  font-size: calc(11px * var(--fs-scale));
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--text-2);
}

/* ----------------------------------------------------------------- tabbar -- */
.tabbar { display: none; }

/* ------------------------------------------------------------------- chat -- */
.chat-scrim { display: none; }

.chat {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  width: 380px;
  z-index: 55;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-inline-end: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  animation: chat-in .24s var(--ease);
}
@keyframes chat-in { from { transform: translateX(-16px); opacity: 0; } }

/* בשולחן העבודה הפאנל דוחף את התוכן במקום לכסות אותו */
@media (min-width: 1001px) {
  body.chat-open .main { padding-inline-end: 380px; }
  body.chat-open .topbar { padding-inline-end: calc(24px + 380px); }
}

.chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}
.chat-head > div { flex: 1; min-width: 0; }
.chat-title { font-size: calc(14px * var(--fs-scale)); font-weight: 600; }

.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-intro { display: grid; gap: 14px; }
.chat-hello { display: grid; gap: 8px; }
.chat-hello p { font-size: calc(12.5px * var(--fs-scale)); color: var(--muted); line-height: 1.6; }

.bubble {
  border-radius: var(--r-lg);
  font-size: calc(13px * var(--fs-scale));
  max-width: 100%;
  min-width: 0;
}
.bubble.you {
  align-self: flex-start;
  background: var(--accent);
  color: #fff;
  padding: 9px 13px;
  border-end-start-radius: var(--r-sm);
  max-width: 85%;
}
.bubble.beny {
  align-self: stretch;
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 13px 14px;
}

.ans-title { font-weight: 650; font-size: calc(13.5px * var(--fs-scale)); margin-bottom: 9px; }
.ans-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
  font-size: calc(12.5px * var(--fs-scale));
  color: var(--text-2);
}
.ans-line:last-of-type { border-bottom: 0; }
.ans-line b { color: var(--text); direction: ltr; flex: none; white-space: nowrap; }
.ans-line > span { min-width: 0; }
.ans-note { font-size: calc(12px * var(--fs-scale)); color: var(--muted); line-height: 1.6; margin: 6px 0; }

/* פריטי גריד מקבלים min-width:auto, ולכן שורה רחבה מרחיבה את כל הרשימה
   מעבר לבועה והסכום נחתך בקצה. */
.ans-list { display: grid; gap: 1px; margin: 4px 0; }
.ans-list > * { min-width: 0; }
.ans-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  padding: 7px 8px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  font-size: calc(12.5px * var(--fs-scale));
  cursor: pointer;
  text-align: start;
}
.ans-row:hover { background: var(--surface-3); }
.ans-row .grow { flex: 1; min-width: 0; }
.ans-row .num { font-weight: 600; direction: ltr; flex: none; white-space: nowrap; }

.ans-suggest { display: flex; flex-wrap: wrap; gap: 6px; }
.ans-chip {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
  border-radius: 99px;
  padding: 6px 12px;
  font-size: calc(12.5px * var(--fs-scale));
  cursor: pointer;
  margin-top: 8px;
  transition: background .13s, border-color .13s, color .13s;
}
.ans-chip:hover { background: var(--accent-soft); border-color: var(--accent-line);
                  color: var(--accent-text); }

.chat-form {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.chat-form .input { height: 40px; }
.chat-form .btn { height: 40px; width: 40px; flex: none; }

/* ------------------------------------------------------------------ notice -- */
.notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  font-size: calc(12.5px * var(--fs-scale));
  color: var(--text-2);
}
.notice svg { flex: none; margin-top: 1px; color: var(--muted); }
.notice strong { display: block; color: var(--text); font-size: calc(13px * var(--fs-scale)); margin-bottom: 2px; }
.notice.warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.notice.warn svg, .notice.warn strong { color: var(--warn); }
.notice a { color: var(--accent-text); }

/* --------------------------------------------------------------- diverging -- */
.div-chart { display: grid; gap: 3px; }
.div-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 1.6fr) auto;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
  cursor: pointer;
  font-size: calc(12.5px * var(--fs-scale));
}
.div-row:hover { background: var(--surface-2); border-radius: var(--r-sm); }
.div-name { min-width: 0; }
.div-track { position: relative; height: 16px; display: block; }
/* קו האפס — ציר ולא נתון: קו שיער רציף בין השורות */
.div-axis {
  position: absolute;
  inset-block: -3px;
  inset-inline-start: 50%;
  width: 1px;
  background: var(--line-strong);
}
.div-bar {
  position: absolute;
  top: 3px;
  height: 10px;
  border-radius: 3px;
}
/* בכיוון ימין-לשמאל inset-inline-end הוא הקצה השמאלי: תוספת גדלה ימינה
   מקו האפס, גריעה שמאלה ממנו. */
.div-bar.pos { inset-inline-end: 50%; background: var(--up); border-radius: 3px; }
.div-bar.neg { inset-inline-start: 50%; background: var(--down); border-radius: 3px; }
.div-value {
  direction: ltr;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
  min-width: 86px;
  text-align: start;
}
.div-value.up { color: var(--up); }
.div-value.down { color: var(--down); }

/* ------------------------------------------------------- stacked & tables -- */
.stack-bar {
  display: flex;
  gap: 2px;                    /* הרווח מפריד בין המקטעים, לא מסגרת */
  height: 30px;
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-bottom: 14px;
}
.stack-seg { height: 100%; transition: opacity .15s; }
.stack-seg:hover { opacity: .82; }

.stack-legend { display: grid; gap: 2px; }
.stack-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: calc(12.5px * var(--fs-scale));
  padding: 5px 2px;
  border-bottom: 1px solid var(--line);
}
.stack-row:last-child { border-bottom: 0; }
.stack-row i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.stack-row .grow { flex: 1; min-width: 0; }
.stack-row .num { font-weight: 600; }

.view-toggle { display: inline-flex; gap: 2px; }
.view-toggle button {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.view-toggle button:hover { background: var(--surface-2); color: var(--text-2); }
.view-toggle button.is-active {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--accent-text);
}
.chart-table { max-height: 320px; overflow-y: auto; }

/* ------------------------------------------------------------- chart bits -- */
.chart { width: 100%; display: block; overflow: visible; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: calc(11.5px * var(--fs-scale)); color: var(--muted); padding-top: 6px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 9px; height: 9px; border-radius: 3px; }

.chart-tip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  background: var(--text);
  color: var(--surface);
  font-size: var(--fs-label);
  font-weight: var(--fw-semi);
  padding: var(--sp-2) var(--sp-3);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  white-space: nowrap;
  transform: translate(50%, -50%);
  opacity: 0;
  transition: opacity .1s;
}
.chart-tip.is-on { opacity: 1; }
.chart-host { position: relative; }

.hint { font-size: calc(11.5px * var(--fs-scale)); color: var(--muted); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 13px; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.toolbar {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.toolbar .spacer { margin-inline-start: auto; }
.toolbar-chips { border-bottom: 1px solid var(--line); }

/* ------------------------------------------------------------ סרגל הקשר --
   השנה והסוכן יושבים מעל התוכן, מתחת לכותרת, ונדבקים לראש המסך בגלילה: מה
   שקובע כל מספר על המסך צריך להיות גלוי בזמן שקוראים אותו. */
.ctxbar {
  position: sticky;
  top: var(--header-h);
  z-index: 25;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2) var(--sp-3) 0;
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
}
.ctxbar[hidden] { display: none; }

.year-seg { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.year-seg::-webkit-scrollbar { display: none; }
.year-seg button {
  font-variant-numeric: tabular-nums;
  direction: ltr;
  min-width: 52px;
}

.agent-field { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.agent-field > span { font-size: calc(12px * var(--fs-scale)); color: var(--muted); }
.agent-field .select { height: 30px; font-size: calc(12.5px * var(--fs-scale)); }

/* ----------------------------------------------------------- מפת עונתיות --
   עוצמה בגוון אחד. הערך כתוב בתא עצמו, ולכן הצבע מוסיף קריאה מהירה במקום
   להיות הדרך היחידה לדעת מה יש שם. */
.heat { display: grid; gap: 3px; }
.heat-row {
  display: grid;
  grid-template-columns: 42px repeat(var(--heat-cols), minmax(0, 1fr));
  gap: 3px;
  align-items: stretch;
}
.heat-label {
  display: flex;
  align-items: center;
  font-size: calc(12px * var(--fs-scale));
  font-weight: 600;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.heat-cell-label {
  text-align: center;
  font-size: calc(11px * var(--fs-scale));
  color: var(--muted);
  padding-bottom: 2px;
}
.heat-cell {
  display: grid;
  place-items: center;
  min-height: 34px;
  border-radius: var(--r-sm);
  background: var(--heat-0);
  font-size: calc(11px * var(--fs-scale));
  color: var(--heat-ink-low);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  white-space: nowrap;
  transition: outline-color .12s;
  outline: 2px solid transparent;
}
.heat-cell:hover { outline-color: var(--line-strong); }
.heat-cell.l0 { background: var(--heat-0); color: var(--muted); }
.heat-cell.l1 { background: var(--heat-1); }
.heat-cell.l2 { background: var(--heat-2); }
.heat-cell.l3 { background: var(--heat-3); }
.heat-cell.l4 { background: var(--heat-4); color: var(--heat-ink-high); }
.heat-cell.l5 { background: var(--heat-5); color: var(--heat-ink-high); }

.heat-scale { display: flex; align-items: center; gap: 4px; padding-top: 10px; }
.heat-scale i { width: 20px; height: 10px; border-radius: 3px; min-height: 0; }
.heat-scale .hint { margin-inline: 4px; }

/* -------------------------------------------------------- תמהיל הסוכנים -- */
.mix-years { display: grid; gap: 12px; }
.mix-row { display: grid; gap: 5px; }
.mix-head { display: flex; align-items: baseline; gap: 8px; font-size: calc(12.5px * var(--fs-scale)); }
.mix-year { font-weight: 650; font-variant-numeric: tabular-nums; direction: ltr; }
.mix-head .num { margin-inline-start: auto; }

/* -------------------------------------------------------------- פס שנים --
   חמישה עמודונים בגובה יחסי, מתחת למספר הגדול: הקשר מיידי ומעבר שנה בנגיעה. */
.years-strip {
  display: flex;
  gap: 6px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}
.year-pill {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
  justify-items: center;
  padding: 6px 4px 5px;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: none;
  cursor: pointer;
  transition: background .13s, border-color .13s;
}
.year-pill:hover { background: var(--surface-2); }
.year-pill.is-active { background: var(--accent-soft); border-color: var(--accent-line); }
.year-pill-bar {
  display: flex;
  align-items: flex-end;
  height: 26px;
  width: 100%;
  max-width: 34px;
}
.year-pill-bar i {
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: var(--chart-prior);
  transition: background .13s;
}
.year-pill.is-active .year-pill-bar i { background: var(--accent); }
.year-pill-label {
  font-size: calc(11px * var(--fs-scale));
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.year-pill.is-active .year-pill-label { color: var(--accent-text); font-weight: 600; }
.year-pill-value {
  font-size: var(--fs-micro);
  color: var(--muted);
  direction: ltr;
  white-space: nowrap;
}
/* על המשטח המגוון של השנה הפעילה, אפור מאבד ניגודיות — הערך עובר לדיו שלה */
.year-pill.is-active .year-pill-value { color: var(--accent-text); }

/* ---------------------------------------------- עריכת חודשים בטלפון --- */
.month-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
/* 16px נשמר כדי ש-iOS לא יזום בכניסה לשדה; הריפוד מצטמצם במקומו כדי
   שסכום בן תשע ספרות ייכנס בלי להיחתך. */
.month-grid .input { text-align: center; direction: ltr; font-variant-numeric: tabular-nums;
                     padding-inline: 4px; }
.grid-card { cursor: pointer; }

/* ----------------------------------------------------------------- הזנה ---
   שורת הזנה היא שדה אחד ומה שצריך כדי למלא אותו: השם, מה היה בחודש המקביל,
   ומה רשום עכשיו. הכול בשורה אחת, והשדה תמיד באותו מקום כדי שאפשר יהיה
   לרוץ על הרשימה במקלדת בלי לחפש אותו. */
.entry-period { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* שם סוכן נערך במקום, בלי טופס נפרד */
.agent-name { height: 32px; font-size: calc(13px * var(--fs-scale)); font-weight: 550; }
.entry-tabs { border: 0; gap: 0; }
.entry-tabs button { padding: 6px 10px; font-size: calc(12.5px * var(--fs-scale)); }
.month-seg { flex-wrap: wrap; }
.month-seg button { position: relative; min-width: 46px; }
.month-dot {
  position: absolute;
  top: 4px;
  inset-inline-end: 5px;
  width: 5px; height: 5px;
  border-radius: 99px;
  background: var(--accent);
}
/* טיוטה שלא נשמרה מסומנת בצבע אחר — היא לא נתון עדיין */
.month-dot.is-draft { background: var(--warn); }
.seg button.is-active .month-dot { background: var(--accent-text); }

.entry-list { display: grid; grid-template-columns: minmax(0, 1fr); }
.entry-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--line);
}
.entry-row:last-child { border-bottom: 0; }
.entry-row:hover { background: var(--surface-2); }
.entry-row.is-changed { background: var(--accent-soft); }
.entry-row > .grow { flex: 1; min-width: 0; }
.entry-name { font-size: calc(13px * var(--fs-scale)); font-weight: 550; }
.entry-hint { font-size: calc(11.5px * var(--fs-scale)); color: var(--muted); }
.entry-split { flex: none; display: flex; align-items: center; gap: 8px; }

.entry-field { position: relative; flex: none; display: grid; gap: 2px; }
.entry-field .input {
  width: 132px;
  height: 36px;
  text-align: start;
  direction: ltr;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.entry-row.is-changed .entry-field .input { border-color: var(--accent); }
.entry-was { font-size: calc(10.5px * var(--fs-scale)); color: var(--muted); direction: ltr; text-align: start; }

/* סרגל שמירה שמופיע רק כשיש מה לשמור, ונשאר מול העיניים בזמן הגלילה */
.save-bar {
  position: sticky;
  bottom: 12px;
  z-index: 22;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding: 11px 16px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
.save-bar.is-on { opacity: 1; transform: none; pointer-events: auto; }
.save-facts { flex: 1; min-width: 200px; font-size: calc(13px * var(--fs-scale)); }
.save-bar .row-actions { flex: none; }

/* ---------------------------------------------------------------- משימות --
   שורת משימה היא יחידת פעולה: סימון ביצוע בצד אחד, מה ואצל מי באמצע,
   ודחייה ומחיקה בקצה. הכול בשורה אחת, ובטלפון בשתיים — בלי תפריט נסתר. */
.composer { padding: 12px 14px; display: grid; gap: 10px; }
.composer-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.composer-title { flex: 1; min-width: 200px; height: 38px; font-size: calc(14px * var(--fs-scale)); }
.composer-opts { gap: 8px; }
.composer-opts .seg button { font-size: calc(12px * var(--fs-scale)); padding: 0 9px; }

.sticky-chips {
  position: sticky;
  top: calc(var(--header-h) + 48px);
  z-index: 20;
  background: var(--bg);
  border-radius: var(--r);
}

.chip-count {
  display: inline-block;
  min-width: 17px;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--surface-3);
  font-size: calc(10.5px * var(--fs-scale));
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.chip-count.is-late { background: var(--down-soft); color: var(--down); }
.seg button.is-active .chip-count { background: var(--accent-soft); color: var(--accent-text); }

.tasks { display: grid; gap: 14px; }
.task-group { display: grid; gap: 6px; }
.task-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 2px 2px;
}

.task {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  transition: border-color .13s, box-shadow .13s;
}
.task:hover { border-color: var(--line-strong); }
.task.is-done { opacity: .62; }
.task.is-done .task-title { text-decoration: line-through; }

.task-check {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border: 1.5px solid var(--line-strong);
  border-radius: 99px;
  background: var(--surface);
  color: transparent;
  cursor: pointer;
  transition: background .13s, border-color .13s, color .13s;
}
.task-check:hover { border-color: var(--up); color: var(--up); }
.task.is-done .task-check {
  background: var(--up);
  border-color: var(--up);
  color: #fff;
}

.task-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.task-title { font-size: calc(13.5px * var(--fs-scale)); font-weight: 550; line-height: 1.4; }
.task-meta {
  display: flex;
  align-items: center;
  gap: 5px 10px;
  flex-wrap: wrap;
  font-size: calc(11.5px * var(--fs-scale));
  color: var(--muted);
}
.task-meta > * { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.task-kind svg { color: var(--muted); }
.task-party { color: var(--text-2); font-weight: 500; max-width: 46vw; }
.task-party:hover { color: var(--accent-text); text-decoration: underline; }
.task-due.is-late { color: var(--down); font-weight: 600; }
.task-body {
  font-size: calc(12px * var(--fs-scale));
  color: var(--text-2);
  line-height: 1.5;
  padding-top: 1px;
}
.task-tools { display: flex; align-items: center; gap: 4px; flex: none; }

/* כפתור צף לרישום חדש — האגודל מגיע אליו בלי לטפס אל ראש המסך */
.fab {
  position: fixed;
  inset-inline-end: 16px;
  bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: none;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 99px;
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
}
.fab:active { transform: translateY(1px); }

/* ------------------------------------------------------------- responsive --
   מתחת ל-1000px המערכת מתנהגת כאפליקציה: ניווט בסרגל תחתון, גיליונות מסך
   מלא, ושטחי נגיעה של 44px ומעלה. */
.only-mobile { display: none; }
.only-mobile-flex { display: none; }

@media (max-width: 1000px) {
  :root {
    --sidebar: 0px;
    --header-h: 54px;
  }

  .app { grid-template-columns: minmax(0, 1fr); }
  .main { grid-column: 1; }
  .no-mobile { display: none; }
  .only-mobile { display: inline-flex; }
  .only-mobile-flex { display: flex; }

  .topbar {
    padding: 8px 14px;
    padding-top: max(8px, env(safe-area-inset-top, 0px));
    gap: 10px;
  }
  .topbar .wordmark { font-size: calc(16px * var(--fs-scale)); }
  /* בנייד הכותרת של המסך כבר מופיעה בסרגל התחתון */
  .page-head { display: none; }

  .view {
    padding: 14px 14px 96px;         /* מקום לסרגל התחתון */
    gap: 12px;
  }

  /* הגלולות מצטמצמות במעט ברוחב טלפון: הריפוד הנדיב של המחשב דוחק שורת
     בוררים אחת מעבר לקצה במסכים של 320px. */
  /* מסילת המדדים בשתי עמודות: מספר בגודל תצוגה אינו נכנס ברוחב של חצי טלפון */
  .stat { padding: var(--sp-3) var(--sp-4); }
  .stat-value { font-size: var(--fs-h2); }

  .btn { padding: 0 var(--sp-3); }
  .btn-sm { padding: 0 10px; }
  .seg button { padding: 0 10px; }

  /* חמש שנים וסוכן בשורה אחת ברוחב טלפון: השנים נמתחות לרוחב הפנוי, כך
     שכולן נראות בלי גלילה אופקית ובלי שהראשונה תיחתך. */
  .fab { display: grid; }
  .entry-row { padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
  .entry-field { flex: 1; min-width: 120px; }
  .entry-field .input { width: 100%; height: 42px; }
  .month-seg button { min-width: 0; flex: 1; padding: 0 6px; font-size: calc(12px * var(--fs-scale)); }
  .month-seg { width: 100%; }
  .entry-period .field { width: 100%; }
  .save-bar { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); padding: 10px 12px; }
  .save-facts { min-width: 0; font-size: calc(12px * var(--fs-scale)); }
  .sticky-chips { top: var(--header-h); }
  .task { padding: 12px; gap: 10px; }
  .task-check { width: 30px; height: 30px; }
  .task-tools .btn { height: 32px; }
  .ctxbar { padding: 8px 14px; gap: 8px; }
  .year-seg { flex: 1; min-width: 0; }
  .year-seg button { flex: 1; min-width: 0; height: 32px; padding: 0 4px; font-size: calc(12px * var(--fs-scale)); }
  .agent-field { flex: none; }
  .agent-field .select { height: 32px; width: 118px; padding-inline: 8px 22px; font-size: calc(12px * var(--fs-scale)); }
  .heat-row { grid-template-columns: 34px repeat(var(--heat-cols), minmax(0, 1fr)); gap: 2px; }
  .heat-cell { min-height: 30px; font-size: calc(9.5px * var(--fs-scale)); border-radius: 4px; }
  .heat-cell-label { font-size: calc(9.5px * var(--fs-scale)); }

  /* שטח הנגיעה גדל בלי שהעיגול יגדל: אצבע אינה עכבר, ו-16 פיקסלים אינם יעד. */
  .kpi-help, .stat-help { position: relative; }
  .kpi-help::after, .stat-help::after { content: ""; position: absolute; inset: -9px; }
  .check { min-height: 32px; }
  .check input[type="checkbox"] { width: 18px; height: 18px; }

  /* --- סרגל תחתון --- */
  .tabbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 50;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background: color-mix(in oklch, var(--surface) 92%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tab-item {
    display: grid;
    justify-items: center;
    gap: 3px;
    min-height: 54px;
    padding: 7px 4px 8px;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: calc(10.5px * var(--fs-scale));
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .tab-item.is-active { color: var(--accent-text); font-weight: 600; }
  .tab-icon { position: relative; display: grid; place-items: center; }
  .tab-dot {
    position: absolute;
    top: -1px;
    inset-inline-start: -3px;
    width: 6px; height: 6px;
    border-radius: 99px;
    background: var(--down);
    border: 1.5px solid var(--surface);
  }

  /* --- סרגל צד כגיליון --- */
  .sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    inset-inline-end: auto;
    width: min(300px, 86vw);
    z-index: 70;
    transform: translateX(-100%);
    transition: transform .26s var(--ease);
    box-shadow: var(--shadow-lg);
    border-inline-start: 0;
    border-inline-end: 1px solid var(--line);
    border-radius: 0;
    height: auto;
    padding-top: max(16px, env(safe-area-inset-top, 0px));
  }
  :root:dir(rtl) .sidebar { transform: translateX(100%); }
  .sidebar.is-open, :root:dir(rtl) .sidebar.is-open { transform: none; }
  .scrim { position: fixed; inset: 0; z-index: 65; background: rgb(0 0 0 / .42); }

  /* --- שטחי נגיעה --- */
  /* החיפוש והפעולה נשארים במקומם; רק שורת המסננים נגללת אופקית */
  /* סרגל שנכפה לשורה אחת מותח את העמוד מעבר לרוחב המסך ומבריח את התוכן
     שמאלה. בטלפון הוא נשבר לשורות, והחיפוש תופס את מה שנשאר. */
  .toolbar { flex-wrap: wrap; }
  .toolbar .search { flex: 1 1 160px; min-width: 0; }
  .toolbar-chips {
    overflow-x: auto;
    scrollbar-width: none;
    padding-top: 0;
    padding-bottom: 10px;
  }
  .toolbar-chips::-webkit-scrollbar { display: none; }
  .toolbar-chips > * { flex: none; }
  .seg { flex-wrap: nowrap; }
  .field > span { display: none; }

  .btn { height: 40px; padding: 0 14px; }
  /* כפתור אייקון הוא ריבוע: הריפוד של כפתור רגיל היה מועך את האייקון עצמו */
  .btn-icon { width: 40px; padding: 0; }
  .btn-sm { height: 34px; }
  .btn-icon.btn-sm { width: 34px; padding: 0; }
  .input, .select { height: 42px; font-size: calc(16px * var(--fs-scale)); }   /* 16px מונע זום ב-iOS */
  .nav-item { padding: 11px 12px; font-size: calc(15px * var(--fs-scale)); }
  .seg button { height: 34px; }
  .list-row, .list-item { padding: 13px 14px; }
  .tabs button { padding: 12px 13px; }

  /* --- כרטיסים ופריסה --- */
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-chart { border-inline-start: 0; border-top: 1px solid var(--line); }
  .cols-2, .cols-3 { grid-template-columns: minmax(0, 1fr); }
  /* ארבעה מדדים נקראים טוב יותר כשניים בשורה מאשר ארבעה מסכים של גלילה */
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: 12px 13px; }
  .kpi-value { font-size: calc(19px * var(--fs-scale)); }
  .kpi-label { font-size: calc(11px * var(--fs-scale)); }
  .kpi-foot { font-size: calc(10.5px * var(--fs-scale)); }

  /* בטלפון קודם המספר ומי דורש טיפול; הגרפים והמשימות אחריהם. ברירת המחדל
     מוצהרת במפורש, אחרת קטע בלי סימון היה קופץ לפני הכותרת של המסך. */
  .view > * { order: 6; }
  .view > .sec-hero { order: 1; }
  .view > .sec-kpi { order: 2; }
  .view > .sec-actions { order: 3; }
  .view > .sec-charts { order: 4; }
  .view > #sec-tasks { order: 5; }
  .app { padding: 0; gap: 0; }
  .card-head { padding: 13px 14px; }
  /* בטלפון כותרת ובורר לא נכנסים בשורה אחת, והכותרת נדחסת לעמודה צרה. */
  .card-head:has(.spacer .seg) { flex-wrap: wrap; }
  .card-head:has(.spacer .seg) > .spacer { margin-inline-start: 0; width: 100%; }
  .card-head:has(.spacer .seg) .seg { width: 100%; }
  .card-head:has(.spacer .seg) .seg button { flex: 1; }
  /* בורר עם חמש שנים, בטקסט מוגדל, ברוחב של 320: במקום למתוח את הכרטיס
     מעבר למסך הוא נגלל בתוך עצמו. */
  .card-head .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .card-head .seg::-webkit-scrollbar { display: none; }
  .card-head .seg button { white-space: nowrap; }
  .card-body { padding: 14px; }
  .toolbar { padding: 12px 14px; }

  /* --- מגירה כגיליון מסך מלא --- */
  .drawer-panel {
    width: 100%;
    animation: sheet-in .28s var(--ease);
    padding-top: env(safe-area-inset-top, 0px);
  }
  @keyframes sheet-in { from { transform: translateY(18px); opacity: 0; } }
  .drawer-head { padding: 12px 14px; }
  .tabs { top: 57px; }

  /* --- העוזר כגיליון מסך מלא --- */
  .chat {
    inset: 0;
    width: 100%;
    border: 0;
    padding-top: env(safe-area-inset-top, 0px);
    animation: sheet-in .28s var(--ease);
  }
  .chat-scrim { display: block; position: fixed; inset: 0; z-index: 54;
                background: rgb(0 0 0 / .3); }

  /* --- חיפוש מהיר --- */
  .palette-box { margin-top: 0; width: 100%; height: 100%; border-radius: 0;
                 display: flex; flex-direction: column; }
  .palette-box .palette-input { padding-top: max(15px, env(safe-area-inset-top, 0px)); }
  .palette-results { flex: 1; max-height: none; }
  .palette-row { padding: 12px; }
  .palette-hint { display: none; }

  /* --- טבלאות שהופכות לרשימה --- */
  .cards-on-mobile thead { display: none; }
  .cards-on-mobile, .cards-on-mobile tbody, .cards-on-mobile tr { display: block; width: 100%; }
  /* שורת טבלה הופכת לכרטיס, והתאים יושבים שניים בשורה: שורה לכל שדה היתה
     מותחת את הכרטיס לגובה מסך ומשאירה שני לקוחות לגלילה. */
  .cards-on-mobile tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    margin-bottom: 10px;
    padding: 12px 13px;
    background: var(--surface);
  }
  .cards-on-mobile td { display: grid; gap: 1px; align-content: start;
                        padding: 0; border: 0; }
  .cards-on-mobile td::before {
    content: attr(data-label);
    font-size: calc(10.5px * var(--fs-scale));
    color: var(--muted);
  }
  .cards-on-mobile td.cell-main { grid-column: 1 / -1; display: block; padding-bottom: 9px;
                                  border-bottom: 1px solid var(--line); }
  .cards-on-mobile td > .badge, .cards-on-mobile td > .delta { justify-self: start; }
  .cards-on-mobile td.cell-main::before { content: none; }
  .cards-on-mobile td.hide-mobile { display: none; }
  .table-wrap.cards-wrap { max-height: none !important; overflow: visible; }
}

@media (max-width: 560px) {
  .hero-value { font-size: calc(32px * var(--fs-scale)); }
  .hero-main { padding: 16px 16px 18px; }
  .drawer-body { padding: 14px 14px 40px; }
  .div-row { grid-template-columns: minmax(0, 1fr) minmax(80px, 1fr) auto; font-size: calc(12px * var(--fs-scale)); }
  .div-value { min-width: 74px; }
}

/* ------------------------------------------------------ עדכון מקובץ --
   אזור הגרירה הוא הדבר הגדול במסך, כי זו הפעולה. כל השאר — הדבקה, בחירת
   קובץ, בחירת חודש גיבוי — נספח לו ולא חלופה שצריך להחליט עליה. */
.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 36px 20px 30px;
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
  text-align: center;
  transition: border-color .15s, background .15s;
}
.dropzone.is-over {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.dropzone.is-over .drop-icon { color: var(--accent); }
.drop-icon { color: var(--muted); line-height: 0; }
.drop-title { font-size: calc(16px * var(--fs-scale)); font-weight: 650; }
.drop-sub { color: var(--muted); font-size: calc(13px * var(--fs-scale)); }
.drop-actions { margin-top: 6px; }
.drop-note { max-width: 420px; font-size: calc(12px * var(--fs-scale)); }
.drop-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  font-size: calc(12px * var(--fs-scale));
}
.select-sm { height: 28px; padding: 0 7px; font-size: calc(12px * var(--fs-scale)); border-radius: var(--r-sm); }
.drop-paste { margin-top: 14px; }
.drop-paste > summary {
  cursor: pointer;
  color: var(--accent-text);
  font-size: calc(13px * var(--fs-scale));
  padding: 6px 2px;
}
.drop-paste > textarea { width: 100%; margin-top: 8px; }
.entry-period.is-fallback { font-size: calc(12.5px * var(--fs-scale)); }
kbd {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--surface);
  font: inherit;
  font-size: calc(11.5px * var(--fs-scale));
  font-weight: 600;
}
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.notice.down { background: var(--down-soft); border-color: var(--down); color: var(--down); }
.notice.down svg { color: var(--down); }

/* התוכנית שלפני האישור: העובדות למעלה, החודשים באמצע, האישור למטה */
.plan-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2px;
  padding: 4px 16px 14px;
}
.plan-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plan-fact b { font-size: calc(19px * var(--fs-scale)); font-variant-numeric: tabular-nums; }
.plan-block { padding: 12px 16px; border-top: 1px solid var(--line); }
.plan-block-head { font-size: calc(12.5px * var(--fs-scale)); font-weight: 600; margin-bottom: 8px; }
.plan-block-head.down { color: var(--down); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 148px; overflow: auto; }
.chip {
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: calc(12px * var(--fs-scale));
  color: var(--muted);
}
.plan-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.btn-lg { height: 42px; padding: 0 20px; font-size: calc(14.5px * var(--fs-scale)); }

@media (max-width: 560px) {
  .dropzone { padding: 26px 14px 22px; }
  .drop-title { font-size: calc(15px * var(--fs-scale)); }
  .plan-actions .btn-lg { flex: 1; }
}

/* ------------------------------------------------------- מעבר בין מסכים --
   רק התוכן מתחלף; המעטפת נשארת במקומה ואינה משתתפת במעבר, אחרת הניווט
   עצמו היה "מהבהב" וזו בדיוק התחושה שבאנו להסיר. */
@view-transition { navigation: none; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--dur);
  animation-timing-function: var(--ease);
}
::view-transition-old(root) { animation-name: view-out; }
::view-transition-new(root) { animation-name: view-in; }

@keyframes view-out { to { opacity: 0; } }
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}