/* src/app/dan/licensing.css — רישוי · ציוד · התראות: העיצוב של דן, מועתק.
 * מקור: legacy/community/branch-licensing.html · legacy/community/branch-equipment.html
 * מסכים: src/app/screens/branch-licensing.js · src/app/screens/branch-equipment.js · src/app/screens/community-alerts.js — כל אחד עוטף את עצמו ב-`<div class="dan dan-<מודול>">`.
 * הנוהל: docs/runbooks/dan-design-port.md · הפלטה (`--d-*`): src/app/dan/dan.css.
 *
 * 🔴 01.10 · גיל: "תעתיק גם את הלוגיקה והפונקציונליות בדף וגם את העיצוב של כל המסכים … שיהיה אחד לאחד". אלה שני ה-`<style>` של הדפים, מועתקים ולא
 * מיובאים (ADR 0025), כל כלל בקידומת `.dan-licensing` · `.dan-equipment` · `.dan-alerts`; הפלטה `var(--green)` ⟶ `var(--d-green)`, `#3A4A42` ⟶ `var(--d-body)`.
 * ⚠️ `.dan-alerts` אינו מדף של דן (אין דף התראות) — הוא נבנה מאותם רכיבים: הכותרת, אריחי ה-`kpi` של הציוד, וכרטיס ה-`todo` של הדשבורד (manager.css).
 *
 * ⚠️ מה שונה מהמקור, ולמה — חמישה דברים:
 *  ① **אין `:root` · `body` · `main` · `*{box-sizing}` · `[hidden]`** — הפלטה ב-dan.css, הרקע והאיפוס של המעטפת (base.css), ו-`.dan [hidden]` שם.
 *  ② **שמות מחלקות מקומיים לכל מה שמתנגש עם המעטפת** (packages/ui · kit.css, נמדד ב-/community: מחלקה של דן באותו שם יורשת בשקט את הכללים שלהן):
 *     `.topbar` ⟶ `.dtop` · `.chip` ⟶ `.dchip` · `.empty` ⟶ `.dempty` · `.bar` ⟶ `.dbar` · `.grid` ⟶ `.dgrid` · `.pill` ⟶ `.dpill` · `.btn` ⟶ `.dbtn` ·
 *     `.btn.solid` ⟶ `.dbtn-solid` · `.btn.link` ⟶ `.dbtn.link` · `.kit-dialog` נשאר (הדיאלוג כאן הוא kit-dialog, מעוצב כמו `dialog`/`.dlg` של דן).
 *  ③ **שבב ה"שומר…/נכשל" ב-AA** — `.chip.failed` בדן לבן על `--orange` (#E07A3F): 3.0:1. ⟹ על `--d-orange-ink` (5.6:1). `--faint`/`--muted` כבר מוכהים ב-dan.css.
 *  ④ **`container` ולא `@media`** — הרוחב תלוי במעטפת (סרגל פתוח/סגור), לא בחלון; ב-375 אסורה גלישה אופקית. ⟹ סף 860 על המכל במקום 1000 על החלון
 *     (דן: main ≈ חלון פחות הסרגל); ובנייד `select`/`date` ברוחב המכל.
 *  ⑤ **אריחי ה-KPI ב-`auto-fit`** — דן: `repeat(4,1fr)`. כאן שלושה אריחים (אין `usable`, ראו הכותרת של branch-equipment.js), ושלושה על ארבעה טורים משאירים חור.
 * ⛔ **מה מהמקור אינו כאן** (אין לו רכיב על המסך): `.fileact` · `.attach` · `.seefile` (צירוף אישור — אין view/הרשאת מסמכים) · `.it.bad` · `.pill.bad` (אין `usable`) ·
 *    `.nav-backdrop` · `aside` (המעטפת). ✅ `.chip.missing` · `.unit.missing` כאן (המצב "אין בתוקף" נגזר מהקוד `missing`, כמו בדן).
 */

/* ═══════════════════════════ משותף: מכל · כותרת · קישורים · דיאלוג ═══════════════════════════ */

.dan-licensing, .dan-equipment, .dan-alerts {
  display: flex; flex-direction: column; gap: 22px;
  /* line-height: normal — על `.dan` ב-dan.css (01.10): בדן אין line-height בגוף; המעטפת קובעת 1.6 */
}
.dan-licensing { container: dan-licensing / inline-size; }
.dan-equipment { container: dan-equipment / inline-size; }
.dan-alerts { container: dan-alerts / inline-size; }

