/* أوتون — قائمة الحساب في هيدر الصفحات العامة */

.header-account{
  position:relative;
  display:flex;
  align-items:center;
}

.header-account-placeholder{
  width:112px;
  height:45px;
  display:block;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(255,255,255,.62);
}

.account-menu{
  position:relative;
}

.account-menu-trigger{
  min-height:45px;
  max-width:210px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:6px 10px 6px 13px;
  color:var(--paper);
  background:rgba(255,255,255,.88);
  border:1px solid var(--border);
  border-radius:999px;
  font:inherit;
  font-weight:700;
  cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease;
}

.account-menu-trigger:hover,
.account-menu-trigger[aria-expanded="true"]{
  border-color:var(--c1);
  box-shadow:0 8px 22px rgba(7,175,103,.12);
}

.account-menu-trigger:focus-visible{
  outline:2px solid var(--c1);
  outline-offset:3px;
}

.account-avatar{
  width:30px;
  height:30px;
  flex:0 0 30px;
  display:grid;
  place-items:center;
  color:#fff;
  background:var(--gradient);
  border-radius:50%;
  font-size:.88rem;
}

.account-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.account-chevron{
  color:var(--mist);
  font-size:1rem;
  line-height:1;
  transition:transform .2s ease;
}

.account-menu-trigger[aria-expanded="true"] .account-chevron{
  transform:rotate(180deg);
}

.account-menu-panel{
  position:absolute;
  inset-inline-end:0;
  top:calc(100% + 10px);
  z-index:300;
  width:220px;
  padding:8px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 18px 48px rgba(9,20,32,.16);
}

.account-menu-panel[hidden]{
  display:none;
}

.account-menu-link{
  width:100%;
  display:flex;
  align-items:center;
  padding:11px 12px;
  color:var(--paper);
  background:transparent;
  border:0;
  border-radius:10px;
  font:inherit;
  font-size:.9rem;
  font-weight:600;
  text-align:start;
  cursor:pointer;
}

.account-menu-link:hover,
.account-menu-link:focus-visible{
  color:var(--c1);
  background:rgba(7,175,103,.08);
  outline:none;
}

.account-menu-logout{
  margin-top:5px;
  padding-top:12px;
  border-top:1px solid var(--border);
  border-radius:0 0 10px 10px;
}

.account-menu-logout:disabled{
  opacity:.65;
  cursor:wait;
}

@media (max-width:640px){
  .header-account-placeholder{
    width:96px;
    height:42px;
  }

  .account-menu-trigger{
    min-height:42px;
    max-width:154px;
    gap:7px;
    padding:5px 8px 5px 11px;
    font-size:.82rem;
  }

  .account-avatar{
    width:28px;
    height:28px;
    flex-basis:28px;
    font-size:.8rem;
  }

  .account-menu-panel{
    width:min(220px,calc(100vw - 28px));
  }
}