<script setup lang="ts">
import { ref } from 'vue'
import Dashboard from './views/Dashboard.vue'

const dark = ref(window.matchMedia('(prefers-color-scheme: dark)').matches)

function toggleDark() { dark.value = !dark.value }
</script>

<style scoped lang="scss">
.app-wrap {
  height: 100vh;
  overflow: hidden;
}

.theme-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 500;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 18px;
  color: var(--text);
  transition: background 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);

  &:hover { background: var(--hover); }
}
</style>

<template>
  <div class="app-wrap" :class="{ dark }">
    <button class="theme-toggle" @click="toggleDark">
      {{ dark ? '☀️' : '🌙' }}
    </button>
    <Dashboard :dark="dark" />
  </div>
</template>
