/* ==========================================================================
   FilterRow — Figma tIGshAcTyBw7tLLptHDpy4 / 37688:37936
   ComponentSet: FilterRow
     - device=desktop (1223×64): chips group (right) + actions group (left)
     - device=mobile  (375×64): actions group only (no chips), centered
   Properties:
     - device (variant)         desktop | mobile
     - hasSort (boolean)        toggles the sorting group (the chips — סינוני מיון
                                של הטבלה; left side in RTL render)
     - chipsSlot (slot)         chips content = table sort/segments (not filters)

   All sizing / colors / typography use tokens from tokens.css.
   ========================================================================== */

/* ============================================================
   Container
   ============================================================ */
.filter-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:64px;                                           /* dim-16 (no token in tokens.css) */
  padding:var(--space-md);                               /* 12 */
  background:var(--ta-color-bg-base);
  border:1px solid var(--ta-color-border-subtle);
  border-radius:var(--border-radius-md);                 /* 8 */
  font-family:var(--font-family-app);
}

/* All buttons inside the filter row use regular (400) weight, not the
   default bold of the button system. */
.filter-row .btn{font-weight:400 !important;}

/* ============================================================
   Groups
   ============================================================ */
.filter-row__chips{
  display:flex;
  flex-direction:row-reverse;                            /* reverse chip order */
  align-items:center;
  gap:var(--space-sm);                                   /* 8 */
  flex-shrink:0;                                         /* never squash chips */
}
.filter-row__actions{
  display:flex;
  align-items:center;
  gap:var(--space-md);                                   /* 12 */
}
/* רק בזמן פוקוס על החיפוש — ה-actions תופס את המקום הפנוי כדי שהשדה יתרחב.
   במנוחה נשאר auto (רוחב תוכן) כדי שמדידת ה-compact תהיה נכונה. */
.filter-row__actions:has(.search-input:focus-within){flex:1;min-width:0;}

/* ============================================================
   Filter button (Figma "FilterButton" — 126w, btn category app)
   Structure: [icon] [text] [count] [×]
   ============================================================ */
.filter-row__filter-btn{
  gap:var(--space-sm) !important;                        /* 8 between segments */
  /* Symmetric 16/16 by default (no count badge visible) */
  padding-inline-start:var(--space-lg) !important;       /* 16 — icon side */
  padding-inline-end:var(--space-lg) !important;         /* 16 — text side */
}
/* Asymmetric padding only when count badge is visible (compact mode):
   text side gets 4 so the badge sits closer to the edge per Figma. */
.filter-row.is-compact .filter-row__filter-btn{
  padding-inline-end:var(--space-xs) !important;         /* 4 */
}
.filter-row__filter-count{
  display:none;                                          /* hidden by default — shown only in compact mode */
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:22px;
  padding:0 var(--space-sm);                             /* 8 */
  background:var(--ta-color-brand-main);                 /* turquoise per Figma */
  color:var(--ta-color-text-default);                    /* black text on brand */
  border-radius:100px;
  font-family:'Google Sans','Rubik', sans-serif;                       /* nominal number */
  font-size:var(--font-size-body-small);                 /* 14 */
  font-weight:400;
  line-height:1;
}

/* Compact mode: when chips can't fit alongside actions, hide chips and surface
   the count on the סינון button. Toggled via JS by measuring overflow. */
.filter-row.is-compact .filter-row__chips{display:none;}
.filter-row.is-compact .filter-row__filter-count{display:inline-flex;}

/* ============================================================
   Search — based on the DS SearchInput component (searchinput.css).
   Context difference: in the filter row the field sits on a WHITE bg
   instead of the surface gray the standalone component uses.
   ============================================================ */
.filter-row__searchbox{
  width:268px;                                           /* fixed per Figma (desktop) */
  height:auto;
  padding:0;                                             /* row controls its own gap */
  flex-shrink:0;
  transition:width .3s cubic-bezier(.4,0,.2,1);          /* רוחב בלבד */
}
/* Focus expand — לחיצה/פוקוס על החיפוש מרחיב אותו ל-70% (רוחב בלבד).
   flex-shrink:1 + min-width:0 → אם אין מקום (יש chips/דחוס) השדה מתכווץ במקום לחפוף. */
.filter-row__searchbox:focus-within{width:70%;flex-shrink:1;min-width:0;}

/* Clear (X) = DS ph:x-circle-fill (875:4419), צבע grays/700.
   האייקון כולל עיגול משלו → מבטלים את רקע העיגול של si-clear (אין עיגול כפול). */
