/* src/app/dan/requests.css — פניות ובקשות: העיצוב של דן, מועתק.
 * מקור: legacy/community/requests.html (תיבת הצוות — `/community/requests` · `/branch/:code/requests`)
 *       + לוח "הפניות שלי" ב-legacy/community/resident.html (`#panel-requests` — `/requests` · `/requests/new`).
 * מסכים: src/app/screens/requests.js · src/app/screens/request-new.js · src/app/screens/request-thread.js · src/app/screens/community-requests.js · src/app/screens/branch-requests.js — כל אחד עוטף את עצמו ב-`<div class="dan dan-requests">`.
 * הנוהל: docs/runbooks/dan-design-port.md · הפלטה (`--d-*`): src/app/dan/dan.css.
 *
 * 🔴 01.10 · גיל: "תעתיק גם את הלוגיקה והפונקציונליות בדף וגם את העיצוב של כל המסכים, פשוט העתקה ממקום למקום."
 *
 * ⚠️ למה שני מקורות: "הפניות שלי" ו"פתיחת פנייה" לא היו בדף של דן בשם `requests.html` — הם לוח בתוך `resident.html`
 *    (`panel-requests`: רשימה ⟶ פירוט ⟶ טופס, שלושה כרטיסים שמתחלפים). הדף `requests.html` הוא תיבת הצוות בלבד.
 *    שני העיצובים חולקים אוצר מילים (`rst` · `thread` · `msg` · `replybar`) אך בגדלים שונים — ולכן וריאנט `.rq-mine`.
 *
 * ⚠️ מה שונה מהמקור, ולמה — חמישה דברים בלבד:
 *  ① **שמות מחלקות מקומיים.** `topbar` · `card` · `chip` · `btn` · `empty` הם של `packages/ui/*.css` (לא תחומים) ויורשים
 *     כללים בשקט ⟹ `dtop` · `dcard` · `fchip` · `rbtn` · `dempty`. השאר (`rrow` · `rst` · `thread` · `msg` …) אינם בקטלוג.
 *  ② **אין `:root`, והצבעים `--d-*`** (src/app/dan/dan.css). `#3A4A42` הקשיח ⟹ `var(--d-body)`.
 *  ③ **container query ולא media query.** ב-`requests.html` ה-`@media (max-width:1000px)` נמדד מול החלון עם סרגל צד
 *     ברוחב קבוע; כאן רוחב התוכן תלוי במעטפת ⟹ `@container dreq`, באותו רוחב תוכן בערך (≈700px).
 *  ④ **`.fchip .n` בלי `opacity:.65`** — נמדד: הטקסט הופך ל-≈2.6:1 (AA דורש 4.5). הצבע עצמו כבר מוכהה ב-dan.css.
 *  ⑤ **`.rt > .n` / `.rt > .s` הם block** — בדן inline, והכותרת נדבקה לשורת המטא (ראו ליד `.rrow .s .warn`). 02.10.
 *
 * ⚠️ מה לא הועתק: כללי הדשבורד שנשארו ב-`<style>` של requests.html ושאינם משרתים אלמנט בדף (alerts · donut · bars · soon …).
 */

.dan-requests {
  container: dreq / inline-size;
  display: flex; flex-direction: column; gap: 22px;
  color: var(--d-text);
  /* ⚠️ דן: `body` בלי line-height ⟹ `normal`. `base.css` של המעטפת קובע 1.6 (גוף) ו-`--lh-tight` (h1/h2) — נמדד מול העתק של הדף של דן
   * (computed styles, 33 אלמנטים): כל טקסט היה גבוה ב-~20% ממה שבדן. המכל — `.dan { line-height: normal }` ב-dan.css (01.10); הכותרות כאן. */
}
.dan-requests h1, .dan-requests h2 { line-height: normal; }
.dan-requests [hidden] { display: none !important; }

