<template>
  <div class="exam-page">
    <!-- 功能标签栏 -->
    <TabsBar
      :tabs="mindModuleTabs"
      v-model="activeTab"
    />

    <!-- ========== 纲要生成面板 ========== -->
    <div v-show="activeTab === 'generate'" class="exam-container">
      <PageHeader
        title="纲要生成"
        description="AI智能生成思维导图"
      />

      <StatsRow :stats="mindMapStats" />

      <div class="exam-card">
        <div class="card-header">
          <h2><RobotOutlined /> 纲要生成配置</h2>
        </div>
        <div class="form-group">
          <label class="form-label">选择制度文件</label>
          <FileSelector v-model="selectedMindDoc" placeholder="搜索并选择制度文件..." />
        </div>
        <div class="form-group">
          <label class="form-label">或粘贴制度文件内容</label>
          <textarea class="form-input form-textarea-large" rows="12" placeholder="请在此粘贴制度文件内容..." />
        </div>
        <div class="form-actions">
          <button class="btn btn-primary" @click="handleGenerateMindMap">
            <RocketOutlined /> 生成思维导图
          </button>
        </div>
      </div>

      <div class="exam-card">
        <div class="card-header">
          <h2><FileTextOutlined /> 生成结果</h2>
          <div class="header-actions">
            <button class="btn btn-sm" @click="handleExportImage"><DownloadOutlined /> 导出图片</button>
            <button class="btn btn-sm" @click="handleExportPDF"><DownloadOutlined /> 导出PDF</button>
            <button class="btn btn-sm" @click="handleFullscreen"><ExpandOutlined /> 全屏</button>
            <button class="btn btn-sm" @click="handleResetView"><ReloadOutlined /> 重置</button>
          </div>
        </div>
        <div class="mindmap-container">
          <h3 style="margin-bottom: var(--space-lg); padding-bottom: var(--space-lg); border-bottom: 2px solid var(--border-light);">{{ mindMapData.title }}</h3>
          <ul class="mindmap-list">
            <li v-for="node in mindMapData.nodes" :key="node.id" class="mindmap-node">
              <div class="node-root" @click="handleNodeClick(node)">{{ node.title }}</div>
              <ul v-if="node.children && node.children.length > 0" class="mindmap-children">
                <li v-for="child in node.children" :key="child.id" class="mindmap-node">
                  <div class="node-child" @click="handleNodeClick(child)">{{ child.title }}</div>
                  <ul v-if="child.children && child.children.length > 0" class="mindmap-children">
                    <li v-for="grandchild in child.children" :key="grandchild.id" class="mindmap-node">
                      <div class="node-grandchild" @click="handleNodeClick(grandchild)">{{ grandchild.title }}</div>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- ========== 互动学习面板 ========== -->
    <div v-show="activeTab === 'learn'" class="exam-container">
      <div class="exam-header">
        <h1 class="exam-title"><AimOutlined /> 互动学习</h1>
        <div class="user-info">
          <span>思维导图互动学习</span>
        </div>
      </div>

      <div class="exam-card">
        <div class="card-header">
          <h2><BookOutlined /> 思维导图列表</h2>
        </div>
        <div class="mindmap-card-list">
          <div v-for="item in mindMapList" :key="item.id" class="mindmap-card">
            <div class="mindmap-card-main">
              <div class="mindmap-card-info">
                <h3>{{ item.title }}</h3>
                <div class="mindmap-card-meta">
                  <span><CalendarOutlined /> {{ item.date }}</span>
                  <span :class="['status-badge', item.status === 'completed' ? 'status-success' : 'status-warning']">
                    {{ item.status === 'completed' ? '已完成' : '进行中' }}
                  </span>
                </div>
              </div>
              <div class="mindmap-card-actions">
                <button class="btn btn-primary btn-sm" @click="handleViewMindMap(item)">查看</button>
                <button class="btn btn-sm" @click="handleEditMindMap(item)">编辑</button>
                <button class="btn btn-sm" @click="handleShareMindMap(item)">分享</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="exam-card">
        <div class="card-header">
          <h2><FileTextOutlined /> 思维导图详情</h2>
          <div class="header-actions">
            <button class="btn btn-sm" @click="handleEditNode"><EditOutlined /> 编辑节点</button>
            <button class="btn btn-success btn-sm" @click="handleSaveMindMap"><SaveOutlined /> 保存</button>
            <button class="btn btn-sm" @click="handleShareMindMap"><LinkOutlined /> 分享</button>
          </div>
        </div>
        <div class="mindmap-container">
          <h3 style="margin-bottom: var(--space-lg); padding-bottom: var(--space-lg); border-bottom: 2px solid var(--border-light);">{{ mindMapData.title }}</h3>
          <ul class="mindmap-list">
            <li v-for="node in mindMapData.nodes" :key="node.id" class="mindmap-node">
              <div class="node-root" @click="handleNodeClick(node)">{{ node.title }}</div>
              <ul v-if="node.children && node.children.length > 0" class="mindmap-children">
                <li v-for="child in node.children" :key="child.id" class="mindmap-node">
                  <div class="node-child" @click="handleNodeClick(child)">{{ child.title }}</div>
                  <ul v-if="child.children && child.children.length > 0" class="mindmap-children">
                    <li v-for="grandchild in child.children" :key="grandchild.id" class="mindmap-node">
                      <div class="node-grandchild" @click="handleNodeClick(grandchild)">{{ grandchild.title }}</div>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 弹窗组件 -->
    <a-modal v-model:open="modalVisible" title="节点详情" @ok="handleSaveNote">
      <div v-if="selectedNode">
        <h3 style="margin-bottom: var(--space-lg); color: var(--text-primary);">{{ selectedNode.title }}</h3>
        <div class="node-detail-content">
          <h4 style="margin-bottom: var(--space-sm); color: var(--text-secondary);">节点内容</h4>
          <p style="color: var(--text-tertiary); font-size: var(--font-md);">这是节点的详细内容，在实际应用中会显示该节点对应的原文片段。</p>
        </div>
        <div class="form-group">
          <label class="form-label">笔记</label>
          <textarea class="form-input" v-model="noteContent" placeholder="请输入笔记..." rows="4" />
        </div>
      </div>
    </a-modal>

    <a-modal v-model:open="showGenerateModal" title="正在生成思维导图" :footer="null" :closable="false">
      <div style="text-align: center; padding: 40px 20px;">
        <div style="font-size: 64px; margin-bottom: var(--space-xl);"><BulbOutlined /></div>
        <h3 style="margin-bottom: var(--space-lg); color: var(--text-primary);">AI正在智能生成思维导图...</h3>
        <p style="color: var(--text-secondary);">
          正在分析文档结构，提取关键知识点，构建层级关系...
        </p>
        <div style="margin-bottom: var(--space-xl); padding: var(--space-lg); background: var(--bg-container); border-radius: var(--radius-lg);">
          <div style="font-size: var(--font-md); font-weight: var(--weight-semibold); color: var(--text-primary); margin-bottom: var(--space-xs);">
            当前进度
          </div>
          <div style="font-size: var(--font-sm); color: var(--text-tertiary);">
            预计耗时 10-15 秒
          </div>
        </div>
      </div>
    </a-modal>

    <a-modal v-model:open="showEditNodeModal" title="编辑节点" width="600" @ok="handleConfirmEditNode">
      <div v-if="currentMindMap">
        <div style="margin-bottom: 20px; padding: 16px; background: #fafafa; border-radius: 8px;">
          <div style="margin-bottom: 8px;">
            <span :class="['status-badge', currentMindMap.status === 'completed' ? 'status-success' : 'status-warning']">
              {{ currentMindMap.status === 'completed' ? '已完成' : '进行中' }}
            </span>
          </div>
          <div style="font-size: 15px; font-weight: 600; color: #333; margin-bottom: 4px;">
            {{ currentMindMap.title }}
          </div>
          <div style="font-size: 13px; color: #999;">
            生成时间：{{ currentMindMap.date }}
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">节点标题</label>
          <input class="form-input" v-model="nodeTitle" />
        </div>
        <div class="form-group">
          <label class="form-label">节点描述</label>
          <textarea class="form-input" v-model="nodeDescription" placeholder="请输入节点描述..." rows="4" />
        </div>
        <div class="form-group">
          <label class="form-label">节点颜色</label>
          <select class="form-select" v-model="nodeColor">
            <option value="blue">蓝色</option>
            <option value="green">绿色</option>
            <option value="orange">橙色</option>
            <option value="red">红色</option>
          </select>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { getDirectPermission } from '../utils/permission.js'
