/* ==========================================================================
   LyamFlow — Landing / Replica dell'interfaccia reale
   --------------------------------------------------------------------------
   Dentro i mockup non ci sono screenshot: c'è l'interfaccia vera di LyamFlow,
   ricostruita in HTML+CSS a partire dai componenti dell'app
   (AdminLayout, StatCard, AreaChart, DonutChart, BarChart, ReservationCard,
   FloorPlan, FloorElement, fineServizio/*).

   Perché non immagini: resta nitida a qualsiasi densità, pesa ~20 KB invece
   di ~1 MB, si anima davvero (contatori, grafici, prenotazioni che arrivano)
   e non invecchia quando l'app cambia colore.

   Tutto è dimensionato in `em` rispetto a `--ui-scale`, così la stessa
   interfaccia entra in un MacBook, in un iPad o in un iPhone senza duplicare
   il markup.
   ========================================================================== */

.ui {
  --ui-scale: 1;
  /* Token dell'app in tema scuro (src/index.css) */
  --ui-bg: hsl(224 24% 5%);
  --ui-card: hsl(224 20% 8%);
  --ui-muted-bg: hsl(223 15% 14%);
  --ui-fg: hsl(210 20% 96%);
  --ui-muted: hsl(218 11% 62%);
  --ui-line: hsl(223 14% 17%);
  --ui-primary: hsl(205 100% 62%);
  --ui-success: hsl(152 50% 44%);
  --ui-warning: hsl(38 88% 56%);
  --ui-danger: hsl(0 63% 50%);
  --ui-radius: 0.875rem;

  position: absolute;
  inset: 0;
  display: flex;
  font-size: calc(var(--ui-scale) * 1rem);
  font-family: var(--lf-font);
  color: var(--ui-fg);
  background: var(--ui-bg);
  overflow: hidden;
  /* L'interfaccia dentro al mockup è decorativa: la racconta il testo attorno */
  user-select: none;
}

/*
 * La misura dell'interfaccia segue la larghezza reale del mockup, non quella
 * della finestra. I mockup hanno `aspect-ratio` fissa: restringendo la pagina
 * lo schermo dimezza l'altezza, e con un `font-size` fermo il contenuto non
 * ci sta più (il grafico del fine servizio finiva schiacciato a 11px).
 *
 * `--ui-ref` è la larghezza in px a cui `--ui-scale` è stato tarato: sotto
 * quella misura tutto rimpicciolisce in proporzione, sopra torna identico.
 */
@supports (container-type: inline-size) {
  .lf-mac__screen,
  .lf-pad__screen,
  .lf-phone__screen,
  .lf-ultrawide__screen,
  .lf-fix__pane {
    container-type: inline-size;
  }

  .lf-mac__screen {
    --ui-ref: 1160;
  }
  .lf-fix__pane {
    --ui-ref: 1200;
  }
  .lf-pad__screen {
    --ui-ref: 626;
  }
  .lf-ultrawide__screen {
    --ui-ref: 630;
  }
  .lf-phone__screen {
    --ui-ref: 162;
  }

  .ui {
    font-size: calc(var(--ui-scale) * 16 * 100cqw / var(--ui-ref, 1160));
  }
}

.ui * {
  box-sizing: border-box;
}

/* ==========================================================================
   Sidebar (AdminLayout)
   ========================================================================== */
.ui__side {
  width: 13.5em;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.9em;
  padding: 0.95em 0.7em;
  border-right: 1px solid var(--ui-line);
  background: hsl(224 22% 6.5%);
}

.ui__brand {
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.2em 0.35em 0.6em;
}

.ui__brand-mark {
  width: 1.6em;
  height: 1.6em;
  flex: none;
  border-radius: 0.45em;
  background: hsl(210 20% 96%);
  display: grid;
  place-items: center;
}

.ui__brand-mark svg {
  width: 1em;
  height: 1em;
}

.ui__brand-text {
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.ui__brand-text span {
  display: block;
  font-size: 0.66em;
  font-weight: 550;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ui-muted);
}

/* Selettore ristorante */
.ui__tenant {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 0.6em;
  border-radius: 0.7em;
  border: 1px solid var(--ui-line);
  background: var(--ui-card);
  font-size: 0.68em;
}

