/* ===================================================================
   מעקב שוק הון - עיצוב "בית השקעות פרטי": שחור עמוק/שנהב עם הבהרות זהב
   עקביות בכל מקום (שוליים עליונים לכרטיסים, מספרים בגרדיאנט, כפתורים
   מוזהבים) - כדי שהאתחוש היוקרתי יהיה שיטתי ולא נקודתי. data-theme נקבע
   ב-base.html (script חוסם, למניעת הבהוב) ונשמר ב-localStorage.

   הערה קריטית: אין כאן שום transition על background-color/border-color/
   color (רק transform/box-shadow/opacity) - נבדק ידנית ונמצא שדפדפן
   ה-Chromium בסביבה הזו "נתקע" על הערך הישן של מאפיין מונפש שמקורו
   במשתנה CSS אחרי טוגל חי בין מצבים. אל תוסיפו transition לצבעים בלי
   לבדוק שוב שהטוגל עדיין עובד בכל הכיוונים.
   =================================================================== */

:root {
  /* --- כהה (ברירת מחדל) --- */
  --bg: #07080a;
  --surface: #14161b;
  --surface-2: #1c1f26;
  --border: #2a2d36;
  --border-accent: rgba(212, 175, 108, 0.35);
  --text: #efe9dc;
  --text-dim: #8e8a7c;
  --accent: #d4af6c;
  --accent-2: #f2d59a;
  --accent-3: #a97e34;
  --accent-hover: #e6c184;
  --accent-text: #100d05;
  --accent-fill: rgba(212, 175, 108, 0.16);
  --accent-gradient: linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 48%, var(--accent-3) 100%);
  --bg-glow: rgba(212, 175, 108, 0.07);
  --green: #63b085;
  --red: #c96b61;
  --yellow: #d4af6c;
  --green-fill: rgba(99, 176, 133, 0.16);
  --red-fill: rgba(201, 107, 97, 0.16);
  --yellow-fill: rgba(212, 175, 108, 0.14);
  --on-strong: #fcf9f1;
  --hover-overlay: rgba(255, 255, 255, 0.055);
  --modal-overlay: rgba(3, 3, 4, 0.78);
  --il-accent: #7690d1;
  --us-accent: #63b085;
  --il-tint: rgba(118, 144, 209, 0.07);
  --us-tint: rgba(99, 176, 133, 0.07);
  --shadow-sm: 0 3px 14px rgba(0, 0, 0, 0.38);
  --shadow: 0 16px 44px rgba(0, 0, 0, 0.55);
  --shadow-gold: 0 4px 22px rgba(212, 175, 108, 0.14);
  --radius: 9px;
  --radius-lg: 14px;
  --font-serif: Cambria, Georgia, "Times New Roman", serif;
  --font-sans: "Segoe UI", "Heebo", Arial, sans-serif;
}

:root[data-theme="light"] {
  /* "בית השקעות פרטי" בגרסה בהירה - לבן נקי ומלוטש (לא קרם/פרגמנט מיושן),
     עם הזהב כנקודת האור היחידה שנשארת רוויה. גבולות כמעט בלתי-נראים
     (במקום קו חאקי בולט) + צללים רכים במקום מסגרות כדי שהעומק יגיע
     מ"הרמה" עדינה של כרטיס מעל הרקע, לא מקווי מתאר - זה מה שקורא
     "מושקע" בממשקי פרימיום (בתי השקעות, פינטק יוקרתי) ולא "עיתון ישן". */
  --bg: #faf9f6;
  --surface: #ffffff;
  --surface-2: #f4f2ee;
  --border: #e9e6de;
  --border-accent: rgba(150, 105, 15, 0.3);
  --text: #201d17;
  --text-dim: #7c7568;
  /* זהב מלוטש יותר מהניסיון הקודם (#8a621a היה נוטה חום/עמום, "ברונזה
     מוזנחת") - יותר רווי ועם יותר ניגודיות בין הבהיר לכהה בגרדיאנט, כדי
     שיקרא "זהב עתיק מבריק" ולא "חום כהה". contrast על לבן עדיין ≈4.85:1
     (AA), נבדק ידנית לפני היישום. */
  --accent: #96690f;
  --accent-2: #c2953f;
  --accent-3: #6e4a08;
  --accent-hover: #6e4a08;
  --accent-text: #fdfaf2;
  --accent-fill: rgba(150, 105, 15, 0.1);
  --accent-gradient: linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 55%, var(--accent-3) 100%);
  --bg-glow: rgba(150, 105, 15, 0.045);
  --green: #3f7a53;
  --red: #9c3f36;
  --yellow: #96690f;
  --green-fill: rgba(63, 122, 83, 0.11);
  --red-fill: rgba(156, 63, 54, 0.11);
  --yellow-fill: rgba(150, 105, 15, 0.11);
  --on-strong: #fdfaf2;
  --hover-overlay: rgba(60, 42, 10, 0.035);
  --modal-overlay: rgba(32, 29, 23, 0.4);
  --il-accent: #37518c;
  --us-accent: #2a6b46;
  --il-tint: rgba(55, 81, 140, 0.05);
  --us-tint: rgba(42, 107, 70, 0.05);
  --shadow-sm: 0 2px 10px rgba(80, 68, 40, 0.06);
  --shadow: 0 20px 44px rgba(80, 68, 40, 0.1);
  --shadow-gold: 0 4px 18px rgba(150, 105, 15, 0.12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 1400px 640px at 50% -14%, var(--bg-glow), transparent 68%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  color: var(--text);
  font-family: var(--font-sans);
  position: relative;
}
/* במצב בהיר מוותרים על טקסטורת הרעש (הייתה שקטה על רקע כהה, אבל על לבן
   נקי היא נראית "מגורען"/מלוכלכת - סותר את הבקשה ל"חלקה") - נשאר רק
   הזוהר הרדיאלי העדין למעלה, כנקודת אור יוקרתית שקטה. */
:root[data-theme="light"] body {
  background-image: radial-gradient(ellipse 1400px 640px at 50% -14%, var(--bg-glow), transparent 68%);
}

/* פס זהב דק בראש העמוד - חתימה ויזואלית קבועה, כמו "קו מותג" בבתי אופנה */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent-gradient);
  z-index: 50;
}

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

/* פס גלילה מוזהב דק - Chromium/Edge/Safari; בדפדפנים אחרים מתעלמים בשקט */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-2); border: 2px solid var(--bg); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* הכותרת העליונה בנויה כשורה אחת בגובה קבוע, ולא כשורת flex שמסתדרת לפי
   התוכן. הסיבה: קודם גובה הפס נגזר ממה שהיה בתוכו באותו רגע - תג הבריאות
   מזריק טקסט באורך משתנה (רשימת ה-jobs שנכשלו), ובעמודי פרטפוליו/מעקב יש
   כפתור "רענן" נוסף. נמדד: הפס קפץ בין 72px (הכל תקין) ל-193px עם התפריט
   שבור על ארבע שורות, ואותו עמוד נראה אחרת בכל טעינה לפי מצב ה-jobs.
   גובה קבוע + --topbar-h אחד מבטיחים שכל עמוד ייראה זהה בכל מצב. */
.topbar {
  --topbar-h: 64px;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 20px;
  height: var(--topbar-h);
  padding: 0 26px;
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: var(--shadow-sm);
}

.brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--accent);
  -webkit-text-fill-color: transparent;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.15s ease, opacity 0.15s ease; }
.nav-toggle-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle-open span:nth-child(2) { opacity: 0; }
.nav-toggle-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ‏flex-wrap: nowrap ‏+ min-width: 0 הם הצמד שמונע את השבירה לשתי שורות.
   ‏min-width: 0 הכרחי: פריט flex לא מתכווץ מתחת לרוחב התוכן שלו בלי זה, ולכן
   בלעדיו nav היה דוחף את הפס להישבר גם עם nowrap. עשרת הקישורים דורשים
   1055px במצבם הרחב, כלומר הם נשברו לשתי שורות בכל מסך מתחת ל-1394px -
   מה שכולל כל מסך לפטופ רגיל. הריווח נהיה נזיל (clamp) כדי שהם יצטמצמו
   בהדרגה במקום להישבר, וגלילה אופקית היא רשת הביטחון האחרונה. */
nav {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
nav::-webkit-scrollbar { display: none; }
nav a {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--text-dim);
  text-decoration: none;
  padding: 2px clamp(6px, 0.62vw, 15px) 0;
  font-size: clamp(0.76rem, 0.6vw, 0.82rem);
  font-weight: 600;
  letter-spacing: clamp(0.2px, 0.05vw, 1.1px);
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
}
nav a:hover { color: var(--text); }
nav a.active { color: var(--accent); border-bottom-color: var(--accent); text-shadow: 0 0 18px var(--accent-fill); }

/* ‏min-width שמור לרוחב התצורה הרחבה ביותר (תג בריאות + "רענן" + ערכת נושא
   + יציאה). בלעדיו אזור הפעולות התרחב ל-859px כשתג הבריאות היה ארוך, וגם
   נבדל בין עמוד לעמוד כי "רענן" קיים רק בפרטפוליו ובמעקב - כך שהתפריט
   התחיל בכל עמוד במקום אחר. */
.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  min-width: 218px;
  gap: 10px;
}

/* משבצת בגודל קבוע לתג הבריאות: תופסת מקום גם כשהכל תקין והתג ריק, אחרת
   התפריט היה זז הצידה בכל פעם שמצב המערכת משתנה. */
#health-badge {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 46px;
  justify-content: flex-end;
}

.btn-refresh {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 18px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.btn-refresh:hover { border-color: var(--accent); color: var(--accent); box-shadow: var(--shadow-gold); }
.btn-refresh:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-theme-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-theme-toggle:hover { border-color: var(--accent); transform: rotate(16deg); box-shadow: var(--shadow-gold); }

.container { max-width: 1240px; margin: 0 auto; padding: 34px 26px 56px; }

h1 {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  margin: 0 0 26px;
  padding-bottom: 16px;
  color: var(--text);
  position: relative;
}
h1::after {
  content: "";
  position: absolute;
  bottom: 0; right: 0;
  width: 64px;
  height: 3px;
  background: var(--accent-gradient);
}
h2 {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--text-dim);
  margin: 0 0 16px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
h2::after {
  content: "";
  position: absolute;
  bottom: -1px; right: 0;
  width: 42px;
  height: 1px;
  background: var(--accent);
}
h3 { font-size: 0.95rem; font-weight: 600; color: var(--text); margin: 0 0 10px; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); gap: 18px; margin-bottom: 28px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm), inset 0 2px 0 var(--accent-fill);
}

.stat-value {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  margin: 6px 0;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--text);
  -webkit-text-fill-color: transparent;
}
.stat-label { color: var(--text-dim); font-size: 0.82rem; letter-spacing: 0.2px; }

.up { color: var(--green); }
.down { color: var(--red); }
.stale-badge {
  display: inline-block;
  font-size: 0.66rem;
  letter-spacing: 0.3px;
  background: var(--accent-fill);
  color: var(--accent);
  border: 1px solid var(--border-accent);
  padding: 2px 10px;
  border-radius: 20px;
  margin-inline-start: 8px;
}
/* בתוך הפס העליון התג הוא מונה קומפקטי ("‏⚠️ 5") ולא משפט - הפירוט המלא
   עובר ל-title. קודם הוזרקה לכאן רשימת שמות ה-jobs המלאה, שנמדדה ב-859px
   ושברה את התפריט לארבע שורות. ראו checkSystemHealth ב-common.js. */
.topbar .stale-badge {
  margin-inline-start: 0;
  padding: 3px 9px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: help;
}

/* אזהרה (job שהצליח אבל רשם הודעה - למשל לוח ריבית שעומד להיגמר) - מובחנת
   ויזואלית מכשל אמיתי, שנשאר בצבע ה-accent הרגיל. ראו checkSystemHealth. */
.stale-badge.health-warning {
  background: var(--yellow-fill);
  color: var(--yellow);
  border-color: var(--yellow);
}
/* תשואת הטווח הנבחר בגרף המחיר (עמוד ניתוח חברה) - צבע .up/.down כבר מגיע
   דרך pctClass, זה רק המסגרת/הרקע של התג עצמו. ריק (בלי טקסט) לא מוצג. */
.price-history-return {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
  background: var(--surface-2);
}
.price-history-return:empty { display: none; }
.auto-badge {
  display: inline-block;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: var(--accent-fill);
  color: var(--accent);
  border: 1px solid var(--border-accent);
  padding: 1px 9px;
  border-radius: 20px;
  vertical-align: middle;
}

table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
th, td { padding: 12px 14px; text-align: start; border-bottom: 1px solid var(--border); font-size: 0.91rem; font-variant-numeric: tabular-nums; }
th { color: var(--accent); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.8px; background: var(--surface-2); border-bottom: 1px solid var(--border-accent); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--hover-overlay); }

form.inline-form {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
  margin-bottom: 24px; background: var(--surface); padding: 20px 22px;
  border-radius: var(--radius); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm), inset 0 2px 0 var(--accent-fill);
}
form.inline-form .field { display: flex; flex-direction: column; gap: 6px; }
form.inline-form label { font-size: 0.76rem; color: var(--text-dim); letter-spacing: 0.3px; text-transform: uppercase; }
form.inline-form input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 7px;
  padding: 9px 12px;
  font-size: 0.9rem;
  transition: box-shadow 0.15s ease;
}
form.inline-form input:focus, .cell-input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-fill);
}

