/* src/app/kit · kit.css — F4: ערכת הכתיבה למסכים. תוספתי בלבד (כלל 10 · הכרעה 1).
 *
 * 🔴 **אין כאן טוקן אחד.** כל צבע, ריווח, רדיוס וגופן הם `var(--…)` של
 * `packages/ui/tokens.css` — אותו קובץ, בלי שינוי. מה שמוגדר כאן הן מחלקות
 * **חדשות** (kit-dialog · kit-field__error · kit-status) שלא היו קיימות באף מסך
 * לפני המשימה הזו (evidence: אין <dialog> באף מסך מלבד login.js).
 * ⚠️ `.form-field` · `.form-input` · `.alert` · `.btn` · `.btn-solid` · `.btn-ghost` —
 * ממשיכים להיות של packages/ui/components.css, בלי הגדרה כפולה.
 */

/* ── דיאלוג ─────────────────────────────────────────────────────────────
 * 🔴 הפריסה (flex, שלושה חלקים) יושבת על `[open]` בלבד — כלל הבסיס של הדפדפן
 * (`dialog:not([open]){display:none}`) גובר בלי זה, ובלעדיו .kit-dialog{display:flex}
 * היה מנצח את הכלל של הדפדפן ומצייר את הדיאלוג גם כשהוא סגור. */
.kit-dialog {
  border: 0;
  border-radius: var(--r-lg);
  padding: 0;
  width: min(560px, calc(100vw - 2 * var(--s4)));
  max-height: min(88vh, 720px);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.kit-dialog[open] { display: flex; flex-direction: column; }
.kit-dialog--wide { width: min(720px, calc(100vw - 2 * var(--s4))); }
.kit-dialog::backdrop { background: rgba(28, 29, 26, .42); }

.kit-dialog__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3);
  padding: var(--s5) var(--s5) var(--s4);
  border-block-end: 1px solid var(--line);
  flex: none;
}
.kit-dialog__head h2 { font-size: var(--fs-h2); }
.kit-dialog__sub { color: var(--muted); font-size: var(--fs-small); margin-block-start: var(--s1); }
/* יעד מגע 44px (--tap), לא רק אייקון: כלל §8 — פקד שנוגעים בו בטלפון. */
.kit-dialog__x {
  flex: none; inline-size: var(--tap); block-size: var(--tap);
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm);
  background: var(--sand); color: var(--muted); cursor: pointer;
}
.kit-dialog__x:hover { background: var(--brand-soft); color: var(--brand-ink); }
.kit-dialog__x svg { width: 18px; height: 18px; }

.kit-dialog__body { padding: var(--s5); overflow-y: auto; flex: 1; }
.kit-dialog__foot {
  padding: var(--s4) var(--s5) var(--s5);
  border-block-start: 1px solid var(--line);
  display: flex; gap: var(--s2); flex-wrap: wrap;
  flex: none;
}
.kit-dialog__foot .btn { flex: 1 1 auto; min-width: 120px; }

/* ── אישור ──────────────────────────────────────────────────────────────
 * 🔴 בלי צבע חדש. "danger" משתמש ב-`--warn` הקיים (כתום — "חריגה" בטוקנים), לעולם לא
 * באדום/`--emergency`: tokens.css אומר בפירוש "חירום בלבד. לא שגיאת טופס, לא מחיקה". */
.kit-confirm__msg { line-height: var(--lh-body); white-space: pre-line; }
.kit-confirm__danger { background: var(--warn); }
.kit-confirm__danger:hover { background: var(--warn); opacity: .88; }

/* ── שדה ────────────────────────────────────────────────────────────────
 * `.form-input[aria-invalid="true"]` כבר מוגדר ב-components.css (login.js) — לא כפול. */
.kit-field__hint { color: var(--muted); font-size: var(--fs-small); margin-block: var(--s1) 0; }
.kit-field__error {
  color: var(--warn); font-size: var(--fs-small);
  margin-block: var(--s1) 0; font-weight: 500;
}

/* ── שורת פעולות טופס — כמו .login__actions ב-login.js, כללי לכל טופס בערכה ── */
.kit-form__actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin-block-start: var(--s4); }
.kit-form__actions .btn { flex: 1 1 auto; min-width: 120px; }

/* ── הודעת מצב (wait/ok/err) — כמו ה-#sync בדן, פעם אחת ──────────────────── */
.kit-status { font-size: var(--fs-small); min-height: 1.2em; }
.kit-status--wait { color: var(--muted); }
.kit-status--ok { color: var(--brand-ink); }
.kit-status--err { color: var(--warn); font-weight: 500; }

/* ── הדפסה — כמו שאר הרכיבים (components.css): פקד על נייר הוא רעש ──────── */
@media print {
  .kit-dialog, .kit-dialog::backdrop { display: none !important; }
}

/* ── מיון עמודות (table-sort.js · 07.10) ───────────────────────────────────────────────────────
 * כותרת ממיינת = כפתור שנראה כטקסט הכותרת, עם מחוון: שני משולשים (לא ממוין) · משולש אחד (עולה/יורד). בלי צבע משלו — `currentColor` בלבד, כך שהמסך המארח קובע. */
table[data-sortable] th[data-sortcol] { white-space: nowrap; }
.thsort { display: inline-flex; align-items: center; gap: .45em; padding: 0; margin: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: inherit; cursor: pointer; }
.thsort:hover { text-decoration: underline; text-underline-offset: 3px; }
.thsort:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
.thsort .si { position: relative; width: 9px; height: 14px; flex: none; opacity: .55; }
.thsort .si::before, .thsort .si::after { content: ''; position: absolute; inset-inline-start: 0; border-inline: 4.5px solid transparent; }
.thsort .si::before { top: 0; border-bottom: 5.5px solid currentColor; }
.thsort .si::after { bottom: 0; border-top: 5.5px solid currentColor; }
th[aria-sort="ascending"] .si, th[aria-sort="descending"] .si { opacity: 1; }
th[aria-sort="ascending"] .si::after, th[aria-sort="descending"] .si::before { visibility: hidden; }

/* Shared profile-photo crop UI: same controls in self-service and registry cards. */
.person-photo-editor .person-photo-crop[hidden] { display: none; }
.person-photo-editor .person-photo-crop { margin-block: var(--s3); max-width: 100%; }
.person-photo-editor [data-photo-canvas] { display: block; width: min(256px,100%); height: auto; aspect-ratio: 1; border: 2px solid currentColor; border-radius: 12px; cursor: grab; touch-action: none; }
.person-photo-editor [data-photo-canvas]:active { cursor: grabbing; }
.person-photo-editor .person-photo-crop-controls { display: grid; gap: var(--s2); max-width: 320px; margin-block: var(--s3); }
.person-photo-editor .person-photo-crop-controls label { display: grid; gap: var(--s1); }
.person-photo-editor .person-photo-crop-controls input { width: 100%; min-width: 0; direction: ltr; }
.person-photo-editor .person-photo-crop-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }