/* =================================================================================
   Logic Law — שפת העיצוב

   ⭐ כל הערכים כאן הועתקו מ-Styles.html של המערכת הקיימת (C:\HasunaNewOffice),
      כדי שהצוות ימצא את עצמו במערכת החדשה בלי ללמוד ממשק מחדש.

   ⚠️ מה שכן שונה: המערכת הישנה טוענת Bootstrap ו-Bootstrap Icons משרת חיצוני.
      כאן הכל כתוב ידנית. הסיבה: ביום שהאינטרנט במשרד נופל, מערכת שתלויה
      בשרת חיצוני נראית שבורה. אותו מראה, בלי התלות.
   ================================================================================= */

/* ⚠️ הגופן עדיין נטען מגוגל. לפני המעבר לשרת המשרד צריך לארוז אותו פנימה.
   ⭐ 5.10.2026 (ערכת ״קלאסית״): Heebo בלבד, לכותרות ולטקסט — הגופן הסריפי
      של ״לשכה״ הוסר מהטעינה, כי אין בו עוד שימוש. */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800;900&display=swap');

/* =================================================================================
   ⭐ ערכת ״קלאסית״ — הכרעת מהדי, 5.10.2026 (ביקורת 17, נספח ב׳)
   ---------------------------------------------------------------------------------
   המערכת הישנה כמעט כפי שהיא: אפור-כחלחל, כחול, ארבע ההדגשות — ⭐ ועם מצב
   כהה בכחול-לילה, כמו בישנה (`Styles.html:92–150`).

   ⛔ **אין ערך צבע מפורש מחוץ לשני הבלוקים האלה** (חוקת העיצוב, ביקורת 12).
      כל כלל בקובץ פונה למשתנה — ולכן החלפת מצב היא החלפת בלוק, ולא ציד.
   ⭐ **הניגודיות נמדדת בבדיקה** (`server/test/contrast.test.js`) על שני המצבים.
      שינוי צבע שמפיל ניגודיות — מפיל את הבדיקות.
   ⚠️ חריגים מכוונים, ורק הם: ריבוע הסריקה של קוד הכניסה (`.totp-qr`, לבן תמיד —
      המצלמה צריכה לבן), תעודת הראיות להדפסה ב-app.js, וצבעי היומנים שמגיעים מגוגל.
   ================================================================================= */
:root {
  --sidebar-width: 260px;
  --topbar-height: 44px;
  /* ⭐ לפקדים המקוריים של הדפדפן (רשימה נפתחת, תאריך, פס גלילה) */
  color-scheme: light;

  --bg-base: #f8fafc;
  --surface: #ffffff;
  --border: #e2e8f0;
  /* ⚠️ קו העץ ב---border כמעט אינו נראה על רקע לבן, ⭐ ולכן
     המבנה שהמסך נבנה כדי להראות פשוט לא נראה. */
  --tree-line: #cbd5e1;
  /* ⭐ 5.10.2026 (ביקורת 13, ממצא 13): מסגרת שדה הקלט — צבע משלה, נפרד
     מקווי ההפרדה. ⚠️ ב---border היא יצאה 1.35:1, ושדה ריק כמעט לא נראה.
     ⭐ כאן מעל 3:1 מול הלבן ומול הרקע (הסף לגבול של פקד). */
  --input-border: #7d8ca2;
  --text-main: #0f172a;
  /* ⭐ מעט כהה מהישנה (#64748b): 4.55 ⟵ מעל 5 גם על רקע כותרת טבלה */
  --text-muted: #5b6a80;

  --accent-blue: #2563eb;         /* הצבע הראשי (השם נשמר) */
  --accent-rgb: 37, 99, 235;      /* ⭐ אותו צבע, לשקיפויות — מקור אחד */
  --accent-deep: #1d4ed8;
  /* ⭐ חדש: טקסט על כפתור ראשי. ⚠️ במצב כהה הכפתור בהיר והטקסט כהה —
     ״לבן קבוע״ (ביקורת 17, ממצא 4) היה נעלם עליו. */
  --on-accent: #ffffff;
  --accent-gold: #b45309;
  --accent-cyan: #0e7490;
  --accent-emerald: #047857;

  /* ===== מערכת ההתראות והתגיות =====
     ⭐ שלישייה לכל חומרה: רקע, גבול, טקסט — גוון שקוף של הצבע עצמו
        ולא פסטל מקובע. כך הכל מתחלף נכון יחד. */
  --al-warn-bg: rgba(180, 83, 9, .09);   --al-warn-bd: rgba(180, 83, 9, .24);   --al-warn-fg: #8a4408;
  --al-danger-bg: rgba(185, 28, 40, .09); --al-danger-bd: rgba(185, 28, 40, .24); --al-danger-fg: #99202c;
  --al-info-bg: rgba(8, 145, 178, .09);  --al-info-bd: rgba(8, 145, 178, .24);  --al-info-fg: #0b6b83;
  --al-ok-bg: rgba(5, 150, 105, .09);    --al-ok-bd: rgba(5, 150, 105, .24);    --al-ok-fg: #05664a;
  --al-mute-bg: rgba(100, 116, 139, .09); --al-mute-bd: rgba(100, 116, 139, .24); --al-mute-fg: #475569;
  /* ⭐ מונה מלא (פעמון ההתראות) — רקע אדום אטום וטקסט עליו */
  --al-danger-solid: #b91c28; --on-danger: #ffffff;

  --card-shadow: 0 4px 14px rgba(15, 23, 42, .08);
  --input-bg: #ffffff;
  --table-head-bg: var(--surface-2);
  --row-hover-bg: var(--surface-2);

  /* ⭐ חדשים (ביקורת 17): תפריט הצד והסרגל העליון — משתנים משלהם */
  --sidebar-bg: #ffffff; --sidebar-fg: var(--text-2);
  --sidebar-active-bg: rgba(37, 99, 235, .09); --sidebar-active-fg: #1d4ed8;
  /* ⚠️ התחנה האחרונה ב-100% ולא ב-130% כבהדמיה — **אותו מראה בדיוק** (זה הצבע
     שהשיפוע מגיע אליו בפינה), אבל כך בדיקת הניגודיות מודדת את מה שנראה,
     ולא תחנה בהירה שאינה מוצגת לעולם. */
  --topbar-bg: linear-gradient(160deg, #0f1c3f 0%, #1e3a6e 70%, #1e44a3 100%);
  --topbar-fg: #ffffff;
  /* ⭐ פקדים על הסרגל הכהה (יציאה, פעמון, חיפוש, החלפת מצב) — שקיפות לבנה */
  --topbar-ctl-bg: rgba(255, 255, 255, .14); --topbar-ctl-hover: rgba(255, 255, 255, .2);
  /* ⭐ 6.10.2026 (צוות ז3; דוח 09 ממצא 6): .22 ⟵ .5 — מסגרת שדה החיפוש יצאה 1.75:1
     על הסרגל (סף 3). ⭐ נמדד בבדיקה (contrast.test.js, ״סרגל — מסגרת החיפוש״). */
  --topbar-ctl-bd: rgba(255, 255, 255, .5);
  --topbar-muted: #e2e8f0;        /* טקסט משני על הסרגל (שם המשתמש, ממלא-מקום) */

  /* ⭐ חלון קופץ: צל והכהיית הרקע מאחוריו */
  --dialog-shadow: 0 20px 60px rgba(15, 23, 42, .25);
  --overlay: rgba(15, 23, 42, .5);

  --serif: 'Heebo', system-ui, Arial, sans-serif;   /* גופן הכותרות (השם נשמר) */
  --sans: 'Heebo', system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --radius: 14px;                 /* כרטיסים, חלונות, טבלאות */
  /* ⭐ 6.10.2026 (P0 · ב2 שלב 1): אסימוני בסיס חדשים. ⛔ אותם ערכים = אפס שינוי מראה. */
  --surface-2: #f1f5f9;           /* כותרת טבלה, ריחוף שורה, כותרת פאנל */
  --surface-3: #eaeff6;           /* שורה נבחרת, לשונית פעילה */
  --border-2: #cbd5e1;            /* קווי מבנה פנימיים */
  --text-2: #334155;              /* ⭐ שלב 2: טקסט משני כהה (תווית, כותרת טבלה, תפריט) */
  --selected-bg: var(--sidebar-active-bg); --selected-fg: var(--sidebar-active-fg);
  --focus-ring: #2563eb;          /* הילת מיקוד מקלדת — אטומה */
  --radius-sm: 8px; --radius-md: 12px; --radius-pill: 999px;
}

/* ⭐ ״קלאסית״ — מצב כהה. ⚠️ `data-theme` נקבע ב-theme.js בראש הדף, לפני
   הציור: לפי הבחירה השמורה, ובלעדיה — לפי הגדרת המחשב. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-base: #0f1420;
  --surface: #161d2e;
  --border: #2a3450;
  --tree-line: #3a4668;
  --input-border: #64708f;
  --text-main: #e8ecf5;
  --text-muted: #a3afc8;
  --accent-blue: #7aa7ff;
  --accent-rgb: 122, 167, 255;
  --accent-deep: #a9c5ff;
  --on-accent: #0b1020;
  --accent-gold: #f0b35a;
  --accent-cyan: #4cc3dd;
  --accent-emerald: #34d399;
  --al-warn-bg: rgba(217, 119, 6, .14);  --al-warn-bd: rgba(217, 119, 6, .38);  --al-warn-fg: #f0cf9a;
  --al-danger-bg: rgba(224, 82, 94, .14); --al-danger-bd: rgba(224, 82, 94, .38); --al-danger-fg: #f2b6bc;
  --al-info-bg: rgba(8, 145, 178, .14);  --al-info-bd: rgba(8, 145, 178, .38);  --al-info-fg: #a8d9e8;
  --al-ok-bg: rgba(5, 150, 105, .14);    --al-ok-bd: rgba(5, 150, 105, .38);    --al-ok-fg: #a5dcc4;
  --al-mute-bg: rgba(148, 161, 189, .14); --al-mute-bd: rgba(148, 161, 189, .38); --al-mute-fg: #b4bdd2;
  --al-danger-solid: #f2b6bc; --on-danger: #0b1020;
  --card-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  --input-bg: #161d2e;
  --table-head-bg: #1a2236;
  --row-hover-bg: #222c47;
  --sidebar-bg: #121827; --sidebar-fg: var(--text-2);
  --sidebar-active-bg: rgba(122, 167, 255, .14); --sidebar-active-fg: #c4d7ff;
  --topbar-bg: linear-gradient(160deg, #0a0f1f 0%, #16213d 70%, #1a2e64 100%);
  --topbar-fg: #e8ecf5;
  --topbar-muted: #c4cde0;
  --dialog-shadow: 0 20px 60px rgba(0, 0, 0, .55);
  --overlay: rgba(3, 6, 14, .66);
  /* ⭐ 6.10.2026 (P0 · ב2 שלב 1+2): אותם אסימונים במצב כהה */
  --surface-2: #1a2236;
  --surface-3: #1f2840;
  --border-2: #3a4668;
  --text-2: #c4cde0;
  --selected-bg: var(--sidebar-active-bg); --selected-fg: var(--sidebar-active-fg);
  --focus-ring: #7aa7ff;
  --radius-sm: 8px; --radius-md: 12px; --radius-pill: 999px;
}

/* ⚠️ 18px ולא 16px. במערכת הקיימת זו החלטה מפורשת: הגודל היה 14px,
   ובפועל היה קשה מדי לקריאה לחלק מהצוות. אין להקטין בלי לשאול. */
html { font-size: 18px; }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  background-color: var(--bg-base);
  color: var(--text-main);
  min-height: 100vh;
  overflow-x: hidden;
}

[hidden] { display: none !important; }
a { color: var(--accent-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
/* ⭐ 5.10.2026: טקסט ממלא-מקום בצבע המשני ובלי שקיפות — ⚠️ ברירת המחדל של
   הדפדפן אפורה קבועה, ובמצב כהה היא כמעט נעלמת. */
::placeholder { color: var(--text-muted); opacity: 1; }


/* =================================================================================
   סרגל עליון
   ================================================================================= */

.app-topbar {
  position: fixed; top: 0; right: 0; left: 0; height: var(--topbar-height);
  background: var(--topbar-bg);
  color: var(--topbar-fg); display: flex; align-items: center; gap: 12px;
  padding: 0 1rem; z-index: 1100;
}
.app-topbar .brand { font-weight: 700; font-size: .95rem; letter-spacing: .3px; }
.app-topbar .spacer { flex: 1; }
.app-topbar .who { font-size: .78rem; opacity: .88; }
.app-topbar .out {
  background: var(--topbar-ctl-bg); color: var(--topbar-fg); border: 0;
  padding: .25rem .7rem; border-radius: 7px; cursor: pointer;
  font: inherit; font-size: .78rem;
}
.app-topbar .out:hover { background: var(--topbar-ctl-hover); }


/* =================================================================================
   תפריט הצד — בצד ימין, כמו במערכת הקיימת
   ================================================================================= */

.app-sidebar {
  width: var(--sidebar-width); height: calc(100vh - var(--topbar-height));
  position: fixed; top: var(--topbar-height); right: 0;
  background-color: var(--sidebar-bg); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; z-index: 1000; padding: 1.5rem 1rem;
}

.sidebar-brand {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem;
}
.brand-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--al-warn-bg); border: 1px solid var(--al-warn-bd);
  /* ⭐ 5.10.2026: שלישיית האזהרה כולה — ⚠️ ההדגשה על הרקע השקוף יצאה 4.44 */
  color: var(--al-warn-fg); display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; flex-shrink: 0;
}
.sidebar-brand .name { font-weight: 700; font-size: 1rem; line-height: 1.2; }
.sidebar-brand .sub { font-size: .75rem; color: var(--text-muted); }

/* ⚠️ **רשימת הכרטיסיות גוללת בתוך התפריט, 24.9.2026.**
   עד כאן היא לא גללה כלל, ועם 15 כרטיסיות **שתי האחרונות ושורת
   הגרסה היו בלתי נגישות בשום דרך.** ⭐ זו הסיבה שמהדי לא מצא את
   כרטיסיית ניהול המערכת — שלחתי אותו לחפש משהו שאי אפשר להגיע אליו.

   ⭐ `min-height: 0` הוא ההכרחי כאן: בלעדיו פריט בתוך `flex` מסרב
   להתכווץ מתחת לגובה תוכנו, והגלילה פשוט אינה נכנסת לפעולה. */
