/* La navigazione laterale dell'iPad (components/_side_nav): la tab bar di Figma in verticale.
   Colonna bianca da 88 px sul bordo sinistro con la riga grigia, voci con l'icona da 24 px e la
   scritta 600 10 px, la sezione aperta in blu su fondo Electric blue-Ultralight; sulla voce
   WhatsApp il numero in un cerchio rosso (le novità devono vedersi). */

.side-nav {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  width: 5.5rem;
  padding: 0.75rem 0.5rem;
  overflow-y: auto;
  border-right: 1px solid var(--app-border);
  background: var(--app-surface);
}

.side-nav__item {
  display: flex;
  width: 100%;
  border: 0;
  font: inherit;
  cursor: pointer;
  background: transparent;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 3.25rem;
  padding: 0.375rem 0.25rem;
  border-radius: var(--radius);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  text-decoration: none;
  color: var(--app-placeholder);
}

/* Come ogni elemento grigio: al passaggio del mouse blu su azzurro chiaro (application.css). */
.with-mouse .side-nav__item:hover {
  color: var(--app-accent);
  background: var(--app-accent-faint);
}

.side-nav__item--active {
  color: var(--app-accent);
  background: var(--app-accent-faint);
}

.side-nav__icon {
  position: relative;
  display: inline-flex;
}

.side-nav__icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* Ancorato a sinistra, a 3/4 dell'icona: un numero a tre cifre cresce verso destra e non copre l'icona. */
.side-nav__count {
  position: absolute;
  top: -0.375rem;
  left: calc(100% - 0.5rem);
  display: inline-grid;
  place-items: center;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.25rem;
  border: 2px solid var(--app-surface);
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: var(--app-on-color);
  background: var(--app-danger);
}

/* Appena arriva un ordine il numero pulsa tre volte. */
.side-nav__item.order-alert--arrived .side-nav__count {
  animation: side-nav-arrived 0.6s ease-in-out 3;
}

@keyframes side-nav-arrived {
  50% {
    box-shadow: 0 0 0 4px rgba(185, 28, 28, 0.25);
    transform: scale(1.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .side-nav__item.order-alert--arrived .side-nav__count {
    animation: none;
  }
}


/* Tablet in verticale (Mattias, 23/10/2026: «come nei cellulari»): le sezioni tornano la tab bar di
   Figma in basso, a tutta larghezza, sotto la barra di stato; la pagina riprende gli 88 px della
   colonna. Voci uguali, icona 24 e scritta 10 come in colonna. */
@media (max-width: 900px) {
  :root {
    --side-nav-width: 0px;
    --tabbar-height: 4rem;
  }

  .side-nav {
    top: auto;
    right: 0;
    flex-direction: row;
    gap: 0.25rem;
    width: auto;
    height: var(--tabbar-height);
    padding: 0.375rem 0.5rem;
    overflow: visible;
    border-top: 1px solid var(--app-border);
    border-right: 0;
  }

  .side-nav__item {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
  }
}

/* L'interruttore del tema in fondo alla colonna (components/_side_nav): una levetta con il sole a
   sinistra e la luna a destra, il pomello blu sopra il tema in uso (Mattias, 25/10/2026: il simbolo
   semplice non piaceva). La scritta sotto dice dove si va. In verticale è una voce come le altre. */
.side-nav__theme {
  margin-top: auto;
}

.theme-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 2.75rem;
  height: 1.5rem;
  padding: 0 0.25rem;
  border: 1px solid var(--app-border);
  border-radius: 999px;
  background: var(--app-surface-muted);
}

.theme-pill .icon {
  position: relative;
  z-index: 1;
  width: 0.875rem;
  height: 0.875rem;
  color: var(--app-placeholder);
  transition: color 0.2s;
}

.theme-pill__knob {
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--app-accent);
  transition: transform 0.2s cubic-bezier(0.22, 0.8, 0.24, 1);
}

.theme-pill__sun {
  color: var(--app-on-color);
}

:root[data-theme="dark"] .theme-pill__knob {
  transform: translateX(1.25rem);
}

:root[data-theme="dark"] .theme-pill__sun {
  color: var(--app-placeholder);
}

:root[data-theme="dark"] .theme-pill .theme-pill__moon {
  color: var(--app-on-color);
}

.side-nav__theme-light,
:root[data-theme="dark"] .side-nav__theme-dark {
  display: none;
}

:root[data-theme="dark"] .side-nav__theme-light {
  display: inline;
}

@media (max-width: 900px) {
  .side-nav__theme {
    margin-top: 0;
  }
}