/* src/app/dan/enrollments.css — רישום למסגרות · נוכחות: העיצוב של דן, מועתק.
 * מקור: legacy/community/branch-enrollments.html · legacy/community/branch-attendance.html
 * מסכים: src/app/screens/branch-enrollments.js · src/app/screens/enrollments.js · src/app/screens/children.js · src/app/screens/unit.js · src/app/screens/unit-absence.js · src/app/screens/unit-roster.js — כל אחד עוטף את עצמו ב-`<div class="dan dan-enrollments">`.
 * הנוהל: docs/runbooks/dan-design-port.md · הפלטה (`--d-*`): src/app/dan/dan.css.
 *
 * 🔴 01.10 · גיל: "העתקה ממקום למקום, אחד לאחד." שני הדפים של דן חולקים את אותו שלד (topbar · card · kpis ·
 *    pill · btn · hint), ולכן הם קובץ אחד ומחלקת עטיפה אחת; מה שייחודי לנוכחות (`.utab` · `.krow` · `.seg` ·
 *    `.savebar` · `.streak` · `.daynav`) יושב באותו קובץ תחת אותה קידומת. מסכי נוכחות נושאים בנוסף `dan-attendance`.
 *
 * ⚠️ מה שונה מהמקור, ולמה — ארבעה דברים בלבד:
 *  ① **אין `:root`, אין גופן ואין `body`/`main`.** הפלטה ב-dan.css (`--d-*`), הגופן במחסנית של `--font`,
 *     וה-`main` הוא של המעטפת. `main{padding:30px 36px;display:flex;gap:18px}` של דן ⟶ ה-flex והרווח על העטיפה.
 *  ② **מחלקות שהתנגשו ב-packages/ui ובערכה קיבלו שם מקומי** (הרשימה: נוהל, "התנגשות מחלקות"):
 *     `.topbar`→`.dtop` · `.card`→`.dcard` · `.btn`→`.dbtn` · `.pill`→`.dpill` · `.bar`→`.dbar` ·
 *     `.empty`→`.dempty` · `.banner`→`.dbanner`. ⚠️ `.chip` נשאר בשמו, בכוונה: `app.js::applyFilters` מזהה שבב
 *     לפי `.chip[data-filter]` — הוא מעוצב מחדש כאן (`.dan-enrollments .chip`) ולא מוחלף.
 *  ③ **`@media (max-width:700px)` ⟶ `@container enr`** — רוחב התוכן תלוי במעטפת (סרגל פתוח/סגור), לא בחלון.
 *  ④ **שני צבעי טקסט הוכהו ל-AA** (ראו dan.css), ו-`.utab .us` על רקע ירוק עבר מ-#D7EBE0 (4.27:1) ל-#EAF5EF (4.9:1).
 */

.dan-enrollments {
  container: enr / inline-size;
  display: flex; flex-direction: column; gap: 18px;
  color: var(--d-text);
}
.dan-enrollments [hidden] { display: none !important; }