.app-sidebar nav { flex: 1; min-height: 0; overflow-y: auto; }

/* ⭐ הסמן של רשימת הכרטיסיות — **בקצה הימני של המסך**, כפי שמהדי ביקש.
   ⚠️ בעברית הוא יושב כברירת מחדל בצד שמאל, ולכן הכיוון מתהפך על
   המעטפת וחוזר בתוכה. */
.app-sidebar nav { direction: ltr; }
.app-sidebar nav > .sidebar-nav { direction: rtl; }

.app-sidebar nav::-webkit-scrollbar { width: 8px; }
.app-sidebar nav::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 4px;
}
.app-sidebar nav::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

.sidebar-nav { list-style: none; padding: 0 .35rem 0 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: .55rem .9rem; color: var(--sidebar-fg);
  font-weight: 500; font-size: .88rem; border-radius: 10px;
  transition: all .2s ease; cursor: pointer;
  background: none; border: 0; border-right: 3px solid transparent;
  font-family: inherit; text-align: right; width: 100%;
}
.sidebar-link:hover, .sidebar-link.active {
  color: var(--sidebar-active-fg); background-color: var(--sidebar-active-bg);
  border-right-color: var(--accent-blue);
}
.sidebar-link .ico { font-size: 1.05rem; width: 1.4rem; text-align: center; }
.sidebar-link .n { margin-inline-start: auto; font-size: .75rem; }

.sidebar-footer { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border);
                  font-size: .75rem; color: var(--text-muted); }


/* =================================================================================
   אזור העבודה
   ================================================================================= */

/* ⚠️ **אזור גלילה עצמאי, ולא גלילת הדף כולו.**
   ⭐ כך גלילה בתוכן אינה מזיזה את התפריט, ולהפך — וזו הייתה בקשתו
   המפורשת של מהדי: ״חייב להפריד את הגלילות״.

   ⭐ **והסמן יושב בגבול שבין התוכן לתפריט**, ולא בקצה השמאלי של
   המסך. ⚠️ בעברית הוא נופל שמאלה כברירת מחדל, ולכן הכיוון מתהפך
   כאן וחוזר על כל מסך בתוכו. */
.app-main {
  /* ⛔ 6.10.2026 (צוות ז3; דוח 09 ממצא 8): ״margin-top״ ״ברח״ אל הדף — הדף כולו נגלל
     44px, ופס גלילה שני הופיע לצד זה של אזור העבודה. ⭐ הזזה יחסית אינה תופסת מקום
     בפריסה, ולכן גובה הדף הוא בדיוק גובה החלון. */
  margin-right: var(--sidebar-width); position: relative; top: var(--topbar-height);
  height: calc(100vh - var(--topbar-height));
  overflow-y: auto; overflow-x: hidden;
  padding: 1.5rem 2rem;
  direction: ltr;
}
.app-main > section { direction: rtl; }

.app-main::-webkit-scrollbar { width: 10px; }
.app-main::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 5px;
}
.app-main::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
.page-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 1rem; }
.page-head h2 { margin: 0; font-size: 1.3rem; font-weight: 700; }
.page-head .count { color: var(--text-muted); font-size: .85rem; }


/* =================================================================================
   לוח בקרה — שורת החיפוש והמסננים
   ================================================================================= */

.control-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem 1.25rem; box-shadow: var(--card-shadow); margin-bottom: 1.25rem;
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
}

input, select, textarea {
  font: inherit; font-size: .9rem; padding: .5rem .8rem;
  border: 1px solid var(--input-border); border-radius: 10px;
  background: var(--input-bg); color: var(--text-main);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .12);
}
.grow { flex: 1; min-width: 240px; }
label.chk { display: flex; align-items: center; gap: 6px; font-size: .88rem;
            color: var(--text-muted); cursor: pointer; white-space: nowrap; }

.btn {
  background: var(--accent-blue); color: var(--on-accent); border: 0;
  padding: .5rem 1.1rem; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: .9rem; font-weight: 600; white-space: nowrap;
  transition: filter .15s ease;
}
.btn:hover { filter: brightness(1.1); }
.btn.ghost { background: var(--surface); color: var(--accent-blue); border: 1px solid var(--border); }
.btn.ghost:hover { background: rgba(var(--accent-rgb), .06); filter: none; }
.btn.sm { padding: .3rem .8rem; font-size: .82rem; border-radius: 8px; }
/* ⚠️ **פעולה הרסנית.** ⭐ אדומה במכוון, כדי שלא תילחץ בטעות לצד ״סגירה״.
   נוספה 24.9.2026 — `.danger` נקראה בקוד המסך ולא הייתה קיימת בעיצוב. */
/* ⭐ הסרה בתוך תווית — כפתור זעיר ולא כפתור מלא. ⚠️ המחלקה נקראה בקוד
   ולא הייתה קיימת, ובדיקת חיווט המסך תפסה זאת לפני הפריסה. */
/* ⭐ תא לחיץ במטריצה — נראה כטקסט, מתנהג ככפתור. */
.cell-btn { background: none; border: 0; cursor: pointer; font-size: .95rem;
            padding: .15rem .35rem; border-radius: 5px; }
.cell-btn:hover { background: rgba(var(--accent-rgb), .08); }

.link-x { background: none; border: 0; cursor: pointer; padding: 0 0 0 .3rem;
          color: var(--al-danger-fg); font-size: .78rem; line-height: 1; }
.link-x:hover { opacity: .6; }

.btn.ghost.danger { color: var(--al-danger-fg); border-color: var(--al-danger-bd); }
.btn.ghost.danger:hover { background: var(--al-danger-bg); }


/* =================================================================================
   טבלאות
   ================================================================================= */

.table-container {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--card-shadow);
}
table { width: 100%; border-collapse: collapse; margin: 0; color: var(--text-main); }

thead th {
  background-color: var(--table-head-bg); color: var(--text-2);
  font-weight: 600; font-size: .8rem; letter-spacing: .5px;
  padding: .7rem .6rem; border-bottom: 1px solid var(--border);
  white-space: nowrap; text-align: right;
}
tbody tr { border-bottom: 1px solid var(--border); transition: background-color .15s ease; }
tbody tr:last-child { border-bottom: 0; }
tbody tr.click { cursor: pointer; }
tbody tr:hover { background-color: var(--row-hover-bg); }
tbody td { padding: .7rem .6rem; vertical-align: middle; font-size: .92rem; text-align: right; }
/* ⚠️ עמודות מספריות לעולם לא נשברות לשתי שורות */
td.num { direction: ltr; text-align: right; white-space: nowrap;
         font-variant-numeric: tabular-nums; }
/* אזור העבודה מנצל את כל הרוחב — במסך רחב זה מונע שבירת טקסט מיותרת */
.app-main { max-width: 1600px; }

.empty { padding: 2.5rem; text-align: center; color: var(--text-muted); }


/* =================================================================================
   תגיות — כולן מהמערכת הקיימת
   ================================================================================= */

/* מספר תיק. מונוספייס בכוונה, כדי שהספרות יתיישרו בין השורות. */
.case-code-tag {
  font-family: ui-monospace, "Courier New", monospace; font-weight: 700; font-size: .9rem;
  color: var(--accent-deep); background: rgba(var(--accent-rgb), .1); border: 1px solid rgba(var(--accent-rgb), .3);
  padding: .3rem .65rem; border-radius: 8px; white-space: nowrap; display: inline-block;
}

/* ⚠️ מספר תיק היסטורי. נבדל מהמספר הרגיל בארבעה מאפיינים במכוון:
   ענבר ולא כחול · מסגרת מקוטעת · גופן קטן יותר · והמילה "ישן" מוטבעת. */
.legacy-case-tag {
  font-family: ui-monospace, "Courier New", monospace; font-weight: 700; font-size: .75rem;
  color: var(--al-warn-fg); background: var(--al-warn-bg);
  border: 1px dashed var(--al-warn-fg);
  padding: .15rem .45rem; border-radius: 6px; white-space: nowrap; display: inline-block;
}
/* ⛔ 22.10.2026: ה-::before ״ישן ״ הוסר — app.js כבר כותב ״ישן: ״, והתוצאה הייתה ״ישן ישן: 299/01״ */

/* גלולת מצב, עם נקודה צבעונית. ירוק=פעיל · כתום=ממתין · אפור=סגור */
.status-pill {
  background: var(--al-ok-bg); color: var(--al-ok-fg); border: 0; font-weight: 600;
  padding: .28rem .8rem; border-radius: 20px; font-size: .82rem;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
/* ⭐ 5.10.2026 (ביקורת 17, ממצא 2): שלישיות המצב במקום גוונים קבועים —
   ⚠️ הקבועים עמדו על סף הניגודיות (4.51) ולא התחלפו במצב כהה.
   הנקודה בצבע הטקסט עצמו, ולכן היא מתחלפת איתו. */
.status-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-pill.pending { background: var(--al-warn-bg); color: var(--al-warn-fg); }
.status-pill.closed { background: var(--al-mute-bg); color: var(--al-mute-fg); }

/* תגית מחלקה או שלב — פסטל כהה-קריא, לא אפור חיוור */
.dept-tag {
  background: rgba(var(--accent-rgb), .1); color: var(--accent-deep); font-weight: 600;
  font-size: .8rem; padding: .28rem .7rem; border-radius: 8px;
  white-space: nowrap; display: inline-block;
}
.dept-tag.mute { background: var(--al-mute-bg); color: var(--al-mute-fg); }
.dept-tag.warn { background: var(--al-warn-bg); color: var(--al-warn-fg); }
/* ⭐ 091 (6.10.2026): ״צד שכנגד״ והתאמה חזקה בבדיקת ניגוד עניינים */
.dept-tag.danger { background: var(--al-danger-bg); color: var(--al-danger-fg); }
/* ⭐ 12.10.2026 (#27): כיוון דוא״ל — ברור, לא רק חץ. יוצא=ירוק, נכנס=כחול */
.dept-tag.mail-out { background: var(--al-ok-bg);   color: var(--al-ok-fg); }
.dept-tag.mail-in  { background: var(--al-info-bg); color: var(--al-info-fg); }


/* =================================================================================
   הודעות
   ================================================================================= */

.msg { padding: .7rem 1rem; border-radius: 10px; margin-bottom: 1rem;
       font-size: .88rem; display: none; border: 1px solid transparent; }
.msg.err { background: var(--al-danger-bg); border-color: var(--al-danger-bd); color: var(--al-danger-fg); display: block; }
.msg.ok  { background: var(--al-ok-bg);     border-color: var(--al-ok-bd);     color: var(--al-ok-fg);     display: block; }
.msg.info{ background: var(--al-info-bg);   border-color: var(--al-info-bd);   color: var(--al-info-fg);   display: block; }
/* ⚠️ **״נקלט, אבל שים לב״** — ליד שנוצר עם הערת אימות. ⭐ מכוון שיהיה
   שונה גם מהצלחה וגם משגיאה: הפעולה הצליחה, ובכל זאת יש מה לתקן.
   נכתב 24.9.2026, אחרי ש-`.msg.warn` נקרא בקוד ולא היה קיים בעיצוב. */
.msg.warn{ background: var(--al-warn-bg); border-color: var(--al-warn-bd); color: var(--al-warn-fg); display: block; }
/* ⭐ 8.10.2026 (מהדי): התראת ״לקוח קיים״ — אדומה, ממורכזת ובולטת (חובה לקשר לפני תיק). */
.msg.danger{ background: var(--al-danger-bg); border-color: var(--al-danger-bd); color: var(--al-danger-fg); display: block; text-align: center; font-weight: 600; }


/* =================================================================================
   חלונות
   ================================================================================= */

dialog {
  border: 0; border-radius: var(--radius); padding: 0; width: min(1060px, 95vw);
  box-shadow: var(--dialog-shadow); color: var(--text-main);
  background: var(--surface);
}
dialog.narrow { width: min(680px, 94vw); }
dialog::backdrop { background: var(--overlay); }

.dlg-head { padding: 1rem 1.4rem; border-bottom: 1px solid var(--border);
            display: flex; align-items: center; gap: 12px; flex-wrap: wrap; position: relative; }
/* ⭐ 8.10.2026 (#23): כפתור סגירה אדום בולט בראש כל חלון.
   ⭐ 16.10.2026: ⛔ לא ממוקם באופן מוחלט — ישב על מספר הליד (״LID-26-1021✕״, צילום דאליה 13.10).
   עכשיו פריט אחרון בשורת הכותרת, נדחף לקצה (RTL ⟵ שמאל), עם המילה ״סגירה״. */
.dlg-x { margin-inline-start: auto; order: 99; flex: 0 0 auto;
         display: inline-flex; align-items: center; gap: .35rem; height: 2.1rem; padding: 0 .85rem;
         border-radius: 6px; border: 1.5px solid var(--al-danger-solid);
         background: var(--al-danger-solid); color: var(--on-danger);
         font-size: .95rem; font-weight: 700; line-height: 1; cursor: pointer; }
.dlg-x:hover, .dlg-x:focus-visible { filter: brightness(.92); outline: 2px solid var(--al-danger-bd); outline-offset: 2px; }
.dlg-x .dlg-x-ico { font-size: 1.05rem; font-weight: 800; }
.dlg-head h2 { margin: 0; font-size: 1.15rem; font-weight: 700; }
.dlg-head .sub { color: var(--text-muted); font-size: .88rem; }
.dlg-body { padding: 1.1rem 1.4rem; max-height: 70vh; overflow: auto; }
/* ⭐ 16.10.2026 (#22, מהדי): כרטיסי ליד, תיק ולקוח — **חלון מלא**. הכותרת והתחתית קבועות,
   התוכן באמצע נגלל. ⚠️ `[open]` בלבד — אחרת `display:flex` היה מציג חלון סגור. */
dialog.full[open] { width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh;
                    margin: 0; inset: 0; border-radius: 0; display: flex; flex-direction: column; }
dialog.full > .dlg-head, dialog.full > .dlg-foot { flex: 0 0 auto; }
dialog.full > .dlg-body { flex: 1 1 auto; max-height: none; min-height: 0; }
/* ⭐ 10.10.2026 (#24): שורות עליונות קפואות בכרטיס-הליד — נשארות בזמן גלילת התוכן. */
.ld-sticky-top { position: sticky; top: 0; z-index: 5; background: var(--surface);
                 padding-bottom: .5rem; margin-bottom: .5rem; border-bottom: 1px solid var(--border); }
/* ⭐ 8.10.2026 (דיווח מהדי): flex-wrap — שורת כפתורים ארוכה (כרטיס ליד) עוטפת לשורות
   במקום לגלוש לרוחב. דיאלוגים עם מעט כפתורים לא מושפעים. */
.dlg-foot { padding: .8rem 1.4rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: .9rem; }
.field label { display: block; font-size: .78rem; color: var(--text-2); margin-bottom: .25rem; font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; }
/* ⛔ 6.10: עיגולי בחירה ותיבות סימון — לא ברוחב מלא (בקליטה בטלפון השמות נדחקו מחוץ לחלון) */
.field input[type="radio"], .field input[type="checkbox"] { width: auto; }
.field .val { font-size: .92rem; }

/* ⭐ הכוכבית שמסמנת שדה חובה. **המחלקה הזאת לא הייתה קיימת** — נכתבה
   בטופס קליטת הפנייה ונתפסה בבדיקה, לפני שהגיעה למסך. */
.req { color: var(--accent-gold); font-weight: 700; }

h3.sec { margin: 1.5rem 0 .7rem; font-size: .88rem; color: var(--accent-blue);
         border-bottom: 1px solid var(--border); padding-bottom: .4rem; font-weight: 700; }


/* =================================================================================
   לשוניות בכרטיס
   ================================================================================= */

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border);
        margin-bottom: 1rem; flex-wrap: wrap; }
.tabs button {
  background: none; border: 0; border-bottom: 3px solid transparent; cursor: pointer;
  font: inherit; font-size: .88rem; font-weight: 500; padding: .5rem .9rem; color: var(--text-muted);
}
.tabs button:hover { color: var(--text-main); }
.tabs button.on { color: var(--accent-blue); border-bottom-color: var(--accent-blue); font-weight: 700; }
.tabs .n { font-size: .75rem; }


/* =================================================================================
   סרגל שלבי ההליך
   ================================================================================= */

.stages { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: .4rem; }
.stages button {
  font: inherit; font-size: .78rem; padding: .3rem .7rem; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  border-radius: 8px; white-space: nowrap; transition: all .15s ease;
}
.stages button:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
.stages button.done { background: var(--al-mute-bg); color: var(--al-mute-fg); border-color: transparent; }
.stages button.now {
  background: var(--accent-blue); color: var(--on-accent); border-color: var(--accent-blue); font-weight: 700;
}


/* =================================================================================
   הערות
   ================================================================================= */

.note { padding: .7rem 0; border-bottom: 1px solid var(--border); }
.note:last-child { border-bottom: 0; }
.note .meta { font-size: .75rem; color: var(--text-muted); margin-bottom: .15rem; }
.note.sys .body { color: var(--text-muted); font-style: italic; font-size: .88rem; }


/* =================================================================================
   מסך הכניסה — פאנל מיתוג מפוצל, כמו במערכת הקיימת
   ================================================================================= */

#login { display: flex; min-height: 100vh; overflow: hidden; }

.login-brand-panel {
  flex: 1.1; position: relative; padding: 3.5rem;
  background: var(--topbar-bg);
  display: flex; flex-direction: column; justify-content: space-between;
  animation: loginFadeIn .6s ease both;
}
.login-brand-panel::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.08) 0, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(255,255,255,.10) 0, transparent 40%);
}
.login-brand-panel > * { position: relative; z-index: 1; color: var(--topbar-fg); }
.login-brand-panel .top { display: flex; align-items: center; gap: 10px; }
.login-brand-panel .top .brand-icon { background: var(--topbar-ctl-bg); border-color: var(--topbar-ctl-bd); color: var(--topbar-fg); }
.login-brand-panel h1 { font-size: 2rem; font-weight: 800; margin: 0 0 .6rem; line-height: 1.25; }
.login-brand-panel p { margin: 0; opacity: .82; font-size: .95rem; max-width: 30rem; }
/* ⭐ 5.10.2026: צבע משני במקום שקיפות — ⚠️ לבן ב-60% על השיפוע יצא 4.21 */
.login-brand-panel .foot { font-size: .78rem; color: var(--topbar-muted); }

.login-side { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.login-form-card { width: 100%; max-width: 400px; animation: loginFadeIn .6s ease .1s both; }
.login-form-card h2 { margin: 0 0 .3rem; font-size: 1.4rem; font-weight: 700; }
.login-form-card .sub { color: var(--text-muted); font-size: .88rem; margin: 0 0 1.5rem; }
/* ===== כניסה דרך חשבון הגוגל של המשרד =====
   ⚠️ הכפתור הוא תג <a> ולא <button>, ולכן צריך במפורש את היישור שכפתור
      מקבל מעצמו — בלעדיו הטקסט נדבק לקצה והסמל יורד שורה. */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  text-decoration: none;
  background: var(--surface); color: var(--text-main);
  border: 1px solid var(--input-border); box-shadow: var(--card-shadow);
}
.btn-google:hover { background: var(--row-hover-bg); filter: none; }

/* ⭐ אות אחת בעיגול, ולא לוגו חיצוני. הלקח מהגופן שנטען משרת חיצוני:
      ביום שהאינטרנט נופל, תמונה חסרה נראית כמו מערכת שבורה. */
.btn-google .g-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-blue); color: var(--on-accent);
  font-weight: 800; font-size: .78rem; line-height: 1;
}

/* מפריד ״או״ — קו לשני הצדדים */
.login-or {
  display: flex; align-items: center; gap: .75rem;
  margin: 1.1rem 0 .4rem;
  color: var(--text-muted); font-size: .8rem;
}
.login-or::before, .login-or::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

.login-form-card .field { margin-bottom: .9rem; }
.login-form-card .btn { width: 100%; margin-top: .5rem; padding: .65rem; }

@keyframes loginFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .login-brand-panel { display: none; }
  .app-sidebar { display: none; }
  /* ⚠️ בנייד אין תפריט, ולכן גם אין שתי גלילות — הדף חוזר לגלול כרגיל.
     ⭐ בלי זה אזור התוכן היה נעול לגובה המסך ומקשה על הגלילה במגע. */
  .app-main { margin-right: 0; padding: 1rem; height: auto; overflow: visible;
              min-height: calc(100vh - var(--topbar-height)); }
}


/* =================================================================================
   אריחי KPI — לוח הבית
   ⭐ המבנה לקוח מהמערכת הקיימת: פס צבע בקצה הימני, אייקון חיוור בפינה,
      מספר גדול ותווית קטנה מתחתיו. ארבעה גוונים, לפי סדר קבוע.
   ================================================================================= */

.kpi-row {
  display: grid; gap: 1rem; margin-bottom: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.kpi-card {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.1rem 1.25rem; box-shadow: var(--card-shadow);
}
/* פס הצבע בקצה הימני — 4px, בגובה מלא */
.kpi-card::before {
  content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 4px;
  background: var(--kpi, var(--accent-blue));
}
/* האייקון בפינה השמאלית, חיוור בכוונה כדי לא להתחרות במספר */
.kpi-card .ico {
  position: absolute; top: .6rem; left: .9rem; font-size: 1.7rem; opacity: .13;
}
.kpi-card .n {
  font-size: 2rem; font-weight: 800; line-height: 1.1;
  color: var(--kpi, var(--accent-blue)); font-variant-numeric: tabular-nums;
}
.kpi-card .lbl { font-size: .82rem; color: var(--text-muted); margin-top: .2rem; }
.kpi-card .sub { font-size: .72rem; color: var(--text-muted); margin-top: .3rem; }
.kpi-card.blue    { --kpi: var(--accent-blue); }
.kpi-card.gold    { --kpi: var(--accent-gold); }
.kpi-card.cyan    { --kpi: var(--accent-cyan); }
.kpi-card.emerald { --kpi: var(--accent-emerald); }
/* ⭐ אריח לחיץ — מוביל לרשימה שמאחורי המספר (5.10.2026, ביקורת 01 סבב 2 ס1-19) */
.kpi-card.click { cursor: pointer; transition: border-color .15s; }
.kpi-card.click:hover, .kpi-card.click:focus-visible { border-color: var(--kpi, var(--accent-blue)); }
/* ⭐ ״מועד קרוב״ ברשימת התיקים — התגית ומתחתיה התאריך והנושא */
.next-due .count { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9rem; }


/* =================================================================================
   פאנלים
   ================================================================================= */

.panel-row { display: grid; gap: 1rem; margin-bottom: 1rem;
             grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); }
/* ⚠️ 5.10.2026: `min(380px, 100%)` — בנייד (375) מינימום של 380 הרחיב את הדף כולו,
   והסרגל העליון נדחק אל מחוץ למסך יחד עם ״התראות״, ״יציאה״ וכפתור המצב. */
.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--card-shadow); overflow: hidden;
}
.panel > h3 {
  margin: 0; padding: .75rem 1.1rem; font-size: .9rem; font-weight: 700;
  border-bottom: 1px solid var(--border); background: var(--table-head-bg);
  display: flex; align-items: center; gap: .5rem;
}
.panel > h3 .n { margin-inline-start: auto; font-size: .78rem;
                 font-weight: 600; color: var(--text-muted); }
.panel .body { padding: .35rem 1.1rem .8rem; }
.panel .table-container { border: 0; border-radius: 0; box-shadow: none; }

/* שורת רשימה קומפקטית בתוך פאנל */
.line { display: flex; align-items: center; gap: .6rem;
        padding: .55rem 0; border-bottom: 1px solid var(--border); font-size: .88rem; }
.line:last-child { border-bottom: 0; }
.line .main { flex: 1; min-width: 0; }
.line .main b { font-weight: 600; }
.line .meta { font-size: .75rem; color: var(--text-muted); }
.line .when { font-size: .78rem; color: var(--text-muted);
              white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ⚠️ שלוש דרגות דחיפות. חריגה = אדום, היום/מחר = כתום, אחרת רגיל. */
.due { font-weight: 700; font-size: .78rem; white-space: nowrap;
       padding: .18rem .55rem; border-radius: 7px; }
.due.late { background: var(--al-danger-bg); color: var(--al-danger-fg); }
.due.soon { background: var(--al-warn-bg);   color: var(--al-warn-fg); }
.due.ok   { background: var(--al-mute-bg);   color: var(--al-mute-fg); }

/* עמודות עומס */
.bar { height: 6px; border-radius: 4px; background: var(--al-mute-bg); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent-blue); }

/* נקודת "מחובר" */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block;
       background: var(--tree-line); flex-shrink: 0; }
.dot.on { background: var(--accent-emerald); box-shadow: 0 0 0 3px var(--al-ok-bg); }


/* =================================================================================
   מטריצת ההרשאות
   ⚠️ 29 שורות × 9 עמודות. העמודה הראשונה נדבקת, אחרת בגלילה אופקית
      לא יודעים באיזו הרשאה מסתכלים.
   ================================================================================= */

.matrix-wrap { overflow: auto; max-height: 62vh; }
.matrix { border-collapse: separate; border-spacing: 0; }
.matrix th, .matrix td { border-bottom: 1px solid var(--border); }
.matrix thead th {
  position: sticky; top: 0; z-index: 3; background: var(--table-head-bg);
  font-size: .72rem; padding: .5rem .35rem; text-align: center; white-space: normal;
  min-width: 5.4rem; line-height: 1.25;
}
.matrix thead th:first-child {
  z-index: 4; right: 0; text-align: right; min-width: 15rem;
}
.matrix tbody th {
  position: sticky; right: 0; z-index: 2; background: var(--surface);
  text-align: right; font-weight: 500; font-size: .85rem;
  padding: .45rem .6rem; border-left: 1px solid var(--border);
}
.matrix tbody td { text-align: center; padding: .3rem; }
.matrix tbody tr:hover th, .matrix tbody tr:hover td { background: var(--row-hover-bg); }
.matrix tr.cat th {
  background: rgba(var(--accent-rgb), .07); color: var(--accent-deep); font-weight: 700; font-size: .78rem;
}
.matrix input[type=checkbox] { width: 17px; height: 17px; cursor: pointer; accent-color: var(--accent-blue); }
/* ⭐ עמודת מנהל מערכת — נעולה, כי הוא מקבל הכל דרך is_system_admin */
.matrix td.locked { opacity: .45; }
.matrix .dirty { outline: 2px solid var(--accent-gold); outline-offset: -2px; border-radius: 6px; }

.sticky-save {
  position: sticky; bottom: 0; background: var(--surface);
  border-top: 1px solid var(--border); padding: .7rem 1.1rem;
  display: flex; align-items: center; gap: .7rem; font-size: .85rem;
}


/* =================================================================================
   כותרת משנית בתוך מסך
   ================================================================================= */

.sub-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; flex-wrap: wrap; }
.sub-head .spacer { flex: 1; }
.hint { font-size: .78rem; color: var(--text-muted); line-height: 1.5; }
.hint.warn { background: var(--al-warn-bg); border: 1px solid var(--al-warn-bd);
             color: var(--al-warn-fg); padding: .6rem .9rem; border-radius: 10px; }

.sidebar-link[disabled] { opacity: .4; cursor: default; }
.sidebar-link[disabled]:hover { color: var(--text-muted); background: none; border-right-color: transparent; }

/* שדה עריכה במקום — נראה כטקסט עד שנוגעים בו */
.inline-edit { border-color: transparent; background: transparent; }
/* ⭐ 6.10.2026 (צוות ז3; דוח 09 ממצא 5): בריחוף ובמיקוד — מסגרת שדה אמיתית (3:1),
   ⛔ לא קו ההפרדה (1.35:1), שבו גם בריחוף לא נראה שזה שדה. */
.inline-edit:hover, .inline-edit:focus { border-color: var(--input-border); background: var(--input-bg); }


/* =================================================================================
   עץ סוגי המסמכים
   ⭐ קווים מחברים והרחבה־כיווץ — הבקשה מ-5.9.2026.
   ⚠️ הקווים נבנים משכבות `.tl`: כל רמה תורמת עמודה, ו-`on` אומרת
      שהענף ההוא ממשיך מתחת — ⭐ ולכן הקו נמשך רק היכן שיש המשך.
   ================================================================================= */
.doctree { border:1px solid var(--border); border-radius:8px; overflow:auto; max-height:62vh; }

