/* לשונית "חשבוניות נכנסות", עיצוב 2b (incoming-invoices-view.js, incoming-invoices-menu.js).
   כרטיס אחד: כותרת, לשוניות סינון, טבלה ושורת סיכום. צבעים מ-DESIGN.md בלבד.
   **לכרטיס אין overflow: hidden**: הכותרת הדביקה של הטבלה נצמדת למיכל הגלילה
   שלה, ותפריט "עוד" יושב ב-body. */
.inc-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); container: inc-card / inline-size; }

/* הפעמון קבוע בפינה העליונה בצד הסוף, ולכן 72px בצד הזה, כמו ב-.top-bar. */
.inc-head {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 18px 24px; padding-inline-end: 72px;
}
.inc-head-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0; }
.inc-h1 { margin: 0; font-size: 22px; font-weight: 700; color: #1e293b; }
.inc-head-count { font-size: 13px; color: #475569; }
.inc-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inc-head-actions > * { flex: none; white-space: nowrap; }
.inc-search {
    height: 38px; width: 240px; box-sizing: border-box; padding: 0 12px;
    display: flex; align-items: center; gap: 8px;
    border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; color: #64748b; cursor: text;
}
.inc-search input {
    flex: 1; min-width: 0; height: 100%; border: 0; padding: 0; background: transparent;
    font: inherit; font-size: 13px; color: #0f172a;
}
.inc-search input::placeholder { color: #64748b; }
.inc-search input:focus { outline: none; }
.inc-search:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--brand-primary-10, #2f4f7f1a); }
.inc-head-icon {
    width: 38px; height: 38px; box-sizing: border-box; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; color: #475569; cursor: pointer;
}
.inc-head-icon:hover { background: #f8fafc; }
.inc-head-btn { height: 38px; box-sizing: border-box; padding: 0 16px; font-size: 13px; font-weight: 600; }
.inc-head-btn--outline { padding: 0 14px; border: 1px solid #e2e8f0; background: #fff; color: #334155; }
.inc-head-btn--outline:hover { background: #f8fafc; }

/* לשוניות הסינון */
.inc-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 24px 14px; }
.inc-chip {
    padding: 5px 12px; border: 0; border-radius: 999px; cursor: pointer;
    font: inherit; font-size: 12.5px; font-weight: 500; background: #f1f5f9; color: #475569;
}
.inc-chip:hover { background: #e2e8f0; }
.inc-chip[aria-selected="true"] { background: var(--color-primary); color: #fff; font-weight: 600; }
.inc-chip:focus-visible, .inc-head-icon:focus-visible, .inc-icon-btn:focus-visible,
.inc-menu-item:focus-visible, .inc-row-btn:focus-visible, .inc-head-btn:focus-visible {
    outline: 2px solid var(--color-primary); outline-offset: 2px;
}

#incomingInvoicesPanel > .inc-banner, #incomingInvoicesPanel > .inc-hint { margin: 0 24px 12px; }
#incomingInvoicesContent > .inc-error { margin: 0 24px 24px; }

/* הטבלה (.data-table מ-base.css, עם המידות של העיצוב) */
/* בלי גלילה פנימית: הדף גולל, וכותרת הטבלה נצמדת לראש המסך. הטבלה לא גולשת
   לרוחב, כי מתחת לרוחב שלה היא הופכת לכרטיסים (למטה). */
.inc-table-wrap { border-radius: 0; max-height: none; overflow: visible; }
/* קו עליון בצל ולא בגבול: גבול על כותרת דביקה משאיר פס של פיקסל שהשורות
   הגוללות נראות דרכו (נמדד ב-107 מתוך 184 מצבי גלילה). */
.inc-table thead th { padding: 9px 11px; box-shadow: inset 0 1px 0 #e2e8f0; }
/* כפתור שמגיעים אליו ב-Shift+Tab נגלל אל מתחת לכותרת הדביקה, לא מאחוריה. */
.inc-table button { scroll-margin-top: 48px; }
.inc-table tbody td { padding: 12px 11px; vertical-align: middle; }
.inc-table th:first-child, .inc-table td:first-child { padding-inline-start: 24px; }
.inc-table th:last-child, .inc-table td:last-child { padding-inline-end: 24px; }
/* max-width על תא בטבלה אינו נאכף, ולכן הרוחב נקבע בתוכן: שורת הקובץ מקבלת
   רוחב 0 ומתמתחת לתא (min-width: 100%), כדי שהשם הארוך לא יקבע את רוחב העמודה. */
.inc-c-sup { min-width: 180px; }
.inc-sup-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inc-sup { font-size: 14px; font-weight: 600; color: #0f172a; overflow-wrap: anywhere; }
.inc-sup.is-state { font-weight: 500; color: #475569; }
.inc-sub {
    font-size: 12px; color: #64748b; margin-top: 2px; width: 0; min-width: 100%; max-width: 300px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inc-bits, .inc-note { font-size: 12px; color: #64748b; margin-top: 2px; overflow-wrap: anywhere; }
.inc-m-meta { display: none; }
/* שם מוסד ארוך נשבר בין מילים; קצר נשאר בשורה אחת ממילא. */
.inc-c-inst { color: #334155; min-width: 120px; overflow-wrap: anywhere; }
.inc-c-num, .inc-c-date { color: #334155; white-space: nowrap; }
.inc-c-num.is-long { white-space: normal; overflow-wrap: anywhere; min-width: 120px; }
.inc-c-num.is-long bdi { display: block; }
.inc-c-amt { color: #0f172a; font-weight: 600; white-space: nowrap; }
.inc-c-recv { color: #475569; white-space: nowrap; }
.inc-dash { color: #64748b; }
.inc-status, .inc-dup { font-size: 11.5px; font-weight: 600; border-radius: 6px; padding: 0 6px; white-space: nowrap; }
.inc-status { color: #475569; background: #f1f5f9; }
.inc-dup { color: #92400e; background: #fffbeb; border: 1px solid #fde68a; }
.inc-table tbody td.inc-empty-cell { padding: 32px 24px; text-align: center; font-size: 13px; color: #475569; }
.inc-table tbody tr.inc-empty-row:hover { background: transparent; }

/* פעולות בשורה */
.inc-acts { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.inc-icon-btn {
    flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f1f5f9; color: #475569; cursor: pointer;
}
.inc-icon-btn:hover:not(:disabled) { background: #e2e8f0; }
.inc-icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.inc-row-btn { height: 32px; box-sizing: border-box; padding: 0 14px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.inc-hint--inline { margin: 0; white-space: nowrap; }

.inc-foot { padding: 10px 24px; font-size: 12px; color: #64748b; border-top: 1px solid #f1f5f9; }

/* התפריט "עוד", ב-body */
.inc-menu {
    position: fixed; z-index: 1000; width: 200px; box-sizing: border-box; padding: 6px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    max-height: calc(100vh - 16px); overflow: auto;
}
.inc-menu[hidden] { display: none; }
.inc-menu-item {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%;
    padding: 9px 10px; border: 0; border-radius: 6px; background: transparent; cursor: pointer;
    font: inherit; font-size: 13px; color: #334155; text-align: start;
}
.inc-menu-item:hover, .inc-menu-item:focus { background: #f8fafc; }
.inc-menu-item.is-danger { color: #b91c1c; }
.inc-menu-item.is-danger:hover, .inc-menu-item.is-danger:focus { background: #fef2f2; }
.inc-menu-sub { font-size: 11.5px; color: #64748b; }
.inc-menu-item.is-danger .inc-menu-sub { color: #475569; }
.inc-menu-sep { height: 1px; background: #f1f5f9; margin: 4px 0; }

/* טעינה */
.inc-skel { padding: 0 24px 18px; }
.inc-skel-row { display: flex; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid #f1f5f9; }
.inc-skel-row span { height: 12px; border-radius: 6px; background: #f1f5f9; animation: inc-skel 1.2s ease-in-out infinite; }
.inc-skel-row span:nth-child(1) { flex: 3; }
.inc-skel-row span:nth-child(2) { flex: 1; }
.inc-skel-row span:nth-child(3) { flex: 1; }
@keyframes inc-skel { 50% { background: #e2e8f0; } }
@media (prefers-reduced-motion: reduce) { .inc-skel-row span { animation: none; } }

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

/* כרטיס צר מ-1060: כל שורה כרטיס. בנתונים הקשים (מספר של 12 תווים, סכום של
   שמונה ספרות, כפתורי "שויכה") הלשונית "הכל" צריכה 1048, נמדד. השאלה היא רוחב הכרטיס
   ולא רוחב המסך, כי סרגל הצד פתוח או מקופל משנה את המקום שנשאר. ספק וסכום
   ופעולות בשורה אחת, ומספר · תאריך · מוסד מתחת לספק. */
@container inc-card (max-width: 1059px) {
    .inc-table, .inc-table tbody { display: block; }
    .inc-table thead { display: none; }
    .inc-table tbody tr {
        display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 16px; align-items: center;
        padding: 12px 24px; border-top: 1px solid #f1f5f9;
    }
    .inc-table tbody td { display: none; padding: 0; border: 0; }
    .inc-table tbody td.inc-c-sup, .inc-table tbody td.inc-c-amt, .inc-table tbody td.inc-c-act { display: block; }
    .inc-table td:first-child, .inc-table td:last-child { padding-inline: 0; }
    .inc-c-sup { width: auto; min-width: 0; }
    .inc-c-amt .inc-dash { display: none; }
    .inc-m-meta { display: block; font-size: 12px; color: #334155; margin-top: 4px; overflow-wrap: anywhere; }
    .inc-table tbody tr.inc-empty-row { display: block; }
    .inc-table tbody tr.inc-empty-row td { display: block; padding: 32px 14px; }
}

/* טלפון: הפעולות יורדות לשורה משלהן, ברוחב מלא ובגובה 44. אין גלילה צדדית. */
@media (max-width: 768px) {
    .inc-head { padding: 14px; gap: 12px; }
    .inc-head-actions { flex: 1 1 100%; }
    .inc-search { flex: 1 1 100%; width: auto; height: 44px; }
    .inc-head-icon { width: 44px; height: 44px; }
    .inc-head-btn { height: 44px; flex: 1 1 auto; }
    .inc-chips { padding: 0 14px 12px; }
    .inc-chip { min-height: 44px; }
    #incomingInvoicesPanel > .inc-banner, #incomingInvoicesPanel > .inc-hint { margin: 0 14px 12px; }
    #incomingInvoicesContent > .inc-error { margin: 0 14px 14px; }
    .inc-table tbody tr { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 12px 14px; }
    .inc-sub { max-width: none; }
    .inc-table tbody td.inc-c-act { grid-column: 1 / -1; margin-top: 6px; }
    .inc-acts { justify-content: stretch; }
    .inc-acts > .inc-row-btn { flex: 1 1 0; height: 44px; }
    .inc-acts > .inc-icon-btn { width: 44px; height: 44px; }
    .inc-menu-item { min-height: 44px; justify-content: center; }
    .inc-foot { padding: 10px 14px; }
}