/* منوی کاربر در نوارِ بالا (userMenu.js). کلاسِ html.um را خودِ ماژول می‌گذارد؛ اگر ماژول بار نشود دکمه‌های
   قدیمیِ «خروج» و «پروفایل من» سرِ جایشان دیده می‌شوند. */
html.um #userChip .tb-logout,
html.um #tenantProfileButton { display: none; }

html.um #userChip .tb-person { cursor: pointer; padding: 3px 8px 3px 6px; border-radius: 999px; transition: background .14s; }
html.um #userChip .tb-person::after { content: ""; width: 6px; height: 6px; margin-inline-start: 2px; border: solid var(--muted, #667085); border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); flex: none; }
html.um #userChip .tb-person:hover,
html.um #userChip .tb-person[aria-expanded="true"] { background: var(--soft, #F1F3F6); }
html.um #userChip .tb-person:focus-visible { outline: 2px solid var(--brand, #0B6B63); outline-offset: 2px; }

.um-menu { position: fixed; z-index: 1000; min-width: 220px; max-width: 300px; padding: 6px; direction: rtl;
  background: var(--paper, #fff); border: 1px solid var(--line, #E4E7EC); border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-lg, 0 20px 24px -4px rgba(16,24,40,.10), 0 8px 8px -4px rgba(16,24,40,.04));
  animation: um-in .12s ease-out; }
@keyframes um-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.um-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line-2, #EEF0F3); }
.um-head .tb-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-soft, #E6F2F1); color: var(--brand-ink, #08534D); display: inline-grid; place-items: center; font-weight: 700; flex: none; }
/* عکسِ پروفایل (profilePhoto.js) روی هر آواتار؛ حرفِ اول برای صفحه‌خوان در DOM می‌ماند ولی پنهان است */
.tb-avatar.pp-has { background-size: cover; background-position: center; color: transparent !important; }
.pp-box { display: flex; align-items: center; gap: 16px; margin: 4px 0 14px; padding: 12px; border: 1px solid var(--line, #E4E7EC); border-radius: var(--radius, 12px); }
html .pp-box .pp-preview.tb-avatar { width: 72px; height: 72px; border-radius: 50%; flex: none; background-color: var(--soft, #F1F3F6); display: inline-block; }
.pp-box .pp-preview:not(.pp-has) { background-image: radial-gradient(circle at 50% 38%, var(--line-strong, #D0D5DD) 0 17%, transparent 18%), radial-gradient(ellipse 34% 26% at 50% 86%, var(--line-strong, #D0D5DD) 0 98%, transparent 100%); }
.pp-actions { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pp-pick { cursor: pointer; }

/* پنجرهٔ برشِ عکس */
.pp-crop { width: min(560px, 94vw); border: 1px solid var(--line, #E4E7EC); border-radius: 14px; padding: 18px 20px; background: var(--paper, #fff); color: var(--ink, #101828); }
.pp-crop::backdrop { background: rgba(16,24,40,.45); }
.pp-crop-head h3 { margin: 0 0 4px; }
.pp-crop-body { display: flex; gap: 18px; align-items: flex-start; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.pp-stage { position: relative; width: 300px; height: 300px; flex: none; border-radius: 10px; overflow: hidden; background: #111; cursor: grab; touch-action: none; user-select: none; }
.pp-stage.dragging { cursor: grabbing; }
.pp-stage:focus-visible { outline: 2px solid var(--brand, #0B6B63); outline-offset: 2px; }
.pp-stage canvas { width: 300px; height: 300px; display: block; }
/* دایرهٔ روشن = همان چیزی که در آواتار دیده می‌شود؛ بیرونش کم‌رنگ */
.pp-mask { position: absolute; inset: 0; pointer-events: none; border-radius: 50%; box-shadow: 0 0 0 999px rgba(0,0,0,.5); outline: 2px solid rgba(255,255,255,.9); outline-offset: -2px; }
.pp-side { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pp-prev-lg { width: 96px; height: 96px; border-radius: 50%; border: 1px solid var(--line, #E4E7EC); }
.pp-prev-sm { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line, #E4E7EC); }
.pp-zoom { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.pp-zoom input[type=range] { flex: 1; accent-color: var(--brand, #0B6B63); }
.pp-crop-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.um-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.um-who b { font-size: .86rem; color: var(--ink, #101828); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-who small { font-size: .72rem; color: var(--muted, #667085); }
.um-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-sm, 8px);
  background: transparent; color: var(--ink-2, #344054); font: inherit; font-size: .84rem; text-align: start; cursor: pointer; }
.um-item .ic { width: 16px; height: 16px; flex: none; color: var(--muted, #667085); }
.um-item:hover, .um-item:focus-visible { background: var(--soft, #F1F3F6); outline: none; }
.um-sep { height: 1px; margin: 4px 2px; background: var(--line-2, #EEF0F3); }
.um-item.um-bad { color: var(--bad, #B42318); }
.um-item.um-bad .ic { color: var(--bad, #B42318); }
.um-item.um-bad:hover, .um-item.um-bad:focus-visible { background: var(--bad-bg, #FEF3F2); }