.dt-row { display:flex; align-items:center; gap:.4rem; padding:.15rem .5rem;
          border-bottom:1px solid var(--border); white-space:nowrap; }
.dt-row:hover { background:var(--row-hover-bg); }
/* ⛔ 6.10.2026 (צוות ז3; דוח 09 ממצא 4): לא שקיפות על כל השורה (ניגודיות 2.05) —
   צבע הטקסט המשני המלא, ותגית ״מושבת״/״מאורכבת״ בשורה עצמה. */
.dt-row.off .dt-code, .dt-row.off .inline-edit, .dt-row.off .dt-req { color: var(--text-muted); }

.tl { width:1.1rem; flex:0 0 1.1rem; align-self:stretch; position:relative; }
/* קו אנכי מתמשך — רק כשהענף ממשיך */
.tl.on::before { content:''; position:absolute; top:0; bottom:0; right:.5rem;
                 border-right:1px solid var(--tree-line); }
/* המרפק אל הצומת עצמו */
/* 🔴 **הקו ממשיך דרך השורה, ונעצר רק אצל האחרון.**
   ⚠️ **קודם הוא נעצר במרפק תמיד** — ולכן כל צומת קיבל וו מנותק
   במקום קו שמחבר אותו לאחיו. ⛔ זה מה שגרם לעץ להיראות כרשימה. */
.tl.elbow::before { content:''; position:absolute; top:0; bottom:0; right:.5rem;
                    border-right:1px solid var(--tree-line); }
.tl.elbow::after  { content:''; position:absolute; top:50%; right:.5rem; width:.55rem;
                    border-top:1px solid var(--tree-line); }
/* ⭐ הצומת האחרון — הקו נעצר במרפק ואינו ממשיך למטה */
.tl.elbow.last::before { bottom:50%; }

.dt-toggle { width:1.2rem; height:1.2rem; flex:0 0 1.2rem; border:1px solid var(--border);
             background:var(--surface); border-radius:3px; cursor:pointer; line-height:1;
             font-size:.8rem; color:var(--text-muted); padding:0; }
.dt-toggle.leaf { border:0; background:none; cursor:default; }
.dt-toggle:hover { border-color:var(--accent-blue); color:var(--accent-blue); }

.dt-code { font-family:monospace; font-size:.72rem; color:var(--text-muted);
           width:4.2rem; flex:0 0 4.2rem; }
.dt-name { flex:1 1 14rem; min-width:9rem; }
.dt-eng  { flex:0 0 11rem; font-family:monospace; font-size:.75rem; }
.dt-eng:disabled { background:var(--bg-base); color:var(--text-muted); cursor:not-allowed; }
.dt-req  { flex:0 0 11rem; font-size:.78rem; }
.dt-count { flex:0 0 6rem; font-size:.72rem; color:var(--text-muted); text-align:left; }
.dt-count.has { color:var(--accent-gold); }
.dt-acts { flex:0 0 auto; display:flex; gap:.25rem; }

/* ---- עץ המחלקות — מה שנוסף מעבר לעץ המסמכים ----
   ⚠️ **אותן מחלקות בדיוק** (.tl / .dt-toggle / .dt-row), כדי ששני
      העצים במסך הניהול ייראו אותו דבר. ⭐ כאן רק מה שייחודי להם:
      משוב הגרירה ושתי עמודות המונים. */
.dept-row[draggable="true"] { cursor: grab; }
/* ⭐ הסמן אומר את האמת: בתוך פקד אין גרירה אלא הקלדה ובחירה. */
.dept-row input, .dept-row select { cursor: auto; }
.dept-row.dragging { opacity: .35; }
.dept-row.drop-into { background: var(--al-info-bg);
                      outline: 1px dashed var(--accent-cyan); outline-offset: -1px; }

.dept-root-zone { margin: .4rem; padding: .45rem .6rem; text-align: center;
                  font-size: .78rem; color: var(--text-muted);
                  border: 1px dashed var(--border); border-radius: 6px; }
.dept-root-zone.drop-into { background: var(--al-info-bg);
                            border-color: var(--accent-cyan); color: var(--accent-cyan); }

/* 🔴 **ההזחה יושבת בתוך תא ברוחב קבוע, ולא בשורה עצמה.**
   ⚠️ **זה הלקח משתי הגרסאות הקודמות:** כשהתיבה נמתחת היא יוצאת
   ענקית וריקה והטקסט שבתוכה זז לבדו; ⛔ וכשההזחה בשורה, **כל
   העמודות שאחריה זזות עם עומק הענף** ושום דבר אינו מתיישר.
   ⭐ עכשיו הקווים, החץ, הקוד והשם נמצאים כולם בתא אחד קבוע —
   ההזחה קורית **בתוכו**, וכל מה שאחריו עומד בעמודה. */
.dept-main { flex: 0 0 26rem; display: flex; align-items: center;
             gap: .4rem; align-self: stretch; min-width: 0; }
.dept-main .dt-name { flex: 1 1 auto; min-width: 5rem; }
/* ⭐ הכפתורים נשארים צמודים לקצה, והעודף נופל לפניהם. */
.dept-gap { flex: 1 1 auto; }

/* 🔴 **ובלי זה רוחב תיבת הבחירה משתנה משורה לשורה.**
   ⛔ `flex: 0 0 11rem` אינו קובע את הרוחב: ⚠️ **הרוחב המזערי
   האוטומטי של פקד טופס הוא רוחב האפשרות הארוכה שבו**, והוא גובר
   על הבסיס. ⭐ ולכל שורה רשימת אפשרויות אחרת — היא מחסירה את
   הענף של עצמה — ⛔ **ולכן כל מה שמימין לתיבה זז בכיוון ההפוך
   להזחה.** ⚠️ בדיוק מה שמהדי ראה, וזו לא הייתה ההזחה. */
.dept-row .dt-req { flex: 0 0 13rem; min-width: 0; }

.dept-n { flex: 0 0 5rem; font-size: .72rem; color: var(--text-muted); text-align: left; }
.dept-n.has { color: var(--accent-gold); }


/* =================================================================================
   יומן — לוח חודשי
   =================================================================================
   ⚠️ **כל המשתנים כאן נבדקו מול :root שבראש הקובץ.** זו לא הקפדה
      תיאורטית: ב-24.9.2026 הומצאו חמישה משתנים שאינם קיימים, והעץ
      נטען בלי קווים ובלי צבע. משתנה שאינו קיים אינו מייצר שגיאה.

   ⭐ **הרשת זורמת מימין לשמאל מעצמה**, כי הדף כולו כזה — ולכן יום
      ראשון יושב בימין בלי שום היסט ידני. */

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.2rem;
  box-shadow: var(--card-shadow);
}

.cal-head {
  background: var(--table-head-bg);
  color: var(--text-muted);
  text-align: center;
  font-weight: 600;
  font-size: .8rem;
  padding: .45rem 0;
}

.cal-cell {
  background: var(--surface);
  min-height: 5.2rem;
  padding: .35rem .45rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.cal-cell:hover { background: var(--row-hover-bg); }

/* ⚠️ תא ריק שממלא את ימי הפתיחה של החודש — אינו לחיץ. */
.cal-cell.empty-cell { background: var(--bg-base); cursor: default; }
.cal-cell.empty-cell:hover { background: var(--bg-base); }

.cal-cell.today .cal-num {
  background: var(--accent-blue);
  color: var(--on-accent);
  border-radius: 50%;
  width: 1.5rem; height: 1.5rem;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ⭐ היום הנבחר מסומן במסגרת פנימית, ולא ברקע — אחרת הוא מתנגש
      בסימון ״היום״ כששניהם אותו תא. */
.cal-cell.on { box-shadow: inset 0 0 0 2px var(--accent-blue); }

.cal-num { font-size: .85rem; font-weight: 600; color: var(--text-main); }

.cal-dots { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.cal-dots i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.cal-more { font-size: .7rem; color: var(--text-muted); font-weight: 600; }

.cal-legend {
  display: flex; flex-wrap: wrap; gap: .9rem;
  margin-bottom: .8rem; font-size: .82rem; color: var(--text-muted);
}
.cal-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.cal-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

.cal-chip {
  width: 9px; height: 9px; border-radius: 50%;
  display: inline-block; margin-left: .4rem;
}

/* =================================================================
   מסך ההשוואה — התשובות מול המסמכים
   ⭐ 16.10.2026 (אפיון 04 ב1): התשובות **משמאל**, עד שליש; המסמכים **מימין**,
   שני שלישים. ⚠️ בכיוון ימין-לשמאל העמודה הראשונה ברשת היא הימנית — ולכן
   הסדר נקבע ב-`order` ולא בסדר ב-HTML.
   ⚠️ בנייד — אחת מתחת לשנייה: מסמך בעמודה צרה אינו קריא, ועדיף לגלול.
   ================================================================= */
.cmp { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: 1rem; }
.cmp-main { order: 1; display: flex; flex-direction: column; min-width: 0; }
.cmp-side { order: 2; max-height: 78vh; overflow: auto; padding-inline-start: .5rem; }
@media (max-width: 900px) {
  .cmp { grid-template-columns: 1fr; }
  .cmp-side { order: 1; max-height: none; }
  .cmp-main { order: 2; }
}

.cmp-a { padding: .5rem 0; border-bottom: 1px solid var(--border); }
.cmp-q { font-size: .8rem; color: var(--text-muted); margin-bottom: .15rem; }

/* ⭐ הרצועה למעלה — קפיצה למסמך בזרימה, ולידה ״רענון״. */
.cmp-tools { display: flex; align-items: flex-start; gap: .5rem; }
.cmp-strip { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .5rem; flex: 1; min-width: 0; }
.cmp-strip button {
  flex: none; white-space: nowrap; font-size: .82rem; padding: .3rem .7rem;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
  color: var(--text-main); cursor: pointer;
}
/* ⭐ 5.10.2026 (ביקורת 17, ממצאים 1, 4, 8): משתנים קיימים במקום `--muted`/`--accent`
   שאינם מוגדרים, ובמקום לבן קבוע — ⚠️ במצב כהה הוא היה כתם לבן. */
.cmp-strip button.on { background: var(--accent-blue); color: var(--on-accent); border-color: transparent; }

/* ⭐ הזרימה: כל המסמכים זה אחר זה, בגלילה אחת. */
.cmp-docs { max-height: 78vh; overflow: auto; }
.cmp-doc { padding-bottom: 1rem; scroll-margin-top: .25rem; }
.cmp-doc + .cmp-doc { border-top: 1px solid var(--border); padding-top: .5rem; }
.cmp-head { display: flex; align-items: center; gap: .6rem; margin: .3rem 0; font-size: .9rem; }
.cmp-head .n { color: var(--text-muted); }
.cmp-head a { margin-inline-start: auto; }
.cmp-frame { width: 100%; height: 70vh; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }

/* =================================================================
   תיקון תשובה (16.10.2026, אפיון 04 א; קובץ 117)
   ================================================================= */
.ans-edit-btn, .ans-edit-hist-btn {
  border: 0; background: none; cursor: pointer; padding: 0 .2rem;
  color: var(--accent-blue); font-size: .8rem; vertical-align: middle;
}
.ans-edit-btn svg { width: 15px; height: 15px; }
.ans-edit-hist-btn { text-decoration: underline; }
.ans-edit-form { display: flex; flex-direction: column; gap: .35rem; }
.ans-edit-val { line-height: 1.5; }
/* ⚠️ התשובה במלואה, עם שבירות השורה שהלקוח כתב. */
.ans-edit-text { white-space: pre-wrap; }
.ans-edit-input, .ans-edit-note { width: 100%; }
.ans-edit-save, .ans-edit-cancel { flex: none; }
.ans-edit-msg { margin: 0; }
.ans-edit-label { font-size: .8rem; color: var(--text-muted); }
.ans-edit-actions { display: flex; gap: .4rem; }
.ans-edit-hist { margin-top: .35rem; font-size: .82rem; }
.ans-edit-hist-list { list-style: none; margin: 0; padding: 0; }
.ans-edit-hist-list li { padding: .35rem .5rem; border: 1px solid var(--border); border-radius: 6px; margin-bottom: .3rem; }
.ans-edit-hist-list .meta { color: var(--text-muted); font-size: .76rem; }
.ans-edit-before { text-decoration: line-through; color: var(--text-muted); }
.ans-edit-hist-note { margin-top: .15rem; }

/* =================================================================
   שליחת הודעה לפונה
   ================================================================= */
#send-dlg { max-width: 640px; width: 92%; }
#send-dlg textarea {
  width: 100%; font: inherit; line-height: 1.55; padding: .7rem;
  border: 1px solid var(--input-border); border-radius: 8px; resize: vertical;
}
/* ⚠️ ההודעה עשויה להיות בערבית, והיא ימין-לשמאל כמו העברית. */
#send-dlg textarea { direction: rtl; text-align: start; }
#send-dlg .bar { display: flex; gap: .5rem; align-items: center; margin-top: .7rem; flex-wrap: wrap; }
/* ⚠️ 5.10.2026: `.bar` הכללי (פס התקדמות) קובע גובה 6px ו-overflow מוסתר —
   ובלי האיפוס הזה שורת הכפתורים בחלון ״שליחה לפונה״ נחתכת. */
#send-dlg .bar { height: auto; overflow: visible; background: none; border-radius: 0; }

/* =================================================================
   התראות
   ================================================================= */
#alerts-dlg { max-width: 680px; width: 94%; }
.alert-row { display:flex; gap:1rem; justify-content:space-between; align-items:flex-start;
  padding:.7rem 0; border-bottom:1px solid var(--border); }
/* ⚠️ שנקראה — דהויה, אך לא נעלמת. היעלמות היא רק כשהמצב נפתר. */
/* ⛔ 6.10.2026 (צוות ז3; דוח 09 ממצא 4): לא שקיפות — צבע הטקסט המשני, שעובר 4.5 */
.alert-row.read > div:first-child { color: var(--text-muted); }
#bell .n { display:inline-block; min-width:1.4em; padding:0 .35em; margin-inline-start:.35em;
  border-radius:999px; background:var(--al-danger-solid); color:var(--on-danger); font-size:.75rem; font-weight:700; }

/* ⭐ יומן הפעילות (056) */
.audit-filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; }
.audit-filters label { display: flex; flex-direction: column; font-size: .85rem; gap: .2rem; }
.audit-table td { vertical-align: top; }
.audit-diff { font-size: .85rem; line-height: 1.5; }
.audit-old { color: var(--al-danger-fg); text-decoration: line-through; }
.audit-new { color: var(--al-ok-fg); }
.au-ent { margin-inline-start: .3rem; }

