/* unipro/market/static/market/css/account_menu.css */

.mkf-am{ position:relative; display:inline-flex; }
.mkf-am__btn{
  box-sizing: border-box;
  height: var(--mkf-action-h, 56px);      /* 👈 важно: именно height */
  min-height: 0;                          /* чтобы не спорило с height */

  border-radius: var(--mkf-action-r, 14px);
  border: 1px solid var(--mkf-border, #E5E7EB);
  background: var(--mkf-surface, #fff);
  padding: 8px 12px;

  display: flex;
  align-items: center;
  gap: 10px;

  cursor: pointer;

  /* ✅ сброс “кнопочных” приколов браузера */
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;                          /* чтобы не было дефолтного button-font */
  line-height: 1;                         /* чтобы не раздувало */
  color: var(--mkf-on-surface, #111);
}

.mkf-am__btn:hover{ box-shadow: 0 6px 16px rgba(0,0,0,.06); }
.mkf-am__btn:focus-visible{ outline:2px solid rgba(59,130,246,.35); outline-offset:2px; }

.mkf-am__icon{
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;                        /* ✅ иконка по центру */
  border-radius: 12px;
  background: rgba(0,0,0,.04);
  flex: 0 0 auto;
}

.mkf-am__label{ display:flex; flex-direction:column; line-height:1.1; text-align:left; }
.mkf-am__label-top{ font-size: 12px; font-weight: 600; }
.mkf-am__label-bottom{
  font-size: 11px;
  font-weight: 500;
  color: var(--mkf-muted, #6b7280);
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Menu */
.mkf-am__menu{
  position:absolute;
  top: calc(100% + 8px);
  right:0;
  min-width: 280px;
  max-width: 340px;
  border:1px solid var(--mkf-border);
  background: var(--mkf-surface, #fff);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
  padding: 10px;
  z-index: 50;

  opacity:0;
  transform: translateY(-6px);
  pointer-events:none;
  transition: opacity .12s ease, transform .12s ease;
}

.mkf-am.is-open .mkf-am__menu{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}

.mkf-am__head{ padding: 8px 10px 10px; }
.mkf-am__head-title{ font-weight: 800; font-size: 13px; }
.mkf-am__head-sub{ margin-top: 4px; font-size: 12px; color: var(--mkf-muted, #6b7280); }

.mkf-am__item{
  display:flex; align-items:center; justify-content:space-between;
  width:100%;
  padding: 10px 10px;
  border-radius: 12px;
  text-decoration:none;
  color: var(--mkf-on-surface, #111);
  font-weight: 600;
  font-size: 13px;
}
.mkf-am__item:hover{ background: rgba(0,0,0,.04); }

.mkf-am__item--primary{
  background: rgba(37,99,235,.08);
}
.mkf-am__item--primary:hover{ background: rgba(37,99,235,.12); }

.mkf-am__item--danger{
  color:#ef4444;
  background: rgba(239,68,68,.06);
  border:none;
  cursor:pointer;
  text-align:left;
}
.mkf-am__item--danger:hover{ background: rgba(239,68,68,.10); }

.mkf-am__sep{ height:1px; background: var(--mkf-border); margin: 8px 2px; }
.mkf-am__form{ margin:0; }

.mkf-am__badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 22px; height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(37,99,235,.12);
  color: rgba(37,99,235,1);
  font-weight: 800;
}

/* ===== Account menu: organizations sublist ===== */

.mkf-am__item--sub{
  cursor: pointer;
  border: 1px solid var(--mkf-accent, #00008b);
  background: transparent;
  box-shadow: none;
}

.mkf-am__item--sub:hover{
  background: rgba(0,0,0,.03);
}

/* Chevron (SVG) */
.mkf-am__chev{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease;
}

/* Размер и цвет именно SVG-иконки */
.mkf-am__chev .mkf-ico{
  width: 16px;
  height: 16px;
  color: var(--mkf-accent, #00008b);
}

/* Поворот стрелки */
.mkf-am__item--sub[aria-expanded="false"] .mkf-am__chev{
  transform: rotate(-90deg);
}
.mkf-am__item--sub[aria-expanded="true"] .mkf-am__chev{
  transform: rotate(0deg);
}

/* Список организаций */
.mkf-am__sublist{
  margin: 6px 0 8px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(0,0,0,.03);

  display: grid;
  gap: 4px;
}

/* Элемент организации */
.mkf-am__subitem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 8px;

  padding: 8px 10px;
  border-radius: 10px;
  text-decoration:none;

  font-size: 12px;
  font-weight: 600;
  color: var(--mkf-on-surface, #111);
}

.mkf-am__subitem:hover{
  background: rgba(0,0,0,.06);
}

/* Текущая организация */
.mkf-am__subitem.is-current{
  background: rgba(37,99,235,.12);
  font-weight: 800;
}

/* Галочка */
.mkf-am__tick{
  width: 16px;
  height: 16px;
  color: var(--mkf-muted, #6b7280);
  opacity: .9;
}


/* Пункт "Управление организациями" */
.mkf-am__subitem--muted{
  color: var(--mkf-muted, #6b7280);
  background: transparent;
}

/* ===== Org list: name + role badge ===== */

.mkf-am__subleft{
  display:flex;
  align-items:center;
  gap: 8px;
  min-width: 0;
}

.mkf-am__orgname{
  min-width: 0;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mkf-am__role{
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--mkf-border, #e5e7eb);
  background: rgba(0,0,0,.03);
  color: var(--mkf-muted, #6b7280);
}

.mkf-am__role.is-admin{
  background: rgba(37,99,235,.12);
  color: var(--mkf-accent, #00008b);
  border-color: rgba(37,99,235,.18);
}

.mkf-am__role.is-person{
  background: var(--mkf-success-bg, rgba(22,163,74,.12));
  color: var(--mkf-success, #166534);
  border-color: var(--mkf-success, #166534);
}

/* ===== Org list: collapse animation ===== */

.mkf-am__sublist{
  overflow: hidden;
  transform-origin: top;
  transition: max-height .18s ease, opacity .18s ease;
  max-height: 420px;   /* запас под 10-15 организаций */
  opacity: 1;
}

.mkf-am__sublist.is-collapsed{
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}

/* Force chevron to be visible */
.mkf-am__chev{
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}

.mkf-am__chev svg{
  width: 18px !important;
  height: 18px !important;
  display: block;
  color: var(--mkf-accent, #00008b);
}