/* src/app/dan/documents.css — מסמכי הענף: העיצוב של דן, מועתק.
 * מקור: legacy/community/branch-documents.html
 * מסכים: src/app/screens/branch-documents.js — כל אחד עוטף את עצמו ב-`<div class="dan dan-<מודול>">`.
 * הנוהל: docs/runbooks/dan-design-port.md · הפלטה (`--d-*`): src/app/dan/dan.css.
 *
 * 🔴 01.10 · גיל: "תעתיק גם את הלוגיקה והפונקציונליות בדף וגם את העיצוב של כל המסכים, פשוט העתקה ממקום
 *    למקום. שיהיה אחד לאחד בכל הדפים." ⟹ זה ה-`<style>` של branch-documents.html, בתוספת מה שהדף לוקח
 *    מ-`assets/css/page.css` (כותרת · טבלה · כפתור · כרטיס · פיל), כל כלל בקידומת `.dan-documents`.
 *
 * ⚠️ מה שונה מהמקור, ולמה — שישה דברים בלבד:
 *  ① **אין `:root`, והפלטה היא `--d-*`** (src/app/dan/dan.css). `var(--green)` ⟶ `var(--d-green)`.
 *  ② **שמות שהתנגשו במעטפת:** `.topbar` ⟶ `.dtop` · `.count` ⟶ `.dcount` · `.empty` ⟶ `.dempty` —
 *     שלוש מחלקות לא-תחומות של packages/ui (הרשימה בנוהל). `.card` ⟶ `.dcard` מאותה סיבה.
 *  ③ **`th` ב-`--d-faint` ולא `--d-dim`** (#A3ACA5 = 2.33:1 על לבן — נכשל ב-axe wcag2aa; `--d-dim` מיועד
 *     לקווים ו-SVG, לא לטקסט).
 *  ④ **container query ולא media query** — רוחב התוכן תלוי במעטפת (סרגל פתוח/סגור), לא בחלון. ומתחת ל-780px
 *     הטבלה הופכת לכרטיסי תווית · ערך (בדן היא גוללת אופקית בתוך `.wrap` ועמודת "קובץ" נחתכת) — ראו בסוף.
 *  ⑤ **`line-height: normal`** — בדן אין `line-height` על `body`/`h1` (computed `normal`), ובמעטפת שלנו `base.css`
 *     קובע 1.6 לגוף ו-1.25 ל-`h1`. בלי זה כל הדף רופף ב-15–20% (נמדד על אותו נתון: שורת טבלה 72px מול 61px, כותרת
 *     משנה 24.8 מול 19, כפתור "ניקוי" 39.6 מול 34). הדיאלוג (ילד של המכל) מקבל בחזרה את הגובה של המעטפת.
 *  ⑥ **חריץ ההודעה החיה מוצמד, ושם קובץ ארוך נשבר** — שניהם תוצאה של תוספות עגור (הודעות מצב; שם קובץ בלי נקודות שבירה),
 *     שאין להן מקבילה בדן: ההודעה בזרימה הזיזה את הדף ב-20px, והשם הרחיב את הטבלה ל-946px ודחף את הפעולות החוצה.
 *
 * ➕ תוספות שאין בדן ונשארו כי הן יכולת אמיתית ומאומתת של עגור (ההעלאה · כרטיס "נדרשים וחסרים" ·
 *    כפתור "הורדה"): `.dbtn-solid` ו-`.dcard`/`.mrow` — באותה שפה (כפתור ירוק מ-page.css, כרטיס לבן).
 */

.dan-documents {
  /* הפלטה (`--d-*`) ב-src/app/dan/dan.css — המכל הוא `<div class="dan dan-documents">`. */
  container: dan-documents / inline-size;
  display: flex; flex-direction: column; gap: 22px;
  color: var(--d-text);
  /* ⑤ line-height: normal — על `.dan` ב-dan.css (01.10); `base.css` קובע 1.6 */
}
.dan-documents [hidden] { display: none !important; }
/* ⑤ — `base.css` קובע `h1,h2,h3 { line-height: var(--lh-tight) }` על האלמנט עצמו, ולכן הירושה מהמכל אינה מספיקה. */
.dan-documents h1, .dan-documents h2 { line-height: normal; }
/* ⑤ — הדיאלוג (kit) הוא צאצא של המכל ויורש ממנו; הוא של הערכה ולא של דן ⟹ חוזר לגובה של המעטפת. */
.dan-documents dialog { line-height: var(--lh-body); }