.filter-row__searchbox .si-clear{
  background:none;
  opacity:1;
  color:var(--color-grays-700,#333);
}
.filter-row__searchbox .si-clear svg{width:100%;height:100%;}
.filter-row__searchbox .si-clear:hover{opacity:.8;}
/* white background — the filter-row context difference (overrides DS surface).
   Specificity must beat the DS rule .search-wrap.app.default .search-input (0,4,0),
   so the override carries .app.default too → (0,5,0). */
.filter-row .filter-row__searchbox.app.default .search-input{
  background:var(--ta-color-bg-base);
}
.filter-row .filter-row__searchbox.app.default .search-input:hover,
.filter-row .filter-row__searchbox.app.default .search-input:focus-within,
.filter-row .filter-row__searchbox.app.default .search-input.filled{
  background:var(--ta-color-bg-surface-hover);           /* exactly like the DS component (0.1) */
}

/* Custom placeholder: רק המילה "חפש" מודגשת (bold), השאר רגיל.
   placeholder נייטיב לא תומך בעיצוב חלקי → span overlay מעל ה-input. */
.filter-row__searchbox .si-placeholder{
  position:absolute;
  right:calc(var(--space-lg) + var(--dim-5) + var(--space-sm));  /* padding + icon + gap → תחילת הטקסט ב-RTL */
  top:50%;transform:translateY(-50%);
  font-family:'Google Sans','Assistant',sans-serif;
  font-size:var(--f-btn-cat);font-weight:400;line-height:16px;
  color:var(--ta-color-text-default);
  pointer-events:none;white-space:nowrap;
}
.filter-row__searchbox .si-placeholder b{font-weight:700;}   /* "חפש" בלבד */
.filter-row__searchbox .search-input.filled .si-placeholder{display:none;}  /* מוסתר ברגע שמקלידים */
/* בפוקוס — הטקסט מתחלף ל"חפשו" */
.filter-row__searchbox .si-placeholder .ph-focus{display:none;font-weight:700;}
.filter-row__searchbox .search-input:focus-within .si-placeholder .ph-default{display:none;}
.filter-row__searchbox .search-input:focus-within .si-placeholder .ph-focus{display:inline;}

/* ------------------------------------------------------------
   Legacy search markup (.filter-row__search) — for app pages not yet
   migrated to the DS searchinput structure (CRM-עסקאות, lectures-management-v2).
   Same behavior: Empty = white, hover/focus/has-text = surface.
   ------------------------------------------------------------ */
.filter-row__search{
  display:flex;
  align-items:center;
  gap:var(--space-sm);                                   /* 8 */
  width:268px;
  height:32px;
  padding:0 var(--space-lg);                             /* 16 */
  background:var(--ta-color-bg-base);                    /* Empty = white */
  border:none;
  border-radius:100px;
  cursor:text;
  font-family:inherit;
  flex-shrink:0;
  transition:background .2s ease;
}
.filter-row__search:hover,
.filter-row__search:focus-within,
.filter-row__search:has(.filter-row__search-input:not(:placeholder-shown)){
  background:var(--ta-color-bg-surface-hover);           /* hover / focus / has-text = surface/hover (0.1), like the DS component */
}
.filter-row__search-input{
  flex:1;
  min-width:0;
  width:100%;
  border:none;
  outline:none;
  background:transparent;
  font:inherit;
  font-size:var(--font-size-button-category);            /* 14 */
  font-weight:400;
  line-height:16px;
  color:var(--ta-color-text-default);
  text-align:start;
  padding:0;
}
.filter-row__search-input::placeholder{
  color:var(--ta-color-text-default);                    /* full per Figma */
  opacity:1;
}
.filter-row__search-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  flex-shrink:0;
}
.filter-row__search-icon svg{width:100%;height:100%;display:block;}
.filter-row[data-device="mobile"] .filter-row__search{width:auto;flex:1;}

.filter-row__filter-btn{flex-shrink:0;}                  /* filter button never shrinks */
.filter-row__filter-btn.is-active{
  background:var(--ta-color-bg-surface);                 /* visual on-click feedback */
}

/* ============================================================
   Chip (filter chip — radio group, btn category app + count badge)
   Figma: padding-end 16 (around label), padding-start 4 (around count badge).
   Selected (no count) — symmetric 16/16.
   ============================================================ */
.filter-chip{
  gap:var(--space-sm) !important;                        /* 8 between label + count */
  /* default: symmetric 16/16 (used when no count badge is present) */
  padding-inline:var(--space-lg) !important;             /* 16 */
}
/* asymmetric padding only when there's a count badge:
   label side gets 16, count-badge side gets 4. */
.filter-chip:has(.filter-chip__count){
  padding-inline-start:var(--space-lg) !important;       /* 16 — label side */
  padding-inline-end:var(--space-xs)   !important;       /* 4  — count side */
}
.filter-chip.is-selected{
  background:var(--ta-color-brand-main) !important;
  border-color:var(--ta-color-brand-main) !important;
}
.filter-chip__count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  padding:var(--space-xs) var(--space-sm);               /* 4 8 — Figma exact (Frame 3889) */
  background:var(--ta-color-bg-surface-selected);        /* TA/color/bg/surface/selected — Figma */
  color:#fff;                                             /* white */
  border-radius:100px;
  font-family:'Google Sans','Rubik', sans-serif;
  font-size:var(--font-size-body-small);                 /* 14 */
  font-weight:700 !important;                            /* bold (overrides button-system inherit) */
  line-height:1;
}

/* ============================================================
   Mobile variant (device="mobile") — no chips, search fills remaining
   ============================================================ */
.filter-row[data-device="mobile"]{
  width:375px;
  max-width:100%;
  padding:var(--space-md) var(--space-lg);               /* 12 16 */
}
.filter-row[data-device="mobile"] .filter-row__chips{display:none;}
.filter-row[data-device="mobile"] .filter-row__actions{
  flex:1;                                                /* actions take full row */
  min-width:0;
}
.filter-row[data-device="mobile"] .filter-row__searchbox{
  width:auto;
  flex:1;                                                /* fill remaining (mobile only) */
}

/* ============================================================
   Hide-sort — when hasSort = false (מכבה את צד המיון = ה-chips)
   ============================================================ */
.filter-row[data-has-sort="false"] .filter-row__chips{display:none;}