/* 
 * Admin Sidebar - Figma Design Implementation
 */

/* Sidebar Container */
.left-side-menu {
  width: 314px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-right: none !important;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04) !important;
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  height: 100vh !important;
  z-index: 1000 !important;
  transition: width 0.3s ease !important;
}

/* Global list-style override for sidebar */
.left-side-menu ul,
.left-side-menu li,
.left-side-menu ul ul,
.left-side-menu ul li {
  list-style: none !important;
  list-style-type: none !important;
}

/* Body padding for sidebar */
body {
  /* padding-left: 314px !important; */
  transition: padding-left 0.3s ease !important;
}

/* Sidebar Toggle Button */
.sidebar-toggle {
  position: fixed !important;
  left: 306px !important;
  /* 314px - 8px */
  top: calc(50vh - 20px) !important;
  /* Center vertically with slight offset for visual balance */
  transform: translateY(-50%) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  z-index: 1000 !important;
  transition: none !important;
  /* No animation */
}

/* Adjust toggle button position when condensed */
body[data-sidebar-size="condensed"] .sidebar-toggle {
  left: 104px !important;
  /* 112px - 8px */
}

.sidebar-toggle img {
  display: block !important;
}

/* Condensed State (using existing app.js functionality) */
body[data-sidebar-size="condensed"] .left-side-menu {
  width: 112px !important;
}

/* Override theme's 70px width with more specific selectors */
body[data-sidebar-size="condensed"] .left-side-menu,
body[data-sidebar-size="condensed"] .left-side-menu.sidebar-icon-menu {
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
}

body[data-sidebar-size="condensed"] .sidebar-toggle {
  transform: translateY(-50%) rotate(180deg) !important;
}

body[data-sidebar-size="condensed"] .user-info,
body[data-sidebar-size="condensed"] .side-nav-link span,
body[data-sidebar-size="condensed"] .menu-arrow,
body[data-sidebar-size="condensed"] .notification-badge,
body[data-sidebar-size="condensed"] .sidebar-brand-text,
body[data-sidebar-size="condensed"] .admin-badge {
  display: none !important;
}

body[data-sidebar-size="condensed"] .sidebar-brand {
  justify-content: center !important;
  padding: 8px !important;
  margin-bottom: 12px !important;
}

body[data-sidebar-size="condensed"] .sidebar-logo {
  width: 24px !important;
  height: 24px !important;
}

body[data-sidebar-size="condensed"] .user-profile-box {
  padding: 32px 24px 24px 24px !important;
}

body[data-sidebar-size="condensed"] .side-nav-link {
  padding: 16px 24px !important;
  justify-content: center !important;
}

body[data-sidebar-size="condensed"] .nav-icon {
  margin-right: 0 !important;
}

body[data-sidebar-size="condensed"] #sidebar-menu {
  padding: 10px 24px !important;
}

/* Update body padding for condensed state */
body[data-sidebar-size="condensed"] {
  /* padding-left: 112px !important; */
}

/* Override theme's condensed state widths */
body[data-sidebar-size="condensed"] .content-page {
  margin-left: 112px !important;
}

body[data-sidebar-size="condensed"] .logo-box {
  width: 112px !important;
}

/* Ensure wrapper adjusts to new width */
body[data-sidebar-size="condensed"] .wrapper {
  /* padding-left: 112px !important; */
}

/* Logo Area - Remove in new design */
.logo-box {
  display: none !important;
}

/* Hide the entire top header bar */
.navbar-custom {
  display: none !important;
}

/* Make content area use full height */
.content-page {
  margin-top: 0 !important;
  margin-left: 314px !important;
  /* Override theme's 240px */
  padding-top: 0 !important;
  min-height: 100vh !important;
}

@media (max-width: 768px) {
  .content-page {
    margin-left: 0px !important;
  }
}

/* Adjust content area margin for condensed sidebar */
body[data-sidebar-size="condensed"] .content-page {
  margin-left: 112px !important;
}

