/* src/app/dan/employment.css — תפקידים ומשרות: העיצוב של דן, מועתק.
 * מקור: legacy/community/employment.html (ה-<style> שלו) + מה שהוא נשען עליו מ-assets/css/page.css
 *       (topbar · h1 · kpis · kpi · btn-ghost · btn-solid · table · th · td — "הטוקנים, .topbar, .btn-*, .kpis מגיעים מ-page.css").
 * מסכים: src/app/screens/employment-roles.js — עוטף את עצמו ב-`<div class="dan dan-employment">`.
 * הנוהל: docs/runbooks/dan-design-port.md · הפלטה (`--d-*`): src/app/dan/dan.css.
 *
 * ⚠️ מה שונה מהמקור, ולמה — חמישה דברים בלבד:
 *  ① **כל כלל תחום ל-`.dan-employment`**, והצבעים `var(--d-*)` (`var(--green)` ⟶ `var(--d-green)`, `#3A4A42` ⟶ `var(--d-body)`).
 *     אין `:root`, אין גופן ואין origin חיצוני.
 *  ② **שמות שהתנגשו עם המעטפת (packages/ui · kit.css, לא תחומים) קיבלו שם מקומי:** `.topbar` ⟶ `.dtop` · `.card` ⟶ `.dcard` ·
 *     `.empty` ⟶ `.dempty` · `.btn-solid`/`.btn-ghost` ⟶ `.dbtn-solid`/`.dbtn-ghost`. (`.topbar` של המעטפת היה הופך את הכותרת לפס sticky.)
 *  ③ **שני אפורים הוכהו ל-AA** (ראו dan.css): `--faint`/`--muted` ⟶ #5F6E66. 🔴 וגם `--dim` של דן, שהיה **צבע טקסט** ב-`.fr.none`
 *     (#A3ACA5 על לבן = 2.4:1) ⟹ `--d-muted`. `--d-dim` נשאר לקווים בלבד. וה-placeholder של שדה החיפוש (ברירת המחדל של Chrome: 2.2:1 על קרם).
 *  ④ **`@container` ולא `@media`**, ו-`minmax(min(310px,100%),1fr)` ברשת הבתים: בדן אין אף `@media` בדף הזה — `repeat(auto-fill,
 *     minmax(310px,1fr))` בתוך כרטיס של 291px היה הגלישה האופקית ש-ui-viewport תופס ב-375, ו-`.kpis` נשאר ארבעה טורים בטלפון.
 *     `min-width:640px` של הטבלה נשאר — הוא בתוך `.tablewrap{overflow-x:auto}`, ולכן לא גולש מהעמוד.
 *  ⑤ **`tbody tr.last` ולא `tr:last-child`** — דן בונה את הטבלה מחדש בכל סינון, ולכן לשורה האחרונה **שנראית** אין קו תחתון; כאן השורות נשארות ב-DOM מוסתרות והמסך מסמן את האחרונה הגלויה (`.last`).
 *     ושורת השכבות (`.layerbar` · `.ltab`) — של דן, בפלטה שלנו: `--dim` של דן היה **צבע טקסט** ב-`.ltab .s` (2.4:1) ⟹ `--d-muted`; ועמעום השכבה הריקה (`opacity:.45`, ≈2.1:1) הפך לצורה — ראו שם.
 *  ✂️ **הוסרו** `.bybranch` ו-`.dcard h2` — שימשו את הכרטיס "משרות לפי ענף", שאינו בדן (הוסר באחד לאחד).
 * ⚠️ `line-height:normal` על המכל (מ-01.10 — `.dan` ב-dan.css) ומפורש על `h1`/`h3` (כאן): ל-body של דן אין `line-height`, ו-`base.css` של המעטפת קובע אחד (גם ל-h1..h3).
 */

.dan-employment {
  /* main של דן (page.css): flex בטור, רווח 22px. הריפוד (30/36/56) הוא של המעטפת שלנו (.main__inner). */
  container: dan-employment / inline-size;
  display: flex; flex-direction: column; gap: 22px;
}

