/* ════════════════════════════════════════════════════════════════════
   Общие стили avatar-menu (профильный dropdown в топбаре).
   Извлечены из inline-стилей /users (эталонная версия). Подключается
   через <link href="/css/avatar-menu.css"> на всех страницах системы.
   Используется вместе с frontend/js/ui/avatar-menu.js — он рендерит
   HTML и навешивает обработчики.

   Контракт HTML: страница должна содержать (где угодно в топбаре):
     <div class="avatar-wrapper">
       <div class="avatar-container" id="avatarBtn">
         <div class="avatar-box"><img id="headerAvatar" src="" alt=""></div>
         <div class="status-circle" id="statusCircle"></div>
       </div>
       <div class="avatar-menu" id="avatarMenu"></div>
     </div>
   Содержимое <div id="avatarMenu"> заполняется автоматически из JS.
   ════════════════════════════════════════════════════════════════════ */

.avatar-menu{
  position:absolute;
  top:48px;
  right:0;
  background:#1a2a5e;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(2,8,23,0.25);
  width:max-content;
  min-width:200px;
  padding:0;
  display:none;
  z-index:1000;
  border:1px solid rgba(255,255,255,0.10);
  color:#fff;
  overflow:visible;
}
.avatar-menu.show{
  display:block;
  animation:helpdeskAvatarMenuFadeIn .18s ease-out;
}
.avatar-menu::before{
  content:'';
  position:absolute;
  top:-8px;
  right:7px;
  width:20px;
  height:9px;
  background:#1a2a5e;
  clip-path:polygon(50% 0%, 100% 100%, 0% 100%);
}
@keyframes helpdeskAvatarMenuFadeIn{
  from{ opacity:0; transform:translateY(-8px); }
  to  { opacity:1; transform:translateY(0); }
}

.avatar-menu-item{
  padding:12px 16px;
  cursor:pointer;
  font-size:13px;
  color:rgba(255,255,255,0.85);
  font-weight:500;
  display:flex;
  align-items:center;
  gap:14px;
  border-radius:0;
  white-space:nowrap;
  background:transparent;
  transition:background .22s cubic-bezier(0.4,0,0.2,1), box-shadow .22s cubic-bezier(0.4,0,0.2,1);
}
/* Reset «.topbar span» наследуемых стилей, которые могут случайно
   накладываться на span'ы внутри пунктов меню. */
.avatar-menu .avatar-menu-item > span,
.avatar-menu .avatar-menu-item > span:hover{
  padding:0;
  border-radius:0;
  background:transparent;
  background-color:transparent;
  border:none;
  box-shadow:none;
  opacity:1;
  transition:none;
}
.avatar-menu-item:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0.02) 100%),
    #334a82;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.08);
}
.avatar-menu .avatar-menu-item:first-child{ border-radius:11px 11px 0 0; }
.avatar-menu .avatar-menu-item:last-child { border-radius:0 0 11px 11px; }

.avatar-menu-item.is-admin-only{ display:none; }
.avatar-menu.show-admin .avatar-menu-item.is-admin-only{ display:flex; }

.avatar-menu-item.is-danger{ color:#fb7185; }
.avatar-menu-item.is-danger .menu-icon svg{ stroke:#fb7185; }
.avatar-menu-item.is-danger:hover{
  background:
    linear-gradient(180deg, rgba(251,113,133,0.20) 0%, rgba(251,113,133,0.08) 50%, rgba(251,113,133,0.04) 100%),
    #4a2438;
  box-shadow:
    inset 0 1px 0 rgba(251,113,133,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.08);
}

.avatar-menu-divider{
  height:1px;
  background:rgba(255,255,255,0.10);
  margin:4px 0;
}

.avatar-menu .menu-icon{
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.avatar-menu .menu-icon svg{
  width:18px;
  height:18px;
  stroke:rgba(255,255,255,0.85);
  fill:none;
  stroke-width:2;
  transition:stroke .15s;
}
.avatar-menu .menu-icon-fill{
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.avatar-menu .menu-icon-fill svg{
  width:18px;
  height:18px;
  fill:rgba(255,255,255,0.85);
  transition:fill .15s;
}