<template>
  <q-page class="admin-index-page">
    <div class="admin-index-shell">
      <p class="eyebrow">Admin</p>
      <h1>Control Center</h1>
      <p class="subtitle">Accesso rapido agli strumenti di amministrazione del backend.</p>

      <q-card flat bordered class="admin-entry-card">
        <q-card-section class="row items-center justify-between q-col-gutter-md">
          <div class="col-12 col-md">
            <div class="text-overline text-primary">Gestione utenti</div>
            <div class="text-h6">Users</div>
            <div class="text-body2 text-grey-7">
              Crea, modifica ed elimina utenti con dettagli e preferenze.
            </div>
          </div>
          <div class="col-12 col-md-auto">
            <q-btn color="primary" icon="manage_accounts" label="Apri pagina utenti" to="/admin/users" />
          </div>
        </q-card-section>
      </q-card>
    </div>
  </q-page>
</template>

<style scoped>
.admin-index-page {
  background:
    radial-gradient(circle at top left, rgba(33, 150, 243, 0.14), transparent 30%),
    linear-gradient(180deg, #f7fbff 0%, #eef3f8 100%);
}

.admin-index-shell {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 20px 48px;
}

.eyebrow {
  margin: 0 0 10px;
  color: #1565c0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: 1;
}

.subtitle {
  max-width: 640px;
  margin: 14px 0 28px;
  color: #546273;
  font-size: 1rem;
}

.admin-entry-card {
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
}
</style>
