/* ============================================================
 * _layout.css — global styles for _layout.html (Stage 7)
 * Auto-extracted from <style> blocks (4 blocks combined).
 * Source of truth for the base template's design.
 * Updated: 2026-08-07 IL — TAK-245 Dev-Task 9: uniform user-menu dropdown items
 * (.user-menu-dropdown .menu-dropdown-link — width/chrome reset, annotations.md §7).
 * 2026-08-01 IL — TAK-223: scoped .btn-cell-menu contrast fix for the
 * activity-bulk ⋮ on dark net/sub-total rows (td.num[data-activity-id]); the
 * .cell-actions-popup now opens via position:fixed in JS (escapes the report tables'
 * overflow wrappers), so the is-up-flip/is-rtl-flip class-flip rules were removed.
 * 2026-07-16 IL — TAK-118: removed sidebar rules (body padding-right,
 * .muni-sidebar*) and added .muni-switch-* rules for the new user-menu
 * switch-municipality modal. .create-muni-modal / .del-muni-modal rules kept
 * — still used by /municipality-admin.
 * 2026-08-04 IL — TAK-5: added .app-footer/.app-version — site-wide version
 * footer, first footer in the app.
 * ============================================================ */

/* ---- Block 1 ---- */
        /* TAK-982: font-family/color deliberately left to Bootstrap (this rule
           was dead in production until this branch) -- Heebo is a separate issue. */
        body {
            background-color: var(--page-bg);
        }

        /* === תיקון תצוגת מספרים שליליים ב-RTL === */
        /* בעברית (RTL), סימן ה- בא לוצב בסוף המספר. הפתרון: לתת לתאי המספרים direction LTR. */
        td.num, th.num, .num {
            direction: ltr;
            unicode-bidi: embed;
        }

        /* === רוחב מלא לכל דפי האפליקציה — ברירת מחדל גלובלית ===
           Bootstrap מגדיר לקונטיינר max-width קטן (1140px). באפליקציה
           שלנו (טבלאות תקציב רחבות, dashboards, דוחות) — כמעט תמיד
           רוצים רוחב מסך מלא. מכאן ההגדרה הגלובלית.

           דוחות חדשים שייבנו בעתיד יורשו את הרוחב המלא אוטומטית בלי
           צורך להעתיק CSS מקומי.

           F229: 12 דוחות שהיו עם העתק מקומי של אותו כלל (`.container.py-4:has(.X-page)`)
           עוברים ניקיון — כולם נסמכים על הכלל הגלובלי כאן.

           אם בעתיד דף בודד דורש רוחב צר (למשל מאמר/login) — אפשר
           להוסיף opt-out מקומי או class ייעודי. */
        .container.py-4 {
            max-width: none !important;
            width: 100% !important;
            padding-left: 1rem;
            padding-right: 1rem;
        }

        /* === F227.a: דפוס "כותרת שלב 1 שמתקפלת" ===
           מסך עם בוחר עמודות פותח את הפאנל כברירת מחדל. אחרי שהמשתמש בחר עמודות
           ולחץ "צור דוח" — הפאנל מתקפל אוטומטית כדי לאפשר רוחב מסך מלא לתוצאה.
           לחיצה על הכותרת פותחת/מקפלת.

           דרישות מהקוד הקורא:
           1. container עם class="collapsible-step1" (ניתן להוסיף יחד עם class אחר)
              ו-class נוסף "collapsed-step1" כשרוצים שייפתח מקופל.
           2. בתוך ה-container — heading עם class="step1-title" (h2/h3),
              שמכיל span class="step1-caret" (החץ).
           3. תוכן הפאנל ב-div class="step1-body".
           4. JS: setupStep1Collapsible(cardId) — מחבר את ה-click handler.

           5 דוחות משתמשים בדפוס: activity_dashboard, report_all_cards,
           report_by_activity_detailed, report_by_activity, report_variance_by_mishpe. */
        .collapsible-step1 .step1-title {
            cursor: pointer;
            user-select: none;
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }
        .collapsible-step1 .step1-caret {
            font-size: 0.85rem;
            color: var(--slate-500);
            transition: transform 0.2s;
        }
        .collapsible-step1.collapsed-step1 .step1-caret { transform: rotate(-90deg); }
        .collapsible-step1.collapsed-step1 .step1-body { display: none; }
        .collapsible-step1.collapsed-step1 h2,
        .collapsible-step1.collapsed-step1 h3 { margin-bottom: 0; }

        /* === F22.b2: סטריפ "💼 בחירת עמודת תקן" — עיצוב גלובלי משותף ===
           מבנה ה-HTML מטופל ב-macros/positions_strip.html (ראה F22).
           4 דוחות משתמשים: activity_dashboard, report_by_activity,
           report_by_activity_detailed, report_by_organization. */
        .positions-strip {
            margin: 0.6rem 0 0.8rem;
            padding: 0.5rem 0.9rem;
            background: var(--ink-50);
            border: 1px solid var(--ink-200);
            border-radius: 0.4rem;
            display: flex;
            align-items: center;
            gap: 0.6rem;
            font-size: 0.88rem;
            color: var(--brand-primary-text);
        }
        .positions-strip select {
            padding: 0.3rem 0.5rem;
            border: 1px solid var(--ink-300);
            border-radius: 0.3rem;
            background: var(--surface);
            font-family: inherit;
            font-size: 0.88rem;
            color: var(--brand-primary-text);
            cursor: pointer;
        }
        .positions-strip-current {
            color: var(--gray-500);
            font-size: 0.82rem;
            margin-inline-start: auto;
        }

        /* === F-AUDIT12: סרגל גלילה אופקי עליון מסונכרן (ממצא #12) ===
           עיצוב משותף ל-2 מסכים שמשתמשים בסרגל כפול: VBM + salary_budget.
           ה-helper window.setupTopScrollbar() מטפל בסנכרון JS.
           דפוס: <div class="top-scrollbar"><div class="top-scrollbar-inner"></div></div>
                 מעל ה-overflow-x:auto wrapper של הטבלה.
           Override מקומי ל-salary_budget: display:none ברירת מחדל +
           .sb-dept.collapsed .top-scrollbar (מוסתר כשהמחלקה מקופלת). */
        .top-scrollbar {
            overflow-x: auto;
            overflow-y: hidden;
            height: 14px;
            background: var(--ink-50);
            border-bottom: 1px solid var(--slate-200);
        }
        .top-scrollbar-inner { height: 1px; }
        .top-scrollbar::-webkit-scrollbar { height: 12px; }
        .top-scrollbar::-webkit-scrollbar-track {
            background: var(--slate-100);
            border-radius: 6px;
        }
        .top-scrollbar::-webkit-scrollbar-thumb {
            background: var(--slate-400);
            border-radius: 6px;
        }
        .top-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--slate-500); }

        /* === F28.a: מערכת מודאלים אחידה ===
           מבנה: <div class="app-modal-bg"> <div class="app-modal-box size-X">
                   <div class="app-modal-head COLOR"> <span class="app-modal-title">...</span>
                   <button class="app-modal-close" onclick="closeModal('myId')">✕</button> </div>
                   <div class="app-modal-body">...</div>
                   <div class="app-modal-foot">...</div>
                 </div></div>
           פתיחה: window.openModal('myId') / window.closeModal('myId')
           ESC + click-outside מטופלים אוטומטית ע"י window.setupAppModals() (ראה F28.b).

           Macro: {% import 'macros/modal.html' as m with context %}
                  {% call m.modal('myId', title='כותרת', size='lg') %} body {% endcall %}
        */
        .app-modal-bg {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.45);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }
        .app-modal-bg.visible { display: flex; }
        .app-modal-bg.z-over   { z-index: 2000; }   /* מודאל מעל מודאל אחר */
        .app-modal-bg.z-system { z-index: 9000; }   /* drilldown / system-level */

        /* === מודאלים מוערמים: רק העליון מציג רקע כהה ===
           מונע הצטברות אטימות (0.45 + 0.45 ≈ 0.70 שזה כהה מדי לקריאה)
           כשנפתחים מספר חלונות זה על זה. כשנפתח מודאל "עליון" יותר ב-z-index,
           הרקעים של מודאלים שתחתיו הופכים שקופים — והתוכן שלהם נשאר קריא.
           רק העליון תמיד מציין את שכבת המיקוד עם רקע כהה.
           מכסה את כל מערכות הרקעים: app-modal-bg, cam-backdrop, sdm-bg,
           וגם מחלקות לוקאליות (cards-modal-bg/reassign-modal-bg/new-act-modal-bg). */

        /* רובד עליון ב-z=9000 (sdm-bg / app-modal-bg.z-system) → מכבה הכל שתחתיו */
        body:has(.sdm-bg.visible) .app-modal-bg.visible:not(.z-system),
        body:has(.sdm-bg.visible) .cam-backdrop.open,
        body:has(.sdm-bg.visible) .cards-modal-bg.visible,
        body:has(.sdm-bg.visible) .reassign-modal-bg.visible,
        body:has(.sdm-bg.visible) .new-act-modal-bg.visible,
        body:has(.app-modal-bg.visible.z-system) .app-modal-bg.visible:not(.z-system),
        body:has(.app-modal-bg.visible.z-system) .cam-backdrop.open,
        body:has(.app-modal-bg.visible.z-system) .cards-modal-bg.visible,
        body:has(.app-modal-bg.visible.z-system) .reassign-modal-bg.visible,
        body:has(.app-modal-bg.visible.z-system) .new-act-modal-bg.visible {
            background: transparent;
        }

        /* רובד z=5000 (cam-backdrop = "פעולות לכרטיס") → מכבה רקעים נמוכים יותר */
        body:has(.cam-backdrop.open) .app-modal-bg.visible:not(.z-over):not(.z-system),
        body:has(.cam-backdrop.open) .cards-modal-bg.visible,
        body:has(.cam-backdrop.open) .new-act-modal-bg.visible {
            background: transparent;
        }

        /* רובד z=2000 (z-over / reassign-modal-bg) → מכבה רקעים בסיסיים */
        body:has(.app-modal-bg.visible.z-over) .app-modal-bg.visible:not(.z-over):not(.z-system),
        body:has(.app-modal-bg.visible.z-over) .cards-modal-bg.visible,
        body:has(.app-modal-bg.visible.z-over) .new-act-modal-bg.visible,
        body:has(.reassign-modal-bg.visible) .cards-modal-bg.visible,
        body:has(.reassign-modal-bg.visible) .new-act-modal-bg.visible {
            background: transparent;
        }

        .app-modal-box {
            background: var(--surface);
            border-radius: 0.75rem;
            width: 520px;            /* ברירת מחדל = size-md */
            max-width: 96vw;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
            overflow: hidden;
        }
        .app-modal-box.size-sm  { width: 360px; }
        .app-modal-box.size-md  { width: 520px; }
        .app-modal-box.size-lg  { width: 720px; }
        .app-modal-box.size-xl  { width: 900px; }
        .app-modal-box.size-xxl { width: 1100px; }
        .app-modal-box.no-header { /* תאם padding למעלה כשאין header */ }

        .app-modal-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.9rem 1.2rem;
            color: #fff;
            flex-shrink: 0;
            background: var(--navy-800);     /* ברירת מחדל = solid-blue */
        }
        .app-modal-head.solid-blue      { background: var(--navy-800); color: #fff; }
        .app-modal-head.gradient-blue   { background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-accent) 100%); color: #fff; }
        .app-modal-head.gradient-green  { background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success) 100%); color: #fff; }
        .app-modal-head.gradient-red    { background: linear-gradient(135deg, var(--color-danger-dark) 0%, var(--color-danger) 100%); color: #fff; }
        .app-modal-head.gradient-purple { background: linear-gradient(135deg, var(--brand-accent) 0%, var(--ink-400) 100%); color: #fff; }
        .app-modal-head.gradient-yellow { background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning) 100%); color: #fff; }
        .app-modal-head.light           { background: var(--ink-50); color: var(--brand-primary-text); border-bottom: 1px solid var(--slate-200); }

        .app-modal-title {
            font-weight: 700;
            font-size: 1rem;
        }

        .app-modal-close {
            background: none;
            border: none;
            color: inherit;
            font-size: 1.3rem;
            cursor: pointer;
            line-height: 1;
            padding: 0 0.2rem;
        }
        .app-modal-close:hover { opacity: 0.7; }

        .app-modal-body {
            padding: 1rem 1.2rem;
            flex: 1;
            overflow: auto;
            direction: rtl;
        }
        .app-modal-body.no-pad { padding: 0; }   /* לטבלאות שמתנהלות בעצמן */

        /* פריסת "אישור פעולה" פשוטה — לוקוח מהמוקאפ (TAK-94), משמשת ע"י
           logoutConfirmModal (Dev-Task 3) ו-כל מודל-אישור עתידי מאותו דפוס. */
        .confirm-modal-body { text-align: center; padding: 1.75rem 1.5rem 1.25rem; }
        .confirm-modal-icon { font-size: 2.1rem; margin-bottom: 0.6rem; color: var(--brand-primary-text); }
        .confirm-modal-message {
            margin: 0 0 0.4rem;
            font-size: 1.05rem;
            font-weight: 600;
            color: var(--navy-900-text);
        }

        .app-modal-foot {
            padding: 0.75rem 1.2rem;
            border-top: 1px solid var(--slate-200);
            background: var(--ink-50);
            text-align: left;
            flex-shrink: 0;
            display: flex;
            gap: 0.5rem;
            justify-content: flex-start;
        }
        .app-modal-foot.center { justify-content: center; }

        /* ===== Delete Municipality Modal ===== */
        .del-muni-modal-bg {
            display: none;
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.6);
            z-index: 1100;
            align-items: center;
            justify-content: center;
        }
        .del-muni-modal-bg.visible { display: flex; }
        .del-muni-modal {
            background: var(--surface);
            border-radius: 0.6rem;
            width: 520px;
            max-width: 92vw;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 12px 40px rgba(0,0,0,0.3);
            overflow: hidden;
        }
        .del-muni-modal .header {
            padding: 0.9rem 1.2rem;
            background: linear-gradient(135deg, var(--color-danger-dark), var(--color-danger));
            color: #fff;
            font-weight: 700;
            font-size: 1.05rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        /* Phase B (#482): .close-btn override הוסר — מוחלף ב-.close-btn הגלובלי. */
        .del-muni-modal .body {
            padding: 1.2rem;
            overflow-y: auto;
            flex: 1;
        }
        .del-muni-modal .body p { margin: 0.4rem 0; color: var(--ink-800); line-height: 1.5; }
        .del-muni-modal .warnings {
            background: var(--color-danger-bg);
            border: 1px solid var(--color-danger-bg);
            border-radius: 0.4rem;
            padding: 0.7rem 0.9rem;
            margin: 0.8rem 0;
        }
        .del-muni-modal .warnings p { color: var(--color-danger-dark-text); margin: 0.2rem 0; }
        .del-muni-modal .stats-block {
            background: var(--ink-50);
            border: 1px solid var(--slate-200);
            border-radius: 0.4rem;
            padding: 0.7rem 0.9rem;
            margin: 0.8rem 0;
        }
        .del-muni-modal .stats-block .row {
            display: flex;
            justify-content: space-between;
            padding: 0.2rem 0;
            font-size: 0.92rem;
            color: var(--ink-700);
            border-bottom: 1px solid var(--slate-100);
        }
        .del-muni-modal .stats-block .row:last-child { border-bottom: none; }
        .del-muni-modal .stats-block .row strong { color: var(--ink-800); font-weight: 700; }
        .del-muni-modal .stats-empty {
            color: var(--slate-400);
            font-style: italic;
            padding: 0.5rem;
            text-align: center;
            font-size: 0.9rem;
        }
        .del-muni-modal .confirm-input {
            margin-top: 1rem;
        }
        .del-muni-modal .confirm-input label {
            display: block;
            font-weight: 600;
            font-size: 0.9rem;
            color: var(--ink-700);
            margin-bottom: 0.35rem;
        }
        .del-muni-modal .confirm-input input {
            width: 100%;
            padding: 0.5rem 0.7rem;
            border: 1px solid var(--slate-300);
            border-radius: 0.3rem;
            font-size: 1rem;
        }
        .del-muni-modal .confirm-input input:focus {
            border-color: var(--color-danger);
            outline: none;
            box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
        }
        .del-muni-modal .error {
            display: none;
            margin-top: 0.6rem;
            padding: 0.5rem 0.7rem;
            background: var(--color-danger-bg);
            color: var(--color-danger-dark-text);
            border-radius: 0.3rem;
            font-size: 0.88rem;
        }
        .del-muni-modal .error.visible { display: block; }
        .del-muni-modal .footer {
            padding: 0.8rem 1.2rem;
            display: flex;
            justify-content: flex-start;
            gap: 0.5rem;
            background: var(--ink-50);
            border-top: 1px solid var(--slate-200);
        }
        /* Phase B (#482): כל overrides של כפתורי footer הוסרו — מוחלפים ב-.btn-cancel/.btn-danger הגלובליים. */

        /* ===== Create-Municipality Modal ===== */
        .create-muni-modal-bg {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }
        .create-muni-modal-bg.visible { display: flex; }
        .create-muni-modal {
            background: var(--surface);
            border-radius: 0.6rem;
            width: 420px;
            max-width: 92vw;
            /* TAK-1063 fix cycle 1: the plan/period fields (S1) made this dialog
               taller than short viewports (Playwright: footer "outside of the
               viewport" at 1366x600). Reuse .del-muni-modal's max-height/flex
               pattern (same file, above) so the body scrolls and the footer
               stays reachable instead of inventing a new one. */
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 10px 30px rgba(0,0,0,0.25);
            overflow: hidden;
        }
        .create-muni-modal-header {
            padding: 0.9rem 1.2rem;
            background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
            color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 600;
        }
        /* Phase B (#482): .close-btn override הוסר — מוחלף ב-.close-btn הגלובלי. */
        .create-muni-modal-body { padding: 1.2rem; overflow-y: auto; flex: 1; }
        .create-muni-modal-body label {
            display: block;
            font-weight: 600;
            font-size: 0.92rem;
            margin-bottom: 0.4rem;
            color: var(--ink-700);
        }
        .create-muni-modal-body input[type="text"] {
            width: 100%;
            padding: 0.5rem 0.7rem;
            border: 1px solid var(--slate-300);
            border-radius: 0.3rem;
            font-size: 1rem;
        }
        .create-muni-modal-body .hint {
            margin-top: 0.5rem;
            font-size: 0.83rem;
            color: var(--slate-500);
        }
        .create-muni-modal-body .error {
            display: none;
            margin-top: 0.6rem;
            padding: 0.5rem 0.7rem;
            background: var(--color-danger-bg);
            color: var(--color-danger-dark-text);
            border-radius: 0.3rem;
            font-size: 0.88rem;
        }
        .create-muni-modal-body .error.visible { display: block; }
        .create-muni-modal-footer {
            padding: 0.8rem 1.2rem;
            display: flex;
            justify-content: flex-start;
            gap: 0.5rem;
            background: var(--ink-50);
            border-top: 1px solid var(--slate-200);
            flex-shrink: 0;
        }
        /* Phase B (#482): כל overrides של כפתורי footer הוסרו — מוחלפים ב-.btn-cancel/.btn-primary הגלובליים. */
        .header {
            background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-accent) 100%);
            color: white;
            padding: 1.5rem 0 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            position: relative;  /* כדי לעגן את הלוגו */
        }
        .header-logo-link {
            position: absolute;
            left: 1.5rem;
            top: 0.5rem;
            z-index: 5;
            text-decoration: none;
            display: block;
            transition: transform 0.15s;
        }
        .header-logo-link:hover { transform: scale(1.05); }
        .header-logo {
            height: 130px;
            width: 140px;   /* רוחב מדויק כמו לוגו איתנים (1.066 × 130 ≈ 139px) */
            max-width: 140px;
            background: var(--surface);
            border-radius: 0.45rem;
            padding: 0.4rem;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
            object-fit: fill;   /* הסמל יתמתח אופקית למלא את הרוחב (פרופורציות משתנות) */
            display: block;
        }
        @media (max-width: 768px) {
            .header-logo { height: 50px; }
            .header-logo-link { top: 0.8rem; left: 0.8rem; }
        }
        /* === לוגו יוצר המערכת (איתנים) — הוסר מהכותרת ב-TAK-94 (AC-02, החלטה עסקית),
           כדי לפנות מקום לתפריט זהות-המשתמש (.user-menu-wrap למטה) שיושב עכשיו
           באותה משבצת בדיוק (left: 11.5rem). כללי ה-CSS נשארים כאן מוערים-החוצה
           (לא נמחקים) — ראה annotations.md §1 / technical.md Decision 4. */
        /*
        .author-logo-wrap {
            position: absolute;
            left: 11.5rem;
            top: 0.5rem;
            z-index: 5;
            display: block;
        }
        .author-logo {
            height: 130px;
            width: auto;
            max-width: 220px;
            background: white;
            border-radius: 0.45rem;
            padding: 0.4rem;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
            object-fit: contain;
            display: block;
        }
        @media (max-width: 768px) {
            .author-logo { height: 50px; }
            .author-logo-wrap { top: 0.8rem; left: 7rem; }
        }
        */
        /* === תפריט זהות-משתמש + התנתקות (TAK-94) — יושב באותה משבצת שבה ישב
           לוגו "איתנים" שהוסר לעיל (AC-01/AC-02), לצד לוגו הרשות. ===
           מבנה מבוסס על .menu-item/.menu-toggle/.menu-dropdown הקיימים למעלה
           (אותו דפוס אינטראקציה — click/click-outside/Escape, AC-12). */
        .user-menu-wrap {
            position: absolute;
            left: 11.5rem;
            top: 0.6rem;
            z-index: 6;
        }
        .user-menu-toggle {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background: var(--ink-100);
            border: 1px solid var(--border);
            color: #fff;
            font-family: inherit;
            font-size: 0.92rem;
            font-weight: 500;
            padding: 0.4rem 0.7rem 0.4rem 0.55rem;
            border-radius: var(--radius-pill);
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s;
            white-space: nowrap;
            max-width: 260px;
        }
        .user-menu-toggle:hover { background: var(--ink-100); }
        .user-menu-toggle:focus-visible {
            outline: 2px solid #fff;
            outline-offset: 2px;
        }
        .user-menu-wrap.open .user-menu-toggle { background: var(--surface); }
        .user-menu-avatar {
            flex-shrink: 0;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: var(--surface);
            color: var(--brand-primary-text);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            font-weight: 700;
        }
        .user-menu-name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .user-menu-caret { font-size: 0.65rem; opacity: 0.85; }
        .user-menu-dropdown {
            display: none;
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            min-width: 250px;
            background: var(--surface);
            border-radius: 10px;
            box-shadow: 0 10px 28px rgba(0,0,0,0.20);
            padding: 0.4rem;
            z-index: 1000;
        }
        .user-menu-wrap.open .user-menu-dropdown { display: block; }
        /* פריט "שפה" — שורת תווית + שני פילים (עברית / العربية), אותו מנגנון
           session-scoped כמו מתג ה-sidebar הקיים (system_admin), חשוף כאן לכל
           המשתמשים (AC-04/AC-11 — הסיידבר נשאר כפי שהוא). */
        .user-menu-lang-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            padding: 0.55rem 0.9rem;
            border-radius: 6px;
        }
        .user-menu-lang-label {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            color: var(--ink-700);
            font-size: 0.95rem;
        }
        .user-menu-lang-pills {
            display: flex;
            gap: 0.3rem;
        }
        .user-menu-lang-pill {
            border: 1px solid var(--border-strong);
            background: var(--surface);
            color: var(--ink-600);
            font-family: inherit;
            font-size: 0.8rem;
            padding: 0.2rem 0.55rem;
            border-radius: var(--radius-pill);
            cursor: pointer;
            transition: all 0.12s;
        }
        .user-menu-lang-pill:hover { border-color: var(--brand-primary); color: var(--brand-primary-text); }
        .user-menu-lang-pill.is-active {
            background: var(--brand-primary);
            border-color: var(--brand-primary);
            color: white;
            font-weight: 600;
            cursor: default;
        }
        .user-menu-sep {
            height: 1px;
            background: var(--slate-200);
            margin: 0.3rem 0.4rem;
        }
        .user-menu-logout-btn { color: var(--ink-700); }
        .user-menu-logout-btn:hover { background: var(--ink-200); color: var(--ink-900); }

        /* ===== Switch-municipality modal (TAK-118) — search + scrollable list.
           Own namespace (muni-switch-*), modeled after .col-picker-search's
           layout but not sharing its classes — that component has its own,
           unrelated JS lifecycle. ===== */
        .muni-switch-body { display: flex; flex-direction: column; gap: 0.6rem; }
        .muni-switch-search input {
            width: 100%;
            padding: 0.5rem 0.7rem;
            border: 1px solid var(--ink-300);
            border-radius: 6px;
            font-family: inherit;
            font-size: 0.95rem;
        }
        .muni-switch-search input:focus {
            outline: none;
            border-color: var(--brand-accent);
            box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
        }
        .muni-switch-list {
            list-style: none;
            margin: 0;
            padding: 0;
            max-height: 40vh;
            overflow-y: auto;
            border: 1px solid var(--slate-200);
            border-radius: 6px;
        }
        .muni-switch-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            padding: 0.55rem 0.85rem;
            font-size: 0.95rem;
            color: var(--ink-800);
            cursor: pointer;
            border-bottom: 1px solid var(--slate-100);
            transition: background 0.1s;
        }
        .muni-switch-item:last-child { border-bottom: none; }
        .muni-switch-item:hover { background: var(--ink-50); }
        .muni-switch-item:focus-visible {
            background: var(--ink-50);
            outline: 2px solid var(--brand-primary);
            outline-offset: -2px;
        }
        .muni-switch-item.selected {
            background: var(--brand-primary-soft);
            color: var(--brand-primary-text);
            font-weight: 600;
        }
        .muni-switch-item-check {
            visibility: hidden;
            color: var(--brand-primary-text);
        }
        .muni-switch-item.selected .muni-switch-item-check { visibility: visible; }
        @media (max-width: 768px) {
            .user-menu-wrap { top: 0.8rem; left: 7rem; }
            .user-menu-toggle { max-width: 160px; }
        }
        /* כותרת ה-app — רוחב-מלא עקבי בכל המסכים: לא תלוי ב-.container override של הדף
           (חלק מהדפים מגדירים .container{max-width:100%} וחלק לא → שבירת-שורה לא-עקבית). */
        .header .container { max-width: 100%; }
        .header h1 {
            font-weight: 500;
            margin: 0;
            padding-right: 3.2rem;
            padding-left: 1.5rem;
            line-height: 1.2;
            white-space: nowrap;     /* שורה אחת תמיד — לעולם לא נשבר */
            font-size: 1.85rem;      /* מוקטן מ-2.5rem כדי שהכותרת המלאה תתאים לשורה אחת ותתרחק מהלוגואים */
        }
        /* האקרונים "תעמ"ת" — פונט גדול יותר משאר השורה */
        .header h1 .app-title-acronym { font-size: 1.3em; font-weight: 700; letter-spacing: 0.01em; }
        @media (max-width: 768px) {
            .header h1 { font-size: 1.2rem; white-space: normal; padding-left: 8rem; }
        }
        /* ==== page-locator: breadcrumb + H1 (TAK-41) ====
           Replaces the removed .header .subtitle line. Values copied verbatim
           from tokens.css — no new colors/typography. Structure/classes reused
           verbatim from the approved mockups
           (work/TAK-41-page-location-indicator/resources/ui/mockups/). */
        .page-locator {
            padding: 1.15rem 0 0.35rem;
            border-bottom: 1px solid var(--border);
            margin-bottom: 1.25rem;
        }
        /* breadcrumb row. RTL: first crumb is rightmost. */
        .breadcrumb {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.35rem;
            list-style: none;
            margin: 0;
            padding: 0;
            font-size: var(--text-base);
        }
        /* a crumb is a LINK only when it navigates to a real, different ancestor page */
        .breadcrumb a.crumb {
            color: var(--brand-primary-text);
            text-decoration: none;
            padding: 0.1rem 0.15rem;
            border-radius: var(--radius-sm);
            transition: color 0.12s, background 0.12s;
        }
        .breadcrumb a.crumb:hover { color: var(--brand-primary-hover-text); text-decoration: underline; }
        .breadcrumb a.crumb:focus-visible {
            outline: 2px solid var(--brand-primary);
            outline-offset: 2px;
        }
        /* a menu-group label (a dropdown category, NOT a page) — plain text, never a link */
        .breadcrumb .crumb-plain { color: var(--ink-500); padding: 0.1rem 0.15rem; }
        /* the current page — last crumb — plain text */
        .breadcrumb .crumb-current {
            color: var(--ink-700);
            font-weight: var(--fw-semibold);
            padding: 0.1rem 0.15rem;
        }
        /* RTL chevron — points to the reading direction (leftwards in RTL) */
        .breadcrumb .crumb-sep { color: var(--ink-400); font-size: 0.8rem; user-select: none; line-height: 1; }
        /* large page title */
        .page-title {
            font-family: var(--font-display);
            font-size: var(--text-2xl);
            font-weight: var(--fw-bold);
            color: var(--ink-900);
            margin: 0.4rem 0 0;
            line-height: 1.2;
        }
        /* ==== סרגל תפריטים ראשי (Dropdowns) — מחליף את 2 שורות הטאבים ==== */
        .nav-menubar {
            display: flex;
            list-style: none;
            margin: 1rem 0 0;
            padding: 0;
            gap: 0.25rem;
            flex-wrap: wrap;
        }
        .menu-item { position: relative; }
        .menu-toggle {
            background: transparent;
            border: none;
            color: rgba(255,255,255,0.85);
            font-family: inherit;
            font-size: 1rem;
            font-weight: 500;
            padding: 0.6rem 1.25rem;
            border-radius: 6px 6px 0 0;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
        }
        .menu-toggle:hover { color: white; background: var(--ink-100); }
        .menu-toggle .caret { font-size: 0.7rem; opacity: 0.8; margin-right: 0.25rem; }
        /* הראשי הפעיל (הסקshun שבו נמצאים) */
        .menu-toggle.active { color: var(--brand-primary-text); background: var(--ink-50); font-weight: 600; }
        /* כשהתפריט פתוח */
        .menu-item.open .menu-toggle { color: white; background: var(--ink-200); }
        .menu-item.open .menu-toggle.active { color: var(--brand-primary-text); background: var(--ink-50); }

        .menu-dropdown {
            display: none;
            position: absolute;
            top: 100%;
            right: 0;          /* RTL — מיושר לימין הכפתור */
            min-width: 240px;
            background: var(--surface);
            border-radius: 0 0 10px 10px;
            box-shadow: 0 10px 28px rgba(0,0,0,0.20);
            padding: 0.4rem;
            z-index: 1000;
        }
        .menu-item.open .menu-dropdown { display: block; }
        .menu-dropdown-link {
            display: block;
            color: var(--ink-700);
            text-decoration: none;
            padding: 0.6rem 0.9rem;
            border-radius: 6px;
            font-size: 0.95rem;
            white-space: nowrap;
            transition: background 0.12s, color 0.12s;
        }
        /* The header user-menu's items are <button>s carrying .menu-dropdown-link,
           which sets display:block but no width or button-chrome reset — so the
           browser's default border/background showed through and each item sized
           to its own text, rendering the menu as a staircase of mismatched boxes
           (TAK-245, annotations.md §7). Scoped to .user-menu-dropdown on purpose:
           the main nav menubar's dropdowns use the same class but contain <a>
           elements, which have none of this problem, and text-align:start there
           would be a visible change (AC-37). No new colour, spacing or type value
           — font-size repeats what .menu-dropdown-link already declares, because
           a <button> does not inherit it. */
        .user-menu-dropdown .menu-dropdown-link {
            width: 100%;
            background: none;
            border: none;
            text-align: start;
            font-family: inherit;
            font-size: 0.95rem;
            cursor: pointer;
        }
        .menu-dropdown-link:hover { background: var(--slate-100); color: var(--brand-primary-text); }
        .menu-dropdown-link.active {
            background: var(--brand-primary-soft);
            color: var(--brand-primary-text);
            font-weight: 600;
        }
        @media (max-width: 768px) {
            .menu-dropdown { right: auto; left: 0; }
        }

        /* ==== Column Picker — בחירת עמודות עם שמירה ==== */
        .col-picker {
            position: relative;
            display: block;
            margin-bottom: 0.5rem;
        }
        .col-picker-trigger {
            background: var(--surface);
            border: 1px solid var(--ink-300);
            padding: 0.5rem 0.85rem;
            border-radius: 6px;
            cursor: pointer;
            font-family: inherit;
            font-size: 0.92rem;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: border-color 0.15s, background 0.15s;
        }
        .col-picker-trigger:hover { border-color: var(--brand-primary-soft); background: var(--brand-primary-soft); }
        .col-picker-trigger .count {
            font-weight: 700;
            color: var(--brand-primary-text);
            background: var(--brand-primary-soft);
            padding: 0.05rem 0.45rem;
            border-radius: 12px;
            font-size: 0.85rem;
        }
        .col-picker-trigger .arrow { color: var(--ink-400); }
        .col-picker-dropdown {
            position: absolute;
            top: calc(100% + 6px);
            right: 0;
            background: var(--surface);
            border: 1px solid var(--ink-300);
            border-radius: 8px;
            box-shadow: 0 6px 24px rgba(0,0,0,0.12);
            min-width: 360px;
            max-width: 480px;
            z-index: 100;
            display: none;
            max-height: 60vh;
            overflow: hidden;
            flex-direction: column;
        }
        .col-picker.open .col-picker-dropdown { display: flex; }
        .col-picker-search {
            padding: 0.6rem 0.75rem;
            border-bottom: 1px solid var(--gray-200);
        }
        .col-picker-search input {
            width: 100%;
            padding: 0.4rem 0.7rem;
            border: 1px solid var(--ink-300);
            border-radius: 4px;
            font-family: inherit;
            font-size: 0.9rem;
        }
        .col-picker-search input:focus {
            outline: none;
            border-color: var(--brand-accent);
            box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
        }
        .col-picker-list {
            overflow-y: auto;
            flex: 1;
            padding: 0.25rem 0;
        }
        .col-picker-item {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.4rem 0.85rem;
            cursor: pointer;
            user-select: none;
            font-size: 0.9rem;
            transition: background 0.1s;
        }
        .col-picker-item:hover { background: var(--ink-50); }
        .col-picker-item.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .col-picker-item input[type=checkbox] {
            width: 16px; height: 16px;
            accent-color: var(--brand-primary);
        }
        .col-picker-item .name { flex: 1; }
        .col-picker-item .type {
            font-size: 0.72rem;
            color: var(--gray-500);
            background: var(--ink-100);
            padding: 0.1rem 0.4rem;
            border-radius: 3px;
        }
        /* Handoff v2: badges של סוג עמודה בתפריט בחירה — Teal/Ink בלבד, אין צהוב/אדום */
        .col-picker-item .type.budget             { background: var(--brand-primary-soft); color: var(--navy-800-text); }
        .col-picker-item .type.actual             { background: var(--brand-accent); color: #fff; }
        .col-picker-item .type.positions_standard { background: var(--ink-200); color: var(--ink-700); }
        .col-picker-item .type.positions_actual   { background: var(--ink-300); color: var(--ink-800); }
        .col-picker-empty {
            text-align: center;
            color: var(--ink-400);
            font-style: italic;
            padding: 1rem;
            font-size: 0.85rem;
        }
        .col-picker-actions {
            padding: 0.5rem 0.85rem;
            border-top: 1px solid var(--gray-200);
            display: flex;
            gap: 0.5rem;
            justify-content: space-between;
            background: var(--ink-50);
        }
        .col-picker-actions button {
            background: var(--surface);
            border: 1px solid var(--ink-300);
            padding: 0.3rem 0.8rem;
            border-radius: 4px;
            font-size: 0.85rem;
            cursor: pointer;
        }
        .col-picker-actions button:hover { background: var(--ink-100); }
        .col-picker-actions .picker-close {
            background: var(--brand-primary);
            color: white;
            border-color: var(--brand-primary);
        }
        .col-picker-actions .picker-close:hover { background: var(--navy-800); }
        /* רשימת מסודרת */
        .col-picker-order {
            display: flex;
            gap: 0.4rem;
            flex-wrap: wrap;
            padding: 0.5rem 0.75rem;
            background: var(--ink-50);
            border-radius: 6px;
            margin-top: 0.5rem;
            min-height: 40px;
            align-items: center;
        }
        .col-picker-order .empty-text {
            color: var(--ink-400); font-style: italic; font-size: 0.85rem;
        }
        .col-picker-order-item {
            background: var(--surface);
            border: 1px solid var(--ink-300);
            padding: 0.2rem 0.5rem;
            border-radius: 4px;
            font-size: 0.85rem;
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
        }
        .col-picker-order-item .pos {
            font-weight: 700;
            color: var(--gray-500);
            font-family: var(--font-mono);
        }
        .col-picker-order-item button {
            background: transparent;
            border: none;
            padding: 0 0.15rem;
            cursor: pointer;
            color: var(--gray-500);
            font-size: 0.85rem;
            line-height: 1;
        }
        .col-picker-order-item button:hover { color: var(--brand-primary-text); }
        .col-picker-order-item .remove:hover { color: var(--color-danger-text); }

        /* ==== Reassign modal — שיוך כרטיס לפעילות (משותף) ==== */
        .btn-reassign {
            background: var(--ink-100);
            border: 1px solid var(--gray-200);
            padding: 0.1rem 0.4rem;
            border-radius: 3px;
            cursor: pointer;
            font-size: 0.75rem;
            margin-right: 0.3rem;
            color: var(--gray-500);
        }
        .btn-reassign:hover { background: var(--brand-primary-soft); border-color: var(--brand-primary-soft); color: var(--brand-primary-text); }

        .reassign-modal-bg {
            position: fixed;
            top:0; left:0; right:0; bottom:0;
            background: rgba(0,0,0,0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 2000;
        }
        .reassign-modal-bg.visible { display: flex; }
        .reassign-modal {
            background: var(--surface);
            border-radius: 10px;
            width: 600px;
            max-width: 90%;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }
        .reassign-modal-header {
            background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-accent) 100%);
            color: white;
            padding: 1rem 1.5rem;
            font-size: 1.05rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        /* Phase B (#482): .close-btn override הוסר — מוחלף ב-.close-btn הגלובלי. */
        .reassign-modal-body { padding: 1.5rem; }
        .reassign-modal-body .info {
            background: var(--brand-primary-soft);
            padding: 0.75rem 1rem;
            border-radius: 6px;
            margin-bottom: 1rem;
            font-size: 0.9rem;
        }
        .reassign-modal-body .info strong { color: var(--brand-primary-text); }
        .reassign-section {
            margin-bottom: 1rem;
            padding-bottom: 1rem;
            border-bottom: 1px dashed var(--gray-200);
        }
        .reassign-section:last-child { border-bottom: none; padding-bottom: 0; }
        .reassign-section h4 {
            margin: 0 0 0.6rem;
            font-size: 0.95rem;
            color: var(--brand-primary-text);
        }
        .reassign-modal-body input, .reassign-modal-body select {
            width: 100%;
            padding: 0.5rem 0.75rem;
            border: 1px solid var(--ink-300);
            border-radius: 4px;
            font-family: inherit;
            font-size: 0.95rem;
            margin-bottom: 0.6rem;
        }
        .reassign-modal-body label {
            display: block;
            font-size: 0.85rem;
            color: var(--gray-500);
            margin-bottom: 0.3rem;
        }
        .reassign-modal-error {
            background: var(--color-danger-bg);
            color: var(--color-danger-dark-text);
            padding: 0.5rem 0.75rem;
            border-radius: 4px;
            font-size: 0.9rem;
            margin-bottom: 0.75rem;
            display: none;
        }
        .reassign-modal-error.visible { display: block; }
        .reassign-modal-footer {
            padding: 0.75rem 1.5rem;
            background: var(--ink-50);
            display: flex;
            gap: 0.5rem;
            justify-content: flex-end;
            border-top: 1px solid var(--gray-200);
        }
        /* Phase B (#482): כל overrides של כפתורי footer הוסרו — מוחלפים ב-.btn-cancel/.btn-primary הגלובליים. */

        /* ==== Notes button — סמל הערה בכל תא ==== */
        .btn-note {
            display: inline-block;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 0.85rem;
            padding: 0 0.15rem;
            margin-right: 0.25rem;
            opacity: 0.25;
            transition: opacity 0.15s, transform 0.1s;
            line-height: 1;
            vertical-align: middle;
            filter: grayscale(1);
        }
        .btn-note:hover {
            opacity: 1;
            transform: scale(1.2);
        }
        td.num:hover .btn-note {
            opacity: 0.7;
        }
        .btn-note.has-note {
            opacity: 1;
            filter: none;
        }
        .btn-note.has-note:hover {
            transform: scale(1.25);
        }

        /* TAK-1385: סמל הערה לקריאה בלבד בתא חסום — נראה כמו .btn-note.has-note, בלי לחיצה */
        .note-view {
            display: inline-block;
            font-size: 0.85rem;
            padding: 0;
            margin: 0 6px 0 1px;
            line-height: 1;
            vertical-align: middle;
            cursor: default;
        }

        /* TAK-1443: סמן ההערה שליד ה-⋮ בתא ניתן לעריכה — בלי שוליים, כדי שהמספר לא יזוז בעמודה צרה */
        td.num.editable-cell > .cell-actions-wrap > .note-view {
            margin: 0;
        }

        /* ==== Activity-level note button — סמל הערה ברמת פעילות×עמודה ==== */
        /* מוצמד לכותרות עמודות בתוך בלוק פעילות */
        .btn-note-activity {
            display: inline-block;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 0.92rem;
            padding: 0 0.2rem;
            margin-right: 0.3rem;
            opacity: 0.45;
            transition: opacity 0.15s, transform 0.1s, filter 0.15s;
            line-height: 1;
            vertical-align: middle;
            filter: grayscale(0.7);
        }
        .btn-note-activity:hover {
            opacity: 1;
            transform: scale(1.2);
            filter: grayscale(0);
        }
        th:hover .btn-note-activity {
            opacity: 0.75;
            filter: grayscale(0.2);
        }
        .btn-note-activity.has-note {
            opacity: 1;
            filter: drop-shadow(0 0 4px rgba(245,158,11,0.7))
                    drop-shadow(0 0 2px rgba(245,158,11,0.5));
        }
        .btn-note-activity.has-note:hover {
            transform: scale(1.3);
        }

        /* ==== יישור תוכן תא ניתן לעריכה: מספר בימין, כפתורים בקצה השמאלי ==== */
        /* חשוב: לא מגדירים display:flex על <td> — זה שובר את ה-table layout בעמודות סמוכות.
           במקום זאת, ה-td נשאר table-cell, והכפתורים נסדרים יחסית עם float/inline-flex. */
        td.num.editable-cell {
            white-space: nowrap;
            position: relative;
        }
        td.num.editable-cell > .cell-text {
            display: inline-block;
            text-align: right;
            white-space: nowrap;
            vertical-align: middle;
        }
        td.num.editable-cell > .btn-pricing,
        td.num.editable-cell > .btn-distribution,
        td.num.editable-cell > .btn-note,
        td.num.editable-cell > .cell-actions-wrap,
        td.num.editable-cell > .save-indicator {
            vertical-align: middle;
        }
        /* === מניעת הבזק === הסתר את הכפתורים שהם ילדים ישירים של td.num
           (לפני ש-setupCellActionMenus מעביר אותם לתוך הפופאפ של ⋮).
           חל על כל סוגי עמודות (תקציב, ביצוע, תקן משרות, ביצוע משרות, וכל סוג עתידי),
           גם אם התא אינו editable. אחרי ההעברה הכפתורים בתוך .cell-actions-popup
           ולכן הסלקטור הזה לא חל עליהם.
           ב-2 הדפים שמציגים אותם ישירות (activity_dashboard, column_data_entry)
           יש block extra_head שמחזיר אותם להצגה. */
        td.num > .btn-pricing,
        td.num > .btn-distribution,
        td.num > .btn-note,
        td.num > .btn-mark-handled {
            display: none;
        }
        td.num.editable-cell > .btn-pricing,
        td.num.editable-cell > .btn-note {
            margin-right: 0;  /* בלי מרווח ימני — כבר רחוקים מהמספר */
        }

        /* Handoff v2: ==== תא נעול ע"י תכנית עבודה ==== Teal stripes במקום צהוב */
        td.num.editable-cell.wp-locked-cell {
            cursor: pointer;
            position: relative;
            background: repeating-linear-gradient(
                135deg,
                transparent,
                transparent 4px,
                rgba(12,107,138,0.08) 4px,
                rgba(12,107,138,0.08) 8px
            );
        }
        td.num.editable-cell.wp-locked-cell:hover {
            background: rgba(12,107,138,0.18);
        }
        td.num.editable-cell.wp-locked-cell::before {
            content: '🔒';
            position: absolute;
            left: 3px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 0.62rem;
            opacity: 0.75;
            color: var(--brand-primary-text);
            font-variant-emoji: text;
            pointer-events: none;
        }
        /* בתאים נעולים ע"י תוכניות עבודה — הצג ⋮ תמיד (לא רק hover), הסתר תמחור */
        td.num.editable-cell.wp-locked-cell .btn-cell-menu {
            opacity: 1 !important;
        }
        td.num.editable-cell.wp-locked-cell .btn-pricing {
            display: none !important;
        }
        td.num.editable-cell.wp-locked-cell::after,
        td.num.editable-cell.wp-locked-cell:hover::after {
            opacity: 0 !important;
        }

        /* Handoff v2: ==== תא נעול ע"י תקצוב שכר ומשרות ==== Teal stripes */
        td.num.editable-cell.salary-locked-cell {
            cursor: pointer;
            position: relative;
            background: repeating-linear-gradient(
                135deg,
                transparent,
                transparent 4px,
                rgba(12,107,138,0.08) 4px,
                rgba(12,107,138,0.08) 8px
            ) !important;
        }
        td.num.editable-cell.salary-locked-cell:hover {
            background: rgba(12,107,138,0.18) !important;
        }
        td.num.editable-cell.salary-locked-cell::before {
            content: '🔒';
            position: absolute;
            left: 3px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 0.62rem;
            opacity: 0.75;
            color: var(--brand-primary-text);
            font-variant-emoji: text;
            pointer-events: none;
        }
        /* בתאים נעולים ע"י תקצוב שכר — הצג ⋮ תמיד (לא רק hover), הסתר תמחור */
        td.num.editable-cell.salary-locked-cell .btn-cell-menu {
            opacity: 1 !important;
        }
        td.num.editable-cell.salary-locked-cell .btn-pricing {
            display: none !important;
        }
        td.num.editable-cell.salary-locked-cell::after,
        td.num.editable-cell.salary-locked-cell:hover::after {
            opacity: 0 !important;
        }

        /* ==== כפתור 🧾 תמחור בכל תא ניתן לעריכה ==== */
        .btn-pricing {
            display: inline-block;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 0.85rem;
            padding: 0 0.15rem;
            margin-right: 0.25rem;
            opacity: 0.25;
            transition: opacity 0.15s, transform 0.1s;
            line-height: 1;
            vertical-align: middle;
            filter: grayscale(1);
        }
        .btn-pricing:hover {
            opacity: 1;
            transform: scale(1.2);
        }
        td.num:hover .btn-pricing {
            opacity: 0.7;
        }
        .btn-pricing.has-pricing {
            opacity: 1;
            filter: none;
        }
        .btn-pricing.has-pricing:hover { transform: scale(1.25); }

        /* ==== Pricing modal — חלון תמחור (גדול) ==== */
        .pricing-modal-bg {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 2200;
        }
        .pricing-modal-bg.visible { display: flex; }
        .pricing-modal {
            background: var(--surface);
            border-radius: 10px;
            width: 1000px;
            max-width: 95%;
            max-height: 90vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }
        .pricing-modal-header {
            background: var(--brand-primary);
            color: white;
            padding: 0.85rem 1.5rem;
            font-size: 1.05rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-shrink: 0;
        }
        /* Phase B (#482): .close-btn override הוסר — מוחלף ב-.close-btn הגלובלי. */
        .pricing-modal-body {
            padding: 1.25rem 1.5rem;
            overflow-y: auto;
            flex: 1;
        }
        .pricing-info {
            background: var(--brand-primary-soft);
            border: 1px solid var(--brand-primary-soft);
            padding: 0.7rem 1rem;
            border-radius: 6px;
            margin-bottom: 1rem;
            font-size: 0.9rem;
            line-height: 1.7;
        }
        .pricing-info strong { color: var(--brand-primary-text); }

        /* טבלת שורות התמחור */
        .pricing-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.88rem;
            margin-bottom: 0.85rem;
        }
        .pricing-table th {
            background: var(--brand-primary-soft);
            color: var(--brand-primary-text);
            padding: 0.5rem 0.6rem;
            text-align: right;
            font-weight: 600;
            font-size: 0.82rem;
            border-bottom: 2px solid var(--brand-primary-soft);
        }
        .pricing-table td {
            padding: 0.3rem;
            border-bottom: 1px solid var(--gray-200);
            vertical-align: middle;
        }
        .pricing-table input,
        .pricing-table .unit-picker {
            width: 100%;
            padding: 0.4rem 0.6rem;
            border: 1px solid var(--ink-300);
            border-radius: 4px;
            font-family: inherit;
            font-size: 0.88rem;
            background: var(--surface);
        }
        .pricing-table input:focus {
            outline: none;
            border-color: var(--brand-primary);
            box-shadow: 0 0 0 2px rgba(12,107,138,0.15);
        }
        .pricing-table input.num {
            text-align: right;
            font-family: var(--font-mono);
        }
        .pricing-table td.row-total {
            font-family: var(--font-mono);
            font-weight: 600;
            color: var(--brand-primary-text);
            text-align: right;
            font-size: 0.92rem;
            background: var(--brand-primary-soft);
        }
        .pricing-table tr.direct-row td {
            background: var(--ink-100);
        }
        .pricing-table tr.direct-row td.row-total {
            background: var(--ink-100);
            color: var(--ink-700);
        }
        .pricing-table .col-direct-desc {
            min-width: 200px;
        }
        .pricing-table .btn-del-row {
            background: var(--ink-100);
            color: var(--ink-700);
            border: 1px solid var(--ink-200);
            width: 30px; height: 30px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.85rem;
        }
        .pricing-table .btn-del-row:hover { background: var(--ink-200); }
        /* NUM-CAPS 2026-06-23: כותרות יחידה/סוג יחידה/יחידות/עלות יחידה/מכפיל
           שייכות לשורת תחשיב בלבד. אם אין שורת תחשיב — נחביא רק את הטקסט
           (התא נשאר כדי לשמור יישור עם colspan של שורות סכום ישיר). */
        .pricing-table.no-formula-rows .formula-only-th {
            visibility: hidden;
        }
        .pricing-empty-row {
            text-align: center;
            color: var(--ink-400);
            font-style: italic;
            padding: 1.5rem;
        }

        /* כפתורי הוספת שורה */
        .pricing-add-row-buttons {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        .btn-add-row {
            background: var(--surface);
            border: 1px dashed var(--brand-primary);
            color: var(--brand-primary-text);
            padding: 0.5rem 1rem;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.88rem;
            font-family: inherit;
            font-weight: 500;
        }
        .btn-add-row:hover { background: var(--brand-primary-soft); border-style: solid; }
        .btn-add-row.direct { color: var(--navy-800-text); border-color: var(--navy-800); }
        .btn-add-row.direct:hover { background: var(--ink-100); }

        /* שורת הסיכום הגדול */
        .pricing-grand-total {
            background: var(--brand-primary);
            color: white;
            padding: 0.9rem 1.25rem;
            border-radius: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 1.05rem;
            font-weight: 600;
            margin-top: 0.5rem;
        }
        .pricing-grand-total .value {
            font-family: var(--font-mono);
            font-size: 1.4rem;
            font-weight: 700;
        }

        /* רכיב unit-picker (combobox עם autocomplete) */
        .unit-picker {
            position: relative;
            cursor: text;
            display: flex;
            align-items: center;
            padding: 0;
        }
        .unit-picker input.unit-name-input {
            border: none;
            box-shadow: none;
            width: 100%;
            padding: 0.4rem 0.6rem;
            background: transparent;
            font-family: inherit;
            font-size: 0.88rem;
        }
        .unit-picker input.unit-name-input:focus { outline: none; }
        .unit-picker-suggestions {
            position: absolute;
            top: 100%;
            right: 0;
            left: 0;
            background: var(--surface);
            border: 1px solid var(--ink-300);
            border-radius: 4px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            max-height: 240px;
            overflow-y: auto;
            z-index: 100;
            display: none;
        }
        .unit-picker.open .unit-picker-suggestions { display: block; }
        .unit-picker-suggestion {
            padding: 0.45rem 0.7rem;
            cursor: pointer;
            font-size: 0.88rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--ink-100);
        }
        .unit-picker-suggestion:hover, .unit-picker-suggestion.focused { background: var(--brand-primary-soft); }
        .unit-picker-suggestion .type-text {
            font-size: 0.78rem;
            color: var(--gray-500);
            margin-right: 0.5rem;
        }
        .unit-picker-suggestion .usage-badge {
            background: var(--brand-primary-soft);
            color: var(--brand-primary-text);
            padding: 0.05rem 0.4rem;
            border-radius: 8px;
            font-size: 0.7rem;
            font-weight: 600;
        }
        .unit-picker-create {
            padding: 0.45rem 0.7rem;
            background: var(--ink-50);
            color: var(--brand-primary-text);
            font-size: 0.85rem;
            font-style: italic;
            cursor: pointer;
            border-top: 1px solid var(--gray-200);
        }
        .unit-picker-create:hover { background: var(--brand-primary-soft); }

        .pricing-modal-error {
            background: var(--color-danger-bg);
            color: var(--color-danger-dark-text);
            padding: 0.5rem 0.75rem;
            border-radius: 4px;
            font-size: 0.9rem;
            margin-top: 0.75rem;
            display: none;
        }
        .pricing-modal-error.visible { display: block; }

        .pricing-modal-footer {
            padding: 0.75rem 1.5rem;
            background: var(--ink-50);
            display: flex;
            gap: 0.5rem;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid var(--gray-200);
            flex-shrink: 0;
        }
        /* Phase B (#482): כל overrides של כפתורי footer הוסרו — מוחלפים ב-.btn-cancel/.btn-primary/.btn-danger הגלובליים. */

        /* ==== כפתור 📅 פריסה חודשית בכל תא ניתן לעריכה ==== */
        .btn-distribution {
            display: inline-block;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 0.85rem;
            padding: 0 0.15rem;
            margin-right: 0.25rem;
            opacity: 0.25;
            transition: opacity 0.15s, transform 0.1s;
            line-height: 1;
            vertical-align: middle;
            filter: grayscale(1);
        }
        .btn-distribution:hover {
            opacity: 1;
            transform: scale(1.2);
        }
        td.num:hover .btn-distribution {
            opacity: 0.7;
        }
        .btn-distribution.has-distribution {
            opacity: 1;
            filter: none;
        }
        .btn-distribution.has-distribution:hover { transform: scale(1.25); }

        /* ==== Cell action popup menu (⋮) — מכיל את btn-note/pricing/distribution ==== */
        .cell-actions-wrap {
            position: relative;
            display: inline-flex;
            align-items: center;
            vertical-align: middle;
        }
        td.num.editable-cell > .cell-actions-wrap {
            /* הצמדה לקצה השמאלי של התא — אחרי 💼 (אם יש) ולפני המספר */
            float: left;
            margin-left: 2px;   /* רווח קטן בין 💼 ל-⋮ */
            vertical-align: middle;
        }
        /* הסתר את סימן ה-— (nil) בכל תא — לא רק editable. גם בעמודות עתידיות (תקן משרות,
           ביצוע משרות, וכל סוג עמודה אחר) כדי לא לבלבל עם מינוס. */
        .nil { display: none; }
        td.num:not(.editable-cell) > .cell-actions-wrap {
            float: left;
        }
        .btn-cell-menu {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 16px;
            height: 18px;
            padding: 0;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 700;
            color: var(--ink-300-text);
            border-radius: 3px;
            line-height: 1;
            flex-shrink: 0;
            opacity: 1;   /* תמיד גלוי, בכל תא — לא רק ב-hover ולא רק בתאים נעולים */
            transition: color 0.15s, background 0.15s, opacity 0.15s;
        }
        td.num:hover .btn-cell-menu { opacity: 1; }
        .btn-cell-menu:hover { color: var(--slate-500); background: var(--ink-100); opacity: 1; }
        /* TAK-1200: the ⋮ of a row the viewer may not edit - same disabled look as .is-blocked buttons */
        .cell-blocked-reason {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
        }
        .btn-cell-menu.is-blocked,
        .btn-cell-menu.is-blocked:hover { opacity: .5; cursor: not-allowed; background: none; color: var(--ink-300-text); }
        .btn-cell-menu.has-data { color: var(--brand-accent-text); opacity: 1; }
        .btn-cell-menu.has-data:hover { color: var(--brand-primary-hover-text); background: var(--brand-primary-soft); opacity: 1; }

        /* TAK-223: the activity-bulk ⋮ lives on the per-activity net/sub-total
           summary rows (td.num[data-activity-id]). Those rows may be DARK (white
           text on navy, e.g. tr.activity-net) or light, so the light-cell ink/
           accent colours above read as low-contrast on them. Inherit the row's
           own text colour via currentColor so the ⋮ contrasts on both dark and
           light rows. Scoped to the bulk-anchor cell only — ordinary editable
           (light) cells keep the ink/accent treatment above. */
        td.num[data-activity-id] .btn-cell-menu,
        td.num[data-activity-id] .btn-cell-menu.has-data { color: currentColor; }
        td.num[data-activity-id] .btn-cell-menu:hover,
        td.num[data-activity-id] .btn-cell-menu.has-data:hover {
            color: currentColor;
            /* rule-exempt: css-light-literal — must stay translucent (not a token) so it reads on both the dark net/sub-total rows and ordinary light rows; a solid token would show as a visible patch on light rows, changing today's look (TAK-984) */
            background: rgba(255, 255, 255, 0.18);   /* translucent light — legible on the dark net rows, harmless on light ones */
        }

        .cell-actions-popup {
            display: none;
            position: absolute;
            top: calc(100% + 2px);
            left: 0;
            background: var(--surface);
            border: 1px solid var(--slate-200);
            border-radius: 7px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.14);
            z-index: 5500;
            min-width: 130px;
            padding: 4px;
            white-space: nowrap;
            font-family: var(--font-body);   /* not the report's number font the cell inherits */
        }
        .cell-actions-popup.open { display: block; }
        /* Buttons inside popup — override the "dimmed when outside cell" defaults */
        .cell-actions-popup .btn-note,
        .cell-actions-popup .btn-pricing,
        .cell-actions-popup .btn-distribution {
            display: flex !important;
            align-items: center;
            gap: 7px;
            width: 100%;
            padding: 7px 10px;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 0.875rem;
            border-radius: 5px;
            color: var(--slate-600);
            direction: rtl;
            text-align: right;
            float: none !important;
            order: unset !important;
            opacity: 1 !important;
            margin: 0 !important;
            transform: none !important;
            filter: none !important;
            line-height: 1.4;
            transition: background 0.1s;
        }
        .cell-actions-popup .btn-note:hover,
        .cell-actions-popup .btn-pricing:hover,
        .cell-actions-popup .btn-distribution:hover {
            background: var(--ink-50);
            color: var(--ink-800);
            transform: none !important;
        }
        .cell-actions-popup .btn-note.has-note,
        .cell-actions-popup .btn-pricing.has-pricing,
        .cell-actions-popup .btn-distribution.has-distribution {
            color: var(--brand-primary-hover-text);
            font-weight: 600;
        }
        /* פריטי תפריט ⋮ גנריים (setupRowActionMenus) — כפתורי .btn-icon.
           כפתור disabled נשאר גלוי אך אפור ולא לחיץ. */
        .cell-actions-popup .cell-action-item {
            display: flex;
            align-items: center;
            gap: 7px;
            width: 100%;
            padding: 7px 10px;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 0.875rem;
            border-radius: 5px;
            color: var(--slate-600);
            direction: rtl;
            text-align: right;
            line-height: 1.4;
            opacity: 1;   /* בטל עמעום ברירת-מחדל של .btn-icon — פריט פעיל מלא */
            transition: background 0.1s;
        }
        .cell-actions-popup .cell-action-item:not(:disabled):hover {
            background: var(--ink-50);
            color: var(--ink-800);
        }
        .cell-actions-popup .cell-action-item:disabled {
            opacity: 0.45;
            cursor: default;
            color: var(--slate-400);
        }

        /* ==== TAK-223: cell "handled" marks ==== */
        /* Mark item inside the ⋮ popup — same layout as its sibling items. */
        .cell-actions-popup .btn-mark-handled {
            display: flex !important;
            align-items: center;
            gap: 7px;
            width: 100%;
            padding: 7px 10px;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 0.875rem;
            border-radius: 5px;
            color: var(--brand-primary-text);
            font-weight: 600;
            direction: rtl;
            text-align: right;
            float: none !important;
            order: unset !important;
            opacity: 1 !important;
            margin: 0 !important;
            transform: none !important;
            line-height: 1.4;
            transition: background 0.1s;
        }
        .cell-actions-popup .btn-mark-handled:not(:disabled):hover {
            background: var(--ink-50);
            color: var(--brand-primary-hover-text);
        }
        .cell-actions-popup .btn-mark-handled:disabled {
            opacity: 0.45;
            cursor: default;
            color: var(--slate-400);
            font-weight: 400;
        }
        /* Caption heading inside a cell's ⋮ popup (TAK-223's activity-bulk
           caption and TAK-694's goals-menu caption share this rule).
           TAK-694 DT1 (D-21, D-22): was styled with --slate-400 — the same
           token .cell-action-item:disabled uses — so a heading read as a
           blocked action. Restyled to the app's own .app-nav-subhead pattern:
           no fill, --navy-800, weight 600, the items' own font-size. System-
           wide by ruling (D-21): also reaches the flat report and the
           activity dashboard, outside this feature. */
        .cell-actions-popup .menu-caption {
            display: block;
            padding: 4px 10px 3px;
            background: none;
            color: var(--navy-800-text);
            font: 600 0.875rem var(--font-display);
            letter-spacing: 0.01em;
        }

        /* The handled background — a single fixed light governmental token.
           Dark numeric text (--ink-900) stays fully readable (~14:1), distinct
           from the teal salary-planted tint and the striped locked cells. */
        td.num.cell-handled {
            background: var(--tag-elected-soft) !important;
        }
        td.num.cell-handled:hover {
            background: var(--ink-200) !important;
        }
        /* handled cells always show the ⋮ so the mark state is reachable without hover */
        td.num.cell-handled .btn-cell-menu {
            opacity: 1;
        }
        /* column_data_entry (non-macro screen): handled background on the input
           cell, and the direct-icon mark button (not folded into a ⋮ menu). */
        td.input-cell.cell-handled {
            background: var(--tag-elected-soft) !important;
        }
        .cde-mark {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 0.95rem;
            padding: 0 0.15rem;
            line-height: 1;
            opacity: 0.65;
            transition: opacity 0.12s;
        }
        .cde-mark:hover,
        .cde-mark[aria-pressed="true"] {
            opacity: 1;
        }

        /* Transient status/error toast for mark/unmark feedback (role=status/alert). */
        .cellmark-toast-wrap {
            position: fixed;
            inset-block-end: 18px;
            inset-inline-start: 18px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            z-index: 6000;
        }
        .cellmark-toast {
            display: flex;
            align-items: center;
            gap: 8px;
            background: var(--band-dark-bg);
            color: #fff;
            padding: 9px 14px;
            border-radius: 8px;
            box-shadow: var(--shadow-lg);
            font-size: 0.875rem;
            max-width: 380px;
            animation: cellmarkToastIn 0.2s ease-out;
        }
        .cellmark-toast.is-error {
            background: var(--color-danger);
        }
        .cellmark-toast .ico {
            font-size: 1.05rem;
        }
        @keyframes cellmarkToastIn {
            from { opacity: 0; transform: translateY(8px); }
            to   { opacity: 1; transform: none; }
        }

        /* Handled-status filter (DT6) — a row/header hidden by the filter. */
        .handled-filter-hidden { display: none !important; }
        .handled-filter-wrap {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 0.85rem;
        }
        .handled-filter-label {
            color: var(--ink-600);
            font-weight: 600;
        }

        /* ==== Distribution modal — חלון פריסה חודשית ==== */
        .dist-modal-bg {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 2200;
        }
        .dist-modal-bg.visible { display: flex; }
        .dist-modal {
            background: var(--surface);
            border-radius: 10px;
            width: 720px;
            max-width: 95%;
            max-height: 90vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }
        .dist-modal-header {
            background: linear-gradient(135deg, var(--brand-accent) 0%, var(--ink-400) 100%);
            color: white;
            padding: 0.85rem 1.5rem;
            font-size: 1.05rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-shrink: 0;
        }
        /* Phase B (#482): .close-btn override הוסר — מוחלף ב-.close-btn הגלובלי. */
        .dist-modal-body {
            padding: 1.25rem 1.5rem;
            overflow-y: auto;
            flex: 1;
        }
        .dist-info {
            background: var(--ink-50);
            border: 1px solid var(--ink-200);
            padding: 0.7rem 1rem;
            border-radius: 6px;
            margin-bottom: 1rem;
            font-size: 0.9rem;
            line-height: 1.7;
        }
        .dist-info strong { color: var(--brand-accent-text); }

        /* טבלת 12 חודשים */
        .dist-months-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.5rem 1.5rem;
            margin-bottom: 1rem;
        }
        .dist-month-row {
            display: flex;
            align-items: center;
            gap: 0.6rem;
        }
        .dist-month-row .month-label {
            width: 80px;
            font-size: 0.9rem;
            color: var(--ink-700);
            font-weight: 500;
        }
        .dist-month-row input {
            flex: 1;
            padding: 0.4rem 0.6rem;
            border: 1px solid var(--ink-300);
            border-radius: 5px;
            font-family: var(--font-mono);
            font-size: 0.95rem;
            text-align: right;
            font-variant-numeric: tabular-nums;
        }
        .dist-month-row input:focus {
            outline: none;
            border-color: var(--ink-400);
            box-shadow: 0 0 0 2px rgba(167,139,250,0.2);
        }
        .dist-month-row .pct-suffix { color: var(--gray-500); font-size: 0.85rem; }

        /* כפתורי הזנה מהירה */
        .dist-quick-fill {
            background: var(--ink-50);
            border: 1px solid var(--gray-200);
            border-radius: 6px;
            padding: 0.65rem 0.85rem;
            margin-bottom: 0.85rem;
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
            align-items: center;
        }
        .dist-quick-fill .label {
            font-size: 0.85rem;
            color: var(--gray-500);
            font-weight: 500;
            margin-left: 0.3rem;
        }
        .dist-quick-fill button, .dist-quick-fill select {
            padding: 0.35rem 0.75rem;
            background: var(--surface);
            border: 1px solid var(--ink-300);
            border-radius: 4px;
            font-size: 0.85rem;
            cursor: pointer;
            font-family: inherit;
        }
        .dist-quick-fill button:hover { background: var(--ink-100); }

        /* שורת סיכום */
        .dist-total {
            background: var(--ink-200);
            color: var(--navy-800-text);
            padding: 0.85rem 1.25rem;
            border-radius: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 1rem;
            font-weight: 600;
            margin-top: 0.4rem;
        }
        .dist-total.warning {
            background: var(--navy-800);
            color: white;
        }
        .dist-total.ok {
            background: var(--brand-primary);
            color: white;
        }
        .dist-total .value {
            font-family: var(--font-mono);
            font-size: 1.3rem;
        }

        .dist-modal-error {
            background: var(--ink-100);
            color: var(--navy-800-text);
            padding: 0.5rem 0.75rem;
            border-radius: 4px;
            font-size: 0.9rem;
            margin-top: 0.75rem;
            display: none;
        }
        .dist-modal-error.visible { display: block; }

        .dist-modal-footer {
            padding: 0.75rem 1.5rem;
            background: var(--ink-50);
            display: flex;
            gap: 0.5rem;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid var(--gray-200);
            flex-shrink: 0;
        }
        /* Phase B (#482): כל overrides של כפתורי footer הוסרו — מוחלפים ב-.btn-cancel/.btn-primary/.btn-danger הגלובליים. */

        /* ==== Note tooltip — חלון מרחף שמציג את ההערה ב-hover ==== */
        .note-tooltip {
            position: fixed;
            left: var(--tip-left, 0);
            top: var(--tip-top, 0);
            background: var(--color-warning-bg);
            border: 1px solid var(--color-warning-bg);
            border-radius: 8px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
            padding: 0.65rem 0.85rem;
            max-width: 340px;
            min-width: 120px;
            font-size: 0.88rem;
            line-height: 1.55;
            color: var(--ink-800);
            white-space: pre-wrap;
            word-wrap: break-word;
            z-index: 2500;
            pointer-events: none;
            opacity: 0;
            transform: translateY(4px);
            transition: opacity 0.12s, transform 0.12s;
            font-family: inherit;
            direction: rtl;
            text-align: right;
        }
        .note-tooltip.visible {
            opacity: 1;
            transform: translateY(0);
        }
        .note-tooltip::before {
            content: '💬';
            display: inline-block;
            margin-left: 0.35rem;
            font-size: 0.85rem;
            opacity: 0.7;
        }
        .note-tooltip::after {
            /* חץ מצביע למטה אל הסמל */
            content: '';
            position: absolute;
            bottom: -7px;
            right: var(--arrow-right, 16px);
            width: 12px;
            height: 12px;
            background: var(--color-warning-bg);
            border-right: 1px solid var(--color-warning-bg);
            border-bottom: 1px solid var(--color-warning-bg);
            transform: rotate(45deg);
        }
        .note-tooltip.flip-down::after {
            /* מצב הפוך — החץ למעלה כשה-tooltip יוצג מתחת לסמל */
            bottom: auto;
            top: -7px;
            border-right: none;
            border-bottom: none;
            border-left: 1px solid var(--color-warning-bg);
            border-top: 1px solid var(--color-warning-bg);
        }

        /* ==== Notes modal — חלון עריכת הערה לתא ==== */
        .notes-modal-bg {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 2100;
        }
        .notes-modal-bg.visible { display: flex; }
        .notes-modal {
            background: var(--surface);
            border-radius: 10px;
            width: 600px;
            max-width: 92%;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }
        .notes-modal-header {
            background: var(--brand-primary);
            color: white;
            padding: 0.85rem 1.5rem;
            font-size: 1.05rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        /* גוון שונה במצב הערה לפעילות */
        .notes-modal.notes-mode-activity .notes-modal-header {
            background: var(--navy-800);
        }
        /* Phase B (#482): override של btn-save-note במצב activity הוסר — מוחלף ב-.btn-primary הגלובלי. */
        /* Phase B (#482): .close-btn override הוסר — מוחלף ב-.close-btn הגלובלי. */
        .notes-modal-body { padding: 1.25rem 1.5rem; }
        .notes-modal-info {
            background: var(--brand-primary-soft);
            border: 1px solid var(--brand-primary-soft);
            padding: 0.75rem 1rem;
            border-radius: 6px;
            margin-bottom: 1rem;
            font-size: 0.9rem;
            line-height: 1.7;
        }
        .notes-modal-info strong { color: var(--brand-primary-text); }
        .notes-modal-info .amount {
            font-family: var(--font-mono);
            font-weight: 700;
            color: var(--brand-primary-text);
            font-size: 1rem;
        }
        .notes-modal-body label {
            display: block;
            font-size: 0.9rem;
            color: var(--ink-700);
            font-weight: 500;
            margin-bottom: 0.4rem;
        }
        .notes-modal-body textarea {
            width: 100%;
            min-height: 130px;
            padding: 0.65rem 0.85rem;
            border: 1px solid var(--ink-300);
            border-radius: 6px;
            font-family: inherit;
            font-size: 0.95rem;
            resize: vertical;
        }
        .notes-modal-body textarea:focus {
            outline: none;
            border-color: var(--brand-primary);
            box-shadow: 0 0 0 2px rgba(12,107,138,0.2);
        }
        .notes-modal-error {
            background: var(--ink-100);
            color: var(--navy-800-text);
            padding: 0.5rem 0.75rem;
            border-radius: 4px;
            font-size: 0.9rem;
            margin-top: 0.75rem;
            display: none;
        }
        .notes-modal-error.visible { display: block; }
        .notes-modal-footer {
            padding: 0.75rem 1.5rem;
            background: var(--ink-50);
            display: flex;
            gap: 0.5rem;
            justify-content: flex-end;
            border-top: 1px solid var(--gray-200);
            align-items: center;
        }
        /* Phase B (#482): כל overrides של כפתורי footer הוסרו — מוחלפים ב-.btn-cancel/.btn-primary/.btn-danger הגלובליים. */
        .notes-modal-footer .btn-delete-note { margin-left: auto; margin-right: 0; }

        /* ============================================================ */
        /* F-EXTRA (2026-06-17): פעולה נוספת — modal + כפתור 📌 בתא     */
        /* ============================================================ */
        .extra-modal {
            background: var(--surface);
            border-radius: 10px;
            width: 680px;
            max-width: 94%;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            display: flex; flex-direction: column;
            max-height: 90vh;
        }
        .extra-modal-header {
            background: var(--brand-primary);
            color: white;
            padding: 0.85rem 1.5rem;
            font-size: 1.05rem; font-weight: 600;
            display: flex; align-items: center; justify-content: space-between;
        }
        .extra-modal-body {
            padding: 1.1rem 1.5rem;
            overflow-y: auto;
        }
        .extra-modal-info {
            background: var(--brand-primary-soft);
            border-radius: 6px;
            padding: 0.6rem 0.9rem;
            margin-bottom: 0.85rem;
            font-size: 0.9rem; line-height: 1.7;
        }
        .extra-modal-info strong { color: var(--brand-primary-text); }
        .extra-modal-summary {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.6rem;
            margin-bottom: 1rem;
        }
        .extra-modal-summary > div {
            background: var(--ink-50);
            border-radius: 6px;
            padding: 0.55rem 0.75rem;
            text-align: center;
            font-size: 0.85rem;
            color: var(--gray-500);
        }
        .extra-modal-summary .amount {
            display: block;
            font-family: var(--font-mono);
            font-weight: 700;
            color: var(--brand-primary-text);
            font-size: 1.05rem;
            margin-top: 0.15rem;
        }
        .extra-modal-section-title {
            margin: 0.75rem 0 0.5rem;
            font-size: 0.95rem;
            color: var(--navy-800-text);
        }
        .extra-list {
            border: 1px solid var(--gray-200);
            border-radius: 6px;
            max-height: 220px;
            overflow-y: auto;
            margin-bottom: 0.85rem;
        }
        .extra-list-empty {
            padding: 1rem;
            text-align: center;
            color: var(--gray-500);
            font-style: italic;
            font-size: 0.9rem;
        }
        .extra-item {
            display: grid;
            grid-template-columns: 100px 1fr 90px 36px;
            gap: 0.5rem;
            align-items: center;
            padding: 0.5rem 0.75rem;
            border-bottom: 1px solid var(--ink-100);
            font-size: 0.9rem;
        }
        .extra-item:last-child { border-bottom: none; }
        .extra-amount {
            font-family: var(--font-mono);
            font-weight: 700;
            color: var(--brand-primary-text);
            text-align: end;
        }
        .extra-amount.is-negative { color: var(--color-danger-text); }
        .extra-note { color: var(--ink-700); }
        .extra-date {
            font-size: 0.78rem;
            color: var(--gray-500);
            font-family: var(--font-mono);
        }
        .extra-del-btn {
            background: transparent;
            border: 1px solid transparent;
            cursor: pointer;
            font-size: 0.95rem;
            color: var(--gray-500);
            padding: 0.25rem 0.4rem;
            border-radius: 4px;
        }
        .extra-del-btn:hover {
            background: var(--ink-100);
            color: var(--color-danger-text);
            border-color: var(--ink-300);
        }
        .extra-add-row {
            display: grid;
            grid-template-columns: auto 140px auto 1fr auto;
            gap: 0.5rem;
            align-items: center;
            background: var(--ink-50);
            border-radius: 6px;
            padding: 0.6rem 0.75rem;
        }
        .extra-add-row label {
            font-size: 0.85rem; color: var(--gray-500);
        }
        .extra-add-row input {
            padding: 0.4rem 0.55rem;
            border: 1px solid var(--ink-300);
            border-radius: 4px;
            font-family: inherit;
            font-size: 0.9rem;
            background: var(--surface);
        }
        .extra-add-row input:focus {
            outline: none;
            border-color: var(--brand-primary);
            box-shadow: 0 0 0 2px var(--brand-primary-soft);
        }
        /* הסתרת חצי-מספרים בשדה הסכום — מיותרים. */
        #extraAddAmount::-webkit-inner-spin-button,
        #extraAddAmount::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        #extraAddAmount { -moz-appearance: textfield; appearance: textfield; }
        .extra-modal-error {
            background: var(--ink-100);
            color: var(--navy-800-text);
            padding: 0.45rem 0.7rem;
            border-radius: 4px;
            font-size: 0.88rem;
            margin-top: 0.6rem;
            display: none;
        }
        .extra-modal-error.visible { display: block; }
        .extra-modal-footer {
            padding: 0.65rem 1.5rem;
            background: var(--ink-50);
            display: flex;
            gap: 0.5rem;
            justify-content: flex-end;
            border-top: 1px solid var(--gray-200);
        }

        /* כפתור 📌 בתוך התא — אינדיקציה ויזואלית */
        .btn-extra-action {
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 0 0.2rem;
            font-size: 0.85rem;
            opacity: 0.4;
            transition: opacity 0.15s;
        }
        .btn-extra-action:hover { opacity: 1; }
        .btn-extra-action.has-extra { opacity: 1; color: var(--brand-accent-text); }

        /* סמן ויזואלי 📌 ליד ערך התא — מציין שיש "פעולה נוספת". מוסתר כברירת מחדל
           ומופיע רק כשיש קלאס .has-extra (מתחלף ב-JS אחרי כל הוספה/מחיקה). */
        .cell-extra-pin {
            display: none;
            font-size: 0.72rem;
            margin-inline-end: 0.25rem;   /* הנעץ משמאל למספר → רווח בצדו הסוגר */
            vertical-align: middle;
            opacity: 0.85;
        }
        .cell-extra-pin.has-extra { display: inline; }

        /* KPIs בראש הדשבורד הראשי */
        .main-kpis {
            margin-top: 1.25rem;
        }
        .main-kpis .stat-card {
            background: var(--surface);
            border-radius: 8px;
            padding: 0.85rem 1.5rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.06);
            border: 1px solid var(--gray-200);
        }
        .main-kpis .stat-card .value {
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--brand-primary-text);
        }
        .main-kpis .stat-card .label {
            color: var(--gray-500);
            font-size: 0.85rem;
        }
        .stat-card {
            background: var(--surface);
            border-radius: 8px;
            padding: 1rem 1.5rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.06);
            border: 1px solid var(--gray-200);
        }
        .stat-card .value { font-size: 2rem; font-weight: 700; color: var(--brand-primary-text); }
        .stat-card .label { color: var(--gray-500); font-size: 0.9rem; }
        .filters {
            background: var(--surface);
            padding: 1rem 1.5rem;
            border-radius: 8px;
            border: 1px solid var(--gray-200);
            margin-bottom: 1.5rem;
        }
        .tree-container {
            background: var(--surface);
            border-radius: 8px;
            border: 1px solid var(--gray-200);
            padding: 1rem;
        }
        ul.tree {
            list-style: none;
            padding-right: 1.2rem;
            margin: 0;
        }
        ul.tree.root { padding-right: 0; }
        li.node {
            position: relative;
            padding: 0.35rem 0;
            border-right: 2px solid transparent;
            padding-right: 0.75rem;
        }
        li.node:hover { background: var(--ink-50); }
        .node-row { display: flex; align-items: center; gap: 0.5rem; }
        .toggle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px; height: 22px;
            border-radius: 4px;
            background: var(--ink-100);
            cursor: pointer;
            user-select: none;
            font-size: 0.75rem;
            color: var(--gray-500);
            border: 1px solid var(--gray-200);
            flex-shrink: 0;
        }
        .toggle:hover { background: var(--gray-200); }
        .toggle.leaf { background: transparent; border: none; cursor: default; visibility: hidden; }
        .tree-container .code {
            display: inline-block;
            min-width: 50px;
            padding: 0.15rem 0.5rem;
            border-radius: 4px;
            font-family: var(--font-mono);
            font-weight: 700;
            font-size: 0.85rem;
            background: var(--brand-primary-soft);
            color: var(--brand-primary-text);
            text-align: center;
        }
        /* Handoff v2: היררכית רמות בעץ — כולן Teal/Ink, אין yellow warning
           level-1 = הכי בולט (navy-800), שאר הרמות יורדות בעוצמה */
        .tree-container .code.level-1 { background: var(--navy-800);          color: #fff; }
        .tree-container .code.level-2 { background: var(--brand-primary);     color: #fff; }
        .tree-container .code.level-3 { background: var(--brand-primary-soft); color: var(--brand-primary-text); }
        .tree-container .code.level-4 { background: var(--ink-200);           color: var(--ink-700); }
        .name { flex: 1; }
        .name.leaf { font-weight: 400; }
        .name.branch { font-weight: 500; }
        .direction-badge {
            font-size: 0.7rem;
            padding: 0.1rem 0.5rem;
            border-radius: 4px;
            font-weight: 500;
        }
        .direction-תקבול { background: var(--color-success-bg); color: var(--color-success-text); }
        .direction-תשלום { background: var(--color-danger-bg); color: var(--color-danger-dark-text); }
        .notes {
            font-size: 0.8rem;
            color: var(--gray-500);
            font-style: italic;
            margin-right: 0.5rem;
        }
        ul.children { display: none; }
        li.node.expanded > ul.children { display: block; }
        .empty {
            text-align: center;
            padding: 3rem;
            color: var(--ink-400);
        }
        .editable {
            border-bottom: 1px dashed transparent;
            padding: 2px 4px;
            border-radius: 3px;
            cursor: text;
            transition: background 0.15s;
        }
        .editable:hover {
            background: var(--color-warning-bg);
            border-bottom: 1px dashed var(--color-warning);
        }
        .editable:focus {
            outline: none;
            background: var(--color-warning-bg);
            border-bottom: 1px solid var(--color-warning);
        }
        .editable.notes:empty::before {
            content: 'הוסף הערה...';
            color: var(--ink-300-text);
            font-style: italic;
        }
        .save-indicator {
            display: inline-block;
            font-size: 0.85rem;
            margin-right: 0.5rem;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .save-indicator.saving { opacity: 1; color: var(--gray-500); }
        .save-indicator.saved { opacity: 1; color: var(--color-success-text); }
        .save-indicator.error { opacity: 1; color: var(--color-danger-text); }
        .edit-hint {
            background: var(--brand-primary-soft);
            border: 1px solid var(--brand-primary-soft);
            padding: 0.75rem 1rem;
            border-radius: 6px;
            margin-bottom: 1rem;
            font-size: 0.9rem;
            color: var(--navy-800-text);
        }

        /* Handoff v2: רישומים אוטומטיים — רקע Teal-soft מהפלטה החדשה
           + טקסט placeholder ב-warning (זה האזהרה האמיתית של "ללא שם"). */
        li.node.auto-created {
            background: var(--brand-primary-soft);
            border-radius: 4px;
            border-right: 3px solid var(--brand-primary);
        }
        li.node.auto-created .name.editable:empty::before {
            content: '⚠ ללא שם — לחץ להוספה';
            color: var(--color-warning-text);
            font-style: italic;
            font-weight: 500;
        }
        /* code badge — Teal עדין על Teal-soft, אחיד עם שאר רמות העץ */
        li.node.auto-created .code {
            background: var(--brand-primary-soft) !important;
            color: var(--brand-primary-text) !important;
        }
        /* Handoff v2: AUTO = תווית מידע נייטרלי (חוליה אוטומטית), לא warning */
        .auto-badge {
            display: inline-block;
            font-size: 0.65rem;
            background: var(--brand-primary-soft);
            color: var(--brand-primary-text);
            padding: 0.05rem 0.4rem;
            border-radius: 3px;
            font-weight: 700;
            letter-spacing: 0.5px;
        }

        /* ==== כפתור 🏢 שיוך לאגף/מחלקה (פר כרטיס) ==== */
        .btn-org-assign {
            background: var(--ink-100);
            border: 1px solid var(--gray-200);
            padding: 0.1rem 0.4rem;
            border-radius: 3px;
            cursor: pointer;
            font-size: 0.75rem;
            margin-right: 0.3rem;
            color: var(--gray-500);
        }
        .btn-org-assign:hover { background: var(--brand-primary-soft); border-color: var(--brand-primary-soft); color: var(--brand-primary-text); }
        .btn-org-assign.has-org { background: var(--brand-primary-soft); color: var(--brand-primary-text); border-color: var(--brand-primary-soft); }
        .btn-org-assign.unassigned { background: var(--color-warning-bg); color: var(--color-warning-text); border-color: var(--color-warning-bg); }

        /* ==== Layout utility: label cell עם תוכן מימין וכפתורים בשמאל ==== */
        .label-flex {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            flex-wrap: nowrap;
            min-width: 0;
        }
        .label-flex .label-text {
            flex: 1 1 auto;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .label-flex .label-end {
            margin-inline-start: auto;
            display: flex;
            align-items: center;
            gap: 0.3rem;
            flex-shrink: 0;
        }

        /* ==== Chip להצגת שיוך אגף/מחלקה — גלובלי ==== */
        .org-chip {
            display: inline-block;
            background: var(--brand-primary-soft);
            color: var(--brand-primary-text);
            border: 1px solid var(--brand-primary-soft);
            padding: 0.1rem 0.5rem;
            border-radius: 12px;
            font-size: 0.78rem;
            margin-right: 0.4rem;
            vertical-align: middle;
        }
        .org-chip .sep { margin: 0 0.3rem; color: var(--brand-primary-soft); }
        .org-chip small { color: var(--slate-500); }
        .org-chip.unassigned {
            background: var(--color-warning-bg);
            color: var(--color-warning-text);
            border-color: var(--color-warning-bg);
        }

        /* ==== Modal שיוך אגף לכרטיס בודד ==== */
        .org-assign-modal-bg {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 2100;
        }
        .org-assign-modal-bg.visible { display: flex; }
        .org-assign-modal {
            background: var(--surface);
            border-radius: 10px;
            width: 560px;
            max-width: 92%;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }
        .org-assign-modal-header {
            background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-accent) 100%);
            color: white;
            padding: 0.9rem 1.5rem;
            font-size: 1.05rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        /* Phase B (#482): .close-btn override הוסר — מוחלף ב-.close-btn הגלובלי. */
        .org-assign-modal-body { padding: 1.25rem 1.5rem; }
        .org-assign-modal-info {
            background: var(--brand-primary-soft);
            border: 1px solid var(--brand-primary-soft);
            padding: 0.7rem 0.9rem;
            border-radius: 6px;
            margin-bottom: 1rem;
            font-size: 0.9rem;
            line-height: 1.7;
        }
        .org-assign-modal-info strong { color: var(--brand-primary-text); }
        .org-assign-current {
            background: var(--ink-50);
            border: 1px solid var(--gray-200);
            padding: 0.55rem 0.85rem;
            border-radius: 5px;
            margin-bottom: 0.85rem;
            font-size: 0.85rem;
            color: var(--gray-500);
        }
        .org-assign-current.unassigned { background: var(--color-warning-bg); color: var(--color-warning-text); border-color: var(--color-warning-bg); }
        .org-assign-modal-body label {
            display: block;
            font-size: 0.88rem;
            color: var(--ink-700);
            font-weight: 500;
            margin-bottom: 0.3rem;
            margin-top: 0.7rem;
        }
        .org-assign-modal-body label:first-of-type { margin-top: 0; }
        .org-assign-modal-body select {
            width: 100%;
            padding: 0.55rem 0.85rem;
            border: 1px solid var(--ink-300);
            border-radius: 5px;
            font-family: inherit;
            font-size: 0.93rem;
            background: var(--surface);
        }
        .org-assign-modal-body select:focus {
            outline: none;
            border-color: var(--brand-accent);
            box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
        }
        .org-assign-modal-body .hint {
            font-size: 0.78rem;
            color: var(--ink-400);
            margin-top: 0.2rem;
        }
        .org-assign-modal-error {
            background: var(--color-danger-bg);
            color: var(--color-danger-dark-text);
            padding: 0.5rem 0.75rem;
            border-radius: 4px;
            font-size: 0.88rem;
            margin-top: 0.75rem;
            display: none;
        }
        .org-assign-modal-error.visible { display: block; }
        .org-assign-modal-footer {
            padding: 0.75rem 1.5rem;
            background: var(--ink-50);
            display: flex;
            gap: 0.5rem;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid var(--gray-200);
        }
        .org-assign-modal-footer .left-actions { display: flex; gap: 0.4rem; }
        .org-assign-modal-footer .right-actions { display: flex; gap: 0.4rem; }
        /* Phase B (#482): כל overrides של כפתורי footer הוסרו — מוחלפים ב-.btn-cancel/.btn-primary/.btn-danger הגלובליים. */

        /* קופסת בדיקת קוד */
        .resolver-box {
            background: var(--surface);
            border: 1px solid var(--gray-200);
            border-radius: 8px;
            padding: 1.25rem 1.5rem;
            margin-bottom: 1.5rem;
        }
        .resolver-box h3 {
            margin: 0 0 0.75rem;
            font-size: 1rem;
            color: var(--brand-primary-text);
        }
        .resolver-result {
            margin-top: 0.75rem;
            padding: 0.75rem 1rem;
            border-radius: 6px;
            font-size: 0.9rem;
            /* display: none removed - use class="is-hidden" instead (state.css) */
        }
        .resolver-result.success { background: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--color-success-bg); }
        .resolver-result.error { background: var(--color-danger-bg); color: var(--color-danger-dark-text); border: 1px solid var(--color-danger-bg); }
        .resolver-result code {
            background: var(--ink-100);
            padding: 0.1rem 0.4rem;
            border-radius: 3px;
        }
        .direction-toggle {
            display: inline-flex;
            background: var(--ink-100);
            border-radius: 6px;
            padding: 4px;
            gap: 4px;
        }
        .direction-toggle a {
            padding: 0.4rem 1rem;
            border-radius: 4px;
            text-decoration: none;
            color: var(--gray-500);
            font-size: 0.9rem;
            font-weight: 500;
            transition: all 0.15s;
        }
        .direction-toggle a:hover { background: var(--gray-200); color: var(--ink-700); }
        .direction-toggle a.active {
            background: var(--surface);
            color: var(--brand-primary-text);
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        }

        /* Layout-wide page helpers (replace former inline styles) */
        /* Margin block divider */
        .l-mb-lg          { margin-bottom: 1.5rem; }
        /* Common text colors used inline across many places */
        .l-text-slate-400 { color: var(--slate-400); }
        .l-text-slate-500 { color: var(--slate-500); }
        .l-text-slate-600 { color: var(--slate-600); }
        .l-text-danger    { color: var(--color-danger-text); }
        .l-text-danger-dark { color: var(--color-danger-dark-text); }
        .l-text-warning   { color: var(--color-warning-text); }
        .l-text-warning-amber { color: var(--color-warning-text); }
        .l-text-brand     { color: var(--brand-primary-text); }
        /* Required-field asterisk */
        .l-required-mark  { color: var(--color-danger-text); }
        /* "No cards" empty state inside modal lists */
        .l-empty-list     { color: var(--slate-400); padding: 1rem; text-align: center; }
        /* Section warning banner (for filter mismatch etc.) */
        .l-section-warning { text-align: center; color: var(--color-warning-text);
                             font-style: italic; font-size: 0.82rem; }
        /* Distribution modal helpers */
        .l-dist-col-row   { margin-top: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
        .l-dist-col-label { font-weight: 600; }
        .l-dist-col-select { padding: 0.3rem 0.5rem; border: 1px solid var(--slate-300);
                             border-radius: 0.3rem; font-size: 0.95rem;
                             flex: 1; max-width: 300px; }
        .l-dist-hint      { margin-top: 0.4rem; font-size: 0.84rem; color: var(--gray-500); }
        .l-dist-quick-hint { font-size: 0.85rem; color: var(--gray-500); }
        /* WP lock banner (distribution + pricing) */
        .l-wp-lock-banner { background: var(--color-warning-bg); border: 1px solid var(--color-warning);
                            border-radius: 0.4rem; padding: 0.55rem 0.85rem;
                            margin-bottom: 0.6rem; font-size: 0.88rem;
                            color: var(--color-warning-text); direction: rtl; line-height: 1.4; }
        /* Flex row gap-sm */
        .l-flex-gap-sm    { display: flex; gap: 0.5rem; }
        /* Heading paragraph */
        .l-heading-para   { font-weight: 600; color: var(--slate-600);
                            font-size: 0.92rem; margin-top: 0.8rem; }
        /* Cells modal — empty cards line */
        .l-cards-empty    { text-align: center; padding: 1rem; }
        /* WP/Salary lock dialog (created via JS) */
        .l-lock-overlay   { position: fixed; inset: 0; background: rgba(0,0,0,0.45);
                            z-index: 9000; display: flex; align-items: center; justify-content: center; }
        .l-lock-box       { background: var(--surface); border-radius: 10px; padding: 1.5rem 2rem;
                            max-width: 420px; width: 90%;
                            box-shadow: 0 8px 30px rgba(0,0,0,0.2);
                            text-align: center; direction: rtl; }
        .l-lock-icon      { font-size: 2rem; margin-bottom: 0.5rem; }
        .l-lock-title     { font-size: 1rem; font-weight: 600; color: var(--navy-800-text); margin-bottom: 0.4rem; }
        .l-lock-body      { font-size: 0.92rem; color: var(--slate-600); margin-bottom: 1.2rem; }
        .l-lock-actions   { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
        .l-lock-btn       { padding: 0.5rem 1.1rem; border-radius: 6px;
                            font-size: 0.92rem; text-decoration: none; }
        .l-lock-btn.primary { background: var(--navy-800); color: #fff; }
        .l-lock-btn.secondary { background: var(--gray-200); color: var(--ink-700); border: none; cursor: pointer; }
        /* Refresh button inside summaries banner */
        .l-refresh-btn    { background: var(--brand-primary); color: white; border: none;
                            padding: 0.2rem 0.7rem; border-radius: 4px; cursor: pointer;
                            font-size: 0.82rem; }
        /* Pricing table column widths */
        .l-pu-col-unit    { min-width: 140px; }
        .l-pu-col-type    { min-width: 130px; }
        .l-pu-col-qty     { width: 90px; }
        .l-pu-col-price   { width: 100px; }
        .l-pu-col-mul     { width: 85px; }
        .l-pu-col-total   { min-width: 120px; }
        .l-pu-col-delete  { width: 40px; }
        /* Framework Section Picker Modal */
        .l-fw-overlay     { display: none; position: fixed; inset: 0;
                            background: rgba(15,23,42,0.55);
                            z-index: 9000; align-items: center; justify-content: center; }
        .l-fw-overlay.is-open { display: flex; }
        .l-fw-box         { background: var(--surface); border-radius: 8px; width: min(560px, 92vw);
                            max-height: 85vh; display: flex; flex-direction: column;
                            box-shadow: 0 12px 40px rgba(0,0,0,0.35); }
        .l-fw-header      { padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--gray-200);
                            display: flex; align-items: center; justify-content: space-between; }
        .l-fw-title       { margin: 0; font-size: 1.05rem; color: var(--brand-primary-text); }
        .l-fw-close       { background: none; border: none; font-size: 1.4rem; line-height: 1;
                            cursor: pointer; color: var(--slate-500); }
        .l-fw-info        { padding: 0.7rem 1.1rem; border-bottom: 1px solid var(--slate-100);
                            background: var(--ink-50); font-size: 0.86rem; color: var(--slate-600); }
        .l-fw-info-current { margin-top: 0.3rem; }
        .l-fw-list-wrap   { padding: 0.6rem 1.1rem; overflow-y: auto; flex: 1; }
        .l-fw-search      { width: 100%; padding: 0.4rem 0.6rem; border: 1px solid var(--slate-300);
                            border-radius: 4px; margin-bottom: 0.6rem; font-size: 0.9rem; }
        .l-fw-footer      { padding: 0.7rem 1.1rem; border-top: 1px solid var(--gray-200);
                            display: flex; justify-content: space-between; gap: 0.5rem;
                            align-items: center; }
        /* Phase B (#482): .l-fw-btn color override הוסר — מוחלף ב-.btn-secondary/.btn-cancel הגלובליים. */
        .l-fw-btn.is-wide { padding: 0.4rem 0.9rem; font-size: 1rem; }
        /* Mini items for various modals */
        .l-fw-list-loading { color: var(--slate-400); padding: 1rem; text-align: center; }
        /* Empty-state span for emptyDash() helper */
        .l-empty-dash     { color: var(--slate-400); }
        /* Framework picker — list items + group headers + badges */
        .l-fw-group       { font-weight: 700; color: var(--ink-800); margin: 0.6rem 0 0.3rem;
                            padding: 0.2rem 0.4rem; background: var(--brand-primary-soft);
                            border-radius: 3px; font-size: 0.85rem; }
        .l-fw-item        { padding: 0.4rem 0.6rem; margin-bottom: 0.25rem;
                            border: 1px solid var(--slate-200); border-radius: 4px;
                            cursor: pointer; background: var(--surface); transition: all 0.12s; }
        .l-fw-item.is-current { background: var(--brand-primary-soft); border-color: var(--brand-accent); }
        .l-fw-item:hover:not(.is-current) { background: var(--slate-100); }
        .l-fw-item-row    { display: flex; justify-content: space-between; align-items: center; gap: 0.4rem; }
        .l-fw-item-main   { flex: 1; }
        .l-fw-item-meta   { font-size: 0.75rem; color: var(--slate-500); margin-top: 0.1rem; }
        .l-fw-item-check  { color: var(--brand-primary-text); font-size: 1.1rem; }
        .l-fw-badge       { padding: 0.1rem 0.4rem; border-radius: 3px;
                            font-size: 0.72rem; margin-right: 0.3rem; }
        .l-fw-badge.default { background: var(--color-warning-bg); color: var(--color-warning-text);
                              padding: 0.05rem 0.35rem; font-size: 0.7rem; }
        .l-fw-badge.manual  { background: var(--color-warning-bg); color: var(--color-warning-text); }
        .l-fw-badge.auto    { background: var(--color-success-bg); color: var(--color-success-text); }
        .l-td-pad-0       { padding: 0; }
        .l-cam-menu-hidden { display: none; }
        .l-mt-md          { margin-top: 0.7rem; }
        .l-cam-del-title  { color: var(--color-danger-dark-text); }
        .l-cam-del-status { padding: 0.8rem; border-radius: 0.4rem; margin: 0.5rem 0;
                            background: var(--ink-50); color: var(--slate-600); }
        /* Phase B (#482): .l-cam-btn-del color override הוסר — מוחלף ב-.btn-danger הגלובלי. */
        .l-cam-hint-tight { margin-top: 0; margin-bottom: 0.8rem; }
        .l-grid-2cols     { grid-column: 2 / span 2; }
        .l-cam-hint-sm    { margin-top: 0.3rem; color: var(--slate-500); font-size: 0.8rem; }
        .l-cam-results-hdr { display: flex; justify-content: space-between;
                             align-items: center; margin-bottom: 0.4rem; }
        .l-cam-truncated   { color: var(--color-warning-text); font-size: 0.85rem; }
        .l-cam-cancel-tomode { margin-right: 0.4rem; }
        .l-stale-note     { color: var(--color-warning-text); }
        /* Summary-reload floating banner */
        .l-summary-reload-banner {
            position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
            background: var(--brand-primary-soft); color: var(--brand-primary-text);
            border: 1px solid var(--brand-primary-soft);
            padding: 0.5rem 1rem; border-radius: 6px;
            font-size: 0.88rem; box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            z-index: 5000;
            display: flex; align-items: center; gap: 0.5rem;
        }
        /* Card-actions delete-status state modifiers */
        .l-cam-del-status.is-error   { background: var(--color-danger-bg); color: var(--color-danger-dark-text); }
        .l-cam-del-status.is-success { background: var(--color-success-bg); color: var(--color-success-text); }
        /* Helper to force flex (for bars whose base class is layout-only) */
        .l-bar-flex { display: flex; }
        /* Work plans bulk-action bar (work_plans_list.html) */
        /* Handoff v2: ink-100 + brand-primary-soft, במקום צהוב. */
        .l-wp-bulk-bar {
            display: flex; align-items: center; gap: 0.75rem;
            padding: 0.6rem 1rem; background: var(--ink-100);
            border: 1px solid var(--brand-primary-soft); border-radius: 0.5rem;
            margin-bottom: 0.75rem; flex-wrap: wrap;
        }
        /* Work plan form bulk-action bar (slightly more compact) */
        .l-wpf-bulk-bar {
            display: flex; align-items: center; gap: 0.75rem;
            padding: 0.55rem 0.9rem; background: var(--color-warning-bg);
            border: 1px solid var(--color-warning-bg); border-radius: 0.45rem;
            margin-bottom: 0.6rem; flex-wrap: wrap;
        }
        /* emptyDash size variants (replaces extraStyle inline param) */
        .l-empty-dash.is-sm { font-size: 0.82rem; }
        .l-empty-dash.is-md { font-size: 0.85rem; }
        /* Empty-list padding variants (replaces emptyPadding inline param) */
        .l-cards-empty.is-p075 { padding: 0.75rem; }
        .l-cards-empty.is-p1   { padding: 1rem; }
        .l-cards-empty.is-p2   { padding: 2rem; }
        /* Top-scrollbar inner width driven by CSS variable */
        .top-scrollbar-inner { width: var(--top-scrollbar-width, 100%); }
        /* TAK-223: the .cell-actions-popup is now positioned in JS with position:fixed
           (window._openCellActionsPopup) so it escapes the report tables' overflow
           wrappers; the old is-rtl-flip / is-up-flip class-flip rules are superseded and
           removed. */


/* ---- Block 2 ---- */
.empty-tenant-banner {
    background: var(--color-warning-bg); color: var(--color-warning-text); border-bottom: 2px solid var(--color-warning);
    padding: 0.65rem 1rem; text-align: center; font-size: 0.92rem; line-height: 1.5;
    position: sticky; top: 0; z-index: 1000;
}
.empty-tenant-banner code {
    background: var(--color-warning-bg); padding: 0.05rem 0.35rem; border-radius: 0.25rem;
    font-family: var(--font-mono); font-weight: 700;
}
.empty-tenant-banner--info {
    background: var(--brand-primary-soft);
    color: var(--navy-900-text);
    border-bottom: 2px solid var(--brand-primary);
}
.empty-tenant-banner--info a {
    color: var(--brand-primary-text);
    text-decoration: underline;
    font-weight: 700;
}
.empty-tenant-banner--info a:hover {
    color: var(--navy-900-text);
}

/* ---- Block 3 ---- */
.cam-backdrop {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.45); z-index: 5000;
    align-items: center; justify-content: center;
    direction: rtl;
}
.cam-backdrop.open { display: flex; }
.cam-box {
    background: var(--surface); border-radius: 10px; width: 680px; max-width: 95vw;
    max-height: 92vh; overflow-y: auto;
    padding: 0; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.cam-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.9rem 1.2rem; border-bottom: 1px solid var(--gray-200);
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent)); color: white;
    border-radius: 10px 10px 0 0;
}
.cam-header h3 { margin: 0; font-size: 1.05rem; }
.cam-close {
    background: transparent; border: none; color: white; font-size: 1.5rem;
    cursor: pointer; padding: 0 0.3rem;
}
.cam-close:hover { color: var(--color-warning-bg); }
.cam-info {
    padding: 0.7rem 1.2rem; background: var(--ink-50); color: var(--slate-600);
    font-size: 0.85rem; border-bottom: 1px solid var(--gray-200);
}
.cam-info code {
    background: var(--slate-200); padding: 1px 5px; border-radius: 3px;
    color: var(--brand-primary-text); font-size: 0.82rem;
}
/* === ⚙️ כפתור פעולות לכרטיס — Teal/Ink מהפלטה החדשה === */
.btn-card-actions {
    background: var(--brand-primary-soft); border: 1px solid var(--brand-primary); border-radius: 4px;
    padding: 1px 6px; font-size: 0.85rem; cursor: pointer;
    margin-left: 0.3rem; vertical-align: middle;
    font-variant-emoji: text;  /* ⚙ יקבל color במקום emoji צבעוני */
    color: var(--brand-primary-text);
    transition: all 0.15s;
}
.btn-card-actions:hover {
    background: var(--brand-primary-soft); border-color: var(--brand-primary); transform: scale(1.1);
}

/* === Mode select (מסך ראשי לפני התפריט) === */
.cam-mode-select { padding: 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; }
.cam-mode-select .cam-menu-item { padding: 1rem; }

/* === Menu (תפריט פעולות אחרי בחירת מצב) === */
.cam-menu { padding: 0.7rem; display: flex; flex-direction: column; gap: 0.4rem; }
.cam-nav-row {
    display: flex; justify-content: space-between; margin-bottom: 0.5rem;
}
.cam-cancel-to-mode {
    background: var(--color-danger-bg); border: 1px solid var(--color-danger-bg); color: var(--color-danger-dark-text);
    padding: 0.3rem 0.7rem; border-radius: 4px; cursor: pointer;
    font-size: 0.8rem; font-weight: 600;
}
.cam-cancel-to-mode:hover { background: var(--color-danger-bg); }
.cam-menu-item {
    display: flex; align-items: center; gap: 0.7rem;
    background: var(--surface); border: 1px solid var(--gray-200); border-radius: 6px;
    padding: 0.8rem 1rem; cursor: pointer; text-align: right;
    transition: all 0.15s;
}
.cam-menu-item:hover {
    background: var(--brand-primary-soft); border-color: var(--brand-accent);
    transform: translateX(-3px);
}
.cam-menu-icon { font-size: 1.5rem; }
.cam-menu-title { font-weight: 700; color: var(--brand-primary-text); font-size: 0.95rem; }
.cam-menu-desc { font-size: 0.8rem; color: var(--slate-500); margin-top: 2px; }

/* === פריט-תפריט מיוחד לטווח === */
.cam-menu-item.cam-menu-range {
    border-color: var(--brand-accent); background: var(--brand-primary-soft);
}
.cam-menu-item.cam-menu-range:hover {
    background: var(--brand-primary-soft); border-color: var(--brand-primary);
}
.cam-menu-item.cam-menu-delete {
    border-color: var(--color-danger); background: var(--color-danger-bg);
}
.cam-menu-item.cam-menu-delete:hover {
    background: var(--color-danger-bg); border-color: var(--color-danger-dark);
}
.cam-menu-item.cam-menu-delete .cam-menu-title { color: var(--color-danger-dark-text); }

/* === Range filter grid === */
.cam-range-grid {
    display: grid; grid-template-columns: 1fr; gap: 0.4rem;
    background: var(--ink-50); padding: 0.8rem; border-radius: 6px;
}
.cam-range-row {
    display: grid; grid-template-columns: 130px 1fr 1fr;
    gap: 0.4rem; align-items: center;
}
.cam-range-row label {
    margin: 0; font-size: 0.85rem; color: var(--slate-600); font-weight: 600;
}
.cam-range-row input, .cam-range-row select {
    padding: 0.35rem 0.5rem; border: 1px solid var(--slate-300);
    border-radius: 4px; font-size: 0.85rem; font-family: inherit;
    box-sizing: border-box; background: var(--surface);
}
.cam-range-result {
    margin-top: 0.8rem; padding: 0.6rem; background: var(--slate-100);
    border-radius: 4px; font-size: 0.85rem;
}
.cam-range-result.ok    { background: var(--color-success-bg); color: var(--color-success-text); }
.cam-range-result.error { background: var(--color-danger-bg); color: var(--color-danger-dark-text); }
.cam-range-preview {
    margin-top: 0.5rem; font-size: 0.82rem; color: var(--ink-700);
    max-height: 320px; overflow-y: auto; padding: 0.4rem;
    background: var(--surface); border-radius: 4px; border: 1px solid var(--gray-200);
}
.cam-range-preview .cam-prev-item {
    padding: 0.2rem 0.4rem;
    border-bottom: 1px dotted var(--gray-200);
    display: flex; gap: 0.5rem;
}
.cam-range-preview .cam-prev-item:last-child { border-bottom: none; }
.cam-range-preview .cam-prev-code {
    font-family: var(--font-mono); color: var(--brand-primary-text);
    flex-shrink: 0; min-width: 100px;
}
.cam-range-preview .cam-prev-name {
    flex: 1;
}
.cam-range-apply {
    margin-top: 0.6rem; padding: 0.5rem 1rem;
    background: var(--color-success); color: white; border: none; border-radius: 5px;
    font-weight: 700; cursor: pointer; width: 100%;
}
.cam-range-apply:hover { background: var(--color-success); }

/* === Sub-screens === */
.cam-sub { display: none; padding: 1.2rem; }
.cam-sub.cam-sub-active { display: block; }
.cam-sub h4 { margin: 0.2rem 0 0.8rem 0; color: var(--brand-primary-text); font-size: 1rem; }
.cam-back {
    background: transparent; border: none; color: var(--brand-accent-text); cursor: pointer;
    font-weight: 600; padding: 0; font-size: 0.85rem; margin-bottom: 0.5rem;
}
.cam-back:hover { text-decoration: underline; }
.cam-sub label {
    display: block; font-weight: 600; color: var(--ink-700);
    margin: 0.5rem 0 0.3rem 0; font-size: 0.9rem;
}
.cam-sub select, .cam-sub input[type="text"] {
    width: 100%; padding: 0.5rem; border: 1px solid var(--slate-300);
    border-radius: 4px; font-family: inherit; font-size: 0.92rem;
    box-sizing: border-box; background: var(--surface);
}
.cam-actions {
    display: flex; gap: 0.5rem; justify-content: flex-end;
    margin-top: 1rem; flex-wrap: wrap;
}
/* Phase B (#482): כל overrides של כפתורי cam-actions הוסרו — מוחלפים ב-.btn-primary/.btn-secondary/.btn-danger הגלובליים. */
.cam-actions .cam-btn-link {
    padding: 0.5rem 0.95rem; border-radius: 5px; font-weight: 600;
    cursor: pointer; border: 1px solid var(--slate-300); background: var(--surface);
    color: var(--ink-700); font-size: 0.88rem; text-decoration: none;
    display: inline-block;
}
.cam-btn-link { background: var(--brand-primary-soft); color: var(--brand-primary-text); border-color: var(--brand-accent); }
.cam-btn-link:hover { background: var(--brand-primary-soft); }
.cam-hint {
    margin-top: 0.6rem; padding: 0.4rem 0.6rem; background: var(--ink-50);
    border-right: 3px solid var(--slate-400); font-size: 0.78rem; color: var(--slate-500);
    border-radius: 3px;
}
/* TAK-538 DT6 — CAM goal-impact block (AC-19/AC-20/AC-21). .cam-goal-impact
   is the container (.is-hidden, state.css, toggles it — no display rule
   needed here); .goal-impact-compact is the per-line shape, ported verbatim
   from the mockup's shared.css (a3-single-card-reassign.html/
   a3-card-actions-bulk.html) so the CAM's real block matches pixel-for-pixel.
   .warn is the mockup's own modifier (STAY); .success/.locked/.error are
   this Dev-Task's own additions for the AUTO/UNCHANGED/fetch-error states
   the mockup's static demo never showed (D-11) — same modifier pattern,
   reusing the same design-token pairs .cam-result.ok/.error already use
   two rules above. */
.cam-goal-impact .goal-impact-compact {
    display: flex; align-items: flex-start; gap: 0.5rem;
    background: var(--ink-50); border: 1px solid var(--border);
    border-radius: 0.4rem; padding: 0.6rem 0.85rem; font-size: 0.85rem;
    color: var(--ink-700); line-height: 1.55; margin-top: 0.75rem;
}
.cam-goal-impact .goal-impact-compact + .goal-impact-compact { margin-top: 0.4rem; }
.cam-goal-impact .goal-impact-compact.warn {
    background: var(--color-warning-bg); border-color: var(--color-warning-bg); color: var(--ink-700);
}
.cam-goal-impact .goal-impact-compact.success {
    background: var(--color-success-bg); border-color: var(--color-success-bg); color: var(--ink-700);
}
.cam-goal-impact .goal-impact-compact.locked {
    background: var(--ink-50); border-color: var(--border); color: var(--slate-500);
}
.cam-goal-impact .goal-impact-compact.error {
    background: var(--color-danger-bg); border-color: var(--color-danger-bg); color: var(--color-danger-dark-text);
}
.cam-goal-impact .goal-impact-compact .glyph { flex: none; font-size: 1rem; }
.cam-dist-status {
    margin-top: 0.5rem; padding: 0.5rem; background: var(--slate-100);
    border-radius: 4px; font-size: 0.85rem; color: var(--slate-600);
}
.cam-dist-months {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.3rem;
    background: var(--ink-50); padding: 0.6rem; border-radius: 5px;
    margin-top: 0.3rem;
}
.cam-dist-month {
    display: flex; flex-direction: column; align-items: center;
}
.cam-dist-month label {
    margin: 0 0 2px 0 !important; font-size: 0.72rem !important;
    color: var(--slate-500) !important; font-weight: 600 !important;
}
.cam-dist-month input {
    width: 100%; padding: 0.3rem 0.2rem !important; text-align: center;
    border: 1px solid var(--slate-300); border-radius: 3px;
    font-family: var(--font-mono); font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}
.cam-dist-month input:focus { outline: 2px solid var(--brand-accent); }
.cam-dist-summary {
    display: flex; align-items: center; gap: 0.7rem;
    margin-top: 0.5rem; font-weight: 600; color: var(--brand-primary-text);
    font-size: 0.9rem; flex-wrap: wrap;
}
.cam-dist-summary #cam-dist-total {
    color: var(--color-danger-text); font-family: var(--font-mono);
}
.cam-dist-summary #cam-dist-total.ok { color: var(--color-success-text); }
.cam-dist-action {
    background: var(--brand-primary-soft); border: 1px solid var(--brand-accent); color: var(--brand-primary-text);
    padding: 0.25rem 0.7rem; border-radius: 4px; cursor: pointer;
    font-weight: 600; font-size: 0.8rem;
}
.cam-dist-action:hover { background: var(--brand-primary-soft); }
.cam-result {
    padding: 0.7rem 1.2rem; font-size: 0.88rem;
    border-top: 1px solid var(--gray-200); min-height: 1rem;
}
.cam-result.ok    { color: var(--color-success-text); background: var(--color-success-bg); }
.cam-result.error { color: var(--color-danger-dark-text); background: var(--color-danger-bg); }

