/**
 * НОВОЕ РЕШЕНИЕ: Выпадающие меню в навигации с правильным позиционированием
 * Меню позиционируются относительно viewport, а не navbar
 */

@layer components {
/* Navbar: на desktop не режем выпадающие меню */
@media (min-width: 992px) {
  header,
  .navbar,
  .navbar .container,
  .navbar .container-fluid,
  .navbar-collapse,
  .navbar-nav {
    overflow: visible !important;
  }
}

@media (max-width: 991.98px) {
  header {
    overflow-x: hidden;
    overflow-y: visible;
  }

  .navbar,
  .navbar .container,
  .navbar .container-fluid {
    overflow-x: hidden;
    overflow-y: visible;
  }
}

.navbar-collapse,
.navbar-nav {
  overflow-y: visible;
}

/* Desktop: z-index и размеры; позиционирование — Bootstrap Popper (data-bs-boundary="viewport") */
@media (min-width: 992px) {
  .navbar .dropdown-menu {
    z-index: var(--z-navbar-dropdown) !important;
    max-height: calc(100vh - 72px);
    overflow-x: hidden;
    overflow-y: auto;
    width: auto !important;
    min-width: 160px !important;
    max-width: 200px !important;
  }
  
  /* Исключение для меню пользователя - делаем шире */
  #userDropdown + .dropdown-menu {
    min-width: 240px !important;
    max-width: 280px !important;
  }

  /* Админ-меню: компактнее по ширине, две колонки остаются читаемыми */
  .navbar .dropdown-menu.admin-dropdown,
  .navbar .dropdown-menu.dropdown-menu-lg.admin-dropdown {
    min-width: 480px !important;
    max-width: 560px !important;
    width: auto !important;
  }

}

/* МОБИЛЬНАЯ ВЕРСИЯ: Аккордеон-подобное поведение для dropdown */
@media (max-width: 991.98px) {
  .navbar .dropdown-menu {
    position: static !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background-color: var(--nav-mobile-accordion-bg) !important;
    border-radius: 0 !important;
  }

  .navbar .dropdown-menu.admin-dropdown .row {
    margin: 0 !important;
  }

  .navbar .dropdown-menu.admin-dropdown .row > div {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
  }

  .navbar .dropdown-item {
    padding: 0.75rem 1.5rem !important;
    border-bottom: 1px solid var(--border-light) !important;
    white-space: normal !important;
    color: var(--text-primary) !important;
  }

  .navbar .dropdown-item:hover,
  .navbar .dropdown-item:focus {
    background-color: var(--nav-link-hover-bg) !important;
    color: var(--nav-link-hover) !important;
  }

  .navbar .dropdown-item:last-child {
    border-bottom: none !important;
  }

  .navbar .dropdown-header {
    padding: 0.75rem 1.5rem 0.5rem !important;
    margin-top: 0.5rem !important;
    border-bottom: 1px solid var(--border-light) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.5px !important;
    color: var(--text-muted) !important;
  }

  .navbar .dropdown-header:first-child {
    margin-top: 0 !important;
  }

  .navbar .dropdown-item-with-badge .dropdown-item-badge {
    margin-left: 0.25rem;
    flex-shrink: 0;
  }

  .navbar .dropdown-toggle::after {
    transition: transform 0.3s ease !important;
  }

  .navbar .dropdown.show .dropdown-toggle::after {
    transform: rotate(180deg) !important;
  }
}

/* Desktop: Popper позиционирует меню; здесь только z-index при открытии */
@media (min-width: 992px) {
  .navbar .dropdown-menu.show {
    display: block !important;
  }

  /* На десктопе стрелки всегда видны и работают стандартно */
  .navbar .dropdown-toggle::after {
    opacity: 1;
    transition: transform 0.2s ease;
  }

  /* При открытии меню на десктопе стрелка может поворачиваться (опционально) */
  .navbar .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg); /* Поворачиваем вверх при открытии */
  }

  .navbar .dropdown-toggle[aria-expanded="false"]::after {
    transform: rotate(0deg);
  }
}
}