/* ============================================================================
   "ספקים ממתינים לאישור": החלון במסך הנהלת החשבונות, שני טורים (עיצוב 3a,
   29.10.2026, ובמלואו 3.11.2026). כאן: המעטפת, הכותרת עם שלושת המספרים,
   והטור הימני (חיפוש, סינון, רשימה בקבוצות). המצבים הריקים והשגיאה.
   (pending-suppliers-card.js, pending-suppliers-list.js, pending-suppliers-head.js)

   לא שייך לכאן: הטור השמאלי (pending-suppliers-detail.css), ורצועת הבקשה
   המשותפת לחלון "מסמכי ספק" (supplier-docs.css). הצבעים מהפלטה הקיימת ולא
   מחבילת העיצוב (DESIGN.md).
   ============================================================================ */

/* משקלי הגופן בחלון הזה דרגה אחת מתחת לעיצוב (בקשת בעלים, 3.11.2026):
   600 במקום 700, ו-500 במקום 600. */

/* ── מעטפת ──
   כותרת קבועה, ושני טורים שכל אחד גולל בעצמו. הפוטר של הטור השמאלי קבוע,
   כדי שכפתור האישור לא ייעלם כשרשימת המסמכים ארוכה.
   **גובה קבוע, 820 או 90% מהמסך** (בקשת בעלים, 3.11.2026): המפרט של 3a
   ביקש גובה לפי הפרטים, והחלון קפץ בכל מעבר בין ספק עם הוצאה אחת לספק עם
   שתים עשרה. הרשימה ממלאת את הטור שלה מבפנים, והפרטים גוללים בתוך הגובה. */
