/* פרק 34 — מובייל כמבנה שימוש נפרד, לא תצוגת מחשב מכווצת.
 *
 * שלושה שינויים אמיתיים ולא רק צרים יותר: הניווט עובר לתחתית המסך ונשאר
 * ביד אחת, חלונות הפרטים עולים מלמטה במקום להיפתח מהצד, וטבלאות הופכות
 * לכרטיסים — טבלה שגוללים אותה הצידה בטלפון היא טבלה שלא קוראים.
 *
 * הגבול נקבע ב-760px ולא ב-900: בין 760 ל-1024 (טאבלט) התצוגה הרחבה
 * עדיין עובדת, והניווט התחתון היה גונב שטח בלי צורך.
 */

/* ══ ⭐ כלל אחד לשלושת הממשקים ══════════════════════════════════════
 *
 * **החלטת דולב, 17/09/2026:** "אני רוצה שכל התיקונים שעשינו יחולו על
 * כולם, על הממשק שאנחנו עובדים, שהעסקים עובדים, ושהעובדים של העסקים
 * עובדים. שהכל יהיה מקשה אחת כמו MONDAY."
 *
 * ⛔ **הכשל שזה בא למנוע.** ב-17/09 תוקנו ארבע בעיות מובייל שנראו
 * בסרטון, וכולן תוקנו על מחלקות של האפליקציה בלבד. אף אחת מהן לא
 * נגעה בפורטל, שהוא המסך שבו עובדים בפועל. התיקון היה נכון והמסך
 * הלא נכון.
 *
 * ⭐ **הכלל:** כשמתקנים משהו שמשותף במהותו, הסלקטור מכסה את שני
 * הממשקים באותה שורה. לא שתי גרסאות שיתפצלו בחודש הבא.
 * הסרגל שלנו `.cviews`, של הפורטל `.p-tabs`. כרטיס ליד אצלנו
 * `table.resp`, בפורטל `.ld-fields`. וכן הלאה.
 *
 * ⚠️ **מה שאינו משותף במהות נשאר נפרד**, וזה בסדר: לפורטל אין מסננים
 * ואין קוביות בורדים, ואין טעם להמציא לו אותם רק כדי שיהיה זהה.
 */

/* ── סרגל צד: כותרת ואזור העסקים ─────────────────────────────────────── */
.brand-ws{font-size:10px;letter-spacing:.16em;color:var(--ink3);text-transform:uppercase;margin-top:-2px}
.side-x{display:none}
.side-sec{font-size:10.5px;letter-spacing:.1em;color:var(--ink3);margin:10px 0 6px 2px}
.nav-item .n-open{margin-inline-start:auto;font-family:var(--font-num);font-size:11px;padding:1px 7px;
  border-radius:99px;background:var(--accent);color:var(--on-accent);font-weight:500}
.nav-item.active .n-open{background:var(--accent);color:var(--on-accent)}

/* ── ניווט תחתון ─────────────────────────────────────────────────────── */
.mnav{display:none}

