/* ──────────────────────────────────────────────────────
           Activity Expenses screen — compact desktop layout.
           Scoped to #activityExpensesSection so other screens
           that reuse stat-card / request-card stay untouched.
           ────────────────────────────────────────────────────── */
        #activityExpensesSection .stat-card {
            padding: 14px 16px;
            border-radius: 10px;
            gap: 12px;
            background: #ffffff;
            border: 1px solid #e6e9f0;
            box-shadow: none;
        }
        #activityExpensesSection .stat-card .stat-icon {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            font-size: 16px;
            background: #f1f5f9 !important;
            color: #64748b !important;
        }
        /* בוררים על svg ולא על .stat-icon-svg: הקוביות עברו לערכת
           האייקונים של המערכת, שאינה מוסיפה את המחלקה ההיא, ולכן הכלל
           הקודם לא חל על אף אחת מהן. */
        #activityExpensesSection .stat-card .stat-icon svg {
            width: 18px;
            height: 18px;
        }
        #activityExpensesSection .stat-card .stat-label {
            font-size: 12px;
            margin-bottom: 2px;
        }
        #activityExpensesSection .stat-card .stat-value {
            font-size: 20px;
            line-height: 1.15;
        }

        /* Expense list — grid rows (handoff 1b) */
        #activityExpensesSection .content-card {
            padding: 16px 18px;
        }
        #activityExpensesSection .expenses-list-card { padding: 0; }
        /* סרגל בחירה דביק בראש הרשימה */
        #activityExpensesSection .exp-select-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            padding: 9px 18px;
            background: #f8fafc;
            border-bottom: 1px solid #eef1f6;
            position: sticky;
            top: 0;
            z-index: 2;
        }
        /* קישורי בחירה = כפתורים נגישים למקלדת, מעוצבים כטקסט */
        #activityExpensesSection .exp-quick-link {
            background: none;
            border: none;
            padding: 0;
            font-family: inherit;
            cursor: pointer;
        }
        #activityExpensesSection .exp-quick-link:hover { text-decoration: underline; }
        #activityExpensesSection .exp-quick-link:focus-visible {
            outline: 2px solid #2563eb;
            outline-offset: 2px;
            border-radius: 3px;
        }
        /* גלילה אופקית של הטבלה במסכים צרים, בלי לשבור את שאר העמוד */
        #activityExpensesSection .exp-scroll { overflow-x: auto; }
        #activityExpensesSection .exp-col-head,
        #activityExpensesSection .exp-row {
            display: grid;
            gap: 10px;
            align-items: center;
            min-width: 620px;
        }
        #activityExpensesSection .exp-col-head {
            padding: 8px 18px;
            border-bottom: 1px solid #eef1f6;
            font-size: 11px;
            font-weight: 600;
            color: #5a6779;
        }
        #activityExpensesSection .exp-row {
            padding: 12px 18px;
            border-bottom: 1px solid #f1f5f9;
            cursor: pointer;
            transition: background .12s;
        }
        #activityExpensesSection .exp-row:last-child { border-bottom: none; }
        #activityExpensesSection .exp-row:hover:not(.selected) { background: #f8fafc; }
        #activityExpensesSection .exp-row.selected { background: #eff6ff; }
        #activityExpensesSection .exp-row.sent { border-right: 3px solid #10b981; }
        /* אייקון מחיקה עדין — לא הפריט הרועש בשורה */
        #activityExpensesSection .exp-del-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            background: none;
            border: none;
            padding: 4px;
            cursor: pointer;
        }
        #activityExpensesSection .exp-del-btn svg { transition: stroke .12s; }
        #activityExpensesSection .exp-del-btn:hover svg { stroke: #b91c1c; }

        /* Activity cards (handoff 1e) */
        #activitiesGrid .activity-card {
            padding: 16px 18px 12px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            border: 1px solid #e6e9f0;
            cursor: pointer;
            transition: var(--card-accent-transition);
        }
        #activitiesGrid .activity-card:hover {
            border-color: var(--card-accent-soft);
        }
        #activitiesGrid .activity-gear {
            background: none;
            border: none;
            padding: 2px;
            cursor: pointer;
            display: flex;
            border-radius: 6px;
            transition: background .12s;
        }
        #activitiesGrid .activity-gear:hover { background: #f1f5f9; }
        #activitiesGrid .activity-gear:hover svg { stroke: #475569; }
        #activitiesGrid .activity-report-link {
            background: none;
            border: none;
            padding: 0;
            font-family: inherit;
            cursor: pointer;
        }
        #activitiesGrid .activity-report-link:hover { text-decoration: underline; }
        #activitiesGrid .activity-report-link:focus-visible {
            outline: 2px solid #2563eb;
            outline-offset: 2px;
            border-radius: 3px;
        }

        /* תפריט "אקסל" מרוכז */
        .excel-dropdown { position: relative; display: inline-flex; }
        .excel-dropdown > summary {
            list-style: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .excel-dropdown > summary::-webkit-details-marker { display: none; }
        .excel-dropdown[open] > summary { background: #eef2f7; }
        .excel-menu {
            position: absolute;
            top: calc(100% + 6px);
            inset-inline-start: 0;
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            box-shadow: 0 8px 20px rgba(15, 23, 42, .12);
            padding: 6px;
            display: flex;
            flex-direction: column;
            min-width: 160px;
            z-index: 30;
        }
        .excel-menu-item {
            padding: 7px 10px;
            font-size: 12.5px;
            color: #334155;
            border: none;
            background: none;
            border-radius: 6px;
            cursor: pointer;
            font-family: inherit;
            text-align: start;
            display: flex;
            align-items: center;
            gap: 7px;
            white-space: nowrap;
        }
        .excel-menu-item:hover { background: #f6f8fa; }

        /* Collapsible permissions guide on Settings */
        details.permissions-guide { padding: 14px 18px; }
        details.permissions-guide > summary {
            list-style: none;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
        }
        details.permissions-guide > summary::-webkit-details-marker { display: none; }
        details.permissions-guide .permissions-guide-chevron {
            transition: transform .2s ease;
            flex-shrink: 0;
        }
        details.permissions-guide[open] .permissions-guide-chevron { transform: rotate(180deg); }
        details.permissions-guide[open] { padding: 18px; }

        /* חיצי ה-spinner וביטול הגלגלת עברו לכלל גלובלי ב-base.css ובקובץ
           number-input-guard.js. אין כאן מחלקת no-spin: שדה שצריך להצטרף
           לרשימה הוא שדה שיישכח מהרשימה הבאה. */

        /* כפתור פח קומפקטי לשורה בטבלה */
        .btn-row-remove {
            background: transparent;
            color: #b91c1c;
            border: 1px solid #fecaca;
            padding: 5px 7px;
            border-radius: 6px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background .15s, border-color .15s, color .15s;
        }
        .btn-row-remove:hover {
            background: #fef2f2;
            border-color: #fca5a5;
            color: #991b1b;
        }

        /* Analytics screen */
        .analytics-kpi-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
            gap: 12px;
            margin-bottom: 16px;
        }
        .analytics-kpi {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 14px 16px;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
        }
        .analytics-kpi-label { font-size: 12px; color: #64748b; margin-bottom: 6px; }
        .analytics-kpi-value { font-size: 22px; font-weight: 700; color: #0f172a; line-height: 1.1; }
        .analytics-kpi-sub { font-size: 11px; color: #5a6779; margin-top: 4px; }
        .analytics-kpi-warn { border-color: #fcd34d; }
        .analytics-kpi-warn .analytics-kpi-value { color: #92400e; }
        .analytics-kpi-danger { border-color: #fca5a5; }
        .analytics-kpi-danger .analytics-kpi-value { color: #991b1b; }

        .analytics-charts-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-bottom: 16px;
        }
        @media (max-width: 900px) {
            .analytics-charts-row { grid-template-columns: 1fr; }
        }
        /* Same reason as .main-content: grid items default to min-width:auto,
           so a table wider than its column widens the page instead of scrolling. */
        .analytics-charts-row > * { min-width: 0; }

        /* גובה חסום כדי שהכותרת הדביקה שמגיעה מ-.data-table תיצמד למשהו. */
        .analytics-table-wrap { overflow: auto; max-height: 420px; }
        #analyticsStuckTable { overflow-x: auto; }
        .analytics-table { width: 100%; border-collapse: collapse; font-size: 13px; }
        .analytics-table th, .analytics-table td {
            padding: 8px 10px; text-align: start; border-bottom: 1px solid #f1f5f9;
        }
        .analytics-table th { background: #f8fafc; color: #475569; font-weight: 600; font-size: 12px; }
        .analytics-table td.num { font-variant-numeric: tabular-nums; }
        .analytics-empty { padding: 20px; text-align: center; color: #5a6779; font-size: 13px; }

        /* Reports & Analytics — shared filter bar, states and cards.
           Added with the reports UX pass: the detailed view had no loading,
           error or empty state at all, so a failed refresh silently left the
           previous filter's charts on screen. */
        .reports-filter-bar {
            margin-bottom: 16px;
            padding: 14px 16px;
        }
        .reports-filter-fields {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            align-items: end;
        }
        .reports-filter-field { flex: 1 1 190px; min-width: 0; }
        .reports-filter-field .form-select,
        .reports-filter-field .form-input { width: 100%; padding: 8px 10px; }
        .reports-filter-actions { display: flex; gap: 8px; flex: 0 0 auto; }
        @media (max-width: 640px) {
            .reports-filter-field { flex: 1 1 100%; }
            .reports-filter-actions { width: 100%; }
            .reports-filter-actions .btn { flex: 1 1 0; justify-content: center; }
        }

        .reports-scope-row {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }
        .reports-scope-note {
            font-size: 12px;
            color: #5a6779;
            min-width: 0;
        }

        .reports-warnings { margin-bottom: 12px; display: grid; gap: 8px; }
        .reports-warning {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            padding: 10px 14px;
            background: #fffbeb;
            border: 1px solid #fcd34d;
            border-radius: 8px;
            color: #92400e;
            font-size: 13px;
            line-height: 1.5;
        }

        .reports-error-panel {
            padding: 22px;
            text-align: center;
            background: #fef2f2;
            border: 1px solid #fecaca;
            border-radius: 10px;
            color: #991b1b;
        }
        .reports-error-title { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
        .reports-error-text { font-size: 13px; margin-bottom: 12px; color: #7f1d1d; }

        .reports-empty-panel {
            padding: 24px;
            text-align: center;
            background: #f8fafc;
            border: 1px dashed #cbd5e1;
            border-radius: 8px;
            color: #475569;
        }

        /* Loading skeleton. A blank pause reads as a filter that did not
           work, and the user clicks again. */
        .reports-loading { position: relative; }
        .reports-loading-text {
            display: block;
            text-align: center;
            color: #64748b;
            font-size: 13px;
            margin-top: 10px;
        }
        .reports-skeleton-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
            gap: 12px;
            margin-bottom: 16px;
        }
        .reports-skeleton {
            background: linear-gradient(90deg, #eef2f7 25%, #e2e8f0 37%, #eef2f7 63%);
            background-size: 400% 100%;
            border-radius: 10px;
            animation: reports-shimmer 1.4s ease infinite;
        }
        .reports-skeleton-kpi { height: 86px; }
        .reports-skeleton-chart { height: 240px; }
        @keyframes reports-shimmer {
            0% { background-position: 100% 50%; }
            100% { background-position: 0 50%; }
        }
        @media (prefers-reduced-motion: reduce) {
            .reports-skeleton { animation: none; }
        }

        .reports-card-title {
            font-size: 15px;
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 4px;
        }
        .reports-card-hint {
            font-size: 12px;
            color: #5a6779;
            margin: 0 0 12px;
            line-height: 1.5;
        }
        .reports-card-hint:empty { margin: 0; }

        .reports-chart-box { position: relative; height: 260px; }
        .reports-chart-box-lg { height: 300px; }
        .reports-chart-box-xl { height: 340px; }
        .reports-chart-box > canvas { max-width: 100%; }
        .reports-chart-empty {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* An empty chart gets a sentence, not a blank rectangle. Created by
           reports-charts.js next to the canvas it belongs to. */
        .reports-chart-box > [data-chart-empty] {
            position: absolute;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
        }
        .reports-chart-box > [data-chart-empty].is-visible { display: flex; }

        /* min(100%, …) ולא רוחב קבוע: כך העמודה מצטמצמת עם המסך במקום לגלוש
           ממנו, והמסך הצר מקבל טור אחד בלי media query. הרוחב נבחר כדי
           שארבעת הגרפים הרגילים יסתדרו שניים בשורה, אחרת הרביעי נשאר לבד. */
        .reports-charts-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        .reports-charts-grid > * { min-width: 0; }
        .reports-card-wide { grid-column: 1 / -1; }

        .analytics-kpi-rule {
            font-size: 11px;
            color: #64748b;
            margin-top: 6px;
            padding-top: 6px;
            border-top: 1px solid #f1f5f9;
            line-height: 1.45;
        }

        .analytics-badge {
            display: inline-block;
            padding: 2px 9px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 700;
        }
        .analytics-badge-warn { background: #fef3c7; color: #92400e; }
        .analytics-badge-danger { background: #fee2e2; color: #991b1b; }

        .analytics-row-link { cursor: pointer; }
        .analytics-row-link:hover { background: #f8fafc; }
        .analytics-row-link:focus-visible {
            outline: 2px solid #4f46e5;
            outline-offset: -2px;
        }

        /* Numbers, currency and dates keep their own direction inside Hebrew
           text. base.css already isolates .num cells; these are the values
           that sit outside a table cell. Presentation only, values unchanged. */
        #reportsSection .analytics-kpi-value,
        #reportsSection .analytics-kpi-sub,
        #reportsSection .stat-value,
        #reportsSection .reports-scope-note {
            unicode-bidi: isolate;
        }

        .dt-totals td {
            background: #f1f5f9;
            font-weight: 700;
            color: #0f172a;
            border-top: 2px solid #cbd5e1;
        }

        /* Reports & Analytics — sub-tabs (underline style, no pills) */
        .reports-subnav {
            display: flex;
            gap: 4px;
            margin-top: 14px;
            border-bottom: 1px solid #e2e8f0;
        }
        .reports-subtab {
            background: transparent;
            border: none;
            padding: 10px 18px;
            font-size: 14px;
            color: #64748b;
            cursor: pointer;
            font-family: inherit;
            font-weight: 500;
            border-bottom: 2px solid transparent;
            margin-bottom: -1px;
            transition: color .15s, border-color .15s;
        }
        .reports-subtab:hover { color: #1e293b; }
        .reports-subtab.active {
            color: #4f46e5;
            border-bottom-color: #4f46e5;
            font-weight: 600;
        }

        /* ═══════════════════════════════════════════════════════════════════
           שדרוג סיידבר + טופס "בקשה חדשה"
           דפוסים: Carbon UI Shell · USWDS Side Navigation · USWDS Combo Box ·
                   React Aria ComboBox · Carbon Forms Pattern
           ═══════════════════════════════════════════════════════════════════ */

        /* ── Form sections ─────────────────────────────────────────────────── */
        .form-section {
            background: #ffffff;
            border: 1px solid #e6e9f0;
            border-radius: 10px;
            padding: 22px 24px;
            margin-bottom: 16px;
            box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
        }
        .form-section__head {
            margin-bottom: 18px;
            padding-bottom: 14px;
            border-bottom: 1px solid #eef1f6;
        }
        .form-section__title {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 0;
            font-size: 15px;
            font-weight: 700;
            color: #1e293b;
        }
        .form-section__divider {
            height: 1px;
            background: #eef1f6;
            margin: 18px 0;
        }
        .form-help {
            font-size: 12.5px;
            line-height: 1.5;
            color: #64748b;
            margin-top: 6px;
        }
        .req {
            color: #dc2626;
            margin-inline-start: 2px;
            font-weight: 600;
        }

        /* ── Inline validation (דפוס USWDS) ────────────────────────────────── */
        .input-invalid {
            border-color: #dc2626 !important;
            background: #fffafa !important;
            box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
        }
        .field-error {
            margin-top: 6px;
            color: #b91c1c;
            font-size: 12px;
            line-height: 1.5;
            font-weight: 500;
        }

        /* ── ComboBox (USWDS Combo Box / React Aria ComboBox) ──────────────── */
        .combobox {
            position: relative;
        }
        .combobox__field {
            position: relative;
            display: block;
        }
        .combobox__input {
            width: 100%;
            padding-inline-end: 38px;
            cursor: text;
        }
        .combobox__toggle {
            position: absolute;
            inset-inline-end: 6px;
            top: 50%;
            transform: translateY(-50%);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            padding: 0;
            border: none;
            background: transparent;
            color: #64748b;
            border-radius: 6px;
            cursor: pointer;
            transition: color 0.15s, background 0.15s, transform 0.18s;
        }
        .combobox__toggle:hover {
            color: #334155;
            background: #f1f5f9;
        }
        .combobox.is-open .combobox__toggle {
            color: #4f46e5;
            transform: translateY(-50%) rotate(180deg);
        }
        .combobox__listbox {
            position: absolute;
            z-index: 50;
            inset-inline: 0;
            top: calc(100% + 4px);
            margin: 0;
            padding: 4px;
            list-style: none;
            max-height: 260px;
            overflow-y: auto;
            background: #ffffff;
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
        }
        .combobox__listbox[hidden] {
            display: none;
        }
        .combobox__option {
            position: relative;
            padding: 9px 12px;
            padding-inline-end: 32px;
            border-radius: 6px;
            font-size: 14px;
            color: #0f172a;
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /* שני צירים נפרדים: הרקע הוא הסמן (עכבר או מקלדת), הווי הוא הבחירה.
           הרקע לבדו הופיע גם על הנבחר וגם על מי שריחפו עליו, ואי אפשר היה
           להבחין ביניהם.
           ואין כאן :hover — הוא היה מדליק פריט שני לצד זה שהמקלדת עומדת עליו
           ברגע שהעכבר נשאר במקומו וגוללים בחצים. ה-mousemove ב-combobox.js
           מעביר את is-active, ולכן יש בדיוק סמן אחד. */
        .combobox__option.is-active {
            background: #eef4fe;
            background: color-mix(in srgb, var(--brand-primary, #2563eb) 8%, #ffffff);
            color: var(--brand-primary, #2563eb);
        }
        .combobox__option.is-selected {
            font-weight: 600;
            color: var(--brand-primary, #2563eb);
        }
        .combobox__option.is-selected::after {
            content: "";
            position: absolute;
            inset-inline-end: 11px;
            top: 50%;
            width: 14px;
            height: 14px;
            margin-top: -7px;
            background-color: currentColor;
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
        }
        .combobox__empty {
            padding: 12px;
            font-size: 13px;
            color: #64748b;
            text-align: center;
            list-style: none;
        }
        /* ה-<select> הנטיב נשאר כמקור-אמת אך מוסתר ויזואלית (sr-only) */
        .combobox__native {
            position: absolute !important;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
            border: 0;
        }

        /* כשרשימת ה-ComboBox פתוחה — מרימים את ה-section מעל ה-sections הבאים */
        .form-section:has(.combobox.is-open) {
            position: relative;
            z-index: 20;
        }

        /* ── Supplier search (combobox קיים) ───────────────────────────────── */
        .supplier-search-wrap {
            position: relative;
        }
        .supplier-search-wrap .form-input {
            padding-inline-end: 40px;
        }
        .supplier-search-clear {
            position: absolute;
            inset-inline-end: 8px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: #5a6779;
            font-size: 18px;
            line-height: 1;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
            transition: color 0.15s, background 0.15s;
        }
        .supplier-search-clear:hover {
            color: #dc2626;
            background: #f1f5f9;
        }

        /* ── Text button (ביטול) ───────────────────────────────────────────── */
        .btn-text {
            background: none;
            border: none;
            color: #64748b;
            font-family: inherit;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            padding: 10px 12px;
            border-radius: 8px;
            transition: color 0.15s, background 0.15s;
        }
        .btn-text:hover {
            color: #1e293b;
            background: #f1f5f9;
        }

        /* ── Sidebar account switcher (Carbon UI Shell) ────────────────────── */
        .account-card {
            display: flex;
            align-items: center;
            gap: 11px;
            width: 100%;
            padding: 9px 10px;
            margin-bottom: 10px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 10px;
            cursor: pointer;
            text-align: start;
            font-family: inherit;
            color: inherit;
            transition: background 0.15s, border-color 0.15s;
        }
        .account-card:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.16);
        }
        .account-card .user-avatar {
            width: 34px;
            height: 34px;
            font-size: 14px;
        }
        .account-card__meta {
            display: flex;
            flex-direction: column;
            min-width: 0;
            line-height: 1.3;
        }
        .account-card .user-name {
            color: #ffffff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .sidebar-signout {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            padding: 9px 12px;
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 8px;
            color: rgba(226, 232, 240, 0.92);
            font-family: inherit;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s, color 0.15s;
        }
        .sidebar-signout:hover {
            background: rgba(239, 68, 68, 0.14);
            border-color: rgba(239, 68, 68, 0.4);
            color: #fecaca;
        }
        .sidebar-signout__icon {
            flex: 0 0 16px;
        }

        /* ── Mobile drawer (USWDS side-nav התנהגות מובייל) ─────────────────── */
        .mobile-topbar {
            display: none;
        }
        .sidebar-overlay {
            position: fixed;
            inset: 0;
            z-index: 95;
            background: rgba(15, 23, 42, 0.45);
            backdrop-filter: blur(2px);
        }

        @media (max-width: 768px) {
            .mobile-topbar {
                display: flex;
                align-items: center;
                gap: 10px;
                position: fixed;
                top: 0;
                inset-inline: 0;
                height: 56px;
                padding: 0 14px;
                background: #2f3e56;
                color: #ffffff;
                z-index: 90;
                box-shadow: 0 2px 8px rgba(15, 23, 42, 0.16);
            }
            .mobile-nav-toggle {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 40px;
                height: 40px;
                background: transparent;
                border: none;
                color: #ffffff;
                border-radius: 8px;
                cursor: pointer;
            }
            .mobile-topbar__title {
                font-size: 15px;
                font-weight: 700;
            }

            /* Sidebar הופך למגירה מצד ימין (RTL) */
            .sidebar {
                position: fixed;
                top: 0;
                right: 0;
                left: auto;
                bottom: 0;
                width: 280px;
                max-width: 86vw;
                height: 100%;
                padding: 16px 0 0;
                transform: translateX(100%);
                box-shadow: -8px 0 28px rgba(2, 6, 23, 0.3);
                backdrop-filter: none;
                z-index: 100;
            }
            .sidebar.mobile-open {
                transform: translateX(0);
            }

            .sidebar-header-row {
                display: flex;
            }
            .sidebar-toggle-btn {
                display: none;
            }

            /* ביטול השפעות מצב "מקופל" של הדסקטופ בתוך המגירה */
            .sidebar.collapsed {
                width: 280px;
                max-width: 86vw;
            }
            .sidebar.collapsed .nav-label {
                opacity: 1;
                width: auto;
            }
            .sidebar.collapsed .sidebar-header {
                display: flex;
            }
            .sidebar.collapsed .sidebar-header h2 {
                opacity: 1;
                max-height: none;
            }
            .sidebar.collapsed .sidebar-footer {
                display: block;
            }
            .sidebar.collapsed .sidebar-item {
                justify-content: flex-start;
                padding: 11px 18px;
                gap: 11px;
            }

            .sidebar-menu {
                display: block;
                flex: 1;
                overflow-y: auto;
                overflow-x: hidden;
                padding: 4px 0;
            }
            .sidebar-item {
                padding: 11px 18px;
                border-radius: 0;
                border: none;
                border-inline-start: 3px solid transparent;
                white-space: normal;
                flex: 0 0 auto;
                font-size: 14px;
            }
            .sidebar-item.active {
                border-inline-start-color: #93c5fd;
            }
            .sidebar-divider {
                display: block;
            }
            .sidebar-footer {
                display: block;
            }

            .main-content {
                margin-right: 0 !important;
                padding: 72px 12px 16px;
            }

            .form-section {
                padding: 16px 14px;
                margin-bottom: 12px;
            }
            .request-submit-bar {
                flex-wrap: wrap;
            }
        }

        /* ═══════════════════════════════════════════════════════════════════
           v2 — Sidebar בהיר (shadcn/ui) · שדות בסגנון Atlassian Textfield
           צבע הארגון (--brand-primary, מוזרק ע"י branding.js) = accent בלבד.
           בלוק אחרון בקובץ — דורס את גרסת ה-dark הקודמת.
           ═══════════════════════════════════════════════════════════════════ */
        .sidebar {
            background: #f7f8f9;
            color: #475569;
            border-inline-end: 1px solid #e8eaed;
        }
        .sidebar-header-row { border-bottom-color: #eceef1; }
        .sidebar-header h2 { color: #1e293b; }
        .sidebar-toggle-btn { color: #5a6779; }
        .sidebar-toggle-btn:hover { color: #1e293b; background: #eef1f5; }
        .sidebar-menu { scrollbar-color: #cbd5e1 transparent; }
        .sidebar-menu::-webkit-scrollbar-thumb { background: #cbd5e1; }
        .sidebar-divider { background: #e8eaed; }
        .sidebar-item { color: #475569; }
        .sidebar-item:hover { background: #eceef1; color: #1e293b; }
        .sidebar-item.active {
            background: color-mix(in srgb, var(--brand-primary, #4f46e5) 10%, transparent);
            color: var(--brand-primary, #4f46e5);
            font-weight: 600;
            border-inline-start-color: var(--brand-primary, #4f46e5);
        }
        .sidebar-item.active .nav-icon { color: var(--brand-primary, #4f46e5); }
        .sidebar-item:focus-visible,
        .sidebar-toggle-btn:focus-visible,
        .account-card:focus-visible,
        .sidebar-signout:focus-visible,
        .mobile-nav-toggle:focus-visible {
            outline-color: var(--brand-primary, #4f46e5);
        }
        .sidebar-footer { border-top-color: #e8eaed; }

        .account-card { background: #ffffff; border-color: #e5e7eb; }
        .account-card:hover { background: #f8fafc; border-color: #d6dae1; }
        .account-card .user-name { color: #1e293b; }
        .user-role { color: #64748b; }
        .sidebar-signout { border-color: #e5e7eb; color: #475569; }
        .sidebar-signout:hover { background: #fef2f2; border-color: #fca5a5; color: #dc2626; }

        /* 9b — שורת משתמש: פרופיל + יציאה כאייקון-כפתור לצידו */
        .sidebar-user-row { display: flex; align-items: center; gap: 8px; }
        .sidebar-user-row .account-card { flex: 1; min-width: 0; margin-bottom: 0; }
        .sidebar-user-row .sidebar-signout {
            flex: 0 0 auto;
            width: 38px;
            height: 38px;
            padding: 0;
            gap: 0;
        }

        .sidebar-entity-chip { background: #f8fafc; border-color: #e5e7eb; }
        .sidebar-entity-chip:hover { background: #eef1f5; border-color: #d6dae1; }
        .sec-icon {
            background: color-mix(in srgb, var(--brand-primary, #4f46e5) 14%, transparent);
            color: var(--brand-primary, #4f46e5);
        }
        .sec-label { color: #5a6779; }
        .sec-name { color: #1e293b; }
        .sec-switch-icon { color: #5a6779; }
        .sidebar-entity-chip:hover .sec-switch-icon { color: #475569; }

        .mobile-topbar {
            background: #ffffff;
            color: #1e293b;
            border-bottom: 1px solid #e8eaed;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
        }
        .mobile-nav-toggle { color: #475569; }

        /* ── Form fields — Atlassian Textfield ────────────────────────────── */
        .form-input,
        .form-select,
        .form-textarea {
            padding: 9px 12px;
            border: 1px solid #dfe1e6;
            border-radius: 6px;
            background: #fafbfc;
        }
        .form-input:hover:not(:focus):not(.input-invalid),
        .form-select:hover:not(:focus),
        .form-textarea:hover:not(:focus):not(.input-invalid) {
            background: #f4f5f7;
        }
        .form-input:focus,
        .form-select:focus,
        .form-textarea:focus {
            border-color: var(--brand-primary, #4f46e5);
            background: #ffffff;
            box-shadow: 0 0 0 1px var(--brand-primary, #4f46e5);
        }
        /* שמירת מקום ל-chevron/× אחרי דריסת shorthand ה-padding שלמעלה */
        .combobox__input { padding-inline-end: 38px; }
        .supplier-search-wrap .form-input { padding-inline-end: 40px; }

        /* ═══════════════════════════════════════════════════════════════════
           v3 — פחות "קופסאות" בעמוד "בקשה חדשה":
           כותרת עמוד נקייה (בלי כרטיס), הטופס כמשטח לבן אחד, וסקשנים שטוחים
           (כותרת + קו מפריד) במקום שלושה כרטיסים.
           ═══════════════════════════════════════════════════════════════════ */
        #newRequestSection .top-bar {
            background: transparent;
            box-shadow: none;
            border-radius: 0;
            padding: 4px 0 0;
            margin-bottom: 18px;
        }
        #newRequestSection .page-title {
            font-size: 26px;
            letter-spacing: -0.01em;
        }

        #newRequestSection #requestForm {
            background: #ffffff;
            border: 1px solid #e6e9f0;
            border-radius: 12px;
            padding: 24px 28px 20px;
        }
        .form-section {
            background: transparent;
            border: none;
            box-shadow: none;
            border-radius: 0;
            padding: 0;
            margin-bottom: 26px;
        }
        .form-section:last-of-type {
            margin-bottom: 8px;
        }

        @media (max-width: 768px) {
            #newRequestSection #requestForm {
                padding: 16px 14px 12px;
            }
            .form-section {
                padding: 0;
                margin-bottom: 20px;
            }
        }

        /* תיבת תוצאות ספק ריקה — לא להציג קופסה ריקה */
        #requestSupplierResults:empty { display: none; }

        /* ═══ v5 — ליטוש טיפוגרפיה ומבנה כותרת הסיידבר (shadcn) ═══ */
        .sidebar-header {
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            gap: 10px;
            text-align: start;
            padding: 6px 14px 14px;
        }
        .sidebar-logo {
            width: 30px;
            height: 30px;
            margin-bottom: 0;
            padding: 2px;
            border-radius: 8px;
            box-shadow: none;
            border: 1px solid #e5e7eb;
        }
        .sidebar-header h2 {
            font-size: 14px;
            font-weight: 600;
            color: #1e293b;
            line-height: 1.2;
            width: auto;
            flex: 1;
            min-width: 0;
        }
        .sidebar-item {
            font-size: 13.5px;
            color: #3f4756;
            padding-top: 8px;
            padding-bottom: 8px;
        }
        .account-card .user-name { font-size: 13.5px; }
        .user-role { font-size: 11px; }

        /* ═══ v6 — דאשבורד: כותרת נקייה + כרטיסי KPI שטוחים ומרוסנים ═══ */
        #dashboardSection .top-bar {
            background: transparent;
            box-shadow: none;
            border-radius: 0;
            padding: 4px 0 10px 72px;
            margin-bottom: 16px;
        }
        #dashboardSection .page-title {
            font-size: 26px;
            letter-spacing: -0.01em;
        }

        #kpiGrid .stat-card, #activitiesOverviewStats .stat-card {
            background: #ffffff;
            border: 1px solid #e6e9f0;
            border-radius: 12px;
            box-shadow: none;
            padding: 16px;
            align-items: flex-start;
            gap: 12px;
        }
        #kpiGrid .stat-card.clickable:hover, #activitiesOverviewStats .stat-card.clickable:hover {
            transform: none;
            box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
            border-color: #d6dae1;
        }
        #kpiGrid .stat-icon, #activitiesOverviewStats .stat-icon {
            width: 36px;
            height: 36px;
            border-radius: 9px;
            background: #f1f5f9;
            color: #64748b;
            font-size: 0;
        }
        #kpiGrid .stat-icon-svg, #activitiesOverviewStats .stat-icon-svg {
            width: 18px;
            height: 18px;
        }
        #kpiGrid .stat-label, #activitiesOverviewStats .stat-label {
            font-size: 12.5px;
            color: #64748b;
            font-weight: 500;
            margin-bottom: 6px;
        }
        #kpiGrid .stat-value, #activitiesOverviewStats .stat-value {
            font-size: 26px;
            font-weight: 700;
            color: #1e293b;
            line-height: 1.1;
        }
        #kpiGrid #budgetStat, #activitiesOverviewStats #budgetStat {
            font-size: 20px;
        }
        #kpiGrid .stat-sub, #activitiesOverviewStats .stat-sub {
            font-size: 11.5px;
            color: #5a6779;
            margin-top: 7px;
        }
        #kpiGrid .stat-sub strong, #activitiesOverviewStats .stat-sub strong {
            color: #475569;
            font-weight: 700;
        }
        #kpiGrid .stat-trend:not(:empty)::before, #activitiesOverviewStats .stat-trend:not(:empty)::before {
            content: "·";
            margin: 0 6px;
            color: #cbd5e1;
        }

        /* ═══ v7 — רשימות הדאשבורד: שורות נקיות + badge עדין ═══ */
        .dashboard-list .alert-card {
            background: transparent;
            border-radius: 6px;
            padding: 9px 11px;
        }
        .dashboard-list .alert-card:hover {
            background: #f6f8fa;
        }
        .dashboard-list .alert-title {
            color: #1e293b;
        }
        .dashboard-list .alert-text {
            color: #64748b;
        }
        .dashboard-list .request-card {
            background: #ffffff;
            border: 1px solid #eef1f6;
            border-radius: 8px;
            padding: 12px 14px;
            box-shadow: none;
        }
        .dashboard-list .request-card:hover {
            border-color: #d6dae1;
            box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
        }
        .dashboard-list .status-badge {
            border-right: 0 !important;
            border-radius: 6px;
            padding: 3px 9px;
        }

        /* ═══ v8 — "כל הבקשות" / "הבקשות שלי": כרטיסים קלים + badge עדין ═══ */
        #allRequestsList .request-card,
        #myRequestsList .request-card {
            background: #ffffff;
            border: 1px solid #eef1f6;
            border-radius: 10px;
            padding: 14px 16px;
            box-shadow: none;
        }
        #allRequestsList .request-card:hover,
        #myRequestsList .request-card:hover {
            border-color: #d6dae1;
            box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
        }
        #allRequestsList .request-title,
        #myRequestsList .request-title {
            font-size: 15px;
        }
        #allRequestsList .status-badge,
        #myRequestsList .status-badge {
            border-right: 0 !important;
            border-radius: 6px;
            padding: 3px 9px;
        }
        /* הסרת הקופסה העוטפת — הכרטיסים יושבים על רקע העמוד ובולטים */
        .content-card:has(> #allRequestsList),
        .content-card:has(> #myRequestsList) {
            background: transparent;
            box-shadow: none;
            border: none;
            padding: 0;
        }
        /* כותרת/סרגל נקיים (כמו הדאשבורד) */
        #allRequestsSection .top-bar,
        #myRequestsSection .top-bar {
            background: transparent;
            box-shadow: none;
            border-radius: 0;
            padding: 4px 0 12px 72px;
            margin-bottom: 12px;
        }
        #allRequestsSection .page-title,
        #myRequestsSection .page-title {
            font-size: 24px;
        }

        /* ═══ v9/v11 — כפתורים: רענון (אפור ניטרלי מאופק + חצי סיבוב) + חיפוש (Geist input) ═══ */
        /* Refresh: אפור ניטרלי כמו btn-secondary — מאופק, לא צבעוני; ב-hover חצי סיבוב */
        .btn-refresh {
            background: #f1f5f9;
            color: #475569;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 8px 15px;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0;
            box-shadow: none;
        }
        .btn-refresh::after {
            content: none;
        }
        .btn-refresh:hover {
            background: #e2e8f0;
            border-color: #cbd5e1;
            box-shadow: none;
            transform: none;
        }
        .btn-refresh:active {
            transform: translateY(0.5px);
            box-shadow: none;
        }
        .btn-refresh .refresh-icon {
            transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .btn-refresh:hover .refresh-icon {
            transform: rotate(180deg);
            animation: none;
        }

        /* Global search: נראה ומתנהג כמו Geist input */
        #globalSearchBtn {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
            min-width: 220px;
            padding: 7px 12px;
            background: #ffffff;
            color: #5a6779;
            border: 1px solid #dfe1e6;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 500;
        }
        #globalSearchBtn:hover {
            border-color: #c7ccd4;
            background: #ffffff;
        }
        #globalSearchBtn .gsearch-label {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        #globalSearchBtn svg {
            color: #5a6779;
        }
        #globalSearchBtn kbd {
            background: #ffffff;
            color: #64748b;
            border: 1px solid #dfe1e6;
            border-radius: 5px;
            padding: 1px 6px;
            font-size: 10px;
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
        }

        /* ═══ v14 — Chart tooltip בסגנון shadcn/Tremor (כרטיס לבן + נקודת צבע) ═══ */
        .chart-tooltip {
            position: absolute;
            transform: translate(-50%, calc(-100% - 10px));
            pointer-events: none;
            z-index: 60;
            min-width: 120px;
            padding: 8px 10px;
            background: #ffffff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
            font-size: 12px;
            opacity: 0;
            transition: opacity 0.12s ease;
            direction: rtl;
        }
        .chart-tooltip__title {
            font-weight: 600;
            color: #1e293b;
            margin-bottom: 6px;
        }
        .chart-tooltip__row {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .chart-tooltip__dot {
            width: 9px;
            height: 9px;
            border-radius: 999px;
            flex-shrink: 0;
        }
        .chart-tooltip__name {
            color: #64748b;
        }
        .chart-tooltip__val {
            margin-inline-start: auto;
            font-weight: 700;
            color: #0f172a;
            font-variant-numeric: tabular-nums;
        }

        /* ═══ v15 — מסך תקציבים: כרטיסים קומפקטיים + כותרת נקייה ═══ */
        #activitiesGrid .content-card {
            padding: 16px 18px;
            margin-bottom: 0;
        }
        #budgetDashboardSection .top-bar {
            background: transparent;
            box-shadow: none;
            border-radius: 0;
            padding: 4px 0 12px 72px;
            margin-bottom: 14px;
        }
        #budgetDashboardSection .page-title {
            font-size: 26px;
        }

        /* ═══ v16 — פירוט הוצאות פעילות: כותרת נקייה (KPI שטוח+monochrome למעלה) ═══ */
        #activityExpensesSection .top-bar {
            background: transparent;
            box-shadow: none;
            border-radius: 0;
            padding: 4px 0 12px 72px;
            margin-bottom: 12px;
        }
        #activityExpensesSection .page-title {
            font-size: 26px;
        }

/* Salary employer cost calculator */
/* ── שורת "סכום" עם כלי צדדי ──
   הכפתור עמד קודם ב-flex בלי nowrap, ובטופס צר "מחשבון עלות מעסיק" נשבר
   לשתי שורות וגרר את גובה הכפתור מעל גובה השדה. כאן הכפתור שומר על שורה
   אחת ועל גובה זהה לשדה, ובמסך צר יורד לשורה משלו במלוא הרוחב במקום
   לדחוס את השדה שלצידו. */
.amount-with-tool {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
}

.amount-with-tool > .form-input {
  flex: 1 1 180px;
  min-width: 0;
}

.amount-tool-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
  padding-block: 0;
  padding-inline: 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.amount-tool-icon {
  display: inline-flex;
  flex: 0 0 auto;
  opacity: .85;
}

.amount-tool-btn:hover .amount-tool-icon,
.amount-tool-btn:focus-visible .amount-tool-icon {
  opacity: 1;
}

@media (max-width: 520px) {
  .amount-with-tool > .form-input { flex: 1 1 100%; }
  /* מטרת מגע מלאה במובייל, לפי DESIGN.md סעיף הנגישות. */
  .amount-tool-btn { flex: 1 1 100%; min-height: 44px; }
}

.salary-calculator {
  direction: rtl;
  /* 620px נתנו לתוכן צר שורות ארוכות ומרווח מת בצדדים. הרוחב הזה מחזיק את
     שלושת תאי הפירוט בלי לדחוס אותם. */
  max-width: 500px;
  padding: 18px 18px 16px;
}

/* המספרים בחלון הזה מתעדכנים על כל הקשה. בלי רוחב ספרה אחיד הם רוקדים
   בזמן ההקלדה, ובלי בידוד bidi סימן השקל קופץ לצד הלא נכון בהקשר עברי. */
.salary-calculator .salary-result-value,
.salary-calculator .salary-summary-value,
.salary-calculator .salary-money-input {
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}

.salary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.salary-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  line-height: 1.2;
}

.salary-title-icon {
  display: inline-flex;
  flex: 0 0 auto;
}

/* כפתור סגירה עגול ודיסקרטי. קודם זה היה btn-secondary עם תו "×": מלבן
   בגודל כפתור פעולה, שמשך את העין לפעולה הפחות חשובה בחלון. */
.salary-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.salary-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.salary-close:focus-visible {
  outline: none;
  border-color: #93c5fd;
  background: #eef4ff;
  color: #2563eb;
}

.salary-calculator-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 7px 10px;
  background: #f8fafc;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  font-size: 12px;
  color: #64748b;
}

.salary-info-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: #2563eb;
}

.salary-info-short {
  flex: 1 1 320px;
  line-height: 1.35;
}

.salary-info-toggle {
  border: 0;
  background: transparent;
  color: #2563eb;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 0;
}

.salary-info-toggle:hover,
.salary-info-toggle:focus-visible {
  text-decoration: underline;
  outline: none;
}

.salary-info-details {
  flex-basis: 100%;
  padding-top: 6px;
  color: #64748b;
  line-height: 1.45;
}

.salary-type-fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 12px;
}

.salary-type-fieldset .form-label,
.salary-input-row .form-label {
  margin-bottom: 6px;
  font-size: 12px;
}

.salary-type-segment {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.salary-segment-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* האייקון מוביל, הטקסט תופס את האמצע והווי נצמד לקצה. מרכוז הכל יחד
     היה גורם לתווית לזוז אופקית ברגע שהשיעור משנה אורך. */
  justify-content: flex-start;
  gap: 8px;
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  background: #ffffff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.salary-segment-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.salary-segment-option:hover,
.salary-segment-option:focus-within {
  border-color: #bfdbfe;
  background: #f8fafc;
}

.salary-segment-option.is-selected {
  background: #eef4ff;
  border-color: #93c5fd;
  color: #2563eb;
}

/* הווי הוא SVG מ-icons.js ולא תו. `color: transparent` מסתיר את ה-stroke
   שיורש currentColor, כך שהעיגול נשאר במקומו והפריסה לא קופצת בבחירה. */
.salary-segment-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  color: transparent;
}

.salary-segment-check svg { display: block; }

.salary-segment-glyph {
  display: inline-flex;
  flex: 0 0 auto;
  color: #94a3b8;
  transition: color .15s ease;
}

.salary-segment-option.is-selected .salary-segment-glyph { color: #2563eb; }

.salary-segment-text {
  flex: 1 1 auto;
  line-height: 1.25;
  text-align: start;
}

.salary-segment-option .salary-segment-check { margin-inline-start: auto; }

.salary-segment-option.is-selected .salary-segment-check {
  border-color: #2563eb;
  background: #ffffff;
  color: #2563eb;
}

.salary-input-row {
  margin-bottom: 12px;
}

/* סימן השקל יושב בתוך השדה במקום בתווית. התווית אמרה "שכר ברוטו (₪)"
   והשדה היה ריק, כלומר המשתמש קרא את המטבע במקום אחד והקליד במקום אחר. */
.salary-money-field {
  position: relative;
  display: flex;
  align-items: center;
}

.salary-money-prefix {
  position: absolute;
  inset-inline-start: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #94a3b8;
  pointer-events: none;
}

.salary-money-input {
  width: 100%;
  height: 42px;
  min-height: 42px;
  direction: rtl;
  text-align: right;
  padding-inline-start: 28px;
  font-size: 15px;
  font-weight: 600;
}

.salary-money-input::placeholder { font-weight: 400; }

.salary-input-error {
  min-height: 16px;
  margin-top: 4px;
  color: #b91c1c;
  font-size: 11px;
  line-height: 1.35;
}

.salary-results {
  display: none;
  margin-top: 4px;
}

.salary-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.salary-breakdown-cell,
.salary-result-card,
.salary-breakdown-card {
  padding: 8px 10px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #dbe3ef;
}

.salary-breakdown-cell {
  min-height: 54px;
}

.salary-result-label {
  font-size: 11px;
  color: #64748b;
  margin-bottom: 4px;
  font-weight: 500;
}

.salary-result-value {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.25;
}

.salary-total-card {
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  /* מעבר עדין בין שני ירוקים קיימים בפלטה, בלי צבע חדש. זו ההדגשה היחידה
     בחלון, כי זה המספר שנרשם לתקציב. */
  background: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 1px solid #bbf7d0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* התוצאה נכנסת בהחלקה קצרה כשהיא מופיעה, כדי שהעין תמצא אותה. מי שביקש
   פחות תנועה מקבל את אותה תוצאה בלי ההחלקה. */
@keyframes salaryResultIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.salary-results[style*="block"] {
  animation: salaryResultIn .18s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .salary-results[style*="block"] { animation: none; }
  .salary-segment-option,
  .salary-segment-glyph,
  .salary-close { transition: none; }
}

/* מאיפה הגיע השיעור. זו אינה קישוט: אותו סכום נראה זהה בין שיעור שהארגון
   הגדיר לבין ברירת מחדל שנשלפה אחרי כשל קריאה, וההפרש הוא כסף. */
.salary-total-source {
  margin-top: 2px;
  font-size: 11px;
  color: #166534;
  opacity: .8;
}

.salary-info-warning {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  padding: 7px 9px;
  border-radius: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 12px;
  line-height: 1.4;
}

.salary-info-warning-icon { display: inline-flex; flex: 0 0 auto; }

.salary-info-warning > span:not(.salary-info-warning-icon) { flex: 1 1 200px; }

.salary-retry-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  background: #ffffff;
  color: #92400e;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.salary-retry-btn:hover { background: #fffbeb; }

.salary-retry-btn:focus-visible {
  outline: none;
  border-color: #b45309;
  box-shadow: 0 0 0 2px #fde68a;
}

.salary-calculator .form-input:disabled,
.salary-calculator input:disabled + .salary-segment-check {
  opacity: .6;
}

.salary-segment-option:has(input:disabled) {
  opacity: .6;
  cursor: progress;
}

/* השיעור לא נקרא מהארגון: המספר הוא הערכה, ולכן הכרטיס יורד מירוק
   ל"מידע" ולא נקרא כתוצאה סופית. */
.salary-total-card.is-estimate {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-color: #cbd5e1;
}

.salary-total-card.is-estimate .salary-result-label,
.salary-total-card.is-estimate .salary-result-value,
.salary-total-card.is-estimate .salary-total-source {
  color: #475569;
}

.salary-total-card .salary-result-label {
  color: #166534;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 0;
}

.salary-total-card .salary-result-value {
  font-size: 22px;
  font-weight: 700;
  color: #166534;
}

.salary-calculator-actions {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #eef2f7;
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* `.btn` הכללי הוא 12px/24px, גובה של כפתור ראשי במסך מלא. בתוך חלון בגובה
   הזה שני כפתורים כאלה תפסו רבע מהשטח. */
.salary-action {
  padding: 9px 16px;
  font-size: 13px;
  border-radius: 9px;
}

.salary-action[disabled] { box-shadow: none; }

@media (max-width: 520px) {
  .salary-calculator-actions { flex-direction: column-reverse; }
  .salary-action { width: 100%; min-height: 44px; }
}

/* שורה אחת מתחת לשדה הסכום. הבלוק הקודם היה חמש שורות בטופס שכבר צפוף,
   והשורה הראשונה בו חזרה על המספר שבשדה. */
.salary-summary-note {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 9px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
}

.salary-summary-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: #94a3b8;
}

.salary-summary-label {
  font-weight: 500;
}

.salary-summary-value {
  font-weight: 600;
}

.salary-summary-muted {
  color: #64748b;
  font-size: 12px;
}

.salary-expense-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
  font-size: 11px;
  font-weight: 700;
}

.salary-breakdown-card {
  margin-bottom: 20px;
  background: #ffffff;
}

.salary-breakdown-card h4 {
  margin: 0 0 12px;
  font-size: 14px;
  color: #1e293b;
}

.salary-breakdown-card .salary-breakdown-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

@media (max-width: 560px) {
  .salary-calculator {
    padding: 16px;
  }

  .salary-type-segment,
  .salary-breakdown-grid {
    grid-template-columns: 1fr;
  }

  .salary-total-card {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* באנר חריגת תקציב מעל רשימת הפעילויות — האחוז המצטבר בכותרת מחביא
   פעילות בודדת שעברה 100%, והכרטיס האדום נראה רק אם גוללים אליו. */
.activity-overrun-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-top: 10px;
    padding: 10px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    font-size: 13px;
    color: #991b1b;
    line-height: 1.5;
}
.activity-overrun-notice .aon-names {
    color: #b91c1c;
    font-size: 12px;
}

/* באנר "כמה מגיע לי" מעל רשימת הפעילויות. זה המקום היחיד בכל התהליך שבו
   כסף פרטי נכנס לתמונה, ולכן הוא ירוק ולא אדום: זו אינה שגיאה אלא חוב פתוח. */
.my-reimb-notice {
    margin-top: 10px;
    padding: 10px 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    font-size: 13px;
    color: #14532d;
    line-height: 1.5;
}
.my-reimb-notice .mrn-head {
    display: block;
    font-weight: 600;
}
.my-reimb-notice .mrn-rows {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px;
}
/* כפתור ולא div: השורה פותחת את ההוצאה, ומי שמנווט במקלדת חייב להגיע אליה. */
.my-reimb-notice .mrn-row {
    /* רשת ולא flex עוטף. **בעטיפה השורה התפרקה אחרת בכל שורה**: בראשונה
       התאריך ירד לבדו, בשלישית הסכום נשאר לבדו בשורה והשם ירד מתחתיו,
       ואי אפשר היה לסרוק את הסכומים בעין. ברשת שלוש העמודות נשארות
       במקומן גם ב-360 פיקסל, והשם הוא היחיד שנחתך. */
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 4px 10px;
    width: 100%;
    /* גובה מטרת מגע תקינה בטלפון, שם רוב הרכזות מזינות. */
    min-height: 32px;
    padding: 4px 6px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    font: inherit;
    color: inherit;
    text-align: right;
    cursor: pointer;
}
.my-reimb-notice .mrn-row:hover,
.my-reimb-notice .mrn-row:focus-visible {
    background: #dcfce7;
}
.my-reimb-notice .mrn-amt {
    font-weight: 600;
    /* רוחב קבוע כדי שהסכומים יתיישרו זה מתחת לזה ואפשר יהיה לסרוק אותם. */
    min-width: 72px;
}
.my-reimb-notice .mrn-where {
    flex: 1 1 auto;
    min-width: 0;
    color: #166534;
    /* שם פעילות ארוך בטלפון תפח לשלוש שורות ודחף שורה אחת לגובה של שלוש.
       שתי שורות ואז חיתוך: הבאנר הזה מזהה את ההוצאה, והפעילות עצמה מציגה
       את השם המלא. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
.my-reimb-notice .mrn-when,
.my-reimb-notice .mrn-more {
    font-size: 12px;
    color: #4d7c5f;
}
.my-reimb-notice .mrn-more {
    padding: 2px 6px;
}

/* ── שורת משתמש/מאשר במסך ניהול הפעילות ──
   קודם כל אחד מהם היה כרטיס בגובה כ-150px לארבע שורות טקסט קטן, וארבעה
   משתמשים מילאו מסך שלם. שורה אחת דחוסה, בגובה מטרת מגע תקינה. */
.activity-member-row {
    display: grid;
    /* רוחב קבוע לשם: בעמודה 'auto' המיילים התחילו כל אחד במקום אחר לפי
       אורך השם שלפניו, והרשימה נקראה לא מיושרת. */
    grid-template-columns: 20px minmax(110px, 210px) minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 4px 10px;
    min-height: 44px;
    padding: 6px 12px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
}

.activity-member-row:last-child {
    border-bottom: none;
}

.activity-member-row:hover {
    background: #f8fafc;
}

.activity-member-row .amr-icon {
    display: flex;
    align-items: center;
}

.activity-member-row .amr-name {
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-member-row .amr-email {
    color: #64748b;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-member-row .amr-role {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 99px;
    background: #f1f5f9;
    color: #64748b;
    white-space: nowrap;
}

.activity-member-row .amr-role--manager { background: #e0e7ff; color: #4c51bf; }
.activity-member-row .amr-role--controller { background: #fef3c7; color: #92400e; }
.activity-member-row .amr-role--editor { background: #d1fae5; color: #065f46; }
.activity-member-row .amr-role--viewer { background: #f1f5f9; color: #475569; }

.activity-member-row .amr-date {
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
}

/* פעולה הרסנית על שורה שכיחה: טקסט בצבע סכנה, לא כפתור אדום מלא. */
.activity-member-row .amr-remove {
    min-height: 32px;
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #dc2626;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.activity-member-row .amr-remove:hover,
.activity-member-row .amr-remove:focus-visible {
    background: #fef2f2;
    border-color: #fecaca;
}

/* במסך צר השורה נשברת לשלוש שורות במקום לגלוש אופקית. כל תא ממוקם
   במפורש: בזרימה אוטומטית תג התפקיד נדחס לעמודה צרה ונחתך. */
@media (max-width: 640px) {
    .activity-member-row {
        grid-template-columns: 20px minmax(0, 1fr) auto;
        padding: 10px 12px;
    }

    .activity-member-row .amr-icon { grid-area: 1 / 1; }
    .activity-member-row .amr-name { grid-area: 1 / 2; }
    .activity-member-row .amr-remove { grid-area: 1 / 3; }
    .activity-member-row .amr-email { grid-area: 2 / 2 / auto / -1; }

    .activity-member-row .amr-role {
        grid-area: 3 / 2;
        justify-self: start;
    }

    .activity-member-row .amr-date {
        grid-area: 3 / 3;
        justify-self: end;
    }
}

/* מסך ניהול הפעילות בזמן שהנתונים בדרך: השדות נעולים וכהים למחצה, כדי
   שלא ייקראו כערכים אמיתיים של הפעילות שנפתחת. */
#activityManagementSection.is-loading #editActivityForm {
    opacity: 0.5;
}

/* גלגל השיניים על כרטיס הפעילות בזמן פתיחת ההגדרות. */
.activity-gear.is-busy {
    opacity: 0.55;
    cursor: progress;
}

.activity-gear.is-busy svg {
    animation: loading-spin 0.8s linear infinite;
}

@keyframes loading-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .activity-gear.is-busy svg {
        animation: none;
    }
}

/* ── צמצום רווח: מסך ניהול הפעילות ──
   שדות בודדים השתרעו על מסך מלא, ותיבת התיאור פתחה 120px ריקים. הצמצום
   ממוקד למסך הזה בלבד ואינו נוגע במידות הטופס הגלובליות. מודאל הוספת
   ההוצאה עבר לקובץ משלו, expense-modal.css. */
#activityManagementSection .content-card {
    padding: 18px;
    margin-bottom: 14px;
}

#activityManagementSection .form-group {
    margin-bottom: 12px;
}

#activityManagementSection .form-label {
    margin-bottom: 5px;
}

#activityManagementSection .form-input,
#activityManagementSection .form-select,
#activityManagementSection .form-textarea {
    padding: 8px 12px;
}

/* תיאור פעילות הוא שורה או שתיים בפועל, לא פסקה. עדיין ניתן למתיחה ידנית
   (resize: vertical נשאר). מודאל ההוצאה מוגדר ב-expense-modal.css. */
#activityManagementSection .form-textarea {
    min-height: 56px;
}