/* ============================================================================
   מודאל ההוצאה, הוספה ועריכה כאחד: מעטפת, שדות, אזור המסמכים וחיווי התקציב.

   קובץ נפרד ולא תוספת ל-budget.css, כי זה מסך אחד עם שפה משלו: כותרת ופוטר
   קבועים, גוף גולל אחד, ושורות מסמך שאינן קיימות בשום מקום אחר. מי שיבוא
   אחרינו צריך לדעת איפה נגמר המודאל ומתחיל שאר מסך התקציב.

   **התיחום הוא `.exp-modal` ולא מזהה של חלון אחד.** קודם הכל היה תחת
   `#addExpenseModal`, ולכן חלון העריכה לא יכול היה להשתמש בשום דבר כאן
   והחזיק העתק משלו ב-inline styles: אותה תיבת התחייבות, אותן קופסאות, ערך
   ערך. שני החלונות נושאים עכשיו את ה-class, ומי שמוסיף חלון הוצאה שלישי
   מקבל את השפה בלי להעתיק אותה.

   לא שייך לכאן: סגנון הטפסים הגלובלי (login.css), המודאל הגנרי
   (overlays.css), ושאר מסך התקציב (budget.css).
   ============================================================================ */

/* ── מעטפת ──
   הכותרת והפוטר קבועים, והגוף הוא היחיד שגולל. קודם כל המודאל היה אזור
   גלילה אחד, ולכן כפתור השמירה נעלם מהמסך בדיוק כשהטופס התארך. */
.exp-modal .modal-content {
    padding: 0;
    max-width: 620px;
    width: min(620px, 94vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.exp-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.exp-modal-title {
    font: 700 18px/1.3 inherit;
    color: #1e293b;
    margin: 0;
}

.exp-modal-head-side {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

/* שם הפעילות והמוסד. נחתך ולא עוטף, אחרת הכותרת גדלה לשתי שורות על שם ארוך. */
.exp-modal-context {
    font-size: 12px;
    color: #5a6779;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.exp-modal-close {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    padding: 0;
    color: #64748b;
}

.exp-modal-close:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.exp-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 18px;
}

.exp-modal-foot {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px 20px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    flex-shrink: 0;
}

/* ── שדות ──
   צפוף יותר מהטופס הגלובלי, ועל רקע לבן. הרקע האפור של הפקד הגלובלי נבלע
   בקופסאות האפורות של אזור המסמכים וחיווי התקציב. */
.exp-modal .form-group {
    margin-bottom: 9px;
}

.exp-modal .form-label {
    font-size: 12.5px;
    font-weight: 500;
    color: #475569;
    margin-bottom: 4px;
}

.exp-modal .form-input,
.exp-modal .form-select,
.exp-modal .form-textarea {
    padding: 7px 10px;
    font-size: 13px;
    border-color: #d1d9e3;
    background: #fff;
}

.exp-modal .form-textarea {
    min-height: 44px;
}

/* סעיף וקטגוריה זה לצד זה. auto-fit ולא שתי עמודות קשיחות, אחרת הם נדחסים
   במסך צר לרוחב שאי אפשר לקרוא בו שם סעיף. */
.exp-field-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 9px;
}

.exp-field-pair .form-group {
    margin-bottom: 0;
}

/* ── התחייבות ──
   הכותרת אינה כתומה יותר, כי הפקד אינו אזהרה אלא בחירה. ההסבר הארוך יושב
   מאחורי מתג, והמשפט שנשאר גלוי אומר את העיקר. */
.exp-commitment-box {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    padding: 11px 12px;
    background: #f8fafc;
    cursor: pointer;
}

.exp-commitment-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
}

.exp-commitment-lead {
    display: block;
    font-size: 11.5px;
    line-height: 1.55;
    color: #5a6779;
    margin-top: 3px;
}

.exp-commitment-more {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 11.5px;
    font-weight: 500;
    color: #2f4f7f;
    border-bottom: 1px solid #cbd5e1;
    cursor: pointer;
}

.exp-commitment-full {
    display: block;
    font-size: 11.5px;
    line-height: 1.55;
    color: #475569;
    margin-top: 6px;
}

/* ── אזור המסמכים ──
   קופסה אחת עם שורה לכל סוג, במקום תיבת גרירה בגובה 140px לכל אחד. משותף
   לטופס ההוספה ולמסך עריכת ההוצאה. */
.exp-doc-list {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.exp-doc-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-bottom: 1px solid #eef1f6;
}

/* המפריד יורד רק מהשורה האחרונה **בקופסה**, ולא מהאחרונה בעטיפה שלה.
   לכל סוג מסמך יש עטיפה משלו ובתוכה שורה אחת, ולכן `:last-child` על השורה
   לבדה היה נכון בכל שורה ומוחק את כל המפרידים. */
.exp-doc-list > :last-child .exp-doc-row:last-child,
.exp-doc-list > .exp-doc-row:last-child {
    border-bottom: none;
}

