<script setup>
import PokedexChassis from './components/layout/PokedexChassis.vue'
</script>

<template>
  <PokedexChassis />
</template>

<style>
body {
    margin: 0;
    overflow: hidden;
    background-color: #18181b; 
}

/* 
   CRITICAL: Override child components that rely on screen dimensions 
   to fit within the Pokedex screen container.
*/
.pokedex-screen .h-screen, 
.pokedex-screen .min-h-screen {
    height: 100% !important;
    min-height: 100% !important;
    width: 100% !important;
}

.pokedex-screen .w-screen {
    width: 100% !important;
    padding: 0 !important; /* Reset padding to context */
}

.pokedex-screen .lg\:p-12 {
    padding: 1.5rem !important; /* Scale down padding */
}

.pokedex-screen .fixed {
    position: absolute !important; /* Contain fixed elements like headers */
}

/* Custom Scrollbar for inside the screen */
.pokedex-screen ::-webkit-scrollbar {
    width: 4px;
    background: transparent;
}
.pokedex-screen ::-webkit-scrollbar-thumb {
    background: #dc0a2d;
    border-radius: 2px;
}

/* Reusable custom scrollbar class for content areas */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #3f3f46;
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #52525b;
}
</style>
