/* ============================================================
   pages.css — סגנונות שחולצו מתוך עמודי תוכן (.aspx)
   ============================================================
   נוצר כדי להוציא סגנונות מוטמעים (<style> ו-inline) מתוך הדפים
   אל קובץ CSS חיצוני, מבלי לשנות את העיצוב.

   מקור ראשון: הפופאפ "PopUpAddClaim" שב-Insured.aspx.
   ============================================================ */


/* ============================================================
   PopUpAddClaim — בלוק ה-<style> שהיה מוטמע בדף (הועבר כמות שהוא)
   ============================================================ */

.claim-right {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.claim-modal {
    position: relative;
    width: 80vw;
    max-width: 1400px;
    height: 95vh;
    max-height: 95vh;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(26,108,245,0.15), 0 0 0 1px rgba(26,108,245,0.1);
    direction: rtl;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.claim-header {
    flex-shrink: 0;
    padding: 20px 24px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e8f0fe;
    background: #fff;
}

.claim-title {
    font-size: 17px;
    font-weight: 700;
    color: #1a3a6b;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .claim-title::before {
        content: '';
        width: 8px;
        height: 8px;
        background: #1a6cf5;
        border-radius: 50%;
        box-shadow: 0 0 8px rgba(26,108,245,0.5);
    }

.claim-close {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    cursor: pointer !important;
}

    .claim-close i {
        color: #1a6cf5;
        font-size: 18px;
    }

    .claim-close:hover i {
        color: #e74c3c;
    }

.claim-body {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

.claim-right {
    width: 50%;
    padding: 18px;
    border-left: 1px solid #e8f0fe;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.claim-left {
    width: 50%;
    padding: 10px 18px 18px 18px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #f9fbff;
}

.claim-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a3a6b;
    margin-bottom: 10px;
}

.claim-field {
    margin-bottom: 4px;
}

    .claim-field label,
    .claim-field .SpanAddClaim {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #4a628a;
        margin-bottom: 4px;
    }

.claim-input,
.claim-textarea,
.claim-select {
    width: 100%;
    border: 1px solid #c5d8ff;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    color: #1a3a6b;
    background: #fff;
    outline: none;
    box-sizing: border-box;
}

.claim-select-readonly {
    pointer-events: none;
    background: #f3f6fb !important;
    color: #6c7a92 !important;
    border-color: #d9e4f7 !important;
}

.claim-input:focus,
.claim-textarea:focus,
.claim-select:focus {
    border-color: #1a6cf5;
    box-shadow: 0 0 0 3px rgba(26,108,245,0.1);
}

.claim-textarea {
    min-height: 90px;
    resize: vertical;
    font-family: 'Open Sans Hebrew';
}

.claim-actions {
    margin-top: auto;
    margin-bottom: 1%;
    display: flex;
    gap: 10px;
}

.claim-save-btn {
    min-width: 120px;
    background: #1ea4ff !important;
    color: #ffffff !important;
    cursor: pointer !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.claim-save-btn-disabled {
    min-width: 120px;
    background: #bfc7d5 !important;
    color: #ffffff !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
    pointer-events: none !important;
}

/* ═══ פופאפ "קריאה חדשה" — אותו עיצוב כמו פופאפ תביעה (claim-modal),
      אך בגרסת עמודה יחידה וצרה כי הטופס קצר ═══ */
/* רוחב: הורחב מ-460px ל-573px (תוספת של כ-3 ס"מ, 1cm ≈ 37.8px) כדי שטקסט התגובות
   באזור ההתכתבות יתפרש לרוחב בתוך התיבות במקום להישבר להרבה שורות קצרות.

   גובה: 92vh — הפופאפ תופס את גובה המסך (ממורכז ע"י .claim-popup-overlay), כדי
   שיוצג בו כמה שיותר מהטופס. כל השדות בגובהם הטבעי — כולל רשימת התגובות, שגדלה
   בלי תקרה — ומה שלא נכנס נגלל בגוף הפופאפ (.reading-body).
   **גלילה אחת בלבד בכל הפופאפ**, ולא גלילה פנימית ברשימת התגובות. */
.reading-modal {
    width: 573px;
    max-width: 92vw;
    height: 92vh;
    max-height: 92vh;
}

/* גוף בעמודה יחידה (מבטל את פריסת שתי העמודות של claim-body).
   flex-column כדי ש-claim-actions (margin-top:auto) יצמיד את כפתור השמור לתחתית.
   overflow-y: auto — **הגלילה היחידה בפופאפ**. רשימת התגובות גדלה בלי תקרה, ולכן
   ככל שמצטברות תגובות הטופס נעשה גבוה מהמסך וגוללים כאן כדי להגיע לשדות
   התחתונים. חובה: .claim-body ההורה הוא
   overflow: hidden, ובלי הגלילה כאן השדות שמתחת להתכתבות (תאריך יעד, הועבר ל,
   סטטוס, סיבת סגירה, "שמור") היו נחתכים ובלתי-נגישים לחלוטין. */
.reading-body {
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    background: #fff;
    overflow-y: auto;
}

    /* flex-shrink: 0 — כל שדות הקריאה שומרים על גובהם הטבעי ואינם מתכווצים.
       בלי זה flex היה מכווץ את השדות (במיוחד את אזור ההתכתבות) כדי לדחוס את הטופס
       לגובה הפופאפ, במקום לתת לגוף הפופאפ לגלול. */
    .reading-body .claim-field {
        margin-bottom: 14px;
        flex-shrink: 0;
    }

    /* לוח התאריך בפופאפ הצר של הקריאה (573px): התיבה מיושרת לימין (RTL) וקרובה לגבול,
       ומכיוון שההורים חותכים ב-overflow:hidden — מרכוז הלוח (left:50%) חרג ונחתך (עמודת "ראשון").
       כאן מבטלים את המרכוז ומעגנים את הלוח לצד ההתחלה (ימין) של התיבה כך שייפתח שמאלה לתוך הפופאפ. */
    .reading-body .single-date-popup {
        left: auto;
        right: auto;
        inset-inline-start: 0;
        transform: none;
    }

/* ═══ אזור "התכתבות" בפופאפ עריכת קריאה ═══ */

/* רשימת התגובות (החדשה למעלה) — גובה **אוטומטי לפי כמות התגובות, בלי תקרה**.
   כל תגובה שנוספת נכנסת בראש הרשימה ודוחפת את שאר תוכן הפופאפ (תיבת הכתיבה,
   תאריך יעד, הועבר ל, סטטוס, "שמור") מטה.
   ⚠️ אין כאן max-height ואין overflow — **בכוונה**. הגלילה היחידה בפופאפ היא של
   הגוף (.reading-body); גלילה פנימית ברשימת התגובות בוטלה לפי דרישה מפורשת.
   אל תחזירו כאן max-height/overflow-y — זה מחזיר את הגלילה הכפולה. */
.reading-comments-list {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px;
    background: #f8fafc;
    margin-bottom: 8px;
}

.reading-comment {
    position: relative; /* עוגן לנקודה הצהובה שבפינת השורה */
    padding: 6px 8px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #e2e8f0;
    margin-bottom: 6px;
}

/* נקודה צהובה בפינת שורת התגובה החדשה שטרם נצפתה. inset-inline-end = שמאל ב-RTL,
   כלומר הפינה הנגדית לצד שבו מתחיל הטקסט, כדי שלא תסתיר אותו. */
.reading-comment-new-dot {
    position: absolute;
    top: 6px;
    inset-inline-end: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f5b400;
}

/* אותה נקודה, על שורת הקריאה ברשימת "הקריאות שלי" — פינה עליונה **שמאלית**.
   ב-RTL inset-inline-end = שמאל, בדיוק כמו הנקודה שעל התגובה עצמה.
   position: absolute הכרחי: השורה היא גריד, ובלעדיו הנקודה הייתה יוצרת תא נוסף
   ומזיזה את כל העמודות. העוגן הוא .general-popup-history-row שכבר position: relative.
   z-index מעל כפתור-השורה השקוף (.general-popup-history-row-click-btn) כדי שלא יכסה אותה. */
.reading-row-new-dot {
    position: absolute;
    top: 6px;
    inset-inline-end: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f5b400;
    z-index: 4;
    pointer-events: none;
}

    .reading-comment:last-child {
        margin-bottom: 0;
    }

.reading-comment-text {
    font-size: 13px;
    color: #222;
    word-break: break-word;
}

/* חתימת התגובה — בתחתית התגובה ובפינה הימנית (ב-RTL זו צד ההתחלה), בפונט קטן.
   באותו נוסח של החיווי בתחתית הפופאפ: "נוצר על ידי ... בתאריך ... בשעה ...". */
.reading-comment-meta {
    margin-top: 4px;
    text-align: start;
    font-size: 11px;
    color: #64748b;
}

/* תאריך ושעה — LTR כדי שלא יתהפכו ב-RTL */
.reading-comment-ltr {
    direction: ltr;
    unicode-bidi: embed;
    white-space: nowrap;
}

.reading-comments-empty {
    display: block;
    font-size: 12px;
    color: #64748b;
}

/* שורת הכתיבה: תיבת טקסט + כפתור "שלח" לצידה.
   יושבת *מתחת* לרשימה ומחוצה לה, ולכן אינה נגללת עם התגובות. */
.reading-comment-new {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

    .reading-comment-new .reading-comment-input {
        flex: 1;
        min-height: 46px;
        height: 46px;
        margin: 0;
    }

    .reading-comment-new .reading-comment-send {
        flex: 0 0 auto;
        width: auto;
        padding-inline: 18px;
        height: 46px;
        margin: 0;
    }

/* תחתית הפופאפ — נצמדת לתחתית (פרטי יוצר, הודעת שגיאה, כפתור שמור) */
/* margin-top: auto — בטופס קצר (קריאה חדשה, בלי אזור התכתבות) מצמיד את "שמור"
   לתחתית. flex-shrink: 0 — התחתית לא נמעכת כשהטופס גבוה מהפופאפ. */
.reading-footer {
    margin-top: auto;
    flex-shrink: 0;
}

/* חיווי "נוצר על ידי ... בתאריך ... בשעה ..." — בשורה אחת */
.reading-created-by {
    display: block;
    white-space: nowrap;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 8px;
}

/* ═══ סרגל סינון ברשימת הקריאות (פופאפ הפעמון PopUpAllReadings) ═══ */
.ReadingsFilterBar {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
    margin: 8px 0 10px;
}

/* סטייל תואם למונה "קריאות פתוחות" (general-popup-open-count): אותו גודל/צבע/משקל */
.ReadingsFilterLabel {
    font-weight: 600;
    color: #334155;
    font-size: 14px;
}

.ReadingsFilterSelect {
    border: 1px solid #c5d8ff;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    color: #2b4788;
    font-family: 'Open Sans Hebrew', sans-serif;
    background: #fff;
    cursor: pointer;
}

.claim-files-toolbar {
    flex-shrink: 0;
    padding: 8px 14px;
    background: #f7faff;
    border: 1px solid #e8f0fe;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 12px;
}

.claim-files-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid #e8f0fe;
    border-radius: 12px;
    background: #fff;
}

    .claim-files-list::-webkit-scrollbar {
        width: 4px;
    }

    .claim-files-list::-webkit-scrollbar-thumb {
        background: #c5d8ff;
        border-radius: 4px;
    }

.claim-file-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #f0f5ff;
    transition: background 0.15s;
}

    .claim-file-row:hover {
        background: #f7faff;
    }

.claim-file-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #e8f0fe;
    border: 1px solid #c5d8ff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}

.claim-file-name {
    flex: 1;
    font-size: 13px;
    color: #2c3e6b;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: ltr;
}

.claim-file-name-edit {
    flex: 1;
    display: none;
    align-items: center;
    gap: 6px;
}

.claim-file-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.claim-file-btn {
    width: 36px !important;
    height: 30px !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    padding: 0 !important;
    text-decoration: none !important;
}

    .claim-file-btn:hover {
        transform: translateY(-1px) !important;
    }

    .claim-file-btn.view:hover,
    .claim-file-btn.download:hover,
    .claim-file-btn.edit:hover {
        background: #e8f0fe !important;
        border-color: #c5d8ff !important;
    }

    .claim-file-btn.delete:hover {
        background: #ffe8e8 !important;
        border-color: #ffb3b3 !important;
    }

    .claim-file-btn.save:hover {
        background: #e8fff0 !important;
        border-color: #b3ffd0 !important;
    }

    .claim-file-btn.view i,
    .claim-file-btn.download i,
    .claim-file-btn.edit i {
        color: #1a6cf5;
        font-size: 14px;
    }

    .claim-file-btn.delete i {
        color: #e74c3c;
        font-size: 14px;
    }

    .claim-file-btn.save i {
        color: #27ae60;
        font-size: 14px;
    }

.btn-upload-popup {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: #1a6cf5;
    color: #fff;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

    .btn-upload-popup:hover {
        background: #1558d0;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(26,108,245,0.3);
    }

.claim-footer-error {
    margin-top: 10px;
    font-size: 12px;
    color: #e74c3c;
    text-align: center;
}

.upload-split-btn {
    position: relative;
    display: inline-block;
}

.btn-upload-main {
    user-select: none;
}

.upload-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: #fff;
    border: 1px solid #c5d8ff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(26,108,245,0.15);
    min-width: 200px;
    z-index: 1000;
    overflow: hidden;
}

.upload-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #1a3a6b;
    text-decoration: none;
    transition: background 0.15s;
    cursor: pointer;
}

    .upload-option:hover {
        background: #f0f6ff;
    }

    .upload-option + .upload-option {
        border-top: 1px solid #f0f5ff;
    }

.file-picker-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-bottom: 1px solid #f0f5ff;
    border-radius: 8px;
    transition: background 0.15s;
    cursor: pointer;
}

    .file-picker-row:hover {
        background: #f7faff;
    }

    .file-picker-row input[type=checkbox] {
        width: 17px;
        height: 17px;
        accent-color: #1a6cf5;
        cursor: pointer;
        flex-shrink: 0;
    }