/* ── כותרת (page.css: .topbar · h1) ─────────────────────────────────────────────── */
.dan-employment .dtop { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dan-employment h1 { font-size: 27px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; margin: 0 0 5px; line-height: normal; }
.dan-employment .dtop .meta { font-size: 15.5px; color: var(--d-muted); }
/* 05.10 · כפתורי הכתיבה בכותרת (שיוך תפקיד · תפקיד חדש) — אותם `.dbtn-*` של הדיאלוג, מחוץ לדיאלוג. */
.dan-employment .dactions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── KPI (page.css: .kpis · .kpi) ─────────────────────────────────────────────── */
/* 05.10 · `auto-fit` ולא `repeat(4, 1fr)`: ה-KPI החמישי (עלות חודשית) מצויר רק לצופה כלל-קיבוצי — ארבעה או חמישה טורים, בלי ריק בקצה. */
.dan-employment .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 14px; }
.dan-employment .kpi { background: #fff; border-radius: 18px; padding: 20px 22px; box-shadow: var(--d-shadow);
  display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dan-employment .kpi .l { font-size: 14px; color: var(--d-faint); }
.dan-employment .kpi .v { font-size: 30px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; }
.dan-employment .kpi .s { font-size: 13.5px; color: var(--d-green); }
.dan-employment .kpi .s.warn { color: var(--d-orange-ink); }

/* ── הכרטיס ─────────────────────────────────────────────────────────────────────
   ⚠️ `gap:18px` מגיע מ-`.card` של page.css — `.card` של הדף דורס רקע, רדיוס, צל, display, flex-direction ו-padding, **לא** את ה-gap. */
.dan-employment .layout { display: flex; flex-direction: column; gap: 18px; }
.dan-employment .dcard { background: #fff; border-radius: 22px; box-shadow: var(--d-shadow); display: flex; flex-direction: column;
  padding: 0; gap: 18px; }
.dan-employment .dcard .pad { padding: 22px 26px; display: flex; flex-direction: column; gap: 14px; }
.dan-employment .lede { font-size: 14px; color: var(--d-muted); line-height: 1.6; margin: 0; }

/* שורת השכבות — הציר הראשי של המסך, ולכן היא מעל הסינון ונראית אחרת ממנו (דן). ⚠️ טאבים ולא צ׳יפים: השכבה היא "איפה אני מסתכל", והסינון הוא "מה בתוכו". */
.dan-employment .layerbar { display: flex; gap: 4px; flex-wrap: wrap; padding: 16px 26px 0; }
.dan-employment .ltab { font-family: inherit; text-align: right; background: none; border: 0; border-bottom: 2.5px solid transparent;
  padding: 9px 14px 11px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; border-radius: 10px 10px 0 0; }
.dan-employment .ltab:hover { background: var(--d-cream2); }
.dan-employment .ltab .t { font-size: 15px; font-weight: 600; color: var(--d-muted); }
.dan-employment .ltab .s { font-size: 12px; color: var(--d-muted); }
.dan-employment .ltab[aria-selected=true] { border-bottom-color: var(--d-green); }
.dan-employment .ltab[aria-selected=true] .t { color: var(--d-ink); }
.dan-employment .ltab .k { font-size: 12.5px; font-weight: 600; color: var(--d-muted); background: var(--d-cream2);
  border-radius: 999px; padding: 1px 8px; margin-inline-start: 7px; }
.dan-employment .ltab[aria-selected=true] .k { background: var(--d-mint); color: var(--d-green-dark); }
/* ⚠️ שכבה ריקה נשארת גלויה ומעומעמת: "0 בהנהגה" הוא ממצא ארגוני, לא באג (דן). 🔴 **העמעום שונה מדן:** `opacity:.45` על `--d-muted` נותן ≈2.1:1 על לבן — נכשל ב-AA (axe, `ui-a11y`).
   כאן הטקסט נשאר בצבעו והעמעום נאמר בצורה: משקל קל יותר, והספירה בלי רקע — עיגול ריק במסגרת. */
.dan-employment .ltab[data-empty=true] .t { font-weight: 500; }
.dan-employment .ltab[data-empty=true] .k { background: transparent; box-shadow: inset 0 0 0 1px var(--d-sage); font-weight: 500; }

.dan-employment .toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 20px 26px 16px;
  border-bottom: 1px solid var(--d-line-soft); }
