<template>
  <div class="home-page">
    <v-container fluid class="home-container">
      <!-- 第二三层：随内容滚动，回顶部时与列表第一行一起出现 -->
      <div v-if="categoryLayers.length > 1" class="home-category-layers-23-scroll">
        <div class="home-category-layer home-category-layer--icon">
          <div class="home-category-icon-row">
            <v-chip v-for="item in categoryLayers[1]" :key="item.id" class="home-category-icon-item"
              :color="layerActiveValues[1] === item.id ? 'primary' : undefined"
              :variant="layerActiveValues[1] === item.id ? 'tonal' : 'outlined'" size="small"
              @click="menuStore.onCategorySelect(1, item.id)">
              <span class="home-category-icon-label">{{ item.label }}</span>
            </v-chip>
          </div>
        </div>
        <div v-if="categoryLayers.length >= 3" class="home-category-layer home-category-layer--third">
          <v-tabs :model-value="layerActiveValues[2]" class="home-tab-bar home-tab-bar--compact"
            @update:model-value="menuStore.onCategorySelect(2, $event)">
            <v-tab v-for="item in categoryLayers[2]" :key="item.id" :value="item.id" :ripple="false">
              {{ item.label }}
            </v-tab>
          </v-tabs>
        </div>
      </div>

      <div class="flex-row home-left-menu2-container">
        <div class="left-menu2" :class="{ 'position-fixed': isFixed, 'position-absolute': isAbsolute }">
          <div v-for="item in categoryLayers[1]" :key="item.id" @click="menuStore.onCategorySelect(1, item.id)"
            class="left-menu2-item" :class="{ 'active': layerActiveValues[1] === item.id }">
            <div class="item-icon"></div>
            <div class="item-label">{{ item.label }}</div>
            <div class="item-count">{{ 99 }}</div>
          </div>
        </div>
        <!-- 可滚动容器作为 v-pull-to-refresh 的父元素，组件据此判断 scrollTop 仅在顶部时才响应下拉 -->
        <div ref="scrollRef" class="home-list-scroll">
          <v-pull-to-refresh class="pull-to-refresh" @load="onRefresh">
            <div class="pull-to-refresh-inner">
              <div ref="listRef" class="home-list" :style="gridListStyle">
                <MarketCard v-for="card in eventList" :key="card.id" :id="card.id" :slug="card.slug"
                  :market-title="card.marketTitle" :chance-value="card.chanceValue" :market-info="card.marketInfo"
                  :image-url="card.imageUrl" :category="card.category" :expires-at="card.expiresAt"
                  :display-type="card.displayType" :outcomes="card.outcomes" :yes-label="card.yesLabel"
                  :no-label="card.noLabel" :is-new="card.isNew" :market-id="card.marketId"
                  :clob-token-ids="card.clobTokenIds" :yes-price="card.yesPrice" :no-price="card.noPrice"
                  @open-trade="onCardOpenTrade" />
                <div v-if="eventListLoading" class="home-list-empty home-list-loading">
                  <v-progress-circular indeterminate size="40" width="2" />
                  <span>{{ t('common.loading') }}</span>
                </div>
                <div v-else-if="eventList.length === 0 && !loadingMore" class="home-list-empty">
                  {{ t('common.noData') }}
                </div>
              </div>
              <div v-if="eventList.length > 0" class="load-more-footer">
                <div ref="sentinelRef" class="load-more-sentinel" aria-hidden="true" />
                <div v-if="loadingMore" class="load-more-indicator">
                  <v-progress-circular indeterminate size="24" width="2" />
                  <span>{{ t('common.loading') }}</span>
                </div>
                <div v-else-if="noMoreEvents" class="no-more-tip">{{ t('home.noMore') }}</div>
                <v-btn v-else class="load-more-btn" variant="outlined" color="primary" :disabled="loadingMore"
                  @click="loadMore">
                  {{ t('home.loadMore') }}
                </v-btn>
              </div>
            </div>
          </v-pull-to-refresh>
        </div>
      </div>
      <AppFooter />

      <!-- PC：对话框；手机：底部 sheet，直接显示交易表单 -->
      <v-dialog v-if="!isMobile" v-model="tradeDialogOpen" max-width="420" scrollable
        content-class="trade-dialog trade-dialog--bare" transition="dialog-transition"
        @click:outside="tradeDialogOpen = false">
        <TradeComponent :key="`trade-${tradeDialogMarket?.id}-${tradeDialogSide}`" :market="homeTradeMarketPayload"
          :initial-option="tradeDialogSide" @order-success="onOrderSuccess" />
      </v-dialog>
      <v-bottom-sheet v-else v-model="tradeDialogOpen" content-class="trade-bottom-sheet">
        <TradeComponent :key="`trade-${tradeDialogMarket?.id}-${tradeDialogSide}`" :market="homeTradeMarketPayload"
          :initial-option="tradeDialogSide" embedded-in-sheet @order-success="onOrderSuccess" />
      </v-bottom-sheet>
    </v-container>
  </div>
