/* 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;
  display: flex; flex-direction: column; gap: 22px;
  color: var(--d-text);
}
.dan-accounts [hidden] { display: none !important; }

/* ---------- כותרת (.topbar בדן) ---------- */
.dan-accounts .atop { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dan-accounts h1 { font-size: 27px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; margin: 0 0 5px; }
.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: 10px; flex-wrap: wrap; }

/* ---------- כפתורים ---------- */
.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, 1fr); gap: 14px; }
.dan-accounts .kpis.three { grid-template-columns: repeat(3, 1fr); }
.dan-accounts .kpi { background: #fff; border-radius: 18px; padding: 20px 22px; box-shadow: var(--d-shadow);
  display: flex; flex-direction: column; gap: 6px; }
.dan-accounts .kpi .l { font-size: 14px; color: var(--d-faint); }
.dan-accounts .kpi .v { font-size: 30px; 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; }

/* ---------- כרטיס "איפה כדאי להתחיל" ---------- */
.dan-accounts .ai { display: flex; align-items: flex-start; gap: 14px; background: linear-gradient(100deg, #F6F1FA 0%, #FBF8F1 62%);
  border: 1px solid #E7DDF0; border-radius: 18px; padding: 17px 20px; }
.dan-accounts .ai .sp { width: 34px; height: 34px; border-radius: 11px; background: #fff; display: grid; place-items: center; flex: none;
  box-shadow: 0 2px 8px rgba(90,60,120,.12); }
/* ⚠️ base.css קובע `svg { width:20px; height:20px }` — לאייקון מידה מפורשת (גם ב-HTML). */
.dan-accounts .ai .sp svg { width: 18px; height: 18px; }
.dan-accounts .ai h4 { font-size: 15.5px; font-weight: 600; color: var(--d-ink); margin: 0 0 5px; }
.dan-accounts .ai p { font-size: 14.5px; color: #4A574F; line-height: 1.6; margin: 0; }
.dan-accounts .ai .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.dan-accounts .ai .abtn-sm { background: #fff; color: #6B4E88; }
.dan-accounts .ai .abtn-sm:hover { background: #F5EFFA; }

/* ---------- תגים (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 .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; }
.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, 1fr); }
}
@container acc (max-width: 640px) {
  .dan-accounts .kpis { grid-template-columns: 1fr; }
  .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[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; }