/* סימון פוקוס אחיד לניווט במקלדת. חשוב במיוחד אחרי שהשדות מבטלים את
   ה-outline לטובת box-shadow - שנעלם לגמרי במצב ניגודיות גבוהה של Windows,
   ולכן מוסיפים כאן outline אמיתי שנשמר גם שם. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
form.inline-form input:focus-visible,
.cell-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* מצב ניגודיות גבוהה (Windows High Contrast): המערכת מבטלת רקעים, ולכן
   טקסט שנצבע דרך רקע-גרדיאנט עם -webkit-text-fill-color: transparent
   הופך *בלתי נראה לגמרי* - כולל סך שווי התיק, שהוא המספר המרכזי באתר. */
@media (forced-colors: active) {
  .stat-value,
  .portfolio-total-value,
  .valuation-result-price,
  .brand {
    -webkit-text-fill-color: currentColor;
    background: none;
  }
}

button.btn-primary {
  background: var(--accent-gradient);
  color: var(--accent-text);
  border: none;
  border-radius: 7px;
  padding: 11px 24px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
button.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-gold), var(--shadow); }
button.btn-primary:active { transform: translateY(0); }

button.btn-danger {
  background: transparent;
  border: 1px solid var(--red);
  color: var(--red);
  border-radius: 7px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 0.76rem;
  letter-spacing: 0.3px;
}
button.btn-danger:hover { background: var(--red); color: var(--on-strong); }

.section { margin-bottom: 38px; }
.empty-state { color: var(--text-dim); padding: 24px; text-align: center; font-style: italic; }
.error-banner {
  background: rgba(201, 107, 97, 0.12);
  border: 1px solid var(--red);
  color: var(--red);
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 0.9rem;
}
.toast {
  position: fixed;
  bottom: 22px;
  inset-inline-start: 22px; /* לא left קבוע - האתר RTL, זה מציב את ה-toast בצד ההתחלה (ימין) גם ב-RTL */
  background: var(--surface);
  border: 1px solid var(--border-accent);
  color: var(--text);
  padding: 12px 20px;
  border-radius: 9px;
  font-size: 0.85rem;
  box-shadow: var(--shadow);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 200;
}
.toast.show { opacity: 1; }
canvas { max-width: 100%; }

/* min(340px, 100%) ולא 340px קבוע: רצועת grid לא מתכווצת מתחת ל-min שלה,
   ולכן במסך 375px (עם ריפוד הכרטיס) הגרפים גלשו אל מחוץ למסך. */
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 18px; margin-bottom: 28px; }
.metric-card h3 { margin: 0 0 10px; font-size: 0.95rem; color: var(--text); }
/* flex-wrap: הכותרת מכילה גם קבוצת כפתורים (חודש/חצי שנה/שנה/5 שנים ~290px),
   ובלי גלישה היא גלשה מהמסך בנייד. */
.metric-card-header { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.metric-card-header h3 { margin: 0; flex: 1; }
.metric-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.toggle-group { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.toggle-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  padding: 6px 12px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
}
.toggle-btn.active { background: var(--accent-gradient); color: var(--accent-text); }
.toggle-btn:hover:not(.active) { background: var(--hover-overlay); }

.expand-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 7px;
  width: 28px;
  height: 28px;
  font-size: 0.9rem;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
}
.expand-btn:hover { border-color: var(--accent); color: var(--accent); }

.chart-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--modal-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
}
.chart-modal-overlay.hidden { display: none; }
.chart-modal {
  background: var(--surface);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg);
  width: min(1100px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 24px 28px;
  overflow: auto;
  box-shadow: var(--shadow);
}
.chart-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.chart-modal-header h3 { margin: 0; font-size: 1.2rem; font-family: var(--font-serif); }
.chart-modal-close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 7px;
  width: 32px;
  height: 32px;
  font-size: 1.1rem;
  cursor: pointer;
}
.chart-modal-close:hover { border-color: var(--red); color: var(--red); }
.chart-modal-body { flex: 1; min-height: 400px; position: relative; }

.cell-input {
  width: 90px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 5px 7px;
  font-size: 0.88rem;
  transition: box-shadow 0.15s ease;
}
.cell-input.saving { opacity: 0.5; }
table.wide-table { min-width: 1400px; }
/* position: relative - בלי זה אלמנט absolute בתוך הטבלה (הכיתוב הנסתר "פעולות"
   בכותרת) נמדד מול העמוד ולא מול התיבה, ובמסך של ~1000px גרר את כל העמוד
   131px הצידה - הטבלה עצמה גוללת בתוך התיבה כמו שצריך */
.table-scroll { overflow-x: auto; position: relative; }
.small-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.75rem;
  cursor: pointer;
}
.small-btn:hover { border-color: var(--accent); color: var(--accent); }

.assumptions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; margin-bottom: 20px; }
.assumptions-grid .field label { font-size: 0.78rem; color: var(--text-dim); margin-bottom: 4px; display: block; text-transform: uppercase; letter-spacing: 0.3px; }
.assumptions-grid .field input { width: 100%; }
.valuation-result-price {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--text);
  -webkit-text-fill-color: transparent;
}
.valuation-verdict-buy { color: var(--green); }
.valuation-verdict-sell { color: var(--red); }

.macro-country-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 26px 28px;
  margin-bottom: 30px;
  box-shadow: var(--shadow-sm);
}
.macro-country-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  margin: 0 0 18px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--border);
}
.macro-country-il { background: var(--il-tint); border-color: var(--il-accent); box-shadow: var(--shadow-sm), inset 0 2px 0 var(--il-accent); }
.macro-country-il .macro-country-title { border-color: var(--il-accent); color: var(--il-accent); }
.macro-country-us { background: var(--us-tint); border-color: var(--us-accent); box-shadow: var(--shadow-sm), inset 0 2px 0 var(--us-accent); }
.macro-country-us .macro-country-title { border-color: var(--us-accent); color: var(--us-accent); }
.macro-country-group .grid { margin-bottom: 18px; }

.portfolio-total-card {
  border-color: var(--border-accent);
  padding: 24px 26px 12px;
  box-shadow: var(--shadow), inset 0 2px 0 var(--accent);
}
.portfolio-total-value {
  font-family: var(--font-serif);
  font-size: 2.3rem;
  font-weight: 700;
  margin: 10px 0 16px;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--accent);
  -webkit-text-fill-color: transparent;
}
.portfolio-total-currency { font-size: 1.02rem; font-weight: 600; color: var(--text-dim); -webkit-text-fill-color: var(--text-dim); }
.portfolio-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--border);
  font-size: 0.92rem;
}
.portfolio-breakdown-row .label { color: var(--text-dim); }

.currency-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 26px 26px;
  margin-bottom: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-sm), inset 0 2px 0 var(--accent-fill);
}
.currency-group-title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  margin: 0 0 18px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.currency-group .chart-grid { margin-bottom: 0; }

/* מדדי סיכון (בטא משוקלל / Max Drawdown / קורלציה) בעמוד הפרטפוליו */
.risk-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
  font-size: 0.92rem;
}
.risk-stat-row:first-child { border-top: none; }
.risk-stat-row .label { color: var(--text-dim); }
.corr-table-wrap { overflow-x: auto; }
.corr-table { border-collapse: collapse; font-size: 0.86rem; }
.corr-table th, .corr-table td {
  padding: 7px 10px;
  text-align: center;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.corr-table th { color: var(--text-dim); font-weight: 600; background: var(--surface-2); }
.corr-diag { background: var(--surface-2); color: var(--text-dim); }
.corr-high { background: var(--red-fill); }
.corr-mid { background: var(--yellow-fill); }
.corr-low { background: var(--green-fill); }

/* עמוד "ניתוח חברה" - עמודה קבועה בצד ימין (יחסים פיננסיים + קונצנזוס
   אנליסטים) לצד תוכן ראשי גמיש (גרפי הדוחות) - .company-sidebar מוצהר
   ראשון ב-DOM, וב-RTL זה ממקם אותו אוטומטית מימין בלי טריקים נוספים. */
.company-layout { display: flex; gap: 24px; align-items: flex-start; margin-bottom: 8px; }
.company-sidebar {
  flex: 0 0 300px;
  width: 300px;
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.company-main { flex: 1; min-width: 0; }

.sidebar-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm), inset 0 2px 0 var(--accent-fill);
}
.sidebar-card h3 {
  font-family: var(--font-serif);
  font-size: 0.92rem;
  margin: 0 0 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
  font-size: 0.86rem;
}
.stat-row:first-of-type { border-top: none; }
.stat-row-label { color: var(--text-dim); }
.stat-row-value { font-weight: 700; font-family: var(--font-serif); color: var(--text); white-space: nowrap; }
.stat-row-value.accent { color: var(--accent); }

@media (max-width: 900px) {
  .company-layout { flex-direction: column; }
  .company-sidebar { width: 100%; flex: none; position: static; }
}

/* פס טווח 52 שבועות - direction:ltr מכוון (לא תלוי RTL של הדף) כדי ששפל
   תמיד יהיה בקצה השמאלי ושיא בקצה הימני, כמו מד/סרגל מספרים מוסכם. */
.range-52w { display: flex; align-items: center; gap: 10px; margin: 2px 0 18px; font-size: 0.8rem; color: var(--text-dim); direction: ltr; }
.range-52w-track { position: relative; flex: 1; height: 6px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--border); }
.range-52w-marker {
  position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface); box-shadow: var(--shadow-sm);
  transform: translate(-50%, -50%);
}

.ai-card { margin-bottom: 28px; }
.ai-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.ai-card-header h3 { margin: 0; display: flex; align-items: center; gap: 9px; }
.ai-text p { margin: 0 0 12px; line-height: 1.75; color: var(--text); font-size: 0.96rem; }
.ai-text p:last-child { margin-bottom: 0; }

/* ---- לוח אירועים (עמוד חדשות ולוח אירועים) - רשת לוח-שנה אמיתית לחודש
   הקרוב, לא טבלה שטוחה. אירועי מאקרו (Fed/בנק ישראל) ואירועי חברות (דוחות
   רבעוניים) מסומנים בצבע שונה בתוך תא היום. ---- */