.dan-employment .toolbar input[type=search] { flex: 1; min-width: 200px; font-family: inherit; font-size: 15px; color: var(--d-text);
  background: var(--d-cream2); border: 1px solid var(--d-line-soft); border-radius: 12px; padding: 11px 14px; }
/* ⚠️ placeholder: ברירת המחדל של Chrome (#A9A9A9 על קרם = 2.2:1) לא עוברת AA — אותו נימוק כמו שני האפורים (dan.css). בדן: ברירת המחדל. */
.dan-employment .toolbar input[type=search]::placeholder { color: var(--d-muted); opacity: 1; }
.dan-employment .chipbar { display: flex; gap: 8px; flex-wrap: wrap; }
.dan-employment .fchip { font-family: inherit; font-size: 14px; color: var(--d-muted); background: var(--d-cream2);
  border: 1px solid var(--d-line-soft); border-radius: 999px; padding: 7px 15px; cursor: pointer; white-space: nowrap; }
.dan-employment .fchip[aria-pressed=true] { background: var(--d-green); border-color: var(--d-green); color: #fff; }

/* ── הטבלה ──────────────────────────────────────────────────────────────────────
   ⚠️ overflow-x על העוטף ולא על הטבלה — טבלה עם min-width בתוך grid גולשת מהמסך במובייל, כי min-width:auto של פריט grid מונע
   ממנו להתכווץ (הערת דן). הכללים של `table` · `th` · `td` הם של page.css, ממוזגים עם אלה של הדף — של הדף מנצחים. */
.dan-employment .tablewrap { overflow-x: auto; }
.dan-employment table { width: 100%; border-collapse: collapse; min-width: 640px; }
.dan-employment th, .dan-employment td { text-align: right; padding: 13px 26px; border-bottom: 1px solid var(--d-line-soft); vertical-align: top; }
.dan-employment th { font-size: 13px; font-weight: 600; color: var(--d-muted); background: var(--d-cream2); position: sticky; top: 0;
  letter-spacing: .02em; white-space: nowrap; }
.dan-employment td { font-size: 14.5px; color: var(--d-body); }
.dan-employment tbody tr.last td { border-bottom: 0; }
.dan-employment tbody tr:hover { background: #FAFBFA; }
/* `td.nm` של page.css (weight 500 · text) מנצח את `.nm` של הדף על weight ועל צבע; את הגודל קובע `.nm` */
.dan-employment td.nm { font-size: 15.5px; font-weight: 500; color: var(--d-text); }
.dan-employment .rolelist { display: flex; flex-direction: column; gap: 7px; }
.dan-employment .rolerow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.dan-employment .rolelabel { font-size: 14.5px; color: var(--d-text); }
.dan-employment .rolescope { font-size: 13px; color: var(--d-muted); }
.dan-employment .editbtn { font-family: inherit; font-size: 12.5px; color: var(--d-green); background: #F4F8F5; border: 0;
  border-radius: 999px; padding: 4px 11px; cursor: pointer; }
.dan-employment .editbtn:hover { background: var(--d-mint); }

/* ⚠️ מצבים ולא "אפס" — "לא נמדד" אינו "לא עובד", וצבע אחד לכולם היה מוחק את ההבחנה שהמסך קיים בשבילה (הערת דן). */
.dan-employment .fte { font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; white-space: nowrap; }
.dan-employment .st { display: inline-block; font-size: 12.5px; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.dan-employment .st.over { background: #FDEBE7; color: #B23C1E; }
.dan-employment .st.partial { background: #FFF6E5; color: #8A6100; }
.dan-employment .st.measured { background: #EAF5EC; color: #2C6B3F; }
.dan-employment .st.voluntary { background: #F1F0F6; color: #5B5473; }
.dan-employment .frac.none { color: var(--d-muted); font-weight: 400; }

.dan-employment .dempty { padding: 40px 26px; text-align: center; color: var(--d-muted); font-size: 15px; }
.dan-employment .dempty a { color: var(--d-green); }

/* ── תצוגת ההיררכיה: בית → מי עובד בו ─────────────────────────────────────────── */
.dan-employment .viewsw { display: flex; gap: 0; background: var(--d-cream2); border: 1px solid var(--d-line-soft);
  border-radius: 999px; padding: 3px; margin-inline-start: auto; }
.dan-employment .viewsw button { font-family: inherit; font-size: 13.5px; color: var(--d-muted); background: none; border: 0;
  border-radius: 999px; padding: 6px 15px; cursor: pointer; white-space: nowrap; }
.dan-employment .viewsw button[aria-pressed=true] { background: #fff; color: var(--d-ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.09); }

.dan-employment .ugroup { padding: 6px 26px 0; }
.dan-employment .ugroup h3 { font-size: 13px; font-weight: 600; color: var(--d-muted); margin: 18px 0 2px; line-height: normal; }
.dan-employment .units { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); gap: 14px;
  padding: 10px 26px 26px; }
.dan-employment .unit { border: 1px solid var(--d-line-soft); border-radius: 16px; padding: 16px 18px; background: #fff;
  display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.dan-employment .unit.nolead { border-color: #F0D3C8; background: #FFFCFB; }
.dan-employment .uhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dan-employment .uname { font-size: 16.5px; font-weight: 600; color: var(--d-ink); }
.dan-employment .ukids { font-size: 13px; color: var(--d-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dan-employment .umet { display: flex; gap: 16px; flex-wrap: wrap; padding: 9px 0; border-block: 1px solid var(--d-line-soft); }
.dan-employment .umet div { display: flex; flex-direction: column; gap: 1px; }
.dan-employment .umet .v { font-size: 16px; font-weight: 600; color: var(--d-ink); font-variant-numeric: tabular-nums; }
.dan-employment .umet .l { font-size: 11.5px; color: var(--d-muted); }
.dan-employment .umet .v.sub { color: var(--d-muted); font-weight: 500; font-size: 14px; }
.dan-employment .nolead-tag { font-size: 12.5px; color: #B23C1E; background: #FDEBE7; border-radius: 999px; padding: 3px 10px;
  align-self: flex-start; }
.dan-employment .ustaff { display: flex; flex-direction: column; gap: 5px; }
.dan-employment .ustaff .p { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.dan-employment .ustaff .p .nm2 { color: var(--d-text); }
.dan-employment .ustaff .p .ro { color: var(--d-muted); font-size: 12.5px; }
.dan-employment .ustaff .p .fr { margin-inline-start: auto; font-variant-numeric: tabular-nums; color: var(--d-ink);
  font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.dan-employment .ustaff .p .fr.none { color: var(--d-muted); font-weight: 400; }
.dan-employment .ustaff .p .star { color: var(--d-green); font-size: 12px; }

/* ── הדיאלוג ────────────────────────────────────────────────────────────────────
   המעטפת היא `kit-dialog` (docs/runbooks/dan-design-port.md: "דיאלוג = src/app/kit/dialog.js"), והתוכן — של `.dlg` בדן.
   ⚠️ הדיאלוג יושב בתוך `.dan-employment` ב-DOM, ולכן הכללים האלה חלים עליו גם כשהוא בשכבה העליונה (top layer).
   ⚠️ `.dlg` בלי padding: הגוף של kit-dialog כבר נושא ריפוד, ושניהם יחד היו כפולים. */
.dan-employment .kit-dialog { width: min(440px, calc(100vw - 32px)); border-radius: 20px; box-shadow: 0 18px 50px rgba(0,0,0,.22); }
.dan-employment .kit-dialog::backdrop { background: rgba(20,30,24,.34); }
.dan-employment .kit-dialog__head h2 { font-size: 18px; color: var(--d-ink); line-height: normal; }
.dan-employment .dlg { padding: 0; display: flex; flex-direction: column; gap: 15px; }
.dan-employment .dlg .hint { font-size: 13px; color: var(--d-muted); line-height: 1.5; margin: 0; }
.dan-employment .dlg .form-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.dan-employment .dlg .form-field label { font-size: 14px; font-weight: 400; color: var(--d-muted); }
.dan-employment .dlg .form-input { font-family: inherit; font-size: 15px; color: var(--d-text); background: var(--d-cream2);
  border: 1px solid var(--d-line-soft); border-radius: 12px; padding: 10px 13px; }
.dan-employment .dlg .form-input[aria-invalid="true"] { border-color: #B23C1E; }
.dan-employment .dlg .kit-field__hint { font-size: 13px; color: var(--d-muted); line-height: 1.5; margin: 9px 0 0; }   /* 6px של השדה + 9 = 15px, כמו הפסקה הנפרדת של דן */
.dan-employment .dlg .kit-field__error, .dan-employment .dlg .err { font-size: 13.5px; font-weight: 400; color: #B23C1E; margin: 0; }
.dan-employment .dlg .acts { display: flex; gap: 9px; justify-content: flex-start; flex-wrap: wrap; }
.dan-employment .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-employment .dbtn-solid:hover { background: var(--d-green-dark); }
.dan-employment .dbtn-solid:disabled { opacity: .6; cursor: default; }
.dan-employment .dbtn-ghost { font-family: inherit; font-size: 15px; font-weight: 500; color: var(--d-green); background: #fff;
  border: 1px solid #D8E3DA; border-radius: 999px; padding: 11px 20px; cursor: pointer; }
.dan-employment .dbtn-ghost:hover { background: #F4F8F5; }

/* ── 05.10 · רשימת בעלי התפקידים: תקופה · חיפוש אדם · כפתורי פעולה ───────────────────────────────────────────────────────────
   ⚠️ בלי צבעים חדשים: `.st.over` (הסתיים) ו-`.st.partial` (עתידי) הם תגי המצב הקיימים; `.er-period` הוא `.rolescope` רגיל. */
.dan-employment .er-period { white-space: normal; }
.dan-employment .er-note { padding: 14px 26px 22px; }
.dan-employment .rolerow[hidden], .dan-employment #er-titles[hidden], .dan-employment .er-pick[hidden], .dan-employment .er-picked[hidden],
.dan-employment [data-er-scope-ref][hidden] { display: none; }

/* חיפוש האדם בטופס השיוך: רשימת תוצאות כרשימת כפתורים (נגישה מהמקלדת), והבחירה — שורה אחת עם "שינוי". */
.dan-employment .er-pick { list-style: none; margin: 6px 0 0; padding: 4px; max-height: 220px; overflow-y: auto;
  border: 1px solid var(--d-line-soft); border-radius: 12px; display: flex; flex-direction: column; gap: 2px; }
.dan-employment .er-pick__item { width: 100%; font-family: inherit; font-size: inherit; color: var(--d-text); background: none; border: 0; border-radius: 8px;
  padding: 9px 11px; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; text-align: right; }
.dan-employment .er-pick__item:hover, .dan-employment .er-pick__item:focus-visible { background: var(--d-cream2); }
.dan-employment .er-pick__none { font-size: inherit; color: var(--d-muted); padding: 10px 11px; }
.dan-employment .er-picked { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--d-mint); border-radius: 12px; padding: 10px 13px; }
.dan-employment .er-picked__name { font-size: inherit; font-weight: 600; color: var(--d-green-dark); }
.dan-employment .kit-dialog--wide { width: min(560px, calc(100vw - 32px)); }
.dan-employment .dlg .form-field-group { display: contents; }

/* ── שבירות ─────────────────────────────────────────────────────────────────────
   ⚠️ container ולא media: רוחב התוכן תלוי במעטפת (סרגל פתוח/סגור), לא בחלון. בדן אין כאן אף שבירה. */
@container dan-employment (max-width: 700px) {
  .dan-employment .kpis { grid-template-columns: repeat(2, 1fr); }
  .dan-employment .dcard .pad, .dan-employment .toolbar, .dan-employment .layerbar { padding-inline: 16px; }
  .dan-employment .ugroup { padding-inline: 16px; }
  .dan-employment .units { padding-inline: 16px; }
  .dan-employment th, .dan-employment td { padding-inline: 16px; }
  .dan-employment .viewsw { margin-inline-start: 0; }
  .dan-employment .kpi .v { font-size: 26px; }
}