/**
 * WEVEEEE Navigation Skin（只样式，不改功能）
 * 目标：顶部导航（header-pill-nav）与左侧导航（new-nav-sidebar）完全对齐 merged_ui
 * 使用：在页面 head 引入（建议放在 weveeee-theme/components 后面）
 */

/* ============ Left Sidebar (new-nav-sidebar) ============ */
#newSidebar.new-nav-sidebar,
.new-nav-sidebar#newSidebar,
.new-nav-sidebar {
  background: #000000 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  width: 80px !important;
   flex: 0 0 80px !important; /* flex 骨架下必须同步 flex-basis，否则 width 可能不生效 */
  border-right: none !important;
  overflow: hidden !important;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
   will-change: width;
   /* 侧栏展开时必须可覆盖主容器阴影层，避免看起来“没有展开” */
   z-index: 9999 !important;
  pointer-events: auto !important;
}

/* ========================================================================
   Header: 用户头像下拉菜单（#userDropdownMenu）
   说明：该样式原先只存在于某些模块的 merged css 中，导致部分页面（如 modules_intro）
        引入新版壳后下拉菜单“裸样式”。这里提升为全局导航样式，确保一致性。
   ======================================================================== */

.user-dropdown-menu {
  position: absolute !important;
  top: calc(100% + 12px) !important;
  right: 0 !important;
  width: 220px !important;
  padding: 10px !important;
  background: #ffffff !important;
  border: none !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.12) !important;
  transform: translateY(-8px) scale(0.98) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.18s ease, transform 0.22s ease, visibility 0.18s ease !important;
  z-index: 10050 !important;
}

.user-dropdown-menu.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

.user-dropdown-menu .dropdown-user-info {
  padding: 10px 12px 8px 12px !important;
}

.user-dropdown-menu .dropdown-username {
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-main) !important;
}

.user-dropdown-menu .dropdown-divider {
  height: 1px !important;
  background: transparent !important;
  margin: 6px 2px !important;
}

.user-dropdown-menu .dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(0, 0, 0, 0.65) !important;
  text-decoration: none !important;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease !important;
}

.user-dropdown-menu .dropdown-item .material-icons {
  font-size: 18px !important;
  color: rgba(0, 0, 0, 0.50) !important;
}

.user-dropdown-menu .dropdown-item:hover {
  background: rgba(0, 0, 0, 0.03) !important;
  color: var(--primary) !important;
}

.user-dropdown-menu .dropdown-item:hover .material-icons {
  color: var(--primary) !important;
}

.user-dropdown-menu .dropdown-item:active {
  transform: scale(0.98) !important;
}

.user-dropdown-menu .dropdown-item-danger {
  color: rgba(239, 68, 68, 0.85) !important;
}

.user-dropdown-menu .dropdown-item-danger .material-icons {
  color: rgba(239, 68, 68, 0.85) !important;
}

.user-dropdown-menu .dropdown-item-danger:hover {
  background: rgba(239, 68, 68, 0.08) !important;
  color: #ef4444 !important;
}

.user-dropdown-menu .dropdown-item-danger:hover .material-icons {
  color: #ef4444 !important;
}

.new-nav-sidebar.expanded {
  width: 260px !important;
   flex-basis: 260px !important;
   background: #000000 !important;
}

/* 关键：当默认宽度来自 #newSidebar.new-nav-sidebar（ID+class，高优先级）时，
   hover/expanded 也必须用同等/更高优先级才能覆盖 */
#newSidebar.new-nav-sidebar.expanded,
#newSidebar.new-nav-sidebar:hover,
#newSidebar.new-nav-sidebar:focus-within {
  width: 260px !important;
  flex-basis: 260px !important;
  background: #000000 !important;
}

/* 兼容：即使 JS 不加 expanded，也能 hover 展开（对齐 merged_ui 的 hover:w-[260px]） */
.new-nav-sidebar:hover {
  width: 260px !important;
   flex-basis: 260px !important;
   background: #000000 !important;
}

/* 兼容触屏/无 hover 环境：点按侧栏内部链接也能触发展开 */
.new-nav-sidebar:focus-within {
  width: 260px !important;
  flex-basis: 260px !important;
  background: #000000 !important;
}

/* logo icon */
.new-nav-sidebar .sidebar-logo-icon {
  background: #ffffff !important;
  color: #000000 !important;
  border-radius: 16px !important; /* rounded-2xl */
  box-shadow: var(--shadow-glow) !important;
  transition: transform 0.7s ease, background-color 0.3s ease, color 0.3s ease !important;
}

.new-nav-sidebar.expanded .sidebar-logo-icon {
  transform: rotate(360deg) !important;
  background: var(--brand-primary) !important;
  color: #ffffff !important;
}