/* ---- Block 4 ---- */
    /* תא מסומן (ערך הגיע משתילת שכר) */
    .salary-plant-cell { background: var(--brand-primary-soft) !important; }
    .salary-plant-cell:hover { background: var(--brand-primary-soft) !important; }
    .btn-salary-plant {
        background: var(--brand-primary-soft); border: 1px solid var(--brand-accent); border-radius: 0.3rem;
        cursor: pointer; padding: 0.2rem 0.45rem; margin-inline-end: 0.3rem;
        font-size: 0.95rem; vertical-align: middle;
    }
    /* בתאי טבלאות — הצמד את 💼 לקצה השמאלי, ליד 🔒 ו-⋮ (חל גם על תאים שאינם editable
       כדי שיופיע במקום נכון גם בעמודות תקן משרות / ביצוע משרות שאינן ניתנות לעריכה) */
    td.num > .btn-salary-plant {
        float: left;
        margin-left: 18px;  /* פנוי מקום ל-🔒 (absolute, left: 3px, רוחב ~12px) */
    }
    /* upgrade state renders the marker as <a>: same look as the <button> markers */
    a.btn-salary-plant, a.btn-salary-plant:hover { text-decoration: none; color: inherit; display: inline-block; line-height: normal; }
    .btn-salary-plant:hover { background: var(--brand-primary-soft); }
    .btn-salary-plant.stale { border-color: var(--color-warning); background: var(--color-warning-bg); }
    /* modal */
    .sdm-bg {
        display: none; position: fixed; inset: 0;
        background: rgba(0,0,0,0.45); z-index: 9000;
        align-items: center; justify-content: center;
    }
    .sdm-bg.visible { display: flex; }
    .sdm-card {
        background: var(--surface); border-radius: 0.6rem;
        width: min(760px, 94vw); max-height: 90vh;
        display: flex; flex-direction: column;
        box-shadow: 0 10px 35px rgba(0,0,0,0.25);
    }
    .sdm-header {
        padding: 1rem 1.25rem; border-bottom: 1px solid var(--gray-200);
        display: flex; justify-content: space-between; align-items: flex-start;
    }
    .sdm-title { margin: 0; font-size: 1.05rem; color: var(--brand-primary-text); }
    .sdm-close-x {
        background: none; border: none; font-size: 1.4rem; cursor: pointer;
        color: var(--slate-500); padding: 0; line-height: 1;
    }
    .sdm-meta {
        padding: 0.7rem 1.25rem; background: var(--slate-100);
        font-size: 0.88rem; color: var(--ink-700); line-height: 1.6;
    }
    .sdm-meta strong { color: var(--brand-primary-text); }
    .sdm-body { padding: 0.6rem 1.25rem 1rem; overflow: auto; }
    .sdm-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
    .sdm-table th, .sdm-table td {
        padding: 0.45rem 0.55rem; text-align: right; border-bottom: 1px solid var(--gray-200);
    }
    .sdm-table th { background: var(--ink-50); color: var(--slate-600); font-weight: 600; }
    .sdm-table tr.sdm-total td {
        font-weight: 700; color: var(--brand-primary-text);
        background: var(--brand-primary-soft); border-top: 2px solid var(--slate-300);
    }
    .sdm-table td.num {
        text-align: left; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    }
    .sdm-footer {
        padding: 0.8rem 1.25rem; border-top: 1px solid var(--gray-200); text-align: left;
    }
    .sdm-close-btn {
        padding: 0.4rem 1.1rem; background: var(--ink-100); border: 1px solid var(--ink-300);
        border-radius: 0.3rem; cursor: pointer; font-family: inherit;
    }
    .sdm-close-btn:hover { background: var(--gray-200); }
    .sdm-empty { padding: 2rem; text-align: center; color: var(--slate-500); }

