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

const router = useRouter()
const url = useRequestURL()
const detechMobile = ref('')


const sideBar = useSideBar()
const tabs = useTabs()
const activeSave = useActiveSave()
const user = useCookie('logship_user')
const role = useCookie('logship_role')
const config = useRuntimeConfig()
//const { locale, setLocale } = useI18n()

const lang = ref('en-US')
const langs = ref([
  {
    code: 'en-US',
    name: 'English'
  },
  {
    code: 'de-DE',
    name: 'German'
  },
  /*{
    code: 'fr-FR',
    name: 'French'
  },
  {
    code: 'it-IT',
    name: 'Italian'
  },
  {
    code: 'no-NO',
    name: 'Norwegian'
  },
  {
    code: 'pl-PL',
    name: 'Polish'
  },
  {
    code: 'sv-SE',
    name: 'Swedish'
  },
  {
    code: 'uk-UA',
    name: 'Ukrainian'
  }*/
])
const getLang = computed(() => {
  return navsLag(lang.value)
})
const getLangName = computed(() => {
  return langs.value.filter(i => i.code === lang.value)?.[0]?.name ?? 'English'
})

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

// This will be set using the composable method
const defaultSideBarMenu = ref('c') // Changed from 'Menu' to 'c'

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

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

const dropDownHandler = (e) => {
  e.stopPropagation()
  if(activeSave.value) {
    toast({
      message: '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')
    } else {
      e.target.classList.add('active')
    }
  }
}

const dropParentHandler = (e) => {
  e.stopPropagation()
  if(activeSave.value) {
    toast({
      message: 'Save button is active, please submit the data before leaving!',
      type: 'is-warning',
      duration: 2000
    })
  } else {
    if(e.target.parentElement.classList.contains('active')) {
      e.target.parentElement.classList.remove('active')
    } else {
      e.target.parentElement.classList.add('active')
    }
  }
}

const dropItemHandler = (e) => {
  e.stopPropagation()
  if(activeSave.value) {
    toast({
      message: 'Save button is active, please submit the data before leaving!',
      type: 'is-warning',
      duration: 2000
    })
  } else {
    if(e.target.parentElement.parentElement.classList.contains('active')) {
      e.target.parentElement.parentElement.classList.remove('active')
    } else {
      e.target.parentElement.parentElement.classList.add('active')
    }
  }
}

const dropItemParentHandler = (e) => {
  e.stopPropagation()
  if(activeSave.value) {
    toast({
      message: 'Save button is active, please submit the data before leaving!',
      type: 'is-warning',
      duration: 2000
    })
  } else {
    if(e.target.parentElement.parentElement.parentElement.classList.contains('active')) {
      e.target.parentElement.parentElement.parentElement.classList.remove('active')
    } else {
      e.target.parentElement.parentElement.parentElement.classList.add('active')
    }
  }
}