.content {
  padding-top: 20px !important;
}

.logo {
  text-decoration: none !important;
}

.logo:hover {
  text-decoration: none !important;
}

.logo-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  background: #802FFF !important;
  color: white !important;
  border-radius: 10px !important;
  font-size: 24px !important;
  font-weight: 700 !important;
}

.logo-text {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1F1F1F !important;
}

/* User Profile */
.user-profile-box {
  padding: 32px 24px 24px 24px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  position: relative !important;
}

.sidebar-brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  padding: 12px !important;
  background: rgba(128, 47, 255, 0.1) !important;
  border-radius: 8px !important;
  position: relative !important;
}

.sidebar-logo {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
}

.sidebar-brand-text {
  font-size: 16px !important;
  font-weight: 700 !important;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif !important;
  color: #802FFF !important;
  letter-spacing: -0.03em !important;
}

.sidebar-brand .admin-badge {
  background: #FF6B6B !important;
  color: white !important;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 140% !important;
  letter-spacing: 0.3px !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  position: absolute !important;
  top: -8px !important;
  right: -8px !important;
}

.user-profile-box::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 24px !important;
  right: 24px !important;
  height: 1px !important;
  background: #F1F1F1 !important;
}

.user-profile {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 266px !important;
}

.user-avatar {
  width: 56px !important;
  height: 56px !important;
  border-radius: 400px !important;
  background: #F8F6FF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  position: relative !important;
}

.user-avatar img {
  width: 30px !important;
  height: 38px !important;
  object-fit: contain !important;
}