.file-picker-icon {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    background: #e8f0fe;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
}

.file-picker-name {
    flex: 1;
    font-size: 13px;
    color: #2c3e6b;
    direction: ltr;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.claim-files-header {
    display: none;
}

.files-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: 4px 10px;
    background: #e8f0fe;
    color: #1a6cf5;
    border: 1px solid #c5d8ff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.btn-download-all {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 7px 14px !important;
    background: #1a6cf5 !important;
    border: none !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
}

    .btn-download-all:hover {
        background: #1558d0 !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(26,108,245,0.3) !important;
        color: #ffffff !important;
    }

.claim-select option:disabled {
    color: #999;
}

.claim-files-toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.claim-files-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.claim-files-toolbar-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a3a6b;
    margin: 0;
}

/* ===== שורת כיסוי ===== */
.coverage-row {
    background: #f7faff;
    border: 1px solid #e0ecff;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    transition: box-shadow 0.15s;
}

    .coverage-row:hover {
        box-shadow: 0 2px 10px rgba(26,108,245,0.08);
    }

.coverage-fields {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-wrap: nowrap;
}

.coverage-field-wrap {
    display: flex;
    flex-direction: column;
}

.coverage-label {
    font-size: 11px;
    font-weight: 600;
    color: #4a628a;
    margin-bottom: 3px;
}

.coverage-amount-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

    .coverage-amount-wrap input {
        padding-left: 24px !important;
    }

.coverage-shekel {
    position: absolute;
    left: 8px;
    color: #4a628a;
    font-weight: 700;
    font-size: 13px;
    pointer-events: none;
}


/* ============================================================
   PopUpAddClaim — סגנונות inline שחולצו מתוך תגיות ה-HTML
   ------------------------------------------------------------
   כל מחלקה כאן מחזיקה בדיוק את ההצהרות שהיו ב-style= על האלמנט,
   כך שהתצוגה נשמרת זהה. מחלקות אלו מופיעות אחרי בלוק ה-<style>
   המקורי כדי שמודיפיירים (margin/width וכו') יגברו על מחלקות הבסיס.
   ============================================================ */

/* שכבת הרקע של הפופאפ (יחד עם .popUpOut) */
.claim-popup-overlay {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    direction: ltr;
}

/* כותרת — קבוצת פעולות (חזרה / סגירה) */
.claim-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* כפתור "חזור" */
.claim-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f0f6ff;
    border: 1px solid #c5d8ff;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s;
}

.claim-back-btn-icon {
    color: #1a6cf5;
    font-size: 13px;
}

.claim-back-btn-text {
    font-size: 13px;
    font-weight: 600;
    color: #1a6cf5;
}