</template>

<script setup lang="ts">
// const props = withDefaults(
//   defineProps<{
//     /** 进入页面时是否自动展开搜索（供 /search 路由使用） */
//     initialSearchExpanded?: boolean
//   }>(),
//   { initialSearchExpanded: false },
// )

defineOptions({ name: 'HomePage' })
import {
  ref,
  onMounted,
  onUnmounted,
  onActivated,
  onDeactivated,
  nextTick,
  computed,
  watch,
} from 'vue'
import { onBeforeRouteLeave } from 'vue-router'
import { HOME_MAIN_SCROLL_STORAGE_KEY } from '../router/scrollKeys'
import { useDisplay } from 'vuetify'
import MarketCard from '../components/MarketCard.vue'
import TradeComponent from '../components/TradeComponent.vue'
import {
  getPmEventPublic,
  mapEventItemToCard,
  getEventListCache,
  setEventListCache,
  clearEventListCache,
  type EventCardItem,
} from '../api/event'
import {
  enrichWithIcons,
  getPmTagMain,
  MOCK_CATEGORY_TREE,
} from '../api/category'
import { USE_MOCK_CATEGORY } from '../config/mock'
import { useI18n } from 'vue-i18n'
import { useToastStore } from '../stores/toast'
import { useLocaleStore } from '../stores/locale'
import { useMenuStore } from '../stores/menu'
import { storeToRefs } from 'pinia'
import AppFooter from '../components/AppFooter.vue'

const { mobile } = useDisplay()
const { t } = useI18n()
const isMobile = computed(() => mobile.value)

const menuStore = useMenuStore()
const { categoryTree, layerActiveValues, categoryLayers } = storeToRefs(menuStore)
const { filterVisible } = menuStore

/** 标记是否为分类初始化阶段，用于 watch 时区分初始加载与用户切换 */
const isCategoryInitializing = ref(false)

const isFixed = ref(false)
const isAbsolute = ref(false)
const OFFSET = 100

onMounted(() => {
  window.addEventListener('scroll', update)
  update()

  nextTick(() => {
    console.log('home onMounted')  
    if (layerActiveValues.value.length !== 0) {
      loadEvents(1, false)
    } else {
      
    }
  })
})

onUnmounted(() => {
  window.removeEventListener('scroll', update)
})

function update() {
  const scrollTop = window.scrollY
  const winH = window.innerHeight
  const docH = document.documentElement.scrollHeight
  const bottomDistance = docH - scrollTop - winH

  isFixed.value = bottomDistance <= OFFSET && bottomDistance > 0
  isAbsolute.value = bottomDistance <= 0
}


function doSearch(keyword: string) {
  activeSearchKeyword.value = keyword
  clearEventListCache()
  eventPage.value = 1
  loadEvents(1, false, keyword)
}

/** 当前选中分类的 tagIds：收集所有选中层级节点的 tagId 数组（含父级），用于事件筛选 */
const activeTagIds = computed(() => {
  const activeIds = layerActiveValues.value
  const tagIdSet = new Set<number>()

  // 遍历每一层选中的节点，收集所有 tagIds（含父级）
  let currentNodes = filterVisible(categoryTree.value)
  for (let i = 0; i < activeIds.length; i++) {
    const selectedId = activeIds[i]
    if (!selectedId) continue

    const node = currentNodes.find((n) => n.id === selectedId)
    if (node?.tagIds && node.tagIds.length > 0) {
      // 合并当前选中节点的 tagIds
      node.tagIds.forEach((id) => tagIdSet.add(id))
    }

    // 进入下一层
    currentNodes = filterVisible(node?.children)
  }

  return Array.from(tagIdSet)
})