import FileSelector from './FileSelector.vue'
import TabsBar from './common/TabsBar.vue'
import PageHeader from './common/PageHeader.vue'
import StatsRow from './common/StatsRow.vue'
import {
  RobotOutlined,
  RocketOutlined,
  FileTextOutlined,
  DownloadOutlined,
  ExpandOutlined,
  ReloadOutlined,
  AimOutlined,
  BookOutlined,
  CalendarOutlined,
  EditOutlined,
  BulbOutlined,
  BranchesOutlined,
  SaveOutlined,
  LinkOutlined
} from '@ant-design/icons-vue'

const activeTab = ref('generate')
const selectedMindDoc = ref(null)

const canShowGenerate = computed(() =>
  getDirectPermission('mind:generate')
)
const canShowLearn = computed(() =>
  getDirectPermission('mind:learn')
)

const mindModuleTabs = computed(() => {
  const tabs = []
  if (canShowGenerate.value) {
    tabs.push({ key: 'generate', label: '纲要生成', icon: BranchesOutlined })
  }
  if (canShowLearn.value) {
    tabs.push({ key: 'learn', label: '互动学习', icon: AimOutlined })
  }
  return tabs
})

const mindMapStats = computed(() => [
  { value: 5, label: '已生成导图' },
  { value: 12, label: '总节点数' },
  { value: 4.5, label: '平均质量' }
])