.new-nav-sidebar:hover .sidebar-logo-icon {
  transform: rotate(360deg) !important;
  background: var(--brand-primary) !important;
  color: #ffffff !important;
}

.new-nav-sidebar:focus-within .sidebar-logo-icon {
  transform: rotate(360deg) !important;
  background: var(--brand-primary) !important;
  color: #ffffff !important;
}

.new-nav-sidebar .logo-text {
  opacity: 0 !important;
  transition: opacity 0.5s ease 0.1s !important;
  max-width: 0 !important;
}

.new-nav-sidebar.expanded .logo-text {
  opacity: 1 !important;
  max-width: 240px !important;
}

.new-nav-sidebar:hover .logo-text {
  opacity: 1 !important;
  max-width: 240px !important;
}

.new-nav-sidebar:focus-within .logo-text {
  opacity: 1 !important;
  max-width: 240px !important;
}

.new-nav-sidebar .nav-group-title {
  opacity: 0 !important;
  transition: opacity 0.3s ease 0.15s !important;
  max-width: 0 !important;
}

.new-nav-sidebar.expanded .nav-group-title {
  opacity: 1 !important;
  max-width: 240px !important;
}

.new-nav-sidebar:hover .nav-group-title {
  opacity: 1 !important;
  max-width: 240px !important;
}

.new-nav-sidebar:focus-within .nav-group-title {
  opacity: 1 !important;
  max-width: 240px !important;
}

.new-nav-sidebar .nav-text-label {
  opacity: 0 !important;
  transform: translateX(-16px) !important;
  transition: opacity 0.5s ease, transform 0.5s ease !important;
  pointer-events: none !important;
  max-width: 0 !important;
  overflow: hidden !important;
}

.new-nav-sidebar.expanded .nav-text-label {
  opacity: 1 !important;
  transform: translateX(0) !important;
  pointer-events: auto !important;
  max-width: 220px !important;
}

.new-nav-sidebar:hover .nav-text-label {
  opacity: 1 !important;
  transform: translateX(0) !important;
  pointer-events: auto !important;
  max-width: 220px !important;
}

.new-nav-sidebar:focus-within .nav-text-label {
  opacity: 1 !important;
  transform: translateX(0) !important;
  pointer-events: auto !important;
  max-width: 220px !important;
}
/* nav item */
.new-nav-sidebar .sidebar-nav-item {
  height: 52px !important;
  margin: 0 8px 6px 8px !important; /* mx-2 + mb-1.5 */
  border-radius: 16px !important; /* rounded-2xl */
  color: rgba(255, 255, 255, 0.40) !important;
  position: relative !important;
  overflow: hidden !important;
  z-index: 0 !important;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease !important;
}

.new-nav-sidebar .sidebar-nav-item > * {
  position: relative !important;
  z-index: 1 !important;
}

/* hover 蒙版层（对齐 merged_ui 的 absolute inset bg-white/5 + opacity/scale） */
.new-nav-sidebar .sidebar-nav-item::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  opacity: 0 !important;
  transform: scale(0.95) !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
  z-index: 0 !important;
}

.new-nav-sidebar .sidebar-nav-item:hover {
  color: rgba(255, 255, 255, 1) !important;
}

.new-nav-sidebar .sidebar-nav-item:hover::after {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* active item */
.new-nav-sidebar .sidebar-nav-active {
  background: transparent !important; /* active 背景交给 ::after（更像 merged_ui 的底层块） */
  color: #ffffff !important;
  box-shadow: none !important;
}

.new-nav-sidebar .sidebar-nav-active .material-icons {
  opacity: 1 !important;
  transform: scale(1.10) !important; /* merged_ui: scale-110 */
}

/* active 底层块（对齐 merged_ui 的 bg-primary shadow-glow） */
.new-nav-sidebar .sidebar-nav-active::after {
  opacity: 1 !important;
  transform: scale(1) !important;
  background: var(--brand-primary) !important;
  box-shadow: var(--shadow-glow) !important;
}

/* active 左侧白条（merged_ui 里的 3px 指示条） */
.new-nav-sidebar .sidebar-nav-active::before {
  content: "" !important;
  position: absolute !important;
  left: -8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 3px !important;
  height: 20px !important;
  background: #ffffff !important;
  border-radius: 0 999px 999px 0 !important;
  box-shadow: var(--shadow-glow) !important;
}

/* tushengtu.html 里 active 项自带一条“写死白条”，会和 ::before 叠加：隐藏它 */
.new-nav-sidebar .sidebar-nav-item > .absolute.left-0.top-1\/2 {
  display: none !important;
}

/* 统一 icon 容器宽度（对齐 merged_ui 的 w-[80px]） */
.new-nav-sidebar .sidebar-nav-item > div:first-child {
  width: 80px !important;
  flex: 0 0 80px !important;
}

/* icon hover 动效（scale + opacity） */
.new-nav-sidebar .sidebar-nav-item .material-icons {
  opacity: 0.70 !important;
  font-size: 22px !important; /* merged_ui: text-[22px] */
  transition: transform 0.3s ease, opacity 0.3s ease !important;
}

.new-nav-sidebar .sidebar-nav-item:hover .material-icons {
  opacity: 1 !important;
  transform: scale(1.10) !important;
}

/* Bottom Section（退出区）：磨砂黑底（merged_ui: bg-sidebar-bg/50 backdrop-blur-md） */
.new-nav-sidebar .border-t.border-white\/5.bg-black\/50 {
  background: rgba(0, 0, 0, 0.50) !important;
  border-top-color: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ============ Top Header (newHeaderInner + pill nav) ============ */
#newHeaderInner.new-nav-header,
.new-nav-header#newHeaderInner {
  background: rgba(255, 255, 255, 0.80) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.03) !important;
  z-index: 1000 !important;
}