/** 初始化分类选中：默认选中第一个，若有 children 则递归展开 */
function initCategorySelection() {
  const root = filterVisible(categoryTree.value)
  if (root.length === 0) return

  const values: string[] = []
  let current = root
  for (let i = 0; i < 3; i++) {
    const first = current[0]
    if (!first) break
    values.push(first.id)
    const children = filterVisible(first.children)
    if (children.length === 0) break
    current = children
  }
  layerActiveValues.value = values
}

const PAGE_SIZE = 10

/** 分类切换时的防抖状态，防止重复请求 */


/** 接口返回的列表（已映射为卡片所需结构） */
const eventList = ref<EventCardItem[]>([])
/** 当前页码（从 1 开始） */
const eventPage = ref(1)
/** 接口返回的 total */
const eventTotal = ref(0)
const eventPageSize = ref(PAGE_SIZE)
const loadingMore = ref(false)
/** 首屏/刷新时加载事件列表（非追加） */
const eventListLoading = ref(false)

const noMoreEvents = computed(() => {
  if (eventList.value.length === 0) return false
  return (
    eventList.value.length >= eventTotal.value ||
    eventPage.value * eventPageSize.value >= eventTotal.value
  )
})

const tradeDialogOpen = ref(false)
const tradeDialogSide = ref<'yes' | 'no'>('yes')
const tradeDialogMarket = ref<{
  id: string
  title: string
  marketId?: string
  clobTokenIds?: string[]
  yesLabel?: string
  noLabel?: string
  yesPrice?: number
  noPrice?: number
} | null>(null)

function onCardOpenTrade(
  side: 'yes' | 'no',
  market?: {
    id: string
    title: string
    marketId?: string
    yesLabel?: string
    noLabel?: string
    yesPrice?: number
    noPrice?: number
    clobTokenIds?: string[]
  },
) {
  tradeDialogSide.value = side
  tradeDialogMarket.value = market ?? null
  tradeDialogOpen.value = true
}

const toastStore = useToastStore()
const localeStore = useLocaleStore()

/** 加载分类树（接口或 mock），完成后初始化选中并触发事件列表加载 */
async function loadCategory() {
  const cached = getEventListCache()
  const hasCachedEvents = cached && cached.list.length > 0
  if (!hasCachedEvents) eventListLoading.value = true

  function loadEventListAfterCategoryReady() {
    if (hasCachedEvents) {
      eventList.value = cached!.list
      eventPage.value = cached!.page
      eventTotal.value = cached!.total
      eventPageSize.value = cached!.pageSize
      eventListLoading.value = false
    } else {
      loadEvents(1, false)
    }
  }

  if (USE_MOCK_CATEGORY) {
    categoryTree.value = enrichWithIcons(MOCK_CATEGORY_TREE)
    isCategoryInitializing.value = true
    initCategorySelection()
    isCategoryInitializing.value = false
    loadEventListAfterCategoryReady()
  } else {
    try {
      const res = await getPmTagMain()
      if (res.code === 0 || res.code === 200) {
        const data = res.data
        categoryTree.value =
          Array.isArray(data) && data.length > 0 ? data : enrichWithIcons(MOCK_CATEGORY_TREE)
      } else {
        categoryTree.value = enrichWithIcons(MOCK_CATEGORY_TREE)
      }
    } catch {
      categoryTree.value = enrichWithIcons(MOCK_CATEGORY_TREE)
    }
    isCategoryInitializing.value = true
    initCategorySelection()
    isCategoryInitializing.value = false
    loadEventListAfterCategoryReady()
  }
}

// 监听语言切换，语言变化时重新请求分类并加载事件列表
watch(
  () => localeStore.currentLocale,
  () => {
    clearEventListCache()
    eventPage.value = 1
    loadCategory()
  },
)

// 监听 categoryLayers 和 layerActiveValues 变化，自动刷新事件列表
watch(
  [categoryLayers, layerActiveValues],
  () => {
    if (isCategoryInitializing.value) return
    clearEventListCache()
    eventPage.value = 1
    loadEvents(1, false, activeSearchKeyword.value)
  },
  { deep: true },
)

function onOrderSuccess() {
  tradeDialogOpen.value = false
  toastStore.show(t('toast.orderSuccess'))
}

