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

const router = useRouter()
const activeSave = useActiveSave()
const tabs = useTabs()
const { getMenuType } = useRoleMenu()
const sideBar = useSideBar()
const user = useCookie('logship_user')

const lang = ref('en-US')
const langs = ref([
  {
    code: 'en-US',
    name: 'English'
  },
  {
    code: 'de-DE',
    name: 'German'
  }
])

const globalSearch = ref('')
const globalSearchRef = ref(null)
const globalSearchModal = ref(false)

onMounted(() => {
  if(document.documentElement.getAttribute('lang')) {
    lang.value = document.documentElement.getAttribute('lang')
  }

  // Add keyboard shortcut for Command+K (Mac) or Ctrl+K (Windows/Linux)
  const handleKeyDown = (e) => {
    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
      e.preventDefault()
      openGlobalSearchModal()
    }
  }

  window.addEventListener('keydown', handleKeyDown)

  onBeforeUnmount(() => {
    window.removeEventListener('keydown', handleKeyDown)
  })
})

const getLang = computed(() => {
  return navsLag(lang.value)
})

const getLangName = computed(() => {
  return langs.value.filter(i => i.code === lang.value)?.[0]?.name ?? 'English'
})

const setLocale = (langCode) => {
  localStorage.setItem('logship_lang', langCode)
  location.reload()
}

const logout = async () => {
  await $fetch('/api/idempiere-auth/logout', {
    method: 'POST',
    headers: useRequestHeaders(['cookie'])
  })

  tabs.value = [{link: '/', text: 'Home', active: true}]
  localStorage.setItem('tabs', JSON.stringify(tabs.value))
  location.href = '/signin'
}

const defaultSideBarMenu = computed(() => getMenuType())

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

const openGlobalSearchModal = () => {
  if(globalSearchRef.value) {
    globalSearchRef.value.blur()
  }
  globalSearchModal.value = true
}

const goTo = async (toPath, pathName) => {
  console.log('MainNavigationMenu goTo called:', toPath, pathName)

  if(activeSave.value) {
    toast({
      message: getLang.value['save_warning'],
      type: 'is-warning',
      duration: 2000
    })
    return
  }

  try {
    tabs.value = tabs.value.map(item => ({
      ...item,
      active: false
    }))

    const normalizedPath = toPath.replace('/create', '')
    const existingTab = tabs.value.find(i => i.link === normalizedPath)

    if(existingTab) {
      existingTab.active = true
    } else {
      tabs.value.push({link: normalizedPath, text: pathName, active: true})
    }

    localStorage.setItem('tabs', JSON.stringify(tabs.value))
    console.log('Navigating to:', toPath)
    await navigateTo(toPath)
  } catch (error) {
    console.error('Navigation error:', error)
  }
}

// Handle navigation and update tabs
const handleNavigation = async (path, label) => {
  console.log('handleNavigation called:', path, label)

  if(activeSave.value) {
    toast({
      message: getLang.value['save_warning'],
      type: 'is-warning',
      duration: 2000
    })
    return
  }

  try {
    tabs.value = tabs.value.map(item => ({
      ...item,
      active: false
    }))

    const normalizedPath = path.replace('/create', '')
    const existingTab = tabs.value.find(i => i.link === normalizedPath)

    if(existingTab) {
      existingTab.active = true
    } else {
      tabs.value.push({link: normalizedPath, text: label, active: true})
    }

    localStorage.setItem('tabs', JSON.stringify(tabs.value))
    console.log('Tab updated, navigating to:', path)
  } catch (error) {
    console.error('Tab update error:', error)
  }
}

// Watch route changes to update tabs
watch(() => router.currentRoute.value.path, (newPath) => {
  console.log('Route changed to:', newPath)
})

