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

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

/* ── סרגל צד: כותרת ואזור העסקים ─────────────────────────────────────── */
.brand-ws{font-size:11px;letter-spacing:.16em;color:var(--ink3);text-transform:uppercase;margin-top:-2px}
.side-x{display:none}
.side-sec{font-size:11px;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}
  /* כל חלון הוא גיליון מקצה לקצה. חלונות עם רוחב משלהם (.modal:has(.mt-panel) ב-ui.css
     = 96vw) גברו על השורה שמעל והשאירו גיליון דבוק לימין (02/10/2026). */
  #modal.modal{width:100%;max-width:none}
  .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:13px;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:13px;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:13px;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:13px;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:var(--fg,#fff) !important;font-size:11px !important;font-weight:700;
    padding:0 4px !important;text-align:center;text-align-last:center;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:13px;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): אחרת "הקודמת/הבאה" שבתחתית הכרטיס
     נחבאות מאחוריו, והכרטיס נראה קטוע. */
  /* כרטיס הליד הוא גיליון מלמטה, מקצה לקצה. width:min(520px,96vw) מ-ui.css גבר עליו
     והשאיר אותו דבוק לימין עם 16 פיקסלים ריקים משמאל (02/10/2026) */
  #drawer.d-slim{max-height:92vh;z-index:60;width:100%}
  body:has(#drawer.d-slim:not([hidden])) .drawer-backdrop{z-index:58}
  #drawer.d-slim .d-a{font-size:13px;padding:8px 4px}
  /* 02/10/2026: רצועת המידע מתחת לכותרת, הסטטוס בשורה משלו ברוחב מלא;
     הכתיבה ללקוח/ה והסיכום עם יעדי מגע של 44 ושדה 16px (בלי זום באייפון) */
  #drawer.d-slim .d-strip{gap:8px 14px;padding:10px 0 8px}
  #drawer.d-slim .d-strip .d-st{flex-basis:100%;justify-content:space-between;min-height:44px;font-size:15px}
  #drawer.d-slim .d-si{font-size:15px}
  #drawer.d-slim .d-mi .pill{min-height:40px;font-size:15px}
  .ch-cbox textarea{font-size:16px !important}
  .ch-note button,.d-sum-rf,.d-sum-x,.d-link{min-height:44px}
  .d-sum-x{min-width:44px}

  /* שדות כרטיס העסק: שתי עמודות ב-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:13px}
  .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{
    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-ink);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:11px;padding:0 5px;border-radius:99px;min-width:16px;text-align:center}

  /* הודעת מערכת בראש המסך, בלי להסתיר את הניווט */
  .toast{top:auto;bottom:calc(64px + env(safe-area-inset-bottom,0px));inset-inline:12px;width:auto;transform:none}   /* ⭐ 12/10/2026: מלמטה, ליד האגודל. למעלה ההודעה נפלה מתחת לשעון ולמצלמה */   /* translateX(50%) של המחשב דחף את ההודעה מחוץ למסך (01/10/2026) */
}