/* ---------- כותרת ---------- */
.dan-requests .dtop { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.dan-requests h1 { font-size: 27px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; margin: 0 0 5px; }
.dan-requests .dtop .meta { font-size: 15px; color: var(--d-muted); }

/* מד הסנכרון — "שולח…" / "נשלח" / "לא נשלח". מוסתר (opacity) עד שיש מה לומר; role=status במסמך. */
.dan-requests .syncst { font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 20px; opacity: 0; transition: opacity .25s; }
.dan-requests .syncst.show { opacity: 1; }
.dan-requests .syncst.wait { background: var(--d-orange-soft); color: var(--d-orange-ink); }
.dan-requests .syncst.ok { background: var(--d-mint); color: var(--d-green-dark); }
.dan-requests .syncst.err { background: var(--d-orange-soft); color: var(--d-orange-ink); font-weight: 700; }

/* ---------- כרטיס ---------- */
.dan-requests .dcard { background: #fff; border-radius: 22px; padding: 26px 28px; box-shadow: var(--d-shadow);
  display: flex; flex-direction: column; gap: 20px; }
.dan-requests .dcard h2 { font-size: 17px; font-weight: 600; color: var(--d-ink); margin: 0; letter-spacing: normal; }
.dan-requests .cardhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dan-requests .hint { font-size: 13px; color: var(--d-faint); }
.dan-requests .dempty { font-size: 15px; color: var(--d-faint); line-height: 1.6; padding: 10px 2px; }
.dan-requests .dempty b { color: var(--d-muted); font-weight: 500; }

/* ---------- מסננים ---------- */
.dan-requests .filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dan-requests .fchip { border: 1px solid var(--d-line); background: #fff; color: var(--d-muted); font-family: inherit; font-size: 13.5px;
  font-weight: 500; padding: 7px 15px; border-radius: 999px; cursor: pointer; transition: .15s; }
.dan-requests .fchip:hover { border-color: var(--d-green-mid); }
.dan-requests .fchip.on { background: var(--d-mint); border-color: var(--d-green-mid); color: var(--d-green-dark); font-weight: 600; }
.dan-requests .fchip .n { font-size: 11.5px; margin-inline-start: 6px; background: rgba(0,0,0,.06); border-radius: 999px; padding: 1px 7px; }
.dan-requests .fchip.on .n { color: var(--d-green-dark); }
.dan-requests .search { font-family: inherit; font-size: 14.5px; color: var(--d-text); background: #fff; border: 1px solid var(--d-line);
  border-radius: 999px; padding: 8px 16px; outline: none; min-width: 190px; }
.dan-requests .search:focus { border-color: var(--d-green); box-shadow: 0 0 0 3px var(--d-mint); }

/* ---------- רשימה + פירוט ---------- */
.dan-requests .split { display: grid; grid-template-columns: 1fr 1.15fr; gap: 20px; align-items: start; }
.dan-requests .split > * { min-width: 0; }
.dan-requests .rlist { display: flex; flex-direction: column; }
.dan-requests .rrow { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--d-line-soft);
  cursor: pointer; text-align: start; background: none; border-left: 0; border-right: 0; border-top: 0; font-family: inherit; width: 100%;
  color: inherit; font-size: 13.3333px; }   /* גודל ברירת המחדל של `<button>` — בדן `.rrow` אינו קובע גודל, ו-`base.css` מאפס ל-inherit */