// Navigation menu items grouped by color
const menuItems = computed(() => {
  // Fulfillment customer menu
  if (defaultSideBarMenu.value === 'c') {
    return [
      {
        label: getLang.value['fulfillment'],
        icon: 'i-heroicons-building-storefront',
        color: 'blue',
        'data-group': 'fulfillment',
        children: [
          {
            label: getLang.value['orders'],
            description: getLang.value['my_orders'],
            icon: 'i-heroicons-document-text',
            to: '/sales/orders',
            onClick: () => handleNavigation('/sales/orders', getLang.value['orders'])
          },
          {
            label: getLang.value['customer_returns'],
            description: getLang.value['customer_returns'],
            icon: 'i-heroicons-arrow-uturn-left',
            to: '/sales/my-returns',
            onClick: () => handleNavigation('/sales/my-returns', getLang.value['customer_returns'])
          },
          {
            label: getLang.value['inbound_notification'] || (lang.value === 'de-DE' ? 'Warenanmeldung' : 'Inbound Notification'),
            description: getLang.value['inbound_notification_desc'] || (lang.value === 'de-DE' ? 'Wareneingang anmelden' : 'Register incoming goods'),
            icon: 'i-heroicons-clipboard-document-list',
            to: '/procurements/my-orders',
            onClick: () => handleNavigation('/procurements/my-orders', getLang.value['inbound_notification'] || (lang.value === 'de-DE' ? 'Warenanmeldung' : 'Inbound Notification'))
          },
          {
            label: getLang.value['goods_receipt'] || 'Material Receipts',
            description: getLang.value['goods_receipt_desc'] || 'Receive deliveries',
            icon: 'i-heroicons-truck',
            to: '/procurements/my-receipts',
            onClick: () => handleNavigation('/procurements/my-receipts', getLang.value['goods_receipt'] || 'Material Receipts')
          },
          {
            label: getLang.value['tickets'] || 'Tickets',
            description: getLang.value['manage_tickets'] || 'Manage tickets',
            icon: 'i-heroicons-ticket',
            to: '/requests/my-tickets',
            onClick: () => handleNavigation('/requests/my-tickets', getLang.value['tickets'] || 'Tickets')
          },
          {
            label: 'Ticket erstellen',
            description: 'Neues Ticket erstellen',
            icon: 'i-heroicons-plus-circle',
            to: '/requests/my-tickets/create',
            onClick: () => handleNavigation('/requests/my-tickets/create', 'Ticket erstellen')
          }
        ]
      }
    ]
  }

  return [
    {
      label: getLang.value['procurement'],
      icon: 'i-heroicons-shopping-cart',
      color: 'purple',
      'data-group': 'procurement',
      children: [
        {
          label: getLang.value['goods_registration'],
          description: getLang.value['goods_registration_desc'],
          icon: 'i-heroicons-clipboard-document-list',
          to: '/procurements/orders',
          onClick: () => handleNavigation('/procurements/orders', getLang.value['goods_registration'])
        },
        {
          label: getLang.value['goods_receipt'],
          description: getLang.value['goods_receipt_desc'],
          icon: 'i-heroicons-inbox-arrow-down',
          to: '/procurements/receipts',
          onClick: () => handleNavigation('/procurements/receipts', getLang.value['goods_receipt'])
        }
      ]
    },
    {
      label: getLang.value['sales'],
      icon: 'i-heroicons-chart-bar',
      color: 'blue',
      'data-group': 'sales',
      children: [
        {
          label: getLang.value['sales_order'],
          description: getLang.value['manage_orders'],
          icon: 'i-heroicons-document-text',
          to: '/sales/orders',
          onClick: () => handleNavigation('/sales/orders', getLang.value['orders'])
        },
        {
          label: getLang.value['customer_returns'],
          description: getLang.value['customer_returns'],
          icon: 'i-heroicons-arrow-uturn-left',
          to: '/sales/my-returns',
          onClick: () => handleNavigation('/sales/my-returns', getLang.value['customer_returns'])
        },
        {
          label: getLang.value['quickorder'],
          description: getLang.value['quick_order_desc'],
          icon: 'i-heroicons-bolt',
          to: '/partners/partners/add',
          onClick: () => handleNavigation('/partners/partners/add', getLang.value['quickorder'])
        },
        {
          label: getLang.value['generate_invoices'],
          description: getLang.value['generate_invoices_desc'],
          icon: 'i-heroicons-document-plus',
          to: '/generate-invoices',
          onClick: () => handleNavigation('/generate-invoices', getLang.value['generate_invoices'])
        },
        {
          label: getLang.value['generate_invoices_from_orders'] || 'Generate Invoices (from Orders)',
          description: getLang.value['generate_invoices_from_orders_desc'] || 'Select orders and batch-generate invoices',
          icon: 'i-heroicons-clipboard-document-check',
          to: '/generate-invoices-from-orders',
          onClick: () => handleNavigation('/generate-invoices-from-orders', getLang.value['generate_invoices_from_orders'] || 'Generate Invoices (from Orders)')
        },
      ]
    },
    {
      label: getLang.value['manufacturings'] || (lang.value === 'de-DE' ? 'Fertigung' : 'Manufacturing'),
      icon: 'i-heroicons-wrench-screwdriver',
      color: 'teal',
      'data-group': 'manufacturings',
      children: [
        {
          label: getLang.value['bom_productions'] || (lang.value === 'de-DE' ? 'Stücklisten-Produktionen' : 'BOM Productions'),
          description: getLang.value['bom_open_order_lines_desc'] || (lang.value === 'de-DE' ? 'Offene Aufträge mit Stücklisten-Artikeln produzieren' : 'Produce open orders with BOM articles'),
          icon: 'i-heroicons-cube-transparent',
          to: '/manufacturings/bom-productions',
          onClick: () => handleNavigation('/manufacturings/bom-productions', getLang.value['bom_productions'] || 'BOM Productions')
        },
        {
          label: getLang.value['productions'] || 'Productions',
          description: lang.value === 'de-DE' ? 'Alle Produktionen verwalten' : 'Manage all productions',
          icon: 'i-heroicons-clipboard-document-list',
          to: '/manufacturings/productions',
          onClick: () => handleNavigation('/manufacturings/productions', getLang.value['productions'] || 'Productions')
        },
        {
          label: getLang.value['material_bills_formula'] || (lang.value === 'de-DE' ? 'Stücklisten & Rezepturen' : 'Material Bills & Formula'),
          description: lang.value === 'de-DE' ? 'Stücklisten (BOM) definieren' : 'Define bills of material (BOM)',
          icon: 'i-heroicons-rectangle-stack',
          to: '/manufacturings/product-bom',
          onClick: () => handleNavigation('/manufacturings/product-bom', getLang.value['material_bills_formula'] || 'Material Bills & Formula')
        }
      ]
    },
    {
      label: getLang.value['materials'],
      icon: 'i-heroicons-cube',
      color: 'green',
      'data-group': 'materials',
      children: [
        {
          label: getLang.value['product'],
          description: getLang.value['manage_products'],
          icon: 'i-heroicons-squares-2x2',
          to: '/materials/products',
          onClick: () => handleNavigation('/materials/products', getLang.value['articles'])
        },
        {
          label: getLang.value['generate_shipments'],
          description: getLang.value['generate_shipments_desc'],
          icon: 'i-heroicons-document-plus',
          to: '/generate-shipments',
          onClick: () => handleNavigation('/generate-shipments', getLang.value['generate_shipments'])
        },
        {
          label: getLang.value['shipments'],
          description: getLang.value['manage_shipping'],
          icon: 'i-heroicons-truck',
          to: '/sales/shipments',
          onClick: () => handleNavigation('/sales/shipments', getLang.value['shipments'])
        },
        {
          label: getLang.value['locatorlabels'],
          description: getLang.value['print_locator_labels'],
          icon: 'i-heroicons-qr-code',
          to: '/locator-labels',
          onClick: () => handleNavigation('/locator-labels', getLang.value['locator_print'])
        },
        {
          label: getLang.value['lagerortmanager'],
          description: getLang.value['manage_locators'],
          icon: 'i-heroicons-map-pin',
          to: '/materials/locators',
          onClick: () => handleNavigation('/materials/locators', getLang.value['warehouse_builder'])
        },
        {
          label: getLang.value['qty_on_hand'],
          description: getLang.value['qty_on_hand_desc'] || 'View stock levels by organization',
          icon: 'i-heroicons-chart-bar-square',
          to: '/materials/qty-on-hand',
          onClick: () => handleNavigation('/materials/qty-on-hand', getLang.value['qty_on_hand'])
        },
        {
          label: lang.value === 'de-DE' ? 'Mengen-Korrektur (Duplikate)' : 'Qty Fix (Duplicates)',
          description: lang.value === 'de-DE' ? 'Bestand von falschem auf richtigen Artikel umbuchen' : 'Move on-hand stock from a wrong duplicate to the correct article',
          icon: 'i-heroicons-arrows-right-left',
          to: '/materials/qty-fix',
          onClick: () => handleNavigation('/materials/qty-fix', lang.value === 'de-DE' ? 'Mengen-Korrektur' : 'Qty Fix')
        },
        {
          label: getLang.value['locator_priorities'] || 'Locator Priorities',
          description: getLang.value['locator_priorities_desc'] || 'Optimize locator pick order for shipment generation',
          icon: 'i-heroicons-bars-arrow-down',
          to: '/materials/locator-priorities',
          onClick: () => handleNavigation('/materials/locator-priorities', getLang.value['locator_priorities'] || 'Locator Priorities')
        },
        {
          label: 'Copy to Org',
          description: 'Copy products to another organization',
          icon: 'i-heroicons-document-duplicate',
          to: '/materials/products/copy-to-org',
          onClick: () => handleNavigation('/materials/products/copy-to-org', 'Copy to Org')
        },
        {
          label: 'Bulk Update',
          description: 'Bulk update weight and label printer for products',
          icon: 'i-heroicons-arrow-path',
          to: '/materials/products/bulk-update',
          onClick: () => handleNavigation('/materials/products/bulk-update', 'Bulk Update')
        }
      ]
    },
    {
      label: getLang.value['fulfillment'],
      icon: 'i-heroicons-building-storefront',
      color: 'orange',
      'data-group': 'fulfillment',
      children: [
        {
          label: getLang.value['merchant_onboarding'] || (lang.value === 'de-DE' ? 'Händler-Onboarding' : 'Merchant Onboarding'),
          description: getLang.value['merchant_onboarding_desc'] || (lang.value === 'de-DE' ? 'Neuen Händler anlegen (Org, Partner, Lager, Rolle)' : 'Create a new merchant (org, partner, warehouse, role)'),
          icon: 'i-heroicons-rocket-launch',
          to: '/fulfillment/merchant-onboarding',
          onClick: () => handleNavigation('/fulfillment/merchant-onboarding', getLang.value['merchant_onboarding'] || 'Merchant Onboarding')
        },
        {
          label: getLang.value['ffn_customers'],
          description: getLang.value['ffn_customers_desc'],
          icon: 'i-heroicons-user-group',
          to: '/fulfillment/customers',
          onClick: () => handleNavigation('/fulfillment/customers', getLang.value['ffn_customers'])
        },
        {
          label: getLang.value['ffn_stocks'],
          description: getLang.value['ffn_stocks_desc'],
          icon: 'i-heroicons-archive-box',
          to: '/fulfillment/stocks',
          onClick: () => handleNavigation('/fulfillment/stocks', getLang.value['ffn_stocks'])
        },
        {
          label: getLang.value['plentyone_stocks'],
          description: getLang.value['plentyone_stocks_desc'],
          icon: 'i-heroicons-arrow-path',
          to: '/fulfillment/plentyone-stocks',
          onClick: () => handleNavigation('/fulfillment/plentyone-stocks', getLang.value['plentyone_stocks'])
        },
        {
          label: getLang.value['shopify_stocks'],
          description: getLang.value['shopify_stocks_desc'],
          icon: 'i-heroicons-arrow-path',
          to: '/fulfillment/shopify-stocks',
          onClick: () => handleNavigation('/fulfillment/shopify-stocks', getLang.value['shopify_stocks'])
        },
        {
          label: getLang.value['ffn_invoices'],
          description: getLang.value['ffn_invoices_desc'],
          icon: 'i-heroicons-document-check',
          to: '/fulfillment/invoices',
          onClick: () => handleNavigation('/fulfillment/invoices', getLang.value['ffn_invoices'])
        },
        {
          label: getLang.value['ffn_onboarding'],
          description: getLang.value['ffn_onboarding_desc'],
          icon: 'i-heroicons-rocket-launch',
          to: '/fulfillment/onboarding',
          onClick: () => handleNavigation('/fulfillment/onboarding', getLang.value['ffn_onboarding'])
        },
        {
          label: getLang.value['fulfillment_product_pricing_rules'],
          description: getLang.value['fulfillment_product_pricing_rules_desc'],
          icon: 'i-heroicons-calculator',
          to: '/fulfillment/product-pricing-rules',
          onClick: () => handleNavigation('/fulfillment/product-pricing-rules', getLang.value['fulfillment_product_pricing_rules'])
        },
        {
          label: getLang.value['commission_tables'] || 'Commission Tables',
          description: getLang.value['commission_tables_desc'] || 'Tische, Drucker & Kameras der Kommissionierung',
          icon: 'i-heroicons-table-cells',
          to: '/settings/commission-tables',
          onClick: () => handleNavigation('/settings/commission-tables', getLang.value['commission_tables'] || 'Commission Tables')
        },
        {
          label: getLang.value['printers'] || 'Printers',
          description: getLang.value['printers_desc'] || 'Zentrale Druckerverwaltung (CUPS)',
          icon: 'i-heroicons-printer',
          to: '/settings/printers',
          onClick: () => handleNavigation('/settings/printers', getLang.value['printers'] || 'Printers')
        },
      ]
    },
    {
      label: getLang.value['bi'] || 'BI',
      icon: 'i-heroicons-presentation-chart-line',
      color: 'amber',
      'data-group': 'bi',
      children: [
        {
          label: getLang.value['bi_shipments_by_org'] || 'Shipments by Org',
          description: getLang.value['bi_shipments_by_org_desc'] || 'Commissioned shipments per organization',
          icon: 'i-heroicons-truck',
          color: 'blue',
          to: '/bi/shipments',
          onClick: () => handleNavigation('/bi/shipments', getLang.value['bi_shipments_by_org'] || 'Shipments by Org')
        },
        {
          label: getLang.value['bi_shipments_by_country'] || 'Shipments by Country',
          description: getLang.value['bi_shipments_by_country_desc'] || 'Yearly commissioned shipments by country & organization',
          icon: 'i-heroicons-globe-alt',
          color: 'teal',
          to: '/bi/shipments-by-country',
          onClick: () => handleNavigation('/bi/shipments-by-country', getLang.value['bi_shipments_by_country'] || 'Shipments by Country')
        },
        {
          label: getLang.value['bi_commission_analytics'] || 'Commission Analytics',
          description: getLang.value['bi_commission_analytics_desc'] || 'Picker time per shipment, per user, slowest products',
          icon: 'i-heroicons-clock',
          color: 'indigo',
          to: '/bi/commission-analytics',
          onClick: () => handleNavigation('/bi/commission-analytics', getLang.value['bi_commission_analytics'] || 'Commission Analytics')
        },
        {
          label: getLang.value['bi_inventory_valuation'] || 'Inventory Valuation',
          description: getLang.value['bi_inventory_valuation_desc'] || 'Stock value overview by organization and pricelist',
          icon: 'i-heroicons-calculator',
          color: 'green',
          to: '/bi/inventory-valuation',
          onClick: () => handleNavigation('/bi/inventory-valuation', getLang.value['bi_inventory_valuation'] || 'Inventory Valuation')
        },
        {
          label: getLang.value['storage_usage_browser'],
          description: getLang.value['storage_usage_browser_desc'],
          icon: 'i-heroicons-cube',
          color: 'cyan',
          to: '/materials/storage-usage',
          onClick: () => handleNavigation('/materials/storage-usage', getLang.value['storage_usage_browser'])
        },
        {
          label: getLang.value['fee_line_browser'],
          description: getLang.value['fee_line_browser_desc'],
          icon: 'i-heroicons-table-cells',
          color: 'orange',
          to: '/fulfillment/fee-line-browser',
          onClick: () => handleNavigation('/fulfillment/fee-line-browser', getLang.value['fee_line_browser'])
        },
        {
          label: getLang.value['transactions'] || 'Transactions',
          description: getLang.value['transactions_page_desc'] || 'View product transaction history',
          icon: 'i-heroicons-arrow-path-rounded-square',
          color: 'lime',
          to: '/materials/transactions',
          onClick: () => handleNavigation('/materials/transactions', getLang.value['transactions'] || 'Transactions')
        },
        {
          label: getLang.value['materialplanning'],
          description: getLang.value['material_planning_desc'],
          icon: 'i-heroicons-calendar-days',
          color: 'indigo',
          to: '/materials/planning',
          onClick: () => handleNavigation('/materials/planning', getLang.value['materialplanning'])
        },
        {
          label: getLang.value['shipment_line_browser'] || 'Shipment Line Browser',
          description: getLang.value['shipment_line_browser_desc'],
          icon: 'i-heroicons-document-text',
          color: 'teal',
          to: '/sales/shipment-line-browser',
          onClick: () => handleNavigation('/sales/shipment-line-browser', getLang.value['shipment_line_browser'] || 'Shipment Line Browser')
        },
        {
          label: getLang.value['margin_browser'] || 'Margin Browser',
          description: getLang.value['margin_browser_desc'],
          icon: 'i-heroicons-calculator',
          color: 'rose',
          to: '/bi/margin-browser',
          onClick: () => handleNavigation('/bi/margin-browser', getLang.value['margin_browser'] || 'Margin Browser')
        },
        {
          label: getLang.value['bi_locator_usage'] || 'Locator Usage',
          description: getLang.value['bi_locator_usage_desc'] || 'Unique locators used per organization and month',
          icon: 'i-heroicons-map-pin',
          color: 'purple',
          to: '/bi/locator-usage',
          onClick: () => handleNavigation('/bi/locator-usage', getLang.value['bi_locator_usage'] || 'Locator Usage')
        }
      ]
    },
    {
      label: getLang.value['accounting_menu'] || 'Accounting',
      icon: 'i-heroicons-banknotes',
      color: 'emerald',
      'data-group': 'accounting',
      children: [
        {
          label: getLang.value['invoices'],
          description: getLang.value['invoices_desc'] || 'View all invoices',
          icon: 'i-heroicons-document-check',
          to: '/sales/invoices',
          onClick: () => handleNavigation('/sales/invoices', getLang.value['invoices'])
        },
        {
          label: getLang.value['generate_invoices_from_orders'] || 'Generate Invoices (from Orders)',
          description: getLang.value['generate_invoices_from_orders_desc'] || 'Sammel-Rechnungserstellung aus Aufträgen',
          icon: 'i-heroicons-document-plus',
          to: '/generate-invoices-from-orders',
          onClick: () => handleNavigation('/generate-invoices-from-orders', getLang.value['generate_invoices_from_orders'] || 'Generate Invoices (from Orders)')
        },
        {
          label: getLang.value['incoming_invoices'] || 'Eingangsrechnungen',
          description: getLang.value['incoming_invoices_sub'] || 'Lieferantenrechnungen per OCR erfassen & verbuchen',
          icon: 'i-heroicons-inbox-arrow-down',
          to: '/accounting/incoming-invoices',
          onClick: () => handleNavigation('/accounting/incoming-invoices', getLang.value['incoming_invoices'] || 'Eingangsrechnungen')
        },
        {
          label: getLang.value['amazon_settlements'] || 'Amazon Abrechnungen',
          description: getLang.value['amazon_settlements_desc'] || 'Amazon Settlement-Berichte & Auszahlungen',
          icon: 'i-heroicons-banknotes',
          to: '/accounting/amazon-settlements',
          onClick: () => handleNavigation('/accounting/amazon-settlements', getLang.value['amazon_settlements'] || 'Amazon Abrechnungen')
        },
        {
          label: getLang.value['amazon_orders_check'] || 'Amazon Bestellabgleich',
          description: getLang.value['amazon_orders_check_desc'] || 'Amazon Bestellungen gegen LogShip prüfen',
          icon: 'i-heroicons-clipboard-document-check',
          to: '/accounting/amazon-orders-check',
          onClick: () => handleNavigation('/accounting/amazon-orders-check', getLang.value['amazon_orders_check'] || 'Amazon Bestellabgleich')
        },
        {
          label: getLang.value['ebay_settlements'] || 'eBay Abrechnungen',
          description: getLang.value['ebay_settlements_desc'] || 'eBay Auszahlungen & Transaktionen',
          icon: 'i-heroicons-banknotes',
          to: '/accounting/ebay-settlements',
          onClick: () => handleNavigation('/accounting/ebay-settlements', getLang.value['ebay_settlements'] || 'eBay Abrechnungen')
        },
        {
          label: getLang.value['ebay_orders_check'] || 'eBay Bestellabgleich',
          description: getLang.value['ebay_orders_check_desc'] || 'eBay Bestellungen gegen LogShip prüfen',
          icon: 'i-heroicons-clipboard-document-check',
          to: '/accounting/ebay-orders-check',
          onClick: () => handleNavigation('/accounting/ebay-orders-check', getLang.value['ebay_orders_check'] || 'eBay Bestellabgleich')
        }
      ]
    },
    {
      label: getLang.value['partners'],
      icon: 'i-heroicons-users',
      color: 'cyan',
      'data-group': 'partners',
      children: [
        {
          label: getLang.value['bpartner'],
          description: getLang.value['manage_partners'],
          icon: 'i-heroicons-building-office',
          to: '/partners/partners',
          onClick: () => handleNavigation('/partners/partners', getLang.value['customers'])
        }
      ]
    },
    {
      label: getLang.value['support'],
      icon: 'i-heroicons-lifebuoy',
      color: 'indigo',
      'data-group': 'support',
      children: [
        {
          label: getLang.value['create_ticket'],
          description: getLang.value['manage_tickets'],
          icon: 'i-heroicons-ticket',
          to: '/requests/requests/create',
          onClick: () => handleNavigation('/requests/requests/create', getLang.value['tickets'])
        },
        {
          label: getLang.value['ticket_list'],
          description: getLang.value['request_chat_desc'],
          icon: 'i-heroicons-chat-bubble-left-right',
          to: '/requests/requests',
          onClick: () => handleNavigation('/requests/requests', getLang.value['ticket_list'])
        }
      ]
    },
    {
      label: getLang.value['rma'],
      icon: 'i-heroicons-arrow-uturn-left',
      color: 'red',
      'data-group': 'rma',
      children: [
        {
          label: getLang.value['quickrmareturn'],
          description: getLang.value['create_return'],
          icon: 'i-heroicons-arrow-path',
          to: '/sales/orders/return',
          onClick: () => handleNavigation('/sales/orders/return', getLang.value['quickrmareturn'])
        },
        {
          label: getLang.value['quickrmalist'],
          description: getLang.value['show_rma_list'],
          icon: 'i-heroicons-list-bullet',
          to: '/requests/requests',
          onClick: () => handleNavigation('/requests/requests', getLang.value['quickrmalist'])
        }
      ]
    }
  ]
})
</script>