const getFirstAccessibleTab = () => {
  if (canShowGenerate.value) return 'generate'
  if (canShowLearn.value) return 'learn'
  return null
}

watch(
  [canShowGenerate, canShowLearn],
  () => {
    const hasAccess =
      (activeTab.value === 'generate' && canShowGenerate.value) ||
      (activeTab.value === 'learn' && canShowLearn.value)

    if (!hasAccess) {
      const firstTab = getFirstAccessibleTab()
      if (firstTab) {
        activeTab.value = firstTab
      }
    }
  },
  { immediate: true }
)

onMounted(() => {
  const firstTab = getFirstAccessibleTab()
  if (firstTab) {
    activeTab.value = firstTab
  }
})

const mindMapData = ref({
  id: 1,
  title: '公司考勤制度',
  nodes: [
    {
      id: 1,
      title: '公司考勤制度',
      children: [
        {
          id: 2,
          title: '第一章 总则',
          children: [
            { id: 3, title: '目的和依据' },
            { id: 4, title: '适用范围' },
            { id: 5, title: '职责分工' },
          ],
        },
        {
          id: 6,
          title: '第二章 考勤管理',
          children: [
            { id: 7, title: '工作时间' },
            { id: 8, title: '打卡规定' },
            { id: 9, title: '迟到早退' },
          ],
        },
        {
          id: 10,
          title: '第三章 请假制度',
          children: [
            { id: 11, title: '请假类型' },
            { id: 12, title: '请假流程' },
            { id: 13, title: '请假审批' },
          ],
        },
        {
          id: 14,
          title: '第四章 加班管理',
          children: [
            { id: 15, title: '加班申请' },
            { id: 16, title: '加班补偿' },
            { id: 17, title: '加班审批' },
          ],
        },
        {
          id: 18,
          title: '第五章 附则',
          children: [
            { id: 19, title: '解释权' },
            { id: 20, title: '生效日期' },
          ],
        },
      ],
    },
  ],
})

const selectedNode = ref(null)
const modalVisible = ref(false)
const noteContent = ref('')
const showGenerateModal = ref(false)
const generateProgress = ref(0)
const showEditNodeModal = ref(false)
const currentMindMap = ref(null)
const nodeTitle = ref('')
const nodeDescription = ref('')
const nodeColor = ref('blue')