/* שורת בחירת סוג תביעה */
.claim-field-type-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.claim-type-col {
    flex-shrink: 0;
}

.claim-type-select {
    width: 200px;
}

/* הערת מימוש זכויות */
.claim-rights-note {
    display: none;
    align-self: flex-end;
    margin-bottom: 4px;
}

.claim-rights-note-text {
    color: #e67e22;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}

/* בלוק תביעה רגילה */
.claim-regular {
    display: none;
}

/* כותרת כיסויים + כפתור הוספה */
.claim-coverages-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 0 6px;
}

.claim-section-title-flush {
    margin: 0;
}

.claim-add-coverage-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #1a6cf5;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.claim-coverages-container {
    padding-left: 2px;
    flex-shrink: 0;
}

.claim-coverages-global-error {
    display: none;
    color: #e74c3c;
    font-size: 12px;
    font-weight: 600;
    margin-top: 6px;
}

/* שורת סכום כולל + סטטוס כללי */
.claim-summary-row {
    display: flex;
    gap: 20px;
    margin: 8px 0 10px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.claim-field-flush {
    margin: 0;
}

.claim-total-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.claim-total-input {
    width: 160px;
    padding: 9px 12px 9px 32px;
    border: 1px solid #c5d8ff;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #1a3a6b;
    background: #f3f6fb;
    cursor: default;
    outline: none;
}

.claim-total-shekel {
    position: absolute;
    left: 12px;
    color: #4a628a;
    font-weight: 700;
    font-size: 14px;
    pointer-events: none;
}

.claim-total-hint {
    font-size: 11px;
    color: #7a92b8;
}

.claim-status-wrap {
    margin-top: 6px;
}

.claim-overall-status {
    font-size: 14px;
    font-weight: 700;
    color: #27ae60;
}

/* אסמכתא כללית */
.claim-receipt-box {
    margin-top: 6px;
    padding: 10px 12px;
    background: #f7faff;
    border: 1px solid #e0ecff;
    border-radius: 10px;
}

.claim-receipt-required-note {
    color: #e74c3c;
    font-size: 11px;
    font-weight: 600;
    margin-right: 4px;
}

.claim-receipt-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.claim-receipt-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: #1a6cf5;
    color: #fff;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

.claim-receipt-uploaded {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #27ae60;
    font-weight: 600;
}

/* כפתורי אייקון קטנים (צפייה/הורדה/שינוי שם/מחיקה של אסמכתא) */
.claim-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
}

