/* מוסתר באמת. הקלאס הזה נוסף והוסר בכל הממשק, ובלי ההגדרה הזו
   הוא לא עשה כלום — שני שלבי הכניסה הופיעו יחד. */
.hidden { display: none !important; }

/* שכבת הממשק החדשה: כניסה, דשבורד ויזואלי, מסך לקוח.
   נשענת על הטוקנים של style.css ולא מגדירה פלטה שנייה. */

/* ═══ כניסה ══════════════════════════════════════════════════════════ */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 32px 28px; width: 100%; max-width: 390px;
  box-shadow: var(--sh3);
}
.brand-mark {
  width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--accent-deep), var(--accent));
  color: var(--on-accent); font-family: var(--font-display); font-weight: 800;
  font-size: 19px; margin-bottom: 16px;
}
.brand-mark.sm { width: 40px; height: 40px; border-radius: 12px; font-size: 15px; margin: 0; }
.login-card h1 { font-family: var(--font-display); font-size: 26px; font-weight: 800; }
.login-sub { font-size: 13.5px; color: var(--ink3); margin: 4px 0 22px; }
.login-card label { display: block; font-size: 12.5px; color: var(--ink2); margin-bottom: 6px; }
.login-card input {
  width: 100%; background: var(--bg2); border: 1px solid var(--line2);
  border-radius: 11px; padding: 12px 14px; font-size: 16px; color: var(--ink);
  margin-bottom: 14px;
}
.login-card input:focus { outline: none; border-color: var(--accent); }
.btn.wide { width: 100%; justify-content: center; padding: 13px; font-size: 15px; }
.login-err { color: var(--lost); font-size: 13.5px; margin-top: 12px; min-height: 20px; }

/* ═══ סרגל צד ════════════════════════════════════════════════════════ */
#nav-hq { margin-bottom: 4px; }
.side-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.side-foot .link {
  background: none; border: none; color: var(--ink3); font-size: 12.5px;
  padding: 4px 0; cursor: pointer;
}
.side-foot .link:hover { color: var(--accent); }

/* ═══ כרטיסי מדד ═════════════════════════════════════════════════════ */
.k-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin-bottom: 16px; }
@media (max-width: 640px) { .k-row { grid-template-columns: repeat(2, 1fr); } }
.k {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 15px 16px 13px; position: relative; overflow: hidden;
}
.k::after {
  content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
  width: 3px; background: var(--k-c, var(--accent));
}
.k-n {
  font-family: var(--font-num); font-size: 29px; font-weight: 500;
  line-height: 1; color: var(--k-c, var(--ink)); font-variant-numeric: tabular-nums;
}
.k-l { font-size: 12.5px; color: var(--ink2); margin-top: 5px; }
.k-bar { height: 4px; border-radius: 99px; background: var(--bg2); overflow: hidden; margin-top: 8px; }
.k-bar i { display: block; height: 100%; border-radius: 99px; background: var(--k-c, var(--accent)); }
.k-p { font-size: 11.5px; color: var(--ink3); margin-top: 6px; font-variant-numeric: tabular-nums; }

/* ═══ פאנלי התפלגות ══════════════════════════════════════════════════ */
.panels { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 18px; }
@media (max-width: 800px) { .panels { grid-template-columns: 1fr; } }
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 15px 17px;
}
.panel-h {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: var(--ink2); margin-bottom: 12px;
}
.panel-h b {
  font-size: 12px; color: var(--ink3); font-weight: 500;
  font-family: var(--font-num);
}
.stack {
  display: flex; height: 13px; border-radius: 99px; overflow: hidden;
  background: var(--bg2); margin-bottom: 13px;
}
.stack i { height: 100%; min-width: 3px; }
.legend { display: flex; flex-direction: column; gap: 8px; }
.lg {
  display: grid; grid-template-columns: 9px 1fr auto 44px; gap: 10px;
  align-items: center; font-size: 12.5px; color: var(--ink2);
}
.lg i { width: 9px; height: 9px; border-radius: 3px; }
.lg .lg-n { font-family: var(--font-num); color: var(--ink); font-weight: 500; }
.lg .lg-p { font-family: var(--font-num); color: var(--ink3); text-align: left; }

/* ═══ טבעת ציון ══════════════════════════════════════════════════════ */
.ring-wrap { position: relative; display: grid; place-items: center; }
.ring circle { fill: none; stroke-linecap: round; }
.ring .track { stroke: var(--bg2); }
.ring .val { transform: rotate(-90deg); transform-origin: center; }
.ring-txt {
  position: absolute; text-align: center; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ring-txt b { display: block; font-family: var(--font-num); font-size: 16px; font-weight: 500; }

/* ═══ כרטיס לקוח ═════════════════════════════════════════════════════ */
.crm-list { display: flex; flex-direction: column; gap: 9px; }
.crm-card {
  display: grid; grid-template-columns: 46px 1fr auto; gap: 14px; align-items: center;
  cursor: pointer; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px 16px;
  transition: transform .12s ease, border-color .12s ease;
}
.crm-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.cc-name { font-weight: 600; font-size: 15.5px; color: var(--ink); }
.cc-meta {
  display: flex; gap: 7px; flex-wrap: wrap; align-items: center;
  margin-top: 6px; font-size: 11.5px;
}
.cc-owner { color: var(--ink3); }
.cc-right { text-align: center; min-width: 56px; }
.cc-conf { font-size: 10.5px; color: var(--ink3); margin-top: 3px; font-variant-numeric: tabular-nums; }
.tag { font-size: 11px; padding: 2px 10px; border-radius: 99px; white-space: nowrap; border: 1px solid transparent; }
.tag.route {
  background: color-mix(in srgb, var(--r-c) 16%, transparent); color: var(--r-c);
  border-color: color-mix(in srgb, var(--r-c) 30%, transparent);
}
.tag.life { background: color-mix(in srgb, var(--l-c) 15%, transparent); color: var(--l-c); }

/* ═══ מסך לקוח ═══════════════════════════════════════════════════════ */
.b-hero {
  display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 20px 22px; margin-bottom: 16px;
}
@media (max-width: 600px) { .b-hero { grid-template-columns: 1fr; } }
.b-name { font-family: var(--font-display); font-size: 23px; font-weight: 800; line-height: 1.15; }
.b-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.b-facts { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 14px; font-size: 11.5px; color: var(--ink3); }
.b-facts b { display: block; color: var(--ink2); font-weight: 500; font-size: 13px; margin-top: 2px; }

.signals { display: flex; flex-direction: column; gap: 9px; }
.sig { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 13px 16px; }
.sig.off { opacity: .55; }
.sig-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sig-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.sig-w { font-size: 10.5px; color: var(--ink3); }
.sig-score { font-family: var(--font-num); font-size: 17px; font-weight: 500; }
.sig-track { height: 7px; background: var(--bg2); border-radius: 99px; overflow: hidden; margin: 9px 0 8px; }
.sig-track i { display: block; height: 100%; border-radius: 99px; }
.sig-ev { font-size: 11.5px; color: var(--ink3); line-height: 1.55; }

/* ═══ גישת לקוח ══════════════════════════════════════════════════════ */
.portal-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 6px 17px 15px; }
.sw {
  display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--line); font-size: 14.5px; cursor: pointer;
}
.sw:last-of-type { border-bottom: none; }
.sw.locked { cursor: default; opacity: .6; }
.sw input { width: 18px; height: 18px; accent-color: var(--accent); }
.sw-sub { font-size: 11.5px; color: var(--ink3); display: block; margin-top: 1px; }
.portal-users { margin-top: 13px; border-top: 1px solid var(--line); padding-top: 13px; }
.pu { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13.5px; color: var(--ink2); }
.pu-phone {
  color: var(--ink3); font-family: var(--font-num);
  direction: ltr; unicode-bidi: isolate; flex: 1;
}
.pu-x { background: none; border: none; color: var(--lost); font-size: 12.5px; cursor: pointer; padding: 3px 8px; }
.pu-empty { font-size: 13px; color: var(--ink3); padding: 4px 0; }
.pu-add { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.pu-add input {
  flex: 1; min-width: 100px; background: var(--bg2); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 12px; font-size: 13.5px; color: var(--ink);
}
.pu-add input:focus { outline: none; border-color: var(--accent); }

/* ═══ מחזור חיים ═════════════════════════════════════════════════════ */
.life-row { display: flex; gap: 6px; flex-wrap: wrap; }
.life-hist { margin-top: 12px; }
.lh {
  display: flex; justify-content: space-between; gap: 10px; padding: 7px 0;
  font-size: 13px; color: var(--ink2); border-bottom: 1px solid var(--line);
}
.lh-meta { color: var(--ink3); font-size: 11.5px; }

/* ═══ באנר הסבר ══════════════════════════════════════════════════════ */
.note-block {
  background: var(--surface); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--new); border-radius: var(--r);
  padding: 14px 17px; margin-bottom: 16px;
}
.note-block .nt { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.note-block p { font-size: 12.5px; color: var(--ink3); line-height: 1.6; margin: 0; }

/* ═══ מעבר בין דרכי כניסה ════════════════════════════════════════════ */
.link-alt {
  width: 100%; background: none; border: none; color: var(--ink3);
  font-size: 13px; padding: 12px 0 2px; cursor: pointer;
}
.link-alt:hover { color: var(--accent); }
.sent-to {
  font-size: 13px; color: var(--ink2); background: var(--bg2);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 13px; margin-bottom: 16px; line-height: 1.5;
}
#login-code {
  letter-spacing: .45em; text-align: center; font-size: 21px;
  font-family: var(--font-num); padding-inline-start: .45em;
}
/* ═══ מסך הסקירה שלנו ═══
   הסדר הוא סדר של דחיפות, לא של יופי: מה שדורש פעולה למעלה, מה שנשאר
   לעשות למטה. אין כאן ארבעה כרטיסים שווים בגודלם — היררכיה היא כל
   העניין במסך שנפתח בבוקר. */

.hq-strip {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink2);
  padding: 0 2px 14px; border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.hq-strip b {
  font-family: var(--font-num); font-size: 19px;
  color: var(--ink); margin-inline-end: 3px; font-weight: 500;
}
.hq-strip i { width: 1px; height: 13px; background: var(--line2); }
.hq-strip .mut { color: var(--ink3); }
.hq-strip .sev b { color: var(--lost); }

.hq-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .06em; font-weight: 700;
  color: var(--ink3); margin: 22px 2px 9px;
}
.hq-h.sev { color: var(--lost); }
.hq-n {
  font-family: var(--font-num); font-size: 10.5px;
  background: var(--lost-t1); color: var(--lost);
  border-radius: 99px; padding: 1px 8px;
}
.hq-hint {
  margin-inline-start: auto; font-weight: 400; letter-spacing: 0;
  color: var(--ink3); font-size: 11px;
}

.hq-ok {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 15px 17px; font-size: 13px; color: var(--ink3); line-height: 1.6;
}

/* ── שורת התראה ── */
.hq-a {
  display: flex; align-items: center; gap: 11px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 11px 15px; margin-bottom: 6px; cursor: pointer;
}
.hq-a:hover { border-color: var(--accent); }
.hq-a.high { border-inline-start: 3px solid var(--lost); }
.hq-a.medium { border-inline-start: 3px solid var(--prog); }
.hq-a.low { border-inline-start: 3px solid var(--line2); }

/* דופק העסק בשורת ההתראה: כמה נכנס בשלושה, בשבעה ובשלושים, וכמה מהשבוע
   כבר נגעו בו. מספר בלי היחס הזה לא אומר אם מישהו עובד. */
.hq-pulse{display:flex;flex-wrap:wrap;gap:3px 12px;margin-top:5px;
  font-size:12.5px;color:var(--ink3);align-items:baseline}
.hq-pulse i{font-style:normal;font-family:var(--font-num);font-weight:600;
  color:var(--ink2);margin-inline-end:3px}
.hq-pulse em{font-style:normal;font-family:var(--font-num);font-size:12px;
  padding:1px 8px;border-radius:99px;background:var(--surface3);color:var(--ink2)}
.hq-pulse em.ok{background:color-mix(in srgb,var(--won) 16%,transparent);color:var(--won)}
.hq-pulse em.none{background:color-mix(in srgb,var(--lost) 14%,transparent);color:var(--lost)}
/* הכותרת מקדימה, שלושת החלונות מופרדים בקו אנכי. המפריד ב-CSS ולא
   בטקסט, כדי שהשורה שנשברת במובייל לא תתחיל בקו תלוש. */
.hq-wl{color:var(--ink3);font-weight:500}
.hq-w{white-space:nowrap}
.hq-w + .hq-w{border-inline-start:1px solid var(--line2);padding-inline-start:12px}
.hq-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line2); flex: none; }
.hq-a.high .hq-dot { background: var(--lost); }
.hq-a.medium .hq-dot { background: var(--prog); }
.hq-ai { flex: 1; min-width: 0; }
.hq-ai b { display: block; font-size: 14px; color: var(--ink); }
.hq-ai span { display: block; font-size: 12px; color: var(--ink3); }
.hq-go { font-size: 12px; color: var(--accent); font-weight: 600; flex: none; }
/* בריף הלקוח ממאנדיי בכרטיס העסק (22/09/2026) */
.brief { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 16px; margin: 4px 0 12px; }
.brief-s b { display: block; font-size: 12px; color: var(--ink3); letter-spacing: .03em; margin-bottom: 3px; }
.brief-s div { font-size: 13.5px; color: var(--ink); line-height: 1.5; }
.brief-s div.on::before { content: "✓ "; color: var(--won); }
.brief-s div.off { color: var(--ink3); }
.brief-s div.off::before { content: "○ "; }
/* "בוצע" / "שלח לקבוצה" על דורש טיפול (22/09/2026) */
.hq-acts { display: flex; gap: 6px; flex: none; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.hq-btn { font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line2); background: var(--surface2); color: var(--ink); min-height: 32px; }
.hq-btn:hover { border-color: var(--accent); }
.hq-btn.send { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.hq-btn.send:hover { background: var(--accent-deep); color: #fff; }
.hq-btn.done { border-color: color-mix(in srgb, var(--won) 55%, transparent); color: var(--won); }
.hq-btn[disabled] { opacity: .55; cursor: default; }
.hq-sent { font-size: 12px; color: var(--won); font-weight: 600; white-space: nowrap; }
.hq-sel { font: inherit; font-size: 12.5px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line2); background: var(--surface2); color: var(--ink); max-width: 210px; min-height: 32px; }
.hq-sentline { display: block; font-size: 11.5px; color: var(--won); margin-top: 2px; }
.hq-a.hq-hid { opacity: .6; }
.bot-al .ago { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
@media (max-width: 760px) { .hq-a { flex-wrap: wrap; } .hq-acts { width: 100%; justify-content: flex-start; padding-inline-start: 22px; } .hq-go { display: none; } }

.hq-soft {
  font-size: 12px; color: var(--ink3); cursor: pointer;
  padding: 10px 4px; display: flex; justify-content: space-between;
  align-items: center; border-top: 1px solid var(--line); margin-top: 8px;
}
.hq-soft:hover { color: var(--accent); }
.hq-soft-body.hidden, .hq-gaps.hidden { display: none; }

/* ── טבלת הקמפיינים ── */
.hq-tb {
  width: 100%; border-collapse: collapse; font-size: 13px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden;
}
.hq-tb th {
  font-size: 10.5px; letter-spacing: .05em; color: var(--ink3);
  text-align: start; padding: 10px 14px 8px; font-weight: 600;
  border-bottom: 1px solid var(--line); background: var(--bg2);
}
.hq-tb td { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.hq-tb tbody tr:last-child td { border-bottom: none; }
.hq-tb tbody tr { cursor: pointer; }
.hq-tb tbody tr:hover td { background: var(--surface2); }
.hq-tb .nm { color: var(--ink); }
.hq-tb .n { text-align: start; font-family: var(--font-num); }
.hq-tb .dim { color: var(--ink3); }
/* מקום שמור נראה כמו מקום שמור. מסך שמסתיר את מה שחסר בו לא מזכיר
   לאיש להשלים אותו. */
.hq-tb .slot {
  color: var(--ink3); font-size: 11px; font-family: inherit;
  border: 1px dashed var(--line2); border-radius: 6px;
  padding: 1px 7px; display: inline-block;
}

/* ── מצב ההקמה ── */
.hq-setup { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
@media (max-width: 700px) { .hq-setup { grid-template-columns: 1fr; } }
.hq-st {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 13px 15px;
}
.hq-st b {
  display: block; font-family: var(--font-num);
  font-size: 24px; line-height: 1.1; color: var(--accent); font-weight: 500;
}
.hq-st span { font-size: 11.5px; color: var(--ink3); }
.hq-p {
  display: block; height: 3px; background: var(--surface3);
  border-radius: 99px; margin-top: 9px; overflow: hidden;
}
.hq-p u { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.hq-p u.mut { background: var(--line2); }

.hq-gap {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px; border-bottom: 1px solid var(--line);
  font-size: 12.5px; cursor: pointer;
}
.hq-gap:hover { background: var(--surface2); }
.hq-gap .gn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hq-gap .gt { color: var(--ink3); font-size: 11.5px; flex: none; }
.hq-gap .ga {
  color: var(--ink3); font-size: 11px; flex: none;
  font-family: var(--font-num); min-width: 62px; text-align: start;
}

/* ═══ מסך הלקוח — סקירה ═══
   דאטה למעלה, הגדרות מקופלות למטה. מנהל שיווק בא לראות מספרים, לא
   לגלול דרך היסטוריית מחזור חיים כדי להגיע אליהם. */

.cviews {
  display: flex; gap: 4px; margin: 4px 0 0;
  border-bottom: 1px solid var(--line);
}
.cviews .cv {
  padding: 9px 18px 11px; font-size: 14px; color: var(--ink3);
  border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0;
  display: flex; align-items: center; gap: 7px;
}
.cviews .cv:hover { color: var(--ink); background: var(--surface2); }
.cviews .cv.on {
  color: var(--accent); border-bottom-color: var(--accent);
  font-weight: 700; background: none;
}
.cviews .cv.on .badge { background: var(--accent-soft); color: var(--accent); }

/* ⭐ הרצפה של הסקירה, אמורה על המסך. סקירה שמסננת בשקט היא מספר
   שקרי, וזה בדיוק מה שאנחנו נזהרים ממנו. ראה `measure_from`. */
.c-measure {
  font-size: 12.5px; color: var(--ink3); margin: 8px 0 14px;
  padding: 7px 11px; border-radius: 9px;
  background: var(--surface2); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--accent);
}

.c-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.c-tags .tag.plain {
  background: var(--surface2); color: var(--ink3);
  border: 1px solid var(--line); font-size: 11.5px;
  border-radius: 99px; padding: 3px 11px;
}

.c-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; margin-bottom: 6px; }
@media (max-width: 860px) { .c-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .c-kpis { grid-template-columns: repeat(2, 1fr); } }
.c-k {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 13px 15px;
}
.c-k b {
  display: block; font-family: var(--font-num);
  font-size: 24px; line-height: 1.15; font-weight: 500; color: var(--ink);
}
.c-k span { font-size: 11.5px; color: var(--ink3); }
.c-k i {
  font-style: normal; display: block; margin-top: 3px;
  font-size: 11px; font-family: var(--font-num);
}
.c-k i.up { color: var(--won); }
.c-k i.dn { color: var(--lost); }
.c-k i.flat, .c-k i.new { color: var(--ink3); font-family: inherit; }
.c-k.hot { background: var(--accent-soft); border-color: var(--accent); }
.c-k.hot b { color: var(--accent); }
.c-k.warn b { color: var(--prog); }

.c-sh {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .06em; font-weight: 700;
  color: var(--ink3); margin: 24px 2px 10px;
}
.c-hint {
  margin-inline-start: auto; font-weight: 400; letter-spacing: 0;
  font-size: 11px; color: var(--ink3);
}

.c-stack {
  display: flex; height: 12px; border-radius: 99px; overflow: hidden;
  background: var(--surface3); margin-bottom: 12px;
}
.c-stack i { height: 100%; min-width: 3px; }

.c-rows {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 15px;
}
.c-row {
  display: grid; grid-template-columns: 10px minmax(90px, 30%) 1fr 38px 30px;
  gap: 10px; align-items: center; padding: 5px 0; font-size: 12.5px;
}
.c-d { width: 10px; height: 10px; border-radius: 3px; }
.c-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink2); }
.c-t { height: 7px; background: var(--surface3); border-radius: 99px; overflow: hidden; }
.c-t u { display: block; height: 100%; border-radius: 99px; }
.c-p { font-family: var(--font-num); font-size: 12px; text-align: start; color: var(--ink); }
.c-n { font-family: var(--font-num); font-size: 11px; text-align: start; color: var(--ink3); }

.c-none {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; font-size: 13px; color: var(--ink3); line-height: 1.65;
}
.c-none b { color: var(--ink2); }
.c-note { font-size: 11.5px; color: var(--ink3); margin-top: 9px; line-height: 1.6; }

.c-tb {
  width: 100%; border-collapse: collapse; font-size: 13px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden;
}
.c-tb th {
  font-size: 10.5px; letter-spacing: .05em; color: var(--ink3);
  text-align: start; padding: 10px 15px 8px; font-weight: 600;
  border-bottom: 1px solid var(--line); background: var(--bg2);
}
.c-tb td { padding: 10px 15px; border-bottom: 1px solid var(--line); }
.c-tb tbody tr:last-child td { border-bottom: none; }
.c-tb .n { text-align: start; font-family: var(--font-num); }
.c-tb .dim { color: var(--ink3); }
.c-tb .good { color: var(--won); }
.c-arch {
  font-size: 10px; color: var(--ink3); background: var(--surface2);
  border-radius: 99px; padding: 1px 7px; margin-inline-start: 5px;
}

.c-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.c-chip {
  font-size: 12px; border-radius: 99px; padding: 4px 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--g); color: var(--ink2);
}
.c-chip b { font-family: var(--font-num); color: var(--ink); font-weight: 500; }
.c-chip i {
  font-style: normal; font-family: var(--font-num);
  font-size: 10.5px; color: var(--ink3); margin-inline-start: 4px;
}