/* מסך צר במיוחד: עמודה אחת */
@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:11px;padding:6px 1px;gap:1px}
  .mnav button i{font-size:18px}
  .mnav button .n-open{inset-inline-end:8px;font-size:11px;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:13px;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:15px;color:var(--ink);
    text-align:start;cursor:pointer}
  .ch-menu button:hover,.ch-menu button:focus-visible{background:var(--surface2)}
  .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}

  /* הלשוניות נגללות אופקית — "אנשים" הייתה מחוץ למסך */
  /* ⭐ **הקצה מתפוגג.** הגלילה האופקית עבדה, אבל בלי שום סימן: אורי
     ראה לשונית חתוכה באמצע מילה ("סקירו") והבין שמשהו שבור. עכשיו
     הקצה דוהה, וזה קורא כ"יש עוד לצד". */
  /* ⭐ **אותו כלל לשני הממשקים.** דרישת דולב, 17/09/2026: "הכל מקשה
     ולכן אותה שורה ולא שתי גרסאות שיתפצלו בחודש הבא. */
  .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}

  /* מסך העסקים */
  .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:11px}
  .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:13px}
  .bulkbar .bb-sep{display:none}
  /* ⛔ 02/10/2026: הסרגל גלל הצידה, ו"מחיקה" (האחרון) ישב מחוץ למסך ב-x=-161.
     איש לא ידע שאפשר לגלול, ולכן "אי אפשר למחוק ליד" בטלפון. עכשיו הכפתורים
     נשברים לשורה שנייה וכולם על המסך. */
  .bulkbar{flex-wrap:wrap;justify-content:center;overflow-x:visible;row-gap:4px}

  .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:13px;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,
  table.tasks-table.resp tr[data-id] td.tk-custom{display:inline-flex;align-items:center;font-size:13px;color:var(--ink2);margin:6px 0 0;margin-inline-end:10px}
  table.tasks-table.resp tr[data-id] td.tk-custom::before{content:attr(data-label) ':';font-size:12px;color:var(--ink3);margin-inline-end:4px}
  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}
}

/* ── ⭐ הלידים בטלפון ככרטיסים, כמו המשימות (דולב אישר 27/09/2026) ──
 * "ממש אהבתי במובייל את איך שנראה האזור של המשימות, הייתי רוצה שבמובייל
 * בלבד זה יהיה ככה גם בבורדים". מחליף את השורה בצפיפות של מאנדיי מ-17/09:
 * כרטיס לכל ליד — שם גדול, מקור, סטטוס גדול וצבעוני שלוחצים עליו,
 * וואטסאפ וחיוג. אותו DOM של הטבלה, רק מיקום אחר בתוך רשת. במחשב לא חל. */