.claim-icon-blue {
    color: #1a6cf5;
}

.claim-icon-red {
    color: #e74c3c;
}

.claim-icon-green {
    color: #27ae60;
}

/* פקדים מוסתרים (FileUpload / כפתורי PostBack נסתרים) */
.claim-hidden {
    display: none;
}

/* FileUpload לאסמכתא — מוסתר מחוץ למסך (נשאר נגיש ל-PostBack) */
.claim-offscreen {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* בלוק מימוש זכויות */
.claim-rights {
    display: none;
}

/* סגירת תביעה (מימוש זכויות) — הצגה/הסתרה נשלטת ע"י DivCloseClaim.Visible בשרת
   (false בתביעה חדשה → לא מרונדר; true בעריכת מימוש-זכויות → מרונדר ומוצג).
   אין display:none כאן — אחרת הבלוק היה נשאר מוסתר גם כשהוא מרונדר בעריכה. */
.claim-close-block {
    margin-top: 14px;
    padding: 14px;
    background: #f7faff;
    border: 1px solid #e8f0fe;
    border-radius: 12px;
}

.claim-close-select {
    width: 60%;
    margin-top: 4px;
}

.claim-close-summary {
    display: none;
    margin-top: 10px;
}

.claim-close-summary-textarea {
    min-height: 70px;
}

/* שגיאות ולידציה בצד לקוח */
.claim-validation-errors {
    display: none;
    color: #e74c3c;
    font-size: 13px;
    margin-top: 8px;
    font-weight: 600;
}

/* חץ בכפתור "העלה קובץ" */
.claim-chevron {
    font-size: 10px;
    margin-right: 4px;
}

/* פופאפ בחירת קבצים קיימים */
.claim-files-picker-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.claim-files-picker-modal {
    background: #fff;
    border-radius: 14px;
    width: 560px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    direction: rtl;
    font-family: 'Segoe UI',Tahoma,sans-serif;
    overflow: hidden;
}

.claim-files-picker-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e8f0fe;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.claim-files-picker-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a3a6b;
}

.claim-files-picker-title-icon {
    color: #1a6cf5;
    margin-left: 8px;
}

.claim-files-picker-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: #999;
}

.claim-files-picker-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    min-height: 200px;
}

.claim-files-picker-loading {
    text-align: center;
    color: #999;
    padding: 20px;
}

.claim-files-picker-footer {
    padding: 12px 16px;
    border-top: 1px solid #e8f0fe;
    display: flex;
    gap: 10px;
    justify-content: flex-start;
}

.claim-files-picker-cancel {
    padding: 8px 16px;
    border: 1px solid #c5d8ff;
    border-radius: 8px;
    background: #fff;
    color: #4a628a;
    font-size: 13px;
    cursor: pointer;
}

/* שדה עריכת שם קובץ (inline) */
.claim-file-rename-input {
    flex: 1;
    padding: 5px 10px;
    border: 1px solid #c5d8ff;
    border-radius: 6px;
    font-size: 13px;
    color: #1a3a6b;
    outline: none;
    direction: rtl;
}

