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

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

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


const organizations = useCookie('logship_organizations')
const organization = useCookie('logship_organization')
const organizationId = useCookie('logship_organization_id')

const user = useCookie('logship_user')
const role = ref({})
const config = useRuntimeConfig()
const router = useRouter()
const activeSave = useActiveSave()

// ── Non-working-day notice (limited / fulfilment-customer roles only) ──────
// When today falls on a warehouse non-working day (the same active feed the
// dashboard "Nicht-Arbeitstage" card reads), an amber warning-triangle button
// appears left of the search field. Clicking it opens the same shipping-time
// info text the calendar's info button shows.
const { t } = useTranslation()
const pad = (n) => String(n).padStart(2, '0')
const nonWorkingToday = ref(null) // the matching cust_nonworkingdays record, or null
const showNwdInfo = ref(false)

const todayLabel = computed(() => {
  const now = new Date()
  return `${pad(now.getDate())}.${pad(now.getMonth() + 1)}.${now.getFullYear()}`
})

const checkNonWorkingToday = async () => {
  try {
    // Client-side only call (runs from onMounted); the browser sends auth cookies.
    const res = await $fetch('/api/dashboard/non-working-days')
    const records = res?.records || []
    const now = new Date()
    const todayStr = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`
    // First record whose [DateFrom..DateTo] span covers today (DateTo optional →
    // single-day closure). Plain string compare is safe for zero-padded ISO dates.
    nonWorkingToday.value = records.find((r) => {
      const from = r.dateFrom
      const to = r.dateTo || r.dateFrom
      return todayStr >= from && todayStr <= to
    }) || null
  } catch {
    nonWorkingToday.value = null
  }
}

const filteredData = computed(() => {
  if (!organizations.value || !Array.isArray(organizations.value)) {
    return []
  }
  return organizations.value.filter(item => item.id === organizationId.value)
})

const lang = ref('en-US')
const getLang = computed(() => {
  return navsLag(lang.value)
})
onMounted(() => {
  if(document.documentElement.getAttribute('lang')) {
    lang.value = document.documentElement.getAttribute('lang')
  }
  defaultSideBarMenu.value = getMenuType()
  // Only limited (fulfilment-customer) roles see the non-working-day notice.
  if (defaultSideBarMenu.value === 'c') {
    checkNonWorkingToday()
  }
})

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

const createTicket = () => {
  // limited / fulfilment-customer roles use the customer ticket page; everyone else the full requests page
  const link = defaultSideBarMenu.value === 'c' ? '/requests/my-tickets/create' : '/requests/requests/create'
  tabs.value = tabs.value.map(t => ({ ...t, active: false }))
  const existing = tabs.value.findIndex(t => t.link === link)
  if (existing >= 0) tabs.value[existing].active = true
  else tabs.value.push({ link, text: getLang.value?.create_ticket || 'Ticket erstellen', active: true })
  localStorage.setItem('tabs', JSON.stringify(tabs.value))
  router.push(link)
}
// Full quick-add form (same as /partners/partners/add) rendered in a modal
// when the "Auftrag erstellen" button is clicked.
const showOrderQuickAddModal = ref(false)
const createOrder = () => { showOrderQuickAddModal.value = true }

const openLink = (link) => {
  if(activeSave.value) {
    toast({
      message: 'Save button is active, please submit the data before leaving!',
      type: 'is-warning',
      duration: 2000
    })
  } else {
    router.push(link)
  }
}
</script>

<template>
  <nav class="navbar topbar-nav hidebiggermob">
    <div class="navbar-brand">
      <div class="navbar-burger burger" data-target="navMenubd-example">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>

    <div id="navMenubd-example" class="navbar-menu" style="padding: 0 20px;">
      <div class="navbar-start">
        <!--        <div class="navbar-item has-dropdown is-hoverable">-->
        <!--          <a class="navbar-link" href="/documentation/overview/start/">-->
        <!--            {{ getLang['admin_panel'] }}-->
        <!--          </a>-->
        <!--          <div class="navbar-dropdown ">-->
        <!--            <a class="navbar-item " href="#">-->
        <!--              {{ getLang['setup'] }}-->
        <!--            </a>-->
        <!--            <a class="navbar-item " href="#">-->
        <!--              {{ getLang['configuration'] }}-->
        <!--            </a>-->
        <!--            <a class="navbar-item " href="#">-->
        <!--              {{ getLang['marketplaces'] }}-->
        <!--            </a>-->
        <!--            <a class="navbar-item " href="#">-->
        <!--              {{ getLang['price_portals'] }}-->
        <!--            </a>-->
        <!--            <a class="navbar-item " href="#">-->
        <!--              {{ getLang['import_export'] }}-->
        <!--            </a>-->
        <!--            <a class="navbar-item " href="#">-->
        <!--              {{ getLang['status'] }}-->
        <!--            </a>-->

        <!--            <hr class="navbar-divider">-->
        <!--            <div class="navbar-item">-->
        <!--              <div>-->
        <!--                <p class="is-size-6-desktop">-->
        <!--                  <strong class="has-text-info">{{ config.public.githash }}</strong>-->
        <!--                </p>-->

        <!--                <small>-->
        <!--                  <a class="bd-view-all-versions" href="#">{{ getLang['view_all_versions'] }}</a>-->
        <!--                </small>-->

        <!--              </div>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </div>-->
        <!--        <div class="navbar-item has-dropdown is-hoverable is-mega">-->
        <!--          <div class="navbar-link flex">-->
        <!--            {{ getLang['quick_access'] }} <span class="tag is-info ml-2">{{ getLang['update'] }}</span>-->
        <!--          </div>-->
        <!--          <div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">-->
        <!--            <div class="container is-fluid">-->
        <!--              <div class="columns">-->
        <!--                <div class="column">-->
        <!--                  <h1 class="title is-6 is-mega-menu-title">{{ getLang['bpartner'] }}</h1>-->
        <!--                  <a class="navbar-item" href="javascript:void(0);" @click.prevent="openLink('/partners/partners')">-->
        <!--                    <div class="navbar-content">-->
        <!--                      <p>-->
        <!--                        <small class="has-text-info">{{ getLang['manage'] }}</small>-->
        <!--                      </p>-->
        <!--                      <p>{{ getLang['show_all_bpartner'] }}</p>-->
        <!--                    </div>-->
        <!--                  </a>-->
        <!--                  <a class="navbar-item" href="javascript:void(0);" @click.prevent="openLink('/partners/partners/create')">-->
        <!--                    <div class="navbar-content">-->
        <!--                      <p>-->
        <!--                        <small class="has-text-info">{{ getLang['create'] }}</small>-->
        <!--                      </p>-->
        <!--                      <p>{{ getLang['create_new_bpartner'] }}</p>-->
        <!--                    </div>-->
        <!--                  </a>-->
        <!--                  <a class="navbar-item" href="javascript:void(0);" @click.prevent="openLink('/2017/08/03/list-of-tags/')">-->
        <!--                    <div class="navbar-content">-->
        <!--                      <p>-->
        <!--                        <small class="has-text-info">{{ getLang['communicate'] }}</small>-->
        <!--                      </p>-->
        <!--                      <p>{{ getLang['sent_message'] }}</p>-->
        <!--                    </div>-->
        <!--                  </a>-->
        <!--                </div>-->
        <!--                <div class="column">-->
        <!--                  <h1 class="title is-6 is-mega-menu-title">{{ getLang['products'] }}</h1>-->
        <!--                  <a class="navbar-item" href="javascript:void(0);" @click.prevent="openLink('/materials/products')">-->
        <!--                    <div class="navbar-content">-->
        <!--                      <p>-->
        <!--                        <small class="has-text-info">{{ getLang['manage'] }}</small>-->
        <!--                      </p>-->
        <!--                      <p>{{ getLang['show_all_products'] }}</p>-->
        <!--                    </div>-->
        <!--                  </a>-->
        <!--                  <a class="navbar-item" href="javascript:void(0);" @click.prevent="openLink('/materials/products/create')">-->
        <!--                    <div class="navbar-content">-->
        <!--                      <p>-->
        <!--                        <small class="has-text-info">{{ getLang['create'] }}</small>-->
        <!--                      </p>-->
        <!--                      <p>{{ getLang['create_new_products'] }}</p>-->
        <!--                    </div>-->
        <!--                  </a>-->
        <!--                </div>-->
        <!--                <div class="column">-->
        <!--                  <h1 class="title is-6 is-mega-menu-title">{{ getLang['orders'] }}</h1>-->
        <!--                  <a class="navbar-item" href="javascript:void(0);" @click.prevent="openLink('/sales/orders')">-->
        <!--                    <div class="navbar-content">-->
        <!--                      <p>-->
        <!--                        <small class="has-text-info">{{ getLang['manage'] }}</small>-->
        <!--                      </p>-->
        <!--                      <p>{{ getLang['show_all_orders'] }}</p>-->
        <!--                    </div>-->
        <!--                  </a>-->
        <!--                  <a class="navbar-item" href="javascript:void(0);" @click.prevent="openLink('/sales/orders/create')">-->
        <!--                    <div class="navbar-content">-->
        <!--                      <p>-->
        <!--                        <small class="has-text-info">{{ getLang['create'] }}</small>-->
        <!--                      </p>-->
        <!--                      <p>{{ getLang['create_new_sales_order'] }}</p>-->
        <!--                    </div>-->
        <!--                  </a>-->
        <!--                </div>-->
        <!--                <div class="column">-->
        <!--                  <h1 class="title is-6 is-mega-menu-title">{{ getLang['erp_menu'] }}</h1>-->
        <!--                  <a class="navbar-item " href="#">-->
        <!--                    {{ getLang['overview'] }}-->
        <!--                  </a>-->
        <!--                  <a class="navbar-item " href="#">-->
        <!--                    {{ getLang['modifiers'] }}-->
        <!--                  </a>-->
        <!--                  <a class="navbar-item " href="#">-->
        <!--                    {{ getLang['columns'] }}-->
        <!--                  </a>-->
        <!--                  <a class="navbar-item " href="#">-->
        <!--                    {{ getLang['layout'] }}-->
        <!--                  </a>-->
        <!--                </div>-->
        <!--              </div>-->
        <!--            </div>-->

        <!--            <hr class="navbar-divider">-->
        <!--            <div class="navbar-item">-->
        <!--              <div class="navbar-content">-->
        <!--                <div class="level is-mobile">-->
        <!--                  <div class="level-left">-->
        <!--                    <div class="level-item">-->
        <!--                      <strong>{{ getLang['stay_up_to_date'] }}</strong>-->
        <!--                    </div>-->
        <!--                  </div>-->
        <!--                  <div class="level-right">-->
        <!--                    <div class="level-item">-->
        <!--                      <a class="button bd-is-rss is-small" href="#">-->
        <!--                      <span class="icon is-small">-->
        <!--                        <i class="fa fa-rss"></i>-->
        <!--                      </span>-->
        <!--                        <span>{{ getLang['subscribe'] }}</span>-->
        <!--                      </a>-->
        <!--                    </div>-->
        <!--                  </div>-->
        <!--                </div>-->
        <!--              </div>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </div>-->
        <!--        <div class="navbar-item has-dropdown is-hoverable">-->
        <!--          <div class="navbar-link">-->
        <!--            {{ getLang['upgrade'] }}-->
        <!--          </div>-->
        <!--          <div id="moreDropdown" class="navbar-dropdown ">-->
        <!--            <a class="navbar-item " href="#">-->
        <!--              <div class="level is-mobile">-->
        <!--                <div class="level-left">-->
        <!--                  <div class="level-item">-->
        <!--                    <p>-->
        <!--                      <strong>{{ getLang['change_subscription'] }}</strong>-->
        <!--                      <br>-->
        <!--                      <small>{{ getLang['upgrade_or_downgrade_account'] }}</small>-->
        <!--                    </p>-->
        <!--                  </div>-->
        <!--                </div>-->
        <!--                <div class="level-right">-->
        <!--                  <div class="level-item">-->
        <!--                  <span class="icon has-text-info">-->
        <!--                    <i class="fa fa-plug"></i>-->
        <!--                  </span>-->
        <!--                  </div>-->
        <!--                </div>-->
        <!--              </div>-->
        <!--            </a>-->
        <!--          </div>-->
        <!--        </div>-->
        <!--        <a class="navbar-item " href="#">-->
        <!--          <span class="bd-emoji">🎨</span> &nbsp;{{ getLang['upcoming'] }}-->
        <!--        </a>-->
        <!-- LEFT zone: global search field with an inline search icon. -->
        <div class="topbar-search" :class="activeSave ? 'pointerEvents-none opacity-0.6' : ''">
          <i class="ti ti-search topbar-search__icon pointerEvents-none"></i>
          <input ref="globalSearchRef" type="search" v-model="globalSearch" class="topbar-search__input" @keyup.enter="openGlobalSearchModal" placeholder="Search..." />
        </div>
      </div>

      <!-- CENTER zone: ticket + order quick-create buttons, centered in the bar.
           Shown for ALL roles (previously limited / fulfilment-customer only);
           createTicket() routes to the role-appropriate create page. -->
      <div class="topbar-center topbar-quick-actions">
        <button type="button" class="topbar-quick-btn topbar-quick-btn--ticket" @click="createTicket">
          <i class="ti ti-plus"></i>
          Ticket
        </button>
        <button type="button" class="topbar-quick-btn topbar-quick-btn--order" @click="createOrder">
          <i class="ti ti-plus"></i>
          Order
        </button>
      </div>

      <div class="navbar-end topbar-right">
        <div class="navbar-item">
          <div class="field is-grouped">
            <!--            <p class="control">-->
            <!--              <a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://bulma.io" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&hashtags=bulmaio&url=http://bulma.io&via=jgthms">-->
            <!--              <span class="icon">-->
            <!--                <i class="fa fa-twitter"></i>-->
            <!--              </span>-->
            <!--                <span>-->
            <!--                Tweet-->
            <!--              </span>-->
            <!--              </a>-->
            <!--            </p>-->

            <span v-if="filteredData.length > 0" style="font-weight:bold;"><span style="font-weight:normal; color: grey; font-size: 14px; padding-bottom: 2px;">Merchant:</span> {{ filteredData[0].name }}</span>

            <!--            <p class="control">-->
            <!--              <a class="button is-primary" href="#">-->
            <!--              <span class="icon">-->
            <!--                <i class="fa fa-download"></i>-->
            <!--                  <UIcon name="i-mdi-rotate-3d-variant" />-->
            <!--              </span>-->
            <!--                <span>{{ filteredData[0].name }}</span>-->
            <!--              </a>-->
            <!--            </p>-->
          </div>
        </div>
        <!-- RIGHT zone: today is a warehouse non-working day → amber warning-triangle
             notice, right-aligned immediately left of the icon set (limited roles only).
             Click opens the same shipping-time info as the dashboard "Nicht-Arbeitstage" calendar. -->
        <button
          v-if="defaultSideBarMenu === 'c' && nonWorkingToday"
          type="button"
          class="topbar-nwd-alert"
          :title="t.nwd_today_title || 'Heute ist ein Nicht-Arbeitstag'"
          @click="showNwdInfo = true"
        >
          <i class="ti ti-alert-triangle"></i>
          <span class="topbar-nwd-alert__label">{{ t.nwd_today_title || 'Heute ist ein Nicht-Arbeitstag' }}</span>
        </button>
        <!-- Full icon set: chat · theme · language · account -->
        <div class="navbar-item user-menu-navitem">
          <UserMenuBar />
        </div>
      </div>
    </div>
  </nav>
  <Teleport to="body">
    <SearchModal v-model="globalSearchModal" v-model:searchQuery="globalSearch" />
  </Teleport>

  <!-- Full quick-add order form in a modal -->
  <OrderQuickAddModal v-model="showOrderQuickAddModal" />

  <!-- Non-working-day info modal (mirrors the dashboard calendar's info text).
       Teleported to <body> so the fixed overlay escapes the navbar stacking context. -->
  <Teleport to="body">
    <div v-if="showNwdInfo" class="tmb-nwd-modal" role="dialog" aria-modal="true">
      <div class="tmb-nwd-modal__backdrop" @click="showNwdInfo = false"></div>
      <div class="tmb-nwd-modal__card">
        <header class="tmb-nwd-modal__head">
          <span class="tmb-nwd-modal__icon"><i class="ti ti-alert-triangle"></i></span>
          <h4 class="tmb-nwd-modal__title">{{ t.nwd_today_title || 'Heute ist ein Nicht-Arbeitstag' }}</h4>
          <button type="button" class="tmb-nwd-modal__close" :title="t.close || 'Schließen'" @click="showNwdInfo = false">
            <i class="ti ti-x"></i>
          </button>
        </header>
        <div class="tmb-nwd-modal__body">
          <p class="tmb-nwd-modal__lead">
            <i class="ti ti-calendar-off"></i>
            <span>
              <strong>{{ todayLabel }}</strong>
              <template v-if="nonWorkingToday?.name"> · {{ nonWorkingToday.name }}</template>
            </span>
          </p>
          <p>
            {{ t.nwd_info_text || 'Bitte berücksichtigen Sie diese nicht-Arbeitstage und passen Sie Ihre Lieferzeiten auf Marktplätzen und in Ihren Webshops entsprechend an. An diesen Tagen werden keine Sendungen bearbeitet oder versendet.' }}
          </p>
        </div>
        <footer class="tmb-nwd-modal__foot">
          <button type="button" class="button is-primary" @click="showNwdInfo = false">
            {{ t.nwd_understood || 'Verstanden' }}
          </button>
        </footer>
      </div>
    </div>
  </Teleport>
</template>

<style >

.navbar-item.is-mega {
  position: static;
  background-color: var(--theme-bg-secondary);
  .is-mega-menu-title {
    margin-bottom: 0;
    padding: .375rem 1rem;
    background-color: var(--theme-bg-secondary);
  }
}

div#navMenubd-example,
.navbar-start,
main nav {
  background-color: unset;
  box-shadow: none;
}

/* 3-zone top bar: [search · left] · [ticket+order buttons · centered] ·
   [non-working-day notice + merchant + icon set · right]. Explicit grid-column
   placement keeps the right zone pinned right even when the center zone renders
   no buttons (non-merchant roles), and keeps the centered buttons truly centered. */
#navMenubd-example.navbar-menu {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  gap: 1rem;
}
#navMenubd-example .navbar-start {
  grid-column: 1;
  justify-self: start;
  margin-right: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
#navMenubd-example .topbar-center {
  grid-column: 2;
  justify-self: center;
}
#navMenubd-example .navbar-end {
  grid-column: 3;
  justify-self: end;
  margin-left: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.topbar-search {
  position: relative;
  width: 100%;
  max-width: 216px;
  flex: 0 1 216px;
  margin-left: 29px;
  display: flex;
  align-items: center;
}
.topbar-search__icon {
  position: absolute;
  left: 0.75rem;
  font-size: 16px;
  color: var(--theme-input-placeholder, #9ca3af);
}
.topbar-search__input {
  width: 100%;
  padding: 0.5rem 0.9rem 0.5rem 2.25rem;
  border: 1px solid var(--theme-input-border);
  border-radius: 0.5rem;
  background-color: var(--theme-input-bg);
  color: var(--theme-text-primary);
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.topbar-search__input::placeholder { color: var(--theme-input-placeholder); }
.topbar-search__input:focus {
  border-color: var(--theme-primary);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

/* Merchant quick-action buttons (left zone) */
.topbar-quick-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar-quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.topbar-quick-btn i { font-size: 14px; }
.topbar-quick-btn:hover { transform: translateY(-1px); }
.topbar-quick-btn--ticket { background: #3b82f6; }
.topbar-quick-btn--ticket:hover { background: #2563eb; }
.topbar-quick-btn--order { background: #10b981; }
.topbar-quick-btn--order:hover { background: #059669; }

/* ── Non-working-day notice (limited roles) ───────────────────────────────
   Amber warning-triangle button in the right zone (just left of the icon set)
   when today is a warehouse non-working day. The gentle pulse draws the eye. */
.topbar-nwd-alert {
  flex-shrink: 0;
  height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
  transition: background 0.15s ease, transform 0.1s ease;
  animation: tmb-nwd-pulse 2.4s ease-in-out infinite;
}
.topbar-nwd-alert i { font-size: 1.2rem; flex-shrink: 0; }
.topbar-nwd-alert:hover { background: rgba(245, 158, 11, 0.22); transform: translateY(-1px); }
@keyframes tmb-nwd-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45); }
  50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}

/* ── Non-working-day info modal (teleported → needs these global styles) ──── */
.tmb-nwd-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.tmb-nwd-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(2px);
}
.tmb-nwd-modal__card {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--theme-bg-primary, #fff);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.3);
  overflow: hidden;
}
.tmb-nwd-modal__head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem 1.125rem;
  border-bottom: 1px solid var(--theme-border, #eef0f3);
}
.tmb-nwd-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.tmb-nwd-modal__title {
  margin: 0;
  flex: 1;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--theme-text-primary, #0f172a);
}
.tmb-nwd-modal__close {
  border: none;
  background: transparent;
  color: var(--theme-text-secondary, #94a3b8);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 4px;
  border-radius: 6px;
}
.tmb-nwd-modal__close:hover { background: var(--theme-bg-secondary, #f1f5f9); color: var(--theme-text-primary, #0f172a); }
.tmb-nwd-modal__body {
  padding: 1.125rem;
  color: var(--theme-text-primary, #334155);
  font-size: 0.92rem;
  line-height: 1.55;
}
.tmb-nwd-modal__body p { margin: 0; }
.tmb-nwd-modal__lead {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem !important;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.10);
  color: #b45309;
}
.tmb-nwd-modal__lead i { font-size: 1.1rem; flex-shrink: 0; }
.tmb-nwd-modal__foot {
  display: flex;
  justify-content: flex-end;
  padding: 0.875rem 1.125rem;
  border-top: 1px solid var(--theme-border, #eef0f3);
}


nav.navbar {
  background-color: var(--theme-nav-bg);
  border-bottom: 1px solid var(--theme-border);
}

/* Keep the top bar (and the account/language dropdowns that hang down from it)
   above the navigation bar below it. MainNavigationMenu sits at z-index:100, so
   without this the bar's own z-index:1 stacking context would bury the dropdowns. */
nav.navbar.topbar-nav {
  position: relative;
  z-index: 200;
}

.navbar-item,
.navbar-link {
  color: var(--theme-text-primary);
}

.navbar-item:hover,
.navbar-link:hover {
  background-color: var(--theme-bg-hover);
}

/* Hover feedback belongs to the individual icon buttons inside the menu
   (chat · theme · language · account — each styles its own :hover), not the
   whole navbar-item wrapper. Keep the right-zone wrappers transparent so the
   full bar no longer turns grey when hovering a single icon. */
.topbar-right .navbar-item:hover {
  background-color: transparent;
}

@media (max-width: 1023px) {
  .hidebiggermob {
    display:none;
  }
}

div#navMenubd-example {
  padding-left: 0px !important;
}

.navbar-item {
  padding-left: 5px !important;
}

input.input.groupItem {
  margin-right: 5px;
  background-color: var(--theme-input-bg);
  color: var(--theme-text-primary);
  border-color: var(--theme-input-border);
}

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

nav.sd-none {
  height: 41px;
}
</style>