/* src/app/dan/approvals.css — אישורים: העיצוב של דן, מועתק.
 * מקור: legacy/community/approvals.html (ה-<style> של הדף) + מה שהוא צריך מ-assets/css/page.css
 * (.topbar · h1 · .kpis/.kpi · table/th/td) + סבב החתימות מ-assets/js/journey-stepper.js (CSS שדן מזריקה מה-JS).
 * מסכים: src/app/screens/community-approvals.js — עוטף את עצמו ב-`<div class="dan dan-approvals apage">`,
 * ואת תוכן שני הדיאלוגים (שיושבים ב-document.body, מחוץ ל-main) ב-`<div class="dan dan-approvals dlg">`
 * — כדי שהפלטה (`--d-*`, src/app/dan/dan.css) תחול גם שם.
 * הנוהל: docs/runbooks/dan-design-port.md.
 *
 * ⚠️ מה שונה מהמקור, ולמה — חמישה דברים בלבד:
 *  ① **כל כלל תחום ל-`.dan-approvals`**, צבעים `var(--d-*)`, ובלי `:root`/`[hidden]` גלובלי (dan.css נושא אותו).
 *  ② **שמות שהתנגשו ב-packages/ui / kit.css קיבלו שם מקומי:** `.btn`⟶`.abtn` · `.pill`⟶`.dpill` · `.empty`⟶`.dempty` ·
 *     `.topbar`⟶`.dtop`. (`.btn` של המעטפת הוא כפתור ירוק מלא; `.pill` צובע טקסט; `.empty` מרכז — כולם היו נשפכים פנימה.)
 *  ③ **container query ולא media query** — רוחב התוכן תלוי במעטפת (סרגל פתוח/סגור). `@media (max-width:820px)` של דן
 *     ⟶ `@container aprv`, והדיאלוג (שרוחבו של kit-dialog, לא של החלון) ⟶ `@container adlg`.
 *  ④ **הדיאלוגים הם kit-dialog** (`<dialog>` אמיתי, מלכודת מיקוד, Escape) ולא `dialog.wide` בנוי-ביד כמו בדן: מעטפת
 *     הדיאלוג (כותרת · X · רקע) היא של kit.css, ופה רק התוכן — אותה החלטה כמו ב-manager.css.
 *  ⑤ `td.acts` ו-`.acts` של דן נושאים אותו שם: ה-`display:flex` של `.acts` חל בדן גם על ה-`<td>` (תא טבלה שהפך ל-flex אינו
 *     תא עוד, וגם לא נכנס ל-`vertical-align:middle` של שאר השורה). ⟹ `div.acts` בלבד לפלקס; התא נשאר תא.
 * ⚠️ תוספת אחת שאין בדן: `.dpill.rej` — דן אינה מציגה נדחות בטבלה (רק ממתינות ואושרו), ובעגור "הוכרעו לאחרונה" כוללת גם
 *    נדחות. אותו צבע כמו `.note.warn` של דן, כדי שנדחית לא תיראה כאושרה.
 * 🔴 ניגודיות AA נמדדה לכל זוג צבעים כאן (≥ 4.5:1): orange-ink על cream-2 4.96 · על orange-soft 4.64 · על לבן 5.27 ·
 *    muted על #F1EFE8 4.67 · green על לבן 5.34 · green-dark על mint 6.51 · לבן על green 5.34 · #8E2A20 על #FDECEA 7.34.
 */

/* ---------- הדף ---------- */
.dan-approvals.apage { container: aprv / inline-size; display: flex; flex-direction: column; gap: 22px; }

