<template>
  <div id="app" :style="customStyles">
    <router-view v-slot="{ Component }">
      <transition name="fade" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useAuthStore } from '@/stores/auth'

const auth = useAuthStore()

const customStyles = computed(() => {
  if (!auth.tenant) return {}
  return {
    '--color-primary': auth.tenant.primary_color || '#2563eb',
    '--color-secondary': auth.tenant.secondary_color || '#64748b',
  }
})
</script>

<style>
#app {
  min-height: 100vh;
  background-color: #f8fafc;
}
</style>