<template>
  <div class="hierarchy-analysis-result-page">
    <div class="page-header">
      <h2>
        <i class="fas fa-layer-group"></i>
        按层级删除优化分析结果
      </h2>
      <p>Creo层级删除优化分析结果展示</p>
    </div>

    <div class="page-content">
      <!-- 层级分析结果容器 -->
      <div class="hierarchy-analysis-results">
        <!-- 层级分析头部 -->
        <div class="hierarchy-header">
          <h3><i class="fas fa-sitemap"></i> 层级分析结果</h3>
          <div class="hierarchy-controls">
            <div class="view-switcher">
              <button
                class="view-btn"
                :class="{ active: currentView === 'tree' }"
                @click="currentView = 'tree'"
              >
                <i class="fas fa-sitemap"></i> 树形视图
              </button>
              <button
                class="view-btn"
                :class="{ active: currentView === 'table' }"
                @click="currentView = 'table'"
              >
                <i class="fas fa-table"></i> 表格视图
              </button>
            </div>
            <div class="hierarchy-actions">
              <button class="action-btn primary" @click="exportResults">
                <i class="fas fa-download"></i> 导出结果
              </button>
            </div>
          </div>
        </div>

        <!-- 层级内容区域 -->
        <div class="hierarchy-content">
          <!-- 分析概览 -->
          <div class="analysis-overview">
            <div class="overview-cards">
              <div class="overview-card">
                <div class="card-icon">
                  <i class="fas fa-cubes"></i>
                </div>
                <div class="card-content">
                  <div class="card-value">{{ (analysisResults?.total_components || 0) - 1 }}</div>
                  <div class="card-label">总组件数</div>
                </div>
              </div>
              <div class="overview-card">
                <div class="card-icon">
                  <i class="fas fa-layer-group"></i>
                </div>
                <div class="card-content">
                  <div class="card-value">{{ analysisResults?.total_levels || 0 }}</div>
                  <div class="card-label">层级数</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 组件显示区域 -->
          <div class="components-display">
            <!-- 树形视图 -->
            <div v-if="currentView === 'tree'" class="tree-view">
              <div class="tree-header">
                <h4>层级树状结构</h4>
              </div>
              <div class="tree-container">
                <div
                  v-for="(component, index) in hierarchyData"
                  :key="index"
                  v-show="shouldShowNode(component)"
                  class="tree-node"
                  :class="`safety-${component.deletion_safety}`"
                >
                  <div class="node-header" :style="{ paddingLeft: (component.level * 20) + 'px' }">
                    <div
                      class="node-toggle"
                      :class="{
                        expanded: component.expanded,
                        'has-children': hasChildren(component)
                      }"
                      @click="toggleNode(component, index)"
                      v-if="hasChildren(component)"
                    >
                      <i class="fas fa-chevron-right"></i>
                    </div>
                    <div v-else class="node-toggle-placeholder"></div>
                    <div class="node-icon">
                      <i class="fas fa-cube"></i>
                    </div>
                    <div class="node-content">
                      <div class="node-name">{{ component.filename }}</div>
                      <div class="node-info">
                        <span class="node-type">{{ component.type }}</span>
                        <span class="node-level">层级: {{ component.level }}</span>
                        <span class="node-safety" :class="`safety-${component.deletion_safety}`">{{ getSafetyLabel(component.deletion_safety) }}</span>
                      </div>
                    </div>
                    <div class="node-actions">
                      <button class="node-select-btn" :class="{ selected: selectedComponents.has(component.path) }" @click="toggleSelection(component.path)">
                        <i class="fas fa-check"></i>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 表格视图 -->
            <div v-else-if="currentView === 'table'" class="table-view">
              <div class="table-header">
                <h4>组件列表</h4>
              </div>
              <div class="table-container">
                <table class="components-table">
                  <thead>
                    <tr>
                      <th>选择</th>
                      <th>组件名称</th>
                      <th>类型</th>
                      <th>层级</th>
                      <th>路径</th>
                      <th>删除安全性</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(component, index) in hierarchyData" :key="index" class="component-row" :class="`safety-${component.deletion_safety}`">
                      <td>
                        <input type="checkbox" :checked="selectedComponents.has(component.path)" @change="toggleSelection(component.path)">
                      </td>
                      <td>
                        <div class="component-name">
                          <i class="fas fa-cube"></i>
                          {{ component.filename }}
                        </div>
                      </td>
                      <td>{{ component.type }}</td>
                      <td>{{ component.level }}</td>
                      <td>
                        <div class="component-path">{{ component.path }}</div>
                      </td>
                      <td>
                        <span class="safety-badge" :class="`safety-${component.deletion_safety}`">
                          {{ getSafetyLabel(component.deletion_safety) }}
                        </span>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

          </div>
        </div>

        <!-- 底部操作区域 -->
        <div class="hierarchy-operations">
          <div class="operation-info">
            <span>完成层级分析，可以继续进行删除配置</span>
          </div>
          <div class="operation-buttons">
            <button
              class="action-btn danger"
              @click="deleteSelectedComponents"
              :disabled="selectedComponents.size === 0"
            >
              <i class="fas fa-trash"></i>
              <span>删除选中组件 ({{ selectedComponents.size }})</span>
            </button>
            <button class="continue-btn primary" @click="continueToDeleteConfig">
              <i class="fas fa-arrow-right"></i>
              <span>继续层级删除配置</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { creoApi } from '@/services/creoApi'