.cal-weekdays, .cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.cal-weekdays { margin-bottom: 8px; }
.cal-weekday {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dim);
  padding-bottom: 4px;
}
.cal-cell {
  min-height: 92px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 7px 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cal-cell.cal-out-of-range { opacity: 0.35; }
.cal-cell.cal-today {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: var(--accent-fill);
}
.cal-cell-date { font-size: 0.86rem; font-weight: 700; color: var(--text); }
.cal-month-label { font-size: 0.72rem; font-weight: 500; color: var(--accent); }
.cal-cell-events { display: flex; flex-direction: column; gap: 3px; }
.cal-event {
  font-size: 0.72rem;
  line-height: 1.3;
  padding: 2px 5px;
  border-radius: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
/* אירועים בלוח לחיצים - "מה קרה בפועל" (calendar.py: /calendar/{id}/detail) */
.cal-event:hover { filter: brightness(1.15); }
.cal-event:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cal-event-macro { background: var(--accent-fill); color: var(--accent); }
.cal-event-company { background: var(--green-fill); color: var(--green); }
.cal-event-ticker { font-weight: 700; }
/* "+N נוספות" (עמוד דיווחי תוצאות - יום עמוס בעונת דוחות חורג מ-MAX_PILLS_PER_CELL
   ב-earnings.js) - עיצוב מושתק בכוונה, לא פיל אירוע אמיתי. */
.cal-event-more { background: transparent; color: var(--text-dim); font-weight: 500; padding: 2px 5px; }
/* לוח השבוע בעמוד דיווחי תוצאות (earnings.js) - שורה אחת של 7 תאים, אבל כל
   תא יכול להכיל הרבה יותר חברות מלוח האירועים הרגיל - גובה גדול יותר. */
#earnings-week-table .cal-cell { min-height: 150px; }

/* ===================================================================
   מצב נייד - תפריט ניווט קורס להמבורגר (במקום 6 קישורים עמוסים בשורה
   אחת), וטבלאות רחבות (פרטפוליו/מעקב/תנועות - class="responsive-table")
   הופכות לכרטיסים מוערמים במקום לאלץ גלילה אופקית על מסך צר. הכרטיסים
   נבנים מ-data-label על כל <td> (נוסף ב-JS), לא מ-nth-child עיוור, כדי
   שהתווית תמיד תואמת את התוכן גם אם עמודה תתווסף/תוסר בעתיד.
   =================================================================== */
/* ===================================================================
   קריסת התפריט להמבורגר. הסף נמדד ב-viewport אמיתי ולא נבחר שרירותית:
   הוא הרוחב הראשון שבו *כל* קישורי הניווט נכנסים לשורה אחת בלי חיתוך.
   מתחת לסף עדיף תפריט נפתח, כך שאף פעם אין מצב ביניים שבו חלק מהקישורים
   מוסתר או שהפס נשבר לשתי שורות.

   הסף תלוי במספר הקישורים, ולכן **חייב להימדד מחדש בכל הוספה או הסרה
   של עמוד**. עם 10 קישורים הוא היה 1300px; הוספת "סקטורים" העלתה אותו
   ל-1392px, ובלי העדכון הזה נוצר שוב חיתוך של 70px ברוחב 1300. "בריאות האתר"
   (12 קישורים) היה מעלה אותו ל-1548px - מעל רוחב המסך הראשי כאן (1536px
   ב-125%), כלומר תפריט המבורגר במסך מלא. לכן הריווח בין הקישורים הודק
   (padding 0.72vw->0.62vw, ריווח אותיות 0.07vw->0.05vw) והסף נמדד מחדש:
   1456px.
   =================================================================== */
/* ‏.98 ולא 1299 עגול: במסכים עם devicePixelRatio שברי (כאן 1.25) שאילתת
   max-width מפסיקה להתאים כבר בדיוק ברוחב הסף בגלל עיגול תת-פיקסלי, ונוצר
   פס של 1px בלי אף כלל. נמדד בפועל בדפדפן של המחשב הזה. */
@media (max-width: 1455.98px) {
  .nav-toggle { display: flex; }
  /* כאן הפס *כן* רשאי להישבר - התפריט נפתח מתחתיו - ולכן הגובה הקבוע של
     המסך הרחב מבוטל. כשהתפריט סגור הפס נשאר בדיוק באותו גובה. */
  .topbar {
    flex-wrap: wrap;
    align-items: center;
    height: auto;
    min-height: var(--topbar-h);
    padding-top: 10px;
    padding-bottom: 10px;
  }
  /* ‏nav מוסתר במצב הזה, ולכן נעלם הפריט עם flex:1 שדחף את הפעולות לקצה
     והן נותרו תלויות באמצע הפס (נמדד: 583px מהקצה ברוחב 1024px).
     margin אוטומטי מחזיר אותן לקצה בלי להסתמך על אח גמיש. */
  .topbar-actions { min-width: 0; margin-inline-start: auto; }
  nav {
    display: none;
    order: 10;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    background: var(--surface-2);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
  }
  nav.nav-open { display: flex; }
  nav a {
    display: block;
    flex: 0 0 auto;
    padding: 15px 18px;
    border-bottom: 1px solid var(--border);
    text-align: center;
    font-size: 0.85rem;
    letter-spacing: 0.4px;
  }
  nav a:last-child { border-bottom: none; }
  nav a.active { background: var(--accent-fill); }
}

/* בטלפון הלוגו יורד: המבורגר + לוגו + ארבע הפעולות יחד דרשו 427px ברוחב
   מסך של 375px, כך שאזור הפעולות נשבר לשורה שנייה והפס תפח ל-108px. שם
   העמוד ממילא מופיע ב-h1 מיד מתחת, וב-PWA גם בכותרת החלון. */
@media (max-width: 640px) {
  .topbar .brand { display: none; }
}

@media (max-width: 860px) {
  .topbar { gap: 10px 12px; padding-inline: 16px; }

  .container { padding: 18px 14px 40px; }
  h1 { font-size: 1.32rem; margin-bottom: 18px; }
  .portfolio-total-value { font-size: 1.75rem !important; }

  form.inline-form { padding: 14px; gap: 10px; }
  form.inline-form .field { flex: 1 1 140px; }
  /* !important נדרש כאן: כמה שדות בתבניות מגדירים רוחב קבוע ב-style inline
     (למשל style="width:90px"), ו-inline תמיד גובר על גיליון סגנונות - כך
     שבנייד נוצרו שדות-גדם צרים בתוך תאים מתוחים. */
  form.inline-form input { width: 100% !important; }

  button.btn-primary, .btn-refresh, .small-btn, button.btn-danger { padding-top: 11px; padding-bottom: 11px; }

  .responsive-table.wide-table { min-width: 0; }
  /* רק טבלאות שהופכות לכרטיסים מוותרות על הגלילה האופקית.
     תוקן באג אמיתי: הכלל חל קודם על *כל* .table-scroll, כולל טבלאות שאין
     להן responsive-table (תרחישי P/E, נוסחאות שערוך, תרחישים שמורים,
     דיווחי SEC) - ואז הן לא יכלו לגלול, דחפו את רוחב המסמך כולו וגרמו
     לגלילה אופקית של כל העמוד בנייד. */
  .table-scroll:has(> .responsive-table) { overflow-x: visible; }
  .responsive-table thead { display: none; }
  .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td { display: block; width: 100%; }
  .responsive-table tr {
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 4px 14px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
  }
  .responsive-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border-top: 1px solid var(--border);
    text-align: end; /* לוגי ולא 'left' פיזי - נשאר נכון גם באי LTR בתוך עמוד RTL */
  }
  .responsive-table tr td:first-child {
    border-top: none;
    font-weight: 700;
    font-family: var(--font-serif);
    font-size: 1rem;
  }
  .responsive-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-dim);
    margin-inline-end: 12px;
    flex-shrink: 0;
  }
  .responsive-table tr td:first-child::before,
  .responsive-table td:not([data-label])::before {
    content: none;
    margin: 0;
  }

  /* לוח האירועים - 7 עמודות עדיין נכנסות במסך צר, אבל דוחסים ריווח/גופן
     ומצמצמים לתגית טיקר בלבד בתוך התא (בלי תיאור הסוג) כדי שלא יידחס. */
  .cal-cell { min-height: 62px; padding: 4px 3px; gap: 2px; }
  .cal-cell-date { font-size: 0.72rem; }
  .cal-month-label { display: block; font-size: 0.6rem; }
  .cal-weekday { font-size: 0.68rem; }
  .cal-event { font-size: 0; padding: 1px 3px; }
  .cal-event-ticker { font-size: 0.62rem; }
}

/* ===================================================================
   דיון "שור מול דוב" (עמוד ניתוח חברה) - בועות צ'אט.
   העמוד כולו RTL, ולכן flex-start = ימין ו-flex-end = שמאל: השור
   (ירוק) מיושר לימין והדוב (אדום) לשמאל, כפי שהוגדר בפיצ'ר.
   כל הצבעים מגיעים מטוקני הערכה (--green/--red/--surface...) ולכן
   מצב בהיר/כהה עובד אוטומטית בלי כללים כפולים.
   =================================================================== */
.debate-stream { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.debate-bubble {
  max-width: 78%;
  padding: 12px 15px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  line-height: 1.7;
  font-size: 0.93rem;
  position: relative;
}
.debate-bubble-bull {
  align-self: flex-start;   /* ב-RTL: צמוד לימין */
  background: var(--green-fill);
  border-color: var(--green);
}
.debate-bubble-bear {
  align-self: flex-end;     /* ב-RTL: צמוד לשמאל */
  background: var(--red-fill);
  border-color: var(--red);
}
.debate-speaker {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-bottom: 5px;
}
.debate-bubble-bull .debate-speaker { color: var(--green); }
.debate-bubble-bear .debate-speaker { color: var(--red); }
/* סמן ההקלדה - נעלם ברגע שהבועה סיימה להיכתב (ראו debate.js) */
.debate-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  vertical-align: text-bottom;
  background: currentColor;
  margin-inline-start: 2px;
  animation: debate-blink 1s steps(2, start) infinite;
}
@keyframes debate-blink { to { visibility: hidden; } }

/* תיבת הסיכום - ניטרלית בכוונה: לא ירוקה ולא אדומה, רוחב מלא, בלי
   יישור לאף צד, כדי שלא תיקרא כ"ניצחון" של אחד הצדדים. */
.debate-verdict {
  align-self: stretch;
  max-width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-top: 4px;
}
.debate-verdict h4 {
  margin: 0 0 8px;
  font-size: 0.85rem;
  color: var(--text-dim);
  font-weight: 700;
}
.debate-verdict p { margin: 0; line-height: 1.75; font-size: 0.93rem; color: var(--text); }

.debate-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* כפתור דו-מצבי: "דלג" בזמן ההקלדה, "רענן דיון" אחריה */
.btn-secondary {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-secondary:disabled { opacity: 0.5; cursor: default; }

/* ספינר טעינה - הקריאה ל-Gemini לוקחת עשרות שניות */
.debate-spinner {
  display: inline-block;
  width: 15px; height: 15px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: debate-spin 0.8s linear infinite;
  margin-inline-end: 8px;
  vertical-align: -3px;
}
@keyframes debate-spin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  .debate-bubble { max-width: 92%; font-size: 0.88rem; }
}
/* מכבד העדפת מערכת לצמצום תנועה: בלי הבהוב סמן ובלי סיבוב ספינר.
   אפקט ההקלדה עצמו מדולג ב-JS (ראו prefersReducedMotion). */
@media (prefers-reduced-motion: reduce) {
  .debate-cursor { animation: none; }
  .debate-spinner { animation-duration: 2s; }
}

/* ===================================================================
   מחירים חיים *בתוך* טבלאות הפרטפוליו והמעקב (אין עמוד ייעודי - ראו
   live_prices.js / live_quotes.py).
   =================================================================== */
.live-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--text-dim);
  white-space: nowrap;
}
/* נקודה ירוקה פועמת - סימן חי ודיסקרטי שהזרם מחובר, בלי לתפוס מקום בטבלה */
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: live-pulse-kf 1.8s ease-in-out infinite;
}
@keyframes live-pulse-kf {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* הבהוב לפי כיוון התנועה. רק רקע התא - לא הטקסט - כדי שהמספר יישאר קריא
   ברגע השינוי. האנימציה קצרה בכוונה: בעדכון כל חצי שנייה, הבהוב ארוך היה
   מצטבר לרעש מתמשך במקום לסמן אירוע בודד. */
@keyframes live-flash-up-kf {
  from { background: var(--green-fill); }
  to { background: transparent; }
}
@keyframes live-flash-down-kf {
  from { background: var(--red-fill); }
  to { background: transparent; }
}
.live-flash-up { animation: live-flash-up-kf 0.7s ease-out; }
.live-flash-down { animation: live-flash-down-kf 0.7s ease-out; }
/* מכבד העדפת מערכת לצמצום תנועה - המחיר עדיין מתעדכן, רק בלי ההבהוב. */
@media (prefers-reduced-motion: reduce) {
  .live-flash-up, .live-flash-down { animation: none; }
  .live-dot { animation: none; }
}

/* ---- כרטיס "שווי תיק לאורך זמן" (עמוד פרטפוליו) - כותרת עם תג תשואה
   ומתג מעבר בין תצוגת שווי לתצוגת תשואה %. ראו portfolio_returns.py
   להסבר על נטרול ההפקדות/משיכות (TWR). ---- */
.history-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.history-card-header h3 { margin: 0; display: flex; align-items: center; gap: 9px; }
/* מוצג רק כשהיו תזרימים בפועל - מסביר למה המספר שונה מ"סוף פחות התחלה" */
.history-flow-note {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 11px;
  margin-bottom: 10px;
  line-height: 1.6;
}
/* תג מדד הייחוס לצד תג תשואת התיק - מכוון להיות משני ויזואלית (ניטרלי,
   בלי צבע ירוק/אדום) כדי שלא יתחרה בתשואה של התיק עצמו. */
/* תג מסחר מוקדם/מאוחר - מעקב/פרטפוליו/ניתוח חברה. מושתק ויזואלית יחסית
   למחיר הרגיל (מסגרת מקווקוות, לא רקע מלא) - זה נתון משני/זהיר, לא הציטוט
   הרשמי של השוק. ראו common.js:prepostBadgeHtml. */
.prepost-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px dashed var(--border);
  color: var(--text-dim);
  white-space: nowrap;
}
.prepost-badge-label { font-weight: 600; }
.prepost-badge-price { font-weight: 700; color: var(--text); }

/* ---- כרטיסי התפלגות בעמוד פרטפוליו: טבעת + רשימת דירוג.
   ה-legend המובנה של Chart.js נדחס לבלתי-קריא מעל ~8 פריטים ולא מציג
   ערכים/אחוזים - הרשימה הזו מחליפה אותו ונותנת דירוג, פס יחסי ואחוז. ---- */
.alloc-card { display: flex; flex-direction: column; }
.alloc-chart-wrap { height: 190px; position: relative; margin-bottom: 12px; }

.alloc-legend {
  display: flex;
  flex-direction: column;
  gap: 5px;
  /* גלילה פנימית: תיק עם 20 אחזקות לא "מותח" את הכרטיס לאורך אינסופי
     ומשאיר את שלושת הכרטיסים באותו גובה. */
  max-height: 190px;
  overflow-y: auto;
  padding-inline-end: 4px;
}
.alloc-row {
  display: grid;
  grid-template-columns: 18px 9px minmax(52px, auto) 1fr 44px;
  align-items: center;
  gap: 7px;
  font-size: 0.76rem;
}
.alloc-rank { color: var(--text-dim); font-size: 0.68rem; text-align: center; }
.alloc-dot { width: 9px; height: 9px; border-radius: 50%; }
.alloc-label {
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alloc-bar {
  height: 5px;
  border-radius: 3px;
  background: var(--surface-2);
  overflow: hidden;
}
.alloc-bar-fill { display: block; height: 100%; border-radius: 3px; opacity: 0.85; }
.alloc-pct { color: var(--text-dim); text-align: start; font-variant-numeric: tabular-nums; }

/* ===================================================================
   ביצועי סקטורים (עמוד ראשי) - ויזואליזציה מותאמת ב-HTML/CSS ולא
   Chart.js. עמודות מתפצלות מציר אפס מרכזי, גרדיאנט עדין, קצוות
   מעוגלים וטיפוגרפיה אמיתית. ראו ההערה ב-main.js/drawSectorChart.
   =================================================================== */
.sector-viz { display: flex; flex-direction: column; gap: 2px; }

.sector-row {
  display: grid;
  grid-template-columns: 116px 1fr 64px;
  align-items: center;
  gap: 14px;
  padding: 5px 8px;
  border-radius: 8px;
  position: relative;
}
.sector-row:hover { background: var(--hover-overlay); }

.sector-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  text-align: start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* מדד הייחוס - שורה מובחנת: קו זהב דק בהתחלה ורקע עדין, כדי שהעין
   תמצא אותו מיד בלי לקרוא את השמות. */
.sector-row.is-benchmark {
  background: var(--accent-fill);
  box-shadow: inset 3px 0 0 var(--accent);
}
.sector-row.is-benchmark .sector-name { color: var(--accent); font-weight: 700; }

.sector-track { position: relative; height: 22px; }

/* ציר האפס - קו אנכי דק שממוקם לפי --zero (ר' drawSectorChart), לא
   בהכרח במרכז. הפס עצמו ממופה פיזית (left/right) ולא לוגית, כי המשמעות
   כאן היא "עלייה/ירידה" ולא "תחילת/סוף טקסט". */
.sector-zero {
  position: absolute;
  inset-block: -1px;
  left: var(--zero, 50%);
  width: 1px;
  background: var(--border);
}

.sector-bar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 14px;
  /* המעבר הוא מה שהופך החלפת טווח מ"ציור מחדש" לתנועה שנקראת רציפה */
  transition: width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
/* חיובי גדל ימינה מציר האפס, שלילי שמאלה - שני הכיוונים מעוגלים רק בקצה
   החיצוני, כך שהם "יוצאים" מציר האפס ולא מרחפים לידו. */
.sector-bar.to-pos { left: var(--zero, 50%); border-radius: 0 7px 7px 0; }
.sector-bar.to-neg { right: calc(100% - var(--zero, 50%)); border-radius: 7px 0 0 7px; }

/* גרדיאנט עדין במקום צבע שטוח - מה שמבדיל בין "עמודה" ל"עמודה מעוצבת" */
.sector-bar.pos.to-pos { background: linear-gradient(90deg, color-mix(in srgb, var(--green) 55%, transparent), var(--green)); }
.sector-bar.neg.to-neg { background: linear-gradient(270deg, color-mix(in srgb, var(--red) 55%, transparent), var(--red)); }
.sector-bar.benchmark.to-pos { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), var(--accent)); }
.sector-bar.benchmark.to-neg { background: linear-gradient(270deg, color-mix(in srgb, var(--accent) 55%, transparent), var(--accent)); }