.modal-content.pending-sup-modal {
    width: 1300px; max-width: 95vw; height: min(820px, 90vh); max-height: 90vh;
    padding: 0; border-radius: 16px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3);
    /* clip ולא hidden: hidden עדיין נגלל מקוד (מיקוד, scrollIntoView), ואז
       הכותרת וכפתור הסגירה יוצאים מהמסך בלי פס גלילה להחזיר אותם. */
    overflow: hidden; overflow: clip; display: flex; flex-direction: column;
}
.pending-sup-head {
    flex: none; display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 18px 28px; border-bottom: 1px solid #e2e8f0;
}
.pending-sup-head-main { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 28px; }
.pending-sup-head-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pending-sup-title { margin: 0; font-size: 22px; font-weight: 600; color: #1e293b; }
.pending-sup-sub { margin: 0; font-size: 13px; color: #64748b; }
/* שלוש עמודות ברוחב שווה (הרחבה מכולן), כל מספר ממורכז מעל התווית שלו, וקו
   דק לפני כל אחת, כולל זו שליד הכותרת (בקשת בעלים: סימטרי). */
.pending-sup-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pending-sup-stat {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    min-width: 0; padding: 0 22px; border-inline-start: 1px solid #e2e8f0;
}
.pending-sup-stat-v { font-size: 22px; font-weight: 600; color: #1e293b; font-variant-numeric: tabular-nums; line-height: 1.25; white-space: nowrap; }
.pending-sup-stat-l { font-size: 13px; color: #64748b; white-space: nowrap; }
.pending-sup-stat.is-warn .pending-sup-stat-v { color: #b45309; }
/* כשהמספרים יורדים לשורה משלהם, הקו שלפני הראשון כבר לא מפריד דבר. */
@media (max-width: 1100px) {
    .pending-sup-stat:first-child { border-inline-start: none; padding-inline-start: 0; }
}
.pending-sup-close {
    flex: none; width: 40px; height: 40px; border: none; border-radius: 10px; background: transparent; color: #475569;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.pending-sup-close:hover { background: #eef2f7; }

.pending-sup-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pending-sup-grid {
    flex: 1 1 auto; min-height: 0; display: grid;
    grid-template-columns: 380px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
}

/* ── הטור הימני: חיפוש, סינון, רשימה ── */
/* הטור עצמו בלי גובה משלו (position: relative), והתוכן ממלא אותו. */
.pending-sup-listcol { position: relative; min-height: 0; background: #fff; border-inline-end: 1px solid #e2e8f0; }
.pending-sup-listin { position: absolute; inset: 0; display: flex; flex-direction: column; }
.pending-sup-listtop { flex: none; display: flex; flex-direction: column; gap: 12px; padding: 16px; }
/* רקע אפור בלי מסגרת. האפור של העיצוב קופל בסבב הצבעים, וזה הקרוב אליו בפלטה. */
.pending-sup-search {
    display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px;
    background: #f1f5f9; border: 1px solid transparent; border-radius: 10px; color: #64748b;
}
.pending-sup-search:focus-within { border-color: var(--color-primary, #2f4f7f); background: #fff; }
.pending-sup-search input {
    flex: 1; min-width: 0; border: none; outline: none; background: transparent;
    font: inherit; font-size: 14px; color: #1e293b;
}
.pending-sup-search input::placeholder { color: #64748b; }
.pending-sup-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.pending-sup-filter {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; color: #475569;
    padding: 5px 12px; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.pending-sup-filter bdi { font-size: 12px; font-weight: 600; opacity: 0.8; }
.pending-sup-filter.is-active { background: var(--color-primary, #2f4f7f); border-color: var(--color-primary, #2f4f7f); color: #fff; font-weight: 600; }
/* סינון שאין בו אף ספק: חלש יותר, אבל לחיץ וקריא (לא #94a3b8, שעל לבן הוא 2.56:1). */
.pending-sup-filter.is-empty { color: #64748b; border-color: #e2e8f0; }

.pending-sup-items {
    flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0;
    display: flex; flex-direction: column; gap: 2px; padding: 0 10px 10px;
}
.pending-sup-item {
    width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    border: none; border-radius: 12px; background: transparent;
    font: inherit; color: inherit; text-align: start; cursor: pointer;
}
.pending-sup-item:hover { background: #f1f5f9; }
/* הנבחר כמו בעיצוב: רקע בהיר ושם מודגש בכחול, בלי מסגרת ובלי פס. */
.pending-sup-item.is-selected { background: #eef2f7; }
/* כותרת קבוצה ברשימה: "ממתינים 4 ימים ומעלה" בענבר, השאר באפור. */
.pending-sup-group {
    display: flex; align-items: center; gap: 8px; padding: 10px 8px 6px;
    font-size: 12px; font-weight: 600; color: #64748b;
}
.pending-sup-group.is-long { color: #b45309; }
.pending-sup-group-line { flex: 1; height: 1px; background: #f1f5f9; }
.pending-sup-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pending-sup-item-top { min-width: 0; display: flex; align-items: center; gap: 6px; }
.pending-sup-item-name {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 15px; font-weight: 500; color: #1e293b;
}
.pending-sup-item.is-selected .pending-sup-item-name { font-weight: 600; color: var(--color-primary, #2f4f7f); }
/* כהה מ-#0ea5e9 של העיצוב, שהוא 2.7:1 על הרקע. */
.pending-sup-new { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #0284c7; }
/* הסכום והמסמכים באפור, כמו בעיצוב. */
/* שורה אחת רגילה ולא flex, כדי שהרווחים סביב הנקודה יישארו כמו בעיצוב. */
.pending-sup-item-sub { min-width: 0; font-size: 13px; color: #64748b; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pending-sup-item-docs { white-space: nowrap; }
.pending-sup-item-age { flex: none; font-size: 12px; font-weight: 500; color: #64748b; white-space: nowrap; }
.pending-sup-item-age.is-long { color: #b45309; }
.pending-sup-nomatch { padding: 28px 12px; text-align: center; font-size: 13px; color: #64748b; }
.pending-sup-keys {
    flex: none; display: flex; align-items: center; gap: 14px; margin: 0; padding: 10px 16px;
    border-top: 1px solid #f1f5f9; font-size: 12px; color: #64748b;
}
.pending-sup-key { display: inline-flex; align-items: center; gap: 4px; }
.pending-sup-keys kbd {
    border: 1px solid #cbd5e1; border-radius: 4px; background: #fff; padding: 0 5px;
    font: inherit; font-weight: 500; color: #475569;
}

/* ── אין ממתינים ── */
.pending-sup-done {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    padding: 40px; text-align: center;
}
.pending-sup-done-icon {
    width: 56px; height: 56px; border-radius: 50%; background: #d1fae5; color: #065f46;
    display: inline-flex; align-items: center; justify-content: center;
}
.pending-sup-done-title { margin: 0; font-size: 16px; font-weight: 600; color: #1e293b; }
.pending-sup-done-text { margin: 0; font-size: 13px; color: #64748b; }

/* ── שגיאה, על שני הטורים ── */
.pending-sup-card--error {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 22px;
    padding: 12px 16px; border-radius: 8px; background: #fef2f2; color: #991b1b;
}

.pending-sup-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── פוקוס מקלדת ──
   הכותרות מקבלות את הסמן אחרי אישור (tabindex=-1), ואינן מסומנות. */
.pending-sup-modal :is(.pending-sup-close, .pending-sup-filter, .pending-sup-item):focus-visible {
    outline: 2px solid var(--color-primary, #2f4f7f); outline-offset: 2px;
}
.pending-sup-modal :is(.pending-sup-sup-name, .pending-sup-done-title, .pending-sup-title):focus { outline: none; }
/* בתוך הרשימה הגוללת טבעת חיצונית נחתכת בשורה הראשונה. */
.pending-sup-modal .pending-sup-item:focus-visible { outline-offset: -2px; }

/* רמז החצים רק למי שיש לו מקלדת. */
@media (hover: none) {
    .pending-sup-keys { display: none; }
}

/* ── מסך צר: טור אחד, הרשימה למעלה ── */
@media (max-width: 760px) {
    .modal-content.pending-sup-modal { height: 90vh; max-height: 90vh; }
    .pending-sup-head { padding: 12px 16px; align-items: flex-start; }
    .pending-sup-stats { width: 100%; }
    .pending-sup-stat { padding: 0 8px; }
    .pending-sup-stat-v { font-size: 16px; }
    .pending-sup-stat-l { white-space: normal; }
    .pending-sup-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .pending-sup-listcol { max-height: 40vh; display: flex; flex-direction: column; border-inline-end: none; border-bottom: 1px solid #e2e8f0; }
    /* טור אחד: הרשימה בגובה התוכן שלה, עד הגבול, ולא שכבה על הטור. */
    .pending-sup-listin { position: static; flex: 1; min-height: 0; }
    .pending-sup-keys { display: none; }
}

/* מסך נמוך (טלפון לרוחב, גם רחב מ-760): אין גובה לשני אזורי גלילה, והפרטים
   נדחסו ל-128 פיקסל ב-844x390 (עדשת ממשק). כל הגוף גולל כאחד, הרשימה ואחריה
   הפרטים, והכותרת מצטמצמת. הפוטר דביק (pending-suppliers-detail.css). */
@media (max-height: 520px) and (max-width: 1000px) {
    .modal-content.pending-sup-modal { height: 96vh; max-height: 96vh; }
    .pending-sup-head { padding: 8px 16px; align-items: center; }
    .pending-sup-sub { display: none; }
    .pending-sup-title { font-size: 17px; }
    .pending-sup-stat { padding: 0 14px; }
    .pending-sup-stat-v { font-size: 15px; }
    .pending-sup-grid { display: block; overflow-y: auto; }
    .pending-sup-listcol { max-height: none; border-inline-end: none; border-bottom: 1px solid #e2e8f0; }
    .pending-sup-listin { position: static; }
    .pending-sup-items, .pending-sup-detail-scroll { overflow: visible; }
    .pending-sup-keys { display: none; }
}

/* מטרות מגע לפי סוג ההצבעה ולא לפי הרוחב. */
@media (pointer: coarse) {
    .pending-sup-close { width: 44px; height: 44px; }
    .pending-sup-filter, .pending-sup-item, .pending-sup-search { min-height: 44px; }
}

/* טלפון: הרשימה קצרה יותר, כדי שלפרטים ולמסמכים יישאר מקום מעל הפוטר. */
@media (max-width: 480px) {
    .pending-sup-listcol { max-height: 30vh; }
    .pending-sup-listtop { padding: 10px 12px 8px; gap: 8px; }
    .pending-sup-sub { display: none; }
    .pending-sup-stat { min-width: 0; }
    .pending-sup-stat-l { font-size: 11px; }
}