.dan-licensing a, .dan-equipment a, .dan-alerts a { color: var(--d-green); text-decoration: none; }
.dan-licensing a:hover, .dan-equipment a:hover, .dan-alerts a:hover { color: var(--d-orange-ink); }

.dan-licensing .dtop, .dan-equipment .dtop, .dan-alerts .dtop { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dan-licensing h1, .dan-equipment h1, .dan-alerts h1 { font-size: 27px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; margin: 0 0 5px; line-height: normal; }
.dan-licensing .dtop .meta, .dan-equipment .dtop .meta, .dan-alerts .dtop .meta { font-size: 15.5px; color: var(--d-muted); }
/* הודעת המצב ("שומר…") יושבת מתחת ל-meta, **מחוץ לזרימה** (בתוך הרווח שבין הכותרת לתוכן): בזרימה, כל "נשמר" דחף את המסך כולו 17px למטה
 * ובחזרה. `role=status` נשאר בעץ גם ריק. */
.dan-licensing .dtop > div, .dan-equipment .dtop > div { position: relative; }
.dan-licensing .dtop .kit-status, .dan-equipment .dtop .kit-status { position: absolute; inset-inline-start: 0; top: 100%; margin: 3px 0 0;
  font-size: 14px; min-height: 0; width: max-content; max-width: 100%; }
.dan-licensing .dtop .kit-status--wait, .dan-equipment .dtop .kit-status--wait { color: var(--d-muted); }
.dan-licensing .dtop .kit-status--ok, .dan-equipment .dtop .kit-status--ok { color: var(--d-green-dark); }
.dan-licensing .dtop .kit-status--err, .dan-equipment .dtop .kit-status--err { color: var(--d-orange-ink); }

/* `.btn.solid` / `.btn` / `.btn.link` של דן.
 * 🔴 שני כפתורים מלאים, לא אחד: ב-**ציוד** הכפתור הוא `.btn.solid` של הדף (14.5px · padding 10px 18px · border 1px ירוק · בלי צל) — כך 'שמירה' ו'ביטול' באותו גודל.
 * ברישוי אין כפתור מלא בדן בכלל ("＋ פריט חדש" נוסף כאן), ולכן הוא `.btn-solid` של page.css (15px · padding 12px 22px · צל ירוק) — נמדד בסקירה 01.10: ההעתקה
 * האחידה של שניהם מ-page.css הפכה את כפתור הציוד ל-44px מול 41px, ו'שמירה' נהייתה גדולה מ'ביטול'. */
.dan-licensing .dbtn-solid { font-family: inherit; font-size: 15px; font-weight: 600; color: #fff; background: var(--d-green); border: 0;
  border-radius: 999px; padding: 12px 22px; cursor: pointer; box-shadow: 0 8px 20px rgba(14,122,85,.22); }
.dan-equipment .dbtn-solid { font-family: inherit; font-size: 14.5px; font-weight: 600; color: #fff; background: var(--d-green); border: 1px solid var(--d-green);
  border-radius: 999px; padding: 10px 18px; cursor: pointer; }
.dan-licensing .dbtn-solid:hover, .dan-equipment .dbtn-solid:hover { background: var(--d-green-dark); }
.dan-licensing .dbtn-solid:disabled, .dan-equipment .dbtn-solid:disabled { background: var(--d-track); color: var(--d-muted); box-shadow: none; cursor: default; }
.dan-equipment .dbtn-solid:disabled { border-color: transparent; }
.dan-licensing .dbtn, .dan-equipment .dbtn { font-family: inherit; font-size: 14.5px; font-weight: 500; border-radius: 999px; padding: 10px 18px; cursor: pointer;
  border: 1px solid #D8E3DA; background: #fff; color: var(--d-green); display: inline-block; text-align: center; }
.dan-licensing .dbtn:hover, .dan-equipment .dbtn:hover { background: #F4F8F5; }
.dan-licensing .dbtn.link, .dan-equipment .dbtn.link { border: 0; background: none; padding: 6px 8px; color: var(--d-muted); font-size: 13.5px; }
.dan-licensing .dbtn.link:hover, .dan-equipment .dbtn.link:hover { background: none; color: var(--d-orange-ink); }

/* מצב ריק / שגיאת טעינה. */
.dan-licensing .dempty { background: #fff; border-radius: 18px; box-shadow: var(--d-shadow); padding: 34px; text-align: center; color: var(--d-faint); font-size: 15px; line-height: 1.7; }
.dan-equipment .dempty { background: #fff; border-radius: 16px; padding: 26px; text-align: center; color: var(--d-muted); box-shadow: var(--d-shadow); line-height: 1.7; }
.dan-alerts .dempty { color: var(--d-faint); font-size: 14.5px; }

/* הדיאלוג של דן (`dialog` · `.dlg` · `.f` · `.two` · `.chk` · `.err`) על `kit-dialog` — המעטפת (כותרת · X · מלכודת מיקוד · שער dirty) היא של kit/dialog.js. */
.dan-licensing .kit-dialog, .dan-equipment .kit-dialog { border-radius: 20px; width: min(560px, calc(100vw - 32px)); background: #fff; color: var(--d-text);
  box-shadow: 0 30px 80px rgba(16,42,32,.28); }
.dan-licensing .kit-dialog::backdrop, .dan-equipment .kit-dialog::backdrop { background: rgba(16,42,32,.34); }
.dan-licensing .kit-dialog__head, .dan-equipment .kit-dialog__head { padding: 24px 26px 0; border-block-end: 0; }
.dan-licensing .kit-dialog__head h2, .dan-equipment .kit-dialog__head h2 { margin: 0; font-size: 20px; font-weight: 600; color: var(--d-ink); letter-spacing: normal; }
.dan-licensing .kit-dialog__body, .dan-equipment .kit-dialog__body { padding: 14px 26px 24px; }
.dan-licensing .kit-dialog .form-field, .dan-equipment .kit-dialog .form-field { gap: 5px; margin-block-end: 14px; align-content: start; }
.dan-licensing .kit-dialog .form-field label, .dan-equipment .kit-dialog .form-field label { font-size: 13.5px; font-weight: 400; color: var(--d-muted); }
.dan-licensing .kit-dialog .form-input, .dan-equipment .kit-dialog .form-input { font-family: inherit; font-size: 15px; padding: 10px 12px; min-height: 0;
  border: 1px solid #D8E3DA; border-radius: 10px; background: #fff; color: var(--d-text); width: 100%; }
.dan-licensing .kit-dialog .form-input:focus, .dan-equipment .kit-dialog .form-input:focus { border-color: var(--d-green); }
.dan-licensing .kit-dialog .form-input:disabled, .dan-equipment .kit-dialog .form-input:disabled { background: var(--d-track); opacity: 1; color: var(--d-muted); border-color: transparent; }
.dan-licensing .kit-dialog .form-input[aria-invalid="true"], .dan-equipment .kit-dialog .form-input[aria-invalid="true"] { border-color: var(--d-orange-ink); border-width: 1px; }
.dan-licensing .kit-dialog .kit-field__hint, .dan-equipment .kit-dialog .kit-field__hint { font-size: 12.5px; color: var(--d-faint); line-height: 1.5; margin-block: 0; }
.dan-licensing .kit-dialog .kit-field__error, .dan-equipment .kit-dialog .kit-field__error { font-size: 13.5px; color: var(--d-orange-ink); margin-block: 0; }
.dan-licensing .kit-dialog .alert, .dan-equipment .kit-dialog .alert { font-size: 13.5px; color: #8E2A20; background: #FDECEA; border-radius: 10px; padding: 8px 12px; margin-block-end: 14px; border: 0; }
.dan-licensing .two, .dan-equipment .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dan-licensing .two > *, .dan-equipment .two > * { min-width: 0; }
.dan-equipment .chk { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--d-text); margin-block-end: 6px; }
.dan-equipment .kit-dialog .chk + .kit-field__hint { margin-block-end: 12px; }
.dan-licensing .dlgfoot, .dan-equipment .dlgfoot { display: flex; gap: 8px; justify-content: flex-start; flex-wrap: wrap; padding-top: 4px; }

/* ═══════════════════════════ /branch/:code/licensing — רישוי ובטיחות ═══════════════════════════ */

.dan-licensing .units { display: flex; flex-direction: column; gap: 14px; }
/* כרטיס בית — אותה שפה של `.house` בדשבורד: פס צבע בצד לפי המצב החמור, כדי לסרוק בלי לקרוא. */
.dan-licensing .unit { background: #fff; border-radius: 18px; box-shadow: var(--d-shadow); overflow: hidden;
  border-inline-start: 4px solid var(--d-green-mid); }
.dan-licensing .unit.expired, .dan-licensing .unit.missing { border-inline-start-color: var(--d-orange); }
.dan-licensing .unit.soon { border-inline-start-color: var(--d-sand); }
.dan-licensing .unit.unknown { border-inline-start-color: var(--d-dim); }
.dan-licensing .uh { display: flex; align-items: baseline; gap: 10px; padding: 16px 20px 12px; flex-wrap: wrap; }
.dan-licensing .uh .un { font-size: 18px; font-weight: 600; color: var(--d-ink); }
.dan-licensing .uh .ua { font-size: 13.5px; color: var(--d-faint); }
/* "＋ פריט" על הכרטיס — לא של דן (אצלה שורת הדרישה מופיעה מעצמה), אבל באותה שפה כמו `.attach`. */
.dan-licensing .uadd { margin-inline-start: auto; align-self: center; font-family: inherit; font-size: 13px; color: var(--d-green); background: #fff;
  border: 1px solid #D8E3DA; border-radius: 999px; padding: 6px 13px; cursor: pointer; white-space: nowrap; }
.dan-licensing .uadd:hover { background: #F4F8F5; }

.dan-licensing .item { display: grid; grid-template-columns: 1.5fr auto auto auto 1fr; align-items: center;
  gap: 12px; padding: 11px 20px; border-top: 1px solid #F6F3EA; }
.dan-licensing .uempty { padding: 11px 20px; border-top: 1px solid #F6F3EA; font-size: 14.5px; color: var(--d-faint); }
.dan-licensing .item .inm { font-size: 14.5px; color: var(--d-body); min-width: 0; overflow-wrap: anywhere; }
.dan-licensing .item select, .dan-licensing .item input[type="date"] { font-family: inherit; font-size: 13.5px; color: var(--d-text);
  background: #fff; border: 1px solid var(--d-line); border-radius: 9px; padding: 7px 9px; min-height: 36px; }
.dan-licensing .item select:focus, .dan-licensing .item input[type="date"]:focus { outline: 2px solid var(--d-green); outline-offset: 1px; }
.dan-licensing .fl { font-size: 11.5px; color: var(--d-faint); display: block; margin-bottom: 2px; }

.dan-licensing .dchip { justify-self: start; font-size: 12.5px; font-weight: 500; border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.dan-licensing .dchip.ok { color: var(--d-green-dark); background: var(--d-mint); }
.dan-licensing .dchip.soon { color: #6E5A2E; background: #F7F0DC; }
.dan-licensing .dchip.expired, .dan-licensing .dchip.missing { color: var(--d-orange-ink); background: var(--d-orange-soft); }
.dan-licensing .dchip.unknown { color: #5D5A63; background: #EFEDF2; }
.dan-licensing .dchip.saving { color: var(--d-muted); background: var(--d-track); }
.dan-licensing .dchip.failed { color: #fff; background: var(--d-orange-ink); }

@container dan-licensing (max-width: 860px) {
  .dan-licensing .item { grid-template-columns: 1fr; gap: 8px; }
  .dan-licensing .item select, .dan-licensing .item input[type="date"] { width: 100%; max-width: 100%; }
  .dan-licensing .dchip { justify-self: start; }
  .dan-licensing .two { grid-template-columns: 1fr; }
}

/* ═══════════════════════════ /branch/:code/equipment — ציוד חירום ═══════════════════════════ */

.dan-equipment .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; margin-bottom: 18px; }
.dan-equipment .kpi, .dan-alerts .kpi { background: #fff; border-radius: 16px; padding: 16px 18px; box-shadow: var(--d-shadow);
  display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dan-equipment .kpi .l, .dan-alerts .kpi .l { font-size: 13.5px; color: var(--d-faint); }
.dan-equipment .kpi .v, .dan-alerts .kpi .v { font-size: 26px; font-weight: 600; color: var(--d-ink); }
.dan-equipment .kpi .s, .dan-alerts .kpi .s { font-size: 13px; color: var(--d-green); }
.dan-equipment .kpi .s.warn, .dan-alerts .kpi .s.warn { color: var(--d-orange-ink); }
.dan-equipment .kpi .s.mute, .dan-alerts .kpi .s.mute { color: var(--d-faint); }

.dan-equipment .dbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.dan-equipment .dbar select { font-family: inherit; font-size: 14.5px; padding: 9px 12px; border: 1px solid #D8E3DA;
  border-radius: 10px; background: #fff; color: var(--d-text); max-width: 100%; }

.dan-equipment .dgrid { display: flex; flex-direction: column; gap: 12px; }
/* פס צבע בצד לפי חומרה — סריקה בלי קריאה, אותה שפה של כרטיס הרישוי. */
.dan-equipment .it { background: #fff; border-radius: 16px; padding: 16px 18px; box-shadow: var(--d-shadow);
  border-inline-start: 4px solid var(--d-green-mid); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dan-equipment .it.warn { border-inline-start-color: var(--d-orange); }
.dan-equipment .it.notours { border-inline-start-color: #B4B2A9; }
.dan-equipment .ih { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dan-equipment .ih .n { font-size: 17px; font-weight: 600; color: var(--d-ink); }
.dan-equipment .ih .w { font-size: 13.5px; color: var(--d-muted); }
.dan-equipment .pills { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.dan-equipment .dpill { font-size: 12.5px; border-radius: 999px; padding: 3px 10px; background: var(--d-mint); color: var(--d-green-dark); white-space: nowrap; }
.dan-equipment .dpill.warn { background: var(--d-orange-soft); color: var(--d-orange-ink); }
.dan-equipment .dpill.mute { background: #F1EFE8; color: var(--d-muted); }
.dan-equipment .it .meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13.5px; color: var(--d-muted); }
.dan-equipment .acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding-top: 2px; }
.dan-equipment .acts select { font-family: inherit; font-size: 13.5px; padding: 7px 10px; border: 1px solid #D8E3DA; border-radius: 9px; background: #fff; color: var(--d-text); max-width: 100%; }

.dan-equipment .log { background: var(--d-cream2); border-radius: 12px; padding: 10px 14px; font-size: 13.5px;
  color: var(--d-muted); display: flex; flex-direction: column; gap: 6px; }
.dan-equipment .log .r { display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; }

/* ≤900: שני טורי KPI (דן: `repeat(2,1fr)` — שם ארבעה אריחים בשתי שורות). שלושה אריחים: האחרון על כל הרוחב, בלי חור. */
@container dan-equipment (max-width: 900px) {
  .dan-equipment .two { grid-template-columns: 1fr; }
  .dan-equipment .kpis { grid-template-columns: repeat(2, 1fr); }
  .dan-equipment .kpis .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ═══════════════════════════ /community/alerts — התראות (הכרטיס של הדשבורד, מורחב) ═══════════════════════════ */

.dan-alerts .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; }
.dan-alerts .dcard { background: #fff; border-radius: 22px; padding: 24px 26px; box-shadow: var(--d-shadow); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dan-alerts .cardhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dan-alerts .dcard h2 { font-size: 17px; font-weight: 600; color: var(--d-ink); margin: 0; }

.dan-alerts .afilters { display: flex; gap: 8px; flex-wrap: wrap; }
.dan-alerts .afilter { font-family: inherit; font-size: 13.5px; color: var(--d-muted); background: #fff; border: 1px solid var(--d-line); border-radius: 999px;
  padding: 6px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.dan-alerts .afilter:hover { border-color: var(--d-green); }
.dan-alerts .afilter[aria-pressed="true"] { background: var(--d-green); border-color: var(--d-green); color: #fff; }
.dan-alerts .afilter .c { font-size: 12px; font-variant-numeric: tabular-nums; }

.dan-alerts .todo { display: flex; flex-direction: column; gap: 12px; }
.dan-alerts .todo .t { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid #F4F1E7; padding-bottom: 12px; color: inherit; scroll-margin-top: 86px; }
.dan-alerts .todo .t:last-child { border-bottom: 0; padding-bottom: 0; }
/* קישור מ-`/community` (כרטיס ההתראות) מגיע ל-`#id` — השורה מסומנת (`.hit`, מ-mountCommunityAlerts), לא רק הדף. */
.dan-alerts .todo .t.hit { background: var(--d-cream2); border-radius: 12px; padding: 10px 12px; box-shadow: inset 0 0 0 1px var(--d-line); }
.dan-alerts .stack { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dan-alerts .todo .t .n { font-size: 15px; font-weight: 500; color: var(--d-text); overflow-wrap: anywhere; }
.dan-alerts .todo .t .s { font-size: 13.5px; color: var(--d-faint); }
.dan-alerts .todo .t .s.late { color: var(--d-orange-ink); font-weight: 500; }
.dan-alerts .pill-warn { font-size: 13.5px; font-weight: 500; color: var(--d-orange-ink); background: var(--d-orange-soft); border-radius: 999px; padding: 4px 11px; }
.dan-alerts .pill-mute { font-size: 12.5px; font-weight: 500; color: var(--d-muted); background: var(--d-cream2); border-radius: 999px; padding: 3px 10px; }
.dan-alerts .pill-warn, .dan-alerts .pill-mute { white-space: nowrap; flex: none; }
.dan-alerts .anote { font-size: 12.5px; color: var(--d-faint); line-height: 1.55; margin: 0; }

@container dan-alerts (max-width: 700px) {
  .dan-alerts .dcard { padding: 22px 20px; }
  .dan-alerts .todo .t { align-items: flex-start; }
}