/* הערכים בטור קבוע ומיושר ולא צפים בקצה העמודה: המספרים נקראים כטבלה
   (tabular-nums, סימן האחוז מיושר), ואין מצב שתווית של עמודה קצרה בצד
   הצר נחתכת מחוץ לגרף. */
.sector-val {
  font-size: 0.78rem;
  font-weight: 700;
  font-family: var(--font-serif);
  font-variant-numeric: tabular-nums;
  text-align: start;
  white-space: nowrap;
}
.sector-val.pos { color: var(--green); }
.sector-val.neg { color: var(--red); }
.sector-val.benchmark { color: var(--accent); }

/* הציר מיושר בדיוק לרוחב הפס (שוליים = טור השם + טור הערך + הרווחים),
   ותווית ה-0% יושבת על ציר האפס עצמו ולא במרכז הגיאומטרי. */
.sector-axis {
  position: relative;
  height: 15px;
  margin: 10px 0 0;
  margin-inline-start: 138px;
  margin-inline-end: 86px;
  font-size: 0.68rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  border-top: 1px solid var(--border);
  padding-top: 6px;
}
.sector-axis span { position: absolute; top: 6px; white-space: nowrap; }
.sector-axis .ax-min { left: 0; }
.sector-axis .ax-max { right: 0; }
.sector-axis .ax-zero {
  left: var(--zero, 50%);
  transform: translateX(-50%);
  color: var(--text);
  font-weight: 600;
}

@media (max-width: 640px) {
  .sector-row { grid-template-columns: 84px 1fr 56px; gap: 8px; }
  .sector-name { font-size: 0.74rem; }
  .sector-val { font-size: 0.68rem; }
  .sector-axis { margin-inline-start: 100px; margin-inline-end: 72px; }
}
/* הפחתת תנועה - העמודות עדיין נכונות, רק בלי ההנפשה */
@media (prefers-reduced-motion: reduce) {
  .sector-bar { transition: none; }
}

/* כותרת ביצועי הסקטורים + בורר הטווח (עמוד ניתוח חברה, מתחת לרצועת
   מבט השוק). ראו sector_performance.py. */
.sector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 18px 0 10px;
}
#sector-performance { min-height: 240px; }

/* ---- "מבט שוק" (עמוד ניתוח חברה) - רצועת מדדים/זהב/ביטקוין, גוללת
   אופקית במקום נשברת לשורות - קורא כמו טיקר-טייפ קומפקטי, לא כרטיסי
   .grid רגילים (שהיו תופסים יותר מדי גובה למידע קטן כזה). ---- */
.market-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 6px;
}
.market-chip {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 118px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.market-chip-name { font-size: 0.72rem; color: var(--text-dim); white-space: nowrap; }
.market-chip-price { font-size: 1.02rem; font-weight: 700; font-family: var(--font-serif); }

/* קובייה לחיצה - פותחת את גרף המחיר שמתחתיה (main.js). התנועה כאן היא
   transform/box-shadow בלבד: ראו האזהרה בראש הקובץ על transition לצבעים. */
.market-chip[role="button"] {
  cursor: pointer;
  user-select: none;
  transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.market-chip[role="button"]:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.market-chip[role="button"]:active { transform: translateY(0); }
/* הקובייה שהגרף שלה פתוח. טבעת זהב ולא שינוי רקע, כדי שהמחיר והשינוי
   היומי בתוכה ייקראו בדיוק כמו בשאר הקוביות. */
.market-chip.is-active {
  box-shadow: 0 0 0 1.5px var(--accent), var(--shadow-gold), var(--shadow-sm);
}

/* ‏hidden חייב לנצח: לאתר אין כלל [hidden] משלו, ו-.card לבדו לא מסתיר. */
.market-history[hidden] { display: none !important; }
.market-history {
  margin-top: 10px;
  animation: riseIn 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.market-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.market-history-title { display: flex; align-items: center; gap: 10px; }
.market-history-title h3 { margin: 0; font-family: var(--font-serif); font-size: 1.1rem; }
.market-history-controls { display: flex; align-items: center; gap: 8px; }
.market-history-close { padding: 5px 10px; font-size: 0.8rem; line-height: 1; }
.market-history-body { position: relative; }
.market-history-status:empty { display: none; }
.market-history-status {
  font-size: 0.8rem;
  color: var(--text-dim);
  text-align: center;
  padding: 8px 0 2px;
}

/* ---- רוחב השוק (עמוד ראשי) ---- */
.breadth-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 18px 0 6px; }
.breadth-verdict {
  background: var(--surface);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 14px;
  font-size: 0.9rem;
  line-height: 1.6;
}
.breadth-note { font-size: 0.78rem; color: var(--yellow); margin-bottom: 10px; }
.breadth-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 12px;
}
.breadth-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 15px;
  box-shadow: var(--shadow-sm);
}
.breadth-tile-label { font-size: 0.74rem; color: var(--text-dim); letter-spacing: 0.3px; }
.breadth-tile-value { font-family: var(--font-serif); font-size: 1.45rem; font-weight: 700; margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.breadth-vs { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 400; color: var(--text-dim); }
.breadth-meter { height: 6px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
/* פיצול שיאים/שפלים: הירוק הוא החלק של השיאים, והשאר (הרקע האדום) השפלים. */
.breadth-meter.split { background: var(--red-fill); }
.breadth-tile-hint { font-size: 0.7rem; color: var(--text-dim); margin-top: 7px; }
.breadth-delta { font-weight: 600; }
.breadth-universe { font-size: 0.72rem; color: var(--text-dim); margin: 8px 2px 14px; }

.breadth-ew { margin-top: 2px; }
.breadth-ew-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.breadth-ew-head h3 { margin: 0; }
.breadth-ew-body {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}
.breadth-ew-table { box-shadow: none; }
.breadth-ew-table td, .breadth-ew-table th { padding: 8px 12px; }
.breadth-spark-wrap { min-width: 0; }
.breadth-spark-label { font-size: 0.74rem; color: var(--text-dim); margin-bottom: 6px; }
.breadth-spark { width: 100%; height: 76px; display: block; }
.breadth-spark-base { stroke: var(--border); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.breadth-spark-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.breadth-spark.up .breadth-spark-line { stroke: var(--green); }
.breadth-spark.down .breadth-spark-line { stroke: var(--red); }
.breadth-spark-legend { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--text-dim); margin-top: 4px; }
@media (max-width: 760px) {
  .breadth-ew-body { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .market-chip[role="button"] { transition: none; }
  .market-chip[role="button"]:hover { transform: none; }
  .market-history { animation: none; }
}

.benchmark-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
  color: var(--text-dim);
  border: 1px dashed var(--border);
}

/* ---- מסנן מניות (screener) ----
   הפאנל העליון מקבץ את כל בקרות הסינון בכרטיס אחד, והתוצאות יושבות מתחתיו
   בטבלה רגילה של האתר - כדי שהעמוד ייקרא כמו שאר האתר ולא ככלי נפרד. */
.screener-panel { padding: 16px 18px; }

.screener-quickbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  align-items: end;
}
.screener-search { grid-column: span 2; }
/* ‏min-width:0 חובה: פריט בגריד לא יורד מתחת לרוחב התוכן המינימלי שלו,
   ובורר "ענף" מכיל שמות ארוכים ("Diversified Telecommunication Services")
   שדחפו אותו אל מחוץ למסך. עם זה הבורר נחתך יפה במקום לגלוש. */
.screener-quickbar .field { margin: 0; min-width: 0; }
.screener-quickbar .field select,
.screener-quickbar .field input { width: 100%; min-width: 0; }

.screener-filters { margin-top: 14px; }
.screener-empty-filters {
  font-size: 0.8rem;
  color: var(--text-dim);
  padding: 6px 2px;
}

/* התנאים יושבים בגריד ולא כ"צ'יפים" בשורה זורמת: קודם הם נדחסו זה על זה
   ברוחב צר ונראו מבולגנים. עכשיו לכל תנאי רוחב מינימלי מובטח, והשם/הטווח
   מיושרים אנכית בין השורות גם כשאורכי התוויות שונים מאוד. */
.screener-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 8px;
}
.screener-filter-row {
  display: grid;
  /* minmax(0,…) הכרחי: בלעדיו תוכן ארוך מרחיב את העמודה במקום להיחתך,
     וזה בדיוק מה שגרם לשורות לגלוש אחת על השנייה. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--surface-2, var(--surface));
  border: 1px solid var(--border);
  border-radius: 10px;
}
.screener-filter-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.screener-filter-range {
  width: 100%;
  min-width: 0;
  font-size: 0.78rem;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
}
.screener-filter-remove {
  border: none;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 50%;
}
.screener-filter-remove:hover { background: var(--hover-overlay); color: var(--red); }

.screener-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.screener-actions-spacer { flex: 1 1 auto; }
.screener-preset-select { max-width: 190px; }

.screener-summary {
  margin: 16px 0 10px;
  font-size: 0.86rem;
  color: var(--text-dim);
}
.screener-summary strong { color: var(--text); font-size: 1.05rem; font-family: var(--font-serif); }

.screener-table th { white-space: nowrap; cursor: pointer; user-select: none; }
.screener-table th:hover { color: var(--accent); }
.screener-table th.sorted { color: var(--accent); }
.screener-table td { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* שם/סקטור הם הטקסט היחיד בטבלה מספרית - נחתכים כדי שהמספרים לא יידחקו */
.screener-table .screener-text {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: normal;
}
/* קישור טיקר - משותף לטבלת המסנן ולטבלת המעקב, כדי שהתנהגות הלחיצה
   והמראה יהיו זהים בשתיהן. */
.screener-ticker, .ticker-link { font-weight: 700; text-decoration: none; color: var(--accent); }
.screener-ticker:hover, .ticker-link:hover { text-decoration: underline; }

.screener-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 16px 0 4px;
  font-size: 0.82rem;
  color: var(--text-dim);
}

/* מצב הכיסוי: מוצג כפס התקדמות ולא כאזהרה אדומה - זה תהליך שרץ כרגיל
   בבנייה הראשונה, לא תקלה. */
.screener-coverage-warn {
  padding: 11px 14px;
  margin-bottom: 14px;
  font-size: 0.82rem;
  line-height: 1.5;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--accent-fill);
  box-shadow: inset 3px 0 0 var(--accent);
}
.screener-coverage-ok {
  margin-bottom: 14px;
  font-size: 0.8rem;
  color: var(--text-dim);
}
.screener-coverage-bar {
  display: block;
  height: 4px;
  margin-top: 8px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
}
.screener-coverage-bar > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  transition: width 0.4s ease;
}

@media (max-width: 700px) {
  .screener-search { grid-column: span 1; }
  .screener-actions-spacer { display: none; }
  .screener-preset-select { max-width: 100%; }
  /* עמודה אחת ברוחב צר - שתי עמודות היו דוחסות את בורר הטווח עד שהתווית
     שלו נחתכת באמצע ("מעל 2 מיליא…"). */
  .screener-filter-grid { grid-template-columns: 1fr; }
}

/* ---- דוחות כספיים מלאים (עמוד ניתוח חברה, מתחת לגרפים) ---- */
.statements-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

/* שלושת הדוחות ככרטיסי בחירה ולא כלשוניות: כל כרטיס נושא כותרת ותת-כותרת
   שמסבירה מה יש בדוח, כך שאפשר לבחור בלי לדעת מראש מה ההבדל ביניהם. */
.statements-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.statement-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 13px 16px;
  text-align: start;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.statement-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.statement-btn.active {
  border-color: var(--accent);
  background: var(--accent-fill);
  box-shadow: inset 3px 0 0 var(--accent);
}
.statement-btn-title { font-size: 0.92rem; font-weight: 700; color: var(--text); }
.statement-btn.active .statement-btn-title { color: var(--accent); }
.statement-btn-sub { font-size: 0.74rem; color: var(--text-dim); }

