/*
  Polimento visual isolado da sidebar.
  Mantem o logout React existente e ajusta apenas alinhamento, scroll e acabamento.
*/

html body nav.sidebar-navigation.auto-premium-sidebar {
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

html body nav.sidebar-navigation.auto-premium-sidebar > div:first-child.auto-sidebar-body {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  padding: 18px 14px 12px !important;
}

html body nav.sidebar-navigation.auto-premium-sidebar .auto-sidebar-body > ul {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding-right: 2px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(153, 246, 228, .34) transparent !important;
}

html body nav.sidebar-navigation.auto-premium-sidebar .auto-sidebar-body > ul::-webkit-scrollbar {
  width: 6px !important;
}

html body nav.sidebar-navigation.auto-premium-sidebar .auto-sidebar-body > ul::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: rgba(153, 246, 228, .28) !important;
}

html.auto-premium-desktop body nav.sidebar-navigation.auto-premium-sidebar .auto-premium-brand {
  min-height: 64px !important;
  margin-bottom: 16px !important;
  padding: 10px 54px 10px 10px !important;
  border-radius: 17px !important;
}

html.auto-premium-desktop body nav.sidebar-navigation.auto-premium-sidebar #desktop-menu-toggle {
  top: 33px !important;
  right: 24px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 11px !important;
  background: rgba(6, 43, 51, .48) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

html.auto-premium-menu-collapsed body nav.sidebar-navigation.auto-premium-sidebar .auto-premium-brand {
  min-height: 96px !important;
  margin-bottom: 16px !important;
  padding: 8px !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

html.auto-premium-menu-collapsed body nav.sidebar-navigation.auto-premium-sidebar .auto-premium-mark {
  margin-top: 2px !important;
}

html.auto-premium-menu-collapsed body nav.sidebar-navigation.auto-premium-sidebar #desktop-menu-toggle {
  top: 76px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

html.auto-premium-menu-collapsed body nav.sidebar-navigation.auto-premium-sidebar #desktop-menu-toggle:hover {
  transform: translateX(-50%) translateY(-1px) !important;
}

html body nav.sidebar-navigation.auto-premium-sidebar > div:last-child {
  flex: 0 0 auto !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 5 !important;
  margin-top: auto !important;
  padding: 10px 14px calc(14px + env(safe-area-inset-bottom)) !important;
  border-top: 1px solid rgba(153, 246, 228, .14) !important;
  background:
    linear-gradient(180deg, rgba(6, 43, 51, .82), rgba(5, 33, 38, .98)) !important;
  box-shadow: 0 -12px 26px rgba(2, 8, 23, .14) !important;
}

html body nav.sidebar-navigation.auto-premium-sidebar .auto-sidebar-logout-button,
html body nav.sidebar-navigation.auto-premium-sidebar .auto-mobile-logout {
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 13px !important;
  gap: 12px !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  color: rgba(226, 252, 245, .82) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body nav.sidebar-navigation.auto-premium-sidebar .auto-sidebar-logout-button:hover,
html body nav.sidebar-navigation.auto-premium-sidebar .auto-mobile-logout:hover {
  color: #ffffff !important;
  border-color: rgba(248, 113, 113, .25) !important;
  background: rgba(127, 29, 29, .18) !important;
  box-shadow: 0 10px 24px rgba(2, 8, 23, .16) !important;
}

html body nav.sidebar-navigation.auto-premium-sidebar .auto-sidebar-logout-button svg,
html body nav.sidebar-navigation.auto-premium-sidebar .auto-mobile-logout svg {
  color: #fecaca !important;
}

html.auto-premium-menu-collapsed body nav.sidebar-navigation.auto-premium-sidebar > div:last-child {
  padding: 10px 14px 16px !important;
}

html.auto-premium-menu-collapsed body nav.sidebar-navigation.auto-premium-sidebar .auto-sidebar-logout-button,
html.auto-premium-menu-collapsed body nav.sidebar-navigation.auto-premium-sidebar .auto-mobile-logout {
  justify-content: center !important;
  width: 48px !important;
  min-width: 48px !important;
  padding: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html.auto-premium-mobile body nav.sidebar-navigation.auto-premium-sidebar > div:first-child.auto-sidebar-body {
  max-height: none !important;
  padding: 18px 14px 10px !important;
}

html.auto-premium-mobile body nav.sidebar-navigation.auto-premium-sidebar .auto-sidebar-body > ul {
  max-height: none !important;
}

html.auto-premium-mobile body nav.sidebar-navigation.auto-premium-sidebar > div:last-child {
  position: sticky !important;
  bottom: 0 !important;
  padding: 10px 14px calc(14px + env(safe-area-inset-bottom)) !important;
}

html.auto-premium-mobile body nav.sidebar-navigation.auto-premium-sidebar .auto-sidebar-logout-button,
html.auto-premium-mobile body nav.sidebar-navigation.auto-premium-sidebar .auto-mobile-logout {
  width: 100% !important;
  min-width: 0 !important;
  justify-content: flex-start !important;
  padding: 0 13px !important;
}