import { ElMessageBox } from 'element-plus'

const props = defineProps({
  analysisData: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['show-hierarchy-deletion-params'])

const currentView = ref('tree')
const selectedComponents = ref(new Set())
const hierarchyData = ref([]) // 直接存储所有组件数据

// 直接使用API数据，照抄ShellAnalysisResult的方式
const analysisResults = computed(() => {
  if (!props.analysisData) {
    return null
  }
  return props.analysisData.data
})

// 初始化层级数据
const initializeHierarchyData = () => {
  const allData = []

  if (analysisResults.value) {
    const data = analysisResults.value

    // 处理hierarchy字段 - 扁平化所有层级的组件
    if (data.hierarchy && Array.isArray(data.hierarchy)) {
      data.hierarchy.forEach((level) => {
        if (level.components && Array.isArray(level.components)) {
          level.components.forEach(component => {
            allData.push({
              ...component,
              deletion_safety: component.deletion_safety || 'safe',
              expanded: false // 添加展开状态
            })
          })
        }
      })
    }

    // 处理deletion_recommendations字段中的组件
    if (data.deletion_recommendations) {
      const recommendations = data.deletion_recommendations

      if (recommendations.safe_deletions && Array.isArray(recommendations.safe_deletions)) {
        recommendations.safe_deletions.forEach(comp => {
          // 避免重复添加已存在的组件
          if (!allData.find(existing => existing.path === comp.path && existing.id === comp.id)) {
            allData.push({
              ...comp,
              deletion_safety: 'safe',
              expanded: false
            })
          }
        })
      }

      if (recommendations.risky_deletions && Array.isArray(recommendations.risky_deletions)) {
        recommendations.risky_deletions.forEach(comp => {
          // 避免重复添加已存在的组件
          if (!allData.find(existing => existing.path === comp.path && existing.id === comp.id)) {
            allData.push({
              ...comp,
              deletion_safety: 'risky',
              expanded: false
            })
          }
        })
      }
    }
  }

  hierarchyData.value = allData
}



const getSafetyLabel = (safety) => {
  const labels = {
    safe: '安全',
    risky: '风险',
    forbidden: '禁止'
  }
  return labels[safety] || safety
}


// 由于现在直接操作数组顺序，不再需要排序

// 判断节点是否有子节点
const hasChildren = (component) => {
  return component.children_count > 0
}

// 由于现在直接管理数组顺序，所有在数组中的组件都应该显示
const shouldShowNode = () => {
  return true
}

const toggleNode = async (component, index) => {
  if (component.expanded) {
    // 收起节点：移除子组件
    component.expanded = false
    // 找到所有子组件并移除
    let removeCount = 0
    for (let i = index + 1; i < hierarchyData.value.length; i++) {
      const nextComponent = hierarchyData.value[i]
      if (nextComponent.level > component.level) {
        removeCount++
      } else {
        break
      }
    }
    if (removeCount > 0) {
      hierarchyData.value.splice(index + 1, removeCount)
    }
  } else {
    // 展开节点：加载并插入子组件
    if (component.children_count > 0) {
      try {
        const componentId = component.level === 0 ? null : component.id
        const result = await creoApi.getChildrenComponents(component.path, componentId)
        if (result.success && result.data.data.children) {
          // 处理子组件数据
          const processedChildren = result.data.data.children.map(child => ({
            ...child,
            level: component.level + 1,  // 使用父组件level + 1
            parent_id: component.id,
            deletion_safety: child.deletion_safety || 'safe',
            expanded: false
          }))
          // 在当前组件后插入子组件
          hierarchyData.value.splice(index + 1, 0, ...processedChildren)
          component.expanded = true
        }
      } catch {
        // 加载子组件失败，错误已由API层统一处理
      }
    }
  }
}

const toggleSelection = (componentPath) => {
  if (selectedComponents.value.has(componentPath)) {
    selectedComponents.value.delete(componentPath)
  } else {
    selectedComponents.value.add(componentPath)
  }
}


const exportResults = () => {
  const data = {
    analysisData: analysisResults.value,
    hierarchyData: hierarchyData.value,
    exportTime: new Date().toISOString()
  }

  const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = `hierarchy-analysis-${new Date().toISOString().slice(0, 10)}.json`
  a.click()
  URL.revokeObjectURL(url)
}

const continueToDeleteConfig = () => {
  emit('show-hierarchy-deletion-params')
}

const deleteSelectedComponents = async () => {
  if (selectedComponents.value.size === 0) {
    return
  }

  await ElMessageBox.confirm(
    `确定要删除选中的 ${selectedComponents.value.size} 个组件吗？此操作不可撤销。`,
    '删除确认',
    {
      type: 'warning',
      confirmButtonText: '确定删除',
      cancelButtonText: '取消'
    }
  )

  // 收集选中组件的路径（selectedComponents已经存储的是路径）
  const componentPaths = Array.from(selectedComponents.value)

  // 调用现有API删除组件（通知由apiClient钩子自动处理）
  const result = await creoApi.deleteComponentsByPath(componentPaths)
  if (result.success) {
    // 清空选中状态
    selectedComponents.value.clear()
  }
}

// 初始化数据
onMounted(() => {
  initializeHierarchyData()
})

// 监听props变化
watch(() => props.analysisData, () => {
  initializeHierarchyData()
}, { deep: true })
</script>

<style scoped>
.hierarchy-analysis-result-page {
  padding: var(--spacing-2xl);
  height: 100%;
}

.page-header {
  margin-bottom: var(--spacing-2xl);
}

.page-header h2 {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-sm) 0;
}