.ui__tenant b {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ui__tenant-dot {
  width: 1.4em;
  height: 1.4em;
  flex: none;
  border-radius: 0.4em;
  background: linear-gradient(140deg, hsl(205 100% 58%), hsl(265 88% 62%));
}

.ui__nav {
  display: flex;
  flex-direction: column;
  gap: 0.12em;
}

.ui__nav-item {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.5em 0.6em;
  border-radius: 0.6em;
  font-size: 0.72em;
  font-weight: 500;
  color: var(--ui-muted);
  transition: background-color 0.3s var(--lf-ease), color 0.3s var(--lf-ease);
}

.ui__nav-item svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  opacity: 0.85;
}

.ui__nav-item.is-active {
  background: hsl(210 40% 98% / 0.08);
  color: var(--ui-fg);
}

.ui__side-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 0.6em;
  border-radius: 0.7em;
  border: 1px solid var(--ui-line);
  font-size: 0.66em;
  color: var(--ui-muted);
}

.ui__avatar {
  width: 1.5em;
  height: 1.5em;
  flex: none;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.85em;
  font-weight: 600;
  color: hsl(222 47% 11%);
  background: hsl(205 100% 72%);
}

/* ==========================================================================
   Area principale
   ========================================================================== */
.ui__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ui__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0.85em 1.1em;
  border-bottom: 1px solid var(--ui-line);
}

.ui__title {
  font-size: 1.05em;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.ui__subtitle {
  font-size: 0.68em;
  color: var(--ui-muted);
  margin-top: 0.25em;
}

.ui__topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.45em;
}

.ui__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  height: 1.9em;
  padding-inline: 0.7em;
  border-radius: 0.6em;
  border: 1px solid var(--ui-line);
  font-size: 0.68em;
  font-weight: 550;
  color: var(--ui-fg);
  background: var(--ui-card);
}

.ui__btn--primary {
  background: hsl(210 20% 96%);
  color: hsl(222 47% 11%);
  border-color: transparent;
}

.ui__body {
  flex: 1;
  min-height: 0;
  padding: 0.9em 1.1em;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  overflow: hidden;
}

/* ==========================================================================
   StatCard (src/components/dashboard/StatCard.tsx)
   ========================================================================== */
.ui__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6em;
}

.ui-stat {
  position: relative;
  padding: 0.75em;
  border-radius: 0.9em;
  border: 1px solid var(--ui-line);
  background: var(--ui-card);
  overflow: hidden;
}

/* L'alone in alto a destra della StatCard vera */
.ui-stat::before {
  content: '';
  position: absolute;
  top: -2.4em;
  right: -2.4em;
  width: 5em;
  height: 5em;
  border-radius: 999px;
  background: hsl(205 100% 58% / 0.1);
  filter: blur(1.2em);
}

.ui-stat__row {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.4em;
}

.ui-stat__icon {
  width: 1.7em;
  height: 1.7em;
  border-radius: 0.55em;
  display: grid;
  place-items: center;
  background: hsl(205 100% 58% / 0.12);
  color: hsl(205 100% 74%);
}

.ui-stat__icon svg {
  width: 0.95em;
  height: 0.95em;
}

.ui-stat__trend {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  padding: 0.1em 0.4em;
  border-radius: 999px;
  font-size: 0.58em;
  font-weight: 550;
  background: hsl(152 60% 44% / 0.12);
  color: hsl(152 60% 66%);
}

.ui-stat__trend svg {
  width: 0.8em;
  height: 0.8em;
}