/* ---------- כותרת (`.topbar` ב-page.css) ---------- */
.dan-documents .dtop { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dan-documents h1 { font-size: 27px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; margin: 0 0 5px; }
/* הכותרת ממוקדת תוכנתית (`tabindex="-1"`) כשהשורה שהייתה ממוקדת נעלמה — אינה פקד, ולכן בלי טבעת. */
.dan-documents h1:focus { outline: none; }
.dan-documents .dtop .meta { font-size: 15.5px; color: var(--d-muted); }
/* חריץ ההודעה החיה (kit/message.js) — **מוצמד, לא בזרימה.** בזרימה הוא הזיז את כל הדף ב-20px בכל הופעה והעלמה
 * (ההודעה "המסמך הוסר." הייתה דוחפת את המסננים והטבלה). מוצמד מתחת לכותרת המשנה, בתוך הרווח של 22px שבין הכותרת למסננים
 * (`gap` של המכל): שורה אחת קצרה (`line-height` 18px + 2px) ⟹ אפס הזזה. ⚠️ `role="status"` נשאר — הקורא מסך שומע גם בלי לראות.
 * הודעה ארוכה (נדיר) גולשת לשורה שנייה ונוגעת בשולי כרטיס המסננים — לא נחתכת. המשוב שבשורה עצמה (כפתור "ההסרה נכשלה" ·
 * מסגרת כתומה על התוקף) הוא של דן והוא שנראה למי שגלל. */
.dan-documents .dtop > div:first-child { position: relative; }
.dan-documents .kit-status { position: absolute; inset-inline-start: 0; inset-block-start: 100%; margin: 2px 0 0; min-height: 0;
  max-inline-size: 100%; line-height: 18px; font-size: 13.5px; z-index: 1; }

/* `.btn-solid` של page.css — ההעלאה אינה בדן (הדף שלהם מפנה ל"כשירות הצוות"), אך נשארת כאן באותו כפתור. */
.dan-documents .dbtn-solid { font-family: inherit; font-size: 15px; font-weight: 600; color: #fff; background: var(--d-green);
  border: 0; border-radius: 999px; padding: 12px 22px; cursor: pointer; box-shadow: 0 8px 20px rgba(14,122,85,.22); }
.dan-documents .dbtn-solid:hover { background: var(--d-green-dark); }

/* ---------- כרטיס "נדרשים וחסרים" (עגור — `document_requirement`; אין בדן) ---------- */
.dan-documents .dcard { background: #fff; border-radius: 22px; padding: 22px 26px; box-shadow: var(--d-shadow);
  display: flex; flex-direction: column; gap: 14px; }
.dan-documents .dcard h2 { font-size: 17px; font-weight: 600; color: var(--d-ink); margin: 0; }
.dan-documents .cardhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dan-documents .pill-warn { font-size: 13px; font-weight: 600; color: var(--d-orange-ink); background: var(--d-orange-soft);
  border-radius: 999px; padding: 3px 10px; white-space: nowrap; flex: none; }
.dan-documents .mlist { display: flex; flex-direction: column; gap: 8px; }
.dan-documents .mrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--d-cream2); border-radius: 14px; padding: 12px 16px; }
.dan-documents .mrow .mt { font-size: 14.5px; font-weight: 500; color: var(--d-text); }

/* ---------- סינון ---------- */
.dan-documents .filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; background: #fff;
  border-radius: 16px; padding: 14px 16px; box-shadow: var(--d-shadow); }
.dan-documents .filters label { display: flex; flex-direction: column; gap: 4px; }
.dan-documents .filters .fl { font-size: 12px; color: var(--d-faint); padding-inline-start: 2px; }
.dan-documents .filters select { font-family: inherit; font-size: 14px; color: var(--d-text); background: #fff;
  border: 1px solid var(--d-line); border-radius: 10px; padding: 9px 11px; min-height: 40px; min-width: 150px; }
.dan-documents .filters select:focus-visible { outline: 2px solid var(--d-green); outline-offset: 1px; }
.dan-documents .clearf { font-family: inherit; font-size: 13.5px; color: var(--d-muted); background: none; border: 0;
  padding: 9px 12px; border-radius: 9px; cursor: pointer; align-self: end; }
.dan-documents .clearf:hover { background: var(--d-track); color: var(--d-orange-ink); }
.dan-documents .clearf:disabled { color: var(--d-dim); cursor: default; background: none; }
.dan-documents .clearf[aria-pressed="true"] { background: var(--d-orange-soft); color: var(--d-orange-ink); font-weight: 500; }
.dan-documents .dcount { margin-inline-start: auto; font-size: 13.5px; color: var(--d-faint); align-self: end; padding-bottom: 9px; }

/* ---------- הטבלה (`table` · `th` · `td` של page.css) ---------- */
.dan-documents .wrap { background: #fff; border-radius: 18px; box-shadow: var(--d-shadow); padding: 6px 22px 10px; overflow-x: auto;
  position: relative; /* מחזיק את `.sr-only` של כותרת הפעולות — בלעדיו הוא בורח מה-overflow ומרחיב את העמוד */ }
.dan-documents table { width: 100%; border-collapse: collapse; }
.dan-documents th { text-align: start; font-size: 13px; font-weight: 500; color: var(--d-faint); padding: 0 10px 11px;
  letter-spacing: .02em; border-bottom: 1px solid var(--d-line-soft); white-space: nowrap; }