/* ── מקטעים מקופלים ──
   מה שבודקים פעם בשבוע לא צריך לתפוס מקום כל יום, אבל הכותרת אומרת
   את המצב גם כשהמקטע סגור — אחרת צריך לפתוח כדי לדעת אם יש בעיה. */
.c-fold {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; margin-top: 8px; overflow: hidden;
}
.c-fold summary {
  padding: 12px 16px; cursor: pointer; font-size: 13px; color: var(--ink2);
  display: flex; align-items: center; gap: 9px; list-style: none;
}
.c-fold summary::-webkit-details-marker { display: none; }
.c-fold summary::before { content: '▸'; color: var(--ink3); font-size: 11px; }
.c-fold[open] summary::before { content: '▾'; }
.c-fold summary:hover { color: var(--ink); background: var(--surface2); }
.c-sum { margin-inline-start: auto; font-size: 12px; color: var(--ink3); }
.c-fb {
  display: grid; grid-template-columns: 120px 1fr; gap: 18px;
  padding: 4px 16px 16px; border-top: 1px solid var(--line); align-items: start;
}
.c-fb.col { grid-template-columns: 1fr; }
@media (max-width: 640px) { .c-fb { grid-template-columns: 1fr; } }
.c-ring { text-align: center; }
.c-fold .hook-box { padding: 14px 16px; border-top: 1px solid var(--line); }
.c-fold .portal-box { border: none; border-top: 1px solid var(--line); border-radius: 0; }

/* בחירת קמפיין בסרגל המסננים.
   רחב יותר משאר התפריטים כי שמות קמפיינים ארוכים — "New Lead Campigan |
   סירטונים מאור | עיצובים דולב" הוא שם אחד. */
.dd-panel.wide { min-width: 280px; max-width: 380px; max-height: 340px; overflow-y: auto; }
.dd-panel .dd-q {
  width: 100%; background: var(--bg2); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 10px; font-size: 12.5px;
  margin-bottom: 5px; position: sticky; top: 0;
}
.dd-panel .dd-q:focus { outline: none; border-color: var(--accent); }
.dd-opt.pick {
  cursor: pointer; display: flex; align-items: center; gap: 8px;
  border-radius: 7px;
}
.dd-opt.pick > span:first-child {
  flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.dd-opt.pick:hover { background: var(--surface2); }
.dd-opt.pick.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.dd-opt.pick.empty-b { color: var(--ink3); }
.dd-opt .arch {
  font-style: normal; font-size: 10px; color: var(--ink3);
  background: var(--surface3); border-radius: 99px;
  padding: 0 6px; margin-inline-start: 5px;
}
/* שם קמפיין ארוך לא יבלע את שאר הסרגל */
#dd-board .dd-btn { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── ניהול עמודות ── */
.m-note { font-size: 12px; color: var(--ink3); line-height: 1.6; margin: -4px 0 14px; }
.m-hint { font-size: 11.5px; color: var(--ink3); line-height: 1.55; margin-top: 5px; }
.m-opt { font-size: 10.5px; color: var(--ink3); font-weight: 400; }
.m-check { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 14px; }
.m-check input { accent-color: var(--accent); }

.cols-list { max-height: 44vh; overflow-y: auto; margin: 0 -6px 4px; padding: 0 6px; }
.col-row {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
.cl-title {
  flex: 1; min-width: 0; background: var(--bg2); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 10px; font-size: 13px; color: var(--ink);
}
.cl-title:focus { outline: none; border-color: var(--accent); }
.col-row select {
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 7px; font-size: 12px; color: var(--ink);
}
.cl-cli { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink3); }
.cl-cli input { accent-color: var(--accent); }
.cl-auto {
  font-size: 10px; color: var(--accent); background: var(--accent-soft);
  border-radius: 99px; padding: 1px 8px; white-space: nowrap;
}
.cl-merge { max-width: 92px; }

/* ═══ מגירת הליד — הצד שלנו ═══
   אותו כרטיס שהלקוח מקבל, ובנוסף עריכת כל שדה. */

.d-load { padding: 34px 20px; text-align: center; color: var(--ink3); font-size: 13.5px; }

.d-h {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 17px 19px 14px; border-bottom: 1px solid var(--line);
  flex: none; background: var(--surface);
}
.d-who { flex: 1; min-width: 0; }
.d-who b {
  display: block; font-size: 19px; font-weight: 700;
  line-height: 1.25; overflow-wrap: anywhere;
}
.d-sub { display: block; font-size: 12.5px; color: var(--ink3); margin-top: 3px; }
.d-sub em { font-style: normal; opacity: .4; margin: 0 5px; }
.d-logo { flex: none; width: 80px; height: auto; border-radius: 6px; align-self: center; }
.d-x { flex: none; color: var(--ink3); font-size: 14px; line-height: 1; padding: 4px 2px; }
.d-x:hover { color: var(--ink); }

.d-body { padding: 15px 19px 30px; overflow-y: auto; flex: 1; }

.d-st {
  font-size: 13.5px; font-weight: 600; border: 1px solid var(--line2);
  border-radius: 99px; padding: 7px 16px; background: var(--surface);
  color: var(--ink); border-inline-start: 4px solid var(--g);
  display: inline-flex; align-items: center; gap: 7px;
}
.d-st:hover { border-color: var(--accent); }
.d-st.open { border-color: var(--accent); color: var(--accent); }
.d-st i { font-style: normal; font-size: 10px; color: var(--ink3); }

.d-menu {
  border: 1px solid var(--line2); border-radius: 12px; padding: 4px;
  margin-top: 9px; background: var(--surface); box-shadow: var(--sh1);
  max-height: 320px; overflow-y: auto;
}
.d-mi {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border-radius: 9px; font-size: 13px;
  color: var(--ink2); text-align: start;
}
.d-mi:hover { background: var(--surface2); color: var(--ink); }
.d-mi.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.d-mi .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--g); flex: none; }
.d-mi i { margin-inline-start: auto; font-style: normal; font-size: 11px; }

.d-acts { display: flex; gap: 7px; margin: 14px 0 4px; flex-wrap: wrap; }
.d-a {
  font-size: 12.5px; border: 1px solid var(--line2); border-radius: 99px;
  padding: 6px 17px; color: var(--ink2); background: var(--surface); white-space: nowrap;
}
.d-a:hover { border-color: var(--accent); color: var(--accent); }
.d-a.wa { border-color: var(--wa); color: var(--wa); font-weight: 600; }
.d-a.wa:hover { background: var(--wa); color: #fff; }
.d-a.up {
  background: var(--accent); border-color: var(--accent);
  color: var(--on-accent); font-weight: 700;
}
.d-a.up:hover { background: var(--accent-deep); color: #fff; }
.d-a.up.on { box-shadow: 0 0 0 3px var(--accent-soft); }

.d-box {
  border: 1px solid var(--accent); border-radius: 12px;
  padding: 10px 11px 9px; margin-top: 12px; background: var(--surface);
}
.d-box textarea {
  width: 100%; border: none; background: none; resize: vertical;
  font: inherit; font-size: 13.5px; color: var(--ink); line-height: 1.55;
}
.d-box textarea:focus { outline: none; }
.d-bf {
  display: flex; gap: 12px; align-items: center;
  border-top: 1px solid var(--line); padding-top: 9px; margin-top: 6px;
}
.d-send {
  background: var(--accent); color: var(--on-accent); font-size: 12.5px;
  font-weight: 700; border-radius: 99px; padding: 6px 20px;
}
.d-send[disabled] { opacity: .55; cursor: default; }
.d-cancel { font-size: 12.5px; color: var(--ink3); }

.d-sec {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; letter-spacing: .06em; font-weight: 700;
  color: var(--ink3); margin: 20px 0 8px;
}
.d-hint {
  margin-inline-start: auto; font-weight: 400; letter-spacing: 0;
  font-size: 10.5px; color: var(--ink3);
}

.d-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 520px) { .d-grid { grid-template-columns: 1fr; } }
.d-f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.d-f > span { font-size: 10.5px; color: var(--ink3); display: flex; align-items: center; gap: 4px; }
.d-f i { font-style: normal; font-size: 9px; opacity: .75; }
.d-f i.auto { color: var(--accent); }
.d-f input {
  border: 1px solid var(--line); background: var(--surface2);
  border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13px;
  color: var(--ink); width: 100%;
}
.d-f select {
  border: 1px solid var(--line); background: var(--surface2);
  border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13px;
  color: var(--ink); width: 100%;
}
.d-f select + input[data-kind="other"] { margin-top: 6px; }
.col-row { flex-wrap: wrap; }
.col-row .cl-opts { flex: 1 1 100%; border: 1px solid var(--line); background: var(--surface2);
  border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 12.5px; color: var(--ink); }
.d-f input:hover { border-color: var(--line2); }
.d-f input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.d-f input.mono { font-family: var(--font-num); direction: ltr; unicode-bidi: isolate; }
.d-f .ro { font-size: 13px; font-weight: 500; color: var(--ink2); padding: 6px 0; }

/* ── היסטוריה ──
   התג הוא כל העניין: מהיום גם הלקוח וגם הצוות משנים סטטוס על אותו ליד,
   ובלעדיו שתי השורות נראות זהות. */
.d-tl { display: grid; }
.d-ti { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.d-av {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.d-av.cli { background: var(--accent-soft); color: var(--accent); }
.d-av.team { background: var(--won-t1, rgba(67,193,124,.12)); color: var(--won); }
.d-av.sys { background: var(--surface3); color: var(--ink3); font-weight: 400; }
.d-tb { min-width: 0; }
.d-th { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.d-th b { font-size: 12.5px; }
.d-tm { font-size: 11px; color: var(--ink3); }
.d-badge { font-size: 9.5px; border-radius: 99px; padding: 1px 7px; font-weight: 600; }
.d-badge.cli { background: var(--accent-soft); color: var(--accent); }
.d-badge.team { background: rgba(67,193,124,.12); color: var(--won); }
.d-tb p {
  font-size: 12.5px; line-height: 1.55; color: var(--ink2);
  margin-top: 2px; overflow-wrap: anywhere;
}
.d-tb p.muted { color: var(--ink3); font-size: 12px; }
.d-none { font-size: 12.5px; color: var(--ink3); padding: 10px 0; }

/* ── סרגל ביטול מחיקה ──
   דקה, עם שניות שרצות. הוא לא נעלם בשקט אלא מודיע שהחלון נסגר — סרגל
   שנעלם בלי לומר כלום משאיר את מי שמחק בטוח שהוא עוד יכול לבטל. */
.undo-bar {
  position: fixed; inset-inline: 0; bottom: 22px; margin: 0 auto;
  width: max-content; max-width: 92vw; z-index: 120;
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--lost);
  border-radius: 99px; padding: 10px 12px 10px 20px;
  box-shadow: var(--sh2); font-size: 13px;
  animation: undoIn .2s cubic-bezier(.22, 1, .36, 1);
}
@keyframes undoIn { from { transform: translateY(12px); opacity: 0 } }
.undo-bar.done { border-color: var(--line2); }
.undo-bar .u-t { color: var(--ink2); }
.undo-bar .u-t b { color: var(--ink); }
.undo-bar .u-go {
  background: var(--accent); color: var(--on-accent);
  border-radius: 99px; padding: 6px 16px; font-size: 12.5px; font-weight: 700;
  white-space: nowrap;
}
.undo-bar .u-go:hover { background: var(--accent-deep); color: #fff; }
.undo-bar .u-c {
  font-family: var(--font-num); font-size: 12px;
  color: var(--ink3); min-width: 18px; text-align: center;
}

/* ── סל השחזור ── */
.rc-list { max-height: 46vh; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.rc-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.rc-row:last-child { border-bottom: none; }
.rc-i { flex: 1; min-width: 0; }
.rc-i b { display: block; font-size: 14px; }
.rc-i span { font-size: 11.5px; color: var(--ink3); }
.rc-no { font-size: 11.5px; color: var(--ink3); flex: none; }

/* ── עורך הסטטוסים ──
   המספר ליד כל סטטוס הוא לא קישוט: בלעדיו אין דרך לדעת מה עומדים לשבור. */
.st-list { max-height: 42vh; overflow-y: auto; margin: 0 -6px 8px; padding: 0 6px; }
.st-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 0; border-bottom: 1px solid var(--line);
}
.st-row:last-child { border-bottom: none; }
.st-hex {
  width: 32px; height: 28px; border: none; background: none;
  cursor: pointer; padding: 0; flex: none;
}
.st-label {
  flex: 1; min-width: 0; background: var(--bg2); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 10px; font-size: 13px; color: var(--ink);
}
.st-label:focus { outline: none; border-color: var(--accent); }
.st-n {
  font-family: var(--font-num); font-size: 11px; flex: none;
  background: var(--surface3); color: var(--ink2);
  border-radius: 99px; padding: 1px 9px;
}
.st-done-l {
  display: flex; align-items: center; gap: 4px; flex: none;
  font-size: 11px; color: var(--ink3);
}
.st-done-l input { accent-color: var(--won); }
.st-del { flex: none; color: var(--lost); padding: 3px 7px; font-size: 13px; opacity: .7; }
.st-del:hover { opacity: 1; }
.st-add { width: 100%; margin-bottom: 4px; }

.st-moves {
  background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: 10px; padding: 9px 12px; margin-bottom: 10px;
}
.st-mv {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink2); padding: 2px 0;
}
.st-mv b { color: var(--ink); }
.st-mv-x {
  margin-inline-start: auto; font-size: 11px; color: var(--ink3);
  border: 1px solid var(--line2); border-radius: 7px; padding: 1px 8px;
}
.st-mv-x:hover { color: var(--ink); }
.rc-kind {
  font-size: 10px; font-weight: 400; color: var(--accent);
  background: var(--accent-soft); border-radius: 99px;
  padding: 1px 8px; margin-inline-start: 6px; vertical-align: 1px;
}

/* ── משתמשי הצוות ── */
.us-list { max-height: 42vh; overflow-y: auto; margin: 0 -6px 12px; padding: 0 6px; }
.us-row {
  display: grid; grid-template-columns: 1fr 92px 1fr auto 26px;
  gap: 10px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
@media (max-width: 700px) {
  .us-row { grid-template-columns: 1fr auto; }
  .us-what, .us-seen { display: none; }
}
.us-row.off { opacity: .5; }
.us-main { min-width: 0; }
.us-name {
  width: 100%; background: var(--bg2); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 10px; font-size: 13px; color: var(--ink);
}
.us-name:focus { outline: none; border-color: var(--accent); }
.us-phone {
  display: block; font-size: 11px; color: var(--ink3); margin-top: 3px;
  font-family: var(--font-num); direction: ltr; unicode-bidi: isolate;
}
/* בלי נייד אין כניסה. זו התקלה שמאור נתקל בה, ולכן היא כתובה ולא מרומזת. */
.us-phone.missing {
  color: var(--lost); font-family: inherit; direction: rtl; font-weight: 600;
}
.us-row select {
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 7px; font-size: 12px; color: var(--ink);
}
.us-row select:disabled { opacity: .55; }
.us-what { font-size: 11px; color: var(--ink3); }
.us-seen { font-size: 11px; color: var(--ink3); white-space: nowrap; }
.us-seen.never { color: var(--prog); }
.us-act input { accent-color: var(--won); }

.us-add { display: flex; gap: 8px; flex-wrap: wrap; }
.us-add input, .us-add select {
  background: var(--surface); border: 1px solid var(--line2);
  border-radius: 9px; padding: 8px 12px; font-size: 13px; color: var(--ink);
}
.us-add #uName { flex: 1; min-width: 110px; }
.us-add #uPhone { width: 140px; }

/* ── מסך הכניסה ── */
.login-logo {
  display: block; margin: 0 auto 14px; width: 150px; height: auto;
  border-radius: 8px;
}
/* מסך הכניסה לא מסגיר אם המספר מוכר — הגנה מכוונת. המחיר הוא שמי
   שהקליד מספר שגוי מחכה לקוד שלא יגיע; זו התשובה, בלי להסגיר דבר. */
.login-help {
  margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line);
}
.login-help summary {
  font-size: 12.5px; color: var(--ink3); cursor: pointer;
  list-style: none; text-align: center;
}
.login-help summary::-webkit-details-marker { display: none; }
.login-help summary:hover { color: var(--accent); }
.login-help p {
  font-size: 12px; color: var(--ink3); line-height: 1.7;
  margin-top: 9px; text-align: start;
}

/* ═══ מסך צר ═══
   הכלל: שום אלמנט לא מרחיב את הדף. מה שרחב מטבעו — טבלה, סרגל פעולות —
   גולל בתוך עצמו, ולא גורר איתו את כל המסך.
   הבעיה שהייתה: `table{min-width:820px}` נכתב לטבלת הלידים (שיושבת
   בתוך .tablewrap שגולל) אבל חל גם על הטבלאות בסקירה ובמסך העסק, שאין
   להן מעטפת — ולכן כל מסך שיש בו טבלה נמתח ל-820px. */

.hq-tb, .c-tb { display: block; overflow-x: auto; }
.hq-tb thead, .hq-tb tbody, .c-tb thead, .c-tb tbody { display: table; width: 100%; }
.hq-tb th, .c-tb th, .hq-tb td, .c-tb td { white-space: nowrap; }
.hq-tb td:first-child, .c-tb td:first-child {
  white-space: normal; min-width: 130px;
}

/* "⋯" הוא פקד של טלפון בלבד. במסך רחב כל הפעולות נכנסות בשורה. */
#btnMoreActs{display:none}

@media (max-width: 620px) {
  /* שורת הפעולות בראש מסך העסק — שמונה כפתורים שלא נכנסים.
     גוללת לצדדים במקום להישבר. */
  .ch-actions {
    overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px;
    scrollbar-width: none; margin-inline: -16px; padding-inline: 16px;
  }
  .ch-actions::-webkit-scrollbar { display: none; }
  .ch-actions .btn { flex: none; }

  .filterbar { gap: 5px; }
  .filterbar .f-search { min-width: 100%; order: -1; }
  .f-spacer { display: none; }

  .content, .client-head { padding-inline: 14px; }
  .hq-strip { gap: 8px 14px; font-size: 12px; }
  .hq-strip b { font-size: 16px; }
  .hq-setup, .c-kpis { gap: 6px; }
  .c-row { grid-template-columns: 9px 1fr 34px 26px; }
  .c-row .c-t { display: none; }

  /* טבלאות במסך צר: פחות ריפוד, וטיפוגרפיה קטנה יותר */
  .hq-tb th, .hq-tb td, .c-tb th, .c-tb td { padding: 8px 10px; font-size: 12px; }

  /* מודאלים תופסים כמעט את כל המסך, אחרת הם צרים מדי לעריכה */
  .modal { padding: 18px 16px; }
  .us-row { grid-template-columns: 1fr auto auto; }
  .col-row { flex-wrap: wrap; }
  .col-row .cl-title { flex-basis: 100%; }
  .st-row { flex-wrap: wrap; }
  .st-label { flex-basis: 60%; }
}

/* מודאל ארוך (18 סטטוסים) חרג מהמסך בלי דרך לגלול — הוא position:fixed. */
.modal { max-height: 90vh; overflow-y: auto; }

/* רשת ביטחון אחרונה: אם משהו בכל זאת חורג, הוא גולל בתוך המעטפת
   ולא מזיז את גוף העמוד. */
.main, .p-main { overflow-x: hidden; }

/* ── קיפול הסרגל במסך צר ──
   49 עסקים תפסו חצי מסך לפני שהגעת לתוכן. בדסקטופ הכפתור לא קיים. */
.side-toggle { display: none; }
.side-body { display: contents; }

@media (max-width: 900px) {
  .side-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; background: var(--surface); border: 1px solid var(--line);
    border-radius: 10px; padding: 10px 14px; font-size: 14px; color: var(--ink);
    font-weight: 600;
  }
  .side-toggle:hover { border-color: var(--accent); }
  .side-toggle .chev { color: var(--ink3); font-size: 11px; transition: transform .15s; }
  .side.open .side-toggle .chev { transform: rotate(180deg); }
  .side-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .side-body { display: none; flex-direction: column; gap: 10px; }
  .side.open .side-body { display: flex; }
  .side { max-height: none; }
  .side.open { max-height: 80vh; overflow-y: auto; }
  .client-nav { max-height: 46vh; }
}

/* ── מרכז השליטה: התראה מרוכזת וכרטיסי מדד (פרקים 32–33) ─────────────── */
.dec{display:flex;gap:var(--sp4);align-items:flex-start;background:var(--surface);border:1px solid var(--accent-t3);
  border-radius:var(--r);padding:var(--sp4) var(--sp5);margin:var(--sp4) 0;box-shadow:var(--sh1)}
.dec>i{font-style:normal;flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--accent);color:var(--on-accent);font-family:var(--font-num);font-size:17px;font-weight:600}
.dec.ok{border-color:var(--line)}
.dec.ok>i{background:var(--won-vivid);color:#04231A}
.dec b{display:block;font-size:16px;margin-bottom:2px}
.dec>div>span{font-size:13px;color:var(--ink3)}
.dec-b{flex:1;min-width:0}
.dec-list{display:flex;flex-direction:column;gap:var(--sp1);margin-top:var(--sp2)}
.dec-i{display:flex;align-items:center;gap:var(--sp2);width:100%;text-align:right;padding:7px 10px;border-radius:var(--r-ctl);
  border:1px solid transparent;font-size:13.5px}
.dec-i:hover{background:var(--surface2);border-color:var(--line2)}
.dec-k{flex:none;font-size:11.5px;padding:2px 9px;border-radius:99px;background:var(--surface2);color:var(--ink2)}
.dec-k.urgent,.dec-k.control{background:var(--lost-t2);color:var(--lost)}
.dec-k.request{background:var(--accent-t2);color:var(--accent)}
.dec-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dec-c{color:var(--ink3);font-size:12.5px;flex:none}
.dec-w{margin-inline-start:auto;color:var(--ink3);font-size:12px;flex:none}
.dec-more{margin-top:var(--sp2);font-size:13px;color:var(--accent)}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp3);margin-bottom:var(--sp4)}
@media (max-width:1279px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp4) var(--sp4) var(--sp3);
  text-align:right;transition:border-color .16s,transform .16s}
.kpi:hover{border-color:var(--accent);transform:translateY(-1px)}
.kpi b{display:block;font-family:var(--font-num);font-size:var(--fs-kpi);font-weight:500;line-height:1.05;color:var(--ink)}
.kpi span{font-size:13px;color:var(--ink3)}
.kpi.sev b{color:var(--lost)}
.kpi.bad b{color:var(--lost)}
@media (prefers-reduced-motion:reduce){.kpi:hover{transform:none}}

/* שלושה מספרים ולא ארבעה — ולכל אחד פילוח קטן שעונה על "אצל מי" ו"מי",
   כי מספר בלי חלוקה שולח אותך לחפש את הפירוט במסך אחר. */
.kpis-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1279px){.kpis-3{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){.kpis-3{grid-template-columns:1fr}}
.kpi-split{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:8px;
  padding-top:8px;border-top:1px solid var(--line)}
.kpi-split span{font-size:12.5px;color:var(--ink3);display:inline-flex;gap:4px;align-items:baseline}
.kpi-split i{font-style:normal;font-family:var(--font-num);font-weight:600;color:var(--ink2)}

/* ── ניהול לקוחות: עריכה מהשורה ─────────────────────────────────────── */
.st-cell{white-space:nowrap}
.manage-table select.tst{width:168px;text-overflow:ellipsis}
select.tst.st-active{background:color-mix(in srgb,var(--won) 15%,transparent);color:var(--won)}
select.tst.st-pending,select.tst.st-suspended{background:color-mix(in srgb,var(--prog) 15%,transparent);color:var(--prog)}
select.tst.st-inactive{background:var(--surface3);color:var(--ink3)}
select.tst.st-prospect{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.bud-btn{display:flex;flex-wrap:wrap;gap:4px 8px;text-align:start}
.bud i{font-style:normal;color:var(--ink3);font-size:11.5px}

.sc-all-ck{margin:2px 0 8px}

/* הסינונים הפעילים במסך ריק, בשמות ולא במספר */
.f-active{list-style:none;margin:8px auto 10px;padding:0;display:flex;gap:7px;
  flex-wrap:wrap;justify-content:center;max-width:520px}
.f-active li{font-size:12.5px;background:var(--surface3);color:var(--ink2);
  border-radius:99px;padding:3px 11px}
.f-clash{color:var(--prog);font-size:13px;max-width:520px;margin:0 auto 10px}

.nav-bfold{display:flex;align-items:center;gap:7px;width:100%;
  margin:6px 0 3px;padding:5px 8px;border:0;border-radius:8px;
  background:transparent;color:var(--ink3);font:inherit;font-size:11px;
  font-weight:600;letter-spacing:.05em;cursor:pointer;text-align:start}
.nav-bfold:hover{background:var(--surface2);color:var(--ink2)}
.nav-bfold .nf-n{font-size:10.5px}

/* קיפול קבוצות בסרגל העסקים: "בטיפול שלי" מול "לקוחות נוספים" */
.nav-fold{display:flex;align-items:center;gap:8px;width:100%;
  margin:12px 0 5px;padding:7px 9px;border:0;border-radius:9px;
  background:transparent;color:var(--ink3);font:inherit;font-size:11.5px;
  font-weight:600;letter-spacing:.06em;cursor:pointer;text-align:start}
.nav-fold:hover{background:var(--surface2);color:var(--ink2)}
.nav-fold.open .nf-t{color:var(--ink2)}
.nf-caret{font-size:13px;line-height:1;width:10px}
.nf-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nf-n{font-family:var(--font-num);font-size:11px;background:var(--surface3);
  color:var(--ink3);border-radius:99px;padding:1px 7px;letter-spacing:0}

/* ── שלוש הקבוצות של ניהול הלקוחות ─────────────────────────────────────
 *
 * דולב, 14/09/2026: "לקוחות פעילים ירוק, בהשעייה כתום, לא פעילים אדום".
 *
 * הצבע יושב על כותרת הקבוצה ועל שדרת הטבלה שמתחתיה, ולא על השורות
 * עצמן: רשימה שכל שורה בה צבועה מאבדת את הצבע כמידע, ובקבוצת הפעילים
 * זה היה חמישים שורות ירוקות שלא אומרות כלום.
 */
.mg-grp{--g:var(--ink3)}
.mg-live{--g:var(--won)}
.mg-hold{--g:var(--prog)}
.mg-off{--g:var(--lost)}

.mg-fold{display:flex;align-items:center;gap:9px;width:100%;margin-top:10px;
  padding:10px 13px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface2);color:var(--ink2);font:inherit;font-size:13.5px;
  font-weight:500;cursor:pointer;text-align:start;
  border-inline-start:4px solid var(--g)}
.mg-fold:hover{border-color:var(--line2);border-inline-start-color:var(--g)}
.mg-fold-t{color:var(--g);font-weight:700}
.mg-caret{color:var(--g);font-size:15px;line-height:1}
.mg-fold-n{margin-inline-start:auto;font-family:var(--font-num);font-size:12px;
  background:color-mix(in srgb,var(--g) 16%,transparent);color:var(--g);
  border-radius:99px;padding:1px 9px;font-weight:600}
/* שדרה דקה בצבע הקבוצה לאורך הטבלה, כדי שגם אחרי גלילה יהיה ברור
   באיזו קבוצה אתה נמצא. */
.mg-grp .tablewrap{border-inline-start:3px solid color-mix(in srgb,var(--g) 55%,transparent)}

/* עורך התקציב */
.bud-row{display:grid;grid-template-columns:1.1fr 1.2fr .9fr .6fr .8fr auto;gap:7px;
  align-items:center;margin-bottom:8px}
.bud-row select,.bud-row input{background:var(--surface2);border:1px solid var(--line);
  border-radius:var(--r-ctl);padding:8px 10px;font:inherit;font-size:14px;color:var(--ink);min-height:40px}
.bud-row .bud-other[hidden]{display:none}
@media (max-width:760px){.bud-row{grid-template-columns:1fr 1fr;gap:8px}
  .bud-row .bud-del{grid-column:2;justify-self:end}}
.m-title{margin:0 0 4px;font-size:18px}
.m-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}

/* ── פרק 35: כרטיס מדד שנפתח ─────────────────────────────────────────── */
.c-k.drillable{cursor:pointer;transition:border-color .16s,transform .16s}
.c-k.drillable:hover{border-color:var(--accent);transform:translateY(-1px)}
.c-k.drillable:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.c-k.drillable::after{content:'⌄';position:absolute;inset-inline-start:10px;top:8px;color:var(--ink3);font-size:12px}
.c-k{position:relative}
@media (prefers-reduced-motion:reduce){.c-k.drillable:hover{transform:none}}
.comp-t{width:100%;border-collapse:collapse;margin-top:6px}
.comp-t td{padding:9px 4px;border-bottom:1px solid var(--line);font-size:14px}
.comp-t td.n{text-align:left;font-family:var(--font-num);color:var(--ink)}
.comp-note{margin-top:12px;color:var(--ink3);font-size:12.5px;line-height:1.6}

/* ── פרק 36: מצבי מסך ────────────────────────────────────────────────────
 * "טעינה: שלד של המבנה האמיתי, ולא גלגל מסתובב על מסך ריק." השלד מראה
 * כמה שורות יגיעו ובאיזה מבנה, כך שהמסך לא קופץ כשהנתונים נכנסים. */
.skel{display:flex;flex-direction:column;gap:10px;padding:14px 0}
.skel i{display:block;height:14px;border-radius:7px;background:linear-gradient(90deg,var(--surface2),var(--surface3),var(--surface2));
  background-size:200% 100%;animation:skel 1.4s ease-in-out infinite}
.skel .row{display:flex;gap:10px;align-items:center}
.skel .row i:first-child{flex:2}
.skel .row i{flex:1}
.skel .card{height:74px;border-radius:var(--r)}
.skel-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel i{animation:none}}

/* אין נתונים / אין תוצאה לסינון / שגיאת חיבור — שלושה מצבים שונים,
 * ולכן שלוש הודעות שונות. "אין תוצאות" שנראה כמו "אין נתונים" גורם
 * למשתמש לחשוב שהמערכת ריקה במקום שהסינון צר מדי. */
.state{padding:34px 22px;text-align:center;color:var(--ink2);max-width:520px;margin:0 auto}
.state b{display:block;font-size:16px;color:var(--ink);margin-bottom:6px}
.state p{font-size:13.5px;color:var(--ink3);line-height:1.65}
.state .btn{margin-top:14px}
.state.err b{color:var(--lost)}
.state .when{font-size:12px;color:var(--ink3);margin-top:8px}

/* ── תגית הסטטוס (אפשרות 3 שנבחרה, 08/09/2026) ────────────────────────
 * רקע בגוון בהיר של הצבע וטקסט בצבע עצמו. הרקע והמסגרת מגיעים מ-stStyle
 * ב-tasks.js, כי הצבע נשמר במסד וכל עובד יכול לשנות אותו. */
select.tst,span.tst{display:inline-block;max-width:100%;padding:4px 12px;border-radius:8px;border:1px solid transparent;
  font:inherit;font-size:12px;font-weight:500;line-height:1.5;white-space:nowrap;text-overflow:ellipsis;
  appearance:none;-webkit-appearance:none;cursor:pointer}
select.tst:hover{filter:brightness(.97)}
select.tst:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
select.tst option,select.tst optgroup{background:var(--surface);color:var(--ink);font-weight:400}
select.tst optgroup{font-size:11.5px;color:var(--ink3)}
/* פס התמהיל מתחת לקבוצה — כמה מכל סטטוס, במבט אחד */
.tb-tally{display:flex;height:6px}
.tb-tally i{display:block;height:100%}


/* ── הלוגו במקום ריבוע "IM" (08/09/2026) ─────────────────────────────── */
.brand{flex-direction:column;align-items:flex-start;gap:2px}
.brand-logo{width:132px;height:auto;max-width:100%;display:block;border-radius:7px}
.brand .brand-ws{font-size:10px;letter-spacing:.16em;color:var(--ink3);text-transform:uppercase}
.brand .brand-sub{font-size:11.5px;color:var(--ink3)}

/* ── בורד המשימות: צפיפות, לא גלילה (08/09/2026) ────────────────────────
 *
 * הניסיון הקודם נתן לכל קבוצה חלון גולל משלה. זה היה נוח לעין ולא נוח
 * לעבודה: כל קבוצה הפכה לקופסה קטנה שצריך לגלול בתוכה. הפעם היחס מצטמצם
 * במקום להיחתך — שורה נמוכה יותר, מרווח עמודות קטן יותר, כותרת קבוצה
 * דקה, ושורת עמודות אחת לכל הבורד במקום אחת לכל קבוצה. התוצאה: יותר
 * שורות אמיתיות על אותו מסך, בלי אף סרגל גלילה פנימי.
 *
 * רוחבי העמודות זהים בכל הקבוצות (table-layout: fixed + אותם ערכים
 * בשורת הכותרות), אחרת כל קבוצה מיישרת את עצמה והבורד נראה שבור.
 */
:root{
  --tb-sel:30px; --tb-title:560px; --tb-st:172px; --tb-made:76px; --tb-prio:56px;
  --tb-pad-x:10px; --tb-pad-y:6px;
}
.tb-groups{padding:0 24px 32px}

/* שורת העמודות — אחת לכל הבורד, נדבקת למעלה בגלילה של הדף */
/* עמודת השם מוגבלת ברוחב והשארית נופלת בקצה — בלי זה נפער רווח באמצע
   השורה במסך רחב, והעין צריכה לקפוץ מהשם אל הסטטוס. */
.tb-cols{display:grid;
  grid-template-columns:var(--tb-sel) minmax(0,var(--tb-title)) var(--tb-st) var(--tb-made) var(--tb-prio) minmax(0,1fr);
  position:sticky;top:0;z-index:5;background:var(--bg);padding:7px 0 6px;margin-bottom:2px;
  border-bottom:1px solid var(--line2)}
.tb-cols span{font-size:10.5px;letter-spacing:.06em;color:var(--ink3);padding:0 var(--tb-pad-x)}

.tb-sec{margin-bottom:8px}
.tb-sech{display:flex;align-items:center;gap:8px;width:100%;text-align:right;padding:5px 10px;border-radius:8px;
  border:0;border-inline-start:3px solid var(--gc,var(--accent));
  font:inherit;font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.5}
/* פס ורקע רך: הצבע מסמן את הקבוצה בלי לצעוק. 10% הוא הסף שבו הרקע
   נקרא כגוון ולא כשטח צבע — מעליו הכותרת מתחילה להתחרות בסטטוסים. */
.tb-sech{background:color-mix(in srgb, var(--gc,var(--accent)) 10%, transparent)}
.tb-sech:hover{background:color-mix(in srgb, var(--gc,var(--accent)) 18%, transparent)}
.tb-sech .t{color:color-mix(in srgb, var(--gc,var(--accent)) 52%, var(--ink))}
.tb-sech:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.tb-sech .chev{color:var(--ink3);font-size:11px;width:10px;flex:none}
.tb-sech .n{font-family:var(--font-num);font-size:11px;padding:0 7px;border-radius:99px;background:color-mix(in srgb, var(--gc,var(--accent)) 18%, transparent);color:color-mix(in srgb, var(--gc,var(--accent)) 78%, var(--ink))}
.tb-sech .hint{margin-inline-start:auto;font-size:11.5px;color:var(--ink3);font-weight:400}
.tb-sec .tablewrap{margin:0;overflow-x:auto}
.tb-empty{padding:7px 14px;color:var(--ink3);font-size:12.5px}

/* השורות עצמן — הצפיפות האמיתית */
.tasks-table{table-layout:fixed;border-collapse:separate;border-spacing:0;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tasks-table thead{display:none}                  /* הכותרות מופיעות פעם אחת למעלה */
.tasks-table td{padding:var(--tb-pad-y) var(--tb-pad-x);border-bottom:1px solid var(--line);
  font-size:13px;line-height:1.45}
.tasks-table tr:last-child td{border-bottom:0}
.tasks-table tr.task:hover td{background:var(--surface2)}
.tasks-table{width:100%}
col.c-sel{width:var(--tb-sel)}
col.c-title{width:var(--tb-title)}
col.c-st{width:var(--tb-st)}
col.c-made{width:var(--tb-made)}
col.c-prio{width:var(--tb-prio)}
col.c-fill{width:auto}
.tk-sel{padding-inline:5px}
.tk-made{font-family:var(--font-num);font-size:11.5px;color:var(--ink3);white-space:nowrap}
.tk-title{font-weight:500}
/* שם המשימה ופרטי המשנה על שורה אחת — זה מה שחוסך את מחצית הגובה */
.tk-title .link-name{font:inherit;font-weight:500;text-align:start}
.tk-sub{display:inline;margin:0 8px 0 0;font-size:11.5px;color:var(--ink3);white-space:nowrap}
.tk-sub b{color:var(--accent);font-weight:500}
.tasks-table td.tk-st{padding:var(--tb-pad-y) var(--tb-pad-x)}

.prio{font-size:11.5px}
.tb-tally{height:4px;border-radius:0 0 10px 10px;overflow:hidden;margin-top:-1px}

@media (max-width:760px){
  .tb-groups{padding:0 12px 40px}
  .tb-cols{display:none}                          /* בכרטיסים אין עמודות */
  .tasks-table{border:0;background:transparent;border-radius:0}
  .tasks-table td{font-size:14px}
  .tk-sub{display:block;margin:3px 0 0;white-space:normal}
  .tb-tally{display:none}
  /* בכרטיס אין עמודות, ולכן הרוחב נקבע לפי התוכן ולא לפי הטבלה */
  .tasks-table.resp td.tk-st{padding:3px 0}
  .tasks-table.resp select.tst,.tasks-table.resp span.tst{padding:8px 14px;font-size:13px;border-radius:9px}
  .tasks-table.resp td.tk-made,.tasks-table.resp td.tk-prio{width:auto}
  .tasks-table.resp td.tk-fill{display:none}
  .tb-sech{padding:9px 10px;font-size:15px}
  .tb-sech .hint{display:none}                    /* אין רוחב, והמספר כבר אומר את זה */
}
.mg-chips .mg-gap{flex:1}

/* ── פרק 37: כרטיס המשימה (דולב, 09/09/2026) ──────────────────────────── */
/* שם המשימה הוא הדבר היחיד בגודל הזה בכרטיס, ומתחתיו שורת התאריכים בקטן. */
.tk-head{align-items:flex-start;gap:12px}
.tk-head-txt{min-width:0}
.tk-h1{margin:0;font-size:19px;line-height:1.3;font-weight:600;
  overflow-wrap:anywhere;text-wrap:balance}
.tk-h-meta{margin-top:4px;font-size:11.5px;color:var(--ink3);
  font-family:var(--font-num);letter-spacing:.01em}
.tk-h-meta i{font-style:normal;opacity:.45;padding:0 5px}

/* "מתי לחזור לזה": שלושה לחצנים ולא שלושה שדות תאריך זהים */
.tk-when{display:flex;flex-wrap:wrap;gap:7px}
.chipb{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;
  border:1px solid var(--line2);border-radius:99px;background:var(--surface);
  color:var(--ink2);font:inherit;font-size:12.5px;cursor:pointer;
  white-space:nowrap;flex:0 0 auto;
  transition:border-color .14s,background .14s,color .14s}
.chipb:hover{border-color:var(--accent);color:var(--ink)}
.chipb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chipb.on{border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent)}
.chipb.danger{border-color:color-mix(in srgb,var(--bad) 55%,transparent);
  background:color-mix(in srgb,var(--bad) 11%,transparent);color:var(--bad)}
.pop-quick{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.pop-quick .chipb{padding:5px 10px;font-size:12px}

/* קבצים: שורה אחת לכל קובץ, האייקון אומר מה זה בלי לקרוא סיומת */
.tk-up{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px}
.tk-files{display:flex;flex-direction:column;gap:2px}
.tk-file{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:8px;
  background:var(--surface2);font-size:13px}
.tk-file:hover{background:var(--surface3)}
.tk-file a{display:flex;align-items:center;gap:7px;min-width:0;color:var(--ink);
  text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-file a:hover{text-decoration:underline}
.tk-file .tk-fi{flex:none;font-size:14px;line-height:1}
.tk-file .c-hint{margin-inline-start:auto;white-space:nowrap;font-size:11px}
.tk-file .mini{flex:none}

/* ה-UPDATE כציר זמן: קו אחד, נקודה לכל עדכון, החדש למעלה */
.tk-upd-h{display:flex;align-items:baseline;gap:9px}
.tl{list-style:none;margin:10px 0 0;padding:0;position:relative}
.tl::before{content:'';position:absolute;inset-block:6px;inset-inline-start:4px;
  width:2px;background:var(--line)}
.tl-i{position:relative;padding-inline-start:18px;padding-block-end:14px}
.tl-i:last-child{padding-block-end:2px}
.tl-dot{position:absolute;inset-inline-start:0;top:5px;width:9px;height:9px;
  border-radius:99px;background:var(--accent);box-shadow:0 0 0 3px var(--surface)}
.tl-i.auto .tl-dot,.tl-i.system .tl-dot{background:var(--line2)}
.tl-i.partial .tl-dot{background:var(--prog)}
.tl-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;font-size:12px}
.tl-h b{font-size:12.5px}
.tl-h span{color:var(--ink3);font-size:11px;font-family:var(--font-num)}
.tl-t{margin-top:3px;font-size:13.5px;line-height:1.5;white-space:pre-wrap;
  overflow-wrap:anywhere}
.tl-i.auto .tl-t,.tl-i.system .tl-t{color:var(--ink2)}
.d-foot-more{display:flex;gap:6px;flex-wrap:wrap}

/* שורה ממוזערת שמנה יותר (אישור דולב 1ב): המרווח האנכי גדל, השם עולה
   לשורה משלו והפרטים יורדים מתחתיו — במקום הכל צפוף בשורה אחת. */
.tasks-table td{--tb-pad-y:9px}
.tk-title .link-name{display:block}
.tk-sub{display:block;margin:2px 0 0;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
@media (max-width:760px){
  .tk-h1{font-size:17px}
  .tk-file .c-hint{display:none}
  .tk-when .chipb{flex:1 1 auto;justify-content:center}
}

/* פרטי הפגישה בכרטיס: חמישה שדות, תווית קטנה וערך מודגש */
.meet-box{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;padding:11px 13px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface2);margin-bottom:9px}
.meet-box div{display:flex;flex-direction:column;gap:2px;min-width:0}
.meet-box span{font-size:11px;color:var(--ink3)}
.meet-box b{font-size:13.5px;font-weight:500;overflow-wrap:anywhere}
.meet-note{grid-column:1/-1}
.meet-note b{font-weight:400;line-height:1.5;white-space:pre-wrap}
.tk-time{font-family:var(--font-num);font-size:12.5px;color:var(--ink2)}
/* בפגישות העמודה האחרונה נושאת שעה ולא סמל עדיפות, וצריכה את הרוחב */
.tasks-table.meets{--tb-prio:64px}
.tasks-table.meets td.tk-time{white-space:nowrap;overflow:visible}

/* ── בקשת עריכה: ארבעת אזורי הקבצים (דולב, 09/09/2026) ────────────────── */
.ed-stbox{display:inline-flex;align-items:center;padding:7px 14px;border-radius:99px;
  font-size:13px;font-weight:500;color:var(--sc);
  background:color-mix(in srgb,var(--sc) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--sc) 35%,transparent)}
.ed-ro{padding:7px 0;font-size:13.5px;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips .chipb[disabled]{cursor:default;opacity:.75}

.sl{margin-bottom:14px}
.sl label{display:flex;align-items:center;gap:7px}
.sl-n{font-family:var(--font-num);font-size:11px;padding:0 7px;border-radius:99px;
  background:var(--surface3);color:var(--ink3)}
.sl-list{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
.sl-list:empty{display:none}
.sl-i{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:8px;
  background:var(--surface2);font-size:13px}
.sl-i:hover{background:var(--surface3)}
.sl-i a{display:flex;align-items:center;gap:7px;min-width:0;color:var(--ink);
  text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-i a:hover{text-decoration:underline}
.sl-i .c-hint{margin-inline-start:auto;white-space:nowrap;font-size:11px}
/* אזור ההפלה: קו מקווקו שאומר "אפשר לגרור לכאן" בלי לצעוק */
.sl-drop{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;
  border:1px dashed var(--line2);border-radius:10px;background:var(--surface2);
  font-size:12px;color:var(--ink3);transition:border-color .14s,background .14s}
.sl-drop.over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.sl-drop > span{margin-inline-end:auto}
.sl-drop .chipb{padding:5px 11px;font-size:12px}
@media (max-width:760px){
  .sl-drop{flex-direction:column;align-items:stretch}
  .sl-drop > span{margin:0 0 2px}
  .sl-drop .chipb{justify-content:center}
}

/* ── פרק 38: טבלאות הסקירה — נציגים ותקיעות (דולב, 09/09/2026) ────────── */
.c-tbl{width:100%;border-collapse:separate;border-spacing:0;margin:4px 0 20px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  overflow:hidden;font-size:13px}
.c-tbl th{position:sticky;top:0;background:var(--surface2);color:var(--ink3);
  font-size:11px;font-weight:600;letter-spacing:.02em;text-align:start;
  padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.c-tbl td{padding:9px 10px;border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums;white-space:nowrap;vertical-align:middle}
.c-tbl tr:last-child td{border-bottom:0}
.c-tbl tbody tr:hover td{background:var(--surface2)}
.c-tbl td.bad{color:var(--bad);font-weight:600}
.c-tbl td.warn{color:var(--prog);font-weight:500}
/* עמודת ההתנגדויות היא הרחבה, והיא היחידה שנשברת לשורות */
.c-tbl td:last-child{white-space:normal}
.c-chip.sm{--g:var(--line2);padding:2px 8px;font-size:11px;gap:5px;
  margin:1px 0;display:inline-block}
/* פס יחסי בעמודה האחרונה של טבלת התקיעות */
.c-tbl td.bar-cell{width:110px;padding-inline-end:12px}
.c-bar{display:block;height:6px;border-radius:99px;min-width:3px;
  background:linear-gradient(90deg,var(--prog),var(--bad))}
@media (max-width:760px){
  /* טבלה שנעשית כרטיסים: התווית מגיעה מ-data-label שכבר על כל תא */
  .c-tbl.resp,.c-tbl.resp tbody,.c-tbl.resp tr,.c-tbl.resp td{display:block;width:auto}
  .c-tbl.resp thead{display:none}
  .c-tbl.resp{border:0;background:transparent}
  .c-tbl.resp tr{background:var(--surface);border:1px solid var(--line);
    border-radius:10px;margin-bottom:8px;padding:4px 2px}
  .c-tbl.resp td{display:flex;justify-content:space-between;gap:12px;
    border-bottom:1px solid var(--line);white-space:normal}
  .c-tbl.resp tr td:last-child{border-bottom:0}
  .c-tbl.resp td::before{content:attr(data-label);color:var(--ink3);font-size:11.5px;
    flex:none}
  .c-tbl.resp td.bar-cell{display:none}
}

/* ── פרק 39: קבוצות בטבלת הלידים ובאנר הפגישות (דולב, 09/09/2026) ─────── */
/* אותו רעיון של בורד המשימות: הצבע על הכותרת בלבד, השורות נשארות נקיות. */
.lg-h td{position:relative;height:54px;padding:0;border-bottom:0;background:transparent}
.lg-wrap{position:absolute;inset:14px 0 0;display:flex}
.lg-b{display:flex;align-items:center;gap:9px;flex:1;
  padding:9px 12px;border:0;border-radius:9px 9px 0 0;
  border-inline-start:3px solid var(--gc);
  background:color-mix(in srgb,var(--gc) 9%,var(--surface));
  color:var(--ink);font:inherit;font-size:13.5px;font-weight:600;
  cursor:pointer;text-align:start}
.lg-b:hover{background:color-mix(in srgb,var(--gc) 15%,var(--surface))}
.lg-b:focus-visible{outline:2px solid var(--gc);outline-offset:-2px}
.lg-b .chev{color:color-mix(in srgb,var(--gc) 70%,var(--ink));font-size:11px;width:10px;flex:none}
.lg-b .n{font-family:var(--font-num);font-size:11px;padding:0 7px;border-radius:99px;
  background:color-mix(in srgb,var(--gc) 20%,transparent);
  color:color-mix(in srgb,var(--gc) 78%,var(--ink));font-weight:500}
.lg-b .hint{margin-inline-start:auto;font-size:11.5px;color:var(--ink3);font-weight:400}
.lgrp tr:not(.lg-h):last-child td{border-bottom:1px solid var(--line)}

/* הבאנר: פגישה שמתקיימת היום. נסגר ליום, לא לתמיד — מחר יש פגישה אחרת. */
.meet-banner{display:flex;align-items:center;gap:12px;margin:0 0 14px;
  padding:12px 15px;border-radius:11px;
  border:1px solid color-mix(in srgb,#7C3AED 35%,transparent);
  background:linear-gradient(90deg,
    color-mix(in srgb,#7C3AED 12%,var(--surface)),
    color-mix(in srgb,#7C3AED 4%,var(--surface)))}
.meet-banner .mb-ico{font-size:19px;line-height:1;flex:none}
.mb-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.mb-txt b{font-size:13.5px;color:#7C3AED}
.mb-txt span{font-size:12.5px;color:var(--ink2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.meet-banner .mini{margin-inline-start:auto;flex:none}
@media (max-width:760px){
  .meet-banner{align-items:flex-start}
  .mb-txt span{white-space:normal}
  .lg-b .hint{display:none}
  table.resp tr.lg-h{background:transparent;border:0;border-radius:0;
    margin:0;padding:0;box-shadow:none}
  table.resp .lg-h td{display:block;width:auto;height:auto;position:static;
    padding:0;border:0;margin:0;font-size:inherit;font-weight:400}
  table.resp .lg-h td::before{content:none}
  table.resp .lg-wrap{position:static;inset:auto;margin:14px 0 6px}
  table.resp .lg-b{border-radius:9px}
}

/* ── פרק 40: ראש הכרטיסים שנפתחים (דולב, 09/09/2026) ───────────────────
 *
 * שתי שפות, אחת לכל תמה — וזו לא גחמה. "כתר כהה" על דף לבן הוא בלוק כבד
 * באמצע המסך, וגרדיאנט סגול על רקע כמעט שחור צועק. כל אחת מתאימה לתמה
 * שבה נבחרה:
 *
 *   בהיר → רצועת מותג בראש הכרטיס, גוף לבן ורגוע מתחתיה.
 *   כהה  → כתר כהה עם הילה סגולה, כדי שהכרטיס ייבדל מהמסך שמאחוריו.
 *
 * שני המצבים חולקים את אותו מבנה, ולכן זה קובץ אחד ולא שני עיצובים.
 */
.d-h{position:relative;overflow:hidden}
.d-h .d-who b,.d-h .tk-h1,.d-h h2,.d-h h3{position:relative}
.d-h .d-sub,.d-h .tk-h-meta{position:relative}

/* המסמך נפתח בלי data-theme כשהמשתמש על "לפי המערכת" — ולכן הכהה הוא
   ברירת המחדל כאן, בדיוק כמו בשאר הקובץ. */
.d-h{background:var(--bg);border-bottom:1px solid var(--line)}
.d-h::after{content:'';position:absolute;inset-inline-start:-40px;top:-78px;
  width:200px;height:200px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,var(--accent-t3),transparent)}
.d-h .d-who b,.d-h .tk-h1{color:var(--ink)}
.d-h .d-sub,.d-h .tk-h-meta{color:var(--ink3)}
.d-foot{background:var(--bg);border-top:1px solid var(--line)}

/* ── פס הזהות: הכרטיס נפתח בצבע של העסק ──────────────────────────────
 *
 * דולב, 14/09/2026: "פס הזהות מעולה אבל הכוונה הייתה לאחר שלוחצים על
 * השורה של העסק, הכרטיסיה שנפתחת."
 *
 * לכל עסק יש כבר צבע משלו (clients.color), והוא מופיע כנקודה קטנה
 * ברשימה. כאן הוא נעשה לדבר הראשון שרואים: ראש הכרטיס בצבע העסק,
 * והשדרה של המגירה באותו צבע.
 *
 * ⚠ הכללים כאן נפתחים ב-:root כדי לגבור על רצועת המותג הסגולה
 * שמוגדרת מתחתיהם באותה ספציפיות בדיוק.
 *
 * ⚠ צבע הטקסט מחושב ב-JS לפי הבהירות של הצבע ולא נקבע כאן: בפלטה יש
 * גם ירוק בהיר וגם כחול כהה, ולבן קבוע היה נעלם על חלקם.
 */
.drawer.d-id{border-inline-end:4px solid var(--c)}
:root .drawer.d-id .d-h{
  background:linear-gradient(135deg,var(--c-head2),var(--c-head) 62%,var(--c-head));
  border-bottom-color:transparent}
:root .drawer.d-id .d-h::after{display:none}
:root .drawer.d-id .d-h .d-who b,
:root .drawer.d-id .d-h h2,:root .drawer.d-id .d-h h3,
:root .drawer.d-id .d-h .tk-h1{color:#fff}
:root .drawer.d-id .d-h .d-sub,:root .drawer.d-id .d-h .tk-h-meta{color:rgba(255,255,255,.80)}
:root .drawer.d-id .d-h .d-sub a{color:#fff;text-decoration:underline;text-underline-offset:3px}
:root .drawer.d-id .d-h .mini,:root .drawer.d-id .d-h .d-x{
  color:#fff;border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.14)}
:root .drawer.d-id .d-h .mini:hover,:root .drawer.d-id .d-h .d-x:hover{background:rgba(255,255,255,.24)}
/* כותרות המקטעים בגוף הכרטיס מקבלות קו קטן באותו צבע, כדי שהזהות
   תימשך גם אחרי שגוללים והראש יוצא מהמסך. */
.drawer.d-id .card-body .d-sec{border-inline-start:3px solid var(--c);
  padding-inline-start:9px}

/* ── בהיר: רצועת מותג ─────────────────────────────────────────────── */
:root[data-theme="light"] .d-h{
  background:linear-gradient(135deg,#5B21B6,#7C3AED 58%,#8B5CF6);
  border-bottom-color:transparent}
:root[data-theme="light"] .d-h::after{display:none}
:root[data-theme="light"] .d-h .d-who b,
:root[data-theme="light"] .d-h .tk-h1,
:root[data-theme="light"] .d-h h2,
:root[data-theme="light"] .d-h h3{color:#fff}
:root[data-theme="light"] .d-h .d-sub,
:root[data-theme="light"] .d-h .tk-h-meta{color:rgba(255,255,255,.78)}
:root[data-theme="light"] .d-h .d-sub a{color:#fff;text-decoration:underline;
  text-underline-offset:3px}
:root[data-theme="light"] .d-h .mini,
:root[data-theme="light"] .d-h .d-x{color:#fff;border-color:rgba(255,255,255,.45);
  background:rgba(255,255,255,.12)}
:root[data-theme="light"] .d-h .mini:hover,
:root[data-theme="light"] .d-h .d-x:hover{background:rgba(255,255,255,.22)}
:root[data-theme="light"] .d-h .pill{background:rgba(255,255,255,.16);color:#fff;
  border-color:rgba(255,255,255,.3)}
:root[data-theme="light"] .d-foot{background:var(--surface2)}

/* המודאל: אותה רצועה, בשוליים מלאים למרות ה-padding של החלון */
.modal > h3:first-child,.modal > .m-title:first-child{
  margin:-24px -26px 16px;padding:16px 26px 15px;position:relative;overflow:hidden;
  background:var(--bg);border-bottom:1px solid var(--line);
  border-radius:16px 16px 0 0;font-size:18px}
.modal > h3:first-child::after,.modal > .m-title:first-child::after{
  content:'';position:absolute;inset-inline-start:-40px;top:-78px;width:200px;height:200px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,var(--accent-t3),transparent)}
:root[data-theme="light"] .modal > h3:first-child,
:root[data-theme="light"] .modal > .m-title:first-child{
  background:linear-gradient(135deg,#5B21B6,#7C3AED 58%,#8B5CF6);
  border-bottom-color:transparent;color:#fff}
:root[data-theme="light"] .modal > h3:first-child::after,
:root[data-theme="light"] .modal > .m-title:first-child::after{display:none}

@media (max-width:760px){
  .modal > h3:first-child,.modal > .m-title:first-child{border-radius:18px 18px 0 0}
}

/* ── סטטוסים צבועים גם ברשימה שנפתחת (דולב, 09/09/2026) ────────────────
 * הצבע היה קיים רק אחרי הבחירה; הרשימה עצמה הייתה עשרים שורות שחורות.
 * בבורד המשימות הצבעים ניתנים לעריכה ולכן נכתבים מוטבעים; כאן הם קבועים
 * ונגזרים מהתמה, ולכן מחלקה. */
select.tst option.st-active{color:var(--won);background:color-mix(in srgb,var(--won) 12%,var(--surface))}
select.tst option.st-pending,
select.tst option.st-suspended{color:var(--prog);background:color-mix(in srgb,var(--prog) 12%,var(--surface))}
select.tst option.st-inactive{color:var(--ink3);background:var(--surface2)}
select.tst option.st-prospect{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
/* אופטגרופ ("העברת טיפול") נשאר ניטרלי — הוא כותרת ולא סטטוס */
select.tst optgroup{color:var(--ink3);background:var(--surface)}

/* ── פרק 41: תווית צפה בכל שדות הטופס (דולב, 09/09/2026 — אישור "ב") ───
 *
 * התווית יושבת בתוך השדה, ומתכווצת ועולה ברגע שיש בו תוכן או שהוא בפוקוס.
 * שני רווחים נחסכים — זה שבין התווית לשדה, וזה שבין שדה לשדה — ובעיקר:
 * גם כשהשדה מלא עדיין רואים למה הוא מיועד.
 *
 * שלושה סוגי שדות אינם צפים, כי אין להם מצב "ריק" שאפשר לזהות:
 * בורר, תאריך/שעה, ותווית שיש בתוכה כפתור. הם מקבלים תווית קטנה קבועה
 * למעלה — אותו מראה סופי, בלי האנימציה.
 */
/* ברירת המחדל: תווית קטנה וקבועה מעל השדה. */
.cf,.m-field{position:static;margin-bottom:12px}
.cf > label,.m-field > label{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  margin:0 0 5px;padding:0;font-size:12px;font-weight:400;color:var(--ink3);line-height:1.35}
.cf input,.cf select,.cf textarea,
.m-field input,.m-field select,.m-field textarea{
  width:100%;background:var(--surface);border:1px solid var(--line2);
  border-radius:11px;padding:10px 13px;font-size:14px;color:var(--ink);
  transition:border-color .16s,box-shadow .16s}
.cf textarea,.m-field textarea{line-height:1.55}
.cf input:focus,.cf select:focus,.cf textarea:focus,
.m-field input:focus,.m-field select:focus,.m-field textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent)}

/* התווית צפה רק כשהשדה עצמו הוא ילד ישיר של המסגרת — ורק אז יש "ריק"
 * ו"מלא" שאפשר להבחין ביניהם. קבוצת תיבות סימון, רשימת קישורים או תווית
 * שיש בה כפתור או הסבר נשארות עם התווית הקבועה שלמעלה. הכלל הוא הכללה
 * ולא החרגה, כי כל תבנית שלא חשבתי עליה נופלת לצד הבטוח. */
.cf:has(> input),.cf:has(> select),.cf:has(> textarea),
.m-field:has(> input),.m-field:has(> select),.m-field:has(> textarea){position:relative}
.cf:has(> input) > label,.cf:has(> select) > label,.cf:has(> textarea) > label,
.m-field:has(> input) > label,.m-field:has(> select) > label,.m-field:has(> textarea) > label{
  position:absolute;top:13px;inset-inline-end:13px;z-index:1;
  display:block;margin:0;font-size:14px;color:var(--ink3);
  pointer-events:none;transform-origin:right top;
  transition:transform .16s ease,color .16s ease}
.cf:has(> input) input,.cf:has(> select) select,.cf:has(> textarea) textarea,
.m-field:has(> input) input,.m-field:has(> select) select,.m-field:has(> textarea) textarea{
  padding:20px 13px 7px}
.cf:has(> textarea) textarea,.m-field:has(> textarea) textarea{padding-top:22px}

/* הרמז מופיע רק בפוקוס — אחרת הוא מתנגש בתווית שיושבת באותו מקום */
.cf:has(> input) input::placeholder,.cf:has(> textarea) textarea::placeholder,
.m-field:has(> input) input::placeholder,.m-field:has(> textarea) textarea::placeholder{color:transparent}
.cf:has(> input) input:focus::placeholder,.cf:has(> textarea) textarea:focus::placeholder,
.m-field:has(> input) input:focus::placeholder,.m-field:has(> textarea) textarea:focus::placeholder{
  color:var(--ink3);opacity:.6}

/* העלייה: בפוקוס, או כשיש תוכן */
.cf:has(> input):focus-within > label,.cf:has(> select):focus-within > label,
.cf:has(> textarea):focus-within > label,
.m-field:has(> input):focus-within > label,.m-field:has(> select):focus-within > label,
.m-field:has(> textarea):focus-within > label{
  transform:translateY(-9px) scale(.76);color:var(--accent)}
.cf:has(> input:not(:placeholder-shown)) > label,
.cf:has(> textarea:not(:placeholder-shown)) > label,
.m-field:has(> input:not(:placeholder-shown)) > label,
.m-field:has(> textarea:not(:placeholder-shown)) > label{
  transform:translateY(-9px) scale(.76)}

/* בורר, תאריך ושעה — אין להם מצב ריק, ולכן התווית שלהם קבועה למעלה */
.cf:has(> select) > label,.m-field:has(> select) > label,
.cf:has(> input[type="date"]) > label,.m-field:has(> input[type="date"]) > label,
.cf:has(> input[type="time"]) > label,.m-field:has(> input[type="time"]) > label,
.cf:has(> input[type="color"]) > label,.m-field:has(> input[type="color"]) > label{
  transform:translateY(-9px) scale(.76)}

/* תווית שיש בה כפתור או הסבר ארוך אינה צפה — היא לא תיכנס לשדה */
.cf:has(> label button),.m-field:has(> label button),
.cf:has(> label small),.m-field:has(> label small),
.cf.plain,.m-field.plain{position:static}
.cf:has(> label button) > label,.m-field:has(> label button) > label,
.cf:has(> label small) > label,.m-field:has(> label small) > label,
.cf.plain > label,.m-field.plain > label{
  position:static;transform:none;font-size:12px;color:var(--ink3);
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:5px;pointer-events:auto}
.cf:has(> label button) input,.cf:has(> label button) select,.cf:has(> label button) textarea,
.cf:has(> label small) input,.cf:has(> label small) select,.cf:has(> label small) textarea,
.m-field:has(> label small) input,.m-field:has(> label small) textarea,
.cf.plain input,.cf.plain select,.cf.plain textarea{padding:10px 13px}

/* שדה לקריאה בלבד */
.cf input[readonly],.m-field input[readonly]{
  background:var(--surface2);color:var(--ink2);border-color:transparent}

/* שגיאה: מסגרת אדומה ומשפט שאומר מה לתקן */
.cf.bad input,.cf.bad select,.cf.bad textarea,
.m-field.bad input,.m-field.bad select,.m-field.bad textarea{border-color:var(--lost)}
.cf.bad:focus-within > label,.m-field.bad:focus-within > label{color:var(--lost)}
.cf .fld-err,.m-field .fld-err{display:block;margin-top:5px;font-size:11.5px;color:var(--lost)}

@media (max-width:760px){
  /* אצבע צריכה יעד גדול יותר מעכבר */
  .cf input,.cf select,.cf textarea,
  .m-field input,.m-field select,.m-field textarea{padding:22px 13px 9px;font-size:16px}
  .cf > label,.m-field > label{top:15px}
}

/* ── תיבות הסימון: כרטיס בחירה במקום ריבוע של הדפדפן ─────────────────
 * ריבוע ברירת המחדל קטן מכדי לפגוע בו באצבע, והטקסט לידו נשבר לשתי
 * שורות ונדבק לאפשרות הבאה. כרטיס שנצבע כשבוחרים בו פותר את שניהם.
 *
 * ⚠ בלי white-space:nowrap. רוב הצ'יפים הם תווית קצרה שנכנסת בשורה אחת
 * ממילא, אבל שניים מהם (המודולים בכרטיס העסק) הם משפט שלם — ו-nowrap
 * הוציא אותם 50 פיקסל מחוץ לכרטיס בטלפון. max-width:100% עם גלישה
 * רגילה נותן את ההתנהגות הנכונה בשני המקרים: שורה אחת כשאפשר.
 */
.cks{display:flex;flex-wrap:wrap;gap:8px}
.ck{display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none;
  padding:9px 14px;border-radius:10px;border:1px solid var(--line2);
  background:var(--surface);font-size:13px;color:var(--ink2);
  max-width:100%;
  transition:border-color .15s,background .15s,color .15s}
.ck:hover{border-color:var(--accent)}
.ck input[type="checkbox"],.ck input[type="radio"]{
  appearance:none;-webkit-appearance:none;margin:0;flex:none;
  width:17px;height:17px;border-radius:5px;border:1.5px solid var(--line2);
  background:var(--surface);cursor:pointer;position:relative;
  transition:background .15s,border-color .15s}
.ck input[type="radio"]{border-radius:50%}
.ck input:checked{background:var(--accent);border-color:var(--accent)}
.ck input:checked::after{content:'';position:absolute;inset:0;margin:auto;
  width:9px;height:9px;background:var(--on-accent,#fff);
  clip-path:polygon(14% 44%,0 65%,40% 100%,100% 16%,80% 0,38% 65%)}
.ck input[type="radio"]:checked::after{clip-path:none;border-radius:50%;width:7px;height:7px}
.ck input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ck:has(input:checked){border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--ink)}
@media (max-width:760px){.ck{padding:11px 15px;font-size:14px}}

/* סימון בודד שנכתב כתווית עוטפת ובלי מחלקה — נפוץ בטפסים הישנים.
   מקבל את אותו כרטיס בחירה, אחרת הוא נשאר ריבוע זעיר עם טקסט נשבר. */
.cf > label:has(> input[type="checkbox"]),
.m-field > label:has(> input[type="checkbox"]),
.cf > label:has(> input[type="radio"]),
.m-field > label:has(> input[type="radio"]){
  display:flex;align-items:flex-start;gap:10px;cursor:pointer;user-select:none;
  margin:0;padding:11px 14px;border-radius:11px;border:1px solid var(--line2);
  background:var(--surface);font-size:13.5px;color:var(--ink2);line-height:1.5;
  transition:border-color .15s,background .15s,color .15s}
.cf > label:has(> input[type="checkbox"]):hover,
.m-field > label:has(> input[type="checkbox"]):hover{border-color:var(--accent)}
.cf > label > input[type="checkbox"],.m-field > label > input[type="checkbox"],
.cf > label > input[type="radio"],.m-field > label > input[type="radio"]{
  appearance:none;-webkit-appearance:none;margin:1px 0 0;flex:none;
  width:17px;height:17px;border-radius:5px;border:1.5px solid var(--line2);
  background:var(--surface);cursor:pointer;position:relative;
  transition:background .15s,border-color .15s}
.cf > label > input[type="radio"],.m-field > label > input[type="radio"]{border-radius:50%}
.cf > label > input[type="checkbox"]:checked,.m-field > label > input[type="checkbox"]:checked,
.cf > label > input[type="radio"]:checked,.m-field > label > input[type="radio"]:checked{
  background:var(--accent);border-color:var(--accent)}
.cf > label > input[type="checkbox"]:checked::after,
.m-field > label > input[type="checkbox"]:checked::after{
  content:'';position:absolute;inset:0;margin:auto;width:9px;height:9px;
  background:var(--on-accent,#fff);
  clip-path:polygon(14% 44%,0 65%,40% 100%,100% 16%,80% 0,38% 65%)}
.cf > label:has(> input[type="checkbox"]:checked),
.m-field > label:has(> input[type="checkbox"]:checked),
.cf > label:has(> input[type="radio"]:checked),
.m-field > label:has(> input[type="radio"]:checked){
  border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);
  color:var(--ink)}
.cf > label > input:focus-visible,.m-field > label > input:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}


/* שורה שעברה קבוצה אחרי שינוי סטטוס — מהבהבת פעם אחת במקום החדש שלה,
   אחרת היא פשוט נעלמת מהקבוצה שהסתכלת עליה (דולב, 10/09/2026). */
@keyframes lgMoved { from { background: var(--accent-t1); } }
tbody tr.moved > td { animation: lgMoved 1.5s ease; }
@media (prefers-reduced-motion: reduce) { tbody tr.moved > td { animation: none; } }

/* בורר הקמפיין לעריכת הסטטוסים */
.pick-list{display:flex;flex-direction:column;gap:7px;margin:10px 0 4px;
  max-height:46vh;overflow:auto}
.btn.wide{width:100%;justify-content:flex-start;text-align:start}


/* ══ 43 · מסך החיפוש ══════════════════════════════════════════════════
 *
 * הרעיון: כל קבוצת בחירה היא כרטיס עם כותרת, וכשיש בה בחירה הכרטיס
 * נדלק. בלי הסימון הזה מסך עם עשר קבוצות הוא מסך שאי אפשר לדעת מה
 * פעיל בו, ומשתמש שמקבל אפס תוצאות לא יידע למה.
 */
.srch{display:flex;flex-direction:column;gap:14px}

.srch-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  position:sticky;top:0;z-index:6;padding:10px 0;background:var(--bg)}
.srch-q{flex:1;min-width:220px;background:var(--surface);border:1px solid var(--line2);
  border-radius:10px;padding:10px 14px;font:inherit;font-size:14px;color:var(--ink)}
.srch-q:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.srch-res{font-size:13px;color:var(--ink3);font-family:var(--font-num);
  margin-inline-start:auto;white-space:nowrap}

.srch-saved{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ss-l{font-size:11.5px;color:var(--ink3)}
.ss{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:12.5px;
  cursor:pointer;background:var(--surface);border:1px solid var(--line2);
  border-radius:99px;padding:4px 12px;color:var(--ink2)}
.ss:hover{border-color:var(--accent);color:var(--accent)}
.ss i{font-style:normal;opacity:.4;font-size:11px}
.ss i:hover{opacity:1;color:var(--lost)}

.srch-grid{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}

.sg{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;display:flex;flex-direction:column;min-width:0}
.sg.on{border-color:var(--accent);background:var(--accent-t1)}
.sg-h{display:flex;align-items:center;gap:6px;padding-bottom:7px;
  border-bottom:1px solid var(--line);margin-bottom:7px}
.sg-t{font-size:12.5px;font-weight:600;color:var(--ink)}
.sg-n{font-family:var(--font-num);font-size:10.5px;color:#fff;background:var(--accent);
  border-radius:99px;padding:0 6px;line-height:16px}
.sg-x{margin-inline-start:auto;font:inherit;font-size:10.5px;cursor:pointer;
  background:none;border:1px solid var(--line2);border-radius:99px;padding:1px 8px;
  color:var(--ink3)}
.sg-x:hover{border-color:var(--accent);color:var(--accent)}
.sg-x.ex{background:color-mix(in srgb,var(--lost) 14%,transparent);
  border-color:color-mix(in srgb,var(--lost) 40%,transparent);color:var(--lost);font-weight:600}
.sg-c{font:inherit;font-size:11px;cursor:pointer;background:none;border:0;
  color:var(--ink3);padding:0 2px}
.sg-c:hover{color:var(--lost)}

.sg-l{display:flex;flex-direction:column;gap:1px;max-height:172px;overflow:auto;
  margin:-2px -4px;padding:2px 4px}
.sg-i{display:flex;align-items:center;gap:7px;font-size:12.5px;padding:3px 5px;
  border-radius:7px;cursor:pointer;color:var(--ink2);min-width:0}
.sg-i:hover{background:var(--surface2)}
.sg-i.on{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--ink)}
.sg-i input{width:14px;height:14px;accent-color:var(--accent);flex:none;cursor:pointer;margin:0}
.sg-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.sg-cn{font-family:var(--font-num);font-size:10.5px;color:var(--ink3);flex:none}
.sg-e{font-size:12px;color:var(--ink3);padding:6px 4px}

.sg-b{display:flex;flex-direction:column;gap:7px}
.sg-b select,.sg-b input,.cf-row select,.cf-row input,.srch-save input{
  background:var(--surface);border:1px solid var(--line2);border-radius:8px;
  padding:6px 9px;font:inherit;font-size:12.5px;color:var(--ink);min-width:0}
.sg-row{display:flex;gap:6px}
.sg-row input{flex:1;min-width:0}
.sg-quick{display:flex;gap:4px;flex-wrap:wrap}
.sg-quick button{font:inherit;font-size:11px;cursor:pointer;background:var(--surface2);
  border:1px solid var(--line);border-radius:99px;padding:2px 9px;color:var(--ink2)}
.sg-quick button:hover{border-color:var(--accent);color:var(--accent)}

/* שלושה מצבים ולא שניים: "לא משנה" הוא מצב אמיתי */
.srch-tris{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.tri{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:12.5px;
  cursor:pointer;background:var(--surface);border:1px solid var(--line2);
  border-radius:99px;padding:5px 13px;color:var(--ink2)}
.tri i{width:8px;height:8px;border-radius:50%;background:var(--line2);flex:none}
.tri b{font-size:11px;font-weight:600;color:var(--ink3)}
.tri:hover{border-color:var(--accent)}
.tri.yes{border-color:color-mix(in srgb,var(--won) 45%,transparent);
  background:color-mix(in srgb,var(--won) 11%,transparent)}
.tri.yes i{background:var(--won)} .tri.yes b{color:var(--won)}
.tri.no{border-color:color-mix(in srgb,var(--lost) 45%,transparent);
  background:color-mix(in srgb,var(--lost) 11%,transparent)}
.tri.no i{background:var(--lost)} .tri.no b{color:var(--lost)}
.tri-sep{width:1px;height:20px;background:var(--line2);margin:0 3px}
.tri-cb{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
  color:var(--ink2);cursor:pointer;padding:5px 13px;border-radius:99px;
  border:1px solid var(--line2);background:var(--surface)}
.tri-cb.on{border-color:var(--accent);background:var(--accent-t1);color:var(--ink)}
.tri-cb input{width:14px;height:14px;accent-color:var(--accent);margin:0;cursor:pointer}

.srch-adv{display:flex;flex-direction:column;gap:12px;padding-top:12px;
  border-top:1px dashed var(--line2)}
.srch-custom{background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:7px}
.cf-row{display:grid;grid-template-columns:1fr 130px 1fr auto;gap:6px;align-items:center}
.srch-save{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.srch-save input{flex:1;min-width:170px}

/* תוצאות */
.sr-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 2px 8px}
.sr-all{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink2);cursor:pointer}
.sr-all input{width:15px;height:15px;accent-color:var(--accent);cursor:pointer;margin:0}
.sr-sel{font-size:12.5px;color:var(--accent);font-weight:500}
.sr-bar .sp{flex:1}
table.sr{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
table.sr th{background:var(--surface2);color:var(--ink3);font-size:10.5px;font-weight:600;
  letter-spacing:.05em;text-align:start;padding:9px 11px;border-bottom:1px solid var(--line);
  white-space:nowrap;position:sticky;top:56px;z-index:3}
table.sr td{padding:9px 11px;border-bottom:1px solid var(--line);vertical-align:middle}
table.sr tbody tr{cursor:pointer}
table.sr tbody tr:hover td{background:var(--accent-t1)}
table.sr tr.sel td{background:var(--accent-t1)}
table.sr .cb{width:32px}
table.sr .cb input{width:15px;height:15px;accent-color:var(--accent);cursor:pointer;margin:0}
table.sr .nm{font-weight:500;color:var(--ink)}
table.sr .tel{font-family:var(--font-num);white-space:nowrap;color:var(--ink2)}
table.sr .dim{color:var(--ink3);font-size:12.5px}
.tg{display:inline-block;font-size:11px;background:var(--surface2);
  border:1px solid var(--line);border-radius:99px;padding:1px 8px;
  margin-inline-end:3px;color:var(--ink2)}
.sr-pg{display:flex;align-items:center;justify-content:center;gap:12px;
  padding:14px 0;font-size:13px;color:var(--ink3)}

/* משפך */
.fnl{display:flex;flex-direction:column;gap:9px;margin:12px 0 4px}
.fnl-r{display:grid;grid-template-columns:110px 1fr 54px 44px;gap:10px;align-items:center}
.fnl-t{font-size:13px;color:var(--ink2)}
.fnl-b{height:22px;background:var(--surface2);border-radius:6px;overflow:hidden}
.fnl-b i{display:block;height:100%;background:var(--accent);border-radius:6px}
.fnl-n{font-family:var(--font-num);font-size:13.5px;font-weight:600;text-align:end}
.fnl-p{font-family:var(--font-num);font-size:11.5px;color:var(--ink3);text-align:end}

@media (max-width:720px){
  .srch-grid{grid-template-columns:1fr 1fr}
  .cf-row{grid-template-columns:1fr 1fr;gap:5px}
  table.sr th{top:0}
  table.sr td:nth-child(5),table.sr th:nth-child(5),
  table.sr td:nth-child(7),table.sr th:nth-child(7){display:none}
}

/* ניווט בין רשומות בתוך הכרטיס (LeadMe: "לרשומה הבאה") */
.dw-nav{display:flex;align-items:center;gap:6px;margin-inline-start:auto;
  margin-inline-end:10px}
.dw-at{font-family:var(--font-num);font-size:11.5px;color:var(--ink3);
  white-space:nowrap;min-width:52px;text-align:center}
.dw-nb{font:inherit;font-size:12.5px;cursor:pointer;background:var(--surface);
  border:1px solid var(--line2);border-radius:99px;padding:5px 13px;color:var(--ink2);
  white-space:nowrap}
.dw-nb:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.dw-nb:disabled{opacity:.4;cursor:default}
.dw-nb.primary{background:var(--accent);border-color:transparent;color:#fff;font-weight:500}
.dw-nb.primary:hover:not(:disabled){filter:brightness(1.08);color:#fff}
@media (max-width:640px){.dw-at{display:none}}


/* ══ 44 · אוטומציות ═══════════════════════════════════════════════════
 *
 * כל כלל נקרא כמשפט: "אם ליד יושב על X יותר מ-24 שעות, אז הסטטוס
 * משתנה ל-Y". תיאור טכני הוא בדיוק מה שגורם להפעיל כלל שלא הובן.
 */
.auts{display:flex;flex-direction:column;gap:9px}
.aut-bar{display:flex;gap:8px;align-items:center;padding:4px 0 6px}
.aut-note{font-size:12.5px;color:var(--ink3);margin-inline-start:auto}

.aut{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.aut.off{opacity:.55}
.aut-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.aut-top b{font-size:14.5px}
.aut-top .sp{flex:1}
.aut-b{font-size:11.5px;background:var(--surface2);border:1px solid var(--line);
  border-radius:99px;padding:2px 9px;color:var(--ink2)}
.aut-b.all{color:var(--ink3)}
.aut-f{font-family:var(--font-num);font-size:11.5px;color:var(--ink3)}

/* מתג ולא תיבה: אוטומציה היא דבר שדולק או כבוי, לא שדה שממלאים */
.aut-sw{position:relative;width:36px;height:20px;flex:none;cursor:pointer}
.aut-sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.aut-sw i{position:absolute;inset:0;background:var(--line2);border-radius:99px;
  transition:background .16s}
.aut-sw i::after{content:"";position:absolute;top:2px;inset-inline-start:2px;
  width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .16s}
.aut-sw input:checked + i{background:var(--won)}
.aut-sw input:checked + i::after{transform:translateX(-16px)}

.aut-s{font-size:13.5px;color:var(--ink2);line-height:1.7}
.aut-if,.aut-then{display:inline-block;font-size:10.5px;font-weight:700;
  letter-spacing:.06em;color:var(--accent);background:var(--accent-t1);
  border-radius:5px;padding:1px 7px;margin-inline-end:5px}
.aut-then{margin-inline-start:9px}
.aut-h{display:inline-block;margin-inline-start:9px;font-size:11.5px;color:var(--ink3);
  background:var(--surface2);border-radius:99px;padding:1px 9px}

/* עריכה */
.aef{display:flex;flex-direction:column;gap:9px;margin:10px 0 4px;
  max-height:58vh;overflow:auto;padding-inline-end:4px}
.ae-sec{font-size:10.5px;font-weight:700;letter-spacing:.07em;color:var(--accent);
  margin-top:8px;padding-bottom:5px;border-bottom:1px solid var(--line)}
.ae-r{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:center}
.ae-r label{font-size:12.5px;color:var(--ink2)}
.ae-r input,.ae-r select{background:var(--surface);border:1px solid var(--line2);
  border-radius:8px;padding:7px 10px;font:inherit;font-size:13px;color:var(--ink);
  width:100%;min-width:0}
.ae-in{display:flex;gap:7px;align-items:center}
.ae-in span{font-size:12.5px;color:var(--ink3);white-space:nowrap}
.ae-in input[type=number]{width:80px;flex:none}
.ae-cb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2);cursor:pointer}
.ae-cb input{width:15px;height:15px;accent-color:var(--accent);margin:0;cursor:pointer}
.ae-hrs{display:flex;flex-direction:column;gap:8px;padding-inline-start:23px}
.ae-days{display:flex;gap:5px}
.ae-d{width:30px;height:30px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line2);border-radius:8px;font-size:12.5px;color:var(--ink3)}
.ae-d.on{background:var(--accent);border-color:transparent;color:#fff;font-weight:600}
.ae-d input{position:absolute;opacity:0;width:0;height:0}

.ae-prev{font-size:13px;padding:10px 13px;border-radius:10px;margin-top:6px;
  background:var(--surface2);color:var(--ink2);min-height:0}
.ae-prev:empty{display:none}
.ae-prev.ok{background:color-mix(in srgb,var(--won) 11%,transparent);
  border:1px solid color-mix(in srgb,var(--won) 30%,transparent)}
.ae-prev.warn{background:color-mix(in srgb,var(--warn,#B45309) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--warn,#B45309) 32%,transparent)}
.ae-sm{display:block;margin-top:4px;font-size:11.5px;color:var(--ink3)}

table.alg{width:100%;border-collapse:collapse;font-size:12.5px;margin:8px 0}
table.alg th{text-align:start;font-size:10.5px;color:var(--ink3);font-weight:600;
  padding:7px 9px;border-bottom:1px solid var(--line);white-space:nowrap}
table.alg td{padding:7px 9px;border-bottom:1px solid var(--line)}
table.alg .dim{color:var(--ink3)}
table.alg .ok{color:var(--won)} table.alg .bad{color:var(--lost)}
table.alg tr.bad td{background:color-mix(in srgb,var(--lost) 6%,transparent)}

@media (max-width:640px){
  .ae-r{grid-template-columns:1fr;gap:4px}
  .aut-top{gap:7px}
}


/* ══ 45 · יומן ════════════════════════════════════════════════════════
 *
 * ארבע התצוגות הן אותם נתונים בארבעה טווחים. הצבע והסדר זהים בכולן,
 * וההבדל היחיד הוא הרשת שמתחת — אחרת זה ארבעה מסכים ללמוד ולא אחד.
 */
.cal{display:flex;flex-direction:column;gap:12px}
.cal-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  position:sticky;top:0;z-index:6;background:var(--bg);padding:8px 0}
.cal-nav{display:flex;gap:3px}
.cal-t{font-size:16px;min-width:150px}
.cal-bar .sp{flex:1}
.cal-f{background:var(--surface);border:1px solid var(--line2);border-radius:8px;
  padding:6px 10px;font:inherit;font-size:12.5px;color:var(--ink)}
.cal-vw{display:flex;gap:2px;background:var(--surface2);border-radius:99px;padding:3px}
.cal-vw button{font:inherit;font-size:12px;cursor:pointer;background:none;border:0;
  border-radius:99px;padding:5px 13px;color:var(--ink3);white-space:nowrap}
.cal-vw button.on{background:var(--surface);color:var(--ink);font-weight:500;
  box-shadow:0 1px 2px rgba(0,0,0,.06)}

/* חודש */
.cal-m{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cal-dh{background:var(--surface2);text-align:center;font-size:11px;font-weight:600;
  color:var(--ink3);padding:7px 0}
.cal-c{background:var(--surface);min-height:96px;padding:5px;display:flex;
  flex-direction:column;gap:2px;overflow:hidden}
.cal-c.out{background:var(--surface2);opacity:.55}
.cal-c.today{background:var(--accent-t1)}
.cal-c.today .cal-n{background:var(--accent);color:#fff}
.cal-n{font-family:var(--font-num);font-size:11.5px;color:var(--ink3);
  width:21px;height:21px;display:grid;place-items:center;border-radius:50%;flex:none}
.cal-more{font-size:10.5px;color:var(--ink3);padding-inline-start:4px}

.cev{display:flex;align-items:center;gap:5px;font:inherit;font-size:11px;cursor:pointer;
  background:color-mix(in srgb,var(--k) 12%,transparent);border:0;
  border-inline-start:2.5px solid var(--k);border-radius:4px;padding:2px 5px;
  color:var(--ink2);text-align:start;min-width:0;width:100%}
.cev:hover{background:color-mix(in srgb,var(--k) 22%,transparent)}
.cev.done{opacity:.55;text-decoration:line-through}
.cev.missed{border-inline-start-color:var(--lost)}
.cev.cancelled{opacity:.4}
.cev-h{font-family:var(--font-num);font-size:10px;color:var(--ink3);flex:none}
.cev-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* שבוע */
.cal-w{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.cal-wd{background:var(--surface);border:1px solid var(--line);border-radius:11px;
  padding:9px;display:flex;flex-direction:column;gap:6px;min-height:140px}
.cal-wd.today{border-color:var(--accent);background:var(--accent-t1)}
.cal-wh{display:flex;align-items:baseline;gap:6px;padding-bottom:6px;
  border-bottom:1px solid var(--line)}
.cal-wh b{font-size:12.5px}
.cal-wh span{font-family:var(--font-num);font-size:11px;color:var(--ink3)}
.cal-wh i{margin-inline-start:auto;font-style:normal;font-family:var(--font-num);
  font-size:10.5px;background:var(--accent);color:#fff;border-radius:99px;padding:0 6px}
.cal-wl{display:flex;flex-direction:column;gap:4px}
.cal-e{font-size:11.5px;color:var(--ink3)}
.cal-w.wide .cal-wd{min-height:230px}

.cevw{display:flex;flex-direction:column;gap:1px;font:inherit;cursor:pointer;
  background:color-mix(in srgb,var(--k) 10%,transparent);border:1px solid transparent;
  border-inline-start:3px solid var(--k);border-radius:7px;padding:6px 8px;
  text-align:start;min-width:0}
.cevw:hover{border-color:var(--k)}
.cevw.done{opacity:.6} .cevw.missed{border-inline-start-color:var(--lost)}
.cevw-h{font-family:var(--font-num);font-size:11px;color:var(--ink3)}
.cevw-n{font-size:12.5px;font-weight:500;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cevw-p{font-family:var(--font-num);font-size:11px;color:var(--ink2)}
.cevw-k{font-size:10.5px;color:var(--ink3)}

/* יום */
.cal-d{display:flex;flex-direction:column;gap:7px}
.cald{display:grid;grid-template-columns:56px 1fr auto auto;gap:12px;align-items:center;
  font:inherit;cursor:pointer;text-align:start;background:var(--surface);
  border:1px solid var(--line);border-inline-start:3px solid var(--k);
  border-radius:11px;padding:11px 14px}
.cald:hover{border-color:var(--k)}
.cald.done{opacity:.6} .cald.missed{border-inline-start-color:var(--lost)}
.cald-h{font-family:var(--font-num);font-size:15px;font-weight:600;color:var(--ink)}
.cald-b{display:flex;flex-direction:column;gap:1px;min-width:0}
.cald-b b{font-size:14px}
.cald-b span{font-size:12px;color:var(--ink3)}
.cald-nt{color:var(--ink2)!important;font-size:12.5px!important}
.cald-tel{font-family:var(--font-num);font-size:13px;color:var(--ink2);
  text-decoration:none;white-space:nowrap}
.cald-tel:hover{color:var(--accent)}
.cald-st{font-size:11px;color:var(--ink3);background:var(--surface2);
  border-radius:99px;padding:2px 9px;white-space:nowrap}
.ae-note{font-size:12.5px;color:var(--ink3);padding:8px 11px;
  background:var(--surface2);border-radius:9px}

@media (max-width:820px){
  .cal-w{grid-template-columns:1fr;gap:6px}
  .cal-wd{min-height:0}
  .cal-w.wide .cal-wd{min-height:0}
  .cal-c{min-height:70px}
  .cev-h{display:none}
  .cald{grid-template-columns:48px 1fr;gap:8px}
  .cald-tel,.cald-st{grid-column:2}
  .cal-t{min-width:0;font-size:14px}
}


/* ══ 46 · טפסים והעלאה ════════════════════════════════════════════════ */
.fpage{display:flex;flex-direction:column;gap:12px}
.ftabs{display:flex;gap:2px;background:var(--surface2);border-radius:99px;
  padding:3px;align-self:flex-start}
.ftabs button{font:inherit;font-size:13px;cursor:pointer;background:none;border:0;
  border-radius:99px;padding:6px 18px;color:var(--ink3)}
.ftabs button.on{background:var(--surface);color:var(--ink);font-weight:500;
  box-shadow:0 1px 2px rgba(0,0,0,.06)}

.ifl{display:flex;flex-direction:column;gap:9px}
.ifc{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.ifc.off{opacity:.55}
.ifc-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ifc-h b{font-size:14.5px}
.ifc-h .sp{flex:1}
.ifc-n{font-family:var(--font-num);font-size:11.5px;color:var(--ink3)}
.ifc-f{display:flex;gap:5px;flex-wrap:wrap}
.ifc-t{font-size:11.5px;background:var(--surface2);border:1px solid var(--line);
  border-radius:7px;padding:2px 9px;color:var(--ink2)}
.ifc-t i{font-style:normal;color:var(--ink3);margin-inline-start:5px;font-size:10.5px}

/* שורת שדה בעורך */
.iff{display:grid;grid-template-columns:16px 1fr 120px 1fr auto auto;gap:6px;align-items:center}
.iff-g{color:var(--ink3);font-size:12px;cursor:grab;user-select:none}
.iff input,.iff select{background:var(--surface);border:1px solid var(--line2);
  border-radius:8px;padding:6px 9px;font:inherit;font-size:12.5px;color:var(--ink);min-width:0}
.iff input:disabled{opacity:.4}
.iff-r{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink3);
  white-space:nowrap;cursor:pointer}
.iff-r input{width:14px;height:14px;accent-color:var(--accent);margin:0}

/* העלאה */
.upl{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;align-items:start}
.upl-drop{border:2px dashed var(--line2);border-radius:14px;padding:44px 22px;
  text-align:center;cursor:pointer;background:var(--surface);
  display:flex;flex-direction:column;gap:6px;transition:border-color .14s,background .14s}
.upl-drop:hover,.upl-drop.over{border-color:var(--accent);background:var(--accent-t1)}
.upl-drop b{font-size:15px}
.upl-drop span{font-size:12.5px;color:var(--ink3)}
.upl-tip{background:var(--surface);border:1px solid var(--line);
  border-inline-start:3px solid var(--accent);border-radius:12px;padding:14px 16px}
.upl-tip b{display:block;margin-bottom:6px;font-size:13.5px}
.upl-tip p{margin:0 0 8px;font-size:13px;color:var(--ink2)}
.upl-map{display:flex;flex-direction:column;gap:12px}
table.upm{width:100%;border-collapse:collapse;font-size:13px}
table.upm th{text-align:start;font-size:10.5px;color:var(--ink3);font-weight:600;
  padding:8px 10px;border-bottom:1px solid var(--line)}
table.upm td{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
table.upm .nm{font-weight:500}
table.upm .dim{color:var(--ink3);font-size:12px}
table.upm select{width:100%;background:var(--surface);border:1px solid var(--line2);
  border-radius:8px;padding:6px 9px;font:inherit;font-size:12.5px;color:var(--ink)}
.upl-go{display:flex;justify-content:center;padding:8px 0 4px}
.upl-res{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin:14px 0}
.upl-res span{font-size:13.5px;color:var(--ink2)}
.upl-res b{font-family:var(--font-num);font-size:22px;display:block;color:var(--ink)}
.upl-res .ok b{color:var(--won)}
.upl-res .bad b{color:var(--lost)}
.upl-res .dim b{color:var(--ink3)}

@media (max-width:820px){
  .upl{grid-template-columns:1fr}
  .iff{grid-template-columns:1fr 1fr;gap:5px}
  .iff-g{display:none}
}


/* ══ 47 · תקשורת ══════════════════════════════════════════════════════ */
.mch{font-size:10.5px;font-weight:600;border-radius:99px;padding:2px 9px;
  white-space:nowrap;color:var(--k);
  background:color-mix(in srgb,var(--k) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--k) 32%,transparent)}
.mt-sub{font-size:12.5px;color:var(--ink2);font-weight:500}
.mt-body{font-size:13px;color:var(--ink2);background:var(--surface2);
  border-radius:9px;padding:9px 12px;line-height:1.6;white-space:pre-wrap;
  max-height:120px;overflow:auto}
.mt-cell{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-vars{display:flex;gap:5px;flex-wrap:wrap;align-items:center;
  padding-inline-start:106px;margin-top:-2px}
.mt-vars span{font-size:11.5px;color:var(--ink3)}
.mvar{font:inherit;font-size:11.5px;font-family:var(--font-num);cursor:pointer;
  background:var(--accent-t1);border:1px solid transparent;border-radius:6px;
  padding:2px 8px;color:var(--accent-deep,var(--accent))}
.mvar:hover{border-color:var(--accent)}
#mtBody,#mcItems{width:100%;background:var(--surface);border:1px solid var(--line2);
  border-radius:9px;padding:9px 12px;font:inherit;font-size:13.5px;color:var(--ink);
  resize:vertical;line-height:1.6}

.mst{font-size:11px;font-weight:600;border-radius:99px;padding:1px 9px;white-space:nowrap}
.mst.sent{color:var(--won);background:color-mix(in srgb,var(--won) 13%,transparent)}
.mst.queued{color:var(--ink2);background:var(--surface2)}
.mst.failed{color:var(--lost);background:color-mix(in srgb,var(--lost) 13%,transparent)}
.mst.skipped{color:var(--ink3);background:var(--surface2)}
.mst-e{display:block;font-size:10.5px;color:var(--ink3);margin-top:2px}
table.alg .num{font-family:var(--font-num);white-space:nowrap}
table.alg tr.mb{cursor:pointer}
table.alg tr.mb:hover td{background:var(--accent-t1)}

.msend{display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:18px;background:var(--surface2);border-radius:12px;margin:12px 0}
.msend b{font-family:var(--font-num);font-size:34px;color:var(--accent)}
.msend span{font-size:13px;color:var(--ink2)}

@media (max-width:640px){.mt-vars{padding-inline-start:0}}


/* ══ 48 · מסחר והרחבות ════════════════════════════════════════════════ */
.stabs{flex-wrap:wrap}
.stabs button{padding:6px 14px;font-size:12.5px}
table.alg tr.off td{opacity:.5}
table.alg .ok{color:var(--won)} table.alg .bad{color:var(--lost)}
.aut-b{font-size:10.5px;background:var(--surface2);border:1px solid var(--line);
  border-radius:99px;padding:1px 8px;color:var(--ink3);margin-inline-start:7px}

.sl-hits{position:relative;display:flex;flex-direction:column;gap:2px;margin-top:4px}
.sl-hits button{display:flex;justify-content:space-between;gap:10px;font:inherit;
  font-size:12.5px;cursor:pointer;background:var(--surface2);border:1px solid var(--line);
  border-radius:8px;padding:6px 10px;color:var(--ink2);text-align:start}
.sl-hits button:hover{border-color:var(--accent);color:var(--ink)}
.sl-hits span{font-family:var(--font-num);color:var(--ink3);font-size:11.5px}
.sl-total{font-family:var(--font-num);font-size:19px;color:var(--accent)}

/* לוח בקרה */
.dbg{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.dbw{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;min-height:96px;display:flex;flex-direction:column;gap:8px}
.dbw-t{font-size:11.5px;font-weight:600;color:var(--ink3);letter-spacing:.03em}
.dbw-b{display:flex;flex-direction:column;gap:4px;flex:1;justify-content:center}
.dbw-n{font-family:var(--font-num);font-size:36px;font-weight:700;color:var(--accent);
  line-height:1}
.dbw-r{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;
  font-size:12.5px;color:var(--ink2)}
.dbw-r span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dbw-r i{grid-column:1/-1;height:4px;border-radius:2px;background:var(--accent);
  opacity:.55;min-width:2px}
.dbw-r b{font-family:var(--font-num);color:var(--ink)}
.dbw-r em{font-style:normal;font-size:10.5px;color:var(--ink3)}

.akey{font-family:var(--font-num);font-size:14px;background:var(--surface2);
  border:1px dashed var(--line2);border-radius:10px;padding:14px;margin:10px 0;
  word-break:break-all;direction:ltr;text-align:start;user-select:all}

@media (max-width:900px){.dbg{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.dbg{grid-template-columns:1fr}.dbw{grid-column:span 1!important}}


/* ══ 49 · בורר התצוגות והבאנר ═════════════════════════════════════════ */
.pvpick{display:grid;gap:10px;margin:12px 0 4px}
.pvo{display:flex;flex-direction:column;gap:4px;text-align:start;font:inherit;
  cursor:pointer;background:var(--surface);border:1px solid var(--line2);
  border-radius:13px;padding:14px 16px;color:var(--ink2)}
.pvo:hover{border-color:var(--accent);background:var(--accent-t1)}
.pvo:disabled{opacity:.6;cursor:default}
.pvo b{font-size:15px;color:var(--ink)}
.pvo span{font-size:13px;line-height:1.6}
.pvo span b{font-size:inherit}
.pvo em{font-style:normal;font-size:11.5px;color:var(--accent);margin-top:3px}

/* באנר "אתה מסתכל דרך העיניים של מישהו אחר" */
#pvBar{position:sticky;top:0;z-index:200;display:flex;align-items:center;
  justify-content:center;gap:14px;padding:9px 16px;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 72%,#000));
  color:#fff;font-size:13.5px;font-weight:500}
#pvBar button{font:inherit;font-size:12.5px;cursor:pointer;background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.32);border-radius:99px;padding:3px 14px;color:#fff}
#pvBar button:hover{background:rgba(255,255,255,.3)}
@media (max-width:520px){#pvBar{font-size:12px;gap:9px;padding:7px 10px}}

/* גרסה חדשה עלתה. ענבר ולא סגול — כדי שלא יתחלף עם פס התצוגה. */
#newVer{position:sticky;top:0;z-index:201;display:flex;align-items:center;
  justify-content:center;gap:14px;padding:9px 16px;
  background:#b45309;color:#fff;font-size:13.5px;font-weight:500}
#newVer button{font:inherit;font-size:12.5px;cursor:pointer;background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.36);border-radius:99px;padding:3px 14px;color:#fff}
#newVer button:hover{background:rgba(255,255,255,.32)}
@media (max-width:520px){#newVer{font-size:12px;gap:9px;padding:7px 10px}}


/* בחירת העסקים של נציג */
.us-sc{font:inherit;font-size:11.5px;cursor:pointer;background:var(--surface2);
  border:1px solid var(--line2);border-radius:99px;padding:2px 10px;color:var(--ink2);
  white-space:nowrap}
.us-sc:hover{border-color:var(--accent);color:var(--accent)}
.us-sc.none{background:color-mix(in srgb,var(--warn,#B45309) 14%,transparent);
  border-color:color-mix(in srgb,var(--warn,#B45309) 36%,transparent);
  color:var(--warn,#B45309);font-weight:600}
span.us-sc.all{cursor:default;color:var(--ink3);font-size:11.5px;
  background:none;border:0;padding:0}

.sc-bar{display:flex;gap:8px;align-items:center;margin:10px 0 8px;flex-wrap:wrap}
.sc-bar input{flex:1;min-width:150px;background:var(--surface);border:1px solid var(--line2);
  border-radius:9px;padding:7px 11px;font:inherit;font-size:13px;color:var(--ink)}
.sc-n2{font-size:12.5px;color:var(--accent);font-weight:500;white-space:nowrap}
.sc-list{display:flex;flex-direction:column;gap:2px;max-height:46vh;overflow:auto;
  border:1px solid var(--line);border-radius:11px;padding:6px}
.sc-i{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:8px;
  cursor:pointer;font-size:13.5px;color:var(--ink2)}
.sc-i:hover{background:var(--surface2)}
.sc-i.on{background:var(--accent-t1);color:var(--ink)}
.sc-i input{width:15px;height:15px;accent-color:var(--accent);margin:0;cursor:pointer}
.sc-i .cdot{width:8px;height:8px;border-radius:50%;flex:none}
.sc-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* דוחות שיוצאים לבד (autos.js) */
.rpts{margin-top:var(--sp5);border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);overflow:hidden}
.rpts-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:14px 16px 11px;border-bottom:1px solid var(--line);background:var(--surface2)}
.rpts-h b{font-size:15px}
.rpt{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line)}
.rpt:last-of-type{border-bottom:0}
.rpt.off{opacity:.62}
.rpt-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.rpt-t b{font-size:14px}
.rpt-h{font-size:12px;color:var(--ink3)}
.rpt-s{font:inherit;font-size:12.5px;padding:6px 10px;border-radius:var(--r-ctl);
  border:1px solid var(--line2);background:var(--surface2);color:var(--ink);cursor:pointer}
.rpt-s:disabled{opacity:.5;cursor:default}
.rpt-l{font-size:11.5px;color:var(--ink3);white-space:nowrap}
.rpts-n{padding:11px 16px;background:var(--surface2);border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink3);line-height:1.7}
@media (max-width:760px){
  .rpt{flex-wrap:wrap;gap:9px}
  .rpt-t{flex:1 1 100%;order:1}
  .rpt .aut-sw{order:0}
  .rpt-s{flex:1 1 40%;min-height:40px;order:2}
  .rpt-l{flex:1 1 100%;order:3}
  .sp{display:none}
}

/* תגיות על כרטיס הליד (table.js) */
.d-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:0 var(--sp4) var(--sp3)}
.d-tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;
  padding:4px 10px;border-radius:99px;background:var(--accent-t2);color:var(--accent)}
.d-tagx{border:0;background:transparent;color:inherit;cursor:pointer;font-size:11px;
  opacity:.65;padding:0 1px;line-height:1}
.d-tagx:hover{opacity:1}
.d-tagadd{border:1px dashed var(--line2);background:transparent;color:var(--ink3);
  font:inherit;font-size:12px;padding:4px 11px;border-radius:99px;cursor:pointer;min-height:30px}
.d-tagadd:hover{border-color:var(--accent);color:var(--accent)}
.d-taginput{font:inherit;font-size:12.5px;padding:5px 11px;border-radius:99px;
  border:1px solid var(--accent);background:var(--surface2);color:var(--ink);max-width:170px}
@media (max-width:760px){
  .d-tagadd,.d-taginput{min-height:40px}
  .d-tag{padding:7px 12px;font-size:12.5px}
}

/* כותרת קבוצה בתוך בורר הקמפיינים (client.js) */
.dd-grp{display:flex;align-items:center;gap:8px;padding:8px 13px;background:var(--surface2);
  border-block:1px solid var(--line);font-size:11.5px;font-weight:700;color:var(--ink2);
  position:sticky;top:0}
.dd-grp:first-child{border-block-start:0}
.dd-grp span{margin-inline-start:auto;font-family:var(--font-num);font-size:11px;
  color:var(--ink3);font-weight:600}

/* ── פרק 47: נגישות וקריאות (דולב, 16/09/2026) ───────────────────────────
 * "הגודל של הגופן לא מספיק גדול", "מה שנפתח בכרטיס בגופן ממש קטן".
 * טבלת הלידים, כותרות הקבוצות והכרטיס עולים מדרגה. הכללים כאן מאוחרים
 * לכל השאר ולכן גוברים; מי שרוצה להקטין בחזרה מוחק את הפרק הזה. */
table{font-size:15px}
th{font-size:12.5px;padding:12px 14px;letter-spacing:.04em}
td{padding:11px 14px;font-size:15px;color:var(--ink)}
.lead-name{font-size:15.5px;font-weight:600}
.lead-board{font-size:12.5px}
.src{font-size:13.5px}
.tablewrap .cell-edit{font-size:14.5px}
.tablewrap .mono{font-size:14.5px}
.pill{font-size:13px}
.tablewrap table{min-width:900px}

/* כותרת קבוצה: ריבוע צבע, שם גדול, מונה מלא בצבע הקבוצה */
.lg-h td{height:62px}
.lg-wrap{inset:14px 0 0}
.lg-b{font-size:16.5px;font-weight:700;padding:11px 14px;gap:11px;
  border-inline-start:6px solid var(--gc);
  background:color-mix(in srgb,var(--gc) 22%,var(--surface))}
.lg-b:hover{background:color-mix(in srgb,var(--gc) 32%,var(--surface))}
.lg-b::before{content:"";width:13px;height:13px;border-radius:4px;background:var(--gc);flex:none}
.lg-b .chev{font-size:14px;width:12px;color:var(--ink)}
.lg-b .t{color:var(--ink)}
.lg-b .n{font-size:13.5px;padding:2px 11px;background:var(--gc);color:#fff;font-weight:700;
  text-shadow:0 1px 1px rgba(0,0,0,.25)}
.lg-b .hint{font-size:13px}
:root[data-theme="light"] .lg-b{background:color-mix(in srgb,var(--gc) 15%,var(--surface))}
:root[data-theme="light"] .lg-b:hover{background:color-mix(in srgb,var(--gc) 24%,var(--surface))}

/* הכרטיס שנפתח */
.drawer{width:min(720px,96vw)}
.d-who b{font-size:23px}
.d-sub{font-size:14px}
.d-st{font-size:15.5px;padding:8px 18px}
.d-mi{font-size:15px;padding:9px 12px}
.d-a{font-size:14.5px;padding:8px 18px}
.d-sec{font-size:13px;margin:24px 0 10px;color:var(--ink2)}
.d-hint{font-size:12.5px}
.d-grid{gap:10px}
.d-f{gap:4px}
.d-f > span{font-size:13.5px;color:var(--ink2)}
.d-f i{font-size:11px}
.d-f input{font-size:15.5px;padding:9px 12px}
.d-f .ro{font-size:15.5px}
.d-th b{font-size:14.5px}
.d-tm{font-size:13px}
.d-badge{font-size:11px;padding:2px 8px}
.d-tb p{font-size:14.5px;color:var(--ink)}
.d-tb p.muted{font-size:13.5px}
.d-none{font-size:14px}
.d-box textarea{font-size:15px}
.d-send,.d-cancel{font-size:14px}
@media (max-width:760px){
  table.resp td::before{font-size:13.5px}
  table.resp td.lead-nm{font-size:17px}
  .d-who b{font-size:21px}
}

/* ── השיחה המלאה עם הליד ─────────────────────────────────────────
   ⭐ בקשת אורי דרך דולב, 17/09/2026: ההערה בכרטיס נותנת מידע חלקי,
   והם רוצים לראות את השיחה עצמה. ⛔ קריאה בלבד.
   ⭐ הכיוון הוא RTL של המערכת: הלקוח מימין, נועה משמאל, כמו שזה
   נראה בוואטסאפ בעברית. */
.d-a.chat { border-color: var(--indigo); color: var(--indigo); font-weight: 600; }
.d-a.chat:hover { background: var(--indigo); color: #fff; }

.ch-wrap {
  max-height: min(62vh, 560px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 12px; margin-top: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.ch-empty, .ch-day {
  text-align: center; color: var(--ink3); font-size: 12.5px; padding: 10px 0;
}
.ch-day {
  align-self: center; background: var(--surface); border: 1px solid var(--line);
  border-radius: 99px; padding: 2px 12px; font-size: 11.5px; margin: 4px 0;
}
.ch-stale {
  background: var(--accent-t1); border: 1px solid var(--accent-soft);
  color: var(--ink2); font-size: 12px; border-radius: var(--r-ctl);
  padding: 8px 11px;
}
.ch-row { display: flex; }
.ch-row.them { justify-content: flex-start; }
.ch-row.us { justify-content: flex-end; }
.ch-row.note { justify-content: center; }

.ch-b {
  max-width: 82%; border-radius: 13px; padding: 7px 11px 5px;
  background: var(--surface); border: 1px solid var(--line2);
}
.ch-row.us .ch-b { background: var(--accent-t2); border-color: var(--accent-soft); }
/* ⛔ הודעה שלא יצאה אינה חלק מהשיחה. היא מוצגת כדי שיהיה ברור
   שמשהו נחסם, ולא כאילו הלקוח קיבל אותה. */
.ch-row.note .ch-b {
  background: transparent; border-style: dashed; max-width: 92%;
  opacity: .72;
}
.ch-who {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--ink3); margin-bottom: 2px;
}
.ch-t { font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.ch-at {
  font-size: 10.5px; color: var(--ink3); text-align: end;
  margin-top: 3px; font-family: var(--font-num);
}

@media (max-width: 600px) {
  .ch-wrap { max-height: 70vh; padding: 9px; }
  .ch-b { max-width: 90%; }
  .ch-t { font-size: 14.5px; }
}

/* קיפול של הודעות שלא יצאו. ⛔ לא נמחקות: הן מסבירות למה הלקוח לא
   קיבל מענה. פשוט לא קוברות את השיחה. */
.ch-grp { width: 100%; display: flex; flex-direction: column; gap: 7px; align-items: center; }
.ch-more {
  font-size: 12px; color: var(--ink3); background: transparent;
  border: 1px dashed var(--line2); border-radius: 99px; padding: 4px 14px;
}
.ch-more:hover { color: var(--ink2); border-color: var(--ink3); }
.ch-more i { font-style: normal; display: inline-block; transition: transform .15s; }
.ch-more.open i { transform: rotate(180deg); }
.ch-hid { display: flex; flex-direction: column; gap: 7px; width: 100%; }
@media (prefers-reduced-motion: reduce) { .ch-more i { transition: none; } }

/* ⭐ הודעה שאדם מהעסק כתב מהטלפון שלו, ולא הבוט. דרישת דולב
   17/09/2026: כשהבוט לא התקדם בגלל התערבות אנושית, צריך לראות
   מי כתב ומה. ⛔ נבדל מהבוט בצבע ולא רק בכיתוב, כי בשיחה ארוכה
   הכיתוב הקטן נבלע. */
.ch-row.human .ch-b { background: var(--brass-t, rgba(210,172,100,.14)); border-color: rgba(210,172,100,.4); }
.ch-row.human .ch-who { color: #C79A45; }

/* ═══ הכרטיס הרזה ═══════════════════════════════════════════════════
 *
 * ⭐ דולב אישר, 17/09/2026 (אפשרות 1 במסמך "בורד וכרטיס ליד").
 * לפני כן הכותרת הסגולה תפסה 250 פיקסל בטלפון עם לוגו של אימפקט,
 * השם נשבר אות-אות, והשדה הראשון הופיע אחרי 580 פיקסל (67% מהמסך).
 *
 * המבנה: שורה אחת (שם · סטטוס · סגירה), שורת מידע, ארבע פעולות שנצמדות
 * למעלה בגלילה, ושלוש לשוניות. ⛔ תבנית אחת לנייד ולמחשב, לכל הזהויות.
 *
 * ⚠ הסלקטורים נפתחים ב-#drawer.d-slim כדי לגבור על רצועת המותג ופס
 * הזהות שמוגדרים למעלה ב-:root ו-:root[data-theme]. הכרטיס של העסק
 * (business.js) ממשיך לקבל את פס הזהות; רק כרטיס הליד רזה.
 */
#drawer.d-slim{width:min(520px,96vw)}
:root #drawer.d-slim .d-h,:root[data-theme="light"] #drawer.d-slim .d-h{
  background:var(--surface);border-bottom:1px solid var(--line);
  padding:12px 16px 10px;align-items:flex-start;gap:8px;overflow:visible}
#drawer.d-slim .d-h::after{display:none}
#drawer.d-slim .d-line1{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
:root #drawer.d-slim .d-h .d-who b,:root[data-theme="light"] #drawer.d-slim .d-h .d-who b{
  display:inline;font-size:19px;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
:root #drawer.d-slim .d-h .d-sub,:root[data-theme="light"] #drawer.d-slim .d-h .d-sub{
  display:block;margin-top:4px;font-size:12.5px;color:var(--ink3)}
#drawer.d-slim .d-sub em{font-style:normal;opacity:.5;margin:0 4px}
:root #drawer.d-slim .d-h .d-x,:root[data-theme="light"] #drawer.d-slim .d-h .d-x{
  color:var(--ink3);background:var(--surface2);border:1px solid var(--line);border-radius:10px;
  width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;font-size:15px}
#drawer.d-slim .d-h .d-x:hover{color:var(--ink);border-color:var(--line2)}
#drawer.d-slim .d-st{font-size:13px;padding:5px 12px;border-inline-start-width:4px}

#drawer.d-slim .d-body{padding:0 16px 20px}
#drawer.d-slim .d-menu{margin:10px 0 0}
/* הפעולות נצמדות לראש הגוף בגלילה: וואטסאפ וחיוג צריכים להיות תמיד ביד */
#drawer.d-slim .d-sticky{position:sticky;top:0;z-index:2;background:var(--surface);
  margin:0 0 4px;padding:10px 0 8px;border-bottom:1px solid var(--line);flex-wrap:nowrap;gap:6px}
#drawer.d-slim .d-a{flex:1 1 0;justify-content:center;padding:8px 6px;font-size:13.5px;
  white-space:nowrap;min-width:0}
#drawer.d-slim .d-box{margin-top:10px}

#drawer.d-slim .d-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:6px 0 10px}
#drawer.d-slim .d-tabs button{font:inherit;font-size:14px;font-weight:600;color:var(--ink3);
  padding:9px 12px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;
  cursor:pointer;min-height:44px;display:inline-flex;align-items:center;gap:6px}
#drawer.d-slim .d-tabs button:hover{color:var(--ink)}
#drawer.d-slim .d-tabs button.on{color:var(--accent);border-bottom-color:var(--accent)}
#drawer.d-slim .d-tabs button i{font-style:normal;font-size:11px;font-weight:700;
  background:var(--surface2);border-radius:99px;padding:1px 7px;color:var(--ink2)}
#drawer.d-slim .d-tabs button.on i{background:var(--accent-soft);color:var(--accent)}
#drawer.d-slim .d-pane .d-sec:first-child{margin-top:4px}
#drawer.d-slim .d-tags{padding:0 0 6px}

/* השיחה כלשונית: בלי מסגרת כפולה ובלי גובה מוגבל, הגוף כבר גולל */
/* ⛔⛔ **גם `overflow` ו-`overscroll-behavior`, ולא רק הגובה.** נתפס
   ב-22/09/2026: השיחה נטענה ואי אפשר היה לגלול בה. `max-height:none`
   ביטל את הגלילה הפנימית, אבל `.ch-wrap` נשאר `overflow-y:auto` עם
   `overscroll-behavior:contain` — כלומר אזור גלילה **שאין לו מה
   לגלול** ושחוסם את הגלילה מלעבור למגירה שמתחתיו. אצבע על השיחה
   פשוט לא הזיזה כלום. */
#drawer.d-slim .ch-inline{max-height:none;overflow:visible;overscroll-behavior:auto;
  margin-top:0;border:0;padding:0 0 8px;background:transparent}

/* הקודמת/הבאה יורדות לתחתית, קטנות ושקטות */
#drawer.d-slim .d-foot{display:flex;justify-content:center;padding:6px 12px;flex:none}
#drawer.d-slim .dw-nav{margin:0;gap:10px}
#drawer.d-slim .dw-nb{padding:6px 12px;font-size:12.5px}

/* תצוגת לקוח: כמי נכנסים (דולב, 17/09/2026) */
.pv-opts{display:grid;gap:8px;margin:12px 0 4px}
.pv-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:start;
  padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);
  font:inherit;color:var(--ink);cursor:pointer;min-height:44px}
.pv-opt b{font-size:15px;font-weight:700}
.pv-opt span{font-size:12.5px;color:var(--ink3)}
.pv-opt:hover{border-color:var(--accent);background:var(--accent-soft)}
.pv-opt:disabled{opacity:.6;cursor:default}
.pv-opt.busy{border-color:var(--accent)}

/* בשורת הליד: במחשב התאריך המלא, בטלפון הקצר (mobile.css) */
.when .rel{display:none}