.dan-requests .rrow.last { border-bottom: 0; }   /* ⚠️ `:last-child` של דן — כאן הסינון מסתיר שורות במקום לרנדר מחדש, ולכן `.last` מסומן ידנית על האחרונה הנראית */
.dan-requests .rrow:hover { background: #FAFBFA; }
.dan-requests .rrow.sel { background: var(--d-mint); }
.dan-requests .rrow .rt { flex: 1; min-width: 0; }
.dan-requests .rrow .n { font-size: 16px; font-weight: 500; color: var(--d-text); }
.dan-requests .rrow .s { font-size: 13.5px; color: var(--d-faint); }
.dan-requests .rrow .s .warn { color: var(--d-orange-ink); font-weight: 500; }
/* 🔴 02.10 · סבב 4 — כותרת מעל שורת המטא, לא באותה שורה. ⑤ חריגה מתועדת מהמקור:
 * בדן `.n`/`.s` הם `<span>` בתוך `<button>` (חייבים להישאר span — תוכן phrasing בכפתור), ואין כלל שמשנה להם את ה-display ⟹ inline.
 * ב-`requests.html` אין רווח בין שני ה-span בתבנית, והכותרת נדבקה לשם הפונה ("הצהרוןרנה לוי"); ב-`resident.html` יש שבירת שורה בתבנית,
 * ולכן רווח אחד ביניהם — ושוב שורה אחת. כאן שתי השורות של כל שורת רשימה — בשתי הרשימות (`rrow` · `reqrow`), בשלושת המסכים.
 * הבדיקה: requests-dan.selftest, חלק י (הכלל עצמו ב-CSS + span ולא div בתוך הכפתור). */
.dan-requests .rt > .n, .dan-requests .rt > .s { display: block; }
.dan-requests .rst { font-size: 13px; font-weight: 500; border-radius: 999px; padding: 4px 12px; flex: none; white-space: nowrap; }
.dan-requests .rst.open { color: #2C6791; background: #E7F1F9; }
.dan-requests .rst.in_progress { color: var(--d-green-dark); background: var(--d-mint); }
.dan-requests .rst.resolved { color: #5F6B64; background: #F3F1E9; }
.dan-requests .rst.cancelled { color: var(--d-orange-ink); background: var(--d-orange-soft); }

/* ---------- שרשור ---------- */
.dan-requests .thread { display: flex; flex-direction: column; gap: 12px; }
.dan-requests .msg { display: flex; flex-direction: column; gap: 3px; max-width: 84%; }
.dan-requests .msg .who { font-size: 12px; color: var(--d-faint); }
.dan-requests .msg .bub { font-size: 15px; line-height: 1.55; padding: 10px 14px; border-radius: 15px; white-space: pre-wrap; }
.dan-requests .msg.them .bub { background: #F7F5EE; border-top-right-radius: 5px; }
.dan-requests .msg.me { align-self: flex-end; }
.dan-requests .msg.me .bub { background: var(--d-mint); color: var(--d-green-dark); border-top-left-radius: 5px; }
.dan-requests .msg.internal .bub { background: #FFF6E8; border: 1px dashed #E7C89A; color: #8A6A34; }
.dan-requests .msg.internal .who::after { content: " · הערה פנימית, הפונה לא רואה"; }

/* ---------- תשובה ופעולות ---------- */
.dan-requests .replybar { display: flex; flex-direction: column; gap: 9px; padding-top: 12px; border-top: 1px solid var(--d-line); }
.dan-requests .replybar textarea { font-family: inherit; font-size: 15px; color: var(--d-text); background: #fff; border: 1px solid var(--d-line);
  border-radius: 12px; padding: 10px 13px; outline: none; resize: vertical; min-height: 48px; line-height: 1.5; }
.dan-requests .replybar textarea:focus { border-color: var(--d-green); box-shadow: 0 0 0 3px var(--d-mint); }
.dan-requests .replyrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dan-requests .replyrow.sep { padding-top: 8px; border-top: 1px solid var(--d-line-soft); }
.dan-requests .intern { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--d-muted); cursor: pointer; }
.dan-requests .intern input { width: 16px; height: 16px; accent-color: #C89B4E; cursor: pointer; }
.dan-requests .rbtn { border: 1px solid var(--d-line); background: #fff; color: var(--d-text); font-family: inherit; font-size: 14px;
  font-weight: 500; padding: 9px 18px; border-radius: 999px; cursor: pointer; transition: .15s; }
.dan-requests .rbtn:hover { border-color: var(--d-green); background: var(--d-mint); color: var(--d-green-dark); }
.dan-requests .rbtn.primary { background: var(--d-green); border-color: var(--d-green); color: #fff; font-weight: 600; }
.dan-requests .rbtn.primary:hover { background: var(--d-green-dark); color: #fff; }
.dan-requests .rbtn:disabled { opacity: .5; cursor: not-allowed; }

/* ===================================================================================================================
 * הפניות שלי · פתיחת פנייה — `resident.html` `#panel-requests`. וריאנט `.rq-mine`: אותם שמות, מידות אחרות.
 * =================================================================================================================== */

/* הכותרת — `.topbar .t` / `.topbar .s` של האזור האישי: שורת כותרת קטנה, לא ה-h1 הגדול של תיבת הצוות. */
.dan-requests.rq-mine .dtop { align-items: center; }
.dan-requests.rq-mine h1.t { font-size: 17px; font-weight: 600; color: var(--d-ink); letter-spacing: 0; margin: 0; }
.dan-requests.rq-mine .dtop .s { font-size: 13px; color: var(--d-faint); }

.dan-requests.rq-mine .dcard { gap: 18px; }
.dan-requests.rq-mine .dcard h2 { font-size: 20px; }
.dan-requests.rq-mine .dempty { padding: 6px 0; }

.dan-requests .qbtn { font-family: inherit; font-size: 15.5px; font-weight: 500; color: var(--d-green); background: #fff; border: 1px solid #D8E3DA;
  border-radius: 999px; padding: 12px 20px; cursor: pointer; text-decoration: none; display: inline-block; text-align: center; }
.dan-requests .qbtn:hover { background: #F4F8F5; color: var(--d-green); }
/* ⚠️ `style="…"` מוטבע של דן על ארבעה כפתורים (resident.html): "＋ פנייה חדשה" · "שליחה" בטופס · "שליחה" בשרשור · "ביטול הפנייה". */
.dan-requests .cardhead .qbtn { font-size: 15px; padding: 9px 18px; }
.dan-requests .savebar .pay { font-size: 16px; padding: 13px 28px; }
.dan-requests .replybar .pay { font-size: 15px; padding: 12px 22px; }
.dan-requests .qbtn[data-set] { font-size: 14.5px; padding: 9px 18px; }
.dan-requests .back { background: none; border: 0; font-family: inherit; font-size: 15px; color: var(--d-green); cursor: pointer; padding: 0;
  align-self: flex-start; text-decoration: none; text-align: center; }
.dan-requests .back:hover { color: var(--d-orange-ink); }
.dan-requests .pay { font-family: inherit; font-size: 17px; font-weight: 600; color: #fff; background: var(--d-green); border: 0; border-radius: 999px;
  padding: 16px 32px; cursor: pointer; box-shadow: 0 8px 20px rgba(14,122,85,.24); }
.dan-requests .pay:hover { background: var(--d-green-dark); }
.dan-requests .pay:disabled { opacity: .6; cursor: not-allowed; }

.dan-requests .reqlist { display: flex; flex-direction: column; }
.dan-requests .reqrow { display: flex; align-items: center; gap: 14px; padding: 15px 4px; border-bottom: 1px solid var(--d-line-soft);
  cursor: pointer; text-align: start; background: none; border-left: 0; border-right: 0; border-top: 0; font-family: inherit; width: 100%;
  color: inherit; font-size: 13.3333px; }
.dan-requests .reqrow.last { border-bottom: 0; }
.dan-requests .reqrow:hover { background: #FAFBFA; }
.dan-requests .reqrow .rt { flex: 1; min-width: 0; }
.dan-requests .reqrow .n { font-size: 16.5px; font-weight: 500; color: var(--d-text); }
.dan-requests .reqrow .s { font-size: 14px; color: var(--d-faint); }
.dan-requests.rq-mine .rst { font-size: 13.5px; padding: 5px 13px; }
.dan-requests.rq-mine .msg { max-width: 82%; }
.dan-requests.rq-mine .msg .who { font-size: 12.5px; }
.dan-requests.rq-mine .msg .bub { font-size: 15.5px; padding: 11px 15px; border-radius: 16px; }
.dan-requests.rq-mine .msg.them .bub { background: var(--d-cream2); border-top-right-radius: 5px; }
.dan-requests.rq-mine .msg.me .bub { border-top-left-radius: 5px; }
/* ⚠️ **התנגשות של דן, מועתקת כמות שהיא:** ב-`resident.html` כלל הכותרת `.who{display:flex;background:var(--cream-2);border-radius:999px;
 * padding:7px 8px 7px 16px}` (צ׳יפ המשתמש) תופס גם את `.msg .who` — שורת הכותרת של כל הודעה בשרשור היא גלולה בצבע חול. בתיבת הצוות
 * (`requests.html`) אין כלל כזה והיא טקסט פשוט. 01.10: "אחד לאחד" ⟹ נשמר; אם גיל יחליט שזה באג של דן — מוחקים את הבלוק הזה. */
.dan-requests.rq-mine .msg .who { display: flex; align-items: center; gap: 10px; background: var(--d-cream2); border-radius: 999px; padding: 7px 8px 7px 16px; }
.dan-requests.rq-mine .replybar { flex-direction: row; gap: 10px; align-items: flex-end; }
.dan-requests.rq-mine .replybar textarea { flex: 1; font-size: 15.5px; padding: 11px 14px; min-height: 46px; }
.dan-requests .rq-meta { font-size: 14px; color: var(--d-faint); margin-top: -8px; }

.dan-requests .rq-form { display: flex; flex-direction: column; gap: 18px; }
.dan-requests .fld { display: flex; flex-direction: column; gap: 6px; }
.dan-requests .fld label, .dan-requests .fld .lbl { font-size: 13px; color: var(--d-muted); font-weight: 500; }
.dan-requests .fld label .opt, .dan-requests .fld .lbl .opt { font-weight: 400; color: var(--d-faint); }
.dan-requests .fld input, .dan-requests .fld textarea { font-family: inherit; font-size: 16px; color: var(--d-text); background: #fff;
  border: 1px solid var(--d-line); border-radius: 10px; padding: 11px 13px; outline: none; transition: .15s; }
.dan-requests .fld textarea { resize: vertical; line-height: 1.55; }
.dan-requests .fld input:focus, .dan-requests .fld textarea:focus { border-color: var(--d-green); box-shadow: 0 0 0 3px var(--d-mint); }
.dan-requests .fld input[aria-invalid="true"], .dan-requests .fld textarea[aria-invalid="true"] { border-color: var(--d-orange-ink); }

.dan-requests .catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.dan-requests .cat { text-align: start; font-family: inherit; font-size: 13.3333px; background: #fff; border: 1px solid var(--d-line); border-radius: 14px;
  padding: 13px 15px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; transition: .15s; color: inherit; }
.dan-requests .cat:hover { border-color: var(--d-green-mid); background: #F4F8F5; }
.dan-requests .cat.on { border-color: var(--d-green); background: var(--d-mint); }
.dan-requests .cat .cn { font-size: 15.5px; font-weight: 500; color: var(--d-text); }
.dan-requests .cat .ch { font-size: 13px; color: var(--d-faint); line-height: 1.45; }
.dan-requests .cat .cw { font-size: 12px; color: var(--d-green-dark); font-weight: 500; }

/* בורר הנכס — `.homepick` · `.hchip` · `.hw` מ-`resident.html`. שורת צ׳יפים ולא grid כמו הקטגוריות: לרוב התושבים יש נכס אחד, ו-grid של auto-fill היה מותח צ׳יפ בודד לרוחב המסך (הערת דן). */
.dan-requests .homepick { display: flex; flex-wrap: wrap; gap: 8px; }
.dan-requests .hchip { font-family: inherit; background: #fff; border: 1px solid var(--d-line); border-radius: 999px; padding: 8px 15px; cursor: pointer;
  font-size: 14.5px; color: var(--d-text); display: flex; align-items: center; gap: 7px; }
.dan-requests .hchip:hover { border-color: var(--d-green-mid); background: #F4F8F5; }
.dan-requests .hchip.on { border-color: var(--d-green); background: var(--d-mint); font-weight: 500; }
.dan-requests .hchip .hw { font-size: 12.5px; color: var(--d-faint); }
.dan-requests .hchip.on .hw { color: var(--d-green-dark); }

.dan-requests .savebar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 4px; }
.dan-requests .savemsg { font-size: 14px; font-weight: 500; opacity: 0; transition: opacity .25s; }
.dan-requests .savemsg.show { opacity: 1; }
.dan-requests .savemsg.ok { color: var(--d-green-dark); }
.dan-requests .savemsg.err { color: var(--d-orange-ink); }

/* ---------- שבירות ----------
   ⚠️ `requests.html`: `@media (max-width:1000px){ .split{grid-template-columns:1fr} }` — מול החלון. כאן מול רוחב התוכן. */
@container dreq (max-width: 760px) {
  .dan-requests .split { grid-template-columns: 1fr; }
}
@container dreq (max-width: 700px) {
  .dan-requests .dcard { padding: 22px 20px; }
  .dan-requests .search { min-width: 0; flex: 1 1 160px; }
  .dan-requests .msg { max-width: 94%; }
  .dan-requests.rq-mine .msg { max-width: 94%; }
}