/* src/app/dan/staff.css — צוות · איוש · משמרות · מתנדבים: העיצוב של דן, מועתק.
 * מקור: legacy/community/branch-staff.html · legacy/community/branch-staffing.html · legacy/community/branch-shifts.html · legacy/community/branch-volunteers.html
 * מסכים: src/app/screens/branch-staff.js · src/app/screens/branch-staffing.js · src/app/screens/branch-shifts.js — כל אחד עוטף את עצמו ב-`<div class="dan dan-<מודול>">`.
 * הנוהל: docs/runbooks/dan-design-port.md · הפלטה (`--d-*`): src/app/dan/dan.css.
 *
 * ⚠️ מה שונה מהמקור, ולמה — חמישה דברים (אותם כללים כמו ב-screens/manager.css), ועוד תוספות קטנות לדברים שיש לנו ואין בדן:
 *    `.dnote` (הערת ההורדה המתועדת) · `.nodocs` · `.kit-status` בתוך הכותרת (הודעת מצב חיה) · עמודת "הערה" בטופס ההיעדרות.
 *    ✅ `branch-volunteers.html` הוא עכשיו מסך (01.10 — גיל: "אחד לאחד בכל הדפים"; הכרעה §0-5 מ-24.09, "מגירה בעורך האירוע בלבד", בוטלה): `.dan-volunteers`
 *    בסוף הקובץ. המגירה ב-`branch-events.js` נשארת כמו שהיא — המסך הוא תוספת, לא תחליף.
 *  ⑥ **`line-height: normal` על כל מכל** (01.10, סוקר): דן אינה מגדירה `line-height` על ה-`body`, ולכן הכול יורש את ברירת המחדל של הדפדפן (~1.19 ל-Rubik);
 *     `base.css` שלנו קובע 1.6, והכפתורים/השדות (`font:inherit`) לוקחים אותו ⟹ כל שורה גבוהה ב-4–5px (סרגל שבוע 64px מול 59). אותו דבר `h1`/`h2`
 *     (`line-height` ו-`letter-spacing` של `base.css`; ב-`.un` שבדן הוא `<span>`). ✅ 01.10 — המכלים: `.dan { line-height: normal }` ב-dan.css (לכל מסך
 *     שהועתק); הכותרות (`h1`/`h2`, שנושאות כלל משלהן ב-`base.css`) — כאן.
 *  ① **אין `:root`** — הפלטה היא `--d-*` ב-dan.css, ו-`page.css` של דן אינו נטען.
 *  ② **כל כלל תחום ל-`.dan-<מודול>`** — שלושת המסכים חיים בקובץ אחד, ו-`.unit` · `.uh` · `.units` · `.who` · `.nm` ·
 *     `.empty` מוגדרים בשלושתם בצורה אחרת (כמו בדן, שבה כל דף נשא `<style>` משלו).
 *  ③ **מחלקות שהתנגשו ב-packages/ui/kit.css קיבלו שם מקומי:** `.topbar`→`.dtop` · `.empty`→`.dempty` · `.chip`→`.schip` ·
 *     `.card`→`.dcard` · `.alert`→`.dalert` · `.btn`→`.ubtn` · `.row`→`.urow` · `.rows`→`.urows` (המעטפת מגדירה את כולן
 *     **בלי תחום**; `.topbar` שלה הפך את הכותרת ל-sticky לבנה, `.card` הוסיף מסגרת — נמדד ב-/community).
 *  ④ **container query ולא media query** — רוחב התוכן תלוי במעטפת (סרגל פתוח/סגור · max-w), לא בחלון. הספים הוזזו בהתאם:
 *     ה-900/1000/760px של דן הם רוחב **חלון** עם סרגל של ~260px ופדינג של 72px, כלומר ~570/670/430px של תוכן.
 *  ⑤ **שני אפורים הוכהו ל-AA** (`--d-faint` · `--d-muted`, ראו dan.css), וארבעה צבעי טקסט נוספים של דן נכשלים ב-4.5:1 ותוקנו:
 *     `.state.zero .n` ו-`.notreq` (`--dim`, 2.33:1 על לבן) ⟹ `--d-muted` · `.chip.failed` (לבן על כתום `--orange`, 2.99:1) ⟹ רקע
 *     `--d-orange-ink` (5.27:1) · `.badge.staff` (`--d-muted` על `--d-line`, 4.35:1) ⟹ `--d-body` · האייקון "!" ברצועת ההתראה (לבן על `--d-orange`) ⟹
 *     `--d-orange-ink`. `--d-dim` נשאר לקווים בלבד. כל זוג טקסט/רקע בקובץ נמדד ביחס הבהירות של WCAG (≥ 4.5).
 */

/* ════════════════════════════════════════════════════════════════════════════════════════════
 * כשירות הצוות — legacy/community/branch-staff.html  (`/branch/:code/staff`)
 * ════════════════════════════════════════════════════════════════════════════════════════════ */