/* ── עריכת אמצעי תשלום inline בשורה אדומה (נכשל) בהיסטוריית תשלומים — הרשאה 1 בלבד ── */
/* התא נשאר בפריסתו הקיימת (text-align:center); רק האלמנטים הפנימיים מיושרים אנכית */
/* white-space: nowrap כדי שה-V וה-X (וגם הדרופדאון) יישארו באותה שורה ולא יישברו לשורות נפרדות */
.pm-edit {
    display: inline-block;
    white-space: nowrap;
}
.pm-text {
    vertical-align: middle;
}
.pm-pencil {
    color: #027aff;
    cursor: pointer;
    font-size: 12px;
    margin-inline-start: 4px;
    vertical-align: middle;
}
.pm-pencil:hover {
    color: #0098ff;
}
.pm-select {
    font-size: 12px;
    padding: 1px 3px;
    direction: rtl;
    vertical-align: middle;
}
.pm-save,
.pm-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    border: 1px solid;
    font-size: 11px;
    cursor: pointer;
    margin-inline-start: 2px;
    text-decoration: none;
    vertical-align: middle;
}
.pm-save {
    background-color: #e7f6ec;
    border-color: #16a34a;
    color: #16a34a;
}
.pm-save:hover {
    background-color: #16a34a;
    color: #ffffff;
}
.pm-cancel {
    background-color: #fdeaea;
    border-color: #dc2626;
    color: #dc2626;
}
.pm-cancel:hover {
    background-color: #dc2626;
    color: #ffffff;
}

/* ═══ feat/yehudit-18: ראש עמוד "ניהול - מבוטחים" ═══
   כל המחלקות כאן מקוננות תחת .insured-page-head בכוונה: .mainHeader, .SpanHeader
   ו-.col/.Header משותפות ל-5 עמודים, ואסור לשנות אותן גלובלית. */

/* רווח מכוון בין ראש העמוד לפאנל הסינון.
   ⚠️ הרווח שהיה כאן קודם לא היה מכוון — הוא נבע מ-60px גובה שמור של תיבת תוצאות
   החיפוש הריקה (ראו .ScrollableDiv למטה). התיבה מתכווצת מעתה ל-0 כשאין תוצאות,
   וההפרדה מגיעה מהערך הזה, שאפשר לכוון אותו בלי לגעת בשום דבר אחר. */
.insured-page-head {
    margin-bottom: 18px;

    /* רוחב אזור החיפוש (תיבה + "חפש"). משתנה ולא ערך כפול, כי **שני** כללים
       חייבים להישאר זהים: .insured-search-field ו-.ScrollableDiv (רשימת תוצאות
       החיפוש), שאחרת לא תשב מתחת לתיבה. לשנות כאן בלבד. */
    --insured-search-width: 370px;
}

/* הידוק כלפי מעלה — .mainHeader הגלובלית מגיעה עם margin-top: 2%. */
.insured-page-head .mainHeader {
    margin-top: 0.6%;
    margin-bottom: 0.4%;
}

/* כותרת המשנה בשורה **אחת** שלא נשברת.
   font-size ב-vw (ולא ב-pt) כדי שהיחס בין אורך הטקסט לרוחב העמודה יישמר בכל
   רזולוציה — ב-pt הטקסט היה נשבר במסכים צרים למרות ה-nowrap. */
.insured-page-head .insured-page-subtitle {
    display: block;
    white-space: nowrap;
    font-size: 1vw;
}

/* "צרף מבוטח חדש" + אקסל יושבים **בתוך שורת החיפוש**, מימין לתיבה ולכפתור "חפש".
   align-items: flex-end מיישר אותם לתחתית השורה — כלומר לגובה תיבת החיפוש עצמה
   ולא לגובה התווית שמעליה, כך שכל האלמנטים בשורה יושבים על אותו קו תחתון. */
/* ⇐ **gap הוא הרווח בין שלושת האלמנטים בשורה** (תיבת החיפוש ← אקסל ← "צרף
   מבוטח חדש"), וזה הערך היחיד שצריך לשנות כדי להגדיל או להקטין אותו. הוא נשאר
   שווה בשלושתם מעצמו, כי לאף אחד מהם אין margin אופקי משלו — למעט ה-margin
   השלילי של "צרף מבוטח חדש", שקיים בדיוק כדי שהרווח יימדד מקצה הכפתור
   ה**נראה** ולא מקצה הקנבס השקוף שלו (ראו ההערה שם). */
.insured-page-head .insured-search-row {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 25px;
}

