<script setup>
import VideoMonitor from './VideoMonitor.vue'
import DataChart from './DataChart.vue'
</script>

<template>
  <div class="center-panel-container">
    <div class="video-section">
      <VideoMonitor />
    </div>
    <div class="chart-section">
      <DataChart />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.center-panel-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;

  .video-section {
    flex: 3;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    backdrop-filter: blur(4px);
    overflow: hidden;
  }

  .chart-section {
    flex: 2;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    backdrop-filter: blur(4px);
    overflow: hidden;
  }
}
</style>