.page-header h2 i {
  color: var(--color-primary);
}

.page-header p {
  color: var(--color-text-secondary);
  margin: 0;
}

.page-content {
  height: calc(100% - 100px);
}

/* 层级分析结果容器 */
.hierarchy-analysis-results {
  background: var(--color-bg-card);
  border-radius: var(--size-border-radius);
  padding: var(--spacing-xl);
  box-shadow: var(--color-shadow-card);
  animation: fadeIn var(--transition-duration) var(--transition-timing);
}

/* 层级分析头部 */
.hierarchy-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 2px solid var(--color-border-primary);
}

.hierarchy-header h3 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

.hierarchy-header h3 i {
  margin-right: var(--spacing-sm);
  color: var(--color-primary);
}

/* 层级控制区域 */
.hierarchy-controls {
  display: flex;
  gap: var(--spacing-xl);
  align-items: center;
}

/* 视图切换器 */
.view-switcher {
  display: flex;
  background: var(--color-bg-secondary);
  border-radius: var(--size-border-radius-button);
  padding: var(--spacing-xs);
  gap: 2px;
}

.view-btn {
  padding: var(--spacing-sm) var(--spacing-lg);
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  border-radius: var(--size-border-radius-button);
  cursor: pointer;
  transition: all var(--transition-duration) var(--transition-timing);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.view-btn:hover {
  background: var(--color-primary-rgb);
  color: var(--color-primary);
}

.view-btn.active {
  background: var(--color-primary);
  color: var(--color-text-primary);
  box-shadow: 0 2px 4px var(--color-shadow-primary);
}

/* 层级操作按钮 */
.hierarchy-actions {
  display: flex;
  gap: var(--spacing-sm);
}

.action-btn {
  padding: var(--spacing-sm) var(--spacing-lg);
  border: 1px solid var(--color-border-primary);
  background: var(--color-bg-hover);
  color: var(--color-text-secondary);
  border-radius: var(--size-border-radius-button);
  cursor: pointer;
  transition: all var(--transition-duration) var(--transition-timing);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
}

.action-btn:hover {
  background: var(--color-bg-active);
  border-color: var(--color-border-secondary);
}

.action-btn.primary {
  background: var(--color-primary-gradient);
  color: var(--color-text-primary);
  border-color: transparent;
}

.action-btn.primary:hover {
  background: var(--color-primary-gradient-hover);
  opacity: 0.9;
}

.action-btn.danger {
  background: var(--color-error);
  color: var(--color-text-primary);
  border-color: transparent;
}

.action-btn.danger:hover:not(:disabled) {
  background: var(--color-error);
  opacity: 0.9;
}

.action-btn.danger:disabled {
  background: var(--color-text-secondary);
  cursor: not-allowed;
  opacity: 0.5;
}

/* 层级内容区域 */
.hierarchy-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}