/* ---- App version footer (TAK-5) — site-wide, first footer in the app.
   Tokens/values verified in the approved mockup (see
   work/TAK-5-app-version-mechanism/resources/ui/mockups/annotations.md) —
   reused verbatim, not re-derived. ---- */
.app-footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: var(--sp-sm) var(--sp-lg);
    text-align: center;
}
.app-version {
    /* Deliberately LTR-scoped per frontend.md's rule for technical/numeric
       content (version numbers, git SHAs, ISO dates) — NOT run through s(),
       agreed exception (build-identifier content, not business text). */
    direction: ltr;
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-500);
    letter-spacing: 0.01em;
}

/* ---- .field-check-row (TAK-920 DT2) — shared checkbox + label row for a
   form field, built from tokens.css values. Every disabled-with-tooltip
   dialog checkbox in the TAK-920 mockups (e.g. "add מנהל יחידה" in the
   size-change confirm dialog) uses this class; it replaces nothing yet —
   existing hand-written checkbox rows are migrated by their own Dev-Tasks,
   not here. ---- */
.field-check-row {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    font-size: var(--text-base);
    color: var(--ink-700);
}
.field-check-row input[type=checkbox] {
    width: 16px;
    height: 16px;
    accent-color: var(--brand-primary);
}
.field-check-row input[type=checkbox]:disabled {
    cursor: not-allowed;
    accent-color: var(--ink-400);
}
.field-check-row.is-disabled {
    color: var(--ink-500);
}