.statements-meta {
  margin: 16px 0 8px;
  font-size: 0.76rem;
  color: var(--text-dim);
}

/* טבלת דוח: המספרים מיושרים בטור אחד ברוחב אחיד (tabular-nums), ועמודת
   הסעיפים "נדבקת" בגלילה אופקית כדי שלא יאבד ההקשר של השורה. */
.statement-table { font-size: 0.82rem; }
.statement-table td {
  text-align: end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.statement-table th[scope="row"] {
  text-align: start;
  font-weight: 500;
  white-space: nowrap;
  position: sticky;
  inset-inline-start: 0;
  background: var(--surface);
  z-index: 1;
}
.statement-table thead th { white-space: nowrap; }
.statement-row-head { position: sticky; inset-inline-start: 0; z-index: 2; }
.statement-table tbody tr:hover th[scope="row"] { background: var(--hover-overlay); }

/* מפריד בין גוף הדוח לשורות המחושבות, שאינן חלק מהדוח עצמו */
.statement-group td {
  text-align: start !important;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-dim);
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ---- חדשות הפרטפוליו (עמוד ראשי) ----
   פריסת מגזין: כתבה מובילה גדולה ואחריה רשת כרטיסים. הכרטיס כולו הוא
   הקישור (ולא רק הכותרת), כי ביעד קריאה מהיר כל הכרטיס הוא שטח הלחיצה
   הטבעי. */
.news-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.news-tickers {
  font-size: 0.72rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
  gap: 14px;
}

.news-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.news-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-md, 0 6px 20px rgba(0, 0, 0, 0.10));
}
/* הכתבה המובילה תופסת את כל רוחב השורה הראשונה כשיש מקום ליותר מטור
   אחד. ב-grid-column: 1 / -1 היא נמתחת על כל הטורים בלי לדעת כמה יש. */
.news-card.featured { grid-column: 1 / -1; }

.news-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.news-ticker {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--accent-fill);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  padding: 2px 9px;
  border-radius: 20px;
}
.news-time { font-size: 0.7rem; color: var(--text-dim); }

.news-headline {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--text);
  /* חיתוך לשלוש שורות שומר על גובה אחיד לכרטיסים בלי לחתוך באמצע מילה */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card.featured .news-headline {
  font-size: 1.38rem;
  line-height: 1.35;
  -webkit-line-clamp: 2;
}
.news-card:hover .news-headline { color: var(--accent); }

.news-summary {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card.featured .news-summary { -webkit-line-clamp: 2; font-size: 0.88rem; }

.news-card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
.news-source {
  font-size: 0.7rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* מסמן פריט שהתרגום שלו עדיין בתור - עדיף לומר זאת מפורשות מאשר להשאיר
   כותרת אנגלית בודדת בין עבריות ולתת לזה להיראות כמו תקלה. */
.news-untranslated {
  font-size: 0.64rem;
  color: var(--text-dim);
  border: 1px dashed var(--border);
  border-radius: 20px;
  padding: 1px 7px;
}

@media (max-width: 640px) {
  .news-grid { grid-template-columns: 1fr; }
  .news-card.featured .news-headline { font-size: 1.15rem; }
}

/* פריט ברשימת החדשות בעמוד "חדשות ולוח אירועים" - אותה שפה ויזואלית
   כמו כרטיסי החדשות בעמוד הראשי, בפריסת רשימה במקום רשת. */
.news-list-item { margin-bottom: 10px; }
.news-list-headline {
  display: block;
  margin-top: 4px;
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.5;
}
.news-list-headline:hover { color: var(--accent); }
.news-list-item .news-summary { margin-top: 6px; }

/* שינוי מול התקופה הקודמת, מתחת לכל מספר בדוח.
   בכוונה בצבע ניטרלי ולא ירוק/אדום: בשורת הוצאות עלייה היא דבר רע,
   וצביעה לפי סימן בלבד הייתה מסמנת גידול בהוצאות כ"חיובי". הסימן
   (+/-) נושא את המידע, בלי לרמוז שיפוט. */
.statement-table td { line-height: 1.3; padding-top: 7px; padding-bottom: 7px; }
.stmt-val { display: block; }
.stmt-chg {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* ---- כפתור "הוסף למעקב" (עמוד ניתוח חברה + מסנן מניות) ---- */
.company-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.btn-watch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--accent);
  background: var(--accent-fill);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 20px;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.btn-watch:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--accent); }
.btn-watch-icon { font-size: 0.9rem; line-height: 1; }
/* כבר במעקב: הכפתור נשאר גלוי כאינדיקציה, אבל מנוטרל ומעומעם - הסתרה
   מוחלטת הייתה מותירה את המשתמש בספק אם ההוספה נקלטה. */
.btn-watch:disabled,
.btn-watch-mini:disabled {
  cursor: default;
  opacity: 0.65;
  background: transparent;
  border-color: var(--border);
  color: var(--text-dim);
}
.btn-watch.is-pending, .btn-watch-mini.is-pending { opacity: 0.5; }

/* גרסה זעירה לתוך תא הטיקר בטבלת המסנן */
.screener-ticker-cell {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.btn-watch-mini {
  width: 20px;
  height: 20px;
  padding: 0;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  color: var(--accent);
  background: var(--accent-fill);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 50%;
}
.btn-watch-mini:hover:not(:disabled) { background: var(--accent); color: var(--surface); }

/* ---- התנועות החדות היום (עמוד ראשי) ----
   שני טורים סימטריים במקום טבלה אחת: העין משווה עולות מול יורדות במבט
   אחד, וזה בדיוק מה שהמבנה הזה נועד לאפשר. */
.movers-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.movers-meta { font-size: 0.74rem; color: var(--text-dim); }

.movers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.mover-col {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.mover-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 0.84rem;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
}
/* רמז צבע עדין בכותרת בלבד ולא רקע צבעוני מלא לכל הטור - שטח צבע גדול
   היה מתנגש עם הערכה השקטה של שאר האתר. */
.mover-col-head.up {
  color: var(--green);
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--green) 55%, transparent);
}
.mover-col-head.down {
  color: var(--red);
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--red) 55%, transparent);
}
.mover-count {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1px 8px;
}

.mover-list { max-height: 420px; overflow-y: auto; }
.mover-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--border);
}
.mover-row:last-child { border-bottom: none; }
.mover-row:hover { background: var(--hover-overlay); }
.mover-rank { font-size: 0.68rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
/* minmax(0,1fr) על עמודת הזיהוי - בלעדיו שם ארוך מרחיב את הגריד במקום
   להיחתך, ודוחף את המספרים מחוץ לכרטיס. */
.mover-id { display: flex; flex-direction: column; min-width: 0; }
.mover-ticker { font-weight: 700; font-size: 0.82rem; color: var(--accent); }
.mover-name {
  font-size: 0.7rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mover-price, .mover-chg {
  font-family: var(--font-serif);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mover-price { font-size: 0.8rem; color: var(--text-dim); }
.mover-chg { font-size: 0.86rem; font-weight: 700; min-width: 66px; text-align: end; }

@media (max-width: 640px) {
  .movers-grid { grid-template-columns: 1fr; }
  .mover-list { max-height: 320px; }
}

/* ---- סימון מועדף ברשימת המעקב ---- */
.fav-cell { width: 34px; text-align: center; }
.btn-fav {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  font-size: 1.05rem;
  line-height: 1;
  /* כוכבית לא מסומנת נשארת חיוורת כדי שרשימה של עשרות שורות לא תיראה
     זרועה בסמלים - רק המסומנות בולטות, וזו כל המטרה. */
  color: var(--border);
  transition: color 0.15s ease, transform 0.15s ease;
}
.btn-fav:hover { color: var(--accent); transform: scale(1.15); }
.btn-fav.is-fav { color: var(--accent); }
.btn-fav:disabled { cursor: default; }

/* בתצוגת מובייל הטבלה נשברת לכרטיסים (responsive-table), ושם התווית
   "מועדף" מיותרת - הכוכבית מדברת בעד עצמה. */
@media (max-width: 760px) {
  .fav-cell { width: auto; text-align: start; }
}

/* ===================================================================
   פילוח הכנסות לפי סגמנט / מוצר / אזור (כרטיס ההכנסות בעמוד ניתוח חברה)

   הכרטיס נשאר זהה לכל שאר כרטיסי המדדים - אותו גודל, אותו מקום ברשת.
   הפילוח מתבטא בצבעים שבתוך העמודות ובבורר שנכנס לשורת הכפתורים
   הקיימת, והסינון נעשה דרך המקרא המובנה של Chart.js. לכן אין כאן
   מקרא משלנו ואין כלל פריסה חדש.
   =================================================================== */
.segment-loading { font-size: 0.78rem; color: var(--text-dim); align-self: center; }

/* ===================================================================
   עמוד חקירת סקטור
   =================================================================== */

.sector-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.sector-head h1 { margin-bottom: 18px; }
.sector-head-controls { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.sector-head-controls .field label,
.sector-head-controls .field .field-label {
  display: block;
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.4px;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.sector-asof { font-size: 0.76rem; color: var(--text-dim); margin-bottom: 18px; }

/* מדדי-על. auto-fit ולא מספר עמודות קבוע - ארבעה כרטיסים נכנסים לשורה
   במסך רחב ומתקפלים לשניים ואחד בלי breakpoint ידני. */
.sector-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.sector-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.sector-stat-label { font-size: 0.74rem; color: var(--text-dim); letter-spacing: 0.3px; }
.sector-stat-value {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 4px;
  color: var(--text);
}
.sector-stat-hint { font-size: 0.7rem; color: var(--text-dim); margin-top: 3px; }

.sector-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 18px;
  margin-bottom: 18px;
}
.sector-grid-2 > .card { margin-bottom: 0; }

.sector-section-hint {
  font-size: 0.74rem;
  color: var(--text-dim);
  margin: -4px 0 14px;
  line-height: 1.5;
}

/* ---- רוחב הסקטור ---- */
.breadth-list { display: flex; flex-direction: column; gap: 11px; }
/* התווית תופסת את מה שהיא צריכה והפס ממלא את השאר - עם רוחב קבוע לפס
   נשאר חלל מת באמצע הכרטיס, והשוואה בין ארבעת הפסים נהיית קשה יותר. */
.breadth-row {
  display: grid;
  grid-template-columns: minmax(150px, auto) 1fr 46px;
  align-items: center;
  gap: 12px;
  font-size: 0.8rem;
}
.breadth-label { color: var(--text); }
.breadth-track {
  height: 7px;
  background: var(--surface-2);
  border-radius: 6px;
  overflow: hidden;
}
.breadth-fill { display: block; height: 100%; border-radius: 6px; transition: width 0.4s ease; }
.breadth-fill.good { background: var(--green); }
.breadth-fill.mid  { background: var(--accent); }
.breadth-fill.weak { background: var(--red); }
.breadth-value { text-align: end; font-variant-numeric: tabular-nums; color: var(--text-dim); }

.sector-name-cell { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sector-more { margin-top: 12px; text-align: center; }

/* מיון בטבלת החברות - אותה שפה ויזואלית כמו בטבלת המעקב. */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--accent); }
th.sortable.sorted { color: var(--accent); }

/* הסקטורים בגרף בעמוד הראשי לחיצים - כל שורה פותחת את העמוד הזה. */
.sector-row.clickable { cursor: pointer; }
.sector-row.clickable:hover { background: var(--hover-overlay); }
.sector-row.clickable:hover .sector-name { color: var(--accent); }

@media (max-width: 640px) {
  .breadth-row { grid-template-columns: minmax(110px, auto) 1fr 42px; font-size: 0.75rem; gap: 8px; }
  .sector-stat-value { font-size: 1.25rem; }
  .sector-name-cell { max-width: 130px; }
}

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

   **מגבלה מחייבת** (ראו ההערה בראש הקובץ): אין כאן ולו transition אחד
   על color / background-color / border-color. הדפדפן בסביבה הזו נתקע על
   הערך הישן של מאפיין מונפש שמקורו במשתנה CSS אחרי החלפת מצב כהה/בהיר.
   כל התנועה כאן היא transform / box-shadow / opacity / filter בלבד -
   ארבעתם נבדקו ובטוחים.
   =================================================================== */

/* --- עקומות ומשכים אחידים, כדי שכל התנועה באתר תרגיש מאותה משפחה --- */
:root {
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.16s;
  --dur: 0.26s;
  --dur-slow: 0.5s;
  /* צל דו-שכבתי: קו מגע הדוק צמוד לאלמנט + הילה רחבה ורכה. שכבה אחת
     נותנת "כתם" שטוח, שתיים נותנות עומק אמיתי - זה ההבדל בין כרטיס
     שמונח על הרקע לכרטיס שמרחף מעליו. */
  --shadow-lift:
    0 2px 6px rgba(0, 0, 0, 0.22),
    0 18px 40px rgba(0, 0, 0, 0.42);
}
:root[data-theme="light"] {
  --shadow-lift:
    0 2px 6px rgba(80, 68, 40, 0.06),
    0 18px 38px rgba(80, 68, 40, 0.13);
}

/* --- כניסה --- */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* קו הזהב מתחת לכותרת נמתח פנימה במקום להופיע חתוך - תנועה קטנה אחת
   שנותנת לעמוד רגע של "נפתח" במקום "הופיע". */
@keyframes underlineIn {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

main.container {
  animation: riseIn var(--dur-slow) var(--ease-out) both;
}

h1::after {
  transform-origin: right center;
  animation: underlineIn 0.6s var(--ease-out) 0.12s both;
}
h2::after {
  transform-origin: right center;
  animation: underlineIn 0.5s var(--ease-out) 0.16s both;
}

/* דירוג הכניסה של כרטיסים ברשת. מוגבל לשמונה הראשונים - מעבר לזה
   ההשהיה מורגשת כאיטיות ולא כעידון. */
.grid > .card,
.chart-grid > .metric-card,
.sector-stats > .sector-stat {
  animation: riseIn 0.42s var(--ease-out) both;
}
.grid > .card:nth-child(1),
.chart-grid > .metric-card:nth-child(1),
.sector-stats > .sector-stat:nth-child(1) { animation-delay: 0.02s; }
.grid > .card:nth-child(2),
.chart-grid > .metric-card:nth-child(2),
.sector-stats > .sector-stat:nth-child(2) { animation-delay: 0.06s; }
.grid > .card:nth-child(3),
.chart-grid > .metric-card:nth-child(3),
.sector-stats > .sector-stat:nth-child(3) { animation-delay: 0.10s; }
.grid > .card:nth-child(4),
.chart-grid > .metric-card:nth-child(4),
.sector-stats > .sector-stat:nth-child(4) { animation-delay: 0.14s; }
.grid > .card:nth-child(5),
.chart-grid > .metric-card:nth-child(5) { animation-delay: 0.18s; }
.grid > .card:nth-child(6),
.chart-grid > .metric-card:nth-child(6) { animation-delay: 0.22s; }
.grid > .card:nth-child(7),
.chart-grid > .metric-card:nth-child(7) { animation-delay: 0.26s; }
.grid > .card:nth-child(n + 8),
.chart-grid > .metric-card:nth-child(n + 8) { animation-delay: 0.3s; }

/* --- כרטיסים: הרמה בריחוף --- */
/* הקו המוזהב בראש הכרטיס היה inset קבוע. עכשיו הוא פס גרדיאנט שמתחזק
   בריחוף - נותן לכרטיס תגובה בלי לשנות אף צבע (opacity בלבד). */
.card,
.sidebar-card,
form.inline-form {
  position: relative;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.card::after,
.sidebar-card::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: var(--accent-gradient);
  border-radius: var(--radius) var(--radius) 0 0;
  opacity: 0.45;
  transition: opacity var(--dur) var(--ease-out);
  pointer-events: none;
}
.card:hover,
.sidebar-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift), inset 0 2px 0 var(--accent-fill);
}
.card:hover::after,
.sidebar-card:hover::after { opacity: 1; }

/* כרטיס מדד עם גרף - אותה הרמה, בלי הקו העליון: יש כבר שורת כפתורים
   צמודה לראש הכרטיס והפס התחרה איתה על תשומת הלב. */
.metric-card { transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.metric-card::after { display: none; }
.metric-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

.sector-stat {
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.sector-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

/* --- טבלאות --- */
table { transition: box-shadow var(--dur) var(--ease-out); }
table:hover { box-shadow: var(--shadow-lift); }
tbody tr { transition: transform var(--dur-fast) var(--ease-out); }
/* קצה זהב בתחילת השורה בריחוף. ‏inset שלילי כי ב-RTL ‏first-child יושב
   בצד ימין, וזה הקצה שצריך להידלק. */
tbody tr:hover td:first-child {
  box-shadow: inset -3px 0 0 var(--accent);
}

/* --- כפתורים --- */
/* הברקה שעוברת על הכפתור הראשי בריחוף. ‏transform בלבד, ולכן בטוחה. */
button.btn-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
button.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.3) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform 0.65s var(--ease-soft);
  pointer-events: none;
}
button.btn-primary:hover::after { transform: translateX(130%); }
button.btn-primary:hover { transform: translateY(-2px); }

.small-btn,
.btn-refresh,
button.btn-danger {
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.small-btn:hover,
.btn-refresh:hover,
button.btn-danger:hover { transform: translateY(-1px); }
.small-btn:active,
.btn-refresh:active,
button.btn-primary:active,
button.btn-danger:active { transform: translateY(0); }

.toggle-btn { transition: transform var(--dur-fast) var(--ease-out); }
.toggle-btn:active { transform: scale(0.96); }

/* --- ניווט: קו תחתון שנמתח --- */
nav a { position: relative; }
nav a::after {
  content: "";
  position: absolute;
  inset-inline: clamp(6px, 0.62vw, 15px);
  bottom: -2px;
  height: 2px;
  background: var(--accent-gradient);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur) var(--ease-out);
}
nav a:hover::after { transform: scaleX(1); }
nav a.active::after { transform: scaleX(1); }

/* --- שדות קלט ובוררים --- */
form.inline-form input,
.cell-input,
select {
  transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
form.inline-form input:focus,
.cell-input:focus,
select:focus {
  box-shadow: 0 0 0 3px var(--accent-fill), var(--shadow-sm);
}

/* בורר ברירת המחדל של המערכת הוא הפריט היחיד באתר שנראה כמו טופס של
   Windows ולא כמו הממשק שסביבו. החץ מוחלף בחץ משלנו, שמוצב בקצה הסוף
   (שמאל ב-RTL) דרך inset-inline-end. */
select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 7px;
  padding: 9px 30px 9px 12px;
  font-family: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
                    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% + 2px), calc(100% - 11px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
:root[dir="rtl"] select,
html[dir="rtl"] select {
  padding: 9px 12px 9px 30px;
  background-position: 16px calc(50% + 2px), 11px calc(50% + 2px);
}
select:hover { box-shadow: var(--shadow-sm); }

/* --- הודעות --- */
/* ה-toast החליק פנימה בשקיפות בלבד; תוספת התנועה הקטנה הופכת אותו
   מ"הופיע" ל"נכנס". */
.toast {
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.toast.show { transform: none; }

.empty-state { animation: fadeIn var(--dur) var(--ease-out) both; }

/* --- מודל הגדלת גרף --- */
#chart-modal-overlay { animation: fadeIn 0.2s var(--ease-out) both; }
#chart-modal-overlay > * { animation: riseIn 0.3s var(--ease-out) both; }

/* --- קישורי טיקר --- */
.ticker-link { transition: transform var(--dur-fast) var(--ease-out); display: inline-block; }
.ticker-link:hover { transform: translateY(-1px); }

/* --- פס הזהב העליון: זוהר עדין --- */
body::before { box-shadow: 0 0 18px var(--accent-fill); }

/* ===================================================================
   כיבוי מלא של התנועה למי שביקש זאת במערכת ההפעלה. חובה - חלק
   מהמשתמשים חווים סחרחורת מתנועת ממשק, והאתר חייב להיות שמיש לגמרי
   גם בלעדיה.
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  main.container,
  h1::after,
  h2::after,
  .grid > .card,
  .chart-grid > .metric-card,
  .sector-stats > .sector-stat,
  .empty-state,
  #chart-modal-overlay,
  #chart-modal-overlay > * {
    animation: none;
  }
  .card,
  .sidebar-card,
  .metric-card,
  .sector-stat,
  table,
  tbody tr,
  .small-btn,
  .btn-refresh,
  button.btn-primary,
  button.btn-danger,
  .toggle-btn,
  .ticker-link,
  .toast,
  nav a::after,
  button.btn-primary::after {
    transition: none;
  }
  .card:hover,
  .sidebar-card:hover,
  .metric-card:hover,
  .sector-stat:hover,
  .ticker-link:hover,
  button.btn-primary:hover,
  .small-btn:hover,
  .btn-refresh:hover { transform: none; }
}

/* ===================================================================
   בריאות הנתונים - התג הקבוע בפס העליון ועמוד /health
   כמו בכל הקובץ: תנועה רק ב-transform/box-shadow/opacity, אף פעם לא צבע.
   =================================================================== */

.health-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.health-pill:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.health-pill.is-here { border-color: var(--border-accent); }
.hp-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.hp-ok .hp-dot { background: var(--green); box-shadow: 0 0 0 3px var(--green-fill); }
.hp-warning { border-color: var(--yellow); background: var(--yellow-fill); color: var(--yellow); }
.hp-warning .hp-dot { background: var(--yellow); }
.hp-error, .hp-offline { border-color: var(--red); background: var(--red-fill); color: var(--red); }
.hp-error .hp-dot, .hp-offline .hp-dot { background: var(--red); animation: healthPulse 1.6s ease-in-out infinite; }
.hp-offline { border-style: dashed; }

@keyframes healthPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}
@keyframes healthFlash {
  0% { box-shadow: 0 0 0 0 var(--border-accent), var(--shadow-sm); }
  30% { box-shadow: 0 0 0 4px var(--border-accent), var(--shadow-gold); }
  100% { box-shadow: 0 0 0 0 transparent, var(--shadow-sm); }
}

/* --- סימוני מצב משותפים --- */
.hs-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.hs-dot.hs-ok { background: var(--green); }
.hs-dot.hs-info { background: var(--il-accent); }
.hs-dot.hs-warning { background: var(--yellow); }
.hs-dot.hs-error { background: var(--red); animation: healthPulse 1.6s ease-in-out infinite; }
.hs-chip {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.hs-chip.hs-ok { color: var(--green); background: var(--green-fill); }
.hs-chip.hs-info { color: var(--il-accent); background: var(--il-tint); }
.hs-chip.hs-warning { color: var(--yellow); background: var(--yellow-fill); }
.hs-chip.hs-error { color: var(--red); background: var(--red-fill); }
.hs-border-ok { border-inline-start: 3px solid var(--green) !important; }
.hs-border-info { border-inline-start: 3px solid var(--il-accent) !important; }
.hs-border-warning { border-inline-start: 3px solid var(--yellow) !important; }
.hs-border-error { border-inline-start: 3px solid var(--red) !important; }
.health-flash { animation: healthFlash 1.6s var(--ease-out); }
.hh-sep { opacity: 0.5; margin: 0 2px; }

/* --- כרטיס הסטטוס הראשי --- */
.health-hero { margin-bottom: 30px; padding: 24px 26px; }
.health-hero:hover { transform: none; }
.hh-main { display: flex; align-items: center; gap: 20px; }
.hh-ring {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 3px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 1.8rem;
  font-weight: 700;
}
.hh-ring.hs-ok { color: var(--green); background: var(--green-fill); box-shadow: 0 0 0 6px var(--green-fill); }
.hh-ring.hs-info { color: var(--green); background: var(--green-fill); }
.hh-ring.hs-warning { color: var(--yellow); background: var(--yellow-fill); box-shadow: 0 0 0 6px var(--yellow-fill); }
.hh-ring.hs-error { color: var(--red); background: var(--red-fill); animation: healthRing 2s ease-in-out infinite; }
@keyframes healthRing {
  0%, 100% { box-shadow: 0 0 0 4px var(--red-fill); }
  50% { box-shadow: 0 0 0 12px transparent; }
}
.hh-text { flex: 1 1 auto; min-width: 0; }
.hh-title { font-family: var(--font-serif); font-size: 1.55rem; font-weight: 600; line-height: 1.2; }
.hh-sub { color: var(--text-dim); margin-top: 6px; font-size: 0.92rem; overflow-wrap: anywhere; }
.hh-meta { color: var(--text-dim); margin-top: 8px; font-size: 0.75rem; display: flex; flex-wrap: wrap; gap: 4px; }
.hh-refresh { align-self: flex-start; padding: 6px 12px; }
.hh-areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
.health-area {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: start;
  font: inherit;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.health-area:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.ha-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 1.2px; color: var(--text-dim); }
.ha-value { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ha-total { color: var(--text-dim); font-size: 1rem; font-weight: 500; }
.ha-sub { font-size: 0.75rem; color: var(--text-dim); }
.ha-bar { display: flex; height: 4px; border-radius: 4px; overflow: hidden; margin-top: 8px; background: var(--border); gap: 2px; }
.ha-seg.hs-ok { background: var(--green); }
.ha-seg.hs-warning { background: var(--yellow); }
.ha-seg.hs-error { background: var(--red); }

/* --- רשימת הבעיות --- */
.health-issue-list { padding: 4px 0; }
.health-issue {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
}
.health-issue:last-child { border-bottom: none; }
.hi-title { font-weight: 600; }
.hi-area {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1px 8px;
  margin-inline-end: 6px;
  vertical-align: 1px;
}
.hi-detail { color: var(--text-dim); font-size: 0.85rem; margin-top: 3px; overflow-wrap: anywhere; }
.hi-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.hi-actions a.small-btn { text-decoration: none; }
.health-clear { display: flex; align-items: center; gap: 10px; color: var(--text); }

/* --- רשת כרטיסים (נתונים, תשתית) --- */
.health-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.health-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 15px 18px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  scroll-margin-top: 90px;
}
.hc-head { display: flex; align-items: center; gap: 8px; }
.hc-name { font-weight: 600; flex: 1 1 auto; }
.hc-summary { color: var(--text-dim); font-size: 0.84rem; margin-top: 6px; }
.hc-problems { margin: 10px 0 0; padding-inline-start: 18px; font-size: 0.84rem; }
.hc-problems li { margin: 3px 0; overflow-wrap: anywhere; }
.hc-facts { margin: 12px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; font-size: 0.75rem; }
.hc-facts div { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px dashed var(--border); }
.hc-facts dt { color: var(--text-dim); }
.hc-facts dd { margin: 0; font-variant-numeric: tabular-nums; text-align: end; overflow-wrap: anywhere; }
.hc-foot { margin-top: auto; padding-top: 12px; font-size: 0.74rem; color: var(--text-dim); display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.hc-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
}
.hc-link:hover { text-decoration: underline; }

/* --- משימות רקע --- */
.health-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.health-jobs { padding: 0; overflow: hidden; }
.health-jobs:hover { transform: none; }
.health-job {
  display: grid;
  grid-template-columns: minmax(220px, 2.3fr) 1fr 1.2fr 1.3fr minmax(150px, 1.6fr) auto;
  gap: 6px 16px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 0.84rem;
  scroll-margin-top: 90px;
}
.health-job:last-child { border-bottom: none; }
.hj-name { display: flex; gap: 10px; align-items: flex-start; }
.hj-name .hs-dot { margin-top: 6px; }
.hj-title { font-weight: 600; font-size: 0.9rem; }
.hj-k { display: block; font-size: 0.64rem; font-weight: 700; letter-spacing: 1px; color: var(--text-dim); margin-bottom: 1px; }
.hj-stats, .hj-problems { grid-column: 1 / -1; margin: 0; padding-inline-start: 19px; }
.hj-problems { padding-inline-start: 37px; }
.hj-running { color: var(--accent); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hj-running [data-since] { white-space: nowrap; font-variant-numeric: tabular-nums; }
.hj-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: healthPulse 1.2s ease-in-out infinite; }
.hj-retry { color: var(--yellow); font-weight: 600; }
.hj-strip { display: flex; align-items: center; gap: 2px; min-height: 20px; }
.run-tick {
  width: 5px;
  height: 18px;
  border-radius: 2px;
  flex: 0 0 auto;
  cursor: help;
  transition: transform var(--dur-fast) var(--ease-out);
}
.run-tick:hover { transform: scaleY(1.25); }
.run-tick.o-ok { background: var(--green); }
.run-tick.o-warning { background: var(--yellow); }
.run-tick.o-failed { background: var(--red); }
.run-tick.o-skipped { background: var(--border); height: 10px; }
.hj-action .small-btn:disabled { opacity: 0.45; cursor: default; }

/* --- יומן --- */
.health-log { padding: 0; overflow: hidden; }
.health-log:hover { transform: none; }
.hl-list { max-height: 440px; overflow-y: auto; }
.hl-row {
  display: grid;
  grid-template-columns: 74px 56px 170px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
}
.hl-row:last-child { border-bottom: none; }
.hl-time { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.hl-logger { color: var(--text-dim); direction: ltr; text-align: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-msg { unicode-bidi: plaintext; overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .health-job { grid-template-columns: 1fr 1fr 1fr auto; }
  .hj-name { grid-column: 1 / -1; }
  .hj-strip { grid-column: 1 / -1; order: 10; }
}
@media (max-width: 640px) {
  .hh-main { flex-wrap: wrap; }
  .hh-ring { width: 54px; height: 54px; font-size: 1.4rem; }
  .hh-areas { grid-template-columns: 1fr; }
  .health-issue { grid-template-columns: auto 1fr; }
  .hi-actions { grid-column: 2; justify-content: flex-start; }
  .health-grid { grid-template-columns: 1fr; }
  .health-job { grid-template-columns: 1fr 1fr; padding: 12px 14px; }
  .hj-action { grid-column: 1 / -1; }
  .hl-row { grid-template-columns: 48px 52px 1fr; }
  .hl-logger { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-error .hp-dot, .hp-offline .hp-dot, .hs-dot.hs-error, .hj-pulse, .hh-ring.hs-error,
  .health-flash { animation: none; }
}

/* שינוי במסחר הנוכחי, צמוד למחיר בטבלת הפרטפוליו (צבע מ-.up/.down) */
.day-change {
  display: inline-block;
  margin-inline-start: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  unicode-bidi: isolate;
  direction: ltr;
}
.day-change:empty { display: none; }

/* יומן התנועות: הסבר, ותיבת "לעדכן גם את המזומן" עם תצוגה מקדימה של היתרה */
.tx-help { margin-bottom: 10px; line-height: 1.7; }
.tx-help b { color: var(--text); }
.tx-cash-field { min-width: 260px; }
.tx-cash-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--text);
  font-weight: 600;
}
.tx-cash-toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.tx-cash-preview { margin-top: 4px; font-size: 0.8rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.tx-cash-preview.down { color: var(--red); }

/* ===================================================================
   טבלאות פיננסיות (פרטפוליו, מעקב) ועמוד הפרטפוליו.
   עקרונות: מספרים מיושרים לקצה ובספרות שוות-רוחב כדי שהעמודות "יעמדו";
   מידע משני (שם החברה, סקטור, יחסים) בטון עמום כדי שהעין תלך קודם לשווי
   ולרווח; עריכה ומחיקה קיימות אבל שקטות עד שמרחפים מעליהן.
   =================================================================== */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.fin-table { border-radius: var(--radius-lg); }
.fin-table th, .fin-table td { padding: 13px 11px; vertical-align: middle; }
.fin-table th {
  background: transparent;
  color: var(--text-dim);
  font-size: 0.7rem;
  letter-spacing: 1px;
  padding-top: 15px;
  padding-bottom: 13px;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-accent);
}
.fin-table th.sortable-th { cursor: pointer; user-select: none; }
.fin-table th.sortable-th:hover, .fin-table th.sorted { color: var(--accent); }
.fin-table .num { text-align: end; white-space: nowrap; }
.fin-table td.dim, .fin-table .dim { color: var(--text-dim); }
.fin-table .pf-strong { font-weight: 700; color: var(--text); }
.fin-table tbody tr:hover td { background: var(--hover-overlay); }
.fin-table th.actions-col, .fin-table td.actions-col { width: 44px; padding-inline: 6px 12px; text-align: center; }

/* נכס: טיקר בולט, ומתחתיו שם החברה וסקטור בשורה אחת מקוצרת */
.fin-table td.pf-asset { max-width: 260px; }
.pf-ticker {
  font-weight: 700;
  font-size: 0.93rem;
  letter-spacing: 0.6px;
  color: var(--text);
  text-decoration: none;
  direction: ltr;
  unicode-bidi: isolate;
}
a.pf-ticker:hover { color: var(--accent); }
.pf-asset-sub {
  margin-top: 3px;
  font-size: 0.76rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
}

/* תג אחוז (רווח/הפסד, שינוי יומי) */
.pf-pill {
  display: inline-block;
  min-width: 62px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.76rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
  background: var(--surface-2);
}
.pf-pill.up { background: var(--green-fill); }
.pf-pill.down { background: var(--red-fill); }
.pf-pnl { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pf-pnl > span:first-child { font-weight: 600; }
.fin-table .day-change { margin-inline-start: 0; font-size: 0.86rem; }

/* משקל: אחוז + פס דק */
.pf-weight { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 5px; min-width: 64px; }
.pf-weight-bar { width: 64px; height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.pf-weight-bar i { display: block; height: 100%; background: var(--accent-gradient); border-radius: 4px; }

/* עריכה בתוך התא: נראה כמו מספר רגיל, מתגלה כשדה רק בריחוף/פוקוס */
.cell-input.ghost {
  width: 84px;
  background: transparent;
  border-color: transparent;
  text-align: end;
  font-variant-numeric: tabular-nums;
  font-size: 0.91rem;
  padding: 5px 7px;
  -moz-appearance: textfield;
}
.cell-input.ghost::-webkit-inner-spin-button,
.cell-input.ghost::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
tr:hover .cell-input.ghost { border-color: var(--border); border-style: dashed; }
.cell-input.ghost:hover { border-color: var(--border-accent) !important; border-style: solid !important; cursor: text; }
.cell-input.ghost:focus { background: var(--surface); border-color: var(--accent); border-style: solid; }
.pf-strong .cell-input.ghost { font-weight: 700; color: var(--text); }

/* מחיקה: אייקון שקט שמתבהר בריחוף על השורה */
.pf-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
tr:hover .pf-icon-btn, .pf-icon-btn:focus-visible { opacity: 1; }
.pf-icon-btn:hover { color: var(--red); border-color: var(--red); background: var(--red-fill); }

/* שורת מזומן ושורת סה"כ */
.pf-cash-row td { background: var(--surface-2); }
.fin-table tbody tr.pf-cash-row:hover td { background: var(--surface-2); }
.pf-cash-label { color: var(--text-dim); }
.pf-total-row td {
  border-top: 1px solid var(--border-accent);
  border-bottom: none;
  background: var(--accent-fill);
  font-weight: 700;
}
.pf-total-label { font-family: var(--font-serif); font-size: 1rem; }
.pf-total-row .pf-strong { font-family: var(--font-serif); font-size: 1.02rem; }

.pf-table-hint { margin-top: 10px; font-size: 0.76rem; color: var(--text-dim); }

/* כותרת סקציה עם כפתור פעולה בצד */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.section-head::after {
  content: "";
  position: absolute;
  bottom: -1px; right: 0;
  width: 42px; height: 1px;
  background: var(--accent);
}
.section-head h2 { border-bottom: none; margin: 0; }
.section-head h2::after { content: none; }
.section-head .small-btn { margin-bottom: 8px; }
.pf-add-btn { color: var(--accent); border-color: var(--border-accent); padding: 6px 14px; font-weight: 600; }
.pf-add-btn.active { color: var(--text-dim); border-color: var(--border); }

.pf-collapsible { margin-bottom: 18px; }
.pf-collapsible[hidden] { display: none; }

.pf-help { flex-basis: 100%; font-size: 0.82rem; color: var(--text-dim); line-height: 1.7; }
.pf-help summary { cursor: pointer; color: var(--accent); font-weight: 600; width: fit-content; }
.pf-help p { margin: 8px 0 0; }
.pf-help b { color: var(--text); }

/* כותרת העמוד */
.pf-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pf-page-actions { display: flex; align-items: center; gap: 8px; padding-top: 6px; }
.pf-page-actions .small-btn { padding: 6px 12px; }

/* ---- כרטיס הסיכום העליון ---- */
.pf-summary { display: grid; gap: 18px; margin-bottom: 38px; }
.pf-hero {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 1.55fr);
  gap: 26px 36px;
  align-items: center;
  padding: 28px 30px 22px;
  border-color: var(--border-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow), inset 0 3px 0 var(--accent);
}
.pf-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.pf-hero-value {
  font-family: var(--font-serif);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 10px 0;
  font-variant-numeric: tabular-nums;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--accent);
  -webkit-text-fill-color: transparent;
}
.pf-hero-currency {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  margin-inline-start: 10px;
  unicode-bidi: isolate;
  color: var(--text-dim);
  -webkit-text-fill-color: var(--text-dim);
}
.pf-hero-day { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.pf-hero-day-label { color: var(--text-dim); font-weight: 500; font-size: 0.82rem; }
.pf-hero-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-inline-start: 1px solid var(--border);
}
.pf-hero-kpis .pf-kpi { padding: 4px 24px; border-inline-end: 1px solid var(--border); }
.pf-hero-kpis .pf-kpi:last-child { border-inline-end: none; }

.pf-kpi-label { font-size: 0.74rem; color: var(--text-dim); letter-spacing: 0.3px; }
.pf-kpi-value {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 700;
  margin: 6px 0 4px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.pf-kpi-value.up { color: var(--green); }
.pf-kpi-value.down { color: var(--red); }
.pf-kpi-sub { font-size: 0.76rem; color: var(--text-dim); font-variant-numeric: tabular-nums; min-height: 1em; }

/* פיצול מניות/מזומן */
.pf-split { grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid var(--border); }
.pf-split-bar { height: 6px; border-radius: 6px; overflow: hidden; background: color-mix(in srgb, var(--text-dim) 30%, transparent); }
.pf-split-bar i { display: block; height: 100%; background: var(--accent-gradient); border-radius: 6px; }
.pf-split-legend { display: flex; gap: 20px; margin-top: 9px; font-size: 0.76rem; color: var(--text-dim); }
.pf-split-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-inline-end: 6px; }
.dot-stock { background: var(--accent); }
.dot-cash { background: color-mix(in srgb, var(--text-dim) 45%, transparent); }

/* שורת KPI בכרטיס אחד (תנועות) */
.pf-kpi-row { display: grid; gap: 18px; margin-bottom: 18px; }
.pf-kpi-card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 18px 4px; }
.pf-kpi-card .pf-kpi { padding: 0 22px; border-inline-end: 1px solid var(--border); }
.pf-kpi-card .pf-kpi:last-child { border-inline-end: none; }

/* סוג תנועה */
.pf-type {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.76rem;
  font-weight: 700;
  background: var(--surface-2);
  color: var(--text-dim);
}
.pf-type-deposit { background: var(--green-fill); color: var(--green); }
.pf-type-withdrawal { background: var(--red-fill); color: var(--red); }
.pf-type-sell { background: var(--accent-fill); color: var(--accent); }

/* סיכון */
.pf-risk-card { padding: 20px 4px 18px; }
.pf-risk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 22px 14px; }
.pf-risk-head h3 { margin: 0; }
.pf-risk-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-risk-kpis .pf-kpi { padding: 0 22px; border-inline-end: 1px solid var(--border); }
.pf-risk-kpis .pf-kpi:last-child { border-inline-end: none; }

/* גיבויים - מקופל כברירת מחדל: זה מידע תחזוקה, לא חלק מהתיק */
.pf-backups {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.pf-backups > summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 22px;
  cursor: pointer;
  list-style: none;
}
.pf-backups > summary::-webkit-details-marker { display: none; }
.pf-backups > summary::before {
  content: "";
  width: 7px; height: 7px;
  border-inline-end: 2px solid var(--text-dim);
  border-bottom: 2px solid var(--text-dim);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  margin-top: -4px;
}
.pf-backups[open] > summary::before { transform: rotate(225deg); margin-top: 4px; }
.pf-backups-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.pf-backups-body { padding: 0 22px 20px; }
.pf-backups-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pf-backups .fin-table { box-shadow: none; }

@media (max-width: 1100px) {
  .pf-hero { grid-template-columns: 1fr; }
  .pf-hero-kpis { border-inline-start: none; border-top: 1px solid var(--border); padding-top: 18px; }
  .pf-hero-kpis .pf-kpi:first-child { padding-inline-start: 0; }
}

@media (max-width: 860px) {
  .pf-hero { padding: 20px 18px 16px; }
  .pf-hero-value { font-size: 2.1rem; }
  .pf-hero-kpis .pf-kpi { padding: 2px 10px; }
  .pf-hero-kpis .pf-kpi:first-child { padding-inline-start: 0; }
  .pf-hero-kpis .pf-kpi:last-child { padding-inline-end: 0; }
  .pf-hero-kpis .pf-kpi-value { font-size: 1.05rem; }
  .pf-hero-kpis .pf-kpi-sub { font-size: 0.7rem; }
  .pf-kpi-card, .pf-risk-kpis { grid-template-columns: 1fr; }
  .pf-kpi-card .pf-kpi, .pf-risk-kpis .pf-kpi { border-inline-end: none; padding: 8px 18px; }
  .pf-page-actions { padding-top: 0; margin-bottom: 18px; flex-wrap: wrap; }

  /* בכרטיסי המובייל: תאים ריקים (שורת מזומן/סה"כ) לא תופסים שורה */
  .fin-table td.pf-empty, .fin-table .pf-total-row td:empty { display: none !important; }
  .fin-table td.pf-hide-mobile { display: none !important; }
  .fin-table .pf-total-row { background: var(--accent-fill); }
  .fin-table .pf-total-row td { background: transparent; border-top: 1px solid var(--border); }
  .fin-table .pf-total-row td:first-child { border-top: none; }
  .fin-table tfoot { display: block; }
  .fin-table td.actions-col { width: auto; text-align: start; padding-inline: 0; }
  .fin-table .pf-icon-btn { opacity: 1; }
  .fin-table td.pf-asset { max-width: none; flex-direction: column; align-items: flex-start; }
  .pf-asset-sub { max-width: 100%; }
  .fin-table th, .fin-table td { padding-inline: 0; }
  .cell-input.ghost { border-color: var(--border); border-style: dashed; }
}

/* תגיות בתוך תא המחיר (מסחר מוקדם/מאוחר, "יתכן עיכוב") יורדות לשורה משלהן
   מתחת למחיר, במקום למתוח את העמודה ולדחוף את הטבלה לגלילה אופקית. */
.fin-table td[data-live-price-cell] { white-space: normal; }
.fin-table td[data-live-price-cell] .stale-badge,
.fin-table td[data-live-price-cell] .prepost-badge {
  display: flex;
  width: fit-content;
  margin: 4px 0 0;
  margin-inline-start: auto;
  white-space: nowrap;
  font-size: 0.64rem;
  padding: 1px 8px;
}
/* שם החברה באנגלית: נחתך בסוף (ימין) ולא בתחילתו */
.pf-asset-sub { direction: ltr; text-align: right; }

/* ---- עמוד המעקב: אותה טבלה פיננסית, עם התאמות ---- */
.quick-add { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.quick-add input {
  width: 230px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 7px;
  padding: 7px 12px;
  font-size: 0.86rem;
  font-family: inherit;
}
.quick-add input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-fill); }
.quick-add .btn-primary { padding: 8px 18px; font-size: 0.8rem; }

.wl-table td.ret { font-weight: 600; }
.wl-table th, .wl-table td { padding-inline: 9px; }
.wl-table td.pf-asset { max-width: 190px; }
.wl-table .pf-asset-sub { max-width: 180px; }
.wl-table th.fav-cell, .wl-table td.fav-cell { width: 34px; padding-inline: 10px 2px; }
.wl-table tr.is-fav-row td { background: var(--accent-fill); }
.wl-table tr.is-fav-row:hover td { background: var(--accent-fill); }
/* עומק הירידה מהשיא: פס ניטרלי ולא זהב - זה מידע, לא "טוב" או "רע" */
.wl-high-bar i { background: color-mix(in srgb, var(--text-dim) 70%, transparent); }

@media (max-width: 860px) {
  .section-head:has(.quick-add) { flex-wrap: wrap; }
  .quick-add { width: 100%; }
  .quick-add input { flex: 1; width: auto; }
  /* בכרטיס: הכוכב בפינה, והנכס הוא כותרת הכרטיס (בלי התווית "נכס") */
  .wl-table tr { position: relative; }
  .wl-table td.fav-cell { position: absolute; top: 8px; inset-inline-end: 6px; width: auto; border: none; padding: 0; }
  .wl-table td.fav-cell::before { content: none; }
  .wl-table td.pf-asset { border-top: none; padding-inline-end: 40px; }
  .fin-table td.pf-asset::before { content: none; margin: 0; }
}

/* כפתורי מיון לטלפון - ראו mobileSortBarHtml ב-common.js */
.m-sort-bar { display: none; }
@media (max-width: 860px) {
  .m-sort-bar { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; margin-bottom: 10px; scrollbar-width: none; }
  .m-sort-bar::-webkit-scrollbar { display: none; }
}
.m-sort-chip {
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 7px 14px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.m-sort-chip.is-on { background: var(--accent-gradient); color: var(--accent-text); border-color: transparent; }

/* מטרות מגע בטלפון: הבדיקה האוטומטית מצאה כפתורים ושדות בגובה 21-27px
   (מתחת ל-~36px כבר קשה לפגוע באצבע) */
@media (max-width: 640px) {
  .toggle-btn { padding: 9px 12px; }
  .small-btn { min-height: 34px; }
  .health-pill { min-height: 30px; }
  input[type="text"], input[type="search"], input[type="number"], input[type="date"], input[type="password"], select {
    min-height: 40px;
    font-size: 16px; /* פחות מ-16px גורם ל-Chrome/Safari בנייד להגדיל את העמוד בפוקוס */
  }
}

/* טלפון: אחזקות התיק בכרטיס קומפקטי (3 שורות) במקום שורה לכל עמודה.
   הכמות והמחיר הממוצע נשארים שדות עריכה. ‏PEG/P-E/בטא - בעמוד החברה. */
@media (max-width: 640px) {
  #holdings-table .fin-table tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "asset asset val" "price day pnl" "qty avg w";
    column-gap: 10px;
    row-gap: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
  }
  #holdings-table .fin-table tbody td { display: block; border: none; padding: 0; text-align: start; min-width: 0; }
  #holdings-table .fin-table tbody td::before { display: block; font-size: 0.66rem; margin: 0 0 2px; }
  #holdings-table .fin-table tbody td.pf-c-x,
  #holdings-table .fin-table tbody td.pf-empty,
  #holdings-table .fin-table tbody td.actions-col { display: none; }
  #holdings-table td.pf-asset { grid-area: asset; }
  #holdings-table td.pf-c-val { grid-area: val; text-align: end; align-self: center; }
  #holdings-table td.pf-c-val::before { content: none; }
  #holdings-table td.pf-c-price { grid-area: price; }
  #holdings-table td.pf-c-day { grid-area: day; }
  #holdings-table td.pf-c-pnl { grid-area: pnl; }
  #holdings-table td.pf-c-qty { grid-area: qty; }
  #holdings-table td.pf-c-avg { grid-area: avg; }
  #holdings-table td.pf-c-w { grid-area: w; }
  #holdings-table td .cell-input { width: 100%; min-height: 34px; text-align: start; }
  #holdings-table .pf-asset-sub { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}

/* טלפון: שורה קומפקטית לכל מניה ולא כרטיס של 13 שורות. נמדד: 84 מניות
   יצרו עמוד בגובה 54,000px. כאן - נכס ומחיר בשורה אחת, ומתחת היום / חודש /
   שנה / מרחק משיא. השאר (שווי שוק, חצי שנה, דיבידנד, מכפילים) - בעמוד
   החברה. בגלל RTL העמודה הראשונה בגריד היא הימנית. */
@media (max-width: 640px) {
  .wl-table tr {
    display: grid;
    grid-template-columns: 24px repeat(4, minmax(0, 1fr));
    grid-template-areas: "fav asset asset price price" ". day m1 y1 high";
    column-gap: 8px;
    row-gap: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
  }
  .wl-table td { display: block; border: none; padding: 0; text-align: start; min-width: 0; }
  .wl-table td::before { display: block; font-size: 0.66rem; margin: 0 0 2px; }
  .wl-table td.wl-extra, .wl-table td.wl-actions { display: none; }
  .wl-table td.fav-cell { position: static; grid-area: fav; align-self: center; }
  .wl-table td.pf-asset { grid-area: asset; padding: 0; }
  .wl-table .pf-asset-sub { max-width: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .wl-table td.wl-price { grid-area: price; text-align: end; align-self: center; font-size: 1rem; }
  .wl-table td.wl-price::before { content: none; }
  .wl-table td.wl-day { grid-area: day; }
  .wl-table td.wl-m1 { grid-area: m1; }
  .wl-table td.wl-y1 { grid-area: y1; }
  .wl-table td.wl-high { grid-area: high; }
  .wl-table td.wl-high .pf-weight-bar { display: none; }
}

/* Company analysis: note shown when a chart uses a substitute line
   (e.g. pretax income instead of operating income for a bank) */
.metric-note {
  font-size: 0.76rem;
  color: var(--text-dim);
  background: var(--accent-fill);
  border-inline-start: 2px solid var(--accent);
  border-radius: 4px;
  padding: 5px 9px;
  margin: 0 0 8px;
  line-height: 1.5;
}
.metric-note[hidden] { display: none; }
/* ---- עמוד חברה: "יקרה ביחס לעצמה" (renderValuationBand) ---- */
.val-band-verdict { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 700; margin: 2px 0 4px; }
.val-band-verdict.up { color: var(--green); }
.val-band-verdict.down { color: var(--red); }
.val-band-bar { position: relative; height: 8px; border-radius: 999px; margin: 12px 0 4px;
  /* RTL: הזול (המינימום) בצד ימין = inset-inline-start, ולכן הירוק מתחיל מימין */
  background: linear-gradient(to left, color-mix(in srgb, var(--green) 55%, transparent), var(--surface-2), color-mix(in srgb, var(--red) 55%, transparent)); }
.val-band-bar b { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translate(50%, -50%);
  background: var(--accent); border: 2px solid var(--surface); box-shadow: var(--shadow-sm); }
.val-band-bar i.val-band-median { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--text-dim); transform: translateX(50%); }
.val-band-scale { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--text-dim); }
.insider-list { margin-top: 8px; }

/* ---- רשימת המעקב: קבוצות (groupsBarHtml / editGroup ב-watchlist.js) ---- */
.wl-groups { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; scrollbar-width: thin; }
.wl-group-chip {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 12px; font: inherit; color: var(--text); cursor: pointer; text-align: start;
}
.wl-group-chip.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-fill); }
.wl-group-name { font-weight: 700; font-size: 0.86rem; }
.wl-group-name small { color: var(--text-dim); font-weight: 600; }
.wl-group-perf { font-size: 0.72rem; color: var(--text-dim); white-space: nowrap; }
.wl-group-tag {
  margin-top: 3px; background: transparent; border: 1px dashed var(--border); color: var(--text-dim);
  border-radius: 999px; padding: 1px 8px; font: inherit; font-size: 0.68rem; cursor: pointer;
}
.wl-group-tag.has-group { border-style: solid; color: var(--accent); background: var(--accent-fill); border-color: transparent; }