.user-info {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.user-name {
  font-size: 18px !important;
  font-weight: 700 !important;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif !important;
  color: #000 !important;
  margin: 0 !important;
  line-height: 140% !important;
  letter-spacing: -0.03em !important;
}

.user-email {
  font-size: 14px !important;
  font-weight: 400 !important;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif !important;
  color: #5C595F !important;
  margin: 0 !important;
  line-height: 140% !important;
  letter-spacing: -0.03em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Navigation */
#sidebar-menu {
  padding: 8px 24px !important;
}

#side-menu {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Menu Items */
.side-nav-link {
  display: flex !important;
  align-items: center !important;
  padding: 14px 20px !important;
  gap: 12px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: #000 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  position: relative !important;
  line-height: 140% !important;
  letter-spacing: -0.03em !important;
}

.side-nav-link:hover {
  background: rgba(248, 246, 255, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: #802FFF !important;
}

/* Active state with gradient */
.menuitem-active>.side-nav-link {
  background: linear-gradient(93deg, #9F5FF8 0.58%, #802FFF 92.17%) !important;
  color: #FFF !important;
}

/* Make active menu icons white */
.menuitem-active>.side-nav-link .nav-icon {
  filter: brightness(0) invert(1) !important;
}

/* Notification Badge */
.notification-badge {
  display: flex !important;
  padding: 0px 10px !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  border-radius: 4px !important;
  background: rgba(128, 47, 255, 0.20) !important;
  margin-left: auto !important;
}

.notification-badge span {
  color: #802FFF !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif !important;
  line-height: 140% !important;
  letter-spacing: -0.03em !important;
}

/* Icons */
.nav-icon {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
}

.side-nav-link:hover .nav-icon {
  color: #802FFF !important;
}

/* Menu Arrow */
.menu-arrow {
  width: 16px !important;
  height: 16px !important;
  margin-left: auto !important;
  transition: transform 0.2s ease !important;
  color: #A9A9A9 !important;
}

/* Menu arrow for span elements - use background image */
span.menu-arrow {
  content: "" !important;
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  background-image: url('/assets/images/admin-icons/arrow-down.svg') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  position: absolute !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

a.collapsed .menu-arrow,
a.collapsed span.menu-arrow {
  transform: translateY(-50%) rotate(-90deg) !important;
}

/* Submenu */
.side-nav-second-level {
  padding-left: 0 !important;
  list-style: none !important;
  margin-top: 8px !important;
  position: relative !important;
  z-index: 1002 !important;
  /* Higher than toggle button (1001) */
}

.side-nav-second-level li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.side-nav-second-level a {
  display: block !important;
  padding: 8px 16px 8px 52px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif !important;
  color: #5C595F !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  letter-spacing: -0.03em !important;
  line-height: 140% !important;
}

.side-nav-second-level a:hover {
  background: rgba(248, 246, 255, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: #802FFF !important;
}

/* Only active submenu item should be purple */
.side-nav-second-level .menuitem-active>a,
.side-nav-second-level a.active {
  color: #802FFF !important;
  background: #F8F6FF !important;
}

/* Override any other CSS that might be affecting submenu colors */
.left-side-menu .side-nav-second-level a,
.left-side-menu .nav-second-level li a {
  color: #5C595F !important;
}

/* Override any list-style that might be applied by theme CSS */
.left-side-menu .side-nav-second-level,
.left-side-menu .nav-second-level,
.left-side-menu .side-nav-second-level li,
.left-side-menu .nav-second-level li {
  list-style: none !important;
}

.left-side-menu .side-nav-second-level a:hover,
.left-side-menu .nav-second-level li a:hover {
  color: #802FFF !important;
  background: #F8F6FF !important;
}

.left-side-menu .side-nav-second-level .menuitem-active>a,
.left-side-menu .side-nav-second-level a.active,
.left-side-menu .nav-second-level li.active>a {
  color: #802FFF !important;
  background: #F8F6FF !important;
}

/* Final override to ensure 112px width (placed last for highest specificity) */
body[data-sidebar-size="condensed"] div.left-side-menu {
  width: 112px !important;
}

/* Hide submenu tooltip/popover for items without submenus in condensed mode */
body[data-sidebar-size="condensed"] #side-menu>li:not(.has-submenu):hover>.collapse,
body[data-sidebar-size="condensed"] #side-menu>li:hover>.collapse:empty,
body[data-sidebar-size="condensed"] #side-menu>li:hover>.collapse:not(.show) {
  display: none !important;
}

/* Only show submenu popover for items that have actual submenus */
body[data-sidebar-size="condensed"] #side-menu>li.has-submenu:hover>.collapse.show {
  display: block !important;
  position: absolute !important;
  left: 100% !important;
  top: 0 !important;
  width: 220px !important;
  background: #fff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
  border-radius: 12px !important;
  padding: 12px 0 !important;
  z-index: 1003 !important;
  border: 1px solid rgba(128, 47, 255, 0.1) !important;
  animation: slideInRight 0.2s ease-out !important;
}

/* Animation for submenu popover */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Enhanced hover effects for main menu items */
body[data-sidebar-size="condensed"] #side-menu>li:hover .side-nav-link {
  background: #F8F6FF !important;
  border-radius: 8px !important;
  transform: scale(1.05) !important;
  transition: all 0.2s ease !important;
}

/* Hover effect for main menu items with submenus */
body[data-sidebar-size="condensed"] #side-menu>li.has-submenu:hover .side-nav-link {
  background: #F8F6FF !important;
  border-radius: 8px !important;
  transform: scale(1.05) !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(128, 47, 255, 0.2) !important;
}

/* Hover effect for main menu items without submenus - compact size */
body[data-sidebar-size="condensed"] #side-menu>li:not(.has-submenu):hover .side-nav-link {
  background: #F8F6FF !important;
  border-radius: 8px !important;
  transform: none !important;
  transition: all 0.2s ease !important;
  width: 64px !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.side-nav-second-level .side-nav-link:hover {
  padding-left: 60px !important;
}

/* Enhanced submenu popover styles */
body[data-sidebar-size="condensed"] #side-menu>li.has-submenu:hover>.collapse.show .nav-second-level {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  list-style: none !important;
}