.dan-staff {
  container: dan-staff / inline-size;
  display: flex; flex-direction: column; gap: 22px;
}
.dan-staff h1 { font-size: 27px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; line-height: normal; margin: 0 0 5px; }
.dan-staff .dtop { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dan-staff .dtop .meta { font-size: 15.5px; color: var(--d-muted); }
/* חריץ ההודעה החיה (`kit-status`) בתוך הכותרת: ריק ⟹ גובה 0 (נשאר בעץ הנגישות), עם טקסט ⟹ שורה מתחת לשורת המשנה. */
.dan-staff .kit-status { min-height: 0; margin: 0; }
.dan-staff .kit-status:not(:empty) { margin-top: 6px; }

/* רצועת הסיכום: כל אריח הוא גם מסנן. חמישה מצבים, מהדחוף לרגוע — הסדר הזה הוא התוכן, לא קישוט. */
.dan-staff .states { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.dan-staff .state { background: #fff; border-radius: 16px; padding: 16px 18px; box-shadow: var(--d-shadow);
  border: 1px solid transparent; border-top: 3px solid var(--d-line); cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; text-align: start; font-family: inherit; min-width: 0; }
.dan-staff .state:hover { border-color: var(--d-line); }
.dan-staff .state[aria-pressed="true"] { border-color: var(--d-green); box-shadow: 0 0 0 3px var(--d-mint); }
.dan-staff .state .n { font-size: 28px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; line-height: 1; }
.dan-staff .state .l { font-size: 13.5px; color: var(--d-muted); }
.dan-staff .state.expired { border-top-color: var(--d-orange); }
.dan-staff .state.missing { border-top-color: var(--d-orange); }
.dan-staff .state.soon { border-top-color: var(--d-sand); }
.dan-staff .state.unknown { border-top-color: var(--d-dim); }
.dan-staff .state.ok { border-top-color: var(--d-green-mid); }
.dan-staff .state.zero .n { color: var(--d-muted); }

/* כרטיס אדם. הפס הימני צובע את המצב החמור ביותר שלו — כך סורקים את העמוד בלי לקרוא. */
.dan-staff .person { background: #fff; border-radius: 18px; box-shadow: var(--d-shadow); overflow: hidden;
  display: flex; flex-direction: column; border-inline-start: 4px solid var(--d-green-mid); min-width: 0; }
.dan-staff .person.expired, .dan-staff .person.missing { border-inline-start-color: var(--d-orange); }
.dan-staff .person.soon { border-inline-start-color: var(--d-sand); }
.dan-staff .person.unknown { border-inline-start-color: var(--d-dim); }
.dan-staff .ph { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 16px 20px 12px; flex-wrap: wrap; }
.dan-staff .ph .who { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dan-staff .ph .nm { font-size: 17px; font-weight: 600; color: var(--d-ink); }
.dan-staff .ph .rl { font-size: 13.5px; color: var(--d-faint); }

/* ⚠️ אין עמודת `select` של הסטטוס הידני (בתוקף/חסר/טרם נבדק) — המצב נגזר מהתעודה (ראו הכותרת של src/api/branch-staff.mjs),
 * ולכן ארבע עמודות ולא חמש: שם · בתוקף עד · תג מצב · צירוף.
 * 🔴 **לשם המסמך רצפה (140px) ולתג רצפה של תוכנו (`max-content`).** `1.4fr`/`1fr` חשופים ב-`minmax(auto, …)` — ובדן העמודות האוטומטיות
 * (תאריך · צירוף) אכלו את השורה עד שהשם נשאר ברוחב אות. הרצפה היא מה שמונע את זה, והשבירה לעמודה אחת מתחילה כשהיא כבר אינה מחזיקה. */
.dan-staff .docs { display: flex; flex-direction: column; }
.dan-staff .doc { display: grid; grid-template-columns: minmax(140px, 1.4fr) auto minmax(max-content, 1fr) auto; align-items: center; gap: 12px;
  padding: 11px 20px; border-top: 1px solid #F6F3EA; }
.dan-staff .doc .dn { font-size: 14.5px; color: var(--d-body); min-width: 0; overflow-wrap: anywhere; }
.dan-staff .doc .dn .notreq { color: var(--d-muted); font-weight: 400; font-size: 12px; }
.dan-staff .doc input[type="date"] { font-family: inherit; font-size: 13.5px; color: var(--d-text);
  background: #fff; border: 1px solid var(--d-line); border-radius: 9px; padding: 7px 9px; min-height: 36px; min-width: 0; }
.dan-staff .doc input[type="date"]:focus { outline: 2px solid var(--d-green); outline-offset: 1px; }
.dan-staff .doc input[type="date"]:disabled { background: var(--d-track); color: var(--d-muted); border-color: transparent; }

/* תג המצב. הטקסט עצמו נושא את המידע ("פג בעוד 12 ימים") — הצבע רק מדרג אותו. */
.dan-staff .schip { justify-self: start; font-size: 12.5px; font-weight: 500; border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.dan-staff .schip.ok { color: var(--d-green-dark); background: var(--d-mint); }
.dan-staff .schip.soon { color: #6E5A2E; background: #F7F0DC; }
.dan-staff .schip.expired, .dan-staff .schip.missing { color: var(--d-orange-ink); background: var(--d-orange-soft); }
.dan-staff .schip.unknown { color: #5D5A63; background: #EFEDF2; }
.dan-staff .schip.saving { color: var(--d-muted); background: var(--d-track); }
.dan-staff .schip.failed { color: #fff; background: var(--d-orange-ink); }

/* צירוף הסריקה. הקובץ עצמו לעולם לא נגיש בכתובת ישירה — "מסמך" הוא כפתור שמוריד דרך ה-API (בדן: קישור ל-route שבודק הרשאה).
 * ⚠️ `<button>` ולא `<a>`: אין כתובת לקישור אליה. */
.dan-staff .fileact { display: flex; align-items: center; gap: 8px; justify-self: end; flex-wrap: wrap; }
.dan-staff .attach { font-family: inherit; font-size: 13px; color: var(--d-green); background: #fff;
  border: 1px solid #D8E3DA; border-radius: 999px; padding: 6px 13px; cursor: pointer; white-space: nowrap; }
.dan-staff .attach:hover { background: #F4F8F5; }
.dan-staff .attach:disabled { color: var(--d-muted); border-color: var(--d-line); cursor: default; background: var(--d-track); }
.dan-staff .seefile { font-family: inherit; font-size: 13px; font-weight: 500; color: var(--d-green-dark); background: var(--d-mint);
  border: 0; border-radius: 999px; padding: 6px 12px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.dan-staff .seefile:hover { background: #D9EDE2; color: var(--d-green-dark); }

.dan-staff .dempty { background: #fff; border-radius: 18px; box-shadow: var(--d-shadow); padding: 34px;
  text-align: center; color: var(--d-faint); font-size: 15px; }
.dan-staff .nodocs { padding: 14px 20px 16px; color: var(--d-faint); font-size: 14.5px; border-top: 1px solid #F6F3EA; }
.dan-staff .list { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dan-staff .dnote { font-size: 13px; color: var(--d-muted); line-height: 1.6; margin: 0; }

/* ⚠️ שלוש מדרגות לשורת המסמך (בדן — שתיים: 900px לעמודה אחת): ארבע עמודות · השם בשורה משלו ושלוש מתחתיו (תאריך · תג · צירוף) ·
 * עמודה אחת. מדרגת הביניים היא מה שמונע תאריך ברוחב מלא וארבע שורות גבוהות לכל מסמך ברוחב של סרגל פתוח (נמדד ב-1024: 712px). */
@container dan-staff (max-width: 720px) {
  .dan-staff .doc { grid-template-columns: auto minmax(max-content, 1fr) auto; gap: 8px 12px; }
  .dan-staff .doc .dn { grid-column: 1 / -1; }
}
@container dan-staff (max-width: 560px) {
  .dan-staff .doc { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .dan-staff .schip { justify-self: end; }
}
/* 5 האריחים נשברים ל-2 (640 — כמו ה-900px שבדן). */
@container dan-staff (max-width: 640px) {
  .dan-staff .states { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ════════════════════════════════════════════════════════════════════════════════════════════
 * שיבוץ צוות — legacy/community/branch-staffing.html  (`/branch/:code/staffing`)
 * ════════════════════════════════════════════════════════════════════════════════════════════ */
.dan-staffing {
  container: dan-staffing / inline-size;
  display: flex; flex-direction: column; gap: 22px;
}
.dan-staffing h1 { font-size: 27px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; line-height: normal; margin: 0 0 5px; }
.dan-staffing .dtop { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dan-staffing .dtop .meta { font-size: 15.5px; color: var(--d-muted); }
/* חריץ ההודעה החיה (`kit-status`) בתוך הכותרת: ריק ⟹ גובה 0 (נשאר בעץ הנגישות), עם טקסט ⟹ שורה מתחת לשורת המשנה. */
.dan-staffing .kit-status { min-height: 0; margin: 0; }
.dan-staffing .kit-status:not(:empty) { margin-top: 6px; }

/* רצועת ההתראה — `.alert.warn` של page.css בדן (שם מחלקה מקומי: `.alert` של המעטפת אינו תחום). */
.dan-staffing .dalerts { display: flex; gap: 12px; flex-wrap: wrap; }
.dan-staffing .dalert { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; border-radius: 16px;
  padding: 14px 18px; font-size: 15px; line-height: 1.5; }
.dan-staffing .dalert.warn { background: var(--d-orange-soft); color: var(--d-orange-ink); }
.dan-staffing .dalert .ic { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--d-orange-ink); color: #fff;
  font-weight: 700; display: grid; place-items: center; font-size: 14px; }

.dan-staffing .units { display: grid; gap: 16px; min-width: 0; }

/* כרטיס יחידה. הפס הימני כתום כשאין מובילה — אותה שפה חזותית כמו `.person` במסך הכשירות, כדי שסריקה מהירה של העמוד
 * תראה את הבתים החסרים בלי לקרוא. */
.dan-staffing .unit { background: #fff; border-radius: 18px; box-shadow: var(--d-shadow); overflow: hidden;
  border-inline-start: 4px solid var(--d-green-mid); min-width: 0; }
.dan-staffing .unit.nolead { border-inline-start-color: var(--d-orange); }
.dan-staffing .uh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 16px 20px 10px; flex-wrap: wrap; }
/* ⑥ `.un` הוא `<span>` בדן ו-`<h2>` אצלנו (מבנה כותרות נגיש) — בלי `line-height`/`letter-spacing` של `h2` ב-base.css. */
.dan-staffing h2 { line-height: normal; letter-spacing: normal; }
.dan-staffing .uh .un { font-size: 17px; font-weight: 600; color: var(--d-ink); margin: 0; }
.dan-staffing .uh .us { font-size: 13.5px; color: var(--d-muted); }

.dan-staffing .urows { padding: 0 20px 4px; }
.dan-staffing .urow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--d-line);
  flex-wrap: wrap; }
.dan-staffing .urow:first-child { border-top: 0; }
.dan-staffing .urow .who { flex: 1; min-width: 160px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dan-staffing .urow .nm { font-size: 15px; color: var(--d-ink); }
.dan-staffing .urow .sub { font-size: 12.5px; color: var(--d-muted); }
/* `font-weight: 600 · flex: none · min-width: 0` הם `.badge` של header.css, שהדף של דן טוען ו-`.badge` המוטמע דורס ממנו רק גודל/ריווח/צבע (סוקר 01.10: ב-
 * צילומי צד-לצד התגים של דן מודגשים). */
.dan-staffing .badge { flex: none; min-width: 0; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--d-mint);
  color: var(--d-green-dark); white-space: nowrap; }
.dan-staffing .badge.staff { background: var(--d-line); color: var(--d-body); }   /* `--d-muted` על `--d-line` = 4.35:1 ⟹ `--d-body` */
.dan-staffing .urow .uempty { color: var(--d-muted); font-size: 14px; }

.dan-staffing .lnk { background: none; border: 0; padding: 4px 6px; font: inherit; font-size: 13px; cursor: pointer;
  color: var(--d-green); border-radius: 8px; }
.dan-staffing .lnk:hover { background: var(--d-mint); }
.dan-staffing .lnk:disabled { color: var(--d-muted); cursor: default; background: none; }
.dan-staffing .lnk.danger { color: #b4472a; }
.dan-staffing .lnk.danger:hover { background: #fbe9e3; }

/* טופס ההוספה — פנימי ליחידה, כמו בדן (ולא דיאלוג): שמונה טפסים פתוחים בו-זמנית היו שמונה שדות חיפוש שכל אחד שולח בקשות,
 * ולכן נפתח אחד בלבד. ⚠️ ללא שדה "תפקיד (רשות)" של דן — ה-API אינו כותב תואר חופשי (`employment` אין לה עמודה כזו). */
.dan-staffing .uf { padding: 12px 20px 18px; border-top: 1px solid var(--d-line); background: #FAFAF8; }
.dan-staffing .uf .line { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.dan-staffing .uf label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--d-muted); }
.dan-staffing .uf input[type=text], .dan-staffing .uf input[type=number] { font: inherit; font-size: 14px; padding: 8px 10px;
  border: 1px solid var(--d-line); border-radius: 10px; background: #fff; color: var(--d-text); min-width: 120px; }
.dan-staffing .uf .grow { flex: 1; min-width: 200px; }
.dan-staffing .uf .chk { flex-direction: row; align-items: center; gap: 6px; font-size: 13.5px; color: var(--d-ink); padding-bottom: 9px; }
.dan-staffing .ubtn { font: inherit; font-size: 14px; padding: 8px 16px; border-radius: 10px; border: 0; cursor: pointer;
  background: var(--d-green); color: #fff; }
.dan-staffing .ubtn[disabled] { opacity: .5; cursor: default; }
.dan-staffing .ubtn.ghost { background: var(--d-line); color: var(--d-ink); }

/* תוצאות החיפוש כרשימה ולא כ-<datalist>. ⚠️ ה-datalist ממפה שם→מזהה, ושני אנשים בעלי אותו שם היו נבחרים זה במקום זה
 * בלי שום סימן. כאן המזהה יושב על הכפתור עצמו, ולכן השאלה לא נשאלת — וגם אפשר להראות מעמד לצד השם. */
.dan-staffing .res { margin-top: 10px; display: grid; gap: 4px; max-height: 230px; overflow: auto; }
.dan-staffing .res button { display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  font: inherit; font-size: 14px; text-align: start; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--d-line); background: #fff; color: var(--d-text); cursor: pointer; }
.dan-staffing .res button:hover { border-color: var(--d-green); background: var(--d-mint); }
.dan-staffing .res button:disabled { cursor: default; opacity: .6; }
.dan-staffing .res .st { font-size: 12px; color: var(--d-muted); }
.dan-staffing .hint { font-size: 12.5px; color: var(--d-muted); margin-top: 8px; }
.dan-staffing .hint.err { color: #b4472a; }

.dan-staffing .dempty { background: #fff; border-radius: 18px; box-shadow: var(--d-shadow); padding: 34px;
  text-align: center; color: var(--d-faint); font-size: 15px; }

@container dan-staffing (max-width: 480px) {
  /* ב-375 השורה נעשתה לא מסודרת: "משובץ/ת מ-…" הארוך דחף את התג לשורה משלו ואת "הסרה" מתחתיו. ⟹ זהות האדם ברוחב מלא (שם · תג בשורה, התפקיד מתחת),
   * והכפתורים בשורה אחת שאחריה. (סוקר 01.10 — דן אינה כוללת את "משובץ/ת מ-", ולכן אינה נתקלת בזה.) */
  .dan-staffing .urow { gap: 4px 10px; }
  .dan-staffing .urow .who { flex-basis: 100%; min-width: 0; }
  .dan-staffing .urow .sub { order: 3; flex-basis: 100%; }
  .dan-staffing .uf .line { flex-direction: column; align-items: stretch; }
  .dan-staffing .uf .chk { padding-bottom: 0; }
  .dan-staffing .uf input[type=text], .dan-staffing .uf input[type=number] { min-width: 0; }
}

/* ════════════════════════════════════════════════════════════════════════════════════════════
 * סבב ונוכחות צוות — legacy/community/branch-shifts.html  (`/branch/:code/shifts`)
 * ════════════════════════════════════════════════════════════════════════════════════════════ */
.dan-shifts {
  container: dan-shifts / inline-size;
  display: flex; flex-direction: column; gap: 22px;
}
.dan-shifts h1 { font-size: 27px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; line-height: normal; margin: 0 0 5px; }
.dan-shifts .dtop { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dan-shifts .dtop .meta { font-size: 15.5px; color: var(--d-muted); }
/* חריץ ההודעה החיה (`kit-status`) בתוך הכותרת: ריק ⟹ גובה 0 (נשאר בעץ הנגישות), עם טקסט ⟹ שורה מתחת לשורת המשנה. */
.dan-shifts .kit-status { min-height: 0; margin: 0; }
.dan-shifts .kit-status:not(:empty) { margin-top: 6px; }

.dan-shifts .weekbar { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 16px;
  padding: 12px 16px; box-shadow: var(--d-shadow); flex-wrap: wrap; }
.dan-shifts .wbtn { font-family: inherit; font-size: 14px; color: var(--d-green); background: #fff;
  border: 1px solid #D8E3DA; border-radius: 999px; padding: 8px 16px; cursor: pointer; }
.dan-shifts .wbtn:hover { background: #F4F8F5; }
.dan-shifts .wbtn:disabled { color: var(--d-muted); cursor: default; }
.dan-shifts .wlabel { font-size: 15px; font-weight: 500; color: var(--d-ink); }
.dan-shifts .wnote { font-size: 13.5px; color: var(--d-faint); margin-inline-start: auto; }

/* כרטיס בית: פס הכיסוי הוא העיקר, ולכן הוא רחב ולא רזה כמו פסי התקציב. */
.dan-shifts .units { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dan-shifts .unit { background: #fff; border-radius: 18px; padding: 18px 20px; box-shadow: var(--d-shadow);
  display: flex; flex-direction: column; gap: 11px; border-top: 4px solid var(--d-green-mid); min-width: 0; }
.dan-shifts .unit.partial { border-top-color: var(--d-sand); }
.dan-shifts .unit.short, .dan-shifts .unit.none { border-top-color: var(--d-orange); }
.dan-shifts .uh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
/* ⑥ `.un` הוא `<span>` בדן, ו-`.cardhead h2` ירש `letter-spacing` — בלי `line-height`/`letter-spacing` של `h2` ב-base.css. */
.dan-shifts h2 { line-height: normal; letter-spacing: normal; }
.dan-shifts .uh .un { font-size: 18px; font-weight: 600; color: var(--d-ink); margin: 0; }
.dan-shifts .uh .ua { font-size: 13px; color: var(--d-faint); }
.dan-shifts .cnt { display: flex; align-items: baseline; gap: 7px; }
.dan-shifts .cnt b { font-size: 26px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; line-height: 1; }
.dan-shifts .cnt span { font-size: 14px; color: var(--d-muted); }
.dan-shifts .track { height: 9px; background: var(--d-track); border-radius: 999px; overflow: hidden; }
.dan-shifts .track i { display: block; height: 100%; background: var(--d-green-mid); border-radius: 999px; }
.dan-shifts .unit.partial .track i { background: var(--d-sand); }
.dan-shifts .unit.short .track i, .dan-shifts .unit.none .track i { background: var(--d-orange); }
.dan-shifts .why { font-size: 13.5px; color: var(--d-faint); min-height: 1.4em; }
.dan-shifts .why b { color: var(--d-orange-ink); font-weight: 500; }

.dan-shifts .away { display: flex; flex-direction: column; gap: 2px; }
.dan-shifts .arow { display: grid; grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 1.4fr) auto; align-items: center; gap: 12px;
  padding: 11px 20px; border-top: 1px solid #F6F3EA; font-size: 14.5px; }
.dan-shifts .arow .an { font-weight: 500; color: var(--d-text); }
.dan-shifts .atag { font-size: 12.5px; font-weight: 500; border-radius: 999px; padding: 3px 10px; justify-self: start; }
.dan-shifts .atag.sick { color: var(--d-orange-ink); background: var(--d-orange-soft); }
.dan-shifts .atag.reserve { color: #3B5C74; background: #E6F0F7; }
.dan-shifts .atag.vacation { color: var(--d-green-dark); background: var(--d-mint); }
.dan-shifts .atag.training { color: #6E5A2E; background: #F7F0DC; }
.dan-shifts .atag.other { color: #5D5A63; background: #EFEDF2; }
.dan-shifts .cancel { font-family: inherit; font-size: 13px; color: var(--d-faint); background: none; border: 0;
  padding: 5px 9px; border-radius: 8px; cursor: pointer; justify-self: end; }
.dan-shifts .cancel:hover { color: var(--d-orange-ink); background: var(--d-orange-soft); }
.dan-shifts .cancel:disabled { cursor: default; }

/* `.card` של דן = `.card` של page.css (`padding:26px 28px; display:flex; flex-direction:column; gap:18px`) ש-`.card` המוטמע דורס ממנו רק רקע/רדיוס/צל — ולכן הכותרת,
 * הטופס והשורות **מוזחים פעמיים** (28 של הכרטיס + 20 של כל רכיב). בלי ה-padding הם רצו עד קצה הכרטיס (סוקר 01.10, צילומי צד-לצד ב-1440). */
.dan-shifts .dcard { background: #fff; border-radius: 18px; box-shadow: var(--d-shadow); padding: 26px 28px;
  display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.dan-shifts .cardhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 18px 20px 12px; flex-wrap: wrap; }
.dan-shifts .cardhead h2 { font-size: 17px; font-weight: 600; color: var(--d-ink); margin: 0; }
.dan-shifts .addbtn { font-family: inherit; font-size: 14px; font-weight: 500; color: #fff; background: var(--d-green);
  border: 0; border-radius: 999px; padding: 9px 18px; cursor: pointer; }
.dan-shifts .addbtn:hover { background: var(--d-green-dark); }
.dan-shifts .addbtn:disabled { opacity: .5; cursor: default; }

/* ⚠️ שש עמודות ולא חמש — "הערה (לא חובה)" נוספה: ה-API כותב `noteHe` והרשימה מציגה אותה, ואין לה מקום אחר להיכתב. */
.dan-shifts .form { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) auto;
  gap: 10px; align-items: end; padding: 14px 20px; border-top: 1px solid #F6F3EA; background: var(--d-cream2); }
.dan-shifts .form label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dan-shifts .form .fl { font-size: 12px; color: var(--d-faint); }
.dan-shifts .form select, .dan-shifts .form input { font-family: inherit; font-size: 14px; color: var(--d-text); background: #fff;
  border: 1px solid var(--d-line); border-radius: 9px; padding: 8px 10px; min-height: 38px; min-width: 0; }
.dan-shifts .form select:focus, .dan-shifts .form input:focus { outline: 2px solid var(--d-green); outline-offset: 1px; }
.dan-shifts .dempty { padding: 26px 20px; text-align: center; color: var(--d-faint); font-size: 14.5px; }
.dan-shifts .dempty.alone { background: #fff; border-radius: 18px; box-shadow: var(--d-shadow); }
/* כרטיס ריק בודד ברשת של 2 טורים נשאר חצי רוחב (דן — אותו דבר בכרטיס השגיאה) ⟹ פורש על כולה. */
.dan-shifts .units > .dempty { grid-column: 1 / -1; }

/* ⚠️ הטופס נשבר **מוקדם** מהכרטיסים (900 מול 700): שש עמודות ב-700px השאירו לתאריכים ~100px, ו-`dd/mm/yyyy` נחתך (נמדד ב-1024).
 * שלב ביניים של שתי עמודות, ואז עמודה אחת. */
@container dan-shifts (max-width: 900px) {
  .dan-shifts .form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dan-shifts .form > .addbtn { grid-column: 1 / -1; }
}
@container dan-shifts (max-width: 520px) {
  .dan-shifts .form { grid-template-columns: minmax(0, 1fr); }
  /* ב-375: 28 (כרטיס) + 20 (רכיב) לכל צד משאירים ~250px לתוכן — הכרטיס מתכווץ, הרכיבים נשארים של דן. */
  .dan-shifts .dcard { padding: 18px 12px; }
}
@container dan-shifts (max-width: 700px) {
  .dan-shifts .units { grid-template-columns: minmax(0, 1fr); }
  .dan-shifts .arow { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .dan-shifts .atag, .dan-shifts .cancel { justify-self: start; }
  .dan-shifts .wnote { margin-inline-start: 0; flex-basis: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════════════════════════
 * מתנדבים וצוותים — legacy/community/branch-volunteers.html  (`/branch/:code/volunteers`)
 * 01.10 — מסך חדש (הכרעה §0-5 מ-24.09 בוטלה). ⚠️ מחלקות שהתנגשו במעטפת/בערכה: `.btn`→`.vbtn` · `.chip`→`.vchip` · `.chips`→`.vchips` · `.pill`→`.vpill` ·
 * `.empty`→`.dempty` · `.topbar`→`.dtop` · `.sec`/`.sech` נשארו (חופשיות); `table`/`th`/`td` — סלקטורי אלמנט, תחומים. `.pill.ext` ("לא במרשם") אינו כאן: אין מתנדב חיצוני
 * (`event_volunteer.person_id NOT NULL`). ⚠️ ה-× להסרה הוא `<button class="vx">` ולא `<a>` ב-`opacity:.55` (דן) — שם נגיש, וניגודיות AA.
 * ════════════════════════════════════════════════════════════════════════════════════════════ */
.dan-volunteers {
  container: dan-volunteers / inline-size;
  display: flex; flex-direction: column; gap: 22px;
}
.dan-volunteers h1 { font-size: 27px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; line-height: normal; margin: 0 0 5px; }
.dan-volunteers h2 { line-height: normal; letter-spacing: normal; }
.dan-volunteers .dtop { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dan-volunteers .dtop .meta { font-size: 15.5px; color: var(--d-muted); }
/* חריץ ההודעה החיה (`kit-status`) בתוך הכותרת: ריק ⟹ גובה 0 (נשאר בעץ הנגישות), עם טקסט ⟹ שורה מתחת לשורת המשנה. */
.dan-volunteers .kit-status { min-height: 0; margin: 0; }
.dan-volunteers .kit-status:not(:empty) { margin-top: 6px; }

.dan-volunteers .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.dan-volunteers .kpi { background: #fff; border-radius: 16px; padding: 16px 18px; box-shadow: var(--d-shadow);
  display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dan-volunteers .kpi .l { font-size: 13.5px; color: var(--d-faint); }
.dan-volunteers .kpi .v { font-size: 26px; font-weight: 600; color: var(--d-ink); }
.dan-volunteers .kpi .s { font-size: 13px; color: var(--d-green); }
.dan-volunteers .kpi .s.warn { color: var(--d-orange-ink); }
.dan-volunteers .kpi .s.mute { color: var(--d-faint); }

.dan-volunteers .vbtn { 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); }
.dan-volunteers .vbtn:hover { background: #F4F8F5; }
.dan-volunteers .vbtn.solid { background: var(--d-green); color: #fff; border-color: var(--d-green); font-weight: 600; }
.dan-volunteers .vbtn.solid:hover { background: var(--d-green-dark); }
.dan-volunteers .vbtn.link { border: 0; background: none; padding: 6px 8px; color: var(--d-muted); font-size: 13.5px; }
.dan-volunteers .vbtn.link:hover { color: var(--d-orange-ink); background: none; }   /* `--orange` של דן על לבן = 2.9:1 ⟹ `--d-orange-ink` */
.dan-volunteers .vbtn.tiny { padding: 5px 12px; font-size: 13px; }

.dan-volunteers .dsec { background: #fff; border-radius: 16px; padding: 18px 20px; box-shadow: var(--d-shadow); margin-bottom: 14px; min-width: 0; }
.dan-volunteers .dsech { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.dan-volunteers .dsech h2 { font-size: 17px; font-weight: 600; color: var(--d-ink); margin: 0; }
.dan-volunteers .dsech .why { font-size: 13.5px; color: var(--d-faint); flex: 1 1 100%; margin-top: -2px; }

.dan-volunteers table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.dan-volunteers th { text-align: start; font-size: 12.5px; font-weight: 600; color: var(--d-faint); padding: 0 10px 8px; border-bottom: 1px solid var(--d-line); }
.dan-volunteers td { padding: 11px 10px; border-bottom: 1px solid var(--d-line-soft); font-size: 14.5px; vertical-align: top; }
.dan-volunteers tr:last-child td { border-bottom: 0; }
.dan-volunteers .nm { font-weight: 600; color: var(--d-ink); }
/* ⚠️ ספרות ומקף הם ניטרליים ל-bidi, ולכן "4/6" ו-"‎12.11" מתהפכים בתוך פסקת RTL. `direction:ltr` על התא הוא אותו תיקון בדיוק שנדרש בטווח הדו-יומי ב-resident.html (דן). */
.dan-volunteers .num { font-variant-numeric: tabular-nums; direction: ltr; text-align: start; unicode-bidi: isolate; }
.dan-volunteers .mute { color: var(--d-faint); }
.dan-volunteers .vchips { display: flex; gap: 6px; flex-wrap: wrap; }
.dan-volunteers .vchip { font-size: 12.5px; background: var(--d-mint); color: var(--d-green-dark); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.dan-volunteers .vchip.off { background: #F0EFEA; color: var(--d-faint); }
.dan-volunteers .vpill { font-size: 12.5px; border-radius: 999px; padding: 3px 10px; background: var(--d-mint); color: var(--d-green-dark); white-space: nowrap; }
.dan-volunteers .vpill.warn { background: #FCEDE3; color: var(--d-orange-ink); }

.dan-volunteers .dgap { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 11px 12px; border-radius: 12px; background: #FDF6F1; }
.dan-volunteers .dgap .g1 { display: flex; flex-direction: column; gap: 2px; }
.dan-volunteers .dgap .t { font-weight: 600; color: var(--d-ink); }
.dan-volunteers .dgap .d { font-size: 13px; color: var(--d-muted); }

.dan-volunteers .dgapwrap { margin-bottom: 8px; }
/* כשפאנל השיבוץ פתוח, שורת החוסר והפאנל הם גוש אחד — לכן הפינות התחתונות מתיישרות. */
.dan-volunteers .dgapwrap:has(.asn:not([hidden])) .dgap { border-radius: 12px 12px 0 0; }
.dan-volunteers .ga { display: flex; align-items: center; gap: 8px; }
.dan-volunteers .asn { background: #fff; border: 1px solid var(--d-line); border-radius: 0 0 12px 12px;
  border-top: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.dan-volunteers .asnrow { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dan-volunteers .asnrow .lbl { font-size: 12.5px; color: var(--d-faint); min-width: 82px; }
.dan-volunteers .asnrow select { font-family: inherit; font-size: 14px; padding: 7px 10px; border: 1px solid #D8E3DA;
  border-radius: 9px; background: #fff; color: var(--d-text); max-width: 260px; min-width: 0; }
.dan-volunteers .vchip.act { border: 0; cursor: pointer; font-family: inherit; }
.dan-volunteers .vchip.act:hover { background: var(--d-green); color: #fff; }
.dan-volunteers .vchip .vx { font: inherit; border: 0; background: none; padding: 0 2px; margin-inline-start: 2px; cursor: pointer; color: var(--d-muted); }
.dan-volunteers .vchip .vx:hover { color: var(--d-orange-ink); }
.dan-volunteers td.act { white-space: nowrap; text-align: end; }

.dan-volunteers .dempty { padding: 26px 4px; color: var(--d-faint); font-size: 14.5px; line-height: 1.7; }
.dan-volunteers .dempty b { color: var(--d-ink); font-weight: 600; }
.dan-volunteers .dempty .cta { margin-top: 14px; }

/* ⚠️ ה-`@media (max-width:760px)` של דן הוא רוחב **חלון** (סרגל ~260px ופדינג ~72px ⟹ ~430px של תוכן) — כאן רוחב המכל: 560. הטבלה הופכת לכרטיסים (בלי גלישה אופקית ב-375). */
@container dan-volunteers (max-width: 560px) {
  .dan-volunteers .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* ⚠️ grid ולא flex-wrap: flex-wrap הפיל בעבר את הפריט האחרון לשורה משלו ויצר שורה בת שלוש שורות בנייד (דן). */
  .dan-volunteers .dgap { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; }
  .dan-volunteers table thead { display: none; }
  .dan-volunteers td { display: block; border: 0; padding: 3px 0; }
  .dan-volunteers tbody tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--d-line-soft); }
  .dan-volunteers td.act { text-align: start; }
}