<script setup>
import { toast } from 'bulma-toast'
import menusLag from './assets/langs/menus.js'

// Use the centralized role menu composable
const { getMenuType } = useRoleMenu()

// Get the menu type immediately during setup
const defaultSideBarMenu = ref(getMenuType())

const props = defineProps({
  menus: Array
})

const router = useRouter()
const url = useRequestURL()
const { isDark } = useTheme()

const sideBar = useSideBar()
const sideBarCollapsed = useSideBarCollapsed()
const sideBarScroll = useSideBarScroll()
const tabs = useTabs()
const activeMenu = useActiveMenu()
const activeSubMenu = useActiveSubMenu()
const activeSubChildMenu = useActiveSubChildMenu()
const activeSave = useActiveSave()

const getMenus = ref([])
const lang = ref('en-US')
const getLang = ref(null)
onMounted(() => {
  if(document.documentElement.getAttribute('lang')) {
    lang.value = document.documentElement.getAttribute('lang')
    getLang.value = menusLag(lang.value)
    if(getLang.value) {
      getMenus.value = setMenus(getLang.value)
    }
  }
})

const setMenus = (menusLangArg) => {
  //console.log(menusLangArg)
  return props.menus.map(item => {
    item.translatedText = menusLangArg[item.value]
    if(item.link && item.link?.endsWith(url.pathname.replace(/\/create|\/add|\/\d+\/edit|\/\d+\/view|\/\d+\/print|\/\d+\/duplicate/g, ''))) {
      item.active = item.link.endsWith(url.pathname.replace(/\/create|\/add|\/\d+\/edit|\/\d+\/view|\/\d+\/print|\/\d+\/duplicate/g, ''))
      if(item.child) {
        const childrenActive = item.children.map(i => {
          i.translatedText = menusLangArg[i.value]
          if(i.child) {
            const subChildredActive = i.children.map(it => {
              it.translatedText = menusLangArg[it.value]
              if(it.link && it.link?.endsWith(url.pathname.replace(/\/create|\/add|\/\d+\/edit|\/\d+\/view|\/\d+\/print|\/\d+\/duplicate/g, ''))) {
                it.active = it.link.endsWith(url.pathname.replace(/\/create|\/add|\/\d+\/edit|\/\d+\/view|\/\d+\/print|\/\d+\/duplicate/g, ''))
              } else {
                it.active = false
              }
              return it
            })

            i.children = subChildredActive
            i.active = subChildredActive.filter(it => it.link?.endsWith(url.pathname.replace(/\/create|\/add|\/\d+\/edit|\/\d+\/view|\/\d+\/print|\/\d+\/duplicate/g, ''))).length >= 1 ? true : false
          } else {
            if(i.link && i.link?.endsWith(url.pathname.replace(/\/create|\/add|\/\d+\/edit|\/\d+\/view|\/\d+\/print|\/\d+\/duplicate/g, ''))) {
              i.active = i.link.endsWith(url.pathname.replace(/\/create|\/add|\/\d+\/edit|\/\d+\/view|\/\d+\/print|\/\d+\/duplicate/g, ''))
            } else {
              i.active = false
            }
          }
          return i
        })
        item.children = childrenActive

        item.active = childrenActive.filter(i => i.link?.endsWith(url.pathname.replace(/\/create|\/add|\/\d+\/edit|\/\d+\/view|\/\d+\/print|\/\d+\/duplicate/g, ''))).length >= 1 ? true : false
      }
    } else {
      item.active = false
      if(item.child) {
        const newChildren = item.children.map(i => {
          i.translatedText = menusLangArg[i.value]
          if(i.child) {
            const subChildren = i.children.map(it => {
              it.translatedText = menusLangArg[it.value]
              return it
            })
            i.children = subChildren
          }
          return i
        })
        item.children = newChildren
      }
    }
    return item
  })
}