.ui-stat__value {
  position: relative;
  margin-top: 0.7em;
  font-family: var(--lf-font-display);
  font-size: 1.5em;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ui-stat__value span {
  font-size: 0.66em;
  color: var(--ui-muted);
}

.ui-stat__label {
  position: relative;
  margin-top: 0.4em;
  font-size: 0.68em;
  font-weight: 550;
}

.ui-stat__hint {
  position: relative;
  font-size: 0.6em;
  color: var(--ui-muted);
}

/* ==========================================================================
   Card e grafici
   ========================================================================== */
.ui__grid {
  display: grid;
  gap: 0.6em;
  min-height: 0;
}

.ui__grid--2-1 {
  grid-template-columns: 2fr 1fr;
}

.ui__grid--1-1 {
  grid-template-columns: 1fr 1fr;
}

.ui-card {
  display: flex;
  flex-direction: column;
  padding: 0.8em;
  border-radius: 0.9em;
  border: 1px solid var(--ui-line);
  background: var(--ui-card);
  min-height: 0;
  overflow: hidden;
}

.ui-card__title {
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.ui-card__desc {
  font-size: 0.62em;
  color: var(--ui-muted);
  margin-top: 0.15em;
}

.ui-card__body {
  flex: 1;
  min-height: 0;
  margin-top: 0.6em;
}

/* --- AreaChart --------------------------------------------------------- */
.ui-area {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ui-area__grid {
  stroke: var(--ui-line);
  stroke-dasharray: 3 5;
  stroke-width: 1;
}

.ui-area__line {
  fill: none;
  stroke: var(--ui-primary);
  stroke-width: 2.5;
  stroke-linecap: round;
  /* La linea si disegna quando la sezione entra in vista (JS toglie l'offset) */
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
}

.ui-area__line.is-drawn {
  transition: stroke-dashoffset 1.5s var(--lf-ease);
  stroke-dashoffset: 0;
}

.ui-area__fill {
  opacity: 0;
  transition: opacity 0.8s var(--lf-ease) 0.4s;
}

.ui-area__fill.is-drawn {
  opacity: 1;
}

.ui-area__label {
  fill: var(--ui-muted);
  font-size: 11px;
  text-anchor: middle;
}

.ui-area__cursor {
  stroke: var(--ui-primary);
  stroke-opacity: 0.3;
  stroke-width: 1.5;
}

.ui-area__knob {
  fill: var(--ui-bg);
  stroke: var(--ui-primary);
  stroke-width: 2.5;
}

/* --- DonutChart -------------------------------------------------------- */
.ui-donut {
  display: flex;
  align-items: center;
  gap: 0.8em;
}

.ui-donut svg {
  width: 4.6em;
  height: 4.6em;
  flex: none;
  transform: rotate(-90deg);
}

.ui-donut__track {
  fill: none;
  stroke: var(--ui-muted-bg);
  stroke-width: 10;
}

.ui-donut__arc {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 251;
  stroke-dashoffset: 251;
}

.ui-donut__arc.is-drawn {
  transition: stroke-dashoffset 1.3s var(--lf-ease);
}

.ui-donut__legend {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  font-size: 0.65em;
}

.ui-donut__legend div {
  display: flex;
  align-items: center;
  gap: 0.45em;
}

.ui-donut__legend i {
  width: 0.5em;
  height: 0.5em;
  border-radius: 999px;
  flex: none;
}

.ui-donut__legend b {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--ui-muted);
  font-weight: 550;
}

/* --- BarChart ---------------------------------------------------------- */
.ui-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.4em;
  height: 100%;
  /* Il contenitore della card ha altezza automatica, quindi `height: 100%` non
     ha su cosa risolversi: è questo minimo a dare al grafico la sua statura. */
  min-height: 6.5em;
}

.ui-bars__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
  height: 100%;
  justify-content: flex-end;
}

/*
 * Pista della colonna: prende l'altezza che avanza sotto l'etichetta e fa da
 * riferimento all'altezza percentuale della barra. Senza, la barra è sorella
 * dell'etichetta in un flex column e viene compressa dal flex-shrink: 100% e
 * 74% finivano per disegnare la stessa barra.
 */
.ui-bars__track {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
}

.ui-bars__bar {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  border-radius: 0.35em 0.35em 0.15em 0.15em;
  background: linear-gradient(180deg, hsl(205 100% 62%), hsl(205 100% 48%));
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 0.8s var(--lf-ease);
  transition-delay: var(--d, 0s);
}

.ui-bars__bar.is-drawn {
  transform: scaleY(1);
}