/** 传给 TradeComponent 的 market（Home 弹窗/底部栏），供 Split、下单等使用 */
const homeTradeMarketPayload = computed(() => {
  const m = tradeDialogMarket.value
  if (!m) return undefined
  const marketId = m.marketId ?? m.id
  const yesPrice =
    m.yesPrice != null && Number.isFinite(m.yesPrice) ? Math.min(1, Math.max(0, m.yesPrice)) : 0.5
  const noPrice =
    m.noPrice != null && Number.isFinite(m.noPrice)
      ? Math.min(1, Math.max(0, m.noPrice))
      : 1 - yesPrice
  const outcomes =
    m.yesLabel != null || m.noLabel != null ? [m.yesLabel ?? 'Yes', m.noLabel ?? 'No'] : undefined
  return { marketId, yesPrice, noPrice, title: m.title, clobTokenIds: m.clobTokenIds, outcomes }
})

const sentinelRef = ref<HTMLElement | null>(null)
let observer: IntersectionObserver | null = null
let resizeObserver: ResizeObserver | null = null

const SCROLL_LOAD_THRESHOLD = 280

/** 卡片最小宽度（与 MarketCard 一致），用于动态计算列数 */
const CARD_MIN_WIDTH = 310
const GRID_GAP = 20

const listRef = ref<HTMLElement | null>(null)
const gridColumns = ref(1)

const gridListStyle = computed(() => ({
  gridTemplateColumns: `repeat(${gridColumns.value}, 1fr)`,
}))

function updateGridColumns() {
  const el = listRef.value
  if (!el) return
  const width = el.getBoundingClientRect().width
  const n = Math.floor((width + GRID_GAP) / (CARD_MIN_WIDTH + GRID_GAP))
  gridColumns.value = Math.max(1, n)
}

import { useRoute } from 'vue-router'

const route = useRoute()

/** 当前生效的搜索关键词（用于分页加载） */
const activeSearchKeyword = ref((route.query.q as string) || '')

watch(
  () => route.query.q,
  (newQ) => {
    if (newQ !== undefined) {
      doSearch(newQ as string)
    }
  }
)

/** 请求事件列表并追加或覆盖到 eventList（公开接口，无需鉴权）；成功后会更新内存缓存 */
async function loadEvents(page: number, append: boolean, keyword?: string) {
  const kw = keyword !== undefined ? keyword : activeSearchKeyword.value
  const tagIds = activeTagIds.value
  if (!append) eventListLoading.value = true
  try {
    const res = await getPmEventPublic({
      page,
      pageSize: PAGE_SIZE,
      keyword: kw || undefined,
      tagIds: tagIds.length > 0 ? tagIds : undefined,
    })
    if (res.code !== 0 && res.code !== 200) {
      throw new Error(res.msg || '请求失败')
    }
    const data = res.data
    if (!data?.list || !Array.isArray(data.list)) {
      if (!append) eventList.value = []
      return
    }
    const mapped = data.list.map((item) => mapEventItemToCard(item))
    eventTotal.value = data.total ?? 0
    eventPageSize.value = data.pageSize && data.pageSize > 0 ? data.pageSize : PAGE_SIZE
    eventPage.value = data.page ?? page
    if (append) {
      eventList.value = [...eventList.value, ...mapped]
    } else {
      eventList.value = mapped
    }
    setEventListCache({
      list: eventList.value,
      page: eventPage.value,
      total: eventTotal.value,
      pageSize: eventPageSize.value,
    })

    nextTick(() => {
      
    })
  } catch (e) {
    console.log(e)
    if (!append) eventList.value = []
  } finally {
    if (!append) eventListLoading.value = false
  }
}

function onRefresh({ done }: { done: () => void }) {
  clearEventListCache()
  eventPage.value = 1
  loadEvents(1, false, activeSearchKeyword.value).finally(() => done())
}

function loadMore() {
  if (loadingMore.value || noMoreEvents.value || eventList.value.length === 0) return
  loadingMore.value = true
  const nextPage = eventPage.value + 1
  loadEvents(nextPage, true).finally(() => {
    loadingMore.value = false
  })
}

function getMainScrollEl(): Element | null {
  return document.querySelector('[data-main-scroll]')
}

