<template>
    <div class="bg-surface-50 dark:bg-surface-950 dark:text-gray-100 min-h-svh safe-area-container">
        <Toast />
        <NuxtPage />
    </div>
</template>
<script setup>

import 'primeicons/primeicons.css'

const nuxtApp = useNuxtApp()

async function loadData() {
    // Először betöltjük a tokent (natív appnál Preferences-ből)
    await loadToken()
    const token = getToken()


}

nuxtApp.hooks.hook('app:mounted', async () => {
})

</script>
<style>
/* Safe area kezelés natív appokhoz */
.safe-area-container {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

html {
    font-size: 18px;
    font-family: "Roboto", serif;
}

/* Natívabb érintés - touch highlight kikapcsolása */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* Jobb görgetési élmény */
html,
body {
    overscroll-behavior: none;
}

html:has(.card-loading),
body:has(.card-loading) {

    overflow: hidden;
    /* Tiltsuk a görgetést */

}

.text-center {
    text-align: center;
}

.text-start {
    text-align: start;
}

.text-end {
    text-align: end;
}

.card-loading {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
    z-index: 1;
}

.p-inputotp-input.p-inputtext-sm {
    width: 2rem;
}

.p-message {
    outline: none;
    border-left: 4px;
    border-style: solid;
}

.p-disabled,
.p-component:disabled {
    opacity: 0.2;
}

pre {
    font-size: 13px;
}

</style>