/* ═══════════════ חברות ואנשי קשר (F3) — סבב 6 ═══════════════
   רק טוקנים מ-app.css. הפלטה: פטרול --accent · טרהקוטה --hot · ספקטרום שלבים --st-*.
   סבב 6 §7: «חברות» ו«אנשי קשר» מסכים עצמאיים עם pageHead משלהם (לא עוד טאבים תחת
   «לקוחות» — הניווט מפריד ביניהם). §5: נקודת סטטוס צבעונית לאיש קשר, אווטאר הסוכן
   בשורת המשנה של הרשימה, כותרת מקטע עם קו קצר בצבע --accent (לא פס אפור לכל הרוחב).
   סבב 5: ארבע עמודות בכל אחת משתי הרשימות (ספירת הפרויקטים ירדה לשורת המשנה) ·
   צ'יפ **שלב** בכל מקום שמופיע בו סטטוס פרויקט · שני טאבים בכרטיסי החברה/איש הקשר.
   סבב 4 (§3–§4): אווטאר סוכן בטבלאות ובכרטיסים · קו-מפתח (.keyline) בשורות הפרויקטים ·
   שורות צפופות (שורה + תת-שורה אחת) · פחות מסגרות (כותרת מקטע עם קו במקום כרטיס
   בתוך כרטיס) · היררכיית טיפוגרפיה חזקה · בוררי 1–5 כנקודות מקטעיות.
   הכללים כאן שייכים ל-views/companies.js · company.js · contacts.js · contact.js
   ול-components/timeline.js (שמשותף גם למסך הפרויקט). */

/* ─── סרגל הסינון: מה שנפתח מתחת ל«עוד מסננים» ─── */
.more-filters .toolbar-picker{min-width:220px;max-width:300px;flex:1}
.more-filters .toolbar-picker .search{min-width:0;max-width:none}
.more-filters .picker-wrap .search input{padding:8px 0;font-size:13.5px}
.more-filters select{min-width:150px}
.toolbar .btn.sm.ghost.on{background:var(--accent-2);color:var(--accent);border-color:var(--accent-3)}

/* ─── תחתית הכרטיס: דפדוף ─── */
.card-f{display:flex;justify-content:center;padding:10px 14px;border-top:1px solid var(--rule-soft)}
.card-f:empty{display:none}
.pager{display:flex;align-items:center;gap:14px}

/* ─── שורת אייקוני קשר בטבלה (חיוג · וואטסאפ · מייל) ─── */
.icon-row{display:flex;align-items:center;gap:2px}
.icon-btn.tiny{width:30px;height:30px;border-radius:6px}
.icon-btn.tiny svg{width:15px;height:15px}
a.icon-btn{text-decoration:none!important}

/* ─── עזרי תא ─── */
.stack-lines{display:flex;flex-direction:column;gap:2px;font-size:13.5px;min-width:0}
/* עמודת «הקשר» של המשימות: שורה אחת לכל קישור עם קיצור — בלי זה השם נשבר לארבע שורות */
.stack-lines a{text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.stack-lines a:hover{text-decoration:underline}
.badge.tiny{font-size:10.5px;padding:1px 7px;margin-inline-start:6px;vertical-align:middle}
.chips.tiny{gap:5px}
.chips.tiny .badge{text-decoration:none;font-size:11.5px}
a.badge:hover{border-color:var(--accent);color:var(--accent)}
tr.dim td{opacity:.55}
tr.dim td.actions{opacity:1}
.hint.num{font-variant-numeric:tabular-nums}
.tbl .cell-sub .badge{margin-inline-end:5px}

/* ═══════════════ מקטע בלי מסגרת (סבב 4) ═══════════════
   כותרת קטנה + קו מפריד, במקום לעטוף כל רשימה ב-.card. פחות מסגרות, אותו מידע. */
.sect{margin-bottom:26px}
.sect:last-child{margin-bottom:0}
.sect-h{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap}
/* סבב 6 §5: קו קצר בצבע --accent מתחת לכותרת עצמה בלבד (לא פס אפור לרוחב כל השורה) — צבע במקום שחסר בו צבע */
.sect-h h2{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--muted);display:inline-flex;align-items:center;gap:7px;
  padding-bottom:7px;border-bottom:2px solid var(--accent)}
