/* ============================================================================
   apple.css — שכבת שיפורים מעל styles.css. נטענת אחריו ב-index.html.

   נבנתה מאודיט apple-design (2026-08-13). **לא מסירה שום כלל קיים** — רק
   דורסת ערכים ספציפיים. ביטול מלא = מחיקת שורת ה-<link> ב-index.html.

   מה יש כאן:
     1  משוב לחיצה על כל פקד (היה :active אחד בכל הקובץ)
     2  טיפוגרפיה שמכבדת את גודל הטקסט של הדפדפן
     3  tracking שלילי על מספרי התצוגה
     4  reduced-motion עדין במקום פטיש
     5  prefers-reduced-transparency + prefers-contrast
     6  כותרת טבלה אטומה עם scroll-edge
     7  שני באגי פריסה שנחשפו ב-24 לקוחות
     8  פאנלים מתקפלים מונפשים
     9  גרירת כרטיס בין עמודות
     10 כרטיסיית "מוקד תשומת לב"
   ========================================================================== */

:root {
  /* טוקני תנועה מופרדים: תזוזה, צבע ולחיצה. reduced-motion מכבה רק תזוזה. */
  --t-move:.22s cubic-bezier(.22,.61,.36,1);
  --t-color:.17s ease-out;
  --t-press:.09s ease-out;
  --ease-out-a:cubic-bezier(.22,.61,.36,1);
  --ease-in-a:cubic-bezier(.55,.06,.68,.19);
}

/* ============================ 1. משוב לחיצה ============================== */
/* `scale` כתכונה עצמאית ולא בתוך transform — כך היא מתחברת לסיבוב החץ
   ולהרמת ה-hover במקום לדרוס אותם. touch-action מסיר השהיית double-tap. */
.btn, .icon-btn, .card-act, .card-expand, .chip, .seg-btn, .col-add, .wd-add,
.wd-del, .wt-del, .log-del, .dotflag.note, .pmt-group-head, .pmt-user-head,
.import-group-title.auto-toggle, .pmt-unmap, .pmt-add-btn, .import-edit-btn,
.import-new-btn, .theme-toggle, .view-as-toggle, .lock-submit {
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:scale var(--t-press), color var(--t-color), background var(--t-color),
             border-color var(--t-color), box-shadow var(--t-color), transform var(--t-move);
}
.btn:active, .icon-btn:active, .card-act:active, .card-expand:active, .chip:active,
.seg-btn:active, .col-add:active, .wd-add:active, .wd-del:active, .wt-del:active,
.log-del:active, .dotflag.note:active, .pmt-unmap:active, .pmt-add-btn:active,
.import-edit-btn:active, .import-new-btn:active, .theme-toggle:active,
.view-as-toggle:active, .lock-submit:active { scale:.94; }
.btn:active, .lock-submit:active { scale:.975; }
.pmt-group-head:active, .pmt-user-head:active, .import-group-title.auto-toggle:active { scale:.995; }
.btn[disabled]:active, .icon-btn[disabled]:active { scale:1; }

/* ==================== 2. טיפוגרפיה שמכבדת את הדפדפן ===================== */
/* body היה נעול ל-16px וביטל את הגדרת גודל הטקסט. עכשיו הוא נגזר ממנה —
   אבל עם תקרה.
   ---------------------------------------------------------------------
   למה clamp ולא 100%: אחרי המעבר ל-rem, מכשיר שבו הגדרת גודל הטקסט של
   המערכת היא 120% הציג את כל האתר גדול ב-20% (16px -> 19.2px בשורש),
   וזה נראה כאילו הדף נפתח בזום. התקרה שומרת על הפריסה, והרצפה מונעת
   טקסט זעיר. זום של הדפדפן עצמו עדיין עובד במלואו ומגדיל הכל, ולכן מי
   שצריך טקסט גדול מאוד עדיין יכול. */
html { font-size:clamp(15px, 100%, 16px); }
/* ---------------------------------------------------------------------
   רקע על html ולא רק על body.
   באייפון הרצועה מאחורי האי הצף והשעון, וגם אזור ה-overscroll כשמותחים
   את הדף, נצבעים לפי html. ל-html לא היה רקע כלל ולכן הם יצאו לבנים.
   var(--bg) הוא בדיוק נקודת ההתחלה של הגרדיאנט ב-.bg-glows, אז הרצועה
   מתחברת לדף בלי קו הפרדה. משתנה עם הערכה כמו כל השאר.
   --------------------------------------------------------------------- */
html { background:var(--bg); }
/* בטלפון: גודל קבוע לחלוטין. תקרה של 17px עדיין נתנה 6% מעל המקור וזה
   נקרא כזום. 16px = בדיוק הגודל שהעיצוב תוכנן אליו.
   המחיר: הגדרת גודל טקסט של המערכת לא משפיעה יותר בטלפון. זום של הדפדפן
   עצמו כן ממשיך לעבוד, ולכן ההגדלה עדיין אפשרית ידנית. */
@media (max-width:760px) {
  html { font-size:16px; }
}
body { font-size:1rem; }
.brand-title { font-size:clamp(1.25rem,2.6vw,1.63rem); }
.kpi-num { font-size:clamp(1.56rem,3.2vw,2.13rem); }
.kpi-label { font-size:.78rem; }
.card-name { font-size:.97rem; }
.pill, .pkg-badge { font-size:.75rem; }
.section-title { font-size:1.06rem; }
.section-sub { font-size:.81rem; }
.btn { font-size:.91rem; min-height:2.75rem; }
.seg-btn { font-size:.88rem; min-height:2.38rem; }
.select, .input { font-size:.91rem; min-height:2.75rem; }
.modal-head h2 { font-size:1.13rem; }
.field label { font-size:.84rem; }
.table tbody td { font-size:.88rem; }
.table thead th { font-size:.78rem; }
.lock-title { font-size:1.56rem; }
.lock-sub { font-size:.88rem; }
.pmt-kpi-num { font-size:clamp(1.25rem,2.6vw,1.63rem); }
.pmt-kpi-label { font-size:.75rem; }

/* ================== 3. tracking שלילי על טקסט תצוגה ===================== */
/* אותיות וספרות נפרשות ככל שהן גדלות. הטקסט הקטן נשאר חיובי כפי שהיה. */
.kpi-num { letter-spacing:-.022em; }
.board-capital .bc-num { letter-spacing:-.025em; }
.pmt-capital .pmt-kpi-num { letter-spacing:-.022em; }
.lock-title { letter-spacing:-.02em; }
.brand-title { letter-spacing:-.02em; }
.modal-head h2 { letter-spacing:-.015em; }
.section-title { letter-spacing:-.01em; }

/* ================= 4. reduced-motion עדין, לא פטיש ====================== */
/* הכלל הקודם אפס transition-duration על * והרג גם fade של צבע, שלא גורם
   סחרחורת לאף אחד. כאן התזוזה נעלמת והצבע נשאר. */
@media (prefers-reduced-motion: reduce) {
  :root { --t-move:.01ms; --t-press:.01ms; }
  .card:hover, .kpi:hover, .log-card:hover, .btn:hover, .btn.primary:hover,
  .btn.danger:hover, .wt-row:hover { transform:none !important; }
  .live-dot { animation:none !important; }

  /* משוב לחיצה בלי תזוזה: הבהוב עדין שעובד גם על כפתור עם גרדיאנט.
     אסור להחליף background — .btn.primary הוא סגול עם טקסט לבן, ורקע
     בהיר היה הופך את הכיתוב לבלתי-נראה. */
  .btn:active, .icon-btn:active, .card-act:active, .card-expand:active,
  .chip:active, .seg-btn:active, .col-add:active, .wd-add:active,
  .wd-del:active, .wt-del:active, .log-del:active {
    scale:1; filter:brightness(.92);
  }

  /* styles.css:668 מאפס transition-duration על * עם !important.
     בין שתי הצהרות !important מכריעה הספציפיות, ולכן סלקטור-מחלקה
     עם !important מחזיר את מעברי הצבע — ורק אותם. */
  .btn, .icon-btn, .card-act, .card-expand, .chip, .seg-btn, .col-add,
  .wd-add, .wd-del, .wt-del, .log-del, .table tbody tr, .switch, .switch-track,
  .select, .input, .card, .kpi, .pmt-group-head, .pmt-user-head {
    transition-property: color, background-color, border-color, box-shadow, filter !important;
    transition-duration: .17s !important;
  }
}

/* ============ 5. שקיפות מופחתת + ניגודיות מוגברת ======================== */
@media (prefers-reduced-transparency: reduce) {
  /* styles.css מגדיר [data-theme="light"] .topbar עם ספציפיות 0,2,0 —
     סלקטור מחלקה בודד לא היה גובר עליו, והתיקון לא היה חל בערכה הבהירה. */
  .topbar, [data-theme="light"] .topbar, [data-theme="dark"] .topbar {
    background:var(--card) !important;
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  }
  .modal-backdrop { background:var(--scrim); backdrop-filter:none !important; }
  .table thead th { backdrop-filter:none !important; }
  .bg-glows, .bg-dots { display:none; }
}
@media (prefers-contrast: more) {
  :root { --card-edge:rgba(109,31,204,.55); --card-edge-on:rgba(109,31,204,.78);
          --muted:#4A3A78; --muted2:#5B4A8C; --line:rgba(109,31,204,.30); }
  [data-theme="dark"] { --muted:#B4A6D8; --muted2:#9C8EC4; }
  .topbar, .card, .kpi, .modal, .wt-row, .table-wrap, .col, .pmt-group, .log-card {
    border-width:2px; backdrop-filter:none;
  }
  .pill, .chip, .pkg-badge, .role-pill, .live-pill, .col-count, .pmt-badge { border-width:2px; }
  .card::before, .kpi::before { height:5px; }
  :focus-visible { outline-width:3px; }
}

/* =============== 6. כותרת טבלה אטומה + scroll-edge ====================== */
/* היה משטח שקוף מעל משטח צבוע — שורות שנגללות נראו דרך הכותרת. */
.table thead th {
  background:var(--card) !important;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom:none;
  box-shadow:0 1px 0 var(--card-edge), 0 10px 12px -12px rgba(109,31,204,.45);
}
[data-theme="dark"] .table thead th { box-shadow:0 1px 0 var(--card-edge), 0 10px 12px -12px rgba(0,0,0,.7); }

/* ============ 7. שני באגי פריסה שנחשפו ב-24 לקוחות ===================== */
/* א. מסלול 232px נתן 5 עמודות וכרטיס צר, ושם ארוך עם שני דגלים נשבר
      לשלוש שורות. 264px => 4 עמודות רחבות וכל השמות בשורה אחת.
      **רק בדסקטופ** — בטלפון styles.css מגדיר `1fr 1fr`, ומסלול של 264px
      היה מקריס אותו לעמודה אחת בין 481 ל-566px. */
@media (min-width:761px) {
  .active-grid { grid-template-columns:repeat(auto-fill, minmax(264px,1fr)); }
}
/* ב. אריח הזהב תוכנן למונה דו-ספרתי ו-$123,100 נחתך בו.
      גם כאן רק בדסקטופ: flex-basis עם ספציפיות 0,2,0 היה גובר על
      `.kpi { flex:1 1 calc(50% - 6px) }` של המובייל ושובר את השורה. */
@media (min-width:761px) {
  .kpi.k-withdrawals { flex-basis:12.5rem; }
}
.k-withdrawals .kpi-num { font-size:clamp(1.25rem,2.4vw,1.72rem); letter-spacing:-.02em; }

/* מטרת מגע: styles.css מגדיל את .card-act ל-36px בטלפון אבל שוכח את
   .card-expand, שהוא דווקא הפקד הראשי בכרטיס. משווים ביניהם. */
@media (max-width:760px) {
  .card-expand { width:36px; height:36px; }
  .card-expand svg { width:17px; height:17px; }
}

/* ================== 8. פאנלים מתקפלים מונפשים ========================== */
/* ה-JS מנפיש height+opacity; כאן רק ה-overflow שמאפשר את זה. */
.card-details, .pmt-group-body, .pmt-user-body, .import-auto-body { overflow:hidden; }

/* ========================= 9. גרירת כרטיס ============================== */
/* סמן הגרירה רק למנהל. צופה לא יכול לגרור, ואסור להבטיח לו שכן. */
body.is-admin #boardView .card { cursor:grab; }
body.is-dragging-card { cursor:grabbing; user-select:none; }
body.is-dragging-card .card { cursor:grabbing; }
.card.is-dragging {
  pointer-events:none; scale:1.03; rotate:-1.2deg;
  box-shadow:0 30px 60px -20px rgba(109,31,204,.55), 0 0 0 1px var(--card-edge-on) !important;
  transition:scale .16s ease-out, rotate .16s ease-out;
}
[data-theme="dark"] .card.is-dragging { box-shadow:0 30px 60px -20px rgba(0,0,0,.75), 0 0 0 1px var(--p1) !important; }
.card.is-landing { scale:1; rotate:0deg; transition:scale .22s ease-out, rotate .22s ease-out; }
.card-ph {
  border:2px dashed var(--card-edge-on); border-radius:var(--r-md);
  background:color-mix(in srgb, var(--p1) 7%, transparent);
}
.col.is-drop-target, #activeGrid.is-drop-target {
  outline:2px solid color-mix(in srgb, var(--c, var(--green)) 70%, transparent);
  outline-offset:3px; border-radius:var(--r-lg);
  background:color-mix(in srgb, var(--c, var(--green)) 8%, transparent) !important;
}
#activeGrid.is-drop-target { --c:var(--green); padding:6px; }
.col-count.is-preview {
  color:#fff; background:var(--c) !important; border-color:var(--c) !important;
  transition:background var(--t-color), color var(--t-color);
}
.card.is-kb-grabbed {
  outline:2px solid var(--p1); outline-offset:3px;
  box-shadow:0 18px 40px -18px rgba(109,31,204,.6) !important; scale:1.02;
}
.toast.has-undo { padding-inline-end:6px; }
.toast-undo {
  margin-inline-start:8px; padding:5px 11px; border-radius:8px;
  font-size:.81rem; font-weight:700; color:var(--p-ink);
  background:var(--p-soft); border:1px solid var(--card-edge-on);
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:scale var(--t-press), background var(--t-color), color var(--t-color);
}
.toast-undo:hover { background:color-mix(in srgb, var(--p1) 18%, transparent); color:var(--p1); }
.toast-undo:active { scale:.94; }
@media (prefers-reduced-motion: reduce) {
  .card.is-dragging { scale:1; rotate:0deg; transition:none; }
  .card.is-landing { transition:none; }
}

/* ==================== 10. כרטיסיית "מוקד תשומת לב" ===================== */
.seg-btn .seg-badge {
  min-width:18px; height:18px; padding:0 5px; margin-inline-start:5px;
  display:inline-grid; place-items:center; border-radius:999px;
  font-family:'Rubik',sans-serif; font-weight:800; font-size:10.5px;
  font-variant-numeric:tabular-nums; color:#fff; background:var(--red);
}
.seg-btn.is-active .seg-badge { color:var(--red-hi); background:#fff; }
.seg-btn .seg-badge.calm { background:var(--green); }
.seg-btn.is-active .seg-badge.calm { color:var(--green-hi); background:#fff; }
/* מונה נייטרלי: לפגישות אין דחיפות, ואדום היה מייצר לחץ שווא. אדום שמור
   להתראות בלבד — כך הוא שומר על המשמעות שלו. */
.seg-btn .seg-badge.mute { background:var(--muted); color:#fff; }
.seg-btn.is-active .seg-badge.mute { color:var(--text2); background:#fff; }

.attn {
  margin-bottom:20px; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(180deg, var(--card), var(--card2));
  border:1px solid var(--card-edge); box-shadow:var(--shadow-soft), var(--glass-hi);
}
.attn-head {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:14px 18px; border-bottom:1px solid var(--line);
  background:linear-gradient(90deg, color-mix(in srgb, var(--p1) 9%, transparent), transparent 70%);
}
.attn-ico { width:18px; height:18px; flex:none; color:var(--p-ink); }
.attn-ico svg { width:100%; height:100%; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.attn-title { font-family:'Rubik',sans-serif; font-weight:700; font-size:1rem; letter-spacing:-.012em; color:var(--text); }
.attn-count {
  min-width:24px; height:24px; padding:0 8px; display:grid; place-items:center; border-radius:999px;
  font-family:'Rubik',sans-serif; font-weight:800; font-size:12.5px; color:#fff;
  background:linear-gradient(135deg,var(--red),#B01810); font-variant-numeric:tabular-nums;
}
.attn-count.calm { background:linear-gradient(135deg,var(--green),var(--green-hi)); }
.attn-sub { margin-inline-start:auto; font-size:.78rem; color:var(--muted); }
.attn-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.attn-item {
  display:flex; align-items:center; gap:12px; width:100%; padding:13px 18px;
  text-align:start; background:none; border:none; border-bottom:1px solid var(--line);
  color:var(--text); cursor:pointer; --sev:var(--muted);
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:scale var(--t-press), background var(--t-color);
}
.attn-item:last-child { border-bottom:none; }
.attn-item:hover { background:var(--surface); }
.attn-item:active { scale:.995; }
.attn-item.sev-hi { --sev:var(--red); }
.attn-item.sev-mid { --sev:var(--amber); }
.attn-item.sev-good { --sev:var(--green); }
.attn-dot { flex:none; width:10px; height:10px; border-radius:50%; background:var(--sev);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--sev) 18%, transparent); }
[data-theme="dark"] .attn-dot { box-shadow:0 0 10px var(--sev), 0 0 0 3px color-mix(in srgb, var(--sev) 18%, transparent); }
.attn-name { font-family:'Rubik',sans-serif; font-weight:700; font-size:.91rem; flex:none; }
.attn-why { font-size:.84rem; color:var(--text2); min-width:0; }
.attn-why b { font-variant-numeric:tabular-nums; color:var(--sev); font-weight:700; }
.attn-tag {
  margin-inline-start:auto; flex:none; padding:3px 9px; border-radius:999px;
  font-size:11.5px; font-weight:700; white-space:nowrap; color:var(--sev);
  background:color-mix(in srgb, var(--sev) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--sev) 34%, transparent);
}
.attn-go { flex:none; width:16px; height:16px; color:var(--muted2); }
.attn-go svg { width:100%; height:100%; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.attn-empty { padding:24px 18px; text-align:center; color:var(--muted); font-size:.88rem; }

@keyframes attnPing {
  0%   { box-shadow:0 0 0 0 color-mix(in srgb, var(--p1) 55%, transparent); }
  100% { box-shadow:0 0 0 14px transparent; }
}
.card.is-target { animation:attnPing .9s ease-out 2; border-color:var(--p1) !important; }
@media (prefers-reduced-motion: reduce) { .card.is-target { animation:none; } }

.focus-legend {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 16px; border-radius:var(--r-md); font-size:.78rem; color:var(--muted);
  background:var(--surface); border:1px solid var(--card-edge);
}
.focus-legend b { font-family:'Rubik',sans-serif; color:var(--text2); font-weight:700; }
.focus-legend .fl-item { display:inline-flex; align-items:center; gap:6px; }
.focus-legend .fl-dot { width:9px; height:9px; border-radius:50%; }
.fl-dot.hi { background:var(--red); } .fl-dot.mid { background:var(--amber); } .fl-dot.good { background:var(--green); }

/* מובייל: הטאבים כבר נשברים לשתי שורות, השישי לא מחמיר את זה */
@media (max-width:480px) {
  .seg-btn { flex:1 1 calc(33.333% - 3px); }
  .attn-item { padding:11px 14px; }
  .attn-tag { margin-inline-start:0; }
}

/* ============================================================================
   סבב 10 — תיקוני משוב מהאתר החי
   ========================================================================== */

/* -------- 10.1 יישור כרטיסים: מקטע "ממתינים" בתוך התג, לא תג שני --------
   תג נפרד גלש לשורה שנייה רק אצל חלק מהלקוחות והגביה דווקא אותם, מה ששבר
   את יישור השורה ברשת. עכשיו כל הכרטיסים באותו גובה. */
.pkg-badge { white-space:nowrap; }
.pkg-wait {
  display:inline-flex; align-items:center; margin-inline-start:6px;
  padding:1px 6px; border-radius:999px;
  font-family:'Rubik',sans-serif; font-size:.72rem; font-weight:700;
  font-variant-numeric:tabular-nums; line-height:1.5;
  color:var(--amber-hi); background:var(--amber-bg);
  border:1px solid var(--amber-bdr);
  /* בלי הבידוד ה-bidi של הסביבה העברית הופך "‎+2" ל-"2+" */
  unicode-bidi:isolate;
}

/* -------- 10.2 טבלה בטלפון: שורות נערמות ככרטיסים --------
   min-width:760px בתוך overflow-x:auto דחף את רוב העמודות מחוץ למסך והכריח
   גלילה אופקית. מתחת ל-600px הטבלה נפרסת לכרטיס לכל לקוח, עם התווית של כל
   שדה מגיעה מ-data-label שנכתב ב-rowHTML. */
@media (max-width:600px) {
  .table-wrap { overflow-x:visible; border:none; background:none; box-shadow:none; border-radius:0; }
  .table { min-width:0; display:block; }
  .table thead { display:none; }
  .table tbody { display:flex; flex-direction:column; gap:10px; }

  .table tbody tr {
    display:block; position:relative; overflow:hidden;
    padding:14px 15px; border-radius:var(--r-md);
    background:var(--card); border:1px solid var(--card-edge); box-shadow:var(--shadow-soft);
  }
  .table tbody tr:hover { background:var(--card); }
  /* פס הסטטוס בראש הכרטיס — אותו קוד צבע כמו בלוח */
  .table tbody tr::before {
    content:''; position:absolute; inset-block-start:0; inset-inline:0;
    height:3px; background:var(--c, var(--p3));
  }

  /* space-between => תווית בקצה ההתחלה, ערך בקצה הסיום. שתי עמודות
     מיושרות גם כשאורכי התוויות שונים. */
  .table tbody td {
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; padding:6px 0; border-bottom:none; text-align:end;
  }
  .table tbody td[data-label]::before {
    content:attr(data-label); flex:none;
    font-size:.75rem; font-weight:600; color:var(--muted); text-align:start;
  }
  .table tbody td.cell-name {
    padding:2px 0 10px; margin-bottom:4px;
    font-size:1rem; border-bottom:1px solid var(--line);
  }
  .table tbody td.cell-notes { align-items:flex-start; }
  .table tbody td.actions { justify-content:flex-end; gap:8px; padding-top:10px; }
  /* body.is-admin td.admin-only מוגדר table-cell עם important ב-styles.css
     ולכן חייב עקיפה מפורשת. לצופה זה לא נוגע — .admin-only נשאר none. */
  body.is-admin .table tbody td.admin-only { display:flex !important; }

  .cell-wait { white-space:normal; }
  .cell-notes { max-width:none; white-space:normal; }
}

/* ============================================================================
   סבב 11 — סינון במוקד · לוח פגישות · גרפי מגמה
   ========================================================================== */

/* ------------------------- 11.1 שבבי סינון במוקד ------------------------- */
.attn-filters {
  display:flex; gap:8px; flex-wrap:wrap;
  padding:12px 18px; border-bottom:1px solid var(--line);
}
.attn-chip {
  display:inline-flex; align-items:center; gap:7px;
  min-height:34px; padding:0 13px; border-radius:999px;
  font-size:.82rem; font-weight:600; color:var(--muted);
  background:var(--surface); border:1px solid var(--card-edge);
  transition:color var(--t), background var(--t), border-color var(--t);
}
.attn-chip:hover { color:var(--text); border-color:var(--card-edge-on); }
.attn-chip.is-active { color:#fff; background:linear-gradient(135deg,var(--p1),var(--p2)); border-color:transparent; }
.attn-chip .ac-n {
  min-width:1.35rem; padding:1px 5px; border-radius:999px; text-align:center;
  font-family:'Rubik',sans-serif; font-size:.72rem; font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--text2); background:var(--surface2); border:1px solid var(--card-edge);
}
.attn-chip.is-active .ac-n { color:var(--p-ink); background:#fff; border-color:transparent; }

/* --------------------------- 11.2 לוח פגישות --------------------------- */
.mt-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.mt-tabs { display:inline-flex; gap:4px; padding:4px; border-radius:999px;
  background:var(--surface); border:1px solid var(--card-edge); }
.mt-tab { min-height:36px; padding:0 16px; border-radius:999px;
  font-size:.86rem; font-weight:600; color:var(--muted);
  transition:color var(--t), background var(--t); }
.mt-tab:hover { color:var(--text); }
.mt-tab.is-active { color:#fff; background:linear-gradient(135deg,var(--p1),var(--p2)); }
.mt-toggle { display:inline-flex; align-items:center; gap:8px; margin-inline-start:auto;
  font-size:.84rem; color:var(--text2); cursor:pointer; }
.mt-toggle input { width:16px; height:16px; accent-color:var(--p1); cursor:pointer; }

.mt-stats { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.mt-stat {
  display:flex; align-items:baseline; gap:8px; flex:1 1 8.5rem;
  padding:12px 15px; border-radius:var(--r-md);
  background:var(--card); border:1px solid var(--card-edge); box-shadow:var(--shadow-soft);
  border-inline-start:3px solid var(--mc, var(--p3));
}
.mt-stat b { font-family:'Rubik',sans-serif; font-size:1.5rem; font-weight:800;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--mc, var(--text)); }
.mt-stat span { font-size:.79rem; color:var(--muted); }
.mt-stat.ms-none { --mc:var(--muted); }
.mt-stat.ms-set  { --mc:var(--p3); }
.mt-stat.ms-done { --mc:var(--green); }
.mt-stat.ms-week { --mc:var(--amber); }
.mt-stat.ms-over { --mc:var(--red); }

.mt-next { margin-bottom:16px; padding:14px 16px; border-radius:var(--r-lg);
  background:var(--card); border:1px solid var(--card-edge); box-shadow:var(--shadow-soft); }
.mt-next-title { display:flex; align-items:center; gap:8px; margin:0 0 10px;
  font-family:'Rubik',sans-serif; font-size:.92rem; font-weight:700; color:var(--text); }
.mt-next-title svg { width:16px; height:16px; stroke:currentColor; stroke-width:2; fill:none;
  stroke-linecap:round; stroke-linejoin:round; color:var(--p-ink); }
.mt-next-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.mt-next-item { display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:var(--r-sm);
  font-size:.86rem; cursor:pointer; transition:background var(--t); }
.mt-next-item:hover { background:var(--surface); }
.mt-next-name { font-family:'Rubik',sans-serif; font-weight:700; color:var(--text); }
.mt-next-when { margin-inline-start:auto; color:var(--text2); font-size:.82rem; }

.mt-pill { display:inline-flex; align-items:center; padding:4px 11px; border-radius:999px;
  font-size:.76rem; font-weight:600; white-space:nowrap;
  color:var(--mc); background:var(--mbg); border:1px solid var(--mbd); }
.mt-pill.ms-none { --mc:var(--muted); --mbg:var(--surface2); --mbd:var(--card-edge); }
.mt-pill.ms-set  { --mc:var(--p-ink); --mbg:var(--p-soft); --mbd:var(--card-edge-on); }
.mt-pill.ms-done { --mc:var(--green-hi); --mbg:var(--green-bg); --mbd:var(--green-bdr); }

.mt-table { min-width:620px; }
.mt-name { font-family:'Rubik',sans-serif; font-weight:600; color:var(--text); white-space:nowrap; }
.mt-age { color:var(--muted); font-size:.82rem; }
.mt-age b { color:var(--text2); font-variant-numeric:tabular-nums; }
.mt-when { color:var(--text2); font-size:.84rem; }
.mt-when.muted { color:var(--muted2); }
.mt-when.is-past { color:var(--red-hi); font-weight:600; }
.mt-past-tag { display:inline-flex; align-items:center; margin-inline-start:8px;
  padding:2px 8px; border-radius:999px; font-size:.7rem; font-weight:700;
  color:var(--red-hi); background:rgba(220,38,38,.10); border:1px solid rgba(220,38,38,.28); }
.mt-done-at { color:var(--green-hi); font-size:.82rem; font-weight:600; }
.mt-acts { white-space:nowrap; }
.mt-acts .card-act { display:inline-grid; }
.mt-empty { padding:26px 10px; text-align:center; color:var(--muted); font-size:.88rem; }
/* לקוח שממתין מעבר לסף — פס אדום בהתחלת השורה */
.mt-row.is-overdue td:first-child { box-shadow:inset -3px 0 0 var(--red); }
.mt-done { color:var(--green-hi); }

/* --------------------------- 11.3 גרפי מגמה --------------------------- */
.trends { display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem,1fr)); gap:12px; margin-bottom:18px; }
.trend { position:relative; overflow:hidden; padding:15px 16px 10px; border-radius:var(--r-lg);
  background:var(--card); border:1px solid var(--card-edge); box-shadow:var(--shadow-soft); }
.trend::before { content:''; position:absolute; inset-block-start:0; inset-inline:0; height:3px;
  background:var(--tc); }
.trend-top { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.trend-label { font-size:.8rem; font-weight:600; color:var(--muted); }
.trend-num { font-family:'Rubik',sans-serif; font-size:1.85rem; font-weight:800;
  letter-spacing:-.025em; font-variant-numeric:tabular-nums; color:var(--text); line-height:1.15; }
.trend-foot { display:block; margin-top:4px; font-size:.72rem; color:var(--muted2); }
.delta { margin-inline-start:auto; display:inline-flex; align-items:center; gap:3px;
  padding:2px 8px; border-radius:999px; font-size:.74rem; font-weight:700;
  font-variant-numeric:tabular-nums; unicode-bidi:isolate; }
.delta.up   { color:var(--green-hi); background:var(--green-bg); }
.delta.down { color:var(--red-hi);   background:rgba(220,38,38,.10); }
.delta.flat { color:var(--muted);    background:var(--surface2); }
/* בכיוון הפוך: ירידה ב"קרובים לשריפה" היא חדשות טובות */
.trend.inverse .delta.up   { color:var(--red-hi);   background:rgba(220,38,38,.10); }
.trend.inverse .delta.down { color:var(--green-hi); background:var(--green-bg); }

.spark { display:block; width:100%; height:2.6rem; margin-top:8px; overflow:visible; }
.spark .sp-line { fill:none; stroke:var(--tc); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke; }
.spark .sp-dot  { fill:var(--tc); }
.spark .sp-halo { fill:var(--tc); opacity:.22; }
[data-theme="dark"] .spark .sp-line { filter:drop-shadow(0 0 4px var(--tc)); }
.t-connected  { --tc:var(--green); }
.t-payout     { --tc:#D4AF37; }
.t-burn       { --tc:var(--red); }
.t-withdrawn  { --tc:var(--p1); }
.trends-empty { padding:22px 14px; margin-bottom:18px; text-align:center; color:var(--muted); font-size:.86rem;
  border:1px dashed var(--card-edge); border-radius:var(--r-lg); }

@media (max-width:600px) {
  .mt-table { min-width:0; }
  .mt-head { gap:10px; }
  .mt-toggle { margin-inline-start:0; }
  .mt-stat { flex:1 1 7rem; padding:10px 12px; }
  .mt-stat b { font-size:1.25rem; }
  .trend-num { font-size:1.55rem; }
}

/* ============================================================================
   סבב 12 — סדר כרטיסיות · מיון טבלאות · אנימציית סינון · תיקוני מובייל
   ========================================================================== */

/* -------------------- 12.1 סדר הכרטיסיות (החלטת הבעלים) --------------------
   .seg הוא inline-flex, ולכן order קובע את סדר התצוגה בלי לגעת ב-DOM.
   כך focus.js ו-meetings.js יכולים להמשיך להוסיף את עצמם בסוף הרשימה.
   הסדר: לוח · חשבונות · התראות · פגישות · טבלה · לוג שבועי · ייבוא PMT */
.seg-btn[data-view="board"]    { order:1; }
.seg-btn[data-view="accounts"] { order:2; }
.seg-btn[data-view="focus"]    { order:3; }
.seg-btn[data-view="meetings"] { order:4; }
.seg-btn[data-view="table"]    { order:5; }
.seg-btn[data-view="weekly"]   { order:6; }
.seg-btn[data-view="import"]   { order:7; }

/* ------------------------- 12.2 מיון טבלאות -------------------------
   כותרת שאפשר ללחוץ עליה = מיון. מגלה את עצמו בלי להוסיף פקד חדש. */
.table th.sortable {
  cursor:pointer; user-select:none; white-space:nowrap;
  transition:color var(--t-color);
}
.table th.sortable:hover { color:var(--p1); }
.table th.sortable::after {
  content:''; display:inline-block; width:0; height:0; margin-inline-start:6px;
  vertical-align:middle; opacity:.28;
  border-inline-start:4px solid transparent; border-inline-end:4px solid transparent;
  border-block-end:5px solid currentColor;
}
.table th.sortable.sort-desc::after { border-block-end:none; border-block-start:5px solid currentColor; }
.table th.sortable.sort-asc::after, .table th.sortable.sort-desc::after { opacity:1; }
.table th.sortable:focus-visible { outline:2px solid var(--p1); outline-offset:-2px; border-radius:6px; }

/* שורת פקדים לתצוגות שאינן טבלה (חשבונות) */
.sort-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.sort-bar label { font-size:.8rem; font-weight:600; color:var(--muted); }
.sort-bar .select { min-height:2.38rem; padding-block:0; font-size:.85rem; width:auto; min-width:11rem; }
.sort-bar .sort-search { flex:1 1 12rem; min-width:0; }

/* -------------------- 12.3 אנימציית סינון (מהירה) --------------------
   קפיצה מיידית קראה כתקלה. 140ms מספיקים כדי לקרוא כתנועה מכוונת
   ולא מספיקים כדי להרגיש איטיים. */
/* ---------------------------------------------------------------------
   למה מתחילים מ-opacity:.5 ולא מ-0:
   האנימציה משתמשת ב-fill:backwards, כלומר לפני שהיא מתחילה מוחל הפריים
   הראשון. אם ציר הזמן של האנימציות קופא (טאב ברקע, דפדפן בלי compositor),
   הפריים הראשון נשאר מוחל לנצח — ועם opacity:0 המשמעות היא רשימה ריקה
   לגמרי. חצי שקיפות + הזזה של 5px נותנים בדיוק את אותה תחושת תנועה,
   ובמצב הגרוע ביותר התוכן עדיין קריא.
   --------------------------------------------------------------------- */
@keyframes filterIn { from { opacity:.5; transform:translateY(5px); } to { opacity:1; transform:none; } }
.attn-list.is-filtering > li { animation:filterIn .14s cubic-bezier(.22,.61,.36,1) backwards; }
.attn-list.is-filtering > li:nth-child(1) { animation-delay:0ms; }
.attn-list.is-filtering > li:nth-child(2) { animation-delay:12ms; }
.attn-list.is-filtering > li:nth-child(3) { animation-delay:24ms; }
.attn-list.is-filtering > li:nth-child(4) { animation-delay:36ms; }
.attn-list.is-filtering > li:nth-child(5) { animation-delay:48ms; }
.attn-list.is-filtering > li:nth-child(n+6) { animation-delay:60ms; }
@media (prefers-reduced-motion: reduce) {
  .attn-list.is-filtering > li { animation:none; }
}

/* ---------------- 12.4 כפתור קביעת פגישה — גלוי, לא אייקון ----------------
   עיפרון קטן בפינה לא נקרא כ"קבע פגישה". כפתור עם מילים כן. */
.mt-set {
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  min-height:2.13rem; padding:0 12px; border-radius:999px;
  font-size:.8rem; font-weight:600;
  color:#fff; background:linear-gradient(135deg,var(--p1),var(--p2));
  border:1px solid transparent; box-shadow:0 6px 16px -10px rgba(139,48,255,.9);
}
.mt-set svg { width:14px; height:14px; stroke:currentColor; stroke-width:2.2; fill:none;
  stroke-linecap:round; stroke-linejoin:round; }
.mt-set:hover { filter:brightness(1.06); }
.mt-set.is-change {
  color:var(--p-ink); background:var(--p-soft);
  border-color:var(--card-edge-on); box-shadow:none;
}
.mt-set.is-change:hover { background:color-mix(in srgb, var(--p1) 16%, transparent); }

/* ---------------- 12.5 קפיצה במסך הכניסה (באג ותיק) ----------------
   .lock-card השתמש ב-@keyframes pop, שנכתב עבור מודאלים. מודאל ממורכז
   באמצעות transform:translate(50%,-50%), ולכן הפריים הראשון של pop כולל
   את ההזזה הזאת. אבל .lock-card ממורכז על ידי place-items:center של
   ההורה — הוא לא צריך שום transform. התוצאה: הכרטיס נפתח 210px ימינה
   ו-176px למעלה, ובמשך 0.3 שניות זוחל למרכז.
   כאן אותה כניסה בדיוק (אותה עקומה, אותו משך) בלי ההזזה המיותרת. */
@keyframes lockPop { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:none; } }
.lock-card { animation:lockPop .3s cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce) {
  .lock-card { animation:none; }
}

/* ------------------------ 12.6 תיקוני מובייל ------------------------ */
@media (max-width:600px) {
  /* הפס האדום ישב על התא הראשון, שבמצב כרטיס הוא שורת השם — והקו חתך
     את השם. במצב כרטיס הסימון עובר לשורה כולה, כפס בהתחלה. */
  .mt-row.is-overdue td:first-child { box-shadow:none; }
  .mt-row.is-overdue {
    border-inline-start:3px solid var(--red);
    padding-inline-start:12px;
  }
  /* פס הסטטוס העליון לא אמור להתחיל מתחת לפס האדום */
  .mt-row.is-overdue::before { inset-inline-start:0; }

  /* ערך התא כיחידה אחת: תאריך והתג שלו נשארים צמודים ומיושרים לקצה */
  .mt-val { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap;
            justify-content:flex-end; text-align:end; }
  .mt-past-tag { margin-inline-start:0; }

  .mt-set { min-height:2.38rem; padding:0 14px; font-size:.84rem; }
  .sort-bar { gap:8px; }
  .sort-bar .select { flex:1 1 100%; min-width:0; }
}

/* ============================================================================
   סבב 13 — בוטל.
   ניסיון להקטין את הצפיפות במובייל (כותרת בשורה אחת, אריחים 3 בשורה,
   אייקון בצד המספר) הקטין אמנם את הגובה בחצי, אבל שבר את הטיפוגרפיה
   והיישור. הבעלים העדיף במפורש את המראה הקודם.
   מה שנשאר מהסבב הזה: **רק** נעילת גודל הפונט בסעיף 2 למעלה
   (html{font-size:16px} מתחת ל-760px), שהיא זו שפתרה את תחושת הזום.
   כל שאר כללי הצפיפות הוסרו.
   ========================================================================== */

/* ============================================================================
   סבב 14 — היררכיה, צבע סמנטי, וניקוי חזרות.
   נגזר מאודיט מדוד: 26 סגנונות טיפוגרפיה, 23 ערכי מרווח, 17 צבעי טקסט,
   ושבעה אריחים בגודל זהה שצועקים באותה עוצמה.
   ========================================================================== */

/* ============ 14.1 — בוטל ============
   ניסיתי שתי רמות באריחי הסיכום: אריחי פעולה (שריפה/משיכה) עם משטח מגוון
   ואייקון מלא, מול אריחי מידע ניטרליים. הבעלים העדיף את הצבעוניות
   המקורית בשתי הגרסאות שהוצעו. האריחים חוזרים בדיוק למה שהיו.
   מה שכן נשאר מסבב 14: הנמכת באנר ההון, עמודה לפי תוכן, והסרת החזרות. */
/* ============ 14.2 באנר ההון — יורד לרמה שנייה ============
   החלטת הבעלים: ההון שנסחר אינו מספר מרכזי. הוא היה 34px על כל רוחב
   המסך והתחרה עם שורת האריחים. עכשיו הוא שורת מידע, לא כותרת. */
.board-capital { padding:11px 16px; margin-bottom:14px; }
.board-capital .bc-num { font-size:1.13rem; letter-spacing:-.01em; }
.board-capital .bc-label { font-size:.8rem; color:var(--muted); font-weight:600; }
[data-theme="dark"] .board-capital .bc-num { text-shadow:none; }

/* ============ 14.3 עמודות אונבורדינג לפי תוכן ============
   שלוש עמודות ברוחב שווה, עם 1-2 כרטיסים בכל אחת, אכלו שליש מסך.
   עמודה מלאה מקבלת יותר מקום; ריקה מצטמצמת למינימום. */
.pipeline { align-items:start; }
.col { flex:1 1 auto; min-width:min(230px, 100%); }
.col:has(.col-empty) { flex:0 1 auto; min-width:180px; }
.col:has(.col-empty) .col-body { min-height:0; }
.col-empty { padding:10px 8px; font-size:.78rem; }

/* ============ 14.4 הסרת החזרה בכרטיסי הלוח ============
   בעמודה "מחכה לסטראדל" כל כרטיס נשא תג "מחכה לסטראדל". העמודה כבר
   אמרה את זה. התג יורד בלוח האונבורדינג בלבד — ברשת המחוברים הוא נשאר,
   שם אין כותרת עמודה שמספקת את המידע.
   במקומו ה-JS מזין "מחכה X ימים", שזה מידע חדש. */
#board .col .card .card-sub .pill { display:none; }
#board .col .card .card-sub:empty { display:none; margin:0; }
.card-wait {
  display:inline-flex; align-items:center; gap:5px;
  font-size:.75rem; font-weight:600; color:var(--muted);
}
.card-wait b { font-family:'Rubik',sans-serif; font-variant-numeric:tabular-nums; color:var(--text2); font-weight:700; }
/* מעל הסף — אותו אדום של ההתראות, כדי שהמשמעות תהיה עקבית */
.card-wait.is-late { color:var(--red-hi); }
.card-wait.is-late b { color:var(--red-hi); }

/* ============ 14.5 ניקוי טיפוגרפי ============
   אשכולות של 14.56 / 14.5 / 14.08 שהעין לא מבחינה ביניהם — מיושרים
   לשלוש מדרגות בלבד. */
.col-name, .chip, .col-add, .cell-flag, .pmt-badge { font-size:.85rem; }
.card-date, .detail-date, .log-meta, .trend-foot, .kpi-label { font-size:.75rem; }
.section-sub, .attn-sub, .mt-age, .mt-when { font-size:.8rem; }

/* ============================================================================
   סבב 15 — סולם הטיפוגרפיה בוטל.
   קיפלתי 32 גדלי טקסט ל-4 מדרגות. טכנית זה עבד (32 -> 23), אבל בשתי
   הגרסאות שהוצעו — הצמדה לתחתית האשכול ואז לראשו — הבעלים העדיף את
   הגדלים המקוריים. הסולם הוסר במלואו וכל טקסט חזר למה שהיה.
   מה שנשאר מסבב 15 הוא רק הסרת החזרה למטה, שאותה כן אהב.
   ========================================================================== */

/* ============ 15.2 החזרה: תג "מחובר" ברשת ============
   הסעיף כותרתו "לקוחות מחוברים ופעילים", וכל 19 הכרטיסים בתוכו נשאו תג
   "מחובר". זו אותה חזרה שהוסרה בלוח האונבורדינג, שורה אחת למטה.
   הצבע לא הולך לאיבוד — פס ההדגשה הירוק בראש הכרטיס נשאר.
   מוסתר רק כשהסטטוס הוא "מחובר"; כל סטטוס אחר שיגיע לרשת עדיין יציג תג,
   כי אז הוא באמת מוסיף מידע. */
#activeGrid .card.s-connected .card-sub .pill { display:none; }

/* ============ 16. תיעוד פגישה בכרטיס הלקוח ============
   ההחלטה: הפגישה שייכת ללקוח, לא לרשימה נפרדת. הטאב מציג רק את מה שנקבע
   או בוצע; התיעוד המלא יושב בפאנל שנפתח בחץ שעל הכרטיס. */
.detail-meeting {
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--text2);
}
/* בלי stroke ו-fill:none ה-SVG מצויר כריבוע מלא ולא כקו — אותה הגדרה
   בדיוק כמו .detail-date שמעליו, כדי ששתי השורות ייראו כמשפחה אחת. */
.detail-meeting svg { width:13px; height:13px; flex:none;
  stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.detail-meeting.is-done { color:var(--green-hi); }
.detail-meeting.is-past { color:var(--red-hi); font-weight:600; }

/* כפתור "הוסף פגישה" בכותרת הטאב */
.section-head .mt-add { margin-inline-start:auto; }

/* ============ 17. עמודת הפעולות בפגישות — מרומזת ============
   כפתור "שנה" מלא בכל שורה + כותרת "פעולות" נתנו לעמודה משקל של נתון.
   עכשיו: אייקון בלבד, עמוּם כברירת מחדל, מתחדד במעבר על השורה.
   בטלפון אין hover ולכן הוא מוצג במלואו תמיד. */
.mt-acts-col { width:1%; }
.mt-edit-ico {
  display:inline-grid; place-items:center; width:2rem; height:2rem;
  border-radius:9px; color:var(--muted2); opacity:.45;
  transition:opacity var(--t-color), color var(--t-color), background var(--t-color);
}
.mt-edit-ico svg { width:15px; height:15px; stroke:currentColor; stroke-width:2;
  fill:none; stroke-linecap:round; stroke-linejoin:round; }
.mt-row:hover .mt-edit-ico { opacity:1; color:var(--p-ink); }
.mt-edit-ico:hover { background:var(--p-soft); color:var(--p1); }
.mt-edit-ico:focus-visible { opacity:1; color:var(--p1); }
@media (hover:none) {
  .mt-edit-ico { opacity:.8; }
}