const mindMapList = [
  { id: 1, title: '公司考勤制度', date: '2026-04-01', status: 'completed' },
  { id: 2, title: '财务报销制度', date: '2026-03-31', status: 'completed' },
  { id: 3, title: '人事管理制度', date: '2026-03-30', status: 'in-progress' },
]

const handleNodeClick = (node) => {
  selectedNode.value = node
  modalVisible.value = true
}

const handleSaveNote = () => {
  modalVisible.value = false
}

const handleGenerateMindMap = () => {
  showGenerateModal.value = true
  generateProgress.value = 0
  message.success('正在生成思维导图，请稍候...')
  
  let progress = 0
  const interval = setInterval(() => {
    progress += 10
    generateProgress.value = progress
    if (progress >= 100) {
      clearInterval(interval)
      setTimeout(() => {
        showGenerateModal.value = false
        message.success('思维导图生成成功！')
      }, 500)
    }
  }, 300)
}

const handleExportImage = () => {
  message.success('图片导出成功！')
}

const handleExportPDF = () => {
  message.success('PDF导出成功！')
}

const handleFullscreen = () => {
  message.info('已进入全屏模式')
}

const handleResetView = () => {
  message.info('视图已重置')
}

const handleViewMindMap = (item) => {
  currentMindMap.value = item
  message.success('正在打开思维导图...')
}

const handleEditMindMap = (item) => {
  currentMindMap.value = item
  showEditNodeModal.value = true
  message.info('进入编辑模式')
}

const handleShareMindMap = (item) => {
  message.success('思维导图分享链接已复制！')
}

const handleEditNode = () => {
  showEditNodeModal.value = true
  message.info('进入节点编辑模式')
}

const handleSaveMindMap = () => {
  message.success('思维导图保存成功！')
}

const handleConfirmEditNode = () => {
  showEditNodeModal.value = false
  message.success('节点修改成功！')
}
</script>

<style scoped>
.mindmap-container {
  background: var(--bg-container);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.mindmap-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.mindmap-node {
  margin: var(--space-md) 0;
}

.mindmap-children {
  list-style: none;
  padding-left: var(--space-lg);
  margin: 0;
}

.node-root {
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-primary);
  color: var(--text-inverse);
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-weight: var(--weight-semibold);
  font-size: var(--font-md);
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.node-root:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.node-child {
  display: inline-block;
  padding: var(--space-xs) var(--space-lg);
  background: var(--text-secondary);
  color: var(--text-inverse);
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-weight: var(--weight-medium);
  font-size: var(--font-md);
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.node-child:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.node-grandchild {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  background: var(--text-tertiary);
  color: var(--text-inverse);
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-weight: var(--weight-medium);
  font-size: var(--font-sm);
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.node-grandchild:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* 性能友好降级 */
@media (prefers-reduced-motion: reduce) {
  .node-root,
  .node-child,
  .node-grandchild {
    transition: none !important;
    box-shadow: none !important;
  }
}

.mindmap-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.mindmap-card {
  background: var(--bg-container);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: all var(--transition-normal);
}

.mindmap-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-default);
}

.mindmap-card-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mindmap-card-info h3 {
  margin: 0 0 var(--space-sm) 0;
  font-size: var(--font-md);
  color: var(--text-primary);
}

.mindmap-card-meta {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
  font-size: var(--font-sm);
  color: var(--text-tertiary);
}

.mindmap-card-actions {
  display: flex;
  gap: var(--space-sm);
}

.progress-bar-track {
  height: 12px;
  background: var(--bg-active);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  transition: width var(--transition-normal);
}
</style>

<style>
.exam-page {
  height: 100%;
  min-height: 100%;
  background: var(--bg-body);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

.main-tabs-bar {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-xl);
  background: var(--bg-base);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.main-tab-btn {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-xl);
  border: none;
  background: transparent;
  border-radius: var(--radius-lg);
  font-size: var(--font-md);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all var(--transition-normal);
  color: var(--text-secondary);
}

.main-tab-btn:hover {
  background: var(--bg-active);
  color: var(--color-primary);
}

.main-tab-btn.active {
  background: var(--color-primary);
  color: white;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.tab-icon {
  font-size: 18px;
}

.tab-text {
  letter-spacing: 0.5px;
}

.exam-container {
  flex: 1;
  padding: var(--space-lg);
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
}

.exam-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-primary);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
  color: white;
}