function checkScrollLoad() {
  if (loadingMore.value || eventList.value.length === 0 || noMoreEvents.value) return
  const el = getMainScrollEl()
  if (!el) return
  const { scrollTop, scrollHeight, clientHeight } = el
  if (scrollHeight - scrollTop - clientHeight < SCROLL_LOAD_THRESHOLD) loadMore()
}

onBeforeRouteLeave(() => {
  const el = getMainScrollEl()
  if (el) {
    sessionStorage.setItem(HOME_MAIN_SCROLL_STORAGE_KEY, String((el as HTMLElement).scrollTop))
  }
})

onMounted(() => {
  // 如果有初始化要求，可以调用相关方法或 emit 事件
  // if (props.initialSearchExpanded) expandSearch()
  nextTick(() => {
    const scrollEl = getMainScrollEl()
    const sentinel = sentinelRef.value
    if (sentinel && scrollEl) {
      observer = new IntersectionObserver(
        (entries) => {
          if (!entries[0]?.isIntersecting) return
          loadMore()
        },
        { root: scrollEl, rootMargin: `${SCROLL_LOAD_THRESHOLD}px`, threshold: 0 },
      )
      observer.observe(sentinel)
    }
    scrollEl?.addEventListener('scroll', checkScrollLoad, { passive: true })
    const listEl = listRef.value
    if (listEl) {
      updateGridColumns()
      resizeObserver = new ResizeObserver(updateGridColumns)
      resizeObserver.observe(listEl)
    }
  })
})

function removeScrollListeners() {
  const sentinel = sentinelRef.value
  if (observer && sentinel) observer.unobserve(sentinel)
  observer = null
  if (resizeObserver) {
    resizeObserver.disconnect()
    resizeObserver = null
  }
  getMainScrollEl()?.removeEventListener('scroll', checkScrollLoad)
}

// keep-alive 时离开页面不会触发 onUnmounted，需在 onDeactivated 移除监听，否则详情页滚动到底会误触发 loadMore
onDeactivated(removeScrollListeners)
onUnmounted(removeScrollListeners)

// 从详情页返回时重新注册监听（仅当 observer 已被 removeScrollListeners 清空时）
onActivated(() => {
  nextTick(() => {
    const scrollEl = getMainScrollEl()
    const sentinel = sentinelRef.value
    if (sentinel && scrollEl && !observer) {
      observer = new IntersectionObserver(
        (entries) => {
          if (!entries[0]?.isIntersecting) return
          loadMore()
        },
        { root: scrollEl, rootMargin: `${SCROLL_LOAD_THRESHOLD}px`, threshold: 0 },
      )
      observer.observe(sentinel)
      scrollEl.addEventListener('scroll', checkScrollLoad, { passive: true })
    }
    const listEl = listRef.value
    if (listEl && !resizeObserver) {
      updateGridColumns()
      resizeObserver = new ResizeObserver(updateGridColumns)
      resizeObserver.observe(listEl)
    }
  })
})
</script>

<style scoped lang="scss">
.home-container {
  max-width: 1440px;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 112px);
  padding: 0;
  margin: 112px auto 0 auto;
}

.home-title {
  font-size: 3rem;
  font-weight: bold;
  color: #0066cc;
  margin: 0;
}

.pull-to-refresh {
  width: 100%;
  min-height: 100%;
  padding: 8px;
}

.pull-to-refresh-inner {
  min-height: 100%;
}

/* 不设固定高度与 overflow，列表随页面（窗口）滚动，便于 Vue Router scrollBehavior 自动恢复位置 */
.home-list-scroll {
  flex: 1;
  overflow-y: auto; // 垂直滚动
  overflow-x: hidden;

  @include gt1024 {
    margin-left: 200px;
  }
}

/* 列数由 JS 根据容器宽度与 CARD_MIN_WIDTH 连续计算，避免断点导致 6→4 跳变 */
.home-list {
  width: 100%;
  display: grid;
  gap: 20px;
}

.home-list-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
  padding: 48px 16px;
}

.home-list-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.home-list>* {
  min-width: 0;
  width: 100%;
}

.load-more-footer {
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.load-more-sentinel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8px;
  pointer-events: none;
  opacity: 0;
}

.load-more-indicator,
.no-more-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  color: #666;
  font-size: 14px;
}

.load-more-btn {
  text-transform: none;
  margin-top: 4px;
}

.trade-dialog--bare :deep(.v-overlay__content) {
  padding: 0;
  overflow: visible;
}

