<!-- /src/layouts/DashboardLayout.vue -->
<template>
  <div class="dashboard-layout min-h-screen flex flex-column">
    <AppTopbar />
    <div class="layout-main-container flex flex-grow-1">
      <AppSidebar />
      <main class="layout-main flex-grow-1 p-4 overflow-x-hidden">
        <AppBreadcrumb />
        <router-view />
      </main>
    </div>
  </div>
</template>

<script setup>
import AppTopbar from '@/components/layout/AppTopbar.vue';
import AppSidebar from '@/components/layout/AppSidebar.vue';
import AppBreadcrumb from '@/components/layout/AppBreadcrumb.vue';
</script>

<style scoped lang="scss">
.dashboard-layout {
  background-color: var(--bg-primary);
}

.layout-main {
  min-height: calc(100vh - 60px);
}
</style>