/* ---------- כותרת ---------- */
.dan-approvals .dtop { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dan-approvals h1 { font-size: 27px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; margin: 0 0 5px; }
.dan-approvals .dtop .meta { font-size: 15.5px; color: var(--d-muted); }

/* ---------- שלושת המונים · שניים מהם הם בדיוק שתי הלשוניות שמתחתם ---------- */
.dan-approvals .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dan-approvals .kpi { min-width: 0; background: #fff; border-radius: 18px; padding: 20px 22px; box-shadow: var(--d-shadow);
  display: flex; flex-direction: column; gap: 6px; }
.dan-approvals .kpi .l { font-size: 14px; color: var(--d-faint); }
.dan-approvals .kpi .v { font-size: 30px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; }
.dan-approvals .kpi .s { font-size: 13.5px; color: var(--d-green); }
.dan-approvals .kpi .s.warn { color: var(--d-orange-ink); }
.dan-approvals .kpi .s.mute { color: var(--d-faint); }
.dan-approvals button.kpi { font: inherit; color: inherit; text-align: start; width: 100%; cursor: pointer;
  border: 1px solid transparent; transition: border-color .12s; }
.dan-approvals button.kpi:hover { border-color: #D8E3DA; }
.dan-approvals button.kpi:focus-visible { outline: 2px solid var(--d-green); outline-offset: 2px; }

/* ---------- לשוניות ---------- */
.dan-approvals .views { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.dan-approvals .views button { font-family: inherit; font-size: 15px; border: 1px solid #D8E3DA; background: #fff;
  padding: 9px 18px; border-radius: 999px; cursor: pointer; color: var(--d-muted); }
.dan-approvals .views button.on { background: var(--d-green); border-color: var(--d-green); color: #fff; font-weight: 600; }
/* חריץ ההודעה החיה (kit-status) — ריק ⟹ בלי גובה; kit.css נותן לו `min-height:1.2em` שהיה מוסיף רווח ריק בין הלשוניות לטבלה. */
.dan-approvals .kit-status { min-height: 0; margin: 0; }
.dan-approvals .kit-status:not(:empty) { margin: -4px 0 14px; font-size: 14px; }
.dan-approvals .kit-status--ok { color: var(--d-green-dark); }
.dan-approvals .kit-status--wait { color: var(--d-muted); }
.dan-approvals .kit-status--err { color: var(--d-orange-ink); }

/* ---------- גלולות ---------- */
.dan-approvals .dpill { font-size: 12.5px; border-radius: 999px; padding: 3px 10px; white-space: nowrap; display: inline-block; }
.dan-approvals .dpill.review { background: var(--d-cream2); color: var(--d-orange-ink); border: 1px solid #F0E4D2; }
.dan-approvals .dpill.ok { background: var(--d-mint); color: var(--d-green-dark); }
.dan-approvals .dpill.off { background: #F1EFE8; color: var(--d-muted); }
.dan-approvals .dpill.rej { background: var(--d-orange-soft); color: var(--d-orange-ink); }

/* ---------- פאנל הלשונית: ההודעה על הסמכות והטבלה ---------- */
/* ⚠️ בדן כל בלוק הוא ילד ישיר של `main` (gap:22px) ואין בו פס שנדבק לטבלה. כאן ההודעה (`.note`) והטבלה הם שני ילדים של אותו `[data-ca-panel]`, בלוק רגיל בלי
 * מרווח ⟹ הפס הקרם נגע בכרטיס הלבן (0px, נמדד ב-1280 וב-375). `[hidden]` של dan.css (`!important`) עדיין מסתיר את הפאנל הלא-פעיל. */
.dan-approvals [data-ca-panel] { display: flex; flex-direction: column; gap: 14px; }

/* ---------- הטבלה ---------- */
/* ⚠️ `position:relative`: ה-`.sr-only` (position:absolute) שבכותרת העמודה האחרונה היה נקשר לחלון ולא לגלילה הפנימית, ובמובייל — שם הטבלה
 * רחבה מהמסך וגוללת בתוך `.tbl` — היה מרחיב את המסמך כולו שמאלה (scrollWidth 419/375, נמדד ב-Chrome ב-375). */
.dan-approvals .tbl { position: relative; background: #fff; border-radius: 16px; box-shadow: var(--d-shadow); overflow: auto; }
.dan-approvals table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.dan-approvals th { font-weight: 500; color: var(--d-faint); font-size: 13px; text-align: start; padding: 12px 14px;
  border-bottom: 1px solid #EEF2EE; white-space: nowrap; letter-spacing: .02em; }
.dan-approvals td { padding: 12px 14px; border-bottom: 1px solid #F3F5F2; vertical-align: middle; color: var(--d-body); }
.dan-approvals tr:last-child td { border-bottom: 0; }
.dan-approvals tr.r { cursor: pointer; }
.dan-approvals tr.r:hover td { background: #FAFCFA; }
.dan-approvals td .n { font-weight: 600; color: var(--d-ink); }
.dan-approvals td .s { font-size: 12.5px; color: var(--d-faint); display: block; margin-top: 2px; }
.dan-approvals td.acts { white-space: nowrap; }
.dan-approvals td.acts button { font-family: inherit; font-size: 12.5px; border: 1px solid #D8E3DA; background: #fff;
  border-radius: 999px; padding: 5px 10px; cursor: pointer; color: var(--d-green-dark); margin-inline-start: 4px; }
/* שם הבקשה הוא `<button>` — מקלדת ו-Enter מגיעים איתו; בדן הלחיצה הייתה על ה-`<tr>` בלבד (עכבר). */
.dan-approvals .nbtn { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0;
  text-align: start; cursor: pointer; }
.dan-approvals .nbtn:hover .n { text-decoration: underline; }
.dan-approvals .nbtn:focus-visible { outline: 2px solid var(--d-green); outline-offset: 2px; border-radius: 4px; }

.dan-approvals .dempty { background: #fff; border-radius: 16px; padding: 26px; text-align: center; color: var(--d-muted);
  box-shadow: var(--d-shadow); line-height: 1.7; }

/* ---------- תוכן הדיאלוגים (המעטפת היא kit-dialog) ---------- */
.dan-approvals.dlg { container: adlg / inline-size; display: flex; flex-direction: column; gap: 14px; }
.dan-approvals.dlg h3 { margin: 10px 0 0; font-size: 15px; font-weight: 600; color: var(--d-ink); }
.dan-approvals .dlgf { display: flex; flex-direction: column; gap: 14px; }

.dan-approvals .abtn { font-family: inherit; font-size: 14.5px; font-weight: 500; border-radius: 999px; padding: 10px 18px;
  cursor: pointer; border: 1px solid #D8E3DA; background: #fff; color: var(--d-green); text-decoration: none; display: inline-block; }
.dan-approvals .abtn:hover { background: #F4F8F5; }
.dan-approvals .abtn.solid { background: var(--d-green); color: #fff; border-color: var(--d-green); font-weight: 600; }
.dan-approvals .abtn.solid:hover { background: var(--d-green-dark); color: #fff; }
.dan-approvals .abtn.warn { color: var(--d-orange-ink); border-color: var(--d-orange); }
.dan-approvals .abtn.sm { font-size: 13.5px; padding: 7px 13px; }
.dan-approvals .abtn:disabled { opacity: .5; cursor: not-allowed; }

.dan-approvals .f { display: flex; flex-direction: column; gap: 5px; }
.dan-approvals .f label { font-size: 13.5px; color: var(--d-muted); }
.dan-approvals .f input, .dan-approvals .f select, .dan-approvals .f textarea { font-family: inherit; font-size: 15px;
  padding: 10px 12px; border: 1px solid #D8E3DA; border-radius: 10px; background: #fff; color: var(--d-text); width: 100%; }
.dan-approvals .f textarea { min-height: 80px; resize: vertical; }
.dan-approvals .f .hint { font-size: 12.5px; color: var(--d-faint); }
.dan-approvals .err { font-size: 13.5px; color: #8E2A20; background: #FDECEA; border-radius: 10px; padding: 8px 12px; margin: 0; }
.dan-approvals .note { font-size: 14px; background: var(--d-cream2); border-radius: 10px; padding: 10px 14px; line-height: 1.6; }
.dan-approvals .note.warn { background: var(--d-orange-soft); color: var(--d-orange-ink); }
.dan-approvals .note.ok { background: var(--d-mint); color: var(--d-green-dark); }
.dan-approvals .note ul { margin: 6px 0 0; padding-inline-start: 18px; }
.dan-approvals .dlgfoot { display: flex; gap: 8px; justify-content: flex-start; padding-top: 4px; flex-wrap: wrap; align-items: center; }

/* ---------- מגירת הפרטים ---------- */
.dan-approvals .dhead { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.dan-approvals .dhead .meta { font-size: 13.5px; color: var(--d-muted); display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.dan-approvals .cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; }
.dan-approvals .cols > * { min-width: 0; }
.dan-approvals .sec { display: flex; flex-direction: column; gap: 8px; }
.dan-approvals .kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 14px; margin: 0; }
.dan-approvals .kv dt { color: var(--d-faint); }
.dan-approvals .kv dd { margin: 0; overflow-wrap: anywhere; }
.dan-approvals .timeline { list-style: none; margin: 0; padding: 0; }
.dan-approvals .timeline li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; padding: 6px 0; font-size: 13.5px; position: relative; }
.dan-approvals .timeline li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--d-green); margin-top: 6px; justify-self: center; }
.dan-approvals .timeline li.int::before { background: var(--d-dim); }
.dan-approvals .timeline li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 7px; top: 20px; bottom: -6px; width: 2px; background: var(--d-line); }
.dan-approvals .timeline .w { color: var(--d-faint); font-size: 12.5px; }
.dan-approvals .timeline .cmt { margin-top: 3px; background: var(--d-cream2); border-radius: 8px; padding: 6px 10px; white-space: pre-wrap; }
.dan-approvals div.acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.dan-approvals .acts .abtn { font-size: 13.5px; padding: 8px 14px; }
.dan-approvals .acts .why { font-size: 12.5px; color: var(--d-orange-ink); }
.dan-approvals .jump { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0 2px; font-size: 13px; }
.dan-approvals .jump a { color: var(--d-green); text-decoration: none; border-bottom: 1px solid transparent; }
.dan-approvals .jump a:hover { border-bottom-color: currentColor; }
.dan-approvals .cand { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }

/* ---------- סבב החתימות (journey-stepper.js של דן) ---------- */
.dan-approvals .kd-chain-title { font-size: 12.5px; color: var(--d-muted); margin: 8px 0 0; }
.dan-approvals .kd-chain { display: flex; align-items: stretch; gap: 0; margin: 6px 0 8px; flex-wrap: wrap; }
.dan-approvals .kd-chain .c { flex: 1; min-width: 150px; position: relative; padding: 8px 10px 8px 6px; border-radius: 10px;
  background: var(--d-cream2); margin-inline-end: 18px; font-size: 12.5px; line-height: 1.35; color: var(--d-muted); }
.dan-approvals .kd-chain .c:last-child { margin-inline-end: 0; }
.dan-approvals .kd-chain .c:not(:last-child)::after { content: ""; position: absolute; left: -14px; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--d-muted); border-bottom: 2px solid var(--d-muted); transform: translateY(-50%) rotate(135deg); }
.dan-approvals .kd-chain .c b { display: block; color: var(--d-ink); font-weight: 600; font-size: 13px; }
.dan-approvals .kd-chain .c .st { display: inline-block; font-size: 11.5px; border-radius: 999px; padding: 1px 8px; margin-top: 3px;
  background: #fff; border: 1px solid #E0DBD0; }
.dan-approvals .kd-chain .c.done { background: #E6F1EA; }
.dan-approvals .kd-chain .c.done .st { background: var(--d-green); color: #fff; border-color: var(--d-green); }
.dan-approvals .kd-chain .c.pending { background: #FFF7E6; box-shadow: inset 0 0 0 2px #E8B04A; }
.dan-approvals .kd-chain .c.pending .st { background: #E8B04A; color: #1C1C1C; border-color: #E8B04A; }
.dan-approvals .kd-chain .c.rejected .st { background: #8A3B3B; color: #fff; border-color: #8A3B3B; }
.dan-approvals .kd-chain .c .who { display: block; font-size: 12px; color: var(--d-ink); }
.dan-approvals .kd-chain .c .when { display: block; font-size: 11.5px; color: var(--d-muted); }
.dan-approvals .kd-chain .c .cmt { margin-top: 4px; font-size: 12px; color: #8A3B3B; white-space: pre-wrap; }

/* ---------- שבירות ---------- */
@container aprv (max-width: 820px) {
  .dan-approvals .kpis { grid-template-columns: 1fr 1fr; }
}
@container adlg (max-width: 600px) {
  .dan-approvals .cols { grid-template-columns: 1fr; }
}