.exp-doc-tile {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #f1f5f9;
}

.exp-doc-tile--empty {
    background: none;
    border: 1.5px dashed #cbd5e1;
}

.exp-doc-main {
    flex: 1;
    min-width: 0;
}

.exp-doc-title {
    font-size: 12.5px;
    font-weight: 500;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.exp-doc-sub {
    font-size: 11px;
    line-height: 1.5;
    color: #94a3b8;
}

.exp-doc-req {
    color: #dc2626;
    font-weight: 600;
    margin-inline-start: 4px;
}

.exp-doc-opt {
    color: #5a6779;
    margin-inline-start: 4px;
}

.exp-doc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    background: #fff;
    border: 1px solid #d1d9e3;
    border-radius: 7px;
    padding: 8px 13px;
    flex-shrink: 0;
    cursor: pointer;
    white-space: nowrap;
}

.exp-doc-btn:hover {
    border-color: #94a3b8;
    background: #f8fafc;
}

.exp-doc-btn--required {
    color: #2f4f7f;
    border-color: #2f4f7f;
}

.exp-doc-btn--required:hover {
    background: #f5f8fc;
    border-color: #2f4f7f;
}

.exp-doc-remove {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: none;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #cbd5e1;
    cursor: pointer;
    padding: 0;
}

.exp-doc-remove:hover {
    color: #dc2626;
    background: #fef2f2;
}

/* ── קבצים קיימים בעריכה ──
   אין לזה מקבילה בטופס ההוספה, כי בהוספה עוד אין קבצים שמורים. השורות
   עצמן נבנות ב-workflows.js; מה שכאן הוא רק המרווח שמפריד אותן מקוביות
   המסמכים שמתחתיהן. */
.exp-edit-files:not(:empty) {
    margin-bottom: 8px;
}

/* הוספת קבצים ללא סוג. חוזרת על שפת ‎.exp-doc-btn ולא על תיבת הגרירה
   המקוקוות בגובה מלא שהייתה כאן: היא תפסה שליש מגובה החלון והתחרתה
   ויזואלית עם קוביות המסמכים, שהן הדרך הנכונה להעלות. */
.exp-more-files {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    background: #fff;
    border: 1.5px dashed #cbd5e1;
    border-radius: 9px;
    padding: 10px 12px;
    cursor: pointer;
}

.exp-more-files:hover {
    border-color: #94a3b8;
    background: #f8fafc;
}

/* ── חיווי התקציב ──
   פס אחד לכל תקרה: מה כבר מנוצל, ומה הסכום שמוקלד עכשיו יוסיף. הצבע לבדו
   אינו אומר דבר, ולכן המספרים מעליו נשארים במילים. */
.exp-headroom-bar {
    position: relative;
    height: 4px;
    border-radius: 2px;
    background: #e6ebf2;
    overflow: hidden;
    margin-top: 6px;
    display: flex;
}

/* קו התקרה. `inset-inline-start` הוא הקצה הימני בעברית, וזה בדיוק הקצה
   שהמקטעים ממלאים ממנו, ולכן שניהם נמדדים מאותה נקודה. */
.exp-headroom-capmark {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #0f172a;
    opacity: 0.55;
}

.exp-headroom-bar span {
    display: block;
    height: 100%;
}

.exp-headroom-used {
    background: #2f4f7f;
}

.exp-headroom-pending {
    background: #d97706;
    box-shadow: -1px 0 0 #fff;
}

.exp-headroom-over {
    background: #b91c1c;
    box-shadow: -1px 0 0 #fff;
}

/* ── קריאת החשבונית ──
   שורת ההמתנה במקום שקט מוחלט: קודם הקובץ נבחר, שנייה וחצי לא קרה כלום,
   ואז השדות התמלאו. מי שלא ידע שיש קריאה אוטומטית חשב שהמסך נתקע. */
.exp-read-panel {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    background: #f8fafc;
    margin-top: 8px;
}