.sect-h .row{padding-bottom:9px}
.sect-h h2 .sect-n{font-variant-numeric:tabular-nums;color:var(--muted-2);font-weight:500}
.sect-h .row{gap:6px}
.sect-b{padding-top:2px}
.sect-b.pad{padding-top:14px}
.sect-b > .empty{padding:22px 10px}

/* ═══════════════ טבלת ישויות צפופה (סבב 4) ═══════════════
   שורה = שם (16.5px semibold במחשב, 17px בכרטיס) + תת-שורה אחת מושתקת (13px). */
.ent-tbl{background:transparent}
.ent-tbl th{background:transparent;padding:8px 10px;font-size:11.5px;letter-spacing:.04em;border-bottom:1px solid var(--rule-soft)}
.ent-tbl td{padding:9px 10px;border-bottom:1px solid var(--rule-soft);line-height:1.35}
.ent-tbl tr:last-child td{border-bottom:0}
.ent-tbl tr.link:hover td{background:var(--surface-2)}
.ent-tbl .cell-main{font-size:16.5px;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.ent-tbl a.cell-main{text-decoration:none}
.ent-tbl a.cell-main:hover{text-decoration:underline}
/* תת-שורה אחת: לא נשברת לשתי שורות — היא קובעת את הרוחב המינימלי של עמודת השם */
.ent-tbl .cell-sub{font-size:13px;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow:hidden}
.ent-tbl .cell-sub > a,.ent-tbl .cell-sub > span:not(.badge):not(.avatar){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ent-tbl td.title{min-width:172px}
/* תא ששומר על שורה אחת (טקסט ארוך נחתך עם ellipsis; הטקסט המלא ב-title) */
.ent-tbl .one-line{display:block;max-width:270px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* עמודת השם מקבלת את כל הרוחב הפנוי; שאר העמודות נצמדות לתוכן שלהן
   (בלי זה auto-layout מחלק את העודף בין כל העמודות והשם נדחס לשתי שורות) */
.ent-tbl th,.ent-tbl td{width:1%}
.ent-tbl th:first-child,.ent-tbl td.title{width:100%}

/* קו-מפתח בצבע השלב בתחילת שורת פרויקט (‏.keyline + st-<code> מ-app.css).
   ⚠ סבב 5 — באג שנמצא בבדיקה: ב-<tr> במצב טבלה ה-::before אינו תא, ולכן הדפדפן עוטף
   אותו ב**תא אנונימי** — נוצרת עמודת רפאים וכל שורת הכותרות מוסטת בעמודה שלמה מול הגוף
   (השם נדחס לשתי שורות). לכן במצב טבלה מבטלים את ::before של השורה ומציירים את הקו
   על התא הראשון; בנייד (‏.tbl.cards, שם ה-tr הוא בלוק) הקו נשאר על השורה כמו קודם. */
.tbl tr.keyline{position:relative}
@media(min-width:641px){
  .tbl tr.keyline::before{content:none}
  .tbl tr.keyline > td:first-child{position:relative;padding-inline-start:15px}
  .tbl tr.keyline > td:first-child::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;
    width:3px;border-radius:3px 0 0 3px;background:var(--st,var(--rule))}
}

/* ─── שורת השם + נקודת סטטוס (סבב 6 §5 — רשימת אנשי הקשר) ─── */
.name-line{display:inline-flex;align-items:center;gap:7px}
.name-line .dot{flex-shrink:0}

/* ─── אווטאר הסוכן בתא ─── */
.av-cell{display:inline-flex;align-items:center;gap:7px;min-width:0;max-width:100%}
.av-cell .av-name{font-size:13.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell-sub .avatar{margin-inline-start:2px}

/* ─── שורת עובדות בכרטיס — בלי מסגרת, שני קווים בלבד ─── */
.facts{
  display:flex;flex-wrap:wrap;gap:12px 30px;background:transparent;border:0;border-radius:0;box-shadow:none;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:13px 2px;margin-bottom:20px;
}
.facts .fact{display:flex;flex-direction:column;gap:3px;min-width:0}
.facts .f-k{font-size:11.5px;letter-spacing:.05em;color:var(--muted)}
.facts .f-v{font-size:15px;overflow-wrap:anywhere;display:flex;align-items:center;gap:6px;min-height:26px}
.facts .f-v a{text-decoration:none}
.facts .f-v a:hover{text-decoration:underline}

/* ─── select בסגנון צ'יפ — עריכה אינליין ─── */
.chip-select{
  appearance:none;-webkit-appearance:none;border:1px solid var(--rule);border-radius:20px;background:var(--surface);
  color:var(--ink-2);font-size:12.5px;padding:4px 26px 4px 12px;cursor:pointer;max-width:100%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;background-size:10px;
}
[dir=rtl] .chip-select{background-position:left 10px center;padding:4px 12px 4px 26px}
.chip-select:hover{border-color:var(--accent-3);color:var(--accent)}
.chip-select:disabled{opacity:.5}
.chip-select.dark{background-color:var(--ink);color:#fff;border-color:var(--ink)}
.chip-select.good{color:var(--success);border-color:var(--success-3);background-color:var(--success-2)}
.chip-select.bad{color:var(--danger);border-color:var(--danger-3);background-color:var(--danger-2)}
.tbl .chip-select{font-size:12px;max-width:140px}

/* ═══════════════ בורר 1–5 — נקודות מקטעיות (סבב 4) ═══════════════
   היה: חמישה ריבועים אפורים שנראו כמו placeholder. עכשיו: מסלול נקודות עם קריאה מספרית.
   השפעה = פטרול (--accent) · הקשר שלנו = טרהקוטה (--hot). הכפתור הוא יעד המגע, ::before הנקודה. */
.rate{display:inline-flex;align-items:center;gap:1px}
.rate-i{width:18px;height:26px;display:inline-grid;place-items:center;padding:0;background:none;border-radius:6px}
.rate-i::before{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--surface-3);
  box-shadow:inset 0 0 0 1px var(--rule);transition:background .12s,box-shadow .12s,transform .12s;
}
.rate-i.on::before{background:var(--inf-5);box-shadow:none;transform:scale(1.2)}
/* השפעה (סבב 8): גוון לכל רמה, מבהיר לכהה — --inf-1..5 ב-app.css */
.rate:not(.rel) .rate-i:nth-child(1).on::before{background:var(--inf-1)} .rate:not(.rel) .rate-i:nth-child(2).on::before{background:var(--inf-2)}
.rate:not(.rel) .rate-i:nth-child(3).on::before{background:var(--inf-3)} .rate:not(.rel) .rate-i:nth-child(4).on::before{background:var(--inf-4)}
.rate:not(.rel) .rate-i:nth-child(5).on::before{background:var(--inf-5)}
.rate.rel .rate-i.on::before{background:var(--rel-5)}
.rate.rel .rate-i:nth-child(1).on::before{background:var(--rel-1)} .rate.rel .rate-i:nth-child(2).on::before{background:var(--rel-2)}
.rate.rel .rate-i:nth-child(3).on::before{background:var(--rel-3)} .rate.rel .rate-i:nth-child(4).on::before{background:var(--rel-4)}
.rate.rel .rate-i:nth-child(5).on::before{background:var(--rel-5)}
.rate-i:hover::before{box-shadow:inset 0 0 0 1px var(--accent-3);transform:scale(1.15)}
.rate-i.on:hover::before{box-shadow:none}
.rate-i:focus-visible{outline:2px solid var(--accent);outline-offset:0}
.rate-n{font-size:11.5px;color:var(--ink-2);font-variant-numeric:tabular-nums;margin-inline-start:5px;min-width:14px}
.rate-n.none{color:var(--muted-2)}
.rate-wrap{display:inline-flex;align-items:center}

/* ─── אזהרת כפילות בטופס החברה ─── */
.dup-warn{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:var(--r-sm);
  background:var(--warn-2);border:1px solid var(--warn-3);color:var(--warn);font-size:13.5px}
.dup-warn svg{width:16px;height:16px;flex-shrink:0;margin-top:2px}
.dup-warn a{color:var(--warn)}
.field.full:has(> .dup-warn[hidden]){display:none}

/* ═══════════════ ציר זמן (components/timeline.js) ═══════════════
   סבב 4: לכל סוג פריט צבע אייקון משלו כדי שהפיד ייקרא בסריקה —
   מייל = פטרול · משימה = ענבר · סטטוס = צבע השלב · שיחה/פגישה = דיו · אודו = מידע. */
.tl-main{min-width:0}
.tl-ico.email{background:var(--accent-2);color:var(--accent)}
.tl-ico.task{background:var(--warn-2);color:var(--warn)}
.tl-ico.person{background:var(--surface-3);color:var(--ink)}
.tl-ico.status{background:var(--surface);color:var(--st,var(--ink));box-shadow:inset 0 0 0 1.5px var(--st,var(--rule))}
.tl-ico.odoo{background:var(--info-2);color:var(--info)}
.tl-ico.journey{background:var(--hot-2);color:var(--hot)}
.tl-ico.system{background:var(--surface-2);color:var(--muted)}
.tl-item{padding:10px 0}
.tl-head b{font-size:14px;font-weight:600}
/* «שינוי סטטוס»: היעד כצ'יפ שלב, לא טקסט מודגש (DESIGN-R8 §7) — המקור נשאר טקסט מושתק */
.tl-status{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:14px}
.tl-status .arrow{color:var(--muted-2)}
.tl-status .badge.st{font-size:12px}
.tl-kind{font-size:11.5px;color:var(--muted);border:1px solid var(--rule);border-radius:5px;padding:0 6px;white-space:nowrap}
.tl-who{font-size:12px;color:var(--muted)}
.tl-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:5px;font-size:12.5px}
.tl-ctx{color:var(--link);text-decoration:none}
.tl-ctx:hover{text-decoration:underline}
.tl-foot{display:flex;justify-content:center;padding-top:10px}
.tl-body .badge{margin-inline-start:6px}

/* ─── מובייל 375px ─── */
@media(max-width:900px){
  .facts{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;padding:13px 2px}
  .chip-select{min-height:44px;font-size:14px;border-radius:12px}
  .rate-i{width:44px;height:44px;border-radius:8px}
  .rate-i::before{width:14px;height:14px}
  .rate{gap:0}
  .icon-btn.tiny{width:44px;height:44px}
  .icon-btn.tiny svg{width:18px;height:18px}
  .more-filters select{flex:1;min-width:140px;min-height:44px}
  .more-filters .toolbar-picker{max-width:none;width:100%}
  .more-filters .picker-wrap .search input{min-height:42px;font-size:16px}
  .pager .btn{min-height:44px}
  .toolbar .seg{width:100%}
  .toolbar .seg button{flex:1;min-height:44px}
  .toolbar .search{width:100%;max-width:none}
  .ent-tabs .tabs button{min-height:44px}
  .sect{margin-bottom:20px}
}
@media(max-width:640px){
  .facts{grid-template-columns:1fr}
  .facts .fact{flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px}
  .facts .f-k{flex-shrink:0}
  .facts .f-v{justify-content:flex-end;text-align:end}
  /* בנייד כל שורה היא כבר כרטיס — המסגרת סביב הרשימה הופכת לכרטיס בתוך כרטיס */
  .list-card{background:none;border:0;box-shadow:none;border-radius:0}
  .list-card .tbl.cards tbody{padding:0}
  .list-card .card-f{border-top:0}
  /* בכרטיס בנייד חמש נקודות של 44px + התווית ממלאות את השורה — הקריאה המספרית
     מיותרת שם (התווית והנקודות הגדולות מספרות את הערך) ומוסתרת כדי למנוע גלישה */
  .tbl.cards .rate-n{display:none}
  .tbl.cards td .rate-wrap,.tbl.cards td .rate,.tbl.cards td .chip-select,.tbl.cards td .icon-row,
  .tbl.cards td .av-cell{margin-inline-start:auto}
  .tbl.cards td.actions .menu-wrap{margin-inline-start:auto}
  .tl-head .when{width:100%;margin-inline-start:0}
  /* כרטיס במקום שורה: השם גדול, הכל שאר מושתק; קו-המפתח עובר לקצה הכרטיס */
  .ent-tbl.cards tbody{gap:8px}
  .ent-tbl.cards tr{padding:12px 13px}
  .ent-tbl.cards td.title{font-size:17px;padding-bottom:8px}
  .ent-tbl.cards td.title .cell-main{font-size:17px}
  .ent-tbl.cards .cell-sub{flex-wrap:wrap}
  .ent-tbl.cards td{padding:5px 0}
  /* בכרטיסים ה-td הוא בלוק — צריך לבטל את רוחבי העמודות של תצוגת הטבלה */
  .ent-tbl.cards th,.ent-tbl.cards td{width:auto}
  /* בכרטיס יש רוחב לשורה שלמה — טקסט ארוך נשבר במקום להיחתך */
  .ent-tbl.cards .one-line{max-width:none;white-space:normal;overflow:visible;text-align:end}
  .tbl.cards tr.keyline > td:first-child{padding-inline-start:0}
}

/* ── ליטוש מובייל: רצפת טקסט 13px ── */
@media(max-width:900px){
  .badge.tiny,.chips.tiny .badge,.facts .f-k,.chip-select,.tbl .chip-select,.tl-kind,.tl-who,.tl-links,
  .rate-n,.av-cell .av-name,.sect-h h2,.tl-status .badge.st{font-size:13px}
  .more-filters .picker-wrap .search input{min-height:44px}
}

/* ═══ סבב 4 · ביקורת עיצוב — כרטיסי חברה/איש קשר ═══
   הבעיה: שורת עובדות של שש-שבע עמודות שוות, כל אחת עם תווית אפורה זעירה מעל הערך.
   התיקון (DESIGN-R4 §1/§4): הזהות עברה לשורת המשנה, המצב לשורת הפעולות,
   ובשורת העובדות נשארו שלוש עובדות — שתי ספרות ותאריך. */
.ent-sub{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap}
.ent-sub .sub-sep,.cell-sub .sub-sep{color:var(--rule)}
.ent-sub .with-av{gap:6px}
.ent-sub a{text-decoration:none}
.ent-sub a:hover{text-decoration:underline}

.facts.facts-3{gap:12px 44px}
.facts.facts-3 .fact{min-width:96px}
.facts .f-big{font-size:22px;font-weight:600;line-height:1.15;letter-spacing:-.02em}

/* מצב הישות ליד השם — אותו תפקיד שיש לצ'יפ הסטטוס בכרטיס הפרויקט */
.page-head .actions .chip-select{max-width:170px}
.page-head .actions .badge{align-self:center}

/* עמודת «עיר» בטבלת החברות התכווצה ל-1% וגלשה לשתי שורות ("פתח / תקווה") */
.ent-tbl td[data-label="עיר"],.ent-tbl td[data-label="סוכן"],.ent-tbl td[data-label="מועד"],
.ent-tbl td[data-label="מגע אחרון"],.ent-tbl td[data-label="פעילות אחרונה"]{white-space:nowrap}
@media(max-width:640px){
  .ent-tbl.cards td[data-label="עיר"]{white-space:normal}
  .facts.facts-3{gap:10px 14px}
}