/* src/app/dan/accounts.css — פתיחת חשבונות: העיצוב של דן, מועתק.
 * מקור: legacy/community/accounts.html (ה-<style> שלו + מה שהוא לוקח מ-assets/css/page.css: .topbar · .kpis ·
 * .kpi · .btn-ghost · .btn-solid · .tag).
 * מסך: src/app/screens/accounts.js (`.dan-accounts`) — עוטף את עצמו ב-`<div class="dan dan-<מודול>">`. הנוהל: docs/runbooks/dan-design-port.md ·
 * הפלטה (`--d-*`): src/app/dan/dan.css.
 *
 * ⚠️ מה שונה מהמקור, ולמה — ארבעה דברים בלבד:
 *  ① **אין `:root`, ואין `body`/`*`/`a`/`h1`/`table`/`input` ברמת האלמנט.** כל כלל מקודד ב-`.dan-accounts`.
 *     הפלטה: `var(--green)` ⟶ `var(--d-green)`, `#3A4A42` ⟶ `var(--d-body)`.
 *  ② **שמות שהמעטפת (packages/ui) או kit.css כבר מגדירות ללא תחום נשנו** — מחלקה של דן באותו שם
 *     הייתה יורשת את הכללים שלהן בשקט (הרשימה: הפקודה בנוהל): `.topbar` ⟶ `.atop` · `.card` ⟶ `.acard` ·
 *     `.chips`/`.chip` ⟶ `.achips`/`.achip` · `.tag` ⟶ `.atag` · `.empty` ⟶ `.aempty` · `.btn-solid`/`.btn-ghost`
 *     ⟶ `.abtn-solid`/`.abtn-ghost` · `.dash` ⟶ `.adash` (`.dash` הוא המכל של manager.css). `.kpi`/`.kpis` — אינם
 *     במעטפת, נשארו.
 *  ③ **ארבעה צבעי טקסט הוכהו ל-AA** — `--dim` (#A3ACA5, 2.4:1) הוא של קווים בלבד: כותרות העמודות · ה-"—" ·
 *     תוויות התפריט · placeholder עברו ל-`--d-faint`; ומונה הצ'יפ (`opacity:.62` ⟹ 3:1) קיבל צבע מפורש.
 *     ובשורת הקלט — `outline:none` של דן הוחלף בטבעת מיקוד (ui-keyboard).
 *  ④ **container query ולא media query** — `.acwrap` הוא ה-container; `@media (max-width:1240px/640px)` של
 *     דן ⟶ `@container acc`. הטבלה נשארת בגלילה פנימית (`.tscroll`, `min-width` של דן), לא גלילת דף.
 *
 * ⚠️ מה שלא הועתק: `.scrim`/`.modal`/`.mh`/`.x` (המודאל הבנוי-ביד של דן — כאן `<dialog>` של kit, ה-X והמלכודת
 * מגיעים משם) · `.lcode`/`.lrow`/`.gsaved`/`#gq`/`#asq` (תור קודי הכניסה — הקוד אינו נשמר · מגדר · חסימת העוזר — אין להם
 * מקור נתונים כאן) · `.tag.ten-kibbutz`/`.ten-staff` (תג הדיירוּת — `is_dwelling` לא עבר; ראו ההערה בראש accounts.js; **`.ten-private`**
 * כן הועתק, וצובע את תג **מסלול הדיור**, כמו בדן) · `.user` (עמודת "שם משתמש" — אין שם משתמש בזהות המרכזית).
 * ✅ **`.invites`/`.invite`** (כרטיס "קודי הזמנה ממתינים למסירה" — שם · תקף/פג · "קוד חדש") **כן הועתקו**; הם נגזרים מ-`inviteExpiresAt`/`lapsedAt`.
 *
 * ⚠️ מה שנוסף על דן (שלושה דברים, וכולם לשבירה לנייד/נגישות, לא לעיצוב): (א) `.selall` — תווית נראית לבחירת-הכל בטבלת הכרטיסונים
 * (בדן ה-checkbox בכותרת בלבד); (ב) טבלה → כרטיסונים בצר (`@container acc`), כי דן גוללת אופקית וב-375 עמודת הפעולות מחוץ לתצוגה;
 * (ג) `.kit-dialog` ברוחב של דן (470 · wide 560) — ברירת המחדל של kit (560 · 720) רחבה ממנו.
 */

/* ============================================================================================================
   משותף — שני המסכים
   ============================================================================================================ */