@media (max-width:760px){
  .shell{grid-template-columns:1fr}
  body{font-size:15px}

  /* הסרגל הופך לגיליון שנפתח מלמעלה, ורק כשמבקשים אותו */
  .side{position:fixed;inset:0 0 auto 0;height:auto;max-height:86vh;overflow-y:auto;z-index:60;
    border-inline-end:0;border-bottom:1px solid var(--line2);box-shadow:var(--sh2);
    transform:translateY(-102%);transition:transform .2s ease;padding-bottom:20px}
  .side.open{transform:none}
  .side-toggle{display:none}

  .main{padding-bottom:84px}          /* מקום לניווט התחתון */
  .content{padding:12px 14px}
  /* ⛔ **רבע מהמסך הלך על כותרת.** נמדד ב-430 פיקסל: `client-head`
     לקח 169 פיקסל ועוד 47 לסרגל הלשוניות, כלומר 216 לפני התוכן
     הראשון. בטלפון זה המקום שבו רואים ליד אחד במקום שלושה.
     ⭐ הכותרת נשארת, היא פשוט מפסיקה לתפוס מקום של תוכן. */
  .client-head{padding:10px 14px 0}
  .ch-top{gap:8px}
  .ch-top h1{font-size:20px;gap:8px}
  .ch-stats{gap:12px;margin-inline-start:0}
  .ch-stat{font-size:11px}
  .ch-stat b{font-size:14px}
  /* ⚠️ **שורת הפעולות נשארת בשורה נפרדת, בכוונה.** ניסיתי להצמיד
     אותה לכותרת כדי לחסוך 55 פיקסל, אבל יש בה 11 כפתורים: שורה אחת
     הייתה מועכת את שם העסק לכמה אותיות. 103 פיקסל לכותרת ולאחת עשרה
     פעולות הוא מחיר סביר, והחיסכון האמיתי נמצא במקום אחר. */
  .c-acts{margin:6px 0 0}
  .ch-top h1{font-size:22px}
  .ch-actions{width:100%;margin:10px 0 0}

  /* כרטיסי מדד: שתי עמודות, מספר גדול (פרק 32) */
  .kpis,.c-kpis{grid-template-columns:1fr 1fr;display:grid;gap:10px}
  .kpi b{font-size:27px}

  /* יעד מגע 44 פיקסלים בכל דבר לחיץ */
  .btn,.nav-item,.chip,.pill,.cv,.tst,.dd-btn,.link{min-height:44px;display:inline-flex;align-items:center}
  .btn{padding:10px 16px}
  input,select,textarea{min-height:44px;font-size:16px}   /* 16px מונע זום אוטומטי ב-iOS */
  /* ⛔ 22/09/2026: הכלל שמעל נדרס בכל מקום שיש בו מחלקה (.cf input = 13px,
     .bot-in textarea = 14px, .rowl select = 12.5px...), ואייפון זימזם את
     המסך על כל פוקוס. זה מה שנראה "לא מותאם" בכל פעם מחדש. !important
     בכוונה: בטלפון אין שדה שרוצים אותו מתחת ל-16.                  */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea{font-size:16px!important}

  /* חלון צד → חלון שעולה מלמטה, עם ידית לגרירה */
  .drawer{top:auto;bottom:0;left:0;right:0;width:100%;max-height:88vh;border-radius:18px 18px 0 0;
    border:1px solid var(--line2);border-bottom:0;box-shadow:0 -12px 40px rgba(0,0,0,.28);
    animation:sheet-up .22s ease}
  .drawer::before{content:'';display:block;width:38px;height:4px;border-radius:99px;background:var(--line2);
    margin:8px auto 2px;flex:none}
  @keyframes sheet-up{from{transform:translateY(14px);opacity:.6}to{transform:none;opacity:1}}
  .modal{top:auto;bottom:0;right:0;transform:none;width:100%;border-radius:18px 18px 0 0;max-height:88vh;overflow:auto}
  .pop{position:fixed;inset:auto 8px 84px 8px;max-width:none;width:auto}

  /* טבלה → כרטיסים. כל שורה נקראת כרשומה, והכותרת מגיעה מ-data-label. */
  /* width:100% על טבלה שהפכה לבלוק עדיין מחשבת רוחב לפי התוכן הרחב ביותר;
     max-width הוא מה שבאמת עוצר את הגלילה הצידה. */
  table.resp,table.resp thead,table.resp tbody,table.resp tr,table.resp td{display:block;width:auto;max-width:100%}
  table.resp{width:100%}
  table.resp thead{display:none}
  table.resp tr{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
    padding:10px 12px;margin-bottom:10px}
  table.resp td{border:0;padding:4px 0;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
  table.resp td::before{content:attr(data-label);color:var(--ink3);font-size:12.5px;flex:none}
  table.resp td:first-child{font-weight:500;font-size:16px;padding-bottom:8px;border-bottom:1px solid var(--line);
    margin-bottom:6px}
  table.resp td:first-child::before{display:none}
  table.resp td:empty{display:none}
  /* ⛔ **שדה בלי ערך לא תופס שורה בכרטיס.** בסרטון של אורי (17/09/2026)
     שלושה שדות עם "—" לקחו יותר מקום מהטלפון והסטטוס יחד, ובמסך שלם
     נראה ליד אחד. בדסקטופ העמודה נשארת במקומה. */
  table.resp td.v-empty{display:none}
  /* ⛔ **חוץ מכשביקשו במפורש לראות הכל.** מי שלוחץ "+9 עמודות
     מוסתרות" ואז לא רואה כלום מבין שהכפתור שבור, ולא שהשדות ריקים.
     בקשה מפורשת גוברת על הניקיון. */
  table.resp.show-all td.v-empty{display:flex}

  /* בבורד המשימות התא הראשון הוא תיבת הסימון, ולכן הכותרת היא השני:
     בטלפון מסתירים את הבחירה המרובה ומציגים את שם המשימה ככותרת הכרטיס. */
  table.tasks-table.resp td.tk-sel{display:none}
  table.tasks-table.resp td.tk-title{display:block;font-weight:500;font-size:16px;padding:0 0 8px;
    border-bottom:1px solid var(--line);margin-bottom:6px}
  table.tasks-table.resp td.tk-title::before{display:none}
  table.tasks-table.resp td.tk-title .link-name{text-align:start;white-space:normal}
  table.tasks-table.resp td:first-child{border-bottom:0;margin:0;padding:0}
  table.resp .tk-sub{color:var(--ink3);font-size:12.5px;margin-top:3px}

  /* טבלת הלידים: התא הראשון הוא תיבת הסימון, ולכן השם הוא שכותרת הכרטיס.
     בחירה מרובה יורדת בטלפון — היא נועדה לעכבר ולפעולה על עשרות שורות. */
  table.resp td.cb-col{display:none}
  table.resp td.lead-nm{display:block;font-weight:500;font-size:16px;padding:0 0 8px;
    border-bottom:1px solid var(--line);margin-bottom:6px}
  table.resp td.lead-nm::before{display:none}
  table.resp td.lead-nm .lead-board{font-weight:400;font-size:12.5px;color:var(--ink3);margin-top:2px}
  table.resp .phone-cell{gap:14px}
  /* ברירת המחדל מצמידה את התא הראשון ככותרת; כאן הכותרת היא השני, ולכן
     הכללים של :first-child מתאפסים על תיבת הסימון ולא על השם. */
  table.resp td.cb-col:first-child{border-bottom:0;margin:0;padding:0}

  /* ── ⭐ בורד בצפיפות של מאנדיי (דולב אישר 17/09/2026, אפשרות ב) ──
   *
   * נמדד מול מאנדיי בטלפון של דולב: אצלנו 5 לידים במסך, אצלם 13.
   * ההבדל הוא מה תופס גובה: 387 פיקסל לפני הליד הראשון ו-79 לכל ליד,
   * מול 320 ו-46. עכשיו: שורה אחת של 48 פיקסל, תא צבע של הסטטוס בקצה
   * (כמו במאנדיי), שם, מתי, וואטסאפ וחיוג. הטלפון והמקור בכרטיס.
   * החיפוש והסינון יורדים לפס קבוע בתחתית, כמו ה-Quick find שלהם.
   *
   * ⛔ אותם תאים, אותו DOM. grid עם מיקום מפורש לכל תא, כי סדר ה-DOM
   * (שם, טלפון, מקור, סטטוס, תאריך) אינו סדר התצוגה. בדסקטופ הטבלה
   * נשארת טבלה ושום כלל מכאן לא חל. */
  table.resp:not(.tasks-table){background:var(--surface);border:1px solid var(--line);
    border-radius:var(--r);overflow:hidden}
  table.resp tr[data-id]{display:grid;grid-template-columns:78px minmax(0,1fr) auto auto auto;
    grid-auto-flow:row;align-items:stretch;min-height:48px;padding:0;margin:0;gap:0;
    border:0;border-top:1px solid var(--line);border-radius:0;background:var(--surface)}
  table.resp tbody:first-of-type tr[data-id]:first-child{border-top:0}
  table.resp tr[data-id] td{padding:0;border:0;margin:0;display:none;font-size:12.5px;color:var(--ink3)}
  table.resp tr[data-id] td::before{content:none}
  /* תא הסטטוס: הצבע הוא התא, הטקסט לבן, כמו במאנדיי */
  table.resp tr[data-id] td.st-col{display:flex;grid-column:1;grid-row:1;align-items:stretch;
    background:var(--g,var(--surface2));padding:0}
  table.resp tr[data-id] .status-native{width:100%;height:100%;min-height:48px;border-radius:0;
    background:transparent !important;color:#fff !important;font-size:10.5px !important;font-weight:700;
    padding:0 4px !important;text-align:center;text-align-last:center;
    text-shadow:0 1px 1px rgba(0,0,0,.35);cursor:pointer}
  table.resp tr[data-id] td.lead-nm{display:flex;grid-column:2;grid-row:1;align-items:center;
    padding:0 10px;font-size:14px;font-weight:700;color:var(--ink);min-width:0;border:0;margin:0}
  table.resp tr[data-id] td.lead-nm .lead-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  table.resp tr[data-id] td.lead-nm .lead-board{display:none}
  table.resp tr[data-id] td.when{display:flex;grid-column:3;grid-row:1;align-items:center;
    font-size:11px;color:var(--ink3);padding:0 4px;white-space:nowrap}
  table.resp tr[data-id] td.when .full{display:none}
  table.resp tr[data-id] td.when .rel{display:inline}
  /* וואטסאפ וחיוג: תא הטלפון נפתח ושני הקישורים נעשים פריטים ברשת */
  table.resp tr[data-id] td:has(.phone-cell),table.resp tr[data-id] .phone-cell{display:contents}
  table.resp tr[data-id] .phone-cell .mono{display:none}
  table.resp tr[data-id] .phone-cell a{grid-row:1;align-self:center;width:34px;height:34px;border-radius:50%;
    background:var(--surface2);display:inline-flex;align-items:center;justify-content:center;
    font-size:14px;margin-inline-end:4px}
  table.resp tr[data-id] .phone-cell a:first-of-type{grid-column:4}
  table.resp tr[data-id] .phone-cell a:last-of-type{grid-column:5;margin-inline-end:8px}
  /* בחירה מרובה: תיבת הסימון על תא הסטטוס */
  body.selmode table.resp tr[data-id]{padding-inline-start:0}
  body.selmode table.resp tr[data-id] td.cb-col{display:flex;grid-column:1;grid-row:1;z-index:1;
    align-items:center;justify-content:flex-start;padding-inline-start:6px;position:static}
  /* כותרות הקבוצות: נמוכות, כמו במאנדיי */
  table.resp .lg-wrap{margin:6px 0 2px}
  table.resp .lg-b{padding:5px 10px;font-size:12.5px;gap:8px;min-height:36px}
  table.resp .lg-b .n{font-size:11px;padding:1px 8px}

  /* ── חיפוש וסינון: פס קבוע **בראש המסך** ──────────────────────────
     ⭐ בקשת דולב, 22/09/2026: "שהאזור של סינון התאריכים וכל מה שיש
     במובייל יופיע למעלה ולא למטה".
     ⛔ עד אז הפס היה מקובע לתחתית (Quick find). זה קיצר את הדרך
     לליד הראשון, אבל הפריד בין הסינון לבין מה שהוא מסנן: הבורר
     בתחתית והתוצאה שלו בראש המסך, והמגירה נפתחה כלפי מעלה מעל
     הרשימה. ⭐ בראש, הסינון יושב מעל התוצאה שלו וזה מה שקורה בכל
     מקום אחר במערכת. */
  /* ⛔⛔ **בלי זה ה-sticky לא עובד בכלל.** ל-`main` יש
     `overflow-y: auto`, ולכן הוא אזור הגלילה שה-sticky נצמד אליו —
     אבל במובייל מי שנגלל בפועל הוא העמוד כולו, ולכן הפס פשוט נגלל
     החוצה. ⭐ `clip` על הציר האופקי שומר על החיתוך לרוחב בלי ליצור
     אזור גלילה, בניגוד ל-`hidden` שכופה `auto` על הציר השני. */
  /* ⚠ `.main` ולא `main`: ב-ui.css יש `.main, .p-main{overflow-x:hidden}`,
     וסלקטור מחלקה גובר על סלקטור אלמנט. הגרסה הראשונה נכתבה כאלמנט,
     נראתה נכונה בקובץ, ופשוט לא נכנסה לתוקף. */
  .main{overflow-x:clip;overflow-y:visible}
  .filterbar{position:sticky;inset-inline:0;top:0;bottom:auto;z-index:45;height:auto;
    margin:0 0 8px;padding:8px 10px;background:var(--surface);border-bottom:1px solid var(--line);
    box-shadow:0 8px 24px -14px rgba(0,0,0,.30);display:flex;gap:6px;align-items:center;flex-wrap:nowrap}
  .filterbar .f-search{flex:1 1 auto;min-width:0;order:0;min-height:40px}
  .filterbar .f-toggle{order:1;flex:none;padding:0 10px;min-height:40px}
  .filterbar .f-count{display:none}
  .filterbar .viewtoggle{order:2;flex:none}
  .filterbar .viewtoggle button{padding:0 9px;min-height:40px;font-size:12px}
  /* ⭐ המגירה נפתחת **מתחת** לפס, לכיוון התוכן, ולא מעליו. */
  .f-more.open{position:absolute;inset-inline:0;top:calc(100% + 1px);display:flex;flex-wrap:wrap;gap:6px;
    padding:10px;background:var(--surface);border-bottom:1px solid var(--line);
    box-shadow:0 8px 24px -10px rgba(0,0,0,.30)}
  .f-more .dd-panel{bottom:auto;top:calc(100% + 6px)}
  /* ⛔ שני בוררי התאריך לוקחים שורה משלהם ואת כל הרוחב. */
  .f-more.open .f-dates{width:100%;gap:8px}
  .f-more.open .f-dates input[type="date"]{flex:1;min-width:0;min-height:40px}
  /* ⛔ הפס כבר לא בתחתית, ולכן הריפוד התחתון מיותר: הוא השאיר
     150 פיקסלים ריקים מתחת לליד האחרון. */
  .content:has(.filterbar){padding-bottom:24px}

  /* הכרטיס הרזה בנייד: כמעט מסך מלא, והלשוניות מנצלות אותו.
     ⛔ מעל הניווט התחתון (z-index 55): אחרת "הקודמת/הבאה" שבתחתית הכרטיס
     נחבאות מאחוריו, והכרטיס נראה קטוע. */
  #drawer.d-slim{max-height:92vh;z-index:60}
  body:has(#drawer.d-slim:not([hidden])) .drawer-backdrop{z-index:58}
  #drawer.d-slim .d-a{font-size:13px;padding:8px 4px}

  /* שדות כרטיס העסק: שתי עמודות ב-375 פיקסל דוחסות את התוויות לשתי
     שורות ומשאירות שדה ברוחב אצבע. אחת מספיקה. */
  .cf2{grid-template-columns:1fr}
  /* שלוש עמודות של שדות מספר לא נכנסות ברוחב טלפון — שתיים כן. */
  .cf3{grid-template-columns:1fr 1fr}

  /* שורות אנשי הקשר והפלטפורמות: חמש עמודות ברוחב 340 משאירות לכל שדה
     כ-40 פיקסל, ואי אפשר לקרוא בהן את מה שכתוב. שתי עמודות, והכפתורים
     יורדים לשורה משלהם. */
  .rowl,#plats .rowl{grid-template-columns:1fr 1fr}

  /* טבלאות שנשארות טבלאות — גלילה מבודדת ולא של הדף */
  .tbl-wrap,.table-wrap,.hq-tb,.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* אבל טבלה שהפכה לכרטיסים לא צריכה מעטפת גוללת: המעטפת נתנה לה רוחב
     של 820 פיקסלים ויצרה גלילה פנימית מיותרת. */
  .tablewrap:has(table.resp){overflow:visible}
  /* .tablewrap table{min-width:820px} הוא מה שהחזיק את הטבלה רחבה גם אחרי
     שהפכה לכרטיסים — הרוחב לא בא מהתוכן אלא מהכלל הזה. */
  .tablewrap table.resp{min-width:0}

  /* ── רצפת קריאוּת בטלפון ────────────────────────────────────────────
     שפת העיצוב משתמשת בכתב קטן למידע משני, וזה עובד על מסך גדול שיושב
     על שולחן. בטלפון 10.5 פיקסל בעברית פשוט לא נקרא — הניקוד והאותיות
     הדומות (ו/ן, ב/כ) מתמזגים. הרשימה נמדדה על כל מסכי הצוות ולא
     נוחשה: כל מחלקה כאן הופיעה בפועל מתחת ל-12.5 פיקסל.
     הגדלים עצמם לא משתנים במחשב. */
  .c-hint,.hq-hint,.hq-n,.hq-h,.c-sh,.chev,.n,.urg,.cc-conf,
  .tb-sech .n,.tb-sech .hint,small,
  .s-row small,.s-card small,td.n.slot,.tb-sech .chev{font-size:12.5px}
  .cc-owner,.s-meta,.s-he,.dim,.hq-go,.prio,.tag,.st,
  td.n,td.nm,th.n,.pill{font-size:13px}
  /* כותרת מקטע היא כותרת, וב-11 פיקסל היא נקראה כהערת שוליים */
  .c-sh{font-size:13px;font-weight:600}

  /* ── יעדי נגיעה ──────────────────────────────────────────────────────
     כפתורים בגובה 22 עד 26 פיקסל נבנו לעכבר.

     שם העסק או המשימה הוא הפעולה העיקרית בכרטיס ומקבל 44 — התקן של
     אפל. ערך בתוך שורה (תקציב, סטטוס) הוא משני ומקבל 40. הכרטיס אכן
     מתארך, וזה המחיר הנכון: כרטיס קצר שאי אפשר לפגוע בו הוא לא חיסכון. */
  /* ⛔⛔ **כל מה שלוחצים עליו הוא לפחות 44 פיקסל.** דולב, 17/09/2026:
     "שלוחצים ורוצים למזער חזרה זה קשה בטירוף".
     נמדד בפועל על המסך שלו: כפתור הסגירה של כרטיס ליד היה **15 על 22
     פיקסל**, וחיצי המעבר בין רשומות 31 על 31. אלה לא כפתורים קטנים,
     אלה כפתורים שאי אפשר לפגוע בהם באצבע.
     ⭐ כלל אחד לשני הממשקים, לפי הכלל בראש הקובץ. */
  .d-x,.dw-nb,.tp-x,.m-cancel,.d-tagx,.bb-close,.ch-more,
  .f-toggle,.d-a,.d-st,.mini,.chip,.dd-btn,.ps-fold,
  .p-cat,.ld-a,.p-tabs button,.cviews .cv{
    min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  /* ⭐ האייקון נשאר בגודלו; רק שטח המגע גדל. */
  .d-x,.dw-nb,.tp-x,.d-tagx,.bb-close{min-width:44px;font-size:17px}
  /* ⛔ אלה מלבנים ולא ריבועים, ולכן רק הגובה נכפה עליהם. */
  .p-cat,.ld-a,.d-a{justify-content:flex-start}
  .p-cat{align-items:center}
  /* ⭐ הסבב השני, אחרי מדידה חוזרת על המסך: קישורי טקסט וכפתורי
     משנה שנשארו מתחת ל-44. */
  .link,.btn,.hm-off,.d-tagadd,.t-more,.bb-act,.bb-link{
    min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .link,.btn{min-width:44px}

  .mini,.pill{min-height:40px;padding-inline:14px}
  .link-name,.tk-title a{min-height:44px;display:inline-flex;align-items:center;text-align:start}
  .link-cell,.tb-group a,.ac-name a{min-height:40px;display:inline-flex;align-items:center}

  .two{flex-direction:column}
  .dec{flex-direction:column;gap:10px}
  .dec-i{flex-wrap:wrap}
  .dec-w{margin-inline-start:0}

  .mnav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;inset:auto 0 0 0;z-index:55;
    background:var(--bg2);border-top:1px solid var(--line2);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .mnav button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;min-height:52px;
    color:var(--ink3);font-size:11px;border-radius:12px;position:relative}
  .mnav button i{font-style:normal;font-size:19px;line-height:1}
  .mnav button.on{color:var(--accent);background:var(--accent-soft)}
  .mnav button .n-open{position:absolute;top:2px;inset-inline-end:14px;background:var(--lost);color:#fff;
    font-family:var(--font-num);font-size:10px;padding:0 5px;border-radius:99px;min-width:16px;text-align:center}

  /* הודעת מערכת בראש המסך, בלי להסתיר את הניווט */
  .toast{top:12px;bottom:auto;inset-inline:12px;width:auto}
}

/* מסך צר במיוחד: עמודה אחת */
@media (max-width:359px){
  .kpis,.c-kpis{grid-template-columns:1fr}
}

/* פרק 32: כיבוד העדפת מערכת להפחתת תנועה */
@media (prefers-reduced-motion:reduce){
  .drawer,.side{animation:none;transition:none}
}

/* ── פרק 42: המובייל עושה מה שהמחשב עושה (דולב, 10/09/2026) ──────────
 *
 * מה שנבדק עד היום היה "האם המסך נשבר". מה שנבדק עכשיו הוא "האם אפשר
 * להגיע לפעולה וללחוץ עליה". אלה שתי שאלות שונות, וזו השנייה.
 */
@media (max-width:760px){

  /* חמישה יעדים בסרגל התחתון (בחירת דולב): סקירה · עסקים · משימות ·
     לקוחות · עוד. ב-375 פיקסלים כל אחד 75px, ולכן הכיתוב מתקצר קצת
     והאייקון נשאר קריא. */
  .mnav{grid-template-columns:repeat(5,1fr)}
  .mnav button{font-size:10px;padding:6px 1px;gap:1px}
  .mnav button i{font-size:18px}
  .mnav button .n-open{inset-inline-end:8px;font-size:9px;padding:0 4px;min-width:14px}

  /* שורת הפעולות של מסך העסק נשברת לשתי שורות. עד היום היא נחתכה,
     ואיתה "+ ליד", "הנפק דוח", "+ עמודה" ו"מחיקה". */
  .ch-top{flex-wrap:wrap;gap:10px}
  .ch-actions{display:flex;flex-wrap:wrap;gap:7px;width:100%;overflow:visible}
  .ch-actions .btn{flex:0 1 auto;font-size:12.5px;padding:8px 12px}
  /* מקופל: "+ ליד" ו-"⋯" בלבד — שורה אחת במקום שלוש. פתוח: הכל, במקום.
     display:none ולא הסתרה חזותית, כדי שגם מקלדת וקורא מסך ידלגו.

     ⚠ בלי :not(#btnMoreActs) בכלל ההסתרה: :not() עם מזהה תורם ספציפיות
     של מזהה, והכלל היה מנצח את כלל הפתיחה ומשאיר את השורה מקופלת לנצח.
     המזהה מטופל בשורה נפרדת, שם הוא אמור להיות. */
  .ch-actions > .btn:not(.primary){display:none}
  #btnMoreActs{display:inline-flex}
  /* ⭐ "⋯" = תפריט מתחת לכפתור (דולב, 17/09/2026). לא פורש בתוך הכותרת. */
  .ch-actions{position:relative}
  .ch-menu{position:absolute;top:calc(100% + 6px);inset-inline-start:0;z-index:35;min-width:240px;
    background:var(--surface);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--sh2);
    padding:6px;display:grid;gap:2px}
  .ch-menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 12px;
    border:0;border-radius:10px;background:none;font:inherit;font-size:14.5px;color:var(--ink);
    text-align:start;cursor:pointer}
  .ch-menu button:hover,.ch-menu button:focus-visible{background:var(--surface2);outline:none}
  .ch-menu button.danger{color:var(--lost)}

  /* ⭐ כפתור סגירה גדול לסרגל כשהוא פתוח כגיליון (דולב, 17/09/2026) */
  .side-x{display:flex;position:sticky;top:0;z-index:2;width:100%;min-height:44px;align-items:center;
    justify-content:center;gap:8px;background:var(--surface);border:0;border-bottom:1px solid var(--line);
    margin-bottom:8px;font:inherit;font-size:15px;font-weight:700;color:var(--ink2);cursor:pointer}

  /* הלשוניות נגללות אופקית — "אנשים" הייתה מחוץ למסך */
  .cviews{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding-bottom:2px;scroll-snap-type:x proximity}
  .cviews::-webkit-scrollbar{display:none}
  /* ⭐ **הקצה מתפוגג.** הגלילה האופקית עבדה, אבל בלי שום סימן: אורי
     ראה לשונית חתוכה באמצע מילה ("סקירו") והבין שמשהו שבור. עכשיו
     הקצה דוהה, וזה קורא כ"יש עוד לצד". */
  /* ⭐ **אותו כלל לשני הממשקים.** דרישת דולב, 17/09/2026: "הכל מקשה
     אחת". `.cviews` הוא הסרגל שלנו ו-`.p-tabs` של הפורטל; אותה בעיה,
     ולכן אותה שורה ולא שתי גרסאות שיתפצלו בחודש הבא. */
  .cviews,.p-tabs{-webkit-mask-image:linear-gradient(to left,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
    mask-image:linear-gradient(to left,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
    padding-inline:2px}
  .p-tabs{overflow-x:auto;scrollbar-width:none}
  .p-tabs::-webkit-scrollbar{display:none}
  .p-tabs button{flex:none;white-space:nowrap}
  .cviews .cv{flex:none;white-space:nowrap;scroll-snap-align:start}

  /* מסך העסקים */
  .cl-search{position:sticky;top:0;z-index:3;padding:2px 0 10px;background:var(--bg)}
  .cl-search input{width:100%;font:inherit;font-size:16px;color:var(--ink);
    background:var(--surface);border:1px solid var(--line2);border-radius:12px;
    padding:12px 14px;outline:none}
  .cl-search input:focus{border-color:var(--accent);
    box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent)}
  .cl-sec{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--ink3);
    margin:14px 0 7px;display:flex;gap:7px;align-items:baseline}
  .cl-sec span{font-family:var(--font-num);font-size:10.5px}
  .cl-list{display:flex;flex-direction:column;gap:8px;padding-bottom:8px}
  .cl-card{display:flex;align-items:center;gap:10px;width:100%;text-align:start;
    background:var(--surface);border:1px solid var(--line);border-radius:12px;
    padding:14px 14px;min-height:58px;font:inherit;color:var(--ink);cursor:pointer}
  .cl-card:active{border-color:var(--accent);background:var(--accent-t1)}
  .cl-card .cdot{width:10px;height:10px;border-radius:50%;flex:none}
  .cl-n{flex:1;font-size:15px;font-weight:500;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  .cl-b{display:flex;gap:5px;align-items:center;flex:none}
  .cl-go{flex:none;color:var(--ink3);font-size:17px;line-height:1}
}


/* פרק 43 — מצב סימון בטלפון.
 *
 * הכרטיס לא מקבל שורה נוספת לתיבת הסימון: התיבה יושבת בפינה ההתחלתית של
 * הכרטיס והכרטיס מתרחב לצידה. שורה נוספת הייתה מזיזה את כל הכרטיסים
 * למטה ברגע שנכנסים למצב, וזה קופץ מול העיניים.
 */
@media (max-width:760px){

  /* לחיצה ארוכה שמסמנת חייבת לא לסמן טקסט תוך כדי */
  table.resp tr[data-id]{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

  /* רק שורות אמיתיות מתרחבות. כותרת קבוצה אינה שורה שמסמנים, ובלי החריגה
     היא הייתה נדחפת פנימה ויוצאת מיישור מול הכרטיסים שמתחתיה. */
  body.selmode table.resp tr[data-id]{position:relative;padding-inline-start:46px}
  body.selmode table.resp td.cb-col,
  body.selmode table.tasks-table.resp td.tk-sel{
    display:block;position:absolute;inset-block-start:13px;inset-inline-start:12px;
    padding:0;margin:0;border:0;width:auto;max-width:none}
  body.selmode table.resp td.cb-col::before,
  body.selmode table.tasks-table.resp td.tk-sel::before{display:none}
  body.selmode table.resp td.cb-col input,
  body.selmode table.tasks-table.resp td.tk-sel input{
    width:22px;height:22px;accent-color:var(--accent)}

  body.selmode table.resp tr.sel{border-color:var(--accent);
    background:color-mix(in srgb,var(--accent) 9%,var(--surface))}

  /* כפתור "בחר" — דרך שנייה להיכנס, למי שלא מכיר את הלחיצה הארוכה */
  .selbtn.on{background:var(--accent);color:#fff;border-color:transparent}

  /* סרגלי הפעולה עולים מעל הניווט התחתון ולא מתחתיו */
  .bulkbar{inset:auto 8px calc(70px + env(safe-area-inset-bottom)) 8px;
    right:8px;transform:none;max-width:none;border-radius:14px;padding:8px 10px}
  .bulkbar .bb-act{padding:8px 10px;font-size:12.5px}
  .bulkbar .bb-sep{display:none}

  .tb-bulk{position:fixed;inset:auto 8px calc(70px + env(safe-area-inset-bottom)) 8px;
    z-index:70;display:flex;align-items:center;gap:8px;background:var(--surface3);
    border:1px solid var(--line2);border-radius:14px;padding:8px 10px;box-shadow:var(--sh3)}
  .tb-bulk .sel{flex:1;min-width:0}

  /* הכרטיס האחרון לא מסתתר מאחורי הסרגל */
  body.selmode .main{padding-bottom:150px}
}

/* ── מתחת לשעון של הטלפון ─────────────────────────────────────────────
 * index.html מוגדר viewport-fit=cover, ולכן הדף מתחיל **מתחת** לשעון,
 * לסוללה ולאזור המחוות. זה מכוון — כך הרקע ממלא את המסך — אבל אז חובה
 * להרחיק את התוכן בעצמנו. בלי זה שורת הכפתורים העליונה של כרטיס העסק
 * יושבת בדיוק על השעון.                                              */
@supports (padding: env(safe-area-inset-top)) {
  @media (max-width:760px){
    .main{padding-top:env(safe-area-inset-top)}
    .side{padding-top:calc(14px + env(safe-area-inset-top))}
    #pvBar,#newVer{padding-top:calc(9px + env(safe-area-inset-top))}
  }
}

@media (max-width:760px){
  /* ── כרטיסי המדדים של השוואת קמפיינים ──────────────────────────────
   * שלוש עמודות על 390 פיקסל נותנות 110 לכל אחת. "עלות לרלוונטי" לא
   * נכנס, וההסבר מתחת ל"סווגו" נדרס על המספר. שתיים, וזה נקרא.       */
  .cmp-kpis{grid-template-columns:1fr 1fr}

  /* ── אבחון והמלצות ─────────────────────────────────────────────────
   * היה auto 180px 1fr: 180 קבועים לשם הקמפיין, ומה שנשאר לסיכום הוא
   * רצועה של 30 פיקסל שהטקסט גולש ממנה החוצה. שם בשורה, סיכום בשורה,
   * פרטים בשורה — ואף אחד לא נמעך.                                    */
  .diag-row{grid-template-columns:auto 1fr;gap:6px 10px}
  .dg-scope{white-space:normal;overflow:visible;text-overflow:clip}
  .dg-sum{grid-column:1/-1}

  /* ── עסקים פעילים (מסך המשימות) ────────────────────────────────────
   * שם, קמפיינים, ושני כפתורים. במקום ארבע עמודות — שם, קמפיינים,
   * והכפתורים יחד בשורה אחת מתחת.                                     */
  .ac-row{grid-template-columns:1fr auto;gap:8px}
  .ac-name,.ac-camps{grid-column:1/-1}

  /* ── תנאי על שדה (חיפוש מתקדם) ─────────────────────────────────────
   * שדה, פעולה, ערך, מחיקה. השדה לוקח שורה שלמה כי שמות השדות ארוכים;
   * הפעולה והערך יורדים לשורה שנייה עם כפתור המחיקה בקצה.             */
  .cf-row{grid-template-columns:1fr 1fr auto;gap:8px}
  .cf-row > select:first-child{grid-column:1/-1}

  /* ── משפך ──────────────────────────────────────────────────────────
   * 110 פיקסל לשם השלב חנקו את הפס עצמו. השם עולה לשורה נפרדת, והפס
   * מקבל את כל הרוחב — הוא מה שאמור להיקרא במבט.                      */
  .fnl-r{grid-template-columns:1fr 54px 44px;gap:4px 8px}
  .fnl-t{grid-column:1/-1}

  /* ── בונה הטפסים ───────────────────────────────────────────────────
   * שש עמודות בטלפון זה שש רצועות. שאלה בשורה, סוג ואפשרויות בשורה,
   * "חובה" והמחיקה בשורה.                                             */
  .iff{grid-template-columns:16px 1fr auto;gap:8px}
  .iff > input:not([type=checkbox]),.iff > select{grid-column:2/-1}
  .iff-r{grid-column:2;justify-self:start}
  .iff > .btn{grid-column:3}

  /* ── יומן ──────────────────────────────────────────────────────────
   * min-width:520px הכריח גלילה לצדדים על כל מסך טלפון. שבע עמודות על
   * 390 הן 50 פיקסל ליום — צר, אבל נקרא בלי לגרור.                    */
  .c-cal-main{min-width:0}
  .c-cal{position:fixed;inset:auto 8px 84px 8px;flex-direction:column;max-height:70vh;overflow:auto}

  /* ── רשת ההשוואה ───────────────────────────────────────────────────
   * minmax(300px,1fr) גולש כשהמיכל צר מ-300. minmax(0,1fr) לא.        */
  .cmp-grid{grid-template-columns:minmax(0,1fr)}

  /* כותרת דביקה בטבלת החיפוש נדבקה ל-56 פיקסל — הגובה של הכותרת
     בדסקטופ, שלא קיימת כאן. */
  table.sr th{top:0}

  /* ── יעדי מגע שנשארו קטנים ──────────────────────────────────────────
   * הכלל הקיים כיסה .btn/.chip/.pill/.cv. תשע הקבוצות האלה לא נושאות
   * אף אחת מהן, ונמדדו בין 21 ל-33 פיקסל. נמדד על המסך בכל 12
   * הלשוניות, לא נאמד מהקוד.                                          */
  .ftabs button,.stabs button,.cal-vw button,.viewtoggle button,.pager button,
  .srch-tris .tri{min-height:44px;padding-inline:14px;display:inline-flex;
    align-items:center;justify-content:center}

  /* צ'יפים של סינון: 40 ולא 44, כדי שהשורה הנגללת לא תהפוך לרצועה
     שתופסת חצי מסך. עדיין רחוק מ-21 שהיו כאן.                        */
  .sg-quick button,.sg-h .sg-x,.pu .pu-x,.co-act button{min-height:40px;
    padding-inline:12px;display:inline-flex;align-items:center}

  /* אייקון בלי טקסט הוא המקרה הגרוע: 19×22 פיקסל לוואטסאפ ולחיוג.
     ריבוע של 44 בלי לשנות את גודל האייקון עצמו.                      */
  .phone-cell a{min-width:44px;min-height:44px;display:inline-flex;
    align-items:center;justify-content:center}
}

@media (max-width:760px){
  /* ── המסננים מתקפלים מאחורי כפתור אחד ─────────────────────────────
     ⛔ בסרטון של אורי (17/09/2026) שורת הסינון תפסה ארבע שורות לפני
     הליד הראשון: חיפוש, ואז ארבעה צ'יפים, ואז עוד שניים, ואז
     טבלה/קנבן. במסך שלם נראה ליד אחד ועוד חצי.
     ⭐ המונה על הכפתור אומר כמה מסננים פעילים, כדי שסינון פעיל לא
     ייעלם מהעין רק בגלל שהמגירה סגורה. */
  .f-toggle{display:inline-flex;align-items:center;gap:6px;order:-1}
  .f-more{display:none;width:100%;flex-wrap:wrap;gap:6px}
  .f-more.open{display:flex}
  .filterbar .f-spacer{display:none}
}

/* ── פרק 48 — בורד המשימות בטלפון: כרטיס, לא הגריד של הלידים ─────────
 * ⛔ 22/09/2026: הגריד "כמו מאנדיי" (פרק 44) חל על כל table.resp, ולכן
 * כותרת המשימה נדחסה לעמודת הצבע של 78 פיקסל ונשברה למילה בשורה.
 * כל בורד מקבל מבנה טלפון משלו; כלל של בורד אחד לא זולג לאחר.       */
@media (max-width:760px){
  table.tasks-table.resp tr[data-id]{display:block;grid-template-columns:none;padding:10px 14px;min-height:0}
  table.tasks-table.resp tr[data-id] td{display:none}
  table.tasks-table.resp tr[data-id] td.tk-title{display:block;width:100%;font-size:16px;color:var(--ink);padding:0;margin:0;border:0}
  table.tasks-table.resp tr[data-id] td.tk-title .link-name{display:block;width:100%;text-align:start;white-space:normal;
    font-size:16px;line-height:1.35;font:inherit;font-weight:500}
  table.tasks-table.resp tr[data-id] .tk-sub{display:block;font-size:12.5px;color:var(--ink3);margin-top:4px;line-height:1.5}
  table.tasks-table.resp tr[data-id] td.tk-st,
  table.tasks-table.resp tr[data-id] td.tk-when,
  table.tasks-table.resp tr[data-id] td.tk-prio{display:inline-flex;align-items:center;font-size:12.5px;color:var(--ink2);margin:6px 0 0;margin-inline-end:10px}
  body.selmode table.tasks-table.resp tr[data-id]{position:relative;padding-inline-start:46px}
  body.selmode table.tasks-table.resp tr[data-id] td.tk-sel{display:block;position:absolute;inset-block-start:13px;inset-inline-start:12px;width:auto;padding:0;margin:0}

  /* ── יציאה ממצב סימון: שבב קבוע למעלה, בכל מסך ── */
  .sel-exit{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);inset-inline-start:50%;transform:translateX(50%);
    z-index:80;font:inherit;font-size:14px;font-weight:700;padding:10px 16px;min-height:44px;border-radius:99px;border:0;
    background:var(--accent);color:var(--on-accent);box-shadow:var(--sh3)}

  /* ── אפליקציית מסך הבית באייפון ──
   * text-size-adjust: ספארי לא מגדיל טקסט לבד בסיבוב מסך.
   * overscroll: הדף לא "נמתח" עם רקע לבן מאחורי הניווט הקבוע.
   * touch-action: בלי השהיית 300 מ"ש ובלי זום כפול על כפתורים.            */
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior-y:none}
  button,a,[role="button"],.mnav *,.hq-a,.cl-row,tr[data-id]{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
}