const openMenu = (e, menu) => {
  if(activeSave.value) {
    toast({
      message: getLang.value?.['save_warning'] || 'Save button is active, please submit the data before leaving!',
      type: 'is-warning',
      duration: 2000
    })
  } else {
    // In collapsed mode, open flyout for parent menus
    if (sideBarCollapsed.value) {
      if (menu.child) {
        openFlyout(e, menu)
        return
      } else {
        closeFlyout()
        openMenuHandler(menu)
        return
      }
    }

    // Check if we're closing or opening
    const isClosing = e.target.parentElement.classList.contains('active')

    // Close all other root-level menus (accordion behavior)
    if (!isClosing && menu.child) {
      getMenus.value.forEach(m => {
        if (m.value !== menu.value && m.child) {
          m.active = false
          // Also remove active class from DOM
          const menuElement = document.querySelector(`li[data-menu-value="${m.value}"]`)
          if (menuElement) {
            menuElement.classList.remove('active')
          }
        }
      })
    }

    // Toggle current menu
    if(e.target.parentElement.classList.contains('active')) {
      e.target.parentElement.classList.remove('active')
    } else {
      e.target.parentElement.classList.add('active')
    }
    activeMenu.value = menu?.value || ''
    openMenuHandler(menu)
  }
}
const openSubMenu = (e, menu) => {
  if(activeSave.value) {
    toast({
      message: getLang.value?.['save_warning'] || 'Save button is active, please submit the data before leaving!',
      type: 'is-warning',
      duration: 2000
    })
  } else {
    if(e.target.classList.contains('active')) {
      e.target.classList.remove('active')
      /*if(e.target.parentElement.parentElement.classList.contains('active')) {
        e.target.parentElement.parentElement.classList.remove('active')
      }*/
      if(e.target.nextElementSibling.classList.contains('active') && e.target.nextElementSibling.nodeName === 'DIV') {
        e.target.nextElementSibling.classList.remove('active')
      }
    } else {
      e.target.classList.add('active')
      /*if(!e.target.parentElement.parentElement.classList.contains('active')) {
        e.target.parentElement.parentElement.classList.add('active')
      }*/
      if(!e.target.nextElementSibling.classList.contains('active') && e.target.nextElementSibling.nodeName === 'DIV') {
        e.target.nextElementSibling.classList.add('active')
      }
    }
    activeSubMenu.value = menu?.value || ''
    openMenuHandler(menu)
  }
}
const openSubChildMenu = (e, menu) => {
  if(activeSave.value) {
    toast({
      message: getLang.value?.['save_warning'] || 'Save button is active, please submit the data before leaving!',
      type: 'is-warning',
      duration: 2000
    })
  } else {
    if(e.target.classList.contains('active')) {
      e.target.classList.remove('active')
      /*if(e.target.parentElement.parentElement.classList.contains('active')) {
        e.target.parentElement.parentElement.classList.remove('active')

        if(e.target.parentElement.parentElement.parentElement.classList.contains('active')) {
          e.target.parentElement.parentElement.parentElement.classList.remove('active')
        }
      }*/
    } else {
      e.target.classList.add('active')
      /*if(!e.target.parentElement.parentElement.classList.contains('active')) {
        e.target.parentElement.parentElement.classList.add('active')

        if(!e.target.parentElement.parentElement.parentElement.classList.contains('active')) {
          e.target.parentElement.parentElement.parentElement.classList.add('active')
        }
      }*/
    }
    activeSubChildMenu.value = menu?.value || ''
    openMenuHandler(menu)
  }
}
const openMenuHandler = (menu) => {
  if(menu.child) {
    menu.active = !menu.active
  } else {
    tabs.value.map(item => {
      item.active = false
      return item
    })
    if(tabs.value.filter(i => i.link === menu.link).length >= 1) {
      const tabIndex = tabs.value.findIndex(i => i.link === menu.link)
      tabs.value[tabIndex].active = true
      router.push(menu.link)
      sideBar.value = false
    } else {
      tabs.value.push({link: menu.link, text: menu.text, active: true})
      localStorage.setItem('tabs', JSON.stringify(tabs.value))
      router.push(menu.link)
      sideBar.value = false
    }
  }
}