/* ⭐ שלבי כניסה (057) */
/* ⭐ ריבוע הסריקה (5.10.2026): לבן תמיד, עם שוליים — כך המצלמה קוראת בכל רקע */
.totp-qr { width: 220px; height: 220px; margin: 1rem auto .6rem; background: #fff;
           border: 1px solid var(--border); border-radius: 10px; padding: 6px; }
.totp-qr svg { width: 100%; height: 100%; display: block; }
.totp-howto { text-align: center; line-height: 1.7; margin: .4rem 0 .8rem; color: var(--text-muted); }
.totp-manual { margin: 0 0 1rem; font-size: .9rem; }
.totp-manual summary { cursor: pointer; text-align: center; color: var(--accent-blue); }
.totp-manual p { margin: .6rem 0 .4rem; }
.totp-kv { display: flex; flex-direction: column; gap: .2rem; margin: .5rem 0; }
.totp-kv span { font-size: .8rem; color: var(--text-muted); }
.totp-kv code { display: block; text-align: left; direction: ltr; }
.totp-secret { font-size: 1.05rem; letter-spacing: .08em; background: var(--bg-base);
               padding: .3rem .5rem; border-radius: 6px; user-select: all; word-break: break-all; }
#pwchange-form h2, #totp-form h2 { margin-top: 0; }

/* ⭐ שלב 2 (060): עריכת תיק, צדדים, כתובות */
.cc-extra { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-inline-start: auto; }
.deadline-badge { font-size: .8rem; padding: .15rem .55rem; border-radius: 999px;
                  background: rgba(var(--accent-rgb), .08); color: var(--accent-deep); white-space: nowrap; }
/* ⭐ 5.10.2026 (ביקורת 17, ממצא 3): שלישיות אזהרה וסכנה במקום גוונים קבועים */
.deadline-badge.soon { background: var(--al-warn-bg); color: var(--al-warn-fg); }
.deadline-badge.overdue { background: var(--al-danger-bg); color: var(--al-danger-fg); font-weight: 600; }
.state-request { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .65rem .8rem;
                 margin-bottom: .9rem; border-radius: 10px; background: var(--al-warn-bg); color: var(--al-warn-fg);
                 border: 1px solid var(--al-warn-bd); }
.case-edit .grid { margin-bottom: .5rem; }
.field.wide { grid-column: 1 / -1; }
.form-actions { display: flex; gap: .5rem; margin-top: .7rem; }
.address-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .45rem 0;
               border-bottom: 1px solid var(--border); }
.address-form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .6rem; }
.address-form input, .address-form select { min-width: 0; }

/* ⭐ כספים (063) */
.fin-kpis { margin-bottom: .4rem; }
.kpi-card.fin-owe { border-color: var(--al-danger-bd); background: var(--al-danger-bg); }
.kpi-card.fin-owe .n { color: var(--al-danger-fg); }
.fin-agreement { padding: .6rem .8rem; border: 1px solid var(--border); border-radius: 10px; margin-bottom: .5rem; }
/* ⭐ סבב 4: הסכמים קודמים שעדיין חלים */
.fin-prior { margin: .2rem 0 .6rem; padding-inline-start: 1.2rem; color: var(--text-muted); font-size: .85rem; }
.fin-form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .5rem 0 1rem; }
.fin-form input[type=number] { width: 8rem; }
tr.fin-void td { color: var(--text-muted); text-decoration: line-through; }
tr.fin-void td .hint { text-decoration: none; }

/* ⭐ דואר פנימי (064) */
tr.mail-unread td { font-weight: 700; }
.mail-to-list { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.mail-to { font-weight: 400; }

/* ⭐ בקשת השלמה (065) */
.req-item { display: grid; grid-template-columns: minmax(10rem, 1.2fr) 1.4fr 1fr auto; gap: .4rem; margin-bottom: .4rem; }
.req-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--border); }
/* ⭐ 5.10.2026 (צוות ז2): שורת כפתורים קטנים — ״+ פריט״ ו״מילוי מהחסרים״, העתקת קישור והודעה */
.row-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0 .6rem; }
/* ⭐ 5.10.2026 (צוות ז2): סמל קווי בכותרת חלונית — במקום אמוג׳י */
.ico-i svg { width: 16px; height: 16px; vertical-align: -3px; margin-inline-end: .3rem; }
/* ⭐ 6.10.2026 (צוות ז3): סמל בלי טקסט לצדו (כפתור סמל, מקרא) — בלי מרווח */
.ico-i.solo svg { margin-inline-end: 0; }
.btn .ico-i svg { vertical-align: -3px; }
/* ⭐ סמל המשרד, אריחי הבית וכוכב המועדפים — קוויים, במקום ⚖ 📁 ✅ ☆ */
.brand-icon svg { width: 24px; height: 24px; }
.kpi-card .ico svg { width: 30px; height: 30px; display: block; }
.cell-btn svg { width: 17px; height: 17px; vertical-align: -3px; }
/* ⭐ שורה מושבתת/מאורכבת בטבלה — הטקסט המשני, ⛔ לא שקיפות (דוח 09 ממצא 4) */
tr.row-off > td { color: var(--text-muted); }
/* ⭐ כפתור המצב בכותרת חלון השער (דוח 09 ממצא 2) */
.dlg-head .theme-toggle { margin-inline-start: auto; }

/* ⭐ קובץ כבד (066) */
.up-progress { height: 6px; background: var(--border); border-radius: 99px; margin-top: .3rem; overflow: hidden; }
.up-progress i { display: block; height: 100%; width: 0; background: var(--accent-blue); transition: width .2s; }


/* =================================================================================
   ⭐ שכבת ״קלאסית״ (5.10.2026) — מחליפה את שכבת ״לשכה״
   ---------------------------------------------------------------------------------
   ⚠️ הצבעים עצמם בראש הקובץ (שני בלוקי המשתנים). כאן רק מה שהערכה מוסיפה מעל
   השפה הבסיסית: גופן הכותרות, סרגל עליון כהה עם פקדים שקופים, וכפתור החלפת
   המצב. ⭐ ״לשכה״ קבעה פינות 4–6 ותפריט על רקע הנייר — ״קלאסית״ חוזרת לפינות
   של הישנה, ולכן הכללים האלה הוסרו ולא הוחלפו.
   ================================================================================= */

.app-topbar .brand { font-family: var(--serif); font-size: 1.05rem; color: var(--topbar-fg); }
.app-topbar .who { opacity: 1; color: var(--topbar-muted); }

.sidebar-brand .name { font-family: var(--serif); font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; }
.sidebar-link.active { font-weight: 700; }
.sidebar-link .ico svg { width: 18px; height: 18px; vertical-align: -3px; }

.page-head h2, .dlg-head h2, .login-form-card h2, #login h1 {
  font-family: var(--serif); font-weight: 700; letter-spacing: -.015em;
}
.page-head h2 { font-size: 1.65rem; }
.kpi-card .n { font-family: var(--serif); font-weight: 800; }
h3.sec { color: var(--accent-deep); letter-spacing: .02em; }
.login-brand-panel h1 { font-family: var(--serif); font-weight: 800; font-size: 2.3rem; }

/* ---- כפתור החלפת מצב בהיר/כהה ----
   ⭐ בכל מסך: בסרגל העליון, במסך הכניסה (כל שלביו), ובדפים הציבוריים.
   ⚠️ ההתנהגות ב-theme.js; כאן רק המראה. שני אייקונים קוויים, ומוצג רק
   זה שמתאר את **היעד**: ירח במצב בהיר, שמש במצב כהה — כמו בישנה. */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
                cursor: pointer; font: inherit; line-height: 1; }
.theme-toggle svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor;
                    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: inline; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
/* בסרגל העליון הוא ״.out״ — אותו מראה כמו ״יציאה״ ו״התראות״ */
.app-topbar .theme-toggle { padding: .3rem .55rem; }
/* ⭐ במסך הכניסה ובדפים הציבוריים — כפתור עגול צף בפינה */
.theme-toggle.float {
  position: absolute; top: 1rem; left: 1rem; z-index: 5;
  width: 2.3rem; height: 2.3rem; padding: 0; border-radius: 50%;
  background: var(--surface); color: var(--text-main);
  border: 1px solid var(--input-border); box-shadow: var(--card-shadow);
}
.theme-toggle.float:hover { background: var(--row-hover-bg); }
.login-side { position: relative; }

/* ⭐ שלב 5 — חיפוש כללי, הודעות צפות, מיקוד */
.gsearch-wrap { position: relative; flex: 0 1 30rem; margin-inline-start: 1rem; }
/* ⭐ 5.10.2026 (״קלאסית״): החיפוש יושב על הסרגל הכהה — שקוף, כמו בהדמיה */
#gsearch { width: 100%; padding: .32rem .8rem; font-size: .85rem;
           background: var(--topbar-ctl-bg); border-color: var(--topbar-ctl-bd); color: var(--topbar-fg); }
#gsearch::placeholder { color: var(--topbar-muted); }
#gsearch:focus { border-color: var(--topbar-fg); box-shadow: none; }
.gs-results { position: absolute; top: calc(100% + 4px); right: 0; left: 0; z-index: 1200;
              background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
              box-shadow: var(--card-shadow); max-height: 70vh; overflow: auto; padding: .3rem; }
.gs-item { display: flex; gap: .6rem; align-items: baseline; width: 100%; text-align: right; padding: .45rem .6rem;
           background: none; border: 0; border-radius: 4px; cursor: pointer; font: inherit; color: var(--text-main); }
.gs-item:hover, .gs-item:focus { background: var(--row-hover-bg); outline: none; }
.gs-kind { font-size: .72rem; color: var(--accent-blue); border: 1px solid rgba(var(--accent-rgb), .3);
           border-radius: 3px; padding: 0 .35rem; flex: none; }
.gs-title { font-weight: 600; } .gs-sub { color: var(--text-muted); font-size: .82rem; margin-inline-start: auto; }
.gs-empty { padding: .7rem; color: var(--text-muted); font-size: .88rem; }
#toasts { position: fixed; bottom: 1.2rem; left: 1.2rem; z-index: 3000; display: flex; flex-direction: column; gap: .5rem; max-width: 28rem; }
.toast { padding: .7rem 1rem; border-radius: 6px; box-shadow: var(--card-shadow); cursor: pointer; font-size: .9rem;
         /* ⭐ 6.10.2026 (צוות ז3; דוח 09 ממצא 7): רקע **אטום** — הגוון מעל המשטח. ⛔ הגוון
            השקוף לבדו (9%–14%) הראה את הטבלה מבעד להודעה. */
         background: linear-gradient(var(--al-danger-bg), var(--al-danger-bg)), var(--surface);
         color: var(--al-danger-fg); border: 1px solid var(--al-danger-bd); }
.toast.ok { background: linear-gradient(var(--al-ok-bg), var(--al-ok-bg)), var(--surface);
            color: var(--al-ok-fg); border-color: var(--al-ok-bd); }
tr.click:focus { outline: 2px solid rgba(var(--accent-rgb), .45); outline-offset: -2px; }
:focus-visible { outline: 2px solid rgba(var(--accent-rgb), .55); outline-offset: 1px; }
#ntk-case-q { width: 100%; margin-bottom: .3rem; }
/* ⚠️ נמצא בבדיקה החזותית: בסרגל העליון, ליד החיפוש, השם נשבר לארבע שורות */
.app-topbar .brand, .app-topbar .who, .app-topbar .out { white-space: nowrap; flex: none; }
.app-topbar .who { overflow: hidden; text-overflow: ellipsis; max-width: 18rem; }
.gsearch-wrap { min-width: 10rem; }
/* ⭐ 22.10.2026: במסך צר השם מוסתר אבל כפתור התפריט (הסמל) נשאר — הוא הדרך ליציאה */
@media (max-width: 1100px) { .app-topbar .who { display: none; } .app-topbar .who-btn { padding: .3rem .5rem; } }
/* ⚠️ 5.10.2026, נמצא בבדיקה החזותית בנייד (375): הסרגל גלש ב-24px כבר לפני כפתור
   המצב, ו״התראות״ ו״יציאה״ נדחקו אל מחוץ למסך. ⭐ בנייד — בלי שם המערכת, והחיפוש
   מתכווץ לרוחב שנותר. */
@media (max-width: 600px) {
  .app-topbar { gap: 6px; padding: 0 .5rem; }
  .app-topbar .brand { display: none; }
  .gsearch-wrap { min-width: 0; flex: 1 1 0; margin-inline-start: 0; }
  .app-topbar .spacer { display: none; }
}
/* ⚠️ נמצא בבדיקה החזותית: במסך נמוך — שני פסי גלילה מקוננים בכרטיס. ⭐ הכרטיס
   עצמו אינו גולל; רק גופו, והכותרת והכפתורים נשארים במקום. */
dialog[open] { display: flex; flex-direction: column; max-height: 92vh; overflow: hidden; }
dialog[open] > .dlg-body { flex: 1 1 auto; max-height: none; min-height: 0; }

/* =================================================================================
   ⭐ שלב ב׳ (5.10.2026) — אישור, ״טוען״, קישורים ומועדפים
   ⚠️ משתני עיצוב בלבד, בלי צבע קשיח: ערכת הצבע מוחלפת בנפרד.
   ================================================================================= */
/* ⛔ אישור פעולה הרסנית — אדום **מלא** (ביקורת 16, מוסכמה ס׳ 3). ⚠️ `.btn.ghost.danger`
   (אדום מתאר) נשאר לכפתור בשורה; כאן הכפתור שבחלון האישור. */