.ui-bars__label {
  font-size: 0.55em;
  color: var(--ui-muted);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   ReservationCard (src/components/reservations/ReservationCard.tsx)
   ========================================================================== */
.ui-res {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.55em 0.65em;
  border-radius: 0.75em;
  border: 1px solid var(--ui-line);
  background: hsl(224 20% 9%);
}

/* Le prenotazioni che "arrivano dal vivo" entrano da destra */
.ui-res.is-new {
  animation: ui-res-in 0.7s var(--lf-ease) both;
}

@keyframes ui-res-in {
  from {
    opacity: 0;
    transform: translate3d(1.5em, 0, 0) scale(0.97);
  }
}

.ui-res__avatar {
  width: 1.9em;
  height: 1.9em;
  flex: none;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: hsl(222 47% 11%);
  background: hsl(205 100% 76%);
}

.ui-res__main {
  min-width: 0;
  flex: 1;
}

.ui-res__name {
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-res__meta {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.15em;
  font-size: 0.62em;
  color: var(--ui-muted);
  font-variant-numeric: tabular-nums;
}

.ui-res__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}

.ui-res__meta svg {
  width: 0.85em;
  height: 0.85em;
}

/* Badge di stato: gli stessi quattro stati del gestionale */
.ui-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.15em 0.5em;
  border-radius: 999px;
  font-size: 0.58em;
  font-weight: 550;
  white-space: nowrap;
}

.ui-tag--confirmed {
  color: hsl(152 60% 70%);
  background: hsl(152 50% 44% / 0.14);
  box-shadow: inset 0 0 0 1px hsl(152 50% 44% / 0.28);
}

.ui-tag--pending {
  color: hsl(38 92% 74%);
  background: hsl(38 88% 56% / 0.14);
  box-shadow: inset 0 0 0 1px hsl(38 88% 56% / 0.28);
}

.ui-tag--seated {
  color: hsl(205 100% 78%);
  background: hsl(205 100% 58% / 0.14);
  box-shadow: inset 0 0 0 1px hsl(205 100% 58% / 0.28);
}

.ui-tag--done {
  color: var(--ui-muted);
  background: hsl(223 15% 14%);
  box-shadow: inset 0 0 0 1px var(--ui-line);
}

/* ==========================================================================
   Piantina della sala (FloorPlan.tsx + FloorElement.tsx)
   --------------------------------------------------------------------------
   Come nell'app: x/y in percentuale del riquadro, così la mappa è identica
   su ogni schermo. Le forme e i colori replicano tableSize()/elementPreset().
   ========================================================================== */
.ui-plan {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 0.9em;
  border: 1px solid var(--ui-line);
  background:
    radial-gradient(80% 60% at 50% 0%, hsl(205 100% 58% / 0.06), transparent 70%),
    hsl(224 22% 6.5%);
  overflow: hidden;
}