const showSideBar = () => {
  sideBar.value = !sideBar.value
}

const toggleCollapse = () => {
  sideBarCollapsed.value = !sideBarCollapsed.value
  localStorage.setItem('logship_sidebar_collapsed', sideBarCollapsed.value ? '1' : '0')
  closeFlyout()
}

onMounted(() => {
  const saved = localStorage.getItem('logship_sidebar_collapsed')
  if (saved === '1') {
    sideBarCollapsed.value = true
  }
})

// Flyout menu state for collapsed sidebar
const flyoutMenu = ref(null)
const flyoutTop = ref(0)
const flyoutSubMenu = ref({})

const openFlyout = (e, menu) => {
  if (!menu.child) return
  if (flyoutMenu.value?.value === menu.value) {
    closeFlyout()
    return
  }
  const iconEl = e.target.closest('.dropdown') || e.target
  const rect = iconEl.getBoundingClientRect()
  flyoutTop.value = rect.top
  flyoutMenu.value = menu
  flyoutSubMenu.value = {}
}

const closeFlyout = () => {
  flyoutMenu.value = null
  flyoutSubMenu.value = {}
}

const toggleFlyoutSub = (child) => {
  if (flyoutSubMenu.value[child.value]) {
    delete flyoutSubMenu.value[child.value]
  } else {
    flyoutSubMenu.value[child.value] = true
  }
}

const flyoutNavigate = (menu) => {
  openMenuHandler(menu)
  closeFlyout()
}

const onClickOutsideFlyout = (e) => {
  if (!flyoutMenu.value) return
  const flyoutEl = document.querySelector('.flyout-panel')
  const sidebarEl = document.getElementById('sidebar')
  if (flyoutEl && !flyoutEl.contains(e.target) && sidebarEl && !sidebarEl.contains(e.target)) {
    closeFlyout()
  }
}

onMounted(() => {
  document.addEventListener('click', onClickOutsideFlyout)
})
onUnmounted(() => {
  document.removeEventListener('click', onClickOutsideFlyout)
})

const sideBarRef = ref(null)
const scrollEndSideBar = (e) => {
  sideBarScroll.value = e.target.scrollTop ?? e.target.clientHeight
  //console.log(e.target)
  //console.log(e.target.scrollTop)
  //console.log(e.target.scrollHeight)
  //console.log(e.target.clientHeight)
}
onMounted(() => {
  if(sideBarScroll.value && sideBarRef.value) {
    sideBarRef.value.scrollTo(0, sideBarScroll.value || 0)
    //console.log(sideBarScroll.value)
    //console.log(sideBarRef.value)
  }
})

const searchSideBar = ref('')

// Fast menu search that filters the tree structure
const filteredMenus = computed(() => {
  if (!searchSideBar.value || !getMenus.value.length) {
    return getMenus.value
  }

  const searchTerm = searchSideBar.value.toLowerCase()

  const filterMenu = (menu) => {
    // Check if current menu matches
    const menuMatches = menu.translatedText?.toLowerCase()?.includes(searchTerm) ||
                        menu.text?.toLowerCase()?.includes(searchTerm)

    // If menu has no children, return it if it matches
    if (!menu.child || !menu.children) {
      return menuMatches ? menu : null
    }

    // Filter children recursively
    const filteredChildren = menu.children
      .map(child => filterMenu(child))
      .filter(child => child !== null)

    // Return menu if it matches or has matching children
    if (menuMatches || filteredChildren.length > 0) {
      return {
        ...menu,
        children: filteredChildren.length > 0 ? filteredChildren : menu.children,
        active: filteredChildren.length > 0 ? true : menu.active // Auto-expand if has matching children
      }
    }

    return null
  }

  return getMenus.value
    .map(menu => filterMenu(menu))
    .filter(menu => menu !== null)
})
</script>