/* התווית ותיבת החיפוש כיחידה אחת, כדי שהתווית תישאר מעל התיבה בלבד ולא מעל
   הכפתורים.
   ⚠️ **רוחב קבוע ולא flex-grow.** קודם היה כאן flex: 1 1 auto, והשדה נמתח על כל
   השטח הפנוי בעמודה (46% מהעמוד) — התיבה יצאה רחבה מדי, וכפתור "חפש" שלצידה
   נמתח איתה כי רוחבו הוגדר באחוזים.
   ⇐ **הרוחב מוגדר במשתנה --insured-search-width בראש הבלוק, וזה המקום היחיד
      שצריך לשנות** כדי להצר או להרחיב את אזור החיפוש.
   370px = תיבת החיפוש (298px) + הרווח (8px) + כפתור "חפש" (64px).
   ⚠️ **רצפה לרוחב הזה: ה-placeholder חייב להיכנס בשלמותו.**
      "חיפוש מבוטח במערכת לכל הסוכנים" = 31 תווים ב-13pt (≈17.3px), כלומר
      ~260px של טקסט, ועוד ~10px של padding וגבול ⇒ התיבה זקוקה ל-~270px
      לפחות, והשדה כולו ל-~342px. 370px נותן מרווח ביטחון של ~16% להבדלי
      רינדור בין מכונות. בגרסה קודמת היה כאן 300px וה-placeholder נחתך.
      אם מקטינים — לוודא בעין שהכיתוב עדיין נכנס במלואו. */
.insured-page-head .insured-search-field {
    flex: 0 0 auto;
    width: var(--insured-search-width);
    min-width: 0;
}

/* שורת התיבה + "חפש" שבתוך השדה. רווח קבוע ביניהם — .InputSearch ו-.BtnSearch
   מגיעות מ-web.css עם margin-right באחוזים (3% ו-2%), שנמדדו מול רוחב משתנה
   ונתנו רווח לא צפוי. מאופסים כאן, בתוך ה-scope של העמוד בלבד. */
.insured-page-head .insured-search-field > .row {
    gap: 15px;
}

.insured-page-head .insured-search-field .InputSearch {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    margin-right: 0;
    padding-right: 6px;
}

.insured-page-head .insured-search-field .BtnSearch {
    flex: 0 0 64px;
    width: 64px;
    margin-right: 0;
}

/* רשימת תוצאות החיפוש החי שמתחת לתיבה.
   ⚠️ ב-web.css היא מוגדרת height: 60px — **גובה קבוע**, שנשמר גם כשאין תוצאות.
   זה יצר 60px של שטח ריק מתחת לחיפוש, ומכיוון שגובה השורה נגזר מהעמודה הגבוהה
   ביותר — גם רווח מיותר מתחת לכותרת "ניהול - מבוטחים".
   max-height במקום height: התיבה מתכווצת ל-0 כשאין תוצאות, גדלה עם התוכן,
   ונעצרת עם גלילה כשיש הרבה תוצאות.
   מקונן תחת .insured-page-head; הכלל ב-web.css לא שונה.

   ⚠️ **המיקום האופקי.** האלמנט הוא פריט flex ב-.insured-search-col, שהיא
   flex-direction: column — כלומר הציר המשני שלה **אופקי**, וברירת המחדל
   (align-items: stretch) מתחה את הרשימה על כל רוחב העמודה (46% מהעמוד).
   ב-RTL הטקסט מתחיל מהקצה הימני, ולכן התוצאות הופיעו הרחק מימין לתיבת החיפוש
   במקום מתחתיה. הפתרון: אותו רוחב כמו שדה החיפוש + align-self: flex-end,
   שב-RTL מצמיד לשמאל — בדיוק לקצה שאליו מוצמד .insured-search-row
   (justify-content: flex-end). כך הקצה הימני של הרשימה מתלכד עם הקצה הימני
   של תיבת החיפוש, והתוצאות יושבות ישירות מתחתיה.

   הגובה הועלה מ-60px ל-120px: שורת תוצאה אחת ≈ 19px (10pt), כלומר ~6 תוצאות
   נראות בלי גלילה במקום ~3. מעבר לזה יש גלילה פנימית (overflow-y: auto
   מגיע מ-web.css). */
.insured-page-head .ScrollableDiv {
    height: auto;
    max-height: 120px;
    width: var(--insured-search-width);
    align-self: flex-end;
}

/* גודל הכפתורים — מיושר לשורת החיפוש שלצידם: כפתור "חפש" הוא 38px ותיבת החיפוש
   35px, ולכן 38px נותן גובה זהה לכפתור ומעט גבוה מהתיבה.
   המקור של Topbar_Add_New_Insured_Button.png הוא 184x60, כלומר כאן הוא מוקטן
   ל-~117x38. גובה בלבד + width: auto, כדי לא לעוות את יחס התמונה. */
.insured-page-head .insured-head-action-btn {
    height: 38px;
    width: auto;
    cursor: pointer;
    flex-shrink: 0;
}