/* Griglia della piantina, a passo 2,5% come lo snap dell'editor */
.ui-plan__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, hsl(223 14% 24% / 0.5) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(223 14% 24% / 0.5) 1px, transparent 1px);
  background-size: 8% 12.5%;
  -webkit-mask-image: radial-gradient(90% 90% at 50% 50%, #000 40%, transparent 100%);
  mask-image: radial-gradient(90% 90% at 50% 50%, #000 40%, transparent 100%);
}

/* Elementi della sala: vetrata, ingresso, cucina, bar… */
.ui-plan__el {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  border-radius: 0.4em;
  border: 1px solid;
  font-size: 0.55em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.ui-plan__el svg {
  width: 1em;
  height: 1em;
  opacity: 0.8;
}

.ui-plan__el--window {
  border-color: hsl(205 100% 58% / 0.35);
  background: hsl(205 100% 58% / 0.08);
  color: hsl(205 100% 76%);
}

.ui-plan__el--door {
  border-color: hsl(152 50% 44% / 0.35);
  background: hsl(152 50% 44% / 0.08);
  color: hsl(152 60% 70%);
}

.ui-plan__el--neutral {
  border-color: var(--ui-line);
  background: hsl(223 15% 14% / 0.7);
  color: var(--ui-muted);
}

/* Tavolo */
.ui-table {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border: 1.5px solid;
  transition:
    background-color 0.5s var(--lf-ease),
    border-color 0.5s var(--lf-ease),
    color 0.5s var(--lf-ease),
    box-shadow 0.5s var(--lf-ease),
    transform 0.7s var(--lf-ease);
  font-size: 0.62em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  z-index: 2;
}

/* L'altezza viene dalla proporzione, non da una percentuale: vedi il commento
   in buildFloorPlan(). Tondi e quadrati restano tali anche in una miniatura
   larga cinque volte la sua altezza. */
.ui-table--round {
  border-radius: 999px;
  aspect-ratio: 1;
}
.ui-table--square {
  border-radius: 0.35em;
  aspect-ratio: 1;
}
.ui-table--rect {
  border-radius: 0.35em;
  /* 1.55 : 0.75 — le stesse proporzioni del tavolo da banchetto */
  aspect-ratio: 31 / 15;
}

/* Stati: liberi (verde), occupati (rosso), selezionato (brand) — come l'app */
.ui-table--free {
  border-color: hsl(152 50% 44% / 0.5);
  background: hsl(152 50% 44% / 0.12);
  color: hsl(152 60% 74%);
}

.ui-table--busy {
  border-color: hsl(0 63% 50% / 0.5);
  background: hsl(0 63% 50% / 0.12);
  color: hsl(0 80% 78%);
}

.ui-table--sel {
  border-color: hsl(205 100% 62%);
  background: hsl(205 100% 58% / 0.2);
  color: hsl(205 100% 84%);
  box-shadow: 0 0 0 3px hsl(205 100% 58% / 0.18), 0 0 30px -4px hsl(205 100% 58% / 0.8);
  z-index: 3;
}

/* Sedie intorno al tavolo, come le disegna FloorPlan a partire dai posti */
.ui-table__seat {
  position: absolute;
  width: 0.34em;
  height: 0.34em;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.4;
}

/* Il tavolo che viene trascinato dall'animazione */
.ui-table.is-dragging {
  box-shadow: 0 10px 30px -6px rgb(0 0 0 / 0.8), 0 0 0 3px hsl(205 100% 58% / 0.25);
  transform: translate(-50%, -50%) scale(1.08);
  z-index: 4;
}

/* Alone che pulsa quando arriva una prenotazione su quel tavolo */
.ui-table.is-alert::after {
  content: '';
  position: absolute;
  inset: -0.25em;
  border-radius: inherit;
  border: 1.5px solid hsl(205 100% 62%);
  animation: ui-ring 1.6s var(--lf-ease) infinite;
}

@keyframes ui-ring {
  from {
    opacity: 0.9;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.5);
  }
}

/* ==========================================================================
   Toast di prenotazione live (components/notifications/LiveReservations)
   ========================================================================== */
.ui-toast {
  position: absolute;
  right: 0.8em;
  bottom: 0.8em;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 0.6em;
  max-width: 16em;
  padding: 0.6em 0.75em;
  border-radius: 0.8em;
  border: 1px solid hsl(205 100% 58% / 0.3);
  background: hsl(224 20% 9% / 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 44px -18px rgb(0 0 0 / 0.9);
  opacity: 0;
  transform: translate3d(0, 1em, 0) scale(0.96);
  transition:
    opacity 0.5s var(--lf-ease),
    transform 0.5s var(--lf-ease);
}

.ui-toast.is-in {
  opacity: 1;
  transform: none;
}

.ui-toast__icon {
  width: 1.8em;
  height: 1.8em;
  flex: none;
  border-radius: 0.55em;
  display: grid;
  place-items: center;
  background: hsl(205 100% 58% / 0.16);
  color: hsl(205 100% 78%);
}

.ui-toast__icon svg {
  width: 1em;
  height: 1em;
}

.ui-toast__t {
  font-size: 0.68em;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ui-toast__d {
  font-size: 0.6em;
  color: var(--ui-muted);
  margin-top: 0.1em;
}

/* ==========================================================================
   Fine Servizio (components/fineServizio/*)
   ========================================================================== */
.ui-report {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  min-height: 0;
}

.ui-report__hero {
  position: relative;
  padding: 0.85em 1em;
  border-radius: 0.9em;
  border: 1px solid hsl(205 100% 58% / 0.22);
  background:
    radial-gradient(70% 140% at 0% 0%, hsl(205 100% 58% / 0.16), transparent 65%),
    radial-gradient(70% 140% at 100% 100%, hsl(265 88% 62% / 0.14), transparent 65%),
    var(--ui-card);
  overflow: hidden;
}

.ui-report__kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5em;
}

.ui-kpi {
  padding: 0.6em;
  border-radius: 0.7em;
  border: 1px solid var(--ui-line);
  background: hsl(224 20% 9%);
}

.ui-kpi__l {
  display: flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.6em;
  color: var(--ui-muted);
}

.ui-kpi__l svg {
  width: 0.9em;
  height: 0.9em;
}

.ui-kpi__v {
  margin-top: 0.35em;
  font-family: var(--lf-font-display);
  font-size: 1.1em;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* Classifica piatti: barra proporzionale che cresce da sinistra */
.ui-rank {
  display: flex;
  flex-direction: column;
  gap: 0.45em;
}

.ui-rank__row {
  display: grid;
  grid-template-columns: 1.3em 1fr auto;
  align-items: center;
  gap: 0.5em;
  font-size: 0.66em;
}

.ui-rank__pos {
  width: 1.3em;
  height: 1.3em;
  border-radius: 0.35em;
  display: grid;
  place-items: center;
  font-size: 0.8em;
  font-weight: 600;
  background: hsl(223 15% 14%);
  color: var(--ui-muted);
}

.ui-rank__row:first-child .ui-rank__pos {
  background: hsl(38 88% 56% / 0.18);
  color: hsl(38 92% 74%);
}

.ui-rank__bar {
  position: relative;
  height: 1.3em;
  border-radius: 0.35em;
  background: hsl(223 15% 14%);
  overflow: hidden;
}

.ui-rank__fill {
  position: absolute;
  inset: 0;
  transform-origin: left;
  transform: scaleX(0);
  border-radius: inherit;
  background: linear-gradient(90deg, hsl(205 100% 52% / 0.55), hsl(265 88% 62% / 0.55));
  transition: transform 1s var(--lf-ease);
  transition-delay: var(--d, 0s);
}

.ui-rank__fill.is-drawn {
  transform: scaleX(var(--p, 0.5));
}

.ui-rank__name {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding-inline: 0.55em;
  font-size: 0.9em;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-rank__v {
  font-variant-numeric: tabular-nums;
  color: var(--ui-muted);
  font-weight: 550;
}

/* Insight generato dal report */
.ui-insight {
  display: flex;
  gap: 0.55em;
  padding: 0.6em 0.7em;
  border-radius: 0.7em;
  border: 1px solid hsl(152 50% 44% / 0.24);
  background: hsl(152 50% 44% / 0.07);
  font-size: 0.64em;
  line-height: 1.5;
}

.ui-insight svg {
  width: 1em;
  height: 1em;
  flex: none;
  margin-top: 0.15em;
  color: hsl(152 60% 70%);
}

/* ==========================================================================
   Vista mobile (iPhone): la stessa app, impaginata come su telefono
   ========================================================================== */
.ui--mobile {
  flex-direction: column;
}

.ui--mobile .ui__side {
  display: none;
}

.ui--mobile .ui__topbar {
  padding: 2.6em 0.9em 0.7em;
}

.ui--mobile .ui__body {
  padding: 0.8em 0.9em 3.4em;
  gap: 0.6em;
}

.ui--mobile .ui__stats {
  grid-template-columns: 1fr 1fr;
}

.ui--mobile .ui__grid--2-1,
.ui--mobile .ui__grid--1-1 {
  grid-template-columns: 1fr;
}

/* Bottom nav mobile (components/layout/MobileNav.tsx) */
.ui__tabbar {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  justify-content: space-around;
  padding: 0.5em 0.5em 1.1em;
  border-top: 1px solid var(--ui-line);
  background: hsl(224 20% 8% / 0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.ui__tabbar div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2em;
  font-size: 0.52em;
  color: var(--ui-muted);
}

.ui__tabbar div svg {
  width: 1.3em;
  height: 1.3em;
}

.ui__tabbar div.is-active {
  color: hsl(205 100% 76%);
}