<template>
  <aside id="sidebar" :class="{active: sideBar, collapsed: sideBarCollapsed}" ref="sideBarRef" @scrollend="$event => scrollEndSideBar($event)">
    <div class="logo">
      <img
        v-if="!sideBarCollapsed"
        :src="isDark ? '/assets/logship-logo-dark.png' : '/assets/logship-logo-light.png'"
        alt="LogShip"
        class="logo-full"
      />
      <img v-else src="/assets/logship-mark.png" alt="LogShip" class="logo-mark" />
    </div>
    <div class="collapse-toggle" @click="toggleCollapse" :title="sideBarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'">
      <svg v-if="!sideBarCollapsed" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="11 17 6 12 11 7"></polyline>
        <polyline points="18 17 13 12 18 7"></polyline>
      </svg>
      <svg v-else xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="13 17 18 12 13 7"></polyline>
        <polyline points="6 17 11 12 6 7"></polyline>
      </svg>
    </div>
    <div class="search" v-show="!sideBarCollapsed">
      <div class="group w-100pct" :class="activeSave ? 'pointerEvents-none opacity-0.6' : ''">
        <input
          type="search"
          v-model="searchSideBar"
          class="input groupItem"
          :placeholder="getLang?.['search_menu'] || 'Search menu...'"
        />
        <button type="button" class="button groupItem">
          <i class="pointerEvents-none menu-icon tf-icons ti ti-search fg-hexfff"></i>
        </button>
      </div>
    </div>
    <ul>