<template>
  <nav class="main-navigation">
    <div class="nav-container">
      <!-- Top row on mobile: Burger menu + Search + User menu bar (always visible) -->
      <div class="nav-top-row">
        <!-- Burger Menu Toggle -->
        <button class="burger-menu-toggle" @click="showSideBar" aria-label="Toggle sidebar menu">
          <UIcon name="i-heroicons-bars-3" class="w-6 h-6" />
        </button>

        <!-- Search Field (Desktop and Mobile) -->
        <div class="search-wrapper" :class="activeSave ? 'opacity-50 pointer-events-none' : ''">
          <input 
            ref="globalSearchRef" 
            type="search" 
            v-model="globalSearch" 
            class="search-input" 
            @keyup.enter="openGlobalSearchModal" 
            :placeholder="getLang['search_placeholder']"
            :disabled="activeSave"
          />
          <button 
            type="button" 
            class="search-button" 
            @click="openGlobalSearchModal"
            :disabled="activeSave"
            aria-label="Open search"
          >
            <UIcon name="i-heroicons-magnifying-glass" class="w-5 h-5" />
          </button>
        </div>

        <!-- User Menu Bar -->
        <div class="nav-right">
          <UserMenuBar 
            :showLanguageMenu="true" 
            :showUserMenu="true" 
          />
        </div>
      </div>

      <!-- Bottom row on mobile / Left side on desktop: Main navigation menu items (role-based) -->
      <div class="nav-bottom-row">
        <div v-if="menuItems.length > 0" class="nav-left">
          <UNavigationMenu
            :items="menuItems"
            orientation="horizontal"
            highlight
            class="custom-nav-menu with-labels"
            @click="(item) => { console.log('Menu clicked:', item); if (item.onClick) item.onClick(); }"
          >
            <template #item-leading="{ item }">
              <span :class="['nav-trigger-icon-wrap', `nav-trigger-color-${item.color || 'default'}`]">
                <UIcon :name="item.icon" class="nav-trigger-icon" />
                <span class="nav-trigger-label">{{ item.label }}</span>
              </span>
            </template>
            <template #item-label>
              <span class="sr-only" />
            </template>
            <template #item-trailing>
              <span class="sr-only" />
            </template>
            <template #item-content="{ item }">
              <div class="menu-dropdown-grid" :class="item.color ? `nav-pop-color-${item.color}` : ''">
                <NuxtLink
                  v-for="(child, idx) in item.children"
                  :key="idx"
                  :to="child.to"
                  class="menu-item-card"
                  :class="child.color ? `menu-color-${child.color}` : (item.color ? `menu-color-${item.color}` : '')"
                  @click="child.onClick ? child.onClick() : null"
                >
                  <div class="menu-item-icon">
                    <UIcon :name="child.icon" class="icon" />
                  </div>
                  <div class="menu-item-content">
                    <div class="menu-item-label">{{ child.label }}</div>
                    <div class="menu-item-description">{{ child.description }}</div>
                  </div>
                </NuxtLink>
              </div>
            </template>
          </UNavigationMenu>
        </div>

        <!-- Desktop icon set (chat · theme · language · account) moved to the top
             bar (<TopMegaBar> → <UserMenuBar>). Mobile keeps it in .nav-top-row. -->
      </div>
    </div>

    <!-- Search Modal -->
    <Teleport to="body">
      <SearchModal v-model="globalSearchModal" v-model:searchQuery="globalSearch" />
    </Teleport>
  </nav>