.dan-documents td { font-size: 14.5px; padding: 13px 10px; border-bottom: 1px solid #F6F3EA; color: var(--d-body); }
.dan-documents tr:last-child td { border-bottom: 0; }
.dan-documents td.nm { font-weight: 500; color: var(--d-text); }
/* שם קובץ בלי נקודות שבירה (`אישור_כיבוי_אש_2026.pdf`) היה מרחיב את הטבלה ל-946px ודוחף את הפעולות מחוץ ל-`.wrap`;
 * עם `anywhere` הוא נשבר, ו-`min-width` מונע ממנו להידחס לאות בשורה כשהמקום מצומצם. */
.dan-documents td[data-label="קובץ"] { overflow-wrap: anywhere; min-width: 11rem; }
.dan-documents .dempty { background: #fff; border-radius: 18px; box-shadow: var(--d-shadow); padding: 34px;
  text-align: center; color: var(--d-faint); font-size: 15px; line-height: 1.7; }
.dan-documents .dempty a { color: var(--d-green-dark); font-weight: 500; }
.dan-documents .dnote { margin: 10px 4px 0; }

.dan-documents .see { font-family: inherit; font-size: 13px; font-weight: 500; color: var(--d-green-dark); background: var(--d-mint);
  border: 0; border-radius: 999px; padding: 5px 12px; text-decoration: none; white-space: nowrap; cursor: pointer; }
.dan-documents .see:hover { background: #D9EDE2; color: var(--d-green-dark); }
.dan-documents .del, .dan-documents .dl { font-family: inherit; font-size: 13px; color: var(--d-faint); background: none; border: 0;
  padding: 5px 9px; border-radius: 8px; cursor: pointer; }
.dan-documents .del:hover { color: var(--d-orange-ink); background: var(--d-orange-soft); }
.dan-documents .dl:hover { color: var(--d-green-dark); background: var(--d-mint); }
.dan-documents .acts { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.dan-documents .exp { font-size: 12.5px; color: var(--d-faint); }
.dan-documents .exp.soon { color: #6E5A2E; font-weight: 500; }
.dan-documents .exp.gone { color: var(--d-orange-ink); font-weight: 500; }
/* שורת הגיבוב (sha256 מקוצר) — הזהות של הקובץ, בשורה משלה מתחת לשם (עגור; אין בדן). */
.dan-documents .hash { display: block; margin-top: 2px; }
/* שדה התוקף נערך במקום — תאריך שהוקלד שגוי הוא הטעות שתקרה בפועל, ובלי עריכה התיקון
   היחיד היה מחיקה והעלאה מחדש, שמשאירה רשומת "הוסר" מיותרת בהיסטוריה. */
.dan-documents td input[type="date"] { font-family: inherit; font-size: 13.5px; color: var(--d-text); background: #fff;
  border: 1px solid var(--d-line); border-radius: 8px; padding: 5px 7px; }
.dan-documents td input[type="date"]:focus-visible { outline: 2px solid var(--d-green); outline-offset: 1px; }
.dan-documents .rest { font-family: inherit; font-size: 13px; font-weight: 500; color: var(--d-green-dark);
  background: var(--d-mint); border: 0; border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.dan-documents .rest:hover { background: #D9EDE2; }

/* ---------- רוחב צר (375) ----------
 * ⚠️ סטייה מדן: בדן הטבלה גוללת אופקית בתוך `.wrap` ועמודת "קובץ" נחתכת. כאן, מתחת ל-780px, כל שורה הופכת לכרטיס של
 * תווית · ערך (אותה שיטה כמו `.table[data-label]` ב-packages/ui) — בלי גלילה כלל. הכותרת נשארת בעץ, מוסתרת חזותית.
 * 🔴 הסף היה 560 ונמדד קצר: הטבלה (שישה טורים + `input[type=date]` + שלושה כפתורים) צריכה **753px** במכל (709 טבלה +
 * 44 ריפוד `.wrap`, נמדד ב-Chrome עם `table{width:1px}`), ובאזור 561–752 היא גללה אופקית ועמודת הפעולות נחתכה — וגם
 * ב**חלון** של 900px, כי הסרגל הפתוח משאיר למכל ~590. 780 = הצורך + שוליים. */
@container dan-documents (max-width: 780px) {
  .dan-documents .wrap { padding: 4px 14px 8px; overflow-x: visible; }
  .dan-documents .dcard { padding: 18px; }
  .dan-documents .dempty { padding: 24px 18px; }
  .dan-documents .filters select { min-width: 0; }
  .dan-documents .filters label { flex: 1 1 130px; }
  .dan-documents thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dan-documents table, .dan-documents tbody, .dan-documents tr, .dan-documents td { display: block; }
  .dan-documents tr { padding: 12px 0; border-bottom: 1px solid var(--d-line-soft); }
  .dan-documents tr:last-child { border-bottom: 0; }
  .dan-documents td { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); gap: 8px; align-items: baseline;
    padding: 4px 2px; border-bottom: 0; overflow-wrap: anywhere; }
  .dan-documents td[data-label]::before { content: attr(data-label); font-size: 12.5px; color: var(--d-faint); }
  .dan-documents td:not([data-label]) { grid-template-columns: minmax(0, 1fr); padding-top: 8px; }
  .dan-documents .acts { justify-content: flex-start; flex-wrap: wrap; }
}