const darkMode = () => {
  if(activeSave.value) {
    toast({
      message: 'Save button is active, please submit the data before leaving!',
      type: 'is-warning',
      duration: 2000
    })
  } else {
    document.body.classList.toggle("dark");
  }
}

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 goTo = async (toPath, pathName, event = null) => {
  console.log('goTo called:', toPath, pathName)

  if (event) {
    event.preventDefault()
    event.stopPropagation()
  }

  if(activeSave.value) {
    toast({
      message: 'Save button is active, please submit the data before leaving!',
      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)
  }
}

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

const globalSearch = ref('')
const globalSearchRef = ref(null)
const globalSearchModal = ref(false)
const openGlobalSearchModal = () => {
  if(globalSearchRef.value) {
    globalSearchRef.value.blur()
  }
  globalSearchModal.value = true
}


onBeforeMount(() => {
  /*detechMobile.value = !navigator.userAgent.match(/Android/i) || !navigator.userAgent.match(/webOS/i) || !navigator.userAgent.match(/iPhone/i) || !navigator.userAgent.match(/iPad/i) || !navigator.userAgent.match(/iPod/i) || !navigator.userAgent.match(/BlackBerry/i) || !navigator.userAgent.match(/Windows Phone/i)

  if(detechMobile.value) {
    router.push('/military-metals-corp')
  }*/

  let mediaQuery = window.matchMedia("(max-width: 800px)");

  function mediaChangeHandler(mq) {
    if(mq.matches) {
      detechMobile.value = 'mobile'
    } else {
      detechMobile.value = 'desktop'
    }
  }

  mediaChangeHandler(mediaQuery)
  mediaQuery.addEventListener("change", mediaChangeHandler)

  // 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)

  // Cleanup listener on unmount
  onBeforeUnmount(() => {
    window.removeEventListener('keydown', handleKeyDown)
  })
})
</script>

<template>
  <nav class="sd-none">
      <div class="nav__wrapper">
        <!--<UIcon name="i-mdi-arrow-right-thick" />-->
        <!--Quicklink:-->
        <div v-if="defaultSideBarMenu !== 'c'" id="quickmenu" class="is-hidden-touch">
          <UButton
              icon=""
              class="margr group-procurement"
              size="sm"
              color="primary"
              variant="solid"
              label="Warenanmeldung"
              @click="(e) => goTo('/procurements/orders', 'Wareneingang Anmelden', e)"
              :trailing="false"
          />
          <UButton
              icon=""
              class="margr group-procurement"
              size="sm"
              color="primary"
              variant="solid"
              label="Wareneingang"
              @click="(e) => goTo('/procurements/receipts', 'Wareneingang Anmelden', e)"
              :trailing="false"
          />
          <UButton
              icon=""
              class="margr group-sales"
              size="sm"
              color="primary"
              variant="solid"
              :label="getLang['sales_order']"
              @click="(e) => goTo('/sales/orders', 'Aufträge', e)"
              :trailing="false"
          />
          <UButton
              icon=""
              class="margr group-sales"
              size="sm"
              color="primary"
              variant="solid"
              label="Lieferscheine Generieren"
              @click="(e) => goTo('/generate-shipments', 'Lieferscheine Generieren', e)"
              :trailing="false"
          />
          <UButton
              icon=""
              class="margr group-sales"
              size="sm"
              color="primary"
              variant="solid"
              label="Lieferscheine"
              @click="(e) => goTo('/sales/shipments', 'Lieferscheine', e)"
              :trailing="false"
          />
        <UButton
            icon=""
            class="margr group-materials"
            size="sm"
            color="primary"
            variant="solid"
            :label="getLang['product']"
            @click="(e) => goTo('/materials/products', 'Artikel', e)"
            :trailing="false"
        />
          <UButton
              icon=""
              class="margr group-materials"
              size="sm"
              color="primary"
              variant="solid"
              :label="getLang['locatorlabels']"
              @click="(e) => goTo('/locator-labels', 'Lagerort Druck', e)"
              :trailing="false"
          />
          <UButton
              icon=""
              class="margr group-materials"
              size="sm"
              color="primary"
              variant="solid"
              :label="getLang['lagerortmanager']"
              @click="(e) => goTo('/materials/locators', 'Lagerort Manager', e)"
              :trailing="false"
          />
          <UButton
              icon=""
              class="margr group-materials"
              size="sm"
              color="primary"
              variant="solid"
              :label="getLang['materialplanning']"
              @click="(e) => goTo('/materials/planning', 'Material Planning', e)"
              :trailing="false"
          />
        <UButton
            icon=""
            class="margr group-materials"
            size="sm"
            color="primary"
            variant="solid"
            label="FFN Stocks"
            @click="(e) => goTo('/fulfillment/stocks', 'JTL-FFN Stocks', e)"
            :trailing="false"
        />
        <UButton
            icon=""
            class="margr group-fulfillment"
            size="sm"
            color="primary"
            variant="solid"
            label="FFN Customers"
            @click="(e) => goTo('/fulfillment/customers', 'FFN Customers', e)"
            :trailing="false"
        />
        <UButton
            icon=""
            class="margr group-fulfillment"
            size="sm"
            color="primary"
            variant="solid"
            label="FFN Onboarding"
            @click="(e) => goTo('/fulfillment/onboarding', 'FFN Onboarding', e)"
            :trailing="false"
        />
        <UButton
            icon=""
            class="margr group-fulfillment"
            size="sm"
            color="primary"
            variant="solid"
            label="FFN Pricing Rules"
            @click="(e) => goTo('/fulfillment/product-pricing-rules', 'FFN Pricing Rules', e)"
            :trailing="false"
        />
        <!-- <UButton
            icon=""
            class="margr group-test"
            size="sm"
            color="primary"
            variant="solid"
            label="FFN Test Grouping"
            @click="goTo('/fulfillment/test-grouping', 'FFN Test Grouping')"
            :trailing="false"
        />
        <UButton
            icon=""
            class="margr group-test"
            size="sm"
            color="primary"
            variant="solid"
            label="FFN Test Viewer"
            @click="goTo('/fulfillment/test-data-viewer', 'FFN Test Viewer')"
            :trailing="false"
        /> -->
          <UButton
              icon=""
              class="margr group-partners"
              size="sm"
              color="primary"
              variant="solid"
              :label="getLang['bpartner']"
              @click="(e) => goTo('/partners/partners', 'Kunden', e)"
              :trailing="false"
          />
          <UButton
              icon=""
              class="margr group-partners"
              size="sm"
              color="primary"
              variant="solid"
              :label="getLang['quickorder']"
              @click="(e) => goTo('/partners/partners/add', 'Quick Order', e)"
              :trailing="false"
          />
        <UButton
            icon=""
            class="margr group-support"
            size="sm"
            color="primary"
            variant="solid"
            :label="getLang['request']"
            @click="(e) => goTo('/requests/requests/create', 'Tickets', e)"
            :trailing="false"
        />
        <UButton
            icon=""
            class="margr group-support"
            size="sm"
            color="primary"
            variant="solid"
            label="Request Chat"
            @click="(e) => goTo('/requests/requests/chat', 'Request Chat', e)"
            :trailing="false"
        />
          <UButton
              icon=""
              class="margr group-rma"
              size="sm"
              color="primary"
              variant="solid"
              :label="getLang['quickrmareturn']"
              @click="(e) => goTo('/sales/orders/return', '+ Quick RMA', e)"
              :trailing="false"
          />
          <UButton
              icon=""
              class="margr group-rma"
              size="sm"
              color="primary"
              variant="solid"
              :label="getLang['quickrmalist']"
              @click="(e) => goTo('/sales/customer-rma', '+ RMA Liste', e)"
              :trailing="false"
          />


<!--        <UButton-->
<!--            icon="i-mdi-plus"-->
<!--            class="margr"-->
<!--            size="sm"-->
<!--            color="primary"-->
<!--            variant="solid"-->
<!--            :label="getLang['customer_rma']"-->
<!--            @click="goTo('/rma/customer-rma/create', 'Kunden RMA')"-->
<!--            :trailing="false"-->
<!--        />-->
<!--        <UButton-->
<!--            icon="i-mdi-plus"-->
<!--            class="margr"-->
<!--            size="sm"-->
<!--            color="primary"-->
<!--            variant="solid"-->
<!--            :label="getLang['vendor_rma']"-->
<!--            @click="goTo('/rma/vendor-rma/create', 'Lieferanten RMA')"-->
<!--            :trailing="false"-->
<!--        />-->

          <!--    <UDropdown :items="items" :popper="{ placement: 'bottom-start' }">-->
          <!--      <UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />-->
          <!--    </UDropdown>-->
        </div>

        <div class="info__text">
          <span id="toggle" @click="showSideBar">
            <svg width="15" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="pointerEvents-none">
              <path
                d="M16 132h416c8.8 0 16-7.2 16-16V76c0-8.8-7.2-16-16-16H16C7.2 60 0 67.2 0 76v40c0 8.8 7.2 16 16 16zm0 160h416c8.8 0 16-7.2 16-16v-40c0-8.8-7.2-16-16-16H16c-8.8 0-16 7.2-16 16v40c0 8.8 7.2 16 16 16zm0 160h416c8.8 0 16-7.2 16-16v-40c0-8.8-7.2-16-16-16H16c-8.8 0-16 7.2-16 16v40c0 8.8 7.2 16 16 16z" />
            </svg>
          </span>

        </div>
        <div class="navigation" style="gap: 5px;">

          <!-- Staff live-chat (isolated module): renders nothing unless enabled
               + non-limited role. Error-boundaried so it can never break the navbar. -->
          <ClientOnly>
            <NuxtErrorBoundary>
              <ChatBadge />
              <template #error="{ error }">
                <span style="display:none">{{ error }}</span>
              </template>
            </NuxtErrorBoundary>
          </ClientOnly>

<!--          <div class="mode__switcher dropdown__wrapper" @click="darkMode">-->
<!--            <svg id="i-moon" class="pointerEvents-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" stroke="#000"-->
<!--              stroke-linecap="round" stroke-linejoin="round" stroke-width="3">-->
<!--              <path d="M14 2C 9 2 3 7 3 15 3 23 9 29 17 29 25 29 30 23 30 18 19 25 7 13 14 2Z"></path>-->
<!--            </svg>-->
<!--          </div>-->

<!--          <div class="mode__switcher dropdown__wrapper">-->
<!--            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">-->
<!--              <path-->
<!--                d="M447.8 64H64c-23.6 0-42.7 19.1-42.7 42.7v63.9H64v-63.9h383.8v298.6H298.6V448H448c23.6 0 42.7-19.1 42.7-42.7V106.7C490.7 83.1 471.4 64 447.8 64zM21.3 383.6L21.3 383.6l0 63.9h63.9C85.2 412.2 56.6 383.6 21.3 383.6L21.3 383.6zM21.3 298.6V341c58.9 0 106.6 48.1 106.6 107h42.7C170.7 365.6 103.7 298.7 21.3 298.6zM213.4 448h42.7c-.5-129.5-105.3-234.3-234.8-234.6l0 42.4C127.3 255.6 213.3 342 213.4 448z" />-->
<!--            </svg>-->
<!--            <div class="indicator green">2</div>-->
<!--          </div>-->

<!--          <div class="notifications dropdown__wrapper" @click.self="dropDownHandler($event)">-->
<!--            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="pointerEvents-none">-->
<!--              <path-->
<!--                d="M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V208c0-61.9 50.1-112 112-112zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z" />-->
<!--            </svg>-->

<!--            <div class="indicator pointerEvents-none">4</div>-->

<!--            <div @click.self="dropParentHandler($event)" class="dropdown_menu center notification__menu">-->
<!--              <div class="header pointerEvents-none">-->
<!--                {{ getLang['notifications'] }}-->
<!--              </div>-->

<!--              <div class="items">-->
<!--                <a href="javascript:void(0)" @click.self="dropItemParentHandler($event);">-->

<!--                  <div class="item pointerEvents-none">-->
<!--                    <p>{{ getLang['delivery_processing'] }}</p>-->

<!--                    <span>10 min</span>-->
<!--                  </div>-->
<!--                </a>-->

<!--                <a href="javascript:void(0)" @click.self="dropItemParentHandler($event);">-->

<!--                  <div class="item green pointerEvents-none">-->
<!--                    <p>{{ getLang['order_completed'] }}</p>-->

<!--                    <span>10 min</span>-->
<!--                  </div>-->
<!--                </a>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->

          <div class="actions dropdown__wrapper" @click.self="dropDownHandler($event)">
            <span @click.self="dropParentHandler($event)" class="tf-icon ti ti-language ti-xs me-1 color-inherit mt-0px"></span>
            <div class="info cursor-pointer pointerEvents-none">
              <p class="mobileusername">{{ getLangName }}</p>
            </div>
            <div @click.self="dropParentHandler($event)" class="dropdown_menu profile__menu language_menu">
              <div v-for="(item, index) in langs" :key="index" class="item" :class="{'fw-bold': item.name === getLangName}">
                <button @click="setLocale(item.code)">{{ item.name }}</button>
              </div>
            </div>
          </div>

          <div class="actions dropdown__wrapper" @click.self="dropDownHandler($event)">
<!--            <div class="avatar cursor-pointer pointerEvents-none">-->
<!--              <img :src="user?.AD_Image_ID?.data ? 'data:text/plain;charset=US-ASCII;base64,'+user.AD_Image_ID.data : '/assets/avatar.png'" class="pointerEvents-none" alt="" />-->
<!--            </div>-->


              <div v-if="detechMobile == 'mobile'" class="group " :class="activeSave ? 'pointerEvents-none opacity-0.6' : ''">
                <input ref="globalSearchRef" type="search" v-model="globalSearch" class="input groupItem" @keyup.enter="openGlobalSearchModal" placeholder="Suche Auftrag,Kunde..." />
<!--                <button type="button" class="button groupItem" @click="openGlobalSearchModal">-->
<!--                  <i class="pointerEvents-none menu-icon tf-icons ti ti-search fg-hexfff"></i>-->
<!--                </button>-->
              </div>

            <span @click.self="dropParentHandler($event)" class="tf-icon ti ti-menu-2 ti-xs me-1 color-inherit mt-0px"></span>
            <div class="info cursor-pointer pointerEvents-none">
              <p class="mobileusername">{{ user?.Name || getLang['guest'] }}</p>
<!--          <p><span>{{ user?.EMail || getLang['user'] }}</span></p>-->
            </div>

            <div @click.self="dropParentHandler($event)" class="dropdown_menu profile__menu">
              <div class="item" @click.prevent="dropItemHandler($event); goTo('/users/profile', 'User Profile');">

                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="pointerEvents-none">
                  <path
                    d="M304 128a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM49.3 464H398.7c-8.9-63.3-63.3-112-129-112H178.3c-65.7 0-120.1 48.7-129 112zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3z" />
                </svg>

                <p class="pointerEvents-none">{{ getLang['account'] }}</p>
              </div>
<!--              <div class="item" @click.self="dropItemHandler($event);">-->

<!--                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="pointerEvents-none">-->
<!--                  <path-->
<!--                    d="M64 112c-8.8 0-16 7.2-16 16v22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1V128c0-8.8-7.2-16-16-16H64zM48 212.2V384c0 8.8 7.2 16 16 16H448c8.8 0 16-7.2 16-16V212.2L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64H448c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z" />-->
<!--                </svg>-->


<!--                <p class="pointerEvents-none">{{ getLang['inbox'] }}</p>-->
<!--              </div>-->

              <!--<div v-if="lang === 'en-US'" class="item">
                <button @click="setLocale('de-DE')">{{ getLang['german'] }}</button><br>
              </div>

              <div v-else class="item">
                <button @click="setLocale('en-US')">{{ getLang['english'] }}</button>
              </div>-->

              <div class="item" @click.self="dropItemHandler($event); logout();">

                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="pointerEvents-none">
                  <path
                    d="M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z" />
                </svg>

                <p class="pointerEvents-none">{{ getLang['log_out'] }}</p>
              </div>
            </div>

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

<style >
@ref pointerEvents-none cursor-pointer;

p.quicklinkheader {
    border: 1px solid #a2a2a2;
    padding: 5px 10px 5px 5px;
    border-radius: 3px;
}

span.i-mdi-arrow-right-thick {
  display: block !important;
  float: left;
  height: 23px !important;
}

main nav .nav__wrapper .info__text {
/*background-color: #e1e1e1;
width: 100%;*/
border-radius: 3px;
color: white !important;
  margin-right:10px;
}

.margr {
  background-color: transparent !important;
}

.margr:hover {
  background-color: #3273dc;
  color: white !important;
}

/* Group Colors */
.group-procurement {
  background-color: #8B5CF6 !important;
  color: white !important;
}

.group-procurement:hover {
  background-color: #7C3AED !important;
}

.group-sales {
  background-color: #3B82F6 !important;
  color: white !important;
}

.group-sales:hover {
  background-color: #2563EB !important;
}

.group-materials {
  background-color: #10B981 !important;
  color: white !important;
}

.group-materials:hover {
  background-color: #059669 !important;
}

.group-fulfillment {
  background-color: #F59E0B !important;
  color: white !important;
}

.group-fulfillment:hover {
  background-color: #D97706 !important;
}

.group-test {
  background-color: #EC4899 !important;
  color: white !important;
}

.group-test:hover {
  background-color: #DB2777 !important;
}

.group-partners {
  background-color: #06B6D4 !important;
  color: white !important;
}

.group-partners:hover {
  background-color: #0891B2 !important;
}

.group-support {
  background-color: #6366F1 !important;
  color: white !important;
}

.group-support:hover {
  background-color: #4F46E5 !important;
}

.group-rma {
  background-color: #EF4444 !important;
  color: white !important;
}

.group-rma:hover {
  background-color: #DC2626 !important;
}


nav.sd-none {
  border-bottom: 1px solid black;
  margin-bottom: 13px;
}

@media (max-width: 1024px) {
  #quickmenu {
    display:none;
  }
  .actions.dropdown__wrapper {
    margin: 0px !important;
    padding: 0px !important;
    border: 0px !important;
  }



}

@media (min-width: 1025px) {
  #quickmenu {
    overflow: auto;
    white-space: nowrap;
  }
}
#quickmenu > button:nth-child(1) {
  margin-left: 5px;
}

#quickmenu > button {
  border: 1px solid grey;
  padding: 2px;
  margin-right: 5px;
  padding-left: 3px;
  padding-right: 3px;
  font-size: 11px;
}

.mobileusername {
  margin-right: 10px;
}

.actions.dropdown__wrapper {
  border: 1px solid grey;
  border-radius: 3px;
  padding: 3px;
  margin-right: 10px;
  padding-left: 13px;
}

.language_menu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 10px;
  width: 250px !important;   
}
</style>