/* 分析概览卡片 */
.analysis-overview .overview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.overview-card {
  background: var(--color-bg-card);
  border-radius: var(--size-border-radius);
  padding: var(--spacing-xl);
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  transition: transform var(--transition-duration) var(--transition-timing);
  border: 1px solid var(--color-border-primary);
}

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

.overview-card .card-icon {
  width: 50px;
  height: 50px;
  border-radius: var(--border-radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
}

.overview-card.safe .card-icon {
  background: var(--color-success);
}

.overview-card.risky .card-icon {
  background: var(--color-warning);
}

.overview-card.forbidden .card-icon {
  background: var(--color-error);
}

.overview-card .card-content {
  flex: 1;
}

.overview-card .card-value {
  font-size: 1.8rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
}

.overview-card .card-label {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

/* 树形视图样式 */
.tree-view {
  background: var(--color-bg-card);
  border-radius: var(--size-border-radius);
  padding: var(--spacing-xl);
  border: 1px solid var(--color-border-primary);
}

.tree-header {
  margin-bottom: var(--spacing-xl);
}

.tree-header h4 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
}

.tree-container {
  max-height: 600px;
  overflow-y: auto;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--size-border-radius-button);
  background: var(--color-bg-secondary);
}

/* 树形节点 */
.tree-node {
  border-bottom: 1px solid var(--color-border-primary);
}

.tree-node:last-child {
  border-bottom: none;
}

.node-header {
  display: flex;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  cursor: pointer;
  transition: background-color var(--transition-duration) var(--transition-timing);
}

.node-header:hover {
  background: var(--color-bg-hover);
}

.node-toggle {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-sm);
  cursor: pointer;
  transition: transform var(--transition-duration) var(--transition-timing);
}

.node-toggle.expanded {
  transform: rotate(90deg);
}

.node-toggle-placeholder {
  width: 20px;
  height: 20px;
  margin-right: var(--spacing-sm);
}

.node-toggle.has-children {
  cursor: pointer;
}

.node-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-sm);
  color: var(--color-text-secondary);
}

.node-content {
  flex: 1;
}

.node-name {
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-xs);
}

.node-info {
  display: flex;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
}