/* "צרף מבוטח חדש" — ⚠️ לקובץ התמונה יש **6px שוליים שקופים מובנים בכל צד**:
   הקנבס הוא 184x60 אבל הכפתור הכחול הנראה הוא רק 172x48 (נמדד מהקובץ).
   לכן בגובה 38px הכפתור הנראה יצא ~30px בלבד, והוא נראה מוקף ברווח ריק.
   * height: 54px   → הכפתור הנראה יוצא ~43px (54 × 48/60), מעט גדול יותר מכפתור
                      "חפש" (38px) שלצידו. הוגדל מ-50px לבקשת המשתמשת.
   * margin: -5.4px → מבטל את השוליים השקופים (6px × 54/60 = 5.4px), כך שהאלמנט
                      תופס בפריסה בדיוק את שטח הכפתור הנראה, בלי הילה ריקה סביבו.
                      בזכות זה גם ה-gap של השורה נמדד מהקצה **הנראה** של
                      הכפתור, והרווח בינו לאייקון האקסל זהה לרווח שבין האקסל
                      לתיבת החיפוש. ⚠️ אם משנים את ה-height — לעדכן גם את הערך
                      הזה לפי הנוסחה 6 × height / 60, אחרת הרווחים יתפרקו.
   ⚠️ ה-margin השלילי מיועד **רק** לכפתור הזה. לאייקון האקסל אין שוליים שקופים
      (נמדד: 62x58 מלאים), ואם יוחל גם עליו הוא ייחתך ויידחף מהמקום. */
.insured-page-head .insured-head-add-btn {
    height: 54px;
    margin: -5.4px;
}

/* אייקון האקסל ריבועי (המקור 62x58, בלי שוליים שקופים) בעוד "צרף מבוטח חדש"
   מוארך — מעט נמוך יותר, כדי ששניהם ייראו באותו משקל.
   margin-bottom מרים אותו 3px מעל קו התחתית של השורה (align-items: flex-end),
   כדי שייראה ממורכז ביחס לתיבת החיפוש ולכפתורים ולא "יושב" נמוך מדי. */
.insured-page-head .insured-head-excel-btn {
    height: 40px;
    margin-bottom: 3px;
}

/* כל שדה מושבת בפופאפ "עריכת קריאה" מקבל את אותו מראה נעול.
   ⚠️ בלי הכלל הזה שדה מושבת נראה כמעט זהה לפתוח: .claim-input/.claim-select/
   .claim-textarea מגדירים background: #fff, וזה גובר על העיצוב שהדפדפן נותן
   לשדה disabled. הצבעים כאן זהים ל-.claim-select-readonly הקיימת.
   מקונן תחת .reading-body בלבד — פופאפ התביעה אינו מושפע. */
.reading-body .claim-select[disabled],
.reading-body .claim-input[disabled],
.reading-body .claim-textarea[disabled] {
    background: #f3f6fb !important;
    color: #6c7a92 !important;
    border-color: #d9e4f7 !important;
    cursor: not-allowed;
}

/* שדה נעול בפופאפ "עריכת קריאה" — לשימוש על עוטף .claim-field של קונטרול שאין לו
   תכונת Enabled ("תאריך יעד"), או שהמראה המושבת שלו חלש מדי ("הועבר ל").
   pointer-events: none חוסם את פתיחת לוח התאריך, ושאר הכללים נותנים את אותו מראה
   מושבת של .claim-select-readonly, כדי שכל השדות הנעולים ייראו אותו דבר.
   ⚠️ זו נעילה ויזואלית בלבד. האכיפה האמיתית היא בשרת (funcSaveReading), שם השדות
   הנעולים כלל אינם נכללים ב-UPDATE. */
.reading-field-locked {
    pointer-events: none;
}

    .reading-field-locked .single-date-input {
        background: #f3f6fb !important;
        color: #6c7a92 !important;
        border-color: #d9e4f7 !important;
    }

    .reading-field-locked .single-date-icon {
        opacity: 0.5;
    }

    /* "הועבר ל" (SearchableDropdown): הקונטרול לבדו נותן רק opacity: 0.6
       (.searchable-dropdown.disabled ב-Controls.css), שכמעט אינו נראה על תיבה לבנה.
       כאן הוא מקבל את אותו רקע אפור של שאר השדות הנעולים.
       ה-opacity מבוטל כדי שהטקסט יישאר קריא — האפרוריות מגיעה מהצבעים עצמם. */
    .reading-field-locked .searchable-dropdown {
        opacity: 1;
    }

    .reading-field-locked .search-input {
        background: #f3f6fb !important;
        color: #6c7a92 !important;
        border-color: #d9e4f7 !important;
        cursor: not-allowed;
    }

    .reading-field-locked .select-agent-arrow,
    .reading-field-locked .select-agent-icon {
        opacity: 0.5;
    }