/* pill container */
#newHeaderInner .header-pill-nav {
  /* bg-gray-100/60 + border black/[0.03] + inset shadow */
  background: rgba(243, 244, 246, 0.60) !important;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  padding: 6px !important; /* p-1.5 */
  border-radius: 999px !important;
}

/* pill link */
#newHeaderInner .header-pill-link {
  border-radius: 999px !important;
  letter-spacing: 0.05em !important;
  font-weight: 400 !important;
  color: var(--text-sub) !important;
  background: transparent !important;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease !important;
}

#newHeaderInner .header-pill-link .material-icons {
  opacity: 0.30 !important;
  transition: opacity 0.3s ease !important;
}

#newHeaderInner .header-pill-link:hover {
  background: rgba(0, 0, 0, 0.03) !important;
  color: var(--text-main) !important;
}

#newHeaderInner .header-pill-link:hover .material-icons {
  opacity: 1 !important;
}

#newHeaderInner .header-pill-link.is-active {
  background: var(--brand-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.25) !important;
}

#newHeaderInner .header-pill-link.is-active .material-icons {
  opacity: 1 !important;
}

/* active press（对齐 merged_ui 的 active:scale-[0.97]） */
#newHeaderInner .header-pill-link:active {
  transform: scale(0.97) !important;
}

/* top right primary button (充值) - normalize */
#newHeaderInner button[onclick="openRechargeModal()"],
#weveeeeRechargeBtn {
  background: #2d1350 !important;
  color: #ffffff !important;
  box-shadow: var(--ds-shadow-brand) !important;
}

#newHeaderInner button[onclick="openRechargeModal()"]:hover,
#weveeeeRechargeBtn:hover {
  background: #2d1350 !important;
  color: #ffffff !important;
}

/* avatar border */
#userAvatarDropdown > div[onclick="toggleUserDropdown()"] {
  border-color: rgb(var(--primary-rgb) / 0.20) !important;
}

#userAvatarDropdown > div[onclick="toggleUserDropdown()"]:hover {
  border-color: rgb(var(--primary-rgb) / 0.40) !important;
}

/* ============ Responsive Breakpoints ============ */

/* Tablet landscape / small desktop (1024px - 1279px) */
@media (max-width: 1279px) {
  #newHeaderInner .header-pill-link {
    padding: 0 12px !important;
    font-size: 11px !important;
  }

  #newHeaderInner .header-pill-nav {
    padding: 4px !important;
    gap: 2px !important;
  }
}

/* Tablet (768px - 1023px): hide center nav, show mobile menu button */
@media (max-width: 1023px) {
  #newHeaderInner.new-nav-header {
    height: 56px !important;
    padding: 0 12px !important;
  }

  #newSidebar.new-nav-sidebar,
  .new-nav-sidebar#newSidebar,
  .new-nav-sidebar {
    width: 0 !important;
    flex: 0 0 0px !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #newSidebar.new-nav-sidebar.expanded,
  #newSidebar.new-nav-sidebar:hover,
  #newSidebar.new-nav-sidebar:focus-within,
  .new-nav-sidebar.expanded,
  .new-nav-sidebar:hover,
  .new-nav-sidebar:focus-within {
    width: 0 !important;
    flex-basis: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
  #newHeaderInner.new-nav-header {
    height: 52px !important;
    padding: 0 10px !important;
  }

  .user-dropdown-menu {
    width: 200px !important;
    right: -10px !important;
  }
}