.exp-read-sheet {
    width: 44px;
    height: 56px;
    border-radius: 5px;
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 6px 5px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.exp-read-sheet i {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: #cbd5e1;
    animation: expReadReveal 2.4s ease-in-out infinite;
}

.exp-read-sheet i:nth-child(1) { width: 70%; animation-delay: 0.1s; }
.exp-read-sheet i:nth-child(2) { width: 100%; animation-delay: 0.3s; }
.exp-read-sheet i:nth-child(3) { width: 85%; animation-delay: 0.5s; }
.exp-read-sheet i:nth-child(4) { width: 60%; animation-delay: 0.75s; }
.exp-read-sheet i:nth-child(5) { width: 90%; animation-delay: 0.95s; }

.exp-read-title {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
}

.exp-read-file {
    font-size: 11.5px;
    color: #5a6779;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.exp-read-track {
    height: 3px;
    border-radius: 2px;
    background: #e6ebf2;
    overflow: hidden;
    margin-top: 7px;
}

.exp-read-track span {
    display: block;
    width: 30%;
    height: 100%;
    border-radius: 2px;
    background: #2f4f7f;
    animation: expReadBar 1.35s linear infinite;
}

@keyframes expReadReveal {
    0% { opacity: 0.12; }
    14% { opacity: 1; }
    80% { opacity: 1; }
    94% { opacity: 0.12; }
    100% { opacity: 0.12; }
}

@keyframes expReadBar {
    0% { transform: translateX(130%); }
    100% { transform: translateX(-330%); }
}

@media (prefers-reduced-motion: reduce) {
    .exp-read-sheet i,
    .exp-read-track span {
        animation: none;
    }

    .exp-read-track span {
        width: 100%;
    }
}

/* ── אחרי הקריאה ──
   שורת אישור אחת במקום פאנל הצעות, ולצידה מה שעדיין דורש הכרעה. */
.exp-fill-panel {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    background: #fff;
    margin-top: 8px;
}

.exp-fill-done {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.exp-fill-done-main {
    flex: 1;
    min-width: 0;
}

.exp-fill-title {
    font-size: 12.5px;
    font-weight: 600;
    color: #0f172a;
}

.exp-fill-sub {
    font-size: 11.5px;
    color: #5a6779;
    margin-top: 2px;
}

.exp-fill-undo {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #2f4f7f;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
}

.exp-fill-undo:hover {
    text-decoration: underline;
}

/* שדה שמולא מהמסמך. סימון דק בקצה ההתחלה, שיורד ברגע שנוגעים בשדה. */
.exp-autofilled {
    border-inline-start: 3px solid #047857 !important;
}

/* הצעה שלא נכנסה לבד, כי בשדה כבר היה ערך. */
.exp-fill-offer {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    border-top: 1px solid #eef1f6;
    padding-top: 8px;
    margin-top: 8px;
    font-size: 12px;
    color: #334155;
}

.exp-fill-offer strong {
    font-weight: 600;
    color: #0f172a;
}

/* ── אזהרות שנשארות אחרי המילוי ──
   כפילות, מספרים שאינם מסתדרים, ומספר הקצאה. הן אינן חלק מהמילוי ולכן הן
   מוצגות מעליו: אם זו חשבונית שכבר נרשמה, השאלה אינה איזה שדה מולא. */
.exp-fill-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.55;
    margin-bottom: 8px;
}

.exp-fill-alert--danger {
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #fecaca;
}

.exp-fill-alert--warn {
    color: #92400e;
    background: #fef3c7;
}

.exp-fill-alert--info {
    color: #075985;
    background: #e0f2fe;
}

.exp-fill-note {
    font-size: 11px;
    color: #5a6779;
    margin-bottom: 8px;
}

/* הודעת השגיאה של המודאל נוחתת בין הכותרת לגוף, ולמעטפת אין יותר ריפוד
   משלה. `margin-inline` ולא `margin`, כי הכתיבה שם קובעת `margin-bottom`
   בסגנון מוטבע ושורה מקוצרת כאן הייתה נמחקת על ידו. */
.exp-modal .modal-inline-error {
    margin-top: 12px;
    margin-inline: 18px;
}

/* שורת מסמך חובה שחסר בה קובץ, אחרי ניסיון שמירה. */
.exp-doc-list .input-invalid {
    background: #fef2f2;
    box-shadow: inset 0 0 0 1px #fca5a5;
}

/* ── מסלול התשלום, ראשון בטופס ההוצאה ─────────────────────────────────────
   שני כפתורים ולא בורר: הבחירה קובעת אילו שדות נדרשים בהמשך, ובורר מקופל
   מסתיר בדיוק את ההחלטה שצריך לראות לפני שממלאים. */
.payer-choice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
}
.payer-opt {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #d1d9e3;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.payer-opt:hover { border-color: #94a3b8; }
.payer-opt input { margin-top: 3px; flex-shrink: 0; accent-color: #2f4f7f; }
.payer-opt-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.payer-opt-title { font-size: 13px; font-weight: 600; color: #1e293b; }
.payer-opt-hint { font-size: 11.5px; color: #5a6779; }
/* המצב הנבחר נושא גם מסגרת וגם רקע, ולא צבע בלבד: DESIGN.md אוסר על סטטוס
   שנקרא רק מהצבע. */
.payer-opt--on {
    border-color: #2f4f7f;
    background: #f5f8fc;
}
.payer-opt--on .payer-opt-title { color: #2f4f7f; }
.payer-opt--locked {
    cursor: default;
    background: #f8fafc;
    border-style: dashed;
}
.payer-opt--locked:hover { border-color: #d1d9e3; }
.payer-note {
    margin-top: 7px;
    font-size: 11.5px;
    color: #5a6779;
    line-height: 1.5;
}