.btn.danger:not(.ghost) { background: var(--al-danger-fg); color: var(--surface); }   /* ⛔ 6.10: לא על כפתור מסגרת — שם רקע אדום + טקסט אדום */
.btn[disabled] { opacity: .6; filter: none; }
[data-busy] { cursor: progress; }
/* ⭐ תגית תיק / שם לקוח שנפתחים בלחיצה — נראים כטקסט, מתנהגים ככפתור */
.case-link { cursor: pointer; }
.case-link:hover { text-decoration: underline; }
/* ⭐ כפתור שנראה כטקסט רגיל (שם הלקוח בכותרת התיק) */
.plain-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: start; }
/* ⭐ כוכב מועדפים — מלא כשהתיק במועדפים */
.fav-on { color: var(--accent-gold); }
#ask-body p { margin: 0 0 .6rem; }
#ask-fields .field { margin-top: .7rem; }
#ask-fields input, #ask-fields textarea { width: 100%; }
/* ⭐ שורה בחלונית או בפעמון שנפתחת בלחיצה */
.line.click, .alert-row.click { cursor: pointer; }
.line.click:hover, .alert-row.click:hover { background: var(--row-hover-bg); }
/* ⭐ טלפון אחיד (5.10.2026, ו4): המספר, ולצדו חיוג ווואטסאפ. משתני ערכה בלבד. */
.phone-cell { white-space: nowrap; }
.phone-act { margin-inline-start: .3rem; font-size: .78rem; font-weight: 600; color: var(--accent-blue); text-decoration: none; }
.phone-act:hover { text-decoration: underline; }
.phone-acts { margin-top: .25rem; font-size: .85rem; }
.phone-acts .phone-cell > span[dir] { display: none; }   /* בכרטיס — המספר כבר בשדה; רק הקישורים */

/* ⭐ 094: תזכורת ללקוח לפני דיון — שורת הפעולות בחלון (client-reminders.js) */
.crm-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
#crm-text { width: 100%; }
/* ⭐ 096 (6.10.2026, צוות ט7): טופס ״כמה זמן עבדתי״ בכרטיס המשימה (hours.js) */
.hr-form { margin-top: .8rem; align-items: flex-end; }
/* ⭐ 6.10.2026 (צוות ט1, 090): חלונות ההכרעה — החלפת הסכם שכ״ט, והצעת הביטול בסגירת תיק.
   ⚠️ משתני ערכה בלבד (קלאסית + מצב כהה). */
#ask-body .fee-mode { border: 0; padding: 0; margin: .4rem 0 0; display: grid; gap: .55rem; }
#ask-body .fee-mode label.chk, #ask-body .close-offer label.chk { align-items: flex-start; white-space: normal;
  color: var(--text-main); }
#ask-body .fee-mode label.chk input, #ask-body .close-offer label.chk input { margin-top: .2rem; flex: none; }
#ask-body .fee-mode input[type="date"] { width: 100%; }
#ask-body .close-offer { max-height: 16rem; overflow-y: auto; border: 1px solid var(--border);
  border-radius: 6px; padding: .4rem .6rem; display: grid; gap: .35rem; }
#ask-body .close-offer h4 { margin: .3rem 0 0; font-size: .85rem; }
/* =================================================================================
   ⭐ מחשבון הצמדה וריבית (ט4, 6.10.2026) — public/interest.js
   ⛔ צבעים — רק משתני ההתראות שלמעלה (בדיקת הניגודיות)
   ================================================================================= */
.int-disclaimer {
  margin: 0 0 1rem; padding: .75rem 1rem; border-radius: 10px; font-weight: 700;
  background: var(--al-warn-bg); border: 2px solid var(--al-warn-bd); color: var(--al-warn-fg);
}
.int-form { margin-bottom: 1rem; }
.int-subform { margin-top: .9rem; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.int-advanced { margin: .6rem 0; }
.int-advanced > summary { cursor: pointer; color: var(--accent-blue); font-size: .88rem; margin-bottom: .5rem; }
.int-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0; }
.int-h { margin: 1.2rem 0 .5rem; font-size: 1rem; font-weight: 700; }
.int-list { margin: .3rem 0 0; padding-inline-start: 1.2rem; }
.int-list li { margin: .15rem 0; }
.int-summary-line { margin: .3rem 0 .8rem; color: var(--text-muted); }
.int-print-head { display: none; }
#view-interest th.num, #view-interest td.num { direction: ltr; text-align: right; white-space: nowrap; }
#view-interest .kpi-card .n { font-size: 1.35rem; direction: ltr; text-align: right; }
/* ⭐ 164–166: מאזן — סכומים משמאל לימין, תאי תקציב */
#view-balance .kpi-card .n { font-size: 1.35rem; direction: ltr; text-align: right; }
#view-balance .cell-btn { width: 100%; text-align: inherit; }
#view-balance .kpi-row + .kpi-row { margin-top: -.4rem; }

/* ⭐ הדפסה — רק התוצאה, כולל האזהרה (בכותרת ובסוף). ⚠️ רק כשהמשתמש לחץ ״הדפסה״. */
@media print {
  body.int-printing * { visibility: hidden; }
  body.int-printing #int-result, body.int-printing #int-result * { visibility: visible; }
  body.int-printing #int-result { position: absolute; inset: 0 0 auto 0; padding: 0 1cm; }
  body.int-printing .int-print-head { display: block; margin-bottom: .5rem; }
  body.int-printing .kpi-card, body.int-printing .table-container { box-shadow: none; }
}
/* ⭐ מחשבון מועדים ופגרות (6.10.2026, שלב 17, ט3; קובץ 092). משתני ערכה בלבד. */
.dl-fixed { font-weight: 700; font-size: .95rem; }
.dl-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1rem 0 .6rem; }
.dl-result { margin: 1rem 0; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: 10px; }
.dl-date { font-size: 1.6rem; font-weight: 700; color: var(--accent-blue); margin: .2rem 0; }
.dl-steps { margin: .4rem 0 .8rem; padding-inline-start: 1.3rem; line-height: 1.7; font-size: .9rem; }
label.chk.dl-chk { white-space: normal; align-items: flex-start; }   /* תווית ארוכה — נשברת לשורות ולא גולשת */
/* ⭐ שעון על משימה (6.10.2026, צ1). משתני ערכה בלבד — כמו כפתורי הסרגל העליון. */
.app-topbar .timer-pill {
  background: var(--topbar-ctl-bg); color: var(--topbar-fg); border: 1px solid var(--topbar-fg);
  padding: .2rem .7rem; border-radius: 7px; cursor: pointer; font: inherit; font-size: .78rem;
  font-weight: 700; white-space: nowrap; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto;
}
.app-topbar .timer-pill:hover { background: var(--topbar-ctl-hover); }
.tk-timer { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: 0 0 1.1rem;
  padding: .6rem .8rem; border: 1px solid var(--border); border-radius: 10px; }
.tk-timer .meta { color: var(--text-muted); font-size: .85rem; }
.tk-timer-on b { font-variant-numeric: tabular-nums; direction: ltr; display: inline-block; }

/* ⭐ 132 (17.10.2026, חבילה 1): ״קישורים״ בדף הבית — קבוצות של כפתורי קישור */
.office-links-group { margin: .4rem 0 .8rem; }
.office-links-group h4 { margin: .2rem 0 .45rem; font-size: .82rem; font-weight: 700; color: var(--text-muted); }
.office-links { display: flex; flex-wrap: wrap; gap: .45rem; }
.office-links a { text-decoration: none; }
tr.mute td { opacity: .6; }

/* ⭐ 132 (פריט 50): ״יומנים בזוגות״ — שני יומנים בכל שורה; בנייד — אחד מתחת לשני */
.cal-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.cal-pairs .cal-pair.solo { grid-column: 1 / -1; }
.cal-pairs .cal-pair .body { max-height: 26rem; overflow-y: auto; }
@media (max-width: 760px) { .cal-pairs { grid-template-columns: 1fr; } }

/* ⭐ 173 (20.10.2026): פיצול אוגדן — תמונות עמודים, חיתוך בין עמודים, חלקים בצבעים */
dialog.split-dlg { width: min(1200px, 96vw); }
.sp-wrap { display: grid; grid-template-columns: 1fr 340px; gap: 1rem; align-items: start; }
.sp-pages { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; max-height: 64vh; overflow: auto; padding: 4px; }
.sp-page { padding: 4px; border-radius: 6px; text-align: center; border: 1px solid var(--input-border); }
.sp-thumb { width: 110px; min-height: 140px; display: flex; align-items: center; justify-content: center; }
.sp-thumb canvas { max-width: 110px; height: auto; border: 1px solid var(--input-border); }
.sp-page[data-seg="0"], .sp-part[data-seg="0"] { background: var(--al-info-bg); }
.sp-page[data-seg="1"], .sp-part[data-seg="1"] { background: var(--al-ok-bg); }
.sp-page[data-seg="2"], .sp-part[data-seg="2"] { background: var(--al-warn-bg); }
.sp-page[data-seg="3"], .sp-part[data-seg="3"] { background: var(--al-mute-bg); }
.sp-cut { width: 22px; height: 140px; border: 1px dashed transparent; background: transparent; color: var(--text-muted); cursor: pointer; border-radius: 4px; padding: 0; }
.sp-cut:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
.sp-cut.on { border: 2px solid var(--accent-blue); color: var(--accent-blue); }
.sp-parts { max-height: 64vh; overflow: auto; }
.sp-part { padding: .6rem; border-radius: 8px; margin-bottom: .6rem; }
.sp-part select { width: 100%; margin: .35rem 0; }
@media (max-width: 800px) { .sp-wrap { grid-template-columns: 1fr; } }


/* =================================================================================
   תפריט המשתמש בסרגל העליון (22.10.2026) — ״להוציא את הלחצנים מהסרגל״
   ================================================================================= */
.who-wrap { position: relative; flex: none; }
.app-topbar .who-btn { display: inline-flex; align-items: center; gap: .45rem; }
.app-topbar .who-btn .who { max-width: 14rem; }
.app-topbar .who-btn[aria-expanded="true"] { background: var(--topbar-ctl-hover); }
.who-ico { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.who-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 12.5rem;
  background: var(--surface); color: var(--text-main); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--dialog-shadow); padding: .35rem; z-index: 1200;
  display: flex; flex-direction: column; gap: 2px; direction: rtl;
}
.who-menu[hidden] { display: none; }
.who-menu hr { border: 0; border-top: 1px solid var(--border); margin: .25rem 0; }
.app-topbar .who-menu .out {
  background: none; color: var(--text-main); text-align: right; width: 100%;
  display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; font-size: .85rem; border-radius: 7px;
}
.app-topbar .who-menu .out:hover { background: var(--sidebar-active-bg); color: var(--sidebar-active-fg); }
.app-topbar .who-menu .theme-toggle { padding: .5rem .7rem; }
.who-menu .theme-toggle svg { width: 1rem; height: 1rem; }
.who-menu .theme-text { font-size: .85rem; }
@media (max-width: 600px) { .who-menu { left: auto; right: 0; } }

/* =================================================================================
   ⭐ דואר פנימי כצ׳אט (22.10.2026, ה18) — mail-chat.js. רק משתני הערכה, ולכן גם במצב כהה.
   ================================================================================= */
.mc-wrap { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  height: calc(100dvh - var(--topbar-height) - 130px); min-height: 420px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.mc-side { display: flex; flex-direction: column; border-inline-end: 1px solid var(--border); min-height: 0; }
.mc-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; padding: .5rem; border-bottom: 1px solid var(--border); }
.mc-filters #mail-new { margin-inline-start: auto; }
.mc-filters button { border: 1px solid var(--border); background: transparent; color: var(--text-muted);
  border-radius: var(--radius-pill); padding: .2rem .7rem; font: inherit; font-size: .85rem; cursor: pointer; }
.mc-filters button.on { background: var(--selected-bg); color: var(--selected-fg); border-color: transparent; font-weight: 600; }
.mc-threads { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.mc-threads .empty { padding: 1.5rem 1rem; }
.mc-thread { padding: .6rem .8rem; border-bottom: 1px solid var(--border); cursor: pointer; }
.mc-thread:hover { background: var(--row-hover-bg); }
.mc-thread.on { background: var(--selected-bg); }
.mc-thread:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.mc-row1, .mc-row2, .mc-row3 { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.mc-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.mc-thread.unread .mc-who, .mc-thread.unread .mc-subj { font-weight: 700; color: var(--text-main); }
.mc-time { color: var(--text-muted); font-size: .78rem; white-space: nowrap; }
.mc-subj { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; color: var(--text-muted); }
.mc-row3 { margin-top: .15rem; font-size: .8rem; }
.mc-last { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-badge { background: var(--accent-blue); color: var(--on-accent); border-radius: var(--radius-pill);
  min-width: 1.35rem; padding: 0 .4rem; text-align: center; font-size: .75rem; font-weight: 700; line-height: 1.35rem; }
.mc-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg-base); }
.mc-empty { margin: auto; color: var(--text-muted); padding: 2rem; text-align: center; }
.mc-conv { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.mc-conv[hidden] { display: none; }
.mc-head { display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem; background: var(--surface); border-bottom: 1px solid var(--border); }
.mc-title { flex: 1; min-width: 0; }
.mc-title b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-back { display: none; }
.mc-msgs { flex: 1; overflow-y: auto; padding: .8rem 1rem; display: flex; flex-direction: column; gap: .35rem; }
.mc-day { text-align: center; margin: .5rem 0; }
.mc-day span { background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); font-size: .75rem;
  border-radius: var(--radius-pill); padding: .1rem .6rem; }
.mc-msg { display: flex; }
.mc-msg.theirs { justify-content: flex-start; }   /* ⭐ RTL: הצד השני מימין, כמו בוואטסאפ בעברית */
.mc-msg.mine { justify-content: flex-end; }
.mc-bubble { max-width: min(72%, 560px); padding: .45rem .7rem .3rem; border-radius: 14px; box-shadow: var(--card-shadow);
  background: var(--surface); border: 1px solid var(--border); overflow-wrap: anywhere; }
.mc-msg.theirs .mc-bubble { border-start-start-radius: 4px; }
.mc-msg.mine .mc-bubble { background: rgba(var(--accent-rgb), .12); border-color: rgba(var(--accent-rgb), .28); border-start-end-radius: 4px; }
.mc-from { font-size: .78rem; font-weight: 700; color: var(--accent-deep); margin-bottom: .1rem; }
.mc-act { margin-bottom: .2rem; }
.mc-subj2 { font-weight: 600; font-size: .88rem; }
.mc-body { white-space: pre-wrap; }
.mc-doc { margin-top: .25rem; font-size: .88rem; }
.mc-meta { font-size: .72rem; color: var(--text-muted); text-align: end; margin-top: .15rem; }
.mc-read.all { color: var(--accent-blue); font-weight: 600; }
.mc-sys { align-self: center; max-width: 85%; text-align: center; font-size: .82rem; padding: .25rem .8rem;
  border-radius: var(--radius-pill); background: var(--al-ok-bg); border: 1px solid var(--al-ok-bd); color: var(--al-ok-fg); }
.mc-compose { background: var(--surface); border-top: 1px solid var(--border); padding: .5rem .7rem; }
.mc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .4rem; }
.mc-tools select { max-width: 13rem; }
.mc-to { margin-inline-start: auto; }
.mc-input { display: flex; gap: .5rem; align-items: flex-end; }
.mc-input textarea { flex: 1; resize: none; min-height: 2.4rem; max-height: 10rem; border-radius: 12px; padding: .5rem .7rem;
  border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text-main); font: inherit; }