/* ---------- כותרת ---------- */
.dan-enrollments .dtop { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dan-enrollments h1 { font-size: 27px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; margin: 0 0 5px; }
.dan-enrollments .dtop .meta { font-size: 15.5px; color: var(--d-muted); }
.dan-enrollments .dtop .act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dan-enrollments .dtop select { height: 38px; }
.dan-enrollments .syncst { font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 20px; opacity: 0;
  transition: opacity .25s; white-space: nowrap; margin: 0; }
.dan-enrollments .syncst:empty { display: none; }
.dan-enrollments .syncst.show { opacity: 1; }
.dan-enrollments .syncst.wait { background: var(--d-orange-soft); color: var(--d-orange-ink); }
.dan-enrollments .syncst.ok { background: var(--d-mint); color: var(--d-green-dark); }
.dan-enrollments .syncst.err { background: var(--d-orange-soft); color: var(--d-orange-ink); font-weight: 700; }

/* ---------- כרטיס ---------- */
.dan-enrollments .dcard { background: #fff; border-radius: 22px; padding: 22px 24px; box-shadow: var(--d-shadow);
  display: flex; flex-direction: column; gap: 16px; }
.dan-enrollments .dcard h2, .dan-enrollments .dcard h3 { font-size: 17px; font-weight: 600; color: var(--d-ink); margin: 0; }
.dan-enrollments .cardhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dan-enrollments .cardhead .btns { display: flex; gap: 8px; flex-wrap: wrap; }
.dan-enrollments .cardhead a { font-size: 13.5px; font-weight: 500; color: var(--d-green); text-decoration: none; }
.dan-enrollments .cardhead a:hover { color: var(--d-orange-ink); }
.dan-enrollments .cardhead .n.info { background: var(--d-mint); color: var(--d-green-dark); }
.dan-enrollments .dayhost { display: contents; }
.dan-enrollments .dempty a { color: var(--d-green-dark); font-weight: 500; }
.dan-enrollments .cardhead .n { font-size: 13px; font-weight: 600; color: var(--d-orange-ink); background: var(--d-orange-soft);
  border-radius: 999px; padding: 2px 10px; margin-inline-start: 8px; font-variant-numeric: tabular-nums; }

/* ---------- שדות וכפתורים ---------- */
.dan-enrollments :is(input, select, textarea):not(.form-input) { font-family: inherit; font-size: 14px; color: var(--d-text);
  background: #fff; border: 1px solid var(--d-line); border-radius: 10px; padding: 8px 11px; outline: none; transition: .15s; }
.dan-enrollments :is(input, select, textarea):not(.form-input):focus { border-color: var(--d-green); box-shadow: 0 0 0 3px var(--d-mint); }
.dan-enrollments .dbtn { border: 1px solid var(--d-line); background: #fff; color: var(--d-text); font-family: inherit; font-size: 13.5px;
  font-weight: 500; padding: 9px 15px; border-radius: 999px; cursor: pointer; transition: .15s; white-space: nowrap; }
.dan-enrollments .dbtn:hover { border-color: var(--d-green); color: var(--d-green-dark); background: var(--d-mint); }
.dan-enrollments .dbtn.primary { background: var(--d-green); border-color: var(--d-green); color: #fff; font-weight: 600; }
.dan-enrollments .dbtn.primary:hover { background: var(--d-green-dark); border-color: var(--d-green-dark); color: #fff; }
.dan-enrollments .dbtn.danger:hover { border-color: var(--d-orange); color: var(--d-orange-ink); background: var(--d-orange-soft); }
.dan-enrollments .dbtn:disabled { opacity: .45; cursor: not-allowed; }
.dan-enrollments .dbtn:disabled:hover { border-color: var(--d-line); color: var(--d-text); background: #fff; }
.dan-enrollments .dbtn:focus-visible, .dan-enrollments .chip:focus-visible, .dan-enrollments .utab:focus-visible,
.dan-enrollments .seg button:focus-visible, .dan-enrollments .xn:focus-visible { outline: 2px solid var(--d-green); outline-offset: 2px; }
.dan-enrollments select.mini { height: 30px; font-size: 12.5px; padding: 2px 8px; border-radius: 8px; }
.dan-enrollments .fld { display: flex; flex-direction: column; gap: 5px; }
.dan-enrollments .fld label { font-size: 12px; color: var(--d-muted); font-weight: 600; line-height: 18px; }
.dan-enrollments .fld :is(input, select) { height: 40px; }

/* ---------- סרגל כלים · חיפוש ושבבי סינון (מסך המצבת הקהילתית) ---------- */
.dan-enrollments .toolbar { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 14px 20px; }
.dan-enrollments .toolbar .fld { flex: 1; min-width: 220px; }
.dan-enrollments .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.dan-enrollments .chip { border: 1px solid var(--d-line); background: #fff; color: var(--d-muted); font-family: inherit; font-size: 13px;
  font-weight: 500; padding: 6px 13px; border-radius: 999px; cursor: pointer; transition: .15s; display: flex; align-items: center; gap: 6px; }
.dan-enrollments .chip:hover { border-color: var(--d-green-mid); }
.dan-enrollments .chip[aria-pressed="true"] { background: var(--d-mint); border-color: var(--d-green-mid); color: var(--d-green-dark); font-weight: 600; }
.dan-enrollments .chip .chip__n { margin: 0; color: inherit; font-variant-numeric: tabular-nums; }
.dan-enrollments .filterbox { display: flex; flex-direction: column; gap: 18px; }

/* ---------- באנר ביקורת ----------
   ⚠️ [hidden] של דן: `.banner{display:flex}` ו-`[hidden]` באותה specificity — כאן `.dan [hidden]` עם !important. */
.dan-enrollments .dbanner { background: var(--d-orange-soft); border: 1px solid #F3D6BE; border-radius: 16px; padding: 14px 18px;
  display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--d-orange-ink); }
.dan-enrollments .dbanner .bt { font-weight: 600; margin-bottom: 4px; }
.dan-enrollments .dbanner ul { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 3px; }
.dan-enrollments .dbanner .hard { font-weight: 600; }
.dan-enrollments .dbanner p { margin: 6px 0 0; }

/* ---------- מדדים ---------- */
.dan-enrollments .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.dan-enrollments .kpi { background: #fff; border: 1px solid var(--d-line-soft); border-radius: 16px; padding: 15px 17px; }
.dan-enrollments .kpi .n { font-size: 26px; font-weight: 600; color: var(--d-ink); font-variant-numeric: tabular-nums; line-height: 1.2; }
.dan-enrollments .kpi .l { font-size: 12.5px; color: var(--d-muted); margin-top: 2px; }
.dan-enrollments .kpi.warn .n { color: var(--d-orange-ink); }
.dan-enrollments .kpi.ok .n { color: var(--d-green); }

/* ---------- בקשות · שורות ---------- */
.dan-enrollments .reqrow { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--d-line-soft); flex-wrap: wrap; }
.dan-enrollments .reqrow:last-child { border-bottom: 0; }
.dan-enrollments .reqrow .who { flex: 1; min-width: 190px; }
.dan-enrollments .reqrow .nm { font-size: 14.5px; font-weight: 500; color: var(--d-ink); }
.dan-enrollments .reqrow .sub { font-size: 11.5px; color: var(--d-faint); margin-top: 1px; }
.dan-enrollments .reqrow .acts { display: flex; gap: 6px; flex-wrap: wrap; }
.dan-enrollments .reqrow .dbtn { font-size: 12.5px; padding: 6px 12px; }

.dan-enrollments .dpill { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.dan-enrollments .dpill.requested { background: var(--d-orange-soft); color: var(--d-orange-ink); }
.dan-enrollments .dpill.confirmed { background: var(--d-mint); color: var(--d-green-dark); }
.dan-enrollments .dpill.waitlist { background: #EDF3F8; color: #3B6E92; }
.dan-enrollments .dpill.declined, .dan-enrollments .dpill.withdrawn, .dan-enrollments .dpill.mute { background: var(--d-track); color: var(--d-muted); }
.dan-enrollments .dpill.off { background: var(--d-orange-soft); color: var(--d-orange-ink); }

/* ---------- מצבת הבתים ---------- */
.dan-enrollments .houses { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.dan-enrollments .house { background: #fff; border: 1px solid var(--d-line-soft); border-radius: 16px; padding: 15px 16px;
  display: flex; flex-direction: column; gap: 9px; }
.dan-enrollments a.house { color: inherit; text-decoration: none; transition: .15s; }
.dan-enrollments a.house:hover { border-color: var(--d-green-mid); background: var(--d-cream2); }
.dan-enrollments a.house:focus-visible { outline: 2px solid var(--d-green); outline-offset: 2px; }
.dan-enrollments .house .hh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dan-enrollments .house .hn { font-size: 15.5px; font-weight: 600; color: var(--d-ink); }
.dan-enrollments .house .hs { font-size: 11.5px; color: var(--d-faint); }
.dan-enrollments .house .hs.warnt { color: var(--d-orange-ink); font-weight: 600; }
.dan-enrollments .dbar { height: 6px; background: var(--d-track); border-radius: 99px; overflow: hidden; }
.dan-enrollments .dbar i { display: block; height: 100%; background: var(--d-green-mid); border-radius: 99px; }
.dan-enrollments .dbar i.over { background: var(--d-orange); }
.dan-enrollments .kids { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.dan-enrollments .kids .k { display: flex; align-items: center; gap: 7px; }
.dan-enrollments .kids .k .kn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dan-enrollments .kids .k .ka { font-size: 10.5px; color: var(--d-faint); font-variant-numeric: tabular-nums; }
.dan-enrollments .kids .k select.mini { height: 26px; width: 88px; font-size: 11.5px; padding: 0 4px; }
.dan-enrollments .house .foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.dan-enrollments .dempty { font-size: 12.5px; color: var(--d-faint); }
.dan-enrollments .hint { font-size: 12.5px; color: var(--d-faint); line-height: 1.55; }
.dan-enrollments .dempty.big { font-size: 14px; padding: 8px 0; }

/* ---------- הילדים שלי · כרטיס לרישום ---------- */
.dan-enrollments .dcard .kidhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dan-enrollments .dcard .where { font-size: 12.5px; color: var(--d-faint); }
.dan-enrollments .subhead { font-size: 12px; color: var(--d-muted); font-weight: 600; margin: 4px 0 -6px; }

/* ---------- נוכחות · בית ויום ---------- */
.dan-enrollments .daynav { display: flex; align-items: center; gap: 8px; }
.dan-enrollments .daynav .dbtn { padding: 8px 12px; }
.dan-enrollments .daynav input { height: 38px; }

.dan-enrollments.dan-attendance .kpis { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.dan-enrollments.dan-attendance .kpi { padding: 14px 16px; }
.dan-enrollments.dan-attendance .kpi .n { font-size: 27px; line-height: 1.15; }
.dan-enrollments.dan-attendance .dempty { font-size: 14px; padding: 8px 0; }

.dan-enrollments .unitrow { display: flex; gap: 8px; flex-wrap: wrap; }
.dan-enrollments .utab { border: 1px solid var(--d-line); background: #fff; color: var(--d-text); font-family: inherit; font-size: 14px;
  border-radius: 14px; padding: 9px 15px; cursor: pointer; text-align: start; line-height: 1.35; transition: .15s; }
.dan-enrollments .utab:hover { border-color: var(--d-green-mid); }
.dan-enrollments .utab.on { background: var(--d-green); border-color: var(--d-green); color: #fff; }
.dan-enrollments .utab .us { display: block; font-size: 11.5px; color: var(--d-faint); }
.dan-enrollments .utab.on .us { color: #EAF5EF; }
.dan-enrollments .utab.done .us { color: var(--d-green-dark); }
.dan-enrollments .utab.on.done .us { color: #EAF5EF; }
.dan-enrollments .utab:disabled { opacity: .5; cursor: not-allowed; }

.dan-enrollments .kidlist { display: flex; flex-direction: column; gap: 4px; }
.dan-enrollments .krow { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 12px; border: 1px solid transparent; }
.dan-enrollments .krow:nth-child(odd) { background: #FAFBFA; }
.dan-enrollments .krow.present { border-color: #CDE6D9; }
.dan-enrollments .krow.absent { border-color: #F3D6BE; background: var(--d-orange-soft); }
.dan-enrollments .krow.notified { border-color: #D9E6F0; }
.dan-enrollments .krow .kn { flex: 1; min-width: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dan-enrollments .krow .ku { font-size: 11.5px; color: var(--d-faint); white-space: nowrap; }
.dan-enrollments a.krow { color: inherit; text-decoration: none; }
.dan-enrollments a.krow:hover { border-color: var(--d-green-mid); }
.dan-enrollments .seg { display: flex; gap: 3px; background: var(--d-track); padding: 3px; border-radius: 999px; flex: none; }
.dan-enrollments .seg button { border: 0; background: none; font-family: inherit; font-size: 13px; color: var(--d-muted);
  padding: 6px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: .12s; }
.dan-enrollments .seg button:hover { color: var(--d-ink); }
.dan-enrollments .seg button.on { background: #fff; font-weight: 600; box-shadow: 0 1px 3px rgba(16,42,32,.1); color: var(--d-ink); }
.dan-enrollments .seg button.on[data-s="present"] { color: var(--d-green-dark); }
.dan-enrollments .seg button.on[data-s="notified"] { color: #3B6E92; }
.dan-enrollments .seg button.on[data-s="absent"] { color: var(--d-orange-ink); }
.dan-enrollments .krow .xn { border: 0; background: none; color: var(--d-faint); cursor: pointer; font-size: 15px; padding: 2px 6px; border-radius: 6px; }
.dan-enrollments .krow .xn:hover { color: var(--d-orange-ink); background: var(--d-orange-soft); }
.dan-enrollments .knote { width: 100%; margin-top: 5px; }
/* "סומן ע״י" — שורת רמז מתחת לשורה (דן: `.hint` עם `padding-inline-start:11px` בווריאנט לקריאה בלבד), לא `.ku` בתוך השורה. */
.dan-enrollments .kby { padding-inline-start: 11px; }
.dan-enrollments .knote input { width: 100%; font-size: 13px; padding: 6px 10px; }

.dan-enrollments .savebar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; background: #fff;
  border: 1px solid var(--d-line); border-radius: 16px; padding: 12px 16px; box-shadow: var(--d-shadow); margin-top: 4px; }
.dan-enrollments .savebar .sn { flex: 1; font-size: 14px; color: var(--d-muted); }

.dan-enrollments .streak { display: flex; align-items: center; gap: 10px; font-size: 13.5px; padding: 7px 0; border-bottom: 1px solid var(--d-line-soft); flex-wrap: wrap; }
.dan-enrollments .streak:last-child { border-bottom: 0; }
.dan-enrollments .streak .sd { font-weight: 600; color: var(--d-orange-ink); white-space: nowrap; }
.dan-enrollments .streak .sd.info { color: var(--d-green-dark); }
.dan-enrollments a.streak { color: inherit; text-decoration: none; }
.dan-enrollments a.streak:hover .sd { text-decoration: underline; }

/* ── מסך צר ─────────────────────────────────────────────────────────────────────
   ⚠️ זה המסך שהצוות מסמן בו נוכחות **מהטלפון, בבוקר, ליד הילדים** (הערת דן, נמדד 2026-08-31 ב-360px):
   בלי שבירה לשתי קומות שם הילד נמדד ברוחב 0 וכפתור האיפוס "×" נדחף אל מחוץ למסך. השם מקבל שורה משלו,
   הפקדים יורדים מתחתיו, וכפתורי הבורר נמתחים לרוחב שווה (יעד מגע ~40px). בדן `@media`; כאן `@container`. */
@container enr (max-width: 700px) {
  .dan-enrollments .krow { flex-wrap: wrap; row-gap: 8px; column-gap: 8px; padding: 10px; }
  .dan-enrollments .krow .kn { flex: 1 1 100%; white-space: normal; overflow: visible; text-overflow: clip; font-size: 15.5px; }
  .dan-enrollments .krow .ku { order: 2; }
  .dan-enrollments .seg { order: 3; flex: 1 1 auto; min-width: 0; }
  /* ⚠️ `white-space: normal` — "הודיעו מראש" גלשה מהכפתור שלה ב-320px (נמדד 01.10, scrollWidth 69 > 63): בדן אותה גלישה, ושם לא נמדדה. */
  .dan-enrollments .seg button { flex: 1 1 0; padding: 12px 6px; font-size: 12.5px; min-width: 0; white-space: normal; line-height: 1.2; overflow-wrap: anywhere; }
  .dan-enrollments .krow .xn { order: 4; flex: none; padding: 6px 8px; font-size: 17px; }
  .dan-enrollments .knote { order: 5; }
  /* שורת ניווט היום גלשה גם היא (דן, 320px): flex-wrap מוריד את "היום" לשורה שנייה במקום לדחוף אותו החוצה. */
  .dan-enrollments .daynav { flex-wrap: wrap; gap: 6px; }
  .dan-enrollments .daynav input { flex: 1 1 140px; min-width: 0; }
  .dan-enrollments .dcard { padding: 20px 18px; }
  .dan-enrollments .savebar { flex-wrap: wrap; }
}