/* ============================================================================
   "ספקים ממתינים לאישור", הטור השמאלי (עיצוב 3a, 3.11.2026): כרטיס הספק,
   המסמכים ככרטיסים, ההוצאות וההיסטוריה, והפוטר. המידות מהמפרט של 3a
   (חבילה 2), והצבעים שהוא נותן הוחלפו בקרובים מהפלטה הקיימת.
   (pending-suppliers-head.js, pending-suppliers-docs.js,
   pending-suppliers-extra.js, pending-suppliers-approve.js)

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

.pending-sup-detail { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #f8fafc; }
.pending-sup-detail-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.pending-sup-sup { display: flex; flex-direction: column; gap: 14px; padding: 16px 24px; }
.pending-sup-num { font-variant-numeric: tabular-nums; }
.pending-sup-pick { margin: auto; padding: 28px; text-align: center; font-size: 13px; color: #64748b; }

/* ── כרטיס הספק ──
   שם ומוסד מימין, ותאים של תווית מעל ערך, מופרדים בקו דק. */
.psh { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.psh-top { display: flex; align-items: center; flex-wrap: wrap; row-gap: 10px; padding: 12px 18px; }
.psh-main { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-inline-end: 16px; }
.pending-sup-sup-name {
    margin: 0; font-size: 18px; font-weight: 600; color: #1e293b; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.psh-inst { font-size: 13px; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psh-cells { display: flex; flex-wrap: wrap; row-gap: 8px; }
.psh-cell {
    min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 0 16px;
    border-inline-start: 1px solid #eef2f7;
}
.psh-cell-l { font-size: 12px; color: #64748b; white-space: nowrap; }
.psh-cell-v { font-size: 14px; font-weight: 500; color: #1e293b; white-space: nowrap; font-variant-numeric: tabular-nums; }
.psh-cell.is-wide .psh-cell-v { white-space: normal; }
.psh-muted { color: #64748b; font-weight: 500; }
.psh-partial { color: #92400e; font-weight: 500; }
.psh-banner {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px;
    padding: 8px 18px; border-top: 1px solid #e2e8f0; font-size: 14px; font-weight: 500;
}
.psh-banner.is-gap { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.psh-banner.is-ok { background: #ecfdf5; border-color: #d1fae5; color: #065f46; }
.psh-banner.is-quiet { background: #f8fafc; color: #64748b; font-weight: 500; }
.psh-banner-text { display: inline-flex; align-items: center; gap: 10px; }
/* עיגול מלא עם סימן לבן, כמו בעיצוב. */
.psh-banner-icon {
    flex: none; width: 18px; height: 18px; border-radius: 50%; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.psh-banner.is-gap .psh-banner-icon { background: #b45309; }
.psh-banner.is-ok .psh-banner-icon { background: #047857; }
.psh-banner-wait { font-size: 13px; font-weight: 500; }

/* ── המסמכים ── */
.psd { display: flex; flex-direction: column; gap: 10px; }
.psd-titlebar { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
.psd-title { margin: 0; font-size: 16px; font-weight: 600; color: #1e293b; }
.psd-count { font-size: 14px; color: #475569; font-variant-numeric: tabular-nums; }
.psd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.psd-card {
    position: relative; min-width: 0; display: flex; flex-direction: column;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden;
}
.psd-card.is-ok { border-color: #d1fae5; }
.psd-card-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.psd-card-icon {
    flex: none; width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}
.psd-card.is-ok .psd-card-icon { background: #d1fae5; color: #065f46; }
.psd-card.is-gap .psd-card-icon { background: #fef3c7; color: #92400e; }
.psd-card-name { min-width: 0; font-size: 15px; font-weight: 600; color: #1e293b; line-height: 1.3; overflow-wrap: anywhere; }
.psd-card-body { display: flex; flex-direction: column; gap: 6px; padding: 0 12px 10px; }

/* מסמך חסר: אזור גרירה מקווקו, 64 פיקסל. */
.psd-drop {
    min-height: 64px; padding: 6px 10px; border: 1.5px dashed #cbd5e1; border-radius: 10px; background: #f8fafc;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    font-size: 14px; color: #475569; text-align: center;
}
.psd-drop:hover, .psd-drop.is-drop { border-color: var(--color-primary, #2f4f7f); background: #eef2f7; color: var(--color-primary, #2f4f7f); }
.psd-pick { background: none; border: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.psd-wait { margin: 0; font-size: 13px; color: #92400e; }

/* מסמך שיש לו מצב: אריח ירוק עם ריבוע הסיומת, 64 פיקסל. */
.psd-tile {
    min-height: 64px; display: flex; align-items: center; gap: 12px; padding: 8px 14px;
    border-radius: 10px; background: #ecfdf5;
}
.psd-card.is-gap .psd-tile { background: #fffbeb; }
.psd-thumb {
    flex: none; width: 34px; height: 44px; border-radius: 4px; background: #fff; border: 1px solid #d1fae5;
    display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px;
    font-size: 10px; font-weight: 600; color: #065f46;
}
.psd-thumb svg { margin-bottom: 4px; }
.psd-card.is-gap .psd-thumb { border-color: #fde68a; color: #92400e; }
.psd-tile-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.psd-tile-line { font-size: 14px; font-weight: 500; color: #1e293b; overflow-wrap: anywhere; }
.psd-tile-acts { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.psd-link { background: none; border: none; padding: 0; font: inherit; font-size: 13px; color: #2563eb; cursor: pointer; }
.psd-link:hover:not(:disabled) { text-decoration: underline; }
.psd-facts { display: flex; flex-direction: column; gap: 1px; font-size: 12px; color: #64748b; }
.psd-file-until { color: #475569; }
.psd-file-until.is-expired { color: #991b1b; font-weight: 500; }
.psd-file-until.is-noexp { color: #92400e; font-weight: 500; }
.psd-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.psd-quiet { background: none; border: none; padding: 2px 0; font: inherit; font-size: 13px; color: #475569; cursor: pointer; text-align: start; }
.psd-quiet:hover:not(:disabled) { color: var(--color-primary, #2f4f7f); }
.psd-remove { margin-inline-start: auto; }
.psd-remove:hover:not(:disabled), .psd-undo:hover:not(:disabled) { color: #991b1b; }
.psd-mark, .psd-undo { align-self: flex-start; }
.psd-loose {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 10px 14px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; font-size: 14px; font-weight: 500; color: #1e293b;
}
.psd-loose .psd-tile { flex: 1 1 220px; }
.psd-busy { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; }
/* בזמן הטעינה: הכרטיסים כבר בגודלם, חיוורים, ו"טוען…" בפינה של כל אחד. */
.psd-card.is-loading .psd-card-body { opacity: 0.55; }
/* רשימת המסמכים של הארגון עוד לא ידועה: מקום בגובה שורת כרטיסים. */
.psd-wait-load {
    margin: 0; min-height: 132px; display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; font-size: 14px; color: #64748b;
}

/* ── ההוצאות וההיסטוריה ── */
.psx { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; }
.psx-card {
    min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
}
.psx-title { margin: 0; font-size: 15px; font-weight: 600; color: #1e293b; }
.psx-exps, .psx-evs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.psx-evs { gap: 10px; }
.psx-exp { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid #f1f5f9; font-size: 14px; }
.pending-sup-exp {
    min-width: 0; background: none; border: none; padding: 0; font: inherit; font-weight: 500;
    color: #2563eb; cursor: pointer; text-align: start; overflow-wrap: anywhere;
}
.psx-amt { flex: none; display: inline-flex; align-items: center; gap: 8px; color: #334155; font-variant-numeric: tabular-nums; }
.psx-exp.is-settled .psx-amt bdi { color: #64748b; }
.psx-paid { padding: 1px 8px; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: 12px; font-weight: 500; }
.psx-empty, .psx-more { margin: 0; font-size: 13px; color: #64748b; }
.psx-ev { display: flex; gap: 10px; font-size: 14px; color: #1e293b; }
.psx-ev-dot { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: #94a3b8; }
.psx-ev.is-done .psx-ev-dot { background: var(--color-success, #10b981); }
.psx-ev.is-wait .psx-ev-dot { background: var(--color-warning, #f59e0b); }
.psx-ev.is-error .psx-ev-dot { background: var(--color-danger, #ef4444); }
.psx-ev.is-created .psx-ev-dot { background: #94a3b8; }
.psx-ev.is-error .psx-ev-text { color: #991b1b; }
.psx-ev-main { min-width: 0; display: flex; flex-direction: column; }
.psx-ev-text { overflow-wrap: anywhere; }
.psx-ev-when { font-size: 12px; color: #64748b; }

/* ── הפוטר ──
   קבוע מתחת לגלילה, כדי שהכפתורים לא ייעלמו כשרשימת המסמכים ארוכה. */
.pending-sup-foot {
    flex: none; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px;
    padding: 14px 32px; border-top: 1px solid #e2e8f0; background: #fff;
}
.pending-sup-foot-hint { flex: 1 1 240px; min-width: 0; margin: 0; font-size: 14px; color: #475569; }
.pending-sup-foot-end { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.pending-sup-approve {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 10px;
    background: var(--color-primary, #2f4f7f); color: #fff;
    padding: 10px 18px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.pending-sup-approve:hover:not(:disabled) { background: #263f66; }
/* "אישור בלי המסמכים": טקסט בלבד, בלי מסגרת. */
.pending-sup-approve.is-ghost { background: transparent; color: #475569; padding: 10px 14px; font-weight: 500; }
.pending-sup-approve.is-ghost:hover:not(:disabled) { background: #f1f5f9; }
.pending-sup-approve:disabled { opacity: 0.6; cursor: default; }

/* ── פוקוס מקלדת ── */
.pending-sup-modal :is(.pending-sup-approve, .pending-sup-exp, .psd-link, .psd-pick, .psd-quiet):focus-visible,
.pending-sup-modal .psd-card :is(button, input):focus-visible {
    outline: 2px solid var(--color-primary, #2f4f7f); outline-offset: 2px;
}

/* במגע אין גרירה: האזור נשאר, רק בלי ההזמנה לגרור. */
@media (hover: none) {
    .psd-drop-hint { display: none; }
}

@media (max-width: 760px) {
    .pending-sup-sup { padding: 14px 16px; gap: 12px; }
    .psh-top { padding: 12px 14px; }
    .psh-main { flex-basis: 100%; padding-inline-end: 0; }
    .psh-cell:first-child { padding-inline-start: 0; border-inline-start: none; }
    .psh-banner { padding: 8px 14px; }
    .psd-grid { grid-template-columns: minmax(0, 1fr); }
    .psx { grid-template-columns: minmax(0, 1fr); }
    .pending-sup-foot { padding: 12px 16px; gap: 8px; }
    .pending-sup-foot-end, .pending-sup-approve { width: 100%; }
    .pending-sup-foot-end { gap: 8px; }
}

/* רוחב בינוני: שלושה כרטיסי מסמכים צרים מדי לאזור הגרירה ולתאריך. */
@media (min-width: 761px) and (max-width: 1100px) {
    .psd-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
    .psh-main { flex-basis: 100%; padding-inline-end: 0; }
    .psh-cell:first-child { padding-inline-start: 0; border-inline-start: none; }
}

/* מסך נמוך: הגוף כולו גולל, והפוטר נשאר בתחתית ברגע שהפרטים על המסך. בלי זה
   כפתורי האישור והבקשה היו גלילה שלמה מתחת לכרטיסים (עדשת ממשק, 667x375). */
@media (max-height: 520px) and (max-width: 1000px) {
    .pending-sup-detail-scroll { overflow: visible; }
    .pending-sup-foot { position: sticky; bottom: 0; z-index: 1; padding: 8px 16px; }
    .pending-sup-foot-hint { display: none; }
    .pending-sup-foot-end { width: 100%; flex-wrap: nowrap; }
    .pending-sup-foot-end .pending-sup-approve { width: auto; flex: 1 1 0; min-width: 0; white-space: normal; }
}

/* טלפון: הפס בכרטיס כבר אומר מה חסר, והפוטר שומר מקום לשני הכפתורים זה לצד זה. */
@media (max-width: 480px) {
    .pending-sup-foot-hint { display: none; }
    .pending-sup-foot-end { flex-wrap: nowrap; }
    .pending-sup-foot-end .pending-sup-approve { width: auto; flex: 1 1 0; min-width: 0; padding: 10px 10px; font-size: 13px; white-space: normal; }
}

/* מטרות מגע לפי סוג ההצבעה ולא לפי הרוחב. */
@media (pointer: coarse) {
    .pending-sup-approve, .psd-link, .psd-pick, .psd-quiet, .pending-sup-exp { min-height: 44px; }
    .psd-link, .psd-pick, .psd-quiet, .pending-sup-exp { display: inline-flex; align-items: center; }
    .psd-link, .psd-pick { min-width: 44px; justify-content: center; }
}