.dan-accounts .acwrap {
  container: acc / inline-size;
  position: relative; display: flex; flex-direction: column; gap: var(--s3);
  color: var(--d-text);
}
.dan-accounts [hidden] { display: none !important; }
/* אזור ההודעות נשאר חי לקורא מסך גם כשהוא ריק, בלי לתפוס גובה או רווח נוסף. */
.dan-accounts .acwrap > .kit-status:empty {
  position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- כותרת (.topbar בדן) ---------- */
.dan-accounts .atop { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.dan-accounts h1 { font-size: 24px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; margin: 0 0 var(--s1); }
.dan-accounts .atop .meta { font-size: 15.5px; color: var(--d-muted); }
.dan-accounts .atop .meta a { color: var(--d-green-dark); text-decoration: underline; text-underline-offset: 3px; }
.dan-accounts .topacts { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.dan-accounts .topacts > button { min-height: var(--tap); }

/* ---------- כפתורים ---------- */
.dan-accounts .abtn-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; text-decoration: none; display: inline-block; }
.dan-accounts .abtn-ghost:hover { background: #F4F8F5; }
.dan-accounts .abtn-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-accounts .abtn-solid:hover { background: var(--d-green-dark); }
.dan-accounts .abtn-solid[disabled], .dan-accounts .abtn-ghost[disabled] { opacity: .5; cursor: default; }
.dan-accounts .abtn-sm { font-family: inherit; font-size: 14px; font-weight: 500; color: var(--d-green); background: #F4F8F5; border: 0;
  border-radius: 999px; padding: 8px 16px; cursor: pointer; white-space: nowrap; }
.dan-accounts .abtn-sm:hover { background: var(--d-mint); }
.dan-accounts .abtn-sm.solid { background: var(--d-green); color: #fff; }
.dan-accounts .abtn-sm.solid:hover { background: var(--d-green-dark); }
.dan-accounts .abtn-sm[disabled] { opacity: .5; cursor: default; }
.dan-accounts a.abtn-sm { display: inline-block; text-decoration: none; }

/* ---------- KPI (page.css בדן) ---------- */
.dan-accounts .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.dan-accounts .kpis.three { grid-template-columns: repeat(3, 1fr); }
.dan-accounts .kpi { background: #fff; border-radius: 18px; padding: var(--s3) var(--s4); box-shadow: var(--d-shadow);
  min-width: 0; display: flex; flex-direction: column; gap: var(--s1); }
.dan-accounts .kpi .l { font-size: 14px; color: var(--d-faint); }
.dan-accounts .kpi .v { font-size: 26px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; }
.dan-accounts .kpi .s { font-size: 13.5px; color: var(--d-green); }
.dan-accounts .kpi .s.warn { color: var(--d-orange-ink); }
.dan-accounts .kpi .s.mute { color: var(--d-faint); }
.dan-accounts .kpi.hot { border-top: 4px solid var(--d-orange); }

/* ---------- כרטיסים ----------
   ⚠️ .acard (.card בדן) דורס את הכרטיס של page.css בכוונה: שם padding אחיד, וכאן הטבלה חייבת להגיע עד הקצה
   בעוד הכותרת מרופדת. לכן ה-padding עבר ל-.pad פנימי. */
.dan-accounts .layout { display: flex; flex-direction: column; gap: 18px; }
.dan-accounts .acard { background: #fff; border-radius: 22px; box-shadow: var(--d-shadow); display: flex; flex-direction: column; gap: 0; padding: 0; }
.dan-accounts .acard .pad { padding: 22px 26px; display: flex; flex-direction: column; gap: 16px; }
.dan-accounts .acard h2 { font-size: 18px; font-weight: 600; color: var(--d-ink); margin: 0; }
.dan-accounts .headrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dan-accounts .lede { font-size: 14px; color: var(--d-muted); line-height: 1.55; }
.dan-accounts .lede a, .dan-accounts .infobox a { color: var(--d-green-dark); text-decoration: underline; text-underline-offset: 3px; }
.dan-accounts .aempty { font-size: 14px; color: var(--d-faint); padding: 8px 0 4px; line-height: 1.6; }

/* ---------- תגים (page.css בדן) ---------- */
.dan-accounts .atag { display: inline-block; font-size: 12.5px; font-weight: 500; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
/* ⚠️ התגים ממופים ל**קטגוריית מעמד** ולא למעמד עצמו (הערת דן): מעמד חדש בקטגוריה קיימת מקבל צבע בלי שאיש ייגע כאן. */
.dan-accounts .atag.c-member { color: var(--d-green-dark); background: var(--d-mint); }
.dan-accounts .atag.c-resident { color: #3B5C74; background: #E6F0F7; }
.dan-accounts .atag.c-children { color: #7A4A6B; background: #F6EAF2; }
.dan-accounts .atag.c-worker { color: #6E5A2E; background: #F7F0DC; }
.dan-accounts .atag.c-external, .dan-accounts .atag.c-none { color: #5D5A63; background: #EFEDF2; }
.dan-accounts .atag.warn { color: var(--d-orange-ink); background: var(--d-orange-soft); }
/* תג מסלול הדיור — `.tag.ten.ten-private` בדן: מסגרת ולא רקע, כדי שיישב **לצד** תג המעמד ולא במקומו (הם אומרים שני דברים שונים). */
.dan-accounts .atag.ten { border: 1px solid currentColor; background: transparent; font-weight: 600; }
.dan-accounts .atag.ten-private { color: #6B4E7A; }

/* ============================================================================================================
   מסך החשבונות
   ============================================================================================================ */

/* ---------- מצב קריאה בלבד (ראו READ_ONLY_NOTE ב-accounts.js) ---------- */
.dan-accounts .infobox[data-ac-readonly] { border: 1px solid var(--d-line); }

/* ---------- סרגל חיפוש וסינון ---------- */
.dan-accounts .toolbar { display: flex; flex-direction: column; gap: 12px; padding: 20px 26px 16px; border-bottom: 1px solid var(--d-line-soft); }
.dan-accounts .tb-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dan-accounts .tb-group { align-items: baseline; }
.dan-accounts .tb-lbl { flex: none; width: 74px; font-size: var(--fs-th); font-weight: 600; color: var(--d-muted); }
.dan-accounts .afacets { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }
/* מרשם האוכלוסין · תפריטי הסינון (`facetsHTML` ב-accounts.js) — `<details>`: נפתח במקלדת ובקורא מסך בלי JS, ו-JS רק סוגר את האחרים. */
.dan-accounts .afacet { position: relative; }
.dan-accounts .afacet > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--d-line); border-radius: 999px;
  background: var(--d-cream2); color: var(--d-body); font-size: var(--fs-td); font-weight: 500; cursor: pointer; user-select: none; }
.dan-accounts .afacet > summary::-webkit-details-marker { display: none; }
.dan-accounts .afacet > summary:hover { background: var(--d-mint); }
.dan-accounts .afacet > summary:focus-visible { outline: 2px solid var(--d-green); outline-offset: 2px; }
.dan-accounts .afacet[open] > summary { border-color: var(--d-green); background: var(--d-mint); }
.dan-accounts .afacet.on > summary { border-color: var(--d-green); color: var(--d-green-dark); background: var(--d-mint); }
/* כפתור "בעלי תפקיד פעילים" — אותה צורת גלולה כמו תפריטי הסינון, אבל כפתור הדלקה (aria-pressed) ולא `<details>`. */
.dan-accounts .aholder { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--d-line); border-radius: 999px;
  background: var(--d-cream2); color: var(--d-body); font: inherit; font-size: var(--fs-td); font-weight: 500; cursor: pointer; user-select: none; }
.dan-accounts .aholder:hover { background: var(--d-mint); }
.dan-accounts .aholder:focus-visible { outline: 2px solid var(--d-green); outline-offset: 2px; }
.dan-accounts .aholder.on { border-color: var(--d-green); color: var(--d-green-dark); background: var(--d-mint); }
.dan-accounts .aholder .n { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--d-line); color: var(--d-body); font-size: var(--fs-th); font-weight: 600; text-align: center; }
.dan-accounts .aholder.on .n { background: var(--d-green); color: var(--d-cream2); }
.dan-accounts .afacet .cnt { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--d-green); color: var(--d-cream2); font-size: var(--fs-th); font-weight: 600; text-align: center; }
.dan-accounts .afacet .chev { display: inline-block; width: 7px; height: 7px; margin-block-start: -3px; border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor;   /* פיזי ולא לוגי: בעברית (RTL) `border-inline-end` הוא השמאלי והחץ היה מצביע הצידה */
  transform: rotate(45deg); transition: transform var(--dur-fast) var(--ease); }
.dan-accounts .afacet[open] .chev { transform: rotate(-135deg); margin-block-start: 3px; }
.dan-accounts .afacet-pop { position: absolute; z-index: 20; inset-inline-start: 0; top: calc(100% + 6px); min-width: 240px; max-width: min(340px, 90vw); max-height: 360px; overflow: auto;
  padding: 10px; border: 1px solid var(--d-line); border-radius: 16px; background: var(--d-cream2); box-shadow: var(--d-shadow-hi); }
.dan-accounts .fopt { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; font-size: var(--fs-td); color: var(--d-body); cursor: pointer; }
.dan-accounts .fopt:hover { background: var(--d-mint); }
.dan-accounts .fopt input { accent-color: var(--d-green); width: 16px; height: 16px; flex: none; }
.dan-accounts .fopt .l { flex: 1; min-width: 0; }
.dan-accounts .fopt b { font-weight: 500; color: var(--d-faint); font-variant-numeric: tabular-nums; }
.dan-accounts .age-row { display: flex; gap: 10px; }
.dan-accounts .age-row label { display: flex; flex-direction: column; gap: 4px; flex: 1; font-size: var(--fs-th); color: var(--d-muted); }
.dan-accounts .age-row input { width: 100%; padding: 8px 10px; border: 1px solid var(--d-line); border-radius: 10px; background: var(--d-cream2); color: var(--d-text); font: inherit; }
.dan-accounts .age-row input:focus-visible { outline: 2px solid var(--d-green); outline-offset: 1px; }
.dan-accounts .age-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.dan-accounts .fnote { margin: 10px 2px 0; font-size: var(--fs-th); color: var(--d-faint); line-height: 1.5; }
.dan-accounts .age-error { color: var(--d-orange); }
.dan-accounts .age-row input[aria-invalid="true"] { border-color: var(--d-orange); background: var(--d-orange-soft); }
/* הסינונים הפעילים: כל אחד נסגר ב-✕, ו"ניקוי הכול". */
.dan-accounts .aactive[hidden] { display: none; }
.dan-accounts .aactive .alabel { font-size: var(--fs-th); font-weight: 600; color: var(--d-muted); }
.dan-accounts .atoken { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; border: 0; border-radius: 999px; background: var(--d-mint); color: var(--d-green-dark);
  font: inherit; font-size: var(--fs-td); cursor: pointer; }
.dan-accounts .atoken .g { color: var(--d-muted); font-size: var(--fs-th); }
.dan-accounts .atoken i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--d-cream2); line-height: 1; }
.dan-accounts .atoken:hover i { background: var(--d-sage); }
.dan-accounts .atoken:focus-visible { outline: 2px solid var(--d-green); outline-offset: 2px; }
/* תגיות המעמד בשורה — לפי ציר: חברוּת (ירוק) · תושבות (נייטרלי) · זיקה (מסגרת כחולה). */
.dan-accounts .atag.ax-membership { background: var(--d-mint); color: var(--d-green-dark); }
.dan-accounts .atag.ax-residency { background: var(--d-track); color: var(--d-body); }
.dan-accounts .atag.ax-affiliation { background: var(--d-cream2); color: var(--d-ink); box-shadow: inset 0 0 0 1px var(--d-water); }
.dan-accounts .atag.ax-work { background: var(--d-sand); color: var(--d-ink); }
.dan-accounts .atag.ax-role { background: var(--d-ink); color: var(--d-cream2); }
.dan-accounts .fclose { display: none; }
@media (max-width: 640px) {
  .dan-accounts .fclose { display: block; width: 100%; margin-top: 10px; }
  .dan-accounts .tb-group { flex-direction: column; align-items: stretch; gap: 6px; }
  .dan-accounts .tb-lbl { width: auto; }
  .dan-accounts .afacet { position: static; }
  .dan-accounts .afacet-pop { position: fixed; inset-inline: 12px; top: auto; bottom: 12px; max-width: none; max-height: 60vh; z-index: 60; }
}
/* ⚠️ `min-width` 290 ולא 200 של דן: ה-placeholder ("חיפוש לפי שם, מעמד, נכס או ענף") נחתך ב-200, ועם שבעה צ'יפים (דן: שישה) הוא היה נחתך תמיד. */
.dan-accounts .search { flex: 1; min-width: 290px; position: relative; }
.dan-accounts .search input { width: 100%; font-family: inherit; font-size: 15px; color: var(--d-text); background: var(--d-cream2);
  border: 1px solid var(--d-line); border-radius: 12px; padding: 12px 42px 12px 14px; }
.dan-accounts .search input::placeholder { color: var(--d-faint); }
.dan-accounts .search input:focus { outline: 2px solid var(--d-green); outline-offset: 1px; border-color: var(--d-green-mid); background: #fff; }
.dan-accounts .search svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); opacity: .6; width: 17px; height: 17px; }
.dan-accounts .achips { display: flex; gap: 7px; flex-wrap: wrap; }
.dan-accounts .achip { font-family: inherit; font-size: 14px; font-weight: 500; color: #4A574F; background: #fff; border: 1px solid var(--d-line);
  border-radius: 999px; padding: 9px 15px; cursor: pointer; display: flex; align-items: center; gap: 7px; }
.dan-accounts .achip:hover { border-color: #C6D6CB; color: var(--d-green); }
.dan-accounts .achip.on { background: var(--d-ink); border-color: var(--d-ink); color: #fff; }
/* ⚠️ המונה: `opacity:.62` של דן הוריד אותו ל-3:1 על לבן — צבע מפורש במקומו, בשני המצבים. */
.dan-accounts .achip b { font-weight: 600; color: var(--d-muted); font-size: 13px; }
.dan-accounts .achip.on b { color: var(--d-sage); }

.dan-accounts .bulkbar { display: none; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: var(--d-mint); padding: 13px 26px; border-bottom: 1px solid #D6E9DD; }
.dan-accounts .bulkbar.show { display: flex; }
.dan-accounts .bulkbar .t { font-size: 15px; font-weight: 500; color: var(--d-green-dark); }
.dan-accounts .bulkbar .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.dan-accounts .bulkbar .abtn-sm { background: #fff; }

/* ---------- הטבלה ---------- */
/* ⚠️ גלילה פנימית ולא גלילת דף: הטבלה (min-width של דן) נשארת, והגלילה היא של המכל — ב-375 הדף עצמו אינו גולש. */
/* 🔴 `position: relative` — בלעדיו `.sr-only` (absolute) שבכותרת העמודה האחרונה מציב את עצמו לפי ה-containing block הראשוני,
   מחוץ לגלילה, ו-ב-375 הוא מרחיב את הדף ל-670px (נמדד 01.10: `thead` מוסתר ⟹ 375). */
.dan-accounts .tscroll { overflow-x: auto; position: relative; }
.dan-accounts table { width: 100%; min-width: 780px; border-collapse: collapse; }
.dan-accounts thead th { text-align: right; font-size: 13px; font-weight: 500; color: var(--d-faint); padding: 14px 12px; letter-spacing: .02em;
  border-bottom: 1px solid var(--d-line-soft); background: #fff; white-space: nowrap; }
.dan-accounts thead th:first-child { padding-inline-start: 26px; }
/* ⚠️ הרוחב על עמודת הבחירה (`c-sel`) ולא על `:first-child` של דן — במצב קריאה בלבד אין עמודת בחירה, והעמודה הראשונה היא השם. */
.dan-accounts thead th.c-sel { width: 38px; }
.dan-accounts thead th.c-age, .dan-accounts tbody td.c-age { width: 64px; font-variant-numeric: tabular-nums; }
.dan-accounts thead th.c-gender, .dan-accounts tbody td.c-gender { width: 84px; white-space: nowrap; }
.dan-accounts thead th:last-child { padding-inline-end: 26px; text-align: left; }
/* ── מיון עמודות (07.10) ── כותרת ממיינת = כפתור שנראה כטקסט, עם מחוון: שני משולשים (לא ממוין) · משולש אחד (עולה/יורד). הצבע מ-tokens בלבד. */
.dan-accounts thead th .thsort { display: inline-flex; align-items: center; gap: 6px; padding: 0; margin: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; color: inherit; cursor: pointer; white-space: nowrap; }
.dan-accounts thead th .thsort:hover { color: var(--d-green-dark); }
.dan-accounts thead th .thsort:focus-visible { outline: 2px solid var(--d-green); outline-offset: 3px; border-radius: 4px; }
.dan-accounts thead th .si { position: relative; width: 9px; height: 14px; flex: none; opacity: .55; }
.dan-accounts thead th .si::before, .dan-accounts thead th .si::after { content: ''; position: absolute; inset-inline-start: 0; border-inline: 4.5px solid transparent; }
.dan-accounts thead th .si::before { top: 0; border-bottom: 5.5px solid currentColor; }
.dan-accounts thead th .si::after { bottom: 0; border-top: 5.5px solid currentColor; }
.dan-accounts thead th[aria-sort="ascending"], .dan-accounts thead th[aria-sort="descending"] { color: var(--d-ink); }
.dan-accounts thead th[aria-sort="ascending"] .si, .dan-accounts thead th[aria-sort="descending"] .si { opacity: 1; }
.dan-accounts thead th[aria-sort="ascending"] .si::after, .dan-accounts thead th[aria-sort="descending"] .si::before { visibility: hidden; }
/* ── עמודות דינמיות (07.10) ── תא של שדה שנבחר בחלון "עמודות" (`c-col`); חמש העמודות המקוריות נשארות במחלקות שלהן. */
.dan-accounts tbody td.c-col { max-width: 260px; }
.dan-accounts .colhead { margin: 18px 0 0; font-size: var(--fs-td); font-weight: 600; color: var(--d-muted); }
.dan-accounts .colhead:first-of-type { margin-top: 6px; }
.dan-accounts .colgrps { display: grid; gap: 14px; margin-top: 12px; }
.dan-accounts .colgrp { margin: 0; padding: 12px 16px 14px; border: 1px solid var(--d-line-soft); border-radius: 14px; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.dan-accounts .colgrp legend { padding: 0 6px; font-size: var(--fs-td); font-weight: 600; color: var(--d-text); }
.dan-accounts .colopt { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font-size: var(--fs-td); color: var(--d-body); cursor: pointer; }
.dan-accounts .colopt small { font-size: var(--fs-th); color: var(--d-muted); }
.dan-accounts .colopt input:disabled { cursor: not-allowed; }
.dan-accounts tbody td { font-size: 14.5px; padding: 14px 12px; border-bottom: 1px solid #F6F3EA; color: var(--d-body); vertical-align: middle; }
.dan-accounts tbody td:first-child { padding-inline-start: 26px; }
.dan-accounts tbody td:last-child { padding-inline-end: 26px; text-align: left; }
.dan-accounts tbody tr:last-child td { border-bottom: 0; }
.dan-accounts tbody tr:hover { background: #FCFBF6; }
.dan-accounts tbody tr.sel { background: #F4FAF6; }
.dan-accounts .who { display: flex; align-items: center; gap: 11px; }
.dan-accounts .who .av { width: 34px; height: 34px; border-radius: 50%; background: var(--d-cream2); color: var(--d-green-dark);
  font-size: 13.5px; font-weight: 600; display: grid; place-items: center; flex: none; }
.dan-accounts .who .nm { font-weight: 500; color: var(--d-text); }
.dan-accounts .who .sub { font-size: 12.5px; color: var(--d-faint); margin-top: 1px; }
.dan-accounts .adash { color: var(--d-faint); }
.dan-accounts input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--d-green); cursor: pointer; }
.dan-accounts .tagwrap { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
/* בחירת הכל: ב-wide ה-checkbox לבדו (כמו בדן), והתווית לקורא-מסך; בכרטיסונים (למטה) התווית נראית. */
.dan-accounts .selall { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.dan-accounts .selall span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* מצב החשבון — נקודה + טקסט. ⚠️ `live` ו-`active` שניהם ירוק: הטקסט כאן הוא "יש חשבון" ולא "נכנס/ה בתאריך" (אין נתון כניסה). */
.dan-accounts .st { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; white-space: nowrap; }
.dan-accounts .st i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dan-accounts .st.active i, .dan-accounts .st.live i { background: var(--d-green-mid); }
.dan-accounts .st.active, .dan-accounts .st.live { color: var(--d-body); }
.dan-accounts .st.never i { background: var(--d-sand); } .dan-accounts .st.never { color: var(--d-orange-ink); }
.dan-accounts .st.none i { background: #D6D2C6; } .dan-accounts .st.none { color: var(--d-faint); }
.dan-accounts .st.invited i { background: var(--d-water); } .dan-accounts .st.invited { color: #3B5C74; }
.dan-accounts .st.disabled i { background: var(--d-orange); } .dan-accounts .st.disabled { color: var(--d-orange-ink); }
/* ⚠️ lapsed נצבע כאזהרה ולא כאפור-נייטרלי (הערת דן) — שמור למצב שעוד אין לו נתון. */
.dan-accounts .st.lapsed i { background: var(--d-orange); } .dan-accounts .st.lapsed { color: var(--d-orange-ink); }

.dan-accounts .rowacts { display: flex; align-items: center; gap: 7px; justify-content: flex-start; }
.dan-accounts .kebab { font-family: inherit; font-size: 17px; line-height: 1; color: var(--d-faint); background: #F6F4ED; border: 0; border-radius: 9px;
  width: 32px; height: 32px; cursor: pointer; flex: none; }
.dan-accounts .kebab:hover { background: var(--d-track); color: var(--d-text); }

.dan-accounts .tfoot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 16px 26px; border-top: 1px solid var(--d-line-soft); }
.dan-accounts .tfoot .c { font-size: 14px; color: var(--d-faint); }
.dan-accounts .pager { display: flex; gap: 6px; flex-wrap: wrap; }
.dan-accounts .pager button { font-family: inherit; font-size: 14px; color: #4A574F; background: #fff; border: 1px solid var(--d-line);
  border-radius: 9px; min-width: 34px; height: 34px; cursor: pointer; }
.dan-accounts .pager button:hover { border-color: #C6D6CB; color: var(--d-green); }
.dan-accounts .pager button.on { background: var(--d-ink); border-color: var(--d-ink); color: #fff; }
.dan-accounts .pager button[disabled] { opacity: .45; cursor: default; }

/* ---------- תפריט פעולות בשורה ----------
   ⚠️ position:fixed — והוא מחוץ ל-.acwrap בכוונה: `container` על .acwrap הופך אותו ל-containing block ל-fixed. */
.dan-accounts .menu { position: fixed; display: none; flex-direction: column; background: #fff; border: 1px solid var(--d-line); border-radius: 14px;
  padding: 6px; min-width: 230px; max-width: calc(100vw - 24px); box-shadow: 0 18px 46px rgba(16,42,32,.18); z-index: 60; }
.dan-accounts .menu.show { display: flex; }
.dan-accounts .menu .mlbl { font-size: 11.5px; letter-spacing: .1em; color: var(--d-faint); font-weight: 500; padding: 8px 12px 5px; }
.dan-accounts .menu button { font-family: inherit; font-size: 14.5px; text-align: right; color: var(--d-body); background: none; border: 0;
  border-radius: 9px; padding: 10px 12px; cursor: pointer; }
.dan-accounts .menu button:hover { background: #F4F8F5; color: var(--d-green); }
.dan-accounts .menu button.warn { color: var(--d-orange-ink); } .dan-accounts .menu button.warn:hover { background: var(--d-orange-soft); }
.dan-accounts .menu hr { border: 0; height: 1px; background: var(--d-line-soft); margin: 5px 8px; }
.dan-accounts .menu .mnote { font-size: 13.5px; color: var(--d-faint); padding: 2px 12px 10px; line-height: 1.5; max-width: 210px; }

/* ---------- תוכן הדיאלוגים (המעטפת היא kit-dialog) ----------
   ⚠️ ה-`.modal` של דן (24px · צל כבד · כותרת 19px) — מועבר ל-`<dialog>` של kit כך שהמראה נשאר. */
.dan-accounts .kit-dialog { border-radius: 24px; box-shadow: 0 30px 70px rgba(16,42,32,.28); width: min(470px, calc(100vw - 32px)); }
.dan-accounts .kit-dialog--wide { width: min(560px, calc(100vw - 32px)); }
.dan-accounts .kit-dialog::backdrop { background: rgba(16,42,32,.42); }
.dan-accounts .kit-dialog__head h2 { font-size: 19px; font-weight: 600; color: var(--d-ink); }
.dan-accounts .kit-dialog__sub { color: var(--d-muted); font-size: 14px; }
.dan-accounts .kit-dialog__body { display: flex; flex-direction: column; gap: 16px; }
.dan-accounts .kit-dialog__foot .abtn-solid { flex: 1; min-width: 170px; }

.dan-accounts .field { display: flex; flex-direction: column; gap: 6px; }
.dan-accounts .field label { font-size: 13.5px; font-weight: 500; color: #4A574F; }
.dan-accounts .field .hint { font-size: 12.5px; color: var(--d-faint); line-height: 1.5; }
.dan-accounts .field input, .dan-accounts .field select { font-family: inherit; font-size: 15px; color: var(--d-text); background: var(--d-cream2);
  border: 1px solid var(--d-line); border-radius: 11px; padding: 11px 13px; width: 100%; }
.dan-accounts .field input:focus, .dan-accounts .field select:focus { outline: 2px solid var(--d-green); outline-offset: 1px; border-color: var(--d-green-mid); background: #fff; }
.dan-accounts .field input[aria-invalid="true"] { border-color: var(--d-orange); background: var(--d-orange-soft); }
.dan-accounts .seg { display: flex; gap: 7px; flex-wrap: wrap; }
.dan-accounts .seg button { font-family: inherit; font-size: 14px; font-weight: 500; color: #4A574F; background: #fff; border: 1px solid var(--d-line);
  border-radius: 999px; padding: 9px 15px; cursor: pointer; }
.dan-accounts .seg button:hover { border-color: #C6D6CB; color: var(--d-green); }
.dan-accounts .seg button.on { background: var(--d-ink); border-color: var(--d-ink); color: #fff; }
.dan-accounts .rcpt { display: flex; align-items: center; gap: 10px; background: var(--d-cream2); border-radius: 13px; padding: 11px 14px; }
.dan-accounts .rcpt .av { width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--d-green-dark); font-size: 13px; font-weight: 600;
  display: grid; place-items: center; flex: none; }
.dan-accounts .rcpt .n { font-size: 14.5px; font-weight: 500; }
.dan-accounts .rcpt .s { font-size: 12.5px; color: var(--d-faint); margin-top: 1px; }
.dan-accounts .infobox { background: var(--d-cream2); border-radius: 14px; padding: 14px 16px; font-size: 13.5px; color: #4A574F; line-height: 1.6; }
.dan-accounts .infobox b { color: var(--d-ink); font-weight: 600; }
.dan-accounts .msg { border-radius: 12px; padding: 12px 16px; font-size: 14.5px; line-height: 1.55; }
.dan-accounts .msg.bad { background: var(--d-orange-soft); color: var(--d-orange-ink); }
.dan-accounts .msg.bad b { font-weight: 600; }
/* שורה לכל אדם בטופס הפתיחה (מרוכז = כמה אנשים בטופס אחד — אין ערוץ שליחה, וה-person אינו מחזיק נייד/דוא״ל).
   ⚠️ שורה אחת לאדם (שם · ערוץ · ערך) ולא שלושה בלוקים אנכיים: בלי זה עשרים אנשים הם שלושה מסכי גלילה. התווית נשארת
   לקורא-מסך (`sr-only`) — מה שמבדיל בין נייד לדוא״ל הוא הכפתור שמעליה. */
.dan-accounts .aperson { display: grid; grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1.5fr); gap: 8px 12px; align-items: start;
  padding-bottom: 14px; border-bottom: 1px solid var(--d-line-soft); }
.dan-accounts .aperson:last-of-type { border-bottom: 0; padding-bottom: 0; }
.dan-accounts .aperson .rcpt { min-width: 0; }
.dan-accounts .aperson .rcpt .n, .dan-accounts .aperson .rcpt .s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dan-accounts .aperson .seg { flex-wrap: nowrap; padding-top: 4px; }
.dan-accounts .aperson .field label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dan-accounts .aperson .rowerr { grid-column: 1 / -1; font-size: 13px; color: var(--d-orange-ink); line-height: 1.5; }
/* ⚠️ `@media` ולא `@container` — בכוונה, והחריג היחיד: ה-`<dialog>` הוא ב-top layer ורוחבו נקבע מהחלון
   (`min(720px, 100vw - …)` ב-kit.css), לא מה-`.acwrap` שמכיל אותו ב-DOM. */
@media (max-width: 640px) {
  .dan-accounts .aperson { grid-template-columns: 1fr; }
}

/* הודעת מצב (הצלחה · שגיאה) — דן מציגה `alert()`; כאן שורה דביקה בראש המסך, כדי שלא תיעלם מחוץ לתצוגה ליד טבלה ארוכה. */
.dan-accounts .kit-status:not(:empty) { position: sticky; top: 12px; z-index: 5; background: #fff; border: 1px solid var(--d-line); border-radius: 14px;
  padding: 12px 16px; font-size: 14.5px; box-shadow: var(--d-shadow-hi); color: var(--d-green-dark); }
.dan-accounts .kit-status--err { background: var(--d-orange-soft); border-color: transparent; color: var(--d-orange-ink); }
.dan-accounts .kit-status--wait { color: var(--d-muted); }

/* ---------- קודי הזמנה ממתינים למסירה (דן: `.invites`/`.invite`) ---------- */
.dan-accounts .invites { display: flex; flex-direction: column; gap: 11px; }
.dan-accounts .invite { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--d-cream2); border-radius: 14px; padding: 13px 15px; flex-wrap: wrap; }
.dan-accounts .invite .n { font-size: 14.5px; font-weight: 500; }
.dan-accounts .invite .s { font-size: 12.5px; color: var(--d-faint); margin-top: 2px; }

/* ---------- חשיפת קוד חד-פעמית ---------- */
.dan-accounts .codebox { background: var(--d-mint); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.dan-accounts .codelist { display: flex; flex-direction: column; gap: 9px; max-height: 46vh; overflow-y: auto; }
.dan-accounts .codeline { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 11px 14px; }
/* ⚠️ min-width:0 ולא רק flex:1 (הערת דן): בלעדיו שם ארוך דוחף את כפתור ההעתקה לשורה שנייה. השם מתקצר; הקוד והכפתור לעולם לא. */
.dan-accounts .codeline .n { font-size: 14.5px; font-weight: 500; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ⚠️ dir=ltr ו-monospace: ספרות שמוצגות בהקשר RTL עלולות להתהפך בקריאה בקול — והקוד מוקרא בטלפון (הערת דן).
   ⚠️ 17px ולא 13.5px של דן: ב-דן `.code` הוא **קישור הזמנה** ארוך (אורכו מכתיב גודל קטן); כאן זה קוד OTP קצר שמקריאים בטלפון — גדול וקריא. */
.dan-accounts .code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 17px; font-weight: 600; letter-spacing: .12em;
  color: var(--d-orange-ink); background: var(--d-orange-soft); border-radius: 9px; padding: 6px 11px; direction: ltr; unicode-bidi: isolate; word-break: break-all; flex: none; }
.dan-accounts .note { font-size: 13.5px; color: var(--d-green-dark); line-height: 1.6; }
.dan-accounts .skipped { font-size: 13.5px; color: var(--d-orange-ink); background: var(--d-orange-soft); border-radius: 12px; padding: 11px 14px; line-height: 1.6; }

/* ---------- שבירות (container ולא media — .acwrap) ---------- */
/* ⚠️ 900 ולא 1240 של דן: ה-1240 שלו נמדד על החלון, כשהסרגל (~260px) והריפוד (~72px) כבר בפנים — המקביל לרוחב התוכן. */
@container acc (max-width: 900px) {
  .dan-accounts .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container acc (max-width: 640px) {
  .dan-accounts .kpi { padding: var(--s3); }
  .dan-accounts .search { min-width: 0; }
  .dan-accounts .toolbar, .dan-accounts .bulkbar, .dan-accounts .tfoot { padding-inline: 18px; }
  .dan-accounts .acard .pad { padding: 20px 18px; }

  /* 🔴 הטבלה בצר → כרטיסונים. בדן היא גוללת אופקית (min-width 760), וב-375 עמודת הפעולות ("פתיחת חשבון" · "החזרת גישה") יושבת מחוץ
     לתצוגה — הפעולה העיקרית של המסך מאחורי גלילה. כאן: שורה = כרטיסון — שם (עם תיבת הסימון) · תגים · מצב · פעולות — בלי גלילה אופקית.
     ⚠️ המחלקות (`c-sel` · `c-who` …) ולא `:nth-child` — במצב קריאה בלבד אין עמודת סימון, והמיקומים היו זזים. */
  .dan-accounts table { min-width: 0; display: block; }
  .dan-accounts thead { display: block; }
  .dan-accounts thead tr { display: flex; padding: 10px 18px; border-bottom: 1px solid var(--d-line-soft); }
  .dan-accounts thead th { display: none; padding: 0; border: 0; }
  .dan-accounts thead th.c-sel { display: block; width: auto; padding: 0; }
  .dan-accounts thead th:first-child { padding-inline-start: 0; }
  .dan-accounts .selall span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; font-size: 13.5px; color: var(--d-muted); }
  .dan-accounts tbody { display: block; }
  .dan-accounts tbody tr { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; padding: 14px 18px; border-bottom: 1px solid #F6F3EA; align-items: center; }
  .dan-accounts tbody tr:last-child { border-bottom: 0; }
  .dan-accounts tbody td { display: block; padding: 0; border: 0; min-width: 0; }
  .dan-accounts tbody td:first-child, .dan-accounts tbody td:last-child { padding-inline: 0; text-align: start; }
  .dan-accounts tbody td.c-sel { grid-column: 1; grid-row: 1; }
  .dan-accounts tbody td.c-who { grid-column: 2; grid-row: 1; }
  .dan-accounts tbody tr:not(:has(td.c-sel)) td.c-who { grid-column: 1 / -1; }
  /* גיל ומגדר: בכרטיסון — שורה קטנה אחת לכל אחד, עם התווית (data-label), מתחת לשם */
  .dan-accounts tbody td.c-age, .dan-accounts tbody td.c-gender { grid-column: 1 / -1; display: flex; gap: 6px; width: auto; font-size: var(--fs-th); color: var(--d-muted); }
  .dan-accounts tbody td.c-age::before, .dan-accounts tbody td.c-gender::before { content: attr(data-label) ":"; color: var(--d-faint); }
  .dan-accounts tbody td.c-role, .dan-accounts tbody td.c-state, .dan-accounts tbody td.c-act { grid-column: 1 / -1; }
  .dan-accounts tbody td.c-role, .dan-accounts tbody td.c-state { padding-inline-start: 0; }
  .dan-accounts tbody td.c-col { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; max-width: none; padding-inline-start: 0; font-size: var(--fs-th); color: var(--d-muted); }
  .dan-accounts tbody td.c-col::before { content: attr(data-label) ":"; color: var(--d-faint); }
  .dan-accounts tbody td[colspan] { grid-column: 1 / -1; }
  .dan-accounts .rowacts { flex-wrap: wrap; }
  .dan-accounts .tscroll { overflow-x: visible; }
}

/* כרטיס אדם (קריאה בלבד) — `personCardHTML` ב-accounts.js. השם בשורה הוא כפתור שנראה כטקסט. */
.dan-accounts .nmbtn { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; }
.dan-accounts .nmbtn:hover { text-decoration: underline; text-underline-offset: 3px; color: var(--d-green-dark); }
.dan-accounts .nmbtn:focus-visible { outline: 2px solid var(--d-green); outline-offset: 3px; border-radius: 4px; }
.dan-accounts .pc-head { display: flex; align-items: center; gap: 14px; padding-block-end: 14px; border-bottom: 1px solid var(--d-line-soft); }
.dan-accounts .pc-name { font-size: var(--fs-h3); font-weight: 600; color: var(--d-text); }
.dan-accounts .pc-sub { font-size: var(--fs-th); color: var(--d-muted); margin-block-start: 2px; }
.dan-accounts .pc-grid { margin: 0; }
.dan-accounts .pc-row { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: baseline; padding: 11px 2px; border-bottom: 1px solid var(--d-line-soft); }
.dan-accounts .pc-row dt { font-size: var(--fs-th); font-weight: 600; color: var(--d-muted); }
.dan-accounts .pc-row dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--fs-td); color: var(--d-body); }
.dan-accounts .pc-note { margin-block-start: 12px; padding: 10px 12px; border-radius: 12px; background: var(--d-cream2); color: var(--d-body); font-size: var(--fs-th); line-height: 1.5; }
@media (max-width: 640px) { .dan-accounts .pc-row { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- חלון הייצוא (`kit/export-dialog.js`; המארח נותן את הצבע) ----------
   ארבעה מצבים בחלון אחד: הגדרה · הכנה · אישור · רשימה גדולה. `.field` · `.infobox` · `.msg` · `.abtn-*` — הכללים שלמעלה. */
.dan-accounts .xd-foot { display: contents; }
.dan-accounts .xd-foot[hidden] { display: none; }
.dan-accounts .xd-sum { background: var(--d-cream2); border-radius: 14px; padding: 12px 16px; color: var(--d-ink); font-size: var(--fs-td); }
.dan-accounts .xd-n { font-size: var(--fs-h2); font-weight: 600; }
.dan-accounts .xd-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 8px; }
.dan-accounts .xd-filters:empty { display: none; }
.dan-accounts .xd-pill { font-size: var(--fs-th); border: 1px solid var(--d-line); border-radius: 999px; padding: 2px 10px; background: var(--d-mint); color: var(--d-body); }
.dan-accounts fieldset.xd-scope, .dan-accounts fieldset.xd-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.dan-accounts .xd-lbl { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; width: 100%; padding: 0; margin-block-end: 6px; font-size: var(--fs-th); font-weight: 500; color: var(--d-body); }
.dan-accounts .xd-lbl small { font-weight: 400; font-size: var(--fs-th); color: var(--d-muted); }
.dan-accounts .xd-opt { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: var(--fs-td); color: var(--d-text); cursor: pointer; }
.dan-accounts .xd-opt small { font-size: var(--fs-th); color: var(--d-muted); }
.dan-accounts .xd-opt input { width: 17px; height: 17px; margin: 0; flex: none; accent-color: var(--d-green); }
.dan-accounts .xd-all { display: flex; justify-content: space-between; align-items: center; background: var(--d-cream2); border-radius: 11px; padding: 3px 12px; }
.dan-accounts .xd-grp { margin-block: 10px 2px; font-size: var(--fs-th); color: var(--d-faint); }
.dan-accounts .xd-fg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.dan-accounts .xd-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dan-accounts .xd-fmt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; font-family: inherit; text-align: start; background: transparent; color: var(--d-body);
  border: 1px solid var(--d-line); border-radius: 12px; padding: 9px 12px; cursor: pointer; }
.dan-accounts .xd-fmt b { font-size: var(--fs-td); font-weight: 600; color: var(--d-ink); }
.dan-accounts .xd-fmt small { font-size: var(--fs-th); color: var(--d-muted); }
.dan-accounts .xd-fmt:hover { border-color: var(--d-line); }
.dan-accounts .xd-fmt.on { border: 2px solid var(--d-green); padding: 8px 11px; background: var(--d-cream2); }
.dan-accounts .xd-fmt:focus-visible { outline: 2px solid var(--d-green); outline-offset: 2px; }
.dan-accounts .xd-busy { display: flex; flex-direction: column; gap: 8px; padding: 22px 0; text-align: center; outline: none; }
.dan-accounts .xd-busy b { font-size: var(--fs-body); color: var(--d-ink); }
.dan-accounts .xd-busy span { font-size: var(--fs-th); color: var(--d-muted); }
.dan-accounts .xd-bar { display: block; position: relative; height: 6px; margin-block-start: 6px; background: var(--d-line-soft); border-radius: 3px; overflow: hidden; }
.dan-accounts .xd-bar::after { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 35%; background: var(--d-green); border-radius: 3px; animation: xd-slide var(--dur-loop) ease-in-out infinite alternate; }
@keyframes xd-slide { from { inset-inline-start: 0; } to { inset-inline-start: 65%; } }
@media (prefers-reduced-motion: reduce) { .dan-accounts .xd-bar::after { animation: none; width: 100%; } }
.dan-accounts .xd-ok { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; outline: none; }
.dan-accounts .xd-ok i { display: grid; place-items: center; width: 44px; height: 44px; margin-block-end: 4px; border-radius: 50%; background: var(--d-mint); color: var(--d-green-dark); font-style: normal; font-size: var(--fs-h2); }
.dan-accounts .xd-ok b { font-size: var(--fs-h3); color: var(--d-ink); }
.dan-accounts .xd-ok span { font-size: var(--fs-th); color: var(--d-muted); line-height: 1.5; }
.dan-accounts .xd-facts { margin: 0; }
.dan-accounts .xd-facts div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 7px 2px; border-bottom: 1px solid var(--d-line-soft); font-size: var(--fs-td); }
.dan-accounts .xd-facts div[hidden] { display: none; }
.dan-accounts .xd-facts dt { color: var(--d-muted); font-weight: 600; }
.dan-accounts .xd-facts dd { margin: 0; color: var(--d-body); overflow-wrap: anywhere; }
/* ---------- הוספת אדם למרשם (06.10) — הדיאלוג `#ac-dlg-add`, `addPersonFormHTML` ב-accounts.js ----------
   ⚠️ אין כאן מקור בדן (בדן אין מסלול שיוצר אדם) — הצורה לקוחה מטופס הפתיחה (`.field` · `.seg` · `.infobox`) ומאותם טוקנים (`--d-*`). הקטעים א–ד הם `<section>` + `<h3>` ולא `fieldset`: `legend` יושב על הקו העליון של ה-fieldset וחותך אותו.
   🔴 375: **עמודה אחת ובלי `min-width` לרשת** — `minmax(0, 1fr)` וילדים עם `min-width: 0`; `fieldset` נושא `min-width: min-content` ברירת מחדל ודוחף את הדף, ולכן מאופס.
   🔴 `position: relative` על `.ap-form` — `.sr-only` (absolute) בלי מכיל ממוקם בורח מהגלילה הפנימית של הדיאלוג ומרחיב את הדף (אותו לקח כמו `.tscroll`). */
.dan-accounts .ap-form { display: flex; flex-direction: column; gap: 18px; position: relative; min-width: 0; }
.dan-accounts .ap-sec, .dan-accounts .ap-q { border: 0; margin: 0; padding: 0; min-width: 0; }
.dan-accounts .ap-sec { display: flex; flex-direction: column; gap: 14px; }
.dan-accounts .ap-sec + .ap-sec { border-top: 1px solid var(--d-line-soft); padding-top: 18px; }
.dan-accounts .ap-sec > h3 { margin: 0; font-size: var(--fs-small); font-weight: 600; color: var(--d-ink); }
.dan-accounts .ap-hint { margin: 0; font-size: var(--fs-th); line-height: 1.55; color: var(--d-muted); }
.dan-accounts .ap-hint b { color: var(--d-ink); font-weight: 600; }
.dan-accounts .ap-q legend { padding: 0; margin-block-end: 6px; font-size: var(--fs-th); font-weight: 500; color: var(--d-body); }
.dan-accounts .ap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dan-accounts .ap-grid > * { min-width: 0; }
.dan-accounts .ap-choices { display: flex; flex-wrap: wrap; gap: 8px; }
/* כן/לא ובחירות הקטלוג — כמו `.seg button` (כדורית, `on` = כהה); ה-radio עצמו נשאר אמיתי (מקלדת · קורא מסך) אך מוסתר ויזואלית. */
.dan-accounts .ap-choice { position: relative; display: inline-flex; align-items: center; padding: 9px 16px; border: 1px solid var(--d-line); border-radius: 999px; background: var(--surface);
  font-size: var(--fs-td); font-weight: 500; color: var(--d-body); cursor: pointer; }
.dan-accounts .ap-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.dan-accounts .ap-choice:hover { border-color: var(--d-sage); color: var(--d-green); }
.dan-accounts .ap-choice:has(input:checked) { background: var(--d-ink); border-color: var(--d-ink); color: var(--d-cream2); }
.dan-accounts .ap-choice:has(input:focus-visible) { outline: 2px solid var(--d-green); outline-offset: 2px; }
.dan-accounts .ap-choice:has(input:disabled) { opacity: .45; cursor: default; }
.dan-accounts .ap-choice:has(input:disabled):hover { border-color: var(--d-line); color: var(--d-body); }
.dan-accounts .ap-sub { display: flex; flex-direction: column; gap: 10px; padding-inline-start: 14px; border-inline-start: 3px solid var(--d-mint); }
.dan-accounts .ap-err { margin: 0; font-size: var(--fs-th); line-height: 1.5; color: var(--d-orange-ink); }
.dan-accounts .ap-age { margin: 0; font-size: var(--fs-th); font-weight: 600; color: var(--d-green-dark); }
.dan-accounts .ap-age:empty, .dan-accounts .ap-note:empty, .dan-accounts .ap-missing:empty { display: none; }
.dan-accounts .ap-note { margin: 0; font-size: var(--fs-th); line-height: 1.55; color: var(--d-body); background: var(--d-cream2); border-radius: 12px; padding: 10px 14px; }
.dan-accounts .ap-check { display: flex; align-items: center; gap: 10px; font-size: var(--fs-td); color: var(--d-body); cursor: pointer; }
.dan-accounts .field select[aria-invalid="true"] { border-color: var(--d-orange); background: var(--d-orange-soft); }
.dan-accounts .field input[readonly] { background: var(--d-track); color: var(--d-muted); cursor: default; }
/* הורים: שבבים שנבחרו + חיפוש + תוצאות. הכול בעמודה אחת; שם ארוך נחתך בשבב ולא דוחף את הדיאלוג. */
.dan-accounts .ap-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.dan-accounts .ap-chips:empty { display: none; }
.dan-accounts .ap-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding-block: 5px; padding-inline: 14px 6px; border-radius: 999px; background: var(--d-mint); color: var(--d-green-dark); font-size: var(--fs-td); }
.dan-accounts .ap-chip .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dan-accounts .ap-x { flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--d-cream2); color: inherit; cursor: pointer; display: grid; place-items: center; font: inherit; line-height: 1; }
.dan-accounts .ap-x i { font-style: normal; }
.dan-accounts .ap-x:hover { background: var(--d-sage); }
.dan-accounts .ap-x:focus-visible, .dan-accounts .ap-result:focus-visible { outline: 2px solid var(--d-green); outline-offset: 2px; }
.dan-accounts .ap-results { display: flex; flex-direction: column; gap: 6px; }
.dan-accounts .ap-result { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 10px 14px; border: 1px solid var(--d-line); border-radius: 12px; background: var(--surface);
  font: inherit; text-align: start; color: var(--d-text); cursor: pointer; }
.dan-accounts .ap-result:hover { background: var(--d-mint); border-color: var(--d-sage); }
.dan-accounts .ap-result .n { font-size: var(--fs-td); font-weight: 500; }
.dan-accounts .ap-result .s { font-size: var(--fs-th); color: var(--d-faint); }
/* אזהרת הכפילות (409) */
.dan-accounts .ap-dupe { border: 1px solid var(--d-orange); border-radius: 14px; background: var(--d-orange-soft); color: var(--d-orange-ink); padding: 14px 16px; font-size: var(--fs-td); line-height: 1.6; }
.dan-accounts .ap-dupe:focus-visible { outline: 2px solid var(--d-green); outline-offset: 2px; }
.dan-accounts .ap-dupe p { margin: 4px 0; }
.dan-accounts .ap-dupe ul { margin: 6px 0; padding-inline-start: 20px; }
.dan-accounts .ap-dupe .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dan-accounts .ap-missing { flex: 1 1 100%; margin: 0; font-size: var(--fs-th); color: var(--d-muted); }
@media (max-width: 640px) {
  .dan-accounts .ap-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- הרשאות שדות (07.10) — מטריצה: שדה × תפקיד ----------
 * חלון רחב (שבעה-עשר תפקידים + "כל השאר"): הטבלה גוללת בתוך `.fpscroll` — לא הדף ולא הדיאלוג. בנייד (≤640px) כל שדה הוא כרטיס עם רשימת התפקידים, בלי גלילה אופקית.
 * 🔴 "שונה מברירת המחדל" מסומן בשלושה אופנים (רקע · נקודה · טקסט לקורא מסך) — לא בצבע בלבד. תפקידי הרצפה מסומנים ונעולים. */
.dan-accounts #ac-dlg-policy { width: min(1120px, calc(100vw - 32px)); }
.dan-accounts .fpscroll { overflow-x: auto; border: 1px solid var(--d-line-soft); border-radius: 14px; max-height: min(60vh, 560px); overflow-y: auto; }
.dan-accounts .fpmx { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--fs-td); color: var(--d-body); }
.dan-accounts .fpmx th, .dan-accounts .fpmx td { padding: 8px 10px; text-align: center; border-bottom: 1px solid var(--d-line-soft); }
.dan-accounts .fpmx thead th { position: sticky; top: 0; z-index: 2; background: var(--d-cream2); color: var(--d-muted); font-size: var(--fs-th); font-weight: 600; vertical-align: bottom; line-height: 1.35; }
.dan-accounts .fpmx th small { display: block; font-weight: 400; color: var(--d-muted); font-size: var(--fs-th); }
.dan-accounts .fpmx tbody th[scope="row"] { text-align: start; font-weight: 500; color: var(--d-text); white-space: nowrap; position: sticky; inset-inline-start: 0; z-index: 1; background: var(--surface); }
.dan-accounts .fpmx thead th:first-child { position: sticky; inset-inline-start: 0; z-index: 3; text-align: start; }
.dan-accounts .fpmx tr.fpg th { text-align: start; background: var(--d-cream2); color: var(--d-muted); font-size: var(--fs-th); font-weight: 600; position: static; }
.dan-accounts .fpmx .fpc { background: var(--surface); }
.dan-accounts .fpmx .fpc.flo { background: var(--d-mint); }
.dan-accounts .fpmx .fpc.chg { background: var(--d-orange-soft); }
.dan-accounts .fpmx .fpl { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 28px; min-height: 28px; cursor: pointer; }
.dan-accounts .fpmx .fpl input { accent-color: var(--d-green); width: 18px; height: 18px; margin: 0; }
.dan-accounts .fpmx .fpl input:focus-visible { outline: 2px solid var(--d-green); outline-offset: 2px; }
.dan-accounts .fpmx .fpl input:disabled { cursor: not-allowed; }
.dan-accounts .fpmx .fpdot { display: none; width: 8px; height: 8px; border-radius: 50%; background: var(--d-orange); }
.dan-accounts .fpmx .fpc.chg .fpdot { display: inline-block; }
.dan-accounts .fpmx tr.fpdiff th[scope="row"] .fpname::after { content: " ●"; color: var(--d-orange); }
.dan-accounts .fpmx .fpact { white-space: nowrap; }
.dan-accounts .fpmx tr.fplock th, .dan-accounts .fpmx tr.fplock td { color: var(--d-muted); }
.dan-accounts .fpmx .fpwhy { text-align: start; font-size: var(--fs-th); }
.dan-accounts .fpmx .fpkey { display: inline-block; width: 10px; height: 12px; margin-inline-end: 8px; border: 2px solid var(--d-muted); border-radius: 3px; vertical-align: -1px; }
.dan-accounts .fp-err { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--d-orange-soft); color: var(--d-orange-ink); font-size: var(--fs-td); line-height: 1.5; }
.dan-accounts .fp-err[hidden] { display: none; }
@media (max-width: 640px) {
  .dan-accounts #ac-dlg-policy { width: calc(100vw - 16px); }
  .dan-accounts .fpscroll { overflow: visible; max-height: none; border: 0; }
  .dan-accounts .fpmx, .dan-accounts .fpmx tbody { display: block; }
  .dan-accounts .fpmx thead { display: none; }
  .dan-accounts .fpmx tr.fpg { display: block; margin-top: 14px; }
  .dan-accounts .fpmx tr.fpg th { display: block; border: 0; padding: 6px 2px; }
  .dan-accounts .fpmx tr[data-fp-row] { display: block; margin-top: 10px; border: 1px solid var(--d-line-soft); border-radius: 14px; padding: 6px 12px 12px; background: var(--surface); }
  .dan-accounts .fpmx tbody th[scope="row"] { display: block; position: static; white-space: normal; border: 0; padding: 8px 0 4px; font-weight: 600; background: transparent; }
  .dan-accounts .fpmx td { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: start; border: 0; border-radius: 8px; padding: 4px 8px; }
  .dan-accounts .fpmx td[data-label]::before { content: attr(data-label); flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .dan-accounts .fpmx td.fpact { justify-content: flex-start; padding: 8px 0 0; }
  .dan-accounts .fpmx td.fpwhy { display: block; padding: 4px 0 8px; }
}

/* פלטת עגור המאושרת, תחומה למסך: ירוק-ים לפעולות וחמרה להדגשות. */
.dan-accounts {
  --d-green: var(--teal-600); --d-green-dark: var(--teal-700); --d-green-mid: var(--teal-500);
  --d-ink: var(--teal-700); --d-body: var(--sea-ink); --d-text: var(--sea-ink);
  --d-muted: var(--sand-700); --d-faint: var(--sand-700); --d-mint: var(--teal-50);
  --d-orange: var(--clay); --d-orange-ink: var(--clay-dark); --d-orange-soft: var(--sand-100);
  --d-cream2: var(--sand-50); --d-track: var(--sand-200);
}
.dan-accounts .ac-filter-count { color: var(--clay-dark); background: var(--sand-100); border-radius: 999px; padding: 6px 12px; font-weight: 600; white-space: nowrap; }

/* חמרה לפעולה המרכזית ולבחירה, מתוך הפלטה המאושרת. */
.dan-accounts .abtn-solid, .dan-accounts .abtn-sm.solid { background: var(--clay-dark); box-shadow: none; }
.dan-accounts .abtn-solid:hover, .dan-accounts .abtn-sm.solid:hover { background: var(--clay-dark); filter: brightness(.92); }
.dan-accounts .achip.on { background: var(--clay-dark); border-color: var(--clay-dark); color: var(--surface); }
.dan-accounts .achip.on b { color: var(--surface); }

/* סרגל מובייל: אותה בחירה ומידע כמו בדסקטופ, עם חיפוש מלא ובקרי מיון גלויים. */
.dan-accounts .mobile-only { display: none; }
.dan-accounts .summary-details { display: grid; gap: 12px; }
.dan-accounts .summary-details .kpi .s { display: block; }
.dan-accounts #ac-dlg-filters .afacets { flex-direction: column; gap: 10px; }
.dan-accounts #ac-dlg-filters .afacet > summary { display: flex; width: 100%; min-height: 44px; }
.dan-accounts #ac-dlg-filters .afacet .chev { margin-inline-start: auto; }
.dan-accounts #ac-dlg-filters .afacet-pop { position: static; min-width: 0; max-width: none; max-height: none; margin-block-start: 8px; box-shadow: none; }
.dan-accounts #ac-dlg-filters .fclose { display: none; }
@container acc (max-width: 640px) {
  .dan-accounts .atop { align-items: stretch; gap: 8px; }
  .dan-accounts .atop > div:first-child { width: 100%; }
  .dan-accounts h1 { font-size: var(--fs-h2); margin-block-end: 4px; }
  .dan-accounts .atop .meta { font-size: var(--fs-th); }
  .dan-accounts .topacts { gap: 8px; }
  .dan-accounts .topacts > button { min-height: var(--tap); padding: 8px 14px; font-size: var(--fs-td); }
  .dan-accounts:not(.has-selection) [data-ac-top-bulk] { display: none; }
  .dan-accounts .kpi { padding: 10px 12px; gap: 3px; border-radius: 14px; }
  .dan-accounts .kpi .l { font-size: var(--fs-th); }
  .dan-accounts .kpi .v { font-size: var(--fs-h2); }
  .dan-accounts .kpis .kpi .s { display: none; }
  .dan-accounts .mobile-only { display: flex; }
  .dan-accounts .summary-toggle { align-self: flex-end; padding: 4px 10px; min-height: var(--tap); font-size: var(--fs-th); margin-block-start: -8px; }
  .dan-accounts .toolbar { padding: 12px 14px; gap: 8px; }
  .dan-accounts .tb-search { gap: 6px; }
  .dan-accounts .tb-search .search { flex: 0 0 100%; min-width: 0; }
  .dan-accounts .search input { font-size: var(--fs-input); }
  .dan-accounts .tb-search .abtn-sm { padding: 7px 6px; font-size: var(--fs-th); min-height: var(--tap); }
  .dan-accounts .ac-filter-count { margin-inline-start: auto; font-size: var(--fs-th); }
  .dan-accounts .population-filters, .dan-accounts .account-filters { display: none; }
  .dan-accounts .mobile-filter-row, .dan-accounts .mobile-sort { gap: 8px; align-items: center; min-width: 0; }
  .dan-accounts .mobile-filter-row select, .dan-accounts .mobile-sort select { flex: 1; min-width: 0; width: 0; min-height: var(--tap); padding: 7px 10px; border: 1px solid var(--d-line); border-radius: 12px; background: var(--d-cream2); color: var(--d-text); font: inherit; font-size: var(--fs-input); }
  .dan-accounts .mobile-filter-row button, .dan-accounts .mobile-sort button { flex: none; min-height: var(--tap); padding: 7px 12px; font-size: var(--fs-th); }
  .dan-accounts .mobile-filter-row b { margin-inline-start: 4px; }
  .dan-accounts .mobile-sort label { color: var(--d-muted); font-size: var(--fs-th); }
  .dan-accounts .aactive { gap: 6px; }
  .dan-accounts .aactive .alabel { width: 100%; font-size: var(--fs-th); }
  .dan-accounts .atoken, .dan-accounts .aactive .abtn-sm { font-size: var(--fs-th); }
}

/* Optional first data column; absent by default. */
@media (min-width: 641px) { .dan-accounts .c-who { min-width: 180px; } }
.dan-accounts .c-avatar { width: 64px; text-align: center; }
.dan-accounts .av svg { width: 28px; height: 28px; }
.dan-accounts .av img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
@media (max-width: 640px) {
  .dan-accounts tbody td.c-avatar { grid-column: 1; grid-row: 1; width: auto; }
  .dan-accounts tbody tr:has(td.c-avatar) td.c-who { grid-column: 2; }
  .dan-accounts tbody tr:has(td.c-avatar) td.c-sel { grid-row: 2; }
}

.dan-accounts .person-photo-editor { margin-block: var(--s3); padding-block: var(--s2); border-top: 1px solid var(--d-line); }
.dan-accounts .person-photo-editor .av { width: 68px; height: 68px; }