</template>

<style scoped>
.main-navigation {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--theme-border);
  background-color: var(--theme-nav-bg);
  padding: 1rem 1.5rem;
  box-shadow: 0 1px 3px 0 var(--theme-shadow);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.dark .main-navigation,
[data-mode="dark"] .main-navigation {
  background-color: var(--theme-nav-bg);
  border-bottom-color: var(--theme-border);
  box-shadow: 0 1px 3px 0 var(--theme-shadow);
}

.nav-container {
  max-width: 100%;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.nav-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 0.75rem;
}

.nav-bottom-row {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  width: 100%;
  gap: 1rem;
  overflow: visible;
}

.nav-left {
  min-width: 0;
  overflow: visible;
}

.desktop-actions {
  display: none;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-left: auto;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Burger Menu Toggle */
.burger-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border: 1px solid var(--theme-border);
  border-radius: 0.5rem;
  background-color: var(--theme-surface);
  color: var(--theme-text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.burger-menu-toggle:hover {
  background-color: var(--theme-bg-hover);
  border-color: var(--theme-border-dark);
}

.dark .burger-menu-toggle,
[data-mode="dark"] .burger-menu-toggle {
  background-color: var(--theme-surface);
  border-color: var(--theme-border);
  color: var(--theme-text-primary);
}

.dark .burger-menu-toggle:hover,
[data-mode="dark"] .burger-menu-toggle:hover {
  background-color: var(--theme-bg-hover);
  border-color: var(--theme-border-dark);
}

/* Search Wrapper - Hidden on desktop by default */
.search-wrapper {
  display: none;
  align-items: center;
  flex: 1;
  max-width: 500px;
  position: relative;
  transition: opacity 0.2s ease;
}

/* Show search on mobile/tablet */
@media (max-width: 1024px) {
  .search-wrapper {
    display: flex;
  }
}

.search-input {
  flex: 1;
  padding: 0.5rem 2.5rem 0.5rem 1rem;
  border: 1px solid var(--theme-border);
  border-radius: 0.5rem;
  background-color: var(--theme-input-bg);
  color: var(--theme-text-primary);
  font-size: 0.875rem;
  outline: none;
  transition: all 0.2s ease;
}

.search-input:focus {
  border-color: var(--theme-primary);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

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

.dark .search-input,
[data-mode="dark"] .search-input {
  background-color: var(--theme-input-bg);
  border-color: var(--theme-border);
  color: var(--theme-text-primary);
}

.dark .search-input:focus,
[data-mode="dark"] .search-input:focus {
  border-color: var(--theme-primary);
}

.dark .search-input::placeholder,
[data-mode="dark"] .search-input::placeholder {
  color: var(--theme-input-placeholder);
}

.search-button {
  position: absolute;
  right: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;
  border: none;
  background: transparent;
  color: var(--theme-text-muted);
  cursor: pointer;
  border-radius: 0.375rem;
  transition: all 0.2s ease;
}

.search-button:hover {
  background-color: var(--theme-bg-hover);
  color: var(--theme-text-primary);
}

.dark .search-button,
[data-mode="dark"] .search-button {
  color: var(--theme-text-muted);
}

.dark .search-button:hover,
[data-mode="dark"] .search-button:hover {
  background-color: var(--theme-bg-hover);
  color: var(--theme-text-primary);
}

.search-button:disabled,
.search-input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Desktop: side-by-side layout */
@media (min-width: 1025px) {
  .nav-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .nav-top-row {
    display: none;
  }

  .nav-bottom-row {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    align-items: center;
  }

  .nav-left {
    min-width: 0;
  }

  .nav-right {
    display: flex;
    justify-content: flex-end;
  }

  .desktop-actions {
    display: flex;
  }
}

/* Custom styling for navigation menu groups */
:deep(.custom-nav-menu) {
  gap: 0.5rem;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* Each item hugs its own content — the colored icon+label pill. */
:deep(.custom-nav-menu > li) {
  margin-right: 0;
}

:deep(.custom-nav-menu > li:last-child) {
  margin-right: 0;
}

/* Ensure dropdown menus appear on top */
:deep(.custom-nav-menu [role="menu"]),
:deep(.custom-nav-menu [data-radix-popper-content-wrapper]) {
  z-index: 1000 !important;
}

:deep(.custom-nav-menu button[aria-expanded="true"]) {
  z-index: 1001;
}

/* Single top-level item (limited roles).
   Nuxt UI's horizontal submenu uses one shared <NavigationMenuViewport> whose
   width is taken from the menu *root* (the viewport box is `w-full` of the root).
   With several triggers the root is wide, so the dropdown is wide. With only a
   single trigger the root collapses to that one pill's width, so the viewport
   shrinks to the button and its `overflow:hidden` clips the submenu — only a
   sliver shows. Give the viewport a content-driven width in that case.
   Scoped via :has(...:only-child) so normal multi-item menus are untouched. */
:deep(.custom-nav-menu:has([data-slot="list"] > li:only-child) [data-slot="viewportWrapper"]) {
  width: max-content;
  min-width: 680px;
  max-width: min(760px, 92vw);
}
:deep(.custom-nav-menu:has([data-slot="list"] > li:only-child) [data-slot="viewport"]) {
  width: 100%;
  min-width: 0;
  overflow: visible;
}
/* Belt-and-suspenders: keep the inner grid/content from collapsing narrower
   than its two card columns even if the box width is mis-measured. */
:deep(.custom-nav-menu:has([data-slot="list"] > li:only-child) [data-slot="content"]),
:deep(.custom-nav-menu:has([data-slot="list"] > li:only-child) .menu-dropdown-grid) {
  min-width: 660px;
}

/* Neutral styling for menu items */
:deep(.custom-nav-menu button) {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border: none;
  letter-spacing: 0.01em;
  line-height: 1.25;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  background-color: var(--theme-surface);
  color: var(--theme-text-primary);
}

/* With-labels mode: NO button box — the colored icon chip itself becomes a pill
   that holds the icon + the (translated) menu name. Neutralize the parent button
   (transparent, borderless) in all themes/states; hover feedback lives on the
   pill (see the .nav-trigger-icon-wrap hover rule below). */
:deep(.custom-nav-menu.with-labels) button,
:deep(.custom-nav-menu.with-labels) a {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  padding: 0.25rem !important;
  gap: 0 !important;
}
.nav-trigger-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--nav-c, var(--theme-text-primary));
  white-space: nowrap;
}

/* Icons-only mode: neutralize parent buttons/links — the visible "button" is the
   wrapper inside, so we zero out background, border, shadow and centring on the
   parent so it can't fight us. */
:deep(.custom-nav-menu.icons-only) button,
:deep(.custom-nav-menu.icons-only) a {
  padding: 0.25rem !important;
  min-width: 0 !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: visible !important;
}

/* Hide any wrapper Nuxt UI puts around the empty label/trailing slots so the
   icon wrapper is the only flex item — guarantees true centring. */
:deep(.custom-nav-menu.icons-only) button > *:not(.nav-trigger-icon-wrap):empty,
:deep(.custom-nav-menu.icons-only) a > *:not(.nav-trigger-icon-wrap):empty {
  display: none !important;
}

:deep(.custom-nav-menu.icons-only) .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------- Category colorization (border + tint + icon color) ------- */
.nav-trigger-color-purple   { --nav-c: #9333ea; --nav-c-rgb: 147, 51, 234; }
.nav-trigger-color-blue     { --nav-c: #2563eb; --nav-c-rgb: 37, 99, 235; }
.nav-trigger-color-green    { --nav-c: #16a34a; --nav-c-rgb: 22, 163, 74; }
.nav-trigger-color-orange   { --nav-c: #ea580c; --nav-c-rgb: 234, 88, 12; }
.nav-trigger-color-amber    { --nav-c: #d97706; --nav-c-rgb: 217, 119, 6; }
.nav-trigger-color-emerald  { --nav-c: #059669; --nav-c-rgb: 5, 150, 105; }
.nav-trigger-color-cyan     { --nav-c: #0891b2; --nav-c-rgb: 8, 145, 178; }
.nav-trigger-color-indigo   { --nav-c: #4f46e5; --nav-c-rgb: 79, 70, 229; }
.nav-trigger-color-red      { --nav-c: #dc2626; --nav-c-rgb: 220, 38, 38; }
.nav-trigger-color-violet   { --nav-c: #7c3aed; --nav-c-rgb: 124, 58, 237; }
.nav-trigger-color-pink     { --nav-c: #db2777; --nav-c-rgb: 219, 39, 119; }
.nav-trigger-color-teal     { --nav-c: #0d9488; --nav-c-rgb: 13, 148, 136; }
.nav-trigger-color-lime     { --nav-c: #65a30d; --nav-c-rgb: 101, 163, 13; }
.nav-trigger-color-rose     { --nav-c: #e11d48; --nav-c-rgb: 225, 29, 72; }
.nav-trigger-color-default  { --nav-c: #64748b; --nav-c-rgb: 100, 116, 139; }

/* The wrapper IS the visible pill: colored tint + border holding the icon AND
   the label, hugging its content. */
.nav-trigger-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: auto;
  height: 2.25rem;
  padding: 0 0.75rem;
  border-radius: 0.5rem;
  border: 1.5px solid rgba(var(--nav-c-rgb, 100, 116, 139), 0.45);
  background-color: rgba(var(--nav-c-rgb, 100, 116, 139), 0.06);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  color: var(--nav-c, #64748b);
}

.nav-trigger-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--nav-c, currentColor);
}

/* Hover / open state — intensify the wrapper, not the parent button. */
:deep(.custom-nav-menu) button:hover .nav-trigger-icon-wrap,
:deep(.custom-nav-menu) a:hover .nav-trigger-icon-wrap,
:deep(.custom-nav-menu) button[aria-expanded="true"] .nav-trigger-icon-wrap,
:deep(.custom-nav-menu) [data-state="open"] .nav-trigger-icon-wrap {
  border-color: var(--nav-c, #64748b);
  background-color: rgba(var(--nav-c-rgb, 100, 116, 139), 0.16);
  box-shadow: 0 2px 6px 0 rgba(var(--nav-c-rgb, 100, 116, 139), 0.22);
}

.dark :deep(.custom-nav-menu button),
[data-mode="dark"] :deep(.custom-nav-menu button) {
  background-color: var(--theme-surface);
  color: var(--theme-text-primary);
}

:deep(.custom-nav-menu button:hover) {
  background-color: var(--theme-bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px 0 var(--theme-shadow);
}

.dark :deep(.custom-nav-menu button:hover),
[data-mode="dark"] :deep(.custom-nav-menu button:hover) {
  background-color: var(--theme-bg-hover);
}

/* Active state */
:deep(.custom-nav-menu button:active) {
  transform: translateY(0);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Improved focus states for accessibility */
:deep(.custom-nav-menu button:focus-visible) {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  z-index: 10;
}

/* Desktop-only class */
.desktop-only {
  display: none;
}

@media (min-width: 1025px) {
  .desktop-only {
    display: flex;
  }
}

@media (max-width: 1024px) {
  .main-navigation {
    padding: 0.5rem 0.75rem;
  }

  .nav-container {
    gap: 0.5rem;
    width: 100%;
  }

  .nav-top-row {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--theme-border);
    width: 100%;
    display: flex;
    gap: 0.5rem;
  }

  /* Hide the main navigation menu on mobile - use sidebar instead */
  .nav-bottom-row {
    display: none;
  }

  .nav-right {
    gap: 0.5rem;
    flex-shrink: 0;
  }

  .search-wrapper {
    max-width: none;
    flex: 1;
  }

  .burger-menu-toggle {
    flex-shrink: 0;
  }
}

@media (max-width: 768px) {
  .main-navigation {
    padding: 0.5rem;
  }

  .nav-top-row {
    gap: 0.5rem;
    width: 100%;
    flex-wrap: nowrap;
  }

  .nav-right {
    gap: 0.25rem;
    flex-shrink: 0;
  }

  .search-wrapper {
    flex: 1 1 0;
    min-width: 0;
  }

  .search-input {
    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
    font-size: 0.8125rem;
    width: 100%;
  }

  .search-input::placeholder {
    content: "Search...";
  }

  .burger-menu-toggle {
    padding: 0.375rem;
    flex-shrink: 0;
  }
}

/* Compact layout on small mobile screens - show all elements */
@media (max-width: 480px) {
  .nav-top-row {
    gap: 0.375rem;
  }

  .search-wrapper {
    flex: 1 1 0;
    min-width: 0;
  }

  .search-input {
    padding: 0.375rem 2rem 0.375rem 0.5rem;
    font-size: 0.75rem;
  }

  .nav-right {
    flex-shrink: 0;
    gap: 0.25rem;
  }

  .burger-menu-toggle {
    padding: 0.25rem;
  }
}
</style>

<!-- Unscoped styles for teleported dropdown content -->
<style>
/* Dropdown grid layout — 2 columns for icon+text cards.
   margin-top opens a transparent gap between the trigger icon and the dropdown
   so the menu titles no longer butt up against the icon row. */
.menu-dropdown-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem;
  padding: 0.75rem;
  margin-top: 0.75rem;
  border-radius: 0.75rem;
  /* Faded category-color wash behind the submenu, fading top → transparent. */
  background-image: linear-gradient(
    180deg,
    rgba(var(--pop-c-rgb, 100, 116, 139), 0.18) 0%,
    rgba(var(--pop-c-rgb, 100, 116, 139), 0.05) 45%,
    rgba(var(--pop-c-rgb, 100, 116, 139), 0) 100%
  );
}

/* Parent category color, passed down from the trigger to tint the submenu. */
.nav-pop-color-purple   { --pop-c-rgb: 147, 51, 234; }
.nav-pop-color-blue     { --pop-c-rgb: 37, 99, 235; }
.nav-pop-color-green    { --pop-c-rgb: 22, 163, 74; }
.nav-pop-color-orange   { --pop-c-rgb: 234, 88, 12; }
.nav-pop-color-amber    { --pop-c-rgb: 217, 119, 6; }
.nav-pop-color-emerald  { --pop-c-rgb: 5, 150, 105; }
.nav-pop-color-cyan     { --pop-c-rgb: 8, 145, 178; }
.nav-pop-color-indigo   { --pop-c-rgb: 79, 70, 229; }
.nav-pop-color-red      { --pop-c-rgb: 220, 38, 38; }
.nav-pop-color-violet   { --pop-c-rgb: 124, 58, 237; }
.nav-pop-color-pink     { --pop-c-rgb: 219, 39, 119; }
.nav-pop-color-teal     { --pop-c-rgb: 13, 148, 136; }
.nav-pop-color-lime     { --pop-c-rgb: 101, 163, 13; }
.nav-pop-color-rose     { --pop-c-rgb: 225, 29, 72; }
.nav-pop-color-default  { --pop-c-rgb: 100, 116, 139; }

/* Same offset applied at the popper wrapper level so any sibling content
   (not just the grid) is pushed clear of the trigger row. */
.custom-nav-menu [data-radix-popper-content-wrapper] {
  padding-top: 0.5rem;
}

/* Tighten the popper content's outer width so the dropdown stays compact
   instead of stretching across half the screen. Wide enough for two cards so
   longer titles (e.g. "Amazon Bestellabgleich") don't wrap onto many lines. */
.custom-nav-menu [data-radix-popper-content-wrapper] > * {
  width: auto !important;
  max-width: 720px;
  min-width: 0 !important;
}

/* Menu item card — icon left, title+description right */
.menu-item-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.625rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border: 1.5px solid var(--theme-border, #e5e7eb);
  background: var(--theme-surface, #ffffff);
  min-width: 230px;
  max-width: 340px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.menu-item-card:hover {
  transform: translateY(-2px);
}

.dark .menu-item-card,
[data-mode="dark"] .menu-item-card {
  background: var(--theme-surface, #1f2937);
  border-color: var(--theme-border, #374151);
}

.dark .menu-item-card:hover,
[data-mode="dark"] .menu-item-card:hover {
  background-color: var(--theme-bg-hover);
}

/* Icon container — big, rounded */
.menu-item-icon {
  flex-shrink: 0;
  width: 3.25rem;
  height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background-color: var(--theme-bg-tertiary, #f3f4f6);
  transition: all 0.25s ease-in-out;
  margin-right: 0.25rem;
}

.dark .menu-item-icon,
[data-mode="dark"] .menu-item-icon {
  background-color: var(--theme-bg-tertiary, #374151);
}

.menu-item-icon .icon {
  width: 2rem;
  height: 2rem;
  color: var(--theme-text-muted, #6b7280);
  transition: all 0.25s ease-in-out;
}

.dark .menu-item-icon .icon,
[data-mode="dark"] .menu-item-icon .icon {
  color: var(--theme-text-secondary, #9ca3af);
}

/* Content wrapper (title + description) */
.menu-item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

/* Title */
.menu-item-card .menu-item-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--theme-text-primary, #111827);
  line-height: 1.3;
  white-space: normal;
  word-break: break-word;
}

.dark .menu-item-card .menu-item-label,
[data-mode="dark"] .menu-item-card .menu-item-label {
  color: var(--theme-text-primary, #f9fafb);
}

/* Description */
.menu-item-card .menu-item-description {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--theme-text-muted, #6b7280);
  line-height: 1.3;
  white-space: normal;
  word-break: break-word;
}

.dark .menu-item-card .menu-item-description,
[data-mode="dark"] .menu-item-card .menu-item-description {
  color: var(--theme-text-secondary, #9ca3af);
}

/* Color-based hover styles — colored border, shadow, icon bg & color */
.menu-color-blue:hover { border-color: #3b82f6 !important; box-shadow: 0 6px 16px -4px rgba(59,130,246,0.3); background-color: rgba(59,130,246,0.05) !important; }
.menu-color-blue:hover .menu-item-icon { background-color: #dbeafe; }
.menu-color-blue:hover .menu-item-icon .icon { color: #2563eb; }

.menu-color-emerald:hover { border-color: #059669 !important; box-shadow: 0 6px 16px -4px rgba(5,150,105,0.3); background-color: rgba(5,150,105,0.05) !important; }
.menu-color-emerald:hover .menu-item-icon { background-color: #d1fae5; }
.menu-color-emerald:hover .menu-item-icon .icon { color: #059669; }

.menu-color-amber:hover { border-color: #d97706 !important; box-shadow: 0 6px 16px -4px rgba(217,119,6,0.3); background-color: rgba(217,119,6,0.05) !important; }
.menu-color-amber:hover .menu-item-icon { background-color: #fef3c7; }
.menu-color-amber:hover .menu-item-icon .icon { color: #d97706; }

.menu-color-red:hover { border-color: #dc2626 !important; box-shadow: 0 6px 16px -4px rgba(220,38,38,0.3); background-color: rgba(220,38,38,0.05) !important; }
.menu-color-red:hover .menu-item-icon { background-color: #fee2e2; }
.menu-color-red:hover .menu-item-icon .icon { color: #dc2626; }

.menu-color-violet:hover { border-color: #7c3aed !important; box-shadow: 0 6px 16px -4px rgba(124,58,237,0.3); background-color: rgba(124,58,237,0.05) !important; }
.menu-color-violet:hover .menu-item-icon { background-color: #ede9fe; }
.menu-color-violet:hover .menu-item-icon .icon { color: #7c3aed; }

.menu-color-pink:hover { border-color: #db2777 !important; box-shadow: 0 6px 16px -4px rgba(219,39,119,0.3); background-color: rgba(219,39,119,0.05) !important; }
.menu-color-pink:hover .menu-item-icon { background-color: #fce7f3; }
.menu-color-pink:hover .menu-item-icon .icon { color: #db2777; }

.menu-color-cyan:hover { border-color: #0891b2 !important; box-shadow: 0 6px 16px -4px rgba(8,145,178,0.3); background-color: rgba(8,145,178,0.05) !important; }
.menu-color-cyan:hover .menu-item-icon { background-color: #cffafe; }
.menu-color-cyan:hover .menu-item-icon .icon { color: #0891b2; }

.menu-color-orange:hover { border-color: #ea580c !important; box-shadow: 0 6px 16px -4px rgba(234,88,12,0.3); background-color: rgba(234,88,12,0.05) !important; }
.menu-color-orange:hover .menu-item-icon { background-color: #ffedd5; }
.menu-color-orange:hover .menu-item-icon .icon { color: #ea580c; }

.menu-color-lime:hover { border-color: #65a30d !important; box-shadow: 0 6px 16px -4px rgba(101,163,13,0.3); background-color: rgba(101,163,13,0.05) !important; }
.menu-color-lime:hover .menu-item-icon { background-color: #ecfccb; }
.menu-color-lime:hover .menu-item-icon .icon { color: #65a30d; }

.menu-color-indigo:hover { border-color: #4f46e5 !important; box-shadow: 0 6px 16px -4px rgba(79,70,229,0.3); background-color: rgba(79,70,229,0.05) !important; }
.menu-color-indigo:hover .menu-item-icon { background-color: #e0e7ff; }
.menu-color-indigo:hover .menu-item-icon .icon { color: #4f46e5; }

.menu-color-teal:hover { border-color: #0d9488 !important; box-shadow: 0 6px 16px -4px rgba(13,148,136,0.3); background-color: rgba(13,148,136,0.05) !important; }
.menu-color-teal:hover .menu-item-icon { background-color: #ccfbf1; }
.menu-color-teal:hover .menu-item-icon .icon { color: #0d9488; }

.menu-color-green:hover { border-color: #16a34a !important; box-shadow: 0 6px 16px -4px rgba(22,163,74,0.3); background-color: rgba(22,163,74,0.05) !important; }
.menu-color-green:hover .menu-item-icon { background-color: #dcfce7; }
.menu-color-green:hover .menu-item-icon .icon { color: #16a34a; }

.menu-color-purple:hover { border-color: #9333ea !important; box-shadow: 0 6px 16px -4px rgba(147,51,234,0.3); background-color: rgba(147,51,234,0.05) !important; }
.menu-color-purple:hover .menu-item-icon { background-color: #f3e8ff; }
.menu-color-purple:hover .menu-item-icon .icon { color: #9333ea; }

/* Dark mode hover */
.dark .menu-color-blue:hover, [data-mode="dark"] .menu-color-blue:hover { background-color: rgba(59,130,246,0.1) !important; }
.dark .menu-color-blue:hover .menu-item-icon, [data-mode="dark"] .menu-color-blue:hover .menu-item-icon { background-color: rgba(59,130,246,0.2); }
.dark .menu-color-emerald:hover, [data-mode="dark"] .menu-color-emerald:hover { background-color: rgba(5,150,105,0.1) !important; }
.dark .menu-color-emerald:hover .menu-item-icon, [data-mode="dark"] .menu-color-emerald:hover .menu-item-icon { background-color: rgba(5,150,105,0.2); }
.dark .menu-color-amber:hover, [data-mode="dark"] .menu-color-amber:hover { background-color: rgba(217,119,6,0.1) !important; }
.dark .menu-color-amber:hover .menu-item-icon, [data-mode="dark"] .menu-color-amber:hover .menu-item-icon { background-color: rgba(217,119,6,0.2); }
.dark .menu-color-red:hover, [data-mode="dark"] .menu-color-red:hover { background-color: rgba(220,38,38,0.1) !important; }
.dark .menu-color-red:hover .menu-item-icon, [data-mode="dark"] .menu-color-red:hover .menu-item-icon { background-color: rgba(220,38,38,0.2); }
.dark .menu-color-violet:hover, [data-mode="dark"] .menu-color-violet:hover { background-color: rgba(124,58,237,0.1) !important; }
.dark .menu-color-violet:hover .menu-item-icon, [data-mode="dark"] .menu-color-violet:hover .menu-item-icon { background-color: rgba(124,58,237,0.2); }
.dark .menu-color-pink:hover, [data-mode="dark"] .menu-color-pink:hover { background-color: rgba(219,39,119,0.1) !important; }
.dark .menu-color-pink:hover .menu-item-icon, [data-mode="dark"] .menu-color-pink:hover .menu-item-icon { background-color: rgba(219,39,119,0.2); }
.dark .menu-color-cyan:hover, [data-mode="dark"] .menu-color-cyan:hover { background-color: rgba(8,145,178,0.1) !important; }
.dark .menu-color-cyan:hover .menu-item-icon, [data-mode="dark"] .menu-color-cyan:hover .menu-item-icon { background-color: rgba(8,145,178,0.2); }
.dark .menu-color-orange:hover, [data-mode="dark"] .menu-color-orange:hover { background-color: rgba(234,88,12,0.1) !important; }
.dark .menu-color-orange:hover .menu-item-icon, [data-mode="dark"] .menu-color-orange:hover .menu-item-icon { background-color: rgba(234,88,12,0.2); }
.dark .menu-color-lime:hover, [data-mode="dark"] .menu-color-lime:hover { background-color: rgba(101,163,13,0.1) !important; }
.dark .menu-color-lime:hover .menu-item-icon, [data-mode="dark"] .menu-color-lime:hover .menu-item-icon { background-color: rgba(101,163,13,0.2); }
.dark .menu-color-indigo:hover, [data-mode="dark"] .menu-color-indigo:hover { background-color: rgba(79,70,229,0.1) !important; }
.dark .menu-color-indigo:hover .menu-item-icon, [data-mode="dark"] .menu-color-indigo:hover .menu-item-icon { background-color: rgba(79,70,229,0.2); }
.dark .menu-color-teal:hover, [data-mode="dark"] .menu-color-teal:hover { background-color: rgba(13,148,136,0.1) !important; }
.dark .menu-color-teal:hover .menu-item-icon, [data-mode="dark"] .menu-color-teal:hover .menu-item-icon { background-color: rgba(13,148,136,0.2); }
.dark .menu-color-green:hover, [data-mode="dark"] .menu-color-green:hover { background-color: rgba(22,163,74,0.1) !important; }
.dark .menu-color-green:hover .menu-item-icon, [data-mode="dark"] .menu-color-green:hover .menu-item-icon { background-color: rgba(22,163,74,0.2); }
.dark .menu-color-purple:hover, [data-mode="dark"] .menu-color-purple:hover { background-color: rgba(147,51,234,0.1) !important; }
.dark .menu-color-purple:hover .menu-item-icon, [data-mode="dark"] .menu-color-purple:hover .menu-item-icon { background-color: rgba(147,51,234,0.2); }
</style>