<!--      Info: {{defaultSideBarMenu}}-->
<!--      <span v-if="defaultSideBarMenu == 'a'">Admin Menu</span>-->
<!--      <span v-else-if="defaultSideBarMenu == 'b'">Fulfillment Admin Menu</span>-->
<!--      <span v-else-if="defaultSideBarMenu == 'c'">Fulfillment Customer Menu</span>-->
<!--      <span v-else>SideBarMenu - Unallocated</span>-->

      <template v-for="(menu, index) in filteredMenus" :key="index">
        <li v-if="menu.menu === false" class="menuTitle">
          <h5 v-if="!sideBarCollapsed">{{ menu.translatedText }}</h5>
          <hr v-else class="menu-divider" />
        </li>
        <li v-else :class="{active: menu.active || activeMenu === menu.value || menu.children.filter(i => i.link?.endsWith(url.pathname.replace(/\/create|\/add|\/\d+\/edit|\/\d+\/view|\/\d+\/print|\/\d+\/duplicate/g, ''))).length >= 1 || menu.children.filter(item => (item?.children?.filter(i => i?.link?.endsWith(url.pathname.replace(/\/create|\/add|\/\d+\/edit|\/\d+\/view|\/\d+\/print|\/\d+\/duplicate/g, '')))?.length || 0) >= 1).length >= 1}" :data-menu-value="menu.value">
          <a class="dropdown" href="javascript:void(0)" @click.self="openMenu($event, menu)" :title="sideBarCollapsed ? (menu.translatedText || menu.text) : undefined">

              <div class="item" @click="sideBarCollapsed ? openMenu($event, menu) : null">
                <i class="pointerEvents-none" :class="menu.icon"></i>

                <span v-show="!sideBarCollapsed">{{ menu.translatedText || menu.text }}</span>
              </div>

              <div v-if="menu.child && !sideBarCollapsed" class="arrow">
                <svg class="pointerEvents-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
                  <path
                    d="M285.5 273L91.1 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.7-22.7c-9.4-9.4-9.4-24.5 0-33.9L188.5 256 34.5 101.3c-9.3-9.4-9.3-24.5 0-33.9l22.7-22.7c9.4-9.4 24.6-9.4 33.9 0L285.5 239c9.4 9.4 9.4 24.6 0 33.9z" />
                </svg>
              </div>
          </a>

          <div v-if="menu.child && !sideBarCollapsed" class="dropdown-container">
            <template v-for="(child, ind) in menu.children" :key="ind">
              <a href="javascript:void(0)" @click.self="openSubMenu($event, child)" :class="{active: child.active || activeSubMenu === child.value || (child?.children?.filter(i => i?.link?.endsWith(url.pathname.replace(/\/create|\/add|\/\d+\/edit|\/\d+\/view|\/\d+\/print|\/\d+\/duplicate/g, '')))?.length || 0) >= 1 || child.link?.endsWith(url.pathname.replace(/\/create|\/add|\/\d+\/edit|\/\d+\/view|\/\d+\/print|\/\d+\/duplicate/g, ''))}">
                <div class="w-100pct d-flex justify-between fgInheritImportant pointerEvents-none">
                  <span class="fgInheritImportant pointerEvents-none">{{ child.translatedText || child.text }}</span>
                  <span v-if="child.child" class="subArrow pointerEvents-none">
                    <svg class="pointerEvents-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
                      <path
                        d="M285.5 273L91.1 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.7-22.7c-9.4-9.4-9.4-24.5 0-33.9L188.5 256 34.5 101.3c-9.3-9.4-9.3-24.5 0-33.9l22.7-22.7c9.4-9.4 24.6-9.4 33.9 0L285.5 239c9.4 9.4 9.4 24.6 0 33.9z" />
                    </svg>
                  </span>
                </div>
              </a>
              <div class="children-container" :class="{active: (child.active || activeSubMenu === child.value || (child?.children?.filter(i => i?.link?.endsWith(url.pathname.replace(/\/create|\/add|\/\d+\/edit|\/\d+\/view|\/\d+\/print|\/\d+\/duplicate/g, '')))?.length || 0) >= 1 || child.link?.endsWith(url.pathname.replace(/\/create|\/add|\/\d+\/edit|\/\d+\/view|\/\d+\/print|\/\d+\/duplicate/g, ''))) && child.child}">
                <a v-for="(sub, inx) in child.children" :key="inx" href="javascript:void(0)" @click.self="openSubChildMenu($event, sub)" :class="{active: sub.active || activeSubChildMenu === sub.value || sub.link?.endsWith(url.pathname.replace(/\/create|\/add|\/\d+\/edit|\/\d+\/view|\/\d+\/print|\/\d+\/duplicate/g, ''))}" style="justify-content: flex-start;">
                  <span class="tf-icon ti ti-chevron-right ti-sm me-1 cursor-pointer"></span> {{ sub.translatedText || sub.text }}
                </a>
              </div>
            </template>
          </div>
        </li>
      </template>
    </ul>

    <div id="close" @click="showSideBar">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512" class="pointerEvents-none">
        <path
          d="M242.7 256l100.1-100.1c12.3-12.3 12.3-32.2 0-44.5l-22.2-22.2c-12.3-12.3-32.2-12.3-44.5 0L176 189.3 75.9 89.2c-12.3-12.3-32.2-12.3-44.5 0L9.2 111.5c-12.3 12.3-12.3 32.2 0 44.5L109.3 256 9.2 356.1c-12.3 12.3-12.3 32.2 0 44.5l22.2 22.2c12.3 12.3 32.2 12.3 44.5 0L176 322.7l100.1 100.1c12.3 12.3 32.2 12.3 44.5 0l22.2-22.2c12.3-12.3 12.3-32.2 0-44.5L242.7 256z" />
      </svg>
    </div>
  </aside>

  <!-- Flyout panel for collapsed sidebar -->
  <Teleport to="body">
    <div v-if="sideBarCollapsed && flyoutMenu" class="flyout-panel" :style="{ top: flyoutTop + 'px' }">
      <div class="flyout-header">
        <i :class="flyoutMenu.icon" class="flyout-header-icon"></i>
        <span>{{ flyoutMenu.translatedText || flyoutMenu.text }}</span>
      </div>
      <div class="flyout-body">
        <template v-for="(child, ind) in flyoutMenu.children" :key="ind">
          <a
            href="javascript:void(0)"
            class="flyout-item"
            :class="{ active: child.active || child.link?.endsWith(url.pathname.replace(/\/create|\/add|\/\d+\/edit|\/\d+\/view|\/\d+\/print|\/\d+\/duplicate/g, '')), open: flyoutSubMenu[child.value] }"
            @click="child.child ? toggleFlyoutSub(child) : flyoutNavigate(child)"
          >
            <span>{{ child.translatedText || child.text }}</span>
            <svg v-if="child.child" class="flyout-arrow" :class="{ rotated: flyoutSubMenu[child.value] }" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 320 512">
              <path d="M285.5 273L91.1 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.7-22.7c-9.4-9.4-9.4-24.5 0-33.9L188.5 256 34.5 101.3c-9.3-9.4-9.3-24.5 0-33.9l22.7-22.7c9.4-9.4 24.6-9.4 33.9 0L285.5 239c9.4 9.4 9.4 24.6 0 33.9z" />
            </svg>
          </a>
          <div v-if="child.child && flyoutSubMenu[child.value]" class="flyout-sub">
            <a
              v-for="(sub, inx) in child.children"
              :key="inx"
              href="javascript:void(0)"
              class="flyout-item flyout-sub-item"
              :class="{ active: sub.active || sub.link?.endsWith(url.pathname.replace(/\/create|\/add|\/\d+\/edit|\/\d+\/view|\/\d+\/print|\/\d+\/duplicate/g, '')) }"
              @click="flyoutNavigate(sub)"
            >
              <span class="tf-icon ti ti-chevron-right ti-sm me-1"></span>
              <span>{{ sub.translatedText || sub.text }}</span>
            </a>
          </div>
        </template>
      </div>
    </div>
  </Teleport>

  <Teleport to="body">
    <div id="overlay" class="overlay" :class="{active: sideBar}" @click="showSideBar"></div>
  </Teleport>