@media (max-width: 700px) {
  .mc-wrap { grid-template-columns: 1fr; height: calc(100dvh - var(--topbar-height) - 110px); min-height: 360px; }
  .mc-wrap .mc-main { display: none; }
  .mc-wrap.mc-open .mc-side { display: none; }
  .mc-wrap.mc-open .mc-main { display: flex; }
  .mc-back { display: inline-flex; }
  .mc-bubble { max-width: 86%; }
  .mc-to { margin-inline-start: 0; width: 100%; }
}

/* =================================================================================
   ⭐ כרטיס הלקוח בכרטיסים (22.10.2026, מהדי: ״לא ברור כל נתון איפה מתחיל ואיפה נגמר״).
      רק משתני ערכה — גם במצב כהה.
   ================================================================================= */
.pc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.pc-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  box-shadow: var(--card-shadow); padding: .9rem 1rem 1rem; min-width: 0; }
.pc-card[hidden] { display: none; }
.pc-card.pc-wide { grid-column: 1 / -1; }
.pc-card > header { display: flex; align-items: center; gap: .6rem; margin: -.1rem 0 .8rem; padding-bottom: .55rem;
  border-bottom: 1px solid var(--border); }
.pc-card > header h3 { margin: 0; font-size: 1rem; color: var(--text-main); }
.pc-card > header .count, .pc-card > header .hint { color: var(--text-muted); font-size: .85rem; }
.pc-card .grid { margin: 0; }
.pc-card > textarea { width: 100%; }
.pc-addr-grid { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
.pc-addr-more { margin-top: .8rem; padding-top: .6rem; border-top: 1px dashed var(--border); }
.pc-cases-table tr.pc-case-off td { color: var(--text-muted); }
#pc-trust.pc-card { margin-top: 0 !important; }
#addr-dlg .ad-choices { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; }
#addr-dlg .ad-choices .btn { justify-content: center; }
@media (max-width: 900px) {
  .pc-cards { grid-template-columns: 1fr; }
}

/* ⭐ 202 (ליל 23.10): ניהול ⟵ העברת מסמכים מהדרייב (drive-migration.js) */
.dm-sources { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.dm-box { border: 1px solid var(--border); border-radius: 8px; padding: .8rem 1rem; background: var(--surface); }
.dm-box h4 { margin: 0 0 .3rem; }
.dm-box textarea { width: 100%; box-sizing: border-box; font-family: monospace; font-size: .85rem; }
.dm-box label { display: block; margin-top: .5rem; font-size: .85rem; color: var(--text-muted); }
.dm-adv { margin-top: .4rem; }
.dm-actions, .dm-filters, .dm-pager { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .6rem 0; }
.dm-summary { display: flex; flex-direction: column; gap: .2rem; padding: .6rem .9rem; border-radius: 8px;
  background: var(--al-info-bg); border: 1px solid var(--al-info-bd); color: var(--text-main); }
.dm-runs tr.on td { background: rgba(var(--accent-rgb), .07); }
.dm-groups td { vertical-align: top; }
.dm-groups select, .dm-groups input[type="search"] { width: 100%; box-sizing: border-box; margin-bottom: .25rem; }
.dm-path { word-break: break-word; }
.dm-conf { display: inline-block; min-width: 2.2rem; text-align: center; border-radius: 999px; padding: 0 .4rem; font-weight: 600; border: 1px solid; }
.dm-conf.ok   { background: var(--al-ok-bg);   border-color: var(--al-ok-bd);   color: var(--al-ok-fg); }
.dm-conf.warn { background: var(--al-warn-bg); border-color: var(--al-warn-bd); color: var(--al-warn-fg); }
.dm-conf.mute { background: var(--al-mute-bg); border-color: var(--al-mute-bd); color: var(--al-mute-fg); }
.dm-court { display: flex; gap: .3rem; align-items: flex-start; font-size: .85rem; }

/* ⭐ 208 (23.10.2026): כרטיסיית ״מסמכים״ — רשימת כלים משמאל (בעברית: מימין), סדנה, עמודים */
.pt-wrap { display: grid; grid-template-columns: 250px 1fr; gap: 1rem; align-items: start; }
.pt-tools { display: flex; flex-direction: column; gap: 4px; }
.pt-tool { text-align: start; padding: .55rem .8rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-main); cursor: pointer; }
.pt-tool b { display: block; }
.pt-tool .hint { display: block; font-size: .78rem; }
.pt-tool:hover { border-color: var(--accent-blue); }
.pt-tool.active { border-color: var(--accent-blue); background: rgba(var(--accent-rgb), .08); }
.pt-note { margin-top: .6rem; font-size: .78rem; }
.pt-panel { min-width: 0; }
.pt-bar { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .6rem; }
.pt-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: .6rem; align-items: center; }
.pt-sep { flex-basis: 100%; height: 0; }
.pt-pages { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; max-height: 60vh; overflow: auto; }
.pt-page { padding: 4px; border-radius: 6px; text-align: center; border: 2px solid var(--input-border); cursor: pointer; user-select: none; }
.pt-page:hover { border-color: var(--accent-blue); }
.pt-page.on { border-color: var(--accent-blue); background: var(--al-info-bg); }
.pt-page .sp-thumb { transition: transform .15s; }
.pt-page input[type="checkbox"] { display: none; }
.pt-mini { width: 44px; min-height: 56px; }
.pt-mini canvas { max-width: 44px; }
.pt-row-acts { white-space: nowrap; }
.pt-opts .field label input[type="checkbox"] { margin-inline-end: .4rem; }
.pt-wide { grid-column: 1 / -1; }
.pt-out { display: flex; align-items: end; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.pt-out .field { flex: 1 1 16rem; margin: 0; }
.pt-out .up-progress { flex-basis: 100%; }
@media (max-width: 800px) { .pt-wrap { grid-template-columns: 1fr; } .pt-tools { flex-direction: row; flex-wrap: wrap; } .pt-tool .hint { display: none; } }

/* night2-home */
/* ⭐ 24.10.2026 (ליל יישור הקו): שעון בסרגל (#27) ו-״1/80״ אפור בכותרות הרשימות (#28) */
#topbar-clock { color: var(--text-muted); font-size: .82rem; white-space: nowrap; margin-inline-end: .6rem; }
.count-mute { color: var(--text-muted); }

/* night2-case — ליל 24.10.2026: כרטיס התיק — שורה שנייה בכותרת, הנחיות עבודה, ציר שלבים אופקי (#38 #40 #41 #42 #44) */
#cc-sub { flex: 1 1 100%; display: flex; flex-direction: column; gap: 2px; margin-top: .2rem; font-size: .88rem; color: var(--text-muted); }
#cc-sub .cc-sub-line { min-width: 0; }
#cc-sub .cc-vs { color: var(--text-main); font-weight: 600; }
#cc-sub .cc-facts, #cc-sub .cc-team { color: var(--text-muted); }
#cc-sub .cc-counts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#cc-sub .cc-side { font: inherit; color: var(--accent-blue); cursor: pointer; padding: 0 .15rem; border-radius: 4px; }
#cc-sub .cc-side:hover { text-decoration: underline; background: var(--al-info-bg); }
.cc-instr { margin: 0 0 .8rem; border: 1px solid var(--border); border-radius: var(--radius-sm, 6px); background: var(--al-warn-bg); }
.cc-instr > summary { cursor: pointer; padding: .5rem .8rem; font-weight: 700; }
.cc-instr .cc-instr-body { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; padding: 0 .8rem .6rem; }
.cc-instr .cc-instr-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cc-instr .cc-instr-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.cc-instr textarea { width: 100%; font: inherit; box-sizing: border-box; }
.cc-instr .cc-instr-acts { display: flex; gap: 6px; padding: 0 .8rem .6rem; }
.cc-parties-filter { display: flex; align-items: center; gap: 8px; margin: 0 0 .6rem; }
/* ציר השלבים: מיושר לימין (RTL ⟵ flex-start), נקודות על קו רציף; ⛔ הכללים הכלליים של .stages אינם נערכים */
#cc-stages.stages { position: relative; justify-content: flex-start; gap: 0; padding: .35rem 0 .2rem; overflow-x: auto; flex-wrap: nowrap; }
#cc-stages.stages::before { content: ""; position: absolute; top: .68rem; right: .9rem; left: .9rem; height: 2px; background: var(--border); }
#cc-stages.stages button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: transparent;
  padding: 0 .45rem; font-size: .74rem; border-radius: 0; flex: 0 0 auto; }
#cc-stages.stages button .dot { display: block; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid var(--border); background: var(--surface); }
#cc-stages.stages button.done { background: transparent; color: var(--text-muted); }
#cc-stages.stages button.done .dot { background: var(--al-mute-fg); border-color: var(--al-mute-fg); }
#cc-stages.stages button.now { background: transparent; color: var(--accent-blue); font-weight: 700; }
#cc-stages.stages button.now .dot { width: 16px; height: 16px; margin-top: -2px; background: var(--accent-blue); border-color: var(--accent-blue); box-shadow: 0 0 0 3px var(--al-info-bg); }
#cc-stages.stages button:hover:not(:disabled) .dot { border-color: var(--accent-blue); }
@media (max-width: 800px) { .cc-instr .cc-instr-body { grid-template-columns: 1fr; } }


/* =================================================================================
   24.10.2026 — יישור קו לפני 25.10: כרטיס התיק + הערות הדרייב
   ================================================================================= */

/* --- כרטיס התיק: כותרת ענקית ובלוק פרטים עם תוויות (פגישת 23.10: ״שם התיק — ענק, לא גדול״) --- */
/* ⭐ הוראת מהדי (24.10, צילום ייצור): שם הלקוח בגדול ובצמוד אליו מספר התיק; שם ההליך — גודל רגיל */
#case-card .dlg-head #cc-client { order: -3; font-size: 1.9rem; line-height: 1.25; font-weight: 800; color: var(--text-main); min-width: 0; overflow-wrap: anywhere; text-align: start; }
#case-card .dlg-head #cc-number { order: -2; font-size: 1.9rem; line-height: 1.25; font-weight: 800; padding: .1rem .9rem; }
#case-card .dlg-head #cc-fav { order: -1; }
/* ⭐ ״סגירה״ — הכי למעלה, לבדו בשורה, בגודלו; כל הכותרת מתחתיו */
#case-card .dlg-head .dlg-x { order: -10; }
#case-card .dlg-head::before { content: ""; order: -9; flex: 0 0 100%; height: 0; }
#case-card .dlg-head #cc-title { font-size: 1.15rem; line-height: 1.3; font-weight: 700; min-width: 0; overflow-wrap: anywhere; color: var(--text-muted); }
#case-card .dlg-head { min-width: 0; }
#cc-sub { flex: 1 1 100%; margin-top: .5rem; font-size: 1rem; color: var(--text-main); min-width: 0; }
#cc-sub .cc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm, 6px); background: var(--surface-2); overflow: hidden; }
#cc-sub .cc-cell { padding: .55rem .9rem; border-inline-start: 1px solid var(--border); border-bottom: 1px solid var(--border); min-width: 0; }
#cc-sub .cc-cell-wide { grid-column: 1 / -1; border-inline-start: 0; }
#cc-sub .cc-lbl { display: block; font-size: .72rem; color: var(--text-muted); letter-spacing: .2px; margin-bottom: 2px; }
#cc-sub .cc-val { font-size: 1.02rem; font-weight: 600; overflow-wrap: anywhere; }
#cc-sub .cc-vs { font-size: 1.25rem; font-weight: 800; color: var(--text-main); }
#cc-sub .cc-counts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; font-weight: 600; }
#cc-sub .cc-side { font: inherit; color: var(--accent-blue); cursor: pointer; padding: 0 .15rem; border-radius: 4px; }
#cc-sub .cc-side:hover { text-decoration: underline; background: var(--al-info-bg); }

/* --- שלבי הטיפול: בקרה מתקפלת (כותרת ⟵ כל השלבים ⟵ בחירה) --- */
.cc-stg { margin: 0 0 .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm, 6px); background: var(--surface-2); }
.cc-stg > summary { cursor: pointer; padding: .55rem .9rem; font-weight: 700; list-style: none; display: flex; align-items: center; gap: .6rem; }
.cc-stg > summary::-webkit-details-marker { display: none; }
.cc-stg > summary::before { content: "◂"; color: var(--text-muted); transition: transform .15s; }
.cc-stg[open] > summary::before { transform: rotate(-90deg); }
.cc-stg .cc-stg-now { font-weight: 600; color: var(--accent-blue); background: var(--al-info-bg); border-radius: 999px; padding: .05rem .7rem; font-size: .88rem; }
#cc-stages-box #cc-stages.stages { position: static; flex-direction: column; align-items: stretch; flex-wrap: nowrap; overflow: visible;
  gap: 2px; padding: .2rem .6rem .7rem; }
#cc-stages-box #cc-stages.stages::before { display: none; }
#cc-stages-box #cc-stages.stages button { flex-direction: row; align-items: center; gap: 10px; width: 100%; text-align: start;
  padding: .4rem .6rem; border-radius: 6px; font-size: .92rem; }
#cc-stages-box #cc-stages.stages button:hover:not(:disabled) { background: var(--row-hover-bg); }
#cc-stages-box #cc-stages.stages button.now { background: var(--al-info-bg); }
#cc-stages-box #cc-stages.stages button.now .dot { margin-top: 0; }

/* --- ״עקוב אחר התיק״ לא בורח מהקצה --- */
#ce-bar { box-sizing: border-box; max-width: calc(100% - 2rem); min-width: 0; overflow-wrap: anywhere; }
#case-card { overflow-x: hidden; }

/* --- נספחים והתכתבויות --- */
.corr-top { display: flex; gap: 8px; margin-bottom: .6rem; align-items: flex-start; }
.corr-top textarea { flex: 1; min-width: 0; font: inherit; }
.corr-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: .6rem; align-items: center; }
.corr-acts .spacer { flex: 1; }
.corr-filters { margin-bottom: .5rem; }
table.corr .corr-text { white-space: pre-wrap; overflow-wrap: anywhere; }
table.corr tr.corr-system td { color: var(--text-muted); }

/* --- הקפאת גלילה: כותרת המסך ורצועות הלשוניות נשארות (הערות הדרייב) --- */
.app-main > section > .page-head { position: sticky; top: 0; z-index: 6; background: var(--bg-base); padding: .5rem 0; margin-bottom: .6rem; }
.app-main > section > .tabs, .app-main > section > .tasks-family { position: sticky; top: var(--ph-h); z-index: 5; background: var(--bg-base); }
#ld-tabs { position: sticky; top: 0; z-index: 5; background: var(--surface); }
dialog .dlg-body .tabs { position: sticky; top: 0; z-index: 5; background: var(--surface); }

/* --- קישורים כעיגולים בראש הדשבורד --- */
.olt { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem 2rem; margin: 0 0 1.1rem; }
/* ⭐ 25.10 (דרישה 76): קבוצות עם כותרת ומונה; העיגולים במרכז כל קבוצה */
.olt-group { display: flex; flex-direction: column; align-items: center; gap: .45rem; max-width: 100%; }
.olt-group-h { margin: 0; font-size: .82rem; font-weight: 700; color: var(--text-muted); }
.olt-count { display: inline-block; min-width: 1.2rem; padding: 0 .35rem; border-radius: 999px; background: var(--al-info-bg); color: var(--accent-blue); font-size: .72rem; text-align: center; }
.olt-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem 1.1rem; }
/* ⭐ 25.10 (דרישה 48): ניווט בין תיקי הלקוח בתחתית כרטיס התיק */
.cc-clientnav { display: inline-flex; align-items: center; gap: .6rem; margin-inline-end: auto; }
.cc-clientnav[hidden] { display: none; }
.olt-circle { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 5.2rem; text-decoration: none; color: var(--text-main); }
.olt-circle > img, .olt-circle > span:first-child { width: 3.2rem; height: 3.2rem; border-radius: 50%; object-fit: contain; padding: .5rem; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.25rem; color: var(--accent-blue); }
.olt-circle:hover > img, .olt-circle:hover > span:first-child { border-color: var(--accent-blue); box-shadow: 0 0 0 3px var(--al-info-bg); }
.olt-name { font-size: .72rem; text-align: center; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- תפריט צד היררכי --- */
.sidebar-nav li.has-sub { position: relative; }
.sidebar-nav .nav-caret { position: absolute; inset-inline-end: .35rem; top: .55rem; width: 1.4rem; height: 1.4rem; border: 0; background: transparent;
  cursor: pointer; color: inherit; opacity: .7; border-radius: 4px; }
.sidebar-nav .nav-caret::before { content: "▾"; display: inline-block; transition: transform .15s; }
.sidebar-nav li.has-sub:not(.open) .nav-caret::before { transform: rotate(90deg); }
.sidebar-nav .nav-caret:hover { background: var(--row-hover-bg); opacity: 1; }
.sidebar-nav .sidebar-link.parent { padding-inline-end: 2rem; }
.sidebar-sub { list-style: none; margin: 2px 0 0; padding: 0 1.1rem 0 0; display: none; flex-direction: column; gap: 4px; }
.sidebar-nav li.has-sub.open > .sidebar-sub { display: flex; }
.sidebar-link.sub { font-size: .9rem; padding-block: .35rem; opacity: .95; }
#nav-back { margin-inline-end: .4rem; }

/* ⭐ גובה כותרת המסך — נמדד לכל מסך ב-freezeHeads (app.js); ברירת המחדל לפני המדידה */
:root { --ph-h: 3rem; }
/* ⭐ כפתור ״סגירה״ האדום נשאר בשורת הכותרת העליונה; בלוק הפרטים יורד מתחתיו */
#case-card .dlg-head #cc-sub { order: 100; }


/* =================================================================================
   24.10.2026 — כרטיס תיק: פריסה אנכית (הוראת מהדי מצילום מסך ייצור 1070/01)
   ================================================================================= */
/* --- הכותרת וגריד הפרטים — בלוק אחד (״מה שסומן בכחול נכנס לאזור הכחול״) --- */
#case-card .dlg-head { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm, 6px);
  margin: .6rem .9rem .3rem; padding: .8rem 1.2rem; }
#cc-sub { margin-top: .4rem; }
#cc-sub .cc-grid { background: transparent; border: 0; border-top: 1px solid var(--border); border-radius: 0; }
#cc-sub .cc-cell { border-bottom: 0; }

/* --- פריסה: עמודת צד ימנית (שלבים · לשוניות · פעולות) + עמודה ראשית --- */
.cc-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.cc-rail { position: sticky; top: 0; display: flex; flex-direction: column; gap: .7rem; }
.cc-main { min-width: 0; }
.cc-rail .cc-stg { margin: 0; }
.cc-stg .cc-stg-hint { margin: 0; padding: 0 .9rem .7rem; font-size: .76rem; color: var(--text-muted); }
.cc-stg > summary { background: var(--al-info-bg); color: var(--accent-blue); border: 1.5px solid var(--accent-blue); border-radius: var(--radius-sm, 6px);
  padding: .6rem .9rem; flex-wrap: wrap; }
.cc-stg > summary::before { color: inherit; }
.cc-stg[open] > summary { border-end-start-radius: 0; border-end-end-radius: 0; }
.cc-stg .cc-stg-now { background: var(--surface); color: var(--accent-blue); }

/* לשוניות אנכיות */
.cc-rail #cc-tabs.tabs { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border); border-radius: var(--radius-sm, 6px);
  background: var(--surface); padding: .3rem; position: static; overflow: visible; }
.cc-rail #cc-tabs.tabs button { width: 100%; text-align: start; padding: .55rem .8rem; border: 0; border-radius: 6px; background: transparent;
  border-inline-end: 3px solid transparent; display: flex; align-items: center; justify-content: space-between; gap: .5rem; white-space: normal; }
.cc-rail #cc-tabs.tabs button:hover { background: var(--row-hover-bg); }
.cc-rail #cc-tabs.tabs button.on { background: var(--al-info-bg); color: var(--accent-blue); font-weight: 700;
  border-inline-end-color: var(--accent-blue); border-bottom: 0; }
.cc-rail #cc-tabs.tabs button .n { margin-inline-start: auto; }

/* ״פעולות בתיק״ */
.cc-actions { border: 1px solid var(--border); border-radius: var(--radius-sm, 6px); background: var(--surface); }
.cc-actions > summary { cursor: pointer; padding: .55rem .9rem; font-weight: 700; list-style: none; display: flex; align-items: center; gap: .6rem; }
.cc-actions > summary::-webkit-details-marker { display: none; }
.cc-actions > summary::before { content: "◂"; color: var(--text-muted); transition: transform .15s; }
.cc-actions[open] > summary::before { transform: rotate(-90deg); }
.cc-actions-list { display: flex; flex-direction: column; gap: 4px; padding: 0 .6rem .6rem; }
.cc-actions-list .btn { width: 100%; justify-content: flex-start; text-align: start; }

@media (max-width: 900px) {
  .cc-layout { grid-template-columns: minmax(0, 1fr); }
  .cc-rail { position: static; }
  .cc-rail #cc-tabs.tabs { flex-direction: row; flex-wrap: wrap; }
  .cc-rail #cc-tabs.tabs button { width: auto; }
}
/* עמודת הצד קפואה בגלילה, אך אינה גבוהה מהמסך — גוללת בתוך עצמה כשהשלבים והפעולות פתוחים */
.cc-rail { max-height: calc(100dvh - 20rem); min-height: 14rem; overflow-y: auto; }

/* מטפלי התיק — שורה לכל מטפל: תפקיד קטן באפור, שם מודגש */
#cc-sub .cc-person { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; padding: 1px 0; }
#cc-sub .cc-prole { font-size: .78rem; font-weight: 400; color: var(--text-muted); }
#cc-sub .cc-pname { font-weight: 700; }

/* ⭐ 24.10.2026 (הוראת מהדי: ״הקטן את השטח של התצוגה התכלת — האלמנטים בולטים וגדולים, אבל מעט קטן יותר״) */
#case-card .dlg-head { margin: .4rem .8rem .2rem; padding: .45rem 1rem .5rem; gap: 8px 10px; }
#case-card .dlg-head #cc-client, #case-card .dlg-head #cc-number { font-size: 1.55rem; line-height: 1.2; }
#case-card .dlg-head #cc-number { padding: .05rem .7rem; }
#case-card .dlg-head #cc-title { font-size: 1.05rem; }
#case-card .dlg-head .dlg-x { height: 1.9rem; }
#cc-sub { margin-top: .15rem; }
#cc-sub .cc-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
#cc-sub .cc-cell { padding: .3rem .7rem; }
#cc-sub .cc-lbl { font-size: .68rem; margin-bottom: 0; }
#cc-sub .cc-val { font-size: .95rem; }
#cc-sub .cc-vs { font-size: 1.1rem; }
#cc-sub .cc-person { padding: 0; }

/* =================================================================================
   24.10.2026 — כלל רוחבי: רכיב נדבק בלי פער (הוראת מהדי: ״הרווח חושף את מעבר השורות בגלילה — זה קיים בחלקים רבים,
   סגור את זה בכל מקום כלל רוחבי״)
   ⚠️ למה היה פער: `position: sticky; top: 0` נדבק לשפת **התוכן** של מכל הגלילה, לא לשפתו; כל ריפוד של המכל (1.5rem ב-`.app-main`,
   1.1rem ב-`.dlg-body`) נשאר גלוי מעל הרכיב, והשורות שנגללות עוברות בו. ⭐ התיקון: מזיזים את ה-`top` (או ה-`bottom`) בגובה הריפוד,
   ומוסיפים אותו כריפוד פנימי לרכיב (שמשתמש בצבע הרקע שלו) — כך הרכיב נצמד לשפת המכל עצמה. הגודל נקבע פעם אחת, במשתנה `--sp`.
   ⛔ רכיב נדבק חדש בתוך מכל גלילה ריפודי — חייב להשתמש ב-`calc(-1 * var(--sp))`.
   ================================================================================= */
.app-main { --sp: 1.5rem; }
.dlg-body { --sp: 1.1rem; }
.app-main > section > .page-head { top: calc(-1 * var(--sp)); margin-top: calc(-1 * var(--sp)); padding-top: calc(var(--sp) + .5rem); }
.app-main > section > .tabs, .app-main > section > .tasks-family { top: calc(var(--ph-h) - var(--sp)); }
#ld-tabs, dialog .dlg-body .tabs, .ld-sticky-top { top: calc(-1 * var(--sp)); padding-top: var(--sp); }
.sticky-save { bottom: calc(-1 * var(--sp, 0px)); padding-bottom: calc(.7rem + var(--sp, 0px)); }

/* =================================================================================
   24.10.2026 — כרטיס תיק: הגלילה מתחילה בשורת הסגירה כלפי מעלה (הוראת מהדי מצילום תחתית הכרטיס)
   ⭐ הגוף לא גולל בעצמו; שתי העמודות ממלאות את הגובה שנשאר עד שורת הסגירה וכל אחת גוללת בתוכה.
   ⚠️ ה-`--sp` של העמודה הראשית הוא 0 — היא עצמה המכל הגולל וללא ריפוד, והנדבקים בתוכה (מסנני הציר) נצמדים לשפתה.
   ================================================================================= */
#case-card .dlg-body { display: flex; flex-direction: column; overflow: hidden; padding-bottom: .5rem; }
#case-card .cc-layout { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
#case-card .cc-rail { position: static; max-height: none; min-height: 0; overflow-y: auto; padding-bottom: .4rem; }
#case-card .cc-main { min-height: 0; min-width: 0; overflow-y: auto; padding-inline-end: .5rem; --sp: 0px; }
#case-card .dlg-foot { padding: .3rem 1rem; }
#case-card .dlg-foot .btn { padding: .25rem 1rem; min-height: 0; line-height: 1.4; }
@media (max-width: 900px) {
  #case-card .dlg-body { display: block; overflow: auto; }
  #case-card .cc-rail, #case-card .cc-main { overflow: visible; }
}

/* ⭐ 24.10.2026 (מהדי: ״צריך להקטין עוד קצת את האזור העליון — לוקח חצי עמוד״): הצדדים באותה שורה עם הסטטוס/ההליך/השופט;
   מטפלי התיק בשורה אחת דחוסה ברוחב מלא (תפקיד קטן + שם); ריפודים ופונטים מעט קטנים. שם הלקוח ומספר התיק נשארים גדולים. */
#case-card .dlg-head { padding: .35rem .9rem .4rem; gap: 6px 10px; margin: .35rem .8rem .15rem; }
#case-card .dlg-head #cc-client, #case-card .dlg-head #cc-number { font-size: 1.5rem; }
#case-card .dlg-head .dlg-x { height: 1.7rem; padding: 0 .7rem; }
#cc-sub .cc-cell { padding: .25rem .65rem; }
#cc-sub .cc-val { font-size: .9rem; line-height: 1.3; }
#cc-sub .cc-vs { font-size: 1rem; }
#cc-sub .cc-counts { margin-top: 0; }
#cc-sub .cc-cell-wide { border-top: 1px solid var(--border); border-inline-start: 0; }
#cc-sub .cc-cell-wide .cc-val { display: flex; flex-wrap: wrap; gap: 0 1.6rem; }
#cc-sub .cc-person { display: inline-flex; flex-wrap: nowrap; align-items: baseline; gap: .4rem; }
/* ⭐ ארבעה תאים שווי-חשיבות בשורה אחת (ההליך מקבל רוחב רב יותר), ומטפלי התיק מתחתיהם. ⚠️ ״auto-fit״ לא התאים — התא הרחב יצר מסלולים ריקים ואלו לא קרסו */
#cc-sub .cc-grid { grid-template-columns: 1.1fr .9fr 1.7fr .9fr; }
@media (max-width: 900px) { #cc-sub .cc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }