/* ==========================================================================
   filterbar.css · שורת הסינון האחת של המערכת ("מגש צף")
   דורש: system.css (טוקנים) + components.css (field/label/input/select/btn).
   נטען אחריהם, ולפני ה-CSS המקומי של המסך.
   זוג: js/filterbar.js  →  FilterBar.init(el, opts)

   --------------------------------------------------------------------------
   חוזה המרקאפ (המבנה קבוע בכל המערכת; דוגמה מלאה: js/filterbar-contract.html)
   --------------------------------------------------------------------------
   שישה סלוטים, תמיד באותו סדר RTL (מימין לשמאל: חיפוש ← הקשר ← צ׳יפים ←
   משפך ← תצוגה ← פעולות). סלוט שהמסך לא צריך פשוט מושמט - אין ממלאי מקום.

   <div class="fbar" id="ev-fbar">
     <div class="fbar__search">   ...שדה חיפוש אחד...            </div>
     <div class="fbar__ctx">      ...segmented הקשר (tablist)... </div>
     <div class="fbar__chips">    ...צ׳יפים מהירים עם ספירות...  </div>
     <div class="fbar__more">     ...משפך + פאנל צף...           </div>
     <span class="fbar__spacer" aria-hidden="true"></span>
     <div class="fbar__views">    ...מתג תצוגה, אייקונים...      </div>
     <div class="fbar__actions">  ...ייצוא + "+ חדש"...          </div>
   </div>

   כללי ברזל:
   1. שדות select ותאריכים לעולם לא בשורה - רק בתוך הפאנל של המשפך.
   2. שדה החיפוש: מעטפת <div class="fbar-search"> ובתוכה
      <input class="fbar-search__input" id="<ה-id הקיים של המסך>">.
      הכיתה אחידה לכל המערכת, ה-id נשאר של המסך (כדי שהקוד הקיים לא ישבר).
   3. כפתור/צ׳יפ = <button class="fbar-btn">. נבחר = class "is-on" (זה מה
      ש-filterbar.js קורא). אייקון בלבד = "fbar-btn--icon". ראשי = "fbar-btn--primary".
   4. טקסט שמתקפל לאייקון נעטף ב-<span class="fbar-btn__t">, ספירה ב-
      <span class="fbar-btn__n">.
   5. הקומפוננטה היא UI בלבד. היא לא מנהלת state של סינון ולא עוצרת אירועים -
      click/input/change של המסך ממשיכים לעבוד בדיוק כמו היום.
   6. הפקדים שמתקפלים עוברים פיזית לתוך הפאנל של המשפך (אותם צמתי DOM, אותם
      מאזינים). לכן האזנה בדלגציה חייבת להיות על שורש ה-.fbar ולא על הקבוצה.
   7. קבוצת צ׳יפים עם data-fbar-multi = בחירה מרובה שהקומפוננטה מנהלת בעצמה
      (צ׳יפ data-fbar-all הוא "הכל" בלעדי, ונפלט fbar:chips). קבוצה בלי
      הסימון הזה נשארת באחריות המסך, בדיוק כמו היום.
   8. הפאנל הצף לא חורג מהמסך לעולם: רוחב, גובה מרבי וכיוון הפתיחה נקבעים
      ב-filterbar.js (placePanel). אסור לקבוע לו width/max-height במסך.

   נגישות (מחייב):
   - כפתור המשפך: aria-expanded="false" + aria-controls="<id הפאנל>" +
     aria-haspopup="dialog". הפאנל: role="dialog" + aria-label.
   - קבוצת הקשר/תצוגה (בחירה יחידה): role="tablist" על הקבוצה,
     role="tab" + aria-selected על כל כפתור (בנוסף ל-is-on).
   - צ׳יפים מהירים (בחירה מרובה): aria-pressed="true|false" על כל צ׳יפ.
   - כפתור אייקון בלבד: aria-label חובה (וגם title לטולטיפ).
   - ספירה בצ׳יפ נקראית כחלק מהשם; אם צריך ניסוח נקי - aria-label מלא על הצ׳יפ.
   - השדות בפאנל: <label class="label"> קשור ל-input/select (עטיפת .field).
   ========================================================================== */

/* ==========================================================================
   1 · המגש
   ========================================================================== */

.fbar {
  --fbar-h: 34px;            /* גובה צ׳יפ/כפתור בשורה */
  --fbar-gap: var(--sp-2);
  --fbar-pad-x: var(--sp-3);
  --fbar-pad-y: var(--sp-2);

  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--fbar-gap);
  min-width: 0;
  margin-bottom: var(--sp-5);
  padding: var(--fbar-pad-y) var(--fbar-pad-x);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  transition: padding 200ms var(--ease), gap 200ms var(--ease),
              border-radius 200ms var(--ease), box-shadow 200ms var(--ease);
}

/* הסלוטים: איים עדינים בתוך המגש. שום סלוט לא מתכווץ - ההתקפלות היא של
   filterbar.js, לא של flex-shrink (אחרת טקסט נחתך במקום להתקפל). */
.fbar > div,
.fbar > span {
  flex: none;
  min-width: 0;
}

.fbar__search,
.fbar__ctx,
.fbar__chips,
.fbar__more,
.fbar__views,
.fbar__actions {
  display: flex;
  align-items: center;
  position: relative;
  gap: 2px;
  padding: 3px;
  background: var(--surface-2);
  border-radius: var(--r-pill);
  transition: background-color 200ms var(--ease), padding 200ms var(--ease);
}

/* חיפוש ופעולות אינם "אי" - הם יושבים ישר על המגש */
.fbar__search,
.fbar__actions {
  background: transparent;
  padding: 0;
  gap: var(--sp-2);
}

.fbar__spacer {
  flex: 1 1 auto !important;
  min-width: var(--sp-3);
  align-self: stretch;
}

/* מפריד עדין בין קבוצות. במראה "מגש צף" האיים כבר מפרידים, ולכן המפריד
   נועד למקומות שבהם אין אי (בעיקר בתוך .fbar__actions, בין ייצוא ל"+ חדש",
   או בין שתי קבוצות צ׳יפים סמוכות). נעלם ברגע שהשורה מתחילה להתקפל. */
.fbar__sep {
  flex: none;
  width: 1px;
  height: 20px;
  margin: 0 2px;
  background: var(--line);
  border-radius: var(--r-pill);
}

/* תווית קבוצה זעירה ("דחיפות", "טווח") */
.fbar-label {
  flex: none;
  padding-inline: var(--sp-2) 2px;
  color: var(--ink-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  white-space: nowrap;
}

/* ==========================================================================
   2 · צ׳יפים וכפתורים
   ========================================================================== */

.fbar-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--fbar-h);
  padding: 0 11px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color 200ms var(--ease), color 200ms var(--ease),
              border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}

.fbar-btn i { font-size: 0.85em; }

.fbar-btn:hover:not(.is-on):not([disabled]):not([aria-disabled="true"]) {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--sh-xs);
}

.fbar-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* נבחר: מילוי סגול מלא, טקסט לבן */
.fbar-btn.is-on {
  background: linear-gradient(165deg, var(--accent-hover), var(--accent-deep));
  color: #fff;
  border-color: transparent;
  font-weight: var(--fw-bold);
  box-shadow: 0 2px 6px rgba(100, 35, 91, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.fbar-btn[disabled],
.fbar-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* ספירה בתוך צ׳יפ */
.fbar-btn__n {
  color: var(--ink-3);
  font-size: 11px;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums lining-nums;
}
.fbar-btn.is-on .fbar-btn__n { color: rgba(255, 255, 255, 0.78); }

/* אייקון בלבד */
.fbar-btn--icon {
  width: var(--fbar-h);
  padding: 0;
}
.fbar-btn--icon i { font-size: 0.95rem; }

/* הפעולה הראשית ("+ חדש") */
.fbar-btn--primary {
  padding: 0 14px;
  background: linear-gradient(165deg, var(--accent-hover), var(--accent-deep));
  color: #fff;
  border-color: transparent;
  font-weight: var(--fw-bold);
  box-shadow: 0 2px 6px rgba(100, 35, 91, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.fbar-btn--primary:hover:not([disabled]) {
  background: linear-gradient(165deg, #8B3D82, var(--accent));
  color: #fff;
  box-shadow: 0 4px 12px rgba(100, 35, 91, 0.28);
}

/* מונה על המשפך */
.fbar-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--accent);
  border-radius: var(--r-pill);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums lining-nums;
}
.fbar-btn.is-on .fbar-badge { background: rgba(255, 255, 255, 0.22); }
.fbar-badge[hidden] { display: none; }

/* צ׳יפ "+N" (נוצר אוטומטית ע"י filterbar.js כשצ׳יפים מתקפלים) */
.fbar-chip-more {
  color: var(--accent-ink);
  font-weight: var(--fw-bold);
}
.fbar-chip-more[hidden] { display: none; }

/* פרוקסי של קבוצה שהתקפלה כולה לתוך הפאנל (הקשר / תצוגה) */
.fbar-proxy > i.fbar-proxy__caret {
  font-size: 0.7em;
  opacity: 0.7;
  margin-inline-start: 1px;
}

/* ==========================================================================
   3 · חיפוש
   ========================================================================== */

.fbar-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
  width: 216px;
  transition: width 200ms var(--ease);
}
.fbar-search--sm { width: 180px; }
.fbar-search--md { width: 236px; }
.fbar-search:focus-within,
.fbar-search--sm:focus-within,
.fbar-search--md:focus-within { width: 296px; }

.fbar-search__icon {
  position: absolute;
  inset-inline-start: 12px;
  color: var(--ink-3);
  font-size: 0.85rem;
  pointer-events: none;
  transition: color 200ms var(--ease);
}
.fbar-search:focus-within .fbar-search__icon { color: var(--accent); }

.fbar-search__input {
  width: 100%;
  min-height: var(--fbar-h);
  height: var(--fbar-h);
  padding-inline: 34px 30px;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-sm);
  outline: none;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease),
              box-shadow 200ms var(--ease);
}
.fbar-search__input::placeholder { color: var(--ink-3); }
.fbar-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.fbar-search:focus-within .fbar-search__input {
  background: var(--surface);
  border-color: var(--accent-line);
  box-shadow: var(--sh-xs);
}
.fbar-search__input:focus-visible { outline: none; }

/* ניקוי מוטבע - מופיע רק כשיש ערך (filterbar.js מסיר/מוסיף hidden) */
.fbar-search__x {
  position: absolute;
  inset-inline-end: 5px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-3);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.fbar-search__x:hover { background: var(--surface-3); color: var(--ink); }
.fbar-search__x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fbar-search__x[hidden] { display: none; }

/* כפתור החיפוש המכווץ (נוצר אוטומטית; מוצג רק במצב is-fold-search) */
.fbar-search__toggle { display: none; }

/* ==========================================================================
   4 · הפאנל הצף של המשפך
   ========================================================================== */

/* ⚠️ הרוחב, הגובה המרבי, ההצמדה לצדדים והכיוון (מטה/מעלה) נקבעים ב-JS
   (placePanel) לפי המקום שבאמת יש על המסך. הערכים כאן הם רשת ביטחון בלבד,
   למקרה שהפאנל מוצג לפני שה-JS הספיק לרוץ. 100vw כולל את פס הגלילה ולכן
   מחסירים ממנו יותר מהמרווח בפועל. */
.fbar-panel {
  position: absolute;
  top: calc(100% + 16px);
  inset-inline-end: 0;
  z-index: 40;
  width: 316px;
  max-width: calc(100vw - 2 * var(--sp-3));
  max-height: calc(100dvh - 132px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  text-align: start;
  overscroll-behavior: contain;
}
.fbar-panel[hidden] { display: none; }

/* אין מקום מתחת לשורה (השורה נמוכה במסך) - הפאנל נפתח כלפי מעלה */
.fbar-panel.fbar-panel--up {
  top: auto;
  bottom: calc(100% + 16px);
}

.fbar-panel::before {
  content: "";
  position: absolute;
  top: -6px;
  inset-inline-end: 22px;
  width: 11px;
  height: 11px;
  background: var(--surface);
  border-inline-start: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: 2px 0 0 0;
  /* --fbar-arrow-dx נקבע ב-filterbar.js כשהפאנל נדחף פנימה כדי לא לחרוג מהמסך */
  transform: translateX(var(--fbar-arrow-dx, 0px)) rotate(45deg);
}

.fbar-panel.fbar-panel--up::before {
  top: auto;
  bottom: -6px;
  border-inline-start: 0;
  border-top: 0;
  border-inline-end: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0 0 0 2px;
}

.fbar-panel__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line-soft);
}
.fbar-panel__head b { font-size: var(--fs-base); font-weight: var(--fw-bold); }

.fbar-panel__close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--ink-3);
  cursor: pointer;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.fbar-panel__close:hover { background: var(--surface-2); color: var(--ink); }
.fbar-panel__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.fbar-panel__body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* שדות הפאנל: הכיתות הקיימות של המערכת (.field/.label/.input/.select),
   בגרסה קומפקטית שמתאימה לפאנל צר. */
.fbar-panel .field { gap: 5px; min-width: 0; }
.fbar-panel .label {
  color: var(--ink-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  min-width: 0;
  overflow-wrap: anywhere;
}
/* שדה ארוך (שם קמפיין, אופציה ארוכה ב-select) לא מרחיב את הפאנל -
   הוא נחתך בשלוש נקודות. בלי זה הפאנל היה מתנפח מעבר לרוחב המסך. */
.fbar-panel .input,
.fbar-panel .select,
.fbar-panel .textarea,
.fbar-panel .input-wrap { min-width: 0; max-width: 100%; }
.fbar-panel .input,
.fbar-panel .select {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* ⚠️ background-color בלבד, לא background: הקיצור מוחק את ה-background-image
   שמצייר את חץ ה-select ואת אייקון לוח השנה של datepicker.js. */
.fbar-panel .input,
.fbar-panel .select,
.fbar-panel .textarea {
  min-height: 38px;
  padding: var(--sp-1) var(--sp-3);
  background-color: var(--surface-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}
.fbar-panel .select { padding-inline-end: var(--sp-7); background-position: left var(--sp-3) center; }
.fbar-panel .input.dp-input { padding-inline-start: 2.3rem; background-position: right var(--sp-3) center; }
.fbar-panel .input:focus,
.fbar-panel .select:focus { background-color: var(--surface); }

/* זוג שדות בשורה (מתאריך / עד תאריך) */
.fbar-panel__pair { display: flex; gap: var(--sp-2); }
.fbar-panel__pair > .field { flex: 1 1 0; min-width: 0; }

/* שתי הפעולות; אם התוויות ארוכות מדי לרוחב הפאנל, "ניקוי" יורד לשורה
   משלו במקום לדחוף את הכפתורים אל מחוץ לפאנל */
.fbar-panel__foot {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding-top: var(--sp-1);
  min-width: 0;
}
.fbar-panel__foot .fbar-btn { min-height: 38px; min-width: 0; }
.fbar-panel__apply { flex: 1 1 auto; }
.fbar-panel__reset {
  flex: 0 1 auto;
  border-color: var(--line-2);
  color: var(--ink-2);
}
.fbar-panel__reset:hover { background: var(--surface-2); color: var(--ink); }

/* ---- אזור ה"מגירה": מה שהתקפל מהשורה וממשיך לחיות כאן ----
   ⚠️ --fbar-stash-max נקבע ב-filterbar.js מתוך הגובה בפועל של הפאנל.
   אחוזים לא נפתרים מול max-height בלבד, ולכן "46%" לבדו לא היה חוסם כלום. */
.fbar-panel__stash {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-height: 0;
  max-height: var(--fbar-stash-max, 46%);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-soft);
}
.fbar-panel__stash[hidden] { display: none; }

/* התוכן נגלל בתוך הפאנל, ולכן הקצה התחתון מתרכך כשיש עוד מתחתיו - אחרת
   שורה חתוכה באמצע נראית כמו תקלה ולא כמו רמז לגלילה. הכיתות נקבעות
   ב-filterbar.js לפי מדידה, ונעלמות ברגע שהגענו לסוף. */
.fbar-panel__stash.is-scroll:not(.is-scroll-end),
.fbar-panel__body.is-scroll:not(.is-scroll-end) {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent 100%);
}

.fbar-stash__grp { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fbar-stash__t { color: var(--ink-3); font-size: var(--fs-xs); font-weight: var(--fw-semi); }

.fbar-stash__items {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  min-width: 0;
  background: var(--surface-2);
  border-radius: var(--r-lg);
}
/* הפקדים שהועברו שומרים על עצמם, רק לא נחתכים ולא בורחים:
   שורה נשברת, מילה ארוכה נשברת, והרוחב לעולם לא עובר את המגירה. */
.fbar-stash__items .fbar-btn {
  white-space: normal;
  max-width: 100%;
  min-width: 0;
  height: auto;
  padding-block: 5px;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.25;
}
.fbar-stash__items .fbar-btn--icon { flex: none; width: var(--fbar-h); padding-block: 0; }
.fbar-stash__items .fbar-btn--primary { box-shadow: none; }

/* ==========================================================================
   5 · סולם ההתקפלות
   המצבים נקבעים ב-filterbar.js לפי הרוחב האמיתי של המגש (ResizeObserver),
   לא לפי רוחב החלון - אותו מסך יכול לחיות ברוחבים שונים (עם/בלי סרגל צד,
   בתוך split, בתוך דרואר).
   0 מלא · 1 תוויות · 2 צ׳יפים · 3 פעולה ראשית · 4 הקשר+תצוגה · 5 חיפוש ·
   6 ייצוא · 7 מטריקה צפופה (רשת ביטחון).
   ========================================================================== */

/* 1 · התוויות יורדות */
.fbar.is-fold-labels .fbar-label,
.fbar.is-fold-labels .fbar__sep { display: none; }

/* 2 · צ׳יפים: נשאר הנבחר, השאר עברו לפאנל, ואחריהם "+N" */
.fbar.is-fold-chips .fbar__chips { gap: 2px; }

/* 3 · הפעולה הראשית הופכת לאייקון */
.fbar.is-fold-primary .fbar-btn--primary .fbar-btn__t { display: none; }
.fbar.is-fold-primary .fbar-btn--primary {
  width: var(--fbar-h);
  padding: 0;
  gap: 0;
}

/* 4 · קבוצות ההקשר והתצוגה מתקפלות לפרוקסי, והמשפך הופך לאייקון */
.fbar.is-fold-ctx .fbar__more .fbar-btn__t { display: none; }
.fbar.is-fold-ctx .fbar__ctx,
.fbar.is-fold-ctx .fbar__views { padding: 2px; }

/* 5 · החיפוש מתכווץ לאייקון */
.fbar.is-fold-search .fbar-search { display: none; }
.fbar.is-fold-search .fbar-search__toggle { display: inline-flex; }

/* החיפוש נפתח מעל המגש (בלי לפרק את השורה, בלי דיאלוג).
   הסלוט חייב לוותר על position:relative כדי שהעוגן יהיה ה-.fbar עצמו. */
.fbar.is-search-open .fbar__search { position: static; }
.fbar.is-search-open .fbar-search {
  position: absolute;
  inset-inline: var(--fbar-pad-x);
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  display: flex;
  width: auto;
}
/* שאר הסלוטים נעלמים מתחת לשדה הפתוח (הפאנל נסגר ב-JS לפני שנפתח חיפוש) */
.fbar.is-search-open > *:not(.fbar__search) { visibility: hidden; }
.fbar.is-search-open .fbar-search__input {
  background: var(--surface);
  border-color: var(--accent-line);
  box-shadow: var(--sh-sm);
}
.fbar.is-search-open .fbar-search__toggle { visibility: hidden; }

/* 6 · הייצוא נכנס לפאנל (הצומת עובר פיזית; כאן רק סגירת הרווח) */
.fbar.is-fold-export .fbar__actions { gap: var(--sp-1); }

/* 7 · מטריקה צפופה - רשת ביטחון כשגם אחרי כל הקיפולים אין מקום */
.fbar.is-fold-tight {
  --fbar-h: 30px;
  --fbar-gap: 4px;
  --fbar-pad-x: 6px;
  --fbar-pad-y: 5px;
  border-radius: var(--r-lg);
}
.fbar.is-fold-tight .fbar__ctx,
.fbar.is-fold-tight .fbar__chips,
.fbar.is-fold-tight .fbar__more,
.fbar.is-fold-tight .fbar__views { padding: 2px; gap: 2px; }
.fbar.is-fold-tight .fbar-btn { padding: 0 8px; }
.fbar.is-fold-tight .fbar__ctx .fbar-btn,
.fbar.is-fold-tight .fbar__chips .fbar-btn {
  max-width: 116px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  line-height: var(--fbar-h);
}
.fbar.is-fold-tight .fbar__spacer { min-width: 2px; }

/* ==========================================================================
   6 · מצב מדידה (filterbar.js מוסיף/מסיר את הכיתה תוך אותה פעימה)
   --------------------------------------------------------------------------
   ⚠️ הריפוד, המרווח והרוחב מונפשים 200מ״ש. מדידה שנופלת באמצע ההנפשה "רואה"
   גאומטריה שאינה סופית: הקומפוננטה הייתה מחליטה על רמת קיפול לפי מצב ביניים,
   ואחרי 200מ״ש השורה חורגת - או מתנדנדת בין שתי רמות בלי סוף.
   לכן בזמן המדידה בלבד מוסרות מרשימת המעבר התכונות הגאומטריות. הצבעים
   והצללים ממשיכים להיות מונפשים כרגיל, ולכן המראה לא נפגע.
   ========================================================================== */
.fbar.is-fbar-measuring,
.fbar.is-fbar-measuring > div,
.fbar.is-fbar-measuring > span,
.fbar.is-fbar-measuring .fbar-btn,
.fbar.is-fbar-measuring .fbar-search,
.fbar.is-fbar-measuring .fbar-search__input {
  transition-property: background-color, color, border-color, box-shadow;
}

/* ==========================================================================
   7 · העדפת הפחתת תנועה
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .fbar, .fbar > div, .fbar-btn, .fbar-search, .fbar-search__input,
  .fbar-search__icon, .fbar-search__x, .fbar-panel__close {
    transition: none;
  }
}