.exam-title {
  font-size: var(--font-xl);
  font-weight: bold;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.user-info {
  font-size: var(--font-md);
  opacity: 0.9;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.stat-card {
  background: var(--bg-base);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-primary);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.stat-card:hover::before {
  opacity: 1;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-icon {
  font-size: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-container);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  transition: transform var(--transition-normal);
}

.stat-card:hover .stat-icon {
  transform: scale(1.05);
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: var(--font-3xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  line-height: 1.2;
}

.stat-label {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin-top: var(--space-xs);
  font-weight: var(--weight-medium);
}

/* 性能友好降级 */
@media (prefers-reduced-motion: reduce) {
  .stat-card,
  .stat-icon {
    transition: none !important;
  }
  
  .stat-card::before {
    display: none;
  }
}

.exam-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-light);
}

.card-header h2 {
  margin: 0;
  font-size: var(--font-lg);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.header-actions {
  display: flex;
  gap: var(--space-sm);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs) var(--space-md);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-md);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all var(--transition-normal);
  gap: var(--space-xs);
}

.btn-primary {
  background: var(--color-primary);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-success {
  background: var(--color-success);
  color: white;
}

.btn-success:hover:not(:disabled) {
  background: var(--color-success-hover);
}

.btn-sm {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-sm);
  background: var(--bg-active);
  color: var(--text-secondary);
}

.btn-sm:hover:not(:disabled) {
  background: var(--bg-hover);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.status-badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  font-weight: var(--weight-medium);
}

.status-badge.status-info {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.status-badge.status-success {
  background: var(--color-success-light);
  color: var(--color-success);
}

.status-badge.status-warning {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.form-group {
  margin-bottom: var(--space-xl);
}

.form-label {
  display: block;
  font-size: var(--font-md);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.form-input {
  width: 100%;
  height: var(--input-height);
  padding: 0 var(--space-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--font-md);
  transition: all var(--transition-normal);
  background: var(--bg-container);
  box-sizing: border-box;
}

.form-textarea-large {
  height: auto;
  min-height: 160px;
  padding: var(--space-sm);
  line-height: 1.5;
  resize: vertical;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-alpha-20);
  background: var(--bg-base);
}

/* 统一选择器样式，确保高度一致且不超出容器 */
.form-select {
  width: 140px;
  height: var(--input-height);
  box-sizing: border-box;
}

.form-select :deep(.ant-select-selector) {
  height: var(--input-height) !important;
  min-height: var(--input-height) !important;
  max-height: var(--input-height) !important;
  padding: 0 28px 0 var(--space-md) !important;
  border-radius: var(--radius-xl) !important;
  border: 1px solid var(--border-light) !important;
  background: var(--bg-container) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}

.form-select :deep(.ant-select-selection-search) {
  flex: 1;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.form-select :deep(.ant-select-selection-item) {
  height: 100% !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  font-size: var(--font-md);
  color: var(--text-primary);
  font-weight: var(--weight-medium);
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

.form-select :deep(.ant-select-selection-placeholder) {
  height: 100% !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  font-size: var(--font-md);
  color: var(--text-tertiary);
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

.form-select :deep(.ant-select-arrow) {
  right: var(--space-lg) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-top: 0 !important;
  color: var(--text-tertiary);
  font-size: var(--font-xs);
  transition: all var(--transition-normal);
  position: absolute !important;
  height: 16px !important;
  width: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.form-select :deep(.ant-select-arrow svg) {
  width: 12px !important;
  height: 12px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 1 !important;
}

.form-select :deep(.ant-select-arrow) {
  right: var(--space-sm) !important;
}

.form-actions {
  display: flex;
  gap: var(--space-lg);
}

@media (max-width: 768px) {
  .main-tabs-bar {
    padding: var(--space-sm) var(--space-lg);
    flex-wrap: wrap;
  }

  .main-tab-btn {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-md);
  }

  .tab-text {
    display: none;
  }
}
</style>