.trade-dialog--bare :deep(.v-card) {
  box-shadow: none;
}

.trade-bottom-sheet :deep(.v-overlay__content) {
  padding: 0;
}

.home-subtitle {
  margin-bottom: 40px;
}

.home-subtitle p {
  font-size: 1.2rem;
  color: #666666;
  margin: 0;
}

.home-tabs {
  margin-top: 40px;
}


/* 第二三层：随内容滚动，全宽 */
.home-category-layers-23-scroll {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-bottom: 0;
  background-color: white;

  @include gt1024 {
    display: none;
  }
}

.home-category-layer {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.home-category-layer:last-child {
  border-bottom: none;
}

.home-category-layer--text :deep(.v-tabs) {
  min-height: 48px;
}

.home-category-layer--icon {
  padding: 6px 16px;
}

.home-category-icon-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.home-category-icon-row::-webkit-scrollbar {
  display: none;
}

.home-category-icon-item {
  padding: 0 8px 0 8px;
  flex-shrink: 0;
}

/* 未选中：outlined 描边改为灰色（不改文字颜色） */
.home-category-icon-item.v-chip--variant-outlined {
  border-color: rgba(0, 0, 0, 0.28) !important;
}

.home-category-icon {
  flex-shrink: 0;
}

.home-category-icon-placeholder {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.home-category-icon-label {
  white-space: nowrap;
}

.home-category-layer--third {
  /* 让第三层高度更紧凑：接近 2 倍字体高度 */
  padding: 2px 16px;
}

.home-category-action-btn {
  min-width: 36px;
}

.home-tab-bar {
  position: relative;
  transform: none;
}

.home-tab-bar :deep(.v-tab__slider),
.home-tab-bar :deep(.v-tabs-slider) {
  display: none !important;
}

/* 覆写 Vuetify density 默认的 tabs 高度变量（在 v-tabs 根元素上） */
:deep(.v-tabs--density-default.home-tab-bar) {
  --v-tabs-height: unset !important;
}

.home-tab-bar :deep(.v-tab--selected) {
  font-weight: 700;
}

.home-tab-bar :deep(.v-ripple__container) {
  display: none !important;
}

/* 去掉鼠标悬停（hover）视觉效果：禁用按钮 overlay/伪元素 */
.home-tab-bar :deep(.v-btn__overlay),
.home-tab-bar :deep(.v-btn__underlay) {
  display: none !important;
}

.home-tab-bar :deep(.v-tab:hover) {
  background-color: transparent !important;
}

.home-tab-bar :deep(.v-tab) {
  min-width: unset !important;
}

.home-tab-bar--compact :deep(.v-tab) {
  min-height: 28px;
  height: 28px;
  line-height: 28px;
  font-size: 14px;
  padding-left: 10px;
  padding-right: 10px;
}

/* 第三层 tabs：收敛容器高度，避免底部多余留白 */
.home-tab-bar--compact :deep(.v-tabs) {
  min-height: 28px !important;
  height: 28px !important;
}

.home-tab-bar--compact :deep(.v-slide-group__container) {
  min-height: 28px !important;
  height: 28px !important;
}

.home-tab-bar--compact :deep(.v-slide-group__content) {
  align-items: center;
}

.home-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 24px;
  text-align: center;
}

.home-card-text {
  margin-bottom: 24px;
}

.home-btn {
  margin-top: 16px;
}

.market-card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px 0;
  width: 100%;
  max-width: 100%;
}

/* Mobile view */
@media (max-width: 600px) {
  .market-card-container {
    grid-template-columns: 1fr;
  }
}

.home-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.home-left-menu2-container {

  flex: 1;
}

.position-fixed {
  position: fixed;
  top: 112px;
}

.left-menu2 {
  height: calc(100vh - 112px);
  width: 190px;
  display: none;
  flex-direction: column;
  margin: 8px 8px 0 0;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: absolute;
  top: 112px;


  @include gt1024 {
    display: flex;
  }

  .left-menu2-item {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 12px;
    cursor: pointer;
    border-radius: 8px;

    .item-icon {
      width: 24px;
      height: 24px;
    }

    .item-label {
      flex: 1;
    }

    .item-count {
      flex-shrink: 0;
    }
  }

  .active {
    font-weight: 700;
    background-color: #e5e5e5;
  }
}
</style>