</template>

<style scoped>
/* Sidebar Theming */
aside#sidebar {
  background-color: var(--theme-sidebar-bg);
  border-right-color: var(--theme-sidebar-border);
  transition: background-color 0.3s ease;
}

aside#sidebar .logo {
  background-color: var(--theme-sidebar-bg);
  color: var(--theme-text-primary);
}

aside#sidebar .logo .logo-full {
  display: block;
  height: 30px;
  width: auto;
  margin: 0 auto;
}

aside#sidebar .logo .logo-mark {
  display: block;
  width: 30px;
  height: auto;
  margin: 0 auto;
}

aside#sidebar .search .input {
  background-color: var(--theme-input-bg);
  color: var(--theme-text-primary);
  border-color: var(--theme-input-border);
}

aside#sidebar .search .input::placeholder {
  color: var(--theme-input-placeholder);
}

aside#sidebar ul li.menuTitle h5 {
  color: var(--theme-text-secondary);
}

aside#sidebar ul li:not(.menuTitle):not(.active) {
  background-color: var(--theme-sidebar-bg);
}

aside#sidebar ul li:not(.menuTitle) span {
  color: var(--theme-sidebar-text);
}

aside#sidebar ul li:not(.menuTitle) .dropdown:hover {
  background-color: var(--theme-sidebar-hover);
}

aside#sidebar ul li:not(.menuTitle).active .dropdown {
  background-color: var(--theme-sidebar-active);
}

aside#sidebar ul li:not(.menuTitle).active .dropdown span,
aside#sidebar ul li:not(.menuTitle).active .dropdown i {
  color: var(--theme-primary);
}

aside#sidebar svg path {
  fill: var(--theme-sidebar-text);
}

aside#sidebar ul li:not(.menuTitle) .dropdown:hover svg path,
aside#sidebar ul li:not(.menuTitle) .dropdown:hover span {
  fill: var(--theme-text-inverse);
  color: var(--theme-text-inverse);
}

aside#sidebar ul li:not(.menuTitle).active .dropdown svg path {
  fill: var(--theme-primary);
}

aside#sidebar ul li:not(.menuTitle) .dropdown-container > a,
aside#sidebar ul li:not(.menuTitle) .children-container > a {
  color: var(--theme-sidebar-text);
}

