/* La testata di pagina (components/_page_header), uguale in tutta l'app: fascia bianca a tutta
   larghezza (esce dal contenitore .page con margine negativo e larghezza di schermo, meno la
   colonna delle sezioni), una riga da 76 px (riempimento 16/24 come le testate iPad del designer,
   con dentro i bottoni da 44): freccia blu, titolo 700 20 con accanto il contesto 600 16 grigio, a
   destra le azioni. Sotto, 16 px di stacco dal contenuto, lo stesso passo delle sue schermate. Come la testata delle schermate iPad del designer.
   Resta ferma in cima mentre la pagina scorre (Mattias, 20/10/2026), sotto i pannelli e
   sopra il contenuto. */
.page-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: calc(100vw - var(--side-nav-width));
  min-height: 4.75rem;
  margin: 0 0 1rem calc(50% - 50vw + var(--side-nav-width) / 2);
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--app-border);
  background: var(--app-surface);
}

/* Dentro .page la fascia risale del riempimento in alto del contenitore, così parte dal bordo
   dello schermo come nel nuovo ordine (dove sta fuori da .page): stessa altezza su ogni pagina. */
.page > .page-header {
  margin-top: -0.75rem;
}

/* La freccia come il Button-Icon del mockup Figma: trasparente, raggio 8, freccia blu da 24 px. */
.page-header__back,
.page-header__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--touch);
  height: var(--touch);
  border: 0;
  border-radius: var(--radius);
  color: var(--app-accent);
  cursor: pointer;
  background: transparent;
}

.page-header__icon {
  color: var(--app-placeholder);
}

/* Senza freccia (la Home) resta il suo spazio: il titolo parte sempre dallo stesso punto. */
.page-header__back--none {
  pointer-events: none;
}

.page-header__back:hover,
.page-header__back:active,
.page-header__icon:hover,
.page-header__icon[aria-expanded="true"] {
  background: var(--app-accent-faint);
}

.page-header__icon:hover,
.page-header__icon[aria-expanded="true"] {
  color: var(--app-accent);
}

.page-header__back .icon,
.page-header__icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* Titolo e contesto sulla stessa riga; il contesto si taglia coi puntini, il titolo no. */
.page-header__text {
  display: flex;
  flex: 1;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}

.page-header__title {
  flex: none;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.page-header__meta {
  display: flex;
  flex: 0 1 auto;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--app-placeholder);
}

.page-header__meta::before {
  content: "·";
}

.page-header__meta strong {
  font-weight: inherit;
  color: inherit;
}

.page-header__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.75rem;
}

@media (max-width: 900px) {
  .page-header {
    padding: 0.75rem 1rem;
  }

  .page > .page-header {
    margin-top: -1rem;
  }

  /* Tablet in verticale (23/10/2026): il contesto non si nasconde più (l'ordine perdeva il nome
     del cliente), va sotto il titolo su una riga, 12, coi puntini se non ci sta. */
  .page-header__text {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
  }

  .page-header__title {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .page-header__meta {
    display: block;
    max-width: 100%;
    font-size: 0.75rem;
  }

  .page-header__meta::before {
    content: none;
  }
}