.node-type, .node-level {
  color: var(--color-text-secondary);
}

.node-safety {
  padding: 2px var(--spacing-xs);
  border-radius: var(--size-border-radius-button);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.node-safety.safety-safe {
  background: var(--color-success);
  color: var(--color-text-primary);
}

.node-safety.safety-risky {
  background: var(--color-warning);
  color: var(--color-text-primary);
}

.node-safety.safety-forbidden {
  background: var(--color-error);
  color: var(--color-text-primary);
}

.node-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.node-size {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.node-select-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border-primary);
  background: var(--color-bg-card);
  border-radius: var(--size-border-radius-button);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-duration) var(--transition-timing);
}

.node-select-btn:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-primary);
}

.node-select-btn.selected {
  background: var(--color-primary);
  color: var(--color-text-primary);
  border-color: var(--color-primary);
}

/* 表格视图样式 */
.table-view {
  background: var(--color-bg-card);
  border-radius: var(--size-border-radius);
  overflow: hidden;
  border: 1px solid var(--color-border-primary);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xl);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-primary);
}

.table-header h4 {
  margin: 0;
  color: var(--color-text-primary);
}

.table-container {
  overflow-x: auto;
}

.components-table {
  width: 100%;
  border-collapse: collapse;
}

.components-table th {
  background: var(--color-bg-secondary);
  padding: var(--spacing-md);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-primary);
}

.components-table td {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border-primary);
  vertical-align: middle;
}

.component-row:hover {
  background: var(--color-bg-hover);
}

.component-name {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-weight: var(--font-weight-medium);
}

.component-path {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.safety-badge {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--size-border-radius-button);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.safety-badge.safety-safe {
  background: var(--color-success);
  color: var(--color-text-primary);
}

.safety-badge.safety-risky {
  background: var(--color-warning);
  color: var(--color-text-primary);
}

.safety-badge.safety-forbidden {
  background: var(--color-error);
  color: var(--color-text-primary);
}


.component-info {
  flex: 1;
}

.component-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.component-header i {
  color: var(--color-text-secondary);
}

.component-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.component-level {
  background: var(--color-bg-card);
  padding: 2px var(--spacing-xs);
  border-radius: var(--size-border-radius-button);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.component-details {
  display: flex;
  gap: var(--spacing-lg);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-xs);
}

.component-path {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* 组件类型样式 */
.component-row.safety-safe {
  border-left: 4px solid var(--color-success);
}

.component-row.safety-risky {
  border-left: 4px solid var(--color-warning);
}

.component-row.safety-forbidden {
  border-left: 4px solid var(--color-error);
}

.tree-node.safety-safe .node-header {
  border-left: 4px solid var(--color-success);
}

.tree-node.safety-risky .node-header {
  border-left: 4px solid var(--color-warning);
}

.tree-node.safety-forbidden .node-header {
  border-left: 4px solid var(--color-error);
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 底部操作区域样式 */
.hierarchy-operations {
  margin-top: var(--spacing-xl);
  padding: var(--spacing-xl);
  background: var(--color-bg-secondary);
  border-radius: var(--size-border-radius);
  border: 1px solid var(--color-border-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.operation-buttons {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
}

.operation-info {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.continue-btn {
  padding: var(--spacing-md) var(--spacing-xl);
  border: none;
  border-radius: var(--size-border-radius-button);
  background: var(--color-primary-gradient);
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all var(--transition-duration) var(--transition-timing);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  box-shadow: 0 2px 8px var(--color-primary-rgb);
}

.continue-btn:hover {
  background: var(--color-primary-gradient-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--color-primary-rgb);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hierarchy-header {
    flex-direction: column;
    gap: var(--spacing-lg);
  }

  .hierarchy-controls {
    flex-direction: column;
    width: 100%;
    gap: var(--spacing-sm);
  }

  .view-switcher {
    width: 100%;
    justify-content: center;
  }

  .analysis-overview .overview-cards {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .hierarchy-operations {
    flex-direction: column;
    gap: var(--spacing-md);
    text-align: center;
  }
}
</style>