body[data-sidebar-size="condensed"] #side-menu>li.has-submenu:hover>.collapse.show .nav-second-level li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body[data-sidebar-size="condensed"] #side-menu>li.has-submenu:hover>.collapse.show .nav-second-level a {
  padding: 12px 20px !important;
  color: #5C595F !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif !important;
  border-radius: 0 !important;
  transition: all 0.2s ease !important;
  display: block !important;
  text-decoration: none !important;
  letter-spacing: -0.03em !important;
  line-height: 140% !important;
}

body[data-sidebar-size="condensed"] #side-menu>li.has-submenu:hover>.collapse.show .nav-second-level a:hover {
  background: rgba(128, 47, 255, 0.1) !important;
  color: #802FFF !important;
  font-weight: 600 !important;
  padding-left: 24px !important;
}

body[data-sidebar-size="condensed"] #side-menu>li.has-submenu:hover>.collapse.show .nav-second-level .menuitem-active>a {
  background: rgba(128, 47, 255, 0.15) !important;
  color: #802FFF !important;
  font-weight: 600 !important;
  padding-left: 24px !important;
}

/* Collapse Arrow */
.menu-arrow {
  margin-left: auto !important;
  transition: transform 0.2s ease !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

.mm-show>.has-arrow>.menu-arrow,
.mm-show>.has-arrow>span.menu-arrow,
.collapse.show+.menu-arrow,
[aria-expanded="true"] .menu-arrow {
  transform: rotate(90deg) !important;
}

/* For span.menu-arrow with translateY */
.mm-show>.has-arrow>span.menu-arrow,
[aria-expanded="true"] span.menu-arrow {
  transform: translateY(-50%) rotate(90deg) !important;
}

/* User Info Section */
.sidebar-user {
  padding: 20px !important;
  border-top: 1px solid #E7E7EE !important;
  background: #FAFAFD !important;
}

.sidebar-user-info {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.sidebar-user-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: #F8F6FF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #802FFF !important;
  font-weight: 700 !important;
}

.sidebar-user-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif !important;
  color: #5C595F !important;
  margin-bottom: 2px !important;
  letter-spacing: -0.03em !important;
}

.sidebar-user-role {
  font-size: 12px !important;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif !important;
  color: #999 !important;
  letter-spacing: -0.03em !important;
}

/* Scrollbar */
.slimscroll-menu::-webkit-scrollbar {
  width: 6px !important;
}

.slimscroll-menu::-webkit-scrollbar-track {
  background: #F1F1F1 !important;
}

.slimscroll-menu::-webkit-scrollbar-thumb {
  background: #DADADA !important;
  border-radius: 3px !important;
}

.slimscroll-menu::-webkit-scrollbar-thumb:hover {
  background: #A9A9A9 !important;
}

/* Mobile Toggle */
.button-menu-mobile {
  background: #FFFFFF !important;
  border: 1px solid #E7E7EE !important;
  color: #5C595F !important;
}

.button-menu-mobile:hover {
  background: #F8F6FF !important;
  border-color: #802FFF !important;
  color: #802FFF !important;
}

/* Collapsed State */
@media (min-width: 992px) {
  body[data-sidebar-size="condensed"] .left-side-menu {
    width: 70px !important;
  }

  body[data-sidebar-size="condensed"] .side-nav-link {
    padding: 12px !important;
    justify-content: center !important;
  }

  body[data-sidebar-size="condensed"] .side-nav-link span,
  body[data-sidebar-size="condensed"] .menu-arrow,
  body[data-sidebar-size="condensed"] .side-nav-title {
    display: none !important;
  }

  body[data-sidebar-size="condensed"] .side-nav-link i {
    margin: 0 !important;
    font-size: 22px !important;
  }
}

/* Dark Mode Override - Keep Light Theme */
[data-bs-theme="dark"] .left-side-menu {
  background: #FFFFFF !important;
}

[data-bs-theme="dark"] .side-nav-link {
  color: #5C595F !important;
}

[data-bs-theme="dark"] .side-nav-link:hover,
[data-bs-theme="dark"] .side-nav-link.active {
  background: #F8F6FF !important;
  color: #802FFF !important;
}