/* ---- סרגל לשוניות תחתון (טלפון) - base.html ---- */
.bottom-tabs { display: none; }
@media (max-width: 860px) {
  .bottom-tabs {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; inset-inline: 0; bottom: 0; z-index: 90;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .bottom-tabs a, .bottom-tabs button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 56px; background: none; border: none; font: inherit; font-size: 0.68rem; font-weight: 600;
    color: var(--text-dim); text-decoration: none; cursor: pointer;
  }
  .bottom-tabs svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round; }
  .bottom-tabs a.active { color: var(--accent); }
  .bottom-tabs a.active svg { stroke-width: 2.3; }
  /* התוכן לא מוסתר מאחורי הסרגל */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  /* ההודעות הקופצות מעל הסרגל */
  .toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- "שאל את התיק" (chat.html) ---- */
.chat-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chat-suggestions[hidden] { display: none; }
.chat-log { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.chat-msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; line-height: 1.6; font-size: 0.92rem; }
.chat-msg p { margin: 0 0 6px; } .chat-msg p:last-child { margin: 0; }
.chat-bullet { margin: 2px 0; }
.chat-user { align-self: flex-start; background: var(--accent-gradient); color: var(--accent-text); border-end-start-radius: 4px; }
.chat-assistant { align-self: flex-end; background: var(--surface); border: 1px solid var(--border); border-end-end-radius: 4px; }
.chat-pending { color: var(--text-dim); font-style: italic; }
.chat-form { position: sticky; bottom: 0; background: var(--bg); padding: 8px 0; display: flex; gap: 8px; align-items: flex-end; }
@media (max-width: 860px) { .chat-form { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } }
.chat-form textarea { flex: 1; resize: none; background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 16px; }
.chat-actions { display: flex; flex-direction: column; gap: 6px; }

/* ---- בדיקת אסטרטגיות (backtest.html) ---- */
.bt-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 16px; }
.bt-form .field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 150px; }
.bt-form .field[hidden] { display: none; }
.bt-form select, .bt-form input { background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: 7px; padding: 8px 10px; font: inherit; }
.bt-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 14px 0; }
.bt-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.bt-picks a { text-decoration: none; }
#bt-strategy[hidden], #bt-compare[hidden] { display: none; }