aside#sidebar ul li:not(.menuTitle) .dropdown-container > a:hover,
aside#sidebar ul li:not(.menuTitle) .children-container > a:hover {
  background-color: var(--theme-sidebar-hover);
  color: var(--theme-text-inverse);
}

aside#sidebar ul li:not(.menuTitle) .dropdown-container > a.active,
aside#sidebar ul li:not(.menuTitle) .children-container > a.active {
  color: var(--theme-primary);
}

/* Collapse toggle button */
.collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0.5rem;
  margin: 0 0.5rem 0.5rem;
  border-radius: 6px;
  color: var(--theme-sidebar-text);
  transition: background-color 0.2s ease;
}
.collapse-toggle:hover {
  background-color: var(--theme-sidebar-hover);
  color: var(--theme-text-inverse);
}

/* Menu divider for collapsed section titles */
.menu-divider {
  margin: 0.5rem 0.75rem;
  border: none;
  border-top: 1px solid var(--theme-sidebar-border, var(--theme-border));
}

/* Collapsed sidebar */
aside#sidebar.collapsed {
  width: 60px;
  padding: 1.75rem 0.25rem;
  overflow-x: hidden;
}

aside#sidebar.collapsed .logo {
  font-size: 1rem;
  text-align: center;
  padding: 0;
}

aside#sidebar.collapsed ul li:not(.menuTitle) .dropdown {
  justify-content: center;
  padding: 0.6rem 0;
}

aside#sidebar.collapsed ul li:not(.menuTitle) .dropdown .item {
  justify-content: center;
}

aside#sidebar.collapsed ul li:not(.menuTitle) .dropdown .item i {
  margin: 0;
  font-size: 1.2rem;
}

aside#sidebar.collapsed ul li:not(.menuTitle) .dropdown:hover i {
  color: var(--theme-primary);
}

aside#sidebar.collapsed ul li:not(.menuTitle) .dropdown:hover svg path {
  fill: var(--theme-primary);
}

/* Mobile: Full-width sidebar — hide collapse toggle */
@media (max-width: 1024px) {
  aside#sidebar {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  aside#sidebar.active {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .collapse-toggle {
    display: none;
  }
}

@media (max-width: 768px) {
  aside#sidebar {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  aside#sidebar.active {
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

/* Ensure overlay covers everything */
:deep(.overlay) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: var(--theme-surface-overlay);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

:deep(.overlay.active) {
  opacity: 1;
  visibility: visible;
}
</style>

<style>
/* Flyout panel — non-scoped for Teleport to body */
.flyout-panel {
  position: fixed;
  left: 60px;
  z-index: 10000;
  min-width: 220px;
  max-width: 280px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background-color: var(--theme-sidebar-bg, #fff);
  border: 1px solid var(--theme-border, #e0e0e0);
  border-radius: 8px;
  box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.15);
  padding: 0;
}

.flyout-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--theme-border, #e0e0e0);
  font-weight: 600;
  color: var(--theme-primary);
  font-size: 0.9rem;
}

.flyout-header-icon {
  font-size: 1.1rem;
  color: var(--theme-primary);
}

.flyout-body {
  padding: 0.25rem 0;
}

.flyout-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  color: var(--theme-sidebar-text, #555);
  font-size: 0.85rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.flyout-item:hover {
  background-color: var(--theme-sidebar-hover, #f0f0f0);
  color: var(--theme-primary);
}

.flyout-item.active {
  color: var(--theme-primary);
  font-weight: 500;
}

.flyout-arrow {
  transition: transform 0.2s ease;
}

.flyout-arrow path {
  fill: var(--theme-sidebar-text, #555);
}

.flyout-item:hover .flyout-arrow path {
  fill: var(--theme-primary);
}

.flyout-arrow.rotated {
  transform: rotate(90deg);
}

.flyout-sub {
  background-color: var(--theme-sidebar-active, rgba(0, 0, 0, 0.03));
}

.flyout-sub-item {
  padding-left: 1.25rem;
  font-size: 0.82rem;
}
</style>