@media (max-width:760px){
  table.resp:not(.tasks-table){background:transparent;border:0;border-radius:0;overflow:visible}
  table.resp:not(.tasks-table) tr[data-id]{position:relative;display:grid;
    grid-template-columns:minmax(0,1fr) 40px 40px;grid-template-rows:auto auto auto;
    column-gap:8px;row-gap:4px;align-items:center;min-height:0;
    margin:0 0 10px;padding:12px 14px;background:var(--surface);
    border:1px solid var(--line);border-radius:16px}
  table.resp:not(.tasks-table) tbody:first-of-type tr[data-id]:first-child{border-top:1px solid var(--line)}
  table.resp:not(.tasks-table) tr[data-id] td.lead-nm{grid-column:1;grid-row:1;padding:0;
    font-size:17px;font-weight:800;display:block}
  table.resp:not(.tasks-table) tr[data-id] td.lead-nm .lead-board{display:block;font-size:13px;
    font-weight:500;color:var(--ink3);margin-top:1px}
  table.resp:not(.tasks-table) tr[data-id] td.when{grid-column:2 / 4;grid-row:1;align-self:start;justify-self:end;
    font-size:13px;color:var(--ink2);background:var(--surface2);border-radius:999px;padding:2px 9px}
  table.resp:not(.tasks-table) tr[data-id] td.src{display:block;grid-column:1 / -1;grid-row:2;
    font-size:13px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  table.resp:not(.tasks-table) tr[data-id] td.st-col{grid-column:1;grid-row:3;background:transparent;
    align-items:center;margin-top:4px}
  table.resp:not(.tasks-table) tr[data-id] .status-native{min-height:40px;height:40px;
    border-radius:999px !important;background:var(--g,var(--surface2)) !important;
    color:var(--fg,#fff) !important;text-shadow:none;
    font-size:16px !important;font-weight:800;text-align:start;text-align-last:start;
    padding:0 16px !important}
  table.resp:not(.tasks-table) tr[data-id] .phone-cell a{grid-row:3;width:40px;height:40px;
    margin:4px 0 0;font-size:16px}
  table.resp:not(.tasks-table) tr[data-id] .phone-cell a:first-of-type{grid-column:2}
  table.resp:not(.tasks-table) tr[data-id] .phone-cell a:last-of-type{grid-column:3;margin-inline-end:0}
  table.resp:not(.tasks-table) .lead-rename{min-height:44px;display:flex;align-items:center}
  /* בחירה מרובה: תיבת הסימון בפינת הכרטיס */
  body.selmode table.resp:not(.tasks-table) tr[data-id] td.cb-col{position:absolute;top:10px;
    inset-inline-end:10px;display:flex;z-index:1;padding:0}
  body.selmode table.resp:not(.tasks-table) tr[data-id] td.when{visibility:hidden}
  /* כותרות הקבוצות: כמו במשימות, פס צבעוני עם מונה */
  table.resp .lg-wrap{margin:8px 0 8px}
  table.resp .lg-b{padding:8px 12px;font-size:15px;min-height:40px;border-radius:12px}

  /* (סרגל האייקונים של הלשוניות בטלפון נמחק עם שורת הלשוניות, 09/10/2026) */
}

@media (max-width:1099px){
  .hm-off,.kcard-name{min-height:44px}
}

/* QA 09/10/2026: חלון פתוח (למשל סכום עסקה לכמה לידים) מעל סרגל הפעולות המרובות, לא מתחתיו */
body:has(#modal:not([hidden])) #bulkbar { display: none; }

/* ── עבודה רציפה בטלפון (דולב אישר 11/10/2026, הצעה 5) ──────────────────
 * סרגל ארבעה כפתורים גדולים בתחתית הכרטיס, בהישג האגודל: וואטסאפ, חיוג,
 * "אין מענה", פגישה. וואטסאפ/חיוג/פגישה יורדים מהשורה העליונה (שם נשארים
 * "עדכון" ו"סיכום שיחה"), כדי שלא יופיעו פעמיים. ⛔ 44px לפחות, בלי גלילה לרוחב. */
@media (max-width:760px){
  #drawer.d-v3 .d-foot{display:grid;gap:6px;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));justify-content:stretch}
  #drawer.d-v3 .dw-thumb{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column;gap:6px;min-width:0}
  #drawer.d-v3 .dw-t{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;min-width:0;
    border:0;border-radius:14px;font:inherit;font-size:13px;font-weight:800;text-decoration:none;cursor:pointer;color:#fff;
    -webkit-tap-highlight-color:transparent;transition:transform .12s ease,filter .12s ease}
  #drawer.d-v3 .dw-t svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor}
  #drawer.d-v3 .dw-t span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  #drawer.d-v3 .dw-t.wa{background:var(--v3-wa)}
  #drawer.d-v3 .dw-t.call{background:var(--v3-call)}
  #drawer.d-v3 .dw-t.na{background:#6A7580}
  #drawer.d-v3 .dw-t.meet{background:#7C3AED}
  #drawer.d-v3 .dw-t:active:not(:disabled){transform:scale(.96);filter:brightness(.92)}
  #drawer.d-v3 .dw-t:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
  #drawer.d-v3 .dw-t:disabled{opacity:.45;cursor:default}
  #drawer.d-v3 .d-foot .dw-nav{margin:0;justify-content:center}
  #drawer.d-v3 .d-foot .dw-nb{min-height:36px;font-size:13px}
  #drawer.d-v3:has(.dw-thumb) .v3-acts .d-a.wa,
  #drawer.d-v3:has(.dw-thumb) .v3-acts .d-a.call,
  #drawer.d-v3:has(.dw-thumb) .v3-acts .d-a.meet{display:none}
  /* (html לפני: ui2.css נטען אחרי הקובץ הזה ומגדיר את פריסת המחשב)
     גרסה ג בטלפון: הפס הכהה הופך לראש (עיגול, שם, טלפון, סטטוס ברוחב מלא),
     התוכן בטור אחד, ומטפל/נכנס/העברה/מחיקה בשורה אחת קטנה מתחת לסטטוס */
  html #drawer.d-slim.d-v4{display:flex;flex-direction:column;width:100%}
  html #drawer.d-v4 .v4-side{flex:none;padding:12px 12px 10px;gap:8px;overflow:visible;max-height:none}
  html #drawer.d-v4 .v4-who{display:flex;align-items:center;gap:10px}
  html #drawer.d-v4 .v4-av{width:42px;height:42px;font-size:17px;border-radius:13px;flex:none}
  html #drawer.d-v4 .v4-side .v3-name{font-size:18px}
  html #drawer.d-v4 .v4-st{min-height:44px;font-size:15px}
  html #drawer.d-v4 .v4-side .v3-acts{grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column}
  html #drawer.d-v4 .v4-side .v3-acts .d-a{flex-direction:row;justify-content:center;min-height:44px;padding:8px 10px}
  html #drawer.d-v4 .v4-meta{margin-top:0;border-top:0;padding-top:0;display:flex;flex-wrap:wrap;gap:4px 12px}
  html #drawer.d-v4 .v4-tools{gap:6px}
  html #drawer.d-v4 .v4-tool{min-height:44px;flex:1 1 0;white-space:nowrap}
  html #drawer.d-v4 .v4-side .d-menu{max-height:46vh}
  html #drawer.d-v4 .v4-main{flex:1;min-height:0}
  html #drawer.d-v4 .v4-crumbs{padding:8px 12px}
  html #drawer.d-v4 .v4-crumbs .d-x{min-width:44px;min-height:44px}
  /* ⭐ 18/10/2026 (דולב): סגירה בהישג יד. ✕ בראש הכרטיס, "✕ סגירה" ליד הקודמת/הבאה, וגרירה למטה (table.js) */
  html #drawer.d-v4 .v4-x{display:inline-grid;place-items:center;margin-inline-start:auto;flex:none;width:44px;height:44px;border-radius:50%;
    border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.12);color:var(--v4-side-ink,#fff);font:inherit;font-size:18px;cursor:pointer}
  html #drawer.d-v4 .v4-side{touch-action:pan-x}
  #drawer.d-v3 .d-foot .dw-close,#drawer .tk-foot .dw-close{display:inline-flex}
  #drawer .tk-head{touch-action:pan-x}
  html #drawer.d-v4 .v4-grid{grid-template-columns:1fr;padding:10px 12px 4px}
  html #drawer.d-v4 .v4-steps{padding:10px 12px 0}
  html #drawer.d-v4 .v4-steps span{font-size:11px;padding:7px 12px}
  html #drawer.d-v4 .d-tabs{margin:10px 12px 0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  html #drawer.d-v4 .d-tabs button{min-height:40px}
  /* הכרטיס הבא נכנס מהצד שאליו גררו */
  #drawer.d-v3 .d-body.dw-in-next{animation:dwInNext .2s ease-out}
  #drawer.d-v3 .d-body.dw-in-prev{animation:dwInPrev .2s ease-out}
}
@keyframes dwInNext{from{transform:translateX(-28px);opacity:.4}to{transform:none;opacity:1}}
@keyframes dwInPrev{from{transform:translateX(28px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){#drawer.d-v3 .d-body.dw-in-next,#drawer.d-v3 .d-body.dw-in-prev{animation:none}}


/* ⭐ 12/10/2026 (תוכנית העיצוב, שלב 1): 44 פיקסלים לכל מה שלוחצים עליו במסך מגע (UI UX Pro Max,
   touch-target-size). עד היום רק .btn ודומיו; .mini, הלשוניות, אייקוני הכותרת וכלי כרטיס הליד היו 26 עד 36. */
@media (pointer:coarse){
  .mini, .u2-tabs button, .u2h .u-ic, .u2h .u-plus, .chipb, .lw-mini, .v4-tool, .bs-ib, .ldd-ic, .csx-b,
  .ca-sm, .cn-sm, .hq-btn, .u2-ld-a, .phone-cell a, .phone-cell button, button.icon, .ic-btn{min-height:44px;min-width:44px}
  .u2h .u-plus{width:44px;height:44px}
  /* 13/10/2026 (השער, "המסכים בשמונה רוחבים"): בטאבלט (761 עד 900) הבורד עוד טבלה, ושורת הכלים
     שלו (+ ליד, עוד, הגדרות הבורד, המסננים) נשארה 33 עד 37. מתחת ל-761 הכלל הכללי למעלה כבר מכסה. */
  .chip, .dd-btn, #filterbar .bd-gear, #btnAddLead, #btnMoreActs{min-height:44px}
  /* 23/10/2026 (בדיקת המסכים, 768): בטאבלט הכלל של הטלפון (.btn ו-select, למעלה ב-max-width:760) לא חל,
     וכפתורי "שמירה", "+ עסק חדש", "החלפה", "שינוי", "חיבור מלא", הבחירות בהגדרות ולשוניות הבוט נשארו 32 עד 38. */
  .btn, select, .bot-chip{min-height:44px}
}
/* 13/10/2026: הריבוע של 44 לוואטסאפ ולחיוג בתוך שורת טבלה (טאבלט) הגביה כל שורה בבורד ל-63
   פיקסל, והטבלה נראתה דחוסה (שורה אחת של טקסט בתוך שורה גבוהה). שטח המגע נשאר 44 על 44,
   ורק נכנס לריווח של התא (9 פיקסל), כך שהשורה חוזרת לגובה שלה. */
@media (pointer:coarse) and (min-width:761px){
  table.resp tr[data-id] .phone-cell a{margin-block:-8px}
}

/* ⛔ 15/10/2026 (דולב): בכרטיס ליד פתוח, "הסטטוס עודכן · ביטול" ישבה למטה על
   כפתורי הוואטסאפ והחיוג, ואי אפשר היה ללחוץ עליהם עד שנעלמה. בכרטיס פתוח
   ההודעה עולה לראש המסך, מתחת לשעון ולמצלמה (safe-area), ולא מסתירה פעולה. */
@media (max-width:760px){
  body:has(#drawer:not([hidden])) .toast{top:calc(env(safe-area-inset-top,0px) + 10px);bottom:auto}
}

/* ── כרטיס הליד בטלפון, הצעה 1 (דולב בחר 21/10/2026) ───────────────────
 * https://claude.ai/artifact/BdVbZ22gBFogBMKVkXURGr. ראש לבן וקטן: סגירה אחת, שם וטלפון, "בוט פעיל",
 * ותפריט ⋯ (עריכת פרטים, סיכום שיחה, העברה לבורד, מחיקה). מתחת הסטטוס ברוחב מלא. בתוכן: מה ענה/תה
 * בטופס, עדכונים אחרונים עם מי כתב, ושורות לפגישות, לעדכונים, למשימות ולקבצים במקום לשוניות.
 * בתחתית ארבעה כפתורים. ⛔ כל דבר פעם אחת: בלי שורת מיקום עם ✕ שני, בלי "סגירה" שלישית, בלי
 * כפתורי פעולה כפולים בראש. ההחלקה לליד הקודם/הבא נשארת. ⛔ רק בטלפון: המחשב לא משתנה. */
.m-only{display:none}
@media (max-width:760px){
  html #drawer.d-v4 .v4-side{background:var(--surface);color:var(--ink);border-bottom:1px solid var(--line);padding:10px 12px 10px;gap:8px}
  html #drawer.d-v4 .v4-side .v3-name{color:var(--ink);font-size:18px}
  html #drawer.d-v4 .v4-ph{color:var(--ink3)}
  html #drawer.d-v4 .v4-av{display:none}
  html #drawer.d-v4 .v4-who{gap:8px}
  html #drawer.d-v4 .v4-id{flex:1;min-width:0}
  html #drawer.d-v4 .v4-x,html #drawer.d-v4 .v4-more{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface2);color:var(--ink);font:inherit;font-size:18px;font-weight:800;cursor:pointer;display:inline-grid;place-items:center;flex:none;margin:0}
  html #drawer.d-v4 .v4-more[aria-expanded="true"]{background:var(--ink);color:var(--surface)}
  html #drawer.d-v4 .v4-x:focus-visible,html #drawer.d-v4 .v4-more:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
  html #drawer.d-v4 .v4-botp{display:inline-block;flex:none;font-size:11px;font-weight:800;padding:3px 9px;border-radius:99px;background:color-mix(in srgb,#7C3AED 14%,transparent);color:#6b3fd4}
  :root[data-theme="dark"] #drawer.d-v4 .v4-botp{color:#b9a6ff}
  html #drawer.d-v4 h4 span.m-only{display:inline}
  html #drawer.d-v4 .v4-side .v3-acts,html #drawer.d-v4 .v4-meta,html #drawer.d-v4 .v4-crumbs,
  html #drawer.d-v4 .v4-steps,html #drawer.d-v4 .d-tabs,#drawer.d-v3 .d-foot .dw-nav,html #drawer.d-v4 .d-only{display:none}
  html #drawer.d-v4 .v4-tools{display:none}
  html #drawer.d-v4 .v4-tools.m-open{display:grid;grid-template-columns:1fr;gap:6px;padding-top:2px}
  html #drawer.d-v4 .v4-tools.m-open .v4-tool{display:flex;align-items:center;justify-content:flex-start;gap:8px;min-height:46px;border-radius:12px;border:1px solid var(--line);background:var(--surface2);color:var(--ink);font:inherit;font-weight:700;padding:0 14px}
  html #drawer.d-v4 .v4-tools.m-open .v3-del{color:var(--red,#c0392b)}
  /* בתוכן: קודם מה ענה/תה, אחר כך העדכונים והשורות, ופרטי הקשר לעריכה בסוף */
  html #drawer.d-v4 .v4-grid > .v4-qa{order:-3}
  html #drawer.d-v4 .v4-grid > .v4-recent{order:-2}
  html #drawer.d-v4 .v4-grid > .v4-links{order:-1}
  html #drawer.d-v4 .v4-grid > .v4-contact{order:5}
  html #drawer.d-v4 .v4-contact .f-name,html #drawer.d-v4 .v4-contact .f-phone,html #drawer.d-v4 .v4-contact .f-email{display:none}
  html #drawer.d-v4.m-edit .v4-contact .f-name,html #drawer.d-v4.m-edit .v4-contact .f-phone,html #drawer.d-v4.m-edit .v4-contact .f-email{display:grid}
  html #drawer.d-v4 .v4-recent .v4-tl li:nth-child(n+4){display:none}
  html #drawer.d-v4 .v4-recent .d-badge{display:inline-block;font-style:normal;font-size:10.5px;padding:1px 7px;border-radius:99px;margin-inline-end:2px}
  html #drawer.d-v4 .v4-recent .v4-write{display:inline-flex;align-items:center;min-height:44px;font-weight:800;padding:0}
  html #drawer.d-v4 .v4-recent .d-none{display:block;margin:4px 0;color:var(--ink3);font-size:13px}
  html #drawer.d-v4 .v4-links{display:grid;gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
  html #drawer.d-v4 .v4-links button{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:0 14px;border:0;border-top:1px solid var(--line);background:none;color:var(--ink);font:inherit;text-align:start;cursor:pointer}
  html #drawer.d-v4 .v4-links button:first-child{border-top:0}
  html #drawer.d-v4 .v4-links small{color:var(--ink3);font-weight:600}
  html #drawer.d-v4 .v4-links button:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
  html #drawer.d-v4 .v4-back{display:flex;align-items:center;min-height:44px;margin:8px 12px 0;padding:0 4px;border:0;background:none;color:var(--accent-ink,var(--accent));font:inherit;font-weight:800;cursor:pointer}
  #drawer.d-v3 .dw-t.fin{background:var(--accent)}
  /* "לכל העדכונים" כבר בשורות מתחת: פעם אחת */
  html #drawer.d-v4 .v4-recent h4 #dHistAll{display:none}
  /* "מאיפה הגיע" ופרטי הקשר: שורה לכל פרט (תווית מימין, ערך משמאל) במקום תווית מעל ערך */
  html #drawer.d-v4 .v3-origin .d-grid,html #drawer.d-v4 .v4-contact .d-grid{gap:0}
  html #drawer.d-v4 .v3-origin .d-f,html #drawer.d-v4 .v4-contact .d-f{display:grid;grid-template-columns:minmax(72px,auto) minmax(0,1fr);align-items:center;gap:10px;min-height:40px;border-top:1px solid var(--line);padding:4px 0}
  html #drawer.d-v4 .v3-origin .d-f:first-child,html #drawer.d-v4 .v4-contact .d-f:first-child{border-top:0}
  html #drawer.d-v4 .v3-origin .d-f > span,html #drawer.d-v4 .v4-contact .d-f > span{font-size:13px;color:var(--ink3)}
  html #drawer.d-v4 .v3-origin .d-f > b,html #drawer.d-v4 .v3-origin .d-f > input{font-size:15px;text-align:start;min-width:0;overflow-wrap:anywhere}
  html #drawer.d-v4 .v3-origin .d-f > b[dir="ltr"]{text-align:right}
}

/* ── ניהול לקוחות בטלפון: כרטיס רגיל, לא הכרטיס של הלידים ─────────────
 * ⛔ 25/10/2026: גם לשורות של ניהול לקוחות יש data-id, וכללי הלידים שלמעלה (רשת של
 * שם, וואטסאפ וחיוג) הסתירו בהן את כל התאים: בטלפון נראו כרטיסים ריקים. כמו בפרק 48,
 * לכל טבלה מבנה טלפון משלו. כאן: שם העסק בראש, ומתחתיו שדה בשורה עם הכותרת שלו. */
@media (max-width:760px){
  table.manage-table.resp tr[data-id]{display:block;grid-template-columns:none;min-height:0;padding:10px 14px;
    margin:0 0 10px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
  table.manage-table.resp tr[data-id] td{display:flex;justify-content:space-between;gap:12px;align-items:center;
    width:auto;padding:4px 0;font-size:14px;color:var(--ink2)}
  table.manage-table.resp tr[data-id] td::before{content:attr(data-label);color:var(--ink3);font-size:13px;flex:none}
  table.manage-table.resp tr[data-id] td:first-child{font-size:16px;font-weight:600;color:var(--ink);
    padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:6px}
  table.manage-table.resp tr[data-id] td:first-child::before{content:none}
  table.manage-table.resp tr[data-id] td:empty{display:none}
  table.manage-table.resp select.tst{max-width:60%}
}

/* ⭐ 27/10/2026 (דולב): החלקה מהקצה הימני = "חזרה" (public/swipeback.js). החץ יוצא מהקצה עם האצבע,
   ומתמלא בצבע כשההחלקה מספיקה לחזרה. */
.sb-chip{position:fixed;top:50%;right:-48px;z-index:2000;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;line-height:1;
  background:var(--surface,#fff);color:var(--ink,#111);border:1px solid var(--line,#ddd);
  box-shadow:0 4px 14px rgba(0,0,0,.18);pointer-events:none;opacity:0;transform:translate(0,-50%);
  transition:opacity .12s ease,background-color .12s ease,color .12s ease}
.sb-chip.on{opacity:1}
.sb-chip.armed{background:var(--accent,#2563eb);color:#fff;border-color:transparent}
.sb-chip.still.on{transform:translate(-64px,-50%)}
@media (prefers-reduced-motion: reduce){.sb-chip{transition:none}}
@media (min-width:761px){.sb-chip{display:none}}